/* 选等级 + 小测 + 信箱（开发方案 A1，样品 tools/mockups/level-quiz.html、student-flow.html 负责人 2026-09-27 通过）。
   颜色用两套皮肤各自的变量（--ink / --mute / --k），两套皮肤下都能看。 */
.lvp .wrap{max-width:760px;}
.lv-top{display:flex;align-items:center;gap:12px;padding:18px 0 4px;flex-wrap:wrap;}
.lv-top .sp{flex:1;}
.lv-tag{font-weight:800;border:2px solid var(--ink);border-radius:20px;padding:2px 12px;background:#fff;}
.lv-tag.none{color:var(--mute);border-style:dashed;}
.mailbtn{position:relative;display:inline-grid;place-items:center;width:46px;height:42px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;}
.mailbtn svg{width:24px;height:24px;}
.mailbtn .dot{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;border-radius:11px;background:#E5483C;color:#fff;font:800 13px/18px "Nunito",sans-serif;border:2px solid var(--ink);padding:0 5px;}
.lv-h{margin:12px 0 4px;font-size:clamp(26px,5vw,34px);}
.lv-lead{font-size:17px;margin:6px 0 2px;font-weight:700;}
.lv-hint{font-size:14px;color:var(--mute);margin:0 0 14px;font-weight:700;}
.lv-row{display:flex;gap:14px;align-items:center;width:100%;text-align:left;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:12px 14px;margin:0 0 10px;cursor:pointer;font:inherit;color:var(--ink);}
.lv-row b{font-size:20px;min-width:40px;font-family:"Fredoka","Nunito",sans-serif;}
.lv-row span{font-size:16px;line-height:1.4;}
.lv-row[disabled]{opacity:.4;cursor:default;}
.lv-card{padding:22px 20px;margin:18px 0;}
.lv-card.center{text-align:center;}
.lv-row.closed{opacity:.55;} .lv-row .lv-soon{font-size:15px;font-weight:800;border:2px solid var(--ink,#1F1F24);border-radius:8px;padding:1px 8px;background:#eee;white-space:nowrap;}
/* 狗头的招牌话「我是校长」（负责人 2026-09-28：这是狗头的 slogan） */
.doge-say{position:relative;display:inline-block;}
.doge-bub{position:absolute;top:6px;left:calc(100% - 18px);white-space:nowrap;background:#fff;border:3px solid var(--ink,#1F1F24);border-radius:16px;
  padding:4px 12px;font:700 16px "Fredoka","Nunito",sans-serif;box-shadow:3px 3px 0 var(--ink,#1F1F24);}
.doge-bub::before{content:"";position:absolute;left:-13px;bottom:8px;border:6px solid transparent;border-right:10px solid var(--ink,#1F1F24);}
.lv-card .big{font-size:19px;font-weight:800;line-height:1.6;margin:10px 0 16px;}
.lv-card svg{width:150px;height:150px;}
.lv-q{margin:0 0 18px;}
.lv-q .zh{font-weight:800;margin-bottom:6px;line-height:1.5;}
.lv-q .lv-tip{font-size:.9em;color:#6b6b76;margin:0 0 6px;}
.lv-q label{display:block;border:2px solid #d9d9e0;border-radius:10px;padding:8px 10px;margin:6px 0;cursor:pointer;background:#fff;}
.lv-q label:has(input:checked){border-color:var(--ink);background:#FFF8E1;}
.lv-q input[type=radio]{margin-right:8px;}
.lv-q textarea,.lv-card textarea{width:100%;min-height:80px;font:16px/1.4 "Nunito",sans-serif;border:3px solid var(--ink);border-radius:10px;padding:8px;resize:vertical;box-sizing:border-box;}
.lv-btn{font:600 17px "Fredoka","Nunito",sans-serif;padding:9px 18px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);cursor:pointer;margin:4px 6px 4px 0;}
a.lv-btn{display:inline-block;text-decoration:none;}   /* 链接做的按钮：不设成块的话上下内边距会压到上一行字（负责人 2026-09-29 注册页截图） */
.lv-btn.go{background:var(--sun,#FFD15C);}
/* 参考条、右栏「这题要写的」、题卡 / 示范句上的图钉：只有新外观有（第 3 步）；旧外观一律不显示 */
.cl-ref,.cl-task,.refpin{display:none;}   /* 类名别叫 .pin：注册页和「我的资料」的口令输入框就叫 .pin，会被一起藏掉（皮肤检查 01a，Codex 转来） */
/* 离开前问一句（leave.js）：旧外观用居中的卡；新外观的样子在 ui2-theme.css */
.lv-card.leave .grab{display:none;} .lv-card.leave h2{margin:0 0 6px;}
.lv-card.leave .leave-note{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:#FFF1EC;font-weight:800;} .lv-card.leave .leave-note::before{content:"✓ ";}
.lv-card.leave .lv-btn.plain{border-color:transparent;background:none;}
.lv-msg{padding:10px 12px;border-radius:10px;margin:10px 0;font-weight:700;background:#FFE4DE;}
.lv-msg.ok{background:#DCF3DE;}
.lv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.lv-chip{border:3px solid var(--ink);border-radius:30px;background:#fff;padding:5px 14px;font-weight:800;cursor:pointer;color:var(--ink);font-family:inherit;font-size:15px;}
.lv-chip.on{background:var(--k);color:#fff;}
/* 信箱 */
.mb-list{padding:4px 0;}
.mb-item{display:flex;gap:12px;padding:14px 16px;border-bottom:2px solid #ececf1;align-items:flex-start;}
.mb-item:last-child{border-bottom:none;}
.mb-item .t{font-weight:800;}
.mb-item.new{background:#FFFBEA;}
.mb-item.new .t::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#E5483C;margin-left:8px;vertical-align:middle;}
.mb-item .when{font-size:13px;color:var(--mute);font-weight:700;}
.mb-empty{padding:18px;color:var(--mute);font-weight:700;}
.lv-modal{position:fixed;inset:0;background:rgba(31,31,36,.55);display:grid;place-items:center;padding:16px;z-index:80;}
.lv-modal .lv-card{max-width:440px;width:100%;background:#fff;text-align:center;}
.g-note{border:3px solid var(--ink);border-radius:14px;background:#FFF1C2;padding:12px 14px;margin:14px 0 0;font-weight:800;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.g-note a{color:inherit;}

/* AI 课堂（C 段） */
.classp .wrap{max-width:960px;}
.cl-scene{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin:10px 0 12px;}
.cl-scene .fd{font-size:18px;font-weight:700;}
.stage{font-size:13px;font-weight:800;border:2px solid var(--ink);border-radius:20px;padding:1px 10px;}
.stage.fix{background:#FFE4DE;} .stage.up{background:#E3F4E4;}
.prog{display:flex;gap:6px;margin-left:auto;} .prog i{width:30px;height:10px;border-radius:6px;border:2px solid var(--ink);background:#fff;}
.prog i.done{background:#7CC47F;} .prog i.cur{background:var(--sun,#FFD15C);}
.cl-grid{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start;}
@media (max-width:760px){.cl-grid{grid-template-columns:1fr;}}
.cl-main{overflow:hidden;}
.classp .chat{padding:14px;min-height:360px;max-height:62vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.classp .b{max-width:82%;padding:10px 14px;border-radius:16px;border:2px solid var(--ink);white-space:pre-wrap;line-height:1.55;}
/* 老师的话 = 小头像 + 气泡（方案图 v2）；气泡不再占满整个框 */
.classp .tb{display:flex;gap:8px;align-items:flex-start;align-self:flex-start;max-width:88%;}
.classp .tb .b{max-width:100%;}
.classp .tav{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:#FFF3D6 50% 0 / 170% auto no-repeat;}
.classp .tav.noone{display:grid;place-items:center;background:#f3f3f6;} .classp .tav.noone .ico{width:20px;height:20px;}
/* 有陪伴老师：大横条收起，顶上只留一行小字 */
.cl-topic{display:none;font-size:14px;font-weight:800;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:6px;}
.withcp .cl-topic{display:block;flex:1;} .withcp .cl-scene{display:none;}
.classp .tav.flat{background-position:center;background-size:92%;}   /* 校长、教导主任是一张脸：整张放进去 */
@media (max-width:600px){.classp .b{max-width:86%;padding:8px 12px;font-size:15.5px;} .classp .tb{max-width:92%;} .classp .tav{width:32px;height:32px;}
  .withcp .lv-top{flex-wrap:wrap;} .withcp .cl-topic{flex-basis:100%;order:3;white-space:normal;margin:0 0 4px;}}   /* 手机：课题自己一行，不截断 */
.classp .b.t{align-self:flex-start;background:#fff;border-top-left-radius:4px;}
.classp .b.s{align-self:flex-end;background:#E6F4FC;border-top-right-radius:4px;}
.classp .b.sys{align-self:center;background:#FFF1C2;font-weight:700;}
.classp .b.card{align-self:stretch;max-width:none;background:#FFF8E6;border-style:dashed;}
.classp .b.note{align-self:stretch;max-width:none;background:#EAF6E8;border-style:dashed;font-weight:700;}   /* 老师带的话 */
.classp .b .who{display:block;font-size:12px;font-weight:800;color:var(--mute);margin-bottom:2px;}
.classp .b .ex{display:block;margin:4px 0;padding:6px 10px;border-left:4px solid #37A3E0;background:#F2F9FE;border-radius:6px;font-weight:700;}
.cl-input{display:flex;gap:10px;padding:12px;border-top:3px solid var(--ink);align-items:flex-end;}
.cl-input textarea{min-height:56px;flex:1;font:16px/1.4 "Nunito",sans-serif;border:3px solid var(--ink);border-radius:12px;padding:10px;}
.cl-msg{padding:0 12px 10px;color:#a1261d;font-weight:700;}
.cl-side{padding:14px 16px;} .cl-side h3{margin:0 0 8px;font-size:18px;}
.cl-side ul{margin:0;padding-left:18px;} .cl-side li{margin:4px 0;font-weight:700;} .cl-side li small{display:block;font-weight:600;color:var(--mute);}
.cl-side .empty{color:var(--mute);}
.g-class{display:flex;gap:14px;align-items:center;padding:16px 18px;margin:14px 0 0;background:var(--sun,#FFD15C);flex-wrap:wrap;}
.g-class .t{flex:1;min-width:200px;} .g-class h2{margin:0;font-size:22px;} .g-class p{margin:4px 0 0;font-weight:700;}
.g-class.wait{background:#fff;}
/* 弹窗上的圆形线条图标（不用 emoji，负责人 2026-09-24 / 09-28） */
.badge{display:inline-grid;place-items:center;width:64px;height:64px;border:3px solid var(--ink);border-radius:50%;background:var(--sun,#FFD15C);box-shadow:3px 3px 0 var(--ink);margin-bottom:6px;}
.badge.ok{background:#7CC47F;} .badge.k{background:#56B6E8;} .badge.soft{background:#F3F3F6;}
.badge .ico{width:32px;height:32px;}
.badge.sm{width:48px;height:48px;margin:0;flex:none;} .badge.sm .ico{width:24px;height:24px;}
/* 课程页「课程准备中」的进度小标签（负责人 2026-09-28） */
.g-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.g-steps span{font-size:13px;font-weight:800;border:2px solid var(--ink);border-radius:14px;padding:1px 10px;background:#fff;}
.g-steps span.done{background:#7CC47F;} .g-steps span.cur{background:var(--sun,#FFD15C);}
.g-steps .ico{width:12px;height:12px;vertical-align:-1px;}
/* 进教室先点「开始上课」（负责人 2026-09-28） */
.cl-start{text-align:center;margin:auto;padding:30px 12px;}
.cl-start p{font-weight:800;color:var(--mute);}
.cl-start .lv-btn{font-size:22px;padding:12px 30px;}
/* 下课休息页的倒计时（负责人 2026-09-28） */
.rest-clock{font-size:64px;font-weight:800;line-height:1;margin:6px 0 12px;font-variant-numeric:tabular-nums;letter-spacing:2px;}
/* 课后练习准备中：从下往上浸水（负责人 2026-09-28）。一块转着的大圆角方块慢慢升上来，上沿就是水波 */
.lc.prep{position:relative;overflow:hidden;}
.lc.prep>*:not(.water){position:relative;z-index:1;}
.lc.prep .water{position:absolute;inset:0;z-index:0;pointer-events:none;}
.lc.prep .water i{position:absolute;left:-50%;width:200%;aspect-ratio:1;top:100%;border-radius:42%;background:rgba(74,158,255,.32);
  animation:prep-spin 6s linear infinite,prep-rise 9s ease-in-out infinite;}
@keyframes prep-spin{to{transform:rotate(360deg);}}
@keyframes prep-rise{0%{top:100%;opacity:1;}80%{top:8%;opacity:1;}100%{top:8%;opacity:0;}}
@media (prefers-reduced-motion:reduce){.lc.prep .water i{animation:none;top:45%;}}
/* 下课反馈（负责人 2026-09-28）：休息页之前的小卡片 */
.lv-modal .lv-card.fb{text-align:left;max-width:460px;}
.fb .badge{display:flex;margin:0 auto 6px;}
.fb h2{text-align:center;margin:4px 0 2px;font-size:22px;}
.fb .lv-hint{text-align:center;margin:0 0 14px;}
.fb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-weight:800;}
.fb-row.col{flex-direction:column;align-items:stretch;gap:6px;}
.fb-row small{font-weight:600;color:var(--mute,#5E5E6A);}
.fb select,.fb textarea{font:inherit;font-weight:700;border:3px solid var(--ink,#1F1F24);border-radius:12px;padding:8px 10px;background:#fff;min-height:44px;}
.fb select{min-width:170px;}
.fb textarea{resize:vertical;font-weight:600;}
.fb .err{color:#C2341B;font-weight:700;min-height:1.4em;margin:6px 0;}
.fb button{margin-top:4px;}
@media (max-width:420px){.fb-row{flex-direction:column;align-items:stretch;gap:6px;}.fb select{min-width:0;}}
/* 课程卡：点一下原卡在原来的格子里一分为二（负责人 2026-09-28，方案图 v2 ⑬）。
   动画：两半从中缝裂开、各往外歪一点、弹一下站稳 → 字淡入；合上反过来，原卡弹回 */
.lc[data-open]{cursor:pointer;}
.lc.placeholder{border-style:dashed!important;box-shadow:none!important;background:transparent!important;}
.lc.placeholder .lc-date{background:#F3F3F6;border-bottom-style:dashed;}
.lc.placeholder .lc-title,.lc.placeholder .lc-zh{color:var(--mute,#5E5E6A);}
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:190px;}
.split .half{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;min-width:0;}
.split .l{transform-origin:0% 100%;animation:crackL .6s cubic-bezier(.3,1.35,.5,1) both;}
.split .r{transform-origin:100% 100%;animation:crackR .6s cubic-bezier(.3,1.35,.5,1) both;}
/* 按下「课堂 / 练习」这两半（负责人 2026-09-29 苹果手机反馈：按了没感觉）：裂开动画放完还占着 transform（fill both），
   压下去用的 transform 被它盖住 → 改用单独的 translate 属性（动画盖不到）+ 阴影收掉 + 暗一点；旧 iPhone 不认 translate 时至少还有后两样 */
.split a.half.press,.split a.half:active{translate:5px 5px;box-shadow:1px 1px 0 var(--ink,#1F1F24);filter:brightness(.93);}
.split a.half{transition:translate .06s ease-out,box-shadow .06s ease-out,filter .06s ease-out;}
@keyframes crackL{0%{transform:translateX(5px);border-top-right-radius:0;border-bottom-right-radius:0;}
  18%{transform:translateX(5px) translateY(2px) scale(.985);border-top-right-radius:0;border-bottom-right-radius:0;}
  55%{transform:translateX(-5px) rotate(-3.5deg);} 100%{transform:none;}}
@keyframes crackR{0%{transform:translateX(-5px);border-top-left-radius:0;border-bottom-left-radius:0;}
  18%{transform:translateX(-5px) translateY(2px) scale(.985);border-top-left-radius:0;border-bottom-left-radius:0;}
  55%{transform:translateX(5px) rotate(3.5deg);} 100%{transform:none;}}
.split .bd,.split .go{animation:lcFadeUp .3s .28s ease-out both;}
@keyframes lcFadeUp{from{opacity:0;transform:translateY(6px);}}
/* 合上的叉：用 margin 居中，不用 transform——按下效果会换掉 transform，叉会往右跳半个、点不中（负责人 2026-09-29 电脑版） */
.split .x{position:absolute;top:-12px;left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;border:3px solid var(--ink,#1F1F24);
  background:#fff;display:grid;place-items:center;padding:0;z-index:3;box-shadow:2px 2px 0 var(--ink,#1F1F24);cursor:pointer;animation:lcPopX .25s .4s cubic-bezier(.3,1.6,.5,1) both;}
.split .x .ico{width:14px;height:14px;}
@keyframes lcPopX{from{opacity:0;transform:scale(.3);}}
.split .x::after{content:"";position:absolute;inset:-8px;border-radius:50%;}   /* 点击范围放大到 48px，看起来还是 32px */
.split .ghost{position:absolute;inset:0;margin:0;z-index:4;pointer-events:none;animation:lcGhostOut .22s .08s ease-in forwards;}
@keyframes lcGhostOut{to{opacity:0;transform:scale(1.02);}}
.split.closing .l{animation:lcShutL .2s ease-in forwards;} .split.closing .r{animation:lcShutR .2s ease-in forwards;}
.split.closing .bd,.split.closing .go,.split.closing .x{animation:none;opacity:0;transition:opacity .1s;}
@keyframes lcShutL{to{transform:translateX(5px);}} @keyframes lcShutR{to{transform:translateX(-5px);}}
.lc.pop{animation:lcPopBack .3s cubic-bezier(.3,1.5,.5,1);}
@keyframes lcPopBack{from{transform:scale(.97);}}
.split .hd{font:700 15px "Fredoka","Nunito",sans-serif;background:var(--sun,#FFD15C);border-bottom:3px solid var(--ink,#1F1F24);padding:5px 10px;}
.split .hd.cls{background:var(--k,#56B6E8);}
.split .bd{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;padding:8px 6px;}
.split .bd b{font:700 17px "Fredoka","Nunito",sans-serif;} .split .bd span:not(.badge){font-size:13px;font-weight:700;color:var(--mute,#5E5E6A);}
.split .bd .badge{margin-bottom:4px;}
.split .go{font-weight:800;text-align:center;padding:0 6px 12px;}
.split .wait{opacity:.75;} .split .wait .hd{background:#F3F3F6;}
.split .prep{position:relative;} .split .prep>*:not(.water){position:relative;z-index:1;}
.split .prep .water{position:absolute;inset:0;z-index:0;pointer-events:none;}
.split .prep .water i{position:absolute;left:-50%;width:200%;aspect-ratio:1;top:100%;border-radius:42%;background:rgba(74,158,255,.32);
  animation:prep-spin 6s linear infinite,prep-rise 9s ease-in-out infinite;}
@media (max-width:700px){.split .bd b{font-size:15px;} .split .bd span:not(.badge){font-size:12px;} .split .hd{font-size:13px;padding:4px 7px;}
  .split .bd .badge.sm{width:38px;height:38px;} .split .bd .badge.sm .ico{width:20px;height:20px;} .split .go{font-size:14px;}}
@media (prefers-reduced-motion:reduce){.split .half,.split .bd,.split .go,.split .x,.lc.pop{animation:none!important;} .split .ghost{display:none;} .split .prep .water i{animation:none;top:45%;}}
/* 我的陪伴老师 + 负责老师（负责人 2026-09-28，方案图 v2 ⑱） */
.myt{display:flex;gap:16px;align-items:center;padding:14px 16px;margin:0 0 16px;flex-wrap:wrap;}
.myt .t{flex:1;min-width:180px;} .myt .lbl{font-weight:800;color:var(--mute,#5E5E6A);font-size:14px;}
.myt h2{margin:0;font-size:24px;} .myt p{margin:2px 0 0;font-weight:700;color:var(--mute,#5E5E6A);}
.myt .r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.myt .real{font-size:13px;text-align:right;border-top:2px dashed #d7d7de;padding-top:6px;} .myt .real span{color:var(--mute,#5E5E6A);font-weight:700;}
.tpic{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:3px solid var(--ink,#1F1F24);background:#F3F3F6;flex:none;}
.tpic .ico{width:40px;height:40px;}
@media (max-width:520px){.myt .r{align-items:flex-start;width:100%;} .myt .real{text-align:left;} .tpic{width:64px;height:64px;}}
.cl-ico .ico{width:22px;height:22px;vertical-align:-4px;}
@media (max-width:420px){.split .bd b{font-size:14px;} .split .half .hd{font-size:12px;}}
/* 设置：右下角圆按钮 + 右边抽屉（负责人 2026-09-28：比右上角更顺手，iPad、手机拇指够得到） */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:55;width:64px;height:64px;border-radius:50%;
  border:3px solid var(--ink,#1F1F24);background:var(--sun,#FFD15C);box-shadow:3px 3px 0 var(--ink,#1F1F24);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;cursor:pointer;color:var(--ink,#1F1F24);padding:0;}
.fab .ico{width:26px;height:26px;} .fab small{font-size:11px;font-weight:800;line-height:1;}
.fab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink,#1F1F24);}
body.set-open .fab{display:none;}
.setshade{position:fixed;inset:0;background:rgba(31,31,36,.35);z-index:60;}
.setdrawer{position:fixed!important;z-index:61;top:0;right:0;bottom:0;width:min(400px,100vw);margin:0!important;overflow:auto;
  border-radius:18px 0 0 18px!important;padding:16px 16px calc(24px + env(safe-area-inset-bottom));background:#fff;animation:setSlideIn .3s ease-out;}
@keyframes setSlideIn{from{transform:translateX(100%);}}
@media (max-width:560px){.setdrawer{width:100vw;border-radius:0!important;}}
@media (prefers-reduced-motion:reduce){.setdrawer{animation:none;}}
.setdrawer .setx{position:absolute;top:10px;right:10px;padding:6px 9px;min-height:0;} .setdrawer .setx .ico{width:16px;height:16px;}
.settabs{display:flex;gap:6px;border-bottom:3px solid var(--ink,#1F1F24);margin:0 0 12px;padding:0 48px 10px 0;}
.settabs button{font:700 15px "Fredoka","Nunito",sans-serif;border:2px solid var(--ink,#1F1F24);border-radius:12px;padding:5px 14px;cursor:pointer;background:#fff;color:inherit;}
.settabs button.on{background:var(--sun,#FFD15C);}
.setdrawer .sg{margin:0 0 14px;} .setdrawer h4{margin:0 0 6px;font:700 16px "Fredoka","Nunito",sans-serif;} .setdrawer h4 small{font-weight:600;opacity:.6;}
.setdrawer .skinswitch{padding:0;margin:0;justify-content:flex-start;text-align:left;}
.mefields{display:grid;grid-template-columns:1fr;gap:10px;}
.mf{border:2px solid #d7d7de;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.mf h4{margin:0;font-size:14px!important;color:var(--mute,#5E5E6A);} .mf div{font-weight:800;word-break:break-all;}
.mf .mute{color:var(--mute,#5E5E6A);font-weight:700;} .mf-no{font-size:12px;font-weight:800;color:var(--mute,#5E5E6A);}
.lv-btn.sm{font-size:14px;padding:4px 12px;min-height:0;}
.lv-modal .lv-card.me-edit{text-align:left;max-width:460px;}
.me-edit h2{margin:0 0 10px;} .me-edit .field{margin:10px 0;} .me-edit .field label{display:block;font-weight:800;margin-bottom:4px;}
.me-edit input{font:inherit;font-weight:700;border:3px solid var(--ink,#1F1F24);border-radius:12px;padding:8px 10px;width:100%;box-sizing:border-box;}
.me-edit input.pin{width:9em;letter-spacing:.3em;}
.me-edit small{display:block;color:var(--mute,#5E5E6A);font-weight:600;margin-top:4px;}
.me-edit .err{color:#C2341B;font-weight:700;min-height:1.4em;}
/* 信箱卡片（负责人 2026-09-28，方案图 v2 ⑯）：点过按钮 → 「已读」 */
.mb-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink,#1F1F24);background:#fff;}
.mb-ic .ico{width:22px;height:22px;}
.mb-item.new .mb-ic{background:var(--sun,#FFD15C);}
.mb-body{flex:1;min-width:0;}
.mb-act{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.mb-read{font-size:13px;font-weight:800;border:2px solid #b9b9c3;color:var(--mute,#5E5E6A);border-radius:12px;padding:3px 12px;background:#F3F3F6;}
/* 陪伴老师（负责人 2026-09-28，方案图 v2 ㉑ D 摆法；暂时不开放）：老师挂在对话框左上角后面 + 口头禅气泡 */
.tpic img{width:100%;height:100%;object-fit:contain;border-radius:50%;background:#fff;}
.cp-col{position:relative;padding-top:128px;min-width:0;}
.cp-col .cl-main{position:relative;z-index:2;}
.cp-fig{position:absolute;left:14px;top:0;width:150px;z-index:1;transform-origin:50% 100%;animation:cpBreathe 3.2s ease-in-out infinite;}
.cp-fig img{display:block;width:100%;height:150px;object-fit:contain;object-position:50% 0;}
@keyframes cpBreathe{50%{transform:translateY(-3px) scale(1.012);}}
.cp-fig.thinking{animation:cpThink 1.2s ease-in-out infinite;}
@keyframes cpThink{0%,100%{transform:rotate(-2.5deg);} 50%{transform:rotate(-4deg) translateY(-2px);}}
.cp-fig.talking{animation:cpHop .45s ease-out 3;}
.cp-fig.happy{animation:cpHop .5s ease-out 2,cpBreathe 3.2s 1s ease-in-out infinite;}
@keyframes cpHop{40%{transform:translateY(-10px);} 70%{transform:translateY(0) scaleY(.98);}}
.cp-fx{position:absolute;inset:0;pointer-events:none;z-index:2;}
.cp-fig.thinking .cp-fx::after{content:"…";position:absolute;top:-10px;right:-6px;font:700 28px/1 "Fredoka",sans-serif;background:#fff;border:3px solid var(--ink,#1F1F24);border-radius:20px;padding:0 12px 10px;}
.cp-fig.happy .cp-fx::before,.cp-fig.happy .cp-fx::after{content:"✦";position:absolute;font-size:30px;color:#FFB800;-webkit-text-stroke:1.5px var(--ink,#1F1F24);animation:cpSpark .8s ease-out infinite;}
.cp-fig.happy .cp-fx::before{top:8%;left:-14px;} .cp-fig.happy .cp-fx::after{top:30%;right:-14px;animation-delay:.3s;}
@keyframes cpSpark{0%{transform:scale(.4);opacity:0;} 50%{transform:scale(1.2);opacity:1;} 100%{transform:scale(.9);opacity:0;}}
.cp-catch{position:absolute;left:178px;top:30px;z-index:3;max-width:calc(100% - 200px);background:#fff;border:3px solid var(--ink,#1F1F24);border-radius:20px;
  padding:8px 14px;font-weight:800;font-size:16px;box-shadow:3px 3px 0 var(--ink,#1F1F24);}
.cp-catch:empty{display:none;}
.cp-catch::before{content:"";position:absolute;left:-15px;top:14px;border:7px solid transparent;border-right:12px solid var(--ink,#1F1F24);}
.cp-catch.pop{animation:cpCatchIn .4s ease-out;}
@keyframes cpCatchIn{from{transform:scale(.6);opacity:0;}}
.cp-paws{position:absolute;left:14px;width:150px;top:106px;height:34px;z-index:3;pointer-events:none;}
.cp-paw{position:absolute;top:0;width:46px;} .cp-paw svg{display:block;width:100%;} .cp-paw.l{left:10px;} .cp-paw.r{right:10px;}
@media (max-width:760px){.cp-col{padding-top:92px;} .cp-fig{width:104px;left:8px;} .cp-fig img{height:104px;} .cp-catch{left:122px;top:14px;font-size:14px;max-width:calc(100% - 132px);}
  .cp-paws{left:8px;width:104px;top:74px;} .cp-paw{width:34px;}}
/* 课堂表情帧在播（负责人 2026-09-29 接进来）：整张图的跳动 / 摇晃关掉，动作交给帧；「…」和星星照旧 */
.cp-fig.anim,.cp-fig.anim.thinking,.cp-fig.anim.talking,.cp-fig.anim.happy{animation:none;}
.cp-fig.anim img{max-width:none;}
@media (prefers-reduced-motion:reduce){.cp-fig,.cp-fig *,.cp-catch{animation:none!important;}}
/* 选老师出圈（负责人 2026-09-29 接进来）：圆框里 back → 圆框边 → 圆框外 front；图宽 121px 时圆直径约 96px（形象组 manifest） */
.cp-lay{position:absolute;inset:0;display:none;pointer-events:none;}
.cp-lay img{position:absolute;left:-12.5px;top:-49.5px;width:121px;max-width:none;height:auto;opacity:0;}
.cp-lay img.on{opacity:1;}                  /* 每层两张图轮流：新的一帧淡入盖在旧的上面，不是硬换（负责人 2026-09-29「像一张图换成另一张图」） */
/* 圆里那层用圆角 + 裁掉溢出，半径 46px，图往回挪 2px 对齐。类名别用 back / front：base.css 的返回按钮 .back 有 margin-block:-10px，
   会把这层图整体往上顶 10px，下半身露出一截空白、前后两层错位（负责人 2026-09-29 手机 / 电脑截图「角色有一部分被裁掉了」） */
.cp-lay.lay-back{inset:2px;border-radius:50%;overflow:hidden;z-index:1;}
.cp-lay.lay-back img{left:-14.5px;top:-51.5px;}
.cp-lay.lay-ring{border-radius:50%;border:3px solid var(--ink,#1F1F24);z-index:2;}
.cp-lay.lay-front{z-index:3;}
.cp-card.layered .cp-lay{display:block;}
/* 连环图动画：一格 = 一帧（121×151，和单帧图的位置一样）；图是整张连环图，按格子挪 */
.cp-lay.sheet .cp-cell{position:absolute;left:-12.5px;top:-49.5px;width:121px;height:151px;overflow:hidden;}
.cp-lay.lay-back.sheet .cp-cell{left:-14.5px;top:-51.5px;}
.cp-lay.sheet .cp-cell img{position:absolute;left:0;top:0;max-width:none;height:auto;opacity:1;will-change:transform;}
/* 探出来 / 缩回去：同一张图连续放大、缩小（以脚底为中心），由 companion.js 用 Web Animations 直接放在那一张图上，不走 CSS 动画
   （2026-09-30 之前是 .rise / .sink 类 + cpRise 关键帧：动画挂在这一层的两张图上、起点 0.8 倍不对、还带回弹，负责人真机看是「拉一下缩一下」） */
.cp-lay img{transform-origin:50% 95%;}
.cp-lay img.cur{will-change:transform;}
.cp-card.layered .cp-clip,.cp-card.layered .cp-ring-front{visibility:hidden;}
.cp-card.graying .cp-lay img.on,.cp-card.banned .cp-lay img.on{filter:grayscale(1);opacity:.45;transition:filter .3s,opacity .3s;}
.cp-card.banning.layered{animation:none;}
.cp-q{position:absolute;left:4px;top:-44px;z-index:4;font:700 30px "Fredoka",sans-serif;color:var(--ink,#1F1F24);opacity:0;transform:scale(.4) rotate(-12deg);pointer-events:none;}
.cp-card.q .cp-q{animation:cpQ .35s ease-out forwards;}
@keyframes cpQ{to{opacity:1;transform:scale(1) rotate(-12deg);}}
@media (prefers-reduced-motion:reduce){.cp-q{animation:none!important;}}
/* 选老师卡片 */
.lv-modal.cp-modal{align-items:start;overflow:auto;}
.lv-modal .lv-card.cp-pick{max-width:900px;text-align:left;margin:24px auto;}
.cp-pick h2{margin:0 0 4px;}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0;}
.cp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;cursor:pointer;text-align:center;color:inherit;font:inherit;background:#fff;overflow:visible;}
.cp-card.on{outline:4px solid var(--k,#56B6E8);outline-offset:2px;z-index:2;}
.cp-card b{font-size:16px;}
.cp-card .cp-line{font-size:13px;font-weight:700;color:var(--mute,#5E5E6A);line-height:1.3;}
.cp-card em{font-style:normal;font-size:12px;font-weight:800;color:#C2341B;}
/* 圆形头像框：框的上半圈在老师后面、下半圈在老师前面，老师探出来时头冲出上沿（负责人 2026-09-28） */
.cp-pic{position:relative;display:block;flex:none;width:96px;height:96px;margin-top:18px;}
.cp-ring{position:absolute;inset:0;border-radius:50%;background:#FFF3D6;border:3px solid var(--ink,#1F1F24);}
.cp-ring-front{position:absolute;inset:0;border-radius:50%;border:3px solid var(--ink,#1F1F24);clip-path:inset(50% 0 0 0);z-index:2;pointer-events:none;}
.cp-clip{position:absolute;left:-60px;right:-60px;bottom:0;height:156px;clip-path:circle(46px at 50% 108px);z-index:1;}
.cp-clip img{position:absolute;left:50%;top:64px;width:112px;height:auto;transform:translateX(-50%);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),filter .3s,opacity .3s;}
.cp-pic.flat .cp-clip img{width:84px;top:68px;}
.cp-card.framed.out .cp-clip img{animation:none;}
/* 探出来时：不裁两侧。老师整个人站到圆框前面（圆框下半圈仍画在身上，像从框里穿出来），
   只在圆框最底下那条线上把身体淡掉——原来按圆形 / 按框宽裁，肩膀、手臂两侧会留下切口（负责人 2026-09-28 三次反馈）。-webkit- 给 iPad Safari */
.cp-card.out .cp-clip{clip-path:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 134px,transparent 156px);mask-image:linear-gradient(to bottom,#000 0,#000 134px,transparent 156px);}
.cp-card.out .cp-clip img{transform:translateX(-50%) translateY(-34px) scale(1.06);animation:cpAct .9s .45s ease-in-out;}
.cp-card.out .cp-pic.flat .cp-clip img{transform:translateX(-50%) translateY(-22px) scale(1.06);}
/* 每位老师探出来后的小动作（以后换成表情帧） */
@keyframes cpAct{0%,100%{rotate:0deg;} 30%{rotate:-6deg;} 60%{rotate:4deg;}}
@keyframes cpHopAct{0%,100%{translate:0 0;} 35%{translate:0 -8px;} 60%{translate:0 0;} 80%{translate:0 -3px;}}
@keyframes cpNodAct{0%,100%{rotate:0deg;} 40%{rotate:3deg;} 70%{rotate:-1deg;}}
@keyframes cpDazeAct{0%,100%{rotate:0deg;translate:0 0;} 25%{rotate:-8deg;} 55%{rotate:-8deg;translate:0 2px;} 80%{rotate:2deg;}}
.cp-card[data-t="mihu"].out .cp-clip img{animation-name:cpDazeAct;animation-duration:1.4s;}
.cp-card[data-t="yuanqi"].out .cp-clip img,.cp-card[data-t="doge"].out .cp-clip img{animation-name:cpHopAct;}
.cp-card[data-t="jiaoshou"].out .cp-clip img,.cp-card[data-t="ganlian"].out .cp-clip img,.cp-card[data-t="shudaizi"].out .cp-clip img{animation-name:cpNodAct;}
/* 口头禅气泡：右上角 */
.cp-say{position:absolute;top:-12px;left:calc(50% + 26px);z-index:4;width:max-content;max-width:124px;background:#fff;border:3px solid var(--ink,#1F1F24);border-radius:14px;
  padding:4px 9px;font-size:12.5px;font-weight:800;line-height:1.3;text-align:left;opacity:0;transform:scale(.6);transform-origin:0 100%;pointer-events:none;}
.cp-say::after{content:"";position:absolute;left:-2px;bottom:-12px;border:6px solid transparent;border-top:9px solid var(--ink,#1F1F24);border-left-width:0;}
.cp-say:empty{display:none;}
.cp-card.sheetcard .cp-say{top:-28px;left:calc(50% + 40px);}          /* 连环图的老师探出来更高、头更靠右：气泡挪开，不压脸（负责人 2026-09-29） */
.cp-card.sheetcard .cp-say.flip{left:auto;right:calc(50% + 40px);}
.cp-say.flip{left:auto;right:calc(50% + 26px);transform-origin:100% 100%;}
.cp-say.flip::after{left:auto;right:-2px;border-left-width:6px;border-right-width:0;}
.lv-modal.cp-modal{overflow-x:hidden;}
.cp-card.out .cp-say{animation:cpSayIn .35s .5s ease-out forwards;}
.cp-card.banning .cp-say{animation:cpSayIn .15s .05s ease-out forwards;}   /* 麻辣老师「等我……」要在被划掉之前冒出来 */
@keyframes cpSayIn{to{opacity:1;transform:scale(1);}}
/* 未成年点麻辣老师：探出半路被红笔一笔划下去，缩回、变灰，之后点不了 */
.cp-pic .cp-slash{position:absolute;left:-6px;top:-6px;width:108px;height:108px;z-index:3;overflow:visible;pointer-events:none;}
.cp-slash path{stroke-dasharray:1;stroke-dashoffset:1;}
.cp-slash{opacity:0;} .cp-card.banning .cp-slash,.cp-card.banned .cp-slash{opacity:1;}   /* 圆头笔还没划时会留一个红点：先藏起来 */
.cp-card.banning .cp-clip img{transform:translateX(-50%) translateY(-18px) scale(1.03);transition-duration:.25s;animation:none;}
.cp-card.banning .cp-slash path{animation:cpSlash .2s .28s ease-in forwards;}
.cp-card.banning .cp-slash path+path{animation-delay:.36s;}
.cp-card.banning{animation:cpJolt .3s .5s ease-out;}
@keyframes cpSlash{to{stroke-dashoffset:0;}}
@keyframes cpJolt{25%{translate:-4px 0;} 60%{translate:3px 0;}}
.cp-card.banned{cursor:not-allowed;}
.cp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
.cp-card.banned .cp-slash path{stroke-dashoffset:0;}
.cp-card.banned .cp-clip img{filter:grayscale(1);opacity:.45;}
.cp-card.banned .cp-ring{background:#EEE;}
.cp-card.banned b,.cp-card.banned em{opacity:.5;}
.cp-card.banned .cp-line{color:#C2341B;}
@media (prefers-reduced-motion:reduce){.cp-clip img,.cp-card,.cp-say,.cp-slash path{animation:none!important;transition:none!important;}
  .cp-card.out .cp-say{opacity:1;transform:none;}}
.cp-row{display:flex;gap:10px;flex-wrap:wrap;}
/* 手机上选老师：一行两位（手机检查 2026-09-28：原来一行只放得下一张，10 位老师要划很久） */
@media (max-width:480px){
  .lv-modal .lv-card.cp-pick{padding:14px 12px;margin:10px auto;}
  .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .cp-card{padding:8px 6px 10px;}
  .cp-card b{font-size:15px;} .cp-card .cp-line{font-size:12px;}
  .cp-say{max-width:110px;font-size:12px;}
}
/* 标明 AI 生成（负责人 2026-09-29 开放注册：隐私政策第五条、AI 生成内容标识） */
.ai-tag{font:800 12px "Nunito",sans-serif;border:2px solid var(--ink,#1F1F24);border-radius:999px;padding:2px 10px;background:#E8F4FF;white-space:nowrap;align-self:center;}
/* 选老师面板：头像到齐前先不显示卡片（负责人 2026-09-29「要等一段时间才能全部显示老师」） */
.cp-grid{position:relative;} .cp-grid.cp-loading{min-height:220px;} .cp-grid.cp-loading>*{visibility:hidden;}
.cp-grid.cp-loading::after{content:"老师们马上就来……";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--mute,#5E5E6A);}
/* 下课卡片（负责人 2026-09-29）：陪伴老师探出来挥手 + 下课那句 */
.lv-card.fin{max-width:420px;text-align:center;padding-top:26px;}
.fin-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px;}
.fin-pic{width:110px;height:110px;border-radius:50%;border:3px solid var(--ink,#1F1F24);background:#FFF3D6;overflow:hidden;display:block;animation:finIn .5s ease-out both;}
.fin-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;max-width:none;}
.fin-say{background:#fff;border:3px solid var(--ink,#1F1F24);border-radius:14px;padding:6px 12px;font-weight:800;animation:finIn .4s .35s ease-out both;}
.fin h2{margin:6px 0 4px;} .fin-sum{font-weight:700;margin:4px 0;} .fin-by{color:var(--mute,#5E5E6A);font-weight:700;font-size:14px;margin:4px 0 14px;}
@keyframes finIn{from{opacity:0;transform:translateY(12px) scale(.9);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.fin-pic,.fin-say{animation:none;}}
.classp .b.s .sent{display:block;text-align:right;font-size:12px;font-weight:800;opacity:.6;margin-top:2px;white-space:normal;}   /* 发送中、老师还没回（回了就换成服务器那份，不再有这行） */
.classp .cl-input textarea:disabled{background:#F4F4F7;color:#8A8A95;}
