.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px} .sc{background:var(--card);border:1px solid var(--border);padding:20px;position:relative;overflow:hidden} .sc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px} .sc.blue::before{background:var(--accent)}.sc.orange::before{background:var(--accent2)}.sc.green::before{background:var(--ok)}.sc.red::before{background:var(--danger)} .sl{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px} .sv{font-family:var(--font-head);font-size:36px;font-weight:800;line-height:1} .sv.blue{color:var(--accent)}.sv.orange{color:var(--accent2)}.sv.green{color:var(--ok)}.sv.red{color:var(--danger)} .ss{font-size:10px;color:var(--muted);margin-top:6px} .si{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:32px;opacity:.07} .card{background:var(--card);border:1px solid var(--border);margin-bottom:16px} .ch{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:1.5px} .cht{color:var(--muted);display:flex;align-items:center;gap:8px} .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)} .tbl{width:100%;border-collapse:collapse;font-size:12px} .tbl th{text-align:left;padding:10px 16px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);font-weight:400} .tbl td{padding:12px 16px;border-bottom:1px solid rgba(30,45,61,.5);vertical-align:middle} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:rgba(0,212,255,.02)} .tbl tr{cursor:pointer} .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;font-size:10px;letter-spacing:1px;text-transform:uppercase} .b-on{background:rgba(57,255,20,.1);color:var(--ok);border:1px solid rgba(57,255,20,.2)} .b-off{background:rgba(74,96,128,.1);color:var(--muted);border:1px solid rgba(74,96,128,.2)} .b-crit{background:rgba(255,59,92,.1);color:var(--danger);border:1px solid rgba(255,59,92,.2)} .b-warn{background:rgba(255,181,71,.1);color:var(--warn);border:1px solid rgba(255,181,71,.2)} .b-info{background:rgba(0,212,255,.1);color:var(--accent);border:1px solid rgba(0,212,255,.2)} .blink{width:5px;height:5px;border-radius:50%;animation:pulse 1.5s infinite} .b-on .blink{background:var(--ok)}.b-crit .blink{background:var(--danger)}.b-warn .blink{background:var(--warn)} .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .dr{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid rgba(30,45,61,.5);font-size:12px} .dr:last-child{border-bottom:none} .dk{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:1px} .ai{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;border-bottom:1px solid rgba(30,45,61,.5)} .ai:last-child{border-bottom:none} .ab{flex:1}.at{font-size:12px;font-weight:700;margin-bottom:2px} .am{font-size:10px;color:var(--muted)} .batt{display:flex;align-items:center;gap:8px} .bbar{width:48px;height:8px;background:var(--border);border-radius:1px;overflow:hidden} .bfill{height:100%;transition:width .3s} .bhi{background:var(--ok)}.bmid{background:var(--warn)}.blo{background:var(--danger)} .sig{display:flex;align-items:flex-end;gap:2px;height:14px} .sbar{width:4px;background:var(--border);border-radius:1px} .sbar.on{background:var(--accent)} .afs{display:flex;flex-wrap:wrap;gap:6px} .af{padding:2px 8px;font-size:9px;letter-spacing:1px;text-transform:uppercase;border-radius:2px} .af.a{background:rgba(255,59,92,.15);color:var(--danger);border:1px solid rgba(255,59,92,.3)} .af.i{background:rgba(74,96,128,.08);color:var(--muted);border:1px solid rgba(30,45,61,.5)} .tabs{display:flex;border-bottom:1px solid var(--border)} .tab{padding:12px 20px;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s} .tab.active{color:var(--accent);border-bottom-color:var(--accent)} .tab:hover:not(.active){color:var(--text)} .tc{display:none}.tc.active{display:block} .tr{font-size:11px;padding:8px 16px;display:grid;grid-template-columns:160px 70px 80px 130px 80px 1fr;gap:8px;border-bottom:1px solid rgba(30,45,61,.3);align-items:center} .trh{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .mapbox{background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden;margin-bottom:16px} .mgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);background-size:40px 40px} .mov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px} .mlabel{font-size:11px;color:var(--muted);letter-spacing:2px} .fg{margin-bottom:20px} .fl{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .fi{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:10px 14px;outline:none;transition:border-color .15s} .fi:focus{border-color:var(--accent)} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fsec{padding:20px;border-bottom:1px solid var(--border)} .fsec:last-child{border-bottom:none} ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .loading{text-align:center;padding:40px;color:var(--muted);font-size:11px;letter-spacing:2px} .empty{text-align:center;padding:48px;color:var(--muted)} .empty-i{font-size:40px;margin-bottom:12px;opacity:.3} .empty-t{font-size:11px;letter-spacing:2px;text-transform:uppercase} .coords{font-size:11px;color:var(--accent)}
Platform v1.0
--:--:--
LIVE
System Overview
◈
Total Devices
—
Registered
◉
Online Now
—
Last 10 min
⚠
Open Alerts
—
Unresolved
◎
Telemetry 24h
—
Messages
Recent Devices
Loading
Active Alerts
Loading
Device Registry
Device IDStatusBatterySignalLocationSpeedSealedLast SeenAlerts
Loading
Device —
Device Info
Alarm Flags
Telemetry
Alerts
Track
Timestamp
Speed
Dir
Coords
Battery
Flags
Loading
Loading
⊕
GPS Track —
Loading...
Alert Center
Loading
Telemetry Feed
Timestamp
Speed
Dir
Coords
Battery
Status
◉
Select a device above
Live Map
⊕
Live Device Positions
Configure Google Maps API key in Settings for interactive map
Device Positions
Loading
Track History
⌀
GPS Track History
Select a device above
Track Points
Timestamp
Lat
Lon
Speed
GPS
Coords
⌀
Select a device to view track
Device Commands
Send Command
Command Log
// Command output appears here
Bulk Operations
Resolve All Open Alerts
Ping All Devices
Platform Settings
API Connection
MQTT Broker Info
System Status
Checking