/* Material Design 3 - 核心工具类 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 容器类 */
.m3-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 布局工具 */
.m3-flex { display: flex; }
.m3-flex-col { flex-direction: column; }
.m3-flex-row { flex-direction: row; }
.m3-items-center { align-items: center; }
.m3-justify-center { justify-content: center; }
.m3-justify-between { justify-content: space-between; }
.m3-gap-1 { gap: 4px; }
.m3-gap-2 { gap: 8px; }
.m3-gap-3 { gap: 12px; }
.m3-gap-4 { gap: 16px; }
.m3-gap-6 { gap: 24px; }
.m3-gap-8 { gap: 32px; }

/* 网格系统 */
.m3-grid { display: grid; }
.m3-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.m3-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.m3-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.m3-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 间距系统 */
.m3-p-1 { padding: 4px; }
.m3-p-2 { padding: 8px; }
.m3-p-3 { padding: 12px; }
.m3-p-4 { padding: 16px; }
.m3-p-6 { padding: 24px; }
.m3-p-8 { padding: 32px; }

.m3-pt-1 { padding-top: 4px; }
.m3-pr-1 { padding-right: 4px; }
.m3-pb-1 { padding-bottom: 4px; }
.m3-pl-1 { padding-left: 4px; }

.m3-m-1 { margin: 4px; }
.m3-m-2 { margin: 8px; }
.m3-m-3 { margin: 12px; }
.m3-m-4 { margin: 16px; }
.m3-m-6 { margin: 24px; }
.m3-m-8 { margin: 32px; }

.m3-mt-1 { margin-top: 4px; }
.m3-mr-1 { margin-right: 4px; }
.m3-mb-1 { margin-bottom: 4px; }
.m3-ml-1 { margin-left: 4px; }

/* 排版工具类 */
.m3-text-display-large {
  font: var(--m3-typescale-display-large);
}
.m3-text-display-medium {
  font: var(--m3-typescale-display-medium);
}
.m3-text-display-small {
  font: var(--m3-typescale-display-small);
}

.m3-text-headline-large {
  font: var(--m3-typescale-headline-large);
}
.m3-text-headline-medium {
  font: var(--m3-typescale-headline-medium);
}
.m3-text-headline-small {
  font: var(--m3-typescale-headline-small);
}

.m3-text-title-large {
  font: var(--m3-typescale-title-large);
}
.m3-text-title-medium {
  font: var(--m3-typescale-title-medium);
}
.m3-text-title-small {
  font: var(--m3-typescale-title-small);
}

.m3-text-body-large {
  font: var(--m3-typescale-body-large);
}
.m3-text-body-medium {
  font: var(--m3-typescale-body-medium);
}
.m3-text-body-small {
  font: var(--m3-typescale-body-small);
}

.m3-text-label-large {
  font: var(--m3-typescale-label-large);
}
.m3-text-label-medium {
  font: var(--m3-typescale-label-medium);
}
.m3-text-label-small {
  font: var(--m3-typescale-label-small);
}

/* 文本对齐 */
.m3-text-left { text-align: left; }
.m3-text-center { text-align: center; }
.m3-text-right { text-align: right; }

/* 文本颜色 */
.m3-color-primary { color: var(--m3-sys-primary); }
.m3-color-on-primary { color: var(--m3-sys-on-primary); }
.m3-color-primary-container { color: var(--m3-sys-primary-container); }
.m3-color-on-primary-container { color: var(--m3-sys-on-primary-container); }

.m3-color-secondary { color: var(--m3-sys-secondary); }
.m3-color-on-secondary { color: var(--m3-sys-on-secondary); }
.m3-color-secondary-container { color: var(--m3-sys-secondary-container); }
.m3-color-on-secondary-container { color: var(--m3-sys-on-secondary-container); }

.m3-color-tertiary { color: var(--m3-sys-tertiary); }
.m3-color-on-tertiary { color: var(--m3-sys-on-tertiary); }
.m3-color-tertiary-container { color: var(--m3-sys-tertiary-container); }
.m3-color-on-tertiary-container { color: var(--m3-sys-on-tertiary-container); }

.m3-color-surface { color: var(--m3-sys-surface); }
.m3-color-on-surface { color: var(--m3-sys-on-surface); }
.m3-color-surface-container { color: var(--m3-sys-surface-container); }
.m3-color-on-surface-variant { color: var(--m3-sys-on-surface-variant); }

.m3-color-error { color: var(--m3-sys-error); }
.m3-color-on-error { color: var(--m3-sys-on-error); }
.m3-color-error-container { color: var(--m3-sys-error-container); }
.m3-color-on-error-container { color: var(--m3-sys-on-error-container); }

.m3-color-outline { color: var(--m3-sys-outline); }
.m3-color-outline-variant { color: var(--m3-sys-outline-variant); }

/* 背景颜色 */
.m3-bg-primary { background-color: var(--m3-sys-primary); }
.m3-bg-on-primary { background-color: var(--m3-sys-on-primary); }
.m3-bg-primary-container { background-color: var(--m3-sys-primary-container); }
.m3-bg-on-primary-container { background-color: var(--m3-sys-on-primary-container); }

.m3-bg-secondary { background-color: var(--m3-sys-secondary); }
.m3-bg-on-secondary { background-color: var(--m3-sys-on-secondary); }
.m3-bg-secondary-container { background-color: var(--m3-sys-secondary-container); }
.m3-bg-on-secondary-container { background-color: var(--m3-sys-on-secondary-container); }

.m3-bg-tertiary { background-color: var(--m3-sys-tertiary); }
.m3-bg-on-tertiary { background-color: var(--m3-sys-on-tertiary); }
.m3-bg-tertiary-container { background-color: var(--m3-sys-tertiary-container); }
.m3-bg-on-tertiary-container { background-color: var(--m3-sys-on-tertiary-container); }

.m3-bg-surface { background-color: var(--m3-sys-surface); }
.m3-bg-surface-dim { background-color: var(--m3-sys-surface-dim); }
.m3-bg-surface-bright { background-color: var(--m3-sys-surface-bright); }
.m3-bg-surface-container-lowest { background-color: var(--m3-sys-surface-container-lowest); }
.m3-bg-surface-container-low { background-color: var(--m3-sys-surface-container-low); }
.m3-bg-surface-container { background-color: var(--m3-sys-surface-container); }
.m3-bg-surface-container-high { background-color: var(--m3-sys-surface-container-high); }
.m3-bg-surface-container-highest { background-color: var(--m3-sys-surface-container-highest); }

.m3-bg-error { background-color: var(--m3-sys-error); }
.m3-bg-on-error { background-color: var(--m3-sys-on-error); }
.m3-bg-error-container { background-color: var(--m3-sys-error-container); }
.m3-bg-on-error-container { background-color: var(--m3-sys-on-error-container); }

/* 形状工具类 */
.m3-shape-extra-small { border-radius: var(--m3-shape-corner-extra-small); }
.m3-shape-small { border-radius: var(--m3-shape-corner-small); }
.m3-shape-medium { border-radius: var(--m3-shape-corner-medium); }
.m3-shape-large { border-radius: var(--m3-shape-corner-large); }
.m3-shape-extra-large { border-radius: var(--m3-shape-corner-extra-large); }
.m3-shape-full { border-radius: var(--m3-shape-corner-full); }

/* 高度工具类 */
.m3-elevation-0 { box-shadow: var(--m3-elevation-0); }
.m3-elevation-1 { box-shadow: var(--m3-elevation-1); }
.m3-elevation-2 { box-shadow: var(--m3-elevation-2); }
.m3-elevation-3 { box-shadow: var(--m3-elevation-3); }
.m3-elevation-4 { box-shadow: var(--m3-elevation-4); }
.m3-elevation-5 { box-shadow: var(--m3-elevation-5); }

/* 状态层混合 */
.m3-state-hover:hover::before,
.m3-state-hover:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: var(--m3-state-hover);
  pointer-events: none;
  border-radius: inherit;
}

.m3-state-focus:focus-visible::before,
.m3-state-focus:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: var(--m3-state-focus);
  pointer-events: none;
  border-radius: inherit;
}

.m3-state-pressed:active::before,
.m3-state-pressed:active::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: var(--m3-state-pressed);
  pointer-events: none;
  border-radius: inherit;
}

/* 涟漪效果 */
.m3-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.2;
  animation: m3-ripple 600ms var(--m3-motion-easing-standard);
  transform: scale(0);
}

@keyframes m3-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 焦点环 */
.m3-focus-ring:focus-visible {
  outline: 2px solid var(--m3-sys-primary);
  outline-offset: 2px;
}

/* 屏幕阅读器专用 */
.m3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 响应式工具 */
@media (max-width: 599px) {
  .m3-mobile-hidden { display: none !important; }
  .m3-mobile-flex { display: flex !important; }
  .m3-mobile-block { display: block !important; }
}

@media (min-width: 600px) and (max-width: 904px) {
  .m3-tablet-hidden { display: none !important; }
  .m3-tablet-flex { display: flex !important; }
  .m3-tablet-block { display: block !important; }
}

@media (min-width: 905px) {
  .m3-desktop-hidden { display: none !important; }
  .m3-desktop-flex { display: flex !important; }
  .m3-desktop-block { display: block !important; }
}

/* 全局过渡 */
.m3-transition-all {
  transition: all var(--m3-motion-duration-medium) var(--m3-motion-easing-standard);
}

.m3-transition-colors {
  transition: color var(--m3-motion-duration-medium) var(--m3-motion-easing-standard),
              background-color var(--m3-motion-duration-medium) var(--m3-motion-easing-standard),
              border-color var(--m3-motion-duration-medium) var(--m3-motion-easing-standard);
}

.m3-transition-transform {
  transition: transform var(--m3-motion-duration-medium) var(--m3-motion-easing-standard);
}