/* ============================================================
 * 主题层（在 styles.css 之后加载）：
 *  1) 自由响应式：不再是固定 480px 的"手机框"，任何宽度都用满、都好看
 *  2) 视觉升级：极光背景、玻璃卡片、柔光按钮、微交互；prefers-reduced-motion / 用户开关时全部退化为静态
 * ============================================================ */
:root {
  --content-max: 1180px;
  --page-pad: clamp(12px, 2.4vw, 28px);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .55);
  --glow-1: 23, 105, 194;   /* primary rgb */
  --glow-2: 185, 71, 28;    /* accent rgb */
  --glow-3: 12, 163, 12;    /* good rgb */
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 12px 32px -18px rgba(23, 105, 194, .35), 0 8px 24px -16px rgba(11, 11, 11, .16);
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html { font-size: clamp(15px, 0.9vw + 11px, 17px); }
body { min-height: 100vh; background: var(--bg); }

/* ---------- 极光背景 + 粒子层 ---------- */
#aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; mix-blend-mode: multiply; }
#aurora .a1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle at 30% 30%, rgba(var(--glow-1), .55), transparent 62%); animation: drift1 26s var(--ease) infinite alternate; }
#aurora .a2 { width: 46vmax; height: 46vmax; right: -16vmax; top: 6vmax; background: radial-gradient(circle at 60% 40%, rgba(var(--glow-2), .38), transparent 62%); animation: drift2 32s var(--ease) infinite alternate; }
#aurora .a3 { width: 40vmax; height: 40vmax; left: 26vw; bottom: -20vmax; background: radial-gradient(circle at 50% 50%, rgba(var(--glow-3), .28), transparent 64%); animation: drift3 38s var(--ease) infinite alternate; }
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
@keyframes drift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vw, 7vh, 0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-8vw, 10vh, 0) scale(.95); } }
@keyframes drift3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6vw, -9vh, 0) scale(1.1); } }
@media (prefers-color-scheme: dark) {
  :root { --glass: rgba(30, 31, 35, .66); --glass-strong: rgba(30, 31, 35, .84); --glass-line: rgba(255, 255, 255, .08); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -20px rgba(0, 0, 0, .8); }
  #aurora span { mix-blend-mode: screen; opacity: .35; }
}

/* ---------- 布局：流式宽度，宽屏自动分栏 ---------- */
#app, #app.wide { max-width: none; width: 100%; margin: 0; background: transparent; box-shadow: none; position: relative; z-index: 1; }
@media (min-width: 560px) { body { background: var(--bg); } #app { box-shadow: none; } }
#topbar { padding-left: max(var(--page-pad), env(safe-area-inset-left)); padding-right: max(var(--page-pad), env(safe-area-inset-right)); background: var(--glass); border-bottom: 1px solid var(--glass-line); }
#topbar > * { position: relative; }
#topbar h1 { font-size: clamp(17px, 1.2vw + 12px, 22px); }
#topbar::before { content: ''; position: absolute; inset: 0; margin: 0 auto; max-width: var(--content-max); }
#view { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 8px var(--page-pad) calc(100px + env(safe-area-inset-bottom)); }
#ai-banner, #sync-banner { max-width: var(--content-max); margin-left: auto; margin-right: auto; }

/* 书页两栏容器：窄屏时容器不占位，卡片按 order 排回手机上的顺序（页数条→上传者→书架→简介→挑战→留言） */
.book-grid { display: flex; flex-direction: column; }
.book-grid > .book-main, .book-grid > .book-side { display: contents; }
.book-grid .bk-meta { order: 1; } .book-grid .bk-rec { order: 2; } .book-grid .bk-shelf { order: 3; } .book-grid .bk-summary { order: 4; } .book-grid .bk-challenge { order: 5; } .book-grid .bk-comments { order: 6; }
/* 宽屏：卡片自动排成两/三栏；标题卡、答题卡等占满整行 */
@media (min-width: 880px) {
  #view { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 0 20px; align-content: start; align-items: start; }
  #view > *, #view > .student-age-view > * { min-width: 0; }
  /* 首页：只有欢迎横幅、拍照入口、推荐书单通栏；其余卡片分两栏，不再把窄卡片横向拉满
     （选择器要比上面那几条 :has() 通栏规则更具体，否则首页每张卡都会被拉满整行） */
  body[data-route="/home"] #view > .student-age-view > .card:not(.hero):not(.scan-cta),
  body[data-route="/home"] #view > .student-age-view > section:not(.hero):not(.recommendations-all) { grid-column: auto; }
  body[data-route="/home"] #view > .student-age-view > .card.hero,
  body[data-route="/home"] #view > .student-age-view > .scan-cta,
  body[data-route="/home"] #view > .student-age-view > .recommendations-all { grid-column: 1 / -1; }
  #view > .card { margin: 10px 0; }
  #view > .card.hero, #view > .book-hero, #view > .card.login, #view > .quiz-card, #view > .card.full, #view > .card:has(> .tbl), #view > .card:has(> table), #view > .card:has(> .search), #view > .card:has(> form.form:not(.cform)),
  #view > form, #view > .alert, #view > .empty, #view > .card:has(.opts), #view > .card:has(.ring), #view > .card:has(.podium), #view > section:has(> .card-head > h2), #view > .card:has(> .grid-2), #view > .card:has(.quiz-progress), #view > .card:has(.cover-lg), #view > .card:has(#ingestion-upload) { grid-column: 1 / -1; }
  #view > .list, #view > .card:has(> .list) { grid-column: 1 / -1; }
  /* 学生页外层有一个年龄段包裹元素：让它不占格子，孩子们直接参与分栏 */
  #view > .student-age-view { display: contents; }
  .recommendations-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .recommendations-all > .section-title { grid-column: 1 / -1; margin: 4px 0 0; }
  .recommendations-all > .rec-grade-card { margin: 0; min-width: 0; }
  #view > .student-age-view > .card.hero, #view > .student-age-view > .book-hero, #view > .student-age-view > .card:has(.opts), #view > .student-age-view > .card:has(.ring), #view > .student-age-view > .card:has(> .tbl), #view > .student-age-view > .card:has(#ingestion-upload), #view > .student-age-view > .card:has(.podium), #view > .student-age-view > .card:has(.cover-lg), #view > .student-age-view > .card:has(> form.form:not(.cform)), #view > .student-age-view > .quiz-book, #view > .student-age-view > .quiz-top, #view > .student-age-view > .alert, #view > .student-age-view > .empty { grid-column: 1 / -1; }
  /* 答题页：单栏居中，别被拉得太宽 */
  body[data-route^="/quiz/"] #view, body[data-route^="/speak/"] #view, body[data-route^="/scan"] #view, body[data-route="/whoami"] #view, body[data-route^="/scan-jobs"] #view { display: block; max-width: 760px; }
  /* 书页：hero 通栏，下面固定两栏，卡片在各自栏里顺序排，不会因为高度不同留出大片空白 */
  #view > .book-grid, #view > .student-age-view > .book-grid { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 0 20px; align-items: start; }
  #view .book-grid > .book-main, #view .book-grid > .book-side { display: block; min-width: 0; }
  #view .book-grid > .book-main { grid-column: 1; grid-row: 1; }
  #view .book-grid > .book-side { grid-column: 2; grid-row: 1; }
  #view .book-grid > .book-main > *, #view .book-grid > .book-side > * { order: 0; }
  body[data-route^="/t"] #view { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
}
@media (min-width: 1400px) { #view { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } }

/* 底部标签栏：小屏固定在底部，宽屏变成悬浮的胶囊 */
#tabbar { max-width: none; width: 100%; background: var(--glass-strong); border-top: 1px solid var(--glass-line); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); }
#app.wide #tabbar { max-width: none; }
@media (min-width: 720px) {
  #tabbar { width: auto; min-width: 420px; max-width: 640px; left: 50%; bottom: 14px; border: 1px solid var(--glass-line); border-radius: 999px; padding: 6px 10px; box-shadow: 0 18px 40px -20px rgba(11, 11, 11, .5), 0 0 0 1px rgba(255, 255, 255, .25) inset; }
  #app.wide #tabbar { max-width: 760px; }
  .tab { padding: 6px 14px 4px; border-radius: 999px; }
  .tab.on { background: rgba(var(--glow-1), .1); }
  .tab.fab .fab-circle { margin-top: -26px; }
}

/* ---------- 卡片：玻璃质感 + 悬浮 ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card:has(> a.row:hover), a.card:hover, .card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11, 11, 11, .04), 0 22px 48px -20px rgba(23, 105, 194, .4); }
}
.card.hero { background: linear-gradient(135deg, rgba(var(--glow-1), .95), rgba(18, 79, 145, .95) 60%, rgba(var(--glow-2), .75)); border: 0; box-shadow: 0 24px 60px -24px rgba(var(--glow-1), .8); color: #fff; }
.card.hero::before { background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%); }
.card.hero .tile { background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .22); }
.tile { border-radius: 14px; }
.tile b, .stat-num, .hero .num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- 按钮：柔光 + 微交互 ---------- */
.btn { border-radius: 14px; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 10px 24px -12px rgba(var(--glow-1), .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(var(--glow-1), .9), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-ghost { background: rgba(255, 255, 255, .5); }
@media (prefers-color-scheme: dark) { .btn-ghost { background: rgba(255, 255, 255, .06); } }
.tab.fab .fab-circle { box-shadow: 0 10px 22px -8px rgba(var(--glow-1), .9), 0 0 0 5px var(--glass-strong), 0 0 24px rgba(var(--glow-1), .35); }

/* 选项按钮（答题） */
.opt { border-radius: 14px; transition: transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
@media (hover: hover) { .opt:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(var(--glow-1), .6); } }
.opt[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary), 0 12px 28px -14px rgba(var(--glow-1), .7); }

/* 页面进入动画 */
#view > *, #view > .student-age-view > * { animation: rise .45s var(--ease) both; }
#view > .student-age-view { animation: none; }
#view > *:nth-child(2) { animation-delay: .04s; } #view > *:nth-child(3) { animation-delay: .08s; } #view > *:nth-child(4) { animation-delay: .12s; } #view > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 阅读之树、榜单、徽章的高光 */
.badge-item { border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45)); border: 1px solid var(--glass-line); }
.badge-item.locked { opacity: .45; filter: grayscale(1); }
.podium-item.r1 { box-shadow: 0 16px 40px -20px rgba(250, 178, 25, .8); }
.ring { filter: drop-shadow(0 8px 16px rgba(var(--glow-1), .25)); }

/* 语音答题 */
.voice-stage { text-align: center; padding: 14px 6px; }
.voice-count { font-size: clamp(40px, 8vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.voice-mic { width: 96px; height: 96px; margin: 12px auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), #e0632e); box-shadow: 0 0 0 0 rgba(var(--glow-2), .5); }
.voice-mic.live { animation: pulse 1.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--glow-2), .55); } 100% { box-shadow: 0 0 0 26px rgba(var(--glow-2), 0); } }
.voice-level { height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; margin: 10px auto; max-width: 260px; }
.voice-level > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--good), var(--warn)); transition: width .08s linear; }
.voice-flag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--warn-soft); color: #7a5300; }

/* 积分商城 */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-item { border-radius: 16px; padding: 14px 12px; background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5)); border: 1px solid var(--glass-line); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.shop-item .shop-icon { font-size: 40px; line-height: 1; }
.shop-item .shop-cost { font-weight: 700; color: var(--primary); }
.shop-item.soldout { opacity: .5; }
.balance-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.balance-card .num { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) { .shop-item, .badge-item { background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); } }

/* ---------- 动效退化 ---------- */
@media (prefers-reduced-motion: reduce) { #aurora span, #view > *, #view > .student-age-view > *, .voice-mic.live { animation: none !important; } #particles { display: none; } }
body.no-fx #aurora, body.no-fx #particles { display: none; }
body.no-fx .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
body.no-fx #view > *, body.no-fx #view > .student-age-view > * { animation: none; }