:root{
    color-scheme: dark;
    --bg:#0d0d0d; --surface:#1a1a19; --surface-2:#222221; --inset:#141413;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
    --blue:#3987e5; --blue-soft:rgba(57,135,229,.16);
    --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
    --radius:14px;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px; line-height:1.5;
    background-image:radial-gradient(1200px 500px at 50% -220px, rgba(57,135,229,.09), transparent 70%);
    min-height:100vh;
  }
  .wrap{max-width:1240px; margin:0 auto; padding:28px 20px 60px}

  /* ---------- header ---------- */
  header{display:flex; align-items:center; gap:14px; margin-bottom:6px}
  .logo{width:44px; height:44px; flex:none}
  h1{font-size:26px; font-weight:750; letter-spacing:-.02em}
  h1 span{color:var(--blue)}

  /* ---------- layout ---------- */
  .cols{display:grid; grid-template-columns:390px 1fr; gap:18px; align-items:start}
  @media (max-width:980px){ .cols{grid-template-columns:1fr} }
  .stack{display:flex; flex-direction:column; gap:18px}

  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 20px}
  .card h2{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:650; margin-bottom:14px; display:flex; align-items:center; gap:8px}
  .step-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--blue); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:0}

  /* ---------- controls ---------- */
  label{display:block; font-size:12px; color:var(--muted); margin:0 0 4px; font-weight:600}
  select,input[type=number]{
    width:100%; background:var(--inset); color:var(--ink);
    border:1px solid var(--axis); border-radius:9px; padding:9px 10px; font-size:14.5px;
    font-family:inherit; appearance:none; outline:none;
  }
  select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23898781' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px}
  select:focus,input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(57,135,229,.22)}
  select:disabled{opacity:.45; cursor:not-allowed}
  input[type=number]{font-variant-numeric:tabular-nums}
  .row{display:grid; gap:10px; margin-bottom:12px}
  .r2{grid-template-columns:1fr 1fr} .r3{grid-template-columns:1fr 1fr 1fr}
  .hint{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.35}

  .chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
  .chip{background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; transition:.15s}
  .chip:hover{border-color:var(--blue); color:var(--ink)}

  /* ---------- vehicle spec card ---------- */
  .spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px}
  .spec{background:var(--inset); border:1px solid var(--border); border-radius:10px; padding:8px 11px}
  .spec .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650}
  .spec .v{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:1px}
  .spec .v small{font-size:11px; color:var(--ink-2); font-weight:500}
  .gen-note{font-size:12px; color:var(--ink-2); background:var(--blue-soft); border:1px solid rgba(57,135,229,.3); border-radius:9px; padding:8px 11px; margin-top:10px; line-height:1.45}

  button{font-family:inherit; cursor:pointer}
  .btn{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); border-radius:9px; padding:8px 13px; font-size:13px; font-weight:600; transition:.15s}
  .btn:hover{border-color:var(--blue); color:var(--ink)}
  .btn-primary{background:var(--blue); border-color:var(--blue); color:#fff}
  .btn-primary:hover{filter:brightness(1.1); color:#fff}
  .btn-row{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap}

  /* ---------- verdict ---------- */
  .verdict{border-radius:var(--radius); padding:16px 18px; display:flex; gap:14px; align-items:center; border:1px solid}
  .verdict .icon{font-size:26px; line-height:1; flex:none}
  .verdict .t{font-size:17px; font-weight:750}
  .verdict .s{font-size:13px; opacity:.92; margin-top:2px}
  .v-good{background:rgba(12,163,12,.13); border-color:rgba(12,163,12,.45)}
  .v-good .t{color:var(--good)}
  .v-warn{background:rgba(250,178,25,.10); border-color:rgba(250,178,25,.4)}
  .v-warn .t{color:var(--warn)}
  .v-serious{background:rgba(236,131,90,.10); border-color:rgba(236,131,90,.45)}
  .v-serious .t{color:var(--serious)}
  .v-crit{background:rgba(208,59,59,.12); border-color:rgba(208,59,59,.5)}
  .v-crit .t{color:var(--crit)}
  .v-idle{background:var(--surface); border-color:var(--border)}
  .v-idle .t{color:var(--ink-2)}

  /* ---------- checks ---------- */
  .checks{display:flex; flex-direction:column; gap:2px}
  .check{display:grid; grid-template-columns:26px 1fr; gap:10px; padding:9px 8px; border-radius:9px; align-items:start}
  .check:hover{background:var(--surface-2)}
  .check .ic{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; margin-top:1px}
  .ic-good{background:rgba(12,163,12,.18); color:var(--good)}
  .ic-warn{background:rgba(250,178,25,.15); color:var(--warn)}
  .ic-serious{background:rgba(236,131,90,.16); color:var(--serious)}
  .ic-crit{background:rgba(208,59,59,.18); color:var(--crit)}
  .ic-info{background:rgba(137,135,129,.16); color:var(--ink-2)}
  .check .n{font-weight:650; font-size:13.5px}
  .check .d{font-size:12.5px; color:var(--ink-2); line-height:1.45}
  .check .d b{color:var(--ink); font-variant-numeric:tabular-nums}

  /* ---------- stat tiles ---------- */
  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px}
  .tile{background:var(--inset); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
  .tile .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650}
  .tile .v{font-size:19px; font-weight:750; font-variant-numeric:tabular-nums; margin-top:2px}
  .tile .v small{font-size:11.5px; font-weight:500; color:var(--ink-2)}
  .tile .sub{font-size:11px; color:var(--muted); margin-top:1px}

  /* ---------- viz ---------- */
  .viz-tabs{display:flex; gap:6px; margin-bottom:12px}
  .vtab{background:transparent; border:1px solid var(--border); color:var(--muted); padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:650}
  .vtab[aria-selected=true]{background:var(--blue-soft); border-color:var(--blue); color:var(--ink)}
  .viz-pane{background:var(--inset); border:1px solid var(--border); border-radius:12px; overflow:hidden}
  .viz-pane svg{display:block; width:100%; height:auto}
  .legend{display:flex; gap:18px; align-items:center; padding:10px 14px 12px; flex-wrap:wrap}
  .lg{display:flex; gap:7px; align-items:center; font-size:12px; color:var(--ink-2)}
  .sw{width:14px; height:14px; border-radius:4px; flex:none}
  .sw-new{background:var(--blue-soft); border:2px solid var(--blue)}
  .sw-stock{border:2px dashed var(--muted)}
  .sw-zone{border:2px solid var(--axis); background:var(--surface-2)}

  /* gauge */
  .gauge-wrap{padding:6px 14px 2px}
  .gauge-title{font-size:12px; color:var(--muted); font-weight:650; padding:12px 14px 0}

  footer{margin-top:34px; color:var(--muted); font-size:12px; line-height:1.6; border-top:1px solid var(--grid); padding-top:16px}
  footer b{color:var(--ink-2)}
  .empty{color:var(--muted); font-size:13.5px; padding:26px 10px; text-align:center; line-height:1.6}
  .empty .big{font-size:34px; display:block; margin-bottom:8px; opacity:.75}

  text{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}