:root{--bg: #0b1221;--panel: #0f192f;--panel-strong: #0a1426;--muted: #8ba2c7;--text: #e9f1ff;--border: #1f2a44;--accent: #2dd4bf;--accent-strong: #0ea5e9;--danger: #f87171;--success: #34d399;--shadow: 0 18px 50px rgba(5, 9, 20, .35)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 20%,#0f223d,#0a1224 45%),radial-gradient(circle at 85% 10%,#13253f,#0a1224 40%),radial-gradient(circle at 50% 80%,#111f35,#0a1224 35%),#0a1224;color:var(--text);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:1.4}a{color:inherit;text-decoration:none}#root{min-height:100vh}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:linear-gradient(90deg,#112d5d80,#1e293b66);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}.brand{display:flex;flex-direction:column;gap:4px}.brand-title{font-weight:700;font-size:18px;letter-spacing:.02em}.brand-subtitle{color:var(--muted);font-size:12px}.user-meta{display:flex;align-items:center;gap:12px;color:var(--muted)}.user-email{font-weight:600;color:var(--text)}.nav-tabs{display:flex;gap:12px;padding:14px 24px;background:#ffffff05;border-bottom:1px solid var(--border)}.tab{padding:10px 16px;border-radius:12px;border:1px solid var(--border);color:var(--muted);transition:all .2s ease}.tab.active{background:linear-gradient(135deg,#2dd4bf26,#0ea5e92e);color:var(--text);border-color:#2dd4bf59}.tab.disabled{opacity:.5;cursor:not-allowed}.page-container{padding:28px;flex:1}.page{background:#0d1627d9;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow);max-width:1280px;margin:0 auto;width:100%}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted);margin:0 0 4px}.page h2{margin:0}.page-loading{display:flex;align-items:center;gap:12px;color:var(--muted);padding:24px}.loader{width:16px;height:16px;border:2px solid rgba(45,212,191,.35);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}.auth-card{width:min(960px,100%);display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#0d1627d9;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.auth-hero{padding:32px;background:linear-gradient(180deg,#2dd4bf2e,#0ea5e924);border-right:1px solid var(--border)}.auth-hero h1{margin:12px 0 8px;font-size:32px}.auth-hero p{margin:0;color:var(--muted)}.auth-form{padding:32px;display:flex;flex-direction:column;gap:14px}.form-field{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}.form-field input,.form-field select{background:var(--panel-strong);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font-size:15px}.form-field input:focus,.form-field select:focus{outline:2px solid rgba(45,212,191,.5);border-color:#2dd4bf66}.checkbox-field{display:flex;align-items:center;gap:8px;color:var(--text)}.primary-button,.ghost-button{padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600;color:var(--text);background:transparent;transition:all .2s ease}.primary-button{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#04101f;box-shadow:0 10px 30px #0ea5e959}.primary-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.ghost-button{border-color:var(--border);color:var(--text);background:#ffffff05}.ghost-button.small{padding:8px 12px;font-size:13px}.ghost-button:hover{border-color:#2dd4bf73}.ghost-button.danger{border-color:#f8717159;color:#fca5a5}.table-wrapper{border:1px solid var(--border);border-radius:16px;overflow-x:auto;overflow-y:hidden}.camera-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,360px));gap:16px;justify-content:flex-start}.camera-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;background:linear-gradient(155deg,#2dd4bf14,#0ea5e90d),#ffffff03;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.camera-card:hover{border-color:#2dd4bf73;box-shadow:0 24px 60px #00000073}.card-media{position:relative;aspect-ratio:16 / 9;background:#030712;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .2s ease}.card-media:hover img{transform:scale(1.03)}.card-media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.45))}.card-media-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px;pointer-events:none;align-items:flex-start}.status-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);color:#f8fafc;background:#050d1c8c;box-shadow:0 16px 40px #00000040;align-self:flex-end}.status-chip.ok{border-color:#34d39973;color:#bbf7d0}.status-chip.muted{color:#cbd5f5;border-color:#ffffff14}.media-hint{align-self:flex-start;padding:6px 10px;border-radius:10px;background:#00000073;color:#cbd5f5;font-size:12px;letter-spacing:.02em;margin-top:auto}.camera-card-body{padding:16px;display:flex;flex-direction:column;gap:12px}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.card-title{margin:0}.url-chip{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:13px;color:#c7d2fe;padding:10px 12px;background:#0f172a99;border:1px dashed var(--border);border-radius:12px;word-break:break-all}.card-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.status-value{display:inline-flex;align-items:center;gap:8px}.card-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}.glass-pill{box-shadow:inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}.data-table th{font-weight:600;color:var(--muted);background:#ffffff03}.data-table tr:last-child td{border-bottom:none}.data-table.hoverable tr:hover{background:#2dd4bf0f}.data-table .rtsp-column,.data-table .api-column{max-width:200px;width:200px;white-space:normal;word-break:break-all;overflow-wrap:anywhere}.data-table .rtsp-column *{word-break:break-all;overflow-wrap:anywhere}@media (max-width: 1200px){.data-table .rtsp-column,.data-table .api-column{display:none}}.monitoring-table-wrapper{max-width:1280px;margin:0 auto}.data-table.monitoring-table{font-size:14px}.data-table.monitoring-table th,.data-table.monitoring-table td{padding:10px 12px}.data-table.compact th,.data-table.compact td{padding:10px;font-size:13px}.table-filter-row{background:#ffffff05}.table-filter-row input,.table-filter-row select{width:100%;background:var(--panel-strong);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 8px;font-size:12px}.table-filter-row .table-filter{display:grid;gap:6px}.table-filter.filter-inline{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.with-clear{padding-right:28px}.input-with-clear{position:relative}.input-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px}.table-loading-row td{border-bottom:none}.table-loader{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.table-loader .loader.small{width:18px;height:18px;border-width:3px}.monitoring-thumb{width:140px;height:auto;max-height:140px;object-fit:contain;border-radius:8px;border:1px solid var(--border)}.monitoring-thumb.plate-thumb{width:90px;height:auto;max-height:90px}.monitoring-thumb.vehicle-thumb{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .12s ease}.thumb-wrapper{display:inline-flex;position:relative;overflow:visible;width:140px;height:140px;align-items:center;justify-content:center;border-radius:8px}.thumb-wrapper:hover .vehicle-thumb{position:absolute;z-index:20;transform:scale(2);max-width:320px;max-height:320px;width:100%;height:100%}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:transparent;border:1.5px solid;flex-direction:column;align-items:flex-start}.status-badge.allowed{border-color:#22c55e}.status-badge.blocked{border-color:#f87171}.status-badge.neutral{border-color:#9ca3af}.lists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}.lists-grid.modern{gap:20px}.list-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 14px 38px #00000040}.list-card.glass{background:linear-gradient(135deg,#2dd4bf0f,#0ea5e914),var(--panel-strong);border:1px solid rgba(255,255,255,.06)}.list-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}.list-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.list-form input{min-width:220px;background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;font-size:14px}.data-table.subdued th,.data-table.subdued td{background:transparent}.data-table.compact{border-radius:12px;overflow:hidden}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.stat-card-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.stat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.stat-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#ffffff05}.stat-list .pill.small-pill{padding:4px 8px;font-size:12px}.stat-row-right{display:flex;align-items:center;gap:10px}.stats-section{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}.section-header h4{margin:0}.section-header p{margin:4px 0 0}.stat-row{position:relative}.stat-meta{display:flex;flex-direction:column;gap:2px}.thumb-preview{width:70px;height:48px;overflow:hidden;border-radius:8px;border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease}.thumb-preview img{width:100%;height:100%;object-fit:cover;transition:transform .18s ease}.stat-row .thumb-preview{margin-left:auto;position:relative}.bar-row{gap:8px}.bar{flex:1;height:10px;border-radius:999px;background:#ffffff0d;overflow:hidden;border:1px solid var(--border)}.bar-fill{height:100%;background:linear-gradient(135deg,var(--accent),var(--accent-strong));transition:width .3s ease}.heatmap-card .heatmap-grid{display:flex;flex-direction:column;gap:6px}.heatmap-row{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:6px}.heatmap-label{font-size:12px;color:var(--muted);text-align:right}.heatmap-cells{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}.heatmap-cell{display:block;height:18px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-radius:3px;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px}.heatmap-legend{margin-top:6px}.heatmap-hours{display:grid;grid-template-columns:32px repeat(24,minmax(0,1fr));align-items:center;gap:6px 2px;margin-left:32px}.heatmap-hours span{text-align:center;display:flex;align-items:center;justify-content:center}.full-width-input{width:100%}.heatmap-count{pointer-events:none;line-height:1}.heatmap-tooltip{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:var(--shadow);z-index:50;min-width:220px}.list-tooltip{max-width:260px}.tooltip-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}.tooltip-list li{display:flex;justify-content:space-between;align-items:center;gap:10px}.tooltip-thumb{width:64px;height:40px;border:1px solid var(--border);border-radius:6px;overflow:hidden}.tooltip-thumb img{width:100%;height:100%;object-fit:cover}.stat-total{font-size:36px;font-weight:700;margin:10px 0 4px}} .monitoring-header{align-items:flex-start;gap:16px}.monitoring-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.monitoring-actions.center{justify-content:center}.monitoring-actions .form-field.inline{display:inline-flex;align-items:center;gap:8px}.resource-card{display:flex;flex-direction:column;gap:6px}.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.resource-row{display:flex;align-items:center;gap:10px}.resource-label{width:60px;font-size:12px;color:var(--muted);font-weight:600}.resource-bar{position:relative;flex:1;height:8px;background:var(--panel-strong);border-radius:999px;overflow:hidden}.resource-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--accent);transition:width .3s ease}.resource-value{min-width:78px;font-size:12px;text-align:right;display:flex;flex-direction:column;gap:2px}.resource-badges{display:flex;flex-wrap:wrap;gap:6px}.resource-badge{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#ffffff0a;font-size:11px;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace}.resource-meta{font-size:11px;color:var(--muted)}.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.02em}.pill.success{background:#34d39926;color:#86efac}.pill.muted{background:#ffffff0d;color:var(--muted)}.pill.accent{background:#0ea5e926;color:#7dd3fc}.pill.danger-pill{background:#f871712e;color:#fecdd3}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted)}.status-dot.ok{background:#34d399}.status-dot.error{background:#f87171}.status-dot.unknown{background:var(--muted)}.muted-text{color:var(--muted)}.muted-text.small{font-size:12px}.info-box{padding:12px 14px;background:#ffffff08;border:1px solid var(--border);border-radius:12px;color:var(--muted);margin:12px 0}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:16px;margin-bottom:16px;background:#ffffff05;border:1px solid var(--border);border-radius:14px}.filters-actions{display:flex;align-items:flex-end;gap:8px;justify-content:flex-end}.pagination{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#ffffff05;border-top:1px solid var(--border)}.empty-state{display:flex;align-items:center;gap:12px;padding:18px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#040a16a6;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}.modal{background:var(--panel-strong);border:1px solid var(--border);border-radius:16px;padding:20px;width:min(640px,100%);box-shadow:var(--shadow)}.modal.wide{width:min(960px,100%)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.stack{display:flex;flex-direction:column;gap:12px}.error-box,.success-box{padding:12px 14px;border-radius:12px;font-size:14px;margin:8px 0}.error-box{background:#f871711f;color:#fecdd3;border:1px solid rgba(248,113,113,.25)}.success-box{background:#34d3991f;color:#bbf7d0;border:1px solid rgba(52,211,153,.25)}.stream-modal{width:min(1180px,100%);background:linear-gradient(145deg,#2dd4bf0f,#0ea5e914),var(--panel-strong);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 28px 68px #0000008c}.stream-modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}.stream-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}.stream-title{margin:0}.stream-header-actions{display:flex;align-items:center;gap:10px}.stream-layout{display:flex;flex-direction:column;gap:16px}.stream-frame{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;aspect-ratio:16 / 9;min-height:360px;background:radial-gradient(circle at 20% 20%,rgba(45,212,191,.08),transparent 40%),#030712;box-shadow:inset 0 0 24px #00000073}.stream-frame img{width:100%;height:100%;object-fit:contain;display:block;background:#000}.live-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#ef444429;color:#fecdd3;border:1px solid rgba(248,113,113,.35);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 16px 40px #ef44441f}.live-chip.floating{position:absolute;top:14px;left:14px}.live-dot{width:10px;height:10px;background-color:#ef4444;border-radius:50%;box-shadow:0 0 #ef4444a6;animation:livePulse 1.8s ease-out infinite}@keyframes livePulse{0%{box-shadow:0 0 #ef4444b3}60%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.stream-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.meta-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:#ffffff08;box-shadow:inset 0 1px #ffffff05}.meta-card.full{grid-column:1 / -1}.stream-url{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:13px;word-break:break-all;color:#c7d2fe;padding:10px 12px;border-radius:10px;background:#0f172a99;border:1px dashed var(--border)}.status-pill{display:inline-flex;align-items:center;gap:8px}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.detail-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.detail-value{font-weight:600}.clickable{cursor:pointer}.toast{position:fixed;bottom:20px;right:20px;padding:10px 14px;background:#0ea5e926;border:1px solid rgba(14,165,233,.4);border-radius:12px;color:#bfe5ff;box-shadow:var(--shadow)}.auth-card{grid-template-columns:1.2fr 1fr}@media (max-width: 900px){.auth-card{grid-template-columns:1fr}.auth-hero{border-right:none;border-bottom:1px solid var(--border)}.stream-modal-header{flex-direction:column;align-items:flex-start}.stream-header-actions{width:100%;justify-content:space-between}.stream-layout{gap:12px}.stream-frame{min-height:240px}}@media (max-width: 720px){.nav-tabs{flex-wrap:wrap}.page-container,.page{padding:16px}.filters{grid-template-columns:1fr}.page-header{align-items:flex-start}}.admin-login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f8fafc,#eef2ff);color:#0f172a}.admin-login .auth-card{max-width:840px;width:min(840px,100%);background:#fff;border:1px solid #e2e8f0;box-shadow:0 20px 60px #0f172a1f}.admin-login .auth-hero{background:linear-gradient(135deg,#1e293b,#0f172a);color:#e2e8f0;padding:32px}.admin-login .auth-hero h2{color:#fff}.admin-login .auth-form{padding:28px;background:#fff}.admin-login .form-field input{background:#f8fafc;border-color:#e2e8f0;color:#0f172a}.admin-login .primary-button{background:#0f172a;border-color:#0f172a;color:#fff}.admin-login .primary-button:hover{background:#111827;border-color:#111827}.admin-login .error-box{background:#fef2f2;border-color:#fecdd3;color:#b91c1c}