/* SkillSeed platform additions. Uses the colour tokens defined in app.css, so light/dark themes and RTL work the same way. */
:root{--subj:#3f7fd6;--pred:#d9861c;--hlbg:color-mix(in srgb,var(--gold) 38%,transparent)}
.skiplink{position:absolute;inset-inline-start:8px;top:-60px;background:var(--accent);color:var(--card);padding:8px 14px;border-radius:10px;z-index:50}
.skiplink:focus{top:8px}
main:focus{outline:none}
a:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.qwrap[dir="rtl"]{text-align:right}
.qwrap[dir="rtl"] .opt,.qwrap[dir="rtl"] .mitem{text-align:right}
.qwrap[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--body)}
.qwrap[lang="ar"] .stem{font-size:21px;line-height:1.8}
.qwrap[lang="ar"] .quote,.qwrap[lang="ar"] .passage{line-height:2;font-size:20px}
.qwrap[lang="ar"] .opt{font-size:19px;line-height:1.7}
.qmedia{display:block;max-width:min(420px,100%);max-height:280px;border-radius:12px;margin:10px 0;border:1px solid var(--line)}
.stack2{display:flex;flex-direction:column;gap:16px}
.stack2>.card{margin:0}
.subh{font-family:var(--display);font-size:16px;margin:16px 0 8px}
h4.subh{font-size:15px}
.grow{flex:1}
textarea.plain{font-family:var(--body);font-size:15px;min-height:0}
.text.num{width:80px;display:inline-block}
.radio{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--card);font-weight:500;cursor:pointer}
.switch{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--accent)}
.pickstud{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:220px;overflow:auto;padding:6px;border:1px dashed var(--line);border-radius:12px}

/* toast + modal layer */
.toastbox{position:fixed;inset-inline:0;bottom:20px;margin:auto;width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--card);padding:12px 18px;border-radius:14px;font-weight:600;box-shadow:0 10px 30px var(--shadow);transform:translateY(120px);opacity:0;transition:transform .25s,opacity .25s;z-index:60;pointer-events:none}
.toastbox.show{transform:none;opacity:1}
.celebrate{position:fixed;inset:0;background:rgba(10,18,36,.55);display:grid;place-items:center;z-index:55;padding:16px}
.celebrate[hidden]{display:none}
.celecard{position:relative;overflow:hidden;background:var(--card);border-radius:22px;padding:28px 24px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .4s ease-out both}
.celecard h2{margin-top:10px}
.sharecard{text-align:start;max-width:520px}
.sharecard input{margin-bottom:6px}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-12px;inset-inline-start:var(--x);width:8px;height:14px;background:var(--c);border-radius:2px;animation:fall 1.6s cubic-bezier(.2,.6,.4,1) calc(var(--i)*40ms) both}
@keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}

/* badges */
.badgeart{--sz:72px;display:inline-grid;place-items:center;width:var(--sz);height:var(--sz);border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8 0 18%,transparent 19%),linear-gradient(145deg,var(--b1),var(--b2));box-shadow:inset 0 -4px 0 #0002,0 4px 10px var(--shadow);border:3px solid #fff;position:relative;flex:none}
.badgeart span{font-size:calc(var(--sz)*.46);line-height:1;filter:drop-shadow(0 2px 2px #0003)}
.badgeart.off{filter:grayscale(1) opacity(.45)}
.badgegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
.badgecard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.badgecard.earned{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));background:linear-gradient(180deg,var(--gold-soft),var(--card) 60%)}
.badgecard .how{font-size:13px;color:var(--muted);margin:0}
.badgestrip{display:flex;flex-wrap:wrap;gap:10px}
.bmini{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;max-width:84px;text-align:center}
.badgeset{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.bset{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:8px}

/* feedback and visual explanations */
.feedback.retry{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.feedback.ok{border:1px solid color-mix(in srgb,var(--good) 25%,transparent)}
.vx{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.vxlbl{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.vxtext{margin:0;font-size:17px;line-height:1.8}
.vxword{margin:0;font-size:30px;font-weight:700;letter-spacing:.02em;font-family:var(--display)}
mark.hl{background:var(--hlbg);color:inherit;border-radius:6px;padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:hlin .7s ease-out both}
mark.hl.subj{background:color-mix(in srgb,var(--subj) 22%,transparent);outline:2px solid color-mix(in srgb,var(--subj) 50%,transparent)}
mark.hl.pred{background:color-mix(in srgb,var(--pred) 22%,transparent);outline:2px solid color-mix(in srgb,var(--pred) 50%,transparent)}
mark.hl.p{background:none;color:var(--s);text-decoration:underline 3px;text-underline-offset:6px}
@keyframes hlin{from{background-size:0 100%;opacity:.3}to{opacity:1}}
.vxbuild{margin:0;font-size:19px;display:flex;flex-wrap:wrap;gap:6px}
.vxbuild span{display:inline-block;background:var(--good-soft);border-radius:8px;padding:4px 10px;animation:wordin .35s ease-out calc(var(--i)*180ms) both}
@keyframes wordin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* practice header, teach card, share */
.skillhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px}
.sharebtn{display:inline-flex;align-items:center;gap:6px;font-size:15px;padding:8px 14px;margin-top:8px}
.sharemini{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--accent);flex:none;vertical-align:middle}
.sharemini:hover{border-color:var(--accent);background:var(--accent-soft)}
.tilewrap{display:flex;gap:6px;align-items:stretch}
.tilewrap .tile{flex:1;min-width:0}
.tilewrap .sharemini{height:auto;min-height:32px}
th.rot .sharemini{width:24px;height:24px;margin-inline-start:4px}
th.rot .sharemini svg{width:14px;height:14px}
details.teach{margin-top:12px;background:var(--accent-soft);border-radius:12px;padding:10px 14px}
details.teach summary{cursor:pointer;font-weight:700;color:var(--accent)}
.teachbody{white-space:pre-line;margin-top:8px;line-height:1.8}
.teach .obj{margin:8px 0 0}

/* student home */
.subjgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.subjcard{display:flex;flex-direction:column;gap:4px;text-align:start;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--sc);border-radius:16px;padding:14px}
.subjcard:hover{border-color:var(--sc)}
.subjname{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.subjcard .bar span{background:var(--sc)}
.goalbar{height:14px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:6px}
.goalbar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-green),var(--gold));transition:width .6s}
.goalpick summary{list-style:none;cursor:pointer}
.goalpick summary::-webkit-details-marker{display:none}
.goalpick[open] .secs{margin-top:6px}
.booktabs button[aria-pressed="true"]{background:var(--sc,var(--accent));border-color:var(--sc,var(--accent))}
.bookhead{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;margin:4px 0 0}
.srcnote{max-width:520px}
.unittitle{margin:6px 0 0;font-size:18px}
.kpis.sm b{font-size:22px}

/* leaderboard */
.lblist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.lblist li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--card)}
.lblist li.me{border-color:var(--accent);background:var(--accent-soft)}
.lblist .pos{font-family:var(--display);font-weight:800;font-size:18px;color:var(--muted);text-align:center}
.lblist li:nth-child(-n+3) .pos{color:var(--gold)}
.lblist b{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}

/* charts */
.spark{display:flex;align-items:flex-end;gap:6px;height:90px;padding:4px 0 18px;border-bottom:1px solid var(--line)}
.spark.big{height:150px}
.spark span{flex:1;background:linear-gradient(180deg,var(--brand-blue),var(--accent));border-radius:6px 6px 0 0;min-height:2px;position:relative}
.spark i{position:absolute;top:-18px;inset-inline:0;text-align:center;font-style:normal;font-size:11px;color:var(--muted)}
.spark em{position:absolute;bottom:-18px;inset-inline:-6px;text-align:center;font-style:normal;font-size:10px;color:var(--muted);white-space:nowrap}
.tips{margin:6px 0 0;padding-inline-start:20px;display:grid;gap:6px}

/* teacher insights */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-top:5px solid var(--muted)}
.group.g-s{border-top-color:var(--bad)}.group.g-o{border-top-color:var(--gold)}.group.g-c{border-top-color:var(--good)}
.group h4{margin:0 0 6px;font-size:14px}

/* admin */
.pill.st-draft{background:var(--soft);color:var(--muted)}.pill.st-review{background:var(--gold-soft);color:var(--ink)}.pill.st-published{background:var(--good-soft);color:var(--good)}.pill.st-archived{background:var(--bad-soft);color:var(--bad)}
.cunit{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:10px;background:var(--paper)}
.clesson{margin:8px 0 0;padding-inline-start:14px;border-inline-start:3px solid var(--line)}
.crow{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:4px 0}
.cskill{padding-inline-start:14px;font-size:14px}
.qlist{padding-inline-start:22px;display:grid;gap:8px}
.qlist li{border-bottom:1px solid var(--line);padding-bottom:8px}
.qlist li>div:first-child{display:inline}
.qlist .recact{margin-top:4px}
.assignform .wide p.note{margin:4px 0 0}

/* help */
.helpsearch{max-width:520px;margin:12px 0}
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
.guides .card{margin:0}
.steps{margin:8px 0 0;padding-inline-start:22px;display:grid;gap:6px}
.faq{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:6px 0 0;color:var(--muted)}
.onboard{border:2px solid var(--brand-green);background:linear-gradient(180deg,color-mix(in srgb,var(--brand-green) 10%,var(--card)),var(--card));margin-top:16px}

@media (max-width:640px){
  .tsub{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .tsub button{white-space:nowrap}
  .mainnav{overflow-x:auto;max-width:100%}
  .mainnav button{white-space:nowrap;padding:8px 10px}
  .vxword{font-size:24px}
  .celecard{padding:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  .confetti,.celecard{animation:none!important}
  .confetti{display:none}
  mark.hl,.vxbuild span{animation:none!important}
  .toastbox,.goalbar span{transition:none}
}
/* the school can switch animations off in Admin → Settings */
.noanim *,.noanim *::before,.noanim *::after{animation:none!important;transition:none!important}
.noanim .confetti{display:none}
@media print{.toastbox,.celebrate,.onboard{display:none!important}}
.speak.slow{border-style:dashed;font-size:15px;padding:8px 14px}
/* accounts */
.avatar{width:var(--av);height:var(--av);border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;vertical-align:middle;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.avatar.ph{background:linear-gradient(145deg,var(--brand-blue),var(--accent));color:#fff;font-family:var(--display);font-weight:800;font-size:calc(var(--av)*.38)}
.whobtn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:inherit;padding:2px 6px;border-radius:999px;font-size:13px}
.whobtn:hover{background:var(--soft)}
.kidname{display:flex;align-items:center;gap:8px}
.profhead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.profhead h3{font-size:22px}
.orline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0 10px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.googlebtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);color:var(--ink);border:1px solid var(--line)}
.googlebtn:hover:not(:disabled){border-color:var(--accent);filter:none}
label.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
@media (max-width:640px){.whobtn span{display:none}}
.passage-toggle{margin-top:14px}.passage-toggle summary{cursor:pointer;color:var(--accent,#2563eb);font-weight:600;font-size:15px}.passage-toggle .passage{margin-top:8px}
audio.qmedia{display:block;width:100%;max-width:420px;margin:12px 0}
/* ---------- power-ups and streaks ---------- */
.pubar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.streak{font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:14px}
.streak.hot{background:var(--gold-soft);color:var(--ink)}
.pubtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:14px;cursor:pointer;min-height:36px}
.pubtn:not([disabled]):hover{border-color:var(--accent)}
.pubtn[disabled]{opacity:.5;cursor:default}
.pustat{font-size:14px;color:var(--muted);padding:4px 6px}
.puhow{margin:4px 0 6px;font-size:14px}.puhow summary{cursor:pointer;color:var(--accent);font-weight:600}
.pupop{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:60;background:var(--card);border:2px solid var(--gold);border-radius:16px;padding:10px 18px;box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;align-items:center;gap:8px;transition:opacity .25s,transform .25s}
.pupop.show{opacity:1;transform:translate(-50%,0)}
.pupop.show .puicon{display:inline-block;font-size:26px;animation:pupulse .6s ease-out 2}
.pupop.still .puicon,.noanim .pupop .puicon{animation:none}
@keyframes pupulse{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.pupop,.pupop .puicon{transition:none;animation:none}}
/* ---------- read aloud: words in passages ---------- */
.readtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.passage{touch-action:manipulation}
.rw{border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}
.rw[tabindex]{outline-offset:1px;text-decoration:underline dotted var(--muted)}
.rw.said{background:var(--gold-soft);box-shadow:0 0 0 2px var(--gold-soft)}
/* ---------- friendly Arabic feedback ---------- */
.arfb p{margin:6px 0}.arfb .archat{color:var(--muted)}.arfb .arformal{font-weight:500}
/* ---------- spelling word list ---------- */
.wordpanel summary{cursor:pointer}.wordchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wchip{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px;background:var(--card)}
.wchip.ok{background:var(--good-soft);border-color:var(--good);color:var(--ink)}
/* ---------- what will I learn ---------- */
.teach .objtext{font-weight:600}
/* ---------- analytics (colors: one blue for series; an ordered blue ramp for levels/states; gray = none) ---------- */
.anviz,.anbody,.anhead{--an-line:#2a78d6;--an-1:#86b6ef;--an-2:#2a78d6;--an-3:#104281;--an-0:#c9c8c2;--an-grid:#e3e7ee;--an-text:var(--muted)}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])) .anbody{--an-line:#3987e5;--an-1:#9ec5f4;--an-2:#5598e7;--an-3:#256abf;--an-0:#55554f;--an-grid:#2b3650}}
:root[data-theme="dark"] .anbody{--an-line:#3987e5;--an-1:#9ec5f4;--an-2:#5598e7;--an-3:#256abf;--an-0:#55554f;--an-grid:#2b3650}
.anfilters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:10px 0}
.anf{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);min-width:120px;flex:1 1 140px;max-width:230px}
.anf select{width:100%}
.anhead .tabs2{flex-wrap:wrap}
.viz{margin:0 0 14px}.viz figcaption{font-weight:700;margin-bottom:6px}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz .grid{stroke:var(--an-grid);stroke-width:1}.viz .ax{fill:var(--an-text);font-size:11px}
.viz .line{fill:none;stroke:var(--an-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .dot{fill:var(--an-line);stroke:var(--card);stroke-width:2}.viz .hitarea{fill:transparent}.viz .hit:hover .dot{r:6}
.hbars{display:flex;flex-direction:column;gap:6px}
.hbar{display:grid;grid-template-columns:minmax(70px,30%) 1fr auto;gap:8px;align-items:center;font-size:13px}
.hbar .hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .track{height:14px;background:var(--soft);border-radius:4px;overflow:hidden}
.hbar .fill{display:block;height:100%;background:var(--an-2);border-radius:0 4px 4px 0}
.hbar .fill.lv-easy{background:var(--an-1)}.hbar .fill.lv-medium{background:var(--an-2)}.hbar .fill.lv-hard{background:var(--an-3)}
.hbar .hv{font-variant-numeric:tabular-nums;white-space:nowrap}
.stack{display:flex;gap:2px;height:22px;border-radius:4px;overflow:hidden;background:var(--card)}
.seg{display:block;min-width:3px}.seg.st0,.sw.st0{background:var(--an-0)}.seg.st1,.sw.st1{background:var(--an-1)}.seg.st2,.sw.st2{background:var(--an-2)}.seg.st3,.sw.st3{background:var(--an-3)}
.legend{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.antable{margin-top:6px;font-size:13px}.antable summary{cursor:pointer;color:var(--accent)}
.kpis .note{display:block;font-size:12px}
.badgecat{margin:18px 0 8px;font-size:17px}
.gsibtn{display:flex;justify-content:center;min-height:44px;margin:4px 0}

/* ===== Class Activity (teacher board on the projector) ===== */
.ca-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 6px}
.ca-title{font-family:var(--display);font-weight:800;font-size:20px}
.ca-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ca-tabs{flex-wrap:wrap;margin:6px 0 12px}
.ca-body{display:flex;flex-direction:column;gap:14px}
.ca-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ca-big{font-size:20px;padding:14px 26px}
.ca-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:12px 0}
.ca-stu{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px 8px;cursor:pointer;color:var(--ink);font:inherit;text-align:center;transition:transform .12s,border-color .12s}
.ca-stu:hover{transform:translateY(-2px);border-color:var(--accent)}
.ca-stu b{font-size:15px;line-height:1.25;word-break:break-word}
.ca-stu.absent{opacity:.45;border-style:dashed}
.ca-dev{position:absolute;top:6px;inset-inline-end:8px;font-size:14px}
.ca-pts{display:inline-block;min-width:2.2em;padding:2px 10px;border-radius:99px;background:var(--gold-soft);color:var(--ink);font-family:var(--display);font-weight:900;font-size:18px;text-align:center}
.ca-pts.big{font-size:22px}
.ca-picked{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;padding:6px 0}
.ca-picked.sm{justify-content:flex-start;gap:12px}
.ca-bigname{font-family:var(--display);font-weight:900;font-size:clamp(26px,5vw,52px);line-height:1.1;min-height:1.1em}
.ca-q .stem{font-size:clamp(18px,2.4vw,28px)}
.ca-q .opt,.ca-q .fixw,.ca-q .tilew,.ca-q .mitem{font-size:clamp(16px,2vw,24px)}
.ca-qtimer{float:inline-end;font-family:var(--display);font-size:22px;font-weight:900;background:var(--gold-soft);border-radius:12px;padding:4px 12px}
.ca-count{font-family:var(--display);font-weight:900;font-size:clamp(22px,3vw,36px);text-align:center;margin:12px 0}
.ca-fb{font-size:18px}
.ca-undo{min-height:0}
.ca-undo:not(:empty){display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:var(--card);border-radius:12px;padding:8px 14px;font-weight:600}
.ca-undo .mini{background:var(--card);color:var(--ink)}
.ca-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ca-group{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px}
.ca-group h3{margin:0 0 8px;font-family:var(--display)}
.ca-members{display:flex;flex-wrap:wrap;gap:8px}
.ca-mem{display:inline-flex;align-items:center;gap:6px;background:var(--paper,transparent);border:1px solid var(--line);border-radius:99px;padding:2px 10px 2px 2px;font-weight:600}
.ca-gpts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.ca-teams{display:flex;flex-wrap:wrap;gap:10px}
.ca-team{flex:1 1 140px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 14px;font-size:18px}
.ca-team.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.ca-win{text-align:center}.ca-win h2{font-size:clamp(28px,4vw,48px)}
.ca-win .ca-members{justify-content:center}
.ca-timer{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}
.ca-clock{font-family:var(--display);font-weight:900;font-size:clamp(72px,16vw,200px);line-height:1;font-variant-numeric:tabular-nums;direction:ltr}
.ca-clock.done{color:var(--bad,#c0392b)}
.ca.ca-full,.ca:fullscreen{background:var(--paper,var(--bg,#fff));padding:16px 24px;overflow:auto}
.ca.ca-full .ca-clock{font-size:clamp(120px,28vw,360px)}
.ca-modal{position:fixed;inset:0;background:rgba(10,18,40,.55);display:grid;place-items:center;padding:16px;z-index:55}
.ca-modal>.card{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;margin:0}
.ca-pointpad{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.ca-pointpad .flabel{min-width:80px}
.ca-pbtn{min-width:48px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:17px;cursor:pointer}
.ca-pbtn.plus.sel{background:var(--brand-green,#4c9a36);border-color:var(--brand-green,#4c9a36);color:#fff}
.ca-pbtn.minus.sel{background:#c0392b;border-color:#c0392b;color:#fff}
.ca-hist li{gap:8px;flex-wrap:wrap}.ca-hist input{max-width:220px}
.ca-stars{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ca-stars li{display:flex;align-items:center;gap:10px;font-size:18px}
.ca-stars li b{flex:1}
.ca-stars.sm li{font-size:15px}
.ca-confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.ca-confetti i{position:absolute;top:-20px;left:var(--x);width:10px;height:16px;background:var(--c);border-radius:3px;animation:cafall 1.9s var(--d) ease-in forwards}
@keyframes cafall{to{transform:translateY(110vh) rotate(540deg)}}
.badtxt{color:#c0392b}
.st-live .card{width:min(620px,100%)}
@media (max-width:600px){.ca-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.ca-big{font-size:17px;padding:12px 18px}.ca-pointpad .flabel{min-width:100%}}
@media (prefers-reduced-motion:reduce){.ca-stu{transition:none}}
.ca-hist b[dir],.ca-pbtn,.ca-pts,.ca-gpts .mini{unicode-bidi:isolate}
.ca-body .plainlist li>span:last-child{display:inline-flex;gap:10px;align-items:center}

/* ===== Class Activity 2: avatars, spotlight, ticks, seating, roles ===== */
.avimg{width:var(--av);height:var(--av);object-fit:contain;flex:none;display:inline-block;vertical-align:middle}
.avatar.avph{background:color-mix(in srgb,var(--muted) 22%,var(--card));color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.ca-stu .avimg,.ca-stu .avph{margin-top:2px}
.ca-spot{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,4vw,48px);padding:14px 0;min-height:220px;align-items:center}
.ca-spot.empty .ca-dice{font-size:96px;line-height:1;opacity:.5}
.ca-spotone{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:min(420px,100%)}
.ca-spotone .avimg,.ca-spotone .avph{--av:min(150px,30vw)!important;width:var(--av);height:var(--av)}
.ca-spot.n1 .ca-spotone .avimg,.ca-spot.n1 .ca-spotone .avph{--av:min(220px,46vw)!important}
.ca-spotone.spin{opacity:.75;filter:saturate(.6)}
.ca-spotone.pop{animation:capop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes capop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.ca-spotmeta{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.ca-quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.ca-quick .ca-pbtn{min-width:44px;padding:8px 10px;font-size:16px}
.ca-pbtn.plus{border-color:color-mix(in srgb,var(--brand-green,#4c9a36) 55%,var(--line))}
.ca-pbtn.minus{border-color:color-mix(in srgb,#c0392b 45%,var(--line))}
.ca-reasons,.ca-orderbar{justify-content:center}
.ca-orderbar .grow{flex:1}
.ca-stu.ticked{border-color:color-mix(in srgb,var(--brand-green,#4c9a36) 60%,var(--line))}
.ca-tick{position:absolute;top:6px;inset-inline-start:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand-green,#4c9a36);color:#fff;font-weight:900;font-size:14px}
.ca-roles{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.chip.role{font-size:12px;padding:1px 8px;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--ink)}
.ca-grid.arranging .ca-stu{cursor:grab;touch-action:none;user-select:none}
.ca-stu.dragging{opacity:.5;cursor:grabbing}
.ca-stu.dropon{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.seatmoves{display:flex;gap:6px}.seatmoves .mini{min-width:36px}
.ca-gmembers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ca-gmembers li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ca-gmembers .nm{font-weight:700;flex:1;min-width:90px}
.ca-gmembers .rolesel{max-width:170px}
.ca-rolelist li{gap:10px;flex-wrap:wrap}
.ca-editroles{margin-top:12px}
.ca-skillbar select{max-width:min(460px,100%)}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:12px 0}
.avopt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.avopt img{width:88px;height:88px;object-fit:contain}
.avopt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.avopt.locked{cursor:not-allowed}.avopt.locked img{filter:grayscale(1);opacity:.4}
.av-modal .card{width:min(680px,100%)}
@media (max-width:600px){.ca-spot{min-height:160px}.avgrid{grid-template-columns:repeat(3,1fr)}.avopt img{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.ca-spotone.pop{animation:none}}
.ca-gpts .note{flex-basis:100%}.ca-gpts .mini{min-width:38px}.ca-gmembers .rolesel{margin-inline-start:auto}
.ca-quick{flex-direction:column;align-items:center}.ca-quick>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ca-reasons select,.ca-row select.text.sm{width:auto;max-width:min(260px,100%)}.ca-skillbar select.text.sm{max-width:min(460px,100%)}