:root{
  --red:#e8002d; --red2:#ff2b53; --ink:#0a0a0c; --card:#141417; --card2:#1c1c21;
  --line:#27272d; --line2:#3a3a42; --txt:#ececf0; --mut:#9a9aa6; --gold:#ffce3a;
  --silver:#cbd5e1; --bronze:#d9803a; --ok:#34d399;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--txt);
  background:
    radial-gradient(120% 70% at 50% -10%, #2a0410 0%, #12060a 45%, var(--ink) 75%);
  min-height:100vh; -webkit-text-size-adjust:100%;
}
.wrap{ max-width:680px; margin:0 auto;
  padding:0 calc(16px + env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }

/* header */
header{ padding:calc(26px + env(safe-area-inset-top)) 0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.crest{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:24px; flex:none;
  background:linear-gradient(150deg,#2a0410,#000); border:1px solid var(--red); box-shadow:0 0 22px rgba(232,0,45,.3); }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.28em; color:var(--red2); text-transform:uppercase; }
h1{ margin:1px 0 0; font-size:22px; font-weight:900; color:#fff; line-height:1; }
.sub{ font-size:12px; color:var(--mut); margin-top:3px; }
.btn-ghost{ background:transparent; color:#d4d4d8; border:1px solid var(--line2); border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; white-space:nowrap; }
.btn-ghost:hover{ border-color:var(--red2); color:var(--red2); }

/* tabs */
.tabs{ display:grid; gap:4px; padding:4px; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:13px; margin-bottom:18px; }
.tab{ padding:10px 2px; min-height:44px; border:none; background:transparent; font-family:inherit; border-radius:9px; font-size:13px; font-weight:800; cursor:pointer; color:#cfcfd6; white-space:nowrap; }
.tab:hover{ color:#fff; }
.tab.active{ background:var(--red); color:#fff; box-shadow:0 3px 14px rgba(232,0,45,.35); }

/* cards & generic */
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.center{ text-align:center; color:var(--mut); padding:40px 0; font-size:14px; }
.day{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red2); margin:22px 0 8px; }
.banner{ background:rgba(232,0,45,.1); border:1px solid rgba(232,0,45,.3); color:#ffd0d8; border-radius:11px; padding:10px 13px; font-size:13px; margin-bottom:12px; }
.banner.ok{ background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); color:#bff3df; }
.banner b{ color:#fff; }
.barRow{ display:flex; justify-content:flex-end; margin-bottom:12px; }
.toggle{ background:transparent; border:1px solid var(--line2); color:var(--mut); border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; }
.toggle:hover{ border-color:#52525b; color:var(--txt); }
.btn{ cursor:pointer; border:none; border-radius:10px; font-weight:800; font-family:inherit; }
.btn-red{ background:var(--red); color:#fff; padding:11px 14px; }
.btn-red:hover{ background:var(--red2); }
.btn-red:disabled{ background:#2a2a30; color:#6b6b75; cursor:default; }
.btn-line{ background:transparent; border:1px solid var(--line2); color:var(--txt); padding:9px 12px; border-radius:9px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-line:hover{ border-color:var(--red2); }
.spin{ width:24px; height:24px; border:2px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:sp .7s linear infinite; margin:0 auto 12px; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.err{ color:#ff7a7a; font-size:14px; margin-top:10px; }
.muted{ color:var(--mut); font-size:12px; }

/* login */
.seg{ display:flex; gap:8px; margin-bottom:14px; }
.seg button{ flex:1; padding:10px 0; min-height:44px; border-radius:9px; border:none; cursor:pointer; font-weight:800; font-size:14px; background:#26262c; color:#d4d4d8; font-family:inherit; }
.seg button.on{ background:#f4f4f5; color:var(--ink); }
label{ display:block; font-size:12px; color:var(--mut); margin:12px 0 5px; }
input.fld, select.fld{ width:100%; background:#101013; border:1px solid var(--line2); border-radius:10px; padding:11px 12px; color:#fff; font-size:16px; font-family:inherit; }
input.pin{ letter-spacing:.4em; text-align:center; }

/* race card / palpite */
.race{ border:1px solid var(--line); background:var(--card); border-radius:14px; padding:14px; margin-bottom:12px; }
.race.locked{ opacity:.96; }
.race.done{ border-left:3px solid var(--red); }
.race.live{ border-color:var(--red); box-shadow:0 0 0 1px rgba(232,0,45,.4), 0 8px 26px rgba(232,0,45,.14); }
.race-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.race-title{ font-size:15px; font-weight:800; color:#fff; }
.race-when{ font-size:11px; color:var(--mut); }
.lockpill{ font-size:9px; font-weight:800; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:#2a2a30; color:var(--mut); }
.lockpill.open{ background:rgba(52,211,153,.16); color:#7ef0c4; }
.lockpill.unl{ background:rgba(255,206,58,.18); color:var(--gold); }

.grid10{ display:grid; gap:7px; }
.pickrow{ display:grid; grid-template-columns:34px 1fr; align-items:center; gap:8px; }
.pickrow .pos{ font-size:12px; font-weight:800; color:var(--mut); text-align:center; }
.pickrow.hit .pos{ color:var(--ok); }
.pickrow.miss .pos{ color:#ff7a7a; }

/* combobox */
.cbx{ position:relative; }
.cbx-input{ width:100%; background:#101013; border:1px solid var(--line2); border-radius:9px; padding:9px 30px 9px 11px; color:#fff; font-size:15px; font-family:inherit; }
.cbx-input:focus{ outline:none; border-color:var(--red2); box-shadow:0 0 0 3px rgba(232,0,45,.18); }
.cbx-input:disabled{ background:#161619; color:#cfcfd6; border-color:var(--line); }
.cbx.dis .cbx-clear{ display:none; }
.cbx-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:22px; height:22px; border:none; background:transparent; color:var(--mut); font-size:18px; line-height:1; cursor:pointer; border-radius:6px; }
.cbx-clear:hover{ color:#fff; }
.cbx-list{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); max-height:240px; overflow:auto;
  background:#17171c; border:1px solid var(--line2); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.cbx-item{ padding:9px 11px; font-size:14px; color:#e4e4e7; cursor:pointer; }
.cbx-item:hover, .cbx-item.active{ background:rgba(232,0,45,.16); color:#fff; }
.cbx-item.sel{ color:var(--red2); font-weight:700; }
.cbx-empty{ padding:10px 11px; font-size:13px; color:var(--mut); }

.foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:8px; }
.status{ font-size:12px; font-weight:700; color:var(--mut); min-height:16px; }
.status.ok-s{ color:var(--ok); } .status.err-s{ color:var(--gold); }
.note{ font-size:12px; color:var(--mut); }
.note .pts{ color:var(--red2); font-weight:800; }
.seeall{ background:transparent; border:none; color:var(--red2); font-size:12px; font-weight:700; cursor:pointer; padding:8px 0 0; }
.picks{ margin-top:8px; border-top:1px solid var(--line); padding-top:6px; }
.pkrow{ display:flex; justify-content:space-between; gap:8px; padding:6px 2px; font-size:13px; color:#d4d4d8; border-bottom:1px solid #1b1b20; }
.pkrow:last-child{ border-bottom:none; }
.pkrow .pkpts{ color:var(--red2); font-weight:800; font-family:ui-monospace,monospace; }
.pkmini{ font-size:11px; color:var(--mut); }

/* ranking */
.subtabs{ display:flex; gap:6px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:11px; padding:4px; margin-bottom:16px; flex-wrap:wrap; }
.subtab{ flex:1; min-width:84px; padding:9px 4px; min-height:42px; border:none; border-radius:8px; background:transparent; color:var(--mut); font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
.subtab.on{ background:#f4f4f5; color:var(--ink); }
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:6px 0 18px; }
.pod{ flex:1; min-width:0; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 0 0; padding:12px 6px; }
.pod.gold{ padding-top:26px; border-color:rgba(255,206,58,.5); background:linear-gradient(180deg,rgba(255,206,58,.14),rgba(0,0,0,.2)); }
.pod.silver{ padding-top:16px; }
.pod.bronze{ padding-top:9px; }
.pod.mep{ box-shadow:0 0 0 1px var(--red2) inset; }
.pmed{ font-size:24px; } .pnm{ font-size:12px; color:#fff; font-weight:800; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ppts{ font-family:ui-monospace,monospace; font-size:18px; font-weight:900; color:var(--red2); margin-top:2px; } .ppos{ font-size:10px; color:var(--mut); font-weight:800; }
.rk{ display:grid; grid-template-columns:30px 1fr auto; gap:10px; padding:12px 8px; align-items:center; border-bottom:1px solid #18181c; }
.rk .pos{ font-weight:900; color:var(--mut); }
.rk.first .pos{ color:var(--gold); } .rk.second .pos{ color:var(--silver); } .rk.third .pos{ color:var(--bronze); }
.rk.me{ background:rgba(232,0,45,.08); border-radius:8px; }
.rk .nm{ color:#fff; font-weight:700; } .rk .nm small{ display:block; color:var(--mut); font-size:10px; font-weight:600; }
.rk .tot{ font-family:ui-monospace,monospace; font-size:18px; font-weight:800; text-align:right; color:#fff; }
.banner.me{ display:flex; justify-content:space-between; }

/* ao vivo */
.lvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.lvtit{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; }
.lvcell{ font-size:14px; color:#e4e4e7; padding:9px 10px; margin-bottom:6px; border-radius:9px; border:1px solid var(--line); background:#101013;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvcell.hit{ background:rgba(52,211,153,.18); border-color:rgba(52,211,153,.6); color:#d6ffe9; }
.lvcell.miss{ background:rgba(232,0,45,.16); border-color:rgba(232,0,45,.55); color:#ffd6dd; }
.lvcell.neutral{ opacity:.85; }
.lvpontos{ margin-top:12px; text-align:center; font-size:15px; color:#fff; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px; }
.lvpontos b{ color:var(--red2); font-size:20px; font-family:ui-monospace,monospace; }

/* barra de estado da pista: bandeira + volta */
.lvbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.flagbadge{ font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; border:1px solid var(--line2); background:#101013; color:#fff; }
.lapbadge{ font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; background:#101013; border:1px solid var(--line2); color:#fff; font-family:ui-monospace,monospace; letter-spacing:.02em; }
.pitchip{ font-size:9px; font-weight:900; letter-spacing:.08em; padding:1px 6px; border-radius:6px; margin-left:6px;
  background:rgba(59,157,255,.18); border:1px solid rgba(59,157,255,.6); color:#bfe0ff; vertical-align:middle; }

/* cores por bandeira: borda do card + tom do badge */
.race.live.flag-green{  border-color:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.55), 0 8px 26px rgba(52,211,153,.16); }
.race.live.flag-green  .flagbadge{ background:rgba(52,211,153,.18); border-color:rgba(52,211,153,.7); color:#b8ffe3; }
.race.live.flag-yellow{ border-color:#ffce3a; box-shadow:0 0 0 2px rgba(255,206,58,.6), 0 8px 26px rgba(255,206,58,.16); }
.race.live.flag-yellow .flagbadge{ background:rgba(255,206,58,.2); border-color:rgba(255,206,58,.7); color:#ffe89a; }
.race.live.flag-red{    border-color:#ff2b53; box-shadow:0 0 0 2px rgba(232,0,45,.6), 0 8px 26px rgba(232,0,45,.18); }
.race.live.flag-red    .flagbadge{ background:rgba(232,0,45,.2); border-color:rgba(232,0,45,.7); color:#ffd0da; }
.race.live.flag-cheq{   border-color:#cbd5e1; box-shadow:0 0 0 2px rgba(203,213,225,.5), 0 8px 26px rgba(203,213,225,.12); }
.race.live.flag-cheq   .flagbadge{ background:rgba(203,213,225,.16); border-color:rgba(203,213,225,.6); color:#eef2f7; }

/* tabela de classificação (resultados) */
.clstable{ width:100%; border-collapse:collapse; }
.clstable td{ padding:9px 6px; border-bottom:1px solid #18181c; font-size:14px; }
.clstable .cp{ width:30px; color:var(--mut); font-weight:800; font-family:ui-monospace,monospace; }
.clstable .cn{ color:#fff; }
.clstable .ct{ color:var(--mut); font-size:11px; text-align:right; }
.clstable .cl{ width:88px; text-align:center; color:#fff; font-weight:700; font-family:ui-monospace,monospace; font-size:13px; white-space:nowrap; }
/* Coluna do meio = tempo. Piloto ganha a equipe como subtítulo. */
.clstable.withtime .cn{ line-height:1.2; }
.clstable .cnteam{ display:block; color:var(--mut); font-size:11px; margin-top:1px; }
/* Listras alternadas (estilo Excel) p/ leitura mais fácil. */
.clstable.zebra tr:nth-child(even){ background:rgba(255,255,255,.035); }
.clstable.zebra td:first-child{ border-top-left-radius:6px; border-bottom-left-radius:6px; }
.clstable.zebra td:last-child{ border-top-right-radius:6px; border-bottom-right-radius:6px; }

/* chart */
.chartwrap{ overflow-x:auto; }
canvas{ display:block; }

.legend{ margin-top:26px; border-top:1px solid #18181c; padding-top:14px; font-size:11px; color:var(--mut); line-height:1.6; }
.legend b{ color:var(--red2); }