/* 学生端新外观（UI2）· 主题变量 + 通用部件（负责人 2026-09-29：4 套主题，默认 B；方案见交接区
   《给Codex_学生端四套主题与手机版_第1步方案与分工_2026-09-29.md》，设计见 交接区\设计\手机版UI）。

   规矩：
   - 这里和所有 ui2-*.css 的规则都挂在 html[data-ui="2"] 下面；不满足时页面和以前一模一样（旧文件的规则一条不改）。
   - 各页的 ui2-m-*.css 只管「东西放哪、多大」，颜色 / 描边 / 阴影 / 圆角 / 字体一律用这里的变量，别写死。
   - 第 1 步只有主题 B（聊天 App 风）；A / C / D 在 ui2-themes.css（第 4 步，2026-09-30），各自一段 html[data-ui="2"][data-theme="…"] 改变量 + 少量差异。
   - 硬性要求：能点的 ≥44×44；正文、输入框 ≥16px（小标签 ≥13px）；左右留白 16px；页面不横向滚动。 */

/* 能用新外观的页面：开关程序（ui2.js）跑起来之前先不显示，免得先闪一下旧外观；程序万一没载到，1.5 秒后照样显示（旧外观）。
   不限宽度：第 3 步起新外观管到手机 / iPad / 电脑（desk 也由 ui2.js 标 ready），限了宽度 650、820 宽会先闪旧首页（皮肤检查第三节） */
html[data-ui2="1"]:not([data-ui2-ready]) body{visibility:hidden;animation:ui2Show 0s 1.5s forwards;}
@keyframes ui2Show{to{visibility:visible;}}

/* ---------------- 变量（默认 = 主题 B · 聊天 App 风：不描边，白卡片 + 很淡的阴影，珊瑚色） ---------------- */
html[data-ui="2"]{
  --bg:#F3F4F6; --surface:#fff; --ink:#1F1F24; --mute:#6B6B76; --line:#E3E4E8;
  --bw:0px; --bc:transparent; --r:18px; --r-sm:12px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06); --sh-press:0 1px 2px rgba(16,24,40,.08);
  --accent:#FF7F66; --on-accent:#1F1F24; --accent-ink:#B8452F; --accent-soft:#FFEDE8; --hi:#FF7F66;   /* 珊瑚底上不用白字：白对珊瑚只有 2.5:1，改深墨色 6.6:1；珊瑚小字加深到 4.5:1 以上（产品会话 2026-09-30，负责人让它把四套皮肤都查一遍） */
  --ok:#2FA36B; --ok-soft:#E3F4E4; --warn:#C62D1F; --warn-soft:#FFEDEA;
  --soft:#F7F7F9; --field:#F3F4F6;
  --bar-ink:var(--ink); --bar-mute:var(--mute); --chip-bg:var(--accent-soft);          /* 顶栏上的字 / 小牌（录音棚的顶栏是深蓝，字要浅） */
  --prog-off:#E4E4EA; --prog-done:#FFB4A4; --prog-cur:var(--accent);                 /* 上课进度条 */
  --sys-bg:#E9EAEE; --ex-bg:#FFF4F1; --ex-line:var(--accent);                        /* 提示气泡、示范句块 */
  --t-bub:#fff; --t-ink:var(--ink); --s-bub:#FF7F66; --s-ink:#1F1F24; --bar:rgba(255,255,255,.94);
  --head:"Nunito","PingFang SC","Microsoft YaHei",sans-serif;
  --body:"Nunito","PingFang SC","Microsoft YaHei",sans-serif;
  --gut:16px; --tap:44px;
  /* 旧样式里到处用的几个名字：在新外观里给它们新的值，旧的结构样式（base.css / level.css）跟着变 */
  --sun:var(--accent-soft); --leaf:var(--ok-soft); --rec:#E5483C; --k:var(--accent); --s:var(--accent); --c:var(--accent);
}
html[data-ui="2"],html[data-ui="2"] body{background:var(--bg);}
html[data-ui="2"] body{color:var(--ink);font:16px/1.5 var(--body);-webkit-text-size-adjust:100%;overflow-x:hidden;accent-color:var(--accent);}   /* 单选圈、勾选框跟主题色，不是浏览器默认蓝（皮肤检查第 16 条） */
/* 等老师回复的灰字：要看得清（这句是叫学生别重发的），用次要色而不是更淡的灰（皮肤检查第 19 条：原来对比只有 2.4） */
html[data-ui="2"] .wait-txt,html[data-ui="2"] .wait-slow{color:var(--mute);}
html[data-ui="2"] h1,html[data-ui="2"] h2,html[data-ui="2"] h3{font-family:var(--head);font-weight:800;text-wrap:balance;}
html[data-ui="2"] .wrap{padding-left:var(--gut);padding-right:var(--gut);}

/* ---------------- 卡片 ---------------- */
html[data-ui="2"] .box,html[data-ui="2"] .lc,html[data-ui="2"] .pinpad{
  background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--r);box-shadow:var(--sh);}

/* ---------------- 按钮：主按钮珊瑚色，次按钮浅灰；都不小于 48 高 ---------------- */
html[data-ui="2"] .lv-btn{min-height:48px;margin:4px 8px 4px 0;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:700 17px/1.2 var(--head);color:var(--ink);background:var(--field);border:var(--bw) solid var(--bc);border-radius:calc(var(--r) - 4px);box-shadow:none;}
html[data-ui="2"] .lv-btn.go{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh);}
html[data-ui="2"] .lv-btn.sm{min-height:var(--tap);font-size:15px;padding:0 14px;}
html[data-ui="2"] .lv-btn:disabled{opacity:.45;box-shadow:none;}
/* 按下：往里缩一点、暗一点（B 没有硬阴影，不能「压进阴影」）；按住录音的大圆另算 */
html[data-ui="2"] button:active:not(:disabled):not(.hold),html[data-ui="2"] button.press:not(:disabled):not(.hold),
html[data-ui="2"] a.press,html[data-ui="2"] [role=button].press{transform:scale(.97);box-shadow:var(--sh-press);filter:brightness(.95);}
html[data-ui="2"] button,html[data-ui="2"] a,html[data-ui="2"] [role=button]{transition:transform .06s ease-out,filter .06s ease-out,box-shadow .06s ease-out;}
/* 只有字的按钮（← 回课程页、退出）：点击范围补到 44 */
html[data-ui="2"] .back,html[data-ui="2"] .logout,html[data-ui="2"] .lost{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;font:800 16px var(--body);color:var(--ink);}

/* ---------------- 标签、分段开关 ---------------- */
html[data-ui="2"] .pill{border:0;background:var(--field);color:var(--mute);font-weight:800;font-size:13px;border-radius:999px;}
html[data-ui="2"] .pill.on{background:var(--ok-soft);color:#1E7A4F;}
html[data-ui="2"] .pill.sub{background:var(--accent);color:var(--on-accent);}
html[data-ui="2"] .seg{border:0;background:var(--field);border-radius:var(--r-sm);padding:3px;}
html[data-ui="2"] .seg b{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--r-sm) - 3px);font-weight:800;font-size:15px;}
html[data-ui="2"] .seg b.on{background:var(--surface);box-shadow:var(--sh-press);}

/* ---------------- 输入框 ---------------- */
html[data-ui="2"] input[type=text],html[data-ui="2"] input[type=email],html[data-ui="2"] input[type=number],html[data-ui="2"] input[type=search],
html[data-ui="2"] .reg .pin,html[data-ui="2"] select,html[data-ui="2"] textarea{
  min-height:50px;font:600 17px/1.4 var(--body);color:var(--ink);background:var(--field);border:2px solid transparent;border-radius:var(--r-sm);padding:10px 14px;}
html[data-ui="2"] .reg .pin{font-size:24px;letter-spacing:.6em;text-align:center;}   /* 注册页的口令框：type=password 不在上面的列表里，旧外观 3px 黑边会漏进新外观（Codex 终检阻断 1）；字距和居中照旧 */
html[data-ui="2"] input:focus-visible,html[data-ui="2"] select:focus-visible,html[data-ui="2"] textarea:focus-visible{outline:none;border-color:var(--accent);background:var(--surface);}
html[data-ui="2"] button:focus-visible,html[data-ui="2"] a:focus-visible,html[data-ui="2"] [role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---------------- 弹窗：手机上从底部托上来，按钮够得着 ---------------- */
html[data-ui="2"] .lv-modal{background:rgba(16,24,40,.45);padding:0;align-items:end;}
html[data-ui="2"] .lv-modal .lv-card{max-width:none;width:100%;margin:0;border-radius:var(--r) var(--r) 0 0;box-shadow:0 -8px 28px rgba(16,24,40,.18);
  padding:22px var(--gut) calc(18px + env(safe-area-inset-bottom,0px));max-height:88dvh;overflow:auto;}
html[data-ui="2"] .lv-lead{font-size:17px;} html[data-ui="2"] .lv-hint{font-size:14px;color:var(--mute);}
/* 离开前问一句（leave.js；设计 B2_class_离开.png）：底部托出，拖把、标题、灰字、浅珊瑚「✓」行、主按钮、文字按钮 */
html[data-ui="2"] .lv-card.leave{text-align:left;padding-top:12px;}
html[data-ui="2"] .leave .grab{display:block;width:44px;height:5px;margin:0 auto 18px;border-radius:3px;background:#D5D7DE;}
html[data-ui="2"] .leave h2{margin:0 0 6px;font:800 22px/1.3 var(--head);}
html[data-ui="2"] .leave .lv-hint{margin:0 0 14px;font-size:16px;}
html[data-ui="2"] .leave .leave-note{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink);font-size:16px;font-weight:800;}
html[data-ui="2"] .leave .leave-note::before{content:"✓";margin-right:10px;}
html[data-ui="2"] .leave .lv-btn{display:flex;width:100%;margin:0 0 8px;min-height:54px;font-size:18px;}
html[data-ui="2"] .leave .lv-btn.plain{background:none;box-shadow:none;color:var(--ink);margin-bottom:0;}

/* ---------------- 弹窗顶上的圆图标（第一节课准备好了、练习课准备好了、陪伴老师还没开放、下课……）：不再是漫画黑圈 + 硬阴影 + 写死的绿 / 蓝（皮肤检查第 6 条）---------------- */
html[data-ui="2"] .badge{border:0;box-shadow:none;background:var(--accent-soft);color:var(--ink);}
html[data-ui="2"] .badge.ok{background:var(--ok-soft);color:var(--ok);}
html[data-ui="2"] .badge.k{background:var(--accent);color:var(--on-accent);}
html[data-ui="2"] .badge.soft{background:var(--field);color:var(--mute);}
/* 程序自动聚焦主按钮时不画键盘焦点框（皮肤检查第 20 条）：最近一次是手指 / 鼠标（btn.js 标 html[data-pointing]）就不画，按了键盘再画 */
html[data-ui="2"][data-pointing] button:focus-visible,html[data-ui="2"][data-pointing] a:focus-visible,html[data-ui="2"][data-pointing] [role=button]:focus-visible{outline:none;}

/* ---------------- 小东西 ---------------- */
html[data-ui="2"] .ai-tag{border:0;background:var(--field);color:var(--mute);font-size:13px;padding:4px 10px;}
html[data-ui="2"] .brand{font-family:"Fredoka","Nunito",sans-serif;background:none;border:0;transform:none;padding:0;font-size:24px;font-weight:700;}
html[data-ui="2"] .btn-err{font-size:15px;color:var(--warn);}
@media (prefers-reduced-motion:reduce){
  html[data-ui="2"] button,html[data-ui="2"] a,html[data-ui="2"] [role=button]{transition:none;}
  html[data-ui="2"] button:active:not(:disabled):not(.hold),html[data-ui="2"] button.press:not(:disabled):not(.hold){transform:none;}
}

/* ---------------- 主题 A / C / D：第 4 步在这里各加一段改变量 ---------------- */