:root{
  --bg:#0D1117; --card:#161B22; --card2:#1C2230; --border:rgba(255,255,255,.08);
  --text:#E6EDF3; --muted:#8B949E; --emerald:#10B981; --emerald2:#34D399;
  --amber:#F59E0B; --red:#EF4444; --blue:#60A5FA; --gold:#FBBF24;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;padding-bottom:78px;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:460px;margin:0 auto;padding:0 14px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(13,17,23,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;max-width:460px;margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.98rem}
.brand .dot{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--emerald),#059669);
  display:flex;align-items:center;justify-content:center;font-size:17px}
.brand small{display:block;color:var(--muted);font-size:.62rem;font-weight:600}
.authlinks{display:flex;gap:6px;flex-shrink:0}
.authlinks a{font-size:.72rem;font-weight:700;padding:7px 11px;border-radius:10px;white-space:nowrap}
.authlinks .ghost{color:var(--muted)}
.authlinks .solid{background:var(--emerald);color:#04140d}
.brand{flex-shrink:0}

/* Day bar */
.daybar{display:flex;align-items:center;justify-content:space-between;margin:14px 0 4px}
.daybar .nav{width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--muted)}
.daybar .lbl{text-align:center}
.daybar .lbl b{font-size:1.02rem;font-weight:800;text-transform:capitalize}
.daybar .lbl span{display:block;color:var(--muted);font-size:.68rem;margin-top:1px}

/* Match card */
.mcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px;
  transition:transform .12s,border-color .12s}
.mcard:active{transform:scale(.99);border-color:rgba(16,185,129,.4)}
.mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.mtime{font-size:.72rem;color:var(--muted);font-weight:600}
.mtime b{color:var(--text)}
.conf{font-size:.62rem;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:.3px}
.conf.hi{background:rgba(16,185,129,.15);color:var(--emerald2);border:1px solid rgba(16,185,129,.4)}
.conf.md{background:rgba(245,158,11,.13);color:var(--gold);border:1px solid rgba(245,158,11,.35)}
.conf.lo{background:rgba(139,148,158,.12);color:var(--muted);border:1px solid var(--border)}

.teams{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.team img{width:38px;height:38px;border-radius:7px;object-fit:cover;background:var(--card2)}
.team .nm{font-size:.74rem;font-weight:700;text-align:center;line-height:1.15;max-width:100%}
.team .host{font-size:.56rem;color:var(--gold);font-weight:800}
.vs{font-size:.7rem;color:var(--muted);font-weight:800;padding:0 4px}
.score{font-size:1.3rem;font-weight:800}

/* Probability bar 1x2 */
.pbar{display:flex;height:30px;border-radius:9px;overflow:hidden;border:1px solid var(--border)}
.pseg{display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;color:#04140d;min-width:26px}
.pseg.h{background:linear-gradient(135deg,var(--emerald),#059669)}
.pseg.d{background:#3A4252;color:var(--text)}
.pseg.a{background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff}
.plabels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--muted);margin-top:5px;font-weight:600}

/* Bottom nav */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(13,17,23,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);display:flex;max-width:460px;margin:0 auto}
.bnav a{flex:1;text-align:center;padding:10px 0 12px;color:var(--muted);font-size:.6rem;font-weight:700}
.bnav a .ic{font-size:1.15rem;display:block;margin-bottom:3px}
.bnav a.on{color:var(--emerald2)}
.bnav a.soon{opacity:.45}

/* Detail */
.dhead{display:flex;align-items:center;gap:12px;padding:14px 0}
.back{width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.sec{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:15px;margin-bottom:12px}
.sec h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:11px;font-weight:800}
.mkrow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.mkrow:last-child{border-bottom:none}
.mkrow .pct{font-weight:800}
.chip{font-size:.66rem;font-weight:800;padding:5px 11px;border-radius:99px;background:var(--card2);border:1px solid var(--border)}
.heat{display:grid;grid-template-columns:auto repeat(6,1fr);gap:3px;font-size:.6rem}
.heat .hc{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:5px;font-weight:700}
.heat .ax{color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700}
.why li{font-size:.82rem;padding:7px 0;border-bottom:1px solid var(--border);list-style:none;display:flex;gap:8px}
.why li:last-child{border-bottom:none}
.why .ck{color:var(--emerald2);font-weight:800}
.top5{display:flex;flex-wrap:wrap;gap:7px}
.top5 .ts{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;text-align:center;flex:1;min-width:62px}
.top5 .ts b{display:block;font-size:.95rem;font-weight:800}
.top5 .ts span{font-size:.62rem;color:var(--muted)}
.disc{text-align:center;color:var(--muted);font-size:.64rem;line-height:1.6;padding:6px 0 4px}
.empty{text-align:center;color:var(--muted);font-size:.84rem;padding:40px 16px}