/* Race Assistant - raceassistant.be */
:root{
  --bg:#0b0d10; --bg2:#12161b; --card:#161b22; --line:#232a33;
  --tekst:#e6e9ed; --muted:#8b95a1; --rood:#e10600; --rood2:#ff2d23;
  --groen:#2dd4a0; --amber:#f5c04a;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--bg); color:var(--tekst);
  font:15px/1.55 "Segoe UI",system-ui,sans-serif; min-height:100vh; }
a{ color:var(--rood2); text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* kop */
.topbar{ display:flex; align-items:center; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--line); }
.logo{ display:flex; align-items:baseline; gap:8px; font-weight:800;
  font-size:20px; letter-spacing:.3px; }
.logo .race{ color:var(--tekst); } .logo .assistant{ color:var(--rood2); }
.logo .ver{ color:var(--muted); font-size:11px; font-weight:400; }
.topbar .spacer{ flex:1; }
.topbar .muted{ color:var(--muted); font-size:13px; }

/* landing */
.hero{ padding:70px 0 40px; text-align:center; }
.hero h1{ font-size:42px; line-height:1.15; font-weight:800; }
.hero h1 em{ color:var(--rood2); font-style:normal; }
.hero p{ color:var(--muted); font-size:18px; max-width:640px; margin:18px auto 0; }
.hero .cta{ display:inline-block; margin-top:28px; background:var(--rood);
  color:#fff; padding:12px 26px; border-radius:8px; font-weight:700; }
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; padding:30px 0 60px; }
.feat{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:22px; }
.feat h3{ font-size:16px; margin-bottom:8px; }
.feat p{ color:var(--muted); font-size:14px; }
.foot{ border-top:1px solid var(--line); padding:18px 0 30px; color:var(--muted);
  font-size:13px; display:flex; gap:18px; flex-wrap:wrap; }

/* kaarten / formulieren */
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin:18px 0; }
.card h2{ font-size:15px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin-bottom:14px; }
input,select,button{ font:inherit; color:var(--tekst); background:var(--bg2);
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; }
button{ cursor:pointer; }
button.primair{ background:var(--rood); border-color:var(--rood); color:#fff;
  font-weight:700; }
button.klein{ padding:5px 10px; font-size:13px; }
.rij{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.login{ max-width:380px; margin:12vh auto; text-align:center; }
.login input{ width:100%; margin:10px 0; }
.fout{ color:var(--rood2); font-size:14px; margin-top:8px; }
.muted{ color:var(--muted); } .small{ font-size:13px; }
.ok{ color:var(--groen); } .warn{ color:var(--amber); } .bad{ color:var(--rood2); }

/* live tabel (generiek: kolommen komen uit de feed) */
table.stand{ width:100%; border-collapse:collapse; font-size:14px; }
table.stand th{ text-align:left; color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.6px; padding:7px 8px;
  border-bottom:1px solid var(--line); }
table.stand td{ padding:7px 8px; border-bottom:1px solid var(--line); }
table.stand tr.mijn td{ background:#1d2410; }
table.stand td.tijd{ font-variant-numeric:tabular-nums; }
.kartchip{ display:inline-block; min-width:30px; text-align:center;
  font-weight:800; border-bottom:3px solid #888; padding:1px 6px;
  border-radius:4px; background:var(--bg2); }
.status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#555; }
.status-dot.sr{ background:var(--groen); } .status-dot.in{ background:#3b82f6; }

/* team-scherm */
.t-kop{ position:sticky; top:0; background:var(--bg); z-index:5;
  border-bottom:1px solid var(--line); padding:12px 0; }
.t-kop .rij{ justify-content:space-between; }
.t-klok{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.t-kaart{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; }
.t-item{ background:var(--bg2); border-radius:10px; padding:12px; text-align:center; }
.t-item .groot{ font-size:24px; font-weight:800; }
.t-item .lab{ color:var(--muted); font-size:11px; text-transform:uppercase; }
.lapslijst{ display:flex; flex-wrap:wrap; gap:6px; }
.lap{ background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  padding:3px 9px; font-size:13px; font-variant-numeric:tabular-nums; }
.lap.best{ border-color:var(--groen); color:var(--groen); }
.badge{ display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:700; }
.badge.live{ background:#3a0d0b; color:var(--rood2); }
.badge.uit{ background:var(--bg2); color:var(--muted); }
@media(max-width:640px){ .hero h1{ font-size:30px; } .wrap{ padding:0 12px; } }