:root{
  --bg:#06101f;
  --bg2:#09162b;
  --panel:rgba(12,24,47,.82);
  --panel2:rgba(17,32,61,.88);
  --line:rgba(142,176,255,.17);
  --text:#edf4ff;
  --muted:#9fb0d0;
  --blue:#36a3ff;
  --cyan:#22d3ee;
  --violet:#a855f7;
  --orange:#fb923c;
  --yellow:#facc15;
  --red:#fb7185;
  --green:#4ade80;
  --shadow:rgba(0,0,0,.42);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 25% 0%,rgba(54,163,255,.24),transparent 32%),
    radial-gradient(circle at 85% 20%,rgba(168,85,247,.18),transparent 30%),
    linear-gradient(180deg,#030814,#071123 45%,#030814);
  overflow-x:hidden;
}

button,input,select{font:inherit}
button{cursor:pointer}

.app-shell{display:grid;grid-template-columns:86px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  background:rgba(4,10,24,.76);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:14px 10px;
  backdrop-filter:blur(16px);
  z-index:5;
}
.logo{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  font-size:25px;
  background:linear-gradient(135deg,#0751d9,#0ea5e9);
  box-shadow:0 0 28px rgba(54,163,255,.55), inset 0 0 20px rgba(255,255,255,.18);
}
nav{display:flex;flex-direction:column;gap:8px;width:100%}
.nav-btn,.export{
  width:100%;
  min-height:58px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:.18s ease;
}
.nav-btn span,.export span{font-size:11px}
.nav-btn:hover,.nav-btn.active,.export:hover{
  color:#fff;border-color:rgba(54,163,255,.35);
  background:rgba(54,163,255,.10);
  box-shadow:0 0 24px rgba(54,163,255,.15);
}
.export{margin-top:auto;border-color:var(--line)}

main{padding:18px;display:grid;gap:14px;min-width:0}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:0 4px 2px;
}
h1{margin:0;font-size:clamp(24px,3vw,38px);letter-spacing:-.04em}
h1 span{color:var(--blue)}
.topbar p{margin:4px 0 0;color:var(--muted)}
.top-status{display:flex;gap:14px;color:var(--muted);white-space:nowrap;font-size:14px;padding-top:8px}

.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(18,32,62,.88),rgba(8,18,36,.82));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 60px var(--shadow);
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 36%);
  pointer-events:none;
}
.panel-title{
  position:absolute;top:10px;left:12px;right:12px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;
  pointer-events:none;
}
.panel-title small{color:var(--muted);font-weight:600;text-transform:none}
.panel-title.slim{position:static;padding:12px 12px 0}
.blue-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 16px var(--blue);margin-right:7px}
.muted{color:var(--muted)}
.btn{
  border:0;border-radius:13px;padding:10px 12px;
  background:#1769e8;color:#fff;font-weight:800;
  box-shadow:0 10px 24px rgba(23,105,232,.25)
}
.btn.secondary{background:#334155;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none}
.button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.settings-grid{
  display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:0;padding:0;
}
.setting-block{padding:16px;border-right:1px solid var(--line)}
.setting-block:last-child{border-right:0}
.setting-block h2{margin:0 0 6px;font-size:17px}
.setting-block p{margin:0 0 12px;font-size:13px;line-height:1.35}
.filebox{
  display:grid;place-items:center;
  min-height:74px;
  border:1px dashed rgba(54,163,255,.45);
  border-radius:15px;
  color:#dbeafe;
  background:rgba(54,163,255,.08);
  text-align:center;
}
.filebox input{display:none}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
label{display:grid;gap:6px;color:var(--muted);font-size:12px}
input,select{
  width:100%;
  color:var(--text);
  background:rgba(3,10,25,.78);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 10px;
  outline:none;
}
input[type=range]{padding:0}

.dashboard{
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(330px,.95fr);
  gap:14px;
}
.hero{aspect-ratio:16/9;min-height:520px}
.side-panels{display:grid;grid-template-rows:.82fr 1.18fr;gap:14px}
.pov{min-height:220px}
.map-panel{min-height:310px}
canvas{display:block;width:100%;height:100%}
#carCanvas,#povCanvas,#mapCanvas{position:absolute;inset:0}
#streetMap{
  position:absolute;
  inset:0;
  z-index:1;
  background:#071123;
}
#mapCanvas{z-index:0}
.map-panel.leaflet-ready #mapCanvas{
  opacity:0;
  pointer-events:none;
}
.map-panel .leaflet-container{
  width:100%;
  height:100%;
  background:#071123;
  font:12px/1.2 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.map-panel .leaflet-control-attribution{
  background:rgba(5,13,30,.68);
  color:#dbeafe;
  border-radius:8px 0 0 0;
}
.map-panel .leaflet-control-attribution a{color:#93c5fd}
.map-panel .leaflet-control-zoom{
  margin-top:46px;
  border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.25);
}
.map-panel .leaflet-control-zoom a{
  background:rgba(5,13,30,.86);
  color:#edf4ff;
  border-bottom-color:var(--line);
}
.map-panel .leaflet-control-zoom a:hover{background:rgba(54,163,255,.18)}
.car-map-marker{
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 5px rgba(34,211,238,.24),0 0 22px rgba(34,211,238,.85);
}

.floating{
  position:absolute;z-index:3;
  border:1px solid var(--line);
  background:rgba(5,13,30,.68);
  backdrop-filter:blur(14px);
  border-radius:15px;
  box-shadow:0 12px 34px rgba(0,0,0,.3);
}
.attitude{left:16px;top:54px;width:165px;padding:12px;display:grid;gap:10px}
.attitude div,.info-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.attitude span,.info-row span{color:var(--muted);font-size:13px}
.attitude strong:nth-child(n),.info-row b{color:var(--cyan)}
.current-info{left:16px;bottom:16px;width:min(280px,45%);padding:12px}
.current-info h3{margin:0 0 10px;text-transform:uppercase;font-size:12px;color:#cfe1ff}
.info-row{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.info-row:last-child{border-bottom:0}
.defect-card{
  right:20px;bottom:18px;width:min(390px,48%);
  padding:14px;
}
.defect-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase}
.defect-card>strong{
  display:inline-block;margin:4px 0 10px;padding:4px 9px;border-radius:999px;
  background:rgba(250,204,21,.18);color:var(--yellow);
}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-grid small{display:block;color:var(--muted)}
.mini-grid b{font-size:16px}

.speed-card{
  position:absolute;right:16px;top:48px;
  width:118px;height:118px;border-radius:18px;
  border:1px solid rgba(54,163,255,.3);
  background:radial-gradient(circle at top right,rgba(54,163,255,.22),rgba(5,13,30,.84));
  display:grid;place-items:center;z-index:3;
  text-transform:uppercase;
}
.speed-card span{font-size:11px;color:var(--muted);align-self:end}
.speed-card strong{font-size:42px;line-height:.8}
.speed-card small{color:var(--muted);align-self:start}

.map-legend{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:flex;gap:9px;flex-wrap:wrap;
  background:rgba(5,13,30,.64);border:1px solid var(--line);
  border-radius:14px;padding:8px 10px;font-size:12px;color:#dbeafe
}
.line{display:inline-block;width:28px;height:3px;border-radius:99px;vertical-align:middle;margin-right:4px}
.line.blue{background:var(--blue)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.dot.red{background:var(--red)}.dot.orange{background:var(--orange)}.dot.yellow{background:var(--yellow)}.dot.purple{background:var(--violet)}

.mid-row{display:grid;grid-template-columns:.86fr 1.14fr;gap:14px}
.stats{
  padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.stats div{border-right:1px solid var(--line);padding-right:12px}
.stats div:last-child{border-right:0}
.stats span{display:block;color:var(--muted);font-size:12px}
.stats strong{display:block;margin-top:6px;font-size:18px}
.chips{padding-bottom:10px}
.chip-wrap{display:flex;gap:8px;overflow:auto;padding:12px}
.chip{
  white-space:nowrap;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.055);color:#fff;padding:8px 10px;font-size:12px;font-weight:800;
}
.chip.trou{background:rgba(251,113,133,.22)}
.chip.bosse{background:rgba(251,146,60,.22)}
.chip.cassis{background:rgba(250,204,21,.18)}
.chip.rugueux{background:rgba(168,85,247,.22)}

.timeline-panel{height:300px;padding:52px 16px 16px}
.timeline-controls{
  position:absolute;left:16px;right:16px;top:12px;
  display:grid;grid-template-columns:44px 54px 44px 1fr 90px;gap:10px;align-items:center;z-index:3;
}
.round{
  border:1px solid var(--line);background:rgba(8,18,36,.7);color:#fff;border-radius:50%;height:42px;font-weight:900
}
.round.play{height:54px;background:#1269ee;box-shadow:0 0 28px rgba(54,163,255,.45)}
#timeLabel{color:#dbeafe;font-weight:800;text-align:right}

.events-table-panel{padding:52px 0 0}
.table-wrap{max-height:360px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
th{color:#cfe1ff;background:rgba(255,255,255,.045);position:sticky;top:0}
td{color:#edf4ff}
td small{color:var(--muted)}
.type-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:900}
.type-badge.trou{background:rgba(251,113,133,.22);color:#fecdd3}
.type-badge.bosse{background:rgba(251,146,60,.22);color:#fed7aa}
.type-badge.cassis{background:rgba(250,204,21,.18);color:#fde68a}
.type-badge.rugueux{background:rgba(168,85,247,.22);color:#e9d5ff}
.type-badge.autre{background:rgba(54,163,255,.16);color:#bfdbfe}

.footer{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;padding:6px 2px 20px}

@media(max-width:1180px){
  .dashboard{grid-template-columns:1fr}
  .side-panels{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .pov,.map-panel{height:300px}
  .settings-grid{grid-template-columns:1fr}
  .setting-block{border-right:0;border-bottom:1px solid var(--line)}
  .mid-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;overflow:auto}
  nav{flex-direction:row}
  .nav-btn,.export{min-width:74px}
  .topbar,.top-status{display:block}
  .hero{min-height:460px}
  .side-panels{grid-template-columns:1fr}
  .field-grid,.stats{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:8px}
  .timeline-controls{grid-template-columns:38px 48px 38px 1fr;gap:6px}
  #timeLabel{grid-column:1/-1;text-align:left}
  .current-info,.defect-card{position:static;width:auto;margin:10px}
}