:root{--bg:#081019;--bg2:#0d1623;--panel:#111c2c;--line:rgba(115,156,211,.24);--text:#e9f2ff;--muted:#9ab0c9;--cyan:#59d8ff;--teal:#63f7a0;--amber:#ffc857;--red:#ff6b6b;--shadow:0 18px 38px rgba(0,0,0,.35)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top center, rgba(89,216,255,.11), transparent 28%),linear-gradient(180deg,var(--bg),var(--bg2))}
body[data-theme="light"]{--bg:#e9f1f8;--bg2:#d9e5f0;--line:rgba(48,86,124,.20);--text:#112132;--muted:#5d738d;--cyan:#0c8fb5;--teal:#168a66;--amber:#b27700;--red:#c24545;background:radial-gradient(circle at top center, rgba(12,143,181,.09), transparent 28%),linear-gradient(180deg,var(--bg),var(--bg2))}
.shell{max-width:1380px;margin:0 auto;padding:18px}.topbar,.row{display:flex;gap:10px;align-items:center}.spread{justify-content:space-between}.center{text-align:center;justify-content:center}.wrap{flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}.brandLogo{width:44px;height:44px;object-fit:contain}
.hero,.twoCol,.threeCol,.grid2,.stats{display:grid;gap:16px}.hero{grid-template-columns:1.1fr .9fr}.twoCol{grid-template-columns:1.15fr .95fr}.threeCol{grid-template-columns:1fr 1fr 1fr}.grid2{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}
.card,.gaugeCard,.infocard,.fleetTile,.mediaReviewCard{background:linear-gradient(180deg, rgba(20,33,53,.96), rgba(11,20,33,.96));border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);position:relative}
body[data-theme="light"] .card,body[data-theme="light"] .gaugeCard,body[data-theme="light"] .infocard,body[data-theme="light"] .fleetTile,body[data-theme="light"] .mediaReviewCard,body[data-theme="light"] .drawer{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,245,250,.98))}
.inset{background:linear-gradient(180deg, rgba(8,16,25,.96), rgba(12,22,34,.96))}
body[data-theme="light"] .inset,body[data-theme="light"] input,body[data-theme="light"] select,body[data-theme="light"] textarea,body[data-theme="light"] .modeCard{background:linear-gradient(180deg, rgba(245,250,255,.98), rgba(232,241,248,.98))}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#1b2a40,#122136);color:var(--text);cursor:pointer}
body[data-theme="light"] .btn{background:linear-gradient(180deg,#f8fbff,#e8f1f8)}
.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--teal));color:#051119;border-color:rgba(255,255,255,.18);font-weight:700}
.hidden{display:none!important}.field{display:grid;gap:6px;margin-bottom:12px}
input,select,textarea{padding:12px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#0a1320,#0e1826);color:var(--text);outline:none}textarea{min-height:96px}
.pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(89,216,255,.08);border:1px solid var(--line)}
.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:700}.muted{color:var(--muted)}.small{font-size:.86rem}.status{min-height:20px;margin-top:8px;color:var(--amber)}
.preview{width:100%;height:220px;border-radius:14px;background:#070d14;object-fit:cover;border:1px solid rgba(89,216,255,.16)} .scannerViewport{width:100%;max-width:420px;height:320px;margin:0 auto;border:1px solid rgba(89,216,255,.22);border-radius:14px;overflow:hidden;background:#070d14}
.stack{display:grid;gap:10px}.vehicleBoard{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.modeCard{display:block;padding:12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0d1726,#0b1420)}
.drawer{position:fixed;top:16px;right:16px;width:min(420px,calc(100vw - 32px));z-index:20;background:linear-gradient(180deg, rgba(16,26,41,.98), rgba(10,17,28,.98));border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.seedText{min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.stats > div{padding:12px;border-radius:14px;background:linear-gradient(180deg, rgba(89,216,255,.08), rgba(89,216,255,0));border:1px solid rgba(89,216,255,.08)}
.stats span{display:block;color:var(--muted);font-size:.84rem}.stats strong{display:block;font-size:1.9rem;margin-top:4px}
.gaugeCard{padding:18px}.gaugeRing{width:164px;height:164px;border-radius:50%;margin:0 auto 14px auto;display:grid;place-items:center;box-shadow:inset 0 0 30px rgba(89,216,255,.08), 0 6px 24px rgba(0,0,0,.3)}
.gaugeInner{width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.06), rgba(0,0,0,.15)), linear-gradient(180deg,#0e1928,#0a1320);display:grid;place-items:center;text-align:center}
.gaugeValue{font-size:1.7rem;font-weight:800}.gaugeLabel{font-size:.82rem;color:var(--muted);max-width:90px}
.chartPanel{padding:12px;border-radius:16px;background:linear-gradient(180deg, rgba(10,18,29,.98), rgba(14,24,38,.98));border:1px solid rgba(89,216,255,.16)}
.matrixGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}.matrixCell{height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.thumbGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.thumbGrid img{width:100%;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media (max-width:1100px){.hero,.twoCol,.threeCol,.grid2,.stats{grid-template-columns:1fr}}
input,
select,
textarea {
  font-size: 16px;
}