:root{
  --bg1:#fef6ff; --bg2:#eef4ff;
  --card:#ffffff; --ink:#2b2b40; --muted:#7a7a96;
  --brand:#7c5cff; --brand2:#5cc8ff;
  --good:#22c08a; --good-bg:#e7faf3;
  --warn:#ff8a5c; --warn-bg:#fff1ea;
  --gold:#ffb22e; --pink:#ff7eb6;
  --line:#ece9fb; --shadow:0 8px 24px rgba(124,92,255,.12);
  --radius:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"PingFang SC","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  min-height:100vh; font-size:18px; line-height:1.5;
  -webkit-user-select:none; user-select:none;
}
.app{max-width:760px;margin:0 auto;padding:16px 16px 100px;min-height:100vh}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;font-size:1rem}
.center{text-align:center}

/* 顶部状态条 */
.topbar{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.topbar .who{display:flex;align-items:center;gap:10px;flex:1}
.topbar .ava{font-size:30px;width:48px;height:48px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}
.topbar .name{font-weight:800}
.chip{background:#fff;border-radius:999px;padding:6px 12px;font-weight:800;
  box-shadow:var(--shadow);font-size:.92rem;display:inline-flex;gap:5px;align-items:center}
.chip.lv{color:var(--brand)} .chip.coin{color:var(--gold)} .chip.fire{color:var(--warn)}

/* 进度条 */
.xpbar{height:14px;background:#efe9ff;border-radius:999px;overflow:hidden;margin:4px 0}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:999px;transition:width .5s}

/* 卡片 / 模块 */
.card{background:var(--card);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:16px}
.h1{font-size:1.5rem;font-weight:900;margin:.2em 0}
.h2{font-size:1.15rem;font-weight:800;margin:.2em 0}
.muted{color:var(--muted);font-size:.92rem}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mod{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  text-align:left;display:flex;flex-direction:column;gap:6px;transition:transform .12s;border:2px solid transparent}
.mod:active{transform:scale(.97)}
.mod .emo{font-size:34px}
.mod .t{font-weight:900;font-size:1.1rem}
.mod .d{color:var(--muted);font-size:.82rem;line-height:1.35}
.mod .bar{height:8px;background:#f0ecff;border-radius:999px;overflow:hidden;margin-top:6px}
.mod .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--good),#7be0bf)}

/* 主按钮 */
.btn{background:linear-gradient(90deg,var(--brand),#9b7bff);color:#fff;font-weight:900;
  padding:14px 22px;border-radius:16px;box-shadow:var(--shadow);font-size:1.05rem;width:100%}
.btn.sec{background:#fff;color:var(--brand);border:2px solid var(--line)}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;font-weight:700}
.btn.good{background:linear-gradient(90deg,var(--good),#39d29b)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5}

/* 登录 / 档案 */
.avatars{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:10px 0}
.ava-pick{font-size:34px;width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid var(--line);
  display:grid;place-items:center}
.ava-pick.on{border-color:var(--brand);transform:scale(1.08)}
.profile-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:14px;
  box-shadow:var(--shadow);margin-bottom:12px;width:100%;text-align:left}
.profile-row .ava{font-size:30px}
.input{width:100%;padding:14px;border-radius:14px;border:2px solid var(--line);font-size:1.1rem;
  background:#fbfaff;text-align:center;letter-spacing:.3em}
.input.txt{letter-spacing:normal;text-align:left}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:14px auto}
.pinpad button{padding:16px;border-radius:14px;background:#fff;box-shadow:var(--shadow);font-size:1.3rem;font-weight:800}
.pindots{display:flex;gap:12px;justify-content:center;margin:8px}
.pindots i{width:16px;height:16px;border-radius:50%;background:#e6e0ff}
.pindots i.on{background:var(--brand)}

/* 答题 */
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.qprog{font-weight:800;color:var(--muted)}
.qtimer{font-weight:900;color:var(--brand)}
.qtag{display:inline-block;background:var(--bg2);color:var(--brand);font-weight:800;font-size:.78rem;
  padding:3px 10px;border-radius:999px;margin-bottom:8px}
.qtag.ch{background:#fff5e0;color:#e8920a}
.qtext{font-size:1.32rem;font-weight:800;line-height:1.55;margin:6px 0 16px}
.qtext .frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;margin:0 2px}
.qtext .frac b{border-bottom:2px solid currentColor;padding:0 4px;font-weight:800}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px;text-align:left;
  font-weight:700;font-size:1.05rem}
.opt.on{border-color:var(--brand);background:#f6f2ff}
.opt.right{border-color:var(--good);background:var(--good-bg)}
.opt.wrong{border-color:var(--warn);background:var(--warn-bg)}

.firststep{background:#fff8ec;border:2px dashed var(--gold);border-radius:14px;padding:12px;margin:10px 0}
.firststep .q{font-weight:800;color:#b9810a;font-size:.95rem;margin-bottom:6px}

.hintbox{background:#eef9ff;border:2px solid #cdeaff;border-radius:14px;padding:12px 14px;margin:10px 0}
.hintbox .lbl{font-weight:800;color:#2098d6;font-size:.85rem}
.hintbox ul{margin:6px 0 0;padding-left:18px}
.hintbox li{margin:4px 0}

.feedback{border-radius:16px;padding:16px;margin:12px 0;font-weight:700}
.feedback.ok{background:var(--good-bg);color:#0f8a5f;border:2px solid #b9ecd6}
.feedback.no{background:var(--warn-bg);color:#c75a2a;border:2px solid #ffd9c6}
.feedback.simp{background:#fff7e6;color:#b07400;border:2px solid #ffe6ab}
.feedback .why{font-weight:600;color:var(--ink);margin-top:8px;font-size:.95rem;opacity:.9}
.feedback .why b{color:#c75a2a}

.actions{display:flex;gap:10px;margin-top:6px}
.actions .btn{flex:1}

/* 结果页 */
.result-emoji{font-size:64px}
.statline{display:flex;justify-content:space-around;margin:16px 0;text-align:center}
.statline .v{font-size:1.8rem;font-weight:900;color:var(--brand)}
.statline .k{color:var(--muted);font-size:.85rem}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.badge{background:#fff;border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);font-weight:800;font-size:.85rem}

/* 底部导航 */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -6px 20px rgba(124,92,255,.1);
  display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20}
.tabbar button{background:none;color:var(--muted);font-weight:800;font-size:.72rem;display:flex;
  flex-direction:column;align-items:center;gap:2px;flex:1}
.tabbar button .i{font-size:22px}
.tabbar button.on{color:var(--brand)}

/* 家长后台 */
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv b{font-weight:800}
.diag{border-radius:14px;padding:12px;margin:8px 0;font-weight:700}
.diag.warn{background:var(--warn-bg);color:#c75a2a}
.diag.ok{background:var(--good-bg);color:#0f8a5f}
.topiclist .row{display:flex;align-items:center;gap:10px;margin:8px 0}
.topiclist .nm{width:120px;font-size:.85rem;font-weight:700;flex-shrink:0}
.topiclist .tr{flex:1;height:12px;background:#f0ecff;border-radius:999px;overflow:hidden}
.topiclist .tr>i{display:block;height:100%;border-radius:999px}
.topiclist .pc{width:42px;text-align:right;font-weight:800;font-size:.82rem}

/* 庆祝动画 */
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .45s ease}
@keyframes floatUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-60px);opacity:0}}
.xpfloat{position:fixed;left:50%;top:40%;transform:translateX(-50%);font-size:1.6rem;font-weight:900;
  color:var(--good);animation:floatUp 1s ease forwards;pointer-events:none;z-index:50}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;width:10px;height:14px;top:-20px;border-radius:2px;animation:fall 1.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}