:root{--bg-primary: #070b14;--bg-secondary: #0d1527;--bg-card: #111c35;--bg-panel: #162444;--border-subtle: #1e293b;--border-focus: #38bdf8;--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--accent-cyan: #38bdf8;--accent-blue: #2563eb;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--accent-purple: #c084fc;--font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-sans);min-height:100vh;-webkit-font-smoothing:antialiased}.telematics-app-root{min-height:100vh;display:flex;flex-direction:column}.bridge-nav-header{background:#090f1d;border-bottom:1px solid var(--border-subtle);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.bridge-nav-left{display:flex;align-items:center;gap:12px}.brand-title{font-size:15px;font-weight:700;letter-spacing:.5px;color:#fff;display:flex;align-items:center;gap:8px}.platform-tag{background:#38bdf826;color:var(--accent-cyan);padding:2px 8px;border-radius:4px;font-size:11px;font-family:var(--font-mono);border:1px solid rgba(56,189,248,.3)}.bridge-nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bridge-link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:6px;font-size:12px;text-decoration:none;color:var(--text-muted);border:1px solid var(--border-subtle);background:#111c3599;transition:all .2s ease}.bridge-link:hover{color:#fff;border-color:var(--accent-cyan);background:#38bdf81a}.bridge-link.active{color:var(--accent-cyan);border-color:var(--accent-cyan);background:#38bdf826;font-weight:600}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot-p01{background:#38bdf8}.dot-p02{background:#10b981}.dot-p03{background:#f59e0b}.dot-p04{background:#c084fc}.dot-p05{background:#f43f5e;box-shadow:0 0 8px #f43f5e}.fleet-top-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.fleet-selector-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.unit-profile-banner{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;padding:16px 24px;margin:16px 24px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;align-items:center}.profile-col{display:flex;flex-direction:column;gap:4px}.prof-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;font-family:var(--font-mono)}.prof-val{font-size:15px;font-weight:700;color:#fff}.prof-sub{font-size:12px;color:var(--text-muted)}.badge-hos{background:#10b98126;color:var(--accent-emerald);padding:2px 6px;border-radius:4px;border:1px solid rgba(16,185,129,.3);display:inline-block;margin-top:2px}.cross-links-col{display:flex;flex-direction:column;gap:8px}.bridge-button-row{display:flex;gap:6px;flex-wrap:wrap}.btn-cross-bridge{padding:4px 10px;border-radius:4px;font-size:11px;text-decoration:none;font-weight:600;transition:opacity .2s}.btn-cross-bridge:hover{opacity:.85}.btn-cross-bridge.p01{background:#0284c7;color:#fff}.btn-cross-bridge.p02{background:#059669;color:#fff}.btn-cross-bridge.p03{background:#d97706;color:#fff}.btn-cross-bridge.p04{background:#7c3aed;color:#fff}.simulation-controls-group{display:flex;align-items:center;gap:8px}.speed-pills{display:flex;border:1px solid var(--border-subtle);border-radius:6px;overflow:hidden}.speed-pills button{background:transparent;color:var(--text-muted);border:none;padding:4px 8px;font-size:11px;cursor:pointer}.speed-pills button.active{background:var(--accent-cyan);color:#000;font-weight:700}.telematics-content-wrap{padding:16px 24px 32px;display:flex;flex-direction:column;gap:16px}.telematics-main-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:16px}.telematics-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px}.card-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:10px}.card-header h3{font-size:14px;font-weight:600;color:#fff;letter-spacing:.3px}.gauges-primary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;text-align:center}.gauge-dial-box{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:8px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}.gauge-circle-outer{position:relative;width:90px;height:90px}.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge-bg-circle{fill:none;stroke:#ffffff14;stroke-width:8}.gauge-progress-circle{fill:none;stroke:var(--accent-cyan);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .3s ease}.gauge-center-val{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.dial-num{font-size:18px;font-weight:800;font-family:var(--font-mono);color:#fff;line-height:1}.dial-unit{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}.gauge-label{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:4px}.gauge-subtext{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}.secondary-bars-column{display:flex;flex-direction:column;gap:10px;margin-top:6px}.param-bar-item{display:flex;flex-direction:column;gap:4px}.param-label-row{display:flex;justify-content:space-between;font-size:11px;font-family:var(--font-mono)}.bar-track{height:6px;background:var(--bg-panel);border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.bar-fill{height:100%;background:var(--accent-emerald);transition:width .3s ease}.coldchain-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.coldchain-box{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:2px}.cc-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase;font-family:var(--font-mono)}.cc-val{font-size:16px;font-weight:700;font-family:var(--font-mono);color:#fff}.cc-sub{font-size:10px;color:var(--text-muted)}.safety-counters-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.counter-box{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:6px;padding:8px;text-align:center}.cnt-num{font-size:16px;font-weight:800;font-family:var(--font-mono);color:#fff}.cnt-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase}.dtc-table-container{overflow-x:auto}.dtc-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}.dtc-table th,.dtc-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);text-align:left}.dtc-table th{color:var(--text-dim);text-transform:uppercase;font-size:10px}.alert-banner{padding:10px 14px;border-radius:6px;font-size:12px;display:flex;align-items:center;gap:8px}.alert-banner.critical{background:#f43f5e26;border:1px solid rgba(244,63,94,.3);color:var(--accent-rose)}.alert-banner.warning{background:#f59e0b26;border:1px solid rgba(245,158,11,.3);color:var(--accent-amber)}.diagnostic-actions-row{display:flex;gap:8px;flex-wrap:wrap}.btn-action-test{background:var(--bg-panel);border:1px solid var(--border-subtle);color:var(--text-main);padding:6px 12px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.btn-action-test:hover{background:#38bdf81a;border-color:var(--accent-cyan)}.btn-action-test.amber{border-color:#f59e0b80;color:var(--accent-amber)}.btn-action-test.red{border-color:#f43f5e80;color:var(--accent-rose)}.btn-action-clear{background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);padding:6px 12px;border-radius:4px;font-size:11px;cursor:pointer}.btn-action-clear:hover{color:#fff;border-color:#fff}.corridor-schematic-box{background:#040812;border:1px solid var(--border-subtle);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px}.corridor-title{font-size:12px;font-weight:700;color:var(--accent-cyan)}.corridor-progress-track{height:8px;background:#0f172a;border-radius:4px;position:relative;border:1px solid rgba(255,255,255,.1)}.corridor-progress-fill{height:100%;background:linear-gradient(90deg,#0284c7,#38bdf8);border-radius:4px}.truck-pulse-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px}.truck-pulse-core{width:100%;height:100%;background:var(--accent-rose);border-radius:50%;box-shadow:0 0 10px #f43f5e;animation:pulse-ring 1.5s infinite}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}50%{transform:scale(1.3);opacity:.7}to{transform:scale(.8);opacity:1}}.current-gps-coords{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);display:flex;justify-content:space-between}.geofence-status-bar{display:flex;gap:8px;flex-wrap:wrap}.geofence-item{background:var(--bg-panel);border:1px solid var(--border-subtle);padding:4px 8px;border-radius:4px;font-size:11px;display:flex;align-items:center;gap:6px}.geo-status-highlight{color:var(--accent-emerald);font-weight:700}
