:root{
  --bg:#f8fafc; --panel:#ffffff; --panel2:#f1f5f9; --line:#e2e8f0; --ink:#1e293b; --muted:#64748b;
  --good:#10b981; --accent:#3b82f6;
}
*{box-sizing:border-box}
html, body{height:100%}
body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--ink)}
strong{color:var(--ink) !important; font-weight:700 !important}
.wrap{max-width:1100px; margin:20px auto; padding:0 16px}

h1{font-size:22px; margin:0 0 12px}
.grid{display:grid; grid-template-columns: 1fr; gap:14px; align-items:start}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px}
.legend{font-weight:700; color:var(--muted); margin-bottom:8px}

/* Controls layout */
.grid-controls .controls{display:grid; grid-template-columns: 1fr; gap:14px}
.grid-controls .controls > .panel{margin:0}
.grid-controls .btns{display:flex; gap:8px; justify-content:center}

/* Car form improvements */
.car-row{display:grid; grid-template-columns: 1fr; gap:8px; padding:8px 12px; border-radius:12px; background:var(--panel2); border:1px solid var(--line); margin-bottom:8px}
.car-row-main{display:grid; grid-template-columns: 30px 1fr auto; gap:8px; align-items:end;}
.car-name-field{display:flex; flex-direction:column; gap:4px;}
.car-name-field label{font-size:11px; color:var(--muted); font-weight:500; margin-bottom:2px;}
.car-name-field input[type="text"]{width:98%; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:#ffffff; color:var(--ink); font-size:13px;}
.car-specs{display:flex; gap:12px;}
.car-specs > div{display:flex; flex-direction:column; gap:4px;}
.car-specs label{font-size:11px; color:var(--muted); font-weight:500; margin-bottom:2px;}
.car-specs label.modified-up{color:#f59e0b; font-weight:600;}
.car-specs label.modified-down{color:#ef4444; font-weight:600;}
.car-specs input[type="number"]{width:80px; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:#ffffff; color:var(--ink); font-size:13px;}
.car-row-hidden{display:none;}
.name-input{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#ffffff; color:var(--ink); font-size:14px;}
.car-row input[type="checkbox"]{justify-self:center;}

.controls{display:grid; grid-template-columns: 1fr; gap:10px}
.btns{display:flex; gap:8px}
button{background:#3b82f6; color:#ffffff; border:1px solid var(--accent); padding:8px 12px; border-radius:10px; cursor:pointer}
button:hover:not(:disabled){background:#2563eb}
button:disabled{background:#cbd5e1; color:#94a3b8; border:1px solid #cbd5e1; cursor:not-allowed; opacity:0.6}
.full { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #ffffff; color: var(--ink); }

/* Track */
.track{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; min-height:200px}
.track .lane{position:relative; padding:10px 8px 18px; border:1px dashed #cbd5e1; border-radius:10px; margin-bottom:10px; background:rgba(0,0,0,0.02); overflow:visible}
.track .lane:last-child{margin-bottom:0}
.track .lane .label{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.dot{display:inline-block; width:12px; height:12px; border-radius:999px}
.meta .name{font-weight:700}
.meta .spec{color:var(--muted); font-size:12px; margin-left:6px}
.track .strip{position:relative; height:48px; background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(59,130,246,.02)); border-radius:8px; overflow:visible; padding-top:18px}
.track .start-line, .track .finish-line{position:absolute; top:0; bottom:0; width:2px; background:#3b82f6}
.track .start-line{left:0}
.track .finish-line{right:0}
.car{position:absolute; top:18px; left:0; width:40px; height:24px; overflow:visible}
.car .icon{font-size:24px;}
.car .chip{position:absolute; left:0; top:-28px; transform:translateX(calc(-50% + 20px)); padding:4px 8px; border:1px solid var(--accent); border-radius:999px; background:rgba(96,165,250,.12); color:var(--ink); font-size:12px; z-index:2; white-space:nowrap}

/* Responsive adjustments */
@media (max-width: 768px) {
  .car-row-main{grid-template-columns: 30px 1fr; gap:6px;}
  .car-specs{display:none;} /* Hide HP/Torque on mobile to save space */
  .car-row input, .car-row select{padding:6px 8px; font-size:13px}
  .wrap{padding:0 12px}
  #score{grid-template-columns: 1fr; gap:6px}
}

/* Moments table */
table.moments{width:100%; border-collapse:collapse; margin-top:8px}
table.moments thead th{text-align:left; font-weight:700; color:var(--muted); padding:10px; border-bottom:1px solid #e2e8f0}
table.moments td{padding:10px; border-top:1px solid #f1f5f9}
table.moments td.num, table.moments th.num{text-align:right; white-space:nowrap}

/* Flash effect for milestone reveal */
@keyframes flashPop{0%{background:rgba(59,130,246,.15); box-shadow:0 0 0 2px rgba(59,130,246,.25) inset; transform:scale(1.015)} 100%{background:transparent; box-shadow:none; transform:none}}
td.flash{animation:flashPop 650ms ease-out; border-radius:6px}

/* Score */
#score{display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap:8px 16px; align-items:center; margin-bottom:10px}
#score > div:nth-child(1), #score > div:nth-child(2) { grid-row: 1; }
#score > div:nth-child(3) { grid-row: 2; grid-column: 1 / -1; }
.notice{color:var(--muted); font-size:12px}

/* Autocomplete styling */
.ui-autocomplete {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  z-index: 1000 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

.ui-autocomplete .ui-menu-item {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.ui-autocomplete .ui-menu-item a {
  display: block !important;
  padding: 8px 12px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  font-size: 14px !important;
}

.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item.ui-state-focus a {
  background: var(--accent) !important;
  color: white !important;
}

.ui-autocomplete-category {
  background: var(--panel2) !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .car-specs { display: none; }
  .car-row-main { grid-template-columns: 30px 1fr; }
  .car-name-field input[type="text"] { width: 100%; }
}