/* ============================================================
   考研阅读器 —— 长时间阅读优先：暖纸底、低对比正文、细下划线分级
   ============================================================ */
:root{
  /* 纸 */
  --bg:#f3f0e9; --card:#fbf9f4; --fg:#26231d; --fg-soft:#4a453c; --muted:#837c6e;
  --line:#e2ddd1; --line-soft:#ece7dc;
  --accent:#8a5f38; --accent-soft:#f0e8dc; --accent-ink:#6d4a2a;

  /* 词汇分级：只用下划线，不用底色 */
  --lv1:#a39a88;                 /* 六级 */
  --lv2:#4e7f92;                 /* 考研 */
  --lv3:#a9764c;                 /* 超纲 */

  /* 手动标记：少量，允许用底色 */
  --new:#b4503a;    --new-bg:rgba(180,80,58,.11);
  --learn:#9d7b24;  --learn-bg:rgba(157,123,36,.13);
  --known:#5f8a4c;

  /* 排版尺度：整套界面只用这几档字号，避免每处各写一个数
     小字给更大的行距 —— 字越小越难解析，需要更多喘息空间 */
  --t-xs:11.5px;  --lh-xs:1.75;
  --t-sm:12.5px;  --lh-sm:1.8;
  --t-md:13.5px;  --lh-md:1.75;
  --t-lg:15px;    --lh-lg:1.7;
  --t-xl:17px;    --lh-xl:1.6;
  /* 留白尺度 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;

  --radius:11px;
  --read-size:19px;
  --read-lh:1.95;
  --topbar-h:49px;
  --tool-h:44px;
  color-scheme:light dark;     /* 让下拉框、复选框这些原生控件跟随深浅色 */
}
/* 夜间配色。比原来更深，适合关灯看；纸感保留一点暖调，纯黑反而刺眼 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17151a; --card:#1e1c22; --fg:#ddd8ce; --fg-soft:#bdb7ac; --muted:#8b8478;
    --line:#302d36; --line-soft:#272430;
    --accent:#c39a6b; --accent-soft:#2a2520; --accent-ink:#d6b088;
    --lv1:#7a7466;
    --lv2:#7aa7b8;
    --lv3:#c2946a;
    --new:#d9705c;   --new-bg:rgba(217,112,92,.15);
    --learn:#c9a447; --learn-bg:rgba(201,164,71,.15);
    --known:#8cbb76;
  }
}

/* 手动选「暗」时，无论系统是什么都用这套 */
:root[data-theme="dark"]{
  --bg:#0f0e12; --card:#16151a; --fg:#ddd8ce; --fg-soft:#bdb7ac; --muted:#8b8478;
  --line:#282630; --line-soft:#201e28;
  --accent:#c39a6b; --accent-soft:#241f1a; --accent-ink:#d6b088;
  --lv1:#736d60; --lv2:#7aa7b8; --lv3:#c2946a;
  --new:#d9705c;   --new-bg:rgba(217,112,92,.15);
  --learn:#c9a447; --learn-bg:rgba(201,164,71,.15);
  --known:#8cbb76;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  letter-spacing:.005em;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h2{font-size:var(--t-md); margin:0 0 var(--sp-3); font-weight:650;
   color:var(--muted); letter-spacing:.06em; text-transform:none}

button,.btn,select,input,textarea{font:inherit; color:inherit; touch-action:manipulation}
button,.btn{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:7px 13px; cursor:pointer; text-decoration:none; display:inline-block;
  transition:border-color .14s, background .14s, transform .06s;
  -webkit-tap-highlight-color:transparent;
}
button:hover,.btn:hover{border-color:var(--accent)}
button:active,.btn:active{transform:scale(.97)}
button:disabled{opacity:.5; cursor:default; transform:none}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
input,textarea,select{
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; width:100%; margin-bottom:9px;
}
textarea{resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Cascadia Mono",monospace; font-size:13px; line-height:1.55}
select{width:auto; margin:0; padding:5px 8px; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.row{display:flex; gap:9px; align-items:center}
.row.wrap{flex-wrap:wrap}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  height:var(--topbar-h); padding:0 16px; padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:650; letter-spacing:.2px; white-space:nowrap}
.tabs{display:flex; gap:2px; background:var(--bg); border-radius:9px; padding:3px}
.tab{border:none; background:none; padding:5px 13px; border-radius:7px; font-size:13.5px; color:var(--muted)}
.tab.active{background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stats{margin-left:auto; font-size:12.5px; color:var(--muted); white-space:nowrap}
.stats b{color:var(--fg-soft); font-weight:600}

/* ---------- 视图 ---------- */
.view{display:none; max-width:1180px; margin:0 auto; padding:18px 16px 60px}
.view.active{display:block}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:var(--sp-4) var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5)}

/* ---------- 书架 ---------- */
.list{display:flex; flex-direction:column; gap:12px}
/* 分组头改成一条轻标签，不再是整块色条 —— 色块太重会跟正文抢注意力 */
.group{border-radius:10px; overflow:hidden; background:var(--card);
       border:1px solid var(--line)}
.ghead{display:flex; align-items:baseline; gap:10px; padding:11px 14px 9px;
       border-bottom:1px solid var(--line-soft)}
.gname{font-weight:600; font-size:13px; color:var(--accent-ink); letter-spacing:.02em}
.gmeta{margin-left:auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.item{padding:10px 14px; display:flex; align-items:center; gap:12px; cursor:pointer;
      border-bottom:1px solid var(--line-soft); transition:background .12s}
.group .item:last-child{border-bottom:none}
.item:hover{background:var(--accent-soft)}
.item:active{background:var(--accent-soft)}
.item .t{font-weight:550; font-size:14.5px}
.item .m{color:var(--muted); font-size:var(--t-sm); margin-left:auto; white-space:nowrap;
         font-variant-numeric:tabular-nums; letter-spacing:.01em}
.item .del{opacity:.3; padding:2px 7px; border:none; background:none; font-size:13px}
.item .del:hover{opacity:1; color:var(--new)}
.empty{color:var(--muted); text-align:center; padding:26px 0; display:block}

.fold summary{cursor:pointer; font-size:15px; font-weight:600; list-style:none;
              display:flex; align-items:center; gap:7px}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"＋"; color:var(--accent); font-weight:400}
.fold[open] summary::before{content:"－"}
.foldbody{padding-top:14px}
.hint{font-size:12.5px; color:var(--muted); margin:10px 0 0; line-height:1.75}
.hint code{background:var(--bg); border:1px solid var(--line); border-radius:5px;
           padding:1px 6px; font-size:12px; font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 阅读工具条 ---------- */
.reader-toolbar{
  position:sticky; top:var(--topbar-h); z-index:20; display:flex; align-items:center;
  gap:12px; flex-wrap:wrap; min-height:var(--tool-h); padding:7px 16px;
  max-width:1180px; margin:0 auto;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.rtitle{font-weight:600; margin-right:auto; overflow:hidden; text-overflow:ellipsis;
        white-space:nowrap; max-width:34%}
.ctl{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap}
.ctl input{width:auto; margin:0}
input[type=checkbox]{accent-color:var(--accent); width:15px; height:15px}
.reader-toolbar button{padding:5px 11px; font-size:13px}

/* 翻译进度条 */
.progress{position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent);
          width:0; transition:width .3s ease; border-radius:1px}

/* ---------- 词汇分布条 ---------- */
.vocabbar{
  max-width:1180px; margin:14px auto -4px; padding:0 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.vb{display:flex; align-items:center; gap:5px; cursor:default}
.vb i{width:16px; height:0; border-bottom-width:2px; border-bottom-style:solid; display:inline-block}
.vb.l1 i{border-color:var(--lv1); border-bottom-style:dotted}
.vb.l2 i{border-color:var(--lv2)}
.vb.l3 i{border-color:var(--lv3); border-bottom-style:dashed}
.vb.done i{border-color:var(--known)}
.vb b{color:var(--fg-soft); font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- 正文 ---------- */
.reader-wrap{display:flex; gap:22px; max-width:1180px; margin:0 auto; padding:16px}
.article{
  flex:1; min-width:0; font-size:var(--read-size); line-height:var(--read-lh);
  font-family:Georgia,Cambria,"Times New Roman","Noto Serif","Songti SC","Source Han Serif SC",serif;
  color:var(--fg-soft); letter-spacing:.01em;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 34px;
}
.article p{margin:0 0 1.15em}
.article p:last-child{margin-bottom:0}
.sent{border-radius:3px}
.sent.on{background:var(--accent-soft)}

.w{cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:2px;
   text-decoration-skip-ink:none; transition:background .1s}
.w:hover{background:var(--accent-soft)}
.w:active{background:var(--accent-soft)}
/* 分级：只用下划线，密度高也不刺眼 */
.w.l1{text-decoration:underline dotted var(--lv1); text-decoration-thickness:1px; text-underline-offset:4px}
.w.l2{text-decoration:underline solid  var(--lv2); text-decoration-thickness:1px; text-underline-offset:4px}
.w.l3{text-decoration:underline dashed var(--lv3); text-decoration-thickness:1px; text-underline-offset:4px}
/* 手动标记：数量少，用底色让它跳出来 */
.w.s1{background:var(--new-bg);   text-decoration:underline solid var(--new);   text-decoration-thickness:2px; text-underline-offset:3px}
.w.s2{background:var(--learn-bg); text-decoration:underline solid var(--learn); text-decoration-thickness:2px; text-underline-offset:3px}
.w.s3{background:none; text-decoration:none}
.w.cur{background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent)}

.zh{
  display:block; font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:.76em; line-height:1.7; color:var(--muted);
  border-left:2px solid var(--line); padding-left:10px; margin:6px 0 10px;
}
.zh.loading{opacity:.55; font-style:italic}
.skeleton{display:block; height:1em; margin:6px 0 10px; border-radius:4px;
          background:linear-gradient(90deg,var(--line-soft),var(--line),var(--line-soft));
          background-size:200% 100%; animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- 词典面板 ---------- */
.panel{
  width:335px; flex:none; position:sticky; top:calc(var(--topbar-h) + var(--tool-h) + 14px);
  align-self:flex-start; max-height:calc(100vh - var(--topbar-h) - var(--tool-h) - 34px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
}
.panel-empty{color:var(--muted); font-size:13px; text-align:center; padding:30px 8px; line-height:2}
.hw{font-size:25px; font-weight:650; font-family:Georgia,Cambria,"Noto Serif",serif; color:var(--fg);
    margin-bottom:2px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.hw .spk{font-size:15px; cursor:pointer; opacity:.45; border:none; background:none; padding:2px 4px}
.hw .spk:hover{opacity:1}
.ph{color:var(--muted); font-size:13px; font-family:Georgia,Cambria,"Noto Serif",serif; margin-bottom:10px}
.tagline{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px}
.tg{font-size:11px; padding:2px 7px; border-radius:5px; background:var(--bg);
    border:1px solid var(--line); color:var(--muted)}
.tg.lv{font-weight:600}
.tg.lv1{color:var(--lv1); border-color:var(--lv1)}
.tg.lv2{color:var(--lv2); border-color:var(--lv2)}
.tg.lv3{color:var(--lv3); border-color:var(--lv3)}
.tr{white-space:pre-wrap; margin-bottom:var(--sp-3); font-size:14.5px;
    line-height:1.85; color:var(--fg)}
.def{white-space:pre-wrap; color:var(--muted); font-size:12.5px;
     border-top:1px dashed var(--line); padding-top:9px; margin-bottom:10px}
.inflect{font-size:12.5px; color:var(--muted); background:var(--bg);
         border-radius:6px; padding:6px 9px; margin-bottom:10px}
.statusbtns{display:flex; gap:6px; margin:12px 0}
.statusbtns button{flex:1; padding:7px 0; font-size:12.5px; text-align:center}
.statusbtns button.on[data-s="1"]{background:var(--new); border-color:var(--new); color:#fff}
.statusbtns button.on[data-s="2"]{background:var(--learn); border-color:var(--learn); color:#fff}
.statusbtns button.on[data-s="3"]{background:var(--known); border-color:var(--known); color:#fff}
.pctx{border-top:1px solid var(--line); margin-top:12px; padding-top:12px}
.pctx .s{font-family:Georgia,Cambria,"Noto Serif",serif; font-size:13.5px; line-height:1.75; margin-bottom:10px; color:var(--fg-soft)}
.pctx .s em{background:var(--accent-soft); font-style:normal; border-radius:2px; padding:0 2px}
.pzh{font-size:13px; color:var(--muted); line-height:1.8; margin-bottom:9px; white-space:pre-wrap}
.analysis{font-size:13px; line-height:1.85; margin-top:10px;
          border-top:1px dashed var(--line); padding-top:10px; color:var(--fg-soft)}
.analysis strong{color:var(--accent-ink)}
.analysis p{margin:0 0 .55em}
.spin{display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px;
      border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%;
      animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 生词本 ---------- */
.vitem{background:var(--card); padding:12px 13px; border-bottom:1px solid var(--line-soft)}
.vitem:last-child{border-bottom:none}
.vitem .vh{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.vitem .vw{font-family:Georgia,Cambria,"Noto Serif",serif; font-size:17px; font-weight:600; color:var(--fg)}
.vitem .vp{color:var(--muted); font-size:12px; font-family:Georgia,Cambria,"Noto Serif",serif}
.vitem .vt{font-size:13.5px; color:var(--muted); margin-top:3px; white-space:pre-wrap}
.vitem .vc{font-size:12.5px; font-family:Georgia,Cambria,"Noto Serif",serif; color:var(--muted); margin-top:6px;
           padding-left:9px; border-left:2px solid var(--line)}
.dot{width:7px; height:7px; border-radius:50%; flex:none}
.dot.s1{background:var(--new)} .dot.s2{background:var(--learn)} .dot.s3{background:var(--known)}
#vocab-list{background:var(--card); border:1px solid var(--line); border-radius:9px; overflow:hidden; display:block}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--fg); color:var(--card); padding:9px 17px; border-radius:20px;
  font-size:13px; opacity:0; pointer-events:none; transition:.22s; z-index:100; max-width:80vw;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- 手机 ---------- */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none;
          transition:opacity .22s; z-index:35; backdrop-filter:blur(1px)}
@media (max-width:820px){
  :root{--read-size:18px; --read-lh:1.9; --topbar-h:45px; --tool-h:40px}
  .topbar{gap:9px; padding:0 12px}
  .brand{display:none}
  .stats{font-size:11.5px}
  .reader-toolbar{padding:6px 12px; gap:9px}
  .reader-toolbar button{padding:4px 9px; font-size:12.5px}
  .ctl{font-size:12px}
  .rtitle{max-width:100%; width:100%}
  .vocabbar{margin:10px auto -6px; padding:0 12px; gap:10px; font-size:12px}
  .reader-wrap{flex-direction:column; padding:12px; gap:0}
  .article{padding:20px 18px}
  .view{padding:12px 12px 60px}
  .backdrop.on{opacity:1; pointer-events:auto}
  .panel{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    max-height:66vh; border-radius:16px 16px 0 0; z-index:40;
    border:1px solid var(--line); border-bottom:none;
    box-shadow:0 -8px 34px rgba(0,0,0,.24);
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .24s cubic-bezier(.32,.72,0,1);
  }
  .panel.open{transform:translateY(0)}
  .panel .panel-empty{display:none}
  .closebar{position:sticky; top:-16px; margin:-16px -16px 6px; padding:10px 16px 8px;
            background:var(--card); display:flex; justify-content:center; cursor:pointer}
  .closebar::before{content:""; width:38px; height:4px; border-radius:2px; background:var(--line)}
  .statusbtns button{padding:9px 0}
}
@media (min-width:821px){ .closebar{display:none} .backdrop{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- 词典卡：语境词义 / 关闭按钮 ---------- */
.maincol{flex:1; min-width:0}
.pclose{
  position:absolute; top:10px; right:12px; border:none; background:none;
  color:var(--muted); font-size:15px; padding:4px 7px; border-radius:6px; line-height:1;
}
.pclose:hover{background:var(--bg); color:var(--fg); border:none}
.sense{
  font-size:14px; line-height:1.7; color:var(--fg);
  background:var(--accent-soft); border-radius:8px; padding:9px 11px; margin-bottom:11px;
}
.sense:empty{display:none}
.sense b{
  display:inline-block; font-size:11px; font-weight:600; color:var(--accent-ink);
  background:var(--card); border-radius:4px; padding:1px 6px; margin-right:7px; vertical-align:1px;
}
.endef{font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); padding-top:8px; margin-bottom:10px}
.endef summary{cursor:pointer; list-style:none}
.endef summary::-webkit-details-marker{display:none}
.endef summary::before{content:"▸ "; color:var(--accent)}
.endef[open] summary::before{content:"▾ "}
.endef>div{white-space:pre-wrap; padding-top:6px}
.vb.prep{color:var(--accent-ink)}

/* ---------- 参考译文 ---------- */
.reftext{white-space:pre-wrap; line-height:1.95; font-size:14.5px; color:var(--fg-soft)}

/* ---------- 做题 ---------- */
.qscore{margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:400}
.fold summary{position:relative}
.qitem{padding:14px 0; border-bottom:1px solid var(--line-soft)}
.qitem:last-child{border-bottom:none}
.qstem{font-size:14.5px; line-height:1.75; margin-bottom:10px}
.qstem b{color:var(--accent-ink); margin-right:4px}
.qopts{display:flex; flex-direction:column; gap:6px}
.qopt{
  text-align:left; padding:8px 11px; font-size:13.5px; line-height:1.6;
  display:flex; gap:9px; align-items:flex-start; background:var(--bg);
}
.qopt:disabled{opacity:1}
.ql{font-weight:600; color:var(--muted); flex:none; width:14px}
.qopt.right{background:rgba(95,138,76,.14); border-color:var(--known)}
.qopt.right .ql{color:var(--known)}
.qopt.wrong{background:var(--new-bg); border-color:var(--new)}
.qopt.wrong .ql{color:var(--new)}
.qres{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:13px}
.qres.ok{color:var(--known)}
.qres.no{color:var(--new)}
.qwhy{margin-left:auto; padding:4px 10px; font-size:12.5px}
.qexp{
  margin-top:10px; font-size:13px; line-height:1.85; color:var(--fg-soft);
  background:var(--bg); border-radius:8px; padding:11px 13px;
}
.qexp:empty{display:none}
.qexp strong{color:var(--accent-ink)}
.qexp p{margin:0 0 .5em}
.qexp p:last-child{margin-bottom:0}
@media (max-width:820px){
  .pclose{display:none}
  .qopt{font-size:13px}
}

/* 语境词义未查询时的按钮态 */
.sense.ask{background:none; padding:0; margin:-2px 0 12px}
/* 这是兜底功能，不该抢基本释义的注意力，所以做成一行安静的次要按钮 */
.askbtn{
  width:auto; text-align:left; font-size:12.5px; color:var(--muted);
  background:none; border:none; border-bottom:1px dashed var(--line);
  padding:2px 0; border-radius:0;
}
.askbtn:hover{color:var(--accent-ink); border-bottom-color:var(--accent); background:none}
.askbtn::before{content:"？"; margin-right:5px; opacity:.5}

/* 复合词拆分展示 */
.part{border-top:1px dashed var(--line); padding-top:9px; margin-top:9px}
.part:first-of-type{border-top:none; margin-top:0}
.parthead{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
          font-family:Georgia,Cambria,"Noto Serif",serif; font-size:17px; font-weight:600; color:var(--fg); margin-bottom:4px}
.parthead .ph{margin:0; font-size:12px}
.part .tr{font-size:13.5px; margin-bottom:0}

/* ---------- 设置页 ---------- */
.flabel{display:block; font-size:12.5px; color:var(--muted); margin:12px 0 5px; font-weight:600}
.flabel:first-of-type{margin-top:0}
#view-settings select{width:100%}
.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13.5px; align-items:baseline}
.kv span{color:var(--muted)}
.kv b{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}

/* 四个 tab 之后顶栏更挤了，别让标签换行 */
.tab{white-space:nowrap}
.tabs{flex:none}
@media (max-width:820px){
  .topbar{gap:7px; padding:0 10px}
  .tab{padding:5px 9px; font-size:13px}
  .stats{font-size:11px}
}
@media (max-width:400px){
  .stats{display:none}          /* 太窄就先让位给导航 */
  .tab{padding:5px 8px}
}

/* 新版本提示条 */
.updatebar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px; z-index:120;
  background:var(--fg); color:var(--card);
  padding:9px 11px 9px 17px; border-radius:22px; font-size:13.5px;
  box-shadow:0 6px 22px rgba(0,0,0,.25); max-width:88vw;
}
.updatebar button{
  background:var(--card); color:var(--fg); border:none;
  padding:5px 13px; border-radius:16px; font-size:13px; white-space:nowrap;
}

/* ---------- 可点区域：手指需要 44px，键盘需要看得见焦点 ---------- */
/* 删除按钮原来只有 24×25，就贴在整行可点区里，很容易误触到删除 */
.item .del{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  padding:0; margin:-8px -4px -8px 0; flex:none; font-size:14px;
}
.tab{min-height:40px; display:inline-flex; align-items:center}
.statusbtns button{min-height:40px}
.reader-toolbar button, .reader-toolbar select{min-height:36px}
@media (max-width:820px){
  .item{padding-top:13px; padding-bottom:13px}      /* 行高够了手指才好点 */
  .reader-toolbar button, .reader-toolbar select{min-height:38px}
}
/* 键盘焦点必须看得见，否则只能靠鼠标用 */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, .w:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---------- 生词本每行的操作 ---------- */
.vact{margin-left:auto; display:flex; align-items:center; gap:6px; flex:none}
.vstatus{font-size:12px; padding:4px 6px; min-height:32px}
.vdel{
  width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--muted); font-size:13px; opacity:.45;
}
.vdel:hover{opacity:1; color:var(--new); background:var(--bg); border:none}
.toast-act{
  margin-left:12px; background:none; border:1px solid rgba(255,255,255,.35);
  color:inherit; padding:3px 11px; border-radius:14px; font-size:12.5px;
}
.toast-act:hover{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.55)}

/* ---------- 书架卷种切换 ---------- */
.shelfhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.shelfhead h2{margin:0}
/* 分类切换：横向可滚，绝不挤压。
   原来用 flex:1 平分，标签一多就把「英语二」压成三行竖排。 */
.seg{
  display:flex; gap:2px; margin-left:auto; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:3px;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.seg::-webkit-scrollbar{display:none}
.segbtn{
  border:none; background:none; padding:6px 13px; border-radius:8px;
  font-size:13px; color:var(--muted); white-space:nowrap; flex:none;
  display:inline-flex; align-items:baseline; gap:5px; min-height:34px;
  transition:background .15s, color .15s;
}
.segbtn.on{background:var(--card); color:var(--fg); font-weight:600;
           box-shadow:0 1px 2px rgba(0,0,0,.06)}
.segn{font-size:11px; opacity:.5; font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .shelfhead{gap:10px}
  .seg{margin-left:0; width:100%}
}

/* 生词本搜索框 */
#vocab-search{
  width:auto; flex:1; min-width:120px; max-width:220px; margin:0;
  padding:6px 11px; font-size:13px; min-height:34px;
}
@media (max-width:820px){
  #vocab-search{max-width:none; flex:1 1 100%}
}

/* ---------- 做题成绩汇总 ---------- */
.qsum{border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-top:14px; background:var(--bg)}
.qsum.good{border-color:var(--known); background:rgba(95,138,76,.08)}
.qsum.mid{border-color:var(--learn); background:var(--learn-bg)}
.qsum.low{border-color:var(--new); background:var(--new-bg)}
.qsumhead{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.qsumscore{font-size:27px; font-weight:650; font-family:Georgia,Cambria,serif; line-height:1;
           font-variant-numeric:tabular-nums}
.qsum.good .qsumscore{color:var(--known)}
.qsum.mid .qsumscore{color:var(--learn)}
.qsum.low .qsumscore{color:var(--new)}
.qsumtotal{font-size:16px; opacity:.55; font-weight:400}
.qsumtext{font-size:13.5px; color:var(--fg-soft)}
#quiz-reset{margin-left:auto; font-size:12.5px; padding:6px 12px; min-height:34px}

/* ---------- 阅读时收起顶部控件，把屏幕让给正文 ---------- */
.topbar, .reader-toolbar, .vocabbar{
  transition:transform .22s ease, opacity .22s ease;
}
body.chrome-hidden .topbar{transform:translateY(-100%)}
body.chrome-hidden .reader-toolbar{transform:translateY(calc(-1 * var(--topbar-h) - 100%)); opacity:0; pointer-events:none}
body.chrome-hidden .vocabbar{opacity:0; height:0; margin:0; overflow:hidden; pointer-events:none}

/* 词汇分布条压成一行，别再换行占两行 */
.vocabbar{row-gap:4px}
@media (max-width:820px){
  .vocabbar{gap:9px; font-size:11.5px; flex-wrap:nowrap; overflow-x:auto;
            -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .vocabbar::-webkit-scrollbar{display:none}
  .vb{flex:none}
  /* 工具栏两行压成一行：控件更紧凑 */
  .reader-toolbar{gap:7px; padding:5px 12px}
  .reader-toolbar button{padding:4px 8px; font-size:12px; min-height:34px}
  .reader-toolbar select{padding:4px 6px; font-size:12px; min-height:34px}
  .ctl{font-size:11.5px; gap:4px}
  .rtitle{font-size:14px}
}

/* ---------- 首次引导 ---------- */
.guide{
  position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end;
  justify-content:center; padding:18px;
  background:rgba(20,17,12,.34); backdrop-filter:blur(2px);
  animation:guidein .28s ease;
}
@keyframes guidein{from{opacity:0}to{opacity:1}}
.guidecard{
  width:min(100%,420px); background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px;
  box-shadow:0 16px 44px rgba(0,0,0,.22);
  animation:guideup .3s cubic-bezier(.32,.72,0,1);
}
@keyframes guideup{from{transform:translateY(14px)}to{transform:translateY(0)}}
.guidedots{display:flex; gap:5px; margin-bottom:16px}
.guidedots i{width:16px; height:3px; border-radius:2px; background:var(--line); transition:.24s}
.guidedots i.on{background:var(--accent); width:26px}
.guidecard h3{margin:0 0 7px; font-size:17px; font-weight:650; color:var(--fg)}
.guidecard p{margin:0 0 18px; font-size:14px; line-height:1.85; color:var(--muted)}
.guideact{display:flex; align-items:center; gap:10px}
.guideact .ghost{border:none; background:none; color:var(--muted); font-size:13.5px; padding:8px 6px}
.guideact .ghost:hover{color:var(--fg); background:none}
.guideact .primary{margin-left:auto; padding:9px 20px; border-radius:10px}
@media (min-width:821px){ .guide{align-items:center} }

/* 长按整句翻译：按住时整句轻微高亮，让人知道选中的是哪一句 */
.sent.holding{background:var(--accent-soft); border-radius:4px}
/* 长按期间别让系统弹出选词菜单，那会打断手势 */
.article{-webkit-touch-callout:none}

/* 划词后浮出的「查词组」按钮 */
.phrasebtn{
  position:fixed; z-index:60; max-width:200px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  background:var(--fg); color:var(--card); border:none;
  padding:8px 14px; border-radius:18px; font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.phrasebtn:active{transform:scale(.96)}

/* 行尾的「⋯」和它的菜单 */
.item .more{
  width:34px; height:34px; padding:0; flex:none; margin:-6px -6px -6px 0;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--muted); font-size:16px;
  opacity:.4; letter-spacing:1px; border-radius:8px;
}
.item .more:hover{opacity:1; background:var(--bg); border:none}
.rowmenu{
  position:fixed; z-index:120; min-width:130px; padding:5px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:1px;
}
.rowmenu button{
  border:none; background:none; text-align:left; padding:9px 12px;
  border-radius:7px; font-size:13.5px; min-height:38px;
}
.rowmenu button:hover{background:var(--bg); border:none}
.rowmenu .danger{color:var(--new)}

/* ---------- 背诵 ----------
   全屏、单卡、大留白。复习时屏幕上只该有一个词和两个选择，
   任何多余的东西都在分散注意力。 */
/* 注意：写了 display:flex 就会盖过浏览器给 [hidden] 的 display:none，
   于是这层空的覆盖层会一直铺在最上面，整个应用变成一片空白。
   凡是给带 hidden 的元素设 display，都必须补这一条。 */
.review[hidden]{display:none}
.review{
  position:fixed; inset:0; z-index:180; background:var(--bg);
  display:flex; flex-direction:column;
  padding:0 20px max(24px,env(safe-area-inset-bottom));
  padding-top:max(12px,env(safe-area-inset-top));
}
body.reviewing{overflow:hidden}

.rvbar{display:flex; align-items:center; gap:14px; height:46px; flex:none}
.rvclose{
  width:36px; height:36px; padding:0; flex:none; border:none; background:none;
  color:var(--muted); font-size:15px; border-radius:9px;
}
.rvclose:hover{background:var(--card); color:var(--fg); border:none}
.rvprog{flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.rvprog i{display:block; height:100%; background:var(--accent);
          border-radius:2px; transition:width .3s ease}
.rvcount{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}

.rvcard{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; gap:12px; cursor:pointer;
  padding:20px 0; min-height:0; overflow-y:auto;
}
.rvword{
  font-family:Georgia,Cambria,"Noto Serif",serif;
  font-size:clamp(30px,8vw,46px); font-weight:650; color:var(--fg);
  letter-spacing:-.01em; display:flex; align-items:center; gap:12px;
}
.rvword .spk{font-size:17px; opacity:.35; border:none; background:none; padding:4px}
.rvword .spk:hover{opacity:1; background:none}
.rvph{font-family:Georgia,serif; font-size:15px; color:var(--muted)}
.rvhint{font-size:13px; color:var(--muted); opacity:.7; margin-top:20px}

.rvmean{
  font-size:17px; line-height:1.9; color:var(--fg-soft); max-width:30em;
  white-space:pre-wrap; margin-top:6px;
  animation:rvin .26s ease;
}
.rvctx{
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:14.5px; line-height:1.9;
  color:var(--muted); max-width:32em; margin-top:8px; padding-top:14px;
  border-top:1px solid var(--line); animation:rvin .3s ease;
}
.rvctx em{font-style:normal; color:var(--accent-ink); font-weight:600;
          background:var(--accent-soft); border-radius:3px; padding:0 3px}
.rvsrc{display:block; margin-top:8px; font-family:-apple-system,sans-serif;
       font-size:11.5px; opacity:.6}
@keyframes rvin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.rvact{display:flex; gap:11px; flex:none; padding-top:8px}
.rvact button{flex:1; min-height:52px; font-size:15px; border-radius:12px}
.rvflip{background:var(--card)}
.rvyes{background:var(--known); border-color:var(--known); color:#fff; font-weight:600}
.rvno{background:var(--card); border-color:var(--line); color:var(--fg-soft)}

.rvdone{flex:1; display:flex; flex-direction:column; justify-content:center;
        align-items:center; text-align:center; gap:14px}
.rvscore{font-family:Georgia,Cambria,serif; font-size:56px; font-weight:650;
         color:var(--known); line-height:1; font-variant-numeric:tabular-nums}
.rvscore span{font-size:26px; opacity:.5; font-weight:400}
.rvdone p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.9; max-width:24em}
.rvexit{margin-top:16px; min-width:160px; min-height:48px; border-radius:12px}

#btn-review{min-height:34px; font-size:13px; padding:6px 14px}

/* ---------- 工艺细节 ---------- */
/* 人眼感知的中心比几何中心高约 8%，纯居中会显得偏下。
   复习卡内容整体上移一点，看起来才是"正中"。 */
.rvcard{padding-bottom:8vh}

/* 发音图标改成线性 SVG：彩色 emoji 会破坏衬线字的克制感 */
.spk svg{display:block}
.spk{
  color:var(--muted); display:inline-flex; align-items:center;
  border:none; background:none; padding:5px; border-radius:7px;
  transition:color .15s, background .15s;
}
.spk:hover{color:var(--accent-ink); background:var(--bg); border:none}
.rvword .spk{font-size:.5em; opacity:.5}
.rvword .spk:hover{opacity:1; background:none}
.hw .spk{font-size:16px}

/* 全局保险：任何带 hidden 的元素都必须真的隐藏。
   曾经因为 .review{display:flex} 盖过了 [hidden] 的 display:none，
   一层空的全屏覆盖层把整个应用遮成了空白。 */
[hidden]{display:none !important}

/* ============================================================
   视觉母题：下划线
   这个应用做的事就是「在文字下面画线标记意义」——
   六级点线、考研实线、生僻虚线。这套语言是它独有的，
   所以加载、空状态、进度、标题都用同一套语言表达，
   而不是随便找个转圈图标或灰字了事。
   ============================================================ */

/* ---------- 加载：一条正在扫过的线，不是转圈 ---------- */
.scanline{
  display:inline-block; width:44px; height:2px; position:relative;
  background:var(--line); border-radius:1px; overflow:hidden;
  vertical-align:middle;
}
.scanline::after{
  content:""; position:absolute; inset:0; width:40%;
  background:var(--lv2); border-radius:1px;
  animation:scan 1.15s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}

/* ---------- 区块标题：底下一条短线，呼应正文的标注 ---------- */
h2{position:relative; padding-bottom:9px}
h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:22px; height:2px; background:var(--accent); border-radius:1px;
  opacity:.75;
}

/* ---------- 空状态：一条渐渐消失的线，比一句灰字有表情 ---------- */
.blank{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:38px 20px; text-align:center;
}
.blank .line{
  width:120px; height:2px; border-radius:1px;
  background:linear-gradient(90deg,var(--lv2),var(--line) 55%,transparent);
}
.blank .line.dotted{
  background:none; border-bottom:2px dotted var(--lv1); height:0;
}
.blank .line.dashed{
  background:none; border-bottom:2px dashed var(--lv3); height:0;
}
.blank p{margin:0; font-size:var(--t-md); line-height:1.9; color:var(--muted); max-width:22em}
.blank b{color:var(--fg-soft); font-weight:600}

/* ---------- 复习进度条也用同一套线 ---------- */
.rvprog i{background:linear-gradient(90deg,var(--lv2),var(--accent))}

/* ---------- 词汇分布条：让三种线型直接出现在图例里 ---------- */
.vb i{border-radius:0}

/* 词典面板的空态：也放一条线，和别处保持同一种语气 */
.pemptyline{
  display:block; width:56px; height:2px; margin:0 auto 16px;
  background:linear-gradient(90deg,var(--lv2),var(--line) 60%,transparent);
  border-radius:1px;
}

/* 阅读进度：顶栏下沿一条细线，从左往右填。
   工具栏收起后它仍在，是那一屏唯一的界面痕迹。 */
.readprog{
  position:fixed; left:0; right:0; top:var(--topbar-h); height:2px; z-index:25;
  background:linear-gradient(90deg,var(--lv2),var(--accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform .12s linear, top .22s ease;
  pointer-events:none;
}
body.chrome-hidden .readprog{top:0}

/* 生词本头部：标题独占一行（和书架一致），工具排第二行。
   原来把搜索框 order:-1 顶到最前，把标题挤到了中间。 */
.vocabhead{display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-3)}
.vocabhead h2{margin:0}
.vocabhead #btn-review{margin-left:auto}
.vocabtools{margin-bottom:var(--sp-3)}
.vocabtools #vocab-search{flex:1 1 160px; max-width:none}
.vocabtools .btn, .vocabtools button{flex:none}

/* 柯林斯星级改成线段：和整个应用的线条语言一致，比一排星星克制 */
.bars{display:inline-flex; gap:2px; margin-left:5px; vertical-align:1px}
.bars i{width:5px; height:2px; border-radius:1px; background:var(--line)}
.bars i.on{background:var(--accent)}
.tgbar{display:inline-flex; align-items:center}

/* 自绘图标统一：跟随文字颜色、和文字同高 */
.pclose svg, .more svg, .rvclose svg{display:block}
.qres svg{vertical-align:-2px; margin-right:2px}
.qres.ok svg{color:var(--known)}
.qres.no svg{color:var(--new)}

/* 被动复习提示：用「已掌握」的绿，暗示这是一次正向的积累 */
.vb.passive{color:var(--known)}
.vb.passive i{border-color:var(--known); border-bottom-style:solid}
.vb.passive b{color:var(--known)}

/* 相邻词组：考研的真难点是"每个词都认识、连起来不认识" */
.nearby:empty{display:none}
.nearby{margin:2px 0 12px}
.nearbyhead{
  font-size:var(--t-xs); color:var(--muted); letter-spacing:.06em;
  padding-bottom:6px; border-bottom:1px dashed var(--line); margin-bottom:8px;
}
.ph-item{padding:6px 0}
.ph-item + .ph-item{border-top:1px dashed var(--line-soft)}
.ph-text{
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:14.5px; font-weight:600;
  color:var(--accent-ink); letter-spacing:.01em;
}
.ph-tr{font-size:var(--t-md); color:var(--fg-soft); line-height:1.7; margin-top:2px}

/* 短语动词：只标"这几个词是一体的"，不给意思。

   刻意不盖在词身上 —— 词底下的下划线已经被三档难度占了。
   这条线只落在词与词之间的空隙里：同一套视觉语言（都是线），
   位置互斥所以绝不会混。扫读时几乎无感，盯着看才发现两个词被连住了。 */
.pvgroup{white-space:nowrap}
.pv-tail{position:relative}
.pv-tail::before{
  content:''; position:absolute; left:-0.30em; right:100%;
  width:0.30em; bottom:0; height:1px;
  background:var(--accent); opacity:.38; pointer-events:none;
}
.w.pv-head:active, .w.pv-tail:active{background:var(--accent-wash)}
.ph-marked .ph-text::after{
  content:'原文标出'; margin-left:8px; font-family:var(--font-ui);
  font-size:10px; font-weight:400; letter-spacing:.08em;
  color:var(--accent); opacity:.75; vertical-align:1px;
}
.phask{
  margin-top:6px; padding:0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  border-bottom:1px dotted var(--line); letter-spacing:.02em;
}
.phask:hover{color:var(--accent); border-bottom-color:var(--accent)}
.phask:disabled{display:none}
.phout:empty{display:none}
.phout{margin-top:6px; font-size:var(--t-md); line-height:1.7; color:var(--fg-soft)}
.phout b{font-family:var(--font-ui); font-size:var(--t-xs); color:var(--muted);
  font-weight:400; letter-spacing:.08em; margin-right:7px}

/* 同步码：要照着念、照着抄，所以给足字距和呼吸感 */
.synccode{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:19px; font-weight:600; letter-spacing:.16em;
  color:var(--accent-ink); background:var(--accent-wash);
  border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin-top:6px;
  user-select:all; -webkit-user-select:all; word-break:break-all;
}

/* 无官方答案的题：不判对错，语气要中性 —— 既不能像答对，也不能像答错 */
.qres.none{background:var(--bg-soft); border-left:2px solid var(--line)}
.qres.none b{color:var(--fg); font-weight:600}
.qmine{
  font-size:var(--t-xs); color:var(--accent); letter-spacing:.06em;
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; margin-left:8px;
}
.qkey{
  background:none; border:none; cursor:pointer; padding:0; margin-left:14px;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.qkey:hover{color:var(--accent); border-bottom-color:var(--accent)}
.qres.picking{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.keyask{font-size:var(--t-sm); color:var(--muted); margin-right:2px}
.keybtn{
  min-width:34px; padding:5px 9px; cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:600;
  color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:6px;
}
.keybtn:hover{border-color:var(--accent); color:var(--accent-ink)}
.keybtn.on{background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink)}
.keybtn.clr{min-width:auto; font-family:var(--font-ui); font-weight:400; color:var(--muted)}
.keycancel{
  background:none; border:none; cursor:pointer; padding:0; margin-left:4px;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
}

/* ── 完形填空 ────────────────────────────────────────────────
   空格就是一条下划线 —— 正好接上这个应用一以贯之的母题：
   难度分三档是下划线、加载是扫描线、空状态是线、阅读进度也是线。
   所以完形的空不用画框、不用底色，就是一条等着被填上的线。 */
.cz-blank{
  display:inline-block; position:relative; vertical-align:baseline;
  min-width:4.2em; padding:0 .35em; margin:0 .12em;
  font:inherit; color:var(--fg); text-align:center;
  background:none; border:none; border-bottom:1.5px solid var(--accent);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cz-blank:hover{border-bottom-color:var(--accent-ink); background:var(--accent-wash)}
.cz-num{
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  color:var(--accent); opacity:.8; letter-spacing:.04em;
}
/* 填过之后题号缩到右上角，让填进去的词占主位 */
.cz-blank.filled{
  min-width:0; font-family:Georgia,Cambria,"Noto Serif",serif;
  border-bottom-color:var(--line);
}
.cz-blank.filled .cz-num{
  position:absolute; top:-.55em; right:-.15em;
  font-size:9px; opacity:.55; font-weight:400;
}
.cz-blank.open{background:var(--accent-wash); border-bottom-color:var(--accent-ink)}
.cz-blank.right{border-bottom-color:var(--ok, #4a7c59); color:var(--ok, #4a7c59)}
.cz-blank.wrong{border-bottom-color:var(--no, #a4553a); color:var(--no, #a4553a)}

/* 弹窗贴着段落左边缘展开：只设 left、不设 top，
   垂直方向就还留在「空格正下方」的静态位置。
   不这么钉的话，靠近行首的空会把弹窗顶出屏幕外。 */
.article p{position:relative}
.cz-pop{
  position:absolute; left:0; z-index:60;
  min-width:min(15em, 100%); max-width:100%;
  padding:8px; margin-top:6px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.13);
}
.cz-opt{
  display:block; width:100%; text-align:left; margin:0; padding:8px 10px;
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:15px; color:var(--fg);
  background:none; border:none; border-radius:6px; cursor:pointer;
}
.cz-opt + .cz-opt{border-top:1px dashed var(--line-soft)}
.cz-opt:hover{background:var(--accent-wash); color:var(--accent-ink)}
.cz-opt.on{background:var(--accent-wash); color:var(--accent-ink); font-weight:600}
.cz-opt::first-letter{font-family:var(--font-ui)}
.cz-key{
  display:block; width:100%; margin-top:6px; padding:6px 10px;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  text-align:left; background:none; border:none; border-top:1px dashed var(--line);
  cursor:pointer;
}
.cz-key:hover{color:var(--accent)}

/* 走错域名的拦截层。不能做成可忽略的小提示 ——
   用户会在这里录入 API key、导入文章，最后全部白干。 */
.originwarn{
  position:fixed; inset:0; z-index:400; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ow-body{
  max-width:30em; padding:26px 24px;
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.ow-body b{color:var(--fg); font-weight:600}
.ow-body > b{display:block; font-size:17px; margin-bottom:10px; line-height:1.5}
.ow-body p{margin:0 0 16px; font-size:var(--t-md); line-height:1.85; color:var(--fg-soft)}
.ow-act{display:flex; gap:10px; align-items:center; margin-bottom:14px}
.ow-act .primary{
  padding:9px 18px; border-radius:8px; text-decoration:none;
  font-family:var(--font-ui); font-size:var(--t-md);
  background:var(--accent); color:#fff;
}
.ow-act button{
  padding:9px 14px; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-md); color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.ow-body code{
  display:block; padding:8px 10px; border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--muted); background:var(--bg-soft); word-break:break-all;
}
.storagestat{margin-top:12px}
.storagestat .kv b.warn{color:var(--no, #a4553a)}

/* 批量补答案。一次粘一整年 —— 780 道题逐个点是不可能的事。 */
.keypaste{
  position:fixed; inset:0; z-index:300; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--fg) 26%, transparent);
}
.kp-body{
  width:min(38em, 100%); max-height:88vh; overflow-y:auto;
  padding:24px; background:var(--bg);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 56px rgba(0,0,0,.2);
}
.kp-body h3{margin:0 0 8px; font-size:17px; font-weight:600}
.kp-lead{margin:0 0 14px; font-size:var(--t-md); line-height:1.8; color:var(--fg-soft)}
.kp-lead b{color:var(--fg)}
.kp-in{
  width:100%; padding:12px; box-sizing:border-box; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; line-height:1.75;
  color:var(--fg); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:8px;
}
.kp-in:focus{outline:none; border-color:var(--accent)}
.kp-preview{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:var(--t-md); line-height:1.8;
}
.kp-sum{margin-bottom:10px; color:var(--fg-soft)}
.kp-sum b{color:var(--accent-ink); font-weight:600}
.kp-row{
  display:flex; align-items:baseline; gap:10px;
  padding:5px 0; border-top:1px dashed var(--line-soft);
}
.kp-row span{flex:0 0 auto; color:var(--fg)}
.kp-row b{flex:0 0 auto; font-weight:600; color:var(--accent-ink); font-size:var(--t-sm)}
.kp-row code{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted);
}
.kp-warn{margin-top:10px; padding:8px 10px; border-radius:6px;
  background:var(--accent-wash); color:var(--accent-ink); font-size:var(--t-sm); line-height:1.7}
.kp-act{display:flex; gap:10px; margin-top:16px}
.kp-act .primary{padding:9px 20px; border-radius:8px; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-md); background:var(--accent); color:#fff}
.kp-act .primary:disabled{opacity:.4; cursor:default}
.kp-act button:not(.primary){padding:9px 14px; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-md); color:var(--muted)}
.keybtn-group{
  margin-left:auto; padding:3px 10px; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-xs); letter-spacing:.04em;
  color:var(--accent); background:none;
  border:1px solid var(--line); border-radius:5px;
}
.keybtn-group:hover{border-color:var(--accent); background:var(--accent-wash)}

/* ── 错题本 ────────────────────────────────────────────────
   正确率条沿用整个应用的下划线母题：不画柱子、不上饼图，
   就是一条线被填掉了多少 —— 一眼看出哪一类最弱。 */
.ms-overall{font-size:var(--t-sm); color:var(--muted); white-space:nowrap}
.ms-overall b{font-size:16px; color:var(--accent-ink); font-weight:600}
.ms-kinds{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px}

.ms-group{margin-top:18px}
.ms-gtitle{
  font-size:var(--t-xs); color:var(--muted); letter-spacing:.08em;
  padding-bottom:7px; border-bottom:1px dashed var(--line); margin-bottom:10px;
}
.ms-row{display:flex; align-items:center; gap:12px; padding:5px 0}
.ms-name{flex:0 0 6.5em; font-size:var(--t-md); color:var(--fg)}
.ms-track{
  flex:1 1 auto; height:2px; min-width:40px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.ms-track i{display:block; height:100%; background:var(--accent); border-radius:2px}
.ms-num{
  flex:0 0 auto; font-family:var(--font-ui); font-size:var(--t-sm);
  color:var(--fg); text-align:right; min-width:5.6em;
}
.ms-num em{font-style:normal; color:var(--muted); font-size:var(--t-xs); margin-left:6px}

.ms-item{padding:14px 0; border-top:1px dashed var(--line); cursor:pointer}
.ms-item:first-child{border-top:none}
.ms-item:hover{background:var(--accent-wash)}
.ms-head{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.ms-where{font-size:var(--t-xs); color:var(--muted); letter-spacing:.03em}
.ms-type{
  margin-left:auto; padding:1px 7px; border-radius:4px;
  font-size:var(--t-xs); color:var(--accent); border:1px solid var(--line);
}
.ms-stem{
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:15px; line-height:1.75;
  color:var(--fg); margin-bottom:8px;
}
.ms-ans{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:var(--t-sm)}
.ms-bad{color:var(--no, #a4553a)}
.ms-bad::before{content:'✕'; margin-right:5px; font-size:11px}
.ms-good{color:var(--ok, #4a7c59)}
.ms-good::before{content:'✓'; margin-right:5px; font-size:11px}
.ms-go{
  margin-left:auto; padding:0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.ms-go:hover{color:var(--accent); border-bottom-color:var(--accent)}
.ms-ans em{font-style:normal; font-family:Georgia,Cambria,"Noto Serif",serif; opacity:.85}

/* ── 英译汉练习 ────────────────────────────────────────────
   顺序是刻意的：先自己译，参考译文默认收起。
   先看答案再"练"等于没练 —— 和预翻译那个教训是同一条。 */
.tp{margin-top:18px; padding-top:14px; border-top:1px dashed var(--line)}
.tp-head{margin-bottom:14px}
.tp-head b{display:block; font-size:15px; margin-bottom:4px}
.tp-item{position:relative; padding:16px 0 18px 34px; border-top:1px dashed var(--line-soft)}
.tp-item:first-of-type{border-top:none}
.tp-n{
  position:absolute; left:0; top:17px;
  font-family:var(--font-ui); font-size:var(--t-xs); font-weight:600;
  color:var(--accent); opacity:.7;
}
.tp-en{
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:15.5px; line-height:1.85;
  color:var(--fg); margin-bottom:10px;
}
.tp-warn{font-size:var(--t-sm); color:var(--muted); margin-bottom:8px}
.tp-cand{
  display:block; width:100%; text-align:left; margin-bottom:6px; padding:8px 10px;
  font-family:Georgia,Cambria,"Noto Serif",serif; font-size:14px; line-height:1.7;
  color:var(--fg-soft); background:var(--bg-soft); cursor:pointer;
  border:1px solid var(--line); border-radius:7px;
}
.tp-cand:hover{border-color:var(--accent); color:var(--fg)}
.tp-in{
  width:100%; box-sizing:border-box; padding:10px 12px; resize:vertical;
  font-family:inherit; font-size:15px; line-height:1.85; color:var(--fg);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:8px;
}
.tp-in:focus{outline:none; border-color:var(--accent)}
.tp-act{display:flex; gap:16px; margin-top:8px}
.tp-act button{
  padding:0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.tp-act button:hover{color:var(--accent); border-bottom-color:var(--accent)}
.tp-act button:disabled{opacity:.5; cursor:default}
.tp-ref{
  margin-top:10px; padding:10px 12px; border-radius:8px;
  background:var(--accent-wash); font-size:var(--t-md); line-height:1.9; color:var(--fg);
}
.tp-ref::before{
  content:'参考译文'; display:block; margin-bottom:4px;
  font-family:var(--font-ui); font-size:var(--t-xs); color:var(--accent); letter-spacing:.06em;
}
.tp-out:empty{display:none}
.tp-out{margin-top:10px}
.tp-align{
  margin-top:8px; padding:5px 12px; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--accent);
  background:none; border:1px solid var(--line); border-radius:6px;
}
.tp-align:hover{border-color:var(--accent); background:var(--accent-wash)}
.tp-align:disabled{opacity:.5; cursor:default}
.tp-alignmsg{margin-left:10px}
.tp-sel{
  width:100%; box-sizing:border-box; padding:8px 10px; margin-bottom:10px;
  font-family:inherit; font-size:14px; color:var(--fg);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:7px;
}
.tp-warn b{color:var(--fg)}