/* ============================================================
   知行 · 主播端「毛玻璃质感」升级层  pro.css
   ------------------------------------------------------------
   定位：**覆盖层**，只在 h5.css 之后追加视觉，不改结构 / 不改 JS 逻辑。
   回退：把 index.html 里这一行 <link> 删掉即恢复原样。

   设计语言三手法：
     ① 背景：从"一片灰"→ 柔和光斑（多层 radial-gradient，随主题变色）
     ② 卡片：半透明玻璃 + blur + **顶部内高光**（这条是"玻璃感"的关键）
     ③ 按钮：渐变 + 光泽 + 按压回弹

   配色由主题变量给（见文件末尾），本层只管"质感"，不管"颜色"。
   ============================================================ */

/* ------------------------------------------------------------
   0. 玻璃与光斑变量（浅色系默认值；暗色皮肤在文件末尾覆盖）
   ------------------------------------------------------------ */
:root{
  /* 光斑三色 */
  --mesh1:rgba(148,170,255,.55);
  --mesh2:rgba(255,170,205,.48);
  --mesh3:rgba(168,240,215,.45);
  /* 玻璃面 */
  --g-bg:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.52));
  --g-bg-strong:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  /* ★ 2026-10-11(需求 AR):比 --g-bg 掺一点主题色的"内容卡玻璃"。
     纯白玻璃在同类卡片**成片**出现时(目标页、专项练习页)根本看不出"片"的层次,
     负责人对着「系统训练」段说这两段"单调、没有毛玻璃片的效果"。
     暗色皮肤与 low-gpu 各自覆盖(见下方同名变量)。 */
  --g-bg-tint:linear-gradient(160deg,rgba(255,255,255,.88),rgba(242,237,255,.56));
  --g-bd:rgba(255,255,255,.92);
  --g-hi:rgba(255,255,255,.95);
  --g-sh:0 12px 32px -14px rgba(70,80,160,.30), 0 2px 8px rgba(70,80,160,.05);
  --g-sh-sm:0 8px 20px -12px rgba(70,80,160,.28), 0 1px 4px rgba(70,80,160,.05);
  --g-blur:22px;
  --g-blur-sm:16px;
  --g-r:22px;      /* 大卡圆角 */
  --g-r-sm:16px;   /* 小卡圆角 */
  --press:cubic-bezier(.34,1.56,.64,1);   /* 回弹曲线 */
  /* hero 卡（今日训练/提交成功等）的底色。
     以前这里是 JS 里写死的浅紫渐变 → 暗色皮肤上会突兀地亮一大块白，
     现在收成一个变量：浅色皮肤用淡彩，暗色皮肤用深空玻璃（见文件末尾）。 */
  --hero-grad:linear-gradient(135deg,#F4F0FF,#EAF1FF);
}

/* ------------------------------------------------------------
   1. 背景：柔和光斑（放在 body 上，滚动时不动，视觉更"厚"）
   ------------------------------------------------------------ */
body{
  background-image:
    radial-gradient(125% 62% at 8% -8%,  var(--mesh1) 0%, transparent 56%),
    radial-gradient(100% 54% at 98% 2%,  var(--mesh2) 0%, transparent 52%),
    radial-gradient(118% 60% at 50% 108%,var(--mesh3) 0%, transparent 58%),
    linear-gradient(180deg,#F9FAFE 0%, var(--bg) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}
/* 主播端页面本身透明，让 body 的光斑透上来 */
#appView.h5-page{background:transparent}
/* 登录页保留自己的渐变，但要和光斑融得更好 */
.login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, var(--mesh1) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, var(--mesh2) 0%, transparent 52%),
    linear-gradient(160deg,#F7F9FE 0%, #F3F0FB 45%, #FBF2F6 100%) !important;
}

/* ------------------------------------------------------------
   2. 玻璃卡：主播端所有"白块"统一换成玻璃
   ------------------------------------------------------------ */
#appView .card,
#appView .menu,
#appView .mind,
#appView .streak,
#appView .course-list,
#appView .wall-hint,
#appView .ai-hist-card,
#appView .theme-card,
#appView .stat-cell,
#appView .mini-card,
#appView .coin-grid > div,
#appView .menu-item,
#appView .me-entry,
#appView .exam-hist-row,
/* ★ 2026-10-11(需求 AR):目标中心的卡片原来只写在 goal.css 里、底色是实心 var(--card)
   —— 压根没进这一层,所以全白、没有玻璃感。负责人拿「系统训练」段做对比要求统一。
   (弹窗 .gd-sheet / .gd-drawer 是实底抽屉,故意不加 —— 它们必须不透。) */
#appView .gd-card,
#appView .gd-goal,
#appView .gd-panel,
#appView .gd-sumcard,
#appView .gd-days,
#appView .gd-wg,
.backdrop-glass{
  background:var(--g-bg);
  backdrop-filter:blur(var(--g-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(180%);
  border:1px solid var(--g-bd);
  box-shadow:var(--g-sh), inset 0 1px 0 var(--g-hi);
}
/* 列表类容器：圆角 + 裁剪，内部行不再各带边框 */
#appView .menu,
#appView .course-list,
#appView .coin-grid > div{border-radius:var(--g-r);overflow:hidden}
/* 列表行：只留极淡分隔，不重复玻璃（省性能） */
#appView .menu-item,
#appView .me-entry,
#appView .exam-hist-row{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:none;
}
#appView .menu-item + .menu-item,
#appView .me-entry + .me-entry{border-top:1px solid rgba(255,255,255,.72)}
#appView .menu-item:active,
#appView .me-entry:active{background:rgba(255,255,255,.55)}
/* 课程行 / 通用卡内行 */
#appView .course-list{padding:4px 0}
#appView .course + .course{border-top:1px solid rgba(255,255,255,.72)}
/* 小圆角卡 */
#appView .mind,
#appView .streak,
#appView .wall-hint,
#appView .theme-card,
#appView .ai-hist-card,
#appView .stat-cell,
#appView .mini-card,
#appView .coin-grid > div{border-radius:var(--g-r-sm);box-shadow:var(--g-sh-sm), inset 0 1px 0 var(--g-hi)}
#appView .stat-cell,
#appView .mini-card,
#appView .coin-grid > div{padding:14px 10px}
/* 顶部的 hero / daily / me-hero 三张渐变大卡：保留渐变，只统一圆角与光泽 */
#appView .hero,
#appView .daily,
#appView .me-hero,
#appView .h5-header{
  box-shadow:0 18px 40px -18px rgba(120,90,255,.55), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ------------------------------------------------------------
   2b. ★ 需求 AR(2026-10-11):「目标 / 专项练习」两段与「系统训练」段对齐
   ------------------------------------------------------------
   现象：负责人截图对比 —— 系统训练段有两张淡彩大卡(今日训练 / 每日思维挑战)
   撑起层次，目标和专项练习段却是一片小白卡，看着单调、"没有毛玻璃片的效果"。
   做法：只加视觉，**不动结构、不加内容**。
     ① 目标页主卡「今天要做的」→ 用和系统训练同一套 var(--hero-grad);
     ② 专项练习的类目卡 → 用掺了主题色的 --g-bg-tint，白卡成片时才看得出"片"。
   ------------------------------------------------------------ */
#appView .gd-card.gd-today{
  background:var(--hero-grad);
  position:relative;overflow:hidden;
}
/* 装饰圆：和 .daily 同一手法 —— 给大卡一点"层次"，不是一块平色 */
#appView .gd-card.gd-today::after{
  content:"";position:absolute;right:-36px;top:-48px;width:136px;height:136px;
  border-radius:50%;background:rgba(255,255,255,.30);pointer-events:none;
}
#appView .gd-card.gd-today > *{position:relative;z-index:1}

/* 专项练习的类目卡 */
#appView .mind{background:var(--g-bg-tint)}
/* 2b 里新加的那张引导大卡与下方类目网格之间的间距(全局 .daily 只有 margin-top) */
#exPaneDrill .daily{margin-bottom:14px}

/* ------------------------------------------------------------
   3. 玻璃胶囊 / 按钮：渐变 + 光泽 + 按压回弹
   ------------------------------------------------------------ */
#appView .chip{
  background:var(--g-bg-strong);
  backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  border:1px solid var(--g-bd);
  box-shadow:var(--g-sh-sm), inset 0 1px 0 var(--g-hi);
  transition:transform .22s var(--press), box-shadow .22s ease, background .22s ease;
}
#appView .chip.on{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 10px 22px -8px rgba(155,107,250,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
/* 主要按钮统一：渐变 + 内高光 + 按下回弹 */
#appView .go-sm,
#appView .cd-rate,
#appView .cd-cm-btn,
#appView .h5-toast-btn,
#appView .h5-confirm-ok,
#appView .ai-hist-continue,
#appView .btn{
  box-shadow:0 10px 22px -10px rgba(120,90,255,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
/* 次要/幽灵按钮也做成玻璃 */
#appView .go-sm.ghost,
#appView .ai-hist-btn,
#appView .cd-toc-btn{
  background:var(--g-bg-strong);
  backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  border:1px solid var(--g-bd);
  box-shadow:var(--g-sh-sm), inset 0 1px 0 var(--g-hi);
}
#appView .ai-hist-btn{color:var(--primary)}

/* ------------------------------------------------------------
   4. ⑤ 成功勾选（描边接力）—— 打卡 / 提交成功用
   ------------------------------------------------------------ */
.tick-wrap{display:inline-flex;align-items:center;justify-content:center}
.tick-wrap svg{width:46px;height:46px;display:block}
.tick-wrap circle{stroke-dasharray:138;stroke-dashoffset:138;animation:tickDraw .5s ease-out forwards}
.tick-wrap path{stroke-dasharray:46;stroke-dashoffset:46;animation:tickDraw2 .34s ease-out .46s forwards}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@keyframes tickDraw2{to{stroke-dashoffset:0}}
/* 小号:跟在文字后面用(如"今日训练完成 ✓"),不撑行高 */
.tick-wrap.tick-sm svg{width:19px;height:19px}
.tick-wrap.tick-sm{vertical-align:-4px;margin-left:3px}

/* ------------------------------------------------------------
   5. ④ 骨架屏（shimmer 落位）
   ------------------------------------------------------------ */
.sk-el{
  border-radius:10px;
  background:linear-gradient(90deg,rgba(226,232,247,.75) 25%,rgba(240,244,252,.95) 37%,rgba(226,232,247,.75) 63%);
  background-size:400% 100%;
  animation:skShimmer 1.35s ease-in-out infinite;
}
@keyframes skShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-row{display:flex;gap:12px;align-items:center;padding:13px 14px}
.sk-row .sk-cov{width:48px;height:48px;border-radius:16px;flex:none}
.sk-row .sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-row .sk-l1{height:12px;width:78%}
.sk-row .sk-l2{height:10px;width:46%}
.sk-title{height:14px;width:120px;margin:18px 2px 10px}

/* ------------------------------------------------------------
   6. ② 点击水波（ripple）
   ------------------------------------------------------------ */
.rip-host{position:relative;overflow:hidden}
.rip{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,.35) 55%,transparent 72%);
  transform:scale(0);opacity:1;
  animation:ripGo .62s cubic-bezier(.22,.61,.36,1) forwards;
}
.rip.dark{background:radial-gradient(circle,rgba(140,110,255,.30) 0%,rgba(140,110,255,.14) 55%,transparent 72%)}
@keyframes ripGo{to{transform:scale(2.6);opacity:0}}

/* ------------------------------------------------------------
   7. ③ 数字滚动（配合 JS，见 h5.js 的 h5CountUp）
   ------------------------------------------------------------ */
.cnt-up{font-variant-numeric:tabular-nums;display:inline-block}

/* ------------------------------------------------------------
   8. ① 全局按压回弹（覆盖 app.css 的 .2s ease）
   ------------------------------------------------------------ */
#appView button,
#appView .menu-item,
#appView .me-entry,
#appView .mind,
#appView .course,
#appView .theme-card,
#appView .chip,
#appView .toc-item,
#appView .wall-tabs button{
  transition:transform .22s var(--press), box-shadow .22s ease, background .22s ease, opacity .18s ease;
}
#appView button:active,
#appView .menu-item:active,
#appView .me-entry:active,
#appView .mind:active,
#appView .theme-card:active,
#appView .chip:active{transform:scale(.955)}
#appView .course:active{transform:scale(.985)}
/* 装饰性大按钮别缩太狠 */
#appView .go-sm:active,
#appView .cd-rate:active,
#appView .h5-toast-btn:active,
#appView .h5-confirm-ok:active{transform:scale(.96)}

/* ------------------------------------------------------------
   9. 底部导航 / 输入栏：加强毛玻璃
   ------------------------------------------------------------ */
.tabbar{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.92));
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.9);
  box-shadow:0 -10px 30px -18px rgba(70,80,160,.4);
}
.chat-input{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.9)) !important;
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.9);
}
#appView .chat-input-row .field{
  background:var(--g-bg-strong);
  backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  border:1px solid var(--g-bd);
  box-shadow:var(--g-sh-sm), inset 0 1px 0 var(--g-hi);
}
#tab-ai .chat-msg.ai{
  background:var(--g-bg);
  backdrop-filter:blur(var(--g-blur-sm)) saturate(175%);
  -webkit-backdrop-filter:blur(var(--g-blur-sm)) saturate(175%);
  border:1px solid var(--g-bd);
}

/* ------------------------------------------------------------
   10. 弹层 / 抽屉：玻璃化
   ------------------------------------------------------------ */
/* 历史抽屉层级:必须盖过 #aiTop(z:40),否则"关闭"按钮被顶部栏挡住点不到
   (2026-09-29 负责人反馈,app.css 原值 z:30) */
.ai-hist-mask{z-index:60}
.ai-hist-head .btn-ghost{white-space:nowrap;flex:none}   /* 「关闭」别被挤成两行 */
#appView .chat-input-row .field input{
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  caret-color:var(--primary);
}
#appView .chat-input-row .field input::placeholder{
  color:var(--text2);
  -webkit-text-fill-color:var(--text2);
  opacity:1;
}
.hw-panel,
.toc-sheet,
.ai-hist-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86)) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.95);
}
#appView .q-opt{
  background:var(--g-bg-strong);
  backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--g-blur-sm)) saturate(170%);
  border:1.5px solid var(--g-bd);
  box-shadow:var(--g-sh-sm);
}
#appView .q-opt.sel{background:var(--tint);border-color:var(--primary)}

/* ------------------------------------------------------------
   11. 性能降级：弱机型关掉 blur，只留半透明
   （h5.js 检测到低端设备会给 body 加 .low-gpu）
   ------------------------------------------------------------ */
body.low-gpu{
  --g-bg:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.86));
  --g-bg-strong:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.92));
  /* 低端机没有 blur,卡片本来就接近实底 —— tint 也得跟着变实,否则会"半透"露馅 */
  --g-bg-tint:linear-gradient(160deg,rgba(255,255,255,.96),rgba(247,244,255,.90));
  --g-blur:0px;
  --g-blur-sm:0px;
}
body.low-gpu *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.low-gpu .tabbar{background:rgba(255,255,255,.96)}
body.low-gpu .chat-input{background:rgba(255,255,255,.96) !important}

/* ------------------------------------------------------------
   11b. 手机端降负(2026-09-29):iPhone 上三个性能杀手
   ① background-attachment:fixed —— iOS 每滑一像素都重画整个背景,出名的卡
   ② 每条 AI 消息气泡一层 backdrop blur —— 聊得越多层越多,滚动越来越沉
   ③ 全局 blur 半径对手机偏大 —— 降一档,肉眼几乎无差,重绘便宜一半
   ------------------------------------------------------------ */
@media (pointer:coarse){
  body{background-attachment:scroll}
  :root{--g-blur:14px;--g-blur-sm:10px}
  #tab-ai .chat-msg.ai{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* 打字时底部导航彻底移除(h5.css 原来用 translateY 滑走,状态一抖会半路露出来) */
  body.kb-open .tabbar{display:none}
}

/* ------------------------------------------------------------
   12. 动画降级：系统开了「减弱动态效果」就不动
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .rip,.sk-el,.tick-wrap circle,.tick-wrap path{animation:none !important}
  #appView button,#appView .chip,#appView .mind{transition:none !important}
}

/* ============================================================
   13. 两套「试用皮肤」的颜色（光斑 + 玻璃色调）
   ============================================================ */

/* ---------- 🧪 试用 A：毛玻璃 · 蓝紫粉（把默认那套的光斑做得更透亮） ---------- */
body.theme-glassp{
  --mesh1:rgba(139,166,255,.70);
  --mesh2:rgba(255,158,203,.62);
  --mesh3:rgba(150,240,214,.58);
  --g-bg:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  --g-bd:rgba(255,255,255,.95);
  --g-sh:0 14px 36px -14px rgba(96,86,190,.34), 0 2px 8px rgba(96,86,190,.06);
  --g-blur:24px;
}

/* ---------- 🧪 试用 B：毛玻璃 · 多巴胺（薰衣草紫 + 蜜桃 + 粉，雾感低饱和） ---------- */
body.theme-dopa{
  --primary:#A78BFA;
  --primary-d:#9070F0;
  --grad:linear-gradient(135deg,#B9A5E8 0%,#FFB88C 55%,#F7A8C4 100%);
  --bg:#F7F4FB;
  --card:#ffffff;
  --card2:#F6F1FA;
  --text:#2E2A38;
  --text2:#8A8296;
  --border:#EDE6F4;
  --tint:rgba(167,139,250,.12);
  --tint-06:rgba(167,139,250,.07);
  --ghost-border:rgba(167,139,250,.35);
  --ring:rgba(167,139,250,.16);
  --iconbg:linear-gradient(135deg,#F3EBFF,#FFEFE0);
  --progress-bg:#EEE7F6;
  --thead:#FBF8FE;
  --shadow:0 4px 20px rgba(120,96,190,.10);
  --shadow-lg:0 12px 40px rgba(120,96,190,.18);
  /* 光斑：紫 / 蜜桃 / 粉 */
  --mesh1:rgba(167,139,250,.60);
  --mesh2:rgba(255,184,140,.58);
  --mesh3:rgba(247,168,196,.52);
  --g-bg:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.48));
  --g-bd:rgba(255,255,255,.94);
  --g-hi:rgba(255,255,255,.95);
  --g-sh:0 12px 32px -14px rgba(140,110,190,.30), 0 2px 8px rgba(140,110,190,.06);
}
/* 多巴胺皮肤下的几个写死色收口 */
body.theme-dopa .hero .go,
body.theme-dopa .daily button{color:#8B6CE8}
body.theme-dopa .cd-rate,
body.theme-dopa .cd-cm-btn{color:#fff}
body.theme-dopa .sec-head h2{color:var(--text)}
body.theme-dopa .course .pct,
body.theme-dopa .cd-line em,
body.theme-dopa .toc-st{color:#9B7CE8}

/* ============================================================
   14. 暗色皮肤适配（银河系 / 科技霓虹）—— 玻璃必须跟着变深
   ============================================================ */
body.theme-galaxy{
  --mesh1:rgba(79,110,247,.42);
  --mesh2:rgba(139,92,246,.36);
  --mesh3:rgba(56,189,248,.30);
  --g-bg:linear-gradient(160deg,rgba(32,42,82,.80),rgba(20,27,56,.58));
  --g-bg-strong:linear-gradient(160deg,rgba(38,50,96,.88),rgba(24,32,66,.72));
  /* ★ 需求 AR:暗色皮肤下"内容卡玻璃"也得是深的,否则目标/专项练习会亮一大块白 */
  --g-bg-tint:linear-gradient(160deg,rgba(44,54,104,.82),rgba(60,46,112,.60));
  --g-bd:rgba(120,150,255,.24);
  --g-hi:rgba(255,255,255,.12);
  --g-sh:0 12px 32px -14px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35);
  --g-sh-sm:0 8px 20px -12px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.3);
}
body.theme-galaxy .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(79,110,247,.4) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(139,92,246,.34) 0%, transparent 52%),
    linear-gradient(160deg,#0a0e23 0%,#131a3d 45%,#1a1040 75%,#0a0e23 100%) !important;
}
body.theme-galaxy #appView .menu-item + .menu-item,
body.theme-galaxy #appView .me-entry + .me-entry,
body.theme-galaxy #appView .course + .course{border-top-color:rgba(255,255,255,.09)}
body.theme-galaxy #appView .menu-item:active,
body.theme-galaxy #appView .me-entry:active{background:rgba(255,255,255,.07)}
body.theme-galaxy .tabbar{
  background:linear-gradient(180deg,rgba(13,18,40,.86),rgba(13,18,40,.96));
  border-top-color:rgba(120,150,255,.18);
}
body.theme-galaxy .chat-input{
  background:linear-gradient(180deg,rgba(13,18,40,.84),rgba(13,18,40,.95)) !important;
  border-top-color:rgba(120,150,255,.18);
}
body.theme-galaxy .hw-panel,
body.theme-galaxy .toc-sheet,
body.theme-galaxy .ai-hist-panel{
  background:linear-gradient(180deg,rgba(17,23,48,.97),rgba(13,18,40,.94)) !important;
}

body.theme-tech{
  --mesh1:rgba(45,212,255,.34);
  --mesh2:rgba(124,108,255,.34);
  --mesh3:rgba(244,114,182,.24);
  --g-bg:linear-gradient(160deg,rgba(26,35,60,.82),rgba(16,22,40,.60));
  --g-bg-strong:linear-gradient(160deg,rgba(32,43,72,.90),rgba(20,27,48,.74));
  --g-bg-tint:linear-gradient(160deg,rgba(34,44,78,.84),rgba(40,42,96,.62));
  --g-bd:rgba(45,212,255,.22);
  --g-hi:rgba(255,255,255,.10);
  --g-sh:0 12px 32px -14px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --g-sh-sm:0 8px 20px -12px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.35);
}
body.theme-tech .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(45,212,255,.28) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(124,108,255,.30) 0%, transparent 52%),
    linear-gradient(160deg,#0b0f1a 0%,#141b33 50%,#0b0f1a 100%) !important;
}
body.theme-tech #appView .menu-item + .menu-item,
body.theme-tech #appView .me-entry + .me-entry,
body.theme-tech #appView .course + .course{border-top-color:rgba(255,255,255,.08)}
body.theme-tech #appView .menu-item:active,
body.theme-tech #appView .me-entry:active{background:rgba(255,255,255,.06)}
body.theme-tech .tabbar{
  background:linear-gradient(180deg,rgba(11,15,26,.86),rgba(11,15,26,.96));
  border-top-color:rgba(45,212,255,.18);
}
body.theme-tech .chat-input{
  background:linear-gradient(180deg,rgba(11,15,26,.84),rgba(11,15,26,.95)) !important;
  border-top-color:rgba(45,212,255,.18);
}
body.theme-tech .hw-panel,
body.theme-tech .toc-sheet,
body.theme-tech .ai-hist-panel{
  background:linear-gradient(180deg,rgba(19,26,42,.97),rgba(13,18,30,.94)) !important;
}
body.theme-tech.low-gpu .tabbar,
body.theme-tech.low-gpu .chat-input{background:rgba(11,15,26,.97) !important}

/* ============================================================
   15. 原有 9 套皮肤 × 新 UI 兼容
   ★ 负责人点名要保留的 5 套：银河系 + 春·樱绿 + 夏·海风 + 秋·暖橙 + 冬·初雪
   每套只补「光斑三色 + 玻璃色调」，皮肤本身的渐变/装饰（如银河系的星空、地球月牙）
   全部来自 app.css，本层**不碰**，所以特效原封不动保留。
   ============================================================ */

/* ---------- 🌷 春·樱绿：嫩绿 + 樱粉 ---------- */
body.theme-spring{
  --mesh1:rgba(126,211,127,.62);
  --mesh2:rgba(255,194,212,.60);
  --mesh3:rgba(184,230,163,.55);
  --g-bd:rgba(255,255,255,.93);
  --g-hi:rgba(255,255,255,.95);
  --g-sh:0 12px 32px -14px rgba(63,174,82,.26), 0 2px 8px rgba(63,174,82,.05);
  --g-sh-sm:0 8px 20px -12px rgba(63,174,82,.24), 0 1px 4px rgba(63,174,82,.05);
}
body.theme-spring .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(126,211,127,.55) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(255,194,212,.55) 0%, transparent 52%),
    linear-gradient(160deg,#F4FBF0 0%,#EFF9EA 48%,#FDF1F5 100%) !important;
}

/* ---------- 🌊 夏·海风：海蓝 + 青柠 ---------- */
body.theme-summer{
  --mesh1:rgba(40,184,224,.55);
  --mesh2:rgba(84,207,203,.52);
  --mesh3:rgba(164,221,107,.46);
  --g-bd:rgba(255,255,255,.93);
  --g-hi:rgba(255,255,255,.95);
  --g-sh:0 12px 32px -14px rgba(10,157,196,.26), 0 2px 8px rgba(10,157,196,.05);
  --g-sh-sm:0 8px 20px -12px rgba(10,157,196,.24), 0 1px 4px rgba(10,157,196,.05);
}
body.theme-summer .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(40,184,224,.5) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(84,207,203,.48) 0%, transparent 52%),
    linear-gradient(160deg,#EFFAFE 0%,#E9F7FB 48%,#F0FBEF 100%) !important;
}

/* ---------- 🍁 秋·暖橙：枫叶橙 + 暖棕 ---------- */
body.theme-autumn{
  --mesh1:rgba(232,134,58,.50);
  --mesh2:rgba(240,180,95,.50);
  --mesh3:rgba(192,95,42,.34);
  --g-bd:rgba(255,255,255,.93);
  --g-hi:rgba(255,255,255,.95);
  --g-sh:0 12px 32px -14px rgba(207,107,29,.26), 0 2px 8px rgba(207,107,29,.05);
  --g-sh-sm:0 8px 20px -12px rgba(207,107,29,.24), 0 1px 4px rgba(207,107,29,.05);
}
body.theme-autumn .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(232,134,58,.42) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(240,180,95,.44) 0%, transparent 52%),
    linear-gradient(160deg,#FCF6EE 0%,#FAF2E8 48%,#FDF0E6 100%) !important;
}

/* ---------- ❄️ 冬·初雪：冰雪蓝白 ---------- */
body.theme-winter{
  --mesh1:rgba(106,169,233,.52);
  --mesh2:rgba(143,208,232,.52);
  --mesh3:rgba(201,228,245,.62);
  --g-bd:rgba(255,255,255,.95);
  --g-hi:rgba(255,255,255,.97);
  --g-sh:0 12px 32px -14px rgba(62,124,177,.24), 0 2px 8px rgba(62,124,177,.05);
  --g-sh-sm:0 8px 20px -12px rgba(62,124,177,.22), 0 1px 4px rgba(62,124,177,.05);
}
body.theme-winter .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(106,169,233,.46) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(143,208,232,.48) 0%, transparent 52%),
    linear-gradient(160deg,#F2F8FC 0%,#EFF6FB 48%,#F5FAFE 100%) !important;
}

/* ---------- 🍎 苹果极简：纯白灰 + 经典蓝 ---------- */
body.theme-apple{
  --mesh1:rgba(0,113,227,.26);
  --mesh2:rgba(66,165,245,.28);
  --mesh3:rgba(144,202,249,.34);
  --g-sh:0 12px 32px -14px rgba(20,40,80,.22), 0 2px 8px rgba(20,40,80,.05);
  --g-sh-sm:0 8px 20px -12px rgba(20,40,80,.20), 0 1px 4px rgba(20,40,80,.05);
}
body.theme-apple .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(0,113,227,.22) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(66,165,245,.24) 0%, transparent 52%),
    linear-gradient(160deg,#F8F9FB 0%,#F4F6F9 50%,#FAFBFC 100%) !important;
}

/* ---------- 🌸 二次元：樱粉香芋紫 ---------- */
body.theme-anime{
  --mesh1:rgba(255,143,171,.58);
  --mesh2:rgba(200,107,255,.52);
  --mesh3:rgba(142,197,255,.50);
  --g-bd:rgba(255,255,255,.94);
  --g-sh:0 12px 32px -14px rgba(255,92,138,.26), 0 2px 8px rgba(255,92,138,.06);
  --g-sh-sm:0 8px 20px -12px rgba(255,92,138,.24), 0 1px 4px rgba(255,92,138,.06);
}
body.theme-anime .login-wrap{
  background-image:
    radial-gradient(120% 60% at 8% -6%, rgba(255,143,171,.55) 0%, transparent 55%),
    radial-gradient(100% 52% at 98% 4%, rgba(200,107,255,.48) 0%, transparent 52%),
    linear-gradient(160deg,#FFF3F9 0%,#FDF0FA 50%,#F4F1FF 100%) !important;
}

/* ---------- 🌌 银河系：暗底要配"深空玻璃"，星空/地球装饰保持不动 ---------- */
body.theme-galaxy #appView .hero,
body.theme-galaxy #appView .daily,
body.theme-galaxy #appView .me-hero,
body.theme-galaxy #appView .h5-header{
  box-shadow:0 18px 44px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.16);
}
body.theme-tech #appView .hero,
body.theme-tech #appView .daily,
body.theme-tech #appView .me-hero,
body.theme-tech #appView .h5-header{
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);
}
/* 暗色皮肤：教学/课程行的进度条底色、分隔线跟着变暗 */
body.theme-galaxy #appView .course .pbar,
body.theme-galaxy #appView .mind .pbar,
body.theme-tech #appView .course .pbar,
body.theme-tech #appView .mind .pbar{background:rgba(255,255,255,.10)}
body.theme-galaxy #appView .wall-hint,
body.theme-tech #appView .wall-hint{color:var(--text2)}

/* ============================================================
   16. hero 卡底色的主题化（--hero-grad）
   ------------------------------------------------------------
   以前「今日训练 / 提交成功 / 直播复盘 / 测评引导」这 5 张高亮卡
   的底色是 JS 里**写死的浅紫渐变** `#F4F0FF → #EAF1FF`。
   浅色皮肤下没问题，但切到银河系 / 科技霓虹就变成"暗底上一大块发光的白卡"，
   文字还是灰的 —— 实测截图一眼就看出来。
   现在收成一个变量：浅色皮肤给同色系淡彩（比统一浅紫更贴皮肤情绪），
   暗色皮肤给"深空玻璃"，白字读得清。
   ------------------------------------------------------------ */

/* ---------- 浅色皮肤：各给一套同色系淡彩 ---------- */
body.theme-spring{ --hero-grad:linear-gradient(135deg,#EDF8E6,#FDEEF4); }
body.theme-summer{ --hero-grad:linear-gradient(135deg,#E4F5FB,#EAF8E9); }
body.theme-autumn{ --hero-grad:linear-gradient(135deg,#FDF0DF,#FBE7D9); }
body.theme-winter{ --hero-grad:linear-gradient(135deg,#E9F2FC,#E6F3FA); }
body.theme-apple { --hero-grad:linear-gradient(135deg,#EDF2F8,#E7EDF4); }
body.theme-anime { --hero-grad:linear-gradient(135deg,#FFE7F1,#F2E5FF); }

/* ---------- 两套试用皮肤 ---------- */
body.theme-glassp{ --hero-grad:linear-gradient(160deg,rgba(255,255,255,.80),rgba(255,255,255,.52)); }
body.theme-dopa  { --hero-grad:linear-gradient(135deg,#F3ECFB,#FDECE3); }

/* ---------- 暗色皮肤：深空玻璃（白字可读，不再"亮一块"） ---------- */
body.theme-galaxy{ --hero-grad:linear-gradient(135deg,rgba(52,44,118,.86),rgba(24,30,66,.74)); }
body.theme-tech  { --hero-grad:linear-gradient(135deg,rgba(30,44,80,.88),rgba(18,24,44,.76)); }
/* 暗色皮肤下 hero 里的进度条轨道 / 按钮也跟着变深 */
body.theme-galaxy .card[style*="--hero-grad"],
body.theme-tech   .card[style*="--hero-grad"]{
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}


/* ============================================================
   18. AI 导师页整体退回 9-29 改造前效果(负责人 2026-09-29 深夜指定:
       AI 导师界面不要毛玻璃,退回改造前;其他页面保持毛玻璃)
   本节在文件最末尾,优先级最高,只覆盖 AI 页相关表面
   ============================================================ */
#appView.h5-page.chatting{background:var(--bg)}   /* 聊天页底色不透明,光斑不透进来 */
.chat-input{
  background:var(--glass) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);box-shadow:none;
}
body.low-gpu .chat-input{background:var(--glass) !important}
body.theme-galaxy .chat-input,
body.theme-tech .chat-input{background:var(--glass) !important}
#appView .chat-input-row .field{
  background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:0 8px 28px rgba(60,70,140,.08);
}
body.theme-galaxy #appView .chat-input-row .field{background:#1a2244;box-shadow:0 8px 28px rgba(0,0,0,.35)}
body.theme-tech #appView .chat-input-row .field{background:#1a2336;box-shadow:0 8px 28px rgba(0,0,0,.35)}
#tab-ai .chat-msg.ai{
  background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:0 8px 28px rgba(60,70,140,.08);
}
body.theme-galaxy #tab-ai .chat-msg.ai{background:#1a2244;box-shadow:0 8px 28px rgba(0,0,0,.35)}
body.theme-tech #tab-ai .chat-msg.ai{background:var(--card);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.ai-hist-panel{
  background:var(--solid) !important;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--border);
}
body.theme-galaxy .ai-hist-panel,
body.theme-tech .ai-hist-panel{background:var(--solid) !important}
#appView .ai-hist-card{
  background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.03);
}
#appView .ai-hist-btn{
  background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border);box-shadow:none;color:var(--primary);
}
#appView .ai-hist-continue{
  background:linear-gradient(135deg,#6C7CF8,#B36BFA);
  border:none;box-shadow:0 4px 12px rgba(120,90,255,.3);
}

/* --- 18e. iOS 键盘:底部留白去掉键盘高度(§18d 两刀中唯一有效的那刀,单留) ---
   真机确认(负责人 04:12):新号 0 条聊天记录,打字时屏里仍全空白 —— 因为 h5.css:283
   把键盘高度也加进底部留白(reserve+kb≈470px 纯空白在文档底部),连欢迎语都被挤出屏幕;
   而输入栏是 fixed+--kb 浮在键盘上方的,文档根本不需要替键盘留位。
   留白只留输入栏实测高度,欢迎语/聊天记录就会贴在输入栏上方。
   --chat-reserve 在打字期间是稳定值(只随输入栏高度变),不会闪。
   顶栏打字时仍会被 iOS 平移推出屏(收起键盘即回)——transform 补偿已实测闪屏(§18d),永不再做。
   仍 @supports 圈死 iOS;安卓布局视口自动缩小,原版天然正确,别碰 */
@supports (-webkit-touch-callout: none){
  body.kb-open #appView.h5-page.chatting{padding-bottom:var(--chat-reserve,180px)}
}

/* --- 18h. iOS 键盘:顶栏随可视视口偏移补偿(2026-09-29 凌晨诊断浮层实测定案) ---
   真机数据:弹键盘时 vvOT=414~459(恰为键盘高),iOS 把可视视口整体下移,
   sticky 顶栏渲染在可视区上方 y=-459 处(op=1 dp=block,不是被隐藏,是被推出屏);
   输入栏 fixed 钉底永远在可视区底,所以只有顶栏消失。
   修法:#aiTop 同步 translateY(--vvo) 补偿,把自己送回可视区顶部。
   §18d 闪屏的真正原因 = #aiTop 自带 transition:transform .3s × --vvo 高频重写;
   本案在键盘弹起期间强制 transition:none,§18d 的坑已避开。
   top-hide 的 -115% 隐藏让位给补偿(打字时顶栏必须可见)。
   仍 @supports 圈死 iOS;安卓 vvOT 恒 0 且无此规则,不受影响 */
@supports (-webkit-touch-callout: none){
  body.kb-open #aiTop{
    transform:translateY(var(--vvo,0px)) !important;
    transition:none !important;
    opacity:1 !important;
  }
}

/* --- 18i. AI 聊天页:外壳贴合可视区 + 聊天区内部滚动(2026-09-29 白天重构,治本) ---
   病根:真机实测该账号单栏目 128 条记录全部一次性渲染,文档被撑到 16000px(约 20 屏),
   于是"切栏目 / 发送"都要做万像素级的窗口滚动 → ①把键盘直接带没 ②整屏闪跳一帧
   ③顶栏跳位。真机上怎么压滚动都治不干净,因为问题不在"滚多少"而在"页面本身在滚"。
   正解(微信同款模型):页面本身永不滚动,只有聊天记录在内部滚动。
   做法:聊天页外壳精确贴合"可视区"(visualViewport):
     --app-h = vv.height(可视区高)  --app-y = vv.offsetTop(可视区在布局视口中的纵向偏移)
     · 键盘态①(系统把页面整体上推,vvOT=414) → 外壳下移 414,正好落进可视区
     · 键盘态②(vvOT=0,vvH=459)            → 外壳高 459,落在页面顶部
     · 无键盘 / 桌面(vvOT=0,vvH=inH)      → 外壳=满屏,视觉与原来完全一致
   外壳贴合后顶栏不需要 §18h 的二次补偿(会双重位移),在 chatting 内强制取消。
   输入栏仍是 fixed(bottom:86px / --kb),定位基准是布局视口,与外壳互不干扰。
   ⚠ 回退方式:整段删掉本块 + 去掉 h5.js 的 syncAppSize() 调用即可还原 */
#appView.h5-page.chatting{
  position:fixed;left:0;right:0;
  /* ⚠ 必须用 top 定位,绝不能用 transform:
     #aiInputBar / .tabbar 都在 #appView 内部且是 position:fixed,
     外壳一旦带 transform 就会成为它们的"包含块",输入栏会跟着外壳高度飞掉(§18c 同款翻车) */
  top:var(--app-y,0px);
  height:var(--app-h,100vh);
  min-height:0;                        /* 必须:h5.css 的 min-height:100vh 会把键盘态高度顶回去 */
  transition:none !important;          /* 高频跟随不带动画,避免与键盘动画打架 */
  overflow:hidden;
  padding-bottom:0 !important;         /* §18e 页面级留白已由聊天区内部留白取代 */
  display:flex;flex-direction:column;
}
#appView.h5-page.chatting .h5-body{
  flex:1 1 auto;min-height:0;padding:0;
  display:flex;flex-direction:column;
}
#appView.h5-page.chatting #tab-ai{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
}
#appView.h5-page.chatting #chatBox{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  overflow-anchor:none;                /* 必须:否则浏览器的滚动锚定会把"切栏目后贴底"顶回去 */
  padding:14px 16px var(--chat-reserve,180px);
}
#appView.h5-page.chatting #aiTop{transform:none !important}