.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,var(--navy-700),var(--navy-900) 65%);padding:24px}.login-card{width:100%;max-width:400px;background:var(--card-bg);border-radius:16px;box-shadow:0 20px 60px #00000059;padding:36px 32px 28px}.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}.login-brand-mark{width:36px;height:36px;border-radius:10px;background:var(--teal-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.login-brand-name{font-size:20px;font-weight:700;color:var(--navy-900)}.login-subtitle{color:var(--text-secondary);margin:0 0 24px;font-size:14px}.login-form{display:flex;flex-direction:column;gap:16px}.login-label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-primary)}.login-label input{font-size:14px;font-weight:400;padding:10px 12px;border-radius:8px;border:1px solid var(--border);outline:none;transition:border-color .15s}.login-label input:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px #14b8a626}.login-notice{background:#fffbeb;color:#92400e;font-size:13px;padding:10px 12px;border-radius:8px;border:1px solid #fde68a;margin-bottom:16px}.login-error{background:#fef2f2;color:var(--danger);font-size:13px;padding:10px 12px;border-radius:8px;border:1px solid #fecaca}.login-submit{background:var(--teal-500);color:#fff;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}.login-submit:hover:not(:disabled){background:var(--teal-600)}.login-submit:disabled{opacity:.6;cursor:not-allowed}.login-server-note{margin-top:20px;font-size:12px;color:var(--text-secondary);text-align:center}.login-server-note code{background:var(--bg-light);padding:2px 6px;border-radius:4px}.login-security-note{margin-top:10px;font-size:11px;color:var(--text-secondary);text-align:center}.app-sidebar{width:220px;min-width:220px;background:var(--navy-900);color:var(--text-on-navy);display:flex;flex-direction:column;padding:18px 14px}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 4px 22px}.sidebar-brand-mark{width:30px;height:30px;border-radius:8px;background:var(--teal-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.sidebar-brand-name{font-weight:700;font-size:15px;letter-spacing:.01em}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.sidebar-nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;background:none;border:none;border-radius:8px;color:var(--text-on-navy-muted);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}.sidebar-nav button:hover{background:#ffffff0f;color:var(--text-on-navy)}.sidebar-nav button.is-active{background:#14b8a629;color:var(--teal-400)}.sidebar-icon{font-size:15px}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-live{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-on-navy-muted);padding:0 4px}.sidebar-live-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8}.sidebar-live-online .sidebar-live-dot{background:var(--teal-400);box-shadow:0 0 0 3px #2dd4bf40}.sidebar-live-reconnecting .sidebar-live-dot,.sidebar-live-upstream_down .sidebar-live-dot{background:var(--warning)}.sidebar-live-offline .sidebar-live-dot{background:var(--danger)}.sidebar-email{font-size:11.5px;color:var(--text-on-navy-muted);padding:0 4px;word-break:break-all}.sidebar-logout{background:#ffffff0f;border:none;color:var(--text-on-navy);padding:9px;border-radius:8px;font-size:12.5px;cursor:pointer}.sidebar-logout:hover{background:#ffffff1f}@media (max-width: 860px){.app-sidebar{width:100%;min-width:0;flex-direction:row;align-items:center;padding:8px 12px;gap:16px}.sidebar-brand{padding:0}.sidebar-brand-name{display:none}.sidebar-nav{flex-direction:row}.sidebar-label{display:none}.sidebar-footer{margin-top:0;margin-left:auto;flex-direction:row;align-items:center;border-top:none;padding-top:0}.sidebar-email{display:none}}.vehicle-list{width:300px;min-width:300px;background:var(--card-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.vehicle-list-search{padding:14px;border-bottom:1px solid var(--border)}.vehicle-list-search input{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);font-size:13px;outline:none}.vehicle-list-search input:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px #14b8a61f}.vehicle-list-empty{padding:20px 16px;color:var(--text-secondary);font-size:13px;text-align:center}.vehicle-list-items{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}.vehicle-item{width:100%;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s}.vehicle-item:hover{background:var(--bg-light)}.vehicle-item.is-selected{background:#e6fbf8;outline:1px solid var(--teal-400)}.status-dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex-shrink:0}.status-dot.status-online{background:var(--teal-500);box-shadow:0 0 0 3px #14b8a633}.status-dot.status-offline{background:#94a3b8}.status-dot.status-unknown{background:var(--warning)}.vehicle-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}.vehicle-item-name{font-weight:600;font-size:13.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle-item-meta{font-size:12px;color:var(--text-secondary)}.vehicle-item-time{font-size:11.5px;color:var(--text-secondary)}.vehicle-item-time.is-stale{color:var(--warning);font-weight:600}@media (max-width: 860px){.vehicle-list{width:100%;min-width:0;max-height:220px;border-right:none;border-bottom:1px solid var(--border)}}.details-panel{width:320px;min-width:320px;background:var(--card-bg);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.details-header{display:flex;align-items:flex-start;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}.details-header h2{margin:0;font-size:16px}.details-close{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--text-secondary);padding:2px 6px}.details-actions{padding:10px 16px;border-bottom:1px solid var(--border)}.details-center-btn{width:100%;background:var(--teal-500);color:#fff;border:none;border-radius:8px;padding:9px;font-size:13px;font-weight:600;cursor:pointer}.details-center-btn:hover:not(:disabled){background:var(--teal-600)}.details-center-btn:disabled{opacity:.5;cursor:not-allowed}.details-technical{margin-top:4px;font-size:12.5px;color:var(--text-secondary)}.details-technical summary{cursor:pointer;font-weight:600;color:var(--text-primary);padding:4px 0}.details-technical .details-row{margin-top:10px}.details-tabs{display:flex;border-bottom:1px solid var(--border)}.details-tabs button{flex:1;padding:10px;border:none;background:none;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent}.details-tabs button.is-active{color:var(--teal-600);border-bottom-color:var(--teal-500)}.details-body{padding:16px;display:flex;flex-direction:column;gap:12px}.details-row{display:flex;flex-direction:column;gap:2px}.details-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.details-value{font-size:13.5px;color:var(--text-primary)}.details-note{font-size:12.5px;color:var(--text-secondary);background:var(--bg-light);padding:10px;border-radius:8px}.details-pill{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}.pill-online{background:#e6fbf8;color:var(--teal-600)}.pill-offline{background:#f1f5f9;color:#475569}.pill-unknown{background:#fef3c7;color:#92400e}.pill-fresh{background:#e6fbf8;color:var(--teal-600)}.pill-stale{background:#fef3c7;color:#92400e}.history-form{display:flex;flex-direction:column;gap:10px}.history-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-primary)}.history-form input{padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-size:13px}.history-form button[type=submit]{background:var(--teal-500);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:600;font-size:13px;cursor:pointer}.history-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.history-clear{background:none;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:12.5px;cursor:pointer;color:var(--text-secondary)}.history-error{background:#fef2f2;color:var(--danger);font-size:12.5px;padding:10px;border-radius:8px;border:1px solid #fecaca}.history-empty,.history-count{font-size:12.5px;color:var(--text-secondary);background:var(--bg-light);padding:10px;border-radius:8px}@media (max-width: 860px){.details-panel{position:fixed;inset:auto 0 0 0;width:100%;min-width:0;max-height:70vh;border-left:none;border-top:1px solid var(--border);box-shadow:0 -8px 24px #0000002e;z-index:30}}.cameras-page{flex:1;overflow-y:auto;padding:24px 32px}.cameras-header h1{margin:0 0 6px;font-size:20px}.cameras-header p{margin:0 0 24px;color:var(--text-secondary);font-size:13.5px;max-width:640px}.cameras-empty{color:var(--text-secondary);font-size:14px}.cameras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.camera-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}.camera-placeholder{aspect-ratio:16 / 10;background:var(--navy-900);color:var(--text-on-navy-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px}.camera-icon{font-size:28px;opacity:.7}.camera-card-name{padding:10px 12px;font-size:13px;font-weight:600}.shell{height:100vh;display:flex}.shell-content{flex:1;display:flex;position:relative;min-width:0}.map-container{flex:1;min-width:0;position:relative}.state-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-light);z-index:10}.state-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:24px 28px;font-size:14px;color:var(--text-secondary);max-width:360px;text-align:center}.state-card-error{color:var(--danger);display:flex;flex-direction:column;gap:12px}.state-card-error button{background:var(--teal-500);color:#fff;border:none;border-radius:8px;padding:9px;font-weight:600;font-size:13px;cursor:pointer}.live-banner{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;box-shadow:0 4px 16px #0000001f}.live-banner-reconnecting,.live-banner-upstream_down{background:#fef3c7;color:#92400e}.live-banner-offline{background:#fee2e2;color:#991b1b}.live-banner-connecting{background:#e0f2fe;color:#075985}@media (max-width: 860px){.shell,.shell-content{flex-direction:column}.map-container{min-height:280px}}:root{--navy-900: #0b1b33;--navy-800: #122544;--navy-700: #1a3156;--teal-500: #14b8a6;--teal-400: #2dd4bf;--teal-600: #0d9488;--bg-light: #f4f6f9;--card-bg: #ffffff;--border: #e2e8f0;--text-primary: #0f172a;--text-secondary: #64748b;--text-on-navy: #e2e8f0;--text-on-navy-muted: #94a3b8;--danger: #dc2626;--warning: #d97706;--success: #16a34a;--radius: 10px;--shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-light);color:var(--text-primary);-webkit-font-smoothing:antialiased}button{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}