:root{--egg-gold: var(--ey-yellow);--egg-amber: var(--ey-orange);--green: var(--ey-teal);--green-dim: var(--teal-dim);--red: var(--red);--red-dim: var(--red-dim);--blue: var(--ey-sky);--blue-dim: var(--blue-dim);--teal: var(--ey-teal);--dim: #64748b}.studio-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;min-height:70vh}.studio-left{display:flex;flex-direction:column;gap:16px}.studio-right{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column}.preview-container{background:#000;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-default);aspect-ratio:16 / 9;position:relative;box-shadow:var(--shadow-lg)}.preview-container video{width:100%;height:100%;object-fit:cover}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-tertiary);font-size:.88rem}.preview-icon{font-size:3rem;filter:grayscale(.3)}.rec-indicator{position:absolute;top:14px;left:14px;background:#dc2626d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 14px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;z-index:10}.rec-progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:#00000080;z-index:10}.rec-progress-fill{height:100%;background:linear-gradient(90deg,var(--ey-orange),var(--ey-yellow));transition:width 1s linear;width:0%}.controls-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:20px}.control-group{display:flex;flex-direction:column;gap:8px}.control-label{font-size:.82rem;font-weight:700;color:var(--text-secondary);letter-spacing:-.01em}.camera-selector{display:flex;flex-direction:column;gap:6px}.camera-option-loading{padding:10px;color:var(--text-muted);font-size:.82rem;text-align:center}.camera-option,.camera-selector label{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-normal);font-size:.82rem;color:var(--text-secondary)}.camera-option:hover,.camera-selector label:hover{border-color:var(--border-hover);color:var(--text-primary)}.camera-option.selected,.camera-selector input:checked+span,.camera-option.active{border-color:var(--ey-orange);background:#f05a300f;color:var(--ey-orange)}.duration-selector{display:flex;gap:6px}.duration-btn{flex:1;padding:10px 8px;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);font-family:var(--font-sans);color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:2px}.duration-btn:hover{border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.duration-btn.active{background:linear-gradient(135deg,var(--ey-orange),var(--ey-yellow));border-color:transparent;color:#000;font-weight:700;box-shadow:var(--shadow-glow-gold)}.duration-icon{font-size:1.1rem}.duration-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.duration-time{font-size:.72rem;font-weight:600;opacity:.8}.record-actions{display:flex;gap:10px}.btn-record{flex:1;padding:16px;background:linear-gradient(135deg,var(--red),var(--ey-orange));border:none;border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.btn-record:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow-red)}.btn-record:disabled{opacity:.4;cursor:not-allowed}.btn-record-icon{font-size:1.3rem}.btn-record-text{font-size:1rem}.btn-stop{flex:1;padding:16px;background:var(--bg-card);border:2px solid var(--red);border-radius:var(--radius-md);color:var(--red);font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;gap:10px}.btn-stop:hover{background:var(--red-dim);transform:translateY(-2px);box-shadow:var(--shadow-glow-red)}.btn-stop-icon{font-size:1.3rem}.btn-stop-text{font-size:1rem}.status-message{font-size:.82rem;color:var(--text-tertiary);text-align:center;min-height:20px}.status-message.error{color:var(--red)}.status-message.success{color:var(--green)}.rec-dot{width:10px;height:10px;border-radius:50%;background:#fff;display:inline-block;animation:rec-dot-blink .8s infinite}@keyframes rec-dot-blink{0%,to{opacity:1}50%{opacity:.3}}.rec-timer{font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}.btn-record.recording{animation:rec-pulse 1.5s infinite ease-in-out}@keyframes rec-pulse{0%,to{box-shadow:0 0 #c84b3166}50%{box-shadow:0 0 0 14px #c84b3100}}.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.library-header h2{font-size:1rem;font-weight:700;letter-spacing:-.01em}.library-stats{font-size:.75rem;color:var(--text-tertiary);font-weight:600}.recordings-list{flex:1;overflow-y:auto}.recording-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-subtle);transition:background .2s}.recording-item:last-child{border-bottom:none}.recording-item:hover{background:#ffffff05;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:var(--radius-md)}.empty-state{text-align:center;padding:48px 20px;color:var(--text-tertiary)}.empty-icon{font-size:3rem;margin-bottom:16px;filter:grayscale(.3)}.loading-spinner{text-align:center;padding:40px;color:var(--ey-orange)}.quality-selector{display:flex;gap:6px}.res-btn{flex:1;padding:10px 8px;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);font-family:var(--font-sans);color:var(--text-secondary);font-size:.8rem;font-weight:600;display:flex;justify-content:center;align-items:center}.res-btn:hover{border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.res-active{background:linear-gradient(135deg,var(--teal),#34d399)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--shadow-glow-green);font-weight:700}@media (max-width: 900px){#app{padding:16px}.header{flex-direction:column;text-align:center;gap:8px}.studio-layout{grid-template-columns:1fr}.studio-right{order:2}.duration-selector{flex-wrap:wrap}}