/* =====================================================================
 * Steamania 课程中心 · 四主题体系
 * 主题: terminal 终端矩阵 / blueprint 电路蓝图 / aurora 极光渐变 / industrial 工业机甲
 * 配色源自 v3-joykit-2025/static/preview/ 四个首页设计稿
 * 用法: <html data-theme="blueprint"> + 本文件 + themes.js
 * 课件页迁移: 旧 :root 变量(--dark/--bg/...) 已由迁移脚本映射到 --c-* 语义变量
 * ===================================================================== */

/* ---------- 主题令牌 ----------
 * --c-slide/--c-fg/--c-light 为教学内容恒浅色系(各主题仅色调微调);
 * --c-deep/--c-hero/--c-panel 为框架深色系(封面/顶栏/切换器);
 * --c-hero2 为封面装饰圆专用(比 hero 深一档的同色系, 供 .cover .c3 靠色)
 */
html[data-theme="terminal"]{
  --c-deep:#050a12;      /* 页面最底色 */
  --c-hero:#0d2f3f;      /* 封面/标题栏底色 */
  --c-hero2:#0a2230;     /* 封面装饰圆(比 hero 深一档) */
  --c-panel:rgba(10,22,34,.85);
  --c-line:#0e2a3a;
  --c-fg:#16323f;        /* 内容文字(深) */
  --c-dim:#5a7a8a;
  --c-acc:#008ba3;       /* 主强调(投影下足够深) */
  --c-acc2:#00a86b;
  --c-slide:#f4f9fb;     /* 幻灯片内容底(浅) */
  --c-light:#e8f2f5;     /* 浅色信息块底 */
  --c-tint:rgba(0,139,163,.10);
  --c-amber:#b07900;
  --c-grid:transparent;
  --c-deco:none;
  --c-radius:2px;
}
html[data-theme="blueprint"]{
  --c-deep:#0d1117;
  --c-hero:#12283f;
  --c-hero2:#0d1e30;
  --c-panel:rgba(13,17,23,.85);
  --c-line:#30363d;
  --c-fg:#1f2933;
  --c-dim:#64748b;
  --c-acc:#1565c0;
  --c-acc2:#b07900;
  --c-slide:#f7f9fc;
  --c-light:#eaf1f8;
  --c-tint:rgba(21,101,192,.09);
  --c-amber:#b07900;
  --c-grid:transparent;
  --c-deco:none;
  --c-radius:6px;
}
html[data-theme="aurora"]{
  --c-deep:#070011;
  --c-hero:#2a1550;
  --c-hero2:#1d0e3a;
  --c-panel:rgba(20,10,40,.85);
  --c-line:rgba(42,21,80,.25);
  --c-fg:#241b3a;
  --c-dim:#6f6390;
  --c-acc:#7c3aed;
  --c-acc2:#db2777;
  --c-slide:#fbfaff;
  --c-light:#f2edfc;
  --c-tint:rgba(124,58,237,.08);
  --c-amber:#b07900;
  --c-grid:transparent;
  --c-deco:none;
  --c-radius:14px;
}
html[data-theme="industrial"]{
  --c-deep:#101210;
  --c-hero:#242822;
  --c-hero2:#191c16;
  --c-panel:rgba(23,26,22,.88);
  --c-line:#2f352c;
  --c-fg:#2a2d26;
  --c-dim:#6b7062;
  --c-acc:#9a6b00;       /* 琥珀的深投影安全版 */
  --c-acc2:#4e7a1f;
  --c-slide:#f8f8f4;
  --c-light:#eff0e8;
  --c-tint:rgba(154,107,0,.10);
  --c-amber:#9a6b00;
  --c-grid:transparent;
  --c-deco:none;
  --c-radius:2px;
}
html[data-theme="classic"]{
  /* 经典蓝: 原课件配色(--dark:#0D47A1 --primary:#1565C0 --bg:#F4F8FE) */
  --c-deep:#092F6E;
  --c-hero:#0D47A1;
  --c-hero2:#093A85;
  --c-panel:rgba(9,47,110,.88);
  --c-line:#BBDEFB;
  --c-fg:#263238;
  --c-dim:#64748B;
  --c-acc:#1565C0;
  --c-acc2:#42A5F5;
  --c-slide:#F4F8FE;
  --c-light:#E3F2FD;
  --c-tint:rgba(21,101,192,.08);
  --c-amber:#F57F17;
  --c-grid:transparent;
  --c-deco:none;
  --c-radius:8px;
}

/* ---------- 课件页适配 ----------
 * 教学策略: 放映内容区(幻灯片主体)保持明亮浅色底, 保证教室投影可读性;
 * 四主题差异体现在"框架": 封面/顶栏/页脚底色、强调色、切换器、氛围装饰。
 * 注意: 不要用 html[data-theme] .slide 之类高优先级规则覆盖背景/文字——
 * 页面自身 .cover(深底白字)/.slide(浅底深字) 的分工由 :root 变量映射完成。
 * 变量分工:
 *   --c-slide  幻灯片内容底(恒浅色, 仅色调随主题微调)
 *   --c-fg     内容文字(恒深色)
 *   --c-hero/--c-deep  封面/框架深色
 *   --c-acc/--c-acc2   强调色(标题条/高亮/按钮)
 *   --c-light  浅色信息块底(卡片/示例框)
 *   --c-tint   强调色浅底(引用/高亮行)
 *   --c-led-r/y/g/b  封面 LED 灯条色(语义不变, 色相随主题调和;
 *                    仅作用于深色封面, 经典蓝=原版教具色)
 */
html[data-theme] body{background:var(--c-deep)}
html[data-theme] .cover,html[data-theme] .slide-head,html[data-theme] .toc{position:relative}
/* 布局修复: 原课件 .cover{position:relative} 覆盖了 .slide 的 absolute 定位,
 * 导致封面不铺满视口、下方露出 body 深色背景(经典蓝时代两色相近不可见,
 * 暗主题下暴露为"半屏黑色")。此处恢复封面的全屏定位。 */
html[data-theme] .slide.cover{position:absolute;inset:0}

/* 封面 LED 灯条: 深色封面上用主题调和色(内容页保持教具原色) */
html[data-theme="terminal"] .cover .led.on.red{background:#ff6b6b;box-shadow:0 0 18px 2px #ff6b6b}
html[data-theme="terminal"] .cover .led.on.yellow{background:#ffd54f;box-shadow:0 0 18px 2px #ffd54f}
html[data-theme="terminal"] .cover .led.on.green{background:#69f0ae;box-shadow:0 0 18px 2px #69f0ae}
html[data-theme="terminal"] .cover .led.on.blue{background:#40c4ff;box-shadow:0 0 18px 2px #40c4ff}
html[data-theme="blueprint"] .cover .led.on.red{background:#ff8a80;box-shadow:0 0 18px 2px #ff8a80}
html[data-theme="blueprint"] .cover .led.on.yellow{background:#ffe082;box-shadow:0 0 18px 2px #ffe082}
html[data-theme="blueprint"] .cover .led.on.green{background:#7cda8f;box-shadow:0 0 18px 2px #7cda8f}
html[data-theme="blueprint"] .cover .led.on.blue{background:#64b5f6;box-shadow:0 0 18px 2px #64b5f6}
html[data-theme="aurora"] .cover .led.on.red{background:#ff7ab0;box-shadow:0 0 18px 2px #ff7ab0}
html[data-theme="aurora"] .cover .led.on.yellow{background:#ffd166;box-shadow:0 0 18px 2px #ffd166}
html[data-theme="aurora"] .cover .led.on.green{background:#7ef0c9;box-shadow:0 0 18px 2px #7ef0c9}
html[data-theme="aurora"] .cover .led.on.blue{background:#9b8cff;box-shadow:0 0 18px 2px #9b8cff}
html[data-theme="industrial"] .cover .led.on.red{background:#ff7043;box-shadow:0 0 18px 2px #ff7043}
html[data-theme="industrial"] .cover .led.on.yellow{background:#ffc400;box-shadow:0 0 18px 2px #ffc400}
html[data-theme="industrial"] .cover .led.on.green{background:#9ccc65;box-shadow:0 0 18px 2px #9ccc65}
html[data-theme="industrial"] .cover .led.on.blue{background:#4fc3f7;box-shadow:0 0 18px 2px #4fc3f7}
/* 经典蓝: 不覆盖, 封面沿用原版教具色 */

/* 网格/氛围装饰层（仅影响最底色之上的质感） */
html[data-theme] .deck::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--c-grid)}
html[data-theme="terminal"] .deck::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:var(--c-deco)}

/* ---------- 主题切换器 ---------- */
#sw{position:fixed;top:10px;right:12px;z-index:999;display:flex;gap:6px;align-items:center;
  padding:5px 8px;border-radius:20px;background:var(--c-panel,rgba(0,0,0,.5));
  border:1px solid var(--c-line,#30363d);backdrop-filter:blur(8px);
  font:12px/1 "PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#sw a{color:#9fb2c3;text-decoration:none;margin-right:4px}
#sw a:hover{color:var(--c-acc,#58a6ff)}
#sw button{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:14px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:#cfd8e3;
  font:inherit;transition:all .2s}
#sw button i{width:8px;height:8px;border-radius:50%;display:inline-block}
#sw button.on{color:#fff;border-color:var(--c-acc,#58a6ff);
  background:var(--c-tint,rgba(88,166,255,.12))}
#sw button:hover{color:#fff}

/* ---------- 手机端适配：多列卡片网格压成竖条 → 改单列横向矩形 ---------- */
@media (max-width:760px){
  .grid,.two,[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .grid{gap:12px}
  .card{padding:14px 16px}
}