:root{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8;
  --line:#1e293b; --brand:#60a5fa; --ok:#22c55e; --danger:#ef4444;
}

/* základ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Arial}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
h1,h2,h3{margin:0 0 6px}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.badge{background:#1f2937;color:#cbd5e1;border:1px solid #334155;border-radius:999px;padding:2px 8px;font-size:12px}

/* header + toolbar */
.header{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}
.title{display:flex;align-items:center;gap:10px}
.toolbar{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.home-btn,.btn,.btn-ghost,.btn-primary,.btn-ok{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  border:1px solid #334155;background:#0b1220;color:var(--text);text-decoration:none;cursor:pointer
}
.btn-ghost:hover,.home-btn:hover{border-color:var(--brand)}
.btn-primary{background:linear-gradient(180deg,#1d4ed8,#1e40af);border-color:#1e40af}
.btn-ok{background:linear-gradient(180deg,#16a34a,#15803d);border-color:#15803d}

/* pily / badge info */
.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid #334155;border-radius:999px}

/* karty, tabulka */
.card{border:1px solid var(--line);border-radius:14px;background:var(--card);margin:10px 0}
.inner{padding:12px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
th,td{padding:10px;border-bottom:1px solid #1e293b;vertical-align:top}
th{color:#cbd5e1;text-align:left}
td .link{background:none;border:none;color:#93c5fd;cursor:pointer}
td .link.danger{color:#fda4af}


/* tabs (výběr auta) */
.tabs{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tab{padding:6px 10px;border-radius:999px;border:1px solid #334155;background:#0b1220;color:#cbd5e1;cursor:pointer}
.tab.active{background:#1f2937;color:#fff;border-color:#475569}

/* hlavička auta */
.car-head{
  display:grid;grid-template-columns:160px 1fr auto;gap:14px;align-items:center;padding:12px
}
.car-head img{
  width:100%;height:120px;object-fit:cover;border-radius:12px;border:1px solid #334155;background:#0b1220
}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.car-actions{display:flex;align-items:center;gap:8px}

/* graf (SVG responsivně) */
.chart svg{width:100%;height:auto;display:block}
.chart-legend{margin-top:8px;display:flex;flex-direction:column;gap:6px;color:#9aa3b2;font-size:13px}
.chart-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* modály */
.modal{position:fixed;inset:0;z-index:40}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-dialog{position:relative;z-index:41;background:var(--card);border:1px solid #334155;border-radius:12px;max-width:720px;margin:10vh auto;padding:12px}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e293b;padding-bottom:8px}
.modal-body{padding:12px 0}
.modal-actions{display:flex;align-items:center;gap:8px;border-top:1px solid #1e293b;padding-top:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid3__span-2{grid-column:span 2}
.grid3 input,.grid3 select{width:100%}

/* poznámka pod stránkou */
.footer-note{color:#94a3b8;margin:14px 4px}

/* responsivita */
@media (max-width:800px){
  .car-head{grid-template-columns:1fr}
  .car-head img{height:180px}
  table{min-width:640px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr 1fr}
}