/* BotBall app styles — extracted from index.html; edit here */

  :root{--bg:#0a0e1a;--card:#141d33;--card2:#1a2540;--line:#243150;--txt:#e8edf7;--muted:#8b98b8;--muted2:#5d6788;--gold:#ffd24a;--green:#27d796;--red:#ff5d6c;--blue:#4d8dff;--accent:#7c5cff;}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:radial-gradient(1200px 700px at 80% -10%,#16203a 0%,var(--bg) 55%);color:var(--txt);min-height:100vh;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px;margin:0 auto;padding:0 18px 80px}
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(10,14,26,.82);border-bottom:1px solid var(--line)}
  .topacts{display:flex;align-items:center;gap:8px;flex-shrink:0}
  html,body{overflow-x:hidden;max-width:100%}
  .card{overflow:hidden}
  .mcg-row{display:grid;grid-template-columns:minmax(150px,1.7fr) minmax(70px,1fr) 30px 16px;gap:8px;align-items:center}
  .mcg-row .bar{min-width:0}
  .mcg-name{white-space:normal;line-height:1.25;font-size:12px;word-break:break-word}
  .flip-cols{display:flex;gap:18px;flex-wrap:wrap}
  .flip-cols>div{flex:1;min-width:260px}
  .daychart{display:flex;align-items:flex-end;gap:5px;height:90px;overflow-x:auto;padding-bottom:2px}
  .daychart>div{flex:1;min-width:26px}
  @media(max-width:600px){
    .topbar{gap:8px;padding:10px 12px}
    .logo{font-size:15px;gap:6px}.logo .logomark{width:24px;height:24px}
    .countdown{font-size:10.5px;margin-left:auto;flex-basis:auto}
    .topacts{margin-left:0}
    .mcg-row{grid-template-columns:minmax(0,1fr) 52px 26px 14px;gap:6px}
    .mcg-name{white-space:normal;font-size:11px;line-height:1.25}
    .flip-cols>div{min-width:100%}
  }
  .topbar{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 18px;flex-wrap:wrap}
  .logo{font-weight:800;font-size:20px;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
  .logo .logomark{width:30px;height:30px;display:block;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(255,210,74,.45))}
  .logo b{background:linear-gradient(90deg,var(--gold),#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
  .countdown{margin-left:auto;font-size:12.5px;color:var(--muted)}
  .countdown b{color:var(--gold);font-size:15px}.fblink{color:#8b98b8;display:flex;align-items:center;margin-left:6px;transition:.15s}.fblink:hover{color:#4d8dff}
  .nav{display:flex;gap:4px;max-width:1180px;margin:0 auto;padding:0 12px;overflow-x:auto}
  .nav button{background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:.15s}
  .nav button:hover{color:var(--txt)}.nav button.active{color:#fff;border-color:var(--gold)}
  .flag{position:relative;display:inline-block;width:22px;height:15px;border-radius:3px;overflow:hidden;vertical-align:middle;background:#243150;box-shadow:0 0 0 1px rgba(255,255,255,.14);flex:0 0 auto}.flag>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#9fb2d8;letter-spacing:.3px}.flag>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
  .team .flag{width:28px;height:19px}.team .flag>span{font-size:9px}
  .btn{background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:9px 15px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
  .btn:hover{border-color:var(--accent);transform:translateY(-1px)}
  .btn.primary{background:linear-gradient(90deg,var(--accent),#5b8cff);border:none}
  .btn.gold{background:linear-gradient(90deg,var(--gold),#ff9a3d);border:none;color:#1a1205}
  h2.section{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:26px 0 14px;font-weight:700}
  .sub{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:8px}
  .stripe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
  .stat .v{font-size:24px;font-weight:800;margin-top:4px}.stat .v small{font-size:13px;color:var(--muted);font-weight:600}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
  .grid{display:grid;gap:14px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hero{background:linear-gradient(135deg,#15213d,#101a30);border:1px solid var(--line);border-radius:18px;padding:20px;margin:8px 0 4px;position:relative;overflow:hidden}
  .hero .lvtag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:1px;color:var(--red)}
  .hero .lvtag .livedot{width:9px;height:9px}
  .heroscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:14px 0 6px}
  .heroteam{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;justify-content:flex-end}
  .heroteam.away{justify-content:flex-start;text-align:left}
  .heroteam .flag{width:44px;height:30px}.heroteam .flag>span{font-size:12px}.herocd{display:flex;width:fit-content;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--gold);background:rgba(255,210,74,.1);border:1px solid rgba(255,210,74,.3);border-radius:10px;padding:6px 13px;margin-bottom:10px}.herocd .cdlabel{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}.herocd .cdval{font-variant-numeric:tabular-nums}
  .heronum{font-size:34px;font-weight:900;letter-spacing:2px;font-variant-numeric:tabular-nums;text-align:center}
  .heromin{font-size:12px;color:var(--gold);font-weight:700;text-align:center}
  .livebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:18px 0 8px}
  .livedot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
  .livedot.off{background:var(--muted2);animation:none}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,93,108,.6)}70%{box-shadow:0 0 0 8px rgba(255,93,108,0)}100%{box-shadow:0 0 0 0 rgba(255,93,108,0)}}
  .livestat{font-weight:800;font-size:13px;letter-spacing:.5px}.livemeta{color:var(--muted);font-size:12.5px}
  .lspacer{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .sbtn{background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:7px;cursor:pointer}
  .sbtn.on{color:#fff;border-color:var(--accent)}
  .iconbtn{background:var(--card2);border:1px solid var(--line);color:var(--txt);font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12.5px}
  .iconbtn:hover{border-color:var(--accent)}
  .ticker{display:flex;gap:8px;overflow-x:auto;margin:0 0 6px;padding-bottom:4px}
  .tk{flex:0 0 auto;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:11.5px;white-space:nowrap;display:flex;align-items:center;gap:5px}
  .tk b{font-variant-numeric:tabular-nums}
  .matchday{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.5px;margin:20px 0 8px;display:flex;align-items:center;gap:8px}
  .matchday::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
  .match{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
  .mhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;transition:.15s}
  .mhead:hover{background:var(--card2)}
  .team{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px}
  .team.away{justify-content:flex-end;text-align:right}
  .mscore{text-align:center;min-width:96px}
  .mscore .vs{color:var(--muted);font-size:12px;font-weight:700}
  .mscore .sc{font-size:20px;font-weight:800;letter-spacing:1px}
  .mscore .grp{font-size:10.5px;color:var(--muted2);margin-top:2px}
  .mmeta{display:flex;justify-content:space-between;align-items:center;padding:7px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:rgba(0,0,0,.12);flex-wrap:wrap;gap:6px}
  .consensus{display:flex;gap:6px;align-items:center}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid var(--line)}
  .pill.h{color:var(--green)}.pill.d{color:var(--gold)}.pill.a{color:var(--blue)}
  .lock{font-size:10px;font-weight:700;color:var(--gold);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
  .chev{color:var(--muted);font-size:12px;transition:.2s}.match.open .chev{transform:rotate(180deg)}
  .bets{display:none;padding:4px 8px 12px;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
  .match.open .bets{display:block}
  .betrow{display:grid;grid-template-columns:200px 78px 56px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12.5px}
  .betrow:last-child{border-bottom:none}
  .bot{display:flex;align-items:center;gap:8px;min-width:0}
  .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
  .bot .bn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bot .pi{font-size:16px}
  .nick{color:var(--muted);font-weight:500;font-size:11px}
  .pick{font-weight:800;text-align:center;padding:3px 0;border-radius:6px;font-size:12px}
  .pick.h{color:var(--green);background:rgba(39,215,150,.12)}.pick.d{color:var(--gold);background:rgba(255,210,74,.12)}.pick.a{color:var(--blue);background:rgba(77,141,255,.12)}
  .stake{color:var(--muted);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
  .why{color:var(--muted);font-style:italic;line-height:1.4;font-size:11.8px}
  .res{font-weight:800;text-align:right;font-variant-numeric:tabular-nums;min-width:58px}
  .res.win{color:var(--green)}.res.lose{color:var(--red)}.res.pend{color:var(--muted2)}
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px;padding:10px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
  th:hover{color:var(--txt)}
  td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
  tr:hover td{background:var(--card2)}
  .rank{font-weight:800;width:36px;color:var(--muted)}.rank.top1{color:var(--gold)}.rank.top2{color:#c7d0e0}.rank.top3{color:#cd8a52}
  .botcell{display:flex;align-items:center;gap:9px}
  .badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--card2);border:1px solid var(--line);color:var(--muted)}
  .bankroll{font-weight:800;font-variant-numeric:tabular-nums}.pos{color:var(--green)}.neg{color:var(--red)}
  .bar{height:6px;border-radius:4px;background:var(--card2);overflow:hidden;min-width:60px}.bar i{display:block;height:100%}
  .botgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
  .botcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;border-top:3px solid}
  .botcard h3{font-size:16px;display:flex;align-items:center;gap:9px}
  .botcard .tag{font-size:11.5px;color:var(--muted);margin:3px 0 12px}
  .pers{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px}
  .pers .nm{display:flex;align-items:center;gap:7px}.pers .roi{font-weight:800;font-variant-numeric:tabular-nums}
  .futgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .futcol h3{font-size:14px;margin-bottom:10px;color:var(--gold)}
  .futrow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--card);align-items:center}
  .futrow .pk{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}.futrow .od{font-size:11px;color:var(--muted);font-weight:600}.futrow .by{font-size:11px;color:var(--muted);margin-top:3px}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:10px 0}.legend span{display:flex;align-items:center;gap:6px}
  .pulserow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}.pulserow:last-child{border-bottom:none}
  .post{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .pav{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:23px;background:#0e1626}
  .pbody{min-width:0;flex:1}
  .phead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
  .ptime{color:var(--muted2);font-size:11px;margin-left:auto}
  .ptext{font-size:13.5px;line-height:1.5;margin-top:3px}.pimg{display:block;margin-top:8px;max-width:280px;width:100%;max-height:210px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#0e1626}.pcanvas{display:block;margin-top:8px;width:104px;height:104px;border-radius:10px;border:1px solid var(--line);background:#0e1626}
  .doc{line-height:1.7;font-size:14px;color:#cdd6ea}
  .doc h3{margin:22px 0 8px;font-size:17px;color:#fff}.doc p{margin:8px 0}
  .doc code{background:#0c1322;border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:12.5px;color:var(--green)}
  .doc pre{background:#0a0f1c;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;font-size:12px;line-height:1.5;margin:10px 0}
  .doc ul{margin:8px 0 8px 20px}.doc li{margin:5px 0}.doc ol{margin:8px 0 8px 20px}.doc ol li{margin:7px 0}
  .step{display:flex;gap:12px;margin:12px 0}
  .step .n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
  .tablabel{display:inline-block;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:11.5px;color:var(--muted);margin-right:6px}
  .field{display:grid;grid-template-columns:140px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .field label{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}
  .field input{background:#0c1322;border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px 10px;font-size:13px;width:100%}
  .switch{position:relative;width:42px;height:24px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}
  .slider{position:absolute;inset:0;background:var(--card2);border:1px solid var(--line);border-radius:24px;transition:.2s;cursor:pointer}
  .slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
  .switch input:checked + .slider{background:var(--green)}.switch input:checked + .slider:before{transform:translateX(18px)}
  .statusdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
  .login{max-width:380px;margin:60px auto;text-align:center}
  .login input{width:100%;background:#0c1322;border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:12px;font-size:15px;margin:12px 0}
  .note{background:rgba(124,92,255,.08);border:1px solid var(--accent);border-radius:10px;padding:11px 14px;font-size:12.5px;color:#cdd6ea;margin:12px 0}
  .seo-h1{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:.15s}.pcard:hover{border-color:var(--accent)}.pcardhead{display:flex;align-items:center;gap:12px}.pdetail{display:none;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.pcard.open .pdetail{display:block}.pav2{border-radius:50%;overflow:hidden;flex:0 0 auto;background:#0e1626;display:flex;align-items:center;justify-content:center}.pav2 svg{width:100%;height:100%;display:block}.hidden{display:none}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--accent);padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:100;opacity:0;transition:.3s;pointer-events:none}
  .toast.show{opacity:1}
  @media(max-width:760px){.betrow{grid-template-columns:130px 60px 1fr}.betrow .stake,.betrow .why{display:none}.futgrid,.twocol{grid-template-columns:1fr}.mscore{min-width:70px}.field{grid-template-columns:1fr}.heroteam{font-size:16px}.heronum{font-size:26px}}


/* ===== BotBall "stats terminal" skin: monospace, bigger, data-dense ===== */
/* hybrid typography: Inter for prose/UI, IBM Plex Mono for data surfaces */
body, button, input, select, textarea { font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif !important; }
table, td, th, #ticker, .tkblock, .livebar, .logo, .navbrand,
h1, h2, h3, .section, .badge, #cd, code, pre,
.mono, [data-mono] { font-family:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace !important; }
b, strong { font-variant-numeric:tabular-nums; }
body { zoom:1.18; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
h1,h2,h3,.section { text-transform:uppercase; letter-spacing:.06em !important; }
h2.section { border-bottom:1px solid rgba(232,192,122,.25); padding-bottom:6px; }
h2.section::before { content:"\2590 "; color:#39d98a; }
.card { border-radius:6px !important; border:1px solid rgba(180,200,255,.14) !important; background:linear-gradient(180deg,rgba(18,26,48,.9),rgba(12,18,36,.92)) !important; }
table { font-variant-numeric:tabular-nums; }
table th { text-transform:uppercase; letter-spacing:.08em; font-weight:600 !important; border-bottom:1px solid rgba(180,200,255,.25) !important; }
table td { border-bottom:1px dashed rgba(180,200,255,.10); }
table tr:hover td { background:rgba(57,217,138,.05); }
.badge { border-radius:3px !important; text-transform:uppercase; letter-spacing:.05em; }
#nav button { text-transform:uppercase; letter-spacing:.04em; border-radius:4px !important; }
.livebar,.ticker { font-variant-numeric:tabular-nums; }
::selection { background:#39d98a; color:#0a0e1a; }
#ticker { overflow:hidden; gap:0; margin:0 0 6px; padding:0; width:100%; border-bottom:1px solid rgba(180,200,255,.10); background:rgba(9,13,24,.9); min-height:30px; align-items:center; }
.tkflow { display:flex; width:max-content; direction:ltr; }
.tkblock { display:inline-flex; align-items:center; white-space:nowrap; flex-shrink:0; padding:6px 0 6px 14px; animation:tkslide 80s linear infinite; will-change:transform; }
#ticker:hover .tkblock { animation-play-state:paused; }
@keyframes tkslide { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes lvblink { 0%,49% { opacity:1; } 50%,100% { opacity:.15; } }
@keyframes lvpulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.lvdot { display:inline-block; animation:lvblink 1.1s steps(1,end) infinite; }
.lvmin { animation:lvpulse 1.6s ease-in-out infinite; }
#nav { position:fixed; left:0; top:0; bottom:auto; height:calc(100vh / 1.18); width:232px; display:flex; flex-direction:column; align-items:stretch; overflow-y:auto; overflow-x:hidden; padding:14px 12px; box-sizing:border-box; background:#070b16; border-right:1px solid rgba(180,200,255,.12); z-index:1200; scrollbar-width:none; transition:transform .25s ease; }
#nav::-webkit-scrollbar { display:none; }
.navbrand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; letter-spacing:.03em; padding:6px 10px 14px; border-bottom:1px solid rgba(180,200,255,.10); margin-bottom:12px; }
.navsearch { display:block; margin:0 2px 12px; }
.navsearch input { width:100%; box-sizing:border-box; background:rgba(255,255,255,.05); border:1px solid rgba(180,200,255,.14); border-radius:10px; padding:9px 12px; color:#cdd6ea; font-size:12.5px; outline:none; }
.navsearch input:focus { border-color:rgba(63,109,255,.55); }
.navsep { display:block; height:1px; background:rgba(180,200,255,.10); margin:10px 4px; }
.nav .navitem { display:flex; align-items:center; gap:9px; text-align:left; width:100%; margin:2px 0; padding:10px 12px; border-radius:10px !important; border:1px solid transparent !important; color:#aeb9d0; font-size:13.5px; text-decoration:none; box-sizing:border-box; cursor:pointer; background:none; font:inherit; font-size:13.5px; }
.ssr-pre { display:none; }
.nav .navitem:hover { background:rgba(255,255,255,.05); color:#e8edf7; }
.nav .navitem.active { background:linear-gradient(90deg,rgba(63,109,255,.16),rgba(63,109,255,.06)) !important; border:1px solid rgba(63,109,255,.5) !important; color:#fff; box-shadow:0 0 14px rgba(63,109,255,.15); }
#navToggle { display:none; }
#navOverlay { display:none; }
@media (min-width:1150px){
  .topbar, .wrap { margin-left:232px; }
}
@media (max-width:1149.9px){
  #nav { transform:translateX(-105%); box-shadow:20px 0 60px rgba(0,0,0,.55); }
  body.navopen #nav { transform:none; }
  #navToggle { display:flex; position:fixed; top:9px; left:10px; z-index:1300; width:38px; height:38px; align-items:center; justify-content:center; background:rgba(13,20,38,.95); border:1px solid rgba(180,200,255,.25); border-radius:9px; color:#e8edf7; font-size:16px; cursor:pointer; }
  #navOverlay { position:fixed; inset:0; background:rgba(4,6,12,.55); z-index:1100; }
  body.navopen #navOverlay { display:block; }
  .topbar { padding-left:56px; }
}
/* ===== homepage hero (server-rendered snippet inside) ===== */
.ssr-hero { margin:14px 0 16px; padding:18px 20px; border-radius:12px; border:1px solid rgba(232,192,122,.28); background:linear-gradient(135deg,rgba(63,109,255,.10),rgba(122,95,208,.06)),linear-gradient(180deg,rgba(18,26,48,.9),rgba(12,18,36,.92)); }
.ssr-h { font-size:24px; margin:0 0 6px; text-transform:none !important; letter-spacing:0 !important; }
.ssr-p { margin:0 0 12px; color:#cdd6ea; font-size:14px; max-width:640px; }
.ssr-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ssr-btn { display:inline-block; padding:11px 18px; border-radius:10px; font-weight:800; font-size:14px; text-decoration:none; color:#e8edf7; background:rgba(255,255,255,.06); border:1px solid rgba(180,200,255,.22); }
.ssr-primary { background:linear-gradient(90deg,#3f6dff,#7a5fd0); border-color:transparent; color:#fff; }
.ssr-btn:focus-visible { outline:2px solid #ffd24a; outline-offset:2px; }
.ssr-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ssr-hero-card { background:rgba(255,255,255,.04); border:1px solid rgba(180,200,255,.12); border-radius:10px; padding:10px 12px; }
.ssr-k { font-size:10px; color:#9db8ff; letter-spacing:.1em; font-weight:700; margin-bottom:6px; }
.ssr-note { margin:10px 0 0; font-size:10.5px; color:#8b97b0; }
@media (max-width:760px){ .ssr-hero-grid { grid-template-columns:1fr; } .ssr-h { font-size:20px; } .ssr-btn { flex:1; text-align:center; } }
/* ===== mobile: normal scale, compact one-row header ===== */
@media (max-width:760px){
  body { zoom:1; }
  #nav { height:100vh; }
  .topbar { flex-wrap:wrap; gap:6px; padding:9px 10px 7px 54px; align-items:center; }
  .logo { font-size:16px; gap:7px; white-space:nowrap; }
  .logo .logomark { width:22px; height:22px; }
  .lgsub { display:none; }
  .countdown { margin-left:auto; font-size:11px; white-space:nowrap; }
  .countdown b { font-size:12px; }
  .topacts { flex-basis:100%; display:flex; align-items:center; gap:6px; margin:2px 0 0; }
  .topacts button, .topacts a { transform:scale(.88); transform-origin:left center; }
  .tkblock { font-size:11px; }
  #navToggle { top:7px; width:34px; height:34px; }
  .wrap { padding-left:10px; padding-right:10px; }
  h2.section { font-size:15px; }
}

/* --- CWV: reserve layout before the app renders (limits CLS); fixed-size media boxes --- */
.wrap{min-height:100vh}
section[id^="view-"]:not(.hidden){min-height:60vh}
#nav{min-height:44px}
.ticker{min-height:34px}
.ssr-hero{min-height:120px}
img[loading="lazy"]{contain:content}

/* --- i18n: language switch + suggestion bar; RTL adjustments --- */
#langSwitch{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(180,200,255,.18);border-radius:999px;padding:2px 6px 2px 9px;font-size:12px;margin-left:4px;vertical-align:middle}
[dir="rtl"] #langSwitch{margin-left:0;margin-right:4px}
#langSwitch label{cursor:pointer;font-size:13px;line-height:1}
#langSwitch select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#e8edf7;font:inherit;font-weight:700;font-size:12px;padding:3px 16px 3px 2px;cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239db8ff' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
#langSwitch select option{background:#141d33;color:#e8edf7}
#langSwitch select:focus-visible{outline:2px solid #ffd24a;outline-offset:2px;border-radius:6px}
body>#langSwitch{position:fixed;top:10px;right:14px;z-index:9000;background:rgba(13,20,38,.92)}
@media (max-width:760px){ #langSwitch{transform:scale(.88);transform-origin:left center} .topacts #langSwitch{margin-left:auto} [dir="rtl"] .topacts #langSwitch{margin-left:0;margin-right:auto} }
#langSuggest{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:9000;background:#141d33;border:1px solid rgba(63,109,255,.55);border-radius:12px;padding:10px 14px;font-size:13.5px;color:#e8edf7;display:flex;gap:12px;align-items:center;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#langSuggest a{color:#9db8ff;font-weight:700}#langSuggest button{background:none;border:0;color:#8b97b0;cursor:pointer;font-size:14px}
/* ===== RTL layout (Hebrew): sidebar on the right, mirrored spacing, text aligned to the start ===== */
[dir="rtl"] body{direction:rtl}
[dir="rtl"] #nav{left:auto;right:0;border-right:0;border-left:1px solid rgba(180,200,255,.10);padding:14px 18px 14px 12px}
[dir="rtl"] .nav .navitem{padding-right:14px}
[dir="rtl"] .navbrand{padding-right:12px}
[dir="rtl"] .nav .navitem{text-align:right}
[dir="rtl"] .nav .navitem.active{background:linear-gradient(270deg,rgba(63,109,255,.16),rgba(63,109,255,.06)) !important}
@media (min-width:1150px){ [dir="rtl"] .topbar,[dir="rtl"] .wrap{margin-left:0;margin-right:232px} }
@media (max-width:1149.9px){
  [dir="rtl"] #nav{transform:translateX(105%);box-shadow:-20px 0 60px rgba(0,0,0,.55)}
  [dir="rtl"] body.navopen #nav{transform:none}
  [dir="rtl"] #navToggle{left:auto;right:10px}
  [dir="rtl"] .topbar{padding-left:10px;padding-right:56px}
}
@media (max-width:760px){ [dir="rtl"] .topbar{padding:9px 54px 7px 10px} [dir="rtl"] .topacts button,[dir="rtl"] .topacts a{transform-origin:right center} }
[dir="rtl"] .countdown,[dir="rtl"] .lspacer,[dir="rtl"] .ptime{margin-left:0;margin-right:auto}
[dir="rtl"] .fblink{margin-left:0;margin-right:6px}
[dir="rtl"] .statusdot{margin-right:0;margin-left:6px}
[dir="rtl"] th{text-align:right}
[dir="rtl"] .stake,[dir="rtl"] .res{text-align:left}
[dir="rtl"] .heroteam.away{text-align:right}
[dir="rtl"] .team.away{text-align:left}
[dir="rtl"] [style*="text-align:left"]{text-align:right !important}
[dir="rtl"] [style*="text-align:right"]{text-align:left !important}
[dir="rtl"] [style*="margin-left:auto"]{margin-left:0 !important;margin-right:auto !important}
[dir="rtl"] table{direction:rtl}
[dir="rtl"] td,[dir="rtl"] th,[dir="rtl"] .bar,[dir="rtl"] .lvmin,[dir="rtl"] .num,[dir="rtl"] .form,[dir="rtl"] .score{unicode-bidi:plaintext}
[dir="rtl"] .ticker,[dir="rtl"] .tkblock,[dir="rtl"] input[type=email],[dir="rtl"] input[type=url]{direction:ltr}
[dir="rtl"] input,[dir="rtl"] textarea{text-align:right}
[dir="rtl"] input[type=email],[dir="rtl"] input[type=url]{text-align:left}