/* ============ AI训练师备考站 · 移动优先样式 ============ */

:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface2:#EDF1F6;
  --text:#151A21; --text2:#5C6875; --text3:#93A0AE;
  --border:rgba(0,0,0,.09); --border2:rgba(0,0,0,.14);
  --accent:#185FA5; --accent-s:#E6F1FB; --accent-t:#0C447C;
  --ok:#0F6E56; --ok-s:#E1F5EE;
  --err:#C0392B; --err-s:#FBEAE7;
  --warn:#8A5A00; --warn-s:#FAEEDA;
  --bar:56px;
  --r:14px;
}
html[data-theme="dark"]{
  --bg:#0F1216; --surface:#181D23; --surface2:#212830;
  --text:#E6EAEF; --text2:#9BA7B4; --text3:#6B7784;
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.18);
  --accent:#6FB1F0; --accent-s:#14263A; --accent-t:#B5D4F4;
  --ok:#4FC3A1; --ok-s:#12312A;
  --err:#F08C7E; --err-s:#341A16;
  --warn:#E0B45C; --warn-s:#2E2411;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#0F1216; --surface:#181D23; --surface2:#212830;
    --text:#E6EAEF; --text2:#9BA7B4; --text3:#6B7784;
    --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.18);
    --accent:#6FB1F0; --accent-s:#14263A; --accent-t:#B5D4F4;
    --ok:#4FC3A1; --ok-s:#12312A;
    --err:#F08C7E; --err-s:#341A16;
    --warn:#E0B45C; --warn-s:#2E2411;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px; line-height:1.65;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit;font-size:inherit;color:inherit}
.hidden{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:.5px solid var(--border);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display:flex; align-items:center; justify-content:space-between; min-height:48px;
}
.topbar h1{font-size:16px;font-weight:600;letter-spacing:.2px}
.topbar-act{display:flex;gap:8px;align-items:center}

/* ---------- 页容器 ---------- */
#view{max-width:720px;margin:0 auto;padding:14px 14px 24px}
/* 注意：本动画只能动 opacity。
   若给 .page 加 transform 动画（哪怕终值是 transform:none），配合 animation-fill-mode:both
   会让 .page 永久成为 fixed 后代的包含块 —— .bottombar / .sheet 会被钉在内容流底部而非视口底部，
   表现为「底部操作条压盖最后一道选项，且页面不可滚动」。 */
.page{animation:fade .22s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- 通用块 ---------- */
.card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r);padding:14px}
.sec{margin:18px 0 0}
.sec-t{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.4px;margin:0 0 8px 2px}
.sec-t b{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:.5px solid var(--border);background:var(--surface);color:var(--text2);
  padding:7px 13px;border-radius:999px;font-size:13px;cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent-s);color:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 40%,transparent);font-weight:600}
.rowline{display:flex;justify-content:space-between;padding:9px 0;border-bottom:.5px solid var(--border);font-size:13px}
.rowline:last-child{border-bottom:none}
.rowline span{color:var(--text2)}
.btns{display:flex;gap:10px;margin-top:12px}
.btn{flex:1;border:.5px solid var(--border2);background:var(--surface);border-radius:10px;padding:11px 0;font-size:13px;cursor:pointer}
.btn:active{background:var(--surface2)}
.btn.danger{color:var(--err)}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.kpi{background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:12px 14px}
.kpi .k-l{font-size:12px;color:var(--text2)}
.kpi .k-v{font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.dim{color:var(--text3);font-size:12px}
.foot{padding-bottom:20px;font-size:12px;color:var(--text2);line-height:1.9}

/* ---------- 大按钮 ---------- */
.btn-big{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:var(--surface);border:.5px solid var(--border);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;text-align:left;transition:transform .12s;
}
.btn-big:active{transform:scale(.985)}
.btn-big .bb-t{font-size:15px;font-weight:600}
.btn-big .bb-s{font-size:12px;color:var(--text2)}
.btn-big.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-big.primary .bb-s{color:rgba(255,255,255,.82)}
.btn-big.ghost{background:var(--warn-s);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.btn-big.ghost .bb-t{color:var(--warn)}
.btn-big.ghost .bb-s{color:color-mix(in srgb,var(--warn) 75%,var(--text))}

/* ---------- 首页 hero ---------- */
.hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-l{background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center}
.hero-num{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.hero-num .unit{font-size:11px;font-weight:400;color:var(--text2);margin-left:1px}
.hero-lab{font-size:11px;color:var(--text2);margin-top:3px}

.ring-wrap{position:relative;width:170px;margin:20px auto 6px}
.ring{width:170px;height:170px;transform:rotate(-90deg)}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-pct{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.ring-sub{font-size:12px;color:var(--text2)}
.bigbtns{margin-top:14px}

/* ---------- 列表 ---------- */
.list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.li{background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;gap:10px}
.li:active{background:var(--surface2)}
.li-b{flex:1;min-width:0}
.li-t{font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.li-m{font-size:11.5px;color:var(--text2);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{font-size:10.5px;padding:1.5px 7px;border-radius:999px;background:var(--surface2);color:var(--text2)}
.tag.ok{background:var(--ok-s);color:var(--ok)}
.tag.err{background:var(--err-s);color:var(--err)}
.tag.acc{background:var(--accent-s);color:var(--accent-t)}
.tag.warn{background:var(--warn-s);color:var(--warn)}

/* ---------- 底部 Tab ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:.5px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  border:none;background:none;padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text3);cursor:pointer;font-size:11px;height:var(--bar);
}
.tab.active{color:var(--accent)}
.ti{width:22px;height:22px;display:block;background:currentColor;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ti-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 2.6 2.4 9.8a1 1 0 0 0 .6 1.8H5v8.2a1 1 0 0 0 1 1h4v-5.4h4V20.8h4a1 1 0 0 0 1-1V11.6h2a1 1 0 0 0 .6-1.8L12.8 2.6a1 1 0 0 0-1.6 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 2.6 2.4 9.8a1 1 0 0 0 .6 1.8H5v8.2a1 1 0 0 0 1 1h4v-5.4h4V20.8h4a1 1 0 0 0 1-1V11.6h2a1 1 0 0 0 .6-1.8L12.8 2.6a1 1 0 0 0-1.6 0z'/%3E%3C/svg%3E")}
.ti-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h9a2 2 0 0 1 2 2V21H7a2 2 0 0 1-2-2zM5 3.5A1.5 1.5 0 0 0 3.5 5v14A1.5 1.5 0 0 0 5 20.5zM17 6h1.5A1.5 1.5 0 0 1 20 7.5V20h-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h9a2 2 0 0 1 2 2V21H7a2 2 0 0 1-2-2zM5 3.5A1.5 1.5 0 0 0 3.5 5v14A1.5 1.5 0 0 0 5 20.5zM17 6h1.5A1.5 1.5 0 0 1 20 7.5V20h-3z'/%3E%3C/svg%3E")}
.ti-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 5v5.6l4 2.3-1 1.7-5-2.9V7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 5v5.6l4 2.3-1 1.7-5-2.9V7z'/%3E%3C/svg%3E")}
.ti-alert{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 22.4 21H1.6zM11 9.5v5h2v-5zm0 6.6v2h2v-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 22.4 21H1.6zM11 9.5v5h2v-5zm0 6.6v2h2v-2z'/%3E%3C/svg%3E")}
.ti-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5h18V22H3zM6 10h3v9H6zm5-6h3v15h-3zm5 8h3v7h-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5h18V22H3zM6 10h3v9H6zm5-6h3v15h-3zm5 8h3v7h-3z'/%3E%3C/svg%3E")}

/* ---------- 答题引擎 ---------- */
.qbar{
  position:sticky;top:calc(env(safe-area-inset-top) + 48px);z-index:40;
  display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px 0 8px;
}
.qbar.out{top:0}
.qbar-num{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.qbar-num em{font-style:normal;color:var(--text2);font-weight:400}
.qbar-sp{flex:1}
.qbar-timer{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;font-weight:600;color:var(--accent);
  background:var(--accent-s);padding:3px 10px;border-radius:8px;font-variant-numeric:tabular-nums;
}
.qbar-timer.hot{color:#fff;background:var(--err)}
.qbar-btn{border:.5px solid var(--border2);background:var(--surface);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}

.qcard{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r);padding:16px 15px;margin-top:4px}
.qtype{display:flex;gap:7px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.qstem{font-size:15.5px;line-height:1.72;letter-spacing:.1px}
.qstem em{font-style:normal;background:var(--accent-s);color:var(--accent-t);padding:0 2px;border-radius:3px}

.opts{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;gap:11px;align-items:flex-start;
  border:.5px solid var(--border2);border-radius:12px;padding:11px 13px;
  background:var(--surface);cursor:pointer;transition:all .14s;font-size:14.5px;line-height:1.6;
}
.opt:active{transform:scale(.99)}
.opt-k{
  flex:none;width:24px;height:24px;border-radius:7px;border:.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text2);
  background:var(--surface2);
}
.opt.sel{border-color:var(--accent);background:var(--accent-s)}
.opt.sel .opt-k{background:var(--accent);color:#fff;border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--ok-s)}
.opt.right .opt-k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--err);background:var(--err-s)}
.opt.wrong .opt-k{background:var(--err);color:#fff;border-color:var(--err)}
.opt.locked{cursor:default}

.subj{margin-top:14px}
.subj-box{
  width:100%;min-height:120px;border:.5px solid var(--border2);border-radius:12px;
  background:var(--surface2);color:var(--text);padding:12px;font-size:14px;line-height:1.7;
  font-family:inherit;resize:vertical;
}
.subj-box:focus{outline:none;border-color:var(--accent)}
.subj-count{text-align:right;font-size:11.5px;color:var(--text3);margin-top:4px}

.verdict{margin-top:14px;border-radius:12px;padding:12px 14px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.verdict.ok{background:var(--ok-s);color:var(--ok)}
.verdict.no{background:var(--err-s);color:var(--err)}
.verdict.neutral{background:var(--warn-s);color:var(--warn)}
.verdict b{font-weight:600}

.parse{margin-top:12px;border:.5px solid var(--border);border-radius:12px;overflow:hidden}
.ptools{display:flex;justify-content:flex-end;padding:6px 10px;background:var(--surface2);border-bottom:.5px solid var(--border)}
.plink{
  border:none;background:transparent;color:var(--accent);font-size:12px;font-weight:600;
  font-family:inherit;cursor:pointer;padding:4px 8px;border-radius:7px;line-height:1.4;
}
.plink:active{background:var(--accent-s)}
.pitem{border-bottom:.5px solid var(--border)}
.pitem:last-child{border-bottom:none}
.phead{display:flex;align-items:center;gap:8px;padding:10px 13px;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface2)}
.phead .arw{margin-left:auto;color:var(--text3);font-size:11px;transition:transform .2s}
.pitem.open .arw{transform:rotate(90deg)}
.pbody{padding:2px 13px 12px;font-size:13.5px;line-height:1.75;color:var(--text2);display:none}
.pitem.open .pbody{display:block}

/* 主观题自评 */
.plist{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.punit{display:flex;gap:10px;align-items:flex-start;border:.5px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--surface);cursor:pointer}
.punit.on{background:var(--ok-s);border-color:var(--ok)}
.pbox{flex:none;width:20px;height:20px;border-radius:6px;border:.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;background:var(--surface2)}
.punit.on .pbox{background:var(--ok);border-color:var(--ok)}
.ptxt{font-size:13.5px;line-height:1.62;flex:1}
.slider-row{margin-top:12px}
.slider-row input[type=range]{width:100%;accent-color:var(--accent)}
.slider-val{display:flex;justify-content:space-between;font-size:12px;color:var(--text2)}
.slider-val b{color:var(--accent);font-size:16px;font-variant-numeric:tabular-nums}

.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:.5px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  height:calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
}
.hasbar .tabbar{display:none}
.bbtn{border:none;background:none;height:calc(var(--bar) - 2px);font-size:12.5px;color:var(--text2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.bbtn:active{background:var(--surface2)}
.bbtn.main{color:var(--accent);font-weight:600}
.bbtn.dis{color:var(--text3);opacity:.5}
/* 练习/模考运行时：底部 Tab 隐藏，改由固定操作条承担底部区域。
   这里统一预留「操作条高度 + 安全区 + 余量」，保证最后一屏内容不被压盖。 */
body.hasbar{padding-bottom:0}
.hasbar #view{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom) + 18px)}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:80;transform:translateY(100%);
  background:var(--surface);border-radius:18px 18px 0 0;border-top:.5px solid var(--border);
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:74vh;overflow-y:auto;
}
.sheet.open{transform:translateY(0)}
.sheet-mask{position:fixed;inset:0;background:rgba(0,0,0,.36);z-index:75;opacity:0;pointer-events:none;transition:opacity .26s}
.sheet-mask.open{opacity:1;pointer-events:auto}
.sheet-t{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.grid9{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.g9{aspect-ratio:1;border-radius:9px;border:.5px solid var(--border2);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2);cursor:pointer;font-variant-numeric:tabular-nums}
.g9.done{background:var(--accent-s);color:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.g9.flag{background:var(--warn-s);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.g9.cur{outline:2px solid var(--accent);outline-offset:1px}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--text2);margin-top:12px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}

/* ---------- 考试配置 ---------- */
.exam-card{}
.ec-title{font-size:15px;font-weight:600;margin-bottom:12px}
.ec-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.ec-tbl td{padding:7px 0;border-bottom:.5px solid var(--border)}
.ec-tbl td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--text2)}
.ec-tot{display:flex;justify-content:space-between;padding-top:11px;font-size:14px}
.ec-tot b{color:var(--accent)}

/* ---------- 报告 ---------- */
.report-top{text-align:center;padding:18px 0 8px}
.report-score{font-size:52px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.report-pass{font-size:14px;margin-top:6px}
.pass-yes{color:var(--ok)} .pass-no{color:var(--err)}
.report-sub{font-size:12px;color:var(--text2);margin-top:2px}
.iobox{width:100%;margin-top:10px;border:.5px solid var(--border2);border-radius:10px;background:var(--surface2);color:var(--text);padding:10px;font-size:11px;font-family:ui-monospace,Menlo,monospace;line-height:1.5}

/* ---------- 图表 ---------- */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.bargrp{display:flex;flex-direction:column;gap:11px}
.barrow{display:grid;grid-template-columns:74px 1fr 46px;align-items:center;gap:9px;font-size:12.5px}
.barbg{height:9px;border-radius:5px;background:var(--surface2);overflow:hidden}
.barfill{height:100%;border-radius:5px;background:var(--accent);transition:width .4s}
.barrow .bv{text-align:right;color:var(--text2);font-variant-numeric:tabular-nums}
.empty{text-align:center;padding:26px 0;color:var(--text3);font-size:13px}

/* ---------- 云同步 ---------- */
.rowline b.ok{color:var(--ok)}
.rowline b.err{color:var(--err)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn[disabled]{opacity:.5;cursor:default}
.wide{width:100%;display:block;margin-top:10px}
.qbar-btn.on{background:var(--accent-s);color:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

.ipt{width:100%;margin-top:10px;border:.5px solid var(--border2);background:var(--surface2);
  color:var(--text);border-radius:10px;padding:12px 13px;font-size:15px;outline:none}
.ipt:focus{border-color:var(--accent)}
.lg-row{display:flex;gap:10px;align-items:stretch}
.lg-row .ipt{flex:1;letter-spacing:2px}
.lg-row .btn{flex:none;width:112px;margin-top:10px;padding:0;font-size:13px}
.lg-msg{font-size:12px;color:var(--err);margin-top:8px;min-height:0}
.lg-msg:empty{display:none}

.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;
  align-items:flex-end;justify-content:center;z-index:80}
.mask.open{display:flex}
.lbox{width:100%;max-width:520px;background:var(--surface);border-radius:16px 16px 0 0;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom));animation:up .26s ease both}
@keyframes up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.lbox-t{font-size:17px;font-weight:600}
.lbox-s{font-size:12.5px;color:var(--text2);margin:4px 0 14px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 22px + env(safe-area-inset-bottom));
  background:rgba(20,20,22,.93);color:#fff;font-size:13px;padding:10px 16px;border-radius:10px;
  z-index:120;pointer-events:none;opacity:0;transition:opacity .22s;max-width:88%;text-align:center}
.toast.show{opacity:1}

/* ---------- 登录 / 注册遮罩 ---------- */
.gate{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EAF1F9 0%,#F6F1EA 100%);
  padding:22px;overflow-y:auto}
.gate.open{display:flex}
html[data-theme="dark"] .gate{background:linear-gradient(160deg,#0E1116 0%,#171A1F 100%)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .gate{background:linear-gradient(160deg,#0E1116 0%,#171A1F 100%)}
}
.gate-box{width:100%;max-width:400px;background:var(--surface);border:.5px solid var(--border);
  border-radius:18px;padding:30px 22px 24px;box-shadow:0 18px 48px rgba(20,40,70,.13)}
.gate-logo{width:54px;height:54px;margin:0 auto 14px;border-radius:14px;overflow:hidden}
.gate-logo img{width:100%;height:100%;display:block}
.gate-t{font-size:20px;font-weight:600;text-align:center;letter-spacing:.2px}
.gate-s{font-size:12.5px;color:var(--text2);text-align:center;margin:5px 0 20px}
.gate-tabs{margin-bottom:16px}
.gate-foot{font-size:11.5px;color:var(--text3);text-align:center;margin-top:15px;line-height:1.6}