@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0f0a;--bg-secondary: #0d1a0d;--bg-card: #111a11;--bg-panel: #0a120a;--text-primary: #c8e6c8;--text-secondary: #6b8f6b;--text-dim: #3d5c3d;--accent: #ff6b35;--accent-glow: #ff6b3580;--warning: #ffd93d;--success: #39ff14;--success-dim: #39ff1440;--border: #2a3f2a;--border-bright: #4a6f4a;--scanline: rgba(0, 0, 0, .1)}body{font-family:Share Tech Mono,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);pointer-events:none;z-index:1000}.app{max-width:1000px;margin:0 auto;padding:2rem;position:relative}header{text-align:center;margin-bottom:2rem;padding:1.5rem;border:2px solid var(--border);background:var(--bg-panel);position:relative}header:before,header:after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--accent)}header:before{top:-2px;left:-2px;border-right:none;border-bottom:none}header:after{bottom:-2px;right:-2px;border-left:none;border-top:none}header h1{font-family:Orbitron,sans-serif;font-size:2.5rem;font-weight:700;color:var(--accent);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 0 20px var(--accent-glow);margin-bottom:.5rem}.tagline{color:var(--text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em}.tagline:before{content:"[ ";color:var(--text-dim)}.tagline:after{content:" ]";color:var(--text-dim)}.panel{border:1px solid var(--border);background:var(--bg-card);position:relative}.panel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--border),var(--border-bright),var(--border))}.panel-header{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center}.panel-header h3{font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary)}.panel-header .status-indicator{width:8px;height:8px;background:var(--success);box-shadow:0 0 8px var(--success);animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.panel-content{padding:1.5rem}.hue-setup{max-width:450px;margin:0 auto}.hue-setup .panel-content{text-align:center}.setup-step p{margin-bottom:1rem;color:var(--text-secondary);font-size:.875rem}.setup-step .highlight{color:var(--warning);font-weight:400;font-size:1rem;text-transform:uppercase;letter-spacing:.1em;animation:pulse-text 1.5s ease-in-out infinite}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.6}}.setup-step .hint{font-size:.75rem;color:var(--text-dim)}.spinner{width:40px;height:40px;border:2px solid var(--border);border-top-color:var(--accent);margin:0 auto 1rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pulse-icon{font-size:3rem;animation:pulse-icon 1.5s ease-in-out infinite;margin-bottom:1rem;filter:grayscale(100%) brightness(1.5)}@keyframes pulse-icon{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}.error-message{color:var(--accent);margin-bottom:1rem;padding:.75rem;border:1px solid var(--accent);background:#ff6b351a;font-size:.875rem}.btn-primary{font-family:Orbitron,sans-serif;background:transparent;color:var(--accent);border:2px solid var(--accent);padding:.75rem 2rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;transition:all .2s;position:relative}.btn-primary:hover{background:var(--accent);color:var(--bg-primary);box-shadow:0 0 20px var(--accent-glow)}.btn-primary:before,.btn-primary:after{content:"";position:absolute;width:6px;height:6px;border:1px solid var(--accent)}.btn-primary:before{top:-4px;left:-4px;border-right:none;border-bottom:none}.btn-primary:after{bottom:-4px;right:-4px;border-left:none;border-top:none}.btn-secondary{font-family:Share Tech Mono,monospace;background:var(--bg-panel);color:var(--text-secondary);border:1px solid var(--border);padding:.5rem 1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .2s}.btn-secondary:hover{border-color:var(--text-secondary);color:var(--text-primary)}.btn-text{background:none;border:none;color:var(--text-dim);cursor:pointer;font-family:Share Tech Mono,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:.25rem}.btn-text:hover{color:var(--accent)}.sensor-buttons{display:flex;gap:.75rem}.sensor-buttons button{flex:1}.btn-sensor{padding:.75rem 1.5rem;font-family:Share Tech Mono,monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;background:transparent;color:var(--success);border:2px solid var(--success);cursor:pointer;transition:all .2s}.btn-sensor:hover{background:var(--success-dim);box-shadow:0 0 15px var(--success-dim)}.btn-sensor:disabled{opacity:.5;cursor:not-allowed}.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:750px){.dashboard{grid-template-columns:1fr}}.webcam-preview,.light-controls{composes:panel}.webcam-preview .panel-header,.light-controls .panel-header{composes:panel-header}.video-container{position:relative;background:var(--bg-primary);border:1px solid var(--border);aspect-ratio:4/3;margin-bottom:1rem;overflow:hidden}.video-container video{width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.1) sepia(.1)}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em}.video-overlay{position:absolute;top:0;left:0;right:0;padding:.5rem;display:flex;justify-content:space-between;align-items:center}.live-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--success);text-shadow:0 0 4px var(--success);display:flex;align-items:center;gap:.35rem}.live-label:before{content:"";width:6px;height:6px;background:var(--success);box-shadow:0 0 6px var(--success);animation:blink 1s ease-in-out infinite}.data-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}.data-row:last-child{border-bottom:none}.data-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary)}.data-value{font-family:Orbitron,sans-serif;font-size:1.25rem;color:var(--success);text-shadow:0 0 10px var(--success-dim)}.data-value.warning{color:var(--warning)}.data-value.accent{color:var(--accent)}.meter{margin:1rem 0}.meter-label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary)}.meter-bar{height:20px;background:var(--bg-primary);border:1px solid var(--border);position:relative;overflow:hidden}.meter-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(0,0,0,.3) 4px,rgba(0,0,0,.3) 5px);z-index:1}.meter-fill{height:100%;background:linear-gradient(90deg,var(--success-dim),var(--success));box-shadow:0 0 10px var(--success-dim);transition:width .3s ease}.meter-fill.output{background:linear-gradient(90deg,var(--accent-glow),var(--accent));box-shadow:0 0 10px var(--accent-glow)}.lights-list{margin:1rem 0;max-height:150px;overflow-y:auto}.light-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border:1px solid transparent;cursor:pointer;transition:all .2s}.light-item:hover{background:var(--bg-panel);border-color:var(--border)}.light-item input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:1px solid var(--border);background:var(--bg-primary);cursor:pointer;position:relative}.light-item input[type=checkbox]:checked{border-color:var(--success);background:var(--success-dim)}.light-item input[type=checkbox]:checked:after{content:"■";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--success);font-size:10px}.light-name{flex:1;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.light-status{font-size:.6rem;text-transform:uppercase}.light-status.online{color:var(--success)}.light-status.online:before{content:"● "}.light-status.offline{color:var(--text-dim)}.light-status.offline:before{content:"○ "}.control-group{margin:1rem 0;padding:1rem;background:var(--bg-panel);border:1px solid var(--border)}.control-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.control-group-header label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary)}.toggle-switch{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-switch input{display:none}.toggle-track{width:36px;height:18px;background:var(--bg-primary);border:1px solid var(--border);position:relative;transition:all .2s}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--text-dim);transition:all .2s}.toggle-switch input:checked+.toggle-track{border-color:var(--success)}.toggle-switch input:checked+.toggle-track:after{left:20px;background:var(--success);box-shadow:0 0 8px var(--success)}.toggle-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.toggle-switch input:checked~.toggle-label{color:var(--success)}.slider-control{margin:1rem 0}.slider-control label{display:flex;justify-content:space-between;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.5rem}.slider-control input[type=range]{width:100%;height:4px;-webkit-appearance:none;background:var(--bg-primary);border:1px solid var(--border);outline:none}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border:none;cursor:pointer;box-shadow:0 0 8px var(--accent-glow)}.color-control{margin:1rem 0;padding:1rem;background:var(--bg-panel);border:1px solid var(--border)}.color-control label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.75rem}.color-wheel{display:flex;gap:1rem;align-items:center}.hue-slider{flex:1;height:24px;-webkit-appearance:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:1px solid var(--border);outline:none}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:28px;background:var(--text-primary);border:2px solid var(--bg-primary);cursor:pointer;box-shadow:0 0 8px #ffffff80}.saturation-slider{flex:1;height:24px;-webkit-appearance:none;border:1px solid var(--border);outline:none}.saturation-slider::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:28px;background:var(--text-primary);border:2px solid var(--bg-primary);cursor:pointer}.color-preview{width:40px;height:40px;border:2px solid var(--border);box-shadow:inset 0 0 10px #00000080}footer{margin-top:2rem;text-align:center;padding:1rem;border-top:1px solid var(--border)}.connected-status{color:var(--success);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.connected-status:before{content:"◉ LINK ACTIVE :: "}.section-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid var(--border);margin-bottom:1rem}.section-header h3{font-family:Orbitron,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary)}.mode-toggle{display:flex;margin-bottom:1.5rem;border:1px solid var(--border);background:var(--bg-primary)}.mode-btn{flex:1;padding:.75rem 1rem;font-family:Share Tech Mono,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;background:transparent;color:var(--text-dim);border:none;cursor:pointer;transition:all .2s}.mode-btn:first-child{border-right:1px solid var(--border)}.mode-btn:hover:not(:disabled){color:var(--text-secondary);background:var(--bg-panel)}.mode-btn.active{background:var(--bg-panel);color:var(--success);box-shadow:inset 0 0 10px var(--success-dim)}.mode-btn:disabled{cursor:not-allowed;opacity:.5}.relay-setup{text-align:left}.relay-setup .form-group{margin-bottom:1rem}.relay-setup label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.5rem}.relay-setup input[type=url],.relay-setup input[type=password],.relay-setup input[type=text]{width:100%;padding:.75rem;font-family:Share Tech Mono,monospace;font-size:.85rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);outline:none;transition:border-color .2s}.relay-setup input:focus{border-color:var(--accent)}.relay-setup input::placeholder{color:var(--text-dim)}.relay-setup input:disabled{opacity:.5;cursor:not-allowed}.relay-setup small{display:block;margin-top:.5rem;font-size:.65rem;color:var(--text-dim)}.relay-setup .button-row{display:flex;gap:.75rem;margin-bottom:1rem}.relay-setup button{font-family:Share Tech Mono,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:.6rem 1rem;cursor:pointer;transition:all .2s}.relay-setup button.secondary{background:var(--bg-panel);color:var(--text-secondary);border:1px solid var(--border)}.relay-setup button.secondary:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary)}.relay-setup button.danger{background:transparent;color:var(--accent);border:1px solid var(--accent)}.relay-setup button.danger:hover:not(:disabled){background:var(--accent);color:var(--bg-primary)}.relay-setup button.primary{background:transparent;color:var(--accent);border:2px solid var(--accent);width:100%;padding:.75rem}.relay-setup button.primary:hover:not(:disabled){background:var(--accent);color:var(--bg-primary);box-shadow:0 0 15px var(--accent-glow)}.relay-setup button:disabled{opacity:.5;cursor:not-allowed}.relay-setup .status-message{padding:.75rem;font-size:.75rem;margin-bottom:1rem;text-align:center}.relay-setup .status-message.success{color:var(--success);border:1px solid var(--success);background:var(--success-dim)}.relay-setup .status-message.error{color:var(--accent);border:1px solid var(--accent);background:#ff6b351a}.relay-setup .divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--text-dim);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.relay-setup .divider:before,.relay-setup .divider:after{content:"";flex:1;height:1px;background:var(--border)}.relay-setup .divider span{padding:0 1rem}.relay-setup .bridge-connect-section{border-top:1px solid var(--border);padding-top:1rem}.brightness-sensor{composes:panel}.color-mode-toggle{display:flex;margin:1rem 0;border:1px solid var(--border);background:var(--bg-primary)}.color-mode-btn{flex:1;padding:.6rem .75rem;font-family:Share Tech Mono,monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;background:transparent;color:var(--text-dim);border:none;cursor:pointer;transition:all .2s}.color-mode-btn:first-child{border-right:1px solid var(--border)}.color-mode-btn:hover{color:var(--text-secondary);background:var(--bg-panel)}.color-mode-btn.active{background:var(--bg-panel);color:var(--success);box-shadow:inset 0 0 8px var(--success-dim)}.temp-slider{width:100%;height:24px;-webkit-appearance:none;background:linear-gradient(to right,#ff8a00,#ffb46b,#ffd4a3,#fff4e5,#e8f4ff);border:1px solid var(--border);outline:none;margin-top:.5rem}.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:28px;background:var(--text-primary);border:2px solid var(--bg-primary);cursor:pointer;box-shadow:0 0 8px #ffffff80}.temp-slider::-moz-range-thumb{width:6px;height:28px;background:var(--text-primary);border:2px solid var(--bg-primary);cursor:pointer;box-shadow:0 0 8px #ffffff80}.color-control label{display:flex;justify-content:space-between;align-items:center}.kelvin-value{font-family:Orbitron,sans-serif;color:var(--accent);font-size:.9rem}.temp-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.temp-preset-btn{flex:1;min-width:calc(33% - .5rem);padding:.5rem .25rem;font-family:Share Tech Mono,monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;background:var(--bg-panel);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;transition:all .2s}.temp-preset-btn:hover{color:var(--text-secondary);border-color:var(--text-secondary)}.temp-preset-btn.active{color:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.connection-section{margin-top:1.5rem;padding:1rem;border-top:1px solid var(--border);background:var(--bg-panel)}.connection-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.connection-section h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin:0}.status-indicator.small{width:8px;height:8px}.mode-toggle{display:flex;gap:1rem;margin-bottom:1rem}.mode-toggle label{display:flex;align-items:center;gap:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);cursor:pointer}.mode-toggle label.active{color:var(--accent)}.mode-toggle input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border:1px solid var(--border);border-radius:50%;cursor:pointer}.mode-toggle input[type=radio]:checked{border-color:var(--accent);background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.local-connect,.relay-connect{display:flex;flex-direction:column;gap:.75rem}.relay-connect input{width:100%;padding:.5rem .75rem;font-family:Share Tech Mono,monospace;font-size:.75rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary)}.relay-connect input:focus{outline:none;border-color:var(--accent)}.relay-connect input::placeholder{color:var(--text-dim)}.btn-full{width:100%}.status-message{font-size:.7rem;color:var(--warning);text-align:center;animation:blink 1.5s ease-in-out infinite}.connected-info{display:flex;justify-content:space-between;align-items:center}.connection-status{font-size:.75rem;color:var(--success)}.disconnected-notice{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1rem;text-align:center;background:var(--bg-panel);border:1px solid var(--border);margin-bottom:1rem}.disconnected-notice .disconnected-icon{font-size:1.5rem;color:var(--text-dim);margin-bottom:.5rem;opacity:.6}.disconnected-notice .disconnected-title{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem}.disconnected-notice .disconnected-hint{font-size:.65rem;color:var(--text-dim)}