/* KingArb · production stylesheet. Requires tokens.css (dark default + html[data-theme=light]). No inline styles are needed by any view. */

/* ============================================================ 0. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + var(--sub-h) + 12px)}
body{margin:0;min-height:100vh;background:var(--bg-0);color:var(--fg-1);font:400 var(--fs-2)/var(--lh-body) var(--font-sans);font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--status-h) + 24px)}
h1,h2,h3,h4{margin:0;color:var(--fg-0);font-weight:600;line-height:var(--lh-tight)}
h1{font-size:var(--fs-5);letter-spacing:-.01em}
h2{font-size:var(--fs-4)}
h3{font-size:var(--fs-3)}
p{margin:0}
a{color:inherit;text-decoration:none}
a.link{color:var(--fg-0);border-bottom:1px solid var(--line-3)}
a.link:hover{border-bottom-color:var(--gold)}
b,strong{font-weight:600;color:var(--fg-0)}
small{font-size:var(--fs-1)}
img,svg{display:block}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--gold-a30);color:var(--fg-0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* icons: one sprite, one stroke, currentColor */
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.ic.xs{width:11px;height:11px}
.ic.s{width:14px;height:14px}
.ic.l{width:20px;height:20px}
.ic.xl{width:24px;height:24px}

/* ============================================================ 1. utilities */
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{text-align:right}
.muted{color:var(--fg-2)}
.dim{color:var(--fg-3)}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.warn{color:var(--warn)}
.gold{color:var(--gold)}
.t-0{font-size:var(--fs-0)}
.t-1{font-size:var(--fs-1)}
.t-2{font-size:var(--fs-2)}
.t-6{font-size:var(--fs-6)}
.cap{font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2)}
.cap.dim{color:var(--fg-3)}
.meta{font:500 var(--fs-0)/1.4 var(--font-mono);letter-spacing:.03em;color:var(--fg-3)}
.meta b{color:var(--fg-2);font-weight:500}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.row{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.row.between{justify-content:space-between}
.row.wrapping{flex-wrap:wrap}
.row.end{justify-content:flex-end}
.grow{flex:1 1 auto;min-width:0}
.stack{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.stack.g3{gap:var(--s-3)}
.ml-auto{margin-left:auto}
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}
.w-full{width:100%}
.grid{display:grid;gap:var(--s-3)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hr{height:1px;background:var(--line-1);border:0;margin:0}
.desk-only{display:initial}
.mob-only{display:none}

/* ============================================================ 2. shell: top bar */
.top{position:sticky;top:0;z-index:var(--z-top);height:var(--top-h);display:flex;align-items:center;gap:var(--s-2);padding:0 var(--gutter);background:var(--bg-1);border-bottom:1px solid var(--line-1);min-width:0}
.brand{display:flex;align-items:center;gap:10px;height:var(--top-h);color:var(--fg-0);font-weight:600;letter-spacing:.01em;white-space:nowrap;flex:none}
.brand .mark{width:28px;height:28px;border:1px solid var(--gold-a30);border-radius:var(--r-1);display:grid;place-items:center;color:var(--gold);background:var(--gold-a08);flex:none}
.brand .mark .ic{width:18px;height:18px}
.brand em{font-style:normal;color:var(--gold)}
.nav{display:flex;align-items:stretch;gap:0;margin-left:var(--s-3);min-width:0;flex:1 1 auto;overflow:hidden;height:var(--top-h)}
.nav a{display:flex;align-items:center;gap:7px;height:var(--top-h);padding:0 12px;color:var(--fg-2);font-weight:500;white-space:nowrap;position:relative;border-bottom:2px solid transparent;border-top:2px solid transparent}
.nav a:hover{color:var(--fg-0);background:var(--bg-2)}
.nav a.on{color:var(--fg-0);border-bottom-color:var(--gold)}
.nav a .ic{color:var(--fg-3)}
.nav a.on .ic{color:var(--gold)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.status{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-1);font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.03em;color:var(--fg-2);white-space:nowrap;background:var(--bg-2)}
.status b{color:var(--fg-0);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px var(--pos-a25);flex:none}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-a25)}
.dot.neg{background:var(--neg);box-shadow:0 0 0 3px var(--neg-a25)}
.dot.off{background:var(--fg-3);box-shadow:none}
.avatar{width:30px;height:30px;border-radius:var(--r-1);background:var(--bg-3);border:1px solid var(--line-2);display:grid;place-items:center;font:600 var(--fs-1)/1 var(--font-mono);color:var(--fg-0);text-transform:uppercase;flex:none}
.avatar.lg{width:40px;height:40px;font-size:var(--fs-4)}
.user{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border-radius:var(--r-1);color:var(--fg-1);border:1px solid transparent}
.user:hover{background:var(--bg-3);border-color:var(--line-2)}
.user .name{font-weight:500;max-width:120px}
.kbd{display:inline-block;font:500 var(--fs-mg)/1 var(--font-mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:3px 5px 2px;color:var(--fg-2);background:var(--bg-1);vertical-align:middle;min-width:18px;text-align:center}
.search{display:flex;align-items:center;gap:8px;height:32px;width:220px;padding:0 8px 0 10px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-0);color:var(--fg-3);cursor:text}
.search:hover{border-color:var(--line-3)}
.search span{flex:1;font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search input{flex:1;min-width:0;border:0;background:none;color:var(--fg-0);font-size:var(--fs-1);outline:none}

/* context strip under the top bar on sub-pages: breadcrumb left, live context right */
.ctxbar{display:flex;align-items:center;gap:12px;min-height:var(--sub-h);padding:0 var(--gutter);border-bottom:1px solid var(--line-1);background:var(--bg-1);min-width:0}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--fg-2);white-space:nowrap;min-width:0;overflow:hidden}
.crumbs a:hover{color:var(--fg-0)}
.crumbs .sep{color:var(--fg-3)}
.crumbs b{color:var(--fg-0);font-weight:500}
.ctxbar .meta{margin-left:auto;display:flex;gap:14px;white-space:nowrap;flex:none}

/* ============================================================ 3. shell: sport bar */
.sportbar{position:sticky;top:var(--top-h);z-index:var(--z-sub);height:var(--sub-h);display:flex;align-items:stretch;padding:0 var(--gutter);background:var(--bg-1);border-bottom:1px solid var(--line-1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0}
.sportbar::-webkit-scrollbar{display:none}
.sportbar a{display:flex;align-items:center;gap:7px;height:var(--sub-h);padding:0 12px;color:var(--fg-2);white-space:nowrap;border-bottom:2px solid transparent;font-weight:500;flex:none}
.sportbar a .ic{color:var(--fg-3)}
.sportbar a:hover{color:var(--fg-0)}
.sportbar a .n{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);padding:3px 5px;border:1px solid var(--line-1);border-radius:2px;min-width:22px;text-align:center}
.sportbar a.on{color:var(--fg-0);border-bottom-color:var(--gold)}
.sportbar a.on .ic{color:var(--gold)}
.sportbar a.on .n{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.sportbar .meta{margin-left:auto;display:flex;align-items:center;gap:14px;padding-left:16px;white-space:nowrap;flex:none}

/* ============================================================ 4. shell: KPI strip (home) */
.kpis{display:flex;align-items:stretch;border-bottom:1px solid var(--line-1);background:var(--bg-0);overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter);min-width:0}
.kpis::-webkit-scrollbar{display:none}
.kpi{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 18px 8px 0;margin-right:18px;border-right:1px solid var(--line-1);white-space:nowrap;flex:none;min-height:52px}
.kpi:last-of-type{border-right:0;margin-right:0}
.kpi .v{font:600 var(--fs-4)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-0);display:flex;align-items:baseline;gap:6px}
.kpi .v small{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3)}
.kpi .v.pos{color:var(--pos)}
.kpi .v.gold{color:var(--gold)}
.kpis .meta{margin-left:auto;align-self:center;display:flex;gap:14px;white-space:nowrap;flex:none;padding-left:16px}

/* ============================================================ 5. shell: toolbar (sticky filters) */
.toolbar{position:sticky;top:calc(var(--top-h) + var(--sub-h));z-index:var(--z-toolbar);display:flex;align-items:center;gap:8px;min-height:var(--bar-h);padding:0 var(--gutter);background:var(--bg-0);border-bottom:1px solid var(--line-1);min-width:0}
.toolbar .filters{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.toolbar .filters>*{flex:none}
.toolbar .filters .in{width:auto;height:30px;font-size:var(--fs-1);padding-left:8px}
.toolbar .filters .inwrap{width:110px}
.toolbar .filters .inwrap .in{width:100%}
.toolbar .lab{font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-3);margin-left:6px;white-space:nowrap}
.toolbar .check{min-height:30px;font-size:var(--fs-1);margin-left:4px;color:var(--fg-2);white-space:nowrap}
.toolbar .vsep{width:1px;height:20px;background:var(--line-2);margin:0 6px;flex:none}
.toolbar .views{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.toolbar .mob{display:none}
.subrow{display:flex;align-items:center;gap:8px;min-width:0}
.subrow .chips{flex:1 1 auto}
.subrow .right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;padding-left:8px}

/* ============================================================ 6. shell: bottom status strip (desktop) + mobile tab bar */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-status);height:var(--status-h);display:flex;align-items:center;gap:0;padding:0 var(--gutter);background:var(--bg-1);border-top:1px solid var(--line-1);font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.04em;color:var(--fg-3);white-space:nowrap;overflow:hidden}
.statusbar span{display:flex;align-items:center;gap:6px;padding-right:18px;margin-right:18px;border-right:1px solid var(--line-1)}
.statusbar span:last-child{border-right:0;margin-left:auto;padding-right:0;margin-right:0;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:var(--status-h)}
.statusbar b{color:var(--fg-2);font-weight:500}
.statusbar .dot{width:5px;height:5px;box-shadow:none}
.tabbar{display:none}

/* ============================================================ 7. buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ctl);padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-2);color:var(--fg-0);font-weight:500;font-size:var(--fs-2);white-space:nowrap;cursor:pointer;user-select:none;text-decoration:none;flex:none}
.btn:hover{background:var(--bg-3);border-color:var(--line-3)}
.btn:active{background:var(--bg-4)}
.btn.primary{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--gold-ink);font-weight:600}
.btn.primary:hover{background:var(--gold-fill-hi);border-color:var(--gold-fill-hi)}
.btn.ghost{background:none;border-color:transparent;color:var(--fg-2)}
.btn.ghost:hover{color:var(--fg-0);background:var(--bg-3);border-color:var(--line-2)}
.btn.outline{background:none}
.btn.danger{color:var(--neg);border-color:var(--neg-a25);background:none}
.btn.danger:hover{background:var(--neg-a10)}
.btn.danger.solid{background:var(--neg);border-color:var(--neg);color:#fff}
.btn.sm{height:28px;padding:0 9px;font-size:var(--fs-1)}
.btn.lg{height:var(--ctl-lg);padding:0 18px;font-size:var(--fs-3)}
.btn.wide{width:100%}
.btn .ic{color:currentColor}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:default;pointer-events:none}
.btn .n{font:500 var(--fs-0)/1 var(--font-mono);color:var(--gold);border:1px solid var(--gold-a30);background:var(--gold-a08);border-radius:2px;padding:3px 5px}
.ibtn{width:var(--ctl);height:var(--ctl);display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--r-1);color:var(--fg-2);background:none;cursor:pointer;flex:none;padding:0}
.ibtn:hover{color:var(--fg-0);background:var(--bg-3);border-color:var(--line-2)}
.ibtn.on{color:var(--gold);background:var(--gold-a08);border-color:var(--gold-a30)}
.ibtn.danger:hover{color:var(--neg);background:var(--neg-a10);border-color:var(--neg-a25)}
.ibtn.lg{width:40px;height:40px}
.ibtn.sm{width:28px;height:28px}
.ibtn.sm .ic{width:14px;height:14px}
.ibtn.bordered{border-color:var(--line-2);background:var(--bg-2)}

/* ============================================================ 8. chips (radio groups) / segmented */
.chips{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:8px 0;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips.tight{padding-top:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-1);background:none;color:var(--fg-2);font-size:var(--fs-1);font-weight:500;white-space:nowrap;cursor:pointer;flex:none}
.chip:hover{color:var(--fg-0);border-color:var(--line-3)}
.chip.on,.chip[aria-checked=true]{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.chip .n{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3)}
.chip.on .n,.chip[aria-checked=true] .n{color:var(--gold)}
.chip .ic{width:13px;height:13px}
.chip .mg{width:18px;height:18px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-1);overflow:hidden;flex:none;background:var(--bg-0)}
.seg button,.seg a{height:30px;min-width:32px;padding:0 10px;border:0;background:none;color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-1);font-weight:500;border-right:1px solid var(--line-2);white-space:nowrap}
.seg button:last-child,.seg a:last-child{border-right:0}
.seg button:hover,.seg a:hover{color:var(--fg-0);background:var(--bg-2)}
.seg button.on,.seg a.on,.seg [aria-pressed=true]{color:var(--gold);background:var(--gold-a08)}
.seg.lg button,.seg.lg a{height:36px}
.seg.grow{display:flex}
.seg.grow button{flex:1}

/* ============================================================ 9. badges, monograms, flags */
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:2px;border:1px solid var(--line-2);font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.02em;color:var(--fg-2);white-space:nowrap;vertical-align:middle;max-width:100%}
.badge.pos{color:var(--pos);border-color:var(--pos-a25);background:var(--pos-a10)}
.badge.neg{color:var(--neg);border-color:var(--neg-a25);background:var(--neg-a10)}
.badge.warn{color:var(--warn);border-color:var(--warn-a25);background:var(--warn-a10)}
.badge.gold{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.badge.info{color:var(--info);border-color:var(--info-a10);background:var(--info-a10)}
.badge.fill{background:var(--bg-3);border-color:var(--bg-3);color:var(--fg-1)}
.badge.fill span{overflow:hidden;text-overflow:ellipsis}
.badge .ic{width:11px;height:11px}
.pct{display:inline-flex;align-items:center;justify-content:flex-end;min-width:64px;height:26px;padding:0 8px;border-radius:2px;font:600 var(--fs-3)/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--pos);background:var(--pos-a10);border:1px solid var(--pos-a25);white-space:nowrap}
.pct.neg{color:var(--fg-2);background:var(--bg-3);border-color:var(--line-2)}
.pct.big{height:32px;min-width:84px;font-size:var(--fs-4)}
.pct.sm{height:22px;min-width:60px;font-size:var(--fs-1)}
.margin{font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.03em;color:var(--fg-3);white-space:nowrap}
.margin b{color:var(--fg-2);font-weight:500}
.mg{width:20px;height:20px;border-radius:2px;background:var(--bg-4);border:1px solid var(--line-2);color:var(--fg-1);font:600 var(--fs-mg)/1 var(--font-mono);letter-spacing:.02em;display:inline-grid;place-items:center;flex:none;text-transform:uppercase}
.mg.sm{width:18px;height:18px}
.bk{display:inline-flex;align-items:center;gap:6px;color:var(--fg-1);white-space:nowrap;min-width:0}
.bk:hover{color:var(--fg-0)}
.bk .ic.star{width:11px;height:11px;color:var(--gold)}
.bk .ic.ext{width:11px;height:11px;color:var(--fg-3)}
.bk:hover .ic.ext{color:var(--fg-1)}
.bk .nm{overflow:hidden;text-overflow:ellipsis}
.flags{display:inline-flex;gap:4px;vertical-align:middle;flex-wrap:wrap}
.flag{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:18px;height:18px;border-radius:2px;border:1px solid var(--line-2);color:var(--fg-3);vertical-align:middle;font:600 var(--fs-mg)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:0 4px;white-space:nowrap}
.flag .ic{width:11px;height:11px}
.flag.warn{color:var(--warn);border-color:var(--warn-a25);background:var(--warn-a10)}
.flag.gold{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.flag.new{color:var(--pos);border-color:var(--pos-a25);background:var(--pos-a10)}
.flag.icon{padding:0;width:18px}
.ageb{font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-3);white-space:nowrap}
.ageb.new{color:var(--pos)}
.role{font:600 var(--fs-mg)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:2px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.role.admin{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);white-space:nowrap}
.st .dot{width:6px;height:6px;box-shadow:none}

/* ============================================================ 10. forms */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span,label.lbl,.lbl{font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-3)}
.field>span.hint{font:400 var(--fs-1)/1.4 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--fg-3)}
.in,select.in,textarea.in{height:36px;width:100%;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-0);color:var(--fg-0);font:500 var(--fs-2)/1 var(--font-sans);font-variant-numeric:tabular-nums;min-width:0}
.in.mono{font-family:var(--font-mono)}
.in:hover{border-color:var(--line-3)}
.in:focus{border-color:var(--gold);box-shadow:none;outline:none}
.in::placeholder{color:var(--fg-3)}
.in.sm{height:30px;font-size:var(--fs-1)}
.in.lg{height:var(--ctl-lg);font-size:var(--fs-3)}
.in.center{text-align:center}
.in[aria-invalid=true]{border-color:var(--neg)}
.in.w-num{width:140px}
.in.w-time{width:76px}
.in.w-sel{width:240px}
textarea.in{height:auto;padding:8px 10px;line-height:1.4;resize:vertical}
select.in{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f9a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;cursor:pointer}
input[type=number].in{-moz-appearance:textfield}
input[type=number].in::-webkit-outer-spin-button,input[type=number].in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inwrap{position:relative;display:flex;align-items:center;min-width:0;width:100%}
.inwrap .in{padding-right:36px}
.inwrap .suffix{position:absolute;right:10px;color:var(--fg-3);font:500 var(--fs-1)/1 var(--font-mono);pointer-events:none}
.inwrap .eye{position:absolute;right:2px;top:2px;bottom:2px;width:32px;display:grid;place-items:center;border:0;background:none;color:var(--fg-3);cursor:pointer;border-radius:2px}
.inwrap .eye:hover{color:var(--fg-0);background:var(--bg-3)}
.inwrap.prefix .in{padding-left:34px}
.inwrap .pre{position:absolute;left:10px;color:var(--fg-3);pointer-events:none}
/* unit input: fixed shared width, unit sits in its own cell inside the border */
.inwrap.unit{width:140px;flex:none}
.inwrap.unit .in{padding-right:48px;text-align:right;font-family:var(--font-mono)}
.inwrap.unit .suffix{right:1px;top:1px;bottom:1px;height:auto;display:flex;align-items:center;justify-content:center;width:40px;border-left:1px solid var(--line-1);background:var(--bg-1);border-radius:0 2px 2px 0}
.inwrap.unit.wide{width:100%}
.hint{font-size:var(--fs-1);color:var(--fg-3);line-height:1.4}
.hint.err{color:var(--neg)}
.check{display:flex;align-items:center;gap:9px;min-height:32px;cursor:pointer;color:var(--fg-1);font-size:var(--fs-2);user-select:none}
.check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--line-3);border-radius:2px;background:var(--bg-0);display:grid;place-items:center;flex:none;cursor:pointer}
.check input:checked{border-color:var(--gold-fill);background:var(--gold-fill)}
.check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);transform:translateY(-1px) rotate(-45deg)}
.check .ic{width:14px;height:14px}
.switch{position:relative;width:36px;height:22px;border-radius:11px;background:var(--bg-4);border:1px solid var(--line-3);appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-2);transition:transform .15s}
.switch:checked{background:var(--gold-a15);border-color:var(--gold)}
.switch:checked::after{background:var(--gold);transform:translateX(14px)}
.switchrow{display:flex;align-items:center;gap:10px;min-height:var(--touch);cursor:pointer;color:var(--fg-1)}
.switchrow>span:first-child{display:flex;flex-direction:column;min-width:0}
.switchrow .lab{font-weight:500;color:var(--fg-0)}
.switchrow .hint{margin-top:2px}
.switchrow .switch{margin-left:auto}
.radio-row{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-2);border-radius:var(--r-1);overflow:hidden;width:100%}
.radio-row label{display:flex;align-items:center;gap:10px;min-height:var(--touch);padding:0 12px;border-bottom:1px solid var(--line-1);cursor:pointer;color:var(--fg-1)}
.radio-row label:last-child{border-bottom:0}
.radio-row label:hover{background:var(--bg-2)}
.radio-row input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border:1px solid var(--line-3);border-radius:50%;flex:none;display:grid;place-items:center}
.radio-row input:checked{border-color:var(--gold)}
.radio-row input:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.radio-row .hint{margin-left:auto;text-align:right}
.otp{display:flex;gap:6px;align-items:center}
.otp .in{width:44px;height:48px;padding:0;text-align:center;font:600 var(--fs-6)/1 var(--font-mono);flex:none}
.otp .gap{width:6px;height:1px;background:var(--line-3);flex:none}
.pw-meter{display:flex;gap:3px;margin-top:6px;align-items:center}
.pw-meter i{height:3px;flex:1;background:var(--line-2);border-radius:1px}
.pw-meter i.on{background:var(--pos)}
.pw-meter[data-level="1"] i.on{background:var(--neg)}
.pw-meter[data-level="2"] i.on{background:var(--warn)}
.pw-meter .lvl{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);margin-left:6px;min-width:44px;text-align:right}
.code{font:400 var(--fs-1)/1.5 var(--font-mono);background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--r-1);padding:8px 10px;color:var(--fg-1);white-space:pre-wrap;word-break:break-all;margin:0;user-select:all;width:100%}
.form-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form-acts .hint{flex:1 1 200px}
fieldset.fs{border:1px solid var(--line-1);border-radius:var(--r-2);padding:12px 14px;margin:0;min-width:0}
fieldset.fs legend{font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2);padding:0 6px}

/* ============================================================ 11. panels */
.panel{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-2);min-width:0}
.panel>.head{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border-bottom:1px solid var(--line-1);flex-wrap:wrap}
.panel>.head h2,.panel>.head h3{font-size:var(--fs-2);font-weight:600}
.panel>.head .cap{margin-right:2px}
.panel>.head .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel>.head.sub{border-top:1px solid var(--line-1)}
.panel>.body{padding:14px}
.panel.flush>.body{padding:0}
.panel+.panel{margin-top:12px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-top:14px;flex-wrap:wrap;min-width:0}
.page-head .sub{color:var(--fg-2);margin-top:3px}
.page-head .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.section{scroll-margin-top:calc(var(--top-h) + 12px)}
.section+.section{margin-top:12px}

/* ============================================================ 12. tables */
.tscroll{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.tscroll.cue::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg-1));opacity:0}
.tscroll.cue.can-scroll::after{opacity:1}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-2)}
.tbl th{height:34px;padding:0 10px;font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2);text-align:left;border-bottom:1px solid var(--line-2);background:var(--bg-1);white-space:nowrap;position:sticky;top:0;z-index:2}
.tbl th.num,.tbl td.num{text-align:right}
.tbl th.c,.tbl td.c{text-align:center}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort:hover{color:var(--fg-0)}
.tbl th .ic{display:inline-block;width:11px;height:11px;vertical-align:-2px;margin-left:3px;color:var(--fg-3)}
.tbl th.on{color:var(--fg-0)}
.tbl th.on .ic{color:var(--gold)}
.tbl td{height:var(--row-lg);padding:0 10px;border-bottom:1px solid var(--line-0);vertical-align:middle;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--bg-2)}
.tbl tbody tr.sel td{background:var(--gold-a08)}
.tbl tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl.compact td{height:var(--row)}
.tbl .sub{display:block;font-size:var(--fs-0);color:var(--fg-3);line-height:1.2;margin-top:2px}
.tbl td.actions{text-align:right;white-space:nowrap}
.tbl td.actions .ibtn{width:28px;height:28px}
.tbl td.actions .ibtn .ic{width:14px;height:14px}
.tbl.hover-acts td.actions .ibtn{opacity:0;transition:opacity .12s}
.tbl.hover-acts tr:hover td.actions .ibtn,.tbl.hover-acts tr.sel td.actions .ibtn,.tbl.hover-acts td.actions .ibtn:focus-visible,.tbl.hover-acts tr:focus-within td.actions .ibtn{opacity:1}
.tbl .num.pos{color:var(--pos)}
.tbl .num.neg{color:var(--neg)}
.tbl td .badge{vertical-align:middle}
.tbl td.mono,.tbl td .mono{font-size:var(--fs-1)}
.tbl td.wrap-cell{white-space:normal;max-width:420px}
.tbl.sticky-first th:first-child,.tbl.sticky-first td:first-child{position:sticky;left:0;background:var(--bg-1);z-index:1}
.tbl.sticky-first th:first-child{z-index:3}
.tbl.sticky-first tbody tr:hover td:first-child{background:var(--bg-2)}
.tfoot{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 14px;border-top:1px solid var(--line-1);font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.03em;color:var(--fg-3);flex-wrap:wrap}
.tfoot .btn{margin-left:auto}
.pager{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.pager a,.pager button{min-width:28px;height:28px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--r-1);color:var(--fg-2);font:500 var(--fs-1)/1 var(--font-mono);background:none;cursor:pointer}
.pager a:hover,.pager button:hover{color:var(--fg-0);border-color:var(--line-2);background:var(--bg-2)}
.pager .on{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.pager .gap{color:var(--fg-3);padding:0 4px}
.filterrow{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line-1);min-width:0;flex-wrap:wrap}
.filterrow .search{width:260px;flex:0 1 auto}

/* surebet table */
.arb-table td{white-space:normal}
.arb-table .col-pct{width:84px}
.arb-table .col-time{width:92px}
.arb-table .col-match{min-width:230px}
.arb-table .col-mk{width:190px}
.arb-table .col-legs{min-width:360px}
.arb-table .col-eur{width:84px}
.arb-table .col-age{width:70px}
.arb-table .col-act{width:100px}
.arb-table td.time{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--fg-1);white-space:nowrap}
.arb-table td.time .sub{font-family:var(--font-mono)}
.arb-table .title{font-weight:600;color:var(--fg-0);display:block;line-height:1.25;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arb-table .title:hover{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.arb-table .mkcell{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.legs-inline{display:flex;flex-wrap:wrap;gap:3px 14px;min-width:0}
.leg-i{display:inline-flex;align-items:center;gap:8px;height:22px;font-size:var(--fs-1);white-space:nowrap}
.leg-i .oc{color:var(--fg-2);min-width:52px}
.leg-i .odd{font:600 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);min-width:40px;text-align:right}
.leg-i .stk{font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2);min-width:38px;text-align:right}
.leg-i .bk{font-size:var(--fs-1)}
body[data-density=compact] .tbl td{height:var(--row)}
body[data-density=compact] .leg-i{height:18px}

/* value-bets table */
.vb-table .col-ev{width:84px}
.vb-table .ev{display:inline-flex;align-items:center;justify-content:flex-end;min-width:64px;height:26px;padding:0 8px;border-radius:2px;font:600 var(--fs-3)/1 var(--font-mono);color:var(--info);background:var(--info-a10);border:1px solid var(--info-a10)}
.vb-table td.odd{font:600 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);text-align:right}
.vb-table td.fair{font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2);text-align:right}
.prob{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2)}
.prob i{width:48px;height:4px;background:var(--line-2);border-radius:1px;position:relative;overflow:hidden}
.prob i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,50%);background:var(--info)}

/* ============================================================ 13. surebet cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px;align-items:start}
.arb{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-2);display:flex;flex-direction:column;min-width:0;position:relative}
.arb.prio{box-shadow:inset 2px 0 0 var(--gold)}
.arb:hover{border-color:var(--line-2)}
.arb.sel{border-color:var(--gold-a30)}
.arb .h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px 8px}
.arb .h .pct{margin-top:1px}
.arb .h .t{font-weight:600;color:var(--fg-0);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-3)}
.arb .h .l{font-size:var(--fs-0);color:var(--fg-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arb .h .when{font:500 var(--fs-1)/1.3 var(--font-mono);color:var(--fg-2);text-align:right;white-space:nowrap}
.arb .h .when small{display:block;font-size:var(--fs-0);color:var(--fg-3);margin-top:2px;font-family:var(--font-mono)}
.arb .mkrow{display:flex;align-items:center;gap:6px;padding:0 12px 8px;min-width:0;flex-wrap:wrap}
.arb .mkrow .badge{overflow:hidden;text-overflow:ellipsis;min-width:0}
.arb .mkrow .ageb{margin-left:auto}
.arb .legs{border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.arb .leg{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.2fr) 56px;gap:10px;align-items:center;height:34px;padding:0 12px;border-bottom:1px solid var(--line-0);font-size:var(--fs-1)}
.arb .leg:last-child{border-bottom:0}
.arb .leg .oc{color:var(--fg-1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arb .leg .odd{font:600 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);text-align:right}
.arb .leg .bk{overflow:hidden}
.arb .leg .stk{font:600 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);text-align:right}
.arb .leg .stk small{font-weight:400;color:var(--fg-3);font-size:var(--fs-0)}
.arb .f{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 12px}
.arb .f .sum{font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb .f .sum b{color:var(--fg-0);font-weight:500}
.arb .f .sum b.pos{color:var(--pos)}
.arb .f .acts{margin-left:auto;display:flex;gap:2px;flex:none}
.list-cards{display:none}
.list-table{display:block}
body[data-view=cards] .list-cards{display:grid}
body[data-view=cards] .list-table{display:none}
body[data-view=table] .list-cards{display:none}
body[data-view=table] .list-table{display:block}

/* ============================================================ 14. empty states, skeletons, notices */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 16px;text-align:center;color:var(--fg-2);border:1px dashed var(--line-2);border-radius:var(--r-2)}
.empty .ic{width:28px;height:28px;color:var(--fg-3)}
.empty h3{color:var(--fg-1)}
.empty .acts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.sk{display:block;background:var(--bg-3);border-radius:2px;animation:sk 1.2s ease-in-out infinite;height:12px}
.sk.t{width:60%}.sk.s{width:35%}.sk.pct{width:64px;height:26px}
.sk-row{display:grid;grid-template-columns:84px 92px minmax(0,1fr) minmax(0,170px) 80px;gap:10px;align-items:center;height:var(--row-lg);padding:0 10px;border-bottom:1px solid var(--line-0)}
@keyframes sk{0%,100%{opacity:.5}50%{opacity:1}}
.notice{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border:1px solid var(--line-2);background:var(--bg-1);border-radius:var(--r-1);color:var(--fg-1);font-size:var(--fs-1);line-height:1.4;flex-wrap:wrap}
.notice .ic{flex:none;margin-top:1px}
.notice .txt{flex:1 1 240px;min-width:0}
.notice .acts{display:flex;gap:6px;margin-left:auto}
.notice.warn{border-color:var(--warn-a25);background:var(--warn-a10);color:var(--warn)}
.notice.neg{border-color:var(--neg-a25);background:var(--neg-a10);color:var(--neg)}
.notice.pos{border-color:var(--pos-a25);background:var(--pos-a10);color:var(--pos)}
.notice.info{border-color:var(--info-a10);background:var(--info-a10);color:var(--info)}

/* ============================================================ 15. calculator (panel · drawer · sheet) */
.calc{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-2);display:flex;flex-direction:column;min-width:0}
.calc .ch{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-1)}
.calc .ch .t{font-weight:600;color:var(--fg-0);line-height:1.25;min-width:0}
.calc .ch .m{font-size:var(--fs-0);color:var(--fg-3);margin-top:3px;font-family:var(--font-mono)}
.calc .ch .pct{margin-left:auto}
.calc .cb{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.calc .bank{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.calc .bank .seg button{height:34px;padding:0 9px;font-family:var(--font-mono);font-size:var(--fs-0)}
.calc .legs{border:1px solid var(--line-2);border-radius:var(--r-1);overflow:hidden}
.calc .clh,.calc .cl{display:grid;grid-template-columns:minmax(0,1fr) 54px 76px 66px;gap:8px;align-items:center;padding:0 10px}
.calc .clh{height:26px;background:var(--bg-2);border-bottom:1px solid var(--line-1);font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2)}
.calc .clh span:nth-child(n+2){text-align:right}
.calc .cl{height:48px;border-bottom:1px solid var(--line-0);font-size:var(--fs-1)}
.calc .cl:last-child{border-bottom:0}
.calc .cl .oc{font-weight:500;color:var(--fg-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.2}
.calc .cl .who{min-width:0}
.calc .cl .who .bk{font-size:var(--fs-0);color:var(--fg-2);margin-top:3px;max-width:100%}
.calc .cl .who .bk .mg{width:16px;height:16px}
.calc .cl .odd{font:600 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);text-align:right}
.calc .cl .in{height:30px;font-family:var(--font-mono);font-size:var(--fs-2);text-align:right;padding:0 6px}
.calc .cl .ret{font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2);text-align:right}
.calc .cl .ret.min{color:var(--pos)}
.calc .tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-2);border-radius:var(--r-1);overflow:hidden}
.calc .tot div{padding:8px 10px;border-right:1px solid var(--line-1);min-width:0}
.calc .tot div:last-child{border-right:0}
.calc .tot .cap{display:block;margin-bottom:5px;line-height:1.3;min-height:calc(var(--fs-0) * 2.6)}
.calc .tot .v{font:600 var(--fs-4)/1 var(--font-mono);color:var(--fg-0);white-space:nowrap}
.calc .tot .v.pos{color:var(--pos)}
.calc .tot .v.neg{color:var(--neg)}
.calc .acts{display:flex;gap:6px}
.calc .acts .btn{flex:1 1 auto;min-width:0}
.calc .acts .btn.ghost{flex:none}
.calc .keys{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-0);color:var(--fg-3)}
.calc .keys span{display:inline-flex;align-items:center;gap:5px}
dialog.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-left:1px solid var(--line-2);background:var(--bg-1);color:var(--fg-1);overflow:auto}
dialog.drawer::backdrop{background:var(--scrim)}
dialog.drawer .calc{border:0;border-radius:0;min-height:100%}
dialog.drawer .calc .ch{position:sticky;top:0;background:var(--bg-1);z-index:1}
dialog[open]{display:flex;flex-direction:column}
/* mobile dock: fixed above the tab bar, opens the calculator sheet */
.dock{display:none}

/* ============================================================ 16. match page */
.matchhead{position:sticky;top:calc(var(--top-h) + var(--sub-h));z-index:var(--z-toolbar);background:var(--bg-0);border-bottom:1px solid var(--line-1)}
.matchhead .in1{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px var(--gutter);min-width:0}
.matchhead h1{font-size:var(--fs-5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.matchhead h1 .vs{color:var(--fg-3);font-weight:400;margin:0 6px}
.matchhead .meta{display:flex;gap:14px;white-space:nowrap;margin-top:5px}
.matchhead .back{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-1);color:var(--fg-2);font-size:var(--fs-1);flex:none}
.matchhead .back:hover{color:var(--fg-0);background:var(--bg-2)}
.matchhead .bankctl{flex:none}
.matchhead .bankctl .inwrap.unit{width:120px}
.matchhead .onlypos{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-1);color:var(--fg-2);white-space:nowrap;cursor:pointer;flex:none}
.matchhead .in2{display:flex;align-items:center;gap:8px;padding:0 var(--gutter);min-width:0}
.matchhead .in2 .chips{padding:6px 0}
.matchhead .in2 .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.matchhead .in3{display:none}
.matchgrid{display:grid;grid-template-columns:minmax(0,1fr) var(--side-w);gap:12px;align-items:start;padding-top:12px}
.matchgrid>*{min-width:0}
.matchgrid .side{position:sticky;top:calc(var(--top-h) + var(--sub-h) + 100px)}
.mlist{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-1);overflow:hidden}
.mlist>*{min-width:0;max-width:100%}
.mrow{display:grid;grid-template-columns:24px 84px minmax(0,1fr) auto auto auto 20px;gap:12px;align-items:center;min-height:40px;padding:0 12px;border-bottom:1px solid var(--line-0);cursor:pointer;color:var(--fg-1);text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%}
.mrow:hover{background:var(--bg-2)}
.mrow .cat{font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.mrow .nm{font-weight:500;color:var(--fg-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.mrow .best{display:flex;gap:10px;font:500 var(--fs-1)/1 var(--font-mono);color:var(--fg-2);white-space:nowrap}
.mrow .best b{color:var(--fg-0);font-weight:500}
.mrow .chev{color:var(--fg-3)}
.mrow.open{background:var(--bg-2)}
.mrow.open .chev{transform:rotate(90deg);color:var(--gold)}
.mrow .idx{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);text-align:right}
.mrow .pct{min-width:60px;height:22px;font-size:var(--fs-1)}
.mlist .mdiv{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line-0);background:var(--warn-a10);color:var(--warn);font:500 var(--fs-0)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.mlist .mdiv .ic{flex:none}
.ibtn.lang{font:600 11px/1 var(--font-mono);letter-spacing:.06em;text-decoration:none}
.login .form .tbtn.row{display:flex;gap:4px}
.mbody{border-bottom:1px solid var(--line-1);background:var(--bg-0)}
.mbody .mfoot{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--line-0);font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);flex-wrap:wrap}
.mbody .mfoot b{color:var(--fg-1);font-weight:500}
.mbody .mfoot .btn{margin-left:auto}
.odds{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-2)}
.odds th{height:30px;padding:0 10px;font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2);border-bottom:1px solid var(--line-1);background:var(--bg-1);text-align:right;white-space:nowrap}
.odds th:first-child{text-align:left;position:sticky;left:0;z-index:1}
.odds th.grp{text-align:center;border-left:1px solid var(--line-2);color:var(--fg-1);height:26px;background:var(--bg-2)}
.odds th.grp .margin{display:block;margin-top:3px;text-transform:none;letter-spacing:.02em}
.odds td{height:36px;padding:0 10px;border-bottom:1px solid var(--line-0);white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--fg-1)}
.odds td:first-child{font-family:var(--font-sans);text-align:left;position:sticky;left:0;background:var(--bg-0);z-index:1}
.odds tr:hover td{background:var(--bg-2)}
.odds td.gs,.odds th.gs{border-left:1px solid var(--line-2)}
.odds td.best{color:var(--pos);font-weight:600;background:var(--pos-a10);box-shadow:inset 0 0 0 1px var(--pos-a25)}
.odds td.stale{color:var(--fg-3)}
.odds td.upd{font-size:var(--fs-0);color:var(--fg-3)}
.odds td.upd.stale{color:var(--warn)}
.odds tr.bestrow td{background:var(--bg-1);color:var(--fg-0);font-weight:600;border-top:1px solid var(--line-2);border-bottom:0;height:44px}
.odds tr.bestrow td .who{display:block;font-size:var(--fs-0);color:var(--fg-3);font-weight:400;line-height:1;margin-top:3px}
.odds .dash{color:var(--fg-3)}

/* ============================================================ 17. admin */
.health{display:flex;align-items:stretch;border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-1);overflow-x:auto;scrollbar-width:none;margin:12px 0}
.health::-webkit-scrollbar{display:none}
.health div{display:flex;flex-direction:column;gap:5px;padding:10px 16px;border-right:1px solid var(--line-1);white-space:nowrap;flex:1 0 auto}
.health div:last-child{border-right:0}
.health .v{font:600 var(--fs-4)/1 var(--font-mono);color:var(--fg-0);display:flex;align-items:center;gap:8px}
.health .v.pos{color:var(--pos)}
.health .v.neg{color:var(--neg)}
.health .v.gold{color:var(--gold)}
.health .v small{font-size:var(--fs-0);color:var(--fg-3);font-weight:400}
.tabs{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line-1);min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;color:var(--fg-2);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;flex:none}
.tabs a .ic{color:var(--fg-3)}
.tabs a:hover{color:var(--fg-0)}
.tabs a.on{color:var(--fg-0);border-bottom-color:var(--gold)}
.tabs a.on .ic{color:var(--gold)}
.tabs a .n{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);border:1px solid var(--line-1);border-radius:2px;padding:3px 5px}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.who .avatar{width:26px;height:26px;font-size:var(--fs-0)}
.who b{display:block;line-height:1.2}
.who .sub{margin-top:1px}
.log{font:400 var(--fs-1)/1.55 var(--font-mono);color:var(--fg-2);padding:10px 14px;margin:0;white-space:pre-wrap;overflow:auto;max-height:240px;background:var(--bg-0)}
.log .t{color:var(--fg-3)}
.log .ok{color:var(--pos)}
.log .er{color:var(--neg)}
.log .wa{color:var(--warn)}
.userform .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.policy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:12px 14px}
.policy .lab{font-weight:500;color:var(--fg-0)}
.policy .hint{margin-top:3px}
.users-tbl .actions .ibtn{opacity:1}

/* ============================================================ 18. settings */
.settings{display:grid;grid-template-columns:var(--index-w) minmax(0,1fr);gap:16px;align-items:start;padding-top:12px}
.sidecol{position:sticky;top:calc(var(--top-h) + 12px);display:flex;flex-direction:column;gap:12px}
.sindex{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-1);overflow:hidden}
.sindex a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:var(--fg-2);font-weight:500;border-left:2px solid transparent;border-bottom:1px solid var(--line-0);white-space:nowrap}
.sindex a:last-child{border-bottom:0}
.sindex a .k{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);width:18px;flex:none}
.sindex a .badge{margin-left:auto}
.sindex a:hover{color:var(--fg-0);background:var(--bg-2)}
.sindex a.on{color:var(--fg-0);border-left-color:var(--gold);background:var(--bg-2)}
.sindex a.on .k{color:var(--gold)}
.sctx{border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-1);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sctx .kv{display:flex;justify-content:space-between;gap:8px;font:500 var(--fs-0)/1.3 var(--font-mono);color:var(--fg-3);letter-spacing:.02em}
.sctx .kv b{color:var(--fg-1);font-weight:500;text-align:right}
.sections{display:flex;flex-direction:column;gap:12px;min-width:0}
.section .head .k{font:500 var(--fs-0)/1 var(--font-mono);color:var(--gold);margin-right:2px}
.frows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-0);min-height:56px;min-width:0}
.frows .frow:nth-child(odd){border-right:1px solid var(--line-0)}
.frow .lab{font-weight:500;color:var(--fg-0);font-size:var(--fs-2)}
.frow .hint{margin-top:3px}
.frow .ctl{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0;flex-wrap:wrap}
.frow .ctl .in{max-width:100%}
.frow.wide{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);border-right:0!important}
.frow.wide .ctl .inwrap:not(.unit),.frow.wide .ctl>.in,.frow.wide .ctl .in.w-sel{width:100%}
.frow.stack{grid-column:1/-1;grid-template-columns:1fr;border-right:0!important}
.frow.stack .ctl{justify-content:flex-start}
.frows .frow:last-child,.frows .frow:nth-last-child(2):nth-child(odd){border-bottom:0}
.frow.wide:last-child{border-bottom:0}
.savebar{position:sticky;bottom:calc(var(--status-h) + 8px);z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-1);margin-top:12px;box-shadow:var(--shadow-2)}
.savebar .msg{font-size:var(--fs-1);color:var(--fg-2);margin-right:auto;min-width:0}
.savebar .msg b{color:var(--gold)}
.savebar .msg .dim{display:inline}

/* ============================================================ 19. profile / 2FA */
.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;padding-top:12px}
.profile .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.profile .col .panel+.panel{margin-top:0}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-0)}
.step:last-child{border-bottom:0}
.step .no{width:24px;height:24px;border:1px solid var(--line-2);border-radius:2px;display:grid;place-items:center;font:600 var(--fs-0)/1 var(--font-mono);color:var(--fg-2)}
.step.on .no{color:var(--gold);border-color:var(--gold-a30);background:var(--gold-a08)}
.step.done .no{color:var(--pos);border-color:var(--pos-a25);background:var(--pos-a10)}
.step h3{margin-bottom:6px}
.step h3 .dim{font-weight:400}
.qrbox{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:start;margin-top:10px}
.qr{width:160px;height:160px;border:1px solid var(--line-2);background:var(--bg-0);display:grid;place-items:center;color:var(--fg-3);position:relative;border-radius:2px;overflow:hidden}
.qr svg.q{width:132px;height:132px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-1);border:1px solid var(--line-1);border-radius:var(--r-1);overflow:hidden;counter-reset:code}
.codes span{background:var(--bg-0);padding:8px 10px;font:500 var(--fs-2)/1 var(--font-mono);color:var(--fg-0);letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.codes span::before{counter-increment:code;content:counter(code,decimal-leading-zero);font-size:var(--fs-0);color:var(--fg-3);letter-spacing:0}
.codes span.used{color:var(--fg-3);text-decoration:line-through}
.twofa-state{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-1);flex-wrap:wrap}
.twofa-state .ic{color:var(--pos);width:20px;height:20px}
.twofa-state .txt{flex:1 1 220px;min-width:0}
.twofa-state .txt b{display:block}
.twofa-state .acts{display:flex;gap:6px;flex-wrap:wrap}
.sess{display:flex;align-items:center;gap:10px;min-height:var(--touch);padding:8px 14px;border-bottom:1px solid var(--line-0);font-size:var(--fs-1)}
.sess:last-child{border-bottom:0}
.sess>.ic{color:var(--fg-3)}
.sess b{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sess .sub{color:var(--fg-3);font-family:var(--font-mono);font-size:var(--fs-0);display:block;margin-top:2px}

/* ============================================================ 20. login */
body.guest{padding-bottom:0}
.login{min-height:100dvh;display:grid;grid-template-columns:1fr}
.login .side{border-right:1px solid var(--line-1);padding:40px 48px;display:flex;flex-direction:column;gap:28px;background:var(--bg-1);min-width:0}
.login .side h1{font-size:var(--fs-6);letter-spacing:-.01em;max-width:520px;line-height:1.2}
.login .side .lead{color:var(--fg-2);max-width:480px;font-size:var(--fs-3);margin-top:10px}
.login .side .foot{margin-top:auto;font:500 var(--fs-0)/1.5 var(--font-mono);color:var(--fg-3);letter-spacing:.03em}
.login .form{display:flex;align-items:center;justify-content:center;padding:40px 24px;min-width:0}
.login .card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.login .card h2{font-size:var(--fs-5)}
.login .card .sub{color:var(--fg-2);font-size:var(--fs-2);margin-top:4px}
.login .card .field .in{height:var(--ctl-lg);font-size:var(--fs-3)}
.login .card .inwrap .eye{width:40px}
.login .alert{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--neg-a25);background:var(--neg-a10);color:var(--neg);border-radius:var(--r-1);font-size:var(--fs-1)}
.login .alert .ic{flex:none;margin-top:1px}
.login .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-1);color:var(--fg-3);flex-wrap:wrap;font-family:var(--font-sans);letter-spacing:0}
.login .meta a{color:var(--fg-2);border-bottom:1px solid var(--line-2)}
.login .meta a:hover{color:var(--fg-0);border-bottom-color:var(--gold)}
.login .twofa{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line-1);border-radius:var(--r-1);background:var(--bg-1);color:var(--fg-2);font-size:var(--fs-1);line-height:1.4}
.login .twofa .ic{color:var(--gold);flex:none;margin-top:1px}
.login .brand.mob{display:flex;justify-content:center;margin-bottom:8px}
/* brand block: seal + wordmark + tagline */
.brandblock{display:flex;align-items:center;gap:14px;color:var(--fg-0);white-space:nowrap}
.brandblock .seal{width:56px;height:56px;color:var(--gold);flex:none}
.brandblock .wm{font:600 var(--fs-7)/1 var(--font-sans);letter-spacing:-.025em;color:var(--fg-0)}
.brandblock .wm em{font-style:normal;color:var(--gold)}
.brandblock .tag{margin-top:6px;font:500 var(--fs-0)/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.brandblock.sm .seal{width:44px;height:44px}
.brandblock.sm .wm{font-size:var(--fs-6)}
.tape{border:1px solid var(--line-1);border-radius:var(--r-2);overflow:hidden;max-width:620px;background:var(--bg-0)}
.tape .th{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-bottom:1px solid var(--line-1);font:600 var(--fs-0)/1 var(--font-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg-2);background:var(--bg-1)}
.tape .th .dot{width:5px;height:5px;box-shadow:none}
.tape .th .r{margin-left:auto;color:var(--fg-3);letter-spacing:.03em;text-transform:none}
.tape .tr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--line-0);font-size:var(--fs-1)}
.tape .tr:last-child{border-bottom:0}
.tape .tr .p{font:600 var(--fs-2)/1 var(--font-mono);color:var(--pos)}
.tape .tr .p.dim{color:var(--fg-3)}
.tape .tr .m{color:var(--fg-1);display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.tape .tr .m .tm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tape .tr .m small{color:var(--fg-3);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tape .tr .b{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-3);white-space:nowrap}
.login .stats{display:flex;gap:0;border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-0);max-width:620px;overflow:hidden}
.login .stats div{flex:1;padding:10px 14px;border-right:1px solid var(--line-1);min-width:0}
.login .stats div:last-child{border-right:0}
.login .stats .v{font:600 var(--fs-4)/1 var(--font-mono);color:var(--fg-0);margin-top:4px;white-space:nowrap}
.login .stats .v.pos{color:var(--pos)}
.login .ops{max-width:620px;display:flex;flex-direction:column;gap:8px}
.login .ops .list{display:flex;flex-wrap:wrap;gap:6px}
.login .ops .bk{height:28px;padding:0 8px 0 4px;border:1px solid var(--line-1);border-radius:var(--r-1);background:var(--bg-0);font-size:var(--fs-1);color:var(--fg-2)}
.login .ops .bk .mg{width:18px;height:18px}

/* ============================================================ 21. dialogs · sheets · toasts */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;padding:0;border:0;border-top:1px solid var(--line-2);border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--bg-1);color:var(--fg-1);overflow:auto;padding-bottom:var(--sa-b)}
dialog.sheet::backdrop{background:var(--scrim)}
dialog.sheet .handle{width:36px;height:4px;border-radius:2px;background:var(--line-3);margin:8px auto 0;flex:none}
dialog.sheet .sh{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;border-bottom:1px solid var(--line-1);position:sticky;top:0;background:var(--bg-1);z-index:1}
dialog.sheet .sh h3{margin-right:auto}
dialog.sheet .sb{padding:12px 16px;display:flex;flex-direction:column;gap:12px}
dialog.sheet .sf{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line-1);background:var(--bg-1)}
dialog.sheet .sf .btn{flex:1}
dialog.sheet .menu a,dialog.sheet .menu button{display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 4px;border:0;border-bottom:1px solid var(--line-0);background:none;color:var(--fg-1);font:inherit;font-weight:500;text-align:left;cursor:pointer}
dialog.sheet .menu form{display:contents}
dialog.sheet .menu>:last-child,dialog.sheet .menu>:last-child button{border-bottom:0}
dialog.sheet .menu .ic{color:var(--fg-3)}
dialog.sheet .menu .dim{margin-left:auto}
dialog.sheet .calc{border:0;border-radius:0}
dialog.modal,dialog.help,dialog.confirm{margin:auto;width:min(520px,calc(100% - 32px));padding:0;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-1);color:var(--fg-1);max-height:calc(100dvh - 32px);overflow:auto}
dialog.confirm{width:min(420px,calc(100% - 32px))}
dialog.modal::backdrop,dialog.help::backdrop,dialog.confirm::backdrop{background:var(--scrim)}
dialog .sh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-1)}
dialog .sh h3{margin-right:auto}
dialog .cb{padding:16px}
dialog .cb h3{margin-bottom:6px}
dialog .cf{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line-1)}
.keys-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:14px 16px;align-items:center;font-size:var(--fs-1)}
.keys-grid .kbd{margin-right:2px}
.toast{position:fixed;right:16px;bottom:calc(var(--status-h) + 12px);z-index:var(--z-toast);display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-2);color:var(--fg-0);font-size:var(--fs-1);max-width:min(380px,calc(100% - 32px));opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none;box-shadow:var(--shadow-2)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast .ic{color:var(--pos)}
.toast.neg .ic{color:var(--neg)}
.toast.warn .ic{color:var(--warn)}
.toast .ibtn{margin-left:auto;width:28px;height:28px}
.toast.static{position:static;opacity:1;transform:none;pointer-events:auto;max-width:none}

/* ============================================================ 22. shell additions (theme toggle, live states, guest pages) */
.only-light{display:none}
html[data-theme=light] .only-light{display:inline-block}
html[data-theme=light] .only-dark{display:none}
.dot.busy{background:var(--gold);box-shadow:0 0 0 3px var(--gold-a30);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ic.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status.warn{color:var(--warn);border-color:var(--warn-a25)}
.status.warn b{color:var(--warn)}
.login .alert.info{border-color:var(--info-a10);background:var(--info-a10);color:var(--info)}
.login .alert.pos{border-color:var(--pos-a25);background:var(--pos-a10);color:var(--pos)}
.login .form{position:relative}
.login .form .tbtn{position:absolute;top:12px;right:12px}
.login .card .acct{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-1);border-radius:var(--r-1);background:var(--bg-1);min-width:0}
.login .card .acct b{display:block;line-height:1.2}
.login .card .acct .sub{display:block;font-size:var(--fs-0);color:var(--fg-3);margin-top:2px;font-family:var(--font-mono)}
.login .card .otp{justify-content:center}
.login .card .otp .in{height:52px}
.login .card .hint a{color:var(--fg-2);border-bottom:1px solid var(--line-2)}
.login .card .hint a:hover{color:var(--fg-0);border-bottom-color:var(--gold)}
.login .card .pw-meter{margin-top:0}
.errpage .card{max-width:440px}
.errpage .code{width:auto;display:inline-block;padding:4px 8px;margin:0 2px;user-select:all}

/* ============================================================ 23. responsive */
@media(max-width:1500px){
  .nav a{padding:0 9px}
  .top .search{width:180px}
}
@media(max-width:1280px){
  .nav a span.txt{display:none}
  .nav a{padding:0 10px}
  .top .search{width:160px}
  .user .name{display:none}
  .kpi{padding-right:14px;margin-right:14px}
}
@media(max-width:1180px){
  .sportbar .meta,.kpis .meta{display:none}
  .statusbar span:nth-child(3),.statusbar span:nth-child(4){display:none}
  .matchgrid{grid-template-columns:minmax(0,1fr)}
  .matchgrid .side{position:static}
  .toolbar .lab{display:none}
  .frows{grid-template-columns:1fr}
  .frows .frow{border-right:0!important}
  .frows .frow:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line-0)}
}
@media(max-width:1024px){
  .top .search{display:none}
  .status .txt{display:none}
  .profile{grid-template-columns:1fr}
  .settings{grid-template-columns:minmax(0,1fr)}
  .sidecol{position:sticky;top:var(--top-h);z-index:44;gap:0;min-width:0}
  .sctx{display:none}
  .sindex{flex-direction:row;overflow-x:auto;scrollbar-width:none;border-radius:0;border-left:0;border-right:0;margin:0 calc(-1 * var(--gutter));background:var(--bg-0)}
  .sindex::-webkit-scrollbar{display:none}
  .sindex a{border-left:0;border-bottom:2px solid transparent;flex:none;height:40px}
  .sindex a.on{border-bottom-color:var(--gold);background:none}
  .section{scroll-margin-top:calc(var(--top-h) + 48px)}
  .userform .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:1fr;min-height:0}
  .login .form{order:0;padding:32px 16px 8px;min-height:0}
  .login .side{order:1;border-right:0;border-top:1px solid var(--line-1);padding:20px 16px 24px;gap:14px}
  .login .side .brandblock,.login .side .intro,.login .side .stats,.login .side .ops{display:none}
  .tape .tr .m small{display:none}
  .login .side .foot{margin-top:4px}
  .login .brand.mob{display:flex;justify-content:center;margin-bottom:8px}
  .tape{max-width:none}
}
@media(max-width:720px){
  .desk-only{display:none!important}
  .mob-only{display:initial}
  body{padding-bottom:calc(var(--tab-h) + var(--sa-b) + 16px)}
  /* touch targets */
  .btn,.ibtn{min-height:40px}
  .ibtn{width:40px;height:40px}
  .ibtn.sm,.tbl td.actions .ibtn{width:36px;height:36px;min-height:36px}
  .btn.sm{min-height:36px}
  .chip{height:36px;padding:0 12px}
  .seg button,.seg a{height:36px}
  .check{min-height:40px}
  .frow .ctl .switch{min-height:0}
  .panel>.head{padding-top:8px;padding-bottom:8px;row-gap:6px}
  .panel>.head .badge{height:auto;min-height:20px;padding:2px 6px;white-space:normal;line-height:1.3}
  .panel>.head .right{width:100%;margin-left:0}
  .nav,.statusbar,.top .status .txt,.top .search{display:none}
  .top{padding:0 var(--gutter);padding-top:var(--sa-t);height:calc(var(--top-h) + var(--sa-t))}
  .top .right .user{display:none}
  .ctxbar .meta{display:none}
  .sportbar{top:calc(var(--top-h) + var(--sa-t))}
  .sportbar a{padding:0 10px}
  .kpis{padding:0 var(--gutter)}
  .kpi{min-height:46px;padding:6px 14px 6px 0;margin-right:14px}
  .kpi .v{font-size:var(--fs-3)}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-top);height:calc(var(--tab-h) + var(--sa-b));padding-bottom:var(--sa-b);background:var(--bg-1);border-top:1px solid var(--line-1)}
  .tabbar a,.tabbar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--fg-3);font:500 var(--fs-0)/1 var(--font-sans);border:0;background:none;padding:0;cursor:pointer;position:relative;height:var(--tab-h)}
  .tabbar .ic{width:22px;height:22px}
  .tabbar .txt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
  .tabbar .on{color:var(--gold)}
  .tabbar .on::before{content:"";position:absolute;top:0;left:50%;width:24px;height:2px;background:var(--gold);transform:translateX(-50%)}
  .toolbar{top:calc(var(--top-h) + var(--sub-h) + var(--sa-t));gap:6px}
  .toolbar .filters,.toolbar .vsep,.toolbar .views{display:none}
  .toolbar .mob{display:flex;align-items:center;gap:6px;width:100%}
  .toolbar .mob .btn{height:36px;min-height:36px}
  .toolbar .mob .grow{flex:1}
  .toolbar .mob select.in{height:36px;width:auto;font-size:var(--fs-1)}
  .subrow .right{display:none}
  .cards{grid-template-columns:1fr;gap:8px}
  .arb .leg{grid-template-columns:minmax(0,1fr) 44px minmax(0,1.1fr) 52px;gap:8px;padding:0 10px}
  .arb .h{padding:10px 10px 6px}
  .arb .mkrow{padding:0 10px 8px}
  .arb .f{padding-left:10px;min-height:44px}
  .arb .f .acts .ibtn{width:40px;height:40px}
  /* match */
  .matchhead{top:calc(var(--top-h) + var(--sub-h) + var(--sa-t))}
  .matchhead .in1{padding:8px var(--gutter);min-height:52px;gap:10px}
  .matchhead h1{font-size:var(--fs-3);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .matchhead .meta{display:none}
  .matchhead .in1 .bankctl,.matchhead .in1 .onlypos{display:none}
  .matchhead .in2 .right{display:none}
  .matchhead .in3{display:flex;align-items:center;gap:8px;padding:0 var(--gutter) 8px}
  .matchhead .in3 .seg{flex:1;display:flex}
  .matchhead .in3 .seg button{flex:1}
  .matchhead .in3 .inwrap.unit{width:110px}
  .matchgrid{gap:8px;padding-top:8px}
  .matchgrid .side{display:none}
  .mrow{grid-template-columns:minmax(0,1fr) auto 20px;gap:8px;padding:0 10px;min-height:44px}
  .mrow .idx,.mrow .cat,.mrow .best,.mrow .margin{display:none}
  .mbody .odds th:first-child,.mbody .odds td:first-child{padding-left:10px;padding-right:6px;width:44px}
  .mbody .odds td:first-child .bk .nm,.mbody .odds td:first-child .bk .ic{display:none}
  .mbody .odds th.upd,.mbody .odds td.upd{display:none}
  .mbody .odds td,.mbody .odds th{padding:0 8px}
  .mbody .odds tr.bestrow td .who{white-space:nowrap}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--sa-b));z-index:var(--z-dock);align-items:center;gap:10px;height:var(--dock-h);padding:0 var(--gutter);background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-1);color:var(--fg-2);cursor:pointer;width:100%;text-align:left;font:inherit}
  .dock .txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
  .dock .txt b{color:var(--fg-0);font-weight:600;font-size:var(--fs-2)}
  .dock .txt span{font:500 var(--fs-0)/1 var(--font-mono);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock .txt span b{color:var(--pos);font-size:var(--fs-0)}
  .dock .chev{color:var(--fg-3);flex:none}
  body.has-dock{padding-bottom:calc(var(--tab-h) + var(--dock-h) + var(--sa-b) + 16px)}
  .stale-banner .acts{width:100%;margin-left:0}
  /* admin */
  .health div{padding:8px 12px}
  .health .v{font-size:var(--fs-3)}
  .userform .grid{grid-template-columns:1fr}
  .policy{grid-template-columns:minmax(0,1fr) auto}
  .users-tbl thead{display:none}
  .users-tbl,.users-tbl tbody,.users-tbl tr,.users-tbl td{display:block;width:100%}
  .users-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:10px 12px;border-bottom:1px solid var(--line-1)}
  .users-tbl td{height:auto;padding:0;border:0;white-space:normal}
  .users-tbl td.who-td{grid-column:1;grid-row:1}
  .users-tbl td.role-td{grid-column:2;grid-row:1;justify-self:end}
  .users-tbl td.st-td,.users-tbl td.fa-td,.users-tbl td.exp-td,.users-tbl td.tg-td,.users-tbl td.al-td,.users-tbl td.ll-td,.users-tbl td.cr-td{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--fg-2);width:auto;margin-right:10px;text-align:left}
  .users-tbl td.cr-td{display:none}
  .users-tbl td::before{content:attr(data-l);font:600 var(--fs-mg)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
  .users-tbl td.who-td::before,.users-tbl td.role-td::before,.users-tbl td.actions::before{content:none}
  .users-tbl td.actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line-0);text-align:left}
  .users-tbl td.actions .ibtn{width:100%;height:40px;min-height:40px;border-color:var(--line-1);background:var(--bg-2)}
  .users-tbl td.actions .ibtn .ic{width:16px;height:16px}
  .users-tbl tbody tr:hover td{background:none}
  .users-tbl tr:last-child{border-bottom:0}
  /* settings / profile */
  .frow{grid-template-columns:1fr;min-height:0;padding:10px 12px}
  .frow.wide{grid-template-columns:1fr}
  .frow .ctl{justify-content:flex-start}
  .frow .ctl .inwrap.unit{width:140px}
  .frow .ctl .in.w-sel{width:100%}
  .savebar{bottom:calc(var(--tab-h) + var(--sa-b) + 8px);flex-wrap:wrap}
  .savebar .msg{width:100%;margin-right:0}
  .savebar .msg .dim{display:none}
  .savebar .btn{flex:1}
  .qrbox{grid-template-columns:1fr}
  .qr{width:160px}
  .step{padding:12px 10px;gap:10px}
  .panel>.body{padding:12px}
  .panel>.head{padding-left:12px;padding-right:12px}
  .filterrow{padding:8px 12px}
  .filterrow .search{width:100%;display:flex}
  .filterrow .seg{display:flex;width:100%}
  .filterrow .seg button{flex:1;padding:0 6px}
  .page-head .acts{width:100%}
  .page-head .acts .btn{flex:1}
  .toast{right:var(--gutter);left:var(--gutter);max-width:none;bottom:calc(var(--tab-h) + var(--sa-b) + 12px)}
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  .sk-row{grid-template-columns:64px minmax(0,1fr) 56px}
  .sk-row>*:nth-child(n+4){display:none}
  .login .form{padding:24px var(--gutter) 8px}
}
@media(max-width:400px){
  .top .brand span.txt{display:none}
  .sportbar a{padding:0 9px;gap:6px}
  .arb .leg{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 50px;gap:6px}
  .pct{min-width:58px;font-size:var(--fs-2)}
  .health div{padding:8px 10px}
  .calc .clh,.calc .cl{grid-template-columns:minmax(0,1.2fr) 48px 64px 60px;gap:6px;padding:0 8px}
  .otp{gap:4px}
  .otp .in{width:38px;height:44px;font-size:var(--fs-5)}
  .otp .gap{width:4px}
  .codes{grid-template-columns:1fr}
  .users-tbl td.actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brandblock .wm{font-size:var(--fs-6)}
}

/* login card: a single bordered panel, brand on top, nothing but the form (no public figures on the guest page) */
.login .card.panelcard{max-width:420px;gap:18px;padding:36px 36px 30px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-2);box-shadow:0 24px 60px rgba(0,0,0,.45);position:relative}
.login .card.panelcard::before{content:"";position:absolute;left:36px;right:36px;top:0;height:2px;background:var(--gold);opacity:.9;border-radius:0 0 2px 2px}
.login .card.panelcard .brand.mob{margin:0 0 6px}
.login .card.panelcard .brand.mob .brandblock.sm .wm{font-size:var(--fs-6)}
.login .card.panelcard .head{text-align:center}
.login .card.panelcard .head .sub{margin-top:2px}
.login .card.panelcard .field{gap:6px}
.login .card.panelcard .btn.primary{margin-top:4px}
@media(max-width:480px){.login .card.panelcard{padding:28px 20px 24px;box-shadow:none;border-color:var(--line-1)}}
@media(max-width:720px){.login{min-height:100dvh}.login .form{min-height:100dvh;align-items:center;padding:24px var(--gutter)}}

/* the odd in a surebet row / card / calculator is a link to the operator (deep link when known); dotted gold keeps the table calm */
a.odd{color:inherit;text-decoration:none;border-bottom:1px dotted var(--gold);cursor:pointer}
a.odd:hover{color:var(--gold)}

/* bet journal (p=bets) */
.bet-row{display:block;padding:10px 12px;border-bottom:1px solid var(--line-0)}
.bet-row .bet-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bet-row .bet-legs{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.bet-row .bet-leg{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:500 var(--fs-1)/1.2 var(--font-mono)}
.bet-row .bet-leg .oc{min-width:48px;color:var(--fg-0)}
.bet-row .bet-leg .bkn{min-width:90px;color:var(--fg-2)}
.bet-row .bet-leg label{display:flex;gap:6px;align-items:center;color:var(--fg-3)}
.bet-row .bet-leg input.in.sm{width:84px}
.bet-row .bet-acts{display:flex;gap:8px;flex-wrap:wrap}
td input.in.sm.num{width:90px;text-align:right}
.calc .acctnote{color:var(--warn,#c9862a);font:500 var(--fs-0)/1.3 var(--font-mono);margin:4px 0}
.calc .pct.warn{background:rgba(201,134,42,.14);color:#c9862a;border-color:rgba(201,134,42,.4)}