:root{--bg-app:#09090b;--bg-panel:#18181b;--bg-surface:#27272a;--primary:#8b5cf6;--primary-hover:#7c3aed;--primary-glow:rgba(139,92,246,0.5);--text-main:#f4f4f5;--text-muted:#a1a1aa;--border:#3f3f46;--border-focus:#8b5cf6;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--trans-fast:0.2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-main);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased}.app{display:flex;width:100%;height:100%;max-width:100%;overflow:hidden}.sidebar{width:320px;min-width:280px;max-width:600px;height:100%;resize:horizontal;overflow-y:auto;background-color:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--spacing-lg);gap:var(--spacing-lg);z-index:20}.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.main-content{flex:1;display:flex;flex-direction:column;background-color:var(--bg-app);position:relative;overflow:hidden}h1{font-size:1.25rem;font-weight:700;color:var(--text-main);margin-bottom:var(--spacing-sm);letter-spacing:-0.025em;background:linear-gradient(135deg,#fff 0%,#a1a1aa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.control-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.input-wrapper{display:flex;flex-direction:column;gap:6px}.input-wrapper label{font-size:0.85rem;color:var(--text-muted);font-weight:500}input[type="number"],input[type="text"]{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-main);padding:10px 12px;border-radius:var(--radius-sm);font-size:0.9rem;transition:border-color var(--trans-fast);width:100%}input[type="number"]:focus{outline:none;border-color:var(--border-focus)}.custom-select{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-main);padding:10px 12px;border-radius:var(--radius-sm);font-size:0.9rem;transition:border-color var(--trans-fast);width:100%;cursor:pointer;outline:none}.custom-select:focus{border-color:var(--border-focus)}.mt-2{margin-top:8px}.file-upload-label{display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);background:var(--bg-surface);border:1px dashed var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--trans-fast);color:var(--text-muted);text-align:center;font-size:0.9rem}.file-upload-label:hover{border-color:var(--primary);color:var(--primary);background:rgba(139,92,246,0.05)}input[type="file"]{display:none}.range-group{display:flex;flex-direction:column;gap:8px}input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer}input[type="range"]:focus{outline:none}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border)}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--primary);margin-top:-6px;box-shadow:0 0 10px rgba(139,92,246,0.5);border:2px solid #fff;transition:transform 0.1s ease}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1);background:var(--primary-hover)}.divider{height:1px;background:var(--border);margin:var(--spacing-sm) 0;opacity:0.5}.checkbox-wrapper{flex-direction:row !important;align-items:center;gap:12px !important;cursor:pointer}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.slider-round{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-surface);transition:.4s;border-radius:20px;border:1px solid var(--border)}.slider-round:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:white;transition:.4s;border-radius:50%}input:checked+.slider-round{background-color:var(--primary);border-color:var(--primary)}input:checked+.slider-round:before{transform:translateX(16px)}.label-text{font-size:0.85rem;font-weight:500;color:var(--text-main)}.crop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:rgba(255,255,255,0.02);border-radius:var(--radius-sm);border:1px solid var(--border)}.full-width{grid-column:span 2}.color-picker-wrapper{display:flex;align-items:center;gap:10px;background:var(--bg-surface);padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border)}input[type="color"]{-webkit-appearance:none;appearance:none;border:none;width:24px;height:24px;background:none;cursor:pointer;padding:0}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border:1px solid rgba(255,255,255,0.2);border-radius:4px}.color-hex{font-size:0.85rem;font-family:monospace;color:var(--text-muted)}.crop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.crop-marker{position:absolute;border:2px solid var(--marker-color,var(--primary));box-shadow:0 0 0 9999px rgba(0,0,0,0.7),0 0 20px var(--marker-glow,var(--primary-glow));pointer-events:all;cursor:move;box-sizing:border-box}.crop-handle{position:absolute;width:12px;height:12px;background:white;border:2px solid var(--marker-color,var(--primary));border-radius:50%;z-index:101}.crop-handle.tl{top:-6px;left:-6px;cursor:nw-resize}.crop-handle.tr{top:-6px;right:-6px;cursor:ne-resize}.crop-handle.bl{bottom:-6px;left:-6px;cursor:sw-resize}.crop-handle.br{bottom:-6px;right:-6px;cursor:se-resize}.crop-edge{position:absolute;z-index:99}.crop-edge.top{top:-4px;left:6px;right:6px;height:8px;cursor:n-resize}.crop-edge.bottom{bottom:-4px;left:6px;right:6px;height:8px;cursor:s-resize}.crop-edge.left{left:-4px;top:6px;bottom:6px;width:8px;cursor:w-resize}.crop-edge.right{right:-4px;top:6px;bottom:6px;width:8px;cursor:e-resize}.progress-container{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,0.03);padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border)}.progress-bar-wrapper{width:100%;height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden;border:1px solid var(--border)}.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--primary),#3b82f6);transition:width 0.1s ease;box-shadow:0 0 10px var(--primary-glow)}.progress-text{font-size:0.75rem;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums}.info-panel{background:rgba(255,255,255,0.03);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--border)}.info-item{font-size:0.85rem;color:var(--text-muted);margin-bottom:4px;display:flex;justify-content:space-between}.info-value{color:var(--text-main);font-weight:600}.btn{border:none;background:var(--primary);color:white;padding:12px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:all var(--trans-fast);font-size:0.95rem;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(139,92,246,0.3);flex-shrink:0;margin-bottom:8px}.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(139,92,246,0.4)}.btn:active{transform:translateY(0)}.btn:disabled{background:var(--bg-surface);color:var(--text-muted);cursor:not-allowed;box-shadow:none}.sidebar-footer{margin-top:auto;padding-top:var(--spacing-md);border-top:1px solid rgba(255,255,255,0.05);text-align:center;font-size:0.75rem;color:var(--text-muted);opacity:0.7}.sidebar-footer p{margin-bottom:2px}.video-wrapper{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative;overflow:hidden}video{max-width:100%;max-height:100%;outline:none;box-shadow:0 0 50px rgba(0,0,0,0.5)}.video-controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(10,10,10,0.8);backdrop-filter:blur(10px);padding:8px 16px;border-radius:30px;display:flex;gap:12px;border:1px solid rgba(255,255,255,0.1);z-index:10}.btn-icon{background:transparent;border:none;color:white;padding:8px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--trans-fast)}.btn-icon:hover{background:rgba(255,255,255,0.1);transform:scale(1.1)}#previewBtn{background:var(--primary);color:white;width:40px;height:40px;box-shadow:0 0 15px var(--primary-glow);transition:all var(--trans-fast)}#previewBtn:hover{background:var(--primary-hover);box-shadow:0 0 20px var(--primary-glow)}.hidden{display:none !important}#videoCanvas{max-width:100%;max-height:100%;outline:none;box-shadow:0 0 50px rgba(0,0,0,0.5)}.gpu-badge{position:absolute;top:16px;right:16px;background:rgba(139,92,246,0.2);border:1px solid var(--primary);color:#fff;padding:6px 12px;border-radius:20px;font-size:0.7rem;font-weight:700;text-transform:uppercase;box-shadow:0 0 15px var(--primary-glow);backdrop-filter:blur(5px);z-index:100;animation:pulse 2s infinite ease-in-out;pointer-events:none}@keyframes pulse{0%{box-shadow:0 0 5px rgba(139,92,246,0.2)}50%{box-shadow:0 0 15px rgba(139,92,246,0.5)}100%{box-shadow:0 0 5px rgba(139,92,246,0.2)}}.auth-status{background:rgba(255,255,255,0.03);padding:12px;border-radius:var(--radius-md);border:1px solid var(--border);margin-bottom:12px;text-align:left}.auth-status p{font-size:0.75rem;color:var(--text-muted);margin-bottom:8px !important}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity 0.3s ease}.modal-content{background:var(--bg-panel);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--border);width:100%;max-width:400px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,0.5)}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer}.auth-toggle{font-size:0.85rem;color:var(--text-muted);margin-top:16px;text-align:center}.auth-toggle a{color:var(--primary);text-decoration:none}.auth-extra{text-align:right;margin-bottom:12px}.auth-extra a{font-size:0.8rem;color:var(--text-muted);text-decoration:none;transition:color var(--trans-fast)}.divider-v{color:var(--border);font-size:0.8rem;margin:0 4px}.auth-extra a:hover{color:var(--primary)}.auth-info{font-size:0.85rem;color:var(--text-muted);margin-bottom:16px;line-height:1.4}.user-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.user-email{font-size:0.9rem;font-weight:600}.badge{padding:4px 8px;border-radius:4px;font-size:0.7rem;text-transform:uppercase;font-weight:800;background:var(--bg-surface)}.badge.pro{background:var(--primary);color:white;box-shadow:0 0 10px var(--primary-glow)}.btn-sm{padding:6px 12px;font-size:0.8rem;width:100%}.btn-muted{background:var(--bg-surface);color:var(--text-muted);box-shadow:none}.input-group{display:flex;gap:8px}.pro-locked::after{content:"PRO";position:absolute;top:4px;right:4px;background:var(--primary);color:white;font-size:0.6rem;font-weight:900;padding:2px 4px;border-radius:3px;pointer-events:none}.pro-locked{position:relative;opacity:0.6;pointer-events:none}.device-list{list-style:none;margin:var(--spacing-md) 0;display:flex;flex-direction:column;gap:10px}.device-item{background:var(--bg-surface);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:0.85rem}.device-info{display:flex;flex-direction:column;gap:2px;max-width:70%}.device-name{font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-id-small{font-size:0.65rem;color:var(--text-muted);font-family:monospace;opacity:0.6}.this-device-tag{font-size:0.65rem;background:var(--primary);color:white;padding:1px 4px;border-radius:3px;margin-left:6px;font-weight:800}.btn-icon-trash{background:rgba(239,68,68,0.1);color:#ef4444;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}.btn-icon-trash:hover{background:#ef4444;color:white}.btn-secondary{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-main);box-shadow:none;width:100%}.btn-secondary:hover{background:var(--border)}.small{font-size:0.75rem;line-height:1.4;color:var(--text-muted)}