/* =========================================================
   考研阅读 · 生词难句
   单一色相：所有颜色都由 --h 推导，只用明度/透明度区分层次
   ========================================================= */
:root {
  /* 整套配色由一个色相 --h 推导；--sat 色彩浓度，--glow 背景光晕强度（由「配色」面板设置） */
  --h: 232; --sat: 1; --glow: 1;
  color-scheme: light;

  /* 色彩分量（可以接 / 透明度使用） */
  --c-accent: var(--h) calc(69% * var(--sat)) 61%;
  --c-strong: var(--h) calc(55% * var(--sat)) 53%;
  --c-light:  var(--h) calc(80% * var(--sat)) 69%;
  --c-pale:   var(--h) calc(100% * var(--sat)) 82%;
  --c-shadow: var(--h) calc(50% * var(--sat)) 31%;
  --c-ink-bg: var(--h) calc(40% * var(--sat)) 18%;

  /* 文字与线条 */
  --ink: hsl(var(--h) calc(40% * var(--sat)) 19%);
  --muted: hsl(var(--h) calc(16% * var(--sat)) 51%);
  --line: hsl(var(--h) calc(46% * var(--sat)) 35% / .12);
  --track: hsl(var(--h) calc(40% * var(--sat)) 41% / .10);

  /* 主色阶（语义化） */
  --accent: hsl(var(--c-accent));          /* 主色：按钮、选中 */
  --accent-strong: hsl(var(--c-strong));   /* 已完成 */
  --accent-mid: hsl(var(--c-pale));        /* 进行中 */
  --accent-soft: hsl(var(--c-accent) / .12);
  --accent-text: hsl(var(--h) calc(48% * var(--sat)) 44%);
  --grad: linear-gradient(135deg, hsl(var(--c-light)), hsl(var(--c-strong)));
  --danger: #d9485f;

  /* 背景与光晕：同一色相左右小幅偏移 */
  --bg: hsl(var(--h) calc(50% * var(--sat)) 96%);
  --blob-1: hsl(var(--h) calc(100% * var(--sat)) 75% / calc(.50 * var(--glow)));
  --blob-2: hsl(calc(var(--h) + 22) calc(100% * var(--sat)) 80% / calc(.40 * var(--glow)));
  --blob-3: hsl(calc(var(--h) - 18) calc(100% * var(--sat)) 74% / calc(.42 * var(--glow)));

  /* 玻璃 */
  /* --opq：面板不透明度倍数（「面板透明度」滑块），--frost：磨砂模糊半径（px） */
  --opq: 1; --frost: 20;
  --glass: rgba(255, 255, 255, calc(.46 * var(--opq)));
  --glass-strong: rgba(255, 255, 255, calc(.84 * var(--opq)));
  --glass-read: rgba(255, 255, 255, max(.42, calc(.84 * var(--opq))));   /* 阅读正文：保留最低不透明度 */
  --glass-hover: rgba(255, 255, 255, max(.3, calc(.70 * var(--opq))));
  --glass-border: rgba(255, 255, 255, max(.3, calc(.78 * var(--opq))));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --blur: blur(calc(var(--frost) * 1px)) saturate(170%);
  --shadow: 0 10px 30px hsl(var(--c-shadow) / .10);
  --shadow-lg: 0 20px 50px hsl(var(--c-shadow) / .18);

  /* 标注：生词 = 色块，难句 = 虚线下划线（同色相，用形态区分） */
  --word-bg: hsl(var(--c-accent) / .20);
  --sent-bg: hsl(var(--c-accent) / .06);
  --sent-line: hsl(var(--c-strong));

  /* 流动彩色光晕 */
  --spread: 40; --aurora-speed: 1;
  --al: 72%; --aa: .5;

  --serif: Georgia, "Times New Roman", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  --radius: 16px;
}
/* 深色：跟随系统（未手动选浅色时），或手动选择深色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-accent: var(--h) calc(100% * var(--sat)) 77%;
    --c-strong: var(--h) calc(86% * var(--sat)) 70%;
    --c-light:  var(--h) calc(100% * var(--sat)) 77%;
    --c-shadow: 0 0% 0%;
    --c-ink-bg: var(--h) calc(40% * var(--sat)) 14%;

    --ink: hsl(var(--h) calc(100% * var(--sat)) 95%);
    --muted: hsl(var(--h) calc(25% * var(--sat)) 65%);
    --line: hsl(var(--h) calc(100% * var(--sat)) 81% / .12);
    --track: hsl(var(--h) calc(100% * var(--sat)) 81% / .12);

    --accent-mid: hsl(var(--h) calc(38% * var(--sat)) 48%);
    --accent-soft: hsl(var(--c-accent) / .15);
    --accent-text: hsl(var(--h) calc(100% * var(--sat)) 87%);
    --grad: linear-gradient(135deg, hsl(var(--c-accent)), hsl(var(--h) calc(64% * var(--sat)) 61%));
    --danger: #ff8a9a;

    --bg: hsl(var(--h) calc(42% * var(--sat)) 8%);
    --blob-1: hsl(var(--h) calc(75% * var(--sat)) 63% / calc(.32 * var(--glow)));
    --blob-2: hsl(calc(var(--h) + 30) calc(65% * var(--sat)) 61% / calc(.24 * var(--glow)));
    --blob-3: hsl(calc(var(--h) - 20) calc(70% * var(--sat)) 55% / calc(.24 * var(--glow)));

    --glass: hsl(var(--h) calc(38% * var(--sat)) 16% / calc(.50 * var(--opq)));
    --glass-strong: hsl(var(--h) calc(33% * var(--sat)) 13% / calc(.86 * var(--opq)));
    --glass-read: hsl(var(--h) calc(33% * var(--sat)) 13% / max(.5, calc(.86 * var(--opq))));
    --glass-hover: hsl(var(--h) calc(35% * var(--sat)) 27% / max(.3, calc(.60 * var(--opq))));
    --glass-border: rgba(255, 255, 255, .08);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .06);
    --shadow: 0 10px 30px rgba(0, 0, 0, .40);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);

    --word-bg: hsl(var(--c-accent) / .26);
    --sent-bg: hsl(var(--c-accent) / .07);
    --sent-line: hsl(var(--c-accent));
    --al: 56%; --aa: .38;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-accent: var(--h) calc(100% * var(--sat)) 77%;
  --c-strong: var(--h) calc(86% * var(--sat)) 70%;
  --c-light:  var(--h) calc(100% * var(--sat)) 77%;
  --c-shadow: 0 0% 0%;
  --c-ink-bg: var(--h) calc(40% * var(--sat)) 14%;

  --ink: hsl(var(--h) calc(100% * var(--sat)) 95%);
  --muted: hsl(var(--h) calc(25% * var(--sat)) 65%);
  --line: hsl(var(--h) calc(100% * var(--sat)) 81% / .12);
  --track: hsl(var(--h) calc(100% * var(--sat)) 81% / .12);

  --accent-mid: hsl(var(--h) calc(38% * var(--sat)) 48%);
  --accent-soft: hsl(var(--c-accent) / .15);
  --accent-text: hsl(var(--h) calc(100% * var(--sat)) 87%);
  --grad: linear-gradient(135deg, hsl(var(--c-accent)), hsl(var(--h) calc(64% * var(--sat)) 61%));
  --danger: #ff8a9a;

  --bg: hsl(var(--h) calc(42% * var(--sat)) 8%);
  --blob-1: hsl(var(--h) calc(75% * var(--sat)) 63% / calc(.32 * var(--glow)));
  --blob-2: hsl(calc(var(--h) + 30) calc(65% * var(--sat)) 61% / calc(.24 * var(--glow)));
  --blob-3: hsl(calc(var(--h) - 20) calc(70% * var(--sat)) 55% / calc(.24 * var(--glow)));

  --glass: hsl(var(--h) calc(38% * var(--sat)) 16% / calc(.50 * var(--opq)));
  --glass-strong: hsl(var(--h) calc(33% * var(--sat)) 13% / calc(.86 * var(--opq)));
  --glass-read: hsl(var(--h) calc(33% * var(--sat)) 13% / max(.5, calc(.86 * var(--opq))));
  --glass-hover: hsl(var(--h) calc(35% * var(--sat)) 27% / max(.3, calc(.60 * var(--opq))));
  --glass-border: rgba(255, 255, 255, .08);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow: 0 10px 30px rgba(0, 0, 0, .40);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);

  --word-bg: hsl(var(--c-accent) / .26);
  --sent-bg: hsl(var(--c-accent) / .07);
  --sent-line: hsl(var(--c-accent));
  --al: 56%; --aa: .38;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;  /* 不设背景：底色在 html 上，光晕层夹在两者之间 */
}
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36vmax 36vmax at 20% 22%, var(--blob-1), transparent 70%),
    radial-gradient(32vmax 32vmax at 84% 20%, var(--blob-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 72% 84%, var(--blob-3), transparent 70%),
    radial-gradient(28vmax 28vmax at 18% 82%, var(--blob-2), transparent 70%);
  filter: blur(10px);
}
/* 流动彩色光晕：以当前色相为中心向两侧铺开 --spread 度，几团颜色缓慢漂移
   只动 transform（交给 GPU 合成），开关和速度在「配色」面板里 */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; }
:root[data-motion="on"] .aurora { display: block; }
:root[data-motion="on"] body::before { opacity: .6; }
.aurora i {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    hsl(var(--ah) calc(95% * var(--sat)) var(--al) / calc(var(--aa) * var(--glow))) 0, transparent 66%);
  will-change: transform;
  animation: var(--anim) calc(var(--dur) * var(--aurora-speed)) ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { --ah: var(--h); left: -18vmax; top: -22vmax; --dur: 26s; --anim: aur-a; }
.aurora i:nth-child(2) { --ah: calc(var(--h) + var(--spread)); right: -22vmax; top: -12vmax; --dur: 32s; --anim: aur-b; }
.aurora i:nth-child(3) { --ah: calc(var(--h) - var(--spread)); left: 18vw; bottom: -28vmax; --dur: 29s; --anim: aur-c; }
.aurora i:nth-child(4) { --ah: calc(var(--h) + var(--spread) * 2); right: 4vw; bottom: -18vmax; --dur: 37s; --anim: aur-a; width: 46vmax; height: 46vmax; }
.aurora i:nth-child(5) { --ah: calc(var(--h) - var(--spread) * 2); left: 32vw; top: 12vh; --dur: 43s; --anim: aur-b; width: 40vmax; height: 40vmax; }
@keyframes aur-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18vw, 12vh) scale(1.18); } 100% { transform: translate(-8vw, 22vh) scale(.92); } }
@keyframes aur-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-22vw, 15vh) scale(.9); } 100% { transform: translate(-6vw, -10vh) scale(1.2); } }
@keyframes aur-c { 0% { transform: translate(0, 0) scale(.95); } 50% { transform: translate(15vw, -18vh) scale(1.15); } 100% { transform: translate(-18vw, -6vh) scale(1); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: hsl(var(--c-accent) / .28); }

.topbar, .overview, .resume, .card, #article, .box, .side-head, .pop, .exportbar, .toast, .side-tab, .btn, .seg, .filters {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}

/* ---------- 按钮 / 分段控件 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px;
  border: 1px solid var(--glass-border); border-radius: 12px;
  background: var(--glass); box-shadow: var(--glass-edge), 0 2px 8px hsl(var(--c-shadow) / .05);
  white-space: nowrap; font-size: 14px; transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--glass-hover); transform: translateY(-1px); }
.btn.primary {
  color: #fff; border-color: transparent; background: var(--grad);
  box-shadow: 0 6px 18px hsl(var(--c-strong) / .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn.primary:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.link { border: 0; background: none; color: var(--accent-text); padding: 0 4px; }
.link:hover { text-decoration: underline; }

/* 分段控件：一条浅色轨道，选中项是浮起来的白色玻璃片 */
.seg, .filters {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px;
  background: var(--track); border: 1px solid var(--glass-border);
}
.seg button, .filters button {
  border: 0; background: none; padding: 5px 13px; font-size: 13px; color: var(--muted);
  border-radius: 9px; transition: background .15s, color .15s, box-shadow .15s;
}
.seg button:hover, .filters button:hover { color: var(--ink); }
.seg button.on, .filters button.on {
  background: var(--glass-strong); color: var(--accent-text); font-weight: 600;
  box-shadow: 0 1px 3px hsl(var(--c-shadow) / .12), var(--glass-edge);
}
.filters button em { font-style: normal; margin-left: 6px; font-size: 12px; opacity: .65; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 12px 28px;
  background: var(--glass); border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px hsl(var(--c-shadow) / .05);
}
.topbar h1 { margin: 0; font-size: 17px; flex: 1; display: flex; align-items: center; gap: 10px; letter-spacing: .3px; }
.topbar h1::before {
  content: ""; width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--grad); box-shadow: 0 3px 10px hsl(var(--c-strong) / .4), inset 0 1px 0 rgba(255, 255, 255, .3);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 4px, #000 4.5px);
          mask: radial-gradient(circle at 50% 50%, transparent 4px, #000 4.5px);
}
.topbar h1 span { color: var(--muted); font-weight: normal; font-size: 13px; }
.topbar .back { color: var(--muted); font-size: 14px; padding: 5px 10px; border-radius: 10px; }
.topbar .back:hover { color: var(--ink); background: var(--glass-hover); }
.save-state { color: var(--muted); font-size: 12px; }

/* ---------- 首页 ---------- */
.home { max-width: 940px; margin: 0 auto; padding: 28px 24px 60px; }
.empty { text-align: center; color: var(--muted); padding: 80px 0; }
.empty code { background: var(--glass); padding: 2px 6px; border-radius: 6px; }

.overview {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px;
  box-shadow: var(--glass-edge), var(--shadow); padding: 20px 22px; margin-bottom: 18px;
}
/* 进度圆环：深色段 = 已完成，浅色段 = 进行中 */
.ring {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent-strong) 0 calc(var(--d) * 1%),
                             var(--accent-mid) 0 calc((var(--d) + var(--g)) * 1%),
                             var(--track) 0);
  box-shadow: 0 6px 20px hsl(var(--c-strong) / .18);
}
.ring-in {
  width: 76px; height: 76px; border-radius: 50%; background: var(--glass-strong);
  display: flex; align-items: baseline; justify-content: center; padding-top: 24px; gap: 2px;
  box-shadow: inset 0 1px 3px hsl(var(--c-shadow) / .12);
}
.ring-in b { font: 700 26px/1 var(--serif); color: var(--accent-text); }
.ring-in small { font-size: 12px; color: var(--muted); }
.ov-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ov-title { font-size: 16px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ov-title b { color: var(--accent-text); font: 700 20px/1 var(--serif); margin: 0 2px; }
.ov-title .sep { width: 1px; height: 14px; background: var(--line); margin: 0 10px; }
.ov-meta { color: var(--muted); font-size: 13px; margin-bottom: 4px; }

.resume {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 14px;
  padding: 12px 16px; border-radius: 16px; min-width: 190px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), 0 4px 14px hsl(var(--c-shadow) / .08);
  transition: transform .15s, box-shadow .15s;
}
.resume:hover { transform: translateY(-2px); box-shadow: var(--glass-edge), var(--shadow-lg); }
.resume small { color: var(--muted); font-size: 12px; }
.resume b { font-size: 15px; }
.resume .st-mini { margin-top: 4px; justify-self: start; }
.resume em { grid-column: 2; grid-row: 1 / 4; align-self: center; font-style: normal; color: var(--accent); font-size: 18px; }

/* 状态图标：空心 = 未做，半满 = 进行中，实心带勾 = 已完成 */
.st-ic {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; position: relative;
  border: 1.5px solid var(--muted); background: transparent;
}
.st-doing .st-ic { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.st-done .st-ic { border-color: var(--accent-strong); background: var(--accent-strong); }
.st-done .st-ic::after {
  content: ""; position: absolute; left: 2.5px; top: .5px; width: 2.5px; height: 5px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.st-mini {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 20px;
  padding: 0 9px 0 7px; border-radius: 999px; color: var(--muted); background: var(--track);
}
.st-mini.st-doing { color: var(--accent-text); background: var(--accent-soft); }
.st-mini.st-done { color: var(--accent-text); background: var(--accent-soft); }

/* 年份行 */
.year { display: flex; gap: 20px; align-items: center; padding: 12px 0; }
.year + .year { border-top: 1px solid var(--line); }
.year h2 { margin: 0; font: 700 22px var(--serif); letter-spacing: .5px; }
.ylabel { width: 76px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.ylabel small { color: var(--muted); font-size: 11px; }
.dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 64px; }
.dot { height: 5px; border-radius: 3px; background: var(--track); }
.dot.doing { background: var(--accent-mid); }
.dot.done { background: var(--accent-strong); }
.texts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; }

/* 卡片 */
.card {
  position: relative; display: block; padding: 13px 14px 12px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), 0 4px 14px hsl(var(--c-shadow) / .05);
  transition: transform .18s, box-shadow .18s, background .18s, opacity .2s;
}
.card b { display: block; font-size: 15px; margin-top: 22px; }
.card small { color: var(--muted); font-size: 12px; }
a.card:hover { transform: translateY(-2px); background: var(--glass-hover); box-shadow: var(--glass-edge), var(--shadow-lg); }
.card.off { background: transparent; border: 1px dashed var(--line); box-shadow: none; color: var(--muted); }
.card.off b { margin-top: 0; }
.card .st {
  position: absolute; top: 11px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); letter-spacing: .3px;
}
.card.st-todo b { color: var(--muted); font-weight: 600; }
.card.st-doing { background: linear-gradient(160deg, var(--accent-soft), var(--glass) 75%); border-color: hsl(var(--c-light) / .35); }
.card.st-doing .st { color: var(--accent-text); }
.card.st-done {
  background: linear-gradient(160deg, hsl(var(--c-accent) / .34), hsl(var(--c-accent) / .10) 85%);
  border-color: hsl(var(--c-strong) / .55);
}
.card.st-done .st { color: var(--accent-text); font-weight: 600; }
.card.st-done b { color: var(--accent-text); }
.card.dim { opacity: .28; }
.card.dim:hover { opacity: .75; }

/* ---------- 选择导出 ---------- */
.card .tick {
  display: none; position: absolute; top: 11px; right: 11px; width: 18px; height: 18px;
  border: 1.5px solid var(--muted); border-radius: 6px; background: var(--glass-strong);
}
.selecting .card[data-key] { cursor: pointer; user-select: none; }
.selecting .card[data-key]:hover { transform: none; }
.selecting .card .tick { display: block; }
.selecting .card.picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.selecting .card.picked .tick { background: var(--accent); border-color: var(--accent); }
.selecting .card.picked .tick::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.selecting .year h2 { cursor: pointer; user-select: none; }
.selecting .year h2:hover, .selecting .year h2.full { color: var(--accent); }
.selecting .year h2.part { color: var(--accent); opacity: .6; }
.selecting .home { padding-bottom: 150px; }

.exportbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20;
  width: min(860px, calc(100vw - 32px)); padding: 14px 18px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: var(--glass-edge), var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.eb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eb-row b { font-size: 14px; }
.eb-quick { display: flex; gap: 2px; font-size: 13px; }
.eb-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.eb-spacer { flex: 1; }

/* ---------- 阅读页 ---------- */
.status-seg button[data-st="done"].on { background: var(--grad); color: #fff; }

.reader {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px;
  max-width: 1240px; margin: 0 auto; padding: 24px 28px 60px;
}
.reader.side-off { grid-template-columns: minmax(0, 1fr) 0; gap: 0; max-width: 980px; }
.reader.side-off #side { display: none; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px 4px; }
.hint kbd, .pop kbd {
  display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; font: 600 11px/17px var(--sans);
  border-radius: 5px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
#article {
  background: var(--glass-read); border: 1px solid var(--glass-border); border-radius: 24px;
  box-shadow: var(--glass-edge), var(--shadow);
  padding: 34px 44px 26px 54px; font: 18px/1.95 var(--serif);
}
#article p { margin: 0 0 1.1em; text-indent: 2em; position: relative; }
#article p::before {
  content: attr(data-n); position: absolute; left: -36px; top: .45em; text-indent: 0;
  width: 22px; height: 22px; border-radius: 7px; text-align: center;
  font: 600 11px/22px var(--sans); color: var(--accent-text); background: var(--accent-soft);
}
.mk { cursor: pointer; border-radius: 4px; transition: background .15s; }
.mk.s {
  background: var(--sent-bg);
  text-decoration: underline dashed var(--sent-line) 2px; text-underline-offset: 5px; text-decoration-skip-ink: none;
}
.mk.w { background: var(--word-bg); }
.mk:hover { background: var(--accent-soft); }
.mk.w:hover { background: hsl(var(--c-accent) / .32); }
.mk.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { outline: 2px solid var(--accent); outline-offset: 2px; } 100% { outline: 2px solid transparent; } }

/* 原文 / 题目 切换 */
.view-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px 2px; flex-wrap: wrap; }
.view-bar .hint { margin: 0; }
.view-seg button { padding: 5px 16px; font-size: 13px; }
.view-seg button small { font-size: 11px; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.view-seg button:disabled { opacity: .4; cursor: not-allowed; }
#article.qview p { text-indent: 0; }
#article p[data-n=""]::before { display: none; }
#article .q-stem { font-weight: 600; margin: 1.5em 0 .35em; }
#article .q-stem:first-child { margin-top: 0; }
#article .q-opt { margin: 0 0 .15em; padding-left: 1.4em; font-size: 17px; }

/* 侧栏 */
#side { animation: side-in .2s ease; position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding-bottom: 4px; }
#side::-webkit-scrollbar { width: 6px; }
#side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@keyframes side-in { from { opacity: 0; transform: translateX(12px); } }
.side-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  padding: 7px 7px 7px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
}
.side-hide { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 9px; }
.side-hide:hover { color: var(--ink); background: var(--glass-hover); }
.box {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--shadow); margin-bottom: 12px; overflow: hidden;
}
.box-h {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border: 0; background: none; font-size: 14px; font-weight: 600; text-align: left;
}
.box-h:hover { background: var(--glass-hover); }
.box-h .n {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent-text);
  min-width: 24px; text-align: center; padding: 0 8px; border-radius: 999px; background: var(--accent-soft);
}
.box-h .chev {
  width: 8px; height: 8px; margin: 0 2px 3px 4px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); transition: transform .2s;
}
.box.collapsed .box-h .chev { transform: rotate(-45deg); margin-bottom: 0; }
.box-b { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; border-top: 1px solid var(--line); }
.box-b > div { overflow: hidden; min-height: 0; }
.box.collapsed .box-b { grid-template-rows: 0fr; border-top-color: transparent; }
.box ul { list-style: none; margin: 0; padding: 6px; }
.box li {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 9px; border-radius: 10px;
  cursor: pointer; transition: background .12s;
}
.box li:hover { background: var(--accent-soft); }
.box li .t { flex: 1; min-width: 0; }
.box li { flex-wrap: wrap; }
.occ {
  border: 0; padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; white-space: nowrap;
  color: var(--accent-text); background: var(--accent-soft); font-variant-numeric: tabular-nums;
}
.occ:hover, .occ.open { background: var(--accent); color: #fff; }
.occ.zero { color: var(--muted); background: var(--track); }
.occ-wait { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: occ-pulse 1s infinite; }
@keyframes occ-pulse { 50% { opacity: .25; } }
.occ-detail {
  flex-basis: 100%; margin: 6px 0 2px; padding: 9px 11px; border-radius: 10px; cursor: default;
  background: var(--glass-strong); border: 1px solid var(--line); font-size: 12px;
}
.occ-sum { display: flex; align-items: baseline; gap: 6px; color: var(--muted); margin-bottom: 6px; }
.occ-sum b { font: 700 16px/1 var(--serif); color: var(--accent-text); }
.occ-sum span { margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--track); line-height: 18px; }
.occ-years { display: flex; flex-direction: column; gap: 4px; }
.occ-y { display: flex; gap: 8px; align-items: baseline; }
.occ-y em { font-style: normal; font-weight: 600; width: 34px; flex: none; font-variant-numeric: tabular-nums; }
.occ-y span { display: flex; flex-wrap: wrap; gap: 4px; }
.occ-y i { font-style: normal; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); line-height: 18px; }
.occ-y i.here { background: var(--accent); color: #fff; }
.occ-forms { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); }
.box li .t.sent { font: 14px/1.55 var(--serif); }
.box li .p { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.box li .x { border: 0; background: none; color: var(--muted); padding: 0 4px; visibility: hidden; }
.box li:hover .x { visibility: visible; }
.box li .x:hover { color: var(--danger); }
.box li.stale .t { text-decoration: line-through; color: var(--muted); }
.box .none { color: var(--muted); font-size: 13px; padding: 12px 15px; }

/* 色标：生词 = 实心块，难句 = 虚线框 */
.sw-w, .sw-s { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.sw-w { background: var(--accent); box-shadow: 0 2px 6px hsl(var(--c-accent) / .35); }
.sw-s { background: var(--sent-bg); border: 1.5px dashed var(--sent-line); }

.side-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 9px 14px 11px;
  border: 1px solid var(--glass-border); border-right: 0; border-radius: 16px 0 0 16px;
  background: var(--glass-strong); box-shadow: var(--glass-edge), var(--shadow-lg); font-size: 13px;
  transition: padding .15s;
}
.side-tab:hover { padding-right: 14px; }
.side-tab b { color: var(--muted); }
.side-tab span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; }
.side-tab i { display: block; }

/* 选中文字后的浮动工具条：深色反白 */
.pop {
  position: absolute; z-index: 50; display: flex; gap: 2px; padding: 4px;
  background: hsl(var(--c-ink-bg) / .9); border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: 13px; color: rgba(255, 255, 255, .92);
}
.pop button { border: 0; background: none; padding: 6px 11px; border-radius: 9px; display: flex; align-items: center; gap: 7px; color: inherit; }
.pop button:hover { background: rgba(255, 255, 255, .12); }
.pop kbd { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; box-shadow: none; }
.pop .sw-w { background: hsl(var(--c-pale)); box-shadow: none; }
.pop .sw-s { border-color: hsl(var(--c-pale)); background: transparent; }
.pop .del { color: #ffb3bd; }
.pop .pop-info { padding: 6px 10px; white-space: nowrap; color: rgba(255, 255, 255, .72); }
.pop .pop-info b { color: #fff; }
.pop.touch { flex-wrap: wrap; max-width: calc(100vw - 16px); }
.pop.touch kbd { display: none; }
.pop.touch button { padding: 10px 14px; font-size: 15px; }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 60;
  padding: 9px 18px; border-radius: 12px; font-size: 14px;
  background: hsl(var(--c-ink-bg) / .9); color: #fff; box-shadow: var(--shadow-lg);
}

/* ---------- 模块切换 / 顶栏 ---------- */
.topbar:has(.modes) h1 { flex: none; }
.spacer { flex: 1; }
.modes a { padding: 5px 14px; font-size: 13px; color: var(--muted); border-radius: 9px; transition: background .15s, color .15s; }
.modes a:hover { color: var(--ink); }
.modes a.on { background: var(--glass-strong); color: var(--accent-text); font-weight: 600; box-shadow: 0 1px 3px hsl(var(--c-shadow) / .12), var(--glass-edge); }
:root { --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); }

/* 首页：卡片上的做题结果、年份旁的阅读正确率 */
.card .quiz {
  position: absolute; top: 10px; right: 12px; font-size: 11px; line-height: 18px; padding: 0 7px;
  border-radius: 999px; color: var(--muted); background: var(--track); font-variant-numeric: tabular-nums;
}
.card .quiz.full { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.selecting .card .quiz { display: none; }
/* 导出内容勾选（多选） */
.incs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chk {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--line); background: var(--glass); color: var(--muted); transition: background .12s, color .12s, border-color .12s;
}
.chk::before {
  content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .6;
  box-sizing: border-box; flex: none;
}
.chk:hover { color: var(--ink); }
.chk.on { color: var(--accent-text); background: var(--accent-soft); border-color: hsl(var(--c-accent) / .45); font-weight: 600; }
.chk.on::before {
  opacity: 1; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/10px no-repeat;
  border-color: var(--accent);
}
.chk:disabled { opacity: .4; cursor: not-allowed; }
.dl-menu {
  position: absolute; top: calc(100% + 6px); right: 16px; z-index: 40; width: 300px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-edge), var(--shadow-lg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: tp-in .16s ease;
}
.dl-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.dl-menu #dlGo { align-self: flex-end; }

/* ---------- 做题记录 ---------- */
.trk { max-width: 1120px; margin: 0 auto; padding: 26px 24px 60px; }
.trk-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.trk-heading h2 { margin: 0; font: 700 30px var(--serif); }
.trk-heading .range, .year-title span { color: var(--muted); font-size: 13px; }
.year-title { display: flex; align-items: baseline; gap: 12px; }
.trk-parts { margin-bottom: 16px; }
.trk-parts button { padding: 6px 20px; font-size: 14px; }

.trk-table {
  border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.trk-cols, .trk-link { display: grid; grid-template-columns: 1fr 1fr 1.7fr .9fr; align-items: center; }
.trk-cols { grid-template-columns: 1fr 1fr 1.7fr .9fr 96px; padding: 12px 20px; font-size: 12px; color: var(--muted); }
.trk-cols span:nth-child(4) { text-align: right; }
.trk-cols span:last-child { text-align: center; }
.trk-row { display: grid; grid-template-columns: 1fr 96px; align-items: center; border-top: 1px solid var(--line); transition: background .12s; }
.trk-row:hover { background: var(--glass-hover); }
.trk-link { padding: 13px 0 13px 20px; }
.trk-year { font: 700 17px var(--serif); }
.trk-progress, .trk-time { font-variant-numeric: tabular-nums; }
.trk-progress i, .trk-time i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 3px; }
.trk-time { text-align: right; }
.trk-rate { display: flex; align-items: center; gap: 10px; }
.trk-rate b { min-width: 52px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trk-bar { flex: 1; max-width: 150px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.trk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); }
.order-control { display: flex; justify-content: center; }
.order-circle {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed hsl(var(--c-accent) / .45);
  background: transparent; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums;
}
.order-circle:hover { background: var(--accent-soft); }
.order-circle.assigned { border: 0; color: #fff; background: var(--grad); box-shadow: 0 3px 10px hsl(var(--c-strong) / .35); }
.order-control input {
  width: 58px; padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--accent); text-align: center;
  font: inherit; background: var(--glass-strong); color: var(--ink);
}
.order-control input[aria-invalid="true"] { border-color: var(--danger); }

.trk-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 10px; }
.summary-item {
  padding: 14px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.metric-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.metric-value { font: 700 26px/1.2 var(--serif); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.metric-value .unit { font: 14px var(--sans); color: var(--muted); margin-left: 4px; }
.time-field { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 14px; }
.time-field input {
  width: 96px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--accent-text);
  font: 700 24px/1.2 var(--serif); padding: 0 2px; outline: none;
}
.time-field input:focus { border-bottom-color: var(--accent); }
.time-field input[aria-invalid="true"] { border-bottom-color: var(--danger); }
.trk-keys { color: var(--muted); font-size: 12px; margin: 6px 0 14px 4px; }
.trk-keys kbd {
  display: inline-block; min-width: 18px; text-align: center; padding: 0 5px; font: 600 11px/17px var(--sans);
  border-radius: 5px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink);
}

.trk-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.trk-section {
  padding: 14px 16px 16px; border-radius: 20px; margin-bottom: 14px;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge), var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.trk-reading .trk-section { margin-bottom: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.section-head h3 { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.section-head h3 span { color: var(--muted); font-size: 12px; font-weight: normal; }
.to-read { font-size: 12px; font-weight: normal; color: var(--accent-text); }
.to-read:hover { text-decoration: underline; }
.section-stats { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.question-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.question {
  display: flex; flex-direction: column; gap: 7px; padding: 8px 8px 7px; border-radius: 12px; outline: none;
  background: var(--glass-strong); border: 1px solid var(--line); transition: border-color .12s, box-shadow .12s, background .12s;
}
.question:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.question.correct { background: var(--accent-soft); border-color: hsl(var(--c-accent) / .45); }
.question.wrong { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.q-number { display: flex; justify-content: space-between; align-items: baseline; font: 700 16px var(--sans); font-variant-numeric: tabular-nums; padding: 0 2px; }
.wrong-option { color: var(--danger); font-size: 14px; }
.q-actions { display: grid; grid-template-columns: auto 1fr 1fr; gap: 3px; }
.q-actions button { border: 0; padding: 3px 4px; min-width: 0; border-radius: 7px; background: var(--track); color: var(--muted); font-size: 12px; white-space: nowrap; }
.q-actions button:hover { color: var(--ink); }
.q-actions .chosen-undone { background: var(--glass-hover); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.q-actions .chosen-correct { background: var(--accent); color: #fff; }
.q-actions .chosen-wrong { background: var(--danger); color: #fff; }

.wrong-dialog {
  width: 320px; max-width: calc(100vw - 32px); padding: 20px 22px; border-radius: 22px; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge), var(--shadow-lg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.wrong-dialog::backdrop { background: hsl(var(--c-ink-bg) / .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wrong-dialog h2 { margin: 0 0 12px; font-size: 18px; }
.wrong-dialog label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.wrong-dialog input {
  width: 100%; padding: 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--glass-strong);
  color: var(--ink); font: 700 24px var(--sans); text-align: center; text-transform: uppercase; outline: none;
}
.wrong-dialog input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.option-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 16px; }
.option-choices button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 7px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--glass-hover);
}
.option-choices button b { font-size: 20px; line-height: 1; }
.option-choices button small { font-size: 11px; color: var(--muted); }
.option-choices button:hover, .option-choices button.cur { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.wrong-tip { margin: -6px 0 0; font-size: 12px; color: var(--muted); }
.sr-only, .wrong-dialog input.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dialog-actions kbd { font: 600 10px/16px var(--sans); padding: 0 4px; border-radius: 4px; border: 1px solid var(--line); margin-left: 4px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.trk-error {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; gap: 12px; align-items: center;
  padding: 9px 12px 9px 18px; border-radius: 12px; background: hsl(var(--c-ink-bg) / .9); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg);
}
.trk-error button { border: 0; padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; }

@media (max-width: 860px) {
  .trk-summary { grid-template-columns: repeat(2, 1fr); }
  .trk-reading { grid-template-columns: 1fr; }
  .trk-cols { display: none; }
  .trk-link { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .trk-time { text-align: left; }
  .question-grid { grid-template-columns: repeat(3, 1fr); }
  .topbar .modes { order: 3; }
}

/* ---------- 配色面板 ---------- */
.btn.icon { padding: 7px 9px; }
.palette {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(hsl(var(--c-light)) 0 25%, hsl(var(--c-strong)) 0 50%, hsl(var(--c-pale)) 0 75%, hsl(var(--c-accent)) 0);
  box-shadow: 0 0 0 2px var(--glass-strong), 0 0 0 3px var(--line);
}
.theme-panel {
  position: fixed; z-index: 70; top: 62px; right: 16px; width: 320px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 78px); overflow: auto; padding: 14px 16px 12px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: var(--glass-edge), var(--shadow-lg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: tp-in .16s ease;
}
@keyframes tp-in { from { opacity: 0; transform: translateY(-6px); } }
.tp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tp-head b { font-size: 15px; }
.tp-close { border: 0; background: none; color: var(--muted); width: 26px; height: 26px; border-radius: 8px; }
.tp-close:hover { background: var(--track); color: var(--ink); }
.tp-label { display: flex; justify-content: space-between; margin: 12px 0 7px; font-size: 12px; color: var(--muted); }
.tp-label span { font-variant-numeric: tabular-nums; color: var(--ink); }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatches button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px;
  border: 1px solid transparent; border-radius: 12px; background: none; font-size: 11px; color: var(--muted);
}
.swatches button:hover { background: var(--track); color: var(--ink); }
.swatches button.on { border-color: hsl(var(--c-accent) / .5); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.swatches i {
  width: 30px; height: 30px; border-radius: 50%; position: relative;
  background: linear-gradient(135deg, hsl(var(--sh) calc(80% * var(--ss)) 74%), hsl(var(--sh) calc(55% * var(--ss)) 48%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px hsl(var(--sh) calc(50% * var(--ss)) 35% / .25);
}
.swatches button.on i::after {
  content: ""; position: absolute; left: 11px; top: 7px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}

.tp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; border-radius: 999px; outline: none; cursor: pointer; }
.tp-range.hue {
  background: linear-gradient(90deg, hsl(0 75% 62%), hsl(45 75% 62%), hsl(90 60% 55%), hsl(150 60% 52%),
    hsl(195 70% 55%), hsl(240 70% 65%), hsl(285 60% 62%), hsl(330 70% 62%), hsl(359 75% 62%));
}
.tp-range.sat { background: linear-gradient(90deg, hsl(var(--h) 5% 62%), hsl(var(--h) 100% 62%)); }
.tp-range.glow { background: linear-gradient(90deg, var(--track), hsl(var(--h) calc(100% * var(--sat)) 75%)); }
.tp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid hsl(var(--c-accent)); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.tp-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid hsl(var(--c-accent)); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.tp-mode { width: 100%; }
.tp-mode button { flex: 1; }
.tp-reset { display: block; margin: 12px auto 0; font-size: 12px; }
.tp-motion { transition: opacity .2s; }
.tp-range.clear { background: linear-gradient(90deg, hsl(var(--h) 30% 92%), transparent), repeating-conic-gradient(var(--track) 0 25%, transparent 0 50%) 0 0 / 10px 10px; border: 1px solid var(--line); }
.tp-range.frost { background: linear-gradient(90deg, var(--track), hsl(var(--h) calc(60% * var(--sat)) 70%)); }
.tp-motion.off { opacity: .35; pointer-events: none; }
.tp-range.spread {
  background: linear-gradient(90deg, hsl(var(--h) 80% 65%),
    hsl(calc(var(--h) + 45) 80% 65%), hsl(calc(var(--h) + 90) 80% 65%), hsl(calc(var(--h) + 135) 80% 65%), hsl(calc(var(--h) + 180) 80% 65%));
}

/* ---------- 账号：登录页 / 账号面板（仅多用户模式） ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field[hidden] { display: none; }
.field input {
  padding: 9px 12px; border: 1px solid var(--glass-border); border-radius: 11px;
  background: var(--glass-strong); color: var(--ink); font: inherit; font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: var(--glass-edge), var(--shadow-lg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.auth-card h1 { margin: 0 0 4px; font-size: 20px; display: flex; align-items: baseline; gap: 10px; }
.auth-card h1 span { color: var(--muted); font-weight: normal; font-size: 14px; }
.auth-tabs { width: 100%; }
.auth-tabs button { flex: 1; }
.auth-hint { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.auth-error { margin: 0; font-size: 13px; color: var(--danger); }
.auth-submit { justify-content: center; padding: 10px 15px; font-size: 15px; }

.avatar {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad); color: #fff; font-style: normal; font-size: 11px; font-weight: 600;
}
.account-panel { display: flex; flex-direction: column; gap: 10px; }
.account-panel[hidden] { display: none; }
.account-panel .tp-head b span { color: var(--muted); font-weight: normal; }
.account-panel form { display: flex; flex-direction: column; gap: 10px; }
.account-panel .btn { justify-content: center; }
.account-panel .auth-error.ok { color: var(--accent-text); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--glass-strong); }
}

@media (max-width: 860px) {
  .topbar { padding: 10px 16px; flex-wrap: wrap; }
  .overview { grid-template-columns: auto 1fr; }
  .resume { grid-column: 1 / -1; }
  .reader, .reader.side-off { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  #side { position: static; max-height: none; }
  .side-tab { top: auto; bottom: 18px; transform: none; flex-direction: row; padding: 9px 12px; }
  .side-tab span { flex-direction: row; }
  #article { padding: 22px 20px 16px 46px; }
  #article p::before { left: -32px; }
  /* 生词后面直接显示历年出现次数；只出现这一次的用浅色 */
  #article .mk[data-occ]::after {
    content: attr(data-occ); display: inline-block; margin-left: 2px; padding: 0 4px; min-width: 15px;
    border-radius: 999px; font: 600 10px/15px var(--sans); text-align: center; text-indent: 0; vertical-align: 5px;
    color: #fff; background: var(--accent);
  }
  #article .mk[data-occ="0"]::after, #article .mk[data-occ="1"]::after { color: var(--muted); background: var(--track); }
  .texts { grid-template-columns: repeat(2, 1fr); }
  .year { flex-direction: column; align-items: stretch; gap: 10px; }
  .ylabel { width: auto; flex-direction: row; align-items: center; gap: 12px; }
  .home { padding: 18px 16px 50px; }
}

/* 游客：注册入口和额度提示 */
.guest-btn { border-color: var(--accent); color: var(--accent-text); }
.ov-guest { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ov-guest b { color: var(--accent-text); }
.ov-guest .link { padding: 0; font-size: inherit; }
.account-panel .ap-note { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--accent-soft); color: var(--accent-text); }
.account-panel .ap-note[hidden] { display: none; }
.account-panel .ap-perks { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.account-panel .ap-login { align-self: center; font-size: 13px; }
.auth-guest { align-self: center; font-size: 13px; }