:root{
  --brand:#2563eb; --brand-dark:#1d4ed8; --brand-soft:#eff6ff;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e2e8f0; --bg:#f5f7fb; --card:#ffffff;
  --radius:12px; --shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit}
.hidden{display:none !important}

/* ── 布局 ── */
.topbar{
  background:linear-gradient(120deg,#1e3a8a,#2563eb 60%,#3b82f6);
  color:#fff;padding:14px 20px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(30,58,138,.25);
}
.topbar .logo{font-size:17px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.topbar .logo small{display:block;font-size:11px;font-weight:400;opacity:.8;letter-spacing:1px}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px;opacity:.92}
.topbar .switch{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:5px 12px;border-radius:999px;cursor:pointer;font-size:13px;
}
.topbar .switch:hover{background:rgba(255,255,255,.28)}

.shell{max-width:1080px;margin:0 auto;padding:18px 16px 64px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px}
.card h3 .badge{margin-left:auto}

.page-title{font-size:20px;font-weight:700;margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-title .sub{font-size:13px;font-weight:400;color:var(--ink-3)}

/* ── 导航标签 ── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;background:#fff;padding:6px;border-radius:999px;border:1px solid var(--line);width:fit-content;max-width:100%}
.tabs button{
  border:0;background:transparent;padding:7px 16px;border-radius:999px;cursor:pointer;
  color:var(--ink-2);font-size:14px;font-weight:500;
}
.tabs button.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.35)}

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;
  transition:.15s;
}
.btn:hover{border-color:#c7d2fe;background:#f8fafc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.danger{color:var(--bad);border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── 表单 ── */
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea{resize:vertical;min-height:72px}
.form-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ── 表格 ── */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#f8fafc;color:var(--ink-2);font-weight:600;font-size:13px;white-space:nowrap}
tbody tr:hover{background:#fbfcfe}
.table-wrap{overflow-x:auto}

/* ── 标签 ── */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#f1f5f9;color:var(--ink-2);white-space:nowrap}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.badge.green{background:#dcfce7;color:#15803d}
.badge.red{background:#fee2e2;color:#b91c1c}
.badge.amber{background:#fef3c7;color:#b45309}
.badge.gray{background:#f1f5f9;color:#475569}

/* ── 学科卡片 ── */
.subject{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;
  cursor:pointer;transition:.18s;position:relative;overflow:hidden;
}
.subject:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:0 12px 28px -16px rgba(37,99,235,.5)}
.subject .nm{font-size:17px;font-weight:700}
.subject .rg{font-size:12px;color:var(--ink-3);margin-top:2px}
.subject .count{font-size:12px;color:var(--brand);margin-top:8px;font-weight:600}
.subject .ico{position:absolute;right:10px;top:8px;font-size:26px;opacity:.16}

/* ── 列表行 ── */
.rowitem{
  display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;margin-bottom:8px;transition:.15s;
}
.rowitem:hover{border-color:#bfdbfe;background:#f8fbff}
.rowitem .t{font-weight:600;font-size:14px}
.rowitem .m{font-size:12px;color:var(--ink-3);margin-top:2px}
.rowitem .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ── 答题 ── */
.qbox{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px;margin-bottom:12px}
.qstem{font-size:15px;font-weight:600;margin-bottom:12px;line-height:1.75}
.qstem .idx{color:var(--brand);margin-right:6px}
.opt{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.15s;background:#fff;
}
.opt:hover{border-color:#bfdbfe;background:#f8fbff}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt .tag{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink-2);background:#fff;
}
.opt.sel .tag{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── 题目配图 ── */
.qimgs{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.qimg{
  max-width:min(420px,100%);height:auto;border:1px solid var(--line);border-radius:10px;
  background:#fff;display:block;
}
.oimg{max-width:120px;max-height:72px;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (max-width:640px){
  .qimg{max-width:100%}
  .oimg{max-width:96px;max-height:60px}
}

.blank{border:0;border-bottom:1.5px solid var(--brand);border-radius:0;padding:4px 6px;width:110px;display:inline-block}
.quizbar{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:16px -16px -18px;box-shadow:0 -4px 16px -12px rgba(15,23,42,.3);
}
.quizbar .stat{font-size:13px;color:var(--ink-2)}
.quizbar .stat b{color:var(--brand)}

/* ── 结果 ── */
.score-hero{
  background:linear-gradient(120deg,#1e3a8a,#2563eb);color:#fff;border-radius:var(--radius);
  padding:22px;text-align:center;margin-bottom:14px;
}
.score-hero .big{font-size:40px;font-weight:800;line-height:1.1}
.score-hero .big small{font-size:16px;font-weight:500;opacity:.8}
.score-hero .meta{display:flex;gap:22px;justify-content:center;margin-top:12px;font-size:13px;flex-wrap:wrap;opacity:.95}
.verdict{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px}
.v-ok{background:#dcfce7;color:#15803d}
.v-half{background:#fef3c7;color:#b45309}
.v-bad{background:#fee2e2;color:#b91c1c}
.v-none{background:#f1f5f9;color:#475569}
.v-pending{background:#ede9fe;color:#6d28d9}
.ansbox{background:#f8fafc;border-left:3px solid var(--brand);border-radius:8px;padding:10px 12px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.ansbox b{color:var(--ink)}
.ansbox.wrong{border-left-color:var(--bad);background:#fff7f7}
.ansbox.ok{border-left-color:var(--ok);background:#f6fff9}
.passage{background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:12px;margin-bottom:12px;font-size:14px}
.audio-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:13px}

/* ── 统计条 ── */
.bar{height:8px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#2563eb);border-radius:999px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.kpi .k{font-size:12px;color:var(--ink-3)}
.kpi .v{font-size:24px;font-weight:800;margin-top:2px;color:var(--brand)}
.kpi .v small{font-size:12px;font-weight:500;color:var(--ink-3)}

/* ── 弹层 ── */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:200;overflow:auto}
.modal{background:#fff;border-radius:14px;width:min(760px,100%);box-shadow:0 24px 60px -20px rgba(15,23,42,.5)}
/* 窄弹窗：个人中心的绑定 / 解绑等表单类对话框 */
.modal.narrow{width:min(440px,100%)}
.modal .mh{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;font-weight:700}
.modal .mh .x{margin-left:auto;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--ink-3);line-height:1}
.modal .mb{padding:18px;max-height:66vh;overflow:auto}
.modal .mf{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

/* ── 提示 ── */
#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:#0f172a;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;
  box-shadow:0 10px 30px -10px rgba(15,23,42,.6);animation:tin .22s ease-out;
}
.toast.ok{background:#15803d}.toast.err{background:#b91c1c}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.empty{text-align:center;padding:34px 12px;color:var(--ink-3);font-size:14px}
.empty .big{font-size:34px;opacity:.4;display:block;margin-bottom:8px}
.loading{text-align:center;padding:26px;color:var(--ink-3);font-size:14px}

.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--ink-2)}

.auth-wrap{max-width:420px;margin:6vh auto;padding:0 16px}
.auth-card{background:#fff;border-radius:16px;padding:26px;box-shadow:var(--shadow);border:1px solid var(--line)}
.auth-card .hd{text-align:center;margin-bottom:20px}
.auth-card .hd .t{font-size:20px;font-weight:800}
.auth-card .hd .s{font-size:13px;color:var(--ink-3);margin-top:4px}
.hintbox{background:var(--brand-soft);border:1px dashed #bfdbfe;border-radius:9px;padding:9px 12px;font-size:12.5px;color:#1e40af;margin-top:14px;line-height:1.7}
.hintbox code{background:rgba(255,255,255,.7);border-radius:4px;padding:1px 5px;font-size:12px}

/* 交卷确认弹窗：答题统计 + 未答题号快速跳转（防误触，见 student.js submitConfirmDialog） */
.submit-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.submit-stat .ss{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:9px 10px;text-align:center}
.submit-stat .ss .k{font-size:12px;color:var(--ink-3)}
.submit-stat .ss .v{font-size:20px;font-weight:700;color:var(--ink-1);line-height:1.35}
.submit-stat .ss .v small{font-size:12px;font-weight:600;color:var(--ink-3)}
.submit-left{margin-top:12px;padding:11px 12px;border-radius:9px;font-size:13px;line-height:1.75;
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.submit-left.ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.submit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.submit-chips .btn.sm{padding:3px 9px;font-size:12.5px}

/* 学生端登录页底部的教师 / 管理员入口（低干扰，仅出现在登录页，首页与学习页不出现） */
.auth-foot{margin-top:14px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.auth-foot a{color:var(--brand);font-weight:600;margin-left:2px}
.auth-foot a:hover{text-decoration:underline}

/* 管理端：二级页签（数据统计 / 系统管理内部导航） */
.tabs.sub-tabs{background:#f8fafc;border-style:dashed;margin-top:-6px}
.tabs.sub-tabs button{padding:6px 14px;font-size:13px}

/* 管理端：权限 / 角色 勾选清单 */
.checklist{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:1px solid var(--line);border-radius:9px;padding:10px;background:#fcfdff}
.checklist .chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);
  padding:5px 7px;border-radius:7px;cursor:pointer;transition:background .15s}
.checklist .chk:hover{background:var(--brand-soft)}
.checklist .chk input{width:auto;margin:0}
.checklist .chk code{font-size:11px;color:var(--ink-3);margin-left:auto}

/* 行内代码（接口路径、权限码、SQL 片段等） */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:#f1f5f9;border-radius:5px;padding:1px 6px;color:#0f172a;word-break:break-all}

/* 系统参数 / 数据库信息卡片内的紧凑列表项 */
.card .rowitem + .rowitem{margin-top:6px}

@media (max-width:640px){
  .shell{padding:14px 12px 60px}
  .topbar{padding:12px 14px}
  .topbar .logo{font-size:15px}
  .score-hero .big{font-size:32px}
  th,td{padding:8px 7px;font-size:13px}
  .quizbar{margin:14px -12px -14px}
}

/* ── 访客首页 Hero（免登录体验区） ── */
.hero{
  background:linear-gradient(125deg,#1e3a8a,#2563eb 58%,#60a5fa);
  color:#fff;border-radius:16px;padding:26px 28px;margin-bottom:16px;
  box-shadow:0 12px 32px -18px rgba(30,58,138,.7);
}
.hero-t{font-size:25px;font-weight:800;letter-spacing:.3px}
.hero-s{margin-top:8px;font-size:15px;opacity:.94}
.hero-tip{margin-top:12px;font-size:13px;opacity:.82}
.hero .btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn:hover{background:rgba(255,255,255,.3)}
.hero .btn.primary{background:#fff;color:var(--brand);border-color:#fff}
.hero .btn.primary:hover{background:#eef4ff}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.18)}

/* ── 首页顶部「公告 + 登录」区（导航栏下方蓝底，左右两栏） ──
   左：公告与消息（只留置顶系统公告）｜右：登录 / 注册 / 找回密码（或已登录账号卡） */
.gh{
  background:linear-gradient(125deg,#1e3a8a,#2563eb 58%,#60a5fa);
  color:#fff;border-radius:16px;padding:20px 22px;margin-bottom:16px;
  box-shadow:0 12px 32px -18px rgba(30,58,138,.7);
}
/* 两栏都用 align-items:stretch 拉平：左栏公告少时自动把标题行间距撑开，
   与右侧登录卡严格等高（避免左栏过矮显得留白多） */
.gh-grid{display:grid;gap:20px;grid-template-columns:1.02fr .98fr;align-items:stretch}
.gh-left,.gh-right{min-width:0}
.gh-left{display:flex;flex-direction:column}
.gh .nb-head{margin-bottom:10px}
.gh .nb-title{color:#fff;font-size:15.5px}
.gh-news{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.gh-nonotice{background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.35);
  border-radius:11px;padding:14px;font-size:13px;opacity:.9}

/* 置顶公告 = 摘要卡：标题做成链接（点击看全文）+ 正文只露前 3 行，超出以 … 收尾 */
.hnotice{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:11px;padding:11px 13px}
.hnotice-t{display:flex;align-items:center;gap:7px;font-size:14.5px;line-height:1.5}
.hnotice-a{flex:1;min-width:0;border:0;background:transparent;padding:0;color:#fff;
  font:inherit;font-weight:700;text-align:left;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55)}
.hnotice-a:hover{color:#fde68a;text-decoration-color:#fde68a}
.hnotice-c{margin:6px 0 0;font-size:12.6px;line-height:1.7;opacity:.9;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;max-height:calc(12.6px * 1.7 * 3)}

/* 其余公告 = 纯标题行（不再显示分类与日期整行）；行间距随左栏高度自适应撑开 */
.hn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  justify-content:space-between;flex:1;min-height:0}
.hn-item{display:flex;min-width:0}
.hn-a{flex:1;min-width:0;border:0;background:transparent;padding:7px 2px;cursor:pointer;
  color:#eaf2ff;font:inherit;font-size:13.4px;line-height:1.5;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:7px}
.hn-a::before{content:'· ';opacity:.7;font-weight:700}
.hn-a:hover{color:#fde68a;background:rgba(255,255,255,.1)}

.gh-card{background:#fff;border-radius:14px;padding:15px 16px 17px;color:var(--ink-1);
  box-shadow:0 16px 40px -22px rgba(15,23,42,.6)}
.gh-card .gh-hd{margin-bottom:13px}
.gh-card .gh-hd .t{font-size:16px;font-weight:800}
.gh-card .gh-hd .s{font-size:12.4px;color:var(--ink-3);margin-top:3px}
.gh-card .gh-pane>.btn-row:last-child{margin-bottom:0}

.gh-subseg{display:flex;gap:16px;margin-bottom:12px}
.gh-subseg button{border:0;background:transparent;padding:2px 0 4px;cursor:pointer;
  color:var(--ink-3);font-size:12.8px;font-weight:600;border-bottom:2px solid transparent}
.gh-subseg button.on{color:var(--brand);border-bottom-color:var(--brand)}

.gh-card .field{margin-bottom:10px}
.gh-card .form-row{margin-bottom:0}
.gh-card .hintbox{margin-top:10px;font-size:12px}
.gh-card .qr-frame{width:150px;height:150px}
.gh-card .qr-s{min-height:36px;font-size:12.4px}

.gh-logged .gh-who{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.gh-ava{font-size:26px;line-height:1}
.gh-who-t{font-weight:700;font-size:15px}
.gh-who-m{font-size:12.4px;color:var(--ink-3);margin-top:3px;line-height:1.6}
.gh-quick{display:flex;flex-wrap:wrap;gap:8px}
.gh-foot{margin-top:12px;font-size:12.2px;color:var(--ink-3);line-height:1.65}

/* 公告全文弹窗（首页公告摘要卡 / 标题行点击后打开） */
.nt-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.nt-date{margin-left:auto;color:var(--ink-3);font-size:12.4px}
.nt-body{font-size:14px;line-height:1.85;color:var(--ink-1);word-break:break-word}

@media (max-width:900px){
  .gh-grid{grid-template-columns:1fr}
}

/* 统计图分组 */
.stat-block{margin-top:14px}
.stat-block>b{display:block;font-size:13px;color:var(--ink-2);margin-bottom:2px}

/* 试做模式提示条 */
.trial-note{
  background:var(--brand-soft);border:1px solid #dbeafe;border-left:3px solid var(--brand);
  border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;color:var(--ink-2);
}

/* ── 登录方式切换（账号密码 / 微信扫码） ── */
.seg{display:flex;gap:6px;background:#f1f5f9;border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px}
.seg button{flex:1;border:0;background:transparent;color:var(--ink-2);padding:8px 6px;border-radius:7px;cursor:pointer;font-size:13.5px;font-weight:500}
.seg button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.12)}

/* ── 微信扫码登录 ── */
.qr-box{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.qr-frame{
  width:172px;height:172px;flex:none;border:1px solid var(--line);border-radius:12px;
  background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;
}
.qr-frame img{width:100%;height:100%;object-fit:contain;display:block}
.qr-side{flex:1;min-width:170px}
.qr-t{font-size:15px;font-weight:700;margin-bottom:6px}
.qr-s{font-size:12.8px;color:var(--ink-2);line-height:1.7;min-height:40px}

/* ── 答题页题号导航（上一题/下一题） ── */
.qnav{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;flex-wrap:wrap;box-shadow:var(--shadow)}
.qnav .qdots{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.qdot{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);font-size:12.5px;cursor:pointer;padding:0 6px}
.qdot:hover{border-color:var(--brand);color:var(--brand)}
.qdot.done{background:var(--brand-soft);border-color:#bfdbfe;color:var(--brand);font-weight:600}
.qdot.cur{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* ═══ 首页（免登录公开页）：公告板 + 试学 · 试做 ═══ */

/* ── 公告板 ── */
.notice-board{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;margin-bottom:16px;box-shadow:var(--shadow);
}
.nb-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.nb-ico{font-size:18px;line-height:1}
.nb-title{font-size:16px;font-weight:700}
.nb-hint{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.nb-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.notice{
  border:1px solid var(--line);border-left:3px solid #cbd5e1;border-radius:10px;
  padding:12px 14px;background:#fcfdff;transition:.16s;
}
.notice.top{border-left-color:var(--warn);background:#fffdf7}
.notice:hover{border-color:#bfdbfe;background:#f8fbff}
.notice-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.notice-date{font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.notice-t{font-size:14.5px;font-weight:600;line-height:1.5}
.notice-c{
  margin-top:5px;font-size:12.8px;color:var(--ink-2);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── 试学 · 试做 面板 ── */
.trial-panel{margin-top:2px}
.tp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.tp-ico{font-size:19px;line-height:1}
.tp-title{font-size:19px;font-weight:700}
.tp-sub{font-size:13px;color:var(--ink-3)}
.tp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}

/* 学科卡：顶部主题色条 + 试学/试做两行，整行可点 */
.tcard{
  --tone:#2563eb;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--tone);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;
}
.tcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(37,99,235,.55)}
.tcard-hd{display:flex;align-items:center;gap:9px;padding:12px 15px 10px;border-bottom:1px dashed var(--line)}
.tcard-ico{font-size:20px;line-height:1}
.tcard-nm{font-size:16.5px;font-weight:700;color:var(--tone)}
.tcard-hd .badge{margin-left:auto}
.tcard-bd{padding:5px 7px 7px;display:flex;flex-direction:column;flex:1}

.tline{
  display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:9px;
  color:inherit;text-decoration:none;transition:.15s;
}
.tline + .tline{border-top:1px dashed #eef2f7}
.tline:hover{background:var(--brand-soft)}
.tline-kind{
  flex:none;width:38px;height:22px;border-radius:6px;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:var(--ink-2);
}
.tline.primary .tline-kind{background:#dbeafe;color:#1d4ed8}
.tline-main{flex:1;min-width:0;display:flex;flex-direction:column}
.tline-t{font-size:13.8px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline-m{font-size:12px;color:var(--ink-3);margin-top:1px}
.tline-go{flex:none;font-size:12.5px;font-weight:600;color:var(--brand);white-space:nowrap}

@media (max-width:640px){
  .nb-hint{display:none}
  .tline-go{font-size:12px}
  .notice-board{padding:13px 13px}
}

/* ═══ 账号状态（有效期 / 过期 / 锁定）提示 ═══ */

/* 顶部账号横幅：danger=已过期/锁定，warn=即将过期 */
.acct-banner{
  display:flex;align-items:flex-start;gap:11px;
  border-radius:12px;padding:12px 15px;margin-bottom:14px;
  border:1px solid #fecaca;border-left:4px solid #dc2626;background:#fef2f2;
  box-shadow:0 6px 18px -14px rgba(220,38,38,.6);
}
.acct-banner.warn{
  border-color:#fed7aa;border-left-color:#f59e0b;background:#fffbeb;
  box-shadow:0 6px 18px -14px rgba(245,158,11,.6);
}
.acct-banner .ab-ico{flex:none;font-size:19px;line-height:1.35}
.acct-banner .ab-body{flex:1;min-width:0;font-size:13.3px;line-height:1.7;color:#7f1d1d}
.acct-banner.warn .ab-body{color:#78350f}
.acct-banner .ab-body b{display:block;font-size:14px;margin-bottom:2px}
.acct-banner .ab-body a{color:inherit;font-weight:600}
.acct-banner .ab-tag{
  flex:none;align-self:center;font-size:11.5px;font-weight:700;white-space:nowrap;
  background:#dc2626;color:#fff;border-radius:999px;padding:3px 10px;
}
.acct-banner.warn .ab-tag{background:#f59e0b}

/* 登录表单内联错误 */
.login-err{
  margin-top:12px;border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.7;
  background:#fef2f2;border:1px solid #fecaca;border-left:3px solid #dc2626;color:#991b1b;
}
.login-err.warn{background:#fffbeb;border-color:#fed7aa;border-left-color:#f59e0b;color:#92400e}
.login-err b{display:block;margin-bottom:3px}
.login-err .lh{display:block;margin-top:6px;font-size:12.3px;color:var(--ink-2)}

/* 范围提示条（访客试学 / 只读模式） */
.scope-tip{margin-bottom:14px}
.scope-tip.danger{background:#fef2f2;border:1px solid #fecaca;border-left:3px solid #dc2626;color:#991b1b}

/* 管理端学生管理：有效期与状态 */
.vb-cell{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.vb-cell .vb-d{font-weight:600;color:var(--ink-1)}
.vb-cell .vb-r{color:var(--ink-3)}
.vb-cell .vb-r.exp{color:#dc2626;font-weight:600}
.vb-cell .vb-r.warn{color:#d97706;font-weight:600}
.vb-cell .vb-r.neg{color:var(--ink-3)}

/* 有效期设置面板（模态，复用 .modal-mask / .modal 骨架，这里是面板内元素） */
.vb-note{font-size:12.6px;color:var(--ink-2);line-height:1.7;margin-bottom:12px;background:#f8fafc;border:1px dashed var(--line);border-radius:9px;padding:9px 12px}
.vb-modes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));margin-bottom:14px}
.vb-mode{
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;
  background:#fff;font-size:13px;text-align:left;color:var(--ink-2);transition:.15s;
}
.vb-mode:hover{border-color:#bfdbfe;background:#f8fbff}
.vb-mode.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600;box-shadow:0 0 0 2px #dbeafe}
.vb-mode i{display:block;font-size:11.5px;font-style:normal;opacity:.75;margin-top:2px;font-weight:400}
.vb-field{margin-bottom:12px}
.vb-field label{display:block;font-size:12.8px;color:var(--ink-2);margin-bottom:5px}
.vb-field input[type=date],.vb-field input[type=number],.vb-field input[type=text]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;
  font-family:inherit;color:var(--ink-1);background:#fff;
}
.vb-field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px #dbeafe}
.vb-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.vb-quick button{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;
  font-size:12.3px;cursor:pointer;color:var(--ink-2);
}
.vb-quick button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.vb-lock{display:flex;align-items:center;gap:8px;font-size:13.3px;color:var(--ink-2)}
.vb-lock input{width:16px;height:16px}
.vb-err{margin-top:10px;font-size:12.6px;color:#dc2626}