/* 首页“夜读”样子：照 design\夜间风格样品\夜读样品.html 的首页和 Luke 的视频。颜色全用 style.css 的变量（A 轮）。 */
/* 大数字用 Inter Display ExtraBold 的 0-9（视频里那种“1”没有底座的数字；Outfit 的等宽“1”带底座，看着怪）。只有 2.6KB，index.html 里先预载。 */
@font-face { font-family:"KV Digits"; src:url('vendor/InterDisplay-ExtraBold-digits.woff2') format('woff2'); font-weight:800; font-display:block; unicode-range:U+0030-0039; }
#home.dashboard { gap:0; max-width:560px; width:100%; margin-inline:auto; }
#home .hn-hero { position:relative; }
.hn-top { position:relative; padding-top:14px; min-height:316px; --hn-size:clamp(118px,42vw,176px); }
.hn-arc { position:absolute; right:-20px; top:0; width:min(360px,calc(100% + 20px)); height:auto; overflow:visible; outline:none; }
/* 电脑上首页更宽：刻度跟着数字放（今天那格离数字和手机上一样近），不贴到最右边 */
@media (min-width:600px) { .hn-arc { right:auto; left:calc(var(--hn-size) * 1.16 - 180px); } }
.hn-arc:focus-visible { outline:2px solid var(--a2); outline-offset:4px; border-radius:16px; }
.hn-arc line { stroke-linecap:round; transition:stroke .45s cubic-bezier(.22,1,.36,1),opacity .45s cubic-bezier(.22,1,.36,1); }
.hn-ticks { filter:url(#hn-glow); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hn-ticks { filter:none; } }
:root[data-theme="light"] .hn-ticks { filter:none; }
.hn-lbl { font:600 11.5px var(--font); fill:var(--fg); }
.hn-lbl.warm { fill:var(--warm); }
.hn-pick { fill:none; stroke:var(--fg); stroke-width:1.2; opacity:0; transition:opacity .3s cubic-bezier(.22,1,.36,1),cx .25s cubic-bezier(.32,.72,0,1),cy .25s cubic-bezier(.32,.72,0,1); pointer-events:none; }
.hn-pick.on { opacity:1; }
.hn-date { position:relative; font-size:13px; color:var(--fg2); pointer-events:none; }
.hn-big { position:relative; display:block; margin:calc(var(--hn-size) * .2) 0 0 -6px; padding:4px 6px; border-radius:20px; text-align:left; width:max-content; max-width:64%; }
/* 一位、两位数一样大，和刻度中间留一点空；三位数小一号 */
.hn-num { display:block; padding-right:.1em; margin:0 -.1em 0 -.05em; font:800 var(--hn-size)/1 "KV Digits",var(--num); line-height:calc(var(--hn-size) * .9); letter-spacing:-.05em; font-variant-numeric:tabular-nums;
  background:var(--numfill); -webkit-background-clip:text; background-clip:text; color:transparent; transition:font-size .45s cubic-bezier(.32,.72,0,1); }
.hn-num[data-digits="3"] { font-size:calc(var(--hn-size) * .64); }
.hn-num[data-digits="4"] { font-size:calc(var(--hn-size) * .48); }
.hn-sub { position:relative; margin-top:2px; display:grid; gap:3px; max-width:62%; pointer-events:none; }
.hn-sub b { font-size:17px; font-weight:700; }
.hn-caption { font-size:13px; color:var(--fg2); min-height:1.5em; }
.hn-actions { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px; }
.hn-more-toggle { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:13px; color:var(--fg2); }
.hn-chev { display:inline-block; transition:transform .38s cubic-bezier(.32,.72,0,1); }
.hn-more-toggle[aria-expanded="true"] .hn-chev { transform:rotate(180deg); }
.hn-more { margin-top:8px; }
.hn-more > .hc-card { margin:0; }

.hn-sec { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:30px 0 12px; }
.hn-sec h2 { margin:0; font-size:19px; font-weight:700; }
.hn-sec small { font-size:12.5px; color:var(--fg2); font-variant-numeric:tabular-nums; }
.hn-sec h2 small { font-weight:400; margin-left:6px; }

/* 问助手、接着上次 */
.hn-ask { display:flex; gap:10px; margin-top:22px; }
.hn-ask-bar { flex:1; min-width:0; height:44px; border-radius:22px; padding:0 18px; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); color:var(--fg2); font-size:15px; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hn-ask-bar.has-draft { color:var(--fg); }
.hn-ask .pick { position:relative; flex:none; width:44px; height:44px; border-radius:50%; background:var(--card2); box-shadow:inset 0 0 0 1.5px var(--a2),0 0 16px -4px var(--a2); color:var(--fg); display:grid; place-items:center; overflow:hidden; }
.hn-ask .pick svg { width:22px; height:22px; pointer-events:none; }
.hn-ask .pick .pick-input { position:absolute; inset:0; opacity:0; cursor:pointer; }
#home .task-continue-row { margin-top:12px; }
#home .task-continue-row .continue-row.hn-resume { display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; align-items:center; width:100%; padding:10px 4px 10px 6px; background:none; }
#home .hn-resume svg { grid-row:1 / span 2; width:18px; height:18px; color:var(--a3); }
#home .hn-resume strong { font-size:14px; font-weight:600; }
#home .hn-resume span:not([aria-hidden]) { grid-column:2; font-size:12px; color:var(--fg2); }
#home .hn-resume > span[aria-hidden] { grid-column:3; grid-row:1 / span 2; font-size:18px; color:var(--fg3); }
/* 最上面那件：标题占满一行，“这件做完了”放在下面一行（手机上标题不再被挤成两行） */
#home .task-continue-row.hn-first { flex-wrap:wrap; gap:0; }
#home .task-continue-row.hn-first .hn-resume { flex:1 1 100%; }
#home .task-continue-row.hn-first .task-close { margin:-6px 0 0 34px; min-height:44px; }
#home .task-more { margin-left:34px; min-height:44px; }
#home .task-close { min-height:44px; }
#home-ai-off:not([hidden]) { margin-top:12px; }

/* 今晚 */
.hn-tasks { position:relative; }
/* 大卡的边：视频里左边带一点紫、往右淡成青再到普通的线（E 轮）。1px 的渐变边画在 ::before 上，只露出一圈（mask 挖空中间） */
.hn-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px 14px 14px 10px; border-radius:20px;
  background:var(--card2); box-shadow:var(--shadow);
  transition:transform .48s cubic-bezier(.32,.72,0,1),opacity .4s cubic-bezier(.22,1,.36,1); }
.hn-card::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,color-mix(in srgb,var(--a1) 75%,transparent),color-mix(in srgb,var(--a3) 40%,transparent) 45%,var(--line) 80%);
  -webkit-mask:linear-gradient(black,black) content-box,linear-gradient(black,black); -webkit-mask-composite:xor; mask:linear-gradient(black,black) content-box exclude,linear-gradient(black,black); }
.hn-card.hn-plain { grid-template-columns:1fr auto; padding-left:18px; }
.hn-card.enter { transform:translateX(70%); opacity:0; }
.hn-card.leave { transform:translateX(105%); opacity:0; }
.hn-card h3 { margin:0; font-size:16.5px; font-weight:700; line-height:1.35; }
.hn-card p { margin:3px 0 0; font-size:12.5px; color:var(--fg2); }
.hn-card .hn-skip { display:inline-flex; align-items:center; min-height:44px; margin:-4px 0 -10px; padding:0; font-size:12.5px; color:var(--fg2); }
.hn-chk { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.hn-chk svg { width:26px; height:26px; overflow:visible; }
.hn-ring { fill:transparent; stroke:var(--a1); stroke-width:2.2; transition:fill .3s cubic-bezier(.22,1,.36,1); }
.hn-tick { fill:none; stroke:var(--on-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .32s cubic-bezier(.22,1,.36,1) .08s; }
.hn-chk.done .hn-ring { fill:var(--a1); }
.hn-chk.done .hn-tick { stroke-dashoffset:0; }
.hn-play { width:44px; height:44px; border-radius:50%; background:var(--btn) var(--button-shade); background-blend-mode:multiply; color:var(--on-accent); display:grid; place-items:center; box-shadow:0 8px 20px -8px var(--a2); }
.hn-play svg { width:16px; height:16px; margin-left:2px; }
.hn-rows { display:grid; gap:2px; margin-top:10px; }
.hn-row { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; min-height:44px; padding:6px 2px 6px 24px; font-size:14px; color:var(--fg2); text-align:left; border-radius:14px; }
.hn-o { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--fg3); }
.hn-row em { font-style:normal; font-size:12px; color:var(--fg2); margin-left:6px; }
.hn-own { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; font-style:normal; font-size:11px; line-height:17px; color:var(--fg2); background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); vertical-align:1px; }
.hn-alldone { padding:18px 16px; border-radius:20px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.hn-alldone b { display:block; font-size:16px; }
.hn-alldone span { font-size:12.5px; color:var(--fg2); }

/* 上次考试 */
.hn-exam-body { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end; }
.hn-bars { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; align-items:end; }
.hn-bar { display:grid; gap:6px; justify-items:center; padding:4px 0; min-height:44px; border-radius:12px; transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.hn-bars.picking .hn-bar:not(.sel) { opacity:.42; }
.hn-bt { position:relative; width:12px; height:78px; }
.hn-bt i { position:absolute; left:0; right:0; bottom:0; border-radius:6px; }
.hn-pv { background:var(--tick-off); }
.hn-cv { height:0; transition:height .8s cubic-bezier(.32,.72,0,1),background-color .4s; }
.hn-bar small { font-size:12px; color:var(--fg2); }
.hn-bar.drop small { color:var(--warm); font-weight:700; }
.hn-delta { min-width:132px; display:grid; gap:2px; }
.hn-n { font:700 34px/1 var(--num); font-variant-numeric:tabular-nums; color:var(--fg); transition:color .35s cubic-bezier(.22,1,.36,1); }
.hn-n.down { color:var(--warm); }
.hn-n i { font-style:normal; font:500 12px var(--font); margin-left:4px; color:var(--fg2); }
.hn-dt { font-size:13.5px; }
.hn-ds { display:grid; font-size:12px; color:var(--fg2); }
.hn-ds .hn-review { justify-self:start; display:inline-flex; align-items:center; min-height:44px; margin:-6px 0 -10px; padding:0; font-size:12.5px; }
.hn-foot { margin:14px 0 0; font-size:12px; color:var(--fg2); line-height:1.6; }
#home .module.home-continue { margin-top:30px; }
#home .dashboard-foot { padding-top:28px; }
#home .api-state { margin-top:28px; }
#home .api-state + .dashboard-foot { padding-top:6px; }

@media(hover:hover) {
  .hn-row:hover { background:var(--line); }
  .hn-bar:hover:not(.sel) { opacity:.85; }
}
@media(max-width:760px) {
  .hn-card { margin-right:-20px; border-top-right-radius:0; border-bottom-right-radius:0; padding-right:34px; }
}
@media(max-width:350px) {
  .hn-card { margin-right:-14px; padding-right:28px; }
  .hn-arc { right:-14px; }
  .hn-delta { min-width:110px; }
}
@media(prefers-reduced-motion:reduce) {
  .hn-card { transition-duration:.25s; }
  .hn-card.enter { transform:translateX(24px); }
  .hn-card.leave { transform:translateX(24px); }
}