:root{
  /* palette: white and neutral light-gray surfaces; one green family (hue 140) for actions, leaf green for correct answers (matches the check-mark emoji), the logo's golden yellow */
  --bg:#f5f5f5; --card:#fff; --panel:#f5f5f5; --ink:#1a1a1a; --muted:#5c5c5c; --faint:#a3a3a3; --line:#e5e5e5; --line-strong:#d4d4d4; --dark:#1f1f1f; --dark-2:#333;
  --accent:#16863b; --accent-ink:#fff; --accent-dark:#10652d; --accent-soft:#def2e1;
  --ok:#508b23; --ok-soft:#edf6e2; --ok-text:#386317;
  --gold:#ffc94a; --gold-strong:#f0b428; --gold-soft:#fff5d9; --gold-text:#8f5a00; --gold-line:#f6d78e;
  --clay-soft:#fcecdf; --clay-text:#92420c; --clay-line:#eec7a0;
  --bad:#e5484d; --bad-soft:#fdecea; --bad-text:#a3201f;
  --info-soft:#e7f1fb; --info-text:#1d5f9a; --silver-soft:#eeeeee;
  --c0:#16863b; --c1:#e8604c; --c2:#7b61e8; --c3:#f0b428; --c4:#2f8fd1; --c5:#b450c8; --c6:#737373; --c7:#e0679f;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}
.hidden{display:none!important}

/* ---------------- student ---------------- */
.play{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.play header{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--muted);font-size:14px}
.play header .brand{color:var(--ink);letter-spacing:.02em;display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800}
.play main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px;max-width:560px;width:100%;margin:0 auto}
.play h1{font-size:26px;line-height:1.25;margin:0 0 20px}
.play .sub{color:var(--muted);margin:-10px 0 20px}
.field{width:100%;padding:16px;font-size:20px;border:2px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);outline:none}
.field:focus{border-color:var(--accent)}
.field.code{text-align:center;font-size:32px;letter-spacing:.2em;font-weight:700}
.btn{display:block;width:100%;padding:16px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-size:18px;font-weight:700;margin-top:12px}
.btn:hover:not(:disabled){background:var(--accent-dark)}
.btn.ghost:hover:not(:disabled){background:var(--accent-soft)}
.btn:disabled{opacity:.5}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.err{color:var(--bad);margin-top:12px;min-height:1.2em}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border:2px solid var(--line);border-radius:var(--radius);background:#fff;font-size:18px;color:var(--ink);transition:transform .08s}
.opt:active{transform:scale(.98)}
.opt .let{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrongsel{border-color:var(--bad);background:var(--bad-soft)}
.scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:8px}
.scale button{padding:16px 0;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:20px;font-weight:700;color:var(--ink)}
.scale-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-top:8px;gap:12px}
.center{text-align:center}
.big-emoji{font-size:64px;line-height:1;margin-bottom:10px}
.status{font-size:24px;font-weight:700;margin:0 0 8px}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:14px}
.result{border-radius:var(--radius);padding:24px;color:#fff;text-align:center}
.result.ok{background:var(--ok)} .result.no{background:var(--bad)} .result.none{background:var(--muted)}
.result h2{margin:0 0 6px;font-size:30px}
.scorebox{margin-top:16px;background:#fff;border-radius:var(--radius);padding:16px;display:flex;justify-content:space-around;text-align:center}
.scorebox b{display:block;font-size:26px}
.expl{margin-top:16px;background:#fff;border-left:4px solid var(--accent);border-radius:10px;padding:14px 16px;line-height:1.45}
.timer{font-variant-numeric:tabular-nums;font-weight:800;color:var(--accent)}
.timer.low{color:var(--bad)}
.qimg{max-width:100%;max-height:220px;border-radius:12px;margin:0 0 16px;display:block}
.sent-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sent-list li{background:var(--accent-soft);color:var(--accent-dark);padding:6px 12px;border-radius:999px;font-weight:600}
.net{position:fixed;left:0;right:0;bottom:0;background:var(--dark);color:#fff;text-align:center;padding:8px;font-size:14px}

/* ---------------- presenter ---------------- */
.pres{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.pres .top{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;font-size:18px;color:var(--muted)}
.pres .top .join b{color:var(--ink);font-size:22px}
.pres .top .join .c{color:var(--accent);letter-spacing:.06em}
.pres .top .stats{display:flex;gap:22px;align-items:center}
.pres .top .stats span b{color:var(--ink)}
.stage{flex:1;display:flex;flex-direction:column;padding:10px 6vw 90px;min-height:0}
.stage h1{font-size:clamp(28px,4vw,56px);line-height:1.15;margin:2vh 0 3vh;font-weight:800}
.stage .qn{color:var(--muted);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.08em}
.bars{flex:1;display:flex;align-items:flex-end;gap:3vw;min-height:0;padding-bottom:8px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.bar .track{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.bar .val{text-align:center;font-weight:800;font-size:clamp(18px,2.2vw,34px);margin-bottom:6px}
.bar .fill{border-radius:10px 10px 0 0;min-height:6px;transition:height .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.bar .lab{border-top:3px solid var(--ink);padding-top:10px;text-align:center;font-size:clamp(14px,1.6vw,24px);font-weight:600;line-height:1.2;min-height:3.2em;word-break:break-word}
.bar .lab .let{display:inline-block;width:1.5em;height:1.5em;line-height:1.5em;border-radius:6px;color:#fff;font-weight:800;margin-right:6px;font-size:.85em}
.bar.dim .fill{opacity:.25} .bar.dim .lab{opacity:.45}
.bar.win .lab{color:var(--ok)}
.bar.win .lab::after{content:" ✓";font-weight:900}
.hidden-note{color:var(--muted);font-size:20px;text-align:center;margin-top:10px}
.cloud{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.3em 1em;padding:2vh 0;overflow:hidden}
.cloud span{font-weight:800;line-height:1.1;transition:font-size .5s}
.cards{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;overflow:auto;align-content:start}
.cards div{background:var(--panel);border-radius:12px;padding:16px 18px;font-size:20px;line-height:1.35;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.avg{font-size:clamp(40px,6vw,90px);font-weight:900;color:var(--accent);line-height:1}
.avg small{font-size:.3em;color:var(--muted);font-weight:700;display:block;margin-top:6px}
.scale-wrap{flex:1;display:flex;gap:4vw;align-items:stretch;min-height:0}
.scale-wrap .bars{flex:1}
.slide-body{font-size:clamp(20px,2.4vw,36px);line-height:1.45;white-space:pre-wrap;color:var(--ink)}
.lobby{flex:1;display:flex;align-items:center;justify-content:center;gap:6vw}
.lobby .how{font-size:clamp(22px,2.6vw,40px);line-height:1.4}
.lobby .how .url{color:var(--ink);font-weight:800}
.lobby .how .code{display:block;font-size:clamp(60px,10vw,150px);font-weight:900;color:var(--accent);letter-spacing:.06em;line-height:1.05}
.lobby .qr{background:#fff;padding:18px;border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.08);width:min(32vw,340px)}
.lobby .qr svg{display:block;width:100%;height:auto}
.lobby .count{margin-top:18px;font-size:22px;color:var(--muted)}
.lobby .count b{color:var(--ink);font-size:32px}
.lb{flex:1;display:flex;flex-direction:column;gap:10px;max-width:900px;width:100%;margin:0 auto;overflow:auto}
.lb .row{display:flex;align-items:center;gap:18px;background:var(--panel);border-radius:12px;padding:12px 20px;font-size:clamp(18px,2vw,28px);animation:pop .4s ease both}
.lb .row .r{width:2em;font-weight:900;color:var(--muted)}
.lb .row .n{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .row .s{font-weight:800;font-variant-numeric:tabular-nums}
.lb .row.p1{background:var(--gold-soft)} .lb .row.p1 .r{color:var(--gold-text)}
.lb .row.p2{background:var(--silver-soft)} .lb .row.p3{background:var(--clay-soft)}
.expl-p{margin-top:12px;font-size:clamp(16px,1.7vw,24px);background:var(--panel);border-left:6px solid var(--accent);padding:12px 18px;border-radius:10px}
.pct{color:var(--ok);font-weight:800}
.ctrl{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px;background:rgba(31,31,31,.92);padding:8px;border-radius:14px;transition:opacity .3s;z-index:5;align-items:center}
.ctrl button,.ctrl select{white-space:nowrap;border:0;background:transparent;color:#fff;padding:10px 14px;border-radius:10px;font-weight:600;font-size:15px}
.ctrl select{background:var(--dark-2);max-width:180px}
.ctrl button:hover{background:rgba(255,255,255,.12)}
.ctrl button.primary{background:var(--accent)}
.ctrl.idle{opacity:0}
.ptimer{font-size:28px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.ptimer.low{color:var(--bad)}
.corner{position:fixed;right:24px;bottom:22px;color:var(--muted);font-size:16px}
.corner b{color:var(--accent)}

/* ---------------- admin ---------------- */
.admin{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
.admin h1{margin:0 0 4px}
.admin .card{background:#fff;border-radius:var(--radius);padding:20px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.admin table{width:100%;border-collapse:collapse}
.admin th,.admin td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.admin th{font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.admin a{color:var(--accent)}
.admin .actions{display:flex;flex-wrap:wrap;gap:6px}
.admin .actions a,.admin .actions button,.abtn{display:inline-block;padding:6px 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);text-decoration:none;font-weight:600;font-size:14px;border:0}
.admin .actions .danger,.abtn.danger{background:var(--bad-soft);color:var(--bad)}
.abtn.primary{background:var(--accent);color:#fff;padding:10px 16px}
.admin textarea{width:100%;min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;padding:12px;border:1px solid var(--line);border-radius:10px}
.admin code{background:var(--silver-soft);padding:2px 6px;border-radius:6px;font-size:13px;word-break:break-all}
.admin .msg{padding:12px 14px;border-radius:10px;background:var(--ok-soft);color:var(--ok-text);margin:12px 0}
.admin .msg.bad{background:var(--bad-soft);color:var(--bad-text)}
.admin .tbl-wrap{overflow-x:auto}
.minibar{height:10px;background:var(--accent);border-radius:4px;display:inline-block;vertical-align:middle;margin-right:8px}
.admin .qres{border-top:1px solid var(--line);padding:14px 0}
.admin .okc{color:var(--ok);font-weight:700}
.admin .badc{color:var(--bad)}
@media (max-width:700px){
  .lobby{flex-direction:column;gap:20px}
  .pres .top{padding:10px 14px;font-size:14px}
  .stage{padding:8px 16px 90px}
  .ctrl{bottom:8px;max-width:calc(100vw - 16px);overflow-x:auto}
}

/* logo */
.logo{display:block;flex:none}
.brand-h{display:flex;align-items:center;gap:12px}
.admin td code{white-space:nowrap;word-break:normal}
/* student account */
.play header .brand{text-decoration:none}
.hdr-right{display:flex;align-items:center;gap:12px}
.acct{font-size:14px;font-weight:700;color:var(--accent-dark);text-decoration:none;padding:6px 12px;border-radius:999px;background:var(--accent-soft);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okmsg{color:var(--ok-text);background:var(--ok-soft);padding:10px 14px;border-radius:10px}
.play main a{color:var(--accent)}
.play main a.btn,.play main a.online-btn{color:#fff;text-decoration:none}
.me-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.me-item{background:#fff;border-radius:var(--radius);padding:14px 16px}
.me-title{font-weight:700;font-size:17px}
.me-meta{font-size:13px;margin:2px 0 8px}
.me-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
/* legal links, cookie notice, legal pages */
.legal-links{text-align:center;font-size:11px;color:var(--muted);padding:14px 16px 18px}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{text-decoration:underline}
.admin .legal-links{padding-top:30px}
.cookie-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:720px;margin:0 auto;background:var(--dark);color:#fff;border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.2)}
.cookie-bar a{color:var(--gold)}
.cookie-bar button{flex:none;border:0;background:var(--accent);color:#fff;font-weight:700;padding:9px 16px;border-radius:9px}
.linkbtn{background:none;border:0;color:var(--bad);font-size:13px;text-decoration:underline;padding:4px}
.legal-body{justify-content:flex-start!important;max-width:760px!important;line-height:1.6}
.legal-body h1{margin-top:8px}
.legal-body h2{font-size:18px;margin:26px 0 6px}
.legal-body ul{padding-left:20px}
.legal-body li{margin:4px 0}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0;background:#fff;border-radius:10px;overflow:hidden}
.legal-table th,.legal-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-body a{color:var(--accent)}
/* course overview */
.matrix th.qcol{font-size:12px;text-transform:none;letter-spacing:0;max-width:120px;white-space:normal}
.matrix td.cell{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.matrix td.good{background:var(--ok-soft);color:var(--ok-text)}
.matrix td.mid{background:var(--gold-soft);color:var(--gold-text)}
.matrix td.low{background:var(--bad-soft);color:var(--bad-text)}
.matrix td.done{color:var(--accent)}
.matrix td.none{color:var(--faint);font-weight:400}
.matrix tr.sum td{background:var(--bg);font-weight:700}
.bar-mini{display:inline-block;width:54px;height:8px;background:var(--line);border-radius:4px;vertical-align:middle;overflow:hidden}
.bar-mini span{display:block;height:100%;background:var(--accent)}
/* uploads and homework */
.upbtn{position:relative;text-align:center;cursor:pointer}
.file-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.file-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:10px 12px;font-size:15px;word-break:break-all}
.as-card{background:#fff;border-radius:var(--radius);padding:16px;margin:0 0 14px;position:relative}
.as-card h2{font-size:19px;margin:4px 0 12px;line-height:1.3}
.as-card .file-list li{background:var(--bg)}
.as-card.as-done{box-shadow:inset 4px 0 0 var(--ok)}
.as-n{font-size:13px;font-weight:800;color:var(--muted)}
.as-done .as-n{color:var(--ok)}
.opt.sel,.scale button.sel{border-color:var(--accent);background:var(--accent-soft)}
.upl{flex:1;display:flex;flex-direction:column;align-items:center;gap:3vh}
.upnames{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:90%}
.upnames span{background:var(--panel);border-radius:999px;padding:8px 16px;font-size:20px;font-weight:600;animation:pop .35s ease}
.admin .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.admin .thumb{width:150px;background:var(--bg);border-radius:10px;overflow:hidden;font-size:12px;text-decoration:none;color:var(--ink)}
.admin .thumb img{width:150px;height:150px;object-fit:cover;display:block;background:var(--silver-soft)}
.admin .thumb .doc{width:150px;height:80px;display:grid;place-items:center;font-size:34px}
.admin .thumb span{display:block;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold-text);vertical-align:middle;margin-left:6px}
/* student account: courses and open homework */
.me-h{font-size:19px;margin:26px 0 4px}
.hw-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.hw{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:inherit;text-decoration:none}
.hw:hover{border-color:var(--accent)}
.hw-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.hw-main b{overflow-wrap:anywhere}
.hw-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.hw-dl{font-size:13px}
.hw-state{flex:none;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.hw-todo .hw-state{background:var(--clay-soft);color:var(--clay-text)}
.hw-partial .hw-state{background:var(--gold-soft);color:var(--gold-text)}
.hw-done .hw-state{background:var(--ok-soft);color:var(--ok-text)}
.hw-todo{border-color:var(--clay-line)}
.admin details.bulk{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.admin details.bulk summary{cursor:pointer;font-weight:600;color:var(--accent)}
/* course study materials */
.mat-h{font-weight:700;font-size:14px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mat{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.mat:first-child{border-top:0}
.mat-date{font-size:13px;color:var(--muted);white-space:nowrap;padding-top:2px}
.mat-ic{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:6px;white-space:nowrap}
.mat-pdf{background:var(--bad-soft);color:var(--bad-text)}
.mat-link{background:var(--info-soft);color:var(--info-text)}
.mat-video{background:#efeafd;color:#5a44c2}
.mat-body{min-width:0}
.mat-body a,.mat-play{font-weight:600;overflow-wrap:anywhere}
.mat-play{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-align:left}
.mat-play.on{color:var(--ink);cursor:default}
.mat-new{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;background:var(--ok-soft);color:var(--ok-text);padding:2px 7px;border-radius:999px;vertical-align:1px}
.mat-note{font-size:13px;margin-top:2px}
.mat-frame,.mat-player{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-top:8px;background:#000}
@media (max-width:420px){.mat{grid-template-columns:auto 1fr}.mat-date{grid-column:1/-1;padding:0}}
.admin .mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.admin .mat-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.admin .mat-grid .wide{grid-column:1/-1}
.admin .mat-grid input:not([type=file]),.admin .mat-grid select,.admin .mat-grid textarea{font:inherit;font-size:15px;color:var(--ink);padding:8px;border-radius:8px;border:1px solid var(--line-strong)}
.admin table.mat-table tr.sel td{background:var(--panel)}
.admin .nowrap{white-space:nowrap}
.badge.hidden-badge{background:var(--line);color:var(--muted)}
/* student name */
.me-name{margin:10px 0 4px}
.me-name summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.me-name summary::-webkit-details-marker{display:none}
.me-name .linkish{margin-left:auto;font-size:14px;font-weight:600;color:var(--accent)}
.name-form{display:flex;gap:8px;margin:12px 0 6px}
.name-form .field{margin:0;flex:1;min-width:0}
.name-form .btn{width:auto;margin:0;padding:12px 18px}
.name-hist{margin:4px 0 0;padding-left:18px;font-size:14px}
/* feedback */
.admin .fb-row{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:8px}
.admin .fb-row textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px;border-radius:8px;border:1px solid var(--line-strong);min-height:70px}
.admin .fb-files{font-size:13px;margin-top:2px}
.admin .fb-files a{margin-right:10px}
.fb-box{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--panel);border-left:4px solid var(--accent)}
.fb-box .fb-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-box .fb-grade{background:var(--accent);color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;letter-spacing:0;text-transform:none}
.fb-box .fb-t{margin-top:6px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-alert{display:block;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--panel);color:var(--ink);text-decoration:none;font-weight:600}

/* online class link */
.online-btn{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:12px 16px;border-radius:12px;background:var(--accent);color:var(--accent-ink);text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.online-btn:hover,.online-btn:focus-visible{background:var(--accent-dark)}
.online-btn span{display:flex;flex-direction:column;line-height:1.2}
.online-btn b{font-size:16px}
.online-btn small{font-size:13px;opacity:.9;font-weight:600}
.online-note{font-size:14px;margin:2px 0 8px}
.admin .online-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr);gap:10px 12px;align-items:end;margin-bottom:6px}
.admin .online-form label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.admin .online-form input{font:inherit;font-size:15px;color:var(--ink);padding:8px;border-radius:8px;border:1px solid var(--line-strong);width:100%;box-sizing:border-box}
.admin .online-form .actions{grid-column:1/-1}
.online-prov{color:var(--accent-dark)}
@media (max-width:640px){.admin .online-form{grid-template-columns:minmax(0,1fr)}}

/* announcements in the course stream */
.mat-announcement{background:var(--gold-soft);color:var(--gold-text)}
details.ann summary{cursor:pointer;font-weight:600;color:var(--accent-dark);list-style:none}
details.ann summary::-webkit-details-marker{display:none}
details.ann summary::before{content:"▸ ";color:var(--muted)}
details.ann[open] summary::before{content:"▾ "}
.ann-body{margin:8px 0 4px;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.ann-link{display:inline-block;margin-top:4px;font-size:14px;font-weight:600}
.ask-link{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--muted)!important;text-decoration:none}
.ask-link:hover{color:var(--accent)!important;text-decoration:underline}
.course-links{margin:6px 0 4px;font-size:14px;font-weight:600}
.play main .course-links a{text-decoration:none}

/* messages */
.msg-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark)}
.msg-link:hover{background:var(--accent);color:#fff}
.msg-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.msg-back{margin:0 0 6px;font-size:14px}
.msg-h1{margin-bottom:6px!important}
.msgs{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.mb{max-width:88%;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.mb-me{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.mb-them{align-self:flex-start}
.mb-meta{font-size:12px;color:var(--muted);margin-bottom:3px}
.mb-text{font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.msg-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.msg-form label{font-size:13px;font-weight:600}
.msg-form textarea{font:inherit;font-size:16px;padding:12px;border:2px solid var(--line);border-radius:12px;resize:vertical;min-height:90px;box-sizing:border-box;width:100%;background:#fff;color:var(--ink)}
.msg-form textarea:focus{border-color:var(--accent);outline:none}
.msg-select{font-size:16px!important;padding:12px!important}
.msg-compose summary{cursor:pointer;font-weight:700;color:var(--accent-dark)}
.msg-compose[open] summary{margin-bottom:8px}
.thr-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.thr{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border-radius:12px;border:1px solid var(--line);color:var(--ink)!important;text-decoration:none}
.thr:hover{border-color:var(--accent)}
.thr.unread{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent);padding-right:62px}
.thr-top{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.thr-top .muted{font-size:12px;white-space:nowrap}
.thr-topic{font-size:13px;color:var(--accent-dark);font-weight:600}
.thr-prev{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thr-new{position:absolute;right:12px;bottom:10px;font-size:11px;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px}
.msg-pref{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}
.okmsg-inline{color:var(--ok-text);font-weight:600}
.admin .msg-form textarea{min-height:110px}
.admin table.thr-table tr.unread td{background:var(--accent-soft)}
.admin .msgs .mb{max-width:80%}
.play main.top{justify-content:flex-start}
/* My account: AI assistants */
.admin .ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-top:6px}
.admin .ai-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.admin .ai-box h3{margin:0 0 8px;font-size:18px}
.admin .ai-steps{margin:10px 0;padding-left:1.3em;font-size:14.5px;line-height:1.5}
.admin .ai-steps li{margin:6px 0}
.admin .ai-steps code{overflow-wrap:anywhere}
.admin .ai-copy{padding:3px 10px;font-size:13px;margin-left:4px}
.admin .msg.ai-warn{background:var(--gold-soft);color:var(--gold-text);margin-top:14px}