/* Extracted from the approved sideout-mockup-broadcast.html. */

:root{--good:#5fcf8e;--mid:#e9c46a;--bad:#ef7d6a;--info:#6fb2ff;--f-display:"Barlow Condensed","Arial Narrow",sans-serif;--f-body:Inter,system-ui,sans-serif;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif}
body{background-color:#070b16;background-image:radial-gradient(1100px 700px at 10% 0%,var(--glow,rgba(80,110,190,.25)),transparent 62%),radial-gradient(1000px 700px at 95% 100%,var(--glow2,rgba(80,110,190,.22)),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'%3E%3Crect x='20' y='20' width='200' height='200'/%3E%3Cline x1='120' y1='10' x2='120' y2='230'/%3E%3Cline x1='86' y1='20' x2='86' y2='220'/%3E%3Cline x1='154' y1='20' x2='154' y2='220'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,var(--bg2,#0c1830),var(--bg,#070b16) 70%);transition:background .3s}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#stage{position:absolute;left:50%;top:50%;width:1440px;height:810px;transform-origin:center;overflow:hidden;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6);
 background:radial-gradient(1100px 700px at 78% -25%,var(--glow2),transparent 60%),radial-gradient(900px 600px at -5% 110%,var(--glow),transparent 60%),linear-gradient(160deg,var(--bg),var(--bg2));color:var(--ink);transition:background .3s}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='3'%3E%3Crect x='20' y='20' width='320' height='180'/%3E%3Cline x1='180' y1='10' x2='180' y2='210'/%3E%3Cline x1='127' y1='20' x2='127' y2='200'/%3E%3Cline x1='233' y1='20' x2='233' y2='200'/%3E%3C/g%3E%3C/svg%3E")}
.sp{flex:1}
.flag{display:inline-block;width:30px;height:20px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cd{font-family:var(--f-display)}
.H{font:italic 800 21px var(--f-display);letter-spacing:.05em;text-transform:uppercase}
.mut{color:var(--mut)}
/* shell */
.top{position:absolute;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:18px;padding:0 18px 0 0;background:linear-gradient(90deg,var(--top),transparent);z-index:2}
.brand{height:64px;display:flex;align-items:center;gap:10px;padding:0 42px 0 20px;background:var(--acc);color:var(--accInk);clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.brand b{font:italic 800 28px var(--f-display);letter-spacing:.06em;display:block;line-height:1}
.brand span{font:700 10px Inter;letter-spacing:.22em;opacity:.8;display:block}
.who{display:flex;align-items:center;gap:10px}.who b{font:italic 800 22px var(--f-display);letter-spacing:.04em;text-transform:uppercase;display:block}.who span{font-size:12px;color:var(--mut)}
.dt{text-align:right}.dt b{display:block;font:italic 800 21px var(--f-display);text-transform:uppercase}.dt span{font-size:12px;color:var(--mut)}
.stat{text-align:right}.stat b{display:block;font:italic 800 23px var(--f-display)}.stat span{font-size:11px;color:var(--mut);letter-spacing:.1em}
.cont{height:46px;padding:0 32px 0 24px;background:var(--acc2);color:var(--acc2Ink);font:italic 800 21px var(--f-display);letter-spacing:.06em;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.side{position:absolute;left:0;top:64px;bottom:0;width:194px;padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(180deg,var(--top),transparent)}
.side .grp{font:700 11px Inter;letter-spacing:.16em;margin:14px 12px 6px;color:var(--mut);opacity:.75}
.side .it{height:42px;display:flex;align-items:center;gap:12px;padding:0 14px;font:600 16px Inter;color:var(--mut);position:relative}
.side .it svg{width:20px;height:20px}
.side .it.on{color:var(--ink);background:linear-gradient(90deg,var(--accSoft),transparent)}
.side .it.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:4px;background:var(--acc)}
.main{position:absolute;left:194px;top:64px;right:0;bottom:0;padding:16px 20px}
/* panels */
.pnl{background:var(--pnl);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));position:relative;display:flex;flex-direction:column;min-height:0}
.pnl::after{content:"";position:absolute;left:0;top:0;width:4px;height:42px;background:var(--acc)}
.ph{display:flex;align-items:center;gap:10px;padding:13px 20px 8px}
.ph small{font:600 12px Inter;color:var(--mut)}
.row{display:flex;align-items:center;gap:12px;padding:8px 20px;border-top:1px solid var(--line);font-size:15px}
.tag{font:italic 800 13px var(--f-display);letter-spacing:.08em;padding:3px 10px;background:var(--acc);color:var(--accInk);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);text-transform:uppercase;white-space:nowrap}
.tag.y{background:var(--acc2);color:var(--acc2Ink)}.tag.n{background:var(--chip);color:var(--ink)}.tag.g{background:#3f9a78;color:#fff}
.btn{height:38px;padding:0 18px;font:italic 800 17px var(--f-display);letter-spacing:.05em;text-transform:uppercase;background:var(--chip);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.btn.a{background:var(--acc);color:var(--accInk)}.btn.b{background:var(--acc2);color:var(--acc2Ink)}
.lt{display:flex;align-items:stretch;height:46px}
.lt .n{width:50px;display:grid;place-items:center;font:italic 800 26px var(--f-display);background:var(--acc);color:var(--accInk);clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.lt .nm{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 12px 0 6px;background:var(--chip);margin-left:-8px;clip-path:polygon(8px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.lt .nm b{font:italic 800 18px var(--f-display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt .nm span{font-size:12px;color:var(--mut)}
.lt .ov{width:46px;display:grid;place-items:center;font:italic 800 21px var(--f-display);background:var(--acc2);color:var(--acc2Ink);margin-left:-10px;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.late{color:var(--warn)}
/* lineup */
.court{position:relative;flex:1;margin:0 16px 16px;border-radius:6px;background:var(--free);padding:26px 26px 18px}
.floor{position:absolute;left:26px;right:26px;top:34px;bottom:96px;background:var(--floor);box-shadow:inset 0 0 0 4px rgba(255,255,255,.9)}
.floor::before{content:"";position:absolute;left:0;right:0;top:33.3%;height:4px;background:rgba(255,255,255,.9)}
.net{position:absolute;left:14px;right:14px;top:22px;height:10px;background:repeating-linear-gradient(90deg,#fff 0 6px,#0b1324 6px 12px);border-radius:2px}
.slot{position:absolute;width:118px;transform:translateX(-50%);text-align:center;cursor:grab}
.slot .jy{width:62px;height:62px;margin:0 auto -6px;position:relative}
.slot .tg{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--pnlSolid);font:italic 800 14px var(--f-display);letter-spacing:.06em;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.slot .nmb{margin-top:3px;padding:5px 8px;background:var(--pnlSolid);font:600 14px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:3px}
.slot.over .nmb,.slot.sel .nmb{background:var(--acc);color:var(--accInk)}
.slot.over .jy,.slot.sel .jy{filter:drop-shadow(0 0 10px var(--acc))}
.zn{position:absolute;font:italic 800 13px var(--f-display);color:rgba(255,255,255,.75)}
.stars{color:var(--acc2);font-size:13px;letter-spacing:1px;white-space:nowrap}.stars em{color:rgba(255,255,255,.18);font-style:normal}
.lu{width:100%;border-collapse:collapse;font-size:14px}
.lu th{text-align:left;font:700 11px Inter;letter-spacing:.08em;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line)}
.lu td{padding:0 10px;height:37px;border-bottom:1px solid var(--line);white-space:nowrap}
.lu td.pz{font:italic 800 16px var(--f-display);letter-spacing:.04em;width:78px}
.lu tr.st td.pz{background:var(--accSoft)}
.lu tr.lb td.pz{background:rgba(233,196,106,.16)}
.lu .pchip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:4px;cursor:grab;font-weight:600}
.lu .pchip:hover{background:var(--chip)}
.lu .pchip .no{width:26px;height:22px;display:grid;place-items:center;font:italic 800 14px var(--f-display);background:var(--kit);color:var(--kitInk);border-radius:3px}
.lu tr.over td{background:var(--accSoft)}
.lu tr.sel .pchip{background:var(--acc);color:var(--accInk)}
.heart{display:inline-block;width:12px;height:12px;border-radius:50%}
.call{padding:12px 16px 14px;border-top:1px solid var(--line)}
.call .k{font:700 11px Inter;letter-spacing:.14em;color:var(--mut)}
.call b{display:block;font:italic 800 21px/1.1 var(--f-display);text-transform:uppercase;margin:4px 0 2px}
.call .ch{font:italic 800 14px var(--f-display);letter-spacing:.08em;color:var(--acc2);margin-top:6px;display:inline-block}

#stage [data-drop]{touch-action:none;user-select:none}
.lu tr[data-drop]{cursor:grab}
.lu tr[data-drop]:hover td{background:var(--chip)}
#ghost{position:fixed;z-index:99;pointer-events:none;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:var(--pnlSolid,#1f2b52);color:var(--ink,#fff);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.5);font:600 15px Inter;border-left:4px solid var(--acc,#e0646b)}
#ghost .no{width:30px;height:26px;display:grid;place-items:center;font:italic 800 16px var(--f-display);background:var(--kit);color:var(--kitInk);border-radius:3px}
#ghost .ps{color:var(--mut);font-size:13px}
.dragging{cursor:grabbing}
.slot.target .jy{filter:drop-shadow(0 0 0 transparent)}
.slot.target::before{content:"";position:absolute;left:50%;top:-6px;width:76px;height:76px;transform:translateX(-50%);border-radius:50%;border:3px dashed var(--ring);opacity:.9}
.slot.fg{--ring:var(--good)}.slot.fo{--ring:var(--mid)}.slot.fp{--ring:var(--bad)}
.lu tr.target.fg td.pz{box-shadow:inset 4px 0 0 var(--good)}.lu tr.target.fo td.pz{box-shadow:inset 4px 0 0 var(--mid)}.lu tr.target.fp td.pz{box-shadow:inset 4px 0 0 var(--bad)}
.slot.over .nmb{background:var(--acc);color:var(--accInk)}
.slot.over .jy{transform:scale(1.12)}
.lu tr.over td{background:var(--accSoft)!important}
.slot .nmb[data-menu]{cursor:pointer}
.slot .nmb[data-menu]:hover{outline:2px solid var(--acc)}
.menu{position:absolute;z-index:20;width:320px;max-height:380px;overflow:auto;background:var(--pnlSolid);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.55);border:1px solid var(--line)}
.menu .mh2{padding:10px 12px;font:italic 800 15px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line)}
.menu .mi{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:14px;cursor:pointer}
.menu .mi:hover{background:var(--chip)}.menu .mi.cur{background:var(--accSoft)}
.menu .no{width:26px;height:22px;display:grid;place-items:center;font:italic 800 14px var(--f-display);background:var(--kit);color:var(--kitInk);border-radius:3px}

/* ===== v4 broadcast full mockup ===== */
.btn[disabled]{opacity:.38;cursor:not-allowed}
.btn{white-space:nowrap}
.btn.sq{width:38px;padding:0;display:inline-grid;place-items:center}
.btn.big{height:46px;font-size:21px;padding:0 24px}
.btn.hot{background:var(--bad);color:#fff;animation:pulse 1s infinite}
.btn small,.cont small{font:600 11px Inter;opacity:.7;margin-left:6px;font-style:normal}
@keyframes pulse{50%{filter:brightness(1.25)}}
.cont{display:flex;align-items:center}.cont.blk{background:var(--acc);color:var(--accInk)}.cont.run{opacity:.7}
.side .it{cursor:pointer}.side .it:hover{color:var(--ink)}
.nb{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--acc);color:var(--accInk);font:800 11px Inter;display:grid;place-items:center}
.ttlrow{display:flex;align-items:center;gap:14px;min-height:46px;margin-bottom:12px}
.ttl{font:italic 800 36px var(--f-display);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.pg2{display:flex;flex-direction:column;height:100%;min-height:0}
.tabs{display:flex;gap:4px}
.tabs button{height:34px;padding:0 16px;font:italic 800 16px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--chip);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.tabs button.on{background:var(--acc);color:var(--accInk)}
.chips{display:flex;gap:4px}.chips button,.chipb{height:30px;padding:0 12px;border-radius:4px;background:var(--chip);color:var(--mut);font:700 13px Inter}.chips button.on,.chipb.on{background:var(--acc);color:var(--accInk)}
.lnk{font:italic 800 15px var(--f-display);letter-spacing:.06em;color:var(--acc2);text-transform:uppercase}
.scr{overflow:auto;flex:1;min-height:0}
.scr::-webkit-scrollbar{width:8px}.scr::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.row.sm{padding:6px 18px;font-size:14px}.row.me,.tbl tr.me td{background:var(--accSoft)}
.rk{font:italic 800 20px var(--f-display);width:24px}
.ok{color:var(--good)}.late{color:var(--warn)}
.k{font:700 11px Inter;letter-spacing:.14em;color:var(--mut);margin:12px 0 8px}
.no{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 4px;font:italic 800 14px var(--f-display);background:var(--kit);color:var(--kitInk);border-radius:3px}
.bar{width:110px;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.bar.wide{flex:1;width:auto}.bar i{display:block;height:100%}
.wl{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:3px;border-radius:3px;font:800 11px Inter;cursor:pointer}.wl.w{background:rgba(95,207,142,.25);color:var(--good)}.wl.l{background:rgba(239,125,106,.22);color:var(--bad)}
.pn{color:inherit;text-decoration:none;cursor:pointer}.pn:hover{color:var(--acc2);text-decoration:underline}
/* hub */
.hubg{display:grid;grid-template-columns:1fr 380px;grid-template-rows:280px 1fr;gap:16px;height:100%}
.hero{background:linear-gradient(110deg,var(--accSoft),var(--pnl) 38%,var(--pnl) 62%,var(--chip))}
.vs{flex:1;display:flex;align-items:center;justify-content:center;gap:56px}
.vs .tm{text-align:center}.vs .tm b{display:block;font:italic 800 36px var(--f-display);text-transform:uppercase;margin-top:8px}.vs .tm span{color:var(--mut);font-size:14px}
.vs .cdw{text-align:center}.vs .cdn{font:italic 800 72px/1 var(--f-display);color:var(--acc2)}.vs .cdl{font:italic 800 18px var(--f-display);letter-spacing:.2em;margin-bottom:6px}
.heroBtns{position:absolute;right:20px;bottom:16px;display:flex;gap:8px}
.hubL{display:flex;flex-direction:column;gap:16px;min-height:0}
.hubLL{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}
.note{display:flex;align-items:center;gap:16px;padding:14px 20px;background:linear-gradient(90deg,rgba(232,199,125,.18),var(--pnl) 60%);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);flex:none}
.note.good{background:linear-gradient(90deg,rgba(95,207,142,.18),var(--pnl) 60%)}
.note .big{font:italic 800 40px var(--f-display);color:var(--acc2);width:44px;text-align:center}
.note b{display:block;font:italic 800 21px var(--f-display);text-transform:uppercase}.note span{font-size:13px;color:var(--mut)}
.inb{cursor:pointer;font-size:14px}.inb:hover{background:var(--chip)}.inb.unread span:nth-child(2){font-weight:700}
.road{padding:4px 16px;display:flex;flex-direction:column;gap:2px}
.rs{display:flex;gap:12px;align-items:center;padding:9px 8px;cursor:pointer;border-radius:4px}.rs:hover{background:var(--chip)}
.rs i{width:28px;height:28px;display:grid;place-items:center;font:italic 800 16px var(--f-display);background:var(--chip);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);font-style:normal}
.rs.on i{background:var(--acc);color:var(--accInk)}.rs b{display:block;font:italic 800 18px var(--f-display);text-transform:uppercase}.rs span{font-size:12px;color:var(--mut)}
/* schedule */
.mnav{display:flex;align-items:center;gap:10px}.mnav b{font:italic 800 22px var(--f-display);text-transform:uppercase;width:110px;text-align:center}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.legend i{width:12px;height:12px;border-radius:2px;margin-left:8px}
.legend .m,.ev.m{background:var(--acc)}.legend .camp,.ev.camp{background:#3f9a78}.legend .deadline,.ev.deadline{background:var(--mid)}.legend .travel,.ev.travel{background:#6b7ea8}
.schedg{display:grid;grid-template-columns:1fr 360px;gap:16px;flex:1;min-height:0}
.calh{display:grid;grid-template-columns:repeat(7,1fr);padding:12px 16px 6px;font:700 11px Inter;letter-spacing:.12em;color:var(--mut)}
.calg{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:4px;padding:0 16px 16px;flex:1}
.cal{background:rgba(255,255,255,.035);border-radius:3px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;overflow:hidden;min-height:0;border:1px solid transparent}
.cal:hover{border-color:var(--line)}.cal.out{opacity:.35}.cal.past .dn{color:var(--mut)}.cal.today{border-color:var(--acc2);box-shadow:inset 0 0 0 1px var(--acc2)}.cal.sel{background:var(--accSoft)}.cal.campd{background:rgba(63,154,120,.18)}
.dn{font:italic 800 17px var(--f-display)}
.ev{font:700 11px Inter;padding:2px 5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;display:flex;align-items:center;gap:4px}
.ev.deadline{color:#2a1f04}.ev.m{color:var(--accInk)}.evo{font-size:10px;color:var(--mut)}
/* squad */
.sqg{display:grid;grid-template-columns:1fr 340px;grid-template-rows:1fr 74px;gap:16px;flex:1;min-height:0}
.sqcols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 18px;padding:14px 18px;overflow:auto}
.grh{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 8px}.grh b{font:italic 800 17px var(--f-display);letter-spacing:.06em}.grh span{font-size:12px;color:var(--mut)}
.lt .x{width:30px;margin-left:4px;font-size:20px;color:var(--mut);background:var(--chip);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}.lt .x:hover{color:var(--bad)}
.lt .nm a b{font:italic 800 18px var(--f-display);text-transform:uppercase}
.addslot{height:36px;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.2);color:var(--mut);font-size:13px;cursor:pointer;margin-bottom:10px}.addslot:hover{color:var(--ink);border-color:var(--acc)}
.foot{grid-column:1/-1;flex-direction:row;align-items:center;gap:36px;padding:0 26px}
.foot>div>b,.big2{display:block;font:italic 800 26px var(--f-display)}.foot span{font-size:12px;color:var(--mut)}
.scr.two{display:grid;grid-template-columns:1fr 1fr;align-content:start}
/* plan */
.plang{display:grid;grid-template-columns:230px 410px minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px;height:100%}
.plang .ttlrow{margin:0}
.call .ch{background:none;padding:0}
.call.asst{margin-top:auto;background:var(--accSoft)}
.slot.libslot{left:50%;top:auto;bottom:6px;display:flex;align-items:center;gap:8px;width:auto;transform:translateX(-50%)}
.slot.libslot .jy{width:46px;height:46px;margin:0}
.libnote{margin-top:4px;font:600 12px Inter;color:var(--mut);white-space:nowrap}
/* training */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:6px 18px 16px}
.wd{padding:10px 12px;background:var(--chip);border-top:4px solid var(--dc);cursor:pointer}.wd:hover{background:rgba(255,255,255,.12)}.wd.lock{cursor:default;opacity:.85}.wd.today{box-shadow:inset 0 0 0 1px var(--acc2)}
.wd span{font-size:12px;color:var(--mut)}.wd b{display:block;font:italic 800 22px var(--f-display);color:var(--dc)}.wd small{font-size:12px;color:var(--mut)}
.trg{display:grid;grid-template-columns:420px 1fr;gap:16px;flex:1;min-height:0;margin-top:16px}
.opts{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}.mdl .opts{padding:0}
.opts.six .ob{min-width:110px}
.ob{flex:1;min-width:120px;text-align:left;padding:10px 14px;background:var(--chip);border:2px solid transparent;display:flex;flex-direction:column;gap:3px}
.ob b{font:italic 800 18px var(--f-display);text-transform:uppercase;letter-spacing:.03em}.ob span{font-size:12px;color:var(--mut)}
.ob:hover{background:rgba(255,255,255,.13)}.ob.on{border-color:var(--acc);background:var(--accSoft)}
.ob.row1{flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-bottom:6px}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:700 11px Inter;letter-spacing:.08em;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--pnlSolid);z-index:1;white-space:nowrap}
.tbl th.s{cursor:pointer}.tbl th.s.on{color:var(--acc2)}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr[data-a]{cursor:pointer}.tbl tr[data-a]:hover td{background:var(--chip)}
.tbl tr.vh td{font:italic 800 15px var(--f-display);letter-spacing:.05em;color:var(--mut);text-transform:uppercase;padding-top:14px}
.tbl tr.cut td{border-bottom:2px dashed var(--acc2)}
.tbl .res{font:italic 800 19px var(--f-display)}
.tbl.dm td{vertical-align:top;white-space:normal}
/* player */
.plg{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:170px 1fr;gap:16px;height:100%}
.phero{grid-column:1/-1;flex-direction:row;align-items:center;gap:24px;padding:0 26px;background:linear-gradient(100deg,var(--accSoft),var(--pnl) 45%)}
.pbig{font:italic 800 120px/1 var(--f-display);color:var(--acc2);width:150px;text-align:center}
.pname{font:italic 800 46px/1.05 var(--f-display);text-transform:uppercase}
.pfacts{display:flex;gap:16px;margin-top:6px;color:var(--mut);font-size:15px}
.povr{text-align:center;padding:0 12px}.povr b{display:block;font:italic 800 56px/1 var(--f-display)}.povr span{font:700 11px Inter;letter-spacing:.14em;color:var(--mut)}
.formc{display:flex;gap:14px;align-items:flex-end;padding:20px 22px 10px;height:150px}.formc div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;height:100%}.formc i{width:100%;display:block}.formc span{font-size:11px;color:var(--mut)}
/* staff */
.stg{display:grid;grid-template-columns:1fr 470px;gap:16px;flex:1;min-height:0}
.stcards{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.stc{background:var(--pnl);padding:16px 18px;display:flex;flex-direction:column;gap:6px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);border-left:4px solid transparent}
.stc:hover{background:var(--pnlSolid)}.stc.on{border-left-color:var(--acc);background:linear-gradient(100deg,var(--accSoft),var(--pnl))}
.stc b{font:italic 800 24px var(--f-display);text-transform:uppercase}.stc span{font-size:13px;color:var(--mut);line-height:1.4}.stw{margin-top:auto;font:italic 800 20px var(--f-display);color:var(--acc2)}
/* comps */
.cmg{display:grid;grid-template-columns:280px 1fr;gap:16px;flex:1;min-height:0}
.cl{cursor:pointer}.cl:hover{background:var(--chip)}.cl.on{background:var(--accSoft);box-shadow:inset 4px 0 0 var(--acc)}
.cl b{font:italic 800 17px var(--f-display);text-transform:uppercase}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.olyc{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:8px 20px 16px}
.olyc div{height:104px;border:2px dashed rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:0 6px}
.olyc div.q{border:2px solid var(--acc);background:var(--accSoft)}.olyc b{font:italic 800 18px var(--f-display)}.olyc span{font-size:11px;color:var(--mut)}
/* finance */
.fing{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:auto 250px 1fr;gap:16px;flex:1;min-height:0}
.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--pnl);padding:12px 20px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.kpi span{font:700 11px Inter;letter-spacing:.12em;color:var(--mut);display:block}.kpi b{font:italic 800 32px var(--f-display)}
.mdl .kpi{background:var(--chip)}
/* start */
.startbg{position:absolute;inset:0;display:grid;grid-template-columns:1fr 560px;gap:40px;padding:80px 80px 60px;background:radial-gradient(900px 600px at 20% 30%,var(--accSoft),transparent 70%)}
.bigbrand{display:flex;align-items:center;gap:18px;color:var(--acc)}.bigbrand b{display:block;font:italic 800 120px/0.9 var(--f-display);letter-spacing:.04em;color:var(--ink)}.bigbrand span{font:700 14px Inter;letter-spacing:.28em;color:var(--acc2)}
.startcopy{font-size:20px;line-height:1.55;color:var(--mut);max-width:560px;margin-top:30px}
.startbtns{display:flex;gap:12px;margin-top:34px}
.startR{align-self:center}
.ncard{display:flex;align-items:center;gap:18px;padding:16px 20px;background:var(--pnl);margin-bottom:10px;cursor:pointer;border-left:5px solid transparent;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.ncard:hover{background:var(--pnlSolid)}.ncard.on{border-left-color:var(--nc);background:linear-gradient(90deg,var(--accSoft),var(--pnl))}
.ncard b{display:block;font:italic 800 28px var(--f-display);text-transform:uppercase}.ncard span{font-size:13px;color:var(--mut)}
.ncard .diff{font:italic 800 15px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--acc2)}
.ncard.lock{opacity:.45;cursor:default}
.seg2{display:flex;gap:4px}.seg2 button{height:32px;padding:0 14px;background:var(--chip);color:var(--mut);font:700 13px Inter;border-radius:4px}.seg2 .on{background:var(--acc);color:var(--accInk)}.seg2 .dis{opacity:.5;cursor:default}
/* modal & drawer */
.mov{position:absolute;inset:0;background:rgba(3,7,16,.62);display:grid;place-items:center;z-index:40}
.mdl{background:var(--pnlSolid);max-height:760px;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.55);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));position:relative}
.mdl::after{content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:var(--acc)}
.mh{display:flex;align-items:center;gap:10px;padding:16px 22px 10px}
.mb{padding:4px 22px 18px;overflow:auto}.mb .row{padding-left:4px;padding-right:4px}
.mf{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
.x{width:34px;height:34px;font-size:24px;color:var(--mut)}.x:hover{color:var(--ink)}
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--acc2);color:var(--acc2Ink);padding:12px 22px;font:700 15px Inter;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
.drawer{position:absolute;right:0;top:0;bottom:0;width:430px;background:#0b1222;border-left:1px solid rgba(255,255,255,.12);z-index:70;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.5);color:#eef0f6}
.drawer p{font-size:14px;line-height:1.55;color:#c5cce0}.drawer .mb{flex:1}
.code{font:13px ui-monospace,Menlo,monospace;background:rgba(255,255,255,.06);padding:10px 12px;border-radius:4px;line-height:1.5;word-break:break-word}
.srcb{display:inline-block;font:800 10px Inter;letter-spacing:.06em;padding:3px 7px;border-radius:3px;background:var(--sc);color:#0b1222;white-space:nowrap}
.srcb.st{margin-right:6px}
.srcb.auto{position:absolute;right:22px;top:4px;z-index:30;pointer-events:none;max-width:260px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.datamode .srcon{outline:2px dashed var(--sc);outline-offset:-3px;cursor:help!important}
.datamode .srcrel{position:relative}
.datamode .srcon:hover{outline-style:solid;outline-width:3px}
/* live */
.live{position:absolute;inset:0;display:grid;grid-template-columns:1fr 400px;grid-template-rows:64px 1fr 34px 70px;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.ltop{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding-right:18px;background:var(--top);border-bottom:1px solid var(--line)}
.brand.sm{height:64px}.brand.sm b{font-size:24px}
.phase{display:flex;align-items:center;gap:8px;font:italic 800 16px var(--f-display);letter-spacing:.12em;padding:6px 14px;background:var(--chip)}
.phase i{width:9px;height:9px;border-radius:50%;background:#9db0c9}.phase.rally i{background:var(--good);animation:pulse .6s infinite}.phase.rv i{background:var(--mid)}.phase.to i{background:var(--acc)}
.bug{display:flex;align-items:stretch;height:48px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.bt{display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--pnlSolid);font:italic 800 26px var(--f-display);min-width:150px}.bt.h{clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}.bt.a{justify-content:flex-end;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.srv{width:10px;height:10px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.25)}.srv.on{background:#f2c230;border-color:#f2c230}
.bs{width:40px;display:grid;place-items:center;background:var(--acc2);color:var(--acc2Ink);font:italic 800 26px var(--f-display)}
.bp{display:flex;background:#fff;color:#0b1222}.bp span{width:62px;display:grid;place-items:center;font:italic 800 34px var(--f-display)}.bp span+span{border-left:1px solid #ccd}
.lcourt{padding:20px 20px 6px 24px;min-height:0}
.ovl{position:absolute;left:0;top:64px;width:1040px;height:600px;display:grid;place-items:center;pointer-events:none}.ovl .box{pointer-events:auto;background:var(--pnlSolid);padding:22px 30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);min-width:340px}.ovl .box.wide{min-width:620px;text-align:left}
.spin{width:34px;height:34px;margin:0 auto 10px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--acc2);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.lside{grid-row:2/4;grid-column:2;display:flex;flex-direction:column;gap:12px;padding:16px 18px 0 0;min-height:0}
.asst2{background:linear-gradient(90deg,var(--accSoft),var(--pnl));padding:12px 16px;font-size:14px;line-height:1.45;flex:none}.asst2 b{display:block;font:italic 800 18px var(--f-display);text-transform:uppercase}.asst2 span{color:var(--mut)}.asst2 div{margin-top:8px}.asst2 .k{margin:0 0 4px}
.teamst{display:grid;grid-template-columns:1fr 70px 60px 60px;gap:8px 6px;padding:14px 16px;font-size:14px;align-items:center}.teamst .h{font:700 10px Inter;letter-spacing:.1em;color:var(--mut);text-align:center}.teamst .v{text-align:center;font:italic 800 19px var(--f-display)}
.fi{display:flex;gap:10px;align-items:center;padding:7px 16px;border-top:1px solid var(--line);font-size:13px}.bdg{width:5px;height:24px;flex:none}.sc{font:italic 800 16px var(--f-display);width:44px}
.hint{grid-column:1;padding:6px 24px;font-size:14px;color:var(--mut)}.hint b{color:var(--ink)}
.cbar{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--top);border-top:1px solid var(--line)}
.cbar .btn{padding:0 12px}.cbar .btn.big{padding:0 18px}.cbar{gap:8px}
.grp{display:flex;gap:4px;padding-left:10px;border-left:1px solid var(--line)}
.mtx{width:100%;border-collapse:collapse;font-size:14px}.mtx th,.mtx td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center}.mtx td:first-child{text-align:left;font-weight:600}
.y1{color:var(--good);font-weight:700}.q1{color:var(--mid);font-weight:700}.n1{color:var(--mut)}
.adv{background:var(--chip);padding:12px 14px;margin-bottom:8px}.adv b{display:block;font:italic 800 18px var(--f-display);text-transform:uppercase;margin-bottom:2px}.adv p{margin:2px 0 8px;font-size:13px;color:var(--mut)}.adv.done{opacity:.6}
.brk .brkg{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:20px 20px 0}
.brk{grid-template-rows:64px auto 1fr 70px}.brk .posthero+.brkg{padding-top:0}
.brk>.cbar{grid-row:4}
.why{display:flex;align-items:center;gap:18px;padding:14px 20px;border-top:1px solid var(--line)}.why>b{font:italic 800 40px var(--f-display);width:96px}.why div b{display:block;font:italic 800 19px var(--f-display);text-transform:uppercase}.why span{font-size:13px;color:var(--mut)}
.posthero{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:50px;padding:20px}.posthero.sm{gap:30px;padding:6px}
.psc{font:italic 800 84px/1 var(--f-display);text-align:center}.psc span{opacity:.4}.posthero.sm .psc{font-size:56px}

.H{white-space:nowrap}
.plang .call{padding:9px 16px 10px}.plang .call b{font-size:19px}.plang .call .k{margin:0}
.courtbg{position:absolute;right:-60px;bottom:-40px;width:820px;color:rgba(255,255,255,.06);pointer-events:none}
.startbg{grid-template-columns:minmax(0,1fr) 760px;gap:32px;padding:40px}.startL .bigbrand{gap:12px}.startL .bigbrand b{font-size:96px}.startL .bigbrand span{font-size:11px;letter-spacing:.22em}.startL{align-self:center}
.startR{align-self:stretch;min-height:0}.startR>.ph{min-height:64px}.startR>.ph .H{font-size:30px}
.ctry{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 20px 14px}
.ctry button{height:64px;display:flex;align-items:center;gap:10px;padding:0 10px;text-align:left;background:var(--chip);border-left:4px solid transparent}
.ctry button:hover{background:rgba(255,255,255,.13)}.ctry button.on{border-left-color:var(--acc);background:var(--accSoft)}
.ctry b{display:block;font:italic 800 20px var(--f-display);text-transform:uppercase;white-space:nowrap}.ctry span{font-size:12px;color:var(--mut)}
.csel{display:flex;align-items:center;gap:16px;margin:0 20px;padding:14px 16px;background:linear-gradient(90deg,var(--accSoft),var(--chip))}
.csel b{display:block;font:italic 800 28px var(--f-display);text-transform:uppercase}.csel span{display:block;font-size:13px;color:var(--mut)}
.cmg>*,.two2>*,.three>*,.stg>*,.schedg>*,.sqg>*{min-width:0}
.two2 .tbl td,.two2 .tbl th{padding:7px 6px}
.ph small{white-space:nowrap}.lt .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vs .cdw .tag{white-space:nowrap}

/* broadcast stat graphics */
.sbars{display:flex;flex-direction:column;gap:10px;padding:6px 18px 16px}
.sbh{display:flex;justify-content:space-between;margin-bottom:2px}.sbh span{display:flex;align-items:center;gap:8px}.sbh b{font:italic 800 20px var(--f-display);letter-spacing:.05em}
.sb{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px}
.sb>b{font:italic 800 26px/1 var(--f-display);color:var(--mut)}.sb>b:last-child{text-align:right}.sb>b.hi{color:var(--ink)}
.sbm{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.sbm em{font:italic 800 15px var(--f-display);letter-spacing:.12em;color:var(--mut);font-style:italic;min-width:96px;text-align:center}
.sbm span{height:8px;background:rgba(255,255,255,.08);display:flex}.sbm .L{justify-content:flex-end}.sbm i{display:block;height:100%;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.setbox{display:inline-grid;margin:10px auto 0;font:italic 800 18px var(--f-display);background:rgba(0,0,0,.18)}
.posthero>div{display:flex;flex-direction:column;align-items:center}
.setbox .sh,.setbox .sr{display:grid;grid-auto-flow:column;grid-auto-columns:48px;grid-template-columns:110px;align-items:center}
.setbox .sh span{font:700 10px Inter;letter-spacing:.12em;color:var(--mut);text-align:center;padding:6px 0 4px}
.setbox .sr{border-top:1px solid var(--line)}.setbox .sr span{display:flex;align-items:center;gap:8px;padding:6px 10px}.setbox .sr i{text-align:center;color:var(--mut);font-style:normal;padding:6px 0}.setbox .sr i.w{color:var(--accInk);background:var(--acc)}
.ldr{display:flex;align-items:center;gap:10px;padding:8px 18px;border-top:1px solid var(--line)}.ldr.me{background:var(--accSoft)}
.ldr .lk{font:italic 800 20px var(--f-display);width:20px;color:var(--mut);font-style:italic}.ldr b{flex:1;font:italic 800 19px var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.ldr span:not(.no){font:700 11px Inter;letter-spacing:.1em;color:var(--mut)}.ldr i{font:italic 800 24px var(--f-display);min-width:34px;text-align:right;color:var(--acc2)}
.rotr{display:grid;grid-template-columns:40px 1fr 1fr;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.rotr em{font:italic 800 20px var(--f-display);font-style:italic}.rotr>div{display:flex;align-items:center;gap:8px}.rotr span{font:700 10px Inter;letter-spacing:.12em;color:var(--mut)}.rotr .bar{flex:1;width:auto}.rotr b{font:italic 800 17px var(--f-display);width:40px;text-align:right}
.rmeta{text-align:center;font:italic 800 15px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:4px 0 14px}
.mdl .three .ldr{padding:7px 4px}.mdl .sbars{padding:0}

.trs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.trs em{font:italic 800 12px var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;background:var(--chip);color:var(--acc2);font-style:italic}
.srow{display:flex;align-items:center;gap:12px;padding:8px 20px;border-top:1px solid var(--line);cursor:pointer;border-left:4px solid transparent}.srow:hover{background:var(--chip)}.srow.on{background:var(--accSoft);border-left-color:var(--acc)}
.srow b{display:block;font:italic 800 18px var(--f-display);text-transform:uppercase}.srow span{font-size:12px;color:var(--mut)}.srow .sw{font-size:13px;white-space:nowrap}
.sprof{margin:12px 16px 16px;padding:14px 16px;background:rgba(0,0,0,.18);flex:1;min-height:0;overflow:auto}
.sph{display:flex;align-items:center;gap:12px;margin-bottom:10px}.sph b{display:block;font:italic 800 24px var(--f-display);text-transform:uppercase}.sph span{font-size:12px;color:var(--mut)}
.sat{display:grid;grid-template-columns:130px 1fr 28px 30px;gap:10px;align-items:center;padding:5px 0;font-size:14px}.sat b{font:italic 800 19px var(--f-display);text-align:right}.sat em{font:700 12px Inter;font-style:normal}
.trt{padding:7px 10px;background:var(--chip);margin-bottom:6px;border-left:3px solid var(--acc2)}.trt b{display:block;font:italic 800 16px var(--f-display);text-transform:uppercase;letter-spacing:.03em}.trt span{font-size:12px;color:var(--mut)}

/* ===== typography unification ===== */
.pn{font:italic 800 17px var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.lt .nm a.pn{font-size:inherit}
.row b,.tbl td b,.lu td b{font-family:var(--f-display);font-style:italic;font-weight:800;font-size:1.18em;letter-spacing:.02em}
.tbl td b{text-transform:uppercase}.tbl td b.res{text-transform:none}
.lu .pchip{font:italic 800 16px var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.fi b{font:italic 800 15px var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.mtx th{font:700 11px Inter;letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.mtx td:first-child{font:italic 800 17px var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.mtx td{font:italic 800 16px var(--f-display)}.mtx td.n1{font-family:Inter;font-style:normal}
.ldr b .tag{vertical-align:middle;margin-left:6px}
.kpi b{letter-spacing:.01em}
.mdl p{font-size:15px;line-height:1.55;color:var(--ink)}
.adv{font-size:13px;color:var(--mut)}.adv b{color:var(--ink)}
.trt b,.srow b,.sph b{letter-spacing:.03em}

.gcard{align-items:stretch}.gcard .gfx{width:100%;height:auto;margin-bottom:6px;background:rgba(0,0,0,.18)}
.gfx .gl{font:700 10px Inter;fill:var(--mut);letter-spacing:.08em}.gfx .gv{font:italic 800 14px var(--f-display);fill:var(--ink)}.gfx .gs{font:italic 800 18px var(--f-display);fill:var(--bad)}.gfx .gk{font:italic 800 16px var(--f-display);fill:var(--acc2Ink)}
.gfx .ga{fill:none;stroke:var(--acc2);stroke-width:2.5}.gfx .ga.f{stroke-dasharray:5 3}
.fx{font:italic 800 15px var(--f-display);letter-spacing:.04em;margin-top:2px}
.opts.six .gcard{min-width:120px}

.gcard .gfx{height:74px;width:100%}
.cl span{font:italic 800 15px var(--f-display);text-transform:uppercase;letter-spacing:.03em}
/* CM-style commentary strip */
.comm{position:absolute;left:44px;top:654px;width:936px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--cc,#223);color:var(--ci,#fff);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:3}
.comm span{font:italic 800 22px var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.comm.big span{font-size:24px}
.comm.flash.invert{background:var(--ci);color:var(--cc)}
.live .hint{display:none}
.gcard .gfx{height:92px}
/* Inline advice uses the same compact rows as the approved broadcast panels. */
.tactic-preview{flex:none;min-height:104px}
.tactic-preview .gfx{display:block;width:144px;height:90px;flex:0 0 144px;background:rgba(0,0,0,.18)}
.tactic-preview b{min-width:0}
.call-navigation{margin-bottom:12px}

/* design system page */
.dsroot{position:absolute;inset:0;display:flex;flex-direction:column}
.dstop{height:64px;display:flex;align-items:center;gap:16px;padding-right:18px;background:var(--top);border-bottom:1px solid var(--line);flex:none}
.dsbody{flex:1;overflow:auto;padding:20px 24px 40px}
.dss{margin-bottom:26px}.dsh{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.dss code,.dsd code{font:12px ui-monospace,Menlo,monospace;color:var(--acc2)}
.dsg{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:12px}
.dsw{background:var(--chip);padding:8px}.dsw i{display:block;height:44px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.dsw b{display:block;font:12px ui-monospace,Menlo,monospace}.dsw span{font-size:11px;color:var(--mut)}
.dsty{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}.dsty>div{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid var(--line)}.dsl{font-size:11px;color:var(--mut)}
.dsg2{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dsg3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dsd{display:flex;flex-direction:column;gap:6px}.dsx{padding:12px;background:rgba(0,0,0,.18);display:flex;align-items:center;min-height:60px}.dsx>*{flex:1}.dsx>.btn,.dsx>.tag,.dsx>.cont{flex:none}
.dsrules{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dsrules div{background:var(--chip);padding:12px 14px;font-size:13px;color:var(--mut)}.dsrules b{display:block;font:italic 800 18px var(--f-display);text-transform:uppercase;color:var(--ink)}