:root {
    --brand:#0E9F6E; --brand-strong:#0B8A5F; --brand-soft:#E7F6F0; --brand-ink:#075E42;
    --warm:#F59E0B; --warm-soft:#FEF3C7;
    --bg:#F3F5F8; --card:#FFFFFF; --ink:#1B2230; --sub:#697386; --faint:#98A1B2; --line:#E7EAF0;
    --ok:#16A34A; --off:#A3AAB8; --danger:#E5484D;
    --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
    --paper:#FFFBF2; --paper-ink:#1F2330;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#0E1216; --card:#161B21; --ink:#E9EDF3; --sub:#9AA4B4; --faint:#6F7888; --line:#252C35;
      --brand-soft:#0F2E24; --brand-ink:#7EE2BB; --warm-soft:#3A2A0A; --shadow:0 1px 2px rgba(0,0,0,.4); }
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { margin:0; background:var(--bg); color:var(--ink); }
  body { font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  button, input, textarea, select { font:inherit; color:inherit; }
  button { cursor:pointer; border:0; background:none; padding:0; }
  svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .hide, .talkhide { display:none !important; }

  /* app bar */
  .appbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
    padding:calc(10px + env(safe-area-inset-top)) 18px 10px; background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); }
  .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:.2px; }
  .logo { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg, #16B981, #0B8A5F); box-shadow:0 4px 12px rgba(14,159,110,.35); }
  .logo svg { width:18px; height:18px; stroke-width:2.2; }
  .avatar { width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); font-weight:700; }

  main { max-width:560px; margin:0 auto; padding:4px 16px 24px; }
  .page-title { font-size:24px; font-weight:750; margin:10px 2px 14px; letter-spacing:.3px; }
  .page-title small { font-size:14px; font-weight:500; color:var(--sub); margin-left:8px; }
  .card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:14px; }
  .label { font-size:13px; font-weight:600; color:var(--sub); margin:0 0 8px; display:flex; align-items:center; justify-content:space-between; }
  .muted { color:var(--sub); font-size:13px; }

  /* inputs */
  .field { width:100%; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; }
  .field:focus { border-color:var(--brand); background:var(--card); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
  textarea.field { min-height:96px; resize:none; font-size:17px; line-height:1.5; }
  textarea.field.cap { min-height:64px; font-size:16px; }
  .row.asr-row { padding:12px 2px 0; border-bottom:0; }
  /* 对讲 (09-30): hold to talk, the classroom hears it live */
  .talker .mic { width:96px; height:96px; }
  .talker .mic svg { width:40px; height:40px; }
  .talker.on .mic { background:var(--danger); transform:scale(1.06); animation:ring 1.3s ease-out infinite; }
  .talker.wait .mic { background:var(--warm); }
  .talker:not(.on) .levels { display:none; }
  .talk-list { display:grid; gap:8px; margin-top:12px; }
  .talk-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--bg); font-size:14px; }
  .talk-item b { flex:none; font-weight:650; white-space:nowrap; }
  .talk-item span { flex:1; min-width:0; text-align:right; font-size:13px; font-weight:600; color:var(--sub); }
  .talk-item span.ok { color:var(--ok); } .talk-item span.bad { color:var(--danger); } .talk-item span.warn { color:var(--warm); }
  .asr-row .t small { display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--sub); }
  .cap-hint { display:flex; align-items:center; gap:6px; min-height:18px; margin:6px 4px 0; font-size:13px; color:var(--sub); }
  .cap-hint.busy::before { content:''; width:11px; height:11px; flex:none; border-radius:50%; border:2px solid var(--line); border-top-color:var(--brand); animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .credit { text-align:center; font-size:12px; color:var(--faint); margin:18px 0 4px; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  /* 1.9.19: the 全班名单 under the 学生 box, names to tap (a row that scrolls sideways) */
  .stu-chips { display:flex; gap:8px; overflow-x:auto; padding:10px 2px 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .stu-chips::-webkit-scrollbar { display:none; }
  .stu-chips button { flex:none; height:34px; padding:0 14px; border-radius:999px; background:var(--chip); color:var(--ink); font-size:15px; font-weight:600; }
  .stu-chips button:active { background:color-mix(in srgb, var(--brand) 18%, var(--chip)); }
  .stu-chips button.pron { background:none; color:var(--brand); font-weight:500; }   /* 11-04: 名字读音… after the names */
  .counter { font-size:12px; color:var(--faint); font-weight:500; }

  /* pills & chips */
  .pills { display:flex; flex-wrap:wrap; gap:8px; }
  .pill { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:var(--bg); border:1px solid var(--line);
    font-size:14px; font-weight:600; color:var(--ink); transition:background .15s, border-color .15s, color .15s; }
  /* 10-14: a picked class is light green with a green border, not solid green: on solid green the online dot turned white and
     the offline one sank in (a teacher couldn't tell them apart). The dot now means the same on every pill: green online, grey offline */
  .pill.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
  .dot { width:7px; height:7px; border-radius:50%; background:var(--off); }
  .dot.ok { background:#22C55E; box-shadow:0 0 0 3px color-mix(in srgb, #22C55E 22%, transparent); }
  .chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:10px -2px 0; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; padding:7px 12px; border-radius:10px; background:var(--brand-soft); color:var(--brand-ink); font-size:13.5px; font-weight:600; }
  #templates .chip.act { background:transparent; border:1px dashed color-mix(in srgb, var(--brand) 50%, transparent); }   /* 10-22 ＋ 存为常用, 整理 */
  #templates .chip.del i { font-style:normal; margin-left:6px; opacity:.7; }

  /* text / voice switch and the recorder */
  .seg.mode { margin-top:16px; }
  .seg.mode button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; font-size:14px; }
  .seg.mode svg { width:17px; height:17px; }
  .grid2.one { grid-template-columns:1fr; }
  .recorder { margin-top:14px; border-radius:16px; background:var(--bg); padding:22px 16px 18px; text-align:center;
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  .mic { width:78px; height:78px; border-radius:50%; margin:0 auto; display:grid; place-items:center; color:#fff; touch-action:none;
    background:linear-gradient(135deg, #16B981, #0B8A5F); box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent);
    transition:transform .15s; -webkit-touch-callout:none; }
  .mic svg { width:34px; height:34px; stroke-width:2; }
  .mic:active { transform:scale(.96); }
  .recorder.on .mic { background:var(--danger); transform:scale(1.06); animation:ring 1.3s ease-out infinite; }
  @keyframes ring { 0% { box-shadow:0 0 0 0 rgba(229,72,77,.45); } 100% { box-shadow:0 0 0 22px rgba(229,72,77,0); } }
  .rec-title { margin-top:14px; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; }
  .rec-sub { margin-top:4px; font-size:12.5px; color:var(--faint); }
  .levels { display:flex; justify-content:center; align-items:center; gap:4px; height:28px; margin-top:8px; }
  .levels i { width:4px; height:4px; border-radius:2px; background:var(--danger); }
  .recorder:not(.on) .levels { display:none; }
  .vbubble { display:flex; align-items:center; gap:12px; text-align:left; }
  .vbubble .play { width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none; }
  .vbubble .play svg { width:18px; height:18px; }
  .wave { flex:1; height:34px; display:flex; align-items:center; gap:2px; }
  .wave i { flex:1; border-radius:2px; min-height:3px; background:color-mix(in srgb, var(--brand) 32%, transparent); }
  .wave i.on { background:var(--brand); }
  .vlen { font-size:13px; font-weight:700; color:var(--sub); font-variant-numeric:tabular-nums; }
  .screen-wave { display:flex; align-items:center; justify-content:center; gap:2px; height:16px; margin-top:8px; }
  .screen-wave i { width:3px; border-radius:2px; background:var(--brand); }
  .hist-voice { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); font-weight:700; font-size:13.5px; }
  .hist-voice .ic { width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; }
  .hist-voice svg { width:12px; height:12px; }

  /* settings rows */
  .summary { width:100%; display:flex; align-items:center; gap:10px; margin-top:14px; padding:13px 0 1px; border-top:1px solid var(--line); text-align:left; }
  .summary .t { font-weight:600; font-size:14.5px; flex:1; }
  .summary .chev { width:18px; height:18px; color:var(--faint); transition:transform .2s; }
  .summary.open .chev { transform:rotate(180deg); }
  .rows { margin-top:4px; }
  .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .a2hs-bar { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 8px 12px 14px; margin-bottom:12px; }
  .a2hs-bar .grow { flex:1; min-width:0; }
  .a2hs-bar b { display:block; font-size:14.5px; }
  .a2hs-bar small { font-size:12.5px; color:var(--sub); }
  .a2hs-bar small .ph { display:inline-block; }
  .guide-bar { background:var(--tint); box-shadow:none; }   /* 1.9.19: the 使用教程 card, the brand's tint */
  .guide-bar .mini svg { width:16px; height:16px; }
  .guide-bar .btn { flex:none; width:auto; height:38px; margin:0; padding:0 16px; font-size:15px; box-shadow:none; }   /* 10-13: one phrase each side of the comma: a narrow phone breaks there, not inside a word */
  .a2hs-bar .x { background:none; border:0; color:var(--faint); font-size:22px; line-height:1; padding:4px 6px; }
  .a2hs-bar .mini { width:36px; height:36px; border-radius:10px; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none; }
  .a2hs-bar .mini svg { width:22px; height:22px; }
  .a2hs-bar .mini.warm { background:var(--warm); }
  .a2hs-bar small a, .cls-tip a { color:inherit; font-weight:650; text-decoration:underline; }
  .cls.has-tip { flex-wrap:wrap; }
  .cls > .cls-tip { flex:0 0 calc(100% - 58px); margin:-6px 0 0 58px; }
  /* 10-13 (user): every class action is an icon tile under the class, easier to tap than the old line of small links. Four
     to a row: first the class's settings with their state under the name (green = on, amber = have a look), then the
     班级桌面 sections teachers look for on the card (值日表, 公告喜报, 生日祝福, 倒数日; the owner's classes only) */
  .cls.has-tiles { flex-wrap:wrap; }
  .cls > .tiles { flex:0 0 100%; margin:-2px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); row-gap:14px;
    background:var(--bg); border-radius:14px; padding:13px 4px 12px; }
  .cls > .tiles.five { grid-template-columns:repeat(5, minmax(0, 1fr)); padding-left:2px; padding-right:2px; }   /* 10-26: + 今日考勤, nine tiles */
  .tiles button { display:grid; justify-items:center; align-content:start; gap:4px; min-width:0; padding:0; background:none; color:var(--ink);
    -webkit-tap-highlight-color:transparent; transition:opacity .15s; }
  .tiles button:active { opacity:.55; }
  .tiles svg { width:25px; height:25px; margin-bottom:1px; fill:none; stroke:var(--brand-ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .tiles b { font-size:12.5px; font-weight:600; white-space:nowrap; }
  .tiles i { max-width:100%; font-style:normal; font-size:11px; line-height:1.2; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tiles i.on { color:var(--brand-ink); font-weight:600; }
  .tiles i.warn { color:#B45309; font-weight:600; }
  @media (prefers-color-scheme: dark) { .tiles i.warn { color:#FBBF24; } }
  .tiles.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tiles.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }   /* 10-26: + 今日考勤 */   /* a colleague's class: its two, each over half the row */
  .cls-owner { font-size:12.5px; color:var(--sub); margin-top:2px; }   /* 10-13: 班主任 on its own line (it wrapped under the dot) */
  /* 10-13 (user): the class name opens 改名 / 删除 (a pencil after it says so) instead of a link line of its own */
  .cls-nm { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:0; background:none; color:inherit; font:inherit; text-align:left; }
  .cls-nm span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cls-nm svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--sub); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .cls-tip { margin-top:8px; font-size:12.5px; line-height:1.55; color:#8F5300; background:#FFF4E0; border-radius:10px; padding:8px 10px; }
  @media (prefers-color-scheme: dark) { .cls-tip { color:#FBBF24; background:rgba(251,191,36,.10); } }
  .wx-guide { position:fixed; top:0; right:0; bottom:0; left:0; z-index:60; background:rgba(8,12,18,.88); color:#fff; animation:popFade .18s ease; }
  .wx-guide svg { position:absolute; top:6px; right:14px; width:120px; height:120px; }
  .wx-guide .txt { position:absolute; top:128px; left:24px; right:24px; text-align:right; font-size:19px; line-height:1.9; }
  .wx-guide .txt span { display:block; font-size:14.5px; opacity:.8; margin-top:8px; line-height:1.6; }
  .row:last-child { border-bottom:0; }
  .row .t { font-weight:600; font-size:14.5px; }
  .seg { display:flex; background:var(--bg); border-radius:10px; padding:3px; gap:2px; }
  .seg button { padding:6px 9px; border-radius:8px; font-size:13px; font-weight:600; color:var(--sub); }
  .seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.12); }
  #hwSheet #hwPop button { flex:1; padding:6px 2px; white-space:nowrap; min-width:0; }   /* five choices across a phone (beats #hwSheet .seg button) */
  /* 显示时长 has six choices (10-09, a teacher: 课间要显示 10 分钟): they get a full-width line under the label */
  .dur-row { flex-wrap:wrap; row-gap:10px; } .dur-row .t, .dur-row #durSeg { width:100%; } .dur-row #durSeg button { flex:1; padding:6px 0; }
  .dur-row #barDurSeg { width:100%; } .dur-row #barDurSeg button { flex:1; padding:6px 0; }
  /* 10-22 (the owner: 特大 / 超大 crowded beside the label): 字大小's five a line of their own, equal */
  .dur-row #barSizeSeg { width:100%; } .dur-row #barSizeSeg button { flex:1; padding:6px 0; white-space:nowrap; }
  #optRows .dur-row { margin-top:0; justify-content:space-between; font-size:inherit; }   /* (the 自定义时长 sheet's .dur-row below isn't these) */
  #barSizeRow { border-bottom:0; }   /* (小条: the last row shown; 发送时间's own line follows) */
  /* 1.9.19 小提醒: what it does, and its picture: a 课件 under a slim dark strip at the top (or bottom) */
  .bar-hint { font-size:12.5px; line-height:1.5; color:var(--sub); margin:8px 2px 2px; }   /* (10-22: clear of the line above) */
  .screen-inner.barmode { background:#EEF1F5; padding:0; }
  .screen-inner.barmode .screen-msg { position:absolute; top:0; right:0; bottom:0; left:0; font-weight:inherit; }   /* (not inset: older in-app browsers, 10-18 review) */
  .pv-slide { position:absolute; top:26%; right:12%; bottom:20%; left:12%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
  .pv-slide b { width:46%; height:16%; border-radius:4px; background:#C9D2DD; }
  .pv-slide i { width:100%; height:9%; border-radius:3px; background:#DCE2EA; } .pv-slide i:last-child { width:70%; }
  .pv-bar { position:absolute; left:50%; top:5%; transform:translateX(-50%); max-width:90%; display:flex; align-items:center; gap:.42em; padding:.38em .95em;
    border-radius:999px; background:rgba(22,28,36,.96); color:#F8FAFC; font-weight:800; line-height:1.3; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18); }
  .pv-bar > span:not(.d) { overflow:hidden; text-overflow:ellipsis; }
  .bar-bottom .pv-bar { top:auto; bottom:6%; }
  .pv-bar.s-s { font-size:clamp(9px, 2.7vw, 13px); } .pv-bar.s-m { font-size:clamp(10px, 3.3vw, 16px); } .pv-bar.s-l { font-size:clamp(12px, 4.1vw, 20px); }
  /* 1.9.20 特大 / 超大 (72 / 96 on a 1920 screen): two lines when long, as the classroom strip; the round ends become corners */
  .pv-bar.s-xl { font-size:clamp(16px, 6.2vw, 30px); } .pv-bar.s-xxl { font-size:clamp(20px, 8.2vw, 40px); }
  .pv-bar.s-xl, .pv-bar.s-xxl { white-space:normal; line-height:1.15; }
  /* 10-22 (the owner's phone: 「请 / 带」 one character a line): left:50% left it half the screen to wrap in; now the whole
     width less 5% each side, as wide as its words and centred */
  .pv-bar { border-radius:.55em; left:2%; right:2%; transform:none;   /* (10-22: every size the classroom's rounded corners, ~0.3 of the strip's height) */
    max-width:none; width:-webkit-fit-content; width:fit-content; margin:0 auto; white-space:normal; line-height:1.15; }
  .pv-bar > span:not(.d) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }   /* (every size: two lines at most, as the classroom) */
  .pv-bar.s-xl > span:not(.d), .pv-bar.s-xxl > span:not(.d) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  #barSizeSeg:not(.big) .bar-big { display:none; }
  .pv-bar .d { flex:none; width:.38em; height:.38em; border-radius:50%; background:#34D399; }
  .pv-bar small { flex:none; font-size:.62em; font-weight:500; color:#A0ACBC; }
  .screen-inner.barmode .screen-empty { position:absolute; left:0; right:0; top:44%; color:#8A96A6; }
  .stepper { display:flex; align-items:center; gap:4px; }
  .stepper button { width:30px; height:30px; border-radius:9px; background:var(--bg); display:grid; place-items:center; }
  .stepper b { min-width:44px; text-align:center; font-size:14px; }
  .switch { position:relative; width:46px; height:28px; border-radius:999px; background:var(--line); transition:background .2s; flex:none; padding:0; border:0; }   /* 11-05 (转成文字): beside a long label a row squeezed the track, and the knob (translateX 18px) stood out of it: never shrinks now, anywhere */
  .switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
  .switch.on { background:var(--brand); } .switch.on::after { transform:translateX(18px); }

  /* 定时通知 (09-30): 发送时间 现在 / 定时, and the list of the ones waiting under the composer */
  .when-row { border-top:1px solid var(--line); border-bottom:0; margin-top:12px; padding-bottom:4px; }
  .when-row .seg button { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; }
  .when-row .seg svg { width:14px; height:14px; }
  .later { padding:4px 0 2px; }
  .later .rep button { flex:1; padding:8px 2px; }
  .wdays, .dates { display:flex; gap:6px; margin-top:10px; }
  .wdays button, .dates button, .pickdate { flex:1; height:38px; border-radius:10px; background:var(--bg); border:1px solid var(--line);
    font-weight:650; font-size:14px; color:var(--sub); display:grid; place-items:center; position:relative; white-space:nowrap; }
  .wdays button.on { background:var(--brand); border-color:var(--brand); color:#fff; }
  .dates .on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
  /* 单双周 (10-06): which weeks a repeating one goes out on, and which week this is */
  .wkseg { display:flex; gap:6px; margin-top:10px; }
  .wkseg button { flex:1; height:34px; border-radius:10px; background:var(--bg); border:1px solid var(--line); color:var(--sub); font-weight:650; font-size:14px; }
  .wkseg button.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
  .week-now { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:13.5px; color:var(--sub); }
  /* 10-22 法定工作日: under 周一至五 */
  .legal-row { display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:14px; line-height:1.45; color:var(--sub); }
  .legal-row input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--brand); }
  .week-now span { flex:none; }
  .week-now button { flex:1; height:32px; border-radius:9px; background:var(--bg); border:1px solid var(--line); color:var(--sub); font-weight:650; font-size:13.5px; }
  .week-now button.on { background:var(--brand); border-color:var(--brand); color:#fff; }
  .pickdate { flex:1.6; overflow:hidden; }
  .pickdate input { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; border:0; padding:0; }
  .when-time { display:flex; align-items:center; gap:10px; margin-top:12px; }
  .when-time .t { font-weight:600; font-size:14.5px; }
  .when-time .muted { flex:1; font-size:12.5px; }
  .when-time input { width:92px; font-size:18px; font-weight:750; text-align:center; padding:6px 8px; font-variant-numeric:tabular-nums; }
  /* the time wheels (09-30, the user: like the iPhone alarm, an hour wheel and a minute wheel, every minute) */
  .wheels { position:relative; display:flex; justify-content:center; gap:4px; height:170px; margin-top:10px; border-radius:14px; background:var(--bg);
    overflow:hidden; user-select:none; -webkit-user-select:none; }
  .wheels::before, .wheels::after { content:''; position:absolute; left:0; right:0; height:56px; z-index:2; pointer-events:none; }
  .wheels::before { top:0; background:linear-gradient(var(--bg), transparent); }
  .wheels::after { bottom:0; background:linear-gradient(transparent, var(--bg)); }
  .wheel { position:relative; z-index:1; width:88px; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-y; }
  .wheel::-webkit-scrollbar { display:none; }
  .wheel .it { height:34px; line-height:34px; text-align:center; font-size:21px; font-weight:600; color:var(--faint); scroll-snap-align:center;
    font-variant-numeric:tabular-nums; cursor:pointer; transition:color .12s, font-size .12s; }
  .wheel .it.on { color:var(--ink); font-size:25px; font-weight:800; }
  .wheel .pad { height:68px; }
  .wheel-band { position:absolute; left:14px; right:14px; top:50%; height:36px; margin-top:-18px; border-radius:10px; background:color-mix(in srgb, var(--brand) 12%, transparent); pointer-events:none; }
  .wheel-colon { position:relative; z-index:1; align-self:center; padding-bottom:3px; font-size:24px; font-weight:800; color:var(--ink); }
  @media (prefers-color-scheme: dark) { .when-time input, .pickdate input { color-scheme:dark; } }   /* the picker's own icon */
  .when-hint { margin:8px 2px 0; font-size:13px; color:var(--sub); line-height:1.5; }
  .when-hint.warn { color:var(--warm); font-weight:600; }
  .sched { padding:12px 0; border-bottom:1px solid var(--line); }
  .sched:last-child { border-bottom:0; padding-bottom:2px; }
  .sched-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .sched-when { display:inline-flex; align-items:center; gap:6px; font-weight:750; font-size:15px; }
  .sched-when svg { width:16px; height:16px; color:var(--brand); }
  .sched-text { margin-top:6px; font-size:14.5px; font-weight:600; word-break:break-word; }
  .sched-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:6px; font-size:12.5px; color:var(--faint); }
  .sched-meta .why { color:var(--danger); }
  .sched-acts { margin-left:auto; display:flex; gap:16px; }
  .sched-acts button { color:var(--brand); font-weight:650; font-size:13px; padding:2px 0; }
  .sched-acts button.del { color:var(--sub); }
  .sched.paused .sched-when, .sched.paused .sched-text { color:var(--faint); }
  .sched.paused .sched-when svg { color:var(--faint); }
  .tag.bad { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
  .editbar { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 12px; border-radius:12px; background:var(--brand-soft); color:var(--brand-ink); font-weight:650; font-size:14px; }
  .editbar svg { width:16px; height:16px; }
  .editbar span { flex:1; min-width:0; }
  .editbar button { color:var(--brand-ink); font-weight:650; font-size:13.5px; padding:2px 0; text-decoration:underline; text-underline-offset:3px; }

  /* live preview of the classroom screen */
  .preview { margin-top:16px; }
  .screen { aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#10151C; padding:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
  .screen-inner { height:100%; border-radius:9px; background:var(--paper); color:var(--paper-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6% 7%; position:relative; }
  .screen-tag { position:absolute; top:8%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--brand); letter-spacing:1px; }
  .screen-tag svg { width:12px; height:12px; }
  .screen-msg { font-weight:800; line-height:1.3; font-size:clamp(15px, 5.2vw, 24px); word-break:break-word; text-wrap:balance; }
  .screen-msg .w { display:inline-block; } .screen-msg .who { color:var(--brand); }
  /* 10-17 (喝鹅禾: 「这个通知的排版怎么乱的」, the words over the tag): a typed notice's words between the tag and the footer,
     the teacher's own lines kept (three or more left-aligned, as the classroom PC lays them out from 1.9.18), as large as
     fits (fitPv); still too long: from the top, clipped, the footer saying how many pages the classroom turns through */
  .screen-inner.txt .screen-msg { position:absolute; top:19%; bottom:17%; left:7%; right:7%; display:flex; flex-direction:column; justify-content:center; overflow:hidden; text-wrap:initial; }
  .screen-inner.txt .screen-msg.over { justify-content:flex-start; }
  .pv-t { width:100%; } .pv-t .ln { text-wrap:balance; }
  .pv-t.left { text-align:left; } .pv-t.left .ln { text-wrap:pretty; }
  .pv-t .gap { height:.45em; }
  /* 图片 (10-11): a photo with the notice; the classroom PC shows it as large as it fits, the words beside it */
  .img-add { display:flex; align-items:center; gap:12px; margin-top:12px; }
  .img-pick { position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1.5px dashed var(--line); color:var(--brand-ink); font-weight:700; font-size:14.5px; cursor:pointer; }
  .img-pick svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .img-pick input { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
  .img-thumb { position:relative; display:flex; align-items:center; gap:10px; }
  .img-thumb img { width:64px; height:64px; object-fit:cover; border-radius:10px; box-shadow:0 0 0 1px var(--line); }
  .img-thumb .img-del { width:30px; height:30px; border-radius:50%; background:var(--bg); color:var(--sub); font-size:15px; line-height:1; display:grid; place-items:center; }
  .img-state { font-size:13px; color:var(--sub); }
  .img-state.bad { color:var(--danger); }
  /* 1.9.26 班级音频: the one going with this notice, and 我的音频 */
  .aud-chip { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
  .aud-play { flex:none; width:40px; height:40px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; }
  .aud-play svg { width:16px; height:16px; }
  .aud-t { display:flex; flex-direction:column; min-width:0; flex:1; text-align:left; }
  .aud-t b { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .aud-t small { font-size:12.5px; color:var(--sub); margin-top:1px; }
  .aud-list { margin-top:14px; max-height:52vh; overflow-y:auto; }
  .aud-it { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .aud-use { flex:none; padding:8px 14px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; font-size:14px; }
  .aud-use.on { background:var(--brand-soft); color:var(--brand-ink); }
  .aud-more { flex:none; width:32px; height:36px; color:var(--sub); font-size:20px; line-height:1; letter-spacing:1px; }
  .aud-ed { display:flex; gap:8px; width:100%; align-items:center; }
  .aud-ed .field { flex:1; min-width:0; font-size:16px; padding:9px 12px; }
  .aud-ed button { flex:none; padding:9px 12px; border-radius:10px; font-weight:700; font-size:14px; background:var(--bg); color:var(--brand-ink); }
  .aud-ed button.danger { color:var(--danger); }
  .aud-up { position:relative; display:block; width:100%; margin-top:14px; text-align:center; box-sizing:border-box; }
  .aud-up input { position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; width:100%; height:100%; cursor:pointer; }
  .aud-up.busy { pointer-events:none; opacity:.75; }
  .aud-note { text-align:center; font-size:12.5px; margin-top:8px; }
  .aud-empty { text-align:center; color:var(--sub); padding:16px 4px 4px; font-size:14px; line-height:1.6; }
  /* 10-14 旋转: a round button on the photo's corner (a 44 px target), a quarter turn clockwise a tap */
  .img-pic { position:relative; flex:none; display:block; width:64px; height:64px; margin:0 4px 4px 0; }
  .img-pic img { display:block; }
  /* 10-27 剪裁 (Gail.W: 「拍摄图片可以设置一下剪裁」): its own round button on the other corner; the photo full screen, a frame to drag */
  .img-thumb .img-crop { position:absolute; left:-8px; bottom:-8px; width:32px; height:32px; border-radius:50%; background:var(--card); color:var(--brand-ink);
    display:grid; place-items:center; box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(16,24,40,.16); }
  .img-thumb .img-crop svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .crop { position:fixed; inset:0; z-index:2000; background:#0b0d10; display:flex; flex-direction:column; touch-action:none; -webkit-user-select:none; user-select:none; }
  .crop.hide { display:none; }
  .crop .cst { flex:1; position:relative; margin:16px; overflow:hidden; }   /* (the frame's shade stays on the photo, not over the buttons) */
  .crop .cst img { position:absolute; display:block; pointer-events:none; }
  .crop .cbox { position:absolute; box-shadow:0 0 0 9999px rgba(0,0,0,.55); outline:2px solid #fff; }
  .crop .cbox i { position:absolute; width:28px; height:28px; border:4px solid #fff; }
  .crop .cbox i.tl { left:-4px; top:-4px; border-right:0; border-bottom:0; } .crop .cbox i.tr { right:-4px; top:-4px; border-left:0; border-bottom:0; }
  .crop .cbox i.bl { left:-4px; bottom:-4px; border-right:0; border-top:0; } .crop .cbox i.br { right:-4px; bottom:-4px; border-left:0; border-top:0; }
  .crop .cft { display:flex; gap:10px; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .crop .cft .btn { flex:1; margin:0; } .crop .cft .btn-soft { background:rgba(255,255,255,.12); color:#fff; }
  .crop .ctip { color:#aab3bf; font-size:13.5px; text-align:center; padding:12px 16px 0; }
  .img-thumb .img-rot { position:absolute; right:-8px; bottom:-8px; width:32px; height:32px; border-radius:50%; background:var(--card); color:var(--brand-ink);
    display:grid; place-items:center; box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(16,24,40,.16); transition:transform .1s; }
  .img-rot::after { content:''; position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px; border-radius:50%; }
  .img-rot:active { transform:scale(.92); }
  .img-rot svg { width:18px; height:18px; stroke-width:2.1; }
  /* its preview is laid out like the classroom screen: the photo beside the words, above them for a very wide photo */
  .screen-inner.has-img .screen-msg { position:absolute; top:21%; bottom:17%; left:6%; right:6%; display:flex; align-items:center; justify-content:center; gap:3.5%; }
  .screen-inner.has-img.under .screen-msg { flex-direction:column; gap:4%; }
  .screen-img { display:block; flex:none; min-width:0; min-height:0; max-width:68%; max-height:100%; border-radius:3px; }   /* 10-14: was 62% (1.9.7) */
  .screen-inner.has-img.under .screen-img { max-width:100%; max-height:64%; }
  .screen-inner.has-img.alone .screen-img { max-width:100%; }
  .screen-cap { flex:0 1 42%; min-width:0; font-weight:800; line-height:1.25; font-size:clamp(10px, 3vw, 14px); word-break:break-word; text-wrap:balance;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }
  .screen-inner.has-img.under .screen-cap { flex:none; -webkit-line-clamp:2; }
  .hist-img { display:block; max-width:160px; max-height:120px; border-radius:8px; margin-top:6px; box-shadow:0 0 0 1px var(--line); background:var(--bg); }
  .screen-meta { position:absolute; bottom:8%; font-size:10.5px; color:#8A8F99; }
  .screen-empty { color:#B7BCC5; font-size:13px; }

  /* buttons */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:14px 18px; font-weight:700; font-size:16px; }
  .sendbar { position:fixed; left:0; right:0; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:25; padding:14px 16px 10px;
    background:linear-gradient(to bottom, transparent, var(--bg) 38%); }
  .sendbar .btn { max-width:528px; margin:0 auto; display:flex; }
  body.composing { padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
  .btn-primary { width:100%; margin-top:16px; background:var(--brand); color:#fff; box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 32%, transparent); transition:transform .1s, background .15s; }
  .btn-primary:active { transform:scale(.98); background:var(--brand-strong); }
  .btn-primary:disabled { opacity:.55; box-shadow:none; }
  .btn-soft { background:var(--brand-soft); color:var(--brand-ink); padding:9px 14px; font-size:14px; border-radius:11px; }
  .btn-ghost { color:var(--sub); padding:9px 10px; font-size:14px; border-radius:11px; }
  .btn-danger { color:var(--danger); }
  /* 11-06 (the owner: 弹窗、动效要简洁优雅; 11-04 「没有任何反应」): every control answers the finger. Filled: a little smaller and lighter; soft: lighter; a bare icon or word: fades */
  .ask .row button, .annp button, #exitAsk button, .btn-soft, .btn-ghost, .btn-stop, .chip, .seg button, .tab, .v2x, .v2back, .sheet .x, .page-bar button, .v2btn2, #v2Snack button, #qzUndo button { transition:opacity .1s, transform .1s; }
  .ask .row button:active, .annp button:active, #exitAsk button:active { opacity:.72; transform:scale(.98); }
  .btn-soft:active, .btn-ghost:active, .btn-stop:active, .chip:active, .seg button:not(.on):active, .v2seg button:not(.on):active, .v2btn2:active { opacity:.6; }
  .tab:active, .v2x:active, .v2back:active, .sheet .x:active, .page-bar button:active, #v2Snack button:active, #qzUndo button:active { opacity:.45; }

  /* trial banner */
  .trialbar { display:flex; align-items:center; gap:12px; margin:8px 0 2px; padding:12px 14px; border-radius:14px;
    background:var(--warm-soft); color:#92400E; font-size:14px; font-weight:600; }
  .trialbar span { flex:1; }
  .trialbar.over { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
  @media (prefers-color-scheme: dark) { .trialbar { color:#FBBF24; } }
  /* why this device was signed out (another device logged in, or the password changed) */
  .signed-out { margin:0 0 14px; padding:11px 14px; border-radius:14px; background:var(--warm-soft); color:#92400E; font-size:14px; line-height:1.6; }
  @media (prefers-color-scheme: dark) { .signed-out { color:#FBBF24; } }

  /* onboarding */
  .steps { display:grid; gap:10px; }
  .step { display:flex; align-items:center; gap:12px; }
  .step .n { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--bg); color:var(--sub); flex:none; }
  .step.done .n { background:var(--brand); color:#fff; }
  .step .txt { flex:1; }
  .step .txt b { display:block; font-size:14.5px; }
  .step.done .txt b { color:var(--sub); text-decoration:line-through; text-decoration-color:var(--faint); }

  /* class cards */
  .cls { display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
  .cls > .cls-ic { margin-top:1px; } .cls > .btn { margin-top:3px; }   /* 10-13: by the class name and its status, not halfway down its links (the button on the badge's centre line) */
  /* 10-13 evening: a phone under 360 px (320, or a big 显示大小; 341–350 wrapped too): 绑定码 without its icon and a little
     narrower, so 「三年三班」 shows in full beside the pencil and 还没绑定教室电脑 stays on one line (a shared card's 退出 as it was) */
  @media (max-width:359px) { .cls > .btn-soft { padding:9px 11px; } .cls > .btn-soft svg { display:none; } }
  .cls:last-child { border-bottom:0; }
  .cls-ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; font-weight:800; font-size:15px; letter-spacing:.5px; }
  .c0 { background:#E3F6EE; color:#0B7A55; } .c1 { background:#E6EEFE; color:#2F5BD3; } .c2 { background:#FEF1DC; color:#B45309; }
  .c3 { background:#F1E8FD; color:#7C3AED; } .c4 { background:#FDE7EC; color:#C0264B; } .c5 { background:#DFF5F8; color:#0E7490; }
  @media (prefers-color-scheme: dark) { .c0,.c1,.c2,.c3,.c4,.c5 { background:color-mix(in srgb, currentColor 16%, transparent); filter:brightness(1.5); } }
  .cls-main { flex:1; min-width:0; }
  .agree { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--sub); margin:2px 2px 12px; }
  .agree input { width:17px; height:17px; accent-color:var(--brand); flex:none; }
  .agree a { color:var(--brand-ink); font-weight:650; }
  .btn-danger { color:#D93F3F; }
  .pill .co { font-size:11px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border-radius:6px; padding:1px 5px; margin-left:4px; }
  .pill.on .co { background:color-mix(in srgb, var(--brand) 15%, transparent); }   /* 10-14: on the light green of a picked pill */
  .pill.lock { opacity:.45; }   /* 11-09: a class no notice can go to (targetsPickable) */
  .members { margin:14px 0 0; display:grid; gap:8px; }
  .member { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:12px; background:var(--bg); }
  .member b { flex:1; min-width:0; overflow-wrap:anywhere; font-weight:650; font-size:15px; }
  .member .dep { flex:none; font-size:12px; font-weight:650; color:var(--brand-ink); background:var(--brand-soft); padding:2px 8px; border-radius:999px; }   /* 10-14 副班主任 */
  .member .xfer { flex:none; font-size:13px; padding:6px 10px; }
  .member small { flex:none; font-size:12.5px; color:var(--sub); }
  #xferIn .offer { padding:4px 2px; }
  #xferIn .offer + .offer { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
  #xferIn .offer small { display:block; margin:-6px 0 10px; color:var(--sub); font-size:13px; }
  #xferIn .offer p { margin:0 0 10px; font-size:15px; line-height:1.6; }
  #xferIn .offer .acts { display:flex; gap:10px; }
  #xferIn .offer .acts .btn { flex:1; }
  .cls-name { font-weight:700; font-size:16px; }
  /* 11-04 T36 学校管理员: a class, its 班主任 and its people; a tap on a teacher sets 副班主任 / 移出 / 换班主任 */
  .sch-top { display:flex; align-items:flex-start; gap:12px; }
  .sch-top > div { flex:1; min-width:0; }
  .sch-name { font-weight:700; font-size:16px; overflow-wrap:anywhere; }
  .sch-mem { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .sch-m { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; font-weight:600; }
  .sch-m i { font-style:normal; font-size:11.5px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:1px 7px; }
  .sch-hint { margin-top:10px; font-size:12.5px; color:var(--sub); }
  .status { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--sub); margin-top:3px; }
  .status.ok { color:var(--ok); } .status.warn { color:#B45309; }   /* 10-13: the readable amber (--warm on white is about 2:1), like .tool-note.warn */
  @media (prefers-color-scheme: dark) { .status.warn { color:#FBBF24; } }

  /* history */
  .hist-item { padding:14px 0; border-bottom:1px solid var(--line); }
  .hist-item:last-child { border-bottom:0; }
  .hist-text { font-weight:600; font-size:15px; }
  .hist-meta { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:12.5px; color:var(--faint); }
  .hist-meta > * { white-space:nowrap; flex:none; }
  .hist-meta .who { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }   /* a long 署名 shortens, the row never wraps */
  /* 10-13: the receipt tags (还没播放 / 教室已播放 / 学生已确认) on their own line under the text: at 360px two of them
     beside time · sender wrapped 再发一次 (or a tag) onto a line by itself */
  .hist-sts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .hist-sts .tag { white-space:nowrap; }
  .tag { padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; }
  .tag.ok { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--brand-ink); }   /* 10-13: --ok on its tint was ~3:1 */
  .tag.wait { background:var(--bg); color:var(--sub); }
  .again { margin-left:auto; color:var(--brand); font-weight:600; font-size:13px; padding:2px 0; }
  /* one fold per day (09-29): 今天 open, the older days closed until tapped */
  .day { width:100%; display:flex; align-items:center; gap:8px; padding:13px 0; border-top:1px solid var(--line); text-align:left; }
  .day:first-child { border-top:0; padding-top:2px; }
  .day .t { font-size:15px; font-weight:750; }
  .day .n { flex:1; font-size:12.5px; font-weight:600; color:var(--faint); }
  .day .chev { width:18px; height:18px; color:var(--faint); transition:transform .2s; }
  .day.open .chev { transform:rotate(180deg); }
  .day-body { border-top:1px solid var(--line); }
  .day-body.shut { display:none; }
  .hist-note { margin:12px 2px 0; font-size:12.5px; color:var(--faint); text-align:center; }
  .empty { text-align:center; padding:28px 10px; color:var(--faint); }
  .empty svg { width:36px; height:36px; stroke-width:1.5; margin-bottom:8px; }
  /* 刚发的 (10-13, the look the user approved in receipt-demo-approved.html): under 发送, the notice just sent and one row
     per class, all one height: icon | class | status | time. 发送中 (dashed ring) → 教室已播放 → 学生已确认 (the row turns
     green); once every class has tapped 收到 the whole card does too */
  .rc { display:grid; gap:10px; border:1.5px solid transparent; transition:background .35s, border-color .35s;
    scroll-margin:72px 0 calc(150px + env(safe-area-inset-bottom)); --rc-ok:var(--brand-strong); --rc-bad:#D1343A; }
  .rc.done { background:var(--brand-soft); border-color:var(--brand); }
  .rc .label { margin:0; }
  /* 10-20 (猫七: 「我建议这个通知可以重复发」): 再发一次 on the card's top right, the same notice to the same classes */
  .rc .rc-top { display:flex; align-items:center; gap:8px; }
  .rc .rc-again { margin-left:auto; padding:5px 12px; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); font-size:13.5px; font-weight:650; }
  .rc-text { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rc-rows { display:grid; gap:8px; }
  .rc-row { display:grid; grid-template-columns:20px var(--rc-name, 4.6em) minmax(0, 1fr) auto; align-items:center; column-gap:10px;
    min-height:44px; padding:0 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); font-size:14px;
    transition:background .35s, border-color .35s, color .35s; }
  .rc-row b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 10-13 (user): the receipt sits centred in the space between the class name and the time; the time column keeps its
     width on rows without a time, so every row centres on the same line */
  .rc-row .st { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
  .rc-row .tm { font-variant-numeric:tabular-nums; font-size:13px; color:var(--sub); min-width:2.8em; text-align:right; }
  /* 10-13 evening: a status too long for that column (等教室电脑开机, 还没绑定教室电脑 beside a 6-字 name) on a row with no
     time takes the time column too, from the column's start: off the shared line by only what it needs (see rcMeasure) */
  .rc-row[data-wide] .st { grid-column:3 / -1; text-align:left; }
  .rc-row[data-wide] .tm { display:none; }
  /* … and under 360 px (320, or a big 显示大小) a little tighter, so 教室已播放 still fits beside a 6-字 name */
  @media (max-width:359px) { .rc-row { padding:0 10px; column-gap:8px; font-size:13px; } }
  .rc-row svg { display:block; }
  .rc-row circle { fill:none; stroke:var(--line); stroke-width:1.6; }
  .rc-row path { fill:none; opacity:0; }
  .rc-row.sending, .rc-row.offline, .rc-row.nopc { color:var(--sub); }
  .rc-row.sending circle, .rc-row.offline circle { stroke:var(--faint); stroke-dasharray:3 3; }
  .rc-row.nopc circle { stroke:var(--faint); }   /* 10-13: like the class card's 还没绑定教室电脑 */
  .rc-row.nopc .st { color:#B45309; font-weight:600; }   /* 10-13: same amber as the class card's .status.warn */
  @media (prefers-color-scheme: dark) { .rc-row.nopc .st { color:#FBBF24; } }
  .rc-row.fail circle, .rc-row.fail .x { stroke:var(--rc-bad); }   /* 10-13: 没发出去 in the status column like the others, no pill */
  .rc-row.fail .x { opacity:1; }
  .rc-row.fail .st { color:var(--rc-bad); font-weight:600; }
  .rc-row.played circle { stroke:var(--brand); opacity:.55; }
  .rc-row.played .st { color:var(--brand-ink); font-weight:600; }
  .rc-row.confirmed { background:var(--rc-ok); border-color:var(--rc-ok); color:#fff; }
  .rc-row.confirmed circle { fill:#fff; stroke:#fff; }
  .rc-row.confirmed .ck { stroke:var(--rc-ok); opacity:1; }
  .rc-row.confirmed { padding-top:9px; padding-bottom:9px; }
  .rc-row.confirmed .st { font-weight:600; }
  .rc-row.confirmed .tm { color:rgba(255,255,255,.85); }
  /* 10-13: the confirmed row's two receipts, line for line with their times */
  .rc-row.confirmed .st span, .rc-row.confirmed .tm span { display:block; line-height:22px; overflow:hidden; text-overflow:ellipsis; }
  .rc-hint { font-size:12.5px; color:var(--sub); }
  /* 10-13: dark keeps the light theme's deeper green for the confirmed row (white text on #16B981 was ~2.5:1; #0B8A5F is ~4.4:1); only the played ring brightens */
  @media (prefers-color-scheme: dark) { .rc.done { border-color:var(--rc-ok); } .rc-row.played circle { stroke:#16B981; } .rc { --rc-bad:#F47A7E; } }
  /* 10-13: --rc-bad is a deeper --danger for words (#D1343A ~4.9:1 on white, #F47A7E ~6:1 on the dark card) */
  @media (prefers-reduced-motion: reduce) { .rc, .rc-row { transition:none; } }

  /* tab bar */
  .tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--line); }
  .tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:600; color:var(--faint); padding:4px 14px; border-radius:12px; }
  .tab svg { width:23px; height:23px; }
  .tab.on { color:var(--brand); }
  /* 最近更新 (10-08): a small red dot until the teacher has looked */
  .tab { position:relative; }
  .news-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#EF4444; margin-left:2px; }
  .tab .news-dot { position:absolute; top:3px; right:14px; margin:0; }
  #newsSheet, #hwLogSheet { display:flex; flex-direction:column; overflow:hidden; }   /* 11-06: the ✕ stays on the card while the list scrolls */
  #newsList, #hwLogBody { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  #newsList .news-d { font-weight:700; font-size:14px; margin:14px 2px 4px; color:var(--brand); }
  #newsList ul { margin:0; padding-left:20px; }
  #newsList li { font-size:14px; line-height:1.6; margin:2px 0; }
  #newsList .news-v { margin:-2px 2px 4px; font-size:12.5px; line-height:1.5; color:var(--sub); }   /* 10-13: a note under the date */
  #newsList .news-star { font-style:normal; margin-left:3px; font-size:12px; color:var(--brand); }
  #newsList .news-v .news-star { margin:0 3px 0 0; }   /* 10-13: the legend's ✦, in front */

  /* bottom sheet */
  .scrim { position:fixed; top:0; right:0; bottom:0; left:0; z-index:40; background:var(--v2scrim); opacity:0; pointer-events:none; transition:opacity .2s; }
  .scrim.on { opacity:1; pointer-events:auto; }
  /* 10-10: our own 确认 box. Some in-app browsers (百度 App's) never show window.confirm() and answer 「取消」 at once,
     so a teacher's 「退出联盟」 did nothing; every 确认 goes through sure() now */
  /* (10-10) sides spelled out, not inset: older in-app browser engines (before Chrome 87) ignore inset, and the box
     sat off-screen (still dead in 百度 App for 第 7 单 after the fix) */
  .ask { position:fixed; top:0; right:0; bottom:0; left:0; z-index:55; display:grid; place-items:center; padding:24px; background:rgba(10,14,20,.3);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility 0s linear .18s; }
  .ask.own { background:transparent; }      /* no sheet open: the scrim under it does the dimming */
  .ask.on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .18s ease; }   /* hidden, it's out of screen readers' reach too */
  .ask .box { display:flex; flex-direction:column; width:100%; max-width:360px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); background:var(--card); border-radius:16px; padding:22px 20px 16px;
    box-shadow:0 24px 60px rgba(10,14,20,.28); transform:translateY(8px) scale(.97); transition:transform .2s cubic-bezier(.2,.8,.2,1); }
  .ask.on .box { transform:none; }
  .ask .t { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; font-size:16px; line-height:1.65; white-space:pre-line; }
  .ask .t b { display:block; margin-bottom:8px; font-size:17px; font-weight:600; line-height:1.5; }   /* 11-06: 第一段是问句，一眼看到 */
  .ask .t .more { display:block; font-size:14.5px; line-height:1.7; color:var(--sub); }
  .ask textarea { flex:none; margin-top:12px; width:100%; font-size:15px; line-height:1.5; }
  .ask .row { flex:none; display:flex; gap:10px; margin-top:18px; padding:0; }   /* (padding:0 : 不要 .row 漏进来的 12px) */
  .ask .row button { flex:1; padding:12px 10px; border-radius:12px; font-weight:600; font-size:16px; }
  .ask .no { background:var(--bg); color:var(--sub); }
  .ask .yes { background:var(--brand); color:#fff; }
  .ask .yes.danger { background:var(--danger); }
  .sheet { position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:560px; margin:0 auto; background:var(--card); border-radius:16px 16px 0 0;
    max-height:calc(100vh - 16px); overflow-y:auto; overscroll-behavior:contain;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform var(--pane-out); }
  .sheet.on { transform:none; transition:transform var(--pane-in); }
  /* sheets you type into are a centred dialog in the upper part of the screen: the phone keyboard comes up from the
     bottom and never covers it (some home-screen apps neither shrink the page for the keyboard nor report it) */
  .sheet.dlg { top:calc(9vh + env(safe-area-inset-top)); bottom:auto; left:16px; right:16px; max-width:420px; border-radius:16px;
    padding:20px 20px 22px; max-height:80vh; box-shadow:0 24px 60px rgba(10,14,20,.28);
    opacity:0; transform:translateY(8px) scale(.97); pointer-events:none; transition:opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
  .sheet.dlg.on { opacity:1; transform:none; pointer-events:auto; }
  .sheet .x { position:absolute; top:9px; left:6px; width:44px; height:44px; color:var(--ink); display:grid; place-items:center; }
  .sheet .x svg { width:22px; height:22px; stroke-width:2; }
  .sh-t { font-size:17px; font-weight:600; line-height:1.3; }   /* 11-06: a title in a sheet: as .v2hs-hd b */
  .sheet .btn-primary, .sheet .grid2 .btn { height:50px; padding:0 12px; border-radius:12px; font-size:17px; font-weight:600; box-shadow:none; }
  .sheet .btn-primary { height:auto; min-height:50px; padding:4px 12px; }
  .sheet .grid2 .btn { height:50px; }
  #hwLogCopy { flex:none; }
  #hwGo { padding-left:10px; padding-right:10px; }
  /* 隐私说明 and 安装方法 open as a page-like layer inside the app, not as pages of their own: the Mi Browser home-screen
     app puts every other page in a layer of its own that the back gesture can't close */
  .page { position:fixed; top:0; right:0; bottom:0; left:0; z-index:45; display:flex; flex-direction:column; background:var(--bg);
    transform:translateX(100%); visibility:hidden; transition:transform var(--pane-out), visibility 0s .22s; }
  .page.on { transform:none; visibility:visible; transition:transform var(--pane-in); }
  .page-bar { position:relative; flex:none; display:flex; align-items:center; justify-content:center; height:calc(44px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 56px 0; font-weight:600; font-size:17px; }
  .page-bar button { position:absolute; left:2px; bottom:0; width:44px; height:44px; display:grid; place-items:center; }
  .page-bar svg { width:24px; height:24px; stroke-width:2.2; }
  .page iframe { flex:1; width:100%; border:0; background:var(--bg); }
  /* 课堂: 随机点名 and 活动倒计时 */
  .tool-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .tool-head .ttl { display:flex; align-items:center; gap:8px; font-weight:750; font-size:17px; }
  .tool-head .ttl svg { width:22px; height:22px; color:var(--brand); }
  .tool-head .btn-ghost { color:var(--brand-ink); font-weight:650; padding:6px 0; }
  /* 10-14 (user): 课堂's tools fold to their title rows and open in place, one at a time (drawToolFolds) */
  .tools .card.fold-able .tool-head { cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tools .card.fold-able .tool-head .ttl { margin-right:auto; }
  .tools .tool-head .tstat { font-size:13.5px; color:var(--sub); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tools .tool-head .tstat.on { color:var(--brand-ink); font-weight:650; }
  .tools .tool-head .tchev { width:18px; height:18px; color:var(--faint); transform:rotate(180deg); transition:transform .2s; }
  .tools .card.shut > :not(.tool-head) { display:none !important; }
  .tools .card.shut .tool-head .tchev { transform:none; }
  .tools .card.shut .tool-head .btn-ghost, .tools .card.shut .tool-head > .muted, .tools .card:not(.shut) .tool-head .tstat { display:none; }
  /* 安静自习 (1.9.21) */
  #sgCard:empty, #qzCard:empty { height:62px; padding:0; margin-bottom:14px; background:var(--card); box-shadow:var(--shadow); border-radius:var(--radius); }   /* 11-06: 第一次打开，数据没来时是一张普通的白卡 */
  #histList:empty { display:none; }
  #qzCard .qz-ic { width:44px; height:55px; flex:none; }
  #qzCard .tstat { margin-left:auto; color:var(--sub); font-size:13px; font-weight:600; }
  #qzCard .tool-note.warn { color:#b4282d; }
  #qzCard .row .switch { flex:none; }                               /* 10-21: long words beside it squeezed it */
  #qzCard .row > div:first-child { flex:1; min-width:0; }
  #qzCard .row > .btn-ghost { flex:none; white-space:nowrap; max-width:42%; overflow:hidden; text-overflow:ellipsis; }
  .qz-step { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
  .qz-step button { width:48px; height:48px; border-radius:14px; background:var(--bg); font-size:24px; font-weight:700; color:var(--ink); flex:none; }
  .qz-step .field { width:96px; text-align:center; font-size:24px; font-weight:800; padding:8px 4px; }
  .qz-step span { color:var(--sub); font-weight:600; }
  #qzCard .qz-times { margin-top:8px; grid-template-columns:repeat(3,1fr); } #qzCard .qz-times + .seg { margin-top:8px; }
  #qzCard .qz-grp button { flex:1; min-width:0; padding:7px 2px; font-size:13px; white-space:nowrap; }   /* 10-31: six groups (我的班 first) on a phone */
  .qz-now { display:flex; gap:8px; margin:12px 0 10px; }
  .qz-now div { flex:1; background:var(--bg); border-radius:12px; padding:10px 4px; text-align:center; font-size:12px; color:var(--sub); }
  .qz-now b { display:block; font-size:20px; color:var(--ink); }
  .qz-now .y b { color:#b8730a; } .qz-now .r b { color:#d0453f; } .qz-now .q b { color:var(--brand); }
  .qz-grow { display:flex; align-items:center; gap:10px; }
  .qz-grow b { display:block; font-size:15px; } .qz-grow span { font-size:13px; color:var(--sub); }
  .qz-tl { display:flex; gap:2px; height:26px; margin-top:12px; border-radius:8px; overflow:hidden; background:var(--bg); }
  .qz-tl i { flex:1; background:#d5f0e2; } .qz-tl i.y { background:#fde7bd; } .qz-tl i.r { background:#f2a7a3; }
  .qz-tlx { display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:4px; }
  .qz-g { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .qz-gh { display:flex; align-items:baseline; justify-content:space-between; } .qz-gh b { font-size:15px; } .qz-gh span { font-size:13px; color:var(--sub); }
  .qz-gl { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
  .qz-gi[data-qz], .qz-field [data-qz] { cursor:pointer; -webkit-tap-highlight-color:transparent; }   /* 11-03 T16: 点花铲掉 */
  .qz-field { display:block; width:100%; height:auto; margin-top:10px; border-radius:14px; }   /* 1.9.26 真的花园 */
  .qz-field, .qz-field svg { stroke:none; width:auto; height:auto; }   /* (not the icons' outline: drawn as the classroom screen draws it) */
  .qz-field { width:100%; }
  .qz-gi { background:var(--bg); border-radius:12px; padding:6px 2px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .qz-gi b { font-size:13px; } .qz-gi b i { font-style:normal; color:var(--brand); margin-left:2px; } .qz-gi small { font-size:10.5px; color:var(--faint); min-height:13px; line-height:1.25; }
  .qz-gi.none .qz-ic { opacity:.5; } .qz-gi.lock .qz-ic { filter:grayscale(1); opacity:.3; } .qz-gi.lock b { color:var(--faint); } .qz-gi.lock small { color:#a86400; }
  .qz-seed { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--sub); background:var(--bg); border-radius:12px; padding:4px 10px; }
  .qz-links { display:flex; gap:8px; margin-top:14px; } .qz-links button { flex:1; background:var(--bg); border-radius:12px; padding:11px 6px; font-weight:700; font-size:14px; color:var(--ink); }
  .qz-sub { display:flex; align-items:center; gap:8px; margin:10px 0 4px; } .qz-sub b { font-size:15px; }
  .qz-log { padding:12px 0; border-top:.5px solid var(--hair); } .qz-sub + .qz-log { border-top:0; }
  .qz-log .h { display:flex; justify-content:space-between; gap:8px; font-size:14px; } .qz-log .h span { color:var(--sub); }
  .qz-log .qz-tl { height:16px; margin-top:8px; gap:0; } .qz-log .at { font-size:13px; color:var(--sub); margin-top:6px; line-height:1.5; }
  .qz-rl { margin-top:12px; border-radius:14px; overflow:hidden; background:var(--bg); }
  .qz-ri { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:14.5px; }
  .qz-ri .no { width:24px; text-align:center; font-weight:800; color:var(--faint); } .qz-ri .no.n1 { color:#d4a017; } .qz-ri .no.n2 { color:#9aa4b2; } .qz-ri .no.n3 { color:#c17a46; }
  .qz-ri .nm { flex:1; min-width:0; } .qz-ri .nm small { display:block; font-size:12px; color:var(--faint); margin-top:2px; }
  .qz-ri > b { font-size:17px; color:var(--brand); } .qz-ri > b small { font-size:11px; color:var(--faint); margin-left:2px; font-weight:600; }
  .qz-ri.me { background:#eaf6f0; } .qz-ri.gap { justify-content:center; color:var(--faint); padding:4px; }
  .tools .seg { margin-top:12px; } .tools .seg button { flex:1; padding:8px 6px; font-size:14px; }
  .tools .row { border-bottom:0; padding:10px 0 2px; }
  .tool-note { font-size:13px; color:var(--sub); margin-top:4px; }
  /* 放学时间 (1.9.2): one time per weekday on the 班级桌面 sheet; empty = after the last lesson */
  .dk-ends { display:flex; gap:6px; padding:2px 0 10px; }
  .dk-ends label { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--sub); }
  .dk-ends input { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:13px; padding:7px 0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); text-align:center; }
  .dk-ends input::-webkit-calendar-picker-indicator { display:none; }
  .dk-ends input { min-height:34px; -webkit-appearance:none; appearance:none; color-scheme:light dark; }
  .dk-ends input::-webkit-date-and-time-value { text-align:center; min-height:1.2em; }
  .tool-note .btn-ghost { color:var(--brand-ink); font-weight:650; font-size:13px; padding:0 0 0 4px; }
  .times { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
  .times button { padding:10px 0; border-radius:12px; background:var(--bg); font-weight:700; font-size:16px; }
  .times button small { font-weight:500; color:var(--sub); font-size:12px; }
  .times button.on { background:var(--brand-soft); color:var(--brand-ink); box-shadow:inset 0 0 0 2px var(--brand); }
  #timerLabels, .qz-an { flex-wrap:wrap; overflow:visible; }
  .qz-an .chip { background:var(--bg); color:var(--sub); } .qz-an .chip.on { background:var(--brand); color:#fff; }   /* 10-26 安静自习 哪几节 */   /* (10-26: 自己写… made five) */
  #timerLabels .chip { background:var(--brand-soft); } #timerLabels .chip.on { background:var(--brand); color:#fff; }
  #timerLabels .chip.none { background:var(--bg); color:var(--sub); } #timerLabels .chip.none.on { background:var(--sub); color:#fff; }
  .slots { position:relative; height:176px; border-radius:14px; background:var(--bg); border:1.5px solid var(--line); margin-top:8px; }
  .slots .ln { position:absolute; left:50%; height:8px; border-radius:4px; background:var(--line); transform:translateX(-50%); }
  .slots button { position:absolute; width:84px; height:46px; border-radius:10px; border:2px dashed color-mix(in srgb, var(--faint) 60%, transparent);
    color:var(--faint); font-size:12px; }
  .slots button.on { border:0; background:var(--brand); color:#fff; font-weight:800; font-size:15px; box-shadow:0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent); }
  .picked { text-align:center; padding:12px 0 2px; }
  .picked .who { font-size:34px; font-weight:800; letter-spacing:2px; line-height:1.3; }
  .tool-btns { display:flex; gap:10px; margin-top:16px; }
  .tool-btns .btn-primary { margin-top:0; flex:1.4; }
  .tool-btns .btn-soft { flex:1; padding:14px 10px; font-size:16px; border-radius:14px; }
  .t-run { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
  .t-run .d { font-size:46px; font-weight:800; letter-spacing:1px; font-variant-numeric:tabular-nums; line-height:1.1; }
  .t-run .d.up { color:var(--brand); font-size:38px; }
  .t-run .btn { padding:10px 16px; font-size:15px; border-radius:12px; }
  .btn-stop { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
  .t-bar { height:8px; border-radius:4px; background:color-mix(in srgb, var(--brand) 14%, transparent); overflow:hidden; margin-top:12px; }
  .t-bar i { display:block; height:100%; background:linear-gradient(90deg, #16B981, var(--brand)); transition:width .5s linear; }
  .dur-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; font-size:16px; }
  .dur-row .field { width:92px; text-align:center; font-size:22px; font-weight:700; }
  .code { display:flex; justify-content:center; gap:8px; margin:18px 0 6px; }
  .code span { width:44px; height:58px; border-radius:12px; background:var(--bg); display:grid; place-items:center; font-size:30px; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums; }
  .bound { display:none; flex-direction:column; align-items:center; gap:8px; padding:18px 0 4px; }
  .sheet.done .bound { display:flex; } .sheet.done .pending { display:none; }
  #sheet:not(.done) #sheetBtn { background:var(--brand-soft); color:var(--brand-ink); }
  .bound .check { width:64px; height:64px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; animation:pop .45s ease; box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent); }
  .bound .check svg { width:32px; height:32px; stroke-width:2.6; }
  .waiting { display:inline-flex; align-items:center; gap:8px; margin-top:4px; }
  .waiting i { width:8px; height:8px; border-radius:50%; background:var(--warm); } .sheet.on .waiting i { animation:blink 1.2s infinite; }
  @keyframes blink { 50% { opacity:.25; } }
  .howto { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
  .tipqr { display:flex; gap:18px; justify-content:center; margin:16px 0 2px; }
  .tipqr figure { margin:0; }
  .tipqr img, .tipqr-none { width:148px; height:148px; border-radius:12px; display:block; background:var(--bg); }
  .tipqr-none { display:grid; place-items:center; font-size:13px; color:var(--faint); border:1px dashed var(--line); }
  .tipqr figcaption { margin-top:6px; font-size:13px; font-weight:650; color:var(--sub); }
  .howto li { display:flex; gap:10px; font-size:14px; color:var(--sub); }
  .howto li a { color:var(--brand-ink); font-weight:650; text-decoration:underline; }
  .howto li i { font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; margin-top:1px; }

  /* auth */
  .auth { min-height:calc(100vh - 80px); display:flex; flex-direction:column; justify-content:center; padding:10px 6px 40px; }
  .hero-logo { width:64px; height:64px; border-radius:20px; margin-bottom:22px; }
  .hero-logo svg { width:32px; height:32px; }
  .hero h1 { font-size:28px; line-height:1.3; margin:0 0 8px; letter-spacing:.5px; }
  .hero p { margin:0 0 26px; color:var(--sub); }
  .auth .seg { margin-bottom:14px; } .auth .seg button { flex:1; padding:9px; font-size:14px; }
  .auth .field { margin-bottom:10px; background:var(--card); }

  #toast { position:fixed; left:50%; top:calc(14px + env(safe-area-inset-top)); z-index:62; transform:translate(-50%, -20px); background:var(--ink); color:var(--card);
    padding:11px 18px; border-radius:12px; font-size:14px; font-weight:600; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.18); text-wrap:balance;
    width:max-content; max-width:min(88vw, 520px); }   /* 10-13: was max-width:88% of the half screen left of it, a narrow tower */
  #toast.show { opacity:1; transform:translate(-50%, 0); }
  #toast.bad { background:var(--danger); color:#fff; }
  .ask.on ~ #qzUndo { z-index:39; }
  body:has(.v2pg.on, .page.on) #pageNewer { right:8px !important; } body:has(.v2pg.on, .page.on) #pageNewer span { display:none; }
  /* 11-06: a tapped control whose request takes a while (not a fast one: 200 ms first) */
  .tapbusy { opacity:.6; pointer-events:none; }
  .btn.tapbusy:not(:disabled)::before { content:''; flex:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(127,127,127,.35); border-top-color:currentColor; animation:spin .8s linear infinite; }
  /* 10-09 (a teacher): the back key at the top level asks first, the next one leaves */
  #exitAsk { position:fixed; left:50%; bottom:calc(30vh + env(safe-area-inset-bottom)); z-index:61; transform:translate(-50%, 24px); display:flex; align-items:center; gap:16px;
    width:max-content; max-width:92%; background:var(--ink); color:var(--card); padding:16px 14px 16px 22px; border-radius:18px; font-size:17px; font-weight:700;
    box-shadow:0 12px 32px rgba(16,24,40,.28); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
  #exitAsk.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  #exitAsk small { display:block; font-size:13.5px; font-weight:500; opacity:.75; margin-top:4px; }
  #exitAsk button { flex:none; background:var(--brand); color:#fff; border-radius:12px; padding:12px 18px; font-size:16px; font-weight:700; }
  @keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)} }
  /* the 课堂 gift: a box that wobbles until it is opened, once per phone, the first time 课堂 is shown */
  .gift { text-align:center; }
  .gift .box { display:block; width:132px; height:120px; margin:4px auto 2px; overflow:visible; stroke:none; }   /* a flat picture, not a line icon */
  .gift.on.wobble .box { animation:wobble 1.8s ease-in-out infinite; transform-origin:50% 92%; }
  @keyframes wobble { 0%, 58%, 100% { transform:rotate(0); } 64% { transform:rotate(-7deg); } 72% { transform:rotate(6deg); } 80% { transform:rotate(-4deg); } 88% { transform:rotate(2deg); } }
  .gift .lid { transform-box:fill-box; transform-origin:50% 100%; transition:transform .6s cubic-bezier(.3,1.5,.5,1); }
  .gift.open .lid { transform:translateY(-30px) rotate(-12deg); }
  .gift .glow { opacity:0; transition:opacity .5s .15s; }
  .gift.open .glow { opacity:1; }
  .gift h3 { margin:8px 0 4px; font-size:20px; font-weight:800; }
  .gift .g2 { display:none; }
  .gift.open .g1 { display:none; }
  .gift.open .g2 { display:block; animation:rise .45s .1s both cubic-bezier(.2,.8,.2,1); }
  @keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  .gift .perk { display:flex; gap:12px; align-items:flex-start; text-align:left; margin-top:10px; padding:12px; border-radius:14px; background:var(--brand-soft); }
  .gift .perk .ic { flex:none; width:36px; height:36px; border-radius:10px; background:var(--brand); color:#fff; display:grid; place-items:center; }
  .gift .perk .ic svg { width:20px; height:20px; }
  .gift .perk b { display:block; font-size:15.5px; margin-bottom:2px; }
  .gift .perk span { font-size:13.5px; line-height:1.5; color:var(--sub); }
  .gift .note { margin:14px 0 0; font-size:14.5px; font-weight:700; color:var(--brand-ink); }
  .confetti { position:fixed; top:0; right:0; bottom:0; left:0; z-index:60; pointer-events:none; }
  /* 公告: one line from the seller at the top of the page */
  .ann { display:flex; align-items:center; gap:10px; margin:2px 0 12px; padding:11px 8px 11px 13px; border-radius:14px;
    background:var(--brand-soft); color:var(--brand-ink); font-size:14px; line-height:1.5; animation:annIn .35s ease both; }
  .ann.warn { background:var(--warm-soft); color:#92400E; }
  @media (prefers-color-scheme: dark) { .ann.warn { color:#FCD34D; } }
  .ann > svg { width:20px; height:20px; flex:none; }
  .fold-out { height:0 !important; min-height:0 !important; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; opacity:0; overflow:hidden; animation:none !important; transition:height .2s cubic-bezier(.2,.8,.2,1), margin .2s cubic-bezier(.2,.8,.2,1), padding .2s cubic-bezier(.2,.8,.2,1), opacity .15s; }
  /* 10-29 开屏弹窗 (a popup 公告: 购买方式调整; the owner's mockup 年卡调整/弹窗效果图.html) */
  .annp { position:fixed; inset:0; z-index:90; background:var(--v2scrim); display:flex; align-items:center; justify-content:center; padding:22px; }
  .annp .dlg { width:100%; max-width:420px; max-height:calc(100vh - 44px); overflow:auto; background:var(--card); color:var(--ink); border-radius:16px; padding:24px 22px 18px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
  .annp .hd { font-size:19px; font-weight:800; margin-bottom:14px; text-align:center; color:var(--brand-ink); }
  .annp .bd p { margin:0 0 12px; font-size:15px; line-height:1.75; }
  .annp .bd p.tight { margin:0; } .annp .bd p.big { font-weight:800; } .annp .bd b { color:var(--brand-ink); }
  .annp .bd .ok { background:var(--brand-soft); color:var(--brand-ink); border-radius:12px; padding:10px 12px; font-size:15px; line-height:1.7; font-weight:600; margin:10px 0; }
  .annp .bd .nw { white-space:nowrap; }
  .annp .sig { font-size:13px; text-align:right; margin:4px 0 16px; color:var(--sub); }
  .annp button { width:100%; height:50px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:17px; font-weight:600; }
  .annp { animation:popFade .18s ease; } .annp .dlg { animation:popRise .2s cubic-bezier(.2,.8,.2,1); }   /* 11-06: as the 确认 box */
  .annp.out { opacity:0; pointer-events:none; transition:opacity .15s; }
  @keyframes popFade { from { opacity:0; } } @keyframes popRise { from { transform:translateY(8px) scale(.97); } }
  .ann .t { flex:1; min-width:0; font-weight:600; }
  .ann .act { flex:none; padding:7px 11px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; font-size:13px; }
  .ann.warn .act { background:#D97706; }
  .ann .ax { flex:none; width:30px; height:30px; border-radius:50%; background:none; color:inherit; opacity:.55; font-size:15px; }
  @keyframes annIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  /* 播报音量 (per class) */
  #sgLgMins { display:grid; grid-template-columns:repeat(4,1fr); }   /* 10-29: 1 3 5 10 / 15 20 30 (课前读) */
  #sgLgMins button { flex:1; padding:8px 4px; font-size:14px; }
  .vol-big { text-align:center; font-size:48px; font-weight:800; line-height:1; color:var(--brand); margin:18px 0 10px; font-variant-numeric:tabular-nums; }
  .vol-big small { font-size:20px; margin-left:3px; color:var(--sub); font-weight:700; }
  .vol-range { width:100%; height:30px; margin:0 0 10px; -webkit-appearance:none; appearance:none; background:transparent; }
  .vol-range::-webkit-slider-runnable-track { height:8px; border-radius:99px; background:linear-gradient(to right, var(--brand) var(--p, 50%), var(--line) var(--p, 50%)); }
  .vol-range::-moz-range-track { height:8px; border-radius:99px; background:linear-gradient(to right, var(--brand) var(--p, 50%), var(--line) var(--p, 50%)); }
  .vol-range::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:#fff; border:2px solid var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.2); }
  .vol-range::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--brand); }
  .vol-presets { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .vol-presets button { padding:9px 0; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:14px; font-weight:650; line-height:1.25; }
  .vol-presets button small { display:block; font-size:12px; font-weight:600; color:var(--faint); }
  .vol-presets button.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); }
  .vol-presets button.on small { color:var(--brand-ink); }
  /* 提示音 (10-13): on the same sheet, under the volume. Presets in the volume buttons' style; 自己录 opens a recorder + a file */
  .vol-presets.chime-pick { grid-template-columns:repeat(3, 1fr); }
  .chime-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
  .chime-acts .hw-mic { position:relative; margin-top:0; height:auto; min-height:54px; flex-direction:column; gap:1px; padding:7px 4px; font-size:14.5px; line-height:1.3; }
  .chime-acts .hw-mic small { font-size:12px; font-weight:600; color:var(--faint); }
  .chime-acts .hw-mic.on small { color:inherit; }
  .chime-acts input { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
  .chime-clip { display:flex; align-items:center; gap:10px; min-height:36px; margin-top:8px; font-size:13px; color:var(--sub); }
  .chime-clip .btn { flex:none; padding:7px 12px; }
  .chime-clip svg { width:15px; height:15px; }
  /* with 固定音量 and 自己录 open the sheet scrolls on a phone: 试听 / 保存 stay at its bottom edge */
  /* 课前提醒 (per class): a timetable, and a reminder on the classroom screen before each lesson */
  #ttSheet .seg { margin-top:10px; } #ttSheet .seg button { flex:1; padding:8px 4px; font-size:14px; }
  #ttSheet .tool-note { margin-top:12px; line-height:1.55; }
  .tt-label { margin-top:16px; font-size:13px; font-weight:650; color:var(--sub); display:flex; align-items:center; justify-content:space-between; }
  .tt-link { background:none; color:var(--brand-ink); font-weight:650; font-size:13.5px; padding:4px 0; }
  .tt-link.sub { color:var(--sub); font-weight:600; }
  .tt-grid { display:grid; grid-template-columns:56px repeat(5, minmax(0, 1fr)); gap:4px; margin-top:8px; }   /* 10-13: 56 (was 66): room for 「道德与法治」 */
  .tt-grid .h { text-align:center; font-size:12px; color:var(--sub); font-weight:650; padding-bottom:2px; }
  .tt-grid input { width:100%; min-width:0; height:36px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink);
    font:inherit; font-size:14px; text-align:center; padding:0 2px; -webkit-appearance:none; appearance:none; }
  .tt-grid input.tt-time { font-size:14px; font-variant-numeric:tabular-nums; }
  .tt-grid input.two { font-size:10px; letter-spacing:-.6px; padding:0; }   /* 「美术/书法」, 「综合实践」 fit the narrow cell (ttFit) */
  .tt-grid input.two.five { font-size:8.5px; letter-spacing:-.5px; }   /* 10-13: 「道德与法治」 */
  .tt-grid input:focus { outline:none; border-color:var(--brand); background:var(--card); }
  .tt-rows { display:flex; justify-content:space-between; margin-top:4px; }
  .tt-notes { display:grid; gap:6px; margin-top:8px; }
  .tt-notes label { display:flex; align-items:center; gap:8px; font-size:14px; }
  .tt-notes label span { width:4.6em; flex:none; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tt-notes input { flex:1; min-width:0; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:0 10px; }
  .tt-status { margin-top:12px; font-size:13.5px; background:var(--brand-soft); color:var(--brand-ink); border-radius:12px; padding:9px 12px; line-height:1.55; white-space:pre-line; }
  .tt-status.bad { background:var(--warm-soft); color:#8F5300; }
  @media (prefers-color-scheme: dark) { .tt-status.bad { color:#FBBF24; } }
  .tt-paste textarea { min-height:104px; margin-top:8px; font-size:14px; }
  .tt-acts { display:flex; gap:16px; }   /* 10-14: 拍照识别 beside 粘贴课表 */
  .tt-photo { position:relative; cursor:pointer; }
  .tt-photo input { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
  .tt-photo.busy { color:var(--sub); pointer-events:none; }
  #ttSheet .tool-note.tt-ocr { margin-top:8px; }
  .tt-paste .btn { width:100%; margin-top:6px; padding:10px; }
  .tt-clear { display:block; margin:14px auto 0; }
  .tool-note.warn { color:#B45309; } @media (prefers-color-scheme: dark) { .tool-note.warn { color:#FBBF24; } }
  @media (prefers-reduced-motion: reduce) { .gift.on.wobble .box { animation:none; } .gift .lid { transition:none; } }
  /* 早读三国 (1.6.0): a dark card in 课堂, the 战局 page, the league dialog */
  .sg { border-radius:20px; margin-bottom:14px; padding:16px 16px 16px; color:#F3E7CD; position:relative; overflow:hidden;
    background:radial-gradient(420px 220px at 85% -10%, rgba(227,180,88,.22), transparent 60%), linear-gradient(160deg, #262A33, #14161B 70%);
    box-shadow:0 10px 26px rgba(16,24,40,.22); font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif; }
  .sg .hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  /* 10-14 (user: 「三国跟其他统一一下，不用太突兀」): folded it is the same white row as the other 课堂 tools; opened, the
     dark 三国 card, whose arrow (up) folds it again */
  .sg .hd .r { display:flex; align-items:center; gap:12px; }
  .sg .fold { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:-6px -9px -6px -4px; color:#A99F8C; }
  .sg .fold svg { width:20px; height:20px; transform:rotate(180deg); }
  .sg.folded { background:var(--card); color:var(--ink); box-shadow:var(--shadow); border-radius:var(--radius); padding:18px; font-family:inherit; }
  .sg.folded .tool-head { cursor:pointer; -webkit-tap-highlight-color:transparent; } .sg.folded .tool-head .ttl { margin-right:auto; }
  .sg.folded .tool-head .tchev { transform:none; }
  .sg-title { height:34px; width:auto; display:block; margin-left:-4px; }
  .sg .lk { color:#F6D58E; font-weight:700; font-size:14px; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
  .sg .sub { font-size:12.5px; color:#A99F8C; margin-top:6px; letter-spacing:.5px; }
  .sg .me { display:flex; align-items:center; gap:12px; margin-top:14px; }
  .sg-chip { width:46px; height:46px; flex:none; border-radius:11px; display:grid; place-items:center; color:#FFF6E6; font-size:28px; font-weight:900; line-height:1;
    box-shadow:inset 0 0 0 2.5px rgba(255,246,230,.35), 0 6px 14px rgba(0,0,0,.3); font-family:"Songti SC","STSong","Noto Serif SC",serif; }
  .sg-chip.s { width:34px; height:34px; font-size:20px; border-radius:9px; }
  .sg .me .n { font-size:18px; font-weight:900; letter-spacing:1px; }
  .sg .me .n small { font-size:12.5px; color:#A99F8C; font-weight:600; margin-left:4px; }
  .sg .me .rk { margin-left:auto; text-align:right; line-height:1.1; }
  .sg .me .rk b { font-size:26px; font-weight:900; color:#F6D58E; font-variant-numeric:tabular-nums; }
  .sg .me .rk small { display:block; font-size:11.5px; color:#A99F8C; letter-spacing:1px; }
  .sg-bar { display:flex; height:10px; border-radius:5px; overflow:hidden; margin-top:12px; background:rgba(255,255,255,.06); }
  .sg-bar i { display:block; height:100%; }
  .sg .y { margin-top:10px; font-size:13px; color:#D9CCB0; line-height:1.55; }
  .sg .y b { color:#F6D58E; font-weight:800; }
  .sg-now { margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.06); font-size:14px; line-height:1.5; }
  .sg-now .big { font-size:30px; font-weight:900; color:#F6D58E; font-variant-numeric:tabular-nums; margin-right:6px; }
  .sg-now .gr { color:#8FE0A9; font-weight:700; }
  .sg-dur { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; font-family:-apple-system,"PingFang SC",sans-serif; }
  .sg-dur button { text-align:center; padding:9px 0; border-radius:11px; background:rgba(255,255,255,.07); color:#D9CCB0; font-weight:700; font-size:15px; }
  .sg-dur button small { font-weight:500; font-size:11.5px; color:#A99F8C; }
  .sg-dur button.on { background:rgba(227,180,88,.16); color:#F6D58E; box-shadow:inset 0 0 0 1.5px #E3B458; }
  .sg-dur button.own { grid-column:1 / -1; }   /* 10-22 自定义… (柚子: 「早读的时间能不能自定义，比如 25 分钟」) */
  .sg-dur button:disabled { opacity:.45; }    /* 11-04 T28: 没权限的老师看到但灰着 */
  .sg-go { margin-top:12px; width:100%; border-radius:14px; padding:13px; text-align:center; font-size:17px; font-weight:800; letter-spacing:2px; color:#2A1C05;
    background:linear-gradient(180deg, #F7D98F, #E0AE4B); box-shadow:0 8px 20px rgba(227,180,88,.28), inset 0 -2px 0 rgba(0,0,0,.12);
    display:flex; align-items:center; justify-content:center; gap:8px; font-family:-apple-system,"PingFang SC",sans-serif; }
  .sg-go:active { transform:scale(.98); }
  .sg-go svg { width:22px; height:22px; stroke-width:2; }
  .sg-go.dark { background:rgba(255,255,255,.08); color:#F3E7CD; box-shadow:none; letter-spacing:1px; }
  .sg-go.stop { background:rgba(229,72,77,.18); color:#FF9C95; box-shadow:none; }
  .sg-row2 { display:flex; gap:10px; }
  .sg-row2 > * { flex:1; }
  .sg-row2 > .sg-go { padding:13px 4px; letter-spacing:0; white-space:nowrap; }
  .sg-nt { margin-top:9px; font-size:11.5px; color:#A99F8C; text-align:center; font-family:-apple-system,"PingFang SC",sans-serif; line-height:1.5; }
  .sg-nomic { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:12px; color:#A99F8C; font-family:-apple-system,"PingFang SC",sans-serif; }
  .sg-req { display:flex; align-items:center; gap:8px; margin-top:8px; }
  .sg-req span { flex:1; color:#F3E7CD; } .sg-req small { color:#A99F8C; }
  .sg-req button { padding:6px 12px; border-radius:9px; font-weight:700; font-size:13px; background:rgba(255,255,255,.08); color:#D9CCB0; }
  .sg-req button.y { background:#E3B458; color:#2A1C05; }
  .sg-nomic input { width:15px; height:15px; accent-color:#E3B458; margin:0; }
  .sg-links { display:flex; justify-content:space-between; margin-top:12px; font-size:13px; font-family:-apple-system,"PingFang SC",sans-serif; }
  .sg-links button { color:#E3B458; font-weight:650; }
  .sg-links button.off { color:#6F6857; }
  .sg-k { display:flex; gap:10px; margin-top:12px; }
  .sg-k button { flex:1; padding:10px 0; border-radius:12px; background:rgba(255,255,255,.06); color:#D9CCB0; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; }
  .sg-k button.on { background:rgba(227,180,88,.16); color:#F6D58E; box-shadow:inset 0 0 0 1.5px #E3B458; }
  .sg-pitch { margin-top:12px; font-size:14px; line-height:1.7; color:#E6D9BD; }
  .sg-pitch b { color:#F6D58E; }
  .sg-pic { display:block; width:100%; border-radius:12px; margin-top:12px; box-shadow:0 8px 20px rgba(0,0,0,.35); }
  .sg-stars { display:flex; justify-content:center; gap:10px; margin-top:10px; }
  .sg-stars button { font-size:30px; color:#6F6857; line-height:1; }
  .sg-stars button.on { color:#F6D58E; }
  .sg-code { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:12px 14px; border-radius:14px; border:1px dashed rgba(227,180,88,.45); background:rgba(227,180,88,.06); }
  .sg-code b { font-size:24px; letter-spacing:3px; font-variant-numeric:tabular-nums; color:#F6D58E; }
  .sg-code button { background:#E3B458; color:#2A1C05; font-weight:800; font-size:14px; padding:7px 14px; border-radius:10px; font-family:-apple-system,"PingFang SC",sans-serif; }
  .sg-mem { margin-top:10px; font-size:13.5px; color:#D9CCB0; line-height:1.9; }
  /* the 战局 page */
  .sgw { flex:1; overflow-y:auto; padding:6px 16px calc(24px + env(safe-area-inset-bottom)); }
  .sgw .sg { margin-bottom:12px; }
  .sgw .map { display:block; margin:10px auto 0; }
  .sgw .lg { font-size:12px; color:#A99F8C; margin-top:6px; }
  .sgw .rk { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
  .sgw .rk:first-of-type { border-top:0; }
  .sgw .rk .no { width:18px; text-align:center; font-weight:900; color:#6F6857; }
  .sgw .rk .no.g { color:#E3B458; }
  .sgw .rk .t { flex:1; min-width:0; }
  .sgw .rk .t b { font-size:15.5px; }
  .sgw .rk .t small { display:block; font-size:12px; color:#A99F8C; line-height:1.45; }
  .sgw .rk .c { text-align:right; font-weight:900; font-size:16px; white-space:nowrap; }
  .sgw .rk .c small { display:block; font-size:12px; font-weight:700; }
  .sgw .story { margin-top:10px; padding:12px 14px; border-radius:14px; background:linear-gradient(180deg,#F2E4C4,#E4CFA2); color:#3A2A14; font-size:13.5px; line-height:1.65; }
  .sgw .story b { display:block; font-size:15px; margin-bottom:2px; }
  .sg-lock { text-align:center; padding:26px 18px; }
  .sg-lock b { display:block; font-size:18px; margin-bottom:6px; }

  /* 班级桌面 (10-10): the settings sheet's preview is the classroom panel itself (design board C), drawn from the same
     data at phone size. Every size is in --u, one pixel of the 700-wide panel; the colours are the program's */
  #deskSheet .seg button, #hwSheet .seg button { flex:1; padding:8px 4px; font-size:14px; }
  .dk-onrow { margin-top:16px; padding:12px 14px; border:0; border-radius:14px; background:var(--bg); }
  /* 10-13: 常用 opens the sheet scrolled to a section: the class and ✕ stay at the top in a slim bar (it takes no room until
     the title has scrolled away; the sheet's padding is 20px) */
  .dk-bar { position:sticky; top:-20px; z-index:3; height:0; margin:-20px -20px 20px; }
  .dk-bar > div { position:absolute; left:0; right:0; top:0; height:54px; display:flex; align-items:center; justify-content:center; padding:0 54px;
    background:var(--card); border-bottom:1px solid var(--line); opacity:0; visibility:hidden; transition:opacity .15s, visibility 0s .15s; }
  .dk-bar.on > div { opacity:1; visibility:visible; transition:opacity .15s; }
  .dk-bar b { min-width:0; font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* … and when that class's 班级桌面 is off, a note at the top of the section, with the switch right in it */
  .dk-offnote { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--warm-soft); color:#8A5300;
    font-size:13px; font-weight:600; line-height:1.5; }
  .dk-offnote span { flex:1; min-width:0; }
  .dk-offnote .switch { flex:none; }
  @media (prefers-color-scheme: dark) { .dk-offnote { color:#FCD34D; } }
  .dk-onrow .t small { display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--sub); }
  .dk-wrap { --u:.45px; margin-top:12px; padding:0 0 0 var(--strip, 34px); border-radius:10px; position:relative; overflow:hidden; display:flex;
    background:#C9DCE8 url(/desk-bg.jpg) left center / cover no-repeat; transition:opacity .2s; }   /* the panel docked on the right of a desktop */
  .dk-wrap > .dk { flex:1; min-width:0; }   /* 10-13: --strip, the desktop beside it: wider at 小, narrower at 大 (drawDkPreview) */
  .dk-wrap::before { content:''; position:absolute; left:calc(var(--strip, 34px) / 2 - 5px); top:16px; width:10px; height:10px; border-radius:3px; background:rgba(255,255,255,.32);
    box-shadow:0 18px 0 rgba(255,255,255,.32), 0 36px 0 rgba(255,255,255,.32); }   /* a hint of desktop icons */
  .dk-wrap.left { padding:0 var(--strip, 34px) 0 0; background-position:right center; }   /* 10-13: 位置「左边」, the same desktop mirrored */
  .dk-wrap.left::before { display:none; }   /* the icons are under the panel there (see dkSideNote) */
  .dk-wrap.off { opacity:.45; }
  .dk-wrap .off-tag { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; padding:8px 14px; border-radius:10px;
    background:rgba(16,22,29,.82); color:#fff; font-size:13.5px; font-weight:650; white-space:nowrap; }
  .dk { --bg:#FFFFFF; --ink:#18202B; --ink2:#3A4250; --sub:#5B6577; --line:#EDF0F4; --hero:#EDF7F2; --hlb:#0B7A55; --hbig:#073F2D;
    --hline:#CFE7DB; --badge:#0B8A5F; --bink:#FFFFFF; --amber:#B45309; --aink:#8A5300;
    background:var(--bg); color:var(--ink); padding:calc(38 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); border-radius:calc(18 * var(--u));
    box-shadow:0 0 calc(14 * var(--u)) rgba(16,24,40,.16); line-height:1.32; overflow:hidden; font-family:"Microsoft YaHei","PingFang SC","HarmonyOS Sans SC",sans-serif; }
  .dk.dark { --bg:#10161D; --ink:#F2F5F8; --ink2:#CBD5E1; --sub:#A9B4C2; --line:#23292F; --hero:#152F2D; --hlb:#6EE7B7; --hbig:#D1FAE5;
    --hline:#1C5345; --badge:#34D399; --bink:#06281C; --amber:#FBBF24; --aink:#FDE68A; box-shadow:0 0 calc(14 * var(--u)) rgba(0,0,0,.32), inset 0 0 0 1px #2C323A; }
  .dk-hd { display:flex; align-items:baseline; gap:calc(14 * var(--u)); }
  .dk-hd b { font-size:calc(26 * var(--u)); font-weight:700; white-space:nowrap; }
  .dk-hd span { flex:1; min-width:0; font-size:calc(18 * var(--u)); color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-hd i { font-style:normal; font-size:calc(30 * var(--u)); font-weight:700; letter-spacing:calc(1 * var(--u)); font-variant-numeric:tabular-nums; }
  .dk-hero { margin-top:calc(24 * var(--u)); padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u)); border-radius:calc(26 * var(--u)); background:var(--hero); }
  .dk-lb { font-size:calc(18 * var(--u)); font-weight:700; letter-spacing:calc(2 * var(--u)); color:var(--hlb); white-space:nowrap; }
  .dk-big { display:flex; align-items:center; gap:calc(20 * var(--u)); margin:calc(4 * var(--u)) 0 0 calc(-4 * var(--u)); font-size:calc(80 * var(--u));
    font-weight:700; line-height:1.15; letter-spacing:calc(4 * var(--u)); color:var(--hbig); white-space:nowrap; }
  .dk-badge { font-size:calc(20 * var(--u)); font-weight:700; line-height:1.3; letter-spacing:0; padding:calc(6 * var(--u)) calc(18 * var(--u)); border-radius:99px;
    background:var(--badge); color:var(--bink); }
  .dk-line { display:flex; margin-top:calc(16 * var(--u)); padding-top:calc(16 * var(--u)); border-top:1px solid var(--hline); }
  .dk-line > span { flex:1; min-width:0; text-align:center; font-size:calc(17 * var(--u)); color:var(--ink); white-space:nowrap; overflow:hidden; }
  .dk-line small { display:block; margin-top:calc(2 * var(--u)); font-size:calc(14 * var(--u)); color:var(--ink2); font-variant-numeric:tabular-nums; }
  .dk-line .done, .dk-line .done small { color:var(--sub); }
  .dk-line .on { font-weight:700; color:var(--hbig); } .dk-line .on small { font-weight:700; color:var(--hlb); }
  .dk-line > i { flex:none; width:1px; margin:calc(2 * var(--u)) 0; background:var(--hline); }
  .dk-hw { margin-top:calc(24 * var(--u)); }
  .dk-h { display:flex; align-items:baseline; justify-content:space-between; font-size:calc(17 * var(--u)); font-weight:700; letter-spacing:calc(3 * var(--u)); color:var(--sub); }
  .dk-h small { font-size:calc(15 * var(--u)); font-weight:400; letter-spacing:0; }
  .dk-rows { margin-top:calc(10 * var(--u)); border-top:1px solid var(--line); }
  /* 10-13 evening: the whole text, as the classroom now shows it, so the subject and 刚更新 sit by its first line; the
     subject column as wide as the day's longest subject needs (--sw, 76 to 112, 95 in the 特大 / 超大 column, Desk.cs SubjectW) */
  .dk-row { display:flex; align-items:flex-start; gap:calc(16 * var(--u)); padding:calc(15 * var(--u)) 0; border-bottom:1px solid var(--line); }
  .dk-row .s { flex:none; width:calc(var(--sw, 76) * var(--u)); height:calc(32.5 * var(--u)); display:flex; align-items:center; gap:calc(9 * var(--u)); font-size:calc(19 * var(--u)); font-weight:700;
    color:var(--ink2); white-space:nowrap; overflow:hidden; }
  .dk-row .s i { flex:none; width:calc(8 * var(--u)); height:calc(8 * var(--u)); border-radius:50%; }
  .dk-row .tx { flex:1; min-width:0; font-size:calc(26 * var(--u)); line-height:1.25; word-break:break-all; }
  .dk-row em { float:right; margin:calc(5 * var(--u)) 0 0 calc(12 * var(--u)); font-style:normal; font-size:calc(13 * var(--u)); font-weight:700; line-height:1.3; padding:calc(3 * var(--u)) calc(10 * var(--u));
    border-radius:99px; background:var(--badge); color:var(--bink); }
  .dk-empty { padding:calc(15 * var(--u)) 0; border-bottom:1px solid var(--line); font-size:calc(19 * var(--u)); color:var(--sub); }
  /* 10-13 evening: 特大 / 超大 with 课表 and 作业 both shown, as the classroom draws them (Desk.cs): the next lesson compact in
     0.4 of the width (no line of the day's lessons, the badge under the subject), today's homework down the rest.
     10-13 night (the owner: 「屏幕越大，显示内容越少」): under the hero, the rest of today's lessons, 待办, 倒数日 and 寄语, in
     the 大 block's type, spaced as Desk.cs LeftColumn draws them (a row 1.5 of the text's line, 1.32 here as there; 26 between
     the blocks). Here not cut to the panel's height: the classroom keeps 待办 > 倒数日 > 今天的课 > 寄语 when short */
  .dk-two { display:flex; align-items:flex-start; gap:calc(40 * var(--u)); margin-top:calc(24 * var(--u)); }
  .dk-two > .dk-lc { flex:0 0 calc(40% - 20 * var(--u)); min-width:0; }
  .dk-lc > .dk-hero { margin-top:0; }
  .dk-lk { margin-top:calc(26 * var(--u)); }
  .dk-lk .h { margin-bottom:calc(8 * var(--u)); font-size:calc(15 * var(--u)); font-weight:700; letter-spacing:calc(3 * var(--u)); color:var(--sub);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-lk .ls { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:calc(16 * var(--u)); font-size:calc(19 * var(--u)); line-height:1.98;
    white-space:nowrap; }   /* the times one column, as wide as the widest (the bold one) */
  .dk-lk .ls small { font-size:inherit; color:var(--sub); font-variant-numeric:tabular-nums; }
  .dk-lk .ls span { overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
  .dk-lk .ls .on { font-weight:700; color:var(--hbig); } .dk-lk .ls small.on { color:var(--hlb); }   /* the hero's lesson, in the hero's colours */
  .dk-lk .it.done, .f2-td .it.done { opacity:.55; text-decoration:line-through; }   /* 1.9.19: ticked off on the classroom screen */
  .dk-lk .it { margin-bottom:.396em; font-size:calc(19 * var(--u)); line-height:1.584; color:var(--ink2); word-break:break-all;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }   /* two lines at most (Desk.cs TodoLines), 1.2 apart */
  .dk-two > .dk-hw { flex:1; min-width:0; margin-top:0; }
  .dk-two .dk-lb { overflow:hidden; text-overflow:ellipsis; }
  .dk-two .dk-big { min-height:calc(92 * var(--u)); overflow:hidden; }
  .dk-two .dk-big.two { display:block; line-height:1.06; }   /* 道德与 / 法治 */
  .dk-bb { margin-top:calc(14 * var(--u)); } .dk-bb .dk-badge { display:inline-block; }
  .dk-bt { display:flex; gap:calc(36 * var(--u)); margin-top:calc(20 * var(--u)); }
  .dk-bt .l { flex:1; min-width:0; } .dk-bt .r { flex:none; width:calc(236 * var(--u)); }
  .dk-bt .r:only-child { flex:1; width:auto; }
  .dk-bt .h { margin-bottom:calc(8 * var(--u)); font-size:calc(15 * var(--u)); font-weight:700; letter-spacing:calc(3 * var(--u)); color:var(--sub); }
  .dk-bt .it { font-size:calc(19 * var(--u)); line-height:1.5; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-n { display:flex; align-items:baseline; gap:calc(6 * var(--u)); font-size:calc(18 * var(--u)); color:var(--aink); }
  .dk-n b { font-size:calc(30 * var(--u)); font-weight:700; line-height:1.3; color:var(--amber); }
  .dk-motto { margin-top:calc(10 * var(--u)); font-family:"Kaiti SC","STKaiti","KaiTi","Kaiti",serif; font-size:calc(19 * var(--u)); line-height:1.4; color:var(--ink2);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .dk-motto.big { margin-top:0; font-size:calc(21 * var(--u)); line-height:1.5; }
  .dk-motto.first { margin-top:0; }
  /* 10-14 (momo): 今日值日 on the 今日 page (show.duty), as Desk.cs 1.9.7 draws it in the bottom block's type: at 小 / 中 / 大
     a block of its own under the homework, each 分工 (grey) with its names (ink) flowing on, 28 between the pairs and 8 inside
     one, a line 1.5 of the text's (DutyFlow: a pair kept together, a name never broken); in the 特大 / 超大 column the first
     block under the hero, a 分工 a row, its names wrapping 1.2 apart beside it (DutyRows: the 分工 at most 0.42 of the column) */
  .dk-dt { margin-top:calc(20 * var(--u)); }
  /* 1.9.26 座位表 (Desk.cs SeatPage) */
  .dk-seat .desk { width:40%; margin:calc(4 * var(--u)) auto calc(14 * var(--u)); padding:calc(6 * var(--u)) 0; text-align:center; border-radius:calc(8 * var(--u)); background:var(--line); font-size:calc(16 * var(--u)); font-weight:700; letter-spacing:calc(6 * var(--u)); color:var(--sub); }
  .dk-seat .sgd { display:grid; gap:calc(6 * var(--u)); }
  .dk-seat .sgd span { min-width:0; padding:calc(7 * var(--u)) 0; text-align:center; border-radius:calc(7 * var(--u)); background:var(--bg); font-size:calc(17 * var(--u)); font-weight:600; white-space:nowrap; overflow:hidden; }
  .dk-seat .sgd span.e { opacity:.35; }
  .dk.dark .dk-seat .sgd span { background:rgba(255,255,255,.06); }
  .dk-dt .h { margin-bottom:calc(8 * var(--u)); font-size:calc(15 * var(--u)); font-weight:700; letter-spacing:calc(3 * var(--u)); color:var(--sub);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-dt .ps { display:flex; flex-wrap:wrap; column-gap:calc(28 * var(--u)); font-size:calc(19 * var(--u)); line-height:1.98; color:var(--ink); }
  .dk-dt .ps > span { min-width:0; max-width:100%; }
  .dk-dt small { margin-right:calc(8 * var(--u)); font-size:inherit; color:var(--sub); white-space:nowrap; }
  .dk-lk .dg { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:calc(16 * var(--u)); font-size:calc(19 * var(--u)); color:var(--ink); }
  .dk-lk .dg.one { grid-template-columns:minmax(0, 1fr); }
  .dk-lk .dg > * { padding-bottom:.396em; line-height:1.584; }   /* a row 1.5 of the line, as a to-do (TodoH) */
  .dk-lk .dg small { font-size:inherit; color:var(--sub); white-space:nowrap; }
  .dk-lk .dg small.w { grid-column:1 / -1; padding-bottom:0; } .dk-lk .dg small.w + span { grid-column:2; }   /* a 分工 wider than its column: the names under it */
  .dk-dt b, .dk-lk .dg b { font-weight:400; white-space:nowrap; }
  /* the settings under the preview: a few direct rows, then folds that open to edit */
  #deskSheet .row { padding:11px 0; }
  #deskSheet .row .seg { flex:none; } #deskSheet .row .seg button { flex:none; padding:6px 12px; }
  #deskSheet .row .seg.dk-look { width:170px; width:min(200px, 100% - 72px); } #deskSheet .row .seg.dk-look button { flex:1; min-width:0; padding:6px 0; white-space:nowrap; }
  /* 10-13: 样式 / 哪边 / 大小 one width. 10-13 evening: wide enough for 大小's five (特大, 超大) on one line, about 36 px a
     button; at 320 px what a 4-字 label leaves (72 = 58 + the gap + 2 to spare; 170 where min() isn't known) */
  #deskSheet .dk-siderow { flex-wrap:wrap; row-gap:0; }   /* 10-13: 左边's hint wraps under the label and the 左边/右边 */
  .dk-sidenote { flex:0 0 100%; margin-top:6px; }
  .dk-show { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 12px; border-bottom:1px solid var(--line); }
  .dk-show button { display:inline-flex; align-items:center; gap:4px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--bg);
    font-size:13.5px; font-weight:600; color:var(--sub); }
  .dk-show button svg { width:13px; height:13px; stroke-width:2.6; display:none; }
  .dk-show button.on { background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 45%, transparent); color:var(--brand-ink); }
  .dk-show button.on svg { display:block; }
  .dk-shownote { flex:0 0 100%; margin-top:2px; line-height:1.55; }   /* 10-14: under the chips (今日值日's how-to, or the program is old) */
  .dk-show .dk-shownote .tt-link { display:inline; margin-left:6px; padding:0; border:0; border-radius:0; background:none; font-size:13.5px; font-weight:650; color:var(--brand-ink); }
  .dk-sec { width:100%; display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); text-align:left; }
  .dk-sec .t { flex:none; font-weight:600; font-size:14.5px; }
  .dk-sec .v { flex:1; min-width:0; text-align:right; font-size:13.5px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-sec .chev { width:18px; height:18px; color:var(--faint); transition:transform .2s; }
  .dk-sec.open { border-bottom-color:transparent; } .dk-sec.open .chev { transform:rotate(180deg); }
  .dk-ed { padding:0 0 14px; border-bottom:1px solid var(--line); }
  .dk-ed.shut { display:none; }
  .dk-ed .field { padding:10px 12px; font-size:15px; }
  .dk-ed .tool-note { margin-top:8px; line-height:1.55; }
  .dk-pair { display:flex; gap:8px; }
  .dk-pair .field { flex:1; min-width:0; }
  .dk-pair .pickdate { flex:none; width:112px; height:auto; min-height:42px; border-radius:12px; font-size:13.5px; }
  .dk-pair .pickdate.set { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft); }
  .dk-pair .del { flex:none; width:28px; color:var(--faint); font-size:17px; }
  .dk-todos .pickdate { width:88px; }
  #dkNotes .pickdate { width:76px; }
  .dk-pair .del.gone, .dk-duty-row .del.gone { visibility:hidden; }
  .dk-pair .pickdate.old { color:#B45309; border-color:#F5C77E; background:var(--warm-soft); }
  @media (prefers-color-scheme: dark) { .dk-pair .pickdate.old { color:#FBBF24; border-color:rgba(251,191,36,.4); } }
  .dk-todos { display:grid; gap:8px; }
  .dk-hwl { margin-top:2px; }
  .dk-hwi { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
  .dk-hwi:last-child { border-bottom:0; }
  .dk-hwi .s { flex:none; display:flex; align-items:center; gap:6px; min-width:3.6em; font-weight:700; font-size:14px; line-height:1.5; }
  .dk-hwi .s i { width:7px; height:7px; border-radius:50%; flex:none; }
  .dk-hwi .m { flex:1; min-width:0; font-size:14.5px; line-height:1.5; word-break:break-word; }   /* (line breaks: hwLines) */
  .dk-hwi .m small { display:block; font-size:12px; color:var(--faint); }
  .dk-hwi button { flex:none; color:var(--sub); font-size:13px; font-weight:600; padding:2px 0 2px 6px; }
  .dk-hwl .empty { padding:12px 0 4px; font-size:13.5px; }
  #deskSheet .tt-label:first-of-type { margin-top:18px; }
  /* 录作业: the classes, the subject, the text; what this teacher sent today under it */
  .hw-cls { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .hw-cls button { display:inline-flex; align-items:center; gap:5px; padding:9px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card);
    font-size:14.5px; font-weight:600; color:var(--ink); }
  .hw-cls button svg { width:15px; height:15px; stroke-width:2.6; display:none; }
  .hw-cls button.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); font-weight:700; }
  .hw-cls button.on svg { display:block; }
  .hw-cls button.lock { color:var(--faint); }
  .hw-subs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:8px; }
  .hw-subs button { height:42px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); font-size:15px; font-weight:600; color:var(--ink); }
  .hw-subs button.on { border-color:var(--c); color:var(--c); background:color-mix(in srgb, var(--c) 10%, var(--card)); font-weight:750; }
  .hw-subs button.more { color:var(--sub); font-weight:500; }
  #hwOther { margin-top:8px; }
  #hwText { margin-top:8px; min-height:84px; font-size:17px; }
  .hw-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .hw-quick button { padding:6px 11px; border-radius:10px; background:var(--bg); color:var(--ink2, var(--sub)); font-size:13.5px; font-weight:600; }
  /* 10-20 录作业常用词: this subject's own words first (tinted), then the common ones; 整理 shows an ✕ on each own word */
  .hw-quick button.own { background:var(--brand-soft); color:var(--brand-ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hw-quick button.own i { font-style:normal; margin-left:6px; opacity:.7; }
  .hw-quick button.act { background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--sub); font-weight:500; }
  #hwSheet .btn-primary { margin-top:14px; }
  /* 11-02 T11 (班主任 Ignore: 「我收集到了各个科目的作业，不能一整个复制粘贴显示上去吗」): 粘进来的一整段认出几科，
     就分成几条发——一行提示 + 展开的预览（每科一行，可以点掉一条） */
  .hw-split { margin-top:10px; }
  .hw-split-h { display:flex; align-items:center; gap:8px; background:var(--brand-soft); border-radius:12px; padding:10px 12px; }
  .hw-split-h span { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--brand-ink); line-height:1.4; }
  .hw-split-h button { flex:none; height:34px; padding:0 12px; border-radius:10px; background:var(--brand); color:#fff; font-size:14px; font-weight:700; white-space:nowrap; }
  .hw-split-list { margin-top:8px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
  .hw-split-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; }
  .hw-split-row + .hw-split-row { border-top:1px solid var(--line); }
  .hw-split-row b { flex:none; min-width:3em; padding-top:1px; font-size:14px; font-weight:700; color:var(--c, var(--brand-ink)); }
  .hw-split-row p { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.45; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
  .hw-split-row.over p, .hw-split-row.over em { color:var(--danger); }
  .hw-split-row em { font-style:normal; display:block; margin-top:2px; font-size:12px; }
  .hw-split-row button { flex:none; width:28px; height:28px; border-radius:50%; background:var(--bg); color:var(--sub); font-size:15px; line-height:1; }
  .hw-mic { width:100%; height:46px; margin-top:10px; border-radius:12px; border:1.5px dashed var(--brand); background:var(--card); color:var(--brand-ink);
    display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:700; touch-action:none;
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:background .15s, border-color .15s; }
  .hw-mic svg { width:18px; height:18px; }
  .hw-mic.on { border-style:solid; border-color:var(--danger); background:color-mix(in srgb, var(--danger) 9%, var(--card)); color:var(--danger); }
  .hw-mic.busy { border-style:solid; border-color:var(--line); color:var(--sub); }
  .hw-mic.busy::before { content:''; width:13px; height:13px; flex:none; border-radius:50%; border:2px solid var(--line); border-top-color:var(--brand); animation:spin .8s linear infinite; }
  .hw-mic.busy svg { display:none; }
  .hw-mine { margin-top:6px; }
  .hw-post { padding:11px 0; border-bottom:1px solid var(--line); }
  .hw-post:last-child { border-bottom:0; }
  .hw-post .top { display:flex; align-items:center; gap:8px; }
  .hw-post .top b { flex:1; min-width:0; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hw-post .top button { flex:none; color:var(--brand-ink); font-weight:650; font-size:13px; padding:2px 0 2px 10px; }
  .hw-post .top button.del { color:var(--sub); }
  .hw-post .tx { margin-top:3px; font-size:14.5px; line-height:1.5; word-break:break-word; }
  .hw-post .tm { margin-top:2px; font-size:12px; color:var(--faint); }
  .hw-post.editing { background:var(--brand-soft); margin:0 -10px; padding:11px 10px; border-radius:12px; }
  /* 课堂: the class's homework today, as the panel shows it */
  .hwc-list { margin-top:10px; }
  .hwc-acts { display:flex; gap:10px; margin-top:12px; } .hwc-acts .btn { margin:0; } .hwc-acts #hwCardGo { flex:1; } .hwc-acts #hwCardTodo { flex:none; width:auto; padding-left:18px; padding-right:18px; }   /* 10-26: + 加待办 */
  .hwc-row { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:14.5px; line-height:1.5; }
  .hwc-row .s { flex:none; display:flex; align-items:center; gap:6px; width:3.9em; font-weight:700; font-size:14px; }
  .hwc-row .s i { width:7px; height:7px; border-radius:50%; flex:none; }
  /* 10-29 作业记录 */
  .hwl-day { margin-top:14px; font-weight:750; font-size:15px; } .hwl-day small { margin-left:6px; font-weight:500; color:var(--sub); font-size:13px; }
  #hwCardLog { margin-right:2px; }
  .hwc-row .tx { flex:1; min-width:0; word-break:break-word; }
  /* the pages (10-10): which one the classroom shows now; the folds for 值日表, 公告喜报 and the times they come up */
  .dk-pages { margin-top:14px; }
  .dk-pages .t { display:block; margin-bottom:8px; font-weight:600; font-size:14.5px; }
  .dk-pg { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px; padding:3px; border-radius:12px; background:var(--bg); }
  .dk-pg button { padding:8px 2px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--sub); white-space:nowrap; }
  .dk-pg button.on { background:var(--brand); color:#fff; box-shadow:0 1px 3px rgba(16,24,40,.12); }
  .dk-pg button.na { opacity:.45; }
  .dk-pg.five button { padding:8px 0; font-size:12.5px; letter-spacing:-.2px; }
  .dk-pgnote { margin:6px 0 2px; }
  .dk-lbl { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 6px; font-size:13px; font-weight:650; color:var(--sub); }
  .dk-lbl .muted { font-size:12px; font-weight:500; text-align:right; }
  .dk-days { display:flex; gap:6px; margin:12px 0 2px; }
  .dk-days button { flex:1; height:34px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:13.5px; font-weight:650; color:var(--sub); position:relative; }
  .dk-days button.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
  .dk-days.rot { flex-wrap:wrap; }   /* 按周轮流: up to 12 groups, six a row */
  .dk-days.rot button { flex:0 0 calc((100% - 30px) / 6); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 2px; }
  .dk-days button.has::after { content:''; position:absolute; top:4px; right:5px; width:5px; height:5px; border-radius:50%; background:var(--brand); }
  .dk-duty-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
  .dk-duty-row span { flex:none; width:7em; padding-left:2px; font-size:13.5px; font-weight:600; }
  .dk-duty-row .field { flex:1; min-width:0; }
  .dk-duty-row .field.dk-task { flex:none; width:7em; padding:10px 8px; font-size:14px; font-weight:600; }
  .dk-duty-row .del, .dk-duty-row i { flex:none; width:24px; color:var(--faint); font-size:16px; }
  .dk-duty-row.blank .dk-task { background:var(--card); border-style:dashed; }
  .dk-duty-row.blank .dk-who { opacity:.5; }
  /* 10-14: five 值日表 modes don't fit across a phone: 每周一样 · 单双周 on a row, the three 轮流 under them */
  #deskSheet #dkDutySplit { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); }
  #deskSheet #dkDutySplit button { grid-column:span 3; padding:8px 2px; white-space:nowrap; }
  #deskSheet #dkDutySplit button:nth-child(n+3) { grid-column:span 2; }
  /* 10-14: 按学号轮流: 全班人数, 每天几人, 今天从几号开始 (a label and a small box each); the next days under them */
  .dk-seq-row { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14.5px; font-weight:600; }
  .dk-seq-row > span:first-child { flex:1; min-width:0; }
  .dk-seq-row i { flex:none; width:1.1em; font-style:normal; color:var(--sub); }
  #dkSeq .field { flex:none; width:64px; padding:9px 4px; text-align:center; font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; }
  .dk-seq-now { margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--sub); }
  .dk-seq-now span { white-space:nowrap; } .dk-seq-now b { font-weight:700; color:var(--ink); }
  .dk-seq-now i { margin:0 6px; font-style:normal; color:var(--faint); }
  .dk-duty-row.only .field.dk-task { flex:1; width:auto; }   /* 按学号: a 分工 a row, no names beside it */
  #dkSeqListNote:empty { display:none; }
  #dkCheer .field { margin-top:8px; } #dkCheer .field:first-child { margin-top:0; }
  .dk-cheer-row { display:flex; gap:10px; margin-top:10px; align-items:center; }
  .dk-cheer-row span { flex:none; font-size:14px; font-weight:600; }
  .dk-cheer-row .seg { flex:1; } .dk-cheer-row .seg button { flex:1; padding:7px 4px; font-size:13.5px; }
  .dk-cheer-go { width:100%; margin-top:10px; padding:11px; }
  .dk-cheer-now { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:9px 12px; border-radius:12px; background:var(--warm-soft); color:#8A5300; font-size:13.5px; font-weight:600; }
  .dk-cheer-now span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dk-cheer-now button { flex:none; color:inherit; font-weight:650; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
  @media (prefers-color-scheme: dark) { .dk-cheer-now { color:#FCD34D; } }
  .dk-auto .row { padding:10px 0; }
  .dk-auto .row .t small, [data-ed="bday"] .row .t small { display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--sub); }
  #deskSheet .dk-ed .tt-clear { margin-top:10px; }
  /* the other pages in the preview (boards D1, D2, D4), sizes in --u as above */
  .dk { --hsub:#3D6B57; --cheer:#FFF4DE; --clb:#8A5300; --cink:#5C3B00; --cbig:#7A3E00; --down:#B4232A; }
  .dk.dark { --hsub:#86BEA5; --cheer:#33260E; --clb:#FCD34D; --cink:#FDE68A; --cbig:#FBBF24; --down:#FCA5A5; }
  .dk-rl { margin-top:calc(6 * var(--u)); font-size:calc(23 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dk-rs { display:flex; gap:calc(28 * var(--u)); margin-top:calc(16 * var(--u)); padding-top:calc(16 * var(--u)); border-top:1px solid var(--hline);
    font-size:calc(17 * var(--u)); color:var(--hsub); white-space:nowrap; }
  .dk-rs .c { margin-left:auto; }
  .dk-sg i { flex:none; width:calc(34 * var(--u)); height:calc(34 * var(--u)); border-radius:calc(8 * var(--u)); display:flex; align-items:center; justify-content:center;
    color:#fff; font-style:normal; font-size:calc(18 * var(--u)); font-weight:700; }
  .dk-sg .nm { flex:none; width:calc(120 * var(--u)); font-size:calc(21 * var(--u)); white-space:nowrap; overflow:hidden; }
  .dk-sg.me .nm { font-weight:700; }
  .dk-sg .sc { flex:1; font-size:calc(26 * var(--u)); white-space:nowrap; } .dk-sg .sc small { margin-right:calc(16 * var(--u)); font-size:calc(17 * var(--u)); color:var(--sub); }
  .dk-sg .sc.st { font-size:calc(17 * var(--u)); color:var(--sub); }
  .dk-sg .nt { flex:none; width:calc(54 * var(--u)); text-align:right; font-size:calc(22 * var(--u)); font-weight:700; color:var(--sub); }
  .dk-sg .nt.up { color:var(--hlb); } .dk-sg .nt.dn { color:var(--down); }
  .dk-sg .ct { flex:none; width:calc(92 * var(--u)); text-align:right; font-size:calc(16 * var(--u)); color:var(--sub); }
  .dk-story { margin-top:calc(20 * var(--u)); }
  .dk-story .h { font-size:calc(15 * var(--u)); font-weight:700; letter-spacing:calc(3 * var(--u)); color:var(--sub); }
  .dk-story .t { margin-top:calc(8 * var(--u)); font-family:"Kaiti SC","STKaiti","KaiTi","Kaiti",serif; font-size:calc(19 * var(--u)); line-height:1.5; color:var(--ink2); }
  .dk-story .f { margin-top:calc(8 * var(--u)); font-size:calc(16 * var(--u)); color:var(--sub); }
  .dk-none { margin-top:calc(40 * var(--u)); padding:calc(40 * var(--u)) 0; text-align:center; font-size:calc(19 * var(--u)); color:var(--sub); }
  .dk-wk { --n:5; position:relative; display:grid; grid-template-columns:calc(92 * var(--u)) repeat(var(--n), minmax(0, 1fr)); margin-top:calc(24 * var(--u)); border-bottom:1px solid var(--line); }
  .dk-wk > div { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:calc(60 * var(--u)); border-top:1px solid var(--line);
    font-size:calc(21 * var(--u)); white-space:nowrap; overflow:hidden; }
  .dk-wk > .hd { height:calc(52 * var(--u)); border-top:0; font-size:calc(18 * var(--u)); font-weight:700; color:var(--ink2); }
  .dk-wk > .hd.tc { color:var(--hlb); }
  .dk-wk > .lb { flex-direction:column; align-items:flex-start; line-height:1.3; }
  .dk-wk .lb b { font-size:calc(17 * var(--u)); color:var(--ink2); } .dk-wk .lb small { font-size:calc(14 * var(--u)); color:var(--sub); }
  .dk-wk > .gp { height:calc(34 * var(--u)); justify-content:flex-start; font-size:calc(14 * var(--u)); color:var(--sub); }
  .dk-wk > .tc { border-top-color:var(--hline); }
  .dk-wk > .on { font-weight:700; color:var(--hbig); }
  .dk-wk > .col { position:absolute; z-index:0; top:0; bottom:0; height:auto; border:0; border-radius:calc(18 * var(--u)); background:var(--hero);
    left:calc(92 * var(--u) + var(--k) * (100% - 92 * var(--u)) / var(--n)); width:calc((100% - 92 * var(--u)) / var(--n)); }
  .dk-wk.d7 { --n:7; }   /* 10-17 周六、周日 */
  .dk-wk.d6 { --n:6; }
  .dk-wk.d7 > div { font-size:calc(19 * var(--u)); }
  .dk-wk.d7 > .hd { font-size:calc(17 * var(--u)); }
  .dk-foot { margin-top:calc(16 * var(--u)); font-size:calc(17 * var(--u)); line-height:1.6; color:var(--sub); }
  .dk-du { margin-top:calc(24 * var(--u)); padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)); border-radius:calc(26 * var(--u)); background:var(--hero); }
  .dk-du .big { margin:calc(4 * var(--u)) 0 0 calc(-4 * var(--u)); font-weight:700; line-height:1.15; letter-spacing:calc(4 * var(--u)); color:var(--hbig); white-space:nowrap; }
  .dk-du .grid { display:grid; grid-template-columns:1fr 1fr; gap:calc(14 * var(--u)) calc(24 * var(--u)); margin-top:calc(16 * var(--u)); padding-top:calc(16 * var(--u)); border-top:1px solid var(--hline); }
  .dk-du .grid.one { grid-template-columns:1fr; }
  .dk-du .grid > div { min-width:0; }
  .dk-du .grid small { display:block; font-size:calc(16 * var(--u)); color:var(--hsub); }
  .dk-du .grid b { display:block; margin-top:calc(2 * var(--u)); font-size:calc(23 * var(--u)); font-weight:400; line-height:1.32; }
  .dk-du .grid:not(.one) > div:last-child:nth-child(odd) { grid-column:1 / -1; }   /* the last 分工 alone in its line: all of it */
  .dkn { display:inline-block; max-width:100%; overflow-wrap:anywhere; }   /* a name: never split (names typed with nothing between them wrap) */
  .dk-list { margin-top:calc(24 * var(--u)); }
  .dk-list .dk-h { padding-bottom:calc(10 * var(--u)); }
  .dk-li { display:flex; align-items:center; gap:calc(16 * var(--u)); padding:calc(15 * var(--u)) 0; border-top:1px solid var(--line); }
  .dk-li:last-child { border-bottom:1px solid var(--line); }
  .dk-li .d { flex:none; width:calc(76 * var(--u)); font-size:calc(19 * var(--u)); font-weight:700; color:var(--ink2); }
  .dk-li .g { flex:none; font-size:calc(26 * var(--u)); white-space:nowrap; }
  .dk-li .w { flex:0 1 auto; min-width:0; margin-left:auto; font-size:calc(17 * var(--u)); line-height:1.32; color:var(--sub);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .dk-li .g.ns { flex:1; min-width:0; white-space:normal; line-height:1.32; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .dk-li .n { flex:1; min-width:0; font-size:calc(24 * var(--u)); line-height:1.25; }
  .dk-li.past .d, .dk-li.past .g { color:var(--sub); }
  .dk-ch { margin-top:calc(24 * var(--u)); padding:calc(30 * var(--u)) calc(32 * var(--u)) calc(26 * var(--u)); border-radius:calc(26 * var(--u)); background:var(--cheer); color:var(--cink); }
  .dk-ch .lb { font-size:calc(18 * var(--u)); font-weight:700; letter-spacing:calc(2 * var(--u)); color:var(--clb); }
  .dk-ch .ld { margin-top:calc(14 * var(--u)); font-size:calc(30 * var(--u)); font-weight:700; }
  .dk-ch .bg { margin:calc(8 * var(--u)) 0 0 calc(-4 * var(--u)); font-weight:700; line-height:1.1; letter-spacing:calc(4 * var(--u)); color:var(--cbig); }
  .dk-ch .bd { margin-top:calc(16 * var(--u)); font-size:calc(22 * var(--u)); line-height:1.5; }
  .dk-ch .by { margin-top:calc(8 * var(--u)); text-align:right; font-size:calc(18 * var(--u)); color:var(--clb); }
  /* ===== v2 kit · stage 1 ===== */
  /* 10-14 (the owner: 「真漂亮第二版」): 班级桌面 as pages and half-screens, drawn the way the 小程序 will draw them: a native
     nav bar (back on the left, nothing on the right), inset groups of 52px cells, the switch, segments, a half-screen with its
     buttons at the bottom, an action sheet, and a snackbar with 撤销. One hero (the desk thumbnail) a screen, no hint lines */
  :root { --hair:rgba(27,34,48,.12); --v2scrim:rgba(10,14,20,.48); --pane-in:.28s cubic-bezier(.2,.8,.2,1); --pane-out:.22s cubic-bezier(.2,.8,.2,1); }   /* 11-06: 半屏、动作表、旧底部弹窗、全页的开和关，只在这里改 */
  @media (prefers-color-scheme: dark) { :root { --hair:rgba(255,255,255,.09); --v2scrim:rgba(0,0,0,.6); } }
  .v2pg { position:fixed; top:0; right:0; bottom:0; left:0; z-index:34; display:flex; flex-direction:column; background:var(--bg); box-shadow:-10px 0 28px rgba(10,14,20,.10);
    transform:translateX(100%); visibility:hidden; transition:transform var(--pane-out), visibility 0s .22s; }
  .v2pg.on { transform:none; visibility:visible; transition:transform var(--pane-in); }
  .v2pg.v2now, .v2pg.v2now.on { transition:none; }        /* 10-15: back from a reload as it stood, no slide-in (v2Pre) */
  .v2pg.v2now .v2body { visibility:hidden; }               /* … its body once drawn */
  .v2pg:not(.on), .v2hs:not(.on), .v2as:not(.on) { pointer-events:none; }   /* one on its way out takes no taps meant for what is under it */
  .v2nav { position:relative; z-index:1; flex:none; display:flex; align-items:center; justify-content:center; height:calc(44px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top); background:var(--bg); transition:box-shadow .15s; }
  .v2nav.line { box-shadow:0 .5px 0 var(--hair); }   /* only once the page under it has scrolled */
  .v2nav h2 { margin:0; max-width:calc(100% - 120px); font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .v2back { position:absolute; left:2px; bottom:0; width:44px; height:44px; display:grid; place-items:center; color:var(--ink); }
  .v2back svg { width:24px; height:24px; stroke-width:2.2; }
  .v2body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }   /* no pull-to-refresh, no scroll chaining */
  .v2in { max-width:560px; margin:0 auto; padding:6px 16px calc(24px + env(safe-area-inset-bottom)); }
  /* (review 10-14) room under the last row for the snackbar (16 + 48 + 8), so a teacher can always scroll it clear (the page
     never scrolls by itself). The hub fits one screen down to 740px tall without it */
  #v2Today .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  @media (max-height:740px) { #v2Hub .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); } }
  /* a group of cells; a cell: icon · title (a grey line under it) · value · chevron, or a switch at the end */
  .v2grp { position:relative; background:var(--card); border-radius:14px; overflow:hidden; margin-bottom:12px; }
  .v2grp:empty { display:none; }
  .v2grp.pv { padding:12px; }
  .v2sk { display:block; margin:0 0 14px; }   /* 10-16 今日页排版 (stack.js: its own styles, in a shadow root) */
  .v2gf.v2skn { margin:-6px 4px 14px; color:#B45309; }
  .dk-wrap.v2thumb.sk { padding:0; }
  .dk-wrap .sk-host { position:absolute; left:0; top:0; right:0; bottom:0; }
  .v2grp.in { margin:14px 0 0; background:var(--bg); }   /* inside a half-screen */
  .v2gh { margin:18px 16px 7px; font-size:13px; color:var(--sub); }
  .v2cell { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:9px 14px 9px 16px; text-align:left; color:var(--ink); }
  .v2cell + .v2cell::before { content:''; position:absolute; top:0; right:0; left:50px; border-top:.5px solid var(--hair); }
  .v2grp.noic .v2cell + .v2cell::before { left:16px; }
  .v2cell.v2rule::before { content:''; position:absolute; top:0; right:0; left:0; border-top:.5px solid var(--hair); }   /* 现在显示, under the thumbnail */
  .v2cell.hide + .v2cell::before { content:none; }
  label.v2cell { cursor:pointer; }
  label.v2cell > input[type=date] { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; border:0; padding:0; cursor:pointer; }   /* the cell opens the calendar */
  button.v2cell:active, label.v2cell:active { background:color-mix(in srgb, var(--ink) 5%, transparent); }
  .v2ic { width:22px; height:22px; color:var(--brand); stroke-width:1.8; }
  .v2t { flex:none; min-width:0; font-size:16px; line-height:1.35; }
  .v2t.grow { flex:1; }
  .v2t small { display:block; margin-top:1px; font-size:12.5px; line-height:1.4; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .v2t small.warn { color:#B45309; }
  .v2t small .dot { display:inline-block; margin:0 5px 0 3px; vertical-align:1px; }   /* 3px in: the online dot's halo whole */
  .v2v { flex:1; min-width:0; text-align:right; font-size:14.5px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .v2v.off { color:var(--faint); }
  .v2v.red { flex:none; color:var(--danger); }
  .v2cell.li .v2t { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* a list line: the text takes the room */
  .v2cell.li .v2v { flex:none; max-width:48%; }
  /* 1.9.19: a 待办 line: its ring on the left ticks it off, the rest opens it */
  .v2cell.v2td { padding:0; gap:0; }
  .v2td .v2tick { position:relative; flex:none; align-self:stretch; width:50px; min-height:52px; display:grid; place-items:center; }
  .v2td .v2tick::before { content:''; width:21px; height:21px; box-sizing:border-box; border-radius:50%; border:2px solid var(--sub); border:2px solid color-mix(in srgb, var(--sub) 75%, transparent); }   /* (the first for browsers without color-mix: 10-18 review) */
  .v2td.done .v2tick::before { border-color:var(--brand); background:var(--brand); }
  .v2td.done .v2tick::after { content:''; position:absolute; left:50%; top:50%; width:9px; height:4.5px; border:solid #fff; border-width:0 0 2px 2px; transform:translate(-50%, -70%) rotate(-45deg); }
  .v2td .v2tick:active::before { transform:scale(.88); }
  .v2td .v2tdb { flex:1; min-width:0; display:flex; align-items:center; gap:12px; min-height:52px; padding:9px 14px 9px 0; text-align:left; color:inherit; }
  .v2td .v2tdb:active { background:color-mix(in srgb, var(--ink) 5%, transparent); }
  .v2td.done .v2t { color:var(--sub); text-decoration:line-through; }
  .v2gh small { margin-left:8px; font-size:12.5px; font-weight:400; color:var(--sub); letter-spacing:0; }
  .v2chev { width:16px; height:16px; color:var(--faint); stroke-width:2.2; margin-left:-4px; }
  /* 11-07 #234 (Xu: 「今日页里面的按钮太多了，看的头晕…收纳到下一级选项里」): 显示设置, last on 今日页, folded as 课堂's tools are: it opens in place and this phone remembers. Its chevron is the rows' own (same column, size, colour), pointing down */
  .v2fold { scroll-margin-top:12px; }
  .v2fold > button .v2chev { transition:transform .2s; }
  .v2fold.open > button .v2chev { transform:rotate(180deg); }
  #v2TodayS { display:none; position:relative; overflow:hidden; }
  .v2fold.open #v2TodayS, .v2fold.closing #v2TodayS { display:block; }
  #v2TodayS::before { content:''; position:absolute; top:0; right:0; left:16px; border-top:.5px solid var(--hair); }
  .v2cell.link { justify-content:center; gap:8px; color:var(--brand-ink); font-size:16px; font-weight:600; }
  .v2cell.link svg { width:18px; height:18px; stroke-width:2.2; }
  .v2cell .switch { flex:none; }
  .v2cell .switch.v2dis { opacity:.45; }
  .v2cell .v2skel { visibility:hidden; }
  .v2pv { padding:2px 12px 12px; }
  /* the classroom desk as a picture: wallpaper, the panel at its side and size (drawDkPreview with share / ratio), cut at the box */
  /* 10-16: the 收起 handle on the picture, at the height picked (v2ThumbTab), as on the classroom screen */
  .dk-tabh { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1px; width:15px; padding:5px 0 6px;
    border-radius:6px 0 0 6px; background:#FFFFFF; color:#5B6577; font-size:8.5px; line-height:1.1; font-weight:600; box-shadow:-2px 1px 5px rgba(16,24,40,.16); pointer-events:none; }
  .dk-tabh svg { width:8px; height:8px; stroke-width:2.6; margin-bottom:1px; }
  .dk-tabh.left { border-radius:0 6px 6px 0; box-shadow:2px 1px 5px rgba(16,24,40,.16); }
  .dk-tabh.left svg { transform:rotate(180deg); }
  .dk-tabh.dark { background:#1B2028; color:#AEB6C2; }
  .dk-wrap.v2thumb { margin:0; padding:8px 8px 0 var(--strip, 30px); align-items:flex-start; transition:opacity .2s, filter .2s;
    -webkit-text-size-adjust:100%; text-size-adjust:100%; }   /* the phone's font size (微信 字体大小) doesn't reach the classroom screen */
  .dk-wrap.v2thumb.left { padding:8px var(--strip, 30px) 0 8px; }
  .dk-wrap.v2thumb.off { opacity:.62; filter:saturate(.35); }
  .dk-wrap.v2thumb::before { left:10px; top:12px; width:12px; height:12px; background:rgba(255,255,255,.4);
    box-shadow:0 20px 0 rgba(255,255,255,.4), 0 40px 0 rgba(255,255,255,.4), 0 60px 0 rgba(255,255,255,.4); }   /* the icons at the desktop's left edge */
  #v2LookPv { margin-bottom:14px; }
  /* segments: the app's .seg, one row across */
  .v2seg button, .v2seg label { flex:1; min-width:0; padding:8px 2px; font-size:14px; font-weight:600; color:var(--sub); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:8px; }
  .v2seg button.on, .v2seg label.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.12); }
  .v2seg label { position:relative; cursor:pointer; }
  .v2seg label input { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; border:0; padding:0; cursor:pointer; }
  .v2seg label.on { flex:1.6; }   /* a picked day (10月21日) whole at 360 and at large text; the 2-character ones still fit */
  .v2row { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
  .v2row > span { flex:none; min-width:34px; white-space:nowrap; font-size:15px; color:var(--sub); }   /* (one line at large text) */
  .v2row .v2seg { flex:1; }
  .v2lb { margin:16px 2px 8px; font-size:13px; color:var(--sub); }
  .v2hs .pills { margin-top:10px; }
  .v2hs .pill { min-height:40px; }
  .v2hs .field { font-size:16px; text-overflow:ellipsis; }   /* 16px: iOS doesn't zoom in on it; a long placeholder ends in … */
  .v2fields { display:grid; gap:10px; margin-top:14px; }
  .v2fields .pills { margin:0; }
  .v2note { margin:12px 2px 0; font-size:13.5px; line-height:1.55; color:var(--sub); }
  .stw-t { position:relative; display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:9px; background:var(--bg); font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink); cursor:pointer; }
  .stw-t > input { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; border:0; padding:0; cursor:pointer; font-size:16px; }
  .stw-d { color:var(--faint); }
  .stw-x { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:-6px; border-radius:50%; color:var(--faint); }
  .stw-x svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .stw-add { color:var(--brand, #0E9F6E); font-weight:500; }
  /* 寄语: today's line and the box share one place, the hidden one keeping its room: the sheet doesn't jump between modes */
  .v2mo { display:grid; margin-top:12px; }
  .v2mo > * { grid-area:1 / 1; margin:0; }
  .v2mo > .v2note { margin:0 2px; }
  .v2mo > .v2gone { visibility:hidden; }
  .v2mo-auto { display:flex; align-items:baseline; gap:12px; }   /* 11-08 换一句 at the end of 今天这句 */
  .v2mo-auto > span { flex:1; min-width:0; }
  .v2mo-auto > button { flex:none; margin:-8px -4px; padding:8px 4px; font-size:13.5px; font-weight:600; color:var(--brand-ink); }
  .v2mo-auto > button:disabled { opacity:.45; }
  /* 11-03 T26 (冬禧: 一次写好一个月的寄语): one box a day, its own line breaks kept */
  .v2mo-it { padding:10px 0; border-bottom:.5px solid var(--hair); }
  .v2mo-it:first-child { padding-top:0; }
  .v2mo-it:last-child { border-bottom:0; }
  .v2mo-hd { display:flex; align-items:center; gap:4px; margin:0 2px 6px; }
  .v2mo-hd b { font-size:13px; font-weight:600; color:var(--sub); }
  .v2mo-hd small { margin-right:auto; font-size:12px; color:var(--faint); }
  .v2mo-hd button { padding:3px 7px; font-size:12.5px; font-weight:600; color:var(--brand-ink); border-radius:6px; }
  .v2mo-hd button:disabled { color:var(--faint); opacity:.45; }
  .v2mo-it textarea { min-height:44px; resize:none; font-size:15px; line-height:1.45; }
  .v2mo-it.bad textarea { box-shadow:inset 0 0 0 1px #D9534F; }
  #v2MottoCur { width:100%; margin-top:0; }
  #v2NoteText { min-height:150px; margin-top:0; font-size:15px; line-height:1.5; resize:none; }   /* 11-04 T29 自己写的一段 */
  /* half-screen: ✕ on the left, the title in the middle, the buttons at the bottom over the safe area */
  /* as tall as it needs, up to the nav bar's line (56px from the top) and 720px: 外观 at 360×640 and 发喜报 with a 喜报 up at
     375×812 fit whole (older engines without dvh: 100vh − 72px) */
  .v2hs { position:fixed; left:0; right:0; bottom:0; z-index:37; max-width:560px; margin:0 auto; display:flex; flex-direction:column;
    max-height:80vh; max-height:min(calc(100vh - 72px), 720px); max-height:min(calc(100dvh - 56px), 720px);
    background:var(--card); border-radius:16px 16px 0 0; box-shadow:0 -4px 24px rgba(10,14,20,.12); transform:translateY(105%); visibility:hidden;
    transition:transform var(--pane-out), visibility 0s .22s; }
  .v2hs.on { transform:none; visibility:visible; transition:transform var(--pane-in); }
  /* typing: up at the top of the screen, out of the keyboard's way (some home-screen apps neither shrink the page nor say) */
  .v2hs.kb { top:calc(8px + env(safe-area-inset-top)); bottom:auto; left:8px; right:8px; border-radius:16px; transform:none; transition:none; box-shadow:0 24px 60px rgba(10,14,20,.28); }
  .v2hs-hd { position:relative; z-index:1; flex:none; height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 56px; transition:box-shadow .15s; }
  .v2hs-hd.line { box-shadow:0 .5px 0 var(--hair); }   /* 11-06: only once the body has scrolled */
  .v2hs-hd b { max-width:100%; font-size:17px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .v2hs-hd small { max-width:100%; font-size:12.5px; line-height:1.4; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .v2x { position:absolute; left:6px; top:7px; width:44px; height:44px; display:grid; place-items:center; color:var(--ink); }
  .v2x svg { width:22px; height:22px; stroke-width:2; }
  .v2hs-bd { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 16px 4px; }
  .v2hs-ft { flex:none; display:flex; gap:10px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); transition:box-shadow .15s; }
  .v2hs-ft.line { box-shadow:0 -.5px 0 var(--hair); }   /* only while the body has more under the buttons */
  .v2hs-ft .btn { flex:1; height:50px; margin:0; padding:0 12px; border-radius:12px; font-size:17px; font-weight:600; box-shadow:none; }
  .v2hs-ft .v2btn2 { flex:none; width:auto; min-width:108px; white-space:nowrap; background:var(--bg); color:var(--ink); }   /* a narrow one next to a wide 完成 */
  .v2hs-ft .v2btn2.del { color:var(--danger); }
  #v2Scrim, #v2Scrim2 { position:fixed; top:0; right:0; bottom:0; left:0; z-index:36; background:var(--v2scrim); opacity:0; pointer-events:none; transition:opacity .2s; touch-action:none; }
  #v2Scrim.on, #v2Scrim2.on { opacity:1; pointer-events:auto; }
  /* action sheet: a question, at most 6 choices, 取消 under an 8px gap */
  .v2as { position:fixed; left:0; right:0; bottom:0; z-index:37; max-width:560px; margin:0 auto; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; overscroll-behavior:contain; background:var(--bg); border-radius:16px 16px 0 0; box-shadow:0 -4px 24px rgba(10,14,20,.12);
    transform:translateY(105%); visibility:hidden; transition:transform var(--pane-out), visibility 0s .22s; }
  .v2as.on { transform:none; visibility:visible; transition:transform var(--pane-in); }
  .v2as-al { padding:16px 28px; text-align:center; font-size:14px; line-height:1.55; color:var(--sub); background:var(--card); text-wrap:balance; }
  .v2as-al b { display:block; margin-bottom:2px; font-size:15px; font-weight:600; color:var(--ink); }
  .v2as-it { display:flex; align-items:center; justify-content:center; width:100%; height:56px; padding:0 16px; font-size:17px; color:var(--ink); background:var(--card); border-top:.5px solid var(--hair); }
  .v2as > .v2as-it:first-child, .v2as-gap + .v2as-it { border-top:0; }
  .v2as-it:active { background:color-mix(in srgb, var(--ink) 5%, var(--card)); }
  .v2as-it.on { color:var(--brand-ink); font-weight:600; }
  .v2as-it.danger { color:var(--danger); }
  .v2as-gap { height:8px; }
  .v2as-cx { height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  /* snackbar: what just changed, with 撤销 (6 s) */
  #v2Snack, #qzUndo { position:fixed; left:16px; right:16px; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:50; max-width:528px; margin:0 auto; display:flex; align-items:center; gap:10px;
    min-height:48px; padding:6px 6px 6px 14px; border-radius:12px; background:#252B34; color:#fff; font-size:14.5px; box-shadow:0 8px 24px rgba(0,0,0,.18);
    opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s, bottom .24s cubic-bezier(.2,.8,.2,1); }
  #v2Snack.on, #qzUndo.on { opacity:1; transform:none; pointer-events:auto; }
  #v2Snack svg, #qzUndo svg { flex:none; width:18px; height:18px; color:#7EE2BB; stroke-width:2.4; }
  #v2Snack span, #qzUndo span { flex:1; min-width:0; white-space:pre-line; line-height:1.35; overflow:hidden; }   /* 教室桌面还没打开 on a line of its own */
  #v2Snack button, #qzUndo button { flex:none; height:44px; padding:0 12px; color:#7EE2BB; font-weight:650; }
  @media (prefers-color-scheme: dark) {
    .v2t small.warn { color:#FBBF24; }
    .v2pg .switch:not(.on), .v2hs .switch:not(.on) { background:#39424D; }
    .v2seg { background:#232A33; } .v2seg button.on, .v2seg label.on { background:#39424D; }
    .v2grp.in { background:#232A33; }
    /* one sunken tone in a half-screen, as the segments and inset groups (the page's #0E1216 looked like holes in the sheet) */
    .v2hs .field:not(:focus), .v2hs .pill:not(.on), .v2hs-ft .v2btn2, .sheet .field:not(:focus), .sheet .pill:not(.on) { background:#232A33; border-color:#232A33; }
    .v2seg label input, label.v2cell > input[type=date] { color-scheme:dark; }   /* the calendar */
    #v2Snack, #qzUndo { background:#E9EDF3; color:#1B2230; } #v2Snack svg, #v2Snack button, #qzUndo svg, #qzUndo button { color:#0B8A5F; }
    .ask .box { background:#1E242C; box-shadow:0 0 0 .5px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.6); } .ask .no { background:#2A323C; }   /* 11-06: 压在半屏上也分得清 */
  }
  /* ===== v2 · stage 2: 课表 (10-15) ===== */
  /* the grid is the timetable: 节 + 周一…周五, every cell a 46px tap target (343px wide at 375); a draft's unclear cells amber */
  :root { --chip:#F1F3F7; --tint:#E9F6F0; --warm-ink:#92400E; --own-ink:#B5541D; }
  @media (prefers-color-scheme: dark) { :root { --chip:#232A33; --tint:#10281F; --warm-ink:#FBBF24; --own-ink:#F2A46E; } }
  #v2Tt .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }   /* the snackbar's room, as 今日页 */
  #v2Tt.draft .v2in { padding-bottom:20px; }
  /* a draft's buttons under the page: a narrow 重拍 and a wide 用这张课表 */
  .v2pg-ft { flex:none; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--bg); box-shadow:0 -.5px 0 var(--hair); }
  .v2pg-ft .btn { flex:1; height:50px; margin:0; padding:0 12px; border-radius:12px; font-size:17px; font-weight:600; box-shadow:none; }
  .v2pg-ft .v2btn2 { flex:none; width:108px; background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 .5px var(--hair); }
  /* what was read (a draft), a photo being read, one that wasn't, no timetable yet */
  .v2tint { background:var(--tint); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
  .v2tint > b { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:650; line-height:1.35; }
  .v2tint > span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--sub); }
  /* 10-22 调休: the days picked, each with 改 / 取消 */
  #v2TtAdjList .v2cell .v2t small { display:block; }
  #v2Tt [data-v2="adj"] .v2t small { white-space:normal; overflow:visible; text-overflow:clip; }   /* (its line in full) */
  #v2Tt [data-v2="adj"] .v2v { flex:none; max-width:42%; }
  #v2TtAdjList .v2cell button { flex:none; padding:6px 10px; font-size:14px; font-weight:600; color:var(--brand-ink); }
  #v2TtAdjList .v2cell button.del { color:var(--sub); }
  .v2tint > b svg { flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:var(--brand); color:#fff; stroke-width:3; }
  .v2tint > b i.spin { flex:none; width:18px; height:18px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color:var(--brand); animation:spin .8s linear infinite; }
  .v2tint.bad { background:var(--warm-soft); }
  /* 10-29 板块底色 tip (the owner: 「很多老師發現不了這個新功能」): a colour tapped is on the screen at once */
  .v2tint.ttip { position:relative; padding-right:44px; }
  .ttip .sw { display:flex; gap:8px; margin-top:12px; }
  .ttip .sw button { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 7px; border:0; border-radius:12px; background:var(--card, #fff); font:inherit; font-size:13px; color:var(--ink); }
  .ttip .sw i { width:34px; height:22px; border-radius:7px; border:.5px solid rgba(0,0,0,.08); }
  .ttip .x { position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; background:none; color:var(--sub); font-size:20px; line-height:1; }
  .v2tint.bad > b { color:var(--warm-ink); }
  .v2tint .wk { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:.5px solid color-mix(in srgb, var(--brand) 22%, transparent); }
  .v2tint .wk span { flex:1; font-size:13.5px; line-height:1.4; }
  .v2tint .wk.need span { color:var(--warm-ink); font-weight:600; }
  .v2tint .wk .v2seg { flex:none; width:128px; background:color-mix(in srgb, var(--brand) 12%, var(--card)); }
  .v2tint .row2 { display:flex; gap:10px; margin-top:14px; }
  .v2tint .row2 .btn, .v2tint .row2 label.btn { flex:1; height:46px; margin:0; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; font-size:16px; font-weight:600; box-shadow:none; cursor:pointer; }
  .v2tint .row2 .soft { background:var(--card); color:var(--brand-ink); }
  .v2tint .alt { display:block; width:100%; margin-top:10px; padding:6px 0 2px; text-align:center; font-size:14px; font-weight:600; color:var(--brand-ink); }
  /* the grid */
  .v2ttg { padding:12px 10px 0; }
  .v2ttg.wait { opacity:.45; pointer-events:none; }
  .tg-hd, .tg-row { display:grid; grid-template-columns:var(--tl, 44px) repeat(5, minmax(0, 1fr)); gap:5px; align-items:center; }
  /* 10-17 周六、周日: 7 narrower columns, the type a step smaller */
  .v2ttg.d7 .tg-hd, .v2ttg.d7 .tg-row { grid-template-columns:var(--tl, 40px) repeat(7, minmax(0, 1fr)); gap:4px; }
  .v2ttg.d7 .tg-hd .wd { font-size:13px; }
  .v2ttg.d7 .tg-row .c { font-size:14px; padding:0 1px; border-radius:8px; }
  .v2ttg.d7 .tg-row .c.f3 { font-size:11.5px; letter-spacing:-.4px; }
  .v2ttg.d7 .tg-row .c.f4, .v2ttg.d7 .tg-row .c.f5 { font-size:10.5px; letter-spacing:-.3px; white-space:normal; word-break:break-all; line-height:1.15; }
  .v2ttg.d7 .tg-row .c .ln { font-size:8.5px; right:2px; }
  .v2ttg.d7 .tg-gap { margin-left:44px; }
  .tg-hd { margin-bottom:6px; }
  .tg-hd .wd { text-align:center; font-size:13.5px; font-weight:600; color:var(--sub); padding:3px 0 2px; border-radius:8px; }   /* 10-16: a tap = that day's own times */
  .tg-hd .wd:active { background:var(--chip); }
  .tg-tip { display:flex; align-items:center; justify-content:center; gap:3px; margin:0 0 4px calc(var(--tl, 44px) + 5px); font-size:12.5px; font-weight:600; color:var(--brand-ink); }   /* 10-16 (the user: 「太隐蔽了」): what the days do */
  .tg-tip svg { flex:none; width:13px; height:13px; transform:rotate(90deg); stroke-width:2.4; }
  .tg-hd .wd.sel { box-shadow:inset 0 0 0 2px var(--brand); }
  .tg-hd .wd.today { color:var(--brand-ink); }
  .tg-hd .wd.today::after { content:""; display:block; width:16px; height:3px; border-radius:2px; background:var(--brand); margin:3px auto 0; }
  .tg-row + .tg-row { margin-top:5px; }
  .tg-row .tm { height:46px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 0 0 4px; border-radius:9px;
    font-size:11.5px; line-height:1.25; color:var(--sub); text-align:left; font-variant-numeric:tabular-nums; }
  .tg-row .tm em { font-style:normal; font-size:15px; font-weight:700; color:var(--ink); }
  .tg-row .tm.named span { white-space:normal; }   /* 10-15: a period's own name (早读, 延时服务): small, two lines at most */
  .tg-row .tm em.nm { display:block; font-size:11px; line-height:1.15; font-weight:700; word-break:break-all; text-wrap:balance; }
  .tg-row .tm span { display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
  .tg-row .tm small { font-size:10px; font-weight:600; color:var(--brand-ink); }   /* a lesson of its own length: 8 20分 */
  .tg-row .tm.amb, .tg-row .tm.amb em { color:var(--warm-ink); }
  .tg-row .tm:active { background:var(--chip); }
  .tg-row .tm.sel { box-shadow:inset 0 0 0 2px var(--brand); }
  .tg-row .c { height:46px; min-width:0; display:grid; place-items:center; padding:0 2px; border-radius:9px; background:var(--chip); color:var(--ink);
    font-size:15px; font-weight:500; line-height:1.2; white-space:nowrap; overflow:hidden; }
  .tg-row .c { position:relative; }
  .tg-row .c .ln { position:absolute; top:2px; right:4px; font-size:9.5px; font-weight:700; line-height:1; color:var(--brand-ink); }   /* that day's own length */
  .tg-row .c .ln.at { left:3px; right:3px; text-align:center; color:var(--own-ink); }   /* 10-16: that day's own time (and length) */
  .tg-row .c.f3 { font-size:13px; }
  .tg-row .c.f4 { font-size:11.5px; letter-spacing:-.3px; }
  .tg-row .c.f5 { font-size:11px; white-space:normal; word-break:break-all; }
  .tg-row .c.no { color:var(--faint); }
  .tg-row .c.td { background:color-mix(in srgb, var(--brand) 8%, var(--chip)); }
  .tg-row .c.amb { background:var(--warm-soft); color:var(--warm-ink); box-shadow:inset 0 0 0 1.5px var(--warm); font-weight:600; }
  .tg-row .c.fixed { box-shadow:inset 0 0 0 2px var(--brand); }
  .tg-row .c.sw { box-shadow:inset 0 0 0 2px var(--own-ink); }   /* 10-22 临时换课: this one time only */
  .tg-row .c .swt { position:absolute; left:2px; right:2px; bottom:2px; text-align:center; font-size:9.5px; font-weight:700; line-height:1; color:var(--own-ink); }
  .v2ttg.d7 .tg-row .c .swt { font-size:8.5px; }
  .tg-row .c.sel { background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand); }
  .tg-row .c.two { display:block; padding:6px 0 0 6px; text-align:left; font-size:12px; line-height:1.35; }
  .tg-row .c.two i { font-style:normal; font-size:10px; color:var(--sub); margin-right:3px; }
  .tg-row .c:active { filter:brightness(.96); }
  .tg-gap { display:flex; align-items:center; gap:8px; margin:9px 0 4px 49px; font-size:11.5px; color:var(--faint); }
  .tg-gap::before, .tg-gap::after { content:""; flex:1; border-top:.5px dashed var(--line); }
  .v2ttg > .v2cell.link { margin:12px -10px 0; width:calc(100% + 20px); border-top:.5px solid var(--hair); }
  .v2ttg > .v2cell.link::before { content:none; }
  .v2tthint { margin:-4px 4px 14px; font-size:12.5px; line-height:1.5; color:var(--sub); }
  .v2skelg { height:420px; border-radius:9px; background:linear-gradient(var(--chip) 0 0) 49px 0 / calc(100% - 49px) 100% no-repeat; opacity:.6; margin-bottom:12px; }
  /* the subject picker: a guess, the palette (the colours as on the classroom desk), 单双周 */
  .v2ttguess { display:flex; align-items:center; gap:12px; margin:2px 0 14px; }
  .v2ttguess span { flex:none; font-size:14px; color:var(--sub); }
  .v2ttguess button { flex:1; height:52px; min-width:0; border-radius:12px; background:var(--brand); color:#fff; font-size:20px; font-weight:650; letter-spacing:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .v2ttwk { margin-bottom:12px; }
  .v2ttwk button b { font-weight:700; color:var(--ink); }
  .v2ttpal { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
  .v2ttpal button { height:42px; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 4px; border-radius:10px; background:var(--chip);
    font-size:15.5px; color:var(--ink); white-space:nowrap; overflow:hidden; }
  .v2ttpal button.on { background:var(--brand-soft); color:var(--brand-ink); box-shadow:inset 0 0 0 1.5px var(--brand); font-weight:600; }
  .v2ttpal i { flex:none; width:7px; height:7px; border-radius:50%; background:#A3AAB8; }
  .v2ttpal i.k0 { background:#C0262D; } .v2ttpal i.k1 { background:#1D4ED8; } .v2ttpal i.k2 { background:#6D28D9; } .v2ttpal i.k3 { background:#0B7A55; }
  .v2ttpal i.k4 { background:#C2410C; } .v2ttpal i.k5 { background:#0E7490; } .v2ttpal i.k6 { background:#BE185D; } .v2ttpal i.k7 { background:#A16207; }
  .v2ttown { display:flex; gap:8px; margin-bottom:12px; }
  .v2ttown .field { flex:1; min-width:0; margin:0; }
  .v2ttown .btn { flex:none; width:72px; height:auto; margin:0; border-radius:12px; box-shadow:none; }
  .v2hs-ft .v2btn2.wide { flex:1; width:auto; }
  /* 提醒设置: a subject and what to bring, a line each */
  .v2ttnote .v2t { flex:none; width:72px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 1.9.19: a 分工 and, under it, who does it every day */
  .v2tkfx { align-items:flex-start; } .v2tkfx .v2t { padding-top:9px; } .v2tkfx .v2ttclr { margin-top:4px; }
  .v2tkin { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .v2tkin input.fx { height:32px; padding:0 10px; border-radius:9px; background:var(--bg); }
  .v2tkin input.fx::placeholder { color:var(--sub); font-size:14px; }
  .v2tkin .fxrow { display:flex; align-items:center; gap:8px; } .v2tkin .fxrow > span { flex:none; font-size:13px; color:var(--sub); } .v2tkin .fxrow input.fx { flex:1; min-width:0; }
  .v2tkin .fxadd { align-self:flex-end; border:0; background:none; padding:2px 0; font-size:13px; color:var(--sub); }
  /* 11-02 T33 (昭野): 每天固定 filled with 3+ names is usually meant for 各组; say so and move them with one tap */
  .v2tkin .fxhint { margin-top:-2px; font-size:12px; line-height:1.45; color:var(--sub); }
  .v2tkin .fxwarn { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:7px 10px; border-radius:9px; background:var(--warm-soft); color:#B45309; font-size:12.5px; line-height:1.5; }
  .v2tkin .fxwarn button { border:0; background:none; padding:0; font-size:13px; font-weight:650; color:#B45309; text-decoration:underline; }
  @media (prefers-color-scheme: dark) { .v2tkin .fxwarn, .v2tkin .fxwarn button { color:#FBBF24; } }
  .v2fr.fixed b { color:var(--sub); } .v2fr.fixed { opacity:.85; }
  .v2ttnote input { flex:1; min-width:0; height:34px; padding:0; border:0; background:transparent; color:var(--ink); font-size:16px; text-align:right; outline:none; }
  .v2ttnote select { margin-left:auto; height:34px; border:0; background:transparent; color:var(--sub); font-size:15px; text-align:right; text-align-last:right; outline:none; -webkit-appearance:none; appearance:none; }
  .v2ttnote .v2t.grow { flex:1; }   /* 10-26 这门课提前 */
  .v2ttnote input::placeholder { color:var(--faint); }
  /* 10-22 (the owner: ↑ ↓ 不太顺手): a long press lifts a row, drag it up or down; the ≡ grip drags at once */
  #toolOrdList .v2cell { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; position:relative; background:var(--card); transition:box-shadow .15s, transform .15s; }
  #toolOrdList .v2cell.moving { transition:none; }
  #toolOrdList .v2cell.lift { z-index:2; box-shadow:0 8px 24px rgba(16,24,40,.18); border-radius:12px; transform:scale(1.02); }
  #toolOrdList .grip { flex:none; width:44px; height:40px; display:grid; place-items:center; color:var(--faint); cursor:grab; }
  #toolOrdList .grip svg { width:20px; height:20px; }
  #toolOrdHint { font-size:13px; color:var(--sub); margin:0 4px 10px; }
  .v2ttnote.say input:not(:placeholder-shown) { text-align:left; font-size:15px; }   /* 10-22 a sentence of its own: read from its start */
  label.v2cell > input[type=time] { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0; border:0; padding:0; cursor:pointer; }
  /* 10-16 (the user, on the phone's own clock:「很违和」): our time picker, the 定时通知 wheels, opened under the row it sets */
  .v2cell.tap { cursor:pointer; }
  .v2cell.tap:active { background:color-mix(in srgb, var(--ink) 5%, transparent); }
  .v2cell.tap .v2chev { transition:transform .15s; }
  .v2cell.tap.open .v2chev { transform:rotate(90deg); }
  .v2tp { padding:2px 14px 14px 16px; }
  .v2tp-in { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--sub); }
  .v2tp-in span { flex:1; }
  .v2tp-in input { width:84px; flex:none; font-size:17px; font-weight:750; text-align:center; padding:5px 8px; font-variant-numeric:tabular-nums; }
  .v2tp .wheels { margin-top:8px; }
  /* 10-16 (the user: the tutorial 「不能白做」, every teacher should find it): 使用教程, a half-screen with the videos */
  .v2gvid { display:flex; justify-content:center; margin:0 0 14px; }
  .v2gvid video { display:block; max-width:100%; max-height:60vh; border-radius:14px; background:#000; }
  .v2gpo { flex:none; width:40px; height:71px; object-fit:cover; border-radius:8px; background:var(--chip); }
  .v2gbook { display:grid; place-items:center; color:var(--brand); }   /* 10-17: the 图文手册 row, a book where the videos have a poster */
  .v2gbook svg { width:22px; height:22px; stroke-width:1.8; }
  .v2cell.on .v2t { color:var(--brand-ink); }
  #v2DuRdP .ck { width:20px; height:20px; flex:none; margin-left:8px; color:var(--brand-ink); }
  #v2Du2RdBox .v2rdel { flex:none; width:40px; height:40px; margin:-6px -8px -6px 0; display:grid; place-items:center; color:var(--sub); }
  #v2Du2RdBox .v2rdel svg { width:16px; height:16px; stroke-width:2.4; }
  .v2tp + .v2cell::before { content:''; position:absolute; top:0; right:0; left:16px; border-top:.5px solid var(--hair); }
  .v2ttclr { position:relative; z-index:1; flex:none; width:32px; height:32px; margin:-6px -8px -6px -4px; display:grid; place-items:center; color:var(--faint); }
  .v2ttclr svg { width:16px; height:16px; stroke-width:2.4; }
  .v2v.own { color:var(--own-ink); font-weight:700; }   /* 10-16: that day's own time */
  #v2TtWdSeg { margin-bottom:14px; }
  #v2TtWdList .v2v { flex:none; }   /* 10-31: 「14:00 · 50 分」 whole (the lesson's name may shorten instead) */
  #v2TtPasteText { min-height:150px; font-size:16px; line-height:1.55; resize:none; }
  .v2file { position:fixed; left:-200px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
  @media (prefers-color-scheme: dark) {
    .v2ttpal i.k0 { background:#FCA5A5; } .v2ttpal i.k1 { background:#93C5FD; } .v2ttpal i.k2 { background:#C4B5FD; } .v2ttpal i.k3 { background:#6EE7B7; }
    .v2ttpal i.k4 { background:#FDBA74; } .v2ttpal i.k5 { background:#67E8F9; } .v2ttpal i.k6 { background:#F9A8D4; } .v2ttpal i.k7 { background:#FCD34D; }
    .v2ttpal i { background:#6F7888; }
    .v2pg-ft .v2btn2 { background:#232A33; box-shadow:none; }
    .v2hs .v2ttpal button:not(.on) { background:#232A33; }
    label.v2cell > input[type=time] { color-scheme:dark; }
  }
  .v2tthint:empty { display:none; }
  .v2lnk { display:block; margin:2px 2px 0; padding:4px 0; text-align:left; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--brand-ink); }   /* 作息: the way to a lesson's own length */
  .v2ttvw { margin:0 0 12px; }   /* 单周 / 双周 over the grid (the 单双周 switch on) */
  .tg-row .c .dd { position:absolute; top:5px; left:5px; width:6px; height:6px; border-radius:50%; background:var(--brand); }   /* the weeks differ */
  .v2ttg > .v2cell.v2ttsw { margin:12px -10px 0; width:calc(100% + 20px); border-top:.5px solid var(--hair); }
  .v2ttg > .v2cell.v2ttsw::before { content:none; }
  .v2ttg > .v2ttsw + .v2cell.link { margin-top:0; }
  #v2Tt.picking .v2in { padding-bottom:62vh; }   /* a half-screen over the grid: its last rows can still come up above it */
  .v2pg-ft label.btn, label.v2as-it { display:flex; align-items:center; justify-content:center; cursor:pointer; }
  /* 本周课表 with more lessons than the picture has room for (20 节): the rows shrink as Desk.cs's WeekRowH shrinks them
     (dkWeekFit sets --wr, at most 60); the type follows the row (CapPx), a short row loses the time under 第 N 节 */
  .dk-wk.fit > div:not(.hd):not(.gp):not(.col) { height:calc(var(--wr) * var(--u)); font-size:calc(min(21, var(--wr) * 0.75) * var(--u)); }
  .dk-wk.fit > .gp { height:calc(var(--wr) * 0.567 * var(--u)); font-size:calc(min(14, var(--wr) * 0.42) * var(--u)); }
  .dk-wk.fit .lb b { font-size:calc(min(17, var(--wr) * 0.62) * var(--u)); }
  .dk-wk .lb b.lg { display:block; font-size:calc(13 * var(--u)); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* 10-15: a long name (上午第一节) */
  .dk-wk.notime .lb small { display:none; }
  /* ===== v2 · stage 3: 值日表 (10-15) ===== */
  #v2Duty .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }   /* the snackbar's room */
  /* 11-02 T12 哪几天值日 (靴靴夜访五月天: 「周五轮空（即不布置值日）吗？」): 周一…周日 in one row, a day tapped off does no
     值日 (its pill plain grey); under it, what that comes to. 周六 / 周日 only when the 课表 has them */
  .v2cell.v2dow { flex-wrap:wrap; row-gap:10px; }
  .v2cell.v2dow .v2dows, .v2cell.v2dow .v2offsay { flex:1 1 100%; }   /* (the two lines under the words, the width of the cell) */
  .v2dows { display:flex; gap:6px; }
  .v2dows button { flex:1 1 0; min-width:0; height:38px; border-radius:10px; background:var(--chip); color:var(--faint); font-size:13px; font-weight:600; }
  .v2dows button.on { background:var(--brand-soft); color:var(--brand-ink); }
  .v2offsay { font-size:12.5px; line-height:1.45; color:var(--sub); }
  .v2pvcap { margin:10px 4px 0; font-size:13px; line-height:1.5; color:var(--sub); }
  .v2tint.one { display:flex; align-items:flex-start; gap:8px; padding:12px 14px; font-size:14px; line-height:1.5; }
  .v2tint.one svg { flex:none; width:18px; height:18px; margin-top:1px; color:var(--brand); stroke-width:2.4; }
  /* a day's (or group's) tags: 第1组, 今天 */
  .v2tag { flex:none; display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:6px; background:var(--chip); color:var(--sub); font-size:12.5px; font-weight:600; white-space:nowrap; }
  .v2tag.on { background:var(--brand-soft); color:var(--brand-ink); }
  .v2cell .v2tags { display:flex; gap:6px; flex:none; }
  /* 排一天 (v2-09): a row a 分工 with its names as tokens; the row names go into is framed */
  .v2frs { display:grid; gap:6px; }
  .v2fr { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 10px; border-radius:12px; cursor:pointer; }
  .v2fr > b { flex:none; width:52px; font-size:15px; font-weight:600; color:var(--ink); }
  .v2fr .toks { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .v2fr .tok { height:32px; display:inline-flex; align-items:center; gap:3px; padding:0 8px 0 10px; border-radius:8px; background:var(--brand-soft); color:var(--brand-ink); font-size:15px; font-weight:600; }
  .v2fr .tok svg { width:14px; height:14px; stroke-width:2.4; opacity:.7; }
  .v2fr .hint { font-size:13.5px; color:var(--faint); }
  .v2fr.on { background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--brand); }
  .v2fr.on .hint { color:var(--brand-ink); }
  .v2duhd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:16px 2px 8px; font-size:13px; color:var(--sub); }
  .v2duhd b { font-size:13px; font-weight:600; color:var(--ink); }
  /* the 全班名单 as chips: in this day (filled), free, elsewhere (outlined, where under it) */
  .v2chips { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
  /* 11-02 T10 (the owner: 「第二份轮值」的字被截掉了): 自己加一页 的板块这一排按字的长短自己排，不再固定 5 列——每颗的字完整，
     高度还是 44（别的 .v2chips 名单格子还是等分 5 列，那里的名字都是 2–3 个字） */
  #v2TabBlk { display:flex; flex-wrap:wrap; gap:6px; }
  #v2TabBlk button { flex:0 0 auto; width:auto; padding:0 13px; }
  /* 1.9.26 没交名单 */
  .v2miss { background:var(--card); border-radius:14px; padding:12px; margin-bottom:12px; }
  .v2miss-h { display:flex; align-items:baseline; gap:8px; margin:-12px; padding:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .v2miss-h b { font-size:16px; } .v2miss-h small { color:var(--sub); font-size:13px; flex:1; }
  .v2miss-h svg { width:16px; height:16px; align-self:center; color:var(--sub); transition:transform .18s ease; }
  .v2miss.open .v2miss-h svg { transform:rotate(90deg); }
  .v2miss-b { margin-top:22px; }
  .v2miss-a { display:flex; gap:6px; margin-top:12px; justify-content:flex-end; }
  .v2miss-a button { color:var(--brand-ink); font-size:14px; font-weight:600; padding:4px 8px; } .v2miss-a button.d { color:var(--danger); }
  .v2chips button.done { text-decoration:line-through; opacity:.45; }
  .v2chips button.other { opacity:.55; }   /* 11-04 T46: another teacher's list: read-only */
  .v2misspre { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  /* 1.9.26 座位表 */
  .v2seatsz { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center; font-size:14px; color:var(--sub); }
  .v2seatsz span { display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap; } .v2seatsz b { min-width:1.4em; text-align:center; color:var(--ink); font-size:17px; }
  .v2seatsz button { width:32px; height:32px; border-radius:50%; background:var(--bg); color:var(--brand-ink); font-size:18px; font-weight:700; }
  .v2seatdesk { width:40%; margin:12px auto 10px; padding:6px 0; text-align:center; border-radius:8px; background:var(--line); color:var(--sub); font-weight:700; letter-spacing:6px; font-size:14px; }
  .v2seatg { display:grid; gap:4px; }
  .v2seatg button { min-width:0; height:38px; padding:0 1px; border-radius:8px; background:var(--bg); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:clip; }
  .v2seatg button.e { color:var(--faint); font-weight:400; }
  .v2seatg button.sel { background:var(--brand); color:#fff; box-shadow:inset 0 0 0 2px var(--brand-strong); }
  .v2seatg span { display:flex; align-items:center; justify-content:center; min-width:0; height:38px; border-radius:8px; background:var(--bg); font-size:inherit; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; }   /* 11-05 T52: a co-teacher's read-only seats */
  .v2seatg span.e { color:var(--faint); font-weight:400; }
  /* 11-02 T6 (产品负责人 11-01「我们这些普通人一眼看上去就知道怎么用」, 回报/T5 方案 A): what the next tap does, the one step
     back, and the 整班换 buttons saying who ends up where */
  .v2seattip { margin:0 0 10px; padding:9px 12px; border-radius:12px; background:var(--brand-soft); color:var(--brand-ink); font-size:13.5px; line-height:1.45; font-weight:600; }
  .v2undo { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:7px 8px 7px 12px; border-radius:12px; background:var(--chip); color:var(--sub); font-size:13px; }
  .v2undo span { flex:1; min-width:0; }
  .v2undo button { flex:none; padding:4px 2px; font-size:13.5px; font-weight:700; color:var(--brand-ink); }
  .v2seatacts { margin-top:10px; }
  .v2seatacts .v2pills { display:flex; flex-wrap:wrap; gap:8px; }
  .v2seatacts .v2pills button { padding:7px 12px; border-radius:999px; background:var(--bg); color:var(--brand-ink); font-weight:600; font-size:14px; }
  .v2seatacts .v2mv { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .v2seatacts .v2mv button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border-radius:12px; background:var(--bg); text-align:left; color:var(--brand-ink); }
  .v2seatacts .v2mv b { font-size:14px; font-weight:600; }
  .v2seatacts .v2mv small { font-size:11.5px; line-height:1.3; color:var(--sub); font-weight:400; }
  .v2seatclr { display:block; margin:12px auto 0; padding:6px; font-size:13.5px; font-weight:600; color:var(--danger); }
  /* 11-02 T7 大屏底部的页: a row a page, the ≡ grip drags it (as 工具's list, see #toolOrdList; the drag is on the grip only,
     so the rows still scroll the sheet and a tap on a switch or on a page of the teacher's own still lands) */
  #v2TabsList .v2cell { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; position:relative; background:var(--card); transition:box-shadow .15s, transform .15s; }
  #v2TabsList .v2cell.moving { transition:none; }
  #v2TabsList .v2cell.lift { z-index:2; box-shadow:0 8px 24px rgba(16,24,40,.18); border-radius:12px; transform:scale(1.02); }
  #v2TabsList .grip { flex:none; width:40px; height:40px; display:grid; place-items:center; color:var(--faint); cursor:grab; touch-action:none; }
  #v2TabsList .grip svg { width:20px; height:20px; }
  #v2TabsList .v2v { flex:none; font-size:13px; color:var(--faint); }
  /* 10-29 自动轮换 (see seatRotCells): a small 座位表 of 下次换完, and the 第几排 rows */
  .v2seatpv { display:grid; gap:3px; padding:10px 10px 12px; border-radius:12px; background:var(--bg); }
  .v2seatpv span { min-width:0; height:24px; line-height:24px; text-align:center; border-radius:5px; background:var(--card); font-size:11px; color:var(--ink); white-space:nowrap; overflow:hidden; }
  .v2seatpv span.e { color:var(--faint); background:transparent; }
  #v2SeatRot .v2deskpv { width:40%; margin:0 auto 6px; padding:2px 0; text-align:center; border-radius:5px; background:var(--line); color:var(--sub); font-size:11px; font-weight:700; letter-spacing:4px; }
  #v2RotZones .v2cell { gap:4px; padding-right:8px; }
  #v2RotZones .v2t { flex:none; font-size:14px; color:var(--sub); }
  #v2RotZones select { flex:none; height:34px; border:0; padding:0 2px; background:transparent; color:var(--ink); font-size:16px; font-weight:600; text-align:center; text-align-last:center; outline:none; -webkit-appearance:none; appearance:none; }
  #v2RotZones .v2zx { flex:none; margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--bg); color:var(--sub); font-size:15px; }
  .v2misspre button, .v2missall button { padding:7px 12px; border-radius:999px; background:var(--bg); color:var(--brand-ink); font-weight:600; font-size:14px; }
  .v2missall { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }   /* 11-04 T37: 全选 / 清空 above the class list */
  .v2missall small { width:100%; font-size:12.5px; line-height:1.4; color:var(--sub); }
  .v2chips button { position:relative; height:44px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 2px; border-radius:10px;
    background:var(--chip); color:var(--ink); font-size:15px; font-weight:500; line-height:1.15; white-space:nowrap; overflow:hidden; }
  .v2chips button.here { background:var(--brand); color:#fff; font-weight:600; }
  .v2chips button.used { background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--faint); }
  .v2chips button small { font-size:10px; font-weight:500; color:var(--faint); }
  /* 10-20 今日考勤: 缺勤 names tinted by their reason, the reason in small type under; the picked one ringed */
  /* 11-04 (the owner: 切换场次「没有任何反应」): the 场次 as one switch, a pill sliding to the one picked; the names fade in */
  #v2AttSess { display:flex; gap:6px; align-items:center; margin:0 0 10px; }
  #v2AttSess .seg { position:relative; flex:1; min-width:0; }
  #v2AttSess .seg button { position:relative; z-index:1; flex:1; min-width:0; padding:8px 4px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .25s; }
  #v2AttSess .seg button.on { background:none; box-shadow:none; color:var(--brand); }
  #v2AttSess .th { position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:8px; background:var(--card); box-shadow:0 1px 3px rgba(16,24,40,.14); transition:left .28s cubic-bezier(.3,.7,.3,1), width .28s cubic-bezier(.3,.7,.3,1); }
  #v2AttSess .x { flex:none; height:38px; padding:0 10px; border-radius:10px; background:var(--bg); font-size:13px; font-weight:600; color:var(--sub); }
  #v2AttPick.swap { animation:v2attSwap .3s ease; }
  @keyframes v2attSwap { from { opacity:.2; transform:translateY(6px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { #v2AttSess .th { transition:none; } #v2AttPick.swap { animation:none; } }
  .v2chips button.ats { background:#fdecec; color:#b4282d; } .v2chips button.atl { background:#fff4e0; color:#a15c00; } .v2chips button.att { background:#e9f1ff; color:#2a5bb8; }
  .v2chips button.ats small, .v2chips button.atl small, .v2chips button.att small { color:inherit; opacity:.85; }
  .v2chips button.sel { box-shadow:inset 0 0 0 2px var(--ink); }
  .v2attn { display:grid; grid-template-columns:repeat(3, 1fr); background:var(--chip); border-radius:12px; padding:10px 6px; margin:4px 0 12px; text-align:center; }
  .v2attn b { display:block; font-size:22px; font-variant-numeric:tabular-nums; } .v2attn span { display:block; font-size:12px; color:var(--sub); }
  .v2attn input { width:64px; text-align:center; font-size:22px; font-weight:700; border:0; border-bottom:1px dashed var(--faint); background:transparent; color:var(--ink); padding:0; }
  .v2attbar { display:flex; gap:6px; align-items:center; margin-top:12px; background:var(--ink); color:var(--bg); border-radius:12px; padding:8px 10px; font-size:14px; }
  .v2attbar b { margin-right:2px; } .v2attbar button { flex:1; height:34px; border-radius:8px; background:rgba(128,128,128,.25); color:inherit; font-size:14px; }
  .v2attbar button.on { background:var(--brand); color:#fff; }
  .v2skhold { display:flex; align-items:center; gap:8px; margin:10px 0 14px; padding:10px 10px 10px 14px; border-radius:14px; background:var(--brand-soft); color:var(--brand-ink); font-size:14px; font-weight:600; }
  .v2skhold.hide { display:none; } .v2skhold span { flex:1; } .v2skhold span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .v2skhold .btn { flex:none; width:auto; min-width:0; height:36px; margin:0; padding:0 14px; font-size:14px; }   /* 10-26 改完才上大屏 */
  .v2attm { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:14px; color:var(--sub); } .v2attm .seg { flex:1; margin:0; }   /* 10-26 */
  /* 11-04 T45 考勤导出一周: the table as a picture, kept by long-pressing it (no download: 微信 opens none) */
  .v2awimg img { display:block; width:100%; height:auto; border-radius:10px; background:#fff; }
  /* 全班名单 (v2-07): 4 a row, 学号 in the corner; two with one name amber */
  .v2rgrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:7px; }
  .v2rgrid button { position:relative; height:42px; min-width:0; display:flex; align-items:center; justify-content:center; padding:0 4px 0 12px; border-radius:10px;
    background:var(--chip); color:var(--ink); font-size:15.5px; font-weight:500; white-space:nowrap; overflow:hidden; }
  .v2rgrid button i { position:absolute; left:6px; top:4px; font-style:normal; font-size:10px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .v2rgrid button.amb { background:var(--warm-soft); color:var(--warm-ink); box-shadow:inset 0 0 0 1.5px var(--warm); font-weight:600; }
  .v2rgrid button.amb i { color:var(--warm-ink); }
  .v2res { background:var(--tint); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
  .v2res > b { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:650; }
  .v2res > b svg { flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:var(--brand); color:#fff; stroke-width:3; }
  .v2res > span { display:block; margin:6px 0 0 28px; font-size:13px; line-height:1.45; color:var(--sub); }
  .v2res > span.w { color:var(--warm-ink); font-weight:600; }
  #v2DuWhoRow .btn { width:auto; padding:0 16px; white-space:nowrap; }
  #v2DuPasteText, #v2DuRosterText { min-height:160px; font-size:16px; line-height:1.55; resize:none; }
  .v2numrow { display:flex; align-items:center; gap:10px; }
  .v2numrow .field { flex:1; margin:0; font-size:20px; text-align:center; }
  .v2numrow .btn { flex:none; width:56px; height:50px; margin:0; border-radius:12px; font-size:22px; box-shadow:none; background:var(--chip); color:var(--ink); }
  @media (prefers-color-scheme: dark) {
    .v2hs .v2chips button:not(.here):not(.used), .v2hs .v2rgrid button:not(.amb) { background:#232A33; }
    .v2numrow .btn { background:#232A33; }
  }
  /* 10-15 stage 4: the 班级 card's other pages (声音 …). A group's footer: grey lines under it, as the group header's size */
  .v2gf { margin:-5px 16px 16px; font-size:13px; line-height:1.55; color:var(--sub); }
  .v2gf:empty { display:none; }
  .v2gf.warn { color:#B45309; }
  /* a choice in a list: the check at the end of the picked one */
  .v2rd .v2ck { flex:none; width:20px; height:20px; color:var(--brand); stroke-width:2.6; visibility:hidden; }
  .v2rd.on .v2ck { visibility:visible; }
  /* 固定音量's dial: the number, the slider; 小 中 大 最大 under it (no line between) */
  .v2dial { gap:14px; padding-top:8px; padding-bottom:2px; }
  .v2dial b { flex:none; min-width:68px; font-size:28px; font-weight:750; line-height:1.1; color:var(--brand); font-variant-numeric:tabular-nums; }
  .v2dial b small { margin-left:2px; font-size:15px; font-weight:650; color:var(--sub); }
  .v2dial .vol-range { flex:1; min-width:0; margin:0; }
  .v2cell.v2dialp { padding-top:2px; padding-bottom:12px; }
  .v2cell.v2dialp::before, .v2cell.v2own::before { content:none; }
  .v2cell.v2own.hide + .v2cell::before { content:''; }   /* (the recorder hidden: 不要提示音 keeps its line) */
  .v2dialp .v2seg { flex:1; }
  /* room under the last row for the snackbar (16 + 48 + 8), as 今日页 has: a teacher can always scroll 试听 clear of it */
  #v2Vol .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  /* 自己录的: the recorder under its line */
  .v2cell.v2own { display:block; padding:0 16px 12px; }
  .v2own .chime-acts { margin-top:0; }
  .v2own .chime-clip { margin-top:6px; }
  @media (prefers-color-scheme: dark) { .v2gf.warn { color:#FBBF24; } .v2dialp .v2seg { background:#232A33; } .v2dialp .v2seg button.on { background:#39424D; } }
  /* 协同老师: a teacher a line, their name's first character in a circle; 邀请同事 at the end; the 协同码 under the list */
  .v2av { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink); font-size:14.5px; font-weight:700; }
  .v2co .v2cell + .v2cell::before { left:60px; }
  .v2co .v2cell.link::before, .v2co .v2none + .v2cell::before { left:16px; }
  .v2co .v2v.v2dep { flex:none; color:var(--brand-ink); font-weight:600; }
  .v2co .v2none .v2t { color:var(--sub); }
  .v2inv { text-align:center; padding:4px 16px 16px; }
  .v2inv .code { gap:6px; margin:14px 0 8px; }
  .v2inv .code span { flex:1; width:auto; max-width:44px; height:54px; font-size:27px; }   /* 8 digits whole at 320 */
  .v2inv p { margin:0 0 14px; font-size:13px; color:var(--sub); }
  .v2inv .btn { width:100%; height:48px; margin:0; border-radius:12px; font-size:16.5px; font-weight:600; box-shadow:none; }
  #v2Co .v2in { padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
  /* 生日祝福: 几点 opens the phone's own time wheel (课表's rule for a time in a cell); the list a line a student (today's tagged); the half-screen's 月 / 日 wheels */
  .v2bdl .v2t i { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:99px; background:var(--brand-soft); color:var(--brand-ink); font-size:12px; font-style:normal; font-weight:650; vertical-align:2px; }
  .v2bdl .v2cell.link::before { left:16px; }
  .v2bdchips { margin-top:10px; max-height:132px; overflow-y:auto; }
  .v2bdchips:empty { display:none; }
  .v2bddate { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .v2bddate select { font-size:16px; }
  #v2BdText { min-height:150px; font-size:16px; line-height:1.55; }
  #v2Bday .v2in { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  /* 10-15 (an iPhone, 作息: 「这里编辑不了，一点就卡」): iOS zooms the page into a box under 16px as it takes the focus. The
     hidden date and time boxes (the cell or the segment opens the phone's own wheel) are 16px: nothing to zoom to */
  label.v2cell > input[type=date], label.v2cell > input[type=time], .v2seg label input { font-size:16px; }
  /* 发喜报 · 公告 as a page (10-15): its fields on a card, as they were on the half-screen; the tabs and 多久 a shade under the page */
  #v2Cheer .v2seg { background:#E4E7EC; }
  #v2Cheer > .v2body .v2in > .v2seg { margin-bottom:14px; }
  #v2Cheer .v2form { padding:14px; }
  #v2Cheer .v2form .v2fields { margin-top:0; }
  #v2Cheer .pills { margin-top:0; }
  #v2Cheer .pill { min-height:40px; }
  #v2Cheer .field { font-size:16px; text-overflow:ellipsis; }   /* 16px: iOS doesn't zoom in on it */
  #v2Cheer .v2grp.in { margin:0 0 12px; background:var(--card); }
  #v2Cheer .v2cheerf { margin-top:10px; }
  @media (prefers-color-scheme: dark) { #v2Cheer .v2seg { background:#232A33; } #v2Cheer .v2grp.in { background:var(--card); } }
  /* 班级设置 (the class name's ✎): a half-screen; 删除这个班 in red, its 确认删除 a red button */
  #v2ClsEd .field { font-size:16px; }
  #v2ClsEd .v2grp.in { margin-top:14px; }
  #v2ClsEd .v2red { color:var(--danger); }
  #v2ClsDel .v2note { margin:14px 2px 10px; }
  #v2ClsEd .v2hs-ft .btn-danger { background:var(--danger); color:#fff; }
  /* ---------- 10-15 自由模块 v2 (the owner: 「感覺很不錯，就是組件樣式少了一點」 → more looks, colours, sizes; then 「留白太多」 →
     every block fills its room). The classroom panel as blocks on a 4-column grid, in panel units (--u: the panel is 700 wide),
     placed alike by the phone and Desk.cs (first fit, top to bottom). Every class here starts f2- (the page has .st, .ls, .more …) */
  .dkf2 { --u0:var(--u); position:relative; width:100%; height:calc(var(--ph, 900) * var(--u)); background:#FFFFFF; color:#18202B;
    border-radius:calc(18 * var(--u)); overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.3; }
  .dkf2.dark { background:#10161D; color:#F2F5F8; }
  .dk-wrap > .dkf2 { flex:1; min-width:0; }
  /* a block: its colour as tokens */
  .f2-blk { --tbg:#F3F5F8; --tlb:#5B6577; --tbig:#18202B; --tink:#18202B; --tsub:#5B6577; --tline:#E3E7EE; --tacc:#0B7A55; --tsoft:#FFFFFF;
    position:absolute; border-radius:calc(18 * var(--u)); background:var(--tbg); color:var(--tink); }
  .f2-blk.c-green  { --tbg:#EAF6F0; --tlb:#0B7A55; --tbig:#073F2D; --tink:#123D2E; --tsub:#3D6B57; --tline:#D3EADF; --tacc:#0B7A55; --tsoft:#F7FCF9; }
  .f2-blk.c-yellow { --tbg:#FFF4DE; --tlb:#8A5300; --tbig:#7A3E00; --tink:#5C3B00; --tsub:#8A6A33; --tline:#F3E2BF; --tacc:#C27803; --tsoft:#FFFBF2; }
  .f2-blk.c-blue   { --tbg:#EAF1FF; --tlb:#1F5FD1; --tbig:#0E2F6E; --tink:#16305E; --tsub:#4A6493; --tline:#D3E1FA; --tacc:#1F5FD1; --tsoft:#F7FAFF; }
  .f2-blk.c-pink   { --tbg:#FDEDF3; --tlb:#C2185B; --tbig:#6E0F35; --tink:#5A1830; --tsub:#94506B; --tline:#F6D3E0; --tacc:#D81B60; --tsoft:#FFF8FB; }
  .f2-blk.c-purple { --tbg:#F2EDFC; --tlb:#6B3FC4; --tbig:#33166E; --tink:#2E1A5C; --tsub:#6B5A92; --tline:#E2D8F7; --tacc:#6B3FC4; --tsoft:#FBF9FF; }
  .f2-blk.c-dark   { --tbg:#1F2733; --tlb:#7FE0B8; --tbig:#FFFFFF; --tink:#EEF2F7; --tsub:#A9B4C2; --tline:#313B48; --tacc:#7FE0B8; --tsoft:#283241; }
  .dkf2.dark .f2-blk          { --tbg:#19212A; --tlb:#A9B4C2; --tbig:#F2F5F8; --tink:#E6EBF1; --tsub:#A9B4C2; --tline:#2A333F; --tacc:#6EE7B7; --tsoft:#212A35; }
  .dkf2.dark .f2-blk.c-green  { --tbg:#152F2D; --tlb:#6EE7B7; --tbig:#D1FAE5; --tink:#CFF5E4; --tsub:#86BEA5; --tline:#1C5345; --tacc:#34D399; --tsoft:#1B3A36; }
  .dkf2.dark .f2-blk.c-yellow { --tbg:#33260E; --tlb:#FCD34D; --tbig:#FBBF24; --tink:#FDE68A; --tsub:#D6B66A; --tline:#4A3814; --tacc:#F59E0B; --tsoft:#3D2F12; }
  .dkf2.dark .f2-blk.c-blue   { --tbg:#142338; --tlb:#93C5FD; --tbig:#DBEAFE; --tink:#D6E4FA; --tsub:#8FA9CF; --tline:#1F3554; --tacc:#60A5FA; --tsoft:#1A2C45; }
  .dkf2.dark .f2-blk.c-pink   { --tbg:#33172A; --tlb:#F9A8D4; --tbig:#FCE7F3; --tink:#F7D9E8; --tsub:#C990AE; --tline:#4A2140; --tacc:#F472B6; --tsoft:#3D1C33; }
  .dkf2.dark .f2-blk.c-purple { --tbg:#241B3D; --tlb:#C4B5FD; --tbig:#EDE9FE; --tink:#E2DCF9; --tsub:#A79BD0; --tline:#352A57; --tacc:#A78BFA; --tsoft:#2C2249; }
  .dkf2.dark .f2-blk.c-dark   { --tbg:#0B0F14; --tlb:#7FE0B8; --tbig:#FFFFFF; --tink:#EEF2F7; --tsub:#A9B4C2; --tline:#232B36; --tacc:#7FE0B8; --tsoft:#151B23; }
  .f2-blk .f2-in { position:absolute; inset:0; border-radius:inherit; overflow:hidden; padding:calc(18 * var(--u)) calc(20 * var(--u)); display:flex; flex-direction:column; }
  /* 11-05 T53: a block without a .f2-fit (时钟, 上课倒计时, 倒数日 …) takes its own font size the same way: --u, and the
     words inside it, move by --fzk (as large as fits, never past fz) */
  .f2-blk[data-fz] > .f2-in { --u:calc(var(--u0) * var(--fzk, 1)); }
  .f2-in.f2-mid { justify-content:center; }
  /* filled to the block (see fmFit): everything in .f2-fit is sized in --u, which is scaled by --k until it fills the room
     under the heading (the largest that fits); what still doesn't at the smallest becomes 「还有 N 科」 */
  .f2-fit { --k:1; --u:calc(var(--u0) * var(--k)); display:flex; flex-direction:column; flex:none; text-wrap:pretty; }
  /* 11-04 (是我啊🌼, iPhone: 「右边明明有空位…还是自己换行」): Safari's pretty evens out every line of a paragraph, so in a
     narrow 作业 / 值日 / 待办 card a line broke at half the width; the items wrap plainly, as the classroom screen does */
  .f2-fit .it, .f2-fit .it * { text-wrap:wrap; }
  .f2-more { font-size:calc(18 * var(--u)); color:var(--tsub); font-weight:700; padding-top:calc(6 * var(--u)); }
  .f2-bh { display:flex; align-items:baseline; justify-content:space-between; gap:calc(10 * var(--u)); font-size:calc(17 * var(--u)); font-weight:700; color:var(--tlb); white-space:nowrap; flex:none; }
  .f2-bh small { font-weight:500; font-size:calc(14 * var(--u)); color:var(--tsub); min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .f2-none { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--tsub); font-size:calc(20 * var(--u)); }
  .f2-nw { white-space:nowrap; }
  .f2-hid { display:none !important; }
  /* 时钟 */
  .f2-ck { flex:1; display:flex; align-items:center; justify-content:space-between; gap:calc(14 * var(--u)); min-height:0; }
  .f2-ck .f2-c { min-width:0; }
  .f2-ck b { display:block; font-size:calc(30 * var(--u)); color:var(--tbig); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-ck span { display:block; font-size:calc(17 * var(--u)); color:var(--tsub); margin-top:calc(4 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-ck .f2-t { flex:none; font-size:calc(66 * var(--u)); font-weight:800; color:var(--tbig); font-variant-numeric:tabular-nums; letter-spacing:calc(1 * var(--u)); line-height:1; }
  .z21 .f2-ck .f2-t { font-size:calc(52 * var(--u)); } .z21 .f2-ck b { font-size:calc(22 * var(--u)); }
  .z22 .f2-ck, .z42 .f2-ck { flex-direction:column; justify-content:center; align-items:flex-start; }
  .z22 .f2-ck .f2-c, .z42 .f2-ck .f2-c { width:100%; }
  .z22 .f2-ck .f2-t { font-size:calc(76 * var(--u)); } .z42 .f2-ck .f2-t { font-size:calc(110 * var(--u)); }
  .f2-dial { flex:1; display:flex; align-items:center; justify-content:center; gap:calc(18 * var(--u)); min-height:0; }
  .f2-dial .f2-face { position:relative; height:100%; max-height:calc(240 * var(--u)); aspect-ratio:1; flex:none; }
  .f2-dial .f2-face svg { position:absolute; inset:0; width:100%; height:100%; }
  .z22 .f2-dial { flex-direction:column; gap:calc(8 * var(--u)); } .z22 .f2-dial .f2-face { flex:1; height:auto; width:100%; aspect-ratio:auto; max-height:none; min-height:0; }
  .z42 .f2-dial { gap:calc(30 * var(--u)); } .z42 .f2-dial .f2-face { height:92%; }
  .f2-dial .f2-dt { min-width:0; } .z22 .f2-dial .f2-dt { text-align:center; }
  .f2-dial .f2-dt b { display:block; font-size:calc(26 * var(--u)); color:var(--tbig); white-space:nowrap; }
  .f2-dial .f2-dt span { display:block; font-size:calc(17 * var(--u)); color:var(--tsub); white-space:nowrap; }
  .f2-bigt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .f2-bigt .f2-t { font-size:calc(var(--bt, 96) * var(--u)); font-weight:800; color:var(--tbig); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:calc(2 * var(--u)); }
  .f2-bigt span { font-size:calc(18 * var(--u)); color:var(--tsub); margin-top:calc(6 * var(--u)); }
  /* 下一节课 */
  .f2-nx { flex:1; display:flex; align-items:center; justify-content:space-between; gap:calc(12 * var(--u)); min-height:0; }
  .f2-nx .f2-lbx { min-width:0; }
  .f2-nx .f2-lb { font-size:calc(17 * var(--u)); font-weight:700; color:var(--tlb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-nx .f2-big { font-size:calc(58 * var(--u)); font-weight:800; color:var(--tbig); line-height:1.1; letter-spacing:calc(3 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-nx .f2-bd { flex:none; padding:calc(7 * var(--u)) calc(15 * var(--u)); border-radius:99px; background:var(--tacc); color:var(--tsoft); font-size:calc(20 * var(--u)); font-weight:700; white-space:nowrap; }
  .c-dark .f2-nx .f2-bd, .dark .f2-nx .f2-bd { color:#10251C; }
  .z22 .f2-nx { flex-direction:column; align-items:flex-start; justify-content:center; } .z22 .f2-nx .f2-big { font-size:calc(70 * var(--u)); white-space:normal; }
  .z21 .f2-nx .f2-big { font-size:calc(42 * var(--u)); } .z21 .f2-nx .f2-bd { display:none; }
  .f2-pg { flex:1; display:flex; flex-direction:column; justify-content:center; gap:calc(10 * var(--u)); min-height:0; }
  .f2-pg .f2-r { display:flex; align-items:baseline; justify-content:space-between; gap:calc(10 * var(--u)); }
  .f2-pg .f2-big { font-size:calc(52 * var(--u)); line-height:1.1; font-weight:800; color:var(--tbig); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-pg .f2-lft { flex:none; font-size:calc(20 * var(--u)); color:var(--tlb); font-weight:700; }
  .f2-pg .f2-bar { flex:none; height:calc(18 * var(--u)); border-radius:99px; background:var(--tline); overflow:hidden; }
  .f2-pg .f2-bar i { display:block; height:100%; background:var(--tacc); border-radius:inherit; }
  .f2-pg small { font-size:calc(15 * var(--u)); color:var(--tsub); display:flex; justify-content:space-between; }
  .z21 .f2-pg .f2-big { font-size:calc(36 * var(--u)); } .z21 .f2-pg small { display:none; }
  /* 上课倒计时 */
  .f2-bell { flex:1; display:flex; align-items:center; gap:calc(20 * var(--u)); min-height:0; }
  .f2-bell .f2-lbx { min-width:0; flex:1; }
  .f2-bell .f2-lb { font-size:calc(18 * var(--u)); font-weight:700; letter-spacing:calc(2 * var(--u)); color:var(--tlb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-bell .f2-nm { margin-top:calc(4 * var(--u)); font-size:calc(30 * var(--u)); font-weight:700; color:var(--tbig); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-bell .f2-dg { flex:none; font-size:calc(76 * var(--u)); font-weight:800; line-height:1; color:var(--tbig); font-variant-numeric:tabular-nums; letter-spacing:calc(2 * var(--u)); }
  .f2-bell .f2-dg.f2-tm { font-size:calc(32 * var(--u)); font-weight:700; letter-spacing:0; }
  .f2-bell .f2-dg.f2-m { display:flex; align-items:baseline; gap:calc(8 * var(--u)); letter-spacing:0; } .f2-bell .f2-dg.f2-m small { font-size:calc(28 * var(--u)); font-weight:700; }
  .f2-bell.f2-calm .f2-lb { color:var(--tsub); } .f2-bell.f2-calm .f2-nm, .f2-bell.f2-calm .f2-dg { color:var(--tink); }
  .f2-bell.f2-bnone .f2-nm { font-size:calc(20 * var(--u)); font-weight:500; color:var(--tsub); }
  /* 今日课表 */
  .f2-ls { display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); align-content:center; gap:calc(10 * var(--u)) calc(6 * var(--u)); text-align:center; margin-top:calc(6 * var(--u)); }
  .f2-ls div b { display:block; font-size:calc(24 * var(--u)); color:var(--tink); white-space:nowrap; overflow:hidden; }
  .f2-ls div span { font-size:calc(14 * var(--u)); color:var(--tsub); font-variant-numeric:tabular-nums; }
  .f2-ls div.f2-done b { color:var(--tsub); font-weight:600; }
  .f2-ls div.f2-now b, .f2-ls div.f2-now span { color:var(--tacc); }
  .z41 .f2-ls div b { font-size:calc(19 * var(--u)); }
  .z23 .f2-ls { grid-template-columns:1fr; text-align:left; gap:calc(5 * var(--u)); align-content:start; margin-top:calc(10 * var(--u)); }
  .z23 .f2-ls div { display:flex; justify-content:space-between; align-items:baseline; border-bottom:calc(2 * var(--u)) solid var(--tline); padding-bottom:calc(5 * var(--u)); }
  .z23 .f2-ls div b { font-size:calc(22 * var(--u)); }
  /* 今日作业 */
  .f2-hw { margin-top:calc(8 * var(--u)); display:flex; flex-direction:column; }
  .f2-hw > div { display:flex; gap:calc(14 * var(--u)); align-items:baseline; padding:calc(8 * var(--u)) 0; border-bottom:calc(2 * var(--u)) solid var(--tline); font-size:calc(25 * var(--u)); line-height:1.3; }
  .f2-hw > div:last-child { border-bottom:0; }
  .f2-hw i { font-style:normal; flex:none; width:calc(84 * var(--u)); font-size:calc(18 * var(--u)); font-weight:700; color:var(--tlb); white-space:nowrap; overflow:hidden; }
  .f2-hw i::before { content:""; display:inline-block; width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:50%; background:var(--c); margin-right:calc(7 * var(--u)); vertical-align:middle; }
  .f2-hw span { min-width:0; overflow-wrap:anywhere; }
  .z22 .f2-hw > div, .z23 .f2-hw > div { font-size:calc(21 * var(--u)); flex-direction:column; gap:calc(2 * var(--u)); }
  .f2-hwc { margin-top:calc(10 * var(--u)); display:grid; grid-template-columns:1fr 1fr; gap:calc(10 * var(--u)); }
  .z22 .f2-hwc, .z23 .f2-hwc { grid-template-columns:1fr; }
  .f2-hwc > div { background:var(--tsoft); border-radius:calc(12 * var(--u)); padding:calc(10 * var(--u)) calc(12 * var(--u)); border-top:calc(6 * var(--u)) solid var(--c); overflow:hidden; display:flex; flex-direction:column; gap:calc(4 * var(--u)); }
  .f2-hwc b { font-size:calc(17 * var(--u)); color:var(--c); }
  .f2-hwc span { font-size:calc(21 * var(--u)); line-height:1.3; font-weight:600; color:var(--tink); overflow-wrap:anywhere; }
  /* 今日值日 */
  .f2-du .f2-g { font-size:calc(40 * var(--u)); font-weight:800; color:var(--tacc); margin-top:calc(6 * var(--u)); }
  .f2-du .f2-who { margin-top:calc(8 * var(--u)); display:grid; gap:calc(5 * var(--u)) calc(16 * var(--u)); font-size:calc(21 * var(--u)); }
  .z42 .f2-du .f2-who { grid-template-columns:1fr 1fr; }
  .f2-du .f2-who > div { display:flex; gap:calc(10 * var(--u)); align-items:baseline; min-width:0; }
  .f2-du .f2-who small { color:var(--tsub); font-size:calc(15 * var(--u)); flex:none; width:calc(var(--lw, 3.5) * 15 * var(--u)); max-width:42%; white-space:nowrap; overflow:hidden; }
  .f2-du .f2-who b { font-weight:650; min-width:0; }
  .z23 .f2-du .f2-who { gap:calc(10 * var(--u)); }
  .f2-dub { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .f2-dub .f2-g { font-size:calc(var(--gf, 76) * var(--u)); font-weight:800; color:var(--tacc); line-height:1.1; white-space:nowrap; }
  .f2-dub .f2-n { margin-top:calc(10 * var(--u)); font-size:calc(22 * var(--u)); color:var(--tink); line-height:1.5; }
  /* 待办 */
  .f2-td { margin-top:calc(10 * var(--u)); display:flex; flex-direction:column; gap:calc(8 * var(--u)); font-size:calc(23 * var(--u)); }
  .z41 .f2-td { flex-direction:row; flex-wrap:wrap; gap:calc(6 * var(--u)) calc(22 * var(--u)); font-size:calc(21 * var(--u)); }
  .f2-note { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; margin:calc(-4 * var(--u)) calc(-6 * var(--u)); padding:calc(14 * var(--u)) calc(18 * var(--u));
    border-radius:calc(8 * var(--u)); background:#FFF6B8; color:#4A3B00; transform:rotate(-1.2deg); box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(80,60,0,.18);
    font-family:KaiTi,STKaiti,"Kaiti SC",serif; }
  .f2-note h4 { margin:0 0 calc(4 * var(--u)); font-size:calc(22 * var(--u)); color:#8A6A00; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
  .f2-note p { margin:0; white-space:pre-line; font-size:calc(28 * var(--u)); line-height:calc(44 * var(--u)); background-image:repeating-linear-gradient(transparent 0 calc(42 * var(--u)), rgba(160,120,0,.22) calc(42 * var(--u)) calc(44 * var(--u))); }
  .c-dark .f2-note, .dark .f2-note { background:#3A3420; color:#FCEFA8; } .c-dark .f2-note h4, .dark .f2-note h4 { color:#F5D96B; }
  /* 倒数日 */
  .f2-cnt { flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }
  .f2-cnt .f2-n { font-size:calc(26 * var(--u)); font-weight:700; color:var(--tlb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-cnt .f2-d { display:flex; align-items:baseline; gap:calc(8 * var(--u)); color:var(--tbig); margin-top:calc(4 * var(--u)); }
  .f2-cnt .f2-d em { font-style:normal; font-size:calc(21 * var(--u)); color:var(--tlb); }
  .f2-cnt .f2-d b { font-size:calc(92 * var(--u)); line-height:1; font-weight:800; }
  .f2-cnt .f2-d span { font-size:calc(25 * var(--u)); font-weight:700; }
  .z41 .f2-cnt, .z21 .f2-cnt { flex-direction:row; align-items:center; justify-content:space-between; gap:calc(12 * var(--u)); }
  .z41 .f2-cnt .f2-d b { font-size:calc(60 * var(--u)); } .z21 .f2-cnt .f2-d b { font-size:calc(50 * var(--u)); } .z21 .f2-cnt .f2-n { font-size:calc(22 * var(--u)); } .z21 .f2-cnt .f2-d em { display:none; }
  .f2-tear { flex:1; margin:calc(-6 * var(--u)) calc(-8 * var(--u)); border-radius:calc(14 * var(--u)); background:var(--tsoft); box-shadow:0 calc(4 * var(--u)) 0 var(--tline); display:flex; flex-direction:column; overflow:hidden; }
  .f2-tear .f2-hd { background:var(--tacc); color:var(--tsoft); text-align:center; font-weight:700; font-size:calc(20 * var(--u)); padding:calc(8 * var(--u)) calc(6 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .f2-tear .f2-bd { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--tbig); }
  .f2-tear .f2-bd b { font-size:calc(var(--tf, 100) * var(--u)); line-height:1; font-weight:800; }
  .f2-tear .f2-bd span { font-size:calc(19 * var(--u)); color:var(--tsub); margin-top:calc(4 * var(--u)); }
  .z41 .f2-tear, .z21 .f2-tear { flex-direction:row; } .z41 .f2-tear .f2-hd, .z21 .f2-tear .f2-hd { display:flex; align-items:center; padding:0 calc(16 * var(--u)); max-width:50%; }
  .z41 .f2-tear .f2-bd, .z21 .f2-tear .f2-bd { flex-direction:row; flex-wrap:wrap; align-content:center; gap:0 calc(8 * var(--u)); align-items:baseline; justify-content:center; }
  /* 寄语 */
  .f2-mt { display:flex; align-items:center; justify-content:center; text-align:center; color:var(--tink); line-height:1.4; }
  .f2-mt.f2-kai { font-family:KaiTi,STKaiti,"Kaiti SC",serif; font-size:calc(var(--mf, 32) * var(--u)); }
  .f2-mt.f2-bold { font-size:calc(var(--mf, 34) * var(--u)); font-weight:800; color:var(--tbig); letter-spacing:calc(2 * var(--u)); }
  .f2-qt { display:flex; flex-direction:column; justify-content:center; position:relative; padding:0 calc(10 * var(--u)) 0 calc(44 * var(--u)); }
  .f2-qt::before { content:"“"; position:absolute; left:calc(-2 * var(--u)); top:calc(-30 * var(--u)); font-size:calc(110 * var(--u)); color:var(--tacc); opacity:.35; font-family:Georgia,serif; }
  .f2-qt p { margin:0; font-size:calc(var(--mf, 28) * var(--u)); font-weight:700; color:var(--tbig); line-height:1.4; position:relative; }
  /* 公告 */
  .f2-nt { margin-top:calc(10 * var(--u)); display:flex; flex-direction:column; gap:calc(10 * var(--u)); font-size:calc(22 * var(--u)); }
  .z41 .f2-nt { flex-direction:row; flex-wrap:wrap; gap:calc(6 * var(--u)) calc(26 * var(--u)); }
  .f2-nt small { color:var(--tsub); font-size:calc(16 * var(--u)); margin-right:calc(10 * var(--u)); font-variant-numeric:tabular-nums; }
  /* 自己写 */
  .f2-tx .f2-b { margin-top:calc(8 * var(--u)); font-size:calc(var(--f, 34) * var(--u)); font-weight:700; line-height:1.35; color:var(--tink); white-space:pre-line; }
  .f2-txb { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .f2-txb .f2-t { font-size:calc(18 * var(--u)); color:var(--tlb); font-weight:700; }
  .f2-txb .f2-b { font-size:calc(var(--f, 48) * var(--u)); font-weight:800; color:var(--tbig); line-height:1.25; margin-top:calc(6 * var(--u)); white-space:pre-line; }
  .f2-empty { color:var(--tsub); font-weight:500; }
  /* 日历 */
  .f2-cal { flex:1; display:flex; gap:calc(18 * var(--u)); min-height:0; }
  .f2-cal .f2-side { display:none; flex-direction:column; justify-content:center; }
  .z42 .f2-cal .f2-side { display:flex; width:30%; }
  .f2-cal .f2-side b { font-size:calc(64 * var(--u)); color:var(--tbig); line-height:1; white-space:nowrap; overflow:hidden; }
  .f2-cal .f2-side span { font-size:calc(19 * var(--u)); color:var(--tsub); margin-top:calc(8 * var(--u)); }
  .f2-cal .f2-grid { flex:1; display:grid; grid-template-columns:repeat(7, 1fr); align-content:center; gap:calc(3 * var(--u)) 0; text-align:center; font-variant-numeric:tabular-nums; }
  .f2-cal .f2-grid .f2-w { font-size:calc(14 * var(--u)); color:var(--tsub); font-weight:700; }
  .f2-cal .f2-grid .f2-d { font-size:calc(var(--df, 17) * var(--u)); color:var(--tink); line-height:calc(var(--dl, 28) * var(--u)); }
  .f2-cal .f2-grid .f2-d.f2-we { color:var(--tsub); }
  .f2-cal .f2-grid .f2-d.f2-today i { display:inline-block; font-style:normal; width:calc(var(--dl, 28) * var(--u)); height:calc(var(--dl, 28) * var(--u)); border-radius:50%; background:var(--tacc); color:var(--tsoft); font-weight:800; }

  /* ---- the editor: the board is the panel itself; empty cells to tap, a block to drag, its corner to resize */
  .fmseg { margin:2px 0 14px; background:#E4E7EC; }
  .fmbd { padding:10px; }
  .fmbd .f2-board { box-shadow:inset 0 0 0 calc(2 * var(--u)) var(--line); }
  #v2FmText { margin-top:16px; }
  #v2FmText .field { font-size:16px; }
  #v2FmBody { min-height:84px; line-height:1.5; }
  @media (prefers-color-scheme: dark) { .fmseg { background:#232A33; } }
  .f2-board { position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; overflow:visible; }
  .f2-board .f2-blk { transition:left .22s ease, top .22s ease, width .22s ease, height .22s ease, opacity .2s, transform .15s, box-shadow .15s, background .2s; touch-action:pan-y; cursor:grab; }
  .f2-cell { position:absolute; border-radius:calc(18 * var(--u)); border:calc(3 * var(--u)) dashed #DCE2EA; opacity:.75; display:flex; align-items:center; justify-content:center; color:#98A1B2; }
  .dkf2.dark .f2-cell { border-color:#33404D; color:#6F7888; }
  .f2-cell svg { width:calc(34 * var(--u)); height:calc(34 * var(--u)); opacity:0; transition:opacity .15s; }
  .f2-cell.f2-free { cursor:pointer; } .f2-cell.f2-free svg { opacity:.55; }
  .f2-cell:not(.f2-free) { display:none; }
  .f2-board .f2-blk.f2-lift { transition:none; z-index:20; cursor:grabbing; box-shadow:0 calc(22 * var(--u)) calc(50 * var(--u)) rgba(16,24,40,.30), 0 0 0 calc(5 * var(--u)) #0E9F6E; transform:scale(1.03); }
  .f2-board .f2-blk.f2-gone { opacity:0; transform:scale(.85); }
  .f2-board .f2-blk.f2-flash { animation:f2flash .9s ease 1; }
  @keyframes f2flash { 0%,100% { box-shadow:0 0 0 0 transparent; } 30% { box-shadow:0 0 0 calc(8 * var(--u)) rgba(14,159,110,.45); } }
  .f2-drop { position:absolute; border-radius:calc(18 * var(--u)); border:calc(5 * var(--u)) dashed #0E9F6E; background:rgba(14,159,110,.08); z-index:5; pointer-events:none; transition:left .12s, top .12s, width .12s, height .12s; }
  .f2-rm { position:absolute; left:-11px; top:-11px; width:24px; height:24px; border-radius:50%; background:#5E6878; color:#fff; z-index:3; padding:0; border:0;
    display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); touch-action:none; }
  .f2-rm svg { width:13px; height:13px; }
  .f2-rm::after { content:""; position:absolute; inset:-8px; }
  .f2-rz { position:absolute; right:-6px; bottom:-6px; width:34px; height:34px; z-index:3; touch-action:none; cursor:nwse-resize; display:flex; align-items:flex-end; justify-content:flex-end; padding:7px; }
  .f2-rz i { width:15px; height:15px; border-right:3.5px solid #0E9F6E; border-bottom:3.5px solid #0E9F6E; border-bottom-right-radius:7px; }
  .f2-blk.f2-lift .f2-rm, .f2-blk.f2-lift .f2-rz { opacity:0; }
  .f2-ghost { position:fixed; z-index:60; pointer-events:none; padding:10px 14px; border-radius:12px; background:var(--card); color:var(--ink); font-weight:700;
    box-shadow:0 10px 30px rgba(16,24,40,.25), 0 0 0 3px var(--brand); transform:translate(-50%, -60%); }
  .f2-tray { margin-top:12px; background:var(--card); border-radius:14px; padding:12px; border:1.5px dashed #E8A0A3; display:flex; flex-direction:column; gap:8px; }
  .f2-tray h3 { margin:0; font-size:14px; color:#D9363E; }
  .f2-tray p { margin:0; font-size:12.5px; color:var(--sub); line-height:1.5; }
  .f2-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .f2-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 8px 8px 12px; border-radius:10px; background:#FDECEC; color:#1B2230; font-size:14px; font-weight:600; touch-action:none; cursor:grab; }
  .f2-chip.f2-dim { opacity:.45; }
  .f2-chip .f2-x { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#697386; padding:0; border:0; background:none; }
  .f2-chip .f2-x svg { width:13px; height:13px; }
  .f2-how { display:flex; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--sub); margin:2px 0 10px; }
  .f2-how span { display:inline-flex; align-items:center; gap:5px; background:var(--card); border-radius:99px; padding:5px 10px 5px 7px; border:1px solid var(--line); }
  .f2-how svg { width:15px; height:15px; color:var(--brand); flex:none; }
  /* the block's half-screen: 样子, 颜色, 大小 */
  .f2-sec { margin-top:14px; }
  .f2-sec h5 { margin:0 0 8px; font-size:13px; color:var(--sub); font-weight:600; }
  .f2-opts { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .f2-opts::-webkit-scrollbar { display:none; }
  .f2-opts button { flex:none; border-radius:12px; background:var(--bg); padding:9px 14px; font-size:14px; font-weight:600; border:2px solid transparent; color:var(--ink); }
  .f2-opts button.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); }
  .f2-opts button.no { opacity:.4; }
  .f2-sz button { padding:9px 10px 7px; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .f2-shape { display:grid; grid-template-columns:repeat(4, 8px); gap:2px; }
  .f2-shape i { height:8px; border-radius:2px; background:var(--line); }
  .f2-shape i.f { background:var(--brand); }
  .f2-sz b { font-size:13px; }
  .f2-cols { display:flex; gap:10px; flex-wrap:wrap; }
  .f2-cols button { width:34px; height:34px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.10); position:relative; padding:0; border:0; }
  .f2-cols button.on::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2.5px solid var(--brand); }
  .f2-cols button.auto { background:conic-gradient(#EAF6F0 0 25%, #FFF4DE 0 50%, #EAF1FF 0 75%, #FDEDF3 0); }
  /* 11-05 T53: 自由模块 one block's own 字号 (自动 + slider, as 整齐排版's) */
  .f2-fz { display:flex; align-items:center; gap:10px; }
  .f2-fz button { flex:none; border-radius:12px; background:var(--bg); padding:9px 14px; font-size:14px; font-weight:600; border:2px solid transparent; color:var(--ink); }
  .f2-fz button.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); }
  .f2-fz input[type=range] { flex:1; min-width:0; accent-color:var(--brand); height:28px; }
  .f2-fz small { flex:none; font-size:12.5px; color:var(--sub); }
  .f2-gal { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .f2-gal button { text-align:left; padding:12px; border-radius:14px; background:var(--bg); display:flex; flex-direction:column; gap:3px; min-height:84px; position:relative; color:var(--ink); border:0; }
  .f2-gal b { font-size:15.5px; } .f2-gal small { color:var(--sub); font-size:12.5px; line-height:1.4; }
  .f2-gal button.no { opacity:.45; }
  .f2-gal .f2-tag { font-size:11.5px; color:var(--brand); font-weight:700; }
  .f2-gal button.no .f2-tag { color:var(--faint); }
  .f2-gal button.full .f2-tag { color:#D9363E; }
  .f2-gal .f2-new { position:absolute; right:10px; top:10px; font-size:11px; font-weight:800; color:#fff; background:#F06A3B; border-radius:99px; padding:1px 7px; }
  @media (prefers-reduced-motion: reduce) { .f2-board .f2-blk, .f2-drop { transition:none; } .f2-board .f2-blk.f2-flash { animation:none; } }
  /* (after the rules they override) the tray at night */
  @media (prefers-color-scheme: dark) { .f2-chip { background:#3B2326; color:#F6D5D7; } .f2-chip .f2-x { color:#C9A2A5; } .f2-tray { border-color:#7A3B3F; } .f2-tray h3 { color:#F08A8F; } }
  /* 10-14: 值日表 and 生日祝福 open the old 班级桌面 sheet with only their part (openDesk(c, sec, true)) until their pages come */
  #deskSheet[data-only="duty"] > :not([data-keep~="duty"]), #deskSheet[data-only="bday"] > :not([data-keep~="bday"]) { display:none !important; }
  #deskSheet[data-only] #deskTitle + .muted { display:none; }
  #deskSheet[data-only] .dk-ed { padding-top:14px; border-bottom:0; }
  /* 10-16 (小珺yo, 小米浏览器「访问电脑版」: 点课表没有下一步): a phone browser in desktop mode lays the page out ~980 wide,
     zooms it out, and lets its address bar and toolbar cover the page's top and bottom edges (the page isn't told). In .dm
     (set by DM below) what sits at an edge moves in by --dmt / --dmb, and the half-screens and bottom sheets come up in the
     middle, where they are always seen */
  .dm body { padding-top:var(--dmt); padding-bottom:calc(var(--dmb) + 76px); }
  .dm .tabbar { bottom:var(--dmb); }
  .dm .sendbar { bottom:calc(var(--dmb) + 68px + env(safe-area-inset-bottom)); }
  .dm .v2pg, .dm .page { top:var(--dmt); bottom:var(--dmb); }
  .dm #toast { top:calc(var(--dmt) + 14px); }
  .dm #v2Snack, .dm #qzUndo { bottom:calc(var(--dmb) + 72px); }
  .dm .sheet.dlg { top:calc(var(--dmt) + 6vh); }
  .dm .v2hs.kb { top:calc(var(--dmt) + 8px); }
  .dm .v2hs:not(.kb), .dm .v2as, .dm .sheet:not(.dlg) { top:50%; bottom:auto; border-radius:16px; opacity:0; transform:translateY(-50%) translateY(28px);
    box-shadow:0 24px 60px rgba(10,14,20,.28); transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s, visibility 0s .22s; }
  .dm .v2hs.on:not(.kb), .dm .v2as.on, .dm .sheet.on:not(.dlg) { opacity:1; transform:translateY(-50%); transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s; }
  .dm .sheet:not(.dlg):not(.on) { pointer-events:none; }
  .dm .v2hs:not(.kb) { max-height:min(calc(100vh - var(--dmt) - var(--dmb) - 32px), 720px); }
  .dm .sheet:not(.dlg) { max-height:calc(100vh - var(--dmt) - var(--dmb) - 32px); }
  @media (prefers-reduced-motion: reduce) {
    .scrim, #v2Scrim, #v2Scrim2, .ask, .ask .box, .sheet, .v2hs, .v2as, .v2pg, .page, #toast, #v2Snack, #qzUndo, #exitAsk, .fold-out { transition-duration:.01s !important; }
    .annp, .annp .dlg, .wx-guide, .ann, #pageNewer { animation:none !important; }
  }

:root { --app-ok: 1; }