/* ==========================================================================
   双能力训练 · 设计系统 v1.0
   风格：奶油纸感 + 果冻色块 + 贴纸边框（面向中小学生，拒绝通用紫渐变风）
   规则：学生端 / 家长端 / 后台 全部复用本文件，禁止各页自造颜色与圆角。
   ========================================================================== */

:root {
  /* 底色 / 墨色 */
  --cream: #FFFBF2;
  --paper: #FFFFFF;
  --ink: #1E2A3A;
  --ink-2: #4A5A70;
  --ink-3: #8593A8;
  --line: #EAE3D6;

  /* 品牌色 */
  --orange: #FF6B35;
  --orange-soft: #FFE6DC;
  --mint: #12B886;
  --mint-soft: #D9F5EC;
  --sky: #3C82F6;
  --sky-soft: #DEebFF;
  --lemon: #FFC93C;
  --lemon-soft: #FFF3D1;
  --coral: #FF7A9C;
  --coral-soft: #FFE3EA;

  /* 语义 */
  --ok: #12B886;
  --warn: #FF9F1C;
  --danger: #F0503A;

  /* 形状 */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --bd: 2px solid rgba(30, 42, 58, .08);

  /* 阴影：贴纸式（位移 + 低透明实心），不用大范围柔光 */
  --sh-1: 0 3px 0 rgba(30, 42, 58, .06), 0 8px 22px rgba(30, 42, 58, .06);
  --sh-2: 0 6px 0 rgba(30, 42, 58, .09);
  --sh-press: 0 2px 0 rgba(30, 42, 58, .12);

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* 容器宽度：手机 480，平板竖屏 720，平板横屏 880（断点见文件末尾） */
  --shell-w: 480px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  /* 背景点阵：轻微的纸感，不抢内容 */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(30, 42, 58, .045) 1px, transparent 1px);
  background-size: 18px 18px;
  z-index: 0;
}

#app { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 布局骨架 */
.shell {
  max-width: var(--shell-w, 480px);
  margin: 0 auto;
  padding: 18px 18px calc(92px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
.shell--wide { max-width: 1080px; padding-bottom: 32px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.topbar__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.topbar__sub { font-size: 13px; color: var(--ink-3); margin: 2px 0 0; }
.topbar__space { flex: 1; }

.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt24 { margin-top: 24px; }
.muted { color: var(--ink-3); font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--paper);
  border: var(--bd);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 18px;
}
.card--lg { border-radius: var(--r-lg); padding: 22px; }
.card--flat { box-shadow: none; }
.card--sun { background: linear-gradient(160deg, #FFF6DF 0%, #FFEFC9 100%); }
.card--mint { background: linear-gradient(160deg, #E9FBF4 0%, #D9F5EC 100%); }
.card--sky { background: linear-gradient(160deg, #EAF2FF 0%, #DEebFF 100%); }
.card--coral { background: linear-gradient(160deg, #FFEFF3 0%, #FFE3EA 100%); }

.card__title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.card__hint { font-size: 12.5px; color: var(--ink-2); margin: 0; }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  appearance: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  border-radius: var(--r-pill);
  padding: 13px 22px;
  cursor: pointer;
  box-shadow: var(--sh-2);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}
.btn:active { transform: translateY(4px); box-shadow: var(--sh-press); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sh-2); }
.btn--primary { background: var(--orange); }
.btn--mint { background: var(--mint); }
.btn--sky { background: var(--sky); }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(30, 42, 58, .14);
}
.btn--ghost:active { background: rgba(30, 42, 58, .05); transform: none; }
.btn--sm { font-size: 13.5px; padding: 8px 16px; }
.btn--block { display: flex; width: 100%; }
.btn--danger { background: var(--danger); }

/* ---------------------------------------------------------------- 标签 / 徽章 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(30, 42, 58, .05);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  border: 1.5px solid transparent;
}
.chip--on { background: var(--ink); color: #fff; }
.chip--orange { background: var(--orange-soft); color: #C2410C; }
.chip--mint { background: var(--mint-soft); color: #0B7A5C; }
.chip--sky { background: var(--sky-soft); color: #1D4ED8; }
.chip--lemon { background: var(--lemon-soft); color: #9A6B00; }

.badge {
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--coral); color: #fff;
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------- 数据块 */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__num {
  font-family: var(--font-num);
  font-size: 30px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat__num--sm { font-size: 22px; }
.stat__label { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.bar { height: 12px; border-radius: var(--r-pill); background: rgba(30, 42, 58, .08); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--mint); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar__fill--orange { background: var(--orange); }
.bar__fill--sky { background: var(--sky); }

/* ---------------------------------------------------------------- 列表 */
.list { display: flex; flex-direction: column; }
.list__row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1.5px dashed var(--line);
}
.list__row:last-child { border-bottom: none; }
.list__main { flex: 1; min-width: 0; }
.list__title { font-size: 15px; font-weight: 700; }
.list__sub { font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- 头像 */
.avatar {
  width: 44px; height: 44px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #fff;
  background: var(--sky);
  flex: none;
}
.avatar--sm { width: 34px; height: 34px; border-radius: 12px; font-size: 15px; }
.avatar--orange { background: var(--orange); }
.avatar--mint { background: var(--mint); }
.avatar--coral { background: var(--coral); }

/* ---------------------------------------------------------------- 底部导航 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  max-width: var(--shell-w, 480px); margin: 0 auto;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 251, 242, .94);
  backdrop-filter: blur(12px);
  border-top: 1.5px solid var(--line);
}
.tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--ink-3);
  font-size: 11.5px; font-weight: 700;
  padding: 4px 0; border-radius: 14px;
}
.tabbar__item--on { color: var(--ink); }
.tabbar__item--on .tabbar__ico { background: var(--orange-soft); }
.tabbar__ico {
  width: 34px; height: 26px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  transition: background .2s ease;
}

/* ---------------------------------------------------------------- 底部弹层 */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(30, 42, 58, .35);
  z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease;
}
.sheet {
  width: 100%; max-width: min(var(--shell-w, 480px), 640px);
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  animation: slideUp .24s cubic-bezier(.2,.8,.2,1);
  max-height: 86vh; overflow: auto;
}

/* ---------------------------------------------------------------- 提示 */
.toast-wrap {
  position: fixed; left: 50%; top: 18%;
  transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(30, 42, 58, .25);
  animation: pop .26s cubic-bezier(.2,.9,.3,1.3);
  max-width: 86vw; text-align: center;
}
.toast--ok { background: var(--mint); }
.toast--err { background: var(--danger); }

/* ---------------------------------------------------------------- 答题 */
.qstem {
  font-size: 26px; font-weight: 800; line-height: 1.5;
  letter-spacing: -.01em;
}
.qstem--long { font-size: 18px; font-weight: 700; line-height: 1.7; }

.answer-input {
  width: 100%; font-family: var(--font-num);
  font-size: 34px; font-weight: 800; text-align: center;
  padding: 16px; border-radius: var(--r-md);
  border: 3px solid rgba(30, 42, 58, .12);
  background: #fff; color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.answer-input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }

.option {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; margin-bottom: 10px;
  border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line);
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.option:active { transform: scale(.985); }
.option--on { border-color: var(--sky); background: var(--sky-soft); }
.option--right { border-color: var(--mint); background: var(--mint-soft); }
.option--wrong { border-color: var(--danger); background: var(--coral-soft); }
.option__key {
  width: 28px; height: 28px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(30, 42, 58, .07); font-size: 13px; font-weight: 800;
}

.steps { display: flex; gap: 6px; }
.steps__dot { flex: 1; height: 6px; border-radius: 99px; background: rgba(30, 42, 58, .1); }
.steps__dot--done { background: var(--mint); }
.steps__dot--now { background: var(--orange); }

/* ---------------------------------------------------------------- 榜单 */
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 16px;
  margin-bottom: 8px;
  background: #fff; border: 1.5px solid var(--line);
}
.rank-row--me { border-color: var(--orange); background: var(--orange-soft); }
.rank-row--top { background: #FFF9E8; border-color: #F3DFA8; }
.rank__no {
  width: 26px; text-align: center;
  font-family: var(--font-num); font-size: 16px; font-weight: 800; color: var(--ink-3);
}
.rank__no--1 { color: #E8A200; } .rank__no--2 { color: #8C9BAE; } .rank__no--3 { color: #C1783C; }

/* ---------------------------------------------------------------- 空态 */
.empty { text-align: center; padding: 34px 12px; color: var(--ink-3); }
.empty__ico {
  width: 62px; height: 62px; margin: 0 auto 12px;
  border-radius: 22px; background: rgba(30, 42, 58, .05);
  display: grid; place-items: center; font-size: 28px;
}

/* ---------------------------------------------------------------- 分段器 */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(30, 42, 58, .06);
  border-radius: var(--r-pill);
}
.seg__item {
  flex: 1; text-align: center; padding: 8px 10px;
  border-radius: var(--r-pill); border: none; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink-3);
  cursor: pointer;
}
.seg__item--on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(30,42,58,.1); }

/* ---------------------------------------------------------------- 后台表格 */
.admin { --r-md: 12px; --r-lg: 16px; font-size: 14px; }
.admin .card { padding: 16px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 12px; color: var(--ink-3);
  font-weight: 700; padding: 0 12px 4px;
}
.table td { background: #fff; padding: 11px 12px; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.table td:first-child { border-left: 1.5px solid var(--line); border-radius: 10px 0 0 10px; }
.table td:last-child { border-right: 1.5px solid var(--line); border-radius: 0 10px 10px 0; }

/* ---------------------------------------------------------------- 动画 */
@keyframes pop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.anim-pop { animation: pop .3s cubic-bezier(.2,.9,.3,1.3); }
.anim-shake { animation: shake .3s ease; }
.float { animation: float 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   响应式：手机 / 平板竖屏 / 平板横屏
   原则：不改变信息结构，只放宽容器、放大触控目标与字号；答题页在横屏用两列。
   ========================================================================== */

@media (min-width: 600px) {
  :root { --shell-w: 560px; }
  .shell { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 768px) {
  :root { --shell-w: 720px; }
  .shell { padding: 26px 28px calc(100px + env(safe-area-inset-bottom)); }
  .card { padding: 22px; }
  .card--lg { padding: 26px; }
  .card__title { font-size: 16px; }
  .qstem { font-size: 30px; }
  .qstem--long { font-size: 20px; }
  .stat__num { font-size: 34px; }
  .btn { font-size: 17px; padding: 14px 24px; }
  .tabbar__item { font-size: 12.5px; }
  .tabbar__ico { width: 40px; height: 30px; font-size: 18px; }
  .table { font-size: 14px; }
}

@media (min-width: 1024px) {
  :root { --shell-w: 880px; }
  .shell--wide { max-width: 1200px; }
  .grid2 { gap: 18px; }
}

/* 答题区：竖屏单列 —— 题面卡（题面→输入框）→ 草稿纸 → 键盘 → 确定。
   横屏改成「左答题 / 右草稿」，见本文件末尾的 landspace 断点。 */
.playgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
}
.playgrid > .qcard { margin: 0; min-width: 0; }
.playgrid > .boardcard { margin: 0; min-width: 0; }
.playgrid > .keywrap { margin: 0; min-width: 0; }
.playgrid > .btn { margin: 0; }

/* 平板横屏 / 手机横屏：左侧答题（题面+输入 / 键盘 / 确定），右侧整列草稿纸 */
@media (min-width: 900px) and (orientation: landscape),
       (orientation: landscape) and (max-height: 520px) {
  /* 答题页在横屏铺满窗口：默认 --shell-w 是 880，
     1080 宽的窗口两侧全空着，草稿区被压到 300 多像素，一行竖式都写不下。 */
  .shell.shell--play {
    max-width: min(1600px, calc(100vw - 28px));
    padding-left: 14px;
    padding-right: 14px;
  }
  .playgrid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 52%);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "q     board"
      "keys  board"
      "btn   board";
    gap: 10px 20px;
    align-items: start;
  }
  .playgrid > .qcard { grid-area: q; min-height: 0; }
  /* 右列高度只由左列决定：草稿内容绝对定位，避免「纸变高 → 行变高 → 纸更高」的循环 */
  .playgrid > .boardcard { grid-area: board; align-self: stretch; min-height: 0; position: relative; }
  .playgrid > .keywrap { grid-area: keys; }
  .playgrid > .btn { grid-area: btn; }
  .playgrid .qcard { padding: 16px 20px; }
  .playgrid .qstem { font-size: 34px; }
  .playgrid .qstem--long { font-size: 20px; }
  .playgrid .answer-input { font-size: 32px; padding: 14px; }
  /* 草稿纸占满右列：工具条固定，纸面视口吃掉剩下的高度 */
  .playgrid .boardcard__body { position: absolute; inset: 0; height: auto; min-height: 0; }
  .playgrid .boardcard__slot { flex: 1 1 auto; min-height: 0; }
  .playgrid .boardcard__slot > .board {
    flex: 1 1 auto; min-height: 0; margin-top: 8px;
    display: flex; flex-direction: column;
  }
  .playgrid .board__viewport {
    height: auto; flex: 1 1 auto; min-height: 140px;
  }
  /* 横屏一屏装下：题面下方的说明句让位给「确定」按钮 */
  .playgrid + .hint.center { display: none; }
}

/* 手机横屏（高度只有 360–500）：压缩纵向留白，保证键盘与题面同屏 */
@media (orientation: landscape) and (max-height: 520px) {
  .shell { padding-top: 10px; padding-bottom: 76px; }
  .playhead { margin-bottom: 6px; }
  .qstem { font-size: 22px; }
  .qstem--long { font-size: 16px; }
  .answer-input { font-size: 26px; padding: 10px; margin-top: 8px; }
  .keypad { gap: 6px; margin-top: 8px; }
  .key { height: auto; min-height: 42px; font-size: 17px; }
  .symrow .key--sym { height: auto; min-height: 38px; }
  .playgrid { grid-template-columns: minmax(0, 1fr) minmax(260px, 40%); gap: 8px 14px; }
  .hint.center { display: none; }
  .tabbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .tabbar__item { font-size: 10.5px; }
  .tabbar__ico { height: 22px; font-size: 14px; }
}

/* 超矮横屏（手机横放，高 <430）：进一步压扁左列，保证「题面 + 输入 + 键盘 + 确定」一屏装下。
   草稿纸仍在右列，占满整列，工具条跟着缩小。 */
@media (orientation: landscape) and (max-height: 430px) {
  .shell { padding-bottom: 64px; }
  .playgrid .qcard { padding: 12px 16px; }
  .playgrid .qstem { font-size: 20px; }
  .playgrid .board__tools { padding: 5px 6px; gap: 4px; }
  .playgrid .board__tool { min-height: 30px; padding: 4px 8px; font-size: 11px; }
  .playgrid .board__dot { width: 28px; height: 28px; }
  .playgrid .board__dot-in { width: 15px; height: 15px; }
  .playgrid .board__viewport { min-height: 110px; }
  .playgrid .boardcard__slot > .board { margin-top: 6px; }
  .playgrid .answer-input { font-size: 22px; padding: 6px; margin-top: 6px; }
  .playgrid .keypad .key { height: auto; min-height: 34px; font-size: 14px; }
  .playgrid .symrow .key--sym { height: auto; min-height: 32px; font-size: 13px; }
  .playgrid > .btn { margin-top: 8px; padding: 9px; font-size: 15px; }
  .playhead { margin-bottom: 4px; }
}

/* ==========================================================================
   数学排版（K.math 生成）
   题库是纯文本（x^2、5/9），学生端要看到课本写法：指数上标、分数上下结构。
   尺寸全部用 em，跟着 .qstem 的 26–40px 一起缩放，不在大字号下失衡。
   ========================================================================== */
.frac { display: inline-flex; flex-direction: column; vertical-align: -.42em; text-align: center; margin: 0 .1em; line-height: 1.05; }
.frac__n { border-bottom: 1.5px solid currentColor; padding: 0 .14em; }
.frac__d { padding: 0 .14em; }
sup { font-size: .62em; line-height: 0; vertical-align: super; margin-left: .06em; }
/* 包住分数的括号：普通括号只有一行高，纵向拉伸才兜得住上下结构。
   只用于 K.math 生成的 .paren，不影响正文里的圆括号。 */
.paren {
  display: inline-block;
  transform: scaleY(1.7);
  transform-origin: 50% 52%;
  margin: 0 .04em;
  font-weight: inherit;
}

/* 分数 / 负号符号键：数字键盘解决不了分数答案，单独给一行小键 */
.keywrap { display: block; }
.symrow { display: flex; gap: 8px; margin-top: 14px; }
.symrow .key--sym {
  flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 800; color: var(--ink-2);
  background: rgba(30, 42, 58, .045);
  border-radius: 14px; border: 1.5px solid transparent;
}
.symrow .key--sym:active { background: var(--mint-soft); border-color: var(--mint); }
.symrow .key__label { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.symrow .key__sym { font-size: 18px; font-weight: 800; color: var(--ink); }
.keywrap .keypad { margin-top: 10px; }

/* 触屏上输入框只读：视觉上去掉"可编辑"的暗示 */
.answer-input--ro { caret-color: transparent; }
.answer-input--ro:focus { border-color: rgba(30, 42, 58, .12); box-shadow: none; }