/* ================================================================
   news-reading H5 · Component Library
   依赖: tokens.css · 组件双材质由 [data-theme] 变量驱动
   命名: 单类名组件, BEM-lite (子元素 .card .card-ttl)
   ================================================================ */

/* ---------- 基础 ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-ui); color: var(--ink);
  background: var(--bg); line-height: 1.7;
  transition: background var(--t-theme) var(--ease), color var(--t-theme) var(--ease);
}
[data-theme="paper"] body, body.paper-tex { background: var(--bg); background-image: var(--texture); }
button { font-family: inherit; }
.ic { width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }

/* 交互元素: 焦点 + 按压通用 (糖果"捏一下"手感) */
.tap { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tap:active { transform: scale(.97); }
button:focus-visible, .tap:focus-visible { outline: 2px solid #3B82F6; outline-offset: 2px; border-radius: var(--r-sm); }

/* ================================================================
   MASTHEAD 报头
   ================================================================ */
.masthead { padding: var(--sp-3) var(--sp-5) var(--sp-3); position: relative; z-index: 2; }
[data-theme="paper"] .masthead { border-bottom: 3px double var(--line-strong); }
[data-theme="night"] .masthead { border-bottom: 1px solid var(--line); }
.mast-top { display: flex; justify-content: space-between; align-items: baseline; }
.mast-date { font-size: 9.5px; letter-spacing: 2px; color: var(--ink-3); text-transform: uppercase; }
.mast-acts { display: flex; gap: 14px; }
.mast-acts .mini { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9px; color: var(--ink-2); cursor: pointer; background: none; border: 0; padding: 0; }
.mast-acts .mini .ic { font-size: 17px; }
.brand { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--ink-strong); display: flex; align-items: baseline; gap: 8px; margin: 2px 0; }
.brand em { font-style: italic; font-weight: 400; font-size: 14px; color: var(--accent); font-family: var(--font-display); }
[data-theme="night"] .brand em { font-style: normal; font-size: 9px; letter-spacing: 3px; font-family: var(--font-ui); font-weight: 700; }
[data-theme="night"] .brand { font-size: 21px; }
.mast-bottom { display: flex; justify-content: space-between; align-items: center; }
.mast-motto { font-size: 9px; letter-spacing: 3.5px; color: var(--ink-3); text-transform: uppercase; }

/* ================================================================
   CHIPS 12 档等级筛选
   ================================================================ */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); scrollbar-width: none; position: relative; z-index: 2; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 0; cursor: pointer; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; transition: transform var(--t-fast) var(--spring), background var(--t-mid), color var(--t-mid);
}
[data-theme="paper"] .chip { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: var(--r-xs); }
[data-theme="paper"] .chip.on { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); box-shadow: 2px 2px 0 rgba(88,66,38,.18); }
[data-theme="night"] .chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #7E8898; border-radius: var(--r-pill); }
[data-theme="night"] .chip.on { background: linear-gradient(135deg, rgba(232,176,75,.25), rgba(232,176,75,.12)); border-color: rgba(232,176,75,.5); color: #F5CE85; box-shadow: 0 0 16px rgba(232,176,75,.22); }
.chip:active { transform: scale(.93); }

/* ---- 两段式: 大组 chip (色点 + 等级色底) ---- */
.chip-g::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: 1px;
  background: var(--line-strong); transition: background var(--t-mid);
}
.chip-g[data-lv="a2"]::before { background: var(--lv-a2); }
.chip-g[data-lv="b1"]::before { background: var(--lv-b1); }
.chip-g[data-lv="c1"]::before { background: var(--lv-c1); }
.chip-g.active::before, .chip-g.has::before { background: currentColor; }
[data-theme="paper"] .chip-g.active[data-lv="a2"], [data-theme="paper"] .chip-g.has[data-lv="a2"] { background: var(--lv-a2); border-color: var(--lv-a2); color: var(--on-lv-a2); box-shadow: 2px 2px 0 rgba(88,66,38,.18); }
[data-theme="paper"] .chip-g.active[data-lv="b1"], [data-theme="paper"] .chip-g.has[data-lv="b1"] { background: var(--lv-b1); border-color: var(--lv-b1); color: var(--on-lv-b1); box-shadow: 2px 2px 0 rgba(88,66,38,.18); }
[data-theme="paper"] .chip-g.active[data-lv="c1"], [data-theme="paper"] .chip-g.has[data-lv="c1"] { background: var(--lv-c1); border-color: var(--lv-c1); color: var(--on-lv-c1); box-shadow: 2px 2px 0 rgba(88,66,38,.18); }
[data-theme="night"] .chip-g.active[data-lv="a2"], [data-theme="night"] .chip-g.has[data-lv="a2"] { background: linear-gradient(135deg, rgba(127,240,214,.22), rgba(127,240,214,.10)); border-color: rgba(127,240,214,.5); color: #7FF0D6; box-shadow: 0 0 16px rgba(127,240,214,.20); }
[data-theme="night"] .chip-g.active[data-lv="b1"], [data-theme="night"] .chip-g.has[data-lv="b1"] { background: linear-gradient(135deg, rgba(240,188,92,.22), rgba(240,188,92,.10)); border-color: rgba(240,188,92,.5); color: #F0BC5C; box-shadow: 0 0 16px rgba(240,188,92,.20); }
[data-theme="night"] .chip-g.active[data-lv="c1"], [data-theme="night"] .chip-g.has[data-lv="c1"] { background: linear-gradient(135deg, rgba(183,156,255,.22), rgba(183,156,255,.10)); border-color: rgba(183,156,255,.5); color: #B79CFF; box-shadow: 0 0 16px rgba(183,156,255,.20); }

/* ---- 第二行: 细分 chips (展开动画) ---- */
.chips-sub {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  max-height: 0; opacity: 0; padding: 0 var(--sp-4);
  transition: max-height .3s var(--ease), opacity .22s var(--ease), padding-bottom .3s var(--ease);
  position: relative; z-index: 2;
}
.chips-sub::-webkit-scrollbar { display: none; }
.chips-sub.open { max-height: 56px; opacity: 1; padding-bottom: var(--sp-3); }
.chips-sub .chip { font-size: 11px; padding: 4.5px 10px; }

/* ================================================================
   BADGE 等级徽章 (卡片/阅读页)
   ================================================================ */
.badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2.5px 8px;
  border: 0; white-space: nowrap;
}
[data-theme="paper"] .badge { border-radius: var(--r-xs); color: #FFFCF4; }
[data-theme="night"] .badge { border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid; color: var(--lv-b1); }
.badge[data-lv="prea1"] { background: var(--lv-pre-a1); } [data-theme="night"] .badge[data-lv="prea1"] { color: var(--lv-pre-a1); border-color: var(--lv-pre-a1); background: rgba(255,255,255,.04); }
.badge[data-lv="a1"] { background: var(--lv-a1); } [data-theme="night"] .badge[data-lv="a1"] { color: var(--lv-a1); border-color: var(--lv-a1); background: rgba(255,255,255,.04); }
.badge[data-lv="a1a2"] { background: var(--lv-a1a2); } [data-theme="night"] .badge[data-lv="a1a2"] { color: var(--lv-a1a2); border-color: var(--lv-a1a2); background: rgba(255,255,255,.04); }
.badge[data-lv="a2"] { background: var(--lv-a2); } [data-theme="night"] .badge[data-lv="a2"] { color: var(--lv-a2); border-color: var(--lv-a2); background: rgba(255,255,255,.04); }
.badge[data-lv="a2b1"] { background: var(--lv-a2b1); } [data-theme="night"] .badge[data-lv="a2b1"] { color: var(--lv-a2b1); border-color: var(--lv-a2b1); background: rgba(255,255,255,.04); }
.badge[data-lv="b1"] { background: var(--lv-b1); } [data-theme="night"] .badge[data-lv="b1"] { color: var(--lv-b1); border-color: var(--lv-b1); background: rgba(255,255,255,.04); }
.badge[data-lv="b1b2"] { background: var(--lv-b1b2); } [data-theme="night"] .badge[data-lv="b1b2"] { color: var(--lv-b1b2); border-color: var(--lv-b1b2); background: rgba(255,255,255,.04); }
.badge[data-lv="b2"] { background: var(--lv-b2); } [data-theme="night"] .badge[data-lv="b2"] { color: var(--lv-b2); border-color: var(--lv-b2); background: rgba(255,255,255,.04); }
.badge[data-lv="b2c1"] { background: var(--lv-b2c1); } [data-theme="night"] .badge[data-lv="b2c1"] { color: var(--lv-b2c1); border-color: var(--lv-b2c1); background: rgba(255,255,255,.04); }
.badge[data-lv="c1"] { background: var(--lv-c1); } [data-theme="night"] .badge[data-lv="c1"] { color: var(--lv-c1); border-color: var(--lv-c1); background: rgba(255,255,255,.04); }
.badge[data-lv="c1c2"] { background: var(--lv-c1c2); } [data-theme="night"] .badge[data-lv="c1c2"] { color: var(--lv-c1c2); border-color: var(--lv-c1c2); background: rgba(255,255,255,.04); }
.badge[data-lv="c2"] { background: var(--lv-c2); } [data-theme="night"] .badge[data-lv="c2"] { color: var(--lv-c2); border-color: var(--lv-c2); background: rgba(255,255,255,.04); }

/* ================================================================
   CARD 文章卡 (纸材质 / 玻璃材质)
   ================================================================ */
.card-list { display: flex; flex-direction: column; gap: 11px; padding: var(--sp-1) var(--sp-4) var(--sp-5); position: relative; z-index: 2; }
.card {
  display: flex; gap: 12px; padding: 13px 14px; cursor: pointer; border: 1px solid var(--line);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid);
}
[data-theme="paper"] .card { background: var(--surface); border-radius: var(--r-md); border-color: #E7DCC6; }
[data-theme="night"] .card { background: var(--surface); border-radius: var(--r-lg); backdrop-filter: var(--blur); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
[data-theme="night"] .card:hover { border-color: rgba(232,176,75,.25); }
.card:active { transform: translateY(0) scale(.99); }
.card-thumb {
  flex: 0 0 72px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: rgba(255,255,255,.92); text-align: center;
}
.card-thumb.img { flex: 0 0 96px; height: 64px; overflow: hidden; align-self: center; }
.card-thumb.img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-sm); }
.card-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.card-kick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
[data-theme="paper"] .card-kick { margin-bottom: 2px; }
.card-cat { font-size: 9px; letter-spacing: 2.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-theme { font-size: 9px; font-weight: 600; color: var(--ink-3); background: var(--bg-2, rgba(127,127,127,.12)); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card-meta .num.aud { color: var(--accent); font-weight: 600; }
.card-catline { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-ttl {
  font-size: 13.5px; font-weight: 700; line-height: 1.42; color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="paper"] .card-ttl {
  font-family: var(--font-display); font-size: 15.5px;
  background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px;
  background-repeat: no-repeat; background-position: 0 96%; transition: background-size .3s var(--ease);
}
[data-theme="paper"] .card:hover .card-ttl { background-size: 100% 1.5px; }
.card-meta { font-size: 10px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.card-st { font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; border-radius: var(--r-xs); flex-shrink: 0; white-space: nowrap; }
.card-st.new { color: var(--accent); border: 1px solid; background: var(--accent-soft); }
[data-theme="paper"] .card-st.new { border-color: #E2B898; background: #FBF0E4; }
.card-st.done { color: #6C8A5D; border: 1px solid; }
[data-theme="paper"] .card-st.done { border-color: #CBDCC0; background: #F0F5EC; }
[data-theme="night"] .card-st.done { border-color: rgba(91,200,175,.3); background: rgba(91,200,175,.1); color: #5BC8AF; }
[data-theme="night"] .card-st.new { border-color: rgba(232,176,75,.3); color: #E8B04B; }

/* ================================================================
   READER 阅读页
   ================================================================ */
.progress { position: absolute; top: 0; left: 0; height: 3px; width: 0; z-index: 6; transition: width .2s linear; }
[data-theme="paper"] .progress { background: linear-gradient(90deg, #C96F3D, #B45F2E); }
[data-theme="night"] .progress { background: linear-gradient(90deg, #5BC8AF, #E8B04B); box-shadow: 0 0 10px rgba(232,176,75,.55); }
.read-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 6px; position: relative; z-index: 3; }
.read-back { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink-2); background: none; border: 0; padding: 4px; }
.read-acts { display: flex; gap: 15px; align-items: center; font-size: 17px; color: var(--ink-2); }
.read-acts .icon-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; }
.article-wrap { padding: var(--sp-1) 22px var(--sp-6); }
.art-kick { font-size: 9.5px; letter-spacing: 3px; font-weight: 800; color: var(--accent); text-transform: uppercase; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 10px; }
.art-kick::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.article-title { font-family: var(--font-display); font-size: 23px; line-height: 1.3; font-weight: 800; color: var(--ink-strong); margin-bottom: var(--sp-2); letter-spacing: .2px; }
.article-meta { position: relative; font-size: 10.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.article-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.para { font-family: var(--font-display); font-size: calc(16px * var(--fs-x, 1)); line-height: 1.95; color: var(--ink); margin: 15px 0; }
.para.first::first-letter { font-size: calc(46px * var(--fs-x, 1)); font-weight: 800; float: left; line-height: .82; padding: 6px 8px 0 0; color: var(--accent); }

/* 点词 */
.wtap { border-bottom: 2px solid; border-color: rgba(180,95,46,.4); cursor: pointer; font-weight: 600; transition: background .2s, border-color .2s; border-radius: 1px; }
[data-theme="night"] .wtap { border-color: rgba(232,176,75,.45); }
.wtap:hover { background: var(--accent-soft); border-color: var(--accent); }
.wtap.pulse { animation: wpulse .5s var(--spring); }
@keyframes wpulse { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }
/* 词组 (20260912): 虚线下划线与单词实线区分; 换行时下划线跟随 */
.wphr { border-bottom-style: dotted; }

/* 查词卡 */
.dict-card {
  padding: var(--sp-4); margin: -2px 0 var(--sp-4); background: var(--surface-2);
  opacity: 0; transform: translateY(8px) scale(.97); transition: all var(--t-card) var(--spring);
}
[data-theme="paper"] .dict-card { border-radius: var(--r-md); border: 1px solid #D9C7A8; }
[data-theme="night"] .dict-card { border-radius: var(--r-lg); border: 1px solid rgba(232,176,75,.3); backdrop-filter: var(--blur); box-shadow: var(--shadow-glow); }
.dict-card.show { opacity: 1; transform: none; }
.dict-word { font-family: var(--font-display); font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 9px; color: var(--ink-strong); }
.dict-spk { cursor: pointer; display: inline-flex; color: var(--accent); background: none; border: 0; padding: 2px; transition: transform var(--t-fast) var(--spring); }
[data-theme="night"] .dict-spk { color: #5BC8AF; }
.dict-spk:active { transform: scale(.85); }
.dict-pos { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-style: italic; }
.dict-def { font-size: 13px; margin-top: 4px; color: var(--ink); }
.dict-ex { font-size: 12px; margin-top: 7px; color: var(--ink-2); font-style: italic; line-height: 1.65; border-left: 2px solid var(--line); padding-left: 9px; }

/* ===== P0 猜词陪练 (20260827): 骑在查词上的三选一 ===== */
.wg-load { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; padding: 6px 0 2px; }
.wg-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: wgSpin .8s linear infinite; flex: none; }
@keyframes wgSpin { to { transform: rotate(360deg); } }
.wg-lead { font-size: 13px; color: var(--ink-strong); margin: 8px 0 10px; font-weight: 700; }
.wg-opts { display: flex; flex-direction: column; gap: 8px; }
.wg-opt { font-family: inherit; font-size: 13.5px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: all .15s ease; }
.wg-opt:active { transform: scale(.98); }
.wg-opt.ok { border-color: #6C8A5D; background: rgba(108, 138, 93, .12); color: #4E6B41; font-weight: 700; }
.wg-opt.bad { border-color: #C25B4E; background: rgba(194, 91, 78, .1); }
.wg-opt:disabled { cursor: default; opacity: .9; }
.wg-skip { display: block; margin: 10px 0 0 auto; background: none; border: 0; padding: 2px 4px; font-family: inherit; font-size: 11px; color: var(--ink-3); cursor: pointer; text-decoration: underline dotted; }
.wg-reveal { margin-top: 10px; }
.wg-ok { font-size: 13px; color: #4E6B41; font-weight: 800; }
.wg-no { font-size: 13px; color: #A0522D; font-weight: 800; }
.wg-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin: 6px 0 10px; border-left: 2px solid var(--line); padding-left: 9px; }
.wg-go { width: 100%; }

/* 翻译 */
.trans-tip { font-size: 10.5px; color: var(--ink-3); display: flex; gap: 5px; align-items: center; margin: var(--sp-1) 0 var(--sp-2); }
.trans-line { font-size: 13px; color: var(--ink-2); margin: -8px 0 var(--sp-4); padding-left: 11px; border-left: 2px solid; border-color: rgba(180,95,46,.35); animation: transIn .3s var(--ease) both; }
@keyframes transIn { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* TTS 词级跟随 */
.say .w { transition: color .25s, background .25s; border-radius: 3px; }
.say.playing .w { animation: wglow 3.6s linear infinite; }
@keyframes wglow { 0%,100% { background: transparent; } 3%,18% { background: var(--accent-soft); } 24% { background: transparent; } }

/* ================================================================
   TOOLS 工具栏 / TABBAR 底部导航
   ================================================================ */
.tools, .tabbar { display: flex; gap: 4px; padding: var(--sp-2) var(--sp-3) var(--sp-3); position: relative; z-index: 3; }
[data-theme="paper"] .tools, [data-theme="paper"] .tabbar { background: rgba(255,252,244,.97); border-top: 1px solid #E7DCC6; }
[data-theme="night"] .tools, [data-theme="night"] .tabbar { background: rgba(19,24,32,.9); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.tools-t, .tab-t {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3); padding: 6px 0; border-radius: 9px;
  cursor: pointer; transition: color .2s, background .2s;
}
.tools-t .ic, .tab-t .ic { font-size: 19px; }
.tools-t.on { color: var(--accent-deep); background: var(--accent-soft); }
[data-theme="night"] .tools-t.on { color: #E8B04B; }
.tools-t.playing { color: var(--accent-deep); background: var(--accent-soft); animation: ttsPulse 1.6s ease-in-out infinite; }
[data-theme="night"] .tools-t.playing { color: #E8B04B; }
@keyframes ttsPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* ---- TTS 迷你播放器 (bottom sheet) ---- */
.tts-veil { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 45; background: rgba(28,22,12,.34); opacity: 0; transition: opacity .28s ease; }
.tts-veil.on { opacity: 1; }
[data-theme="night"] .tts-veil { background: rgba(0,0,0,.52); }
.tts-player { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 430px; z-index: 46; border-radius: 22px; padding: 10px 18px 16px; transform: translateY(calc(100% + 30px)); transition: transform .34s var(--spring); }
.tts-player.on { transform: translateY(0); }
.tts-player[hidden] { display: none; }
.tts-veil[hidden] { display: none; }
[data-theme="paper"] .tts-player { background: rgba(255,252,244,.98); border: 1px solid #E7DCC6; box-shadow: 0 -6px 40px rgba(40,32,18,.2); }
[data-theme="night"] .tts-player { background: rgba(19,24,32,.97); border: 1px solid var(--line); box-shadow: 0 -6px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.tts-grab { width: 38px; height: 4px; border-radius: 2px; margin: 0 auto 4px; background: currentColor; opacity: .22; }
.tts-head { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.tts-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tts-x { flex: none; width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.tts-x svg { width: 16px; height: 16px; }
.tts-x:active { background: var(--accent-soft); }
.tts-main { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 12px 0 8px; }
.tts-play { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--spring); }
.tts-play:active { transform: scale(.92); }
.tts-play svg { width: 26px; height: 26px; }
.tts-play .i-play { margin-left: 3px; }
.tts-play .i-pause { display: none; }
.tts-play.is-playing .i-play { display: none; }
.tts-play.is-playing .i-pause { display: block; }
[data-theme="paper"] .tts-play { background: var(--ink-strong); color: #FFF9EE; box-shadow: 0 4px 0 rgba(88,66,38,.28); }
[data-theme="paper"] .tts-play:active { box-shadow: 0 1px 0 rgba(88,66,38,.28); }
[data-theme="night"] .tts-play { background: linear-gradient(135deg,#F0BC5C,#E8B04B); color: #171C24; box-shadow: 0 4px 0 rgba(120,90,30,.5), 0 0 22px rgba(232,176,75,.35); }
.tts-play.loading svg { display: none; }
.tts-play.loading::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: currentColor; animation: ttsSpin .8s linear infinite; }
[data-theme="paper"] .tts-play.loading::after { border-color: rgba(255,249,238,.35); }
@keyframes ttsSpin { to { transform: rotate(360deg); } }
.tts-ctl { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--spring), background .2s; }
.tts-ctl svg { width: 30px; height: 30px; }
.tts-ctl:active { transform: scale(.92); background: var(--accent-soft); }
[data-theme="night"] .tts-ctl { border-color: #2C3644; color: #C9D4E2; }
.tts-time { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.tts-bar { position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tts-track { position: relative; width: 100%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tts-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
[data-theme="night"] .tts-fill { background: linear-gradient(90deg, #F0BC5C, #E8B04B); }
.tts-dot { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: 2.5px solid var(--accent-deep); box-shadow: 0 1px 4px rgba(40,32,18,.3); transition: left .12s linear; }
[data-theme="night"] .tts-dot { border-color: #E8B04B; }
.tts-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.tts-row { display: flex; align-items: center; gap: 6px; }
.tts-rowlbl { font-size: 11px; font-weight: 800; color: var(--ink-3); margin-right: 4px; }
.tts-row button { flex: 1; border: 1px solid var(--line); background: none; border-radius: var(--r-pill); padding: 7px 0; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.tts-row button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
[data-theme="night"] .tts-row button { border-color: #2C3644; color: #C9D4E2; }
[data-theme="night"] .tts-row button.on { background: rgba(232,176,75,.16); border-color: #E8B04B; color: #E8B04B; }
.tab-t.on { color: var(--accent-deep); font-weight: 800; }
[data-theme="night"] .tab-t.on { color: #E8B04B; }

/* ================================================================
   BUTTON 按钮
   ================================================================ */
.btn {
  border: 0; cursor: pointer; font-size: 12px; font-weight: 800; padding: 8px 16px;
  border-radius: var(--r-pill); transition: transform var(--t-fast) var(--spring), box-shadow .2s;
}
[data-theme="paper"] .btn-primary { background: var(--ink-strong); color: var(--bg); box-shadow: 0 3px 0 rgba(88,66,38,.25); }
[data-theme="night"] .btn-primary { background: linear-gradient(135deg,#F0BC5C,#E8B04B); color: #171C24; box-shadow: 0 3px 0 rgba(120,90,30,.5), 0 0 18px rgba(232,176,75,.3); }
.btn-primary:active { transform: translateY(2px); }
[data-theme="paper"] .btn-primary:active { box-shadow: 0 1px 0 rgba(88,66,38,.25); }

/* ================================================================
   CANDY 糖果激励层 (固定亮色底座)
   ================================================================ */
.candy-base { background: linear-gradient(150deg,#FFF6E9,#FDF1F4 60%,#EFF6F1); border: 1px solid #F0E4D0; border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); color: #3A2E20; }
.cbadge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fff; padding: 8px 15px;
  border-radius: var(--r-pill); border: 2px solid rgba(255,255,255,.85); position: relative; cursor: default;
  background: linear-gradient(165deg, var(--c1), var(--c2)); text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: var(--shadow-candy); transition: transform .2s var(--spring), box-shadow .2s;
}
.cbadge:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: var(--shadow-candy-hover); }
.cbadge:active { transform: translateY(1px); box-shadow: var(--shadow-candy-press); }

/* 打卡周历 */
.week { display: flex; gap: 9px; flex-wrap: wrap; }
.day { width: 52px; height: 58px; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 800; color: #fff; cursor: default; }
.day.done { background: linear-gradient(165deg, var(--c1), var(--c2)); border: 2px solid rgba(255,255,255,.85); box-shadow: var(--shadow-candy); text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.day.today { background: linear-gradient(165deg, #FFD98E, #FFB84D); color: #7A4A0E; border: 2px solid #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #D8912E, 0 0 0 0 rgba(255,184,77,.5); animation: todayBreath 2.4s ease-in-out infinite; text-shadow: none; }
@keyframes todayBreath { 0%,100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #D8912E, 0 0 0 0 rgba(255,184,77,.45); } 50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #D8912E, 0 0 0 9px rgba(255,184,77,0); } }
.day.future { background: rgba(255,255,255,.55); border: 2px dashed #E0D2B8; color: #C7B394; box-shadow: none; }
.day .d { font-size: 13px; } .day .ck { font-size: 13px; }

/* 连续天数 */
.streakbar {
  margin-top: var(--sp-6); border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, #FF9DBE, #FF7FA8); color: #fff; position: relative; overflow: hidden;
  border: 2px solid rgba(255,255,255,.85); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 #D95F8B, 0 16px 30px -10px rgba(217,95,139,.5);
}
.streakbar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 45%, transparent 60%); transform: translateX(-120%); animation: sheen 3.8s var(--ease) infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.streak-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.streak-lb { font-size: 12px; font-weight: 700; opacity: .92; line-height: 1.5; }
.streak-best { margin-left: auto; text-align: right; font-size: 10.5px; opacity: .85; line-height: 1.5; }

/* 读完庆祝 */
.celebrate { margin-top: var(--sp-6); border-radius: var(--r-xl); background: #FFFDF8; border: 1px solid #EFE3CC; padding: var(--sp-5); display: flex; gap: 18px; align-items: center; position: relative; overflow: hidden; cursor: pointer; }
.stampzone { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.stamp { width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: linear-gradient(165deg, #7CD98F, #4FBE6D); color: #fff; border: 3px solid #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 #2F9B4E, 0 16px 26px -8px rgba(47,155,78,.55); font-weight: 800; transform: rotate(-8deg); }
.stamp .big { font-size: 21px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.stamp .sm { font-size: 8.5px; letter-spacing: 1.5px; }
.celebrate.playing .stamp { animation: stampIn 2.8s var(--ease) infinite; }
@keyframes stampIn { 0% { transform: rotate(-8deg) scale(2.4); opacity: 0; } 14% { transform: rotate(-8deg) scale(.92); opacity: 1; } 22% { transform: rotate(-8deg) scale(1); } 88% { transform: rotate(-8deg) scale(1); opacity: 1; } 100% { opacity: 0; } }
.confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.confetti i { position: absolute; width: 7px; height: 10px; border-radius: 2px; opacity: 0; }
.celebrate.playing .confetti i { animation: drop 2.8s var(--ease) infinite; }
.celebrate.playing .confetti i:nth-child(1) { left: 12%; background: #FF8FB3; animation-delay: .12s; }
.celebrate.playing .confetti i:nth-child(2) { left: 24%; background: #FFD447; animation-delay: .2s; width: 6px; height: 6px; border-radius: 50%; }
.celebrate.playing .confetti i:nth-child(3) { left: 38%; background: #5DB7FF; animation-delay: .1s; }
.celebrate.playing .confetti i:nth-child(4) { left: 52%; background: #77D982; animation-delay: .24s; width: 8px; height: 8px; border-radius: 50%; }
.celebrate.playing .confetti i:nth-child(5) { left: 66%; background: #FFD447; animation-delay: .16s; }
.celebrate.playing .confetti i:nth-child(6) { left: 78%; background: #C48FEB; animation-delay: .22s; width: 6px; height: 11px; }
.celebrate.playing .confetti i:nth-child(7) { left: 88%; background: #FF8FB3; animation-delay: .28s; width: 6px; height: 6px; border-radius: 50%; }
@keyframes drop { 0% { transform: translateY(-14px) rotate(0) translateX(0); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateY(76px) rotate(260deg) translateX(10px); opacity: 1; } 75%, 100% { transform: translateY(96px) rotate(340deg) translateX(-6px); opacity: 0; } }

/* ================================================================
   THEME TOGGLE 日/月切换 (阅读页右上)
   ================================================================ */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--spring), background var(--t-mid); font-size: 16px;
}
.theme-toggle:active { transform: scale(.9) rotate(-15deg); }
[data-theme="night"] .theme-toggle { color: #E8B04B; border-color: rgba(232,176,75,.4); }
/* 日/月双形预置 + CSS 显隐 (20260901): 旧实现用 JS 替换 svg.innerHTML, Safari 对 SVG 元素
   innerHTML 支持不完整, iPad 主屏 App(standalone)下偶发静默失败致图标空白; 纯 CSS 切换零 DOM 操作 */
.theme-toggle .ic-sun { display: none; }
[data-theme="night"] .theme-toggle .ic-sun { display: block; }
[data-theme="night"] .theme-toggle .ic-moon { display: none; }

/* ===== A11y: focus-visible 键盘焦点环（触屏 tap 不受影响） ===== */
.tap:focus-visible,
button:focus-visible,
.chip:focus-visible,
.wtap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm, 8px);
}

/* ===== Print: 打印时隐藏纯屏幕元素 ===== */
@media print {
  .orbs,
  .verify-bar,
  .tabbar,
  .confetti,
  .streakbar { display: none !important; }
  body { background: #fff !important; }
  .card, .dict-card { box-shadow: none !important; border: 1px solid #ccc; }
}

/* ===== Night 主题适配：糖果本体不变色，托盘换暗玻璃、投影加深加微光 ===== */
[data-theme="night"] {
  --candy-cap: #B8AD96;
  --candy-sub: #9C9483;
}
[data-theme="night"] .candy-base {
  background: linear-gradient(150deg, rgba(38,45,58,.72), rgba(32,39,52,.66));
  border-color: rgba(255,255,255,.09);
  color: #E9E3D2;
  backdrop-filter: var(--blur, blur(14px));
  -webkit-backdrop-filter: var(--blur, blur(14px));
}
[data-theme="night"] .celebrate {
  background: rgba(30,37,49,.62);
  border-color: rgba(255,255,255,.09);
  backdrop-filter: var(--blur, blur(14px));
  -webkit-backdrop-filter: var(--blur, blur(14px));
}
[data-theme="night"] .day.future {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: rgba(233,227,210,.35);
}
/* 糖果本体：暗环境中投影更深、印章与横幅带环境微光 */
[data-theme="night"] .stamp {
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 #2F9B4E, 0 16px 26px -8px rgba(0,0,0,.75), 0 0 24px rgba(124,217,143,.22);
}
[data-theme="night"] .streakbar {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 #D95F8B, 0 18px 34px -10px rgba(0,0,0,.7), 0 0 26px rgba(255,127,168,.18);
}

/* ================================================================
   句子解析 (ana-*) 等级自适应 + 语法点参照
   ================================================================ */
.ana-box { margin: -4px 0 var(--sp-4); padding-left: 11px; border-left: 2px solid var(--line); animation: transIn .35s var(--ease) both; }
.ana-loading { font-size: 12px; color: var(--ink-3); padding: 2px 0; }
.ana-gloss { font-size: 13px; color: var(--ink); line-height: 1.6; margin-bottom: 7px; }
.ana-k { display: inline-block; font-size: 10px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
[data-theme="night"] .ana-k { color: #E8B04B; background: rgba(232,176,75,.14); }
.ana-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ana-part { display: inline-flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; max-width: 100%; }
.ana-part b { font-size: 10px; color: var(--accent-deep); font-weight: 800; letter-spacing: .04em; }
[data-theme="night"] .ana-part b { color: #E8B04B; }
.ana-part span { font-size: 12px; color: var(--ink); line-height: 1.45; }
.ana-gram { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.ag-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ag-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.ana-tag { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1.5px 6px; letter-spacing: .03em; }
.ana-tag.focus { color: #fff; background: var(--accent-deep); }
[data-theme="night"] .ana-tag.focus { background: #B07F2E; }
.ana-tag.review { color: var(--ink-3); background: var(--line); }
.ana-tag.challenge { color: #fff; background: #C25A3A; }
.ag-star { font-size: 9px; color: #D9A441; letter-spacing: 1px; }
.ag-formula { font-size: 11.5px; color: var(--ink-2); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; margin-top: 6px; display: inline-block; }
[data-theme="night"] .ag-formula { background: rgba(232,176,75,.1); }
.ag-where { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-style: italic; }
.ag-explain { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; margin-top: 5px; }
.ana-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ana-word { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; border: 1px dashed var(--line); border-radius: 8px; padding: 3px 9px; color: var(--ink-2); max-width: 100%; }
.ana-word b { font-size: 12px; color: var(--ink); font-weight: 700; }

/* ================================================================
   听力训练: 模式弹层 + 练习页 (ls-*)
   ================================================================ */
.listen-sheet { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 430px; z-index: 46; border-radius: 22px; padding: 10px 14px 10px; transform: translateY(calc(100% + 30px)); transition: transform .32s var(--spring); }
.listen-sheet.on { transform: translateY(0); }
.listen-sheet[hidden] { display: none; }
#listenVeil[hidden] { display: none; }
[data-theme="paper"] .listen-sheet { background: rgba(255,252,244,.98); border: 1px solid #E7DCC6; box-shadow: 0 -6px 40px rgba(40,32,18,.2); }
[data-theme="night"] .listen-sheet { background: rgba(19,24,32,.97); border: 1px solid var(--line); box-shadow: 0 -6px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.listen-mode { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 14px; transition: background .18s; }
.listen-mode:active { background: var(--accent-soft); }
[data-theme="night"] .listen-mode:active { background: rgba(232,176,75,.1); }
.lm-ic { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-deep); background: var(--accent-soft); }
.lm-ic svg { width: 21px; height: 21px; }
[data-theme="night"] .lm-ic { color: #E8B04B; background: rgba(232,176,75,.12); }
.lm-body { flex: 1; min-width: 0; }
.lm-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.lm-desc { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.lm-go { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ink-3); }
.listen-cancel { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 10px 0 4px; }

.listen-wrap { max-width: 620px; margin: 0 auto; padding: var(--sp-3) var(--sp-4) 90px; }
.ls-loading { text-align: center; font-size: 13px; color: var(--ink-3); padding: 60px 0; }
.ls-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ls-lv { font-size: 11px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; }
[data-theme="night"] .ls-lv { color: #E8B04B; background: rgba(232,176,75,.14); }
.ls-count { font-size: 12px; color: var(--ink-3); flex: 1; }
.ls-count b { color: var(--ink); font-size: 13px; }
.ls-rate { display: flex; gap: 5px; }
.ls-rate button { font-size: 11px; font-weight: 700; border: 1px solid var(--line); background: none; color: var(--ink-3); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ls-rate button.on { color: #fff; background: var(--accent-deep); border-color: var(--accent-deep); }
[data-theme="night"] .ls-rate button.on { background: #B07F2E; border-color: #B07F2E; }
.ls-card { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; animation: transIn .4s var(--ease) both; }
.ls-card.ok { border-color: rgba(74,145,90,.5); }
.ls-top { display: flex; gap: 11px; align-items: flex-start; }
.ls-play { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--accent-deep); cursor: pointer; transition: transform .15s; }
.ls-play:active { transform: scale(.92); }
.ls-play svg { width: 17px; height: 17px; }
[data-theme="night"] .ls-play { background: #B07F2E; }
.ls-play.loading { animation: ttsPulse 1s ease-in-out infinite; }
.ls-snt { flex: 1; font-size: 15px; line-height: 1.7; color: var(--ink); }
.ls-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 11px 0 0 49px; }
.ls-opt { font-size: 13px; font-weight: 600; border: 1.5px solid var(--line); background: none; color: var(--ink); border-radius: 999px; padding: 6px 15px; cursor: pointer; transition: all .18s; }
.ls-opt:disabled { opacity: .45; }
.ls-opt.ok { color: #fff; background: #4A915A; border-color: #4A915A; }
.ls-opt.bad { color: #C25A3A; border-color: #C25A3A; animation: optShake .3s ease; }
@keyframes optShake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }
.ls-res { font-size: 11.5px; color: var(--ink-3); margin: 8px 0 0 49px; }
.ls-card.ok .ls-res { color: #4A915A; font-weight: 700; }
.ls-sum { text-align: center; padding: 40px 10px 20px; animation: transIn .4s var(--ease) both; }
.ls-sum-score { font-size: 64px; font-weight: 900; color: var(--accent-deep); line-height: 1; }
[data-theme="night"] .ls-sum-score { color: #E8B04B; }
.ls-sum-score small { font-size: 16px; font-weight: 700; margin-left: 3px; }
.ls-sum-txt { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.ls-sum-words { display: flex; flex-direction: column; gap: 8px; margin: 18px auto 0; max-width: 420px; text-align: left; }
.ls-sum-btns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
.ls-sum-btns button { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 10px 26px; cursor: pointer; border: 1.5px solid var(--accent-deep); background: none; color: var(--accent-deep); }
.ls-sum-btns button:first-child { background: var(--accent-deep); color: #fff; }
[data-theme="night"] .ls-sum-btns button { border-color: #B07F2E; color: #E8B04B; }
[data-theme="night"] .ls-sum-btns button:first-child { background: #B07F2E; color: #131820; }

/* ===== 听力模考 (lex-*) ===== */
.lex-intro { text-align: center; padding: 34px 18px 22px; animation: transIn .4s var(--ease) both; }
.lex-badge { display: inline-block; font-size: 12px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 8px; padding: 3px 12px; }
[data-theme="night"] .lex-badge { color: #E8B04B; background: rgba(232,176,75,.14); }
.lex-title { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--ink); margin-top: 10px; }
.lex-meta { display: flex; justify-content: center; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.lex-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px; }
.lex-chip { font-size: 11px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.lex-tips { font-size: 12px; line-height: 1.8; color: var(--ink-3); margin-top: 16px; text-align: left; }
.lex-btns { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.lex-btns.center { padding-bottom: 30px; }
.lex-btns button { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 11px 30px; cursor: pointer; border: 1.5px solid var(--accent-deep); background: var(--accent-deep); color: #fff; }
.lex-btns button.ghost { background: none; color: var(--accent-deep); }
[data-theme="night"] .lex-btns button { border-color: #B07F2E; background: #B07F2E; color: #131820; }
[data-theme="night"] .lex-btns button.ghost { background: none; color: #E8B04B; }
.lex-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.lex-quit { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lex-quit svg { width: 18px; height: 18px; }
.lex-prog { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.lex-prog i { font-style: normal; color: var(--ink-3); font-weight: 500; }
.lex-qtype { display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 6px; padding: 3px 9px; }
[data-theme="night"] .lex-qtype { color: #E8B04B; background: rgba(232,176,75,.14); }
.lex-audio { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 13px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.lex-play { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--accent-deep); cursor: pointer; transition: transform .15s; }
.lex-play:active { transform: scale(.92); }
.lex-play svg { width: 20px; height: 20px; }
[data-theme="night"] .lex-play { background: #B07F2E; }
.lex-play.loading { animation: ttsPulse 1s ease-in-out infinite; }
.lex-play.playing { background: #4A915A; }
.lex-play.err { background: #C25A3A; }
.lex-audio-t { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.lex-qtext { font-size: 15.5px; font-weight: 600; line-height: 1.65; color: var(--ink); margin-top: 14px; }
.lex-qtext.sm { font-size: 13px; font-weight: 500; margin-top: 9px; }
.lex-blank { font-size: 15px; line-height: 1.75; color: var(--ink); margin-top: 13px; }
.lex-blank.sm { font-size: 13px; margin-top: 9px; }
.lex-blank b { color: #4A915A; }
.lex-stmt { font-size: 15px; line-height: 1.7; color: var(--ink); margin-top: 14px; font-style: italic; }
.lex-stmt.sm { font-size: 13px; margin-top: 9px; }
.lex-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.lex-opts.words { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.lex-opt { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 14px; color: var(--ink); border: 1.5px solid var(--line); background: none; border-radius: 12px; padding: 11px 13px; cursor: pointer; transition: all .18s; }
.lex-opt .ol { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); font-size: 12px; font-weight: 800; color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
.lex-opt.sel { border-color: var(--accent-deep); background: var(--accent-soft); }
.lex-opt.sel .ol { border-color: var(--accent-deep); background: var(--accent-deep); color: #fff; }
[data-theme="night"] .lex-opt.sel { border-color: #B07F2E; background: rgba(232,176,75,.1); }
[data-theme="night"] .lex-opt.sel .ol { border-color: #B07F2E; background: #B07F2E; color: #131820; }
.lex-opts.words .lex-opt, .lex-opt.pool { border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.lex-opt.pool { border-style: dashed; color: var(--ink-2); }
.lex-tf { display: flex; gap: 10px; margin-top: 14px; }
.lex-tf .lex-opt { flex: 1; justify-content: center; font-weight: 700; font-size: 15px; }
.lex-tf svg { width: 19px; height: 19px; }
.lex-input { width: 100%; margin-top: 14px; font-size: 16px; color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: none; outline: none; }
.lex-input:focus { border-color: var(--accent-deep); }
[data-theme="night"] .lex-input:focus { border-color: #B07F2E; }
.lex-otip { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.lex-seq { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-height: 44px; border: 1px dashed var(--line); border-radius: 12px; padding: 9px; }
.lex-seq-empty { font-size: 12px; color: var(--ink-3); text-align: center; padding: 9px 0; }
.lex-seqit { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--accent-soft); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
[data-theme="night"] .lex-seqit { background: rgba(232,176,75,.1); }
.lex-seqit b { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-deep); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
[data-theme="night"] .lex-seqit b { background: #B07F2E; color: #131820; }
.lex-pool { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.lex-pool .lex-opt { align-items: flex-start; text-align: left; }
.lex-reset { margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--ink-3); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px; cursor: pointer; }
.lex-nav { display: flex; gap: 12px; justify-content: center; margin: 6px 0 30px; }
.lex-nav button { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 11px 34px; cursor: pointer; border: 1.5px solid var(--accent-deep); background: var(--accent-deep); color: #fff; }
.lex-nav button.ghost { background: none; color: var(--ink-2); border-color: var(--line); }
.lex-nav button:disabled { opacity: .4; }
[data-theme="night"] .lex-nav button { border-color: #B07F2E; background: #B07F2E; color: #131820; }
[data-theme="night"] .lex-nav button.ghost { background: none; color: var(--ink-3); border-color: var(--line); }
.lex-res { text-align: center; padding: 36px 10px 22px; animation: transIn .4s var(--ease) both; }
.lex-score { font-size: 64px; font-weight: 900; color: var(--accent-deep); line-height: 1; }
[data-theme="night"] .lex-score { color: #E8B04B; }
.lex-score small { font-size: 16px; font-weight: 700; margin-left: 3px; }
.lex-res-t { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.lex-det { animation: transIn .4s var(--ease) both; }
.lex-det.ok { border-color: rgba(74,145,90,.55); }
.lex-det.bad { border-color: rgba(194,90,58,.55); }
.lex-det-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lex-det-no { font-size: 13px; font-weight: 800; color: var(--ink); }
.lex-det-badge { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
.lex-det.ok .lex-det-badge { color: #fff; background: #4A915A; }
.lex-det.bad .lex-det-badge { color: #fff; background: #C25A3A; }
.lex-det-type { font-size: 11px; color: var(--ink-3); flex: 1; }
.lex-rp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent-deep); background: none; border: 1px solid var(--accent-deep); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.lex-rp svg { width: 12px; height: 12px; }
[data-theme="night"] .lex-rp { color: #E8B04B; border-color: #B07F2E; }
.lex-det-ans { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 11px; font-size: 12px; color: var(--ink-3); }
.lex-det-ans i { display: block; font-style: normal; font-weight: 700; color: var(--ink); font-size: 13px; margin-top: 3px; }
.lex-det-ex { font-size: 12.5px; line-height: 1.75; color: var(--ink-2); background: var(--accent-soft); border-radius: 9px; padding: 9px 11px; margin-top: 11px; }
[data-theme="night"] .lex-det-ex { background: rgba(232,176,75,.08); }
.lex-oseq { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.lex-oseq b { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #4A915A; color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }

/* ============ 词卡扩展：例句 + 看图记词（懒加载） ============ */
.dict-ex .dict-ex-loading { color: var(--ink-3); font-size: 11px; }
.dict-ex-zh { display: block; margin-top: 3px; font-style: normal; color: var(--ink-3); font-size: 11px; }
.dict-imgbtn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-deep); background: none; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 6px 13px; cursor: pointer; }
.dict-acts { margin-top: 12px; display: flex; align-items: stretch; gap: 9px; }
.dict-acts .dict-imgbtn { margin-top: 0; flex: none; }
.dict-acts .dict-add { flex: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.dict-imgbtn .ic { width: 14px; height: 14px; }
.dict-imgbtn:active { transform: scale(.95); }
[data-theme="night"] .dict-imgbtn { color: #E8B04B; border-color: rgba(232,176,75,.4); }
.dict-img-box { margin-top: 9px; }
.dict-img-box img { width: 100%; max-width: 320px; border-radius: var(--r-md); border: 1px solid var(--line); display: block; margin: 0 auto; }
.dict-img-loading, .dict-img-err { font-size: 11px; color: var(--ink-3); padding: 14px 0; text-align: center; }
.dict-img-loading i { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: dictSpin .8s linear infinite; }
@keyframes dictSpin { to { transform: rotate(360deg); } }
/* ================= 难度原地升降切换器 (20260824k) ================= */
.lv-switch { margin: 10px 0 2px; padding: 7px 9px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-soft); display: flex; flex-direction: column; gap: 6px; }
.lv-switch .lv-row { display: flex; align-items: center; gap: 6px; min-width: 0; }   /* UI修 (20260827): 作用域隔离, 不被列表页同名 .lv-row(flex-start) 覆盖; 整行垂直中位线对齐 */
.lv-switch.solo { padding: 6px 9px 7px; }   /* 单版本: 仅显阶段 (20260827 UI修) */
.lv-switch .lv-lbl { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .5px; }
.lv-btns { display: flex; gap: 5px; }
.lv-btn { min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-2, #fff); color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .15s var(--spring), background .2s, color .2s; }
.lv-btn:active { transform: scale(.94); }
.lv-btn.cur { background: var(--accent); border-color: var(--accent); color: #FFF8EE; cursor: default; }
.lv-tip { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--ink-3); letter-spacing: .3px; }
.lv-hear { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--paper-2, #fff); color: var(--accent); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: transform .15s var(--spring), background .2s; }   /* UI修 (20260827): 去 margin-left:auto, 行2顺序改由DOM决定 */
.lv-hear:active { transform: scale(.94); }
.lv-hear .ic { width: 14px; height: 14px; }
.lv-switch .stg { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; font-size: 11px; line-height: 1; }   /* UI修 (20260827): 阶段徽章与按钮同高, 胶囊尺寸统一 */
.lv-switch .lk-badge { box-sizing: border-box; height: 28px; padding: 0 11px; font-size: 11.5px; }   /* UI修 (20260827): 查词徽章与按钮同高(border-box 含边框) */
[data-theme="night"] .lv-hear { background: rgba(44, 54, 68, .5); }
[data-theme="night"] .lv-switch { border-color: #2C3644; background: rgba(44, 54, 68, .35); }
[data-theme="night"] .lv-btn { border-color: #2C3644; background: #1A2230; color: #D9D3C3; }
[data-theme="night"] .lv-btn.cur { background: #E8B04B; border-color: #E8B04B; color: #1A2230; }

/* ================= 播放器 A-B 循环精听 (20260824k) ================= */
.tts-mark { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--line); background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--spring), background .2s, color .2s, border-color .2s; }
.tts-mark svg { width: 22px; height: 22px; }
.tts-mark:active { transform: scale(.92); }
.tts-mark.on { border-style: solid; border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); }
.tts-mark.loop { animation: ttsLoopPulse 1.6s ease-in-out infinite; }
@keyframes ttsLoopPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 95, 46, .35); } 50% { box-shadow: 0 0 0 5px rgba(180, 95, 46, 0); } }
.tts-pt { position: absolute; top: 50%; width: 3px; height: 18px; border-radius: 2px; transform: translate(-50%, -50%); pointer-events: none; }
#ttsPtA { background: var(--accent-deep); }
#ttsPtB { background: #2C6E8F; }
[data-theme="night"] .tts-mark { border-color: #2C3644; color: #8A94A6; }
[data-theme="night"] .tts-mark.on { border-color: #E8B04B; color: #E8B04B; background: rgba(232, 176, 75, .12); }
[data-theme="night"] #ttsPtA { background: #E8B04B; }
[data-theme="night"] #ttsPtB { background: #6FA8DC; }

/* ================= 晨读翻卡 (20260824l) ================= */
#revEntry { padding: 0 16px; }
.rev-entry { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper, #FDF8EF); cursor: pointer; text-align: left; transition: transform .15s var(--spring); }
.rev-entry:active { transform: scale(.98); }
.rev-entry-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; }
.rev-entry-ic svg { width: 24px; height: 24px; }
.rev-entry-body { flex: 1; min-width: 0; }
.rev-entry-t { font-size: 15px; font-weight: 800; color: var(--ink-strong); }
.rev-entry-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.rev-go { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
[data-theme="night"] .rev-entry { background: #1A2230; border-color: #2C3644; }
[data-theme="night"] .rev-entry-ic { background: rgba(232, 176, 75, .12); color: #E8B04B; }

.rev-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; background: var(--paper, #FBF4E8); opacity: 0; transition: opacity .3s var(--ease); }
.rev-layer.on { opacity: 1; }
[data-theme="night"] .rev-layer { background: #12161F; }
.rev-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; max-width: 430px; width: 100%; box-sizing: border-box; }
.rev-prog { font-size: 13px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 4px 12px; }
.rev-title { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 2px; }
.rev-x { width: 34px; height: 34px; border-radius: 50%; border: none; background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.rev-x svg { width: 20px; height: 20px; }
[data-theme="night"] .rev-prog { color: #E8B04B; background: rgba(232, 176, 75, .12); }

.rev-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 22px; max-width: 430px; width: 100%; min-height: 0; box-sizing: border-box; }
.rev-card { width: 100%; max-width: 330px; max-height: 100%; cursor: pointer; perspective: 1200px; }
.rev-inner { position: relative; width: 100%; transition: transform .5s var(--spring); transform-style: preserve-3d; }
.rev-card.flip .rev-inner { transform: rotateY(180deg); }
.rev-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2, #FFFDF7); padding: 20px 18px; display: flex; flex-direction: column; align-items: center; }
.rev-face.rev-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: rotateY(180deg); justify-content: center; overflow-y: auto; }
[data-theme="night"] .rev-face { background: #1A2230; border-color: #2C3644; }
.rev-img { width: 100%; max-width: 250px; height: 170px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; font-size: 11.5px; color: var(--ink-3); overflow: hidden; }
.rev-img img { width: 100%; height: 100%; object-fit: cover; }
.rev-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 7px; animation: dictSpin .8s linear infinite; }
.rev-word { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--ink-strong); margin-top: 16px; letter-spacing: .5px; }
.rev-spk { margin-top: 6px; }
.rev-spk .ic { width: 30px; height: 30px; color: var(--accent-deep); }
.rev-hint { font-size: 11px; color: var(--ink-3); margin-top: 14px; }
.rev-phon { font-size: 14px; color: var(--ink-2); }
.rev-mean { font-size: 20px; font-weight: 800; color: var(--ink-strong); margin: 4px 0 10px; }
.rev-sec { font-size: 10.5px; font-weight: 800; color: var(--accent-deep); letter-spacing: 1px; margin: 8px 0 3px; align-self: flex-start; }
[data-theme="night"] .rev-sec { color: #E8B04B; }
.rev-ex { font-size: 13px; line-height: 1.55; color: var(--ink); align-self: stretch; }
.rev-exz { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; align-self: stretch; }
.rev-load { color: var(--ink-3); font-size: 12px; }
.rev-foot { display: flex; gap: 10px; padding: 10px 22px 26px; max-width: 430px; width: 100%; box-sizing: border-box; }
.rev-btn { flex: 1; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-2, #FFFDF7); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s var(--spring); }
.rev-btn:active { transform: scale(.96); }
.rev-btn svg { width: 19px; height: 19px; }
.rev-btn.rev-know { background: var(--accent); border-color: var(--accent); color: #FFF8EE; }
[data-theme="night"] .rev-btn { background: #1A2230; border-color: #2C3644; color: #D9D3C3; }
[data-theme="night"] .rev-btn.rev-know { background: #E8B04B; border-color: #E8B04B; color: #1A2230; }
.rev-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 0; }
.rev-done svg { width: 52px; height: 52px; color: var(--accent-deep); }
.rev-done-t { font-size: 19px; font-weight: 800; color: var(--ink-strong); margin-top: 6px; }
.rev-done-s { font-size: 14px; color: var(--ink); }
.rev-done-s2 { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .rev-inner { transition: none; } }

/* ===== UX6 三档脚手架: 基础/标准/挑战 ===== */
/* 基础版: 大字号大行距 */
.article-wrap.role-basic .para { font-size: calc(18.5px * var(--fs-x, 1)); line-height: 2.15; }
.article-wrap.role-basic .para.first::first-letter { font-size: calc(52px * var(--fs-x, 1)); }
/* 版本角色 badge 配色(覆盖等级色): 基础=苔绿 标准=琥珀 挑战=绯红 */
.badge[data-role="basic"] { background: #6C8A5D; border-color: #6C8A5D; }
[data-theme="night"] .badge[data-role="basic"] { color: #9DBB8A; border-color: rgba(157,187,138,.7); background: rgba(255,255,255,.04); }
.badge[data-role="challenge"] { background: #C25B4E; border-color: #C25B4E; }
[data-theme="night"] .badge[data-role="challenge"] { color: #E39C93; border-color: rgba(227,156,147,.7); background: rgba(255,255,255,.04); }
/* 难度条按钮(基础/标准/挑战) */
.lv-btn { min-width: 52px; }
.lv-btn[data-role="basic"]:not(.cur) { color: #6C8A5D; border-color: rgba(108,138,93,.55); }
.lv-btn[data-role="challenge"]:not(.cur) { color: #C25B4E; border-color: rgba(194,91,78,.55); }
[data-theme="night"] .lv-btn[data-role="basic"]:not(.cur) { color: #9DBB8A; }
[data-theme="night"] .lv-btn[data-role="challenge"]:not(.cur) { color: #E39C93; }
/* 基础版: 读前词卡预习层 */
.pv-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(15,19,26,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.pv-mask.show { opacity: 1; }
.pv-box { width: 100%; max-width: 400px; max-height: 82vh; overflow: auto; overscroll-behavior: contain; padding: 20px 18px 18px; border-radius: var(--r-lg, 18px); background: var(--surface, #FFFDF7); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(15,19,26,.28); }
.pv-kick { font-size: 13px; font-weight: 800; color: var(--ink-2); letter-spacing: .5px; margin-bottom: 12px; }
.pv-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 15px; }
.pv-card { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md, 13px); background: var(--accent-soft, rgba(232,176,75,.1)); }
.pv-w { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); }
.pv-spk { margin-left: auto; width: 30px; height: 30px; border-radius: 999px; border: none; background: var(--accent); color: #FFF8EE; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pv-spk svg { width: 15px; height: 15px; }
.pv-spk:active { transform: scale(.92); }
.pv-ph { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.pv-mn { font-size: 13.5px; color: var(--ink); margin-top: 4px; line-height: 1.55; }
/* 词卡富化 (20260903): 词性角标 + 例句(斜体引导语式, 无左侧色条) */
.pv-pos { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-right: 5px; font-style: italic; }
.pv-ex { margin-top: 4px; font-size: 12px; color: var(--ink-2); line-height: 1.5; font-style: italic; }
[data-theme="night"] .pv-box { background: #1A2230; border-color: #2C3644; }
[data-theme="night"] .pv-card { background: rgba(44,54,68,.4); }
[data-theme="night"] .pv-ex { color: #9AA6B6; }
/* 基础版: 逐句跟读高亮 */
.snt { cursor: pointer; border-radius: 4px; transition: background .2s; }
.article-wrap.role-basic .snt:active { background: var(--accent-soft); }
.snt.snt-play { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
/* 挑战版: 查词剩余次数提示 */
.lk-tip { margin-top: 9px; padding: 6px 9px; border-radius: var(--r-xs, 9px); font-size: 11.5px; font-weight: 700; color: #C25B4E; background: rgba(194,91,78,.1); border: 1px dashed rgba(194,91,78,.4); }
[data-theme="night"] .lk-tip { color: #E39C93; background: rgba(227,156,147,.08); border-color: rgba(227,156,147,.4); }
.dict-card.dict-locked .dict-def { color: var(--ink-2); font-style: normal; }

/* ===== UX6b: 版本说明横幅 + 挑战版查词余额徽章 ===== */
.scf-banner { display: flex; align-items: center; gap: 11px; margin: 10px 0 2px; padding: 10px 13px; border-radius: var(--r-md, 14px); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; cursor: pointer; opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; }
.scf-banner.show { opacity: 1; transform: none; }
.scf-banner.off { opacity: 0; transform: translateY(-6px); }
.scf-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.scf-ic .ic { width: 16px; height: 16px; }
.scf-txt { color: var(--ink); font-weight: 650; }
.scf-sub { margin-left: auto; flex: none; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.scf-banner[data-role="basic"] .scf-ic { background: rgba(111, 157, 107, .18); color: #4d7a49; }
.scf-banner[data-role="standard"] .scf-ic { background: rgba(78, 127, 181, .16); color: #3a6da3; }
.scf-banner[data-role="challenge"] .scf-ic { background: rgba(192, 90, 85, .16); color: #b04a45; }
[data-theme="night"] .scf-banner { background: rgba(30, 38, 50, .8); border-color: #2C3644; }
[data-theme="night"] .scf-txt { color: #E4E9F0; }
[data-theme="night"] .scf-sub { color: #8B97A8; }
[data-theme="night"] .scf-banner[data-role="basic"] .scf-ic { background: rgba(122, 168, 116, .2); color: #a8cda2; }
[data-theme="night"] .scf-banner[data-role="standard"] .scf-ic { background: rgba(96, 148, 205, .2); color: #9fc2e8; }
[data-theme="night"] .scf-banner[data-role="challenge"] .scf-ic { background: rgba(214, 102, 102, .2); color: #e3a49c; }

.lk-badge { flex: none; display: inline-flex; align-items: center; margin-left: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; background: rgba(192, 90, 85, .14); color: #a33d3d; border: 1px solid rgba(192, 90, 85, .35); }
.lk-badge.zero { background: rgba(125, 125, 125, .13); color: #8a8a8a; border-color: rgba(125, 125, 125, .3); }
[data-theme="night"] .lk-badge { background: rgba(214, 102, 102, .18); color: #e3a49c; border-color: rgba(214, 102, 102, .4); }
[data-theme="night"] .lk-badge.zero { background: rgba(145, 145, 145, .16); color: #9a9a9a; border-color: rgba(145, 145, 145, .3); }
.lk-badge.pulse { animation: lkPulse .45s ease; }
@keyframes lkPulse { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
/* ============ 分享卡 · poster overlay (20260824w) ============ */
.share-mini {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: 11.5px; font-weight: 700; font-family: var(--font-ui);
  line-height: 1; white-space: nowrap; transition: transform .15s var(--ease), background .15s var(--ease);
}
.share-mini .ic { width: 13px; height: 13px; stroke: var(--accent); fill: none; }
.share-mini:active { transform: scale(.94); background: var(--accent-soft); }
[data-theme="night"] .share-mini { background: rgba(255, 252, 244, .06); border-color: rgba(199, 179, 148, .35); }

/* ===== 阅读字号调节 (20260829): meta行Aa按钮+浮出档位面板, 只作用正文 ===== */
.fs-mini {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: 11.5px; font-weight: 700; font-family: var(--font-ui);
  line-height: 1; white-space: nowrap; transition: transform .15s var(--ease), background .15s var(--ease);
}
.fs-mini .aa { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: var(--accent); letter-spacing: .5px; line-height: 1; }
.fs-mini:active { transform: scale(.94); background: var(--accent-soft); }
[data-theme="night"] .fs-mini { background: rgba(255, 252, 244, .06); border-color: rgba(199, 179, 148, .35); }
.fs-pop {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: fsPop .18s var(--ease) both;
}
@keyframes fsPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fs-pop .fs-chip {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  font-family: var(--font-ui); line-height: 1; transition: all .15s var(--ease);
}
.fs-pop .fs-chip.sm { font-size: 11px; }
.fs-pop .fs-chip.big { font-size: 14px; }
.fs-pop .fs-chip.xl { font-size: 16px; }
.fs-pop .fs-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fs-pop .fs-chip:active { transform: scale(.94); }
[data-theme="night"] .fs-pop { background: rgba(40, 34, 26, .96); border-color: rgba(199, 179, 148, .35); }
[data-theme="night"] .fs-pop .fs-chip { background: rgba(255, 252, 244, .06); }
.poster-ov {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 220;
  background: rgba(24, 17, 9, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .28s var(--ease);
}
.poster-ov.on { opacity: 1; }
.po-card {
  width: min(80vw, 348px); transform: translateY(14px) scale(.96);
  transition: transform .32s var(--spring);
}
.poster-ov.on .po-card { transform: translateY(0) scale(1); }
.po-card img {
  width: 100%; display: block; border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
.po-tip {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: rgba(255, 248, 236, .82); font-size: 12.5px; font-family: var(--font-ui); font-weight: 600;
}
.po-tip .ic { width: 15px; height: 15px; stroke: rgba(255, 248, 236, .82); fill: none; }
.po-close {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 248, 236, .28); background: rgba(255, 248, 236, .08);
  display: flex; align-items: center; justify-content: center;
}
.po-close .ic { width: 16px; height: 16px; stroke: rgba(255, 248, 236, .9); fill: none; }
.po-close:active { transform: scale(.9); }
.me-share-row { display: flex; gap: 10px; margin-top: 14px; }
.me-share-row .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.me-share-row .btn .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; }
/* ============ 摘抄本 (句子四类 + 翻译弹层收藏条) ============ */
.snt-save-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 0 14px; border-top: 1px dashed var(--line); margin-top: 9px; }
.ss-lb { font-size: 10px; font-weight: 800; color: var(--ink-3); letter-spacing: 1px; margin-right: 2px; }
.ss-btn { border: 1.5px solid var(--line-strong); background: none; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 4px 11px; cursor: pointer; transition: all .18s; }
.ss-btn:active { transform: scale(.94); }
.ss-btn.done { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

.snt-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
[data-theme="night"] .snt-card { border-radius: var(--r-lg); backdrop-filter: var(--blur); }
.snt-top { display: flex; align-items: center; gap: 8px; }
.snt-cat { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; border-radius: var(--r-pill); padding: 2px 8px; flex-shrink: 0; }
.snt-cat.hard { background: rgba(194, 91, 78, .13); color: #C25B4E; }
.snt-cat.good { background: rgba(30, 158, 130, .13); color: #1E9E82; }
.snt-cat.quote { background: rgba(180, 122, 46, .14); color: #B47A2E; }
.snt-cat.phrase { background: rgba(62, 124, 166, .13); color: #3E7CA6; }
[data-theme="night"] .snt-cat.hard { background: rgba(224, 108, 94, .16); color: #E06C5E; }
[data-theme="night"] .snt-cat.good { background: rgba(52, 199, 165, .14); color: #34C7A5; }
[data-theme="night"] .snt-cat.quote { background: rgba(232, 176, 75, .15); color: #E8B04B; }
[data-theme="night"] .snt-cat.phrase { background: rgba(108, 160, 219, .15); color: #6CA0DB; }
.snt-art { font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.snt-del { margin-left: auto; color: var(--ink-3); background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0; flex-shrink: 0; }
.snt-del:active { color: #C25B4E; transform: scale(.9); }
.snt-text { font-size: 14px; line-height: 1.7; color: var(--ink-strong); font-family: var(--font-display); }
.snt-trans { font-size: 12px; line-height: 1.65; color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 9px; }
.snt-more { display: flex; align-items: center; gap: 5px; align-self: flex-start; background: none; border: 0; font-size: 11px; font-weight: 700; color: var(--accent-deep); padding: 3px 0; cursor: pointer; }
.snt-more .ic { transition: transform .2s; }
.snt-more.open .ic { transform: rotate(180deg); }

.sf-sec { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
.sf-t { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 5px; }
.sf-b { font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.sf-li { font-size: 12.5px; line-height: 1.7; color: var(--ink); padding-left: 10px; position: relative; }
.sf-li::before { content: ''; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.sf-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.sf-seg { font-size: 12px; font-weight: 700; color: var(--ink-strong); font-family: var(--font-display); }
.sf-role { font-size: 10px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--r-pill); padding: 1px 7px; flex-shrink: 0; }
.sf-note { font-size: 11.5px; color: var(--ink-2); flex: 1; min-width: 120px; }
.sf-blank { font-size: 13px; line-height: 1.7; color: var(--ink-strong); background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 11px; margin: 5px 0; font-family: var(--font-display); }
.sf-formula { font-size: 13px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 11px; font-family: var(--font-display); }
.sf-chip { display: inline-block; font-size: 11px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2.5px 10px; margin: 0 5px 5px 0; }
.sf-ans, .bt-peek { background: none; border: 1.5px solid var(--accent); color: var(--accent-deep); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; padding: 4px 14px; cursor: pointer; margin-top: 2px; }
.sf-ans:active, .bt-peek:active { transform: scale(.95); }
.sf-answer, .bt-orig { font-size: 12.5px; line-height: 1.7; color: var(--ink); background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 11px; margin-top: 6px; font-family: var(--font-display); }
.sf-tip { font-size: 10.5px; color: var(--ink-3); margin: 3px 0 5px; }
.snt-spk { background: none; border: 1.5px solid var(--line-strong); color: var(--ink-2); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; padding: 4px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.snt-spk:active { transform: scale(.95); }

/* ============ 大屏右侧栏 (>=1024px 显示) ============ */
.reader-side { display: none; }
.rs-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; background: var(--surface); margin-bottom: 12px; }
.rs-t { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--ink-strong); margin-bottom: 8px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rs-chip { font-size: 11px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; }
.rs-chip.cat { color: var(--accent-deep); border-color: var(--accent); }
.rs-e { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.rs-snt { font-size: 12px; color: var(--ink-2); font-style: italic; line-height: 1.65; border-left: 2px solid var(--accent); padding-left: 9px; margin-top: 8px; }
.rs-card .rs-go { width: 100%; background: var(--ink-strong); color: var(--bg); border: 0; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; padding: 8px 0; cursor: pointer; margin-top: 10px; }   /* UI修 (20260827): 作用域限定, 不再污染 rs-float 浮层紧凑按钮 */
/* ============ 中高考考点标注 ============ */
.exm-chip { display: inline-flex; align-items: center; border-radius: var(--r-pill); font-size: 10px; font-weight: 800; padding: 2px 8px; letter-spacing: .5px; vertical-align: middle; line-height: 1.5; white-space: nowrap; flex-shrink: 0; }
.exm-chip.zk { background: rgba(38, 152, 200, .13); color: #1d7fae; }
.exm-chip.gk { background: rgba(230, 120, 45, .14); color: #c65a10; }
.exm-chip.both { background: rgba(148, 100, 215, .13); color: #7a4fc0; }
.exm-chip.dim { background: rgba(120, 110, 95, .1); color: var(--ink-3); font-weight: 700; }
.exm-chip.sm { font-size: 9px; padding: 1px 6px; }
.exm-chip.w-exam { border: none; cursor: pointer; transition: all .18s; }
.exm-chip.w-exam:active { transform: scale(.92); }
.dict-exam { margin-top: 7px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.exam-tip { margin: 9px 0 2px; padding: 9px 12px; background: rgba(127, 118, 100, .06); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; line-height: 1.75; animation: transIn .35s var(--ease) both; }
.et-focus { font-weight: 800; color: #c65a10; }
.et-collo { color: var(--ink-2); }
.et-note { color: var(--ink-3); font-size: 11px; }
.exam-filter { margin-bottom: 11px; }
.ef-btn { border: 1.5px dashed var(--line-strong); background: none; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 4px 13px; cursor: pointer; transition: all .18s; }
.ef-btn:active { transform: scale(.95); }
.ef-btn.on { border-style: solid; background: rgba(230, 120, 45, .1); color: #c65a10; border-color: rgba(230, 120, 45, .38); }
[data-theme="night"] .exm-chip.zk { background: rgba(56, 160, 210, .16); color: #6cc3e8; }
[data-theme="night"] .exm-chip.gk { background: rgba(240, 140, 70, .14); color: #f0a468; }
[data-theme="night"] .exm-chip.both { background: rgba(160, 120, 230, .15); color: #b395e8; }
[data-theme="night"] .exam-tip { background: rgba(255, 255, 255, .04); }
[data-theme="night"] .et-focus { color: #f0a468; }
[data-theme="night"] .ef-btn.on { background: rgba(240, 140, 70, .12); color: #f0a468; border-color: rgba(240, 140, 70, .38); }

/* ================================================================
   自适应定级 (20260824)
   ================================================================ */
.lt-banner { margin: 10px 16px 14px; }
.lt-invite { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px; }
.lt-inv-ic { width: 30px; height: 30px; flex: none; color: var(--accent); }
.lt-inv-tx { flex: 1; min-width: 0; }
.lt-inv-t { font-size: 13.5px; font-weight: 800; color: var(--ink-strong); }
.lt-inv-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.lt-invite .btn { flex: none; }
.lt-cur { display: flex; align-items: center; gap: 9px; }
.lt-cur-tag { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: var(--ink-3); }
.lt-cur b { font-family: var(--font-display); font-size: 16px; color: var(--accent); }
.lt-retake { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; }

.lt-veil { position: fixed; inset: 0; z-index: 47; background: rgba(28,22,12,.42); opacity: 0; transition: opacity .28s ease; }
[data-theme="night"] .lt-veil { background: rgba(0,0,0,.58); }
.lt-veil.on { opacity: 1; }
.lt-panel { position: fixed; inset: 0; z-index: 48; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transform: translateY(14px); transition: all .3s var(--spring); }
.lt-panel.on { opacity: 1; transform: none; }
.lt-card { position: relative; width: 100%; max-width: 430px; max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 22px; padding: 26px 22px 24px; }
[data-theme="paper"] .lt-card { background: rgba(255,252,244,.98); border: 1px solid #E7DCC6; box-shadow: 0 -6px 40px rgba(40,32,18,.22); }
[data-theme="night"] .lt-card { background: rgba(19,24,32,.97); border: 1px solid var(--line); box-shadow: 0 -6px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.lt-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.lt-x svg { width: 16px; height: 16px; }
.lt-x:active { background: var(--accent-soft); }
.lt-ic-big { width: 52px; height: 52px; margin: 2px auto 12px; color: var(--accent); }
.lt-ic-big svg { width: 100%; height: 100%; }
.lt-t { text-align: center; font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink-strong); }
.lt-steps { margin: 16px 4px 20px; display: flex; flex-direction: column; gap: 9px; }
.lt-step { font-size: 13px; color: var(--ink-2); line-height: 1.5; padding-left: 16px; position: relative; }
.lt-step::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .7; }
.lt-go { width: 100%; }
.lt-loading { padding: 46px 0; text-align: center; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lt-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: ttsSpin .8s linear infinite; }
.lt-prog { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.lt-prog-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), #B45F2E); transition: width .25s var(--ease); }
[data-theme="night"] .lt-prog-bar { background: linear-gradient(90deg, #5BC8AF, #E8B04B); }
.lt-count { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3); margin-bottom: 12px; }
.lt-q { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ink-strong); margin-bottom: 16px; min-height: 50px; }
.lt-opts { display: flex; flex-direction: column; gap: 10px; }
.lt-opt { min-height: 52px; border: 1.5px solid var(--line); border-radius: 14px; background: none; padding: 12px 15px; font-size: 14.5px; line-height: 1.45; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.lt-opt:active { transform: scale(.985); }
.lt-opt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-strong); font-weight: 700; }
.lt-res { text-align: center; padding: 10px 0 4px; }
.lt-res-k { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: var(--ink-3); }
.lt-res-tier { font-family: var(--font-display); font-size: 54px; font-weight: 800; line-height: 1.15; color: var(--accent); margin: 6px 0 2px; }
.lt-res-label { font-size: 14px; font-weight: 700; color: var(--ink-strong); }
.lt-res-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.lt-res-note { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 20px; line-height: 1.5; }
/* P0 (20260902): 定级完成页 · 游客登录保存引导块 */
.lt-save { margin: 14px 0 6px; padding: 13px 12px 12px; border-radius: 14px; background: var(--accent-soft); text-align: center; }
.lt-save-t { font-size: 12.5px; font-weight: 700; color: var(--ink-strong); }
.lt-save-s { font-size: 11.5px; color: var(--ink-2); margin: 3px 0 10px; line-height: 1.5; }
.lt-save-btn { width: 100%; background: none; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 6px; }
.lt-save-btn svg { width: 15px; height: 15px; }
/* P2 (20260902): 入班后拉起定级 · 简介卡来意条 */
.lt-join-ctx { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 12px; color: var(--ink-2); line-height: 1.5; text-align: center; }


/* ================================================================
   苏格拉底读后引导 · 导师博博 (Etkin 差异化介入 20260825)
   基础版读后聊天: 入口卡 + 全屏引导层 + 收星 + 庆祝
   ================================================================ */

/* ---------- 五角星 (clip-path, 全模块复用) ---------- */
.soc-st, .soc-slot, .soc-fly {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: inline-block;
}
.soc-st.gold, .soc-slot.gold, .soc-fly.gold { background: linear-gradient(160deg, #F5C86A, #E8B04B 60%, #C98F2E); }
.soc-st.silver, .soc-slot.silver, .soc-fly.silver { background: linear-gradient(160deg, #D4DAE4, #B9C2D0 60%, #98A3B5); }
.soc-st { width: 18px; height: 18px; margin-right: 5px; }
.soc-slot { width: 20px; height: 20px; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: transform .5s var(--spring), background .3s; }
.soc-slot.gold, .soc-slot.silver { animation: socSlotIn .55s var(--spring); }
@keyframes socSlotIn { 0% { transform: scale(.3) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.soc-fly { position: fixed; width: 22px; height: 22px; z-index: 990; pointer-events: none; transition: transform .68s var(--ease), opacity .68s; }

/* ---------- 入口卡 (正文读后) ---------- */
.soc-card {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 6px; padding: 15px 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 18px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--spring), border-color .2s;
}
.soc-card.show { opacity: 1; transform: translateY(0); }
.soc-card-owl { width: 62px; height: 62px; flex-shrink: 0; }
.soc-card-owl .owl { width: 100%; height: 100%; }
.soc-card-body { flex: 1; min-width: 0; }
.soc-card-ttl { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--ink-strong); line-height: 1.4; }
.soc-card-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.soc-card-stars { margin-top: 7px; display: flex; }
.soc-card-btn {
  flex-shrink: 0; min-height: 44px; padding: 0 17px;
  border: none; border-radius: 13px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #FBF4E8; font-size: 14px; font-weight: 700; font-family: var(--font-ui);
  transition: transform .18s var(--spring), box-shadow .18s;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.soc-card-btn:active { transform: scale(.94); }

/* ---------- 全屏引导层 ---------- */
.soc-layer {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transition: opacity .3s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.soc-layer.on { opacity: 1; }
.soc-top {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 14px 4px; position: relative;
}
.soc-slots { display: flex; gap: 8px; }
.soc-ico {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--spring), border-color .15s;
}
.soc-ico:active { transform: scale(.9); }
.soc-ico .ic { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#socMute { right: 14px; }
#socClose { right: 64px; }

/* ---------- 舞台 ---------- */
.soc-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 520px; width: 100%; margin: 0 auto; padding: 18px 22px 46px;
}
.soc-owl { width: 96px; height: 96px; }
.soc-owl .owl { width: 100%; height: 100%; overflow: visible; }
.soc-owl.pop { animation: socPop .55s var(--spring); }
@keyframes socPop { 0% { transform: scale(.55) translateY(18px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.soc-owl.happy { animation: socHop 1.15s var(--ease); }
@keyframes socHop { 0%, 100% { transform: translateY(0); } 22% { transform: translateY(-12px); } 44% { transform: translateY(0); } 62% { transform: translateY(-6px); } 80% { transform: translateY(0); } }
.owl-wing { transform-box: fill-box; transform-origin: top center; }
.soc-owl.happy .owl-wl { animation: socWingL .34s ease-in-out 3; }
.soc-owl.happy .owl-wr { animation: socWingR .34s ease-in-out 3; }
@keyframes socWingL { 50% { transform: rotate(-30deg); } }
@keyframes socWingR { 50% { transform: rotate(30deg); } }
.soc-owl.happy .owl-glass { animation: socGlass .34s ease-in-out 3; }
@keyframes socGlass { 50% { stroke: #F5C86A; } }

/* 气泡 */
.soc-bubble {
  position: relative; width: 100%; margin: 16px 0 20px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 18px; padding: 15px 18px;
  font-size: 16px; line-height: 1.75; color: var(--ink-strong);
  min-height: 88px; font-family: var(--font-ui);
}
.soc-caret {
  position: absolute; top: -8px; left: 50%; margin-left: -8px;
  width: 15px; height: 15px; transform: rotate(45deg);
  background: var(--bg);
  border-left: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-top: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

/* 选项 (马卡龙纸片) */
.soc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; width: 100%; }
.soc-opt {
  display: flex; align-items: center; gap: 9px;
  min-height: 56px; padding: 12px 14px;
  border-radius: 15px; cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: var(--font-ui); line-height: 1.4;
  text-align: left; border-width: 1.5px; border-style: solid;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--spring), border-color .15s, box-shadow .2s;
}
.soc-opt.in { opacity: 1; transform: translateY(0) scale(1); }
.soc-opt.lock { pointer-events: none; }
.soc-opt.lock:not(.sel) { opacity: .45; }
.soc-opt.sel { transform: scale(1.03); font-weight: 800; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.soc-opt:active { transform: scale(.97); }
.soc-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }
.soc-opt.sel .soc-dot { opacity: 1; animation: socDot .5s var(--spring); }
@keyframes socDot { 40% { transform: scale(1.9); } }
.mac-0 { background: #F9D9E2; border-color: #E5A8BC; color: #6B2C40; }
.mac-1 { background: #D9EDF8; border-color: #9CC9E3; color: #1F4E66; }
.mac-2 { background: #FBEFCB; border-color: #E8CE8A; color: #6E541A; }
.mac-3 { background: #DFF0E1; border-color: #A8D2AE; color: #2E5233; }
.mac-0.sel { border-color: #D97F9D; }
.mac-1.sel { border-color: #6FB1D6; }
.mac-2.sel { border-color: #DBB85E; }
.mac-3.sel { border-color: #7FBB88; }
[data-theme="night"] .soc-opt { filter: saturate(.88) brightness(.94); }

/* 继续按钮 */
.soc-next {
  margin-top: 20px; min-height: 50px; padding: 0 44px;
  border: none; border-radius: 15px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #FBF4E8; font-size: 16px; font-weight: 700; font-family: var(--font-ui);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 32%, transparent);
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--spring);
}
.soc-next.in { opacity: 1; transform: translateY(0); }
.soc-next:active { transform: scale(.95); }

/* ---------- 庆祝层 ---------- */
.soc-party { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.soc-party i {
  position: absolute; top: -14px; width: 7px; height: 11px; border-radius: 2px;
  animation: socFall linear forwards; opacity: 0;
}
@keyframes socFall {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(86vh) rotate(560deg); opacity: 0; }
}
.soc-win {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px; text-align: center;
  opacity: 0; transform: scale(.92); transition: opacity .4s var(--ease), transform .5s var(--spring);
}
.soc-win.on { opacity: 1; transform: scale(1); }
.soc-win-owl { width: 130px; height: 130px; }
.soc-win-owl .owl { width: 100%; height: 100%; }
.soc-win-owl.jump { animation: socJump 1.3s var(--ease) .25s; }
@keyframes socJump {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(-22px); }
  36% { transform: translateY(0); }
  52% { transform: translateY(-13px); }
  68% { transform: translateY(0); }
  82% { transform: translateY(-6px); }
}
.soc-win-stars { display: flex; gap: 7px; margin: 18px 0 10px; }
.soc-win-stars .soc-st { width: 24px; height: 24px; margin: 0; animation: socSlotIn .6s var(--spring) backwards; }
.soc-win-msg {
  font-family: var(--font-display); font-size: 21px; font-weight: 800;
  color: var(--ink-strong); line-height: 1.5; max-width: 320px;
}
.soc-win-btn {
  margin-top: 26px; min-height: 50px; padding: 0 40px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 15px; background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  color: var(--ink-strong); font-size: 15.5px; font-weight: 700; font-family: var(--font-ui);
  cursor: pointer; transition: transform .18s var(--spring);
}
.soc-win-btn:active { transform: scale(.94); }

/* ---------- 窄屏 ---------- */
@media (max-width: 400px) {
  .soc-opts { grid-template-columns: 1fr; }
  .soc-card-btn { padding: 0 13px; font-size: 13px; }
  .soc-card-owl { width: 52px; height: 52px; }
}


/* ---------- 修正 20260825zn: soc 模块 box-sizing + 溢出防护 ----------
   项目无全局 border-box, soc 元素 width:100%+padding 横向溢出屏幕(气泡+36px/舞台+44px);
   统一补 border-box, 引导层禁横向滚动, 长词强制换行, 任何视口不超宽 ---------- */
.soc-card, .soc-stage, .soc-bubble, .soc-opts, .soc-next, .soc-opt,
.soc-card-btn, .soc-card-body, .soc-win, .soc-win-btn, .soc-top {
  box-sizing: border-box;
}
.soc-layer { overflow-x: hidden; }
.soc-opt { word-break: break-word; overflow-wrap: break-word; }
#socBub { word-break: break-word; }
.soc-card-stars { box-sizing: content-box; }

/* ============ P1 定级报告卡 + 水平卡 + 学术表达层 (20260825zo) ============ */
.lv-card, .lv-head, .lv-bar-row, .lv-bar, .lv-rate, .lv-foot, .lv-tier, .lv-label,
.lv-tag, .lv-why, .lt-ladder, .lad-col, .lad-t, .lad-dots, .ld, .lt-gap,
.lt-why-toggle, .lt-why-body, .th-sec, .th-t, .th-list, .th-cite {
  box-sizing: border-box;
}
/* --- 首页水平卡 --- */
.lv-card {
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 16px; margin: 0 0 14px;
  box-shadow: 0 1px 4px rgba(20, 24, 40, .05);
}
.lv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-tag { font-size: 12px; color: var(--ink-2, #777); letter-spacing: .4px; }
.lv-tier { font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: .5px; }
.lv-label { font-size: 12px; color: var(--ink-2, #777); }
.lv-flex { flex: 1; }
.lv-why {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2, #777);
  font-size: 12px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  min-height: 34px; transition: border-color .15s, color .15s;
}
.lv-why:active { transform: scale(.95); }
.lt-retake {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2, #777);
  font-size: 12px; padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 34px;
}
.lv-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.lv-bar {
  flex: 1; height: 8px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent); position: relative;
}
.lv-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, #7cc98f, #E8B04B);
  transition: width .8s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.lv-next { font-size: 12px; color: var(--ink-2, #777); white-space: nowrap; }
.lv-rate { margin-top: 9px; font-size: 12.5px; color: var(--ink-2, #777); }
.lv-rate b { color: var(--ink); font-size: 14px; }
.lv-foot { margin-top: 9px; font-size: 11px; color: var(--ink-3, #9a9a9a); letter-spacing: .3px; }

/* --- 报告卡阶梯图 --- */
.lt-ladder {
  display: flex; justify-content: center; gap: 4px; margin: 16px auto 4px;
  padding: 12px 10px 10px; border: 1px dashed var(--line); border-radius: 14px;
  max-width: 420px; width: 100%;
}
.lad-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.lad-t { font-size: 12px; font-weight: 600; color: var(--ink-2, #777); letter-spacing: .3px; }
.lad-dots { display: flex; flex-direction: column; gap: 5px; align-items: center; min-height: 10px; }
.ld {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.6px solid var(--line); display: block;
}
.ld.ok { border-color: transparent; background: #E8B04B; box-shadow: 0 1px 3px rgba(232,176,75,.45); }
.ld.none { opacity: .3; }
.lad-col.cur .lad-t { color: var(--ink); font-size: 13.5px; }
.lad-col.cur { position: relative; }
.lad-col.cur::after {
  content: '你在这里'; font-size: 10px; color: #E8B04B; white-space: nowrap;
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); letter-spacing: .5px;
}
.lt-gap {
  margin: 10px auto 0; max-width: 420px; text-align: center; font-size: 13px;
  color: var(--ink); background: color-mix(in srgb, #E8B04B 12%, transparent);
  border-radius: 10px; padding: 8px 12px; word-break: break-word;
}

/* --- 科学依据折叠区 --- */
.lt-why-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 420px; margin: 14px auto 0; padding: 11px 14px;
  border: 1px solid var(--line); background: transparent; border-radius: 12px;
  color: var(--ink-2, #777); font-size: 13px; cursor: pointer; min-height: 44px;
}
.lt-why-toggle svg { width: 16px; height: 16px; transition: transform .25s var(--ease, ease); }
.lt-why-toggle.open svg { transform: rotate(180deg); }
.lt-why-body { max-width: 420px; margin: 0 auto; overflow: hidden; }
.th-sec { margin-top: 14px; }
.th-t { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: .3px; }
.th-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.th-list li { font-size: 12.5px; line-height: 1.65; color: var(--ink-2, #666); word-break: break-word; }
.th-list li b { color: var(--ink); margin-right: 6px; }
.th-cite { margin-top: 10px; font-size: 10.5px; color: var(--ink-3, #9a9a9a); letter-spacing: .2px; line-height: 1.7; }

/* ============ P3 升级仪式 (20260825zp) ============ */
.up-layer, .up-card, .up-kicker, .up-tier-row, .up-from, .up-to, .up-arrow,
.up-label, .up-msg, .up-btn, .up-owl { box-sizing: border-box; }
.up-layer {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, #1c2028 34%, transparent);
  opacity: 0; transition: opacity .35s var(--ease, ease);
}
.up-layer.on { opacity: 1; }
.up-card {
  position: relative; z-index: 2; width: 100%; max-width: 330px;
  background: var(--card, #FBF4E8); border-radius: 20px; padding: 24px 22px 20px;
  text-align: center; box-shadow: 0 18px 50px rgba(20, 24, 40, .28);
  transform: scale(.9) translateY(10px);
  transition: transform .45s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
}
.up-layer.on .up-card { transform: scale(1) translateY(0); }
.up-owl { width: 96px; height: 96px; margin: 0 auto; }
.up-owl .owl { width: 100%; height: 100%; }
.up-owl.jump { animation: socJump 1.3s var(--ease, ease) .25s; }
.up-kicker {
  margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: #E8B04B; font-family: var(--font-display, inherit);
}
.up-tier-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 6px; }
.up-from { font-size: 26px; font-weight: 800; color: var(--ink-2, #9a9a9a); opacity: .55; }
.up-arrow { font-size: 20px; color: #E8B04B; }
.up-to { font-size: 44px; font-weight: 800; color: var(--ink, #2c2a26); letter-spacing: 1px; }
.up-label { margin-top: 2px; font-size: 13px; color: var(--ink-2, #777); letter-spacing: .5px; }
.up-msg { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2, #666); }
.up-btn {
  margin-top: 18px; min-height: 48px; width: 100%; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent, #E8B04B), var(--accent-deep, #d49a2e));
  color: #FBF4E8; font-size: 15.5px; font-weight: 700;
  font-family: var(--font-ui, sans-serif); cursor: pointer;
  transition: transform .18s var(--spring, ease);
}
.up-btn:active { transform: scale(.95); }
[data-theme="night"] .up-card { filter: saturate(.95); }

/* ============ 水平卡可展开收起 (20260825zq) ============ */
.lv-toggle, .lv-more, .lv-more-in, .lv-hint, .lv-more-row, .lv-retake, .lv-lad {
  box-sizing: border-box;
}
.lv-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2, #777);
  width: 44px; height: 34px; min-height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s;
}
.lv-toggle:active { transform: scale(.94); }
.lv-toggle svg {
  width: 18px; height: 18px; display: block;
  transition: transform .32s var(--ease, ease);
}
.lv-card.open .lv-toggle svg { transform: rotate(180deg); }
.lv-more {
  max-height: 0; overflow: hidden;
  transition: max-height .38s var(--ease, ease);
}
.lv-card.open .lv-more { max-height: 480px; }
.lv-more-in { padding-top: 6px; }
.lv-lad { margin-top: 4px; }
.lv-hint {
  margin-top: 10px; font-size: 12px; color: var(--ink-3, #9a9a9a);
  text-align: center; line-height: 1.6;
}
.lv-more-row { display: flex; justify-content: center; margin-top: 12px; }
.lv-retake { font-size: 12px; }

/* ============ 水平卡档位配色 (20260825zr) ============ */
.lv-card, .lv-head, .lv-tier, .lv-label, .lv-rate, .lv-bar, .lv-next,
.lad-col, .lad-t, .lad-s, .lad-dots, .lt-gap, .lt-res-tier { box-sizing: border-box; }
/* 六档主色: A 抹茶绿/苹果绿 · B 天空蓝/长春花蓝 · C 珊瑚橙/蜜桃红 */
.lv-card.t-A1 { --lv: #7ECBB8; --lv-deep: #2F9480; }
.lv-card.t-A2 { --lv: #9BCB6B; --lv-deep: #619B2F; }
.lv-card.t-B1 { --lv: #74BFE8; --lv-deep: #2E8FC0; }
.lv-card.t-B2 { --lv: #8E9CF0; --lv-deep: #5A6BD4; }
.lv-card.t-C1 { --lv: #F2A36B; --lv-deep: #D0742E; }
.lv-card.t-C2 { --lv: #EE8CA6; --lv-deep: #D05C82; }
/* 收起态: 档位徽章 + 标签胶囊 */
.lv-card .lv-tier {
  background: var(--lv-deep, #5A6BD4); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  padding: 5px 11px; border-radius: 11px; line-height: 1.2;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--lv-deep, #5A6BD4) 35%, transparent);
}
.lv-card .lv-label {
  font-size: 12px; font-weight: 600; color: var(--lv-deep, #5A6BD4);
  background: color-mix(in srgb, var(--lv, #8E9CF0) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lv-deep, #5A6BD4) 26%, transparent);
  padding: 4px 10px; border-radius: 999px; line-height: 1.3;
}
/* 进度条 + 正确率 + 距下一档 跟随档位色 */
.lv-card .lv-bar i { background: linear-gradient(90deg, var(--lv, #7cc98f), var(--lv-deep, #E8B04B)); }
.lv-card .lv-next { color: var(--lv-deep, #5A6BD4); font-weight: 600; }
.lv-card .lv-rate {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--lv-deep, #5A6BD4);
  background: color-mix(in srgb, var(--lv, #8E9CF0) 12%, transparent);
  border-radius: 999px; padding: 4px 11px; line-height: 1.4;
}
.lv-card .lv-rate b { color: var(--lv-deep, #5A6BD4); font-size: 13.5px; }
/* 阶梯图: 每档自己的颜色 */
.lad-col.t-A1 { --tc: #2F9480; --tc-soft: #7ECBB8; }
.lad-col.t-A2 { --tc: #619B2F; --tc-soft: #9BCB6B; }
.lad-col.t-B1 { --tc: #2E8FC0; --tc-soft: #74BFE8; }
.lad-col.t-B2 { --tc: #5A6BD4; --tc-soft: #8E9CF0; }
.lad-col.t-C1 { --tc: #D0742E; --tc-soft: #F2A36B; }
.lad-col.t-C2 { --tc: #D05C82; --tc-soft: #EE8CA6; }
.lad-col .lad-t { color: var(--tc, var(--ink-2, #777)); }
.lad-col .lad-s { font-size: 10.5px; color: var(--ink-3, #9a9a9a); letter-spacing: 1.5px; }
.lad-col .ld.ok {
  background: var(--tc-soft, #E8B04B); border-color: transparent;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tc, #B8860B) 38%, transparent);
}
.lad-col.cur .lad-t { color: var(--tc, var(--ink)); font-weight: 700; }
.lad-col.cur .lad-s { color: var(--tc, var(--ink-2)); font-weight: 600; }
.lad-col.cur .ld { border-color: var(--tc-soft, var(--line)); }
.lad-col.cur::after { color: var(--tc, #E8B04B); }
/* 差距提示: 用下一档颜色 */
.lt-gap.g-A1 { background: color-mix(in srgb, #7ECBB8 20%, transparent); color: #20685A; }
.lt-gap.g-A2 { background: color-mix(in srgb, #9BCB6B 20%, transparent); color: #477623; }
.lt-gap.g-B1 { background: color-mix(in srgb, #74BFE8 20%, transparent); color: #1E6B8F; }
.lt-gap.g-B2 { background: color-mix(in srgb, #8E9CF0 20%, transparent); color: #3E4AA8; }
.lt-gap.g-C1 { background: color-mix(in srgb, #F2A36B 20%, transparent); color: #A05620; }
.lt-gap.g-C2 { background: color-mix(in srgb, #EE8CA6 20%, transparent); color: #A84265; }
[data-theme="night"] .lt-gap.g-A1 { color: #9FE0CE; }
[data-theme="night"] .lt-gap.g-A2 { color: #BCE39A; }
[data-theme="night"] .lt-gap.g-B1 { color: #9DD7F2; }
[data-theme="night"] .lt-gap.g-B2 { color: #B7C1F7; }
[data-theme="night"] .lt-gap.g-C1 { color: #F7C8A4; }
[data-theme="night"] .lt-gap.g-C2 { color: #F6BDD0; }
/* 报告卡大字档位染色 */
.lt-res-tier.t-A1 { color: #2F9480; }
.lt-res-tier.t-A2 { color: #619B2F; }
.lt-res-tier.t-B1 { color: #2E8FC0; }
.lt-res-tier.t-B2 { color: #5A6BD4; }
.lt-res-tier.t-C1 { color: #D0742E; }
.lt-res-tier.t-C2 { color: #D05C82; }
[data-theme="night"] .lt-res-tier.t-A1 { color: #8FDCCB; }
[data-theme="night"] .lt-res-tier.t-A2 { color: #BCDF95; }
[data-theme="night"] .lt-res-tier.t-B1 { color: #9DD7F2; }
[data-theme="night"] .lt-res-tier.t-B2 { color: #B7C1F7; }
[data-theme="night"] .lt-res-tier.t-C1 { color: #F7C8A4; }
[data-theme="night"] .lt-res-tier.t-C2 { color: #F6BDD0; }

/* ============ 水平卡底色染+朦胧光斑 (20260825zt) ============ */
.lv-card.t-A1, .lv-card.t-A2, .lv-card.t-B1, .lv-card.t-B2, .lv-card.t-C1, .lv-card.t-C2 {
  background:
    radial-gradient(230px 140px at 86% -12%, color-mix(in srgb, var(--lv) 24%, transparent), transparent 72%),
    radial-gradient(200px 120px at 6% 112%, color-mix(in srgb, var(--lv) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--lv) 4%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--lv-deep) 24%, var(--line));
}
[data-theme="night"] .lv-card.t-A1, [data-theme="night"] .lv-card.t-A2,
[data-theme="night"] .lv-card.t-B1, [data-theme="night"] .lv-card.t-B2,
[data-theme="night"] .lv-card.t-C1, [data-theme="night"] .lv-card.t-C2 {
  background:
    radial-gradient(230px 140px at 86% -12%, color-mix(in srgb, var(--lv) 16%, transparent), transparent 72%),
    radial-gradient(200px 120px at 6% 112%, color-mix(in srgb, var(--lv) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--lv) 6%, var(--card, #1c1f26));
}

/* ================================================================
   20260826 主题两级筛选 + 阅读日历 + 考试对标标签 + 周末特刊徽章
   ================================================================ */

/* ---- 主题一级: 栏目式 tab (与等级胶囊区分层级) ---- */
.theme-bar { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 var(--sp-4); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.theme-bar::-webkit-scrollbar { display: none; }
.t-tab {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 7px 11px 8px;
  position: relative; white-space: nowrap;
  transition: color var(--t-mid);
}
.t-tab .t-n { font-style: normal; font-size: 9px; font-weight: 700; margin-left: 4px; padding: 0 4px; border-radius: 99px; background: var(--bg-2, rgba(127,127,127,.12)); color: var(--ink-3); vertical-align: 1px; }
.t-tab::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 3px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background var(--t-mid);
}
.t-tab.on { color: var(--ink-strong); }
.t-tab.on::after { background: var(--accent); }
.t-tab.on .t-n { background: var(--accent); color: var(--bg); }
.t-tab:active { transform: scale(.95); }

/* ---- 主题二级: 热门话题小胶囊 ---- */
.theme-sub { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: var(--sp-3) var(--sp-4) 0; position: relative; z-index: 2; }
.theme-sub::-webkit-scrollbar { display: none; }
.t-chip {
  flex: 0 0 auto; border: 0; cursor: pointer; font-size: 11px; font-weight: 600;
  padding: 4px 10px; white-space: nowrap; border-radius: 99px;
  transition: transform var(--t-fast) var(--spring), background var(--t-mid), color var(--t-mid);
}
.t-chip .num { font-style: normal; font-size: 9px; opacity: .7; margin-left: 2px; }
[data-theme="paper"] .t-chip { background: var(--bg-2, rgba(127,127,127,.10)); border: 1px solid var(--line); color: var(--ink-2); }
[data-theme="paper"] .t-chip.on { background: var(--accent); border-color: var(--accent); color: #FFFCF4; }
[data-theme="night"] .t-chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: #7E8898; }
[data-theme="night"] .t-chip.on { background: rgba(232,176,75,.22); border-color: rgba(232,176,75,.55); color: #F5CE85; }
.t-chip:active { transform: scale(.93); }

/* ---- 考试对标标签: 与等级徽章同重量、描边型区分 ---- */
.aud-tag {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  padding: 2.5px 8px; white-space: nowrap; border-radius: var(--r-xs); line-height: 1.5;
}
[data-theme="paper"] .aud-tag { background: rgba(194,91,78,.08); border: 1px solid rgba(194,91,78,.55); color: #A34A3E; }
[data-theme="night"] .aud-tag { background: rgba(232,176,75,.10); border: 1px solid rgba(232,176,75,.45); color: #F5CE85; border-radius: var(--r-pill); }
.article-meta .aud-tag { font-size: 10px; }

/* ===== 周末特刊卡：专属边框 + 微光晕（与 wk-flag 徽章同源色，未来特刊自动生效） ===== */
[data-theme="paper"] .card.wk-card { border: 1.5px solid rgba(194,91,78,.62); box-shadow: 0 3px 14px rgba(194,91,78,.13); }
[data-theme="night"] .card.wk-card { border: 1px solid rgba(245,206,133,.42); box-shadow: 0 3px 16px rgba(232,176,75,.11); }
[data-theme="paper"] .card.wk-card:hover { border-color: #C25B4E; box-shadow: 0 6px 22px rgba(194,91,78,.24); }
[data-theme="night"] .card.wk-card:hover { border-color: rgba(245,206,133,.75); box-shadow: 0 6px 24px rgba(232,176,75,.22); }

/* ---- 周末特刊徽章 ---- */
.wk-flag {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
  padding: 1.5px 7px; white-space: nowrap; line-height: 1.6;
}
[data-theme="paper"] .wk-flag { background: #C25B4E; color: #FFFCF4; border-radius: var(--r-xs); box-shadow: 1px 1px 0 rgba(88,66,38,.20); }
[data-theme="night"] .wk-flag { background: rgba(232,176,75,.20); color: #F5CE85; border: 1px solid rgba(232,176,75,.5); border-radius: var(--r-pill); }

/* ---- 首页: 连续阅读横条 (报纸栏目条式) ---- */
.cal-strip {
  display: flex; align-items: center; gap: 11px;
  width: calc(100% - 2 * var(--sp-4)); margin: var(--sp-3) auto 0;
  border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  background: transparent; border-radius: 0; cursor: pointer; text-align: left;
  padding: 10px 2px; transition: opacity var(--t-fast);
}
.cal-strip:active { opacity: .55; }
.cal-strip .ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); }
.cs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-eyebrow { font-size: 8.5px; letter-spacing: 2.5px; font-weight: 800; color: var(--ink-3); }
.cs-big { font-size: 12.5px; font-weight: 800; color: var(--ink-strong); line-height: 1.15; white-space: nowrap; }
.cs-big b { font-family: var(--font-display); font-size: 17px; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 2px; }
[data-theme="night"] .cs-big b { color: #F0BC5C; }
.cs-sep { width: 1px; align-self: stretch; margin: 2px 0; background: var(--line); flex: 0 0 auto; }
.cs-dots { display: inline-flex; gap: 5px; margin-left: auto; align-items: center; }
.cs-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; box-sizing: border-box; flex: 0 0 auto; }
[data-theme="paper"] .cs-dot.on { background: #B45F2E; border-color: #B45F2E; }
[data-theme="night"] .cs-dot.on { background: #E8B04B; border-color: #E8B04B; box-shadow: 0 0 5px rgba(232,176,75,.45); }
.cs-dot.cs-today:not(.on) { border-color: var(--accent); }
.cs-arrow { width: 16px; height: 14px; flex: 0 0 auto; color: var(--accent); opacity: .85; fill: none; }

/* ---- 我的页: 阅读日历月视图 (精致版) ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 0 10px; }
.cal-month { text-align: center; line-height: 1.25; min-width: 96px; }
.cal-month b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-strong); letter-spacing: .5px; }
.cal-month i { display: block; font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--ink-3); margin-top: 3px; font-weight: 600; }
.cal-nav {
  border: 0; background: transparent; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3); flex: 0 0 auto;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--spring);
}
.cal-nav:hover { background: var(--bg-2, rgba(127,127,127,.10)); color: var(--ink-strong); }
.cal-nav:active { transform: scale(.85); }
.cal-nav .ic { width: 15px; height: 15px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week > i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3); text-align: center; padding: 2px 0 7px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; }
.cal-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; width: 100%; max-width: 36px; margin: 0 auto;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
  border-radius: 50%; transition: transform var(--t-fast) var(--spring);
}
.cal-cell.on { color: #FFFCF4; font-weight: 800; background: linear-gradient(160deg, #C77B3F, #B45F2E); box-shadow: inset 0 -2px 4px rgba(0,0,0,.14); }
.cal-cell.on:active { transform: scale(.9); }
[data-theme="night"] .cal-cell.on { background: linear-gradient(160deg, #F0BC5C, #D99B33); color: #1D2330; box-shadow: 0 0 10px rgba(232,176,75,.28); }
.cal-cell.today { border: 1.5px solid var(--accent); color: var(--ink-strong); font-weight: 800; }
.cal-cell.today.on { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.cal-cell.fut { opacity: .25; }
.cal-foot { display: flex; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal-stat { flex: 1; text-align: center; position: relative; }
.cal-stat + .cal-stat::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.cal-stat b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cal-stat.hot b { color: var(--accent); }
[data-theme="night"] .cal-stat.hot b { color: #F0BC5C; }
.cal-stat span { display: block; font-size: 9px; letter-spacing: 1.5px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }

/* ================================================================
   20260826c 导航层整合: 行1右端功能按钮 + 行2等级模式 + 我的页水平卡
   ================================================================ */
/* ---- 行1 右端: 往期 / 等级 按钮 ---- */
.tb-flex { flex: 1; min-width: 10px; }
.tb-btn {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  transition: color var(--t-mid), background var(--t-mid), transform var(--t-fast) var(--spring);
}
.tb-btn:active { transform: scale(.92); }
[data-theme="paper"] .tb-btn.on { background: var(--ink-strong); color: var(--bg); }
[data-theme="night"] .tb-btn.on { background: linear-gradient(135deg,#F0BC5C,#E8B04B); color: #171C24; }
.tb-btn.lv { border: 1px solid var(--line-strong); }
[data-theme="paper"] .tb-btn.lv.act, [data-theme="paper"] .tb-btn.lv:not(.act) { }
[data-theme="paper"] .tb-btn.lv { background: rgba(180,95,46,.07); border-color: rgba(180,95,46,.35); color: #A34A3E; }
[data-theme="night"] .tb-btn.lv { background: rgba(232,176,75,.10); border-color: rgba(232,176,75,.40); color: #F5CE85; }
.tb-btn.lv.act { border-color: currentColor; }

/* ---- 行2 等级模式: 组胶囊 + 细分连排 ---- */
.lv-sep { flex: 0 0 auto; width: 1px; height: 14px; align-self: center; margin: 0 3px; background: var(--line-strong); }
[data-theme="paper"] .t-chip.has { border-color: rgba(180,95,46,.45); color: #A34A3E; }
[data-theme="night"] .t-chip.has { border-color: rgba(232,176,75,.45); color: #F5CE85; }

/* ---- 我的页: 水平卡 (压排版) ---- */
.lv-me { position: relative; }
.lv-me .lv-head { margin-top: -2px; }
.lv-me .lv-tier { font-size: 26px; font-family: var(--font-display); }
.lv-me .lv-label { font-size: 12px; }
.lv-me .lv-why, .lv-me .lt-retake { font-size: 11px; padding: 6px 11px; min-height: 30px; }
.lv-me .lv-more { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s var(--ease), opacity .3s var(--ease); }
.lv-me.open .lv-more { max-height: 340px; opacity: 1; }
.lv-me .lv-more-in { padding-top: 10px; }
.lv-me .lt-ladder { margin: 4px auto 2px; padding: 8px 6px 7px; gap: 2px; border-radius: 12px; }
.lv-me .lad-col { gap: 4px; }
.lv-me .lad-t { font-size: 10.5px; }
.lv-me .lad-s { font-size: 9px; color: var(--ink-3); }
.lv-me .lad-dots { gap: 3px; }
.lv-me .ld { width: 7px; height: 7px; border-width: 1.2px; }
.lv-me .lv-hint { margin-top: 8px; font-size: 10.5px; color: var(--ink-3); }
.lv-me .lv-more-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.lv-me .lv-more-row .lv-rate { margin-top: 0; }
.lv-me .lv-foot { margin-top: 10px; }
.lv-me .lv-toggle {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-3);
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease), background var(--t-fast);
}
.lv-me .lv-toggle svg { width: 16px; height: 16px; }
.lv-me.open .lv-toggle { transform: rotate(180deg); }
[data-theme="paper"] .lv-me .lt-gap { font-size: 11px; margin-top: 8px; }

/* ================================================================
   20260826d 等级回归常驻 + 往期 tab 化 + 首页简化水平条
   ================================================================ */
/* ---- 往期 tab (行1 右端, 同 tab 重量) ---- */
.t-tab.t-arch { margin-left: 2px; color: var(--ink-3); }
.t-tab.t-arch::after { left: 6px; right: 6px; }
[data-theme="paper"] .t-tab.t-arch.on { color: var(--ink-strong); }
[data-theme="night"] .t-tab.t-arch.on { color: #F5CE85; }
[data-theme="paper"] .t-tab.t-arch.on::after { background: #B45F2E; }
[data-theme="night"] .t-tab.t-arch.on::after { background: #E8B04B; }
.t-tab.t-arch.on .t-n { background: #B45F2E; color: #FFFCF4; }
/* 行1与行2的呼吸间隔: theme-bar 下 margin */
.theme-bar { margin-bottom: 0; }

/* ---- 行2 等级常驻行 (#levelBar 复用 .theme-sub 容器样式) ---- */
.theme-sub + .theme-sub { padding-top: 8px; }

/* ---- 首页简化水平条: 与连续阅读条同语言 ---- */
.lv-strip {
  display: flex; align-items: center; gap: 11px;
  width: calc(100% - 2 * var(--sp-4)); margin: var(--sp-3) auto 0;
  border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  background: transparent; border-radius: 0; cursor: pointer; text-align: left;
  padding: 10px 2px; transition: opacity var(--t-fast);
}
.lv-strip:active { opacity: .55; }
.lv-strip .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); fill: none; }
.lvs-right { display: flex; align-items: center; gap: 7px; margin-left: auto; min-width: 0; }
.lvs-next { font-size: 10px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.lvs-bar { position: relative; width: 64px; height: 4px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.lvs-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #7cc98f, #E8B04B); }
.lvs-pct { font-size: 11px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

/* ===== 20260826f: 首页状态条升级双排小卡 (我的水平+连续阅读) ===== */
.lv-strip, .cal-strip { display: block; padding: 11px 2px 12px; }
.ss-row { display: flex; align-items: center; gap: 8px; }
.ss-row + .ss-row { margin-top: 6px; }
.ss-mini { margin-left: auto; font-size: 11px; color: var(--ink-3); font-weight: 700; }
.ss-main { align-items: center; }
.ss-big { font-size: 12.5px; font-weight: 800; color: var(--ink-strong); line-height: 1.15; white-space: nowrap; }
.ss-big b { font-family: var(--font-display); font-size: 24px; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 3px; }
[data-theme="night"] .ss-big b { color: #F0BC5C; }
.ss-sub { font-size: 11px; color: var(--ink-2); font-weight: 700; }
.ss-next { margin-left: auto; font-size: 11px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.ss-bar { position: relative; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); margin-top: 8px; }
.ss-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #7cc98f, #E8B04B); }
[data-theme="night"] .ss-bar i { background: linear-gradient(90deg, #6FBF9A, #F0BC5C); }
.ss-dots { display: flex; gap: 6px; margin-top: 8px; }
.ss-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ss-dot em { font-style: normal; font-size: 9px; color: var(--ink-3); font-weight: 700; }
.ss-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; box-sizing: border-box; }
.ss-dot.on::after { background: #B45F2E; border-color: #B45F2E; }
[data-theme="night"] .ss-dot.on::after { background: #E8B04B; border-color: #E8B04B; box-shadow: 0 0 5px rgba(232,176,75,.45); }
.ss-dot.cs-today:not(.on)::after { border-color: var(--accent); }
.ss-dot.fut { opacity: .32; }
/* 20260826h: 等级行下留白与上方横线距离平衡 */
#levelBar { padding-bottom: var(--sp-3); }

/* ===== 20260826i: 双列状态卡 (水平|连续阅读 合并) ===== */
.ss-dual { display: flex; width: calc(100% - 2 * var(--sp-4)); margin: var(--sp-3) auto 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.ss-dual.split .lv-strip { border-right: 1px solid var(--line); }
.ss-dual .lv-strip, .ss-dual .cal-strip { flex: 1 1 0; min-width: 0; width: auto; margin: 0; border-top: 0; border-bottom: 0; border-radius: 0; padding: 11px 12px 12px; }
.ss-dual .ss-big b { font-size: 21px; }
.ss-dual .ss-mini { font-size: 10px; }
.ss-dual .ss-next { font-size: 10.5px; }
.ss-dual .ss-sub { font-size: 10.5px; }
.ss-dual .ss-dots { gap: 4px; margin-top: 7px; }
.ss-dual .ss-dot em { font-size: 8.5px; }
.ss-dual .ss-dot::after { width: 7px; height: 7px; }
.ss-dual .ss-bar { margin-top: 7px; }
.ss-dual .cs-arrow { width: 14px; height: 12px; }

/* ===== 20260826j: 等级徽章系统 ===== */
.ss-badge { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 7px; }
.ss-badge .tb { display: block; }
.ss-next.ss-top { color: #B8860B; }
[data-theme="night"] .ss-next.ss-top { color: #E8B04B; }
.ss-max { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10.5px; white-space: nowrap; color: #B8860B; font-weight: 800; letter-spacing: .8px; }
[data-theme="night"] .ss-max { color: #E8B04B; }
.ss-max .tb { flex: 0 0 auto; }
.ss-badge.me { margin-right: 9px; }

/* ===== 20260826n: 读前背景卡 ===== */
.bg-card { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-soft); overflow: hidden; }
.bg-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: none; cursor: pointer; font: inherit; }
.bg-hic { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.bg-t { font-size: 12.5px; font-weight: 800; color: var(--ink-2); letter-spacing: .5px; }
.bg-sub { font-size: 11px; color: var(--ink-3); flex: 1; text-align: left; }
.bg-caret { width: 14px; height: 14px; color: var(--ink-3); transition: transform .25s var(--spring); flex: 0 0 auto; }
.bg-card.open .bg-caret { transform: rotate(180deg); }
.bg-body { padding: 0 12px 12px; }
.bg-acts { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.bg-hint { font-size: 10.5px; color: var(--ink-3); }
.bg-all { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; }
.bg-all:active { transform: scale(.94); }
.bg-s { display: block; font-size: 13.5px; line-height: 1.65; color: var(--ink); padding: 3px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bg-s:active { opacity: .55; }
.bg-s.on { color: var(--accent); }
.bg-zh { display: none; font-size: 12px; line-height: 1.6; color: var(--ink-3); padding: 2px 0 6px 10px; border-left: 2px solid var(--accent); margin: 2px 0 6px; }
.bg-s.on + .bg-zh { display: block; animation: bgFade .3s ease; }
.bg-card.all-on .bg-zh { display: block; }
[data-theme="night"] .bg-card { border-color: #2C3644; background: rgba(44, 54, 68, .35); }
[data-theme="night"] .bg-all { border-color: #E8B04B; color: #E8B04B; }
@keyframes bgFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ================================================================
   20260826o · 每日推荐弹窗 (dp-)
   已定级=单卡(题头图+推荐理由); 未定级=三档自选+定级引导
   ================================================================ */
.dp-mask { position: fixed; inset: 0; z-index: 95; background: rgba(15,19,26,.52); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s var(--ease); }
.dp-mask.show { opacity: 1; }
.dp-veil { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); pointer-events: none; }
.dp-veil[hidden] { display: none; }
.dp-mask[hidden] { display: none; }
.dp-card { pointer-events: auto; position: relative; width: min(92vw, 360px); max-height: 84vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transform: translateY(14px) scale(.96); opacity: 0; transition: transform .3s var(--spring), opacity .25s var(--ease); }
.dp-card.in { transform: none; opacity: 1; }
.dp-hero { height: 110px; background: var(--surface-2) center/cover no-repeat; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dp-body { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.dp-kicker { font: 600 11px/1 var(--font-ui); letter-spacing: .18em; color: var(--accent); margin-bottom: var(--sp-2); }
.dp-sub { font-size: 12px; color: var(--ink-2); margin: 2px 0 var(--sp-3); }
.dp-title { font: 700 17px/1.4 var(--font-ui); color: var(--ink-strong); margin-bottom: var(--sp-3); }
.dp-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.dp-tag { font-size: 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; }
.dp-wc { font-size: 11px; color: var(--ink-3); }
.dp-reason { font-size: 13px; color: var(--ink-2); border-left: 3px solid var(--accent); padding: 2px 0 2px 10px; margin-bottom: var(--sp-4); }
.dp-acts { display: flex; gap: var(--sp-3); align-items: center; }
.dp-acts .dp-go { flex: 1; }
.dp-later { background: none; border: none; font-size: 13px; color: var(--ink-3); padding: var(--sp-2); cursor: pointer; }
.dp-picks { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-4); }
.dp-pick { display: grid; grid-template-columns: 58px 1fr auto; gap: var(--sp-2); align-items: center; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px var(--sp-3); cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.dp-pick:active { transform: scale(.98); border-color: var(--accent); }
.dp-band { font: 700 13px/1.3 var(--font-ui); color: var(--ink-strong); display: flex; flex-direction: column; }
.dp-band i { font-style: normal; font-weight: 400; font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.dp-pt { font: 600 13px/1.45 var(--font-ui); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-pm { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dp-pm em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.dp-lead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--accent-soft); border-radius: var(--r-md); padding: 10px var(--sp-3); font-size: 12px; color: var(--ink-2); }
.dp-lt { flex-shrink: 0; background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r-pill); font: 600 12px/1 var(--font-ui); padding: 8px 14px; cursor: pointer; }
.dp-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ink-2); border: none; border-radius: var(--r-pill); cursor: pointer; z-index: 2; }
[data-theme="night"] .dp-x { background: rgba(30,26,20,.6); }
/* 偏好卡开关 */
.dp-sw { -webkit-appearance: none; appearance: none; position: relative; display: block; flex: none; align-self: center; width: 44px; height: 26px; margin: 0; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer; padding: 0; line-height: 0; transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.dp-sw i { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 20px; height: auto; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); transition: transform var(--t-mid) var(--spring); }
.dp-sw.on { background: var(--accent); border-color: var(--accent-deep); }
.dp-sw.on i { transform: translateX(18px); border-color: var(--accent-deep); }

/* ============ 做题回看原文浮层 (20260826s) ============ */
.qp-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--r-pill); padding: 6px 11px 6px 8px; cursor: pointer; }
.qp-open:active { transform: scale(.95); }
.qp-open .ic { width: 14px; height: 14px; stroke: var(--accent); fill: none; }
[data-theme="night"] .qp-open { background: rgba(255,252,244,.08); }
/* ===== 做题悬浮看原文 (20261005): 右下圆钮, 顶部入口保留, 浮层 qpeek z=200 盖过 fab ===== */
.quiz-fab { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 46; width: 58px; height: 58px; border-radius: 50%; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(28,24,18,.86); color: #f2ead9; border: 1px solid rgba(242,234,217,.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,.28); font-size: 10px; letter-spacing: 2px; text-indent: 2px; }
.quiz-fab .ic { width: 20px; height: 20px; }
.quiz-fab.on { display: flex; }
[data-theme="night"] .quiz-fab { background: rgba(18,16,12,.9); }
.qpeek-ov { position: fixed; inset: 0; z-index: 200; background: rgba(24,17,9,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s var(--ease); display: flex; align-items: flex-end; justify-content: center; }
.qpeek-ov.on { opacity: 1; }
.qpeek-card { width: 100%; max-width: 560px; height: 88%; max-height: 88%; background: var(--surface); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; transform: translateY(30px); transition: transform .32s var(--spring); box-shadow: 0 -10px 44px rgba(0,0,0,.2); overflow: hidden; }
.qpeek-ov.on .qpeek-card { transform: translateY(0); }
.qpeek-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px 12px 16px; border-bottom: 1px solid var(--line); flex: none; }
.qpeek-hic { width: 17px; height: 17px; flex: none; stroke: var(--accent); fill: none; }
.qpeek-ttl { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qpeek-close { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #FFFCF4; background: var(--accent); border: none; border-radius: var(--r-pill); padding: 7px 12px 7px 9px; cursor: pointer; }
.qpeek-close:active { transform: scale(.95); }
.qpeek-close .ic { width: 13px; height: 13px; }
.qpeek-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 44px; }
.qpeek-body.article-wrap { padding: 16px 18px 44px; }
.qpeek-body .hero-img { margin: 0 0 14px; border-radius: 12px; overflow: hidden; }
.qpeek-body .para { position: relative; padding-left: 30px; opacity: 1 !important; transform: none !important; }
.qpeek-body .para[data-pn]::before { content: attr(data-pn); position: absolute; left: 0; top: .25em; font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-radius: 5px; padding: 1px 5px; letter-spacing: .5px; }
.qpeek-body .para.first::before { top: .3em; }
[data-theme="night"] .qpeek-ov { background: rgba(0,0,0,.6); }

/* ============ 列表排序下拉 (20260826): levelBar 行尾按钮 + fixed 菜单 + 话题分组小节 ============ */
.lv-row { display: flex; align-items: flex-start; }
.lv-row .theme-sub { flex: 1; min-width: 0; }
.t-sort {
  flex: 0 0 auto; border: 0; cursor: pointer; font-size: 11px; font-weight: 600;
  padding: 4px 9px; white-space: nowrap; border-radius: 99px;
  margin: var(--sp-3) var(--sp-4) 0 2px;
  transition: transform var(--t-fast) var(--spring);
}
.t-sort svg { vertical-align: -.14em; }
.t-sort svg:first-child { margin-right: 2px; }
.t-sort svg:last-child { margin-left: 2px; }
[data-theme="paper"] .t-sort { background: var(--bg-2, rgba(127,127,127,.10)); border: 1px solid var(--line); color: var(--ink-2); }
[data-theme="night"] .t-sort { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: #7E8898; }
.t-sort:active { transform: scale(.93); }
.t-sort[aria-expanded="true"] { color: var(--accent); }

.sort-ov { position: fixed; inset: 0; z-index: 90; }
.sort-dd {
  position: fixed; z-index: 91; min-width: 152px; max-width: 60vw;
  padding: 5px; display: flex; flex-direction: column; border-radius: 13px;
  animation: sortDDIn .16s var(--spring);
}
@keyframes sortDDIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
[data-theme="paper"] .sort-dd { background: rgba(255,252,244,.94); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(60,50,20,.15); }
[data-theme="night"] .sort-dd { background: rgba(28,31,38,.95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.sort-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 10px 12px; border-radius: 9px; min-height: 40px;
  transition: background var(--t-fast);
}
.sort-opt:active { background: var(--bg-2, rgba(127,127,127,.10)); }
.sort-opt .ok { display: none; flex: 0 0 auto; }
.sort-opt.on { color: var(--accent); font-weight: 700; }
.sort-opt.on .ok { display: block; }

.list-sec {
  display: flex; align-items: center; gap: 7px;
  margin: 20px 0 2px; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; color: var(--ink-3);
}
.list-sec::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }
.list-sec:first-child { margin-top: 6px; }


/* ================================================================
   成就徽章系统 (20260826): 达成弹层(马卡龙贴纸) + 我的页徽章墙
   贴纸四层立体: 渐变体色(明度差6-8%) + 顶部内高光 + 底部厚度 + 环境柔影
   ================================================================ */
.badge-layer, .badge-pop, .bp-sticker, .bp-ic, .bp-name, .bp-desc,
.bp-kicker, .bp-hint, .bp-shine, .bw-item, .bw-sticker, .bw-name,
.bw-prog, .bw-gt, .bw-grid, .bw-group { box-sizing: border-box; }

/* ---------- 马卡龙色板: 六类 (--bl亮 --bd暗 --bk厚度 --bi图标色) ---------- */
.cat-reading   { --bl: #ffd4de; --bd: #eda4b8; --bk: #d988a0; --bi: #a34562; }
.cat-streak    { --bl: #cdf3dd; --bd: #9ddcb9; --bk: #7fc79e; --bi: #35714f; }
.cat-quiz      { --bl: #fff0c4; --bd: #ffd98a; --bk: #e6bf5e; --bi: #9c7420; }
.cat-breadth   { --bl: #cfeafc; --bd: #98c9ea; --bk: #79aed2; --bi: #2b6a94; }
.cat-words     { --bl: #e0d5fb; --bd: #bca9ee; --bk: #9d86d8; --bi: #5d47a3; }
.cat-listening { --bl: #ffd6c4; --bd: #ffab8f; --bk: #ea8a6c; --bi: #b25a3a; }

/* ---------- 达成弹层 ---------- */
.badge-layer {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 17, 9, .42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
.badge-layer.on { opacity: 1; pointer-events: auto; }
[data-theme="night"] .badge-layer { background: rgba(8, 6, 3, .58); }
.badge-pop {
  width: 264px; padding: 30px 22px 24px; text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(20, 13, 5, .30);
  transform: scale(.86) translateY(10px);
  transition: transform var(--t-card) var(--spring);
}
.badge-layer.on .badge-pop { transform: scale(1) translateY(0); }
.bp-kicker {
  font-size: 11px; letter-spacing: .35em; text-indent: .35em;
  color: var(--ink-2); text-transform: uppercase; margin-bottom: 16px;
}
/* 贴纸主体: 四层立体 */
.bp-sticker {
  position: relative; width: 104px; height: 104px; margin: 0 auto 16px;
  border-radius: 32%;
  background: linear-gradient(180deg, var(--bl) 0%, var(--bd) 100%);
  transform: rotate(-4deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .62),
    inset 0 -5px 7px rgba(0, 0, 0, .10),
    0 4px 0 var(--bk),
    0 12px 22px rgba(31, 22, 12, .20);
  animation: badgeIn 620ms var(--spring) both;
}
@keyframes badgeIn {
  0%   { transform: rotate(-14deg) scale(.3); opacity: 0; }
  55%  { transform: rotate(-2deg) scale(1.09); opacity: 1; }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.bp-ic { width: 52px; height: 52px; stroke: var(--bi); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bp-shine {
  position: absolute; top: -12%; left: -8%; width: 46%; height: 124%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  border-radius: 40%; pointer-events: none;
  animation: badgeShine 1.1s .32s var(--ease) both;
}
@keyframes badgeShine {
  0% { transform: translateX(-40%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}
.bp-name { font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--ink-strong); letter-spacing: .12em; text-indent: .12em; margin-bottom: 6px; }
.bp-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.bp-hint { margin-top: 16px; font-size: 11px; color: var(--ink-3); letter-spacing: .2em; }

/* ---------- 我的页徽章墙 ---------- */
.bw-head { display: flex; align-items: baseline; justify-content: space-between; }
.bw-count { font-size: 12px; color: var(--ink-3); }
.bw-group { margin-top: 14px; }
.bw-gt { font-size: 12px; color: var(--ink-2); letter-spacing: .14em; margin-bottom: 8px; }
.bw-grid { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.bw-item { width: 62px; text-align: center; cursor: pointer; }
.bw-sticker {
  width: 52px; height: 52px; margin: 0 auto 5px;
  border-radius: 32%;
  background: linear-gradient(180deg, var(--bl) 0%, var(--bd) 100%);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-4deg);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .58),
    inset 0 -3px 5px rgba(0, 0, 0, .10),
    0 3px 0 var(--bk),
    0 6px 12px rgba(31, 22, 12, .14);
  transition: transform var(--t-fast) var(--spring);
}
.bw-item:active .bw-sticker { transform: rotate(-4deg) scale(.9); }
.bw-item .bp-ic { width: 26px; height: 26px; stroke-width: 2; }
.bw-name { font-size: 11px; color: var(--ink); line-height: 1.4; }
.bw-prog { font-size: 10px; color: var(--ink-3); margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.bw-item.locked .bw-sticker { filter: grayscale(1); opacity: .5;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.08),
  0 3px 0 #b6ab99, 0 6px 10px rgba(31,22,12,.10); }
.bw-item.locked .bw-name { color: var(--ink-3); }
[data-theme="night"] .bw-item.locked .bw-sticker {
  box-shadow: inset 0 2px 3px rgba(255,255,255,.18), inset 0 -3px 5px rgba(0,0,0,.3),
  0 3px 0 #45403a, 0 6px 10px rgba(0,0,0,.28); opacity: .62; }
.bw-empty { color: var(--ink-3); font-size: 13px; padding: 10px 0 2px; }

/* 徽章墙展开/收起 (20260826) */
.bw-toggle {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: 12px; padding: 8px 0 2px;
  background: none; border: none; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.bw-toggle .ic { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.bw-toggle.open .ic { transform: rotate(180deg); }
.bw-toggle:active { color: var(--accent); }

/* 首页复习条 (20260826): 今日待复习入口 */
.rev-strip {
  display: flex; align-items: center; gap: 9px;
  width: calc(100% - 2 * var(--sp-4)); margin: var(--sp-3) auto 0;
  border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  background: transparent; border-radius: 0; cursor: pointer; text-align: left;
  padding: 11px 2px; transition: opacity var(--t-fast);
  font-family: inherit; font-size: 13px; color: var(--ink-1);
  -webkit-tap-highlight-color: transparent;
}
.rev-strip .rs-ic { width: 17px; height: 17px; color: var(--accent, #C0582F); flex: none; }
.rev-strip .rs-txt { flex: 1; }
.rev-strip .rs-txt b { font-size: 15px; color: var(--accent, #C0582F); padding: 0 2px; }
.rev-strip .rs-pill {
  flex: none; font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px;
  width: auto; background: none; margin-top: 0; white-space: nowrap;
}
.rev-strip .rs-arrow { width: 13px; height: 13px; color: var(--ink-2); flex: none; }
.rev-strip:active { opacity: .55; }

/* 老师任务条 (20260826 教师工作流): 班级读报任务入口 */
.task-strip {
  width: calc(100% - 2 * var(--sp-4)); margin: var(--sp-3) auto 0;
  border-top: 1px solid var(--line-strong);
}
.task-card {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; border-bottom: 1px solid var(--line-strong);
  background: transparent; cursor: pointer; text-align: left;
  padding: 11px 2px; font-family: inherit; font-size: 13px; color: var(--ink-1);
  -webkit-tap-highlight-color: transparent;
}
.task-card .tk-ic { width: 17px; height: 17px; color: var(--accent, #C0582F); flex: none; }
.task-card .tk-body { flex: 1; min-width: 0; }
.task-card .tk-label { display: block; font-size: 10px; color: var(--accent, #C0582F); font-weight: 600; letter-spacing: .5px; }
.task-card .tk-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-card .tk-meta { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.task-card .tk-pill {
  flex: none; font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px;
  width: auto; background: none; margin: 0; white-space: nowrap;
}
.task-card .tk-done { flex: none; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.task-card .tk-arrow { width: 13px; height: 13px; color: var(--ink-2); flex: none; }
.task-card:active { opacity: .55; }
.wq-item { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--paper, #fff); }
.wq-item:active { opacity: .6; }
.wq-q { font-size: 12.5px; font-weight: 600; color: var(--ink-1); line-height: 1.5; margin-bottom: 4px; }
.wq-row { font-size: 11.5px; line-height: 1.55; padding-left: 10px; }
.wq-row.wrong { color: #b34040; }
.wq-row.right { color: #157f5f; }
.wq-exp { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin-top: 5px; padding: 6px 9px; background: var(--paper-2, #f7f6f3); border-radius: 8px; }
.wq-meta { font-size: 10px; color: var(--ink-3); margin-top: 5px; }
.wq-more { font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 6px 0 2px; }
.task-card.tk-overdue { background: rgba(179, 64, 64, .05); border-radius: 8px; }
.task-card.tk-overdue .tk-label { color: #b34040; }
.task-card .tk-od { color: #b34040; font-weight: 700; font-style: normal; }
/* 完成态(20260827): 留痕不消失, 降透明度+去箭头, 截止过期3天后随接口退场 */
.task-card.tk-finished { opacity: .55; }
.task-card.tk-finished .tk-title { color: var(--ink-2, #666); }
.task-card.tk-finished .tk-arrow { display: none; }
.task-card .tk-done { display: inline-flex; align-items: center; gap: 3px; }
.task-card .tk-done .tk-ok { width: 12px; height: 12px; color: #157f5f; flex: none; }
.task-card .tk-pill.hot {
  color: #fff; background: var(--accent, #C0582F); border-color: var(--accent, #C0582F);
  font-weight: 600;
}

/* ============ 三步引导 + 做题模式弹层 (20260827 UI修): 复用 listen-sheet 设计语言 ============ */
.qs-sheet { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 430px; z-index: 46; border-radius: 22px; padding: 8px 14px 10px; transform: translateY(calc(100% + 30px)); transition: transform .32s var(--spring); }
.qs-sheet.on { transform: translateY(0); }
.qs-sheet[hidden] { display: none; }
[data-theme="paper"] .qs-sheet { background: rgba(255,252,244,.98); border: 1px solid #E7DCC6; box-shadow: 0 -6px 40px rgba(40,32,18,.2); }
[data-theme="night"] .qs-sheet { background: rgba(19,24,32,.97); border: 1px solid var(--line); box-shadow: 0 -6px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.qs-t { font-size: 13px; font-weight: 800; color: var(--ink); padding: 8px 8px 4px; }
.qs-row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 14px; }
.qs-row.cur { background: var(--accent-soft); }
[data-theme="night"] .qs-row.cur { background: rgba(232,176,75,.1); }
.qs-row.tap:active { background: var(--accent-soft); }
[data-theme="night"] .qs-row.tap:active { background: rgba(232,176,75,.1); }
.qs-ic { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-deep); background: var(--accent-soft); }
.qs-ic svg { width: 21px; height: 21px; }
[data-theme="night"] .qs-ic { color: #E8B04B; background: rgba(232,176,75,.12); }
.qs-bd { flex: 1; min-width: 0; }
.qs-rt { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qs-rd { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.qs-now { flex: none; font-size: 10px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.qs-row.cur .qs-now { color: var(--accent); border-color: var(--accent); }
.qs-clock { font-variant-numeric: tabular-nums; color: var(--accent); }

/* ===== C2可见性 (20260828): 挑战档位标注 ===== */
.card-meta .num.chal { color: #A8761C; font-weight: 700; }
[data-theme="night"] .card-meta .num.chal { color: #E8B04B; }
.lv-btn .lv-tp { font-style: normal; font-size: 9px; font-weight: 700; opacity: .68; margin-left: 3px; letter-spacing: .3px; }
.lv-btn.cur .lv-tp { opacity: .9; }


/* ===== S1 氛围层 (20260828): 共读人数 / 摘句热度 / 读后投票 ===== */
.co-read { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 11.5px; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.co-read.on { opacity: 1; transform: none; }
.co-read .ic { width: 15px; height: 15px; }
.co-read b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.heat-badge { display: none; align-items: center; gap: 4px; font-size: 10.5px; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.heat-badge.on { display: flex; }
.heat-badge .ic { width: 13px; height: 13px; }

.poll-card { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 12px 14px 10px; margin: 14px 0 8px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.poll-card.show { opacity: 1; transform: none; }
.pc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.pc-head .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.poll-card.locked .pc-head .ic { color: var(--ink-3); }
.pc-q { font-size: 13.5px; font-weight: 700; color: var(--ink-strong); line-height: 1.3; flex: 1; }
.pc-tag { font-size: 10px; color: var(--ink-2); flex: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.pc-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-opt { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-pill); padding: 6px 12px 6px 10px; font-size: 12.5px; color: var(--ink); font-family: var(--font-ui); overflow: hidden; }
.pc-opt:not(:disabled):hover { border-color: var(--accent); }
.pc-opt:disabled { cursor: default; opacity: .55; }
.poll-card.voted .pc-opt { flex: 1 1 100%; background: var(--surface); opacity: 1; }
.poll-card.locked .pc-opt:disabled { opacity: .5; }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); flex: none; }
.pc-opt .pc-dot[data-cur] { background: var(--accent); border-color: var(--accent); }
.pc-opt:has(.pc-dot[data-cur]) { border-color: var(--accent); }
.pc-txt { position: relative; z-index: 1; }
.pc-n { margin-left: auto; font-size: 11px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.pc-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); z-index: 0; border-radius: var(--r-pill); transition: width .5s var(--ease); }
.pc-foot { margin-top: 8px; font-size: 10.5px; color: var(--ink-3); }


/* ===== S2 读后广场 (20260828): 入口环 / 泳道 / 大卡片 / 发送面板 ===== */
.sq-entry { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 10px 13px; margin: 12px 0 6px; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .3s; }
.sq-entry.show, .sq-entry { opacity: 1; transform: none; }
.sq-entry.ready { border-color: var(--accent); background: var(--accent-soft); }
.sq-ring { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.sq-ring circle { fill: none; stroke-width: 2.4; }
.sq-ring-bg { stroke: var(--line); }
.sq-ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 0 56.5; transition: stroke-dasharray .6s var(--ease); }
.sq-e-txt { flex: 1; min-width: 0; }
.sq-e-txt b { display: block; font-size: 13.5px; color: var(--ink-strong); font-family: var(--font-display); }
.sq-e-txt span { font-size: 10.5px; color: var(--ink-3); }
.sq-entry.ready .sq-e-txt b { color: var(--accent-deep); }
.sq-e-arrow .ic { width: 15px; height: 15px; color: var(--ink-3); }
.sq-entry.ready .sq-e-arrow .ic { color: var(--accent); }

.sq-wrap { max-width: 480px; margin: 0 auto; padding: 10px 14px 90px; }
.sq-night { display: flex; align-items: center; gap: 7px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent-deep); border-radius: var(--r-md); padding: 8px 12px; font-size: 12px; margin-bottom: 10px; }
.sq-night b { font-weight: 800; }
.sq-night .ic { width: 15px; height: 15px; flex: none; }
.sq-my { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); margin-bottom: 10px; }
.sq-my-name { font-weight: 700; color: var(--ink); }
.sq-my-gold { font-size: 9.5px; color: #A8761C; border: 1px solid #E8B04B; border-radius: var(--r-pill); padding: 1px 7px; }
[data-theme="night"] .sq-my-gold { color: #E8B04B; }
.sq-my-posts { margin-left: auto; }
.sq-my-posts b { color: var(--accent); font-weight: 700; }

.sq-wall { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); margin-bottom: 12px; }
.sq-item { position: absolute; left: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap; animation: sqFloat linear infinite; cursor: pointer; font-family: var(--font-ui); box-shadow: 0 1px 6px rgba(28, 20, 10, .05); }
.sq-item .sq-en { font-size: 12px; font-weight: 700; color: var(--ink); }
.sq-item .sq-fire { display: inline-flex; color: #C25A2B; }
.sq-item .sq-fire .ic { width: 12px; height: 12px; }
[data-theme="night"] .sq-item .sq-fire { color: #E8804B; }
.sq-item.hot { padding: 7px 13px; border-color: #D9905F; box-shadow: 0 3px 14px rgba(194, 90, 43, .22); }
.sq-item.hot .sq-en { font-size: 13.5px; font-weight: 800; color: var(--ink-strong); }
.sq-item.hot .sq-zh { font-size: 10.5px; color: var(--ink-2); }
@keyframes sqFloat { from { left: 100%; } to { left: -100%; } }   /* v2: left动画限定墙体宽度内飞行(iPad宽屏不越界) */
.sq-wall.paused .sq-item { animation-play-state: paused; }
.sq-item .sq-en { font-size: 12px; font-weight: 700; color: var(--ink); }
.sq-item .sq-zh { font-size: 10px; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 6px; }
.sq-item .sq-mask { flex: none; color: var(--ink-2); }
.sq-item.bobo { border-color: var(--accent); background: var(--accent-soft); }
.sq-item.bobo .sq-en { color: var(--accent-deep); }
.sq-item.gold { border-color: #E8B04B; box-shadow: 0 0 0 1px rgba(232, 176, 75, .35); }
.sq-item.mine::after { content: ''; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.sq-me { display: none; }

.sq-hot { margin-bottom: 12px; }
.sq-hot-t { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #A8761C; margin-bottom: 6px; }
[data-theme="night"] .sq-hot-t { color: #E8B04B; }
.sq-hot-t .ic { width: 13px; height: 13px; }
.sq-hot-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 6px; font-family: var(--font-ui); }
.sq-h-en { font-size: 12px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-h-zh { font-size: 10px; color: var(--ink-3); flex: none; }
.sq-h-n { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }

.sq-post-btn { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: 480px; width: calc(100% - 56px); justify-content: center; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 12px 20px; font-size: 14px; font-weight: 700; font-family: var(--font-ui); box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 30; }
.sq-post-btn .ic { width: 16px; height: 16px; }
.sq-post-btn:disabled { background: var(--ink-3); }
.sq-post-btn:active { transform: translateX(-50%) scale(.97); }   /* 20260907: .tap:active 的 scale 会覆盖 translateX(-50%), 按下瞬间按钮右弹240px且点击落空 */
.sq-post-btn.lock::after { content: '读完解锁'; font-size: 9.5px; font-weight: 600; opacity: .85; }

.sq-veil { position: fixed; inset: 0; background: rgba(30, 22, 12, .45); backdrop-filter: blur(3px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .25s var(--ease); }
.sq-veil.on { opacity: 1; }
.sq-big { max-width: 400px; width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 18px 20px 14px; box-shadow: 0 18px 48px rgba(0,0,0,.28); transform: translateY(10px) scale(.97); transition: transform .3s var(--spring); }
.sq-veil.on .sq-big { transform: none; }
.sq-big-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.sq-big-who b { font-size: 12.5px; color: var(--ink-strong); display: block; }
.sq-big-who span { font-size: 9px; border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--r-pill); padding: 1px 6px; margin-right: 4px; display: inline-block; margin-top: 3px; }
.sq-big-who .sq-tag-g { color: #A8761C; border-color: #E8B04B; }
[data-theme="night"] .sq-big-who .sq-tag-g { color: #E8B04B; }
.sq-big-who .sq-tag-b { color: var(--accent-deep); border-color: var(--accent); }
.sq-big-who .sq-tag-m { color: var(--accent); border-color: var(--accent); }
.sq-big-en { font-size: 15px; line-height: 1.5; color: var(--ink-strong); font-family: var(--font-display); font-weight: 600; margin-bottom: 6px; }
.sq-big-zh { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin-bottom: 14px; }
.sq-react { display: flex; gap: 8px; }
.sr-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); border-radius: var(--r-pill); padding: 8px 4px; font-size: 12px; font-weight: 700; font-family: var(--font-ui); }
.sr-btn .ic { width: 14px; height: 14px; }
.sr-btn b { font-variant-numeric: tabular-nums; }
.sr-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.sr-btn.sr-meh { flex: .8; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sr-btn.sr-meh.on { border-color: var(--ink-3); }

.sq-blk { position: fixed; inset: 0; background: rgba(30, 22, 12, .5); backdrop-filter: blur(3px); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .25s var(--ease); }
.sq-blk.on { opacity: 1; }
.sq-blk-card { max-width: 340px; width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 20px 22px 16px; text-align: center; transform: translateY(10px); transition: transform .3s var(--spring); }
.sq-blk.on .sq-blk-card { transform: none; }
.sq-blk-owl { display: flex; justify-content: center; margin-bottom: 8px; }
.sq-blk-t { font-size: 15px; font-weight: 800; color: var(--ink-strong); font-family: var(--font-display); margin-bottom: 7px; }
.sq-blk-m { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 14px; }
.sq-blk-acts { display: flex; gap: 9px; }
.sq-blk-acts .bb-a { flex: 1.4; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 10px 0; font-size: 13px; font-weight: 700; font-family: var(--font-ui); }
.sq-blk-acts .bb-b { flex: 1; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-pill); padding: 10px 0; font-size: 12.5px; font-family: var(--font-ui); }

.sq-post { max-width: 400px; width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 18px 20px 16px; box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.sqp-t { font-size: 14px; font-weight: 800; color: var(--ink-strong); margin-bottom: 12px; font-family: var(--font-display); }
.sqp-t b { color: var(--accent); }
.sqp-tpl-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sqp-tpl { border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-family: var(--font-ui); }
.sqp-tpl.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.sqp-in { box-sizing: border-box; width: 100%; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; color: var(--ink); font-family: var(--font-ui); outline: none; }   /* v2: box-sizing修复右端溢出卡片 */
.sqp-in:focus { border-color: var(--accent); }
.sqp-prev { font-size: 12.5px; color: var(--ink-2); margin: 8px 2px 12px; min-height: 17px; font-family: var(--font-ui); }
.sqp-tip { font-size: 10.5px; color: var(--ink-3); margin-bottom: 6px; }
.sqp-stk { display: flex; gap: 9px; margin-bottom: 14px; }
.sqp-stk-b { width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.sqp-stk-b .ic { width: 22px; height: 22px; }
.sqp-stk-b:active { transform: scale(.92); }
.sqp-send { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 11px 0; font-size: 14px; font-weight: 700; font-family: var(--font-ui); }
.sqp-send .ic { width: 15px; height: 15px; }
.sq-dot { width: 8px; height: 8px; border-radius: 50%; background: #E04B3A; display: inline-block; }
[data-theme="night"] .sq-item, [data-theme="night"] .sq-big, [data-theme="night"] .sq-post, [data-theme="night"] .sq-blk-card { box-shadow: none; }


/* ===== S3 Phase3 (20260829): 晚读弹幕雨 / 回声红点 ===== */
.sq-wall.rain { border-color: #C2914B; box-shadow: 0 0 24px rgba(194, 145, 75, .25) inset; }
[data-theme="night"] .sq-wall.rain { border-color: #E8B04B; }
.sq-wall.rain .sq-item { box-shadow: 0 2px 10px rgba(194, 145, 75, .18); }
.sq-wall.rain .sq-item.hot { box-shadow: 0 4px 20px rgba(194, 145, 75, .38); }
.sq-entry.has-echo::after { content: ''; position: absolute; right: 12px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #E04B3A; border: 2px solid var(--surface); }
.sq-entry { position: relative; }

/* ---- 学习档案导出打印 (20260830): page-head 按钮 + 弹层 ---- */
.ph-print { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--bg-2, rgba(127,127,127,.12)); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; }
.ph-print svg { width: 12px; height: 12px; }
[data-theme="night"] .ph-print { background: rgba(245,206,133,.08); }
.exp-mask { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,19,26,.52); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s var(--ease); }
.exp-mask.show { opacity: 1; }
.exp-mask[hidden] { display: none; }
.exp-sheet { position: relative; left: auto; right: auto; bottom: auto; width: min(92vw, 400px); max-width: 400px; max-height: 84vh; overflow-y: auto; transform: translateY(14px) scale(.96); opacity: 0; transition: transform .3s var(--spring), opacity .25s var(--ease); box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.exp-sheet.on { transform: none; opacity: 1; }
.exp-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink-3); }
.exp-x svg { width: 15px; height: 15px; }
.exp-sec { font-size: 10px; font-weight: 800; letter-spacing: 2.5px; color: var(--ink-3); margin: 10px 2px 6px; }
.exp-opts { display: flex; gap: 8px; }
.exp-opt { flex: 1; border: 1.5px solid var(--line); background: var(--bg-2, rgba(127,127,127,.08)); border-radius: 12px; padding: 9px 11px; text-align: left; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.exp-opt .exp-n { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.exp-opt.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.exp-opt.on .exp-n { color: var(--accent); opacity: .8; }
.exp-rng { display: flex; gap: 6px; }
.exp-r { flex: 1; border: 1.5px solid var(--line); background: transparent; border-radius: 10px; padding: 7.5px 0; font-size: 12px; color: var(--ink-2); }
.exp-r.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.exp-tip { display: flex; align-items: center; gap: 8px; margin-top: 11px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 11px; padding: 9px 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
.exp-tip button { margin-left: auto; flex: none; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.exp-go { width: 100%; margin-top: 11px; border: none; border-radius: 12px; padding: 11.5px 0; font-size: 14px; font-weight: 800; background: var(--accent); color: #fff; }
.exp-go:disabled { opacity: .4; }

/* ===== 注册协议勾选 + 我的页条款链接 (20260830) ===== */
.auth-agree { display: flex; align-items: flex-start; gap: 7px; margin: 12px 2px 0; font-size: 11px; color: var(--ink-3); line-height: 1.6; cursor: pointer; -webkit-user-select: none; user-select: none; }
.auth-agree input { flex: none; width: 15px; height: 15px; margin-top: 1px; accent-color: var(--accent); }
.auth-agree a { color: var(--accent); font-weight: 700; text-decoration: none; }
.me-link { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.me-link:last-child { border-bottom: none; }
.me-link svg { width: 14px; height: 14px; color: var(--ink-3); }

/* ===== 任务条左滑管理 (20260830): wrap 结构 + 红点 + 已读变淡 + 操作按钮 ===== */
.task-wrap { position: relative; border-bottom: 1px solid var(--line-strong); overflow: hidden; }   /* 20260831: 去卡面色, 与页面底色融为一体 */
.task-wrap .task-card { position: relative; z-index: 1; border-bottom: 0; transition: transform .25s ease; will-change: transform; }
.task-wrap .task-card.open { z-index: 2; }
.task-card .tk-dot { position: absolute; left: 12px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--hot, #E4572E); border: 1.5px solid var(--bg); z-index: 2; }   /* 20260831: 描边随页面底色 */
.task-wrap.read .task-card > * { opacity: .62; }   /* 20260831: 已读淡化只作用内容(文字图标), 底色不动 */
.task-wrap.acts-open .task-card { background: var(--bg); }   /* 20260831: 滑动/展开时卡片带页面同色底, 防操作按钮透过透明卡片混叠 */
.task-wrap .task-card.tk-finished { opacity: 1; }
.task-wrap .task-card.tk-finished > * { opacity: .55; }
.tk-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0; visibility: hidden; pointer-events: none; }
.task-wrap.acts-open .tk-acts { visibility: visible; pointer-events: auto; }
.tk-act { width: 64px; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #FFFCF4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-act.tk-read { background: var(--accent, #C0582F); }
.tk-act.tk-del { background: var(--hot, #E4572E); }
.tk-act:active { filter: brightness(.92); }

/* ===== 左滑手势提示行 (20260831): 用户会用后自动隐藏 ===== */
.tk-hint { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0 3px; font-size: 10px; color: var(--ink-3); opacity: .85; transition: opacity .3s; }
.tk-hint .tk-h-ic { width: 11px; height: 11px; flex: none; color: var(--ink-3); animation: tk-hint-nudge 2.4s ease-in-out infinite; }
@keyframes tk-hint-nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(-4px); } }
.tk-hint.fade { opacity: 0; }

/* ===== PWA 添加到主屏指引弹窗 (20260901) ===== */
.a2h-box { text-align: center; }
.a2h-stage { margin: 0 auto; width: 100%; max-width: 290px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.a2h-stage svg { display: block; width: 100%; height: auto; }
.a2h-frame { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.6; }
.a2h-url { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
.a2h-line { stroke: var(--line-strong); stroke-width: 2.4; stroke-linecap: round; }
.a2h-line.thin { stroke-width: 1.6; opacity: .55; }
.a2h-sep { stroke: var(--line); stroke-width: 1.2; }
.a2h-glyph { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.a2h-glyph.dim { opacity: .5; }
.a2h-glyph.acc { stroke: var(--accent); stroke-width: 2; }
.a2h-glyph.onacc { stroke: var(--on-accent); stroke-width: 1.8; stroke-linecap: round; }
.a2h-inkf { fill: var(--ink-2); }
.a2h-txt { font-family: var(--font-ui); font-size: 10px; fill: var(--ink-2); }
.a2h-txt.s { font-size: 7px; }
.a2h-tt { font-family: var(--font-ui); font-size: 11px; font-weight: 700; fill: var(--ink); }
.a2h-hitxt { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; fill: var(--on-accent); }
.a2h-hitxt.s { font-size: 7.5px; }
.a2h-glyphtxt { font-family: var(--font-display); font-size: 12px; font-weight: 700; fill: var(--on-accent); }
.a2h-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.a2h-icbg { fill: var(--line); }
.a2h-input { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
.a2h-hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.8; animation: a2hPulse 1.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.a2h-hirow { fill: var(--accent); }
.a2h-hiic { fill: var(--accent); }
.a2h-tap { fill: none; stroke: var(--accent); stroke-width: 1.8; animation: a2hTap 1.7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes a2hPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes a2hTap { 0% { transform: scale(.35); opacity: .95; } 75% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
.a2h-step-t { margin-top: 12px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.a2h-step-s { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.a2h-dots { margin-top: 10px; display: flex; gap: 6px; justify-content: center; }
.a2h-dot { width: 6px; height: 6px; border-radius: var(--r-pill); border: none; padding: 0; background: var(--line-strong); cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease); }
.a2h-dot.on { width: 18px; background: var(--accent); }
.a2h-benefit { margin-top: 12px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: 12px; font-weight: 700; color: var(--accent-deep); }
.a2h-btns { display: flex; gap: 10px; margin-top: 14px; }
.a2h-btns .btn { flex: 1; }
.ss-btn.done { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
[data-theme="night"] .a2h-stage { background: #232B36; }
[data-theme="night"] .a2h-frame { fill: #1A2230; stroke: #3A4656; }
[data-theme="night"] .a2h-panel { fill: #1A2230; stroke: #2C3644; }
[data-theme="night"] .a2h-url, [data-theme="night"] .a2h-input { fill: #232B36; stroke: #2C3644; }
[data-theme="night"] .a2h-icbg { fill: #2C3644; }
[data-theme="night"] .a2h-glyph { stroke: #8FA0B5; }
[data-theme="night"] .a2h-inkf { fill: #8FA0B5; }
[data-theme="night"] .a2h-txt { fill: #8FA0B5; }
[data-theme="night"] .a2h-tt { fill: #E6EBF2; }
[data-theme="night"] .a2h-benefit { color: #E8B04B; background: rgba(232,176,75,.12); }
/* ===== /PWA 添加到主屏指引 ===== */

/* ===== 首页搜索 (20260901) ===== */
.srch-row { display: flex; align-items: center; gap: 8px; margin: 10px var(--sp-4) 4px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); transition: border-color .2s var(--ease); }
.srch-row:focus-within { border-color: var(--accent); }
.srch-ic { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
#srchInput { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); }
#srchInput::placeholder { color: var(--ink-3); }
#srchInput::-webkit-search-cancel-button, #srchInput::-webkit-search-decoration { -webkit-appearance: none; }
.srch-clr { flex: none; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.srch-clr:active { transform: scale(.9); }
.srch-clr svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.srch-status { display: flex; align-items: center; gap: 6px; margin: 8px var(--sp-4) 2px; font-size: 12px; color: var(--ink-2); }
.srch-status b { color: var(--ink); font-weight: 800; }
.srch-hint { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.card-meta .srch-hit { color: var(--accent-deep); font-weight: 700; }
[data-theme="night"] .card-meta .srch-hit { color: #E8B04B; }
/* ===== /首页搜索 ===== */

/* ===== 文章收藏 (20260901) ===== */
/* 阅读页 meta 行收藏按钮: 与 分享/字号 同款 pill, 收藏后星形填充 */
.bm-mini { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-weight: 700; font-family: var(--font-ui); line-height: 1; white-space: nowrap; transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); }
.bm-mini .ic { width: 13px; height: 13px; stroke: var(--accent); fill: none; transition: fill .18s var(--ease); }
.bm-mini.on { color: var(--ink); border-color: var(--accent); }
.bm-mini.on .ic { fill: var(--accent); }
.bm-mini:active { transform: scale(.94); background: var(--accent-soft); }
[data-theme="night"] .bm-mini { background: rgba(255, 252, 244, .06); border-color: rgba(199, 179, 148, .35); }
[data-theme="night"] .bm-mini .ic { stroke: #E8B04B; }
[data-theme="night"] .bm-mini.on { border-color: rgba(232, 176, 75, .55); }
[data-theme="night"] .bm-mini.on .ic { fill: #E8B04B; }

/* 列表卡片标题行已收藏星标(与 已读/NEW 状态同区) */
.card-bm { flex: none; display: inline-flex; align-items: center; }
.card-bm svg { width: 13px; height: 13px; fill: var(--accent); }

/* 我的页「我的收藏」列表 */
.bm-head { cursor: pointer; }                                        /* 可收起: 同错题本交互 (20260901) */
.bm-head .bm-n { font-size: 10px; font-weight: 800; color: var(--accent-deep, #8A6D3B); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.bm-head .bm-chev { width: 13px; height: 13px; color: var(--ink-3); flex: none; transition: transform .22s ease; }
.me-card.open .bm-chev { transform: rotate(180deg); }

/* ===== 班级阅读榜 (20260901 批次4b): 入口按钮 + 居中弹层 ===== */
.me-class-row .cls-lb { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--accent-deep, #8A6D3B); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.me-class-row .cls-lb svg { width: 12px; height: 12px; }
.me-class-row .cls-lb:active { opacity: .7; }
.clb-box { text-align: center; }
.clb-rule { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 9px; letter-spacing: 3px; }
.clb-rule::before, .clb-rule::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.clb-ttl { margin: 10px 0 2px; font-family: var(--font-serif, Georgia, serif); font-size: 19px; color: var(--ink-strong); }
.clb-sub { font-size: 11.5px; color: var(--ink-3); margin: 0 0 12px; }
.clb-me { display: flex; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 10px 0; margin-bottom: 12px; }
.clb-me div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.clb-me b { font-size: 17px; font-variant-numeric: tabular-nums; }
.clb-me i { font-style: normal; font-size: 10px; color: var(--ink-3); }
.clb-list { max-height: 44vh; overflow: auto; text-align: left; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.clb-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); }
.clb-row + .clb-row { margin-top: 4px; }
.clb-row.me { background: var(--accent-soft); }
.clb-row.top1:not(.me) { background: linear-gradient(135deg, rgba(196,154,64,.10), transparent 60%); }
.clb-rank { flex: none; width: 22px; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.clb-rank.medal { color: var(--accent-deep, #8A6D3B); }
.clb-nm { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.clb-nm .clb-tag { font-style: normal; font-size: 9px; font-weight: 800; color: var(--surface); background: var(--accent-deep, #8A6D3B); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.clb-st { flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.clb-go { font-size: 12px; color: var(--accent-deep, #8A6D3B); font-weight: 700; margin: 10px 0 0; }
.clb-foot { font-size: 10.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.6; }
.clb-close { display: block; width: 100%; margin-top: 12px; border: 0; border-radius: var(--r-md); background: var(--ink-strong); color: #FFFCF4; font-size: 14px; font-weight: 800; padding: 12px 0; cursor: pointer; }
.clb-load { padding: 30px 0; font-size: 13px; color: var(--ink-3); }
.bm-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.bm-row:last-child { border-bottom: none; }
.bm-row:active { opacity: .6; }
.bm-row .badge { flex: none; }
.bm-main { flex: 1; min-width: 0; }
.bm-ttl { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bm-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-empty { font-size: 12px; color: var(--ink-3); line-height: 1.6; padding: 4px 0 2px; }
.bm-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bm-list::-webkit-scrollbar { width: 3px; }
.bm-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
[data-theme="night"] .bm-head .bm-n { color: #E8B04B; background: rgba(232, 176, 75, .14); }
[data-theme="night"] .card-bm svg { fill: #E8B04B; }
/* ===== /文章收藏 ===== */

/* ==== 巧币 (P0_POINTS_20261007) ==== */
.coin-card { background: linear-gradient(135deg,#fff7e6,#ffefd0); border: 1px solid #f5d98f; }
.coin-head { display: flex; justify-content: space-between; align-items: center; }
.coin-detail-link { color: #b8860b; font-size: 13px; font-weight: 600; padding: 4px 6px; }
.coin-main { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.coin-num { font-size: 34px; font-weight: 800; color: #8a5a00; font-variant-numeric: tabular-nums; }
.coin-unit { color: #b8860b; font-size: 14px; }
.coin-sub { display: flex; gap: 12px; font-size: 12px; color: #a08040; flex-wrap: wrap; }
.coin-guest, .coin-exempt { font-size: 14px; color: #8a6d3b; line-height: 1.7; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.coin-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; opacity: 0; transition: opacity .25s; display: flex; align-items: flex-end; justify-content: center; }
.coin-mask.show { opacity: 1; }
.coin-sheet { background: #fff; width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .25s; }
.coin-mask.show .coin-sheet { transform: translateY(0); }
.coin-sh-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 10px; }
.coin-x { color: #999; font-size: 18px; padding: 6px 10px; cursor: pointer; }
.coin-sh-bal { background: #fff7e6; border-radius: 10px; padding: 10px 12px; color: #8a5a00; font-size: 14px; margin-bottom: 10px; }
.coin-sh-bal b { font-size: 22px; }
.coin-sh-bal i { font-style: normal; color: #a08040; font-size: 12px; }
.coin-sec { margin-bottom: 14px; }
.coin-sec-t { font-size: 13px; font-weight: 700; color: #666; margin-bottom: 6px; }
.coin-earn, .coin-spend { display: flex; flex-wrap: wrap; gap: 6px; }
.coin-earn span, .coin-spend span { background: #f6f8fb; border-radius: 8px; padding: 5px 9px; font-size: 12px; color: #444; }
.coin-tip { font-size: 12px; color: #b8860b; margin-top: 6px; }
.coin-rd-row { display: flex; gap: 8px; }
.coin-input { flex: 1; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-size: 15px; text-transform: uppercase; min-height: 44px; }
.coin-rd-msg { font-size: 13px; color: #2e7d32; margin-top: 6px; min-height: 18px; }
.coin-hist { max-height: 200px; overflow-y: auto; }
.coin-hitem { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
.coin-hitem .up { color: #2e7d32; font-weight: 700; min-width: 36px; }
.coin-hitem .down { color: #c62828; font-weight: 700; min-width: 36px; }
.coin-hitem .hn { flex: 1; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-hitem .ht { color: #aaa; font-size: 12px; }
.coin-hint { color: #aaa; font-size: 13px; padding: 10px 0; text-align: center; }
.coin-unlock { background: linear-gradient(135deg,#ffb300,#ff8f00) !important; color: #fff !important; border: none !important; width: 100%; margin-top: 10px; min-height: 44px; }