:root{
    --bg:#0b1020; --card:#131a2e; --card2:#0f1526; --border:#232c47;
    --text:#e8ecf3; --muted:#8b95ad; --accent:#22c55e; --accent2:#16a34a;
    --gold:#fbbf24; --red:#ef4444; --blue:#3b82f6;
    --row-alt:rgba(148,163,184,.055); --row-hover:rgba(34,197,94,.08);
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  button,select,input,summary{touch-action:manipulation}
  body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:
    radial-gradient(1200px 600px at 80% -10%, #16224a 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #0f2e1e 0%, transparent 55%),
    var(--bg);
    color:var(--text);min-height:100vh}
  header{padding:22px 28px 10px}
  h1{margin:0;font-size:26px;letter-spacing:.3px}
  h1 .sub{font-size:13px;color:var(--muted);font-weight:400;display:block;margin-top:4px}
  .controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 28px;border-bottom:1px solid var(--border)}
  .controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
  select,input[type=number]{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:13px}
  input[type=range]{accent-color:var(--accent)}
  button{background:var(--accent2);color:#fff;border:0;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer}
  button:hover{filter:brightness(1.1)}
  button.ghost{background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:400}
  #progress{height:3px;background:transparent;width:100%}
  #progress div{height:3px;background:var(--accent);width:0%;transition:width .1s}
  #runinfo{font-size:12px;color:var(--muted);margin-left:auto}
  nav{display:flex;gap:6px;padding:14px 28px 0}
  nav button{background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:500;padding:8px 16px}
  nav button.active{background:var(--card);color:var(--text);border-color:var(--accent2)}
  main{padding:18px 28px 40px}
  section{display:none}
  section.active{display:block}
  .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:14px}
  .badge{display:inline-block;min-width:38px;text-align:center;background:#1d2742;border:1px solid var(--border);border-radius:6px;padding:1px 5px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#aeb9d6}
  .badge.host{border-color:var(--gold);color:var(--gold)}
  #ov-table{overflow-x:auto}
  table{border-collapse:collapse;width:100%;font-size:13px}
  th{color:var(--muted);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-size:12px;cursor:default}
  tr:nth-child(even){background:var(--row-alt)}
  tr:not(:first-child):hover{background:var(--row-hover)}
  td{padding:6px 8px;border-bottom:1px solid #1a2138}
  tr:last-child td{border-bottom:0}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  .podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
  .podium .card{margin:0;text-align:center;padding:18px}
  .podium .pct{font-size:30px;font-weight:700;color:var(--gold)}
  .podium .nm{font-size:16px;font-weight:600;margin:6px 0 2px}
  .podium .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  .groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:14px}
  .group-card h3{margin:0 0 10px;font-size:15px}
  .group-card h3 span{color:var(--muted);font-weight:400;font-size:12px}
  .fixtures{margin-top:10px;border-top:1px dashed var(--border);padding-top:8px}
  .fx{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:12.5px}
  .fx .tn{flex:1}
  .fx .tn.right{text-align:right}
  .fx .pred{min-width:92px;text-align:center;font-size:11px;color:var(--muted);background:var(--card2);border:1px dashed var(--border);border-radius:6px;padding:3px 10px;cursor:help;white-space:nowrap}
  .fx .pred b{color:#dbe3f5;font-size:14px}
  .fx .pred.dim{opacity:.45}
  .fx .dt{min-width:42px;font-size:10px;color:var(--muted)}
  .fx .score{min-width:48px;text-align:center;font-size:13px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;cursor:help}
  .fx .score.final{background:#10331f;border:1px solid var(--accent2);color:#86efac}
  .fx .score.live{background:#3a1020;border:1px solid var(--red);color:#fda4af;animation:livepulse 1.4s infinite}
  @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.55}}
  .bpred.final{color:#86efac}
  .bpred.liveb{color:#fda4af;animation:livepulse 1.4s infinite}
  #syncinfo{font-size:12px;color:var(--gold)}
  .bmatch .bpred{margin-top:5px;padding-top:5px;border-top:1px dashed var(--border);font-size:11px;color:var(--muted);cursor:help}
  .bmatch .bpred b{color:#aeb9d6;font-size:12px}
  .bracket{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
  .bcol{min-width:235px;scroll-snap-align:start}
  .bcol h4{margin:4px 0 2px;font-size:13px}
  .bcol .dates{font-size:11px;color:var(--muted);margin-bottom:8px}
  .bmatch{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:12.5px}
  .bmatch .mno{font-size:10px;color:var(--muted);margin-bottom:4px}
  .bmatch .side{display:flex;align-items:center;gap:6px;padding:2px 0}
  .bmatch .side .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bmatch .side .ap{color:var(--muted);font-size:11px}
  .bmatch .side .wp{font-weight:700;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
  .bmatch.champ{border-color:var(--gold)}
  .bmatch.champ .title{color:var(--gold);font-weight:700;font-size:13px}
  .h2h-wrap{max-width:680px}
  .h2h-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  .h2h-row select{font-size:14px;padding:8px}
  .bar{display:flex;height:26px;border-radius:8px;overflow:hidden;font-size:12px;font-weight:600;margin:10px 0}
  .bar div{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap}
  .bar .w{background:#15803d}.bar .d{background:#475569}.bar .l{background:#9f1239}
  .scorelines{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .scoreline{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;text-align:center}
  .scoreline b{display:block;font-size:15px}
  .note{font-size:12px;color:var(--muted);line-height:1.6}
  details{margin-top:18px}
  summary{cursor:pointer;color:var(--muted);font-size:13px}
  .heat{position:relative}
  /* ----- Live & Today tab ----- */
  .lvday{font-size:13px;color:var(--muted);font-weight:600;margin:4px 0 12px}
  .lvmatch{cursor:pointer;padding:10px 14px}
  .lvmatch:hover{border-color:var(--accent2)}
  .lvhead{display:flex;align-items:center;gap:10px;min-width:0}
  .lvst{min-width:56px;text-align:center;font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;white-space:nowrap}
  .lvst.live{background:#3a1020;border:1px solid var(--red);color:#fda4af;animation:livepulse 1.4s infinite}
  .lvst.ft{background:#10331f;border:1px solid var(--accent2);color:#86efac}
  .lvst.up{background:var(--card2);border:1px solid var(--border);color:var(--muted)}
  .lvteam{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  .lvteam.right{text-align:right}
  .lvscore{font-size:15px;font-weight:700;min-width:46px;text-align:center;white-space:nowrap}
  .lvscore.live{color:#fda4af}
  .lvscore.ft{color:#86efac}
  .lvscore.up{color:var(--muted);font-weight:400;font-size:12px}
  .lvscore small{font-size:10px;font-weight:400;color:var(--muted)}
  .lvstage{font-size:10.5px;color:var(--muted);white-space:nowrap}
  .lvchev{color:var(--muted);font-size:11px}
  .lvdetail{border-top:1px dashed var(--border);margin-top:10px;padding-top:10px;cursor:auto}
  .lvstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:10px}
  .lvstat{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;text-align:center}
  .lvstat .v{font-size:16px;font-weight:700}
  .lvstat .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
  .lvdot{display:inline-block;background:var(--red);color:#fff;border-radius:10px;padding:0 7px;font-size:11px;font-weight:700;animation:livepulse 1.4s infinite}
  #tapTip{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:99;background:#161f3a;border:1px solid var(--accent2);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.55;box-shadow:0 8px 30px rgba(0,0,0,.55);display:none;white-space:pre-line}
  #tapTip.show{display:block;animation:tipin .15s ease-out}
  @keyframes tipin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
  @media(max-width:700px){
    header,main,.controls,nav{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
    header{padding-top:16px}
    h1{font-size:21px}
    h1 .sub{font-size:12px}
    .controls{gap:10px}
    .controls label{flex:1 1 100%}
    .controls input[type=range]{width:100%;height:28px}
    select,input[type=number]{font-size:16px;padding:9px 10px}  /* ≥16px stops iOS zoom-on-focus */
    button{min-height:44px;padding:10px 16px}
    #runBtn,#syncBtn{flex:1 1 40%}
    #runinfo{margin-left:0}
    nav{position:sticky;top:0;z-index:20;background:rgba(11,16,32,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
    nav::-webkit-scrollbar{display:none}
    nav button{flex:0 0 auto;min-height:40px;padding:8px 13px;font-size:13px}
    main{padding-top:12px}
    .podium{grid-template-columns:repeat(3,1fr);gap:8px}
    .podium .card{padding:12px 6px}
    .podium .pct{font-size:20px}
    .podium .nm{font-size:12px}
    .podium .lbl{font-size:9px;letter-spacing:.6px}
    .card{padding:12px}
    th,td{padding:6px 5px}
    #ov-table table{font-size:12px}
    #ov-table td:nth-child(2){white-space:nowrap}
    #ov-table th:nth-child(3),#ov-table td:nth-child(3),
    #ov-table th:nth-child(4),#ov-table td:nth-child(4){display:none}
    .group-card th:nth-child(2),.group-card td:nth-child(2){display:none}
    .fx{font-size:12px;gap:5px}
    .fx .dt{min-width:34px;font-size:9px}
    .fx .pred{min-width:64px;padding:3px 6px}
    .fx .score{min-width:42px;padding:3px 6px;font-size:12px}
    .h2h-row select{flex:1 1 40%;min-width:0}
    .lvstage{display:none}
    .lvhead{gap:7px}
    .lvst{min-width:46px;font-size:10px}
    .lvteam{font-size:12px}
    .lvscore{min-width:40px;font-size:13.5px}
    summary{padding:6px 0}
  }