:root{
  /* Brand */
  --vb-brand-1:#4f46e5;
  --vb-brand-2:#7c3aed;
  --vb-brand-grad:linear-gradient(135deg,var(--vb-brand-1) 0%,var(--vb-brand-2) 100%);

  /* Semantic */
  --vb-success-bg:rgba(34,197,94,.14);
  --vb-success-bd:rgba(34,197,94,.28);
  --vb-success-fg:#166534;

  --vb-warning-bg:rgba(245,158,11,.16);
  --vb-warning-bd:rgba(245,158,11,.30);
  --vb-warning-fg:#92400e;

  --vb-danger-bg:rgba(239,68,68,.14);
  --vb-danger-bd:rgba(239,68,68,.28);
  --vb-danger-fg:#991b1b;

  /* Neutral */
  --vb-bg:#f8fafc;
  --vb-surface:rgba(255,255,255,.90);
  --vb-surface-2:rgba(248,250,252,.92);
  --vb-text:#0f172a;
  --vb-muted:rgba(15,23,42,.62);
  --vb-border:rgba(15,23,42,.10);
  --vb-border-2:rgba(15,23,42,.14);

  /* Radii */
  --vb-r-card:16px;
  --vb-r-btn:10px;
  --vb-r-input:12px;
  --vb-r-pill:999px;

  /* Shadow */
  --vb-shadow-md:0 6px 20px rgba(0,0,0,0.08);

  /* Type */
  --vb-fs-h1:22px;
  --vb-fs-h2:18px;
  --vb-fs-body:14px;
  --vb-fs-cap:12px;

  /* Spacing */
  --vb-card-pad:24px;
}

/* Base */
html,body{font-size:var(--vb-fs-body);}
body{color:var(--vb-text);background:var(--vb-bg);}

/* Card */
.vb-card{background:var(--vb-surface);border:1px solid var(--vb-border);border-radius:var(--vb-r-card);box-shadow:var(--vb-shadow-md);}
.vb-cardPad{padding:var(--vb-card-pad);}

/* Buttons */
.vb-btn{border:1px solid var(--vb-border);border-radius:var(--vb-r-btn);padding:10px 12px;font-weight:800;cursor:pointer;background:#fff;color:var(--vb-text);}
.vb-btn:active{transform:translateY(1px);}
.vb-btn[disabled]{opacity:.55;cursor:not-allowed;}

.vb-btnPrimary{border:0;background:var(--vb-brand-grad);color:#fff;box-shadow:var(--vb-shadow-md);}
.vb-btnSecondary{background:rgba(15,23,42,.05);border:1px solid var(--vb-border);color:var(--vb-text);}
.vb-btnDanger{background:var(--vb-danger-bg);border:1px solid var(--vb-danger-bd);color:var(--vb-danger-fg);}

/* Inputs */
.vb-input{border-radius:var(--vb-r-input);border:1px solid var(--vb-border);background:#fff;color:var(--vb-text);padding:10px 12px;outline:none;}
.vb-input::placeholder{color:rgba(15,23,42,.45);}

/* Pills / Tags */
.vb-chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--vb-r-pill);padding:6px 10px;font-weight:800;font-size:var(--vb-fs-cap);border:1px solid var(--vb-border);background:#fff;color:var(--vb-text);}
.vb-chipSuccess{background:var(--vb-success-bg);border-color:var(--vb-success-bd);color:var(--vb-success-fg);}
.vb-chipWarning{background:var(--vb-warning-bg);border-color:var(--vb-warning-bd);color:var(--vb-warning-fg);}
.vb-chipDanger{background:var(--vb-danger-bg);border-color:var(--vb-danger-bd);color:var(--vb-danger-fg);}
.vb-chipBrand{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.28);color:#5b21b6;}

/* Typography helpers */
.vb-h1{font-size:var(--vb-fs-h1);font-weight:900;}
.vb-h2{font-size:var(--vb-fs-h2);font-weight:900;}
.vb-cap{font-size:var(--vb-fs-cap);color:var(--vb-muted);}


/* Dark theme tokens (Deep Purple) */
@media (prefers-color-scheme: dark){
  :root:not(.vb-light){
    --vb-brand-1:#6d28d9;
    --vb-brand-2:#4c1d95;
    --vb-brand-grad:linear-gradient(135deg,var(--vb-brand-1) 0%,var(--vb-brand-2) 100%);

    --vb-success-bg:rgba(34,197,94,.18);
    --vb-success-bd:rgba(74,222,128,.42);
    --vb-success-fg:#bbf7d0;

    --vb-warning-bg:rgba(245,158,11,.20);
    --vb-warning-bd:rgba(251,191,36,.44);
    --vb-warning-fg:#fde68a;

    --vb-danger-bg:rgba(239,68,68,.18);
    --vb-danger-bd:rgba(248,113,113,.44);
    --vb-danger-fg:#fecaca;

    --vb-bg:#0b0720;
    --vb-surface:rgba(26,20,48,.90);
    --vb-surface-2:rgba(20,15,40,.94);
    --vb-text:#ede9fe;
    --vb-muted:rgba(237,233,254,.70);
    --vb-border:rgba(167,139,250,.28);
    --vb-border-2:rgba(167,139,250,.40);

    --vb-shadow-md:0 6px 20px rgba(0,0,0,.45);
  }
  :root:not(.vb-light) .vb-btnSecondary{background:rgba(167,139,250,.14);border-color:var(--vb-border);color:var(--vb-text);}
  :root:not(.vb-light) .vb-input{background:rgba(15,23,42,.45);color:var(--vb-text);border-color:var(--vb-border);}
  :root:not(.vb-light) .vb-input::placeholder{color:rgba(237,233,254,.45);}
  :root:not(.vb-light) .vb-chip{background:rgba(167,139,250,.14);border-color:var(--vb-border);color:var(--vb-text);}
}


/* Manual dark override (for user-selected night mode) */
:root.vb-dark{
  --vb-brand-1:#6d28d9;
  --vb-brand-2:#4c1d95;
  --vb-brand-grad:linear-gradient(135deg,var(--vb-brand-1) 0%,var(--vb-brand-2) 100%);

  --vb-success-bg:rgba(34,197,94,.18);
  --vb-success-bd:rgba(74,222,128,.42);
  --vb-success-fg:#bbf7d0;

  --vb-warning-bg:rgba(245,158,11,.20);
  --vb-warning-bd:rgba(251,191,36,.44);
  --vb-warning-fg:#fde68a;

  --vb-danger-bg:rgba(239,68,68,.18);
  --vb-danger-bd:rgba(248,113,113,.44);
  --vb-danger-fg:#fecaca;

  --vb-bg:#0b0720;
  --vb-surface:rgba(26,20,48,.90);
  --vb-surface-2:rgba(20,15,40,.94);
  --vb-text:#ede9fe;
  --vb-muted:rgba(237,233,254,.70);
  --vb-border:rgba(167,139,250,.28);
  --vb-border-2:rgba(167,139,250,.40);

  --vb-shadow-md:0 6px 20px rgba(0,0,0,.45);
}
:root.vb-dark .vb-btnSecondary{background:rgba(167,139,250,.14);border-color:var(--vb-border);color:var(--vb-text);}
:root.vb-dark .vb-input{background:rgba(15,23,42,.45);color:var(--vb-text);border-color:var(--vb-border);}
:root.vb-dark .vb-input::placeholder{color:rgba(237,233,254,.45);}
:root.vb-dark .vb-chip{background:rgba(167,139,250,.14);border-color:var(--vb-border);color:var(--vb-text);}

/* Manual light override (allow light UI even when system is dark) */
:root.vb-light{
  --vb-brand-1:#4f46e5;
  --vb-brand-2:#7c3aed;
  --vb-brand-grad:linear-gradient(135deg,var(--vb-brand-1) 0%,var(--vb-brand-2) 100%);

  --vb-success-bg:rgba(34,197,94,.14);
  --vb-success-bd:rgba(34,197,94,.28);
  --vb-success-fg:#166534;

  --vb-warning-bg:rgba(245,158,11,.16);
  --vb-warning-bd:rgba(245,158,11,.30);
  --vb-warning-fg:#92400e;

  --vb-danger-bg:rgba(239,68,68,.14);
  --vb-danger-bd:rgba(239,68,68,.28);
  --vb-danger-fg:#991b1b;

  --vb-bg:#f8fafc;
  --vb-surface:rgba(255,255,255,.90);
  --vb-surface-2:rgba(248,250,252,.92);
  --vb-text:#0f172a;
  --vb-muted:rgba(15,23,42,.62);
  --vb-border:rgba(15,23,42,.10);
  --vb-border-2:rgba(15,23,42,.14);

  --vb-shadow-md:0 6px 20px rgba(0,0,0,0.08);
}
:root.vb-light .vb-btnSecondary{background:rgba(15,23,42,.05);border-color:var(--vb-border);color:var(--vb-text);}
:root.vb-light .vb-input{background:#fff;color:var(--vb-text);border-color:var(--vb-border);}
:root.vb-light .vb-input::placeholder{color:rgba(15,23,42,.45);}
:root.vb-light .vb-chip{background:#fff;border-color:var(--vb-border);color:var(--vb-text);}

/* --- Drawer / Modal Base --- */
.vb-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: flex-end;
}
.vb-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.vb-drawer {
  width: 100%;
  max-width: 440px;
  background: var(--vb-surface);
  border-left: 1px solid var(--vb-border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.vb-drawer-overlay.active .vb-drawer {
  transform: translateX(0);
}
.vb-drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--vb-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vb-drawer-title {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
}
.vb-drawer-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--vb-muted);
  padding: 4px;
  border-radius: 8px;
}
.vb-drawer-close:hover {
  background: var(--vb-surface-2);
  color: var(--vb-text);
}
.vb-drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vb-drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--vb-border);
  background: var(--vb-surface-2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ═══════════════════════════════════════
   游戏语义色 (v3.2 A0)
   ═══════════════════════════════════════ */
:root {
  /* 语义色（活力糖果色） */
  --game-success: #22c55e;
  --game-success-bg: rgba(34, 197, 94, .16);
  --game-combo: #fbbf24;
  --game-combo-bg: rgba(251, 191, 36, .18);
  --game-urgent: #ef4444;
  --game-urgent-bg: rgba(239, 68, 68, .16);
  --game-hint: #38bdf8;
  --game-hint-bg: rgba(56, 189, 248, .16);
  /* 游戏卡片 accent 色 (v7) */
  --accent-match: #7c3aed;
  --accent-lightning: #f59e0b;
  --accent-spell: #38bdf8;
  --accent-flip: #22c55e;
  --accent-star: #ff6eb4;
  /* 游戏卡片渐变 */
  --game-card-en: linear-gradient(135deg, var(--vb-brand-2), var(--vb-brand-1));
  --game-card-zh: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --game-card-selected: linear-gradient(135deg, #fbbf24, #f59e0b);
  /* 游戏动效时长 */
  --game-dur-fast: 0.18s;
  --game-dur-mid: 0.32s;
  --game-dur-slow: 0.5s;
  /* ── 游戏 UI 通用表面/文字/按钮 (暗色模式适配) ── */
  --game-bg: #ffffff;
  --game-surface: #f8fafc;
  --game-surface-2: #f1f5f9;
  --game-text: #1e293b;
  --game-text-secondary: #64748b;
  --game-text-muted: #94a3b8;
  --game-border: #e2e8f0;
  --game-border-light: #f1f5f9;
  --game-card-shadow: rgba(0,0,0,0.06);
  /* 游戏按钮 */
  --game-btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --game-btn-text: #ffffff;
  --game-btn-hover: linear-gradient(135deg, #5558e6, #7c4fec);
  --game-btn-secondary-bg: #f1f5f9;
  --game-btn-secondary-text: #475569;
  --game-btn-secondary-border: #e2e8f0;
  /* 游戏反馈色 */
  --game-correct-bg: #f0fdf4;
  --game-correct-border: #22c55e;
  --game-correct-text: #166534;
  --game-wrong-bg: #fef2f2;
  --game-wrong-border: #ef4444;
  --game-wrong-text: #991b1b;
  /* 游戏结果面板 */
  --game-result-bg: #ffffff;
  --game-result-shadow: rgba(0,0,0,0.08);
  /* 游戏掌握度圆点（三态） */
  --game-mastery-green: #22c55e;
  --game-mastery-yellow: #f59e0b;
  --game-mastery-red: #ef4444;
  /* 游戏进度条 */
  --game-progress-track: rgba(15,23,42,0.08);
  --game-progress-fill: linear-gradient(90deg, #6366f1, #8b5cf6);
  /* 游戏覆盖层 */
  --game-overlay-bg: rgba(255,255,255,0.92);
  --game-overlay-text: #1e293b;
}
/* 暗色模式语义色提亮（保证 WCAG AA） */
@media (prefers-color-scheme: dark) {
  :root:not(.vb-light) {
    --game-success: #4ade80;
    --game-success-bg: rgba(74, 222, 128, .18);
    --game-combo: #fcd34d;
    --game-combo-bg: rgba(252, 211, 77, .18);
    --game-urgent: #f87171;
    --game-urgent-bg: rgba(248, 113, 113, .18);
    --game-hint: #7dd3fc;
    --game-hint-bg: rgba(125, 211, 252, .18);
    /* 游戏 UI 表面 */
    --game-bg: #0f172a;
    --game-surface: #1e293b;
    --game-surface-2: #1a2332;
    --game-text: #e2e8f0;
    --game-text-secondary: #94a3b8;
    --game-text-muted: #64748b;
    --game-border: #334155;
    --game-border-light: #1e293b;
    --game-card-shadow: rgba(0,0,0,0.25);
    /* 按钮 */
    --game-btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
    --game-btn-text: #ffffff;
    --game-btn-hover: linear-gradient(135deg, #7577f5, #9b72fa);
    --game-btn-secondary-bg: #1e293b;
    --game-btn-secondary-text: #cbd5e1;
    --game-btn-secondary-border: #334155;
    /* 反馈 */
    --game-correct-bg: rgba(34,197,94,0.12);
    --game-correct-border: #4ade80;
    --game-correct-text: #86efac;
    --game-wrong-bg: rgba(239,68,68,0.12);
    --game-wrong-border: #f87171;
    --game-wrong-text: #fca5a5;
    /* 结果面板 */
    --game-result-bg: #1e293b;
    --game-result-shadow: rgba(0,0,0,0.35);
    /* 掌握度 */
    --game-mastery-green: #4ade80;
    --game-mastery-yellow: #fcd34d;
    --game-mastery-red: #f87171;
    /* 进度条 */
    --game-progress-track: rgba(255,255,255,0.08);
    --game-progress-fill: linear-gradient(90deg, #818cf8, #a78bfa);
    /* 覆盖层 */
    --game-overlay-bg: rgba(15,23,42,0.92);
    --game-overlay-text: #e2e8f0;
  }
}
:root.vb-dark {
  --game-success: #4ade80;
  --game-success-bg: rgba(74, 222, 128, .18);
  --game-combo: #fcd34d;
  --game-combo-bg: rgba(252, 211, 77, .18);
  --game-urgent: #f87171;
  --game-urgent-bg: rgba(248, 113, 113, .18);
  --game-hint: #7dd3fc;
  --game-hint-bg: rgba(125, 211, 252, .18);
  /* 游戏 UI 表面 */
  --game-bg: #0f172a;
  --game-surface: #1e293b;
  --game-surface-2: #1a2332;
  --game-text: #e2e8f0;
  --game-text-secondary: #94a3b8;
  --game-text-muted: #64748b;
  --game-border: #334155;
  --game-border-light: #1e293b;
  --game-card-shadow: rgba(0,0,0,0.25);
  /* 按钮 */
  --game-btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --game-btn-text: #ffffff;
  --game-btn-hover: linear-gradient(135deg, #7577f5, #9b72fa);
  --game-btn-secondary-bg: #1e293b;
  --game-btn-secondary-text: #cbd5e1;
  --game-btn-secondary-border: #334155;
  /* 反馈 */
  --game-correct-bg: rgba(34,197,94,0.12);
  --game-correct-border: #4ade80;
  --game-correct-text: #86efac;
  --game-wrong-bg: rgba(239,68,68,0.12);
  --game-wrong-border: #f87171;
  --game-wrong-text: #fca5a5;
  /* 结果面板 */
  --game-result-bg: #1e293b;
  --game-result-shadow: rgba(0,0,0,0.35);
  /* 掌握度 */
  --game-mastery-green: #4ade80;
  --game-mastery-yellow: #fcd34d;
  --game-mastery-red: #f87171;
  /* 进度条 */
  --game-progress-track: rgba(255,255,255,0.08);
  --game-progress-fill: linear-gradient(90deg, #818cf8, #a78bfa);
  /* 覆盖层 */
  --game-overlay-bg: rgba(15,23,42,0.92);
  --game-overlay-text: #e2e8f0;
}

/* ═══════════════════════════════════════
   语义色桥接（非 vb-* 命名空间 → vb-* 令牌）
   review.js / import.js / games.js 使用这些变量
   ═══════════════════════════════════════ */
:root {
  --text-primary: var(--vb-text);
  --text-secondary: rgba(15,23,42,.72);
  --text-muted: var(--vb-muted);
  --bg-card: var(--vb-surface);
  --bg-secondary: var(--vb-surface-2);
  --border-color: var(--vb-border);
  --border-light: var(--vb-border);
  --accent-color: var(--vb-brand-1);
  --accent-light: rgba(79,70,229,.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
:root.vb-dark {
  --text-secondary: rgba(237,233,254,.72);
  --accent-light: rgba(167,139,250,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not(.vb-light) {
    --text-secondary: rgba(237,233,254,.72);
    --accent-light: rgba(167,139,250,.14);
  }
}

/* ═══════════════════════════════════════
   语义色桥接（--hord-* 命名空间 → vb-* 令牌）
   reader.js 书架 / 阅读视图使用这些变量
   ═══════════════════════════════════════ */
:root {
  --hord-card-bg: var(--vb-surface);
  --hord-border: var(--vb-border);
  --hord-text: var(--vb-text);
  --hord-text-secondary: var(--vb-muted);
  --hord-primary: var(--vb-brand-1);
  --hord-bg-secondary: var(--vb-surface-2);
  --hord-primary-bg: rgba(124,58,237,0.06);
}
:root.vb-dark {
  --hord-card-bg: rgba(26,20,48,.90);
  --hord-border: rgba(167,139,250,.28);
  --hord-text: #ede9fe;
  --hord-text-secondary: rgba(237,233,254,.70);
  --hord-primary: var(--vb-brand-1);
  --hord-bg-secondary: rgba(20,15,40,.94);
  --hord-primary-bg: rgba(124,58,237,0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not(.vb-light) {
    --hord-card-bg: rgba(26,20,48,.90);
    --hord-border: rgba(167,139,250,.28);
    --hord-text: #ede9fe;
    --hord-text-secondary: rgba(237,233,254,.70);
    --hord-primary: var(--vb-brand-1);
    --hord-bg-secondary: rgba(20,15,40,.94);
    --hord-primary-bg: rgba(124,58,237,0.14);
  }
}

/* ═══════════════════════════════════════
   游戏通用设置栏（词数/字号选择器）
   ═══════════════════════════════════════ */
.game-settings-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--vb-surface);
  border-bottom: 1px solid var(--vb-border);
  flex-shrink: 0;
}

.game-settings-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-settings-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--vb-muted);
  white-space: nowrap;
}

.game-settings-options {
  display: flex;
  gap: 4px;
}

.game-setting-btn {
  border: 1px solid var(--vb-border);
  background: transparent;
  color: var(--vb-muted);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.game-setting-btn:hover {
  border-color: var(--vb-muted);
  color: var(--vb-text);
}
.game-setting-btn.active {
  background: var(--vb-brand-2);
  border-color: var(--vb-brand-2);
  color: #fff;
}

/* ═══════════════════════════════════════
   游戏 Header 内嵌设置按钮（v4.2 M4）
   词数/字号选择器移入顶部导航右侧
   ═══════════════════════════════════════ */
.game-settings-inline {
  display: flex;
  gap: 3px;
  align-items: center;
}

.header-count-btn {
  padding: 3px 8px;
  border: 1px solid var(--vb-border);
  border-radius: 6px;
  background: transparent;
  color: var(--vb-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.header-count-btn:hover {
  border-color: var(--vb-muted);
  color: var(--vb-text);
}
.header-count-btn.active {
  background: var(--vb-brand-2);
  border-color: var(--vb-brand-2);
  color: #fff;
}

/* 字号按钮（三档 A/A/A）—— 始终纯白 */
.header-fs-btn {
  padding: 3px 7px;
  border: 1px solid var(--vb-border);
  border-radius: 6px;
  background: transparent;
  color: var(--vb-muted);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.header-fs-btn--sm { font-size: 9px; }
.header-fs-btn--md { font-size: 12px; }
.header-fs-btn--lg { font-size: 15px; }
.header-fs-btn:hover {
  border-color: var(--vb-muted);
  color: var(--vb-text);
}
.header-fs-btn.active {
  background: var(--vb-brand-2);
  border-color: var(--vb-brand-2);
  color: #fff;
}

/* ═══════════════════════════════════════
   掌握度规则可折叠面板（v4.2 M6）
   默认收起，点击展开，减少信息过载
   ═══════════════════════════════════════ */
.mastery-rules-details {
  margin: 0;
  padding: 0;
}
.mastery-rules-summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--vb-muted);
  cursor: pointer;
  padding: 6px 16px;
  list-style: none;
  user-select: none;
}
.mastery-rules-summary::-webkit-details-marker {
  display: none;
}
.mastery-rules-details:not([open]) .mastery-rules-summary::before {
  content: '▶ ';
}
.mastery-rules-details[open] .mastery-rules-summary::before {
  content: '▼ ';
}