/* ===========================================================
   三上数学 · 动画闯关  样式表
   设计目标：大字号、大按钮、圆角、护眼、断网可用、手机/平板/电脑通用
   =========================================================== */

:root{
  --blue:#3d7eff;
  --blue-d:#2a63d6;
  --blue-l:#e8f0ff;
  --orange:#ffab2e;
  --orange-l:#fff4e2;
  --green:#2fc46b;
  --green-l:#e6f9ee;
  --red:#ff6b6b;
  --red-l:#ffecec;
  --purple:#8c6cff;
  --purple-l:#f0ecff;
  --ink:#26334d;
  --ink-2:#5b6b86;
  --ink-3:#93a1b8;
  --line:#e3e9f3;
  --paper:#ffffff;
  --bg1:#eef4ff;
  --bg2:#fff7ec;
  --shadow:0 10px 30px rgba(45,74,130,.10);
  --shadow-s:0 4px 14px rgba(45,74,130,.08);
  --r:24px;
  --r-s:16px;
  --r-pill:999px;
  --safe: env(safe-area-inset-bottom, 0px);
}

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

html,body{ margin:0; padding:0; }

body{
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
  background:
    radial-gradient(1200px 600px at 12% -10%, #dfeaff 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #ffeccd 0%, transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 70%);
  background-attachment: fixed;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}

button{ font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:var(--blue); text-decoration:none; }

/* ---------- 布局 ---------- */
.app{ max-width:1080px; margin:0 auto; padding:14px 16px calc(28px + var(--safe)); }

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:10px 4px 14px;
}
.topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.5px; }
.topbar .brand .logo{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#5b95ff,#3d7eff); color:#fff; font-size:22px;
  box-shadow:0 6px 16px rgba(61,126,255,.35);
  user-select:none;
}
.topbar .spacer{ flex:1; }
.icon-btn{
  width:46px; height:46px; border-radius:14px; background:#fff; box-shadow:var(--shadow-s);
  display:grid; place-items:center; font-size:21px; transition:transform .15s ease, box-shadow .15s;
}
.icon-btn:active{ transform:scale(.94); }
.icon-btn.on{ background:var(--blue-l); }

/* ---------- 通用卡片 ---------- */
.panel{
  background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow);
  padding:18px; margin-bottom:16px;
}
.panel.flat{ box-shadow:var(--shadow-s); }
.panel-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:19px; margin-bottom:12px; }
.panel-title .dot{ width:10px; height:10px; border-radius:50%; background:var(--blue); }

.muted{ color:var(--ink-2); }
.small{ font-size:15px; }
.tiny{ font-size:13.5px; color:var(--ink-3); }
.center{ text-align:center; }
.row{ display:flex; align-items:center; gap:10px; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }
.hidden{ display:none !important; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 22px; border-radius:var(--r-pill);
  background:#fff; box-shadow:var(--shadow-s); font-weight:700; font-size:17px;
  transition:transform .14s ease, box-shadow .14s ease, background .14s;
  user-select:none;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn.primary{ background:linear-gradient(135deg,#63a0ff,var(--blue)); color:#fff; box-shadow:0 10px 22px rgba(61,126,255,.32); }
.btn.orange{ background:linear-gradient(135deg,#ffc266,var(--orange)); color:#7a4a00; box-shadow:0 10px 22px rgba(255,171,46,.30); }
.btn.green{ background:linear-gradient(135deg,#5ddc96,var(--green)); color:#095c2e; box-shadow:0 10px 22px rgba(47,196,107,.28); }
.btn.ghost{ background:rgba(255,255,255,.72); }
.btn.sm{ min-height:40px; padding:0 16px; font-size:15px; }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- 首页：今日任务 ---------- */
.hero{
  position:relative; overflow:hidden;
  border-radius:26px; padding:20px 20px 22px;
  background:linear-gradient(135deg,#4b86ff,#6fa8ff 55%,#8fc0ff);
  color:#fff; box-shadow:0 16px 34px rgba(61,126,255,.30); margin-bottom:16px;
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-50px; width:190px; height:190px;
  border-radius:50%; background:rgba(255,255,255,.14);
}
.hero::before{
  content:""; position:absolute; right:40px; bottom:-70px; width:140px; height:140px;
  border-radius:50%; background:rgba(255,255,255,.10);
}
.hero h1{ margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:.5px; }
.hero p{ margin:0; color:rgba(255,255,255,.9); font-size:15px; }
.hero .hero-actions{ display:flex; gap:10px; margin-top:16px; position:relative; z-index:1; }
.hero .hero-actions .btn{ background:#fff; color:var(--blue-d); box-shadow:0 8px 18px rgba(20,50,110,.18); }
.hero .hero-actions .btn.ghost{ background:rgba(255,255,255,.18); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.5); }

.progress-line{ height:8px; border-radius:99px; background:rgba(255,255,255,.35); overflow:hidden; margin-top:14px; position:relative; z-index:1; }
.progress-line > i{ display:block; height:100%; border-radius:99px; background:#fff; transition:width .6s ease; }

/* ---------- 单元地图 ---------- */
.map{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
/* 宽屏：7 个单元排成 4 + 3 两行，尽量一屏看全 */
@media (min-width:1180px){
  .map{ grid-template-columns:repeat(4,1fr); gap:12px; }
  .hero{ padding:16px 18px 18px; margin-bottom:12px; }
  .hero h1{ font-size:20px; }
  .unit-card{ padding:12px 13px 10px; border-radius:18px; }
  .unit-card .u-name{ font-size:15.5px; margin:6px 0 2px; }
  .unit-card .u-sub{ font-size:12.5px; min-height:18px; }
  .unit-card .u-foot{ margin-top:8px; font-size:12.5px; gap:4px; }
  .unit-card .u-no{ min-width:30px; height:30px; font-size:16px; }
  .unit-card .u-ring{ width:38px; height:38px; }
  .unit-card .u-ring b{ width:28px; height:28px; font-size:11.5px; }
  .unit-card .stars{ font-size:13px; }
}
@media (min-width:760px) and (max-width:1179px){ .map{ grid-template-columns:repeat(3,1fr); } }

.unit-card{
  position:relative; text-align:left; background:#fff; border-radius:22px; padding:16px 16px 14px;
  box-shadow:var(--shadow-s); transition:transform .16s ease, box-shadow .16s ease;
  border:2px solid transparent; overflow:hidden;
}
.unit-card:active{ transform:scale(.985); }
.unit-card .u-no{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 9px;
  border-radius:11px; font-weight:800; font-size:15px; color:#fff; background:var(--blue);
}
.unit-card .u-name{ font-weight:800; font-size:17.5px; margin:10px 0 4px; line-height:1.35; }
.unit-card .u-sub{ font-size:13.5px; color:var(--ink-3); min-height:20px; }
.unit-card .u-foot{ display:flex; align-items:center; gap:6px; margin-top:12px; font-size:13.5px; color:var(--ink-2); }
.unit-card .stars{ letter-spacing:1px; font-size:15px; }
.unit-card .u-ring{
  position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--ink-2);
  background:conic-gradient(var(--green) calc(var(--p,0) * 1%), #eef2f8 0);
}
.unit-card .u-ring b{ width:30px; height:30px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:12.5px; }
.unit-card.done{ border-color:#bfe8d2; }
.unit-card.cur{ border-color:var(--blue); box-shadow:0 12px 26px rgba(61,126,255,.20); }
.unit-card .flag{
  position:absolute; right:0; top:0; padding:4px 12px; font-size:12px; font-weight:800;
  color:#fff; background:var(--blue); border-bottom-left-radius:12px;
}

/* ---------- 知识点列表 ---------- */
.cardlist{ display:flex; flex-direction:column; gap:12px; }
.kp{
  display:flex; gap:14px; align-items:center; background:#fff; border-radius:20px;
  padding:14px 16px; box-shadow:var(--shadow-s); transition:transform .14s ease;
  text-align:left; width:100%;
}
.kp:active{ transform:scale(.99); }
.kp .kp-ico{
  flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:24px; background:var(--blue-l);
}
.kp .kp-main{ flex:1; min-width:0; }
.kp .kp-title{ font-weight:800; font-size:17px; }
.kp .kp-sub{ font-size:13.5px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp .kp-state{ flex:0 0 auto; font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; }
.kp .kp-state.s0{ background:#f0f3f8; color:var(--ink-3); }
.kp .kp-state.s1{ background:var(--orange-l); color:#a46200; }
.kp .kp-state.s2{ background:var(--blue-l); color:var(--blue-d); }
.kp .kp-state.s3{ background:var(--green-l); color:#0b7a41; }

/* ---------- 学习卡：舞台 ---------- */
.study-head{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.study-head .back{ width:44px; height:44px; border-radius:14px; background:#fff; box-shadow:var(--shadow-s); display:grid; place-items:center; font-size:20px; }
.study-head .t{ flex:1; min-width:0; }
.study-head .t .k{ font-size:13px; color:var(--ink-3); }
.study-head .t .n{ font-weight:800; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.stage-wrap{
  position:relative; border-radius:26px; overflow:hidden; background:linear-gradient(180deg,#f7fbff,#eef4ff);
  box-shadow:inset 0 0 0 1px rgba(61,126,255,.10), var(--shadow-s);
}
#stage{ position:relative; width:100%; aspect-ratio:16/9; min-height:210px; max-height:56vh; }
#stage svg, #stage .cube-scene{ position:absolute; inset:0; width:100%; height:100%; }
.stage-cap{
  position:absolute; left:12px; right:12px; bottom:12px; text-align:center;
  background:rgba(38,51,77,.82); color:#fff; padding:8px 14px; border-radius:14px;
  font-size:15.5px; line-height:1.45; backdrop-filter:blur(4px);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;
}
.stage-cap.show{ opacity:1; transform:none; }
.stage-ctrl{ display:flex; align-items:center; gap:8px; padding:10px 4px 0; }
.stage-ctrl .btn{ min-height:42px; padding:0 14px; font-size:14.5px; }
.stage-ctrl .steps{ margin-left:auto; display:flex; gap:4px; }
.stage-ctrl .steps i{ width:7px; height:7px; border-radius:50%; background:#cfd9e8; }
.stage-ctrl .steps i.on{ background:var(--blue); }

/* ---------- 学习/练习页：一屏内排布（宽屏两栏，免滚动） ---------- */
.study-cols{ display:flex; flex-direction:column; gap:12px; }
.col-l, .col-r{ min-width:0; }
@media (min-width:860px) and (min-height:480px){
  body.fit{ overflow:hidden; }
  body.fit .app{ height:100dvh; display:flex; flex-direction:column; padding:8px 14px 0; max-width:none; }
  body.fit .topbar{ flex:0 0 auto; padding:2px 4px 8px; }
  body.fit .topbar .brand{ font-size:17px; }
  body.fit .topbar .brand .logo{ width:34px; height:34px; font-size:19px; }
  body.fit .icon-btn{ width:38px; height:38px; font-size:16px; }
  body.fit #main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:6px; }
  body.fit .study-head{ flex:0 0 auto; margin-bottom:8px; }
  body.fit .study-head .back{ width:38px; height:38px; }
  body.fit .study-head .t .n{ font-size:17px; }
  body.fit .study-cols{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);
    gap:14px; flex:1 1 auto; min-height:0; align-items:stretch;
  }
  body.fit .col-l{ display:flex; flex-direction:column; min-height:0; }
  body.fit .col-r{ overflow-y:auto; overflow-x:hidden; min-height:0; padding:2px 4px 2px 0; }
  /* 预习：上下排布（上动画、下题目），整体居中，一屏放完 */
  body.fit .study-cols.stacked{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    flex:1 1 auto; min-height:0;
  }
  body.fit .study-cols.stacked .col-l{
    flex:1 1 auto; min-height:0; width:100%; max-width:900px;
    display:flex; flex-direction:column;
  }
  body.fit .study-cols.stacked .col-r{
    flex:0 0 auto; width:100%; max-width:900px; overflow:visible;
  }
  body.fit .study-cols.stacked #stage{ height:100%; min-height:170px; }
  body.fit .study-cols.stacked .q-panel{ padding:12px 14px; }
  body.fit .study-cols.stacked .opt{ min-height:40px; padding:6px 13px; font-size:15.5px; }
  body.fit .study-cols.stacked .opts{ gap:6px; }
  body.fit .study-cols.stacked .feedback{ max-height:24vh; padding:8px 12px; font-size:14.5px; }
  body.fit .study-cols.stacked .feedback .pit{ margin-top:6px; }
  body.fit .study-cols.stacked #actionbar{ margin-top:8px !important; }
  /* 复习：动画先不显示，只把题目居中放在屏幕中间 */
  body.fit .study-cols.solo{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    flex:1 1 auto; min-height:0;
  }
  body.fit .study-cols.solo .col-l{ display:none; }
  body.fit .study-cols.solo .col-r{
    width:100%; max-width:760px; overflow:visible; padding:0;
  }
  body.fit .stage-wrap{ flex:1 1 auto; min-height:0; }
  body.fit #stage{ aspect-ratio:auto; height:100%; max-height:none; min-height:180px; }
  body.fit .stage-cap{ font-size:14px; padding:6px 12px; }
  body.fit .stage-ctrl{ flex:0 0 auto; padding-top:6px; }
  body.fit .stage-ctrl .btn{ min-height:34px; font-size:13.5px; padding:0 12px; }
  body.fit .q-panel{ margin-top:0; padding:14px; }
  body.fit .q-stem{ font-size:17.5px; margin-bottom:10px; }
  body.fit .opt{ min-height:46px; padding:8px 13px; font-size:16px; border-radius:14px; }
  body.fit .opt .mark{ width:28px; height:28px; font-size:13px; }
  body.fit .opts{ gap:7px; }
  body.fit .num-pad{ gap:6px; margin-top:8px; max-width:400px; margin-left:auto; margin-right:auto; }
  body.fit .num-pad button{ min-height:40px; font-size:18px; }
  body.fit .num-input{ min-height:44px; font-size:26px; max-width:400px; margin:0 auto; }
  body.fit .feedback{ margin-top:10px; padding:11px 14px; font-size:15.5px; max-height:24vh; overflow-y:auto; }
  body.fit .practice-wrap{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
  body.fit .practice-wrap .q-panel{ max-width:820px; }
  body.fit .practice-bar{ margin-bottom:10px; }
}
/* 更矮的窗口（笔记本去掉浏览器工具栏后常见 550–640）再压一档 */
@media (min-width:860px) and (max-height:640px){
  body.fit .app{ padding:6px 12px 0; }
  body.fit .topbar{ padding:0 4px 4px; }
  body.fit .topbar .brand{ font-size:15.5px; }
  body.fit .topbar .brand .logo{ width:28px; height:28px; font-size:16px; }
  body.fit .icon-btn{ width:32px; height:32px; font-size:14px; }
  body.fit .study-head{ margin-bottom:6px; }
  body.fit .study-head .back{ width:32px; height:32px; font-size:16px; }
  body.fit .study-head .t .k{ font-size:11.5px; }
  body.fit .study-head .t .n{ font-size:15.5px; }
  body.fit .q-panel{ padding:10px 12px; }
  body.fit .q-stem{ font-size:16px; margin-bottom:8px; }
  body.fit .opt{ min-height:40px; padding:6px 11px; font-size:15px; }
  body.fit .opts{ gap:6px; }
  body.fit .num-pad{ gap:5px; margin-top:6px; }
  body.fit .num-pad button{ min-height:34px; font-size:16px; }
  body.fit .num-input{ min-height:36px; font-size:22px; }
  body.fit .feedback{ max-height:20vh; font-size:14.5px; padding:8px 12px; }
  body.fit .stage-ctrl .btn{ min-height:30px; font-size:12.5px; }
  body.fit #stage{ min-height:140px; }
}

/* 答完之后：收起选项与键盘，只留一行答案，版面不跳动 */
.q-panel.answered .opts,
.q-panel.answered .num-pad,
.q-panel.answered .num-input{ display:none; }
.answer-line{
  margin-top:10px; text-align:center; font-size:16px; font-weight:700; line-height:1.5;
  color:var(--ink-2); background:#f4f8ff; border-radius:14px; padding:8px 14px;
}
.answer-line b{ color:var(--ink); }
.answer-line.ok{ color:#0b7a41; background:var(--green-l); }
.answer-line.ok b{ color:#0b7a41; }
.answer-line.no{ color:#8a5300; background:var(--orange-l); }
.answer-line.no b{ color:#8a5300; }

/* ---------- 统一居中 ---------- */
.hero{ text-align:center; }
.hero-actions{ justify-content:center; }
.pill-row{ justify-content:center; }
.panel-title{ justify-content:center; }
.panel.center, .panel .small.muted{ text-align:center; }
.unit-card{ text-align:center; }
.unit-card .u-no{ margin:0 auto; }
.unit-card .u-foot{ justify-content:center; }
.q-stem{ text-align:center; }
.opt{ position:relative; justify-content:center; text-align:center; padding-left:54px; padding-right:54px; }
.opt .mark{ position:absolute; left:14px; top:50%; transform:translateY(-50%); }
.feedback{ text-align:center; }
#actionbar .row{ justify-content:center; }
.study-head .t{ text-align:center; }
.practice-cta{ justify-content:center; text-align:center; }
.practice-cta .cta-main{ flex:0 1 auto; align-items:center; }
.feedback .fb-title{ justify-content:center; }

/* 学习页：题目区贴顶对齐（和左边动画顶部齐平）；练习页没有动画，整组内容垂直居中 */
@media (min-width:860px) and (min-height:480px){
  body.fit .practice-wrap{ display:flex; flex-direction:column; }
  body.fit .practice-wrap > .q-panel{
    margin:auto auto 16px; width:100%;
  }
  body.fit .practice-wrap > #actionbar{ margin-bottom:auto; }
}

/* ---------- 阶梯练习 ---------- */
.practice-cta{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  margin:16px 0 4px; padding:14px 18px; border-radius:22px; cursor:pointer;
  background:linear-gradient(135deg,#fff4dc,#ffe6b8); border:2px solid #ffd79a; box-shadow:var(--shadow-s);
  transition:transform .12s;
}
.practice-cta:active{ transform:scale(.995); }
.practice-cta .cta-ico{ font-size:28px; }
.practice-cta .cta-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.practice-cta .cta-main b{ font-size:17px; color:#8a5300; }
.practice-cta .cta-main span{ font-size:13.5px; color:#a46200; }
.practice-cta .cta-go{ font-weight:800; color:#8a5300; }
body.fit .practice-wrap{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.lv-badge{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 12px; font-size:13px; font-weight:800; }
.lv-badge.l1{ background:var(--green-l); color:#0b7a41; }
.lv-badge.l2{ background:var(--blue-l); color:#2a63d6; }
.lv-badge.l3{ background:var(--orange-l); color:#8a5300; }
.practice-bar{ height:9px; border-radius:5px; background:#e3ebf7; overflow:hidden; margin:0 0 12px; }
.practice-bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#7fb0ff,#3d7eff); transition:width .3s ease; }
.practice-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.practice-top .grow{ flex:1; }
.score-big{ font-size:52px; font-weight:800; color:var(--blue); }
.medal{ display:flex; gap:10px; justify-content:center; margin:10px 0 4px; }

/* ---------- 题目 ---------- */
.q-panel{ margin-top:14px; }
.q-stem{ font-size:20px; font-weight:700; line-height:1.55; margin:0 0 14px; }
.q-stem .blank{ display:inline-block; min-width:56px; border-bottom:3px solid var(--blue); text-align:center; margin:0 4px; }

.opts{ display:grid; gap:10px; }
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  white-space:pre-line;
  background:#fff; border:2px solid var(--line); border-radius:18px; padding:13px 16px;
  font-size:18px; font-weight:600; transition:border-color .15s, background .15s, transform .12s;
  min-height:58px;
}
.opt:active{ transform:scale(.995); }
.opt .mark{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#f2f5fa; color:var(--ink-2);
  display:grid; place-items:center; font-weight:800; font-size:15px;
}
.opt.picked{ border-color:var(--blue); background:var(--blue-l); }
.opt.picked .mark{ background:var(--blue); color:#fff; }
.opt.right{ border-color:var(--green); background:var(--green-l); }
.opt.right .mark{ background:var(--green); color:#fff; }
.opt.wrong{ border-color:var(--red); background:var(--red-l); }
.opt.wrong .mark{ background:var(--red); color:#fff; }
.opt.static{ pointer-events:none; }

.judge-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.judge-row .opt{ justify-content:center; font-size:20px; }

.num-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.num-pad button{
  min-height:52px; border-radius:14px; background:#f7faff; border:1.5px solid #e2eaf7;
  box-shadow:var(--shadow-s); font-size:21px; font-weight:800; color:var(--ink);
}
.num-pad button.wide{ grid-column:span 2; }
.num-pad button.ok{ background:var(--blue); color:#fff; }
.num-input{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:70px; border-bottom:3px dashed var(--line); font-size:34px; font-weight:800;
  letter-spacing:2px; color:var(--blue-d);
}
.num-input .unit{ font-size:18px; color:var(--ink-3); font-weight:700; }
.num-input .caret{ display:inline-block; width:2px; height:32px; background:var(--blue); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.order-list{ display:flex; flex-direction:column; gap:10px; }
.order-item{
  display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line);
  border-radius:16px; padding:12px 14px; font-size:17px; font-weight:700;
}
.order-item .idx{ width:30px; height:30px; border-radius:9px; background:var(--blue-l); color:var(--blue-d); display:grid; place-items:center; font-size:14px; font-weight:800; }

/* 反馈条 */
.feedback{
  margin-top:14px; border-radius:18px; padding:14px 16px; font-size:16.5px; line-height:1.6;
  display:none; animation:pop .3s ease;
}
.feedback.show{ display:block; }
.feedback.ok{ background:var(--green-l); color:#0b7a41; }
.feedback.no{ background:var(--orange-l); color:#8a5300; }
.feedback .fb-title{ font-weight:800; font-size:18px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.feedback .pit{ margin-top:8px; font-size:14.5px; color:#8a5300; background:rgba(255,255,255,.6); padding:8px 12px; border-radius:12px; }
@keyframes pop{ from{ transform:scale(.97); opacity:0; } to{ transform:none; opacity:1; } }

/* 撒花 */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.confetti i{
  position:absolute; width:10px; height:14px; border-radius:2px; opacity:0;
  animation:fall 1.5s ease-out forwards;
}
@keyframes fall{
  0%{ opacity:1; transform:translate3d(0,-20px,0) rotate(0deg); }
  100%{ opacity:0; transform:translate3d(var(--dx,0), 70vh, 0) rotate(540deg); }
}

/* ---------- 顶栏小进度 / 状态条 ---------- */
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.85); box-shadow:var(--shadow-s); font-size:14px; font-weight:700; color:var(--ink-2);
}
.pill b{ color:var(--ink); }
.pill.g{ background:var(--green-l); color:#0b7a41; }
.pill.o{ background:var(--orange-l); color:#8a5300; }
.pill.b{ background:var(--blue-l); color:var(--blue-d); }

/* ---------- 报告 ---------- */
.bars{ display:flex; flex-direction:column; gap:12px; }
.bar-row{ display:grid; grid-template-columns:132px 1fr 52px; align-items:center; gap:10px; font-size:13.5px; }
.bar-track{ height:12px; background:#eef2f8; border-radius:99px; overflow:hidden; }
.bar-track > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7fb0ff,#3d7eff); transition:width .7s ease; }
.bar-track.g > i{ background:linear-gradient(90deg,#5ddc96,#2fc46b); }
.bar-track.o > i{ background:linear-gradient(90deg,#ffc266,#ffab2e); }

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:700px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:#fff; border-radius:18px; padding:14px; box-shadow:var(--shadow-s); text-align:center;
}
.stat b{ display:block; font-size:26px; line-height:1.2; }
.stat span{ font-size:13px; color:var(--ink-3); }

/* ---------- 待办/列表 ---------- */
.list{ display:flex; flex-direction:column; gap:10px; }
.list-item{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:12px 14px;
  box-shadow:var(--shadow-s); text-align:left; width:100%;
}
.list-item .li-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.list-item .li-t{ display:block; font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item .li-s{ display:block; font-size:13px; color:var(--ink-3); }

/* ---------- 底部导航 ---------- */
.tabbar{
  position:sticky; bottom:0; z-index:20; margin-top:18px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-radius:22px; padding:8px; box-shadow:0 -6px 24px rgba(45,74,130,.10);
  padding-bottom:calc(8px + var(--safe));
}
.tabbar button{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px;
  border-radius:16px; font-size:12px; font-weight:700; color:var(--ink-3);
}
.tabbar button .ic{ font-size:20px; line-height:1; }
.tabbar button.on{ background:var(--blue-l); color:var(--blue-d); }
body.no-tabs .tabbar{ display:none; }
/* 底部导航是浮层，给页面留出空间，避免盖住最后一行内容 */
body:not(.no-tabs) .app{ padding-bottom:104px; }

/* ---------- 动画公共元素 ---------- */
.scene-svg{ display:block; width:100%; height:100%; }
.scene-svg text{ font-family:inherit; }

.cube-scene{ perspective:900px; display:grid; place-items:center; }
.cube{ position:relative; width:120px; height:120px; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.3,.8,.3,1); }
.cube .face{
  position:absolute; width:120px; height:120px; border-radius:12px;
  background:rgba(61,126,255,.16); border:3px solid #3d7eff; display:grid; place-items:center;
  font-size:40px; color:#2a63d6; backface-visibility:visible;
}
.cube .front{ transform:translateZ(60px); }
.cube .back{ transform:rotateY(180deg) translateZ(60px); }
.cube .left{ transform:rotateY(-90deg) translateZ(60px); }
.cube .right{ transform:rotateY(90deg) translateZ(60px); }
.cube .top{ transform:rotateX(90deg) translateZ(60px); }
.cube .bottom{ transform:rotateX(-90deg) translateZ(60px); }

.view-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:12px; }
.view-cell{ background:#fff; border-radius:14px; padding:10px; text-align:center; box-shadow:var(--shadow-s); font-size:13px; color:var(--ink-2); }
.view-cell b{ display:block; font-size:15px; color:var(--ink); margin-bottom:6px; }
.view-cell .shape{ font-size:26px; line-height:1.2; }

.expr-line{ font-size:22px; font-weight:800; letter-spacing:1px; }
.token{ display:inline-block; padding:2px 8px; border-radius:10px; transition:background .25s, color .25s, transform .25s; }
.token.hot{ background:var(--orange); color:#7a4a00; transform:scale(1.12); }
.token.done{ background:var(--green-l); color:#0b7a41; }
.token.dim{ opacity:.35; }

/* ---------- 打印 ---------- */
@media print{
  body{ background:#fff; }
  .tabbar,.topbar .icon-btn,.hero-actions{ display:none !important; }
}

/* ---------- 窄屏 ---------- */
@media (max-width:430px){
  body{ font-size:17px; }
  .app{ padding:10px 12px 24px; }
  .hero h1{ font-size:20px; }
  .q-stem{ font-size:18.5px; }
  .opt{ font-size:17px; min-height:54px; }
  .map{ grid-template-columns:1fr 1fr; gap:10px; }
  .unit-card{ padding:13px 12px; border-radius:18px; }
  .unit-card .u-name{ font-size:15.5px; }
  .study-head .t .n{ font-size:16.5px; }
  .bar-row{ grid-template-columns:88px 1fr 46px; }
}