/* 电力市场题库训练系统 —— 浅色主题，桌面端侧栏 + 移动底栏 */
:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --ink:#111827;
  --ink-2:#475569;
  --ink-3:#8a96a8;
  --line:#e4e8f0;
  --line-2:#eef1f7;
  --brand:#4f46e5;
  --brand-soft:#eef2ff;
  --brand-2:#6366f1;
  --ok:#0f9d58;
  --ok-soft:#e8f6ee;
  --bad:#d9463f;
  --bad-soft:#fdeceb;
  --warn:#b45309;
  --warn-soft:#fef4e6;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 20px -8px rgba(16,24,40,.10);
  --sidebar:236px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
button{font-family:inherit}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.main{flex:1;min-width:0;padding:28px 32px 56px}
.wrap{max-width:980px;margin:0 auto}
.wrap-narrow{max-width:820px;margin:0 auto}

.brand{display:flex;gap:11px;align-items:center;padding:20px 18px 16px;border-bottom:1px solid var(--line-2)}
.brand-mark{
  width:38px;height:38px;flex:0 0 38px;
  display:block;object-fit:contain;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.28;min-width:0}
.brand-txt strong{font-size:15px}
.brand-txt span{font-size:11.5px;color:var(--ink-3)}

.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--ink-2);font-size:14px;transition:background .13s,color .13s;
}
.nav-item:hover{background:var(--line-2);color:var(--ink)}
.nav-item.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-item.on .ic{opacity:1}
.ic{width:17px;height:17px;flex:0 0 17px;opacity:.68;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;}
.ic-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E")}
.ic-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E")}
.ic-quiz{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5A2.5 2.5 0 0 1 14.5 10c0 1.7-2.5 2-2.5 3.5'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5A2.5 2.5 0 0 1 14.5 10c0 1.7-2.5 2-2.5 3.5'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23000'/%3E%3C/svg%3E")}
.ic-warn{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 4 3 20h18z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 4 3 20h18z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}
.ic-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E")}
.ic-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E")}
.ic-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.ic-info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}

.side-foot{padding:12px 14px 16px;border-top:1px solid var(--line-2)}
.src-note{margin-top:9px;font-size:11px;color:var(--ink-3);line-height:1.5}

.mobile-nav{display:none}

/* ---------- 通用组件 ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:23px}
.page-head .sub{color:var(--ink-3);font-size:13px;margin-top:4px}
.breadcrumb{font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
.breadcrumb a:hover{color:var(--brand)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:20px 22px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2);font-size:14.5px;cursor:pointer;
  transition:.14s;white-space:nowrap;
}
.btn:hover{border-color:#cbd5e1;color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:#4338ca;border-color:#4338ca;color:#fff}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn-ghost{background:transparent}
.btn-lg{padding:11px 22px;font-size:15px;border-radius:10px}

.input,.select{
  padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:13.5px;color:var(--ink);outline:none;transition:.14s;font-family:inherit;
}
.input:focus,.select:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(99,102,241,.13)}
.input{min-width:190px}

.tag{
  display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;
  background:var(--line-2);color:var(--ink-2);font-weight:500;
}
.tag-brand{background:var(--brand-soft);color:var(--brand)}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-bad{background:var(--bad-soft);color:var(--bad)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-paper{background:#eef6ff;color:#2563eb;border:1px solid #d6e6ff}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1}

/* ---------- 统计卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow)}
.stat .k{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.stat .v{font-size:26px;font-weight:680;margin-top:5px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .u{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:3px}
.stat .d{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* ---------- 条形图 ---------- */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:96px 1fr 118px;gap:12px;align-items:center;font-size:13px}
.bar-row .lb{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:9px;background:var(--line-2);border-radius:6px;overflow:hidden;display:flex}
.bar-fill{height:100%;border-radius:6px}
.bar-fill.ok{background:linear-gradient(90deg,#34d399,#0f9d58)}
.bar-fill.bad{background:linear-gradient(90deg,#fb7185,#d9463f)}
.bar-fill.brand{background:linear-gradient(90deg,#818cf8,#4f46e5)}
.bar-row .vv{color:var(--ink-3);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 表格 ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;padding:9px 12px;color:var(--ink-3);font-weight:600;font-size:12px;
  border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap;
}
.table td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:#fbfcfe}

.empty{text-align:center;padding:56px 20px;color:var(--ink-3)}
.empty .big{font-size:38px;margin-bottom:10px;opacity:.5}

/* ---------- 答题区 ---------- */
.q-layout{display:grid;grid-template-columns:1fr 236px;gap:18px;align-items:start}
@media (max-width:1080px){.q-layout{grid-template-columns:1fr}}

.q-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.q-meta{font-size:12.5px;color:var(--ink-3);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.q-idx{margin-left:auto;font-variant-numeric:tabular-nums}

.q-stem{font-size:17px;line-height:1.72;font-weight:500;color:var(--ink);margin-bottom:16px;white-space:pre-wrap}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:11px;cursor:pointer;transition:.13s;background:var(--panel);
}
.opt:hover{border-color:#c7d2fe;background:#fbfbff}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt .key{
  width:23px;height:23px;flex:0 0 23px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--ink-3);
  margin-top:1px;transition:.13s;
}
.opt.sel .key{background:var(--brand);border-color:var(--brand);color:#fff}
.opt .txt{flex:1;line-height:1.6}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .key{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .key{background:var(--bad);border-color:var(--bad);color:#fff}
.opt.locked{cursor:default}
.opt.locked:hover{border-color:var(--line);background:var(--panel)}
.opt.right.locked:hover{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong.locked:hover{border-color:var(--bad);background:var(--bad-soft)}

.feedback{
  margin-top:14px;padding:12px 15px;border-radius:11px;font-size:13.5px;line-height:1.68;
  display:flex;gap:11px;align-items:flex-start;
}
.feedback.ok{background:var(--ok-soft);color:#0b6b3f;border:1px solid #c6ead6}
.feedback.bad{background:var(--bad-soft);color:#a3231e;border:1px solid #f6cfcd}
.feedback b{font-weight:650}
.feedback .ans{font-weight:650}

.explain{
  margin-top:10px;padding:12px 15px;border-radius:11px;background:#f8fafc;
  border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.7;
}

.q-foot{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.q-foot .grow{flex:1}

/* 答题卡 */
.sheet{position:sticky;top:24px}
.sheet h4{font-size:13px;margin-bottom:11px;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center}
.sheet-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-height:430px;overflow:auto;padding-right:2px}
.sheet-grid a{display:grid;place-items:center;height:29px;border-radius:7px;font-size:12px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--panel);font-variant-numeric:tabular-nums}
.sheet-grid a:hover{border-color:var(--brand-2)}
.sheet-grid a.right{background:var(--ok-soft);border-color:#bfe6cf;color:#0b6b3f}
.sheet-grid a.wrong{background:var(--bad-soft);border-color:#f4c9c6;color:#a3231e}
.sheet-grid a.mastered{background:var(--brand-soft);border-color:#c7d2fe;color:var(--brand)}
.sheet-grid a.cur{outline:2px solid var(--brand);outline-offset:1px;font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;font-size:11.5px;color:var(--ink-3)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}

/* 进度条 */
.progress{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#818cf8,#4f46e5);border-radius:4px;transition:width .25s}

.kbd{display:inline-block;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  font-size:11px;font-family:ui-monospace,Consolas,monospace;color:var(--ink-3);background:#fafbfd}

.note{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.divider{height:1px;background:var(--line-2);margin:18px 0}

/* 题库浏览题干 */
.q-line{display:flex;gap:13px;align-items:flex-start}
.q-line .no{
  flex:0 0 34px;height:34px;border-radius:9px;background:var(--line-2);color:var(--ink-2);
  display:grid;place-items:center;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;
}
.q-line .body{flex:1;min-width:0}
.q-line .stem{font-size:14.5px;line-height:1.66;margin-bottom:7px}
.q-line .olist{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:13px;color:var(--ink-2)}
.q-line .olist span.correct{color:var(--ok);font-weight:600}
.reveal{font-size:12.5px;color:var(--brand);cursor:pointer;user-select:none}
.reveal:hover{text-decoration:underline}

.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--ink-2)}
.pager a:hover{border-color:var(--brand-2);color:var(--brand)}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pager .gap{border:none;background:none}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:#111827;color:#fff;padding:9px 17px;border-radius:9px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.2s;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 侧栏用户块 ---------- */
.side-user{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2);font-size:12.5px}
.side-user .su-id{color:var(--ink-2);font-weight:600}
.side-user .su-acts{display:flex;gap:12px;margin-top:4px}
.side-user .su-acts a{color:var(--brand);cursor:pointer}
.side-user .su-acts a:hover{text-decoration:underline}

/* ---------- 表单字段（账号管理/登录） ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field > span{font-size:13.5px;color:var(--ink-2);font-weight:500}
.field-inline{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
.ops{display:flex;gap:6px;flex-wrap:wrap;white-space:nowrap}

/* ---------- 首页培训宣传 ---------- */
.promo{
  display:flex;gap:22px;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,#4f46e5,#7c3aed);color:#fff;
  border-radius:var(--radius);padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow);
}
.promo-main{flex:1;min-width:0}
.promo-tag{display:inline-block;font-size:12.5px;background:rgba(255,255,255,.18);
  padding:3px 10px;border-radius:999px;margin-bottom:10px}
.promo h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.promo p{font-size:14px;line-height:1.7;opacity:.92;margin:9px 0 15px;max-width:62ch}
.promo-btns{display:flex;gap:10px;flex-wrap:wrap}
.promo .btn{background:rgba(255,255,255,.95);border-color:transparent;color:#4338ca}
.promo .btn:hover{background:#fff}
.promo .btn:not(.btn-primary){background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.promo-qr{background:#fff;border-radius:12px;padding:10px;text-align:center;flex:0 0 auto}
.promo-qr img{width:104px;height:104px;display:block;border-radius:6px}
.promo-qr div{font-size:12px;color:var(--ink-2);margin-top:6px;font-weight:600}

/* ---------- 全站页脚（居中紧凑版） ---------- */
.site-foot{margin-top:34px;border-top:1px solid var(--line);padding:22px 0 8px}
.sf-inner{display:flex;gap:18px;align-items:center;justify-content:center}
.sf-qr{width:96px;height:96px;flex:0 0 auto;display:block;border:1px solid var(--line);
  border-radius:12px;background:#fff;padding:5px}
.sf-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.sf-line1{display:flex;align-items:center;gap:8px;white-space:nowrap}
.sf-mark{width:27px;height:27px;flex:0 0 auto;display:block;object-fit:contain}
.sf-line1 strong{font-size:15.5px;letter-spacing:.02em}
.sf-tag{font-size:11.5px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:2px 10px}
.sf-line2,.sf-line3{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-line3{opacity:.9}

/* ---------- 登录页 ---------- */
.login-body{background:linear-gradient(135deg,#eef2ff,#f4f6fb);min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-wrap{display:flex;gap:0;width:100%;max-width:780px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.login-card{flex:1;padding:34px 34px 30px;min-width:0}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.login-brand .brand-mark{width:48px;height:48px;flex:0 0 48px}
.login-brand .brand-txt strong{font-size:18px}
.login-brand .brand-txt span{font-size:12.5px;color:var(--ink-3)}
.login-card h1{font-size:24px}
.login-sub{color:var(--ink-3);font-size:13.5px;margin:6px 0 22px}
.login-err{background:var(--bad-soft);color:#a3231e;border:1px solid #f6cfcd;
  padding:9px 13px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.login-input{width:100%;font-size:16px;padding:12px 13px}
.login-btn{width:100%;padding:12px;font-size:16px;margin-top:4px}
.login-side{flex:0 0 268px;background:linear-gradient(150deg,#4f46e5,#7c3aed);color:#fff;
  padding:28px 24px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.qr-card{background:#fff;border-radius:14px;padding:16px;text-align:center;color:var(--ink)}
.qr-img{width:148px;height:148px;display:block;margin:0 auto;border-radius:8px}
.qr-ph{width:148px;height:148px;display:grid;place-items:center;margin:0 auto;
  border:2px dashed var(--line);border-radius:8px;color:var(--ink-3);font-size:14px;text-align:center;line-height:1.6}
.qr-cap{font-size:14px;font-weight:700;color:var(--ink);margin-top:10px}
.qr-note{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.6}
.login-promo{color:#fff}
.login-promo .promo-t{font-size:16px;font-weight:700}
.login-promo .promo-d{font-size:12.5px;opacity:.9;margin-top:6px;line-height:1.6}

@media (max-width:900px){
  .sidebar{display:none}
  .main{padding:16px 14px 92px}
  .mobile-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--panel);
    border-top:1px solid var(--line);padding:5px 2px calc(5px + env(safe-area-inset-bottom));z-index:50;
  }
  .mobile-nav a{flex:1;text-align:center;padding:6px 1px;font-size:11px;color:var(--ink-3);min-height:48px;display:flex;flex-direction:column;justify-content:center}
  .mobile-nav a.on{color:var(--brand);font-weight:600}
  .bar-row{grid-template-columns:80px 1fr 96px}
  .q-stem{font-size:17px}
  .page-head h1{font-size:21px}
}

/* 手机优先：字号更大、点击区域更舒适 */
@media (max-width:768px){
  body{font-size:16.5px}
  .main{padding:14px 12px 96px}
  .wrap{max-width:100%}
  .page-head{flex-direction:column;align-items:stretch;gap:12px}
  .page-head .sub{font-size:13px}
  .promo{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px}
  .promo h2{font-size:20px}
  .promo p{font-size:13.5px}
  .promo-qr{align-self:center}
  .stat .v{font-size:24px}
  .q-stem{font-size:18px;line-height:1.78}
  .opt{padding:14px 15px}
  .opt .txt{font-size:15.5px;line-height:1.65}
  .opt .key{width:26px;height:26px;flex-basis:26px;font-size:13.5px}
  .btn{padding:10px 16px;font-size:15px}
  .btn-lg{padding:13px 22px;font-size:16px}
  .table{font-size:14px}
  .table th,.table td{padding:10px 10px}
  .site-foot{margin-top:24px}
  .sf-inner{flex-direction:column;text-align:center;gap:12px;padding:0 8px}
  .sf-txt{align-items:center}
  .sf-line1{justify-content:center}
  .sf-line2,.sf-line3{white-space:normal;text-align:center}

  /* 登录页：单列堆叠，适合手机 */
  .login-wrap{flex-direction:column;max-width:420px}
  .login-card{padding:28px 22px 26px}
  .login-side{flex:none;padding:24px 22px}
  .login-side .qr-card{align-self:center}
  .qr-img,.qr-ph{width:160px;height:160px}
  .login-body{padding:18px 12px;align-items:flex-start}
}