/* ============================================================
   Material Design 3 设计系统 · 克制版
   设计理念：留白、克制的色彩、克制的阴影、清晰的字阶
   ============================================================ */

:root {
  /* ---- 色彩令牌（Light） ---- */
  --md-primary: #3f6452;
  --md-on-primary: #ffffff;
  --md-primary-container: #c2e9d2;
  --md-on-primary-container: #00210f;
  --md-secondary: #506352;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d3e8d2;
  --md-on-secondary-container: #0e1f12;
  --md-tertiary: #3c6467;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #bfe9ed;
  --md-on-tertiary-container: #002022;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-surface: #f7faf5;
  --md-on-surface: #191d19;
  --md-on-surface-muted: #5d655e;
  --md-surface-variant: #dde5db;
  --md-on-surface-variant: #414942;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f1f5ef;
  --md-surface-container: #ebefe9;
  --md-surface-container-high: #e5eae3;
  --md-surface-container-highest: #e0e4de;
  --md-outline: #717a71;
  --md-outline-variant: #c0c9bf;
  --md-inverse-surface: #2e322d;
  --md-inverse-on-surface: #eff2ea;
  --md-inverse-primary: #a6d4b4;
  --md-scrim: rgba(0, 0, 0, 0.4);
  --md-shadow: 0, 0, 0;
  --md-state-hover: rgba(25, 29, 25, 0.06);
  --md-state-press: rgba(25, 29, 25, 0.1);
  --md-code-bg: #f2f5f0;
  --md-code-text: #2b3a30;
  --md-link: #2f5c46;

  /* ---- 形状 ---- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* ---- 阴影（克制） ---- */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px 1px rgba(0, 0, 0, 0.04);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.06);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* ---- 字阶 ---- */
  --fs-display: 2.75rem;
  --fs-headline: 1.75rem;
  --fs-title-l: 1.375rem;
  --fs-title-m: 1rem;
  --fs-title-s: 0.875rem;
  --fs-body-l: 1rem;
  --fs-body-m: 0.875rem;
  --fs-body-s: 0.75rem;
  --fs-label-l: 0.875rem;
  --fs-label-m: 0.75rem;
  --fs-label-s: 0.6875rem;

  --font-sans: 'Roboto', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;

  --appbar-h: 64px;
  --drawer-w: 264px;
  --transition: 200ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme='dark'] {
  --md-primary: #a6d4b4;
  --md-on-primary: #0c3a24;
  --md-primary-container: #285138;
  --md-on-primary-container: #c2e9d2;
  --md-secondary: #b7ccb6;
  --md-on-secondary: #233427;
  --md-secondary-container: #394b3c;
  --md-on-secondary-container: #d3e8d2;
  --md-tertiary: #a3cdd0;
  --md-on-tertiary: #073639;
  --md-tertiary-container: #234d4f;
  --md-on-tertiary-container: #bfe9ed;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-surface: #101310;
  --md-on-surface: #e0e4dd;
  --md-on-surface-muted: #a3aca2;
  --md-surface-variant: #414942;
  --md-on-surface-variant: #c0c9bf;
  --md-surface-container-lowest: #0b0e0b;
  --md-surface-container-low: #181b18;
  --md-surface-container: #1c201c;
  --md-surface-container-high: #272a26;
  --md-surface-container-highest: #313531;
  --md-outline: #8a938a;
  --md-outline-variant: #414942;
  --md-inverse-surface: #e0e4dd;
  --md-inverse-on-surface: #2e322d;
  --md-inverse-primary: #3f6452;
  --md-state-hover: rgba(224, 228, 221, 0.07);
  --md-state-press: rgba(224, 228, 221, 0.11);
  --md-code-bg: #181b18;
  --md-code-text: #c8d6c6;
  --md-link: #a6d4b4;
}

/* ============ Reset & Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: 1.6;
  color: var(--md-on-surface);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--md-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; border-radius: var(--shape-xs); }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 字阶 ============ */
.t-display   { font-size: var(--fs-display);   line-height: 1.15; font-weight: 400; letter-spacing: -0.25px; }
.t-headline  { font-size: var(--fs-headline);  line-height: 1.25; font-weight: 500; }
.t-title-l   { font-size: var(--fs-title-l);   line-height: 1.4;  font-weight: 500; }
.t-title-m   { font-size: var(--fs-title-m);   line-height: 1.5;  font-weight: 500; }
.t-title-s   { font-size: var(--fs-title-s);   line-height: 1.45; font-weight: 500; }
.t-body-l    { font-size: var(--fs-body-l);    line-height: 1.6;  font-weight: 400; }
.t-body-m    { font-size: var(--fs-body-m);    line-height: 1.6;  font-weight: 400; }
.t-body-s    { font-size: var(--fs-body-s);    line-height: 1.6;  font-weight: 400; }
.t-label-l   { font-size: var(--fs-label-l);   line-height: 1.45; font-weight: 500; }
.t-label-m   { font-size: var(--fs-label-m);   line-height: 1.45; font-weight: 500; }
.t-label-s   { font-size: var(--fs-label-s);   line-height: 1.45; font-weight: 500; letter-spacing: 0.3px; }
.muted { color: var(--md-on-surface-muted); }
.mono { font-family: var(--font-mono); }

/* ============ 图标 ============ */
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex-shrink: 0;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms[data-size='sm'] { font-size: 18px; }
.ms[data-size='lg'] { font-size: 28px; }

/* ============ 布局工具 ============ */
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; }
.container-wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--shape-full);
  font-family: var(--font-sans);
  font-size: var(--fs-label-l);
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), background-color var(--transition);
}
.btn:disabled { opacity: 0.38; pointer-events: none; }
.btn > .ms { font-size: 18px; }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-filled:hover { box-shadow: var(--elev-1); }
.btn-filled:active { box-shadow: none; }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-tonal:hover { box-shadow: var(--elev-1); }
.btn-outlined { border: 1px solid var(--md-outline); color: var(--md-primary); background: transparent; }
.btn-outlined:hover { background: var(--md-state-hover); }
.btn-text { color: var(--md-primary); padding: 0 12px; }
.btn-text:hover { background: var(--md-state-hover); }
.btn-danger { color: var(--md-error); }
.btn-danger.btn-outlined { border-color: var(--md-error); }
.btn-danger.btn-tonal { background: var(--md-error-container); color: var(--md-on-error-container); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--shape-full);
  color: var(--md-on-surface-variant);
  transition: background-color var(--transition);
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--md-state-hover); }
.btn-icon:active { background: var(--md-state-press); }
.btn-icon.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-icon.filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-sm { height: 32px; padding: 0 16px; font-size: var(--fs-label-m); }
.btn-block { width: 100%; }

/* 涟漪 */
.ripple {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: 0.12;
  transform: scale(0); pointer-events: none;
  animation: ripple 550ms ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ============ FAB ============ */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; min-width: 56px; padding: 0 20px;
  border-radius: 16px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  box-shadow: var(--elev-3);
  font-weight: 500; font-size: var(--fs-label-l);
  transition: box-shadow var(--transition), transform var(--transition);
  overflow: hidden; position: fixed;
}
.fab:hover { box-shadow: 0 6px 12px 4px rgba(0,0,0,.1); }
.fab:active { transform: scale(0.97); }

/* ============ 卡片 ============ */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--shape-md);
  border: 1px solid transparent;
  transition: box-shadow var(--transition);
}
.card-elevated { box-shadow: var(--elev-1); }
.card-elevated:hover { box-shadow: var(--elev-2); }
.card-outlined { border-color: var(--md-outline-variant); }
.card-filled { background: var(--md-surface-container-highest); }
.card-body { padding: 20px; }
.card-clickable { cursor: pointer; }
.card-clickable:hover { box-shadow: var(--elev-2); }
.card-clickable:active { box-shadow: var(--elev-1); }

/* ============ Chip ============ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-sm);
  background: transparent;
  font-size: var(--fs-label-l); font-weight: 500;
  color: var(--md-on-surface-variant);
  transition: background-color var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
  max-width: 100%;
  flex-shrink: 0;
}
.chip > .ms { font-size: 18px; }
.chip:hover { background: var(--md-state-hover); }
.chip[aria-pressed='true'], .chip.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.chip-input {
  border: none;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-size: var(--fs-label-l);
  min-width: 100px;
}
.chip-input:focus { outline: none; }
.chip .chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 14px; line-height: 1;
  color: var(--md-on-surface-variant);
}
.chip .chip-x:hover { background: var(--md-state-press); }

/* ============ 输入框（Outlined） ============ */
.field {
  position: relative;
  display: block;
  padding-top: 8px;
}
.field-input {
  width: 100%;
  height: 56px;
  padding: 24px 16px 8px;
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-xs);
  background: transparent;
  font-size: var(--fs-body-l);
  color: var(--md-on-surface);
  caret-color: var(--md-primary);
  transition: border-color var(--transition);
  resize: vertical;
}
.field-input:hover { border-color: var(--md-on-surface); }
.field-input:focus { outline: none; border-color: var(--md-primary); border-width: 2px; padding: 23px 15px 7px; }
.field-label {
  position: absolute; left: 16px; top: 25px;
  font-size: var(--fs-body-l);
  color: var(--md-on-surface-variant);
  pointer-events: none;
  transition: all var(--transition);
  background: transparent;
  padding: 0 4px;
}
.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label,
.field-input[data-filled='true'] + .field-label {
  top: 8px;
  font-size: var(--fs-label-s);
  color: var(--md-primary);
  background: var(--field-label-bg, var(--md-surface-container-low));
  border-radius: var(--shape-xs);
}
/* 浮起标签的背景需与所在容器一致 */
.dialog .field { --field-label-bg: var(--md-surface-container-high); }
.field-input:focus + .field-label { color: var(--md-primary); }
.field textarea.field-input { min-height: 112px; height: auto; line-height: 1.6; }
.field-input:disabled { opacity: 0.5; }
.field-helper { display: block; padding: 4px 16px 0; font-size: var(--fs-label-s); color: var(--md-on-surface-variant); }
.field-error .field-input { border-color: var(--md-error); }
.field-error .field-input:focus + .field-label,
.field-error .field-label { color: var(--md-error); }
.field-error .field-helper { color: var(--md-error); }

/* 无标签简洁输入（表格/紧凑场景） */
.input-plain {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-xs);
  background: transparent;
  font-size: var(--fs-body-m);
  color: var(--md-on-surface);
  transition: border-color var(--transition);
}
.input-plain:focus { outline: none; border-color: var(--md-primary); border-width: 2px; padding: 0 11px; }
.input-plain::placeholder { color: var(--md-on-surface-variant); opacity: 0.7; }

/* ============ Select ============ */
.select {
  position: relative; display: inline-block;
}
.select select {
  appearance: none;
  height: 40px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-xs);
  background: transparent;
  font-size: var(--fs-body-m);
  color: var(--md-on-surface);
  cursor: pointer;
  min-width: 120px;
}
.select select:focus { outline: none; border-color: var(--md-primary); border-width: 2px; padding: 0 35px 0 13px; }
.select .ms {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 20px; pointer-events: none; color: var(--md-on-surface-variant);
}

/* ============ Switch ============ */
.switch { position: relative; display: inline-flex; width: 52px; height: 32px; cursor: pointer; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  border-radius: var(--shape-full);
  border: 2px solid var(--md-outline);
  transition: all var(--transition);
}
.switch .thumb {
  position: absolute; top: 5px; left: 5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--md-outline);
  transition: all var(--transition);
}
.switch input:checked + .track { background: var(--md-primary); border-color: var(--md-primary); }
.switch input:checked + .track .thumb { left: 25px; top: 3px; width: 22px; height: 22px; background: var(--md-on-primary); }
.switch input:focus-visible + .track { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* ============ 顶栏 App Bar ============ */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: var(--md-surface);
  transition: box-shadow var(--transition), background-color var(--transition);
}
.app-bar.scrolled { box-shadow: var(--elev-1); background: var(--md-surface-container-low); }
.app-bar .brand { display: flex; align-items: center; gap: 12px; color: var(--md-on-surface); font-weight: 500; font-size: var(--fs-title-l); flex-shrink: 0; }
.app-bar .brand:hover { text-decoration: none; }
.app-bar .brand .logo {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-primary); color: var(--md-on-primary);
}
.app-bar .brand .logo .ms { font-size: 22px; }
.app-bar-title { font-size: var(--fs-title-l); font-weight: 500; }
@media (max-width: 720px) {
  .app-bar .brand { gap: 8px; }
  .app-bar .brand .logo { width: 36px; height: 36px; border-radius: 10px; }
  .app-bar .brand .logo .ms { font-size: 20px; }
}

/* ============ 抽屉 ============ */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 44;
  background: var(--md-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
  width: var(--drawer-w);
  background: var(--md-surface-container-low);
  border-radius: 0 var(--shape-lg) var(--shape-lg) 0;
  display: flex; flex-direction: column;
  transform: translateX(-105%);
  transition: transform var(--transition);
  box-shadow: none;
}
.drawer.open { transform: translateX(0); box-shadow: var(--elev-3); }
.drawer-header { padding: 20px 20px 8px; }
.drawer-header .logo {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-primary); color: var(--md-on-primary);
}
.drawer-nav { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.drawer-item {
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 14px;
  border-radius: var(--shape-full);
  color: var(--md-on-surface-variant);
  font-weight: 500; font-size: var(--fs-label-l);
  transition: background-color var(--transition);
  position: relative; overflow: hidden;
}
.drawer-item:hover { background: var(--md-state-hover); text-decoration: none; }
.drawer-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.drawer-item .badge-dot { margin-left: auto; }
.drawer-footer { padding: 12px; border-top: 1px solid var(--md-outline-variant); }
.drawer-user { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--shape-md); }

/* 桌面抽屉常驻 */
@media (min-width: 960px) {
  .drawer {
    transform: none;
    box-shadow: none;
    border-right: 1px solid var(--md-outline-variant);
    border-radius: 0;
  }
  .drawer-scrim { display: none; }
  .shell-main { margin-left: var(--drawer-w); }
  .app-bar .drawer-toggle { display: none; }
}

/* ============ 头像 ============ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 500; font-size: var(--fs-body-l);
  flex-shrink: 0;
  overflow: hidden;
}
.avatar.sm { width: 28px; height: 28px; font-size: var(--fs-label-m); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-title-l); }

/* ============ 徽标 ============ */
.badge {
  display: inline-flex; align-items: center;
  height: 20px; min-width: 20px; padding: 0 6px;
  border-radius: var(--shape-full);
  background: var(--md-error); color: var(--md-on-error);
  font-size: var(--fs-label-s); font-weight: 500;
}
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--md-error); }

/* ============ 对话框 ============ */
.dialog-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--md-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.dialog-scrim.open { opacity: 1; pointer-events: auto; }
.dialog {
  width: 100%; max-width: 480px; max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--md-surface-container-high);
  border-radius: var(--shape-xl);
  box-shadow: var(--elev-3);
  transform: scale(0.96);
  transition: transform var(--transition);
}
.dialog-scrim.open .dialog { transform: scale(1); }
.dialog .dialog-title { padding: 24px 24px 4px; font-size: var(--fs-title-l); font-weight: 500; }
.dialog .dialog-content { padding: 12px 24px; overflow-y: auto; color: var(--md-on-surface-muted); }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; flex-wrap: wrap; }
.dialog.wide { max-width: 680px; }

/* ============ Snackbar ============ */
.snackbar-wrap { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 80; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.snackbar {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  border-radius: var(--shape-xs);
  padding: 12px 16px;
  box-shadow: var(--elev-3);
  animation: snackbar-in 250ms var(--transition);
}
.snackbar.error { background: var(--md-error); color: var(--md-on-error); }
.snackbar .snack-action { color: var(--md-inverse-primary); font-weight: 500; white-space: nowrap; background: none; border: none; }
.snackbar.error .snack-action { color: #ffdad6; }
@keyframes snackbar-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ 菜单 ============ */
.menu {
  position: fixed; z-index: 70;
  min-width: 160px;
  background: var(--md-surface-container);
  border-radius: var(--shape-xs);
  box-shadow: var(--elev-2);
  padding: 6px 0;
  animation: menu-in 150ms var(--transition);
}
@keyframes menu-in { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 14px;
  font-size: var(--fs-body-m);
  color: var(--md-on-surface);
  cursor: pointer;
  text-align: left; width: 100%;
}
.menu-item:hover { background: var(--md-state-hover); }
.menu-item.danger { color: var(--md-error); }
.menu-item .ms { font-size: 20px; color: var(--md-on-surface-variant); }
.menu-divider { height: 1px; margin: 6px 0; background: var(--md-outline-variant); }

/* ============ 表格 ============ */
.table-wrap { overflow-x: auto; border: 1px solid var(--md-outline-variant); border-radius: var(--shape-md); background: var(--md-surface-container-low); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--fs-label-m); font-weight: 500;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px;
  font-size: var(--fs-body-m);
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--transition); }
.table tbody tr:hover { background: var(--md-state-hover); }
.table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ============ 标签页 ============ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--md-outline-variant); overflow-x: auto; }
.tab {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 16px;
  font-weight: 500; font-size: var(--fs-label-l);
  color: var(--md-on-surface-variant);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--md-on-surface); text-decoration: none; }
.tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

/* ============ 进度 ============ */
.progress-linear {
  position: relative; height: 4px; overflow: hidden;
  background: var(--md-surface-container-highest);
  border-radius: var(--shape-full);
}
.progress-linear .bar {
  position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%;
  border-radius: var(--shape-full);
  background: var(--md-primary);
  animation: progress-slide 1.4s infinite ease-in-out;
}
@keyframes progress-slide { to { left: 110%; } }
.progress-circular {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--md-surface-container-highest);
  border-top-color: var(--md-primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 0.9s linear infinite; display: inline-block; }

/* ============ 提示 ============ */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  font-size: var(--fs-label-s); font-weight: 400;
  padding: 5px 10px; border-radius: var(--shape-xs);
  white-space: nowrap; z-index: 90;
  pointer-events: none;
  box-shadow: var(--elev-2);
}

/* ============ 列表 ============ */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 16px;
  border-radius: var(--shape-md);
  color: var(--md-on-surface);
}
.list-item:hover { background: var(--md-state-hover); text-decoration: none; }
.list-item .list-meta { margin-left: auto; color: var(--md-on-surface-muted); font-size: var(--fs-body-s); }
.divider { height: 1px; background: var(--md-outline-variant); margin: 8px 0; }

/* ============ 分页 ============ */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.pager .page-info { color: var(--md-on-surface-muted); font-size: var(--fs-body-s); margin: 0 8px; }

/* ============ 空状态 ============ */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; text-align: center; color: var(--md-on-surface-muted); }
.empty .ms { font-size: 56px; color: var(--md-outline); }

/* ============ 骨架屏 ============ */
.skeleton {
  border-radius: var(--shape-xs);
  background: linear-gradient(90deg, var(--md-surface-container-high) 25%, var(--md-surface-container-highest) 50%, var(--md-surface-container-high) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s infinite;
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* ============ 文章渲染（.md-content） ============ */
.md-content {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--md-on-surface);
  word-break: break-word;
}
.md-content h1, .md-content h2, .md-content h3, .md-content h4 {
  font-family: var(--font-sans);
  color: var(--md-on-surface);
  margin: 1.8em 0 0.7em;
  line-height: 1.35;
  font-weight: 600;
}
.md-content h1 { font-size: 1.6em; }
.md-content h2 { font-size: 1.35em; padding-bottom: 0.35em; border-bottom: 1px solid var(--md-outline-variant); }
.md-content h3 { font-size: 1.15em; }
.md-content h4 { font-size: 1em; }
.md-content p { margin: 0.9em 0; }
.md-content a { text-decoration: underline; text-underline-offset: 3px; }
.md-content strong { font-weight: 600; }
.md-content blockquote {
  margin: 1.2em 0;
  padding: 0.2em 1.2em;
  border-left: 3px solid var(--md-primary);
  background: var(--md-surface-container-low);
  border-radius: 0 var(--shape-sm) var(--shape-sm) 0;
  color: var(--md-on-surface-muted);
}
.md-content ul, .md-content ol { margin: 0.9em 0; padding-left: 1.6em; }
.md-content ul { list-style: disc; }
.md-content ol { list-style: decimal; }
.md-content li { margin: 0.35em 0; }
.md-content li > ul, .md-content li > ol { margin: 0.3em 0; }
.md-content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--md-surface-container-high);
  color: var(--md-primary);
  padding: 0.15em 0.4em;
  border-radius: var(--shape-xs);
}
.md-content pre {
  margin: 1.2em 0;
  padding: 16px 18px;
  background: var(--md-code-bg);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-md);
  overflow-x: auto;
}
.md-content pre code {
  background: none; color: var(--md-code-text);
  padding: 0; font-size: 0.85rem; line-height: 1.7;
  display: block;
  font-variant-ligatures: none;
}
.md-content table {
  border-collapse: collapse;
  margin: 1.2em 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  display: block; overflow-x: auto;
}
.md-content th, .md-content td {
  border: 1px solid var(--md-outline-variant);
  padding: 8px 14px;
  text-align: left;
}
.md-content th { background: var(--md-surface-container-high); font-weight: 500; }
.md-content img { border-radius: var(--shape-md); margin: 1.2em auto; }
.md-content hr { border: none; border-top: 1px solid var(--md-outline-variant); margin: 2em 0; }
.md-content .task-cb { margin-right: 0.5em; accent-color: var(--md-primary); }
.md-content > *:first-child { margin-top: 0; }
.md-content > *:last-child { margin-bottom: 0; }

/* 代码高亮：github.css 为浅色主题，深色模式下整体映射到 github-dark 色板 */
.md-content .hljs { background: transparent !important; }
[data-theme='dark'] .md-content .hljs { color: #c9d1d9; }
[data-theme='dark'] .md-content .hljs-keyword,
[data-theme='dark'] .md-content .hljs-selector-tag,
[data-theme='dark'] .md-content .hljs-doctag,
[data-theme='dark'] .md-content .hljs-name,
[data-theme='dark'] .md-content .hljs-built_in { color: #ff7b72; }
[data-theme='dark'] .md-content .hljs-string,
[data-theme='dark'] .md-content .hljs-regexp,
[data-theme='dark'] .md-content .hljs-addition,
[data-theme='dark'] .md-content .hljs-attribute,
[data-theme='dark'] .md-content .hljs-meta .hljs-string,
[data-theme='dark'] .md-content .hljs-symbol,
[data-theme='dark'] .md-content .hljs-bullet { color: #a5d6ff; }
[data-theme='dark'] .md-content .hljs-number,
[data-theme='dark'] .md-content .hljs-literal { color: #79c0ff; }
[data-theme='dark'] .md-content .hljs-title,
[data-theme='dark'] .md-content .hljs-section,
[data-theme='dark'] .md-content .hljs-title.function_ { color: #d2a8ff; }
[data-theme='dark'] .md-content .hljs-type,
[data-theme='dark'] .md-content .hljs-title.class_,
[data-theme='dark'] .md-content .hljs-selector-id,
[data-theme='dark'] .md-content .hljs-selector-class { color: #ffa657; }
[data-theme='dark'] .md-content .hljs-comment,
[data-theme='dark'] .md-content .hljs-quote,
[data-theme='dark'] .md-content .hljs-meta { color: #8b949e; }
[data-theme='dark'] .md-content .hljs-deletion,
[data-theme='dark'] .md-content .hljs-variable,
[data-theme='dark'] .md-content .hljs-template-variable,
[data-theme='dark'] .md-content .hljs-link { color: #ffa198; }
[data-theme='dark'] .md-content .hljs-emphasis { font-style: italic; }
[data-theme='dark'] .md-content .hljs-strong { font-weight: 600; }

/* ============ 响应式 ============ */
@media (max-width: 720px) {
  :root { --appbar-h: 56px; }
  .container, .container-wide { padding: 0 16px; }
  .fab { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}