/* pitlane.gr / 1821REVO — dark HUD */
:root{
  --bg:#0a0b0d; --bg-2:#0d0f12; --panel:#0f1115; --hover:#15181d;
  --line:#1f232a; --line-2:#2c323b; --row:#1a1d23;
  --text:#e6e8eb; --text-2:#aab0b8; --muted:#8b919a; --dim:#6b717a; --faint:#4a5058;
  --lime:#c4ff00; --lime-dark:#121a03; --purple:#c48bff; --purple-bg:#3b1d63; --orange:#ff8a1f; --amber:#ffb020;
  --hy:#ff3b3b; --p2:#3d8bff; --p3:#b46bff; --gt3:#ff8a1f; --gte:#2fd27a;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;-webkit-font-smoothing:antialiased}
a{color:var(--lime)} a:hover{color:#e2ff80}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--bg-2)}
.top-in{max-width:1360px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-mark{width:28px;height:28px;background:var(--lime);display:flex;align-items:center;justify-content:center}
.brand-name{font-family:var(--cond);font-weight:800;font-size:20px;letter-spacing:.06em}
.brand-name b{color:var(--lime);font-weight:800}
.brand-name small{color:var(--dim);font-weight:600;font-size:14px;letter-spacing:.12em}
.site-nav{display:flex;flex-wrap:wrap;gap:4px;font-size:12px;letter-spacing:.1em}
.site-nav a{color:var(--muted);text-decoration:none;padding:10px 12px}
.site-nav a.on{color:var(--bg);background:var(--lime);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line-2);color:var(--text);padding:10px 14px;font-size:12px;letter-spacing:.08em;min-height:44px;text-decoration:none}
.btn:hover{border-color:var(--lime);color:var(--text)}
.btn-lime{border-color:var(--lime);color:var(--lime);font-weight:700}
.me-avatar{width:22px;height:22px;object-fit:cover;background:var(--line)}

main{max-width:1360px;margin:0 auto;padding:24px 24px 48px;display:flex;flex-direction:column;gap:24px}
.views{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;font-weight:700}
.views a{color:var(--dim);text-decoration:none;padding:12px 18px;border-bottom:2px solid transparent}
.views a.on{color:var(--text);border-bottom-color:var(--lime)}

.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.hero-text{display:flex;flex-direction:column;gap:8px;max-width:760px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:11px;letter-spacing:.2em}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--lime)}
h1{margin:0;font-family:var(--cond);font-weight:800;font-size:64px;line-height:.95;letter-spacing:.02em}
.lead{margin:0;color:var(--muted);line-height:1.6}
.label{color:var(--dim);font-size:11px;letter-spacing:.2em}

/* track chips */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.chip{text-align:left;padding:10px 12px;min-height:52px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.chip b{display:block;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.04em}
.chip span{display:block;font-size:10px;letter-spacing:.08em;opacity:.7}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:8px 14px;min-height:40px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em}
.pill.on{background:var(--lime);border-color:var(--lime);color:var(--bg)}

/* track strip */
.strip{border:1px solid var(--line);background:var(--panel);display:flex;flex-wrap:wrap}
.strip-name{flex:2 1 360px;padding:24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.strip-name .big{font-family:var(--cond);font-weight:800;font-size:44px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.strip-stats{flex:3 1 480px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{padding:20px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:0}
.stat .k{color:var(--dim);font-size:10px;letter-spacing:.2em}
.stat .v{font-size:22px;font-weight:700}
.stat .s{color:var(--muted);font-size:11px}

/* class tabs + toolbar */
.bar{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
.tabs{display:flex;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:8px;padding:14px 18px;min-height:48px;background:transparent;color:var(--dim);border:0;border-bottom:2px solid transparent;font-size:12px;font-weight:700;letter-spacing:.14em}
.tab.on{background:var(--panel);color:var(--text)}
.tab:disabled{opacity:.35;cursor:default}
.tab i{width:8px;height:8px;display:inline-block}
.search{display:flex;align-items:center;gap:8px;padding:0 0 8px;color:var(--dim);font-size:11px;letter-spacing:.15em}
.search input,.field{background:var(--panel);border:1px solid var(--line-2);color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 12px;min-height:40px;outline:none}
.search input{width:220px}
.search input::placeholder,.field::placeholder{color:var(--dim)}

/* data grids */
.scroll{overflow-x:auto;border:1px solid var(--line);border-top:0;background:var(--bg-2)}
.grid{min-width:100%;font-variant-numeric:tabular-nums}
.gr{display:grid;align-items:center}
.gh{color:var(--dim);font-size:10px;letter-spacing:.16em}
.gh>div{padding:12px 16px}
.gb{border-top:1px solid var(--row)}
.gb:hover{background:var(--hover)}
.gb>div{padding:12px 16px}
.r{text-align:right}
.c{text-align:center}
.empty{padding:40px;text-align:center;color:var(--dim)}
.me-row{background:#10160a}
.me-row:hover{background:#151d0c}

.pos{padding:3px 7px;color:var(--dim)}
.pos.p1{background:var(--lime);color:var(--bg);font-weight:700}
.pos.p3{border:1px solid var(--lime);color:var(--lime);font-weight:700;padding:2px 6px}
.drv{display:flex;align-items:center;gap:10px;min-width:0}
.ava{width:28px;height:28px;flex:none;background:var(--line);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;object-fit:cover}
.drv-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick{flex:none}
.car{color:var(--text-2);font-family:var(--cond);font-size:16px;font-weight:600;letter-spacing:.02em}
.sec{color:var(--text-2)}
.sec.pb{color:#e9d5ff;background:var(--purple-bg);font-weight:700}
.lap{font-weight:700;font-size:15px}
.lap.rec{color:var(--lime)}
.gap{color:var(--muted)}
.when{color:var(--dim);font-size:11px;white-space:nowrap}
.badges{display:flex;flex-wrap:wrap;gap:4px;font-size:10px;letter-spacing:.08em}
.bdg{border:1px solid var(--line-2);color:var(--text-2);padding:3px 6px}
.bdg.dry{border:0;background:#1d2a05;color:var(--lime)}
.bdg.damp{border:0;background:#2a2105;color:#ffc94d}
.bdg.wet{border:0;background:#071f33;color:#6ab8ff}

.legend{display:flex;flex-wrap:wrap;gap:20px;color:var(--dim);font-size:11px;letter-spacing:.06em}
.legend span{display:flex;align-items:center;gap:8px}
.sw{width:10px;height:10px;display:inline-block}

/* tiers */
.tier-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-size:10px;letter-spacing:.12em;min-width:320px}
.tier-key div{padding:6px 8px;color:var(--bg)}
.tier-key b{display:block}
.tbadge{display:inline-block;color:var(--bg);padding:2px 6px;font-size:10px;font-weight:700;letter-spacing:.08em}
.checker{border:1px solid var(--line);background:var(--panel);padding:20px 24px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.checker label{display:flex;flex-direction:column;gap:6px;color:var(--dim);font-size:10px;letter-spacing:.15em}
.checker select.field{min-height:44px;min-width:260px;background:var(--bg)}
.checker input.field{min-height:44px;width:150px;font-size:15px;background:var(--bg)}
.meter{position:relative;height:10px;display:flex;gap:2px}
.meter span{height:10px}
.meter .mark{position:absolute;top:-4px;width:3px;height:18px;background:#fff}
.you-col{background:#0e1404}
.prov{color:var(--amber);font-size:10px;letter-spacing:.1em}

/* car index */
.sticky{position:sticky;left:0;z-index:1;background:var(--bg-2);border-right:1px solid var(--line)}
.ci-cell{display:flex;align-items:center;justify-content:center;padding:10px 6px !important}
.ci-best{background:var(--lime);color:var(--bg);font-weight:700}

.foot{border-top:1px solid var(--line);color:var(--dim);font-size:11px}
.foot-in{max-width:1360px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

@media (max-width:640px){
  h1{font-size:48px}
  .strip-name .big{font-size:34px}
  .search input{width:160px}
  .tier-key{min-width:0;width:100%}
}