:root{
  --bg:#0b1120; --bg2:#111a2e; --panel:#151f38; --panel2:#1b2742;
  --tx:#e5ecff; --tx2:#94a3b8; --line:#243250;
  --ind:#818cf8; --ind2:#a5b4fc; --grn:#34d399; --red:#f87171; --amb:#fbbf24;
  --radius:14px;
}
/* Selectable accent color themes (swap only the accent so the dark base stays).
   Default (no data-theme) is Indigo above. */
:root[data-theme="sky"]{--ind:#38bdf8;--ind2:#7dd3fc}
:root[data-theme="mint"]{--ind:#34d399;--ind2:#6ee7b7}
:root[data-theme="honey"]{--ind:#f5b83a;--ind2:#fcd34d}
:root[data-theme="ember"]{--ind:#fb923c;--ind2:#fdba74}
:root[data-theme="cherry"]{--ind:#fb7185;--ind2:#fda4af}
:root[data-theme="orchid"]{--ind:#e879f9;--ind2:#f5b6fd}
:root[data-theme="grape"]{--ind:#a855f7;--ind2:#c084fc}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:
  radial-gradient(1200px 600px at 80% -10%,#16223f 0,transparent 60%),var(--bg);
  color:var(--tx);min-height:100vh}
.hidden{display:none !important}
/* horizontal-scroll wrapper for wide tables (grades, needs-attention, curriculum) */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
html{-webkit-text-size-adjust:100%}

/* Install-app banner (PWA) */
.install-banner{display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:linear-gradient(90deg,rgba(129,140,248,.16),rgba(129,140,248,.06));
  border-bottom:1px solid var(--line)}
.install-banner .ib-ico{font-size:20px;line-height:1}
.install-banner .ib-txt{flex:1;min-width:0;color:var(--tx);font-size:14px}
.install-banner .ib-btn{background:var(--ind);color:#0b1120;border:none;border-radius:10px;
  padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.install-banner .ib-btn:hover{background:var(--ind2)}
.install-banner .ib-x{background:none;border:none;color:var(--tx2);font-size:15px;cursor:pointer;padding:4px 6px}
.install-banner .ib-x:hover{color:var(--tx)}
@media(max-width:560px){.install-banner .ib-txt{font-size:13px}.install-banner{padding:9px 12px;gap:9px}}

.topbar{display:flex;align-items:center;gap:18px;padding:14px 22px;
  border-bottom:1px solid var(--line);background:rgba(11,17,32,.7);
  position:sticky;top:0;backdrop-filter:blur(8px);z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;background:linear-gradient(135deg,var(--ind2),var(--ind));color:#0b1120}
.title{font-weight:700;font-size:18px;letter-spacing:.2px}
.sub{color:var(--tx2);font-size:12px}
.kidtabs{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.kidtab{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--tx);cursor:pointer;font-size:14px}
.kidtab .dot{width:10px;height:10px;border-radius:50%}
.kidtab.active{border-color:var(--ind);background:var(--panel2);box-shadow:0 0 0 1px var(--ind) inset}

.btn{border:1px solid var(--line);background:var(--panel2);color:var(--tx);
  padding:9px 14px;border-radius:10px;cursor:pointer;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--ind)}
.btn.primary{background:var(--ind);color:#0b1120;border-color:var(--ind);font-weight:600}
.btn.primary:hover{background:var(--ind2)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 11px;font-size:13px}
.btn.danger{color:var(--red);border-color:#4a2230}

/* toolbar actions */
.toolbar{display:flex;align-items:center;gap:6px}
.tb-link{background:none;border:none;color:var(--tx2);font-size:14px;padding:8px 12px;border-radius:8px;cursor:pointer}
.tb-link:hover{color:var(--tx);background:var(--panel2)}
.tb-link.tb-err{color:var(--red)}
.tb-menu{position:relative}
.tb-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:6px;min-width:220px;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--tx);
  padding:9px 11px;border-radius:7px;cursor:pointer;font-size:13px}
.tb-dropdown button:hover{background:var(--panel2)}

main{padding:22px;max-width:1180px;margin:0 auto}
.empty{text-align:center;padding:90px 20px;color:var(--tx2)}
.empty h2{color:var(--tx);margin-bottom:8px}

.panels{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:820px){.panels{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel h3{margin:0;font-size:14px;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px}

.source{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--line)}
.source:first-of-type{border-top:none}
.source-name{font-weight:600;font-size:15px}
.tag{font-size:11px;color:var(--tx2);background:var(--panel2);padding:2px 8px;border-radius:999px;margin-left:6px;font-weight:400}
.source-status{font-size:12px;color:var(--tx2);margin-top:3px}
.source-status.ok{color:var(--grn)}
.source-status.err{color:var(--red)}
.source-actions{display:flex;gap:8px}

.summary{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
.stat{flex:1;min-width:120px;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:14px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{color:var(--tx2);font-size:12px;margin-top:2px}

.tabs{display:flex;gap:6px;margin:6px 0 16px;border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.vtab{background:none;border:none;color:var(--tx2);padding:10px 14px;cursor:pointer;font-size:14px;
  border-bottom:2px solid transparent;white-space:nowrap;flex:0 0 auto}
.vtab.active{color:var(--tx);border-bottom-color:var(--ind)}

.class-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}
.class-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.class-name{font-weight:700;font-size:16px}
.grade-pill{font-weight:800;font-size:18px;padding:6px 12px;border-radius:10px;background:var(--panel2)}
.g-a{color:var(--grn)} .g-b{color:var(--ind2)} .g-c{color:var(--amb)} .g-d{color:var(--red)}
.assign-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.assign-table th{text-align:left;color:var(--tx2);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.assign-table td{padding:7px 8px;border-bottom:1px solid var(--bg2);color:var(--tx)}
.assign-table tr:hover td{background:var(--panel2)}

.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.course-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.course-card .cn{font-weight:600}
.course-card .cs{color:var(--tx2);font-size:12px;margin-top:4px}
.folder-list{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.folder-chip{display:block;font-size:12px;color:var(--ind2);text-decoration:none;
  padding:6px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.folder-chip:hover{border-color:var(--ind);color:var(--tx)}

/* schoology document browser */
.sch-course{padding:0;overflow:hidden}
.sch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer}
.sch-head:hover{background:var(--panel2)}
.sch-docs{padding:0 16px 14px}
.doc-folder{margin-top:12px}
.doc-folder-name{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ind2);font-weight:700;
  padding:6px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.doc-row{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid var(--bg2)}
.doc-row:hover{background:var(--panel2)}
.doc-type{flex:0 0 auto;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;margin-top:2px;
  background:var(--panel2);color:var(--tx2);text-transform:uppercase;letter-spacing:.3px}
.doc-type.dt-page{background:rgba(129,140,248,.15);color:var(--ind2)}
.doc-type.dt-document{background:rgba(52,211,153,.14);color:var(--grn)}
.doc-type.dt-link{background:rgba(34,211,238,.14);color:#67e8f9}
.doc-type.dt-assignment,.doc-type.dt-assessment,.doc-type.dt-common-assessment{background:rgba(251,191,36,.14);color:#fcd34d}
.doc-main{flex:1;min-width:0}
.doc-title{color:var(--tx);text-decoration:none;font-size:14px}
.doc-title:hover{color:var(--ind2);text-decoration:underline}
.doc-excerpt{color:var(--tx2);font-size:12px;margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.res-chip{font-size:11px;font-weight:700;text-decoration:none;padding:3px 9px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line);color:var(--tx2)}
.res-chip:hover{border-color:var(--ind);color:var(--tx)}
.res-chip.saved{background:rgba(52,211,153,.12);border-color:#1f5e46;color:var(--grn)}

/* per-day learning chips */
.wk-learns{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.wk-learn{font-size:11px;background:rgba(34,211,238,.1);border:1px solid #1c4a56;border-radius:6px;
  padding:4px 7px;color:#a5f3fc;line-height:1.3}
.wk-learn b{display:block;color:#67e8f9;font-size:10px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:1px}
.cal-chip.cal-learn{border-left-color:#22d3ee;background:rgba(34,211,238,.08);color:#a5f3fc;font-style:italic}

.muted{color:var(--tx2)}
.empty-view{text-align:center;color:var(--tx2);padding:50px 20px}

/* calendar */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-title{font-weight:700;font-size:17px;min-width:150px;text-align:center}
.cal-legend{display:flex;gap:12px;font-size:11px;color:var(--tx2);flex-wrap:wrap}
.cal-legend span{display:flex;align-items:center;gap:5px}
.cal-legend i, .cal-chip.dot-ok::before{}
.cal-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
i.dot-ok,.dot-ok::before{background:var(--grn)}
i.dot-test{background:var(--ind2)} i.dot-bad{background:var(--red)}
i.dot-warn{background:var(--amb)} i.dot-sch{background:#22d3ee}
i.dot-pending{background:#94a3b8}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:11px;color:var(--tx2);text-align:center;padding:4px 0;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.cal-cell{min-height:92px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px;overflow:hidden}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.has{cursor:pointer}
.cal-cell.has:hover{border-color:var(--ind)}
.cal-daynum{font-size:12px;color:var(--tx2);font-weight:600;margin-bottom:4px}
.cal-chip{font-size:11px;padding:2px 6px;border-radius:5px;margin-bottom:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--tx2);background:var(--bg)}
.cal-chip.dot-ok{border-left-color:var(--grn)} .cal-chip.dot-test{border-left-color:var(--ind2)}
.cal-chip.dot-bad{border-left-color:var(--red);background:rgba(248,113,113,.08)}
.cal-chip.dot-warn{border-left-color:var(--amb)} .cal-chip.dot-sch{border-left-color:#22d3ee}
.cal-chip.dot-pending{border-left-color:#94a3b8;opacity:.85}
.cal-more{font-size:10px;color:var(--tx2);padding-left:4px}
@media(max-width:640px){.cal-cell{min-height:60px}.cal-chip{font-size:9px}}
.cal-modes{display:flex;gap:4px;margin-left:6px}
/* week view */
.wk-topics{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px;padding:10px 12px;
  background:rgba(34,211,238,.08);border:1px solid #1c4a56;border-radius:10px}
.wk-topics-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#67e8f9;font-weight:700}
.wk-topic{font-size:13px;color:var(--tx);background:var(--panel2);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.wk-topic b{color:#67e8f9;font-weight:600}
.wk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wk-col{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:220px}
.wk-col.wk-weekend{background:var(--bg)}
.wk-col.wk-today{border-color:var(--ind);box-shadow:0 0 0 1px var(--ind) inset}
.wk-day{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.wk-day span{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px}
.wk-day b{font-size:16px}
.wk-items{display:flex;flex-direction:column;gap:6px}
.wk-item{font-size:12px;background:var(--bg);border-left:3px solid var(--tx2);border-radius:6px;padding:6px 8px;cursor:pointer;transition:.12s}
.wk-item:hover{transform:translateX(1px);filter:brightness(1.15)}
.wk-item .wk-t{display:block;color:var(--tx);line-height:1.25;margin-top:2px}
.wk-item .wk-c{display:block;color:var(--tx2);font-size:10px;margin-top:2px}
.wk-score{font-weight:800;font-size:11px}
.wk-score.bad{color:var(--red)} .wk-score.pend{color:var(--tx2)}
.wk-item.dot-ok{border-left-color:var(--grn)} .wk-item.dot-ok .wk-score{color:var(--grn)}
.wk-item.dot-test{border-left-color:var(--ind2)}
.wk-item.dot-bad{border-left-color:var(--red);background:rgba(248,113,113,.08)}
.wk-item.dot-warn{border-left-color:var(--amb)}
.wk-item.dot-pending{border-left-color:#94a3b8;opacity:.9}
.wk-item.dot-sch{border-left-color:#22d3ee}
.wk-empty{color:var(--tx2);font-size:11px;text-align:center;padding:8px 0}
@media(max-width:820px){.wk-grid{grid-template-columns:repeat(2,1fr)}.wk-col{min-height:auto}}
.wk-layout{display:flex;gap:5px;margin-bottom:14px}
.cal-host{display:block;margin-top:16px}

/* by-class matrix */
.mx-wrap{overflow-x:auto}
.mx-table{width:100%;border-collapse:collapse;font-size:12px}
.mx-table th{background:var(--panel2);color:var(--tx2);font-weight:600;text-align:left;padding:8px 10px;
  border:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
.mx-table th.mx-today{color:var(--ind2)}
.mx-table td{border:1px solid var(--line);padding:7px 9px;vertical-align:top}
.mx-table td.mx-today{background:rgba(129,140,248,.05)}
/* identity columns stay tight; only the weekday columns get the wide min-width */
.mx-day{min-width:150px}
.mx-h-class,.mx-class{width:210px;max-width:220px}
.mx-h-asg,.mx-asg{width:1%;white-space:nowrap;text-align:center}
/* combined class cell: grade pill + name + % on one line, meta beneath */
.mx-c-head{display:flex;align-items:center;gap:8px}
.grade-pill.mx-c-pill{font-size:12px;font-weight:800;padding:2px 8px;border-radius:7px;flex:0 0 auto}
.mx-c-head .mx-cname{flex:1;min-width:0;font-weight:700;font-size:13px;line-height:1.25}
.mx-c-pct{flex:0 0 auto;font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.mx-adv-chip{font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--ind2);border:1px solid var(--line2);
  border-radius:5px;padding:0 4px;margin-left:3px;vertical-align:1px}
.mx-meta{font-size:11px;color:var(--tx2);margin-top:5px;line-height:1.35}
.mx-class{font-weight:700;color:var(--tx);cursor:pointer;position:sticky;left:0;background:var(--panel)}
.mx-class:hover{color:var(--ind2)}
.mx-avg{text-align:center}
.mx-avg .grade-pill{font-size:13px;padding:3px 8px}
.mx-learn{color:#a5f3fc;font-size:11px;margin-bottom:4px;line-height:1.3}
.mx-ev{font-size:12px;line-height:1.3;margin-bottom:3px;padding-left:6px;border-left:3px solid var(--tx2)}
.mx-ev.dot-ok{border-left-color:var(--grn)} .mx-ev.dot-test{border-left-color:var(--ind2)}
.mx-ev.dot-bad{border-left-color:var(--red)} .mx-ev.dot-warn{border-left-color:var(--amb)}
.mx-ev.dot-pending{border-left-color:#94a3b8} .mx-ev.dot-sch{border-left-color:#22d3ee}
.mx-ev .wk-score{font-weight:800;margin-right:2px}

/* issues banner */
.issues-banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:14px}
.issues-banner.clear{border-color:#1f5e46}
.issues-title{font-weight:700;margin-right:6px}
.issue-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent}
.issue-chip .c{font-weight:800}
.issue-chip.fail{background:rgba(248,113,113,.12);color:#fca5a5;border-color:#4a2230}
.issue-chip.miss{background:rgba(251,191,36,.12);color:#fcd34d;border-color:#5a4415}
.issue-chip.zero{background:rgba(248,113,113,.1);color:#f87171;border-color:#4a2230}
.issue-chip.low{background:rgba(129,140,248,.12);color:var(--ind2);border-color:#2f3a66}
.issue-chip.ok{background:rgba(52,211,153,.12);color:var(--grn);border-color:#1f5e46;cursor:default}

/* status chips in tables */
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px}
.chip.miss{background:rgba(251,191,36,.15);color:#fcd34d}
.chip.fail{background:rgba(248,113,113,.15);color:#fca5a5}
.chip.zero{background:rgba(248,113,113,.18);color:#f87171}
.chip.low{background:rgba(129,140,248,.15);color:var(--ind2)}
.chip.ok{background:rgba(52,211,153,.14);color:var(--grn)}
.chip.exc{background:rgba(148,163,184,.15);color:var(--tx2)}
.chip.pending{background:rgba(148,163,184,.15);color:#cbd5e1}
.chip.none{display:none}

.assign-table tr.row-bad td{background:rgba(248,113,113,.07)}
.assign-table tr.row-warn td{background:rgba(251,191,36,.06)}
.assign-table tr.row-bad:hover td{background:rgba(248,113,113,.13)}
.assign-table tr.row-warn:hover td{background:rgba(251,191,36,.12)}
.pct-cell{font-weight:700;font-variant-numeric:tabular-nums}

/* report card */
.rc-overall{font-weight:800;font-size:16px;padding:6px 14px;border-radius:10px;background:var(--panel2)}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;margin-top:12px}
.rc-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 11px;cursor:pointer;transition:.15s}
.rc-card:hover{border-color:var(--ind);transform:translateY(-1px)}
.rc-card.flagged{border-color:#4a2230;background:rgba(248,113,113,.05)}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rc-name{font-weight:700;font-size:13.5px;line-height:1.2}
.rc-grade{display:flex;align-items:baseline;gap:6px;line-height:1}
.rc-letter{font-weight:800;font-size:17px}
.rc-pct{font-size:11px;color:var(--tx2);font-weight:600}
.rc-grade.g-a .rc-letter,.rc-grade.g-a .rc-pct{color:var(--grn)}
.rc-grade.g-b .rc-letter,.rc-grade.g-b .rc-pct{color:var(--ind2)}
.rc-grade.g-c .rc-letter,.rc-grade.g-c .rc-pct{color:var(--amb)}
.rc-grade.g-d .rc-letter,.rc-grade.g-d .rc-pct{color:var(--red)}
.rc-bar{height:5px;border-radius:999px;background:var(--bg);margin:8px 0 7px;overflow:hidden}
.rc-bar-fill{display:block;height:100%;border-radius:999px;background:var(--ind)}
.rc-bar-fill.g-a{background:var(--grn)} .rc-bar-fill.g-b{background:var(--ind2)}
.rc-bar-fill.g-c{background:var(--amb)} .rc-bar-fill.g-d{background:var(--red)}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px}
.rc-badges{display:flex;gap:5px;flex-wrap:wrap}
.mini-badge{font-size:10px;padding:2px 6px}

/* category breakdown */
.cat-breakdown{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:12px 0 4px}
.cat-item{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cat-item.has-fail{border-color:#4a2230}
.cat-name{font-size:12px;color:var(--tx2);font-weight:600;margin-bottom:6px}
.cat-nums{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cat-avg{font-size:19px;font-weight:800}
.cat-ratio{font-size:11px;font-weight:700}
.cat-ratio.bad{color:#fca5a5} .cat-ratio.ok{color:var(--grn)}
.cat-meta{font-size:11px;margin-top:4px}
.cat-weight{font-size:11px;color:var(--ind2);margin-top:5px;font-weight:600}
.cat-weight b{color:var(--tx)}

/* week at a glance curriculum panel */
.wag-panel{margin:12px 0 4px;border:1px solid #1c4a56;border-radius:10px;background:rgba(34,211,238,.05);overflow:hidden}
.wag-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:rgba(34,211,238,.08);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#67e8f9}
.wag-head a{color:#a5f3fc;font-weight:600;text-transform:none;letter-spacing:0;font-size:12px}
.wag-list{max-height:230px;overflow-y:auto}
.wag-row{display:flex;gap:12px;padding:6px 12px;border-top:1px solid rgba(28,74,86,.5);font-size:13px}
.wag-date{flex:0 0 54px;color:#67e8f9;font-weight:700;font-variant-numeric:tabular-nums}
.wag-topic{color:var(--tx)}
.wag-row.wag-past{opacity:.5}
.wag-row.wag-today{background:rgba(34,211,238,.14)}
.wag-row.wag-today .wag-date{color:#a5f3fc}

.class-badges{display:flex;gap:6px;margin-left:auto}
.mini-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.mini-badge.fail{background:rgba(248,113,113,.15);color:#fca5a5}
.mini-badge.miss{background:rgba(251,191,36,.15);color:#fcd34d}
.class-card.flagged{border-color:#4a2230}
.class-head{gap:10px}

.modal-wrap{position:fixed;inset:0;background:rgba(4,8,18,.7);display:grid;place-items:center;z-index:50;backdrop-filter:blur(3px)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(460px,92vw)}
.modal.wide{width:min(920px,96vw);max-height:90vh;max-height:90dvh;overflow-y:auto}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.cm-head .class-name{font-size:20px;font-weight:700}
.cm-body{display:flex;flex-direction:column;gap:6px}
.cm-sec{padding:12px 0;border-bottom:1px solid var(--bg2)}
.cm-sec h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2)}
.cm-docs{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:2px 12px}
.class-head.clickable{cursor:pointer;border-radius:8px;margin:-4px;padding:4px}
.class-head.clickable:hover{background:var(--panel2)}

/* coming-up urgency strip */
.comingup{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 16px;margin-bottom:14px}
.comingup-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);font-weight:700}
.cu-chip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);transition:.12s}
.cu-chip:hover{transform:translateY(-1px);filter:brightness(1.15)}
.cu-chip b{font-size:13px}
.cu-meta{font-size:10.5px;color:var(--tx2)}
.cu-chip.urg-now{border-color:var(--red);background:rgba(248,113,113,.12)}
.cu-chip.urg-now b{color:#fca5a5}
.cu-chip.urg-soon{border-color:#5a4415;background:rgba(251,191,36,.1)}
.cu-chip.urg-soon b{color:#fcd34d}
.cu-chip.urg-later{border-color:#2f3a66}
.cu-chip.urg-later b{color:var(--ind2)}

/* calendar test chips */
.wk-learn{cursor:pointer}
.wk-learn:hover{filter:brightness(1.2)}
.wk-learn-test{background:rgba(251,191,36,.1);border-color:#5a4415}
.wk-learn-test b{color:#fcd34d}
.wk-learn-test.urg-now{background:rgba(248,113,113,.13);border-color:var(--red)}
.wk-learn-test.urg-now b{color:#fca5a5}

/* today panel + study-for rows (full width, no truncation) */
.today-panel{margin-bottom:14px}
/* Focus Hero: the nearest upcoming test */
.tdh{display:block;width:100%;text-align:left;border:1px solid var(--line2);border-radius:14px;padding:13px 15px;
  margin:2px 0 12px;cursor:pointer;background:linear-gradient(135deg,#2c2350,#233150);transition:filter .12s}
.tdh:hover{filter:brightness(1.12)}
.tdh-lbl{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--ind2)}
.tdh-big{display:flex;align-items:center;gap:14px;margin-top:8px}
.tdh-cd{flex:0 0 auto;font-size:34px;font-weight:900;line-height:.9;color:var(--tx);min-width:44px}
.tdh-cd .tdh-now{font-size:18px;font-weight:900;color:#fca5a5;letter-spacing:.3px}
.tdh-cd small{display:block;font-size:11px;font-weight:700;color:var(--tx2);letter-spacing:.5px}
.tdh-t{font-size:15px;font-weight:700;line-height:1.25}
.tdh-s{font-size:12px;color:var(--tx2);margin-top:3px}
.tdh.urg-now{background:linear-gradient(135deg,#4a2130,#3a1f2b);border-color:#6b2f3d}
.tdh.urg-now .tdh-lbl{color:#fca5a5}
.tdh.urg-soon{background:linear-gradient(135deg,#3f3320,#332b1f);border-color:#5a4415}
.tdh.urg-soon .tdh-lbl{color:#fcd34d}
/* Grade-ring rows */
.tdr-list{display:flex;flex-direction:column}
.tdr{display:flex;align-items:center;gap:13px;padding:11px 4px;border-top:1px solid var(--line);cursor:pointer}
.tdr:first-child{border-top:none}
.tdr:hover{background:var(--panel2)}
.tdr-ring{flex:0 0 42px;width:42px;height:42px;position:relative;display:grid;place-items:center}
.tdr-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800}
.tdr-ring-none{border:3px solid var(--line2);border-radius:50%;color:var(--tx3);font-weight:800;font-size:12px}
.tdr-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tdr-nm{font-weight:800;font-size:14px}
.tdr-ln{font-size:12.5px;line-height:1.3}
.tdr-act{display:flex;align-items:center;gap:8px;margin-top:4px}
.td-topic{font-size:13px;line-height:1.28}
.td-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;padding:1px 7px;border-radius:6px;margin-right:6px;vertical-align:1px}
.learn-tag{background:rgba(34,211,238,.14);color:#67e8f9}
.study-tag{background:rgba(129,140,248,.15);color:var(--ind2)}
.study-tag.urg-now{background:rgba(248,113,113,.18);color:#fca5a5}
.study-tag.urg-soon{background:rgba(251,191,36,.15);color:#fcd34d}
.comingup-card{margin-bottom:14px}
.cu-row{display:flex;align-items:center;gap:14px;padding:10px 10px;border-radius:9px;margin-top:6px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:.12s}
.cu-row:hover{filter:brightness(1.15)}
.cu-when{flex:0 0 100px;font-weight:800;font-size:13px}
.cu-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cu-topic{font-size:14.5px;font-weight:600;line-height:1.4}
.cu-covers{font-size:12px;color:var(--tx2);line-height:1.45}
.study-covers{font-size:12.5px;color:var(--tx2);margin-top:7px;line-height:1.5}
.cu-course{flex:0 0 auto;color:var(--tx2);font-size:12.5px}
.cu-row.urg-now{border-color:var(--red);background:rgba(248,113,113,.1)}
.cu-row.urg-now .cu-when{color:#fca5a5}
.cu-row.urg-soon{border-color:#5a4415;background:rgba(251,191,36,.08)}
.cu-row.urg-soon .cu-when{color:#fcd34d}
.cu-row.urg-later .cu-when{color:var(--ind2)}
@media(max-width:640px){
  .tdh-cd{font-size:30px}
  .tdr{gap:11px}
  .tdr-act .btn.small{padding:5px 10px}
  .cu-when{flex-basis:78px}.cu-course{display:none}
}
.mat-btn.mat-mini{padding:4px 9px;font-size:12px;gap:3px;min-width:0}

/* study hub */
.study-card{margin-bottom:12px}
.study-now{font-size:13px;margin-top:3px}
.sb-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.sb-row.sb-now{background:rgba(34,211,238,.06);border-radius:8px;padding:9px 10px;margin-top:4px}
.sb-name{flex:1;min-width:0;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sb-actions{display:flex;gap:6px}
.sb-group{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);
  font-weight:700;margin:12px 0 2px}
.chip.now{background:rgba(34,211,238,.16);color:#67e8f9}
.study-unit{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0 2px;
  padding:8px 11px;background:rgba(34,211,238,.07);border:1px solid #1c4a56;border-radius:9px;font-size:13px}
.su-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#67e8f9;font-weight:700}
.su-next{color:var(--tx2);font-size:12.5px;margin-left:auto}
.stale-card{padding:11px 14px}
.stale-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stale-row .btn{margin-left:auto}

/* vocab + key points */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.vocab-item{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.vocab-term{font-weight:700;font-size:13px;color:#67e8f9;margin-bottom:3px}
.vocab-def{font-size:12.5px;color:var(--tx);line-height:1.45}
.kp-list{margin:4px 0 0;padding-left:20px}
.kp-list li{font-size:13px;line-height:1.55;margin-bottom:6px}

/* worked examples */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.ex-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.ex-title{font-weight:700;font-size:13px;margin-bottom:7px;color:var(--ind2)}
.ex-steps{margin:0;padding-left:20px}
.ex-steps li{font-size:12.5px;line-height:1.5;margin-bottom:4px;color:var(--tx)}
.ex-steps li:last-child{color:var(--grn);font-weight:600}

/* practice drill */
.drill-score{font-size:14px;font-weight:600;color:var(--tx2)}
.drill-q{font-size:19px;font-weight:600;padding:22px 8px;text-align:center;line-height:1.5}
.drill-input-row{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.drill-input{width:180px;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  border-radius:10px;padding:12px 14px;font-size:18px;text-align:center;font-family:inherit}
.drill-input:focus{outline:none;border-color:var(--ind)}
.drill-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
@media(max-width:560px){.drill-choices{grid-template-columns:1fr}}
.drill-choice{display:flex;gap:9px;align-items:center;text-align:left;font-size:14.5px;padding:13px 14px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--tx);cursor:pointer}
.drill-choice:hover:not(:disabled){border-color:var(--ind)}
.drill-choice span{color:var(--tx2);font-weight:800}
.drill-choice.right{border-color:var(--grn);background:rgba(52,211,153,.12)}
.drill-choice.wrong{border-color:var(--red);background:rgba(248,113,113,.12)}
.drill-fb{border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;margin-top:4px}
.drill-fb.good{background:rgba(52,211,153,.1);border:1px solid #1f5e46}
.drill-fb.bad{background:rgba(248,113,113,.1);border:1px solid #4a2230}

/* public library */
body.lib-mode > header, body.lib-mode > main, body.lib-mode > footer{display:none}
#libWrap{min-height:100vh}
.lib-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 26px;border-bottom:1px solid var(--line)}
.lib-main{max-width:1100px;margin:0 auto;padding:28px 20px 70px}
.lib-hero h1{font-size:30px;margin:0 0 10px}
.lib-hero p{color:var(--tx2);font-size:15px;line-height:1.6;margin:0 0 12px;max-width:760px}
.lib-note{font-size:12.5px;color:var(--tx2);line-height:1.6;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;max-width:760px}
.lib-grades{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 16px}
.lib-gtab{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--tx2);cursor:pointer;font-size:14px;font-weight:600}
.lib-gtab:hover{border-color:var(--ind);color:var(--tx)}
.lib-gtab.active{background:var(--ind);border-color:var(--ind);color:#0b1120}
.lib-key{display:inline-block;margin:10px 0 4px;font-size:13px;font-weight:700;color:var(--grn);
  background:rgba(52,211,153,.12);border:1px solid #1f5e46;border-radius:9px;padding:8px 14px;text-decoration:none}
.lib-key:hover{filter:brightness(1.2)}
.lib-strand{margin-top:16px}
.lib-strand-name{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ind2);font-weight:700;
  padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:9px}
.lib-set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.lib-set{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;text-decoration:none;color:var(--tx);transition:.12s}
.lib-set:hover{border-color:var(--ind);transform:translateY(-1px)}
button.lib-set{font:inherit;text-align:left;width:100%;cursor:pointer}
.class-head .lib-pract{cursor:pointer}
/* Key terms: a card per term - name, definition, then example chips */
.sn-term{padding:12px 0;border-top:1px solid var(--line)}
.sn-term:first-of-type{border-top:none}
.sn-term-h{font-size:14.5px;font-weight:800;color:var(--ind2);margin-bottom:3px}
.sn-term-d{font-size:13.5px;line-height:1.6;color:var(--tx)}
.sn-points{margin:4px 0 0 18px;font-size:13px;line-height:1.55}
.sn-points li{margin:3px 0}
/* Rules & formulas: a spacious card per rule - rule, plain-language meaning, examples */
.cm-rules{background:rgba(129,140,248,.06);border:1px solid var(--line2);border-left:3px solid var(--ind);
  border-radius:12px;padding:6px 16px 14px;margin:4px 0}
.cm-rules h4{color:var(--ind2)}
.sn-rule{padding:13px 0;border-top:1px solid rgba(129,140,248,.16)}
.sn-rule:first-of-type{border-top:none}
.sn-rule-r{font-size:14.5px;font-weight:700;line-height:1.45;color:var(--tx)}
.sn-rule-d{font-size:13px;line-height:1.6;color:var(--tx2);margin-top:5px}
/* worked example chips shared by rules + key terms */
.sn-egs{margin-top:9px}
.sn-egs-lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);margin-bottom:5px}
.sn-eg-list{display:flex;flex-direction:column;gap:5px}
.sn-eg{align-self:flex-start;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
/* In-question hint: a nudge before guessing */
.hint-wrap{margin:8px 0 10px}
.hint-btn{background:rgba(245,158,11,.14);border:1px solid #5a4415;color:#fcd34d;font-weight:700}
.hint-btn:disabled{opacity:.65;cursor:default}
.hint-box{margin-top:8px;background:rgba(245,158,11,.1);border:1px solid #5a4415;border-radius:10px;
  padding:10px 12px;font-size:13.5px;line-height:1.45;color:var(--tx)}
.hint-ic{margin-right:4px}
.sn-ex{margin:8px 0;font-size:13px}
.sn-ex b{color:var(--cyan2)}
.sn-ex ol{margin:4px 0 0 20px}
.sn-ex li{margin:2px 0}
.libc-subs{display:flex;gap:6px;flex-wrap:wrap}
.libc-right{margin:8px 0 12px;font-size:14px}
.libc-right-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);font-weight:700;margin-right:6px}
.libc-table{font-size:12px;width:100%}
.libc-table th{text-align:left;color:var(--tx2);padding:6px 8px;border-bottom:1px solid var(--line);font-weight:700}
.libc-table td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:top}
.libc-date{white-space:nowrap;color:var(--tx2)}
.libc-teks{white-space:nowrap}
.libc-cur{background:rgba(129,140,248,.1)}
.libc-cur .libc-unit{font-weight:700}
.libc-past{opacity:.5}
.libc-row{cursor:pointer}
.libc-row:hover td{background:var(--panel2)}
.libc-row:hover{opacity:1}
.libc-now{font-size:10px;font-weight:800;color:var(--ind2);background:var(--panel2);border-radius:99px;padding:1px 7px;margin-left:6px}
.lib-teks{flex:0 0 auto;font-family:monospace;font-size:11px;font-weight:800;color:#67e8f9;
  background:var(--bg);border-radius:6px;padding:3px 7px}
.libc-teks .lib-teks{cursor:help}
.lib-title{font-size:13px;line-height:1.35}
.teks-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.teks-list li{display:flex;gap:9px;align-items:flex-start}
.teks-list .lib-teks{margin-top:1px}
.teks-desc{font-size:13px;line-height:1.4;color:var(--tx,#cbd5e1)}
.libc-learn{width:58%}
.learn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.learn-list li{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap}
.learn-txt{font-size:12.5px;line-height:1.45;color:var(--tx,#cbd5e1)}
.learn-code{font-family:monospace;font-size:10px;font-weight:800;color:#67e8f9;background:var(--bg);
  border-radius:5px;padding:1px 5px;flex:0 0 auto}
.learn-code.solo{font-size:11px}
.learn-more{font-size:11px;color:var(--tx2);font-style:italic}
/* compact calendar cell: a left detail-button column, an aligned code gutter
   (teacher only), then one clean line per skill */
.learn-list.compact{gap:4px}
.learn-list.compact li{display:grid;grid-template-columns:24px minmax(44px,max-content) 1fr;gap:10px;align-items:center}
.learn-list.compact.nocode li{grid-template-columns:24px 1fr}
.learn-list.compact .learn-code{background:none;border-radius:0;padding:0;color:var(--tx2);
  font-size:10.5px;font-weight:700;text-align:left;letter-spacing:.2px}
.learn-list.compact .learn-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.learn-list.compact .learn-more{display:block;grid-column:1 / -1;margin:2px 0 0 34px}
.learn-list.compact .learn-code.solo{color:#67e8f9}
.learn-list.kid .learn-txt{color:var(--tx)}
/* left-column detail button */
.skill-btn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg);color:var(--tx2);border-radius:6px;cursor:pointer;
  padding:0;font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.skill-btn-i{font-size:9px;line-height:1;transform:translateX(.5px)}
.skill-btn:hover{border-color:var(--ind);color:var(--tx);background:var(--panel2)}
.skill-btn.has-ex{border-color:var(--ind2);color:var(--ind2)}
.skill-btn.has-ex:hover{background:var(--ind);color:#fff;border-color:var(--ind)}
/* skill detail popup */
.sk-code{font-family:monospace;font-size:11px;font-weight:800;color:#67e8f9;background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin:0}
.sk-sec{margin-top:16px}
.sk-h{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);font-weight:800;margin-bottom:6px}
.sk-def{font-size:14px;line-height:1.55;color:var(--tx)}
.sk-kid{color:var(--tx2)}
.sk-kid-big{font-size:16.5px;line-height:1.6;color:var(--tx)}
.sk-actions{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}
.sk-rule{font-size:14px;line-height:1.55;color:var(--tx);margin-bottom:10px}
.sk-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.sk-steps li{font-size:13.5px;line-height:1.5;color:var(--tx);padding-left:3px}
.sk-steps li::marker{color:var(--ind2);font-weight:800}
.sk-tip{margin-top:11px;font-size:13px;line-height:1.5;color:var(--tx2);
  background:rgba(129,140,248,.08);border-left:3px solid var(--ind2);border-radius:0 8px 8px 0;padding:8px 12px}
.sk-tip b{color:var(--ind2)}
.sk-viz{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;
  overflow-x:auto;text-align:center}
.sk-viz svg{display:inline-block;max-width:100%;height:auto}
.sk-cap{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--tx2)}
.sk-res{display:flex;flex-direction:column;gap:6px}
.sk-res-link{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;color:var(--tx);text-decoration:none;font-size:13px}
.sk-res-link:hover{border-color:var(--ind);background:var(--panel2)}
.sk-res-ic{font-size:9px;font-weight:800;color:#fff;background:#ef4444;border-radius:4px;padding:2px 5px;flex:0 0 auto}
.sk-res-link.ref .ref-ic{background:#0ea5e9}
/* code-as-link */
.code-link{text-decoration:none;cursor:pointer}
.sk-code.code-link:hover,.learn-code.code-link:hover{text-decoration:underline;color:var(--ind2)}
/* interactive example: format toggle + clickable choices + feedback */
.ex-toggle{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px;margin:0 0 12px}
.ex-tg{background:none;border:0;color:var(--tx2);font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:6px;cursor:pointer;font-family:inherit}
.ex-tg:hover{color:var(--tx)}
.ex-tg.on{background:var(--ind);color:#fff}
.ex-choices.ex-pick li{cursor:pointer}
.ex-choices.ex-pick li:hover{border-color:var(--ind);background:var(--panel2)}
.ex-choices li.wrong{border-color:#f87171;background:rgba(248,113,113,.12);font-weight:600}
.ex-input-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.ex-fb{margin-top:11px;font-weight:800;font-size:13.5px}
.ex-fb.good{color:#34d399}
.ex-fb.bad{color:#f87171}
.ex-answer b.ok{color:#34d399}
.ex-answer b.no{color:#f87171}
.ex-box{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.ex-q{font-size:15px;font-weight:600;line-height:1.5;margin-bottom:11px}
.ex-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ex-choices li{padding:7px 11px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.ex-choices li.correct{border-color:#34d399;background:rgba(52,211,153,.12);font-weight:600}
.ex-tick{font-size:10px;font-weight:800;color:#34d399;text-transform:uppercase;margin-left:6px}
.ex-answer{font-size:15px;margin:4px 0}
.ex-why{margin-top:12px;font-size:13px;color:var(--tx2);line-height:1.5}
/* stacked fraction (numerator over denominator) so kids do not read a divide sign */
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;
  line-height:1;margin:0 3px;font-size:.86em}
.frac .fnum{border-bottom:1.5px solid currentColor;padding:0 4px 1px}
.frac .fden{padding:1px 4px 0}
/* audience toggle */
.libc-head-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.aud-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.aud-btn{background:none;border:0;color:var(--tx2);font-size:11.5px;font-weight:700;padding:4px 11px;
  border-radius:6px;cursor:pointer;font-family:inherit}
.aud-btn:hover{color:var(--tx)}
.aud-btn.active{background:var(--ind);color:#fff}
.teks-list.nocode li{padding-left:2px}
.lib-foot{margin-top:34px;text-align:center;color:var(--tx2);font-size:13px}
.lib-foot a{color:var(--ind2)}

/* auth */
body.auth-locked > header, body.auth-locked > main, body.auth-locked > footer{filter:blur(6px);pointer-events:none;user-select:none}
#authWrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(900px 500px at 70% -10%,#16223f 0,transparent 60%),rgba(7,11,22,.92)}
.auth-card{position:relative;width:min(400px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.auth-x{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--muted,#94a3b8);border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.auth-x:hover{color:var(--tx,#e2e8f0);border-color:var(--muted,#94a3b8)}
.auth-logo{display:flex;align-items:center;gap:12px}
.auth-err{color:#fca5a5;font-size:13px;background:rgba(248,113,113,.1);border:1px solid #4a2230;border-radius:8px;padding:8px 11px;margin-bottom:8px}
.auth-alt{text-align:center;color:var(--tx2);font-size:13px;margin-top:14px}
.auth-alt a{color:var(--ind2)}
.invite-code{font-family:monospace;font-size:26px;font-weight:800;letter-spacing:4px;text-align:center;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px;color:#67e8f9}

/* collapsible sections */
.sec-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer}
.sec-head:hover{background:var(--panel2)}
.sec-caret{color:var(--tx2);font-size:12px}
.sec-title{font-weight:700;font-size:16px}
.sec-meta{margin-left:auto;display:flex;align-items:center;gap:8px}
.sec-meta-txt{color:var(--tx2);font-size:13px}
.sec-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--panel2);color:var(--tx2)}
.sec-badge.bad{background:rgba(248,113,113,.15);color:#fca5a5}
.sec-badge.ok{background:rgba(52,211,153,.14);color:var(--grn)}
.sec-card.open .sec-head{border-bottom:1px solid var(--line)}
.sec-body{padding:14px 16px 16px}

/* data tables */
.dt-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dt-search{flex:1;max-width:320px;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  border-radius:9px;padding:8px 12px;font-size:13px;font-family:inherit}
.dt-search:focus{outline:none;border-color:var(--ind)}
.dt-count{font-size:12px}
.dt-table th.dt-th{cursor:pointer;user-select:none;white-space:nowrap}
.dt-table th.dt-th:hover{color:var(--tx)}
.dt-table th.dt-sorted{color:var(--ind2)}
.dt-arrow{font-size:9px;margin-left:4px}
.dt-table td{vertical-align:top}

/* curriculum */
.cur-subjects{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px}
.cur-subj{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
  color:var(--tx2);cursor:pointer;font-size:13px;font-weight:600}
.cur-subj:hover{border-color:var(--ind);color:var(--tx)}
.cur-subj.active{background:var(--ind);border-color:var(--ind);color:#0b1120}
.cur-assess{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:9px 12px;
  border-radius:9px;background:rgba(251,191,36,.08);border:1px solid #5a4415}
.cur-assess-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#fcd34d;font-weight:700}
.cur-assess-chip{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.cur-now{background:rgba(34,211,238,.08);border:1px solid #1c4a56;border-radius:10px;padding:13px 15px;margin:12px 0 8px}
.cur-now-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#67e8f9;font-weight:700}
.cur-now-unit{font-size:19px;font-weight:700;margin:5px 0 7px}
.cur-next{font-size:13px;color:var(--tx)}
.cur-src{font-size:12px;color:var(--tx2);margin-top:10px}
.cur-src a{color:var(--ind2)}
.teks-chip{display:inline-block;font-family:monospace;font-size:10.5px;font-weight:700;color:#67e8f9;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin:0 4px 4px 0}
.cur-sources{display:flex;gap:7px;flex-wrap:wrap}
tr.row-now td{background:rgba(34,211,238,.09)}
tr.row-past td{opacity:.5}
.tb-who{padding:8px 11px;font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px}

/* game */
.gm-wrap{min-height:340px;display:flex;flex-direction:column}
.gm-top{display:flex;gap:10px;margin-bottom:8px}
.gm-stat{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;text-align:center}
.gm-stat b{display:block;font-size:19px;font-weight:800;margin-top:2px}
.gm-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2)}
.gm-stat.gm-low b{color:var(--red)}
.gm-bar{height:4px;background:var(--bg);border-radius:99px;overflow:hidden;margin-bottom:6px}
.gm-bar span{display:block;height:100%;background:var(--ind);width:100%;transition:width .25s linear}
.gm-body{flex:1}
.gm-topic{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin:10px 0 2px}
.gm-q{font-size:24px;font-weight:700;text-align:center;padding:26px 10px;line-height:1.4}
.gm-input-row{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.gm-input{width:190px;background:var(--bg);border:2px solid var(--line);color:var(--tx);border-radius:11px;
  padding:13px;font-size:22px;text-align:center;font-family:inherit;font-weight:700}
.gm-input:focus{outline:none;border-color:var(--ind)}
.sign-btn{font-size:18px;font-weight:700;min-width:44px;padding-left:12px;padding-right:12px}
.gm-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
@media(max-width:560px){.gm-choices{grid-template-columns:1fr}.gm-q{font-size:20px}}
.gm-choice{display:flex;gap:10px;align-items:center;text-align:left;font-size:16px;padding:15px 16px;border-radius:11px;
  background:var(--panel2);border:2px solid var(--line);color:var(--tx);cursor:pointer;transition:.1s;font-weight:600}
.gm-choice:hover:not(:disabled){border-color:var(--ind);transform:translateY(-1px)}
.gm-choice span{color:var(--tx2);font-weight:800}
.gm-choice.right{border-color:var(--grn);background:rgba(52,211,153,.14)}
.gm-choice.wrong{border-color:var(--red);background:rgba(248,113,113,.14)}
.gm-fb{border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5}
.gm-fb.good{background:rgba(52,211,153,.1);border:1px solid #1f5e46;color:var(--grn)}
.gm-fb.bad{background:rgba(248,113,113,.1);border:1px solid #4a2230;color:#fca5a5}
.gm-combo{color:var(--amb);font-weight:800}
.gm-final{font-size:24px;font-weight:800}
.gm-summary{display:flex;gap:10px;margin:12px 0}
.gm-sum-stat{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;text-align:center}
.gm-sum-stat b{display:block;font-size:21px;font-weight:800}
.gm-sum-stat span{font-size:11px;color:var(--tx2)}
.gm-skill{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.gm-skill-name{flex:1}
.gm-skill-bar{flex:0 0 90px;height:6px;background:var(--bg);border-radius:99px;overflow:hidden}
.gm-skill-bar span{display:block;height:100%}
.gm-skill-pct{flex:0 0 46px;text-align:right;font-weight:700}
.gm-missed{max-height:230px;overflow-y:auto}
.gm-miss{padding:8px 0;border-top:1px solid var(--bg2)}
.gm-miss-q{font-size:13.5px}
.gm-miss-a{font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.45}

/* analytics */
.an-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
@media(max-width:700px){.an-cards{grid-template-columns:1fr}}
.an-card{border-radius:11px;padding:12px 14px;border:1px solid var(--line);background:var(--panel2)}
.an-card.weak{border-color:#4a2230;background:rgba(248,113,113,.06)}
.an-card.strong{border-color:#1f5e46;background:rgba(52,211,153,.06)}
.an-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--tx2);margin-bottom:7px}
.an-line{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0}
.an-sub{color:var(--tx2);font-size:12px;margin-left:6px}
.an-pct{margin-left:auto;font-weight:800}
.an-bar{display:inline-block;width:60px;height:6px;background:var(--bg);border-radius:99px;overflow:hidden;vertical-align:middle}
.an-bar span{display:block;height:100%}
.an-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:12px}
.an-topic{display:flex;align-items:center;gap:9px;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--tx);cursor:pointer;font-size:13.5px}
.an-topic:hover{border-color:var(--ind);transform:translateY(-1px)}

/* links list */
.link-list{display:flex;flex-direction:column;gap:6px}
.link-row{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;text-decoration:none;
  background:var(--panel2);border:1px solid var(--line)}
.link-row:hover{border-color:var(--ind);transform:translateY(-1px)}
.link-t{font-size:14px;font-weight:700;color:var(--ind2)}
.link-d{font-size:12px;color:var(--tx2);line-height:1.4}

/* users list */
.users-list{display:flex;flex-direction:column}
.user-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--bg2);font-size:14px}

/* connect + practice history */
.connect-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cs-recommend{background:rgba(52,211,153,.07);border:1px solid #1f5e46;border-radius:11px;padding:13px 15px;margin-bottom:12px}
.cs-rec-title{font-weight:700;font-size:14px;color:var(--grn);margin-bottom:4px}
.cs-rec-body{font-size:13px;color:var(--tx2);line-height:1.5}
.cs-fallback{border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:var(--panel2)}
.cs-fallback summary{cursor:pointer;font-size:13px;color:var(--tx2)}
.cs-fallback[open] summary{margin-bottom:10px;color:var(--tx)}
.inline-code{font-family:monospace;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:#67e8f9}
.cs-links{display:flex;gap:8px;margin:8px 0 2px;flex-wrap:wrap}
.cs-links a{text-decoration:none}
.cs-warn{display:block;margin-top:5px;font-size:12px;color:#fcd34d;background:rgba(251,191,36,.1);border:1px solid #5a4415;border-radius:7px;padding:6px 9px}
.cs-step{font-size:13.5px;line-height:1.5;background:var(--panel2);border-radius:8px;padding:8px 12px}
.ph-aggs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;margin:10px 0 4px}
.ph-agg{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;background:var(--panel2);border-radius:8px;padding:7px 11px}

/* study modal */
.study-test{padding:10px 14px;border-radius:10px;margin:10px 0 4px;font-size:14px;border:1px solid var(--line)}
.study-test.urg-now{background:rgba(248,113,113,.12);border-color:var(--red)}
.study-test.urg-soon{background:rgba(251,191,36,.1);border-color:#5a4415}
.study-test.urg-later{background:var(--panel2)}
.study-quiz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.h4x{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:700;margin:12px 0 6px}
.study-spots{margin-top:6px}
.spot-row{font-size:12.5px;padding:5px 0;border-top:1px solid var(--bg2);display:flex;justify-content:space-between;gap:10px;align-items:center}

/* interactive quiz */
.qz-list{max-height:62vh;overflow-y:auto;padding-right:6px}
.qz-q{padding:13px 0;border-bottom:1px solid var(--bg2)}
.qz-text{font-size:14.5px;margin-bottom:8px}
.qz-choices{display:flex;flex-direction:column;gap:5px}
.qz-choice{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:7px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);cursor:pointer}
.qz-choice:hover{border-color:var(--ind)}
.qz-choice input{accent-color:var(--ind)}
.qz-choice span{color:var(--tx2);font-weight:700}
.qz-choice.right{border-color:var(--grn);background:rgba(52,211,153,.1)}
.qz-choice.wrong{border-color:var(--red);background:rgba(248,113,113,.1)}
.qz-why{margin-top:8px;font-size:12.5px;color:var(--tx2);background:var(--bg);border-radius:8px;padding:8px 10px;line-height:1.5}
.okc{color:var(--grn)} .badc{color:var(--red)}
.modal h3{margin:0 0 14px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;color:var(--tx2);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);
  color:var(--tx);border-radius:9px;padding:10px;font-size:14px;font-family:inherit}
.field textarea{min-height:80px;resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.hint{font-size:12px;color:var(--tx2);margin-top:6px;line-height:1.5}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--ind);color:var(--tx);
  padding:12px 18px;border-radius:10px;z-index:60;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.err{border-color:var(--red)}
.toast.ok{border-color:var(--grn)}

.footer{text-align:center;color:var(--tx2);font-size:12px;padding:20px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--tx2);
  border-top-color:var(--ind);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.view-sec-head{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--ind2);margin:24px 4px 6px}
.sk-titlewrap{min-width:0}
.sk-sub{font-size:12px;color:var(--tx2);margin-top:3px;font-weight:600}

/* ============================================================
   Phone layout (<=640px). Header reflows, content tightens,
   inputs hit 16px so iOS Safari does not zoom on focus.
   ============================================================ */
@media(max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .brand{gap:10px}
  .logo{width:34px;height:34px;border-radius:9px}
  .title{font-size:16px}
  .kidtabs{order:3;flex:1 0 100%;gap:6px}
  .toolbar{flex-wrap:wrap;gap:3px;margin-left:auto;justify-content:flex-end}
  .tb-link{padding:7px 9px;font-size:13px}
  .btn{padding:8px 11px;font-size:13px}
  .btn.ghost{padding:7px 10px}

  main{padding:14px 12px}
  .empty{padding:60px 16px}

  /* stop small inputs triggering the iOS focus-zoom */
  .field input,.field textarea,.field select,
  .dt-search,.gm-input,.drill-input,.ex-input-row input{font-size:16px}

  .panel{padding:14px}
  /* any wide grade table scrolls inside its card instead of pushing the page */
  .class-card{overflow-x:auto}
  .modal{padding:18px}
  .modal-wrap{place-items:start center;padding:14px 0}
  .modal.wide{max-height:94vh;max-height:94dvh}

  /* public study library */
  .lib-top{padding:12px 14px;gap:12px}
  .lib-main{padding:20px 14px 60px}
  .lib-hero h1{font-size:23px}
  .lib-hero p{font-size:14px}
  .lib-grades{margin:16px 0 12px}

  /* wide numbers/headers shrink a touch */
  .stat .n{font-size:22px}
  .cu-topic{font-size:13.5px}
}
@media(max-width:380px){
  .sub{display:none}
  .tb-link{font-size:12px;padding:6px 7px}
  .kidtab{padding:7px 11px;font-size:13px}
}

/* ============================================================
   Device-aware layer (classes set by device.js on <html>:
   dev-phone / dev-tablet / dev-desktop, orient-portrait/landscape).
   Uses REAL device type, not just width, so a narrow desktop window
   keeps the dense desktop layout while an actual phone reflows.
   ============================================================ */

/* live size readout in the footer */
.devinfo{color:var(--tx2);opacity:.7;font-variant-numeric:tabular-nums}
.devinfo:not(:empty)::before{content:"·";margin:0 6px;opacity:.6}

/* The curriculum "What they are learning" list is one-line-dense (nowrap +
   ellipsis) for the wide desktop calendar. In a narrow column that clips every
   skill to "Use ma..." - let it wrap so it reads. */
.dev-phone .learn-list.compact li,
.dev-tablet.orient-portrait .learn-list.compact li{align-items:start}
.dev-phone .learn-list.compact .learn-txt,
.dev-tablet.orient-portrait .learn-list.compact .learn-txt{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
.dev-phone .learn-list.compact .learn-code{align-self:start;margin-top:2px}

/* The dated curriculum table (Dates | Unit | What they are learning) cannot fit
   a phone - the two fixed columns squeeze the skills to a sliver. On a real
   phone, reflow each unit into a stacked card: cyan date, bold unit name, then
   the full-width skill list below. Desktop/tablet-landscape keep the table. */
.dev-phone .libc-table thead{display:none}
.dev-phone .libc-table,
.dev-phone .libc-table tbody,
.dev-phone .libc-table tr,
.dev-phone .libc-table td{display:block;width:auto}
.dev-phone .libc-table tr{border:1px solid var(--line);border-radius:11px;
  margin-bottom:10px;padding:11px 13px;background:var(--panel2)}
.dev-phone .libc-table tr.libc-cur{border-color:#1c4a56;background:rgba(34,211,238,.08)}
.dev-phone .libc-table td{border:none;padding:0;min-width:0}
.dev-phone .libc-date{color:#67e8f9;font-weight:700;font-size:12px;white-space:normal;margin-bottom:2px}
.dev-phone .libc-unit{font-size:16px;font-weight:700;margin-bottom:9px}
.dev-phone .libc-learn{width:auto}

/* skill detail button is a real touch target on phones */
.is-touch .skill-btn{width:28px;height:28px}

/* ============================================================
   Tests & quizzes tab: accuracy chart, trend chip, per-question detail
   ============================================================ */
/* bar fills (shared with analytics fail-rate bars, which were previously uncolored) */
.an-bar span.fa{background:var(--grn)} .an-bar span.fc{background:var(--amb)} .an-bar span.fd{background:var(--red)}

.acc-chart{width:100%;height:auto;min-width:520px}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-grid.ch-pass{stroke:#3a5169;stroke-dasharray:4 4}
.ch-axis{fill:var(--tx2);font-size:10px}
.ch-area{fill:rgba(129,140,248,.12);stroke:none}
.ch-line{fill:none;stroke:var(--ind);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ch-dot{stroke:var(--panel);stroke-width:1.5}
.ch-dot.g-a{fill:var(--grn)} .ch-dot.g-b{fill:var(--ind2)} .ch-dot.g-c{fill:var(--amb)} .ch-dot.g-d{fill:var(--red)}
.ch-pt{cursor:pointer;outline:none}
.ch-hit{fill:transparent}
.ch-guide{stroke:var(--ind2);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.ch-dot{transition:r .12s ease}
.ch-pt:hover .ch-dot,.ch-pt.tip-on .ch-dot,.ch-pt:focus-visible .ch-dot{r:7;stroke:var(--tx);stroke-width:2}
.ch-pt:hover .ch-guide,.ch-pt.tip-on .ch-guide,.ch-pt:focus-visible .ch-guide{opacity:.6}
.trend[data-tip]{cursor:default;outline:none}

/* styled tooltip for any [data-tip="Heading::Body"] (one delegated handler in app.js) */
.st-tip{position:absolute;z-index:3000;max-width:300px;padding:9px 12px;border-radius:10px;
  background:#0f1830;border:1px solid #33456b;color:var(--tx);font-size:12.5px;line-height:1.4;
  box-shadow:0 10px 28px rgba(0,0,0,.5);pointer-events:none;visibility:hidden}
.st-tip.show{visibility:visible}
.st-tip-h{font-weight:800;font-size:13px;margin-bottom:6px;color:var(--tx)}
.st-tip-r{display:flex;gap:12px;justify-content:space-between;padding:1px 0}
.st-tip-r span{color:var(--tx2);flex:0 0 auto}
.st-tip-r b{font-weight:700;text-align:right;color:var(--tx)}
.st-tip-l{color:var(--tx2)}

.trend{font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--tx2)}
.trend.up{background:rgba(52,211,153,.14);color:var(--grn)}
.trend.down{background:rgba(248,113,113,.14);color:#fca5a5}

.test-list{display:flex;flex-direction:column;gap:8px}
.test-head{gap:10px}
.test-titlewrap{min-width:0;flex:1}
.test-head .sec-title{font-size:15px}
.test-item .sec-meta{gap:8px}
.tq{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;border-top:1px solid var(--bg2)}
.tq:first-child{border-top:none}
.tq-mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.tq-ok .tq-mark{background:rgba(52,211,153,.15);color:var(--grn)}
.tq-bad .tq-mark{background:rgba(248,113,113,.15);color:#fca5a5}
.tq-main{min-width:0;flex:1}
.tq-q{font-size:13.5px;line-height:1.45}
.tq-a{font-size:12.5px;color:var(--tx2);margin-top:3px}

/* ============================================================
   Wrong-answer remediation: verdict + teaching + related retry
   ============================================================ */
.rem-verdict{line-height:1.5}
.rem-teach{margin-top:10px;background:rgba(129,140,248,.1);border-left:3px solid var(--ind2);
  border-radius:0 8px 8px 0;padding:9px 12px}
.rem-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ind2);font-weight:800;margin-bottom:5px}
.rem-teach ul{margin:0;padding-left:18px}
.rem-teach li{font-size:13px;line-height:1.5;margin:3px 0;color:var(--tx)}
.rem-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rem-host{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;color:var(--tx)}
.rem-q-head{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:800;margin-bottom:6px}
.rem-q-text{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:12px;color:var(--tx)}
.rem-choices{margin-bottom:10px}
.rem-cont{margin-top:12px}

/* Tests tab: per-attempt actions (study / remove) */
.test-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--bg2)}

/* select-then-confirm: a chosen-but-not-yet-graded multiple-choice option */
.gm-choice.selected{border-color:var(--ind);background:rgba(129,140,248,.18);box-shadow:0 0 0 1px var(--ind) inset}
.rem-check-row{margin-bottom:10px}

/* ============================================================
   Color theme picker (StudyHall style: glossy circular swatches)
   ============================================================ */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px;margin-top:6px}
.theme-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:16px 12px;
  cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;color:var(--tx);font-family:inherit}
.theme-card:hover{border-color:var(--tc);transform:translateY(-2px)}
.theme-card.active{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc) inset}
.theme-swatch{width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.55),transparent 52%),var(--tc);
  box-shadow:0 6px 16px -5px var(--tc)}
.theme-name{font-size:13px;font-weight:700}
.theme-check{position:absolute;top:8px;right:10px;font-size:12px;font-weight:800;color:var(--tc);opacity:0;transition:opacity .12s}
.theme-card.active .theme-check{opacity:1}

/* ============================================================
   GPA screen + Planner
   ============================================================ */
.gpa-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.gpa-big{flex:1;min-width:170px;text-align:center}
.gpa-num{font-size:64px;font-weight:800;line-height:1;color:var(--ind2);letter-spacing:-1px}
.gpa-lbl{color:var(--tx2);font-size:13px;margin-top:6px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.gpa-side{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
.gpa-alt{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:14px}
.gpa-alt b{font-size:17px;font-variant-numeric:tabular-nums}
.gpa-toggle{align-self:flex-start;margin-top:2px}
.adv-badge{font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--ind2);background:rgba(129,140,248,.14);border:1px solid var(--line);border-radius:5px;padding:1px 6px;vertical-align:1px}

.pl-list{display:flex;flex-direction:column;gap:8px}
.pl-item{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.pl-item.done{opacity:.55}
.pl-item.done .pl-title{text-decoration:line-through}
.pl-check{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg);color:transparent;cursor:pointer;font-size:13px;font-weight:800;display:grid;place-items:center;transition:.12s}
.pl-check:hover{border-color:var(--ind)}
.pl-check.on{background:var(--grn);border-color:var(--grn);color:#04120c}
.pl-main{flex:1;min-width:0}
.pl-title{font-size:14.5px;font-weight:600;line-height:1.3}
.pl-meta{font-size:12px;color:var(--tx2);margin-top:2px}
.pl-del{flex:0 0 auto;background:none;border:none;color:var(--tx2);font-size:15px;cursor:pointer;padding:4px 6px;border-radius:6px}
.pl-del:hover{color:var(--red);background:rgba(248,113,113,.1)}

/* ============================================================
   Stylus scratchpad (math quiz/drill) + saved scratch in history
   ============================================================ */
.scratch-host{margin-top:12px}
.scratch-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.scratch-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:700}
.scratch-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.scratch-tools .btn.small{padding:5px 10px}
.scratch-copyq{background:var(--ind);color:#0b1120;font-weight:700}
.scratch-undo:disabled{opacity:.4;cursor:default}
/* full-screen overlay mode (a CSS overlay, so it works on phones too) */
.scratch-host.sc-full{position:fixed;inset:0;z-index:5000;margin:0;padding:12px env(safe-area-inset-right,12px)
  calc(12px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,12px);
  background:var(--bg);display:flex;flex-direction:column}
.scratch-host.sc-full .scratch-box{flex:1 1 auto;height:auto !important;min-height:0}
.scratch-host.sc-full .scratch-grip{display:none}
/* fluid, drag-resizable pad: fills width, height clamps to the viewport so it
   fits in landscape, and the grip lets the user drag it taller/shorter */
.scratch-box{position:relative;width:100%;height:clamp(130px,30vh,280px);min-height:110px;
  background:var(--bg);border:1px dashed var(--line);border-radius:10px;overflow:hidden}
.scratch-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.scratch-grip{position:absolute;left:0;right:0;bottom:0;height:18px;display:flex;align-items:center;
  justify-content:center;cursor:ns-resize;touch-action:none;background:linear-gradient(transparent,rgba(129,140,248,.09))}
.scratch-grip span{width:36px;height:4px;border-radius:2px;background:var(--line)}
.scratch-grip:hover span{background:var(--ind)}
.tq-scratch-wrap{margin-top:7px}
.tq-scratch{display:block;max-width:100%;width:320px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);cursor:zoom-in}
.tq-scratch-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2);margin-top:3px}

/* ============================================================
   Grades (marking-period class list) + class detail (ring / What-If)
   ============================================================ */
.gr-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.gr-head .class-name{margin-right:auto}
.mp-tabs{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.mp-tab{background:none;border:0;color:var(--tx2);font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer;font-family:inherit}
.mp-tab.active{background:var(--ind);color:#0b1120}
.gr-list{display:flex;flex-direction:column;gap:9px}
.gr-row{display:block;width:100%;text-align:left;background:var(--panel2);
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;transition:transform .1s,border-color .1s;font-family:inherit}
.gr-row:hover{border-color:var(--ind);transform:translateY(-1px)}
.gr-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gr-info{min-width:0}
.gr-name{font-size:15px;font-weight:700;color:var(--tx)}
.gr-code{font-size:12px;color:var(--tx2);margin-top:2px}
.gr-grade{flex:0 0 auto;text-align:right;line-height:1.02}
.gr-letter{display:block;font-size:23px;font-weight:900}
.gr-num{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.gr-bar{height:7px;background:var(--panel);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:11px}
.gr-bar span{display:block;height:100%;border-radius:5px}
.gr-hac-line{font-size:11.5px;color:var(--tx2);margin-top:9px}
.gr-hac-line b{font-weight:800}
/* HAC chip still used in the class-detail popup header */
.gr-hac{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line);border-radius:20px;
  font-size:11px;font-weight:700;color:var(--tx2);white-space:nowrap;vertical-align:middle}
.cm-grades{display:flex;align-items:center;gap:8px}
.cm-grades .gr-hac{margin-left:0}

/* class detail */
.cm-titlewrap{min-width:0;flex:1}
.ct-tabs{display:flex;gap:6px;margin:4px 0 14px;border-bottom:1px solid var(--line)}
.ct-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--tx2);font-size:14px;font-weight:600;padding:9px 14px;cursor:pointer;font-family:inherit}
.ct-tab.active{color:var(--tx);border-bottom-color:var(--ind)}
.cg-top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cg-ring{flex:0 0 auto;width:132px;height:132px}
.ring{width:132px;height:132px;display:block}
.ring-bg{fill:none;stroke:var(--line);stroke-width:8}
.ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.ring.g-a .ring-fg{stroke:var(--grn)} .ring.g-b .ring-fg{stroke:var(--ind2)}
.ring.g-c .ring-fg{stroke:var(--amb)} .ring.g-d .ring-fg{stroke:var(--red)}
.ring-num{fill:var(--tx);font-size:22px;font-weight:800;text-anchor:middle;font-family:inherit}
.ring-lbl{fill:var(--tx2);font-size:8px;text-anchor:middle;text-transform:uppercase;letter-spacing:.6px;font-weight:700;font-family:inherit}
.cc-cards{flex:1;min-width:180px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.cc-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.cc-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle}
.cc-name{font-size:12px;color:var(--tx2);margin:6px 0 2px;line-height:1.3}
.cc-avg{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.ca-list{display:flex;flex-direction:column}
.ca-row{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--bg2)}
.ca-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%}
.ca-main{flex:1;min-width:0}
.ca-name{font-size:14px;font-weight:600;line-height:1.3}
.ca-date{font-size:11.5px;color:var(--tx2);margin-top:2px}
.ca-score{flex:0 0 auto;text-align:right}
.ca-score b{font-size:15px;font-variant-numeric:tabular-nums}
.ca-score span{font-size:11px;color:var(--tx2)}
/* What-If */
.wi-proj{display:flex;align-items:center;justify-content:center;gap:16px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.wi-cell{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:700}
.wi-cell b{font-size:26px;font-weight:800}
.wi-arrow{font-size:22px;color:var(--tx2)}
.wi-adds{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.wi-row{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.wi-cat{flex:1;min-width:0;color:var(--tx2)}
.wi-del{background:none;border:0;color:var(--tx2);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.wi-del:hover{color:var(--red);background:rgba(248,113,113,.1)}
.wi-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.wi-in{background:var(--bg);border:1px solid var(--line);color:var(--tx);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit}
.wi-in#wiCat{flex:1;min-width:120px}
.wi-in#wiScore{width:90px}
.wi-total{width:72px}
.wi-of{color:var(--tx2)}
.gp{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.gp h4{margin:0 0 8px}
.gp-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--tx2);margin-bottom:10px}
.gp-in{width:80px}.gp-sel{min-width:150px}
.gp-list{display:flex;flex-direction:column;gap:6px}
.gp-row{display:flex;flex-direction:column;gap:2px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.gp-row.ok{border-left-color:var(--grn,#4ade80)}.gp-row.hard{border-left-color:var(--amb,#fbbf24)}.gp-row.no{border-left-color:var(--red,#f87171);opacity:.85}
.gp-cat{font-weight:700}.gp-cat .muted{font-weight:400;font-size:11px}
.gp-txt{color:var(--tx2)}.gp-txt b{color:var(--tx)}
.gp-done{font-size:13px;color:var(--grn,#4ade80)}
.wi-step{font-size:12px;font-weight:700;min-width:44px;text-align:right}
.wi-step.up{color:var(--green,#4ade80)}.wi-step.dn{color:var(--red,#f87171)}
.gb{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.gb h4{margin:0 0 8px}
.gb-sum{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--tx2)}
.gb-sum b{color:var(--tx)}
.gb-wrap{overflow-x:auto;margin:10px 0 6px}
.gb-t{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.gb-t th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.gb-t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.gb-t td.gb-cat{white-space:normal;min-width:130px}
.gb-t td .muted{font-size:11px}
.wbar{display:flex;gap:3px;margin:0 0 12px;border-radius:10px;overflow:hidden}
.wbar-seg{min-width:0;padding:7px 9px;display:flex;flex-direction:column;gap:2px;font-size:11px;color:#0b1020}
.wbar-seg.wbar-0{background:#93c5fd}.wbar-seg.wbar-1{background:#fcd34d}.wbar-seg.wbar-2{background:#86efac}.wbar-seg.wbar-3{background:#f9a8d4}
.wbar-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbar-nums{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wi-preview{margin:8px 0 2px;font-size:13px;line-height:1.5;color:var(--tx2);min-height:20px}
.wi-preview b:not([class]){color:var(--tx)}
.gb-more{margin-top:6px}
.gb-more summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent,#60a5fa);padding:4px 0}
.gb-up{color:var(--green,#4ade80);font-weight:700}.gb-mid{color:var(--tx2)}.gb-dn{color:var(--red,#f87171);font-weight:700}

/* attendance card */
.att-list{display:flex;flex-direction:column;gap:6px}
.att-row{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.att-day{flex:0 0 auto;font-weight:800;color:var(--amb);font-variant-numeric:tabular-nums;min-width:56px}
.att-codes{color:var(--tx)}

/* recent grades card */
.rg-list{display:flex;flex-direction:column}
.rg-row{display:flex;align-items:center;gap:13px;padding:10px 2px;border-top:1px solid var(--bg2)}
.rg-row:first-child{border-top:none}
.rg-pct{flex:0 0 auto;min-width:52px;text-align:center;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.rg-main{flex:1;min-width:0}
.rg-name{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-meta{font-size:12px;color:var(--tx2);margin-top:2px}
.rg-kind{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:1px 6px;border-radius:5px;margin-right:5px}
.rg-kind.rg-assignment{background:rgba(148,163,184,.15);color:var(--tx2)}
.rg-kind.rg-quiz{background:rgba(129,140,248,.15);color:var(--ind2)}
.rg-kind.rg-practice{background:rgba(34,211,238,.14);color:#67e8f9}
.rg-score{flex:0 0 auto;font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums;text-align:right}

/* recent tab: clickable rows -> supporting study info */
.rg-click{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.rg-click:hover{background:var(--panel2)}
.rg-arrow{flex:0 0 auto;color:var(--tx2);font-size:18px;font-weight:700;margin-left:2px}
.rg-click:hover .rg-arrow{color:var(--ind2)}

/* ============================================================
   Section navigation: a menu button + dropdown (replaces the tab strip)
   ============================================================ */
.navbar{margin:8px 0 16px}
.tabbar{display:flex;flex-wrap:wrap;gap:6px}
.nav-item{background:var(--panel2);border:1px solid var(--line);color:var(--tx2);
  padding:8px 15px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;
  font-family:inherit;white-space:nowrap}
.nav-item:hover{border-color:var(--ind);color:var(--tx)}
.nav-item.active{background:var(--ind);border-color:var(--ind);color:#0b1120}

/* Phone bottom tab bar (5 primary + More sheet) */
.btmnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:var(--panel);border-top:1px solid var(--line2);
  padding:6px 4px calc(9px + env(safe-area-inset-bottom,0px))}
.btm-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;color:var(--tx3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;padding:4px 2px}
.btm-item .bi{font-size:19px;line-height:1}
.btm-item.active{color:var(--ind2)}
.btmsheet-wrap{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.btmsheet{width:100%;max-width:520px;background:var(--panel);border-top:1px solid var(--line2);
  border-radius:20px 20px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.bs-grab{width:40px;height:4px;border-radius:3px;background:var(--line2);margin:2px auto 12px}
.bs-title{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);margin-bottom:10px}
.bs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bs-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:13px;padding:14px 6px;color:var(--tx2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
.bs-item .bi{font-size:22px}
.bs-item.active{background:var(--ind);border-color:var(--ind);color:#0b1120}
@media(max-width:640px){ .btmnav{display:flex} .navbar{display:none} #main{padding-bottom:78px} }

/* study-card test alert (full-width bar under the header, not floating in it) */
.study-alert{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:9px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:13.5px;transition:filter .12s}
.study-alert:hover{filter:brightness(1.12)}
.study-alert .sa-ic{flex:0 0 auto;font-size:15px}
.study-alert .sa-topic{flex:1;min-width:0}
.study-alert .sa-when{flex:0 0 auto;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.study-alert.urg-now{border-color:var(--red);background:rgba(248,113,113,.1)}
.study-alert.urg-now .sa-when{color:#fca5a5}
.study-alert.urg-soon{border-color:#5a4415;background:rgba(251,191,36,.08)}
.study-alert.urg-soon .sa-when{color:#fcd34d}
.study-alert.urg-later{border-color:#2f3a66}
.study-alert.urg-later .sa-when{color:var(--ind2)}
/* The class screen's test banner: what it covers on its own line, then the button. */
.study-alert.sh-test{flex-wrap:wrap;cursor:pointer}
.sh-covers{flex:1 1 100%;font-size:12.5px;color:var(--tx2);line-height:1.45}
.sh-studytest{margin-left:auto}
.tdh-cov{color:var(--tx);opacity:.85}
/* Whether a finished quiz, drill or game reached the server. */
.save-line{margin:10px 0 0;font-size:13px;color:var(--tx2)}
.save-line .ok{color:var(--grn)}.save-line .bad{color:var(--red)}
.save-line .btn{margin-left:6px}
/* Phone "This week": Calendar | Classes switch. */
.tw-mode{display:inline-flex;gap:4px;margin:0 0 10px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.tw-mode-b{background:none;border:0;color:var(--tx2);font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:7px;cursor:pointer}
.tw-mode-b.on{background:var(--ind);color:#fff}

/* consolidated header menu (gear) */
.tb-gear{font-size:20px;line-height:1;padding:7px 12px}
.tb-dropdown .tb-sep{height:1px;background:var(--line);margin:5px 6px}

/* "+N" materials overflow chip + the all-materials modal list */
.res-more{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;cursor:pointer;font-family:inherit;
  background:var(--panel2);border:1px solid var(--line);color:var(--ind2)}
.res-more:hover{border-color:var(--ind);color:var(--tx)}
.mat-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.mat-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;text-decoration:none;
  background:var(--panel2);border:1px solid var(--line);color:var(--tx)}
.mat-row:hover{border-color:var(--ind)}
.mat-row.saved{border-color:#1f5e46}
.mat-kind{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--tx2)}
.mat-row.saved .mat-kind{color:var(--grn)}
.mat-name{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* material date on the all-materials modal rows */
.mat-date{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ind2);font-variant-numeric:tabular-nums;min-width:96px;text-align:right;white-space:nowrap}

/* This-week card (Today) + per-class week strip (class popup) */
.tw-head{display:flex;align-items:center;gap:10px}
.cw-sec{margin:14px 0}
.cw-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2);font-weight:800;margin-bottom:7px}
.cw-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.cw-day{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 9px;min-height:64px}
.cw-day.cw-today{border-color:var(--ind);box-shadow:0 0 0 1px var(--ind) inset}
.cw-dow{font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px}
.cw-learn{font-size:12px;line-height:1.35;color:var(--tx);margin-bottom:3px}
.cw-ev{font-size:11.5px;line-height:1.35;color:var(--tx);border-left:3px solid var(--tx2);padding-left:5px;margin-bottom:3px}
.cw-ev.dot-test{border-left-color:var(--ind2)} .cw-ev.dot-bad{border-left-color:var(--red)}
.cw-ev.dot-ok{border-left-color:var(--grn)} .cw-ev.dot-warn{border-left-color:var(--amb)} .cw-ev.dot-sch{border-left-color:#22d3ee}
.cw-empty{color:var(--tx2);font-size:12px}
@media(max-width:640px){.cw-strip{grid-template-columns:repeat(2,1fr)}}

/* week matrix: advanced-class + test/quiz highlights + fuller avg cell */
.mx-adv-row .mx-class{color:var(--ind2)}
.mx-adv-row td:first-child{border-left:3px solid var(--ind)}
.mx-adv-badge{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;letter-spacing:.4px;color:#0b1120;
  background:var(--ind2);border-radius:5px;padding:1px 5px;vertical-align:1px}
.mx-avg{white-space:nowrap}
.mx-avg .grade-pill{font-size:13px;padding:3px 9px}
.mx-fail{display:block;font-size:10px;font-weight:700;color:#fca5a5;margin-top:3px}
.mx-learn.mx-test,.mx-ev.mx-test{background:rgba(248,113,113,.12);border:1px solid #4a2230;border-radius:6px;
  padding:3px 6px;color:#fca5a5;font-weight:600}
.mx-test-badge{display:inline-block;margin-right:5px;font-size:8px;font-weight:800;letter-spacing:.5px;color:#0b1120;
  background:#fca5a5;border-radius:4px;padding:1px 4px;vertical-align:1px}
.mx-test-badge.done{background:#94a3b8}
.mx-wkq{margin-top:8px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:rgba(148,163,184,.06)}
.mx-wkq.has-test{border-color:#4a2230;background:rgba(248,113,113,.08)}
.mx-wkq-top{font-size:12px;color:#cbd5e1;line-height:1.35;margin-top:3px}
.mx-wkq-top b{color:#a5f3fc;font-weight:700}
.mx-due{font-size:9px;font-weight:800;letter-spacing:.4px;color:#22d3ee;margin-right:2px}
.mx-wkq-when{display:block;font-size:10px;font-weight:700;color:#fcd34d;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.mx-wkq-it{font-size:12px;color:#fca5a5;font-weight:600;line-height:1.35;margin-top:2px}
.mx-trow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.mx-trow .mx-test-badge{margin-right:0}
.mx-tname{font-size:12px;line-height:1.3}
.mx-learn.mx-taken{background:rgba(129,140,248,.08);border:1px solid rgba(129,140,248,.35);border-radius:6px;padding:5px 7px;color:var(--tx);font-weight:600}
.mx-score{flex:none;font-size:14px;font-weight:800;padding:1px 8px;border-radius:99px;background:rgba(15,23,42,.6)}
.mx-kind{font-size:9px;font-weight:800;letter-spacing:.5px;color:#0b1120;border-radius:4px;padding:2px 6px}
.mx-kind.k-test{background:#fca5a5}
.mx-kind.k-quiz{background:#fcd34d}
.mx-kind.k-cfu{background:#67e8f9}
.mx-kind.k-assignment{background:#a5b4fc}
/* one rhythm for everything in a day's cell */
td.mx-day > .mx-learn, td.mx-day > .mx-ev{margin:0 0 6px}
td.mx-day > :last-child{margin-bottom:0}
/* week band: one event spanning the days, under that class's cells */
.mx-table tr.mx-has-band > td.mx-day{border-bottom:0}
.mx-table td.mx-band{padding:0 9px 7px;border-top:0}
.mx-band-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(148,163,184,.06)}
.mx-band-in.has-test{border-color:#4a2230;background:rgba(248,113,113,.08)}
.mx-band-in .mx-wkq-when{margin:0}
.mx-band-it{font-size:12px;color:#fca5a5;font-weight:600;white-space:nowrap}
.mx-band-in .mx-wkq-more{margin:0;flex:1 1 100%}
.mx-band-in .mx-wkq-more:not([open]){flex:0 0 auto}
.mx-wkq-more{margin-top:4px}
.mx-wkq-more > summary{cursor:pointer;font-size:11px;font-weight:700;color:#a5b4fc;list-style:none}
.mx-wkq-more > summary::-webkit-details-marker{display:none}
.mx-wkq-more > summary::before{content:"\25B8  "}
.mx-wkq-more[open] > summary::before{content:"\25BE  "}

/* compact materials button (opens the full materials popup) */
.mat-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;
  cursor:pointer;font-family:inherit;background:var(--panel2);border:1px solid var(--line);color:var(--ind2)}
.mat-btn:hover{border-color:var(--ind);color:var(--tx)}

/* week matrix: split Grade/Issues columns + clickable day items */
.mx-issues{white-space:nowrap;text-align:center;vertical-align:middle}
.mx-miss{display:block;font-size:10px;font-weight:700;color:#fcd34d;margin-top:2px}
.mx-ok{color:var(--grn);font-weight:800;font-size:14px}
.mx-click{cursor:pointer;transition:filter .1s}
.mx-click:hover{filter:brightness(1.3)}
/* keep the compact materials button on the side, not stretched full-width */
.mat-btn{flex:0 0 auto}

/* week-matrix per-day attachment clip + week unit theme under the class name */
.mx-clip{display:inline-block;margin-left:5px;font-size:11px;color:var(--ind2);cursor:pointer;opacity:.85;vertical-align:baseline}
.mx-clip:hover{opacity:1;filter:brightness(1.3)}
.mx-theme{margin-top:3px;font-size:11px;font-weight:600;color:#94a3b8;line-height:1.25}

/* matrix identity columns: letter grade | percent | one assignments column */
.mx-letter .grade-pill{font-size:13px;padding:3px 9px}
.mx-pct-v{font-weight:800;font-size:13px}
.mx-asg{vertical-align:middle}
.mx-passc{font-weight:800;font-size:13px;color:var(--grn)}
.mx-failc{font-weight:800;font-size:13px;color:var(--red)}
.mx-asg-sep{color:var(--tx2);opacity:.55;margin:0 1px}
.mx-zero{color:var(--tx2);opacity:.65;font-weight:600;font-size:13px}

/* study modal: today's work items (real Schoology assignments/docs for today) */
.tw-item{margin:6px 0;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.tw-link{display:inline-flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;font-weight:600;font-size:13.5px}
.tw-link:hover{color:var(--ind2)}
.tw-kind{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ind2);background:rgba(129,140,248,.14);padding:2px 7px;border-radius:5px}
.tw-item .res-row{margin-top:6px}

/* teacher (+ room) line under a class name */
.mx-teacher{margin-top:2px;font-size:11px;font-weight:600;color:var(--ind2);opacity:.9}
.class-teacher{margin-top:2px;font-size:13px;font-weight:600;color:var(--ind2)}

/* corner X close button, pinned top-right even while a tall modal scrolls */
.modal-xbar{position:sticky;top:0;z-index:8;height:0;display:flex;justify-content:flex-end}
.modal-x{margin:-6px -6px 0 0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel2);color:var(--tx2);border-radius:50%;font-size:14px;
  line-height:1;cursor:pointer;transition:color .12s,border-color .12s}
.modal-x:hover{color:var(--tx);border-color:var(--ind2)}

/* stacked class cell: subject / Advanced / teacher / period */
.mx-cname{font-weight:700;font-size:13px;color:var(--tx);line-height:1.2}
.mx-adv-row .mx-cname{color:var(--ind2)}
.mx-level{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ind2);margin-top:1px}
.mx-period{margin-top:2px;font-size:11px;color:var(--tx2);font-weight:600}

/* Phone: the This-week matrix is too wide for a table; stack each class as a card. */
@media(max-width:640px){
  .mx-wrap{overflow-x:visible}
  .mx-table{font-size:13px;width:100%}
  .mx-table thead{display:none}
  .mx-table,.mx-table tbody{display:block;width:100%}
  .mx-table tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:10px 12px;background:var(--panel2)}
  .mx-table tr.mx-adv-row{border-left:3px solid var(--ind)}
  .mx-table td{display:flex;border:0;padding:5px 0;width:auto;min-width:0;align-items:flex-start;gap:10px}
  .mx-table td.mx-class{position:static;display:block;background:transparent;width:auto;max-width:none;padding:0 0 7px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .mx-cname{font-size:16px}
  .mx-table td[data-label]::before{content:attr(data-label);flex:0 0 92px;color:var(--tx2);font-weight:600;font-size:12px;padding-top:1px}
  .mx-table td.mx-letter,.mx-table td.mx-pct,.mx-table td.mx-asg{text-align:left}
  .mx-table td.mx-day{background:transparent!important}
  .mx-table td.mx-day:empty{display:none}
  .mx-table tr.mx-has-band{margin-bottom:0;border-bottom:0;border-radius:12px 12px 0 0}
  .mx-table tr.mx-band-row{border-top:0;border-radius:0 0 12px 12px;padding-top:0}
  .mx-table td.mx-band{display:block;padding:0}
  .mx-learn,.mx-ev{white-space:normal}
}

/* phone/desktop swap: table on desktop, widget board on phone */
.phone-only{display:none}
@media(max-width:640px){ .phone-only{display:block} .desktop-only{display:none} }

/* Widget Board (phone This-week) */
.wb{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.wb-card{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:14px}
.wb-label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx2);font-weight:700;margin-bottom:11px}
.wb-grades{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.wb-tile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 4px;text-align:center;cursor:pointer;font-family:inherit;transition:transform .1s}
.wb-tile:active{transform:scale(.95)}
/* Mini Progress grade rows */
.wb-mplist{display:flex;flex-direction:column}
.wb-mp{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:11px 2px;text-align:left;
  cursor:pointer;font-family:inherit;color:var(--tx);width:100%;transition:none}
.wb-mp:first-child{border-top:0;padding-top:2px}
.wb-mp:active{transform:none}
.wb-mp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;margin-bottom:6px}
.wb-mp-top b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-mp-g{font-weight:800;font-size:12.5px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.wb-mp-track{height:8px;background:var(--panel);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.wb-mp-track span{display:block;height:100%;border-radius:5px}
/* Combined "This week" rows: grade + today in one compact row */
.cw-list{display:flex;flex-direction:column}
.cw-row{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  padding:11px 2px;font-family:inherit;color:var(--tx);cursor:pointer}
.cw-row:first-child{border-top:none;padding-top:4px}
.cw-row:active{background:var(--panel2)}
.cw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:13.5px;margin-bottom:6px}
.cw-nm{min-width:0}
.cw-top b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-sub{font-size:11px;color:var(--tx3);font-weight:500;margin-top:1px}
.cw-g{font-weight:800;font-size:12.5px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.cw-track{height:6px;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cw-track span{display:block;height:100%;border-radius:4px}
.cw-ln{font-size:12px;color:var(--tx2);margin-top:7px;line-height:1.32}
/* Needs attention - phone cards */
.attn-list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.attn-card{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--line2);
  border-radius:12px;padding:11px 13px}
.attn-card.row-bad{border-left-color:#ef4444}
.attn-card.row-warn{border-left-color:#f59e0b}
.attn-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.attn-badge{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 9px;
  border-radius:11px;background:rgba(148,163,184,.15);color:var(--tx2)}
.attn-card.row-bad .attn-badge{background:rgba(239,68,68,.16);color:#fca5a5}
.attn-card.row-warn .attn-badge{background:rgba(245,158,11,.16);color:#fcd34d}
.attn-due{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.attn-item{font-size:13.5px;font-weight:600;line-height:1.3}
.attn-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--tx2)}
.attn-cls{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attn-score{font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;color:var(--tx)}
/* Schoology updates - day-grouped timeline with class-colored nodes */
.snx-day{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);margin:12px 0 4px}
.snx-tl{position:relative;padding-left:22px;margin-left:5px}
.snx-tl::before{content:"";position:absolute;left:5px;top:6px;bottom:8px;width:2px;background:var(--line2)}
.snx-ev{position:relative;padding:3px 0 14px}
.snx-node{position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg)}
.snx-it{font-size:13.5px;font-weight:600;line-height:1.35}
.snx-it a{color:var(--tx);text-decoration:none}
.snx-it a:hover{color:var(--ind2);text-decoration:underline}
.snx-sub{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:4px;font-size:11.5px}
.snx-sub b{font-weight:800}
.snx-kind{font-weight:700}
.snx-when{color:var(--tx3);margin-left:auto}
.snx-all{margin-top:10px;background:var(--panel2);border:1px solid var(--line2);color:var(--ind2);font-weight:700}
.wb-lt{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.wb-nm{display:block;font-size:9px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-today{display:flex;flex-direction:column}
.wb-ti{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;font-family:inherit;color:var(--tx);width:100%}
.wb-ti:first-child{border-top:0}
.wb-ti-t{font-size:13px;line-height:1.3}
.wb-ti-c{font-size:11px;color:var(--tx2);white-space:nowrap;flex:0 0 auto}
.wb-empty{font-size:12px;color:var(--tx2)}
.wb-next{width:100%;display:block;text-align:left;cursor:pointer;font-family:inherit;color:var(--tx);background:var(--panel2);border:1px solid var(--line)}
.wb-next-row{display:flex;align-items:center;gap:15px}
.wb-cd{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;line-height:.9}
.wb-next-lab{display:flex;flex-direction:column;gap:2px}
.wb-days{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx2)}
.wb-next-lab b{font-size:13.5px}
.wb-when{font-size:11px;color:var(--tx2)}

/* Subject screen: everything for one class, this week first */
.sh-learn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px;padding:9px 12px;border-radius:10px;background:rgba(34,211,238,.06);border:1px solid #1d4d5c}
.sh-learn .btn{margin-left:auto}
.sh-test{cursor:pointer}
.sh-day{margin:8px 0 10px}
.sh-dayname{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--tx2);margin-bottom:4px}
.sh-day.sh-today .sh-dayname{color:#67e8f9}
.sh-wk{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin:6px 0;background:var(--bg2)}
.sh-wk>summary{cursor:pointer;padding:9px 0;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sh-wk>summary::-webkit-details-marker{display:none}
.sh-wk>summary::before{content:'\25B8';color:var(--tx2)}
.sh-wk[open]>summary::before{content:'\25BE'}
.sh-wk[open]{padding-bottom:6px}
.sh-open{cursor:pointer}
.sh-go{color:var(--ind2);font-weight:800}
.sh-mat-course{margin-top:10px}
.sh-mat-head{font-weight:800;color:var(--ind2);margin-bottom:2px}
.modal-back{position:absolute;left:0;top:-6px;z-index:9}

/* Subject screen v2: a compact head, then one pane at a time */
.sh-head{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:2px 0 12px}
.sh-headrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sh-sch{margin-left:auto}
.sh-unit{margin-top:4px;color:var(--tx)}
.sh-head .study-alert{margin:10px 0 0}
.sh-head .sh-learn{margin:10px 0 0}
.sh-learnt{flex:1;min-width:0;font-weight:600}
.sh-pills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.sh-pill{border:1px solid var(--line);background:var(--panel2);color:var(--tx2);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer}
.sh-pill:hover{color:var(--tx);border-color:var(--ind)}
.sh-pill.active{background:var(--ind);border-color:var(--ind);color:#0b1120}
.sh-pane.hidden{display:none}
.sh-group{margin:16px 0 6px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx2)}
.sh-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
.sh-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.sh-row:first-child{border-top:0}
.sh-rmain{flex:1;min-width:0}
.sh-rmain .sh-title{display:block;font-weight:600;overflow-wrap:anywhere}
.sh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.sh-ract{display:flex;gap:6px;flex:0 0 auto}
.sh-empty{padding:6px 0}
.sh-day{margin:0 0 12px}
.sh-dayname{display:flex;align-items:center;gap:8px}
.sh-day.sh-today .sh-list{border-color:#1d4d5c;box-shadow:0 0 0 1px #1d4d5c}
.sh-wk .sh-day:first-of-type{margin-top:4px}
@media (max-width:640px){.sh-row{flex-wrap:wrap}.sh-ract{width:100%;justify-content:flex-end}}.sh-headrow{padding-right:34px}
.sh-head a.btn,.sh-ract a.btn{text-decoration:none}

/* Worksheet test: one problem at a time, answers after submitting */
.ws-load{padding:28px 4px;color:var(--tx2);text-align:center}
.ws-prog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:2px 0 12px}
.ws-prog i{display:block;height:100%;background:var(--ind)}
.ws-q{background:#fff;border-radius:10px;overflow:hidden}
.ws-q img{display:block;width:100%}
.ws-ans{margin-top:12px}
.ws-lbl{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx2);margin-bottom:6px}
.ws-lbl.ok{color:var(--grn)}
.ws-choices{display:flex;gap:8px}
.ws-choice{flex:1;padding:12px 0;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:18px;font-weight:800;cursor:pointer}
.ws-choice:hover{border-color:var(--ind)}
.ws-choice.sel{background:var(--ind);border-color:var(--ind);color:#0b1120}
.ws-input{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:17px}
.ws-input:focus{outline:none;border-color:var(--ind)}
.ws-note{margin-top:6px;font-size:13px;color:var(--tx2)}
.ws-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.ws-your{font-size:18px;font-weight:800;margin-bottom:6px}
.ws-sc{display:block;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.ws-res-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ws-res{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel2)}
.ws-res.ok{border-color:#1f5e46}
.ws-res.bad{border-color:#6b2a2a}
.ws-res-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-res-head .muted{flex:1;min-width:0}
.ws-confirm{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.ws-confirm-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:380px;width:100%}
.ws-confirm-t{font-weight:700;font-size:16px}
.tq-qimg{display:block;width:100%;max-width:420px;margin:6px 0;border-radius:8px;background:#fff}
/* the problem riding on the scratch pad */
.sc-qcard{position:absolute;left:8px;top:8px;width:42%;max-width:420px;z-index:3;background:#fff;border-radius:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.5);overflow:hidden;border:1px solid var(--ind)}
.sc-qcard.hidden{display:none}
.sc-qcard img{display:block;width:100%;pointer-events:none;user-select:none}
.sc-qbar{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;background:var(--ind);color:#0b1120;font-size:12px;font-weight:800;cursor:move;touch-action:none;user-select:none}
.sc-qbar span{flex:1}
.sc-qbar button{border:0;background:rgba(11,17,32,.18);color:#0b1120;border-radius:6px;width:26px;height:24px;font-size:14px;font-weight:900;cursor:pointer}
@media (max-width:640px){.ws-cmp{grid-template-columns:1fr}.sc-qcard{width:60%}}.ws-syms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ws-sym{min-width:42px;padding:8px 0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:17px;font-weight:800;cursor:pointer}
.ws-sym:hover{border-color:var(--ind)}#modal .ws-q{max-width:520px;margin-left:auto;margin-right:auto}
#modal .ws-cmp .ws-q{max-width:none}
.ws-headnum{margin-right:34px;white-space:nowrap}.sc-qresize{position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,var(--ind) 50%);border-top-left-radius:6px}
/* A reading selection above its question */
.ws-passage{border:1px solid var(--line);border-radius:10px;background:var(--panel2);margin:0 0 12px;overflow:hidden}
.ws-passage>summary{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;list-style:none;font-weight:700}
.ws-passage>summary::-webkit-details-marker{display:none}
.ws-ptitle{flex:1;min-width:0}
.ws-phint{font-size:12px;font-weight:800;color:var(--ind2);text-transform:uppercase;letter-spacing:.4px}
.ws-pbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:0 12px 8px}
.ws-pscroll{max-height:62vh;overflow:auto;background:#fff;-webkit-overflow-scrolling:touch}
.ws-pinner img{display:block;width:100%;border-bottom:2px solid #d4d8e2}.ws-pviews{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ws-pv{border:0;background:transparent;color:var(--tx2);padding:5px 12px;font-weight:700;cursor:pointer}
.ws-pv.on{background:var(--ind);color:#0b1120}
.ws-pbar{justify-content:flex-start}
.ws-pscroll.text{background:var(--bg);color:var(--tx)}
.ws-ptext{padding:14px 16px 18px;line-height:1.6;font-size:100%}
.ws-ptext h4{margin:14px 0 6px;font-size:1.15em;color:var(--tx)}
.ws-ptext h4:first-child{margin-top:0}
.ws-ptext p{margin:0 0 10px;font-size:1em}
.ws-pn{display:inline-block;min-width:22px;margin-right:6px;font-size:.8em;font-weight:800;color:var(--ind2)}
/* ============================================================
   Responsive layer. The layout follows the DEVICE (device.js stamps
   dev-phone / dev-tablet / dev-desktop and orient-* on <html>, by the
   shorter screen edge, so a phone on its side is still a phone), not
   width alone. Width-only rules above still cover a narrow desktop window.
   ============================================================ */

/* Menu: every phone and tablet uses the bottom menu in both orientations.
   Width alone flipped a phone turned sideways (844px) and every tablet to the
   desktop tab row, and the bottom menu disappeared. */
.dev-phone .btmnav,.dev-tablet .btmnav{display:flex}
.dev-phone .navbar,.dev-tablet .navbar{display:none}
.dev-phone #main,.dev-tablet #main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* the desktop tab row stays one row and scrolls sideways instead of wrapping */
.dev-desktop .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}

/* Header: one row on a phone. Logo, the kids (scrolling sideways if there are
   many), a refresh icon for Pull grades, and the menu. */
.dev-phone .topbar{flex-wrap:nowrap;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top,0px))}
.dev-phone .brand{gap:8px;flex:0 0 auto}
.dev-phone .brand .sub{display:none}
.dev-phone .logo{width:32px;height:32px;border-radius:9px;font-size:13px}
.dev-phone.orient-portrait .brand .title{display:none}
.dev-phone .kidtabs{order:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none}
.dev-phone .kidtabs::-webkit-scrollbar{display:none}
.dev-phone .kidtab{padding:6px 11px;font-size:13px;white-space:nowrap;flex:0 0 auto}
.dev-phone .toolbar{flex:0 0 auto;flex-wrap:nowrap;margin-left:0;gap:2px}
.dev-phone #hacRefreshBtn{font-size:0;padding:6px 9px;line-height:1}
.dev-phone #hacRefreshBtn::before{content:"\21BB";font-size:17px;font-weight:700}
.dev-phone main{padding:12px 10px}

/* Phone on its side: height is what is scarce. The header scrolls away with the
   page and the bottom menu is thinner. */
.dev-phone.orient-landscape .topbar{position:static}
.dev-phone.orient-landscape .btmnav{padding-top:3px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
.dev-phone.orient-landscape .btm-item{flex-direction:row;justify-content:center;gap:6px;font-size:11px;padding:6px 2px}
.dev-phone.orient-landscape .btm-item .bi{font-size:16px}
.dev-phone.orient-landscape #main{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.dev-phone.orient-landscape .install-banner{display:none}

/* Content: the compact cards on any phone and on an upright tablet; the wide
   week grid only where it fits. */
.dev-phone .phone-only,.dev-tablet.orient-portrait .phone-only{display:block}
.dev-phone .desktop-only,.dev-tablet.orient-portrait .desktop-only{display:none}
.dev-desktop .phone-only,.dev-tablet.orient-landscape .phone-only{display:none}
.dev-desktop .desktop-only,.dev-tablet.orient-landscape .desktop-only{display:block}
@media(max-width:640px){ .dev-desktop .phone-only{display:block} .dev-desktop .desktop-only{display:none} }

/* Popups on a phone use the whole screen height, with the page behind fixed. */
.dev-phone .modal-wrap{place-items:start center;padding:0}
.dev-phone .modal{width:100vw;max-width:100vw;border-radius:0;border-left:0;border-right:0;padding:16px 14px}
.dev-phone .modal.wide{width:100vw;max-height:100vh;max-height:100dvh;min-height:100dvh;padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.dev-tablet .modal.wide{width:min(920px,94vw);max-height:92dvh}
.sh-rtext{margin-top:3px;font-size:13px;color:var(--tx2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sh-rmain .sh-title:hover{color:var(--ind2)}

.sh-nkind{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;margin-bottom:2px}
.sh-nwhen{font-size:12px;text-align:right;line-height:1.35;white-space:nowrap}
.sh-upkind{color:#a5b4fc}
.sh-uptest .sh-upkind{color:#fca5a5}
.sh-nwhen.urg-now{color:#fca5a5;font-weight:700}
.sh-nwhen.urg-soon{color:#fcd34d;font-weight:700}
.sh-nwhen.urg-later{color:#cbd5e1}
.sh-upgrade{font-size:15px;font-weight:800}
.sh-upgrade.good{color:#4ade80}
.sh-upgrade.low{color:#fcd34d}
.sh-upgrade.bad{color:#fca5a5}
.sh-updone .sh-upkind{color:#94a3b8}

/* item titles on the class screen: plain text colour, no underline (the rule was
   dropped as dead CSS on 9/22 and every title fell back to a browser link) */
.sh-title{color:var(--tx);text-decoration:none;font-weight:600}
a.sh-title:hover{color:var(--ind2);text-decoration:underline}
.sh-group .muted{text-transform:none;letter-spacing:0;font-weight:600;margin-left:8px}
/* phone: a practice row's name on its own line, the four buttons in a full-width row under it */
@media(max-width:640px){
  .sb-row{flex-direction:column;align-items:stretch;gap:8px}
  .sb-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
  .sb-name b{flex-basis:100%;font-size:15px;line-height:1.3}
  .sb-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
  .sb-actions .btn{width:100%;justify-content:center;padding-left:4px;padding-right:4px}
}

/* Messages: school email by kid and class */
.msg-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.msg-search{flex:1;min-width:180px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;color:var(--tx);font:inherit}
.msg-classes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.msg-cls{cursor:pointer;border:0}
.msg{padding:11px 4px;border-top:1px solid var(--line);cursor:pointer}
.msg:hover{background:rgba(255,255,255,.02)}
.msg-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msg-from{font-size:14px}
.msg-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.msg-tag.t{background:rgba(129,140,248,.16);color:#a5b4fc}
.msg-tag.s{background:rgba(34,211,238,.14);color:#67e8f9}
.msg-tag.d{background:rgba(148,163,184,.16);color:#cbd5e1}
.msg-when{margin-left:auto;font-size:12px;color:var(--tx2)}
.msg-subj{font-weight:700;margin:4px 0 2px}
.msg-body{font-size:13.5px;color:var(--tx2);line-height:1.5;overflow-wrap:anywhere}
.msg.open .msg-body{color:var(--tx)}
.msg-links{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px}
.msg-links a{color:var(--ind2)}

/* Suggest: floating mic button, the speak-or-type panel, and the parents' list */
.sg-fab{position:fixed;right:18px;bottom:22px;z-index:45;display:flex;align-items:center;gap:7px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid var(--line);background:var(--ind);color:#0b1120;font-family:inherit;font-weight:600;font-size:14px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer}
.sg-fab.hidden{display:none}
.sg-fab-ic{font-size:18px}
.dev-phone .sg-fab,.dev-tablet .sg-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:12px;padding:9px 13px 9px 10px}
@media(max-width:640px){ .sg-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }
.sg-head{padding-right:46px}
.sg-text{width:100%;box-sizing:border-box;margin-top:10px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-family:inherit;font-size:16px;line-height:1.45;resize:vertical;min-height:120px}
.sg-text::placeholder{color:var(--tx2)}
.sg-row{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.sg-mic{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px 10px 14px;border-radius:999px;background:var(--ind);border-color:var(--ind);color:#0b1120;font-weight:700;font-size:16px}
.sg-mic-ic{flex:none}
.sg-mic.on{background:var(--red);border-color:var(--red);color:#fff}
.sg-mic.on .sg-mic-ic{animation:sgPulse 1s ease-in-out infinite}
.dev-phone .sg-mic{flex:1 1 100%}
@keyframes sgPulse{50%{opacity:.35}}
.sg-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-height:60vh;overflow:auto}
.sg-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg2)}
.sg-item.sg-done,.sg-item.sg-rejected{opacity:.75}
.sg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.sg-meta .chip{margin-left:auto}
.sg-body{margin-top:6px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.sg-reply{margin-top:6px;font-size:13px;color:var(--tx2)}
.sg-acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.qz-size-ask{margin:12px 0 10px;font-size:16px;font-weight:600}
.qz-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px}
.qz-size{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border-radius:14px}
.qz-size b{font-size:30px;line-height:1}
.qz-size span{font-size:13px}

/* Mastery by idea (Analytics) and the per-idea quiz summary */
.chip.warn{background:rgba(251,191,36,.14);color:var(--amb)}
.mq-tiles{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.mq-tile{flex:1;min-width:110px;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.mq-tile b{display:block;font-size:22px}
.mq-tile span{color:var(--tx2);font-size:12px}
.mq-tile.no b{color:var(--red)} .mq-tile.fix b{color:var(--amb)} .mq-tile.ok b{color:var(--grn)}
.fr-status{font-size:13px;line-height:1.4}
.mq-dots{display:inline-flex;gap:3px;vertical-align:middle}
.mq-dots i{width:9px;height:9px;border-radius:50%;display:inline-block}
.mq-dots i.ok{background:var(--grn)} .mq-dots i.no{background:var(--red)}
.mq-sum h4{margin:10px 0 4px}
.mq-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--bg2);font-size:13.5px}
.mq-row.no span:first-child{color:#fca5a5} .mq-row.fix span:first-child{color:var(--amb)}
.mq-bad{color:#fca5a5}

/* Race: clock, streak, record to beat and the results card */
.race-head{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.race-clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ind2);background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.3);border-radius:999px;padding:2px 9px;font-size:13px}
.race-clock.paused{color:var(--tx2);background:var(--bg2);border-color:var(--line)}
.race-streak{font-weight:800;color:var(--amb);font-size:13px}
.race-target{margin:-4px 0 10px;font-size:13px;color:var(--tx2)}
.race-target b{color:var(--tx)}
.race-card{margin:10px 0;padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.race-card.rec{border-color:rgba(251,191,36,.55);background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(251,191,36,.03))}
.race-rec{font-size:17px;font-weight:800;color:var(--amb);margin-bottom:8px}
.race-stats{display:flex;gap:10px}
.race-stats div{flex:1;text-align:center;padding:6px 4px;border-radius:9px;background:rgba(255,255,255,.03)}
.race-stats b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.race-stats span{font-size:11.5px;color:var(--tx2)}
.race-vs{margin-top:8px;font-size:13.5px;color:var(--tx)}

/* Guided lessons */
.les-prog{height:6px;border-radius:99px;background:var(--bg2);margin:2px 0 14px;overflow:hidden}
.les-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--ind),var(--grn));border-radius:99px;transition:width .3s}
.les-intro{font-size:15px;line-height:1.55;margin:0 0 12px;color:var(--tx)}
.les-h{font-weight:700;margin:10px 0 6px;color:var(--ind2)}
.les-list{margin:0 0 6px;padding-left:22px;line-height:1.7}
.les-list li.done{color:var(--grn)}
.les-list li.done::after{content:" \2713"}
.les-idea{font-size:19px;font-weight:800;margin:0 0 10px;color:var(--tx)}
.les-idea.small{font-size:13px;font-weight:700;color:var(--ind2);margin-bottom:6px}
.les-body p{font-size:15px;line-height:1.6;margin:0 0 10px}
.les-ex{margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.les-ex-h{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--amb);margin-bottom:6px}
.les-ex-q{font-weight:600;margin-bottom:8px}
.les-steps{margin:0 0 8px;padding-left:22px;line-height:1.6}
.les-rem{margin:10px 0 4px;padding:10px 12px;border-radius:10px;border-left:4px solid var(--grn);background:rgba(52,211,153,.08)}
.les-again{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.3);color:var(--tx)}
.les-ul{margin:0;padding-left:20px;line-height:1.6}
.les-done{font-size:22px;font-weight:800;margin:4px 0 10px;color:var(--amb)}

/* Visual aids (vis.js) */
.vis{margin:12px 0;padding:14px;border-radius:14px;background:linear-gradient(160deg,rgba(129,140,248,.10),rgba(103,232,249,.04));border:1px solid rgba(129,140,248,.25);overflow:hidden}
.vis-title{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cyan,#67e8f9);margin:0 0 10px}
.vis-cap{margin-top:10px;font-size:13.5px;color:#cbd5e1;line-height:1.5}
.vis-ic{font-size:30px;line-height:1;margin-bottom:4px}
.vis-ic.sm{font-size:20px;margin:0 6px 0 0;display:inline-block;vertical-align:-3px}
.vis-lbl{font-weight:800;font-size:13.5px;color:var(--c);line-height:1.25}
.vis-note{font-size:12px;color:#cbd5e1;margin-top:3px;line-height:1.3}
.vis-flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.vis-step{flex:1 1 90px;min-width:84px;text-align:center;padding:10px 8px;border-radius:12px;background:rgba(15,23,42,.55);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--c) 70%,transparent)}
.vis-arrow{align-self:center;color:#94a3b8;font-size:20px}
.vis-cycle{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto}
.vis-cycle-svg{position:absolute;inset:0;width:100%;height:100%}
.vis-cnode{position:absolute;transform:translate(-50%,-50%);width:31%}
.vis-cnode .vis-step{min-width:0;padding:8px 6px}
.vis-cnode .vis-ic{font-size:24px}
.vis-ccenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:800;font-size:13px;color:#e2e8f0;text-align:center;width:30%}
.vis-compare,.vis-sort{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.vis-col,.vis-bin{flex:1 1 140px;border-radius:12px;padding:10px 12px;background:rgba(15,23,42,.55);border-top:4px solid var(--c)}
.vis-col-h{font-weight:800;color:var(--c);margin-bottom:6px;font-size:14.5px}
.vis-col ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;color:#e2e8f0}
.vis-vs{align-self:center;font-weight:900;color:#94a3b8;font-size:12px;text-transform:uppercase}
.vis-chips{display:flex;flex-wrap:wrap;gap:6px}
.vis-chip{padding:4px 10px;border-radius:999px;font-size:12.5px;background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:#f1f5f9}
.vis-tl{display:flex;gap:0;overflow-x:auto;padding:4px 2px 2px;scrollbar-color:#3a475c transparent}
.vis-tl-ev{flex:1 0 96px;position:relative;text-align:center;padding:0 4px}
.vis-tl-ev::before{content:"";position:absolute;top:17px;left:0;right:0;height:3px;background:#3a475c}
.vis-tl-ev:first-child::before{left:50%} .vis-tl-ev:last-child::before{right:50%}
.vis-tl-dot{position:relative;width:36px;height:36px;margin:0 auto 6px;border-radius:50%;background:#0f172a;border:3px solid var(--c);display:flex;align-items:center;justify-content:center;font-size:17px}
.vis-tl-when{font-weight:900;color:var(--c);font-size:13px}
.vis-tl-lbl{font-size:12px;color:#e2e8f0;line-height:1.3;margin-top:2px}
.vis-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.vis-scene{border-radius:10px}
.vis-grid{display:grid;gap:2px;margin:0 auto;width:100%}
.vis-cell{aspect-ratio:1;border-radius:3px;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.18)}
.vis-cell.on{background:color-mix(in srgb,var(--c,#818cf8) 70%,transparent);border-color:var(--c,#818cf8)}
.vis-grid.txt .vis-cell{aspect-ratio:auto;padding:6px 4px;font-size:12px;text-align:center;color:#e2e8f0}
.vis-glabel{text-align:center;margin-top:8px;font-weight:800;color:#e2e8f0}
.vis-tape{display:flex;gap:3px}
.vis-seg{padding:10px 6px;text-align:center;font-weight:800;font-size:13px;border-radius:8px;background:color-mix(in srgb,var(--c) 30%,transparent);border:2px solid var(--c);color:#f8fafc;min-width:0;overflow-wrap:anywhere}
.vis-brace{margin-top:6px;border:2px solid #94a3b8;border-top:0;height:10px;border-radius:0 0 8px 8px;position:relative}
.vis-brace span{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-weight:800;color:#e2e8f0;font-size:13px;white-space:nowrap;padding-top:2px}
.vis-tape + .vis-brace{margin-bottom:22px}
.vis-bars{display:flex;flex-direction:column;gap:7px}
.vis-barrow{display:grid;grid-template-columns:minmax(70px,30%) 1fr auto;gap:8px;align-items:center;font-size:13px}
.vis-barlbl{color:#e2e8f0;font-weight:600}
.vis-bartrack{height:16px;border-radius:99px;background:rgba(148,163,184,.12);overflow:hidden}
.vis-bar{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,transparent),var(--c))}
.vis-barval{font-weight:800;color:#e2e8f0;font-variant-numeric:tabular-nums}
.vis-formula{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 10px;font-size:22px}
.vis-fpart{display:flex;flex-direction:column;align-items:center;padding:6px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
.vis-fpart b{color:var(--c);font-weight:900}
.vis-fpart i{font-style:normal;font-size:11px;color:#cbd5e1;margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.vis-fop{color:#94a3b8;font-weight:800;padding-top:6px}
.vis-sent{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:flex-start;font-size:17px;line-height:1.3}
.vis-w{display:inline-flex;flex-direction:column;align-items:center;padding:3px 8px 4px;border-radius:9px;background:color-mix(in srgb,var(--c) 16%,transparent);border-bottom:3px solid var(--c)}
.vis-w b{color:#f8fafc;font-weight:700}
.vis-w i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--c);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.vis-wp{color:#e2e8f0;padding:3px 0}
.vis-note2{margin-top:10px;font-size:13px;color:#cbd5e1}
.vis-tablewrap{overflow-x:auto;scrollbar-color:#3a475c transparent}
.vis-table{border-collapse:separate;border-spacing:3px;margin:0 auto;font-size:13.5px}
.vis-table th{color:var(--cyan,#67e8f9);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:4px 8px}
.vis-table td{background:rgba(15,23,42,.55);color:#e2e8f0;padding:7px 10px;border-radius:7px;text-align:center}
.vis-table td.on{background:rgba(251,191,36,.25);color:#fff;font-weight:800;box-shadow:inset 0 0 0 2px #fbbf24}
.vis-stack{display:flex;flex-direction:column;gap:3px;max-width:420px;margin:0 auto}
.vis-layer{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--c) 28%,transparent);border-left:5px solid var(--c);font-size:13.5px}
.vis-layer b{color:#f8fafc} .vis-layer span{color:#cbd5e1;font-size:12px;text-align:right}
.vis-mn{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vis-mn-i{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:8px 6px;border-radius:12px;background:rgba(15,23,42,.55);border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
.vis-mn-i b{font-size:24px;color:var(--c);font-weight:900;line-height:1}
.vis-mn-i span{font-size:11.5px;color:#e2e8f0;margin-top:3px}
.vis-mn-p{text-align:center;margin-top:10px;font-weight:800;color:#fbbf24}
@media (max-width:520px){.vis{padding:11px}.vis-formula{font-size:18px}.vis-cnode .vis-lbl{font-size:11.5px}.vis-cnode .vis-note{display:none}.vis-cnode .vis-ic{font-size:20px}}
.sp-idea{font-weight:800;margin:14px 0 -4px;color:var(--tx)}

/* ---- Video lessons (videos.js): Watch screen, players, mini player, cartoon, stars ---- */
.vd-lead{color:var(--tx2);font-size:14px;margin:6px 0 12px}
.vd-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.vd-way{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .15s,transform .15s}
.vd-way:hover{border-color:var(--ind);transform:translateY(-2px)}
.vd-way.off{opacity:.55;cursor:default;transform:none}
.vd-way-icon{font-size:26px;line-height:1}
.vd-way-blurb{color:var(--tx2);font-size:12.5px;line-height:1.35}
.vd-way-mine{font-size:12px;color:var(--tx2)}
.vd-stars{color:var(--amb);letter-spacing:1px}
.vd-vlist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.vd-vrow{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font-family:inherit;cursor:pointer}
.vd-vrow:hover{border-color:var(--ind)}
.vd-thumb{width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000;flex:none}
.vd-vmeta{display:flex;flex-direction:column;gap:3px;font-size:14px;min-width:0}
.vd-about{font-size:13px;color:#cbd5e1}
.vd-ideas{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.vd-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin:10px 0}
.vd-frame iframe,.vd-mini-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-frame .vd-box,.vd-mini-frame .vd-box{position:absolute;inset:0}
.vd-under{margin-top:8px}
.vd-status{padding:10px 12px;border-radius:10px;background:var(--bg2);color:#cbd5e1;font-size:14px;margin:8px 0}
.vd-marks{display:flex;align-items:center;gap:10px;font-size:12px}
.vd-track{position:relative;flex:1;height:6px;border-radius:3px;background:var(--line)}
.vd-track i{position:absolute;top:-4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--amb);border:2px solid var(--bg)}
.vd-track i.done{background:var(--grn)}
.vd-track .vd-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--ind);transition:width .5s linear}
.vd-track .vd-head-dot{position:absolute;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--tx);left:0;transition:left .5s linear;z-index:1}
.vd-clock{font-variant-numeric:tabular-nums;color:var(--tx);white-space:nowrap}
.vd-q{padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.vd-q-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.vd-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.vd-idea-list{display:flex;flex-wrap:wrap;gap:6px}
.vd-idea{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-family:inherit;font-size:13px;cursor:pointer}
.vd-idea:hover{border-color:var(--ind)}
.vd-mini{position:fixed;right:16px;bottom:90px;z-index:70;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.vd-mini.size-s{width:220px}.vd-mini.size-m{width:320px}.vd-mini.size-l{width:min(520px,92vw)}
.vd-mini-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--panel2);color:var(--tx);font-size:12px;cursor:move;touch-action:none;user-select:none}
.vd-mini-bar span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vd-mini-btn{border:1px solid var(--line);background:var(--panel);color:var(--tx);border-radius:6px;width:28px;height:24px;cursor:pointer;font-size:13px}
.vd-mini-frame{position:relative;aspect-ratio:16/9}
.ct-stage{position:relative;margin:10px 0;padding:16px;border-radius:14px;min-height:260px;background:radial-gradient(120% 90% at 20% 0%,#1e2b52 0%,var(--bg2) 60%,var(--bg) 100%);border:1px solid var(--line);overflow:hidden}
.ct-title{font-size:20px;font-weight:700;margin-bottom:12px}
.ct-num{display:block;font-size:12px;font-weight:600;color:var(--ind2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}
.ct-scene{display:grid;grid-template-columns:1fr;gap:12px}
.ct-stage.show-ex .ct-scene{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.ct-stage.show-ex .ct-title{grid-column:1/-1}
.ct-pic .vis{margin:0}
.ct-pic .vis-svg{max-width:640px}
.vm-token{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:3;opacity:0}
.ct-big{font-size:64px;text-align:center}
.ct-ex{display:none;margin-top:10px}
.ct-stage.show-ex .ct-ex{display:block;margin-top:0}
.ct-hide{display:none}
.ct-remember{margin-top:10px}
.ct-cap{margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(4,8,18,.6);font-size:17px;line-height:1.5;min-height:3em}
.ct-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ct-prog{flex:1;min-width:80px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ct-prog i{display:block;height:100%;width:0;background:var(--ind);transition:width .4s}
.vd-rate{margin:12px 0}
.vd-rate-btns{display:flex;gap:8px;flex-wrap:wrap}
.vd-rate-b{flex:1;min-width:100px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-family:inherit;font-size:13px;cursor:pointer}
.vd-rate-b .vd-stars{font-size:20px}
.vd-rate-b.on{border-color:var(--amb);background:rgba(251,191,36,.12)}
.vd-trial{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 12px}
.vd-trial th{text-align:left;color:var(--tx2);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.vd-trial td{padding:7px 8px;border-bottom:1px solid var(--bg2)}
.vd-fit{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.vd-fit-row{display:flex;justify-content:space-between;gap:10px}
@media (max-width:720px){
  .vd-ways{grid-template-columns:1fr 1fr}
  .vd-thumb{width:112px}
  .ct-stage.show-ex .ct-scene{grid-template-columns:1fr}
  .vd-mini{bottom:80px;right:8px}
  .vd-mini.size-m{width:260px}
  .vd-trial th:nth-child(5),.vd-trial td:nth-child(5),.vd-trial th:nth-child(6),.vd-trial td:nth-child(6){display:none}
}
#modal .vd-head{padding-right:40px}
#modal:has(.modal-back) .vd-head{padding-left:72px}
.vd-ytmode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13px}
.vd-seg{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:#cbd5e1;font-family:inherit;font-size:13px;cursor:pointer}
.vd-seg.on{border-color:var(--ind);background:rgba(129,140,248,.18);color:var(--tx);font-weight:600}

/* Mixed test row and the link to every practice set */
.sb-row.sb-mix{background:linear-gradient(90deg,rgba(251,191,36,.12),rgba(251,191,36,.03));border:1px solid rgba(251,191,36,.35);border-radius:10px;padding:10px 12px;margin:6px 0}
.sb-mix .chip.now{background:rgba(251,191,36,.18);color:var(--amb)}
.sh-more{margin:10px 0 2px;text-align:center}

/* District calendar: days off, marked days, the next day off and the calendar's source */
.dist-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;font-size:13px}
.dist-note{color:var(--tx);padding:6px 11px;border-radius:9px;line-height:1.35;outline:none}
.dist-note b{font-weight:800;margin-right:2px}
.dist-note.off{border:1px dashed rgba(251,191,36,.65);background:rgba(251,191,36,.08)}
.dist-note.off b{color:var(--amb)}
.dist-note.soon{border:1px solid var(--line);background:var(--panel2)}
.dist-note.soon b{color:#fcd34d}
.dist-src{margin-left:auto;color:var(--tx2);font-size:12px;text-decoration:none;border-bottom:1px dotted rgba(148,163,184,.6)}
a.dist-src:hover{color:var(--ind2);border-bottom-color:var(--ind2)}
.dist-mk{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:middle;cursor:default;outline:none;box-shadow:0 0 0 2px rgba(11,17,32,.6)}
.dist-mk.k-testing{background:#c084fc}
.dist-mk.k-early{background:#22d3ee}
.dist-mk.k-gp{background:var(--amb)}
.dist-mk.k-day{background:var(--grn)}
.mx-table th.mx-off{color:var(--tx2);background:rgba(148,163,184,.07);border:1px dashed rgba(251,191,36,.6);cursor:default;outline:none}
.mx-table td.mx-off{background:rgba(148,163,184,.05);border:1px dashed rgba(251,191,36,.45)}
.mx-offtag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#fcd34d;background:rgba(251,191,36,.12);border:1px dashed rgba(251,191,36,.5);vertical-align:middle}
.cw-day.cw-off{background:rgba(148,163,184,.05);border:1px dashed rgba(251,191,36,.55);outline:none;cursor:default}
.cw-day.cw-off.cw-today{box-shadow:none}
.cw-offlbl{font-size:12px;font-weight:700;color:#fcd34d;line-height:1.3}
.cw-mk{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:7px;line-height:1.3;margin:0 0 4px;outline:none;cursor:default}
.cw-mk.k-gp{color:#fcd34d;background:rgba(251,191,36,.12)}
.cw-mk.k-testing{color:#d8b4fe;background:rgba(192,132,252,.14)}
.cw-mk.k-early{color:#67e8f9;background:rgba(34,211,238,.14)}
.cw-mk.k-day{color:#6ee7b7;background:rgba(52,211,153,.14)}
.cw-strip.sh-days{margin:2px 0 12px}
.sh-wknum.sh-break{color:#fcd34d;font-weight:800}
.dist-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 10px}
.dd{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--tx);outline:none}
.dd b{font-size:15px;font-weight:800}
.dd-dow{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--tx2)}
.dd.dd-today{border-color:var(--ind);box-shadow:0 0 0 1px var(--ind) inset}
.dd.dd-off{background:rgba(148,163,184,.05);border:1px dashed rgba(251,191,36,.6);box-shadow:none;color:var(--tx2)}
.dd-off-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fcd34d}
.dd-mks{display:flex;gap:4px;min-height:10px;align-items:center}
.dd-mks .dist-mk{margin:0}
@media(max-width:640px){
  .dist-src{margin-left:0}
  .mx-table td.mx-off{border:0}
  .cw-strip.sh-days{grid-template-columns:repeat(5,1fr);gap:4px}
  .cw-strip.sh-days .cw-day{padding:6px 5px;min-height:56px}
  .cw-strip.sh-days .cw-learn,.cw-strip.sh-days .cw-ev{font-size:11px}
}

/* ============================================================
   Calendar tab: sticky bar, school days left, legend chips,
   week by day (grid on desktop, agenda on a phone), month grid
   ============================================================ */
.class-card.cal-card{overflow:visible;padding:16px}
.cal-bar{position:sticky;top:var(--cal-top,0px);z-index:7;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  margin:-16px -16px 12px;padding:10px 16px;background:rgba(21,31,56,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.cal-nav{display:flex;align-items:center;gap:6px;min-width:0}
.cal-title{font-weight:800;font-size:16px;min-width:0;text-align:center;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-arrow{width:34px;height:34px;flex:0 0 34px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--tx);font-size:20px;line-height:1;cursor:pointer;font-family:inherit;padding:0 0 2px}
.cal-arrow:hover{border-color:var(--ind)}
.cal-todayb{flex:0 0 auto;margin-left:4px;padding:6px 13px;border-radius:999px;border:1px solid var(--ind);background:rgba(129,140,248,.14);
  color:var(--ind2);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.cal-todayb:hover{background:rgba(129,140,248,.24)}
.cal-todayb.here{border-color:var(--line);background:transparent;color:var(--tx2)}
.cal-ctl{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.seg-b{border:0;background:transparent;color:var(--tx2);font-family:inherit;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.seg-b:hover{color:var(--tx)}
.seg-b.on{background:var(--panel2);color:var(--tx);box-shadow:0 0 0 1px var(--ind) inset}

.cal-left{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px}
.cal-left-h{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx2)}
.lf-row{display:flex;flex-wrap:wrap;gap:6px}
.lf{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);outline:none;cursor:default}
.lf-n{font-size:15px;font-weight:800;color:var(--ind2);font-variant-numeric:tabular-nums}
.lf-l{font-size:12px;color:var(--tx2);font-weight:600}
.lf-sub::before{content:", "}
.lf-sub{color:#fcd34d}

.cal-card .cal-legend{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;font-size:11px}
.cal-legend .lg{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.cal-legend .lg i{width:7px;height:7px;border-radius:50%}
.cal-legend .lg-off{border:1px dashed rgba(251,191,36,.6);color:#fcd34d;background:rgba(251,191,36,.07)}

/* week, by day */
.wk2{display:grid;grid-template-columns:minmax(0,.62fr) repeat(5,minmax(0,1fr)) minmax(0,.62fr);gap:8px;align-items:stretch}
.wd{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:8px;min-height:110px;min-width:0;display:flex;flex-direction:column}
.wd-head{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.wd-dow{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.wd-head b{font-size:17px;font-weight:800}
.wd-now{display:inline-block;margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--ind);color:#0b1120;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;align-self:center}
.wd-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.wd-none{font-size:12px;color:var(--tx2)}
.wd.wd-today{border-color:var(--ind);box-shadow:0 0 0 1px var(--ind) inset;background:linear-gradient(rgba(129,140,248,.08),rgba(129,140,248,.03)),var(--panel2)}
.wd.wd-today .wd-head b,.wd.wd-today .wd-dow{color:var(--ind2)}
.wd.wd-past{background:var(--bg2)}
.wd.wd-past .wd-head{opacity:.7}
.wd.wd-past .ce,.wd.wd-past .cw-mk{opacity:.82}
.wd.wd-wkend{background:rgba(148,163,184,.03);min-height:0}
.wd.wd-off{background:rgba(148,163,184,.05);border:1px dashed rgba(251,191,36,.55)}
.wd.wd-off.wd-today{box-shadow:0 0 0 2px var(--ind) inset}
.cal-off{padding:7px 10px;border-radius:9px;background:rgba(251,191,36,.08);border:1px dashed rgba(251,191,36,.6);outline:none;cursor:default}
.cal-off-t{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx);font-weight:600}
.cal-off-t b{color:var(--amb);font-weight:800}
.cal-off-s{font-size:12px;color:var(--tx2);margin-top:2px}
.wk2 .cw-mk{margin:0;align-self:flex-start}

/* one item card */
.ce{position:relative;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--cc,var(--tx2));border-radius:8px;padding:6px 8px;cursor:pointer;min-width:0;transition:filter .12s}
.ce:hover{filter:brightness(1.18)}
.ce-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.ce-top > i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.ce-cls{font-size:11px;font-weight:800;color:var(--cc,var(--tx2));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ce-kind{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:1px 5px;color:#0b1120;flex:0 0 auto}
.ce-kind.k-test{background:#fca5a5}
.ce-kind.k-quiz{background:#fcd34d}
.ce-kind.k-cfu{background:#67e8f9}
.ce-kind.k-assignment{background:#a5b4fc}
.ce-kind.k-material{background:rgba(148,163,184,.2);color:#cbd5e1}
.ce-kind.k-topic{background:rgba(34,211,238,.15);color:#67e8f9}
.ce-score,.ce-st{margin-left:auto;flex:0 0 auto;border-radius:999px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ce-score{font-size:12px;padding:1px 8px}
.ce-score.g-a{background:rgba(52,211,153,.14)} .ce-score.g-b{background:rgba(165,180,252,.15)}
.ce-score.g-c{background:rgba(251,191,36,.15)} .ce-score.g-d{background:rgba(248,113,113,.16)}
.ce-st{font-size:10.5px;padding:1px 7px}
.ce-st.st-sch{color:#67e8f9;background:rgba(34,211,238,.12)}
.ce-st.st-bad{color:#fca5a5;background:rgba(248,113,113,.16)}
.ce-st.st-warn{color:#fcd34d;background:rgba(251,191,36,.15)}
.ce-st.st-pend{color:#cbd5e1;background:rgba(148,163,184,.15)}
.ce-when{margin-left:auto;font-size:10px;font-weight:800;color:#fcd34d;white-space:nowrap}
.ce-t{font-size:12.5px;line-height:1.35;color:var(--tx);margin-top:3px;word-break:break-word}
.ce-sub{font-size:11.5px;color:var(--tx2);margin-top:4px;line-height:1.35}
.ce-sub a{color:var(--ind2)}
.ce.ce-learn{background:rgba(34,211,238,.05)}
.ce.ce-test{background:rgba(251,191,36,.07)}
.ce.ce-test.urg-now{background:rgba(248,113,113,.1);border-color:#4a2230;border-left-color:var(--cc,var(--red))}
.ce.ce-test.urg-now .ce-when{color:#fca5a5}
.cal-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.cal-clamp.c2{-webkit-line-clamp:2}
.cal-clamp.c3{-webkit-line-clamp:3}
.cal-clamp.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.cal-morebtn{display:inline-block;border:0;background:none;padding:2px 0 0;margin:0;color:var(--ind2);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.cal-morebtn:hover{color:var(--tx)}
.cal-card .wk-topics{gap:6px;margin:0 0 12px;padding:8px 10px}
.cal-card .wk-topic{font-size:12px;padding:3px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-card .wk-topic.open{white-space:normal;border-radius:10px}

/* week, by class (the matrix in the calendar) */
.cal-phone-days{display:none}
.mx-now{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--ind);color:#0b1120;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;vertical-align:1px}
.mx-cal th.mx-today{background:rgba(129,140,248,.14);color:var(--ind2)}
.mx-cal td.mx-today{background:rgba(129,140,248,.07)}
.mx-cal th.mx-past{opacity:.7}
.mx-cal td.mx-past > *{opacity:.82}
.mx-cal th.mx-offrun{color:var(--tx2);text-align:center}
.mx-cal th.mx-offrun .mx-offtag{text-transform:none;letter-spacing:0;font-size:11.5px}
.mx-table.mx-cal td.mx-offrun{background:repeating-linear-gradient(135deg,rgba(251,191,36,.05) 0 8px,transparent 8px 16px)}
.cal-card .mx-learn .cal-clamp{display:-webkit-box}
.cal-card .mx-wrap{scrollbar-color:#3a475c transparent;scrollbar-width:thin}
.cal-card .mx-wrap::-webkit-scrollbar{height:8px;background:transparent}
.cal-card .mx-wrap::-webkit-scrollbar-thumb{background:#3a475c;border-radius:6px}

/* month */
.mgrid{display:grid;grid-template-columns:minmax(0,.62fr) repeat(5,minmax(0,1fr)) minmax(0,.62fr);gap:5px}
.mgrid .cal-dow{padding:2px 0 4px}
.cal-dow .ds{display:none}
.mc{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:5px 6px;min-height:96px;min-width:0;overflow:hidden;cursor:pointer;outline:none}
.mc:hover{border-color:var(--ind)}
.mc.mc-blank{background:transparent;border:0;cursor:default;min-height:0}
.mc.mc-we{background:rgba(148,163,184,.03)}
.mc.mc-past > *{opacity:.72}
.mc.mc-off{background:rgba(148,163,184,.05);border:1px dashed rgba(251,191,36,.55)}
.mc.mc-today{border-color:var(--ind);box-shadow:0 0 0 1px var(--ind) inset}
.mc.mc-sel{box-shadow:0 0 0 2px var(--ind2) inset}
.mc-num{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:4px}
.mc-today .mc-num{color:var(--ind2)}
.mc-now{padding:0 6px;border-radius:999px;background:var(--ind);color:#0b1120;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.mc-offl{font-size:11.5px;font-weight:700;color:#fcd34d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}
.mc-mk{font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}
.mc-mk.k-gp{color:#fcd34d;background:rgba(251,191,36,.12)}
.mc-mk.k-testing{color:#d8b4fe;background:rgba(192,132,252,.14)}
.mc-mk.k-early{color:#67e8f9;background:rgba(34,211,238,.14)}
.mc-mk.k-day{color:#6ee7b7;background:rgba(52,211,153,.14)}
.mc .cal-chip{font-size:11px}
.mc .cal-chip.cal-learn{border-left-color:var(--cc,#22d3ee);font-style:normal;color:#a5f3fc}
.mc .cal-chip b{font-weight:800}
.mc-dots{display:none}
.mc-dots i{width:6px;height:6px;border-radius:50%;display:inline-block}
.mc-dots i.dot-learn{background:transparent;box-shadow:0 0 0 1.5px #67e8f9 inset}
.mc-dots i.mk-gp{background:var(--amb);border-radius:1px}
.mc-dots i.mk-testing{background:#c084fc;border-radius:1px}
.mc-dots i.mk-early{background:#22d3ee;border-radius:1px}
.mc-dots i.mk-day{background:var(--grn);border-radius:1px}
.cal-dayp-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:15px}
.cal-dayp-h .muted{margin-left:auto;font-size:12px}
.cal-dayp-h .wd-now,.cal-off-t .wd-now{margin-left:2px}
.cal-dayp-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:7px;align-items:start}
.cal-dayp-b .cw-mk{margin:0;justify-self:start}

/* phone: the week is an agenda, the month a compact grid with dots */
@media(max-width:760px){
  .class-card.cal-card{padding:12px}
  .cal-bar{margin:-12px -12px 10px;padding:8px 12px;gap:7px}
  .cal-nav{flex:1 1 100%}
  .cal-title{flex:1 1 auto;font-size:15px}
  .cal-ctl{flex:1 1 100%;gap:6px}
  .cal-ctl .seg{flex:1 1 0}
  .seg-b{flex:1 1 0;padding:6px 6px}
  .cal-left{gap:5px}
  .lf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
  .lf{flex-direction:column;align-items:flex-start;gap:0;padding:5px 8px}
  .lf-l{font-size:11px;line-height:1.25}
  .lf-sub{display:block}
  .lf-sub::before{content:""}
  .cal-card .cal-legend{font-size:10.5px;gap:4px}
  .cal-legend .lg{padding:1px 7px}

  .wk2{display:flex;flex-direction:column;gap:6px}
  .wd{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start;min-height:0;padding:8px 10px}
  .wd-head{flex-direction:column;align-items:center;gap:1px;margin:0;padding:2px 0 0;border:0}
  .wd-head b{font-size:19px;line-height:1.1}
  .wd-now{margin:3px 0 0;font-size:9px;padding:1px 6px}
  .wd.wd-off .wd-head b{font-size:13px;white-space:nowrap}
  .wd.wd-off .wd-dow{font-size:10px;white-space:nowrap}
  .wd.wd-empty{padding:5px 10px}
  .wd.wd-empty .wd-body{align-self:center}
  .wd.wd-wkend.wd-empty{grid-template-columns:56px minmax(0,1fr);padding:3px 10px;border-style:dashed;background:transparent}
  .wd.wd-wkend.wd-empty .wd-head{flex-direction:row;gap:5px;align-items:baseline;justify-content:center}
  .wd.wd-wkend.wd-empty .wd-head b{font-size:13px}
  .wd.wd-wkend.wd-empty .wd-dow{font-size:10px}
  .ce-t{font-size:13px}

  .mgrid{grid-template-columns:minmax(0,.7fr) repeat(5,minmax(0,1fr)) minmax(0,.7fr);gap:3px}
  .cal-dow .dl{display:none}
  .cal-dow .ds{display:inline}
  .mc{min-height:52px;padding:4px;border-radius:8px}
  .mc-num{font-size:12px;margin-bottom:3px;justify-content:center}
  .mc-now,.mc-full{display:none}
  .mc-offl{font-size:9.5px;text-align:center}
  .mc-dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
  .cal-dayp-b{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cal-phone-days{display:block}
  .cal-phone-days .dd.dd-today{box-shadow:0 0 0 2px var(--ind) inset;background:rgba(129,140,248,.12);color:var(--tx)}
  .cal-phone-days .dd.dd-today .dd-dow{color:var(--ind2)}
  .mx-cal td.mx-offrun{display:none}
  .mx-table.mx-cal td.mx-day.mx-today{background:rgba(129,140,248,.08)!important;border-left:3px solid var(--ind);border-radius:6px;padding-left:8px}
  .mx-table.mx-cal td.mx-day.mx-today::before{color:var(--ind2)}
  .mx-cal td.mx-past > *{opacity:.8}
}