/* 电脑版换外观（第 5 步，2026-09-30）· 归 Claude Code：课程页 / 上课页 / 选老师 / 离开卡 / 设置抽屉的壳。 负责人 2026-09-29：电脑版版面不重排，只换外观。做法照产品 电脑版\desk-themes.css：网站现有的电脑版一点不动，只盖一层。 ui2.js 在电脑上挂 （不挂 data-ui，手机 / iPad 的版面规则一条都不生效）， 并按主题把 body 摆成 skin-c（A / B / C 盖在连环画上）或 skin-b（D 盖在录音棚上）。练习页、注册 / 入口的盖层归 Codex（ui2-desk-lesson.css、ui2-desk-entry.css）。 */ /* ========== 共用：学生各自的颜色（--k）统一换成主题主色，颜色收一收 ========== */ html[data-desk-theme="a"] body,html[data-desk-theme="b"] body{--k:#FF7F66;} html[data-desk-theme="c"] body{--k:#1F1F24;} html[data-desk-theme="d"] body{--k:#1B2A44;} /* 新设置面板（settings2.css）用的是新外观的一组变量；电脑版不挂 data-ui，之前没给，面板就落到它写的 B 珊瑚色回退值（Codex 终检 f502200：桌面 C 泄漏珊瑚）。 四套的值照抄 ui2-theme.css（B）和 ui2-themes.css（A / C / D），挂在 html 上让面板和以后的盖层都取得到；旧样式里没人用这几个名字 */ html[data-desk-theme="a"]{--accent:#FF7F66;--on-accent:#1F1F24;--accent-ink:#B8452F;--accent-soft:#FFE3DA;--line:#1F1F24;--field:#fff;--surface:#fff;} html[data-desk-theme="b"]{--accent:#FF7F66;--on-accent:#1F1F24;--accent-ink:#B8452F;--accent-soft:#FFEDE8;--line:#E3E4E8;--field:#F3F4F6;--surface:#fff;} html[data-desk-theme="c"]{--accent:#1F1F24;--on-accent:#fff;--accent-ink:#1F1F24;--accent-soft:#F4F4F6;--line:#E9E9EC;--field:#F4F4F6;--surface:#fff;} html[data-desk-theme="d"]{--accent:#1B2A44;--on-accent:#fff;--accent-ink:#1B2A44;--accent-soft:#E3E9F2;--line:#D5DCE6;--field:#EDF1F6;--surface:#fff;} /* ========== A · 漫画（瘦身）：描边 3→2px、阴影 6→3px；只留米白底 + 珊瑚，黄色只标「当前」 ========== */ html[data-desk-theme="a"] body.skin-c{background:#FFFBF2 radial-gradient(#EFE5CF 1.2px,transparent 1.5px) 0 0/24px 24px;} html[data-desk-theme="a"] .skin-c .box,html[data-desk-theme="a"] .skin-c .lc{border-width:2px;box-shadow:3px 3px 0 var(--ink);} html[data-desk-theme="a"] .skin-c .lv-btn,html[data-desk-theme="a"] .skin-c .mailbtn,html[data-desk-theme="a"] .skin-c .fab{border-width:2px;} html[data-desk-theme="a"] .skin-c .lv-btn.go{background:var(--k);} html[data-desk-theme="a"] .skin-c .g-head h1{border-width:2px;transform:none;} html[data-desk-theme="a"] .skin-c .lc-date{background:#fff;border-bottom-width:2px;} html[data-desk-theme="a"] .skin-c .lc.new .lc-date{background:var(--sun);} html[data-desk-theme="a"] .skin-c .pill{border-width:2px;} html[data-desk-theme="a"] .skin-c .pill.on{background:#FFE3DA;} html[data-desk-theme="a"] .skin-c .wb{background:#fff;} html[data-desk-theme="a"] .skin-c .wb-ico{border-width:2px;background:var(--sun);} html[data-desk-theme="a"] .skin-c .split .hd{background:#fff;border-bottom-width:2px;} html[data-desk-theme="a"] .skin-c .split .hd.cls{background:var(--k);} html[data-desk-theme="a"] .classp .b,html[data-desk-theme="a"] .classp .tav{border-width:2px;} html[data-desk-theme="a"] .classp .b.s{background:#FFE3DA;} html[data-desk-theme="a"] .classp .b.sys{background:#FFF6D8;} html[data-desk-theme="a"] .prog i{border-width:2px;} html[data-desk-theme="a"] .prog i.done{background:var(--ink);} html[data-desk-theme="a"] .prog i.cur{background:var(--k);} html[data-desk-theme="a"] .stage{border-width:2px;} html[data-desk-theme="a"] .cl-input{border-top-width:2px;} html[data-desk-theme="a"] .cl-input textarea{border-width:2px;} html[data-desk-theme="a"] .skin-c .cp-card{border-width:2px;box-shadow:3px 3px 0 var(--ink);} html[data-desk-theme="a"] .skin-c .setdrawer{border-width:2px;} /* ========== B · 清新：不描边，白卡片 + 很淡的阴影；浅灰底；珊瑚底上深墨字 ========== */ html[data-desk-theme="b"] body.skin-c{background:#F3F4F6;} html[data-desk-theme="b"] .skin-c h1,html[data-desk-theme="b"] .skin-c h2,html[data-desk-theme="b"] .skin-c .lc-title,html[data-desk-theme="b"] .skin-c .lv-btn{font-family:"Nunito","PingFang SC",sans-serif;font-weight:800;} html[data-desk-theme="b"] .skin-c .box,html[data-desk-theme="b"] .skin-c .lc{border:0;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);} html[data-desk-theme="b"] .skin-c .lv-btn,html[data-desk-theme="b"] .skin-c .mailbtn{border:0;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.1);border-radius:14px;} html[data-desk-theme="b"] .skin-c .lv-btn.go{background:#FF7F66;color:#1F1F24;} html[data-desk-theme="b"] .skin-c .fab{border:0;background:#fff;box-shadow:0 6px 20px rgba(16,24,40,.15);} html[data-desk-theme="b"] .skin-c .mailbtn .dot{border:0;} html[data-desk-theme="b"] .skin-c .g-head h1{background:none;border:0;padding:0;transform:none;} html[data-desk-theme="b"] .skin-c .lc-date{background:transparent;border-bottom:0;color:#6B6B76;} html[data-desk-theme="b"] .skin-c .lc.new .lc-date{color:#B8452F;} html[data-desk-theme="b"] .skin-c .lc.new{box-shadow:0 0 0 2px #FF7F66,0 6px 16px rgba(16,24,40,.06);} html[data-desk-theme="b"] .skin-c .pill{border:0;background:#F1F1F4;color:#5E5E6A;} html[data-desk-theme="b"] .skin-c .pill.on{background:#E3F4E4;color:#17663F;} html[data-desk-theme="b"] .skin-c .pill.sub{background:#1F1F24;color:#fff;} html[data-desk-theme="b"] .skin-c .wb{background:#fff;} html[data-desk-theme="b"] .skin-c .wb-ico{border:0;background:#FFEDE8;} html[data-desk-theme="b"] .skin-c .split .hd{background:transparent;border-bottom:0;color:#6B6B76;} html[data-desk-theme="b"] .skin-c .split .hd.cls{color:#B8452F;} html[data-desk-theme="b"] .skin-c .split .x{border:0;box-shadow:0 2px 8px rgba(16,24,40,.2);} html[data-desk-theme="b"] .classp .b{border:0;} html[data-desk-theme="b"] .classp .b.t{box-shadow:0 1px 2px rgba(16,24,40,.08);} html[data-desk-theme="b"] .classp .b.s{background:#FF7F66;color:#1F1F24;} html[data-desk-theme="b"] .classp .b.sys{background:#FFF4E0;} html[data-desk-theme="b"] .classp .tav{border:0;} html[data-desk-theme="b"] .prog i{border:0;height:6px;background:#E4E4EA;} html[data-desk-theme="b"] .prog i.done{background:#FFB4A4;} html[data-desk-theme="b"] .prog i.cur{background:#FF7F66;} html[data-desk-theme="b"] .stage{border:0;background:#FFEDE8;} html[data-desk-theme="b"] .cl-input{border-top:1px solid #ECEDF0;} html[data-desk-theme="b"] .cl-input textarea{border:0;background:#F3F4F6;border-radius:24px;padding:14px 16px;} html[data-desk-theme="b"] .ai-tag{border:0;background:rgba(0,0,0,.05);} html[data-desk-theme="b"] .cp-catch{border:0;box-shadow:0 2px 10px rgba(16,24,40,.12);} html[data-desk-theme="b"] .skin-c .cp-card{border:0;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);} html[data-desk-theme="b"] .skin-c .cp-card.on{box-shadow:0 0 0 3px #FF7F66,0 6px 16px rgba(16,24,40,.06);} html[data-desk-theme="b"] .skin-c .setdrawer{border:0;box-shadow:-12px 0 36px rgba(16,24,40,.18);} /* ========== C · 简约：白底、1px 细线、没有阴影；主色深墨，珊瑚只留在 Logo ========== */ html[data-desk-theme="c"] body.skin-c{background:#fff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;} html[data-desk-theme="c"] .skin-c h1,html[data-desk-theme="c"] .skin-c h2,html[data-desk-theme="c"] .skin-c .lc-title,html[data-desk-theme="c"] .skin-c .lv-btn{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-weight:600;} html[data-desk-theme="c"] .skin-c .box,html[data-desk-theme="c"] .skin-c .lc{border:1px solid #E9E9EC;border-radius:12px;background:#fff;box-shadow:none;} html[data-desk-theme="c"] .skin-c .lv-btn,html[data-desk-theme="c"] .skin-c .mailbtn,html[data-desk-theme="c"] .skin-c .fab{border:1px solid #E9E9EC;box-shadow:none;border-radius:12px;} html[data-desk-theme="c"] .skin-c .fab{border-radius:50%;} html[data-desk-theme="c"] .skin-c .lv-btn.go{background:#1F1F24;color:#fff;border-color:#1F1F24;} html[data-desk-theme="c"] .skin-c .mailbtn .dot{border:0;} html[data-desk-theme="c"] .skin-c .g-head h1{background:none;border:0;padding:0;transform:none;font-weight:600;} html[data-desk-theme="c"] .skin-c .lc-date{background:transparent;border-bottom:1px solid #E9E9EC;color:#6B6B76;} html[data-desk-theme="c"] .skin-c .lc.new{border-color:#1F1F24;} html[data-desk-theme="c"] .skin-c .lc.new .lc-date{color:#1F1F24;} html[data-desk-theme="c"] .skin-c .pill{border:0;background:#F4F4F6;color:#5E5E6A;} html[data-desk-theme="c"] .skin-c .pill.on{background:#F4F4F6;color:#1F1F24;} html[data-desk-theme="c"] .skin-c .wb{background:#fff;} html[data-desk-theme="c"] .skin-c .wb-ico{border:0;background:#F4F4F6;} html[data-desk-theme="c"] .skin-c .split .hd{background:transparent;border-bottom:1px solid #E9E9EC;color:#6B6B76;} html[data-desk-theme="c"] .skin-c .split .hd.cls{color:#1F1F24;} html[data-desk-theme="c"] .skin-c .split .x{border:1px solid #E9E9EC;} html[data-desk-theme="c"] .classp .b{border:0;} html[data-desk-theme="c"] .classp .b.t{background:#F2F2F5;} html[data-desk-theme="c"] .classp .b.s{background:#1F1F24;color:#fff;} html[data-desk-theme="c"] .classp .b.sys{background:#F7F7F9;} html[data-desk-theme="c"] .classp .b.card{border:1px solid #E9E9EC;background:#fff;} html[data-desk-theme="c"] .classp .tav{border:0;} html[data-desk-theme="c"] .prog i{border:0;height:4px;background:#E9E9EC;} html[data-desk-theme="c"] .prog i.done{background:#1F1F24;} html[data-desk-theme="c"] .prog i.cur{background:#8E8E96;} html[data-desk-theme="c"] .stage{border:0;background:#F4F4F6;} html[data-desk-theme="c"] .cl-input{border-top:1px solid #E9E9EC;} html[data-desk-theme="c"] .cl-input textarea{border:0;background:#F4F4F6;border-radius:22px;padding:14px 16px;} html[data-desk-theme="c"] .ai-tag{border:0;background:#F4F4F6;} html[data-desk-theme="c"] .cp-catch{border:1px solid #E9E9EC;} html[data-desk-theme="c"] .skin-c .cp-card{border:1px solid #E9E9EC;box-shadow:none;} html[data-desk-theme="c"] .skin-c .cp-card.on{border-color:#1F1F24;box-shadow:0 0 0 1px #1F1F24;} html[data-desk-theme="c"] .skin-c .setdrawer{border:0;border-left:1px solid #E9E9EC;box-shadow:none;} /* ========== D · 录音棚（优化）：盖在现在的 skin-b 上；学生色统一成调音台深蓝，红色只给 ON AIR / 录音 ========== */ html[data-desk-theme="d"] .skin-b .lc{border-top-color:#1B2A44;} html[data-desk-theme="d"] .skin-b .lc.new{border-top-color:#F0B23A;} html[data-desk-theme="d"] .skin-b .g-head h1{color:#fff;} html[data-desk-theme="d"] .skin-b .lv-btn{border:0;background:#fff;box-shadow:0 1px 3px rgba(27,42,68,.12);} html[data-desk-theme="d"] .skin-b .lv-btn.go{background:#1B2A44;color:#fff;} html[data-desk-theme="d"] .skin-b .mailbtn,html[data-desk-theme="d"] .skin-b .fab{border:0;box-shadow:0 2px 10px rgba(27,42,68,.18);} html[data-desk-theme="d"] .skin-b .box{border:0;} html[data-desk-theme="d"] .skin-b .split .hd{background:#1B2A44;color:#fff;border-bottom:0;} html[data-desk-theme="d"] .skin-b .split .hd.cls{background:#1B2A44;} html[data-desk-theme="d"] .classp .b{border:0;} html[data-desk-theme="d"] .classp .b.t{box-shadow:0 1px 2px rgba(27,42,68,.1);} html[data-desk-theme="d"] .classp .b.s{background:#1B2A44;color:#fff;} html[data-desk-theme="d"] .prog i{border:0;height:6px;background:#D5DCE6;} html[data-desk-theme="d"] .prog i.done{background:#8FA3BF;} html[data-desk-theme="d"] .prog i.cur{background:#F0B23A;} html[data-desk-theme="d"] .stage{border:0;background:#E3E9F2;} html[data-desk-theme="d"] .cl-input{border-top:1px solid #D5DCE6;} html[data-desk-theme="d"] .cl-input textarea{border:0;background:#EDF1F6;border-radius:22px;padding:14px 16px;} html[data-desk-theme="d"] .skin-b .cp-card.on{box-shadow:0 0 0 3px #1B2A44;}