/* Chalk Talk polish layer. Loads last. Rules: docs/DESIGN.md
   Charcoal ground, one yellow primary per view, neutral icons, no gradients or glow on UI. */

:root[data-mode="night"]{
  --bg:#0E1013;--surface:#16181C;--surface2:#1D2025;--line:#2A2D33;
  --ink:#F4F3EF;--ink2:#A6A9B0;--night:#0E1013;
}
html[data-mode="night"] body{background:#0E1013!important;background-image:none!important}
html[data-mode="night"] .topbar{background:#0E1013!important;border-bottom:1px solid #1F2227!important}
html[data-mode="night"] .side{background:#0E1013!important}

/* surfaces: one flat raised color, hairline border */
html[data-mode="night"] :is(.tday,.xd,.cvl-card,.cvx-form,.hr,.tcard,.panel,.card,.xd-empty,.tday-empty){
  background:#16181C!important;border-color:#2A2D33!important;box-shadow:none!important}
.xd-empty,.tday-empty{background-image:none!important}
.xd-grid>.xd:only-child .xd-b{border-left-color:#2A2D33!important}

/* home hero: quiet, no formula doodle */
.hhero{background:#16181C!important;border:1px solid #2A2D33!important;box-shadow:none!important}
.hhero::before,.hhero::after{display:none!important}
.hh-q{letter-spacing:-.03em}
.hh-stats{background:#1D2025!important;border-color:#2A2D33!important}
.hh-flame{width:15px;height:15px;vertical-align:-2px;margin-right:4px;color:#F2994A}

/* the four big home tiles: same dark surface, the art carries the color */
.hb-live,.hb-prac,.hb-tutor,.hb-board{background:#16181C!important;color:var(--ink)!important;border:1px solid #2A2D33!important}
.hb-live .hb-art,.hb-prac .hb-art,.hb-tutor .hb-art{background:none!important}
.hb b{color:var(--ink)!important}
.hb small{color:var(--ink2)!important}
.hb .hb-go{background:#1D2025!important;color:var(--ink)!important}
.hb:hover{transform:translateY(-2px);border-color:#3A3E46!important}
.hb-board .hb-art{opacity:.95}

/* icon tiles: neutral, never rainbow */
.tgrid .tcard .ti,.tgrid .tcard:nth-child(n) .ti{background:#1D2025!important;color:var(--ink)!important;border:1px solid #2A2D33}
.tcard{border-radius:16px!important}
.tcard:hover{transform:translateY(-2px);border-color:#3A3E46!important}
.tcard b{font:700 17px/1.2 var(--head)!important;letter-spacing:-.015em}

/* buttons: brand yellow is the single primary. Everything else steps back. */
.btn.accent{background:#FDDB25!important;border-color:#FDDB25!important;color:#111214!important;box-shadow:none!important}
.btn.accent:hover{background:#FFE34D!important}
.xd-empty .btn.accent,.tday-empty .btn.accent,.hh-chg{background:transparent!important;color:var(--ink)!important;border:1px solid #3A3E46!important}
.xd-empty .btn.accent:hover,.tday-empty .btn.accent:hover{background:#1D2025!important}
.hh-chg{padding:3px 10px;border-radius:999px}

/* the exam card already asks for exam dates; no second card asking the same thing */
[data-pane="home"] .tday-empty{display:none!important}

/* small labels: one quiet style */
.hr-k{letter-spacing:.08em}

/* scene picker and night toggles stay available but quiet */
.scene-btn{opacity:.85}

/* light mode keeps the same structure */
html:not([data-mode="night"]) :is(.hb-live,.hb-prac,.hb-tutor){background:#FFFFFF!important;color:#111214!important;border:1px solid #E6E3EC!important}
html:not([data-mode="night"]) .tgrid .tcard:nth-child(n) .ti{background:#F2F0F5!important;color:#111214!important;border-color:#E6E3EC}
html:not([data-mode="night"]) .hhero{background:#16181C!important}

/* navigation: active tab is a quiet light pill, not another yellow button */
.topbar .rail button[aria-current="page"],.topbar .rail button[aria-current="page"] *{background:#F4F3EF!important;color:#111214!important}
.topbar .rail button[aria-current="page"] svg{background:none!important}
.topbar .credits{background:transparent!important;color:var(--ink)!important;border:1px solid #3A3E46!important;box-shadow:none!important}
html[data-mode="night"] .seg button[aria-pressed="true"],html[data-mode="night"] .seg button[aria-selected="true"]{background:#F4F3EF!important;color:#111214!important;box-shadow:none!important}

/* practice: word problems read best in one column at a book-like width */
.probs{grid-template-columns:minmax(0,1fr)!important;max-width:760px}
.prob .ptoon,.prob .toon,.prob img{max-width:100%}
.topbar .credits,.topbar .credits *{color:var(--ink)!important}
.topbar .credits.low{border-color:#C2361F!important}

/* lesson player: no glow, cover reads cleanly over the board */
.stage{box-shadow:0 30px 80px -40px rgba(0,0,0,.6)!important}
.cover{background:rgba(12,14,16,.78)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cover-btn{box-shadow:none!important}
.chapters button.on{background:#F4F3EF!important;color:#111214!important;border-color:#F4F3EF!important}
.nu-live{background:#16181C!important;background-image:none!important}

/* practice figure: keep it a figure, not a poster */
.prob canvas.fig{max-width:100%}
.controls .ask{background:transparent!important;color:var(--ink)!important;border:1px solid #3A3E46!important;box-shadow:none!important}
.controls .ask:hover:not(:disabled){background:#1D2025!important}

/* phones: the big tiles become simple text cards; their illustrations crowd the titles at this size */
@media (max-width:560px){
  .hb{min-height:0!important;padding:16px!important;align-content:start}
  .hb .hb-art{display:none!important}
  .hb .hb-go{top:14px;right:14px}
}

/* tool cards: icon beside the text, compact rows instead of tall equal tiles */
.tgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important;gap:12px!important}
.tcard{display:grid!important;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-content:start;text-align:left;min-height:0!important;padding:18px!important}
.tcard .ti{grid-row:1 / span 3;width:40px!important;height:40px!important;margin:0!important;border-radius:11px!important}
.tcard>:not(.ti){grid-column:2}
.tcard small{font-size:14.5px;line-height:1.45}
/* the one upgrade card keeps the brand color, with readable text */
html[data-mode="night"] .tcard[style*="--brand"]{background:#FDDB25!important;border-color:#FDDB25!important;color:#111214!important}
.tcard[style*="--brand"] :is(b,small){color:#111214!important}
.tcard[style*="--brand"] .ti{background:#111214!important;color:#FDDB25!important;border-color:#111214!important}

/* subject cards: flat header strip in the subject's color, no glow */
.sj-card{border-radius:16px!important;background:#16181C!important;border-color:#2A2D33!important}
.sj-card:hover{transform:translateY(-2px);border-color:#3A3E46!important;box-shadow:none!important}
.sj-band{height:64px!important;background:#1D2025!important;border-bottom:1px solid #2A2D33}
.sj-band::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.sj-plus{background:#1D2025!important;color:var(--ink)!important;border:1px solid #3A3E46}
.sj-add{background:transparent!important}

/* ===== Presenter: lecture slides on a chalkboard ===== */
.pz{position:fixed;inset:0;z-index:200;background:#0B0D0F;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:12px;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));outline:none;color:#EEF0EA}
.pz-board{position:relative;display:grid;place-items:center;min-height:0;border-radius:14px;background:#17201C;border:1px solid #26332D;box-shadow:inset 0 0 120px rgba(0,0,0,.45);overflow:auto;cursor:pointer}
.pz-slide{width:min(1100px,100%);padding:clamp(24px,5vw,72px);font:400 clamp(22px,2.4vw,36px)/1.35 'Gochi Hand','Comic Sans MS',cursive}
.pz-slide h2{font:400 clamp(34px,4.6vw,68px)/1.05 'Gochi Hand',cursive;color:#FFE36E;margin:0 0 .5em;letter-spacing:0}
.pz-title{text-align:center}.pz-title h2{font-size:clamp(44px,6.4vw,96px)}
.pz-text{margin:0;color:#C9D1CB}
.pz-slide ul,.pz-slide ol{margin:0;padding-left:1.1em;display:grid;gap:.35em}
.pz-slide li::marker{color:#8FD3FF}
.pz-q{margin:.2em 0 0}
.pz-sol{margin-top:.7em!important;font-size:.82em;color:#D7DDD8}
.pz-ans{margin:.6em 0 0;color:#FFE36E}
.pz-slide table{border-collapse:collapse;font-size:.75em;margin-top:.3em}.pz-slide th,.pz-slide td{border:1px solid #3A4A42;padding:.25em .6em;text-align:left}
.pz-notes{max-width:1100px;justify-self:center;width:100%;padding:12px 16px;border-radius:12px;background:#16181C;border:1px solid #2A2D33;font-size:15px;line-height:1.5;color:#C9CBD0}
.pz-notes b{color:#F4F3EF;margin-right:6px}
.pz-bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font:500 14px 'Geist',system-ui,sans-serif;color:#A6A9B0}
.pz-bar span{min-width:120px;text-align:center}
.pz-bar button{height:36px;min-width:36px;padding:0 14px;border-radius:999px;border:1px solid #2A2D33;background:#16181C;color:#F4F3EF;font:500 14px 'Geist',system-ui,sans-serif;cursor:pointer}
.pz-bar button:hover{background:#1D2025}
.pz-bar button[aria-pressed="true"]{background:#F4F3EF;color:#111214}
.pz-bar [data-pz="prev"],.pz-bar [data-pz="next"]{font-size:20px;padding:0}
.pz-slide .qv{background:none!important;color:#8FD3FF!important;padding:0!important;border:0!important;box-shadow:none!important;font:inherit!important}
.pz-ans .qv{color:#FFE36E!important}

/* phone learn header: flat surface */
.m-hero{background:#16181C!important;border:1px solid #2A2D33;box-shadow:none!important}
.m-hero::before,.m-hero::after{display:none!important}
.m-hi{letter-spacing:-.03em!important}
.cl-due{color:var(--ink);font-weight:600}.cl-due.soon{color:#FDDB25}.cl-due.past{color:var(--ink2);text-decoration:line-through}
.gr-copy{display:grid;gap:6px;margin-top:12px;font-size:14px;color:var(--ink2)}.gr-copy select{max-width:520px}
.gr-how b{background:#1D2025!important;color:var(--ink)!important;border:1px solid #2A2D33}

/* gradebook */
.gr-bookbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.gb-wrap{overflow-x:auto;padding:0!important}
.gb{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
.gb th,.gb td{padding:10px 14px;border-bottom:1px solid #2A2D33;text-align:right;white-space:nowrap}
.gb thead th{font-weight:600;color:var(--ink2);vertical-align:bottom}
.gb thead th small,.gb tbody th small{display:block;font-weight:400;font-size:12px;color:var(--ink2)}
.gb th:first-child{text-align:left;position:sticky;left:0;background:#16181C}
.gb tbody th{font-weight:600}
.gb .gb-low{color:#FF9EC7}.gb .gb-na{color:#5C6068}.gb .gb-avg{font-weight:700}
.gb tfoot th,.gb tfoot td{color:var(--ink2);font-weight:600;border-bottom:0}
.gb tbody tr:hover td,.gb tbody tr:hover th{background:#1A1C21}
.toolview{margin-left:auto!important;margin-right:auto!important}
.hsec-h{justify-content:flex-start!important;gap:16px!important}.hsec-h .seg{margin-left:auto}.hsec-h .hguide{font-size:14px;color:var(--ink2)!important}
@media (max-width:640px){.gr-how{grid-template-columns:minmax(0,1fr)!important}.gr-how>div{padding:12px 14px!important}}

/* ===== Simpler structure: one next step on Home, tools grouped ===== */
.hnext{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:24px;align-items:center;width:100%;text-align:left;
  margin:16px 0 0;padding:20px 24px;border-radius:16px;background:#16181C;border:1px solid #2A2D33;color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.hnext:hover{border-color:#3A3E46;transform:translateY(-1px)}
.hnext .hn-k{grid-column:1;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FDDB25}
.hnext b{grid-column:1;font:700 22px/1.2 var(--head);letter-spacing:-.02em;margin-top:4px}
.hnext small{grid-column:1;color:var(--ink2);font-size:15px;margin-top:4px}
.hnext .btn{grid-column:2;grid-row:1 / span 3;pointer-events:none}
.hnext + .xdash .xd-empty{display:none!important}
@media (max-width:640px){.hnext{grid-template-columns:minmax(0,1fr)}.hnext .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px}}
.hmore{display:flex;flex-wrap:wrap;gap:10px}
.hm{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid #2A2D33;background:#16181C;color:var(--ink);font:500 15px var(--body,inherit);cursor:pointer}
.hm svg{width:18px;height:18px;flex:none}
.hm:hover{border-color:#3A3E46;background:#1D2025}
.hm-all{background:transparent;color:var(--ink2)}
.tg-head{grid-column:1/-1;margin:22px 0 2px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tg-head:first-child{margin-top:4px}
.tg-head h3{margin:0;font:700 20px var(--head);letter-spacing:-.02em}
.tg-head .sub{margin:0}

/* Students: five main tabs. Subjects opens from the class name in the top bar; Classes lives on Home. */
body:not([data-role="teach"]) .rail [data-tab="library"],body:not([data-role="teach"]) .rail [data-tab="classes"]{display:none!important}
body:not([data-role="teach"]) #streakChip{display:none!important}
#courseName{cursor:pointer}
#courseName:not(:empty)::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.7}
#courseName:hover{border-color:#3A3E46}

/* Teachers: Home, Create, Classes, Grade, Subjects */
body[data-tab="create"] [data-pane="classes"]{display:block}
body[data-role="teach"] .rail [data-tab="library"]{order:9}
body[data-role="teach"] .tabbar{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.rail button svg[viewBox]{width:18px;height:18px}
.th-q{padding:0 14px}
.th-q span{display:none}
.th-more{background:transparent!important;color:var(--ink2)!important}
.cr-start{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-color:#3A3E46!important}
.cr-start b{display:block;font:700 19px var(--head);margin-top:4px}
.cr-start .sub{margin:4px 0 0}

/* ===== Bento home (inspired by modern social-app layouts) ===== */
:root{--r-card:22px}
@media (min-width:900px){
  #homeBody{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px!important;max-width:1180px!important}
  #homeBody>*{grid-column:1/-1}
  #homeBody>.hhero{grid-column:1/9;margin:0!important}
  #homeBody>.hnext{grid-column:9/13;margin:0!important;grid-template-columns:minmax(0,1fr);align-content:space-between;row-gap:6px}
  #homeBody>.hnext .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}
  #homeBody>.hbig{display:contents}
  #homeBody .hb-board{grid-column:1/7;grid-row:span 2;min-height:440px!important}
  #homeBody .hb-live{grid-column:7/10}
  #homeBody .hb-prac{grid-column:10/13}
  #homeBody .hb-tutor{grid-column:7/13}
  #homeBody>.cl-home,#homeBody>.hsec{margin-top:16px}
}
/* the next step is the one yellow block on the page */
.hnext{background:#FDDB25!important;border-color:#FDDB25!important;color:#111214!important;border-radius:var(--r-card)!important;padding:24px!important}
.hnext .hn-k{color:#111214!important;opacity:.7}
.hnext b{font-size:26px!important;letter-spacing:-.03em!important;line-height:1.1!important}
.hnext small{color:#2B2A24!important}
.hnext .btn{background:#111214!important;color:#FDDB25!important;border-color:#111214!important}
.hnext:hover{transform:translateY(-2px)}
/* color blocks: pink and blue tiles, the board stays a chalkboard */
html[data-mode="night"] .hb-live{background:#FF9EC7!important;border-color:#FF9EC7!important}
html[data-mode="night"] .hb-prac{background:#7FB2FF!important;border-color:#7FB2FF!important}
.hb-live b,.hb-prac b{color:#111214!important}
.hb-live small,.hb-prac small{color:#2A2420!important}
.hb-live .hb-go,.hb-prac .hb-go{background:rgba(17,18,20,.12)!important;color:#111214!important}
html[data-mode="night"] .hb-board{background:#17201C!important;border-color:#26332D!important}
.hb{border-radius:var(--r-card)!important}
.hb b{font-size:22px!important;letter-spacing:-.025em}
.hb-board b{font-size:30px!important}
@media (min-width:900px){.hb-board .hb-art{background-size:90% auto!important;background-position:50% 38%!important}}
.hhero{border-radius:var(--r-card)!important;padding:28px!important}
.hhero .hh-q{font-size:clamp(30px,3.6vw,44px)!important;letter-spacing:-.035em!important}
.tcard,.cl-card,.panel,.xd,.tday,.sj-card,.hr{border-radius:18px!important}
.hm{height:48px}

/* Phone: floating pill tab bar */
@media (max-width:860px){
  .tabbar{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:auto!important;border-radius:26px!important;
    background:rgba(22,24,28,.94)!important;border:1px solid #2A2D33!important;box-shadow:0 18px 40px -16px rgba(0,0,0,.8)!important;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:6px!important;height:auto!important}
  .tabbar button{border-radius:20px!important;padding:8px 0!important}
  .tabbar button[aria-current="page"]{background:#F4F3EF!important;color:#111214!important}
  .tabbar button[aria-current="page"] svg{color:#111214!important}
  main,.main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important}
}
#homeBody>.xdash:empty,#homeBody>.xdash:not(:has(*:not(.xd-empty))):has(.xd-empty){display:none}
#homeBody:has(.hnext[data-k="upload"]) .hh-course{display:none!important}
.hb-board .hb-art::after{box-shadow:none!important}
@media (min-width:900px){
  #homeBody>.cl-home{grid-column:1/7}
  #homeBody>.hrec-sec{grid-column:7/13}
  #homeBody>.cl-home .cl-grid,#homeBody>.hrec-sec .hrecent{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #homeBody>.cl-home:last-of-type{grid-column:1/-1}
}
.hrec-sec,#homeBody>.cl-home{display:grid;align-content:start;gap:14px}
.hrec-sec>h3,#homeBody>.cl-home .hsec-h{margin:0!important;min-height:34px;display:flex;align-items:center}

/* Teacher home: quick actions as color tiles */
.th-hero{border-radius:var(--r-card)!important;align-items:start!important}
.th-quick{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important;margin-top:22px!important}
.th-q{position:relative;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;min-height:96px;padding:14px 16px!important;border-radius:18px!important;border:0!important;
  font:700 17px/1.15 var(--head)!important;letter-spacing:-.015em;text-align:left;color:#111214!important;transition:transform .15s}
.th-q:hover{transform:translateY(-2px)}
.th-q::after{content:"→";position:absolute;top:12px;right:14px;font:600 16px var(--body);opacity:.7}
.th-q:nth-child(1){background:#FDDB25!important}
.th-q:nth-child(2){background:#FF9EC7!important}
.th-q:nth-child(3){background:#7FB2FF!important}
.th-q:nth-child(4){background:#1D2025!important;color:var(--ink)!important;border:1px solid #2A2D33!important}
.th-q.th-more{grid-column:1/-1;min-height:0;padding:4px 0!important;background:none!important;border:0!important;color:var(--ink2)!important;font:500 14px var(--body)!important}
.th-q.th-more::after{display:none}
.th-stats div{border-radius:16px!important}
.th-stats .hot{background:#1D2025!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px #FDDB25}
.th-stats .hot b{color:#FDDB25}.th-stats .hot small{color:var(--ink2)!important}
@media (max-width:640px){.th-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.th-q{min-height:76px}}

/* Sign-up: pick an account type (student or teacher) */
.acct-type{border:0;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acct-type legend{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:6px;padding:0}
.acct-type .at{position:relative;display:block;cursor:pointer}
.acct-type .at input{position:absolute;opacity:0;width:1px;height:1px}
.acct-type .at>span{display:grid;gap:3px;height:100%;padding:12px 12px 13px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);transition:border-color .15s,background .15s}
.acct-type .at b{font-size:15px}.acct-type .at small{font-size:12.5px;line-height:1.35;color:var(--ink2)}
.acct-type .at input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.acct-type .at input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.acct-type[hidden]{display:none}
@media (max-width:420px){.acct-type{grid-template-columns:1fr}}

/* Grading: scan with camera */
.gr-scanrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.gr-scanrow .btn svg{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
body.gs-open{overflow:hidden}
.gscan{position:fixed;inset:0;z-index:200;background:#0B0C0F;color:#F4F3EF;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto;gap:12px;width:100%;box-sizing:border-box;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));max-width:720px;margin:0 auto}
.gs-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.gs-top b{display:block;font-size:17px}.gs-top .kicker{color:#FF9EC7}
.gs-x{width:40px;height:40px;border-radius:50%;border:1px solid #2C3038;background:#15171C;color:#F4F3EF;font-size:24px;line-height:1;cursor:pointer}
.gs-view{position:relative;min-height:0;border-radius:20px;border:1px dashed #3A3E47;background:#121318;display:grid;place-items:center;overflow:hidden}
.gs-view img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.gs-empty{display:grid;gap:6px;text-align:center;padding:24px;max-width:30ch}.gs-empty b{font-size:18px}.gs-empty span{color:#A9ADB6;font-size:14px}
.gs-tray{display:flex;gap:8px;overflow-x:auto;min-height:78px;padding-bottom:2px}.gs-tray:empty{display:none}
.gs-th{position:relative;flex:none;width:58px;height:74px;border-radius:10px;overflow:hidden;border:2px solid #2C3038;padding:0;background:#fff;cursor:pointer}
.gs-th img{width:100%;height:100%;object-fit:cover}.gs-th span{position:absolute;left:4px;bottom:4px;background:#111214;color:#fff;font:700 11px/1 system-ui;padding:3px 5px;border-radius:6px}
.gs-th.sure{border-color:#FF6B6B}.gs-th.sure::after{content:"Remove?";position:absolute;inset:0;display:grid;place-items:center;background:rgba(17,18,20,.8);color:#FF9EC7;font:700 11px system-ui}
.gs-info{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:15px}.gs-info span{color:#A9ADB6}
.gs-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.gs-bar .btn{width:100%}
.gs-shutter{position:relative;width:78px;height:78px;border-radius:50%;border:4px solid #F4F3EF;display:grid;place-items:center;cursor:pointer}
.gs-shutter input{position:absolute;inset:0;opacity:0;cursor:pointer}.gs-shutter i{width:60px;height:60px;border-radius:50%;background:#F4F3EF;transition:transform .12s}
.gs-shutter:active i{transform:scale(.88)}.gs-shutter:focus-within{outline:3px solid #FDDB25;outline-offset:3px}
.gs-clean{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;color:#A9ADB6}
/* Grading review: how each rubric line matched */
.gr-match li{align-items:flex-start}
.gr-match .gm-v{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:800 13px/1 system-ui;margin-top:1px}
.gr-match .gm-ok .gm-v{background:#2FBF71;color:#06120B}.gr-match .gm-part .gm-v{background:#FDDB25;color:#111214}.gr-match .gm-no .gm-v{background:#FF6B6B;color:#1A0606}
.gr-match .gr-ctx{flex:1;min-width:0}.gm-why{display:block;margin-top:3px;color:var(--ink2);font-size:12.5px;line-height:1.35;font-style:italic}
.gs-view.flash{animation:gsflash .45s ease-out}@keyframes gsflash{0%{background:#fff}100%{background:#121318}}
/* Grading on phones: rubric rows fit the screen */
.gr-q,.gr-q input{min-width:0;max-width:100%}.gr-q .gr-qa{width:100%;box-sizing:border-box}
@media (max-width:640px){.gr-qh{flex-wrap:wrap}.gr-qh input.gr-qt{flex:1 1 100%;order:3}.gr-crit li{flex-wrap:wrap}.gr-crit input.gr-ct{flex:1 1 100%}.gr-match .gr-ctx{flex:1 1 calc(100% - 34px)}}
/* grading how-to video */
.gr-vid{padding:0!important;overflow:hidden}
.gr-vid summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 16px}
.gr-vid summary::-webkit-details-marker{display:none}
.gr-vid summary b::before{content:"▶";display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--brand,#FDDB25);color:#111;font-size:11px;vertical-align:middle}
.gr-vid[open] summary{border-bottom:1px solid var(--line)}
.gr-vid video{display:block;width:100%;max-height:70vh;background:#000;aspect-ratio:16/10}
.gr-read{margin:8px 0 6px;padding:8px 10px;border-radius:10px;background:var(--surface2);font-size:13px;line-height:1.45}
.gr-read p{margin:2px 0 0;color:var(--ink2)}.gr-read .gr-final{color:var(--ink)}
.gr-learn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface2)}