/* ============================================================
   Gifted-T-test 作答界面样式（仿真实机考：深青顶栏 + 白色卷面）
   参考配色取自实测：顶栏 #066A6E / 强调 #077F83 / 页面灰 #B4B4B4
   ============================================================ */
:root{
  --teal:#066A6E;
  --teal-2:#2B8084;
  --teal-3:#0a7f83;
  --blue:#215AD8;
  --blue-2:#1a4bb5;
  --desk:#b4b4b4;
  --surface:#ffffff;
  --ink:#333333;
  --ink-2:#5a5a5a;
  --ink-3:#8a8a8a;
  --line:#d8d8d8;
  --line-2:#bcbcbc;
  --soft:#f2f2f2;
  --ok:#1a7f37;
  --ok-bg:#e8f5ec;
  --err:#c62828;
  --err-bg:#fdecea;
  --amber:#b26a00;
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--desk);
  color:var(--ink);
  font:15px/1.6 "Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
a{color:var(--blue)}

/* ---------------- 机考窗口 ---------------- */
.desk{height:100%;display:flex;align-items:center;justify-content:center;padding:0}
.screen{
  width:100%;height:100%;max-width:1240px;
  background:var(--surface);display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 18px 50px rgba(0,0,0,.28);
  overflow:hidden;position:relative;
}
@media(min-width:1300px){.screen{height:calc(100% - 28px);border-radius:3px}}

/* ---------------- 顶栏 ----------------
   桌面端一行；窄屏折成两行（上行品牌、下行控件），避免元素被截断或文字内部换行。 */
.tbar{
  flex:0 0 auto;min-height:48px;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 16px;font-size:14px;user-select:none;flex-wrap:nowrap;
}
.tbar-left{display:flex;align-items:center;gap:0;font-weight:600;letter-spacing:.2px;
  min-width:0;flex:0 1 auto}
.tbar-app{font-size:14px;font-weight:700;opacity:.95;letter-spacing:.3px;white-space:nowrap}
.tbar-sep{flex:0 0 1px;width:1px;height:20px;background:rgba(255,255,255,.4);margin:0 12px}
.tbar-sec{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbar-right{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;
  min-width:0;flex:0 1 auto;justify-content:flex-end}
.tbar-right > *{flex:0 0 auto}
.timer{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:3px;padding:3px 11px;font-weight:600;letter-spacing:.5px;min-width:74px;text-align:center;
  white-space:nowrap;
}
.timer.warn{background:#8c2f22;border-color:#c0432f;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.55}}
.tbtn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff;
  border-radius:3px;padding:4px 12px;font-size:13px;cursor:pointer;transition:.14s;white-space:nowrap;
}
.tbtn:hover{background:rgba(255,255,255,.26)}
.qpos{font-size:13.5px;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------------- 主舞台 ---------------- */
.tstage{flex:1 1 auto;overflow:auto;background:var(--surface);position:relative}
.tstage.pad{padding:26px 34px}
.tstage.center{display:flex;align-items:center;justify-content:center}

/* 分栏（阅读/材料题） */
.split{display:flex;height:100%;min-height:0}
.pane{overflow:auto;padding:22px 26px}
.pane.left{flex:1 1 54%;border-right:1px solid var(--line)}
.pane.right{flex:1 1 46%;background:#fbfbfb}
.pane.full{flex:1 1 100%}

/* ---------------- 排版 ---------------- */
h1.ets{font-size:22px;font-weight:700;margin:0 0 16px;color:#1c1c1c}
h2.ets{font-size:17px;font-weight:700;margin:0 0 12px;color:#1c1c1c}
.hintline{background:#eef6f6;border-left:4px solid var(--teal-3);padding:10px 14px;margin:14px 0;
  font-size:13.5px;color:#2c4b4c;border-radius:0 3px 3px 0}
.lead{color:var(--ink-2);font-size:14.5px;margin:0 0 18px}
.passage{font-size:16px;line-height:1.85;color:#262626}
.passage p{margin:0 0 15px}
.matimg{max-width:100%;border:1px solid var(--line);border-radius:3px;display:block;margin:12px 0}
.caption{font-size:12.5px;color:var(--ink-3);margin:6px 0 14px;font-style:italic}

/* ---------------- 填空（Complete the Words） ----------------
   真机考形态：缺几个字母就给几个空格（不是一条横线）。
   每个格子只收一个字母，与已给出的字母（.stem）连成一个单词。 */
.passage.fillp{line-height:2.75}
.blank{display:inline;white-space:nowrap}
.blank .stem{letter-spacing:.4px;margin-right:1px}
.blank .lbox{
  width:1.32em;height:1.78em;margin:0 1.5px;padding:0;text-align:center;
  border:1px solid var(--line-2);border-bottom:2px solid var(--teal-3);
  border-radius:2px;background:#f9fdfd;
  font:inherit;font-size:15px;line-height:1;color:var(--teal);
  vertical-align:-.52em;caret-color:var(--teal);
}
.blank .lbox:focus{outline:none;border-color:var(--blue);background:#eef5ff}
.blank .lbox.ok{border-color:var(--ok);border-bottom-color:var(--ok);background:#f2fbf5;color:var(--ok)}
.blank .lbox.bad{border-color:var(--err);border-bottom-color:var(--err);background:#fdf3f2;color:var(--err)}
.blank .lbox:disabled{cursor:default;opacity:1}
.fixwrap{white-space:nowrap}
.fix-reveal{color:var(--ok);font-size:13.5px;margin:0 6px 0 6px;font-weight:600;white-space:nowrap}

/* ---------------- 题目/选项 ---------------- */
.qhead{font-size:16px;font-weight:600;margin:0 0 4px;color:#1c1c1c}
.qstem{font-size:16px;line-height:1.7;margin:0 0 16px;color:#1c1c1c}
.optlist{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.opt{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid transparent;
  border-radius:3px;cursor:pointer;background:#fafafa;transition:.12s;font-size:15.5px;line-height:1.6}
.opt:hover{background:#eef4f4}
.opt .key{flex:0 0 24px;height:24px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink-2);background:#fff}
.opt.sel{background:#e6f2f1;border-color:var(--teal-3)}
.opt.sel .key{background:var(--teal-3);border-color:var(--teal-3);color:#fff}
.opt.ok{background:var(--ok-bg);border-color:var(--ok)}
.opt.ok .key{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.bad{background:var(--err-bg);border-color:var(--err)}
.opt.bad .key{background:var(--err);border-color:var(--err);color:#fff}
.insnote{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}

/* 材料框 */
.mcard{border:1px solid var(--line);border-radius:3px;background:#fcfcfc;padding:16px 18px;margin-bottom:16px}
.mcard .cap{font-size:12.5px;color:var(--ink-3);margin-bottom:8px;font-style:italic}

/* ---------------- 底栏 ---------------- */
.tfoot{
  flex:0 0 auto;min-height:58px;border-top:1px solid var(--line);background:#fafafa;
  display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:10px;
}
.tfoot .fleft{display:flex;gap:8px;align-items:center}
.tfoot .fright{display:flex;gap:8px;align-items:center}
.ebtn{
  border:1px solid var(--line-2);background:#fff;color:#1c1c1c;border-radius:3px;
  padding:9px 22px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.14s;min-width:96px
}
.ebtn:hover{border-color:var(--teal-3);color:var(--teal)}
.ebtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.ebtn.primary:hover{background:var(--blue-2);border-color:var(--blue-2);color:#fff}
.ebtn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.ebtn.teal:hover{background:#055356;border-color:#055356;color:#fff}
.ebtn:disabled{opacity:.42;cursor:not-allowed}
.ebtn.ghost{border-color:transparent;background:transparent;color:var(--ink-2);min-width:0;padding:9px 12px}
.ebtn.ghost:hover{color:var(--teal);background:#eef4f4}

/* ---------------- 计数器 / 计量 ---------------- */
.counter{display:flex;align-items:center;gap:18px}
.counter .cnum{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px}
.counter .cval{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- 音频 ---------------- */
.audiobar{display:flex;align-items:center;gap:14px;background:#f3f7f7;border:1px solid #d6e4e4;
  border-radius:3px;padding:12px 16px;margin:0 0 18px}
.playbtn{width:42px;height:42px;border-radius:50%;border:none;background:var(--teal);color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:15px;flex:0 0 42px;transition:.14s}
.playbtn:hover{background:#055356}
.playbtn:disabled{background:#9fb8b8;cursor:not-allowed}
.audiotrack{flex:1;height:6px;background:#dbe7e7;border-radius:4px;overflow:hidden}
.audiotrack > i{display:block;height:100%;background:var(--teal-3);width:0}
.audiolabel{font-size:13px;color:var(--ink-2);min-width:132px}

/* ---------------- 语音录制 ---------------- */
.micwrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0}
.mic{
  width:96px;height:96px;border-radius:50%;border:none;background:var(--teal);color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;display:grid;place-items:center;gap:2px;
  transition:.16s;letter-spacing:.5px
}
.mic:hover{background:#055356}
.mic.rec{background:#c62828;animation:pulse 1.2s infinite}
.mic:disabled{background:#b9cccc;cursor:not-allowed}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,40,40,.45)}70%{box-shadow:0 0 0 20px rgba(198,40,40,0)}100%{box-shadow:0 0 0 0 rgba(198,40,40,0)}}
.mictime{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;color:#1c1c1c}
.mictip{font-size:13.5px;color:var(--ink-2);text-align:center;max-width:520px}
.levelbar{width:300px;height:7px;background:#e6e6e6;border-radius:4px;overflow:hidden}
.levelbar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2B8084,#1a7f37)}

/* ---------------- 组句 ---------------- */
.scbox{display:flex;flex-wrap:wrap;gap:8px;min-height:56px;border:1px dashed var(--line-2);
  border-radius:3px;padding:10px;background:#fbfbfb;align-items:center}
.scbox:empty::before{content:"点击下方词块，按正确顺序组句";color:var(--ink-3);font-size:13.5px}
.chunk{background:#fff;border:1px solid var(--line-2);border-radius:3px;padding:6px 12px;
  cursor:pointer;font-size:15px;transition:.12s}
.chunk:hover{border-color:var(--teal-3);color:var(--teal)}
.chunk.used{opacity:.3;pointer-events:none}
.scans{color:var(--ok);font-size:14px;margin-top:10px;font-weight:600}

/* ---------------- 写作编辑器 ---------------- */
.editor{width:100%;min-height:260px;border:1px solid var(--line-2);border-radius:3px;padding:14px 16px;
  font:inherit;font-size:15.5px;line-height:1.8;color:#1c1c1c;resize:vertical}
.editor:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 2px rgba(10,127,131,.12)}
.editbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--ink-3)}
.discpost{border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin:10px 0;background:#fafafa}
.discpost b{color:var(--teal)}

/* ---------------- 题目导航网格 ---------------- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin:14px 0}
.qcell{border:1px solid var(--line-2);background:#fff;border-radius:3px;padding:9px 0;text-align:center;
  cursor:pointer;font-weight:600;font-size:14px}
.qcell.done{background:#e6f2f1;border-color:var(--teal-3);color:var(--teal)}
.qcell.cur{outline:2px solid var(--blue);outline-offset:1px}
.legend{display:flex;gap:18px;font-size:13px;color:var(--ink-2);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:6px;
  border:1px solid var(--line-2);background:#fff}
.legend i.d{background:#e6f2f1;border-color:var(--teal-3)}

/* ---------------- 首页 / 入口 ---------------- */
.home{padding:30px 34px}
.home .kicker{font-size:12.5px;letter-spacing:.6px;color:var(--teal-3);font-weight:700}
.home h1{font-size:28px;margin:6px 0 10px;letter-spacing:-.2px}
.home .sub{color:var(--ink-2);max-width:720px;margin:0 0 26px;font-size:15px;line-height:1.75}
.howrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 30px}
.howcard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;background:#fbfdfd}
.howcard b{font-size:14.5px;color:#1c1c1c}
.howcard .hnum{flex:0 0 26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700}
.howcard .hdesc{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.6}
.gtitle{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:700;color:#1c1c1c;
  margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.gtitle:first-of-type{margin-top:8px}
.gtitle .gcount{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:14px}
.excard{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff;transition:.15s}
.excard:hover{border-color:var(--teal-3);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.excard h3{margin:0 0 3px;font-size:17.5px}
.excard .esub{color:var(--ink-3);font-size:12.5px;margin-bottom:12px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pill{font-size:12px;border:1px solid var(--line);border-radius:20px;padding:2px 10px;color:var(--ink-2);background:#fafafa}
.actrow{display:flex;flex-wrap:wrap;gap:7px}
.sbtn{border:1px solid var(--line-2);background:#fff;border-radius:3px;padding:7px 13px;font-size:13.5px;
  cursor:pointer;transition:.13s}
.sbtn:hover{border-color:var(--teal-3);color:var(--teal)}
.sbtn.p{background:var(--teal);border-color:var(--teal);color:#fff}
.sbtn.p:hover{background:#055356;color:#fff}

/* ---------------- 账号 / 额度 ---------------- */
.chip{font-size:12.5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:20px;padding:2px 11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip b{color:#fff}
.uname{opacity:.9;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creditline{display:inline-block;font-size:13px;color:#2c4b4c;background:#eef6f6;
  border-left:4px solid var(--teal-3);border-radius:0 3px 3px 0;padding:8px 14px;margin:0 0 22px}

/* ---------------- 登录 / 注册 ---------------- */
.authwrap{display:flex;align-items:center;justify-content:center;min-height:100%;padding:36px}
.authcard{width:100%;max-width:420px;border:1px solid var(--line);border-radius:6px;
  background:#fff;padding:30px 32px;box-shadow:0 12px 36px rgba(0,0,0,.08)}
.authcard .kicker{font-size:12px;letter-spacing:.6px;color:var(--teal-3);font-weight:700}
.authcard h1{font-size:24px;margin:8px 0 6px}
.authcard .lead{margin-bottom:20px}
.fld{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.fld input{display:block;width:100%;margin-top:6px;border:1px solid var(--line-2);border-radius:3px;
  padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.fld input:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 2px rgba(10,127,131,.12)}
.autherr{color:var(--err);font-size:13.5px;min-height:20px;margin:2px 0 10px}
.authbtn{width:100%}
.authswap{font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:16px}

/* ---------------- 历史成绩 ---------------- */
.histsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 26px}
.sumcard{border:1px solid var(--line);border-radius:var(--r);background:#fbfdfd;padding:14px 16px}
.sumname{font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.2px}
.sumnum{font-size:24px;font-weight:800;color:#1c1c1c;line-height:1.3;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.sumnum span{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:6px}
.sumkv{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.sumkv b{color:#1c1c1c}

.histlist{display:flex;flex-direction:column;gap:8px}
.histitem{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.histrow{display:flex;align-items:center;gap:16px;padding:12px 16px}
.histrow:hover{background:#f8fbfb}
.hleft{flex:0 0 168px;display:flex;flex-direction:column;gap:2px}
.hsec{font-size:14.5px;font-weight:700;color:#1c1c1c}
.hdate{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hmid{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.hscore{font-size:15px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.hexam{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htoggle{flex:0 0 auto}
.histdetail{padding:4px 18px 16px;border-top:1px dashed var(--line);background:#fcfdfd}
.histdetail .result{margin-top:12px;background:#fff}

/* ---------------- 成绩面板 ---------------- */
.result{border-top:2px solid var(--teal-3);background:#fafafa;padding:20px;margin-top:18px}
.bigband{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.bigband .num{font-size:46px;font-weight:800;color:var(--teal);line-height:1;font-variant-numeric:tabular-nums}
.bigband .lbl{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.dim{display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:center;margin:9px 0}
.dim .dname{font-size:13.5px;color:var(--ink-2)}
.track{height:9px;background:#e6e6e6;border-radius:5px;overflow:hidden;border:1px solid #dcdcdc}
.track > i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-3),#37a5a9)}
.kv{font-size:14px;color:var(--ink-2);margin:6px 0}
.kv b{color:#1c1c1c}
.tag{display:inline-block;background:#eef4f4;border:1px solid #d6e4e4;border-radius:3px;
  padding:2px 9px;font-size:12.5px;margin:3px 5px 3px 0;color:#2c4b4c}
.errrow{background:#fdf3f2;border-left:3px solid var(--err);border-radius:0 3px 3px 0;padding:9px 13px;margin:7px 0;font-size:14px}
.errrow .as{color:var(--err);text-decoration:line-through}
.errrow .fix{color:var(--ok);font-weight:600}
.note{background:#f6f8f8;border:1px solid var(--line);border-radius:3px;padding:14px;margin:10px 0;
  white-space:pre-wrap;font-size:14.5px;line-height:1.75}
.model{background:#f2faf5;border:1px solid #cfe8d9;border-radius:3px;padding:14px;white-space:pre-wrap;
  font-size:14.5px;line-height:1.75;color:#23503a}
details{border:1px solid var(--line);border-radius:3px;padding:10px 14px;margin-top:10px;background:#fcfcfc}
summary{cursor:pointer;font-size:14px;color:var(--teal);font-weight:600}

/* ---------------- 提示/弹窗/加载 ---------------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(14px);
  background:#2b2b2b;color:#fff;padding:11px 20px;border-radius:3px;box-shadow:0 8px 26px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:.22s;z-index:80;font-size:14px;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#8c2f22}
.mmask{position:fixed;inset:0;background:rgba(30,30,30,.5);display:grid;place-items:center;z-index:90;padding:20px}
.mbox{background:#fff;border-radius:4px;padding:24px;max-width:640px;width:100%;max-height:84vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* 移动端提示弹窗 */
.mtip{text-align:center}
.mtip .mico{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:#eef6f6;
  display:grid;place-items:center;color:var(--teal-3)}
.mtip h2{font-size:17.5px;margin:0 0 10px;color:#1c1c1c}
.mtip p{font-size:14px;color:var(--ink-2);line-height:1.8;margin:0 0 4px}
.mtip .mmore{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.7}
.mtip .actrow{justify-content:center;margin-top:18px}
.mtip .ebtn{min-width:130px}
.spin{width:15px;height:15px;border:2px solid #d5d5d5;border-top-color:var(--teal);border-radius:50%;
  display:inline-block;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;color:var(--ink-2);padding:40px;gap:6px}

@media(max-width:820px){
  .split{flex-direction:column}
  .pane.left{border-right:none;border-bottom:1px solid var(--line)}
  .tstage.pad{padding:18px}
  .home{padding:20px}
  .dim{grid-template-columns:110px 1fr}

  /* 顶栏折成两行：上行「品牌 + 科目」，下行控件；两端对齐，不再溢出 */
  .tbar{height:auto;min-height:44px;flex-wrap:wrap;padding:6px 12px;row-gap:6px}
  .tbar-left{flex:1 1 100%}
  .tbar-right{flex:1 1 100%;justify-content:space-between;gap:8px;
    flex-wrap:wrap;row-gap:6px}
  .tbar-sep{margin:0 8px}
  .timer{min-width:60px;padding:3px 8px;letter-spacing:.3px;font-size:13.5px}
  .qpos{font-size:12.5px}
  .tbtn{padding:4px 9px;font-size:12.5px}
  .chip{font-size:12px;padding:2px 9px}

  /* 底栏也允许换行，避免 Progress 与按钮互相挤压 */
  .tfoot{flex-wrap:wrap;row-gap:8px;padding:10px 12px}
  .counter{margin-left:0 !important}
  .ebtn{padding:9px 16px;min-width:0;font-size:14px}
}
@media(max-width:480px){
  .tbar-app{font-size:13px}
  .uname{display:none}          /* 极窄屏隐藏用户名，优先保证额度与倒计时可见 */
  .qpos{max-width:40vw}
  .home h1{font-size:23px}
  .exgrid{grid-template-columns:1fr}
  .pills{gap:4px}
}