/* ==========================================================================
   CertiBuddy — 应用样式

   主题架构
   --------
   所有视觉属性都走语义化 Design Token（--color-* / --shadow-* / --radius-* /
   --motion-*），业务组件不直接依赖具体颜色。三套主题：

     :root                    浅色（默认基准）
     :root[data-theme="oled"] OLED 纯黑
     :root[data-theme="eink"] 电子墨水纯白

   文件末尾保留一组「兼容别名」（--bg / --surface / --text ... ），
   它们指向上面的语义 token，所以旧组件类无需改动即可跟随主题切换。
   新增样式请直接用 --color-* 语义 token。

   响应式：手机 / 平板 / 桌面
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------ 画布与表面 ------------------------------ */
  --color-canvas: #f6f7fb;          /* 页面主背景 */
  --color-surface: #ffffff;         /* 卡片等承载内容的表面 */
  --color-surface-elevated: #ffffff;/* 浮层：弹窗 / 下拉 / 提示 */
  --color-surface-sunken: #f9fafb;  /* 下沉区域：表头 / 代码块外框 / 输入组 */
  --color-surface-hover: #f3f4f6;   /* 悬停态表面 */
  --color-surface-active: #e9ebf0;  /* 按下 / 选中态表面 */

  /* ------------------------------ 文字 ------------------------------ */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-text-disabled: #c3c8d0;
  --color-text-inverse: #ffffff;    /* 深色底上的文字 */

  /* ------------------------------ 边框与分隔 ------------------------------ */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-divider: #eef0f4;

  /* ------------------------------ 强调色 ------------------------------ */
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-active: #3730a3;
  --color-accent-text: #ffffff;        /* 强调色底上的文字 */
  --color-accent-soft: #eef2ff;        /* 强调色淡底 */
  --color-accent-soft-border: #c7d2fe; /* 强调色淡底边框 */
  --color-accent-strong: #4338ca;      /* 淡底上的强调文字 */

  /* ------------------------------ 语义状态 ------------------------------ */
  --color-success: #059669;
  --color-success-soft: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text: #065f46;

  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;

  --color-error: #dc2626;
  --color-error-soft: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;

  --color-info: #2563eb;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e40af;

  /* ------------------------------ 焦点与选区 ------------------------------ */
  --color-focus-ring: #4f46e5;
  --color-focus-ring-soft: #eef2ff;
  --color-selection-bg: #4f46e5;
  --color-selection-text: #ffffff;

  /* ------------------------------ 专用区域 ------------------------------ */
  --color-code-bg: #111827;         /* 代码块 / 日志 */
  --color-code-text: #d1d5db;
  --color-code-ok: #6ee7b7;
  --color-code-err: #fca5a5;
  --color-code-dim: #6b7280;
  --color-overlay: rgba(17, 24, 39, 0.45);       /* 弹窗遮罩 */
  --color-glass: rgba(255, 255, 255, 0.86);      /* 顶栏毛玻璃底 */
  --color-glass-strong: rgba(255, 255, 255, 0.95);/* 底部导航毛玻璃底 */
  --color-toast-bg: #111827;
  --color-toast-text: #f9fafb;
  --color-scrim-fade: rgba(249, 250, 251, 0);    /* 折叠渐隐起点 */

  /* ------------------------------ 阴影 ------------------------------ */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.16);

  /* ------------------------------ 圆角 ------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 99px;

  /* ------------------------------ 动效 ------------------------------ */
  --motion-duration-fast: 0.12s;
  --motion-duration-normal: 0.18s;
  --motion-duration-slow: 0.3s;
  --motion-easing: ease;
  --motion-easing-in-out: ease-in-out;

  /* ------------------------------ 装饰 ------------------------------ */
  --backdrop-filter: saturate(180%) blur(10px);
  --backdrop-filter-strong: saturate(180%) blur(12px);
  --auth-gradient: linear-gradient(160deg, #eef2ff 0%, var(--color-canvas) 55%);
  /* 骨架屏流光（E-Ink 主题会换成纯色平铺） */
  --skeleton-gradient: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-surface-sunken) 37%,
    var(--color-border) 63%
  );
  /* 下拉箭头：颜色写在 SVG 里，只能整段替换，所以做成 token 供主题覆盖 */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ------------------------------ 布局与字体 ------------------------------ */
  --sidebar-w: 248px;
  --header-h: 60px;
  --font: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* ==========================================================================
     兼容别名 —— 指向上面的语义 token。
     旧组件类用的是这些名字，主题只需覆盖语义 token，别名自动跟随。
     ========================================================================== */
  --brand: var(--color-accent);
  --brand-dark: var(--color-accent-strong);
  --brand-soft: var(--color-accent-soft);
  --brand-border: var(--color-accent-soft-border);

  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-sunken);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);

  --text: var(--color-text-primary);
  --text-2: var(--color-text-secondary);
  --text-3: var(--color-text-muted);

  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --green-border: var(--color-success-border);
  --red: var(--color-error);
  --red-soft: var(--color-error-soft);
  --red-border: var(--color-error-border);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --amber-border: var(--color-warning-border);
  --blue: var(--color-info);
  --blue-soft: var(--color-info-soft);
  --blue-border: var(--color-info-border);

  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* 选区配色跟随主题（OLED 下用亮底暗字，E-Ink 下用黑底白字） */
::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* 键盘可达性：统一的焦点环 */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }

/* ------------------------------ 启动占位 ------------------------------ */
.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  z-index: 100;
}
.boot__logo { font-size: 1.5rem; font-weight: 700; color: var(--brand); letter-spacing: -0.02em; }
.boot__bar {
  width: 180px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden;
}
.boot__bar span {
  display: block; width: 40%; height: 100%; background: var(--brand); border-radius: 99px;
  animation: boot-slide 1.1s var(--motion-easing-in-out) infinite;
}
@keyframes boot-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ------------------------------ 布局 ------------------------------ */
.shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em;
}
.sidebar__brand .dot {
  width: 28px; height: 28px; border-radius: 9px; background: var(--brand);
  display: grid; place-items: center; color: var(--color-accent-text); font-size: 15px; font-weight: 700;
}

.sidebar__nav { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.nav-section {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); padding: 14px 10px 6px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font-size: 0.93rem;
  font-family: inherit;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.nav-item__icon { width: 18px; text-align: center; flex: 0 0 18px; opacity: 0.85; }
.nav-item__count {
  margin-left: auto; font-size: 0.72rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; color: var(--text-2);
}
.nav-item.is-active .nav-item__count { background: var(--color-surface); border-color: var(--brand-border); color: var(--brand-dark); }

.sidebar__foot { padding: 12px; border-top: 1px solid var(--border); }

.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}

.topbar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--color-glass);
  backdrop-filter: var(--backdrop-filter);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-weight: 650; font-size: 1.02rem; min-width: 0; }
.topbar__sub { font-size: 0.8rem; color: var(--text-3); font-weight: 400; }
.topbar__spacer { flex: 1; }

.content { padding: 22px 20px 90px; max-width: 1180px; width: 100%; margin: 0 auto; }

/* ------------------------------ 移动端底部导航 ------------------------------ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--color-glass-strong);
  backdrop-filter: var(--backdrop-filter-strong);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__inner { display: flex; }
.bottom-nav__item {
  flex: 1; border: none; background: none; font-family: inherit;
  padding: 8px 4px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-3); font-size: 0.68rem; cursor: pointer;
}
.bottom-nav__item.is-active { color: var(--brand); font-weight: 600; }
.bottom-nav__icon { font-size: 1.15rem; line-height: 1; }

/* ------------------------------ 通用组件 ------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card__head h2, .card__head h3 { font-size: 0.98rem; }
.card__body { padding: 16px; }
.card__foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--text-3); }
.small { font-size: 0.82rem; }
.tiny { font-size: 0.74rem; }
.mono { font-family: var(--mono); font-size: 0.85em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9rem; font-weight: 550; cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-easing), border-color var(--motion-duration-fast) var(--motion-easing), opacity var(--motion-duration-fast) var(--motion-easing);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--color-accent-text); }
.btn--primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn--danger { color: var(--red); border-color: var(--red-border); background: var(--red-soft); }
.btn--danger:hover:not(:disabled) { background: var(--color-error-border); }
.btn--amber { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.btn--sm { padding: 5px 10px; font-size: 0.82rem; }
.btn--lg { padding: 11px 20px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 6px 8px; }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.field__hint { font-size: 0.76rem; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.92rem; color: var(--text); background: var(--surface);
  transition: border-color var(--motion-duration-fast) var(--motion-easing), box-shadow var(--motion-duration-fast) var(--motion-easing);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.select { appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.checkbox input { margin-top: 4px; }

/* 徽标 */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px; font-size: 0.74rem; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap;
}
.badge--brand { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-dark); }
.badge--green { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }
.badge--red { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }
.badge--amber { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber); }
.badge--blue { background: var(--blue-soft); border-color: var(--color-info-border); color: var(--blue); }

/* 统计块 */
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.stat__label { font-size: 0.78rem; color: var(--text-3); font-weight: 600; }
.stat__value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.stat__value small { font-size: 0.85rem; font-weight: 500; color: var(--text-3); }

/* 进度条 */
.progress { height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width var(--motion-duration-slow) var(--motion-easing); }
.progress--green > span { background: var(--green); }
.progress--red > span { background: var(--red); }

/* 列表 */
.list { display: flex; flex-direction: column; }
.list__item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-easing);
}
.list__item:last-child { border-bottom: none; }
.list__item:hover { background: var(--surface-2); }
.list__main { min-width: 0; flex: 1; }
.list__title { font-weight: 600; font-size: 0.94rem; }

/* 空状态 */
.empty { padding: 48px 20px; text-align: center; color: var(--text-3); }
.empty__icon { font-size: 2.2rem; margin-bottom: 8px; opacity: 0.7; }

/* 题目卡片 */
.qmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qstem { font-size: 1.02rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.qcontext {
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  font-size: 0.88rem; color: var(--text-2); white-space: pre-wrap; max-height: 300px; overflow-y: auto;
  line-height: 1.6;
}
.qcontext.is-collapsed { max-height: 132px; overflow: hidden; position: relative; }
.qcontext.is-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, var(--color-scrim-fade), var(--color-surface-sunken));
}

.option {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-easing), background var(--motion-duration-fast) var(--motion-easing);
  margin-bottom: 9px; text-align: left; width: 100%; font-family: inherit; font-size: 0.94rem;
  color: var(--text); line-height: 1.6;
}
.option:hover:not(.is-disabled) { border-color: var(--brand-border); background: var(--brand-soft); }
.option.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.option.is-correct { border-color: var(--green); background: var(--green-soft); }
.option.is-wrong { border-color: var(--red); background: var(--red-soft); }
.option.is-disabled { cursor: default; }
.option__key {
  flex: 0 0 24px; height: 24px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700; color: var(--text-2);
}
.option.is-selected .option__key { background: var(--brand); border-color: var(--brand); color: var(--color-accent-text); }
.option.is-correct .option__key { background: var(--green); border-color: var(--green); color: var(--color-text-inverse); }
.option.is-wrong .option__key { background: var(--red); border-color: var(--red); color: var(--color-text-inverse); }
.option__text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }

.verdict {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--radius-sm); margin: 14px 0; font-weight: 600;
  font-size: 0.94rem;
}
.verdict--ok { background: var(--green-soft); border: 1px solid var(--green-border); color: var(--green); }
.verdict--bad { background: var(--red-soft); border: 1px solid var(--red-border); color: var(--red); }
.verdict--info { background: var(--blue-soft); border: 1px solid var(--color-info-border); color: var(--blue); }

.explain {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; background: var(--surface-2); font-size: 0.9rem;
  white-space: pre-wrap; word-break: break-word; line-height: 1.65;
}
.explain__label { font-size: 0.76rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }

.translated {
  border-left: 3px solid var(--blue); background: var(--blue-soft);
  padding: 12px 14px; border-radius: var(--radius-sm); margin-top: 12px;
  font-size: 0.92rem; white-space: pre-wrap; line-height: 1.65;
}
.translated__label { font-size: 0.74rem; font-weight: 700; color: var(--blue); margin-bottom: 5px; }

/* 讨论 */
.comment {
  border-left: 2px solid var(--border); padding: 2px 0 2px 12px; margin-bottom: 12px;
  font-size: 0.87rem; color: var(--text-2);
}
.comment__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.comment__author { font-weight: 650; color: var(--text); }
.comment__body { white-space: pre-wrap; line-height: 1.6; }

/* 表格 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.tbl th, table.tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.tbl th { font-weight: 650; color: var(--text-2); background: var(--surface-2); font-size: 0.8rem; white-space: nowrap; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 弹窗 */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--color-overlay);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fade-in var(--motion-duration-normal) var(--motion-easing);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--color-surface-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  animation: modal-in var(--motion-duration-normal) var(--motion-easing);
}
@keyframes modal-in { from { transform: translateY(10px) scale(0.99); opacity: 0; } to { transform: none; opacity: 1; } }
.modal--wide { max-width: 820px; }
.modal__head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal__body { padding: 18px; overflow-y: auto; flex: 1; }
.modal__foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* 提示条 */
.toast-root {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  width: min(92vw, 460px);
}
.toast {
  background: var(--color-toast-bg); color: var(--color-toast-text); padding: 10px 16px; border-radius: 99px;
  font-size: 0.88rem; box-shadow: var(--shadow-lg); animation: toast-in var(--motion-duration-normal) var(--motion-easing);
  max-width: 100%; text-align: center; word-break: break-word;
}
.toast--ok { background: var(--green); }
.toast--err { background: var(--red); }
.toast--warn { background: var(--amber); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 提示条 / 警告 */
.alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.87rem;
  border: 1px solid var(--border); background: var(--surface-2); line-height: 1.55;
}
.alert--warn { background: var(--amber-soft); border-color: var(--amber-border); color: var(--color-warning-text); }
.alert--err { background: var(--red-soft); border-color: var(--red-border); color: var(--color-error-text); }
.alert--info { background: var(--blue-soft); border-color: var(--color-info-border); color: var(--color-info-text); }
.alert--ok { background: var(--green-soft); border-color: var(--green-border); color: var(--color-success-text); }

/* 认证页 */
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--auth-gradient);
}
.auth__card { width: 100%; max-width: 420px; }
.auth__logo {
  width: 52px; height: 52px; border-radius: 15px; background: var(--brand); color: var(--color-accent-text);
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.auth__title { font-size: 1.4rem; margin-bottom: 4px; }
.auth__sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 22px; }
.auth__form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); }

/* 练习页 */
.practice-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.practice-body { max-width: 860px; margin: 0 auto; }
.practice-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* 分段控件 */
.segmented {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px; gap: 2px; flex-wrap: wrap;
}
.segmented button {
  border: none; background: none; font-family: inherit; font-size: 0.85rem; font-weight: 550;
  color: var(--text-2); padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.segmented button.is-active { background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow-sm); }

/* 导入向导 */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; background: var(--surface-2);
  cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-easing), background var(--motion-duration-fast) var(--motion-easing);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone__icon { font-size: 2rem; margin-bottom: 8px; }

.stepper { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.stepper__step {
  display: flex; align-items: center; gap: 7px; font-size: 0.83rem; color: var(--text-3);
  padding: 5px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border);
}
.stepper__step.is-active { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-dark); font-weight: 600; }
.stepper__step.is-done { color: var(--green); border-color: var(--green-border); background: var(--green-soft); }
.stepper__num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--border); color: var(--text-2);
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
}
.stepper__step.is-active .stepper__num { background: var(--brand); color: var(--color-accent-text); }
.stepper__step.is-done .stepper__num { background: var(--green); color: var(--color-text-inverse); }

/* 日志 */
.log {
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.65;
  background: var(--color-code-bg); color: var(--color-code-text); border-radius: var(--radius-sm);
  padding: 12px; max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.log__ok { color: var(--color-code-ok); }
.log__err { color: var(--color-code-err); }
.log__dim { color: var(--color-code-dim); }

/* 迷你柱状图 */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 62px; }
.spark__bar { flex: 1; background: var(--brand-soft); border-radius: 4px 4px 0 0; position: relative; min-height: 3px; }
.spark__bar > i { position: absolute; bottom: 0; left: 0; right: 0; background: var(--brand); border-radius: 4px 4px 0 0; display: block; }
.spark__label { font-size: 0.62rem; color: var(--text-3); text-align: center; margin-top: 4px; }

/* 骨架屏 */
.skeleton {
  background: var(--skeleton-gradient);
  background-size: 400% 100%; animation: shimmer 1.3s var(--motion-easing) infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
  .bottom-nav { display: block; }
  .content { padding: 16px 14px 92px; }
  .topbar { padding: 0 14px; gap: 8px; }
  h1 { font-size: 1.25rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--2.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal { max-height: 92vh; }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }
  .stat__value { font-size: 1.4rem; }
  .card__body { padding: 14px; }
  .list__item { padding: 12px 14px; }
}

@media (max-width: 420px) {
  .btn { padding: 8px 12px; font-size: 0.86rem; }
  .segmented button { padding: 6px 9px; font-size: 0.8rem; }
}

@media print {
  .sidebar, .bottom-nav, .topbar, .practice-foot { display: none; }
}

/* ==========================================================================
   主题：OLED Pure Black
   --------------------------------------------------------------------------
   面向 OLED / AMOLED 屏幕。核心目标：让黑色区域的像素真正关闭。

   取舍说明：
   - 页面主背景（canvas）与卡片表面（surface）都用**真正的 #000000**，
     而不是 #0a0a0a / #111111 这类「接近黑」—— 只有纯黑才关像素。
     卡片与背景的区分交给 1px 边框，而不是靠提亮底色。
   - 弹窗、下拉、提示这类**浮层**必须与背景分离，才使用极轻微的提升色
     （#0e0e11）。它们面积小，不影响整体省电效果。
   - 阴影在纯黑上不可见，因此全部去掉，改用边框区分层级。
   - 强调色与语义色整体提亮，保证在纯黑上有足够对比度；
     但不用大面积高亮填充，避免视觉刺激。
   ========================================================================== */
:root[data-theme="oled"] {
  color-scheme: dark;

  /* 画布与表面：大面积区域一律纯黑 */
  --color-canvas: #000000;
  --color-surface: #000000;
  --color-surface-elevated: #0e0e11;   /* 仅浮层：弹窗 / 下拉 / 提示 */
  --color-surface-sunken: #0a0a0c;     /* 表头 / 代码块 / 输入组等内嵌区域 */
  --color-surface-hover: #16161a;
  --color-surface-active: #1f1f25;

  /* 文字：不用纯白，降低大面积高亮带来的刺激 */
  --color-text-primary: #f2f2f5;
  --color-text-secondary: #b4b4bd;
  --color-text-muted: #82828c;
  --color-text-disabled: #55555e;
  --color-text-inverse: #000000;

  /* 边框：纯黑下唯一可靠的层级线索，必须清晰可见 */
  --color-border: #26262d;
  --color-border-strong: #3d3d47;
  --color-divider: #1a1a1f;

  /* 强调色：提亮后的靛蓝，兼顾「黑底上的文字」与「按钮底 + 白字」 */
  --color-accent: #6d6afc;
  --color-accent-hover: #7f7cff;
  --color-accent-active: #5b58e8;
  --color-accent-text: #ffffff;
  --color-accent-soft: #14142b;
  --color-accent-soft-border: #33336b;
  --color-accent-strong: #a5a3ff;

  /* 语义状态：提亮前景 + 压暗底色，保证徽标 / 提示条可读 */
  --color-success: #34d399;
  --color-success-soft: #062e24;
  --color-success-border: #17513f;
  --color-success-text: #6ee7b7;

  --color-warning: #fbbf24;
  --color-warning-soft: #2e2306;
  --color-warning-border: #5c4708;
  --color-warning-text: #fcd34d;

  --color-error: #f87171;
  --color-error-soft: #2e1012;
  --color-error-border: #5c2020;
  --color-error-text: #fca5a5;

  --color-info: #60a5fa;
  --color-info-soft: #0d1f33;
  --color-info-border: #1e3a5f;
  --color-info-text: #93c5fd;

  --color-focus-ring: #8b8bff;
  --color-focus-ring-soft: #14142b;
  --color-selection-bg: #6d6afc;
  --color-selection-text: #000000;

  /* 专用区域 */
  --color-code-bg: #0a0a0c;
  --color-code-text: #c9c9d2;
  --color-code-ok: #6ee7b7;
  --color-code-err: #fca5a5;
  --color-code-dim: #6b6b75;
  --color-overlay: rgba(0, 0, 0, 0.8);      /* 遮罩：压暗内容，浮层靠边框区分 */
  --color-glass: #000000;                   /* 顶栏 / 底栏直接用纯黑，不用毛玻璃 */
  --color-glass-strong: #000000;
  --color-toast-bg: #1f1f26;
  --color-toast-text: #f2f2f5;
  --color-scrim-fade: rgba(0, 0, 0, 0);

  /* 纯黑上阴影不可见 —— 去掉，改由边框承担层级区分 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* 毛玻璃在纯黑上没有视觉收益，且消耗 GPU，直接关掉 */
  --backdrop-filter: none;
  --backdrop-filter-strong: none;
  --auth-gradient: #000000;
  --skeleton-gradient: linear-gradient(
    90deg,
    #14141a 25%,
    #1f1f27 37%,
    #14141a 63%
  );
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%2382828c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 阴影被去掉后，原本靠阴影浮起来的元素改用边框区分 */
:root[data-theme="oled"] .modal {
  border: 1px solid var(--color-border-strong);
}
:root[data-theme="oled"] .toast {
  border: 1px solid var(--color-border-strong);
}
:root[data-theme="oled"] .log {
  border: 1px solid var(--color-border);
}
/* 分段控件的选中态原本靠 box-shadow 表现，改为底色 + 边框 */
:root[data-theme="oled"] .segmented button.is-active {
  background: var(--color-surface-active);
  color: var(--color-text-primary);
  box-shadow: none;
}
:root[data-theme="oled"] .segmented {
  background: var(--color-surface-sunken);
}
/* 侧栏与顶栏在纯黑下需要一条边线才能与内容区分 */
:root[data-theme="oled"] .topbar,
:root[data-theme="oled"] .bottom-nav {
  background: var(--color-canvas);
}
/* 输入框用下沉色，让可编辑区域在纯黑上看得出来 */
:root[data-theme="oled"] .input,
:root[data-theme="oled"] .select,
:root[data-theme="oled"] .textarea {
  background: var(--color-surface-sunken);
}
:root[data-theme="oled"] .btn:not(.btn--primary):not(.btn--danger):not(.btn--amber) {
  background: var(--color-surface-sunken);
}
:root[data-theme="oled"] .btn:not(.btn--primary):not(.btn--danger):not(.btn--amber):hover:not(:disabled) {
  background: var(--color-surface-hover);
}
:root[data-theme="oled"] .btn--danger:hover:not(:disabled),
:root[data-theme="oled"] .btn--amber:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

/* ==========================================================================
   主题：E-Ink Pure White
   --------------------------------------------------------------------------
   面向电子墨水屏（黑白 / 低刷新彩色）。

   取舍说明：
   - 页面主背景为**纯白 #FFFFFF**，平坦无纹理：不使用纸张纹理、噪点、
     颗粒或墨水扩散效果，也不使用渐变（渐变在 16 级灰阶上会出现色带）。
   - 关闭全部动画、过渡、阴影与毛玻璃 —— 电子墨水刷新慢且有残影，
     动态效果只会造成闪烁和拖影。
   - 语义状态不靠颜色区分（单色屏上没有颜色），改用
     **边框样式（实线 / 虚线 / 双线 / 点线）+ 黑白反转 + 文字前缀**，
     保证在灰度甚至单色下也能分辨。
   - 大块纯黑会加重残影，因此代码块改为白底黑字 + 黑框，而不是黑底白字。
   ========================================================================== */
:root[data-theme="eink"] {
  color-scheme: light;

  /* 画布与表面：纯净平坦的白 */
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-sunken: #f2f2f2;
  --color-surface-hover: #ebebeb;
  --color-surface-active: #dcdcdc;

  /* 文字：最大对比度，灰色也保持可读 */
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-text-muted: #555555;
  --color-text-disabled: #9e9e9e;
  --color-text-inverse: #ffffff;

  /* 边框：电子墨水上细灰线容易消失，结构性边框一律用纯黑 */
  --color-border: #000000;
  --color-border-strong: #000000;
  --color-divider: #9a9a9a;

  /* 强调色：单色环境下「强调」= 黑白反转 */
  --color-accent: #000000;
  --color-accent-hover: #1f1f1f;
  --color-accent-active: #000000;
  --color-accent-text: #ffffff;
  --color-accent-soft: #dcdcdc;
  --color-accent-soft-border: #000000;
  --color-accent-strong: #000000;

  /* 语义状态：颜色全部归一为黑，靠边框样式与前缀区分（见下方规则） */
  --color-success: #000000;
  --color-success-soft: #ffffff;
  --color-success-border: #000000;
  --color-success-text: #000000;

  --color-warning: #000000;
  --color-warning-soft: #e8e8e8;
  --color-warning-border: #000000;
  --color-warning-text: #000000;

  --color-error: #000000;
  --color-error-soft: #ffffff;
  --color-error-border: #000000;
  --color-error-text: #000000;

  --color-info: #000000;
  --color-info-soft: #f0f0f0;
  --color-info-border: #000000;
  --color-info-text: #000000;

  --color-focus-ring: #000000;
  --color-focus-ring-soft: #dcdcdc;
  --color-selection-bg: #000000;
  --color-selection-text: #ffffff;

  /* 专用区域 */
  --color-code-bg: #ffffff;                  /* 白底黑字，减少墨量 */
  --color-code-text: #000000;
  --color-code-ok: #000000;
  --color-code-err: #000000;
  --color-code-dim: #666666;
  --color-overlay: rgba(0, 0, 0, 0.55);      /* 唯一的半透明：模态遮罩，纯平无渐变 */
  --color-glass: #ffffff;
  --color-glass-strong: #ffffff;
  --color-toast-bg: #ffffff;
  --color-toast-text: #000000;
  --color-scrim-fade: #ffffff;

  /* 阴影一律关闭 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* 毛玻璃 / 渐变一律关闭 */
  --backdrop-filter: none;
  --backdrop-filter-strong: none;
  --auth-gradient: #ffffff;
  --skeleton-gradient: #ededed;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%23000000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* 动效全部归零 */
  --motion-duration-fast: 0s;
  --motion-duration-normal: 0s;
  --motion-duration-slow: 0s;
}

/* --------------------------------------------------------------------------
   E-Ink：彻底停掉动效
   只把时长设为 0 仍会保留动画的起止状态跳变，这里直接禁用，
   并兜住任何内联样式里写死的 transition。
   -------------------------------------------------------------------------- */
:root[data-theme="eink"] *,
:root[data-theme="eink"] *::before,
:root[data-theme="eink"] *::after {
  animation: none !important;
  transition: none !important;
}
/* 启动占位条在无动画时停在半截，改为整条填满，语义更清楚 */
:root[data-theme="eink"] .boot__bar span {
  width: 100%;
}

/* --------------------------------------------------------------------------
   E-Ink：无颜色可依赖，用「边框样式 + 黑白反转 + 文字前缀」表达状态
   -------------------------------------------------------------------------- */

/* 成功：实线边框 + ✓ 前缀 */
:root[data-theme="eink"] .badge--green,
:root[data-theme="eink"] .alert--ok,
:root[data-theme="eink"] .verdict--ok {
  border: 1px solid var(--color-border);
}
:root[data-theme="eink"] .badge--green::before,
:root[data-theme="eink"] .alert--ok::before,
:root[data-theme="eink"] .verdict--ok::before {
  content: '✓';
  font-weight: 700;
  margin-right: 4px;
}

/* 失败：双线边框 + ✕ 前缀（单色下与「成功」明显不同） */
:root[data-theme="eink"] .badge--red,
:root[data-theme="eink"] .alert--err,
:root[data-theme="eink"] .verdict--bad {
  border: 3px double var(--color-border);
}
:root[data-theme="eink"] .badge--red::before,
:root[data-theme="eink"] .alert--err::before,
:root[data-theme="eink"] .verdict--bad::before {
  content: '✕';
  font-weight: 700;
  margin-right: 4px;
}

/* 警告：虚线边框 + ! 前缀 */
:root[data-theme="eink"] .badge--amber,
:root[data-theme="eink"] .alert--warn {
  border: 1px dashed var(--color-border);
}
:root[data-theme="eink"] .badge--amber::before,
:root[data-theme="eink"] .alert--warn::before {
  content: '!';
  font-weight: 700;
  margin-right: 4px;
}

/* 信息：点线边框 + i 前缀 */
:root[data-theme="eink"] .badge--blue,
:root[data-theme="eink"] .alert--info,
:root[data-theme="eink"] .verdict--info {
  border: 1px dotted var(--color-border);
}
:root[data-theme="eink"] .badge--blue::before,
:root[data-theme="eink"] .alert--info::before,
:root[data-theme="eink"] .verdict--info::before {
  content: 'i';
  font-weight: 700;
  font-style: italic;
  margin-right: 4px;
}

/* 选项状态：选中用粗实线，正确用黑白反转，错误用双线 */
:root[data-theme="eink"] .option.is-selected {
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
:root[data-theme="eink"] .option.is-selected .option__key {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
:root[data-theme="eink"] .option.is-correct {
  border: 2px solid var(--color-border);
  background: #000000;
  color: #ffffff;
}
:root[data-theme="eink"] .option.is-correct .option__key {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
:root[data-theme="eink"] .option.is-wrong {
  border: 3px double var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
:root[data-theme="eink"] .option.is-wrong .option__key {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
:root[data-theme="eink"] .option.is-correct::after {
  content: '✓';
  font-weight: 700;
  margin-left: 6px;
}
:root[data-theme="eink"] .option.is-wrong::after {
  content: '✕';
  font-weight: 700;
  margin-left: 6px;
}

/* 日志行：白底黑字后颜色全归一，用前缀与字重区分级别 */
:root[data-theme="eink"] .log {
  border: 1px solid var(--color-border);
}
:root[data-theme="eink"] .log__ok::before {
  content: '✓ ';
  font-weight: 700;
}
:root[data-theme="eink"] .log__err::before {
  content: '✕ ';
  font-weight: 700;
}
:root[data-theme="eink"] .log__err {
  text-decoration: underline;
}
:root[data-theme="eink"] .log__dim::before {
  content: '· ';
}

/* 提示条：白底黑字 + 黑框，靠边框与文字前缀表达语义
   注意：.toast--ok/--err/--warn 原本用语义色作**背景**，
   而 E-Ink 下语义色被归一为黑（它是给文字/边框用的），
   会导致黑底黑字完全不可见。这里把背景拉回白底。 */
:root[data-theme="eink"] .toast {
  border: 2px solid var(--color-border);
}
:root[data-theme="eink"] .toast--ok,
:root[data-theme="eink"] .toast--err,
:root[data-theme="eink"] .toast--warn {
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
}
:root[data-theme="eink"] .toast--ok::before { content: '✓ '; font-weight: 700; }
:root[data-theme="eink"] .toast--err::before { content: '✕ '; font-weight: 700; }
:root[data-theme="eink"] .toast--warn::before { content: '! '; font-weight: 700; }

/* 危险 / 标记按钮：单色下与普通按钮同为白底黑字，用边框样式区分 */
:root[data-theme="eink"] .btn--danger {
  border: 3px double var(--color-border);
}
:root[data-theme="eink"] .btn--amber {
  border: 1px dashed var(--color-border);
}

/* 弹窗：阴影关闭后改用粗边框浮起 */
:root[data-theme="eink"] .modal {
  border: 2px solid var(--color-border);
}
:root[data-theme="eink"] .card,
:root[data-theme="eink"] .stat,
:root[data-theme="eink"] .auth__form {
  border: 1px solid var(--color-border);
}
/* 分段控件选中态：黑底白字，无颜色时的最强区分 */
:root[data-theme="eink"] .segmented button.is-active {
  background: #000000;
  color: #ffffff;
  box-shadow: none;
}
/* 侧栏当前项：黑底白字 + 左侧粗标 */
:root[data-theme="eink"] .nav-item.is-active {
  background: #000000;
  color: #ffffff;
  border-left: 4px solid #000000;
}
:root[data-theme="eink"] .nav-item.is-active .nav-item__count {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
:root[data-theme="eink"] .bottom-nav__item.is-active {
  color: #000000;
  text-decoration: underline;
}
/* 进度条：外框 + 实心填充，灰度下也分得清 */
:root[data-theme="eink"] .progress {
  border: 1px solid var(--color-border);
  background: #ffffff;
}
:root[data-theme="eink"] .progress > span {
  background: #000000;
}
/* 迷你柱状图：底色改描边，避免浅灰在墨水屏上糊成一片 */
:root[data-theme="eink"] .spark__bar {
  background: #ffffff;
  outline: 1px solid var(--color-border);
}
:root[data-theme="eink"] .spark__bar > i {
  background: #000000;
}
/* 下拉箭头在 E-Ink 上加大加黑，方便识别 */
:root[data-theme="eink"] .select {
  border-width: 2px;
}
/* 输入框加粗边框，聚焦时用 2px 黑框而不是彩色光晕 */
:root[data-theme="eink"] .input,
:root[data-theme="eink"] .textarea {
  border-width: 2px;
}
:root[data-theme="eink"] .input:focus,
:root[data-theme="eink"] .select:focus,
:root[data-theme="eink"] .textarea:focus {
  box-shadow: none;
  border-color: var(--color-border);
  outline: 2px solid var(--color-border);
  outline-offset: 1px;
}
/* 拖拽区：虚线边框本身就是 E-Ink 友好的表达，加粗即可 */
:root[data-theme="eink"] .dropzone {
  border-width: 3px;
  background: var(--color-surface);
}
/* 步骤条：已完成 / 进行中用反转与边框区分 */
:root[data-theme="eink"] .stepper__step {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
:root[data-theme="eink"] .stepper__step.is-active {
  background: #000000;
  color: #ffffff;
}
:root[data-theme="eink"] .stepper__step.is-active .stepper__num {
  background: #ffffff;
  color: #000000;
}
:root[data-theme="eink"] .stepper__step.is-done .stepper__num {
  background: #000000;
  color: #ffffff;
}
/* 用户自选的科目色在单色屏上没有意义，统一灰度化（色块与取色器都要） */
:root[data-theme="eink"] .subject-dot,
:root[data-theme="eink"] .subject-swatch {
  filter: grayscale(1) contrast(1.35);
}
/* 代码块白底黑字后，行内标记改用下划线/加粗表达 */
:root[data-theme="eink"] .explain,
:root[data-theme="eink"] .translated,
:root[data-theme="eink"] .qcontext {
  border: 1px solid var(--color-border);
}
:root[data-theme="eink"] .translated {
  border-left-width: 4px;
}