/* KartPro Online — início e resultados. Mesma linguagem do ao vivo: sóbrio, tipográfico, estilo transmissão. */
:root{--bg:#0b0c0e;--sf:#121418;--sf2:#171a1f;--ln:#23272e;--tx:#eef1f5;--mu:#8b94a1;--mu2:#59616c;
  --roxo:#a855f7;--verde:#22c55e;--amarelo:#facc15;--vermelho:#ef3340;--ouro:#e8b923;--prata:#c8ced6;--bronze:#c98552;
  --ac:#2f80ed;--fb:"Bahnschrift","DIN Alternate","DIN 2014","Barlow","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif}
:root[data-skin=vermelho]{--ac:#e10600}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:15px/1.45 var(--fb);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mu{color:var(--mu)}
.herda{color:inherit}.dir{margin-left:auto}.pequeno{font-size:12px}.sub{margin-top:-6px}
/* topo */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;background:#08090b;border-bottom:1px solid var(--ln)}
.topo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac)}
.logo{width:26px;height:26px;display:grid;place-items:center;background:var(--ac);color:#fff;font-weight:800;font-size:14px}
.marca{font-weight:700;letter-spacing:.12em;font-size:15px;text-transform:uppercase}
.topo nav{margin-left:auto;display:flex;gap:2px}
.topo nav a{padding:7px 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mu);border-bottom:2px solid transparent}
.topo nav a.on{color:var(--tx);border-bottom-color:var(--ac)}
.skin{display:flex;gap:6px;margin-left:8px}
.skin button{width:12px;height:12px;border:1px solid #000;cursor:pointer;padding:0;outline:1px solid transparent;outline-offset:2px}
.skin button[data-s=ciano]{background:#2f80ed}.skin button[data-s=vermelho]{background:#e10600}
.skin button.on{outline-color:#fff}
main{max-width:980px;margin:0 auto;padding:18px 16px}
h1{font-size:28px;margin:6px 0 14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
h2{font-size:11px;margin:26px 0 10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);font-weight:600}
.cartao{background:var(--sf);border:1px solid var(--ln);padding:14px 16px;margin-bottom:12px}
.bt{display:inline-block;padding:9px 14px;background:var(--ac);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.lista a{display:flex;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid var(--ln);color:var(--tx)}
.lista a:last-child{border-bottom:0}
.lista a:hover b{color:#fff}
.lista b{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--ln);color:var(--mu);vertical-align:2px}
.tag.corrida{color:var(--tx)}
.tag.classificacao{color:var(--roxo);border-color:rgba(168,85,247,.45)}
.aviso{padding:16px;background:var(--sf);border:1px solid var(--ln);border-left:4px solid var(--ac);color:var(--mu)}
.aviso.ruim{border-left-color:var(--amarelo);color:var(--amarelo)}
/* destaque "ao vivo" do início */
.destaque{display:grid;gap:10px;padding:18px;border-left:4px solid var(--vermelho)}
.destaque .dnome{font-size:26px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.selo{display:inline-flex;align-items:center;gap:7px;width:max-content;font-size:11px;font-weight:700;letter-spacing:.16em;padding:4px 9px;background:var(--vermelho);color:#fff}
.selo.fim{background:#fff;color:#000}
.ponto{width:6px;height:6px;border-radius:50%;background:#fff;animation:pisca 1.4s steps(2,start) infinite}
@keyframes pisca{50%{opacity:0}}
.bt.cheio{text-align:center;padding:12px}
/* tabela de resultado */
.tabela{width:100%;border-collapse:collapse;background:var(--sf);border:1px solid var(--ln)}
.tabela th{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--mu2);font-weight:600;text-align:right;padding:9px 8px;background:var(--sf2);border-bottom:1px solid var(--ln)}
.tabela td{padding:10px 8px;border-bottom:1px solid #1a1d22;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela tr:last-child td{border-bottom:0}
.tabela .l{text-align:left}.tabela .c{text-align:center}
.pos{width:40px;text-align:center!important;font-weight:700}
tbody tr:nth-child(1) .pos,tbody tr:nth-child(2) .pos,tbody tr:nth-child(3) .pos{color:#000}
tbody tr:nth-child(1) .pos{background:var(--ouro)}tbody tr:nth-child(2) .pos{background:var(--prata)}tbody tr:nth-child(3) .pos{background:var(--bronze)}
.kart{display:inline-block;min-width:36px;padding:2px 6px;background:#f2f2f0;color:#000;font-weight:700;font-size:14px;text-align:center;border-bottom:2px solid #b9b9b5}
.nome{font-weight:600;letter-spacing:.05em;text-transform:uppercase;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.roxo{color:var(--roxo);font-weight:700}
.so-largo{display:none}
@media (min-width:640px){.so-largo{display:table-cell}.nome{max-width:280px}}
/* volta a volta */
details{background:var(--sf);border:1px solid var(--ln);margin-bottom:6px}
summary{cursor:pointer;padding:11px 14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.voltas{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 12px}
.voltas span{font-size:13px;font-variant-numeric:tabular-nums;padding:4px 8px;background:var(--sf2);border:1px solid var(--ln)}
.voltas span.melhor{color:var(--verde);border-color:rgba(34,197,94,.45)}
.voltas span.duv{color:var(--amarelo);border-color:rgba(250,204,21,.45)}
.voltas span.inv{text-decoration:line-through;color:var(--mu2)}
footer{max-width:980px;margin:20px auto;padding:0 16px 30px;color:var(--mu2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}