/* Робобет — ночной стадион: тёмно-синий фон, индиго для навигации, мятный — плюс, коралловый — минус */
:root{
  --bg:#0e1424; --bg-2:#111a2e; --panel:#151e33; --panel-2:#1b2640; --panel-3:#22304f;
  --ink:#eaf0fa; --mut:#8e9bb8; --dim:#5f6c8a;
  --line:rgba(160,180,230,.10); --line-2:rgba(160,180,230,.20);
  --acc:#8b9bff; --acc-2:#b4beff; --acc-bg:rgba(139,155,255,.14);
  --win:#3ddc97; --win-bg:rgba(61,220,151,.13); --lose:#ff7a70; --lose-bg:rgba(255,122,112,.12);
  --gold:#f5c451; --gold-bg:rgba(245,196,81,.10);
  --link:#a9b5ff;
  --a:#3ddc97; --c:#6aa4ff; --d:#f5c451; --e:#c084fc; --f:#f472b6; --g:#2dd4bf; --h:#fb923c;
  --r:14px; --r-s:9px; --side:236px;
  --disp:Unbounded,Manrope,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(900px 500px at 85% -200px,rgba(139,155,255,.13),transparent 70%),
                   radial-gradient(700px 400px at 20% -250px,rgba(61,220,151,.07),transparent 70%);
  background-attachment:fixed;
  font:15px/1.5 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums lining-nums}
a{color:var(--link);text-decoration:none}
a:hover{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
b{font-weight:700}
button,summary{cursor:pointer}
::selection{background:rgba(139,155,255,.35)}

/* ── каркас: боковое меню ── */
nav.side{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:30;overflow-y:auto;padding:18px 12px 18px;
  background:rgba(12,18,33,.92);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
nav.side .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 10px;color:var(--ink);font:700 15px/1 var(--disp);letter-spacing:.01em}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,#8b9bff,#5b6bea);color:#0e1424;font:700 14px/1 var(--disp)}
nav.side .grp{display:flex;flex-direction:column;gap:2px}
nav.side .gname{padding:0 10px 4px;color:var(--dim);font-size:12px;font-weight:700}
nav.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);color:#c3cce0;font-size:14px;font-weight:600}
nav.side a i{font-style:normal;width:20px;text-align:center;font-size:14px;opacity:.9}
nav.side a:hover{background:var(--panel-2);color:#fff}
nav.side a.on{background:var(--acc-bg);color:#fff;box-shadow:inset 3px 0 var(--acc)}
nav.side .out{margin-top:auto;color:var(--dim);font-size:13px}

body:has(nav.side){padding-left:var(--side)}
header.top{position:relative;padding:28px 28px 8px;max-width:1360px}
.bar{display:flex;flex-direction:column;gap:12px}
header.top h1 .logo{display:none}
h1{margin:0;font:700 clamp(22px,2.4vw,30px)/1.15 var(--disp);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.meta{color:var(--mut);font-size:14px;margin-top:8px;max-width:980px}
.meta a{color:var(--acc-2);font-weight:600}
.meta a:hover{color:#fff}
.meta b{color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips a{padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);font-size:13px;font-weight:600}
.chips a.on{background:var(--acc);border-color:var(--acc);color:#0e1424}
nav:not(.side){display:flex;gap:6px;flex-wrap:wrap}
nav:not(.side) a{padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);font-size:13px;font-weight:600}
nav:not(.side) a.on{background:var(--acc);border-color:var(--acc);color:#0e1424}

body:has(nav.side) > :not(nav):not(header):not(script):not(#live){max-width:1360px}

/* ── показатели ── */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 28px 6px}
.kpi{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 14px;overflow:hidden}
.kpi span{display:block;color:var(--mut);font-size:13px;font-weight:600}
.kpi b{display:block;margin-top:8px;font:700 28px/1.05 var(--disp);letter-spacing:-.02em}
.kpi em{display:block;margin-top:6px;font-style:normal;color:var(--mut);font-size:12.5px}
.kpi.up b{color:var(--win)}.kpi.down b{color:var(--lose)}
.kpi.up{background:linear-gradient(180deg,rgba(61,220,151,.07),transparent 60%),var(--panel)}
.kpi.down{background:linear-gradient(180deg,rgba(255,122,112,.07),transparent 60%),var(--panel)}
.kpi.gold{border-color:rgba(245,196,81,.4)}

/* ── таблицы ── */
.wrap{overflow-x:auto;margin:12px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.exp .wrap{margin:0 0 12px}
table{width:100%;border-collapse:collapse;min-width:720px}
th{text-align:left;font-size:12.5px;color:var(--mut);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--panel-2);position:sticky;top:0;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(139,155,255,.045)}
td.m{white-space:normal;min-width:220px;font-weight:650}
td.m span{color:var(--mut);font-weight:400}
td.m em,em.score{margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--panel-3);color:var(--acc-2);font-style:normal;font-size:12px;font-weight:700}
em.wait{background:rgba(245,196,81,.14);color:var(--gold)}
td.t{font-weight:700;color:#cfd7ea}
tr.done{opacity:.55}
tr.sig-A td:first-child{box-shadow:inset 3px 0 var(--a)}
tr.sig-C td:first-child{box-shadow:inset 3px 0 var(--c)}
tr.sig-D td:first-child{box-shadow:inset 3px 0 var(--d)}
tr.sig-E td:first-child{box-shadow:inset 3px 0 var(--e)}
tr.sig-F td:first-child{box-shadow:inset 3px 0 var(--f)}
tr.sig-G td:first-child{box-shadow:inset 3px 0 var(--g)}
tr.sig-H td:first-child{box-shadow:inset 3px 0 var(--h)}
tr.star td{background:var(--gold-bg)}
tr.star td:first-child{box-shadow:inset 3px 0 var(--gold)}
tr.late td{background:rgba(245,196,81,.05)}

.badge{display:inline-block;min-width:22px;text-align:center;border-radius:6px;color:#0e1424;font-weight:800;font-size:12px;padding:2px 6px;margin-right:4px}
.bA{background:var(--a)} .bC{background:var(--c)} .bD{background:var(--d)} .bE{background:var(--e)} .bF{background:var(--f)} .bG{background:var(--g)} .bH{background:var(--h)} .bV{background:#38bdf8}
.val{display:block;margin-top:3px;color:var(--mut);font-size:12px;font-weight:500}

/* плюс / минус */
.win{color:var(--win);font-weight:700}.lose{color:var(--lose);font-weight:700}
.mut{color:var(--mut);font-size:13px}
.note{color:var(--mut);font-size:13px;margin:8px 2px;max-width:980px}
details.howto{margin:6px 0 4px}
details.howto > summary{display:inline-flex;align-items:center;gap:6px;list-style:none;color:var(--acc-2);font-size:13px;font-weight:600;padding:4px 0}
details.howto > summary::-webkit-details-marker{display:none}
details.howto > summary::before{content:"ⓘ";font-size:14px}
details.howto[open] > summary{margin-bottom:2px}

.warn,.toast{margin:12px 28px 0;padding:11px 15px;border-radius:12px;background:rgba(245,196,81,.10);color:#f8dd9a;border:1px solid rgba(245,196,81,.3)}
.toast.ok{background:var(--win-bg);color:var(--win);border-color:rgba(61,220,151,.3)}
.toast.bad{background:var(--lose-bg);color:var(--lose);border-color:rgba(255,122,112,.35)}
.empty{text-align:center;color:var(--mut);padding:30px}

/* ── секции ── */
.exp{padding:8px 28px 10px}
.exp h2{font:700 18px/1.25 var(--disp);margin:22px 2px 12px;letter-spacing:-.01em}
.exp h2 small{display:block;margin-top:4px;color:var(--mut);font:500 13px/1.4 Manrope,system-ui,sans-serif;letter-spacing:0}
details.block{border:1px solid var(--line);border-radius:var(--r);margin:10px 0;padding:10px 16px;background:var(--panel)}
details.block > summary,details > summary{cursor:pointer;font-weight:700;padding:4px 0}
.combo{border-top:1px dashed var(--line-2);padding:10px 0;font-size:14px}
.combo div{padding:2px 0}
.combo .tot{font-weight:800;margin-top:4px}

/* ── формы ── */
.f{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px 14px;margin:12px 28px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.f label{flex:1 1 150px;max-width:240px;font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:5px;font-weight:600}
.exp .f{margin:8px 0;border:0;padding:8px 0;background:none}
.f input,.f select,.f button,details.edit input,details.edit button{padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--ink);font:inherit;font-weight:550;width:100%}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.f button,details.edit button.save{background:var(--acc);border-color:var(--acc);color:#0e1424;font-weight:800}
.f button:hover,details.edit button.save:hover{background:var(--acc-2)}
button.danger{background:transparent;border:1px solid rgba(255,122,112,.5);color:var(--lose);border-radius:10px;padding:8px 10px;font:inherit;font-weight:700}

details.edit{min-width:180px}
details.edit summary{list-style:none;display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;font-weight:700;color:var(--acc-2)}
details.edit summary::-webkit-details-marker{display:none}
details.edit[open] summary{margin-bottom:8px}
details.edit form{display:grid;grid-template-columns:repeat(3,minmax(64px,1fr));gap:6px;min-width:240px;white-space:normal}
details.edit label{font-size:11px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
details.edit .wide{grid-column:1 / -1}
details.edit .rowbtns{grid-column:1 / -1;display:flex;gap:6px}
details.edit .rowbtns button{width:auto}

footer{padding:8px 28px 40px;color:var(--mut);font-size:12.5px;line-height:1.7;max-width:980px}
.livepill{position:fixed;right:14px;bottom:14px;z-index:40;font-size:12px;color:#c9d2ea;padding:5px 11px;border-radius:999px;
  background:rgba(21,30,51,.9);border:1px solid var(--line-2)}

/* ── вход ── */
.login{max-width:360px;margin:16vh auto;padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px}
.login h1{font-size:24px}
.login input{padding:12px;border-radius:12px;border:1px solid var(--line-2);font:inherit;background:var(--bg-2);color:var(--ink)}
.login button{padding:12px;border-radius:12px;border:0;background:var(--acc);color:#0e1424;font:inherit;font-weight:800}
.err{color:var(--lose);margin:0}

/* ── телефон и планшет: меню — строка вкладок сверху ── */
@media (max-width:980px){
  body:has(nav.side){padding-left:0;padding-top:50px}
  nav.side{position:fixed;inset:0 0 auto 0;height:50px;width:auto;flex-direction:row;align-items:center;gap:4px;padding:8px 10px;
    overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;
    background:rgba(12,18,33,.96)}
  nav.side::-webkit-scrollbar{display:none}
  nav.side .brand{padding:0 6px 0 2px}
  nav.side .brand span:last-child,nav.side .gname,nav.side .out{display:none}
  nav.side .grp{flex-direction:row;gap:4px;padding-left:6px;border-left:1px solid var(--line)}
  nav.side a{white-space:nowrap;padding:7px 11px;font-size:13px;gap:6px}
  nav.side a i{width:auto}
  nav.side a.on{box-shadow:inset 0 -2px var(--acc)}
  header.top{padding:18px 14px 4px}
}
@media (max-width:800px){
  .kpis{grid-template-columns:1fr 1fr;padding:10px 12px 4px;gap:10px}
  .kpi{padding:13px 14px 12px}
  .kpi b{font-size:22px}
  h1{font-size:21px}
  table.live{min-width:0}
  table.live th:nth-child(3),table.live td:nth-child(3),table.live th:nth-child(5),table.live td:nth-child(5){display:none}
  table.live td.m{min-width:0}
  .wrap,.f,.warn,.toast{margin-left:12px;margin-right:12px}
  .exp{padding-left:12px;padding-right:12px}
  footer{padding-left:14px;padding-right:14px}
  .f label{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ссылка на матч у букмекера — заметной кнопкой */
a.bk{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;background:var(--acc-bg);color:var(--acc-2);font-weight:700;font-size:13px;text-decoration:none}
a.bk::after{content:"↗";font-size:11px;opacity:.8}
a.bk:hover{background:var(--acc);color:#0e1424}
.obk{display:block;margin:1px 0;white-space:nowrap}
