:root{--sq-build:2026-10-17T21:54 #faca27e882; --bg:#080c11; --panel:#0f1621; --panel2:#141d2b; --line:#1f2b3d; --txt:#e6edf5; --dim:#7f8fa4; --green:#3ddc97; --amber:#ffb454; --red:#ff6b6b; --blue:#4fa3ff; --purple:#b07cff; --selBg:#17293d; --selFg:var(--txt); --selBorder:var(--blueBg); --btnBg:#1d3a57; --btnFg:#eaf2ff; --btnBorder:#2f5d86; --btnPrimaryBg:linear-gradient(180deg,#1d4a33,#123024); --amberBg:#2a2110; --amberBorder:#7a5a1e; --blueBorder:#2c4a63; } *{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden} body{ background: radial-gradient(1100px 520px at 12% -12%,var(--bg2) 0%,transparent 62%), radial-gradient(900px 480px at 92% 4%,var(--panel3) 0%,transparent 58%), var(--bg); color:var(--txt); font-family:"SF Mono",Menlo,Consolas,"Cascadia Mono","Microsoft YaHei",monospace; font-size:14px; min-height:100vh; -webkit-font-smoothing:antialiased; } .wrap{width:100%;max-width:980px;margin:0 auto;padding:16px 20px 60px} /* ---------- 顶栏 ---------- */ /* nowrap：品牌与右侧内容**永远左右排列**，绝不上下堆叠。 空间不足时压缩 `.stats`（它内部自己换行），品牌始终留在左边。 */ .topbar{ display:flex;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:space-between; padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel); } .brand{display:flex;align-items:center;gap:7px;font-weight:700;letter-spacing:.3px; flex:none} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)} /* 品牌块两行：主名 + 副标题（用户定稿的样式）。 右边的统计 / 按钮 / 段位排成一行，靠 `align-items:center` 垂直居中。 */ .brand small{display:block;font-weight:400;color:var(--dim);font-size:10px;letter-spacing:1px} /* flex:1 1 auto + min-width:0：空间不够时压缩它（内部换行）， 而不是把品牌挤到下一行 —— 保证「品牌左、其余右」。 */ .stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center; flex:1 1 auto;min-width:0;justify-content:flex-end} .stat{text-align:center;min-width:54px} .stat b{display:block;font-size:15px;line-height:1.2} .stat span{font-size:10px;color:var(--dim);letter-spacing:.8px} .xpwrap{min-width:158px} /* 进度条最短宽：右侧内容要挤进一行 */ .xprow{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:4px} .bar{height:7px;border-radius:99px;background:var(--panel3);overflow:hidden} .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--blue));width:0;transition:width .75s cubic-bezier(.22,.61,.36,1)} .lvl{font-size:12px;color:var(--green);font-weight:700;display:inline-block} /* 段位切换：翻转落下 + 金光 */ .lvl.lvflip{animation:lvFlip .85s ease-out} @keyframes lvFlip{ 0%{transform:translateY(-9px) scale(.86);opacity:0;color:var(--amber)} 55%{transform:translateY(0) scale(1.16);opacity:1;color:var(--amber); text-shadow:0 0 16px rgba(255,215,110,.95)} 100%{transform:none;opacity:1;color:var(--green)} } /* 顶部这排里被 setNumText 包起来的数字段 */ .stat b i.rnum,.xprow i.rnum{font-style:normal} .xprow i.rnum{color:var(--dim)} .sndbtn{ cursor:pointer;font-family:inherit;font-size:13px;padding:4px 8px;border-radius:99px; line-height:1; /* 图标按钮：只留图标，省出右侧横向空间 */ border:1px solid var(--line);background:var(--panel2);color:var(--dim);transition:.18s; } .sndbtn:hover{color:var(--txt);border-color:var(--line2)} .sndbtn.on{color:var(--greenFg);border-color:var(--greenBg);background:var(--greenBg)} /* ---------- 今日学习时长 ---------- */ .timechip{ display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:10px; padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel); font-size:11.5px;color:var(--dim); } .timechip.hit{border-color:var(--greenBg);background:var(--greenBg)} .tclabel{color:var(--dim);letter-spacing:.4px} .tcbar{flex:1;min-width:110px;max-width:280px;height:8px;border-radius:99px;background:var(--panel3);overflow:hidden} .tcbar>i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s,background .5s} .timechip b{color:var(--txt);font-size:12px} .tcstate{color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-size:10.5px} .timechip.hit .tcstate{color:var(--green);border-color:var(--greenBg);background:var(--greenBg)} .tcgoal{margin-left:auto;color:var(--dim2);font-size:10.5px} .tcgoal select{ font-family:inherit;font-size:11px;color:var(--txt);background:var(--panel2); border:1px solid var(--line);border-radius:6px;padding:2px 4px;margin:0 2px; } /* ---------- 存储告警 / 存档备份 ---------- */ .warnbar{ margin-top:9px;padding:11px 14px;border-radius:10px;font-size:11.5px;line-height:1.75; border:1px solid #7a4a1e;background:#2a1c0e;color:#ffc98a; } .warnbar b{color:#ffd9a8} .warnbar.soft{border-color:#5c4a1e;background:#241f0e;color:#d8c07a} .iozone{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px; padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel); font-size:11px;color:var(--dim); } .iozone .iohint{color:var(--dim2);font-size:10.5px;line-height:1.6;flex:1;min-width:200px} .iozone textarea{ width:100%;min-height:96px;font-family:inherit;font-size:11px;line-height:1.6; color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:8px; padding:10px;resize:vertical;word-break:break-all; } .iozone .row{margin-top:8px} /* ---------- 存档自检面板 ---------- */ .diagbody{width:100%;font-size:11.5px;line-height:1.9;color:var(--dim)} .diagrow{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)} .diagrow .dk{flex:none;width:190px;color:var(--dim)} .diagrow .dv{color:var(--txt);word-break:break-all} .diagrow .dv.ok{color:var(--green)} .diagrow .dv.bad{color:var(--red)} .diagrow .dv.warn{color:var(--amber)} .diagtitle{font-size:12px;color:var(--txt);font-weight:700;margin:10px 0 4px} .diagverdict{ margin-top:11px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.75; border:1px solid var(--line);background:var(--panel2); } .diagverdict.ok{border-color:#23543b;background:var(--greenBg);color:var(--green)} .diagverdict.bad{border-color:var(--redBg);background:#2a1114;color:var(--redFg)} /* ---------- 音标与发音 ---------- */ .ipa{font-size:12.5px;color:var(--blue);letter-spacing:.2px;font-family:"Segoe UI","Microsoft YaHei",monospace} .ipa.small{font-size:11.5px} .phrow{display:block;margin-top:4px} .phrow .ipa{font-size:15px;margin-right:10px} .spk{ cursor:pointer;font-family:inherit;font-size:13px;line-height:1;padding:5px 8px;border-radius:7px; border:1px solid var(--line2);background:var(--panel2);color:var(--blue);transition:.16s;vertical-align:middle; } .spk:hover{background:var(--selBg);border-color:var(--blue);color:var(--blue)} .spk:active{transform:scale(.94)} .ipa.small + .spk{font-size:11px;padding:3px 7px} .ipainline{color:var(--blue);font-size:11.5px;margin-left:9px;opacity:.9} /* ---------- 技能面板 ---------- */ /* ---------- 整个词库的进度条 ---------- */ .totalbar{margin-bottom:11px} .tbrow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-bottom:5px} .tbrow .tblabel{color:var(--dim)} .tbrow b{color:var(--txt);font-size:13px} .tbrow .tbdetail{color:var(--dim2);font-size:10.5px} .barring{height:9px;border-radius:99px;background:var(--panel3);overflow:hidden; border:1px solid #263449} .barring>i{display:block;height:100%;width:0; background:linear-gradient(90deg,var(--green),var(--blue));transition:width .5s} /* ---------- 分级闯关 ---------- */ .stageroad{display:flex;flex-direction:column;gap:9px;margin-top:4px} .stagecard{ border:1px solid var(--line);border-left-width:4px;border-radius:10px; background:var(--panel2);padding:11px 13px;transition:.2s; } .stagecard.locked{opacity:.5} .stagecard.current{border-color:var(--blueBg);background:var(--selBg);box-shadow:0 0 0 1px var(--blueBg)33 inset} .stagecard.done{border-left-color:var(--green)} .stagecard .srow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .stagecard .slv{ font-size:11px;font-weight:700;border-radius:5px;padding:2px 8px; border:1px solid var(--line);color:var(--blue);background:var(--panel2); } .stagecard.done .slv{color:var(--green);border-color:#23543b;background:var(--greenBg)} .stagecard.locked .slv{color:var(--dim2);border-color:#243040;background:transparent} .stagecard .sname{font-size:13.5px;font-weight:700} .stagecard .scount{margin-left:auto;font-size:11.5px;color:var(--dim)} .stagecard .sdesc{font-size:11.5px;color:var(--dim);line-height:1.7;margin-top:6px} .stagecard .sbar{height:6px;border-radius:99px;background:var(--panel3);overflow:hidden;margin-top:8px} .stagecard .sbar>i{display:block;height:100%;width:0;transition:width .5s} .stagecard .sstate{font-size:10.5px;color:var(--dim);margin-top:6px} .stagecard .sstate b{color:var(--amber)} .stagecard .smile{font-size:11px;color:var(--green);margin-top:6px;line-height:1.6} .milestonerow{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12px;line-height:1.75} .milestonerow:last-child{border-bottom:0} .milestonerow .mlv{ flex:none;width:34px;font-weight:700;color:var(--blue);font-size:11px;padding-top:1px; } .milestonerow.locked .mlv{color:var(--dim2)} .milestonerow .mtxt{color:var(--dim)} .milestonerow.locked .mtxt{color:var(--dim2)} .skill.locked{opacity:.42;filter:grayscale(.55)} .skill .ic{font-size:16px} .skill .nm{font-size:10.5px;margin-top:5px;color:var(--txt);line-height:1.3} .skill .pg{font-size:10px;color:var(--dim);margin-top:3px} .skill .fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:currentColor;transition:width .5s} /* ---------- 标签页 ---------- */ .tabs{display:flex;gap:8px;margin:14px 0 0;flex-wrap:wrap} .tab{ cursor:pointer;user-select:none;padding:9px 15px;border-radius:9px;border:1px solid var(--line); background:var(--panel);color:var(--dim);font-size:12.5px;font-family:inherit;transition:.2s; } .tab:hover{color:var(--txt);border-color:var(--line2)} .tab.on{background-color:var(--selBg);color:var(--selFg);border-color:var(--selBorder);box-shadow:0 0 0 1px var(--selBorder)33 inset} /* ========================================================================== 窄屏（手机）适配 原则：不改变桌面观感，只在窄屏时松开硬最小宽、允许换行、缩小间距。 ========================================================================== */ @media (max-width:640px){ .wrap{padding:12px 12px 52px} /* 手机上页脚再压紧一点 */ #pageFooter{font-size:10.5px;line-height:1.7;margin-top:16px;padding-top:10px} /* 顶栏改为可换行：品牌独占一行，统计与按钮在下面自行换行 */ .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px} /* 顶栏改成两行网格：第一行「品牌 | 在线人数」✓ 第二行「统计/按钮」✓ 用 grid 明确指定位置 —— flex 换行的落点不可控（实测在线人数会掉到第二行 ✗） */ .topbar{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center} .brand{grid-column:1;grid-row:1;min-width:0} .topbar > .onlineTag{grid-column:2;grid-row:1;margin-left:0} .stats{grid-column:1 / -1;grid-row:2} /* 手机上优先给答题区腾地方 ✓ ① 三格统计收起来（总览页有同样的数字 ✓），只留朗读/音效开关与段位 */ .topbar .stat{display:none} /* 主行动卡的按钮靠右，并把「开始今日训练」排到最右 ✓ （手机右手拇指够得着 ✓；用 order 调位置，不动 DOM，桌面端不受影响 ✓） */ /* 按钮铺满整行：实测"全挤右边"时左半墨量 0.0% ✗✗（整页左侧只占 35.4%） 铺满之后左右就平衡了 ✓，主按钮仍在最右（右手够得着 ✓）且点击区域更大 ✓ */ .hero .actbtns{width:100%;justify-content:space-between;gap:10px;flex-wrap:nowrap} .hero .actbtns #quickPlay{order:2;flex:1 1 0;min-width:0} .hero .actbtns #adviceGo{flex:1 1 0;min-width:0} .hero .actbtns #adviceGo .btn{width:100%} .topbar .xpwrap{flex:1;min-width:0} /* ② 标签栏单行横向滑动，不再折成两行（省 ~36px） */ .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none; /* 角标 .tabdot 向上/右突出 6px，被 overflow 裁掉过 ✗ padding 属于盒内，所以留出空间就不裁了 ✓ 同时 margin-top 相应减小，总高度不变（不占练习页的地方 ✓） */ padding:8px 8px 3px 2px;margin-top:2px} .tabs::-webkit-scrollbar{display:none} .tabs .tab{flex:0 0 auto} /* 横向滑动提示：用 mask 做边缘渐隐 —— 它钉在容器边缘， 不会被滚动带走（用 ::after 跟着滚动就错了 ✗） */ /* 渐隐调弱一些：右边缘若有未读角标，也还能看清 ✓ */ .tabs.hint-right{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,rgba(0,0,0,.55) 100%); mask-image:linear-gradient(90deg,#000 0,#000 92%,rgba(0,0,0,.55) 100%)} .tabs.hint-left{ -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0,#000 8%,#000 100%); mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0,#000 8%,#000 100%)} .tabs.hint-both{ -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0,#000 8%,#000 92%,rgba(0,0,0,.55) 100%); mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0,#000 8%,#000 92%,rgba(0,0,0,.55) 100%)} /* ③ 练习块的说明与规则先收起（点开始后它们本来也会隐藏 ✓） */ [id$="Intro"] .sub, [id$="Intro"] .rules{display:none} /* ④ 卡片大标题在手机上省掉（模式名标签栏已经写着 ✓） */ .gamecard > h2{display:none} /* 标语在所有页面都保留 ✓（用户要求：logo 区各页保持一致 ✓） 之前只在练习页藏它以省 16px，被否掉了 —— 一致性优先 */ .brand small{display:block} .brand{flex:1 1 100%} .stats{flex:1 1 100%;justify-content:flex-start;gap:8px} .stat{min-width:0} .stat b{font-size:14px} .xpwrap{min-width:0;flex:1 1 100%} .tcbar{min-width:0} /* 标签条：更紧凑，可换行 */ .tabs{gap:6px;margin-top:10px} .tab{padding:8px 11px;font-size:12px} /* 其它含硬宽的区块 */ .diagrow{flex-wrap:wrap} .diagrow .dk{width:auto;flex:1 1 100%} .iozone .iohint{min-width:0} .actzone .acttxt{flex:1 1 100%} .rset{flex-wrap:wrap} .rset .rlabel{min-width:0} /* 卡片与内边距 */ /* 注意：这里不要给 gamecard 加规则 —— 测试会解析 CSS 里第一条 gamecard 规则来核对宽度， 放在前面会把解析带偏（踩过一次，注释里写出选择器也会被匹配到 ✗）。 gamecard 本身已是 width:100% + max-width，窄屏无需再调 */ .card,.setcard{padding-left:12px;padding-right:12px} .optrow .ol{min-width:0} } @media (max-width:420px){ .wrap{padding:10px 9px 50px} .tab{padding:7px 9px;font-size:11.5px} .stat b{font-size:13px} .stat span{font-size:10px} } /* 兜底：任何残留的 1–2px 溢出都不出现横向滚动条 */ html,body{overflow-x:hidden} /* 定性文案：只要文字点亮，不要边框和背景（用户要求） */ .authhl{display:block;margin:0 0 7px;padding:0;background:none;border:0; color:#c8f2d8;font-weight:700;font-size:12px;letter-spacing:.5px} /* ========================================================================== 登录窗垂直节奏：间距统一走 4px 基准，行距放宽一点 （原来各元素是 15/13/10/5/10/12px 混着来，看着不齐） ========================================================================== */ .authcard{padding:20px} .authbrand{margin-bottom:16px} .authsub{margin-top:4px;line-height:1.6} .authtabs{margin-bottom:16px} .authfield{margin-bottom:12px;line-height:1.5} .authfield input{margin-top:6px;line-height:1.5} .autherr{margin:0 0 10px;line-height:1.6} .autherr.hidden{margin:0} .btn.wide{margin-top:2px} .authnote{margin:12px 0 0;min-height:16px;line-height:1.7} .authlegal{margin:14px 0 0;font-size:11px;line-height:1.85} /* 定性行居中（继承 .authlegal 的居中），说明句左对齐 —— 多行左齐更整齐 */ .authhl{text-align:center} .authbody{display:block;text-align:center;color:var(--dim)} /* ---------- 面板 ---------- */ .view{display:none;margin-top:12px} .view.on{display:block} /* 微信提示条：借公告条的观感，暖色以示"需要注意" */ .wxbanner{position:relative;z-index:130;display:flex;align-items:center;gap:10px; padding:8px 12px;margin:12px 0 0;border-radius:10px;flex-wrap:wrap; background:rgba(224,150,90,.10);border:1px solid rgba(224,150,90,.32); color:#e8c9a8;font-size:12px;line-height:1.6} .wxbanner.hidden{display:none} .wxbanner b{color:#ffd9ad} .wxtxt{flex:1;min-width:190px} .wxbtn{padding:3px 10px;font-size:11.5px;white-space:nowrap} .wxclose{cursor:pointer;padding:0 4px;font-size:13px;color:#b99a7a} .wxclose:hover{color:#ffd9ad} /* 页脚只在总览页显示（元素本身就放在 v-home 里，视图隐藏它自然隐藏） */ #pageFooter{margin-top:22px;padding-top:14px; border-top:1px solid var(--line);text-align:center; font-size:11px;color:var(--dim2);line-height:1.8} /* ---- 主页：两条词轨 ---- */ .tracklist{display:flex;flex-direction:column;gap:9px} .trackrow{ display:flex;align-items:center;gap:12px;padding:11px 13px; border:1px solid var(--line);border-radius:10px;background:var(--bg2); } .trackrow .tk{flex:1;min-width:0} .trackrow .tk .ttl{font-size:12.5px;display:flex;align-items:baseline;gap:7px;margin-bottom:7px} .trackrow .tk .ttl b{font-weight:600} .trackrow .tk .ttl em{font-style:normal;color:var(--dim);font-size:10.5px} .trackrow .tk .bar{height:6px} .trackrow .tk .meta{color:var(--dim);font-size:10.5px;margin-top:6px} .trackrow .tk .meta b{color:var(--txt)} .trackrow .go{ cursor:pointer;font-family:inherit;font-size:11.5px;padding:7px 13px;border-radius:7px; border:1px solid var(--btnBorder);color:var(--btnFg);background:var(--btnBg);transition:.18s;white-space:nowrap; } .trackrow .go:hover{filter:brightness(1.25)} .trackrow .go.solid{border-color:var(--greenBg);background:var(--greenBg)} /* ---- 主页：区块标题右侧的「明细 ›」 ---- */ .cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px} .cardhead h2{margin:0} .more{ cursor:pointer;color:var(--dim);font-size:11.5px;white-space:nowrap; padding:3px 7px;border-radius:6px;transition:.15s;user-select:none; } .more:hover{color:var(--blue);background:var(--selBg)} /* ---- 主页：一行速览 ---- */ .toolrow{display:flex;justify-content:center;margin-top:12px} /* ---- 总览：今日任务卡片 ---- */ .hqlist{display:flex;flex-direction:column;gap:7px} .hq{display:flex;align-items:center;gap:10px;font-size:12px} .hq .hqn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hq .hqb{ flex:0 0 auto;font-size:10.5px;padding:3px 8px;border-radius:99px; border:1px solid var(--line);color:var(--dim);background:var(--panel3);white-space:nowrap; } .hq.done .hqn{color:var(--greenFg)} .hq.done .hqb{border-color:var(--greenBg);color:var(--greenFg)} .hqbar{height:4px;border-radius:99px;background:var(--panel3);overflow:hidden;flex:0 0 64px} .hqbar i{display:block;height:100%;background:var(--green)} .hintline{color:var(--dim);font-size:10.5px;margin-top:9px;line-height:1.7} /* ---- 速攻页的参数面板 ---- */ .rset{ display:flex;flex-direction:column;gap:9px;margin:14px 0; padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2); } .rset.inplay{margin:0 0 12px;padding:10px 13px;gap:7px} .rset .rrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rset .rlabel{flex:0 0 auto;color:var(--dim);font-size:11.5px;min-width:64px} .rset .seg{justify-content:flex-start} .rset .rhint{color:var(--dim2);font-size:10.5px;margin-left:auto} .rquick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0} .rquick.inplay{margin:0 0 12px} .rquick .rhint{color:var(--dim2);font-size:10.5px} .rquick .btn{padding:8px 14px;font-size:12px} /* ---- 总览：今日时长卡片 ---- */ .hometime{display:flex;flex-direction:column;gap:9px} .hometimebar{height:8px;border-radius:99px;background:var(--panel3);overflow:hidden} .hometimebar i{display:block;height:100%;width:0;background:var(--green);transition:.3s} .hometimerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hometimerow b{font-size:14px} /* ---- 词库明细弹窗里的分块 ---- */ .wb{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:12px 14px;margin-bottom:10px} .wbhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12.5px} .wbhead b{font-weight:600} .wbhead span{color:var(--dim);font-size:11.5px} .wb .bar{height:6px} .wbn{color:var(--dim);font-size:11px;margin-top:7px;line-height:1.7} .wbn b{color:var(--txt)} /* ---- 播音员选择 ---- */ .vset{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:13px 15px} /* 迷你音量控件：作为控件行里的一个普通子项（流式 ✓ 不会压到别的东西 ✓）。 以前用 position:absolute 钉在卡片右上角，把揪错页的「文档」标签压住了 ✗ 注意：position:relative 必须并进下面原有的 .gamecard 规则里 ✗， 不能再写一条 —— test_home 解析的是第一条 .gamecard，写两条会把宽度断言弄挂 ✗ */ .volmini{display:inline-flex;align-items:center;gap:6px; padding:2px 8px 2px 6px;border-radius:99px; background:var(--panel2);border:1px solid var(--line); font-size:11px;color:var(--dim);white-space:nowrap;flex:0 0 auto} .volmini .vicon{cursor:pointer;font-size:12px;line-height:1} .volmini input[type=range]{width:78px;height:14px;accent-color:var(--green);margin:0} .volmini .vnum{min-width:30px;text-align:right;color:var(--greenFg);font-variant-numeric:tabular-nums} @media (max-width:640px){ .volmini input[type=range]{width:56px} .volmini .vnum{display:none} /* 手机上省空间，滑块位置本身就表示音量 ✓ */ } /* 被锁的档：压暗，并明确写出还差多少 ✓ */ .bank.locked{opacity:.55} .bank.locked .bbar{filter:grayscale(1)} .block{display:inline-block;margin-left:6px;font-size:11px;color:#e8c9a8} .volrow{margin-top:10px;align-items:center;gap:8px} .vollabel{font-size:12px;color:var(--dim);min-width:28px} .volval{font-size:12px;color:var(--greenFg);min-width:40px;text-align:right} #volRange{flex:1;min-width:120px;max-width:260px;accent-color:var(--green);height:18px} .vsethead{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .vsethead b{font-size:12.5px} .vcur{color:var(--blue);font-size:11px;text-align:right} .vlist{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:5px} .vgroup{color:var(--dim);font-size:10.5px;margin:8px 0 2px;letter-spacing:.4px} .vrow{ display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px; border:1px solid transparent;background:var(--panel3);cursor:pointer;transition:.14s; } .vrow:hover{background:var(--selBg);border-color:var(--blueBg)} .vrow.sel{border-color:var(--greenBg);background:var(--greenBg)} .vrow .vnm{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vrow .vtag{ font-size:9.5px;padding:2px 6px;border-radius:5px;white-space:nowrap; border:1px solid var(--line);color:var(--dim); } .vrow .vtag.off{border-color:var(--greenBg);color:#7fd6a5} .vrow .vtag.on{border-color:var(--selBorder);color:var(--selFg);background-color:var(--selBg)} .vrow .vplay{ cursor:pointer;font-family:inherit;font-size:11px;padding:4px 8px;border-radius:6px; border:1px solid var(--btnBorder);background:var(--panel2);color:var(--btnFg);transition:.14s; } .vrow .vplay:hover{background:var(--selBg);border-color:var(--green)} .vempty{color:var(--dim);font-size:11.5px;padding:8px 0} /* ---- 设置页：词库选择 ---- */ .setcard{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px} .setcard + .setcard{margin-top:12px} .setcard h2{margin:0 0 4px;font-size:15px} .setcard .sub{color:var(--dim);font-size:11.5px;margin:0 0 14px;line-height:1.7} .banklist{display:flex;flex-direction:column;gap:7px} /* 一层子菜单：左侧竖线把从属关系画出来，看起来就是菜单的层级 */ .bankchildren{ display:flex;flex-direction:column;gap:7px; margin-left:14px;padding-left:16px;border-left:1px solid #24303f; } .bank{ position:relative; cursor:pointer;font-family:inherit;text-align:left;padding:10px 13px;border-radius:10px; border:1px solid var(--line);background:var(--bg2);color:var(--txt);transition:.15s; display:flex;flex-direction:column;gap:5px; } /* 层级越深，卡片越窄一点，视觉上「收进去」 */ .bank[data-d="1"]{background:var(--bg2)} .bank[data-d="2"]{background:var(--panel3);padding:8px 12px} .bank[data-d="2"] .bt{font-size:12px} /* 折叠三角：放在名称左边（菜单里展开箭头的习惯位置）。 点它只折叠、不切换范围，所以它自己带 data-bank-toggle，处理时优先判断。 */ .bank .btog{ display:inline-block;min-width:14px;text-align:center;font-size:10px; color:var(--dim);border:1px solid var(--line);border-radius:5px;background:var(--panel2); padding:1px 4px;line-height:12px;cursor:pointer;user-select:none; } .bank .btog:hover{color:var(--txt);border-color:var(--blueBg);background:var(--panel2)} /* 收起：整块子菜单不显示 */ .bankchildren.collapsed{display:none} .bank .bn .fold{color:var(--dim)} .bank:hover{background:var(--selBg);border-color:var(--selBorder)} .bank.on{border-color:var(--greenBg);background:var(--greenBg)} .bank .bcheck{ position:absolute;top:8px;right:9px;font-size:9.5px;color:var(--greenFg); border:1px solid var(--green);border-radius:99px;padding:1px 7px;background:var(--greenBg); } .bank .bt{font-size:12.5px;font-weight:600;display:flex;align-items:baseline;gap:6px} .bank .bt em{font-style:normal;font-weight:400;color:var(--dim);font-size:10.5px} .bank .bn{color:var(--dim);font-size:10.5px} .bank .bn b{color:var(--txt)} .bank .bbar{height:4px;border-radius:99px;background:var(--panel3);overflow:hidden;margin-top:2px} .bank .bbar i{display:block;height:100%;background:var(--green)} /* ---- 设置页：选项组 ---- */ .optrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #182130} .optrow:last-child{border-bottom:none} .optrow .ol{flex:1;min-width:0} .optrow .ol b{font-size:12.5px;font-weight:600;display:block} .optrow .ol span{color:var(--dim);font-size:10.5px;line-height:1.6} .seg{display:flex;gap:5px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end} .seg button{ cursor:pointer;font-family:inherit;font-size:11.5px;padding:6px 11px;border-radius:7px; border:1px solid var(--line);background:var(--panel3);color:var(--dim);transition:.14s; } .seg button:hover{color:var(--txt);border-color:var(--blueBg)} .seg button.on{border-color:var(--selBorder);background-color:var(--selBg);color:var(--selFg);font-weight:600} .scopebar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px; padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg2); } .scopeline{ margin:0 0 12px;padding:9px 12px;border-radius:9px;background:var(--bg2); border:1px solid var(--line);font-size:11.5px;color:var(--dim); } .scopeline .scopenote{color:var(--dim2)} .scopeline b{color:var(--txt)} .goset{cursor:pointer;color:var(--blue);margin-left:6px} .goset:hover{text-decoration:underline} .stagecard.vacant{opacity:.45} /* ---- 分级闯关：当前级卡片 ---- */ .lvnow{ border:1px solid var(--blueBg);border-radius:12px;background:var(--panel2); padding:14px 16px;margin-bottom:12px; } .lvnowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .lvbig{font-size:17px;font-weight:600;color:var(--txt)} .lvmeta{color:var(--dim);font-size:11.5px} .lvwords{display:flex;flex-wrap:wrap;gap:6px} .lword{ cursor:pointer;font-size:12px;padding:5px 10px;border-radius:7px; border:1px solid var(--line);background:var(--panel3);color:var(--txt);transition:.14s; } .lword:hover{border-color:var(--blueBorder);background:var(--selBg)} .lword i{font-style:normal;color:var(--dim);margin-right:5px;font-size:10px} .lword i:contains("✓"){} .lvacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} /* ---- 分级闯关：分页 + 网格 ---- */ .lvnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px} .lvpg{ cursor:pointer;font-family:inherit;font-size:11.5px;padding:6px 11px;border-radius:7px; border:1px solid var(--line);background:var(--panel3);color:var(--dim);transition:.14s; } .lvpg:hover{color:var(--txt);border-color:var(--blueBg)} .lvrange{color:var(--dim);font-size:11.5px} .lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px} .lvtile{ position:relative;cursor:pointer;font-family:inherit;padding:8px 6px 6px;border-radius:8px; border:1px solid var(--line);background:var(--bg2);color:var(--txt);transition:.14s; display:flex;flex-direction:column;gap:5px;align-items:stretch; } .lvtile:hover{border-color:var(--blueBorder);background:var(--selBg)} .lvtile .tn{font-size:12px;font-weight:600;text-align:left} .lvtile .tb{height:4px;border-radius:99px;background:var(--panel3);overflow:hidden} .lvtile .tb i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#8bf0c0)} .lvtile .tp{font-size:9.5px;color:var(--dim);text-align:left} .lvtile .tlk{position:absolute;top:6px;right:6px;font-size:9px;opacity:.7} .lvtile.ok{border-color:var(--greenBg);background:var(--greenBg)} .lvtile.ok .tn{color:var(--greenFg)} .lvtile.cur{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset} .lvtile.lock{opacity:.42;cursor:not-allowed} .lvtile.lock:hover{border-color:var(--line);background:var(--bg2)} .lvtile.vacant{opacity:.3} .scopebar .sl{color:var(--dim);font-size:11.5px} .scopebar .sv{font-size:12.5px;font-weight:600} /* ---- 听音辨义：大喇叭 ---- */ .spk.big{ font-size:30px;padding:14px 26px;border-radius:14px;line-height:1; border:1px solid var(--blueBg);background:linear-gradient(180deg,#1d3a57,#132a41); } .spk.big:hover{filter:brightness(1.2)} .listenword{display:block;color:var(--dim);font-size:11.5px;margin-top:10px} /* ---- 设置页：细分面板（从弹窗共用）---- */ #v-settings > div[id^="p-"]{margin-top:12px} #v-settings > div[id^="p-"]:empty{display:none} #p-quests .card,#p-time .card,#p-ach .card,#p-tools .card{ border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px; } /* ---- 弹窗里的轻量列表 ---- */ .mline{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px} .mline:last-child{border-bottom:none} .mline.ok{color:var(--greenFg)} .mline.lock{opacity:.55} .mline .mi{flex:0 0 auto;font-size:13px} .mline .mn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mline .mn em{font-style:normal;color:var(--dim);font-size:10.5px;margin-left:5px} .mline .mv{flex:0 0 auto;color:var(--dim);font-size:11px;white-space:nowrap} .mline .mbar{flex:0 0 90px;height:5px;border-radius:99px;background:var(--panel3);overflow:hidden} .mline .mbar i{display:block;height:100%} h4.mini{margin:14px 0 6px;font-size:12px;color:var(--dim);font-weight:600} /* ---- 弹窗 ---- */ .modal{ /* 用 top/right/bottom/left 而不是 inset：inset 是 Chrome 87+ 才有的简写， 百度/UC 等国产浏览器的老内核会整条忽略 → 弹窗被渲染到页面底部之外（用户看不到， 表现为「点了没反应」）。四边写法所有内核都认。 */ position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;background:rgba(6,9,13,.74); display:flex;align-items:center;justify-content:center;padding:22px; } .modalbox{ width:min(760px,100%);max-height:82vh;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.6); } .modalhead{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 16px;border-bottom:1px solid var(--line); } .modalhead h3{margin:0;font-size:14.5px} .modalx{ cursor:pointer;font-family:inherit;font-size:13px;line-height:1; padding:6px 10px;border-radius:7px;border:1px solid var(--line); background:var(--panel2);color:var(--dim);transition:.15s; } .modalx:hover{color:var(--txt);background:var(--selBg)} .modalbody{padding:16px;overflow:auto} /* ---- 主页：行动区（隐藏标题后更紧凑）---- */ .card.hero{padding:16px} .actzone{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .actzone .acttxt{flex:1 1 340px;min-width:0} .actzone .acttxt .sub{margin:0;color:var(--dim);font-size:12.5px;line-height:1.85} .actzone .acttxt .sub b{color:var(--txt);font-weight:600} .actzone .actbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto} /* ---- 主页：下一步行动 ---- */ .btn.big{ font-size:13.5px;padding:11px 22px;font-weight:600; border-color:var(--greenBg);background:var(--btnPrimaryBg); } .card{ width:100%;max-width:100%;min-width:0; /* 绝不超出 .wrap */ border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px; } .card h2{margin:0 0 4px;font-size:15px} .card .sub{color:var(--dim);font-size:11.5px;margin:0 0 14px;line-height:1.6} .rules{list-style:none;padding:0;margin:0 0 16px;font-size:11.5px;color:var(--dim)} .rules li{padding:3px 0 3px 16px;position:relative} .rules li:before{content:"▸";position:absolute;left:2px;color:var(--green)} .btn{ cursor:pointer;font-family:inherit;font-size:13px;padding:10px 20px;border-radius:8px; border:1px solid var(--btnBorder);color:var(--btnFg); background:var(--btnBg);transition:.18s; } .btn:hover{filter:brightness(1.18)} .btn.ghost{background:transparent;border-color:var(--line);color:var(--dim)} .btn.ghost:hover{color:var(--txt)} .btn.wide{width:100%;padding:13px} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* ---------- 游戏区 ---------- */ .hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .chip{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:4px 11px;background:var(--panel2)} .chip b{color:var(--txt)} .combo{font-size:13px;font-weight:700;color:var(--amber);opacity:0;transition:.2s} .combo.on{opacity:1} .timerbar{height:5px;border-radius:99px;background:var(--panel3);overflow:hidden;margin-bottom:14px} .timerbar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--amber),var(--red))} .promptlabel{font-size:10.5px;color:var(--dim);letter-spacing:1.4px;margin-bottom:6px} .prompt{font-size:26px;font-weight:700;letter-spacing:.4px;margin:2px 0 6px;line-height:1.3;word-break:break-word;overflow-wrap:anywhere} .prompt.cn{font-size:20px;font-weight:600} .promptcode{ font-size:15px;background:var(--bg2);border:1px solid var(--line);border-radius:9px; padding:14px;margin:10px 0;line-height:1.9;word-break:break-word; } .promptcode .blank{color:var(--amber);border-bottom:2px dashed var(--amber);padding:0 14px} .opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin-top:14px} /* 出题区（题干 + 选项 + 计时条）限一个更窄的阅读宽度并居中。 卡片本身仍与其他页同宽，只是里面的题目不再铺满整行。 */ .playzone{width:100%;min-width:0} /* 游戏页的卡片本身也收窄到同一宽度—— 否则卡片边框仍横跨整屏，看起来和总览不一致。 */ /* 游戏页卡片与总览卡同宽（.wrap 980 减两侧 padding 20×2 = 940） */ .gamecard{width:100%;max-width:940px;margin-left:auto;margin-right:auto;position:relative} @media(max-width:720px){.playzone{max-width:100%}} @media(max-width:640px){.opts{grid-template-columns:1fr}} .opt{ cursor:pointer;text-align:left;font-family:inherit;font-size:13px;color:var(--txt); padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel2); transition:.15s;line-height:1.45; min-width:0;overflow-wrap:anywhere; /* 长释义不撑破卡片 */ } .opt:hover:not(.dis){border-color:var(--blue);background:var(--panel3);transform:translateX(2px)} .opt .k{color:var(--dim);margin-right:8px;font-size:11px} .opt.right{border-color:var(--green);background:var(--greenBg);color:var(--greenFg);box-shadow:0 0 0 1px var(--green)40 inset} .opt.wrong{border-color:var(--red);background:var(--redBg);color:var(--redFg)} .opt.dis{cursor:default;opacity:.72} .tokens{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px} .tok{ cursor:pointer;font-family:inherit;font-size:14px;color:var(--txt);padding:7px 11px;border-radius:7px; border:1px solid transparent;background:var(--panel2);transition:.14s;line-height:1.3; } .tok:hover{background:var(--selBg);border-color:var(--blueBorder)} .tok.sel{border-color:var(--amber);background:var(--amberBg);color:var(--amber)} .tok.right{border-color:var(--green);background:var(--greenBg);color:var(--greenFg)} .tok.wrong{border-color:var(--red);background:var(--redBg);color:var(--redFg)} .tok.dis{cursor:default} .feedback{margin-top:13px;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);display:none} .feedback.on{display:block} .feedback .ft{font-size:12.5px;font-weight:700;margin-bottom:6px} .feedback .fb{font-size:12px;color:var(--dim);line-height:1.7} .feedback .fb b{color:var(--txt)} .feedback .fix{font-size:12.5px;color:var(--green);margin-top:7px;line-height:1.6} /* 揪错的解释块：中文翻译 / 原句与改后对照 / 改写提示 */ .fbcn{ font-size:12.5px;color:var(--dim);margin-top:9px;padding:8px 11px;background:var(--bg2); border-left:3px solid var(--blue);border-radius:5px;line-height:1.7; } .fbcn .lbl{color:var(--blue);font-size:10.5px;letter-spacing:.5px;margin-right:6px} .fbrm{margin-top:9px;font-size:11.5px;line-height:1.7} .fbrm .row2{display:flex;gap:8px;align-items:flex-start;margin-top:5px} .fbrm .tag{flex:none;font-size:10px;border-radius:4px;padding:2px 7px;margin-top:1px;letter-spacing:.4px} .fbrm .tag.bad{color:var(--redFg);border:1px solid var(--redBg);background:var(--redBg)} .fbrm .tag.good{color:var(--green);border:1px solid var(--greenBg);background:var(--greenBg)} .fbrm .txt{color:var(--dim);word-break:break-word} .fbrm .txt b{color:var(--red)} .fbrm .txt i{color:var(--green);font-style:normal} .etype{ display:inline-block;font-size:10.5px;color:var(--amber);border:1px solid var(--amberBorder); background:var(--amberBg);border-radius:99px;padding:2px 10px;margin-top:10px; } .fbtip{ margin-top:9px;padding:9px 11px;border-left:3px solid var(--amber);background:var(--amberBg); border-radius:5px;font-size:11.5px;color:var(--txt);line-height:1.75; } .fbtip b{color:var(--amber)} /* 中英对照与逐词对照 */ .fbrm .tag.cn{color:var(--blue);border:1px solid var(--blueBorder);background:var(--blueBg)} .fbrm .txt.cn{color:var(--txt)} .fbrm .txt.cn i{color:var(--green);font-style:normal} .bnote{font-size:11.5px;color:var(--green);margin-bottom:7px} .wordtab{margin-top:11px;border-top:1px dashed var(--line);padding-top:9px} .wt-title{font-size:10.5px;color:var(--dim);letter-spacing:.6px;margin-bottom:7px} .wpairs{display:flex;flex-wrap:wrap;gap:6px} .wpair{ display:flex;align-items:center;gap:6px;font-size:11.5px; border:1px solid var(--line);border-radius:6px;background:var(--bg2);padding:3px 8px; } .wpair .wen{color:var(--dim)} .wpair .wcn{color:var(--blue);font-size:11px} .wpair .wcn .nogt{color:var(--dim);font-style:normal} .wpair.errtok{border-color:var(--red);background:var(--redBg)} .wpair.errtok .wen{color:var(--redFg)} .wpair.errtok .wcn{color:var(--redFg)} .fbintent{ margin-top:9px;font-size:11.5px;color:var(--purple);background:var(--panel2); border-left:3px solid #7a5aa8;border-radius:5px;padding:8px 11px;line-height:1.7; } .feedback.ok{border-color:#23543b}.feedback.ok .ft{color:var(--green)} .feedback.no{border-color:var(--redBg)}.feedback.no .ft{color:var(--red)} /* ---------- 结算 ---------- */ /* 结算页：纵向排得紧一些，让「再来一局」不用滚动就能看到。 按钮仍是同页面内的普通布局（不固定），只是把上面的内容压短。 */ .result{text-align:center;padding:12px 12px 20px} .result .curvebox{max-width:340px;margin:16px auto 0;text-align:left} .result .resultbtns{justify-content:center;gap:10px;margin:18px 0 0} .result .resultbtns .btn{flex:none} .result .big{font-size:30px;font-weight:800;line-height:1.08;color:var(--green)} .result .cap{color:var(--dim);font-size:10.5px;letter-spacing:1.4px;margin-top:5px} /* 统计排成**一行横排摘要**（「答对题数 3/3 · 正确率 100% · …」）： 比两列 3 行省一大截高度，那笔高度全用来换留白，页面就不挤了。 */ .result .lines{margin:13px auto 0;max-width:580px;font-size:12.5px; display:flex;flex-wrap:wrap;justify-content:center;gap:9px 22px} .result .lines div{display:flex;gap:7px;align-items:baseline;border:0;padding:0} .result .lines div span:first-child{color:var(--dim);white-space:nowrap} .result .lines div span:last-child{white-space:nowrap} /* 横排摘要不再需要虚线下边框（那是竖排表格的样式） */ .result .lines span:last-child{color:var(--green);font-weight:700} .rank{font-size:13px;margin-top:12px;color:var(--amber);font-weight:700} /* ---------- 答案明细 ---------- */ /* 明细分组标题：错题 / 可拆分词 / 其余（说明为什么顺序是这样 ✓） */ .dgroup{margin:14px 0 8px;padding:6px 10px;border-radius:8px;font-size:12px; letter-spacing:.3px;border-left:3px solid var(--line);background:rgba(255,255,255,.03)} .dgroup.k0{color:#ffb4a2;border-left-color:#e05c5c} .dgroup.k1{color:#c9b4ff;border-left-color:#c792ea} .dgroup.k2{color:#8fb8a8;border-left-color:var(--green)} .detailwrap{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;text-align:left} .detailhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px} .detailhead h3{margin:0;font-size:13.5px;letter-spacing:.5px} .detailhead .sub{font-size:11px;color:var(--dim)} .details{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px} .dcard{border:1px solid var(--line);border-left-width:3px;border-radius:9px;background:var(--panel2);padding:11px 13px} .dcard.ok{border-left-color:var(--green)} .dcard.no{border-left-color:var(--red)} .dtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10.5px;color:var(--dim);margin-bottom:6px} .dtop .dn{font-weight:700;color:var(--txt)} .dcard.ok .dmark{color:var(--green);font-weight:700} .dcard.no .dmark{color:var(--red);font-weight:700} .dtop .dcat{margin-left:auto} .dtop .dtime{color:var(--dim2)} .dterm{font-size:17px;font-weight:700;letter-spacing:.3px;line-height:1.3;word-break:break-word} .dcn{font-size:12px;color:var(--green);margin-top:3px;line-height:1.5} .dcard.no .dcn{color:var(--green)} .dex{font-size:11.5px;color:var(--dim);margin-top:8px;padding:8px 10px;background:var(--bg2); border:1px solid var(--line);border-radius:6px;line-height:1.65} .dexcn{margin:2px 0 0 12px;color:#7f8fa4;font-size:11.5px;line-height:1.6} .dexcn.hidden{display:none} /* 例句行末的两个小按钮：中（译）/ 析（解析）。默认很淡，鼠标进到卡片才明显 */ .dcn,.dxi{display:inline-block;vertical-align:1px;margin-left:6px;padding:0 5px;font-size:10.5px; line-height:1.5;border-radius:5px;border:1px solid #2a3644;background:transparent;color:#6f8093; cursor:pointer;opacity:.55;transition:opacity .12s,color .12s,border-color .12s;font-family:inherit} .dcard:hover .dcn,.dcard:hover .dxi{opacity:1} .dcn:hover,.dxi:hover{color:var(--blue);border-color:rgba(62,166,255,.5)} .dcn.on{color:var(--blue);border-color:rgba(62,166,255,.55);opacity:1} .dnote{font-size:11px;color:var(--txt);margin-top:7px;line-height:1.6} .dpron{font-size:11px;color:var(--blue);margin-top:6px;line-height:1.6;opacity:.92} /* ---------- 构词 ---------- */ .morphbox{margin-top:8px;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:8px} .morphbox .flabel{ display:inline-block;font-size:10px;border-radius:99px;padding:2px 9px;margin-bottom:7px; border:1px solid currentColor;letter-spacing:.4px; } .parts{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:7px;color:var(--dim);font-size:13px} .part{ cursor:pointer;font-family:inherit;font-size:13px;padding:3px 9px;border-radius:6px; border:1px solid var(--line2);background:var(--panel2);color:var(--txt);transition:.16s; } .part:hover{background:var(--selBg);border-color:var(--blue);color:var(--txt)} .part.affix{border-color:#3a5a7a;color:#9dc7f0} .part.plain{cursor:default;border-color:transparent;background:transparent;padding:3px 2px;color:var(--dim)} .morphstory{font-size:11.5px;color:var(--dim);line-height:1.7} /* 反馈 */ .fbtext{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line); border-radius:8px;color:var(--txt);font-family:inherit;font-size:12.5px;padding:9px 11px; resize:vertical;line-height:1.7} .fbtext:focus{outline:none;border-color:var(--blue)} .fbrow{display:flex;align-items:center;gap:10px;margin-top:9px} .fbtip{font-size:11.5px;color:var(--dim)} .fbtip.ok{color:var(--greenFg)} .fbtip.err{color:var(--redFg)} .fblist{margin-top:12px} .fbitem{padding:9px 0;border-top:1px dashed var(--line);font-size:12px} .fbitem .fbtime{color:var(--dim2);font-size:10.5px;margin-bottom:4px} .fbitem .fbbody{color:#c2cdd9;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere} .fbitem .fbreply{margin-top:6px;padding:7px 10px;border-radius:8px; background:rgba(120,210,160,.08);border-left:2px solid rgba(120,210,160,.45); color:#bfe9cf;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere} .fbbadge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px; background:var(--blueBg);color:var(--blue);font-size:10px} /* 在线人数（标签栏右侧） */ .onlineTag{display:inline-flex;align-items:center;gap:0;margin-left:auto;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--dim);font-size:11px;white-space:nowrap;flex:0 0 auto} /* 数字区：宽度**由 JS 按当前位数动态设置**（min-width = n ch）✓ 以前写死 2.4em（按 4 位数预留）✗ —— "15" 只有 13px，多出的十几 px 正好夹在呼吸点和数字之间，看起来就是"间距太大" ✗ 等宽数字保证 1ch = 一个数字宽 ✓ 所以几位就留几位 ✓ 既不空也不抖 ✓ */ .onlineTag b{color:var(--greenFg);font-size:12px;font-weight:700; text-align:right;font-variant-numeric:tabular-nums; /* 呼吸点与数字之间留**一个数字宽** ✓（1ch 会随字号缩放 ✓ 不是写死的 px ✓） 右边 4px 是数字与「在线」之间的间距 —— 分开控制， 否则调左边会把右边一起推远 ✗（原来一个 gap 管两处） */ margin-left:1ch;margin-right:4px} .onlineDot{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 7px var(--green);animation:onpulse 2.2s ease-in-out infinite} @keyframes onpulse{0%,100%{opacity:1}50%{opacity:.35}} /* 登录窗的游客按钮 */ .authguest{margin-top:10px} /* 反馈独立页 */ .fbwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:16px 18px;margin-top:12px} /* 标签上的未读角标 */ .tab{position:relative} .tabdot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px; border-radius:99px;background:#e05c5c;color:#fff;font-size:10px;line-height:17px; text-align:center;font-weight:700;box-shadow:0 0 9px rgba(224,92,92,.65)} .tabdot.hidden{display:none} /* 有待处理的反馈时，按钮整体高亮一下（图标也会变成 📩） */ .tab.alert{border-color:#b4553f;box-shadow:0 0 0 1px rgba(224,92,92,.35) inset} .tab.alert .fbicon{font-style:normal} .fbicon{font-style:normal} /* 后台管理 */ .admwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:16px 18px;margin-top:12px} .admhead{display:flex;align-items:center;justify-content:space-between;gap:10px; padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px} .admhead b{font-size:15px;font-weight:700;color:var(--txt)} .admback{font-size:11.5px;color:#7fa8d8;cursor:pointer} .admstat{font-size:12px;color:var(--dim);margin:4px 0 10px} .admstat b{color:var(--txt);font-size:15px} .admtabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .admtab{cursor:pointer;padding:6px 13px;border-radius:8px;border:1px solid var(--line); background:var(--panel);color:var(--dim);font-family:inherit;font-size:12px} .admtab.on{background-color:var(--selBg);border-color:var(--selBorder);color:var(--selFg)} .admrefresh{margin-left:auto;font-size:11.5px;color:#7fa8d8} .admbody{max-height:62vh;overflow:auto} .admrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap; padding:8px 0;border-top:1px dashed var(--line);font-size:12px} .admrow .an{font-weight:600;min-width:110px} .admrow .am{color:var(--dim);font-size:11px} .admdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3a4a5c} .admdot.on{background:var(--green);box-shadow:0 0 8px var(--green)} .admmini{padding:2px 8px;border-radius:6px;border:1px solid var(--line); background:none;color:var(--dim);cursor:pointer;font-family:inherit;font-size:11px} .admmini:hover{color:var(--txt);border-color:#4a6b86} .admmini[disabled]{opacity:.4;cursor:not-allowed} .admmini[disabled]:hover{color:var(--dim);border-color:var(--line)} .admfb{margin:10px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)} .admfb .who{font-size:11.5px;color:var(--dim)} .admfb .txt{margin:6px 0;color:#c2cdd9;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere} .admfb textarea{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line); border-radius:8px;color:var(--txt);font-family:inherit;font-size:12.5px;padding:8px 10px; resize:vertical;line-height:1.7} .admfb .done{color:#8fe0aa;font-size:12px;margin:6px 0} .admempty{color:var(--dim2);font-size:12px;padding:10px 0} /* 公告条 */ .noticebar{position:relative;z-index:130;display:flex;align-items:center;gap:10px;padding:8px 14px; background:var(--panel2);border-bottom:1px solid var(--line);color:var(--txt); font-size:12.5px;line-height:1.6} .noticebar.hidden{display:none} .noticebar .nb-item{flex:1} .noticebar.warn{background:var(--amberBg);color:var(--amber);border-bottom-color:var(--amberBorder)} .noticebar .nb-x{flex:0 0 auto;background:none;border:1px solid var(--line); color:var(--dim);border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px} .noticebar .nb-x:hover{color:var(--txt);border-color:#4a6b86} /* ---- 派生词 / 词组 / 搭配 / 词源 ---- */ .wsec{margin-top:9px} .wlab{ display:inline-block;font-size:10px;letter-spacing:1px;color:var(--dim); border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-bottom:5px; } .wfam{display:flex;flex-direction:column;gap:3px} .wfam>span{display:block} .wpos{ display:inline-block;min-width:34px;color:#b07cff;font-size:11px; font-weight:600;margin-right:6px; } .wwords{color:var(--txt);font-size:11.5px;line-height:1.75} .wwords b{color:var(--greenFg);font-weight:600} .wwords i{color:var(--dim);font-style:normal;font-size:10.5px;margin-left:3px} .wsep{color:#3a4756;margin:0 5px} .wlist{display:flex;flex-direction:column;gap:3px} .wrow{font-size:11.5px;line-height:1.7} .wrow b{color:#ffd28a;font-weight:600;margin-right:7px} .wrow span{color:var(--dim)} .wetym{color:var(--dim);font-size:11px;line-height:1.75} .tipbox{ margin-top:9px;padding:9px 11px;border-left:3px solid var(--amber);background:var(--amberBg); border-radius:6px;font-size:11px;color:#ffd9a8;line-height:1.7; } .tipbox b{color:#ffe9c9} .tipbox .bad{color:var(--redFg)} .affixbox{margin-top:18px;border-top:1px solid var(--line);padding-top:13px} .affixgrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:7px;margin-top:9px; max-height:330px;overflow-y:auto;padding-right:5px; } .affixitem{border:1px solid var(--line);border-radius:8px;background:var(--panel2);padding:8px 10px;font-size:11px} .affixitem .af{font-size:13px;color:var(--blue);font-weight:700} .affixitem .am{color:var(--txt);margin-top:2px;line-height:1.5} .affixitem .ae{color:var(--dim);margin-top:3px;font-size:10.5px;line-height:1.5} .tagnew{display:inline-block;font-size:10px;color:var(--amber);border:1px solid var(--amberBorder); background:var(--amberBg);border-radius:99px;padding:2px 9px;margin-top:4px} .dmore{margin-top:11px;font-size:11px;color:var(--dim);border:1px dashed var(--line); border-radius:8px;padding:9px 12px;line-height:1.6} @media(max-width:640px){.details{grid-template-columns:1fr}} /* ---------- 任务 / 成就 ---------- */ .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px} @media(max-width:720px){.grid2{grid-template-columns:1fr}} .q{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12px} .q:last-child{border-bottom:0} .q .t{color:var(--dim);line-height:1.5} .q .t b{color:var(--txt);display:block;font-weight:600} .q .p{font-size:11px;color:var(--blue);white-space:nowrap} .q.done .p{color:var(--green)} /* 手机端总览里的统计条：连胜天数 / 总经验 / 已掌握·学习中 ✓ */ /* 统计条：**严格两行** ✓（第一行数字、第二行标签） 标签强制单行 + 超长省略 —— 「已掌握 · 学习中 72」这种长标签 不这样处理会把整条撑到第三行 ✗ */ .statstrip{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center; gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .statstrip.hidden{display:none} .statstrip .stat{flex:1 1 0;min-width:0;text-align:center} .statstrip .stat b{display:block;font-size:15px;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .statstrip .stat span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 窄屏再退一档：实测「已掌握 · 学习中 72」需要 107px ✗ 而 360px 屏每格只有约 102px、320px 屏约 89px ✗ 9.5px / 8.5px 之后就放得下了 ✓（只影响统计条 ✓ 顶栏那三个不受影响 ✓） */ @media (max-width:420px){ .statstrip .stat span{font-size:9.5px} } @media (max-width:420px){ .statstrip .stat b{font-size:14px} } @media (max-width:380px){ .statstrip .stat b{font-size:13px} } @media (max-width:380px){ .statstrip .stat span{font-size:8.5px} } /* 成就网格：固定尺寸网格 → 整齐 ✓ （原来是 flex-wrap，卡片宽度跟着文字走，59 个徽章出现 36 种宽度 ✗） */ .badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:10px} .badge{ display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:11px; font-size:12px;line-height:1.35; border:1px solid var(--line);background:var(--panel2);opacity:.42; min-height:112px;position:relative;overflow:hidden; align-content:flex-start; transition:transform .15s,border-color .15s,opacity .2s; animation:achIn .28s ease-out both; } .badge:hover{transform:translateY(-1px);border-color:var(--blueBorder);background:var(--panel)} /* 图标做成固定尺寸的色块：解锁绿底、未解锁灰底 —— 有层次但不破坏整齐 ✓ */ .badge .bi{ flex:0 0 auto;width:30px;height:30px;border-radius:9px;font-size:16px; display:flex;align-items:center;justify-content:center; background:var(--panel3);border:1px solid var(--line); } .badge .btx{min-width:0;flex:1} .badge.got{opacity:1;border-color:var(--green); background:var(--greenBg);color:var(--greenFg)} .badge.got .bi{background:var(--panel);border-color:var(--green)} /* 描述最多 2 行（成就说明都很短，2 行足够 ✓），保证卡片高度一致 ✓ */ .badge small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;color:var(--dim);font-size:10.5px;margin-top:2px} /* 逐张错峰淡入（延迟由渲染函数按序号给）→ 不呆板 ✓ */ @keyframes achIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (max-width:640px){ .badges{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px} .badge{min-height:0;font-size:11.5px} .badge .bi{width:26px;height:26px;font-size:14px;border-radius:8px} } /* ---------- toast ---------- */ #toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:99;align-items:center} .toast{ padding:10px 18px;border-radius:9px;font-size:12.5px;background:var(--panel);border:1px solid var(--line);color:var(--txt); box-shadow:0 8px 26px #0008;animation:up .3s ease both;max-width:90vw;text-align:center; } .toast.good{border-color:var(--green);background:var(--greenBg);color:var(--greenFg)} .toast.bad{border-color:var(--red);background:var(--redBg);color:var(--redFg)} .toast.gold{border-color:var(--amber);background:var(--amberBg);color:var(--txt)} @keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .hidden{display:none!important} footer{margin-top:22px;text-align:center;color:var(--dim);font-size:10.5px;line-height:1.9} /* ================= 悬停查词 ================= 鼠标在英文单词上停留一会儿，弹出：中文释义 / 音标 / 构词拆分 / 词性。 数据来自 dict.json（build_dict.py 生成），含： w 3000 个词的释义+音标+构词 i 18000+ 条「变形 → 原词」，所以 adds / was / watching 也能查到 词库内的词还会**叠加**当前词条已有的 parts/morph（阅读里的生词、 拆词模式里的词都走这条），这样「单词拆分」不依赖词典里有没有。 交互上有意做的几个选择： · 延迟 350ms 而不是 2 秒——2 秒太慢，查词会变成负担 · 已经在弹窗里显示过的词**立即**再弹，不再等延迟 · 阅读里的**目标生词不弹**——点它是出选择题，两个交互别打架 · 鼠标移开立刻收起；滚动 / 点击也收起，避免跟着乱飘 */ /* ================= 悬停查词弹窗 ================= */ .dicttip{position:fixed;z-index:9999;max-width:330px;padding:10px 12px; background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.55; color:var(--fg);pointer-events:auto} .dtword{font-size:16px;font-weight:700;color:var(--blue);display:flex;align-items:baseline;gap:7px} .dtipa{font-size:12.5px;font-weight:400;color:var(--dim)} .dtsay{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.16); color:var(--dim);border-radius:6px;width:26px;height:23px;cursor:pointer;font-size:12px;line-height:1} .dtsay:hover{color:var(--blue);border-color:rgba(62,166,255,.5)} .dtvia{font-size:12px;color:#ffd479;margin-top:2px} .dtcn{margin-top:5px;color:var(--txt)} .dtpos{color:#43d17c;margin-right:5px;font-size:12px} .dtsec{margin-top:7px;font-size:12px;color:#5b6b80} /* 每个部件：英文一行、中文一行，中间用 + 连起来 */ .dtps{display:flex;align-items:stretch;gap:2px;margin-top:3px;flex-wrap:wrap} .dtps .dtp{display:flex;flex-direction:column;gap:1px;padding:2px 6px; border-radius:6px;background:rgba(255,255,255,.045)} .dtps .dtp b,.dtps .dtp{font-weight:600;color:#ffd479;font-size:12.5px} .dtps .dtp i{font-style:normal;font-weight:400;color:var(--dim);font-size:11.5px; max-width:130px} .dtps em{align-self:center;font-style:normal;color:#5b6b80;font-size:12px;padding:0 1px} .dtrule{margin-top:3px;font-size:11px;color:#5b6b80} /* 例句 */ .dtex{margin-top:7px;padding:6px 8px;border-radius:7px;background:var(--panel2)} .dtexen{font-size:12.5px;color:var(--fg);line-height:1.5} .dtexcn{font-size:11.5px;color:var(--dim);margin-top:2px} /* 同一词根：可点，点了换查那个词 */ .dtfam{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px} .dtfw{font-family:inherit;font-size:12px;padding:2px 7px;border-radius:6px;cursor:pointer; background:rgba(62,166,255,.10);border:1px solid rgba(62,166,255,.28);color:#8ec8ff} .dtfw:hover{background:rgba(62,166,255,.22);color:#cde6ff} .dtsec b{color:#ffd479;font-weight:600} .dtform{display:inline-block;margin-top:5px;padding:0 6px;font-size:11.5px;line-height:17px; border-radius:5px;color:var(--blue);background:rgba(62,166,255,.13)} .dtmorph{margin-top:6px;font-size:12px;color:var(--dim);border-top:1px solid rgba(255,255,255,.07);padding-top:6px} .dthint{margin-top:6px;font-size:12px;color:var(--dim2);font-style:normal} /* ================= 阅读通关 ================= */ /* 返回级别列表：做得低调一点，别抢正文的注意力 */ .rdbk{margin-right:2px} /* 阅读页：说明与范围行的间距收紧，让级别卡片整体上移、靠近顶部按钮区。 加了一行回译提示后，这里再收一点，抵消掉新增的高度。 */ #v-read .sub{margin-bottom:7px;line-height:1.5} #v-read .sub .rtip{color:#7f9a8b} #v-read .sub .rtip b{color:var(--greenFg)} #v-read .scopeline{margin-bottom:8px;padding:6px 11px} .rdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-bottom:10px} /* 阅读级别的方块：有短文的可点（绿），没短文的淡显 */ .rdtile{position:relative;cursor:pointer;font-family:inherit;padding:8px 6px 6px;border-radius:8px; border:1px solid var(--line);background:var(--bg2);color:var(--txt);transition:.14s; display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left} .rdtile:hover{border-color:var(--blueBorder);background:var(--selBg)} .rdtile .tn{font-size:12px;font-weight:600} .rdtile .tp{font-size:9.5px;color:var(--dim)} .rdtile.has{border-color:var(--greenBg);background:var(--greenBg)} .rdtile.has .tn{color:var(--greenFg)} .rdtile.cur{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset} .rdtile.none{opacity:.32} .rdtile.none:hover{border-color:var(--line);background:var(--bg2)} /* 未解锁（上一级还没通关）——和闯关页的 .lvtile.lock 一个观感 */ .rdtile.lock{opacity:.42;cursor:not-allowed} .rdtile.lock:hover{border-color:var(--line);background:var(--bg2)} .rdtile .rdlk{position:absolute;top:5px;right:5px;font-size:9px;opacity:.75} .rdtile.done{border-color:var(--greenBg);background:var(--greenBg)} .rdtile.done .tn{color:var(--greenFg)} .rdpager{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;color:var(--dim)} .readbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px} .rblab{color:var(--dim);font-size:12.5px} .rbdone{margin-left:auto;color:var(--dim);font-size:13px} .readprog{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:16px} .readprog i{display:block;height:100%;width:0;border-radius:3px;background:var(--green);transition:width .3s} .passage{line-height:1.75} .rp{display:flex;gap:10px;align-items:flex-start;padding:7px 0 6px} .rp + .rp{border-top:1px solid rgba(255,255,255,.045)} .rptxt{flex:1;min-width:0} .rpen{font-size:15.5px;color:var(--txt)} .rpcn em{font-style:normal;color:var(--amber);background:var(--amberBg); border-radius:4px;padding:0 3px;border-bottom:1px solid var(--amberBorder)} .psay{flex:none;background:var(--panel2);border:1px solid var(--line);color:var(--dim); border-radius:7px;width:30px;height:27px;cursor:pointer;font-size:13px;line-height:1} .psay:hover{color:var(--blue);border-color:rgba(62,166,255,.5)} .rp.speaking{background:rgba(62,166,255,.07);border-radius:8px} .rp.speaking .psay{color:var(--blue);border-color:rgba(62,166,255,.6)} /* 句末的「中」按钮：默认很淡，鼠标移到句子才明显；点开后变蓝并保持 */ .pcn,.pen{display:inline-block;vertical-align:2px;margin-left:6px;padding:0 5px; font-size:11px;line-height:16px;border-radius:5px;cursor:pointer; background:none;border:1px solid rgba(255,255,255,.14);color:#5b6b80; opacity:.55;transition:opacity .15s,color .15s,border-color .15s} .rp:hover .pcn,.rp:hover .pen{opacity:1} .pcn:hover,.pen:hover{color:var(--blue);border-color:rgba(62,166,255,.5)} .pcn.on,.pen.on{color:var(--blue);border-color:rgba(62,166,255,.55); background:rgba(62,166,255,.12);opacity:1} /* 「只看中文」时点开的英文：右下缩进 + 蓝竖线，和中文的黄色竖线区分开 */ .rpen.rev{margin-top:5px;padding-left:9px;border-left:2px solid rgba(62,166,255,.35); font-size:14.5px;color:var(--fg)} /* 内联显示的中文：跟在英文句后面，缩进一点，不抢英文的视觉重心 */ /* 内联显示的中文：左侧一条竖线，把「英文句 + 它的中文」绑成一组， 避免中文看起来像下一句的开头 */ .rpcn{font-size:13.5px;color:var(--txt);margin-top:5px; padding-left:9px;border-left:2px solid var(--amberBorder)} /* ---- 登录/注册遮罩 ---- */ /* 用 flex-start + 卡片 margin:auto：卡片比视口高时不会裁掉上下， 登录窗底部的备案信息在任何窗口高度下都看得见、也滚得到 */ .authpop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;align-items:flex-start; justify-content:center;background:rgba(6,10,15,.86);padding:18px 12px 56px;overflow:auto; -webkit-overflow-scrolling:touch} .authcard{max-width:min(352px,100%)} .authpop.hidden{display:none} .authcard{width:100%;max-width:352px;margin:auto;background:var(--panel); border:1px solid var(--line);border-radius:14px;padding:20px 20px 16px; box-shadow:0 18px 60px rgba(0,0,0,.6)} .authbrand{text-align:center;margin-bottom:15px} .authlogo{font-size:13.5px;letter-spacing:.16em;color:var(--blue);font-weight:600} .authsub{font-size:11.5px;color:var(--dim);margin-top:3px} /* 作者/出处：一行小字，可点进博客 */ /* 站名：纯文字，不加任何背景（用户要求），小且淡，不违眼 */ .brandsite{display:block;width:fit-content;font-size:9.5px;line-height:1.35; padding:0;letter-spacing:.2px;font-weight:400;color:var(--dim);text-decoration:none; background:none;transition:color .18s} .brandsite:hover{color:#a8bccd} /* 登录窗顶部：窗口标题栏的样子；上移 8px 给下面的品牌区留空间 */ /* 标题几乎贴到卡片顶边（卡片内边距 20px，这里抵消 16px → 只剩 4px） */ .authtitle{text-align:left;margin:-16px 0 12px;padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.05)} .authsite{display:inline-block;font-size:10px;line-height:1.4; padding:0;letter-spacing:.4px;font-weight:400;color:var(--dim);text-decoration:none; background:none;transition:color .18s} .authsite:hover{color:#a8bccd} .authtabs{display:flex;gap:6px;margin-bottom:13px} .authtabs button{flex:1;font-family:inherit;cursor:pointer;font-size:12.5px; padding:7px 0;border-radius:8px;border:1px solid var(--line);background:var(--panel3); color:var(--dim);transition:.14s} .authtabs button.on{background-color:var(--selBg);border-color:var(--selBorder);color:var(--selFg)} .authfield{display:block;font-size:11.5px;color:var(--dim);margin-bottom:10px} .authfield input{display:block;width:100%;margin-top:5px;font-family:inherit; font-size:13.5px;padding:8px 10px;border-radius:8px;border:1px solid var(--line); background:var(--bg2);color:var(--fg)} .authfield input:focus{outline:none;border-color:var(--blue)} .authfield.hidden{display:none} .autherr{font-size:11.5px;color:#ff8a8a;background:rgba(255,110,110,.08); border:1px solid rgba(255,110,110,.28);border-radius:8px;padding:7px 10px;margin-bottom:10px} .autherr.hidden{display:none} .authnote{font-size:11px;color:#7f9a8b;margin:10px 0 0;min-height:15px;text-align:center} .authlegal{font-size:10.5px;color:var(--dim2);line-height:1.6;margin:12px 0 0; text-align:center; /* 与卡片上方的说明行保持一致，整体居中 */ border-top:1px solid var(--line);padding-top:11px} .authlegal b{color:var(--greenFg)} /* 定性文案点亮：浅绿胶囊（一眼能看见，又不喧宾夺主） */ .hlgreen{color:var(--greenFg)} .authlegal{line-height:1.7} /* 备案信息：小字、暗色，符合"页面底部/登录页展示备案号"的常规做法 */ /* 钉在遮罩底部 —— 不管卡片多高、窗口多窄，备案号都看得见 */ /* 钉在遮罩底部并加一层底衬：卡片再高、窗口再矮、遮罩再暗，备案号都清晰可见 */ /* 总览页底部的备案信息（只在这里显示） */ .homebeian{margin:10px 0 2px;text-align:center;font-size:11px;color:var(--dim2);line-height:1.8} .homebeian a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--dim2)} .homebeian a:hover{color:#8fb8d8;border-bottom-color:#4a6b86} .homebeian .hbsep{margin:0 6px;color:var(--dim2)} .authbeian a:hover{color:#8fb8d8;border-bottom-color:#4a6b86} .footbeian{display:inline-block;margin-top:3px;color:var(--dim2);font-size:11px} .footbeian a{color:var(--dim2);text-decoration:none;border-bottom:1px dotted var(--dim2)} .footbeian a:hover{color:#8fb8d8;border-bottom-color:#4a6b86} /* 设置页的账号卡片 */ .acctrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:12px;color:var(--dim);padding:6px 0} .acctrow b{color:var(--fg);font-size:13px} .acctrow input{font-family:inherit;font-size:12.5px;padding:6px 9px;border-radius:7px; border:1px solid var(--line);background:var(--bg2);color:var(--fg);width:150px} .acctrow input:focus{outline:none;border-color:var(--blue)} .acctrow.danger{border-top:1px solid var(--line);margin-top:6px;padding-top:11px} .accthint{color:#7a5a5a;font-size:11px} /* 数据来源与许可 */ .srclist{margin:4px 0 2px} .srcrow{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline; padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:11.5px} .srcrow:last-child{border-bottom:none} .srcf{color:var(--txt);min-width:150px;font-weight:600} .srcs{color:var(--dim);flex:1;min-width:180px;line-height:1.6} .srcs a{color:var(--blue);text-decoration:none;border-bottom:1px dotted var(--dim2)} .srcs a:hover{color:#cfe6ff} .srclink{margin:8px 0 0;font-size:11px;color:var(--dim2);line-height:1.8} .srclink a{color:var(--blue);text-decoration:none;border-bottom:1px dotted var(--dim2)} .srclink a:hover{color:#cfe6ff} .srcdot{margin:0 6px;color:var(--dim2)} .btn.slim{padding:6px 11px;font-size:12px} .btn.danger{border-color:var(--red);color:var(--redFg);background:var(--redBg)} .btn.danger:hover{filter:brightness(1.08)} /* ---- 成就展示窗 ---- */ .achpop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center; justify-content:center;background:rgba(6,10,15,.55); /* 遮罩不吃点击：不打断做题、不挡弹窗；只有卡片可点（跳过） */ pointer-events:none} .achpop.hidden{display:none} .achcard{pointer-events:auto;cursor:pointer;min-width:270px;max-width:340px; padding:22px 26px 18px;border-radius:18px;text-align:center; background:var(--panel);border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.28)} .achcap{font-size:11px;color:var(--dim);letter-spacing:1.5px;margin-bottom:12px} .achicon{font-size:54px;line-height:1.15;transition:transform .08s} .achname{font-size:17px;font-weight:700;color:var(--greenFg);margin-top:6px} .achdesc{font-size:11.5px;color:var(--dim);margin-top:5px;min-height:30px} .achhint{font-size:10px;color:var(--dim);margin-top:12px} /* 闪动阶段：图标快速跳动 */ .achpop.flash .achicon{animation:achFlash .1s steps(2,end) infinite} @keyframes achFlash{ 0%{transform:scale(1) translateY(0);opacity:.55} 50%{transform:scale(1.14) translateY(-3px);opacity:1} 100%{transform:scale(1) translateY(0);opacity:.7} } /* 定格阶段：金边 + 扩散光环 + 图标弹跳 */ .achpop.land .achcard{border-color:var(--amber);animation:achLand .62s ease-out} @keyframes achLand{ 0%{transform:scale(.82);box-shadow:0 0 0 0 rgba(255,215,110,.75)} 60%{transform:scale(1.07);box-shadow:0 0 0 20px rgba(255,215,110,0)} 100%{transform:scale(1);box-shadow:0 18px 50px rgba(0,0,0,.6)} } .achpop.land .achname{color:var(--amber)} .achpop.land .achicon{animation:achIconPop .7s ease-out} @keyframes achIconPop{ 0%{transform:scale(.55) rotate(-14deg)} 55%{transform:scale(1.38) rotate(7deg)} 100%{transform:scale(1) rotate(0)} } /* ---- 奖励系统 ---- */ #rewardToast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:70; display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .rwtoast{min-width:210px;text-align:center;padding:10px 16px;border-radius:12px; background:var(--panel);border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.18);animation:rwIn .35s ease-out} .rwtoast.perfect{border-color:var(--amber);background:var(--amberBg)} .rwtoast .rt{font-size:13.5px;font-weight:700;color:var(--greenFg)} .rwtoast.perfect .rt{color:var(--txt)} .rwtoast .rs{font-size:11px;color:var(--dim);margin-top:2px} .rwtoast .rx{font-size:12px;font-weight:700;color:var(--green);margin-top:4px} .rwtoast.perfect .rx{color:var(--greenFg)} @keyframes rwIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}} /* 宽度：约统计行的两倍（660px）并居中。原来没上限会铺满整行（右边空一大片）， 只收太窄又显得挤 —— 这个宽度下明细标签一行能放下两三个。 */ /* --rwtot：本局奖励的**统一字号** —— 小标题、图标、分数都用它， 三者永远一样大（用户要求），三档视口也只改这一处。 */ .rwcard{--rwtot:32px;margin:13px auto 0;max-width:660px;padding:13px 18px;border-radius:12px; background:var(--panel);border:1px solid var(--line)} /* 小标题与分数**同一行**、整组居中：小标题小且淡，分数大且亮， 一眼看到的还是分数（荣耀位不丢），但不再多占一行。 */ .rwcard .rwch{display:flex;justify-content:center;align-items:baseline; gap:11px;line-height:1.08;margin-top:1px} /* 小标题按**视觉等大**匹配分数（不是字号相同）： 汉字字形填满 em 方框，数字只有约 0.72em 高 —— 同字号时汉字看着大 24% （canvas 实测：32px 下数字墨迹 25px、汉字 31px）。 实测数字墨迹约 0.76em、汉字约 1.0em，所以取 0.78 让两者墨迹对齐。 */ /* 标签也要「点亮」：暖金色 + 两层光晕。比分数略暗一档（#e9c96e vs var(--amber)）， 光晕也弱一档 —— 这样整行都在发光，主次仍靠亮度区分。 */ .rwcard .rwcap{font-size:calc(var(--rwtot) * .78);letter-spacing:.5px; color:#e9c96e;white-space:nowrap;font-weight:700; text-shadow:0 0 10px rgba(255,215,110,.45), 0 0 22px rgba(255,215,110,.2)} /* emoji 的墨迹比汉字还大（实测 25.6px 字号 → 30px 墨迹），再收一档。 注意：emoji 是彩色位图，text-shadow 对它无效，得用 drop-shadow 才能点亮。 */ .rwcard .rwicon{font-style:normal;font-size:.8em;margin-right:.1em; filter:drop-shadow(0 0 6px rgba(255,215,110,.65))} .rwcard .rwsum{display:inline-flex;align-items:baseline;gap:3px} .rwcard .rwch b{color:var(--amber);font-size:15px} .rwcard .rwunit{font-size:calc(var(--rwtot) * .42);color:var(--dim);letter-spacing:1px} /* 总分滚动 + 落地发光 */ .rwcard .rwch b.rwtotal{font-size:var(--rwtot);font-variant-numeric:tabular-nums; display:inline-block;font-weight:800; text-shadow:0 0 16px rgba(255,215,110,.55), 0 0 32px rgba(255,215,110,.3); transition:transform .18s} .rwcard .rwch b.rwtotal.pop{animation:rwPop .55s ease-out} @keyframes rwPop{ 0%{transform:scale(1)} 35%{transform:scale(1.28);text-shadow:0 0 22px rgba(255,215,110,.95)} 100%{transform:scale(1);text-shadow:0 0 12px rgba(255,215,110,.55)} } .rwcard{animation:rwCardIn .4s ease-out} @keyframes rwCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* 明细标签逐条淡入（错开出现） */ .rwcard .rwcl span.chin{opacity:0;animation:rwChipIn .38s ease-out forwards} @keyframes rwChipIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}} /* 顶部总经验涨分时闪一下 */ .stat b.xpup{animation:rwXpUp .7s ease-out} @keyframes rwXpUp{ 0%{transform:scale(1);color:inherit} 30%{transform:scale(1.22);color:var(--amber);text-shadow:0 0 14px rgba(255,215,110,.8)} 100%{transform:scale(1);color:inherit} } .stat b{display:inline-block;font-variant-numeric:tabular-nums} .rwcard .rwcl{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;justify-content:center} .rwcard .rwcl span{font-size:11px;color:var(--dim);background:var(--panel2); border:1px solid #223c2c;border-radius:99px;padding:3px 9px} .rwcard .rwcl b{color:var(--greenFg)} /* 音效方案列表 */ /* 设置页：分组工具条 + 卡片折叠 */ .setfoldbar{display:flex;align-items:center;gap:8px;margin:0 0 12px} .setfoldbar .sl{font-size:11.5px;color:var(--dim);margin-right:auto} .setfoldbar .btn{padding:5px 11px;font-size:11.5px} .setcard > h2{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none} .setcard > h2:hover{color:var(--greenFg)} .setcard > h2 .foldsum{font-size:11px;font-weight:400;color:var(--dim); margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%} .setcard > h2 .foldarrow{font-size:10px;color:var(--dim);transition:transform .2s;flex:none} .setcard.fold > h2 .foldarrow{transform:rotate(-90deg)} .setcard.fold > h2 .foldsum{color:var(--dim)} /* 折叠：只留标题行。用 CSS 而不是重排 DOM，所以折叠状态下内容仍在（只是不显示） */ .setcard.fold > *:not(h2){display:none} .sfxlist{display:flex;flex-direction:column;gap:8px} .sfxrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px; border:1px solid var(--line);background:var(--bg2)} .sfxrow.on{border-color:var(--greenBg);background:var(--greenBg)} .sfxrow .sfxi{flex:1;min-width:0} .sfxrow .sfxi b{font-size:12.5px;display:block} .sfxrow .sfxi b i{font-style:normal;font-size:10px;color:var(--greenFg); border:1px solid var(--greenBg);border-radius:99px;padding:0 6px;margin-left:4px} .sfxrow .sfxi span{font-size:11px;color:var(--dim);display:block;margin-top:2px} .sfxrow .btn{padding:6px 10px;font-size:11.5px;white-space:nowrap} /* 滚动中的数字：等宽，免得位数变化时左右抖 */ .rnum,#sXP,.rwtotal{font-variant-numeric:tabular-nums;font-style:normal} .rwcard .rwcm{font-size:10.5px;color:var(--dim);margin-top:8px;text-align:center} /* 关卡星级 */ .lvstars{font-size:12px;letter-spacing:1px;color:var(--amber);margin-left:6px} .rdtile .rstars{font-size:8.5px;color:var(--amber);letter-spacing:.5px} /* 成就进度条 */ .badge .bprog{display:block;height:3px;border-radius:99px;background:var(--panel3);overflow:hidden;margin-top:6px; margin-top:5px;width:100%} .badge .bprog i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#8bf0c0)} .badge .bnum{font-size:9.5px;color:var(--dim);margin-top:3px} .rw{cursor:pointer;font-weight:700;color:var(--redFg);border-bottom:1px dashed var(--red)} .rw:hover{background:var(--redBg)} .rw.ok{color:var(--greenFg);border-bottom-color:var(--green)} .rw.ok:hover{background:var(--greenBg)} .readtips{margin-top:16px;color:var(--dim);font-size:13px} .readtips .btn{margin-top:8px} /* 矮窗口再压一档：只在视口高度不够时生效，宽屏不受影响。 目标始终是「再来一局」不用滚动就能看到。 */ /* 中间档：常见笔记本（1280×720 → 视口 580）走这一档。 刻意**不动留白**，只省一行英文副标题 + 卡片/曲线各略收一点， 这样既有呼吸感，按钮也不用滚。 */ @media (max-height: 640px){ .result .cap{display:none} .result .big{font-size:26px} .result .lines{margin-top:10px} .rwcard{padding:11px 16px} .rwcard{--rwtot:29px} .rwcard .rwcl{margin-top:7px} .rwcard .rwcm{margin-top:6px} .result .curvebox{margin-top:12px} .result .curvebox svg{height:28px} .result .resultbtns{margin-top:15px} } /* 真的很矮才用紧凑版：把留白也收掉 */ @media (max-height: 575px){ /* 只有真的很矮才用紧凑版 */ .result{padding:5px 10px 12px} .result .big{font-size:21px} /* 「ROUND COMPLETE」这行英文可省（大标题已经说明了） */ .result .cap{display:none} .result .lines{margin-top:6px} .result .lines{margin-top:6px;gap:6px 14px} .rwcard{margin-top:8px;padding:8px 13px} .rwcard{--rwtot:25px} .rwcard .rwcl{margin-top:5px} .rwcard .rwcm{margin-top:5px} .result .curvebox{margin-top:6px} .result .curvebox svg{height:20px} /* 矮窗口把曲线压扁，按钮优先 */ .result .resultbtns{margin-top:9px} } /* ---------- 添加到桌面 提示条 ---------- */ .a2hs{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;display:none; background:var(--panel2);border:1px solid var(--line);border-radius:14px; padding:12px 13px;box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--txt)} .a2hs.on{display:block;animation:a2hsIn .28s ease-out both} @keyframes a2hsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .a2hs .a2t{font-weight:700;font-size:14px;padding-bottom:2px} .a2hs .a2s{font-size:12.5px;color:var(--dim);line-height:1.7} .a2hs .a2s b{color:var(--txt)} .a2hs .a2btns{display:flex;gap:8px;margin-top:10px;align-items:center} .a2hs .a2go{flex:1 1 0;background:linear-gradient(135deg,var(--green),var(--blue));color:#06121a; border:0;border-radius:10px;padding:10px 12px;font-weight:700;font-size:14px} .a2hs .a2no{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--dim); border-radius:10px;padding:10px 12px;font-size:13px} .a2hs .a2x{position:absolute;top:6px;right:9px;background:none;border:0;color:var(--dim2); font-size:18px;line-height:1} /* 播音员卡片折叠（与设置卡片同一套记忆 ✓） */ .vset.fold > *:not(.vsethead){display:none} .vset.fold .vfoldarrow{transform:rotate(-90deg)} .vsethead:hover b{color:#9fe6c4} /* 手机端：标签栏**吸顶** ✓ 为什么 ✗：模式页（词义速攻/句子补全/拆词…）内容很长 ✓ 一路往下做题后 ✓ 顶部那排标签被滚出屏幕 ✗ → 点不到「总览」✗ → 改成 sticky ✓ 任何时候都能一键回总览 ✓ */ .tabs{position:sticky;top:0;z-index:70;background:transparent; padding:8px 0 6px;margin-top:6px; box-shadow:0 6px 14px -10px rgba(0,0,0,.9)} @media (max-width:640px){ .tabs{top:0;margin-top:0;padding:6px 0 5px} } /* 词典浮层必须高于语法解析面板（z-index:99999）✓ 否则看得见 data 却看不见浮层 ✗ */ #dictTip, .dicttip{z-index:100100 !important} /* 必须高于 .morphsheet(100050)，否则被词根弹层盖住 */ /* 「下一句 / 下一个」固定到右下角 ✓ 单手可点 ✓ */ #bugNext, #moNext, #czNext{ position: fixed !important; right: 14px; bottom: 210px; z-index: 95; min-width: 122px; box-shadow: 0 8px 22px rgba(0,0,0,.5); } @media (max-width: 640px){ /* 手机上抬得更高 ✓ 避开浏览器工具栏与手势区 ✓ 拇指更好按 ✓ */ #bugNext, #moNext, #czNext{ right: 12px; bottom: 200px; min-width: 116px; } } /* spacing-tuned：收紧各模式入口页"说明 → 按钮"的间距 ✓ */ [id$="Intro"] .rquick{margin:8px 0 8px} [id$="Intro"] .scopeline{margin-bottom:6px} [id$="Intro"] .btn.wide{margin-top:0} [id$="Intro"] h2{margin-bottom:6px} [id$="Intro"] .sub{margin-bottom:10px} [id="moIntro"] .rquick{margin:6px 0 8px} /* spacing-clamp：入口页统一压紧 ✓ 说明区与「开始」按钮之间不留大空隙 ✓ */ [id$="Intro"] > *{margin-top:0 !important; margin-bottom:8px !important} [id$="Intro"] > h2{margin-bottom:6px !important} [id$="Intro"] > .sub{margin-bottom:8px !important} [id$="Intro"] > .rules{display:none !important} [id$="Intro"] > .rquick{margin:6px 0 !important} [id$="Intro"] > .btn.wide, [id$="Intro"] > .btn.big{margin-top:0 !important; margin-bottom:0 !important} /* spacing-top：收紧"顶栏/logo → 第一张卡片"的顶部间距 ✓ */ .wrap{padding-top:8px !important} .view{margin-top:6px !important} #v-home .card.hero{margin-top:0 !important} #v-home .card.hero .actzone{margin-top:0 !important} #v-home .card.hero .sub{margin-bottom:10px !important} /* home-center：总览首张卡片在"顶栏下方剩余空间"里垂直居中 ✓ */ #v-home.on{ display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - 132px); } #v-home.on > .card.hero{margin-top:0 !important; margin-bottom:0 !important} @media (min-width:641px){ #v-home.on{min-height:calc(100vh - 150px)} } /* algPanel 折叠：与设置页其它卡片一致 ✓ */ #algPanel.fold > *:not(h2){display:none !important} #algPanel.fold h2 .foldarrow{transform:rotate(-90deg)} #algPanel h2{cursor:pointer;user-select:none} #algPanel h2{display:flex;align-items:center;gap:6px} /* algPanel spacing：与 .setcard 邻居保持同样的 12px 间距 ✓ */ #algPanel{margin-top:12px} #algPanel + .setcard{margin-top:12px} #algPanel + .card{margin-top:12px} /* 箭头靠右、与原生卡片一致 ✓ */ #algPanel h2{display:flex;align-items:center;gap:6px} #algPanel h2 .foldarrow{margin-left:auto;flex:none;font-size:10px;color:var(--dim);transition:transform .2s} /* 只保留第一个箭头 ✓ 防止与原生装饰重复 ✗ */ #algPanel h2 .foldarrow ~ .foldarrow{display:none !important} #algPanel h2 .foldsum{display:none !important} /* onlineGated: hide online counter until state/login settles */ #onlineTag{visibility:hidden} /* authPopPassthrough: 登录弹窗的遮罩层不再拦截点击 ✓ 只有弹窗本身可点 ✓ 避免"整页按钮点不动" */ #authPop{pointer-events:none !important} #authPop > *{pointer-events:auto !important} /* tabsAboveFooter: 底部标签栏必须盖在页脚之上，否则页脚会吃掉点击 */ .tabs{position:relative;z-index:70;pointer-events:auto} #pageFooter{position:relative;z-index:1} body{padding-bottom:64px} /* 给固定 tab 栏留出空间，避免遮住页脚内容 */ /* oldA2hsHidden: 旧弹窗彻底隐藏 ✓ 只保留新版 myA2hsPopup ✓ */ .a2hs, .a2hs.on{display:none !important;visibility:hidden !important;pointer-events:none !important} /* bgUniform: 背景光晕固定在视口 ✓ 切换页面时不再变化 ✓ */ body{ background-attachment: fixed, fixed, fixed !important; background-repeat: no-repeat, no-repeat, no-repeat !important; } /* fbAlertNeutral: 反馈按钮保持与其它 tab 相同的边框 ✓ 只保留右上角数字角标 ✓ */ .tab.alert{border-color:var(--line) !important;box-shadow:none !important} .tab.on.alert{border-color:var(--selBorder) !important;box-shadow:0 0 0 1px var(--selBorder)33 inset !important} /* ---- 可访问性（2026-10-24）---- */ /* 跳过链接：默认「视觉隐藏」——用裁切而不是负偏移，避免个别 WebView/缩放下露出来 */ .skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; background:#fff;color:#0b0f14;font:600 14px/1.4 system-ui,sans-serif;text-decoration:none} /* 键盘聚焦时才出现（鼠标点击不触发 :focus-visible，不会闪） */ .skip-link:focus,.skip-link:focus-visible{ position:fixed;left:10px;top:10px;width:auto;height:auto;margin:0;padding:10px 14px; clip:auto;clip-path:none;overflow:visible;z-index:99999;border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.35)} :focus-visible{outline:2px solid #6aa9ff;outline-offset:2px;border-radius:6px} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} } /* 例句朗读小喇叭（2026-10-24） */ .dtexspk{margin-right:4px;vertical-align:-2px;padding:0 2px;line-height:1; background:none;border:0;cursor:pointer;font-size:13px;opacity:.75} .dtexspk:hover,.dtexspk:focus-visible{opacity:1} /* 答案明细里例句的朗读小喇叭 */ .dexspk{margin-right:4px;vertical-align:-1px;padding:0 2px;line-height:1; background:none;border:0;cursor:pointer;font-size:13px;opacity:.75} .dexspk:hover,.dexspk:focus-visible{opacity:1} /* 揪错讲解里的译文块（点「中」切换） */ .dexcn{margin-top:4px;font-size:12.5px;color:var(--dim);line-height:1.6} .dexcn .cnlbl{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px; background:var(--panel2);color:var(--blue);font-size:11px} /* 句子补全：作答后的解析块 */ .czfb{margin-top:12px;padding-top:10px;border-top:1px solid #1b2733;text-align:left} .czfb .row2{margin:4px 0} .czfb .ipainline{margin-left:6px;color:var(--dim2);font-size:12.5px} .czfb .dexcn{margin-top:3px} .czfb .wordtab{margin-top:8px} /* 句子补全的拼写输入行 */ .cztype{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap} .cztype.hidden{display:none} .cztype input{flex:1 1 150px;min-width:0;padding:10px 12px;border-radius:10px; border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:15px; letter-spacing:.3px} .cztype input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(61,220,151,.15)} .cztype .btn{flex:none;padding:10px 14px} /* 今日复习卡片 */ .duemain{font-size:13.5px;line-height:1.7;color:var(--dim);margin:2px 0 8px} .duemain b{color:var(--green);font-size:15px} .duemain .dm-rest{color:var(--dim2)} .duemain.zero b{color:var(--green)} .duehint{margin-top:6px;font-size:11.5px;line-height:1.7;color:#7f93a8} .duehint i{font-style:normal;color:var(--dim)} #dueFill{background:linear-gradient(90deg,var(--green),var(--blue))} #dueCard.warn #dueFill{background:linear-gradient(90deg,#e0b062,#e08a62)} #dueCard.bad #dueFill{background:linear-gradient(90deg,#e08a62,#e06262)} /* 未来 7 天到期柱状图 */ .due7{display:flex;gap:5px;align-items:flex-end;margin-top:10px} .due7 .d7{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0} .due7 .d7 .bar{width:100%;height:34px;display:flex;align-items:flex-end;background:var(--panel2);border-radius:3px} .due7 .d7 .bar i{display:block;width:100%;background:var(--line);border-radius:3px;min-height:2px} .due7 .d7 b{font-size:11px;color:var(--dim2);font-weight:600;line-height:1.2} .due7 .d7 em{font-size:9.5px;color:var(--dim2);font-style:normal;line-height:1.2;white-space:nowrap} .due7 .d7.today .bar i{background:var(--green)} .due7 .d7.today b{color:var(--green)} .due7 .d7.today em{color:var(--green)} #statDue.hot b{color:#ffc46b} /* 顶栏四格（今日到期/连胜/已掌握/总经验）：小屏标签降到 10px， 否则「已掌握 · 学 514」会被截成「学 5…」 */ @media (max-width: 520px){ #statStrip .stat span, .topbar .stats .stat span{ font-size: 10px; } #statStrip .stat b, .topbar .stats .stat b{ font-size: 13px; } } /* ================= 主题 / 配色（2026-11-01） ================= 5 套方案，挂在 ，由 s06.js 切换并写入 localStorage。 只覆盖 CSS 变量，不改布局、不改业务逻辑；默认 dark（与历史深色青绿一致）。 浅色方案均按「深色文字 + 浅色底」重算过对比度，不会出现白底白字。 */ :root{ /* 衍生色：从高频硬编码色抽出来，便于每套主题统一覆盖 */ --bg2:#0b1119; --panel3:#131a24; --line2:#2c3d55; --dim2:#5a6672; --greenBg:#12251a; --greenFg:#a8e6c4; --redBg:#5c2b2f; --redFg:#ff9d9d; --blueBg:#2f5d86; } /* 1) 深色青绿（默认） */ :root[data-theme="dark"]{ --btnBg:#1d3a57; --btnFg:#eaf2ff; --btnBorder:#2f5d86; --btnPrimaryBg:linear-gradient(180deg,#1d4a33,#123024); --amberBg:#2a2110; --amberBorder:#7a5a1e; --blueBorder:#2c4a63; --selBg:#17293d; --selFg:var(--txt); --selBorder:var(--blueBg); --bg:#080c11; --bg2:#0b1119; --panel:#0f1621; --panel2:#141d2b; --panel3:#131a24; --line:#1f2b3d; --line2:#2c3d55; --txt:#e6edf5; --dim:#7f8fa4; --dim2:#5a6672; --green:#3ddc97; --greenBg:#12251a; --greenFg:#a8e6c4; --amber:#ffb454; --red:#ff6b6b; --redBg:#5c2b2f; --redFg:#ff9d9d; --blue:#4fa3ff; --blueBg:#2f5d86; --purple:#b07cff; } /* 2) 暖米白（浅色 · 暖底） */ :root[data-theme="warm"]{ --bg:#f6f3ec; --bg2:#efe9df; --panel:#fffdf8; --panel2:#faf6ee; --panel3:#f3ede2; --line:#e0d7c8; --line2:#cfc2ae; --txt:#2b2622; --dim:#6b6156; --dim2:#877c6e; --green:#1e7d5a; --greenBg:#dcefe4; --greenFg:#17624a; --amber:#9a6413; --amberBg:#fdf3e3; --amberBorder:#e6cfa8; --red:#b83b2e; --redBg:#f7e3df; --redFg:#9c2f22; --blue:#1550a8; --blueBg:#dfeafb; --blueBorder:#b8cdea; --purple:#6f52bd; --selBg:#dcefe4; --selFg:#17624a; --selBorder:#b7dcc7; --btnBg:#fffdf8; --btnFg:#2b2622; --btnBorder:#e0d7c8; --btnPrimaryBg:linear-gradient(180deg,#2f8f68,#1e7d5a); } /* 3) 浅灰蓝 */ :root[data-theme="mist"]{ --bg:#eef2f7; --bg2:#e6ecf4; --panel:#ffffff; --panel2:#f7fafd; --panel3:#e9eff6; --line:#d3dde8; --line2:#bcc9d8; --txt:#1f2b3a; --dim:#5a6b7d; --dim2:#75859a; --green:#1a7f5a; --greenBg:#dcf0e7; --greenFg:#146247; --amber:#8f620f; --amberBg:#fdf5e4; --amberBorder:#e2d0a8; --red:#bd3a2c; --redBg:#f8e4e1; --redFg:#a32f22; --blue:#1550a8; --blueBg:#dfeafb; --blueBorder:#b8cdea; --purple:#6a4fc0; --selBg:#dfeafb; --selFg:#1f56a8; --selBorder:#b8cdea; --btnBg:#ffffff; --btnFg:#1f2b3a; --btnBorder:#d3dde8; --btnPrimaryBg:linear-gradient(180deg,#2f7fe0,#2f6fd0); } /* 4) 暖棕 / 奶油 */ :root[data-theme="cream"]{ --bg:#f3e9dc; --bg2:#ece0d1; --panel:#fff8ef; --panel2:#fdf3e6; --panel3:#f5e9d8; --line:#ddcbb4; --line2:#c9b298; --txt:#3a2e24; --dim:#6f5f50; --dim2:#8a7a68; --green:#2f7d4f; --greenBg:#dfeedd; --greenFg:#24613d; --amber:#a0522d; --amberBg:#f9efdf; --amberBorder:#ddcbb4; --red:#b33a2b; --redBg:#f6e3dd; --redFg:#9c2f22; --blue:#1550a8; --blueBg:#e7eefb; --blueBorder:#c3d4e6; --purple:#6f52bd; --selBg:#e2efdd; --selFg:#24613d; --selBorder:#c3d9bd; --btnBg:#fff8ef; --btnFg:#3a2e24; --btnBorder:#ddcbb4; --btnPrimaryBg:linear-gradient(180deg,#3d8f5f,#2f7d4f); } /* 5) 深蓝夜 */ :root[data-theme="night"]{ --btnBg:#1a2b4d; --btnFg:#dbe6ff; --btnBorder:#31436a; --btnPrimaryBg:linear-gradient(180deg,#2f5fa8,#1f4a8a); --amberBg:#3a2a14; --amberBorder:#6b5230; --blueBorder:#2f5c93; --selBg:#152748; --selFg:#9db8ff; --selBorder:#31436a; --bg:#0b1220; --bg2:#0a101c; --panel:#121c33; --panel2:#17233d; --panel3:#1a2742; --line:#243352; --line2:#31436a; --txt:#dbe6ff; --dim:#8ea0c4; --dim2:#6b7fa8; --green:#5b8cff; --greenBg:#152748; --greenFg:#9db8ff; --amber:#ffc46b; --red:#ff7b7b; --redBg:#3a1b28; --redFg:#ffb3b3; --blue:#7aa8ff; --blueBg:#1a2b4d; --purple:#b48cff; } /* ===== 外观 / 配色 色卡 ===== */ .themegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px} .themecard{ position:relative;display:flex;align-items:center;gap:10px; padding:10px 12px;border:1px solid var(--line);border-radius:12px; background:var(--panel2);color:var(--txt);cursor:pointer; font:inherit;text-align:left;line-height:1.3; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; } .themecard:hover{border-color:var(--green)} .themecard.on{border-color:var(--green);background-color:var(--panel);box-shadow:0 0 0 2px rgba(61,220,151,.16)} .themedots{display:inline-flex;gap:3px;flex:0 0 auto} .themedots i{width:10px;height:10px;border-radius:3px;display:block;border:1px solid rgba(0,0,0,.18)} .themename{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .themeticks{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:11px;line-height:1;font-weight:700;color:var(--greenFg);transition:.15s} .themecard.on .themeticks{display:inline-flex} .themedots, .themename{pointer-events:none} .themecard.on .themeticks{color:var(--greenFg);border-color:var(--green);background:var(--greenBg)} .themecard:hover .themeticks{border-color:var(--green)} @media (max-width:420px){ .themecard{padding:9px 10px;gap:8px} .themename{font-size:12px} } /* ===== 主题适配：.btn 的底色是深色渐变，文字不能用 var(--txt) （浅色主题下 --txt 是深色，会出现"深底深字"看不清） ===== */ .btn.big, .btn.primary{color:#eaf2ff} .btn.ghost{color:var(--txt)} /* ===== 主题适配 2：.trackrow .go（换库等深底小按钮）文字用浅色 ===== */ .trackrow .go{color:var(--btnFg)} /* beianlink 用主题蓝（原浏览器默认蓝） */ a.beianlink{color:var(--blue)} /* ===== range 滑块主题化（默认轨道是浏览器深灰） ===== */ input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:18px} input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%; background:var(--green);border:2px solid var(--panel);margin-top:-5px;cursor:pointer} input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--line)} input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--green);border:2px solid var(--panel);cursor:pointer} /* ===== #algPanel 说明段落：浅色主题用主题文字（原浅蓝灰看不清） ===== */ #algPanel > div{color:var(--txt)} #algPanel > div > div{color:var(--dim)} #algPanel .sub, #algPanel .hint{color:var(--dim)} /* ===== 主题切换：临时禁用所有过渡，避免整页颜色渐变闪烁 ===== */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{ transition:none !important; } /* ===== 根节点不做颜色过渡（避免切主题时整页渐变闪一下） ===== */ html, body{transition:background-color .18s ease, color .18s ease} /* ===== 系统深色 + 浅色主题：轻量提示（不挡色卡） ===== */ .theme-reverse-hint{display:none;margin-top:9px;padding:7px 10px;border-radius:8px; font-size:11px;line-height:1.65;color:var(--dim);background:var(--panel2); border:1px solid var(--line)} @media (prefers-color-scheme: dark){ html:not([data-theme="dark"]):not([data-theme="night"]) .theme-reverse-hint{display:block} } /* 尽量抑制浏览器强制反色：只声明配色方案，不改主题色值 */ html{color-scheme:light} html[data-theme="dark"], html[data-theme="night"]{color-scheme:only dark} html[data-theme="warm"], html[data-theme="mist"], html[data-theme="cream"]{color-scheme:only light} /* ===== 尽量阻止浏览器强制反色（浅色主题） ===== */ html[data-theme="warm"], html[data-theme="mist"], html[data-theme="cream"]{ forced-color-adjust:none; } html[data-theme="warm"] body, html[data-theme="mist"] body, html[data-theme="cream"] body, html[data-theme="warm"] .card, html[data-theme="mist"] .card, html[data-theme="cream"] .card, html[data-theme="warm"] .setcard, html[data-theme="mist"] .setcard, html[data-theme="cream"] .setcard{ forced-color-adjust:none; } /* ===== 答案明细：词根解说卡（紧凑 + 详情抽屉）===== */ .morphcard{position:relative;margin-top:9px;padding:9px 11px 26px;border-radius:10px; background:var(--panel2);border:1px solid var(--line)} /* 卡片本身不可点：只有「词根详解」「…」按钮可交互 */ .morphhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px} .morphchips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px} .mchip{font-size:11.5px;color:var(--txt);background:var(--panel3); border:1px solid var(--line);border-radius:6px;padding:1px 6px;line-height:1.6} .mchip.affix{color:var(--blue);border-color:var(--blueBorder);background:var(--blueBg)} .mplus{font-size:11px;color:var(--dim2)} .morphbrief{font-size:12px;line-height:1.65;color:var(--dim); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .morphmore{position:absolute;right:8px;bottom:6px;width:24px;height:22px; border:1px solid var(--line);border-radius:7px;background:var(--panel); color:var(--dim);font-size:14px;line-height:1;cursor:pointer;font-family:inherit} .morphmore:hover{color:var(--txt);border-color:var(--blueBorder);background:var(--selBg)} /* 详情抽屉 */ body.sheet-open{overflow:hidden} .morphsheet{position:fixed;inset:0;z-index:100050;display:none} .morphsheet.on{display:block} .msmask{position:absolute;inset:0;background:rgba(6,10,15,.55)} .msbox{position:absolute;left:0;right:0;bottom:0;max-height:78vh;overflow:auto; background:var(--panel);color:var(--txt);border-top-left-radius:16px;border-top-right-radius:16px; border-top:1px solid var(--line);padding:12px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.28);animation:msUp .22s ease-out} @keyframes msUp{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}} .mshead{display:flex;align-items:center;justify-content:space-between; padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--line);position:sticky;top:0; background:var(--panel);z-index:2} .mstitle{font-size:14px;color:var(--txt)} .msclose{width:30px;height:30px;border:1px solid var(--line);border-radius:8px; background:var(--panel2);color:var(--dim);font-size:13px;cursor:pointer;font-family:inherit} .msclose:hover{color:var(--txt);background:var(--selBg)} .msbody{max-width:680px;margin:0 auto} .msbody .morphbox{margin-top:0} .msempty{font-size:12.5px;color:var(--dim);padding:10px 0} @media (min-width:720px){ .msbox{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%); width:640px;max-height:80vh;border-radius:16px;border:1px solid var(--line)} @keyframes msUp{from{transform:translate(-50%,-46%);opacity:.6}to{transform:translate(-50%,-50%);opacity:1}} } /* ===== 词根解说卡：默认展开的核心信息行（mc 前缀避免与里程碑 .mline 冲突） ===== */ .mcline{display:flex;gap:6px;align-items:flex-start;margin-top:5px; font-size:12.5px;line-height:1.7;color:var(--txt)} .mclab{flex:none;font-size:11px;color:var(--dim2);padding-top:2px;white-space:nowrap} .mcline.memo .mclab{color:var(--amber)} .mcstory{margin-top:6px;font-size:12px;line-height:1.7;color:var(--dim);word-break:break-word} .mcline.famline{margin-top:7px} .mfam{display:inline-flex;flex-wrap:wrap;gap:4px} .mchip.fam{color:var(--greenFg);background:var(--greenBg);border-color:var(--green)} .mchip.fam.more{color:var(--dim);background:var(--panel3);border-color:var(--line)} .morphcard{padding-bottom:30px} /* ===== 3 块词根卡：构语行 + 词性小字 + 词根详解按钮 + chips 行 ===== */ .mcline.construct{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px} .mcpos{font-size:11px;color:var(--dim2);border:1px solid var(--line); border-radius:5px;padding:0 5px;line-height:1.6} .mcroot{font-size:11px;color:var(--blue);background:var(--blueBg); border:1px solid var(--blueBorder);border-radius:6px;padding:1px 7px; cursor:pointer;font-family:inherit;line-height:1.6} .mcroot:hover{background:var(--selBg)} .mcline.mcchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .mcempty{color:var(--dim2);font-size:12px} .rootpanel{padding:4px 0 8px} .roothead{font-size:14px;color:var(--txt);margin-bottom:8px} .rootmean{font-size:12.5px;color:var(--dim)} .rootmore{font-size:11.5px;color:var(--dim2);margin-top:10px;line-height:1.7} /* ===== 移动端横向溢出防御（不改视觉，只防子项撑宽）===== */ .details, .detailwrap, .dcard, .morphcard{ min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; word-break:break-word; } .mcline{white-space:normal} .mcline .mclab{flex:0 0 auto} @media (max-width:720px){ .details{grid-template-columns:minmax(0,1fr)} .detailwrap{grid-template-columns:minmax(0,1fr)} } /* 词根详解正文（弹层内） */ .rootbody{font-size:12.5px;line-height:1.8;color:var(--txt)} .rootbody h3,.rootbody h4,.rootbody h5{margin:10px 0 4px;font-size:13.5px;color:var(--txt)} .rootbody p{margin:6px 0} .rootbody ul{margin:6px 0;padding-left:18px} .rootbody li{margin:3px 0} .rootbody table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px} .rootbody th,.rootbody td{border:1px solid var(--line);padding:4px 6px;text-align:left} .rootbody th{background:var(--panel2)} .rootbody code{background:var(--panel3);border-radius:4px;padding:0 4px;font-size:12px} /* 词根详解里的英文单词：可点查释义（不整段变蓝） */ .wlook{cursor:pointer;border-bottom:1px dotted var(--line);color:inherit} .wlook:hover{background:var(--blueBg);border-radius:3px}