/* ============================================================
   数学岛大冒险 · 全局样式
   设计基调：明快暖色 + 圆角卡片 + 大字号（适合小学生）
   ============================================================ */
:root {
  --bg: #f2f9f6;
  --bg-soft: #f7fbf9;
  --card: #ffffff;
  --ink: #2f3a35;
  --ink-soft: #7f8d85;
  --brand: #1fa88f;
  --brand-deep: #147a66;
  --brand-soft: #d9f2ec;
  --green: #2f8f5b;
  --green-deep: #237248;
  --green-soft: #e2f5ea;
  --red: #ef6461;
  --red-soft: #fde8e8;
  --blue: #4a90d9;
  --blue-soft: #e4effa;
  --yellow: #ffc53d;
  --purple: #9b6fd9;
  --purple-soft: #f0e7fb;
  --radius: 18px;
  --shadow: 0 4px 18px rgba(52, 92, 80, 0.10);
  --shadow-lg: 0 12px 40px rgba(52, 92, 80, 0.16);
  --grad-brand: linear-gradient(135deg, #35c2a8, #128f77);
  --grad-hero: linear-gradient(135deg, #ddf2ea 0%, #f2faf6 48%, #e3effa 100%);
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  /* SVG 视觉辅助（竖式/披萨/条形图/线段图）主题色：跟随明暗模式 */
  --svg-ink: #2e3a34;      /* 主文字/数字 */
  --svg-muted: #7d8b84;    /* 次要文字 */
  --svg-track: #e2efe9;    /* 未选中扇形/底色 */
  --svg-track-stroke: #fff; /* 扇形分隔描边 */
  --svg-line: #7fa89a;     /* 轴线/外框 */
  --svg-ok: #217a4e;       /* 答案/得数 */
  --svg-visual-bg: #f4faf7; /* 视觉辅助衬底 */
}

/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141f1a;
    --bg-soft: #1b2923;
    --card: #22322b;
    --ink: #dfeae4;
    --ink-soft: #9db1a8;
    --brand: #3ecfab;
    --brand-deep: #2bb494;
    --brand-soft: #16352e;
    --green: #5ac98d;
    --green-deep: #4caf7d;
    --green-soft: #1f3329;
    --red: #f57370;
    --red-soft: #3d2221;
    --blue: #5aa3e8;
    --blue-soft: #1f2d3d;
    --yellow: #ffd666;
    --purple: #b088e8;
    --purple-soft: #2d2440;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50);
    --grad-brand: linear-gradient(135deg, #55d6bd, #23a88b);
    --grad-hero: linear-gradient(135deg, #1b2e26 0%, #24382f 48%, #1d2c38 100%);
    --svg-ink: #dfeae4;
    --svg-muted: #9db1a8;
    --svg-track: #2c4038;
    --svg-track-stroke: #22322b;
    --svg-line: #5a7568;
    --svg-ok: #5ac98d;
    --svg-visual-bg: #22322b;
  }
  body {
    background:
      radial-gradient(560px 320px at 8% -4%, rgba(62, 207, 171, 0.07), transparent 62%),
      radial-gradient(640px 380px at 96% 4%, rgba(176, 136, 232, 0.06), transparent 60%),
      radial-gradient(720px 460px at 50% 108%, rgba(90, 201, 141, 0.06), transparent 62%),
      var(--bg);
  }
  .hero::before { background: radial-gradient(circle at 35% 35%, rgba(62, 207, 171, .10), transparent 65%); }
  .hero::after { background: radial-gradient(circle at 60% 40%, rgba(90, 201, 141, .10), transparent 65%); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS 全面屏安全区:默认 0,不支持 env() 的浏览器自动忽略(整卡为独立属性,校验不整卡) */
  --sat: 0px;
  --sab: 0px;
}
body {
  font-family: var(--font);
  background:
    radial-gradient(560px 320px at 8% -4%, rgba(31, 168, 143, 0.10), transparent 62%),
    radial-gradient(640px 380px at 96% 4%, rgba(155, 111, 217, 0.10), transparent 60%),
    radial-gradient(720px 460px at 50% 108%, rgba(76, 175, 125, 0.10), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
}
@supports (padding-top: env(safe-area-inset-top)) {
  html { --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); }
}
/* 移动端:触摸无高亮闪烁、点击放大延迟、双击缩放;
   iOS 上 background-attachment: fixed 会导致滚动卡顿/背景错位,改回默认滚动 */
@media (pointer: coarse) {
  body {
    -webkit-tap-highlight-color: transparent;
    background-attachment: scroll;
  }
  button, .btn, .option-btn, .np-key, .filter-btn, .diff-chip, .avatar-option {
    touch-action: manipulation;
  }
}
::selection { background: var(--brand-soft); color: var(--brand-deep); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d5e6dd; border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b7d5c8; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.35; }
.muted { color: var(--ink-soft); font-size: 0.92em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 253, 250, 0.88);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1.5px solid rgba(205, 230, 219, 0.9);
  box-shadow: 0 2px 16px rgba(120, 80, 30, 0.06);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: calc(10px + var(--sat));
}
/* iOS 刘海屏:状态栏与顶栏同底色,内容不被刘海遮挡 */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar { padding-top: env(safe-area-inset-top); }
  .topbar-inner { padding-top: calc(10px + env(safe-area-inset-top)); }
}
.logo {
  font-size: 1.25em; font-weight: 800; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; letter-spacing: .02em;
}
.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; font-size: 1.05em;
  background: var(--grad-brand); border-radius: 13px;
  box-shadow: 0 4px 10px rgba(20, 122, 102, .3), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .2s;
}
.logo:hover .logo-badge { transform: rotate(-8deg) scale(1.08); }

/* 桌面端：显示独立按钮，隐藏下拉菜单 */
.topnav-desktop { display: flex; gap: 6px; flex: 1; }
.nav-dropdown-mobile { display: none; }

/* 导航下拉菜单（移动端使用） */
.nav-dropdown { position: relative; flex: 1; }
.nav-dropdown-btn {
  border: 2px solid var(--brand-soft); background: var(--card);
  border-radius: 12px; padding: 9px 16px;
  font-size: 0.95em; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 200px; transition: all .15s;
}
.nav-dropdown-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.nav-current-icon { font-size: 1.1em; }
.nav-current-text { flex: 1; text-align: left; }
.nav-arrow { font-size: 0.7em; color: var(--ink-soft); transition: transform .2s; }
.nav-dropdown-btn:hover .nav-arrow { transform: translateY(2px); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg);
  border: 1.5px solid rgba(205, 230, 219, 0.9);
  min-width: 180px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .2s ease;
}
.nav-dropdown-menu.show {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu-item {
  border: none; background: transparent; width: 100%;
  padding: 12px 16px; font-size: 0.95em; font-weight: 600;
  color: var(--ink); text-align: left;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s; border-bottom: 1px solid rgba(205, 230, 219, 0.4);
}
.nav-menu-item:last-child { border-bottom: none; }
.nav-menu-item:hover { background: var(--brand-soft); color: var(--brand-deep); }
.nav-menu-icon { font-size: 1.15em; }

.nav-btn {
  border: none; background: transparent; padding: 8px 12px;
  border-radius: 12px; font-size: 0.95em; color: var(--ink-soft); font-weight: 600;
  transition: all .15s;
}
.nav-btn:hover { background: var(--brand-soft); color: var(--brand-deep); }
.nav-btn.active { background: var(--brand-soft); color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px #a5d5c4; }
.user-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: 999px; padding: 5px 14px 5px 6px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .15s;
}
.user-chip:hover { transform: translateY(-1px); }
.user-avatar { font-size: 1.5em; }
.coin-badge { font-weight: 700; color: var(--brand-deep); font-size: 0.92em; }
.btn-ghost { border: 2px solid #d5e6dd; background: transparent; }

/* ---------- 按钮 ---------- */
.btn {
  border: none; border-radius: 14px; padding: 10px 20px;
  font-size: 1em; font-weight: 700; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: var(--grad-brand); color: #fff; box-shadow: 0 4px 0 var(--brand-deep), 0 8px 20px rgba(20, 122, 102, .25);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.btn-primary:hover { background: linear-gradient(135deg, #4ccdb4, #189e83); transform: translateY(-1px); box-shadow: 0 5px 0 var(--brand-deep), 0 10px 24px rgba(20, 122, 102, .3); }
.btn-primary:active { box-shadow: 0 1px 0 var(--brand-deep); transform: translateY(3px); }
.btn-green { background: linear-gradient(135deg, #5cbc8b, #3f9e6f); color: #fff; box-shadow: 0 4px 0 #357a5c; }
.btn-green:hover { transform: translateY(-1px); }
.btn-lg { padding: 14px 32px; font-size: 1.1em; border-radius: 16px; }
.btn-ghost { border: 2px solid #d5e6dd; background: transparent; }
.btn-ghost:hover { background: #e6f4ed; border-color: #b7d5c8; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 页面切换 ---------- */
.main { max-width: 1080px; margin: 0 auto; padding: 24px 20px calc(60px + var(--sab)); }
.page { display: none; }
.page.active { display: block; animation: slideUp .38s cubic-bezier(.2,.7,.3,1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 键盘焦点环（无障碍） */
:focus-visible { outline: 3px solid rgba(31, 168, 143, .5); outline-offset: 2px; border-radius: 10px; }

/* ---------- 首页 hero ---------- */
.hero {
  text-align: center; padding: 44px 20px 30px;
  background: var(--grad-hero);
  border-radius: 26px; box-shadow: var(--shadow); margin-bottom: 26px;
  position: relative; overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .8);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before { width: 300px; height: 300px; right: -80px; top: -110px; background: radial-gradient(circle at 35% 35%, rgba(31, 168, 143, .14), transparent 65%); }
.hero::after { width: 260px; height: 260px; left: -70px; bottom: -100px; background: radial-gradient(circle at 60% 40%, rgba(76, 175, 125, .20), transparent 65%); }
.hero h1 {
  font-size: 2em; margin-bottom: 8px; letter-spacing: .01em;
  background: linear-gradient(120deg, #128970, #2ba393 55%, #2f8f60);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub { color: var(--ink-soft); margin-bottom: 20px; position: relative; z-index: 1; }
.hero-floats {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-floats span {
  position: absolute; font-size: 1.5em; opacity: .28;
  animation: floaty 7s ease-in-out infinite;
  filter: saturate(.8);
}
.hero-floats span:nth-child(1) { left: 6%; top: 18%; animation-delay: 0s; }
.hero-floats span:nth-child(2) { left: 16%; top: 64%; font-size: 1.15em; animation-delay: -2.2s; }
.hero-floats span:nth-child(3) { right: 12%; top: 22%; animation-delay: -3.8s; }
.hero-floats span:nth-child(4) { right: 22%; top: 66%; font-size: 1.2em; animation-delay: -1.4s; }
.hero-floats span:nth-child(5) { left: 45%; top: 8%; font-size: 1.1em; animation-delay: -5s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}
.hero-stats {
  display: flex; justify-content: center; gap: 14px; margin-bottom: 20px;
  position: relative; z-index: 1; flex-wrap: wrap;
}
.hstat {
  background: rgba(255, 255, 255, .75); backdrop-filter: blur(4px);
  border-radius: 16px; padding: 10px 22px; min-width: 96px;
  box-shadow: 0 2px 10px rgba(52, 92, 80, .08);
  border: 1px solid rgba(255, 255, 255, .9);
}
.hstat b { display: block; font-size: 1.45em; color: var(--brand-deep); line-height: 1.2; }
.hstat span { font-size: 0.82em; color: var(--ink-soft); }
.hero .btn-lg { position: relative; z-index: 1; }
@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 0 var(--brand-deep), 0 8px 20px rgba(20,122,102,.25); }
  50% { transform: scale(1.04); box-shadow: 0 4px 0 var(--brand-deep), 0 12px 28px rgba(20,122,102,.38); }
}
/* 吉祥物：猫头鹰博士 */
.hero-mascot {
  position: absolute; left: 26px; bottom: 18px; z-index: 1;
  display: flex; align-items: flex-end; gap: 10px; pointer-events: none;
}
.mascot-body {
  font-size: 2.6em; line-height: 1;
  animation: mascotBob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(52, 92, 80, .25));
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
.mascot-bubble {
  background: #fff; border-radius: 14px 14px 14px 4px;
  padding: 8px 14px; font-size: .82em; font-weight: 700; color: var(--ink);
  box-shadow: 0 4px 14px rgba(52, 92, 80, .14), inset 0 0 0 1.5px #dfeee7;
  max-width: 200px; margin-bottom: 26px;
  animation: fadeIn .5s ease;
}

/* ---------- Twemoji 扁平图标（替代系统 emoji 字体，无黑边） ---------- */
img.emoji-img {
  width: 1em; height: 1em; display: inline; vertical-align: -0.12em;
  pointer-events: none; user-select: none;
  /* 防止emoji在题目中间造成换行 */
  white-space: nowrap;
}

/* ---------- 世界卡片 ---------- */
.worlds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-bottom: 30px;
}
.world-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; cursor: pointer; transition: all .18s; position: relative; overflow: hidden;
  border: 2px solid transparent;
}
.world-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--wc, var(--brand)), color-mix(in srgb, var(--wc, var(--brand)) 55%, #ffd08a));
  opacity: .9;
}
.world-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--wc, var(--brand)) 45%, #fff); }
.world-card.locked { opacity: .6; cursor: not-allowed; filter: grayscale(.35); }
.world-card.locked::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(130, 165, 150, .08) 0 14px, transparent 14px 28px);
}
.world-card.locked:hover { transform: none; box-shadow: var(--shadow); }
.world-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.world-icon {
  font-size: 2.1em; flex-shrink: 0;
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--wc, var(--brand)) 14%, #fff);
  border-radius: 18px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wc, var(--brand)) 25%, #fff);
}
.world-card h3 { font-size: 1.2em; margin: 0; }
.world-card p { font-size: 0.88em; color: var(--ink-soft); margin-bottom: 12px; min-height: 2.6em; }
.world-progress { display: flex; align-items: center; gap: 10px; }
.world-progress .progress-track { flex: 1; height: 12px; background: #e2efe8; box-shadow: inset 0 1px 3px rgba(52,92,80,.12); }
.world-progress .progress-fill { position: relative; }
.world-progress .progress-fill::after {
  content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2.5px var(--wc, var(--brand));
}
.world-progress b { font-size: 0.85em; color: var(--wc, var(--brand-deep)); }
.progress-track { height: 10px; background: #e2eee8; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--yellow)); border-radius: 999px; transition: width .4s ease; width: 0; }
.world-locked-tag {
  position: absolute; top: 16px; right: 14px;
  background: #eee5d8; color: var(--ink-soft); font-size: .78em;
  padding: 3px 10px; border-radius: 999px; font-weight: 700;
}

/* ---------- 首页附加卡片 ---------- */
.home-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.extra-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  border: 1.5px solid transparent;
}
.extra-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #cde8dc; }
.extra-icon {
  font-size: 1.6em; width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px #dfeee7;
}
.extra-body h3 { font-size: 1em; margin-bottom: 2px; }
.extra-body p { font-size: 0.82em; color: var(--ink-soft); }

/* ---------- 世界详情页 ---------- */
.page-head { margin-bottom: 20px; }
.page-head h2 { margin: 8px 0 4px; }
.island-banner {
  border-radius: 22px; padding: 26px; color: #fff; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--wc, var(--brand)), color-mix(in srgb, var(--wc, var(--brand)) 62%, #ffd08a));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wc, var(--brand)) 38%, transparent);
  position: relative; overflow: hidden;
}
.island-emoji {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); width: 4.2em; height: 4.2em; opacity: .3; pointer-events: none;
}
.island-banner h2 { font-size: 1.5em; text-shadow: 0 1px 3px rgba(0,0,0,.12); }
.island-banner p { opacity: .94; font-size: .95em; max-width: 640px; }
.level-list { display: flex; flex-direction: column; gap: 12px; }
.level-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; cursor: pointer; transition: all .15s; border: 2px solid transparent;
  position: relative;
}
.level-row::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 999px; background: color-mix(in srgb, var(--wc, var(--brand)) 55%, #fff);
  opacity: 0; transition: opacity .15s;
}
.level-row:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--wc, var(--brand)) 40%, #fff); }
.level-row:hover::before { opacity: 1; }
.level-row.locked { opacity: .5; cursor: not-allowed; }
.level-num {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05em; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--wc, var(--brand)) 88%, #fff), var(--wc, var(--brand)));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--wc, var(--brand)) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.level-row.done .level-num { background: linear-gradient(145deg, #63c491, var(--green-deep)); }
.level-info { flex: 1; }
.level-info h4 { font-size: 1.02em; }
.level-info p { font-size: 0.84em; color: var(--ink-soft); }
.level-state { font-size: 1.4em; }

/* ---------- 学习页 ---------- */
.lesson-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.lesson-topbar .progress-track { flex: 1; height: 12px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 8px; }
/* 步骤导航条（可点击跳转） */
.tutorial-dots {
  display: flex; justify-content: center; align-items: center; gap: 0; margin: 6px 0 10px; flex-wrap: wrap;
}
.spill {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82em; font-weight: 800; color: var(--ink-soft);
  background: #eaf4ef; box-shadow: inset 0 0 0 2px #d5e5dc;
  cursor: pointer; border: none; transition: all .18s; font-family: inherit;
}
.spill:hover:not(.on) { background: var(--brand-soft); color: var(--brand-deep); box-shadow: inset 0 0 0 2px #a5d5c4; transform: scale(1.1); }
.spill.done { background: #e9f7ef; color: var(--green-deep); box-shadow: inset 0 0 0 2px #bfe6cf; }
.spill.on {
  background: var(--grad-brand); color: #fff; box-shadow: 0 4px 10px rgba(20,122,102,.3);
  transform: scale(1.18);
}
.spill-sep { width: 18px; height: 3px; border-radius: 2px; background: #d5e5dc; flex-shrink: 0; }

.lesson-step { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 28px; position: relative; border: 1.5px solid rgba(255,255,255,.9); }
.lesson-kicker {
  display: inline-block; color: var(--brand-deep); font-weight: 800; font-size: 0.8em;
  letter-spacing: .06em; margin-bottom: 10px;
  background: var(--brand-soft); padding: 4px 14px; border-radius: 999px;
}
.lesson-step h2 {
  font-size: 1.45em; margin-bottom: 14px; position: relative; padding-bottom: 10px;
}
.lesson-step h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px;
  border-radius: 999px; background: var(--grad-brand);
}
.lesson-step p { margin-bottom: 12px; font-size: 1.02em; }
.lesson-step ul, .lesson-step ol { margin: 0 0 12px 1.4em; font-size: 1.02em; }
.lesson-step li { margin-bottom: 6px; }

.analogy-box {
  background: var(--purple-soft); border-left: 5px solid var(--purple);
  border-radius: 6px 14px 14px 6px; padding: 14px 18px; margin: 14px 0;
  animation: fadeIn .3s ease;
}
.analogy-box .ab-title { font-weight: 800; color: #7b4fc0; margin-bottom: 4px; }
.rule-box {
  background: var(--green-soft); border-left: 5px solid var(--green);
  border-radius: 6px 14px 14px 6px; padding: 14px 18px; margin: 14px 0;
  animation: fadeIn .3s ease;
}
.rule-box .rb-title { font-weight: 800; color: var(--green-deep); margin-bottom: 4px; }
.tip-box {
  background: var(--blue-soft); border-left: 5px solid var(--blue);
  border-radius: 6px 14px 14px 6px; padding: 14px 18px; margin: 14px 0;
  animation: fadeIn .3s ease;
}
.tip-box .tb-title { font-weight: 800; color: #2c6aa0; margin-bottom: 4px; }
.rule-list li { margin-bottom: 8px; }
.big-emu { font-size: 1.3em; font-weight: 700; letter-spacing: .04em; }

/* 迷你试一试 */
.mini-quiz {
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  padding: 24px; margin-top: 16px;
}
.mini-quiz h3 { margin-bottom: 10px; }
.mini-q-text { font-size: 1.08em; font-weight: 700; margin-bottom: 12px; }

/* ---------- 选项按钮 ---------- */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; counter-reset: opt; }
.option-btn {
  border: 2px solid #d5e5dc; background: #f4faf7; border-radius: 14px;
  padding: 14px 12px; font-size: 1.08em; font-weight: 700; color: var(--ink);
  transition: all .15s; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
}
.option-btn::before {
  counter-increment: opt;
  content: counter(opt, upper-alpha);
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72em; font-weight: 800; color: #7c9f92;
  background: #e6f2ec; box-shadow: inset 0 0 0 1.5px #cfe3da;
}
.option-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,122,102,.14); }
.option-btn:hover:not(:disabled)::before { background: var(--brand); color: #fff; box-shadow: none; }
.option-btn.correct {
  border-color: var(--green); background: var(--green-soft); color: #217a4e;
  animation: popCorrect .35s ease;
}
.option-btn.correct::before { content: '✓'; background: var(--green); color: #fff; box-shadow: none; }
.option-btn.wrong { border-color: var(--red); background: var(--red-soft); color: #b3322f; animation: shakeX .3s ease; }
.option-btn.wrong::before { content: '✕'; background: var(--red); color: #fff; box-shadow: none; }
@keyframes popCorrect { 0% { transform: scale(.96); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
.option-btn:disabled { cursor: default; }
.mini-feedback { min-height: 30px; font-weight: 700; margin-top: 8px; }
.mini-feedback.ok { color: var(--green-deep); }
.mini-feedback.no { color: #c04340; }

/* ---------- 练习页 ---------- */
.quiz-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.quiz-meta { font-weight: 800; color: var(--brand-deep); }
.quiz-count { font-weight: 700; color: var(--ink-soft); transition: all .2s; }
.quiz-count.urgent {
  color: var(--red); font-size: 1.1em;
  animation: urgentPulse 1s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .85; }
}
.quiz-topbar .progress-track { flex: 1; min-width: 120px; }
.hearts { letter-spacing: 2px; }
.quiz-card {
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow);
  padding: 30px; max-width: 720px; margin: 0 auto;
  border: 1.5px solid rgba(255,255,255,.9);
  animation: fadeIn .3s ease;
}
.quiz-kind {
  display: inline-block; color: var(--brand-deep); font-weight: 800; font-size: .8em;
  letter-spacing: .08em; margin-bottom: 10px;
  background: var(--brand-soft); padding: 4px 14px; border-radius: 999px;
}
.quiz-question { font-size: 1.28em; font-weight: 800; margin-bottom: 6px; line-height: 1.6; }
.quiz-visual { margin: 14px 0; display: flex; justify-content: center; background: var(--svg-visual-bg); border: 1.5px solid var(--svg-line); border-radius: 16px; padding: 14px 10px; }
.quiz-explain {
  background: var(--blue-soft); border-left: 5px solid var(--blue);
  border-radius: 6px 14px 14px 6px; padding: 14px 18px; margin-top: 16px;
  animation: fadeIn .3s ease;
}
.quiz-explain .qe-title { font-weight: 800; color: #2c6aa0; margin-bottom: 4px; }
.quiz-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.quiz-input-row { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.quiz-input {
  flex: 1; min-width: 160px; border: 2px solid #d5e5dc; border-radius: 14px;
  padding: 12px 16px; font-size: 1.15em; font-weight: 700; font-family: inherit; outline: none;
  background: #f4faf7; transition: all .15s;
}
.quiz-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31,168,143,.16); }
.quiz-input.correct { border-color: var(--green); background: var(--green-soft); }
.quiz-input.wrong { border-color: var(--red); background: var(--red-soft); }

/* ---------- 分步提示 + 错因诊断 ---------- */
.quiz-hint-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hint-btn { font-size: .9em; }
.hint-note { font-size: .78em; color: var(--ink-soft); }
.quiz-hint { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.quiz-hint-item {
  background: #fff8e1; border-left: 5px solid var(--yellow);
  border-radius: 0 12px 12px 0; padding: 10px 14px;
  animation: fadeIn .25s ease; font-size: .95em;
}
.quiz-hint-item b { display: block; color: #b07d10; margin-bottom: 2px; }
.diag-line {
  background: var(--red-soft); border-left: 5px solid var(--red);
  border-radius: 0 12px 12px 0; padding: 8px 12px; margin: 6px 0;
  color: #a83232; font-weight: 700; font-size: .95em;
}
.error-card-body .diag-line { margin-top: 10px; }
.quiz-result-screen {
  text-align: center; padding: 40px 20px; background: var(--card);
  border-radius: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.9);
}
.quiz-result-screen .big { font-size: 3em; margin-bottom: 8px; animation: popIn .4s ease; }
.quiz-result-screen h2 { margin-bottom: 8px; }
.result-stats { display: flex; justify-content: center; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.result-stats > div {
  background: var(--bg-soft); border-radius: 14px; padding: 10px 20px; min-width: 88px;
  box-shadow: inset 0 0 0 1.5px #dfeee7;
}
.result-stats b { display: block; font-size: 1.6em; color: var(--brand-deep); }
.result-stats span { font-size: .85em; color: var(--ink-soft); }
.result-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* 通关撒花 */
.confetti {
  position: absolute; top: -10px; font-size: 1.15em; pointer-events: none;
  animation: confettiFall linear forwards; z-index: 1;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

/* ---------- 错误鼓励卡 ---------- */
.error-card-overlay {
  position: fixed; inset: 0; background: rgba(20, 45, 38, .45); z-index: 300;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.error-card-overlay.show { display: flex; }
.error-card-inner {
  background: #fff; border-radius: 22px; padding: 28px; max-width: 480px; width: 100%;
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg); position: relative; animation: popIn .25s ease;
}
@keyframes popIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.error-card-title { font-size: 1.25em; font-weight: 800; margin-bottom: 12px; }
.error-card-body { font-size: 1em; margin-bottom: 16px; }
.error-card-body .ecy { font-weight: 800; color: var(--red); }
.error-card-body .ecz { font-weight: 800; color: var(--green); }
.error-card-footer { display: flex; gap: 10px; justify-content: flex-end; }
.error-card-quote { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #e2efe8; color: var(--ink-soft); font-size: .9em; font-style: italic; }
.error-card-close {
  position: absolute; top: 10px; right: 14px; border: none; background: none;
  font-size: 1.5em; color: var(--ink-soft);
}

/* ---------- 模态框 ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 45, 38, .45); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #fff; border-radius: 22px; padding: 28px; max-width: 640px; width: 100%;
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg); position: relative;
  animation: popIn .25s ease; border: 1.5px solid rgba(255,255,255,.9);
}
.modal-box h2 { margin-bottom: 12px; }
.formula-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.formula-table th, .formula-table td { border-bottom: 1.5px solid #e4f0ea; padding: 9px 8px; text-align: left; }
.formula-table th { background: var(--brand-soft); color: var(--brand-deep); }
.formula-table tr td:first-child { font-weight: 700; white-space: nowrap; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-top: 14px; }
.avatar-option {
  border: 3px solid transparent; border-radius: 16px; padding: 14px 6px; text-align: center;
  background: var(--bg-soft); transition: all .15s; font-size: 2em; cursor: pointer;
}
.avatar-option.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(31,168,143,.18); }
.name-input { width: 100%; box-sizing: border-box; margin-top: 14px; }
.profile-actions { text-align: center; margin-top: 18px; }
.avatar-option div { font-size: .45em; font-weight: 700; color: var(--ink-soft); margin-top: 4px; }
.avatar-option:hover { border-color: var(--brand); background: var(--brand-soft); }

/* 档案设置区域 */
.profile-settings {
  background: var(--bg-soft); border-radius: 14px; padding: 16px;
  margin-top: 20px; display: flex; flex-direction: column; gap: 12px;
}
.setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.setting-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.98em; font-weight: 600; color: var(--ink);
}
.setting-icon { font-size: 1.3em; }
.btn-setting {
  padding: 8px 18px; border-radius: 10px; font-size: 0.95em;
  min-width: 90px; flex-shrink: 0;
}

/* ---------- 错题本 ---------- */
.mistake-actions { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.mistake-item {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid transparent; transition: border-color .15s;
}
.mistake-item:hover { border-color: #cde8dc; }
.mistake-item .mi-icon {
  font-size: 1.4em; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-soft); border-radius: 12px;
}
.mistake-item .mi-q { font-weight: 700; }
.mistake-item .mi-meta { font-size: .84em; color: var(--ink-soft); margin-top: 3px; }
.mistake-item .mi-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.empty-tip { text-align: center; padding: 50px 20px; color: var(--ink-soft); }
.empty-tip .big { font-size: 3em; margin-bottom: 10px; display: inline-block; animation: floaty 4s ease-in-out infinite; }

/* ---------- 成就页 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; text-align: center; border: 1.5px solid transparent; transition: all .15s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #cde8dc; }
.stat-card b { display: block; font-size: 1.7em; color: var(--brand-deep); }
.stat-card span { font-size: .85em; color: var(--ink-soft); }
.section-title { margin: 6px 0 12px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.badge-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 12px; text-align: center; border: 2px solid transparent;
  transition: all .15s;
}
.badge-card:hover { transform: translateY(-3px); }
.badge-card.earned {
  border-color: var(--yellow); background: linear-gradient(160deg, #fffdf4, #fff6da);
}
.badge-card .b-icon { font-size: 2.2em; margin-bottom: 6px; filter: grayscale(1); opacity: .35; }
.badge-card.earned .b-icon { filter: none; opacity: 1; display: inline-block; animation: badgePop .5s ease; }
@keyframes badgePop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.badge-card h4 { font-size: .95em; }
.badge-card p { font-size: .78em; color: var(--ink-soft); }

/* ---------- 动画演示区 ---------- */
.anim-stage {
  background: var(--bg-soft); border: 2px dashed #d5e5dc; border-radius: 16px;
  padding: 18px 16px; margin: 14px 0; text-align: center;
  transition: border-color .2s;
}
.anim-stage:hover { border-color: #a9cfbf; }
/* 动画 SVG 多为 300-360 固定宽:小于可用宽度时按比例缩到容器内,防止窄屏横向溢出 */
.anim-stage svg, .quiz-visual svg, .lesson-step svg {
  max-width: 100%; height: auto;
  display: block; margin: 0 auto; /* 水平居中,避免左对齐造成视觉上的偏移 */
}
.anim-vis {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* 如果 SVG 真的超出,显示滚动条而不是裁剪 */
  padding: 2px; /* 防止 focus outline 被裁剪 */
}
.anim-caption { font-size: .88em; color: var(--ink-soft); margin-top: 8px; }
.anim-controls { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.anim-btn {
  border: 2px solid var(--brand); background: #fff; color: var(--brand-deep);
  border-radius: 10px; padding: 6px 16px; font-weight: 700; font-size: .9em;
  transition: all .15s;
}
.anim-btn:hover { background: var(--brand-soft); transform: translateY(-1px); }

/* ---------- 竖式工坊 ---------- */
.ws-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ws-board { display: flex; align-items: flex-end; gap: 10px; }
.ws-op { font-size: 2em; font-weight: 800; color: var(--brand-deep); padding-bottom: 76px; }
.ws-cols { display: flex; gap: 8px; }
.ws-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ws-col.next .ws-res { border-color: var(--brand); background: var(--brand-soft); }
.ws-col.next .ws-digit { color: var(--brand-deep); }
.ws-top-empty { height: 34px; }
.ws-carry, .ws-borrow {
  height: 30px; min-width: 34px; padding: 0 6px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8em; font-weight: 800; color: #8fada0; border: 2px dashed #c2d8cd;
  transition: all .2s;
}
.ws-carry { color: #8fada0; }
.ws-carry.wait, .ws-borrow.wait { background: #fff3cd; color: #b07d10; border-color: var(--yellow); cursor: pointer; animation: popIn .3s ease; }
.ws-carry.on { background: var(--brand); color: #fff; border-style: solid; border-color: var(--brand-deep); }
.ws-borrow { border-radius: 10px; }
.ws-borrow.wait { cursor: pointer; }
.ws-borrow.on { background: var(--red); color: #fff; border-style: solid; }
.ws-digit {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4em; font-weight: 800; color: var(--ink);
  border-bottom: 2px solid transparent;
}
.ws-digit s { color: var(--ink-soft); margin-right: 2px; }
.ws-res {
  width: 46px; height: 50px; border-radius: 10px; border: 2.5px solid #b9d2c7;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; font-weight: 800; background: #fff; color: var(--green);
}
.ws-res.wait { border-style: dashed; }
.ws-res.ok { border-color: var(--green); background: var(--green-soft); }
/* 除法竖式工坊（模拟课本格式：商行 / 除数)被除数 / 乘-减-落 交替） */
.ws-div-board { display: block; }
.ws-div-col { display: flex; flex-direction: column; }
.ws-div-row { display: flex; gap: 6px; padding-left: 56px; margin: 3px 0; align-items: center; }
.ws-div-row.ws-div-q { margin-bottom: 6px; }
.ws-divisor { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 50px; margin-right: 2px; font-size: 1.3em; font-weight: 800; color: var(--brand-deep); }
.ws-div-line { border-top: 2.5px solid var(--svg-line); width: 130px; margin: 3px 0 3px 56px; }
.ws-div-mid { border-top: 1.5px dashed var(--svg-line); width: 76px; margin: 3px 0 3px 56px; }
.ws-div-empty { display: inline-block; width: 34px; }
.ws-div-drop { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; font-size: 1.25em; font-weight: 800; color: var(--blue); }
/* 除法工坊：统一三列网格（除数区/十位/个位），商、乘积、余数与数位严格对齐 */
.ws-div-grid { display: grid; grid-template-columns: 64px 46px 46px; justify-content: center; row-gap: 9px; align-items: center; }
.ws-div-grid > * { justify-self: center; }
.ws-div-grid .ws-divisor { justify-self: stretch; justify-content: flex-end; padding-right: 2px; }
.ws-div-grid .ws-div-hl { grid-column: 2 / 4; justify-self: stretch; border-top: 2.5px solid var(--svg-line); }
.ws-pad { display: grid; grid-template-columns: repeat(5, 56px); gap: 8px; }
.ws-key {
  border: 2px solid #d5e5dc; background: #f4faf7; border-radius: 12px;
  font-size: 1.25em; font-weight: 800; padding: 10px 0; transition: all .12s;
}
.ws-key:hover { border-color: var(--brand); background: var(--brand-soft); }
.ws-key:active { transform: scale(.93); }
.ws-tip { min-height: 24px; font-size: .95em; color: var(--ink-soft); text-align: center; }
.ws-done { font-size: 1.15em; font-weight: 800; color: var(--green); display: flex; align-items: center; gap: 12px; }

/* ---------- 难度分级 + 错题到期 ---------- */
.diff-row { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 12px; }
.diff-chip {
  border: 2px solid #d5e5dc; background: #f4faf7; border-radius: 999px;
  padding: 6px 16px; font-weight: 700; font-size: .9em; color: var(--ink-soft); transition: all .15s;
}
.diff-chip:hover { border-color: var(--brand); }
.diff-chip.on { background: var(--brand); border-color: var(--brand-deep); color: #fff; box-shadow: 0 3px 0 var(--brand-deep); }
.mi-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.due-tag { font-size: .78em; font-weight: 700; color: var(--ink-soft); background: #eaf4ef; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.due-tag.due { color: #fff; background: var(--red); }
.mi-stage { font-size: .76em; font-weight: 700; color: var(--green-deep); background: var(--green-soft); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.drill-q { font-size: 2em !important; text-align: center; }
/* 答题数字键盘（填空/口算，手机无实体键盘也能输入） */
.num-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 340px; margin: 12px auto 0; }
.np-key {
  border: 2px solid #d5e5dc; background: #f4faf7; border-radius: 12px;
  font-size: 1.2em; font-weight: 800; padding: 10px 0; transition: all .12s;
  touch-action: manipulation; user-select: none;
}
.np-key:hover { border-color: var(--brand); background: var(--brand-soft); }
.np-key:active { transform: scale(.93); }
.np-key.np-del { color: var(--red); background: var(--red-soft); border-color: #f0c9c8; }
.btn-speak {
  border: none; background: var(--blue-soft); border-radius: 50%;
  width: 34px; height: 34px; font-size: 1em; margin-left: 10px;
  vertical-align: middle; transition: all .15s; flex-shrink: 0;
}
.btn-speak:hover { background: #d3e5f7; transform: scale(1.1); }
/* 讲解步骤标题里的朗读按钮：随 h2 字号缩小一号 */
.step-speak { width: 30px; height: 30px; font-size: .8em; }
.quiz-question { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mini-q-text { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 题目文字包成一个弹性子项：emoji 被替换成 <img> 后不再把文本拆成多个子项，
   避免 space-between 把文字拉散、断行错位；内部保持正常行内排版自然换行 */
.quiz-question .q-text, .mini-q-text .q-text { flex: 1 1 auto; min-width: 0; }

/* 防弹系统键盘的答题输入框：readonly + 自绘键盘 */
.np-input { background: var(--bg-soft); cursor: default; caret-color: transparent; user-select: none; -webkit-user-select: none; }
.np-input:focus { outline: none; border-color: #d5e5dc; }

/* ---------- 页脚 ---------- */
.footer {
  text-align: center; padding: 26px 20px; color: var(--ink-soft); font-size: .88em;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1.5px dashed #d5e5dc; margin-top: 20px;
}
.footer-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.footer-tags span {
  background: #fff; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: .88em;
  box-shadow: inset 0 0 0 1.5px #dfeee7; color: var(--ink-soft);
}

/* ---------- 响应式 ---------- */
/* 自定义练习模态框样式 */
.gen-option {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--card); border: 2px solid #d5e6dd;
  cursor: pointer; transition: all .15s;
  font-size: 0.9em;
}
.gen-option:hover { background: var(--brand-soft); border-color: var(--brand); }
.gen-option input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--brand);
}
.gen-option input:checked + span { font-weight: 700; color: var(--brand-deep); }
.custom-select, .custom-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 2px solid #d5e6dd; background: var(--card);
  font-size: 1em; font-family: var(--font);
  transition: border-color .15s;
}
.custom-select:focus, .custom-input:focus {
  outline: none; border-color: var(--brand);
}

/* 错题本筛选器 */
.mistake-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-btn {
  border: 2px solid #d5e6dd;
  background: var(--card);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all .15s;
}
.filter-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.filter-btn.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(31, 168, 143, 0.28);
}

/* 薄弱环节分析 */
.weak-box {
  background: linear-gradient(135deg, #f2faf6, #e8f6f0);
  border: 2px solid rgba(255, 197, 61, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.weak-title {
  font-weight: 800;
  color: var(--brand-deep, #0e6b58);
  margin-bottom: 10px;
  font-size: 0.95em;
}
.weak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
}
.weak-name {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink-soft, #5d7a6e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weak-bar-bg {
  flex: 1;
  height: 12px;
  background: #e0eee6;
  border-radius: 8px;
  overflow: hidden;
}
.weak-bar {
  height: 100%;
  background: linear-gradient(90deg, #3fbf9f, var(--brand, #1fa88f));
  border-radius: 8px;
  min-width: 4px;
  transition: width .4s ease;
}
.weak-num {
  width: 48px;
  text-align: right;
  font-size: 0.82em;
  font-weight: 700;
  color: var(--brand-deep, #0e6b58);
  flex-shrink: 0;
}
.weak-tip {
  margin-top: 10px;
  font-size: 0.82em;
  color: var(--ink-soft, #5d7a6e);
}

/* 学习目标卡片 */
.goal-card {
  background: linear-gradient(135deg, rgba(246,252,249,0.95), rgba(238,249,244,0.95));
  border: 2px solid rgba(31, 168, 143, 0.25);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all .2s;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.goal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}
.goal-section {
  flex: 1;
}
.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.goal-title {
  font-weight: 700;
  font-size: 0.95em;
  color: var(--ink);
}
.goal-status {
  font-weight: 700;
  color: var(--brand-deep);
  font-size: 0.9em;
}
.goal-divider {
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--brand), transparent);
  opacity: 0.3;
}

/* 成功提示动画 */
.toast-success {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(47, 143, 96, 0.4);
  z-index: 10000;
  animation: toastSlide 2s ease-out;
}
@keyframes toastSlide {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  10%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ---------- 7 天学习趋势图 ---------- */
/* 颜色按角色声明，明/暗各一套（暗色步阶单独选取并校验，非简单反转） */
.trend-viz {
  --viz-surface: var(--card);
  --viz-grid: #dfece5;
  --viz-axis: #c3d9cf;
  --viz-ink: var(--ink);
  --viz-ink-2: var(--ink-soft);
  --viz-q: #d9813f;      /* 做题数（橙）*/
  --viz-a: #2f8f60;      /* 正确率（绿）*/
  --viz-s: #4a7fd4;      /* 每题耗时（蓝）*/
  background: var(--viz-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 14px;
  margin-bottom: 22px;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  .trend-viz {
    --viz-grid: #3a332a;
    --viz-axis: #463d31;
    --viz-q: #cf8a4a;
    --viz-a: #3d9a6b;
    --viz-s: #6b97dd;
  }
}
.trend-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.trend-head h4 { font-size: 1em; }
.trend-head .trend-sub { color: var(--viz-ink-2); font-size: .85em; }
.trend-head .trend-toggle { margin-left: auto; }
.trend-toggle {
  border: 2px solid var(--viz-axis); background: transparent; color: var(--viz-ink-2);
  border-radius: 999px; padding: 4px 14px; font-size: .82em; font-weight: 700; transition: all .15s;
}
.trend-toggle:hover { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand); }
.trend-plot { display: block; width: 100%; height: auto; overflow: visible; }
.trend-plot + .trend-head { margin-top: 14px; }
/* 网格与坐标轴：一律实线细发丝线，保持退让 */
.tv-grid { stroke: var(--viz-grid); stroke-width: 1; }
.tv-axis { stroke: var(--viz-axis); stroke-width: 1; }
.tv-tick { fill: var(--viz-ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.tv-xlabel { fill: var(--viz-ink-2); font-size: 11px; }
.tv-xlabel.today { fill: var(--viz-ink); font-weight: 700; }
.tv-vlabel { fill: var(--viz-ink); font-size: 11.5px; font-weight: 700; }
.tv-bar { fill: var(--viz-q); transition: opacity .12s; }
.tv-line { fill: none; stroke: var(--viz-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tv-sline { fill: none; stroke: var(--viz-s); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 6,4; }

/* 掌握度雷达图 */
.radar-viz {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 14px;
  margin-bottom: 22px;
}
.radar-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.radar-head h4 { font-size: 1em; }
.radar-head .trend-sub { color: var(--ink-soft); font-size: .85em; }
.radar-empty {
  color: var(--ink-soft); text-align: center; padding: 14px; font-size: .9em;
}
.radar-body {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
}
.radar-plot { width: min(300px, 100%); height: auto; overflow: visible; }
.radar-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; font-size: .88em; }
.radar-li { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.radar-li b { margin-left: auto; color: var(--brand-deep, #0e6b58); }
.radar-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.radar-tip { font-size: .8em; margin-top: 6px; }
.tv-dot { fill: var(--viz-a); stroke: var(--viz-surface); stroke-width: 2; }
.tv-sdot { fill: var(--viz-s); stroke: var(--viz-surface); stroke-width: 2; }
.tv-cross { stroke: var(--viz-axis); stroke-width: 1; opacity: 0; }
.tv-hit { fill: transparent; cursor: pointer; }
.tv-hit:focus-visible { outline: none; }
.trend-viz.hovering .tv-bar { opacity: .45; }
.trend-viz.hovering .tv-bar.hl { opacity: 1; }
.trend-viz.hovering .tv-cross.hl { opacity: 1; }
.tv-empty { fill: var(--viz-ink-2); font-size: 12px; }
/* 图例：矩形键对应柱、线段键对应折线；identity 不靠颜色单独承担 */
.trend-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 2px 0; font-size: .84em; color: var(--viz-ink-2); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tl-rect { width: 12px; height: 10px; border-radius: 2px; background: var(--viz-q); }
.tl-line { width: 16px; height: 2px; border-radius: 2px; background: var(--viz-a); position: relative; }
.tl-line::after {
  content: ''; position: absolute; left: 4px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--viz-a); box-shadow: 0 0 0 2px var(--viz-surface);
}
.tl-sline { width: 16px; height: 2px; border-radius: 2px; background: var(--viz-s); position: relative; }
.tl-sline::after {
  content: ''; position: absolute; left: 4px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--viz-s); box-shadow: 0 0 0 2px var(--viz-surface);
}
/* 悬浮读数：数值主导，系列名次要 */
.trend-tip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--card); border-radius: 12px; padding: 8px 12px; min-width: 130px;
  box-shadow: var(--shadow-lg); border: 1.5px solid var(--viz-axis);
  font-size: .84em; transition: opacity .12s; z-index: 5;
}
.trend-viz.hovering .trend-tip { opacity: 1; }
.trend-tip .tt-date { color: var(--viz-ink-2); font-weight: 700; margin-bottom: 4px; }
.trend-tip .tt-row { display: flex; align-items: center; gap: 7px; }
.trend-tip .tt-row b { font-size: 1.15em; color: var(--viz-ink); font-weight: 800; }
.trend-tip .tt-row i { font-style: normal; color: var(--viz-ink-2); }
.trend-tip .tt-key { width: 14px; height: 2.5px; border-radius: 2px; flex-shrink: 0; }
/* 表格视图：每个数值都能不靠悬浮读到 */
.trend-table { width: 100%; border-collapse: collapse; font-size: .88em; margin-top: 12px; }
.trend-table th, .trend-table td { border-bottom: 1px solid var(--viz-grid); padding: 7px 8px; text-align: right; }
.trend-table th:first-child, .trend-table td:first-child { text-align: left; }
.trend-table thead th { color: var(--viz-ink-2); font-weight: 700; }
.trend-table td { font-variant-numeric: tabular-nums; }
/* 窄屏：viewBox 已按 360 重算，缩放接近 1:1，此处补回可读字号 */
@media (max-width: 640px) {
  .trend-viz { padding: 14px 12px 12px; }
  .tv-tick, .tv-xlabel { font-size: 12px; }
  .tv-vlabel { font-size: 13px; }
  .trend-table th, .trend-table td { padding: 6px 4px; }
}

/* 手机+平板：吉祥物改为文档流内居中一行，避免气泡盖住继续按钮 */
@media (max-width: 900px) {
  .hero-mascot { position: static; margin: 6px auto 0; justify-content: center; align-items: center; }
  .mascot-bubble { margin-bottom: 0; }
}

@media (max-width: 640px) {
  /* 移动端：隐藏独立按钮，显示下拉菜单 */
  .topnav-desktop { display: none; }
  .nav-dropdown-mobile { display: block; flex: 1; min-width: 0; }

  .topbar-inner { padding: 8px 12px; gap: 8px; }
  /* iOS 刘海屏:顶栏内部也计入安全区,避免内容顶到状态栏 */
  .topbar-inner { padding-top: calc(8px + var(--sat)); }
  .logo { font-size: 1.05em; }
  .logo-badge { width: 32px; height: 32px; font-size: .95em; }

  /* 导航下拉菜单移动端优化 */
  .nav-dropdown-btn { max-width: none; padding: 8px 12px; font-size: 0.9em; }
  .nav-current-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-dropdown-menu { left: 0; right: 0; min-width: auto; }

  .user-chip { flex-shrink: 0; }
  .coin-badge { font-size: .85em; }
  .user-name { display: none; } /* 移动端隐藏用户名,节省空间 */

  .hero { padding: 28px 16px 24px; }
  .hero h1 { font-size: 1.5em; }
  .hero-sub { font-size: .92em; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  .hstat { min-width: 70px; }
  .mascot-body { font-size: 2em; }
  .mascot-bubble { font-size: .75em; max-width: 150px; padding: 6px 10px; }

  /* 极窄屏(≤360):第一行继续压缩,保证 logo+头像+两钮同行 */
  @media (max-width: 360px) {
    .logo { font-size: .9em; gap: 6px; }
    .logo-badge { width: 28px; height: 28px; }
    .coin-badge { display: none; }
    /* 为 360px 宽的 SVG 腾出更多空间 */
    .main { padding-left: 8px; padding-right: 8px; }
    .anim-stage { padding: 12px 6px; }
  }

  .worlds-grid { grid-template-columns: 1fr; gap: 14px; }
  .world-card { padding: 20px; }
  .world-icon { font-size: 1.9em; width: 52px; height: 52px; }
  .world-head { gap: 12px; }
  .world-card p { min-height: 0; }
  /* 关卡难度/数量信息横向排不下的窄屏:两行显示 */
  .world-progress { flex-wrap: wrap; }
  .world-progress b { white-space: nowrap; }

  .home-extras { gap: 12px; }
  .extra-card { padding: 16px; }
  .extra-icon { font-size: 2em; }

  .main { padding: 16px 12px calc(40px + var(--sab)); }
  .lesson-step, .quiz-card { padding: 20px 16px; }
  .lesson-topbar, .quiz-topbar { gap: 10px; }
  /* 触控目标放大:按钮最少 44px 高,选项按钮全宽易点 */
  .btn { padding-top: 12px; padding-bottom: 12px; }
  .option-btn { min-height: 56px; }
  .quiz-actions { flex-wrap: wrap; }

  .options { grid-template-columns: 1fr; } /* 移动端选项单列显示 */
  .option-btn { padding: 14px 18px; }

  .tutorial-dots { gap: 0; }
  .spill { width: 30px; height: 30px; font-size: .75em; }
  .spill-sep { width: 12px; height: 2px; }

  .quiz-question { font-size: 1.15em; }
  .quiz-input { font-size: 1.05em; padding: 11px 14px; min-width: 140px; }

  .level-row { padding: 16px; }
  .level-num { width: 44px; height: 44px; font-size: 1.1em; }
  /* 窄屏关卡名可能较长,允许图标/状态不换行 */
  .level-state { flex-shrink: 0; }

  /* 竖式工坊:数字键盘与竖式操作区横向可滚动,避免挤压 */
  .anim-stage { padding: 14px 10px; }
  /* 极窄屏(≤360px):进一步减少 padding,为 360px 宽的 SVG 腾出空间 */
  .main { padding-left: 12px; padding-right: 12px; }
  .ws-board { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .ws-board .ws-cols, .ws-div-col { flex-shrink: 0; margin: 0 auto; }
  .ws-pad { grid-template-columns: repeat(5, 1fr); max-width: 100%; }

  .mistake-item { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .badges-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }

  /* 弹层贴边:手机上尽量撑满,方便单手点按 */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal-box { max-height: 88vh; border-radius: 22px 22px 14px 14px; padding: 22px 18px calc(22px + var(--sab)); }
  .error-card-overlay { padding: 16px; }
  .error-card-inner { max-height: 86vh; padding: 22px 18px; }

  /* 学习目标卡(默认三列):窄屏改为单行上下两段,避免挤压 */
  .goal-card { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .goal-divider { display: none; }

  .footer-tags { font-size: .82em; }
  .footer-tags span { padding: 3px 10px; }
}

/* 平板尺寸优化 */
@media (min-width: 641px) and (max-width: 900px) {
  .worlds-grid { grid-template-columns: repeat(2, 1fr); }
  .home-extras { grid-template-columns: repeat(2, 1fr); }
}

/* 超宽屏优化 */
@media (min-width: 1400px) {
  .main { max-width: 1280px; }
  .topbar-inner { max-width: 1280px; }
}

/* ============================================================
   Toast 提示系统
   ============================================================ */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--card);
  color: var(--ink);
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  animation: toastSlideIn 0.3s ease-out;
  border-left: 4px solid var(--brand);
}

.toast.success { border-left-color: var(--green); }
.toast.warning { border-left-color: var(--yellow); }
.toast.error { border-left-color: var(--red); }

.toast-icon {
  font-size: 1.3em;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  font-size: 0.95em;
  line-height: 1.4;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

.toast.removing {
  animation: toastSlideOut 0.3s ease-in forwards;
}

@media (max-width: 640px) {
  .toast-container {
    top: 70px;
    right: 12px;
    left: 12px;
  }
  .toast {
    min-width: auto;
    max-width: 100%;
  }
}

/* ---------- 暗色模式补充:顶栏与目标卡 ----------
   基础规则写死浅色且位于文件前部,直接属性覆盖必须排在其后才生效
   (var() 变量不受此限制,故 :root 暗色变量仍集中在文件开头) */
@media (prefers-color-scheme: dark) {
  .topbar {
    background: rgba(16, 26, 22, 0.88);
    border-bottom: 1.5px solid rgba(52, 76, 66, 0.9);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
  }
  .goal-card {
    background: linear-gradient(135deg, rgba(28, 42, 36, 0.95), rgba(33, 50, 43, 0.95));
    border-color: rgba(70, 125, 105, 0.35);
  }
}