* { box-sizing: border-box; }
:root { --red:#c9142f; --black:#161616; --white:#fff; --bg:#f3f4f6; --muted:#69707d; --border:#e2e5e9; }
body { margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:#20242a; }
button,input { font:inherit; }
.topbar { background:var(--black); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px #0003; }
.topbar strong { background:var(--red); padding:8px 10px; border-radius:8px; margin-right:10px; }
.topbar nav { display:flex; gap:10px; align-items:center; }
.topbar button,.topbar a,.login-card button { border:0; border-radius:8px; padding:10px 14px; cursor:pointer; background:var(--red); color:#fff; text-decoration:none; font-weight:700; }
.topbar button.secondary { background:#333; border:1px solid #555; }
.topbar button:disabled { opacity:.65; cursor:wait; }
.page { max-width:1500px; margin:auto; padding:20px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stats article,.panel { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 4px 18px #0b10201a; }
.stats article { padding:18px; display:flex; justify-content:space-between; align-items:center; }
.stats span { color:var(--muted); font-weight:600; }
.stats strong { font-size:28px; }
.grid-main { display:grid; grid-template-columns:minmax(0,2fr) minmax(290px,1fr); gap:16px; margin-bottom:16px; }
.panel-title { min-height:58px; padding:14px 18px; display:flex; gap:12px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.panel-title h2 { margin:0; font-size:18px; }
.panel-title span { color:var(--muted); font-size:13px; }
#map { height:460px; border-radius:0 0 14px 14px; }
.summary-text { white-space:pre-wrap; line-height:1.55; padding:20px; min-height:220px; }
.vehicles-panel { overflow:hidden; }
.panel-title input { width:min(330px,50%); padding:10px 12px; border:1px solid var(--border); border-radius:8px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:1050px; }
th,td { padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:#fafafa; color:#565d68; font-size:13px; position:sticky; top:0; }
td { font-size:14px; }
td small,.muted { color:var(--muted); }
.status-dot { display:inline-block; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 4px #0000000b; }
.status-dot.ok { background:#18a05e; }.status-dot.warning { background:#e49a1f; }.status-dot.critical { background:#d0223d; }
.alert-line { margin-bottom:5px; font-size:12px; }.alert-line.warning { color:#8a5700; }.alert-line.critical { color:#ad1028; }
.error-cell,.error-box { color:#a10d25; background:#fff1f3; }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#141414,#3a0b12); padding:20px; }
.login-card { width:min(420px,100%); background:#fff; border-radius:16px; padding:28px; box-shadow:0 25px 80px #0008; }
.login-card .brand-mark { display:inline-block; background:var(--red); color:#fff; font-weight:900; padding:10px 12px; border-radius:9px; }
.login-card h1 { margin-bottom:4px; }.login-card p { color:var(--muted); margin-top:0; }
.login-card label { display:block; font-weight:700; margin:16px 0; }
.login-card input { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid #ccd1d8; border-radius:8px; }
.login-card button { width:100%; margin-top:8px; }
.error-box { padding:10px; border-radius:8px; }
@media (max-width:900px) { .stats{grid-template-columns:repeat(2,1fr)} .grid-main{grid-template-columns:1fr} .topbar{align-items:flex-start;gap:12px;flex-direction:column}.topbar nav{flex-wrap:wrap}.page{padding:12px} }
.map-title { flex-wrap:wrap; }
.map-actions { display:flex; align-items:center; gap:16px; }
.tag-toggle { display:flex; align-items:center; gap:7px; color:#26313f; font-size:13px; font-weight:700; cursor:pointer; }
.tag-toggle input { width:16px; height:16px; accent-color:#1267d6; }
.map-legend { display:flex; gap:20px; align-items:center; padding:9px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.map-legend span { display:flex; align-items:center; gap:7px; }
.map-legend i { display:inline-block; width:13px; height:13px; border-radius:50%; }
.legend-main { background:#18a05e; border:2px solid #0b7a3d; }
.legend-tag { background:#fff; border:3px dashed #1267d6; }
.tag-cell { display:flex; flex-direction:column; gap:3px; min-width:135px; }
.tag-cell strong { font-size:12px; }
.tag-cell span:not(.tag-chip), .tag-cell small { color:var(--muted); font-size:12px; }
.tag-chip { align-self:flex-start; background:#e8f1ff; color:#1257ad; border:1px solid #b8d3f7; padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; }
@media (max-width:900px) { .map-actions{width:100%;justify-content:space-between}.map-legend{flex-wrap:wrap} }