:root{--primary: #0284c7;--primary-hover: #0369a1;--primary-light: #e0f2fe;--secondary: #475569;--dark-card: #2e3033;--dark-text: #1e293b;--muted-text: #64748b;--border-color: #e2e8f0;--border-light: #f1f5f9;--bg-main: #f8fafc;--bg-card: #ffffff;--danger: #dc2626;--danger-hover: #b91c1c;--success: #059669;--success-light: #d1fae5;--warning: #d97706;--teal-badge: #0d9488;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{background-color:var(--bg-main);color:var(--dark-text);min-height:100vh;overflow-x:hidden}.app-container{display:flex;min-height:100vh}.sidebar{width:250px;background-color:#fff;border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;-webkit-user-select:none;user-select:none;height:100vh;position:sticky;top:0;overflow-y:auto}.sidebar-logo{padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-light)}.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,#0284c7,#0ea5e9);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 2px 6px #0284c74d}.logo-title{font-size:18px;font-weight:700;color:#0f172a;letter-spacing:-.5px}.logo-sub{font-size:10px;text-transform:uppercase;color:#0284c7;font-weight:600;letter-spacing:1px}.sidebar-nav{padding:12px 0;display:flex;flex-direction:column}.nav-section{display:flex;flex-direction:column;margin-bottom:4px}.nav-divider{height:1px;background-color:var(--border-color);margin:12px 16px}.nav-item{display:flex;align-items:center;gap:14px;padding:10px 20px;color:#475569;text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .15s ease;position:relative}.nav-item:hover{background-color:#f8fafc;color:#0f172a}.nav-item.active{color:#0284c7;font-weight:600;background-color:#f0f9ff}.nav-item.active .nav-icon{color:#0284c7}.nav-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3.5px;background-color:#0284c7;border-radius:0 3px 3px 0}.nav-icon{font-size:18px;width:20px;display:flex;align-items:center;justify-content:center;color:#64748b;flex-shrink:0}.main-wrapper{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{background-color:#fff;border-bottom:1px solid var(--border-color);padding:12px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}.topbar-left{display:flex;align-items:center;gap:16px}.topbar-title{font-size:20px;font-weight:700;color:#0f172a}.topbar-right{display:flex;align-items:center;gap:16px}.live-clock{font-size:13px;color:var(--muted-text);font-variant-numeric:tabular-nums;background-color:#f1f5f9;padding:6px 12px;border-radius:6px}.btn-primary{background-color:var(--primary);color:#fff;border:none;padding:9px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:0 1px 3px #0284c740}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.btn-mosaic{background-color:#1e293b;color:#fff;border:none;padding:9px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.btn-mosaic:hover{background-color:#0f172a}.page-content{padding:24px 28px;display:flex;flex-direction:column;gap:20px}.status-cards-row{display:flex;gap:14px;flex-wrap:wrap}.status-card{flex:1;min-width:170px;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px #0000000a;cursor:pointer;transition:all .15s ease}.status-card:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 3px 8px #0000000f}.status-card.selected{border-color:#0284c7;box-shadow:0 0 0 2px #0284c733}.status-label-group{display:flex;flex-direction:column}.status-card-label{font-size:11px;font-weight:600;color:#94a3b8;letter-spacing:.5px;text-transform:uppercase}.status-card-count{font-size:20px;font-weight:700;color:#1e293b}.status-icon-box{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 1px 3px #0000001a}.status-icon-box.ativada{background-color:#0ea5e9}.status-icon-box.desativada{background-color:#52525b}.status-icon-box.online{background-color:#0ea5e9}.status-icon-box.offline,.status-icon-box.instavel{background-color:#52525b}.metrics-card{background-color:#fff;border:1px solid var(--border-color);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}.metrics-table{width:100%;border-collapse:collapse;text-align:left}.metrics-table th{padding:12px 18px;font-size:13px;font-weight:600;color:#334155;background-color:#fafbfc;border-bottom:1px solid var(--border-color);white-space:nowrap}.metrics-table th .sort-arrow{font-size:10px;color:#94a3b8;margin-left:4px}.metrics-table td{padding:16px 18px;font-size:13.5px;color:#1e293b;font-weight:500;border-bottom:1px solid #f1f5f9;vertical-align:middle;white-space:nowrap}.pill-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;color:#fff}.pill-badge.teal{background-color:#0d9488}.pill-badge.excellent{background-color:#059669;padding:5px 14px;font-size:12px}.network-stat{display:inline-flex;align-items:center;gap:6px;font-weight:600}.arrow-down{color:#ef4444}.arrow-up{color:#0d9488}.table-container-card{background-color:#fff;border:1px solid var(--border-color);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}.table-toolbar{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border-color);background-color:#fff;flex-wrap:wrap}.search-input-wrapper{position:relative;flex:1;max-width:360px}.search-input-wrapper input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--border-color);border-radius:6px;font-size:13.5px;outline:none;transition:all .2s}.search-input-wrapper input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0284c726}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:14px}.table-actions{display:flex;align-items:center;gap:10px}.select-filter{padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;background-color:#fff;color:#334155;outline:none;cursor:pointer}.cameras-table{width:100%;border-collapse:collapse;text-align:left}.cameras-table th{padding:12px 18px;font-size:12.5px;font-weight:600;color:#475569;background-color:#f8fafc;border-bottom:1px solid var(--border-color);white-space:nowrap}.cameras-table td{padding:14px 18px;font-size:13px;color:#1e293b;border-bottom:1px solid #f1f5f9;vertical-align:middle;white-space:nowrap}.cameras-table tbody tr:hover{background-color:#f8fafc}.cam-name-cell{display:flex;align-items:center;gap:10px;font-weight:600}.status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.status-dot.online{background-color:#10b981;box-shadow:0 0 0 3px #10b98133}.status-dot.offline{background-color:#94a3b8}.status-dot.instavel{background-color:#f59e0b}.cam-type-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background-color:#f1f5f9;color:#475569;letter-spacing:.5px}.storage-pill,.sla-pill{background-color:#f1f5f9;color:#334155;font-weight:600;font-size:12px;padding:3px 10px;border-radius:12px;display:inline-block}.check-icon-status{color:#059669;font-size:16px;font-weight:700}.row-actions-group{display:flex;align-items:center;gap:6px}.btn-icon-action{width:32px;height:32px;border-radius:6px;border:1px solid var(--border-color);background-color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .15s}.btn-icon-action:hover{background-color:#f1f5f9;color:#0f172a;border-color:#cbd5e1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}.wizard-modal{background-color:#fff;border-radius:16px;width:100%;max-width:820px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:modalFadeIn .25s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.wizard-header{padding:24px 32px 18px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #f1f5f9}.wizard-title-group{display:flex;align-items:baseline;gap:8px}.wizard-main-title{font-size:22px;font-weight:700;color:#0f172a}.wizard-sub-title{font-size:16px;font-weight:400;color:#94a3b8}.wizard-breadcrumbs{font-size:12.5px;color:#64748b;display:flex;align-items:center;gap:6px}.wizard-breadcrumbs span.active{color:#0284c7}.wizard-steps-bar{padding:16px 32px;background-color:#f8fafc;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-color)}.step-pill{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;background-color:#e2e8f0;color:#64748b;transition:all .2s}.step-pill.active{background-color:#dbeafe;color:#0284c7}.step-pill.completed{background-color:#f1f5f9;color:#334155}.wizard-body{padding:28px 32px;min-height:280px}.form-group{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}.form-label{font-size:13px;font-weight:600;color:#334155}.form-control{width:100%;padding:11px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;outline:none;transition:all .2s;background-color:#fff}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0284c726}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.conn-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.conn-type-card{border:2px solid var(--border-color);border-radius:12px;padding:16px;cursor:pointer;display:flex;align-items:flex-start;gap:14px;transition:all .2s}.conn-type-card:hover{border-color:#cbd5e1}.conn-type-card.selected{border-color:#0284c7;background-color:#f0f9ff}.conn-type-card .conn-icon{width:40px;height:40px;border-radius:8px;background-color:#e0f2fe;color:#0284c7;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.conn-type-title{font-size:14.5px;font-weight:700;color:#0f172a}.conn-type-desc{font-size:12px;color:#64748b;margin-top:3px}.rtmp-token-box{background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}.rtmp-token-header{display:flex;align-items:center;justify-content:space-between}.rtmp-token-badge{background-color:#dbeafe;color:#0284c7;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px}.copy-input-group{display:flex;gap:8px}.copy-input-group input{font-family:monospace;font-size:13px;background-color:#fff;color:#0f172a}.btn-copy{padding:0 16px;background-color:#1e293b;color:#fff;border:none;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap}.btn-copy:hover{background-color:#0f172a}.btn-copy.copied{background-color:#059669}.plan-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.plan-selection-card{border:2px solid var(--border-color);border-radius:10px;padding:20px 24px;cursor:pointer;transition:all .2s ease;background-color:#fff}.plan-selection-card .plan-prefix{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.plan-selection-card .plan-name{font-size:18px;font-weight:700}.plan-selection-card.selected{background-color:#404040;border-color:#404040;color:#fff}.plan-selection-card.selected .plan-prefix{color:#d4d4d8}.plan-selection-card:not(.selected){border-color:#e5e7eb;color:#1e293b}.plan-selection-card:not(.selected) .plan-prefix{color:#94a3b8}.retention-days-card{border:1px solid #d1d5db;border-radius:10px;padding:16px 20px;background-color:#fff;display:flex;flex-direction:column}.retention-label{font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.retention-input-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}.retention-number-input{font-size:32px;font-weight:700;color:#111827;border:none;outline:none;width:140px}.retention-unit{font-size:20px;color:#9ca3af;font-weight:500}.retention-subtext{font-size:12px;color:#9ca3af;margin-top:4px}.consumption-forecast{text-align:right;margin-top:24px;font-size:16px;font-weight:600;color:#1e293b}.consumption-forecast strong{color:#0f172a}.wizard-footer{padding:18px 32px;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;background-color:#fff}.btn-cancel{background-color:#dc2626;color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s}.btn-cancel:hover{background-color:#b91c1c}.wizard-footer-right{display:flex;gap:12px}.btn-back{background-color:#f1f5f9;color:#475569;border:none;padding:10px 22px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s}.btn-back:hover{background-color:#e2e8f0;color:#1e293b}.btn-next{background-color:#fff;color:#1e293b;border:1px solid #0f172a;padding:10px 26px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s}.btn-next:hover{background-color:#0f172a;color:#fff}.btn-finish{background-color:#0284c7;color:#fff;border:none;padding:10px 26px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s}.btn-finish:hover{background-color:#0369a1}.mosaic-modal{background-color:#0f172a;color:#fff;border-radius:16px;width:95vw;max-width:1200px;height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}.mosaic-header{padding:16px 24px;background-color:#1e293b;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #334155}.mosaic-controls{display:flex;align-items:center;gap:12px}.grid-select-btn{padding:6px 12px;background-color:#334155;color:#e2e8f0;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}.grid-select-btn.active{background-color:#0284c7;color:#fff}.mosaic-grid{flex:1;padding:16px;display:grid;gap:12px;background-color:#0b1120;overflow-y:auto}.mosaic-grid.grid-1{grid-template-columns:1fr}.mosaic-grid.grid-2{grid-template-columns:repeat(2,1fr)}.mosaic-grid.grid-3{grid-template-columns:repeat(3,1fr)}.mosaic-grid.grid-4{grid-template-columns:repeat(4,1fr)}.camera-tile{background-color:#1e293b;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;border:1px solid #334155}.camera-tile-header{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.8)}.live-badge{background-color:#dc2626;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.5px}.live-badge:before{content:"";width:6px;height:6px;background-color:#fff;border-radius:50%;animation:pulseLive 1.5s infinite}@keyframes pulseLive{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.camera-stream-canvas{width:100%;height:100%;object-fit:cover}.dvr-timeline-bar{background-color:#1e293b;padding:16px 20px;border-top:1px solid #334155}.timeline-ruler{position:relative;height:48px;background-color:#0f172a;border-radius:8px;overflow:hidden;cursor:pointer}.timeline-segment{position:absolute;top:8px;bottom:8px;background-color:#059669;border-radius:2px;opacity:.85}.timeline-scrubber{position:absolute;top:0;bottom:0;width:2px;background-color:#ef4444;z-index:5}.timeline-scrubber:before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #ef4444}@media (max-width: 900px){.sidebar{display:none}.form-grid-2,.conn-type-selector,.plan-cards-grid{grid-template-columns:1fr}}