/* ==========================================================================
   my-docs-site — AI科普 · 低年级（apps/ai-introduction/ai-kids-class.html）主题层
   --------------------------------------------------------------------------
   注入方式：build.py 依据 site.config.json → appsOverrides 命中该文件：
     - theme: "ai-kids-theme.css" → 注入本表
     - favicon: true              → 注入站点 favicon
     - siteBar: true              → 注入站点顶栏（返回 + 标题 + 明暗开关），
                                    与主站共用 localStorage['theme']
                                    （顶栏样式同时写在本表开头，参考 static/zgcm1-theme.css）

   设计取向（为什么不做「整页压暗」）：
     这一页的骨架就是彩泥色块（--c1..--c5 / 卡片 / 步骤 / 水果，块内文字本来就是
     深灰 rgba(74,68,88,…)，在彩泥上永远清楚）。所以暗色版只把**中性底**压暗：
     页面底色、纸白面板、顶栏、进度槽、按钮等；彩泥色块原样保留 ——
     效果是「夜里的桌面上摆着彩泥玩具」，而不是把整页涂黑。
     亮色模式下页面完全是它本来的设计（本表只写 [data-theme="dark"] 覆盖）。
   ========================================================================== */

/* ===== 站点顶栏（与主站同款：返回 / 标题 / 明暗开关） ===== */
.hw-topbar{
  position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1rem;background:rgba(11,16,32,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid #24304f;
}
[data-theme="light"] .hw-topbar{background:rgba(247,249,252,.92);border-bottom-color:#dde4f0}
.hw-back{
  display:inline-grid;place-items:center;width:2rem;height:2rem;flex:none;
  color:#5eead4;background:rgba(94,234,212,.12);border:1px solid #24304f;
  border-radius:.55rem;text-decoration:none;font-size:1rem;transition:.15s;
}
.hw-back:hover{border-color:#5eead4}
[data-theme="light"] .hw-back{color:#0d9488;background:rgba(13,148,136,.1);border-color:#dde4f0}
.hw-title{font-weight:700;font-size:.95rem;color:#5eead4;letter-spacing:.02em}
[data-theme="light"] .hw-title{color:#0d9488}
.hw-spacer{flex:1}
.hw-theme{
  width:2.25rem;height:2.25rem;flex:none;display:inline-grid;place-items:center;
  background:transparent;color:#93a0bd;border:1px solid #24304f;border-radius:.55rem;
  font-size:1.05rem;cursor:pointer;transition:.15s;
}
.hw-theme:hover{color:#dbe3f4;border-color:#5eead4;background:rgba(94,234,212,.12)}
[data-theme="light"] .hw-theme{color:#5a6780;border-color:#dde4f0}
[data-theme="light"] .hw-theme:hover{color:#1a2233;border-color:#0d9488;background:rgba(13,148,136,.1)}

/* 页面自带 .topbar 也是 sticky:top:0 —— 给它让出站点顶栏的高度，避免两层叠在一起 */
[data-theme] .topbar{top:3.3rem}

/* ===== 暗色覆盖层 ===== */
[data-theme="dark"]{
  --bg1:#141033; --bg2:#1b1430;
  --ink:#eae6f7; --ink-soft:#9aa3c0;
  --white:#1a1f38;
}

/* 页面底纹：三团暖紫/暖橙光斑 → 夜里的冷紫光斑 */
[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 520px at 88% -6%, #2a2150 0%, rgba(42,33,80,0) 62%),
    radial-gradient(760px 460px at -6% 18%, #3a2338 0%, rgba(58,35,56,0) 58%),
    radial-gradient(700px 420px at 50% 108%, #1d2a4a 0%, rgba(29,42,74,0) 60%);
}
[data-theme="dark"] .topbar{background:rgba(20,16,45,.82);border-bottom-color:rgba(234,230,247,.08)}
[data-theme="dark"] .navpills a:hover{background:rgba(255,255,255,.12)}
[data-theme="dark"] .fabgroup{background:rgba(26,22,52,.9)}

/* 纸白面板 → 深色面板（里面的文字用的是 --ink，本来就跟着变亮） */
[data-theme="dark"] .game{background:linear-gradient(165deg,#1b2138,#161b2f)}
[data-theme="dark"] .exam-stage{background:linear-gradient(160deg,#1b2138,#171c31)}
[data-theme="dark"] .foot-card{background:linear-gradient(160deg,#1b2138,#171c31);color:rgba(234,230,247,.85)}
[data-theme="dark"] .opt{background:#20263f}
[data-theme="dark"] .opt:hover:not(:disabled){background:#272e4a}
[data-theme="dark"] .opt.ok{background:linear-gradient(160deg,#1f4033,#1a352b)}
[data-theme="dark"] .opt.no{background:linear-gradient(160deg,#43262c,#372024)}
[data-theme="dark"] .track{background:#20263f}

/* 黄/紫两张「强调卡」：底色压暗，文字（--ink）自动变亮 */
[data-theme="dark"] .analogy{background:linear-gradient(160deg,#3a3222,#2f2a1d)}
[data-theme="dark"] .tipcard{background:linear-gradient(160deg,#2b2447,#221d3a)}
[data-theme="dark"] .qwin{background:linear-gradient(160deg,#1f3a2c,#1a2f24)}

/* 主按钮：原来是「浅灰紫 → --ink」的渐变，--ink 变亮后会变成亮底白字 */
[data-theme="dark"] .btn.primary{background:linear-gradient(160deg,#4a4363,#2b2640)}

/* 机器人底盘 */
[data-theme="dark"] .mascot-plate{background:linear-gradient(150deg,#2b2450,#1f2b4a);opacity:.8}
[data-theme="dark"] .robot-pod .plate{background:linear-gradient(150deg,#2b2450,#233150)}

/* 直接落在页面底色上的浅灰字（#9B92B5 / #6B5EA6 系）在暗底上要提亮 */
[data-theme="dark"] .band-head .kicker,
[data-theme="dark"] .foot-meta{color:#b9b1d8}
[data-theme="dark"] .tipcard b,
[data-theme="dark"] .fb,
[data-theme="dark"] .scoreline b{color:#c4b5fd}

/* 彩泥色块（.clay-c* / 卡片 / 步骤 / 水果）保持原样：块内文字是深灰，在彩泥上依然清楚。
   但 h3 / li 这类**继承** body 颜色的元素会跟着 --ink 变亮 —— 那会在彩泥上糊成一片
   （实测对比度 1.02），所以把这几类容器的 color 钉回原来的深灰。 */
[data-theme="dark"] .clay-c1,
[data-theme="dark"] .clay-c2,
[data-theme="dark"] .clay-c3,
[data-theme="dark"] .clay-c4,
[data-theme="dark"] .clay-c5,
[data-theme="dark"] .card,
[data-theme="dark"] .step,
[data-theme="dark"] .gitem,
[data-theme="dark"] .fruit,
[data-theme="dark"] .compare .col{color:#4A4458}
[data-theme="dark"] .compare li::before{color:#4A4458}