/* ============================================================
   错题本 Web · 设计系统
   参考：Vercel Geist 字阶 / shadcn 主题变量 / Apple HIG 触控尺寸
   ============================================================ */

:root {
  --bg:#f7f8fa; --bg-2:#ffffff; --card:#ffffff; --card-2:#fbfbfd;
  --line:rgba(17,20,28,.09); --line-2:rgba(17,20,28,.06);
  --fg:#12141a; --fg-2:#4d5464; --fg-3:#878ea0;
  --accent:#4f46e5; --accent-soft:rgba(79,70,229,.10);
  --shadow-1:0 1px 2px rgba(16,18,27,.05), 0 1px 3px rgba(16,18,27,.05);
  --shadow-2:0 4px 12px rgba(16,18,27,.07), 0 12px 32px rgba(16,18,27,.06);
  --shadow-3:0 24px 64px rgba(16,18,27,.18);
  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --rail:268px;

  --s-数学:#3b82f6; --s-物理:#8b5cf6; --s-化学:#10b981; --s-日语:#06b6d4;
  --s-语文:#f43f5e; --s-地理:#f59e0b; --s-政治:#64748b; --s-其他:#64748b;
  --c-概念不清:#ef4444; --c-计算失误:#f97316; --c-审题偏差:#d97706;
  --c-思路卡壳:#8b5cf6; --c-完全不会:#64748b; --c-未标注:#94a3b8;
}
html[data-theme="dark"] {
  --bg:#0a0c11; --bg-2:#0f1218; --card:#12161e; --card-2:#161b25;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --fg:#e9ecf3; --fg-2:#a2aabd; --fg-3:#6e7688;
  --accent:#8b95ff; --accent-soft:rgba(139,149,255,.16);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 18px rgba(0,0,0,.45);
  --shadow-3:0 24px 70px rgba(0,0,0,.6);
  --s-数学:#60a5fa; --s-物理:#a78bfa; --s-化学:#34d399; --s-日语:#22d3ee;
  --s-语文:#fb7185; --s-地理:#fbbf24; --s-政治:#94a3b8; --s-其他:#94a3b8;
  --c-概念不清:#f87171; --c-计算失误:#fb923c; --c-审题偏差:#fbbf24;
  --c-思路卡壳:#a78bfa; --c-完全不会:#94a3b8; --c-未标注:#94a3b8;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:#0a0c11; --bg-2:#0f1218; --card:#12161e; --card-2:#161b25;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    --fg:#e9ecf3; --fg-2:#a2aabd; --fg-3:#6e7688;
    --accent:#8b95ff; --accent-soft:rgba(139,149,255,.16);
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 18px rgba(0,0,0,.45);
    --shadow-3:0 24px 70px rgba(0,0,0,.6);
    --s-数学:#60a5fa; --s-物理:#a78bfa; --s-化学:#34d399; --s-日语:#22d3ee;
    --s-语文:#fb7185; --s-地理:#fbbf24; --s-政治:#94a3b8; --s-其他:#94a3b8;
    --c-概念不清:#f87171; --c-计算失误:#fb923c; --c-审题偏差:#fbbf24;
    --c-思路卡壳:#a78bfa; --c-完全不会:#94a3b8; --c-未标注:#94a3b8;
  }
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:400 14px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--fg-3); background-clip:content-box; border:3px solid transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ───────── 布局 ───────── */
.app { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100dvh; }
.main { min-width:0; display:flex; flex-direction:column; }

/* ───────── 侧栏 ───────── */
.rail {
  position:sticky; top:0; height:100dvh; display:flex; flex-direction:column;
  background:var(--bg-2); border-right:1px solid var(--line);
  padding:16px 12px 12px; gap:14px; overflow-y:auto; overscroll-behavior:contain; z-index:40;
}
.rail-head { display:flex; align-items:center; justify-content:space-between; padding:0 6px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark {
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--accent),#8b5cf6); color:#fff; font-weight:700; font-size:17px;
  box-shadow:0 4px 12px rgba(79,70,229,.3);
}
.brand-text { display:flex; flex-direction:column; line-height:1.25; }
.brand-text b { font-size:15px; letter-spacing:.2px; }
.brand-text span { font-size:11.5px; color:var(--fg-3); }
.rail-close { display:none; }
.icon-btn.rail-close { display:none; }

.countdown { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent-soft),transparent 70%); border:1px solid var(--line-2); }
.cd-ring { position:relative; width:56px; height:56px; flex:none; }
.cd-ring svg { width:56px; height:56px; transform:rotate(-90deg); stroke-width:6; }
.cd-bg { stroke:var(--line); fill:none; }
.cd-fg { stroke:var(--accent); fill:none; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.cd-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1px; }
.cd-num b { font-size:16px; letter-spacing:-.4px; }
.cd-num span { font-size:9.5px; color:var(--fg-3); align-self:flex-end; margin-bottom:15px; }
.cd-text { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.cd-text b { font-size:12.5px; }
.cd-text span { font-size:11.5px; color:var(--fg-3); }

.rail-nav { display:flex; flex-direction:column; gap:2px; }
.rail-label { font-size:11px; font-weight:600; letter-spacing:.09em; color:var(--fg-3);
  text-transform:uppercase; padding:12px 10px 5px; }
.nav-item {
  display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:0 10px;
  border-radius:var(--r-sm); color:var(--fg-2); font-size:13.5px; text-align:left; transition:background .15s,color .15s;
}
.nav-item svg { width:16px; height:16px; opacity:.75; flex:none; }
.nav-item span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item i { font-style:normal; font-size:11.5px; color:var(--fg-3); background:var(--bg); border:1px solid var(--line-2);
  padding:1px 7px; border-radius:99px; }
.nav-item:hover { background:var(--bg); color:var(--fg); }
.nav-item.is-on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-item.is-on svg { opacity:1; }
.nav-item.is-on i { background:transparent; border-color:transparent; color:var(--accent); }

.chip-col { display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 0; }
.chip {
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border-radius:99px;
  border:1px solid var(--line); background:var(--card); color:var(--fg-2); font-size:12.5px;
  transition:.15s; white-space:nowrap;
}
.chip:hover { border-color:var(--fg-3); color:var(--fg); }
.chip .swatch { width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
.chip em { font-style:normal; color:var(--fg-3); font-size:11px; }
.chip.is-on { background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600; }
.chip.is-on em { color:var(--accent); opacity:.7; }

.rail-foot { margin-top:auto; padding-top:12px; }
.progress-box { border-top:1px solid var(--line-2); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.pb-row { display:flex; flex-direction:column; gap:3px; }
.pb-top { display:flex; justify-content:space-between; font-size:11.5px; color:var(--fg-3); }
.pb-top b { color:var(--fg-2); font-weight:500; }
.pb-bar { height:5px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.pb-bar i { display:block; height:100%; border-radius:99px; background:var(--accent); }

.scrim { display:none; }

/* ───────── 顶栏 ───────── */
.topbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:12px clamp(14px,2.4vw,26px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.search { position:relative; flex:1; max-width:560px; display:flex; align-items:center; }
.search-ico { position:absolute; left:12px; color:var(--fg-3); pointer-events:none; }
.search input {
  width:100%; height:42px; padding:0 40px 0 38px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--card); transition:.18s; font-size:14px;
}
.search input::-webkit-search-cancel-button { display:none; }
.search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-clear { position:absolute; right:6px; opacity:0; pointer-events:none; transition:.15s; }
.search.has-value .search-clear { opacity:1; pointer-events:auto; }
.top-actions { display:flex; gap:8px; margin-left:auto; }
.btn {
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); color:var(--fg-2); font-size:13.5px; transition:.15s;
}
.btn:hover { border-color:var(--fg-3); color:var(--fg); }
.btn svg { width:16px; height:16px; }
.btn.ghost { background:transparent; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center;
  color:var(--fg-2); border:1px solid transparent; transition:.15s; flex:none;
}
.icon-btn:hover { background:var(--bg-2); color:var(--fg); border-color:var(--line-2); }
.only-mobile { display:none; }

/* ───────── 统计 ───────── */
.stats { display:flex; flex-direction:column; gap:12px; padding:18px clamp(14px,2.4vw,26px) 4px; }
body.hide-stats .stats { display:none; }
.kpis { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.dists { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-1); position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--tint,var(--accent)); opacity:.9; }
.stat-l { font-size:11.5px; color:var(--fg-3); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.stat-v { font-size:26px; font-weight:650; letter-spacing:-.7px; line-height:1.2; margin-top:4px; }
.stat-v small { font-size:12.5px; font-weight:400; color:var(--fg-3); margin-left:4px; letter-spacing:0; }
.stat-sub { font-size:11.5px; color:var(--fg-3); margin-top:2px; }
.bars { display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:10px; gap:2px; background:var(--line-2); }
.bars i { display:block; height:100%; min-width:3px; transition:flex .4s cubic-bezier(.2,.8,.2,1); }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:11px; }
.legend span { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--fg-2); }
.legend b { font-weight:600; color:var(--fg-3); }
.legend .swatch { width:7px; height:7px; border-radius:99px; flex:none; }

/* ───────── 筛选条 ───────── */
.filterbar { position:sticky; top:67px; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px clamp(14px,2.4vw,26px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); }
.filter-scroll { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; flex:1; padding:2px 0; }
.filter-scroll::-webkit-scrollbar { display:none; }
.filter-right { display:flex; gap:8px; align-items:center; flex:none; }
.select { height:36px; padding:0 30px 0 12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  -webkit-appearance:none; appearance:none; font-size:13px; }
.fchip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 6px 0 11px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600; white-space:nowrap; flex:none; }
.fchip button { width:20px; height:20px; border-radius:99px; display:grid; place-items:center; color:inherit; opacity:.65; }
.fchip button:hover { opacity:1; background:color-mix(in srgb,var(--accent) 18%, transparent); }
.fchip svg { width:11px; height:11px; stroke-width:2.6; }

/* ───────── 列表 ───────── */
.listwrap { padding:6px clamp(14px,2.4vw,26px) 60px; }
.listmeta { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--fg-3); padding:4px 2px 12px; }
.dot { width:3px; height:3px; border-radius:99px; background:var(--fg-3); }
.list { display:grid; gap:10px; }

.card {
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:0 14px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px 14px 18px; box-shadow:var(--shadow-1); transition:.18s cubic-bezier(.2,.8,.2,1);
  cursor:pointer; overflow:hidden;
}
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3.5px; background:var(--tint); }
.card:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb, var(--tint) 40%, var(--line)); }
.card.is-active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-2); }
.card-date { font-size:11.5px; color:var(--fg-3); white-space:nowrap; padding-top:2px; letter-spacing:.02em; }
.card-main { min-width:0; display:flex; flex-direction:column; gap:6px; }
.card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tag-subject { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--tint); background:color-mix(in srgb, var(--tint) 12%, transparent); padding:2px 9px; border-radius:99px; }
.card-title { font-size:14.5px; font-weight:600; letter-spacing:-.15px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-src { font-size:11.5px; color:var(--fg-3); }
.card-excerpt { font-size:12.5px; color:var(--fg-2); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.card-excerpt .katex { font-size:.96em; }
.card-side { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  padding:2.5px 8px; border-radius:99px; white-space:nowrap;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }
.badge.times { color:var(--fg-2); background:var(--bg); border:1px solid var(--line-2); }
.badge.hot { color:#fff; background:linear-gradient(135deg,#ef4444,#f97316); }
.mastery { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--fg-3); white-space:nowrap; }
.mastery i { width:6px; height:6px; border-radius:99px; background:var(--m,var(--fg-3)); }
.mastery.is-done i { box-shadow:0 0 0 3px color-mix(in srgb, var(--m) 22%, transparent); }

.empty { display:grid; place-items:center; gap:8px; padding:70px 20px; text-align:center; color:var(--fg-3); }
.empty-emoji { font-size:38px; }
.empty b { color:var(--fg); font-size:15px; }
.empty span { font-size:13px; }
.empty .btn { margin-top:8px; }

/* ───────── 抽屉 ───────── */
.drawer { position:fixed; inset:0; z-index:80; pointer-events:none; }
.drawer-scrim { position:absolute; inset:0; background:rgba(8,10,16,.42); opacity:0; transition:opacity .25s;
  backdrop-filter:blur(2px); }
.sheet {
  position:absolute; top:0; right:0; bottom:0; width:min(620px,94vw); display:flex; flex-direction:column;
  background:var(--bg-2); border-left:1px solid var(--line); box-shadow:var(--shadow-3);
  transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.drawer.is-open { pointer-events:auto; }
.drawer.is-open .drawer-scrim { opacity:1; }
.drawer.is-open .sheet { transform:none; }
.sheet-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line-2);
  position:sticky; top:0; background:var(--bg-2); z-index:2; }
.sheet-tags { display:flex; gap:7px; flex-wrap:wrap; flex:1; min-width:0; }
.sheet-nav { display:flex; gap:2px; }
.sheet-body { flex:1; overflow-y:auto; padding:20px clamp(16px,3vw,28px) 40px; overscroll-behavior:contain; }
.sheet-foot { display:flex; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2); background:var(--bg-2); }
.sf-label { font-size:12px; color:var(--fg-3); }
.seg { display:flex; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; gap:2px; }
.seg button { min-height:32px; padding:0 12px; border-radius:7px; font-size:12.5px; color:var(--fg-2); transition:.15s; }
.seg button:hover { color:var(--fg); }
.seg button.is-on { background:var(--card); color:var(--fg); font-weight:600; box-shadow:var(--shadow-1); }

/* ───────── 详情正文排版 ───────── */
.md { font-size:14px; line-height:1.78; color:var(--fg); }
.md > *:first-child { margin-top:0; }
.md h3 { font-size:15px; margin:22px 0 8px; letter-spacing:-.2px; }
.md p { margin:8px 0; }
.md ul { margin:8px 0; padding-left:20px; }
.md li { margin:4px 0; }
.md strong { font-weight:650; }
.md blockquote { margin:14px 0; padding:10px 14px; background:var(--card); border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--fg-2); font-size:13px; }
.md blockquote p { margin:4px 0; }
.md code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:var(--bg); border:1px solid var(--line-2); padding:1px 5px; border-radius:5px; }
.md hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
.md table { width:100%; border-collapse:collapse; margin:12px 0; font-size:12.5px; display:block; overflow-x:auto; }
.md th,.md td { border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top; }
.md th { background:var(--card); font-weight:600; color:var(--fg-2); white-space:nowrap; }
.md tr:nth-child(even) td { background:color-mix(in srgb, var(--card) 55%, transparent); }
.md .katex-display { margin:12px 0; overflow-x:auto; overflow-y:hidden; padding:2px 0; }
.md .katex { font-size:1.04em; }
.md .note { margin:10px 0; padding:9px 12px; border-radius:var(--r-sm); font-size:13px; line-height:1.7;
  background:var(--card); border:1px dashed var(--line); }
.md .note.warn { border-color:color-mix(in srgb,#ef4444 45%, var(--line)); background:color-mix(in srgb,#ef4444 7%, var(--card)); }
.md .note.good { border-color:color-mix(in srgb,#10b981 45%, var(--line)); background:color-mix(in srgb,#10b981 7%, var(--card)); }
.field { margin:0 0 4px; }
.field-label { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  color:var(--fg-3); margin:22px 0 2px; }
.field-label::after { content:""; flex:1; height:1px; background:var(--line-2); }
.field-label i { width:6px; height:6px; border-radius:99px; background:var(--fc,var(--fg-3)); }
.sheet-title { font-size:19px; font-weight:680; letter-spacing:-.4px; line-height:1.45; margin:16px 0 6px; }
.sheet-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:4px; }
.ctx { margin:0 0 18px; padding:12px 14px; border-radius:var(--r-md); background:var(--card);
  border:1px solid var(--line-2); font-size:12.5px; color:var(--fg-2); }

/* ───────── 杂项 ───────── */
.toast { position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px); z-index:200;
  background:var(--fg); color:var(--bg); padding:10px 18px; border-radius:99px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:.25s cubic-bezier(.2,.8,.2,1); box-shadow:var(--shadow-3); }
.toast.is-on { opacity:1; transform:translate(-50%,0); }
.skel { background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 37%,var(--card) 63%);
  background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:var(--r-lg); height:96px; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition-duration:.01ms!important; } }

/* ───────── 响应式 ───────── */
@media (max-width:1180px) { :root { --rail:236px; } }
@media (max-width:1023px) {
  .app { grid-template-columns:1fr; }
  .rail { position:fixed; left:0; top:0; bottom:0; width:290px; transform:translateX(-102%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:var(--shadow-3); }
  .rail.is-open { transform:none; }
  .icon-btn.rail-close { display:grid; }
  .scrim { display:block; position:fixed; inset:0; background:rgba(8,10,16,.45); opacity:0; pointer-events:none;
    transition:opacity .25s; z-index:35; }
  .scrim.is-on { opacity:1; pointer-events:auto; }
  .only-mobile { display:grid; }
  .only-desktop { display:none; }
  .filterbar { top:65px; }
  .sheet { width:min(620px,100vw); }
}
@media (max-width:640px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding-top:12px; }
  .stat { padding:11px 13px; border-radius:var(--r-md); }
  .stat-v { font-size:21px; }
  .card { grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; padding:13px 14px 13px 16px; }
  .card-main { grid-column:1; grid-row:1; }
  .card-date { grid-column:2; grid-row:1; text-align:right; padding-top:3px; }
  .card-side { grid-column:1 / -1; grid-row:2; flex-direction:row; align-items:center;
    justify-content:space-between; width:100%; padding-top:2px; border-top:1px solid var(--line-2); }
  .sheet { top:auto; left:0; right:0; bottom:0; width:100%; height:94dvh; border-left:0;
    border-top:1px solid var(--line); border-radius:20px 20px 0 0; transform:translateY(102%); }
  .drawer.is-open .sheet { transform:none; }
  .sheet::before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:99px; background:var(--line); }
  .sheet-head { padding-top:20px; }
  .sheet-body { padding:16px 16px 30px; }
  .topbar { padding:10px 12px; gap:8px; }
  .search input { height:40px; }
  .legend { gap:6px 10px; }
}

/* ───────── 口令解锁 ───────── */
body.locked .app, body.locked .drawer, body.locked .toast { display:none !important; }
.lock { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.lock[hidden] { display:none; }
.lock-card { width:min(400px,100%); display:flex; flex-direction:column; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px 22px;
  box-shadow:var(--shadow-3); text-align:center; }
.lock-mark { font-size:34px; line-height:1; }
.lock-card h1 { font-size:19px; margin:4px 0 0; letter-spacing:-.3px; }
.lock-card p { font-size:13px; color:var(--fg-2); margin:0; line-height:1.65; }
.lock-card input[type=password] {
  height:46px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--bg); font-size:15px; letter-spacing:.06em; text-align:center; margin-top:4px; }
.lock-card input[type=password]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.lock-remember { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fg-3); justify-content:center; }
.lock-remember input { width:15px; height:15px; accent-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:transparent; color:#fff; justify-content:center;
  height:46px; font-weight:600; font-size:14.5px; }
.btn.primary:hover { background:color-mix(in srgb, var(--accent) 88%, #000); color:#fff; }
.btn.primary:disabled { opacity:.6; cursor:default; }
.lock-err { min-height:18px; font-size:12.5px; color:#ef4444; }
.lock-foot { font-size:11.5px; color:var(--fg-3); border-top:1px solid var(--line-2); padding-top:10px; line-height:1.7; }
.lock-foot code { font-size:11px; }

/* ───────── 手写模式（Apple Pencil） ───────── */
body.inking { overflow:hidden; }
body.inking .drawer { display:none; }
.ink { position:fixed; inset:0; z-index:400; display:flex; flex-direction:column; background:var(--bg-2); }
.ink[hidden] { display:none; }
.ink-head { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line-2);
  padding-top:calc(10px + env(safe-area-inset-top)); flex:none; }
.ink-title { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.ink-title b { font-size:14.5px; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ink-save { font-size:11px; color:var(--fg-3); flex:none; }
.ink-save.is-on { color:#10b981; }
.ink-headnav { display:flex; gap:2px; flex:none; }

.ink-body { flex:1; display:flex; min-height:0; }
.ink-side { width:min(420px,38vw); flex:none; border-right:1px solid var(--line-2); overflow-y:auto;
  background:var(--card); display:none; }
.ink-side-inner { padding:16px 18px 40px; }
.ink-side .md { font-size:13.5px; }
.ink-more { margin-top:18px; border-top:1px dashed var(--line); padding-top:12px; }
.ink-more summary { cursor:pointer; font-size:12.5px; color:var(--fg-3); font-weight:600; }
.ink-stage { flex:1; position:relative; min-width:0; background:var(--paper,#fff); touch-action:none; }
html[data-theme="dark"] .ink-stage { --paper:#12161e; }
@media (prefers-color-scheme:dark){ html[data-theme="auto"] .ink-stage { --paper:#12161e; } }
#inkCanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; display:block; }
.ink-hint { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:6px;
  color:var(--fg-3); font-size:14px; line-height:1.7; pointer-events:none; transition:opacity .25s; }
.ink-hint small { font-size:11.5px; }
.ink-hint[hidden] { display:none; }

.ink-bar { flex:none; border-top:1px solid var(--line-2); background:var(--bg-2);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); overflow-x:auto; scrollbar-width:none; }
.ink-bar::-webkit-scrollbar { display:none; }
.ink-tools { display:flex; align-items:center; gap:7px; min-width:max-content; }
.itool { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--fg-2);
  border:1px solid var(--line); background:var(--card); transition:.15s; flex:none; }
.itool:hover { color:var(--fg); border-color:var(--fg-3); }
.itool.is-on { background:var(--accent); border-color:transparent; color:#fff; }
.ink-sep { width:1px; height:24px; background:var(--line); margin:0 3px; flex:none; }
.ink-colors, .ink-sizes { display:flex; gap:6px; align-items:center; }
.icolor { width:30px; height:30px; border-radius:99px; border:2px solid var(--line); transition:.15s; flex:none; }
.icolor.is-on { border-color:var(--fg); transform:scale(1.12); }
.isize { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line);
  background:var(--card); flex:none; }
.isize i { display:block; border-radius:99px; background:var(--fg-2); }
.isize.is-on { border-color:var(--accent); background:var(--accent-soft); }
.isize.is-on i { background:var(--accent); }
.ink-finger { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-3); white-space:nowrap;
  margin-left:6px; }
.ink-finger input { width:15px; height:15px; accent-color:var(--accent); }

/* iPad / 宽屏：左边题目，右边白板 */
@media (min-width:900px) { .ink-side { display:block; } }
/* 手机：工具栏更紧凑 */
@media (max-width:640px) {
  .itool { width:38px; height:38px; }
  .icolor { width:27px; height:27px; }
  .ink-title b { font-size:13.5px; }
}
/* 卡片上的"有手写"小标记 */
.card-note { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--accent);
  background:var(--accent-soft); padding:1px 6px; border-radius:99px; }