:root { --bg:#0f172a; --card:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#22c55e; --live:#f59e0b; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); font-size:16px; }
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; background:#0f172af2; backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.topbar h1 { font-size:1.1rem; margin:0; color:var(--accent); }
.topbar .right { display:flex; gap:.4rem; align-items:center; }
.iconbtn { background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:.5rem .8rem; font:inherit; cursor:pointer; min-height:40px; }
.langtoggle { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.langtoggle button { background:var(--card); color:var(--muted); border:none; padding:.45rem .6rem; font-weight:800; cursor:pointer; min-height:40px; }
.langtoggle button.active { background:var(--accent); color:#04210f; }
.wrap { max-width:680px; margin:0 auto; padding:0 1rem 3rem; }
#account { display:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; margin:.75rem 0; }
#account.open { display:block; }
#account input { width:100%; padding:.7rem; margin:.3rem 0; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; min-height:44px; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; }
button { font:inherit; }
.btn { flex:1; min-height:44px; padding:.6rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); cursor:pointer; }
.btn.primary { background:var(--accent); color:#04210f; border-color:var(--accent); font-weight:700; }
#liveTeaser { margin:.75rem 0; }
#liveTeaser .teaser { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.9rem 1rem; border-radius:12px; cursor:pointer;
  background:linear-gradient(90deg,#3a2400,#1e293b); border:1px solid var(--live); }
#liveTeaser .teaser strong { font-size:1.1rem; color:#fde68a; }
#liveTeaser .teaser .cta { margin-left:auto; color:var(--live); font-weight:700; }
.seg { display:flex; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.25rem; margin:.5rem 0; }
.seg button { flex:1; min-height:42px; border:none; border-radius:9px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.seg button.active { background:var(--accent); color:#04210f; }
select { width:100%; min-height:48px; padding:.6rem .8rem; font:inherit; font-size:1.05rem; color:var(--text);
  background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:1rem; }
#detailTitle { font-size:1.25rem; margin:.5rem 0 .15rem; }
.sub { color:var(--muted); font-size:.9rem; margin-bottom:.75rem; }
.cls { margin:1.1rem 0 .4rem; font-size:1.05rem; font-weight:700; color:var(--accent); }
.comp { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px; margin-bottom:.4rem; background:var(--card); }
.pos { flex:none; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--bg); border:1px solid var(--line); font-weight:700; }
.cmain { flex:1; min-width:0; }
.veh { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drv { color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cres { flex:none; text-align:right; font-size:.9rem; }
.cres strong { color:var(--accent); font-size:1.1rem; }
.pulls { display:flex; flex-wrap:wrap; gap:.25rem .85rem; margin-top:.4rem; }
.pull { white-space:nowrap; font-size:.9rem; }
.pl { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; margin-right:.3rem; }
.pv { font-weight:600; }
.pv.fp { color:var(--accent); }
.pv.dim { color:var(--muted); font-weight:400; }
.cres.best { display:flex; flex-direction:column; align-items:flex-end; gap:.05rem; border-left:1px solid var(--line); padding-left:.7rem; margin-left:.3rem; }
.cres.best .pl { font-size:.65rem; }
.badge { font-size:.7rem; padding:.15rem .5rem; border-radius:999px; font-weight:800; vertical-align:middle; }
.badge.live { background:var(--live); color:#3a2400; }
.badge.final { background:var(--accent); color:#04210f; }
.badge.official { background:#2563eb; color:#fff; }
.badge.unofficial { background:var(--line); color:var(--muted); }
.muted { color:var(--muted); }
#msg { color:var(--live); font-size:.9rem; min-height:1.2em; }
.live-dot { display:inline-block; width:9px;height:9px;border-radius:50%;background:var(--live); margin-right:.4rem; animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.center { text-align:center; padding:2rem 1rem; }
.plan { display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:1rem 1.25rem; margin:.4rem; min-width:140px; }
.plan h4 { margin:.2rem 0; color:var(--accent); }
table.users { width:100%; border-collapse:collapse; }
table.users td, table.users th { padding:.45rem .4rem; border-bottom:1px solid var(--line); font-size:.9rem; text-align:left; }
table.users select { min-height:36px; margin:0; }