:root{--color-primary: #007AFF;--color-primary-dark: #0056CC;--color-primary-light: rgba(0, 122, 255, .12);--color-secondary: #5AC8FA;--color-success: #34C759;--color-success-bg: rgba(52, 199, 89, .12);--color-warning: #FF9500;--color-warning-bg: rgba(255, 149, 0, .12);--color-error: #FF3B30;--color-error-bg: rgba(255, 59, 48, .12);--color-info: #007AFF;--color-info-bg: rgba(0, 122, 255, .12);--color-severity-critical: #FF3B30;--color-severity-high: #FF9500;--color-severity-medium: #FFCC00;--color-severity-low: #34C759;--color-status-active: #34C759;--color-status-maintenance: #FF9500;--color-status-offline: #FF3B30;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-md: 17px;--text-lg: 20px;--text-xl: 24px;--text-2xl: 28px;--text-3xl: 34px;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--z-raised: 10;--z-dropdown: 100;--z-sidebar: 200;--z-titlebar: 300;--z-modal: 400;--z-toast: 500;--sidebar-width: 240px;--sidebar-collapsed-width: 64px;--title-bar-height: 64px;--page-padding: 24px;--transition-fast: .1s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--zone-alert-bg: rgba(255, 59, 48, .06);--zone-service-bg: rgba(255, 149, 0, .06);--zone-contract-bg: rgba(0, 122, 255, .06);--zone-activity-bg: rgba(167, 139, 250, .06);--color-activity: #A78BFA;--color-activity-bg: rgba(167, 139, 250, .12)}[data-theme=light]{--bg-app: #F5F5F7;--bg-surface: #FFFFFF;--bg-card: #FFFFFF;--bg-sidebar: #FFFFFF;--bg-titlebar: #FFFFFF;--bg-input: #FFFFFF;--bg-hover: #F5F5F7;--bg-active: rgba(0, 122, 255, .1);--border: #E5E5EA;--separator: #E5E5EA;--text-primary: #1C1C1E;--text-secondary: #6E6E73;--text-tertiary: #8E8E93;--text-disabled: #C7C7CC;--text-on-primary: #FFFFFF;--nav-text: #3C3C43;--nav-icon: #6E6E73;--nav-active-text: var(--color-primary);--nav-active-bg: rgba(0, 122, 255, .1);--nav-hover-bg: #F5F5F7;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);--shadow-lg: 0 10px 30px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);--shadow-sidebar: 1px 0 0 var(--border);--overlay: rgba(0, 0, 0, .4)}[data-theme=dark]{--bg-app: #0B1120;--bg-surface: #1C1C1E;--bg-card: #2C2C2E;--bg-sidebar: #1C1C1E;--bg-titlebar: #1C1C1E;--bg-input: #2C2C2E;--bg-hover: #3A3A3C;--bg-active: rgba(0, 122, 255, .2);--border: #3A3A3C;--separator: #3A3A3C;--text-primary: #FFFFFF;--text-secondary: #8E8E93;--text-tertiary: #636366;--text-disabled: #48484A;--text-on-primary: #FFFFFF;--nav-text: #EBEBF5;--nav-icon: #8E8E93;--nav-active-text: var(--color-primary);--nav-active-bg: rgba(0, 122, 255, .2);--nav-hover-bg: #3A3A3C;--shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);--shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);--shadow-lg: 0 10px 30px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.2);--shadow-sidebar: 1px 0 0 var(--border);--overlay: rgba(0, 0, 0, .6);--zone-alert-bg: rgba(255, 59, 48, .08);--zone-service-bg: rgba(255, 149, 0, .08);--zone-contract-bg: rgba(0, 122, 255, .08);--zone-activity-bg: rgba(167, 139, 250, .08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-text-size-adjust:100%}body{height:100%;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;padding:0}ul,ol{list-style:none}table{border-collapse:collapse}fieldset{border:none;padding:0}body{font-family:var(--font-family);background:var(--bg-app);color:var(--text-primary)}.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{display:flex;flex-direction:column;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;background:var(--bg-sidebar);box-shadow:var(--shadow-sidebar);overflow:hidden;transition:width var(--transition-base),min-width var(--transition-base);position:relative;z-index:var(--z-sidebar);flex-shrink:0}.app-shell.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width)}.app-shell.sidebar-collapsed .sidebar-header{flex-direction:column;justify-content:center;align-items:center;padding:var(--space-2) 0;height:auto;min-height:var(--title-bar-height);gap:var(--space-1);overflow:visible}.app-shell.sidebar-collapsed .sidebar-logo{flex:none;justify-content:center}.app-shell.sidebar-collapsed .sidebar-logo img{width:32px;height:32px}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);height:var(--title-bar-height);border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;gap:var(--space-2)}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3);overflow:hidden;flex:1;min-width:0;text-decoration:none}.sidebar-logo img{width:40px;height:40px;object-fit:contain;flex-shrink:0;transition:filter var(--transition-base)}[data-theme=dark] .sidebar-logo img{filter:brightness(0) invert(1)}.sidebar-logo-text{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;opacity:1;max-width:160px;transition:opacity var(--transition-base),max-width var(--transition-base)}.app-shell.sidebar-collapsed .sidebar-logo-text{opacity:0;max-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-tertiary);flex-shrink:0;background:none;border:none;box-shadow:none;padding:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.sidebar-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-footer{flex-shrink:0;padding:var(--space-2) var(--space-3);border-top:1px solid var(--border)}.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-3) 0;scrollbar-width:none}.sidebar-nav::-webkit-scrollbar{display:none}.nav-section{margin-bottom:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border)}.sidebar-nav>div:first-child .nav-section{margin-top:0;padding-top:0;border-top:none}.nav-section-label{display:block;padding:var(--space-2) var(--space-4) var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;opacity:1;transition:opacity var(--transition-base)}.app-shell.sidebar-collapsed .nav-section-label{opacity:0}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);margin:1px var(--space-2);border-radius:var(--radius-md);color:var(--nav-text);font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);text-decoration:none;position:relative}.nav-item:hover{background:var(--nav-hover-bg)}.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text)}.nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:inherit}.nav-label{overflow:hidden;opacity:1;max-width:160px;transition:opacity var(--transition-base),max-width var(--transition-base)}.app-shell.sidebar-collapsed .nav-label{opacity:0;max-width:0}.app-shell.sidebar-collapsed .nav-item{justify-content:center;padding:var(--space-2)}.nav-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--color-error);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-bold);margin-left:auto;flex-shrink:0;opacity:1;transition:opacity var(--transition-base)}.app-shell.sidebar-collapsed .nav-item-badge{opacity:0}.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold);flex-shrink:0;-webkit-user-select:none;user-select:none}.avatar-sm{width:28px;height:28px;font-size:var(--text-xs)}.avatar-lg{width:48px;height:48px;font-size:var(--text-md)}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}.title-bar{display:flex;align-items:center;justify-content:space-between;height:var(--title-bar-height);padding:0 var(--space-6);background:var(--bg-titlebar);border-bottom:1px solid var(--border);flex-shrink:0;z-index:var(--z-titlebar);gap:var(--space-4)}.title-bar-left{display:flex;align-items:baseline;gap:var(--space-3);min-width:0;flex:1}.page-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);white-space:nowrap}.page-breadcrumb{font-size:var(--text-sm);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-breadcrumb:not(:empty):before{content:"/";margin-right:var(--space-2);color:var(--text-disabled)}.title-bar-right{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}.search-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-full);min-width:220px;transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.search-bar:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.search-bar.hidden{display:none}.search-bar input{flex:1;border:none;background:transparent;outline:none;font-size:var(--text-sm);color:var(--text-primary)}.search-bar input::placeholder{color:var(--text-tertiary)}.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--text-secondary);background:none;border:none;box-shadow:none;padding:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);flex-shrink:0}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.icon-btn.active{background:var(--bg-active);color:var(--color-primary)}.icon-btn .dot-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--color-error);border-radius:var(--radius-full);border:2px solid var(--bg-titlebar)}.icon-btn .count-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;background:var(--color-error);color:#fff;font-size:10px;font-weight:var(--weight-bold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-titlebar)}.title-bar-spacer{flex:1}.title-bar-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--text-secondary);transition:background var(--transition-fast),color var(--transition-fast);flex-shrink:0}.title-bar-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.profile-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast);position:relative;width:auto;height:36px}.profile-btn:hover{background:var(--bg-hover)}.profile-btn-name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);white-space:nowrap}.profile-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--page-padding);background:var(--bg-app)}.page-content h1{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);margin-bottom:var(--space-4)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(340px,23%),1fr));gap:var(--space-4)}.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}@media(max-width:1200px){.card-grid-4,.card-grid-3{grid-template-columns:repeat(2,1fr)}}.mobile-menu-btn{display:none}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:calc(var(--z-sidebar) - 1)}@media(max-width:768px){.card-grid-4,.card-grid-3,.card-grid-2,.card-grid{grid-template-columns:1fr}.page-title{font-size:var(--text-lg)}.page-content{padding:var(--space-4)}.title-bar{padding:0 var(--space-4)}.profile-btn-name{display:none}.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translate(-100%);transition:transform var(--transition-base);z-index:var(--z-sidebar);width:var(--sidebar-width)!important;min-width:var(--sidebar-width)!important}.sidebar.mobile-open{transform:translate(0);box-shadow:var(--shadow-lg)}.sidebar-toggle{display:none}.mobile-menu-btn{display:flex}.app-shell.sidebar-collapsed .sidebar .nav-label,.app-shell.sidebar-collapsed .sidebar .nav-section-label,.app-shell.sidebar-collapsed .sidebar .sidebar-logo-text{opacity:1;max-width:160px}.app-shell.sidebar-collapsed .sidebar .nav-item{justify-content:flex-start;padding:var(--space-2) var(--space-3)}}.notification-panel{position:fixed;top:var(--title-bar-height);right:0;width:360px;height:calc(100vh - var(--title-bar-height));background:var(--bg-surface);border-left:1px solid var(--border);z-index:var(--z-dropdown);display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--transition-base);box-shadow:var(--shadow-lg)}.notification-panel.open{transform:translate(0)}.notification-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}.notification-panel-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary)}.notification-list{flex:1;overflow-y:auto;padding:var(--space-2) 0}.notification-item{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-5);cursor:pointer;transition:background var(--transition-fast)}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-active)}.notification-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-primary);flex-shrink:0;margin-top:6px}.notification-item-body{flex:1;min-width:0}.notification-item-title{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);margin-bottom:2px}.notification-item-msg{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-item-time{font-size:var(--text-xs);color:var(--text-tertiary)}.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-12) var(--space-6);color:var(--text-tertiary);font-size:var(--text-sm)}.profile-btn-wrap{position:relative}.profile-dropdown{position:absolute;top:calc(var(--title-bar-height) - var(--space-2));right:var(--space-4);width:230px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast)}.profile-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}.profile-dropdown-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--border)}.profile-dropdown-info{min-width:0}.profile-dropdown-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-dropdown-email{font-size:var(--text-xs);color:var(--text-secondary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-dropdown-menu{padding:var(--space-2) 0}.profile-dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast);text-decoration:none;width:100%;text-align:left}.profile-dropdown-item:hover{background:var(--bg-hover)}.profile-dropdown-item.danger{color:var(--color-error)}.profile-dropdown-divider{height:1px;background:var(--border);margin:var(--space-1) 0}.standalone-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-app);font-family:var(--font-family);color:var(--text-primary);padding:var(--space-6)}.standalone-card{width:100%;max-width:400px;background:var(--bg-surface);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-4);height:36px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;border:1px solid transparent;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;line-height:1}.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border-color:var(--border)}.btn-secondary:hover{background:var(--bg-hover)}.btn-danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn-danger:hover{filter:brightness(.9)}.btn-warning{background:var(--color-warning);color:#fff;border-color:var(--color-warning)}.btn-warning:hover{filter:brightness(.9)}.btn-ghost{background:transparent;color:var(--color-primary)}.btn-ghost:hover{background:var(--color-primary-light)}.btn-sm{height:28px;padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-lg{height:44px;padding:0 var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-full{width:100%}.card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);gap:var(--space-3)}.card-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary)}.card-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin-top:2px}.card-body{padding:var(--space-5)}.card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border)}.card-clickable{cursor:pointer;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.card-clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.stat-card{display:flex;flex-direction:column;padding:var(--space-5);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);gap:var(--space-2)}.stat-card-clickable{cursor:pointer;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.stat-card-clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.stat-card-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-1)}.stat-card-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.stat-card-value{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1}.stat-card-sub{font-size:var(--text-sm);color:var(--text-secondary)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;line-height:1.4}.badge-active,.badge-online{background:var(--color-success-bg);color:var(--color-success)}.badge-maintenance,.badge-warn{background:var(--color-warning-bg);color:var(--color-warning)}.badge-offline,.badge-error{background:var(--color-error-bg);color:var(--color-error)}.badge-info{background:var(--color-info-bg);color:var(--color-info)}.badge-neutral{background:var(--bg-hover);color:var(--text-secondary)}.badge-critical{background:var(--color-error);color:#fff}.badge-high{background:var(--color-warning-bg);color:var(--color-warning)}.badge-medium{background:#ffcc0026;color:#960}.badge-low{background:var(--color-success-bg);color:var(--color-success)}[data-theme=dark] .badge-medium{color:var(--color-severity-medium)}.form-group{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4)}.form-group:last-child{margin-bottom:0}label,.form-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary)}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input:not([type]),select,textarea{width:100%;padding:var(--space-2) var(--space-3);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-family);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}textarea{min-height:100px;resize:vertical;line-height:var(--line-height-normal)}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-8);cursor:pointer}.form-hint{font-size:var(--text-xs);color:var(--text-tertiary)}.form-error{font-size:var(--text-xs);color:var(--color-error)}input.is-error,select.is-error,textarea.is-error{border-color:var(--color-error)}input.is-error:focus,select.is-error:focus,textarea.is-error:focus{box-shadow:0 0 0 3px var(--color-error-bg)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}.data-table{width:100%;font-size:var(--text-sm);color:var(--text-primary)}.data-table thead{background:var(--bg-hover)}.data-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--weight-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);white-space:nowrap;border-bottom:1px solid var(--border)}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:var(--bg-hover)}.table-actions{display:flex;gap:var(--space-2);align-items:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);opacity:0;pointer-events:none;transition:opacity var(--transition-base)}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--bg-surface);border-radius:var(--radius-xl);width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);transform:scale(.96) translateY(8px);transition:transform var(--transition-base)}.modal-overlay.open .modal{transform:scale(1) translateY(0)}.modal-lg{max-width:720px}.modal-xl{max-width:960px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);flex-shrink:0}.modal-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}.modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:background var(--transition-fast),color var(--transition-fast)}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-body{padding:var(--space-6);overflow-y:auto;flex:1}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);flex-shrink:0}.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-4);line-height:var(--line-height-normal)}.alert-success{background:var(--color-success-bg);color:var(--color-success)}.alert-error{background:var(--color-error-bg);color:var(--color-error)}.alert-warning{background:var(--color-warning-bg);color:var(--color-warning)}.alert-info{background:var(--color-info-bg);color:var(--color-info)}@keyframes sv-spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--color-primary);border-radius:50%;animation:sv-spin .7s linear infinite;flex-shrink:0}.spinner-sm{width:16px;height:16px}.spinner-lg{width:32px;height:32px;border-width:3px}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;border-radius:inherit;z-index:var(--z-raised)}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-12) var(--space-6);color:var(--text-secondary);font-size:var(--text-sm)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-12) var(--space-6);text-align:center}.empty-state-icon{color:var(--text-tertiary);margin-bottom:var(--space-2)}.empty-state-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary)}.empty-state-text{font-size:var(--text-sm);color:var(--text-secondary);max-width:320px}.dropdown{position:relative;display:inline-flex}.dropdown-menu{position:absolute;top:calc(100% + var(--space-1));right:0;min-width:180px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);overflow:hidden;opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast)}.dropdown-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}.dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast);text-decoration:none;border:none;background:none;width:100%;text-align:left}.dropdown-item:hover{background:var(--bg-hover)}.dropdown-item.danger{color:var(--color-error)}.dropdown-divider{height:1px;background:var(--border);margin:var(--space-1) 0}.toast-container{position:fixed;display:flex;flex-direction:column;gap:var(--space-2);z-index:var(--z-toast);pointer-events:none}.toast-container-bottom-right{bottom:var(--space-6);right:var(--space-6);align-items:flex-end}.toast-container-top-center{top:var(--space-6);left:50%;transform:translate(-50%);align-items:center}.toast{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:280px;max-width:400px;pointer-events:all;animation:sv-toast-in var(--transition-base)}.toast-error{background:var(--color-error-bg);border:2px solid var(--color-error);min-width:320px;max-width:480px;padding:var(--space-4) var(--space-5);box-shadow:0 8px 32px #ff3b3040,var(--shadow-lg);animation:sv-toast-in-top var(--transition-base)}.toast-error .toast-icon{color:var(--color-error)}.toast-error .toast-message{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-error)}.toast-warning{background:var(--color-warning-bg);border:2px solid var(--color-warning);padding:var(--space-4) var(--space-5);box-shadow:0 8px 32px #ff950033,var(--shadow-lg);animation:sv-toast-in-top var(--transition-base)}.toast-warning .toast-icon{color:var(--color-warning)}.toast-warning .toast-message{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-warning)}.toast-success .toast-icon{color:var(--color-success)}.toast-info .toast-icon{color:var(--color-primary)}@keyframes sv-toast-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes sv-toast-in-top{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.toast-icon{flex-shrink:0;margin-top:2px}.toast-body{flex:1;min-width:0}.toast-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}.toast-message{font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px}.toast-dismiss{flex-shrink:0;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast)}.toast-dismiss:hover{color:var(--text-primary);background:#0000000f}.toast-field-errors{list-style:none;margin:var(--space-2) 0 0;padding:0;font-size:var(--text-xs)}.toast-field-errors li{padding:2px 0;color:var(--text-primary)}.toast-field-errors li strong{color:var(--color-error)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);gap:var(--space-3)}.section-title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}.section-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-1)}.divider{height:1px;background:var(--border);margin:var(--space-4) 0}.dt-wrapper{display:flex;flex-direction:column;gap:var(--space-3)}.dt-toolbar{display:flex;align-items:center;flex-wrap:wrap}.dt-toolbar-start{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;flex:1}.dt-search-wrap{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);height:36px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-tertiary);cursor:text;flex:1;min-width:160px;max-width:300px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast)}.dt-search-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);color:var(--color-primary)}.dt-search-icon{flex-shrink:0}.dt-search{flex:1;border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:auto!important;width:100%;min-width:0;font-size:var(--text-sm);color:var(--text-primary);outline:none}.dt-search:focus{border-color:transparent!important;box-shadow:none!important}.dt-filter{height:36px!important;padding-top:0!important;padding-bottom:0!important;width:auto!important;min-width:130px}.dt-bulk-bar{display:none;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-primary-light);border-radius:var(--radius-md);border:1px solid rgba(0,122,255,.3)}.dt-bulk-count{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary);flex:1}.dt-bulk-actions{display:flex;gap:var(--space-2)}.dt-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.dt-sortable:hover{color:var(--text-primary)}.dt-sort-arrow{display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%238E8E93' d='M12 3 8 8h3v8h2V8h3zm0 18 4-5h-3V8h-2v8H8z'/%3E%3C/svg%3E")}.dt-sort-asc .dt-sort-arrow{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23007AFF' d='M12 3 8 8h3v13h2V8h3z'/%3E%3C/svg%3E")}.dt-sort-desc .dt-sort-arrow{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23007AFF' d='M12 21 16 16h-3V3h-2v13H8z'/%3E%3C/svg%3E")}.dt-th-check,.dt-td-check{width:44px!important;padding-left:var(--space-4)!important;padding-right:0!important}input.dt-chk-all,input.dt-chk-row{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary);display:block;margin:0}.dt-row-selected{background:var(--color-primary-light)!important}.dt-empty{text-align:center!important;color:var(--text-secondary)!important;padding:var(--space-12) var(--space-4)!important;font-size:var(--text-sm)!important}.dt-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);min-height:32px}.dt-page-info{font-size:var(--text-sm);color:var(--text-secondary);margin-right:var(--space-2)}.dt-page-btns{display:flex;gap:var(--space-1);align-items:center}.dt-page-gap{font-size:var(--text-sm);color:var(--text-secondary);padding:0 2px}.dt-row-actions-cell{width:48px;text-align:center;padding-left:var(--space-2)!important;padding-right:var(--space-2)!important}.data-table,.table-container{overflow:visible}.text-primary-c{color:var(--text-primary)!important}.text-secondary-c{color:var(--text-secondary)!important}.text-success-c{color:var(--color-success)!important}.text-warning-c{color:var(--color-warning)!important}.text-error-c{color:var(--color-error)!important}.text-brand{color:var(--color-primary)!important}.font-medium{font-weight:var(--weight-medium)!important}.font-semibold{font-weight:var(--weight-semibold)!important}.font-bold{font-weight:var(--weight-bold)!important}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-4{gap:var(--space-4)}.flex-1{flex:1}.min-w-0{min-width:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.w-full{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.staging-ribbon{position:fixed;bottom:32px;left:-40px;width:150px;height:24px;background:var(--color-warning);color:#000;font-size:10px;font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;z-index:var(--z-toast);pointer-events:none;transform:rotate(45deg);box-shadow:0 2px 4px #0003}.maintenance-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-surface);z-index:9999;display:flex;align-items:center;justify-content:center}.maintenance-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding:var(--space-8);color:var(--text-primary)}.maintenance-overlay-content h1{font-size:var(--text-2xl);font-weight:var(--weight-bold)}.maintenance-overlay-content p{font-size:var(--text-base);color:var(--text-secondary);max-width:420px}.maintenance-time{font-size:var(--text-sm);color:var(--text-tertiary)}.maintenance-spin{animation:sv-spin 1.5s linear infinite}.maintenance-banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-warning-bg);color:var(--color-warning);font-size:var(--text-sm);font-weight:var(--weight-medium)}.maintenance-banner span{flex:1}.maintenance-banner-dismiss{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-sm);color:var(--color-warning);transition:background var(--transition-fast)}.maintenance-banner-dismiss:hover{background:#0000001a}.version-display{position:relative;font-size:var(--text-xs);width:100%}.version-display-toggle{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:none;border:none;color:var(--text-tertiary);font-size:var(--text-xs);cursor:pointer;width:100%;overflow:hidden;transition:color var(--transition-fast),background var(--transition-fast)}.version-display-toggle:hover{color:var(--text-secondary);background:var(--bg-hover)}.version-display-short{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-shell.sidebar-collapsed .version-display-short{display:none}.version-display-details{position:absolute;bottom:calc(100% + var(--space-1));left:0;min-width:180px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-2) var(--space-3);z-index:100}.version-display-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-1) 0;font-size:var(--text-xs);color:var(--text-secondary)}.version-display-row .monospace{font-family:var(--font-mono, monospace)}.version-display-row .text-muted{color:var(--text-tertiary);font-style:italic}.datatable{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.datatable-toolbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.datatable-header-actions{margin-left:auto}.datatable-search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-tertiary);min-width:160px;max-width:280px;height:32px;flex:1;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.datatable-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.datatable-search input{flex:1;border:none;background:transparent;outline:none;font-size:var(--text-sm);color:var(--text-primary);min-width:0}.datatable-search input::placeholder{color:var(--text-tertiary)}.datatable-filter{height:32px;padding:0 var(--space-2);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);min-width:0;flex-shrink:0;cursor:pointer;transition:border-color var(--transition-fast)}.datatable-filter:hover{border-color:var(--color-primary)}.datatable-filter:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);outline:none}@media(max-width:600px){.datatable-toolbar{flex-wrap:wrap}.datatable-search{min-width:100%}}.datatable-bulk{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}.datatable-bulk-count{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary)}.datatable-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card)}.datatable-scroll table{width:100%;font-size:var(--text-sm);color:var(--text-primary)}.datatable-scroll thead{background:var(--bg-hover)}.datatable-scroll th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--weight-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);white-space:nowrap;border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none}.datatable-scroll th.sortable{cursor:pointer}.datatable-scroll th.sortable:hover{color:var(--text-primary)}.datatable-scroll th svg{display:inline-block;vertical-align:middle;margin-left:4px}.datatable-scroll td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle}.datatable-scroll tbody tr:last-child td{border-bottom:none}.datatable-scroll tbody tr:hover{background:var(--bg-hover)}.datatable-scroll tbody tr.clickable{cursor:pointer}.datatable-scroll tbody tr.selected{background:var(--color-primary-light)}.datatable-check-col{width:44px;padding-left:var(--space-4)!important;padding-right:0!important}.datatable-check-col input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.datatable-empty{text-align:center;color:var(--text-secondary);padding:var(--space-12) var(--space-4)!important;font-size:var(--text-sm)}.datatable-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.datatable-info{font-size:var(--text-sm);color:var(--text-secondary)}.datatable-pages{display:flex;gap:var(--space-2)}.datatable-pages button{padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-primary);background:var(--bg-card);transition:background var(--transition-fast),border-color var(--transition-fast)}.datatable-pages button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--color-primary)}.datatable-pages button:disabled{opacity:.4;cursor:not-allowed}.webrtc-player-wrap,.hls-player-wrap{position:relative;background:#000;border-radius:var(--radius-lg);overflow:hidden}.webrtc-player,.hls-player{width:100%;display:block;aspect-ratio:16 / 9;background:#000}.player-status-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);background:#000c;color:#fff;font-size:var(--text-sm)}.player-stats-overlay{position:absolute;top:var(--space-2);left:var(--space-2);right:var(--space-2);background:#000000bf;color:#0f0;font:11px/1.5 monospace;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);pointer-events:none;display:flex;flex-direction:column;gap:2px}.camera-view-layout{display:grid;grid-template-columns:1fr 290px;gap:var(--space-4)}@media(max-width:768px){.camera-view-layout{grid-template-columns:1fr}}.camera-sidebar .sidebar-section{margin-bottom:var(--space-4)}.sidebar-section-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}.camera-info-rows{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}.camera-info-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}.camera-info-label{color:var(--text-secondary)}.camera-info-value{font-weight:var(--weight-medium)}.camera-info-secondary{color:var(--text-secondary);font-weight:400}.camera-rename-btn{width:100%;justify-content:center}.camera-rename-form{display:flex;gap:var(--space-1);align-items:center}.camera-rename-form .input{flex:1;min-width:0}.camera-toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);margin-bottom:var(--space-3);cursor:pointer}.toggle-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:24px;border-radius:12px;background:var(--border);position:relative;cursor:pointer;transition:background var(--transition-fast);flex-shrink:0}.toggle-checkbox:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--transition-fast);box-shadow:0 1px 3px #0003}.toggle-checkbox:checked{background:var(--color-primary)}.toggle-checkbox:checked:after{transform:translate(20px)}.motion-alert-fields{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3)}.motion-alert-fields .form-label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);color:var(--text-secondary)}.motion-alert-actions{display:flex;gap:var(--space-2)}.camera-control-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border);margin-top:var(--space-3);flex-wrap:wrap}.control-bar-left{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.control-bar-right{display:flex;align-items:center;gap:var(--space-2)}.control-bar-live{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-success)}.control-bar-clock{font-size:var(--text-xs);color:var(--text-secondary)}.input-sm{height:28px;padding:0 var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-sm)}.stream-mode-toggle{display:inline-flex;gap:var(--space-1)}.page-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.page-header h1{font-size:var(--text-lg);font-weight:var(--weight-semibold);flex:1}.page-header-actions{display:flex;align-items:center;gap:var(--space-2)}.ptz-controls{text-align:center}.ptz-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-2)}.ptz-grid{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:4px;justify-content:center}.ptz-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);font-size:var(--text-base);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast),transform var(--transition-fast)}.ptz-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.ptz-btn:active{transform:scale(.92)}.ptz-center{cursor:default;background:var(--bg-hover);pointer-events:none}.ptz-zoom-row{display:flex;gap:var(--space-2);justify-content:center}.ptz-home-controls{border-top:1px solid var(--border);padding-top:var(--space-2)}.ptz-countdown{display:flex;align-items:center;justify-content:center;gap:var(--space-1);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-warning)}.camera-grid{display:grid;gap:var(--space-4)}.grid-1{grid-template-columns:1fr}.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}@media(min-width:1200px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}.camera-grid-cell{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000}.camera-grid-label{position:absolute;bottom:var(--space-3);left:var(--space-3);background:#000000b3;color:#fff;font-size:var(--text-sm);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);z-index:1;letter-spacing:.005em}.camera-grid-actions{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;opacity:0;transition:opacity var(--transition-fast)}.camera-grid-cell:hover .camera-grid-actions{opacity:1}.camera-grid-actions .btn{background:#0009;color:#fff;border:none}.camera-grid-actions .btn:hover{background:#000000d9}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(300px,23%),1fr));gap:var(--space-4)}.card-grid.card-grid--wide{grid-template-columns:repeat(auto-fill,minmax(max(400px,30%),1fr))}.camera-card{display:flex;flex-direction:column;padding:0;cursor:pointer;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.camera-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.camera-card-header{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}.camera-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-2)}.camera-rename-row{display:flex;align-items:center;gap:var(--space-1);flex:1}.camera-rename-row input{flex:1;height:28px;font-size:var(--text-sm)}.clickable{cursor:pointer}.notification-bell{position:relative}.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:var(--radius-full);background:var(--color-error);color:#fff;font-size:10px;font-weight:var(--weight-bold);display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}.notif-dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;width:320px;max-height:400px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);display:flex;flex-direction:column;overflow:hidden}.notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);font-weight:var(--weight-semibold);font-size:var(--text-sm)}.notif-dropdown-list{overflow-y:auto;flex:1}.notif-empty{padding:var(--space-6) var(--space-4);text-align:center;color:var(--text-tertiary);font-size:var(--text-sm)}.notif-item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--transition-fast)}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--bg-hover)}.notif-item.unread{background:var(--color-info-bg)}.notif-item-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}.notif-item-body{font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notif-item-time{font-size:10px;color:var(--text-tertiary);margin-top:var(--space-1)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--bg-surface)}.auth-card{width:100%;max-width:400px;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:16px;padding:40px;box-shadow:var(--shadow-lg);animation:authFadeIn .3s ease-out}@keyframes authFadeIn{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}.auth-logo{display:flex;justify-content:center;margin:-24px 0 24px;padding:40px}.auth-logo img{height:80px;width:auto;display:block}.auth-title{font-size:22px;font-weight:var(--weight-semibold);text-align:center;margin-bottom:4px;color:var(--text-primary)}.auth-subtitle{text-align:center;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-6)}.auth-form{display:flex;flex-direction:column;gap:18px}.auth-alert{padding:11px 14px;border-radius:8px;font-size:var(--text-sm)}.auth-alert-error{background:var(--color-error-bg, rgba(255, 59, 48, .1));border:1px solid rgba(255,59,48,.3);color:var(--color-error, #ff3b30)}.auth-row{display:flex;justify-content:space-between;align-items:center}.auth-forgot{color:var(--color-primary);font-size:var(--text-xs);text-decoration:none}.auth-forgot:hover{text-decoration:underline}.auth-register{text-align:center;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-secondary)}.auth-register a{color:var(--color-primary);text-decoration:none}.auth-register a:hover{text-decoration:underline}.auth-footer{text-align:center;margin-top:var(--space-6);color:var(--text-tertiary);font-size:var(--text-xs);line-height:1.5}.auth-links{display:flex;justify-content:space-between;margin-top:var(--space-4);font-size:var(--text-sm)}.auth-links a{color:var(--color-primary);text-decoration:none}.auth-links a:hover{text-decoration:underline}@media(max-width:600px){.auth-page{padding:0;align-items:stretch}.auth-card{max-width:none;border-radius:0;padding:32px 24px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-shadow:none;border:none}}.input-with-icon{position:relative;display:flex;align-items:center}.input-with-icon input{padding-right:var(--space-10)!important}.input-icon-btn{position:absolute;right:var(--space-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-tertiary);transition:color var(--transition-fast)}.input-icon-btn:hover{color:var(--text-primary)}.form-group-inline{flex-direction:row;align-items:center}.checkbox-label{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary)}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--text-sm)}.trailer-card{display:flex;flex-direction:column;overflow:hidden}.trailer-thumb{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:#111}.trailer-thumb-placeholder{width:100%;aspect-ratio:16 / 9;background:var(--bg-hover)}.trailer-card-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}.trailer-card-header{display:flex;align-items:center;gap:var(--space-2)}.trailer-card-header h3{font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:-.01em;margin:0;line-height:1.2}.trailer-card-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);margin-top:2px}.trailer-card-meta-item{display:flex;align-items:center;gap:4px}.trailer-card-meta-item svg{flex-shrink:0}.trailer-card-meta-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.trailer-card-meta-cameras{flex-shrink:0}.trailer-card-last-seen{font-size:var(--text-sm);color:var(--text-tertiary)}.trailer-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative}.trailer-carousel::-webkit-scrollbar{display:none}.trailer-carousel-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:16 / 9;background:#111}.trailer-carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}.trailer-carousel-overlay{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--space-3) var(--space-4);background:linear-gradient(rgba(0,0,0,.55) 0%,transparent 100%);color:#fff;font-size:var(--text-xs);line-height:1.4;pointer-events:none;z-index:2}.trailer-carousel-overlay-name{font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}.trailer-carousel-overlay-time{flex-shrink:0;opacity:.8;text-shadow:0 1px 3px rgba(0,0,0,.5)}.trailer-carousel-dots{display:flex;justify-content:center;gap:6px;padding:var(--space-2) 0;position:absolute;bottom:var(--space-2);left:50%;transform:translate(-50%);z-index:1}.trailer-carousel-dot{width:7px;height:7px;border-radius:50%;background:#fff6;transition:background var(--transition-fast)}.trailer-carousel-dot.active{background:#fff}.trailer-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:#fff;transition:background var(--transition-fast)}.trailer-carousel-arrow:hover{background:#000000a6}.trailer-carousel-arrow--left{left:8px}.trailer-carousel-arrow--right{right:8px}.trailer-card.offline{opacity:.6;cursor:default}.trailer-card.offline:hover{box-shadow:none;transform:none}.status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--text-tertiary)}.status-dot.online{background:var(--color-success);box-shadow:0 0 6px var(--color-success);animation:sv-pulse 2s ease-in-out infinite}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}@media(max-width:480px){.form-row{grid-template-columns:1fr}}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4)}.line-items-list{display:flex;flex-direction:column;gap:var(--space-2)}.line-item-row{display:flex;align-items:center;gap:var(--space-2)}.line-item-desc{flex:3}.line-item-qty{flex:1;min-width:60px}.line-item-price{flex:1;min-width:80px}.line-item-total{flex:0 0 70px;font-size:var(--text-sm);font-weight:var(--weight-semibold);text-align:right;color:var(--text-primary)}.line-items-total{text-align:right;font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-primary);padding-top:var(--space-2);border-top:1px solid var(--border);margin-top:var(--space-1)}.timeline{display:flex;flex-direction:column;gap:0;padding-left:var(--space-3);border-left:2px solid var(--border)}.timeline-item{position:relative;padding:var(--space-2) 0 var(--space-3) var(--space-4)}.timeline-dot{position:absolute;left:calc(-1 * var(--space-3) - 5px);top:var(--space-3);width:8px;height:8px;border-radius:50%;background:var(--color-primary);border:2px solid var(--bg-surface)}.timeline-content{font-size:var(--text-sm)}.timeline-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:2px}.timeline-author{font-weight:var(--weight-semibold);color:var(--text-primary)}.timeline-time{font-size:var(--text-xs);color:var(--text-tertiary)}.timeline-message{color:var(--text-secondary);line-height:var(--line-height-normal)}.map-picker{border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden}.map-picker-map{height:280px;width:100%}.map-picker-status{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--text-secondary);background:var(--bg-secondary);border-top:1px solid var(--border-primary)}.maintenance-card{margin-top:var(--space-6);padding:var(--space-4);border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:var(--bg-secondary)}.maintenance-card-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}.maintenance-card-header h3{margin:0;font-size:var(--text-base);font-weight:var(--weight-semibold)}.maintenance-card-actions{margin-top:var(--space-3)}.camera-config-tabs{display:flex;border-bottom:1px solid var(--border-primary);margin-bottom:var(--space-4)}.camera-config-tab{padding:var(--space-2) var(--space-4);border:none;background:none;cursor:pointer;font-weight:var(--weight-medium);color:var(--text-secondary);border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}.camera-config-tab.active{font-weight:var(--weight-semibold);color:var(--color-primary);border-bottom-color:var(--color-primary)}.camera-config-body{margin-bottom:var(--space-4)}.camera-config-table{width:100%;border-collapse:collapse}.camera-config-table th{text-align:left;padding:var(--space-2) var(--space-2);color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--weight-medium)}.camera-config-table td{padding:var(--space-2) var(--space-2);border-top:1px solid var(--border-primary)}.camera-config-table input[type=text],.camera-config-table input[type=number],.camera-config-table select{padding:var(--space-1) var(--space-2);border:1px solid var(--border-primary);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:var(--text-sm)}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-12);text-align:center;color:var(--text-primary)}.error-boundary h2{font-size:var(--text-xl);font-weight:var(--weight-bold)}.error-boundary p{font-size:var(--text-sm);color:var(--text-secondary);max-width:400px}.page-loading{display:flex;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary);font-size:var(--text-sm)}.section-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.section-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em}.mt-6{margin-top:var(--space-6)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.empty-state{display:flex;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary);font-size:var(--text-sm);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border)}.dashboard-panels{display:flex;flex-direction:column;gap:var(--space-5)}.dashboard-panel{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}.dashboard-panel .card-header h3{flex:1;margin:0;font-size:var(--text-base);font-weight:var(--weight-semibold)}.stat-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-3);padding:var(--space-4)}.stat-mini{text-align:center;padding:var(--space-3);background:var(--bg-hover);border-radius:var(--radius-md)}.stat-mini-value{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary)}.stat-mini-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.cursor-pointer{cursor:pointer}.cursor-pointer:hover{background:var(--bg-hover)}@media(max-width:768px){.modal-overlay{padding:0}.modal{max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}.stat-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stat-card{padding:var(--space-3)}.stat-card-value{font-size:var(--text-xl)}.stat-card-icon{width:32px;height:32px}.section-header{flex-wrap:wrap}.datatable-search{min-width:0;max-width:none}.datatable-pagination{flex-wrap:wrap;font-size:var(--text-xs)}.dashboard-panels .data-table th,.dashboard-panels .data-table td{padding:var(--space-2);font-size:var(--text-xs)}.stat-grid-compact{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.stat-grid{grid-template-columns:1fr 1fr}.stat-card-value{font-size:var(--text-lg)}.stat-card-sub{font-size:var(--text-xs)}.stat-grid-compact{grid-template-columns:repeat(2,1fr)}}.relay-health-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.relay-health-card .card-body{padding:var(--space-4) var(--space-5)}.relay-metrics{display:flex;flex-direction:column;gap:var(--space-2)}.relay-metric-row{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:var(--space-2)}.relay-metric-label{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--weight-medium)}.relay-meter{height:6px;background:var(--bg-hover);border-radius:3px;overflow:hidden}.relay-meter-fill{height:100%;border-radius:3px;transition:width .4s ease}.relay-metric-value{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums}.relay-stats-row{display:flex;gap:var(--space-4)}.relay-stat{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary)}.relay-warnings{display:flex;flex-wrap:wrap;gap:var(--space-2)}.relay-health-footer{justify-content:flex-start;gap:var(--space-2);color:var(--text-secondary)}.relay-assignment-row{padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}.relay-restart-details{display:inline}.relay-restart-breakdown{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--bg-hover);border-radius:var(--radius-sm)}.relay-restart-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}.active-viewers-list{display:flex;flex-direction:column;gap:var(--space-4)}.active-viewer-row{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}.active-viewer-row:last-child{border-bottom:none;padding-bottom:0}.active-viewer-name{display:flex;align-items:center;gap:var(--space-2);color:var(--text-primary)}.active-viewer-streams{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--space-5)}.active-viewer-stream{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary)}@media(max-width:768px){.relay-health-grid{grid-template-columns:1fr}}.grecaptcha-badge{visibility:hidden!important}@keyframes sv-pulse{0%,to{opacity:1}50%{opacity:.4}}.pulsing-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.pulsing-dot--animated{animation:sv-pulse 2s ease-in-out infinite}.pulsing-dot--critical{background:var(--color-error);box-shadow:0 0 6px var(--color-error)}.pulsing-dot--warning{background:var(--color-warning);box-shadow:0 0 6px var(--color-warning)}.pulsing-dot--success{background:var(--color-success);box-shadow:0 0 6px var(--color-success)}.pulsing-dot--info{background:var(--color-primary);box-shadow:0 0 6px var(--color-primary)}.pulsing-dot--activity{background:var(--color-activity);box-shadow:0 0 6px var(--color-activity)}.fleet-pulse{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-5);flex-wrap:wrap}.fleet-pulse-stat{display:flex;flex-direction:column;align-items:center;min-width:80px}.fleet-pulse-value{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);line-height:var(--line-height-tight)}.fleet-pulse-label{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.fleet-pulse-divider{width:1px;height:32px;background:var(--border);flex-shrink:0}.fleet-pulse-health{flex:1;min-width:160px}.fleet-pulse-health-bar{height:6px;border-radius:var(--radius-full);background:var(--bg-hover);overflow:hidden;margin-top:var(--space-1);display:flex}.fleet-pulse-health-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow)}.fleet-pulse-pills{display:flex;gap:var(--space-2);flex-wrap:wrap}.fleet-pulse-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold)}.zone-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.zone-card-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}.zone-card-title{font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:1px;color:var(--text-primary)}.zone-card-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-1);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold);margin-left:auto}.zone-card-body{padding:var(--space-2)}.zone-card-item{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3);border-left:3px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:2px}.zone-card-item--critical{border-left-color:var(--color-error);background:var(--zone-alert-bg)}.zone-card-item--high{border-left-color:var(--color-warning);background:var(--zone-service-bg)}.zone-card-item--medium{border-left-color:var(--color-severity-medium)}.zone-card-item--low{border-left-color:var(--color-success)}.zone-card-item--info{border-left-color:var(--color-primary);background:var(--zone-contract-bg)}.zone-card-item-row{display:flex;align-items:center;gap:var(--space-2)}.zone-card-item-desc{font-size:var(--text-sm);color:var(--text-primary);flex:1;min-width:0}.zone-card-item-meta{font-size:var(--text-xs);color:var(--text-secondary)}.zone-card-footer{padding:var(--space-2) var(--space-4) var(--space-3);border-top:1px solid var(--border)}.zone-card-footer a,.zone-card-footer button{font-size:var(--text-xs);color:var(--color-primary);cursor:pointer;background:none;border:none;padding:0;font-weight:var(--weight-medium)}.zone-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);padding:var(--space-3)}.zone-stat{text-align:center;padding:var(--space-2);border-radius:var(--radius-sm)}.zone-stat-value{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary)}.zone-stat-label{font-size:var(--text-xs);color:var(--text-secondary)}.dashboard-zones{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}@media(max-width:1024px){.dashboard-zones{grid-template-columns:1fr}}.activity-item{display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);align-items:flex-start}.activity-bar{width:3px;min-height:24px;border-radius:var(--radius-full);background:var(--color-activity);flex-shrink:0;transition:opacity var(--transition-base)}.activity-content{flex:1;min-width:0}.activity-text{font-size:var(--text-sm);color:var(--text-primary)}.activity-time{font-size:var(--text-xs);color:var(--text-tertiary)}.detail-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-3)}.detail-breadcrumb a,.detail-breadcrumb button{color:var(--color-primary);background:none;border:none;cursor:pointer;font-size:var(--text-sm);padding:0}.detail-breadcrumb-sep{color:var(--text-tertiary)}.detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-5)}.detail-header-left{display:flex;flex-direction:column;gap:var(--space-1)}.detail-title-row{display:flex;align-items:center;gap:var(--space-3)}.detail-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;margin:0}.detail-subtitle{font-size:var(--text-base);color:var(--text-secondary);letter-spacing:.005em}.detail-actions{display:flex;gap:var(--space-3)}.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-bottom:var(--space-5)}@media(max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr)}}.stat-row-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);text-align:center}.stat-row-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--color-secondary);margin-bottom:var(--space-1)}.stat-row-value{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary)}.stat-row-sub{font-size:9px;color:var(--text-tertiary);margin-top:2px}.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--space-4)}.tab-bar-item{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}.tab-bar-item:hover{color:var(--text-primary)}.tab-bar-item--active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.camera-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.camera-card--offline{border-color:#ff3b304d}.camera-card-preview{height:120px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;position:relative}.camera-card-status{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);font-size:9px;font-weight:var(--weight-semibold)}.camera-card-status--live{color:var(--color-success)}.camera-card-status--offline{color:var(--color-error)}.camera-card-info{padding:var(--space-3) var(--space-4);display:flex;justify-content:space-between;align-items:center}.camera-card-name{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-primary);letter-spacing:-.01em}.camera-card-meta{font-size:var(--text-xs);color:var(--text-secondary)}.camera-card-actions{display:flex;gap:var(--space-1)}.datatable-scroll thead{position:sticky;top:0;z-index:var(--z-raised);background:var(--bg-surface)}.data-table td,.data-table th{padding:var(--space-2) var(--space-3)}.trailer-info-bar{display:flex;gap:var(--space-6);padding:var(--space-4) var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-6);flex-wrap:wrap}.trailer-info-item{display:flex;align-items:flex-start;gap:var(--space-3);min-width:160px}.trailer-info-item>div{display:flex;flex-direction:column;gap:2px}.trailer-info-icon{color:var(--text-tertiary);margin-top:3px;flex-shrink:0}.trailer-info-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);font-weight:var(--weight-semibold)}.trailer-info-value{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-medium);letter-spacing:-.005em}.camera-card-thumb{position:relative;width:100%;aspect-ratio:16 / 9;background:#111;overflow:hidden;cursor:pointer}.camera-card--disabled .camera-card-thumb{cursor:default}.camera-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}.camera-card-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);color:var(--text-tertiary)}.camera-card-thumb-overlay{position:absolute;bottom:var(--space-2);right:var(--space-2);background:#000000b3;color:#fff;font-size:var(--text-xs);padding:2px var(--space-2);border-radius:var(--radius-sm);pointer-events:none;letter-spacing:.01em}.camera-card--disabled{opacity:.55;cursor:default}.camera-card--disabled:hover{box-shadow:none;transform:none}.camera-card-info{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4)}.camera-card-info-left{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1;overflow:hidden}.camera-card-info-left .camera-card-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.camera-card--disabled .camera-card-info-left .camera-card-name{cursor:default}.pulsing-dot--offline{background:var(--text-tertiary)}.rename-modal-thumb{width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-md);overflow:hidden;background:#111;margin-bottom:var(--space-4)}.rename-modal-thumb img{width:100%;height:100%;object-fit:cover;display:block}.rename-modal-current{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-4)}.rename-modal-current strong{color:var(--text-primary);font-weight:var(--weight-medium)}.fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--bg-surface);display:flex;flex-direction:column;padding:var(--space-6)}.fullscreen-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}.fullscreen-header h2{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;margin:0}.fullscreen-grid{flex:1;min-height:0}.fullscreen-close{flex-shrink:0}.page-trailers>h1,.page-trailer-detail>h1{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:-.02em;color:var(--text-primary);margin:0 0 var(--space-5)}@media(max-width:768px){.trailer-info-bar{flex-direction:column;gap:var(--space-3)}.trailer-info-item{min-width:0}.card-grid{grid-template-columns:1fr}}.dvr-layout{display:flex;flex-direction:column;gap:var(--space-3)}.dvr-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg)}.dvr-selects{display:flex;gap:var(--space-3);align-items:flex-end}.dvr-selects .form-group{margin-bottom:0}.trailer-clock{text-align:right;flex-shrink:0}.trailer-clock-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.trailer-clock-time{font-size:20px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.trailer-clock-date{font-size:11px;color:var(--text-muted)}.dvr-player{border-radius:var(--radius-lg);overflow:hidden}.dvr-player-placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#000;color:var(--text-muted);font-size:14px}.player-timestamp-overlay{position:absolute;top:8px;left:8px;background:#000000b3;padding:3px 8px;border-radius:4px;font-size:12px;color:#e5e7eb;font-variant-numeric:tabular-nums;pointer-events:none;z-index:5}.dvr-timeline-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.dvr-date-nav{display:flex;align-items:center;gap:var(--space-2)}.dvr-date-label{font-size:13px;font-weight:600;min-width:140px;text-align:center}.dvr-jump{display:flex;align-items:center;gap:var(--space-2);font-size:12px;color:var(--text-muted)}.dvr-jump-input{width:100px;padding:3px 8px;font-size:12px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}.dvr-zoom{display:flex;align-items:center;gap:var(--space-1);font-size:12px;color:var(--text-muted)}.timeline-bar-container{padding:var(--space-2) 0}.timeline-bar{position:relative;height:40px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none}.timeline-segment{position:absolute;top:4px;bottom:4px;background:#22c55e;opacity:.6;border-radius:2px;pointer-events:none}.timeline-gap{position:absolute;top:4px;bottom:4px;background:#ef4444;opacity:.7;border-radius:1px;pointer-events:none}.timeline-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--border);pointer-events:none}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#f59e0b;z-index:3;pointer-events:none}.timeline-playhead-arrow{position:absolute;top:-5px;left:-4px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #f59e0b}.timeline-mark{position:absolute;top:0;bottom:0;width:2px;background:#a78bfa;z-index:2;pointer-events:none}.timeline-mark-label{position:absolute;top:0;left:0;background:#a78bfa;color:#fff;font-size:8px;padding:0 3px;border-radius:0 0 2px 2px;line-height:1.4}.timeline-mark-range{position:absolute;top:0;bottom:0;background:#a78bfa26;z-index:1;pointer-events:none}.timeline-tick-labels{position:relative;height:16px;margin-top:2px}.timeline-tick-label{position:absolute;transform:translate(-50%);font-size:10px;color:var(--text-muted);white-space:nowrap}.timeline-legend{display:flex;gap:var(--space-4);font-size:10px;color:var(--text-muted);margin-top:var(--space-1)}.timeline-legend-item{display:flex;align-items:center;gap:4px}.timeline-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px}.timeline-legend-recorded{background:#22c55e;opacity:.6}.timeline-legend-gap{background:#ef4444;opacity:.7}.timeline-legend-playhead-color{background:#f59e0b;height:3px!important}.timeline-legend-mark{background:#a78bfa66;border-left:2px solid #a78bfa}.timeline-hover-line{position:absolute;top:0;bottom:0;width:1px;background:#fff6;z-index:4;pointer-events:none;transition:opacity .1s}.timeline-hover-tooltip{position:absolute;bottom:calc(100% + 6px);transform:translate(-50%);background:var(--surface-3, #333);color:#fff;font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;white-space:nowrap;z-index:5;pointer-events:none;box-shadow:0 2px 6px #0000004d}.dvr-playback-controls{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-1) 0}.dvr-playback-controls .btn{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}.download-manager{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}.download-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.download-controls-left{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.download-label{font-size:12px;font-weight:600}.download-range-label{font-size:11px;color:#a78bfa;margin:0 var(--space-1)}.download-presets-label{font-size:11px;color:var(--text-muted);margin-left:var(--space-2)}.btn-accent{background:#7c3aed;color:#fff;border:none}.btn-accent:hover{background:#6d28d9}.btn-download{display:flex;align-items:center;gap:var(--space-1)}.download-status-bar{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius);font-size:12px;position:relative;overflow:hidden}.download-status-content{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.download-status-text{display:flex;flex-direction:column;gap:1px;min-width:0}.download-status-title{font-weight:600;font-size:12px}.download-status-detail{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-status-actions{flex-shrink:0}.download-cancel-btn{color:var(--text-muted)!important}.download-cancel-btn:hover{color:#ef4444!important}.download-status-preparing{background:#a78bfa1a;border:1px solid rgba(167,139,250,.25);color:#c4b5fd}.download-status-downloading{background:#3b82f61a;border:1px solid rgba(59,130,246,.25);color:#93c5fd}.download-status-complete{background:#22c55e1a;border:1px solid rgba(34,197,94,.25);color:#86efac}.download-status-error{background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:#fca5a5}.download-progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff0d;overflow:hidden}.download-progress-fill{height:100%;background:#a78bfa;border-radius:2px}.download-progress-indeterminate{width:40%;animation:progress-slide 1.5s ease-in-out infinite}@keyframes progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.download-spinner{animation:spin 1s linear infinite;flex-shrink:0}.download-bounce{animation:bounce-down 1s ease-in-out infinite;flex-shrink:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce-down{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}@media(max-width:480px){.dvr-header{flex-direction:column}.dvr-selects{flex-direction:column;width:100%}.dvr-timeline-controls,.download-controls{flex-direction:column;align-items:stretch}}.camera-picker{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}.picker-header h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}.picker-header-actions{display:flex;gap:var(--space-2)}.picker-table{width:100%}.picker-trailer-row{border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-5)}.picker-trailer-row:last-child{border-bottom:none}.picker-trailer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.picker-trailer-info{display:flex;align-items:center;gap:var(--space-3)}.picker-trailer-info .status-dot{flex-shrink:0}.picker-trailer-name{font-weight:var(--weight-semibold);font-size:var(--text-base)}.picker-trailer-count{font-size:var(--text-xs);color:var(--text-tertiary)}.picker-trailer-actions{display:flex;gap:var(--space-2)}.picker-cameras{display:flex;flex-wrap:wrap;gap:var(--space-2)}.cam-toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:9999px;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);-webkit-user-select:none;user-select:none}.cam-toggle:hover{background:var(--bg-hover)}.cam-toggle.selected{background:#007aff;color:#fff;border-color:#007aff}.cam-toggle.selected:hover{background:#0066d6;border-color:#0066d6}.cam-toggle.offline{opacity:.45;cursor:not-allowed;pointer-events:none}.cam-toggle .cam-status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success);flex-shrink:0}.cam-toggle.selected .cam-status-dot{opacity:.6}.cam-toggle.offline .cam-status-dot{background:var(--text-tertiary)}.multi-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:#1a1a1a;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.multi-toolbar-left{color:#ccc;font-size:var(--text-sm);font-weight:var(--weight-medium)}.multi-toolbar-right{display:flex;gap:var(--space-2)}.multi-grid{display:grid;gap:2px;background:#111;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}.multi-grid-1{grid-template-columns:1fr}.multi-grid-2{grid-template-columns:repeat(2,1fr)}.multi-grid-3{grid-template-columns:repeat(3,1fr)}.multi-grid-4{grid-template-columns:repeat(4,1fr)}.multi-grid-cell{position:relative;background:#000;aspect-ratio:16 / 9}.multi-grid-cell .webrtc-player-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.multi-grid-cell .webrtc-player-wrap video{width:100%;height:100%;object-fit:contain}.cell-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--space-4) var(--space-3) var(--space-2);background:linear-gradient(transparent 0%,#000000bf);display:flex;align-items:flex-end;justify-content:space-between;z-index:2}.cell-overlay-left{display:flex;align-items:center;gap:var(--space-2);min-width:0}.cell-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.cell-status-dot.connecting{background:#f59e0b;animation:pulse 1.5s ease-in-out infinite}.cell-status-dot.connected{background:var(--color-success)}.cell-status-dot.error{background:var(--color-error)}.cell-status-dot.disconnected{background:#6b7280}.cell-cam-name{color:#fff;font-size:var(--text-sm);font-weight:var(--weight-medium);text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell-trailer-name{color:#ffffff8c;font-size:var(--text-xs);text-shadow:0 1px 3px rgba(0,0,0,.6);margin-left:var(--space-1);white-space:nowrap}.cell-overlay-right{display:flex;gap:var(--space-1);flex-shrink:0}.cell-overlay-right .btn{background:#00000080;color:#fff;border:none;width:28px;height:28px;padding:0;min-width:0}.cell-overlay-right .btn:hover{background:#fff3}.cell-ptz-overlay{position:fixed;z-index:1000;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3);max-height:80vh;overflow-y:auto}.ptz-drag-handle{display:flex;align-items:center;justify-content:center;padding:4px 0;margin:calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2) calc(-1 * var(--space-3));cursor:grab;border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;color:var(--text-tertiary);-webkit-user-select:none;user-select:none}.ptz-drag-handle:active,.ptz-drag-handle.dragging{cursor:grabbing}.multi-fs-wrap{position:relative}.multi-fs-wrap:fullscreen{background:#000;display:flex;flex-direction:column}.multi-fs-wrap:fullscreen .multi-toolbar{border-radius:0;transition:opacity .3s ease}.multi-fs-wrap:fullscreen .multi-toolbar.hidden{opacity:0;pointer-events:none}.multi-fs-wrap:fullscreen .multi-grid{flex:1;border-radius:0}.page-multi-view .section-header{margin-bottom:var(--space-4)}.page-multi-view .section-subtitle{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-1)}