:root{--bg:#07131f;--panel:#0d1d2b;--panel2:#112638;--line:#20384b;--text:#f2f6f9;--muted:#91a5b5;--green:#32d583;--amber:#fdb022;--red:#f97066;--blue:#4ba3ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 0,#14334b 0,transparent 32%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh}.topbar{height:94px;padding:14px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#07131fe8;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:14px}.brand img{width:62px;height:62px;object-fit:contain}.brand p,.brand h1{margin:0}.brand p{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700}.brand h1{font-size:27px;letter-spacing:-.03em}.sync{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}.dot{width:9px;height:9px;background:var(--amber);border-radius:50%;box-shadow:0 0 10px currentColor}.dot.online{background:var(--green)}button,select,input{font:inherit}.sync button,.view-toggle button{color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 13px;cursor:pointer}main{max-width:1600px;margin:auto;padding:25px 28px 50px}.summary{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.metric{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:17px}.metric .label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.metric strong{font-size:30px;display:block;margin-top:6px}.metric.attention strong{color:var(--red)}.metric.good strong{color:var(--green)}.alert-panel{margin-top:18px;border:1px solid #653a37;background:#2a171acc;border-radius:14px;padding:17px;display:grid;grid-template-columns:190px 1fr;gap:18px}.eyebrow{font-size:11px;color:var(--red);text-transform:uppercase;letter-spacing:.12em;font-weight:800}.alert-panel h2{margin:4px 0}.alerts{display:flex;gap:8px;flex-wrap:wrap}.alert-chip{background:#3c2022;border:1px solid #694045;border-radius:9px;padding:9px 11px;font-size:13px}.alert-chip strong{margin-right:6px}.toolbar{display:flex;gap:12px;align-items:end;margin:22px 0 14px}.toolbar label{display:grid;gap:6px}.toolbar label>span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.toolbar input,.toolbar select{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:11px 12px;min-width:180px}.search{flex:1}.search input{width:100%}.view-toggle{margin-left:auto;display:flex}.view-toggle button{border-radius:0}.view-toggle button:first-child{border-radius:8px 0 0 8px}.view-toggle button:last-child{border-radius:0 8px 8px 0}.view-toggle button.active{background:var(--blue);border-color:var(--blue)}.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(325px,1fr));gap:13px}.vehicle-card{background:linear-gradient(145deg,#112638,#0b1a27);border:1px solid var(--line);border-radius:14px;padding:17px;cursor:pointer;transition:.18s}.vehicle-card:hover{transform:translateY(-2px);border-color:#3c607b}.vehicle-card.warning{border-left:4px solid var(--amber)}.vehicle-card.critical{border-left:4px solid var(--red)}.card-head{display:flex;justify-content:space-between;gap:12px}.unit h3{margin:0;font-size:20px}.unit p{margin:4px 0;color:var(--muted);font-size:13px}.state{height:fit-content;padding:5px 8px;border-radius:999px;background:#172d3e;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.state.on{background:#123827;color:var(--green)}.state.idle{background:#493716;color:var(--amber)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.stat{background:#07131f80;padding:10px;border-radius:9px}.stat span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:700}.stat strong{display:block;margin-top:4px;font-size:14px}.stat.bad strong{color:var(--red)}.card-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:13px}.vehicle-grid.table-view{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden}.table-view .vehicle-card{border:0;border-bottom:1px solid var(--line);border-radius:0;display:grid;grid-template-columns:1fr 2fr 1fr;padding:12px 16px}.table-view .stats{margin:0}.table-view .card-foot{align-items:center}.hidden{display:none!important}.empty{text-align:center;color:var(--muted);padding:70px}dialog{width:min(760px,calc(100% - 30px));color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:25px;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#020912c7;backdrop-filter:blur(4px)}.close{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--muted);font-size:30px;cursor:pointer}.detail-title h2{margin:0;font-size:28px}.detail-title p{color:var(--muted)}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.detail-item{background:#081622;border:1px solid var(--line);border-radius:10px;padding:13px}.detail-item span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.detail-item strong{display:block;margin-top:6px}.fault-box{margin-top:18px;background:#2b191b;border:1px solid #63383c;border-radius:10px;padding:15px}.error-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#552329;border:1px solid var(--red);padding:13px 18px;border-radius:10px;z-index:10}.skeleton{min-height:180px;animation:pulse 1.4s infinite}@keyframes pulse{50%{opacity:.45}}@media(max-width:1000px){.summary{grid-template-columns:repeat(3,1fr)}.alert-panel{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}}@media(max-width:620px){.topbar{height:auto;padding:12px}.brand p{display:none}.sync span:not(.dot){display:none}main{padding:15px}.summary{grid-template-columns:repeat(2,1fr)}.toolbar label{width:100%}.toolbar select{width:100%}.view-toggle{margin-left:0}.detail-grid{grid-template-columns:repeat(2,1fr)}.vehicle-grid{grid-template-columns:1fr}}
