/* ===== Performance Lap Map (WOW) ===== */
:root{
  --bg:#0a0d10;
  --card:#0f1419;
  --line:#1b2330;
  --accent:#ff2d2d;      /* pit red */
  --accent2:#ff8a00;     /* warm hybrid */
  --text:#e6eef1;
  --muted:#98a6b3;
  --green:#27ef85;
  --blue:#65b7ff;
  --border:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(255,45,45,.12), transparent 50%),
    radial-gradient(800px 400px at -10% 10%, rgba(39,239,133,.10), transparent 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect fill="%23080b0e" width="24" height="24"/><path stroke="%230e1216" stroke-width="1" d="M0 12h24M12 0v24"/></svg>') repeat,
    var(--bg);
  font-family: Rajdhani, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.2px;
}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* Header */
.pit-header{position:sticky; top:0; z-index:50; background:rgba(8,11,14,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.pit-bar{height:4px; background:linear-gradient(90deg,var(--accent),var(--accent2),var(--green)); box-shadow:0 0 16px rgba(255,45,45,.35)}
.pit-inner{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.logo{width:42px; height:42px; border-radius:10px; box-shadow:0 0 20px rgba(255,45,45,.35)}
.brand-txt strong{display:block; font-weight:700; font-size:18px}
.brand-txt span{display:block; font-size:12px; color:var(--muted); margin-top:-2px}
.nav ul{display:flex; gap:18px; padding:0; margin:0; list-style:none}
.nav a{color:var(--text); text-decoration:none; font-weight:700; position:relative}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform:scaleX(0); transition:.25s}
.nav a:hover::after{transform:scaleX(1)}

/* Hero */
.hero{padding:42px 0 10px; position:relative}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.04) 48px 49px);
  opacity:.25;
}
.hero-inner{text-align:center}
.lap-badge{display:inline-block; font-family:"Share Tech Mono", monospace; font-size:12px; letter-spacing:.6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:#dbe6ea; background:#0b0f14}
.hero h1{font-size:clamp(28px,4.2vw,54px); line-height:1.05; margin:.5em 0 .2em}
.strip{height:6px; width:220px; margin:14px auto 0; background:
  repeating-linear-gradient(90deg, var(--accent) 0 24px, transparent 24px 32px), var(--accent);
  box-shadow:0 0 20px rgba(255,45,45,.45); border-radius:4px}

/* Layout */
.layout{display:grid; gap:20px; grid-template-columns: 1.35fr .65fr; margin:20px 0 40px}
@media (max-width: 1080px){ .layout{grid-template-columns:1fr} }

.hud-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--card);
  border:1px solid var(--border); border-radius:16px; padding:16px; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hud-card::before{
  content:""; position:absolute; inset:0; background:
  linear-gradient(transparent 96%, rgba(255,45,45,.35) 96%),
  repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.06) 47px 48px);
  opacity:.08; pointer-events:none;
}

/* Viewer */
.viewer{min-height:520px}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.btn{display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:800; border:1px solid var(--line); cursor:pointer}
.btn-ghost{background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-red{background:linear-gradient(180deg, rgba(255,45,45,.18), rgba(255,45,45,.10)); border-color:rgba(255,45,45,.5); box-shadow:0 0 20px rgba(255,45,45,.25)}
.btn-red:hover{background:rgba(255,45,45,.25)}

.stage{position:relative; height:62vh; min-height:420px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0b0f14}
.stage img{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; pointer-events:none; user-select:none}

#markers{position:absolute; top:0; left:0; transform-origin:0 0}
.marker{
  position:absolute; transform:translate(-50%, -50%);
  width:14px; height:14px; border-radius:999px; border:2px solid #fff3;
  box-shadow:0 0 10px rgba(255,255,255,.25), 0 0 20px currentColor;
  cursor:pointer; background:#fff2;
}
.dot-red{color:#ff8080; background:rgba(255,45,45,.25); border-color:rgba(255,45,45,.55)}
.dot-green{color:#7affc0; background:rgba(39,239,133,.25); border-color:rgba(39,239,133,.55)}
.dot-blue{color:#89c8ff; background:rgba(101,183,255,.25); border-color:rgba(101,183,255,.55)}

.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px);
  mix-blend-mode:overlay; opacity:.35;
}

.minimap{
  position:absolute; right:12px; bottom:12px; width:170px; height:110px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0b0f14;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.minimap img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02)}
.mini-viewport{
  position:absolute; top:0; left:0; width:40px; height:28px; border:2px solid var(--accent);
  box-shadow:0 0 10px rgba(255,45,45,.55), inset 0 0 8px rgba(255,45,45,.35);
  pointer-events:none; border-radius:6px;
}

.help{
  position:absolute; left:12px; bottom:12px; font-size:12px; color:#cbd7df;
  background:rgba(0,0,0,.45); border:1px solid var(--line); border-radius:8px; padding:6px 8px;
}

/* Sidebar */
.sidebar{display:grid; gap:20px}
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
}
.panel-lines{background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px),
  var(--card);}
.filter input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0b0f14; color:var(--text); outline:none; margin:8px 0 4px;
}
.list{list-style:none; margin:0; padding:0}
.list li{
  display:grid; grid-template-columns:1fr; gap:2px; padding:10px 10px; cursor:pointer;
  border-bottom:1px dashed var(--line);
}
.list li:last-child{border-bottom:0}
.list li b{font-weight:800}
.list li span{color:var(--muted)}
.list li:hover{background:rgba(255,255,255,.03)}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.gallery img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:transform .15s ease;
}
.gallery img:hover{transform:translateY(-2px)}

/* Legend */
.legend{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:8px; vertical-align:middle}
.dot-red{background:#ff5a5a}
.dot-green{background:#31ea98}
.dot-blue{background:#65b7ff}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.2s;
}
.lightbox[aria-hidden="false"]{opacity:1; pointer-events:auto}
.lightbox img{max-width:min(92vw,1400px); max-height:80vh; border-radius:12px; border:1px solid var(--border)}
.lightbox-close{
  position:absolute; top:20px; right:24px; font-size:28px; background:#0b0f14; border:1px solid var(--line);
  color:#fff; border-radius:999px; width:40px; height:40px; cursor:pointer;
}
.lightbox-caption{margin-top:10px; color:#cbd7df; text-align:center}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:rgba(0,0,0,.35); padding:20px 0; margin-top:26px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:10px}
.footer-nav a{color:var(--muted); text-decoration:none; margin-left:14px}
.footer-nav a:hover{color:var(--accent)}