/* ============================================================
   Latihan Bahasa Indonesia — stylesheet v3
   视觉参考：maasarts.com（Tailwind 靛蓝 / 紫罗兰体系）
   · 主色 #6366f1 → 紫 #8b5cf6 → 品红 #ec4899
   · 文字 slate 系：#0f172a / #475569 / #94a3b8
   · 卡片：白底 + 1px 极浅描边 + 14px 圆角 + 几乎无阴影
   · 图标全部为内联 SVG 线性图标（见 icons.js）
   ============================================================ */
:root {
  --brand: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-soft: #eef2ff;
  --brand-soft2: #e0e7ff;
  --violet: #8b5cf6;
  --pink: #ec4899;

  --ink: #0f172a;
  --ink-2: #1e293b;
  --ink-soft: #475569;
  --ink-mute: #64748b;
  --ink-faint: #94a3b8;

  --bg: #f8fafc;
  --card: #ffffff;
  --line: #e8ebf3;
  --line-2: #eef1f7;

  --ok: #059669;
  --ok-soft: #ecfdf5;
  --ok-line: #a7f3d0;
  --bad: #e11d48;
  --bad-soft: #fff1f4;
  --bad-line: #fecdd3;
  --warn: #d97706;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --gold: #b45309;
  --gold-soft: #fffbeb;
  --gold-line: #fde68a;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --sans: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
          "Malgun Gothic", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system,
          "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ico { flex: 0 0 auto; vertical-align: -.16em; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px 0;
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.logo-id {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #6366F1, #4338CA);
  box-shadow: 0 2px 7px rgba(67,56,202,.30);
}
.logo-id i {
  width: 62%; height: 62%; background: #fff;
  -webkit-mask: url(logo.svg) center/contain no-repeat;
  mask: url(logo.svg) center/contain no-repeat;
}
.brand-text { min-width: 0; }
.brand h1 {
  margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.015em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .sub { margin: 0; font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .sub b { color: var(--brand-600); font-weight: 650; }

.lang-switch { display: flex; gap: 2px; background: #f1f3f9; padding: 3px; border-radius: 9px; flex: 0 0 auto; }
.lang-btn {
  border: none; background: transparent; color: var(--ink-mute); font: inherit;
  font-size: 12.5px; font-weight: 550; padding: 5px 11px; border-radius: 7px;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.lang-btn:hover { color: var(--ink-2); }
.lang-btn.active { background: #fff; color: var(--brand-600); font-weight: 700; box-shadow: var(--shadow-sm); }

.tabs {
  max-width: 1160px; margin: 10px auto 0;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; color: var(--ink-soft); font: inherit;
  font-size: 14px; font-weight: 550; padding: 10px 13px; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: .15s;
  border-radius: 8px 8px 0 0;
}
.tabs button .ico { color: var(--ink-faint); transition: .15s; }
.tabs button:hover { color: var(--ink); background: #f6f7fc; }
.tabs button:hover .ico { color: var(--ink-soft); }
.tabs button.active { color: var(--brand-600); font-weight: 700; border-bottom-color: var(--brand); }
.tabs button.active .ico { color: var(--brand); }

/* ---------------- 布局 ---------------- */
main { max-width: 1160px; margin: 0 auto; padding: 24px 24px 72px; }
.loading { text-align: center; color: var(--ink-faint); padding: 90px 0; font-size: 14px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.card p { margin: 6px 0; }
.card.hero {
  background:
    radial-gradient(1200px 240px at 12% -40%, #eef2ff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 220px at 96% -60%, #fdf2f8 0%, rgba(255,255,255,0) 60%),
    #fff;
}
.card-compact { padding: 14px 16px; }

.muted { color: var(--ink-mute); font-size: 13.5px; }
.muted.small, .small { font-size: 12.5px; }
.zh { color: var(--ink-soft); }
.zh-inline { color: var(--ink-mute); font-size: 13.5px; }
.section-title {
  margin: 30px 0 14px; font-size: 13px; font-weight: 700; color: var(--ink-mute);
  letter-spacing: .08em; text-transform: uppercase;
}

.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.grid.courses { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px;
  border-radius: var(--radius-xs); cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:hover { background: #f8f9fd; border-color: #d7dcea; }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn .ico { color: var(--ink-mute); }
.btn:hover .ico { color: var(--ink-soft); }
.btn.primary {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  border-color: var(--brand-600); color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.28), 0 6px 16px rgba(79,70,229,.18);
}
.btn.primary .ico { color: #fff; }
.btn.primary:hover { background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-mute); font-weight: 550; }
.btn.ghost .ico { color: var(--ink-faint); }
.btn.ghost:hover { background: #f3f4fa; color: var(--ink-2); }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 7px; }
.btn.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.btn.ok .ico { color: var(--ok); }
.btn.ok:hover { background: #dcfce7; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.btn-row.topnav { margin-top: 0; margin-bottom: 14px; }

/* ---------------- 徽章 ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
  background: #f1f5f9; color: var(--ink-mute); margin-left: 8px; vertical-align: 2px;
}
.tag.red, .tag.blue { background: var(--brand-soft); color: var(--brand-600); }
.tag.green { background: var(--ok-soft); color: var(--ok); }

/* ---------------- 单元卡片 ---------------- */
.unit-head { display: flex; align-items: flex-start; gap: 13px; }
.unit-head .ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-600);
}

/* 图标砖：浅色底 + 彩色图标 */
.itile {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s;
}
.itile .ico { display: block; position: relative; z-index: 1; }
.unit-card:hover .itile { transform: translateY(-1px) scale(1.04); }

/* 彩色图标在按钮里不要被文字色覆盖 */
.btn.primary .ico { filter: none; }
.btn .ico { color: inherit; }
.unit-card { cursor: pointer; transition: .16s; }
.unit-card:hover {
  border-color: #d3d9ec; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 14px 32px rgba(79,70,229,.10);
}
.unit-card .meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; }

/* 错题本分类 */
.wrong-bars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wrong-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line);
}
.wrong-pill b { font-weight: 750; font-variant-numeric: tabular-nums; }


/* ============================================================
   一屏布局：除做题页外，所有页面在视口内完整展示，不下滑
   ============================================================ */
html, body { height: 100%; }

body:not(.practice-mode) {
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
body:not(.practice-mode) .topbar {
  position: static; flex: 0 0 auto;
  padding: 10px 24px 0;
}
body:not(.practice-mode) .topbar-inner { gap: 18px; }
body:not(.practice-mode) .brand-text h1 { font-size: 22px; }
body:not(.practice-mode) .sub { font-size: 13px; }
body:not(.practice-mode) .tabs { margin-top: 10px; }
body:not(.practice-mode) .tab { padding: 12px 20px; font-size: 16px; }

body:not(.practice-mode) main {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 22px 30px 18px;
  display: flex; flex-direction: column;
  column-gap: 14px;
}
body:not(.practice-mode) main > .card { flex: 0 0 auto; }
body:not(.practice-mode) .card {
  padding: 30px 34px; margin-bottom: 22px;
}
body:not(.practice-mode) .hero { padding: 34px 36px; }
body:not(.practice-mode) .card h2 { font-size: 25px; }
body:not(.practice-mode) .card h3 { font-size: 17px; margin: 0 0 10px; }
body:not(.practice-mode) .card p { font-size: 16.5px; line-height: 1.72; }
body:not(.practice-mode) .section-title { margin: 14px 0 12px; font-size: 14.5px; }
body:not(.practice-mode) .grid { gap: 22px; }
body:not(.practice-mode) .course-card { padding: 28px 30px; }
body:not(.practice-mode) .itile { width: 58px !important; height: 58px !important; }
body:not(.practice-mode) .footer {
  display: block; flex: 0 0 auto;
  padding: 8px 24px; font-size: 11.5px;
  border-top: 1px solid var(--line); background: #fff;
}

/* 课程 / 考试：卡片网格三列 */

/* 窄屏回落：仍允许滚动，避免内容被裁切 */
@media (max-width: 900px), (max-height: 620px) {
  body:not(.practice-mode) { height: auto; overflow: auto; }
  body:not(.practice-mode) main { overflow: visible; }
  body[data-view="about"] main { grid-template-columns: 1fr; }
  body[data-view="home"] .grid.courses,
  body[data-view="courses"] .grid.courses,
  body[data-view="exams"] .grid.courses { grid-template-columns: 1fr; }
}

/* 顶栏右上角账户区 */
.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.account-area { position: relative; }
.acct-login { white-space: nowrap; }
.acct-user {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: .15s; max-width: 190px;
}
.acct-user:hover { border-color: var(--brand); background: #fbfcff; }
.acct-user .ico { color: var(--brand); }
.acct-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 5px; min-width: 158px;
}
.acct-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font: inherit; font-size: 13.5px;
  color: var(--ink-2); padding: 8px 11px; border-radius: 7px; cursor: pointer;
}
.acct-menu button:hover { background: var(--brand-soft); color: var(--brand-600); }
.acct-menu button .ico { color: var(--ink-faint); }
.acct-menu button:hover .ico { color: var(--brand); }

/* 关于我们 */
.about-hero .about-lead {
  font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); margin-top: 14px;
}
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.about-tag {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-600);
}
.about-tag b { font-weight: 500; color: var(--ink-mute); font-size: 12px; }
.about-qr img { max-width: 250px; max-height: 440px; width: auto; border-radius: 16px; border: none; cursor: zoom-in; }
.about-thanks { border-color: #e8dcc0; background: linear-gradient(180deg,#fffdf6,#fff); }
.honor-board {
  margin-top: 14px; border-radius: 14px; overflow: hidden;
  border: 1px solid #e6cf95;
  background: linear-gradient(180deg, #fffdf5 0%, #fff9e8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 3px 14px rgba(180,131,9,.10);
}
.honor-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; color: #7a4f04;
  background: linear-gradient(90deg, #fdefc4 0%, #fbe3a3 50%, #fdefc4 100%);
  border-bottom: 1px solid #e6cf95;
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
}
.honor-head .ico { color: #b8860b; }
.honor-sub {
  margin-left: auto; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #b8860b; opacity: .75;
}
.honor-list { list-style: none; margin: 0; padding: 8px 10px; }
.honor-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: 10px; position: relative;
}
.honor-item + .honor-item { border-top: 1px dashed #f0dcae; }
.honor-item.top { background: linear-gradient(90deg, #fff8e0 0%, rgba(255,255,255,0) 70%); }
.honor-item.top::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: linear-gradient(180deg, #f59e0b, #d97706);
}
.honor-rank {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: #fff; color: #b8860b; border: 1.5px solid #e6cf95;
}
.honor-item.top .honor-rank {
  background: linear-gradient(160deg, #fbbf24, #d97706); color: #fff; border-color: #d97706;
  box-shadow: 0 2px 6px rgba(217,119,6,.35);
}
.honor-cup { flex: 0 0 auto; margin-top: 1px; }
.honor-cup-empty { opacity: .4; }
.honor-body { flex: 1; min-width: 0; }
.honor-name { font-weight: 750; font-size: 15.5px; color: var(--ink); letter-spacing: .01em; }
.honor-role { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.honor-deed { font-size: 12.5px; color: #b8860b; margin-top: 3px; font-weight: 600; }
.honor-item.empty .honor-name { color: var(--ink-faint); font-weight: 600; }
.honor-item.empty .honor-role { color: var(--ink-faint); }


.thanks-box {
  margin-top: 12px; padding: 16px; border-radius: var(--radius-sm);
  border: 1px dashed var(--gold-line); background: #fffdf7; text-align: left; padding: 6px 10px;
}

/* 登录 / 注册 */
.auth-card { max-width: 460px; margin-left: auto; margin-right: auto; }
.auth-tabs {
  display: inline-flex; gap: 3px; background: #f1f3f9; padding: 3px;
  border-radius: 9px; margin-bottom: 18px;
}
.auth-tab {
  border: none; background: transparent; color: var(--ink-mute);
  font: inherit; font-size: 14px; font-weight: 550;
  padding: 7px 20px; border-radius: 7px; cursor: pointer; transition: .15s;
}
.auth-tab:hover { color: var(--ink-2); }
.auth-tab.on { background: #fff; color: var(--brand-600); font-weight: 700; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 650;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field input {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2); box-sizing: border-box;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* 面包屑 */
.crumbs {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 13px;
}
.crumb {
  border: none; background: none; color: var(--brand-600);
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; transition: .13s;
}
.crumb:hover { background: var(--brand-soft); }
.crumb-sep { color: var(--ink-faint); display: inline-flex; align-items: center; }
.crumb-cur { color: var(--ink-mute); font-weight: 650; padding: 2px 6px; }

/* 首页课程卡 */
.course-card { cursor: pointer; }
.course-card:hover .itile { transform: translateY(-1px) scale(1.05); }
.course-card.is-empty { opacity: .62; }
.course-card.is-empty:hover { opacity: .8; }
.course-card .meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; }


/* ---------------- 学习卡片 ---------------- */
.rumus {
  font-family: var(--mono); background: #f7f8fd; border-left: 3px solid var(--brand);
  padding: 10px 13px; border-radius: 0 8px 8px 0; font-size: 13.5px; margin: 10px 0;
  word-break: break-word; line-height: 1.65; color: var(--ink-2);
}
.contoh { margin: 10px 0 0; padding: 0; list-style: none; }
.contoh li {
  padding: 8px 12px; border-radius: var(--radius-xs); background: #fafbfe;
  border: 1px solid var(--line-2); margin-bottom: 6px; font-size: 14.5px;
}
.contoh li.salah { background: var(--bad-soft); border-color: var(--bad-line); }
.contoh li .zh-inline { display: block; margin-top: 2px; }

table.kosakata { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
table.kosakata th, table.kosakata td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
table.kosakata th {
  color: var(--ink-faint); font-weight: 650; font-size: 12px; letter-spacing: .02em;
}
table.kosakata tr:last-child td { border-bottom: none; }
table.kosakata td.k { font-weight: 650; color: var(--brand-600); white-space: nowrap; }

.sum-block { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 13px; }
.sum-block:first-of-type { border-top: none; padding-top: 4px; }
.sum-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }

/* ---------------- 统计 ---------------- */
.stat {
  text-align: center; padding: 16px 12px; background: #fbfcff;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.stat .n {
  font-size: 26px; font-weight: 750; line-height: 1.2; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat .l { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }

/* ---------------- 练习：一页一题 ---------------- */
body.practice-mode { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.practice-mode .topbar { position: static; flex: 0 0 auto; padding-top: 8px; }
body.practice-mode .brand .sub { display: none; }
body.practice-mode .brand h1 { font-size: 15px; }
body.practice-mode .tabs { margin-top: 6px; }
body.practice-mode .tabs button { padding: 7px 11px; font-size: 13px; }
body.practice-mode .footer { display: none; }
body.practice-mode main {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1360px;
  display: flex; flex-direction: column; padding: 16px 22px; overflow-y: auto;
}
body.practice-mode.split-mode main { overflow: hidden; }

.qsplit {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 18px;
}
.qcol { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.qcol > .card { margin-bottom: 0; flex: 1 1 auto; min-height: 0; }
.qcol-right { overflow-y: auto; overscroll-behavior: contain; }
.qcol::-webkit-scrollbar, .qbody::-webkit-scrollbar { width: 8px; }
.qcol::-webkit-scrollbar-thumb, .qbody::-webkit-scrollbar-thumb { background: #dde2ee; border-radius: 999px; }
.qcol::-webkit-scrollbar-track, .qbody::-webkit-scrollbar-track { background: transparent; }

.qbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}

.qcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.qbody > .q-head { padding: 14px 22px 0; }
.qbody > .progress { margin: 8px 22px 0; }
.qbody > .bagian-label { padding: 9px 22px 0; }
.qbody > .typebar { margin: 8px 22px 0; }
.qbody > .konteks { margin: 9px 22px 0; }
.qbody > .fig { margin: 8px 22px; }
.qbody > #answerArea { padding: 8px 22px 12px; }
.qcard > #actionsArea { flex: 0 0 auto; }
.qcard .actions { padding: 11px 22px; margin-top: 0; border-top: 1px solid var(--line-2); background: #fcfcff; }

.qmedia {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; align-items: start; padding: 10px 22px 0;
}
.qmedia.nomedia { grid-template-columns: minmax(0, 1fr); }
.qmedia-text { min-width: 0; }
.qmedia .soal { font-size: 18px; }
.qmedia .soal-zh { font-size: 13.5px; margin-top: 4px; color: var(--ink-mute); }
.qmedia-fig .fig { margin: 0; }
.qmedia-fig img { max-height: min(22vh, 165px); width: auto; max-width: 100%; border-radius: 12px; }
.qmedia-fig figcaption { font-size: 11.5px; }
.qbody > .fig img { max-height: min(22vh, 165px); width: auto; max-width: 100%; }
body.practice-mode:not(.split-mode) .fig img { max-height: min(46vh, 460px); }

.progress { height: 5px; background: #eef1f7; border-radius: 999px; overflow: hidden; margin: 10px 0 4px; }
.progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--violet) 100%);
  transition: width .3s;
}

.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q-head .bagian { font-size: 13px; color: var(--brand-600); font-weight: 700; }
.q-head .no { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bagian-label { font-size: 12.5px; color: var(--ink-mute); font-weight: 600; }

.konteks {
  background: #f7f8ff; border: 1px solid #e5e8fb; border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0; padding: 9px 13px;
}
.konteks-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 750; color: var(--brand-600);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px;
}
.konteks-id { font-size: 14.5px; color: var(--ink-2); }
.konteks-zh { font-size: 13px; color: var(--ink-mute); margin-top: 1px; }

.soal { font-size: 18px; line-height: 1.72; font-weight: 550; color: var(--ink); letter-spacing: -.008em; }
.soal .blank {
  display: inline-block; min-width: 72px; text-align: center;
  color: var(--brand-600); font-weight: 750; letter-spacing: 2px;
  border-bottom: 2px solid var(--brand); margin: 0 3px; line-height: 1.3;
}
.soal-zh { font-size: 13.5px; color: var(--ink-mute); margin-top: 4px; }

.typebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: #f7f8ff; border: 1px solid #e8ebfb; font-size: 12.5px; line-height: 1.6;
}
.typebar-ico { color: var(--brand); display: inline-flex; }
.typebar-name { font-weight: 750; color: var(--brand-600); }
.typebar-desc { color: var(--ink-soft); flex: 1 1 200px; min-width: 0; }

.buku {
  border: 1px solid var(--gold-line); background: var(--gold-soft);
  border-radius: var(--radius-sm); padding: 10px 13px; margin: 10px 0;
}
.buku-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--gold);
  letter-spacing: .01em; margin-bottom: 7px;
}
.buku-sub { font-size: 11.5px; font-weight: 700; color: var(--gold); margin: 10px 0 5px; }
.buku-kartu > b { font-size: 14px; font-weight: 700; color: var(--ink); }
.buku .rumus { background: #fffdf7; border-left-color: var(--gold); }
.buku .contoh li { background: #fffdf7; border-color: #f5e7c4; }
.buku .hint { background: #fffdf7; }
.buku .zh-tr { border-left-color: #f0dfb4; }
.buku .zh { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.passage-inline { font-size: 14px; line-height: 1.75; }
.passage-inline p { margin: 0 0 4px; }

.opsi { list-style: none; margin: 10px 0 0; padding: 0; }
.opsi li { margin-bottom: 7px; }
.opsi label {
  display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; background: #fff; transition: .13s; position: relative;
}
.opsi label:hover { border-color: #ccd3ea; background: #fbfcff; }
.opsi input { position: absolute; opacity: 0; pointer-events: none; }
.opsi .key {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #f1f3f9;
  color: var(--ink-mute); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.opsi .opt { flex: 1; font-size: 15px; color: var(--ink-2); }
.opsi li.picked label { border-color: var(--brand); background: var(--brand-soft); }
.opsi li.picked .key { background: var(--brand); color: #fff; }
.opsi li.right label { border-color: var(--ok); background: var(--ok-soft); }
.opsi li.right .key { background: var(--ok); color: #fff; }
.opsi li.wrong label { border-color: var(--bad); background: var(--bad-soft); }
.opsi li.wrong .key { background: var(--bad); color: #fff; }
.opsi li.right label::after { content: "✓"; color: var(--ok); font-weight: 800; margin-left: 4px; }
.opsi li.wrong label::after { content: "✕"; color: var(--bad); font-weight: 800; margin-left: 4px; }

.bs-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bs-row .btn { min-width: 130px; padding: 11px 20px; font-size: 15px; }
.bs-row .btn.picked { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-600); font-weight: 700; }
.bs-row .btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }

.slot {
  min-height: 56px; border: 1.5px dashed #ccd4e9; border-radius: var(--radius-sm);
  padding: 10px 12px; background: #fbfcff; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.slot .placeholder { color: var(--ink-faint); font-size: 13.5px; }
.slot .chip { background: var(--brand-soft); color: var(--brand-600); border-color: var(--brand-soft2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.chips-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 550;
  color: var(--ink-2); cursor: pointer; transition: .12s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-600); background: #fafbff; }
.chip.used { opacity: .3; }
.chip.static { cursor: default; background: #f8fafc; color: var(--ink-mute); }
.chip.static:hover { border-color: var(--line); color: var(--ink-mute); background: #f8fafc; }

.input-line { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.input-line input[type=text] {
  flex: 1 1 220px; min-width: 150px; font: inherit; font-size: 15.5px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2);
}
.input-line input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.match .col { display: flex; flex-direction: column; gap: 8px; }
.match .item {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  padding: 10px 13px; cursor: pointer; font-size: 14.5px; transition: .12s;
}
.match .item:hover { border-color: var(--brand); }
.match .item.sel { border-color: var(--brand); background: var(--brand-soft); }
.match .item.done { border-color: var(--ok-line); background: var(--ok-soft); cursor: default; }
.pairs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pairs .pair {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  background: #f8fafc; border-radius: var(--radius-xs); padding: 7px 11px;
}
.pairs .pair .arrow { color: var(--ink-faint); }
.pairs .pair button { margin-left: auto; }

textarea {
  width: 100%; min-height: 140px; font: inherit; font-size: 15px; line-height: 1.75;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; resize: vertical; color: var(--ink-2);
}
textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wc { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------------- 右栏解析 ---------------- */
.panecard { padding: 16px; }
.pane-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 750; color: var(--ink-faint);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 7px;
}
.pane-sub { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 6px; }
.pane-rule { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.pane-book[hidden] { display: none; }
.pane-book { margin-top: 10px; }
.pane-book .buku { margin: 0; }
.pane-book-sec { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2); }
.pane-tip { font-size: 12px; color: var(--ink-faint); margin-top: 10px; line-height: 1.6; }
.pane-foot { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 9px; }

.pane-verdict {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 750; padding: 9px 13px;
  border-radius: var(--radius-sm); margin-bottom: 11px;
}
.pane-verdict.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.pane-verdict.bad { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.pane-verdict.partial { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }

.why { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: #fff; }
.why.ok { background: #fbfcff; }
.why-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 750; color: var(--brand-600);
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px;
}
.why-row { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; }
.why-k { flex: 0 0 auto; width: 68px; color: var(--ink-faint); font-size: 12px; }
.why-v { flex: 1; min-width: 0; word-break: break-word; }
.why-v.bad { color: var(--bad); font-weight: 700; }
.why-v.good { color: var(--ok); font-weight: 700; }
.why-reason {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2);
  font-size: 13.5px; line-height: 1.78; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.mk { cursor: pointer; border-radius: 3px; transition: background .12s; }
.mk:hover { background: #eef2ff; }
.mk.on {
  background: linear-gradient(transparent 60%, #c7d2fe 60%);
  text-decoration: underline; text-decoration-color: var(--brand);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}

.mistake-count { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mute); }
.mistake-count.has { color: var(--bad); font-weight: 650; }

.feedback { margin-top: 14px; border-radius: var(--radius-sm); padding: 13px 15px; border: 1px solid; }
.feedback.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.feedback.bad { background: var(--bad-soft); border-color: var(--bad-line); }
.feedback.partial { background: var(--warn-soft); border-color: var(--warn-line); }
.feedback .verdict { font-weight: 750; font-size: 14.5px; margin-bottom: 6px; }
.feedback.ok .verdict { color: var(--ok); }
.feedback.bad .verdict { color: var(--bad); }
.feedback.partial .verdict { color: var(--warn); }
.feedback .expl { font-size: 14px; margin-top: 10px; background: rgba(255,255,255,.7); padding: 10px 12px; border-radius: var(--radius-xs); }
.feedback .kunci { font-size: 13.5px; margin-top: 8px; }
.feedback .kunci.model { background: rgba(255,255,255,.7); padding: 10px 12px; border-radius: var(--radius-xs); }
.kwlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.kw {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 550; padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.kw.hit { background: #fff; border-color: var(--ok-line); color: var(--ok); }
.kw.miss { background: rgba(255,255,255,.7); border-color: var(--line); color: var(--ink-faint); }

.kbd { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

/* ---------------- 听力 / 口语 ---------------- */

/* 听力模式切换 */
.mode-switch {
  display: inline-flex; gap: 3px; background: #f1f3f9;
  padding: 3px; border-radius: 9px; margin-top: 12px;
}
.mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; color: var(--ink-mute);
  font: inherit; font-size: 13px; font-weight: 550;
  padding: 6px 13px; border-radius: 7px; cursor: pointer; transition: .15s;
}
.mode-btn .ico { color: var(--ink-faint); }
.mode-btn:hover { color: var(--ink-2); }
.mode-btn.on { background: #fff; color: var(--brand-600); font-weight: 700; box-shadow: var(--shadow-sm); }
.mode-btn.on .ico { color: var(--brand); }

/* 四选一 */
.choice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.choice {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm);
  padding: 11px 14px; font: inherit; font-size: 15px; color: var(--ink-2);
  cursor: pointer; transition: .13s; width: 100%;
}
.choice:hover:not(:disabled) { border-color: var(--brand); background: #fbfcff; }
.choice:disabled { cursor: default; }
.choice-key {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #f1f3f9;
  color: var(--ink-mute); font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.choice-txt { flex: 1; min-width: 0; }
.choice.right { border-color: var(--ok); background: var(--ok-soft); }
.choice.right .choice-key { background: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .choice-key { background: var(--bad); color: #fff; }

.spk-word {
  display: inline-block; padding: 1px 4px; margin: 0 1px 2px;
  border-radius: 5px; font-weight: 600;
}
.spk-word.ok { color: var(--ok); background: var(--ok-soft); }
.spk-word.bad {
  color: var(--bad); background: var(--bad-soft);
  text-decoration: underline wavy var(--bad); text-underline-offset: 3px;
}
.btn.rec {
  background: var(--bad) !important; border-color: var(--bad) !important; color: #fff !important;
  animation: micpulse 1.1s ease-in-out infinite;
}
.btn.rec .ico { color: #fff !important; }
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,.45); }
  50%      { box-shadow: 0 0 0 9px rgba(225,29,72,0); }
}
#spLive { font-size: 15px; color: var(--brand-600); font-weight: 600; }
.lesson-no { border-radius: 14px !important; }
.lesson-num {
  font-size: 19px; font-weight: 800; color: var(--brand-600);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}


/* ---------------- 报告 ---------------- */
.ring-wrap { text-align: center; padding: 14px 0 8px; }
.ring {
  --pct: 0; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto;
  background: conic-gradient(from 180deg, var(--brand) 0%, var(--violet) calc(var(--pct) * 1%), #eef1f7 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ring::after { content: ""; position: absolute; inset: 12px; background: #fff; border-radius: 50%; }
.ring-inner { position: relative; z-index: 1; }
.ring-num { font-size: 30px; font-weight: 750; color: var(--brand-600); letter-spacing: -.03em; }
.ring-label { font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; }

.review-item {
  border: 1px solid var(--line); border-left: 3px solid var(--bad);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 13px 16px; margin-bottom: 12px; background: #fff;
}
.review-item .s { font-size: 15px; font-weight: 600; color: var(--ink); }
.review-item .a { font-size: 13.5px; color: var(--ink-mute); margin-top: 5px; }
.review-item .a.good { color: var(--ok); font-weight: 600; }
.review-item .buku { margin-top: 10px; }

/* ---------------- 图片 / 热区 ---------------- */
.fig { margin: 14px 0; text-align: center; }
.fig img {
  max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
  cursor: zoom-in; background: #fff;
}
.fig figcaption { font-size: 12.5px; color: var(--ink-faint); margin-top: 7px; }
.lightbox {
  position: fixed; inset: 0; background: rgba(15,23,42,.88); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 12px; }

.hotfig .hotwrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.hotfig .hotwrap img { display: block; }
.hotlayer { position: absolute; inset: 0; pointer-events: none; }
.hotbox {
  position: absolute; border: 2px solid var(--brand); border-radius: 10px;
  background: rgba(99,102,241,.18);
  animation: hotpulse 1s ease-in-out infinite alternate;
}
@keyframes hotpulse {
  from { box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 0 8px rgba(99,102,241,.35); }
  to   { box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 0 22px rgba(99,102,241,.6); }
}
.hotlabel {
  position: absolute; top: -12px; left: -2px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.hotchips .chip.hotable { border-color: var(--brand-soft2); color: var(--brand-600); font-weight: 650; }
.hotchips .chip.hotable:hover { background: var(--brand-soft); border-color: var(--brand); }
.hotchips .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------- 分步 / 范句重排 ---------------- */
.stepbar { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; margin-bottom: 12px; color: var(--ink); }
.step-no {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-600);
  font-size: 12.5px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center;
}
.note-card { background: var(--gold-soft); border-color: var(--gold-line); }
.note-card h3 { color: var(--gold); }

.scr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; background: #fafbfe; }
.scr-head { font-size: 13px; font-weight: 650; color: var(--ink-soft); margin-bottom: 9px; display: flex; gap: 8px; align-items: center; }
.scr-no {
  width: 20px; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--ink-mute);
}
.scr-slot { background: #fff; min-height: 50px; }
.scr .feedback { margin-top: 10px; }

/* ---------------- 阅读 ---------------- */
.passage { font-size: 16px; line-height: 2; color: var(--ink-2); }
.passage p { margin: 0 0 14px; }
.passage .zh-tr {
  display: block; font-size: 13.5px; color: var(--ink-mute);
  border-left: 2px solid var(--line); padding-left: 11px; margin-top: 5px;
}
.passage.hide-zh .zh-tr { display: none; }

/* ---------------- 其它 ---------------- */
ul.plain { margin: 8px 0; padding-left: 20px; }
ul.plain li { margin-bottom: 6px; }
.rubrik { list-style: none; padding: 0; margin: 10px 0; }
.rubrik li { margin-bottom: 7px; font-size: 14px; }
.rubrik label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rubrik input { margin-top: 5px; accent-color: var(--brand); flex: 0 0 auto; }

.hint {
  font-size: 13.5px; color: var(--ink-soft); background: #f7f8fd;
  border-radius: var(--radius-sm); padding: 11px 14px; margin-top: 12px; line-height: 1.7;
}
.hint code, .footer code, .muted code {
  background: #eef2ff; color: var(--brand-600); padding: 1px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: 12px;
}

.footer {
  text-align: center; font-size: 12.5px; color: var(--ink-faint);
  padding: 22px; border-top: 1px solid var(--line); background: #fff;
}

/* ---------------- 视口高度分档 ---------------- */
@media (max-height: 920px) {
  .buku .contoh li:nth-child(n+2) { display: none; }
  .buku .hint { display: none; }
  .why-reason { -webkit-line-clamp: 3; }
  .pane-tip { display: none; }
  .pane-book .buku { margin: 0; padding: 8px 11px; }
}
@media (max-height: 880px) {
  .qmedia-fig img { max-height: min(16vh, 116px); }
  .qmedia .soal { font-size: 16.5px; }
  .qbody > .fig img { max-height: min(16vh, 116px); }
  .qbody > .konteks { padding: 6px 11px; }
  .konteks-id { font-size: 13.5px; }
  .opsi label { padding: 8px 13px; }
  .opsi .opt { font-size: 14.5px; }
  .buku .contoh li { padding: 4px 8px; font-size: 12.5px; }
  .why-reason, .buku .zh { font-size: 12.5px; }
}
@media (max-height: 800px) {
  .buku .contoh { display: none; }
  .why-reason { -webkit-line-clamp: 3; }
}
@media (max-height: 760px) {
  .qmedia-fig img { max-height: min(12vh, 78px); }
  .qbody > .fig img { max-height: min(12vh, 78px); }
  .qmedia .soal { font-size: 15.5px; }
  .qbody > .typebar { display: none; }
  .qbody > .konteks { display: none; }
  .opsi label { padding: 6px 11px; }
  .opsi .opt { font-size: 14px; }
  .opsi li { margin-bottom: 4px; }
  .why-reason { -webkit-line-clamp: 2; }
  .why-row { font-size: 12.5px; }
  .pane-verdict { font-size: 14px; padding: 6px 10px; margin-bottom: 7px; }
  .panecard { padding: 10px 12px; }
}

@media (max-width: 940px) {
  body.practice-mode main { padding: 12px; }
  .qsplit { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 720px) {
  .topbar { padding: 12px 16px 0; }
  .brand h1 { font-size: 15px; }
  .brand .sub { font-size: 11.5px; }
  .logo-id { width: 28px; height: 28px; border-radius: 8px; }
  .lang-btn { padding: 5px 8px; font-size: 12px; }
  main { padding: 16px 14px 60px; }
  .card { padding: 16px 15px; }
  .qbody > .q-head, .qbody > .progress, .qbody > .bagian-label, .qbody > .typebar,
  .qbody > .konteks, .qbody > #answerArea { padding-left: 15px; padding-right: 15px; }
  .qbody > .typebar { margin-left: 15px; margin-right: 15px; }
  .qmedia { padding-left: 15px; padding-right: 15px; grid-template-columns: minmax(0,1fr); }
  .qcard .actions { padding: 12px 15px; }
  .match { grid-template-columns: 1fr; }
  .kbd { display: none; }
  .ring { width: 112px; height: 112px; }
  .ring-num { font-size: 25px; }
}

@media print {
  .topbar, .footer, .btn, .lang-switch { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* 兜底：内容确实放不下时改为可滚动，避免被裁切 */
body:not(.practice-mode).allow-scroll { height: auto; min-height: 100vh; overflow: auto; }
body:not(.practice-mode).allow-scroll main { overflow: visible; }
body:not(.practice-mode).allow-scroll .topbar { position: sticky; top: 0; }

/* 关于我们：最后收边，确保一屏 */
body[data-view=about] main { padding-top: 10px; padding-bottom: 8px; }
body[data-view=about] main > .card { padding: 10px 13px; }
body[data-view=about] .hero { padding: 13px 15px; }
body[data-view=about] .hero .about-lead { margin-top: 8px; font-size: 13px; line-height: 1.55; }
body[data-view=about] .unit-head { margin-bottom: 4px; }
body[data-view=about] .card p { margin: 4px 0; }
body[data-view=about] .plain { margin: 4px 0; }
body[data-view=about] .plain li { margin-bottom: 2px; }

/* 首页：快捷入口与统计之间的呼吸 */
body[data-view="home"] .home-shortcuts { margin: 4px 0 18px; }
body[data-view="home"] .grid.four { margin-bottom: 4px; }
body[data-view="home"] .grid.four .stat-card,
body[data-view="home"] .grid.four > * { min-height: 84px; }






/* 关于我们：单栏，卡片上下排列、横向铺满 */
body[data-view=about] main {
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
body[data-view=about] main > .card {
  width: 100%; margin: 0 0 22px; flex: 0 0 auto;
}
body[data-view=about] main > .card:last-child { margin-bottom: 0; }
body[data-view=about] .card { padding: 30px 34px; }
body[data-view=about] .card p { font-size: 16.5px; line-height: 1.75; margin: 10px 0; }
body[data-view=about] .card h3 { font-size: 18px; margin: 0 0 10px; }
body[data-view=about] .plain { margin: 10px 0; padding-left: 24px; }
body[data-view=about] .plain li { font-size: 16px; line-height: 1.75; margin-bottom: 7px; }
body[data-view=about] .about-lead { font-size: 17px; line-height: 1.75; margin-top: 14px; }
body[data-view=about] .about-tags { gap: 12px; margin-top: 14px; }
body[data-view=about] .about-tag { font-size: 14px; padding: 7px 16px; }
body[data-view=about] .about-qr { display: block; margin: 16px 0 0; }
body[data-view=about] .about-qr img { max-width: 240px; max-height: 340px; }
body[data-view=about] .about-qr figcaption { font-size: 14px; }
body[data-view=about] .honor-head { padding: 12px 18px; font-size: 16px; }
body[data-view=about] .honor-item { padding: 12px 14px; gap: 14px; }
body[data-view=about] .honor-rank { width: 28px; height: 28px; font-size: 14px; }
body[data-view=about] .honor-name { font-size: 17px; }
body[data-view=about] .honor-role { font-size: 14px; }
body[data-view=about] .honor-deed { font-size: 13.5px; }
body[data-view=about] .thanks-box { margin-top: 14px; }
body[data-view=about] .card p.muted.small { font-size: 14px; }


/* ============ 通用：课程/评估/技能卡一律三列横排 ============ */
body:not(.practice-mode) .grid.courses {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
body:not(.practice-mode) .grid.courses > * { height: 100%; }
body:not(.practice-mode) .course-card .unit-head { align-items: center; }

/* 内容不多时垂直居中（safe：溢出时自动回退到顶部，不裁切） */
body:not(.practice-mode) main { justify-content: safe center; }
body[data-view="home"] main { justify-content: flex-start; }
/* 只有首页的统计行撑满剩余高度 */
body[data-view="home"] .grid.four { flex: 1 1 auto; min-height: 0; align-content: stretch; }
body[data-view=home] .grid.four > * {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
body[data-view=home] .grid.four .stat-num,
body[data-view=home] .grid.four b { font-size: 40px; line-height: 1.15; }
body[data-view=home] .grid.four .muted { font-size: 15px; margin-top: 6px; }

@media (max-width: 1100px) {
  body:not(.practice-mode) .grid.courses { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body:not(.practice-mode) .grid.courses { grid-template-columns: 1fr; }
}


/* ============================================================
   视觉特效：彩色渐变文字 + 卡片悬停
   ============================================================ */

/* 站点标题：彩色渐变 + 缓慢流动 */
.brand-text h1 {
  background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 30%, #db2777 55%, #f59e0b 78%, #4f46e5 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brandFlow 14s linear infinite;
}
@keyframes brandFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 260% 50%; }
}

/* 小节标题：彩色渐变 */
.section-title, .card.hero h2 {
  background: linear-gradient(95deg, #4338ca 0%, #7c3aed 55%, #db2777 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 卡片标题：带色但保持可读 */
.card > h3 { color: #4338ca; }
body[data-view="about"] .card > h3 { color: #4338ca; }

/* 导航：字号更大 + 悬停渐变下划线 */
.tabs { gap: 6px; }
.tabs button {
  position: relative; font-weight: 650; letter-spacing: .01em;
  transition: color .2s, background .2s, transform .2s;
}
.tabs button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2.5px;
  border-radius: 2px; transform: scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.tabs button:hover { color: #4338ca; transform: translateY(-1px); }
.tabs button:hover::after { transform: scaleX(1); }
.tabs button.active::after { transform: scaleX(1); }
.tabs button.active { color: #4338ca; }
.tabs-gap { flex: 1 1 auto; }

/* 卡片：悬停浮起 + 渐变描边发光 */
.card {
  position: relative;
  transition: transform .3s cubic-bezier(.2,.7,.3,1),
              box-shadow .3s cubic-bezier(.2,.7,.3,1),
              border-color .3s;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1.6px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(168,85,247,.7), rgba(236,72,153,.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* 悬停只对可点击卡片生效；内容卡片保持静止 */
.course-card:hover, .unit-card:hover {
  box-shadow: 0 22px 46px -22px rgba(79,70,229,.5);
}
.course-card:hover::before, .unit-card:hover::before { opacity: 1; }

/* 可点卡片：更明显的反馈 */
.course-card { cursor: pointer; }
.course-card:hover { transform: translateY(-5px); }
.course-card:hover .itile { transform: rotate(-3deg); }
.course-card .itile { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.course-card.is-empty { cursor: default; }
.course-card.is-empty:hover { transform: none; box-shadow: var(--shadow-sm); }
.course-card.is-empty:hover::before { opacity: 0; }

/* 首页 hero：柔和彩色光晕 */
body[data-view="home"] .card.hero,
.card.hero {
  background:
    radial-gradient(760px 220px at 8% -30%, rgba(99,102,241,.16) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(680px 200px at 96% -40%, rgba(236,72,153,.14) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(520px 190px at 50% 130%, rgba(245,158,11,.10) 0%, rgba(255,255,255,0) 65%),
    #fff;
}

/* 统计数字：彩色渐变 */
body[data-view="home"] .grid.four b,
body[data-view="home"] .grid.four .stat-num {
  background: linear-gradient(135deg, #4f46e5, #a855f7 55%, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* 语言切换按钮：悬停渐变 */
.lang-btn { transition: color .2s, background .2s, box-shadow .2s; }
.lang-btn:hover { color: #4338ca; }
.lang-btn.active {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff; box-shadow: 0 4px 14px -6px rgba(99,102,241,.7);
}

/* 主按钮：渐变 + 悬停发光 */
.btn.primary {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #a21caf 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px -8px rgba(99,102,241,.75);
  transition: transform .22s, box-shadow .22s;
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(124,58,237,.85);
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .brand-text h1 { animation: none; }
  .card, .card::before, .tabs button, .tabs button::after, .course-card .itile { transition: none; }
  .card:hover, .course-card:hover { transform: none; }
}


/* ============ 首页快捷入口：两栏铺满 + 卡片等高对齐 ============ */
body[data-view="home"] .home-shortcuts {
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 auto; margin: 4px 0 20px;
}
body[data-view="home"] .home-shortcuts > .course-card {
  display: flex; align-items: center;
  min-height: 108px; padding: 22px 26px;
}
body[data-view="home"] .home-shortcuts .unit-head {
  align-items: center; margin: 0; width: 100%;
}
body[data-view="home"] .home-shortcuts .course-card h3 { font-size: 19px; margin: 0 0 3px; }
body[data-view="home"] .home-shortcuts .course-card .muted {
  font-size: 14px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-view="home"] .home-shortcuts .itile {
  width: 52px !important; height: 52px !important; flex: 0 0 auto;
}
/* 首页统计行仍然撑满剩余高度 */
body[data-view="home"] main { justify-content: flex-start; }
body[data-view="home"] .card.hero { margin-bottom: 20px; }


/* ===== 首页布局收尾（高优先级，覆盖通用三栏规则） ===== */
body[data-view="home"] main > .grid.courses.home-shortcuts {
  grid-template-columns: repeat(2, 1fr) !important;
  flex: 0 0 auto !important; min-height: 0 !important;
  margin: 0 0 22px;
}
body[data-view="home"] main > .grid.courses.home-shortcuts > .course-card {
  display: flex; align-items: center;
  height: auto !important; min-height: 108px; padding: 22px 26px;
}
body[data-view="home"] main > .grid.courses.home-shortcuts .muted {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 统计行：不再拉伸，固定舒适高度 */
body[data-view="home"] main > .grid.four {
  flex: 0 0 auto !important; min-height: 0 !important;
}
body[data-view="home"] main > .grid.four > * {
  height: auto !important; min-height: 168px;
}
/* 整页内容居中，不留大片空白 */
body[data-view="home"] main { justify-content: safe center; }


/* ===== 统一容器宽度：flex 里 margin:auto 会阻止拉伸，必须显式 width:100% ===== */
body:not(.practice-mode) main { width: 100%; }

/* 面包屑：字号加大 */
.crumb { font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.crumb a, .crumb span { font-size: 15.5px; }
.crumb .ico { vertical-align: -.18em; }

/* 卡片宽度统一：所有页面的主卡都铺满容器 */
body:not(.practice-mode) main > .card { width: 100%; }


/* ===== 文字清晰度：变换时别让浏览器重采样文字 ===== */
.card, .course-card, .btn, .tabs button, .lang-btn {
  will-change: auto !important;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/* 位移一律整数像素，避免亚像素模糊 */
/* 内容卡片不做位移（避免被 overflow 裁掉） */
body:not(.practice-mode) .course-card:hover { transform: translateY(-5px); }
.btn.primary:hover { filter: none; }
/* 不用 translateZ(0)：强制分层反而可能让文字被缓存后重采样 */
.unit-card:hover .itile { transform: scale(1.04); }
/* 图标是矢量，缩放不糊；但用整数倍避免半像素 */
.itile svg, .itile .ico { shape-rendering: geometricPrecision; }


/* ============================================================
   自适应：纵向尺寸跟随视口高度（vh / clamp），任何屏幕都一屏放下
   ============================================================ */
body:not(.practice-mode) main {
  padding: clamp(10px, 2.2vh, 22px) 30px clamp(8px, 1.7vh, 18px);
}
body:not(.practice-mode) .card {
  padding: clamp(14px, 2.5vh, 30px) clamp(20px, 2.2vw, 34px);
  margin-bottom: clamp(10px, 1.8vh, 22px);
}
body:not(.practice-mode) .card.hero { padding: clamp(16px, 2.9vh, 34px) clamp(20px, 2.2vw, 36px); }
body:not(.practice-mode) .card h2 { font-size: clamp(19px, 1.9vh, 25px); }
body:not(.practice-mode) .card p  { font-size: clamp(14px, 1.35vh, 16.5px); }
body:not(.practice-mode) .card h3 { font-size: clamp(15px, 1.45vh, 17px); }
body:not(.practice-mode) .grid { gap: clamp(12px, 1.6vh, 22px); }

/* 首页：区块高度也跟着伸缩 */
body[data-view="home"] .card.hero { margin-bottom: clamp(10px, 1.9vh, 20px); }
body[data-view="home"] main > .grid.courses.home-shortcuts { margin-bottom: clamp(10px, 1.9vh, 22px); }
body[data-view="home"] main > .grid.courses.home-shortcuts > .course-card {
  min-height: clamp(78px, 11vh, 112px);
  padding: clamp(12px, 1.9vh, 22px) clamp(16px, 1.7vw, 26px);
}
body[data-view="home"] main > .grid.courses.home-shortcuts .itile {
  width: clamp(40px, 5.4vh, 54px) !important;
  height: clamp(40px, 5.4vh, 54px) !important;
}
body[data-view="home"] main > .grid.courses.home-shortcuts .course-card h3 { font-size: clamp(16px, 1.7vh, 19px); }
body[data-view="home"] main > .grid.courses.home-shortcuts .muted { font-size: clamp(12.5px, 1.25vh, 14px); }

/* 统计卡：高度随屏幕伸缩，数字同步缩放 */
body[data-view="home"] main > .grid.four > * {
  height: auto !important;
  min-height: clamp(88px, 13.5vh, 168px);
}
body[data-view="home"] .grid.four .stat-num,
body[data-view="home"] .grid.four b { font-size: clamp(26px, 3.4vh, 40px); }
body[data-view="home"] .grid.four .muted { font-size: clamp(12px, 1.25vh, 15px); }

/* 次级页面：卡片与图标同样伸缩 */
body:not(.practice-mode) .course-card {
  padding: clamp(13px, 2vh, 28px) clamp(16px, 1.8vw, 30px);
}
body:not(.practice-mode) .itile {
  width: clamp(40px, 5.2vh, 58px) !important;
  height: clamp(40px, 5.2vh, 58px) !important;
}
body:not(.practice-mode) .section-title { font-size: clamp(13px, 1.35vh, 14.5px); margin: clamp(8px, 1.4vh, 14px) 0 clamp(7px, 1.2vh, 12px); }

/* 顶栏也随高度收一点 */
body:not(.practice-mode) .topbar { padding: clamp(6px, 1.2vh, 10px) 24px 0; }
body:not(.practice-mode) .tabs button { padding: clamp(7px, 1.2vh, 12px) clamp(12px, 1.3vw, 20px); font-size: clamp(14px, 1.5vh, 16px); }
body:not(.practice-mode) .brand-text h1 { font-size: clamp(17px, 2.05vh, 22px); }
body:not(.practice-mode) .sub { font-size: clamp(11px, 1.2vh, 13px); }

/* 极矮屏幕：进一步收紧 */
@media (max-height: 700px) {
  body:not(.practice-mode) .card h2 { font-size: clamp(17px, 1.7vh, 20px); }
  body[data-view="home"] main > .grid.four > * { min-height: clamp(74px, 11vh, 120px); }
  body[data-view="home"] main > .grid.courses.home-shortcuts > .course-card { min-height: clamp(66px, 9vh, 92px); }
}


/* ============ 统计卡：彩色数字 + 等宽彩色横线 ============ */
.grid.four .stat {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  --c1: #6366f1; --c2: #a855f7;
}
.grid.four .stat .n {
  position: relative; display: inline-block;
  padding-bottom: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--c1), var(--c2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 横线宽度 = 数字文本宽度（.n 是 inline-block，随内容收缩） */
.grid.four .stat .n::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  opacity: .9;
}
.grid.four .stat .sfx { font-size: .62em; margin-left: 1px; }
.grid.four .stat .l { color: var(--ink-mute); }

/* 色调 */
.grid.four .stat.t-indigo { --c1: #4f46e5; --c2: #8b5cf6; }
.grid.four .stat.t-green  { --c1: #059669; --c2: #34d399; }
.grid.four .stat.t-amber  { --c1: #d97706; --c2: #fbbf24; }
.grid.four .stat.t-rose   { --c1: #e11d48; --c2: #fb7185; }
.grid.four .stat.t-slate  { --c1: #64748b; --c2: #94a3b8; }

/* 悬停时横线延展一点，给点反馈 */
.grid.four .stat { transition: background .25s, border-color .25s; }
.grid.four .stat:hover { background: #fff; border-color: #dfe3f5; }
.grid.four .stat:hover .n::after { opacity: 1; height: 4px; }
.grid.four .stat .n::after { transition: height .2s, opacity .2s; }


/* ============ 做题页里的听力音频条 ============ */
.qaudio {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 4px; padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(120deg, #eef2ff 0%, #f5f3ff 55%, #fdf2f8 100%);
  border: 1px solid #dfe3f5;
}
.qaudio-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; box-shadow: 0 4px 12px -6px rgba(99,102,241,.85);
}
.qaudio .btn { padding: 8px 16px; font-size: 14px; }
.qaudio .btn.playing {
  background: linear-gradient(135deg, #059669, #34d399);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px -8px rgba(5,150,105,.9);
}
.qaudio-state { font-size: 13px; color: var(--ink-mute); margin-left: 2px; }
@keyframes qaudioPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.qaudio-ico { animation: qaudioPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .qaudio-ico { animation: none; } }


/* ============================================================
   做题页：所有卡片静止，避免上浮被容器裁切
   ============================================================ */
body.practice-mode .card,
body.practice-mode .card:hover,
body.practice-mode .panecard,
body.practice-mode .panecard:hover {
  transform: none !important;
  transition: none !important;
  box-shadow: var(--shadow-sm) !important;
}
body.practice-mode .card::before,
body.practice-mode .panecard::before { display: none !important; }

/* 非做题页也只让可点卡片有描边反馈 */
body:not(.practice-mode) .card:not(.course-card):not(.unit-card):hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
body:not(.practice-mode) .card:not(.course-card):not(.unit-card):hover::before { opacity: 0; }

/* ============================================================
   做题页：文字排版收紧，题目与选项更清晰
   ============================================================ */
body.practice-mode .panecard { padding: 20px 24px; }
body.practice-mode .qbody { padding-bottom: 8px; }
body.practice-mode .bagian-label {
  font-size: 13.5px; font-weight: 650; color: var(--ink-mute);
  letter-spacing: .01em; margin-bottom: 8px;
}
body.practice-mode .soal { font-size: 20px; line-height: 1.55; font-weight: 650; letter-spacing: -.01em; }
body.practice-mode .soal-zh { font-size: 14px; color: var(--ink-mute); margin-top: 6px; line-height: 1.6; }
body.practice-mode .konteks { margin: 12px 0; }
body.practice-mode .konteks-id { font-size: 15px; line-height: 1.7; }
body.practice-mode .konteks-zh { font-size: 13.5px; line-height: 1.65; }
body.practice-mode #opsiList { margin-top: 14px; }
body.practice-mode #opsiList .opt,
body.practice-mode #opsiList > * { margin-bottom: 10px; }


/* ============ 做题页：左栏加宽，尽量一屏放下 ============ */
body.practice-mode .qsplit {
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 18px;
}
/* 左栏内部再省一点竖向空间 */
body.practice-mode .qbody > .q-head { padding: 12px 24px 0; }
body.practice-mode .qbody > .bagian-label { padding: 6px 24px 0; }
body.practice-mode .qbody > .typebar { margin: 6px 24px 0; padding: 8px 14px; }
body.practice-mode .qbody > .konteks { margin: 8px 24px 0; padding: 10px 14px; }
body.practice-mode .qbody > .qmedia { margin: 6px 24px 0; }
body.practice-mode .qbody > #answerArea { padding: 0 24px; }
body.practice-mode .qmedia-text .soal { font-size: 19px; line-height: 1.5; }
/* 选项：更紧凑但不挤 */
body.practice-mode .opt, body.practice-mode .opt-row { padding: 12px 16px; }
body.practice-mode #opsiList { margin-top: 10px; }
body.practice-mode #opsiList > * { margin-bottom: 8px; }

/* 宽屏时右栏再窄一些，把空间全部让给题目 */
@media (min-width: 1500px) {
  body.practice-mode .qsplit { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  body.practice-mode .qsplit { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}



/* ============ 做题页：左栏纵向紧凑（保守值，避免越改越高） ============ */
body.practice-mode .qbody > .q-head { padding: 10px 24px 0; }
body.practice-mode .qbody > .progress { margin: 6px 24px 0; }
body.practice-mode .qbody > .bagian-label { padding: 5px 24px 0; }
body.practice-mode .qbody > .typebar { margin: 5px 24px 0; padding: 7px 14px; }
body.practice-mode .qbody > .konteks { margin: 7px 24px 0; padding: 9px 14px; }
body.practice-mode .qbody > .qmedia { margin: 5px 24px 0; }
body.practice-mode .qmedia-text .soal { font-size: 18px; line-height: 1.45; }
body.practice-mode #answerArea { padding: 0 24px; }
body.practice-mode .opt, body.practice-mode .opt-row,
body.practice-mode #opsiList > * {
  padding: 10px 16px; margin-bottom: 7px;
}
body.practice-mode #actionsArea { padding: 8px 24px; }


/* ============ 做题页：选项与说明条进一步收紧 ============ */
body.practice-mode .opsi label { padding: 9px 14px; gap: 11px; }
body.practice-mode .opsi li { margin-bottom: 6px; }
body.practice-mode .opsi .key { width: 22px; height: 22px; }
/* 题型说明条在非「练习」视图里重复度低，这里压扁 */
body.practice-mode .typebar { padding: 6px 13px; font-size: 12.5px; line-height: 1.45; }
body.practice-mode .typebar-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.practice-mode .konteks-id { font-size: 14px; line-height: 1.6; }


/* ============ 选项高度：去掉 .opt 的重复内边距 ============ */
/* label 已经提供了内边距，.opt 再padding就变成双份，每个选项虚高 ~20px */
body.practice-mode .opt,
.opsi .opt {
  padding: 0 !important;
  line-height: 1.5;
}
body.practice-mode .opsi label { padding: 12px 15px; }
body.practice-mode .opsi li { margin-bottom: 8px; }
body.practice-mode .opsi .key { width: 24px; height: 24px; }


/* ============ EVALUASI 英雄卡右侧：混合练习 ============ */
.ev-mix {
  flex: 0 0 auto; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.ev-mix .btn { display: inline-flex; align-items: center; gap: 8px; }
.ev-mix-note { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; max-width: 300px; }
@media (max-width: 900px) {
  .ev-mix { align-items: flex-start; text-align: left; margin-top: 12px; }
}


/* ============ 做题页：题目内容整体右移，视觉更舒服 ============ */
body.practice-mode .qbody > .bagian-label { padding-left: 34px !important; }
body.practice-mode .qbody > .qmedia { margin-left: 34px !important; }
body.practice-mode .qbody > .konteks { margin-left: 34px !important; }
body.practice-mode .qbody > .typebar { margin-left: 34px !important; }
body.practice-mode .qbody > #answerArea { padding-left: 34px !important; padding-right: 30px !important; }
body.practice-mode .qbody > .fig { margin-left: 34px !important; }
body.practice-mode .qbody > .q-head { padding-left: 34px !important; }
body.practice-mode .qbody > .progress { margin-left: 34px !important; margin-right: 30px !important; }
body.practice-mode #actionsArea { padding-left: 34px !important; }


/* ============ 做题页：题干居中 ============ */
body.practice-mode .qmedia-text { text-align: center; }
body.practice-mode .qmedia-text .soal,
body.practice-mode .qmedia-text .soal-zh { text-align: center; }
/* 有插图时题干回到左对齐，避免和图片打架 */
body.practice-mode .qmedia:not(.nomedia) .qmedia-text { text-align: left; }
body.practice-mode .qmedia:not(.nomedia) .qmedia-text .soal,
body.practice-mode .qmedia:not(.nomedia) .qmedia-text .soal-zh { text-align: left; }
/* 填空类题干保持居中后仍要能看清下划线 */
body.practice-mode .soal .blank,
body.practice-mode .soal u { text-underline-offset: 3px; }


/* ============ 选项：去掉 li 的重复内边距 + 放大字体 ============ */
body.practice-mode .opsi li,
.opsi li { padding: 0 !important; margin-bottom: 10px !important; }
body.practice-mode .opsi label,
.opsi label { padding: 14px 18px; gap: 14px; }
body.practice-mode .opsi .opt,
.opsi .opt { font-size: 17px !important; line-height: 1.5; }
body.practice-mode .opsi .key,
.opsi .key { width: 26px !important; height: 26px !important; font-size: 13.5px !important; border-radius: 8px; }
body.practice-mode #opsiList { margin-top: 12px; }


/* ============================================================
   学习论坛
   ============================================================ */
.fhero .btn { flex: 0 0 auto; }
.ftoolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 4px 0 14px;
}
.fcats { display: flex; gap: 8px; flex-wrap: wrap; }
.fcat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background .18s, color .18s, border-color .18s;
}
.fcat .ico { color: var(--ink-faint); }
.fcat:hover { border-color: #c7d2fe; color: #4338ca; }
.fcat.active {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border-color: transparent; color: #fff;
}
.fcat.active .ico { color: #fff; }
.fcat b {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-600);
}
.fcat.active b { background: rgba(255,255,255,.25); color: #fff; }
.fsort { display: flex; gap: 4px; background: #f3f5fb; border-radius: 10px; padding: 3px; }
.fsortbtn {
  border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-mute); padding: 7px 15px; border-radius: 8px; cursor: pointer;
}
.fsortbtn.active { background: #fff; color: var(--brand-600); box-shadow: var(--shadow-sm); }

.flist { display: grid; gap: 14px; }
.fpost {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.fpost:hover { border-color: #c7d2fe; box-shadow: 0 12px 28px -18px rgba(79,70,229,.5); }
.fpost-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.fpost-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 200px; }
.fpost-head h2 { margin: 0; font-size: 22px; font-weight: 750; flex: 1; min-width: 200px; }
.fcat-tag {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-600);
}
.fcat-tag.t-tanya { background: #fff7ed; color: #c2410c; }
.fcat-tag.t-bug   { background: #fef2f2; color: #b91c1c; }
.fcat-tag.t-belajar { background: #ecfdf5; color: #047857; }
.fmeta { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 8px; }
.fpost-body { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.fthumb { margin-top: 10px; }
.fthumb img { max-height: 190px; border-radius: 10px; border: 1px solid var(--line); }
.fpost-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.fstat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-mute);
}
.fstat .ico { color: var(--ink-faint); }
.fstat.on { color: #e11d48; }
.fstat.on .ico { color: #e11d48; }
.fbtn {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font: inherit;
  transition: background .18s, border-color .18s, color .18s;
}
.fbtn:hover { border-color: #fecdd3; color: #e11d48; background: #fff5f7; }
.fbtn.on { background: #fff1f4; border-color: #fecdd3; color: #e11d48; }
.fbtn.danger:hover { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }

.flabel { display: block; font-size: 13px; font-weight: 650; color: var(--ink-mute); margin: 14px 0 6px; }
.finput {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink-2); outline: none; transition: border-color .18s;
}
.finput:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.ftextarea { resize: vertical; line-height: 1.7; font-family: inherit; }
.fpic { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fprev { display: flex; align-items: center; gap: 10px; }
.fprev img { max-height: 110px; border-radius: 8px; border: 1px solid var(--line); }
.fcrumb { margin-bottom: 12px; }

.fdetail-img img { max-height: 420px; border-radius: 12px; }
.fdetail-body { font-size: 16px; line-height: 1.8; color: var(--ink-2); margin: 4px 0 12px; }
.fcomments { display: grid; gap: 12px; margin-top: 6px; }
.fcomment { border-left: 3px solid #e0e7ff; padding: 2px 0 2px 14px; }
.fc-head { display: flex; align-items: baseline; gap: 10px; }
.fc-head b { font-size: 14.5px; color: var(--ink); }
.fc-head .muted { font-size: 12px; }
.fc-body { font-size: 15px; line-height: 1.7; margin-top: 3px; }
.fc-img { max-height: 220px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--line); }
.fc-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }


/* ============================================================
   背记单词
   ============================================================ */
.vhero .itile { flex: 0 0 auto; }
.vgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vcell {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer; font: inherit; box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s;
}
.vcell:hover { border-color: #c7d2fe; box-shadow: 0 12px 28px -18px rgba(79,70,229,.5); }
.vcell.soon { opacity: .55; cursor: default; }
.vcell.soon:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.vcell-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #eef2ff, #fff);
  box-shadow: inset 0 0 0 1px #c7d2fe;
}
.vcell h3 { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; }
.vcell .muted { font-size: 12.5px; }
.vcell-go { margin-left: auto; color: var(--ink-faint); flex: 0 0 auto; }

.vhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.vhead h2 { margin: 0 0 2px; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.vmode { display: flex; gap: 4px; background: #f3f5fb; border-radius: 10px; padding: 3px; }

.vcard { padding: 26px 30px 22px; }
.vcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vchip {
  font-size: 12px; font-weight: 650; color: var(--brand-600);
  background: var(--brand-soft); padding: 4px 11px; border-radius: 999px;
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vchip.muted { background: #f3f5fb; color: var(--ink-mute); }
.vword {
  font-size: clamp(30px, 5.2vh, 52px); font-weight: 800; letter-spacing: -.02em;
  text-align: center; margin: 18px 0 10px; color: var(--ink);
  background: linear-gradient(120deg, #4f46e5, #7c3aed 55%, #db2777);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vletters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.vletter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 40px; padding: 0 6px;
  font-size: 19px; font-weight: 700; color: var(--ink-2);
  background: #f6f7fb; border-radius: 9px; border: 1px solid var(--line);
  transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.vletter.sp { color: var(--ink-faint); }
.vletter.on {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border-color: transparent; color: #fff; transform: translateY(-3px);
}
.vacts { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.vhid { text-align: center; padding: 10px 0 4px; }
.vhid .btn { margin-bottom: 8px; }
.vmean { text-align: center; padding: 6px 0 4px; animation: vfade .22s ease; }
@keyframes vfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vkelas {
  display: inline-block; font-size: 12px; font-style: italic; font-weight: 600;
  color: var(--ink-mute); background: #f3f5fb; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.varti { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.vcontoh { font-size: 15px; color: var(--ink-mute); font-style: italic; }
.vnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.vlist { display: grid; gap: 8px; }
.vrow {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; transition: border-color .18s, background .18s;
}
.vrow:hover { border-color: #c7d2fe; background: #fafbff; }
.vrow-l { flex: 1; min-width: 0; }
.vrow-w { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.vrow-s { display: block; font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); text-transform: uppercase; margin-top: 2px; }
.vrow-r { flex: 1; text-align: right; font-size: 14.5px; color: var(--ink-2); }
.vrow-r i { display: block; font-size: 11.5px; color: var(--ink-faint); font-style: italic; }
.crumb-sep { color: var(--ink-faint); margin: 0 8px; }
.crumb.now { color: var(--ink-2); font-weight: 650; }


/* 核心 / 拓展 区分 */
.vchip.core { background: #eef2ff; color: #4338ca; display: inline-flex; align-items: center; gap: 4px; }
.vchip.ext  { background: #f5f3ff; color: #7c3aed; display: inline-flex; align-items: center; gap: 4px; }
.vmeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.vsep { width: 1px; background: var(--line); margin: 0 5px; }
.vdot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.vdot.core { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.vdot.ext  { background: #ddd6fe; }
.vrow { padding-left: 14px; }


/* ============ 背记单词 v2：语音条 / 拼写练习 ============ */
.vvoice {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 11px; margin: 0 0 14px;
  font-size: 13.5px; font-weight: 600;
}
.vvoice.ok   { background: #f0fdf4; color: #047857; }
.vvoice.warn { background: #fffbeb; color: #b45309; }
.vvoice.bad  { background: #fef2f2; color: #b91c1c; }
.vvoice .ico { flex: 0 0 auto; }
.vlink {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.vpanel .vplist { display: grid; gap: 8px; margin: 12px 0; }
.vpitem {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 11px 15px; cursor: pointer; font: inherit; font-size: 14.5px;
  transition: border-color .18s, background .18s;
}
.vpitem:hover { border-color: #c7d2fe; }
.vpitem.active { border-color: #a5b4fc; background: #f5f7ff; }
.vpitem span { flex: 1; font-weight: 650; }
.vpitem i { font-style: normal; font-size: 12px; color: var(--ink-faint); }

.vholder { display: flex; flex-direction: column; gap: 8px; }
.vholder .vcell { width: 100%; }
.vqbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed #c7d2fe; background: #f8f9ff; color: var(--brand-600);
  border-radius: var(--radius); padding: 11px 18px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650;
  transition: background .18s, border-color .18s;
}
.vqbtn:hover { background: #eef2ff; border-color: #a5b4fc; }
.vqtop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.vqtop .btn { flex: 0 0 auto; }

.qbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vchip.ok  { background: #ecfdf5; color: #047857; }
.vchip.bad { background: #fef2f2; color: #b91c1c; }
.vqcard { padding: 26px 30px 22px; text-align: center; }
.vqask { font-size: 13.5px; font-weight: 650; color: var(--ink-mute); margin-bottom: 12px; }
.vqprompt {
  font-size: clamp(20px, 3.4vh, 30px); font-weight: 750; color: var(--ink);
  margin-bottom: 10px; line-height: 1.4;
}
.vqprompt.word {
  font-size: clamp(28px, 5vh, 46px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, #4f46e5, #7c3aed 55%, #db2777);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vletters.small { margin-bottom: 14px; }
.vletters.small .vletter { min-width: 26px; height: 30px; font-size: 14px; }
.vqhint {
  font-size: 20px; font-weight: 700; letter-spacing: .16em; color: var(--brand-600);
  margin: 4px 0 14px;
}
.vqhint i { font-style: normal; font-size: 12px; letter-spacing: 0; color: var(--ink-faint); }
.vqinput {
  display: block; width: min(460px, 100%); margin: 0 auto 16px; box-sizing: border-box;
  font: inherit; font-size: 19px; font-weight: 650; text-align: center;
  padding: 13px 18px; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); outline: none; letter-spacing: .02em;
  transition: border-color .18s, box-shadow .18s;
}
.vqinput:focus { border-color: #a5b4fc; box-shadow: 0 0 0 4px rgba(99,102,241,.13); }
.vqinput:disabled { background: #f8fafc; color: var(--ink-mute); }
.vqacts { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.vqans { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
.vqres h2 { margin: 0 0 6px; }
.vqscore {
  display: flex; align-items: baseline; gap: 10px; margin: 6px 0 18px;
}
.vqscore b { font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.vqscore span { font-size: 19px; color: var(--ink-faint); font-weight: 650; }
.vqscore em { font-style: normal; font-size: 17px; font-weight: 750; margin-left: auto; }
.vqscore.t-green b, .vqscore.t-green em { color: #059669; }
.vqscore.t-amber b, .vqscore.t-amber em { color: #d97706; }
.vqscore.t-rose  b, .vqscore.t-rose  em { color: #e11d48; }
.vqres h3 { margin: 16px 0 8px; font-size: 15px; }


/* ============ 管理后台 ============ */
.admintabs { margin-bottom: 14px; flex-wrap: wrap; }
.adminstats {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 14px 0 4px;
}
.adminstats .stat { background: #f8f9ff; border-radius: 12px; padding: 14px 16px; }
.adminstats .stat .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.adminstats .stat .l { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.admintable { overflow-x: auto; }
.admintable table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admintable th {
  text-align: left; font-weight: 650; color: var(--ink-mute);
  border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap;
}
.admintable td { padding: 8px 10px; border-bottom: 1px solid #f1f3f9; vertical-align: top; }
.admintable tr:hover td { background: #fafbff; }
.admintable .nowrap { white-space: nowrap; }
.admintable .pathcell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagadm {
  font-size: 11px; background: #eef2ff; color: #4338ca; padding: 1px 7px;
  border-radius: 999px; font-weight: 700;
}
.vlink.danger { color: #b91c1c; }
.barchart { display: grid; gap: 8px; margin-top: 10px; }
.barrow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.barlabel { color: var(--ink-mute); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { background: #eef1f7; border-radius: 999px; height: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.barval { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }


/* 背记单词：地址错误提示 */
.vpath {
  background: #f6f7fb; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
  overflow-x: auto; margin: 10px 0;
}

/* ==== 平板 / 触屏适配 ==== */
/* ============================================================
   平板 / 触屏适配
   ------------------------------------------------------------
   修复一个历史 bug：
     @media (max-width: 940px) 设了 grid-template-rows（两行）
     @media (max-width: 1100px) 设了 grid-template-columns（两列）
     后者特异性更高（body.practice-mode .qsplit），在 768–940px 下
     列被改成 2 列、行却还是 2 行 → 2×2 网格
     → 题目卡只占左上角一格（约一半高度），下面全空
     → iPad 竖屏 1024px 高，一个选项都看不全

   修法：在文件末尾用同等特异性重设，列和行一起明确指定。
   ============================================================ */

/* ---- 做题页：平板宽度（700–1100px）保持双栏，但强制单行撑满 ---- */
@media (max-width: 1100px) {
  body.practice-mode .qsplit {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);   /* ← 关键：只有一行，卡片撑满 */
    gap: 16px;
  }
}

/* ---- 做题页：手机宽度（< 700px）改单栏，上下两块 ---- */
@media (max-width: 700px) {
  /* 手机上让题目卡撑满可视区，解释区跟在下面（整页滚动查看）*/
  body.practice-mode .qsplit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.practice-mode main { overflow-y: auto; padding: 10px; }
  body.practice-mode .qcard { min-height: 0; }
  body.practice-mode .qbody { overflow-y: auto; }
}

/* ---- 触屏设备：去掉 hover 依赖，加大点按反馈 ---- */
@media (hover: none), (pointer: coarse) {
  /* 触屏没有 hover，禁止那些只在悬停时才该出现的位移/阴影，
     否则点一下会「粘住」在悬停态 */
  body:not(.practice-mode) .course-card:hover,
  body:not(.practice-mode) .card:hover,
  .panecard:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* 点按即时反馈（替代 hover） */
  .btn:active, .tab:active, .course-card:active, .unit-card:active,
  .opt:active, .opsi label:active, .tabs button:active, .fsortbtn:active {
    transform: scale(.985);
    transition: transform .06s ease;
  }

  /* 去掉 iOS 点击时那块灰色高亮 */
  * { -webkit-tap-highlight-color: transparent; }

  /* 消除 300ms 点击延迟与双击缩放 */
  button, a, label, .opt, .course-card, .unit-card, input, select {
    touch-action: manipulation;
  }

  /* 触屏上最小点按尺寸 44×44（Apple HIG / Material 都建议这个数） */
  .tabs button, .btn, .fsortbtn { min-height: 40px; }
  .opt, .opsi label { min-height: 48px; }
}

/* ---- iOS：输入框字号 < 16px 会触发自动放大，禁止 ---- */
@media (max-width: 1100px) {
  input, select, textarea { font-size: 16px; }
}

/* ---- 移动端浏览器地址栏：100vh 会把内容顶出可视区，用 dvh 修正 ---- */
@supports (height: 100dvh) {
  body:not(.practice-mode),
  body.practice-mode { height: 100dvh; }
}

/* ---- 平板横向 / 矮屏：做题页进一步压缩纵向占用 ---- */
@media (min-width: 700px) and (max-height: 820px) {
  body.practice-mode .qbody > .typebar { padding: 5px 12px; }
  body.practice-mode .qbody > .konteks { padding: 7px 12px; margin-top: 5px; }
  body.practice-mode .qmedia-text .soal { font-size: 17px; }
  body.practice-mode .opt, body.practice-mode .opsi label { padding: 9px 14px; }
  body.practice-mode #opsiList > * { margin-bottom: 6px; }
  body.practice-mode #actionsArea { padding-top: 6px; padding-bottom: 6px; }
}

/* ---- 平板：首页卡片别拉太高，避免底部大片留白 ---- */
@media (min-width: 700px) and (max-width: 1100px) {
  body:not(.practice-mode) .grid.courses { grid-template-columns: repeat(2, 1fr); }
  body[data-view="home"] main > .grid.four { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 输入框在触屏上给足内边距，手指好点 ---- */
@media (hover: none) {
  .finput, input[type="text"], input[type="email"], input[type="password"] {
    padding: 12px 14px;
  }
}

/* ============ 邮箱验证码输入行 ============ */
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-row input {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; letter-spacing: .18em; text-align: center;
}
.code-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) {
  .code-row { flex-direction: column; }
  .code-row .btn { width: 100%; }
}
.feedback.good .verdict { color: #15803d; }

/* ==== 登录 / 注册页重设计 ==== */
/* ============================================================
   登录 / 注册页 —— 左品牌面板 + 右表单面板
   ============================================================ */

/* ---- 外壳：撑满可用高度，两栏 ---- */
body[data-view="login"] main {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}
.auth-wrap {
  width: 100%; max-width: 1060px;
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 60px -20px rgba(38, 42, 80, .22),
              0 0 0 1px rgba(226, 229, 242, .9);
}

/* ================= 左：品牌面板 ================= */
.auth-left {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4.2vh, 52px) clamp(22px, 3vw, 46px);
  background:
    radial-gradient(120% 90% at 12% 0%, #eef2ff 0%, rgba(238,242,255,0) 62%),
    radial-gradient(110% 80% at 100% 100%, #fff1f6 0%, rgba(255,241,246,0) 60%),
    radial-gradient(90% 70% at 80% 0%, #fef3e7 0%, rgba(254,243,231,0) 55%),
    linear-gradient(155deg, #f7f8ff 0%, #fdf7fb 100%);
}
/* 角落装饰光斑 */
.auth-left::before,
.auth-left::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: .5; pointer-events: none;
}
.auth-left::before { width: 260px; height: 260px; left: -90px; top: -70px;
  background: radial-gradient(circle, #c7d2fe, rgba(199,210,254,0)); }
.auth-left::after  { width: 300px; height: 300px; right: -110px; bottom: -120px;
  background: radial-gradient(circle, #fbcfe8, rgba(251,207,232,0)); }

.auth-left-in {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  text-align: center;                       /* ← 居中 */
  display: flex; flex-direction: column; align-items: center;
}

/* 大 logo */
.auth-logo {
  display: block; width: clamp(64px, 8.4vh, 92px); height: clamp(64px, 8.4vh, 92px);
  margin-bottom: clamp(14px, 2.4vh, 24px);
  filter: drop-shadow(0 10px 22px rgba(99, 102, 241, .30));
}

/* 站名：放大 + 渐变动画 + 字距 */
.auth-title {
  margin: 0;
  font-size: clamp(24px, 3.5vh, 38px);
  font-weight: 850; letter-spacing: -.028em; line-height: 1.14;
  background: linear-gradient(100deg,
    #6366f1 0%, #8b5cf6 22%, #d946ef 44%, #f97316 66%, #6366f1 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: authFlow 9s linear infinite;
}
@keyframes authFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 标题下的横线 */
.auth-rule {
  width: clamp(64px, 9vh, 96px); height: 4px; border-radius: 999px;
  margin: clamp(10px, 1.6vh, 16px) auto clamp(10px, 1.6vh, 16px);
  background: linear-gradient(90deg, #6366f1, #a855f7 45%, #ec4899);
  box-shadow: 0 2px 10px rgba(168, 85, 247, .35);
}

.auth-sub {
  margin: 0 0 4px;
  font-size: clamp(14px, 1.75vh, 17px); font-weight: 600;
  color: #5b6180; letter-spacing: .01em;
}
.auth-note {
  margin: clamp(10px, 1.7vh, 18px) 0 0;
  font-size: clamp(12.5px, 1.55vh, 14.5px); line-height: 1.75;
  color: #7b8199; max-width: 340px;
}

/* 数据点列表 */
.auth-points {
  list-style: none; margin: clamp(16px, 2.6vh, 30px) 0 0; padding: 0;
  display: grid; gap: clamp(7px, 1.1vh, 11px);
  width: 100%; max-width: 330px;
}
.auth-points li {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(7px, 1.1vh, 11px) clamp(11px, 1.4vw, 15px);
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(226, 229, 242, .9);
  border-radius: 11px;
  font-size: clamp(12.5px, 1.5vh, 14px); font-weight: 550; color: #4a5170;
  text-align: left;
  backdrop-filter: blur(6px);
}
.auth-points li svg { flex: 0 0 auto; color: var(--brand-600); opacity: .9; }

.auth-left-foot {
  margin-top: clamp(16px, 2.6vh, 30px);
  font-size: clamp(11px, 1.3vh, 12.5px); color: #9aa0b8; letter-spacing: .01em;
}

/* ================= 右：表单面板 ================= */
.auth-right {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4.2vh, 52px) clamp(22px, 3vw, 46px);
  background: #fff;
  border-left: 1px solid rgba(232, 235, 246, .9);
}
.auth-form { width: 100%; max-width: 384px; }

/* 标签页：占满宽度 */
.auth-tabs {
  display: flex; gap: 4px; background: #f2f4fa; padding: 4px;
  border-radius: 11px; margin-bottom: clamp(16px, 2.4vh, 26px); width: 100%;
}
.auth-tab {
  flex: 1 1 0; text-align: center;
  border: none; background: transparent; color: var(--ink-mute);
  font: inherit; font-size: 14.5px; font-weight: 600;
  padding: clamp(8px, 1.3vh, 11px) 8px; border-radius: 8px;
  cursor: pointer; transition: background .16s, color .16s;
}
.auth-tab:hover { color: var(--ink-2); }
.auth-tab.on {
  background: #fff; color: var(--brand-600); font-weight: 750;
  box-shadow: 0 1px 3px rgba(38, 42, 80, .10), 0 0 0 1px rgba(226, 229, 242, .8);
}

/* 字段间距更宽松 */
body[data-view="login"] .field { margin-bottom: clamp(12px, 1.8vh, 18px); }
body[data-view="login"] .field label {
  font-size: 13px; font-weight: 650; color: var(--ink-soft);
  margin-bottom: 7px; letter-spacing: .01em;
}
body[data-view="login"] .field input {
  font-size: 15px; padding: clamp(11px, 1.5vh, 14px) 15px;
  border-radius: 11px; background: #fbfcfe;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
body[data-view="login"] .field input:focus { background: #fff; }

body[data-view="login"] .btn-row { margin-top: clamp(16px, 2.4vh, 24px); gap: 12px; }
body[data-view="login"] .btn-row .btn.primary {
  flex: 1 1 auto; min-width: 130px; justify-content: center;
  padding: clamp(11px, 1.5vh, 14px) 20px; font-size: 15.5px; font-weight: 700;
}
body[data-view="login"] .btn-row .btn.ghost { font-size: 14px; }

/* 验证码行：输入框 + 发送按钮 */
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-row input {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; letter-spacing: .16em; text-align: center;
}
.code-row .btn {
  flex: 0 0 auto; white-space: nowrap; font-size: 13.5px; font-weight: 650;
  padding: 0 15px; min-width: 118px; justify-content: center;
  border: 1.5px solid var(--brand-200, #c7d2fe);
  background: #f5f6ff; color: var(--brand-700, #4338ca);
  border-radius: 11px;
}
.code-row .btn:hover:not(:disabled) {
  background: #eceeff; border-color: var(--brand, #6366f1);
}
.code-row .btn.counting {
  opacity: .55; cursor: not-allowed;
  font-variant-numeric: tabular-nums;      /* 倒计时数字不跳动 */
}
#auCodeTip { min-height: 17px; }

/* 底部说明 */
body[data-view="login"] .auth-form > p.muted.small {
  margin-top: clamp(12px, 1.8vh, 18px);
  font-size: 12.5px; line-height: 1.65; color: var(--ink-faint);
}

/* ---- 渐变流动：尊重「减少动态效果」偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .auth-title { animation: none; }
}

/* ---- 窄屏 / 竖屏：改成上下两块 ---- */
@media (max-width: 900px) {
  .auth-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 520px;
  }
  .auth-left { padding: 26px 22px 22px; }
  .auth-left-in { max-width: 100%; }
  .auth-points { display: none; }            /* 手机上省空间 */
  .auth-left-foot { display: none; }
  .auth-logo { width: 62px; height: 62px; margin-bottom: 12px; }
  .auth-rule { margin: 9px auto 10px; }
  .auth-right { border-left: none; border-top: 1px solid rgba(232,235,246,.9); padding: 24px 22px 28px; }
}
@media (max-width: 430px) {
  .code-row { flex-direction: column; }
  .code-row .btn { width: 100%; min-height: 44px; }
}

/* ==== 窄屏（手机）修正 ==== */
/* ============================================================
   窄屏（手机）修正：顶栏、导航、首页卡片
   ============================================================ */

@media (max-width: 760px) {
  /* ---- 顶栏：允许换行，别再挤出屏幕 ---- */
  body:not(.practice-mode) .topbar { padding: 10px 14px 0; }
  .topbar-inner {
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
  }
  .brand { min-width: 0; }
  .brand-text h1 {
    font-size: 17px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 46vw;
  }
  .brand .sub { display: none; }        /* 窄屏省掉副标题 */
  .topbar-right { gap: 8px; margin-left: auto; }

  /* 语言切换：只留当前语言，点开才展开（省空间） */
  
  .acct-login { padding: 7px 13px !important; font-size: 13px !important; }
  .acct-user { max-width: 120px; padding: 5px 9px; font-size: 12.5px; }

  /* ---- 主导航：横向可滑，不换行 ---- */
  .tabs {
    display: flex; flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 8px;
    padding-bottom: 2px;
    /* 让可滑动区域延伸到屏幕边缘，视觉上更像原生 */
    margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button, .tab {
    flex: 0 0 auto;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    white-space: nowrap;
  }

  /* ---- 首页 / 课程卡片：一列 ---- */
  body[data-view="home"] .grid.courses,
  body[data-view="courses"] .grid.courses,
  body[data-view="exams"] .grid.courses,
  body:not(.practice-mode) .grid.courses { grid-template-columns: 1fr !important; }

  /* 首页快捷卡那条规则特异性更高（main > .grid.courses.home-shortcuts），
     必须用同等特异性覆盖，否则手机上也还是两列被截 */
  body[data-view="home"] main > .grid.courses.home-shortcuts {
    grid-template-columns: 1fr !important;
  }

  /* 统计四宫格：两列 */
  body[data-view="home"] main > .grid.four,
  body:not(.practice-mode) .grid.four { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- 登录页 ---- */
  .auth-wrap { max-width: 100%; border-radius: 16px; }
  body[data-view="login"] main { padding-left: 14px; padding-right: 14px; }
  .auth-title { font-size: clamp(20px, 6.4vw, 30px); }
}

/* 超窄屏（<=430） */
@media (max-width: 430px) {
  .brand-text h1 { max-width: 40vw; font-size: 16px !important; }
  .acct-login { padding: 7px 10px !important; font-size: 12.5px !important; }
  body:not(.practice-mode) .grid.four { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 平板竖屏：顶栏也别挤 */
@media (min-width: 761px) and (max-width: 900px) {
  body:not(.practice-mode) .topbar { padding-left: 18px; padding-right: 18px; }
  .brand-text h1 { font-size: 19px; }
}

/* ==== 顶栏右上角放大 ==== */
/* ============================================================
   顶栏右上角：语言切换 + 登录按钮 —— 整体放大
   （原来的字号 12.5px / 内边距 5px 11px 偏小，点着也费劲）
   ============================================================ */

.lang-switch {
  gap: 3px; padding: 4px; border-radius: 11px;
}
.lang-btn {
  font-size: 14px !important; font-weight: 600 !important;
  padding: 8px 15px; border-radius: 9px;
  min-height: 36px;
}
.lang-btn.active { font-weight: 750; }

.topbar-right { gap: 12px; }
.acct-login {
  font-size: 14.5px !important; font-weight: 650 !important;
  padding: 9px 19px !important;
  min-height: 38px; border-radius: 11px;
}
.acct-user {
  padding: 8px 14px; font-size: 14px !important; border-radius: 11px;
  max-width: 230px; min-height: 38px;
}
.acct-user .ico { width: 17px; height: 17px; }

/* 主站名也稍微放大，跟右边配平 */
@media (min-width: 901px) {
  body:not(.practice-mode) .brand-text h1 { font-size: 23px; }
  body:not(.practice-mode) .brand .sub { font-size: 13.5px; }
}

/* 触屏：点按区域再放宽一点（Apple HIG 建议 44px） */
@media (hover: none), (pointer: coarse) {
  .lang-btn { min-height: 40px; padding: 9px 16px; }
  .acct-login { min-height: 42px; }
  .acct-user { min-height: 42px; }
}

/* ---- 窄屏：等比缩小，但不能小于可点按的尺寸 ---- */
@media (max-width: 900px) {
  .lang-switch { gap: 2px; padding: 3px; border-radius: 10px; }
  .lang-btn { font-size: 13px !important; padding: 7px 11px; min-height: 34px; }
  .acct-login { font-size: 13.5px !important; padding: 8px 15px !important; min-height: 36px; }
  .acct-user { font-size: 13px; padding: 7px 11px; max-width: 150px; }
  .topbar-right { gap: 9px; }
}
@media (max-width: 430px) {
  .lang-btn { font-size: 12.5px !important; padding: 6px 9px; min-height: 32px; }
  .acct-login { font-size: 13px !important; padding: 7px 12px !important; }
  .acct-user { max-width: 110px; padding: 6px 9px; }
  .topbar-right { gap: 7px; }
}

/* ==== 登录页紧凑排版 ==== */
/* ============================================================
   登录 / 注册页 —— 紧凑排版（保证提交按钮可见）
   ============================================================ */

/* ---- 表单面板可内部滚动，防止内容被裁 ---- */
.auth-right { overflow-y: auto; overscroll-behavior: contain; }
body[data-view="login"] main { overflow: hidden; }

/* ---- 整体收紧间距 ---- */
body[data-view="login"] .auth-tabs { margin-bottom: clamp(11px, 1.6vh, 18px); }
body[data-view="login"] .auth-tab { padding: clamp(6px, 1vh, 10px) 8px; font-size: 14px; }

body[data-view="login"] .field { margin-bottom: clamp(8px, 1.25vh, 14px); }
body[data-view="login"] .field label {
  font-size: 12.5px; margin-bottom: 5px;
}
body[data-view="login"] .field input {
  font-size: 14.5px;
  padding: clamp(8px, 1.1vh, 12px) 14px;
  border-radius: 10px;
}
body[data-view="login"] .code-row input { font-size: 16px; letter-spacing: .14em; }
body[data-view="login"] .code-row .btn {
  min-width: 108px; font-size: 13px; padding: 0 12px;
}
body[data-view="login"] #auCodeTip { min-height: 15px; font-size: 12px; }

body[data-view="login"] .btn-row { margin-top: clamp(10px, 1.5vh, 18px); gap: 10px; }
body[data-view="login"] .btn-row .btn.primary {
  padding: clamp(9px, 1.25vh, 13px) 18px; font-size: 15px;
}
body[data-view="login"] .btn-row .btn.ghost { font-size: 13.5px; }

body[data-view="login"] .auth-form > p.muted.small {
  margin-top: clamp(8px, 1.2vh, 14px); font-size: 12px; line-height: 1.55;
}

/* ---- 左侧：也收紧，数据点间距小一点 ---- */
.auth-left { padding: clamp(18px, 3vh, 40px) clamp(20px, 2.6vw, 40px); }
.auth-logo { width: clamp(56px, 7vh, 80px); height: clamp(56px, 7vh, 80px);
  margin-bottom: clamp(10px, 1.8vh, 20px); }
.auth-rule { margin: clamp(8px, 1.2vh, 13px) auto; }
.auth-note { margin-top: clamp(8px, 1.3vh, 15px); }
.auth-points { gap: clamp(5px, 0.85vh, 9px); margin-top: clamp(12px, 2vh, 24px); }
.auth-points li { padding: clamp(6px, 0.9vh, 10px) clamp(10px, 1.3vw, 14px); font-size: clamp(12px, 1.4vh, 13.5px); }
.auth-left-foot { margin-top: clamp(12px, 2vh, 24px); }

/* ---- 矮屏（笔记本常见 700–820px）：进一步压缩 ---- */
@media (min-width: 901px) and (max-height: 860px) {
  .auth-wrap { border-radius: 18px; }
  .auth-left, .auth-right { padding-top: 22px; padding-bottom: 22px; }
  .auth-logo { width: 58px; height: 58px; margin-bottom: 10px; }
  .auth-title { font-size: clamp(22px, 3vh, 30px); }
  .auth-rule { margin: 7px auto 8px; height: 3px; }
  .auth-sub { font-size: 14px; }
  .auth-note { font-size: 12.5px; margin-top: 8px; line-height: 1.6; }
  .auth-points { margin-top: 12px; gap: 5px; }
  .auth-points li { padding: 6px 11px; font-size: 12.5px; }
  .auth-points li svg { width: 15px; height: 15px; }
  .auth-left-foot { margin-top: 12px; font-size: 11px; }

  body[data-view="login"] .auth-tabs { margin-bottom: 11px; }
  body[data-view="login"] .field { margin-bottom: 9px; }
  body[data-view="login"] .auth-form > p.muted.small { display: none; }
}

/* ---- 更矮（<=720px）---- */
@media (min-width: 901px) and (max-height: 720px) {
  .auth-left, .auth-right { padding-top: 16px; padding-bottom: 16px; }
  .auth-points { display: none; }
  .auth-title { font-size: 24px; }
  .auth-logo { width: 50px; height: 50px; margin-bottom: 8px; }
  body[data-view="login"] .field input { padding: 8px 13px; font-size: 14px; }
  body[data-view="login"] .field { margin-bottom: 7px; }
  body[data-view="login"] .field label { font-size: 12px; margin-bottom: 4px; }
  body[data-view="login"] .btn-row { margin-top: 10px; }
  body[data-view="login"] .btn-row .btn.primary { padding: 10px 18px; }
}

/* 触屏上输入框保持 16px 字号，避免 iOS 自动放大 */
@media (max-width: 900px) {
  body[data-view="login"] .field input { font-size: 16px; }
}

/* ---- 手机 / 窄屏：不用面板内滚，改成整页滚动（更自然）---- */
@media (max-width: 900px) {
  body[data-view="login"] main { overflow: visible; }
  .auth-wrap { height: auto; }
  .auth-right { overflow: visible; }
  .auth-form { max-width: 100%; }
}

/* ============================================================
   登录页左侧：去掉数据点后，把「第一次使用请先注册…」放大
   —— 注意四种语言（中/英/韩/日）文字长度差异很大，
      用 min() 同时受宽度和高度约束，避免任何语言把版面撑破
   ============================================================ */
.auth-points { display: none !important; }

.auth-note {
  /* 宽度 42vw 是为了长英文不撑破；高度 2.15vh 是防止矮屏溢出 */
  font-size: min(clamp(15px, 2.05vh, 20px), 4.6vw) !important;
  line-height: 1.72 !important;
  color: #616784 !important;
  font-weight: 500;
  max-width: min(430px, 100%) !important;
  margin: clamp(12px, 2vh, 24px) auto 0 !important;
  /* 英文/韩文断词更自然 */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-wrap: pretty;
}
/* 英文行更长，稍微收一点字号 */
html[lang="en"] .auth-note { font-size: min(clamp(14px, 1.9vh, 18.5px), 4.2vw) !important; }

/* 副标题也跟着适度放大，跟大号说明配平 */
.auth-sub { font-size: min(clamp(15px, 1.95vh, 19px), 4.8vw) !important; }

/* 左侧整体：去掉列表后靠上一点，视觉更平衡 */
.auth-left-in { max-width: 460px; }
.auth-left-foot { margin-top: clamp(16px, 2.8vh, 34px) !important; }

/* 矮屏：说明文字不能把按钮挤下去 */
@media (min-width: 901px) and (max-height: 860px) {
  .auth-note { font-size: min(clamp(14px, 1.85vh, 17px), 4.2vw) !important;
    margin-top: 12px !important; line-height: 1.65 !important; }
  .auth-sub { font-size: min(clamp(14px, 1.8vh, 17px), 4.4vw) !important; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .auth-note { display: none !important; }
  .auth-sub { font-size: 15px !important; }
}

/* 窄屏（上下堆叠）：说明居中、宽度收窄 */
@media (max-width: 900px) {
  .auth-note { font-size: 15px !important; max-width: 92% !important; margin-top: 10px !important; }
  .auth-sub { font-size: 15.5px !important; }
}

/* ==== 移动端适配 ==== */
/* ============================================================
   移动端适配：iOS / Android / HarmonyOS + 多语言排版
   ------------------------------------------------------------
   覆盖：
     ① 刘海 / 灵动岛 / 底部小横条（safe-area-inset）
     ② 各品牌机型的屏幕宽度与字号
     ③ 触屏手势、点击反馈、惯性滚动
     ④ 中 / 英 / 韩 / 日 各自的字体与断行规则
   ============================================================ */

/* ---------- ① 安全区：刘海屏、灵动岛、底部横条 ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* 顶栏左右让开圆角/刘海 */
.topbar {
  padding-left: max(24px, calc(24px + var(--sal)));
  padding-right: max(24px, calc(24px + var(--sar)));
  padding-top: max(10px, var(--sat));
}
body.practice-mode .topbar {
  padding-left: max(14px, calc(14px + var(--sal)));
  padding-right: max(14px, calc(14px + var(--sar)));
}

/* 内容区左右 */
body:not(.practice-mode) main {
  padding-left: max(14px, calc(14px + var(--sal)));
  padding-right: max(14px, calc(14px + var(--sar)));
}

/* 底部：footer 与做题页按钮区避开小横条 */
.footer { padding-bottom: max(8px, var(--sab)); }
body.practice-mode #actionsArea {
  padding-bottom: max(8px, var(--sab));
}
body.practice-mode main { padding-bottom: max(12px, var(--sab)); }

/* 悬浮/固定元素（轻盒、返回顶部之类） */
.lightbox { padding: calc(16px + var(--sat)) calc(16px + var(--sar))
                    calc(16px + var(--sab)) calc(16px + var(--sal)); }

/* ---------- ② 语言专属字体栈 ----------
   原来的 --sans 把中文字体排在前面，
   韩文/日文会被 PingFang / 雅黑 抢去渲染，字形会不地道。
   这里按 html[lang] 覆盖，让每种语言优先用原生字体。            */

/* 英文 / 拉丁语系：无衬线优先，字形更清晰 */
html[lang="en"] body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .002em;
}

/* 韩文：苹果用 Apple SD Gothic Neo，安卓/鸿蒙用 Noto Sans KR / HarmonyOS Sans */
html[lang="ko"] body {
  font-family: "Inter", "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans KR", "HarmonyOS Sans KR", "HarmonyOS Sans SC",
               system-ui, sans-serif;
  /* 韩文行高需要略大一点才好读 */
  line-height: 1.78;
  /* 韩文用不到连字符 */
  hyphens: none;
}

/* 日文：苹果用 Hiragino，Windows 用 Yu Gothic / Meiryo */
html[lang="ja"] body {
  font-family: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Yu Gothic UI", "Meiryo", "Noto Sans JP",
               "HarmonyOS Sans SC", system-ui, sans-serif;
  line-height: 1.76;
  hyphens: none;
}

/* 中文：苹果 PingFang，Windows 雅黑，鸿蒙 HarmonyOS Sans */
html[lang="zh"] body,
html[lang="zh-CN"] body,
html[lang="zh-TW"] body {
  font-family: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  hyphens: none;
}

/* ---------- 断行规则：中日韩按字断行，拉丁按词断行 ---------- */
/* CJK：字与字之间可以断，不需要连字符 */
html[lang="zh"] body, html[lang="ko"] body, html[lang="ja"] body {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
/* 拉丁：按词断，超长词才断，能连字符就连 */
html[lang="en"] body {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* 按钮/导航这类短文本永远不要断行后变两行 */
.btn, .tab, .tabs button, .lang-btn, .auth-tab, .fsortbtn {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* 韩文/日文的「词组不能拆开」——标题和按钮保持整词 */
html[lang="ko"] .auth-title, html[lang="ja"] .auth-title,
html[lang="ko"] .card h3, html[lang="ja"] .card h3 {
  word-break: keep-all;
}

/* ---------- ③ 设备与触屏 ---------- */

/* iOS / iPadOS：惯性滚动、禁止长按弹出菜单、禁止双击缩放 */
@supports (-webkit-touch-callout: none) {
  html, body {
    -webkit-text-size-adjust: 100%;       /* 横屏时不自动放大字号 */
  }
  .tabs, .admintable, .scroll-x, .qbody, .qcol-right {
    -webkit-overflow-scrolling: touch;
  }
  /* 图片和按钮长按不弹「存储图像 / 拷贝」 */
  .btn, .tab, .lang-btn, .chip, .itile, .logo-id {
    -webkit-touch-callout: none;
  }
  /* iOS 的 100vh 比可视区高，dvh 才准 */
  body:not(.practice-mode),
  body.practice-mode { min-height: 100dvh; }
}

/* 触屏通用：去掉点击灰块、去掉 300ms 延迟、加大点按 */
@media (hover: none), (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, label, input, select, textarea, [role="button"] {
    touch-action: manipulation;
  }
  /* 安卓/鸿蒙上 scroll-behavior 会让锚点跳转很慢，这里不启用 */
  .btn { min-height: 44px; }
  .tab, .tabs button { min-height: 44px; }
  .lang-btn { min-height: 40px; }
  /* 输入框统一 16px，避免 iOS 聚焦自动放大整页 */
  input, select, textarea { font-size: 16px; }
  /* 表格横向滑动更顺 */
  .admintable { -webkit-overflow-scrolling: touch; }
}

/* 安卓 / 鸿蒙（Chromium 内核）：修正字体渲染偏粗 */
@supports not (-webkit-touch-callout: none) {
  body {
    -webkit-font-smoothing: auto;         /* 安卓上 antialiased 会偏细发虚 */
    text-rendering: auto;                 /* optimizeLegibility 在安卓上会拖性能 */
  }
}

/* 超小屏（iPhone SE 320/375、老安卓 360） */
@media (max-width: 380px) {
  body { font-size: 14.5px; }
  .brand-text h1 { font-size: 15px !important; max-width: 34vw; }
  .lang-btn { font-size: 12px !important; padding: 6px 8px !important; min-height: 32px; }
  .acct-login { font-size: 12.5px !important; padding: 7px 11px !important; }
  body:not(.practice-mode) main { padding-left: 10px; padding-right: 10px; }
  .card { padding: 14px 15px; }
  .auth-title { font-size: 20px !important; }
}

/* 平板（iPad / 安卓板 / 鸿蒙板）竖屏：保持两栏 */
@media (min-width: 768px) and (max-width: 1024px) {
  body:not(.practice-mode) main { padding-left: 20px; padding-right: 20px; }
}

/* 横屏矮屏（手机横过来）：压缩纵向占用 */
@media (max-height: 480px) and (orientation: landscape) {
  body:not(.practice-mode) .topbar { padding-top: max(4px, var(--sat)); }
  body:not(.practice-mode) .brand .sub { display: none; }
  body:not(.practice-mode) .tabs { margin-top: 4px; }
  body:not(.practice-mode) .tabs button,
  body:not(.practice-mode) .tab { padding: 6px 11px !important; min-height: 34px; }
  body:not(.practice-mode) main { padding-top: 8px; }
  .card { margin-bottom: 10px; }
  /* 做题页横屏：左右两栏但压扁 */
  body.practice-mode main { padding: 8px 10px; }
  body.practice-mode .qbody > .typebar,
  body.practice-mode .qbody > .konteks { display: none; }
}

/* 折叠屏展开 / 大屏手机 */
@media (min-width: 431px) and (max-width: 600px) {
  .auth-form { max-width: 100%; }
}

/* 深色模式：只做最小适配，避免刺眼 */
@media (prefers-color-scheme: dark) {
  html { color-scheme: light; }           /* 本站是浅色设计，明确声明，避免浏览器自动反色 */
}

/* 系统字号放大（无障碍）：布局别崩 */
@media (min-resolution: 0dpi) { /* noop，占位 */ }

/* ==== 首页：上移 + 设备适配 ==== */
/* ============================================================
   首页：
   ① 内容上移 —— 不再垂直居中留一大片空白，改为紧贴导航
   ② 底部「已适配设备」彩色方块图标
   ============================================================ */

/* ---------- ① 上移 + 与导航的间距 ---------- */
body[data-view="home"] main {
  justify-content: flex-start !important;
  padding-top: clamp(14px, 2.2vh, 28px) !important;
}
/* 导航栏与内容之间给一点呼吸 */
body[data-view="home"] .topbar { padding-bottom: 0; }
body[data-view="home"] .tabs { margin-bottom: 0; }

/* 首页内容整体宽度 */
body[data-view="home"] main > * { width: 100%; }

/* ---------- ② 已适配设备 ---------- */
.platforms {
  margin-top: auto;                 /* 推到页面底部 */
  padding-top: clamp(14px, 2.4vh, 28px);
  flex: 0 0 auto;
}
.platforms-head {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: clamp(12px, 1.35vh, 13.5px); font-weight: 600;
  color: var(--ink-faint); margin-bottom: clamp(10px, 1.6vh, 16px);
  letter-spacing: .01em;
}
.platforms-head svg { color: #16a34a; }

.platforms-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 14px);
}

.plat {
  display: flex; align-items: center; gap: clamp(8px, 0.9vw, 12px);
  padding: clamp(9px, 1.35vh, 14px) clamp(10px, 1vw, 15px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.plat:hover {
  border-color: #d9def0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(38, 42, 80, .22);
}

/* 彩色方形图标 */
.pico {
  flex: 0 0 auto;
  width: clamp(38px, 4.6vh, 46px);
  height: clamp(38px, 4.6vh, 46px);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.pico svg { width: 58%; height: 58%; }

.pmeta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pmeta b {
  font-size: clamp(12.5px, 1.45vh, 14.5px); font-weight: 700;
  color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pmeta i {
  font-style: normal;
  font-size: clamp(10.5px, 1.2vh, 12px);
  color: var(--ink-faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---- 平板：两列 ---- */
@media (max-width: 1024px) {
  .platforms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- 手机：两列（图标为主，文字缩） ---- */
@media (max-width: 560px) {
  .platforms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plat { padding: 8px 10px; gap: 8px; border-radius: 11px; }
  .pico { width: 34px; height: 34px; border-radius: 10px; }
  .pmeta b { font-size: 12px; }
  .pmeta i { display: none; }        /* 手机上只留设备名 */
  .platforms { margin-top: clamp(12px, 2vh, 20px); }
}
/* ---- 超小屏：单列 ---- */
@media (max-width: 360px) {
  .platforms-row { grid-template-columns: minmax(0, 1fr); }
  .pmeta i { display: block; }
}

/* ---- 矮屏：给设备区留位置，别把内容挤出去 ---- */
@media (max-height: 760px) {
  .platforms { padding-top: 10px; }
  .platforms-head { margin-bottom: 8px; }
  .plat { padding: 7px 10px; }
  .pico { width: 34px; height: 34px; border-radius: 10px; }
}
@media (max-height: 680px) {
  .platforms { display: none; }      /* 特别矮的屏直接不显示，优先保证主内容 */
}

/* ==== 手机端顶栏重构 ==== */
/* ============================================================
   手机端：顶栏重构 + 登录页去掉左侧品牌面板
   ------------------------------------------------------------
   问题：
     · 登录/注册页在手机上仍显示左侧品牌面板，把表单挤下去还互相盖住
     · 顶栏的站名被语言切换和登录按钮挤没了，只剩一个图标
   做法：
     · ≤900px 隐藏 .auth-left
     · 顶栏分三行：① 品牌  ② 语言+登录  ③ 导航
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- ① 登录页：手机上去掉左侧品牌面板 ---------- */
  body[data-view="login"] .auth-left { display: none !important; }
  body[data-view="login"] .auth-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  body[data-view="login"] .auth-right {
    border-left: none; border-top: none;
    padding: 18px 16px 26px;
    align-items: flex-start;        /* 表单靠上，别在长面板里垂直居中留大白 */
    overflow: visible;
  }
  /* 手机上外层白卡片不再撑满整屏，跟着内容走 */
  body[data-view="login"] .auth-wrap {
    height: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  body[data-view="login"] .auth-right { background: transparent; }
  body[data-view="login"] .auth-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 16px 15px 18px;
  }
  /* 表单顶部不用再留大间距 */
  body[data-view="login"] .auth-tabs { margin-top: 0; }

  /* ---------- ② 顶栏：三行布局 ---------- */
  body:not(.practice-mode) .topbar { padding: 8px 12px 0; }

  body:not(.practice-mode) .topbar-inner {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
    align-items: center;
  }

  /* 第一行：品牌（之前被挤成 0 宽，现在占满一行） */
  body:not(.practice-mode) .brand {
    flex: 1 1 100%;
    min-width: 0;
    gap: 9px;
  }
  body:not(.practice-mode) .brand-text { min-width: 0; flex: 1 1 auto; }
  body:not(.practice-mode) .brand-text h1 {
    font-size: 16.5px !important;
    max-width: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
  }
  body:not(.practice-mode) .brand .sub {
    display: block !important;        /* 副标题也显示出来 */
    font-size: 11.5px !important;
    margin-top: 1px;
    color: var(--ink-faint);
  }
  body:not(.practice-mode) .logo-id {
    width: 34px !important; height: 34px !important; border-radius: 10px !important;
  }
  body:not(.practice-mode) .logo-id i { transform: scale(.82); }

  /* 第二行：语言切换 + 登录按钮，靠右 */
  body:not(.practice-mode) .topbar-right {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 8px;
    margin-left: 0;
  }

  /* 第三行由 .tabs 自己占（它是 topbar 的兄弟） */
  body:not(.practice-mode) .tabs { margin-top: 6px; }
}

/* ---- 超窄屏：品牌名和按钮再收一点，但保持可点 ---------- */
@media (max-width: 380px) {
  body:not(.practice-mode) .brand-text h1 { font-size: 15px !important; }
  body:not(.practice-mode) .brand .sub { font-size: 10.5px !important; }
  body:not(.practice-mode) .logo-id { width: 30px !important; height: 30px !important; }
  body:not(.practice-mode) .topbar { padding-left: 10px; padding-right: 10px; }
  .lang-btn { font-size: 12px !important; padding: 6px 8px !important; }
}

/* ---- 手机横屏：三行太占地方，压回两行 ---- */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  body:not(.practice-mode) .brand { flex: 0 1 auto; }
  body:not(.practice-mode) .brand .sub { display: none !important; }
  body:not(.practice-mode) .topbar-right { flex: 1 1 auto; justify-content: flex-end; }
  body:not(.practice-mode) .brand-text h1 { font-size: 15px !important; }
}

/* ---- 平板竖屏（768–900）：品牌行 + 控件行并排，别浪费竖向空间 ---- */
@media (min-width: 700px) and (max-width: 900px) {
  body:not(.practice-mode) .brand { flex: 1 1 auto; }
  body:not(.practice-mode) .topbar-right { flex: 0 0 auto; justify-content: flex-end; }
}

/* ==== 设备区：上移拉高 ==== */
/* ============================================================
   首页「已适配设备」—— 上移 + 拉高 + 文字加大
   （原来用 margin-top:auto 顶到页面底部，中间留一大片空）
   ============================================================ */

.platforms {
  margin-top: clamp(20px, 3.2vh, 40px) !important;   /* 不再顶到底部 */
  padding-top: 0 !important;
}

/* 标题行：加大加粗 */
.platforms-head {
  font-size: clamp(14px, 1.75vh, 17.5px) !important;
  font-weight: 650 !important;
  color: var(--ink-soft) !important;
  gap: 8px !important;
  margin-bottom: clamp(14px, 2.2vh, 22px) !important;
  letter-spacing: .005em;
}
.platforms-head svg { width: 17px; height: 17px; }

/* 卡片：等距、拉高、留白大方 */
.platforms-row {
  gap: clamp(12px, 1.4vw, 20px) !important;
}
.plat {
  padding: clamp(16px, 2.4vh, 24px) clamp(16px, 1.5vw, 22px) !important;
  border-radius: 16px !important;
  gap: clamp(12px, 1.2vw, 16px) !important;
  min-height: clamp(76px, 11vh, 104px);
}

/* 图标：方形拉大 */
.pico {
  width: clamp(46px, 5.8vh, 58px) !important;
  height: clamp(46px, 5.8vh, 58px) !important;
  border-radius: 15px !important;
}
.pico svg { width: 56%; height: 56%; }

/* 文字：设备名加大，副标题也跟着提 */
.pmeta b { font-size: clamp(14.5px, 1.75vh, 17.5px) !important; }
.pmeta i { font-size: clamp(11.5px, 1.35vh, 13px) !important; margin-top: 2px; }
.pmeta { line-height: 1.42; }

/* ---- 中桌面：保持四列，卡片再宽一点 ---- */
@media (min-width: 901px) {
  .platforms-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 平板：两列，卡片更舒展 ---- */
@media (max-width: 1024px) {
  .plat { min-height: clamp(80px, 10vh, 100px); }
  .pico { width: clamp(44px, 5.4vh, 54px) !important; height: clamp(44px, 5.4vh, 54px) !important; }
}

/* ---- 手机：两列，图标和字号适度回调但保持大方 ---- */
@media (max-width: 560px) {
  .platforms { margin-top: clamp(16px, 2.6vh, 26px) !important; }
  .platforms-head { font-size: 14px !important; margin-bottom: 12px !important; }
  .platforms-row { gap: 10px !important; }
  .plat {
    padding: 12px 13px !important;
    min-height: 66px;
    border-radius: 13px !important;
    gap: 11px !important;
  }
  .pico { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .pmeta b { font-size: 13.5px !important; }
  .pmeta i { display: block !important; font-size: 11px !important; }
}

/* ---- 矮屏：压缩但不隐藏（内容现在更紧凑了，能放得下） ---- */
@media (max-height: 760px) {
  .platforms { margin-top: 14px !important; }
  .platforms-head { margin-bottom: 10px !important; font-size: 13.5px !important; }
  .plat { padding: 10px 13px !important; min-height: 60px; }
  .pico { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  .pmeta b { font-size: 13.5px !important; }
  .pmeta i { font-size: 11px !important; }
}
@media (max-height: 660px) {
  .platforms-head { display: none; }        /* 极矮屏只留图标卡片 */
  .platforms { margin-top: 10px !important; }
}

/* ---- 官方标志微调：不同图形的视觉重量不一样，分别给一点缩放 ---- */
.pico svg { width: 62%; height: 62%; display: block; }
.pico [class=""] { }                     /* noop */
/* Windows 四方格本身方正，收一点免得贴边 */
.plat .pico svg[viewBox="0 0 24 24"] { width: 56%; height: 56%; }
/* Android / HarmonyOS 是 32 网格，稍微放大填满 */
.plat .pico svg[viewBox="0 0 32 32"] { width: 70%; height: 70%; }

/* ============================================================
   横向溢出根治
   ------------------------------------------------------------
   有些尺寸下 scrollWidth 会比 clientWidth 大 1–2px，
   来自百分比宽度/clamp 的亚像素舍入，肉眼看不出来，
   但会让移动端能左右晃一下。在根元素上裁掉即可。
   注意：用 clip 而不是 hidden —— hidden 会让 html 变成滚动容器，
        影响 position: sticky 的参照物。
   ============================================================ */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
/* 长单词/长串也不要把页面撑宽 */
body { max-width: 100%; }
.qmedia-text, .konteks, .passage, .review-item, .admintable td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ==== 所有页面内容上移 ==== */
/* ============================================================
   所有页面内容上移
   ------------------------------------------------------------
   原来的 `body:not(.practice-mode) main { justify-content: safe center }`
   会把内容在可用高度里垂直居中 —— 内容不满一屏时顶部就留一大片白。
   之前只给首页改成了 flex-start，其余页面（课程/考试/背记单词/论坛/
   关于我们/错题本/我的/BIPA/EVALUASI/技能/课时…）都还有这个问题。

   这里统一改成从顶部开始排；内容长了自然滚动。
   ============================================================ */

body:not(.practice-mode) main {
  justify-content: flex-start !important;
}

/* 与导航栏之间的呼吸感（各页面统一，避免有的贴太紧有的太空） */
body:not(.practice-mode) main {
  padding-top: clamp(14px, 2.2vh, 28px) !important;
}

/* 内容不满一屏时，底部不要出现「被拉长的空白卡片」 */
body:not(.practice-mode) main > * {
  flex: 0 0 auto;
}

/* ---- 内容偏长的页面：靠 allow-scroll 机制滚动 ----
   论坛帖子多、题库列表长时，main 会溢出，checkOverflow() 会给 body
   加 allow-scroll，页面就能正常上下滑。这里只做保险。            */
body:not(.practice-mode).allow-scroll main {
  justify-content: flex-start !important;
}

/* ---- 论坛：帖子列表可以长，保证能滑 ---- */
body[data-view="forum"] main { justify-content: flex-start !important; }
body[data-view="forum"] .forum-list,
body[data-view="forum"] .post-list { overflow: visible; }

/* ---- 关于我们：长文页，从顶部开始读 ---- */
body[data-view="about"] main { justify-content: flex-start !important; }

/* ---- 我的 / 错题本 / 课程 / 考试 / 背记单词 ---- */
body[data-view="my"] main,
body[data-view="wrong"] main,
body[data-view="courses"] main,
body[data-view="exams"] main,
body[data-view="vocab"] main,
body[data-view="bipa1"] main,
body[data-view="bipa2"] main,
body[data-view="bipa3"] main {
  justify-content: flex-start !important;
}

/* ---- 矮屏：上下间距再收一点 ---- */
@media (max-height: 760px) {
  body:not(.practice-mode) main { padding-top: 12px !important; }
}

/* ============================================================
   .unit-head 抗挤压
   ------------------------------------------------------------
   卡片的「图标 + 文字 + 右侧操作块」是 flex 行。
   屏幕上窄时，右侧那块（例如 EVALUASI 页的「混合练习」按钮）
   会把中间文字压到几十像素，出现逐段换行。
   这里：文字块可收缩且不会被压到最小宽度以下；
        整行允许换行，右侧块在窄屏独占一行。
   ============================================================ */

.unit-head { flex-wrap: wrap; row-gap: 10px; }
.unit-head > .uh-text {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.unit-head > .uh-text > h2,
.unit-head > .uh-text > h3 { overflow-wrap: break-word; }

/* 右侧操作块：宽屏跟文字同行，窄屏整行 */
.unit-head > .ev-mix {
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .unit-head > .ev-mix {
    flex: 1 1 100%;            /* 独占一行 */
    align-items: flex-start;
    text-align: left;
    margin-top: 2px;
  }
  .unit-head > .uh-text { flex: 1 1 auto; }
}

/* 超窄屏：图标也缩一点，给文字多留空间 */
@media (max-width: 400px) {
  .unit-head { gap: 10px; }
  .unit-head > .itile { width: 44px !important; height: 44px !important; }
}

/* ============================================================
   登录入口统一
   ------------------------------------------------------------
   登录卡片（.auth-wrap）会在多个地方出现：
     · #/login          导航的「登录 / 注册」
     · #/login/register 注册
     · #/login/reset    找回密码
     · #/my             未登录时的「我的」
   原来的规则写死了 body[data-view="login"]，导致「我的」页在手机上
   仍然显示左侧品牌面板，和各页面不一致。
   改成不挑 data-view 的通用规则：只要出现登录卡片，样式就统一。
   ============================================================ */

@media (max-width: 900px) {
  /* 手机/平板：一律不显示左侧品牌面板 */
  .auth-left { display: none !important; }
  .auth-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .auth-right {
    border-left: none !important;
    border-top: none !important;
    background: transparent !important;
    padding: 18px 16px 26px !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }
  .auth-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 16px 15px 18px;
  }
  .auth-tabs { margin-top: 0 !important; }
}

/* ============================================================
   手机端：菜单栏折叠
   ------------------------------------------------------------
   桌面（>900px）：保持一行横向标签，汉堡按钮不出现。
   手机（≤900px）：标签行收起，只留一个「☰」；
                  点开变成整宽竖向列表，点任一项或换页自动收起。
   ============================================================ */

.menu-toggle { display: none; }

@media (max-width: 900px) {

  /* ---- 汉堡按钮 ---- */
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 44px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
  }
  .menu-toggle:active { background: var(--brand-soft); }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-soft);
    transition: transform .22s ease, opacity .16s ease;
  }
  body.menu-open .menu-toggle {
    background: var(--brand-soft);
    border-color: #c7d2fe;
  }
  body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
  body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 品牌行：站名占满，汉堡靠右 */
  body:not(.practice-mode) .brand { flex: 1 1 auto; min-width: 0; }
  body:not(.practice-mode) .topbar-inner { flex-wrap: wrap; }
  body:not(.practice-mode) .menu-toggle { order: 3; margin-left: auto; }

  /* ---- 标签行：默认收起 ---- */
  .tabs {
    display: none !important;
    margin-top: 8px !important;
    flex-direction: column;
    gap: 3px;
    overflow: visible !important;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 28px -14px rgba(38, 42, 80, .28);
    width: 100%;
  }
  body.menu-open .tabs {
    display: flex !important;
    animation: menuIn .18s ease-out;
  }
  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* 每一项整宽左对齐，好点 */
  .tabs button,
  .tabs .tab {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 11px 13px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    gap: 11px !important;
    background: transparent !important;
    border: none !important;
    color: var(--ink-2) !important;
    text-align: left;
  }
  .tabs button span, .tabs .tab span { font-size: 15px !important; }
  .tabs button svg, .tabs .tab svg { flex: 0 0 auto; }
  .tabs button:hover, .tabs button:active { background: var(--brand-soft) !important; }
  .tabs button.active,
  .tabs .tab.active {
    background: linear-gradient(135deg, var(--brand), var(--violet)) !important;
    color: #fff !important;
    font-weight: 650 !important;
    box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .75);
  }
  .tabs button::after,
  .tabs .tab::after,
  .tabs button.active::after { display: none !important; content: none !important; }

  .tabs .tabs-gap {
    display: block;
    width: auto;
    height: 1px;
    margin: 5px 8px;
    background: var(--line);
  }
}

/* 手机横屏矮屏：菜单太长时内部滚动 */
@media (max-width: 900px) and (max-height: 520px) {
  body.menu-open .tabs { max-height: 52vh; overflow-y: auto !important; }
}