/* Hablibri design system: sticker-style cards, light pink primary, yellow rewards, black edges, white surfaces. */
:root{
  --bg:#FFF6F9; --surface:#FFFFFF; --soft:#FFEAF2; --ink:#18131C; --ink2:#5E5566;
  --pink:#FFB4D0; --rose:#C21F66; --yellow:#FFD84A; --edge:#18131C; --sh:#18131C;
  --on:#18131C; --good:#177A4C; --bad:#B3261E; --focus:#C21F66; --mute:#EFD9E3;
  --display:'Bricolage Grotesque',ui-rounded,system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#150F18; --surface:#211826; --soft:#2D2034; --ink:#FFF1F7; --ink2:#CDBBD6;
  --pink:#FF9CC5; --rose:#FFB4D0; --yellow:#FFD84A; --edge:#F7DDE9; --sh:#7A2F55;
  --on:#18131C; --good:#6FD6A0; --bad:#FF8A80; --focus:#FFD84A; --mute:#3A2B42; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#150F18; --surface:#211826; --soft:#2D2034; --ink:#FFF1F7; --ink2:#CDBBD6;
  --pink:#FF9CC5; --rose:#FFB4D0; --yellow:#FFD84A; --edge:#F7DDE9; --sh:#7A2F55;
  --on:#18131C; --good:#6FD6A0; --bad:#FF8A80; --focus:#FFD84A; --mute:#3A2B42; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-text-size-adjust:100%;padding-bottom:96px}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,7vw,4.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* top bar */
.banner{background:var(--yellow);color:var(--on);text-align:center;font-weight:600;font-size:.88rem;padding:6px 12px;border-bottom:2px solid var(--edge)}
.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--edge);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 1.45rem var(--display);letter-spacing:-.03em}
.logo svg{width:44px;height:auto}
.links{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.links a,.links button.lnk{text-decoration:none;font:600 .95rem var(--body);padding:8px 12px;border-radius:999px;color:var(--ink);background:none;border:0;cursor:pointer;position:relative}
.links a:hover,.links button.lnk:hover{background:var(--soft)}
.links a[aria-current="page"]{background:var(--pink);color:var(--on);box-shadow:inset 0 0 0 2px var(--edge)}
.dot-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--rose);color:#fff;font:700 .7rem/18px var(--body);text-align:center;padding:0 4px}
:root[data-theme="dark"] .dot-badge{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dot-badge{color:var(--on)}}
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:2px solid var(--edge);padding:6px max(10px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));justify-content:space-between;gap:2px}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:.7rem;font-weight:700;padding:6px 2px;border-radius:14px;color:var(--ink2);min-width:0;position:relative;white-space:nowrap}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tabbar a[aria-current="page"]{background:var(--pink);color:var(--on)}
@media (max-width:820px){.links .hide-m{display:none}.tabbar{display:flex}.bar{min-height:56px}.logo svg{width:38px}}
main{padding-block:28px 40px;display:block;min-height:60vh}
/* controls */
.btn{font:700 1rem var(--body);display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pink);color:var(--on);border:2px solid var(--edge);border-radius:14px;padding:11px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--sh);text-decoration:none;transition:transform .12s,box-shadow .12s;min-height:46px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sh)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sh)}
.btn.y{background:var(--yellow)}.btn.ghost{background:var(--surface);color:var(--ink)}.btn.danger{background:var(--bad);color:#fff}
:root[data-theme="dark"] .btn.danger{color:var(--on)}
.btn.sm{padding:6px 12px;min-height:36px;font-size:.88rem;border-radius:11px;box-shadow:2px 2px 0 var(--sh)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--sh)}
.btn.block{width:100%}
.card{background:var(--surface);border:2px solid var(--edge);border-radius:22px;padding:20px;box-shadow:4px 4px 0 var(--sh);min-width:0}
.card.pink{background:var(--pink);color:var(--on)}.card.soft{background:var(--soft);box-shadow:none}.card.flat{box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:2px solid var(--edge);background:var(--yellow);color:var(--on);white-space:nowrap}
.pill.p{background:var(--pink)}.pill.w{background:var(--surface);color:var(--ink)}.pill.g{background:var(--good);color:#fff}.pill.r{background:var(--bad);color:#fff}
:root[data-theme="dark"] .pill.g,:root[data-theme="dark"] .pill.r{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.g,:root:not([data-theme="light"]) .pill.r{color:var(--on)}}
.muted{color:var(--ink2)}.small{font-size:.88rem}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.sec{margin-top:64px;display:grid;gap:22px}.sec>header{display:grid;gap:8px;max-width:60ch}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row.between{justify-content:space-between}.stack{display:grid;gap:12px}
.page-h{display:grid;gap:8px;margin-bottom:20px}
.page-h h1{font-size:clamp(2rem,5vw,3.2rem)}
label.f{display:grid;gap:6px;font-weight:600;min-width:0}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=time],input[type=date],input[type=datetime-local],textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:12px;padding:10px 14px;width:100%;min-width:0}
textarea{resize:vertical;min-height:96px}
input[type=range]{width:100%;accent-color:var(--rose)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--rose)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.err{color:var(--bad);font-weight:600;font-size:.92rem}
.ok{color:var(--good);font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font:700 .92rem var(--body);padding:8px 14px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.tab[aria-pressed="true"],.tab[aria-current="page"]{background:var(--pink);color:var(--on)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:700 .9rem var(--body);padding:8px 13px;border-radius:12px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--yellow);color:var(--on);box-shadow:2px 2px 0 var(--sh)}
.chip[disabled]{opacity:.4;cursor:not-allowed}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.ticks li{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start}
ul.ticks li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%2318131C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;border:2px solid var(--edge)}
details{border:2px solid var(--edge);border-radius:16px;background:var(--surface);padding:14px 18px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font:800 1.3rem var(--display)}details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--ink2)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:2px solid var(--mute);vertical-align:top}
th{font:700 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.scroll{overflow-x:auto}
.big{font:800 clamp(1.8rem,5vw,2.8rem) var(--display);letter-spacing:-.03em;line-height:1}
.price{font:800 2rem var(--display);letter-spacing:-.03em}.price small{font:600 .9rem var(--body);color:var(--ink2);letter-spacing:0}
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58% 92%,transparent 92%);padding:0 .08em}
.empty{display:grid;place-items:center;text-align:center;gap:10px;padding:28px 16px}.empty svg{width:96px;height:auto}
.skeleton{height:120px;border-radius:22px;background:linear-gradient(90deg,var(--soft),var(--mute),var(--soft));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
/* hero + 3D */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero p.lead{font-size:1.2rem;max-width:46ch;margin-top:16px}.hero .row{margin-top:24px}
.stage{perspective:1000px;height:400px;position:relative;touch-action:pan-y}
@media (max-width:860px){.stage{height:340px}}
.deck{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
.blob{position:absolute;left:8%;right:8%;top:6%;bottom:6%;border-radius:46% 54% 50% 50%/50% 46% 54% 50%;background:var(--pink);border:2px solid var(--edge);transform:translateZ(-60px)}
.blob.b2{left:52%;top:58%;right:2%;bottom:0;background:var(--yellow);transform:translateZ(-20px)}
.plate{position:absolute;transform-style:preserve-3d}
.plate .in{background:var(--surface);border:2px solid var(--edge);border-radius:18px;padding:12px 16px;box-shadow:4px 4px 0 var(--sh);display:grid;gap:2px;animation:bob 5s ease-in-out infinite;color:var(--ink)}
.plate small{color:var(--ink2);font-size:.78rem}.plate b{font:800 1.3rem var(--display);letter-spacing:-.02em}
.p1{left:2%;top:10%;transform:translateZ(70px) rotate(-5deg)}.p2{left:22%;top:50%;transform:translateZ(110px) rotate(2deg)}.p2 .in{animation-delay:-1.6s}.p3{right:2%;top:24%;transform:translateZ(40px) rotate(5deg)}.p3 .in{animation-delay:-3s}
.bird{position:absolute;right:6%;bottom:2%;width:42%;transform:translateZ(150px)}.bird svg{width:100%;height:auto;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes flap{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.wing{transform-origin:48px 52px;animation:flap .32s ease-in-out infinite alternate}
.mascot .fill{fill:var(--pink)}.mascot .wingf{fill:var(--yellow)}.mascot .line{stroke:var(--edge)}.mascot .beak{fill:var(--edge)}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.num{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--on);border:2px solid var(--edge);display:grid;place-items:center;font:800 1.2rem var(--display)}
/* teacher */
.tcard{display:grid;gap:10px;text-decoration:none;color:inherit}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--pink);border:2px solid var(--edge);display:grid;place-items:center;font:800 1.6rem var(--display);color:var(--on);flex:none}
.stars{color:var(--rose);letter-spacing:2px;font-weight:700}
.embed{aspect-ratio:16/9;width:100%;border:2px solid var(--edge);border-radius:18px;background:var(--soft)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.opt{text-align:left;font:inherit;color:inherit;cursor:pointer;display:grid;gap:6px;background:var(--surface);border:2px solid var(--edge);border-radius:18px;padding:14px 16px;box-shadow:3px 3px 0 var(--sh);width:100%}
.opt[aria-pressed="true"]{background:var(--pink);color:var(--on);box-shadow:5px 5px 0 var(--sh);transform:translate(-1px,-1px)}
.opt[aria-pressed="true"] .muted{color:var(--on)}
/* chat */
.msgs{display:grid;gap:10px;align-content:start;height:min(54vh,480px);overflow:auto;padding:4px 2px 4px 0}
.msg{max-width:88%;display:grid;gap:4px}.msg.me{justify-self:end}
.bub{border:2px solid var(--edge);border-radius:18px;padding:10px 14px;background:var(--surface);overflow-wrap:anywhere;white-space:pre-wrap}
.msg.me .bub{background:var(--pink);color:var(--on);border-bottom-right-radius:4px}.msg:not(.me) .bub{border-bottom-left-radius:4px}
.orig{font-size:.82rem;color:var(--ink2);padding:0 6px;overflow-wrap:anywhere}.msg.me .orig{text-align:right}
.mtools{display:flex;gap:6px;padding:0 4px;flex-wrap:wrap}.msg.me .mtools{justify-content:flex-end}
.mtools button{font:600 .76rem var(--body);background:none;border:0;color:var(--ink2);cursor:pointer;text-decoration:underline;padding:2px}
.compose{display:flex;gap:8px;margin-top:12px}
.live{width:10px;height:10px;border-radius:50%;background:var(--bad);display:inline-block}.live.on{background:var(--good)}
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.inbox{grid-template-columns:minmax(0,1fr)}.inbox.chat-open .tlist{display:none}.inbox:not(.chat-open) .tpane{display:none}}
.trow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;border:2px solid transparent}
.trow:hover,.trow[aria-current="true"]{background:var(--soft);border-color:var(--edge)}
.trow .avatar{width:44px;height:44px;font-size:1.1rem}
.trow .prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2);font-size:.88rem}
/* room */
.room{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start}
@media (max-width:900px){.room{grid-template-columns:minmax(0,1fr)}}
.video{aspect-ratio:16/9;border:2px solid var(--edge);border-radius:18px;background:var(--ink);color:var(--bg);display:grid;place-items:center;text-align:center;padding:16px;position:relative;overflow:hidden}
.video.idle{background:var(--soft);color:var(--ink2);border-style:dashed}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.video .self{position:absolute;right:10px;bottom:10px;width:28%;aspect-ratio:4/3;height:auto;border:2px solid #fff;border-radius:12px;z-index:2}
.vcontrols{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
/* learn */
.stats{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center}
@media (max-width:620px){.stats{grid-template-columns:auto 1fr}}
.ring{width:74px;height:74px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 1.05rem var(--display)}
.stat b{display:block;font:800 1.7rem var(--display);line-height:1}
.scene{display:grid;gap:10px;cursor:pointer;text-align:left;font:inherit;color:inherit;background:var(--surface);border:2px solid var(--edge);border-radius:22px;padding:18px;box-shadow:4px 4px 0 var(--sh)}
.scene:hover{transform:translate(-1px,-1px)}.scene[disabled]{opacity:.6;cursor:not-allowed}
.line{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:2px dashed var(--mute)}.line:last-child{border-bottom:0}
.line .w{font:700 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding-top:5px}
.line .es{font:700 1.15rem var(--display);letter-spacing:-.01em}.line .en{color:var(--ink2);font-size:.92rem;margin-top:2px}
.q .o{display:block;width:100%;text-align:left;font:600 1rem var(--body);color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:14px;padding:12px 16px;cursor:pointer;margin-top:10px}
.q .o.ok{background:var(--good);color:#fff}.q .o.no{background:var(--bad);color:#fff}
:root[data-theme="dark"] .q .o.ok,:root[data-theme="dark"] .q .o.no{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .q .o.ok,:root:not([data-theme="light"]) .q .o.no{color:var(--on)}}
.flip{perspective:900px;height:260px;cursor:pointer;border:0;background:none;padding:0;width:100%;font:inherit;color:inherit;position:relative}
.flip .face{position:absolute;inset:0;border:2px solid var(--edge);border-radius:24px;box-shadow:4px 4px 0 var(--sh);display:grid;place-content:center;gap:8px;text-align:center;padding:20px;backface-visibility:hidden;transition:transform .5s}
.flip .front{background:var(--pink);color:var(--on)}.flip .back{background:var(--surface);transform:rotateY(180deg)}
.flip.on .front{transform:rotateY(-180deg)}.flip.on .back{transform:rotateY(0)}
.flip .bigw{font:800 2.2rem var(--display);letter-spacing:-.02em}
.lg{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px}
.lg.you{background:var(--yellow);color:var(--on);border:2px solid var(--edge)}
.av{width:36px;height:36px;border-radius:50%;background:var(--soft);border:2px solid var(--edge);display:grid;place-items:center;font-weight:800;color:var(--ink)}
.tier{display:grid;gap:14px;align-content:start}.tier.hot{background:var(--pink);color:var(--on)}.tier.hot .muted{color:var(--on)}
/* studio + admin */
.side{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:820px){.side{grid-template-columns:minmax(0,1fr)}}
.sidenav{display:grid;gap:6px;position:sticky;top:84px}
@media (max-width:820px){.sidenav{position:static;display:flex;flex-wrap:wrap}}
.sidenav a{text-decoration:none;font-weight:700;padding:10px 14px;border-radius:14px;border:2px solid transparent}
.sidenav a:hover{background:var(--soft)}.sidenav a[aria-current="page"]{background:var(--pink);color:var(--on);border-color:var(--edge)}
.win{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.kpi{display:grid;gap:4px}.kpi .big{font-size:clamp(1.6rem,4vw,2.2rem)}
/* overlays */
.modal-bg{position:fixed;inset:0;background:rgba(24,19,28,.55);z-index:90;display:grid;place-items:center;padding:16px}
.modal{background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:22px;box-shadow:6px 6px 0 var(--sh);padding:22px;width:min(480px,100%);max-height:90vh;overflow:auto;display:grid;gap:14px}
#toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:min(92vw,440px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:95}
.foot{margin-top:72px;padding-top:20px;border-top:2px solid var(--edge);display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between;color:var(--ink2);font-size:.9rem}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.prose{max-width:70ch;display:grid;gap:14px}.prose h2{font-size:1.5rem;margin-top:14px}.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:6px}
@media (min-width:821px){.hide-d{display:none}}
.hide-m{}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- booking / checkout panel ---- */
.bk+.bk{margin-top:22px;padding-top:22px;border-top:2px dashed var(--mute)}
.bk-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bk-h h3{font-size:1.15rem}
.num.sm{width:32px;height:32px;font-size:1rem;flex:none}
.bk.off{opacity:.55}
.timegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.timegrid .chip{text-align:center;padding-inline:6px}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.daystrip .chip{flex:none;scroll-snap-align:start;display:grid;gap:0;text-align:center;min-width:64px;line-height:1.2}
.daystrip .chip small{font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.sum{display:grid;gap:10px;background:var(--soft);border:2px solid var(--edge);border-radius:16px;padding:14px 16px}
.sum .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum .r>span:first-child{color:var(--ink2);font-size:.92rem}
.sum .r>b,.sum .r>span:last-child{text-align:right}
.sum .tot{border-top:2px solid var(--edge);padding-top:10px;margin-top:2px}
.sum .tot b{font:800 1.7rem var(--display);letter-spacing:-.02em}
.soon{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.88rem;color:var(--on);background:var(--yellow);border:2px solid var(--edge);border-radius:999px;padding:3px 10px}
input[type=time],input[type=date],input[type=datetime-local]{cursor:pointer;min-height:44px}
.win input[type=time]{min-width:0;width:100%}

/* ---- phones: readable, flat hero instead of the floating 3D deck ---- */
@media (max-width:860px){
  h1{font-size:clamp(2rem,9.5vw,3rem);line-height:1.04}
  .hero{gap:18px}
  .hero p.lead{font-size:1.05rem;margin-top:12px}
  .hero .row{margin-top:18px}
  .hero .row .btn{flex:1 1 100%}
  .hl{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .stage{height:auto;perspective:none;position:relative;padding:6px 0 0}
  .deck{position:relative;inset:auto;transform:none!important;display:grid;gap:12px;padding:22px 16px 84px;transition:none}
  .blob{left:0;right:0;top:0;bottom:0;border-radius:30px;transform:none}
  .blob.b2{display:none}
  .plate{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none!important;max-width:88%}
  .plate .in{animation:none;padding:10px 14px}
  .plate b{font-size:1.1rem;line-height:1.2;overflow-wrap:anywhere}
  .p1{justify-self:start}.p2{justify-self:end}.p3{justify-self:start}
  .bird{position:absolute;right:10px;bottom:6px;width:36%;max-width:150px;transform:none}
}
@media (max-width:380px){.plate{max-width:94%}.plate b{font-size:1rem}.bird{width:32%}}
@media (max-width:380px){.bar{gap:6px}.logo{font-size:1.25rem}.logo svg{width:36px}.links{flex-wrap:nowrap}.links a,.links button.lnk{padding:8px 8px;font-size:.88rem;white-space:nowrap}}

/* ---- in-lesson file sharing ---- */
.files .drop{display:grid;justify-items:center;gap:2px;text-align:center;margin-top:12px;padding:18px 14px;border:2px dashed var(--edge);border-radius:16px;background:var(--soft);cursor:pointer;transition:background .15s,transform .15s}
.files .drop:hover,.files .drop:focus-within{background:var(--pink);color:var(--on)}
.files .drop.over{background:var(--yellow);color:var(--on);transform:scale(1.01)}
.files .drop.off{cursor:not-allowed;opacity:.7;background:var(--surface)}
.files .drop.off:hover{background:var(--surface);color:inherit}
.files .drop-i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--yellow);border:2px solid var(--edge);color:var(--on);font-weight:800;margin-bottom:4px}
.files .drop small{margin-top:4px}
.flist{display:grid;gap:8px;margin-top:12px}
.frow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--edge);border-radius:14px;background:var(--surface)}
.frow.failed{border-color:var(--bad)}
.ficon,.fthumb{flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:1.4rem;background:var(--soft);object-fit:cover}
.fmeta{display:grid;gap:2px;min-width:0;flex:1}
.fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbar{display:block;height:8px;border-radius:99px;background:var(--soft);border:1px solid var(--edge);overflow:hidden;margin-top:4px}
.fbar i{display:block;height:100%;background:var(--yellow);transition:width .2s}
.fact{flex:none;text-align:right}
@media (max-width:420px){.frow{flex-wrap:wrap}.fact{width:100%;text-align:left}.fact .btn{width:100%}}

/* ---- homework ---- */
.hw{margin-top:12px;padding:12px 14px;border:2px dashed var(--edge);border-radius:14px;background:var(--soft)}
.hw.done{background:var(--surface);opacity:.85}

/* ---- level test ---- */
.lvbar{height:10px;border-radius:99px;background:var(--soft);border:2px solid var(--edge);overflow:hidden;margin-top:8px}
.lvbar i{display:block;height:100%;background:var(--yellow);transition:width .25s}
.lvbadge{justify-self:center;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--yellow);border:3px solid var(--edge);box-shadow:4px 4px 0 var(--sh);font:800 2rem var(--display);color:var(--on)}

/* ---- payment statements (payslips) ---- */
.doc{max-width:860px;margin-inline:auto;width:100%;padding:28px;display:grid;gap:22px}
.doc-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.doc-brand{font:800 1.8rem var(--display);letter-spacing:-.02em}
.doc-no{text-align:right;display:grid;gap:4px}.doc-no b{font:800 1.3rem var(--display)}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;padding:16px 0;border-block:2px solid var(--mute)}
.doc-t{width:100%;border-collapse:collapse}.doc-t th,.doc-t td{padding:9px 8px;text-align:left;border-bottom:1px solid var(--mute);vertical-align:top}.doc-t th{font:700 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase}.doc-t .r{text-align:right;white-space:nowrap}
.doc-sum{margin-left:auto;width:min(100%,340px);display:grid;gap:6px}.doc-sum>div{display:flex;justify-content:space-between;gap:16px}.doc-sum .tot{border-top:2px solid var(--ink);padding-top:8px;margin-top:4px;font:800 1.2rem var(--display)}
.doc-note{line-height:1.5}
@media (max-width:560px){.doc{padding:16px}.doc-no{text-align:left}}
@media print{
  body{background:#fff!important;color:#000!important}
  header.top,.tabbar,#banner,#toast,#fx,footer,.noprint{display:none!important}
  main.wrap{padding:0!important;max-width:none!important}
  .doc{box-shadow:none!important;border:0!important;padding:0!important;max-width:none}
  .pill{border:1px solid #000!important;background:#fff!important;color:#000!important}
}
@media (max-width:560px){.hs{display:none}}
@media (max-width:560px){.card.scroll table th,.card.scroll table td{padding-left:4px;padding-right:4px;font-size:.86rem}.card.scroll .pill{font-size:.62rem;padding:3px 7px}.card.scroll table .btn.sm{padding:6px 10px}}

/* =====================================================================
   CALM LAYER: more air, softer lines, quieter colour, easier reading.
   Strong black edges are kept only where something must be noticed
   (primary buttons, selected state). Everything else is a soft line.
   ===================================================================== */
:root{
  --line:#F2D9E4; --line2:#E4BFD1; --pg:#FFF0B3; --pgt:#18131C; --pp:#FFE0EC; --ppt:#7A1040; --pw:#FFFFFF; --pwt:#18131C;
  --pgo:#DFF4E7; --pgot:#0E5A37; --pr:#FDE3E0; --prt:#8F1D17;
  --shadow:0 1px 2px rgba(24,19,28,.04),0 14px 32px -18px rgba(194,31,102,.28);
  --shadow-up:0 2px 4px rgba(24,19,28,.05),0 20px 40px -18px rgba(194,31,102,.34);
  --r:20px; --gap:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --line:#33263A; --line2:#4B3A55; --pg:#4A3F1A; --pgt:#FFE58A; --pp:#4A2740; --ppt:#FFC7DD; --pw:#211826; --pwt:#FFF1F7;
  --pgo:#1E3D2E; --pgot:#8EE3B3; --pr:#4A2323; --prt:#FFB4AC;
  --shadow:0 14px 32px -18px rgba(0,0,0,.6); --shadow-up:0 20px 40px -18px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{
  --line:#33263A; --line2:#4B3A55; --pg:#4A3F1A; --pgt:#FFE58A; --pp:#4A2740; --ppt:#FFC7DD; --pw:#211826; --pwt:#FFF1F7;
  --pgo:#1E3D2E; --pgot:#8EE3B3; --pr:#4A2323; --prt:#FFB4AC;
  --shadow:0 14px 32px -18px rgba(0,0,0,.6); --shadow-up:0 20px 40px -18px rgba(0,0,0,.7)}

/* reading */
body{font-size:1.0625rem;line-height:1.65;letter-spacing:.003em}
h1,h2,h3{line-height:1.12;font-weight:700;letter-spacing:-.018em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.08}
h2{font-size:clamp(1.55rem,3.2vw,2.15rem)}
h3{font-size:1.15rem;line-height:1.3;font-weight:650}
p{max-width:68ch}
.card p,.opt p,.tier p{max-width:none}
.muted{color:var(--ink2)}
.small{font-size:.92rem;line-height:1.55}
.page-h{gap:12px;margin-bottom:40px}
.page-h h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.page-h p{font-size:1.05rem}
.err{font-weight:500}

/* rhythm */
.wrap{max-width:1080px}
main{padding-block:52px 80px}
.sec{margin-top:104px;gap:32px}
.sec>header{gap:12px}
.grid{gap:var(--gap)}
.stack{gap:16px}
.row{gap:14px}
.tabs{gap:10px}.chips{gap:10px}
.split{gap:32px}.room{gap:28px}.inbox{gap:24px}.side{gap:36px}
.hero{gap:48px}
.hero p.lead{font-size:1.18rem;line-height:1.6;margin-top:20px;max-width:44ch}
.hero .row{margin-top:32px}
.foot{margin-top:112px;padding-top:28px;border-top:1px solid var(--line)}

/* header + nav */
.banner{border-bottom:0;font-weight:600}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{min-height:68px}
.links{gap:4px}
.links a,.links button.lnk{font-weight:550;padding:9px 14px;color:var(--ink2)}
.links a:hover,.links button.lnk:hover{color:var(--ink)}
.links a[aria-current="page"]{box-shadow:none;color:var(--on);font-weight:650}
.sidenav a{border:0;font-weight:600;color:var(--ink2);padding:10px 16px}
.sidenav a:hover{color:var(--ink)}
.sidenav a[aria-current="page"]{border:0;color:var(--on)}
.tabbar{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:8px}
.tabbar a{font-weight:600;font-size:.72rem;gap:3px;padding:7px 2px}
.tabbar svg{width:22px;height:22px;stroke-width:1.8}

/* buttons: one clear primary, calm secondary */
.btn{border-width:1.5px;border-radius:999px;padding:12px 24px;min-height:48px;font-weight:650;box-shadow:0 2px 0 var(--sh);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--sh)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 var(--sh)}
.btn.ghost{background:transparent;border-color:var(--line2);box-shadow:none;color:var(--ink)}
.btn.ghost:hover{background:var(--soft);transform:none;box-shadow:none}
.btn.sm{padding:7px 16px;min-height:38px;font-size:.9rem;border-radius:999px;box-shadow:0 1px 0 var(--sh)}
.btn.sm.ghost{box-shadow:none}
.btn[disabled]{box-shadow:none;opacity:.45}
.btn.danger{box-shadow:none}

/* surfaces */
.card{border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.card.soft{background:var(--soft);border-color:transparent;box-shadow:none}
.card.flat{box-shadow:none}
.card.pink{border-color:transparent}
.tier.hot{border-color:transparent}
.scene,.opt{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;transition:transform .18s,box-shadow .18s,border-color .18s}
.scene:hover,.opt:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.opt{padding:16px 18px;gap:8px;border-radius:18px}
.opt[aria-pressed="true"]{border:1.5px solid var(--edge);box-shadow:var(--shadow);transform:none}
.sum{border:0;border-radius:18px;padding:18px 20px;gap:12px}
.sum .tot{border-top:1px solid var(--line2)}
.hw{border:1px dashed var(--line2);border-radius:16px;padding:16px 18px;margin-top:16px}
.frow{border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.files .drop{border:1.5px dashed var(--line2);border-radius:18px;padding:24px 16px}
details{border:1px solid var(--line);border-radius:18px;padding:18px 22px;box-shadow:none}
details+details{margin-top:12px}
details[open]{box-shadow:var(--shadow)}
summary{font-weight:650;gap:16px}
details p{margin-top:12px;line-height:1.65}
.modal{border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 70px -20px rgba(24,19,28,.45);padding:28px;gap:18px}
.modal-bg{background:rgba(24,19,28,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.video,.embed{border:1px solid var(--line);border-radius:20px}
.avatar,.av,.num{border:0}
.avatar{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--edge) 22%,transparent)}
.num{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--edge) 30%,transparent)}
.lvbar,.fbar{border:0;background:var(--soft)}
.lvbadge{border:0;box-shadow:var(--shadow)}
.flip .face{border:1px solid var(--line);box-shadow:var(--shadow)}
.flip .front{border-color:transparent}

/* quiet labels: tinted, borderless */
.pill{border:0;font-weight:650;font-size:.72rem;letter-spacing:.05em;padding:5px 11px;background:var(--pg);color:var(--pgt)}
:root:root .pill.p{background:var(--pp);color:var(--ppt)}
:root:root .pill.w{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
:root:root .pill.g{background:var(--pgo);color:var(--pgot)}
:root:root .pill.r{background:var(--pr);color:var(--prt)}
.soon{border:0;background:var(--pg);color:var(--pgt);font-weight:650}
.tab{border:1px solid var(--line2);font-weight:600;padding:9px 18px;background:transparent;color:var(--ink2)}
.tab:hover{background:var(--soft);color:var(--ink)}
.tab[aria-pressed="true"],.tab[aria-current="page"]{background:var(--pink);border-color:var(--pink);color:var(--on);font-weight:700}
.chip{border:1px solid var(--line2);border-radius:14px;font-weight:600;padding:9px 14px;min-height:44px;background:var(--surface)}
.chip:hover{border-color:var(--ink2)}
.chip[aria-pressed="true"]{border-color:var(--edge);box-shadow:none;background:var(--yellow)}
ul.ticks{gap:12px}
ul.ticks li::before{border:0;background-color:var(--pink)}
.hl{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--yellow) 85%,transparent) 62% 94%,transparent 94%)}

/* forms */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=time],input[type=date],input[type=datetime-local],textarea,select{border:1.5px solid var(--line2);border-radius:14px;padding:13px 16px;min-height:50px;transition:border-color .15s,box-shadow .15s;background:var(--surface)}
textarea{min-height:120px;line-height:1.6}
input:hover,textarea:hover,select:hover{border-color:var(--ink2)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--pink) 55%,transparent)}
::placeholder{color:var(--ink2);opacity:.7}
label.f{gap:8px;font-weight:600;font-size:.95rem}
.check{font-weight:450;gap:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* tables: lighter, roomier */
th,td{padding:16px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-weight:650;font-size:.72rem;letter-spacing:.05em;padding-bottom:12px;border-bottom:1px solid var(--line2)}
tbody tr:hover td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.line{border-bottom:1px solid var(--line);padding:16px 0}
.bk+.bk{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.bk-h{margin-bottom:16px}
.trow{border:0;padding:12px;border-radius:16px}
.trow:hover,.trow[aria-current="true"]{border:0;background:var(--soft)}
.lg.you{border:0}
.bub{border:1px solid var(--line2);padding:12px 16px}
.msg.me .bub{border-color:var(--pink)}
.msgs{gap:14px}
.compose{margin-top:16px;gap:10px}
.kpi{gap:6px}
.stats{gap:24px}
.doc-meta{border-block:1px solid var(--line)}

/* phones */
@media (max-width:820px){
  main{padding-block:32px 64px}
  .sec{margin-top:80px;gap:26px}
  .hero{gap:28px}
  .side{gap:24px}
  .sidenav{gap:8px}
  .bar{min-height:60px}
  .page-h{margin-bottom:28px}
}
@media (max-width:620px){
  :root{--gap:16px;--r:18px}
  body{font-size:1rem}
  .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .card{padding:22px}
  .scene,.opt{padding:18px}
  .sec{margin-top:72px}
  .foot{margin-top:80px}
  .btn{padding:12px 22px}
  h1{font-size:clamp(2rem,9vw,2.7rem)}
  .modal{padding:22px;border-radius:22px}
  .tab{padding:9px 16px}
  th,td{padding:14px 10px}
  .card.scroll{padding:10px 6px}
}
@media (max-width:380px){.wrap{padding-left:16px;padding-right:16px}.card{padding:18px}}

/* fixes after screenshot review */
.split>.stack{gap:44px!important}
.stack>h2:first-child{margin-bottom:4px}
@media (max-width:820px){
  .split>.stack{gap:36px!important}
  .links{flex-wrap:nowrap;gap:2px}
  .links a,.links button.lnk{padding:8px 12px;white-space:nowrap}
  .links .btn.sm{padding:7px 16px;min-height:38px;margin-left:4px!important}
}
@media (max-width:380px){.links a,.links button.lnk{padding:8px 8px;font-size:.88rem}.links .btn.sm{padding:7px 12px}}
.row.nowrap{flex-wrap:nowrap}.row.nowrap>div{min-width:0;flex:1;overflow-wrap:anywhere}.row.nowrap>.pill{flex:none}
.card>h2+p,.card>h3+p,.card>.row+p{margin-top:8px}
@media (max-width:820px){
  .sidenav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px 6px;-webkit-overflow-scrolling:touch}
  .sidenav::-webkit-scrollbar{display:none}
  .sidenav a{white-space:nowrap;flex:none}
}

/* =====================================================================
   STUDY HALL + profile photos
   ===================================================================== */
img.avatar{object-fit:cover;display:block;background:var(--soft)}
.photo-edit{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.photo-edit .avatar{width:96px;height:96px;font-size:2rem}
@media (max-width:520px){.photo-edit{grid-template-columns:minmax(0,1fr);justify-items:start}}
.crop{width:min(300px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-inline:auto;background:var(--soft);box-shadow:0 0 0 1px var(--line2)}
.crop img{width:100%;height:100%;display:block;object-fit:cover}

.hall-hero{align-items:center}
.hall-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;padding:22px;border-radius:32px;background:var(--soft)}
.hall-tiles .tile{aspect-ratio:4/3;border-radius:18px;background:var(--surface);display:grid;place-items:center;align-content:center;gap:2px;position:relative;box-shadow:var(--shadow);animation:bob 6s ease-in-out infinite}
.hall-tiles .tile b{font:700 1.6rem var(--display);color:var(--on);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--pink)}
.hall-tiles .tile.t1 b{background:var(--yellow)}.hall-tiles .tile.t3 b{background:var(--yellow)}
.hall-tiles .tile small{font-size:.72rem;color:var(--ink2)}
.hall-tiles .tile:nth-child(2){animation-delay:-1.2s}.hall-tiles .tile:nth-child(3){animation-delay:-2.4s}.hall-tiles .tile:nth-child(4){animation-delay:-3.6s}.hall-tiles .tile:nth-child(5){animation-delay:-4.8s}
.hall-tiles .tile .dot{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.hall-tiles .tile.host{background:var(--pink);box-shadow:0 0 0 2px var(--edge),var(--shadow)}
.hall-tiles .tile.host b{background:var(--surface)}
.hall-tiles .tag{position:absolute;top:8px;left:8px;font:700 .6rem var(--body);letter-spacing:.08em;background:var(--edge);color:var(--bg);padding:3px 7px;border-radius:99px}
.hall-tiles .timer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-radius:18px;padding:14px 18px;box-shadow:var(--shadow)}
.hall-tiles .timer small{color:var(--ink2)}.hall-tiles .timer b{font:700 1.5rem var(--display);letter-spacing:-.02em}
.hall-tiles .bird-mini{position:absolute;right:-6px;top:-26px;width:76px;transform:rotate(8deg)}
@media (max-width:860px){.hall-tiles{padding:16px;gap:10px}.hall-tiles .tile b{width:38px;height:38px;font-size:1.3rem}}

.hall-day{font:650 1.05rem var(--body);color:var(--ink2);letter-spacing:0;text-transform:none}
.hall-card{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:28px;align-items:start}
.hall-time{display:grid;gap:2px}.hall-time b{font:700 1.4rem var(--display);letter-spacing:-.02em}.hall-time span{color:var(--ink2);font-size:.9rem}
.hall-main{display:grid;gap:12px;min-width:0}
.hall-host{gap:10px}.hall-host .avatar{width:32px;height:32px;font-size:.85rem}
.hall-people{padding:10px 14px;border-radius:14px;background:var(--soft)}
.hall-side{display:grid;gap:10px;justify-items:end;text-align:right;min-width:150px}
.seats{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:150px}
.seats i{width:10px;height:10px;border-radius:50%;background:var(--line2)}.seats i.on{background:var(--rose)}
@media (max-width:700px){
  .hall-card{grid-template-columns:minmax(0,1fr);gap:16px}
  .hall-time{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}
  .hall-side{justify-items:start;text-align:left;min-width:0}.seats{justify-content:flex-start}
  .hall-side .row{justify-content:flex-start!important}
}
.hall-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--soft);border-color:transparent;box-shadow:none}
.hall-next h2{font-size:1.5rem}
@media (max-width:700px){.hall-next{grid-template-columns:minmax(0,1fr)}}
.hall-plan{display:grid;gap:10px;justify-items:start}
.hall-plan h3{font-size:1.1rem}

.hall-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center;background:var(--soft);border-color:transparent;box-shadow:none;padding:40px}
.hall-band h2{font-size:clamp(1.5rem,3vw,2rem)}
.hall-mini{display:grid;gap:12px}
.hall-mini .mini{display:grid;gap:2px;background:var(--surface);border-radius:18px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .18s}
.hall-mini .mini:hover{transform:translateY(-2px)}
.hall-mini .mini b{font-size:.92rem;color:var(--rose)}
@media (max-width:820px){.hall-band{grid-template-columns:minmax(0,1fr);padding:24px;gap:24px}}
.notice{background:var(--pg);color:var(--pgt);border-radius:14px;padding:10px 14px;font-size:.92rem}
.hall-link .row{margin-top:10px}.hall-link input{flex:1}
.stack>.pill,.sec>header>.pill,.card>.pill,.card.stack>.pill{justify-self:start;width:fit-content}

/* Study Hall growth loops */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--rose);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--ink)}
.hall-tools a{color:var(--rose)}
.hall-pulse{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink2);font-weight:600}
.hall-pulse i{width:10px;height:10px;border-radius:50%;background:var(--pink);border:2px solid var(--edge);flex:none}
.hall-pulse i.live{background:var(--good);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.hall-pulse i.live{animation:none}}
.hall-phrase{color:var(--ink2);font-style:italic}
.hall-card.focus{outline:3px solid var(--yellow);outline-offset:4px}
.hall-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hall-stats>div{display:grid;gap:2px;padding:14px 16px;border-radius:18px;background:var(--surface);border:2px solid var(--edge);box-shadow:3px 3px 0 var(--sh)}
.hall-stats b{font:800 1.8rem var(--display);letter-spacing:-.02em;line-height:1}
.hall-stats span{color:var(--ink2);font-size:.85rem}
.hall-stats .gift{background:var(--yellow);color:var(--on)}.hall-stats .gift span{color:var(--on)}
@media (max-width:640px){.hall-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.funnel>div{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:var(--soft)}
.funnel b{font:800 1.5rem var(--display);line-height:1}.funnel span{color:var(--ink2);font-size:.82rem}

/* Profile banner, media editors, lightbox */
.cover{position:relative;width:100%;aspect-ratio:3/1;border-radius:22px;overflow:hidden;background:var(--soft)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.sm{aspect-ratio:3/1;max-width:420px;border-radius:16px}
.cover-default{background:linear-gradient(120deg,var(--b1),var(--b2))}
.cover-default i{position:absolute;border-radius:50%;opacity:.7}
.cover-default .s1{width:36%;aspect-ratio:1;right:-6%;top:-40%;background:color-mix(in srgb,#fff 70%,transparent)}
.cover-default .s2{width:20%;aspect-ratio:1;left:8%;bottom:-38%;background:color-mix(in srgb,var(--pink) 55%,transparent)}
.cover-default .s3{width:9%;aspect-ratio:1;left:46%;top:18%;background:color-mix(in srgb,var(--yellow) 85%,transparent)}
.media-edit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.media-edit .media-pv{width:96px;display:grid;place-items:center}
.media-edit.kind-banner .media-pv{width:min(300px,34vw)}
.media-edit .avatar{width:96px;height:96px;font-size:2rem}
.banner-pv{width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:14px;display:block}
@media (max-width:640px){.media-edit,.media-edit.cover{grid-template-columns:minmax(0,1fr)}.media-edit.kind-banner .media-pv{width:100%}}
.crop.wide{aspect-ratio:3/1;border-radius:16px;width:100%}
.notice.bad{background:#fde7ec;color:#7a1130}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(20,10,16,.78);display:grid;place-items:center;padding:24px;animation:fade .15s ease-out}
.lightbox figure{margin:0;position:relative;display:grid;gap:10px;justify-items:center;max-width:min(92vw,980px)}
.lightbox img{max-width:100%;max-height:78vh;border-radius:20px;background:var(--soft);display:block;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox figcaption{color:#fff;font-weight:600}
.lb-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.zoomable{cursor:zoom-in;border:0;padding:0;background:none;display:block;border-radius:inherit}
.zoomable:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Lesson requests */
.dot-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;vertical-align:middle}
.slots{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.slot{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:12px;background:var(--soft)}
.slot .sd{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;background:#fff;flex:none}
.slot.accepted .sd{background:#c9f2d6}.slot.declined .sd{background:#ffd4d4}
.slot .st{display:grid;gap:2px;min-width:0}.slot .st small{color:var(--ink2)}
.req.approved{border-color:var(--ink)}
.slotq{padding:12px;border-radius:14px;background:var(--soft);display:grid;gap:8px}
.slotq .why{display:grid;gap:8px}
.seg{display:inline-flex;border-radius:99px;background:#fff;padding:3px;border:1.5px solid var(--edge)}
.seg button{border:0;background:none;padding:7px 14px;border-radius:99px;font-weight:700;cursor:pointer;color:var(--ink2);min-height:36px}
.seg button.on{background:var(--ink);color:#fff}
.slotq[data-accept="0"] .seg button.on{background:#c0392b}
.chip.sm{font-size:.8rem;padding:5px 10px}

/* Teacher page */
.tp-hero{position:relative;display:grid;gap:0}
.tp-hero .cover{border-radius:24px;aspect-ratio:3.2/1}
.tp-cover-btn{width:100%;border-radius:24px;overflow:hidden}
.tp-id{display:flex;align-items:flex-end;gap:16px;padding:0 20px;margin-top:-48px;position:relative;min-width:0}
.tp-av{flex:none;border-radius:50%;background:var(--surface);padding:5px;box-shadow:0 6px 18px rgba(24,19,28,.15);display:block}
.tp-av .avatar,.tp-av img.avatar{width:104px;height:104px;font-size:2.4rem;border-width:2px}
button.tp-av{cursor:zoom-in}
.tp-name{min-width:0;padding-bottom:6px}
.tp-name h1{font-size:clamp(1.7rem,4.5vw,2.5rem)}
.tp-head{color:var(--ink2);font-weight:600;margin-top:4px;text-wrap:balance}
.tp-meta{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 20px 0;align-items:center}
.tp-meta .meta{display:inline-flex;gap:6px;align-items:center;font-size:.95rem}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:28px;align-items:start;margin-top:22px}
.sec-h{font-size:1.45rem}
.bio{white-space:pre-line;color:var(--ink2);margin-top:8px}
.bio.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.lnk{background:none;border:0;padding:4px 0;font:inherit;font-weight:700;color:var(--rose);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sku{position:relative;display:grid;gap:8px;align-content:start;background:var(--surface);border:2px solid var(--edge);border-radius:20px;padding:16px 18px}
.sku.sel{background:var(--soft)}
.sku-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sku .price{font:800 1.35rem var(--display)}
.sku .row{margin-top:4px}
.sku.best{border-color:var(--rose);box-shadow:4px 4px 0 var(--sh)}
.ribbon{position:absolute;top:-11px;left:16px;background:var(--yellow);color:var(--on);border:2px solid var(--edge);border-radius:99px;font-size:.74rem;font-weight:800;padding:2px 10px}
.save{color:var(--good);font-weight:800}
.bk-card{position:sticky;top:84px;max-height:calc(100dvh - 104px);overflow:auto;overscroll-behavior:contain}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px}
.bk-top h3{font-size:1.35rem;margin-bottom:6px}
.x-m{display:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--edge);background:var(--surface);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.opt-label{font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.opt{box-shadow:none;border-radius:16px;padding:12px 14px}
.opt[aria-pressed="true"]{box-shadow:3px 3px 0 var(--sh);transform:none}
.count{margin-left:auto;font-weight:800;font-size:.9rem;background:var(--soft);border-radius:99px;padding:3px 12px}
.count.full{background:var(--yellow);color:var(--on)}
.daystrip .chip{position:relative}
.dotc{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:99px;background:var(--rose);color:#fff;font:800 .72rem/20px var(--body);text-align:center;font-style:normal}
:root[data-theme="dark"] .dotc{color:var(--on)}
.chip[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tchip{display:inline-flex;align-items:center;gap:6px;background:var(--pink);color:var(--on);border:2px solid var(--edge);border-radius:99px;padding:4px 6px 4px 12px;font-weight:700;font-size:.88rem}
.tchip button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(24,19,28,.12);cursor:pointer;font-size:1rem;line-height:1;color:inherit}
.empty-s{display:grid;gap:10px;justify-items:start}
.sum .list{display:grid;gap:2px;text-align:right}
.cta{margin-top:14px;font-size:1.05rem;padding:14px}
.why-n{margin-top:10px;color:var(--ink2)}
.promo summary{cursor:pointer;font-weight:700;margin-top:12px;font-size:.92rem}
.welcome-back{margin-bottom:14px;display:grid;gap:4px;justify-items:start}
.sent{display:grid;gap:12px;justify-items:start;padding:6px 0}
.sent-ic{width:52px;height:52px;border-radius:50%;background:var(--yellow);border:2px solid var(--edge);display:grid;place-items:center;font-size:1.6rem;font-weight:800;color:var(--on)}
.next{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink2)}
.tp-cta,.bk-back{display:none}
@media (max-width:960px){
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-hero .cover{aspect-ratio:2.4/1;border-radius:18px}
  .tp-id{padding:0 12px;margin-top:-40px;gap:12px}
  .tp-av .avatar,.tp-av img.avatar{width:84px;height:84px;font-size:2rem}
  .tp-meta{padding:12px 4px 0}
  .bk-wrap{display:none;position:fixed;inset:0;z-index:90}
  .bk-wrap.open{display:block}
  .bk-back{display:block;position:absolute;inset:0;background:rgba(24,19,28,.5);animation:fade .2s}
  .bk-card{position:absolute;left:0;right:0;bottom:0;top:auto;max-height:92dvh;border-radius:24px 24px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheet .25s ease-out}
  .x-m{display:grid;place-items:center;flex:none}
  .tp-cta{display:flex;position:fixed;z-index:45;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--edge);border-radius:20px;padding:10px 12px 10px 18px;box-shadow:4px 4px 0 var(--sh)}
  .tp-cta b{font:800 1.3rem var(--display)}
  body.sheet-open .tp-cta{display:none}
  body.sheet-open{overflow:hidden}
  .shop{grid-template-columns:minmax(0,1fr)}
}
@keyframes sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bk-card,.bk-back{animation:none}}

/* Sign-up return, welcome and tour */
.ctx-note{text-align:left}
.welcome .w-emoji{font-size:2.4rem;line-height:1}
.tour-veil{position:fixed;inset:0;z-index:200}
.tour-spot{position:fixed;z-index:201;border-radius:16px;box-shadow:0 0 0 9999px rgba(24,19,28,.55);outline:3px solid var(--yellow);pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s}
.tour-card{position:fixed;z-index:202;width:min(320px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:18px;padding:16px;box-shadow:4px 4px 0 var(--sh);display:grid;gap:8px}
.tour-card p{color:var(--ink2);font-size:.95rem}
.tour-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.tour-dots{display:flex;gap:5px;margin-right:auto}
.tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--mute)}.tour-dots i.on{background:var(--rose)}
@media (max-width:820px){.tp-cta{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}
@media (min-width:821px) and (max-width:960px){.tp-cta{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:none}}
.tp-id{align-items:flex-start}
.tp-name{padding-top:58px}
.ctx-note{margin-bottom:16px}
.chips>.small.muted{flex-basis:100%}
@media (max-width:960px){.tp-name{padding-top:48px}}

/* Booking dialog: one question at a time */
.bk-card{display:flex;flex-direction:column;gap:0;overflow:hidden;padding:0}
.wz-h{display:flex;align-items:center;gap:10px;padding:18px 20px 10px}
.wz-t{flex:1;min-width:0}
.wz-k{font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.wz-t h3{font-size:1.3rem;margin-top:2px}
.wz-back{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--edge);background:var(--surface);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.wz-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 20px 12px}
.wz-bar button{height:6px;border-radius:99px;border:0;padding:0;background:var(--mute);cursor:default}
.wz-bar button.on{background:var(--rose)}
.wz-bar button:not([disabled]){cursor:pointer}
.wz-b{padding:6px 20px 16px;display:grid;gap:12px;align-content:start;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;animation:stepin .22s ease-out}
.wz-f{padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--mute);display:grid;gap:10px;background:var(--surface)}
.wz-card .welcome-back,.bk-card .welcome-back{margin:0 20px 8px}
.wz-hint{margin:0}
.seg.wide{display:flex;width:100%}.seg.wide button{flex:1}
.cred{margin-top:4px}
.ltype select{width:100%}
.daychip{display:flex;align-items:center;gap:8px;justify-content:space-between;width:100%;text-align:left;font:inherit;font-weight:700;background:var(--soft);border:2px solid var(--edge);border-radius:14px;padding:10px 14px;cursor:pointer;color:var(--ink)}
.daychip span{color:var(--rose);font-weight:800;font-size:.85rem}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-h b{font:800 1.05rem var(--display);text-transform:capitalize}
.cal-n{width:40px;height:40px;border-radius:50%;border:2px solid var(--edge);background:var(--surface);font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
.cal-n[disabled]{opacity:.3;cursor:not-allowed}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-w span{text-align:center;font-size:.72rem;font-weight:800;color:var(--ink2);padding:2px 0 4px;text-transform:uppercase}
.cal-d{position:relative;aspect-ratio:1;min-height:40px;border:2px solid transparent;border-radius:12px;background:var(--soft);font:700 .95rem var(--body);color:var(--ink);cursor:pointer}
.cal-d:hover:not([disabled]){border-color:var(--edge)}
.cal-d[disabled]{background:none;color:var(--ink2);opacity:.35;cursor:not-allowed;font-weight:500}
.cal-d.today{border-color:var(--rose)}
.cal-d.has{background:var(--pink);color:var(--on);border-color:var(--edge)}
.cal-d i{position:absolute;top:-5px;right:-3px;min-width:18px;height:18px;border-radius:99px;background:var(--rose);color:#fff;font:800 .68rem/18px var(--body);font-style:normal;text-align:center}
:root[data-theme="dark"] .cal-d i{color:var(--on)}
.wz-f .tray{margin-top:0;max-height:96px;overflow:auto}
.wz-f .lnk{justify-self:start}
@keyframes stepin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wz-b{animation:none}}
@media (max-width:960px){
  .bk-card{max-height:92dvh;min-height:min(560px,80dvh);padding-bottom:0}
  .wz-h{padding-top:20px}
}
.x-m{margin-left:auto}

/* Study shelf */
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.shelf{display:grid;gap:16px;padding:22px;border-radius:26px;background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--yellow) 22%,var(--surface)));border:2px solid var(--edge)}
.books{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 12px;margin:0 -4px;-webkit-overflow-scrolling:touch}
.book{flex:0 0 min(240px,76%);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--edge);border-radius:20px;overflow:hidden;box-shadow:4px 4px 0 var(--sh);transition:transform .15s}
.book:hover{transform:translateY(-3px) rotate(-.4deg)}
.cover-b{position:relative;min-height:150px;padding:16px 16px 16px 26px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;color:var(--on);overflow:hidden}
.cover-b b{font:800 1.2rem/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance;position:relative;z-index:1}
.cover-b em{position:absolute;right:10px;top:8px;font-size:2.3rem;font-style:normal;opacity:.9}
.cover-b .book-tag{position:relative;z-index:1;align-self:flex-start;background:rgba(255,255,255,.75);border-radius:99px;padding:2px 10px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cover-b .spine{position:absolute;left:0;top:0;bottom:0;width:12px;background:rgba(24,19,28,.16)}
.c0 .cover-b{background:linear-gradient(150deg,#ffb4d0,#ff8fb8)}
.c1 .cover-b{background:linear-gradient(150deg,#ffe27a,#ffd84a)}
.c2 .cover-b{background:linear-gradient(150deg,#fff,#ffeaf2)}
.c3 .cover-b{background:linear-gradient(150deg,#2a2030,#18131C);color:#ffd6e7}
.c3 .cover-b .book-tag{color:var(--on)}
.book-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.book-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink2)}
.book .price{font:800 1.3rem var(--display)}
@media (min-width:961px){.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));overflow:visible}.book{flex:none}}
@media (max-width:960px){.shelf{padding:18px 16px;border-radius:22px}}

/* Jump chips + hero chip */
.tp-jump{display:flex;gap:8px;overflow-x:auto;padding:14px 20px 2px;scrollbar-width:none}
.tp-jump::-webkit-scrollbar{display:none}
.tp-jump button{flex:none;font:700 .9rem var(--body);background:var(--surface);color:var(--ink);border:2px solid var(--mute);border-radius:99px;padding:8px 14px;cursor:pointer;min-height:40px}
.tp-jump button:hover{border-color:var(--edge)}
.tp-jump button.hot{background:var(--yellow);color:var(--on);border-color:var(--edge)}
.tp-jump i{font-style:normal;background:var(--ink);color:#fff;border-radius:99px;padding:0 7px;font-size:.78rem;margin-left:4px}
:root[data-theme="dark"] .tp-jump i{color:var(--on);background:var(--yellow)}
.lnk-meta{background:var(--soft);border:0;border-radius:99px;padding:5px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.lnk-meta:hover{outline:2px solid var(--edge)}
#shop,#materials,#courses,#reviews{scroll-margin-top:92px}
@media (max-width:960px){.tp-jump{padding:12px 4px 2px}}
.wz-b textarea{min-height:64px;height:64px;resize:none}
.wz-b .sum{padding:12px 14px;gap:8px}
.wz-b .why-n{margin:0}
.wz-b .err:empty{display:none}
@media (max-width:960px){.bk-card{min-height:min(520px,78dvh)}}

/* ---------- Plaza: free tools ---------- */
.plz-hero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center;padding:clamp(22px,4vw,44px)}
.plz-hero h1{font-size:clamp(2rem,5.4vw,3.4rem)}
.plz-hero p{max-width:44ch}
.plz-bird{width:100%}
.plz-bird .mascot{width:100%;height:auto;animation:plzfloat 4s ease-in-out infinite}
@keyframes plzfloat{50%{transform:translateY(-8px) rotate(-2deg)}}
.plz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}
.plz-tile{display:grid;align-content:start;gap:8px;text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;min-width:0}
.plz-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-up);border-color:var(--pink)}
.plz-tile:active{transform:translateY(0)}
.plz-tile h3{margin-top:2px}
.plz-tile .pill{justify-self:start}
.plz-tile.alt{background:var(--pp);border-color:transparent}
.plz-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--soft);font-size:1.7rem;line-height:1}
.plz-ic.sm{width:40px;height:40px;font-size:1.3rem;border-radius:12px;flex:none}
.plz-head{display:grid;gap:10px;margin-bottom:22px}
.plz-head h1{font-size:clamp(1.8rem,4.6vw,2.6rem)}
.plz-head>.row{align-items:center}
.plz-more{margin-top:56px}
.plz-about{display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.plz-next{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:6px}
.plz-next .stack{flex:1 1 18rem}
.plz-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.free-strip .plz-tile{padding:16px}
.free-strip .plz-ic{width:44px;height:44px;font-size:1.4rem}
@media (max-width:900px){.plz-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .plz-hero{grid-template-columns:1fr}.plz-bird{width:130px;order:-1}
  .plz-grid{grid-template-columns:1fr}
  .plz-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .plz-strip .plz-tile p{display:none}
  .plz-next{padding:18px}
}
/* word game */
.wd-wrap{max-width:430px;margin-inline:auto;gap:14px}
.wd-board{display:grid;gap:6px;justify-content:center}
.wd-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wd-t{display:grid;place-items:center;width:clamp(48px,14.5vw,62px);aspect-ratio:1;border:2px solid var(--line2);border-radius:12px;font:800 clamp(1.4rem,6vw,1.9rem) var(--display);text-transform:uppercase;background:var(--surface);color:var(--ink);transition:transform .12s}
.wd-t.on{border-color:var(--edge);transform:scale(1.04)}
.wd-t.hit{background:var(--good);border-color:var(--good);color:#fff}
.wd-t.near{background:var(--yellow);border-color:var(--yellow);color:var(--on)}
.wd-t.miss{background:var(--mute);border-color:var(--mute);color:var(--ink2)}
:root[data-theme="dark"] .wd-t.hit{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wd-t.hit{color:var(--on)}}
.wd-msg{min-height:1.6em;text-align:center;font-weight:700;color:var(--rose)}
.wd-kb{display:grid;gap:6px}
.wd-kr{display:flex;gap:5px;justify-content:center}
.wd-k{flex:1 1 0;max-width:42px;min-width:0;height:50px;border:0;border-radius:10px;background:var(--soft);color:var(--ink);font:700 1.05rem var(--body);text-transform:uppercase;cursor:pointer;padding:0;touch-action:manipulation}
.wd-k.wide{flex:1.6 1 0;max-width:68px;font-size:.85rem}
.wd-k:active{transform:scale(.94)}
.wd-k.hit{background:var(--good);color:#fff}.wd-k.near{background:var(--yellow);color:var(--on)}.wd-k.miss{background:var(--mute);color:var(--ink2);opacity:.7}
:root[data-theme="dark"] .wd-k.hit{color:var(--on)}
.wd-end{text-align:center;justify-items:center}
.wd-end .row{justify-content:center}
.wd-answer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.wd-answer b{font:800 clamp(2rem,9vw,2.8rem) var(--display);letter-spacing:.02em;text-transform:uppercase}
/* conjugator */
.cj-search input{font-size:1.1rem}
.cj-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cj-head h2{font-size:clamp(1.8rem,5vw,2.6rem)}
.cj-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:thin}
.cj-tabs .chip{flex:none}
.cj-t{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cj-r{display:grid;grid-template-columns:7.2rem 1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.cj-r:last-child{border-bottom:0}.cj-r:nth-child(odd){background:var(--soft)}
.cj-r b{font:700 1.15rem var(--display);overflow-wrap:anywhere}
.cj-p{color:var(--ink2);font-size:.9rem}
.cj-n{justify-self:end}
.cj-s{border:0;background:none;color:var(--rose);cursor:pointer;padding:6px;border-radius:10px;display:grid;place-items:center}
.cj-s:hover{background:var(--pp)}
.cj-q{display:grid;gap:8px;justify-items:center;text-align:center}
.cj-q h2{font-size:clamp(1.5rem,5vw,2.2rem)}.cj-who{color:var(--rose)}
.cj-ok{background:var(--pgo)!important;color:var(--pgot)}.cj-no{background:var(--pr)!important;color:var(--prt)}
.cj-ok,.cj-no{padding:14px 16px;border-radius:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cj-miss{padding:8px 12px;border-radius:12px;background:var(--soft)}
@media (max-width:560px){.cj-r{grid-template-columns:5.6rem 1fr auto;padding:10px}.cj-n{display:none}}
/* say it */
.say-big{font:700 1.4rem var(--display)!important;min-height:52px}
.say-card{gap:16px}
.say-out{display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--soft)}
.say-w{font:800 clamp(1.4rem,4.4vw,2rem)/1.2 var(--display);overflow-wrap:anywhere}
.say-tabs{flex-wrap:nowrap;overflow-x:auto}.say-tabs .chip{flex:none}
.say-big-n{font:800 1.6rem var(--display)}
/* keyboard tool */
.kb-keys{display:flex;flex-wrap:wrap;gap:8px}
.kb-key{min-width:46px;height:50px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);font:700 1.3rem var(--body);cursor:pointer}
.kb-key:hover{background:var(--pp)}.kb-key:active{transform:scale(.94)}
/* phrasebooks, slang */
.ph-list,.sl-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.ph-item,.sl-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}
.ph-item:last-child,.sl-item:last-child{border-bottom:0}
.ph-say{width:42px;height:42px;border-radius:50%;border:0;background:var(--pp);color:var(--ppt);display:grid;place-items:center;cursor:pointer;flex:none}
.ph-say:hover{background:var(--pink);color:var(--on)}
.ph-es{font:700 1.15rem/1.35 var(--display)}
.ph-en{font-size:.98rem;margin-top:2px}
.ph-tip{margin-top:6px;color:var(--ink2)}
.ph-reveal{margin-top:4px;border:1.5px dashed var(--line2);background:none;color:var(--ink2);border-radius:10px;padding:4px 10px;font:600 .88rem var(--body);cursor:pointer}
.ph-save{min-width:40px;padding-inline:0!important;font-size:1.1rem}
.sl-w{font:800 1.15rem var(--display);color:var(--rose)}
/* how do they say it */
.dx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dx-card{padding:18px}
.dx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.dx-c{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--soft);min-width:0}
.dx-c.none{background:none;border:1px dashed var(--line2)}
.dx-f{font-size:1.2rem;flex:none}
.dx-w{border:0;background:none;font:700 .98rem var(--body);color:var(--ink);text-align:left;cursor:pointer;padding:0;overflow-wrap:anywhere}
.dx-w:hover{color:var(--rose);text-decoration:underline}
.dx-c.none .muted{font-size:.9rem}
.dx-note{margin-top:10px;color:var(--ink2)}
/* sentence checker */
.ck-line{font:800 clamp(1.3rem,4vw,1.8rem)/1.3 var(--display);padding:14px 16px;border-radius:16px;background:var(--pgo);color:var(--pgot)}
.ck-fix{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--soft)}
/* admin spark bars */
.spark{display:flex;align-items:flex-end;gap:3px;height:96px}
.spark span{flex:1;min-width:3px;background:var(--pink);border-radius:4px 4px 0 0}
@media (prefers-reduced-motion:reduce){.plz-bird .mascot{animation:none}.plz-tile{transition:none}}
.plz-head.compact{margin-bottom:10px;gap:6px}
.plz-head.compact>p{display:none}
.plz-head.compact h1{font-size:1.6rem}
@media (max-width:640px){
  .wd-wrap{gap:10px}
  .wd-t{width:clamp(44px,13vw,54px);border-radius:10px}
  .wd-k{height:46px}
  .wd-board,.wd-row{gap:5px}
}
input[type=search]{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:14px;padding:11px 14px;min-height:48px;width:100%;min-width:0}
input[type=search]:focus{outline:3px solid var(--focus);outline-offset:1px}
.spark span{max-width:28px}

/* ---------- Study Hub ---------- */
.hub-hero{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:20px;align-items:center;margin-bottom:22px}
.hub-hero h1{font-size:clamp(2rem,5vw,3rem);margin:8px 0 6px}
.hub-hero p{max-width:52ch}
.hub-bird .mascot{width:100%;height:auto}
.hub-today{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.hub-col h2{font-size:1.35rem}
.hub-side{gap:12px}
.hub-stat{display:grid;gap:4px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.hub-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.hub-stat .btn{justify-self:start;margin-top:6px}
.hub-num{font:800 2rem/1.1 var(--display)}
.hub-step{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--soft);cursor:pointer}
.hub-step input{width:20px;height:20px;accent-color:var(--rose)}
.hub-step.done b{text-decoration:line-through;color:var(--ink2)}
.hub-step.late{box-shadow:inset 3px 0 0 var(--rose)}
.late-t{color:var(--rose);font-weight:700}
.hub-bars{display:grid;gap:10px;margin-top:6px}
.hub-bar{display:grid;gap:4px;text-decoration:none;color:inherit}
.meter{display:block;height:8px;border-radius:99px;background:var(--mute);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--rose));border-radius:99px;transition:width .3s}
.meter.big{height:12px}
.hub-run{display:flex;gap:10px;align-items:center;flex-wrap:wrap;text-decoration:none;color:inherit;margin-bottom:16px;border-color:var(--pink)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 0 var(--rose);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hub-sync{margin-top:14px}
/* planner */
.pl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pl-card{display:grid;gap:10px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.pl-steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pl-step{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--soft)}
.pl-step input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--rose)}
.pl-step label{cursor:pointer}
.pl-txt{display:grid;gap:2px;min-width:0}
.pl-step.done{opacity:.6}.pl-step.done b{text-decoration:line-through}
.pl-step.today{box-shadow:inset 3px 0 0 var(--yellow)}
.pl-step.late{box-shadow:inset 3px 0 0 var(--rose)}
.pl-tip{margin-top:6px;color:var(--ink2)}
.pl-date{display:inline-flex;align-items:center;gap:6px}
.pl-date input{width:auto;min-height:36px;padding:4px 8px}
.row.wrap{flex-wrap:wrap}
/* focus */
.fc-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.fc-main{gap:18px}
.fc-ring{position:relative;width:min(280px,72vw);aspect-ratio:1;margin-inline:auto}
.fc-ring svg{width:100%;height:100%}
.fc-ring circle{fill:none;stroke-width:12}
.fc-ring .bg{stroke:var(--mute)}
.fc-ring .fg{stroke:var(--rose);stroke-linecap:round;transition:stroke-dashoffset .5s linear}
.fc-ring.break .fg{stroke:var(--good)}
.fc-time{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px}
.fc-time span:first-child{font:800 clamp(2.6rem,11vw,3.6rem)/1 var(--display);font-variant-numeric:tabular-nums}
.fc-task{text-align:center;font-weight:600;min-height:1.4em}
.fc-go{font-size:1.1rem;padding-inline:28px}
.fc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc-nums div{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--soft)}
.fc-nums b{font:800 1.15rem var(--display)}
.fc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:110px;align-items:end}
.fc-week div{display:grid;grid-template-rows:1fr auto;height:100%;gap:4px;justify-items:center}
.fc-week span{align-self:end;width:100%;max-width:26px;min-height:3px;border-radius:6px 6px 2px 2px;background:var(--mute)}
.fc-week span.on{background:var(--pink)}
.fc-week i{font-style:normal;font-size:.75rem;color:var(--ink2)}
.fc-hall{padding:8px 10px;border-radius:12px;background:var(--soft);text-decoration:none;color:inherit}
.fc-word{padding:10px;border-radius:12px;background:var(--surface)}
.fpill{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--bg);font:700 1rem var(--body);font-variant-numeric:tabular-nums;text-decoration:none;box-shadow:var(--shadow-up)}
.fpill.brk{background:var(--good);color:#fff}
@media (min-width:900px){.fpill{bottom:24px}}
/* flashcards */
.cd-list{list-style:none;margin:0;padding:0;display:grid}
.cd-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.cd-list li:last-child{border-bottom:0}
.cd-f{font-weight:700;overflow-wrap:anywhere}.cd-b{overflow-wrap:anywhere}
.cd-box{font-size:.6rem;letter-spacing:1px;color:var(--rose);white-space:nowrap}
.cd-study{display:grid;gap:14px;max-width:560px;margin-inline:auto;width:100%}
.cd-card{display:grid;place-content:center;gap:14px;min-height:260px;padding:28px;border-radius:24px;border:1.5px solid var(--line2);background:var(--surface);box-shadow:var(--shadow);font:inherit;color:inherit;cursor:pointer;text-align:center}
.cd-card.flip{border-color:var(--pink)}
.cd-front{font:800 clamp(1.4rem,5vw,2rem)/1.25 var(--display);overflow-wrap:anywhere}
.cd-back{font-size:1.15rem;padding-top:14px;border-top:1px dashed var(--line2);overflow-wrap:anywhere}
.cd-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-grade .btn{justify-content:center}
kbd{font:600 .75rem var(--body);padding:1px 6px;border-radius:6px;border:1px solid var(--line2);opacity:.7;margin-left:6px}
@media (hover:none){kbd{display:none}}
/* grades */
.gr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.gr-title{font:700 1.15rem var(--display)!important}
.gr-head,.gr-row{display:grid;grid-template-columns:minmax(0,1fr) 6.2rem 6.2rem 2.4rem;gap:8px;align-items:center}
.gr-num{display:flex;align-items:center;gap:4px}
.gr-num input{min-width:0;width:100%}
.gr-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gr-big div{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--soft)}
.gr-big .hub-num{font-size:1.6rem}
.gr-lines{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.gr-line{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:10px 12px;border-radius:12px;background:var(--soft)}
.gr-line>span:last-child{margin-left:auto;font-weight:700}
.gr-line.ok>span:last-child{color:var(--pgot)}
.gr-line.hard>span:last-child{color:var(--ink)}
.gr-line.no>span:last-child{color:var(--rose)}
.gr-warn{padding:8px 12px;border-radius:12px;background:var(--py,var(--soft))}
@media (max-width:860px){.hub-today,.fc-grid,.gr-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .hub-hero{grid-template-columns:1fr 72px}
  .gr-head,.gr-row{grid-template-columns:minmax(0,1fr) 4.6rem 4.6rem 2rem;gap:6px}
  .gr-big .hub-num{font-size:1.3rem}
  .cd-list li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;}
  .cd-box{display:none}
}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}.fc-ring .fg,.meter i{transition:none}}
.pl-detail>*,.hub-col>*,.fc-main>*,.gr-grid>*{min-width:0}
.pl-detail>.row{flex-wrap:wrap}
.pl-detail form[data-form=addstep]{flex-wrap:wrap!important}
.pl-detail form[data-form=addstep] input[name=name]{flex:1 1 12rem!important}
.pl-step{min-width:0}
.gr-row input{padding:10px 10px!important;min-height:44px!important}
@media (max-width:640px){.gr-num span{display:none}.gr-head,.gr-row{grid-template-columns:minmax(0,1fr) 3.9rem 3.9rem 2rem}.gr-row input{padding:10px 6px!important;text-align:center}.gr-row input[data-in=pname]{text-align:left}}

/* ---------- explainer videos ---------- */
.xp-pill{display:inline-flex;align-items:center;gap:8px;margin:10px 0 2px;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 .88rem var(--body);cursor:pointer;position:relative;vertical-align:middle;transition:border-color .15s,transform .15s}
.xp-pill:hover{border-color:var(--rose);transform:translateY(-1px)}
.xp-pill:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.xp-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:var(--on);padding-left:2px}
.xp-d{color:var(--ink2);font-weight:500;font-variant-numeric:tabular-nums}
.xp-pill.new::after{content:'';position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px var(--surface)}
.modal.xp-modal{width:min(960px,calc(100vw - 32px));max-width:none;padding:18px}
.xp{display:grid;gap:12px}
.xp-top h3{font-size:1.15rem}
.xp-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#FFF4F8}
.xp-frame video{width:100%;height:100%;display:block;background:#FFF4F8}
.xp-frame video::cue{font:600 1.05rem/1.35 var(--body);background:rgba(24,19,28,.82);color:#fff}
.xp-foot{flex-wrap:wrap;gap:8px}
@media (max-width:640px){.modal.xp-modal{padding:12px}.xp-foot .small{display:none}}
@media (prefers-reduced-motion:reduce){.xp-pill{transition:none}}
@media (max-width:640px){.xp-frame video::cue{font-size:.72rem;line-height:1.3}}

/* ---- two clocks: your time and the teacher's, side by side ---- */
.zn{display:grid;gap:6px;margin-top:12px;padding:12px 14px;border:1.5px solid var(--line,#1a1a1a22);border-radius:16px;background:var(--soft,#fff7fa)}
.zn>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.zn .zl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);min-width:64px}
.zn b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.zt{color:var(--ink2);font-size:.85rem}
.tzbar{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:60;max-width:520px;margin:0 auto;background:var(--surface);border:2px solid var(--edge);border-radius:18px;box-shadow:0 6px 0 var(--sh);padding:14px 16px;display:grid;gap:10px}
.tzbar p{margin:0;font-size:.92rem;line-height:1.4}
@media (min-width:900px){.tzbar{bottom:20px;left:auto;right:20px;margin:0}}

/* ---- Use a credit ---- */
.credchip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:2px solid var(--edge);border-radius:999px;background:var(--yellow);font-weight:800;font-size:.85rem;text-decoration:none;color:var(--on);box-shadow:0 2px 0 var(--sh)}
.hub-credit{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-bottom:14px;background:linear-gradient(135deg,var(--soft),color-mix(in srgb,var(--yellow) 18%,var(--surface)))}
.hub-credit>div{flex:1;min-width:0}
.cr{display:grid;gap:22px;max-width:640px;padding-bottom:110px}
.cr-sub{margin:0}
.cr-sec{display:grid;gap:12px}
.cr-h{font-size:1.15rem;display:flex;align-items:center;gap:10px;margin:0}
.cr-h span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.8rem}
.cr-people{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity}
.cr-p{flex:0 0 auto;display:grid;justify-items:center;gap:4px;min-width:96px;padding:12px 10px;border:2px solid var(--mute);border-radius:18px;background:var(--surface);scroll-snap-align:start;cursor:pointer;font:inherit}
.cr-p[aria-checked=true]{border-color:var(--edge);background:var(--soft);box-shadow:0 3px 0 var(--edge)}
.cr-p small{color:var(--ink2)}
.cr-days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.cr-d{position:relative;flex:0 0 auto;display:grid;justify-items:center;gap:0;width:64px;padding:8px 4px 10px;border:2px solid var(--mute);border-radius:16px;background:var(--surface);cursor:pointer;font:inherit;scroll-snap-align:start}
.cr-d b{font-size:1.35rem;line-height:1.1}
.cr-d small{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.cr-d i{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--yellow);border:1.5px solid var(--edge);font-style:normal;font-size:.7rem;font-weight:800;display:grid;place-items:center}
.cr-d[aria-selected=true]{border-color:var(--edge);background:var(--pink);box-shadow:0 3px 0 var(--edge)}
.cr-part{display:grid;gap:6px}
.cr-part small{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.cr-bar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-top:2px solid var(--edge)}
.cr-bar>div{min-width:0}
.cr-err{position:fixed;left:16px;right:16px;bottom:calc(132px + env(safe-area-inset-bottom,0px));z-index:51}
@media (min-width:900px){.cr-bar{position:sticky;bottom:12px;border:2px solid var(--edge);border-radius:18px;box-shadow:0 4px 0 var(--sh)}.cr-err{position:static}}
.cr-done{text-align:center;display:grid;gap:10px;justify-items:center;padding:28px 18px}

/* ---- admin: Today ---- */
.cc{display:grid;gap:16px}
.cc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--mute);border-radius:16px;text-decoration:none;color:inherit;background:var(--surface)}
.cc-row.r{border-color:var(--edge);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}.cc-row.y{background:color-mix(in srgb,var(--yellow) 22%,var(--surface))}.cc-row.g{background:color-mix(in srgb,var(--good) 16%,var(--surface))}
.cc-row>span:nth-child(2){flex:1;min-width:0;display:grid}
.cc-n{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--bg)}
.cc-chart{width:100%;height:auto;margin-top:8px}
.fns{display:grid;gap:8px;margin-top:10px}.fn{position:relative;display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:12px;overflow:hidden;font-size:.9rem}
.fn-bar{position:absolute;inset:0 auto 0 0;background:var(--pink);opacity:.55;z-index:0;border-radius:12px}.fn>span,.fn>b{position:relative;z-index:1}
.cc-health{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.cc-health>div{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--soft)}.cc-health .ok>span{color:var(--good)}.cc-health .bad{background:color-mix(in srgb,var(--bad) 14%,var(--surface))}.cc-health .bad>span{color:var(--bad)}
.up{color:var(--good);font-weight:700}.down{color:var(--bad);font-weight:700}

/* ================= Practice: path page ================= */
.pa-head{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pa-title h1{font-size:clamp(2rem,6vw,3rem)}.pa-title p{max-width:44ch}
.pa-stats{display:flex;align-items:center;gap:18px}
.pa-st{display:grid;line-height:1.15;text-align:center}.pa-st b{font:800 1.25rem var(--display)}.pa-st small{color:var(--ink2);font-size:.75rem;font-weight:700}
.ring b small{font-size:.7rem;color:var(--ink2);font-weight:700}
.pa-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 18px;padding:2px;position:sticky;top:0;z-index:5;background:var(--bg)}
.pa-tabs::-webkit-scrollbar{display:none}
.pa-tabs button{flex:none;font:700 .95rem var(--body);padding:9px 16px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;min-height:44px;position:relative}
.pa-tabs button[aria-selected=true]{background:var(--pink);color:var(--on);box-shadow:2px 2px 0 var(--sh)}
.pa-tabs i{font-style:normal;margin-left:6px;background:var(--yellow);color:var(--on);border-radius:999px;padding:1px 7px;font-size:.78rem;border:1.5px solid var(--edge)}
.pa-grid{display:grid;gap:18px}
.pa-side{display:grid;gap:14px;align-content:start}
.pa-units{display:grid;gap:18px;min-width:0}
@media (min-width:980px){.pa-grid{grid-template-columns:minmax(300px,380px) 1fr;gap:28px;align-items:start}.pa-side{position:sticky;top:64px}}
.pa-mission ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pa-mission li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;font-weight:600}
.pa-mission li small{color:var(--ink2);font-weight:700}
.pa-tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;font-size:.8rem;font-weight:800;background:var(--surface)}
.pa-mission li.on .pa-tick{background:var(--yellow);color:var(--on)}.pa-mission li.on span:nth-child(2){text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink2)}
.pa-mission.ok{background:var(--soft)}
.pa-cont{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.pa-cont .btn{grid-column:1/-1;width:100%}
.pa-cont-t small{font-weight:700;opacity:.8}.pa-cont-t h2{font-size:1.35rem;margin:2px 0}
.pa-lv{font:800 .85rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.pa-unit{display:grid;gap:8px}
.pa-ub{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--pink);color:var(--on);border:2px solid var(--edge);border-radius:22px;padding:14px 16px;box-shadow:4px 4px 0 var(--sh)}
.pa-ub small{font-weight:800;opacity:.75;letter-spacing:.06em}.pa-ub h2{font-size:1.35rem}.pa-ub p{font-size:.9rem;margin-top:2px;max-width:46ch}
.pa-uc{display:grid;gap:6px;justify-items:end}
@media (max-width:560px){.pa-ub{grid-template-columns:auto 1fr}.pa-uc{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;justify-items:stretch}}
.pa-trail{display:grid;gap:10px;padding:8px 0 4px}
.pa-node{display:flex;align-items:center;gap:14px;margin-left:var(--x);width:fit-content;max-width:calc(100% - var(--x));background:none;border:0;padding:4px;cursor:pointer;color:var(--ink);text-align:left;font:inherit;border-radius:20px}
.pa-dot{width:68px;height:68px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface);border:3px solid var(--edge);box-shadow:0 5px 0 var(--sh);transition:transform .12s,box-shadow .12s;font:800 1.4rem var(--display)}
.pa-node.done .pa-dot{background:var(--yellow)}.pa-node.cur .pa-dot{background:var(--pink);animation:paPulse 2s ease-in-out infinite}
.pa-node:hover .pa-dot{transform:translateY(-2px)}.pa-node:active .pa-dot{transform:translateY(4px);box-shadow:0 1px 0 var(--sh)}
.pa-node:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pa-lbl{display:grid;line-height:1.2;min-width:0}.pa-lbl b{font-weight:800}.pa-lbl small{color:var(--ink2);font-weight:700;letter-spacing:.04em}
.pa-node.done .pa-lbl small{color:var(--rose);font-size:.95rem}
@keyframes paPulse{0%,100%{box-shadow:0 5px 0 var(--sh),0 0 0 0 color-mix(in srgb,var(--rose) 45%,transparent)}50%{box-shadow:0 5px 0 var(--sh),0 0 0 12px color-mix(in srgb,var(--rose) 0%,transparent)}}
.pa-more{display:grid;gap:8px;justify-items:start}
.pa-guest{display:grid;gap:8px;justify-items:start}
.pa-rev .row.between{gap:14px;align-items:center}.pa-rev .btn{flex:none}
@media (max-width:560px){.pa-rev .row.between{flex-direction:column;align-items:stretch}}
.pa-bank{display:grid;gap:8px;margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pa-lw{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:16px;padding:10px 12px;cursor:pointer;min-height:54px}
.pa-lw span{display:grid;line-height:1.25;min-width:0}.pa-lw small{color:var(--ink2);font-weight:600}
.pa-box{display:flex;gap:3px}.pa-box u{width:7px;height:16px;border-radius:3px;background:var(--mute);border:1.5px solid var(--edge);display:block}.pa-box u.on{background:var(--yellow)}
.pa-guide{display:grid;gap:10px;max-width:640px}.pa-guide h3{margin-top:6px}
.pa-guide p{max-width:60ch}
.pa-wordgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pa-wordgrid button{display:grid;text-align:left;gap:0;font:inherit;color:var(--ink);background:var(--soft);border:1.5px solid var(--edge);border-radius:12px;padding:8px 10px;cursor:pointer;line-height:1.25}
.pa-wordgrid small{color:var(--ink2)}

/* ================= Practice: lesson player ================= */
body.pl-open{overflow:hidden}
.pl{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);animation:plIn .22s ease-out;outline:0}
@keyframes plIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pl-top{display:flex;align-items:center;gap:12px;padding:12px max(14px,env(safe-area-inset-left,0px)) 6px max(14px,env(safe-area-inset-right,0px));width:100%;max-width:760px;margin:0 auto}
.pl-x{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid var(--edge);background:var(--surface);color:var(--ink);font-size:1.1rem;cursor:pointer}
.pl-bar{flex:1;height:14px;border-radius:99px;background:var(--mute);border:2px solid var(--edge);overflow:hidden}
.pl-bar i{display:block;height:100%;background:var(--rose);border-radius:99px;transition:width .35s cubic-bezier(.3,1.4,.5,1)}
.pl-n{font-weight:800;font-size:.85rem;color:var(--ink2);min-width:2.6em;text-align:right}
.pl-main{flex:1;overflow:auto;width:100%;max-width:760px;margin:0 auto;padding:18px max(18px,env(safe-area-inset-left,0px)) 24px max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}
.pl-q{font-size:clamp(1.35rem,4.5vw,1.9rem)}
.pl-retry{display:inline-block;margin-left:10px;font:800 .75rem var(--body);background:var(--yellow);color:var(--on);border:1.5px solid var(--edge);border-radius:99px;padding:2px 9px;vertical-align:middle;letter-spacing:.04em}
.pl-word{display:flex;align-items:center;gap:12px;font:800 clamp(1.7rem,6vw,2.4rem) var(--display)}
.pl-say{display:flex;gap:10px;align-items:center}
.pl-spk{width:46px;height:46px;border-radius:50%;border:2px solid var(--edge);background:var(--pink);color:var(--on);display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--sh);flex:none}
.pl-spk.big{width:84px;height:84px}.pl-spk.big svg{width:38px;height:38px}.pl-spk.sm{width:34px;height:34px;box-shadow:none}.pl-spk.sm svg{width:18px;height:18px}
.pl-slow{width:46px;height:46px;border-radius:50%;border:2px solid var(--edge);background:var(--surface);font-size:1.2rem;cursor:pointer}
.pl-opts{display:grid;gap:10px}
.pl-opt{display:flex;align-items:center;gap:12px;text-align:left;font:700 1.08rem var(--body);color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:16px;padding:14px 16px;cursor:pointer;min-height:58px;box-shadow:0 3px 0 var(--sh);transition:transform .1s}
.pl-opt kbd{font:800 .8rem var(--body);width:26px;height:26px;border-radius:8px;border:1.5px solid var(--edge);display:grid;place-items:center;flex:none;color:var(--ink2);background:var(--soft)}
@media (hover:none){.pl-opt kbd{display:none}}
.pl-opt.on{background:var(--soft);border-color:var(--rose);box-shadow:0 3px 0 var(--rose)}
.pl-opt.ok{background:color-mix(in srgb,var(--good) 22%,var(--surface));border-color:var(--good);box-shadow:0 3px 0 var(--good)}
.pl-opt.no{background:color-mix(in srgb,var(--bad) 20%,var(--surface));border-color:var(--bad);box-shadow:0 3px 0 var(--bad);animation:plShake .35s}
.pl-opt:disabled{cursor:default;color:var(--ink)}
@keyframes plShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pl-sent{font:700 clamp(1.25rem,4.5vw,1.7rem) var(--display);line-height:1.3}.pl-sent.en{color:var(--ink2);font-family:var(--body);font-weight:600}
.pl-hint{color:var(--ink2);font-size:.95rem}.pl-heard{font-size:1.05rem}
.pl-gap{display:inline-block;min-width:4.5ch;margin:0 4px;padding:0 8px;border-bottom:3px solid var(--edge);text-align:center;color:var(--rose);vertical-align:baseline}
.pl-gap.ok{color:var(--good)}.pl-gap.no{color:var(--bad)}
.pl-line{min-height:64px;border-bottom:2px solid var(--mute);border-top:2px solid var(--mute);padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pl-ph{color:var(--ink2)}
.pl-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pl-tok{font:700 1.05rem var(--body);padding:10px 14px;border-radius:14px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;min-height:46px;box-shadow:0 3px 0 var(--sh)}
.pl-tok.on{background:var(--soft)}.pl-tok.ghost{background:var(--mute);border-color:transparent;box-shadow:none;color:transparent;cursor:default}
.pl-in{width:100%;font:700 1.25rem var(--body);padding:14px 16px;border-radius:16px;border:2px solid var(--edge);background:var(--surface);color:var(--ink)}
.pl-in:focus{outline:3px solid var(--focus);outline-offset:1px}.pl-in.ok{border-color:var(--good)}.pl-in.no{border-color:var(--bad)}
.pl-keys{display:flex;flex-wrap:wrap;gap:6px}.pl-keys button{min-width:42px;height:42px;border-radius:12px;border:2px solid var(--edge);background:var(--soft);color:var(--ink);font:800 1.1rem var(--body);cursor:pointer}
.pl-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pl-match>div{display:grid;gap:10px;align-content:start}
.pl-card{font:700 1rem var(--body);padding:14px 10px;border-radius:14px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;min-height:58px;box-shadow:0 3px 0 var(--sh);overflow-wrap:anywhere}
.pl-card.on{background:var(--soft);border-color:var(--rose);box-shadow:0 3px 0 var(--rose)}
.pl-card.gone{opacity:.28;box-shadow:none;border-style:dashed}.pl-card.shake{animation:plShake .35s;border-color:var(--bad)}
.pl-mic{display:grid;justify-items:center;gap:8px;margin-top:6px}
.pl-micb{width:96px;height:96px;border-radius:50%;border:3px solid var(--edge);background:var(--pink);color:var(--on);display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 0 var(--sh)}
.pl-micb.rec{background:var(--bad);color:#fff;animation:paPulse 1.2s infinite}
.pl-skip{justify-self:center;margin-top:4px}
.pl-learn{display:grid;gap:10px}
.pl-lw{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:16px;padding:12px 14px;cursor:pointer;animation:plRise .35s both;animation-delay:var(--d,0ms)}
.pl-lw b{font:800 1.15rem var(--display);display:block}.pl-lw small{color:var(--ink2);font-weight:600;display:block}.pl-lws{color:var(--rose)}.pl-lw.sm{animation:none}
@keyframes plRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pl-foot{width:100%;padding:12px max(16px,env(safe-area-inset-left,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));border-top:2px solid var(--mute);background:var(--bg);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.pl-foot>*{max-width:728px;width:100%;margin-inline:auto}
.pl-foot.right{background:color-mix(in srgb,var(--good) 18%,var(--bg));border-top-color:var(--good)}
.pl-foot.wrong{background:color-mix(in srgb,var(--bad) 16%,var(--bg));border-top-color:var(--bad)}
.pl-fb{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pl-fb b{font:800 1.2rem var(--display)}.pl-fb span{font-weight:600}
.pl-foot.right .pl-fb b{color:var(--good)}.pl-foot.wrong .pl-fb b{color:var(--bad)}
.pl-foot .btn.big{width:100%;min-height:54px;font-size:1.05rem}
.pl-acts{display:grid;gap:10px}
@media (min-width:700px){.pl-acts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.pl-end{align-items:center;text-align:center;justify-content:center}
.pl-end h2{font-size:clamp(2rem,7vw,3rem)}
.pl-stars{display:flex;gap:6px;justify-content:center}.pl-stars span{filter:grayscale(1) opacity(.3);transform:scale(.7)}
.pl-stars span.on{filter:none;animation:plStar .55s both;animation-delay:var(--d)}.pl-stars span:nth-child(2){margin-top:-14px}
@keyframes plStar{0%{transform:scale(.2) rotate(-30deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.pl-sum{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}.pl-sum div{display:grid}.pl-sum b{font:800 1.8rem var(--display)}.pl-sum small{color:var(--ink2);font-weight:700}
.pl-weak{width:100%;display:grid;gap:8px;text-align:left}.pl-weak h3{text-align:center}
@media (prefers-reduced-motion:reduce){.pl,.pa-node.cur .pa-dot,.pl-lw,.pl-opt.no,.pl-card.shake,.pl-stars span.on,.pl-micb.rec{animation:none!important}.pl-bar i{transition:none}.pl-stars span{filter:none;transform:none}}
.pa-stats .ring b{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px;font-size:1.25rem}
.pa-stats .ring b small{font-size:.68rem}
.pa-cont .btn{min-height:52px;font-size:1.05rem}
@media (min-width:700px){
  .pa-trail{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pa-node{margin-left:0;width:100%;max-width:none;flex-direction:column;text-align:center;padding:14px 10px;background:var(--surface);border:2px solid var(--edge);border-radius:20px;box-shadow:3px 3px 0 var(--sh);gap:8px}
  .pa-node.cur{background:var(--soft)}.pa-node:hover{transform:translateY(-2px)}
}
.pa-body>.card+.card,.pa-body>.card+.pa-grid{margin-top:14px}

.pl-acts .btn:not(.y){min-height:46px;font-size:.95rem}
.hub-credit h3{line-height:1.2}.hub-credit p{line-height:1.35}

/* ================= Academy, Teach page, Start pages ================= */
.ac-hero,.tc-hero,.st-hero{display:grid;gap:14px;justify-items:start;padding:8px 0 22px;max-width:760px}
.ac-hero h1,.tc-hero h1,.st-hero h1{font-size:clamp(2rem,6.5vw,3.4rem);line-height:1.05}
.tc-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 0 0}.tc-chips li{padding:6px 14px;border-radius:99px;border:2px solid var(--edge);background:var(--surface);font-weight:700;font-size:.9rem}
.tc-who .card{display:grid;gap:8px;align-content:start}.tc-ic{display:block}
.tc-calc{display:grid;gap:12px}.tc-calc input[type=range]{width:100%;accent-color:var(--rose)}
.tc-out{display:grid;gap:2px;padding:14px;border-radius:16px;background:var(--soft);border:2px solid var(--edge);text-align:center}.tc-out b{font:800 clamp(1.6rem,6vw,2.2rem) var(--display)}.tc-out small{color:var(--ink2)}
.tc-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tc-steps li{display:flex;gap:12px;padding:16px;border:2px solid var(--edge);border-radius:18px;background:var(--surface)}
.tc-steps li>span{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--on);display:grid;place-items:center;font:800 1rem var(--display);border:2px solid var(--edge)}
.tc-steps p{color:var(--ink2);font-size:.95rem;margin-top:2px}
.tc-mods{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tc-mod{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border:2px solid var(--edge);border-radius:16px;background:var(--surface);text-decoration:none;color:var(--ink)}.tc-mod span{grid-row:span 2}.tc-mod small{color:var(--ink2)}
.tc-track{border:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}.tc-track legend{font-weight:700;margin-bottom:6px;padding:0}
.ac-top{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}.ac-top h2{font-size:1.35rem}
.ac-ring b{font-size:1.1rem}
.ac-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ac-card{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:18px;padding:12px 14px;cursor:pointer;min-height:76px;box-shadow:0 3px 0 var(--sh)}
.ac-card.done{background:var(--soft)}.ac-t{display:grid;flex:1;min-width:0;line-height:1.25}.ac-t small{color:var(--ink2);font-weight:700}.ac-core{color:var(--rose)}
.ac-ok{font-style:normal;width:26px;height:26px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;font-weight:800;flex:none}.ac-card.done .ac-ok{background:var(--yellow);color:var(--on)}
.ac-mod{display:grid;gap:14px;max-width:760px}.ac-mod header{display:flex;gap:14px;align-items:center}.ac-mod h2{font-size:clamp(1.5rem,5vw,2.1rem)}
.ac-c ul{margin-top:8px}.ac-todo{display:grid;gap:10px}.ac-nav{gap:10px;flex-wrap:wrap}
.ac-tabs a,.ac-tabs button{flex:none;font:700 .95rem var(--body);padding:9px 16px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.ac-tabs [aria-selected=true]{background:var(--pink);color:var(--on);box-shadow:2px 2px 0 var(--sh)}
.ac-plan{display:grid;gap:12px;max-width:820px}.ac-plan h4{font:800 .85rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--rose)}.ac-plan ul{margin:6px 0 0 18px;display:grid;gap:4px}
.ac-eng{display:grid;gap:8px;margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.ac-eng div{display:grid;padding:10px 12px;border:2px solid var(--mute);border-radius:14px;background:var(--surface)}.ac-eng span{color:var(--ink2)}
.st-tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.st-tile{display:grid;gap:6px;justify-items:start;padding:18px;border:2px solid var(--edge);border-radius:22px;background:var(--surface);text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--sh);transition:transform .12s}.st-tile:hover{transform:translateY(-3px)}.st-tile b{font:800 1.3rem var(--display)}.st-tile small{color:var(--ink2);font-size:.92rem}
.st-out{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.st-out li{padding:14px 16px;border:2px solid var(--edge);border-radius:16px;background:var(--surface);font-weight:700}.st-out li::before{content:"✓ ";color:var(--rose)}
.st-units{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.st-unit{display:flex;gap:12px;align-items:center;padding:12px 14px;border:2px solid var(--edge);border-radius:18px;background:var(--surface);text-decoration:none;color:var(--ink)}.st-unit div{display:grid;line-height:1.25}.st-unit small{color:var(--ink2)}
.st-art{display:block}

.tc-calc label.f b{color:var(--rose)}
.ac-ring b{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px}.ac-ring b small{font-size:.68rem}

/* Welcome program (teachers' first month) */
.new-pill{margin-left:6px;vertical-align:middle;font-size:.62rem;padding:2px 8px}
.tp-name .new-pill{display:inline-flex;margin:6px 0 0}
.wc{display:flex;flex-direction:column;gap:14px}
.wc-art,.tc-wart{flex:none;display:grid;place-items:center}
.wc-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wc-perks>div{background:var(--surface);border:2px solid var(--edge);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.wc-perks b{font:800 1.5rem var(--display,var(--body));line-height:1.1}
.wc-perks span{font-size:.85rem;color:var(--ink2)}
.wc-ms{display:flex;flex-direction:column;gap:6px}
.wc-m{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--edge);border-radius:12px;padding:8px 12px}
.wc-m i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem}
.wc-m.ok i{background:var(--yellow);}
.wc-m span{flex:1;min-width:0}
.wc-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface);border:2px dashed var(--edge);border-radius:14px;padding:10px 14px}
.wc-ref p{margin:2px 0 0}
.wc-after{background:var(--soft)}
.tc-welcome{display:flex;flex-direction:column;gap:14px}

/* ---- Chinese interest list (/#/chinese): quiet, minimal, a little 3D ---- */
.wl-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.wl-copy{display:grid;gap:18px;justify-items:start}
.wl-copy h1{font-size:clamp(2.2rem,5.6vw,3.9rem)}
.wl-copy .lead{font-size:1.15rem;line-height:1.6;max-width:46ch}
.wl-copy .row{margin-top:6px}
.wl-art{--rx:0deg;--ry:0deg;position:relative;height:420px;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wl-orb{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--pink),transparent 62%),radial-gradient(circle at 72% 72%,var(--yellow),transparent 55%);filter:blur(34px);opacity:.75;transform:translateZ(-60px)}
.wl-card{position:absolute;display:grid;gap:2px;align-content:center;justify-items:start;padding:20px 24px;border-radius:28px;border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--shadow-up)}
.wl-card b{font:700 clamp(2.6rem,6vw,4.4rem)/1 "Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",var(--display),sans-serif;letter-spacing:.02em}
.wl-card span{font-weight:600;color:var(--ink2);font-size:.95rem}
.wl-card i{font:700 .7rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ppt);background:var(--pp);padding:3px 9px;border-radius:99px;margin-bottom:6px;font-style:normal}
.wl-card.c3{left:2%;top:0;width:56%;background:color-mix(in srgb,var(--yellow) 60%,var(--surface));transform:translateZ(0) rotate(-5deg);animation:wlfloat 7s ease-in-out infinite}
.wl-card.c2{right:0;top:20%;width:60%;background:color-mix(in srgb,var(--pink) 70%,var(--surface));transform:translateZ(46px) rotate(4deg);animation:wlfloat 8s ease-in-out -2s infinite}
.wl-card.c2 b,.wl-card.c2 span,.wl-card.c3 b,.wl-card.c3 span{color:var(--on)}
.wl-card.c1{left:12%;bottom:0;width:58%;transform:translateZ(92px) rotate(-2deg);animation:wlfloat 9s ease-in-out -4s infinite}
.wl-tag{position:absolute;font:800 .78rem var(--body);letter-spacing:.08em;padding:7px 13px;border-radius:99px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow);transform:translateZ(120px)}
.wl-tag.t1{right:6%;top:6%}.wl-tag.t2{left:0;bottom:36%;background:var(--yellow);color:var(--on)}
@keyframes wlfloat{50%{translate:0 -9px}}
.wl-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;margin-top:96px;scroll-margin-top:90px}
.wl-side header{display:grid;gap:12px}
.wl-side h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.wl-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.wl-steps li{display:flex;gap:14px;align-items:flex-start}
.wl-steps li>b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--on);font:800 .95rem var(--display);box-shadow:0 0 0 1px var(--line2)}
.wl-steps h3{font-size:1.05rem;margin-bottom:2px}
.wl-meter{display:flex;gap:18px;align-items:center;padding:16px 18px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line)}
.wl-meter>div:first-child{display:grid;justify-items:center;gap:2px}
.wl-ring{width:84px;height:84px}
.wl-ring circle{fill:none;stroke-width:7}.wl-ring .bg{stroke:var(--line2)}.wl-ring .fg{stroke:var(--rose);stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
.wl-ring text{font:800 15px var(--display);fill:var(--ink)}
.wl-bar{flex:1;min-width:0;display:grid;gap:6px;font-size:.88rem}
.wl-bar i{display:block;height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.wl-bar i::after{content:"";display:block;height:100%;width:var(--p);border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--yellow))}
.wl-tones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wl-tones figure{margin:0;display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.wl-tones svg{width:100%;max-width:64px;height:auto}
.wl-tones path{fill:none;stroke:var(--rose);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:wldraw 1.6s cubic-bezier(.3,.7,.2,1) both}
.wl-tones figure:nth-child(2) path{animation-delay:.15s}.wl-tones figure:nth-child(3) path{animation-delay:.3s}.wl-tones figure:nth-child(4) path{animation-delay:.45s}
@keyframes wldraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.wl-tones figcaption{display:grid;justify-items:center;line-height:1.2}.wl-tones b{font:700 1.05rem var(--display)}.wl-tones small{color:var(--ink2);font-size:.72rem}
.wl-form{position:sticky;top:84px;display:grid;gap:22px;padding:26px}
.wl-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.wl-seg button{font:700 .95rem var(--body);padding:11px 12px;border:0;border-radius:99px;background:none;color:var(--ink2);cursor:pointer;min-height:44px;transition:background .2s,color .2s,box-shadow .2s}
.wl-seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(24,19,28,.1),0 0 0 1px var(--line2)}
.wl-q{display:grid;gap:10px}.wl-ql{font:700 .78rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.wl-chips{display:flex;flex-wrap:wrap;gap:8px}
.wl-chip{font:600 .92rem var(--body);padding:9px 15px;min-height:42px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.wl-chip:hover{border-color:var(--ink2)}.wl-chip:active{transform:scale(.97)}
.wl-chip[aria-pressed="true"]{background:var(--pink);color:var(--on);border-color:var(--edge)}
.wl-chip[aria-pressed="true"]::before{content:"✓ ";font-weight:800}
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wl-grid label:last-child{grid-column:1/-1}
.wl-done{display:grid;gap:14px;justify-items:center;text-align:center}.wl-done.card{max-width:560px;margin:40px auto 0;padding:40px 28px}.wl-done p{max-width:44ch}
.wl-ok{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--pp)}
.wl-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px!important;background:var(--soft)}
.wl-strip>b{font:700 2rem/1 "Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",var(--display),sans-serif;color:var(--rose)}
.wl-strip>div{flex:1;min-width:200px;display:grid;gap:2px}
@media (max-width:900px){
  .wl-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .wl-art{height:340px}
  .wl-main{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:64px}
  .wl-form{position:static;order:-1;padding:20px}
}
@media (max-width:520px){.wl-grid{grid-template-columns:minmax(0,1fr)}.wl-art{height:310px}.wl-meter{flex-direction:column;align-items:flex-start}.wl-copy .row .btn{flex:1 1 100%}.wl-tones{gap:6px}}
@media (prefers-reduced-motion:reduce){.wl-art{transform:none}.wl-card,.wl-tones path{animation:none!important}}

/* ---------- speaking tools: chat voice, phrase tray, live interpreter ---------- */
.sp-compose{align-items:center}
.sp-compose input{flex:1;min-width:0}
.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.ibtn:hover{background:var(--soft);border-color:var(--pink)}
.ibtn:active{transform:scale(.94)}
.ibtn.sm{width:36px;height:36px;border-radius:11px}
.ibtn.rec,.ibtn[aria-pressed="true"].rec{background:var(--bad);color:#fff;border-color:var(--bad);animation:sp-pulse 1.4s ease-in-out infinite}
:root[data-theme="dark"] .ibtn.rec{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ibtn.rec{color:var(--on)}}
@keyframes sp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(194,31,102,.45)}50%{box-shadow:0 0 0 9px rgba(194,31,102,0)}}
@media (prefers-reduced-motion:reduce){.ibtn.rec{animation:none}}
.sp-tools{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;margin-top:8px;min-height:22px}
.sp-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;font:600 .86rem var(--body);color:var(--rose);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sp-link svg{flex:none}
.sp-panel{margin-top:12px;border:1px solid var(--line2);border-radius:18px;background:var(--soft);padding:12px 14px;display:grid;gap:10px;max-height:min(46vh,380px);overflow:auto}
.sp-panel[hidden]{display:none}
.sp-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sp-x{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink2);padding:0 4px}
.sp-tabs{display:flex;gap:6px;flex-wrap:wrap}
.sp-tabs .chip{min-height:34px;padding:5px 11px;font-size:.84rem}
.sp-list{display:grid;gap:6px}
.sp-phrase{display:flex;gap:6px;align-items:stretch}
.sp-send{flex:1;min-width:0;text-align:left;display:grid;gap:1px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:14px;padding:9px 12px;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.sp-send:hover{border-color:var(--pink);transform:translateY(-1px)}
.sp-send b{font-weight:650}
.sp-send span{font-size:.82rem;color:var(--ink2)}
.sp-big{font:700 1.25rem/1.3 var(--display)}
/* live interpreter */
.lv h3{font-size:1.15rem}
.lv-box{margin-top:12px;border:1px solid var(--line2);border-radius:16px;background:var(--soft);padding:10px 12px;height:min(34vh,260px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.lv-line{max-width:92%;align-self:flex-start;background:var(--surface);border:1px solid var(--line2);border-radius:14px 14px 14px 4px;padding:8px 12px;position:relative}
.lv-line.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--pink);color:var(--on);border-color:var(--pink)}
.lv-line.me.interim:empty{display:none}
.lv-line.interim{opacity:.65;font-style:italic}
.lv-t{font-weight:600;overflow-wrap:anywhere}
.lv-s{font-size:.84rem;color:var(--ink2);overflow-wrap:anywhere}
.lv-line.me .lv-s{color:var(--on);opacity:.75}
.lv-a{display:flex;gap:8px;margin-top:2px}
.lv-a button{border:0;background:none;color:var(--rose);font:600 .78rem var(--body);cursor:pointer;padding:2px 0;text-decoration:underline;display:inline-flex;align-items:center;gap:4px}
.lv-empty{margin:auto;text-align:center;max-width:32ch}
.lv-partner{margin-top:8px;color:var(--good);font-weight:600}
.lv-ctl{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin-top:12px}
.lv-ctl .btn{display:inline-flex;align-items:center;gap:8px}
.lv-opts{display:grid;gap:8px;margin-top:12px}
.lv-dial{display:grid;gap:4px}
.lv-dial input{width:100%;accent-color:var(--rose)}
.lv-help{margin-top:12px;color:var(--ink2)}
.lv-help summary{cursor:pointer;font-weight:600}
.lv-help ul{margin:8px 0 0;padding-left:1.1rem;display:grid;gap:5px}
.lv-h{font:700 .82rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:14px 0 6px}
.lv-vocab,.lv-fix,.lv-plan{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lv-vocab li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.lv-vocab li .small{grid-column:2}
.lv-plan{counter-reset:p}
.lv-plan li{border:1px solid var(--line2);border-radius:12px;padding:8px 12px;background:var(--soft)}
.lv-chips{display:flex;gap:6px;flex-wrap:wrap}
.lv-chips .chip{cursor:default;min-height:32px;padding:4px 10px;font-size:.84rem}
@media (max-width:560px){.lv-line{max-width:100%}.sp-panel{max-height:52vh}}

/* ---- voice sheet (speak instead of typing) ---- */
body.vs-open{overflow:hidden}
.vs-bg{position:fixed;inset:0;z-index:120;background:rgba(24,19,28,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:end center}
.vs{width:min(100%,600px);max-height:100dvh;height:min(100dvh,720px);display:flex;flex-direction:column;gap:12px;background:var(--bg);color:var(--ink);border-radius:28px 28px 0 0;padding:max(16px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));box-shadow:0 -12px 50px rgba(24,19,28,.28);animation:vs-in .22s ease-out;overflow:hidden}
@keyframes vs-in{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){.vs-bg{place-items:stretch}.vs{width:100%;height:100dvh;border-radius:0}}
@media (min-width:641px){.vs-bg{place-items:center}.vs{border-radius:28px;height:min(86dvh,700px)}}
.vs-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vs-lang{display:inline-flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;font-size:.88rem}
.vs-x{width:44px;height:44px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.vs-text{flex:1;min-height:0;overflow:auto;background:var(--surface);border:1.5px solid var(--line2);border-radius:22px;padding:18px 20px;font:600 clamp(1.3rem,4.6vw,1.75rem)/1.38 var(--display);overflow-wrap:anywhere;scroll-behavior:smooth}
.vs-int{color:var(--rose);opacity:.85}
.vs-ph{color:var(--ink2);font-weight:500;font-size:1.05rem}
.vs-caret{display:inline-block;width:3px;height:1.1em;margin-left:3px;background:var(--rose);vertical-align:-.15em;border-radius:2px;animation:vs-blink 1s steps(2) infinite}
@keyframes vs-blink{50%{opacity:0}}
.vs-meta{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--ink2);min-height:1.2em}
.vs-meta .warn{color:var(--bad);font-weight:700}
.vs-status{margin:0;text-align:center;font:650 1.05rem/1.3 var(--body);min-height:1.4em;transition:color .2s}
.vs-status.warn{color:#8A5A00}
:root[data-theme="dark"] .vs-status.warn{color:var(--yellow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vs-status.warn{color:var(--yellow)}}
.vs-status.stop{color:var(--bad);font-size:1.25rem;font-weight:800;animation:vs-shake .5s ease-in-out infinite}
@keyframes vs-shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.vs-ctl{display:grid;justify-items:center;gap:8px}
.vs-ring{position:relative;width:132px;height:132px}
.vs-ring>svg{position:absolute;inset:0;transform:rotate(-90deg)}
.vs-ring circle{fill:none;stroke-width:7}
.vs-ring .bg{stroke:var(--mute)}
.vs-ring .fg{stroke:var(--rose);stroke-linecap:round;transition:stroke-dashoffset .15s linear,stroke .3s}
.vs-ring[data-zone=warn] .fg{stroke:#E0A100}
.vs-ring[data-zone=stop] .fg{stroke:var(--bad)}
.vs-stop{position:absolute;inset:16px;border-radius:50%;border:0;background:var(--rose);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:1;box-shadow:0 6px 18px rgba(194,31,102,.35);transition:transform .12s}
:root[data-theme="dark"] .vs-stop{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vs-stop{color:var(--on)}}
.vs-stop:active{transform:scale(.94)}
.vs-halo{position:absolute;inset:0;border-radius:50%;background:var(--pink);opacity:.45;z-index:-1;transition:transform .08s linear}
.vs-ring[data-zone=stop] .vs-stop{background:var(--bad)}
.vs-clock{font-size:.95rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.vs-clock b{color:var(--ink);font-size:1.1rem}
.vs-bars{display:flex;gap:4px;align-items:center;height:26px}
.vs-bars i{display:block;width:5px;height:100%;border-radius:3px;background:var(--rose);transform:scaleY(.12);transition:transform .08s linear;transform-origin:center}
.vs-bars.mini{height:20px}.vs-bars.mini i{width:4px}
.vs-hint{margin:0;text-align:center;font-size:.84rem;color:var(--ink2)}
.vs-hint.small{font-size:.76rem}
.vs.review .vs-edit{flex:1;min-height:140px;resize:none;border:1.5px solid var(--line2);border-radius:20px;padding:16px 18px;background:var(--surface);color:var(--ink);font:600 clamp(1.15rem,4vw,1.45rem)/1.4 var(--display)}
.vs.review .vs-edit:focus{outline:3px solid var(--focus);outline-offset:2px}
.vs-banner{margin:0;background:var(--yellow);color:#18131C;border-radius:14px;padding:10px 14px;font-weight:600;font-size:.92rem}
.vs-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px}
.vs-actions .btn.big{grid-column:1/-1;min-height:58px;font-size:1.15rem}
.vs-note{color:var(--ink2)}
@media (prefers-reduced-motion:reduce){.vs,.vs-caret,.vs-status.stop{animation:none}.vs-bars i,.vs-halo,.vs-ring .fg{transition:none}}
.lv-line.interim:empty{display:none}

/* ---- class screen: stage, subtitles on the video, dock, sticky on phones ---- */
.stagehead{position:relative}
.vwrap{position:relative}
.stagehead.stuck{position:sticky;top:var(--stick,0px);z-index:20;background:var(--bg);padding:6px 0 8px;box-shadow:0 8px 14px -12px rgba(24,19,28,.45)}
.stagehead.stuck .video{max-height:min(46dvh,560px)}
@media (max-width:899px){.stagehead.stuck .video{max-height:33dvh}.stagehead.stuck .dock{margin-top:8px;gap:6px}}
.vwrap .video .self{top:10px;bottom:auto}
.dock{display:grid;gap:8px;margin-top:10px}
.dock .vcontrols{margin-top:0;justify-content:flex-start}
.lvdock{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lvdock .lvnote{flex-basis:100%;line-height:1.3}
.lvcc{display:inline-flex;align-items:center;gap:8px}
.ccm{font:800 .7rem/1 var(--display);border:1.6px solid currentColor;border-radius:5px;padding:2px 4px}
.lvp{margin-left:auto;position:relative;display:inline-flex;align-items:center;gap:6px}
.dot{background:var(--rose);color:#fff;border-radius:999px;font-style:normal;font-weight:700;font-size:.68rem;line-height:1;padding:3px 6px}
:root[data-theme="dark"] .dot{color:var(--on)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dot{color:var(--on)}}
.chip.hp{min-height:0;padding:2px 8px;cursor:default}
.lvpanel:not(.open){display:none}
.subs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 12px 12px;pointer-events:none;background:linear-gradient(to top,rgba(10,8,12,.78),rgba(10,8,12,0));border-radius:0 0 18px 18px}
.subs:empty{display:none}
.sub{max-width:min(94%,780px);text-align:center;color:#fff;background:rgba(10,8,12,.55);border-radius:12px;padding:6px 14px 8px;animation:subin .25s ease-out;overflow-wrap:anywhere}
.sub.tap{pointer-events:auto;cursor:pointer;outline-offset:2px}
.sub .who{display:block;font:700 .66rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.sub .m{font:700 1.15rem/1.3 var(--body)}
.sub .s{font-size:.86rem;line-height:1.3;opacity:.85}
.sub .s.hint{font-size:.74rem;opacity:.65}
.sub.part{font-style:italic;opacity:.92;font-size:1.05rem;font-weight:600}
.sub.part .who{display:inline;margin-right:6px}
.subs-me{align-self:flex-end;max-width:80%;background:var(--pink);color:#18131C;border-radius:999px;padding:3px 11px;font-size:.8rem;font-weight:600;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subs.sz0 .m{font-size:.95rem}.subs.sz0 .sub.part{font-size:.9rem}
.subs.sz2 .m{font-size:1.5rem}.subs.sz2 .sub.part{font-size:1.3rem}.subs.sz2 .s{font-size:1rem}
@keyframes subin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sub{animation:none}}
@media (max-width:560px){.sub .m{font-size:1rem}.subs{padding-top:28px}}
@media (max-width:899px){
  .dock .vcontrols{flex-wrap:nowrap;gap:6px}
  .dock .vcontrols .btn.sm{padding:0 10px;min-height:38px;font-size:.8rem;white-space:nowrap;flex:1 1 auto}
  .lvdock{flex-wrap:nowrap;gap:6px}
  .lvdock .btn.sm{padding:0 11px;min-height:38px;font-size:.82rem;white-space:nowrap}
  .lvdock .lvnote{display:none}
  .lvdock .pill{white-space:nowrap}
  .stagehead.stuck .video{max-height:30dvh}
}
@media (max-width:899px){
  .dock .vcontrols .btn.sm{flex:1 1 0;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis}
  .lvdock .lvcc{flex:0 0 auto;padding:0 10px}
  .lvdock .lvp{flex:0 1 auto;min-width:0;padding:0 10px}
  .lvdock .vs-bars.mini{flex:0 1 38px;min-width:0;overflow:hidden}
}
@media (max-width:400px){.lvdock .vs-bars.mini{display:none}}