:root{--bg-base:#06070d;--bg-surface:#0e111a;--bg-surface-elevated:#161a29;--border-color:#ffffff0f;--border-hover:#ffffff1f;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-tertiary:#64748b;--cyan-primary:#00f2fe;--cyan-glow:#00f2fe40;--cyan-dim:#00f2fe1a;--purple-primary:#bd34fe;--purple-glow:#bd34fe40;--purple-dim:#bd34fe1a;--danger-primary:#ef4444;--danger-glow:#ef444440;--warning-primary:#f59e0b;--success-primary:#10b981;--success-glow:#10b98140;--font-ui:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1);--transition-fast:all .15s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-ui);min-height:100vh;font-size:16px;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--bg-surface-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}#app-container{background-image:radial-gradient(circle at 10% 20%,#bd34fe0d 0%,#0000 40%),radial-gradient(circle at 90% 80%,#00f2fe0d 0%,#0000 40%);flex-direction:column;min-height:100vh;display:flex;position:relative}.app-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;background-color:#06070db3;justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.logo-area{align-items:center;gap:.75rem;display:flex}.logo-icon{color:var(--cyan-primary);text-shadow:0 0 10px var(--cyan-glow);font-size:1.5rem;animation:3s ease-in-out infinite float}.logo-text{letter-spacing:2px;background:linear-gradient(135deg, var(--text-primary) 30%, var(--cyan-primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.version-tag{font-family:var(--font-mono);color:var(--cyan-primary);background:var(--cyan-dim);letter-spacing:.5px;border:1px solid #00f2fe33;border-radius:4px;padding:.15rem .4rem;font-size:.7rem}.status-indicator{border:1px solid var(--border-color);background-color:#ffffff08;border-radius:20px;align-items:center;gap:.6rem;padding:.4rem .8rem;display:flex}.status-text{color:var(--text-secondary);font-size:.85rem;font-weight:600}.status-dot{border-radius:50%;width:8px;height:8px;position:relative}.status-dot.disconnected{background-color:var(--danger-primary);box-shadow:0 0 8px var(--danger-primary)}.status-dot.connecting{background-color:var(--warning-primary);box-shadow:0 0 8px var(--warning-primary);animation:1.5s infinite pulse}.status-dot.connected{background-color:var(--success-primary);box-shadow:0 0 10px var(--success-primary);animation:2s infinite pulse-success}.console-dashboard{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:1200px;margin:0 auto;padding:2.5rem 2rem;display:flex}.intro-section{text-align:center;margin-bottom:3rem}.intro-section h2{letter-spacing:-.5px;margin-bottom:.5rem;font-size:2.5rem;font-weight:800}.intro-section p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.connection-grid{grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:2.5rem;margin-bottom:3rem;display:grid}@media (width<=968px){.connection-grid{grid-template-columns:1fr}}.console-card{background-color:var(--bg-surface);border:1px solid var(--border-color);transition:var(--transition-smooth);border-radius:20px;flex-direction:column;gap:1.5rem;padding:2rem;display:flex;position:relative;overflow:hidden}.console-card:hover{border-color:var(--border-hover);transform:translateY(-4px)}.usb-card:hover{box-shadow:0 12px 30px #00f2fe0d}.wifi-card:hover{box-shadow:0 12px 30px #bd34fe0d}.card-glow{pointer-events:none;z-index:0;opacity:.15;width:100%;height:100%;transition:var(--transition-smooth);position:absolute;top:0;left:0}.usb-card .card-glow{background:radial-gradient(circle at top left, var(--cyan-primary), transparent 60%)}.wifi-card .card-glow{background:radial-gradient(circle at top left, var(--purple-primary), transparent 60%)}.console-card:hover .card-glow{opacity:.25}.card-header{z-index:1;align-items:center;gap:1.25rem;display:flex;position:relative}.card-icon{border:1px solid var(--border-color);background-color:#ffffff08;border-radius:14px;justify-content:center;align-items:center;width:64px;height:64px;font-size:2.25rem;display:flex}.card-title-area h3{margin-bottom:.2rem;font-size:1.35rem;font-weight:700}.card-title-area p{color:var(--text-secondary);font-size:.85rem}.card-body{z-index:1;flex-direction:column;flex:1;gap:1.5rem;display:flex;position:relative}.btn{font-family:var(--font-ui);cursor:pointer;transition:var(--transition-smooth);text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem;font-size:1rem;font-weight:600;display:flex}.btn-primary{color:#06070d;background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%)}.btn-secondary{color:var(--text-primary);background:linear-gradient(135deg,#bd34fe 0%,#7209b7 100%)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.glow-cyan:hover{box-shadow:0 0 20px var(--cyan-glow)}.glow-purple:hover{box-shadow:0 0 20px var(--purple-glow)}.btn-action{background-color:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-primary)}.btn-action:not(:disabled):hover{border-color:var(--cyan-primary);box-shadow:0 0 10px #00f2fe26}.btn-demo{border:1px dashed var(--border-color);color:var(--text-secondary);text-transform:none;background-color:#ffffff05;border-radius:30px;width:auto;padding:.75rem 2rem;font-size:.9rem}.btn-demo:hover{border-color:var(--cyan-primary);color:var(--text-primary);background-color:#ffffff0d}.console-log{background-color:var(--bg-base);border:1px solid var(--border-color);font-family:var(--font-mono);border-radius:10px;flex-direction:column;gap:.25rem;height:70px;padding:.75rem 1rem;font-size:.8rem;display:flex;overflow-y:auto}.log-line{word-break:break-all;line-height:1.35}.log-line.text-muted{color:var(--text-tertiary)}.log-line.info{color:var(--cyan-primary)}.log-line.error{color:var(--danger-primary)}.log-line.success{color:var(--success-primary)}.guide-accordion{border-top:1px solid var(--border-color);margin-top:.5rem;padding-top:1.25rem}.accordion-header{width:100%;color:var(--text-secondary);font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;padding:.25rem 0;font-size:.9rem;font-weight:600;display:flex}.accordion-header:hover{color:var(--text-primary)}.accordion-header .arrow{font-size:.7rem;transition:transform .3s}.accordion-header.active .arrow{transform:rotate(180deg)}.accordion-content{max-height:0;transition:max-height .3s cubic-bezier(0,1,0,1);overflow:hidden}.accordion-header.active+.accordion-content{max-height:1000px;transition:max-height .3s cubic-bezier(1,0,1,0)}.guide-steps{flex-direction:column;gap:.85rem;margin-top:1rem;list-style-type:none;display:flex}.guide-steps li{align-items:flex-start;gap:.75rem;display:flex}.step-num{font-family:var(--font-mono);background-color:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--cyan-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-top:.15rem;font-size:.75rem;display:flex;box-shadow:0 0 5px #00f2fe26}.step-text{color:var(--text-secondary);font-size:.85rem;line-height:1.45}.step-text strong{color:var(--text-primary)}.wifi-setup-area{border-top:1px dashed var(--border-color);flex-direction:column;gap:1.5rem;padding-top:1.5rem;animation:.4s ease-out fadeIn;display:flex}.wifi-options-split{align-items:center;gap:1.5rem;display:flex}@media (width<=480px){.wifi-options-split{flex-direction:column}.pin-divider{padding:.5rem 0}}.qr-container{flex-direction:column;flex:1;align-items:center;gap:.5rem;display:flex}.qr-box{background-color:#fff;border-radius:8px;width:120px;height:120px;padding:8px;position:relative;overflow:hidden;box-shadow:0 0 20px #ffffff0d}.qr-svg{width:100%;height:100%}.qr-finder{fill:#06070d}.qr-finder-inner{stroke:#06070d;stroke-width:2.5px}.qr-dots{fill:#06070d}.qr-scan-line{background:linear-gradient(90deg, transparent, var(--purple-primary), transparent);width:calc(100% - 16px);height:2px;box-shadow:0 0 8px var(--purple-primary);animation:2s linear infinite scan;position:absolute;top:8px;left:8px}.qr-caption{color:var(--text-tertiary);font-size:.75rem;font-weight:600}.pin-divider{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.8rem;font-weight:700}.pin-container{flex-direction:column;flex:1.2;gap:.75rem;display:flex}.input-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.pin-inputs{gap:.5rem;display:flex}.pin-field{background-color:var(--bg-base);border:1px solid var(--border-color);text-align:center;width:44px;height:44px;color:var(--text-primary);font-family:var(--font-mono);transition:var(--transition-fast);border-radius:8px;font-size:1.25rem;font-weight:700}.pin-field:focus{border-color:var(--purple-primary);box-shadow:0 0 10px var(--purple-glow);outline:none}.demo-wrapper{flex-direction:column;align-items:center;gap:1.5rem;margin-top:1rem;display:flex}.demo-separator{background:linear-gradient(90deg, transparent, var(--border-color), transparent);width:100px;height:1px}.demo-panel{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.demo-text{color:var(--text-secondary);font-size:.85rem}.viewport-container{z-index:100;background-color:#000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}#video-stream{object-fit:contain;box-sizing:border-box;background-color:#000;width:100%;max-width:100%;height:100%;max-height:100%}.stream-loader{z-index:101;background-color:#06070df2;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.spinner-box{background-color:#0000;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.circle-core{border:3px solid #0000;border-top-color:var(--cyan-primary);border-bottom-color:var(--cyan-primary);width:50px;height:50px;box-shadow:0 0 15px var(--cyan-glow);border-radius:50%;animation:1s linear infinite spin}.stream-loader p{color:var(--text-primary);font-size:1.1rem;font-weight:600}.loader-details{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.8rem}.controller-overlay{border:1px solid var(--border-color);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:102;background-color:#0e111acc;border-radius:16px;flex-direction:column;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:2rem;right:2rem;overflow:hidden;box-shadow:0 8px 32px #00000080}.controller-drag-handle{text-align:center;color:var(--text-tertiary);cursor:grab;-webkit-user-select:none;user-select:none;background-color:#ffffff05;border-bottom:1px solid #ffffff08;padding:.3rem 0 .1rem;font-size:.75rem}.controller-content{flex-direction:column;gap:.75rem;padding:.75rem 1rem 1rem;display:flex}.stats-pill{border:1px solid var(--border-color);font-family:var(--font-mono);background-color:#0006;border-radius:8px;justify-content:space-around;gap:.75rem;padding:.4rem .8rem;font-size:.75rem;display:flex}.stat-item{font-weight:700}#stat-latency{color:var(--cyan-primary)}#stat-fps{color:var(--success-primary)}#stat-resolution{color:var(--warning-primary)}.controls-group{align-items:center;gap:.5rem;display:flex}.dropdown-wrapper{position:relative}.control-select{appearance:none;background-color:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-ui);cursor:pointer;transition:var(--transition-fast);border-radius:8px;outline:none;padding:.5rem 2rem .5rem .75rem;font-size:.8rem;font-weight:600}.control-select:focus,.control-select:hover{border-color:var(--cyan-primary)}.dropdown-wrapper:after{content:"▼";color:var(--text-secondary);pointer-events:none;font-size:.55rem;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.btn-ctrl{background-color:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-ui);cursor:pointer;transition:var(--transition-fast);border-radius:8px;align-items:center;gap:.4rem;padding:.5rem .75rem;font-size:.8rem;font-weight:600;display:flex}.btn-ctrl svg{flex-shrink:0}.btn-ctrl:hover{border-color:var(--cyan-primary);background-color:#ffffff05}.btn-ctrl.btn-danger:hover{border-color:var(--danger-primary);color:var(--danger-primary);box-shadow:0 0 10px var(--danger-glow)}.controller-overlay.autohide{opacity:.15}.controller-overlay.autohide:hover{opacity:1}.toast-notification{border:1px solid var(--border-color);z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background-color:#0e111ae6;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1.5rem;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(0);box-shadow:0 10px 25px #0006}.toast-notification.hidden{opacity:0;transform:translate(-50%)translateY(20px)}.toast-icon{font-size:1.1rem}.toast-message{font-size:.9rem;font-weight:600}.hidden{display:none!important}.dashboard-quality-selector{flex-direction:column;gap:.5rem;width:100%;margin-bottom:.5rem;display:flex}.dashboard-quality-selector .dropdown-wrapper{width:100%}.dashboard-quality-selector .control-select{background-color:var(--bg-surface-elevated);border:1px solid var(--border-color);width:100%;color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);border-radius:10px;padding:.75rem 2.25rem .75rem 1rem;font-size:.9rem}.dashboard-quality-selector .control-select:focus,.dashboard-quality-selector .control-select:hover{border-color:var(--cyan-primary);box-shadow:0 0 10px #00f2fe26}.quality-specs-info{font-family:var(--font-mono);color:var(--text-secondary);border:1px solid var(--border-color);transition:var(--transition-smooth);background-color:#ffffff05;border-radius:8px;margin-top:.25rem;padding:.6rem .8rem;font-size:.75rem;line-height:1.4}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes pulse{0%{transform:scale(.9);box-shadow:0 0 #f59e0bb3}70%{transform:scale(1);box-shadow:0 0 0 10px #f59e0b00}to{transform:scale(.9);box-shadow:0 0 #f59e0b00}}@keyframes pulse-success{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1.05);box-shadow:0 0 0 12px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes scan{0%{top:8px}50%{top:110px}to{top:8px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}