/* 碎光 · 样式
   一套骨架，两套主题：靠 body[data-theme] 切换主色与背景温度。
   孩子换学段不需要重新学怎么用。 */

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

:root {
  --brand: #5563F0;
  --brand-deep: #3B47D6;
  --brand-soft: #ECEEFF;
  --brand-ink: #2A34A8;
  --bg: #F5F6FA;
  --card: #FFFFFF;
  --text: #14161F;
  --sub: #3C4150;
  --muted: #8A90A3;
  --faint: #9CA2B4;
  --line: #EDEFF5;
  --ok: #12C48B;
  --ok-deep: #0E6B4C;
  --ok-soft: #E9FAF3;
  --warn: #E08A1E;
  --warn-soft: #FFF8ED;
  --warn-deep: #8A5B10;
  --radius-card: 24px;
  --radius-btn: 16px;
  --shadow: 0 8px 24px -6px rgba(18, 20, 45, .08);
  --shadow-up: 0 -8px 28px -10px rgba(18, 20, 45, .12);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-h: 74px;
}

body[data-theme="junior"] {
  --brand: #FF7A45;
  --brand-deep: #E8561F;
  --brand-soft: #FFF0E8;
  --brand-ink: #B8451A;
  --bg: #FDF7F2;
  --line: #F4E8DE;
  --muted: #A89A93;
  --faint: #B5A69E;
  --card: #FFFFFF;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

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

#app { height: 100%; }

.view {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}
.view.is-on { display: flex; }

.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px calc(var(--tab-h) + var(--safe-b) + 18px);
}
.view--quiz .content, .content--result { padding-bottom: calc(28px + var(--safe-b)); }

/* ───────── 头部 ───────── */
.hd { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px; }
.hd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hd-title { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; }
.hd-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 500;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}

/* ───────── 选身份 ───────── */
.identity {
  margin: auto 22px;
  padding: 30px 0 calc(30px + var(--safe-b));
  display: flex; flex-direction: column;
}
.brand-row { display: flex; align-items: center; gap: 7px; }
.brand-mark { width: 18px; height: 18px; fill: var(--brand); }
.brand-name { font-size: 14px; font-weight: 600; color: var(--brand); letter-spacing: .5px; }
.identity-title { margin: 20px 0 0; font-size: 29px; font-weight: 700; letter-spacing: -.5px; }
.identity-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.identity-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.id-card {
  position: relative; text-align: left; padding: 22px;
  border-radius: 26px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #6B76F5, #3B47D6);
  box-shadow: 0 14px 30px -12px rgba(59, 71, 214, .55);
  transition: transform .15s ease;
}
.id-card--junior { background: linear-gradient(135deg, #FF9166, #E8561F); box-shadow: 0 14px 30px -12px rgba(232, 86, 31, .5); }
.id-card:active { transform: scale(.975); }
.id-chip {
  display: inline-block; padding: 4px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 500;
}
.id-name { display: block; margin: 14px 0 6px; font-size: 26px; font-weight: 700; }
.id-desc { display: block; font-size: 12.5px; line-height: 1.6; opacity: .9; }

/* ───────── 进度环 / 今日 ───────── */
.today-card {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: 26px; padding: 20px 22px; color: #fff;
  box-shadow: 0 16px 34px -16px rgba(59, 71, 214, .6);
}
body[data-theme="junior"] .today-card { box-shadow: 0 16px 34px -16px rgba(232, 86, 31, .55); }
.today-top { display: flex; align-items: center; justify-content: space-between; }
.today-label { font-size: 12px; opacity: .85; }
.today-big { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.today-big b { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.today-big span { font-size: 13px; opacity: .9; }
.today-dots { display: flex; gap: 6px; margin-top: 16px; }
.today-dot { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.today-dot.on { background: #fff; }
.today-note { margin-top: 12px; font-size: 12px; opacity: .9; }

/* ───────── 时段卡 ───────── */
.slot-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.slot {
  display: flex; align-items: center; gap: 13px; width: 100%;
  background: var(--card); border-radius: 22px; padding: 16px;
  box-shadow: var(--shadow); text-align: left;
  transition: transform .15s ease;
}
.slot:active { transform: scale(.985); }
.slot.is-done { background: var(--ok-soft); box-shadow: none; }
.slot-time {
  width: 54px; flex: none; padding: 8px 0; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--brand-soft); color: var(--brand);
}
.slot.is-done .slot-time { background: rgba(18, 196, 139, .13); color: #0E9E71; }
.slot-time b { font-size: 11px; font-weight: 600; }
.slot-time span { font-size: 10px; opacity: .85; }
.slot-mid { flex: 1; min-width: 0; }
.slot-title { display: block; font-size: 14.5px; font-weight: 600; }
.slot-meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.slot-arrow { width: 22px; height: 22px; flex: none; }
.slot-arrow .ring { stroke: var(--line); }
.slot-arrow .chk { stroke: var(--ok); }
.slot-arrow .play { fill: var(--brand); }

/* ───────── 通用卡片 ───────── */
.card { background: var(--card); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.card-title { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.card-note { font-size: 11px; color: var(--faint); font-weight: 400; }
.section-gap { height: 14px; }

.notice {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 18px;
  background: var(--warn-soft); font-size: 12px; color: var(--warn-deep);
  line-height: 1.55;
}
.notice svg { width: 18px; height: 18px; flex: none; stroke: var(--warn); fill: none; stroke-width: 1.8; }

/* ───────── 答题 ───────── */
.quiz-top {
  display: flex; align-items: center; gap: 14px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px;
}
.icon-btn { width: 28px; height: 28px; flex: none; }
.icon-btn svg { width: 28px; height: 28px; fill: none; }
.icon-btn svg circle { stroke: #E2E5EE; stroke-width: 1.5; }
.icon-btn svg path { stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.quiz-progress { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.quiz-progress-fill { height: 100%; width: 0; border-radius: 3px; background: var(--brand); transition: width .25s ease; }
.quiz-count { font-size: 11.5px; color: var(--faint); flex: none; }

.q-tags { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-tag {
  padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 500;
  background: var(--brand-soft); color: var(--brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
}
.q-freq { font-size: 11px; color: var(--faint); flex: none; }
.q-card { background: var(--card); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow); margin-top: 12px; }
.q-stem { margin: 14px 0 0; font-size: 19px; line-height: 1.65; font-weight: 600; letter-spacing: .1px; }
.q-stem--en { font-size: 17px; line-height: 1.7; font-weight: 500; }
.q-passage { margin: 14px 0 0; font-size: 15px; line-height: 1.85; color: var(--sub); }

.hint-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 7px 12px; border-radius: 11px;
  background: var(--bg); color: var(--brand); font-size: 12px; font-weight: 500;
}
.hint-btn svg { width: 14px; height: 14px; stroke: var(--brand); fill: none; stroke-width: 1.7; }
.hint-box {
  margin-top: 10px; padding: 12px 14px; border-radius: 15px;
  background: var(--bg); font-size: 12.5px; line-height: 1.7; color: var(--sub);
}
.hint-box b { color: var(--brand); font-weight: 600; }

.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px; border-radius: 16px; background: var(--card);
  border: 1.2px solid var(--line); font-size: 14.5px; line-height: 1.5;
  transition: transform .12s ease, border-color .15s ease;
}
.opt:active { transform: scale(.99); }
.opt-letter {
  width: 26px; height: 26px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #F2F3F7; color: var(--muted); font-size: 12px; font-weight: 600;
}
.opt.is-right { background: var(--ok-soft); border-color: var(--ok); }
.opt.is-right .opt-letter { background: var(--ok); color: #fff; }
.opt.is-right .opt-text { color: var(--ok-deep); font-weight: 600; }
.opt.is-wrong { background: #FFF1F1; border-color: #F26A6A; }
.opt.is-wrong .opt-letter { background: #F26A6A; color: #fff; }
.opt.is-wrong .opt-text { color: #A12B2B; }
.opt[disabled] { opacity: .95; }
.opt-text { flex: 1; }

.fill { margin-top: 14px; }
.fill input, .fill textarea {
  width: 100%; padding: 14px 15px; border-radius: 15px;
  border: 1.4px solid var(--line); background: var(--card);
  color: var(--text); outline: none; resize: none;
}
.fill input:focus, .fill textarea:focus { border-color: var(--brand); }
.fill textarea { min-height: 76px; line-height: 1.6; }
.fill-hint { margin-top: 8px; font-size: 11.5px; color: var(--faint); }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  height: 54px; border-radius: var(--radius-btn);
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 12px 24px -12px rgba(59, 71, 214, .7);
  transition: transform .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .4; box-shadow: none; }
.btn--ghost { background: transparent; color: var(--brand); box-shadow: none; }
.btn--light { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.btn-row { display: flex; gap: 10px; margin-top: 16px; }

.feedback { margin-top: 14px; border-radius: 18px; padding: 14px; }
.feedback.ok { background: var(--ok-soft); }
.feedback.no { background: #FFF1F1; }
.feedback-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.feedback.ok .feedback-head { color: var(--ok-deep); }
.feedback.no .feedback-head { color: #A12B2B; }
.feedback-head svg { width: 19px; height: 19px; flex: none; }
.feedback-body { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--sub); }
.feedback-answer {
  margin-top: 8px; padding: 9px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, .7); font-size: 12.5px; color: var(--text);
}
.feedback-answer b { color: var(--brand); }
.feedback-plan { margin-top: 8px; font-size: 11px; color: var(--faint); }

/* 完形 */
.blanks { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.blank { }
.blank-head { font-size: 12px; color: var(--muted); margin-bottom: 7px; display: flex; gap: 6px; align-items: center; }
.blank-no {
  width: 20px; height: 20px; border-radius: 7px; background: var(--brand-soft);
  color: var(--brand); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.blank-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.blank-opt {
  padding: 8px 13px; border-radius: 12px; border: 1.2px solid var(--line);
  background: var(--card); font-size: 13px;
}
.blank-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.blank-opt.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-deep); }
.blank-opt.bad { border-color: #F26A6A; background: #FFF1F1; color: #A12B2B; }

/* ───────── 结算 ───────── */
.result-wrap { display: flex; flex-direction: column; min-height: 100%; justify-content: center; padding: 20px 0 40px; }
.result-hero { text-align: center; }
.result-badge {
  width: 82px; height: 82px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 16px 30px -14px rgba(59, 71, 214, .7);
}
.result-badge svg { width: 38px; height: 38px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.result-title { font-size: 23px; font-weight: 700; margin: 0; }
.result-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.result-stats { display: flex; gap: 10px; margin-top: 24px; }
.result-stat { flex: 1; background: var(--card); border-radius: 18px; padding: 14px; text-align: center; box-shadow: var(--shadow); }
.result-stat b { display: block; font-size: 22px; font-weight: 700; }
.result-stat span { display: block; margin-top: 3px; font-size: 11px; color: var(--faint); }
.result-stat.accent b { color: var(--brand); }
.result-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.7; }

/* ───────── 成长 ───────── */
.streak-card {
  border-radius: 26px; padding: 22px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 16px 34px -18px rgba(59, 71, 214, .65);
}
.streak-top { display: flex; justify-content: space-between; font-size: 12px; opacity: .9; }
.streak-num { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.streak-num b { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -2px; }
.streak-num span { font-size: 15px; }
.streak-sub { margin-top: 10px; font-size: 12px; opacity: .88; }

.heat { display: flex; gap: 5px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.heat-col { display: flex; flex-direction: column; gap: 5px; }
.heat-cell { width: 18px; height: 18px; border-radius: 5px; background: #EEF0F6; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 10px; color: var(--faint); }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.sbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sbar-name { width: 32px; font-size: 12px; font-weight: 500; flex: none; }
.sbar-track { flex: 1; height: 6px; border-radius: 3px; background: #F1F2F6; overflow: hidden; }
.sbar-fill { height: 100%; border-radius: 3px; }
.sbar-pct { width: 36px; text-align: right; font-size: 11px; font-weight: 600; flex: none; }

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.list-row:last-child { border-bottom: 0; }
.list-row .k { color: var(--sub); }
.list-row .v { color: var(--muted); font-size: 12.5px; }

/* ───────── 底部导航 ───────── */
.tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b));
  height: 62px; display: none; align-items: center; gap: 4px; padding: 6px;
  border-radius: 31px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-up), 0 0 0 1px rgba(20, 22, 31, .04);
  z-index: 20;
}
.tabbar.is-on { display: flex; }
.tab {
  flex: 1; height: 100%; border-radius: 25px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--faint); transition: background .18s ease, color .18s ease;
}
.tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tab span { font-size: 10px; font-weight: 500; }
.tab.is-on { background: var(--brand); color: #fff; }

/* ───────── 提示条 ───────── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 26px);
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 14px;
  background: rgba(20, 22, 31, .9); color: #fff; font-size: 12.5px;
  transition: opacity .22s ease, transform .22s ease; z-index: 60; max-width: 80vw; text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.fade-in { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

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