.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:100}.header-left{display:flex;align-items:center;gap:2rem}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{font-size:1.5rem;color:var(--accent-cyan);text-shadow:var(--glow-cyan)}.logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:.2em;color:var(--text-primary)}.system-badge{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:2px}.badge-label{font-size:.625rem;color:var(--text-muted);letter-spacing:.1em}.badge-value{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.05em}.badge-value.operational{color:var(--accent-green);animation:pulse-glow 2s ease-in-out infinite}.header-center{display:flex;align-items:center}.status-grid{display:flex;gap:2rem}.status-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.status-label{font-size:.625rem;color:var(--text-muted);letter-spacing:.15em}.status-value{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--accent-cyan)}.status-indicator{font-family:var(--font-mono);font-size:.75rem;font-weight:500;padding:.125rem .5rem;border-radius:2px;letter-spacing:.1em}.status-indicator.connected{color:var(--accent-green);background:#00ff881a;animation:pulse-glow 2s ease-in-out infinite}.status-indicator.disconnected{color:var(--accent-red);background:#ff33661a}.header-right{display:flex;align-items:center;gap:1rem}.user-info{display:flex;align-items:center;gap:.5rem}.user-name{font-size:.75rem;color:var(--text-secondary)}.logout-btn{padding:.25rem .5rem;background:transparent;border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:.625rem;cursor:pointer;transition:all .2s ease}.logout-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}.datetime{display:flex;flex-direction:column;align-items:flex-end}.date{font-size:.625rem;color:var(--text-muted);letter-spacing:.1em}.time{font-family:var(--font-display);font-size:1.25rem;font-weight:500;color:var(--text-primary);letter-spacing:.1em}.panel{background:var(--bg-secondary);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-tertiary)}.panel-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--text-primary);letter-spacing:.1em;margin:0}.title-icon{color:var(--accent-cyan)}.panel-count{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--accent-cyan)}.panel-actions{display:flex;gap:.5rem}.panel-content{flex:1;overflow:auto;padding:1rem}.login-form{display:flex;flex-direction:column;gap:1rem;max-width:320px;margin:0 auto;padding:2rem;background:var(--bg-secondary);border:1px solid var(--border)}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.75rem;color:var(--text-muted);letter-spacing:.1em}.form-group input{padding:.75rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:.875rem}.form-group input:focus{outline:none;border-color:var(--accent-cyan)}.form-error{color:var(--accent-red);font-size:.75rem;text-align:center}.login-btn{padding:.75rem;background:var(--accent-cyan);border:none;color:var(--bg-primary);font-family:var(--font-mono);font-size:.875rem;cursor:pointer;transition:all .2s ease}.login-btn:hover:not(:disabled){background:var(--accent-blue)}.login-btn:disabled{opacity:.5;cursor:not-allowed}.user-table{width:100%;border-collapse:collapse;font-size:.75rem}.user-table th,.user-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border)}.user-table th{color:var(--text-muted);font-weight:500;letter-spacing:.05em}.user-table td{color:var(--text-primary)}.user-table .mono{font-family:var(--font-mono)}.status-badge{padding:.25rem .5rem;font-size:.625rem;border-radius:2px}.status-badge.active{background:#10b9811a;color:var(--accent-green)}.status-badge.locked{background:#ef44441a;color:var(--accent-red)}.action-btns{display:flex;gap:.5rem}.action-btn.danger:hover{border-color:var(--accent-red);color:var(--accent-red)}.image-table-container{width:100%}.batch-actions{display:flex;align-items:center;gap:1rem;padding:.5rem;background:var(--bg-secondary);border:1px solid var(--border);margin-bottom:.5rem;font-size:.75rem;color:var(--text-secondary)}.batch-btn{padding:.25rem .75rem;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;cursor:pointer}.batch-btn.danger:hover{border-color:var(--accent-red);color:var(--accent-red)}.image-table{width:100%;border-collapse:collapse;font-size:.75rem}.image-table th,.image-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border)}.image-table th{color:var(--text-muted)}.image-table tr.selected{background:#00d4ff0d}.thumbnail{width:80px;height:60px;object-fit:cover;border:1px solid var(--border)}.has-annotates{color:var(--accent-green)}.action-btn{padding:.25rem .5rem;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:.625rem;cursor:pointer}.action-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.file-upload{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:var(--bg-secondary);border:1px solid var(--border)}.file-upload input[type=file]{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary)}.file-list{font-size:.75rem;color:var(--text-secondary)}.file-list ul{margin:.5rem 0 0 1rem;padding:0}.file-list li{list-style:disc}.upload-progress{height:4px;background:var(--bg-primary);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:var(--accent-cyan);transition:width .3s ease}.upload-btn{padding:.75rem;background:var(--accent-cyan);border:none;color:var(--bg-primary);font-size:.875rem;cursor:pointer}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.device-card{padding:1rem;background:var(--bg-tertiary);border:1px solid var(--border);cursor:pointer;transition:all .2s ease}.device-card:hover{border-color:var(--accent-cyan);background:#00d4ff05}.device-card.selected{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.device-card.offline{opacity:.5}.device-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.device-status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);box-shadow:var(--glow-green);animation:pulse-glow 2s ease-in-out infinite}.device-card.offline .device-status-dot{background:var(--text-muted);box-shadow:none;animation:none}.device-name{font-size:.75rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-level{display:flex;align-items:baseline;gap:.25rem;margin-bottom:.5rem}.level-value{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--accent-cyan);animation:data-flicker 4s linear infinite}.level-unit{font-size:.75rem;color:var(--text-muted)}.device-meta{display:flex;flex-direction:column;gap:.25rem}.meta-item{display:flex;justify-content:space-between;font-size:.625rem}.meta-label{color:var(--text-muted);letter-spacing:.1em}.meta-value{color:var(--text-secondary)}.level-display{display:grid;grid-template-columns:auto 1fr;gap:2rem;height:100%;padding:1rem}.level-gauge{display:flex;gap:.5rem;height:100%}.gauge-bg{width:40px;height:100%;max-height:400px;background:var(--bg-primary);border:1px solid var(--border);position:relative;display:flex;align-items:flex-end}.gauge-fill{width:100%;background:linear-gradient(to top,var(--accent-cyan),var(--accent-blue));transition:height .5s ease;box-shadow:0 0 20px #00d4ff4d}.gauge-marks{display:flex;flex-direction:column;justify-content:space-between;height:100%;max-height:400px;padding:.25rem 0}.gauge-mark{font-family:var(--font-mono);font-size:.625rem;color:var(--text-muted)}.level-info{display:flex;flex-direction:column;justify-content:center;gap:2rem}.level-main{display:flex;align-items:baseline;gap:.5rem}.level-number{font-family:var(--font-display);font-size:4rem;font-weight:700;color:var(--accent-cyan);text-shadow:var(--glow-cyan);line-height:1;animation:data-flicker 4s linear infinite}.level-unit-large{font-size:1.5rem;color:var(--text-muted)}.level-details{display:flex;flex-direction:column;gap:.75rem}.detail-row{display:flex;gap:1rem}.detail-label{font-size:.75rem;color:var(--text-muted);width:60px;letter-spacing:.1em}.detail-value{font-family:var(--font-mono);font-size:.875rem;color:var(--text-primary)}.live-video-panel{display:flex;gap:1rem;height:100%}.video-container{flex:1;background:#08080c;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;min-height:400px;overflow:hidden}.video-element{max-width:100%;max-height:100%;object-fit:contain;display:block}.stream-selector{position:absolute;top:.75rem;left:.75rem;display:flex;gap:.35rem;z-index:10}.stream-pill{padding:.3rem .85rem;font-size:.6875rem;border:1px solid var(--border);background:#ebebf514;color:var(--text-secondary);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;display:flex;align-items:center;gap:.3rem;font-family:var(--font-mono)}.stream-pill.active{background:#00d4ff29;border-color:var(--accent-cyan);color:var(--accent-cyan)}.stream-pill:hover{background:#ebebf524;border-color:var(--accent-cyan)}.stream-pill.detection{box-shadow:0 0 10px #00d4ff59,inset 0 0 6px #00d4ff40;border-color:var(--accent-cyan);background:#00d4ff1f}.detection-badge{font-size:.6rem;color:var(--accent-cyan);letter-spacing:.05em}.detection-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent-cyan)}.stream-selector .stream-pill:has(.detection-badge){box-shadow:0 0 12px #00d4ff66}.ptz-control{background:var(--bg-secondary);border:1px solid var(--border);padding:1rem}.ptz-section-title{font-size:.75rem;color:var(--text-muted);letter-spacing:.05em;margin-bottom:1rem}.ptz-content{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.ptz-dpad{display:grid;grid-template-columns:36px 36px 36px;gap:4px}.ptz-btn{width:36px;height:36px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}.ptz-btn:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan)}.ptz-btn.center{cursor:default;opacity:.5}.ptz-btn:disabled{opacity:.5;cursor:not-allowed}.ptz-divider{width:1px;height:60px;background:var(--border)}.ptz-actions{display:flex;flex-direction:column;gap:.5rem}.ptz-action-btn{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;cursor:pointer;white-space:nowrap}.ptz-action-btn:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan)}.ptz-action-btn:disabled{opacity:.5;cursor:not-allowed}.ptz-speed{display:flex;flex-direction:column;align-items:center;gap:.5rem}.speed-label{font-size:.625rem;color:var(--text-muted)}.speed-btns{display:flex;gap:4px}.speed-btn{width:28px;height:28px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;cursor:pointer}.speed-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00d4ff0d}.image-params{background:var(--bg-secondary);border:1px solid var(--border);padding:1rem}.params-title{font-size:.75rem;color:var(--text-muted);letter-spacing:.05em;margin-bottom:1rem}.params-sliders{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.param-row{display:flex;flex-direction:column;gap:.25rem}.param-header{display:flex;justify-content:space-between;font-size:.625rem;color:var(--text-muted)}.param-row input[type=range]{width:100%;accent-color:var(--accent-cyan)}.params-apply{width:100%;padding:.5rem;background:#00d4ff1a;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.75rem;cursor:pointer}.params-apply:hover{background:#00d4ff33}.camera-advanced-panel{background:var(--bg-secondary);border:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:1rem}.advanced-title{font-size:.75rem;color:var(--text-muted);letter-spacing:.05em}.advanced-section{border:1px solid var(--border);background:var(--bg-primary);padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.section-title{font-size:.6875rem;color:var(--accent-cyan);letter-spacing:.08em;text-transform:uppercase}.field-grid{display:grid;gap:.5rem}.field-row button,.apply-btn{padding:.375rem .75rem;background:#00d4ff1a;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.75rem;cursor:pointer}.field-row button:hover,.apply-btn:hover{background:#00d4ff33}.toggle-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.camera-settings-panel{background:var(--bg-secondary);border:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:1rem;max-width:480px}.panel-title{font-size:.75rem;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}.camera-form{display:flex;flex-direction:column;gap:1rem}.config-section{border:1px solid var(--border);background:var(--bg-primary);padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.section-title{font-size:.6875rem;color:var(--accent-cyan);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}.field-row{display:flex;align-items:center;gap:.5rem}.field-row input,.field-row select{flex:1;min-width:0;padding:.375rem .5rem;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-primary);font-size:.75rem}.field-label{color:var(--text-muted);font-size:.6875rem;min-width:56px}.form-actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem}.save-btn{padding:.375rem 1.25rem;background:#00d4ff1a;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.75rem;cursor:pointer;transition:background .2s}.save-btn:hover{background:#00d4ff33}.save-btn:disabled{opacity:.5;cursor:default}.saved-badge{font-size:.6875rem;color:var(--accent-green);animation:fadeOut 1.5s forwards}@keyframes fadeOut{0%{opacity:1}70%{opacity:1}to{opacity:0}}.ruler-list{width:240px;background:var(--bg-secondary);border:1px solid var(--border);display:flex;flex-direction:column}.ruler-list-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid var(--border);font-size:.75rem;color:var(--text-muted);letter-spacing:.05em}.ruler-add-btn{padding:.25rem .5rem;background:transparent;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.625rem;cursor:pointer}.ruler-items{flex:1;overflow-y:auto;padding:.5rem}.ruler-item{padding:.5rem;border:1px solid var(--border);margin-bottom:.25rem;cursor:pointer}.ruler-item.selected{border-color:var(--accent-cyan);background:#00d4ff0d}.ruler-item-name{font-size:.75rem;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.ruler-active-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green)}.ruler-item-range{font-size:.625rem;color:var(--text-muted);margin-top:.25rem}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-dialog{background:var(--bg-secondary);border:1px solid var(--border);padding:1.5rem;min-width:300px}.confirm-title{font-size:1rem;color:var(--text-primary);margin-bottom:.75rem}.confirm-message{font-size:.875rem;color:var(--text-secondary);margin-bottom:1.5rem}.confirm-actions{display:flex;justify-content:flex-end;gap:.75rem}.confirm-ok{padding:.5rem 1rem;background:#ef44441a;border:1px solid var(--accent-red);color:var(--accent-red);font-size:.75rem;cursor:pointer}.ruler-editor{flex:1;padding:1rem;overflow-y:auto}.ruler-editor-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.875rem}.ruler-editor-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border);font-size:1rem;color:var(--text-primary)}.ruler-editor-actions{display:flex;gap:.5rem}.ruler-editor-fields{padding-top:1rem;display:flex;flex-direction:column;gap:.75rem}.field{display:flex;flex-direction:column;gap:.25rem;flex:1}.field label{font-size:.625rem;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}.field input,.field select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);font-size:.75rem}.field-row{display:flex;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-primary);cursor:pointer}.checkbox-label input[type=checkbox]{width:auto}.ruler-parts-section{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}.parts-title{font-size:.75rem;color:var(--text-muted);margin-bottom:.75rem;letter-spacing:.05em}.parts-table{width:100%;border-collapse:collapse;font-size:.75rem}.parts-table th{text-align:left;padding:.375rem .5rem;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:400;font-size:.625rem;letter-spacing:.05em}.parts-table td{padding:.375rem .5rem;border-bottom:1px solid var(--border);color:var(--text-secondary)}.color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--border)}.mono{font-family:monospace;font-size:.6875rem}.action-btn{padding:.375rem .75rem;font-size:.6875rem;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-secondary)}.action-btn.primary{border-color:var(--accent-cyan);color:var(--accent-cyan)}.action-btn.danger{border-color:var(--accent-red);color:var(--accent-red)}.action-btn.activate{border-color:var(--accent-green);color:var(--accent-green)}.reporting-panel{display:flex;gap:1rem;height:100%}.reporting-left{flex:1;background:var(--bg-secondary);border:1px solid var(--border)}.reporting-right{width:360px;background:var(--bg-secondary);border:1px solid var(--border);padding:1rem}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid var(--border);font-size:.75rem;color:var(--text-muted);letter-spacing:.05em}.add-btn{padding:.25rem .5rem;background:transparent;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.625rem;cursor:pointer}.reporting-table{width:100%;border-collapse:collapse;font-size:.75rem}.reporting-table th,.reporting-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border)}.reporting-table th{color:var(--text-muted);font-weight:400}.reporting-table .mono{font-family:var(--font-mono)}.table-btn{background:transparent;border:none;color:var(--accent-cyan);cursor:pointer;font-size:.625rem}.table-btn.danger{color:var(--accent-red);margin-left:.5rem}.dot.online{color:var(--accent-green)}.dot.offline{color:var(--text-muted)}.device-config-form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.device-config-form .field{display:flex;flex-direction:column;gap:.25rem}.device-config-form .field label{font-size:.75rem;color:var(--text-muted)}.device-config-form .field input,.device-config-form .field select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);font-size:.75rem;font-family:var(--font-mono)}.server-checkboxes{display:flex;flex-direction:column;gap:.25rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-primary);padding:.375rem;background:var(--bg-primary);border:1px solid var(--border);cursor:pointer}.save-btn{width:100%;padding:.5rem;background:#00d4ff1a;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.75rem;cursor:pointer}.dialog-box{background:var(--bg-secondary);border:1px solid var(--border);padding:1.5rem;min-width:400px}.dialog-title{font-size:1rem;color:var(--text-primary);margin-bottom:1rem}.dialog-fields{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.dialog-fields .field{display:flex;flex-direction:column;gap:.25rem}.dialog-fields .field label{font-size:.75rem;color:var(--text-muted)}.dialog-fields .field input,.dialog-fields .field select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);font-size:.75rem}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem}.confirm-cancel{padding:.5rem 1rem;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;cursor:pointer}.portmapping-panel{background:var(--bg-secondary);border:1px solid var(--border)}.pm-table{width:100%;border-collapse:collapse;font-size:.75rem}.pm-table th,.pm-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border)}.pm-table th{color:var(--text-muted);font-weight:400}.pm-table .mono{font-family:var(--font-mono)}.pm-toggle{padding:.75rem;border-bottom:1px solid var(--border)}.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary);cursor:pointer}.device-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.back-btn{padding:.375rem .75rem;background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;text-decoration:none;cursor:pointer}.back-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.device-name{font-family:var(--font-display);font-size:1rem;color:var(--text-primary)}.status-badge{padding:.25rem .5rem;font-size:.625rem;letter-spacing:.1em}.status-badge.online{background:#10b9811a;border:1px solid var(--accent-green);color:var(--accent-green)}.status-badge.offline{background:#6b72801a;border:1px solid var(--text-muted);color:var(--text-muted)}.device-meta{margin-left:auto;font-size:.75rem;color:var(--text-muted)}.tab-bar{display:flex;gap:.25rem;padding:.5rem 1.5rem;background:var(--bg-primary);border-bottom:1px solid var(--border)}.tab-btn{padding:.5rem 1rem;background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:var(--text-primary);background:var(--bg-tertiary);border-color:var(--border)}.tab-btn.active{color:var(--accent-cyan);background:#00d4ff0d;border-color:var(--accent-cyan)}.placeholder-content{display:flex;align-items:center;justify-content:center;height:100%;font-size:.875rem;color:var(--text-muted)}.ruler-tab-layout{display:flex;gap:1rem;height:100%}.ruler-tab-left{flex:1;display:flex;flex-direction:column;gap:1rem}.ruler-tab-right{width:360px;display:flex;flex-direction:column;gap:1rem}.video-tab-layout{display:flex;flex-direction:column;gap:1rem;height:100%;padding:1rem}.video-tab-main{flex:1;min-height:0}.video-tab-controls{display:flex;gap:1rem}.controls-left{flex:1}.controls-right{width:280px;display:flex;flex-direction:column;gap:1rem}.app-container{height:100vh;display:flex;flex-direction:column;background:var(--bg-primary);position:relative;overflow:hidden}.scan-line{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);opacity:.1;animation:scan-line 8s linear infinite;pointer-events:none;z-index:1000}.nav-bar{display:flex;gap:.5rem;padding:.5rem 1.5rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.nav-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s ease;letter-spacing:.05em}.nav-btn:hover{color:var(--text-primary);background:var(--bg-tertiary);border-color:var(--border)}.nav-btn.active{color:var(--accent-cyan);background:#00d4ff0d;border-color:var(--accent-cyan)}.main-content{flex:1;overflow:hidden;padding:1rem}.dashboard-view{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:100%}.devices-view,.records-view{height:100%}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.action-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all .2s ease}.action-btn:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}.footer{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;background:var(--bg-secondary);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.625rem;color:var(--text-muted);letter-spacing:.1em}.login-page{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary)}.login-container{width:100%;max-width:400px}.login-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--accent-cyan);text-align:center;letter-spacing:.2em;margin-bottom:.5rem}.login-subtitle{font-size:.75rem;color:var(--text-muted);text-align:center;margin-bottom:2rem;letter-spacing:.1em}.loading-screen{height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-family:var(--font-mono);font-size:.875rem}:root{--bg-primary: #0a0e14;--bg-secondary: #111820;--bg-tertiary: #1a2332;--surface: #0d1219;--border: #1e3a5f;--border-glow: #00d4ff;--text-primary: #e0e6ed;--text-secondary: #7a8b9a;--text-muted: #4a5568;--accent-cyan: #00d4ff;--accent-green: #00ff88;--accent-orange: #ff9f1c;--accent-red: #ff3366;--accent-blue: #3b82f6;--font-display: "Orbitron", monospace;--font-mono: "JetBrains Mono", monospace;--glow-cyan: 0 0 20px rgba(0, 212, 255, .3);--glow-green: 0 0 20px rgba(0, 255, 136, .3);--glow-orange: 0 0 20px rgba(255, 159, 28, .3);--glow-red: 0 0 20px rgba(255, 51, 102, .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.5}}@keyframes scan-line{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes data-flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}95%{opacity:.9}96%{opacity:1}}