/* Арена Live — every color, radius, space and type value comes from tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:var(--type-body-m);font-feature-settings:"tnum" 1}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
img{display:block}
h2{margin:0}
.overline{font:var(--type-overline);letter-spacing:var(--type-overline-tracking);text-transform:uppercase;color:var(--text-tertiary)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-24);height:60px;padding:0 var(--space-24);
  background:color-mix(in srgb,var(--bg-surface) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.brand{display:flex;align-items:center;gap:var(--space-8);font:var(--type-heading-h3);color:var(--text-primary);text-decoration:none;white-space:nowrap}
.brand b{font-weight:600;color:var(--text-tertiary)}
.brand__mark{width:28px;height:28px;border-radius:var(--radius-md);background:var(--highlight-default);color:var(--neutral-950);display:grid;place-items:center}
.top__src{display:flex;align-items:center;gap:var(--space-8);font:var(--type-caption);color:var(--text-secondary);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-8)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-tertiary)}
.dot--ok{background:var(--status-success);box-shadow:0 0 0 3px var(--status-success-soft)}
.dot--warn{background:var(--status-warning);box-shadow:0 0 0 3px var(--status-warning-soft)}
.dot--bad{background:var(--status-danger);box-shadow:0 0 0 3px var(--status-danger-soft)}
.dot--idle{animation:blink 1s infinite}
.link{color:var(--text-link);font:var(--type-caption-medium)}
.link:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);height:36px;padding:0 var(--space-12);border-radius:var(--radius-md);
  border:1px solid var(--border-default);background:var(--bg-surface);font:var(--type-body-m-medium);color:var(--text-primary);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--bg-surface-2);border-color:var(--border-strong)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--text-secondary)}
.btn--ghost:hover,.btn--ghost[aria-expanded="true"]{background:var(--bg-surface-2);color:var(--text-primary);border-color:transparent}
.btn--primary{background:var(--accent-default);border-color:var(--accent-default);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--primary:disabled{background:var(--bg-surface-2);border-color:var(--border-subtle);color:var(--text-tertiary)}
.btn--sm{height:30px;font:var(--type-caption-medium)}
.btn--block{width:100%;height:44px}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--text-secondary)}
.iconbtn:hover{background:var(--bg-surface-2);color:var(--text-primary)}
.iconbtn--sm{width:24px;height:24px;border-radius:var(--radius-xs)}

/* ---------- QA panel ---------- */
.qa{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}
.qa__in{max-width:1440px;margin:0 auto;padding:var(--space-12) var(--space-24);display:flex;gap:var(--space-24);align-items:center;flex-wrap:wrap}
.qa__hint{margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--text-tertiary);max-width:360px}

/* ---------- segmented ---------- */
.seg{display:flex;gap:var(--space-2);padding:var(--space-2);background:var(--bg-surface-2);border-radius:var(--radius-lg);flex-wrap:wrap}
.seg button{height:32px;padding:0 var(--space-12);border-radius:var(--radius-md);font:var(--type-body-m-medium);color:var(--text-secondary);display:inline-flex;align-items:center;gap:var(--space-6);white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover{color:var(--text-primary)}
.seg button[aria-checked="true"]{background:var(--bg-elevated);color:var(--text-primary);box-shadow:0 1px 2px rgb(0 0 0 / .12),0 0 0 1px var(--border-subtle)}
.cnt{font:var(--type-caption-medium);color:var(--text-tertiary)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--status-danger);animation:pulse 1.6s infinite}

/* ---------- layout ---------- */
.layout{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr) 320px;gap:var(--space-24);padding:var(--space-24);align-items:start}
.side{position:sticky;top:84px}
.side__h{padding:0 var(--space-12) var(--space-8)}
.sports{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.sport{width:100%;display:flex;align-items:center;gap:var(--space-12);height:40px;padding:0 var(--space-12);border-radius:var(--radius-md);color:var(--text-secondary);text-align:left;transition:background .15s,color .15s}
.sport:hover{background:var(--bg-row-hover);color:var(--text-primary)}
.sport.is-on{background:var(--accent-soft);color:var(--accent-on-soft)}
.sport.is-empty{opacity:.5}
.sport__n{flex:1;font:var(--type-body-m-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sport__c{font:var(--type-caption);color:var(--text-tertiary);min-width:16px;text-align:right}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 var(--space-6);border-radius:var(--radius-full);background:var(--bg-surface-2);font:var(--type-caption-medium);color:var(--text-secondary)}
.pill--live{background:var(--status-danger-soft);color:var(--status-danger)}

.toolbar{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-16)}
.days{display:flex;gap:var(--space-4)}
.days button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:44px;padding:0 var(--space-12);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);min-width:92px;transition:border-color .15s}
.days button span{font:var(--type-body-m-medium)}
.days button small{font:var(--type-caption);color:var(--text-tertiary)}
.days button:hover:not(:disabled){border-color:var(--border-strong)}
.days button[aria-selected="true"]{border-color:var(--accent-default);box-shadow:inset 0 0 0 1px var(--accent-default)}
.days button:disabled{opacity:.45}
.search{display:flex;align-items:center;gap:var(--space-8);height:36px;padding:0 var(--space-12);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-tertiary);margin-bottom:var(--space-24)}
.search:focus-within{border-color:var(--accent-default);box-shadow:0 0 0 3px var(--accent-soft)}
.search input{border:0;outline:0;background:none;flex:1;min-width:0;color:var(--text-primary)}
.search input::placeholder{color:var(--text-tertiary)}

/* ---------- banner ---------- */
.banner{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg);margin-bottom:var(--space-16);font:var(--type-body-s);border:1px solid}
.banner > div{flex:1}
.banner b{font-weight:500}
.banner--warn{background:var(--status-warning-soft);border-color:color-mix(in srgb,var(--status-warning) 30%,transparent);color:var(--text-primary)}
.banner--warn svg{color:var(--status-warning);flex:none}
.banner--info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent-default) 30%,transparent)}

/* ---------- league groups ---------- */
.list{display:flex;flex-direction:column;gap:var(--space-16)}
.lg{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden}
.lg__h{display:flex;align-items:center;border-bottom:1px solid var(--border-subtle);padding-right:var(--space-16)}
.lg.is-col .lg__h{border-bottom:0}
.lg__btn{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-8);height:48px;padding:0 var(--space-16);text-align:left}
.lg__ic{width:28px;height:28px;border-radius:var(--radius-md);background:var(--bg-surface-2);display:grid;place-items:center;color:var(--text-secondary);flex:none}
.lg__r{font:var(--type-body-s);color:var(--text-tertiary);white-space:nowrap}
.lg__n{font:var(--type-heading-h3);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg__c{font:var(--type-caption);color:var(--text-tertiary)}
.lg__chev{color:var(--text-tertiary);transition:transform .2s;display:grid;margin-left:var(--space-4)}
.lg.is-col .lg__chev{transform:rotate(-90deg)}
.lg.is-col .lg__body,.lg.is-col .lg__cols{display:none}
.lg__cols{display:grid;grid-template-columns:repeat(3,68px);gap:var(--space-6);font:var(--type-caption-medium);color:var(--text-tertiary);text-align:center}
.lg__cols.is-2way,.ev__odds.is-2way{grid-template-columns:repeat(2,68px)}

/* ---------- event row ---------- */
.ev{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:var(--space-16);padding:var(--space-12) var(--space-16);border-top:1px solid var(--border-subtle);transition:background .15s}
.lg__body .ev:first-child{border-top:0}
.ev:hover{background:var(--bg-row-hover)}
.ev.is-picked{background:var(--bg-row-selected)}
.ev__st{display:flex;flex-direction:column;gap:var(--space-2);font:var(--type-body-s);color:var(--text-secondary)}
.ev__st.live{color:var(--status-danger);font-weight:500}
.ev__st.muted{color:var(--text-tertiary)}
.live-tag{align-self:flex-start;font:var(--type-overline);letter-spacing:var(--type-overline-tracking);padding:0 var(--space-6);border-radius:var(--radius-xs);background:var(--status-danger);color:var(--neutral-0)}
.ev__teams{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.team{display:flex;align-items:center;gap:var(--space-8);min-width:0;height:22px}
.team img,.logo{width:20px;height:20px;flex:none;object-fit:contain}
.lgo-d{display:none!important}
[data-theme="dark"] .lgo-d{display:block!important}
[data-theme="dark"] .lgo-l:not(.lgo-any){display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lgo-d{display:block!important}:root:not([data-theme="light"]) .lgo-l:not(.lgo-any){display:none}}
.logo--ini{border-radius:50%;background:color-mix(in srgb,var(--tc,var(--text-tertiary)) 22%,var(--bg-surface-2));color:var(--text-secondary);font-size:8px;font-weight:700;display:grid;place-items:center;letter-spacing:-.02em}
.team__n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--type-body-m)}
.team__s{font:var(--type-body-m-medium);min-width:24px;text-align:right}
.is-live .team__s{color:var(--text-primary);font-weight:600}
.team.is-won .team__n,.team.is-won .team__s{font-weight:600}
.team.is-lost .team__n,.team.is-lost .team__s{color:var(--text-tertiary)}

.ev__odds{display:grid;grid-template-columns:repeat(3,68px);gap:var(--space-6)}
.odd{position:relative;height:44px;border-radius:var(--radius-md);background:var(--bg-surface-2);border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:background .12s,border-color .12s,transform .12s}
.odd small{font:var(--type-caption);font-size:11px;line-height:14px;color:var(--text-tertiary)}
.odd b{font:var(--type-body-m-medium);font-weight:600}
button.odd:hover{border-color:var(--border-strong);background:var(--bg-elevated)}
button.odd:active{transform:scale(.97)}
.odd.is-on,button.odd.is-on:hover{background:var(--accent-default);border-color:var(--accent-default);color:var(--text-on-accent)}
button.odd.is-on:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.odd.is-on small{color:color-mix(in srgb,var(--text-on-accent) 75%,transparent)}
.odd .mv{position:absolute;top:5px;right:5px;display:grid}
.odd.is-up{animation:flashUp 1.2s ease-out}.odd.is-down{animation:flashDown 1.2s ease-out}
.odd.is-up .mv{color:var(--status-success)}
.odd.is-down .mv{color:var(--status-danger)}
.odd.is-on .mv{color:var(--text-on-accent)}
.odd--off,.odd--lock{color:var(--text-tertiary);background:transparent;border:1px dashed var(--border-subtle)}
.odd--none{visibility:hidden}

/* ---------- skeleton ---------- */
.sk{height:12px;border-radius:var(--radius-xs);background:linear-gradient(90deg,var(--bg-surface-2) 0%,var(--border-subtle) 50%,var(--bg-surface-2) 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}
.ev--sk .ev__teams{gap:var(--space-12)}
.sk--odd{height:44px;border-radius:var(--radius-md)}
.lg__h .sk{margin:17px var(--space-16)}

/* ---------- states ---------- */
.state{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-64) var(--space-24);text-align:center;display:flex;flex-direction:column;align-items:center}
.state__ic{width:56px;height:56px;border-radius:var(--radius-xl);background:var(--bg-surface-2);display:grid;place-items:center;color:var(--text-secondary);margin-bottom:var(--space-16)}
.state__ic--bad{background:var(--status-danger-soft);color:var(--status-danger)}
.state h2{font:var(--type-heading-h2);letter-spacing:var(--type-heading-h2-tracking)}
.state p{margin:var(--space-8) 0 0;color:var(--text-secondary);max-width:420px}
.state__act{display:flex;gap:var(--space-8);margin-top:var(--space-24);flex-wrap:wrap;justify-content:center}

/* ---------- bet slip ---------- */
.slip{position:sticky;top:84px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;max-height:calc(100vh - 108px);display:flex;flex-direction:column}
.slip__h{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16);border-bottom:1px solid var(--border-subtle)}
.slip__h h2{font:var(--type-heading-h3);display:flex;align-items:center;gap:var(--space-8);flex:1}
.slip__close{display:none}
.slip__empty{padding:var(--space-40) var(--space-24);text-align:center;color:var(--text-tertiary);display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.slip__empty p{margin:0;font:var(--type-body-s);max-width:200px}
.slip__list{list-style:none;margin:0;padding:0;overflow:auto}
.it{padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--space-4)}
.it__top{display:flex;justify-content:space-between;align-items:center}
.it__lg{font:var(--type-caption);color:var(--text-tertiary)}
.it__ev{font:var(--type-body-s);color:var(--text-secondary)}
.it__out{display:flex;justify-content:space-between;gap:var(--space-12);font:var(--type-body-m-medium)}
.it__out span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it__w{margin-top:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-sm);background:var(--status-warning-soft);font:var(--type-caption);color:var(--text-primary)}
.it__w--bad{background:var(--status-danger-soft)}
.slip__sum{padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-12);background:var(--bg-surface-2)}
.slip__sum .row{display:flex;justify-content:space-between;font:var(--type-body-m)}
.slip__sum .row b{font-weight:600}
.row--win b{font:var(--type-numeric-m);letter-spacing:var(--type-numeric-m-tracking)}
.stake{display:flex;align-items:center;gap:var(--space-8);height:40px;padding:0 var(--space-12);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-tertiary)}
.stake:focus-within{border-color:var(--accent-default);box-shadow:0 0 0 3px var(--accent-soft)}
.stake input{flex:1;min-width:0;border:0;outline:0;background:none;text-align:right;font:var(--type-body-m-medium);color:var(--text-primary)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.chip{height:30px;border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-subtle);font:var(--type-caption-medium);color:var(--text-secondary)}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip.is-on{border-color:var(--accent-default);color:var(--accent-on-soft);background:var(--accent-soft)}
.slip__note{margin:0;text-align:center;font:var(--type-caption);color:var(--text-tertiary)}

.slipbar{display:none}
.scrim{display:none}
.toast{position:fixed;left:50%;bottom:var(--space-24);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--bg-inverse);color:var(--bg-canvas);padding:var(--space-12) var(--space-16);border-radius:var(--radius-lg);font:var(--type-body-m-medium);transition:.25s;z-index:50}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--status-danger) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes blink{50%{opacity:.3}}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}}
@keyframes fadeIn{from{opacity:0}}
@keyframes flashUp{0%{background:var(--status-success-soft);border-color:var(--status-success)}}
@keyframes flashDown{0%{background:var(--status-danger-soft);border-color:var(--status-danger)}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .layout{grid-template-columns:200px minmax(0,1fr)}
  .slip{display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:40;box-shadow:0 -12px 40px rgb(0 0 0 / .3)}
  .slip.is-open{display:flex;animation:sheetIn .22s ease-out}
  .scrim.is-on{display:block;position:fixed;inset:0;z-index:35;background:rgb(0 0 0 / .45);animation:fadeIn .2s}
  .slip__close{display:grid}
  .slipbar{position:fixed;left:var(--space-16);right:var(--space-16);bottom:var(--space-16);z-index:30;display:flex;align-items:center;gap:var(--space-8);height:52px;padding:0 var(--space-16);border-radius:var(--radius-lg);background:var(--accent-default);color:var(--text-on-accent);font:var(--type-body-m-medium);box-shadow:0 8px 24px rgb(0 0 0 / .25)}
  .slipbar[hidden]{display:none}
  .slipbar .pill{background:color-mix(in srgb,var(--neutral-0) 22%,transparent);color:inherit}
  .slipbar b{margin-left:auto;font-weight:600}
}
@media (max-width:1180px) and (min-width:861px){
  .slip{left:auto;right:var(--space-16);bottom:var(--space-16);width:400px;border-radius:var(--radius-xl)}
  .slipbar{left:auto;width:400px}
}
@media (max-width:860px){
  .top{gap:var(--space-12);padding:0 var(--space-16)}
  .top__src{display:none}
  .top__actions .btn--ghost[href]{display:none}
  .layout{grid-template-columns:minmax(0,1fr);padding:var(--space-16);gap:var(--space-12)}
  .side{position:static}
  .side__h{display:none}
  .sports{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--space-16));padding:0 var(--space-16)}
  .sports::-webkit-scrollbar{display:none}
  .sport{height:36px;border:1px solid var(--border-subtle);border-radius:var(--radius-full);background:var(--bg-surface);gap:var(--space-6);padding:0 var(--space-12)}
  .sport.is-on{border-color:transparent}
  .sport__n{overflow:visible}
  .toolbar{gap:var(--space-8)}
  .days{width:100%}
  .days button{flex:1;min-width:0}
  .seg--status{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .seg--status::-webkit-scrollbar{display:none}
  .seg--status button{flex:1 0 auto;justify-content:center;padding:0 var(--space-8)}
  .search{margin:0 0 var(--space-12)}
  .lg__cols{display:none}
  .lg__r{display:none}
  .ev{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-12)}
  .ev__st{flex-direction:row;align-items:center;gap:var(--space-8)}
  .ev__odds,.ev__odds.is-2way{grid-template-columns:repeat(3,1fr)}
  .ev__odds.is-2way{grid-template-columns:repeat(2,1fr)}
  .odd{flex-direction:row;justify-content:space-between;padding:0 var(--space-12);height:40px}
  .odd .mv{position:static;margin-left:-4px}
  .qa__in{padding:var(--space-12) var(--space-16)}
  main{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}