/* ===== EDUNEST PAYMENT SYSTEM — shared styles ===== */
:root{
  --bg:#141416; --bg2:#1d1d23; --card:rgba(32,32,39,.74); --line:rgba(198,202,215,.14);
  --txt:#f0f1f4; --mut:#a3a7b4; --acc:#f4536d; --acc2:#f98a9b;
  --grad-a:#f43f5a; --grad-b:#c11832;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --radius:16px;
  --font:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* craft pass: one scale, one depth system, one motion vocabulary */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px;
  --e1:0 1px 2px rgba(0,0,0,.25);
  --e2:0 6px 18px rgba(0,0,0,.30);
  --e3:0 22px 60px rgba(0,0,0,.45);
  --t-fast:150ms; --t-med:220ms; --ease:cubic-bezier(.2,.7,.3,1);
  --thead:#1f1f26;
  /* top headline bar — dark in BOTH themes (charcoal at night, navy by day) */
  --top-bg:#1b1b22; --top-txt:#f0f1f4; --top-mut:#a3a7b4; --top-line:rgba(198,202,215,.14);
  /* payment-grid colour code — fg is text (contrast-checked), bg the tint, edge the rail */
  --pay-cash-fg:#3ee0a6;  --pay-cash-bg:rgba(52,211,153,.13);  --pay-cash-edge:#34d399;
  --pay-card-fg:#fcc63f;  --pay-card-bg:rgba(251,191,36,.13);  --pay-card-edge:#fbbf24;
  --pay-bonus-fg:#9db2ff; --pay-bonus-bg:rgba(91,124,255,.15); --pay-bonus-edge:#5b7cff;
  --pay-other-fg:#c9d2ee; --pay-other-bg:rgba(200,212,240,.10); --pay-other-edge:#8b95c0;
  --pay-due-fg:#7f9bff;   --pay-due-bg:rgba(91,124,255,.07);   --pay-due-edge:#5b7cff;
  /* transfer-debt cells (move-v11): cyan family — distinct from every method */
  --pay-debt-fg:#4dd7e8;  --pay-debt-bg:rgba(34,211,238,.12);  --pay-debt-edge:#22d3ee;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Android Chrome inflates text on pages that don't opt out ("font boosting"),
   which widens min-content and can blow the layout past the phone screen */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font);color:var(--txt);min-height:100vh;
  background:
    radial-gradient(900px 500px at 12% -8%,rgba(224,36,64,.13),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(160,164,178,.10),transparent 55%),
    linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;-webkit-font-smoothing:antialiased;padding:0 0 60px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0 14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;box-shadow:0 8px 26px rgba(224,36,64,.35)}
.brand h1{font-size:19px;letter-spacing:.3px}
.brand span{display:block;font-size:11px;color:var(--mut);letter-spacing:2px;text-transform:uppercase}
.who{font-size:13px;color:var(--mut)}
.who b{color:var(--txt)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.center{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px}
.login h2{margin-bottom:4px}
.login p{color:var(--mut);font-size:13px;margin-bottom:18px}

label{display:block;font-size:12px;color:var(--mut);margin:12px 0 6px;letter-spacing:.4px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(14,14,18,.6);color:var(--txt);font-size:14px;font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(224,36,64,.15)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}

button{cursor:pointer;border:none;border-radius:12px;padding:12px 16px;font-weight:600;
  font-family:inherit;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  transition:transform .12s,filter .12s}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
button.danger{background:linear-gradient(135deg,#ff6b6b,#e23a3a);color:#fff}
button.sm{padding:7px 11px;font-size:12px;border-radius:9px}
button:disabled{opacity:.4;cursor:not-allowed}
.btnbar{display:flex;gap:10px;margin-top:18px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tab{padding:9px 16px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--mut);font-size:13px;font-weight:600;cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
.panel{display:none}.panel.active{display:block}
.hide{display:none !important}   /* conditional form rows (quick.html "Other…", move dialog) */

.sec-title{font-size:15px;margin:4px 0 14px;display:flex;align-items:center;gap:8px}
.muted{color:var(--mut);font-size:13px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.pill.ok{background:rgba(52,211,153,.16);color:var(--ok)}
.pill.due{background:rgba(251,191,36,.16);color:var(--warn)}
.pill.no{background:rgba(248,113,113,.16);color:var(--bad)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase}
tr:hover td{background:rgba(255,255,255,.02)}
.grid-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.paycell{cursor:pointer;border-radius:8px;padding:6px 8px;text-align:center;min-width:74px;font-weight:600}
.paycell.paid{background:rgba(52,211,153,.14);color:var(--ok)}
.paycell.due{background:rgba(251,191,36,.13);color:var(--warn);border:1px dashed rgba(251,191,36,.5)}
.paycell.locked{color:var(--mut);opacity:.45;cursor:not-allowed}
.paycell:hover{outline:1px solid var(--acc)}

.list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.list-item .meta{font-size:12px;color:var(--mut)}

.modal-bg{position:fixed;inset:0;background:rgba(4,7,18,.7);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:50;padding:20px}
.modal-bg.show{display:flex}
.modal{width:100%;max-width:440px;margin:auto;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:13px 20px;border-radius:12px;
  font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));box-shadow:0 12px 30px rgba(0,0,0,.4);
  z-index:80;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{background:var(--bad);color:#fff}
.note{font-size:12px;color:var(--warn);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
  padding:10px 12px;border-radius:10px;margin:10px 0;line-height:1.5}
.empty{text-align:center;color:var(--mut);padding:30px;font-size:14px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== v2 additions ===== */
.paycell.bonus{background:var(--pay-bonus-bg);color:var(--pay-bonus-fg)}
.badge-kick{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;background:rgba(248,113,113,.16);color:var(--bad)}
/* previous teacher after a group move — informational, so it stays quiet next
   to the red KICKED/OWES badges; the teacher's name is the green part */
.prevt{display:inline-flex;align-items:center;gap:4px;max-width:170px;vertical-align:middle;
  margin-left:6px;padding:2px 7px;border-radius:999px;font-size:10px;line-height:1.5;
  white-space:nowrap;background:rgba(52,211,153,.14)}
.prevt b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--ok)}
tr.kicked td b{opacity:.55;text-decoration:line-through}
.lookup{margin:12px 0;padding:14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.lookup.bad{border-color:rgba(248,113,113,.4)}
.lookup .big{font-size:16px;font-weight:700}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 16px}
.kpi .tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.kpi .tile .n{font-size:24px;font-weight:800}
.kpi .tile .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;margin-top:4px}

/* leaderboard */
.lb-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-size:22px;font-weight:800;text-align:center;color:var(--mut)}
.lb-rank.g1{color:#ffd45b}.lb-rank.g2{color:#cfd6e6}.lb-rank.g3{color:#e0a26a}
.lb-name{font-size:16px;font-weight:700}
.lb-meta{font-size:11px;color:var(--mut);margin-top:2px}
.lb-share{font-size:18px;font-weight:800;text-align:right}
.lb-share .u{font-size:11px;color:var(--mut);font-weight:400;margin-left:4px}
.lb-row.top1{background:linear-gradient(90deg,rgba(255,212,91,.12),transparent 70%)}

/* ===== admin v2: drill-down + spreadsheet cells ===== */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;margin:14px 0}
.crumb a{color:var(--acc);cursor:pointer;font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--mut)}
.crumb .cur{font-weight:700}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.toolbar .grow{flex:1}
.list-item.click{cursor:pointer}
.list-item.click:hover{border-color:var(--acc);background:rgba(148,152,166,.08)}
.openarrow{color:var(--acc);font-weight:800;margin-left:8px}
/* base cell metrics; the colour code itself lives in the payment-grid block below */
.paycell.empty{color:var(--mut);opacity:.45;background:transparent;font-weight:700}
.paycell .amt{font-size:14px;font-weight:800;line-height:1.05}
.paycell .dt{font-size:9px;color:var(--mut);font-weight:600;margin-top:2px;letter-spacing:.3px}
.paycell .bchip{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--pay-bonus-edge);color:#fff;font-size:11px;font-weight:800}
th .mhead{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.colrm{cursor:pointer;color:var(--bad);font-weight:800;opacity:.55}
.colrm:hover{opacity:1}
tr.kicked b{opacity:.55;text-decoration:line-through}
.rowbtns{display:flex;gap:6px;justify-content:flex-end}

/* =====================================================================
   PAYMENT GRID — the cell colour code
   Colour is never the only signal: every method also carries its own
   glyph (top-right) and its own left rail, so the code survives
   colour-blindness, a dim phone screen and a black-and-white printout.
   Tinted fill + rail beats the old transparent outline for scanning a
   dense grid at a glance.
   ===================================================================== */
.paycell{
  position:relative; overflow:hidden;
  border:1px solid transparent; border-left-width:3px;
  border-radius:10px; padding:7px 9px 6px; min-width:78px;
  background:transparent;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* the glyph: second, redundant signal for the same fact as the colour */
.paycell.cash::after,.paycell.card::after,.paycell.bonus::after,.paycell.other::after{
  position:absolute; top:3px; right:4px; font-size:10px; line-height:1;
  opacity:.92; pointer-events:none;
}
.paycell.cash  { background:var(--pay-cash-bg);  border-color:var(--pay-cash-edge);  color:var(--pay-cash-fg) }
.paycell.card  { background:var(--pay-card-bg);  border-color:var(--pay-card-edge);  color:var(--pay-card-fg) }
.paycell.bonus { background:var(--pay-bonus-bg); border-color:var(--pay-bonus-edge); color:var(--pay-bonus-fg) }
.paycell.other { background:var(--pay-other-bg); border-color:var(--pay-other-edge); color:var(--pay-other-fg) }
.paycell.cash::after  { content:"💵" }
.paycell.card::after  { content:"💳" }
.paycell.bonus::after { content:"🎁" }
.paycell.other::after { content:"•" }
/* the tint stays soft; the rail carries the colour at full strength */
.paycell.cash,.paycell.card,.paycell.bonus,.paycell.other{
  border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent;
}
.paycell .amt{font-size:15px;font-weight:800;line-height:1.1;letter-spacing:.2px}
.paycell .dt{font-size:9px;opacity:.72;font-weight:600;margin-top:2px;letter-spacing:.3px;color:inherit}
.paycell .inst{font-size:9px;font-weight:800;opacity:.9;margin-left:3px;vertical-align:super}
.paycell.bonus .bchip{
  width:20px;height:20px;background:var(--pay-bonus-edge);color:#fff;
  font-size:11px;font-weight:800;border:0}

/* next month due — an invitation, not a warning */
.paycell.due{
  background:var(--pay-due-bg); color:var(--pay-due-fg);
  border:1.5px dashed var(--pay-due-edge); border-left-width:1.5px;
  font-weight:700; letter-spacing:.2px;
}
.paycell.due:hover{
  background:color-mix(in srgb, var(--pay-due-edge) 16%, transparent);
  transform:translateY(-1px); box-shadow:var(--e2);
}
/* not payable yet — present but silent */
.paycell.locked{
  border-color:transparent; border-left-color:transparent;
  color:var(--mut); opacity:.34; cursor:default; background:transparent;
}
.paycell.locked:hover{outline:none;transform:none;box-shadow:none}
.paycell.empty{color:var(--mut);opacity:.45;background:transparent;font-weight:700}

.paycell:not(.locked):not(.ro):hover{
  transform:translateY(-1px); box-shadow:var(--e2); outline:none;
  filter:saturate(1.15);
}
.paycell:not(.locked):not(.ro):active{transform:translateY(0)}

/* teacher read-only cells: same code, no affordance */
.paycell.ro{cursor:default}
.paycell.ro:hover{outline:none;transform:none;box-shadow:none}

/* legend chips under the grid — same vocabulary as the cells */
.paylegend{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.paylegend .lg{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;
  border:1px solid transparent;border-left-width:3px;white-space:nowrap;
}
.paylegend .lg.cash {background:var(--pay-cash-bg); border-left-color:var(--pay-cash-edge); color:var(--pay-cash-fg)}
.paylegend .lg.card {background:var(--pay-card-bg); border-left-color:var(--pay-card-edge); color:var(--pay-card-fg)}
.paylegend .lg.bonus{background:var(--pay-bonus-bg);border-left-color:var(--pay-bonus-edge);color:var(--pay-bonus-fg)}
.paylegend .lg.due  {background:var(--pay-due-bg);  border:1.5px dashed var(--pay-due-edge); color:var(--pay-due-fg)}
.paylegend .lg.lock {color:var(--mut);opacity:.7}
.namelink{cursor:pointer;color:var(--acc)}
.namelink:hover{text-decoration:underline}

/* installment count badge inside a pay cell */
.inst{font-size:10px;font-weight:700;opacity:.85;margin-left:3px;vertical-align:super}

/* attendance */
.att-row{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--line)}
.att-toggle{width:46px;height:46px;border-radius:12px;border:2px solid;font-size:20px;font-weight:800;cursor:pointer;background:transparent}
.att-toggle.pres{border-color:#3aa76d;color:#3aa76d;background:rgba(58,167,109,.12)}
.att-toggle.abs{border-color:#e0534f;color:#e0534f;background:rgba(224,83,79,.12)}
.att-head{margin-bottom:10px;font-size:15px}
.att-nav{display:flex;align-items:center;gap:12px;justify-content:center;margin:4px 0 12px}
.att-nav b{min-width:120px;text-align:center}
.att-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-weight:800;border:2px solid transparent;cursor:pointer;background:transparent}
.att-mark.pres{border-color:#3aa76d;color:#3aa76d;background:rgba(58,167,109,.12)}
.att-mark.abs{border-color:#e0534f;color:#e0534f;background:rgba(224,83,79,.12)}
.att-mark.none{color:var(--muted);border:none;cursor:default}
span.att-mark{cursor:default}

/* ===== LIGHT THEME (toggle via data-theme="light" on <html>) ===== */
:root[data-theme="light"]{
  --bg:#eff1f5; --bg2:#e3e5eb; --card:rgba(255,255,255,.92); --line:rgba(52,58,74,.13);
  --txt:#232733; --mut:#666e7e; --acc:#4f46e5; --acc2:#7c6ef6;
  --grad-a:#7c6ef6; --grad-b:#4f46e5;
  --ok:#0f9d58; --warn:#bd8400; --bad:#d8453f;
  --thead:#eceef2;
  --top-bg:#232b52; --top-txt:#f3f5fc; --top-mut:#a9b2d6; --top-line:rgba(255,255,255,.14);
  /* darker foregrounds so every amount clears 4.5:1 on the light card */
  --pay-cash-fg:#0b7a43;  --pay-cash-bg:rgba(15,157,88,.11);   --pay-cash-edge:#0f9d58;
  --pay-card-fg:#8a5d00;  --pay-card-bg:rgba(189,132,0,.13);   --pay-card-edge:#bd8400;
  --pay-bonus-fg:#2c46b5; --pay-bonus-bg:rgba(58,91,214,.10);  --pay-bonus-edge:#3a5bd6;
  --pay-other-fg:#3f4a6b; --pay-other-bg:rgba(28,46,110,.07);  --pay-other-edge:#5c6688;
  --pay-due-fg:#2c46b5;   --pay-due-bg:rgba(58,91,214,.06);    --pay-due-edge:#3a5bd6;
  --pay-debt-fg:#0e7490;  --pay-debt-bg:rgba(14,116,144,.10);  --pay-debt-edge:#0891b2;
  --e1:0 1px 2px rgba(38,36,44,.08);
  --e2:0 6px 18px rgba(38,36,44,.10);
  --e3:0 22px 60px rgba(38,36,44,.18);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 12% -8%,rgba(201,32,60,.07),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(120,126,140,.08),transparent 55%),
    linear-gradient(160deg,var(--bg),var(--bg2));
}
:root[data-theme="light"] .card{box-shadow:0 12px 34px rgba(38,36,44,.10)}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{background:#fff;color:var(--txt)}
:root[data-theme="light"] .tab{background:rgba(46,44,54,.05)}
/* the rule above outranks .tab.active — without this, every in-page sub-tab lost its
   active gradient in day mode (white label on a pale chip) */
:root[data-theme="light"] .tab.active{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
:root[data-theme="light"] .logo{box-shadow:0 8px 22px rgba(201,32,60,.25)}

/* ===== Payment confirmation popup (pending / done / errors) ===== */
.npop-bg{position:fixed;inset:0;background:rgba(2,6,20,.62);display:none;align-items:flex-start;justify-content:center;padding:18px;z-index:130;overflow-y:auto;-webkit-overflow-scrolling:touch}
.npop-bg.show{display:flex}
.npop-bg>.card{margin:auto}
.npop-card{max-width:390px;width:100%;text-align:center}
.npop-card.error{border-color:var(--bad);box-shadow:0 0 0 2px rgba(248,113,113,.28),0 18px 50px rgba(0,0,0,.45)}
.npop-ico{font-size:46px;line-height:1;margin:4px 0 10px;display:inline-block}
.npop-card h3{margin:0 0 6px;font-size:19px}
.npop-card h3.red{color:var(--bad)}
.npop-card p{color:var(--mut);font-size:13px;margin-bottom:14px;line-height:1.5}
.npop-card .btnbar{margin-top:8px}

/* ===== Admission / contact buttons ===== */
.contacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.cbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;text-decoration:none;font-size:16px;border:1px solid var(--line)}
.cbtn.call{background:rgba(15,157,88,.14)} .cbtn.sms{background:rgba(58,91,214,.14)} .cbtn.tg{background:rgba(0,136,204,.16)}
.cbtn:active{transform:scale(.96)}
.cphone{font-size:13px;color:var(--mut);font-weight:600}
.adm-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:var(--card)}
.adm-card.invest{border-color:var(--ok);box-shadow:0 0 0 2px rgba(15,157,88,.18)}
.adm-card.active{border-color:var(--acc);box-shadow:0 0 0 2px rgba(224,36,64,.16)}
.adm-card .nm{font-weight:700;font-size:15px} .adm-card .meta{color:var(--mut);font-size:12px;margin-top:2px}
.adm-card .cmt{margin-top:8px;font-size:13px;background:rgba(0,0,0,.04);border-radius:8px;padding:8px}
.adm-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.badge-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;margin-left:6px}
.dayfilter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.invest-warn{color:var(--ok);font-weight:700;font-size:12px;margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* group level chip */
.lvl-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(226,48,72,.13);color:var(--acc);border:1px solid var(--line);vertical-align:middle}

/* group "lessons stopped" chip (admin sets it in Edit group) */
.pause-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(251,191,36,.14);color:var(--warn);border:1px solid rgba(251,191,36,.35);vertical-align:middle}
.scroll{overflow:auto}

/* teacher-initiated moves: ⏳ pending chip (click = cancel), incoming-request
   card in the group view, and accepted/rejected notice cards on My groups */
.mv-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(251,191,36,.14);color:var(--warn);border:1px solid rgba(251,191,36,.35);
  vertical-align:middle;cursor:pointer;white-space:nowrap}
.mv-note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-size:13px;line-height:1.6}
.mv-note.ok{border-color:rgba(15,157,88,.4);background:rgba(15,157,88,.08)}
.mv-note.bad{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.mvreq{margin-bottom:12px}
.mvreq-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.mvreq-row .meta{color:var(--mut);font-size:12px;margin-top:2px;line-height:1.6}

/* overdue (previous months unpaid) — flickering red warning */
@keyframes flickerRed{ 0%,49%{background:rgba(248,113,113,.22)} 50%,100%{background:transparent} }
tr.overdue td{ animation:flickerRed 1.1s steps(1,end) infinite; }
tr.overdue td:first-child{ box-shadow:inset 3px 0 0 var(--bad); }
@media (prefers-reduced-motion: reduce){ tr.overdue td{ animation:none; background:rgba(248,113,113,.20); } }

/* poor attendance (over monthly miss threshold) — flickering red */
tr.att-poor td, .att-row.att-poor{ animation:flickerRed 1.1s steps(1,end) infinite; }
.att-row.att-poor{ border-radius:8px; padding-left:6px; padding-right:6px; }
@media (prefers-reduced-motion: reduce){ tr.att-poor td, .att-row.att-poor{ animation:none; background:rgba(248,113,113,.20); } }

/* number input with a fixed unit suffix */
.amtwrap{ position:relative; display:flex; align-items:center; }
.amtwrap input{ flex:1; padding-right:74px; }
.amtwrap .amtsuf{ position:absolute; right:12px; color:var(--muted); font-size:13px; pointer-events:none; }

/* daily-report grand total row */
.totrow td{ border-top:2px solid var(--line); font-weight:600; }

/* overdue card marked handled (copied) */
.adm-card.done{ border-color:rgba(67,160,71,.55); background:rgba(67,160,71,.10); }
.adm-card.done .nm{ color:#43a047; }
.ovOk{ background:var(--ok,#43a047); }

/* ===== Calls queue ===== */
.call-card{ transition:background .2s; }
.call-card.call-red td, .call-card.call-red{ animation:flickerRed 1.1s steps(1,end) infinite; border-color:rgba(248,113,113,.55); }
.call-card.call-yellow{ background:rgba(253,216,53,.12); border-color:rgba(253,216,53,.55); }
.call-card.call-green{ background:rgba(67,160,71,.10); border-color:rgba(67,160,71,.5); }
.call-card.call-green .nm{ color:#43a047; }
.call-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.call-actions .sm{ flex:0 0 auto; }
.call-state{ margin-top:8px; font-size:13px; color:var(--mut); }
button.calldanger{ background:var(--bad); color:#fff; border-color:transparent; }
@media (prefers-reduced-motion: reduce){ .call-card.call-red,.call-card.call-red td{ animation:none; background:rgba(248,113,113,.18); } }

/* ===== CALLS v2 board (shared: teacher / quick / admin) ===== */
.call-card.call-amber{ background:rgba(255,179,0,.10); border-color:rgba(255,179,0,.55); animation:none; }
.cb-tabs .tab{ padding:7px 12px; }
.cb-strip{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.cb-tstat{ font-size:12px; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.cb-tstat b{ color:#f87171; }
.cb-steps{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cb-step{ font-size:11.5px; color:var(--mut); border:1px dashed var(--line); border-radius:999px; padding:2px 9px; opacity:.75; }
.cb-step.on{ color:#43a047; border-style:solid; border-color:rgba(67,160,71,.5); opacity:1; }
.cb-late{ font-size:11.5px; color:#f87171; font-weight:700; margin-left:6px; }
.cb-callbtn{ width:auto; height:auto; padding:10px 22px; border-radius:10px; font-size:14.5px;
  font-weight:600; background:var(--acc); color:#fff; display:inline-flex;
  align-items:center; gap:7px; text-decoration:none; }
.call-actions a, .call-actions button{ width:auto; }
a.cb-msg{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:8px 14px; border-radius:10px; background:var(--acc); color:#fff; font-size:13px; }
a.cb-msg.ghost{ background:transparent; color:var(--mut); border:1px solid var(--line); }
.cb-radios{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.cb-radio{ display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; font-size:14px; }
.cb-radio:has(input:checked){ border-color:var(--acc); background:rgba(229,57,53,.08); }
.cb-radio input{ width:auto; margin:0; accent-color:var(--acc); }
.cb-pill{ font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; border:1px solid var(--line); color:var(--mut); }
.cb-pill.red{ color:#f87171; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.10); }
.cb-pill.ok{ color:#43a047; border-color:rgba(67,160,71,.45); }
.cb-pill.amber{ color:#ffb300; border-color:rgba(255,179,0,.5); background:rgba(255,179,0,.10); }
.cb-tcard{ animation:none; }
.cb-done{ margin-top:10px; padding:10px 12px; border-radius:12px; font-size:14px;
  background:rgba(67,160,71,.14); border:1px solid rgba(67,160,71,.5); color:#43a047; }
/* the card being worked stays pinned on top of its list until every step is done */
.call-card.cb-focus{ outline:2px solid var(--warn); outline-offset:-1px; }

/* ===== ✉️ Auto messages editor (admin Messages tab) ===== */
.msg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; align-items:start; }
@media (max-width:760px){ .msg-grid{ grid-template-columns:1fr; } }
.msg-sec{ margin:18px 0 10px; font-size:14px; font-weight:700; color:var(--mut);
  display:flex; align-items:center; gap:10px; }
.msg-sec::after{ content:""; flex:1; height:1px; background:var(--line); }
.msg-card{ border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  background:var(--card); display:flex; flex-direction:column; gap:10px; }
.msg-name{ font-weight:700; font-size:14.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msg-edited{ font-size:10.5px; font-weight:700; color:var(--warn); border:1px solid var(--warn);
  border-radius:999px; padding:1px 8px; letter-spacing:.3px; text-transform:uppercase; }
.msg-hint{ font-size:12.5px; color:var(--mut); margin-top:3px; line-height:1.5; }
.msg-ta{ width:100%; resize:none; overflow:hidden; line-height:1.55; font-size:14px; min-height:44px; }
.msg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.msg-chip{ width:auto; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  border:1px dashed var(--line); background:transparent; color:var(--mut); cursor:pointer; }
.msg-chip:hover{ color:var(--txt); border-style:solid; border-color:var(--acc); }
.msg-prev-t{ font-size:11px; color:var(--mut); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
/* the bubble previews the STUDENT PORTAL, which is always light — fixed portal palette on purpose */
.msg-bubble{ margin-top:6px; background:#fff; color:#1a1d24; border:1px solid #e7e9ee;
  border-left:3px solid #E53935; border-radius:12px; padding:10px 12px; font-size:13.5px;
  line-height:1.55; word-break:break-word; min-height:20px; }
.msg-bubble a{ color:#1565c0; text-decoration:underline; }
.msg-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.msg-foot button{ width:auto; }
.msg-count{ font-size:11.5px; color:var(--mut); white-space:nowrap; }
.msg-field .msg-fl{ display:flex; align-items:center; gap:6px; margin:8px 0 4px; }
.msg-field .msg-count{ margin-left:auto; font-weight:400; }
/* one-time kicked-debt declaration gate (teacher cabinet) */
.kd-gate{ position:fixed; inset:0; z-index:300; background:var(--bg,#111);
  overflow-y:auto; padding:18px 16px 40px; }
.kd-box{ max-width:640px; margin:0 auto; }
.kd-row{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
.kd-row.ok{ border-color:rgba(67,160,71,.5); }
.kd-ctl{ display:flex; gap:8px; margin-top:8px; align-items:center; flex-wrap:wrap; }
.kd-ctl input{ flex:1 1 140px; min-width:120px; }
.kd-ctl button{ width:auto; flex:0 0 auto; }

/* ===== EDUNEST mobile refinements (phones ≤560px) ===== */
@media (max-width:560px){
  .wrap{padding:0 12px}
  header.top{padding:14px 0 10px;gap:10px}
  .brand h1{font-size:17px}
  .brand span{font-size:10px;letter-spacing:1.5px}
  .logo{width:38px;height:38px}
  .card{padding:16px}
  /* 16px inputs stop iOS from auto-zooming on focus */
  input,select,textarea{font-size:16px;padding:13px 14px}
  label{margin:14px 0 6px}
  button{padding:13px 16px;min-height:46px}
  button.sm{padding:9px 12px;font-size:13px;min-height:0}
  /* tabs become a horizontal swipe strip instead of stacking to many rows */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:14px 0;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;white-space:nowrap;padding:10px 14px}
  /* stack side-by-side fields on narrow screens */
  .row>*{min-width:100%}
  .btnbar{flex-wrap:wrap}
  .btnbar>button{flex:1 1 100%}
  .npop-bg{padding:12px}
  .amtwrap input{padding-right:78px}
  /* call-queue action buttons sit comfortably on small screens */
  .call-actions .sm{flex:1 1 auto;min-width:64px}
  .contacts{gap:10px}
  .cbtn{width:40px;height:40px}
  /* list rows must be able to WRAP: a row whose buttons cannot shrink is
     wider than min-content 390px, and a real phone then widens the whole
     layout viewport (the "system is wider than the screen" bug) */
  .list-item{flex-wrap:wrap}
  .list-item > div:first-child{min-width:0;flex:1 1 220px}
  .list-item .rowbtns{flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start;row-gap:6px}
  .list-item .rowbtns .openarrow{margin-left:auto}
}

/* calls: comment box spacing */
.call-card .call-cmt{margin-top:8px}
.call-card label{margin-top:8px}
.calc-box{background:rgba(229,57,53,.08);border:1px solid var(--accent,#E53935);border-radius:12px;padding:14px;font-size:14px;line-height:1.6}
.acc{background:var(--card,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.acc-head{padding:14px 16px;cursor:pointer;font-size:15px}
.acc-body{padding:2px 14px 14px}

/* ===== EDUNEST — brand logo, typography & pointer-focus polish ===== */
:root{
  --logo-dark:url("https://i.ibb.co/84sk7q6Q/image-2026-06-19-19-36-50.png");     /* white logo → dark backgrounds */
  --logo-light:url("https://i.ibb.co/rR4gBPW8/EDUNEST-LOGO-BLACK-WITHOUT-BG.png"); /* black logo → light backgrounds */
}
.logo{
  background:var(--logo-dark) center/contain no-repeat !important;
  box-shadow:none !important; color:transparent !important; font-size:0 !important; border-radius:8px;
}
:root[data-theme="light"] .logo{ background-image:var(--logo-light) !important; }

/* Typography — formal, accurate numerals */
body{ font-feature-settings:"tnum"; letter-spacing:.1px; }
h1,h2,h3,.sec-title,.brand h1{ letter-spacing:.2px; font-weight:700; }
td,.n,.amt,.tile .n,.kpi .n,.lb-share,.paycell,.who b,input,select,.badge-n,.pill,.crumb,.inst,.dt{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.tile .n,.kpi .n{ letter-spacing:.3px }

/* Pointer-focus — lively hover: subtle lift + darker outline */
@media (hover:hover){
  button,.tab,.list-item,.adm-card,.tile,.acc-head,.att-toggle,.att-mark,.cbtn,.paycell.ro,.lb-row{
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  }
  button:hover:not(:disabled){ transform:translateY(-1px) scale(1.03); box-shadow:0 8px 22px rgba(224,36,64,.28) }
  .tab:hover{ transform:translateY(-1px); border-color:rgba(226,48,72,.5) }
  .list-item:hover,.adm-card:hover,.tile:hover,.lb-row:hover{
    transform:translateY(-2px) scale(1.01); border-color:rgba(226,48,72,.45);
    box-shadow:0 12px 30px rgba(224,36,64,.13);
  }
  .acc:hover .acc-head{ background:rgba(148,152,166,.08) }
  tbody tr{ transition:background .14s ease, box-shadow .14s ease }
  tbody tr:hover{ background:rgba(148,152,166,.10); box-shadow:inset 3px 0 0 var(--mut) }
  input:hover,select:hover,textarea:hover{ border-color:rgba(226,48,72,.45) }
  .namelink:hover{ text-decoration:underline; cursor:pointer }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important }
  button:hover,.list-item:hover,.adm-card:hover,.tile:hover,.lb-row:hover{ transform:none !important }
}

/* ===== MATERIALS ===== */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.mat-tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 14px;
  text-align:center;cursor:pointer;transition:transform .12s,border-color .12s}
.mat-tile:hover{transform:translateY(-2px);border-color:var(--acc)}
.mat-tile .ic{font-size:30px;display:block;margin-bottom:8px}
.mat-tile .tl{font-weight:700;font-size:14px}
.mat-tile .sub{color:var(--mut);font-size:12px;margin-top:3px}
.mat-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 14px}
.mat-search{flex:1;min-width:180px}
.mat-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--card)}
.mat-card .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mat-card .nm{font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mat-card .by{color:var(--mut);font-size:12px;margin-top:3px}
.mat-card .instr{margin-top:9px;font-size:13px;line-height:1.5;background:rgba(0,0,0,.04);border-radius:9px;padding:9px 11px;white-space:pre-wrap}
.mat-card .vers{color:var(--mut);font-size:11px;margin-top:7px}
.mat-badges{display:inline-flex;gap:5px;flex-wrap:wrap;vertical-align:middle}
.mat-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.4px}
.mat-badge.new{background:var(--ok);color:#04220f}
.mat-badge.upd{background:var(--warn);color:#2a1c00}
.mat-badge.draft{background:var(--mut);color:#fff}
.mat-badge.kind{background:rgba(226,48,72,.13);color:var(--acc);border:1px solid var(--line)}
.mat-metrics{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px}
.mat-metrics .st{color:var(--warn);letter-spacing:1px}
.mat-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mat-actions .sm{flex:0 0 auto}
.stars-in{display:inline-flex;flex-direction:row-reverse;gap:2px;font-size:22px;line-height:1}
.stars-in span{color:var(--mut);cursor:pointer;transition:color .1s}
.stars-in span:hover,.stars-in span:hover ~ span,.stars-in span.on,.stars-in span.on ~ span{color:var(--warn)}
.heart{cursor:pointer;font-size:20px;line-height:1;user-select:none;background:none;border:none;padding:2px 4px}
.heart.on{filter:none}
.likebtn.on{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
.audio-modal .ap-status{padding:20px;text-align:center;color:var(--mut)}
.ap-time{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mut)}
.ap-time input[type=range]{flex:1}
.ap-row{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}
.ap-row.ap-sub{margin-top:12px}
.ap-play{width:56px;height:56px;border-radius:50%;font-size:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff}
.ap-speed{padding:7px 9px;border-radius:9px}
.mat-cmt-row{border-bottom:1px solid var(--line);padding:10px 0}
.mat-cmt-row:last-child{border-bottom:none}
.mat-cmt-row .who{font-weight:700;font-size:13px}
.mat-cmt-row .when{color:var(--mut);font-size:11px}
.mat-cmt-row .bd{font-size:13px;margin:5px 0 7px;line-height:1.5}

/* ===== MATERIALS v2 — folders + counts ===== */
.mat-tile{position:relative}
.mat-count{position:absolute;top:8px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--acc);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.mat-type{display:flex;gap:8px;margin-bottom:6px}
.mat-type .type-btn{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:10px;font-weight:700;font-size:13px}
.mat-type .type-btn.active{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
.mat-form{max-height:88vh;overflow:auto}
.part-row{display:grid;grid-template-columns:1fr 1.3fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.part-row input,.part-row select{margin:0}
.part-row .sm{padding:8px 10px}
@media (max-width:560px){ .part-row{grid-template-columns:1fr 1fr;} .part-row .sm{grid-column:2;justify-self:end} }

/* =====================================================================
   APP SHELL — sidebar layout (redesigned cabinets). Scoped to .shell so
   pages still on .wrap are unaffected. Theme-aware via the CSS vars.
   ===================================================================== */
:root[data-theme="light"] body{ background:
  radial-gradient(1200px 600px at 15% -10%, #eef1ff 0%, transparent 60%),
  radial-gradient(1000px 700px at 100% 0%, #f3edff 0%, transparent 55%), #eff2f9; }
/* ===== Overlay drawer navigation =====
   Content is ALWAYS in normal flow, full width, never hidden. The menu is a
   FIXED top layer that slides in over a dimmed backdrop. Because the drawer +
   backdrop sit on a higher stacking layer than the content, the page can never
   paint over them on scroll — the overlap bug is structurally impossible. */
.shell{ display:block; max-width:1360px; margin:0 auto; padding:80px 18px 18px; min-height:100vh; }
.content{ min-width:0; display:flex; flex-direction:column; gap:18px; }
body.nav-open{ overflow:hidden; }   /* freeze the page behind the open drawer */

/* backdrop: dims + blocks the page while the drawer is open; tap it to close */
.nav-backdrop{ position:fixed; inset:0; z-index:80; background:rgba(12,16,34,.5);
  opacity:0; visibility:hidden; transition:opacity .22s ease; }
.shell.drawer-open .nav-backdrop{ opacity:1; visibility:visible; }

/* the drawer: fixed, off-screen by default, slides in over the backdrop */
.sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:90;
  width:284px; max-width:84vw; padding:158px 12px 18px; /* clears the docked top bar */
  background:var(--bg2); border-right:1px solid var(--line); /* opaque: the page must not bleed through the drawer */
  display:flex; flex-direction:column; gap:4px; overflow-y:auto;
  transform:translateX(-100%); transition:transform .24s ease;
  box-shadow:0 20px 60px rgba(10,15,40,.28); }
.shell.drawer-open .sidebar{ transform:translateX(0); }

/* fixed menu button — always visible on the very top layer; ☰ ↔ ✕.
   It sits ON the dark headline bar when closed, on the drawer card when open. */
.menu-btn{ position:fixed; top:9px; left:12px; z-index:100; display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0; border-radius:13px;
  background:transparent; border:1px solid transparent; color:var(--top-txt); cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), color var(--t-med) var(--ease); }
.menu-btn:hover{ background:rgba(255,255,255,.10); }
.shell.drawer-open .menu-btn{ color:var(--txt); }
.shell.drawer-open .menu-btn:hover{ background:rgba(148,152,166,.14); }
.menu-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.menu-btn .ic-close{ display:none; }
.shell.drawer-open .menu-btn .ic-open{ display:none; }
.shell.drawer-open .menu-btn .ic-close{ display:block; }
.topbar-right{ display:flex; align-items:center; gap:10px; min-width:0; }
.sidebar > .brand{ padding:8px 10px 16px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.sidebar .tabs{ display:flex; flex-direction:column; gap:3px; margin:0; flex-wrap:nowrap; overflow-y:auto; }
.sidebar .tab{ display:flex; align-items:center; gap:12px; justify-content:flex-start;
  padding:11px 13px; border-radius:13px; background:transparent; border:1px solid transparent;
  color:var(--mut); font-weight:600; font-size:14px; text-align:left; }
.sidebar .tab svg{ width:20px; height:20px; flex:0 0 20px; stroke:currentColor; }
.sidebar .tab .lbl{ flex:1; }
.sidebar .tab:hover{ background:rgba(226,48,72,.10); color:var(--txt); }
.sidebar .tab.active{ background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#fff;
  border-color:transparent; box-shadow:0 10px 24px rgba(201,32,60,.30); }
.sidebar .tab.active svg{ color:#fff; }
.sidebar .tab .badge-n{ margin-left:0; }
.help-card{ margin-top:auto; display:flex; flex-direction:column; gap:8px; text-decoration:none;
  background:linear-gradient(135deg, rgba(224,36,64,.12), rgba(160,164,178,.10));
  border:1px solid var(--line); border-radius:16px; padding:14px; color:var(--txt); }
.help-card .help-ico{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); font-size:18px; }
.help-card b{ font-size:14px; display:block; } .help-card .hc-sub{ color:var(--mut); font-size:12px; }
.help-card .help-btn{ margin-top:2px; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:9px; font-weight:700; font-size:13px; }
.help-card:hover .help-btn{ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border-color:transparent; }
/* ===== the top headline bar — a fixed strip that DOCKS INTO the drawer =====
   Closed: full-width app bar (navy by day, charcoal at night) carrying the
   brand title, "Signed in as", the day/night toggle and Log out. Open: the
   SAME element re-lays itself out as the drawer's header; common.js FLIPs
   each item from its bar position into its drawer slot, so the headline
   visibly glides into the sidebar and back out when it closes. */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:62px; padding:8px 16px 8px 64px;
  color:var(--top-txt);
  transition:color var(--t-med) var(--ease); }
/* the bar's painted surface — a separate fixed layer common.js keeps sized to
   the .topbar box, so the paint itself MORPHS between the full-width bar and
   the drawer header (a "reverse paint" into the sidebar, and back out on
   close) instead of blinking away while the items fly */
.topbar .tb-skin{ position:fixed; top:0; left:0; z-index:-1; width:100%; height:62px;
  background:var(--top-bg); border-right:1px solid transparent;
  border-bottom:1px solid var(--top-line); box-shadow:var(--e2);
  transition:width .34s var(--ease), height .34s var(--ease),
             background-color .34s var(--ease), border-color .34s var(--ease),
             box-shadow .34s var(--ease); }
.shell.drawer-open .topbar .tb-skin{ background:var(--bg2);
  border-right-color:var(--line); border-bottom-color:var(--line); box-shadow:none;
  /* opening: keep the bar's dark paint on the shrinking shape a beat longer,
     so it visibly pours into the drawer before settling into the header */
  transition:width .34s var(--ease), height .34s var(--ease),
             background-color .22s var(--ease) .12s, border-color .34s var(--ease),
             box-shadow .34s var(--ease); }
:root[data-theme="light"] .shell.drawer-open .topbar .tb-skin{ background:#fbfbfe; }
.topbar .brand{ min-width:0; }
.topbar .brand .logo{ width:34px; height:34px; }
.topbar .brand h1{ font-size:16px; white-space:nowrap; }
.topbar .brand span{ color:var(--top-mut); font-size:10px; letter-spacing:1.6px; white-space:nowrap; }
.topbar .who{ color:var(--top-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .who b{ color:var(--top-txt); }
.topbar button.ghost{ color:var(--top-txt); border-color:var(--top-line); background:rgba(255,255,255,.06);
  white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
.topbar button.ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
/* the closed bar is dark in BOTH themes → always the white logo on it */
:root[data-theme="light"] .topbar .logo{ background-image:var(--logo-dark) !important; }
:root[data-theme="light"] .shell.drawer-open .topbar .logo{ background-image:var(--logo-light) !important; }

/* docked state: the headline becomes the drawer's header (above the tabs);
   the separator line under it is the tb-skin's bottom border */
.shell.drawer-open .topbar{ right:auto; width:284px; max-width:84vw; z-index:92; min-height:0;
  flex-direction:column; align-items:stretch; gap:12px; padding:12px 16px 16px;
  color:var(--txt); }
.shell.drawer-open .topbar .brand{ margin-left:48px; min-height:40px; } /* room for the ✕ button */
.shell.drawer-open .topbar .brand span{ color:var(--mut); }
.shell.drawer-open .topbar .who{ color:var(--mut); }
.shell.drawer-open .topbar .who b{ color:var(--txt); }
.shell.drawer-open .topbar-right{ flex-wrap:wrap; }
.shell.drawer-open .topbar-right .who{ flex:1 0 100%; }
.shell.drawer-open .topbar-right #logout{ flex:1; }
.shell.drawer-open .topbar button.ghost{ color:var(--txt); border-color:var(--line); background:transparent; }
.shell.drawer-open .topbar button.ghost:hover{ background:rgba(148,152,166,.12); }
.hero{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between;
  gap:20px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px 30px; }
.hero .hero-hi{ color:var(--mut); font-weight:600; font-size:15px; }
.hero h2{ font-size:clamp(24px,3.2vw,34px); margin:2px 0 6px; text-transform:uppercase; letter-spacing:.5px; }
.hero .sub{ color:var(--mut); font-size:14px; }
.hero .hero-img{ flex:0 0 auto; max-width:46%; display:flex; justify-content:flex-end; color:var(--acc); }
.hero .hero-img svg{ height:150px; width:auto; max-width:100%; }
.hero .hero-img.anim{ width:210px; height:170px; margin:-10px 0; }
.content .panels{ display:block; }
@media (max-width:880px){
  .shell{ padding:76px 12px 12px; }
  .content{ gap:14px; }
  .hero{ padding:20px 22px; } .hero .hero-img{ display:none; }
  .hero h2{ font-size:clamp(22px,7vw,30px); }
}
@media (max-width:520px){
  .shell{ padding:68px 10px 10px; }
  .topbar{ min-height:56px; padding:6px 10px 6px 58px; }
  .topbar .tb-skin{ height:56px; }
  .menu-btn{ top:6px; left:8px; }
  .topbar-right .who{ display:none; }        /* keep the top bar tidy on small phones */
  .shell:not(.drawer-open) .topbar .brand span{ display:none; }
  .shell.drawer-open .topbar{ padding:12px 16px 16px; }
  .shell.drawer-open .topbar-right .who{ display:block; }  /* the drawer has room for it */
}

/* =====================================================================
   STUDENT BELL + PANEL + GROUP COMPOSER
   ===================================================================== */

/* --- the one control on each student row --- */
.sbell{display:flex;align-items:center;gap:8px;margin-top:3px}
.bellbtn{position:relative;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:9px;padding:4px 7px;cursor:pointer;line-height:0;transition:.15s}
.bellbtn svg{width:15px;height:15px;fill:none}
.bellbtn:hover{background:rgba(226,48,72,.12);color:var(--txt);border-color:var(--acc)}
/* colour = engagement: green if they opened the portal within 3 days,
   red if they never signed up or have gone quiet. The unread count is a
   separate corner badge, so the two signals never get confused. */
.bellbtn.ok{color:var(--ok);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.bellbtn.ok:hover{background:rgba(52,211,153,.22);border-color:var(--ok)}
.bellbtn.stale{color:var(--bad);border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.12)}
.bellbtn.stale:hover{background:rgba(248,113,113,.22);border-color:var(--bad)}
.bellbtn .bdot{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;font-style:normal;
  display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--bg2)}
.sseen{font-size:11px;color:var(--mut);white-space:nowrap}
.sseen.stale{color:var(--bad);opacity:.85}

/* --- selection column: present always, revealed only in send mode --- */
.selcell{display:none;width:34px;padding-right:0 !important}
body.selmode .selcell{display:table-cell}
.selcell input{width:16px;height:16px;accent-color:var(--acc);cursor:pointer}
body.selmode tbody tr:hover td{background:rgba(148,152,166,.09)}

/* --- composer, top-right of the group list --- */
.gcomp{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;margin:0 0 14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
/* who the message goes to — sits on its own line above the text */
.gc-scope{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.gc-scope .gc-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.gcomp .gc-scope button{padding:8px 13px;font-size:12px;font-weight:700;border-radius:999px;
  background:rgba(255,255,255,.04);color:var(--mut);border:1px solid var(--line)}
.gcomp .gc-scope button.on{background:rgba(226,48,72,.14);color:var(--acc);border-color:rgba(226,48,72,.45)}
.gcomp textarea{flex:1;min-height:42px;max-height:120px;resize:vertical;padding:11px 13px;font-size:13px}
.gcomp .gc-side{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:132px}
.gcomp button{padding:11px 14px;font-size:13px;white-space:nowrap}
#gcCancel{display:none}
body.selmode #gcCancel{display:block}
#gcInfo{font-size:11px;color:var(--mut);text-align:center;min-height:14px}
body.selmode.selpicked #gcSend{background:linear-gradient(135deg,var(--ok),var(--acc2))}

/* --- bell panel --- */
.sp-bg{position:fixed;inset:0;z-index:70;background:rgba(4,7,18,.72);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:20px}
.sp-bg.show{display:flex}
.sp{width:100%;max-width:520px;max-height:min(86vh,720px);display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:pop .18s ease}
.sp-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.sp-who{flex:1;min-width:0}
.sp-who b{display:block;font-size:16px}
.sp-who span{font-size:12px;color:var(--mut)}
.sp-x{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:9px;
  padding:5px 9px;font-size:13px;cursor:pointer}
.sp-x:hover{color:var(--txt);border-color:var(--acc)}
.sp-tabs{display:flex;gap:6px;padding:12px 20px 0}
.sp-tabs button{flex:1;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:11px 11px 0 0;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:0}
.sp-tabs button.on{background:var(--card);color:var(--txt);border-color:var(--line)}
.sp-tabs button i{font-style:normal;font-size:11px;opacity:.75;margin-left:3px}
.sp-body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);
  border-top:1px solid var(--line)}
.sp-load,.sp-empty{padding:26px;text-align:center;color:var(--mut);font-size:13px}

/* messages, chat-style */
.sp-chat{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.msg{border-left:3px solid;border-radius:4px 13px 13px 4px;padding:10px 13px;
  background:rgba(255,255,255,.035);align-self:stretch}
.msg.read{border-left-color:var(--ok)}
.msg.unread{border-left-color:var(--bad);background:rgba(248,113,113,.07)}
.msg-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.msg-kind{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(226,48,72,.13);color:var(--acc)}
.msg-by{font-size:10px;color:var(--mut)}
.msg-body{font-size:13px;line-height:1.55}
/* live links inside a message — long URLs wrap instead of widening the bubble */
.msg-body a{color:var(--acc);font-weight:600;text-decoration:underline;
  overflow-wrap:anywhere;word-break:break-word}
.msg-foot{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:10px;color:var(--mut)}
.msg.read .msg-state{color:var(--ok)}
.msg.unread .msg-state{color:var(--bad);font-weight:700}

/* composer inside the panel */
.sp-compose{display:flex;align-items:flex-end;gap:9px;padding:12px 14px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.sp-compose textarea{flex:1;resize:none;min-height:42px;max-height:120px;padding:11px 13px;
  border-radius:14px;font-size:13px;line-height:1.45}
.sp-compose button{width:42px;height:42px;flex:0 0 42px;border-radius:50%;padding:0;font-size:15px}

/* devices */
.sp-devs{flex:1;overflow-y:auto;padding:16px 18px}
.sp-phone{font-size:12px;color:var(--mut);margin-bottom:12px}
.sp-phone b{color:var(--txt)}
/* admin-only portal account actions (Change number / Reset) in the Devices tab */
.sp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px}
.sp-actions button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  padding:7px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg2);color:var(--txt)}
.sp-actions [data-spreset]{color:var(--bad);border-color:var(--bad)}
.dev{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.dev:last-child{border-bottom:0}
.dev b{font-size:13px}
.dev-sub{font-size:12px;color:var(--mut);margin-top:2px}
.dev-tags{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.dtag{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);color:var(--mut)}
.dtag.on{background:rgba(52,211,153,.16);color:var(--ok);border-color:transparent}
.dtag.off{background:rgba(248,113,113,.14);color:var(--bad);border-color:transparent}

@media (max-width:560px){
  .gcomp{flex-direction:column}
  /* the column axis makes flex-basis a HEIGHT — the chips must not claim 100% of it */
  .gcomp .gc-scope{flex:0 0 auto;width:100%}
  .gcomp .gc-side{flex-direction:row;min-width:0;width:100%}
  .gcomp .gc-side button{flex:1}
  .sp{max-height:92vh}
}

/* =====================================================================
   CRAFT PASS — interaction states, motion, depth, waiting states.
   Appended last on purpose: equal-specificity rules here win, so the
   layer refines without rewriting what came before.
   ===================================================================== */

/* ---- baseline chrome ---- */
::selection{background:rgba(224,36,64,.30)}
*{scrollbar-width:thin;scrollbar-color:rgba(158,162,175,.35) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(158,162,175,.28);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(158,162,175,.5);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* keyboard focus is a first-class state, not an accident */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}

/* ---- buttons: lift on hover, sink on press, one motion vocabulary ---- */
button{transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
button:not(:disabled):not(.ghost):not(.link):hover{transform:translateY(-1px);box-shadow:var(--e2);filter:brightness(1.06)}
button:not(:disabled):active{transform:translateY(1px);box-shadow:none;filter:brightness(.97)}
button.ghost:hover{background:rgba(226,48,72,.08);border-color:rgba(226,48,72,.4)}

/* ---- cards & elevation: three levels, consistently applied ---- */
.card{box-shadow:var(--e2);transition:box-shadow var(--t-med) var(--ease)}
.modal{box-shadow:var(--e3)}
.list-item,.adm-card,.call-card{transition:border-color var(--t-fast) var(--ease),
  background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.list-item:hover,.adm-card:hover,.call-card:hover{border-color:rgba(226,48,72,.35)}

/* ---- sidebar: the hand feels the state change ---- */
.sidebar .tab{transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.sidebar .tab:hover{transform:translateX(2px)}
.sidebar .tab.active{transform:none}
.sidebar .tab svg{transition:transform var(--t-fast) var(--ease)}
.sidebar .tab:hover svg{transform:scale(1.08)}

/* ---- panels arrive, they don't snap ---- */
.panel.active{animation:panelIn var(--t-med) var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- tables: sticky headers, rows that answer hover, aligned digits ---- */
.grid-scroll{max-height:72vh}
.grid-scroll thead th{position:sticky;top:0;z-index:2;background:var(--thead);
  box-shadow:0 1px 0 var(--line)}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover td{background:rgba(148,152,166,.08)}
td{font-variant-numeric:tabular-nums}

/* ---- waiting looks like progress, not a stall ---- */
.skel{display:flex;flex-direction:column;gap:10px;padding:18px 14px}
.skel i{display:block;height:13px;border-radius:7px;
  background:linear-gradient(90deg,rgba(150,154,168,.10) 25%,rgba(150,154,168,.22) 45%,rgba(150,154,168,.10) 65%);
  background-size:220% 100%;animation:shimmer 1.3s var(--ease) infinite}
.skel i:nth-child(1){width:62%}.skel i:nth-child(2){width:88%}.skel i:nth-child(3){width:45%}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-40% 0}}

/* ---- empty states read as designed, not as missing data ---- */
.empty{border:1px dashed var(--line);border-radius:12px;line-height:1.6}

/* ---- small things that add up ---- */
.pill,.badge-n,.badge-kick,.ptag,.dtag{transition:filter var(--t-fast) var(--ease)}
.bellbtn{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.bellbtn:hover{transform:translateY(-1px)}
.bellbtn:hover svg{animation:ring .5s var(--ease)}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}60%{transform:rotate(9deg)}}
.toast{transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.sp{box-shadow:var(--e3)}
.msg{transition:background-color var(--t-fast) var(--ease)}
.paycell{transition:outline-color var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.paycell:not(.locked):hover{filter:brightness(1.12)}
.login.card{animation:panelIn var(--t-med) var(--ease)}

/* one switch turns every animation off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ===== hero KPI cards (live numbers, zero extra queries) ===== */
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  margin-top:14px;animation:panelIn var(--t-med) var(--ease)}
.kpi-card{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease)}
.kpi-card:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.kpi-card .kico{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center}
.kpi-card .kico svg{width:19px;height:19px}
.kpi-card .kbody{min-width:0}
.kpi-card .kbody b{display:block;font-size:20px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:.2px}
.kpi-card .kbody i{font-style:normal;font-size:11px;color:var(--mut);text-transform:uppercase;
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.kpi-card.t-acc  .kico{background:rgba(224,36,64,.13);color:var(--acc)}
.kpi-card.t-teal .kico{background:rgba(249,138,155,.15);color:var(--acc2)}
.kpi-card.t-ok   .kico{background:rgba(52,211,153,.14);color:var(--ok)}
.kpi-card.t-warn .kico{background:rgba(251,191,36,.16);color:var(--warn)}
.kpi-card.t-bad  .kico{background:rgba(248,113,113,.15);color:var(--bad)}
.kpi-card.t-warn .kbody b{color:var(--warn)}
.kpi-card.t-bad  .kbody b{color:var(--bad)}
/* minmax(0,…) not 1fr: a bare 1fr takes min-content as its floor, so the
   nowrap KPI labels widen the tracks past the container and scroll the phone sideways */
@media (max-width:880px){ .kpirow{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===== receptionist emoji picker ===== */
.rcp-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:4px}
.rcp-e{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:7px 0;font-size:18px;line-height:1;cursor:pointer}
.rcp-e:hover{border-color:var(--acc)}
.rcp-e.on{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent}

/* =====================================================================
   PAYMENT GRID — row + header layer (loaded last, wins by order)
   Goal: read a wide money table at a glance. The row states carry the
   urgency, the cells carry the method, and the two never use the same
   colour for different facts.
   ===================================================================== */

/* Header: quieter chrome, stronger separation from the data */
.grid-scroll thead th{
  font-size:10.5px; letter-spacing:.7px; padding:9px 12px;
  background:var(--thead); box-shadow:inset 0 -1px 0 var(--line);
}
.grid-scroll table td{padding:8px 12px}
.grid-scroll tbody tr:last-child td{border-bottom:0}

/* Zebra + hover: banding helps the eye track a long row of months */
.grid-scroll tbody tr:nth-child(even) td{background:rgba(150,154,168,.05)}
:root[data-theme="light"] .grid-scroll tbody tr:nth-child(even) td{background:rgba(60,66,80,.03)}
.grid-scroll tbody tr:hover td{background:rgba(148,152,166,.11)}
:root[data-theme="light"] .grid-scroll tbody tr:hover td{background:rgba(70,76,90,.07)}

/* The month a payment is due next — the column the eye should find first */
th .mhead{font-weight:700}
th.mo-now{color:var(--acc)}
th.mo-now .mhead::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent);
}

/* OVERDUE — steady tint you cannot miss, plus a breathing rail.
   The old rule strobed the whole row background, which made the amounts
   hard to read in the one table where reading amounts is the job. */
@keyframes railPulse{0%,100%{opacity:1}50%{opacity:.42}}
tr.overdue td{animation:none;background:rgba(248,113,113,.17)}
:root[data-theme="light"] tr.overdue td{background:rgba(216,69,63,.10)}
tr.overdue:hover td{background:rgba(248,113,113,.19)}
:root[data-theme="light"] tr.overdue:hover td{background:rgba(216,69,63,.15)}
tr.overdue td:first-child{
  box-shadow:inset 4px 0 0 var(--bad); animation:railPulse 1.6s var(--ease) infinite;
}
tr.overdue td:nth-child(3) b{color:var(--bad)}
@media (prefers-reduced-motion: reduce){ tr.overdue td:first-child{animation:none} }

/* KICKED — archived, not urgent: drained of colour instead of shouting */
tr.kicked td{opacity:.72}
tr.kicked .paycell{filter:grayscale(.55)}

/* Phone: the grid stays scrollable, cells stay tappable */
@media (max-width:560px){
  .paycell{min-width:66px;padding:6px 7px 5px}
  .paycell .amt{font-size:14px}
  .grid-scroll thead th,.grid-scroll table td{padding:7px 9px}
}

/* =====================================================================
   COIN SYSTEM — wallet chip, one-tap award stepper, market cards
   ===================================================================== */
.coin-wallet{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);
  font-weight:800;font-size:16px;color:var(--pay-card-fg)}
.coin-wallet .cw-ico{font-size:18px}
.coin-wallet small{font-weight:600;font-size:11px;color:var(--mut);letter-spacing:.5px;text-transform:uppercase}

/* student rows in the award list */
.coin-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:8px;background:rgba(255,255,255,.02)}
:root[data-theme="light"] .coin-row{background:#fff}
.coin-row .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin-bal{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:14px;
  color:var(--pay-card-fg);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 44px touch targets — teachers do this on phones between lessons */
.coin-btn{width:42px;height:42px;border-radius:12px;padding:0;font-size:20px;font-weight:800;
  display:grid;place-items:center;flex:0 0 42px}
.coin-btn.plus{background:rgba(52,211,153,.16);color:var(--ok);border:1px solid rgba(52,211,153,.4)}
.coin-btn.minus{background:rgba(248,113,113,.14);color:var(--bad);border:1px solid rgba(248,113,113,.4)}
.coin-btn.plus:hover{background:rgba(52,211,153,.28)}
.coin-btn.minus:hover{background:rgba(248,113,113,.26)}
/* the inline stepper that appears on +/− */
.coin-edit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.coin-edit .qc{min-width:42px;height:42px;padding:0 10px;border-radius:11px;font-weight:800;font-size:14px;
  background:rgba(226,48,72,.10);color:var(--acc);border:1px solid var(--line)}
.coin-edit .qc:hover{border-color:var(--acc)}
.coin-edit input{width:74px;height:42px;padding:0 10px;text-align:center;font-weight:800;font-size:15px;margin:0}
.coin-edit .ok42{width:46px;height:42px;padding:0;font-size:18px;border-radius:11px}
.coin-edit .x42{width:42px;height:42px;padding:0;font-size:15px;border-radius:11px}
.coin-row.editing{border-color:var(--acc);box-shadow:0 0 0 2px rgba(224,36,64,.15)}
.coin-row.flash-ok{animation:coinFlash .9s var(--ease)}
@keyframes coinFlash{0%{background:rgba(52,211,153,.25)}100%{background:transparent}}

/* market cards */
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.market-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.market-card:hover{transform:translateY(-2px);box-shadow:var(--e2)}
/* portrait, book-cover proportions — same box for every item, matching the library */
.market-card img{width:100%;max-width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;background:rgba(150,154,168,.12)}
.market-card .mc-noimg{aspect-ratio:3/4;display:grid;place-items:center;font-size:44px;background:rgba(150,154,168,.10)}
.market-card .mc-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.market-card .mc-name{font-weight:800;font-size:14px}
.market-card .mc-descr{font-size:12px;color:var(--mut);line-height:1.45;flex:1}
.market-card .mc-price{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:15px;
  color:var(--pay-card-fg)}
.market-card.inactive{opacity:.5;filter:grayscale(.6)}

/* ===== phone backstop ==================================================
   The page body must NEVER scroll sideways (wide tables live inside their
   own .grid-scroll). If a future row forgets to wrap, this stops a real
   phone from widening the layout viewport ("the app is wider than the
   screen"). Added AFTER a full 360/390px overflow audit of every view, so
   it clips nothing that exists today. `hidden` is the pre-Chrome-90
   fallback; `clip` wins where supported and can't become a scroll trap. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}

/* ===== today's desk / my records — money-counting tiles =================
   The one job of these screens is reading amounts, so: tnum digits,
   thousand separators (fmt()), and the payment-grid cash/card tokens so
   the colour code matches the grid in both themes. Colour is never the
   only signal — every tile and row also carries its word or chip. */
.desk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.desk-tile{border-radius:14px;padding:14px 14px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.desk-tile .dt-l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:6px}
.desk-tile .dt-n{font-size:24px;font-weight:800;letter-spacing:.2px;margin-top:4px;font-feature-settings:"tnum"}
.desk-tile .dt-s{font-size:11px;color:var(--mut);margin-top:2px}
.desk-tile.tcash{background:var(--pay-cash-bg);border-color:var(--pay-cash-edge)}
.desk-tile.tcash .dt-n{color:var(--pay-cash-fg)}
/* "tcard"/"tcash", not "card": the bare class .card is the global card
   container and would restyle these spans/tiles */
.desk-tile.tcard{background:var(--pay-card-bg);border-color:var(--pay-card-edge)}
.desk-tile.tcard .dt-n{color:var(--pay-card-fg)}
.desk-tile.sum .dt-n{color:var(--acc)}
@media (max-width:560px){ .desk-tile{padding:11px 10px 9px} .desk-tile .dt-n{font-size:18px} }

/* per-person rows in the admin "Today's desk" view */
.desk-person{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 4px;border-bottom:1px solid var(--line)}
.desk-person:last-child{border-bottom:0}
.desk-person .dp-who{flex:1 1 150px;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-person .dp-x{font-feature-settings:"tnum";font-weight:700;white-space:nowrap;font-size:13px}
.desk-person .dp-x.tcash{color:var(--pay-cash-fg)}
.desk-person .dp-x.tcard{color:var(--pay-card-fg)}
.desk-person .dp-tot{font-feature-settings:"tnum";font-weight:800;color:var(--acc);white-space:nowrap}
.desk-person .dp-meta{font-size:11px;color:var(--mut);white-space:nowrap}

/* itemised list rows (front-desk My Records) */
.rec-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13px}
.rec-row:last-child{border-bottom:0}
.rec-row .rr-t{color:var(--mut);font-feature-settings:"tnum";flex:0 0 auto}
.rec-row .rr-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rec-row .rr-k{font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:2px 7px;flex:0 0 auto}
.rec-row .rr-k.mock{background:rgba(150,154,168,.16);color:var(--mut)}
.rec-row .rr-k.debt{background:rgba(248,113,113,.14);color:var(--bad)}
.rec-row .rr-k.extra{background:rgba(251,191,36,.14);color:var(--warn)}

/* ===================== 💎 DIAMONDS (staff rewards) =====================
   Login pop-up (toast tier of the z-ladder), balance hero, ledger feed,
   task cards, on/off switch, weekly schedule grid, folder cards. All colours
   are tokens so both themes work. */
.dm-pop{position:fixed;top:14px;right:14px;left:auto;width:min(360px,calc(100vw - 28px));z-index:80;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--e3);
  padding:12px 14px 10px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:dmPopIn var(--t-med) var(--ease)}
@keyframes dmPopIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dm-pop.out{animation:dmPopOut var(--t-fast) var(--ease) forwards}
@keyframes dmPopOut{to{opacity:0;transform:translateY(-8px)}}
.dm-pop .ico{font-size:26px;line-height:1;flex:0 0 auto;margin-top:2px}
.dm-pop .body{flex:1;min-width:0}
.dm-pop .ttl{font-weight:800;font-size:13px;display:flex;align-items:center;gap:8px}
.dm-pop .dpm{font-size:13px;line-height:1.45;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dm-pop .more{font-size:11px;color:var(--mut);margin-top:4px}
.dm-pop .bar{position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:var(--acc);
  transform-origin:left;animation:dmBar 3s linear forwards}
.dm-pop:hover .bar,.dm-pop.hold .bar{animation-play-state:paused}
@keyframes dmBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.dm-pop .x{background:none;border:0;color:var(--mut);font-size:18px;padding:0 2px;line-height:1;cursor:pointer;box-shadow:none;min-width:0}
.dm-pop .x:hover{color:var(--txt);transform:none}

.dm-delta{font-feature-settings:"tnum";font-weight:900;white-space:nowrap}
.dm-delta.plus{color:var(--ok)} .dm-delta.minus{color:var(--bad)} .dm-delta.zero{color:var(--mut)}

.dm-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(135deg,rgba(224,36,64,.13),rgba(160,164,178,.09));margin-bottom:14px}
.dm-hero .big{font-size:34px;font-weight:900;letter-spacing:-.5px;font-feature-settings:"tnum";display:flex;align-items:center;gap:8px}
.dm-hero .big.neg{color:var(--bad)}
.dm-hero .sub{color:var(--mut);font-size:12px}
.dm-hero .spacer{flex:1}

.dm-row{display:flex;align-items:flex-start;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.dm-row:last-child{border-bottom:0}
.dm-row .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:0 0 30px;background:rgba(150,154,168,.12)}
.dm-row .txt{flex:1;min-width:0;font-size:13px;line-height:1.45}
.dm-row .when{color:var(--mut);font-size:11px;margin-top:2px}
.dm-row.unread{background:rgba(224,36,64,.06);border-radius:10px;padding-left:8px;padding-right:8px}

.dm-task{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--card)}
.dm-task .ttl{font-weight:800;font-size:14px}
.dm-task .dsc{font-size:13px;color:var(--mut);margin:4px 0 6px;line-height:1.5;white-space:pre-wrap}
.dm-task .amts{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;margin-top:6px}
.dm-task .amts span{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-weight:700}
.dm-task .dl{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  background:rgba(251,191,36,.14);color:var(--warn)}
.dm-task .dl.over{background:rgba(248,113,113,.14);color:var(--bad)}
.dm-task.open{border-color:rgba(226,48,72,.45)}
.dm-task .rowbtns{margin-top:10px}

/* on/off switch — 44px touch target, colour + position both signal state */
.tog{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;min-height:44px;font-size:12px;font-weight:700}
.tog input{position:absolute;opacity:0;width:0;height:0}
.tog .knob{width:44px;height:26px;border-radius:999px;background:rgba(150,154,168,.28);position:relative;transition:background var(--t-fast) var(--ease);flex:0 0 44px}
.tog .knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--t-fast) var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tog input:checked + .knob{background:var(--ok)}
.tog input:checked + .knob::after{transform:translateX(18px)}
.tog input:focus-visible + .knob{outline:2px solid var(--acc);outline-offset:2px}
.tog .lbl-on{color:var(--ok)} .tog .lbl-off{color:var(--mut)}

.dm-folder{border:1px solid var(--line);border-radius:16px;background:var(--card);margin-bottom:14px;overflow:hidden}
.dm-folder > .fh{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:800}
.dm-folder > .fh .cnt{margin-left:auto;font-size:12px;color:var(--mut);font-weight:600}
.dm-folder > .fh .chev{transition:transform var(--t-fast) var(--ease)}
.dm-folder.open > .fh .chev{transform:rotate(90deg)}
.dm-folder > .fb{display:none;padding:0 16px 14px}
.dm-folder.open > .fb{display:block}
.dm-person{border-top:1px solid var(--line);padding:12px 0}
.dm-person .ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dm-person .ph .nm{font-weight:800;flex:1;min-width:120px}
.dm-person .cfg{display:none;margin-top:10px;padding:12px;border-radius:12px;border:1px dashed var(--line)}
.dm-person.on .cfg{display:block}
.amt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px}
.amt-grid label{margin:0 0 4px;font-size:11px}
.amt-grid input{margin:0}
.sched-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 10px;align-items:center;margin-top:8px}
.sched-grid .dh{font-size:11px;color:var(--mut);font-weight:700}
.sched-grid .dn{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;min-height:40px}
.sched-grid input[type=time]{margin:0;padding:8px 10px;font-size:13px}
.sched-grid .off input[type=time]{opacity:.35;pointer-events:none}
@media (max-width:560px){
  .dm-hero .big{font-size:28px}
  .sched-grid{gap:6px 6px}
  .sched-grid input[type=time]{padding:8px 6px}
}
.rec-row .rr-a{font-feature-settings:"tnum";font-weight:800;white-space:nowrap}
.rec-row .rr-a.tcash{color:var(--pay-cash-fg)}
.rec-row .rr-a.tcard{color:var(--pay-card-fg)}

/* ===== teacher coin leaderboard (Coins tab › 🏆 sub-tab) ================
   The same per-group ranking students see in the portal, in cabinet
   tokens. Medals are emoji (🥇🥈🥉) — theme-proof, and rank is never
   carried by colour alone. */
.cnb-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line)}
.cnb-row:last-child{border-bottom:0}
.cnb-row .rk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;
  font-size:13px;font-weight:800;background:rgba(158,162,175,.14);color:var(--mut)}
.cnb-row .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnb-row .cnb-gift{font-size:11px;font-weight:800;border-radius:999px;padding:3px 8px;
  background:rgba(226,48,72,.13);color:var(--acc);white-space:nowrap}
.cnb-row .bal{font-feature-settings:"tnum";font-weight:800;white-space:nowrap;color:var(--pay-card-fg)}

/* =====================================================================
   AUTH — sign-in screens (admin / teacher / quick), v2 polish.
   Self-contained light design (like the portal): every colour below is
   an --a-* token, so the screen renders identically in both cabinet
   themes and nothing inherits from the dark palette. Scoped to .auth —
   the in-app `.card.login` blocks (My PIN etc.) are untouched.
   body.authbg is set in markup and removed by start()/enter(), so the
   page behind the login (incl. phone overscroll) is light, never the
   app's blue gradient.
   ===================================================================== */
:root body.authbg{background:#eef1f7;overscroll-behavior-y:none}
html:has(body.authbg){background:#eef1f7}

.auth{
  --a-red:#e02440; --a-red-2:#a91126; --a-red-hi:#f43f5a;
  --a-ink:#1e2739; --a-mut:#6a7388; --a-line:#e6e9f1;
  --a-bg:#eef1f7; --a-card:#ffffff; --a-ph:#a6adbf;
  background:linear-gradient(180deg,#f6f8fc,var(--a-bg));
  position:relative; overflow:hidden; z-index:0; min-height:100svh;
}
.auth::before,.auth::after{content:"";position:absolute;border-radius:50%;z-index:0}
.auth::before{width:460px;height:460px;left:-190px;top:-200px;
  background:radial-gradient(circle at 68% 68%, var(--a-red-hi), var(--a-red) 55%, var(--a-red-2));
  box-shadow:0 30px 80px -30px rgba(224,36,64,.45);opacity:.92}
.auth::after{width:400px;height:400px;right:-170px;bottom:-190px;
  border:48px solid var(--a-red);opacity:.5}
.auth-dots{position:absolute;z-index:0;width:112px;height:76px;opacity:.3;
  background-image:radial-gradient(var(--a-red) 1.5px, transparent 1.6px);background-size:17px 17px}
.auth-dots.ad1{right:7%;top:10%}
.auth-dots.ad2{left:4.5%;bottom:8%}

.auth-card{position:relative;z-index:1;display:flex;align-items:stretch;width:min(950px,100%);
  border-radius:28px;background:var(--a-card);overflow:hidden;
  border:1px solid rgba(30,39,57,.05);
  box-shadow:0 30px 80px -32px rgba(30,39,57,.38), 0 8px 26px -16px rgba(30,39,57,.18);
  animation:panelIn var(--t-med) var(--ease)}

/* left: brand pane */
.auth-side{flex:1 1 46%;min-width:0;display:flex;flex-direction:column;padding:46px 42px 0;position:relative;
  background:
    radial-gradient(240px 210px at -70px 115%, rgba(224,36,64,.10) 0 58%, transparent 62%),
    radial-gradient(170px 170px at 114% 72%, rgba(224,36,64,.07) 0 58%, transparent 62%),
    linear-gradient(160deg,#ffffff 55%,#fbf7f8)}
.auth-brand img{height:48px;max-width:100%;object-fit:contain;object-position:left;display:block}
.auth-kind{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.32em;
  color:var(--a-red);text-transform:uppercase}
.auth-rule{width:54px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--a-red),var(--a-red-hi));
  margin:22px 0 14px}
.auth-tag{font-size:20px;font-weight:600;line-height:1.5;color:var(--a-ink);letter-spacing:.1px}
.auth-art{width:100%;max-width:344px;margin:auto auto 0;display:block;aspect-ratio:3/2}
.auth-art svg{display:block}

/* right: form pane */
.auth-form{flex:1 1 54%;min-width:0;padding:46px 48px;border-left:1px solid #eef1f6;position:relative}
.auth-form::after{content:"";position:absolute;right:-58px;top:-58px;width:150px;height:150px;
  border-radius:50%;border:26px solid rgba(224,36,64,.08);pointer-events:none}
.auth-hello{font-size:11.5px;font-weight:700;letter-spacing:.3em;color:var(--a-mut);text-transform:uppercase}
.auth-h{font-size:36px;font-weight:800;color:var(--a-ink);margin:8px 0 10px;letter-spacing:-.5px}
.auth-h em{font-style:normal;color:var(--a-red)}
.auth-sub{font-size:14px;color:var(--a-mut);line-height:1.65;margin-bottom:12px}
.auth-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--a-mut);margin:20px 0 8px}
.auth-inp{display:flex;align-items:center;gap:11px;padding:0 15px;background:#fff;
  border:1.5px solid var(--a-line);border-radius:15px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.auth-inp:hover{border-color:#d3d9e6}
.auth-inp>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--a-mut);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--t-fast) var(--ease)}
.auth-inp:focus-within{border-color:var(--a-red);box-shadow:0 0 0 4px rgba(224,36,64,.12)}
.auth-inp:focus-within>svg{stroke:var(--a-red)}
.auth .auth-inp input{border:none;background:transparent;color:var(--a-ink);padding:15px 0;
  border-radius:0;caret-color:var(--a-red)}
.auth .auth-inp input:focus{border:none;box-shadow:none}
.auth .auth-inp input::placeholder{color:var(--a-ph)}
.auth .auth-eye{background:none;border:none;padding:6px;margin-right:-6px;border-radius:8px;
  color:var(--a-mut);flex:none;line-height:0;transition:color var(--t-fast) var(--ease)}
.auth .auth-eye:hover{filter:none;color:var(--a-ink)}
.auth .auth-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth .auth-eye .slash{display:none}
.auth .auth-eye.on .slash{display:block}
.auth .auth-btn{width:100%;margin-top:28px;padding:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:.2px;color:#fff;
  background:linear-gradient(135deg,var(--a-red-hi),var(--a-red) 45%,var(--a-red-2));
  box-shadow:0 18px 34px -16px rgba(224,36,64,.65), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.auth .auth-btn svg{width:18px;height:18px;fill:none;stroke:#fff;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast) var(--ease)}
.auth .auth-btn:hover{filter:none;transform:translateY(-1px);
  box-shadow:0 22px 40px -16px rgba(224,36,64,.7), inset 0 1px 0 rgba(255,255,255,.22)}
.auth .auth-btn:hover svg{transform:translateX(3px)}
.auth .auth-btn:active{transform:translateY(0)}
.auth-err{color:var(--a-red);font-size:13px;margin-top:12px;min-height:18px;text-align:center}
.auth-foot{display:flex;align-items:center;gap:12px;margin-top:28px;white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#9aa1b4}
.auth-foot::before,.auth-foot::after{content:"";height:1px;background:var(--a-line);flex:1}

/* brand-red focus ring inside the auth screen (global ring is blue) */
.auth :is(button,a,input):focus-visible{outline:2px solid var(--a-red);outline-offset:2px}
.auth .auth-inp input:focus-visible{outline:none}   /* the field ring carries focus */

/* gentle staggered entrance; the global reduced-motion switch kills it */
@keyframes authUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.auth-form>*{animation:authUp .55s var(--ease) backwards}
.auth-form>*:nth-child(1){animation-delay:.05s}.auth-form>*:nth-child(2){animation-delay:.1s}
.auth-form>*:nth-child(3){animation-delay:.15s}.auth-form>*:nth-child(4){animation-delay:.2s}
.auth-form>*:nth-child(5){animation-delay:.25s}.auth-form>*:nth-child(6){animation-delay:.3s}
.auth-form>*:nth-child(7){animation-delay:.35s}.auth-form>*:nth-child(8){animation-delay:.4s}
.auth-form>*:nth-child(9){animation-delay:.45s}

@media (max-width:860px){
  .auth{padding:16px}
  .auth::before{width:270px;height:270px;left:-130px;top:-130px}
  .auth::after{width:230px;height:230px;right:-120px;bottom:-115px;border-width:30px}
  .auth-card{flex-direction:column;max-width:470px}
  .auth-side{padding:26px 26px 0}
  .auth-brand img{height:40px}
  .auth-kind{margin-top:10px}
  .auth-rule{margin:14px 0 10px}
  .auth-tag{font-size:14.5px;margin-bottom:16px}
  .auth-art{max-width:250px;margin:0 auto -4px}
  .auth-form{padding:24px 26px 30px;border-left:none;border-top:1px solid #eef1f6}
  .auth-form::after{display:none}
  .auth-h{font-size:28px}
  .auth-foot{letter-spacing:.15em}
}

/* =====================================================================
   DAY-MODE INDIGO PASS + KPI HUES — the day palette follows the approved
   mockup: navy headline bar, indigo chrome, one hue per KPI card. Night
   keeps the red/charcoal palette (its tokens are untouched); the rules
   here only retarget hard-coded red TINTS that would clash with indigo
   in day mode, and add the KPI underline rail to both themes.
   ===================================================================== */
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus{box-shadow:0 0 0 3px rgba(79,70,229,.14)}
:root[data-theme="light"] .tab:hover{border-color:rgba(79,70,229,.45)}
:root[data-theme="light"] button.ghost:hover{background:rgba(79,70,229,.07);border-color:rgba(79,70,229,.35)}
:root[data-theme="light"] .sidebar .tab:hover{background:rgba(79,70,229,.08)}
:root[data-theme="light"] .sidebar .tab.active{box-shadow:0 10px 24px rgba(79,70,229,.28)}
:root[data-theme="light"] .help-card{background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(140,150,190,.08))}
:root[data-theme="light"] .adm-card.active{box-shadow:0 0 0 2px rgba(79,70,229,.16)}
:root[data-theme="light"] .gcomp .gc-scope button.on{background:rgba(79,70,229,.10);color:var(--acc);border-color:rgba(79,70,229,.40)}
:root[data-theme="light"] .bellbtn:hover{background:rgba(79,70,229,.08)}
:root[data-theme="light"] .mat-badge.kind{background:rgba(79,70,229,.10)}

/* hero: white→lavender wash with the mockup's navy headline (day only —
   at night the hero card and its tagline keep the charcoal theme's ink) */
:root[data-theme="light"] .hero{background:linear-gradient(115deg,#ffffff 42%,#eceffc)}
:root[data-theme="light"] .hero h2{color:#2b3467}

/* KPI cards: coloured underline rail in BOTH themes (night uses its own
   tone colours, so night stays night) + the mockup's day-mode hue set */
.kpi-card{position:relative;overflow:hidden;
  --kb1:var(--acc);--kb2:color-mix(in srgb,var(--acc) 45%,#fff)}
.kpi-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--kb1),var(--kb2))}
.kpi-card.t-teal{--kb1:var(--acc2);--kb2:color-mix(in srgb,var(--acc2) 45%,#fff)}
.kpi-card.t-ok{--kb1:var(--ok);--kb2:color-mix(in srgb,var(--ok) 45%,#fff)}
.kpi-card.t-warn{--kb1:var(--warn);--kb2:color-mix(in srgb,var(--warn) 45%,#fff)}
.kpi-card.t-bad{--kb1:var(--bad);--kb2:color-mix(in srgb,var(--bad) 45%,#fff)}
:root[data-theme="light"] .kpi-card.t-acc .kico{background:#edeafd;color:#6d5bf7}
:root[data-theme="light"] .kpi-card.t-teal .kico{background:#e1effe;color:#2f74e8}
:root[data-theme="light"] .kpi-card.t-ok .kico{background:#dcf5e9;color:#0e9d69}
:root[data-theme="light"] .kpi-card.t-warn .kico{background:#ffedd8;color:#ea580c}
:root[data-theme="light"] .kpi-card.t-bad .kico{background:#fee3ee;color:#db2777}
:root[data-theme="light"] .kpi-card.t-teal{--kb1:#60a5fa;--kb2:#2563eb}
:root[data-theme="light"] .kpi-card.t-ok{--kb1:#34d399;--kb2:#059669}
:root[data-theme="light"] .kpi-card.t-warn{--kb1:#fbbf24;--kb2:#ea580c}
:root[data-theme="light"] .kpi-card.t-bad{--kb1:#f97fb5;--kb2:#db2777}
/* mockup: numbers in ink — the hue lives in the icon tile and the rail */
:root[data-theme="light"] .kpi-card .kbody b{color:var(--txt)}
:root[data-theme="light"] .sidebar{background:#fbfbfe}

/* =====================================================================
   MOVE V2 — money truth in the grids. Colour is never the only signal:
   DEBT / OWES carry their text tag + glyph, and a month owned by an
   earlier group (.oldown) carries the 🔀 glyph on top of whatever state
   the cell already shows (paid colour or due), so the tint survives
   colour-blindness.
   ===================================================================== */
.paycell.debtpaid{background:var(--pay-debt-bg);border-color:var(--pay-debt-edge);color:var(--pay-debt-fg);
  border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}
.paycell.debtpaid::after{content:"🔁";position:absolute;top:3px;right:4px;font-size:10px;line-height:1;
  opacity:.92;pointer-events:none}
.paycell.owescell{background:rgba(248,113,113,.13);border-color:var(--bad);color:var(--bad);
  border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}
.paycell.owescell::after{content:"❗";position:absolute;top:3px;right:4px;font-size:10px;line-height:1;
  opacity:.92;pointer-events:none}
.paycell .mvtag{display:block;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  margin-top:1px;opacity:.85}
:root[data-theme="light"] .paycell.owescell{background:rgba(216,69,63,.10)}
/* previous group's month: cyan left rail + 🔀 corner glyph over the cell's own state */
.paycell.oldown{box-shadow:inset 3px 0 0 var(--pay-debt-edge)}
.paycell.oldown::before{content:"🔀";position:absolute;bottom:2px;right:4px;font-size:9px;line-height:1;
  opacity:.75;pointer-events:none}
.paylegend .lg.debt{background:var(--pay-debt-bg);border-left-color:var(--pay-debt-edge);color:var(--pay-debt-fg)}

/* ===== Coin-market purchase desk (migrate-coins-v4) — admin + receptionist =====
   Requests grouped per product with a count, 8-digit hand-over box, picked list.
   Tokens only: semantic --ok/--warn/--bad for state, never the accent. */
.pd-group{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:12px;background:var(--bg2)}
.pd-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:6px}
.pd-gname{flex:1;min-width:120px}
.pd-count{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;
  font-size:var(--fs-lg);font-weight:800;color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.pd-img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
.pd-noimg{display:inline-grid;place-items:center;font-size:20px;background:var(--card)}
.pd-row{margin:6px 0 0}
.pd-line{display:flex;align-items:center;gap:10px;min-width:0}
.pd-hand{border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));border-radius:14px;padding:12px;margin-bottom:14px;
  background:color-mix(in srgb,var(--ok) 6%,transparent)}
.pd-htitle{font-weight:700;margin-bottom:8px}
.pd-codebox{display:flex;gap:8px;flex-wrap:wrap}
/* 📷 portal-qr v1: scan buttons beside the reception ID field + the hand-over box */
.qr-idrow{display:flex;gap:8px;align-items:stretch}
.qr-idrow input{flex:1;min-width:0}
.qr-idrow button,.pd-scan{width:auto;flex:0 0 auto;white-space:nowrap}
.pd-code{flex:1;min-width:0;max-width:260px;font-size:24px !important;font-weight:800;letter-spacing:4px;text-align:center;
  font-variant-numeric:tabular-nums}
.pd-found{margin-top:10px}
.pd-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}
.pd-card.pd-ok{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.pd-card.pd-bad{color:var(--bad)}
.pd-chead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pd-citem{font-size:var(--fs-lg);font-weight:800;overflow-wrap:anywhere}
.pd-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:var(--fs-md)}
.pd-grid>span{color:var(--mut)}
.pd-grid>b{overflow-wrap:anywhere;font-weight:600}
.pd-grid .bad{color:var(--bad)}
.pd-grid a{color:var(--acc);text-decoration:none;border-bottom:1px dashed currentColor}
.pd-row .pill{align-self:center;white-space:nowrap}
.pd-cact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.pd-cact:empty{display:none}

/* ===== Teacher 🖨 Print tab — read-only debt (migrate-print-v5) ===== */
.prt-hero .prt-l{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}
.prt-hero .prt-n{font-size:38px;font-weight:800;line-height:1.1;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.prt-hero .prt-n small{font-size:14px;font-weight:600;color:var(--mut);margin-left:5px}
.prt-hero .prt-n.owe{color:var(--warn)}
.prt-hero .prt-n.zero{color:var(--ok)}
.prt-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.prt-sub div{border-top:1px solid var(--line);padding-top:9px}
.prt-sub span{display:block;font-size:var(--fs-xs);color:var(--mut);letter-spacing:.8px;text-transform:uppercase}
.prt-sub b{font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.prt-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:8px}
.prt-row .prt-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--warn) 16%,transparent)}
.prt-row.pay .prt-ic{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.prt-row .prt-tx{flex:1;min-width:0}
.prt-row .prt-tx b{display:block;font-size:var(--fs-md)}
.prt-row .prt-tx small{font-size:var(--fs-sm);color:var(--mut)}
.prt-row .prt-amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.prt-row.pay .prt-amt{color:var(--ok)}

/* ===== Details gate — batch grid (migrate-ux-v2) ===== */
.modal.dg-wide{max-width:760px;width:calc(100vw - 32px)}
.dg-list{max-height:58vh;overflow:auto;margin:0 -4px;padding:0 4px}
.dg-row{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:13px;padding:12px;margin-bottom:10px;background:var(--card)}
.dg-row.dg-block{border-left-color:var(--bad)}
.dg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dg-due{font-size:var(--fs-xs);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.dg-due.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.dg-fields{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.dg-fields label{margin-top:6px}
.dg-msg:empty{display:none}
.dg-err{display:block;margin-top:8px;color:var(--bad);font-size:var(--fs-sm);font-weight:600}
@media (max-width:560px){ .dg-fields{grid-template-columns:1fr} }
.dg-chip{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:999px;padding:1px 7px;cursor:pointer;white-space:nowrap;vertical-align:1px}
.dg-chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.att-editnote{margin:0 0 10px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:10px;font-size:var(--fs-sm);line-height:1.5}
.modal-err{margin:8px 0 0;color:var(--bad);font-size:var(--fs-sm);font-weight:600;line-height:1.5}

/* ===== Omnibox + desk name search (W1, migrate-ux-v3) ===== */
.omni{position:relative;flex:1 1 220px;max-width:340px;min-width:0;margin:0 12px}
.omni input{width:100%;padding:8px 12px;font-size:var(--fs-sm);border-radius:10px}
.omni-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28);
  max-height:60vh;overflow:auto;padding:4px}
.omni-drop.show{display:block}
/* the topbar instance is NOT a FLIP item — it hides while the bar docks into
   the drawer (z 92 would sit above the sidebar tabs and steal their taps);
   the drawer carries its own .omni-side search instead */
.shell.drawer-open .topbar .omni{display:none}
.omni-side{flex:none;max-width:none;margin:10px 14px 2px;position:relative}
.omni-side .omni-drop{position:static;box-shadow:none;margin-top:6px;max-height:44vh}
.omni-row{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;
  padding:8px 10px;cursor:pointer;color:var(--txt);font:inherit}
.omni-row:hover{background:color-mix(in srgb,var(--acc,#f43f5a) 10%,transparent)}
.omni-row .om-main{display:block}
.omni-row .om-sub{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:2px}
.omni-row.om-empty{cursor:default}
@media (max-width:700px){ .topbar .omni{display:none} }   /* the drawer search covers phones */
tr.omni-hit>td{animation:omniHit 2.4s ease}
@keyframes omniHit{0%,60%{background:color-mix(in srgb,var(--warn) 22%,transparent)}100%{background:transparent}}
.qs-list{border:1px solid var(--line);border-radius:12px;margin:8px 0;overflow:hidden}
.qs-row{display:block;width:100%;text-align:left;background:var(--card);border:0;border-bottom:1px solid var(--line);
  padding:10px 12px;cursor:pointer;color:var(--txt);font:inherit}
.qs-row:last-child{border-bottom:0}
.qs-row:hover{background:color-mix(in srgb,var(--acc,#f43f5a) 10%,transparent)}
.qs-row .qs-sub{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:2px}

/* ===== 📊 Admin dashboard (migrate-ux-v4) ===== */
.dash-t{cursor:pointer}
.dash-t:hover{filter:brightness(1.06)}
.dash-kpi .tile.ok .n{color:var(--ok)}
.dash-kpi .tile.warn .n{color:var(--warn)}
.dash-kpi .tile.bad .n{color:var(--bad)}
.dash-bd{display:flex;flex-wrap:wrap;gap:8px}

/* ===== W6: compact hero on phones — content first, greeting small ===== */
@media (max-width:700px){
  .hero{padding:12px 14px;margin-bottom:10px}
  .hero-img{display:none}
  .hero .sub{display:none}
  .hero h2{font-size:20px;margin:0}
}

/* ===== Teacher makeover (2026-09-29): 5-tab bottom nav + day feed + sticky name.
   Tokens only — the light theme re-derives every colour; no indigo-pass override
   needed. The .bnav element sits in DOM between .topbar and main content: fixed
   bottom bar on phones, a static top tab row on ≥900px — one element, two layouts. */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:2px;
  background:var(--bg2);border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 6px;border:0;border-radius:12px;background:none;cursor:pointer;
  color:var(--mut);font:inherit;font-size:11px;font-weight:600;position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.bn-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.bn-item:hover{color:var(--txt)}
.bn-item.active{color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
.bn-item .badge-n{position:absolute;top:2px;right:calc(50% - 22px);margin:0}
body.has-bnav .content{padding-bottom:84px}
@media (min-width:900px){
  .bnav{position:static;background:none;border:0;padding:0;gap:8px;
    max-width:1360px;margin:0 auto 4px;justify-content:flex-start}
  .bn-item{flex:0 0 auto;flex-direction:row;gap:8px;padding:9px 16px;font-size:var(--fs-md);
    background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;color:var(--mut)}
  .bn-item svg{width:18px;height:18px}
  .bn-item.active{border-color:transparent}
  .bn-item .badge-n{position:static;margin-left:6px}
  body.has-bnav .content{padding-bottom:18px}
}

/* --- 🏠 Home day feed: Now / Today / ✓ Done bands --------------------------- */
.df-band{font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;margin:14px 2px 8px}
.df-band:first-child{margin-top:0}
.df-card{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:8px;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.df-card:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.df-card.now{border-left-color:var(--acc)}
.df-card.warn{border-left-color:var(--warn)}
.df-card.bad{border-left-color:var(--bad)}
.df-card .df-ic{font-size:22px;flex:0 0 auto}
.df-card .df-tx{flex:1;min-width:0}
.df-card .df-tx b{display:block}
.df-card .df-tx small{display:block;color:var(--mut);margin-top:2px;line-height:1.5}
.df-card .df-cta{flex:0 0 auto;font-size:var(--fs-sm);font-weight:700;color:var(--acc);white-space:nowrap}
.df-card.bad .df-cta{color:var(--bad)}
.df-done{display:flex;align-items:center;gap:8px;padding:7px 12px;margin-bottom:4px;
  border-radius:10px;color:var(--mut);font-size:var(--fs-sm);cursor:pointer}
.df-done:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.df-done .ok{color:var(--ok);font-weight:700}
.df-empty{text-align:center;padding:26px 14px 8px}
.df-empty .big{font-size:34px;margin-bottom:6px}
.df-empty p{color:var(--mut);margin:0 0 14px}
.df-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.df-head .grow{flex:1}

/* --- 🧑‍🎓 Admission v2: persistent New-students fixture + lead cards -------- */
.adm-fix{border-left-width:4px}
.adm-fix.bad{background:color-mix(in srgb,var(--bad) 9%,var(--card))}
.adm-fix.okc{border-left-color:var(--ok)}
.adm-fix.okc .df-cta{color:var(--ok)}
.adm-fix.idle{opacity:.75}
.af-bell{position:relative;animation:afRing 2.4s ease-in-out infinite}
.af-bell i{position:absolute;top:-6px;right:-10px;font-style:normal;font-size:11px;font-weight:800;
  background:var(--bad);color:#fff;border-radius:999px;min-width:18px;height:18px;line-height:18px;
  text-align:center;padding:0 4px}
@keyframes afRing{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}
  94%{transform:rotate(7deg)}96%{transform:rotate(-4deg)}98%{transform:rotate(2deg)}}
@media (prefers-reduced-motion: reduce){.af-bell{animation:none}}
.adml.is-due{border-left:4px solid var(--bad)}
.adml.is-sleep{opacity:.78}
.adml-chip{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;
  margin-left:6px;color:var(--mut);border:1px dashed var(--line);vertical-align:2px}
.adml-chip.due{color:#fff;background:var(--bad);border:0;animation:none}
.adml-contact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.adml-contact .acb{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:14px;font-weight:700;color:var(--txt);background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px}
.adml-contact .acb:active{transform:scale(.97)}
.adml-contact .cphone{color:var(--mut);font-size:12px;margin-left:auto}
.adml-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.adml-status .asb{width:auto;font-size:13.5px;padding:9px 13px;border-radius:10px}
.adml-status .asb.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.adml-status .asb.ghost.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.adml-status .asb[disabled]{opacity:.4;cursor:not-allowed}
.adml-hint{font-size:12px;color:var(--mut);margin-top:6px}
.adml-chip.warn{color:#1c1c1c;background:var(--warn);border:0}
.adml-contact .acb.hint{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.adml-contact button.acb.ghosty{cursor:pointer;width:auto}

/* --- 📊 Admission monitoring (admin): funnel + per-teacher shares ---------- */
.fnl-row{display:grid;grid-template-columns:130px 1fr 78px;align-items:center;gap:10px;margin:7px 0}
.fnl-l{font-size:var(--fs-sm);color:var(--txt);white-space:nowrap}
.fnl-bar{height:16px;border-radius:8px;background:var(--bg2);overflow:hidden}
.fnl-bar i{display:block;height:100%;border-radius:8px;background:var(--acc);
  transition:width .5s var(--ease)}
.fnl-bar i.ok{background:var(--ok)}
.fnl-n{font-weight:700;text-align:right;white-space:nowrap}
.fnl-n small{color:var(--mut);font-weight:400}
.fnl-side{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tsh-row{padding:10px 0;border-bottom:1px solid var(--line)}
.tsh-row:last-child{border-bottom:0}
.tsh-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)}
.tsh-due{font-size:11px;font-weight:800;color:#fff;background:var(--bad);border-radius:999px;padding:2px 9px}
.tsh-bar{display:flex;height:12px;border-radius:6px;background:var(--bg2);overflow:hidden;margin:6px 0 4px}
.tsh-bar i{display:block;height:100%}
.tsh-bar i.ok{background:var(--ok)}
.tsh-bar i.bad{background:var(--bad)}
.tsh-bar i.mid{background:var(--warn)}
.tsh-bar i.grey{background:var(--mut)}
.tsh-counts{font-size:12px;color:var(--mut)}
.tsh-bar{position:relative}
.tsh-bar.odp u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--txt);opacity:.55;border-radius:1px}
@media (max-width:560px){ .fnl-row{grid-template-columns:104px 1fr 64px} .fnl-l{font-size:12px} }
@media (max-width:560px){
  .adml-contact .acb{flex:1 1 28%;justify-content:center}
  .adml-contact .cphone{flex-basis:100%;margin-left:0;text-align:center}
  .adml-status .asb{flex:1 1 45%}
  .adml-status .asb.main{flex-basis:100%}
}

/* --- sticky name column (opt-in per cell: class, never nth-child) ----------- */
.grid-scroll td.stick-name,.grid-scroll th.stick-name{position:sticky;left:0;z-index:1;
  background:var(--bg2);box-shadow:8px 0 12px -10px rgba(0,0,0,.45)}
.grid-scroll thead th.stick-name{z-index:3;background:var(--thead)}
.grid-scroll tr.overdue td.stick-name{background:color-mix(in srgb,var(--bad) 14%,var(--bg2))}
.grid-scroll tr.kicked td.stick-name{background:color-mix(in srgb,var(--mut) 12%,var(--bg2))}

/* --- phone search toggle (pages without a drawer, e.g. the teacher cabinet) -- */
.omni-tgl{display:none}
@media (max-width:700px){
  .omni-tgl{display:inline-grid}
  body.omni-open .topbar .omni{display:block;position:fixed;left:0;right:0;
    top:56px;z-index:40;max-width:none;margin:0;padding:8px 12px;
    background:var(--bg2);border-bottom:1px solid var(--line)}
}
.strk{color:var(--warn);font-weight:800;font-size:12px;white-space:nowrap}

/* ===================== 🧑‍🏫 Lesson mode (teacher.html) =====================
   The enriched register: signal chips + 🪙 per row, sticky Save footer and
   the lesson bottom sheets. Sheet layer is z 50 — the cabinet modal tier;
   a sheet always closes before any modal()-based flow opens (ladder rule). */
.ls-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ls-wallet{font-size:12.5px;color:var(--mut);white-space:nowrap}
.ls-wallet b{color:var(--txt)}
/* header tools: find box + projector toggle */
.ls-tools{display:flex;gap:8px;align-items:center;margin:8px 0 2px}
.ls-find{flex:1;min-width:0;height:38px}
.ls-projbtn{white-space:nowrap;height:38px}
.ls-projbtn.on{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
/* the projector switch: chips vanish, the hint explains why */
.ls-proj .ls-chips{display:none}
.ls-hint-proj{display:none}
.ls-proj .ls-hint-norm{display:none}
.ls-proj .ls-hint-proj{display:inline;color:var(--warn)}
/* three fixed columns: name block | 🪙 | ✓/✗ — aligned on every row */
.ls-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.ls-nm{flex:1;min-width:0}
.ls-title{display:block}
.ls-title b{overflow-wrap:anywhere}
.ls-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
button.adml-chip.lsc{appearance:none;cursor:pointer;font-family:inherit;line-height:1.5;min-height:26px}
button.adml-chip.lsc:active{transform:scale(.96)}
/* laptop ≥900px: one-line compact rows — chips inline beside the name */
@media (min-width:900px){
  .ls-row{padding:6px 4px}
  .ls-nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .ls-chips{margin-top:0}
}
.ls-coinb{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;
  min-width:76px;padding:0 12px;border-radius:999px;flex:0 0 auto;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);color:var(--txt);
  font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.ls-coinb:active{transform:scale(.97)}
.ls-foot{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:2;
  background:var(--bg2);padding:10px;margin:10px -6px -8px;
  border:1px solid var(--line);border-radius:12px}
@media (min-width:900px){ .ls-foot{bottom:12px} }
/* lesson bottom sheet */
.ls-bg{position:fixed;inset:0;z-index:50;background:rgba(4,7,18,.7);backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center}
.ls-bg.show{display:flex}
.ls-sheet{width:100%;max-width:560px;border-radius:18px 18px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  max-height:80vh;overflow:auto;background:var(--bg2)}
@media (min-width:700px){ .ls-bg{align-items:center;padding:20px} .ls-sheet{border-radius:18px} }
.ls-mode{display:flex;gap:8px;margin:4px 0 10px}
.lsm{flex:1;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent;
  color:var(--mut);font-weight:800;font-size:14px;cursor:pointer}
.lsm.active{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:var(--ok)}
.ls-sheet.take .lsm.active{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.5);color:var(--bad)}
.ls-amt{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.lsq{min-width:48px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;
  color:var(--txt);font-weight:800;font-size:15px;cursor:pointer}
.lsq:active{transform:scale(.96)}
.ls-amt input{flex:1;height:44px;min-width:0}

/* ================= 👤 Student sheet (teacher + admin, per mockup) =================
   Avatar-initials circle (photo/avatar slot — avatars come later), tinted stat
   tiles, one card per section with an icon chip + chevron, pill action row. */
.ss-id{display:flex;align-items:center;gap:12px}
.ss-ava{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;letter-spacing:.02em;
  color:var(--ok);background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.45)}
.ss-idt{min-width:0;flex:1}
.ss-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:12.5px}
/* stat tiles — soft tinted, same spot every time */
.ss-tiles{display:flex;gap:8px;margin:14px 0 2px}
.ss-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--txt);font:inherit}
.ss-tile span{font-size:16px;line-height:1}
.ss-tile b{font-size:15px}
.ss-tile i{font-style:normal;font-size:10px;color:var(--mut);letter-spacing:.07em;text-transform:uppercase}
.ss-tile.ok{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}
.ss-tile.warn{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.09)}
.ss-tile.bad{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.09)}
.ss-tile.act{cursor:pointer}
.ss-tile.act:active{transform:scale(.97)}
/* section cards: icon chip + uppercase label + faint chevron */
.ss-card{position:relative;margin-top:10px;padding:11px 26px 11px 12px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);
  font-size:13.5px;line-height:1.6}
.ss-card.pay.due{border-left:3px solid var(--warn)}
.ss-lab{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;color:var(--mut);margin-bottom:5px;text-transform:uppercase}
.ss-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;font-size:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.ss-ic.pay{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.4)}
.ss-ic.att{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4)}
.ss-ic.por{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.4)}
.ss-chev{position:absolute;right:10px;top:12px;color:var(--mut);opacity:.45;font-size:15px}
/* pill actions */
.ss-actions{flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.ss-actions button{flex:1 1 30%;margin:0;border-radius:999px}
.ss-actions .ss-danger{color:var(--bad);border-color:rgba(248,113,113,.5)}
@media (min-width:700px){ .ss-actions button{flex:0 1 auto} }
.sm-acb{display:inline-flex;padding:2px 8px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
b[data-lsopen]{cursor:pointer}

/* =====================================================================
   📱 GROUPS PHONE PASS — student cards, view switch, group chips,
   slim / tall / bigger phone grid (teacher + admin cabinets).
   Classes are gc- prefixed (generic names have collided before).
   ===================================================================== */
/* group switcher row — scrolls sideways inside itself, never the page */
.gc-groups{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.gc-groups button{flex:0 0 auto;white-space:nowrap;padding:8px 14px;min-height:38px;border-radius:999px;
  font-size:var(--fs-base);background:transparent;color:var(--txt);border:1px solid var(--line)}
.gc-groups button.on{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff;border-color:transparent}
/* Cards | Grid segmented switch */
.gc-tools{flex-wrap:wrap;gap:8px}
.gc-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.gc-seg button{padding:7px 14px;min-height:36px;border-radius:999px;font-size:var(--fs-base);
  background:transparent;color:var(--mut);border:0}
.gc-seg button.on{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:#fff}
/* projector notice (payments hidden) */
.gc-projnote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;padding:10px 12px;
  border-radius:12px;font-weight:600;
  background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.gc-projnote span{flex:1 1 180px}
/* counts + find */
.gc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.gc-cnt{font-size:var(--fs-md);white-space:nowrap}
.gc-cnt b{font-weight:800}
.gc-cnt b.bad{color:var(--bad)} .gc-cnt b.mid{color:var(--warn)} .gc-cnt b.ok{color:var(--ok)} .gc-cnt b.kick{color:var(--mut)}
.gc-find{flex:1 1 150px;min-width:0;width:auto;margin:0}
/* the cards */
.gc-list{display:flex;flex-direction:column;gap:8px}
.gc-card{display:flex;align-items:flex-start;gap:12px;padding:12px 12px 10px;border-radius:14px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);min-height:48px;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.gc-card:hover{border-color:color-mix(in srgb,var(--mut) 45%,transparent)}
.gc-card.b-bad{box-shadow:inset 3px 0 0 var(--bad)}
.gc-card.b-mid{box-shadow:inset 3px 0 0 var(--warn)}
.gc-card.b-kick{opacity:.72;filter:grayscale(.5)}
.gc-list.proj .gc-card{cursor:default;align-items:center}
.gc-ava{flex:0 0 40px;width:40px;height:40px;font-size:14px}
.gc-body{flex:1 1 auto;min-width:0}
.gc-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;line-height:1.3}
.gc-name > b{font-size:var(--fs-md);overflow-wrap:anywhere}
.gc-chips{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.gc-chips .sbell{margin-top:0}
.gc-state{margin-top:4px;font-size:var(--fs-base)}
.gc-card.b-bad .gc-state b{color:var(--bad)}
.gc-card.b-mid .gc-state b{color:var(--warn)}
.gc-card.b-ok .gc-state{color:var(--ok)}
.gc-last{font-size:var(--fs-sm);margin-top:2px}
.gc-go{flex:0 0 auto;align-self:center;color:var(--mut);opacity:.5;font-size:20px;line-height:1}
.gc-sel{display:none;align-items:center;align-self:center}
body.selmode .gc-sel{display:inline-flex}
.gc-sel input{width:20px;height:20px;accent-color:var(--acc);margin:0}
.gc-selall{gap:6px;font-size:var(--fs-base);font-weight:600;cursor:pointer}
/* the 6-month strip — colour plus a per-square title and month labels */
/* state classes are q- prefixed: a bare `card` picked up the global .card container
   (padding/shadow) and blew card-paid squares up into big blocks */
.gc-strip{margin-top:7px}
.gc-sqs,.gc-lbl{display:grid;grid-template-columns:repeat(6,24px);gap:5px}
.gc-sq{display:block;height:13px;border-radius:4px;border:1px solid transparent}
.gc-sq.q-cash{background:var(--pay-cash-edge);border-color:var(--pay-cash-edge)}
.gc-sq.q-card{background:var(--pay-card-edge);border-color:var(--pay-card-edge)}
.gc-sq.q-bonus{background:var(--pay-bonus-edge);border-color:var(--pay-bonus-edge)}
.gc-sq.q-other{background:var(--pay-other-edge);border-color:var(--pay-other-edge)}
.gc-sq.q-debt{background:var(--pay-debt-edge);border-color:var(--pay-debt-edge)}
.gc-sq.q-due{background:transparent;border:1.5px dashed var(--pay-due-edge)}
.gc-sq.q-none{background:color-mix(in srgb,var(--mut) 14%,transparent)}
.gc-sq.oldown{box-shadow:inset 0 -3px 0 var(--pay-debt-edge)}
.gc-lbl span{font-size:9px;text-align:center;color:var(--mut);font-weight:600;letter-spacing:.2px}
/* sticky name cell stays OPAQUE on every row state — the zebra / hover tints
   are translucent and outrank it, so scrolled month cells used to show through */
.grid-scroll tbody tr:nth-child(even) td.stick-name{background:color-mix(in srgb,var(--mut) 7%,var(--bg2))}
.grid-scroll tbody tr:hover td.stick-name{background:color-mix(in srgb,var(--mut) 14%,var(--bg2))}
.grid-scroll tbody tr.overdue td.stick-name{background:color-mix(in srgb,var(--bad) 14%,var(--bg2))}
.grid-scroll tbody tr.kicked td.stick-name{background:color-mix(in srgb,var(--mut) 12%,var(--bg2));opacity:1}
.grid-scroll tbody tr.kicked td.stick-name > *{opacity:.72}
/* group list: compact owes counts */
.gc-mini{margin-left:8px;white-space:nowrap}
.gc-mini b{font-weight:800}
.gc-mini b.bad{color:var(--bad)} .gc-mini b.mid{color:var(--warn)}
.gc-mini.ok{color:var(--ok);font-weight:700}
/* phone grid: slim (no ID / Start / actions), tall box, bigger cells */
@media (max-width:700px){
  .gc-ph-hide{display:none !important}
  .grid-scroll{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .grid-scroll .paycell{min-width:72px;padding:9px 8px 7px}
  .grid-scroll .paycell .amt{font-size:16px}
  .grid-scroll .paycell .dt{font-size:10px}
  .grid-scroll thead th,.grid-scroll table td{padding:8px}
  .grid-scroll td.stick-name{min-width:118px;max-width:44vw}
  .grid-scroll td.stick-name .sseen{display:none}
}

/* =====================================================================
   🏠 HOME FEED 2.0 — recap pop-up (rides the .ls-bg sheet shell, z 50),
   pull-to-refresh indicator, spinning ↻. rc-/ptr prefixes (no generic names).
   ===================================================================== */
.rc-pop{display:flex;flex-direction:column;gap:12px}
.rc-sec{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--mut) 5%,transparent)}
.rc-sec h3{margin:0 0 8px;font-size:var(--fs-lg)}
.rc-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:var(--fs-base);flex-wrap:wrap}
.rc-row > span:first-child{flex:1 1 150px;min-width:0}
.rc-val{text-align:right;flex:0 1 auto}
@media (max-width:560px){ .rc-val{text-align:left} }
.rc-sec b.up,.rc-cmp.up{color:var(--ok)}
.rc-sec b.down,.rc-cmp.down{color:var(--bad)}
.rc-cmp{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;color:var(--mut)}
.rc-sub{font-size:var(--fs-sm);margin:-2px 0 2px}
.rc-clean{margin:4px 0;font-weight:700;color:var(--ok)}
.rc-net{border-top:1px dashed var(--line);margin-top:6px;padding-top:4px;font-weight:700}
.rc-sec.rc-day{border-left:3px solid var(--acc)}
/* the sheet scrolls inside (max-height 80vh): Got it stays reachable at any length */
.rc-pop > .btnbar{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));margin:0 -16px calc(-16px - env(safe-area-inset-bottom,0px));
  padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg2);border-top:1px solid var(--line);z-index:1}
/* pull-to-refresh: the page's own pull-to-reload is off while Home is open */
body.home-on{overscroll-behavior-y:contain}
.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--mut);transition:height var(--t-fast) var(--ease)}
.ptr span{font-size:20px;display:inline-block;transition:transform var(--t-med) var(--ease)}
.ptr.ready span{transform:rotate(180deg);color:var(--acc)}
.ptr.go span,#dfRefresh.spin{animation:ptrSpin .8s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .ptr.go span,#dfRefresh.spin{animation:none} }

/* =====================================================================
   💰 ME TAB CLARITY — earnings breakdown, payment sheets, 📅 diamond
   calendar, projector blur. bal-/dc-/me- prefixes (no generic names).
   ===================================================================== */
.bal-cmp{font-size:var(--fs-sm);font-weight:700;margin-top:4px;color:var(--mut)}
.bal-cmp.up,.dc-n.up,#dcSum b.up,.bal-lines b.up{color:var(--ok)}
.bal-cmp.down,.dc-n.down,#dcSum b.down,.bal-lines b.down{color:var(--bad)}
.bal-sub{font-size:var(--fs-sm);color:var(--mut);margin-top:3px}
.bal-sec{margin-top:16px}
.bal-h{font-size:var(--fs-sm);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.bal-h .muted{text-transform:none;letter-spacing:0;font-weight:500}
.bal-grp{display:grid;grid-template-columns:minmax(80px,1.2fr) 2fr auto;align-items:center;gap:10px;width:100%;
  background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 6px;text-align:left;font-weight:600}
.bal-gn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal-bar{height:10px;border-radius:999px;background:color-mix(in srgb,var(--mut) 16%,transparent);overflow:hidden}
.bal-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.bal-gv{white-space:nowrap;font-variant-numeric:tabular-nums}
.bal-kinds{display:flex;flex-wrap:wrap;gap:6px}
.bal-kind{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-base)}
.bal-kind.k-old{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.bal-kind.k-debt{border-color:var(--pay-debt-edge)}
.bal-kind.k-bonus{border-color:var(--pay-bonus-edge)}
.bal-day{display:flex;align-items:center;gap:10px;width:100%;background:transparent;color:var(--txt);
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:11px 4px;text-align:left;font-weight:500}
.bal-day b{margin-left:auto;font-variant-numeric:tabular-nums}
.bal-go{color:var(--mut);opacity:.6}
/* payment / ledger lines in the sheets */
.bal-lines{display:flex;flex-direction:column}
.bal-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.bal-lt{flex:1 1 auto;min-width:0}
.bal-lt .muted{font-size:var(--fs-sm)}
.bal-lv{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.bal-chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:1px 7px;border:1px solid var(--line);color:var(--mut);vertical-align:middle}
.bal-chip.c-old{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.bal-chip.c-debt{color:var(--pay-debt-fg);border-color:var(--pay-debt-edge)}
.bal-chip.c-bonus{color:var(--pay-bonus-fg);border-color:var(--pay-bonus-edge)}
.bal-chip.c-ahead{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.dc-net{border-bottom:0;font-weight:700}
/* 📅 the calendar */
.dc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dc-head b{font-size:var(--fs-lg);min-width:130px;text-align:center}
.dc-head .grow{flex:1}
.dc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.dc-w{font-size:11px;font-weight:700;color:var(--mut);text-align:center;padding:2px 0}
.dc-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-height:58px;min-width:0;
  padding:5px 2px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--txt);font-weight:600}
button.dc-c{cursor:pointer}
.dc-c.dc-pad{border:0}
.dc-c.sun{background:color-mix(in srgb,var(--mut) 8%,transparent)}
.dc-c.future{opacity:.45}
.dc-c.today{border:2px solid var(--acc)}
.dc-d{font-size:11px;color:var(--mut)}
.dc-n{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.dc-m{font-size:11px;line-height:1;white-space:nowrap;overflow:hidden;max-width:100%}
.dc-note{margin:10px 0 0;font-size:var(--fs-sm)}
@media (min-width:700px){ .dc-c{min-height:72px} .dc-n{font-size:14px} .dc-m{font-size:13px} }
/* 🖥 projector guard: amounts blurred until the bar is tapped */
.me-projbar{display:block;width:100%;margin:0 0 10px;padding:10px 12px;border-radius:12px;font-weight:700;text-align:left;
  color:var(--txt);background:color-mix(in srgb,var(--warn) 16%,transparent);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent)}
.me-projbar[hidden]{display:none}
#p-bal.me-proj .bal-body,
#p-diamonds.me-proj .dm-hero,#p-diamonds.me-proj #dmSubCal,#p-diamonds.me-proj #dmSubFeed,
#p-diamonds.me-proj #dmSubTasks,#p-diamonds.me-proj #dmSubMarket{filter:blur(7px);pointer-events:none;user-select:none}
@media (max-width:560px){ .bal-grp{grid-template-columns:1fr auto} .bal-bar{grid-column:1/-1;grid-row:2} }

/* =====================================================================
   📈 SALARY GROWTH CHART — Me → Balance. One series in the accent token;
   2px round line, r 4.5 markers with a 2px surface ring, ~10% area wash,
   hairline solid grid, dashed average rule (a reference line, not grid).
   ===================================================================== */
.sal-card{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px 12px 6px;min-width:0}
.sal-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.sal-head .grow{flex:1}
.sal-growth{font-weight:800;font-size:var(--fs-base)}
.sal-growth .muted{font-weight:500}
.sal-growth.up,.sal-read .up{color:var(--ok)}
.sal-growth.down,.sal-read .down{color:var(--bad)}
.sal-read{min-height:22px;margin:8px 0 2px;font-size:var(--fs-base);color:var(--mut)}
.sal-read b{color:var(--txt)}
.sal-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.sal-svg{display:block;touch-action:pan-x pan-y;outline-offset:2px}
.sal-svg:focus-visible{outline:2px solid var(--acc);border-radius:8px}
.sal-grid{stroke:var(--line);stroke-width:1}
.sal-ax{fill:var(--mut);font-size:11px;font-variant-numeric:tabular-nums}
.sal-area{fill:var(--acc);fill-opacity:.1;stroke:none}
.sal-line{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sal-dash{stroke-dasharray:5 5}
.sal-avg{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 4;opacity:.8}
.sal-avgl{fill:var(--mut);font-size:11px;font-weight:600}
.sal-pt{fill:var(--acc);stroke:var(--bg2);stroke-width:2}
.sal-pt.sofar{fill:var(--bg2);stroke:var(--acc);stroke-width:2}
.sal-pt.sel{r:6}
.sal-sofar{fill:var(--mut);font-size:11px;font-style:italic}
.sal-cross{stroke:var(--mut);stroke-width:1;opacity:.6}
.sal-hit{fill:transparent;cursor:crosshair}
.sal-empty{margin:10px 0}
.sal-plot{display:flex;align-items:flex-start;min-width:0}
.sal-yax{flex:0 0 auto;display:block}
.sal-plot .sal-scroll{flex:1 1 auto;min-width:0}
.sal-halo{paint-order:stroke;stroke:var(--bg2);stroke-width:4px;stroke-linejoin:round}

/* =====================================================================
   ⚡ SPEED PASS F1 — the "Updating…" / offline bar over a saved copy.
   While body.boot-stale, the feed, the Groups drill and Me are read-only
   (nothing can be tapped into an action); the tab bar stays live.
   ===================================================================== */
/* sticky just under the fixed top bar (62px skin), opaque, so a page reopened
   mid-scroll still shows the state */
.boot-bar{position:sticky;top:70px;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border-radius:12px;
  font-size:var(--fs-base);font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--mut) 10%,var(--bg));border:1px solid var(--line);box-shadow:var(--e1,none)}
.boot-bar.off{color:var(--txt);background:color-mix(in srgb,var(--warn) 14%,var(--bg));border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.boot-bar[hidden]{display:none}
.boot-spin{display:inline-block;animation:ptrSpin .9s linear infinite}
@media (prefers-reduced-motion: reduce){ .boot-spin{animation:none} }
body.boot-stale #feedBox,body.boot-stale #feedRest,body.boot-stale .hm-side,body.boot-stale #homeDrill,body.boot-stale #drill,body.boot-stale #p-me .me-sec,
body.boot-stale #p-coins,body.boot-stale #dayStrip{pointer-events:none;opacity:.72;filter:saturate(.7);user-select:none}
/* ⚡ F2 — a group's payments on the way (admin drill) */
.gp-load{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.gp-load > .muted{font-size:var(--fs-sm,13px);padding:0 4px}

/* =====================================================================
   🎨 CRAFT PASS G (offer G, teacher cabinet) — empty/error states,
   ✓ action moment, undo toast, phone fits. Tokens only, both themes.
   ===================================================================== */
.empty.es{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 18px;
  border:1px dashed var(--line);border-radius:14px;line-height:1.45}
.es .es-ic{font-size:34px;line-height:1;opacity:.6;margin-bottom:2px}
.es .es-t{color:var(--txt);font-weight:700;font-size:var(--fs-md)}
.es .es-s{color:var(--mut);font-size:var(--fs-base);max-width:420px}
.es .es-act{margin-top:6px}
.es.es-err .es-ic{opacity:.85}
/* the pressed button carries the moment */
button.act-busy{opacity:.85;cursor:progress}
button.act-ok,button.act-ok:hover,button.act-ok:disabled{opacity:1 !important;background:var(--ok) !important;color:#0b2a1c !important;border-color:transparent !important;
  transition:background-color var(--t-fast) var(--ease)}
/* undo toast — tappable, with a shrinking time bar */
.toast.tu{display:flex;align-items:center;gap:12px;pointer-events:auto;overflow:hidden;padding:11px 12px 13px 18px;width:min(440px, calc(100vw - 24px));box-sizing:border-box;line-height:1.35}
.toast.tu .tu-msg{flex:1;min-width:0}
.toast.tu .tu-btn{flex:0 0 auto;min-height:34px;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:800;
  background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35)}
.toast.tu .tu-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.55);
  transform-origin:left;animation:tuBar linear forwards}
@keyframes tuBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* section notes: inline with a dash on wide screens, own line on phones */
.sec-note::before{content:"— "}
.tabs .tn{display:none}
/* Groups: the message box lives behind "✉️ Message students" */
.gc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gc-head .crumb{flex:1;min-width:0}
.gc-head #gcOpen{margin-left:auto}
#p-manage.gc-closed .gcomp{display:none}
body.selmode #p-manage.gc-closed .gcomp{display:flex}
/* vibrate switch card (Me → PIN) */
.vibe-row{display:flex;align-items:center;gap:12px}
.vibe-row .grow{flex:1}
@media (max-width:899px){
  body.has-bnav .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:700px){
  .me-who{display:none}
}
@media (max-width:560px){
  .sec-title{flex-wrap:wrap;row-gap:2px}
  .sec-title .sec-note{flex-basis:100%;font-size:var(--fs-sm);font-weight:500}
  .sec-title .sec-note::before{content:none}
  /* sub-tab rows that must show every option: icon over a short word, equal columns */
  .tabs.tabs-fit{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;overflow:visible}
  .tabs.tabs-fit .tab{display:block;padding:9px 2px 8px;
    font-size:var(--fs-sm);line-height:1.15;white-space:nowrap;text-align:center;position:relative;min-height:36px}
  .tabs.tabs-fit .tab .ti{display:block;font-size:17px;line-height:1.1;margin-bottom:2px}
  .tabs.tabs-fit .tab .badge-n{position:absolute;top:2px;right:4px}
  .tabs.tabs-fit .tw{display:none}
  .tabs.tabs-fit .tab::first-letter{text-transform:uppercase}
  .tabs.tabs-fit .tn{display:inline}
  /* comfortable taps */
  .ls-row .adml-chip.lsc{min-height:32px;padding-top:5px;padding-bottom:5px}
  .ss-card a.acb.sm-acb, .ls-sheet a.acb.sm-acb{min-width:40px;min-height:36px;display:inline-grid;place-items:center}
}
@media (max-width:520px){
  body.has-bnav .topbar{padding-left:12px}
  body.has-bnav .topbar-right{gap:6px}
}
@media (prefers-reduced-motion: reduce){
  button.act-ok{transition:none}
  .toast.tu .tu-bar{animation:none;display:none}
}

/* =====================================================================
   ✏️ CLEAR WORDS (teacher copy pass) — rule chips + ⓘ
   ===================================================================== */
.rules{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.rule-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;color:var(--txt);background:color-mix(in srgb,var(--mut) 12%,transparent);
  border:1px solid var(--line);white-space:nowrap}
.rule-chip.warn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.rule-i{min-width:32px;min-height:32px;padding:0;border-radius:999px;font-size:15px;font-weight:700;line-height:1;
  background:transparent;color:var(--mut);border:1px solid var(--line);margin-left:auto}
.rule-i[aria-expanded="true"]{color:var(--acc);border-color:var(--acc)}
.rule-full{flex-basis:100%;font-size:var(--fs-base);color:var(--mut);line-height:1.5;padding:8px 2px 2px}
.rule-full[hidden]{display:none}

/* =====================================================================
   🔔 TEACHER PUSH — the "Turn on notifications" card (Home, until done)
   + the Me → PIN status row. Not a .df-card on purpose: the feed binds
   .df-card clicks by index.
   ===================================================================== */
.tp-card{background:color-mix(in srgb,var(--acc) 8%,var(--card));border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));
  border-left:4px solid var(--acc);border-radius:var(--radius);padding:13px 14px;margin-bottom:10px}
.tp-card.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--card));
  border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.tp-card.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--card));
  border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.tp-top{display:flex;align-items:center;gap:12px}
.tp-ic{font-size:22px;flex:0 0 auto}
.tp-tx{flex:1;min-width:0}
.tp-tx b{display:block}
.tp-tx small{display:block;color:var(--mut);margin-top:2px;line-height:1.5}
.tp-steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:tp}
.tp-steps li{counter-increment:tp;display:flex;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs-sm);line-height:1.45}
.tp-steps li::before{content:counter(tp);flex:0 0 24px;height:24px;border-radius:999px;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#fff;background:var(--acc)}
.tp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tp-acts button{min-height:40px}
.tp-acts button.tp-main{flex:1 1 160px}
.tp-me .tp-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tp-me .tp-dot{width:10px;height:10px;border-radius:999px;background:var(--mut);flex:0 0 auto}
.tp-me .tp-dot.on{background:var(--ok)}
.tp-me .tp-dot.bad{background:var(--bad)}
.tp-me .tp-dot.warn{background:var(--warn)}
/* admin 📱 Teacher app monitor */
.tpm-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 2px;border-top:1px solid var(--line);align-items:center}
.tpm-row:first-of-type{border-top:0}
.tpm-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tpm-meta{grid-column:1;font-size:var(--fs-sm)}
.tpm-acts{grid-column:2;grid-row:1 / span 2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tpm-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid var(--line);color:var(--mut)}
.tpm-chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.tpm-chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.tpm-chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.tpm-dev{padding:8px 0 8px 10px;border-top:1px solid var(--line);border-left:3px solid transparent}
.tpm-dev:first-child{border-top:0}
.tpm-dev.warn{border-left-color:var(--warn)}   /* device missing install or push */
@media (max-width:560px){
  .tpm-row{grid-template-columns:1fr}
  .tpm-acts{grid-column:1;grid-row:auto;justify-content:flex-start}
}

/* =====================================================================
   👋 TEACHER LEAVES — admin: "Leaves" checklist, Inactive section,
   Statistics → 💼 Former teachers cards
   ===================================================================== */
.lv-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.lv-dot{flex:0 0 24px;height:24px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:var(--ok)}
.lv-item.bad .lv-dot{background:var(--bad)}
.lv-item .grow{flex:1;min-width:0}
.lv-list{margin:0 0 8px 34px;display:flex;flex-direction:column;gap:6px}
.lv-stu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.lv-stu .grow{flex:1;min-width:120px}
.lv-note{margin:10px 0 0;line-height:1.55;font-size:var(--fs-sm)}
.inact{opacity:.8}
.inact-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--mut);border:1px solid var(--line)}
.ft-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:var(--card)}
.ft-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.ft-head b{font-size:var(--fs-lg, 17px)}
.ft-pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--ok) 8%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line))}
.ft-pay > div{flex:1;min-width:180px}
.ft-n{font-size:24px;font-weight:800;line-height:1.2}
.ft-n small{font-size:13px;font-weight:600;color:var(--mut)}
.ft-hist{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;margin:8px 2px 0}
.ft-sec{font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin:14px 2px 6px}
.ft-open{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ft-open:first-of-type{border-top:0}
.ft-open .grow{flex:1;min-width:160px}
.ft-open .muted{font-size:12px;line-height:1.5}
.ft-ic{font-size:18px;flex:0 0 auto}
.ft-none{padding:4px 2px}
.ft-dia{margin-top:8px;font-size:12px}
.ft-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;justify-content:flex-end}

/* ===== 🏠 TEACHER HOME (offer K, 2026-10-03): tiles · timeline · numbers =====
   Phone = one column: main (greeting, tiles, Now) → side (lessons, numbers) →
   rest (Later / Done). ≥900px = two columns, the side column sticky under the
   fixed top bar. The side spans a 1fr row so it never stretches the main row. */
.hm-top{display:flex;align-items:center;margin:4px 0 10px}
.hm-hi{min-width:0}
.hm-hi h2{margin:0;font-size:22px;line-height:1.2}
.hm-hi .muted{display:block;font-size:var(--fs-sm);margin-top:3px}
.hm-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "rest";gap:14px}
.hm-main{grid-area:main;min-width:0}
.hm-side{grid-area:side;min-width:0;display:flex;flex-direction:column;gap:14px}
.hm-rest{grid-area:rest;min-width:0}
.hm-rest .df-band:first-child{margin-top:0}
@media (min-width:900px){
  .hm-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"main side" "rest side";gap:16px 22px;align-items:start}
  .hm-side{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;
    overscroll-behavior:contain}
}
/* the four task tiles */
.hm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.hm-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:14px;
  padding:9px 9px 8px;color:var(--txt);font:inherit;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.hm-tile:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.hm-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hm-tile .hm-ti{font-size:17px;line-height:1}
.hm-tile .hm-n{font-size:22px;font-weight:800;line-height:1.1;margin-top:3px}
.hm-tile .hm-l{font-size:11.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.hm-tile small{font-size:11px;color:var(--mut);line-height:1.3;overflow-wrap:anywhere}
.hm-tile.bad{border-top-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--card))}
.hm-tile.bad .hm-n,.hm-tile.bad small{color:var(--bad)}
.hm-tile.bad small{font-weight:700}
.hm-tile.okc{border-top-color:var(--ok)}
.hm-tile.okc .hm-n{color:var(--ok)}
.hm-tile.idle{opacity:.78}
.hm-tile.idle .hm-n{color:var(--mut)}
@media (min-width:600px){
  .hm-tiles{gap:10px}
  .hm-tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic n" "l l" "s s";
    column-gap:8px;padding:12px 12px 10px}
  .hm-tile .hm-ti{grid-area:ic;font-size:20px;align-self:center}
  .hm-tile .hm-n{grid-area:n;margin:0;justify-self:end;font-size:24px}
  .hm-tile .hm-l{grid-area:l;font-size:var(--fs-sm);margin-top:4px}
  .hm-tile small{grid-area:s;font-size:12px}
}
.hm-calm{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;
  color:var(--mut);font-size:var(--fs-sm);border:1px dashed var(--line)}
.hm-calm .ok{color:var(--ok);font-weight:800}
/* side cards: lessons timeline + numbers */
.hm-card,.hm-nums{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 8px}
.hm-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 8px;
  font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.hm-hc{text-transform:none;letter-spacing:0;font-weight:700;color:var(--txt)}
.hm-none{color:var(--mut);font-size:var(--fs-sm);padding:6px 4px 10px}
.hm-tl{display:flex;flex-direction:column}
.tl-row{position:relative;display:grid;grid-template-columns:44px 14px minmax(0,1fr) auto;align-items:center;
  gap:8px;width:100%;min-height:48px;padding:6px 6px;border:0;border-radius:10px;background:none;
  color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.tl-row:hover{background:color-mix(in srgb,var(--txt) 5%,transparent)}
.tl-row:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.tl-row::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-1px)}
.tl-row:first-child::before{top:50%}
.tl-row:last-child::before{bottom:50%}
.tl-row:only-child::before{display:none}
.tl-time{font-size:var(--fs-sm);font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.tl-dot{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;justify-self:center;
  background:var(--card);border:2px solid var(--mut)}
.tl-tx{min-width:0}
.tl-tx b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-tx small{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.tl-cta{font-size:var(--fs-sm);font-weight:700;color:var(--mut);white-space:nowrap}
.tl-row.saved .tl-dot{background:var(--ok);border-color:var(--ok)}
.tl-row.saved .tl-tx small{color:var(--ok)}
.tl-row.saved .tl-tx b{color:var(--mut)}
.tl-row.now{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.tl-row.now .tl-dot{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
.tl-row.now .tl-time,.tl-row.now .tl-cta{color:var(--acc)}
.tl-row.now .tl-tx small{color:var(--txt);font-weight:600}
.tl-row.late{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.tl-row.late .tl-dot{background:var(--bad);border-color:var(--bad)}
.tl-row.late .tl-tx small,.tl-row.late .tl-cta,.tl-row.late .tl-time{color:var(--bad)}
.tl-row.late .tl-tx small{font-weight:700}
.hm-ngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:4px}
.hm-num{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;text-align:left;
  padding:10px 10px 9px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--txt) 3%,transparent);color:var(--txt);font:inherit;cursor:pointer}
.hm-num:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.hm-num:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hm-num .hm-ni{font-size:13px;letter-spacing:0}
.hm-num b{font-size:21px;font-weight:800;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.hm-num.neg b{color:var(--bad)}
.hm-num i{font-style:normal;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.hm-num small{font-size:11.5px;color:var(--mut);overflow-wrap:anywhere}
.hm-num small .up{color:var(--ok);font-weight:700}
.hm-num small .down{color:var(--bad);font-weight:700}
@media (prefers-reduced-motion: reduce){.hm-tile{transition:none}.hm-tile:hover{transform:none}}

/* =====================================================================
   🎨 TEACHER UI — chunk 1: foundations + frame (2026-10-04, offer L)
   Calm & modern: quiet neutral surfaces, ONE accent (indigo in BOTH
   themes), flat hairline cards, three button levels, segmented tabs,
   line icons. Scoped to teacher.html (<body class="tui">) — admin, front
   desk and print never match. Two prefixes on purpose:
     ":root[data-theme] body.tui:not(.authbg) X"  (0,4,1) → beats the shared
        ":root[data-theme=light] X" rules where a token is not enough
     ":where(:root[data-theme] body.tui:not(.authbg)) X" = zero weight → element baselines
        (button, input) that any component class can still override.
   Red / amber / green stay for MEANING only; --pay-* is untouched.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){
  --bg:#111214; --bg2:#16171b; --card:#1b1c21; --raised:#24252c; --field:#16171b;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --hover:rgba(255,255,255,.05);
  --txt:#eceef2; --mut:#9ba0ad;
  --acc:#a5a0ff; --acc2:#c4c0ff; --pri:#5b52e8; --pri-h:#6a62ef;
  --acc-soft:rgba(124,116,255,.16); --acc-ring:rgba(124,116,255,.28);
  --grad-a:#5b52e8; --grad-b:#5b52e8;
  --seg:#141519; --thumb:#2a2b33; --thumb-sh:0 1px 2px rgba(0,0,0,.35);
  --thead:#1b1c21;
  --top-bg:#16171b; --top-txt:#eceef2; --top-mut:#9ba0ad; --top-line:rgba(255,255,255,.08);
  --e1:none; --e2:0 4px 16px rgba(0,0,0,.28); --e3:0 22px 60px rgba(0,0,0,.45);
  --radius:16px;
}
:root[data-theme="light"] body.tui:not(.authbg){
  --bg:#f5f6f9; --bg2:#eef0f5; --card:#ffffff; --raised:#f2f3f7; --field:#ffffff;
  --line:#e4e6ee; --line2:#d5d8e3; --hover:#f1f2f7;
  --txt:#16181f; --mut:#5f6575;
  --acc:#4f46e5; --acc2:#6d64f0; --pri:#4f46e5; --pri-h:#4338ca;
  --acc-soft:#eef0ff; --acc-ring:rgba(79,70,229,.18);
  --grad-a:#4f46e5; --grad-b:#4f46e5;
  --seg:#eceef3; --thumb:#ffffff; --thumb-sh:0 1px 2px rgba(20,22,40,.10),0 0 0 1px rgba(20,22,40,.04);
  --thead:#f5f6f9;
  --top-bg:#ffffff; --top-txt:#16181f; --top-mut:#5f6575; --top-line:#e4e6ee;
  --e1:none; --e2:0 4px 16px rgba(20,22,40,.08); --e3:0 22px 60px rgba(20,22,40,.16);
}
/* plain background — the red radial glow is gone (login keeps its own art) */
:root[data-theme] body.tui:not(.authbg){background:var(--bg)}
:root[data-theme] body.tui:not(.authbg) ::selection{background:var(--acc-ring)}

/* ---- line icons ---- */
.ico{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
:root[data-theme] body.tui:not(.authbg) [data-ico]{display:inline-flex;align-items:center}

/* ---- shapes + type ---- */
:root[data-theme] body.tui:not(.authbg) .card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme] body.tui:not(.authbg) .sec-title{font-size:15px;font-weight:600;letter-spacing:0}
:root[data-theme] body.tui:not(.authbg) .muted,:root[data-theme] body.tui:not(.authbg) .meta{color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .pg-head{display:flex;flex-direction:column;gap:3px;margin:2px 0 14px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .pg-head h2{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0}
:root[data-theme] body.tui:not(.authbg) .pg-sub{font-size:13px;color:var(--mut);font-weight:400}
:root[data-theme] body.tui:not(.authbg) #crumb .pg-head{margin:0}
:root[data-theme] body.tui:not(.authbg) .gc-head{margin-top:2px}
:root[data-theme] body.tui:not(.authbg) .gc-head .crumb{margin:4px 0 10px}

/* ---- buttons: primary (solid) · .ghost (secondary) · .link (text) ---- */
:where(:root[data-theme] body.tui:not(.authbg)) button{background:var(--pri);color:#fff;border-radius:12px;font-weight:600;box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
:where(:root[data-theme] body.tui:not(.authbg)) button:hover:not(:disabled){transform:none;box-shadow:none}
:where(:root[data-theme] body.tui:not(.authbg)) button:not(:disabled):not(.ghost):not(.link):hover{transform:none;box-shadow:none;filter:brightness(1.07)}
:where(:root[data-theme] body.tui:not(.authbg)) button.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line2)}
:where(:root[data-theme] body.tui:not(.authbg)) button.ghost:hover:not(:disabled){background:var(--hover);border-color:var(--line2);filter:none}
:where(:root[data-theme] body.tui:not(.authbg)) button.danger{background:var(--bad);color:#fff}
:root[data-theme] body.tui:not(.authbg) button.sm{border-radius:10px}
:where(:root[data-theme] body.tui:not(.authbg)) .list-item:hover,:where(:root[data-theme] body.tui:not(.authbg)) .adm-card:hover,:where(:root[data-theme] body.tui:not(.authbg)) .tile:hover,:where(:root[data-theme] body.tui:not(.authbg)) .lb-row:hover{
  transform:none;box-shadow:none;border-color:var(--line2)}
:where(:root[data-theme] body.tui:not(.authbg)) input:hover,:where(:root[data-theme] body.tui:not(.authbg)) select:hover,:where(:root[data-theme] body.tui:not(.authbg)) textarea:hover{border-color:var(--line2)}

/* ---- fields ---- */
:root[data-theme] body.tui:not(.authbg) input:not([type=checkbox]):not([type=radio]):not([type=range]),:root[data-theme] body.tui:not(.authbg) select,:root[data-theme] body.tui:not(.authbg) textarea{
  background:var(--field);border:1px solid var(--line2);border-radius:12px;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) input:focus,:root[data-theme] body.tui:not(.authbg) select:focus,:root[data-theme] body.tui:not(.authbg) textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .tog input:checked + .knob{background:var(--pri)}

/* ---- segmented tabs: grey track + one raised thumb ---- */
:root[data-theme] body.tui:not(.authbg) .tabs{display:flex;width:fit-content;max-width:100%;gap:2px;padding:3px;border-radius:12px;
  background:var(--seg);border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab{background:transparent;border:0;border-radius:9px;padding:7px 13px;min-height:34px;
  color:var(--mut);font-weight:600;font-size:13px;line-height:20px;display:block;text-align:center;white-space:nowrap;
  box-shadow:none;transform:none}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab:hover{color:var(--txt);background:transparent;transform:none;border-color:transparent}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab.active{background:var(--thumb);color:var(--txt);box-shadow:var(--thumb-sh)}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab .ti{display:inline-flex;vertical-align:-3px;margin-right:2px}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab .ico{width:16px;height:16px}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab.active .ico{color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab .badge-n{margin-left:2px}
/* a lone toggle button that wears the .tab class (Favorites) = secondary chip */
:root[data-theme] body.tui:not(.authbg) button.tab{background:var(--card);border:1px solid var(--line2);color:var(--txt);border-radius:12px;
  font-weight:600;font-size:13px;gap:6px}
:root[data-theme] body.tui:not(.authbg) button.tab.active{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) button.tab .ico{width:16px;height:16px}
/* the two-way switches (Cards | Grid, Weekly | Monthly) match the tabs */
:root[data-theme] body.tui:not(.authbg) .gc-seg{border-radius:12px;background:var(--seg);border:1px solid var(--line);padding:3px;gap:2px}
:root[data-theme] body.tui:not(.authbg) .gc-seg button{border-radius:9px;background:transparent;color:var(--mut);box-shadow:none}
:root[data-theme] body.tui:not(.authbg) .gc-seg button.on{background:var(--thumb);color:var(--txt);box-shadow:var(--thumb-sh)}
@media (max-width:560px){
  :root[data-theme] body.tui:not(.authbg) .tabs{flex-wrap:nowrap;overflow-x:auto}
  :root[data-theme] body.tui:not(.authbg) .tabs.tabs-fit{display:grid;width:100%;gap:2px}
  :root[data-theme] body.tui:not(.authbg) .tabs.tabs-fit > .tab{display:block;padding:7px 2px 6px;min-height:34px;font-size:12px}
  :root[data-theme] body.tui:not(.authbg) .tabs.tabs-fit > .tab .ti{display:block;line-height:1;margin-bottom:3px}
  :root[data-theme] body.tui:not(.authbg) .tabs.tabs-fit > .tab .ti .ico{width:18px;height:18px;vertical-align:0}
}

/* ---- bottom tabs: accent icon inside a soft pill ---- */
:root[data-theme] body.tui:not(.authbg) .bnav{background:var(--card);border-top:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .bn-item{background:none;color:var(--mut);font-weight:600;gap:4px}
:root[data-theme] body.tui:not(.authbg) .bn-item svg{padding:4px 18px;box-sizing:content-box;border-radius:999px;
  transition:background-color var(--t-fast) var(--ease)}
:root[data-theme] body.tui:not(.authbg) .bn-item:hover{color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .bn-item.active{background:none;color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .bn-item.active svg{background:var(--acc-soft)}
:root[data-theme] body.tui:not(.authbg) .bn-item .badge-n{right:calc(50% - 30px)}
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg) .bnav{background:none;border:0;max-width:1240px}
  :root[data-theme] body.tui:not(.authbg) .bn-item{background:transparent;border:1px solid transparent;color:var(--mut);padding:8px 14px}
  :root[data-theme] body.tui:not(.authbg) .bn-item svg{padding:0}
  :root[data-theme] body.tui:not(.authbg) .bn-item:hover{background:var(--hover);color:var(--txt)}
  :root[data-theme] body.tui:not(.authbg) .bn-item.active{background:var(--acc-soft);color:var(--acc);border-color:transparent}
  :root[data-theme] body.tui:not(.authbg) .bn-item.active svg{background:none}
}

/* ---- frame: content width + the slim top bar ---- */
:root[data-theme] body.tui:not(.authbg) .shell{max-width:1240px;padding-top:76px}
:root[data-theme] body.tui:not(.authbg) .topbar{min-height:60px;padding:0 20px;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .topbar .tb-skin{height:60px;background:var(--top-bg);border-bottom:1px solid var(--line);box-shadow:none}
:root[data-theme] body.tui:not(.authbg) .topbar .brand .logo{width:30px;height:30px}
:root[data-theme] body.tui:not(.authbg) .topbar .brand h1{font-size:15px;color:var(--txt);letter-spacing:.2px}
:root[data-theme] body.tui:not(.authbg) .topbar .brand span{color:var(--mut)}
:root[data-theme="light"] body.tui:not(.authbg) .topbar .logo{background-image:var(--logo-light) !important}
:root[data-theme] body.tui:not(.authbg) .topbar-right{display:flex;align-items:center;gap:8px}
:root[data-theme] body.tui:not(.authbg) .topbar button.tb-ib{width:38px;height:38px;min-height:0;padding:0;border-radius:10px;display:inline-grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .topbar button.tb-ib:hover{background:var(--hover);border-color:var(--line2)}
:root[data-theme] body.tui:not(.authbg) .topbar button.tb-ib .ico{width:18px;height:18px}
:root[data-theme] body.tui:not(.authbg) .topbar button.omni-tgl{display:none}
:root[data-theme] body.tui:not(.authbg) .tb-ava{width:36px;height:36px;min-height:0;padding:0;border-radius:50%;flex:0 0 36px;background:var(--acc-soft);color:var(--acc);
  font-size:13px;font-weight:700;letter-spacing:.3px;border:1px solid transparent}
:root[data-theme] body.tui:not(.authbg) .tb-ava:hover{border-color:var(--acc);filter:none}
:root[data-theme] body.tui:not(.authbg) .omni{max-width:380px}
:root[data-theme] body.tui:not(.authbg) .omni .omni-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
:root[data-theme] body.tui:not(.authbg) .omni .omni-ic .ico{width:16px;height:16px}
:root[data-theme] body.tui:not(.authbg) .omni input{padding-left:34px;background:var(--raised);border-color:var(--line);height:38px}
@media (max-width:700px){
  :root[data-theme] body.tui:not(.authbg) .shell{padding-top:66px}
  :root[data-theme] body.tui:not(.authbg) .topbar{min-height:54px;padding:0 12px}
  :root[data-theme] body.tui:not(.authbg) .topbar .tb-skin{height:54px}
  :root[data-theme] body.tui:not(.authbg) .topbar .brand span{display:none}
  :root[data-theme] body.tui:not(.authbg) .topbar button.omni-tgl{display:inline-grid}
  :root[data-theme] body.tui:not(.authbg) .topbar button.tb-theme{display:none}
  :root[data-theme] body.tui:not(.authbg) .boot-bar{top:62px}
  :root[data-theme] body.tui:not(.authbg).omni-open .topbar .omni{top:54px}
}

/* ---- Me → Settings ---- */
:root[data-theme] body.tui:not(.authbg) .set-card{padding:2px 16px}
:root[data-theme] body.tui:not(.authbg) .set-row{display:flex;align-items:center;gap:12px;padding:12px 0}
:root[data-theme] body.tui:not(.authbg) .set-row + .set-row{border-top:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .set-row[hidden]{display:none}
:root[data-theme] body.tui:not(.authbg) .set-row .grow{flex:1;min-width:0}
:root[data-theme] body.tui:not(.authbg) .set-row b{font-size:14px;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .set-sub{font-size:12px;color:var(--mut);margin-top:2px}
:root[data-theme] body.tui:not(.authbg) .set-ic{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .set-ic .ico{width:18px;height:18px}
:root[data-theme] body.tui:not(.authbg) .set-row.tp-me .tp-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:root[data-theme] body.tui:not(.authbg) .set-pin{margin-top:14px;max-width:none}
:root[data-theme] body.tui:not(.authbg) .set-pin .sec-title .ico{color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .help-card.set-help{margin-top:14px;flex-direction:row;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:12px 16px}
:root[data-theme] body.tui:not(.authbg) .set-help .grow{flex:1;min-width:0}
:root[data-theme] body.tui:not(.authbg) .set-help .help-btn{margin:0;flex:0 0 auto}
:root[data-theme] body.tui:not(.authbg) button.set-out{width:100%;margin-top:14px;color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 35%,var(--line2))}
:root[data-theme] body.tui:not(.authbg) button.set-out:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 8%,var(--card))}
@media (max-width:420px){ :root[data-theme] body.tui:not(.authbg) .set-help .help-btn{display:none} }
/* leftover red tint behind the 💎 total (the Me chunk redraws it fully) */
:root[data-theme] body.tui:not(.authbg) .dm-hero{background:var(--acc-soft);border-color:transparent}

/* =====================================================================
   🎨 TEACHER UI — chunk 2: Home (2026-10-04). Same layout as offer K;
   the frame is calmer: icon chips instead of emoji, flat hairline cards
   (no coloured left rails), tone carried by the chip + one coloured word,
   soft pill CTAs, quiet section headers. Meaning colours only.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){ --bad-soft:color-mix(in srgb,var(--bad) 14%,transparent);
   --ok-soft:color-mix(in srgb,var(--ok) 15%,transparent);
   --warn-soft:color-mix(in srgb,var(--warn) 18%,transparent); }

/* header */
:root[data-theme] body.tui:not(.authbg) .hm-hi h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
:root[data-theme] body.tui:not(.authbg) .hm-hi .muted{font-size:13px}
:root[data-theme] body.tui:not(.authbg) #dfRefresh.hm-refresh{width:38px;height:38px;min-height:0;padding:0;border-radius:10px;display:inline-grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) #dfRefresh .ico{width:18px;height:18px}
:root[data-theme] body.tui:not(.authbg) #dfRefresh.spin{animation:none}
:root[data-theme] body.tui:not(.authbg) #dfRefresh.spin .ico{animation:ptrSpin .8s linear infinite}
@media (prefers-reduced-motion: reduce){ :root[data-theme] body.tui:not(.authbg) #dfRefresh.spin .ico{animation:none} }

/* the four task tiles */
:root[data-theme] body.tui:not(.authbg) .hm-tile{justify-content:flex-start;background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:14px;
  padding:10px 10px 9px;gap:3px}
:root[data-theme] body.tui:not(.authbg) .hm-tile:hover{transform:none;box-shadow:none;border-color:var(--line2)}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-ti .ico{width:16px;height:16px}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-n{font-size:22px;font-weight:700;color:var(--txt);margin-top:6px;display:flex;align-items:center;min-height:27px}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-n .ico{width:20px;height:20px;stroke-width:2.4}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-l{font-size:12px;font-weight:600;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .hm-tile small{font-size:11.5px;color:var(--mut);display:flex;align-items:center;gap:3px}
:root[data-theme] body.tui:not(.authbg) .hm-tile small .ico{width:12px;height:12px}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad{background:color-mix(in srgb,var(--bad) 5%,var(--card));border-color:color-mix(in srgb,var(--bad) 28%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad .hm-ti{background:var(--bad-soft);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad .hm-n,:root[data-theme] body.tui:not(.authbg) .hm-tile.bad small{color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad small{font-weight:600}
:root[data-theme] body.tui:not(.authbg) .hm-tile.okc .hm-ti{background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.okc .hm-n{color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.idle{opacity:1}
:root[data-theme] body.tui:not(.authbg) .hm-tile.idle .hm-n{color:var(--mut)}
@media (min-width:600px){
  :root[data-theme] body.tui:not(.authbg) .hm-tile{padding:12px 12px 10px}
  :root[data-theme] body.tui:not(.authbg) .hm-tile .hm-n{margin:0;justify-content:flex-end}
  :root[data-theme] body.tui:not(.authbg) .hm-tile .hm-l{font-size:13px;margin-top:6px}
}

/* section labels */
:root[data-theme] body.tui:not(.authbg) .df-band{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mut);margin:16px 2px 8px;
  display:flex;align-items:center;gap:6px}
:root[data-theme] body.tui:not(.authbg) .df-band:first-child{margin-top:0}
:root[data-theme] body.tui:not(.authbg) .df-bn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--raised);color:var(--txt);font-size:11px;letter-spacing:0}

/* Now / Later cards */
:root[data-theme] body.tui:not(.authbg) .df-card{background:var(--card);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:14px;
  padding:11px 12px;gap:12px;margin-bottom:8px}
:root[data-theme] body.tui:not(.authbg) .df-card:hover{transform:none;box-shadow:none;border-color:var(--line2)}
:root[data-theme] body.tui:not(.authbg) .df-card .df-ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;
  background:var(--raised);color:var(--mut);font-size:18px}
:root[data-theme] body.tui:not(.authbg) .df-card .df-ic .ico{width:18px;height:18px}
:root[data-theme] body.tui:not(.authbg) .df-card .df-tx b{font-size:14px;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .df-card .df-tx small{font-size:12px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .df-card .df-cta{display:inline-flex;align-items:center;gap:2px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--acc-soft);color:var(--acc);font-size:13px;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .df-card .df-cta .ico{width:15px;height:15px}
:root[data-theme] body.tui:not(.authbg) .df-card.now .df-ic{background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad{background:color-mix(in srgb,var(--bad) 4%,var(--card));border-color:color-mix(in srgb,var(--bad) 25%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-ic{background:var(--bad-soft);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-tx small{color:var(--bad);font-weight:600}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-cta{background:var(--bad);color:#fff}
:root[data-theme] body.tui:not(.authbg) .df-card.warn .df-ic{background:var(--warn-soft);color:var(--warn)}
:root[data-theme] body.tui:not(.authbg) .df-done{gap:10px;padding:8px 12px;color:var(--mut);font-size:13px;border-radius:10px}
:root[data-theme] body.tui:not(.authbg) .df-done:hover{background:var(--hover);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .df-done .ok{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .df-done .ok .ico{width:13px;height:13px;stroke-width:2.6}
:root[data-theme] body.tui:not(.authbg) .hm-calm{border:1px dashed var(--line2);border-radius:12px;color:var(--mut);gap:10px}
:root[data-theme] body.tui:not(.authbg) .hm-calm .ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .hm-calm .ok .ico{width:13px;height:13px;stroke-width:2.6}
:root[data-theme] body.tui:not(.authbg) .df-empty .big{font-size:30px}

/* side cards: timeline + numbers */
:root[data-theme] body.tui:not(.authbg) .hm-card,:root[data-theme] body.tui:not(.authbg) .hm-nums{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 10px}
:root[data-theme] body.tui:not(.authbg) .hm-h{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--txt);margin:0 2px 10px}
:root[data-theme] body.tui:not(.authbg) .hm-h > span:first-child{display:inline-flex;align-items:center;gap:8px}
:root[data-theme] body.tui:not(.authbg) .hm-h > span:first-child .ico{width:16px;height:16px;color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .hm-hc{font-size:12px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .tl-row .tl-cta{display:inline-flex;align-items:center;gap:2px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .tl-row .tl-cta .ico{width:15px;height:15px}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-cta,:root[data-theme] body.tui:not(.authbg) .tl-row.late .tl-cta{padding:5px 6px 5px 11px;border-radius:999px;font-size:12px}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-cta{background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .tl-row.late .tl-cta{background:var(--bad-soft);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-dot{box-shadow:0 0 0 4px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .hm-num{background:var(--raised);border:1px solid transparent;border-radius:12px;padding:11px 12px 10px}
:root[data-theme] body.tui:not(.authbg) .hm-num:hover{border-color:var(--line2);background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .hm-num i{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mut);display:flex;align-items:center;gap:6px}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni{display:inline-grid;place-items:center;color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni .ico{width:14px;height:14px}
:root[data-theme] body.tui:not(.authbg) .hm-num b{font-size:22px;font-weight:700;margin-top:5px}
:root[data-theme] body.tui:not(.authbg) .hm-num small{font-size:12px}
:root[data-theme] body.tui:not(.authbg) .df-card .df-tx small .ico{width:13px;height:13px;vertical-align:-2px}

/* =====================================================================
   🎨 TEACHER UI — colour pass (2026-10-04, "Colourful & friendly" — per
   Jasurbek: "the portal is becoming boring and heavy"). Same clean layout,
   more life: the indigo→violet gradient is back on main buttons, each Home
   feature has its own colour (New students violet · Unpaid amber ·
   Absences rose · Late books teal; numbers: earned emerald · diamonds sky ·
   paid amber · portal violet) shown as gradient icon chips with a soft
   glow, and the greeting sits on a gradient card with a time-of-day
   picture. Red / green still mean late / done (counts, CTAs, checks).
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){
  --grad-a:#5b52e8; --grad-b:#8b5cf6;
  --grad:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  --pri-glow:0 8px 20px -10px rgba(110,90,240,.75);
  --f-new-a:#7c3aed; --f-new-b:#a78bfa;
  --f-od-a:#ea580c;  --f-od-b:#f59e0b;
  --f-att-a:#e11d48; --f-att-b:#fb7185;
  --f-bk-a:#0d9488;  --f-bk-b:#2dd4bf;
  --f-earn-a:#059669; --f-earn-b:#34d399;
  --f-dia-a:#0284c7;  --f-dia-b:#38bdf8;
}
:root[data-theme="light"] body.tui:not(.authbg){
  --grad-a:#4f46e5; --grad-b:#7c3aed;
  --pri-glow:0 8px 20px -10px rgba(79,70,229,.6);
}
/* a faint coloured wash at the top of the page (scrolls away) */
:root[data-theme] body.tui:not(.authbg){background:radial-gradient(900px 340px at 0% -60px,color-mix(in srgb,var(--grad-a) 13%,transparent),transparent 70%) no-repeat,
  radial-gradient(760px 320px at 100% -80px,color-mix(in srgb,var(--grad-b) 11%,transparent),transparent 70%) no-repeat,var(--bg)}

/* ---- main buttons: the gradient + a soft glow ---- */
:where(:root[data-theme] body.tui:not(.authbg)) button{background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
:where(:root[data-theme] body.tui:not(.authbg)) button.ghost{background:var(--card)}
:where(:root[data-theme] body.tui:not(.authbg)) button.danger{background:var(--bad)}
:root[data-theme] body.tui:not(.authbg) #startLesson,:root[data-theme] body.tui:not(.authbg) .set-pin button,:root[data-theme] body.tui:not(.authbg) .ls-foot button:not(.ghost){box-shadow:var(--pri-glow)}

/* ---- frame: gradient avatar, gradient-tinted active tab pill ---- */
:root[data-theme] body.tui:not(.authbg) .tb-ava{background:var(--grad);color:#fff;box-shadow:var(--pri-glow)}
:root[data-theme] body.tui:not(.authbg) .tb-ava:hover{border-color:transparent;filter:brightness(1.08)}
:root[data-theme] body.tui:not(.authbg) .bn-item.active svg{background:linear-gradient(135deg,color-mix(in srgb,var(--grad-a) 20%,transparent),color-mix(in srgb,var(--grad-b) 20%,transparent))}
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg) .bn-item.active{background:linear-gradient(135deg,color-mix(in srgb,var(--grad-a) 16%,transparent),color-mix(in srgb,var(--grad-b) 16%,transparent))}
  :root[data-theme] body.tui:not(.authbg) .bn-item.active svg{background:none}
}

/* ---- Home: the greeting card was REMOVED (per Jasurbek 2026-10-04) —
   the slim .hm-top row keeps only the ↻ Refresh button ---- */

/* ---- Home: each task tile in its own colour ---- */
:root[data-theme] body.tui:not(.authbg) .hm-tile[data-hm="adm"]{--fa:var(--f-new-a);--fb:var(--f-new-b)}
:root[data-theme] body.tui:not(.authbg) .hm-tile[data-hm="od"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}
:root[data-theme] body.tui:not(.authbg) .hm-tile[data-hm="att"]{--fa:var(--f-att-a);--fb:var(--f-att-b)}
:root[data-theme] body.tui:not(.authbg) .hm-tile[data-hm="bks"]{--fa:var(--f-bk-a);--fb:var(--f-bk-b)}
:root[data-theme] body.tui:not(.authbg) .hm-tile{background:radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--fb) 14%,transparent),transparent 62%),var(--card);
  transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
:root[data-theme] body.tui:not(.authbg) .hm-tile:hover{box-shadow:0 10px 24px -16px var(--fa);border-color:color-mix(in srgb,var(--fa) 35%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-ti,:root[data-theme] body.tui:not(.authbg) .hm-tile.bad .hm-ti,:root[data-theme] body.tui:not(.authbg) .hm-tile.okc .hm-ti{position:relative;background:linear-gradient(135deg,var(--fa),var(--fb));color:#fff;
  box-shadow:0 6px 14px -8px var(--fa)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.idle .hm-ti{opacity:.75}
/* due = a red dot on the chip (the count + deadline are red too) */
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad .hm-ti::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--bad);box-shadow:0 0 0 2px var(--card)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad{background:radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--fb) 14%,transparent),transparent 62%),
  color-mix(in srgb,var(--bad) 5%,var(--card))}

/* ---- Home: feed card chips ---- */
:root[data-theme] body.tui:not(.authbg) .df-card.now .df-ic{background:var(--grad);color:#fff;box-shadow:0 6px 14px -8px var(--grad-a)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-ic{background:linear-gradient(135deg,#dc2626,#fb7185);color:#fff;box-shadow:0 6px 14px -8px #dc2626}
:root[data-theme] body.tui:not(.authbg) .df-card.warn .df-ic{background:linear-gradient(135deg,var(--f-od-a),var(--f-od-b));color:#fff;box-shadow:0 6px 14px -8px var(--f-od-a)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-cta{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 6px 14px -8px #dc2626}

/* ---- Home: side cards — gradient header chips, coloured number chips ---- */
:root[data-theme] body.tui:not(.authbg) .hm-h > span:first-child .ico{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:8px;background:var(--grad);color:#fff}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-cta{background:var(--grad);color:#fff}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-dot{background:var(--grad-b)}
:root[data-theme] body.tui:not(.authbg) .hm-num[data-hmn="earn"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.tui:not(.authbg) .hm-num[data-hmn="dia"]{--fa:var(--f-dia-a);--fb:var(--f-dia-b)}
:root[data-theme] body.tui:not(.authbg) .hm-num[data-hmn="col"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}
:root[data-theme] body.tui:not(.authbg) .hm-num[data-hmn="portal"]{--fa:var(--f-new-a);--fb:var(--f-new-b)}
:root[data-theme] body.tui:not(.authbg) .hm-num{background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb) 13%,transparent),transparent 65%),var(--raised)}
:root[data-theme] body.tui:not(.authbg) .hm-num:hover{background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb) 18%,transparent),transparent 65%),var(--raised);
  border-color:color-mix(in srgb,var(--fa) 30%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--fa),var(--fb));color:#fff}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni .ico{width:13px;height:13px}
:root[data-theme] body.tui:not(.authbg) .df-card:not(.now):not(.bad):not(.warn) .df-ic{background:var(--acc-soft);color:var(--acc)}

/* =====================================================================
   🎨 TEACHER UI — emoji + glass pass (2026-10-04, Jasurbek: "icons must
   tell what the button means without reading the title — use emoji";
   "a subtle premium glass reflection"). ico() returns emoji for meaning
   names (common.js E map); search / ↻ / › / ✕ / ✓ stay line icons.
   Glass = a soft diagonal light sweep + a thin bright top rim on cards,
   frosted (blurred) top + bottom bars, a glossy greeting card and glossy
   main buttons. Text always sits on a near-opaque surface (readable), and
   blur is used ONLY on the two bars (cheap phones stay fast).
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){
  --sheen:linear-gradient(135deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 34%,rgba(255,255,255,0) 52%);
  --rim:inset 0 1px 0 rgba(255,255,255,.07);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,0) 52%);
  --frost:color-mix(in srgb,var(--top-bg) 74%,transparent);
}
:root[data-theme="light"] body.tui:not(.authbg){
  --sheen:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 36%,rgba(255,255,255,0) 55%);
  --rim:inset 0 1px 0 #ffffff,0 1px 2px rgba(20,22,40,.04);
  --frost:rgba(255,255,255,.72);
}

/* ---- emoji: sized by their slot, never stroked ---- */
:root[data-theme] body.tui:not(.authbg) .ico.emo{width:auto !important;height:auto !important;padding:0;stroke:none;fill:currentColor;display:inline-block;line-height:1;
  font-style:normal;font-weight:400;font-size:1.05em;vertical-align:-.08em;letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;background:none !important;box-shadow:none !important;border-radius:0}
:root[data-theme] body.tui:not(.authbg) .tabs > .tab .ti .ico.emo{font-size:15px;vertical-align:-1px}
:root[data-theme] body.tui:not(.authbg) button .ico.emo{font-size:1.1em}
:root[data-theme] body.tui:not(.authbg) .set-ic .ico.emo{font-size:19px}
:root[data-theme] body.tui:not(.authbg) .df-card .df-tx small .ico.emo,:root[data-theme] body.tui:not(.authbg) .hm-tile small .ico.emo{font-size:11px;vertical-align:0}
@media (max-width:560px){ :root[data-theme] body.tui:not(.authbg) .tabs.tabs-fit > .tab .ti .ico.emo{font-size:19px} }

/* ---- bottom bar: emoji in a glossy pill ---- */
:root[data-theme] body.tui:not(.authbg) .bn-emo{font-size:21px;line-height:1;padding:5px 18px;border-radius:999px;display:block;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:grayscale(.35) opacity(.8);
  transition:filter var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
:root[data-theme] body.tui:not(.authbg) .bn-item:hover .bn-emo{filter:none}
:root[data-theme] body.tui:not(.authbg) .bn-item.active .bn-emo{filter:none;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),
  linear-gradient(135deg,color-mix(in srgb,var(--grad-a) 24%,transparent),color-mix(in srgb,var(--grad-b) 24%,transparent));
  box-shadow:var(--rim)}
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg) .bn-emo{font-size:17px;padding:0;filter:none}
  :root[data-theme] body.tui:not(.authbg) .bn-item.active .bn-emo{background:none;box-shadow:none}
  :root[data-theme] body.tui:not(.authbg) .bn-item.active{box-shadow:var(--rim)}
}

/* ---- frosted bars ---- */
:root[data-theme] body.tui:not(.authbg) .topbar .tb-skin{background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent)}
@media (max-width:899px){
  :root[data-theme] body.tui:not(.authbg) .bnav{background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
}

/* ---- glass cards: light sweep + bright rim ---- */
:root[data-theme] body.tui:not(.authbg) .card,:root[data-theme] body.tui:not(.authbg) .hm-card,:root[data-theme] body.tui:not(.authbg) .hm-nums,:root[data-theme] body.tui:not(.authbg) .df-card,:root[data-theme] body.tui:not(.authbg) .set-card{background-image:var(--sheen);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad{background:var(--sheen),color-mix(in srgb,var(--bad) 4%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .hm-tile{background:var(--sheen),radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--fb) 14%,transparent),transparent 62%),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.bad{background:var(--sheen),radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--fb) 14%,transparent),transparent 62%),
  color-mix(in srgb,var(--bad) 5%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .hm-tile:hover{box-shadow:var(--rim),0 10px 24px -16px var(--fa)}
:root[data-theme] body.tui:not(.authbg) .hm-num{background:var(--sheen),radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb) 13%,transparent),transparent 65%),var(--raised);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .hm-num:hover{background:var(--sheen),radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb) 18%,transparent),transparent 65%),var(--raised)}

/* ---- emoji chips: a soft feature tint with a glossy top ---- */
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-ti,:root[data-theme] body.tui:not(.authbg) .hm-tile.bad .hm-ti,:root[data-theme] body.tui:not(.authbg) .hm-tile.okc .hm-ti{width:36px;height:36px;border-radius:11px;color:inherit;font-size:19px;
  background:var(--gloss),color-mix(in srgb,var(--fb) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fa) 22%,transparent)}
:root[data-theme] body.tui:not(.authbg) .hm-tile.idle .hm-ti{opacity:1;filter:saturate(.75)}
:root[data-theme] body.tui:not(.authbg) .hm-tile .hm-ti .ico.emo{font-size:19px}
:root[data-theme] body.tui:not(.authbg) .df-card .df-ic,:root[data-theme] body.tui:not(.authbg) .df-card.now .df-ic,:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-ic,:root[data-theme] body.tui:not(.authbg) .df-card.warn .df-ic{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:20px;
  background:var(--gloss),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-ic{background:var(--gloss),var(--bad-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .df-card.warn .df-ic{background:var(--gloss),var(--warn-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .df-card .df-ic .ico.emo{font-size:20px}
:root[data-theme] body.tui:not(.authbg) .hm-h > span:first-child .ico.emo{font-size:15px;width:28px !important;height:28px !important;display:inline-grid;place-items:center;border-radius:9px;
  background:var(--gloss),var(--acc-soft) !important;box-shadow:inset 0 0 0 1px var(--acc-ring) !important}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni{width:24px;height:24px;border-radius:8px;background:var(--gloss),color-mix(in srgb,var(--fb) 26%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fa) 22%,transparent)}
:root[data-theme] body.tui:not(.authbg) .hm-num .hm-ni .ico.emo{font-size:13px}
:root[data-theme] body.tui:not(.authbg) .set-ic{background:var(--gloss),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}

/* ---- glossy main buttons + greeting card ---- */
:where(:root[data-theme] body.tui:not(.authbg)) button{background:var(--gloss),linear-gradient(135deg,var(--grad-a),var(--grad-b))}
:where(:root[data-theme] body.tui:not(.authbg)) button.ghost{background:var(--sheen),var(--card)}
:where(:root[data-theme] body.tui:not(.authbg)) button.danger{background:var(--gloss),var(--bad)}
:root[data-theme] body.tui:not(.authbg) #startLesson,:root[data-theme] body.tui:not(.authbg) .set-pin button,:root[data-theme] body.tui:not(.authbg) .ls-foot button:not(.ghost){box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--pri-glow)}
:root[data-theme] body.tui:not(.authbg) .tb-ava{background:var(--gloss),var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--pri-glow)}
:root[data-theme] body.tui:not(.authbg) .df-card.bad .df-cta{background:var(--gloss),linear-gradient(135deg,#dc2626,#ef4444)}
:root[data-theme] body.tui:not(.authbg) .tl-row.now .tl-cta{background:var(--gloss),var(--grad)}

/* =====================================================================
   🎨 TEACHER UI — chunk 3: Groups · Lesson · Student sheet (2026-10-04).
   Same language as Home: glass cards (sweep + rim), emoji, soft tinted
   chips, one colour per person/group (avaTone → t0…t5), meaning colours
   only for owes / absent / paid. No nested cards in the register.
   ===================================================================== */
/* ---- avatars: a stable tint per name ---- */
:root[data-theme] body.tui:not(.authbg) .ss-ava{--av:#8b5cf6;border:0;font-weight:700;letter-spacing:.3px;
  background:var(--gloss),color-mix(in srgb,var(--av) 22%,var(--card));
  color:color-mix(in srgb,var(--av) 72%,var(--txt));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av) 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-ava.t0{--av:#8b5cf6} :root[data-theme] body.tui:not(.authbg) .ss-ava.t1{--av:#f59e0b} :root[data-theme] body.tui:not(.authbg) .ss-ava.t2{--av:#f43f5e}
:root[data-theme] body.tui:not(.authbg) .ss-ava.t3{--av:#14b8a6} :root[data-theme] body.tui:not(.authbg) .ss-ava.t4{--av:#0ea5e9} :root[data-theme] body.tui:not(.authbg) .ss-ava.t5{--av:#10b981}

/* ---- group list ---- */
:root[data-theme] body.tui:not(.authbg) .grp-row{justify-content:flex-start;gap:12px;padding:14px;margin-bottom:10px;border:1px solid var(--line);border-radius:16px;
  background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .grp-row:hover{border-color:var(--line2)}
:root[data-theme] body.tui:not(.authbg) .grp-ava{flex:0 0 46px;width:46px;height:46px;border-radius:14px;font-size:15px}
:root[data-theme] body.tui:not(.authbg) .grp-main{flex:1;min-width:0}
:root[data-theme] body.tui:not(.authbg) .grp-main > b{font-size:16px;font-weight:700}
:root[data-theme] body.tui:not(.authbg) .grp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-size:12.5px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .grp-meta .gc-mini{margin:0}
:root[data-theme] body.tui:not(.authbg) .grp-today{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--acc-soft);color:var(--acc);vertical-align:2px}
:root[data-theme] body.tui:not(.authbg) .grp-today.ok{background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .grp-row .rowbtns{gap:8px;align-items:center}
:root[data-theme] body.tui:not(.authbg) .grp-row .openarrow{color:var(--mut);font-size:20px;opacity:.6}
@media (max-width:560px){
  :root[data-theme] body.tui:not(.authbg) .grp-row{flex-wrap:wrap}
  :root[data-theme] body.tui:not(.authbg) .grp-main{flex:1 1 calc(100% - 64px)}
  :root[data-theme] body.tui:not(.authbg) .grp-row .rowbtns{width:100%;padding-left:58px}
  :root[data-theme] body.tui:not(.authbg) .grp-row .rowbtns button{flex:1}
}

/* ---- group drill: cards ---- */
:root[data-theme] body.tui:not(.authbg) .gc-card{background:var(--sheen),var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .gc-card.b-bad{box-shadow:var(--rim),inset 3px 0 0 var(--bad)}
:root[data-theme] body.tui:not(.authbg) .gc-card.b-mid{box-shadow:var(--rim),inset 3px 0 0 var(--warn)}
:root[data-theme] body.tui:not(.authbg) .gc-ava{flex:0 0 42px;width:42px;height:42px;font-size:14px}
:root[data-theme] body.tui:not(.authbg) .gc-card .sbell,:root[data-theme] body.tui:not(.authbg) .ls-row .sbell{display:inline-flex;margin:0 0 0 6px;gap:6px;vertical-align:middle}
:root[data-theme] body.tui:not(.authbg) .bellbtn{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;display:inline-grid;place-items:center;line-height:0}
:root[data-theme] body.tui:not(.authbg) .bellbtn svg{width:14px;height:14px}
:root[data-theme] body.tui:not(.authbg) .bellbtn .bdot{top:-6px;right:-6px}
:root[data-theme] body.tui:not(.authbg) .gc-cnt b{display:inline-block;padding:2px 9px;border-radius:999px;font-weight:700}
:root[data-theme] body.tui:not(.authbg) .gc-cnt b.bad{background:var(--bad-soft)} :root[data-theme] body.tui:not(.authbg) .gc-cnt b.mid{background:var(--warn-soft)}
:root[data-theme] body.tui:not(.authbg) .gc-cnt b.ok{background:var(--ok-soft)} :root[data-theme] body.tui:not(.authbg) .gc-cnt b.kick{background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .gc-strip i{border-radius:5px}
:root[data-theme] body.tui:not(.authbg) .gc-groups button{border-radius:999px}

/* ---- lesson register: avatar + name · soft chips · glossy coin · glossy toggle ---- */
:root[data-theme] body.tui:not(.authbg) .ls-row{padding:10px 2px;gap:10px}
:root[data-theme] body.tui:not(.authbg) .ls-nm{display:flex;align-items:center;gap:10px}
:root[data-theme] body.tui:not(.authbg) .ls-ava{flex:0 0 36px;width:36px;height:36px;font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .ls-nmt{flex:1;min-width:0}
:root[data-theme] body.tui:not(.authbg) .ls-title b{font-size:15px;font-weight:650}
:root[data-theme] body.tui:not(.authbg) .adml-chip.lsc{border-radius:999px;font-weight:700;box-shadow:none;min-height:30px;padding:3px 10px}
:root[data-theme] body.tui:not(.authbg) .adml-chip.due.lsc{background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 32%,transparent)}
:root[data-theme] body.tui:not(.authbg) .adml-chip.warn.lsc{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ls-coinb{background:var(--gloss),color-mix(in srgb,#f59e0b 18%,var(--card));border:1px solid color-mix(in srgb,#f59e0b 42%,transparent);
  min-height:0;height:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme] body.tui:not(.authbg) .att-toggle{width:46px;height:46px;min-height:0;padding:0;border-radius:14px;border-width:1.5px;display:inline-grid;place-items:center;
  font-size:20px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme] body.tui:not(.authbg) .att-toggle.pres{background:var(--gloss),color-mix(in srgb,var(--ok) 16%,var(--card));border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .att-toggle.abs{background:var(--gloss),color-mix(in srgb,var(--bad) 16%,var(--card));border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .ls-foot{background:var(--frost);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border-radius:16px;box-shadow:var(--rim),0 10px 30px -18px rgba(0,0,0,.45)}

/* ---- bottom sheets + the student sheet ---- */
:root[data-theme] body.tui:not(.authbg) .ls-sheet{background:var(--sheen),var(--card);border:1px solid var(--line);border-bottom:0;box-shadow:var(--rim),0 -20px 50px -20px rgba(0,0,0,.45);position:relative}
:root[data-theme] body.tui:not(.authbg) .ls-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:var(--line2);margin:-6px auto 12px}
@media (min-width:700px){ :root[data-theme] body.tui:not(.authbg) .ls-sheet{border-bottom:1px solid var(--line)} :root[data-theme] body.tui:not(.authbg) .ls-sheet::before{display:none} }
:root[data-theme] body.tui:not(.authbg) .ss-id .ss-ava{flex-basis:52px;width:52px;height:52px;font-size:17px}
:root[data-theme] body.tui:not(.authbg) .ss-tile{border-radius:14px;padding:11px 6px 10px;background:var(--sheen),var(--raised);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .ss-tile span{font-size:21px}
:root[data-theme] body.tui:not(.authbg) .ss-tile b{font-size:17px;margin-top:3px}
:root[data-theme] body.tui:not(.authbg) .ss-tile i{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .ss-tile.ok{background:var(--sheen),color-mix(in srgb,var(--ok) 10%,var(--card));border-color:color-mix(in srgb,var(--ok) 38%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-tile.warn{background:var(--sheen),color-mix(in srgb,var(--warn) 11%,var(--card));border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-tile.bad{background:var(--sheen),color-mix(in srgb,var(--bad) 10%,var(--card));border-color:color-mix(in srgb,var(--bad) 38%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-card{border-radius:14px;background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .ss-card.pay.due{box-shadow:var(--rim),inset 3px 0 0 var(--warn);border-left:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .ss-lab{font-size:13.5px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .ss-ic{width:30px;height:30px;border-radius:10px;font-size:16px;background:var(--gloss),var(--acc-soft);border:0;box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .ss-ic.pay{background:var(--gloss),color-mix(in srgb,#f59e0b 20%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-ic.att{background:var(--gloss),color-mix(in srgb,#f43f5e 18%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#f43f5e 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-ic.por{background:var(--gloss),color-mix(in srgb,#0ea5e9 18%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#0ea5e9 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-chev{top:16px}
:root[data-theme] body.tui:not(.authbg) .ss-actions button{border-radius:999px}
:root[data-theme] body.tui:not(.authbg) .adml-chip.lsc{margin:0}
:root[data-theme] body.tui:not(.authbg) .ls-nm{flex-wrap:nowrap}
@media (min-width:900px){ :root[data-theme] body.tui:not(.authbg) .ls-nmt{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap} }

/* =====================================================================
   🎨 TEACHER UI — chunk 4: Coins · Materials (2026-10-04). Glass cards,
   emoji, tinted avatars; the coin world is GOLD (wallet, balances,
   prices); every material section and level has its own colour. Old red
   leftovers (kind badges, gift chip, stepper chips) move to the accent.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){ --gold:#f59e0b; --gold2:#fbbf24 }
/* ---- wallet: a glossy gold card ---- */
:root[data-theme] body.tui:not(.authbg) .coin-wallet{gap:10px;padding:12px 18px;border-radius:16px;font-size:24px;font-weight:800;color:var(--txt);
  background:var(--gloss),linear-gradient(135deg,color-mix(in srgb,var(--gold) 28%,var(--card)),color-mix(in srgb,var(--gold2) 12%,var(--card)));
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:var(--rim),0 10px 24px -16px var(--gold)}
:root[data-theme] body.tui:not(.authbg) .coin-wallet .cw-ico{font-size:26px}
:root[data-theme] body.tui:not(.authbg) .coin-wallet small{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mut)}
/* ---- give list ---- */
:root[data-theme] body.tui:not(.authbg) .coin-row{gap:10px;padding:10px 12px;border-radius:14px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .cn-ava{flex:0 0 36px;width:36px;height:36px;font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .coin-bal{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .coin-btn{min-height:0;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme] body.tui:not(.authbg) .coin-btn.plus{background:var(--gloss),color-mix(in srgb,var(--ok) 16%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .coin-btn.minus{background:var(--gloss),color-mix(in srgb,var(--bad) 14%,var(--card));border:1px solid color-mix(in srgb,var(--bad) 42%,transparent);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .coin-edit .qc{background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-ring);min-height:0}
:root[data-theme] body.tui:not(.authbg) .coin-edit input{min-height:0}
:root[data-theme] body.tui:not(.authbg) .coin-edit .ok42,:root[data-theme] body.tui:not(.authbg) .coin-edit .x42{min-height:0}
:root[data-theme] body.tui:not(.authbg) .coin-row.editing{border-color:var(--acc);box-shadow:var(--rim),0 0 0 3px var(--acc-ring)}
/* ---- ranking: medals, avatars, a podium tint for the top three ---- */
:root[data-theme] body.tui:not(.authbg) .cnb-row{gap:10px;padding:10px 10px;border-radius:14px;border-bottom:0;margin-bottom:6px;background:var(--sheen),var(--card);
  border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .cnb-row:last-child{border-bottom:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .cnb-row .rk{background:var(--raised);color:var(--mut);font-size:13px}
:root[data-theme] body.tui:not(.authbg) .cnb-row.top1 .rk,:root[data-theme] body.tui:not(.authbg) .cnb-row.top2 .rk,:root[data-theme] body.tui:not(.authbg) .cnb-row.top3 .rk{background:none;font-size:22px}
:root[data-theme] body.tui:not(.authbg) .cnb-row.top1{background:var(--sheen),color-mix(in srgb,#fbbf24 14%,var(--card));border-color:color-mix(in srgb,#fbbf24 40%,transparent)}
:root[data-theme] body.tui:not(.authbg) .cnb-row.top2{background:var(--sheen),color-mix(in srgb,#94a3b8 14%,var(--card));border-color:color-mix(in srgb,#94a3b8 40%,transparent)}
:root[data-theme] body.tui:not(.authbg) .cnb-row.top3{background:var(--sheen),color-mix(in srgb,#d97706 12%,var(--card));border-color:color-mix(in srgb,#d97706 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .cnb-row .cnb-gift{background:color-mix(in srgb,#f43f5e 14%,transparent);color:color-mix(in srgb,#f43f5e 75%,var(--txt))}
:root[data-theme] body.tui:not(.authbg) .cnb-row .bal{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--txt)}
/* ---- market ---- */
:root[data-theme] body.tui:not(.authbg) .market-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
:root[data-theme] body.tui:not(.authbg) .market-card{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .market-card:hover{transform:none;box-shadow:var(--rim),0 12px 26px -18px var(--gold)}
:root[data-theme] body.tui:not(.authbg) .market-card .mc-noimg{aspect-ratio:3/4;font-size:46px;background:var(--gloss),linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,var(--card)),color-mix(in srgb,#f43f5e 12%,var(--card)))}
:root[data-theme] body.tui:not(.authbg) .market-card .mc-name{font-weight:700}
:root[data-theme] body.tui:not(.authbg) .market-card .mc-price{align-self:flex-start;margin-top:4px;padding:4px 11px;border-radius:999px;color:var(--txt);
  background:var(--gloss),color-mix(in srgb,var(--gold) 22%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 38%,transparent)}
:root[data-theme] body.tui:not(.authbg) #cnPurch .list-item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) #cnPurch .pill{border-radius:999px;font-weight:700}

/* ---- library card ---- */
:root[data-theme] body.tui:not(.authbg) .lib-card{background:var(--sheen),radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,#14b8a6 16%,transparent),transparent 60%),var(--card)}
:root[data-theme] body.tui:not(.authbg) .lib-ic{flex:0 0 54px;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:28px;
  background:var(--gloss),color-mix(in srgb,#14b8a6 22%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#14b8a6 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .lib-card b{font-size:16px}
/* ---- section + level tiles: one colour each ---- */
:root[data-theme] body.tui:not(.authbg) .mat-grid{gap:12px}
:root[data-theme] body.tui:not(.authbg) .mat-tile{--mt:#8b5cf6;border-radius:18px;padding:16px 12px 14px;background:var(--sheen),radial-gradient(110% 90% at 100% 0%,color-mix(in srgb,var(--mt) 16%,transparent),transparent 62%),var(--card);
  box-shadow:var(--rim);transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
:root[data-theme] body.tui:not(.authbg) .mat-tile:hover{transform:none;border-color:color-mix(in srgb,var(--mt) 40%,var(--line));box-shadow:var(--rim),0 12px 26px -18px var(--mt)}
:root[data-theme] body.tui:not(.authbg) .mat-tile .ic{width:58px;height:58px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;font-size:30px;
  background:var(--gloss),color-mix(in srgb,var(--mt) 22%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-tile .tl{font-weight:700;font-size:14.5px}
:root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="listening"]{--mt:#8b5cf6} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="reading"]{--mt:#14b8a6} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="grammar"]{--mt:#f59e0b}
:root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="vocabulary"]{--mt:#0ea5e9} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="writing"]{--mt:#f43f5e} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="speaking"]{--mt:#10b981}
:root[data-theme] body.tui:not(.authbg) .mat-tile[data-s="challenges"]{--mt:#eab308}
:root[data-theme] body.tui:not(.authbg) .mat-tile[data-l="Beginner"]{--mt:#10b981} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-l="Elementary"]{--mt:#14b8a6} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-l="Pre-Intermediate"]{--mt:#0ea5e9}
:root[data-theme] body.tui:not(.authbg) .mat-tile[data-l="Intermediate"]{--mt:#8b5cf6} :root[data-theme] body.tui:not(.authbg) .mat-tile[data-l="Intensive"]{--mt:#f97316}
:root[data-theme] body.tui:not(.authbg) .mat-count{top:10px;right:10px;background:var(--gloss),var(--mt,var(--acc));color:#fff;box-shadow:0 4px 10px -4px var(--mt,var(--acc))}
/* ---- material cards ---- */
:root[data-theme] body.tui:not(.authbg) .mat-card{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .mat-card .nm{font-size:15.5px}
:root[data-theme] body.tui:not(.authbg) .mat-badge{font-size:10.5px;font-weight:700;letter-spacing:.2px;padding:2px 8px}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind{background:var(--acc-soft);color:var(--acc);border:0}
:root[data-theme] body.tui:not(.authbg) .mat-badge.new{background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.upd{background:var(--warn-soft);color:var(--warn)}
:root[data-theme] body.tui:not(.authbg) .mat-card .instr{background:var(--raised);border-radius:12px}
:root[data-theme] body.tui:not(.authbg) .mat-card .heart{min-height:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--raised);font-size:19px}
:root[data-theme] body.tui:not(.authbg) .mat-card .heart.on{background:color-mix(in srgb,#f43f5e 14%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .mat-actions{gap:8px}
:root[data-theme] body.tui:not(.authbg) .mat-card .heart{color:#f43f5e}
:root[data-theme] body.tui:not(.authbg) .coin-row .nm{white-space:normal;line-height:1.25;overflow-wrap:anywhere}

/* =====================================================================
   🎨 TEACHER UI — chunk 4b: the shared kit on top of chunk 4 (merged with the
   parallel chunk 4 above: its section + level colours and level emoji kept)
   (2026-10-04, design docs/plans/2026-10-04-teacher-ui-4-6-design.md).
   Kit: .tu-hero (one big number in its feature colour), .tu-prow (avatar
   person row), .tu-chip (group chips), .tu-ctile (colour tile), empty
   state v2 (emoji in a tinted circle, no dashed box), .tu-split (laptop:
   sticky side column). Feature colours gain coins = gold, print =
   slate-cyan; Materials sections each get their own colour.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg){
  --f-coin-a:#d97706; --f-coin-b:#fbbf24;
  --f-prt-a:#0e7490;  --f-prt-b:#22d3ee;
}
:root[data-theme] body.tui:not(.authbg) [data-f="coin"]{--fa:var(--f-coin-a);--fb:var(--f-coin-b)}
:root[data-theme] body.tui:not(.authbg) [data-f="bk"]{--fa:var(--f-bk-a);--fb:var(--f-bk-b)}
:root[data-theme] body.tui:not(.authbg) [data-f="dia"]{--fa:var(--f-dia-a);--fb:var(--f-dia-b)}
:root[data-theme] body.tui:not(.authbg) [data-f="prt"]{--fa:var(--f-prt-a);--fb:var(--f-prt-b)}
:root[data-theme] body.tui:not(.authbg) [data-f="earn"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.tui:not(.authbg) [data-tone="listening"]{--fa:#7c3aed;--fb:#a78bfa}
:root[data-theme] body.tui:not(.authbg) [data-tone="reading"]{--fa:#0d9488;--fb:#2dd4bf}
:root[data-theme] body.tui:not(.authbg) [data-tone="grammar"]{--fa:#d97706;--fb:#f59e0b}
:root[data-theme] body.tui:not(.authbg) [data-tone="vocabulary"]{--fa:#0284c7;--fb:#38bdf8}
:root[data-theme] body.tui:not(.authbg) [data-tone="writing"]{--fa:#e11d48;--fb:#fb7185}
:root[data-theme] body.tui:not(.authbg) [data-tone="speaking"]{--fa:#059669;--fb:#34d399}
:root[data-theme] body.tui:not(.authbg) [data-tone="challenges"]{--fa:#ca8a04;--fb:#eab308}
:root[data-theme] body.tui:not(.authbg) [data-tone="lv-Beginner"]{--fa:#059669;--fb:#34d399}
:root[data-theme] body.tui:not(.authbg) [data-tone="lv-Elementary"]{--fa:#0d9488;--fb:#2dd4bf}
:root[data-theme] body.tui:not(.authbg) [data-tone="lv-Pre-Intermediate"]{--fa:#0284c7;--fb:#38bdf8}
:root[data-theme] body.tui:not(.authbg) [data-tone="lv-Intermediate"]{--fa:#7c3aed;--fb:#a78bfa}
:root[data-theme] body.tui:not(.authbg) [data-tone="lv-Intensive"]{--fa:#ea580c;--fb:#fb923c}

/* ---- hero card ---- */
:root[data-theme] body.tui:not(.authbg) .tu-hero{--fa:var(--grad-a);--fb:var(--grad-b);display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 14px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--fa) 26%,var(--line));
  background:var(--sheen),radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--fb) 22%,transparent),transparent 60%),color-mix(in srgb,var(--fb) 7%,var(--card));
  box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .tu-hero[data-f="coin"]{--fa:var(--f-coin-a);--fb:var(--f-coin-b)}
:root[data-theme] body.tui:not(.authbg) .tu-hero[data-f="bk"]{--fa:var(--f-bk-a);--fb:var(--f-bk-b)}
:root[data-theme] body.tui:not(.authbg) .tu-hero[data-f="dia"]{--fa:var(--f-dia-a);--fb:var(--f-dia-b)}
:root[data-theme] body.tui:not(.authbg) .tu-hero[data-f="prt"]{--fa:var(--f-prt-a);--fb:var(--f-prt-b)}
:root[data-theme] body.tui:not(.authbg) .tu-hero[data-f="earn"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.tui:not(.authbg) .tu-hi{flex:0 0 52px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:27px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:var(--gloss),linear-gradient(135deg,var(--fa),var(--fb));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px var(--fa)}
:root[data-theme] body.tui:not(.authbg) .tu-hb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .tu-hn{font-size:32px;font-weight:800;line-height:1.05;color:var(--txt);font-feature-settings:"tnum";letter-spacing:-.5px}
:root[data-theme] body.tui:not(.authbg) .tu-ht{font-size:17px;font-weight:750;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .tu-hl{font-size:13px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .tu-hero > button{flex:0 0 auto}
:root[data-theme] body.tui:not(.authbg) #libErr:empty{display:none}
:root[data-theme] body.tui:not(.authbg) #libErr{margin-top:4px;font-size:12.5px}
@media (max-width:560px){
  :root[data-theme] body.tui:not(.authbg) .tu-lib{flex-wrap:wrap}
  :root[data-theme] body.tui:not(.authbg) .tu-lib .tu-hb{flex:1 1 calc(100% - 66px)}
  :root[data-theme] body.tui:not(.authbg) .tu-lib > button{flex:1 1 100%}
}

/* ---- laptop: hero + controls in a sticky side column ---- */
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg) .tu-split{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:18px;align-items:start}
  :root[data-theme] body.tui:not(.authbg) .tu-side{position:sticky;top:78px}
}

/* ---- group chips ---- */
:root[data-theme] body.tui:not(.authbg) .tu-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
:root[data-theme] body.tui:not(.authbg) .tu-chips:empty{display:none}
:root[data-theme] body.tui:not(.authbg) .tu-chip{min-height:36px;padding:6px 15px;border-radius:999px;border:1px solid var(--line);background:var(--sheen),var(--card);color:var(--txt);
  font-size:13.5px;font-weight:650;box-shadow:var(--rim);cursor:pointer}
:root[data-theme] body.tui:not(.authbg) .tu-chip:hover{border-color:var(--line2);background:var(--sheen),var(--hover)}
:root[data-theme] body.tui:not(.authbg) .tu-chip.active{background:var(--gloss),var(--grad);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--pri-glow)}

/* ---- person rows ---- */
:root[data-theme] body.tui:not(.authbg) .tu-prow{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;
  background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .tu-prow:last-child{border-bottom:1px solid var(--line);margin-bottom:0}
:root[data-theme] body.tui:not(.authbg) .tu-ava{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13.5px}
:root[data-theme] body.tui:not(.authbg) .tu-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
:root[data-theme] body.tui:not(.authbg) .tu-who .nm{display:block;font-weight:700;font-size:15px;line-height:1.25;color:var(--txt);white-space:normal;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .tu-id{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .tu-prow .coin-bal{flex:0 0 auto;padding:5px 11px;border-radius:999px;font-weight:800;font-size:14px;white-space:nowrap;
  background:var(--gloss),color-mix(in srgb,var(--f-coin-b) 20%,var(--card));border:1px solid color-mix(in srgb,var(--f-coin-a) 40%,transparent);
  color:color-mix(in srgb,var(--f-coin-a) 78%,var(--txt))}
/* no nested cards: rows inside a card are flat list lines */
:root[data-theme] body.tui:not(.authbg) .tu-main.card{padding:8px 12px}
@media (max-width:560px){ :root[data-theme] body.tui:not(.authbg) .tu-main.card{padding:4px 8px} }
:root[data-theme] body.tui:not(.authbg) .card .tu-prow{border:0;border-bottom:1px solid var(--line);border-radius:12px;background:none;box-shadow:none;padding:10px 6px;margin:0}
:root[data-theme] body.tui:not(.authbg) .card .tu-prow:last-child{border-bottom:0}
:root[data-theme] body.tui:not(.authbg) .card .cnb-row.tu-top{border-bottom-color:var(--line)}
:root[data-theme] body.tui:not(.authbg) .tu-pop{animation:tuPop .45s var(--ease)}
@keyframes tuPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---- Give: round glossy − / ＋ and the inline editor ---- */
:root[data-theme] body.tui:not(.authbg) .coin-row .coin-btn{width:42px;height:42px;min-height:0;border-radius:50%;padding:0;display:inline-grid;place-items:center;font-size:20px;font-weight:800}
:root[data-theme] body.tui:not(.authbg) .coin-row .coin-btn.plus{background:var(--gloss),color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
:root[data-theme] body.tui:not(.authbg) .coin-row .coin-btn.minus{background:var(--gloss),color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 42%,transparent)}
:root[data-theme] body.tui:not(.authbg) .coin-row.editing{flex-wrap:wrap;border-color:var(--acc);box-shadow:var(--rim),0 0 0 3px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .coin-row.editing .coin-actions{flex:1 1 100%;justify-content:flex-end}
:root[data-theme] body.tui:not(.authbg) .coin-edit .qc{border-radius:999px;background:var(--sheen),var(--card);border:1px solid var(--line);color:var(--txt);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .coin-edit .qc:hover{border-color:var(--acc);background:var(--sheen),var(--hover)}
:root[data-theme] body.tui:not(.authbg) .coin-edit input{border-radius:999px}
:root[data-theme] body.tui:not(.authbg) .coin-edit .ok42{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--pri-glow)}
:root[data-theme] body.tui:not(.authbg) .coin-edit .x42{border-radius:999px}

/* ---- Ranking: medal on the avatar, a faint medal wash on the top 3 ---- */
:root[data-theme] body.tui:not(.authbg) .tu-rk{position:relative;flex:0 0 40px;width:40px;height:40px}
:root[data-theme] body.tui:not(.authbg) .tu-rk{margin-right:4px}
:root[data-theme] body.tui:not(.authbg) .cnb-row .tu-rk .rk{position:absolute;right:-9px;bottom:-7px;width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:var(--raised);color:var(--mut);box-shadow:0 0 0 2px var(--card);border:0}
:root[data-theme] body.tui:not(.authbg) .cnb-row.tu-top .tu-rk .rk{font-size:13px;background:var(--card)}
:root[data-theme] body.tui:not(.authbg) .cnb-row.tu-top.m1{background:var(--sheen),linear-gradient(90deg,color-mix(in srgb,#f59e0b 14%,transparent),transparent 65%),var(--card);border-color:color-mix(in srgb,#f59e0b 34%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .cnb-row.tu-top.m2{background:var(--sheen),linear-gradient(90deg,color-mix(in srgb,#94a3b8 18%,transparent),transparent 65%),var(--card);border-color:color-mix(in srgb,#94a3b8 38%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .cnb-row.tu-top.m3{background:var(--sheen),linear-gradient(90deg,color-mix(in srgb,#c2410c 13%,transparent),transparent 65%),var(--card);border-color:color-mix(in srgb,#c2410c 30%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .cnb-row .cnb-gift{border-radius:999px;padding:4px 9px}

/* ---- Purchases: status pills ---- */
:root[data-theme] body.tui:not(.authbg) .tu-st{flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .tu-st.ok{background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .tu-st.mid{background:var(--warn-soft);color:var(--warn)}
:root[data-theme] body.tui:not(.authbg) .tu-st.new{background:color-mix(in srgb,var(--f-new-b) 20%,var(--card));color:color-mix(in srgb,var(--f-new-a) 75%,var(--txt))}
@media (max-width:400px){ :root[data-theme] body.tui:not(.authbg) .tu-purch{flex-wrap:wrap} :root[data-theme] body.tui:not(.authbg) .tu-purch .tu-st{margin-left:52px} }

/* ---- Market: glass item cards, gold price pill ---- */
:root[data-theme] body.tui:not(.authbg) .market-card{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .market-card:hover{box-shadow:var(--rim),0 14px 28px -20px var(--f-coin-a)}
:root[data-theme] body.tui:not(.authbg) .market-card img{aspect-ratio:3/4}  /* original upload size (per Jasurbek) */
:root[data-theme] body.tui:not(.authbg) .market-card .mc-noimg{aspect-ratio:3/4;font-size:42px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:radial-gradient(90% 90% at 50% 40%,color-mix(in srgb,var(--f-coin-b) 30%,transparent),transparent 70%),color-mix(in srgb,var(--f-coin-a) 9%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .market-card .mc-price{align-self:flex-start;padding:4px 11px;border-radius:999px;font-size:14px;
  background:var(--gloss),color-mix(in srgb,var(--f-coin-b) 20%,var(--card));border:1px solid color-mix(in srgb,var(--f-coin-a) 40%,transparent);
  color:color-mix(in srgb,var(--f-coin-a) 78%,var(--txt))}
@media (max-width:699px){ :root[data-theme] body.tui:not(.authbg) .market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }

/* ---- empty state v2: emoji in a tinted circle, no dashed box ---- */
:root[data-theme] body.tui:not(.authbg) .empty.es{border:0;background:none;padding:22px 16px}
:root[data-theme] body.tui:not(.authbg) .es .es-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;opacity:1;margin-bottom:6px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:var(--gloss),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .es.es-err .es-ic{background:var(--gloss),var(--bad-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .es .es-act{border-radius:999px}

/* ---- Materials: search + favourites pill, colour tiles ---- */
:root[data-theme] body.tui:not(.authbg) .mat-search{border-radius:999px}
:root[data-theme] body.tui:not(.authbg) #matFavBtn{border-radius:999px;min-height:44px}
:root[data-theme] body.tui:not(.authbg) .tu-ctile{border-radius:18px;padding:18px 12px 16px;
  border:1px solid color-mix(in srgb,var(--fa) 24%,var(--line));
  background:var(--sheen),radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb) 22%,transparent),transparent 62%),color-mix(in srgb,var(--fb) 6%,var(--card));
  box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .tu-ctile:hover{border-color:color-mix(in srgb,var(--fa) 48%,var(--line));box-shadow:var(--rim),0 12px 26px -18px var(--fa)}
:root[data-theme] body.tui:not(.authbg) .tu-ctile .ic{width:58px;height:58px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;font-size:29px;line-height:1;
  background:var(--gloss),color-mix(in srgb,var(--fb) 28%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fa) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .tu-ctile .tl{font-size:14.5px}
:root[data-theme] body.tui:not(.authbg) .tu-ctile .mat-count{top:10px;right:10px;background:linear-gradient(135deg,var(--fa),var(--fb));color:#fff;border:0;font-weight:800;
  box-shadow:0 4px 10px -6px var(--fa)}
@media (min-width:900px){ :root[data-theme] body.tui:not(.authbg) .mat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---- Materials: glass cards + kind chips ---- */
:root[data-theme] body.tui:not(.authbg) .mat-card{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .mat-card .instr{background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .mat-badge{font-size:11px;font-weight:700;letter-spacing:0;padding:3px 9px}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind{background:var(--raised);color:var(--txt);border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind.k-audio{background:color-mix(in srgb,#38bdf8 18%,var(--card));color:color-mix(in srgb,#0284c7 75%,var(--txt));border-color:color-mix(in srgb,#0284c7 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind.k-pdf{background:color-mix(in srgb,#fb7185 18%,var(--card));color:color-mix(in srgb,#e11d48 75%,var(--txt));border-color:color-mix(in srgb,#e11d48 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind.k-html{background:color-mix(in srgb,#2dd4bf 18%,var(--card));color:color-mix(in srgb,#0d9488 75%,var(--txt));border-color:color-mix(in srgb,#0d9488 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.kind.k-folder{background:color-mix(in srgb,#a78bfa 20%,var(--card));color:color-mix(in srgb,#7c3aed 75%,var(--txt));border-color:color-mix(in srgb,#7c3aed 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.new{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-badge.upd{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-card .mat-actions button{border-radius:999px}
:root[data-theme] body.tui:not(.authbg) .mat-card[data-k] .tu-nic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:16px;flex:none;
  background:var(--gloss),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .mat-card[data-k="audio"] .tu-nic{background:var(--gloss),color-mix(in srgb,#38bdf8 22%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#0284c7 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-card[data-k="pdf"] .tu-nic{background:var(--gloss),color-mix(in srgb,#fb7185 22%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#e11d48 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-card[data-k="html"] .tu-nic{background:var(--gloss),color-mix(in srgb,#2dd4bf 22%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#0d9488 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .mat-card[data-k="folder"] .tu-nic{background:var(--gloss),color-mix(in srgb,#a78bfa 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#7c3aed 30%,transparent)}
@media (max-width:400px){
  :root[data-theme] body.tui:not(.authbg) .coin-row.tu-prow{gap:9px}
  :root[data-theme] body.tui:not(.authbg) .coin-row .coin-btn{width:38px;height:38px}
  :root[data-theme] body.tui:not(.authbg) .tu-prow .coin-bal{padding:4px 8px;font-size:13px}
  :root[data-theme] body.tui:not(.authbg) .coin-row .tu-ava{flex-basis:36px;width:36px;height:36px;font-size:12.5px}
}

/* =====================================================================
   🎨 TEACHER UI — chunk 5: Me (2026-10-04, design
   docs/plans/2026-10-04-teacher-ui-4-6-design.md). Built from the chunk 4
   kit: stat tiles .tu-stat (grid, never an orphan), heroes for 💎 and 🖨,
   a podium on Ranking with my own row ringed + "You", soft filled
   calendar days, glass history / task / order rows. Projector blur
   (meProjApply) is untouched — the new parts sit inside the blurred blocks.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) [data-f="od"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}

/* ---- stat tiles ---- */
:root[data-theme] body.tui:not(.authbg) .tu-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 16px}
@media (min-width:700px){ :root[data-theme] body.tui:not(.authbg) .tu-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} }
@media (max-width:699px){ :root[data-theme] body.tui:not(.authbg) .tu-stats .tu-stat-main{grid-column:1/-1} }
:root[data-theme] body.tui:not(.authbg) .tu-stat{text-align:left;padding:13px 15px;border-radius:16px;border:1px solid color-mix(in srgb,var(--fa) 22%,var(--line));
  background:var(--sheen),radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--fb) 16%,transparent),transparent 62%),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .tu-stat:not([data-f]){--fa:var(--grad-a);--fb:var(--grad-b)}
:root[data-theme] body.tui:not(.authbg) .tu-stat .l{margin:0 0 4px;font-size:12.5px;font-weight:650;color:var(--mut);text-transform:none;letter-spacing:0}
:root[data-theme] body.tui:not(.authbg) .tu-stat .n{font-size:26px;font-weight:800;line-height:1.12;color:var(--txt);font-feature-settings:"tnum";overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .tu-stat .n small{font-size:12px;font-weight:600;color:var(--mut);margin-left:5px;letter-spacing:0}
:root[data-theme] body.tui:not(.authbg) .tu-stat .bal-cmp{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .tu-stat .bal-cmp.up{background:var(--ok-soft)}
:root[data-theme] body.tui:not(.authbg) .tu-stat .bal-cmp.down{background:var(--bad-soft)}
:root[data-theme] body.tui:not(.authbg) .tu-stat .bal-sub{margin-top:5px}

/* ---- Earnings: laptop = tiles + chart | breakdowns (sticky) ---- */
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg) .bal-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:18px;align-items:start}
  :root[data-theme] body.tui:not(.authbg) .bal-side{position:sticky;top:78px}
  :root[data-theme] body.tui:not(.authbg) .bal-side .bal-sec:first-child{margin-top:6px}
}
:root[data-theme] body.tui:not(.authbg) .sal-card{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) #salChart{--sal:var(--f-earn-a)}
:root[data-theme="dark"] body.tui:not(.authbg) #salChart{--sal:var(--f-earn-b)}
:root[data-theme] body.tui:not(.authbg) .sal-line{stroke:var(--sal)}
:root[data-theme] body.tui:not(.authbg) .sal-area{fill:var(--sal)}
:root[data-theme] body.tui:not(.authbg) .sal-pt{fill:var(--sal)}
:root[data-theme] body.tui:not(.authbg) .sal-pt.sofar{stroke:var(--sal)}
:root[data-theme] body.tui:not(.authbg) .bal-h{font-size:13.5px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .bal-grp{border-radius:14px}
:root[data-theme] body.tui:not(.authbg) .bal-gn{display:inline-flex;align-items:center;gap:8px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .tu-gava{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;font-size:10.5px}
:root[data-theme] body.tui:not(.authbg) .bal-bar{height:10px}
:root[data-theme] body.tui:not(.authbg) .bal-bar i{background:var(--gloss),var(--grad)}
:root[data-theme] body.tui:not(.authbg) .bal-kind{background:var(--sheen),var(--card);font-weight:600}
:root[data-theme] body.tui:not(.authbg) .bal-kind.k-old{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
:root[data-theme] body.tui:not(.authbg) .bal-kind.k-ahead{background:color-mix(in srgb,#38bdf8 16%,var(--card));border-color:color-mix(in srgb,#0284c7 32%,transparent)}
:root[data-theme] body.tui:not(.authbg) .bal-kind.k-debt{background:color-mix(in srgb,#22d3ee 14%,var(--card));border-color:color-mix(in srgb,#0891b2 34%,transparent)}
:root[data-theme] body.tui:not(.authbg) .bal-kind.k-extra{background:color-mix(in srgb,#fbbf24 14%,var(--card));border-color:color-mix(in srgb,#d97706 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .bal-kind.k-bonus{background:color-mix(in srgb,#a78bfa 18%,var(--card));border-color:color-mix(in srgb,#7c3aed 32%,transparent)}
:root[data-theme] body.tui:not(.authbg) .bal-day{border-radius:12px}
:root[data-theme] body.tui:not(.authbg) .bal-day:hover{background:var(--hover)}

/* ---- Ranking: podium + rows with avatars; "You" ---- */
:root[data-theme] body.tui:not(.authbg) .lb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;margin:4px 0 14px}
:root[data-theme] body.tui:not(.authbg) .lb-pod{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;gap:3px}
:root[data-theme] body.tui:not(.authbg) .lb-pava{position:relative;display:inline-block}
:root[data-theme] body.tui:not(.authbg) .lb-pod .tu-ava{width:48px;height:48px;flex-basis:48px;font-size:15px}
:root[data-theme] body.tui:not(.authbg) .lb-pod.p1 .tu-ava{width:60px;height:60px;flex-basis:60px;font-size:18px}
:root[data-theme] body.tui:not(.authbg) .lb-pm{position:absolute;right:-8px;bottom:-6px;font-size:20px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
:root[data-theme] body.tui:not(.authbg) .lb-pn{font-weight:700;font-size:13.5px;line-height:1.25;max-width:100%;overflow-wrap:anywhere;margin-top:4px}
:root[data-theme] body.tui:not(.authbg) .lb-pv.lb-share{font-size:15px;text-align:center}
:root[data-theme] body.tui:not(.authbg) .lb-pv .u{display:block;margin:0;font-size:10.5px}
:root[data-theme] body.tui:not(.authbg) .lb-step{width:100%;margin-top:6px;border-radius:14px 14px 6px 6px;display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;
  background:var(--gloss),linear-gradient(180deg,var(--sa),var(--sb));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -14px var(--sa)}
:root[data-theme] body.tui:not(.authbg) .lb-pod.p1 .lb-step{height:64px;--sa:#f59e0b;--sb:#d97706}
:root[data-theme] body.tui:not(.authbg) .lb-pod.p2 .lb-step{height:46px;--sa:#94a3b8;--sb:#64748b}
:root[data-theme] body.tui:not(.authbg) .lb-pod.p3 .lb-step{height:34px;--sa:#d97706;--sb:#9a3412}
:root[data-theme] body.tui:not(.authbg) .lb-pod.me .tu-ava{box-shadow:0 0 0 3px var(--acc-ring),inset 0 0 0 1px var(--acc)}
:root[data-theme] body.tui:not(.authbg) .lb-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:10px 8px;border-bottom:1px solid var(--line);border-radius:12px}
:root[data-theme] body.tui:not(.authbg) .lb-row.top1{background:none}
:root[data-theme] body.tui:not(.authbg) .lb-rank{font-size:15px}
:root[data-theme] body.tui:not(.authbg) .lb-who{display:flex;align-items:center;gap:10px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .lb-who .tu-ava{width:36px;height:36px;flex-basis:36px;font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .lb-name{font-size:15px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .lb-share{font-size:16px}
:root[data-theme] body.tui:not(.authbg) .lb-you{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;vertical-align:2px;
  background:var(--gloss),var(--grad);color:#fff}
:root[data-theme] body.tui:not(.authbg) .lb-row.me{position:sticky;bottom:12px;z-index:1;border:1px solid var(--acc);border-bottom:1px solid var(--acc);
  background:var(--sheen),color-mix(in srgb,var(--acc) 8%,var(--card));box-shadow:var(--rim),0 0 0 3px var(--acc-ring)}
@media (max-width:899px){ :root[data-theme] body.tui:not(.authbg) .lb-row.me{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

/* ---- Diamonds: hero tones, calendar fills, rows ---- */
:root[data-theme] body.tui:not(.authbg) .dm-hero.tu-hero{flex-wrap:nowrap}
:root[data-theme] body.tui:not(.authbg) .tu-hero.neg{--fa:#e11d48;--fb:#fb7185}
:root[data-theme] body.tui:not(.authbg) .tu-hero.neg .tu-hn{color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .tu-hx{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
:root[data-theme] body.tui:not(.authbg) .tu-hc{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .tu-hc.on{background:var(--acc-soft);color:var(--acc)}
@media (max-width:420px){ :root[data-theme] body.tui:not(.authbg) .dm-hero.tu-hero{flex-wrap:wrap} :root[data-theme] body.tui:not(.authbg) .tu-hx{flex:1 1 100%;flex-direction:row;justify-content:flex-start;padding-left:66px} }
:root[data-theme] body.tui:not(.authbg) .dc-c{border:0;border-radius:12px;background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .dc-c.dc-pad{background:none}
:root[data-theme] body.tui:not(.authbg) .dc-c.has{background:color-mix(in srgb,var(--acc) 9%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .dc-c.has:has(.dc-n.up){background:color-mix(in srgb,var(--ok) 15%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .dc-c.has:has(.dc-n.down){background:color-mix(in srgb,var(--bad) 13%,var(--card))}
:root[data-theme] body.tui:not(.authbg) button.dc-c:hover{filter:brightness(1.05)}
:root[data-theme] body.tui:not(.authbg) .dc-c.sun{background:color-mix(in srgb,var(--mut) 6%,transparent)}
:root[data-theme] body.tui:not(.authbg) .dc-c.today{border:0;box-shadow:inset 0 0 0 2px var(--acc)}
:root[data-theme] body.tui:not(.authbg) .dc-w{font-weight:650}
:root[data-theme] body.tui:not(.authbg) .dm-row{align-items:center;padding:10px 6px;border-radius:12px}
:root[data-theme] body.tui:not(.authbg) .dm-row .ic{width:34px;height:34px;flex-basis:34px;border-radius:11px;font-size:17px;background:var(--gloss),var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme] body.tui:not(.authbg) .dm-row.unread{background:var(--acc-soft)}
:root[data-theme] body.tui:not(.authbg) .dm-row .dm-delta,:root[data-theme] body.tui:not(.authbg) .dm-task .amts .dm-delta{border-radius:999px;padding:3px 10px;font-weight:800;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .dm-row .dm-delta.plus{background:var(--ok-soft)}
:root[data-theme] body.tui:not(.authbg) .dm-row .dm-delta.minus{background:var(--bad-soft)}
:root[data-theme] body.tui:not(.authbg) .dm-task{border-radius:16px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .dm-task.open{border-color:var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .dm-task .dl{background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .dm-task .dl.over{background:var(--bad-soft);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .dm-task .amts span{border:0}
:root[data-theme] body.tui:not(.authbg) .dm-task .amts .dm-delta.plus{background:var(--ok-soft)}
:root[data-theme] body.tui:not(.authbg) .dm-task .amts .dm-delta.minus{background:var(--bad-soft)}
:root[data-theme] body.tui:not(.authbg) #dmMarket .mc-noimg{background:radial-gradient(90% 90% at 50% 40%,color-mix(in srgb,var(--f-dia-b) 30%,transparent),transparent 70%),color-mix(in srgb,var(--f-dia-a) 9%,var(--card))}
:root[data-theme] body.tui:not(.authbg) #dmMarket .mc-price{background:var(--gloss),color-mix(in srgb,var(--f-dia-b) 20%,var(--card));border:1px solid color-mix(in srgb,var(--f-dia-a) 40%,transparent);
  color:color-mix(in srgb,var(--f-dia-a) 78%,var(--txt))}
:root[data-theme] body.tui:not(.authbg) #dmPurch .list-item{border:0;border-bottom:1px solid var(--line);border-radius:12px;padding:10px 6px}
:root[data-theme] body.tui:not(.authbg) #dmPurch .list-item:last-child{border-bottom:0}
:root[data-theme] body.tui:not(.authbg) #dmPurch .pill{border-radius:999px;font-weight:700}

/* ---- Print: hero tone + tiles + rows ---- */
:root[data-theme] body.tui:not(.authbg) .prt-hero.tu-hero{margin-bottom:12px}
:root[data-theme] body.tui:not(.authbg) .prt-hero .tu-hn.zero{color:var(--ok);font-size:26px}
:root[data-theme] body.tui:not(.authbg) .prt-hero.owe .tu-hn{color:var(--warn)}
:root[data-theme] body.tui:not(.authbg) .prt-hero .tu-hn small{font-size:14px;font-weight:600;color:var(--mut);margin-left:5px}
:root[data-theme] body.tui:not(.authbg) .prt-tiles{margin:0 0 12px}
:root[data-theme] body.tui:not(.authbg) .prt-tiles .n{font-size:20px}
:root[data-theme] body.tui:not(.authbg) .prt-row{border-radius:14px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .prt-row .prt-ic{width:36px;height:36px;border-radius:11px;font-size:17px;background:var(--gloss),color-mix(in srgb,var(--f-prt-b) 20%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-prt-a) 28%,transparent)}
:root[data-theme] body.tui:not(.authbg) .prt-row.pay .prt-ic{background:var(--gloss),var(--ok-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .prt-tiles #prPrinted small{display:block;margin:3px 0 0}

/* =====================================================================
   🎨 TEACHER UI — chunk 6: dialogs · toasts · pop-ups · states (2026-10-04,
   design docs/plans/2026-10-04-teacher-ui-4-6-design.md). modal() /
   confirmBox() / okPopup() are shared code — only their LOOK changes, and
   only here. Phones: every dialog rises from the bottom like a sheet;
   laptops: centred. Toasts are a glass pill with a meaning chip. Blur is
   used only on the bars, sheets' footers, the dialog backdrop and toasts.
   ===================================================================== */
/* ---- dialog backdrop + card ---- */
:root[data-theme] body.tui:not(.authbg) .modal-bg{background:rgba(10,12,28,.42);-webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%)}
:root[data-theme="dark"] body.tui:not(.authbg) .modal-bg{background:rgba(0,0,0,.58)}
:root[data-theme] body.tui:not(.authbg) .modal.card{border-radius:20px;padding:20px 20px 18px;background:var(--sheen),var(--card);border:1px solid var(--line);
  box-shadow:var(--rim),0 30px 60px -24px rgba(0,0,0,.5)}
:root[data-theme] body.tui:not(.authbg) .modal h3{font-size:18px;font-weight:750;letter-spacing:-.2px}
:root[data-theme] body.tui:not(.authbg) .modal label{font-size:12.5px;font-weight:650;color:var(--mut);text-transform:none;letter-spacing:0}
:root[data-theme] body.tui:not(.authbg) .modal input,:root[data-theme] body.tui:not(.authbg) .modal select,:root[data-theme] body.tui:not(.authbg) .modal textarea{background:var(--field);border-radius:12px;border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .modal input:focus,:root[data-theme] body.tui:not(.authbg) .modal select:focus,:root[data-theme] body.tui:not(.authbg) .modal textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring);outline:none}
:root[data-theme] body.tui:not(.authbg) .modal-err{padding:9px 12px;border-radius:12px;background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}
:root[data-theme] body.tui:not(.authbg) .modal .btnbar{gap:10px}
:root[data-theme] body.tui:not(.authbg) .modal .btnbar button{border-radius:12px;min-height:46px}
:root[data-theme] body.tui:not(.authbg) .modal .btnbar button:not(.ghost):not(.danger){box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--pri-glow)}
:root[data-theme] body.tui:not(.authbg) .modal .btnbar button.danger{background:var(--gloss),linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px #dc2626}
@media (max-width:699px){
  :root[data-theme] body.tui:not(.authbg) .modal-bg{padding:40px 0 0}
  :root[data-theme] body.tui:not(.authbg) .modal-bg .modal.card{max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0;
    padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:tuSheetUp .26s var(--ease)}
  :root[data-theme] body.tui:not(.authbg) .modal-bg .modal.card::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:var(--line2);margin:0 auto 14px}
}
@keyframes tuSheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ---- toasts: glass pill + meaning chip ---- */
:root[data-theme] body.tui:not(.authbg) .toast{display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;padding:10px 16px 10px 10px;border-radius:999px;
  color:var(--txt);background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:var(--rim),0 16px 34px -14px rgba(0,0,0,.45)}
:root[data-theme] body.tui:not(.authbg) .toast::before{content:"✓";flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;
  background:var(--ok-soft);color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .toast.err{background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--txt);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
:root[data-theme] body.tui:not(.authbg) .toast.err::before{content:"!";background:var(--bad-soft);color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .toast.tu{border-radius:16px;padding:10px 10px 13px 12px}
:root[data-theme] body.tui:not(.authbg) .toast.tu::before{content:"↩";background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .toast.tu .tu-btn{border-radius:999px;background:var(--gloss),var(--grad);color:#fff;border:0}
:root[data-theme] body.tui:not(.authbg) .toast.tu .tu-bar{background:var(--grad)}

/* ---- the once-a-day recap: a tone per section ---- */
:root[data-theme] body.tui:not(.authbg) .rc-sec{--fa:#d97706;--fb:#f59e0b;border-radius:16px;border:1px solid color-mix(in srgb,var(--fa) 26%,var(--line));
  background:var(--sheen),radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--fb) 14%,transparent),transparent 60%),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .rc-sec.rc-day{border-left:1px solid color-mix(in srgb,var(--fa) 26%,var(--line))}
:root[data-theme] body.tui:not(.authbg) .rc-sec.rc-week{--fa:#4f46e5;--fb:#818cf8}
:root[data-theme] body.tui:not(.authbg) .rc-sec.rc-month{--fa:#7c3aed;--fb:#a78bfa}
:root[data-theme] body.tui:not(.authbg) .rc-sec h3{font-size:16px;font-weight:750}
:root[data-theme] body.tui:not(.authbg) .rc-cmp{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .rc-cmp.up{background:var(--ok-soft)}
:root[data-theme] body.tui:not(.authbg) .rc-cmp.down{background:var(--bad-soft)}
:root[data-theme] body.tui:not(.authbg) .rc-clean{padding:6px 10px;border-radius:12px;background:var(--ok-soft)}
:root[data-theme] body.tui:not(.authbg) .rc-pop > .btnbar button{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--pri-glow)}

/* ---- states: glass skeleton, ✓ moment pop ---- */
:root[data-theme] body.tui:not(.authbg) .skel i{background:linear-gradient(90deg,var(--raised) 25%,color-mix(in srgb,var(--acc) 12%,var(--raised)) 45%,var(--raised) 65%);background-size:220% 100%}
:root[data-theme] body.tui:not(.authbg) button.act-ok{animation:tuPop .45s var(--ease)}

/* ---- sweep: the last CAPS label (Home bands) in sentence case ---- */
:root[data-theme] body.tui:not(.authbg) .df-band{text-transform:none;font-size:13.5px;font-weight:650;letter-spacing:0;color:var(--txt)}

/* ---- one motion switch ---- */
@media (prefers-reduced-motion: reduce){
  :root[data-theme] body.tui:not(.authbg) .tu-pop,:root[data-theme] body.tui:not(.authbg) button.act-ok,:root[data-theme] body.tui:not(.authbg) .modal-bg .modal.card{animation:none}
  :root[data-theme] body.tui:not(.authbg) .skel i{animation:none}
}

/* =====================================================================
   🏠 FRONT DESK — Home + look pass (2026-10-04, offers A + G; design
   docs/plans/2026-10-04-reception-home-design.md). quick.html wears the
   teacher UI layer (<body class="tui desk">); this block adds only what
   the desk has and the teacher cabinet does not: the Home quick buttons,
   desk tile colours, the top-bar 📷 Scan and the 🔍 student card (right
   panel ≥900px, bottom sheet on phones, z 50 = the cabinet-modal tier).
   Prefix ":root[data-theme] body.desk:not(.authbg)" — admin / teacher /
   print never match.
   ===================================================================== */
:root[data-theme] body.desk:not(.authbg) .content{max-width:1240px}
:root[data-theme] body.desk:not(.authbg) .dk-form{max-width:620px}
/* top bar: 📷 Scan (icon on phones, icon + word on laptops) */
:root[data-theme] body.desk:not(.authbg) .topbar button.dk-scan{display:inline-flex;flex-direction:row;align-items:center;width:auto;padding:0 12px;gap:6px;font-size:16px}
:root[data-theme] body.desk:not(.authbg) .topbar button.dk-scan .dk-scan-t{font-size:13px;font-weight:600}
@media (max-width:700px){
  :root[data-theme] body.desk:not(.authbg) .topbar button.dk-scan{width:38px;padding:0}
  :root[data-theme] body.desk:not(.authbg) .topbar button.dk-scan .dk-scan-t{display:none}
}
/* Home: two big entry buttons */
:root[data-theme] body.desk:not(.authbg) .dk-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 16px}
:root[data-theme] body.desk:not(.authbg) .dk-qbtn{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:64px;padding:12px 14px;
  border-radius:16px;text-align:left;color:#fff;box-shadow:var(--pri-glow)}
:root[data-theme] body.desk:not(.authbg) .dk-qbtn.scan{background:var(--gloss),linear-gradient(135deg,var(--f-bk-a),var(--f-bk-b));box-shadow:0 8px 20px -12px var(--f-bk-a)}
:root[data-theme] body.desk:not(.authbg) .dk-qbtn > span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.25}
:root[data-theme] body.desk:not(.authbg) .dk-qbtn b{font-size:15px;font-weight:700}
:root[data-theme] body.desk:not(.authbg) .dk-qbtn small{font-size:12px;opacity:.9;font-weight:500;overflow-wrap:anywhere}
:root[data-theme] body.desk:not(.authbg) .dk-qi{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
@media (max-width:420px){
  :root[data-theme] body.desk:not(.authbg) .dk-qbtn{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
}
/* Home: heading row + tiles */
:root[data-theme] body.desk:not(.authbg) .dk-top{display:flex;align-items:center;gap:8px;margin:0 0 10px}
:root[data-theme] body.desk:not(.authbg) .dk-top .dk-h{font-size:16px;font-weight:700}
:root[data-theme] body.desk:not(.authbg) .dk-top .grow{flex:1}
:root[data-theme] body.desk:not(.authbg) #hmRefresh{width:38px;height:38px;min-height:0;padding:0;display:inline-grid;place-items:center}
:root[data-theme] body.desk:not(.authbg) #hmRefresh.spin .ico{animation:ptrSpin .8s linear infinite}
:root[data-theme] body.desk:not(.authbg) .hm-tiles.dk-tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@media (max-width:560px){ :root[data-theme] body.desk:not(.authbg) .hm-tiles.dk-tiles{grid-template-columns:1fr 1fr} }
:root[data-theme] body.desk:not(.authbg) .hm-tile[data-hm="ci"]{--fa:var(--f-new-a);--fb:var(--f-new-b)}
:root[data-theme] body.desk:not(.authbg) .hm-tile[data-hm="task"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}
:root[data-theme] body.desk:not(.authbg) .hm-tile[data-hm="desk"]{--fa:var(--f-coin-a);--fb:var(--f-coin-b)}
:root[data-theme] body.desk:not(.authbg) .hm-tile[data-hm="drawer"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.desk:not(.authbg) .hm-tile[data-hm="dia"]{--fa:var(--f-dia-a);--fb:var(--f-dia-b)}
:root[data-theme] body.desk:not(.authbg) .hm-tile .hm-ti .ico.emo{font-size:17px}
:root[data-theme] body.desk:not(.authbg) .hm-tile{min-height:112px}
:root[data-theme] body.desk:not(.authbg) #hmDone{margin-top:12px}
:root[data-theme] body.desk:not(.authbg) #hmDone .hm-calm{margin-bottom:8px}

/* ---- 🔍 student card shell: bottom sheet (phones) · centred (tablets) · right panel (≥900px) ---- */
.dk-cbg{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;
  background:rgba(10,12,28,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:root[data-theme="dark"] .dk-cbg{background:rgba(0,0,0,.58)}
.dk-cbg.show{display:flex}
.dk-card{position:relative;width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;animation:dkUp .22s var(--ease,ease)}
.dk-card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line2,rgba(127,127,127,.4));margin:-8px auto 10px}
@keyframes dkUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes dkIn{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:700px) and (max-width:899px){
  .dk-cbg{align-items:center;padding:20px}
  .dk-card{border-radius:20px;max-height:86vh}
  .dk-card::before{display:none}
}
@media (min-width:900px){
  .dk-cbg{justify-content:flex-end;align-items:stretch;background:rgba(10,12,28,.22)}
  :root[data-theme="dark"] .dk-cbg{background:rgba(0,0,0,.4)}
  .dk-card{width:440px;max-width:440px;max-height:none;height:100%;border-radius:20px 0 0 20px;padding:22px 20px;animation:dkIn .2s var(--ease,ease)}
  .dk-card::before{display:none}
}
:root[data-theme] body.desk:not(.authbg) .dk-card{background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim),var(--e3)}
.dk-x{position:absolute;top:12px;right:12px;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;
  display:inline-grid;place-items:center;background:var(--raised,rgba(127,127,127,.12)) !important;color:var(--txt) !important;border:1px solid var(--line) !important;box-shadow:none !important}
.dk-x .ico{width:16px;height:16px}
.dk-id{display:flex;align-items:center;gap:12px;padding-right:42px}
.dk-ava.ss-ava{flex:0 0 52px;width:52px;height:52px;font-size:17px}
.dk-idt{min-width:0;flex:1}
.dk-idt h3{margin:0;font-size:18px;font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.dk-sub{font-size:13px;color:var(--mut);margin-top:3px;overflow-wrap:anywhere}
.dk-sub2{font-size:12.5px;color:var(--mut);margin-top:3px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dk-idc{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--acc-soft,rgba(99,102,241,.14));color:var(--acc);font-weight:700;font-size:12px}
.dk-bkic{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--f-bk-a,#0d9488),var(--f-bk-b,#2dd4bf))}
.dk-contact{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.dk-contact.none{font-size:13px}
.dk-cb{flex:1 1 0;min-width:64px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:14px;border:1px solid var(--line);background:var(--raised,rgba(127,127,127,.08));color:var(--txt);text-decoration:none;
  font-size:11.5px;font-weight:600}
.dk-cb span{font-size:18px;line-height:1}
.dk-cb:hover{border-color:var(--acc)}
.dk-cb.par{background:color-mix(in srgb,var(--f-new-b,#a78bfa) 14%,var(--card))}
.dk-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 0}
button.dk-pill{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:9px 10px;border-radius:14px;text-align:left;
  background:var(--raised,rgba(127,127,127,.08)) !important;color:var(--txt) !important;border:1px solid var(--line) !important;box-shadow:none !important;font-weight:400}
button.dk-pill b{font-size:14px;font-weight:750;line-height:1.2;overflow-wrap:anywhere}
button.dk-pill small{font-size:11px;color:var(--mut);font-weight:600}
button.dk-pill.ok{background:color-mix(in srgb,var(--ok) 10%,var(--card)) !important}
button.dk-pill.mid{background:color-mix(in srgb,var(--warn) 12%,var(--card)) !important}
button.dk-pill.bad{background:color-mix(in srgb,var(--bad) 10%,var(--card)) !important}
button.dk-pill.ok b{color:color-mix(in srgb,var(--ok) 70%,var(--txt))}
button.dk-pill.mid b{color:color-mix(in srgb,var(--warn) 60%,var(--txt))}
button.dk-pill.bad b{color:color-mix(in srgb,var(--bad) 75%,var(--txt))}
button.dk-pill.on{border-color:var(--acc) !important;box-shadow:0 0 0 2px var(--acc-ring,rgba(99,102,241,.3)) !important}
.dk-sec{margin-top:12px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.dk-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.dk-next b{font-size:17px}
.dk-line{font-size:13px;margin-top:8px;line-height:1.45}
.dk-line.bad{color:var(--bad)}
.dk-sec .gc-strip{margin-top:12px}
.dk-form-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:stretch}
.dk-amt{position:relative;flex:1 1 100%;margin:0;display:block}
.dk-amt input{width:100%;height:48px;font-size:20px;font-weight:700;padding-right:52px !important;margin:0}
.dk-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mut);pointer-events:none}
.dk-meth{flex:1 1 100%;display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--seg,rgba(127,127,127,.1));border:1px solid var(--line)}
.dk-meth button{flex:1;min-height:40px;padding:0 6px;border-radius:9px;font-size:13px;font-weight:600;white-space:nowrap;
  background:transparent !important;color:var(--mut) !important;border:0 !important;box-shadow:none !important}
.dk-meth button.on{background:var(--thumb,var(--card)) !important;color:var(--txt) !important;box-shadow:var(--thumb-sh,0 1px 2px rgba(0,0,0,.2)) !important}
button.dk-rec{width:100%;min-height:50px;margin-top:10px;font-size:16px;font-weight:700;border-radius:14px}
button.dk-rec.bonus{background:linear-gradient(135deg,#7c3aed,#c084fc)}
.dk-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dk-big > b{font-size:30px;font-weight:800;line-height:1}
.dk-big span{font-size:13px;color:var(--mut)}
.dk-marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dk-mk{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:36px;height:40px;border-radius:10px;font-size:12px;font-weight:700;
  border:1px solid var(--line)}
.dk-mk i{font-style:normal;font-size:12px;line-height:1}
.dk-mk.ok{background:color-mix(in srgb,var(--ok) 12%,var(--card));color:color-mix(in srgb,var(--ok) 70%,var(--txt))}
.dk-mk.no{background:color-mix(in srgb,var(--bad) 12%,var(--card));color:color-mix(in srgb,var(--bad) 75%,var(--txt));border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.dk-prof{display:flex;flex-direction:column}
.dk-pr{display:grid;grid-template-columns:26px 92px minmax(0,1fr);align-items:center;gap:6px;padding:8px 0;font-size:13.5px}
.dk-pr + .dk-pr{border-top:1px solid var(--line)}
.dk-pi{font-size:16px}
.dk-pl{color:var(--mut);font-size:12.5px}
.dk-pr b{font-weight:600;overflow-wrap:anywhere}
.dk-pr a{color:var(--acc);text-decoration:none}
.dk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dk-acts button{flex:1 1 auto;min-height:40px}
.dk-bkno{font-size:34px;font-weight:800;letter-spacing:3px;margin-top:10px;text-align:center}
.bk-who{font-size:14.5px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.dk-sub2 .bk-st{font-size:12px;padding:4px 10px}
.bk-tel{color:var(--acc);text-decoration:none;font-weight:600}
input.bk-t{width:100%;height:46px;margin:6px 0 0;font-size:15px}
.dk-line.bk-done{font-size:15px;font-weight:700;color:color-mix(in srgb,var(--ok) 75%,var(--txt));margin-top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.dk-card-on{overflow:hidden}
@media (prefers-reduced-motion: reduce){ .dk-card{animation:none} }

/* =====================================================================
   🛠 ADMIN FRAME — offer A (2026-10-04, design
   docs/plans/2026-10-04-admin-frame-design.md). admin.html wears the
   teacher UI layer (<body class="tui adm">); this block adds only the
   admin's frame: 5 sections as a bottom bar on phones and a slim LEFT
   RAIL ≥900px, the section title + sub-tab row, the 🧰 More tile grid,
   the ⌘K palette rows and the Settings top card.
   Prefix ":root[data-theme] body.adm:not(.authbg)" — teacher / front desk
   / print never match.
   ===================================================================== */
/* the Statistics / Admission panels' own sub-rows — the section row drives them */
:root[data-theme] body.adm:not(.authbg) #p-stat > .tabs,
:root[data-theme] body.adm:not(.authbg) #p-adm .card > .tabs{display:none}
/* section title + sub-tabs */
:root[data-theme] body.adm:not(.authbg) .ad-head{display:flex;flex-direction:column;gap:12px;min-width:0}
:root[data-theme] body.adm:not(.authbg) .ad-head .pg-head{margin:2px 0 0}
:root[data-theme] body.adm:not(.authbg) .ad-head h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:root[data-theme] body.adm:not(.authbg) .ad-head .pg-sub:empty{display:none}
:root[data-theme] body.adm:not(.authbg) button.ad-back{min-height:34px;padding:0 12px;font-size:13px;font-weight:600}
:root[data-theme] body.adm:not(.authbg) button.ad-back[hidden]{display:none}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs::-webkit-scrollbar{display:none}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs[hidden]{display:none}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs > .tab{flex:0 0 auto;cursor:pointer}
/* 📡 Watch has three sub-tabs: they share the row (no sideways scroll on a phone) */
:root[data-theme] body.adm:not(.authbg)[data-adsec="watch"] .tabs.ad-tabs > .tab{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;padding-left:4px;padding-right:4px;gap:4px}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs > .tab .ti{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:14px}
:root[data-theme] body.adm:not(.authbg) .tabs.ad-tabs > .tab:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
:root[data-theme] body.adm:not(.authbg) .panels > .panel > .kpirow{margin-bottom:16px}
/* ☰ More — tile launcher */
:root[data-theme] body.adm:not(.authbg) .ad-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
:root[data-theme] body.adm:not(.authbg) button.ad-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
  min-height:118px;padding:14px;border-radius:16px;text-align:left;color:var(--txt);font-weight:400;
  background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.adm:not(.authbg) button.ad-tile:hover:not(:disabled){border-color:var(--line2);background:var(--sheen),var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) .ad-tile .ad-ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:6px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:var(--gloss),var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.adm:not(.authbg) .ad-tile b{font-size:15px;font-weight:700}
:root[data-theme] body.adm:not(.authbg) .ad-tile small{font-size:12.5px;color:var(--mut);line-height:1.35}
:root[data-theme] body.adm:not(.authbg) .ad-tile .badge-n{position:absolute;top:12px;right:12px;margin:0}
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="coins"] .ad-ti{background:var(--gloss),color-mix(in srgb,var(--f-coin-b,#f59e0b) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-coin-a,#d97706) 22%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="diamonds"] .ad-ti{background:var(--gloss),color-mix(in srgb,var(--f-dia-b,#38bdf8) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-dia-a,#0284c7) 22%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="board"] .ad-ti,
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="mock"] .ad-ti{background:var(--gloss),color-mix(in srgb,var(--f-od-b,#fbbf24) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-od-a,#d97706) 22%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="materials"] .ad-ti,
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="lib"] .ad-ti{background:var(--gloss),color-mix(in srgb,var(--f-bk-b,#2dd4bf) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-bk-a,#0d9488) 22%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ad-tile[data-more="msg"] .ad-ti{background:var(--gloss),color-mix(in srgb,var(--f-new-b,#a78bfa) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-new-a,#7c3aed) 22%,transparent)}
@media (max-width:560px){
  :root[data-theme] body.adm:not(.authbg) .ad-more{grid-template-columns:1fr 1fr;gap:10px}
  :root[data-theme] body.adm:not(.authbg) button.ad-tile{min-height:112px;padding:12px}
}
/* Settings top card */
:root[data-theme] body.adm:not(.authbg) .ad-set{max-width:560px}
:root[data-theme] body.adm:not(.authbg) button.set-out.ad-out{width:auto;margin:0;min-height:38px;padding:0 14px}
/* ⌘K palette */
:root[data-theme] body.adm:not(.authbg) .omni{max-width:440px}
:root[data-theme] body.adm:not(.authbg) .omni input{padding-right:58px}
:root[data-theme] body.adm:not(.authbg) .omni-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:600 11px/1 inherit;font-family:inherit;color:var(--mut);padding:4px 6px;border-radius:6px;border:1px solid var(--line2);background:var(--card)}
:root[data-theme] body.adm:not(.authbg) .omni input:focus ~ .omni-kbd{display:none}
:root[data-theme] body.adm:not(.authbg) .omni-drop{max-height:min(70vh,520px);overflow-y:auto;padding:6px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--e3)}
:root[data-theme] body.adm:not(.authbg) .om-head{font-size:11.5px;font-weight:700;color:var(--mut);padding:8px 10px 4px}
:root[data-theme] body.adm:not(.authbg) .om-head:first-child{padding-top:4px}
:root[data-theme] body.adm:not(.authbg) button.omni-row{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 10px;border-radius:10px;
  background:transparent;color:var(--txt);border:0;box-shadow:none;font-weight:400;justify-content:flex-start;text-align:left}
:root[data-theme] body.adm:not(.authbg) button.omni-row:hover:not(:disabled),
:root[data-theme] body.adm:not(.authbg) button.omni-row.on{background:var(--acc-soft);filter:none}
:root[data-theme] body.adm:not(.authbg) .omni-row .om-txt{flex:1;min-width:0;display:flex;flex-direction:column}
:root[data-theme] body.adm:not(.authbg) .omni-row .om-main{overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .omni-row .om-e{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .omni-row .om-ava.ss-ava{width:30px;height:30px;flex:0 0 30px;font-size:11px}
:root[data-theme] body.adm:not(.authbg) .omni-row .om-go{color:var(--mut);font-size:12px;opacity:0}
:root[data-theme] body.adm:not(.authbg) .omni-row.on .om-go{opacity:1}
:root[data-theme] body.adm:not(.authbg) .gc-card.omni-hit{animation:omniHit 2.4s ease}
@media (max-width:700px){
  :root[data-theme] body.adm:not(.authbg) .omni-kbd{display:none}
  :root[data-theme] body.adm:not(.authbg) .omni input{padding-right:12px}
  :root[data-theme] body.adm:not(.authbg).omni-open .topbar .omni{max-width:none;padding:8px 12px;background:var(--top-bg);border-bottom:1px solid var(--line)}
  :root[data-theme] body.adm:not(.authbg).omni-open .omni-drop{left:12px;right:12px;max-height:68vh}
}
/* laptop: slim left rail under the top bar; content uses the width beside it */
@media (min-width:900px){
  :root[data-theme] body.adm:not(.authbg) .shell{max-width:none;padding-left:116px;padding-right:28px}
  :root[data-theme] body.adm:not(.authbg) .content{max-width:1320px;margin:0 auto}
  :root[data-theme] body.adm:not(.authbg) .bnav{position:fixed;top:60px;left:0;bottom:0;width:92px;max-width:none;margin:0;z-index:30;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;padding:14px 8px;
    background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    border-right:1px solid var(--line)}
  :root[data-theme] body.adm:not(.authbg) .bn-item{flex:0 0 auto;flex-direction:column;gap:5px;padding:10px 4px 9px;width:100%;
    font-size:11.5px;border-radius:14px;border:1px solid transparent}
  :root[data-theme] body.adm:not(.authbg) .bn-item .bn-emo{font-size:22px;padding:0}
  :root[data-theme] body.adm:not(.authbg) .bn-item .badge-n{position:absolute;top:5px;right:12px;margin:0}
  :root[data-theme] body.adm:not(.authbg) .bn-item.active{background:var(--acc-soft);color:var(--acc);box-shadow:var(--rim)}
}

/* ---- 🏠 admin Home — offer B: ✅ Needs you + 📊 Pulse ---- */
:root[data-theme] body.adm:not(.authbg) .ah-top{display:flex;align-items:center;gap:8px;margin:-4px 0 10px}
:root[data-theme] body.adm:not(.authbg) .ah-top .grow{flex:1}
:root[data-theme] body.adm:not(.authbg) #dashReload{width:38px;height:38px;min-height:0;padding:0;display:inline-grid;place-items:center}
:root[data-theme] body.adm:not(.authbg) #dashReload.spin .ico{animation:ptrSpin .8s linear infinite}
:root[data-theme] body.adm:not(.authbg) .ah-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:900px){
  :root[data-theme] body.adm:not(.authbg) .ah-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr)}
  :root[data-theme] body.adm:not(.authbg) .ah-side{position:sticky;top:80px}
}
:root[data-theme] body.adm:not(.authbg) .ah-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0 0 10px}
:root[data-theme] body.adm:not(.authbg) .ah-h .badge-n{margin:0}
:root[data-theme] body.adm:not(.authbg) #ahBd .ah-h{margin-top:18px}
:root[data-theme] body.adm:not(.authbg) .hm-tiles.ah-tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media (max-width:560px){ :root[data-theme] body.adm:not(.authbg) .hm-tiles.ah-tiles{grid-template-columns:1fr 1fr} }
:root[data-theme] body.adm:not(.authbg) .ah-tiles .hm-tile{min-height:116px}
:root[data-theme] body.adm:not(.authbg) .ah-tiles .hm-tile small{overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="tasks"],
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="late"]{--fa:var(--f-att-a);--fb:var(--f-att-b)}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="coins"]{--fa:var(--f-coin-a);--fb:var(--f-coin-b)}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="dia"]{--fa:var(--f-dia-a);--fb:var(--f-dia-b)}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="payout"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="mock"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}
:root[data-theme] body.adm:not(.authbg) .hm-tile[data-hm="push"]{--fa:var(--f-new-a);--fb:var(--f-new-b)}
:root[data-theme] body.adm:not(.authbg) .ah-done{margin-top:10px;display:flex;flex-direction:column;gap:6px}
:root[data-theme] body.adm:not(.authbg) .ah-calm{margin-bottom:4px}
:root[data-theme] body.adm:not(.authbg) .ah-mig{color:var(--mut)}
/* pulse cards */
:root[data-theme] body.adm:not(.authbg) .ah-pulse{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:600px) and (max-width:899px){ :root[data-theme] body.adm:not(.authbg) .ah-pulse{grid-template-columns:1fr 1fr} }
:root[data-theme] body.adm:not(.authbg) .ah-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;width:100%;
  padding:14px;border-radius:16px;text-align:left;color:var(--txt);font-weight:400;
  background:var(--sheen),radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--fb,var(--acc)) 12%,transparent),transparent 62%),var(--card);
  border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.adm:not(.authbg) button.ah-card:hover:not(:disabled){border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) .ah-card[data-f="earn"]{--fa:var(--f-earn-a);--fb:var(--f-earn-b)}
:root[data-theme] body.adm:not(.authbg) .ah-card[data-f="od"]{--fa:var(--f-od-a);--fb:var(--f-od-b)}
:root[data-theme] body.adm:not(.authbg) .ah-card[data-f="new"]{--fa:var(--f-new-a);--fb:var(--f-new-b)}
:root[data-theme] body.adm:not(.authbg) .ah-card[data-f="att"]{--fa:var(--f-att-a);--fb:var(--f-att-b)}
:root[data-theme] body.adm:not(.authbg) .ah-card.off{opacity:.75}
:root[data-theme] body.adm:not(.authbg) .ah-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:root[data-theme] body.adm:not(.authbg) .ah-ch b{font-size:14px;font-weight:700}
:root[data-theme] body.adm:not(.authbg) .ah-ci{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:var(--gloss),color-mix(in srgb,var(--fb,var(--acc)) 24%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fa,var(--acc)) 22%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ah-dir{margin-left:auto;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .ah-dir.up{color:color-mix(in srgb,var(--ok) 70%,var(--txt));background:color-mix(in srgb,var(--ok) 14%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ah-dir.down{color:color-mix(in srgb,var(--bad) 75%,var(--txt));background:color-mix(in srgb,var(--bad) 13%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ah-dir.warn{color:color-mix(in srgb,var(--warn) 60%,var(--txt));background:color-mix(in srgb,var(--warn) 16%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ah-dir.flat{color:var(--mut);background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .ah-big{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
:root[data-theme] body.adm:not(.authbg) .ah-big small{font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:0}
:root[data-theme] body.adm:not(.authbg) .ah-ln{font-size:13px;color:var(--mut);line-height:1.4;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .ah-ln b{color:var(--txt);font-weight:700}
:root[data-theme] body.adm:not(.authbg) .ah-spark{display:flex;align-items:flex-end;gap:3px;height:42px;margin-top:4px}
:root[data-theme] body.adm:not(.authbg) .ah-spark i{flex:1;min-width:0;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--fa,var(--acc)) 38%,transparent)}
:root[data-theme] body.adm:not(.authbg) .ah-spark i.zero{background:var(--line2)}
:root[data-theme] body.adm:not(.authbg) .ah-spark i.now{background:var(--fa,var(--acc))}
:root[data-theme] body.adm:not(.authbg) .ah-bar{position:relative;display:block;height:8px;border-radius:999px;background:var(--raised);margin:2px 0 2px}
:root[data-theme] body.adm:not(.authbg) .ah-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--fa),var(--fb))}
:root[data-theme] body.adm:not(.authbg) .ah-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--txt);opacity:.55;border-radius:2px}
:root[data-theme] body.adm:not(.authbg) button.ah-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;
  padding:6px 10px;border-radius:10px;background:var(--raised);color:var(--txt);border:1px solid transparent;box-shadow:none;font-weight:500;font-size:13px;text-align:left}
:root[data-theme] body.adm:not(.authbg) button.ah-row:hover:not(:disabled){border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) button.ah-row b{font-size:15px}
:root[data-theme] body.adm:not(.authbg) button.ah-row b.bad{color:color-mix(in srgb,var(--bad) 80%,var(--txt))}
/* late-registers sheet */
.ah-late{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ah-lrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--raised,transparent)}
.ah-lrow .ss-ava{width:36px;height:36px;flex:0 0 36px;font-size:12px}
.ah-lrow .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.ah-lrow small{color:var(--mut);font-size:12px}

/* =====================================================================
   🌱 NEW BEGINNER board (migrate-newbeginner-v1) — shared by the front
   desk, the teacher drill and the admin Admission tab (mountNbBoard in
   common.js). Plain tokens with fallbacks so it reads in every cabinet's
   look; one colour for the feature: emerald.
   ===================================================================== */
.nb-top{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.nb-list{margin-bottom:14px;--nb:#059669;--nb2:#34d399}
.nb-lh{display:flex;align-items:center;gap:12px}
.nb-lic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(135deg,var(--nb),var(--nb2));box-shadow:0 6px 14px -8px var(--nb)}
.nb-nolist .nb-lic{background:linear-gradient(135deg,#64748b,#94a3b8)}
.nb-lt{min-width:0;flex:1}
.nb-lt b{font-size:16px;overflow-wrap:anywhere}
.nb-ls{font-size:12.5px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.nb-warn{color:var(--warn)}
.nb-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;padding:9px 10px;border-radius:12px;
  background:color-mix(in srgb,var(--nb) 9%,transparent);border:1px solid color-mix(in srgb,var(--nb) 26%,transparent)}
.nb-open.date{background:color-mix(in srgb,#4f46e5 9%,transparent);border-color:color-mix(in srgb,#4f46e5 30%,transparent)}
.nb-open.after{background:color-mix(in srgb,#d97706 10%,transparent);border-color:color-mix(in srgb,#d97706 32%,transparent)}
.nb-ok{font-size:13.5px}
.nb-open .grow{flex:1}
.nb-lacts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.nb-stus{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.nb-empty{font-size:13px;padding:6px 2px}
.nb-stu{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--raised,rgba(127,127,127,.06))}
.nb-sh{display:flex;align-items:flex-start;gap:10px}
.nb-ava.ss-ava{flex:0 0 38px;width:38px;height:38px;font-size:13px}
.nb-st{min-width:0;flex:1}
.nb-st b{font-size:15px;overflow-wrap:anywhere}
.nb-ss{font-size:12.5px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.nb-note{font-size:13px;margin-top:8px;padding:6px 9px;border-radius:9px;background:color-mix(in srgb,var(--mut) 10%,transparent)}
.nb-contact{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.nb-contact.muted{font-size:13px}
a.nb-cb,button.nb-cb{flex:1 1 0;min-width:62px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:4px 6px;border-radius:12px;border:1px solid var(--line) !important;background:var(--card) !important;color:var(--txt) !important;
  text-decoration:none;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;box-shadow:none !important}
.nb-cb span{font-size:17px;line-height:1.1}
.nb-cb:hover{border-color:var(--nb,#059669) !important}
.nb-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nb-acts button{min-height:38px}
.nb-acts .nb-rm{color:var(--bad)}
.hm-tile[data-hm="nb"]{--fa:#059669;--fb:#34d399}
.hm-tile[data-hm="ln"]{--fa:#4f46e5;--fb:#818cf8}
.nb-open button,.nb-lacts button,.nb-top button{min-height:38px}

/* ==============================================================   📝 RESULTS MAKER (migrate-results-v1 · results.js) — teacher + admin.
   Prefix rs-. Plain tokens only (--txt --mut --line --acc --ok --bad),
   so the same block reads right in the teacher UI layer and in admin.
   Band tone = the shell's 3-colour scale: hi ≥6.5 · mid 5.5–6 · lo <5.5.
   ===================================================================== */
.rs-wrap{display:flex;flex-direction:column;gap:12px;padding-bottom:84px}
.rs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rs-h{font-size:var(--fs-lg);display:block}
.rs-sub{display:block;font-size:var(--fs-sm);color:var(--mut);margin-top:2px}
.rs-new{min-height:42px}
.rs-exam{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
.rs-exam:hover{border-color:var(--acc)}
.rs-exam:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rs-ex-ic{font-size:22px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(124,120,255,.14);flex:none}
.rs-ex-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rs-ex-main b{font-size:var(--fs-md);overflow-wrap:anywhere}
.rs-ex-meta{font-size:var(--fs-sm);color:var(--mut);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rs-pc{font-style:normal;font-weight:800;font-size:11px;min-width:20px;height:20px;padding:0 5px;border-radius:6px;display:inline-grid;place-items:center;
  background:rgba(124,120,255,.16);color:var(--acc)}
.rs-avg,.rs-ov{min-width:56px;text-align:center;font-weight:800;font-size:17px;border-radius:12px;padding:7px 6px;line-height:1.05;
  background:rgba(160,164,178,.12);color:var(--mut)}
.rs-ov small{display:block;font-size:10px;font-weight:700;opacity:.85;min-height:11px}
.rs-avg.hi,.rs-ov.hi,.rs-avg-t.hi{background:rgba(52,211,153,.16);color:#10b981}
.rs-avg.mid,.rs-ov.mid,.rs-avg-t.mid{background:rgba(251,191,36,.17);color:#d97706}
.rs-avg.lo,.rs-ov.lo,.rs-avg-t.lo{background:rgba(248,113,113,.16);color:#ef4444}
.rs-avg-t{border-radius:8px;padding:1px 7px}
/* new / edit exam: part toggles */
.rs-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rs-ptog{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px;min-height:64px;
  border-radius:12px;border:1px solid var(--line);color:var(--mut);text-align:center}
.rs-ptog span{font-size:18px}.rs-ptog b{font-size:15px;color:var(--txt)}.rs-ptog small{font-size:10.5px}
.rs-ptog.on{border-color:var(--acc);background:rgba(124,120,255,.16);color:var(--txt)}
.rs-ptog:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rs-hint{font-size:var(--fs-sm);color:var(--mut);margin-top:8px;line-height:1.5}
/* exam screen */
.rs-xhead{display:flex;align-items:center;gap:10px}
.rs-xt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rs-xt b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.rs-xt span{font-size:var(--fs-sm);color:var(--mut);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.rs-find{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:0 12px;background:var(--card)}
.rs-find input{border:0;background:transparent;box-shadow:none;padding:13px 0;min-height:46px}
.rs-find input:focus{box-shadow:none}
.rs-find:focus-within{border-color:var(--acc)}
.rs-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;display:none;flex-direction:column;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg2,#1d1d23);box-shadow:var(--e3)}
.rs-sug.show{display:flex}
.rs-sug button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;min-height:44px;color:var(--txt)}
.rs-sug button.act,.rs-sug button:hover{background:rgba(124,120,255,.16)}
.rs-sug small{color:var(--mut)}
.rs-none{padding:12px 14px;color:var(--mut);font-size:var(--fs-sm)}
.rs-sum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-sm);color:var(--mut);align-items:center}
.rs-sum b{color:var(--txt)}
.rs-grid{display:flex;flex-direction:column;gap:8px}
.rs-row{display:grid;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  grid-template-columns:minmax(200px,1.6fr) repeat(var(--np),minmax(62px,84px)) 64px 18px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.rs-row.hit{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,120,255,.25)}
.rs-row.absent{opacity:.72}
.rs-row.gone .rs-nm small{color:var(--warn)}
.rs-name{display:flex;align-items:center;gap:10px;min-width:0}
.rs-ava{width:34px;height:34px;font-size:12px;flex:none}
.rs-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.rs-nm b{font-size:var(--fs-md);overflow-wrap:anywhere;line-height:1.25}
.rs-nm small{font-size:11px;color:var(--mut)}
.rs-abs{all:unset;box-sizing:border-box;cursor:pointer;font-size:11px;font-weight:700;padding:6px 9px;min-height:30px;display:inline-flex;align-items:center;
  border-radius:99px;border:1px solid var(--line);color:var(--mut);flex:none}
.rs-abs.on{border-color:var(--bad);color:var(--bad);background:rgba(248,113,113,.12)}
.rs-abs:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rs-cell{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0}
.rs-cl{font-size:10px;font-weight:800;color:var(--mut);letter-spacing:.5px}
.rs-in{text-align:center;padding:9px 4px;min-height:42px;font-size:16px;font-weight:700;border-radius:10px}
.rs-in::placeholder{font-size:11px;font-weight:600}
.rs-in.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(248,113,113,.18)}
.rs-in:disabled{opacity:.4}
.rs-b{font-size:11px;font-weight:800;color:var(--acc);min-height:13px}
.rs-st{font-size:13px;font-weight:800;text-align:center}
.rs-st.saved{color:var(--ok)}.rs-st.err{color:var(--bad)}.rs-st.net{color:var(--warn)}.rs-st.saving{color:var(--mut)}
.rs-pub{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:18px;border:1px solid var(--line);
  background:var(--bg2,#1d1d23);box-shadow:var(--e3)}
.rs-pub button{flex:1 1 140px;min-height:44px}
/* publish sheets */
.rs-sh h3{margin-bottom:10px}
.rs-p{font-size:var(--fs-sm);color:var(--mut);line-height:1.55;margin-bottom:10px}
.rs-prev{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin-bottom:12px;max-height:56vh;object-fit:contain;background:#fff}
.rs-link{font-size:13px;margin-bottom:10px}
.rs-sh .btnbar{flex-wrap:wrap;margin-top:8px}
.rs-sh a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:12px 16px;border-radius:12px;border:1px solid var(--line);color:var(--txt)}
.rs-danger{color:var(--bad)!important}
.rs-certs{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-bottom:6px}
.rs-crow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.rs-crow b{flex:1;min-width:0;overflow-wrap:anywhere}
.rs-crow .rs-ov{min-width:48px;font-size:14px;padding:5px}
.rs-each{margin:10px 0 4px;border-top:1px solid var(--line);padding-top:8px}
.rs-each summary{cursor:pointer;font-weight:600;font-size:14px;min-height:36px;display:flex;align-items:center;color:var(--mut)}
.rs-each[open] summary{margin-bottom:6px}
.rs-steps{padding-left:20px;font-size:var(--fs-sm);color:var(--mut);line-height:1.6;margin-bottom:6px}
.rs-chk{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);margin-top:10px}
.rs-chk input{width:auto;min-height:0}
@media (max-width:640px){
  .rs-row{grid-template-columns:repeat(var(--np),minmax(0,1fr)) 56px 16px;gap:6px;padding:10px}
  .rs-name{grid-column:1 / -1}
  .rs-in{padding:8px 2px;min-height:44px}
  .rs-pub{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .rs-pub button{flex:1 1 calc(50% - 8px);font-size:13px;padding-left:6px;padding-right:6px}
  .rs-parts{grid-template-columns:repeat(3,1fr)}
}
:root[data-theme="light"] .rs-sug,:root[data-theme="light"] .rs-pub{background:#fff}
:root[data-theme="light"] .rs-avg.hi,:root[data-theme="light"] .rs-ov.hi,:root[data-theme="light"] .rs-avg-t.hi{color:#047857}
:root[data-theme="light"] .rs-avg.mid,:root[data-theme="light"] .rs-ov.mid,:root[data-theme="light"] .rs-avg-t.mid{color:#b45309}
:root[data-theme="light"] .rs-avg.lo,:root[data-theme="light"] .rs-ov.lo,:root[data-theme="light"] .rs-avg-t.lo{color:#b91c1c}
:root[data-theme] body.tui:not(.authbg) .rs-exam,:root[data-theme] body.tui:not(.authbg) .rs-row,:root[data-theme] body.tui:not(.authbg) .rs-find{background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg) .rs-sug,:root[data-theme] body.tui:not(.authbg) .rs-pub{background:var(--raised,var(--card))}
/* 📤 results v4 — band colour under each box (the shell's 3 steps), photos, 👋 guest candidates */
.rs-b.hi{color:#10b981}.rs-b.mid{color:#d97706}.rs-b.lo{color:#ef4444}
:root[data-theme="light"] .rs-b.hi{color:#047857}:root[data-theme="light"] .rs-b.mid{color:#b45309}:root[data-theme="light"] .rs-b.lo{color:#b91c1c}
.rs-ava.rs-ph{position:relative;overflow:hidden}
.rs-ava.rs-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.rs-sumrow{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.rs-sumrow .rs-sum{flex:1 1 220px}
.rs-gtag{font-style:normal;display:inline-block;margin-left:4px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#7a4b00;background:#fff1cc;border:1px solid #f0cf73;border-radius:6px;padding:1px 6px;vertical-align:2px}
.rs-gx{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;
  color:var(--mut);border:1px solid var(--line);font-size:13px;flex:none}
.rs-gx:hover{color:var(--bad);border-color:var(--bad)}
.rs-gx:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rs-gtabs{display:flex;gap:6px;margin:12px 0 4px}
.rs-gtab{flex:1;min-height:42px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--txt);font-weight:700;cursor:pointer}
.rs-gtab.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.rs-grow{display:flex;gap:8px}
.rs-grow input{flex:1;min-width:0}
.rs-gfound{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.rs-gfound span{display:flex;flex-direction:column;min-width:0}
.rs-gfound small{color:var(--mut);font-size:12px}
.rs-gfound em{font-style:normal;color:var(--mut);font-size:13px}
.rs-gnote{font-size:12.5px;margin-top:8px}
/* =========================================================================
   💧 LIQUID NAV — the gooey highlight that runs between tabs / switches /
   filter chips (liquidNav() in liquid.js; teacher · admin · desk opt in with
   body.liqnav). The .liq layer is drawn ONLY while a row is moving (.liq-mv):
   at rest every row keeps its own active styling. The blobs are painted
   OPAQUE because the goo filter thresholds alpha — a translucent tint would
   vanish — so each paint mixes the tint into the surface it sits on.
   ========================================================================= */
:root[data-theme] body.liqnav .liq-c > :not(.liq){position:relative;z-index:1}
:root[data-theme] body.liqnav .liq{position:absolute;left:0;top:0;z-index:0;pointer-events:none;display:none;
  filter:url(#liqGoo);contain:layout style}
:root[data-theme] body.liqnav .liq-mv > .liq{display:block}
:root[data-theme] body.liqnav .liq > i{position:absolute;display:block;border-radius:999px;background:var(--liq-paint);will-change:left,top,width,height}
:root[data-theme] body.liqnav .liq[data-k="seg"]{--liq-paint:var(--thumb)}
:root[data-theme] body.liqnav .liq[data-k="chip"]{--liq-paint:var(--grad,linear-gradient(135deg,var(--grad-a),var(--grad-b)))}
:root[data-theme] body.liqnav .liq[data-k="bnav-ph"]{--liq-paint:color-mix(in srgb,var(--grad-a) 26%,var(--card))}
:root[data-theme] body.liqnav .liq[data-k="bnav-lg"]{--liq-paint:color-mix(in srgb,var(--acc) 15%,var(--bg))}
/* while moving the blob IS the highlight — the active item's own paint steps aside */
:root[data-theme] body.liqnav .liq-mv > .active:not(.liq),
:root[data-theme] body.liqnav .liq-mv > .on{background:transparent !important;box-shadow:none !important;border-color:transparent !important}
:root[data-theme] body.liqnav .liq-mv .bn-item.active .bn-emo{background:none !important;box-shadow:none !important}
/* chips: the new chip's white label waits for the blob to land */
:root[data-theme] body.liqnav .liq-mv.liq-chip > .active,
:root[data-theme] body.liqnav .liq-mv.liq-chip > .on{color:var(--txt) !important}
/* idle chips sit on the row (no fill) so the blob is never hidden behind one */
:root[data-theme] body.tui.liqnav:not(.authbg) .tu-chips > .tu-chip:not(.active){background:transparent}
:root[data-theme] body.liqnav .liq-c > .tab,
:root[data-theme] body.liqnav .liq-c > .tu-chip,
:root[data-theme] body.liqnav .liq-c > button{transition:color .22s var(--ease)}
/* the blob hands over to the item's own paint in the same frame — a background fade here would flash */
:root[data-theme] body.liqnav .liq-c .bn-emo{transition:filter var(--t-fast) var(--ease)}
@media (prefers-reduced-motion: reduce){ :root[data-theme] body.liqnav .liq{display:none !important} }

/* =====================================================================
   🏠 ADMIN HOME part 2 — 👥 Teachers today + 📰 Today (migrate-adminhome-v2,
   the combine of the two offer-B builds). Sits INSIDE the live Home:
   #hbTeach under "Needs you" (main column), #hbFeed full width under the
   grid. Prefix hb- (the live Home owns ah-). Admin only.
   ===================================================================== */
:root[data-theme] body.adm:not(.authbg) #p-dash .hb-teach,
:root[data-theme] body.adm:not(.authbg) #p-dash .hb-feed{margin:16px 0 0;padding:16px;border-radius:18px;background:var(--sheen),var(--card);box-shadow:var(--rim)}
:root[data-theme] body.adm:not(.authbg) .hb-h{display:flex;align-items:center;gap:8px;margin:0 0 8px}
:root[data-theme] body.adm:not(.authbg) .hb-hs{font-size:12px;font-weight:500;margin-left:auto}
:root[data-theme] body.adm:not(.authbg) .hb-empty{font-size:13px;padding:6px 2px}
:root[data-theme] body.adm:not(.authbg) .hb-trs{display:flex;flex-direction:column}
:root[data-theme] body.adm:not(.authbg) button.hb-tr{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"av nm" "av cs";column-gap:10px;row-gap:5px;
  align-items:center;width:100%;min-height:52px;padding:9px 6px;text-align:left;font-weight:400;border-radius:12px;
  background:transparent !important;color:var(--txt) !important;border:0 !important;box-shadow:none !important}
:root[data-theme] body.adm:not(.authbg) button.hb-tr + button.hb-tr{border-top:1px solid var(--line) !important;border-radius:0}
:root[data-theme] body.adm:not(.authbg) button.hb-tr:hover{background:var(--hover,rgba(127,127,127,.06)) !important}
:root[data-theme] body.adm:not(.authbg) .hb-ava.ss-ava{grid-area:av;width:36px;height:36px;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .hb-tn{grid-area:nm;font-size:14px;font-weight:650;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .hb-tcs{grid-area:cs;display:flex;flex-wrap:wrap;gap:5px}
:root[data-theme] body.adm:not(.authbg) .hb-tc{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:var(--raised,rgba(127,127,127,.1));color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .hb-tc.bad{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 82%,var(--txt))}
:root[data-theme] body.adm:not(.authbg) .hb-tc.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 75%,var(--txt))}
:root[data-theme] body.adm:not(.authbg) .hb-rcp{margin-top:8px;font-size:12.5px;padding:8px 10px;border-radius:10px;background:var(--bad-soft)}
:root[data-theme] body.adm:not(.authbg) .hb-frs{display:flex;flex-direction:column}
:root[data-theme] body.adm:not(.authbg) .hb-fr{display:grid;grid-template-columns:44px 26px minmax(0,1fr);align-items:baseline;gap:6px;
  width:100%;padding:8px 4px;font-size:13.5px;text-align:left;font-weight:400;line-height:1.4}
:root[data-theme] body.adm:not(.authbg) .hb-fr + .hb-fr{border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) button.hb-fr{min-height:40px;background:transparent !important;color:var(--txt) !important;border:0 !important;
  border-radius:0;box-shadow:none !important}
:root[data-theme] body.adm:not(.authbg) button.hb-fr + .hb-fr,
:root[data-theme] body.adm:not(.authbg) .hb-fr + button.hb-fr{border-top:1px solid var(--line) !important}
:root[data-theme] body.adm:not(.authbg) button.hb-fr:hover{background:var(--hover,rgba(127,127,127,.06)) !important}
:root[data-theme] body.adm:not(.authbg) .hb-ft{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .hb-fe{font-size:16px;text-align:center}
:root[data-theme] body.adm:not(.authbg) .hb-fx{overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .hb-more{margin-top:8px;width:100%;min-height:40px}

/* =========================================================================
   🧩 EDUNEST DS — ONE design system for every cabinet on the teacher UI
   layer (teacher · admin · front desk = body.tui). Decided with Jasurbek
   2026-10-05 (docs/plans/2026-10-05-design-system-design.md + the visual
   sheet beside it). Measured problem: 19 button heights, 6 radii, 12
   paddings, 3 input heights, 12 px inputs that make iPhones zoom.
   THE RULES (same shape in both themes, only colour changes):
     controls  36 sm · 44 md · 52 lg      radius 12 · 1 px border
     labels    14/600 (sm 13)             inputs 16 px text (no iOS zoom)
     cards     18 radius · hero 22        focus = 3 px ring
   DAY  = colourful glass (indigo→violet, sheen, soft shadow) — unchanged.
   NIGHT = black · white · red, no gradients / glow / glass; red = ACTION
   only, warnings (--bad) are ORANGE so "press this" ≠ "this is late".
   Prefix P = ":root[data-theme] body.tui:not(.authbg):not(.ds0)" (0,5,1):
   one class heavier than every earlier teacher/admin/desk block, so this
   block is the single source of truth for control geometry. Only the
   ACTION family is resized (plain button, .ghost, .sm, .danger, .ghosty,
   .main) — tiles and cards that happen to be <button>s keep their shape.
   ========================================================================= */
:root[data-theme] body.tui:not(.authbg):not(.ds0){
  --h-sm:36px; --h-md:44px; --h-lg:52px;
  --r-ctl:12px; --r-thumb:9px; --r-card:18px; --r-hero:22px;
  --fs-ctl:14px; --fs-ctl-sm:13px; --fs-in:16px;
}
/* ---- NIGHT: black · white · red ---- */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0){
  --bg:#000000; --bg2:#0a0a0a; --card:#111111; --raised:#1a1a1a; --field:#0a0a0a;
  --line:#262626; --line2:#333333; --hover:#161616;
  --txt:#fafafa; --mut:#a1a1aa;
  --acc:#ef4444; --acc2:#f87171; --pri:#dc2626; --pri-h:#b91c1c;
  --acc-soft:rgba(239,68,68,.12); --acc-ring:rgba(239,68,68,.32);
  --grad-a:#dc2626; --grad-b:#dc2626; --grad:linear-gradient(#dc2626,#dc2626);
  --pri-glow:0 0 0 0 transparent;
  --seg:#0a0a0a; --thumb:#262626; --thumb-sh:0 0 0 0 transparent; --thead:#111;
  --top-bg:#000000; --top-txt:#fafafa; --top-mut:#a1a1aa; --top-line:#262626;
  /* no glass at night — transparent stand-ins keep every var() list valid */
  --sheen:linear-gradient(transparent,transparent); --gloss:linear-gradient(transparent,transparent);
  --rim:0 0 0 0 transparent; --frost:#0a0a0a;
  --e2:0 0 0 0 transparent; --e3:0 24px 60px rgba(0,0,0,.7);
  --ok:#22c55e; --warn:#fbbf24; --bad:#f97316;
  --bad-soft:rgba(249,115,22,.14); --ok-soft:rgba(34,197,94,.14); --warn-soft:rgba(251,191,36,.14);
  /* feature colours go quiet — the emoji carries the meaning */
  --f-new-a:#1f1f1f; --f-new-b:#1f1f1f; --f-od-a:#1f1f1f; --f-od-b:#1f1f1f;
  --f-att-a:#1f1f1f; --f-att-b:#1f1f1f; --f-bk-a:#1f1f1f; --f-bk-b:#1f1f1f;
  --f-earn-a:#1f1f1f; --f-earn-b:#1f1f1f; --f-dia-a:#1f1f1f; --f-dia-b:#1f1f1f;
  --f-coin-a:#1f1f1f; --f-coin-b:#1f1f1f; --f-prt-a:#1f1f1f; --f-prt-b:#1f1f1f;
  --sal:#22c55e;
  background:#000000;
}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .topbar,
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .tb-skin{-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .liq[data-k="chip"]{--liq-paint:#fafafa}

/* ---- BUTTONS: one family, three sizes ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button:not([class]),button.ghost,button.sm,button.danger,button.ghosty,button.main,button.lg){
  min-height:var(--h-md); height:auto; padding:0 16px; border-radius:var(--r-ctl);
  font-size:var(--fs-ctl); font-weight:600; line-height:1.2; letter-spacing:0;
  border:1px solid transparent; box-sizing:border-box;
  align-items:center; justify-content:center; gap:8px;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s,background-color .18s,border-color .18s,box-shadow .18s}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.ghost,button.ghosty){border-color:var(--line2)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sm{min-height:var(--h-sm); padding:0 12px; font-size:var(--fs-ctl-sm); border-radius:var(--r-ctl)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.lg{min-height:var(--h-lg); padding:0 22px; font-size:15px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button:not([class]),button.ghost,button.sm,button.danger,button.ghosty,button.main,button.lg):active:not(:disabled){transform:scale(.97)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button:not([class]),button.ghost,button.sm,button.danger,button.ghosty,button.main,button.lg):disabled{opacity:.5;cursor:not-allowed}
/* icon-only buttons are squares of the same heights */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.tb-ib,button.hm-refresh,button.omni-tgl){width:var(--h-md);min-width:var(--h-md);padding:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.tb-ib,button.hm-refresh,button.omni-tgl).sm{width:var(--h-sm);min-width:var(--h-sm)}
/* main actions are large */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(#startLesson,.ls-foot button:not(.ghost),.modal .btnbar button){min-height:var(--h-lg)}
/* night: solid red primaries, quiet secondaries */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(button:not([class]),button.sm:not(.ghost):not(.danger),button.main,button.lg:not(.ghost)){background:var(--pri);color:#fff;box-shadow:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(button.ghost,button.ghosty){background:var(--card);color:var(--txt)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.danger{background:var(--bad);color:#000000}

/* ---- FOCUS: one ring for every control ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button,a,[role=tab],[tabindex]):focus-visible{outline:none;box-shadow:0 0 0 3px var(--acc-ring)}

/* ---- INPUTS: 44 tall, 16 px text (iPhone never zooms), radius 12 ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select){
  min-height:var(--h-md); height:var(--h-md); border-radius:var(--r-ctl); border:1px solid var(--line2);
  font-size:var(--fs-in); line-height:1.25; padding-top:0; padding-bottom:0; box-sizing:border-box;
  background:var(--field); color:var(--txt)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) textarea{min-height:88px;border-radius:var(--r-ctl);border:1px solid var(--line2);font-size:var(--fs-in);line-height:1.4;padding:11px 14px;background:var(--field);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(input,select,textarea):focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(input,textarea)::placeholder{color:var(--mut);opacity:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(input,select,textarea):disabled{opacity:.55}

/* ---- TABS: segmented track 44 = 1 border + 3 pad + 36 tab ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.tabs:not(.ad-tabs-off),.gc-seg){padding:3px;gap:2px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--seg)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.tabs > .tab,.gc-seg button){min-height:var(--h-sm);height:var(--h-sm);padding:0 14px;border-radius:var(--r-thumb);
  font-size:var(--fs-ctl-sm);font-weight:600;line-height:calc(var(--h-sm) - 2px);text-align:center;white-space:nowrap;border:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs > .tab .ti{display:inline-flex;vertical-align:-3px;margin:0 4px 0 0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}
/* phones: the icon-over-word tabs use the LARGE size (52 = 1 + 3 + 44 + 3 + 1) */
@media (max-width:560px){
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.tabs-fit > .tab{display:block;padding:0 2px;font-size:12px}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.tabs-fit > .tab:has(.ti){display:block;height:44px;min-height:44px;padding:6px 2px 0;font-size:11.5px;line-height:1.15;text-align:center}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.tabs-fit > .tab .ti{display:block;line-height:1;margin:0 0 4px}
}
/* night: active tab = white text on the raised thumb, red icon */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.tabs > .tab.active,.gc-seg button.on){background:var(--thumb);color:var(--txt)}

/* ---- FILTER CHIPS: 36 tall, radius 12, 1 px border ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.tu-chip,.gc-groups button){min-height:var(--h-sm);height:var(--h-sm);padding:0 14px;border-radius:var(--r-ctl);
  border:1px solid var(--line2);font-size:var(--fs-ctl-sm);font-weight:600;line-height:1;align-items:center;gap:6px;box-sizing:border-box}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.tu-chip.active,.gc-groups button.on){background:#fafafa;color:#000000;border-color:#fafafa;box-shadow:none}

/* ---- SWITCH: 44 × 26 ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tog input:checked + .knob{background:var(--pri)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tog input:focus-visible + .knob{outline:none;box-shadow:0 0 0 3px var(--acc-ring)}

/* ---- CARDS: radius 18 ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.card,.hm-tile,.hm-num,.gc-card,.grp-row,.tu-stat,.ss-card,.ss-tile,.df-card,.tu-hero,.lb-row){border-radius:var(--r-card)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.card,.hm-tile,.hm-num,.gc-card,.grp-row,.tu-stat,.ss-card,.ss-tile,.df-card,.tu-hero,.lb-row,.tu-prow){
  background:var(--card);border-color:var(--line);box-shadow:none}

/* ---- DIALOGS + SHEETS: card radius, footer buttons large ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .modal.card{border-radius:var(--r-card)}
@media (max-width:699px){ :root[data-theme] body.tui:not(.authbg):not(.ds0) .modal.card{border-radius:var(--r-hero) var(--r-hero) 0 0} }
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .modal-bg{background:rgba(0,0,0,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .modal.card{background:#111111;border:1px solid var(--line);box-shadow:var(--e3)}

/* ---- TOASTS: radius 12, solid ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .toast{border-radius:var(--r-ctl)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .toast{background:#fafafa;color:#000000;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .toast.err{background:#111111;color:#fafafa;border:1px solid var(--bad)}

/* ---- BARS: night = flat black with a hairline ---- */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .bnav{background:#0a0a0a;border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .bn-item.active{color:var(--acc)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .tb-ava{background:var(--pri);box-shadow:none}
/* ---- stragglers that carried their own geometry ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) #dfRefresh.hm-refresh{width:var(--h-sm);height:var(--h-sm);min-height:var(--h-sm);border-radius:var(--r-ctl)}
/* a lone toggle that wears .tab (❤️ Favorites) is a filter chip */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.tab{min-height:var(--h-sm);height:var(--h-sm);padding:0 14px;border-radius:var(--r-ctl);font-size:var(--fs-ctl-sm);font-weight:600;border:1px solid var(--line2)}
/* coin ± steppers: square icon buttons of the small size */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.coin-btn{width:var(--h-sm);height:var(--h-sm);min-height:var(--h-sm);border-radius:var(--r-ctl);font-size:18px;padding:0}
/* TAGS (non-interactive labels: rule chips, status pills) — the one smaller
   shape: 28 tall, radius 8, 12/600. Interactive things never use it. */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .rule-chip{min-height:28px;height:auto;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.3}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .rule-i{width:var(--h-sm);height:var(--h-sm);min-height:var(--h-sm);border-radius:var(--r-ctl)}
/* night: the active bottom tab is a FLAT red tint (no gloss / gradient) */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .bn-item.active .bn-emo{background:rgba(239,68,68,.16);box-shadow:none}
@media (min-width:900px){
  :root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .bn-item.active{background:rgba(239,68,68,.12);box-shadow:none}
  :root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .bn-item.active .bn-emo{background:none}
}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #matFavBtn{border-radius:var(--r-ctl);min-height:var(--h-sm);height:var(--h-sm)}
/* night keeps the owes rails on student cards (box-shadow is the rail) */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .gc-card.b-bad{box-shadow:inset 3px 0 0 var(--bad)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .gc-card.b-mid{box-shadow:inset 3px 0 0 var(--warn)}

/* =====================================================================
   🪪 ADMIN STUDENT CARD — offer D (2026-10-05, design
   docs/plans/2026-10-05-admin-student-card-design.md). Prefix sc-.
   One overlay (.sc-bg, z 50 = the cabinet modal tier, direct child of body):
   phones = bottom sheet, ≥900px = a 480px right-hand panel under the top bar
   with the page still visible. Three layers: who + contact → Needs attention
   → four tabs (one visible). Colour = status only; every colour has a word.
   ===================================================================== */
.sc-bg{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;
  background:rgba(12,14,24,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sc-bg.show{display:flex}
.sc-panel{position:relative;width:100%;max-width:560px;height:94vh;height:94dvh;display:flex;flex-direction:column;
  background:var(--card);color:var(--txt);border-radius:22px 22px 0 0;box-shadow:var(--e3);overflow:hidden;
  animation:scUp .26s var(--ease)}
@keyframes scUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes scIn{from{transform:translateX(36px);opacity:.4}to{transform:none;opacity:1}}
.sc-grab{width:40px;height:5px;border-radius:3px;background:var(--line2);margin:8px auto 0;flex:none}
.sc-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sc-pad,.sc-load{padding:16px 18px}
.sc-top{position:relative;padding:10px 18px 14px}
body.adm button.sc-x{position:absolute;right:12px;top:8px;width:40px;height:40px;padding:0;border-radius:50%;
  background:var(--raised);color:var(--mut);border:0;font-size:16px;font-weight:600}
body.adm button.sc-x:hover{color:var(--txt)}
.sc-hd{display:flex;gap:12px;align-items:flex-start;padding-right:46px}
.sc-ava.ss-ava{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;
  background:var(--grad,var(--pri));color:#fff}
.sc-ava.t0{background:linear-gradient(135deg,#7c3aed,#a78bfa)} .sc-ava.t1{background:linear-gradient(135deg,#d97706,#f59e0b)}
.sc-ava.t2{background:linear-gradient(135deg,#e11d48,#fb7185)} .sc-ava.t3{background:linear-gradient(135deg,#0d9488,#2dd4bf)}
.sc-ava.t4{background:linear-gradient(135deg,#0284c7,#38bdf8)} .sc-ava.t5{background:linear-gradient(135deg,#059669,#34d399)}
.sc-hdt{min-width:0;flex:1}
.sc-nm{font-size:19px;font-weight:700;line-height:1.25;margin:2px 0 3px;overflow-wrap:anywhere}
.sc-sub{color:var(--mut);font-size:13px;line-height:1.55}
.sc-id{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--acc-soft);color:var(--acc);font-weight:600;font-size:12px;margin-right:4px}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sc-chip{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--raised);color:var(--txt)}
.sc-chip.bad{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 80%,var(--txt))}
.sc-chip.warn{background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 60%,var(--txt))}
.sc-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px}
.sc-cb{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;padding:6px 2px;
  border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--txt);text-decoration:none;font-size:12px;font-weight:500}
.sc-cb span{font-size:18px;line-height:1}
.sc-cb:hover{border-color:var(--line2);background:var(--hover)}
.sc-nophone{margin-top:12px;color:var(--mut);font-size:13px}
body.adm button.sc-link{background:none;border:0;color:var(--acc);padding:0 2px;font-weight:600;min-height:0;display:inline}
/* ✅ Needs attention */
.sc-need{margin:0 18px 14px;border-radius:14px;padding:4px 0;border:1px solid transparent}
.sc-need.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.sc-need.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.sc-need.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.sc-need-t{font-size:12px;font-weight:700;padding:8px 14px 2px;color:color-mix(in srgb,var(--bad) 78%,var(--txt))}
.sc-need.warn .sc-need-t{color:color-mix(in srgb,var(--warn) 55%,var(--txt))}
body.adm button.sc-need-r{display:flex;width:100%;align-items:center;gap:10px;padding:10px 14px;min-height:44px;background:none;border:0;
  border-radius:0;color:var(--txt);font-weight:500;font-size:14px;text-align:left;justify-content:flex-start}
body.adm button.sc-need-r + button.sc-need-r{border-top:1px solid color-mix(in srgb,var(--txt) 8%,transparent)}
body.adm button.sc-need-r i{font-style:normal;margin-left:auto;color:var(--mut);font-size:18px}
body.adm button.sc-need-r:hover{background:color-mix(in srgb,var(--txt) 4%,transparent);filter:none}
.sc-need-r.calm{padding:10px 14px;font-weight:600;font-size:14px;color:color-mix(in srgb,var(--ok) 75%,var(--txt))}
.sc-need-more{font-size:12px;color:var(--mut);padding:2px 14px 8px}
/* sticky name + tabs */
.sc-stick{position:sticky;top:0;z-index:2;background:var(--card);padding:8px 18px 10px;border-bottom:1px solid transparent}
.sc-panel.mini .sc-stick{border-bottom-color:var(--line);box-shadow:0 6px 14px -12px rgba(0,0,0,.35)}
.sc-mini{display:none;align-items:baseline;gap:8px;margin:0 0 8px;padding-right:46px}
.sc-mini b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-mini span{color:var(--mut);font-size:12px;flex:none}
.sc-panel.mini .sc-mini{display:flex}
.sc-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px;border-radius:12px;background:var(--seg)}
body.adm button.sc-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px 6px;min-height:48px;
  background:transparent;color:var(--mut);border:0;border-radius:9px;font-weight:500;font-size:12px;box-shadow:none}
body.adm button.sc-tab span{font-size:17px;line-height:1.1}
body.adm button.sc-tab.on{background:var(--thumb);color:var(--txt);font-weight:600;box-shadow:var(--thumb-sh)}
body.adm button.sc-tab:hover:not(.on){color:var(--txt);filter:none}
body.adm button.sc-tab.dot::after{content:"";position:absolute;top:6px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;
  background:var(--bad);box-shadow:0 0 0 2px var(--seg)}
/* tab body */
.sc-body{padding:16px 18px 24px}
.sc-big{font-size:20px;font-weight:700;line-height:1.3}
.sc-big.bad{color:color-mix(in srgb,var(--bad) 85%,var(--txt))} .sc-big.warn{color:color-mix(in srgb,var(--warn) 62%,var(--txt))}
.sc-big.ok{color:color-mix(in srgb,var(--ok) 78%,var(--txt))} .sc-big.mut{color:var(--mut)}
.sc-bsub{color:var(--mut);font-size:13px;margin-top:3px;line-height:1.5}
.sc-lab{font-size:12px;font-weight:600;color:var(--mut);margin:16px 0 6px}
.sc-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
body.adm button.sc-sq{height:30px;min-height:0;padding:0;border-radius:7px;border:1.5px solid transparent;box-shadow:none}
body.adm button.sc-sq.q-cash{background:var(--pay-cash-edge)} body.adm button.sc-sq.q-card{background:var(--pay-card-edge)}
body.adm button.sc-sq.q-bonus{background:var(--pay-bonus-edge)} body.adm button.sc-sq.q-other{background:var(--pay-other-edge)}
body.adm button.sc-sq.q-debt{background:var(--pay-debt-edge)}
body.adm button.sc-sq.q-due{background:transparent;border:1.5px dashed var(--pay-due-edge)}
body.adm button.sc-sq.q-none{background:color-mix(in srgb,var(--mut) 14%,transparent)}
body.adm button.sc-sq:hover{filter:brightness(1.08);outline:2px solid var(--acc-ring);outline-offset:1px}
.sc-ml{margin-top:3px}.sc-ml span{text-align:center;font-size:10.5px;color:var(--mut)}
.sc-facts,.sc-dl{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sc-facts > div,.sc-dl > div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;font-size:13.5px}
.sc-facts > div + div,.sc-dl > div + div{border-top:1px solid var(--line)}
.sc-facts span,.sc-dl span{color:var(--mut);flex:none}
.sc-facts b,.sc-dl b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.sc-dl a{color:var(--txt);text-decoration:none;border-bottom:1px dashed var(--line2)}
.sc-dl .miss b{color:color-mix(in srgb,var(--warn) 62%,var(--txt));font-weight:600}
.sc-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--raised);color:var(--mut);vertical-align:1px}
.sc-tag.bad{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 82%,var(--txt))}
.sc-tag.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 75%,var(--txt))}
.sc-tag.warn{background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 60%,var(--txt))}
body.adm button.sc-pri{display:flex;width:100%;margin-top:18px;min-height:50px;border:0;border-radius:14px;
  background:var(--grad,var(--pri));color:#fff;font-size:15px;font-weight:600;box-shadow:var(--pri-glow,none)}
body.adm button.sc-pri.calm{background:var(--card);color:var(--txt);border:1px solid var(--line2);box-shadow:none}
.sc-row2{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
body.adm button.sc-btn2{flex:1 1 0;min-width:120px;min-height:44px;background:var(--card);color:var(--txt);border:1px solid var(--line2);
  border-radius:12px;font-weight:500;font-size:13px;box-shadow:none}
.sc-row2.three button.sc-btn2{min-width:96px}
body.adm button.sc-btn2:hover{background:var(--hover);filter:none}
.sc-list{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sc-li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:13px}
.sc-li + .sc-li{border-top:1px solid var(--line)} .sc-li span:last-child{color:var(--mut);flex:none}
.sc-note{font-size:12px;color:var(--mut);margin-top:14px;line-height:1.5}
.sc-note.bad{color:color-mix(in srgb,var(--bad) 80%,var(--txt))}
/* 🚶 calendar */
.sc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px}
.sc-cal > b{font-size:11px;color:var(--mut);text-align:center;font-weight:600}
.sc-cd{aspect-ratio:1;max-height:46px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:12px;
  background:var(--raised);color:var(--mut)}
.sc-cd.e{background:none}
.sc-cd.sun{opacity:.45}
.sc-cd.p{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 78%,var(--txt));font-weight:700}
.sc-cd.a{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 82%,var(--txt));font-weight:700}
.sc-cd.today{box-shadow:inset 0 0 0 2px var(--acc)}
.sc-legend{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--mut)}
.sc-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--raised);margin-right:5px;vertical-align:-1px}
.sc-legend i.p{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)} .sc-legend i.a{background:var(--bad-soft);box-shadow:inset 0 0 0 1px var(--bad)}
/* 🕘 story */
.sc-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px 6px;padding:0 18px 4px}
.sc-cats::-webkit-scrollbar{display:none}
body.adm button.sc-cat{flex:none;min-height:36px;padding:6px 12px;border-radius:999px;background:var(--card);color:var(--txt);
  border:1px solid var(--line2);font-weight:500;font-size:12.5px;box-shadow:none}
body.adm button.sc-cat.on{background:var(--pri);border-color:var(--pri);color:#fff}
.sc-mo{position:sticky;top:0;font-size:12px;font-weight:700;color:var(--mut);margin:14px 0 4px;letter-spacing:.2px}
.sc-ev{display:flex;gap:12px;padding:8px 0}
.sc-ei{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:16px;background:var(--raised)}
.sc-ei.money{background:color-mix(in srgb,var(--ok) 16%,transparent)} .sc-ei.prom{background:var(--warn-soft)}
.sc-ei.att{background:color-mix(in srgb,#e11d48 14%,transparent)} .sc-ei.mv{background:color-mix(in srgb,#0ea5e9 16%,transparent)}
.sc-ei.join{background:var(--acc-soft)} .sc-ei.app{background:color-mix(in srgb,#8b5cf6 15%,transparent)}
.sc-ei.bad{background:var(--bad-soft)} .sc-ei.coin{background:color-mix(in srgb,#eab308 18%,transparent)}
.sc-et{font-weight:600;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.sc-em{color:var(--mut);font-size:12px;margin-top:1px;line-height:1.45;overflow-wrap:anywhere}
/* footer + ⋯ menu */
.sc-foot{position:relative;flex:none;display:flex;gap:8px;padding:10px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
body.adm button.sc-fb{flex:1;min-height:44px;background:var(--raised);color:var(--txt);border:0;border-radius:12px;font-weight:500;font-size:13.5px;box-shadow:none}
body.adm button.sc-fb:hover{background:var(--hover);filter:none}
.sc-more{display:none;position:absolute;right:18px;bottom:calc(100% + 6px);min-width:210px;padding:6px;border-radius:14px;
  background:var(--card);border:1px solid var(--line2);box-shadow:var(--e3);flex-direction:column;gap:2px}
.sc-more.show{display:flex}
body.adm button.sc-mi{justify-content:flex-start;min-height:42px;padding:8px 12px;background:none;color:var(--txt);border:0;border-radius:10px;font-weight:500;box-shadow:none}
body.adm button.sc-mi:hover{background:var(--hover);filter:none}
body.adm button.sc-mi.bad{color:color-mix(in srgb,var(--bad) 85%,var(--txt))}
/* names that open the card (Overdue, Kicked lists) */
body.adm button.sc-namelink{display:inline;padding:0;min-height:0;background:none;border:0;color:inherit;font:inherit;font-weight:inherit;
  text-align:left;border-bottom:1px dashed var(--line2);border-radius:0;box-shadow:none}
body.adm button.sc-namelink:hover{color:var(--acc);filter:none}
/* the student's row stays highlighted behind the laptop panel */
body.adm tr.sc-hl > td,body.adm .gc-card.sc-hl{background:var(--acc-soft) !important}
/* laptops: a right-hand panel, the page stays visible */
@media (min-width:900px){
  .sc-bg{top:60px;align-items:stretch;justify-content:flex-end;background:rgba(12,14,24,.10);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-panel{width:480px;max-width:480px;height:auto;border-radius:0;border-left:1px solid var(--line);animation:scIn .22s var(--ease)}
  .sc-grab{display:none}
  .sc-top{padding-top:18px}
}
/* phones: Groups composer behind "✉️ Message students" (desktop keeps it open) */
.gc-openrow{display:none}
@media (max-width:700px){
  body.adm .gc-openrow{display:flex;justify-content:flex-end;margin:0 0 10px}
}
@media (min-width:701px){ body.adm #p-manage.gc-closed .gcomp{display:flex} }
@media (prefers-reduced-motion: reduce){ .sc-panel{animation:none} }

/* =========================================================================
   🏠 TEACHER HOME — action first (2026-10-05, chunk 2 of the design system;
   docs/plans/2026-10-05-design-system-design.md). Next stack → number strip
   → due tiles → one day timeline. Phone = one column in that order: #feedBox
   and the aside are display:contents and their children carry `order`.
   ≥900px = main (Next + tiles) | sticky side (strip + timeline).
   Day = indigo→violet hero; Night = #111 hero, red action, orange late.
   ========================================================================= */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-grid{display:flex;flex-direction:column;gap:12px;margin-top:4px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.hm-main,.hm-side){display:contents}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #feedBox > .skel{order:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #tpCard{order:0;margin:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #hmNext{order:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #dayStrip{order:2}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(#feedBox > .hm-tiles,#feedBox > .hm-alldone){order:3}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #hmLessons{order:4}
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
    grid-template-areas:none;gap:16px 22px;align-items:start}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-main{grid-area:auto;grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-side{grid-area:auto;grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0;
    position:sticky;top:78px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;overscroll-behavior:contain}
}
body.boot-stale #feedBox > *,body.boot-stale #hmLessons{pointer-events:none;opacity:.72;filter:saturate(.7);user-select:none}

/* ---- the Next stack ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx{display:flex;flex-direction:column;gap:8px;min-width:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-stack{position:relative}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-stack[data-peek="1"]{padding-bottom:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-stack[data-peek="2"]{padding-bottom:16px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-peek{position:absolute;bottom:0;left:12px;right:12px;height:60px;z-index:1;
  border-radius:var(--r-hero);background:var(--card);border:1px solid var(--line);box-shadow:var(--e1,none);cursor:pointer}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-stack[data-peek="2"] .nx-peek.p1{bottom:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-peek.p2{left:24px;right:24px;z-index:0;opacity:.7}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:16px;border-radius:var(--r-hero);border:1px solid transparent;cursor:pointer;
  background:var(--grad);color:#fff;box-shadow:var(--rim),0 14px 30px -16px rgba(79,70,229,.6)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.bad{background:linear-gradient(135deg,#b91c1c,#dc2626);box-shadow:var(--rim),0 14px 30px -16px rgba(220,38,38,.6)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.calm{cursor:default;background:var(--sheen),var(--card);color:var(--txt);border-color:var(--line);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-hd{display:flex;align-items:center;gap:10px;min-height:48px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-ctl);
  background:rgba(255,255,255,.18);font-size:20px;line-height:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ic .ico.emo{font-size:20px;width:auto;height:auto}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.calm .nx-ic{background:var(--ok-soft,rgba(22,163,74,.12));color:var(--ok)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ic svg.ico{width:20px;height:20px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-kick{flex:1;min-width:0;font-size:13px;font-weight:600;opacity:.92}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-t{display:block;font-size:19px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;margin-top:6px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-s{display:flex;align-items:center;gap:6px;font-size:14px;opacity:.92}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-s .ico{width:15px;height:15px;font-size:13px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.calm .nx-s{color:var(--mut);opacity:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-go{margin-top:12px;width:100%;border:0;background:#fff;background-image:none;color:#4338ca;
  font-size:15px;font-weight:700;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.bad button.nx-go{color:#b91c1c}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-go:hover{background:#f5f5ff}
/* countdown ring */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ring{flex:none;position:relative;width:48px;height:48px;display:grid;place-items:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ring svg{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ring circle{fill:none;stroke-width:4}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-trk{stroke:rgba(255,255,255,.28)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-arc{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ring b{position:relative;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
/* "+n more" + the list */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-more{align-self:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-list{display:flex;flex-direction:column;background:var(--sheen),var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--rim);overflow:hidden}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:56px;padding:8px 12px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--txt);font:inherit;text-align:left;cursor:pointer}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row:first-child{border-top:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row:hover{background:var(--hover)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row .nx-ic{width:36px;height:36px;background:var(--raised);font-size:17px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row .nx-ic .ico.emo{font-size:17px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-rtx b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-rtx small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-rtx small .ico{width:13px;height:13px;font-size:12px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-row.bad .nx-rtx small{color:var(--bad);font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-rc{color:var(--mut)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-rc .ico{width:16px;height:16px}
/* finishing: the old card slides away, the next one rises (spring) */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-ghost{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;animation:nxOut .42s cubic-bezier(.4,0,1,1) forwards}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-card.nx-in{animation:nxIn .62s cubic-bezier(.2,1.4,.4,1) both}
@keyframes nxOut{to{transform:translateX(-110%) rotate(-4deg);opacity:0}}
@keyframes nxIn{from{transform:translateY(14px) scale(.95);opacity:.5}to{transform:none;opacity:1}}

/* ---- due tiles + the all-done line ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles{margin:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n1{grid-template-columns:minmax(0,1fr)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:600px){ :root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-tiles.n5{grid-template-columns:repeat(5,minmax(0,1fr))} }
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-alldone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;
  border-radius:var(--r-card);background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-adt{display:inline-flex;align-items:center;gap:8px;font-size:14px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-adt .ok{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:9px;
  background:var(--ok-soft,rgba(22,163,74,.12));color:var(--ok)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-adt .ok .ico{width:16px;height:16px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-adc-row{display:flex;flex-wrap:wrap;gap:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.hm-adc{display:inline-flex;align-items:center;gap:6px;height:var(--h-sm);min-height:var(--h-sm);padding:0 12px;
  border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--raised);background-image:none;color:var(--txt);font-size:13px;font-weight:600;box-shadow:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.hm-adc .ico.emo{font-size:14px;width:auto;height:auto}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.hm-adc:hover{border-color:var(--line2)}

/* ---- the number strip: one row of four ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-strip .hm-num{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:76px;padding:9px 4px 8px;text-align:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-strip .hm-num i{display:block;margin:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-strip .hm-num b{margin:2px 0 0;font-size:17px;font-weight:700;line-height:1.15;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-strip .hm-num small{font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-strip .hm-num.neg b{color:var(--bad)}

/* ---- the day timeline ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-lessons .hm-h{margin-bottom:6px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hm-hr{display:inline-flex;align-items:center;gap:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-row.saved{min-height:38px;padding-top:2px;padding-bottom:2px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-row.saved .tl-tx b{font-size:13px;font-weight:500}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-row.saved .tl-tx small{font-size:11.5px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-row.saved .tl-dot{width:10px;height:10px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-now{position:relative;display:flex;align-items:center;height:18px;margin:2px 0;padding-left:44px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-now::before{content:"";position:absolute;left:56px;right:6px;top:50%;height:2px;background:var(--acc);border-radius:2px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-now::after{content:"";position:absolute;left:56px;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--acc)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tl-now span{position:absolute;left:0;width:44px;font-size:11px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}

/* ---- NIGHT: black · white · red; late = orange ---- */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card{background:#111111;color:var(--txt);border-color:var(--line);box-shadow:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card.bad{background:#111111;border-color:var(--bad);box-shadow:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card.bad .nx-kick{color:var(--bad);opacity:1}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card.calm{background:#111111}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-ic{background:#1f1f1f}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card .nx-s{color:var(--mut);opacity:1}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card.bad .nx-s{color:var(--bad)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.nx-go{background:var(--pri);color:#fff;box-shadow:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-card.bad button.nx-go{color:#fff}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.nx-go:hover{background:var(--pri-h)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-trk{stroke:#262626}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-arc{stroke:var(--acc)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-ring.late .nx-arc{stroke:var(--bad)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-ring.late b{color:var(--bad)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .nx-peek{background:#0d0d0d;border-color:var(--line);box-shadow:none}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.nx-list,.hm-alldone){background:#111111;box-shadow:none}
@media (prefers-reduced-motion: reduce){
  :root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.nx-ghost,.nx-card.nx-in){animation:none}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .nx-arc{transition:none}
}
@media (min-width:900px){
  :root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-go{width:auto;min-width:240px;align-self:flex-start;padding:0 28px}
}

/* =====================================================================
   📝 STUDY TRACKING (migrate-study-v1) — teacher + admin. Prefix st-.
   Status chip beside names, group mini line, Study card / tab body.
   Meaning never by colour alone: every chip carries its emoji + band.
   ===================================================================== */
.st-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;
  margin-left:6px;white-space:nowrap;vertical-align:middle;border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.st-chip i{font-style:normal;font-size:10px}
.st-chip.red{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.st-chip.red.done{opacity:.75}
.st-chip.orange{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.st-chip.top{color:#0ea5e9;border-color:color-mix(in srgb,#0ea5e9 45%,transparent);background:color-mix(in srgb,#0ea5e9 13%,transparent)}
:root[data-theme="light"] .st-chip.top{color:#0369a1}
.st-gmini{white-space:nowrap}
.st-gmini .r{color:var(--bad)}
.st-big{font-size:16px;font-weight:700;margin-bottom:2px}
.st-big.red{color:var(--bad)} .st-big.orange{color:var(--warn)} .st-big.mut{color:var(--mut);font-weight:600;font-size:14px}
.st-lab{font-size:12px;font-weight:700;color:var(--mut);margin:10px 0 4px}
.st-parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.st-part{display:inline-flex;flex-direction:column;align-items:center;min-width:64px;padding:5px 8px;border-radius:10px;
  border:1px solid var(--line,rgba(127,127,127,.25));background:color-mix(in srgb,var(--card,#fff) 85%,transparent)}
.st-part i{font-style:normal;font-size:11px;color:var(--mut)}
.st-part b{font-size:15px}
.st-part.mut{color:var(--mut)}
.st-trend{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.st-ar{color:var(--mut)}
.st-tb{display:inline-flex;flex-direction:column;align-items:center;padding:3px 8px;border-radius:9px;font-size:13px;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.st-tb i{font-style:normal;font-size:10px;color:var(--mut);font-weight:500}
.st-tb.red{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.st-tb.top{color:#0ea5e9;background:color-mix(in srgb,#0ea5e9 13%,transparent)}
:root[data-theme="light"] .st-tb.top{color:#0369a1}
.st-tb.mut{color:var(--mut);background:transparent}
.st-act{padding:7px 0;border-top:1px solid var(--line,rgba(127,127,127,.2));line-height:1.45}
.st-act:first-of-type{border-top:0}
.st-exr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line,rgba(127,127,127,.2))}
.st-exr .st-tb{flex-direction:row}
.st-contact{margin:6px 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.st-card{margin-top:10px}
.st-ch{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.st-cht{flex:1;min-width:0}
.st-nm{cursor:pointer;overflow-wrap:anywhere}
.st-ch .st-chip{margin-left:0}
.ss-ic.stu{background:color-mix(in srgb,#8b5cf6 18%,transparent);border-color:color-mix(in srgb,#8b5cf6 40%,transparent)}
:root[data-theme] body.tui:not(.authbg) .ss-ic.stu{background:var(--gloss,none),color-mix(in srgb,#8b5cf6 18%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#8b5cf6 30%,transparent)}
/* admin Watch › Study */
.st-mon-teacher{margin-top:12px}
.st-mon-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line,rgba(127,127,127,.2))}
.st-mon-row .st-gm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;font-size:13px}
.st-bar{height:6px;border-radius:4px;background:color-mix(in srgb,var(--mut) 20%,transparent);overflow:hidden;margin-top:4px;max-width:260px}
.st-bar b{display:block;height:100%;background:var(--ok)}
.st-bar b.red{background:var(--bad)} .st-bar b.mid{background:var(--warn)}
.st-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:6px 0 10px}
.st-tile{padding:10px 12px;border-radius:14px;border:1px solid var(--line,rgba(127,127,127,.25))}
.st-tile b{display:block;font-size:22px}
.st-tile span{font-size:12px;color:var(--mut)}
.st-tile.red b{color:var(--bad)} .st-tile.top b{color:#0ea5e9}
.st-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;align-items:end}
.st-set label{font-size:12px;color:var(--mut)}
.st-set input{width:100%}

/* ==============================================================
   📖 PROGRAM (migrate-program-v1) — lesson card in ▶ Lesson, position picker,
   position chip. Prefix prg-. The plan has no student data: safe to project.
   ===================================================================== */
.prg-card{margin-bottom:10px}
.prg-hd{display:flex;gap:12px;align-items:flex-start}
.prg-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:color-mix(in srgb,#14b8a6 16%,transparent);border:1px solid color-mix(in srgb,#14b8a6 35%,transparent)}
.prg-ht{min-width:0;flex:1}
.prg-code{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:8px;margin-right:6px;
  color:#0f766e;background:color-mix(in srgb,#14b8a6 16%,transparent)}
:root[data-theme="dark"] .prg-code{color:#5eead4}
.prg-title{font-size:16px;overflow-wrap:anywhere}
.prg-sub{font-size:12px;margin-top:2px}
.prg-main{margin:10px 0 2px;font-size:13px;font-weight:600}
.prg-det{margin-top:8px}
.prg-det summary{cursor:pointer;font-weight:600;font-size:13px;padding:6px 0;min-height:32px}
.prg-strands{display:grid;gap:6px;margin-top:6px}
.prg-s{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px;padding:7px 9px;border-radius:10px;
  border:1px solid var(--line,rgba(127,127,127,.2));font-size:13px;line-height:1.45}
.prg-s.main{border-color:color-mix(in srgb,#14b8a6 45%,transparent);background:color-mix(in srgb,#14b8a6 8%,transparent)}
.prg-sk{font-weight:700;font-size:12px;white-space:nowrap}
.prg-st{overflow-wrap:anywhere}
@media (max-width:560px){ .prg-s{grid-template-columns:1fr;gap:2px} }
.prg-note,.prg-unit{margin-top:8px;font-size:13px;line-height:1.5}
.prg-unit>div{margin:4px 0}
.prg-unit .prg-sk{margin-right:6px}
.prg-skip{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;min-height:36px;cursor:pointer}
.prg-skip input{width:20px;height:20px}
.prg-hint{font-size:12px;margin-top:2px}
.prg-done{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ok)}
.prg-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;margin-left:6px;
  white-space:nowrap;vertical-align:middle;color:#0f766e;background:color-mix(in srgb,#14b8a6 14%,transparent);border:1px solid color-mix(in srgb,#14b8a6 35%,transparent)}
:root[data-theme="dark"] .prg-chip{color:#5eead4}
.prg-stages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.prg-stages .tu-chip{border:1px solid var(--line,rgba(127,127,127,.3));border-radius:12px;padding:0 12px;min-height:36px;background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:13px}
.prg-stages .tu-chip.on{background:var(--acc,#4f46e5);border-color:var(--acc,#4f46e5);color:#fff}
.prg-pick{max-height:55vh;overflow:auto;display:grid;gap:10px;margin-bottom:8px}
.prg-put{font-size:13px;margin-bottom:6px}
.prg-pls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.prg-pl{display:flex;align-items:center;gap:6px;text-align:left;min-height:40px;padding:6px 9px;border-radius:10px;cursor:pointer;font:inherit;font-size:12px;
  border:1px solid var(--line,rgba(127,127,127,.3));background:transparent;color:inherit}
.prg-pl b{flex:none;font-size:13px}
.prg-pl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prg-pl.on{border-color:#14b8a6;background:color-mix(in srgb,#14b8a6 12%,transparent)}
.prg-pl.ex{border-style:dashed}
/* =========================================================================
   🧩 EDUNEST DS — chunk 3: shared pieces + admin sweep (2026-10-05, design
   docs/plans/2026-10-05-admin-ds-sweep-design.md). A measured audit of 175
   admin screens found the leftovers below; each is fixed HERE, at the
   system level, so teacher + front desk get the same rule. Same prefix P
   as the DS block above (0,5,1) and it comes last, so it wins.
   ========================================================================= */
/* ink = a status colour used as TEXT; always ≥ 4.5 on its own tint */
:root[data-theme] body.tui:not(.authbg):not(.ds0){
  --bad-ink:#991b1b; --ok-ink:#166534; --warn-ink:#713f12; --danger:#dc2626; --mut:#555a69}
/* Day status colours used as text were 2.5–4.3 on white / tints: darker shades */
:root[data-theme="light"] body.tui:not(.authbg):not(.ds0){--bad:#c62828; --warn:#a16207}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0){
  --bad-ink:#fb923c; --ok-ink:#4ade80; --warn-ink:#fcd34d; --danger:#dc2626; --mut:#a1a1aa}

/* ---- LINKS: accent, no browser blue; .ds-link = a 36 px tap height ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) a:not([class]){color:var(--acc);text-decoration:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) a:not([class]):hover{text-decoration:underline}
:root[data-theme] body.tui:not(.authbg):not(.ds0) a.ds-link{display:inline-flex;align-items:center;min-height:var(--h-sm);color:var(--acc);text-decoration:none;font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) a.ds-link:hover{text-decoration:underline}
/* "edit this rule" buttons sit on their own line under the rule sentence */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.ds-go{margin-top:10px;max-width:100%;white-space:normal;text-align:left}

/* ---- BADGE: an 18 px circle that never inherits its parent's line-height ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .badge-n{display:inline-grid;place-items:center;box-sizing:border-box;
  min-width:18px;height:18px;padding:0 5px;line-height:18px;font-size:11px;vertical-align:2px;text-indent:0}

/* ---- DANGER: red in both themes (orange is for warnings only) ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.danger,.modal .btnbar button.danger){background:var(--danger);color:#ffffff;border-color:transparent;box-shadow:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.danger:hover:not(:disabled){filter:brightness(1.06)}

/* ---- CHOICE CHIPS (one of many): secondary; selected = indigo / white ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(#gcScope button,button.sc-cat){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-sm);height:var(--h-sm);padding:0 14px;
  border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--card);color:var(--txt);
  font-size:var(--fs-ctl-sm);font-weight:600;line-height:1;box-shadow:none;white-space:nowrap;box-sizing:border-box}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(#gcScope button,button.sc-cat):hover:not(.on){background:var(--hover);filter:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(#gcScope button.on,button.sc-cat.on){background:var(--pri);border-color:var(--pri);color:#ffffff}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(#gcScope button.on,button.sc-cat.on){background:#fafafa;border-color:#fafafa;color:#000000}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-scope .gc-lbl{font-size:12px;letter-spacing:0;text-transform:none;color:var(--mut)}

/* ---- TAGS: 28 tall · radius 8 · 12/600, ink text ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.sc-tag,.hb-tc,.paylegend .lg){display:inline-flex;align-items:center;gap:5px;
  min-height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.2;vertical-align:middle;box-sizing:border-box}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.sc-tag,.hb-tc).bad{color:var(--bad-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(.sc-tag,.hb-tc).ok{color:var(--ok-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .sc-tag.warn{color:var(--warn-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-cnt b{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-cnt b.bad{color:var(--bad-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-mini b.bad{color:var(--bad-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-mini b.mid{color:var(--warn-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-mini.ok{color:var(--ok-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-cnt b.mid{color:var(--warn-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-cnt b.ok{color:var(--ok-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-card.b-bad .gc-state b{color:var(--bad-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-card.b-mid .gc-state b{color:var(--warn-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-card.b-ok .gc-state{color:var(--ok-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .note{color:var(--warn-ink)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .note b{color:inherit}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.ah-row b.bad{color:var(--bad-ink)}
/* initials: the tone shade is darkened in Day so every tone reads ≥ 4.5 */
:root[data-theme="light"] body.tui:not(.authbg):not(.ds0) .ss-ava{color:color-mix(in srgb,var(--av) 55%,#000000)}
/* night: the red ID chip / settings chips use the lighter red on their tint */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.sc-id,.set-ic){color:var(--acc2)}

/* ---- LIST ROWS: ≥ 44 tall, radius 12 ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.ah-row,button.hb-fr,button.omni-row){min-height:var(--h-md);border-radius:var(--r-ctl)}

/* ---- ICON BUTTONS: squares of the control heights; the bell stays round ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sc-x{width:var(--h-md);height:var(--h-md);min-height:var(--h-md);border-radius:var(--r-ctl);padding:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) #dashReload{width:var(--h-sm);height:var(--h-sm);min-height:var(--h-sm);border-radius:var(--r-ctl)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .bellbtn{width:var(--h-sm);height:var(--h-sm);min-height:var(--h-sm)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-chips{min-height:var(--h-sm)}

/* ---- STUDENT CARD controls ---- */
/* one row whatever the count (Study made it 5 — a 4-column grid wrapped Profile) */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .sc-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sc-tab{min-height:var(--h-md);height:var(--h-md);padding:4px 2px 3px;border-radius:var(--r-thumb);font-size:12px;justify-content:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sc-tab span{font-size:16px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sc-pri{min-height:var(--h-lg);border-radius:var(--r-ctl);font-size:15px;font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) :is(button.sc-btn2,button.sc-fb){min-height:var(--h-md);height:var(--h-md);padding:0 12px;border-radius:var(--r-ctl);font-size:var(--fs-ctl);font-weight:600}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.sc-pri:not(.calm){background:var(--pri);color:#ffffff;box-shadow:none}
/* 12-month strip: two rows of six, every square a ≥ 36 px target with its
   letter under it (12 in one row left 26 px squares on phones, 33 in the panel) */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .sc-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 6px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .sc-mc{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.sc-sq{width:100%;height:var(--h-sm);min-height:var(--h-sm);border-radius:9px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .sc-ml1{text-align:center;font-size:11px;line-height:1.2;color:var(--mut)}

/* ---- NIGHT: no blur behind any sheet or panel ---- */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) :is(.sc-bg,.sp-bg,.ls-bg){-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:899px){ :root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .sc-bg{background:rgba(0,0,0,.6)} }

/* =========================================================================
   🧑‍🏫 ADMIN TEACHER CARD — offer C (migrate-teachercard-v1, design
   docs/plans/2026-10-05-admin-teacher-card-design.md). The card itself
   reuses the student card's shell + sc- look; tc- adds the slim teacher
   list, the month bar, score rows (value · trend · bar with a target mark),
   group rows and pay bars. Sizes follow the 🧩 design system: rows ≥ 44,
   radius 12, tags 28 / 8, icon buttons 36.
   ========================================================================= */
:root[data-theme] body.adm:not(.authbg) .tc-list{display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.adm:not(.authbg) button.tc-row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-card,18px);background:var(--sheen),var(--card);box-shadow:var(--rim);color:var(--txt);
  text-align:left;font:inherit;cursor:pointer;transition:border-color .18s,background-color .18s}
:root[data-theme] body.adm:not(.authbg) button.tc-row:hover{border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) button.tc-row.sc-hl{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring)}
:root[data-theme] body.adm:not(.authbg) .tc-ava.ss-ava{width:40px;height:40px;flex:0 0 40px;font-size:14px}
:root[data-theme] body.adm:not(.authbg) .tc-rn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .tc-rn b{font-size:15px;font-weight:650;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .tc-rn .muted{font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .tc-go{font-style:normal;color:var(--mut);font-size:18px}
:root[data-theme] body.adm:not(.authbg) .tc-tag{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px;border-radius:8px;
  font-size:12px;font-weight:600;line-height:1.2;background:var(--raised);color:var(--txt);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .tc-tag.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .tc-tag.warn{background:var(--warn-soft);color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .sc-chip.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok))}
/* month bar */
:root[data-theme] body.adm:not(.authbg) .tc-mbar{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
:root[data-theme] body.adm:not(.authbg) button.tc-mnav{width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:0;border-radius:12px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt);font-size:18px;line-height:1;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.tc-mnav:disabled{opacity:.35;cursor:default}
:root[data-theme] body.adm:not(.authbg) .tc-mlab{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column}
:root[data-theme] body.adm:not(.authbg) .tc-mlab b{font-size:15px}
:root[data-theme] body.adm:not(.authbg) .tc-mlab span{font-size:12px;color:var(--mut)}
/* score rows */
:root[data-theme] body.adm:not(.authbg) .tc-score{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
:root[data-theme] body.adm:not(.authbg) .tc-sc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px}
:root[data-theme] body.adm:not(.authbg) .tc-sc + .tc-sc{border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .tc-sl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;min-width:0}
:root[data-theme] body.adm:not(.authbg) .tc-si{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;background:var(--raised);font-size:15px}
:root[data-theme] body.adm:not(.authbg) .tc-sv{display:flex;align-items:center;gap:8px;justify-content:flex-end}
:root[data-theme] body.adm:not(.authbg) .tc-sv b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .tc-sc.ok .tc-sv b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .tc-sc.mid .tc-sv b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .tc-sc.bad .tc-sv b{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .tc-ss{grid-column:1 / -1;font-size:12.5px;color:var(--mut);line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
:root[data-theme] body.adm:not(.authbg) .tc-ss b{color:var(--txt);font-weight:600}
:root[data-theme] body.adm:not(.authbg) .tc-tr{font-size:12px;font-weight:600;padding:3px 8px;border-radius:8px;background:var(--raised);color:var(--mut);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .tc-tr.up{background:var(--ok-soft);color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .tc-tr.down{background:var(--bad-soft);color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .tc-bar{grid-column:1 / -1;position:relative;height:8px;border-radius:4px;background:var(--raised);overflow:visible}
:root[data-theme] body.adm:not(.authbg) .tc-bar b{display:block;height:100%;border-radius:4px;background:color-mix(in srgb,var(--txt) 40%,transparent)}
:root[data-theme] body.adm:not(.authbg) .tc-bar b.ok{background:var(--ok)} :root[data-theme] body.adm:not(.authbg) .tc-bar b.mid{background:var(--warn)}
:root[data-theme] body.adm:not(.authbg) .tc-bar b.bad{background:var(--bad)}
:root[data-theme] body.adm:not(.authbg) .tc-bar i{position:absolute;top:-3px;width:2px;height:14px;margin-left:-1px;background:var(--txt);border-radius:1px;opacity:.7}
/* groups tab */
:root[data-theme] body.adm:not(.authbg) .tc-groups{display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.adm:not(.authbg) button.tc-grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;min-height:56px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--txt);text-align:left;font:inherit;cursor:pointer;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.tc-grp:hover{border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) .tc-gn{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .tc-gn .muted{font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .tc-gm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) button.tc-grp > i{font-style:normal;color:var(--mut);font-size:18px;margin-left:auto}
/* pay tab */
:root[data-theme] body.adm:not(.authbg) .tc-panel .sc-big small{font-size:13px;font-weight:600;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .tc-bars{display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.adm:not(.authbg) .tc-br{display:grid;grid-template-columns:minmax(70px,1fr) 2fr auto;align-items:center;gap:10px;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .tc-br span{overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .tc-br .tc-bar{grid-column:auto}
:root[data-theme] body.adm:not(.authbg) .tc-br .tc-bar b{background:var(--ok)}
:root[data-theme] body.adm:not(.authbg) .tc-br > b{font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .tc-warn{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .tc-bad{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .sc-ei.bad{background:var(--bad-soft)} :root[data-theme] body.adm:not(.authbg) .sc-ei.pay{background:var(--ok-soft)}
:root[data-theme] body.adm:not(.authbg) .sc-ei.move{background:color-mix(in srgb,#0ea5e9 16%,transparent)} :root[data-theme] body.adm:not(.authbg) .sc-ei.app{background:var(--acc-soft)}

/* =========================================================================
   📋 WATCH › OVERVIEW — offer E (migrate-watch-v1, design
   docs/plans/2026-10-05-admin-watch-overview-design.md). ONE markup:
   ≥900px a real grid (teacher column + six duty columns, sticky header);
   phones = one card per teacher with the six cells as a 3×2 block. Cell tone
   = meaning (bad red/orange-at-night · mid amber · ok green · na grey);
   every cell also carries its number + a words line (never colour alone).
   ========================================================================= */
:root[data-theme] body.adm:not(.authbg) .wv-tots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px}
:root[data-theme] body.adm:not(.authbg) button.wv-tot{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i l n" "i m n";align-items:center;gap:0 8px;
  min-height:56px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--txt);text-align:left;font:inherit;box-shadow:none;cursor:pointer}
:root[data-theme] body.adm:not(.authbg) button.wv-tot:hover{border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) button.wv-tot.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring)}
:root[data-theme] body.adm:not(.authbg) .wv-tot .wv-ti{grid-area:i;font-size:20px}
:root[data-theme] body.adm:not(.authbg) .wv-tot .wv-tl{grid-area:l;font-size:13px;font-weight:600}
:root[data-theme] body.adm:not(.authbg) .wv-tot .wv-tm{grid-area:m;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .wv-tot > b{grid-area:n;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-tot.bad > b,:root[data-theme] body.adm:not(.authbg) .wv-tot.bad .wv-tm{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .wv-tot.mid > b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .wv-grid{display:flex;flex-direction:column;gap:6px}
:root[data-theme] body.adm:not(.authbg) .wv-row{display:grid;grid-template-columns:minmax(170px,1.3fr) repeat(5,minmax(88px,1fr));gap:6px;align-items:stretch}
:root[data-theme] body.adm:not(.authbg) .wv-head{position:sticky;top:60px;z-index:2;background:var(--card);padding:6px 0 4px;border-bottom:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .wv-hc{font-size:12.5px;font-weight:600;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
:root[data-theme] body.adm:not(.authbg) .wv-hc small{font-size:11.5px;color:var(--mut);font-weight:500}
:root[data-theme] body.adm:not(.authbg) .wv-hc.on{color:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .wv-head .wv-name{font-size:12.5px;font-weight:600;align-self:end;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .wv-name{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
:root[data-theme] body.adm:not(.authbg) button.wv-tn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 0;border:0;background:none;color:var(--txt);
  font:inherit;text-align:left;cursor:pointer;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.wv-tn b{font-size:14.5px;font-weight:650;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) button.wv-tn:hover b{color:var(--acc);filter:none}
:root[data-theme] body.adm:not(.authbg) .wv-tn .tc-ava.ss-ava{width:36px;height:36px;flex:0 0 36px;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .wv-chips{display:flex;flex-wrap:wrap;gap:4px}
:root[data-theme] body.adm:not(.authbg) button.wv-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:64px;padding:6px 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--txt);font:inherit;cursor:pointer;box-shadow:none;text-align:center}
:root[data-theme] body.adm:not(.authbg) button.wv-c:hover:not(:disabled){border-color:var(--line2);filter:brightness(1.02)}
:root[data-theme] body.adm:not(.authbg) button.wv-c > b{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-cs{font-size:11.5px;color:var(--mut);line-height:1.25}
:root[data-theme] body.adm:not(.authbg) .wv-ci{display:none}
:root[data-theme] body.adm:not(.authbg) button.wv-c.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
:root[data-theme] body.adm:not(.authbg) button.wv-c.bad > b,:root[data-theme] body.adm:not(.authbg) button.wv-c.bad .wv-cs{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) button.wv-c.mid{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
:root[data-theme] body.adm:not(.authbg) button.wv-c.mid > b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) button.wv-c.ok > b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) button.wv-c.na{background:var(--raised);opacity:.6;cursor:default}
:root[data-theme] body.adm:not(.authbg) button.wv-c.on{box-shadow:0 0 0 2px var(--acc-ring)}
@media (max-width:899px){
  :root[data-theme] body.adm:not(.authbg) .wv-head{display:none}
  :root[data-theme] body.adm:not(.authbg) .wv-grid{gap:10px}
  :root[data-theme] body.adm:not(.authbg) .wv-row{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;border:1px solid var(--line);border-radius:var(--r-card,18px);
    background:var(--sheen),var(--card);box-shadow:var(--rim)}
  :root[data-theme] body.adm:not(.authbg) .wv-row .wv-name{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  :root[data-theme] body.adm:not(.authbg) .wv-ci{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut)}
  :root[data-theme] body.adm:not(.authbg) .wv-ci i{font-style:normal}
  :root[data-theme] body.adm:not(.authbg) .wv-tots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the cell sheet */
:root[data-theme] body.adm:not(.authbg) .wv-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
:root[data-theme] body.adm:not(.authbg) .wv-sh > div{flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) .wv-sh h3{margin:0;font-size:16px}
:root[data-theme] body.adm:not(.authbg) .wv-items{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
:root[data-theme] body.adm:not(.authbg) .wv-it{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:44px}
:root[data-theme] body.adm:not(.authbg) .wv-it + .wv-it{border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .wv-itx{flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) .wv-itl{font-size:12.5px;color:var(--mut);margin-top:2px}
:root[data-theme] body.adm:not(.authbg) .wv-days{display:flex;flex-wrap:wrap;gap:6px}
:root[data-theme] body.adm:not(.authbg) .wv-it button.sc-link{min-height:36px;display:inline-flex;align-items:center;font-size:14px}
/* 📋 Watch › Overview polish (docs/plans/2026-10-18-watch-overview-polish-design.md) — wv- prefix; reuses .mn-top / .mn-sum / .od-chipf / .gc-seg / .od-q */
:root[data-theme] body.adm:not(.authbg) .wv-live{display:flex;flex-direction:column;gap:1px;padding:2px 8px;min-width:0}
:root[data-theme] body.adm:not(.authbg) .wv-live b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-live b.wv-soon{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .wv-live span{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
:root[data-theme] body.adm:not(.authbg) .wv-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);animation:wvPulse 2.4s ease-out infinite}
@keyframes wvPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
:root[data-theme] body.adm:not(.authbg) .wv-newt{color:var(--acc);font-weight:650}
/* 🕕 day timeline */
:root[data-theme] body.adm:not(.authbg) .wv-line{margin:0 0 14px;padding:10px 16px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
:root[data-theme] body.adm:not(.authbg) .wv-lt{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-bottom:26px;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-lb{position:relative;height:8px;border-radius:99px;background:var(--raised);margin:0 4px 30px}
:root[data-theme] body.adm:not(.authbg) .wv-lf{position:absolute;inset:0 auto 0 0;border-radius:99px;background:color-mix(in srgb,var(--acc) 30%,transparent)}
:root[data-theme] body.adm:not(.authbg) .wv-lm{position:absolute;top:-5px;transform:translateX(-50%)}
:root[data-theme] body.adm:not(.authbg) .wv-lm i{display:block;width:3px;height:18px;margin:0 auto;border-radius:2px;background:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .wv-lm.past i{background:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .wv-lm em{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:650;white-space:nowrap;color:var(--txt)}
:root[data-theme] body.adm:not(.authbg) .wv-lm.up em{top:auto;bottom:20px}
:root[data-theme] body.adm:not(.authbg) .wv-ln{position:absolute;top:-6px;width:2px;height:20px;margin-left:-1px;border-radius:2px;background:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .wv-ln em{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:700;color:var(--acc);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .wv-lr{font-size:12px;color:var(--mut)}
/* tools + list */
:root[data-theme] body.adm:not(.authbg) .wv-tools{margin:0 0 12px}
:root[data-theme] body.adm:not(.authbg) .wv-sort button{min-height:36px}
:root[data-theme] body.adm:not(.authbg) .wv-card{padding:12px 14px}
:root[data-theme] body.adm:not(.authbg) .wv-head{top:128px}
:root[data-theme] body.adm:not(.authbg) .wv-tnx{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
:root[data-theme] body.adm:not(.authbg) .wv-pg{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .wv-pgb{display:inline-block;position:relative;width:44px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
:root[data-theme] body.adm:not(.authbg) .wv-pgb > i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--ok)}
:root[data-theme] body.adm:not(.authbg) .wv-pgb > i.mid{background:var(--warn)} :root[data-theme] body.adm:not(.authbg) .wv-pgb > i.bad{background:var(--bad)}
:root[data-theme] body.adm:not(.authbg) button.wv-c{position:relative}
:root[data-theme] body.adm:not(.authbg) .wv-new{position:absolute;top:3px;right:5px;font-size:10.5px;font-weight:750;color:var(--acc);font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-bell{position:absolute;top:2px;left:4px;font-size:11px;line-height:1}
:root[data-theme] body.adm:not(.authbg) .wv-row.wv-flash{animation:wvFlash 1.6s ease-out}
@keyframes wvFlash{0%,35%{box-shadow:0 0 0 3px var(--acc-ring);border-radius:14px}100%{box-shadow:0 0 0 3px transparent}}
:root[data-theme] body.adm:not(.authbg) .wv-calm{border:1px dashed var(--line2);border-radius:14px}
:root[data-theme] body.adm:not(.authbg) .wv-calm > summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:8px 14px;cursor:pointer;list-style:none;font-size:14px}
:root[data-theme] body.adm:not(.authbg) .wv-calm > summary::-webkit-details-marker{display:none}
:root[data-theme] body.adm:not(.authbg) .wv-calm > summary::after{content:"›";margin-left:auto;font-size:18px;color:var(--mut);transition:transform .2s}
:root[data-theme] body.adm:not(.authbg) .wv-calm[open] > summary::after{transform:rotate(90deg)}
:root[data-theme] body.adm:not(.authbg) .wv-calm > summary b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .wv-calm > summary .muted{font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .wv-calmg{display:flex;flex-direction:column;gap:6px;padding:0 8px 8px}
:root[data-theme] body.adm:not(.authbg) .wv-foot{position:sticky;bottom:0;z-index:2;background:var(--card);border-top:1px solid var(--line);padding:6px 0}
:root[data-theme] body.adm:not(.authbg) .wv-foot .wv-name{font-size:13px}
:root[data-theme] body.adm:not(.authbg) .wv-foot .wv-name .muted{font-size:11.5px}
:root[data-theme] body.adm:not(.authbg) .wv-fc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
:root[data-theme] body.adm:not(.authbg) .wv-fc b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .wv-fc span{font-size:11.5px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .wv-fc.mid b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .wv-fc.bad b,:root[data-theme] body.adm:not(.authbg) .wv-fc.bad span{color:var(--bad-ink,var(--bad))}
@media (max-width:899px){
  :root[data-theme] body.adm:not(.authbg) .wv-card{padding:0;border:0;background:none;box-shadow:none}
  :root[data-theme] body.adm:not(.authbg) .wv-foot{display:none}
  :root[data-theme] body.adm:not(.authbg) .wv-calmg{gap:10px;padding:0 6px 6px}
  :root[data-theme] body.adm:not(.authbg) .wv-row .wv-name{justify-content:flex-start}
  :root[data-theme] body.adm:not(.authbg) .wv-row .wv-chips{margin-left:auto}
}
/* 📡 Watch = Today · Students · Learning (migrate-watch-v3) — 📥 Needs you strip, school line, attendance %, in-page switch */
:root[data-theme] body.adm:not(.authbg) .wv-inb{margin:0 0 12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));border-radius:16px;
  background:color-mix(in srgb,var(--acc) 6%,var(--card))}
:root[data-theme] body.adm:not(.authbg) .wv-inbh{font-size:14px;font-weight:700;margin:0 0 8px}
:root[data-theme] body.adm:not(.authbg) .wv-inbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
:root[data-theme] body.adm:not(.authbg) button.wv-ib{display:flex;align-items:center;gap:10px;min-height:56px;height:auto;margin:0;padding:8px 12px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--txt);font-weight:500}
:root[data-theme] body.adm:not(.authbg) button.wv-ib:hover{border-color:var(--acc);filter:none}
:root[data-theme] body.adm:not(.authbg) .wv-ibi{font-size:20px;flex:0 0 auto}
:root[data-theme] body.adm:not(.authbg) .wv-ibx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .wv-ibx b{font-size:13.5px;font-weight:600;line-height:1.3}
:root[data-theme] body.adm:not(.authbg) .wv-ibx b em{font-style:normal;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .wv-ibx small{font-size:12px;color:var(--mut);overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .wv-ibg{color:var(--mut);font-size:18px}
:root[data-theme] body.adm:not(.authbg) .wv-inb-ok,:root[data-theme] body.adm:not(.authbg) .wv-inb-off{font-size:13.5px;padding:10px 14px;background:var(--card);border-color:var(--line)}
:root[data-theme] body.adm:not(.authbg) .wv-inb-ok b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .wv-school{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:13px}
:root[data-theme] body.adm:not(.authbg) .wv-school b.ok,:root[data-theme] body.adm:not(.authbg) .wv-att.ok{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .wv-school b.mid,:root[data-theme] body.adm:not(.authbg) .wv-att.mid{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .wv-school b.bad,:root[data-theme] body.adm:not(.authbg) .wv-att.bad{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .wv-tsub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
:root[data-theme] body.adm:not(.authbg) .wv-att{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .ws-seg-h:empty{display:none}
:root[data-theme] body.adm:not(.authbg) .ws-seg-h{margin:0 0 12px;max-width:100%;overflow-x:auto}
:root[data-theme] body.adm.tui:not(.authbg):not(.ds0) .ws-seg button{min-height:40px;height:auto;white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .ws-seg .badge-n{margin-left:4px}
@media (max-width:480px){ :root[data-theme] body.adm:not(.authbg) .wv-inbl{grid-template-columns:1fr} }
/* 👀 hover preview (laptop) — the cabinet-modal tier, a direct child of body */
.wv-tip{position:fixed;z-index:50;max-width:280px;padding:8px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2,var(--card));color:var(--txt);
  box-shadow:var(--e3,0 12px 32px rgba(0,0,0,.35));font-size:13px;pointer-events:none}
.wv-tip ul{margin:0 0 4px;padding:0;list-style:none} .wv-tip li{padding:2px 0} .wv-tip li span,.wv-tip .muted{color:var(--mut);font-size:12px}
/* the sheet: ‹ n / N › · 🔔 nudge */
:root[data-theme] body.adm:not(.authbg) .wv-shnav{display:flex;align-items:center;gap:2px;flex:0 0 auto}
:root[data-theme] body.adm:not(.authbg) .wv-shnav span{font-size:12.5px;color:var(--mut);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) button.wv-nv{width:40px;height:40px;min-height:40px;padding:0;border-radius:12px;font-size:20px;line-height:1}
:root[data-theme] body.adm:not(.authbg) .wv-nudge{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:12px 0 4px;font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .wv-nudge.done{padding:10px 12px;border-radius:12px;background:var(--raised);font-size:13.5px;color:var(--txt)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.wv-nb.sm{min-height:40px;height:auto}
@media (max-width:480px){ :root[data-theme] body.adm:not(.authbg) .wv-sh{flex-wrap:wrap} :root[data-theme] body.adm:not(.authbg) .wv-shnav{order:3;margin-left:auto} }
@media (prefers-reduced-motion: reduce){ :root[data-theme] body.adm:not(.authbg) .wv-dot,:root[data-theme] body.adm:not(.authbg) .wv-row.wv-flash{animation:none} }

/* =========================================================================
   📊 MONEY › OVERVIEW — offer F (migrate-money-v1, design
   docs/plans/2026-10-05-admin-money-overview-design.md). Four cards:
   💵 Income · 🎯 Collection · 🏫 School vs salaries · 🧑‍🏫 By teacher.
   ≥900px two .mn-col columns (Income + Collection | Split + By teacher);
   phones flatten them (display:contents) → Income, Collection, Split, By teacher. Reuses the teacher card's month bar,
   trend chip (.tc-tr) and target bar (.tc-bar). Prefix mn-.
   ========================================================================= */
/* 🎨 Overview polish A (2026-10-18): colour tokens — income = ink (white at night, slate by day), salaries = violet,
   school = green, card payments = sky. Red stays for falls and debt only. */
:root[data-theme] body.adm:not(.authbg){--mn-topbg:var(--bg2);--mn-inc:#eceef3;--mn-sal:#a78bfa;--mn-sch:var(--ok);--mn-card:#38bdf8}
:root[data-theme="light"] body.adm:not(.authbg){--mn-topbg:#ffffff;--mn-inc:#2a2f45;--mn-sal:#7c5cf0;--mn-sch:#16a34a;--mn-card:#0284c7}
/* slim sticky month bar (replaces the old "How is the money?" header card) */
:root[data-theme] body.adm:not(.authbg) .mn-top{position:sticky;top:66px;z-index:6;display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px;
  border:1px solid var(--line);border-radius:16px;background:var(--mn-topbg);box-shadow:var(--e1);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
@media (max-width:760px){ :root[data-theme] body.adm:not(.authbg) .mn-top{top:60px} }
:root[data-theme] body.adm:not(.authbg) .mn-top .mn-topm{flex:1;min-width:0}
/* 🗓 Month | Week switch (migrate-money-v2): one row on laptops; phones put the switch + ↻ above the ‹ period › */
:root[data-theme] body.adm:not(.authbg) .mn-top .mn-seg{flex:0 0 auto}
:root[data-theme] body.adm:not(.authbg) .mn-top .mn-seg button{min-width:64px}
@media (max-width:560px){
  :root[data-theme] body.adm:not(.authbg) .mn-top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"seg rl" "bar bar";row-gap:6px}
  :root[data-theme] body.adm:not(.authbg) .mn-top .mn-seg{grid-area:seg;justify-self:start}
  :root[data-theme] body.adm:not(.authbg) .mn-top .mn-rl{grid-area:rl}
  :root[data-theme] body.adm:not(.authbg) .mn-top .mn-topm{grid-area:bar}
}
:root[data-theme] body.adm:not(.authbg) .mn-tch{display:flex;flex-wrap:wrap;gap:4px}
:root[data-theme] body.adm:not(.authbg) .mn-tv .mn-tvl{font-size:11px;color:var(--mut);margin-top:-4px}
:root[data-theme] body.adm:not(.authbg) .mn-tot{margin-left:auto;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-tot small{font-size:12px;font-weight:500;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-top .tc-mbar{margin:0}
:root[data-theme] body.adm:not(.authbg) button.mn-rl{width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:0;border-radius:12px;font-size:16px}
:root[data-theme] body.adm:not(.authbg) .mn-warn{font-size:13px;font-weight:600;color:var(--warn-ink,var(--warn));margin:-4px 4px 10px}
:root[data-theme] body.adm:not(.authbg) .mn-warn:empty{display:none}
/* first-load placeholders shaped like the cards */
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel{padding:0;gap:12px}
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel i.mn-sk-t{width:38%;height:14px}
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel i.mn-sk-b{width:58%;height:30px;border-radius:9px}
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel i.mn-sk-l{width:82%;height:10px}
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel i.mn-sk-c{width:100%;height:96px;border-radius:10px}
:root[data-theme] body.adm:not(.authbg) .mn-skc .skel i.mn-sk-r{width:100%;height:40px;border-radius:10px}
:root[data-theme] body.adm:not(.authbg) .mn-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){
  :root[data-theme] body.adm:not(.authbg) .mn-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  :root[data-theme] body.adm:not(.authbg) .mn-col{display:flex;flex-direction:column;gap:12px;min-width:0}
}
@media (max-width:899px){ :root[data-theme] body.adm:not(.authbg) .mn-col{display:contents} }
:root[data-theme] body.adm:not(.authbg) .mn-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.adm:not(.authbg) button.mn-card.mn-tap{width:100%;text-align:left;font:inherit;color:var(--txt);background:var(--card);
  border:1px solid var(--line);cursor:pointer;box-shadow:none;align-items:stretch}
:root[data-theme] body.adm:not(.authbg) button.mn-card.mn-tap:hover{border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg) .mn-ct{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650}
:root[data-theme] body.adm:not(.authbg) .mn-ic{font-size:18px}
:root[data-theme] body.adm:not(.authbg) .mn-go{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .mn-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
:root[data-theme] body.adm:not(.authbg) .mn-big b{font-size:30px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-big small{font-size:13px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-sub{font-size:13px;color:var(--mut);line-height:1.45}
:root[data-theme] body.adm:not(.authbg) .mn-sub b{color:var(--txt)}
:root[data-theme] body.adm:not(.authbg) .mn-lab{font-size:12.5px;font-weight:600;color:var(--mut);margin-top:4px}
:root[data-theme] body.adm:not(.authbg) .mn-note{font-size:12px;color:var(--mut)}
/* 12-month bars — every bar is a 44px tap target */
:root[data-theme] body.adm:not(.authbg) .mn-months{display:flex;gap:4px;align-items:stretch;height:96px}
:root[data-theme] body.adm:not(.authbg) button.mn-mb{flex:1 1 0;min-width:0;min-height:44px;height:100%;padding:0 0 18px;margin:0;border:0;border-radius:8px;
  background:none;box-shadow:none;position:relative;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;font:inherit;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) button.mn-mb i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--mn-inc) 26%,var(--raised))}
:root[data-theme] body.adm:not(.authbg) button.mn-mb span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;line-height:16px}
:root[data-theme] body.adm:not(.authbg) button.mn-mb.on i{background:var(--mn-inc)}
/* 📈 B1 — the live bar's "on pace" outline (dashed, behind the real bar) */
:root[data-theme] body.adm:not(.authbg) button.mn-mb i{position:relative}
:root[data-theme] body.adm:not(.authbg) button.mn-mb em.mn-gh{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:100%;max-width:26px;box-sizing:border-box;
  border:1.5px dashed color-mix(in srgb,var(--mn-inc) 60%,transparent);border-bottom:0;border-radius:5px 5px 2px 2px;pointer-events:none}
:root[data-theme] body.adm:not(.authbg) .mn-ghl{white-space:nowrap}
/* 📈 B2 pace chart + B3 day picker — one scrub area, a guide line, a readout */
:root[data-theme] body.adm:not(.authbg) .mn-pace{font-size:13px;color:var(--mut);line-height:1.45}
:root[data-theme] body.adm:not(.authbg) .mn-pace b{color:var(--txt);font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-pace b.mn-up{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .mn-pace b.mn-dn{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .mn-scrub{position:relative;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none;border-radius:10px;padding:2px 0 0}
:root[data-theme] body.adm:not(.authbg) .mn-scrub:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
:root[data-theme] body.adm:not(.authbg) .mn-pc{position:relative;height:96px}
:root[data-theme] body.adm:not(.authbg) .mn-pc svg{display:block;width:100%;height:100%;overflow:visible}
:root[data-theme] body.adm:not(.authbg) .mn-pc path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
:root[data-theme] body.adm:not(.authbg) .mn-pl-cur{stroke:var(--mn-inc);stroke-width:2.5}
:root[data-theme] body.adm:not(.authbg) .mn-pl-prev{stroke:var(--mut);stroke-width:1.5;stroke-dasharray:5 4;opacity:.8}
:root[data-theme] body.adm:not(.authbg) .mn-pl-proj{stroke:var(--mn-inc);stroke-width:2;stroke-dasharray:1 5;opacity:.75}
:root[data-theme] body.adm:not(.authbg) .mn-pdot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mn-inc);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
:root[data-theme] body.adm:not(.authbg) .mn-db{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;align-items:end;height:48px;margin-top:10px}
:root[data-theme] body.adm:not(.authbg) .mn-db i{display:block;min-width:0;border-radius:2px 2px 1px 1px;background:color-mix(in srgb,var(--mn-inc) 30%,var(--raised))}
:root[data-theme] body.adm:not(.authbg) .mn-db i.best{background:color-mix(in srgb,var(--mn-inc) 70%,var(--raised))}
:root[data-theme] body.adm:not(.authbg) .mn-db i.fut{height:2px!important;background:var(--line2)}
:root[data-theme] body.adm:not(.authbg) .mn-db i.sel{background:var(--mn-inc);box-shadow:0 0 0 1.5px var(--card),0 0 0 3px var(--mn-inc)}
:root[data-theme] body.adm:not(.authbg) .mn-dl{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:16px;margin-top:3px}
:root[data-theme] body.adm:not(.authbg) .mn-dl span{grid-row:1;justify-self:center;font-size:11px;line-height:16px;color:var(--mut);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .mn-guide{position:absolute;top:0;bottom:19px;width:1.5px;margin-left:-.75px;background:var(--txt);opacity:.28;pointer-events:none}
:root[data-theme] body.adm:not(.authbg) .mn-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-key i{display:inline-block;width:16px;height:0;margin-right:6px;vertical-align:middle;border-top:2.5px solid var(--mn-inc)}
:root[data-theme] body.adm:not(.authbg) .mn-key i.prev{border-top:1.5px dashed var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-key i.proj{border-top:2px dotted var(--mn-inc)}
:root[data-theme] body.adm:not(.authbg) .mn-read{font-size:13px;line-height:1.5;padding:8px 12px;border-radius:12px;background:var(--raised);min-height:46px;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-read .mn-rs{display:block;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-read .mn-rs b{color:var(--txt)}
/* 💬 C3 sentence · 📊 C1 tiles · 🔮 C2 forecast (Overview polish C, 2026-10-18) */
:root[data-theme] body.adm:not(.authbg) .mn-up{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .mn-dn{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .mn-sum{margin:0 0 12px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-size:14px;line-height:1.55}
:root[data-theme] body.adm:not(.authbg) .mn-sum b{font-weight:700}
:root[data-theme] body.adm:not(.authbg) .mn-sum a.mn-sn{color:var(--txt);font-weight:650;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
:root[data-theme] body.adm:not(.authbg) .mn-sum a.mn-sn:hover{text-decoration-color:currentColor}
:root[data-theme] body.adm:not(.authbg) .mn-sum .mn-up,:root[data-theme] body.adm:not(.authbg) .mn-sum .mn-dn{font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-sks .skel{padding:0}
:root[data-theme] body.adm:not(.authbg) .mn-sks .skel i{width:72%}
:root[data-theme] body.adm:not(.authbg) .mn-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 12px}
@media (max-width:760px){ :root[data-theme] body.adm:not(.authbg) .mn-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
:root[data-theme] body.adm:not(.authbg) button.mn-kpi,:root[data-theme] body.adm:not(.authbg) .mn-kpi.mn-skk{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:84px;margin:0;padding:12px 14px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--txt);font:inherit;text-align:left;cursor:pointer;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.mn-kpi:hover{border-color:var(--line2);background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) .mn-kpi.mn-skk .skel{padding:0;width:100%}
:root[data-theme] body.adm:not(.authbg) .mn-kl{font-size:12.5px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
:root[data-theme] body.adm:not(.authbg) .mn-kv{font-size:21px;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-kv small{font-size:12px;font-weight:500;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-kx{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) #mnBody .mn-card{scroll-margin-top:150px}
@media (max-width:560px){ :root[data-theme] body.adm:not(.authbg) #mnBody .mn-card{scroll-margin-top:190px} }
:root[data-theme] body.adm:not(.authbg) .mn-fc{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:var(--raised);font-size:13px;line-height:1.5}
:root[data-theme] body.adm:not(.authbg) .mn-fc b{font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-fc .mn-fcs{color:var(--mut);font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .mn-fc .mn-fcs b{color:var(--txt)}
/* 🧑‍🏫 polish D — sort switch · outlier chips · red edge under target · › · long-press menu · totals row */
:root[data-theme] body.adm:not(.authbg) .mn-tseg{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
:root[data-theme] body.adm:not(.authbg) .mn-tseg::-webkit-scrollbar{display:none}
:root[data-theme] body.adm:not(.authbg) .mn-tseg button{white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) #mnBody button.mn-tr{grid-template-columns:36px minmax(0,1fr) auto 12px;position:relative;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
:root[data-theme] body.adm:not(.authbg) button.mn-tr.low::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--bad)}
:root[data-theme] body.adm:not(.authbg) .mn-chev{font-size:18px;line-height:1;color:var(--mut);justify-self:end}
:root[data-theme] body.adm:not(.authbg) button.mn-tr:hover .mn-chev{color:var(--txt)}
:root[data-theme] body.adm:not(.authbg) .mn-new{font-size:11px;font-weight:700;letter-spacing:.2px;padding:1px 7px;border-radius:999px;color:var(--mn-card);border:1px solid color-mix(in srgb,var(--mn-card) 45%,transparent)}
:root[data-theme] body.adm:not(.authbg) .sc-tag.mn-hot{background:var(--ok-soft);color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .mn-ttot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:12px 4px 2px;border-top:2px solid var(--line2);font-size:13px}
:root[data-theme] body.adm:not(.authbg) .mn-ttot span{color:var(--mut);font-variant-numeric:tabular-nums}
.mn-tmenu{position:fixed;z-index:50;min-width:190px;padding:6px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);box-shadow:var(--e3,0 12px 32px rgba(0,0,0,.35));
  display:flex;flex-direction:column;gap:2px}
.mn-tmenu .mn-tmh{font-size:12px;font-weight:700;color:var(--mut);padding:6px 10px 4px}
:root[data-theme] body.adm:not(.authbg) .mn-tmenu button.mn-tmi{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:auto;min-height:44px;padding:0 12px;margin:0;border:0;border-radius:10px;
  background:none;color:var(--txt);font:inherit;font-size:14px;font-weight:550;text-align:left;cursor:pointer;box-shadow:none;filter:none}
:root[data-theme] body.adm:not(.authbg) .mn-tmenu button.mn-tmi:hover,:root[data-theme] body.adm:not(.authbg) .mn-tmenu button.mn-tmi:focus-visible{background:var(--hover);color:var(--txt);outline:none}
:root[data-theme] body.adm:not(.authbg) button.mn-mb.on span{color:var(--txt);font-weight:700}
:root[data-theme] body.adm:not(.authbg) button.mn-mb:hover i{filter:brightness(1.1)}
/* 💵 cash / 💳 card mini-bar + legend */
:root[data-theme] body.adm:not(.authbg) .mn-cc{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--raised);gap:2px}
:root[data-theme] body.adm:not(.authbg) .mn-cc b{display:block;height:100%;border-radius:3px}
:root[data-theme] body.adm:not(.authbg) :is(.mn-cc b,.mn-dot).mn-k-cash{background:var(--mn-inc)}
:root[data-theme] body.adm:not(.authbg) :is(.mn-cc b,.mn-dot).mn-k-card{background:var(--mn-card)}
:root[data-theme] body.adm:not(.authbg) .mn-ccl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-size:13px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-ccl b{color:var(--txt);font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) .mn-ccl small{font-size:12px}
:root[data-theme] body.adm:not(.authbg) .mn-ccl .mn-ccn{margin-left:auto}
/* split bar */
:root[data-theme] body.adm:not(.authbg) .mn-split{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .mn-split b{display:block;height:100%}
:root[data-theme] body.adm:not(.authbg) .mn-split{gap:2px}
:root[data-theme] body.adm:not(.authbg) .mn-split b.sal,:root[data-theme] body.adm:not(.authbg) .mn-dot.sal{background:var(--mn-sal)}
:root[data-theme] body.adm:not(.authbg) .mn-split b.sch,:root[data-theme] body.adm:not(.authbg) .mn-dot.sch{background:var(--mn-sch)}
:root[data-theme] body.adm:not(.authbg) .mn-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
:root[data-theme] body.adm:not(.authbg) .mn-facts{display:flex;flex-direction:column;gap:6px}
:root[data-theme] body.adm:not(.authbg) .mn-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13.5px;
  padding:6px 0;border-bottom:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .mn-facts > div:last-child{border-bottom:0}
:root[data-theme] body.adm:not(.authbg) .mn-facts > div > span{color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .mn-facts > div > b{text-align:right;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
:root[data-theme] body.adm:not(.authbg) .mn-facts small{font-size:12px;color:var(--mut);font-weight:500}
:root[data-theme] body.adm:not(.authbg) .mn-bar{height:10px}
/* teacher rows */
:root[data-theme] body.adm:not(.authbg) button.mn-tr{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:56px;
  padding:8px 4px;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--txt);font:inherit;text-align:left;cursor:pointer;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.mn-tr:hover{background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) .mn-tr .ss-ava{width:36px;height:36px;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .mn-tn{display:flex;flex-direction:column;gap:3px;min-width:0}
:root[data-theme] body.adm:not(.authbg) .mn-tnm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
:root[data-theme] body.adm:not(.authbg) .mn-tnm > b{font-size:14.5px;font-weight:650;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .mn-tm{font-size:12px;color:var(--mut);line-height:1.35}
:root[data-theme] body.adm:not(.authbg) .mn-tb{display:block;height:4px;border-radius:2px;background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .mn-tb i{display:block;height:100%;border-radius:2px;background:color-mix(in srgb,var(--mn-inc) 55%,var(--raised))}
:root[data-theme] body.adm:not(.authbg) .mn-tv{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
:root[data-theme] body.adm:not(.authbg) .mn-tv b{font-size:16px;font-variant-numeric:tabular-nums}

/* =========================================================================
   📝 STUDY v2 (migrate-study-v2) — group exam verdict chips (admin Watch › Study)
   + the teacher's "due tomorrow" line. Meaning colours use the ink tokens so the
   chip text stays ≥ 4.5 on its tint in both themes.
   ========================================================================= */
.st-chip.st-v.ok{color:var(--ok-ink,var(--ok))}
.st-chip.st-v.rev{color:var(--warn-ink,var(--warn));border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.st-chip.st-v.week{color:var(--bad-ink,var(--bad));border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.st-tmr{margin-top:4px;font-size:12px}

/* ===================== 🔍 SEARCH — not started yet (migrate-search-v1) =====================
   Admission leads + 🌱 new beginners in the desk search and the admin ⌘K palette,
   and leadCard()'s read-only details. */
.omni-drop .om-head{font-size:11.5px;font-weight:700;color:var(--mut);padding:8px 10px 4px}
.omni-drop .om-head:first-child{padding-top:4px}
.pill.ld-pill{background:var(--warn-soft, rgba(217,119,6,.14));color:var(--warn-ink, var(--warn, #b45309));border:0;font-weight:700}
.ld-card{display:grid;gap:8px;margin:6px 0 10px}
.ld-card .ld-st{font-weight:700;padding:10px 12px;border-radius:12px;background:var(--warn-soft, rgba(217,119,6,.12));color:var(--warn-ink, var(--txt))}
.ld-card .ld-r{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--line, rgba(127,127,127,.18))}
.ld-card .ld-r b{text-align:right;overflow-wrap:anywhere;font-weight:600}
.ld-card .ld-acts{display:flex;gap:8px;margin-top:4px}
.ld-card .ld-acts a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:12px;text-decoration:none}

/* ===================== ✏️ EDIT PENCIL — top of every student window (migrate-leadedit-v1) =====================
   Desk card (.dk-pen beside ✕), admin card (.sc-pen beside ✕), the not-started card (.ld-pen,
   top-right of the dialog) and the teacher sheet (.ss-pen at the end of the name row). One shape:
   a 36 px square, radius 12, secondary look — it opens the same Edit form as the footer button. */
button.ds-pen{width:36px;height:36px;min-height:36px;padding:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;background:var(--raised, rgba(127,127,127,.12));color:var(--txt);border:1px solid var(--line, rgba(127,127,127,.22));
  box-shadow:none;cursor:pointer;flex:0 0 auto}
button.ds-pen:hover{background:var(--hover, rgba(127,127,127,.2))}
button.ds-pen:focus-visible{outline:3px solid var(--acc-ring, rgba(79,70,229,.45));outline-offset:2px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.ds-pen{width:36px;height:36px;min-height:36px;padding:0;border-radius:12px;
  background:var(--raised);color:var(--txt);border:1px solid var(--line);box-shadow:none;font-size:16px}
.dk-pen{position:absolute;top:12px;right:56px;z-index:2}
#dkCard .dk-id{padding-right:96px}
.sc-pen{position:absolute;top:12px;right:64px;z-index:2}
.sc-top .sc-hd{padding-right:110px}
.modal{position:relative}
.ld-pen{position:absolute;top:14px;right:14px;z-index:2}
.modal:has(.ld-pen) > h3{padding-right:48px}
.ss-id .ss-pen{margin-left:auto}

/* ===================================================================
   🏠 ADMIN HOME v3 (migrate-adminhome-v3, decided with Jasurbek 2026-10-06,
   mockups docs/plans/mockups/admin-home-v3/): three numbers · ✅ To do
   (most urgent + More) · 📝 My notes button · 💵 Desk today · 🛍 Orders ·
   📰 Today (3 + More). Phone = one column; ≥900px two columns. Prefix :root[data-theme] body.adm:not(.authbg):not(.ds0) =
   body.adm:not(.authbg):not(.ds0) (one class over the DS block). Data marks
   use meaning colours — the night palette greys every feature chip, which
   once made the Money bars and the Collection bar invisible.
   =================================================================== */
/* ↻ on the title row; the date is the sub-line */
:root[data-theme] body.adm:not(.authbg):not(.ds0) .ad-head .pg-head{position:relative;padding-right:52px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .ad-head #dashReload{position:absolute;right:0;top:50%;transform:translateY(-50%);display:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0)[data-adsec="home"] .ad-head #dashReload{display:inline-grid}
/* three numbers */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
  min-height:0;height:auto;padding:12px 14px;border-radius:18px;text-align:left;font-weight:400;color:var(--txt);
  background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim);white-space:normal}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st:hover:not(:disabled){border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st.off{opacity:.7}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sl{font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sb{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .st-warn .ah-sb{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .st-ok .ah-sb{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ss{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--mut);line-height:1.35}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ss b{color:var(--txt);font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sx{font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sx.bad{color:var(--bad-ink,var(--bad));font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-pp{font-weight:600}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ok-t{color:var(--ok-ink,var(--ok));font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .bad-t{color:var(--bad-ink,var(--bad));font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-dir{align-self:flex-start;margin:2px 0 0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-bar{position:relative;display:block;height:8px;margin:6px 0 4px;border-radius:999px;background:var(--line2)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--warn)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st.st-ok .ah-bar i{background:var(--ok)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--txt);opacity:.7;border-radius:2px}
@media (max-width:899px){
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip{gap:8px;margin:0 0 12px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip button.ah-st{padding:10px 8px;gap:2px;border-radius:14px;align-items:center;text-align:center}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sl{font-size:11.5px;max-width:100%}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sb{font-size:20px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-bar{width:100%;height:4px;margin:3px 0 1px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-ss{justify-content:center;font-size:11px;gap:2px 6px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-ss .ah-sx{flex-basis:100%;text-align:center}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sx{font-size:11px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-st .ah-dir{align-self:center;font-size:10.5px;padding:1px 6px}
}
/* columns */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-colA, :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-colB{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:900px){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-cols{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start} }
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-col{margin:0;padding:16px;border-radius:18px;background:var(--sheen),var(--card);box-shadow:var(--rim);min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-col[hidden]{display:none !important}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-col .ah-h{display:flex;align-items:center;gap:8px;margin:0 0 10px}
@media (max-width:699px){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-col{padding:12px} }
/* ✅ To do + 🛍 Orders rows */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nl{display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-nr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;min-height:58px;height:auto;padding:10px 12px 10px 10px;border-radius:14px;text-align:left;font-weight:400;font-size:14px;color:var(--txt);
  background:var(--raised);border:1px solid transparent;box-shadow:none;white-space:normal}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-nr:hover:not(:disabled){border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-nr.top{min-height:68px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-nr.bad{background:color-mix(in srgb,var(--bad) 9%,var(--card));border-color:color-mix(in srgb,var(--bad) 28%,transparent);box-shadow:inset 3px 0 0 var(--bad)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ni{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--card);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nt{display:flex;flex-direction:column;gap:2px;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nt b{display:flex;align-items:baseline;gap:6px;font-size:14.5px;font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nt small{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nr.bad .ah-nt small{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nn{font-style:normal;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nr.bad .ah-nn{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nv{display:inline-grid;place-items:center;min-width:72px;height:36px;padding:0 12px;border-radius:12px;
  font-size:13px;font-weight:700;background:var(--card);color:var(--acc);box-shadow:inset 0 0 0 1px var(--line2)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nr.bad .ah-nv{background:var(--danger,#dc2626);color:#fff;box-shadow:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-more{width:100%;margin:10px 0 0;justify-content:center;gap:8px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-mr{font-size:12px;font-weight:700;color:var(--bad-ink,var(--bad))}
/* 📝 My notes button */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-ntb{display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:12px;
  width:100%;min-height:64px;height:auto;padding:12px 14px 12px 12px;border-radius:18px;text-align:left;font-size:15px;font-weight:700;color:var(--txt);
  background:var(--sheen),var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-ntb:hover:not(:disabled){border-color:var(--line2);filter:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ntn{min-width:30px;height:28px;padding:0 9px;border-radius:999px;display:inline-grid;place-items:center;
  font-size:13px;font-weight:800;background:var(--acc-soft,var(--raised));color:var(--acc)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ntn:empty{visibility:hidden}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nc{color:var(--mut);display:grid;place-items:center}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-nc .ico{width:18px;height:18px}
/* 💵 Desk today */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-rows{display:flex;flex-direction:column}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-row + .ahd-row{border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-row .ss-ava{width:36px;height:36px;font-size:13px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-who{display:flex;flex-direction:column;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-who small{font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-m{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:13px;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-m b{font-size:15px}
/* 📰 Today: one line per event, filters only after More */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-ff{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-ff .tu-chip.on{background:var(--acc);color:#fff;border-color:transparent}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr{align-items:center}
@media (max-width:699px){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-ff{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-ff .tu-chip{flex:0 0 auto;white-space:nowrap} }
/* 📝 notes sheet: list → view → edit */
:root[data-theme] body.adm:not(.authbg):not(.ds0) .ls-sheet.nt-sheet{max-width:600px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-sh{display:flex;flex-direction:column;gap:12px;min-height:min(70vh,560px)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-hd > b{font-size:17px;display:flex;align-items:center;gap:8px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-c{font-size:13px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--acc-soft,var(--raised));color:var(--acc)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-x{width:44px;padding:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-new{width:100%}
:root[data-theme] body.adm:not(.authbg):not(.ds0) input.nt-q{width:100%}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-rows{display:flex;flex-direction:column;max-height:58vh;overflow:auto;margin:0 -4px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;height:auto;
  padding:8px 6px;border:0;border-radius:12px;background:transparent;box-shadow:none;text-align:left;font-weight:400;color:var(--txt)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-row + button.nt-row{border-top:1px solid var(--line);border-radius:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-row:hover:not(:disabled){background:var(--hover,var(--raised));filter:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-rt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-rt small{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-rw{font-size:12px;color:var(--mut);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-empty{padding:28px 0;text-align:center}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-vt{font-size:20px;font-weight:800;margin:4px 0 0;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-vb{flex:1;font-size:15.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-vb a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;font-weight:600}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-act{display:flex;gap:10px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .nt-act > button{flex:1}
:root[data-theme] body.adm:not(.authbg):not(.ds0) button.nt-del{color:var(--danger,#dc2626)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) input.nt-ti{width:100%;font-weight:700}
:root[data-theme] body.adm:not(.authbg):not(.ds0) textarea.nt-bd{width:100%;min-height:220px;flex:1;resize:vertical;line-height:1.5}

/* ===================================================================
   🏠 ADMIN HOME — UX pass (docs/plans/2026-10-07-admin-home-ux-design.md):
   ⚡ saved-copy strip + lock, 🆕 "since you last looked" tags + new 📰
   rows, 📋 the Decide-tasks sheet (at-). Prefix as the v3 block.
   =================================================================== */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 12px;padding:6px 8px 6px 14px;
  border-radius:12px;font-size:13.5px;font-weight:600;color:var(--txt);background:var(--raised);border:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar[hidden]{display:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar > span:last-of-type{flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar.off{color:var(--warn-ink,var(--warn));background:color-mix(in srgb,var(--warn) 10%,var(--card));border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar .ah-spin{display:inline-block;animation:ahSpin 1s linear infinite}
@keyframes ahSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-stale-bar .ah-spin{animation:none} }
/* while the copy shows: actions are locked, the numbers stay readable */
:root[data-theme] body.adm.ah-stale:not(.authbg):not(.ds0) #p-dash #ahNeeds,
:root[data-theme] body.adm.ah-stale:not(.authbg):not(.ds0) #p-dash #orBox,
:root[data-theme] body.adm.ah-stale:not(.authbg):not(.ds0) #p-dash #hbFeed{pointer-events:none;opacity:.6}
/* 🆕 since you last looked */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-new{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;font-style:normal;white-space:nowrap;color:var(--acc);background:var(--acc-soft,var(--raised))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-new::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-new{flex-basis:100%;justify-content:center;max-width:max-content}
@media (max-width:899px){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-new{font-size:10.5px;padding:0 6px;height:20px;white-space:normal;height:auto;min-height:20px;text-align:center} }
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr.new{background:color-mix(in srgb,var(--acc) 7%,transparent);border-radius:10px;box-shadow:inset 3px 0 0 var(--acc)}
/* 📋 Decide tasks sheet */
:root[data-theme] body.adm:not(.authbg):not(.ds0) .ls-sheet.at-sheet{max-width:600px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-sh{display:flex;flex-direction:column;gap:12px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-rows{display:flex;flex-direction:column;gap:10px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-row{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--raised);border:1px solid var(--line);
  transition:opacity .2s ease, transform .2s ease}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-row.at-out{opacity:0;transform:translateX(40px)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-top{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-top .ss-ava{width:36px;height:36px;font-size:13px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-who{display:flex;flex-direction:column;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-who b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-late{font-size:12.5px;font-weight:600;color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-t{font-size:15.5px;font-weight:700;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-d{font-size:13.5px;color:var(--mut);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-btns > button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:auto;min-height:52px;padding:6px 4px;line-height:1.2;white-space:normal}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-btns > button small{font-size:11.5px;font-weight:600;opacity:.85}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-hint{text-align:center;font-size:12.5px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) .at-empty{justify-content:center;padding:20px 0}
/* night: red = action, so "new" is a neutral chip with a red dot */
:root[data-theme="dark"] body.adm:not(.authbg):not(.ds0) #p-dash .ah-new{color:var(--txt);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line2)}
:root[data-theme="dark"] body.adm:not(.authbg):not(.ds0) #p-dash .ah-new::before{background:var(--acc)}
:root[data-theme="dark"] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr.new{background:var(--raised);box-shadow:inset 3px 0 0 var(--txt)}

/* ===================================================================
   🏠 ADMIN HOME — polish 1 (2026-10-07): the three numbers share ONE shape
   (label · big number · one line · one chip row) — phones stack it centred,
   laptops put the number left and line + chips right; "ming" unit; goal label
   under the Paid mark; clean amber Paid in Day; laptop hover / focus; neutral
   notes count at night; Desk today header = 💵 · 💳 + Σ. Prefix as the v3 block.
   =================================================================== */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st{position:relative;justify-content:flex-start;gap:6px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sm{display:flex;flex-direction:column;gap:6px;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sd{display:flex;flex-direction:column;gap:6px;min-width:0}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-chip{display:inline-flex;align-items:center;height:22px;margin:0;padding:0 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;color:var(--txt);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-chip.ah-dir{align-self:auto;box-shadow:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-chip.bad{color:var(--bad-ink,var(--bad));background:color-mix(in srgb,var(--bad) 11%,transparent);box-shadow:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-u{margin-left:4px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--mut)}
/* the goal mark gets its label */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st .ah-bar{align-self:stretch;margin:4px 0 18px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-gl{position:absolute;top:calc(100% + 4px);transform:translateX(-50%);
  font-size:10.5px;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-gl.r{transform:translateX(calc(-100% + 6px))}
/* Day: a clean amber, green once the goal is reached (st-ok rules already) */
:root[data-theme="light"] body.adm:not(.authbg):not(.ds0) #p-dash .st-warn .ah-sb{color:#b45309}
:root[data-theme="light"] body.adm:not(.authbg):not(.ds0) #p-dash .ah-st.st-warn .ah-bar i{background:#f59e0b}
/* the arrow that says "this opens a page" — pointer devices only */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-go{position:absolute;top:10px;right:12px;font-size:15px;font-weight:700;line-height:1;color:var(--acc);
  opacity:0;transform:translateX(-4px);transition:opacity .15s ease, transform .15s ease;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st{cursor:pointer;transition:border-color .15s ease, background-color .15s ease}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st:hover:not(:disabled){border-color:var(--acc)}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st:hover .ah-go{opacity:1;transform:none}
}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st:focus-visible{outline:3px solid var(--acc-ring,var(--acc));outline-offset:2px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st:focus-visible .ah-go{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-go{transition:none} }
/* phones: one centred column, the bar right under the number */
@media (max-width:899px){
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip button.ah-st{gap:4px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sm{align-items:center;gap:4px;width:100%}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sd{align-items:center;gap:5px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sc{justify-content:center;gap:3px 4px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-chip{height:20px;padding:0 6px;font-size:10.5px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-u{display:block;margin:1px 0 0;font-size:10.5px;line-height:1}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-st .ah-bar{margin:3px 0 15px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-gl{font-size:9.5px;top:calc(100% + 3px)}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-go{display:none}
}
/* laptops: number left · line + chips right, the bar full width under them */
@media (min-width:900px){
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st{padding:14px 16px 14px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sm{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 14px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sm .ah-bar{order:3;flex-basis:100%;margin:6px 0 16px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sd{align-items:flex-end;text-align:right}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sd .ah-ss, :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-sc{justify-content:flex-end}
}
/* night: notes count is information, not an alarm */
:root[data-theme="dark"] body.adm:not(.authbg):not(.ds0) #p-dash .ah-ntn{background:var(--raised);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line2)}
/* 💵 Desk today header: what the drawer should hold */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-card .ah-h{align-items:flex-start}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-sum{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-sp{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--txt)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-sp b{font-weight:800;white-space:nowrap}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-st{font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap}

/* ===================================================================
   🏠 ADMIN HOME — polish 2 (2026-10-07): placeholders while the first
   load runs · emoji avatars on Desk today · two-line 📰 rows on phones ·
   a quiet ↻ on phones · count-up flash · the quiet-day line. Prefix as v3.
   =================================================================== */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sk{min-height:112px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sk .skel{padding:16px 14px}
@media (max-width:899px){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-strip .ah-sk{min-height:118px;border-radius:14px} }
/* the person's own emoji is their avatar */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ahd-row .ss-ava.ahd-emo{font-size:20px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;color:inherit}
/* count-up: the tile that changed glows once */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st.ah-flash{animation:ahFlash 1.2s ease-out}
@keyframes ahFlash{0%{box-shadow:var(--rim),0 0 0 3px var(--acc-ring,color-mix(in srgb,var(--acc) 35%,transparent))} 100%{box-shadow:var(--rim),0 0 0 0 transparent}}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash button.ah-st.ah-flash{animation:none} }
/* quiet day: To do shrinks to one calm line */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-needc.ah-quiet{padding:12px 14px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-needc.ah-quiet > .ah-h{display:none}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-qline{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px;color:var(--txt)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-qline .ok{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;
  color:var(--ok-ink,var(--ok));background:color-mix(in srgb,var(--ok) 14%,transparent)}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-qline .ok .ico{width:18px;height:18px}
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .ah-qline small{font-size:13px;color:var(--mut)}
/* 📰 rows: laptops one line; phones = name, then the detail on its own line */
:root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fd .muted{color:var(--mut)}
@media (max-width:699px){
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr{align-items:start}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr .hb-ft, :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fr .hb-fe{padding-top:1px}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fx{display:flex;flex-direction:column;gap:1px;white-space:normal}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fx > b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-fd{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root[data-theme] body.adm:not(.authbg):not(.ds0) #p-dash .hb-sep{display:none}
}
/* phones: pull-down already refreshes, so ↻ is a quiet icon (still a 36 px target) */
@media (max-width:899px){
  :root[data-theme] body.adm:not(.authbg):not(.ds0)[data-adsec="home"] .ad-head #dashReload{background:transparent;border-color:transparent;box-shadow:none;color:var(--mut)}
}

/* ===== 🧭 NAV FIX (2026-10-07, per Jasurbek) ==============================
   1 · laptops (teacher + desk): the tab row used to scroll UNDER the see-through
       top bar and collide with the search box. It is now part of the header —
       fixed right under the top bar, on the same frosted skin (60 + 52 px).
   2 · phones: no press flash / 1 px jump on nav taps — the liquid blob is the
       feedback, so the button never moves under it.
   3 · phones (all three cabinets): the bottom bar is a floating rounded dock
       (cards' radius, gutter and glass), the active tab = one rounded pill over
       icon + word — the same shape the liquid blob draws. */
:root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item,
:root[data-theme] body.liqnav .liq-c > *{-webkit-tap-highlight-color:transparent}
:root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bnav .bn-item:active,
:root[data-theme] body.liqnav .liq-c > button:active,
:root[data-theme] body.liqnav .liq-c > .tab:active{transform:none !important;filter:none !important}

@media (min-width:900px){
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) .topbar .tb-skin{border-bottom-color:transparent}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) .bnav{position:fixed;top:60px;left:0;right:0;z-index:39;
    max-width:none;margin:0;height:52px;box-sizing:border-box;align-items:flex-start;
    padding:6px max(18px,calc((100vw - 1240px)/2 + 18px)) 0;
    background:color-mix(in srgb,var(--top-bg) 94%,transparent);border:0;border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:none;border-radius:0}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) .shell{padding-top:128px}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) .boot-bar{top:122px}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) :is(.hm-side,.tu-side,.bal-side){top:130px;max-height:calc(100vh - 144px)}
}

@media (max-width:899px){
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bnav{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
    padding:5px;gap:2px;border-radius:22px;border:1px solid var(--line);
    background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    box-shadow:var(--rim),0 12px 30px -14px rgba(15,23,42,.38),0 2px 6px -2px rgba(15,23,42,.10)}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item{height:56px;min-height:0;padding:0 2px;gap:3px;justify-content:center;
    border-radius:16px;border:0;background:none;box-shadow:none;color:var(--mut);font-size:11px;font-weight:600}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item .bn-emo{font-size:21px;line-height:1;padding:0;background:none;box-shadow:none;border-radius:0}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item.active{color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,var(--card));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 18%,transparent)}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item.active .bn-emo{background:none;box-shadow:none;filter:none}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item .badge-n{top:3px;right:calc(50% - 25px)}
  :root[data-theme] body.liqnav .liq[data-k="bnav-ph"]{--liq-paint:color-mix(in srgb,var(--acc) 13%,var(--card))}
  /* clearances: the dock's top edge sits 76 px (+ safe area) above the screen's bottom */
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .ls-foot,
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .rs-pub,
  :root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .lb-row.me{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  body.tui.has-bnav .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:899px){
  :root[data-theme="dark"] body.tui.has-bnav:not(.authbg):not(.ds0) .bnav{background:#111111;border-color:#262626;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.9)}
  :root[data-theme="dark"] body.tui.has-bnav:not(.authbg):not(.ds0) .bn-item.active{color:var(--acc);background:rgba(239,68,68,.16);box-shadow:inset 0 0 0 1px rgba(239,68,68,.28)}
  :root[data-theme="dark"] body.liqnav .liq[data-k="bnav-ph"]{--liq-paint:#2b1414}
}
/* header skin nearly solid: content sliding under it read as "colliding" with the tabs / search */
:root[data-theme] body.tui.has-bnav:not(.authbg):not(.ds0) .topbar .tb-skin{background:color-mix(in srgb,var(--top-bg) 94%,transparent)}
:root[data-theme="dark"] body.tui.has-bnav:not(.authbg):not(.ds0) .topbar .tb-skin{background:#000000}
@media (min-width:900px){ :root[data-theme="dark"] body.tui.has-bnav:not(.authbg):not(.ds0):not(.adm) .bnav{background:#000000;border-bottom-color:#262626;-webkit-backdrop-filter:none;backdrop-filter:none} }

/* =====================================================================
   🔐 STAFF SIGN-IN (docs/plans/2026-10-08-admin-login-design.md, option A,
   per Jasurbek 2026-10-08). admin.html, teacher.html, quick.html — `#login.lg-wrap`
   on `body.lgbg` (the old `.auth` rules above are unused now). Speaks the cabinet's
   design system: Day = indigo on a soft violet wash, Night = black · white ·
   red with ORANGE warnings. Shapes = the 🧩 DS: fields 52 / 16 px / radius 12,
   primary 52, taps ≥ 44, 3 px ring. Everything is id-scoped (1,1,0+) so the
   global input / button / label baselines never leak in.
   ===================================================================== */
:root body.lgbg.authbg, html:has(body.lgbg.authbg){background:#f5f6f9}
:root body.lgbg.authbg{padding:0}   /* the global body has padding-bottom:60px — it made the sign-in scroll + left a grey strip */
:root[data-theme="dark"] body.lgbg.authbg, :root[data-theme="dark"]:has(body.lgbg.authbg){background:#000}
#login.lg-wrap{
  --lg-bg:#f5f6f9; --lg-card:#fff; --lg-field:#fff; --lg-line:#e4e6ee; --lg-line2:#d5d8e3;
  --lg-txt:#16181f; --lg-mut:#5f6575; --lg-acc:#4f46e5; --lg-ring:rgba(79,70,229,.18);
  --lg-go:linear-gradient(135deg,#4f46e5,#7c3aed); --lg-glow:0 14px 30px -14px rgba(79,70,229,.7);
  --lg-bad:#c62828; --lg-bad-soft:#fdecec; --lg-warn:#a16207; --lg-warn-soft:#fff6e0;
  --lg-sh:0 22px 60px rgba(20,22,40,.14);
  --lg-wash:radial-gradient(600px 380px at 15% -5%,rgba(124,58,237,.16),transparent 70%),
            radial-gradient(520px 360px at 100% 105%,rgba(79,70,229,.14),transparent 70%);
  min-height:100svh; display:flex; flex-direction:column; color:var(--lg-txt);
  background:var(--lg-wash),var(--lg-bg); font-family:var(--font);
}
:root[data-theme="dark"] #login.lg-wrap{
  --lg-bg:#000; --lg-card:#111111; --lg-field:#0a0a0a; --lg-line:#262626; --lg-line2:#3a3a3a;
  --lg-txt:#ffffff; --lg-mut:#a3a3a3; --lg-acc:#ef4444; --lg-ring:rgba(239,68,68,.30);
  --lg-go:#dc2626; --lg-glow:none;
  --lg-bad:#f97316; --lg-bad-soft:rgba(249,115,22,.12); --lg-warn:#f97316; --lg-warn-soft:rgba(249,115,22,.12);
  --lg-sh:none; --lg-wash:none;
}
#login .lg-theme{margin-left:auto;align-self:flex-start;width:44px;height:44px;padding:0;border-radius:12px;border:1px solid var(--lg-line);
  background:var(--lg-card);color:var(--lg-txt);font-size:18px;line-height:1;display:grid;place-items:center;box-shadow:none}
#login .lg-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
#login .lg-card{width:100%;max-width:400px;margin:0;background:var(--lg-card);border:1px solid var(--lg-line);
  border-radius:22px;box-shadow:var(--lg-sh);padding:28px 24px 20px;animation:panelIn var(--t-med) var(--ease)}
#login .lg-brand{display:flex;align-items:center;gap:12px}
#login .lg-brand img{width:44px;height:44px;object-fit:contain;flex:none}
#login .lg-bn{font-weight:800;font-size:17px;letter-spacing:.06em}
#login .lg-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;margin-top:3px;border-radius:8px;
  font-size:12px;font-weight:700;color:var(--lg-acc);background:color-mix(in srgb,var(--lg-acc) 12%,transparent)}
#login .lg-h{font-size:26px;line-height:1.2;font-weight:800;margin:24px 0 4px;letter-spacing:-.3px;color:var(--lg-txt)}
#login .lg-sub{margin:0 0 6px;color:var(--lg-mut);font-size:14px}
#login .lg-lab{display:block;font-size:13px;font-weight:600;letter-spacing:0;color:var(--lg-txt);margin:14px 0 6px}
#login .lg-f{display:flex;align-items:center;gap:10px;height:52px;padding:0 4px 0 14px;border:1px solid var(--lg-line2);
  border-radius:12px;background:var(--lg-field);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
#login .lg-f:focus-within{border-color:var(--lg-acc);box-shadow:0 0 0 3px var(--lg-ring)}
#login .lg-f.bad{border-color:var(--lg-bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--lg-bad) 18%,transparent)}
#login .lg-ic{font-size:17px;width:22px;text-align:center;opacity:.85;flex:none}
#login .lg-f input{flex:1;min-width:0;width:auto;height:100%;padding:0;margin:0;border:0;border-radius:0;outline:0;
  background:transparent;box-shadow:none;color:var(--lg-txt);font:inherit;font-size:16px;caret-color:var(--lg-acc)}
#login .lg-f input::placeholder{color:var(--lg-mut);opacity:.75}
#login .lg-f input:disabled{opacity:.6;cursor:wait}
#login .lg-eye{width:44px;height:44px;flex:none;padding:0;border:0;border-radius:10px;background:transparent;
  color:var(--lg-mut);font-size:18px;line-height:1;box-shadow:none;opacity:.7}
#login .lg-eye.on{opacity:1;background:color-mix(in srgb,var(--lg-acc) 12%,transparent)}
#login .lg-msgs:empty{display:none}
#login .lg-msg{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;
  font-size:14px;line-height:1.4;background:var(--lg-bad-soft);color:var(--lg-bad);animation:panelIn var(--t-fast) var(--ease)}
#login .lg-msg.warn{background:var(--lg-warn-soft);color:var(--lg-warn)}
#login .lg-msg b{display:block}
#login .lg-msg small{display:block;color:var(--lg-txt);opacity:.78;font-size:13px}
#login .lg-msg small:empty{display:none}
#login .lg-go{margin-top:20px;width:100%;height:52px;padding:0 16px;border:0;border-radius:12px;background:var(--lg-go);
  color:#fff;font:inherit;font-size:16px;font-weight:700;box-shadow:var(--lg-glow);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:filter var(--t-fast) var(--ease)}
#login .lg-go:hover:not(:disabled){filter:brightness(1.07)}
#login .lg-go:active{transform:none}
#login .lg-go:disabled{opacity:.75;cursor:not-allowed}
#login .lg-go.ok{background:#16a34a;box-shadow:none;opacity:1}
#login .lg-sp{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:lgSpin .8s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
#login .lg-foot{margin-top:14px;text-align:center;font-size:13px;color:var(--lg-mut)}
#login .lg-foot a{color:var(--lg-acc);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
#login .lg-ver{text-align:center;font-size:12px;color:var(--lg-mut);opacity:.75;padding:0 16px 16px}
#login :is(button,a,input):focus-visible{outline:3px solid var(--lg-ring);outline-offset:2px}
#login .lg-f input:focus-visible{outline:none}
/* browser autofill (saved username / password) paints the box light blue — keep the card's own field colour */
#login .lg-f input:-webkit-autofill,#login .lg-f input:-webkit-autofill:hover,#login .lg-f input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px var(--lg-field) inset;box-shadow:0 0 0 100px var(--lg-field) inset;
  -webkit-text-fill-color:var(--lg-txt);caret-color:var(--lg-acc);transition:background-color 99999s ease-out 0s}
#login .lg-f input:autofill{-webkit-box-shadow:0 0 0 100px var(--lg-field) inset;box-shadow:0 0 0 100px var(--lg-field) inset;
  -webkit-text-fill-color:var(--lg-txt);caret-color:var(--lg-acc);transition:background-color 99999s ease-out 0s}
@media (min-width:900px){
  #login .lg-card{max-width:420px;padding:36px 36px 24px}
  #login .lg-h{font-size:30px}
}
@media (max-height:700px){
  #login .lg-main{padding:12px 16px}
  #login .lg-card{padding:20px 20px 14px}
  #login .lg-h{margin-top:16px}
}
@media (prefers-reduced-motion: reduce){ #login .lg-sp{animation-duration:2.4s} #login .lg-card,#login .lg-msg{animation:none} }

/* =====================================================================
   👥 GROUPS v2 + 🗓 READABLE MONTHS + 🪪 STUDENT WINDOW v2 + 💳 RECORD SHEET
   (2026-10-08, docs/plans/2026-10-08-admin-groups-design.md — option B chosen by Jasurbek).
   Shared pieces (any cabinet): .gc-filt / .gc-pay / .pm-* . Admin pieces: gv- / sc- v2 / py- .
   Colour never stands alone: every state carries a word.
   ===================================================================== */
:root{--gv-top:76px}
/* ---- shared: card filters + ＋ month + readable months ---- */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-filt{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding:1px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-filt::-webkit-scrollbar{display:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-f{flex:none;height:36px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);color:var(--txt);font-size:13px;font-weight:600;box-shadow:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-f b{font-weight:800;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-f.on{background:var(--pri);border-color:transparent;color:#fff}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-f.on b{color:inherit;opacity:.85}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.gc-f.on{background:#fff;color:#000}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-pay{flex:none;height:36px;min-height:36px;padding:0 12px;border-radius:12px;border:0;
  background:var(--pri);color:#fff;font-size:13px;font-weight:700;box-shadow:none;white-space:nowrap;align-self:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gc-card{align-items:center}
.pm-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.pm-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:54px;padding:8px 14px}
.pm-row + .pm-row{border-top:1px solid var(--line)}
.pm-row[data-pmm]{cursor:pointer}
.pm-row[data-pmm]:hover{background:var(--hover,color-mix(in srgb,var(--txt) 4%,transparent))}
.pm-row[data-pmm]:focus-visible{outline:3px solid var(--acc-ring,var(--acc));outline-offset:-3px}
.pm-mo b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.pm-mo small{display:block;font-size:11.5px;color:var(--mut);line-height:1.3}
.pm-row.now .pm-mo small{color:var(--acc);font-weight:700}
.pm-what{min-width:0}
.pm-what small{display:block;color:var(--mut);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-amt{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;font-weight:800;font-size:14px}
.pm-amt.cash{background:var(--pay-cash-bg);color:var(--pay-cash-fg)}
.pm-amt.card{background:var(--pay-card-bg);color:var(--pay-card-fg)}
.pm-amt.bonus{background:var(--pay-bonus-bg);color:var(--pay-bonus-fg)}
.pm-amt.other{background:var(--pay-other-bg);color:var(--pay-other-fg)}
.pm-amt.debt{background:var(--pay-debt-bg,var(--raised));color:var(--pay-debt-fg,var(--txt))}
.pm-row.k-unpaid{background:color-mix(in srgb,var(--bad) 6%,var(--card))}
.pm-row.k-unpaid .pm-mo b,.pm-bad{color:var(--bad-ink,var(--bad))}
.pm-bad{font-weight:700;font-size:14px}
.pm-go{color:var(--mut);font-size:18px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.pm-pay{height:36px;min-height:36px;padding:0 14px;border-radius:12px;border:0;background:var(--pri);color:#fff;font-weight:700;font-size:13px;box-shadow:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.pm-more{display:block;width:100%;height:44px;min-height:44px;margin-top:6px;background:none;border:0;color:var(--acc);font-weight:700;font-size:13.5px;box-shadow:none}
.pm-empty{padding:14px;border:1px dashed var(--line2);border-radius:14px;text-align:center}
body.desk .pm-list{margin:10px 0 4px}

/* ---- admin: composer behind ✉️ on every width ---- */
:root[data-theme] body.tui.adm:not(.authbg) #p-manage .gc-openrow{display:none}
:root[data-theme] body.tui.adm:not(.authbg) #p-manage.gc-closed .gcomp{display:none}
:root[data-theme] body.tui.adm:not(.authbg).selmode #p-manage.gc-closed .gcomp{display:flex}
:root[data-theme] body.tui.adm:not(.authbg) #p-manage:not(.gc-closed) .gcomp{margin-bottom:14px}

/* ---- admin: the all-groups screen ---- */
.gv-split{display:grid;grid-template-columns:minmax(330px,380px) minmax(0,1fr);gap:20px;align-items:start}
.gv-side{position:sticky;top:var(--gv-top);max-height:calc(100vh - var(--gv-top) - 16px);overflow:auto;overscroll-behavior:contain;padding:1px 4px 16px 1px}
.gv-pane{min-width:0}
.gv-pick{padding:60px 20px;border:1px dashed var(--line2);border-radius:18px}
.gv-tools{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.gv-find{flex:1;min-width:0;display:block}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .gv-find input{width:100%;height:44px;margin:0}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-msg{width:44px;min-width:44px;padding:0;font-size:17px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gv-filt{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:1px}
.gv-filt::-webkit-scrollbar{display:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-f{flex:none;height:36px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);color:var(--txt);font-size:13px;font-weight:600;box-shadow:none;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-f b{font-weight:800;color:var(--mut)}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-f.on{background:var(--pri);color:#fff;border-color:transparent}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-f.on b{color:inherit;opacity:.85}
:root[data-theme="dark"] body.tui.adm:not(.authbg):not(.ds0) button.gv-f.on{background:#fff;color:#000}
.gv-list{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.gv-th{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 6px;background:var(--raised);border-top:1px solid var(--line)}
.gv-list > .gv-th:first-child{border-top:0}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn{flex:1;min-width:0;display:flex;align-items:center;gap:8px;justify-content:flex-start;height:44px;min-height:44px;
  padding:0 8px;background:none;border:0;color:var(--txt);box-shadow:none;font-size:14px;text-align:left}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn .muted{font-weight:500;font-size:12.5px;white-space:nowrap}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn:hover{background:var(--hover);filter:none}
.gv-tgo{font-style:normal;color:var(--mut);margin-left:auto}
.gv-tava.ss-ava{width:28px;height:28px;font-size:11px;flex:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tadd{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:12px;
  background:var(--card);border:1px solid var(--line2);color:var(--txt);font-size:17px;box-shadow:none}
.gv-row{display:flex;align-items:center;gap:12px;padding:12px 10px 12px 14px;min-height:64px;border-top:1px solid var(--line);cursor:pointer;position:relative}
.gv-row:hover{background:var(--hover,color-mix(in srgb,var(--txt) 4%,transparent))}
.gv-row:focus-visible{outline:3px solid var(--acc-ring,var(--acc));outline-offset:-3px}
.gv-row.sel{background:var(--acc-soft);box-shadow:inset 3px 0 0 var(--acc)}
.gv-row.cmp{padding:10px 8px 10px 14px;min-height:56px}
.gv-main{flex:1;min-width:0}
.gv-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gv-t b{font-size:15px;font-weight:700}
.gv-t h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.gv-lvl{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--acc-soft);color:var(--acc)}
.gv-meta{color:var(--mut);font-size:13px;margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
.gv-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.gv-tag{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--raised);color:var(--mut);border:1px solid var(--line)}
.gv-tag.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad));border-color:transparent}
.gv-tag.warn{background:var(--warn-soft);color:var(--warn-ink,var(--warn));border-color:transparent}
.gv-tag.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok));border-color:transparent}
.gv-pct{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;min-width:58px}
.gv-pct b{font-size:15px;font-weight:800;line-height:1.1}
.gv-pct span{font-size:11px;color:var(--mut)}
.gv-pct.mut b{color:var(--mut)}
.gv-bar{display:block;width:56px;height:5px;border-radius:5px;background:var(--seg,var(--raised));overflow:hidden;margin-top:2px}
.gv-bar i{display:block;height:100%;border-radius:5px;background:var(--ok)}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-more{flex:none;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:12px;
  background:transparent;border:1px solid var(--line2);color:var(--txt);font-size:16px;box-shadow:none}
.gv-go{color:var(--mut);font-size:20px;flex:none}
.gv-row.cmp .gv-go{display:none}
.gv-sh{padding:12px 14px 6px;font-size:12px;font-weight:700;color:var(--mut);background:var(--raised);border-top:1px solid var(--line)}
.gv-list > .gv-sh:first-child{border-top:0}
.gv-srow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);cursor:pointer;min-height:56px}
.gv-srow:hover{background:var(--hover)}
.gv-sava.ss-ava{width:32px;height:32px;font-size:11px;flex:none}
.gv-st.bad{color:var(--bad-ink,var(--bad))}.gv-st.mid{color:var(--warn-ink,var(--warn))}.gv-st.ok{color:var(--ok-ink,var(--ok))}
.gv-none{padding:10px 14px 12px;font-size:13px;border-top:1px solid var(--line)}
.gv-row.inact{opacity:.85}
/* ---- the group page ---- */
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-back{height:36px;min-height:36px;padding:0 4px;margin:0 0 8px;background:none;border:0;
  color:var(--acc);font-weight:700;font-size:14px;box-shadow:none}
.gv-gh{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.gv-gava{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;background:var(--acc-soft);color:var(--acc)}
.gv-gava.t0{background:#ede9fe;color:#5b21b6}.gv-gava.t1{background:#fef3c7;color:#92400e}.gv-gava.t2{background:#ffe4e6;color:#9f1239}
.gv-gava.t3{background:#ccfbf1;color:#115e59}.gv-gava.t4{background:#e0f2fe;color:#075985}.gv-gava.t5{background:#dcfce7;color:#166534}
:root[data-theme="dark"] .gv-gava{background:#1f1f1f !important;color:#fff !important}
.gv-ght{flex:1 1 220px;min-width:0}
.gv-nums{display:flex;gap:18px;flex-wrap:wrap}
.gv-nums > div{display:flex;flex-direction:column;min-width:52px}
.gv-nums b{font-size:20px;font-weight:800;line-height:1.15}
.gv-nums span{font-size:11.5px;color:var(--mut);white-space:nowrap}
.gv-nums .bad b{color:var(--bad-ink,var(--bad))}.gv-nums .warn b{color:var(--warn-ink,var(--warn))}
.gv-gacts{display:flex;gap:8px;flex-wrap:wrap}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .gv-gacts button.gv-more{width:36px}
.gv-ptools{display:flex;gap:8px;align-items:center;margin:12px 0}
.gv-ptools .grow{flex:1}
#p-manage .gc-groups{margin:12px 0 0}
/* ---- the ledger grid ---- */
.gv-ledger{border:1px solid var(--line);border-radius:18px;background:var(--card)}
.gv-ledger table{border-collapse:separate;border-spacing:0}
.gv-ledger thead th{height:40px;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--mut);text-align:center;padding:0 4px;white-space:nowrap}
.gv-ledger thead th small{font-weight:600;opacity:.75}
.gv-ledger thead th.mo-now{color:var(--acc)}
.gv-ledger thead th.mo-now::after{content:"";display:block;height:3px;border-radius:3px;background:var(--acc);margin:3px 12px 0}
.gv-ledger thead th.mo-now::before{display:none}
.gv-ledger td{padding:4px 3px;vertical-align:middle}
.gv-ledger td.now{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.gv-ledger .paycell{min-width:64px;width:64px;height:44px;padding:4px 3px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;cursor:pointer}
.gv-ledger .paycell .amt{font-size:14px;line-height:1.1}
.gv-ledger .paycell .dt{font-size:10px;margin-top:1px;font-weight:600;opacity:.8}
.gv-ledger .paycell .inst{position:absolute;top:2px;left:4px;margin:0;font-size:9px}
.gv-ledger .paycell::after{top:2px;right:3px;font-size:9px}
.gv-ledger .paycell.due{font-size:12.5px;font-weight:800}
.gv-ledger .paycell.unp{cursor:default;background:var(--bad-soft);color:var(--bad-ink,var(--bad));border:0;font-size:11.5px;font-weight:700}
.gv-ledger .paycell.none{cursor:default;background:none;border:0}
.gv-ledger .paycell.none::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line2)}
.gv-ledger td.stick-name{min-width:196px;max-width:240px;padding:6px 12px;text-align:left;border-right:1px solid var(--line)}
.gv-ledger th.stick-name{text-align:left;padding-left:12px;border-right:1px solid var(--line)}
.gv-nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gv-nm .namelink{font-size:14px;font-weight:700;cursor:pointer}
.gv-ns{display:flex;align-items:center;gap:8px;margin-top:3px;color:var(--mut);font-size:12px;white-space:nowrap}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-app{height:24px;min-height:24px;padding:0 7px;border-radius:7px;border:0;font-size:11.5px;font-weight:600;
  background:var(--raised);color:var(--mut);box-shadow:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-app.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-app.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))}
.gv-ledger tr.overdue td.stick-name{box-shadow:inset 3px 0 0 var(--bad)}
/* the sticky name is OPAQUE in every row state (Day zebra once let cells show through it) */
:root[data-theme] body.tui:not(.authbg) .grid-scroll tbody tr td.stick-name,
:root[data-theme] body.tui:not(.authbg) .grid-scroll tbody tr:nth-child(even) td.stick-name{background:var(--card)}
:root[data-theme] body.tui:not(.authbg) .grid-scroll tbody tr.overdue td.stick-name{background:color-mix(in srgb,var(--bad) 7%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .grid-scroll tbody tr.kicked td.stick-name{background:color-mix(in srgb,var(--mut) 10%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .grid-scroll tbody tr:hover td.stick-name{background:color-mix(in srgb,var(--mut) 8%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .grid-scroll thead th.stick-name{background:var(--raised,var(--card))}
:root[data-theme] body.tui.adm:not(.authbg) .gv-ledger tbody tr.overdue td:not(.stick-name){background:none}
.gv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mut);font-size:12px;margin:10px 4px 0}
.gv-legend span{display:inline-flex;align-items:center;gap:6px}
.gv-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.gv-legend i.cash{background:var(--pay-cash-bg);border-left:3px solid var(--pay-cash-edge)}
.gv-legend i.card{background:var(--pay-card-bg);border-left:3px solid var(--pay-card-edge)}
.gv-legend i.bonus{background:var(--pay-bonus-bg);border-left:3px solid var(--pay-bonus-edge)}
.gv-legend i.due{border:1.5px dashed var(--pay-due-edge)}
.gv-legend i.unp{background:var(--bad-soft)}
/* ⋯ menu */
.gv-menu{position:fixed;z-index:60;min-width:230px;max-width:calc(100vw - 16px);padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.35);display:flex;flex-direction:column}
.gv-menu.sheet{left:0;right:0;bottom:0;top:auto;min-width:0;max-width:none;border-radius:22px 22px 0 0;padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -10px rgba(0,0,0,.45);animation:tuSheetUp .22s var(--ease)}
.gv-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px;width:auto}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gv-menu button{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:44px;min-height:44px;
  padding:0 12px;background:none;border:0;border-radius:10px;color:var(--txt);font-weight:600;font-size:14px;box-shadow:none;text-align:left}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gv-menu button:hover{background:var(--hover);filter:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .gv-menu button.bad{color:var(--danger,#dc2626)}
.gv-menu .badge-n{margin-left:auto}
@media (max-width:1099px){
  .gv-tools #addTeacher{flex:none}
}
@media (max-width:700px){
  .gv-row{padding:12px 8px 12px 12px}
  .gv-gh{padding:14px;gap:12px}
  .gv-nums{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .gv-nums > div{min-width:0}
  .gv-gacts{width:100%}
  .gv-gacts button:not(.gv-more){flex:1}
  .gv-ledger td.stick-name{min-width:150px;max-width:46vw;padding:6px 8px}
  .gv-ledger .gv-ns span{display:none}
}

/* ---- 🪪 student window v2 ---- */
.sc-panel.v2 .sc-top{padding-bottom:12px}
.sc-st{margin-top:14px;border-radius:16px;padding:14px 16px 14px;border:1px solid transparent}
.sc-st.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.sc-st.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.sc-st.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.sc-st.mut{background:var(--raised);border-color:var(--line)}
.sc-st-big{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.sc-st.bad .sc-st-big{color:var(--bad-ink,var(--bad))}.sc-st.warn .sc-st-big{color:var(--warn-ink,var(--warn))}.sc-st.ok .sc-st-big{color:var(--ok-ink,var(--ok))}
.sc-st-sub{font-size:14px;margin-top:3px;color:var(--txt)}
.sc-st-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.sc-st-tag{height:36px;min-height:36px;padding:0 12px;border-radius:10px;border:0;
  background:var(--card);color:var(--txt);font-size:12.5px;font-weight:600;box-shadow:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.sc-st-tag.s2{color:var(--bad-ink,var(--bad))}
.sc-panel.v2 .sc-tabs{grid-template-columns:repeat(5,1fr)}
.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sc-two.one{grid-template-columns:1fr}
.sc-two > div{padding:10px 12px;border-radius:14px;background:var(--raised);border:1px solid var(--line);min-width:0}
.sc-two span{display:block;font-size:12px;color:var(--mut)}
.sc-two b{display:block;font-size:17px;font-weight:800;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-two small{display:block;font-size:12px;color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-two .ok b{color:var(--ok-ink,var(--ok))}.sc-two .warn b{color:var(--warn-ink,var(--warn))}.sc-two .bad b{color:var(--bad-ink,var(--bad))}
.sc-days{display:flex;flex-wrap:wrap;gap:6px}
.sc-dy{width:58px;height:46px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.sc-dy b{font-size:13px;font-weight:800}.sc-dy small{font-size:10.5px;opacity:.8}
.sc-dy.p{background:var(--ok-soft);color:var(--ok-ink,var(--ok))}
.sc-dy.a{background:var(--bad-soft);color:var(--bad-ink,var(--bad))}
.sc-none{font-size:13px;padding:6px 0}
.sc-line{font-size:13px;color:var(--mut);margin-top:12px}
.sc-panel.v2 .sc-lab{display:flex;justify-content:space-between;align-items:baseline}
.sc-panel.v2 .sc-lab .muted{font-weight:500}
.sc-panel.v2 .sc-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.sc-panel.v2 .sc-cats::-webkit-scrollbar{display:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .sc-panel.v2 button.sc-cat{flex:none;white-space:nowrap}
.sc-panel.v2 .sc-foot{align-items:stretch}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .sc-panel.v2 .sc-foot button.sc-pri{flex:1 1 auto;margin:0;min-height:52px;height:52px;border-radius:12px;
  font-size:15px;font-weight:700;min-width:0;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .sc-panel.v2 .sc-foot button.sc-fb{flex:0 0 auto;min-height:52px;height:52px;padding:0 14px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .sc-panel.v2 .sc-foot button.sc-fb.sc-grow{flex:1 1 auto}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .sc-panel.v2 .sc-foot button.sc-dots{flex:0 0 52px;width:52px;padding:0;font-size:18px}
.sc-panel.v2 .sc-pm{margin-top:4px}

/* ---- 💳 record payment sheet ---- */
.py{display:flex;flex-direction:column}
.py-hd{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.py-ava.ss-ava{width:44px;height:44px;font-size:15px;flex:none}
.py-ht{flex:1;min-width:0}.py-ht h3{margin:0;font-size:18px}.py-ht .muted{font-size:13px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.py-x{width:44px;min-width:44px;height:44px;padding:0;border-radius:12px;background:var(--raised);border:0;color:var(--mut);box-shadow:none}
.py-lab{display:block;font-size:13px;font-weight:700;color:var(--mut);margin:14px 2px 6px}
.py-months{display:flex;gap:8px;flex-wrap:wrap}
.py-m{height:44px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;font-weight:700;border:1px solid var(--line2)}
.py-m.on{background:var(--pri);color:#fff;border-color:transparent}
:root[data-theme="dark"] .py-m.on{background:#fff;color:#000}
.py-m.off{color:var(--mut);opacity:.6}
.py-hint{font-size:12px;color:var(--mut);margin:6px 2px 0}
.py-amt{display:flex;align-items:center;gap:8px;height:64px;padding:0 16px;border-radius:16px;border:1.5px solid var(--acc);background:var(--field,var(--card));box-shadow:0 0 0 3px var(--acc-soft)}
.py-amt.off{border-color:var(--line2);box-shadow:none;opacity:.55}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-amt input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;outline:0;
  font-size:28px;font-weight:800;color:var(--txt)}
.py-amt span{font-size:13px;color:var(--mut);font-weight:600;white-space:nowrap}
.py-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-quick button{height:40px;min-height:40px;padding:0;border-radius:12px;background:var(--card);border:1px solid var(--line2);color:var(--txt);
  font-weight:700;font-size:14px;box-shadow:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-quick button.on{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.py-meth{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-meth button{height:56px;min-height:56px;padding:0;border-radius:14px;background:var(--card);border:1px solid var(--line2);color:var(--txt);
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;font-weight:700;font-size:13px;box-shadow:none}
.py-meth button span{font-size:18px;line-height:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-meth button.on{border:2px solid var(--acc);background:var(--acc-soft);color:var(--acc)}
.py-date{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 2px 0;font-size:13px;font-weight:700;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-date input{width:auto;height:40px;margin:0;font-size:15px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.py-go{width:100%;height:52px;min-height:52px;margin-top:16px;border-radius:12px;font-size:15.5px;font-weight:800}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.py-go:disabled{opacity:.5}
/* GROUPS v2 — fit + finish */
#p-manage #crumb:empty{display:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .gv-gacts button{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py .py-amt input#pyAmt{border:0;background:none;box-shadow:none;height:100%;padding:0;font-size:28px;font-weight:800}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-addt{display:flex;width:100%;justify-content:center;height:52px;min-height:52px;border:0;border-top:1px solid var(--line);
  border-radius:0;background:var(--card);color:var(--acc);font-weight:700;font-size:14px;box-shadow:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-addt:hover{background:var(--hover);filter:none}
@media (max-width:700px){ .gv-row .gv-go{display:none} }
.gv-meta .nw{white-space:nowrap}
:root[data-theme] body.tui.adm:not(.authbg) .gv-ledger .namelink{color:var(--txt)}
:root[data-theme] body.tui.adm:not(.authbg) .gv-ledger .namelink:hover{color:var(--acc);text-decoration:underline}
.gv-ledger .paycell .inst{top:1px;left:3px;font-size:8.5px;opacity:.85}
.gv-ledger .paycell.cash,.gv-ledger .paycell.card,.gv-ledger .paycell.bonus,.gv-ledger .paycell.other{padding-top:7px}
.sc-panel .sc-foot{z-index:4} /* the ⋯ menu opens above the pinned tabs on short phones */
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn.sc-hl{box-shadow:inset 0 0 0 2px var(--acc);border-radius:12px}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .gv-menu button.bad{color:#f87171}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn b{flex:none;max-width:62%}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tn .muted{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   🧘 GROUPS — CALM PASS (round 4 of docs/plans/2026-10-08-admin-groups-design.md, per Jasurbek
   2026-10-09): teachers open one at a time, 🏆 Rating, the group page's numbers are the filters,
   money states follow the Overdue rule (grey = not late yet), the teacher card v2.
   Prefix P2 = :root[data-theme] body.tui.adm:not(.authbg):not(.ds0)
   ===================================================================== */
.gv-lwrap{display:block}
.gv-lwrap > .gv-list{margin-bottom:12px}
.gv-st{font-size:13px;font-weight:700;margin-top:2px;color:var(--mut)}
.gv-st.bad{color:var(--bad-ink,var(--bad))}.gv-st.ok{color:var(--ok-ink,var(--ok))}.gv-st.n{color:var(--mut)}
.gv-today{color:var(--acc);font-weight:700}
.gv-bar i{background:color-mix(in srgb,var(--mut) 70%,transparent)}
.gv-bar.ok i{background:var(--ok)}.gv-bar.warn i{background:#f59e0b}
.gv-pct{min-width:64px}
/* accordion */
.gv-acc{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:10px;overflow:hidden}
.gv-acc.open{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-ah{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;height:auto;padding:12px 12px 12px 14px;
  background:none;border:0;border-radius:0;box-shadow:none;color:var(--txt);text-align:left;justify-content:flex-start;font-weight:500}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-ah:hover{background:var(--hover);filter:none}
.gv-ah .gv-main{display:flex;flex-direction:column;align-items:flex-start}
.gv-an{font-size:15.5px;font-weight:700}
.gv-ah .gv-tava.ss-ava{width:40px;height:40px;font-size:13px}
.gv-chev{font-style:normal;width:28px;height:28px;display:grid;place-items:center;color:var(--mut);font-size:13px;flex:none;transition:transform .2s}
.gv-acc.open .gv-chev{transform:rotate(180deg);color:var(--acc)}
.gv-inner{border-top:1px solid var(--line)}
.gv-inner .gv-row{padding-left:22px}
.gv-inner > .gv-row:first-child{border-top:0}
.gv-afoot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--raised)}
.gv-afoot button{flex:1}
.gv-sh2{border:0;background:none;padding:14px 4px 6px}
.gv-lwrap > .gv-sh{border:0;background:none;padding:6px 4px}
/* 🏆 rating */
.gv-rkseg{margin:0 0 8px;display:inline-flex}
.gv-rnote{font-size:12.5px;margin:0 2px 10px}
.gv-rk{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;background:var(--seg,var(--raised));color:var(--mut)}
.gv-rk.m1{background:#fef3c7;color:#92400e}.gv-rk.m2{background:#e5e7eb;color:#374151}.gv-rk.m3{background:#fde7d4;color:#9a3412}
:root[data-theme="dark"] .gv-rk.m1{background:#3a2e0c;color:#fcd34d}:root[data-theme="dark"] .gv-rk.m2{background:#2a2a2a;color:#e5e5e5}:root[data-theme="dark"] .gv-rk.m3{background:#3a1f10;color:#fdba74}
.gv-row[data-tcard]{cursor:pointer}
/* the group page */
.gv-lvt{font-size:13px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-prg{height:28px;min-height:28px;padding:0 9px;border-radius:8px;border:0;background:var(--acc-soft);color:var(--acc);font-size:12.5px;font-weight:700;box-shadow:none;vertical-align:middle}
.gv-gh{display:block}
.gv-gh > *+*{margin-top:12px}
.gv-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-num{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:auto;min-height:60px;padding:8px 10px;
  border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--txt);box-shadow:none;text-align:left;font-weight:500}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-num:hover{background:var(--hover);filter:none}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-num.on{border:2px solid var(--acc);background:var(--acc-soft)}
.gv-num b{font-size:20px;font-weight:800;line-height:1.15}
.gv-num span{font-size:11.5px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gv-num.bad b{color:var(--bad-ink,var(--bad))}.gv-num.grey b{color:var(--mut)}.gv-num.ok b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-absl{display:flex;width:100%;justify-content:space-between;align-items:center;height:auto;min-height:40px;padding:0 12px;
  border-radius:12px;border:0;background:var(--warn-soft);color:var(--warn-ink,var(--warn));font-weight:700;font-size:13px;box-shadow:none}
.gv-gacts{display:grid;grid-template-columns:1fr 1fr 36px;gap:8px}
.gv-sfl{font-size:13px;color:var(--mut);margin:0 2px 10px}
.gv-sfind{margin:0 0 10px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) .gv-sfind input{width:100%;height:44px;margin:0}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-msg.on{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.gc-pay.q{background:var(--card);color:var(--acc);border:1px solid var(--line2)}
.gc-state.gv-st{font-weight:700}
/* ledger: name only, overdue vs not yet */
.gv-ledger .paycell.unp{cursor:pointer}
.gv-ledger .paycell.ny{background:none;border:0;color:var(--mut);font-size:11.5px;font-weight:600;cursor:pointer}
.gv-ledger td.stick-name{min-width:132px;max-width:180px}
@media (max-width:700px){ .gv-ledger td.stick-name{min-width:112px;max-width:128px;padding:6px 8px} .gv-ledger .gv-nm .namelink{font-size:13px;line-height:1.2} }
.gv-lg-bad{color:var(--bad-ink,var(--bad));font-weight:600}
/* student window — calm pass */
.sc-st.mut .sc-st-big{color:var(--txt)}
@keyframes scFlash{0%{box-shadow:0 0 0 3px var(--acc-ring,var(--acc))}100%{box-shadow:0 0 0 0 transparent}}
.sc-flash{animation:scFlash 1.2s ease-out;border-radius:16px}
@media (prefers-reduced-motion:reduce){.sc-flash{animation:none}}
.sc-days .sc-dy{background:none !important;border:0 !important;box-shadow:none !important;cursor:default}
.py-days{display:flex;gap:8px;flex-wrap:wrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-days button.py-d{height:36px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--txt);font-size:13px;font-weight:600;box-shadow:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-days button.py-d.on{background:var(--pri);color:#fff;border-color:transparent}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .py-days button.py-d.on{background:#fff;color:#000}
.py-other{display:flex;align-items:center;gap:10px;margin-top:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .py-other input{width:150px;height:44px;margin:0}
.py-derr{font-size:13px;color:var(--mut);font-weight:600}
.py-other[hidden]{display:none}
.pm-ny{color:var(--mut);font-weight:700}
/* 🧑‍🏫 teacher card v2 — one row = icon · label + one line · value + change */
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sr{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sr + .tc-sr{border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-si{width:36px;height:36px;flex:0 0 36px;border-radius:12px;font-size:18px}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-st{flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-st > b{font-size:14.5px;font-weight:700}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-st small{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:2px;font-size:12.5px;color:var(--mut);line-height:1.45}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-st .tc-bar{margin-top:8px}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sv{flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sv b{font-size:18px;font-weight:800}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sv.ok b{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sv.warn b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-sv.bad b{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-tr{padding:0;background:none;font-size:12px}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-bar b.grey{background:color-mix(in srgb,var(--mut) 70%,transparent)}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-gp{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-gp b{font-size:16px;font-weight:800}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-gp small{font-size:11px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .tc-bad{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .tc-panel.v2 .sc-foot .sc-grow{flex:1}
:root[data-theme] body.tui.adm:not(.authbg) #p-manage:not(.gc-closed) #gcCancel{display:block}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.sc-idb{height:36px;min-height:36px;padding:0 2px;border:0;background:none;box-shadow:none;vertical-align:middle}
.gv-acc.sc-hl{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}

/* ===================== 🧹 GROUPS — MINOR PASS (round 5, 2026-10-10) =====================
   Small things that cost attention: every group row shows ›, filter chips wrap, the teacher
   arrow is a real 36 px button, the phone group page uses the group name as the page title,
   0-tiles are dimmed, grid names on one line with a solid sticky edge, the student window's
   tags sit outside the money card, tab notes in words, and at NIGHT red is only for buttons. */
.gv-row .gv-go,.gv-row.cmp .gv-go{display:block}
.gv-filt{flex-wrap:wrap;overflow:visible}
.gv-chev{width:36px;height:36px;border-radius:12px;background:var(--raised);border:1px solid var(--line2);color:var(--txt);font-size:14px}
.gv-acc.open .gv-chev{border-color:var(--acc)}
.gv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.gv-who{color:var(--txt);font-weight:600}
/* phone group page: ‹ + group name as the page title, teacher · schedule as the sub-line */
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-tback{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;margin:0 6px 0 -6px;
  background:none;border:0;box-shadow:none;color:var(--acc);font-size:26px;line-height:1;vertical-align:-3px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) #adSub button.gv-subt{min-height:36px;padding:0;font-size:inherit;display:inline-flex;align-items:center}
.gv-lvline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-num.zero{opacity:.45;cursor:default}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.gv-num.zero:hover{background:var(--card)}
/* grid: a solid edge on the name column, empty future months */
.gv-ledger td.stick-name,.gv-ledger th.stick-name{box-shadow:6px 0 8px -6px rgba(0,0,0,.28);clip-path:inset(0 -14px 0 0)}
.gv-ledger .gv-nm .namelink{white-space:nowrap}
.gv-ledger .paycell.none::before{content:none}
/* student window: header lines, tags under the money card, tab notes in words */
.sc-sl1{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sl2{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.sc-st-tags{margin:10px 0 0}
body.adm button.sc-tab.has::after{content:none}
.sc-tn{display:block;font-size:10.5px;font-weight:700;line-height:1.1;color:var(--warn-ink,var(--warn));margin-top:1px}
.sc-since{margin:12px 2px 2px;font-size:13px}
/* record sheet: the bonus is its own quiet link */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.py-bonus{display:flex;margin:10px auto 0;height:36px;min-height:36px;padding:0 12px;background:none;border:0;
  box-shadow:none;color:var(--mut);font-weight:600;font-size:13.5px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.py-bonus:hover{color:var(--txt);background:var(--hover)}
/* NIGHT: red means "press this" — information goes white / grey */
:root[data-theme="dark"] body.tui.adm .gv-today,
:root[data-theme="dark"] body.tui.adm .pm-row.now .pm-mo small{color:var(--txt)}
:root[data-theme="dark"] body.tui.adm .gv-gh button.sc-link,
:root[data-theme="dark"] body.tui.adm #adSub button.gv-subt{color:var(--txt)}
:root[data-theme="dark"] body.tui.adm:not(.authbg):not(.ds0) .sc-idb .sc-id{background:#1f1f1f;color:#e5e5e5}
:root[data-theme="dark"] body.tui.adm:not(.authbg):not(.ds0) button.gv-prg{background:#1f1f1f;color:#e5e5e5}
.gd-msg p{margin:6px 0 8px;line-height:1.55;font-size:14.5px}

/* =====================================================================
   🪙 BUY COINS WITH DIAMONDS (migrate-diacoin-v1) — teacher Diamonds › Market
   card (#dxCard) + the admin rate card (#dxaCard). Sizes come from the DS
   (buttons 44 / lg 52, inputs 44 / 16 px); this only lays them out.
   ===================================================================== */
.dx-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.dx-pill{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border-radius:12px;
  background:var(--raised,var(--card2,rgba(127,127,127,.12)));border:1px solid var(--line,rgba(127,127,127,.25));
  font-weight:700;font-feature-settings:"tnum"}
.dx-eq{font-weight:800;color:var(--mut)}
.dx-have{font-size:13px}
.dx-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dx-step{display:inline-flex;align-items:center;gap:6px}
.dx-step button{min-width:44px;font-size:18px}
.dx-step input{width:76px;text-align:center;font-feature-settings:"tnum"}
.dx-sum{display:flex;flex-direction:column;gap:2px;font-size:14px}
.dx-sum b{font-feature-settings:"tnum"}
.dx-go{width:100%}
.dx-hist{margin-top:12px;border-top:1px solid var(--line,rgba(127,127,127,.25));padding-top:8px}
.dx-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;padding:4px 0}
.dxa-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.dxa-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.dxa-form input[type=number]{width:110px}
.dxa-on{flex-direction:row!important;align-items:center;gap:8px!important;min-height:44px;color:var(--txt)!important;font-size:14px!important}
.dxa-on input{width:20px;height:20px}

/* ==============================================================   🧾 OMR SCAN (migrate-omr-v1 · results.js + omrscan.js)
   The Results maker's "📷 Scan answer sheets" row + the paper picker sheet.
   The camera screen itself styles itself (omrscan.js, fixed dark camera look).
   ===================================================================== */
.rs-omr{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rs-omr[hidden]{display:none}
.rs-omr .rs-scan{flex:1 1 220px;min-height:52px;border-radius:12px;font-weight:700;font-size:15px}
.rs-omr .rs-paper{flex:0 0 auto}
.rs-omr .rs-hint{flex:1 1 100%;margin-top:0}
.rs-pp.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,120,255,.2)}
.rs-pp:disabled{opacity:.55;cursor:default}
.rs-ex-go{font-weight:800;color:var(--mut);flex:none}
.rs-pc.off{opacity:.45}
.rs-up{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;border:1px dashed var(--line);cursor:pointer;font-weight:700;margin-top:4px}
.rs-up:focus-within{outline:3px solid var(--acc);outline-offset:2px}
.rs-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#rsPapers{display:flex;flex-direction:column;gap:8px}

/* ===================================================================
   🗺 COURSE EDITOR (course map chunk 2, admin.html — More › 🗺 Courses + the step sheet)
   prefix ce-. Sizes follow the 🧩 DS: rows ≥ 44, controls 36/44, radius 12, tags 28/8.
   =================================================================== */
:root[data-theme] body.adm:not(.authbg) .ce-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
:root[data-theme] body.adm:not(.authbg) .ce-hb{display:flex;gap:8px;flex-wrap:wrap}
:root[data-theme] body.adm:not(.authbg) .ce-back{margin-bottom:10px}
:root[data-theme] body.adm:not(.authbg) .ce-note{font-size:13px;line-height:1.5;margin:6px 0}
:root[data-theme] body.adm:not(.authbg) .ce-miss{padding:12px 14px;border-radius:12px;background:var(--warn-soft,rgba(251,191,36,.12));color:var(--warn-ink,var(--txt));font-size:14px;line-height:1.5}
:root[data-theme] body.adm:not(.authbg) .ce-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:12px 0}
:root[data-theme] body.adm:not(.authbg) button.ce-cc{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:14px;text-align:left;
  border-radius:16px;color:var(--txt);font-weight:400;background:var(--sheen,none),var(--card);border:1px solid var(--line);box-shadow:var(--rim,none)}
:root[data-theme] body.adm:not(.authbg) button.ce-cc:hover:not(:disabled){border-color:var(--line2);background:var(--sheen,none),var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) .ce-cic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.adm:not(.authbg) .ce-ct{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
:root[data-theme] body.adm:not(.authbg) .ce-ct b{font-size:15px}
:root[data-theme] body.adm:not(.authbg) .ce-ct small{color:var(--mut);font-size:12.5px}
:root[data-theme] body.adm:not(.authbg) .ce-chev{color:var(--mut);font-size:20px;flex:none}
:root[data-theme] body.adm:not(.authbg) .ce-tag{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:600;
  background:var(--raised);color:var(--mut);border:1px solid var(--line);width:max-content;max-width:100%}
:root[data-theme] body.adm:not(.authbg) .ce-tag.ok{background:var(--ok-soft,rgba(52,211,153,.12));color:var(--ok-ink,var(--ok));border-color:transparent}
:root[data-theme] body.adm:not(.authbg) .ce-tag.warn{background:var(--warn-soft,rgba(251,191,36,.12));color:var(--warn-ink,var(--warn));border-color:transparent}
:root[data-theme] body.adm:not(.authbg) .ce-stars{margin-top:14px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .ce-sth{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
:root[data-theme] body.adm:not(.authbg) .ce-sls{display:flex;flex-wrap:wrap;gap:6px 14px}
:root[data-theme] body.adm:not(.authbg) .ce-sl{display:inline-flex;gap:6px;align-items:center;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .ce-grps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 12px;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .ce-gc{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;background:var(--raised);border:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .ce-blk{border:1px solid var(--line);border-radius:16px;padding:12px;margin:12px 0;background:var(--card)}
:root[data-theme] body.adm:not(.authbg) .ce-bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
:root[data-theme] body.adm:not(.authbg) .ce-bn{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .ce-bt{flex:1;min-width:120px;font-size:15px}
:root[data-theme] body.adm:not(.authbg) .ce-bact,:root[data-theme] body.adm:not(.authbg) .ce-mv{display:inline-flex;gap:4px;flex:none}
:root[data-theme] body.adm:not(.authbg) button.ce-ib{width:36px;min-width:36px;padding:0;justify-content:center}
:root[data-theme] body.adm:not(.authbg) button.ce-ib:disabled{opacity:.35}
:root[data-theme] body.adm:not(.authbg) .ce-steps{display:flex;flex-direction:column;gap:6px}
:root[data-theme] body.adm:not(.authbg) .ce-st{display:flex;align-items:center;gap:6px}
:root[data-theme] body.adm:not(.authbg) button.ce-sb{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;text-align:left;
  border-radius:12px;color:var(--txt);font-weight:400;background:var(--raised);border:1px solid var(--line);box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.ce-sb:hover:not(:disabled){border-color:var(--line2);background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) .ce-si{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:21px;overflow:hidden;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;background:var(--acc-soft)}
:root[data-theme] body.adm:not(.authbg) .ce-si img{width:100%;height:100%;object-fit:cover}
:root[data-theme] body.adm:not(.authbg) .ce-si.big{width:48px;height:48px;font-size:26px}
:root[data-theme] body.adm:not(.authbg) .ce-stx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
:root[data-theme] body.adm:not(.authbg) .ce-stx small{font-size:11.5px;color:var(--mut);letter-spacing:.02em}
:root[data-theme] body.adm:not(.authbg) .ce-stx b{font-size:14.5px;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .ce-tags{display:flex;flex-wrap:wrap;gap:4px}
:root[data-theme] body.adm:not(.authbg) .ce-add{margin-top:8px}
:root[data-theme] body.adm:not(.authbg) button.ce-addb{width:100%;min-height:52px;border-radius:16px;border:1.5px dashed var(--line2);background:transparent;color:var(--acc);font-weight:700;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.ce-addb:hover:not(:disabled){background:var(--acc-soft);filter:none}
/* the step sheet */
:root[data-theme] body.adm:not(.authbg) .ce-shh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
:root[data-theme] body.adm:not(.authbg) .ce-sht{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .ce-sht small{color:var(--mut);font-size:12px}
:root[data-theme] body.adm:not(.authbg) .ce-sht b{font-size:17px;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .ce-f{margin:12px 0}
:root[data-theme] body.adm:not(.authbg) .ce-f > label,:root[data-theme] body.adm:not(.authbg) .ce-fh label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
:root[data-theme] body.adm:not(.authbg) .ce-fh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
:root[data-theme] body.adm:not(.authbg) .ce-fh label{margin:0}
:root[data-theme] body.adm:not(.authbg) .ce-f input,:root[data-theme] body.adm:not(.authbg) .ce-f textarea,:root[data-theme] body.adm:not(.authbg) .ce-f select{width:100%}
:root[data-theme] body.adm:not(.authbg) .ce-kind,:root[data-theme] body.adm:not(.authbg) .ce-tk{display:flex;flex-wrap:wrap;width:100%;margin-bottom:8px}
:root[data-theme] body.adm:not(.authbg) .ce-kind button,:root[data-theme] body.adm:not(.authbg) .ce-tk button{flex:1 1 auto}
:root[data-theme] body.adm:not(.authbg) .ce-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
:root[data-theme] body.adm:not(.authbg) button.ce-ic,:root[data-theme] body.adm:not(.authbg) button.ce-k{min-height:44px;height:44px;padding:0;border-radius:12px;font-size:20px;
  background:var(--raised);border:1px solid var(--line);color:var(--txt);box-shadow:none}
:root[data-theme] body.adm:not(.authbg) button.ce-ic{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
:root[data-theme] body.adm:not(.authbg) button.ce-ic[aria-pressed="true"],:root[data-theme] body.adm:not(.authbg) button.ce-k[aria-pressed="true"],
:root[data-theme] body.adm:not(.authbg) button.ce-chip[aria-pressed="true"]{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
:root[data-theme="dark"] body.adm:not(.authbg) button.ce-k[aria-pressed="true"],:root[data-theme="dark"] body.adm:not(.authbg) button.ce-chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;box-shadow:none}
:root[data-theme] body.adm:not(.authbg) .ce-ph{margin-top:8px}
:root[data-theme] body.adm:not(.authbg) .ce-ph summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-size:13px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .ce-mat{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1.4fr) 36px;gap:6px;align-items:center;margin-bottom:6px}
:root[data-theme] body.adm:not(.authbg) .ce-parts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
:root[data-theme] body.adm:not(.authbg) button.ce-chip{min-height:36px;padding:0 12px;border-radius:12px;font-size:13px;background:var(--raised);border:1px solid var(--line);color:var(--txt);box-shadow:none}
:root[data-theme] body.adm:not(.authbg) .ce-slh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0}
:root[data-theme] body.adm:not(.authbg) .ce-cnt{display:inline-flex;align-items:center;gap:8px;font-size:14px}
:root[data-theme] body.adm:not(.authbg) .ce-all{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .ce-all select{width:auto}
:root[data-theme] body.adm:not(.authbg) .ce-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
:root[data-theme] body.adm:not(.authbg) .ce-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px;border-radius:12px;border:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .ce-row.nokey{border-color:var(--warn)}
:root[data-theme] body.adm:not(.authbg) .ce-rn{width:28px;text-align:center;font-weight:700;font-size:14px;color:var(--mut);flex:none}
:root[data-theme] body.adm:not(.authbg) .ce-row select{width:auto;flex:none}
:root[data-theme] body.adm:not(.authbg) .ce-keys{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) button.ce-k{width:40px;font-size:15px;font-weight:700}
:root[data-theme] body.adm:not(.authbg) .ce-wk{flex:1;min-width:140px;width:auto}
:root[data-theme] body.adm:not(.authbg) .ce-foot{position:sticky;bottom:-16px;margin:12px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--line);z-index:1}
:root[data-theme="dark"] body.adm:not(.authbg) .ce-foot{background:#111}
@media (max-width:560px){
  :root[data-theme] body.adm:not(.authbg) .ce-mat{grid-template-columns:minmax(0,1fr) 36px}
  :root[data-theme] body.adm:not(.authbg) .ce-mat select{grid-column:1}
  :root[data-theme] body.adm:not(.authbg) .ce-mat [data-mn],:root[data-theme] body.adm:not(.authbg) .ce-mat [data-mu]{grid-column:1 / -1}
  :root[data-theme] body.adm:not(.authbg) .ce-mat [data-mx]{grid-column:2;grid-row:1}
  :root[data-theme] body.adm:not(.authbg) .ce-keys{flex-basis:100%;padding-left:34px}
  :root[data-theme] body.adm:not(.authbg) .ce-wk{flex-basis:100%;margin-left:34px}
  :root[data-theme] body.adm:not(.authbg) .ce-st{align-items:stretch}
  :root[data-theme] body.adm:not(.authbg) .ce-mv{flex-direction:column}
}

/* ===================================================================
   🗺 COURSE MAP — the teacher's step cards (coursemap.js, course map chunk 3). prefix cm-.
   Done = green bar + stars · current = accent ring + ▶ Open lesson · locked = dimmed + 🔒.
   One card + a peek on phones (sideways scroll, opens on the current card); several on laptops.
   =================================================================== */
:root[data-theme] body.tui:not(.authbg) .cm-miss{padding:12px 14px;border-radius:12px;background:var(--warn-soft,rgba(251,191,36,.12));color:var(--warn-ink,var(--txt));font-size:14px;line-height:1.5}
:root[data-theme] body.tui:not(.authbg) .cm-head{margin-bottom:12px}
:root[data-theme] body.tui:not(.authbg) .cm-hrow{display:flex;align-items:center;gap:12px}
:root[data-theme] body.tui:not(.authbg) .cm-hic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-ring)}
:root[data-theme] body.tui:not(.authbg) .cm-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .cm-ht b{font-size:17px}
:root[data-theme] body.tui:not(.authbg) .cm-ht small{color:var(--mut);font-size:13px}
:root[data-theme] body.tui:not(.authbg) button.cm-ref{width:36px;min-width:36px;padding:0;justify-content:center}
:root[data-theme] body.tui:not(.authbg) .cm-prog{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 6px;font-weight:700;font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cm-prog small{color:var(--mut);font-weight:600}
:root[data-theme] body.tui:not(.authbg) .cm-bar{height:8px;border-radius:99px;background:var(--seg,var(--raised));overflow:hidden}
:root[data-theme] body.tui:not(.authbg) .cm-bar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .cm-q{margin-top:10px;padding:8px 12px;border-radius:12px;font-size:13px;background:var(--warn-soft,rgba(251,191,36,.12));color:var(--warn-ink,var(--txt))}
:root[data-theme] body.tui:not(.authbg) button.cm-go{width:100%;margin-top:12px;min-height:52px;justify-content:center;font-size:15px}
:root[data-theme] body.tui:not(.authbg) .cm-blk{margin:4px 0 16px}
:root[data-theme] body.tui:not(.authbg) .cm-bh{display:flex;align-items:baseline;gap:10px;margin:0 2px 8px}
:root[data-theme] body.tui:not(.authbg) .cm-bh b{font-size:15px}
:root[data-theme] body.tui:not(.authbg) .cm-bh small{color:var(--mut);font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .cm-path{display:flex;align-items:center;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;-webkit-overflow-scrolling:touch}
:root[data-theme] body.tui:not(.authbg) .cm-card{flex:0 0 min(78vw,250px);scroll-snap-align:center;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;
  background:var(--sheen,none),var(--card);border:1px solid var(--line);box-shadow:var(--rim,none);min-height:236px;position:relative;cursor:pointer}
:root[data-theme] body.tui:not(.authbg) .cm-card:focus-visible{outline:3px solid var(--acc-ring);outline-offset:2px}
:root[data-theme] body.tui:not(.authbg) .cm-card.cur{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-ring),var(--rim,none)}
:root[data-theme] body.tui:not(.authbg) .cm-card.lock{opacity:.6;cursor:default}
:root[data-theme] body.tui:not(.authbg) .cm-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
:root[data-theme] body.tui:not(.authbg) .cm-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:.06em;
  background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) .cm-card.done .cm-chip{background:var(--ok-soft,rgba(52,211,153,.14));color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg) .cm-card.lock .cm-chip{background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-kind{font-size:12px;font-weight:700;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-pic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:34px;overflow:hidden;background:var(--raised);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
:root[data-theme] body.tui:not(.authbg) .cm-pic img{width:100%;height:100%;object-fit:cover}
:root[data-theme] body.tui:not(.authbg) .cm-pic.big{width:52px;height:52px;font-size:28px;flex:none}
:root[data-theme] body.tui:not(.authbg) .cm-t{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cm-i{margin:0;font-size:13px;line-height:1.45;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root[data-theme] body.tui:not(.authbg) .cm-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:700;min-height:44px;justify-content:center}
:root[data-theme] body.tui:not(.authbg) .cm-foot.done{background:var(--ok-soft,rgba(52,211,153,.14));color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg) .cm-foot.skip{background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-foot.lock{background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) button.cm-foot.cur{width:100%;min-height:44px;align-items:center;font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cm-st{font-size:13px;letter-spacing:1px}
:root[data-theme] body.tui:not(.authbg) .cm-st small{letter-spacing:0;font-weight:600;opacity:.85}
:root[data-theme] body.tui:not(.authbg) .cm-j{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--raised);border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .cm-j.go{background:var(--ok-soft,rgba(52,211,153,.14));color:var(--ok-ink,var(--ok));border-color:transparent;font-weight:900}
/* the lesson sheet */
:root[data-theme] body.tui:not(.authbg) .cm-sh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .cm-sh > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .cm-sh small{color:var(--mut);font-size:12px}
:root[data-theme] body.tui:not(.authbg) .cm-sh b{font-size:17px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) button.cm-x{width:36px;min-width:36px;padding:0;justify-content:center;flex:none}
:root[data-theme] body.tui:not(.authbg) .cm-ins{white-space:pre-wrap;line-height:1.55;font-size:14px;padding:12px;border-radius:12px;background:var(--raised);margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .cm-skip{padding:8px 12px;border-radius:12px;background:var(--raised);color:var(--mut);font-size:13px;margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .cm-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
:root[data-theme] body.tui:not(.authbg) .cm-sec b{font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cm-sec small{color:var(--mut);font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .cm-note{font-size:13px;line-height:1.5;margin:6px 0}
:root[data-theme] body.tui:not(.authbg) .cm-mats{display:flex;flex-direction:column;gap:6px}
:root[data-theme] body.tui:not(.authbg) a.cm-mat{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--raised);
  color:var(--txt);text-decoration:none}
:root[data-theme] body.tui:not(.authbg) a.cm-mat b{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) a.cm-mat small{color:var(--mut);font-size:12px}
:root[data-theme] body.tui:not(.authbg) .cm-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:root[data-theme] body.tui:not(.authbg) .cm-acts button{min-height:52px;justify-content:center}
:root[data-theme] body.tui:not(.authbg) .cm-plist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
:root[data-theme] body.tui:not(.authbg) .cm-pr{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 12px;border-radius:12px;border:1px solid var(--line);font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cm-pr > span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cm-pr small{color:var(--mut);font-variant-numeric:tabular-nums}
:root[data-theme] body.tui:not(.authbg) .cm-pr b{font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
:root[data-theme] body.tui:not(.authbg) .cm-ps{font-size:11px;letter-spacing:.5px;min-width:56px}
:root[data-theme] body.tui:not(.authbg) .cm-pr.no{padding-right:12px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-foot2{flex-wrap:wrap}
@media (min-width:900px){ :root[data-theme] body.tui:not(.authbg) .cm-path{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  :root[data-theme] body.tui:not(.authbg) .cm-card{flex:0 0 230px} }
:root[data-theme="dark"] body.tui:not(.authbg) .cm-bar i{background:#fff}

/* ===================================================================
   🗺 COURSE MONITOR (course map chunk 4, admin.html — Watch › 🗺 Courses + the group sheet)
   =================================================================== */
:root[data-theme] body.adm:not(.authbg) .cmo-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
:root[data-theme] body.adm:not(.authbg) .cmo-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:left;width:100%;
  min-height:44px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--raised,var(--card));color:var(--txt);
  font:inherit;cursor:pointer;height:auto}
:root[data-theme] body.adm:not(.authbg) .cmo-row:hover{border-color:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .cmo-row.red{box-shadow:inset 3px 0 0 var(--bad)}
:root[data-theme] body.adm:not(.authbg) .cmo-l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:root[data-theme] body.adm:not(.authbg) .cmo-l1 b{font-size:15px}
:root[data-theme] body.adm:not(.authbg) .cmo-l1 small{color:var(--mut);font-size:13px;flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) .cmo-l2{font-size:13px;color:var(--mut);line-height:1.4}
:root[data-theme] body.adm:not(.authbg) .cmo-l3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
:root[data-theme] body.adm:not(.authbg) .cmo-pace{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:700;
  background:var(--seg,rgba(127,127,127,.12));color:var(--txt);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .cmo-pace.ok{background:var(--ok-soft,rgba(52,211,153,.14));color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .cmo-pace.warn{background:var(--warn-soft,rgba(251,191,36,.14));color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) .cmo-pace.bad{background:var(--bad-soft,rgba(239,68,68,.14));color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .cmo-path{display:flex;flex-wrap:wrap;gap:3px}
:root[data-theme] body.adm:not(.authbg) .cmo-sq{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--line);flex:none}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.ex{border-radius:50%}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.lock{background:var(--line);opacity:.55}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.cur{background:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.3)}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.done{background:var(--mut);opacity:.6}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.skip{background:transparent;border:1.5px dashed var(--mut)}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.s5{background:#15803d}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.s4{background:#22c55e}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.s3{background:#84cc16}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.s2{background:#f59e0b}
:root[data-theme] body.adm:not(.authbg) .cmo-sq.s1{background:#ea580c}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-sq.cur{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
:root[data-theme] body.adm:not(.authbg) .cmo-avg{display:inline-flex;align-items:center;gap:4px}
:root[data-theme] body.adm:not(.authbg) .cmo-st{font-size:12px;letter-spacing:1px}
:root[data-theme] body.adm:not(.authbg) .cmo-cov{color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .cmo-key{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .cmo-key span{display:inline-flex;align-items:center;gap:5px}
/* the group sheet */
:root[data-theme] body.adm:not(.authbg) .ls-sheet.cmo-sheet{max-width:760px;max-height:92vh;overflow:auto}
:root[data-theme] body.adm:not(.authbg) .cmo-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
:root[data-theme] body.adm:not(.authbg) .cmo-hd > div{display:flex;flex-direction:column;gap:2px;min-width:0}
:root[data-theme] body.adm:not(.authbg) .cmo-gn{font-size:18px}
:root[data-theme] body.adm:not(.authbg) .cmo-hd small{color:var(--mut);font-size:13px}
:root[data-theme] body.adm:not(.authbg) .cmo-hr{display:flex;align-items:center;gap:8px;flex:none}
:root[data-theme] body.adm:not(.authbg) .cmo-x{width:36px;padding:0}
:root[data-theme] body.adm:not(.authbg) .cmo-tabs{margin-bottom:12px}
:root[data-theme] body.adm:not(.authbg) .cmo-bh{font-size:13px;font-weight:700;color:var(--mut);margin:12px 0 4px}
:root[data-theme] body.adm:not(.authbg) .cmo-sr{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);margin-bottom:6px}
:root[data-theme] body.adm:not(.authbg) .cmo-sr.locked{opacity:.6}
:root[data-theme] body.adm:not(.authbg) .cmo-sr.current{border-color:var(--acc)}
:root[data-theme] body.adm:not(.authbg) .cmo-sn{width:28px;text-align:center;font-weight:700;color:var(--mut);flex:none}
:root[data-theme] body.adm:not(.authbg) .cmo-stt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .cmo-stt small{color:var(--mut);font-size:12px;line-height:1.4}
:root[data-theme] body.adm:not(.authbg) .cmo-now{font-size:12px;font-weight:700;color:var(--acc);white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .cmo-gw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-width:100%}
:root[data-theme] body.adm:not(.authbg) .cmo-g{border-collapse:collapse;font-size:13px;min-width:100%}
:root[data-theme] body.adm:not(.authbg) .cmo-g th,:root[data-theme] body.adm:not(.authbg) .cmo-g td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) .cmo-g thead th{font-size:12px;color:var(--mut);font-weight:700}
:root[data-theme] body.adm:not(.authbg) .cmo-g .cmo-gn0{position:sticky;left:0;z-index:1;background:var(--card);text-align:left;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;font-weight:600}
:root[data-theme] body.adm:not(.authbg) .cmo-g tbody .cmo-gn0{text-transform:none;letter-spacing:0}
:root[data-theme] body.adm:not(.authbg) .cmo-g .cmo-gn0 small{display:block;font-size:11px;color:var(--mut);font-weight:500}
:root[data-theme] body.adm:not(.authbg) .cmo-b{display:inline-block;min-width:34px;padding:3px 6px;border-radius:8px;font-weight:700;background:var(--seg,rgba(127,127,127,.12))}
:root[data-theme] body.adm:not(.authbg) .cmo-b.s5{background:#dcfce7;color:#14532d}
:root[data-theme] body.adm:not(.authbg) .cmo-b.s4{background:#e7f9ec;color:#166534}
:root[data-theme] body.adm:not(.authbg) .cmo-b.s3{background:#f1fbd8;color:#3f6212}
:root[data-theme] body.adm:not(.authbg) .cmo-b.s2{background:#fef3c7;color:#78350f}
:root[data-theme] body.adm:not(.authbg) .cmo-b.s1{background:#ffedd5;color:#9a3412}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-b.s5{background:rgba(34,197,94,.24);color:#86efac}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-b.s4{background:rgba(34,197,94,.15);color:#86efac}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-b.s3{background:rgba(132,204,22,.18);color:#bef264}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-b.s2{background:rgba(245,158,11,.2);color:#fcd34d}
:root[data-theme="dark"] body.adm:not(.authbg) .cmo-b.s1{background:rgba(234,88,12,.22);color:#fdba74}
:root[data-theme] body.adm:not(.authbg) .cmo-note{font-size:12px;margin-top:8px}
:root[data-theme] body.adm:not(.authbg) .cmo-ft{display:flex;justify-content:flex-end;margin-top:14px}

/* ═══ 🧱 ELEMENTS PASS (docs/plans/2026-10-11-admin-elements-design.md) ═══ */
/* toast stack — one fixed box (#toasts), newest at the bottom; the toasts inside flow (no own fixed position) */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:80;
  display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 24px)}
@media (max-width:899px){ body.has-bnav #toasts{bottom:calc(92px + env(safe-area-inset-bottom,0px))} }
#toasts .toast{position:relative;inset:auto;left:auto;bottom:auto;transform:translateY(6px);opacity:0;pointer-events:auto;margin:0;
  display:flex;align-items:center;max-width:calc(100vw - 24px);box-sizing:border-box}
#toasts .toast.show{opacity:1;transform:none}
#toasts .toast.err{cursor:copy;padding-right:6px}
#toasts .toast .tx{flex:0 0 auto;width:32px;height:32px;min-height:32px;min-width:32px;padding:0;margin-left:4px;border-radius:99px;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;box-shadow:none;display:grid;place-items:center}
#toasts .toast .tx::before{content:"✕";font-size:14px;font-weight:700}
#toasts .toast[data-n]::after{content:attr(data-n);font-size:12px;font-weight:800;opacity:.7;margin-left:2px}
#toasts .toast.copied::after{content:"Copied";font-size:12px;font-weight:800;opacity:.8;margin-left:6px}
@media (prefers-reduced-motion:reduce){ #toasts .toast{transition:none} }
/* modal() dialogs (.mf-bar — hand-built .modal-bg markup keeps its own order) — DOM order Cancel · [extra] · OK: laptops show the action on the right, phones stack it on top, full width.
   Unprefixed on purpose: print.html (no .tui layer) uses modal() too. */
.modal-bg .modal .btnbar.mf-bar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:nowrap}
@media (max-width:699px){
  .modal-bg .modal .btnbar.mf-bar{flex-direction:column-reverse;align-items:stretch}
  .modal-bg .modal .btnbar.mf-bar>button{flex:0 0 auto;width:100%}
}
/* modal() fields — (optional) marker, the error under a field, red border, typed-name ✓ */
.modal-bg .mf-opt{font-weight:500;color:var(--muted)}
.modal-bg .mf-err{color:var(--bad-ink,var(--bad));font-size:13px;font-weight:600;margin:4px 2px 0;line-height:1.4}
.modal-bg .mf-err[hidden]{display:none}
.modal-bg :is(input,select,textarea)[data-k].bad{border-color:var(--bad)!important}
.modal-bg .mf-match{display:inline-block;color:var(--ok);font-weight:800;margin:4px 2px 0}
.modal-bg button[data-ok]:disabled{opacity:.55;cursor:not-allowed}
/* modal() field types — PIN (👁), money (groups + "ming"), select (one chevron) */
.modal-bg :is(.mf-pin,.mf-money,.mf-sel){position:relative}
.modal-bg :is(.mf-pin,.mf-money,.mf-sel)>:is(input,select){width:100%}
.modal-bg .mf-pin input{padding-right:52px}
.modal-bg .mf-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:36px;min-height:36px;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;font-size:16px;line-height:1}
.modal-bg .mf-money input{padding-right:58px}
.modal-bg .mf-u{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.modal-bg .mf-sel select{appearance:none;-webkit-appearance:none;padding-right:40px}
.modal-bg .mf-sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* number fields: no spinner arrows (a mis-scroll changed amounts) — every cabinet on the .tui layer */
:root[data-theme] body.tui:not(.authbg) input[type=number]{-moz-appearance:textfield;appearance:textfield}
:root[data-theme] body.tui:not(.authbg) input[type=number]::-webkit-inner-spin-button,
:root[data-theme] body.tui:not(.authbg) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* disabled reasons + pressed look (Task 12) — a locked button says why, right beside it; a press
   darkens instead of moving (nav + liquid rows keep their own handling — the 🧭 NAV FIX block) */
:root[data-theme] body.tui:not(.authbg) .ds-why{font-size:12.5px;color:var(--muted);margin-left:6px;align-self:center}
:root[data-theme] body.tui:not(.authbg) button:disabled{cursor:not-allowed}
:root[data-theme] body.tui:not(.authbg) :is(button,.btn):not(:disabled):not(.mf-eye,.ds-clr):not(:is(.bnav,.tabs,.ad-tabs,.gc-seg,.gc-groups,.tu-chips) *):active{transform:none;filter:brightness(.92)}
/* skeleton name bar in the card headers (no "Loading…" words) + ✕ clear on search/filter boxes (Task 13) */
:root[data-theme] body.tui:not(.authbg) .skel.sc-nmsk{display:block;padding:4px 0;width:150px;max-width:60vw}
:root[data-theme] body.tui:not(.authbg) .skel.sc-nmsk i{width:100%;height:14px}
:root[data-theme] body.tui:not(.authbg) :has(> input[data-clear]){position:relative}
:root[data-theme] body.tui:not(.authbg) input[data-clear]{padding-right:44px}
:root[data-theme] body.tui:not(.authbg) input[data-clear]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
:root[data-theme] body.tui:not(.authbg) .ds-clr{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-height:36px;min-width:0;padding:0;margin:0;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--muted);line-height:1}
:root[data-theme] body.tui:not(.authbg) .ds-clr[hidden]{display:none}
:root[data-theme] body.tui:not(.authbg) .ds-clr::before{content:"✕";font-size:14px;font-weight:700}
/* 🧱 review fix: while a lesson register is open its sticky 💾 Save bar sits above the phone dock —
   lift the toast stack over it, so a sticky error never covers (or swallows the tap on) Save */
@media (max-width:899px){ body.has-bnav:has(.ls-foot) #toasts{bottom:calc(164px + env(safe-area-inset-bottom,0px))} }
/* notes search: the ✕ positions against its own box, not the whole notes sheet */
.nt-qw{position:relative;flex:0 0 auto}

/* 🗺 Home Next card — "Today's step" for a group on a course map (course map, teacher Home) */
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-step{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;
  min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);background-image:none;
  color:#fff;font-size:14px;font-weight:600;box-shadow:none;white-space:normal;text-align:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-step b{font-weight:700;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.nx-step:hover{background:rgba(255,255,255,.22)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.nx-step{border-color:var(--line);background:transparent;color:var(--txt)}
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) button.nx-step:hover{background:var(--hover,#1a1a1a)}

/* =====================================================================
   🖼 PROFILE PICTURES (migrate-profile-v1) — faces + the round photo
   editor (`pf-` prefix) + the market / admin cards (`pfm-` / `pfa-`).
   The editor is always dark (a photo is judged on black, like every
   social app); its buttons keep the cabinet's DS shapes and colours.
   ===================================================================== */
.has-face{background-repeat:no-repeat}
.face-mini{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:-6px;margin-right:6px;background:var(--raised,#ddd)}
.face-mini[hidden]{display:none}

.pf-bg{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s ease;color:#fafafa;overscroll-behavior:contain}
.pf-bg.show{opacity:1}
.pf-box{width:min(440px,100%);max-height:100%;overflow:auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.pf-top{display:flex;align-items:center;gap:10px}
.pf-top .pf-title{flex:1;font-size:16px}
.pf-step{font-size:13px;color:#a1a1aa}
.pf-bg .pf-x{width:44px;height:44px;min-width:44px;padding:0;border-radius:12px;color:#fafafa;background:#1a1a1a;border:1px solid #333}
.pf-body{display:flex;flex-direction:column;align-items:center;gap:14px}
.pf-pick,.pf-crop,.pf-prev{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;text-align:center}
.pf-ring{width:200px;height:200px;border-radius:50%;border:2px dashed #52525b;display:grid;place-items:center;font-size:56px}
.pf-lead{margin:0;line-height:1.5}
.pf-bg .muted{color:#a1a1aa}
.pf-stage{position:relative;touch-action:none;cursor:grab;border-radius:8px;overflow:hidden;outline-offset:4px}
.pf-stage:active{cursor:grabbing}
.pf-stage:focus-visible{outline:3px solid #a5a0ff}
.pf-cv{width:100%;height:100%;display:block}
.pf-mask{position:absolute;inset:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.62);outline:2px solid rgba(255,255,255,.9);outline-offset:-2px}
.pf-hint{margin:0;font-size:13px}
.pf-zoom{display:flex;align-items:center;gap:10px;width:min(300px,100%);font-size:18px}
.pf-zoom input{flex:1;height:44px;accent-color:#fafafa}
.pf-row{display:flex;gap:10px;width:100%}
.pf-row > *{flex:1}
.pf-bg .pf-row .ghost,.pf-bg .pf-again{color:#fafafa;background:#1a1a1a;border-color:#333}
.pf-big{width:200px;height:200px;border-radius:50%;background:center/cover no-repeat;box-shadow:0 0 0 3px #fafafa}
.pf-sizes{display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap;padding:12px;border:1px solid #333;border-radius:14px;width:100%;box-sizing:border-box}
.pf-sz{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-sz small{font-size:12px;color:#a1a1aa}
.pf-line{flex-direction:row;gap:8px;text-align:left}
.pf-line > span:last-child{display:flex;flex-direction:column}
.pf-c{display:block;border-radius:50%;background:center/cover no-repeat}
.pf-c.s32{width:32px;height:32px}.pf-c.s40{width:40px;height:40px}.pf-c.s56{width:56px;height:56px}
.pf-warn{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.5);color:#fed7aa;text-align:left;width:100%;box-sizing:border-box}
.pf-warn b{color:#fdba74;font-size:15px}
.pf-err{color:#fdba74;font-size:14px}
@media (prefers-reduced-motion: reduce){.pf-bg{transition:none}}

/* market card (teacher Diamonds › Market) */
.pfm-head{display:flex;align-items:center;gap:14px}
.pfm-face{width:64px;height:64px;min-width:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:22px;background:var(--raised);color:var(--txt);border:1px solid var(--line)}
.pfm-face.has{background:center/cover no-repeat;color:transparent}
.pfm-st{display:flex;flex-direction:column;gap:2px;min-width:0}
.pfm-st b{font-size:15px}
.pfm-st span{font-size:13px;color:var(--mut)}
.pfm-acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pfm-keep{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pfm-av{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:10px}
.pfm-a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer;font:inherit;min-height:44px}
.pfm-a:disabled{opacity:.55;cursor:not-allowed}
.pfm-a.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-ring,rgba(79,70,229,.3))}
.pfm-ai{width:56px;height:56px;border-radius:50%;background:center/cover no-repeat var(--raised)}
.pfm-an{font-size:13px;font-weight:600;line-height:1.2}
.pfm-ap{font-size:12px;color:var(--mut)}
.pfm-h{font-size:14px;font-weight:600;margin-top:16px}
.pfm-note{font-size:13px;color:var(--mut);margin-top:6px}

/* admin card (Diamonds › Market) */
.pfa-set{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.pfa-set label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.pfa-set input[type=number]{width:120px}
.pfa-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.pfa-row:first-child{border-top:0}
.pfa-row .grow{flex:1;min-width:0}
.pfa-row small{display:block;color:var(--mut);font-size:12px}
.pfa-ai{width:40px;height:40px;min-width:40px;border-radius:50%;background:center/cover no-repeat var(--raised)}

/* =====================================================================
   🖼 PICTURE UPLOADS (migrate-media-v1) — the drop / paste box in admin
   forms (`mf-img`, modal field type "image" + the course step sheet) and
   the editor's drop zone + square / 3:4 frames. The picture itself is
   uploaded to R2 by the profile-photo function; no link is typed.
   ===================================================================== */
.pf-drop{flex-direction:column;gap:6px;font-size:44px;cursor:pointer;transition:border-color .15s,background .15s}
.pf-drop small{font-size:13px;color:#a1a1aa}
.pf-drop.sq{border-radius:14px}
.pf-drop.over,.pf-drop:hover{border-color:#fafafa;background:rgba(255,255,255,.06)}
.pf-drop:focus-visible{outline:3px solid #a5a0ff;outline-offset:3px}
.pf-mask.sq{border-radius:6px}
.pf-big.sq{border-radius:12px}
.pf-c.sq{border-radius:8px}

.mf-img{display:flex;align-items:center;gap:14px;padding:12px;margin:2px 0 4px;border:1.5px dashed var(--line2,var(--line));border-radius:14px;
  background:var(--field,transparent);transition:border-color .15s,background .15s}
.mf-img.over{border-color:var(--acc);background:var(--acc-soft,rgba(79,70,229,.08))}
.mf-imgp{flex:none;width:88px;aspect-ratio:var(--ar,1/1);border-radius:12px;background:var(--raised,#eee) center/cover no-repeat;
  display:grid;place-items:center;font-size:28px;cursor:pointer;border:1px solid var(--line)}
.mf-img.round .mf-imgp{width:72px;border-radius:50%}
.mf-imgp:focus-visible{outline:3px solid var(--acc-ring,var(--acc));outline-offset:2px}
.mf-imgt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mf-imgt b{font-size:14px}
.mf-imgt small{font-size:12px;color:var(--mut);line-height:1.35}
.mf-imgb{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mf-imgb [hidden]{display:none}
.ce-ph .mf-img{margin-top:8px}

/* ============================================================
   🗺 COURSES FOR TEACHERS (migrate-course-v6) — lesson files (cf-, admin step sheet + teacher lesson sheet),
   the admin course page's groups list + the enrol sheet (ce-gr / ce-grs / ce-fixed / ce-now).
   Sizes follow the 🧩 DS: rows ≥ 52, controls 36, radius 12, tags 28/8.
   =================================================================== */
:root[data-theme] body.tui:not(.authbg) .cf-part{margin:0 0 12px}
:root[data-theme] body.tui:not(.authbg) .cf-ph{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mut);margin:0 0 6px}
:root[data-theme] body.tui:not(.authbg) .cf-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;margin:0 0 6px;border-radius:12px;
  border:1px solid var(--line);background:var(--raised);transition:border-color .15s,background .15s}
:root[data-theme] body.tui:not(.authbg) .cf-row.has{border-color:var(--ok-ring,rgba(52,211,153,.45))}
:root[data-theme] body.tui:not(.authbg) .cf-row.drop{border:1.5px dashed var(--acc);background:var(--acc-soft)}
:root[data-theme] body.tui:not(.authbg) .cf-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:19px;background:var(--card);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
:root[data-theme] body.tui:not(.authbg) .cf-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .cf-tx b{font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cf-tx small{font-size:12.5px;color:var(--mut);overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cf-row.has .cf-tx small{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg) .cf-bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
:root[data-theme] body.tui:not(.authbg) .cf-bar i{display:block;height:100%;background:var(--acc);border-radius:3px;transition:width .2s}
:root[data-theme] body.tui:not(.authbg) .cf-act{display:inline-flex;align-items:center;gap:4px;flex:none}
:root[data-theme] body.tui:not(.authbg) .cf-act button.ce-ib{width:36px;min-width:36px;padding:0;justify-content:center}
:root[data-theme] body.adm:not(.authbg) .ce-grs{margin:4px 0 14px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--raised)}
:root[data-theme] body.adm:not(.authbg) .ce-grs .ce-fh b{font-size:14px}
:root[data-theme] body.adm:not(.authbg) .ce-gr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:52px;padding:6px 0;border-top:1px solid var(--line)}
:root[data-theme] body.adm:not(.authbg) .ce-gr:first-of-type{border-top:0}
:root[data-theme] body.adm:not(.authbg) .ce-grt{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.adm:not(.authbg) .ce-grt b{font-size:14.5px}
:root[data-theme] body.adm:not(.authbg) .ce-grt small{font-size:12.5px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .ce-fixed{min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:12px;background:var(--raised);border:1px solid var(--line);font-size:14px}
:root[data-theme] body.adm:not(.authbg) .ce-now{padding:10px 12px;border-radius:12px;background:var(--acc-soft);font-size:13px;line-height:1.5}
@media (max-width:560px){
  :root[data-theme] body.tui:not(.authbg) .cf-row{flex-wrap:wrap}
  :root[data-theme] body.tui:not(.authbg) .cf-act{width:100%;justify-content:flex-end}
}
:root[data-theme] body.tui:not(.authbg) .cf-tx small.cf-err{color:var(--bad-ink,var(--bad));font-weight:600}
/* 🗺 v6 teacher side — Courses tab cards (crs-) + the map's Ready banner, prior steps and lesson files */
:root[data-theme] body.tui:not(.authbg) .crs-list{display:grid;gap:12px}
@media (min-width:900px){ :root[data-theme] body.tui:not(.authbg) .crs-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} }
:root[data-theme] body.tui:not(.authbg) .crs-card{display:flex;flex-direction:column;gap:10px;margin:0}
:root[data-theme] body.tui:not(.authbg) .crs-card.is-ready{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-ring),var(--rim,none)}
:root[data-theme] body.tui:not(.authbg) .crs-top{display:flex;align-items:center;gap:12px}
:root[data-theme] body.tui:not(.authbg) .crs-top .ss-ava{width:44px;height:44px;flex:none;border-radius:12px}
:root[data-theme] body.tui:not(.authbg) .crs-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .crs-tt b{font-size:16px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .crs-tt small{color:var(--mut);font-size:13px}
:root[data-theme] body.tui:not(.authbg) .crs-st{font-size:14px;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--raised)}
:root[data-theme] body.tui:not(.authbg) .crs-st.ready{background:var(--acc-soft);color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .crs-st.fin{background:var(--ok-soft,rgba(52,211,153,.14));color:var(--ok-ink,var(--ok));font-weight:700}
:root[data-theme] body.tui:not(.authbg) .crs-note{font-size:13px;color:var(--mut);line-height:1.45}
:root[data-theme] body.tui:not(.authbg) .crs-bar{height:8px;border-radius:99px;background:var(--seg,var(--raised));overflow:hidden}
:root[data-theme] body.tui:not(.authbg) .crs-bar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
:root[data-theme="dark"] body.tui:not(.authbg) .crs-bar i{background:#fff}
:root[data-theme] body.tui:not(.authbg) .crs-dn{color:var(--mut);font-size:12.5px;margin-top:-4px}
:root[data-theme] body.tui:not(.authbg) .crs-act button{width:100%;min-height:52px;justify-content:center;font-size:15px}
:root[data-theme] body.tui:not(.authbg) .crs-oth{font-size:13px;margin:12px 2px 0}
:root[data-theme] body.tui:not(.authbg) .cm-ready{margin-top:12px;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--acc-soft);
  box-shadow:inset 0 0 0 1px var(--acc-ring);font-size:14px;line-height:1.5}
:root[data-theme] body.tui:not(.authbg) .cm-ready button.cm-go{margin-top:6px}
:root[data-theme] body.tui:not(.authbg) .cm-card.prior{opacity:.45;cursor:default;filter:grayscale(.6)}
:root[data-theme] body.tui:not(.authbg) .cm-card.prior .cm-chip,
:root[data-theme] body.tui:not(.authbg) .cm-foot.prior{background:var(--raised);color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-j.prior{opacity:.45}
:root[data-theme] body.tui:not(.authbg) .cm-blk.prior{opacity:.7}
:root[data-theme] body.tui:not(.authbg) .cm-blk.prior .cm-bh{margin-bottom:0;padding:10px 12px;border-radius:12px;border:1px dashed var(--line)}
:root[data-theme] body.tui:not(.authbg) .cm-fpart{font-size:12.5px;font-weight:700;color:var(--mut);margin:6px 2px 0}
:root[data-theme] body.tui:not(.authbg) .cm-fpart:first-child{margin-top:0}
:root[data-theme] body.tui:not(.authbg) button.cm-file{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;height:auto;padding:8px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--raised);color:var(--txt);box-shadow:none;font:inherit;text-align:left;justify-content:flex-start;cursor:pointer}
:root[data-theme] body.tui:not(.authbg) button.cm-file:hover{border-color:var(--acc)}
:root[data-theme] body.tui:not(.authbg) button.cm-file b{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) button.cm-file small{color:var(--mut);font-size:12px;font-weight:500}
/* =====================================================================
   🖼 FACES v2 (migrate-profile-v2) — bigger faces · 💍 ring · 👤 peek ·
   ✨ new look · the Me header (.pfs) · the renewal tile (.pf-nudge).
   Sizes: XS 26 (inline lines) · S 40 (rows) · M 56 (podium) · L 88 (Me)
   · XL 140 (peek). The ring is a box-shadow, so it works on a picture AND
   on initials; --rw (ring width) is set from the circle's size by facePaint.
   Ring colours are DATA (both themes).
   ===================================================================== */
/* 💍 the ring itself moved to faces.js (ring v3 — gradient + gap + glow, shared with the portal) */
.pf-add{outline:2px dashed var(--acc,#4f46e5) !important;outline-offset:2px}

/* bigger circles where people are ranked / named */
:root[data-theme] body.tui:not(.authbg) .lb-pod .tu-ava{width:56px;height:56px;flex-basis:56px;font-size:17px}
:root[data-theme] body.tui:not(.authbg) .lb-pod.p1 .tu-ava{width:72px;height:72px;flex-basis:72px;font-size:21px}
:root[data-theme] body.tui:not(.authbg) .lb-who .tu-ava{width:44px;height:44px;flex-basis:44px;font-size:14px}
.face-mini.fm-s{width:26px;height:26px;vertical-align:-8px}
.gv-rava.ss-ava{width:36px;height:36px;font-size:12px;flex:none;margin-right:2px}
.pfm-face{--rw:3px;width:72px;height:72px;min-width:72px;font-size:24px}

/* 👤 Me header — my face, big */
.pf-self:empty{display:none}
.pf-self{margin:0 0 14px}
:root[data-theme] body.tui:not(.authbg) button.pfs,button.pfs{display:flex;align-items:center;gap:16px;width:100%;min-height:0;height:auto;padding:14px 16px;
  border-radius:18px;border:1px solid var(--line);background:var(--card);background-image:none;color:var(--txt);text-align:left;box-shadow:var(--rim,none);font-weight:400}
:root[data-theme] body.tui:not(.authbg) button.pfs:hover:not(:disabled){border-color:var(--acc);background:var(--card)}
:root[data-theme] body.tui:not(.authbg) button.pfs:disabled{opacity:1;cursor:default}
.pfs .pfs-face.ss-ava{--rw:3.5px;width:88px;height:88px;min-width:88px;flex:0 0 88px;font-size:28px}
.pfs-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.pfs-t b{font-size:19px;line-height:1.2;overflow-wrap:anywhere}
.pfs-t span{font-size:13.5px;color:var(--muted)}
.pfs-go{font-size:26px;color:var(--muted);line-height:1}

/* 🔁 renewal tile on Home */
.pf-nudge[hidden]{display:none}
.pf-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px 10px 14px;border-radius:14px;
  border:1px solid color-mix(in srgb,#f59e0b 45%,transparent);background:color-mix(in srgb,#f59e0b 12%,var(--card,#fff));color:var(--txt)}
.pf-nudge .pfn-t{flex:1;min-width:160px;font-weight:600;font-size:14px}

/* 💍 ring choice in the market card */
.pfm-hs{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px}
.pfm-rings{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
:root[data-theme] body.tui:not(.authbg) button.pfm-rc,button.pfm-rc{width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:transparent;background-image:none;border:2px solid transparent;box-shadow:none}
:root[data-theme] body.tui:not(.authbg) button.pfm-rc.on,button.pfm-rc.on{border-color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) button.pfm-rc:hover{background:var(--hover,rgba(0,0,0,.05))}
.pfm-rd{width:30px;height:30px;border-radius:50%;background:var(--rg);box-shadow:0 0 10px -2px var(--rgl),inset 0 0 0 1px rgba(0,0,0,.12)}
.pfm-racts{margin-top:10px}

/* 👤 peek — tap a face */
.fpk-bg{position:fixed;inset:0;z-index:56;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .16s ease;overscroll-behavior:contain}
.fpk-bg.show{opacity:1}
.fpk{position:relative;width:100%;max-width:420px;background:var(--card,#fff);color:var(--txt);border-radius:22px 22px 0 0;
  padding:26px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:fpkUp .2s ease}
@keyframes fpkUp{from{transform:translateY(24px)}to{transform:none}}
@media (min-width:700px){ .fpk-bg{align-items:center} .fpk{border-radius:22px;padding-bottom:22px} }
:root[data-theme] body.tui:not(.authbg) button.fpk-x,button.fpk-x{position:absolute;top:10px;right:10px;width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;
  background:var(--raised,#f1f1f4);background-image:none;color:var(--txt);border:1px solid var(--line);box-shadow:none;font-size:16px}
.fpk-face,.fnl-face{--rw:5px;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;font-size:44px;font-weight:800;
  background:center/cover no-repeat var(--raised,#e5e7eb);color:var(--txt);margin-bottom:8px}
.fpk-face[data-fxview]{cursor:zoom-in}
.fpk-face[data-fxview]:focus-visible{outline:3px solid var(--acc);outline-offset:10px}
.fpk-zh{font-size:12px;color:var(--muted);margin:-4px 0 2px}
.fpk-n{font-size:21px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.fpk-l{font-size:14px;color:var(--muted)}
.fpk-rk{font-size:14px;color:var(--muted)}
.fpk-rk span{font-weight:800;color:var(--txt)}
.fpk-me{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.fpk-me span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--raised,#f1f1f4);border:1px solid var(--line)}
.fpk .fpk-go{width:100%;margin-top:10px}

/* ✨ new look */
.fnl-bg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(0,0,0,.6);opacity:0;transition:opacity .2s ease;cursor:pointer}
.fnl-bg.show{opacity:1}
.fnl{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center;padding:20px}
.fnl-face{width:150px;height:150px;animation:fnlPop .55s cubic-bezier(.2,1.4,.4,1)}
.fnl-t{font-size:22px;font-weight:800}
.fnl-s{font-size:14px;opacity:.85}
@keyframes fnlPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .fnl-face,.fpk{animation:none} .fpk-bg,.fnl-bg{transition:none} }

/* =====================================================================
   🗺 STEP PANEL v2 (admin step sheet) — ready line · one drop for the whole lesson ·
   🔑 answer-key box · teacher map "no key" note. FRONTEND-ONLY.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) .ce-rdy{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
:root[data-theme] body.tui:not(.authbg) button.ce-rd{min-height:36px;height:auto;padding:6px 12px;border-radius:10px;font:600 13px/1.2 inherit;
  background:var(--raised,var(--card));color:var(--mut);border:1px solid var(--line);box-shadow:none;cursor:pointer;width:auto}
:root[data-theme] body.tui:not(.authbg) button.ce-rd.ok{color:var(--ok-ink,var(--ok));border-color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) button.ce-rd.warn{color:var(--warn-ink,var(--warn));border-color:var(--warn)}
@keyframes ceFlash{0%{box-shadow:0 0 0 0 var(--acc-ring,rgba(99,102,241,.5))}100%{box-shadow:0 0 0 10px transparent}}
:root[data-theme] body.tui:not(.authbg) .ce-flash{animation:ceFlash .9s ease-out 2}
:root[data-theme] body.tui:not(.authbg) .cf-drop{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;margin:0 0 10px;border-radius:14px;
  border:1.5px dashed var(--acc);background:var(--acc-soft);cursor:pointer;color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .cf-drop:focus-visible{outline:3px solid var(--acc-ring,var(--acc));outline-offset:2px}
:root[data-theme] body.tui:not(.authbg) .cf-drop.drop{border-style:solid;background:var(--hover,var(--acc-soft))}
:root[data-theme] body.tui:not(.authbg) .cf-dic{font-size:26px;line-height:1;flex:none}
:root[data-theme] body.tui:not(.authbg) .cf-dtx{display:flex;flex-direction:column;gap:2px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .cf-dtx b{font-size:15px}
:root[data-theme] body.tui:not(.authbg) .cf-dtx small{color:var(--mut);font-size:12.5px;line-height:1.4}
:root[data-theme] body.tui:not(.authbg) .cf-pend{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
:root[data-theme] body.tui:not(.authbg) .cf-prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;border:1px solid var(--warn)}
:root[data-theme] body.tui:not(.authbg) .cf-pn{display:flex;flex-direction:column;flex:1 1 180px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .cf-pn b{font-size:14px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cf-pn small{color:var(--warn-ink,var(--warn));font-size:12.5px}
:root[data-theme] body.tui:not(.authbg) .cf-prow select{width:auto;flex:1 1 160px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .ce-kbox{margin:10px 0;padding:12px;border-radius:14px;border:1.5px solid var(--warn);background:var(--raised,var(--card))}
:root[data-theme] body.tui:not(.authbg) .ce-kbox.ok{border-color:var(--ok)}
:root[data-theme] body.tui:not(.authbg) .ce-kh{display:flex;align-items:center;justify-content:space-between;gap:8px}
:root[data-theme] body.tui:not(.authbg) .ce-kh b{font-size:15px}
:root[data-theme] body.tui:not(.authbg) .ce-kn{font:700 13px/1 inherit;padding:6px 10px;border-radius:999px}
:root[data-theme] body.tui:not(.authbg) .ce-kn.ok{color:var(--ok-ink,var(--ok));background:var(--ok-soft,transparent)}
:root[data-theme] body.tui:not(.authbg) .ce-kn.warn{color:var(--warn-ink,var(--warn));background:var(--warn-soft,transparent)}
:root[data-theme] body.tui:not(.authbg) .ce-kl{display:flex;gap:8px;margin-top:8px}
:root[data-theme] body.tui:not(.authbg) .ce-kl input{flex:1;min-width:0;font-family:"Space Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
:root[data-theme] body.tui:not(.authbg) .ce-kl input::placeholder{text-transform:none;letter-spacing:0;font-family:inherit}
:root[data-theme] body.tui:not(.authbg) .ce-kmsg{display:block;margin-top:6px;font-size:12.5px;color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .ce-kmsg.bad{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui:not(.authbg) .ce-kmsg.good{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg) .ce-kact{margin-top:8px}
:root[data-theme] body.tui:not(.authbg) .ce-krows{margin-top:6px}
:root[data-theme] body.tui:not(.authbg) .ce-krows>summary{cursor:pointer;min-height:36px;display:flex;align-items:center;color:var(--mut);font-size:13.5px}
:root[data-theme] body.tui:not(.authbg) .cm-nokey{display:flex;flex-direction:column;gap:2px;margin:6px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--warn);
  color:var(--txt)}
:root[data-theme] body.tui:not(.authbg) .cm-nokey b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui:not(.authbg) .cm-nokey span{font-size:13px;color:var(--mut)}
@media (prefers-reduced-motion:reduce){ :root[data-theme] body.tui:not(.authbg) .ce-flash{animation:none} }
:root[data-theme] body.tui:not(.authbg):not(.ds0) .ls-sheet .btnbar.ce-foot{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .ls-sheet .btnbar.ce-foot>button{flex:1 1 0;min-width:0;width:auto;margin:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .ls-sheet .btnbar.ce-foot>#ceSaveN{flex:1 1 100%}
@media (min-width:700px){ :root[data-theme] body.tui:not(.authbg):not(.ds0) .ls-sheet .btnbar.ce-foot>#ceSaveN{flex:2 1 0} }

/* =====================================================================
   🛍 ADMIN MARKET CARDS (coin + staff market) — price and actions on their
   own rows: with the DS button sizes, "price · sold · Edit · ✕" on one row
   overflowed a 150–200 px card and the card's overflow:hidden cut ✕ off.
   ===================================================================== */
.market-card .mc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.market-card .mc-price{white-space:nowrap}
.market-card .mc-sold{font-size:12px;color:var(--mut,var(--muted))}
.market-card .mc-acts{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.market-card .mc-acts > button:first-child{flex:1;min-width:0}
.market-card .mc-acts .mc-del{flex:0 0 auto;min-width:44px;padding-left:0;padding-right:0}
:root[data-theme] body.tui:not(.authbg) .market-card .mc-price{align-self:auto;margin-top:0}
/* night: the coin / diamond feature colours are greyed, so a price mixed from them read #4f4f4f on #141414 (2.3:1) */
:root[data-theme="dark"] body.tui:not(.authbg):not(.ds0) .market-card .mc-price{color:var(--txt);background:var(--gloss),#1f1f1f;border-color:#3a3a3a}
:root[data-theme="light"] body.tui:not(.authbg):not(.ds0) .market-card .mc-price{color:#92400e}
:root[data-theme="light"] body.tui:not(.authbg):not(.ds0) #dmMarket .mc-price{color:#075985}

/* =====================================================================
   🏆 FACES v3 — ranking rows next to the stage (faces.js draws the stage,
   the ring and the big photo view). Bigger faces on every row (#4+),
   admin + desk boards get a real circle instead of the inline mini face.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) .lb-row .lb-who{display:flex;align-items:center;gap:10px;min-width:0}
.lb-ava.ss-ava{width:44px;height:44px;flex:0 0 44px;font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cnb-row .tu-ava{width:44px;height:44px;flex-basis:44px;font-size:14px}
.fx-stage + .lb-row{border-top:0}

/* =====================================================================
   🖥 SLIDES VIEWER (course lesson files, 2026-10-15) — the deck opens inside the cabinet, never in its own tab.
   Full-window layer above sheets (z 60, under toasts 80); printing the page while it is open prints nothing.
   ===================================================================== */
.cs-view{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#0b0b0d;color:#fff}
.cs-view .cs-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:#111;border-bottom:1px solid #262626;min-height:56px}
.cs-view .cs-bar b{font-size:15px;white-space:nowrap}
.cs-view .cs-note{flex:1;min-width:0;font-size:13px;color:#b5b5b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-view .cs-bar button{min-height:44px;white-space:nowrap}
.cs-view .cs-bar button.ghost{color:#fff;border-color:#3a3a3a;background:transparent}
.cs-view .cs-body{flex:1;min-height:0;position:relative;background:#fff}
.cs-view .cs-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cs-view .cs-msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:16px;color:#333;background:#fff}
.cs-view .cs-msg.err{color:#b91c1c}
.cs-view:fullscreen .cs-bar{display:none}
@media (max-width:560px){.cs-view .cs-note{display:none}}
@media print{body.cs-on>*{display:none!important}}
/* 🗺 lesson files v3: older places are only listed while a file is there · CD link share row */
.cf-part.old{opacity:.8}.cf-part.old .cf-ph{color:var(--muted)}
.cm-share{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.cm-share>*{flex:1 1 140px;min-height:44px}
.cm-shbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line,#ccc);color:inherit;text-decoration:none;font-weight:600;font-size:14px}

/* ============ 🏁 COURSE MONITOR — Final tab (migrate-course-v8) ============ */
:root[data-theme] body.adm:not(.authbg) .cmo-fin{display:flex;flex-direction:column;gap:0}
:root[data-theme] body.adm:not(.authbg) .cmo-fr{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(120px,150px);align-items:center;gap:10px;
  padding:8px 0;border-top:1px solid var(--line);min-height:52px}
:root[data-theme] body.adm:not(.authbg) .cmo-frn{min-width:0;overflow-wrap:anywhere}
:root[data-theme] body.adm:not(.authbg) .cmo-frn small{display:block;font-size:12px;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .cmo-frf{display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:16px}
:root[data-theme] body.adm:not(.authbg) .cmo-frf small{font-size:10px;font-weight:600;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) .cmo-frf.ok{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) .cmo-frf.bad{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.adm:not(.authbg) .cmo-fr select{width:100%}
:root[data-theme] body.adm:not(.authbg) .cmo-fr .ce-tag{justify-self:start}
:root[data-theme] body.adm:not(.authbg) button.cmo-fsave{margin-top:12px;width:100%}
@media (max-width:420px){:root[data-theme] body.adm:not(.authbg) .cmo-fr{grid-template-columns:minmax(0,1fr) 48px;}
  :root[data-theme] body.adm:not(.authbg) .cmo-fr select,:root[data-theme] body.adm:not(.authbg) .cmo-fr .ce-tag{grid-column:1/-1}}

/* ===== 🛟 PAYMENT OUTBOX (front desk, 2026-10-15) ==========================
   quick.html #pqBar: shown only while a payment waits on this phone (amber),
   was refused (red rail) or belongs to another login (quiet). Sticky under the
   fixed top bar (phone 54 px / laptop top bar + tab row), below its z 39/40. */
:root[data-theme] body.desk:not(.authbg) .pq-bar{position:sticky;top:62px;z-index:38;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  width:100%;min-height:44px;margin:0 0 12px;padding:8px 14px;border-radius:12px;border:1px solid var(--warn);
  background:var(--warn-soft);color:var(--warn-ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;box-shadow:none}
:root[data-theme] body.desk:not(.authbg) .pq-bar[hidden]{display:none}
:root[data-theme] body.desk:not(.authbg) .pq-bar.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad-ink)}
:root[data-theme] body.desk:not(.authbg) .pq-bar.quiet{border-color:var(--line);background:var(--card);color:var(--muted)}
:root[data-theme] body.desk:not(.authbg) .pq-bar b{font-weight:700}
:root[data-theme] body.desk:not(.authbg) .pq-bar .pq-who{flex:1 1 140px;min-width:0;overflow-wrap:anywhere;font-size:13px;opacity:.9}
:root[data-theme] body.desk:not(.authbg) .pq-bar .pq-go{margin-left:auto;font-weight:700;white-space:nowrap}
@media (min-width:900px){ :root[data-theme] body.desk:not(.authbg) .pq-bar{top:120px} }
#pqSheet .pq-note{margin:2px 0 10px;line-height:1.5}
#pqSheet .pq-row{padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:12px}
#pqSheet .pq-row.fail{border-color:var(--bad);border-left-width:4px}
#pqSheet .pq-top{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
#pqSheet .pq-amt{margin-left:auto;font-weight:700;white-space:nowrap}
#pqSheet .pq-meta{font-size:12px;margin-top:2px}
#pqSheet .pq-st{font-size:13px;margin-top:6px;color:var(--warn-ink)}
#pqSheet .pq-st.muted{color:var(--muted)}
#pqSheet .pq-err{font-size:13px;margin-top:6px;color:var(--bad-ink);overflow-wrap:anywhere}
#pqSheet .pq-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ===== 💳 DESK CARD v2 — two record buttons + "Also for this student" (2026-10-15) =====
   quick.html card: 💵 Cash / 💳 Card side by side (nothing pre-selected — the method is the
   button), coloured with the payment-grid tokens so cash and card never look alike;
   🎁 / ＋ Extra are quiet links under them; the Pay tab is one find box. */
.dk-amt{margin-top:14px}
.dk-for{margin:8px 2px 0;font-size:13px}
.dk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.dk-two button.dk-rec{margin:0;min-height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 8px;font-size:16px;font-weight:700;line-height:1.15;background:var(--pay-cash-bg) !important;color:var(--pay-cash-fg) !important;
  border:2px solid var(--pay-cash-edge) !important;box-shadow:none !important;text-shadow:none}
.dk-two button.dk-rec.dk-cardb{background:var(--pay-card-bg) !important;color:var(--pay-card-fg) !important;border-color:var(--pay-card-edge) !important}
.dk-two button.dk-rec:disabled{opacity:.45;cursor:not-allowed}
.dk-two button.dk-rec kbd{font:600 11px/1 inherit;opacity:.75;border:1px solid currentColor;border-radius:5px;padding:2px 5px;background:transparent}
.dk-hint{font-size:12px;margin:4px 2px 0}
.dk-hint:empty{display:none}
.dk-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dk-more button{flex:1 1 auto}
.dk-also:empty{display:none}
.dk-also{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.dk-als{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.dk-alh{font-size:12px;font-weight:600;color:var(--muted);margin:0 2px 2px}
.dk-al{display:flex;align-items:center;gap:10px;min-height:40px;padding:2px}
.dk-al+.dk-al{border-top:1px dashed var(--line)}
.dk-al.quiet{color:var(--muted);font-size:13px}
.dk-ali{flex:0 0 auto;font-size:18px}
.dk-alt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:14px}
.dk-al button{flex:0 0 auto}
.dk-payfind .pf-note{margin:2px 0 10px;line-height:1.5}
.dc-sheet .dc-p{margin:4px 0 10px;line-height:1.5}
.dc-sheet .dc-l{display:block;margin:0 0 12px;font-size:13px;color:var(--muted)}
.dc-sheet .dc-l input,.dc-sheet .dc-l select{display:block;width:100%;margin-top:4px}
.dc-sheet .dc-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:6px}
.dc-sheet .dc-bar button{min-height:52px;font-size:16px;font-weight:700}
.dc-sheet .dc-cancel{width:100%;margin-top:8px}

/* ===== 🧑‍🎓 NEW STUDENT — one name-first form (desk pass part 3, 2026-10-15) =====
   quick.html New › New student: name + phone → "Already in the system?" → 👥 group / 🌱 list →
   profile → one button naming the result. Chips reuse .tu-chip; rows are 44 px choices. */
.nf-card label,.nf-card .nf-lab{display:block;margin-top:10px}
.nf-sub{margin:18px 0 6px;font-weight:700;font-size:14px}
.nf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.nf-days{margin-top:2px}
.nf-dest{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nf-big{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:10px 12px;border-radius:12px;
  background:var(--card) !important;color:var(--txt) !important;border:1px solid var(--line) !important;box-shadow:none !important;text-align:left;font-size:15px}
.nf-big>span{font-size:20px}
.nf-big small{font-size:12px;color:var(--muted);font-weight:500}
.nf-big.on{border:2px solid var(--acc) !important;background:var(--acc-soft,rgba(79,70,229,.08)) !important}
.nf-list{display:flex;flex-direction:column;gap:6px}
.nf-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:8px 12px;border-radius:12px;text-align:left;
  background:var(--card) !important;color:var(--txt) !important;border:1px solid var(--line) !important;box-shadow:none !important;font-size:14px;width:100%}
.nf-row .nf-rs{font-size:12px;color:var(--muted)}
.nf-row.on{border:2px solid var(--acc) !important;background:var(--acc-soft,rgba(79,70,229,.08)) !important}
.nf-dup{margin-top:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--warn);background:var(--warn-soft)}
.nf-duph{font-weight:700;font-size:13px;color:var(--warn-ink);margin-bottom:4px}
.nf-dr{display:flex;gap:8px;align-items:center;width:100%;min-height:44px;padding:4px 6px;text-align:left;font-size:14px;
  background:transparent !important;color:var(--txt) !important;border:0 !important;box-shadow:none !important;border-radius:8px}
.nf-dr>span:last-child{flex:1;min-width:0;overflow-wrap:anywhere}
.nf-dupn{font-size:12px;margin-top:2px}
.nf-err{min-height:0;margin-top:10px;color:var(--bad-ink);font-size:13px}
.nf-err:empty{display:none}
button.nf-save{width:100%;min-height:52px;margin-top:14px;font-size:16px;font-weight:700;border-radius:12px}
/* group first (2026-10-16): every group of the level as an equal card → a pinned line with Change */
.nf-chips .nf-cn{font-size:12px;font-weight:600;opacity:.7;margin-left:2px}
.nf-hint{font-size:13px;margin-top:4px}
.nf-dh{margin:10px 0 2px;font-size:12px;font-weight:700;color:var(--muted)}
.nf-dh:first-child{margin-top:0}
.nf-gc{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;min-height:72px;padding:10px 12px;border-radius:12px;text-align:left;
  background:var(--card) !important;color:var(--txt) !important;border:1px solid var(--line) !important;box-shadow:none !important;font-size:14px;font-weight:500}
.nf-gc:hover{border-color:var(--acc) !important}
.nf-gt{display:flex;align-items:center;gap:8px}
.nf-gt b{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
.nf-gn{flex:none;font-size:13px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--raised,rgba(127,127,127,.12))}
.nf-gf{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.nf-pin{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;scroll-margin-top:130px;
  border:2px solid var(--acc);background:var(--acc-soft,rgba(79,70,229,.08))}
.nf-pck{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--ok)}
.nf-pw{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
.nf-pin button{flex:none}

/* =====================================================================
   🧹 DESK PASS part 4 — look + words (quick.html)
   ===================================================================== */
/* top bar 📷 Scan: the DS square-icon rule (tb-ib = 44 square, no padding) squeezed "📷 Scan" —
   on laptops it is an icon + word button, on phones the icon square */
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .topbar button.tb-ib.dk-scan{width:auto;min-width:var(--h-sm,36px);padding:0 12px;gap:6px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow:visible}
@media (max-width:700px){
  :root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .topbar button.tb-ib.dk-scan{width:var(--h-sm,36px);padding:0}
}
/* Pay › Mock: one instruction line, session chips, the method is the button */
.mk-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.mk-top .pf-note{flex:1;min-width:180px;margin:0;line-height:1.5}
.mk-sess{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
:root[data-theme] body.desk:not(.authbg) button.mk-chip,button.mk-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;height:auto;
  padding:6px 12px;border-radius:12px;background:var(--card);color:var(--txt);border:1px solid var(--line2,var(--line));box-shadow:none;text-align:left;font-weight:400}
button.mk-chip b{font-size:14px;font-weight:600}
button.mk-chip span{font-size:12px;color:var(--mut)}
:root[data-theme] body.desk:not(.authbg) button.mk-chip.on,button.mk-chip.on{border:2px solid var(--acc);background:var(--acc-soft,var(--card))}
.mk-none{padding:8px 0}
.mk-res{margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mk-res button.qs-row{min-height:44px;height:auto;padding:8px 12px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;color:var(--txt);border-radius:0;width:100%}
.mk-res .qs-row span{font-size:12px}
.mk-two{margin-top:14px}
:root[data-theme] body.desk:not(.authbg) button.mk-later{width:100%;margin-top:8px}
#p-coins .pf-note,#p-paypay .pf-note{margin:0 0 10px;line-height:1.5}

/* =====================================================================
   🏠 DESK HOME v2 — search first · To do rows · 💵 drawer · 🕒 Today
   (docs/plans/2026-10-16-desk-home-v2-design.md)
   ===================================================================== */
/* on Home the bar's 🔍 / 📷 hide — Home has its own search bar; the outbox strip becomes the first To do row */
:root[data-theme] body.tui.desk.home-on:not(.authbg) .topbar :is(#omniWrap,#omniTgl,#tbScan){display:none !important}
:root[data-theme] body.tui.desk.home-on:not(.authbg) #pqBar{display:none !important}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .hq{position:relative;display:flex;align-items:center;gap:4px;min-height:54px;margin:2px 0 0;
  padding:0 5px 0 14px;border:1px solid var(--line2,var(--line));border-radius:16px;background:var(--card);box-shadow:var(--rim,none)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .hq:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-ring,transparent)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .hq-ic{font-size:18px;line-height:1}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .hq input{flex:1;min-width:0;height:50px;min-height:0;margin:0;padding:0 8px;border:0;border-radius:0;
  background:transparent;box-shadow:none;font-size:16px;color:var(--txt);outline:none}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hq-scan{flex:0 0 44px;width:44px;height:44px;min-height:0;padding:0;border-radius:12px;
  display:grid;place-items:center;font-size:20px;line-height:1;background:var(--raised,var(--hover));border:1px solid var(--line);box-shadow:none;color:var(--txt)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hq-scan:hover{border-color:var(--acc)}
:root[data-theme] body.tui.desk:not(.authbg) #hmDrop{position:static;margin:6px 0 0;max-height:60vh;overflow-y:auto;padding:6px;border-radius:14px;
  border:1px solid var(--line);background:var(--card)}
:root[data-theme] body.tui.desk:not(.authbg) #hmDrop .omni-row{min-height:44px}
/* two parts: To do + Today | 💵 drawer (one column on phones) */
:root[data-theme] body.tui.desk:not(.authbg) .hm2{display:grid;gap:14px;align-items:start}
@media (min-width:900px){ :root[data-theme] body.tui.desk:not(.authbg) .hm2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
:root[data-theme] body.tui.desk:not(.authbg) .hm2-a{display:flex;flex-direction:column;gap:10px;min-width:0}
:root[data-theme] body.tui.desk:not(.authbg) .hm-th{display:flex;align-items:center;gap:8px;margin:0 2px 8px;font-size:14px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tn{min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--bad);color:#fff}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;height:auto;margin:0 0 8px;
  padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--txt);text-align:left;box-shadow:var(--rim,none);font-weight:400}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-row:hover{border-color:var(--acc)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-ri{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:var(--raised,var(--hover))}
:root[data-theme] body.tui.desk:not(.authbg) .hm-rt{flex:1;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
:root[data-theme] body.tui.desk:not(.authbg) .hm-rs{flex:0 1 auto;font-size:13px;font-weight:600;color:var(--mut);text-align:right}
:root[data-theme] body.tui.desk:not(.authbg) .hm-rg{color:var(--mut);font-size:18px;line-height:1}
:root[data-theme] body.tui.desk:not(.authbg) button.hm-row.due .hm-rs{color:var(--acc)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-row.bad{border-left:4px solid var(--bad)}
:root[data-theme] body.tui.desk:not(.authbg) button.hm-row.bad .hm-rs{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .hm-done{margin:2px 4px 0;font-size:13px;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-calm{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px;padding:8px 14px;border-radius:14px;
  border:1px dashed var(--line2,var(--line));font-size:14px;font-weight:600}
:root[data-theme] body.tui.desk:not(.authbg) .hm-calm .ok{color:var(--ok)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-calm .muted{font-weight:500;font-size:13px}
/* 🕒 one line */
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-today{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;height:auto;padding:8px 14px;
  border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--txt);text-align:left;font-size:14px;font-weight:600;box-shadow:none}
:root[data-theme] body.tui.desk:not(.authbg) button.hm-today[hidden]{display:none}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tdt{flex:1;min-width:0;overflow-wrap:anywhere}
/* 💵 drawer card */
:root[data-theme] body.tui.desk:not(.authbg) .hm-dr{margin:0;padding:14px 16px 8px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dr.empty{padding:0}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-dr-empty{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;height:auto;padding:0 16px;
  background:none;border:0;box-shadow:none;color:var(--mut);font-size:14px;font-weight:600;text-align:left}
:root[data-theme] body.tui.desk:not(.authbg) button.hm-dr-empty .hm-rg{margin-left:auto}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dk{font-size:14px;font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dtot{font-size:28px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dtot small{font-size:12px;font-weight:600;color:var(--mut);letter-spacing:0}
:root[data-theme] body.tui.desk:not(.authbg) .hm-bar{display:flex;height:8px;margin:10px 0 6px;border-radius:99px;overflow:hidden;background:var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-bar i.c{background:var(--pay-cash-edge)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-bar i.k{background:var(--pay-card-edge)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-split{display:flex;gap:16px;font-size:13px;font-weight:700;margin-bottom:6px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dr .tcash{color:var(--pay-cash-fg)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dr .tcard{color:var(--pay-card-fg)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dl{display:flex;align-items:center;gap:8px;min-height:44px;border-top:1px solid var(--line);font-size:14px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dt{flex:0 0 42px;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-dn.lnk{min-height:36px;height:auto;padding:0;background:none;border:0;box-shadow:none;color:var(--txt);
  text-align:left;font-size:14px;font-weight:600;border-radius:6px}
:root[data-theme] body.tui.desk:not(.authbg) button.hm-dn.lnk:hover{color:var(--acc);text-decoration:underline}
:root[data-theme] body.tui.desk:not(.authbg) .hm-da{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dl .rr-k{flex:0 0 auto}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-pr,:root[data-theme] body.tui.desk:not(.authbg) span.hm-pr{flex:0 0 36px;width:36px;height:36px;min-height:0;
  padding:0;border-radius:10px;display:grid;place-items:center;font-size:16px;background:none;border:1px solid transparent;box-shadow:none;color:var(--txt)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-pr:hover{border-color:var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dl.wait{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui.desk:not(.authbg) .hm-dw{flex:0 0 auto;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--warn-soft,var(--hover))}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.hm-all{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:44px;height:auto;
  margin:0;padding:0 2px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;color:var(--acc);font-size:14px;font-weight:700}
/* 🕒 sheet */
:root[data-theme] body.tui.desk:not(.authbg) .hm-tl{margin:6px 0 4px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tlr{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 2px;border-bottom:1px solid var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tlt{flex:0 0 96px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tln{flex:1;min-width:0;display:flex;flex-direction:column}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tln small{color:var(--mut);font-size:12.5px}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tls{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tlr.now .hm-tls{color:var(--acc)}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tlr.done{opacity:.55}
:root[data-theme] body.tui.desk:not(.authbg) .hm-tlnote{font-size:12px;margin:8px 2px 0}
.hm-dl .rr-k{font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:2px 7px}
.hm-dl .rr-k.mock{background:rgba(150,154,168,.16);color:var(--mut)}
.hm-dl .rr-k.debt{background:rgba(248,113,113,.14);color:var(--bad-ink,var(--bad))}
.hm-dl .rr-k.extra{background:rgba(251,191,36,.14);color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui.desk:not(.authbg) #hmSearch #hmQ{flex:1;min-width:0;width:auto;height:50px;min-height:0;margin:0;padding:0 8px;border:0;border-radius:0;
  background:transparent;box-shadow:none;font-size:16px;outline:none}
:root[data-theme] body.tui.desk:not(.authbg) #hmDrawer button.hm-dn{display:block;flex:1;min-width:0;text-align:left;justify-content:flex-start;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] body.tui.desk:not(.authbg) #p-home .hm-top{margin-top:12px}

/* =====================================================================
   💳 DESK CARD v3 — no scroll: header · one scrolling middle · pinned pay bar
   (docs/plans/2026-10-16-desk-card-v3-design.md)
   ===================================================================== */
.dk-card.dk-v2{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.dk-card.dk-v2 > .dk-id,.dk-card.dk-v2 > .dk-row3{flex:0 0 auto}
.dk-card.dk-v2 .dk-mid{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -16px;padding:0 16px 10px}
@media (min-width:900px){ .dk-card.dk-v2 .dk-mid{margin:0 -20px;padding:0 20px 10px} }
.dk-card.dk-v2 .dk-foot{flex:0 0 auto;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
  background:var(--card);box-shadow:0 -10px 18px -16px rgba(0,0,0,.45)}
@media (min-width:900px){ .dk-card.dk-v2 .dk-foot{margin:0 -20px;padding:12px 20px 18px} }
/* header: the schedule line carries 📞 💬 ✈️ 👪 on its right */
.dk-card.dk-v2 .dk-id{gap:10px}
.dk-card.dk-v2 .dk-ava.ss-ava{flex-basis:44px;width:44px;height:44px;font-size:15px}
.dk-card.dk-v2 .dk-row3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:6px 0 0;min-height:36px}
.dk-card.dk-v2 .dk-sch{flex:1 1 auto;min-width:0}
.dk-card.dk-v2 .dk-contact{display:flex;gap:6px;margin:0 0 0 auto;flex-wrap:nowrap}
.dk-card.dk-v2 .dk-contact.none{font-size:12.5px}
.dk-card.dk-v2 .dk-cb{flex:0 0 36px;width:36px;min-width:0;min-height:0;height:36px;border-radius:50%;font-size:16px;padding:0;display:grid;place-items:center}
/* middle: one slim chip row */
.dk-card.dk-v2 .dk-pills{display:flex;gap:6px;margin:10px 0 0;overflow-x:auto;scrollbar-width:none}
.dk-card.dk-v2 .dk-pills::-webkit-scrollbar{display:none}
.dk-card.dk-v2 button.dk-pill{flex:1 0 auto;flex-direction:row;align-items:center;justify-content:center;min-height:40px;height:40px;padding:0 10px;border-radius:12px;white-space:nowrap}
.dk-card.dk-v2 button.dk-pill b{font-size:13px;overflow-wrap:normal}
.dk-card.dk-v2 button.dk-pill small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dk-card.dk-v2 .dk-sec{margin-top:10px;padding:10px 12px}
.dk-card.dk-v2 .dk-next{font-size:14px}
.dk-card.dk-v2 .dk-next b{font-size:16px}
.dk-card.dk-v2 .pm-list{margin:8px 0 2px}
.dk-card.dk-v2 .pm-row{min-height:40px;padding:4px 12px;gap:10px}
.dk-card.dk-v2 .dk-also{margin-top:8px}
/* the pinned bar */
.dk-card.dk-v2 .dk-frow{display:flex;align-items:center;gap:8px}
.dk-card.dk-v2 .dk-frow .dk-amt{flex:1 1 auto;margin:0;min-width:0}
.dk-card.dk-v2 .dk-amt input{height:44px;font-size:18px}
.dk-card.dk-v2 .dk-frow .dk-for{flex:0 1 auto;margin:0;white-space:nowrap}
.dk-card.dk-v2 button.dk-mbtn{flex:0 0 auto;min-height:44px;padding:0 12px;white-space:nowrap}
.dk-card.dk-v2 button.dk-mbtn.on{border-color:var(--acc)}
.dk-card.dk-v2 .dk-two{margin-top:8px}
.dk-card.dk-v2 .dk-morebox{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.dk-card.dk-v2 .dk-morebox[hidden]{display:none}
.dk-card.dk-v2 .dk-morebox button{flex:1 1 auto}
.dk-card.dk-v2 button.dk-go{flex:1 1 auto;min-height:48px;font-size:15px;font-weight:700}
@media (max-width:380px){ .dk-card.dk-v2 .dk-frow .dk-for{display:none} }
/* one line per month inside the card: "Oct · Now   Unpaid · After Aug" */
.dk-card.dk-v2 .pm-row{grid-template-columns:auto minmax(0,1fr) auto;min-height:38px}
.dk-card.dk-v2 .pm-mo{display:flex;align-items:baseline;gap:5px;min-width:46px}
.dk-card.dk-v2 .pm-mo b{font-size:14px}
.dk-card.dk-v2 .pm-mo small{font-size:11px}
.dk-card.dk-v2 .pm-what{display:flex;align-items:baseline;gap:6px;min-width:0}
.dk-card.dk-v2 .pm-what small{margin:0;flex:0 1 auto}
.dk-card.dk-v2 .pm-what small::before{content:"· "}
.dk-card.dk-v2 .pm-what b{white-space:nowrap}
.dk-card.dk-v2 .pm-amt{height:24px;font-size:13px}
/* the schedule shrinks so the 📞 💬 ✈️ 👪 icons stay on its line */
.dk-card.dk-v2 .dk-row3{flex-wrap:nowrap}
.dk-card.dk-v2 .dk-sch{flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-card.dk-v2 .dk-row3 .pill{flex:0 0 auto}
/* chips share the width; small phones lose the emoji spacing first */
.dk-card.dk-v2 button.dk-pill{flex:1 1 auto;min-width:0;padding:0 8px}
@media (max-width:400px){ .dk-card.dk-v2 button.dk-pill b{font-size:12px} }
.dk-card.dk-v2 .pm-mo{min-width:76px}

/* ===================================================================
   🧹 NEW TAB — small fixes (2026-10-16, FRONTEND-ONLY)
   New beginner list header on one row (✏️ / 🗂 = 36 px squares),
   Mock: Mark paid on its own bottom row, plain outsider note.
   =================================================================== */
.nb-lacts{align-items:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .nb-lacts .nb-ib{width:36px;min-width:36px;min-height:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.mk-note{font-size:13px;margin:10px 0 0}
.mk-settle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line,rgba(127,127,127,.2))}
.mk-settle .muted{flex:1;min-width:160px;font-size:13px}
.nb-lacts .grow{flex:1}
.mk-form > label:first-child{margin-top:0}
.nf-card > label:first-child{margin-top:0}

/* =====================================================================
   ⚡ DESK PAY v4 — pay right in Home's search + 🪪 the full card
   (docs/plans/2026-10-16-desk-pay-v4-design.md)
   ===================================================================== */
/* search rows: the row = take a payment, 🪪 beside it = the full card */
.om-wrap{display:flex;align-items:stretch;gap:6px}
.om-wrap > .omni-row{flex:1 1 auto;min-width:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.om-card{flex:0 0 44px;width:44px;min-height:44px;padding:0;border-radius:12px;
  background:var(--raised);border:1px solid var(--line);color:var(--txt);font-size:18px;box-shadow:none;align-self:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) button.om-card:hover{background:var(--hover);filter:none}
/* ⚡ the pay panel */
.hp{margin:12px 0 4px;padding:14px 16px 16px;border-radius:18px;border:2px solid var(--acc-ring,var(--acc));scroll-margin-top:72px}
.hp[hidden]{display:none}
.hp-h{display:flex;align-items:center;gap:10px}
.hp-h .dk-ava.ss-ava{flex:0 0 44px;width:44px;height:44px;font-size:15px}
.hp-who{flex:1 1 auto;min-width:0}
.hp-who > b{display:block;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.hp-sub{font-size:12.5px;color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hp-h button.hp-full{flex:0 0 auto;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .hp-h button.hp-x{flex:0 0 36px;width:36px;min-height:36px;height:36px;padding:0;border-radius:12px;
  background:var(--raised);border:1px solid var(--line);color:var(--txt);box-shadow:none;display:grid;place-items:center}
.hp-body{display:grid;gap:12px;margin-top:12px}
@media (min-width:900px){ .hp-body{grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:start} }
.hp-for{padding:12px 14px;border-radius:14px;background:var(--raised);border:1px solid var(--line)}
.hp-for.ok{background:var(--ok-soft)} .hp-for.mid{background:var(--warn-soft)} .hp-for.bad{background:var(--bad-soft)}
.hp-fl{display:block;font-size:12px;font-weight:600;color:var(--mut)}
.hp-fm{display:block;font-size:24px;font-weight:800;letter-spacing:.3px;line-height:1.2;margin-top:2px;overflow-wrap:anywhere}
.hp-for.bad .hp-fm{color:var(--bad-ink,var(--bad))}
.hp-fs{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.hp-lab{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:0 0 4px}
.hp-prev{margin-top:12px}
.hp-pr{display:grid;grid-template-columns:44px auto minmax(0,1fr);align-items:baseline;gap:8px;padding:6px 0;font-size:13.5px}
.hp-pr + .hp-pr{border-top:1px solid var(--line)}
.hp-pm{font-weight:700}
.hp-pa{white-space:nowrap}
.hp-pa.m-cash{color:var(--pay-cash-fg)} .hp-pa.m-card{color:var(--pay-card-fg)} .hp-pa.m-bonus{color:var(--pay-bonus-fg,var(--acc))}
.hp-pr small{font-size:12px;overflow-wrap:anywhere}
.hp-none{font-size:13px}
.hp-amt{display:block;margin:0}
.hp-in{position:relative;display:block}
.hp-in input{width:100%;height:56px !important;font-size:24px !important;font-weight:800;padding-right:56px !important;margin:0}
.hp .dk-two{margin-top:10px}
.hp .dk-two button.dk-rec{min-height:60px;font-size:16px}
.hp-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.hp-also{display:contents}
/* 🪪 full card v4 — one always-visible profile line + five tabs */
.dk-card.dk-v4 .dk-facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;font-size:12.5px;color:var(--mut);flex:0 0 auto}
.dk-card.dk-v4 .dk-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:10px 0 0;padding:4px;border-radius:14px;background:var(--seg,var(--raised));flex:0 0 auto}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .dk-card.dk-v4 button.dk-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-height:52px;height:auto;padding:4px 2px;border-radius:10px;background:transparent;border:0;color:var(--mut);box-shadow:none;min-width:0;font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .dk-card.dk-v4 button.dk-tab.on{background:var(--card);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .dk-card.dk-v4 button.dk-tab:hover:not(.on){background:var(--hover);filter:none}
.dk-card.dk-v4 .dk-ti{font-size:16px;line-height:1.1}
.dk-card.dk-v4 .dk-tl{font-size:11.5px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-card.dk-v4 .dk-ts{font-size:10.5px;font-weight:700;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
.dk-card.dk-v4 .dk-ts.ok{color:var(--ok-ink,var(--ok))} .dk-card.dk-v4 .dk-ts.mid{color:var(--warn-ink,var(--warn))} .dk-card.dk-v4 .dk-ts.bad{color:var(--bad-ink,var(--bad))}
.dk-card.dk-v4 .dk-sec{margin-top:12px;padding:0;border:0;background:none;border-radius:0}
.dk-card.dk-v4 .dk-pr.miss b{color:color-mix(in srgb,var(--warn) 62%,var(--txt))}
.dk-card.dk-v4 .sc-cats{margin:0 0 6px;padding:0 0 4px}
.dk-card.dk-v4 .sc-mo{background:var(--card)}
.dk-card.dk-v4 .dk-foot .dk-frow{min-height:44px}
/* the months list's 💳 chip carries the class "card" — never the global .card box */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .pm-amt.card{padding:0 10px;margin:0;border:0;border-radius:8px;box-shadow:none;min-height:0;backdrop-filter:none;background:var(--pay-card-bg);color:var(--pay-card-fg)}
.hp-fn{display:none}
@media (max-width:420px){ .hp-fw{display:none} .hp-fn{display:inline} .hp-h{gap:8px} }

/* ===== 🪙 DESK PASS — purchase desk (2026-10-16) =====
   Hand-over box pinned above the tabs (#pdHand), hairline rows instead of row
   cards, one age tag per row (amber = waiting too long), one big Hand over. */
.pd-pin{margin:0 0 14px}
.pd-pin .pd-hand{margin:0}
.pd-hand .pd-htitle{display:block;font-weight:700;margin-bottom:8px}
.pd-codebox{align-items:stretch}
.pd-row{display:flex;align-items:center;gap:10px;margin:0;padding:10px 0;border-top:1px solid var(--line)}
.pd-dlist>.pd-row:first-child,#pdPick>.pd-row:first-child{border-top:0}
.pd-group{padding:10px 12px 4px}
.pd-ghead{flex-wrap:nowrap}
.pd-ghead .pd-all{flex:0 0 auto;white-space:nowrap}
.pd-who{flex:1;min-width:0;overflow-wrap:anywhere}
.pd-line{flex:1}
.pd-age{flex:0 0 auto;display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:8px;font-size:12px;
  font-weight:600;white-space:nowrap;color:var(--mut);background:var(--bg2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.pd-age.late{color:var(--warn-ink,var(--warn));background:var(--warn-soft,color-mix(in srgb,var(--warn) 14%,transparent));
  border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .pd-one{width:36px;min-width:36px;padding:0;flex:0 0 36px}
.pd-also{margin-top:10px;padding:8px 10px;border-radius:10px;font-size:var(--fs-sm,13px);
  background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.pd-cact .pd-give{flex:1 1 260px;max-width:480px}
.pd-foot{margin:10px 0 0;font-size:12px}
@media (max-width:560px){
  .pd-ghead{flex-wrap:wrap}
  .pd-ghead .pd-all{flex:1 1 100%}
  .pd-dlist .pd-row,#pdPick .pd-row{flex-wrap:wrap}
  .pd-dlist .pd-line,#pdPick .pd-line{flex:1 1 100%}
  .pd-dlist .pd-age,#pdPick .pd-age{margin-left:50px}
}

/* ===== 🎁 WAITING AT THE DESK — teacher drill (migrate-pickup-v1) =====
   Info card, never red: items ready at reception per own student, oldest first. */
.pk-g{font-weight:500;font-size:13px}
.pk-items{margin:8px 0 2px}
.pk-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.pk-it:first-child{border-top:0}
.pk-in{min-width:0;overflow-wrap:anywhere}
.pk-act{margin-top:8px}
.pk-card .adml-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pk-card .adml-contact .acb{justify-content:center;white-space:nowrap;min-height:44px}
.pk-card .adml-contact .cphone{grid-column:1/-1;text-align:center}

/* ===================== 🎧 LISTENING PLAYER (Sunday exam step, migrate-course-v9) ===================== */
.cfa-view{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6)}
.cfa-view .cfa-card{width:min(440px,100%);background:#111;color:#fff;border:1px solid #2a2a2a;border-radius:20px;padding:16px 16px 12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cfa-view .cfa-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cfa-view .cfa-top b{flex:1;min-width:0;font-size:16px}
.cfa-view .cfa-top button{min-width:44px;min-height:44px;color:#fff;border-color:#3a3a3a;background:transparent}
.cfa-view .cfa-msg{padding:18px 4px;color:#cfcfcf;font-size:15px}
.cfa-view .cfa-msg.err{color:#fdba74}
.cfa-view .cfa-ctl{display:flex;align-items:center;gap:14px}
.cfa-view .cfa-ctl[hidden],.cfa-view .cfa-btns[hidden],.cfa-view .cfa-msg[hidden]{display:none}
.cfa-view .cfa-play{flex:none;width:64px;height:64px;min-height:64px;border-radius:50%;font-size:24px;padding:0;background:#dc2626;color:#fff;border:0}
.cfa-view .cfa-mid{flex:1;min-width:0}
.cfa-view .cfa-bar{height:10px;border-radius:6px;background:#2a2a2a;cursor:pointer;overflow:hidden}
.cfa-view .cfa-bar i{display:block;height:100%;width:0;background:#fff;border-radius:6px}
.cfa-view .cfa-t{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:#b5b5b5;font-variant-numeric:tabular-nums}
.cfa-view .cfa-btns{display:flex;gap:8px;margin-top:14px}
.cfa-view .cfa-btns button{flex:1;min-height:44px;color:#fff;border-color:#3a3a3a;background:transparent}
.cfa-view .cfa-note{margin:12px 2px 0;font-size:12.5px;color:#9a9a9a}
/* 🏆 Sunday exam step — how to run it (coursemap.js) */
.cm-steps{margin:6px 0 8px;padding-left:20px;font-size:14px;line-height:1.5}
.cm-steps li{margin:3px 0}
/* a file row's name never shrinks below a readable width (a long note once squeezed "Listening · Part 1" into one letter per line) */
:root[data-theme] body.tui:not(.authbg) button.cm-file b{min-width:min(50%,10em)}
:root[data-theme] body.tui:not(.authbg) button.cm-file small{min-width:0;text-align:right}
/* =====================================================================
   📚 LIBRARY — admin page (migrate-library-v1, `lbk-` prefix; never `lb-`,
   the leaderboard owns it). Covers are 3:4 R2 pictures (kind bk).
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) .lbk-st{padding:12px 14px;border-radius:14px;margin-bottom:12px;font-size:14px;line-height:1.5;
  border:1px solid var(--line);background:var(--card)}
:root[data-theme] body.tui:not(.authbg) .lbk-st.on{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .lbk-st.off{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--card))}
:root[data-theme] body.tui:not(.authbg) .lbk-st.warn{border-color:var(--bad)}
:root[data-theme] body.tui:not(.authbg) .lbk-tabs{margin-bottom:12px}
:root[data-theme] body.tui:not(.authbg) .lbk-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .lbk-bar input{flex:1;min-width:0}
:root[data-theme] body.tui:not(.authbg) .lbk-sum{font-size:13px;margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .lbk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
:root[data-theme] body.tui:not(.authbg) .lbk-book{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
:root[data-theme] body.tui:not(.authbg) .lbk-book.hid{opacity:.55}
:root[data-theme] body.tui:not(.authbg) .lbk-cov{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--raised,var(--line))}
:root[data-theme] body.tui:not(.authbg) .lbk-nocov{display:grid;place-items:center;font-size:42px}
:root[data-theme] body.tui:not(.authbg) .lbk-bb{padding:10px 10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
:root[data-theme] body.tui:not(.authbg) .lbk-t{font-weight:700;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .lbk-a{font-size:12.5px;color:var(--muted)}
:root[data-theme] body.tui:not(.authbg) .lbk-cp{font-size:12px;color:var(--muted);margin-top:2px}
:root[data-theme] body.tui:not(.authbg) .lbk-tag{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:600;
  background:var(--raised,var(--line));color:var(--txt);white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .lbk-tag.ok{background:var(--ok-soft,rgba(16,185,129,.14));color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg) .lbk-tag.mid{background:var(--warn-soft,rgba(245,158,11,.15));color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui:not(.authbg) .lbk-tag.off{color:var(--muted)}
:root[data-theme] body.tui:not(.authbg) .lbk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
:root[data-theme] body.tui:not(.authbg) .lbk-gch{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
:root[data-theme] body.tui:not(.authbg) button.lbk-g,:root[data-theme] body.tui:not(.authbg) button.lbk-f{min-height:36px;padding:0 12px;border-radius:12px;font-size:13px;font-weight:600;
  background:var(--card);color:var(--txt);border:1px solid var(--line);box-shadow:none}
:root[data-theme] body.tui:not(.authbg) button.lbk-g.on,:root[data-theme] body.tui:not(.authbg) button.lbk-f.on{background:var(--pri);color:#fff;border-color:var(--pri)}
:root[data-theme="dark"] body.tui:not(.authbg) button.lbk-g.on,:root[data-theme="dark"] body.tui:not(.authbg) button.lbk-f.on{background:#fff;color:#000;border-color:#fff}
:root[data-theme] body.tui:not(.authbg) .lbk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
:root[data-theme] body.tui:not(.authbg) .lbk-loan{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .lbk-loan:first-child{border-top:0}
:root[data-theme] body.tui:not(.authbg) .lbk-th{width:48px;height:64px;flex:none;border-radius:8px;object-fit:cover;background:var(--raised,var(--line))}
:root[data-theme] body.tui:not(.authbg) .lbk-th.lbk-nocov{font-size:24px}
:root[data-theme] body.tui:not(.authbg) .lbk-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
:root[data-theme] body.tui:not(.authbg) .lbk-lt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .lbk-lw{font-size:13px;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .lbk-lm{font-size:12.5px;line-height:1.5}
:root[data-theme] body.tui:not(.authbg) .lbk-late{color:var(--bad-ink,var(--bad));font-weight:700}
:root[data-theme] body.tui:not(.authbg) .lbk-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
:root[data-theme] body.tui:not(.authbg) .lbk-num{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
:root[data-theme] body.tui:not(.authbg) .lbk-num b{font-size:24px;line-height:1.1}
:root[data-theme] body.tui:not(.authbg) .lbk-nl{font-size:12.5px;color:var(--muted)}
:root[data-theme] body.tui:not(.authbg) .lbk-num.mid b{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui:not(.authbg) .lbk-num.bad b{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui:not(.authbg) .lbk-oldn{margin-top:12px;font-size:13px}
:root[data-theme] body.tui:not(.authbg) .lbk-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
:root[data-theme] body.tui:not(.authbg) .lbk-top li{display:flex;align-items:center;gap:10px}
:root[data-theme] body.tui:not(.authbg) .lbk-top li span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
:root[data-theme] body.tui:not(.authbg) .lbk-top small{color:var(--muted)}
:root[data-theme] body.tui:not(.authbg) .lbk-fields{display:grid;gap:6px;margin-top:14px;max-width:420px}
:root[data-theme] body.tui:not(.authbg) .lbk-fields button{margin-top:8px;justify-self:start}
:root[data-theme] body.tui:not(.authbg) .lbk-old{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg) .lbk-old p{line-height:1.6;margin:0 0 12px}
@media (max-width:520px){
  :root[data-theme] body.tui:not(.authbg) .lbk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.lbk-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;width:100%;max-width:none;box-sizing:border-box}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.lbk-tabs .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:52px;height:auto;padding:4px 2px;font-size:12px;line-height:1.15;white-space:nowrap;position:relative}
  :root[data-theme] body.tui:not(.authbg):not(.ds0) .tabs.lbk-tabs .badge-n{position:absolute;top:2px;right:6px}
}

/* =====================================================================
   📚 LIBRARY — the desk (quick.html Desk › 📚 Books, migrate-library-v1, `lbd-` prefix)
   Reuses the purchase desk's .pd-hand box, .pd-row lines and .pd-age tags.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) .lbd-sw{display:flex;margin:0 0 12px;width:100%}
:root[data-theme] body.tui:not(.authbg) .lbd-sw[hidden]{display:none}
:root[data-theme] body.tui:not(.authbg) .lbd-sw button{flex:1;position:relative}
:root[data-theme] body.tui:not(.authbg) .lbd-off{margin:0 0 12px;line-height:1.5}
:root[data-theme] body.tui:not(.authbg) .lbd-row{align-items:center;flex-wrap:wrap}
:root[data-theme] body.tui:not(.authbg) .lbd-row .pd-line{flex:1 1 240px;min-width:0;display:flex;gap:10px;align-items:center}
:root[data-theme] body.tui:not(.authbg) .lbd-th{width:40px;height:54px;flex:none;border-radius:7px;object-fit:cover;background:var(--raised,var(--line))}
:root[data-theme] body.tui:not(.authbg) .lbd-nocov{display:grid;place-items:center;font-size:22px}
:root[data-theme] body.tui:not(.authbg) .lbd-sub{font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .lbd-acts{display:flex;gap:8px;margin-left:auto}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .lbd-ib{width:36px;min-width:36px;padding:0}
:root[data-theme] body.tui:not(.authbg) .pd-age.lbd-late{color:var(--bad-ink,var(--bad));background:color-mix(in srgb,var(--bad) 13%,transparent);font-weight:700}
:root[data-theme] body.tui:not(.authbg) .lbd-found:empty{display:none}
:root[data-theme] body.tui:not(.authbg) .lbd-found{margin-top:12px}
:root[data-theme] body.tui:not(.authbg) .lbd-card{display:flex;flex-direction:column;gap:10px}
:root[data-theme] body.tui:not(.authbg) .lbd-card .pd-line{display:flex;gap:12px;align-items:flex-start}
:root[data-theme] body.tui:not(.authbg) .lbd-card .lbd-th{width:56px;height:75px}
:root[data-theme] body.tui:not(.authbg) .lbd-go{width:100%}
:root[data-theme] body.tui:not(.authbg) .lbd-tel{display:inline-flex;align-items:center;min-height:36px;font-size:13px}
:root[data-theme] body.tui:not(.authbg) .lbd-done{padding:10px 12px;border-radius:12px;font-weight:600;
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok-ink,var(--ok))}

/* ==============================================================
   🧮 DESK Me › Records — count the drawer (2026-10-17, `drc-` prefix;
   docs/plans/2026-10-17-desk-me-records-design.md). Phone stacked,
   laptop: counter left, today's list right.
   ===================================================================== */
:root[data-theme] body.tui.desk:not(.authbg) .drc-grid{display:grid;gap:16px;align-items:start}
@media (min-width:900px){ :root[data-theme] body.tui.desk:not(.authbg) .drc-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr)} }
:root[data-theme] body.tui.desk:not(.authbg) .drc-grid > .card{margin:0}
:root[data-theme] body.tui.desk:not(.authbg) .drc-exp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0 8px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-k{font-size:14px;font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .drc-exp b{font-size:30px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--pay-cash-fg)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-wait{margin:0 0 10px;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.4;
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-wait[hidden],:root[data-theme] body.tui.desk:not(.authbg) .drc-card[hidden],
:root[data-theme] body.tui.desk:not(.authbg) .drc-none[hidden],:root[data-theme] body.tui.desk:not(.authbg) .drc-box[hidden],
:root[data-theme] body.tui.desk:not(.authbg) button.drc-open[hidden]{display:none}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:44px;padding:6px 12px;margin:0 0 10px;
  border-radius:12px;border:1px solid var(--pay-card-edge);background:var(--pay-card-bg);cursor:pointer;user-select:none}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card b{color:var(--pay-card-fg);font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card input{position:absolute;opacity:0;width:0;height:0}
:root[data-theme] body.tui.desk:not(.authbg) .drc-ck{width:22px;height:22px;flex:none;border-radius:6px;border:2px solid var(--mut);display:grid;place-items:center;order:3}
:root[data-theme] body.tui.desk:not(.authbg) .drc-cs{font-size:13px;color:var(--mut);order:2;margin-left:auto}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card input:checked ~ .drc-ck{background:var(--ok);border-color:var(--ok)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card input:checked ~ .drc-ck::after{content:"✓";color:#fff;font-size:14px;font-weight:800;line-height:1}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card input:checked ~ .drc-cs{color:var(--ok);font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .drc-card input:focus-visible ~ .drc-ck{outline:2px solid var(--acc);outline-offset:2px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-none{padding:12px 0;font-size:14px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.drc-open{width:100%;min-height:52px;font-size:15px;font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .drc-box{border-top:1px solid var(--line);padding-top:10px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-bh{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-row{display:grid;grid-template-columns:44px 44px minmax(0,72px) 44px minmax(0,1fr);align-items:center;gap:6px;padding:3px 0}
:root[data-theme] body.tui.desk:not(.authbg) .drc-nt{font-weight:800;font-size:15px;text-align:right;font-variant-numeric:tabular-nums;padding-right:4px}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.drc-st{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;font-size:18px;font-weight:700;
  background:var(--card);color:var(--txt);border:1px solid var(--line);box-shadow:none}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) input.drc-in{width:100%;min-width:0;height:44px;min-height:44px;padding:0 6px;text-align:center;font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;border-radius:12px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-lt{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:4px}
:root[data-theme] body.tui.desk:not(.authbg) .drc-sum{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .drc-sum b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .drc-vd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:44px;padding:8px 12px;border-radius:12px;
  font-size:15px;font-weight:700;color:var(--mut);border:1px dashed var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-vd.ok{color:var(--ok-ink,var(--ok));border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-vd.bad{color:var(--bad-ink,var(--bad));border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .drc-vd.warn{color:var(--warn-ink,var(--warn));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}

/* ==========================================================================
   📚 LIBRARY — teacher (library-move chunk D) · Materials › 📁 Library, tlb- prefix
   ========================================================================== */
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-mine{padding:14px;margin:0 0 14px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-mrow{display:flex;gap:12px;align-items:center}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-mrow .grow{min-width:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-mrow b{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-cv{flex:0 0 auto;width:54px;aspect-ratio:3/4;border-radius:10px;object-fit:cover;background:var(--raised);display:grid;place-items:center;font-size:24px;border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-st{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:8px;font-size:12.5px;font-weight:700;background:var(--acc-soft);color:var(--acc)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-st.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-no{flex:0 0 auto;text-align:center;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--raised)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-no span{display:block;font-size:11px;color:var(--muted)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-no b{display:block;font-size:17px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-hint{font-size:12.5px;margin-top:10px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-cat{padding:14px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-cat .mat-search{width:100%;box-sizing:border-box}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-gs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;flex-wrap:nowrap;scrollbar-width:none}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-gs .tu-chip{flex:0 0 auto;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px}
@media (min-width:900px){ :root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} }
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk{display:flex;flex-direction:column;text-align:left;padding:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);background-image:none;box-shadow:none;color:var(--txt);cursor:pointer;width:100%;height:auto;min-height:0;font:inherit}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk:hover{border-color:var(--acc)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk img,:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk .tlb-nc{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--raised);display:grid;place-items:center;font-size:40px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk .bd{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk .nm{font-weight:700;font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk .au{font-size:12px;color:var(--muted);line-height:1.3}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk .av{margin-top:auto;padding-top:4px;font-size:12px;font-weight:700;color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk.busy .av{color:var(--muted)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-bk.busy img{filter:grayscale(.6);opacity:.75}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-more{width:100%;margin-top:12px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-top{display:flex;gap:14px;align-items:flex-start}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-top .grow{min-width:0}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-top h3{margin:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-big{flex:0 0 auto;width:110px;aspect-ratio:3/4;border-radius:12px;object-fit:cover;background:var(--raised);display:grid;place-items:center;font-size:44px;border:1px solid var(--line)}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-tags span{padding:3px 9px;border-radius:8px;background:var(--raised);border:1px solid var(--line);font-size:12px;font-weight:600}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-desc{font-size:14px;line-height:1.55;margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-err{font-size:13px;color:var(--bad-ink,var(--bad));margin-top:10px}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-sheet .btnbar{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
:root[data-theme] body.tui:not(.authbg):not(.ds0) .tlb-sheet .btnbar .lg{flex:1}

/* =====================================================================
   📍 DESK Me › Check in — today at a glance (2026-10-17, `aci-` prefix;
   docs/plans/2026-10-17-desk-me-checkin-design.md). Headline · shift rows ·
   one button that says what it does · the result in place.
   ===================================================================== */
:root[data-theme] body.tui.desk:not(.authbg) .aci-card{display:flex;flex-direction:column;gap:12px;max-width:520px}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--mut) 6%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head.due{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-ht{font-size:19px;font-weight:800;line-height:1.3}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head.ok .aci-ht{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui.desk:not(.authbg) .aci-head.bad .aci-ht{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .aci-hs{margin-top:4px;font-size:14px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-shifts[hidden],:root[data-theme] body.tui.desk:not(.authbg) button.aci-go[hidden],
:root[data-theme] body.tui.desk:not(.authbg) button.aci-again[hidden]{display:none}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:6px 2px;border-top:1px solid var(--line);font-size:14px}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row:first-child{border-top:0}
:root[data-theme] body.tui.desk:not(.authbg) .aci-dl{color:var(--mut);font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .aci-s{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row.ok .aci-s{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row.late .aci-s{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row.bad .aci-s{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row.due .aci-s{color:var(--txt)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-row.idle .aci-s{color:var(--mut);font-weight:600}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.aci-go{width:100%;min-height:52px;font-size:17px;font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.aci-go:disabled{background:color-mix(in srgb,var(--mut) 14%,transparent);background-image:none;
  color:var(--mut);border:1px dashed var(--line);box-shadow:none;opacity:1;cursor:default}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.aci-again{align-self:center;min-height:44px}
:root[data-theme] body.tui.desk:not(.authbg) .aci-msg:empty{display:none}
:root[data-theme] body.tui.desk:not(.authbg) .aci-msg{padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.45}
:root[data-theme] body.tui.desk:not(.authbg) .aci-msg.ok{color:var(--ok-ink,var(--ok));background:color-mix(in srgb,var(--ok) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-msg.bad{color:var(--bad-ink,var(--bad));background:color-mix(in srgb,var(--bad) 10%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .aci-dm{margin-top:4px;color:var(--txt);font-weight:700}
:root[data-theme] body.tui.desk:not(.authbg) .aci-hint{margin:0;text-align:center;font-size:13px}

/* =====================================================================
   💎 DESK Me › Diamonds — one page (2026-10-17, `dmv-` prefix;
   docs/plans/2026-10-17-desk-me-diamonds-design.md). Hero → 📋 Needs you →
   📜 History by day; 🛍 Market and 🏆 Ranking are views with ‹ Diamonds.
   ===================================================================== */
:root[data-theme] body.tui.desk:not(.authbg) #p-diamonds [hidden]{display:none !important}
:root[data-theme] body.tui.desk:not(.authbg) #p-diamonds > div > .card,
:root[data-theme] body.tui.desk:not(.authbg) #p-diamonds .dmv-past{margin:0 0 14px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-hero{display:flex;flex-direction:column;gap:12px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-big{font-size:34px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-big.neg{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-wk{font-size:14px;font-weight:600;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-up{color:var(--ok-ink,var(--ok));font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-down{color:var(--bad-ink,var(--bad));font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .dmv-acts button{min-height:44px;font-size:14px;font-weight:700;white-space:nowrap}
/* 📋 needs you */
:root[data-theme] body.tui.desk:not(.authbg) .dmv-needs .sec-title{display:flex;align-items:center;gap:8px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-task{padding:12px 0;border-top:1px solid var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-task:first-child{border-top:0;padding-top:4px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-tt{font-size:15px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-tw{margin-top:4px;font-size:13px;font-weight:700;color:var(--warn-ink,var(--warn));font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-task.over .dmv-tw{color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-td{margin-top:4px;font-size:13px;line-height:1.45;color:var(--mut);overflow-wrap:anywhere}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-tr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:12.5px}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.dmv-past{display:block;width:100%;min-height:44px;font-weight:600}
/* 📜 history by day */
:root[data-theme] body.tui.desk:not(.authbg) .dmv-day{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 0 2px;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-day:first-child{margin-top:0}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-day b{font-size:13px;letter-spacing:0}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) button.dmv-more{width:100%;min-height:44px;margin-top:10px;font-weight:600}
/* views: ‹ Diamonds */
:root[data-theme] body.tui.desk:not(.authbg) .dmv-back{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px;font-size:16px}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .dmv-back button{min-height:44px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-bal{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-bsub{font-size:13px;flex-basis:100%}
/* 🛍 market rows */
:root[data-theme] body.tui.desk:not(.authbg) .dmv-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-item:first-child{border-top:0;padding-top:0}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-th{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:22px;overflow:hidden;
  background:color-mix(in srgb,var(--mut) 12%,transparent)}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-th img{width:100%;height:100%;object-fit:cover}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-in b{font-size:14px;overflow-wrap:anywhere}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-in .muted{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-buy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-pr{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-theme] body.tui.desk:not(.authbg):not(.ds0) .dmv-buy button{min-height:36px;padding:0 16px}
:root[data-theme] body.tui.desk:not(.authbg) .dmv-need{font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap}
:root[data-theme] body.tui.desk:not(.authbg) #p-diamonds{max-width:760px}

/* =====================================================================
   ⚙️ DESK Me › Settings — account line + 🔑 PIN form (2026-10-17, `stx-` prefix;
   docs/plans/2026-10-17-desk-me-settings-design.md)
   ===================================================================== */
:root[data-theme] body.tui.desk:not(.authbg) #p-set{max-width:560px}
:root[data-theme] body.tui.desk:not(.authbg) #p-set > .card{margin:0 0 14px}
:root[data-theme] body.tui.desk:not(.authbg) .stx-acct{display:flex;flex-direction:column;gap:4px;padding:12px 16px}
:root[data-theme] body.tui.desk:not(.authbg) .stx-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:14px;overflow-wrap:anywhere}
:root[data-theme] body.tui.desk:not(.authbg) .stx-line.muted{font-size:13px}
:root[data-theme] body.tui.desk:not(.authbg) .stx-k{font-size:13px;color:var(--mut)}
:root[data-theme] body.tui.desk:not(.authbg) .stx-err{min-height:0;margin-top:8px;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--bad-ink,var(--bad))}
:root[data-theme] body.tui.desk:not(.authbg) .stx-err:empty{display:none}

/* =====================================================================
   🗺 COURSE MAP v10 — 📱 phone answers · ✏ by hand · 🏆 revision results table
   (migrate-course-v10, docs/plans/2026-10-17-phone-sheet-boards-fix-design.md; cm-ph / cmb- prefixes)
   The table is "paper" (white) in both themes, coloured with the shell's 3 steps like result.html.
   ===================================================================== */
:root[data-theme] body.tui:not(.authbg) .cm-src{font-size:12px;margin-left:2px}
:root[data-theme] body.tui:not(.authbg) .cm-ph{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 6px 6px 12px;border-radius:12px;border:1px solid var(--acc,#4f46e5);
  background:color-mix(in srgb,var(--acc,#4f46e5) 8%,transparent);font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cm-ph > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-theme] body.tui:not(.authbg) .cm-ph b{overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cm-ph small{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums}
:root[data-theme] body.tui:not(.authbg) .cm-phx{font-size:12px;font-weight:700;color:var(--warn-ink,#b45309)}
:root[data-theme] body.tui:not(.authbg) .cm-ph button{flex:none;min-height:40px}
:root[data-theme] body.tui:not(.authbg) .cm-ph.done{border-color:var(--line);background:transparent;padding-right:12px}
:root[data-theme] body.tui:not(.authbg) .cm-phs{font-size:12.5px;font-weight:700;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .cm-phs.ok{color:var(--ok-ink,var(--ok,#10b981))}
:root[data-theme] body.tui:not(.authbg) .cm-phs.no{color:var(--mut)}
:root[data-theme] body.tui:not(.authbg) .cm-phl{margin-bottom:8px}
@media (max-width:420px){ :root[data-theme] body.tui:not(.authbg) .cm-ph{flex-wrap:wrap}
  :root[data-theme] body.tui:not(.authbg) .cm-ph > div{flex-basis:100%} :root[data-theme] body.tui:not(.authbg) .cm-ph button{flex:1} }
/* 🏆 the table */
:root[data-theme] body.tui:not(.authbg) .cmb-card{background:#fff;color:#111;border-radius:16px;overflow:hidden;border:1px solid #e3e1dc}
:root[data-theme] body.tui:not(.authbg) .cmb-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;font-size:12px;color:#5f6168;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .cmb-legend .lg{padding:2px 8px;border-radius:6px;border:1px solid}
:root[data-theme] body.tui:not(.authbg) .cmb-scroll{overflow-x:auto}
:root[data-theme] body.tui:not(.authbg) .cmb-t{width:100%;border-collapse:collapse;font-size:14px}
:root[data-theme] body.tui:not(.authbg) .cmb-t th{background:#111;color:#fff;font-size:11px;letter-spacing:.7px;text-transform:uppercase;padding:10px 6px;border:1px solid #2b2b31;font-weight:700;text-align:center;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .cmb-t th.l{text-align:left}
:root[data-theme] body.tui:not(.authbg) .cmb-t td{border:1px solid #dedad2;padding:8px 6px;text-align:center;font-variant-numeric:tabular-nums;color:#111;background:#fff}
:root[data-theme] body.tui:not(.authbg) .cmb-t tbody tr:nth-child(even) td.cmb-nm,:root[data-theme] body.tui:not(.authbg) .cmb-t tbody tr:nth-child(even) td.cmb-rk{background:#f6f4ef}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.cmb-nm{text-align:left;font-weight:600}
:root[data-theme] body.tui:not(.authbg) .cmb-who{display:flex;align-items:center;gap:8px;min-width:0}
:root[data-theme] body.tui:not(.authbg) .cmb-who > span:last-child{overflow-wrap:anywhere}
:root[data-theme] body.tui:not(.authbg) .cmb-fc{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:#2a2a30;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;overflow:hidden}
:root[data-theme] body.tui:not(.authbg) .cmb-fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:root[data-theme] body.tui:not(.authbg) .cmb-md{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:13px}
:root[data-theme] body.tui:not(.authbg) .cmb-md.m1{background:#f5b301}:root[data-theme] body.tui:not(.authbg) .cmb-md.m2{background:#a8b0bd}:root[data-theme] body.tui:not(.authbg) .cmb-md.m3{background:#cd7f32}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.cmb-b{font-weight:800;font-size:16px}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.cmb-st{color:#d99a00;font-size:11px;letter-spacing:.5px;white-space:nowrap}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.cmb-ab{color:#8a8c93;font-style:italic}
:root[data-theme] body.tui:not(.authbg) .cmb-t tr.abs td.cmb-nm{color:#8a8c93}
:root[data-theme] body.tui:not(.authbg) .cmb-t tr.abs:first-child td,:root[data-theme] body.tui:not(.authbg) .cmb-t tr:not(.abs) + tr.abs td{border-top:3px solid #111}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.hi,:root[data-theme] body.tui:not(.authbg) .cmb-legend .hi{background:#C3E8CE;color:#0E4A1F;border-color:#79BE90}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.mid,:root[data-theme] body.tui:not(.authbg) .cmb-legend .mid{background:#FBE08A;color:#6A4600;border-color:#DEB93C}
:root[data-theme] body.tui:not(.authbg) .cmb-t td.lo,:root[data-theme] body.tui:not(.authbg) .cmb-legend .lo{background:#F0A9A9;color:#7C1111;border-color:#D97C7C}
:root[data-theme] body.tui:not(.authbg) .cmb-foot{padding:10px 12px;font-size:13px;color:#5f6168;font-weight:600;border-top:1px solid #e3e1dc}
:root[data-theme] body.tui:not(.authbg) .cmb-link{width:100%;min-height:44px;margin:4px 0 8px;font-size:13px}
:root[data-theme] body.tui:not(.authbg) .cm-acts > :only-child{grid-column:1 / -1}

/* =====================================================================
   💰 MONEY › OVERDUE — board (migrate-overdue-v4, docs/plans/2026-10-18-admin-overdue-board-design.md)
   `od-` prefix. Data marks use --ok / --warn / --bad (night greys --f-*). State chips = icon + word.
   ===================================================================== */
.od-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.od-tile{background:var(--raised);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.od-tile b{font-size:20px;font-weight:800}
.od-tile span{font-size:12px;color:var(--mut)}
.od-tile.bad b{color:var(--bad)}
.od-rule{font-size:12.5px;margin-top:8px}
.od-ah{display:flex;align-items:center;gap:8px;padding-right:12px}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.od-ahb{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"n chev" "bar chev" "pct chev" "facts chev" "ins chev";gap:2px 10px;min-height:72px;height:auto;padding:12px 4px 12px 14px;
  background:none;border:0;border-radius:0;box-shadow:none;color:var(--txt);text-align:left;justify-content:stretch;font-weight:500}
:root[data-theme] body.tui.adm:not(.authbg):not(.ds0) button.od-ahb:hover{background:none;filter:none}
.od-an{grid-area:n;font-size:15.5px;font-weight:700}
.od-bar{grid-area:bar;width:100%;max-width:320px}
.od-pct{grid-area:pct;font-size:12.5px;color:var(--mut)}
.od-facts{grid-area:facts;font-size:13px}
.od-ahb .gv-chev{grid-area:chev;align-self:center}
:root[data-theme] body.tui.adm:not(.authbg) button.od-nudge{min-height:44px;height:auto;flex:none}
.od-nudged{font-size:12.5px;color:var(--mut);flex:none;white-space:nowrap}
.od-calm .od-an{color:var(--mut)}
.od-chip{font-size:11.5px;font-weight:600;color:var(--mut)}
.od-row{padding:10px 14px;border-top:1px solid var(--line);cursor:pointer}
.od-row:first-child{border-top:0}
.od-row:hover{background:var(--hover)}
.od-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.od-r1{display:flex;align-items:flex-start;gap:8px}
.od-who{flex:1;min-width:0}
.od-r1 .od-rec{flex:none}
.od-r2{font-size:13px;margin-top:3px}
.od-r3{font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-st{font-weight:700}
.od-silent .od-st,.od-broken .od-st{color:var(--bad)}
.od-sleeping .od-st{color:var(--ok)}
.od-hist{margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--raised);display:flex;flex-direction:column;gap:6px;font-size:13px;cursor:default}
.od-debts > summary{cursor:pointer;margin:0}
@media (max-width:600px){ .od-tiles{grid-template-columns:repeat(2,1fr)} .od-bar{max-width:none} }
/* 💰 Overdue polish (2026-10-18): 🤝 promises due · 📊 debt age · filter chips · view switch · search · 🔔 nudge all */
#odTop{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.od-pro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:root[data-theme] body.adm:not(.authbg) button.od-due{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l n" "s n";align-items:center;gap:0 10px;min-height:64px;height:auto;margin:0;
  padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--txt);font:inherit;text-align:left;box-shadow:none;cursor:pointer}
:root[data-theme] body.adm:not(.authbg) button.od-due span{grid-area:l;font-size:13px;font-weight:600;color:var(--mut)}
:root[data-theme] body.adm:not(.authbg) button.od-due b{grid-area:n;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) button.od-due small{grid-area:s;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
:root[data-theme] body.adm:not(.authbg) button.od-due:hover{background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) button.od-due.on{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.od-age{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.od-agt{font-size:13px;font-weight:650}
.od-agb{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--raised)}
.od-agb b{display:block;height:100%}
.od-ag.age1{background:color-mix(in srgb,var(--warn) 55%,var(--raised))}
.od-ag.age2{background:var(--warn)}
.od-ag.age3{background:var(--bad)}
.od-ag.kick{background:var(--mut)}
.od-agls{display:flex;flex-wrap:wrap;gap:4px 6px}
:root[data-theme] body.adm:not(.authbg) button.od-agl{display:inline-flex;align-items:center;gap:6px;min-height:36px;height:auto;margin:0;padding:0 10px;border:1px solid transparent;border-radius:10px;
  background:none;color:var(--txt);font:inherit;font-size:13px;font-weight:500;box-shadow:none;cursor:pointer}
:root[data-theme] body.adm:not(.authbg) button.od-agl i{display:inline-block;width:10px;height:10px;border-radius:3px}
:root[data-theme] body.adm:not(.authbg) button.od-agl small{color:var(--mut);font-size:12px}
:root[data-theme] body.adm:not(.authbg) button.od-agl:hover{background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) button.od-agl.on{border-color:var(--line2);background:var(--raised)}
.od-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.od-chips{display:flex;flex-wrap:wrap;gap:6px}
:root[data-theme] body.adm:not(.authbg) button.od-chipf{min-height:36px;height:auto;margin:0;padding:0 12px;border:1px solid var(--line2);border-radius:999px;background:var(--card);color:var(--txt);
  font:inherit;font-size:13px;font-weight:600;box-shadow:none;cursor:pointer;white-space:nowrap}
:root[data-theme] body.adm:not(.authbg) button.od-chipf:hover{background:var(--hover);filter:none}
:root[data-theme] body.adm:not(.authbg) button.od-chipf.on{background:var(--txt);border-color:var(--txt);color:var(--bg)}
/* 💸 recovered · 📈 trend · 🤝 keep-rate (migrate-overdue-v5) */
.od-ins{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
@media (max-width:700px){ .od-ins{grid-template-columns:1fr} }
.od-rec,.od-tr{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);min-width:0}
.od-insl{font-size:13px;font-weight:600;color:var(--mut)}
.od-rec > b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.od-rec > b small{font-size:12px;font-weight:500;color:var(--mut)}
.od-inss{font-size:12.5px;color:var(--mut);line-height:1.45}
.od-trv{font-size:13px}
.od-trv b{font-size:18px;font-variant-numeric:tabular-nums}
.od-trs{display:block;width:100%;height:44px;overflow:visible}
.od-trs path{fill:none;stroke:var(--txt);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.od-tins{grid-area:ins;font-size:12.5px;color:var(--mut)}
.od-keep.low{color:var(--bad-ink,var(--bad));font-weight:600}
.od-recv{color:var(--ok-ink,var(--ok))}
/* 💵 Today's desk v2 (migrate-desk-v2) — dk- prefix; reuses the Overview bar (.mn-top / .tc-mbar), .mn-cc, .tc-tr */
:root[data-theme] body.adm:not(.authbg) .dk-top .dk-q button{min-width:84px}
@media (max-width:560px){
  :root[data-theme] body.adm:not(.authbg) .dk-top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"seg rl" "bar bar";row-gap:6px}
  :root[data-theme] body.adm:not(.authbg) .dk-top .dk-q{grid-area:seg;justify-self:start} :root[data-theme] body.adm:not(.authbg) .dk-top .mn-rl{grid-area:rl} :root[data-theme] body.adm:not(.authbg) .dk-top .mn-topm{grid-area:bar}
}
:root[data-theme] body.adm:not(.authbg) #statDesk .desk-tiles{margin:0 0 8px}
:root[data-theme] body.adm:not(.authbg) .dk-cc{margin:0 0 8px}
.dk-cmp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;margin:0 0 12px}
.dk-alerts{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
:root[data-theme] body.adm:not(.authbg) #statDesk details.dk-al{display:block;margin:0;padding:0;border:0;background:none}
:root[data-theme] body.adm:not(.authbg) #statDesk details.dk-al > summary{display:list-item;cursor:pointer;font-size:14px;padding:4px 0}
:root[data-theme] body.adm:not(.authbg) #statDesk details.dk-al > .dk-ar{width:100%}
.dk-ar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.dk-ar > span{flex:1;min-width:0}
:root[data-theme] body.adm:not(.authbg) button.dk-rs{min-height:36px}
.dk-hours{margin:0 0 12px}
.dk-hb{display:flex;gap:3px;align-items:stretch;height:84px;margin-top:6px}
.dk-hc{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.dk-hc i{display:block;width:100%;max-width:22px;border-radius:4px 4px 1px 1px;background:color-mix(in srgb,var(--mn-inc,var(--txt)) 30%,var(--raised))}
.dk-hc.peak i{background:var(--mn-inc,var(--txt))}
.dk-hc span{font-size:10.5px;line-height:13px;height:13px;color:var(--mut)}
.dk-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
:root[data-theme] body.adm:not(.authbg) button.dk-pc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;grid-template-areas:"w t ch" "m m ch" "a a ch" "c c ch";
  align-items:center;gap:4px 10px;width:100%;min-height:84px;height:auto;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;
  background:var(--card);color:var(--txt);font:inherit;text-align:left;box-shadow:none;cursor:pointer}
:root[data-theme] body.adm:not(.authbg) button.dk-pc:hover{border-color:var(--line2);background:var(--hover);filter:none}
.dk-pw{grid-area:w;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.dk-pt{grid-area:t;text-align:right}
.dk-pt b{font-size:18px;font-variant-numeric:tabular-nums}
.dk-pt small{font-size:12px;color:var(--mut)}
.dk-pm{grid-area:m;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.dk-pa{grid-area:a;font-size:12.5px}
.dk-pc .mn-tch{grid-area:c}
.dk-pc .mn-chev{grid-area:ch;font-size:18px;color:var(--mut)}
.dk-sh{display:flex;flex-direction:column;gap:10px}
.dk-shh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.dk-shh b{font-size:17px}
.dk-shh button{margin-left:auto}
.dk-its{display:flex;flex-direction:column}
.dk-it{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.dk-itt{color:var(--mut);font-variant-numeric:tabular-nums}
.dk-itn{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-ita{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dk-flag{color:var(--warn-ink,var(--warn));font-weight:600}
.dk-flag.bad{color:var(--bad-ink,var(--bad))}
.dk-cts{display:flex;flex-direction:column;gap:6px}
.dk-ct{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--raised);font-size:13px}
.dk-over{color:var(--warn-ink,var(--warn))}
:root[data-theme] body.adm:not(.authbg) button.dk-cnt{min-height:48px;width:100%}
.od-qw{position:relative;display:block;flex:1 1 180px;min-width:150px;max-width:280px}
:root[data-theme] body.adm:not(.authbg) input.od-q{width:100%;margin:0;padding-right:40px}
:root[data-theme] body.adm:not(.authbg) button.od-nudgeall{min-height:36px;margin-left:auto}
.od-res{display:flex;align-items:center;gap:10px;font-size:13px;margin:0 0 8px}
.od-res .od-clr{margin-left:auto}
.od-flat{padding:0;overflow:hidden}
.od-row mark{background:color-mix(in srgb,var(--warn) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.od-nudged{white-space:normal;text-align:right;max-width:190px}
.od-nudged.done{color:var(--ok-ink,var(--ok))}
:root[data-theme] body.adm:not(.authbg) button.od-ahb:disabled{cursor:default;opacity:1}
@media (max-width:600px){ .od-qw{max-width:none;flex-basis:100%} :root[data-theme] body.adm:not(.authbg) button.od-nudgeall{margin-left:0} }