:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#0f172a; --ink2:#334155;
  --muted:#64748b; --line:#e4e8ee; --line2:#eef1f5;
  --red:#c2183a; --red-soft:#fde8ec; --blue:#1d4ed8; --blue-soft:#e7edfd;
  --amber:#b45309; --green:#0f766e; --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

/* ---------- 顶栏 ---------- */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:42px; height:42px; border-radius:10px; background:linear-gradient(145deg,#c2183a,#8e1029);
  color:#fff; display:grid; place-items:center; font-size:19px; font-weight:700;
  box-shadow:0 4px 12px rgba(194,24,58,.25); letter-spacing:0;
}
.topbar h1{font-size:17px}
.topbar .sub{font-size:12px; color:var(--muted); margin-top:2px}
.topmeta{display:flex; gap:26px; flex-wrap:wrap}
.meta-item{display:flex; flex-direction:column; gap:1px}
.meta-item span{font-size:11px; color:var(--muted); letter-spacing:.04em}
.meta-item strong{font-size:13px; font-weight:600}

/* ---------- 游戏切换 ---------- */
.gametabs{
  position:sticky; top:0; z-index:30; background:rgba(245,246,248,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:10px 28px; display:flex; gap:8px; align-items:center;
}
.tab{
  border:1px solid var(--line); background:#fff; color:var(--ink2);
  padding:7px 18px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600;
  transition:.15s; font-family:inherit;
}
.tab:hover{border-color:#cbd5e1}
.tab.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.tab .odds{font-weight:500; opacity:.65; font-size:11px; margin-left:6px}

/* ---------- 布局 ---------- */
main{max-width:1320px; margin:0 auto; padding:22px 28px 60px; display:flex; flex-direction:column; gap:18px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; flex-wrap:wrap}
.panel-head h2{font-size:15px; display:flex; align-items:center; gap:8px}
.badge{
  font-size:10px; font-weight:700; color:#fff; background:var(--red);
  padding:2px 7px; border-radius:5px; letter-spacing:.06em;
}
.desc{font-size:12px; color:var(--muted); margin-top:4px; max-width:760px}
.legend{display:flex; gap:14px; align-items:center; font-size:11px; color:var(--muted)}
.lg{display:inline-flex; align-items:center; gap:5px}
.sw{width:13px; height:13px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.06)}

.grid-kpi{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.kpi .k{font-size:11px; color:var(--muted); letter-spacing:.03em}
.kpi .v{font-size:23px; font-weight:700; letter-spacing:-.02em; margin-top:4px; line-height:1.2}
.kpi .v small{font-size:11px; font-weight:500; color:var(--muted); margin-left:4px}
.kpi .d{font-size:11px; color:var(--muted); margin-top:3px}
.kpi.hl .v{color:var(--red)}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px}
.two-col > *{min-width:0}
.ledger-cols{display:grid; grid-template-columns:420px minmax(0,1fr); gap:20px; margin-top:8px}
.ledger-cols > *{min-width:0}
.three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px}

/* ---------- 图表 ---------- */
.chart-host{width:100%; overflow-x:auto}
.chart-host svg{display:block; width:100%; height:auto}
.chart-host.small{max-width:100%}
#sumHist{margin-top:26px}
.tnote{font-size:11px; color:var(--muted); margin-top:8px}
.trend-wrap{display:flex; flex-direction:column; gap:10px}

.tip-target{cursor:default}
.tip-target:hover{opacity:.85}

/* ---------- KPI 小球 ---------- */
.ball{
  display:inline-grid; place-items:center; border-radius:50%;
  font-weight:700; font-size:13px; color:#fff; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ball.red{background:radial-gradient(circle at 32% 28%,#e8435f,#b3142f); box-shadow:0 1px 3px rgba(179,20,47,.35)}
.ball.blue{background:radial-gradient(circle at 32% 28%,#4f7cf7,#1a3fbf); box-shadow:0 1px 3px rgba(26,63,191,.35)}
.ball.sm{width:24px;height:24px;font-size:11px}
.ball.md{width:30px;height:30px;font-size:12px}
.ball.xs{width:20px;height:20px;font-size:10px}
.nums{display:flex; gap:6px; align-items:center; flex-wrap:wrap}

/* ---------- 矩阵 ---------- */
.matrix{display:grid; gap:6px; margin-top:4px}
.mcell{
  position:relative; border-radius:8px; padding:7px 4px 5px; text-align:center;
  border:1px solid rgba(15,23,42,.06); transition:transform .12s, box-shadow .12s;
}
.mcell:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(15,23,42,.12); z-index:2}
.mcell .n{font-weight:700; font-size:14px; line-height:1.1}
.mcell .o{font-size:10px; opacity:.75; margin-top:1px}
.mcell .dot{position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--blue)}

.lst{background:#fbfcfd; border:1px solid var(--line2); border-radius:10px; padding:12px 14px}
.lst h3{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.03em; margin-bottom:8px}
.lst li{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; border-bottom:1px dashed var(--line2)}
.lst li:last-child{border-bottom:0}
.lst .nm{font-weight:700; width:44px}
.lst .bar{flex:1; height:5px; background:#eef1f5; border-radius:3px; overflow:hidden}
.lst .bar i{display:block; height:100%; background:var(--red); border-radius:3px}
.lst .val{color:var(--muted); font-size:11px; min-width:88px; text-align:right; white-space:nowrap; flex-shrink:0}

/* ---------- 模型说明 ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.model-card{border:1px solid var(--line2); border-radius:10px; padding:14px 16px 12px; background:#fbfcfd}
.model-card h4{font-size:13px; margin:0 0 6px; display:flex; align-items:center; gap:8px}
.model-card h4 span{
  font-size:10px; font-weight:700; color:var(--red); background:var(--red-soft);
  border-radius:4px; padding:1px 6px; letter-spacing:.04em;
}
.model-card p{font-size:12px; color:var(--ink2); line-height:1.7}
.model-card code{
  display:block; margin:8px 0 6px; padding:7px 10px; background:#fff; border:1px solid var(--line2);
  border-radius:6px; font-size:11px; color:#1e293b; font-family:ui-monospace,Consolas,monospace;
  overflow-x:auto; white-space:nowrap;
}
.model-card .mnote{font-size:11px; color:var(--muted); line-height:1.65}
.model-card.wide{grid-column:1/-1; background:linear-gradient(90deg,#fbfcfd,#f7f9fc)}

/* ---------- 模型评估 ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px}
.stat{background:#fbfcfd; border:1px solid var(--line2); border-radius:10px; padding:11px 14px}
.stat .k{font-size:11px; color:var(--muted)}
.stat .v{font-size:19px; font-weight:700; margin-top:3px; letter-spacing:-.01em}
.stat .v small{font-size:11px; font-weight:500; color:var(--muted); margin-left:3px}
.stat .d{font-size:10.5px; color:#94a3b8; margin-top:2px}
.stat.good .v{color:var(--red)}
.stat.bad .v{color:var(--green)}
.stat.warn .v{color:var(--amber)}

.verdict{
  margin-top:14px; border-radius:10px; padding:14px 18px; font-size:12.5px; line-height:1.85;
  background:#fbfcfd; border:1px solid var(--line2); border-left:3px solid var(--ink);
}
.verdict b{color:var(--ink)}
.verdict .tagx{
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:5px;
  margin-right:8px; vertical-align:1px;
}
.tagx.ok{background:var(--red-soft); color:var(--red)}
.tagx.no{background:#eef2f7; color:#475569}

/* ---------- 金额栏 ---------- */
.costbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px;
  padding:11px 14px; background:#fbfcfd; border:1px dashed #dbe2ec; border-radius:10px;
  font-size:12px; color:var(--ink2);
}
.costbar .ck{display:flex; align-items:center; gap:6px; padding-right:12px; border-right:1px solid var(--line2)}
.costbar .ck:last-child{border-right:0}
.costbar .ck span{color:var(--muted); font-size:11px}
.costbar .ck b{font-size:13px}
.costbar .total{margin-left:auto; font-size:13px; font-weight:700; color:var(--red)}
.costbar .total em{font-style:normal; font-size:11px; color:var(--muted); font-weight:500; margin-left:6px}

/* ---------- 推荐 ---------- */
.rec-list{display:flex; flex-direction:column; gap:8px}
.rec-row{
  display:grid; grid-template-columns:30px 1fr auto; gap:14px; align-items:center;
  padding:9px 14px; border:1px solid var(--line2); border-radius:10px; background:#fcfdfe;
}
.rec-row:hover{border-color:#cbd5e1; background:#fff}
.rec-row.top{border-color:#f2c2cc; background:linear-gradient(90deg,#fff7f9,#fff)}
.rec-idx{font-size:11px; color:var(--muted); font-weight:600}
.rec-meta{display:flex; gap:12px; font-size:11px; color:var(--muted); flex-wrap:wrap}
.rec-meta b{color:var(--ink2); font-weight:600}
.score{font-size:15px; font-weight:700; color:var(--red); min-width:52px; text-align:right}
.score em{font-size:10px; font-style:normal; color:var(--muted); font-weight:500; display:block}

.rec-box{background:#fbfcfd; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px}
.rec-box h3{font-size:13px; margin-bottom:4px}
.rec-box .cap{font-size:11px; color:var(--muted); margin-bottom:10px}

.notes{margin-top:16px; background:#fbfcfd; border:1px solid var(--line2); border-radius:10px; padding:14px 18px}
.notes h3{font-size:12px; color:var(--muted); margin-bottom:6px}
.notes li{font-size:12px; color:var(--ink2); padding:2px 0 2px 14px; position:relative}
.notes li::before{content:""; position:absolute; left:2px; top:11px; width:4px; height:4px; border-radius:50%; background:#94a3b8}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto; margin-top:10px}
table{border-collapse:collapse; width:100%; font-size:12.5px}
th{
  text-align:left; font-weight:600; color:var(--muted); font-size:11px; letter-spacing:.03em;
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:#fbfcfd;
}
td{padding:7px 10px; border-bottom:1px solid var(--line2); white-space:nowrap}
table.fixed{table-layout:fixed}
table.fixed td{overflow:hidden}
tbody tr:hover{background:#fafbfc}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.up{color:var(--red); font-weight:600}
.down{color:var(--green); font-weight:600}
.tag{display:inline-block; font-size:10px; padding:1px 6px; border-radius:4px; background:#eef2f7; color:var(--ink2); margin-right:4px}
.tag.hot{background:var(--red-soft); color:var(--red)}
.tag.due{background:#fef3c7; color:var(--amber)}
.tag.cold{background:var(--blue-soft); color:var(--blue)}

/* ---------- 洞察 ---------- */
.insights li{
  font-size:13px; color:var(--ink2); padding:9px 0 9px 22px; position:relative;
  border-bottom:1px dashed var(--line2); line-height:1.75;
}
.insights li:last-child{border-bottom:0}
.insights li::before{
  content:""; position:absolute; left:6px; top:18px; width:6px; height:6px;
  border-radius:50%; background:var(--red); opacity:.75;
}

.disclaimer{
  background:#fff; border:1px solid #f0d9de; border-left:3px solid var(--red);
  border-radius:10px; padding:16px 20px; font-size:12px; color:var(--ink2); line-height:1.85;
}
.disclaimer b{color:var(--red)}

.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink2); font-family:inherit;
  padding:7px 14px; border-radius:8px; font-size:12px; cursor:pointer; font-weight:600;
}
.btn:hover{border-color:#cbd5e1; background:#fafbfc}

.tooltip{
  position:fixed; z-index:100; pointer-events:none; opacity:0; transition:opacity .12s;
  background:#0f172a; color:#fff; font-size:11.5px; padding:8px 11px; border-radius:7px;
  line-height:1.6; max-width:280px; box-shadow:0 8px 24px rgba(15,23,42,.22);
}
.tooltip.on{opacity:1}
.tooltip b{color:#fff}

@media (max-width:1100px){
  .grid-kpi{grid-template-columns:repeat(3,1fr)}
  .two-col,.three-col{grid-template-columns:1fr}
  .model-grid{grid-template-columns:1fr 1fr}
  .ledger-cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  .model-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  main{padding:16px 14px 40px}
  .topbar,.gametabs{padding-left:14px; padding-right:14px}
  .grid-kpi{grid-template-columns:repeat(2,1fr)}
  .topmeta{gap:16px}
}
@media print{
  .gametabs,.btn{display:none}
  body{background:#fff}
  .panel{break-inside:avoid; box-shadow:none}
}

/* ---------- 投注方案 / 自选评分器 ---------- */
.subhead{margin-top:24px; padding-top:18px; border-top:1px solid var(--line2)}
.subhead h3{font-size:13.5px; margin:0 0 4px}
.subhead .desc{margin-bottom:10px}

.picker{display:flex; flex-direction:column; gap:12px}
.pick-row{display:flex; gap:14px; align-items:flex-start}
.pick-label{font-size:12px; color:var(--muted); width:64px; padding-top:9px; flex-shrink:0; white-space:nowrap}
.pick-grid{display:flex; flex-wrap:wrap; gap:6px}
.pnum{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--ink2); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit;
  transition:transform .12s, background .12s, border-color .12s; padding:0;
}
.pnum:hover{border-color:#cbd5e1; transform:translateY(-1px)}
.pnum.on{background:radial-gradient(circle at 32% 28%,#e8435f,#b3142f); color:#fff; border-color:#b3142f}
.pnum.on.blue{background:radial-gradient(circle at 32% 28%,#4f7cf7,#1a3fbf); border-color:#1a3fbf}
.pnum.full{opacity:.4}

.check-result{margin-top:20px; display:grid; grid-template-columns:190px 1fr; gap:22px; align-items:start}
.check-score{background:#fbfcfd; border:1px solid var(--line2); border-radius:12px; padding:18px 16px; text-align:center}
.check-score .big{font-size:40px; font-weight:700; line-height:1.05; letter-spacing:-.02em}
.check-score .big small{font-size:14px; font-weight:500; color:var(--muted); margin-left:2px}
.check-score .lbl{font-size:12px; color:var(--muted); margin-top:4px}
.check-score .sub{font-size:11px; color:#94a3b8; margin-top:8px; line-height:1.6}
.check-body{min-width:0}
.check-metrics{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.cm{background:#fff; border:1px solid var(--line2); border-radius:8px; padding:6px 10px; font-size:11.5px; color:var(--muted)}
.cm b{color:var(--ink); font-size:12.5px; margin-left:4px}
.check-list{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px}
.check-list li{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 0}
.ck-mark{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#fff; flex-shrink:0}
.ck-mark.ok{background:#0f766e}
.ck-mark.no{background:#cbd5e1}
.check-hint{font-size:12.5px; color:var(--muted); padding:14px 0; grid-column:1/-1}

@media (max-width:820px){
  .check-result{grid-template-columns:1fr}
  .check-list{grid-template-columns:1fr}
}

/* ---------- 二级导航 ---------- */
.secnav{
  position:sticky; top:0; z-index:29; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:0 28px; display:flex; gap:4px; overflow-x:auto;
}
.secnav a{
  font-size:12px; color:var(--muted); text-decoration:none; padding:9px 12px;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.secnav a:hover{color:var(--ink); border-bottom-color:#cbd5e1}

/* ---------- 练习模式 ---------- */
.practice-head{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:#fbfcfd; border:1px solid var(--line2); border-radius:12px;
  padding:14px 18px; margin-bottom:14px; flex-wrap:wrap;
}
.ph-issue{font-size:16px; font-weight:700; letter-spacing:-.01em}
.ph-issue small{font-size:11px; font-weight:500; color:var(--muted); margin-left:8px}
.ph-sub{font-size:11.5px; color:var(--muted); margin-top:3px}
.ph-right{font-size:11.5px; color:var(--muted); text-align:right; line-height:1.7}
.ph-right b{color:var(--ink)}

.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.primary:hover{background:#1e293b}

.prac-result{
  margin-top:16px; border:1px solid var(--line2); border-radius:12px; padding:16px 18px; background:#fcfdfe;
}
.prac-result.win{border-color:#f2c2cc; background:linear-gradient(90deg,#fff7f9,#fff)}
.pr-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}
.pr-cell .k{font-size:11px; color:var(--muted); margin-bottom:5px}
.pr-cell .v{font-size:20px; font-weight:700; letter-spacing:-.01em}
.pr-cell .v small{font-size:11px; font-weight:500; color:var(--muted); margin-left:3px}
.pr-line{display:flex; align-items:center; gap:10px; margin:7px 0; font-size:12px}
.pr-line span.lb{width:64px; color:var(--muted); flex-shrink:0}
.pr-vs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line2)}
.pr-vs .box{font-size:12px; color:var(--ink2)}
.pr-vs .box .t{font-size:11px; color:var(--muted); margin-bottom:5px}

/* ---------- 认知测验 ---------- */
.q-card{border:1px solid var(--line2); border-radius:12px; padding:15px 18px; margin-bottom:12px; background:#fcfdfe}
.q-title{font-size:13px; font-weight:600; margin-bottom:4px}
.q-title .idx{color:var(--red); margin-right:8px}
.q-desc{font-size:12px; color:var(--muted); margin-bottom:10px}
.q-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.q-opt{
  text-align:left; border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:9px 12px; font-size:12px; cursor:pointer; font-family:inherit; color:var(--ink2);
  transition:.12s;
}
.q-opt:hover{border-color:#cbd5e1; background:#fafbfc}
.q-opt.sel{border-color:var(--ink); background:#f8fafc}
.q-opt.right{border-color:#0f766e; background:#f0fdfa; color:#0f766e; font-weight:600}
.q-opt.wrong{border-color:var(--red); background:var(--red-soft); color:var(--red); font-weight:600}
.q-exp{margin-top:10px; font-size:12px; line-height:1.8; color:var(--ink2); background:#fff;
  border-left:3px solid #cbd5e1; padding:8px 12px; border-radius:0 8px 8px 0}
.q-exp.ok{border-left-color:#0f766e}
.q-exp.no{border-left-color:var(--red)}
.q-score{font-size:12px; color:var(--muted)}
.q-score b{font-size:16px; color:var(--ink)}

/* ---------- 权重实验台 ---------- */
.lab-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
.lab-side{font-size:12px; color:var(--ink2)}
.lab-side h4{font-size:12px; color:var(--muted); font-weight:600; margin:0 0 8px}
.lab-side dl{margin:0 0 16px}
.lab-side .row{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line2)}
.lab-side .row b{font-weight:700}
@media (max-width:1000px){ .lab-wrap{grid-template-columns:1fr} }

html{scroll-behavior:smooth}
section.panel{scroll-margin-top:104px}

/* ---------- 复盘 / 雷达 ---------- */
.review-box{background:#fbfcfd; border:1px solid var(--line2); border-radius:12px; padding:14px 16px; min-width:0}
.review-box h4{font-size:12px; color:var(--muted); font-weight:600; margin:0 0 8px}
.review-box .rv-item{font-size:12px; line-height:1.9; color:var(--ink2); padding:8px 0; border-bottom:1px dashed var(--line2)}
.review-box .rv-item:last-child{border-bottom:0}
.review-box .rv-tag{display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-right:6px}
.rv-tag.warn{background:#fef3c7; color:#b45309}
.rv-tag.ok{background:var(--red-soft); color:var(--red)}
.review-box table{margin-top:6px}
.review-box th,.review-box td{padding:5px 8px; font-size:11.5px}
.q-opt.muted{opacity:.45}

/* ---------- 训练周报 ---------- */
.report-meta{font-size:11.5px; color:var(--muted); margin-bottom:10px}
.report-meta b{color:var(--ink2)}
#reportTable table{font-size:12.5px}
#reportTable td:first-child{color:var(--muted)}
@media print{
  body.printing .topbar,
  body.printing .gametabs,
  body.printing .secnav,
  body.printing .btn{display:none !important}
  body.printing main > section:not(#sec-report){display:none !important}
  body.printing #sec-report{border:0; box-shadow:none; padding:0}
  body.printing{background:#fff}
}

/* ---------- 操作反馈 / 复制 / 检索 ---------- */
.toast-wrap{position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.toast{
  background:#0f172a; color:#fff; font-size:12.5px; padding:9px 14px; border-radius:9px;
  box-shadow:0 8px 24px rgba(15,23,42,.24); opacity:0; transform:translateY(6px);
  transition:opacity .22s, transform .22s; max-width:320px;
}
.toast.on{opacity:1; transform:translateY(0)}
.toast.warn{background:#b45309}
.toast.err{background:#b3142f}

.rec-copy{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:#fff;
  color:#94a3b8; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center;
  font-family:inherit; transition:.12s;
}
.rec-copy:hover{color:var(--red); border-color:#f2c2cc; background:#fff7f9}
.rec-row{grid-template-columns:30px 1fr auto 26px}

.rec-filter{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.panel-head > div:first-child{min-width:0}
.rec-filter input{
  width:150px; border:1px solid var(--line); border-radius:8px; padding:7px 11px;
  font-size:12.5px; font-family:inherit; color:var(--ink); background:#fff; outline:none;
}
.rec-filter input:focus{border-color:#94a3b8; box-shadow:0 0 0 3px rgba(15,23,42,.06)}
.rec-filter .hint{font-size:11px; color:var(--muted); white-space:nowrap}
.rec-hit{background:#fff5f7 !important}

.kbd-fab{
  position:fixed; left:22px; bottom:22px; z-index:120; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--muted); font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:var(--shadow); font-family:inherit;
}
.kbd-fab:hover{color:var(--ink); border-color:#cbd5e1}

.kbd-list{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; font-size:12px; color:var(--ink2)}
.kbd-list div{display:flex; align-items:center; gap:8px}
kbd{
  display:inline-block; min-width:22px; text-align:center; padding:2px 6px; font-size:11px;
  background:#f1f5f9; border:1px solid #e2e8f0; border-bottom-width:2px; border-radius:5px;
  font-family:ui-monospace,Consolas,monospace; color:#334155;
}

/* ---------- 登录页 ---------- */
body.locked{overflow:hidden}
body.locked > .topbar,
body.locked > .gametabs,
body.locked > .secnav,
body.locked > main,
body.locked > .kbd-fab,
body.locked > .toast-wrap,
body.locked > .tooltip{visibility:hidden}

.gate{
  position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1100px 620px at 18% -10%, #fdeef2 0%, rgba(253,238,242,0) 62%),
    radial-gradient(900px 520px at 92% 10%, #eef3fd 0%, rgba(238,243,253,0) 58%),
    linear-gradient(180deg,#fbfcfe,#f4f6fa);
}
.gate.hide{display:none}
.gate-card{
  width:100%; max-width:392px; background:#fff; border:1px solid #e8ecf2; border-radius:18px;
  padding:34px 30px 26px; box-shadow:0 24px 64px -28px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.04);
  text-align:center; animation:gateIn .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes gateIn{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
.gate-logo{
  width:52px; height:52px; margin:0 auto 16px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(150deg,#e8435f,#b3142f); color:#fff; font-size:22px; font-weight:700;
  box-shadow:0 10px 22px -10px rgba(179,20,47,.6); letter-spacing:0;
}
.gate-card h2{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 7px}
.gate-sub{font-size:12px; color:#7c8798; line-height:1.65; margin:0 0 22px}
.gate-form{text-align:left}
.gate-label{display:block; font-size:11.5px; color:#7c8798; margin-bottom:7px}
.gate-input{position:relative; margin-bottom:12px}
.gate-input input{
  width:100%; height:44px; border:1px solid #dfe4ec; border-radius:10px; background:#fcfdfe;
  padding:0 62px 0 13px; font-size:14px; color:#0f172a; font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.gate-input input::placeholder{color:#b6bfcc; font-size:13px}
.gate-input input:focus{border-color:#94a3b8; background:#fff; box-shadow:0 0 0 3px rgba(15,23,42,.06)}
.gate-input.bad input{border-color:#e2758c; background:#fff8fa; box-shadow:0 0 0 3px rgba(194,24,58,.07)}
.gate-eye{
  position:absolute; right:6px; top:6px; height:32px; padding:0 10px; border:0; border-radius:7px;
  background:transparent; color:#94a3b8; font-size:11.5px; font-family:inherit; cursor:pointer;
}
.gate-eye:hover{background:#f1f5f9; color:#475569}
.gate-remember{display:flex; align-items:center; gap:7px; font-size:12px; color:#64748b; margin-bottom:18px; cursor:pointer}
.gate-remember input{width:14px; height:14px; accent-color:#b3142f; margin:0; cursor:pointer}
.gate-submit{
  width:100%; height:44px; border:0; border-radius:10px; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#d0243f,#b3142f); color:#fff; font-size:13.5px; font-weight:600;
  letter-spacing:.02em; transition:filter .15s, transform .1s, opacity .15s;
  box-shadow:0 10px 20px -12px rgba(179,20,47,.85);
}
.gate-submit:hover{filter:brightness(1.06)}
.gate-submit:active{transform:translateY(1px)}
.gate-submit:disabled{opacity:.55; cursor:default; filter:none; transform:none}
.gate-err{
  min-height:17px; margin:10px 0 0; font-size:11.5px; color:#c2183a; text-align:center; line-height:1.5;
}
.gate-foot{
  margin:20px 0 0; padding-top:16px; border-top:1px solid #f0f3f7;
  font-size:10.5px; color:#a3adbb; line-height:1.75;
}
.auth-out{height:26px !important; padding:0 10px !important; font-size:11.5px !important}

@media (max-width:480px){
  .gate-card{padding:28px 20px 22px; border-radius:15px}
  .gate-card h2{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .gate-card{animation:none}
}