/* ============================================================
 * 知识星球大冒险 —— 样式表
 * 面向小学生的卡通游戏风格
 * ============================================================ */

/* ---------------- 主题变量 ---------------- */
:root {
  --p1: #8b7bf7;
  --p2: #5b8def;
  --p-soft: #efeaff;
  --c1: #8b7bf7;
  --c2: #5b8def;

  --bg1: #eef2ff;
  --bg2: #fdf2f8;
  --ink: #2f2a4a;
  --ink-2: #6b6488;
  --ink-3: #9d97b5;
  --card: #ffffff;
  --line: #ece9fb;

  --gold: #ffb703;
  --green: #22c55e;
  --red: #f43f5e;
  --cyan: #06b6d4;

  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 8px 24px rgba(90, 80, 170, .12);
  --shadow-sm: 0 3px 10px rgba(90, 80, 170, .10);
  --shadow-btn: 0 5px 0 rgba(0, 0, 0, .13);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(170deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg1) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }

/* 背景装饰光斑 */
.blobs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(38px); opacity: .40;
  animation: floaty 14s ease-in-out infinite;
}
.blob.b1 { width: 260px; height: 260px; background: #c7b9ff; top: -70px; left: -70px; }
.blob.b2 { width: 220px; height: 220px; background: #ffc7e6; top: 30%; right: -80px; animation-delay: -4s; }
.blob.b3 { width: 200px; height: 200px; background: #b9e6ff; bottom: -60px; left: 10%; animation-delay: -8s; }
.blob.b4 { width: 180px; height: 180px; background: #ffe7b9; bottom: 20%; right: 12%; animation-delay: -6s; }

@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(18px, -22px) scale(1.08); }
  66% { transform: translate(-16px, 14px) scale(.95); }
}

/* ---------------- 布局骨架 ---------------- */
#app {
  position: relative; z-index: 1;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: transparent;
}

#stage {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 12px;
  scroll-behavior: smooth;
}

.screen { display: none; animation: screenIn .28s ease both; }
.screen.active { display: block; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 顶栏 ---------------- */
#topbar {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  display: flex; align-items: center; gap: 10px;
}

.player-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--card);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  box-shadow: var(--shadow-sm);
  flex: 1 1 auto; min-width: 0;
  border: 2px solid rgba(255, 255, 255, .8);
}
.avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--p1), var(--p2));
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .12);
}
.pinfo { min-width: 0; flex: 1 1 auto; }
.pname {
  font-size: 14px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ptitle { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xpwrap { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.xpbar {
  flex: 1 1 auto; height: 7px; border-radius: 99px;
  background: var(--p-soft); overflow: hidden;
}
.xpbar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  transition: width .5s cubic-bezier(.34, 1.4, .64, 1);
}
.lvbadge {
  font-size: 10px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  padding: 1px 7px; border-radius: 99px;
  flex: 0 0 auto;
}

.coinchip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #fff6dc, #ffe9b0);
  border-radius: 999px; padding: 7px 13px;
  font-weight: 900; font-size: 14px; color: #9a6b00;
  box-shadow: var(--shadow-sm);
  border: 2px solid #fff;
}
.coinchip .ico { font-size: 15px; }

/* ---------------- 底部导航 ---------------- */
#tabbar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + var(--safe-b));
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0; border-radius: 14px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  transition: transform .15s, color .15s, background .15s;
  position: relative;
}
.tab .ti { font-size: 20px; line-height: 1; transition: transform .2s; }
.tab.active { color: var(--p2); background: var(--p-soft); }
.tab.active .ti { transform: translateY(-2px) scale(1.14); }
.tab:active { transform: scale(.94); }
.tab .dot {
  position: absolute; top: 3px; right: 50%; margin-right: -18px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}

/* ---------------- 通用卡片 / 标题 ---------------- */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
  border: 2px solid rgba(255, 255, 255, .9);
}
.sec-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 900; margin: 18px 4px 10px;
}
.sec-title .em { font-size: 19px; }
.sec-title .more { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 700; }

/* ---------------- 欢迎横幅 ---------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin: 6px 0 14px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  color: #fff;
  box-shadow: 0 10px 26px rgba(110, 90, 220, .30);
}
.hero h1 { margin: 0 0 4px; font-size: 19px; font-weight: 900; letter-spacing: .5px; }
.hero p { margin: 0; font-size: 12.5px; opacity: .92; line-height: 1.55; }
.hero .deco {
  position: absolute; right: -6px; bottom: -14px; font-size: 78px; opacity: .22;
  transform: rotate(-12deg); pointer-events: none;
}
.hero .streak {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  background: rgba(255, 255, 255, .22); border-radius: 99px;
  padding: 4px 12px; font-size: 12px; font-weight: 800;
}
.hero .gorow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hero .gobtn {
  background: #fff; color: var(--p2); font-weight: 900; font-size: 13px;
  padding: 9px 18px; border-radius: 99px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .13);
  transition: transform .1s;
}
.hero .gobtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .13); }
.hero .gobtn.ghost { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; border: 2px solid rgba(255, 255, 255, .55); }

/* ---------------- 学科卡片 ---------------- */
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .subjects { grid-template-columns: 1fr; } }

.subject {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: 14px;
  color: #fff; text-align: left;
  box-shadow: 0 8px 20px rgba(80, 70, 160, .18);
  transition: transform .16s cubic-bezier(.34, 1.4, .64, 1);
  min-height: 118px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.subject:active { transform: scale(.96); }
.subject .sico { font-size: 30px; line-height: 1; }
.subject .sname { font-size: 16px; font-weight: 900; margin-top: 8px; }
.subject .sdesc { font-size: 11px; opacity: .9; margin-top: 3px; line-height: 1.45; }
.subject .sbar {
  margin-top: 9px; height: 6px; border-radius: 99px;
  background: rgba(255, 255, 255, .32); overflow: hidden;
}
.subject .sbar > i { display: block; height: 100%; background: #fff; border-radius: 99px; transition: width .6s; }
.subject .sstars {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 800;
  background: rgba(0, 0, 0, .16); padding: 3px 9px; border-radius: 99px;
}
.subject .sdeco {
  position: absolute; right: -10px; bottom: -16px; font-size: 64px; opacity: .16;
  transform: rotate(-10deg); pointer-events: none;
}

/* ---------------- 每日任务 ---------------- */
.task {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; border-bottom: 1px dashed var(--line);
}
.task:last-child { border-bottom: none; }
.task .tico { font-size: 22px; flex: 0 0 auto; width: 28px; text-align: center; }
.task .tbody { flex: 1 1 auto; min-width: 0; }
.task .tname { font-size: 13.5px; font-weight: 800; }
.task .tprog { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.task .tbar { height: 6px; border-radius: 99px; background: var(--p-soft); margin-top: 6px; overflow: hidden; }
.task .tbar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd166, #ff9f1c); transition: width .4s; }
.task .tbtn {
  flex: 0 0 auto; font-size: 12px; font-weight: 900;
  padding: 7px 13px; border-radius: 99px;
  background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .13);
}
.task .tbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .13); }
.task .tbtn.done { background: #e9e7f5; color: var(--ink-3); box-shadow: none; }
.task .tbtn.claim { background: linear-gradient(135deg, #ffc93c, #ff9f1c); color: #6b3d00; animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------------- 年级 / 学期选择器 ---------------- */
.grade-card { padding: 14px 16px; }
.gc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.gc-title { font-size: 14.5px; font-weight: 900; }
.gc-title b { color: var(--p2); }
.gc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px; font-weight: 800; color: var(--ink-2);
  background: #f4f2fb; border-radius: 99px; padding: 8px 14px;
  border: 2px solid transparent;
  transition: transform .12s cubic-bezier(.34,1.5,.64,1), background .15s, color .15s, box-shadow .15s;
}
.chip:active { transform: scale(.93); }
.chip.active {
  background: linear-gradient(135deg, var(--p1), var(--p2));
  color: #fff; box-shadow: 0 3px 10px rgba(90, 80, 170, .28);
}
.chip.all { background: #fff; border-color: var(--line); }
.chip.all.active { background: linear-gradient(135deg, var(--p1), var(--p2)); border-color: transparent; }
.chip.sm { padding: 6px 13px; font-size: 12px; }
.chip.big { padding: 11px 19px; font-size: 14px; }
.chips.terms {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px dashed var(--line); align-items: center;
}
.chip-label { font-size: 12px; color: var(--ink-3); font-weight: 800; }
.modal-chips { justify-content: center; margin-top: 16px; }

.map-switch {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 2px 0 8px; padding-left: 3px;
}

/* 上册 / 下册 / 期末 标签 */
.term-badge {
  display: inline-block; font-size: 10px; font-weight: 900;
  padding: 1.5px 7px; border-radius: 99px; margin-right: 5px;
  vertical-align: 1.5px;
}
.term-badge.tup { background: #e6f0ff; color: #2563eb; }
.term-badge.tdown { background: #e7f9ef; color: #15803d; }
.term-badge.trev { background: #fff2e0; color: #b45309; }
.term-badge.extend { background: linear-gradient(135deg,#fff1d6,#ffe0b2); color: #b45309; }

/* 期末 Boss 关 */
.node.boss {
  background: linear-gradient(145deg, #fff6d8, #ffe1a0);
  box-shadow: 0 6px 0 rgba(200, 150, 0, .30), 0 8px 20px rgba(220, 160, 0, .28);
  border-color: #ffe9a8;
}
.node.boss.locked { background: linear-gradient(145deg, #f2f1f7, #e6e4ef); box-shadow: 0 6px 0 rgba(140, 135, 165, .18); border-color: #fff; }
.node.boss::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px dashed rgba(255, 183, 3, .55);
}
.node.boss.locked::after { display: none; }

/* 学科卡片底部小字 / 未开课状态 */
.sfoot { font-size: 10.5px; font-weight: 800; opacity: .88; margin-top: 6px; }
.subject { min-height: 128px; }
.subject.locked-subject .sico { filter: grayscale(.5); opacity: .8; }

/* ---------------- 关卡地图 ---------------- */
.maphead {
  border-radius: var(--r-lg);
  padding: 16px 18px; margin: 6px 0 16px;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(80, 70, 160, .22);
}
.maphead h2 { margin: 0; font-size: 20px; font-weight: 900; }
.maphead p { margin: 5px 0 0; font-size: 12px; opacity: .92; }
.maphead .mdeco { position: absolute; right: -4px; top: -8px; font-size: 76px; opacity: .22; }
.backbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; color: var(--ink-2);
  background: var(--card); padding: 8px 15px; border-radius: 99px;
  box-shadow: var(--shadow-sm); margin: 4px 0 6px;
}
.backbtn:active { transform: scale(.95); }

.gradegroup { margin-bottom: 8px; }
.gradelabel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 900; color: var(--ink-2);
  background: var(--card); padding: 5px 14px; border-radius: 99px;
  box-shadow: var(--shadow-sm); margin: 14px 0 6px 4px;
}
.gradelabel .gl-bar { font-size: 11px; color: var(--ink-3); font-weight: 700; }

/* 年级主题：拼音启蒙 · 汉字乐园 */
.gradetheme {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  margin: 0 0 2px 6px; line-height: 1.5;
}

/* 关卡分段小标题：上册·课本基础 / 上册·拓展提升 / 期末冲刺 */
.chaphead {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 900; letter-spacing: .5px;
  color: var(--p2); margin: 14px 0 4px 6px;
}
.chaphead::after {
  content: ''; flex: 1 1 auto; height: 0;
  border-top: 1.5px dashed #ded9f0;
}

.path { position: relative; padding: 4px 0 10px; }
.node-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; position: relative;
}
.node-row.right { flex-direction: row-reverse; }
.node-row.right .node-info { text-align: right; }

.node {
  position: relative; flex: 0 0 auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  background: linear-gradient(145deg, #fff, #f1eeff);
  box-shadow: 0 6px 0 rgba(120, 105, 200, .18), 0 8px 18px rgba(90, 80, 170, .16);
  border: 3px solid #fff;
  transition: transform .16s cubic-bezier(.34, 1.5, .64, 1);
}
.node:active { transform: scale(.93); }
.node.cleared { background: linear-gradient(145deg, #fff8e1, #ffe9a8); }
.node.perfect { background: linear-gradient(145deg, #fff3c4, #ffd76e); box-shadow: 0 6px 0 rgba(200, 150, 0, .28), 0 8px 20px rgba(220, 160, 0, .28); }
.node.locked { background: linear-gradient(145deg, #f2f1f7, #e6e4ef); color: #b6b1c9; box-shadow: 0 6px 0 rgba(140, 135, 165, .18); }
.node .lock { font-size: 24px; }
.node .badge-lv {
  position: absolute; top: -6px; left: -6px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 99px; background: linear-gradient(135deg, var(--p1), var(--p2));
  color: #fff; font-size: 10.5px; font-weight: 900; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.node.current { animation: nodepulse 1.6s ease-in-out infinite; }
@keyframes nodepulse {
  0%, 100% { box-shadow: 0 6px 0 rgba(120, 105, 200, .18), 0 0 0 0 rgba(139, 123, 247, .55); }
  50% { box-shadow: 0 6px 0 rgba(120, 105, 200, .18), 0 0 0 12px rgba(139, 123, 247, 0); }
}

.node-info { flex: 1 1 auto; min-width: 0; }
.node-info .nname { font-size: 14.5px; font-weight: 900; }
.node-info .ntip { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.node-info .nstars { font-size: 14px; letter-spacing: 1px; margin-top: 4px; }
.star-on { color: var(--gold); }
.star-off { color: #ddd8ec; }

.connector {
  width: 3px; height: 16px; margin: 0 0 0 33px;
  border-left: 3px dashed #d8d3ee;
}
.node-row.right + .connector { margin-left: auto; margin-right: 33px; }

/* ---------------- 答题界面 ---------------- */
.quiz-top { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.icon-btn {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; background: var(--card);
  display: grid; place-items: center; font-size: 17px;
  box-shadow: var(--shadow-sm); font-weight: 800; color: var(--ink-2);
}
.icon-btn:active { transform: scale(.92); }

.qbar { flex: 1 1 auto; height: 12px; border-radius: 99px; background: var(--card); box-shadow: inset 0 2px 4px rgba(90, 80, 170, .10); overflow: hidden; }
.qbar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--p1), var(--p2)); transition: width .35s ease; }

.hearts { flex: 0 0 auto; display: flex; gap: 2px; font-size: 17px; }
.hearts .h { transition: transform .3s, opacity .3s, filter .3s; }
.hearts .h.off { filter: grayscale(1); opacity: .32; transform: scale(.8); }
.hearts .h.breaking { animation: heartbreak .55s ease; }
@keyframes heartbreak {
  0% { transform: scale(1.5); }
  40% { transform: scale(.6) rotate(-18deg); }
  100% { transform: scale(.8); }
}

.quiz-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 800; color: var(--ink-3);
  margin: 0 4px 10px;
}
.combo-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #ff9a3c, #ff5f6d); color: #fff;
  padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 900;
  animation: pop .35s cubic-bezier(.34, 1.6, .64, 1);
}
@keyframes pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}

.qcard {
  background: var(--card); border-radius: var(--r-lg);
  padding: 20px 18px; box-shadow: var(--shadow);
  border: 2px solid rgba(255, 255, 255, .9);
  margin-bottom: 14px;
}
.qtype {
  display: inline-block; font-size: 11px; font-weight: 900;
  padding: 3px 10px; border-radius: 99px; margin-bottom: 10px;
}
.qtype.choice { background: #e6f0ff; color: #2563eb; }
.qtype.input { background: #e7f9ef; color: #15803d; }
.qtype.judge { background: #fff2e0; color: #b45309; }

.qtext {
  font-size: 19px; font-weight: 800; line-height: 1.65;
  word-break: break-word; white-space: pre-wrap;
}
.qtext .blank { color: var(--p2); font-weight: 900; }

/* 题干/选项/解析里的英文片段。
   中文字体会把 ’ “ ” 这类标点按全角宽度排版，It’s 会变成「It’ s」。
   这里显式指定拉丁字体，让西文标点恢复正常的窄宽度。
   只影响被包起来的英文片段，中文标点不受影响。 */
.en {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans",
               "Noto Sans", sans-serif;
}

.qspeak {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; font-size: 13px; font-weight: 800;
  background: var(--p-soft); color: var(--p2);
  padding: 7px 14px; border-radius: 99px;
}
.qspeak:active { transform: scale(.95); }

/* 选项 */
.options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2.5px solid var(--line);
  border-radius: var(--r-md); padding: 14px 15px;
  font-size: 16px; font-weight: 700; text-align: left;
  box-shadow: 0 3px 0 rgba(120, 105, 200, .10);
  transition: transform .12s, border-color .15s, background .15s;
  line-height: 1.5;
}
.opt:active { transform: scale(.98); }
.opt .key {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--p-soft); color: var(--p2);
  font-size: 13px; font-weight: 900;
}
.opt.correct { border-color: var(--green); background: #eafaf0; }
.opt.correct .key { background: var(--green); color: #fff; }
.opt.wrong { border-color: var(--red); background: #ffedf0; animation: shake .42s; }
.opt.wrong .key { background: var(--red); color: #fff; }
.opt[disabled] { cursor: default; }
.opt.dim { opacity: .5; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* 填空 */
.input-area { margin-top: 14px; }
.answerbox {
  display: flex; align-items: center; gap: 10px;
  background: #faf9ff; border: 2.5px dashed #d8d3ee;
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 22px; font-weight: 900; letter-spacing: 1px;
  min-height: 60px; color: var(--p2);
  word-break: break-all;
}
.answerbox.empty { color: var(--ink-3); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.answerbox .caret { display: inline-block; width: 2px; height: 22px; background: var(--p2); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.keypad .k {
  background: var(--card); border-radius: var(--r-sm);
  padding: 15px 0; font-size: 20px; font-weight: 900;
  box-shadow: 0 4px 0 rgba(120, 105, 200, .16);
  transition: transform .08s;
}
.keypad .k:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(120, 105, 200, .16); }
.keypad .k.wide { grid-column: span 2; }
.keypad .k.go { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; box-shadow: 0 4px 0 rgba(60, 50, 130, .35); }
.keypad .k.del { background: #fff0f3; color: var(--red); }

.textinput {
  width: 100%; font-size: 18px; font-weight: 800;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 2.5px solid var(--line); background: #faf9ff;
  color: var(--ink); outline: none;
}
.textinput:focus { border-color: var(--p1); background: #fff; }

/* 输入框没填时的就地提示：直接显示在输入框下面，
   比顶部的 toast 离眼睛近得多，也不会被弹窗遮罩糊掉 */
.textinput.bad {
  border-color: var(--red);
  background: #fff5f7;
  animation: fieldShake .4s ease;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.field-err {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 9px; font-size: 13px; font-weight: 800;
  color: var(--red);
  animation: fieldErrIn .22s ease both;
}
@keyframes fieldErrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.bigbtn {
  display: block; width: 100%; margin-top: 12px;
  padding: 16px; border-radius: var(--r-md);
  font-size: 17px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  box-shadow: 0 5px 0 rgba(60, 50, 130, .32);
  transition: transform .1s;
}
.bigbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(60, 50, 130, .32); }
.bigbtn.ghost { background: var(--card); color: var(--p2); box-shadow: 0 5px 0 rgba(120, 105, 200, .18); }
.bigbtn.gold { background: linear-gradient(135deg, #ffc93c, #ff9f1c); color: #6b3d00; box-shadow: 0 5px 0 rgba(180, 110, 0, .35); }
.bigbtn[disabled] { opacity: .45; box-shadow: none; }

/* 反馈条 */
.feedback {
  border-radius: var(--r-lg); padding: 15px 17px; margin-bottom: 14px;
  animation: fbIn .3s cubic-bezier(.34, 1.5, .64, 1) both;
  border: 2.5px solid;
}
.feedback.ok { background: #eafaf0; border-color: #a8e6c1; }
.feedback.no { background: #fff0f3; border-color: #ffc4cf; }
@keyframes fbIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.feedback .fhead { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; }
.feedback.ok .fhead { color: #15803d; }
.feedback.no .fhead { color: #be123c; }
.feedback .fbody { font-size: 14px; line-height: 1.65; margin-top: 8px; color: var(--ink-2); }
.feedback .fbody b { color: var(--ink); }
.feedback .fans {
  display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 900;
  background: #fff; padding: 5px 13px; border-radius: 99px; color: var(--p2);
}

/* ---------------- 结算 ---------------- */
.result-wrap { text-align: center; padding: 8px 0 20px; }
.stars-big { display: flex; justify-content: center; gap: 10px; margin: 16px 0 6px; }
.stars-big .s {
  font-size: 46px; line-height: 1;
  opacity: 0; transform: scale(.2) rotate(-40deg);
  animation: starPop .55s cubic-bezier(.34, 1.7, .64, 1) forwards;
}
.stars-big .s.off { filter: grayscale(1); opacity: .28; animation: none; transform: none; }
@keyframes starPop {
  0% { opacity: 0; transform: scale(.2) rotate(-40deg); }
  70% { opacity: 1; transform: scale(1.35) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.result-title { font-size: 24px; font-weight: 900; margin: 6px 0 4px; }
.result-sub { font-size: 13.5px; color: var(--ink-3); font-weight: 700; }

.score-ring {
  width: 130px; height: 130px; margin: 18px auto 6px; position: relative;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--p1) calc(var(--p, 0) * 1%), #eceaf7 0);
}
.score-ring::before {
  content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--card);
}
.score-ring .sv { position: relative; font-size: 30px; font-weight: 900; color: var(--p2); }
.score-ring .sl { position: relative; font-size: 11px; color: var(--ink-3); font-weight: 700; }

.reward-row { display: flex; justify-content: center; gap: 12px; margin: 16px 0 4px; flex-wrap: wrap; }
.reward {
  background: var(--card); border-radius: var(--r-md); padding: 12px 18px;
  box-shadow: var(--shadow-sm); min-width: 92px;
}
.reward .rv { font-size: 21px; font-weight: 900; }
.reward .rl { font-size: 11px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.reward.coin .rv { color: #d99500; }
.reward.xp .rv { color: var(--p2); }
.reward.acc .rv { color: var(--green); }

.banner-lvup {
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  color: #6b3d00; font-weight: 900; font-size: 14px;
  border-radius: var(--r-md); padding: 12px; margin: 14px 0;
  animation: pulse 1.4s infinite;
}

.review-list { text-align: left; margin-top: 8px; }
.review-item {
  background: var(--card); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 9px;
  box-shadow: var(--shadow-sm); border-left: 4px solid var(--red);
}
.review-item.ok { border-left-color: var(--green); }
.review-item .rq { font-size: 13.5px; font-weight: 800; line-height: 1.55; }
.review-item .ra { font-size: 12.5px; margin-top: 6px; color: var(--ink-2); line-height: 1.6; }
.review-item .ra .bad { color: var(--red); font-weight: 800; }
.review-item .ra .good { color: var(--green); font-weight: 800; }
.review-item .rex { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }

.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.result-actions .bigbtn { margin-top: 0; }
.result-actions .full { grid-column: span 2; }

/* ---------------- 成就 ---------------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 11px; }
.ach {
  background: var(--card); border-radius: var(--r-md);
  padding: 14px 9px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.ach:active { transform: scale(.96); }
.ach .aico { font-size: 32px; line-height: 1; filter: grayscale(1); opacity: .35; }
.ach.got { background: linear-gradient(160deg, #fff8e6, #fff2cc); box-shadow: 0 6px 16px rgba(220, 170, 40, .22); }
.ach.got .aico { filter: none; opacity: 1; }
.ach .aname { font-size: 12.5px; font-weight: 900; margin-top: 7px; }
.ach .adesc { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.ach .adate { font-size: 10px; color: var(--gold); font-weight: 800; margin-top: 4px; }

/* ---------------- 商店 ---------------- */
.shop-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.shop-tab {
  flex: 1 1 0; padding: 10px 0; border-radius: 99px;
  background: var(--card); font-size: 13px; font-weight: 900; color: var(--ink-3);
  box-shadow: var(--shadow-sm);
}
.shop-tab.active { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 11px; }
.shop-item {
  background: var(--card); border-radius: var(--r-md);
  padding: 14px 10px; text-align: center;
  box-shadow: var(--shadow-sm); position: relative;
  border: 2.5px solid transparent;
  transition: transform .15s;
}
.shop-item:active { transform: scale(.96); }
.shop-item.equipped { border-color: var(--green); background: #f2fdf6; }
.shop-item.owned { opacity: .95; }
.shop-item .si { font-size: 34px; line-height: 1; }
.shop-item .stitle { font-size: 15px; font-weight: 900; margin-top: 6px; }
.shop-item .sname { font-size: 12.5px; font-weight: 800; margin-top: 6px; }
.shop-item .price {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 900; color: #d99500;
  background: #fff6dc; padding: 4px 11px; border-radius: 99px; margin-top: 8px;
}
.shop-item .price.free { color: #15803d; background: #e7f9ef; }
.shop-item .tag {
  position: absolute; top: 7px; right: 7px;
  font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 99px;
  background: var(--green); color: #fff;
}
.theme-swatch { display: flex; height: 34px; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.theme-swatch i { flex: 1; }

/* ---------------- 我的 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: var(--card); border-radius: var(--r-md);
  padding: 13px 8px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat .sv { font-size: 20px; font-weight: 900; color: var(--p2); }
.stat .sl { font-size: 10.5px; color: var(--ink-3); font-weight: 700; margin-top: 3px; }

.setting-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; border-bottom: 1px dashed var(--line);
  font-size: 14px; font-weight: 800;
}
.setting-row:last-child, .card .setting-row:last-of-type { border-bottom: none; }
.setting-row .sdesc { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.setting-row .grow { flex: 1 1 auto; }
.setting-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.sr-line { display: flex; align-items: center; gap: 10px; }

/* 音色下拉 */
.select {
  width: 100%;
  font-size: 13.5px; font-weight: 700;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 2.5px solid var(--line); background: #faf9ff;
  color: var(--ink); outline: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.select:focus { border-color: var(--p1); background-color: #fff; }

/* 当前正在使用的音色 */
.voice-now {
  margin: 12px 0 4px; padding: 13px 14px;
  background: linear-gradient(135deg, #eef4ff, #f6f2ff);
  border: 2px solid #dfe6ff; border-radius: var(--r-md);
}
.voice-now.bad { background: #fff8e6; border-color: #ffe1a0; }
/* 用上神经网络语音时的"好"状态：绿色，一眼看出跟机械音色的区别 */
.voice-now.good { background: linear-gradient(135deg, #eafaef, #f2fdf6); border-color: #a8e6bd; }
.voice-now.good .vn-name { color: #15803d; }
.vn-row { display: flex; align-items: flex-start; gap: 11px; }
.vn-ico { font-size: 24px; line-height: 1.1; flex: 0 0 auto; }
.vn-body { min-width: 0; flex: 1 1 auto; }
.vn-name {
  font-size: 14.5px; font-weight: 900; word-break: break-word;
  color: var(--p2);
}
.voice-now.bad .vn-name { color: #b45309; }
.vn-meta {
  font-size: 11.5px; color: var(--ink-3); font-weight: 700;
  margin-top: 4px; line-height: 1.55; word-break: break-word;
}
.vn-hint {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #ffd88a;
  font-size: 12.5px; line-height: 1.7; color: #8a5b00;
}
.vn-hint b { color: #6b3d00; }
.vn-hint.good { border-top-color: #a8e6bd; color: #15803d; }
.vn-hint.good b { color: #14532d; }
.vn-hint code, .voice-warn code {
  background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px;
  font-size: 11.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.voice-warn {
  margin: 10px 0 4px;
  background: #fff8e6; border: 2px solid #ffe1a0;
  border-radius: var(--r-sm); padding: 11px 13px;
  font-size: 12.5px; line-height: 1.65; color: #8a5b00;
}
.voice-warn b { color: #6b3d00; }

/* 答题页的朗读按钮 */
.speak-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.speak-row .qspeak { margin-top: 0; }
.qspeak.slow { background: #fff4e6; color: #b45309; }
.switch {
  width: 50px; height: 29px; border-radius: 99px; background: #ddd8ec;
  position: relative; transition: background .22s; flex: 0 0 auto;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .22s;
}
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(21px); }
/* 设置开着、但依赖的服务现在用不了（例如判题服务器没连上）：
   保持"开"的位置，只把颜色变淡，表示"开着但暂时不生效" */
.switch.on.pending { background: #a8d9bd; }
.switch.on.pending::after { opacity: .72; }

/* AI 判题页：把"程序到底探测到了什么"直接摊开写 */
.gprobe {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: #f6f4ff; border: 1px dashed #ded9f0;
  font-size: 11.5px; line-height: 1.75; color: var(--ink-2); word-break: break-all;
}
.gprobe code { background: #ece8ff; padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* 热力图 */
.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: #eceaf7; display: block; }
.heat i.on { background: var(--p1); opacity: .75; }
.heat i.today { background: var(--gold); opacity: 1; }

/* 进度条通用 */
.bar-mini { height: 8px; border-radius: 99px; background: var(--p-soft); overflow: hidden; }
.bar-mini > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--p1), var(--p2)); transition: width .5s; }

/* 空状态 */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty .eico { font-size: 56px; opacity: .45; }
.empty .etxt { font-size: 14px; font-weight: 800; margin-top: 14px; color: var(--ink-2); }
.empty .esub { font-size: 12px; margin-top: 6px; line-height: 1.6; }

/* ---------------- 弹层 ---------------- */
/* 层级必须高于 #modal-layer(95)：提示条如果压在弹窗遮罩底下，
   会连带被那层 rgba(40,34,70,.5) + blur 一起糊掉，弹窗里弹出的
   "名字不能为空" 之类就完全看不清了。 */
#toast-layer {
  position: fixed; left: 0; right: 0; top: 12px; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(47, 42, 74, .94); color: #fff;
  font-size: 13.5px; font-weight: 800;
  padding: 11px 20px; border-radius: 99px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  animation: toastIn .3s cubic-bezier(.34, 1.5, .64, 1) both;
  max-width: 88vw; text-align: center;
}
.toast.ok { background: linear-gradient(135deg, #22c55e, #16a34a); }
.toast.no { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.toast.gold { background: linear-gradient(135deg, #ffc93c, #ff9f1c); color: #6b3d00; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(.9); }
  to { opacity: 1; transform: none; }
}
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px) scale(.92); } }

#modal-layer {
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: center; justify-content: center;
  background: rgba(40, 34, 70, .5); backdrop-filter: blur(3px);
  padding: 22px;
}
#modal-layer.show { display: flex; animation: screenIn .22s ease both; }
.modal {
  background: var(--card); border-radius: 26px;
  padding: 24px 20px; max-width: 400px; width: 100%;
  text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  animation: modalIn .34s cubic-bezier(.34, 1.5, .64, 1) both;
  max-height: 86vh; overflow-y: auto;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to { opacity: 1; transform: none; }
}
.modal .mico { font-size: 52px; line-height: 1; }
.modal h3 { margin: 12px 0 6px; font-size: 19px; font-weight: 900; }
.modal p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.modal .macts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.modal .macts .bigbtn { margin-top: 0; }
.modal .macts .full { grid-column: span 2; }
.ach-poplist { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.ach-pop {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: linear-gradient(135deg, #fff8e6, #fff2cc);
  border-radius: var(--r-md); padding: 11px 14px;
}
.ach-pop .apico { font-size: 28px; }
.ach-pop .apname { font-size: 14px; font-weight: 900; }
.ach-pop .apdesc { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 彩带 */
.confetti {
  position: fixed; top: -12px; z-index: 80;
  width: 9px; height: 14px; border-radius: 2px;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(102vh) rotate(720deg); opacity: .85; }
}

/* 飘分 */
.floatscore {
  position: fixed; z-index: 85; font-size: 22px; font-weight: 900;
  pointer-events: none; animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  25% { opacity: 1; transform: translateY(-14px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}

/* 滚动条 */
#stage::-webkit-scrollbar { width: 5px; }
#stage::-webkit-scrollbar-thumb { background: #d8d3ee; border-radius: 99px; }
#stage::-webkit-scrollbar-track { background: transparent; }

/* 主题皮肤 */
body[data-theme="ocean"] { --p1: #38bdf8; --p2: #2563eb; --p-soft: #e0f2fe; --bg1: #eff9ff; --bg2: #eef6ff; }
body[data-theme="forest"] { --p1: #4ade80; --p2: #16a34a; --p-soft: #dcfce7; --bg1: #f0fdf4; --bg2: #ecfdf5; }
body[data-theme="sunset"] { --p1: #fb923c; --p2: #f43f5e; --p-soft: #ffe8d9; --bg1: #fff7ed; --bg2: #fff1f2; }
body[data-theme="candy"] { --p1: #f472b6; --p2: #a855f7; --p-soft: #fce7f3; --bg1: #fdf2f8; --bg2: #faf5ff; }
body[data-theme="night"] { --p1: #818cf8; --p2: #4f46e5; --p-soft: #e0e7ff; --bg1: #eef2ff; --bg2: #e8eaff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- 家庭成员档案 ---------------- */
.fam-list { display: flex; flex-direction: column; gap: 10px; }
.fam {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--r-md);
  background: #faf9ff; border: 2.5px solid transparent;
  transition: border-color .15s, background .15s;
}
.fam.active { background: linear-gradient(135deg, #f0ecff, #eef4ff); border-color: var(--p1); }
.fam-avatar {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(145deg, var(--p1), var(--p2));
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .12);
}
.fam-body { flex: 1 1 auto; min-width: 0; }
.fam-name {
  font-size: 14.5px; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fam-badge {
  font-size: 10px; font-weight: 900; color: #fff;
  background: var(--green); padding: 1.5px 7px; border-radius: 99px;
  vertical-align: 1.5px;
}
.fam-meta {
  font-size: 11px; color: var(--ink-3); font-weight: 700;
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fam-btn {
  flex: 0 0 auto; font-size: 12px; font-weight: 900;
  padding: 7px 13px; border-radius: 99px;
  background: #efeaf9; color: var(--ink-2);
}
.fam-btn.go { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; }
.fam-btn:active { transform: scale(.94); }
.fam-del {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: #fff0f3; color: var(--red); font-size: 13px; font-weight: 900;
  display: grid; place-items: center;
}
.fam-del:active { transform: scale(.9); }

/* ---------------- AI 判题 ---------------- */
.grading-card {
  text-align: center; padding: 26px 18px;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow); border: 2px solid rgba(255,255,255,.9);
}
.gspin {
  font-size: 44px; line-height: 1;
  animation: gspinPulse 1.1s ease-in-out infinite;
}
@keyframes gspinPulse {
  0%, 100% { transform: scale(1) rotate(-6deg); opacity: .85; }
  50% { transform: scale(1.18) rotate(6deg); opacity: 1; }
}
.gtext { font-size: 15.5px; font-weight: 900; margin-top: 12px; }
.gsub { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }

.aicomment {
  background: linear-gradient(135deg, #eef4ff, #f3eeff);
  border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 13px; font-weight: 700; color: var(--p2);
  margin-bottom: 9px; line-height: 1.6;
}

/* 判题状态行 */
.gstatus {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800;
  padding: 11px 2px; border-bottom: 1px dashed var(--line);
}
.gdot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink-3);
}
.gstatus.on { color: #15803d; }
.gstatus.on .gdot { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
.gstatus.warn { color: #b45309; }
.gstatus.warn .gdot { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,183,3,.18); }
.gstatus.off { color: var(--ink-3); }
.gstatus.wait .gdot { background: var(--p1); animation: pulse 1.2s infinite; }

.gdesc {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
  padding: 10px 2px 2px;
}
.gdesc b { color: var(--ink-2); }

.voice-warn code {
  display: inline-block;
  background: rgba(0,0,0,.06); border-radius: 5px;
  padding: 1px 6px; margin: 2px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; word-break: break-all;
}

/* ---------------- AI 加练入口 ---------------- */
.ai-entry {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; margin-bottom: 14px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #6d5ef0, #3f8ef7);
  color: #fff; box-shadow: 0 8px 22px rgba(80, 70, 200, .28);
  transition: transform .15s cubic-bezier(.34,1.4,.64,1);
}
.ai-entry:active { transform: scale(.97); }
.ai-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.ai-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ai-title { font-size: 16px; font-weight: 900; }
.ai-sub { font-size: 11.5px; opacity: .9; margin-top: 3px; line-height: 1.45; }
.ai-go { font-size: 22px; opacity: .8; flex: 0 0 auto; }

/* ---------------- 题型 / 难度 / 能力 标签 ---------------- */
.qmeta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.qmeta-row .qtype { margin-bottom: 0; }
.qtype.multi { background: #f3e8ff; color: #7c3aed; }
.qtype.order { background: #e0f7fa; color: #0e7490; }
.tier-badge, .skill-badge {
  font-size: 10.5px; font-weight: 900; padding: 3px 9px; border-radius: 99px;
}
.tier-badge.base { background: #eef2ff; color: #4f46e5; }
.tier-badge.extend { background: linear-gradient(135deg, #fff1d6, #ffe0b2); color: #b45309; }
.skill-badge { background: #f1f0f7; color: var(--ink-3); }

/* ---------------- 多选题 ---------------- */
.opt.multi .key.box {
  border-radius: 7px; background: #fff; border: 2.5px solid var(--line);
  color: transparent; font-size: 14px;
}
.opt.multi.picked { border-color: var(--p1); background: #f5f2ff; }
.opt.multi.picked .key.box { background: var(--p1); border-color: var(--p1); color: #fff; }
.pick-hint { font-size: 11.5px; color: var(--ink-3); text-align: center; margin: 12px 0 8px; }

/* ---------------- 排序题 ---------------- */
.order-wrap { margin-top: 4px; }
.order-slots {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 62px; padding: 12px 13px; border-radius: var(--r-md);
  background: #faf9ff; border: 2.5px dashed #d8d3ee;
}
.order-slots.empty { justify-content: center; }
.order-hint { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.order-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 800; color: var(--ink);
  background: var(--card); border: 2.5px solid var(--line);
  border-radius: 99px; padding: 10px 16px;
  box-shadow: 0 3px 0 rgba(120,105,200,.10);
  transition: transform .12s, border-color .15s, background .15s;
}
.order-chip:active { transform: scale(.95); }
.order-chip b {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--p1); color: #fff; font-size: 11px;
}
.order-chip.placed { background: linear-gradient(135deg,#f0ecff,#eef4ff); border-color: var(--p1); }
.order-chip.used { opacity: .35; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.order-actions .bigbtn { margin-top: 0; }

/* ---------------- 能力条 ---------------- */
.skill-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.skill-name { font-size: 12.5px; font-weight: 900; width: 42px; flex: 0 0 auto; }
.skill-track {
  flex: 1 1 auto; height: 12px; border-radius: 99px;
  background: var(--p-soft); overflow: hidden;
}
.skill-track > i {
  display: block; height: 100%; border-radius: 99px;
  transition: width .6s cubic-bezier(.34,1.4,.64,1);
}
.skill-row .skill-pct {
  font-size: 11.5px; font-weight: 900; color: var(--ink-2);
  width: 62px; text-align: right; flex: 0 0 auto;
}

/* ---------------- 题库总览 ---------------- */
.bk-stat-row { display: flex; gap: 8px; }
.bk-stat {
  flex: 1 1 0; text-align: center;
  background: #faf9ff; border-radius: var(--r-sm); padding: 10px 6px;
}
.bk-stat .bsv { font-size: 20px; font-weight: 900; color: var(--p2); }
.bk-stat .bsl { font-size: 10.5px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }

.bk-level-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-level-head b { font-size: 15px; font-weight: 900; }
.bk-pool {
  font-size: 10.5px; font-weight: 800; color: var(--ink-3);
  background: #f1f0f7; padding: 3px 9px; border-radius: 99px;
}
.bk-stars { margin-left: auto; font-size: 13px; letter-spacing: 1px; }

.bk-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bk-q {
  background: #faf9ff; border-radius: var(--r-sm);
  border: 2px solid var(--line); overflow: hidden;
}
.bk-q[open] { border-color: var(--p1); background: #fff; }
.bk-q > summary {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px; cursor: pointer; list-style: none;
}
.bk-q > summary::-webkit-details-marker { display: none; }
.bk-idx {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--p-soft); color: var(--p2);
  font-size: 11px; font-weight: 900; display: grid; place-items: center;
  margin-top: 1px;
}
.bk-main { flex: 1 1 auto; min-width: 0; }
.bk-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.bk-text { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.bk-caret { flex: 0 0 auto; color: var(--ink-3); font-size: 13px; transition: transform .2s; }
.bk-q[open] .bk-caret { transform: rotate(180deg); }
.bk-body { padding: 0 12px 12px 43px; }
.bk-opts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bk-opt {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  padding: 6px 10px; border-radius: 8px; background: #f4f2fb;
}
.bk-opt.right { background: #eafaf0; color: #15803d; }
.bk-explain { font-size: 12px; color: var(--ink-3); line-height: 1.65; }

/* ---------------- 错题本按学科分组 ---------------- */
.wrong-group { margin-bottom: 18px; }
.wrong-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: var(--r-md) var(--r-md) 0 0;
  color: #fff; font-weight: 900;
  box-shadow: 0 4px 12px rgba(80, 70, 160, .18);
}
.wrong-head .wh-ico { font-size: 20px; line-height: 1; }
.wrong-head .wh-name { font-size: 15px; flex: 1 1 auto; }
.wrong-head .wh-count {
  font-size: 11.5px; background: rgba(255,255,255,.26);
  padding: 3px 11px; border-radius: 99px;
}
.wrong-group .review-item:first-of-type { border-radius: 0; margin-top: 0; }

/* ---------------- 新版本提示条 ---------------- */
#update-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, #ffc93c, #ff9f1c);
  color: #6b3d00;
  box-shadow: 0 -6px 22px rgba(180, 110, 0, .28);
  animation: bannerUp .35s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes bannerUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}
#update-banner .ub-ico { font-size: 24px; flex: 0 0 auto; }
#update-banner .ub-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#update-banner .ub-body b { font-size: 14px; font-weight: 900; }
#update-banner .ub-sub { font-size: 11.5px; margin-top: 2px; line-height: 1.5; opacity: .9; }
#update-banner .ub-btn {
  flex: 0 0 auto;
  background: #6b3d00; color: #ffd76e;
  font-size: 13px; font-weight: 900;
  padding: 9px 16px; border-radius: 99px;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
#update-banner .ub-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------------- 范围提示条 ---------------- */
.scope-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(135deg, #eef4ff, #f6f2ff);
  border: 2px solid #dfe6ff; border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 14px;
}
.scope-hint .sh-ico { font-size: 18px; flex: 0 0 auto; line-height: 1.3; }
.scope-hint .sh-body {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; line-height: 1.7; color: var(--ink-2);
}
.scope-hint .sh-body b { color: var(--p2); font-weight: 900; }
.scope-hint .sh-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.scope-hint .sh-btn {
  font-size: 11.5px; font-weight: 900; white-space: nowrap;
  padding: 6px 12px; border-radius: 99px;
  background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff;
  box-shadow: 0 2px 0 rgba(60, 50, 130, .28);
}
.scope-hint .sh-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------------- 使用统计：同意提示条 ---------------- */
/* 做成底部小条而不是弹窗：小学生家长看到全屏同意框大概率直接关掉。
   它是 fixed 定位，不占页面流，不挡操作。 */
.consent-bar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .97);
  border: 2px solid #ddd8ee;
  box-shadow: 0 10px 30px rgba(60, 50, 110, .18);
  backdrop-filter: blur(8px);
  animation: consentIn .28s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes consentIn { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.consent-bar .cb-ico { font-size: 20px; flex: 0 0 auto; }
.consent-bar .cb-body { flex: 1 1 260px; min-width: 0; }
.consent-bar .cb-title { font-size: 13px; font-weight: 900; }
.consent-bar .cb-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 3px; }
.consent-bar .cb-desc b { color: var(--p2); }
.consent-bar .cb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
  background: #f1eefb; color: var(--ink-2); border: none;
}
.cb-btn:active { transform: scale(.95); }
.cb-btn.primary { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; }
.cb-btn.link { background: transparent; color: var(--ink-3); text-decoration: underline; padding: 8px 6px; }

/* 隐私说明页 */
.pv-h {
  font-size: 13px; font-weight: 900; color: var(--p2);
  margin: 16px 0 6px;
}
.pv-ul { margin: 0 0 4px; padding-left: 20px; }
.pv-ul li { margin: 5px 0; }
.pv-ul code, .card code {
  background: #f1eefb; padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}