/* ============================================================================
   app.css · 应用界面
   构成原则：大圆角、大触摸目标、明显的即时反馈。
   孩子不会"仔细看提示"——所有状态变化都必须靠视觉立刻传达。
   ========================================================================== */

/* ==========================================================================
   1. 顶栏 + 钱包
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 11, 24, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}
.topbar__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-md); letter-spacing: 0.02em; line-height: 1.1;
}
.brand__name em { font-style: normal; color: var(--c-accent); }
.brand__latin {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.26em;
  color: var(--c-muted); line-height: 1;
}

/* 钱包：分数和积分必须随时可见 —— 这是孩子持续学习的动力来源 */
.wallet { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface);
  font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 500;
}
.chip__icon { width: 20px; height: 20px; flex: none; }
.chip__k { color: var(--c-muted); font-size: var(--fs-xs); }
.chip--score .chip__v { color: var(--c-text); }
.chip--points { border-color: var(--c-brand-28); background: var(--c-brand-08); }
.chip--points .chip__v { color: var(--c-accent); }
/* 数字变化时弹一下，让孩子注意到"我刚才赚到了" */
.chip__v.is-bumped { animation: bump 520ms var(--ease-bounce); }
@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.32); color: var(--c-accent); }
  100% { transform: scale(1); }
}

.iconbtn {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: transform var(--dur-fast) var(--ease-bounce),
              border-color var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.iconbtn:active { transform: scale(0.94); }

/* ==========================================================================
   2. 按钮
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface-2); color: var(--c-text);
  font-family: var(--f-body); font-size: var(--fs-md); font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-bounce),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn--primary {
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-deep));
  border-color: transparent; color: var(--c-accent-ink); font-weight: 600;
  box-shadow: var(--sh-glow);
}
.btn--primary:hover { border-color: transparent; filter: brightness(1.06); }

.btn--ghost { background: transparent; }
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.42; pointer-events: none;
}

/* ==========================================================================
   3. 首页 Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(var(--s-6), 9vw, var(--s-7)) 0 clamp(var(--s-5), 6vw, var(--s-6));
  background: var(--c-void);
}
.hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* 遮罩：3D 是背景不是主角。少了这层，粒子叠出的亮部会吃掉文字对比度 */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4, 6, 15, 0.95) 0%, rgba(4, 6, 15, 0.82) 42%, rgba(4, 6, 15, 0.30) 74%, transparent 100%),
    linear-gradient(to top, rgba(7, 11, 24, 0.96) 0%, transparent 40%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-5); align-items: center;
}
.hero__title { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em; }
.hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__slogan {
  margin-top: var(--s-3);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  color: var(--c-accent);
}
.hero__intro { margin-top: var(--s-4); color: var(--c-text-dim); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* 吉祥物 */
.mascot { display: grid; justify-items: center; gap: var(--s-3); }
.mascot svg { width: min(100%, 260px); height: auto; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
.mascot__bubble {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-brand-28); border-radius: var(--r-md);
  background: rgba(13, 20, 40, 0.88);
  font-size: var(--fs-sm); color: var(--c-text-dim);
  max-width: 30ch; text-align: center;
}

/* ==========================================================================
   4. 区块与视图
   ========================================================================== */
.section { padding-block: clamp(var(--s-5), 6vw, var(--s-6)); position: relative; z-index: 2; }
.section__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }

.view { min-height: 60vh; padding-block: var(--s-5) var(--s-6); position: relative; z-index: 2; }
.view__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.view__head h2 { font-size: clamp(1.75rem, 4vw, var(--fs-3xl)); }
.view__back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; color: var(--c-muted); font-size: var(--fs-sm);
}
.view__back:hover { color: var(--c-accent); }

/* ==========================================================================
   5. 首页四大板块卡片
   ========================================================================== */
.modules { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.modcard {
  position: relative; display: grid; gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--c-surface), rgba(13, 20, 40, 0.5));
  text-align: left; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-bounce),
              border-color var(--dur-base) var(--ease-out);
}
.modcard:hover { transform: translateY(-6px); border-color: var(--c-brand-28); }
.modcard__no {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: 0.24em; color: var(--c-accent);
}
.modcard__icon { width: 62px; height: 62px; }
.modcard__name { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; }
.modcard__desc { font-size: var(--fs-sm); color: var(--c-text-dim); }
.modcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2); padding-top: var(--s-3);
  border-top: 1px dashed var(--c-line);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted);
}

/* ==========================================================================
   6. 进度条 / 星星
   ========================================================================== */
.bar {
  height: 10px; border-radius: var(--r-pill);
  background: var(--c-surface-3); overflow: hidden;
}
.bar > i {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-accent-deep), var(--c-accent));
  transition: width var(--dur-slow) var(--ease-out);
}
.bar--thin { height: 6px; }

.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; }
.stars svg path { fill: var(--c-surface-3); }
.stars svg.on path { fill: var(--c-accent); }

/* ==========================================================================
   7. 板块一：科普图文
   ========================================================================== */
.wordgrid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.wordcard {
  display: grid; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: left;
  transition: transform var(--dur-base) var(--ease-bounce),
              border-color var(--dur-base) var(--ease-out);
}
.wordcard:hover { transform: translateY(-5px); border-color: var(--c-brand-28); }
.wordcard__pic {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(77, 125, 255, 0.13), transparent 70%), var(--c-surface-2);
  overflow: hidden;
}
.wordcard__pic img, .wordcard__pic svg { width: 78%; height: 78%; object-fit: contain; }
.wordcard__badge {
  position: absolute; top: var(--s-2); right: var(--s-2);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(7, 11, 24, 0.78); border: 1px solid var(--c-line-strong);
  font-family: var(--f-mono); font-size: var(--fs-xs);
}
.wordcard__badge[data-done='1'] { border-color: var(--c-accent); color: var(--c-accent); }
.wordcard__body { padding: var(--s-4); display: grid; gap: var(--s-2); }
.wordcard__word {
  font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 900;
  letter-spacing: 0.02em;
}
.wordcard__phon { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-muted); }
.wordcard__zh { font-size: var(--fs-lg); }

/* ==========================================================================
   8. 跟读面板（弹层）
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: rgba(4, 5, 12, 0.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box {
  width: min(100%, 560px); max-height: 88vh; overflow-y: auto;
  padding: var(--s-5);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-bounce);
}
.modal.is-open .modal__box { transform: none; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.modal__close {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font-size: var(--fs-lg); line-height: 1;
}
.modal__close:hover { border-color: var(--c-accent); color: var(--c-accent); }

.reader__pic {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: radial-gradient(70% 70% at 50% 45%, rgba(77, 125, 255, 0.13), transparent 70%), var(--c-surface-2);
  display: grid; place-items: center;
}
.reader__pic img, .reader__pic svg { width: 160px; height: 160px; object-fit: contain; }
.reader__word {
  margin-top: var(--s-4); text-align: center;
  font-family: var(--f-display); font-size: var(--fs-3xl); font-weight: 900;
}
.reader__phon { text-align: center; font-family: var(--f-mono); color: var(--c-muted); }
.reader__zh { text-align: center; font-size: var(--fs-lg); margin-top: var(--s-1); }
.reader__tip {
  margin-top: var(--s-4); padding: var(--s-4);
  border-left: 3px solid var(--c-accent); border-radius: var(--r-xs);
  background: var(--c-brand-08);
  font-size: var(--fs-sm); color: var(--c-text-dim);
}
.reader__actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }

/* 录音按钮：录音中要有强烈的视觉状态，孩子才知道"正在录" */
.recbtn {
  position: relative; display: grid; place-items: center; gap: var(--s-2);
  min-height: 132px; width: 132px; margin-inline: auto;
  border: 2px solid var(--c-line-strong); border-radius: 50%;
  background: var(--c-surface-2);
  transition: transform var(--dur-fast) var(--ease-bounce),
              border-color var(--dur-fast) var(--ease-out);
}
.recbtn:hover { transform: scale(1.04); border-color: var(--c-accent); }
.recbtn:active { transform: scale(0.96); }
.recbtn svg { width: 44px; height: 44px; }
.recbtn__label { font-size: var(--fs-sm); color: var(--c-text-dim); }
.recbtn.is-rec {
  border-color: var(--c-coral);
  background: rgba(255, 122, 107, 0.12);
  animation: pulse 1.4s ease-in-out infinite;
}
.recbtn.is-rec .recbtn__label { color: var(--c-coral); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 107, 0.42); }
  50%      { box-shadow: 0 0 0 18px rgba(255, 122, 107, 0); }
}

.verdict {
  margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-md); background: var(--c-surface-2);
  display: grid; gap: var(--s-3); justify-items: center;
  text-align: center;
}
.verdict__score {
  font-family: var(--f-display); font-size: var(--fs-3xl); font-weight: 900;
  color: var(--c-accent); line-height: 1;
}
.hint {
  font-size: var(--fs-sm); color: var(--c-muted);
}
.notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-surface-2); border: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm); color: var(--c-text-dim);
}

/* ==========================================================================
   9. 板块二：视频闯关
   ========================================================================== */
.videolist { display: grid; gap: var(--s-4); }
.videocard {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-5); align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
}
.videocard__stage {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--c-void);
  display: grid; place-items: center;
}
.videocard__stage video { width: 100%; height: 100%; object-fit: contain; }
.videocard__info { display: grid; gap: var(--s-3); }
.videocard__title { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; }
.videocard__desc { font-size: var(--fs-sm); color: var(--c-text-dim); }
.videocard__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted);
}
/* 上传区：拖拽或点击 */
.dropzone {
  display: grid; gap: var(--s-2); place-items: center;
  padding: var(--s-5); width: 100%; height: 100%;
  border: 2px dashed var(--c-line-strong); border-radius: var(--r-md);
  color: var(--c-muted); font-size: var(--fs-sm); text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--c-accent); background: var(--c-brand-08); color: var(--c-accent);
}

/* ==========================================================================
   10. 板块三：创意打分
   ========================================================================== */
.composer { display: grid; gap: var(--s-4); }
.textarea {
  width: 100%; min-height: 220px; padding: var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-family: var(--f-body); font-size: var(--fs-md); line-height: 1.8;
  resize: vertical;
}
.textarea::placeholder { color: var(--c-muted); }
.textarea:focus-visible { border-color: var(--c-accent); }
.composer__prompts { display: grid; gap: var(--s-2); }
.composer__prompts li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--c-text-dim);
}
.composer__prompts li::before {
  content: '?'; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-brand-16); color: var(--c-accent);
  font-family: var(--f-mono); font-size: var(--fs-xs);
}

.scorepanel {
  padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--c-brand-28); background: var(--c-brand-08);
  display: grid; gap: var(--s-4);
}
.scorepanel__total {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--f-display);
}
.scorepanel__total b { font-size: var(--fs-4xl); color: var(--c-accent); line-height: 1; }
.scorepanel__total span { color: var(--c-muted); font-size: var(--fs-lg); }

.dim { display: grid; gap: var(--s-2); }
.dim__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--fs-sm);
}
.dim__row b { font-family: var(--f-mono); color: var(--c-accent); }
.dim__hint { font-size: var(--fs-xs); color: var(--c-muted); }

.quotebox {
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--c-surface); border-left: 3px solid var(--c-accent);
  font-size: var(--fs-md);
}
.advicelist { display: grid; gap: var(--s-3); }
.advicelist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--c-text-dim);
}
.advicelist li::before {
  content: '→'; color: var(--c-accent); font-family: var(--f-mono);
}

/* ==========================================================================
   11. 板块四：交易区
   ========================================================================== */
.counter {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--s-5);
}
.countercard {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
  display: grid; gap: var(--s-2);
}
.countercard--gold { border-color: var(--c-brand-28); background: var(--c-brand-08); }
.countercard__k { font-size: var(--fs-sm); color: var(--c-muted); }
.countercard__v {
  font-family: var(--f-display); font-size: var(--fs-3xl); font-weight: 900; line-height: 1;
}
.countercard--gold .countercard__v { color: var(--c-accent); }
.countercard__sub { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted); }

.shopgrid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.prizecard {
  display: grid; gap: var(--s-3); padding: var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform var(--dur-base) var(--ease-bounce),
              border-color var(--dur-base) var(--ease-out);
}
.prizecard:hover { transform: translateY(-4px); border-color: var(--c-brand-28); }
.prizecard__pic {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: radial-gradient(70% 70% at 50% 45%, rgba(77, 125, 255, 0.12), transparent 70%), var(--c-surface-2);
}
.prizecard__pic svg { width: 62%; height: 62%; }
.prizecard__name { font-family: var(--f-display); font-size: var(--fs-md); font-weight: 700; }
.prizecard__desc { font-size: var(--fs-xs); color: var(--c-muted); }
.prizecard__price {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono); font-size: var(--fs-lg); font-weight: 500;
  color: var(--c-accent);
}
/* 买不起的奖品要一眼看出来，但不能让人沮丧：降饱和 + 明确提示还差多少 */
.prizecard[data-afford='0'] { opacity: 0.62; }
.prizecard[data-afford='0'] .prizecard__price { color: var(--c-muted); }

/* ==========================================================================
   12. 管理页表单
   ========================================================================== */
.formrow {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.label { display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-dim); }
.input, .select {
  min-height: 52px; width: 100%; padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-surface-2); font-size: var(--fs-md);
}
.input:focus-visible, .select:focus-visible { border-color: var(--c-accent); }
.textarea--sm { min-height: 92px; padding: var(--s-3); }

.adminrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: center;
  padding: var(--s-3); border-bottom: 1px solid var(--c-line);
}
.adminrow:last-child { border-bottom: 0; }
.adminrow__title { font-size: var(--fs-sm); }
.adminrow__sub { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   13. 反馈：Toast / 撒花 / 空状态
   ========================================================================== */
.toasts {
  position: fixed; left: 50%; bottom: var(--s-5); z-index: 300;
  transform: translateX(-50%);
  display: grid; gap: var(--s-2); justify-items: center;
  pointer-events: none;
}
.toast {
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: rgba(13, 20, 40, 0.96);
  border: 1px solid var(--c-brand-28);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  animation: toast-in 420ms var(--ease-bounce);
}
.toast--gold { color: var(--c-accent); border-color: var(--c-accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.confetti { position: fixed; inset: 0; z-index: 250; pointer-events: none; }

.empty {
  display: grid; gap: var(--s-3); place-items: center;
  padding: var(--s-6) var(--s-4); text-align: center;
  border: 2px dashed var(--c-line-strong); border-radius: var(--r-lg);
  color: var(--c-muted);
}
.empty__icon { width: 84px; height: 84px; opacity: 0.75; }

/* 奖励飘字：+8 积分 从分数处升起 */
.flyup {
  position: fixed; z-index: 320; pointer-events: none;
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-lg);
  color: var(--c-accent); text-shadow: 0 2px 12px rgba(77, 125, 255, 0.55);
  animation: flyup 1.1s var(--ease-out) forwards;
}
@keyframes flyup {
  from { opacity: 0; transform: translateY(6px) scale(0.8); }
  30%  { opacity: 1; transform: translateY(-10px) scale(1.12); }
  to   { opacity: 0; transform: translateY(-56px) scale(0.96); }
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .mascot { order: -1; }
  .mascot svg { width: 170px; }
  .mascot__bubble { max-width: none; }
  .videocard { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* 小屏只留图标，把整条顶栏的空间让给分数和积分 */
  .brand__text { display: none; }
  .brand { flex: none; }
  .topbar__inner { gap: var(--s-2); }
  .wallet { gap: 6px; }
  .chip { padding: var(--s-2) 10px; }
  .chip__k { display: none; }
  .iconbtn { width: 44px; height: 44px; }
  .wordgrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s-3); }
  .wordcard__body { padding: var(--s-3); }
  .wordcard__word { font-size: var(--fs-lg); }
  .hero { padding-top: var(--s-5); }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   15. 顶栏 / 页脚的补充件
   ========================================================================== */
.chip__u { color: var(--c-muted); font-size: var(--fs-xs); }
.brand__mark svg { width: 100%; height: 100%; }

/* 「去兑换」在小屏上让位给钱包数字，别把顶栏挤爆 */
@media (max-width: 860px) {
  .wallet__cta { display: none; }
}

.foot {
  position: relative; z-index: 2;
  margin-top: var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
  background: rgba(4, 6, 15, 0.55);
}
.foot__inner { display: grid; gap: var(--s-3); }
.foot__brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-display); font-size: var(--fs-md); font-weight: 700;
}
.foot__mascot svg { width: 30px; height: 30px; }
.foot__links { gap: var(--s-4); font-size: var(--fs-sm); }
.foot__links a { color: var(--c-text-dim); }
.foot__links a:hover { color: var(--c-accent); }
.foot__note { font-size: var(--fs-xs); color: var(--c-muted); max-width: 70ch; }
.foot__note a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   16. 首页：规则条 / 汇率条 / 双栏区
   ========================================================================== */
.hero__stat {
  margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--c-muted);
}

.rules {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.rule {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--c-surface), rgba(13, 20, 40, 0.45));
  display: grid; gap: var(--s-2);
}
/* 顶边一小段金色，暗示这是"流程里的一步" */
.rule::before {
  content: ''; position: absolute; inset: 0 auto auto 0;
  width: 52px; height: 3px; border-radius: 0 0 3px 0;
  background: linear-gradient(90deg, var(--c-accent), transparent);
}
.rule__no {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: 0.24em; color: var(--c-accent);
}
.rule__title { font-size: var(--fs-lg); }
.rule__desc { font-size: var(--fs-sm); color: var(--c-text-dim); }

/* 汇率条：全站唯一的"公式"，要一眼看懂 */
.rate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-brand-28); border-radius: var(--r-lg);
  background: var(--c-brand-08);
}
.rate__k {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted);
}
.rate__v { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 700; }
.rate__v.is-accent { color: var(--c-accent); }
.rate__eq { font-family: var(--f-mono); color: var(--c-muted); }
.rate__hint { font-size: var(--fs-xs); color: var(--c-muted); }

.split {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.split__col { min-width: 0; }

/* ==========================================================================
   17. 通用面板（首页动态、各板块的进度块都用它）
   ========================================================================== */
.panel {
  padding: var(--s-5);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.panel__title { font-size: var(--fs-lg); }
.panel__foot { margin-top: var(--s-4); }

/* 双栏：左写右评、左记录右说明 */
.grid-2 {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  margin-top: var(--s-4);
}
.grid-2__col { min-width: 0; }

/* ==========================================================================
   18. 流水（分数 / 积分的每一次变动）
   ========================================================================== */
.ledger { display: grid; gap: 0; }
.ledger__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--c-muted);
}
.ledger__dot.is-earn { background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }
.ledger__dot.is-spend { background: var(--c-coral); }
.ledger__note { min-width: 0; color: var(--c-text-dim); }
.ledger__time { color: var(--c-muted); font-size: var(--fs-xs); }
.ledger__val { font-family: var(--f-mono); white-space: nowrap; color: var(--c-muted); }
.ledger__val.is-earn { color: var(--c-accent); }
.ledger__val.is-spend { color: var(--c-coral); }

/* ==========================================================================
   19. 状态小标 / 首页奖品速览
   ========================================================================== */
.statuspill {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted);
  white-space: nowrap;
}
.statuspill.is-ok {
  border-color: var(--c-accent); color: var(--c-accent); background: var(--c-brand-08);
}

.miniShop { display: grid; }
.miniShop__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--c-line);
}
.miniShop__row:last-child { border-bottom: 0; }
.miniShop__icon { width: 40px; height: 40px; flex: none; }
.miniShop__row b { font-size: var(--fs-sm); font-weight: 600; }
.miniShop__cost {
  display: block; font-size: var(--fs-xs); color: var(--c-muted);
}

/* ==========================================================================
   20. 图卡角标 / 空状态 / 录音回放
   ========================================================================== */
/* 角标里的星星必须缩小，否则会把整个角标撑爆 */
.wordcard__badge .stars svg { width: 13px; height: 13px; }
.wordcard__badge .stars { vertical-align: -1px; }
.wordcard__badge { white-space: nowrap; }

.empty > svg { width: 84px; height: 84px; opacity: 0.72; }
.prizecard__pic img { width: 62%; height: 62%; object-fit: contain; }
.wordcard__pic img { max-height: 100%; }

.reader__audio { width: 100%; margin-top: var(--s-3); }
.reader__status { text-align: center; }
.verdict.is-hidden, .is-hidden { display: none !important; }
.is-center { justify-content: center; }
.selfassess {
  justify-content: center; gap: var(--s-2);
  margin-top: var(--s-3);
}

/* 弹层里正文和标题的间距 */
.modal__box > h3 { margin-top: var(--s-4); }
.modal__actions { margin-top: var(--s-5); }
.modal__head .eyebrow { margin-bottom: var(--s-2); }

/* ==========================================================================
   21. 创意打分：评分面板微调 + 作品列表
   ========================================================================== */
.dim__row span { min-width: 0; }
.quotebox .eyebrow { margin-bottom: var(--s-2); }
.quotebox p { font-size: var(--fs-md); }

.idealist { display: grid; gap: var(--s-3); }
.ideacard {
  padding: var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface-2);
  display: grid; gap: var(--s-2);
}
.ideacard__head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.ideacard__head b { color: var(--c-accent); font-size: var(--fs-md); }
.ideacard__body {
  font-size: var(--fs-sm); color: var(--c-text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ideacard__praise { font-size: var(--fs-sm); color: var(--c-text); }

/* ==========================================================================
   22. 管理页：切页 / 卡片 / 表单
   ========================================================================== */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-2);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface);
}
.tab {
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--c-text-dim);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--c-accent); }
.tab.is-on {
  background: var(--c-brand-08); border-color: var(--c-brand-28);
  color: var(--c-accent); font-weight: 600;
}

.adminbody { margin-bottom: var(--s-5); }
.admincard {
  padding: var(--s-5);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface);
  display: grid; gap: var(--s-4);
}
.admincard__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--c-line);
}

.toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.field-saved { color: var(--c-accent); font-size: var(--fs-xs); margin-left: var(--s-2); }

.chk {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; font-size: var(--fs-sm); color: var(--c-text-dim);
}
.chk input { width: 22px; height: 22px; accent-color: var(--c-accent); flex: none; }

/* ==========================================================================
   23. 响应式（补充）
   ========================================================================== */
@media (max-width: 960px) {
  .split, .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rules { grid-template-columns: 1fr; }
  .panel, .admincard { padding: var(--s-4); }
  .rate { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
  .foot__links { gap: var(--s-3); font-size: var(--fs-xs); }
  .tabs { border-radius: var(--r-md); }
  .tab { padding: 0 var(--s-3); }
}