/* ==========================================================================
   初二学习能量站 · 样式（Phase 0 MVP）
   视觉基调：清爽科技风 + 深紫能量色（塔罗占位牌面用紫色渐变，待实拍风格替换）
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(160deg, #f3f0ff 0%, #eef4ff 50%, #f0f7ff 100%);
  color: #2b2440;
  min-height: 100vh;
}

/* ---------------- 启动遮罩 ---------------- */
#bootMask {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(160deg, #6b4ec8, #8f6ff0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; transition: opacity .4s;
}
#bootMask.hide { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 64px; animation: pulse 1.2s ease-in-out infinite; }
.boot-text { margin-top: 16px; font-size: 15px; opacity: .9; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------------- 登录页 ---------------- */
#loginView { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
  background: #fff; border-radius: 20px; padding: 28px 24px; width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(107, 78, 200, .16);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo { font-size: 44px; }
.login-title { font-size: 22px; margin-top: 8px; color: #4a2fb0; }
.login-sub { font-size: 13px; color: #8a80b0; margin-top: 6px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: #6b628f; margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #ded7f5; border-radius: 12px;
  font-size: 16px; outline: none; transition: border-color .2s;
}
.field input:focus { border-color: #6b4ec8; }
.disclaimer { display: flex; gap: 8px; margin: 10px 0 16px; font-size: 12px; color: #8a80b0; line-height: 1.5; }
.disclaimer input { margin-top: 2px; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 14px; padding: 13px 22px; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: transform .12s, opacity .2s; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { width: 100%; background: linear-gradient(135deg, #6b4ec8, #8f6ff0); color: #fff; }
.btn-ghost { background: #eee9fb; color: #5a3fc0; }
.btn-warn { background: #fff2e0; color: #c77b2d; }
.login-err { margin-top: 12px; color: #d5484c; font-size: 13px; text-align: center; }
.hidden { display: none !important; }

/* ---------------- 主框架 ---------------- */
#appView { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid #e8e2fa;
}
.topbar-back {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: #eee9fb;
  color: #5a3fc0; font-size: 22px; line-height: 1; cursor: pointer;
}
.topbar-title { flex: 1; font-size: 17px; font-weight: 700; color: #3b2d66; }
.topbar-right { font-size: 13px; color: #6b4ec8; font-weight: 600; }
.main { flex: 1; padding: 18px 16px 40px; max-width: 640px; width: 100%; margin: 0 auto; }

/* ---------------- 首页卡片 ---------------- */
.hero {
  background: linear-gradient(135deg, #6b4ec8, #8f6ff0);
  border-radius: 20px; padding: 22px 20px; color: #fff; margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(107, 78, 200, .28);
}
.hero-hi { font-size: 14px; opacity: .85; }
.hero-title { font-size: 21px; font-weight: 700; margin: 6px 0 12px; }
.hero-stats { display: flex; gap: 18px; }
.hero-stat b { display: block; font-size: 22px; }
.hero-stat span { font-size: 12px; opacity: .82; }

.card {
  background: #fff; border-radius: 18px; padding: 18px; margin-bottom: 14px;
  box-shadow: 0 6px 22px rgba(80, 60, 160, .08);
}
.card-title { font-size: 15px; font-weight: 700; color: #3b2d66; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-title .tag { font-size: 11px; background: #eee9fb; color: #6b4ec8; padding: 2px 10px; border-radius: 999px; font-weight: 600; }

/* 每日目标进度 */
.goal-row { display: flex; gap: 10px; margin-bottom: 12px; }
.goal-cell {
  flex: 1; border-radius: 14px; padding: 14px 8px; text-align: center;
  background: #f4f1fd; border: 2px dashed #d8cff5; color: #9a8fc7; font-size: 13px;
}
.goal-cell.done { background: linear-gradient(135deg, #6b4ec8, #8f6ff0); border: 2px solid transparent; color: #fff; }
.goal-cell b { display: block; font-size: 18px; margin-bottom: 2px; }

/* 章节列表 */
.chapter-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 14px; background: #f8f6fd; margin-bottom: 10px;
  cursor: pointer; transition: transform .12s, background .2s; border: 1.5px solid transparent;
}
.chapter-item:active { transform: scale(.98); }
.chapter-item.locked { opacity: .55; }
.chapter-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #6b4ec8, #8f6ff0); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.chapter-info { flex: 1; }
.chapter-info b { font-size: 15px; color: #3b2d66; display: block; }
.chapter-info span { font-size: 12px; color: #8a80b0; }
.chapter-go { color: #b3a6e0; font-size: 20px; }

/* ---------------- 答题界面 ---------------- */
.q-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-bar { flex: 1; height: 8px; border-radius: 99px; background: #e8e2fa; overflow: hidden; }
.q-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6b4ec8, #8f6ff0); transition: width .35s; }
.q-count { font-size: 13px; color: #6b4ec8; font-weight: 700; white-space: nowrap; }

.q-card { background: #fff; border-radius: 18px; padding: 22px 18px; box-shadow: 0 6px 22px rgba(80,60,160,.08); }
.q-stem { font-size: 17px; line-height: 1.75; color: #2b2440; margin-bottom: 18px; }
.q-stem sup { font-size: 11px; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  padding: 14px 16px; border-radius: 14px; border: 2px solid #e8e2fa; background: #faf9fe;
  font-size: 15.5px; cursor: pointer; transition: all .15s; text-align: left;
}
.choice:active { transform: scale(.98); }
.choice.selected { border-color: #6b4ec8; background: #eee9fb; }
.choice.right { border-color: #2fbf71; background: #e6f9ee; color: #1d8a4d; font-weight: 700; }
.choice.wrong { border-color: #e05a5e; background: #fdecec; color: #c23a3e; }

.input-row { display: flex; gap: 10px; }
.input-row input {
  flex: 1; padding: 13px 15px; border: 2px solid #e8e2fa; border-radius: 14px; font-size: 16px; outline: none;
}
.input-row input:focus { border-color: #6b4ec8; }

.explain-box {
  margin-top: 16px; padding: 15px 16px; border-radius: 14px;
  background: #f4f1fd; border-left: 4px solid #6b4ec8;
  font-size: 14px; line-height: 1.8; color: #4a3f75;
}
.explain-box b { color: #4a2fb0; }

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

/* 结果页 */
.result-hero { text-align: center; padding: 30px 18px; }
.result-emoji { font-size: 58px; }
.result-title { font-size: 22px; font-weight: 700; color: #3b2d66; margin: 10px 0 6px; }
.result-sub { font-size: 14px; color: #8a80b0; line-height: 1.7; }
.reward-row { display: flex; justify-content: center; gap: 14px; margin: 18px 0; }
.reward-pill { background: #fff; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(80,60,160,.12); }
.reward-pill.star { color: #d98e04; }
.reward-pill.cardp { color: #6b4ec8; }
.result-early {
  margin: 4px auto 0; max-width: 420px; font-size: 13px; line-height: 1.7;
  color: #a06a1c; background: #fdf6e8; border-radius: 10px; padding: 8px 14px;
}

/* ---------------- 会了清单 ---------------- */
.mastered-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #f8f6fd; border-radius: 12px; margin-bottom: 8px; font-size: 14px;
}
.mastered-item .m-check { color: #2fbf71; font-size: 17px; }
.mastered-item .m-date { margin-left: auto; font-size: 11px; color: #a99fd0; }
.empty-tip { text-align: center; color: #a99fd0; font-size: 13.5px; padding: 30px 10px; line-height: 1.8; }

/* ---------------- 塔罗模块（金箔星盘 gold-celestial） ----------------
   风格来源：用户 2026-10-13 定稿——金箔压纹牌面 + 深色星盘背景 + 红绸牌名条 + 奶油金牌背 */
.tarot-stage {
  background:
    radial-gradient(circle at 18% 12%, rgba(212,175,55,.16), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(212,175,55,.12), transparent 42%),
    linear-gradient(160deg, #141b36, #0c1022 62%, #182142);
  border: 1.5px solid rgba(212,175,55,.5);
  border-radius: 20px; padding: 26px 20px; text-align: center; color: #f0dfae;
  box-shadow: 0 12px 36px rgba(10, 12, 30, .55); margin-bottom: 16px;
}
.tarot-stage h2 { font-size: 19px; margin-bottom: 6px; color: #f0d98c; letter-spacing: 3px; }
.tarot-stage .ts-sub { font-size: 13px; opacity: .82; line-height: 1.7; }

/* 牌面：深色星盘 + 金箔边框 + 红绸牌名条 */
.tarot-card-face {
  width: 132px; height: 208px; margin: 18px auto; border-radius: 12px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 11%, rgba(255,255,255,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 42%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 58%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 80%, rgba(255,255,255,.3) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 34%, #2a3358, #131a33 55%, #0c1022);
  border: 2px solid #c9a24c;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  color: #f0d98c; position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 18px rgba(212,175,55,.18);
}
.tarot-card-face .tc-frame {
  position: absolute; inset: 6px; border-radius: 8px;
  border: 1px solid rgba(212,175,55,.75); pointer-events: none;
}
.tarot-card-face .tc-frame::before, .tarot-card-face .tc-frame::after {
  content: "✦"; position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #d9b75c; background: #131a33; padding: 0 4px; line-height: 1;
}
.tarot-card-face .tc-frame::before { top: -5px; }
.tarot-card-face .tc-frame::after { bottom: -5px; }
.tarot-card-face .tc-num {
  margin-top: 13px; font-size: 12px; letter-spacing: 3px; color: #e8c96a;
  border: 1px solid rgba(212,175,55,.6); border-radius: 999px; padding: 2px 10px;
}
.tarot-card-face .tc-art { text-align: center; position: relative; padding: 6px 0; }
.tarot-card-face .tc-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,106,.32), transparent 68%);
}
.tarot-card-face .tc-symbol {
  font-size: 42px; line-height: 1.1; position: relative;
  background: linear-gradient(180deg, #f8e7b0, #d4af37 55%, #a87c2a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(212,175,55,.45));
}
.tarot-card-face .tc-quality { margin-top: 6px; font-size: 11px; letter-spacing: 4px; color: #d9b75c; }
.tarot-card-face .tc-ribbon {
  width: 100%; padding: 7px 8px 10px; margin-bottom: 7px;
  background: linear-gradient(180deg, #b3282d, #8c1f24);
  color: #f6df9e; font-size: 13px; font-weight: 700; letter-spacing: 4px; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 88% 100%, 12% 100%, 0 66%);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* 牌背：奶油金牌面 + 星盘罗盘（SVG） */
.tarot-card-back {
  width: 110px; height: 168px; margin: 18px auto; border-radius: 12px;
  background: linear-gradient(160deg, #f7ecd0, #ecd9a8);
  border: 2px solid #c9a24c; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.tarot-card-back .tc-back-svg { width: 100%; height: 100%; display: block; }

.tarot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px; }
.tarot-cell { text-align: center; }
.tarot-cell .tc-mini {
  width: 100%; aspect-ratio: 74/112; border-radius: 10px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 32%, #26305a, #10162c);
  border: 1.5px solid #c9a24c; color: #e8c96a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; padding: 4px;
}
.tarot-cell .tc-mini .tcm-num { font-size: 9px; opacity: .85; letter-spacing: 1px; }
.tarot-cell .tc-mini .tcm-sym { font-size: 19px; line-height: 1.1; }
.tarot-cell .tc-mini .tcm-name { font-size: 8.5px; letter-spacing: 1px; color: #d9b75c; }
.tarot-cell .tc-mini.locked {
  background: repeating-linear-gradient(45deg, #d9c894, #d9c894 6px, #e6d7ac 6px, #e6d7ac 12px);
  color: #8c7a45; border-color: #bfa45e;
}
.tarot-cell .tcm-label { font-size: 10.5px; color: #6b628f; margin-top: 4px; line-height: 1.3; }

/* 抽牌动画 */
.draw-btn {
  background: linear-gradient(135deg, #f5c542, #f0a020); color: #4a2d00; border: none;
  border-radius: 999px; padding: 13px 34px; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(240, 160, 32, .4);
}
.draw-btn:disabled { opacity: .5; cursor: not-allowed; }
.reveal-anim { animation: reveal .6s ease; }
@keyframes reveal {
  0% { transform: rotateY(90deg) scale(.7); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.lesson-box {
  background: rgba(255,255,255,.14); border-radius: 14px; padding: 14px 16px; margin: 12px 0;
  font-size: 14px; line-height: 1.8; text-align: left;
}
.lesson-box b { color: #ffd97a; }

/* 停止权 */
.stop-tip {
  margin-top: 18px; text-align: center; font-size: 12.5px; color: #a99fd0; line-height: 1.8;
}
.stop-tip button { background: none; border: none; color: #6b4ec8; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* Toast */
#toastLayer { position: fixed; top: 70px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast {
  background: rgba(43, 36, 64, .92); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; animation: toastIn .25s ease;
}
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 星尘粒子动画（E1 即时反馈） */
.spark { position: fixed; pointer-events: none; font-size: 20px; z-index: 300; animation: sparkUp .9s ease forwards; }
@keyframes sparkUp {
  0% { transform: translateY(0) scale(.6); opacity: 1; }
  100% { transform: translateY(-70px) scale(1.25); opacity: 0; }
}

@media (min-width: 700px) {
  .main { padding: 26px 24px 50px; }
  .tarot-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ======================= Phase 1：三科切换 + 语文/英语题型 ======================= */
.subject-row { display: flex; gap: 10px; margin-bottom: 4px; }
.subject-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #f5f2ff; border: 1.5px solid #e4ddf8; border-radius: 14px;
  padding: 12px 6px; cursor: pointer; transition: transform .15s, border-color .15s;
  font-family: inherit;
}
.subject-btn:active { transform: scale(.97); border-color: #6b4ec8; }
.subject-btn .sb-icon { font-size: 22px; line-height: 1; }
.subject-btn .sb-name { font-size: 14px; font-weight: 700; color: #3a2f5c; }
.subject-btn .sb-desc { font-size: 10.5px; color: #8a80b0; text-align: center; line-height: 1.4; }

.subject-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.subject-tab {
  flex: 1; padding: 9px 0; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #e4ddf8; background: #fff; color: #6f64a0;
  font-size: 13px; font-weight: 600; font-family: inherit;
}
.subject-tab.on { background: #6b4ec8; border-color: #6b4ec8; color: #fff; }

/* 语文/英语的材料题（新闻、语段） */
.q-material {
  margin: 8px 0 2px; padding: 12px 14px; border-radius: 12px;
  background: #f7f5ff; border-left: 3px solid #6b4ec8;
  font-size: 13.5px; line-height: 1.9; color: #443a68; text-align: left;
}
.q-stem { line-height: 1.85; }

/* ======================= Phase 2：错题口袋 + 每日混合快闪 ======================= */
.badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: #e05a5e; color: #fff; font-size: 11px; font-weight: 700;
}
.wrong-stages { display: flex; gap: 8px; }
.stage-pill {
  flex: 1; padding: 9px 4px; border-radius: 12px; background: #f5f2ff;
  border: 1.5px solid #e4ddf8; text-align: center;
}
.stage-pill b { display: block; font-size: 13px; color: #3a2f5c; }
.stage-pill span { display: block; font-size: 10.5px; color: #8a80b0; margin-top: 2px; }
.wrong-item {
  padding: 11px 12px; margin: 8px 0; border-radius: 12px;
  background: #faf9ff; border: 1px solid #e9e3fb;
}
.wrong-item.due { border-color: #6b4ec8; background: #f3efff; }
.wi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.wi-subj { font-size: 11px; color: #6b4ec8; font-weight: 600; }
.wi-stage { font-size: 10.5px; color: #8a80b0; white-space: nowrap; }
.wi-stem { font-size: 12.5px; line-height: 1.7; color: #443a68; }
.wi-meta { font-size: 10.5px; color: #a49bc4; margin-top: 5px; }
.grad-note {
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: #eef7f1; color: #2c7a52; font-size: 12px; line-height: 1.7;
}
.due-banner { border-left: 4px solid #6b4ec8; cursor: pointer; }
.clickable { cursor: pointer; }
.wrong-summary { font-size: 12.5px; color: #5a4e86; line-height: 1.9; }

/* ======================= Phase 3：小老师关卡 + 校内作业 ======================= */
.quick-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.quick-grid .btn { flex: 1 1 42%; }
.teach-topic {
  font-size: 14.5px; color: #3b2d66; background: #f4f1fd;
  border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; line-height: 1.7;
}
.teach-steps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.teach-step {
  display: flex; gap: 10px; align-items: baseline;
  background: #f8f6fd; border-radius: 12px; padding: 10px 12px;
  font-size: 13px; color: #8a80b0; line-height: 1.6;
}
.teach-step b { color: #6b4ec8; font-size: 13.5px; white-space: nowrap; }
.teach-change { text-align: right; }
.teach-change .btn { width: auto; padding: 8px 14px; font-size: 12.5px; }
.rec-bar { display: flex; align-items: center; gap: 12px; }
.rec-bar .btn-primary { width: auto; padding: 11px 18px; flex-shrink: 0; }
.rec-meta { font-size: 12.5px; color: #8a80b0; margin-top: 8px; line-height: 1.7; }
.rec-meta b { color: #6b4ec8; }
.rec-privacy { margin-top: 10px; font-size: 12px; color: #a99fd0; line-height: 1.7; }
.teach-text {
  width: 100%; min-height: 96px; padding: 12px 14px;
  border: 2px solid #e8e2fa; border-radius: 14px;
  font-size: 15px; line-height: 1.7; outline: none; resize: vertical;
  box-sizing: border-box; font-family: inherit; color: #2b2440;
}
.teach-text:focus { border-color: #6b4ec8; }
.hw-subj-row { display: flex; gap: 8px; margin-bottom: 12px; }
.hw-num-row { display: flex; gap: 14px; margin-bottom: 12px; }
.hw-num-row label { font-size: 14px; color: #4a3f75; display: flex; align-items: center; gap: 6px; }
.hw-num-row input {
  width: 72px; padding: 9px 12px; border: 2px solid #e8e2fa;
  border-radius: 12px; font-size: 15px; outline: none;
}
.hw-num-row input:focus { border-color: #6b4ec8; }
.hw-today {
  margin-top: 10px; font-size: 13px; color: #2c7a52;
  background: #e6f9ee; border-radius: 12px; padding: 9px 14px; line-height: 1.7;
}

/* ======================= Phase 4：本周报告（家长周报 · 可打印） ======================= */
.report-goal {
  margin-top: 10px; padding: 11px 14px;
  background: linear-gradient(135deg, #fff7e6, #fdeecb);
  border: 1.5px solid #e8c477; border-radius: 12px;
  font-size: 13px; color: #7a5a17; line-height: 1.8;
}
.report-goal b { color: #b3282d; font-size: 14.5px; }
.report-days { display: flex; flex-direction: column; gap: 8px; }
.report-day {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f8f6fd; border-radius: 11px; padding: 9px 13px;
  font-size: 13px; color: #4a3f75; line-height: 1.7;
}
.rd-date {
  font-size: 11.5px; color: #6b4ec8; background: #ece7fb;
  border-radius: 8px; padding: 2px 9px; white-space: nowrap;
}
.rd-tag {
  margin-left: auto; font-size: 11px; color: #fff;
  background: linear-gradient(135deg, #6b4ec8, #8f6ff0);
  border-radius: 8px; padding: 2px 9px; white-space: nowrap;
}

/* ---- 打印：只留报告正文，隐藏按钮/导航/提示 ---- */
@media print {
  .topbar-back, .topbar-right, .no-print, .q-actions, .stop-tip, #toastLayer { display: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .report-goal { border-color: #c9a24c !important; }
  a[href]::after { content: none !important; }
}

/* ======================= Phase 5：英语知识点集中展示（点 → 线 → 面） =======================
   点 = 题内 KP 标签 + 迷你讲解卡；线 = 单元语法卡；面 = 知识地图（P2）
   设计红线：每卡 ≤5 信息块，易错提醒必备，零图片资产 */

/* ---- 通用弹层 ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(43, 36, 64, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px; animation: fadeIn .18s ease;
}
.modal-box {
  width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 20px 18px;
  box-shadow: 0 18px 50px rgba(43, 36, 64, .3);
  animation: slideUp .22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---- 迷你讲解卡（点）---- */
.kp-head {
  font-size: 17px; font-weight: 700; color: #3b2d66;
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.kp-unit {
  font-size: 11px; background: #ece7fb; color: #6b4ec8;
  border-radius: 999px; padding: 2px 10px; font-weight: 600;
}
.kp-sec { margin-bottom: 12px; }
.kp-sec > b {
  display: block; font-size: 12px; color: #8a80b0; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 6px;
}
.kp-def {
  font-size: 14px; line-height: 1.85; color: #2b2440;
  background: #f8f6fd; border-radius: 12px; padding: 11px 13px;
  border-left: 3px solid #8f6ff0;
}
.kp-def b { color: #5a3fc0; }
.kp-ex {
  background: #f4f9ff; border-radius: 11px; padding: 9px 12px; margin-bottom: 6px;
  border-left: 3px solid #6ea8e8;
}
.kp-en { display: block; font-size: 13.5px; color: #2b4a80; font-weight: 600; line-height: 1.7; }
.kp-cn { display: block; font-size: 12px; color: #7d92b8; line-height: 1.6; margin-top: 2px; }
/* 数学 worked example：完整解题步骤（步骤逐步给，例题效应） */
.kp-ex-math .kp-en { margin-bottom: 4px; }
.kp-steps {
  margin: 4px 0 2px; padding-left: 20px;
  font-size: 13px; color: #2b4a80; line-height: 1.9;
}
.kp-steps li { margin-bottom: 2px; }
.kp-steps li::marker { color: #6ea8e8; font-weight: 700; }
.kp-ex-math .kp-cn { font-style: italic; }
.kp-warn {
  background: #fff6f0; border-radius: 12px; padding: 11px 13px;
  border-left: 3px solid #e8956a;
}
.kp-warn > b { color: #c77b2d; }
.kp-pit { font-size: 13px; color: #8a5a35; line-height: 1.8; }
.kp-pit + .kp-pit { margin-top: 4px; }
.kp-pit b { color: #b3282d; }

/* ---- 检索填空（先想再看答案）---- */
.recall-item {
  background: #f0fdf4; border-radius: 11px; padding: 10px 12px; margin-bottom: 6px;
  border-left: 3px solid #2fbf71;
}
.recall-q { font-size: 13.5px; color: #1d5c3a; line-height: 1.8; }
.recall-q b { color: #17794a; }
.recall-btn {
  margin-top: 6px; border: 1.5px solid #2fbf71; background: #fff; color: #1f9d5e;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 14px; cursor: pointer;
}
.recall-btn:active { transform: scale(.96); }
.recall-a {
  margin-top: 6px; font-size: 13.5px; color: #17794a; font-weight: 700;
  background: #dcfce7; border-radius: 8px; padding: 5px 10px; display: inline-block;
}

/* ---- 弹层按钮行 ---- */
.kp-actions { display: flex; gap: 10px; margin-top: 14px; }
.kp-actions .btn { flex: 1; width: auto; padding: 12px 14px; font-size: 14px; }

/* ---- 单元语法卡（线）---- */
.ucard-modal .kp-head { font-size: 18px; }
.ucard-cn { font-size: 13px; color: #8a80b0; line-height: 1.8; margin-bottom: 12px; }
.ucard-bridge {
  font-size: 13px; color: #5a3fc0; line-height: 1.8;
  background: #f3eeff; border-radius: 10px; padding: 9px 12px;
}
.ucard-grammar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ug-item {
  display: flex; align-items: baseline; gap: 10px;
  background: linear-gradient(135deg, #f3eeff, #eef2ff);
  border-radius: 12px; padding: 11px 13px;
  border: 1.5px solid #e0d6f8;
}
.ug-item b {
  font-size: 13.5px; color: #4a2fb0; white-space: nowrap; flex-shrink: 0;
  background: #fff; border-radius: 8px; padding: 2px 9px;
}
.ug-item span { font-size: 12.5px; color: #5a4d8a; line-height: 1.7; }

/* ---- 题内 KP 标签行（点入口）---- */
.kp-tag-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 2px;
}
.kp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid #c9b8f5; background: linear-gradient(135deg, #f3eeff, #ece7fb);
  color: #5a3fc0; font-size: 12.5px; font-weight: 700;
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: transform .12s, box-shadow .2s;
  box-shadow: 0 3px 10px rgba(107, 78, 200, .14);
}
.kp-tag:active { transform: scale(.95); }
.kp-tag-hint {
  font-size: 10.5px; color: #8a80b0; font-weight: 400;
  border-left: 1px solid #d8cff5; padding-left: 6px;
}
.kp-ucard-btn {
  border: 1.5px solid #d8cff5; background: #fff; color: #6b4ec8;
  font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
}
.kp-ucard-btn:active { transform: scale(.95); }

/* ---- 知识地图（面）：掌握状态四色 ---- */
.kpmap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kpmap-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kpmap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #e6e0f5; background: #faf8ff; color: #4a3f7a;
  font-size: 12.5px; font-weight: 600; border-radius: 999px;
  padding: 7px 12px; cursor: pointer; transition: transform .12s;
}
.kpmap-chip:active { transform: scale(.95); }
.kpmap-chip .kpm-state {
  font-size: 10px; font-weight: 700; border-radius: 999px;
  padding: 1px 7px; background: #ece7fb; color: #6b4ec8;
}
.kpmap-chip.st-new { border-color: #ddd7ee; background: #f7f5fc; color: #8a80b0; }
.kpmap-chip.st-new .kpm-state { background: #eceaf3; color: #8a80b0; }
.kpmap-chip.st-weak { border-color: #f0b3b5; background: #fff1f1; color: #b3282d; }
.kpmap-chip.st-weak .kpm-state { background: #ffdcdc; color: #b3282d; }
.kpmap-chip.st-learning { border-color: #f0d49b; background: #fff8ea; color: #b07b1e; }
.kpmap-chip.st-learning .kpm-state { background: #ffefd0; color: #b07b1e; }
.kpmap-chip.st-mastered { border-color: #a8e0bf; background: #f0fbf4; color: #1f9d5e; }
.kpmap-chip.st-mastered .kpm-state { background: #d8f5e3; color: #1f9d5e; }
.kpmap-actions { display: flex; gap: 10px; margin-top: 12px; }
.kpmap-actions .btn { flex: 1; width: auto; padding: 11px 12px; font-size: 13.5px; }

/* ---- 周报"薄弱 TOP3"回链行（每科各 TOP3）---- */
.kp-weak-subj {
  font-size: 12.5px; font-weight: 700; color: #5a3fc0; letter-spacing: .04em;
  margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1.5px dashed #e0d6f8;
}
.kp-weak-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font: inherit; color: #2b2440; cursor: pointer;
  background: #f8f6fd; border: 1.5px solid #e6e0f5; border-radius: 12px;
  padding: 11px 13px; margin-bottom: 8px; transition: transform .12s;
}
.kp-weak-row:active { transform: scale(.98); }
.kp-weak-no {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #8f6ff0; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.kp-weak-meta { margin-left: auto; font-size: 11.5px; color: #8a80b0; white-space: nowrap; }

/* ---------------- 备案信息页脚（合规悬挂，禁止删除） ---------------- */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  text-align: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  font-size: 11px; line-height: 1.5; color: rgba(70, 58, 110, .55);
  background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,0));
  pointer-events: none;
}
.site-footer a { color: inherit; text-decoration: none; pointer-events: auto; }
.site-footer-sep { margin: 0 6px; }