:root{--bg: #0b1120;--panel: #111a2e;--panel-2: #16223c;--line: #223049;--text: #e2e8f0;--muted: #9aabc4;--accent: #38bdf8;--accent-600: #0284c7;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}button{font-family:inherit;cursor:pointer}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.device:focus-visible{outline-offset:-2px}.lang-toggle{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.lang{background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:600;padding:6px 9px}.lang:hover{color:var(--text);background:var(--panel-2)}.lang.active{background:var(--accent-600);color:#fff}.login-shell{height:100%;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#16233f 0%,var(--bg) 60%)}.login-card{width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px #0006}.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}.brand-mark{font-size:28px;color:var(--accent)}.brand h1{margin:0;font-size:20px;letter-spacing:.5px}.brand p{margin:0;color:var(--muted);font-size:13px}.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.login-card input{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px}.login-card input:focus{outline:none;border-color:var(--accent)}.login-card button[type=submit]{margin-top:6px;background:var(--accent-600);color:#fff;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:600}.login-card button[disabled]{opacity:.6;cursor:default}.login-error{background:#3b1220;color:#fca5a5;border-radius:8px;padding:9px 12px;font-size:13px}.login-hint{color:var(--muted);font-size:12px;text-align:center;margin:0}.login-hint code{color:var(--text)}.crash{height:100%;display:grid;place-items:center;background:var(--bg);padding:24px}.crash-card{max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;text-align:center}.crash-card h1{margin:0 0 8px;font-size:20px}.crash-card p{color:var(--muted);font-size:14px;margin:0 0 14px}.crash-card pre{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px;color:#fca5a5;overflow-x:auto;margin:0 0 16px}.app{height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:24px;padding:0 18px;height:56px;background:var(--panel);border-bottom:1px solid var(--line)}.brand-inline{display:flex;align-items:center;gap:8px}.brand-inline .brand-mark{font-size:20px}.brand-inline strong{font-size:16px}.brand-sub{color:var(--muted);font-size:13px}.stats{display:flex;gap:22px;margin-left:10px}.stat{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.stat-value{font-size:18px;font-weight:700}.stat-ok{color:#22c55e}.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}.conn{display:inline-flex;align-items:center;gap:6px;font-size:13px}.conn .dot{width:8px;height:8px;border-radius:50%}.conn-ok{color:#22c55e}.conn-ok .dot{background:#22c55e;box-shadow:0 0 8px #22c55e}.conn-off{color:#eab308}.conn-off .dot{background:#eab308}.ghost{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 12px;font-size:13px}.ghost:hover{border-color:var(--accent)}.body{flex:1;display:flex;min-height:0}.body.scroll{display:block;overflow-y:auto}.nav{display:flex;gap:4px}.nav-item{position:relative;background:transparent;border:none;color:var(--muted);font-size:14px;padding:8px 12px;border-radius:8px}.nav-item:hover{color:var(--text);background:var(--panel-2)}.nav-item.active{color:var(--text);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent)}.nav-badge{margin-left:6px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px}.primary{background:var(--accent-600);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.primary:hover:not([disabled]){background:#0369a1}.primary[disabled]{opacity:.6;cursor:default}.link{background:transparent;border:none;color:var(--accent);font-size:13px;padding:2px 4px}.link:hover{text-decoration:underline}.link.danger{color:#f87171}.link[disabled]{opacity:.5;cursor:default}.page{max-width:1080px;margin:0 auto;padding:24px}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.page-head h2{margin:0;font-size:18px}.page-actions{display:flex;align-items:center;gap:14px}.page-error{background:#3b1220;color:#fca5a5;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line)}.table td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line)}.table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover{background:var(--panel-2)}.row-actions{display:flex;gap:10px;justify-content:flex-end}.sev{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}.sev-critical{background:#3b1220;color:#f87171}.sev-warning{background:#332a12;color:#fbbf24}.alarm-chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;margin:2px 4px 2px 0}.chip-critical{background:#3b1220;color:#fca5a5}.chip-warning{background:#332a12;color:#fcd34d}.detail-h4-row{display:flex;align-items:center;justify-content:space-between}.detail-h4-actions{display:flex;gap:6px}.detail-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip-toggle[disabled]{opacity:.5;cursor:default}.export-note{margin-top:8px;font-size:12px;color:var(--accent)}.chip-toggle{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:999px;white-space:nowrap}.chip-toggle:hover{color:var(--accent);border-color:var(--accent)}.chip-toggle.on{background:#0b2a3f;color:var(--accent);border-color:var(--accent)}.replay-bar{position:absolute;left:50%;bottom:22px;transform:translate(-50%);width:min(620px,calc(100% - 40px));background:#111a2ef5;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 16px 44px #00000080;z-index:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.replay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.replay-head-right{display:flex;align-items:center;gap:8px}.replay-title{font-size:13px;font-weight:600}.replay-trunc{color:#fbbf24}.window-select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:11px;padding:3px 6px;border-radius:6px;cursor:pointer}.window-select:focus{outline:none;border-color:var(--accent)}.replay-controls{display:flex;align-items:center;gap:12px}.replay-play{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-600);color:#fff;border:none;font-size:13px;display:grid;place-items:center}.replay-play:hover{background:#0369a1}.replay-scrubber{flex:1;accent-color:var(--accent);height:4px;cursor:pointer}.replay-speeds{display:flex;gap:4px;flex:none}.speed{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-size:11px;padding:4px 8px;border-radius:6px}.speed.active{background:#0b2a3f;color:var(--accent);border-color:var(--accent)}.replay-meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}.replay-dot{opacity:.5}.replay-alarm{color:#fca5a5}.replay-marker{background:transparent;border:none;transform:translateY(50%)}.replay-core{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);border:2px solid #0b1120}.replay-pulse{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#38bdf880;animation:replay-ping 1.4s ease-out infinite}@keyframes replay-ping{0%{transform:scale(1);opacity:.8}to{transform:scale(3);opacity:0}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#030812b3;display:grid;place-items:center;z-index:1000}.modal{width:520px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 30px 80px #00000080}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-head h3{margin:0;font-size:16px}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}.modal-grid label.full{grid-column:1 / -1}.modal-grid label.checkbox{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:13px}.modal-grid input,.modal-grid select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 11px;font-size:13px}.modal-grid input:focus,.modal-grid select:focus{outline:none;border-color:var(--accent)}.modal-grid input[disabled]{opacity:.6}.modal-grid label.checkbox input{width:auto}.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.sidebar{width:320px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.search{margin:12px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px;font-size:13px}.search:focus{outline:none;border-color:var(--accent)}.device-list{list-style:none;margin:0;padding:0 8px 12px;overflow-y:auto}.device{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer}.device:hover{background:var(--panel-2)}.device.selected{background:var(--panel-2);outline:1px solid var(--accent)}.status-dot{width:10px;height:10px;border-radius:50%;flex:none}.device-main{flex:1;min-width:0}.device-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-meta{font-size:12px;color:var(--muted)}.device-side{text-align:right;font-size:12px;color:var(--text);display:flex;flex-direction:column;gap:2px}.device-ago{color:var(--muted);font-size:11px}.empty{padding:40px 20px;text-align:center;color:var(--muted)}.empty-sub{font-size:12px}.map-wrap{flex:1;position:relative;min-width:0}.map{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b1120}.gps-marker{transform:translateY(50%)}.gps-dot{display:block;width:16px;height:16px;border-radius:50%;border:2px solid #0b1120;position:relative}.gps-arrow{position:absolute;left:50%;top:-9px;transform-origin:50% 17px;margin-left:-4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid}.trail-vertex{display:block;border-radius:50%;border:1px solid #0b1120;transform:translateY(50%)}.gm-info{color:#0f172a;font-size:12px;min-width:150px}.gm-info-title{font-weight:700;font-size:13px;margin-bottom:4px}.gm-info-row{color:#334155}.gm-info-addr{margin-top:6px;padding-top:6px;border-top:1px solid #e2e8f0;color:#475569}.map-status{position:absolute;top:0;right:0;bottom:0;left:0;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:#0b1120;color:var(--muted)}.map-status-error{color:#fca5a5}.map-status strong{color:#f8fafc;font-size:15px}.map-status p{max-width:360px;font-size:13px}.map-missing{font-family:ui-monospace,monospace;font-size:12px;color:#fbbf24}.map-retry{margin-top:4px;padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--accent);color:#04121f;font-weight:600;cursor:pointer}.map-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(148,163,184,.3);border-top-color:var(--accent);animation:map-spin .8s linear infinite}@keyframes map-spin{to{transform:rotate(360deg)}}.map-search{position:absolute;top:12px;left:12px;z-index:520;width:300px;max-width:calc(100% - 24px)}.map-search-field{position:relative}.map-search-input{width:100%;padding:9px 30px 9px 12px;border-radius:10px;border:1px solid var(--line);background:#0f172af2;color:#f8fafc;font-size:13px;box-shadow:0 4px 16px #00000059}.map-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}.map-search-status{margin-top:6px;font-size:12px;color:var(--muted)}.map-search-error{color:#fca5a5}.map-suggestions{margin-top:6px;list-style:none;padding:4px;border-radius:10px;background:#0f172afa;border:1px solid var(--line);box-shadow:0 8px 24px #0006}.map-suggestion{display:flex;flex-direction:column;width:100%;text-align:left;gap:2px;padding:7px 10px;border:none;background:none;color:#e2e8f0;cursor:pointer;border-radius:6px}.map-suggestion:hover{background:#38bdf81f}.map-suggestion-main{font-size:13px}.map-suggestion-sub{font-size:11px;color:var(--muted)}.map-toolbar{position:absolute;top:12px;right:12px;z-index:520;display:flex;flex-direction:column;gap:6px}.map-tool{width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:16px;border:1px solid var(--line);background:#0f172af2;color:#e2e8f0;box-shadow:0 4px 12px #00000059}.map-tool:hover:not(:disabled){border-color:var(--accent)}.map-tool-active{background:var(--accent);color:#04121f;border-color:var(--accent)}.map-tool:disabled{opacity:.4;cursor:not-allowed}.map-panel{position:absolute;z-index:520;width:280px;max-width:calc(100% - 24px);background:#0f172af7;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #00000073;padding:12px;color:#e2e8f0}.map-geofences{top:60px;right:12px}.map-route{bottom:12px;left:12px}.map-streetview{bottom:12px;right:12px;width:360px}.map-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.map-panel-head strong{font-size:13px}.map-panel-close{border:none;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}.map-hint{font-size:12px;color:var(--muted);margin:4px 0}.map-geofence-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.map-geofence-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}.map-geofence-item{display:flex;align-items:center;gap:8px}.map-geofence-swatch{width:12px;height:12px;border-radius:3px;flex:none}.map-geofence-name{flex:1;min-width:0;background:#02061799;border:1px solid var(--line);color:#e2e8f0;border-radius:6px;padding:4px 6px;font-size:12px}.map-geofence-del{border:none;background:none;cursor:pointer;font-size:14px}.map-route-od{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:8px}.map-route-arrow{color:var(--accent)}.map-route-stats{display:flex;gap:20px}.map-route-label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.map-route-value{font-size:16px;font-weight:700}.map-streetview-body{position:relative}.map-streetview-canvas{width:100%;height:220px;border-radius:8px;overflow:hidden;background:#0b1120}.map-streetview-note{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}.detail{width:340px;background:var(--panel);border-left:1px solid var(--line);padding:16px;overflow-y:auto}.detail-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.detail-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700}.detail-sub{color:var(--muted);font-size:12px;margin-left:18px}.detail h4{margin:18px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:3px}.field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.field-value{font-size:13px}.mono{font-family:ui-monospace,Menlo,monospace}.muted{color:var(--muted);font-size:13px}.cmd-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cmd-buttons button{background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px;font-size:12px;font-weight:600;letter-spacing:.3px}.cmd-buttons button:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}.cmd-buttons button[disabled]{opacity:.5;cursor:default}.cmd-note{margin-top:10px;font-size:12px;color:var(--accent)}.cmd-log{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.cmd-log li{display:flex;align-items:center;gap:8px;font-size:12px;background:var(--panel-2);border-radius:8px;padding:7px 10px}.cmd-type{font-weight:600}.cmd-status{margin-left:auto;font-size:11px;padding:2px 7px;border-radius:999px;background:var(--line)}.s-delivered,.s-responded{background:#14331f;color:#22c55e}.s-sent,.s-queued{background:#14273f;color:var(--accent)}.s-pending{background:#332a12;color:#eab308}.s-failed,.s-expired{background:#3b1220;color:#fca5a5}.cmd-time{color:var(--muted);font-size:11px}@media (max-width: 1024px){.sidebar{width:240px}.detail{width:300px}.stats{gap:16px}.map-search{width:260px}}@media (max-width: 900px){.brand-sub{display:none}.stats{gap:12px}.sidebar{width:220px}.detail{position:absolute;top:0;right:0;bottom:0;width:min(360px,90%);z-index:540;box-shadow:-8px 0 30px #00000080}}@media (max-width: 640px){.topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:10px}.stats{display:none}.nav{order:3;width:100%;justify-content:space-between}.topbar-right{gap:8px}.body{flex-direction:column}.sidebar{width:100%;height:38vh;min-height:0;border-right:none;border-bottom:1px solid var(--line)}.map-wrap{flex:1;min-height:0}.detail{top:auto;left:0;right:0;bottom:0;width:auto;height:60%;border-left:none;border-top:1px solid var(--line);box-shadow:0 -8px 30px #00000080}.map-search{width:min(280px,calc(100% - 24px))}.map-panel{width:min(300px,calc(100% - 24px))}.map-streetview{width:min(340px,calc(100% - 24px))}.replay-bar{left:8px;right:8px}}