/* ===== MD3 设计令牌 ===== */
:root {
  /* 颜色（从 tailwind 同步） */
  --md-primary: #6366f1;
  --md-on-primary: #ffffff;
  --md-primary-container: #e0e2ff;
  --md-on-primary-container: #1e1a6b;
  --md-secondary: #4f46e5;
  --md-surface: #f8f9fa;
  --md-surface-container: #ffffff;
  --md-surface-container-low: #f2f3f5;
  --md-surface-container-high: #e8eaed;
  --md-outline: #797979;
  --md-outline-variant: #c4c4c4;

  /* 阴影（Elevation） */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --md-elevation-2: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --md-elevation-3: 0 8px 16px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
  --md-elevation-4: 0 12px 24px rgba(0,0,0,0.06), 0 6px 12px rgba(0,0,0,0.04);
  --md-elevation-5: 0 16px 32px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04);

  /* 圆角（Shape） */
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
  --md-shape-extra: 24px;
}

/* ===== MD3 通用组件 ===== */

/* 卡片 */
.md3-card {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-medium);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow 0.2s ease;
  border: none;
}
.md3-card:hover {
  box-shadow: var(--md-elevation-2);
}

/* 填充按钮（Filled Button） */
.md3-btn-filled {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  cursor: pointer;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow 0.2s, background 0.2s;
}
.md3-btn-filled:hover {
  box-shadow: var(--md-elevation-2);
  background: #4f46e5;
}

/* 色调按钮（Tonal Button） */
.md3-btn-tonal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.md3-btn-tonal:hover {
  background: #c7c9ff;
}

/* 轮廓按钮（Outlined Button） */
.md3-btn-outlined {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline-variant);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.md3-btn-outlined:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}

/* 芯片（Chip） */
.md3-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.9rem;
  border-radius: 2rem;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.md3-chip.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.md3-chip:hover:not(.active) {
  background: #c7c9ff;
}

/* 输入框（Outlined Text Field） */
.md3-input {
  padding: 0.6rem 1rem;
  border-radius: var(--md-shape-small);
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  font-size: 0.875rem;
  width: 100%;
  transition: border-color 0.2s;
}
.md3-input:focus {
  outline: none;
  border-color: var(--md-primary);
}

/* 分隔线 */
.md3-divider {
  height: 1px;
  background: var(--md-outline-variant);
  border: none;
  margin: 1rem 0;
}

/* 链接 */
.md3-link {
  color: var(--md-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.md3-link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* 毛玻璃导航栏 */
.bg-white\/70 {
    background: rgba(255, 255, 255, 0.7);
}
.backdrop-blur-md {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}