:root{
    --blue:#0b63b6;
    --blue2:#168bff;
    --navy:#062f5f;
    --sky:#eaf6ff;
    --card:#ffffff;
    --text:#0f2440;
    --muted:#64748b;
    --line:#d8e7f7;
    --good:#0e9f6e;
    --bad:#dc2626;
    --shadow:0 18px 40px rgba(7,50,100,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f8fcff,#eaf6ff);color:var(--text)}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;background:linear-gradient(90deg,var(--navy),var(--blue),var(--blue2));color:white;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.brand{font-size:21px;font-weight:800;letter-spacing:.3px}.brand.big{font-size:28px;color:var(--blue)}
.subbrand{font-size:12px;opacity:.85;margin-top:3px}
.topbar nav{display:flex;flex-wrap:wrap;gap:8px}.topbar nav a{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px}.topbar nav a:hover{background:rgba(255,255,255,.25)}
.container{max-width:1400px;margin:0 auto;padding:22px}
.hero-card,.card{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px;backdrop-filter:blur(8px)}
.hero-card{display:flex;justify-content:space-between;align-items:center;gap:20px;background:radial-gradient(circle at top right,rgba(22,139,255,.18),transparent 38%),rgba(255,255,255,.88)}
h1{margin:0 0 8px;font-size:30px;color:#082f5f}p{margin:8px 0;color:var(--muted);line-height:1.55}.narrow{max-width:800px;margin-left:auto;margin-right:auto}
.live-stats{display:flex;gap:12px;flex-wrap:wrap}.live-stats div{min-width:110px;border:1px solid var(--line);background:#f7fbff;border-radius:18px;padding:12px;text-align:center}.live-stats strong{display:block;font-size:24px;color:var(--blue)}.live-stats span{font-size:12px;color:var(--muted)}
.map-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}#map,#historyMap{height:72vh;min-height:560px;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;background:#dbeafe}.side-panel{background:white;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px;max-height:72vh;overflow:auto}.panel-title{font-size:18px;font-weight:800;margin-bottom:12px;color:#082f5f}.vehicle-list{display:flex;flex-direction:column;gap:10px}.vehicle-item{border:1px solid var(--line);background:#f8fbff;border-radius:16px;padding:12px;cursor:pointer}.vehicle-item:hover{border-color:var(--blue2);box-shadow:0 10px 18px rgba(22,139,255,.10)}.vehicle-name{font-weight:800;color:#0f376d}.vehicle-meta{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bad);margin-right:6px}.status-dot.online{background:var(--good)}.marker-label{font-weight:800;color:#0b3b74}.popup-table{font-size:13px}.popup-table td{padding:3px 7px;border-bottom:1px solid #edf2f7}.popup-table td:first-child{color:#64748b}
.add-form,.history-controls{display:flex;gap:10px;flex-wrap:wrap}.add-form input,.history-controls select,.history-controls input,input,select{height:40px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:white;color:var(--text);min-width:160px}button{height:40px;border:0;border-radius:12px;padding:0 16px;background:linear-gradient(90deg,var(--blue),var(--blue2));color:white;font-weight:800;cursor:pointer}button:hover{filter:brightness(1.05)}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:1050px}.data-table th{background:#eaf6ff;color:#0b3b74;text-align:left;padding:10px}.data-table td{border-bottom:1px solid var(--line);padding:8px;vertical-align:middle}.data-table input,.data-table select{width:100%;min-width:120px;height:34px}.success,.health-ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;padding:12px;border-radius:14px;margin:10px 0}.health-bad,.alert{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;padding:12px;border-radius:14px;margin:10px 0}code{display:inline-block;background:#eff6ff;border:1px solid var(--line);padding:8px 10px;border-radius:10px;color:#0b3b74;max-width:100%;overflow:auto}
.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,rgba(22,139,255,.20),transparent 35%),linear-gradient(135deg,#f8fcff,#eaf6ff)}.login-card{width:min(430px,92vw);background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:28px;padding:28px}.login-card label{font-weight:800;color:#0b3b74}.login-card input{width:100%;margin:8px 0 14px}.login-card button{width:100%}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.hero-card{align-items:flex-start;flex-direction:column}.map-grid{grid-template-columns:1fr}#map,#historyMap{height:60vh;min-height:420px}.side-panel{max-height:none}.container{padding:14px}.live-stats{width:100%}.live-stats div{flex:1}.topbar nav a{font-size:12px;padding:8px 10px}}