/* ============================================================
   小彩虹 wb-base.css — 组件库基础（任务121，2026-08-29 抽出）
   来源：原 static/index.html 主 <style> 中的设计 token + wb- 系列
   约定：wb-* 为组件类，页面新增时只复用类名，0 改本文件即可
   ============================================================ */

/* ---------- 设计 Token（:root 全局变量） ---------- */
:root {
  /* 品牌主色（暖橘红，与"小彩虹"logo 呼应，老王 8-12 拍板） */
  --c-primary: #FF7B5A;
  --c-primary-deep: #E85D3D;
  --c-primary-soft: #FFF1ED;
  --c-primary-border: #FBDDD2;
  /* 强调色（蓝紫，数据/数字用） */
  --c-accent: #5B7CFA;
  --c-accent-soft: #EEF1FF;
  /* 状态色 */
  --c-success: #10B981;
  --c-success-soft: #ECFDF5;
  --c-warning: #F59E0B;
  --c-warning-soft: #FEF3C7;
  --c-danger: #EF4444;
  --c-danger-soft: #FEF2F2;
  /* 中性色（克制低对比） */
  --c-bg: #FAFAF8;
  --c-surface: #FFFFFF;
  --c-surface-2: #F4F4F2;
  --c-border: #EFEDEA;
  --c-text: #1C1917;
  --c-text-2: #6B6560;
  --c-text-3: #A8A29E;
  /* 圆角（现代温和） */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-xl: 24px;
  /* 阴影（Apple HIG 柔和） */
  --shadow-sm: 0 1px 2px rgba(28,25,23,.04);
  --shadow-card: 0 1px 3px rgba(28,25,23,.04), 0 2px 8px rgba(28,25,23,.02);
  --shadow-card-hover: 0 4px 16px rgba(28,25,23,.06);
  --shadow-btn: 0 2px 6px rgba(255,123,90,.22);
  --shadow-md: 0 8px 28px rgba(28,25,23,.08);
  --font-title: ui-rounded, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

body { background: var(--c-bg); color: var(--c-text); }

/* ---------- 卡片 wb-card ---------- */
.wb-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.wb-card-hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-card-hover); border-color:var(--c-primary-border); }

/* ---------- 按钮 wb-btn / wb-btn-outline（含触控最小高度 44px） ---------- */
.wb-btn { min-height: 44px; display:inline-flex; align-items:center; justify-content:center; gap:4px; background:var(--c-primary); color:#fff; border-radius:999px; font-weight:700; box-shadow:var(--shadow-btn); transition:transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.wb-btn:hover { filter:brightness(1.05); box-shadow:0 4px 12px rgba(255,123,90,.32); }
.wb-btn:active { transform:scale(.96); }
.wb-btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:4px; background:#fff; color:var(--c-primary); border:1.5px solid var(--c-primary-border); border-radius:999px; font-weight:700; transition:background .15s ease, border-color .15s ease; }
.wb-btn-outline:hover { background:var(--c-primary-soft); border-color:var(--c-primary); }

/* ---------- 区块标题 wb-section-title（细灰线分隔） ---------- */
.wb-section-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px; color:var(--c-text); font-family:var(--font-title); }
.wb-section-title::after { content:''; flex:1; height:1px; border-radius:1px; background:var(--c-border); margin-left:8px; }

/* ---------- 徽章 wb-badge ---------- */
.wb-badge { display:inline-flex; align-items:center; gap:2px; font-size:10px; font-weight:700; border-radius:999px; padding:2px 8px; }

/* ---------- 返回按钮 wb-back（wb-section-title 轻量版） ---------- */
.wb-back { display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:14px; padding:4px 10px 4px 4px; border-radius:999px; transition:background .15s ease; }
.wb-back:hover { background:var(--c-primary-soft); }

/* ---------- 页头 wb-header（极淡暖渐变 + 主色细底线） ---------- */
.wb-header { background:linear-gradient(180deg,#FFF4EC 0%,#FFFFFF 100%); border-bottom:1px solid var(--c-primary-border); box-shadow:0 1px 4px rgba(255,123,90,.06); }

/* 9-04 P1：sm 区间（640-767.98px）桌面 header 隐记过，治「积分牌与 logo 干涉」 */
@media (min-width: 640px) and (max-width: 767.98px) {
  .wb-header .points-demerit { display: none !important; }
}

/* ---------- 底部导航 wb-nav（白底细边框 + hover/选中提档） ---------- */
.wb-nav { background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--c-border); box-shadow:0 -2px 10px rgba(28,25,23,.04); }
.wb-nav .nav-item.active { background:var(--c-primary-soft); }
.wb-nav .nav-item { transition:background .2s ease; }
.nav-icon { transition: transform .2s ease; }
.wb-nav .nav-item .nav-icon { transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .2s ease; }
.wb-nav .nav-item:hover .nav-icon { color:var(--c-primary); transform:translateY(-1px) scale(1.1); }
.wb-nav .nav-item.active .nav-icon { color:var(--c-primary); transform:translateY(-2px) scale(1.16); filter:drop-shadow(0 2px 5px rgba(255,123,90,.4)); }

/* ---------- 全局 Tooltip（[data-tip] 属性 + 纯 CSS，仅桌面触发） ---------- */
[data-tip] { position:relative; }
[data-tip]::before, [data-tip]::after { opacity:0; pointer-events:none; transition:opacity .15s ease .08s; }
[data-tip]:hover::before, [data-tip]:hover::after, [data-tip]:focus-visible::before, [data-tip]:focus-visible::after { opacity:1; }
[data-tip]::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); background:rgba(28,25,23,.92); color:#fff; font-size:11px; font-weight:600; line-height:1; padding:6px 10px; border-radius:7px; white-space:nowrap; z-index:60; box-shadow:0 3px 10px rgba(0,0,0,.18); }
[data-tip]::before { content:''; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%); border:4px solid transparent; border-top-color:rgba(28,25,23,.92); z-index:60; }
/* 底部导航的 tip 放上方，避免被 tabbar 遮挡 */
.wb-nav [data-tip]::after { bottom:calc(100% + 10px); }
.wb-nav [data-tip]::before { bottom:calc(100% + 6px); }
/* header 顶部按钮 tip 下移一点，避免被页面边缘截断 */
.wb-header [data-tip]::after { bottom:calc(100% + 8px); }

/* ============================================================
   暗色模式（任务132：系统跟随 prefers-color-scheme）
   策略：token 反转 + 高频 Tailwind 硬编码类全局覆盖（不逐页改 HTML）
   注意：text-white 不覆盖（彩色按钮文字需白），bg-black/* 遮罩不覆盖
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* 中性色反转（品牌/状态色保留，soft 加深防刺眼） */
    --c-primary-soft: #3A241D;
    --c-primary-border: #4A3228;
    --c-accent-soft: #1E2440;
    --c-success-soft: #12302A;
    --c-warning-soft: #3A2C10;
    --c-danger-soft: #3A1D1D;
    --c-bg: #141210;
    --c-surface: #1E1B19;
    --c-surface-2: #282420;
    --c-border: #312D28;
    --c-text: #EDEAE7;
    --c-text-2: #A8A29E;
    --c-text-3: #716C66;
    /* 暗色阴影（更深更重） */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.18);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,.4);
    --shadow-btn: 0 2px 6px rgba(0,0,0,.4);
    --shadow-md: 0 8px 28px rgba(0,0,0,.5);
    color-scheme: dark;
  }
  body { background:var(--c-bg); color:var(--c-text); }
  /* 高频硬编码 Tailwind 类覆盖（页面上千处，不逐页改） */
  .bg-white { background-color:var(--c-surface) !important; }
  .bg-white\/95, .bg-white\/90, .bg-white\/80, .bg-white\/70, .bg-white\/60, .bg-white\/50, .bg-white\/30, .bg-white\/20 { background-color:rgba(30,27,25,.92) !important; }
  .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300 { background-color:var(--c-surface-2) !important; }
  .text-gray-900, .text-gray-800, .text-gray-700 { color:#E7E4E0 !important; }
  .text-gray-600, .text-gray-500 { color:#A8A29E !important; }
  .text-gray-400, .text-gray-300 { color:#78716C !important; }
  .border-gray-100, .border-gray-200, .border-gray-300 { border-color:var(--c-border) !important; }
  .placeholder-gray-300::placeholder { color:#57534E !important; }
  .placeholder-gray-400::placeholder { color:#57534E !important; }
  /* 状态 soft 底色（暗化，文字色同步提亮） */
  .bg-amber-50 { background-color:#3A2C10 !important; } .text-amber-600, .text-amber-500, .text-amber-400 { color:#F5B84B !important; }
  .bg-red-50 { background-color:#3A1D1D !important; }
  .bg-green-50 { background-color:#12302A !important; }
  .bg-blue-50, .bg-indigo-50 { background-color:#1E2440 !important; }
  .bg-green-100 { background-color:#1E4A3C !important; } .text-green-600, .text-green-700, .text-green-500 { color:#6EE7B7 !important; }
  .bg-red-100 { background-color:#4A2222 !important; } .text-red-500, .text-red-600, .text-red-400 { color:#F87171 !important; }
  .bg-amber-100 { background-color:#4A3A1A !important; }
  .bg-blue-100 { background-color:#253061 !important; } .text-blue-500, .text-blue-600 { color:#93C5FD !important; }
  .bg-purple-100 { background-color:#2E2152 !important; } .text-purple-500, .text-purple-600 { color:#D8B4FE !important; }
  .text-indigo-400, .text-indigo-500, .text-indigo-600 { color:#A5B4FC !important; }
  /* 输入类控件 */
  input, select, textarea { color:var(--c-text); background-color:var(--c-surface); }
  input::placeholder, textarea::placeholder { color:var(--c-text-3); }
  /* 组件硬编码背景 */
  .wb-header { background:linear-gradient(180deg,#241812 0%,#1E1B19 100%); }
  .wb-nav { background:rgba(30,27,25,.94); border-top-color:var(--c-border); box-shadow:0 -2px 10px rgba(0,0,0,.4); }
  .wb-btn-outline { background:var(--c-surface); }
  .wb-btn-outline:hover { background:var(--c-primary-soft); }
  /* 白底小圆点/进度条灰底 */
  .bg-gray-800 { background-color:#57534E !important; }
}

/* ============================================================
   动效与品牌（任务140 品牌升级）
   ============================================================ */

/* 呼吸 logo（通话中小彩虹 logo） */
@keyframes wb-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,123,90,.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,123,90,0); }
}
.wb-logo-breathe { animation: wb-breathe 2.5s ease-in-out infinite; }

/* 彩带庆祝（任务完成时一次性） */
@keyframes wb-confetti {
  0% { transform: translateY(-200%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.wb-confetti { position: fixed; top:0; width:10px; height:14px; pointer-events:none; z-index:9999; animation: wb-confetti 2.2s ease-in forwards; }

/* 打字光标（AI 打字机） */
@keyframes wb-cursor-blink { 0%, 50% { opacity:1; } 50.01%, 100% { opacity:0; } }
.wb-typing-cursor::after { content:'▋'; color:var(--c-primary); font-weight:700; animation:wb-cursor-blink 1s steps(1) infinite; margin-left:2px; }

/* 启动占位 logo 旋转 */
@keyframes wb-logo-pulse { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.1); opacity:.7; } }
.wb-logo-pulse { animation: wb-logo-pulse 2s ease-in-out infinite; }

/* 9-05 首页进入动画：依次淡入 + logo bounce-in（4 岁小朋友友好的"首屏见面礼"） */
@keyframes wb-home-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wb-home-bounce-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.wb-home-enter > * { animation: wb-home-fade-up 0.5s cubic-bezier(.34,1.56,.64,1) backwards; }
.wb-home-enter > *:nth-child(1) { animation-delay: 0.05s; }
.wb-home-enter > *:nth-child(2) { animation-delay: 0.18s; }
.wb-home-enter > *:nth-child(3) { animation-delay: 0.32s; }
.wb-home-enter > *:nth-child(4) { animation-delay: 0.46s; }
.wb-home-enter > *:nth-child(5) { animation-delay: 0.58s; }
.wb-home-enter > *:nth-child(6) { animation-delay: 0.70s; }
.wb-home-stagger > * { animation: wb-home-fade-up 0.42s cubic-bezier(.34,1.56,.64,1) backwards; }
.wb-home-stagger > *:nth-child(1) { animation-delay: 0.36s; }
.wb-home-stagger > *:nth-child(2) { animation-delay: 0.42s; }
.wb-home-stagger > *:nth-child(3) { animation-delay: 0.48s; }
.wb-home-stagger > *:nth-child(4) { animation-delay: 0.54s; }
.wb-home-stagger > *:nth-child(5) { animation-delay: 0.60s; }
.wb-home-stagger > *:nth-child(6) { animation-delay: 0.66s; }
.wb-home-stagger > *:nth-child(n+7) { animation-delay: 0.72s; }
.wb-home-logo-in { animation: wb-home-bounce-in 0.7s cubic-bezier(.34,1.56,.64,1) backwards; }
/* 尊重用户动画偏好（系统设「减少动效」直接显示） */
@media (prefers-reduced-motion: reduce) {
  .wb-home-enter > *, .wb-home-stagger > *, .wb-home-logo-in { animation: none !important; }
}

/* 通用 tap-btn 微动效（按下 scale(0.96)+100ms 反弹） */
.tap-btn { transition: transform .12s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.tap-btn:active { transform: scale(0.96); }
.tap-expand:active { transform: scale(0.92); }

/* 触控目标 ≥44px（老王 8-29 D2 手机端打磨）：32px 小按钮加此类，伪元素外扩 6px 达标，
   视觉零变化；伪元素属元素本身可命中点击。加在已有 position 上下文的按钮上安全。 */
.hit-44 { position: relative; }
.hit-44::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }

/* ========== 9-05 z-index 工具类补齐（系统性修复） ========== */
/* 预编译 vendor/tailwind.static.css 只编译了 .z-10，缺 z-20~z-50：
   底部导航 class="wb-nav ... z-40"、顶栏 z-50 实际 z-index:auto，
   被 gz-stage(z2)/gz-buddy(z3) 等定位元素盖住 → 复习卡遮住标签栏/顶栏的根因。 */
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
/* 顶栏/底部导航强制高于游戏庆祝层（gz-win 60 / gz-merge 90）——任何情况不被遮挡（老王 9-05） */
.wb-header { z-index: 110; }
.wb-nav { z-index: 100; }

/* ========== 9-05 点亮图谱（成长页 · 学科详情） ========== */
/* 老王 9-08 Q5 修复：点亮网格容器自定义类——tailwind.static.css 白名单没有
   grid-cols-6/8/9 和全部 sm:/md: 前缀类，模板里写 grid-cols-6 不生效 →
   lit-tile（aspect-ratio 1/1）块级铺满全宽 → 一个字一个整屏方块（截图实锤）。
   铁律（坑 3）：关键布局用本文件自定义类，不依赖 tailwind 任意类。 */
.lit-grid { display: grid; gap: 6px; grid-template-columns: repeat(6, 1fr); }
.lit-grid-en { display: grid; gap: 6px; grid-template-columns: repeat(6, 1fr); }
.lit-grid-items { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) {
  .lit-grid { grid-template-columns: repeat(8, 1fr); }
  .lit-grid-en { grid-template-columns: repeat(9, 1fr); }
  .lit-grid-items { grid-template-columns: repeat(4, 1fr); }
}
.lit-tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
            border-radius: 12px; font-weight: 900; font-size: 19px;
            background: #F3F4F6; color: #C7CCD4; border: 2px solid transparent;
            transition: transform .15s ease, box-shadow .2s ease; min-height: 40px; padding: 0 2px; }
.lit-tile.st-lit { background: linear-gradient(135deg, #FFC46B, #FF8A50); color: #fff;
                   border-color: #FFD9A8; box-shadow: 0 3px 0 rgba(214,110,60,.30); }
.lit-tile.st-learning { background: #FFF4DC; color: #C97A2B; border: 2px dashed #F0C07A; }
.lit-tile.st-off { cursor: default; }
.lit-tile.sm { aspect-ratio: auto; min-height: 44px; padding: 10px 4px;
               font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lit-tile.en { font-size: 17px; }
.lit-tile:active { transform: scale(.92); }

/* 9-05 晚老王：全站横向轻微晃动根治 —— 任何子元素的微小溢出都不再产生横向平移。
   clip 不创建滚动容器，position:sticky 的 header 不受影响；老内核回退 hidden。 */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}