:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-card: linear-gradient(180deg, rgba(22, 27, 34, .9) 0%, rgba(13, 17, 23, .7) 100%);--border-primary: #30363d;--border-secondary: #21262d;--border-active: #58a6ff;--text-primary: #f0f6fc;--text-secondary: #c9d1d9;--text-muted: #8b949e;--text-dimmed: #7d8590;--text-faded: #484f58;--accent-blue: #58a6ff;--accent-blue-bright: #79c0ff;--accent-blue-dark: #1f6feb;--accent-green: #3fb950;--accent-green-dark: #238636;--accent-red: #f85149;--accent-red-dark: #da3633;--accent-orange: #f0883e;--accent-purple: #a371f7;--accent-purple-dark: #8957e5;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .6);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-smooth: .25s cubic-bezier(.4, 0, .2, 1);--font-primary: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace}html,body{margin:0;padding:0;height:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#app{height:100vh;width:100vw;overflow:hidden;font-family:var(--font-primary);display:flex;flex-direction:column}.layout{display:flex;flex:1;width:100%;min-height:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-faded)}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:11px;font-weight:500;color:var(--text-primary);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--transition-fast);pointer-events:none;z-index:1000;box-shadow:var(--shadow-md)}[data-tooltip]:before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--border-primary);opacity:0;visibility:hidden;transition:all var(--transition-fast);pointer-events:none;z-index:1000}[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;visibility:visible}.ctrl-separator{width:1px;height:20px;background:var(--border-primary);margin:0 4px}.swiftui-link{color:var(--accent-blue);text-decoration:none;font-weight:500;transition:all var(--transition-normal);position:relative}.swiftui-link:hover{color:var(--accent-blue-bright);text-decoration:underline}.swiftui-link:active{color:var(--accent-blue-dark)}.panel-toggle{position:absolute;background:#0d1117e6;border:1px solid #30363d;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel-toggle:hover{background:#21262df2;color:#f0f6fc;border-color:#484f58}.sidebar-toggle{right:0;top:50%;transform:translateY(-50%);width:24px;height:60px;border-radius:8px 0 0 8px;border-right:none}.sidebar-toggle i{transition:transform .3s ease}.layout.sidebar-hidden .sidebar-toggle{right:0}.layout.sidebar-hidden .sidebar-toggle i{transform:rotate(180deg)}.timeline-toggle{bottom:10px;left:50%;transform:translate(-50%);width:60px;height:24px;border-radius:8px 8px 0 0;border-bottom:none}.timeline-toggle i{transition:transform .3s ease}.layout.timeline-hidden .timeline-toggle{bottom:10px}.layout.timeline-hidden .timeline-toggle i{transform:rotate(180deg)}.side-panel{width:393px;background:linear-gradient(180deg,#0d1117,#010409);color:#f0f6fc;padding:20px;box-sizing:border-box;border-left:1px solid #21262d;display:flex;flex-direction:column;gap:14px;overflow-y:auto;position:relative;z-index:10;box-shadow:-4px 0 20px #0000004d;transition:margin-right .3s ease,opacity .3s ease,transform .3s ease}.layout.sidebar-hidden .side-panel{margin-right:-393px;opacity:0;pointer-events:none}.layout.sidebar-hidden .three-container{flex:1}.side-panel::-webkit-scrollbar{width:6px}.side-panel::-webkit-scrollbar-track{background:transparent}.side-panel::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.side-panel::-webkit-scrollbar-thumb:hover{background:#484f58}.side-panel h1{font-size:20px;margin:0}.side-panel h3{font-size:14px;margin:0 0 8px;color:#7d8590}.panel-header{padding:20px;margin:-20px -20px 10px;background:linear-gradient(135deg,#1f6feb33,#58a6ff14);border-bottom:1px solid #21262d;border-radius:0}.panel-header h1{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}.panel-header h1 i{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f6feb,#388bfd);border-radius:10px;color:#fff;font-size:16px;box-shadow:0 4px 12px #1f6feb66}.panel-header .subtitle{margin:6px 0 0 48px;font-size:11px;color:#7d8590;font-weight:400;letter-spacing:.3px}.panel-header h1 .version{font-size:11px;font-weight:500;color:#7d8590;background:#30363d99;padding:3px 8px;border-radius:6px;margin-left:4px}.control-section{padding:16px;background:linear-gradient(180deg,#161b22,#0d1117);border:1px solid #21262d;border-radius:14px;transition:all .25s cubic-bezier(.4,0,.2,1)}.control-section:hover{border-color:#30363d;box-shadow:0 4px 12px #0003}.control-section:first-of-type{margin-top:0}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(48,54,61,.6)}.section-header i:first-child{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#58a6ff40,#1f6feb33);border-radius:10px;color:#58a6ff;font-size:14px;box-shadow:0 2px 8px #58a6ff26}.section-header h3{margin:0;font-size:13px;font-weight:700;color:#f0f6fc;text-transform:uppercase;letter-spacing:.8px;flex:1}.control-section.collapsible .section-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;margin-bottom:14px}.control-section.collapsible .section-header:hover{background:#ffffff05;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;border-radius:8px}.collapse-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#ffffff0d;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapse-icon i{font-size:10px!important;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;color:#7d8590!important;transition:transform .3s cubic-bezier(.4,0,.2,1)}.control-section.collapsible:hover .collapse-icon{background:#58a6ff26}.control-section.collapsible:hover .collapse-icon i{color:#58a6ff!important}.section-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease-out}.section-content>*{overflow:hidden;min-height:0}.section-content-inner{display:flex;flex-direction:column;gap:12px}.control-section.collapsed .section-header{margin-bottom:0;padding-bottom:0;border-bottom-color:transparent}.control-section.collapsible .section-header{transition:margin-bottom .25s ease-out,padding-bottom .25s ease-out,border-bottom-color .25s ease-out}.control-section.collapsed .section-content{grid-template-rows:0fr}.control-section.collapsed .collapse-icon i{transform:rotate(-90deg)}.uploaded-media-list{display:flex;flex-direction:column;gap:8px}.uploaded-media-item{display:flex;align-items:center;gap:12px;padding:12px;background:#161b2299;border:1px solid rgba(48,54,61,.8);border-radius:8px;transition:all .2s ease}.uploaded-media-item:hover{background:#161b22cc;border-color:#58a6ff4d}.uploaded-media-thumbnail{width:60px;height:60px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#0d1117cc;display:flex;align-items:center;justify-content:center;position:relative}.uploaded-media-thumbnail img,.uploaded-media-thumbnail video{width:100%;height:100%;object-fit:cover}.uploaded-media-thumbnail i{font-size:24px;color:#7d859080}.video-badge{position:absolute;bottom:4px;right:4px;background:#000000b3;color:#fff;width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px}.uploaded-media-info{flex:1;display:flex;flex-direction:column;gap:4px}.uploaded-media-title{font-size:13px;font-weight:600;color:#c9d1d9}.uploaded-media-type{display:flex;align-items:center;gap:6px;font-size:11px;color:#7d8590}.uploaded-media-type i{font-size:10px}.uploaded-media-type-badge{padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.uploaded-media-type-badge.canvas{background:#f9731633;color:#f97316;border:1px solid rgba(249,115,22,.3)}.uploaded-media-type-badge.mockup{background:#a855f733;color:#a855f7;border:1px solid rgba(168,85,247,.3)}.uploaded-media-delete{width:32px;height:32px;border-radius:6px;border:1px solid rgba(248,81,73,.3);background:#f851491a;color:#f85149;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.uploaded-media-delete:hover{background:#f8514933;border-color:#f85149;transform:scale(1.05)}.uploaded-media-placeholder{display:flex;align-items:center;gap:12px;padding:16px;background:#161b2266;border:2px dashed rgba(168,85,247,.4);border-radius:8px;cursor:pointer;transition:all .3s ease}.uploaded-media-placeholder:hover{background:#a855f71a;border-color:#a855f799}.uploaded-media-placeholder.drag-over{background:#a855f733;border-color:#a855f7;transform:scale(1.02)}.uploaded-media-placeholder.canvas-placeholder{border-color:#f9731666}.uploaded-media-placeholder.canvas-placeholder:hover{background:#f973161a;border-color:#f9731699}.uploaded-media-placeholder.canvas-placeholder.drag-over{background:#f9731633;border-color:#f97316}.uploaded-media-placeholder.canvas-placeholder .placeholder-icon{background:#f973161a}.uploaded-media-placeholder.canvas-placeholder .placeholder-icon i{color:#f97316}.uploaded-media-placeholder.watermark-placeholder{border-color:#58a6ff66}.uploaded-media-placeholder.watermark-placeholder:hover{background:#58a6ff1a;border-color:#58a6ff99}.uploaded-media-placeholder.watermark-placeholder.drag-over{background:#58a6ff33;border-color:#58a6ff}.uploaded-media-placeholder.watermark-placeholder .placeholder-icon{background:#58a6ff1a}.uploaded-media-placeholder.watermark-placeholder .placeholder-icon i{color:#58a6ff}.uploaded-media-placeholder.music-placeholder{border-color:#8b5cf666}.uploaded-media-placeholder.music-placeholder:hover{background:#8b5cf61a;border-color:#8b5cf699}.uploaded-media-placeholder.music-placeholder.drag-over{background:#8b5cf633;border-color:#8b5cf6}.uploaded-media-placeholder.music-placeholder .placeholder-icon{background:#8b5cf61a}.uploaded-media-placeholder.music-placeholder .placeholder-icon i{color:#8b5cf6}.placeholder-icon{width:60px;height:60px;border-radius:6px;background:#a855f71a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.placeholder-icon i{font-size:28px;color:#a855f7}.placeholder-text{flex:1;display:flex;flex-direction:column;gap:4px}.placeholder-text strong{font-size:13px;font-weight:600;color:#c9d1d9}.placeholder-text span{font-size:11px;color:#7d8590}.watermark-dropzone{display:flex;align-items:center;gap:12px;padding:16px;background:#161b2266;border:2px dashed rgba(88,166,255,.4);border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:12px}.watermark-dropzone:hover:not(.disabled){background:#58a6ff1a;border-color:#58a6ff99}.watermark-dropzone.drag-over{background:#58a6ff33;border-color:#58a6ff;transform:scale(1.02)}.watermark-dropzone.disabled{cursor:not-allowed;opacity:.5}.dropzone-icon{width:50px;height:50px;border-radius:6px;background:#58a6ff1a;display:flex;align-items:center;justify-content:center;flex-shrink:0}.dropzone-icon i{font-size:24px;color:#58a6ff}.dropzone-text{flex:1;display:flex;flex-direction:column;gap:2px}.dropzone-text strong{font-size:13px;font-weight:600;color:#c9d1d9}.dropzone-text span{font-size:11px;color:#7d8590}.dropzone-text .dropzone-hint{font-size:10px;color:#6e7681;font-style:italic}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;padding:6px 0}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px}.checkbox-label:hover{color:#58a6ff}.view-controls{margin-bottom:12px}.orientation-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:5px}.orientation-btn{padding:14px 8px 12px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:12px;color:#7d8590;font-size:9px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}.orientation-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.orientation-btn:hover{background:linear-gradient(145deg,#30363d,#21262d);color:#f0f6fc;transform:translateY(-3px) scale(1.03);box-shadow:0 8px 20px #58a6ff33;border-color:#58a6ff}.orientation-btn:hover:before{opacity:1}.orientation-btn.active{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#58a6ff;color:#fff;box-shadow:0 0 20px #1f6feb80,0 6px 16px #1f6feb66;transform:translateY(-2px)}.orientation-btn.active:before{opacity:0}.orientation-btn i{font-size:18px;transition:filter .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));z-index:1}.orientation-btn:hover i{filter:drop-shadow(0 4px 8px rgba(88,166,255,.4))}.orientation-btn.active i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.orientation-btn span{z-index:1;letter-spacing:.3px}.ground-materials{margin-bottom:12px;padding-top:14px;border-top:1px solid rgba(48,54,61,.5)}.ground-material-label{font-size:10px;color:#7d8590;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}.ground-material-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ground-mat-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:12px;color:#7d8590;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;position:relative;overflow:hidden}.ground-mat-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.ground-mat-btn i{font-size:16px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));z-index:1}.ground-mat-btn:hover{background:linear-gradient(145deg,#30363d,#21262d);color:#f0f6fc;border-color:#484f58;transform:translateY(-3px) scale(1.03);box-shadow:0 8px 20px #00000040}.ground-mat-btn:hover:before{opacity:1}.ground-mat-btn:hover i{transform:scale(1.2)}.ground-mat-btn.active{background:linear-gradient(135deg,#58a6ff40,#1f6feb33);border-color:#58a6ff;color:#58a6ff;box-shadow:0 0 16px #58a6ff4d}.ground-mat-btn[data-material=mirror].active{background:linear-gradient(135deg,#a371f740,#8957e533);border-color:#a371f7;color:#a371f7;box-shadow:0 0 16px #a371f74d}.ground-mat-btn[data-material=metal].active{background:linear-gradient(135deg,#f0883e40,#db6d2833);border-color:#f0883e;color:#f0883e;box-shadow:0 0 16px #f0883e4d}.ground-mat-btn[data-material=glass].active{background:linear-gradient(135deg,#3fb95040,#2ea04333);border-color:#3fb950;color:#3fb950;box-shadow:0 0 16px #3fb9504d}.model-rotation-controls{margin-top:14px;padding-top:14px;border-top:1px solid rgba(48,54,61,.5)}.rotation-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.rotation-header span{font-size:10px;color:#7d8590;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.reset-rotation-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#58a6ff26,#1f6feb1a);border:2px solid rgba(88,166,255,.3);border-radius:8px;color:#58a6ff;font-size:13px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.reset-rotation-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.3),transparent 70%);opacity:0;transition:opacity .3s ease}.reset-rotation-btn:hover{background:linear-gradient(145deg,#58a6ff40,#1f6feb26);border-color:#58a6ff;transform:scale(1.1);box-shadow:0 4px 12px #58a6ff4d}.reset-rotation-btn:hover:before{opacity:1}.reset-rotation-btn:active{transform:scale(1.05)}.rotation-slider{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.rotation-slider:last-child{margin-bottom:0}.rotation-slider label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7d8590}.rotation-slider .axis-label{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-weight:800;font-size:11px;border:2px solid;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.rotation-slider:hover .axis-label{transform:scale(1.1)}.rotation-slider .axis-label.x{background:linear-gradient(135deg,#f8514940,#da363333);color:#f85149;border-color:#f8514966;box-shadow:0 2px 8px #f8514933}.rotation-slider .axis-label.y{background:linear-gradient(135deg,#3fb95040,#2ea04333);color:#3fb950;border-color:#3fb95066;box-shadow:0 2px 8px #3fb95033}.rotation-slider .axis-label.z{background:linear-gradient(135deg,#58a6ff40,#1f6feb33);color:#58a6ff;border-color:#58a6ff66;box-shadow:0 2px 8px #58a6ff33}.rotation-slider .rotation-value{font-weight:600;min-width:40px;text-align:right;color:#f0f6fc;font-size:12px}.rotation-slider input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:linear-gradient(90deg,#21262d,#30363d,#21262d);border-radius:4px;cursor:pointer;position:relative;border:1px solid rgba(48,54,61,.6);box-shadow:inset 0 1px 3px #0000004d}.rotation-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#58a6ff,#388bfd);border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 2px #161b22,0 0 0 4px #58a6ff4d,0 3px 8px #58a6ff66;border:2px solid rgba(255,255,255,.3)}.rotation-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 2px #161b22,0 0 0 4px #58a6ff80,0 4px 12px #58a6ff99}.rotation-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}.rotation-slider input#rotation-x::-webkit-slider-thumb{background:linear-gradient(135deg,#f85149,#da3633);box-shadow:0 0 0 2px #161b22,0 0 0 4px #f851494d,0 3px 8px #f8514966}.rotation-slider input#rotation-x::-webkit-slider-thumb:hover{box-shadow:0 0 0 2px #161b22,0 0 0 4px #f8514980,0 4px 12px #f8514999}.rotation-slider input#rotation-y::-webkit-slider-thumb{background:linear-gradient(135deg,#3fb950,#2ea043);box-shadow:0 0 0 2px #161b22,0 0 0 4px #3fb9504d,0 3px 8px #3fb95066}.rotation-slider input#rotation-y::-webkit-slider-thumb:hover{box-shadow:0 0 0 2px #161b22,0 0 0 4px #3fb95080,0 4px 12px #3fb95099}.rotation-slider input#rotation-z::-webkit-slider-thumb{background:linear-gradient(135deg,#58a6ff,#388bfd);box-shadow:0 0 0 2px #161b22,0 0 0 4px #58a6ff4d,0 3px 8px #58a6ff66}.rotation-slider input#rotation-z::-webkit-slider-thumb:hover{box-shadow:0 0 0 2px #161b22,0 0 0 4px #58a6ff80,0 4px 12px #58a6ff99}.slider-with-ticks{position:relative;width:100%}.slider-with-ticks input[type=range]{width:100%;margin-bottom:2px}.slider-ticks{display:flex;justify-content:space-between;padding:0 2px;position:relative}.slider-ticks:before{content:"";position:absolute;top:-8px;left:8px;right:8px;height:6px;background:repeating-linear-gradient(90deg,transparent,transparent 24%,#484f58 24%,#484f58 25%,transparent 25%);pointer-events:none}.slider-ticks .tick-label{font-size:10px;color:#6e7681;font-weight:500;text-align:center;width:32px;margin-top:2px}.slider-ticks .tick-label:first-child{text-align:left;margin-left:-2px}.slider-ticks .tick-label:last-child{text-align:right;margin-right:-2px}.slider-ticks .tick-label:nth-child(3){color:#7d8590;font-weight:600}.camera-presets{margin-top:14px;padding-top:14px;border-top:1px solid rgba(48,54,61,.5)}.camera-presets-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.camera-presets-header i{font-size:13px;color:#58a6ff}.camera-presets-header span{font-size:10px;color:#7d8590;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.camera-preset-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.camera-preset-btn{padding:12px 6px 10px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:10px;color:#7d8590;font-size:9px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;overflow:hidden}.camera-preset-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.camera-preset-btn:hover{background:linear-gradient(145deg,#30363d,#21262d);color:#f0f6fc;border-color:#58a6ff;transform:translateY(-3px) scale(1.03);box-shadow:0 8px 20px #58a6ff33}.camera-preset-btn:hover:before{opacity:1}.camera-preset-btn:active{transform:translateY(-1px) scale(.98)}.camera-preset-btn i{font-size:16px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:1}.camera-preset-btn:hover i{transform:scale(1.15)}.camera-preset-btn svg{width:20px;height:20px;stroke:currentColor;transition:all .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));z-index:1}.camera-preset-btn:hover svg{stroke:#58a6ff;transform:scale(1.15)}.camera-preset-btn.active{background:linear-gradient(135deg,#1f6feb,#1158c7);color:#fff;border-color:#58a6ff;box-shadow:0 0 20px #1f6feb80,0 6px 16px #1f6feb66;transform:translateY(-2px)}.camera-preset-btn.active:before{opacity:0}.camera-preset-btn.active svg{stroke:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.camera-preset-btn span{z-index:1;letter-spacing:.3px}.camera-animations-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(48,54,61,.5)}.camera-animations-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.camera-animations-header svg{width:16px;height:16px;stroke:#58a6ff}.camera-animations-header span{font-size:11px;color:#58a6ff;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.animation-duration-setting{margin-bottom:12px}.animation-duration-setting label{display:flex;align-items:center;gap:10px}.animation-duration-setting label span{font-size:10px;color:#7d8590;font-weight:500;text-transform:uppercase}.animation-duration-setting select{flex:1;padding:6px 10px;background:#161b22;border:1px solid #30363d;border-radius:6px;color:#f0f6fc;font-size:11px;cursor:pointer;transition:border-color .2s ease}.animation-duration-setting select:hover{border-color:#58a6ff}.animation-duration-setting select:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 2px #58a6ff33}.camera-animation-presets{display:flex;flex-direction:column;gap:8px}.camera-animation-presets::-webkit-scrollbar{width:6px}.camera-animation-presets::-webkit-scrollbar-track{background:#161b22;border-radius:3px}.camera-animation-presets::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.camera-animation-presets::-webkit-scrollbar-thumb:hover{background:#484f58}.animation-preset-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;transition:all .2s ease}.animation-preset-card:hover{border-color:#58a6ff;background:linear-gradient(180deg,#2d333b,#21262d)}.animation-preset-card.previewing{border-color:#f0883e;background:linear-gradient(180deg,#3d2d1f,#21262d);animation:preview-pulse 1s ease-in-out infinite}@keyframes preview-pulse{0%,to{box-shadow:0 0 #f0883e4d}50%{box-shadow:0 0 0 4px #f0883e00}}.preset-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#58a6ff1a;border-radius:8px;border:1px solid rgba(88,166,255,.2)}.preset-icon svg{width:32px;height:32px;stroke:#8b949e}.animation-preset-card:hover .preset-icon{background:#58a6ff26;border-color:#58a6ff4d}.animation-preset-card:hover .preset-icon svg{stroke:#c9d1d9}.preset-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.preset-name{font-size:12px;font-weight:600;color:#f0f6fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-desc{font-size:10px;color:#7d8590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-actions{display:flex;gap:6px;flex-shrink:0}.preset-actions button{width:32px;height:32px;border-radius:6px;border:1px solid #30363d;background:#161b22;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.preset-actions .preview-btn:hover{background:#2d333b;border-color:#f0883e;color:#f0883e}.preset-actions .preview-btn.active{background:linear-gradient(135deg,#f0883e,#d2691e);border-color:#f0883e;color:#fff}.preset-actions .add-btn:hover{background:linear-gradient(135deg,#238636,#2ea043);border-color:#3fb950;color:#fff}.preset-actions .add-btn:active{transform:scale(.9)}.preset-actions button i{font-size:12px}.camera-orbit-section{margin-top:12px;padding-top:12px;border-top:1px solid rgba(48,54,61,.3)}.camera-orbit-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.camera-orbit-header svg{width:16px;height:16px;stroke:#58a6ff}.camera-orbit-header span{font-size:10px;color:#58a6ff;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.camera-orbit-btn{width:100%;padding:12px 16px;background:linear-gradient(135deg,#238636,#2ea043);border:1px solid #3fb950;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.camera-orbit-btn:hover{background:linear-gradient(135deg,#2ea043,#3fb950);transform:translateY(-2px);box-shadow:0 6px 20px #2ea04366}.camera-orbit-btn:active{transform:translateY(0)}.camera-orbit-btn.orbiting{background:linear-gradient(135deg,#da3633,#f85149);border-color:#f85149;animation:pulse-orbit 1s ease-in-out infinite}.camera-orbit-btn.orbiting:hover{background:linear-gradient(135deg,#f85149,#ff6b6b);box-shadow:0 6px 20px #f8514966}@keyframes pulse-orbit{0%,to{box-shadow:0 0 #f8514966}50%{box-shadow:0 0 0 8px #f8514900}}.camera-orbit-btn i{font-size:14px}.camera-orbit-btn svg{width:20px;height:20px;stroke:#fff;transition:transform .3s ease}.camera-orbit-btn svg circle,.camera-orbit-btn svg polygon{fill:currentColor}.camera-orbit-btn.orbiting i{animation:spin 1s linear infinite}.camera-orbit-btn.orbiting svg.orbit-icon{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.orbit-settings{display:flex;gap:10px;margin-top:10px}.orbit-settings label{flex:1;display:flex;flex-direction:column;gap:4px}.orbit-settings label span{font-size:9px;color:#7d8590;font-weight:500;text-transform:uppercase}.orbit-settings select{padding:6px 8px;background:#161b22;border:1px solid #30363d;border-radius:6px;color:#f0f6fc;font-size:11px;cursor:pointer;transition:border-color .2s ease}.orbit-settings select:hover{border-color:#58a6ff}.orbit-settings select:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 2px #58a6ff33}.lighting-controls{display:flex;flex-direction:column;gap:10px}.lighting-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lighting-preset{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:10px;color:#7d8590;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.lighting-preset i{font-size:18px;transition:transform .2s ease}.lighting-preset span{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.lighting-preset:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;border-color:#484f58;transform:translateY(-2px)}.lighting-preset:hover i{transform:scale(1.15)}.lighting-preset.active{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#58a6ff;color:#fff;box-shadow:0 4px 16px #1f6feb59}.lighting-custom-panel{margin-top:8px;padding-top:10px;border-top:1px solid #21262d}.bg-animations-controls{display:flex;flex-direction:column;gap:10px}.bg-animation-type-select{margin-bottom:10px}.bg-animation-type-select>label{display:block;font-size:11px;color:#7d8590;margin-bottom:8px}.bg-animation-presets{display:flex;gap:8px;justify-content:space-between}.bg-animation-preset{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:10px;color:#7d8590;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.bg-animation-preset i{font-size:16px;transition:transform .2s ease}.bg-animation-preset:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;border-color:#484f58;transform:translateY(-2px)}.bg-animation-preset:hover i{transform:scale(1.15)}.bg-animation-preset.active{background:linear-gradient(135deg,#8b5cf6,#a855f7);border-color:#a78bfa;color:#fff;box-shadow:0 4px 16px #8b5cf659}.bg-animation-settings{margin-top:8px;padding-top:10px;border-top:1px solid #21262d}.lighting-slider{display:flex;align-items:center;gap:12px}.lighting-slider label{font-size:10px;color:#7d8590;min-width:70px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.lighting-slider input[type=range]{flex:1;height:8px;-webkit-appearance:none;background:linear-gradient(90deg,#21262d,#30363d,#21262d);border-radius:4px;cursor:pointer;border:1px solid rgba(48,54,61,.6);box-shadow:inset 0 1px 3px #0000004d}.lighting-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#f0883e,#d2691e);border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 2px #161b22,0 0 0 4px #f0883e4d,0 3px 8px #f0883e66;border:2px solid rgba(255,255,255,.3)}.lighting-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 0 2px #161b22,0 0 0 4px #f0883e80,0 4px 12px #f0883e99}.lighting-slider span{font-size:12px;color:#f0883e;font-weight:700;min-width:32px;text-align:right;font-family:SF Mono,Monaco,monospace}.lighting-color-row{margin-top:4px}.lighting-color{display:flex;align-items:center;gap:10px}.lighting-color label{font-size:11px;color:#7d8590}.lighting-color input[type=color]{width:50px;height:28px;border:2px solid #30363d;border-radius:6px;padding:0;cursor:pointer;background:none}.lighting-color input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.lighting-color input[type=color]::-webkit-color-swatch{border-radius:3px;border:none}.keyframe-info-panel{background:linear-gradient(180deg,#161b2299,#0d111766);border:1px solid #21262d;border-radius:10px;padding:14px;font-size:12px;color:#7d8590}.no-keyframe{display:flex;align-items:center;gap:10px;color:#484f58;padding:8px 0}.no-keyframe i{font-size:16px;opacity:.6}.effects-controls{display:flex;flex-direction:column;gap:12px}.dof-controls{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid rgba(48,54,61,.5);margin-top:4px}.project-section{padding:12px 16px}.project-card{display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(135deg,#1f6feb1a,#58a6ff0d);border:1px solid rgba(88,166,255,.2);border-radius:12px;margin-bottom:12px;transition:all .3s ease;position:relative}.project-card:hover{border-color:#58a6ff66;background:linear-gradient(135deg,#1f6feb26,#58a6ff14);box-shadow:0 4px 16px #1f6feb33}.project-card-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#58a6ff1a;border:1px solid rgba(88,166,255,.3);border-radius:8px;color:#58a6ff;font-size:14px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.project-card-btn:hover{background:#58a6ff33;border-color:#58a6ff;transform:scale(1.05)}.project-card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f6feb,#388bfd);border-radius:10px;color:#fff;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px #1f6feb66}.project-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.project-card-name{font-size:14px;font-weight:600;color:#f0f6fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-card-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:#7d8590}.project-date{display:flex;align-items:center;gap:4px}.project-date:before{content:"";font-family:"Font Awesome 6 Free";font-weight:400;font-size:10px}.project-buttons{display:flex;gap:8px;margin-top:5px}.project-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;color:#7d8590;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.project-btn i{font-size:14px}.project-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;border-color:#484f58;transform:translateY(-1px)}.project-btn:active{transform:translateY(0)}#new-project-button{background:linear-gradient(135deg,#1f6feb26,#58a6ff1a);border:1px solid rgba(88,166,255,.3);color:#58a6ff}#new-project-button:hover{background:linear-gradient(135deg,#1f6feb40,#58a6ff26);border-color:#58a6ff;color:#79c0ff}#save-project-button{background:linear-gradient(135deg,#2ea04326,#3fb9501a);border:1px solid rgba(63,185,80,.3);color:#3fb950}#save-project-button:hover{background:linear-gradient(135deg,#2ea04340,#3fb95026);border-color:#3fb950;color:#56d364}#load-project-button{background:linear-gradient(135deg,#a855f726,#8b5cf61a);border:1px solid rgba(168,85,247,.3);color:#a855f7}#load-project-button:hover{background:linear-gradient(135deg,#a855f740,#8b5cf626);border-color:#a855f7;color:#c084fc}.side-panel-footer{margin-top:auto;padding:16px 20px;border-top:1px solid #21262d;text-align:center;font-size:11px;color:#7d8590}.side-panel-footer p{margin:0}.side-panel-footer .copyright{margin-bottom:8px}.side-panel-footer .legal-links{font-size:10px}.side-panel-footer a{color:#7d8590;text-decoration:none;transition:color .2s}.side-panel-footer a:hover{color:#58a6ff}.side-panel-footer .separator{margin:0 8px;opacity:.5}.patreon-section{padding:12px 16px}.patreon-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#ff424d,#f96854);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #ff424d4d}.patreon-btn:hover{background:linear-gradient(135deg,#ff5a63,#ff7b6b);transform:translateY(-2px);box-shadow:0 6px 20px #ff424d66}.patreon-btn:active{transform:translateY(0)}.patreon-logo{width:18px;height:18px}.patreon-login-note{margin:8px 0;padding:10px 12px;font-size:12px;color:#ffffffd9;background:#f9731626;border:1px solid rgba(249,115,22,.3);border-radius:8px;text-align:center;line-height:1.5;display:flex;align-items:center;justify-content:center;gap:8px}.patreon-login-note i{font-size:14px;color:#f97316;flex-shrink:0}.export-buttons-section{display:flex;gap:10px;margin:0}.export-btn-side{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #30363d;border-radius:10px;background:#21262d;color:#f0f6fc;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}.export-btn-side:hover{background:#30363d;border-color:#484f58}.export-btn-side:active{background:#282e33}.export-btn-side i{font-size:16px}.export-btn-side span:first-of-type{white-space:nowrap}.export-btn-side.blue i{color:#58a6ff}.export-btn-side.purple i{color:#a371f7}.export-btn-side .export-remaining-badge{position:absolute;top:-6px;right:-6px;background:#f85149;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:8px}.patreon-join-free-btn{width:100%;display:none;align-items:center;justify-content:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,#ff424d,#f96854,#ff9a5a);border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #ff424d66,0 0 #ff424d80;position:relative;overflow:hidden;margin-top:22px}.patreon-join-free-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.patreon-join-free-btn:hover:before{left:100%}.patreon-join-free-btn:hover{background:linear-gradient(135deg,#ff5a63,#ff7b6b,#ffaa6e);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px #ff424d80,0 0 0 6px #ff424d33;border-color:#fff6}.patreon-join-free-btn:active{transform:translateY(-1px) scale(.98);box-shadow:0 6px 16px #ff424d66}.patreon-logo-small{width:20px;height:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.patreon-join-free-btn .arrow-icon{font-size:14px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.patreon-join-free-btn:hover .arrow-icon{transform:translate(4px);animation:arrowBounce .6s ease-in-out infinite}@keyframes arrowBounce{0%,to{transform:translate(4px)}50%{transform:translate(8px)}}.patreon-user{display:flex;align-items:center;justify-content:space-between;gap:12px}.patreon-user-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.patreon-user-actions{display:flex;align-items:center;gap:8px}.patreon-avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:10px;transition:transform .2s ease,box-shadow .2s ease}.patreon-avatar-btn:hover{transform:scale(1.05);box-shadow:0 0 12px #ff424d80}.patreon-avatar{width:40px;height:40px;border-radius:10px;border:2px solid #ff424d;object-fit:cover;flex-shrink:0}.patreon-user-details{display:flex;flex-direction:column;gap:2px;min-width:0}.patreon-username{font-size:14px;font-weight:600;color:#f0f6fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.patreon-tier{font-size:11px;font-weight:500;color:#ff424d;background:#ff424d26;padding:2px 8px;border-radius:4px;display:inline-block;width:fit-content;margin-top:5px}.patreon-tier.free{color:#7d8590;background:#7d859026}.patreon-tier.basic{color:#3fb950;background:#3fb95026}.patreon-tier.premium{color:#a371f7;background:#a371f726}.patreon-tier.pro{color:#f0883e;background:#f0883e26}.patreon-tier.ultimate{color:#f8d847;background:linear-gradient(135deg,#f8d84733,#ffb43226);border:1px solid rgba(248,216,71,.3)}.patreon-tier.tier-not-member{color:#484f58;background:#484f5826}.patreon-tier.tier-free{color:#7d8590;background:#7d859026}.patreon-tier.tier-coder{color:#3fb950;background:#3fb95026}.patreon-tier.tier-coder-pro{color:#a371f7;background:#a371f726}.patreon-tier.tier-coder-max{color:#f0883e;background:#f0883e26}.patreon-tier.tier-coder-ultra{color:#58a6ff;background:#58a6ff26}.patreon-tier.tier-game-coder{color:#f778ba;background:#f778ba26}.patreon-tier.tier-mobile-app{color:#f8d847;background:linear-gradient(135deg,#f8d84733,#ffb43226);border:1px solid rgba(248,216,71,.3)}.patreon-tier.active-patron{box-shadow:0 0 8px currentColor}.patreon-stats-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:relative;box-shadow:0 4px 15px #667eea66,0 2px 8px #0003,inset 0 1px #fff3,inset 0 -1px #0003;margin-right:8px}.patreon-stats-btn:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%,rgba(0,0,0,.1) 100%);border-radius:10px;opacity:1;transition:opacity .3s ease}.patreon-stats-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px #667eea99,0 4px 12px #0000004d,inset 0 1px #ffffff4d,inset 0 -1px #0003}.patreon-stats-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px #667eea66,0 1px 4px #0003,inset 0 1px 3px #0000004d}.patreon-stats-btn .stats-icon{width:20px;height:20px;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.patreon-logout-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f851491a;border:1px solid rgba(248,81,73,.3);border-radius:8px;color:#f85149;font-size:14px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.patreon-logout-btn:hover{background:#f8514933;border-color:#f85149;transform:scale(1.05)}.patreon-btn.loading{pointer-events:none;opacity:.7}.patreon-btn.loading span{display:none}.patreon-btn.loading:after{content:"Connecting..."}.patreon-info-modal-content{max-width:500px;max-height:80vh}.patreon-info-modal-content .legal-modal-body{padding:0;overflow-y:auto;max-height:calc(80vh - 60px)}.patreon-info-content{padding:20px}.patreon-info-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #30363d}.patreon-info-header img{width:64px;height:64px;border-radius:12px;border:2px solid #ff424d;object-fit:cover}.patreon-info-header-details h3{margin:0 0 8px;font-size:18px;font-weight:600;color:#f0f6fc}.patreon-info-section{margin-bottom:20px}.patreon-info-section h4{font-size:14px;font-weight:600;color:#7d8590;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.patreon-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.patreon-info-item{display:flex;flex-direction:column;gap:4px}.patreon-info-item.full-width{grid-column:1 / -1}.patreon-info-item label{font-size:11px;color:#7d8590;text-transform:uppercase;letter-spacing:.3px}.patreon-info-item span{font-size:14px;color:#f0f6fc;word-break:break-word}.patreon-info-tiers{display:flex;flex-wrap:wrap;gap:8px}.patreon-info-tier-tag{background:#ff424d26;color:#ff424d;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500}.status-active{color:#3fb950!important}.status-declined{color:#f85149!important}.status-former{color:#f0883e!important}.status-null{color:#7d8590!important}.lock-icon{position:absolute!important;top:-8px!important;right:-8px!important;font-size:9px!important;background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;width:20px!important;height:20px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 3px 10px #f59e0b80,0 0 0 3px #0d1117,inset 0 1px #ffffff4d!important;z-index:100!important;animation:lockPulse 2s ease-in-out infinite!important;pointer-events:none!important;font-weight:600!important}@keyframes lockPulse{0%,to{transform:scale(1);box-shadow:0 3px 10px #f59e0b80,0 0 0 3px #0d1117,inset 0 1px #ffffff4d}50%{transform:scale(1.15);box-shadow:0 5px 16px #f59e0bb3,0 0 0 3px #0d1117,0 0 0 6px #f59e0b4d,inset 0 1px #fff6}}.resolution-btn,.framerate-btn,.effect-btn,.fps-btn{position:relative!important}.resolution-btn,.framerate-btn,.effect-btn,.fps-btn,.fps-buttons,.resolution-buttons{overflow:visible!important}.join-free-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.join-free-popup{background:linear-gradient(135deg,#1a1d29,#252936);border-radius:16px;width:90%;max-width:420px;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff1a;animation:slideUp .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.join-free-popup-header{padding:24px 24px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between}.join-free-popup-header h2{margin:0;font-size:20px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}.join-free-popup-header h2 i{color:#f59e0b}.join-free-popup-close{background:#ffffff1a;border:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#ffffffb3}.join-free-popup-close:hover{background:#ffffff26;color:#fff}.join-free-popup-body{padding:24px}.join-free-popup-body p{margin:0 0 12px;color:#fffc;font-size:14px;line-height:1.6}.join-free-popup-body p:last-child{margin-bottom:0;color:#fff9}.join-free-popup-footer{padding:20px 24px 24px}.join-free-popup-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,#ff424d,#f96854,#ff9a5a);border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #ff424d66;position:relative;overflow:hidden}.join-free-popup-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.join-free-popup-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #ff424d80}.join-free-popup-btn:hover:before{left:100%}.join-free-popup-btn .arrow-icon{transition:transform .3s}.join-free-popup-btn:hover .arrow-icon{transform:translate(4px)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.project-media-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.project-media-modal{background:linear-gradient(135deg,#1a1d29,#252936);border-radius:16px;width:90%;max-width:600px;max-height:80vh;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff1a;animation:slideUp .3s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column}.project-media-modal-header{padding:24px 24px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between}.project-media-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}.project-media-modal-header h2 i{color:#58a6ff}.project-media-modal-close{background:#ffffff1a;border:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#ffffffb3}.project-media-modal-close:hover{background:#ffffff26;color:#fff}.project-media-modal-body{padding:24px;overflow-y:auto;flex:1}.project-media-list{display:flex;flex-direction:column;gap:12px}.project-media-item{display:flex;align-items:center;gap:12px;padding:12px;background:#161b2299;border:1px solid rgba(48,54,61,.8);border-radius:8px;transition:all .2s ease}.project-media-item:hover{background:#161b22cc;border-color:#58a6ff4d}.project-media-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#58a6ff1a;border-radius:8px;color:#58a6ff;font-size:20px;flex-shrink:0}.project-media-icon.image{background:#a855f71a;color:#a855f7}.project-media-icon.video{background:#f973161a;color:#f97316}.project-media-icon.audio{background:#8b5cf61a;color:#8b5cf6}.project-media-info{flex:1;min-width:0}.project-media-name{font-size:14px;font-weight:600;color:#f0f6fc;margin-bottom:4px}.project-media-type{font-size:11px;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.project-media-download{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#3fb9501a;border:1px solid rgba(63,185,80,.3);border-radius:8px;color:#3fb950;cursor:pointer;transition:all .2s ease;flex-shrink:0}.project-media-download:hover{background:#3fb95033;border-color:#3fb950;transform:scale(1.05)}.project-media-empty{text-align:center;padding:40px 20px;color:#7d8590}.project-media-empty i{font-size:48px;color:#484f58;margin-bottom:16px}.project-media-empty p{margin:0;font-size:14px}.three-container{flex:1;position:relative;background:radial-gradient(circle at top,#1f6feb,#010409);min-height:0}#three-canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:1}.canvas-time-display{position:absolute;top:16px;left:16px;z-index:100;background:#0d1117d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(48,54,61,.6);border-radius:10px;padding:10px 16px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:18px;font-weight:600;color:#f0f6fc;display:flex;align-items:center;gap:4px;box-shadow:0 4px 16px #0000004d}.canvas-time-display .time-current{color:#58a6ff;min-width:50px}.canvas-time-display .time-separator{color:#484f58;margin:0 2px}.canvas-time-display .time-total{color:#7d8590;min-width:50px}.canvas-time-display .time-unit{color:#484f58;font-size:14px;margin-left:2px}.animation-status-indicator{position:absolute;top:80px;left:16px;z-index:100;background:#0d1117d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(48,54,61,.6);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px #0000004d;transition:all .3s ease}.animation-status-indicator.playing{background:linear-gradient(135deg,#3fb95033,#2ea04326);border-color:#3fb95080;color:#3fb950}.animation-status-indicator.paused{background:linear-gradient(135deg,#f0883e33,#da6f2426);border-color:#f0883e80;color:#f0883e}.animation-status-indicator.stopped{background:linear-gradient(135deg,#f8514933,#da363326);border-color:#f8514980;color:#f85149}.animation-status-indicator i{font-size:12px}.canvas-fps-display{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:6px;padding:8px 14px;background:#2ea04326;border:1px solid rgba(46,160,67,.3);border-radius:8px;font-size:12px;font-weight:600;color:#3fb950;z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease}.canvas-fps-display i{font-size:11px}.canvas-fps-display span:first-of-type{font-family:SF Mono,Monaco,monospace;font-weight:700;min-width:24px;text-align:center}.transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40;opacity:0;transition:none}.transition-overlay.fade-black{background:#000}.transition-overlay.fade-white{background:#fff}.export-area-overlay{position:absolute;border:3px solid #f85149;border-radius:4px;pointer-events:none;z-index:100;box-shadow:0 0 0 9999px #0000004d}.export-corner{position:absolute;width:20px;height:20px;border-color:#f85149;border-style:solid;border-width:0}.export-corner-tl{top:-3px;left:-3px;border-top-width:4px;border-left-width:4px;border-top-left-radius:6px}.export-corner-tr{top:-3px;right:-3px;border-top-width:4px;border-right-width:4px;border-top-right-radius:6px}.export-corner-bl{bottom:-3px;left:-3px;border-bottom-width:4px;border-left-width:4px;border-bottom-left-radius:6px}.export-corner-br{bottom:-3px;right:-3px;border-bottom-width:4px;border-right-width:4px;border-bottom-right-radius:6px}.export-info-label{position:absolute;top:-28px;left:50%;transform:translate(-50%);background:#f85149f2;color:#fff;font-size:11px;font-weight:700;padding:6px 12px;border-radius:6px;white-space:nowrap;font-family:SF Mono,Monaco,monospace;box-shadow:0 2px 12px #f8514980;letter-spacing:.3px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.canvas-button-groups-container{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:16px;z-index:50}.canvas-button-group{display:flex;flex-direction:column;align-items:center;gap:4px}.canvas-button-label{font-size:10px;font-weight:600;color:#c9d1d9;text-transform:uppercase;letter-spacing:.5px;background:#0d1117d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2px 8px;border-radius:4px;white-space:nowrap;pointer-events:none}.help-button{width:44px;height:44px;border-radius:50%;border:2px solid #30363d;background:linear-gradient(135deg,#1f6feb,#388bfd);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #1f6feb66}.help-button:hover{transform:scale(1.1) rotate(15deg);box-shadow:0 6px 20px #1f6feb99}.help-button:active{transform:scale(.95)}.delete-canvas-bg-button{width:44px;height:44px;border-radius:50%;border:2px solid #30363d;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #f9731666}.delete-canvas-bg-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #f9731699}.delete-canvas-bg-button:active{transform:scale(.95)}.delete-mockup-media-button{width:44px;height:44px;border-radius:50%;border:2px solid #30363d;background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #a855f766}.delete-mockup-media-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #a855f799}.delete-mockup-media-button:active{transform:scale(.95)}.timeline-panel{background:linear-gradient(180deg,#161b22,#0d1117);border-top:1px solid #30363d;display:flex;flex-direction:column;color:#f0f6fc;height:220px;flex-shrink:0;position:relative;z-index:10;box-shadow:0 -4px 20px #0000004d;transition:margin-bottom .3s ease,opacity .3s ease,transform .3s ease}.layout.timeline-hidden .timeline-panel{margin-bottom:-220px;opacity:0;pointer-events:none}.layout.timeline-hidden .main-content{flex:1}.timeline-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #21262d;background:linear-gradient(180deg,#161b22f2,#0d1117cc);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.timeline-header-left{display:flex;align-items:center;gap:16px}.timeline-header h3{font-size:13px;font-weight:600;margin:0;color:#f0f6fc;letter-spacing:.5px}.time-display{display:flex;align-items:center;gap:2px;padding:4px 10px;background:#0d1117;border:1px solid #21262d;border-radius:6px;font-family:SF Mono,Monaco,monospace}.time-display #current-time-display{font-size:14px;font-weight:700;color:#58a6ff;min-width:40px;text-align:right}.time-display .time-separator{color:#484f58;font-size:12px}.time-display #total-time-display{font-size:12px;font-weight:500;color:#7d8590;min-width:40px}.time-display .time-unit{font-size:10px;color:#484f58;margin-left:2px}.fps-display{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#2ea04326;border:1px solid rgba(46,160,67,.3);border-radius:6px;font-size:11px;color:#3fb950}.fps-display i{font-size:10px}.fps-display #fps-value{font-weight:700;font-family:SF Mono,Monaco,monospace}.duration-control{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s;background:#21262d;border:1px solid #30363d;color:#f0f6fc}.duration-control:hover{background:#30363d;border-color:#58a6ff}.duration-control:active{transform:scale(.98)}.duration-control i{color:#58a6ff;font-size:14px}.duration-control span{font-weight:600;font-family:SF Mono,Monaco,monospace}.zoom-control{display:flex;align-items:center;gap:8px;font-size:12px;padding-left:12px;border-left:1px solid #30363d}.zoom-control label{color:#7d8590}.zoom-control input[type=range]{width:80px;height:4px;-webkit-appearance:none;background:#30363d;border-radius:2px;cursor:pointer}.zoom-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#58a6ff;border-radius:50%;cursor:pointer;transition:transform .1s ease}.zoom-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.zoom-control span{color:#58a6ff;font-weight:500;min-width:40px}.zoom-btn{width:26px;height:26px;padding:0;border:1px solid #30363d;border-radius:6px;background:#21262d;color:#8b949e;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .15s ease}.zoom-btn:hover{background:#30363d;color:#f0f6fc;border-color:#484f58}.zoom-btn:active{transform:scale(.95)}.zoom-btn i{font-size:11px}.timeline-controls{display:flex;gap:6px}.timeline-controls button{background:#21262d;border:1px solid #30363d;color:#f0f6fc;width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;font-size:13px}.timeline-controls button:hover{background:#30363d;border-color:#484f58;transform:translateY(-1px)}.timeline-controls button:active{transform:translateY(0)}.timeline-controls button:disabled{opacity:.5;cursor:not-allowed;transform:none}#add-keyframe-button{background:linear-gradient(135deg,#238636,#2ea043);border-color:#2ea043}#add-keyframe-button:hover{background:linear-gradient(135deg,#2ea043,#3fb950)}#export-button{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#388bfd}#export-button:hover:not(:disabled){background:linear-gradient(135deg,#388bfd,#58a6ff)}#export-image-button{background:linear-gradient(135deg,#8957e5,#a371f7);border-color:#a371f7}#export-image-button:hover:not(:disabled){background:linear-gradient(135deg,#a371f7,#bc8cff)}.timeline-content{flex:1;padding:32px 8px 12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}.timeline-content::-webkit-scrollbar{height:10px}.timeline-content::-webkit-scrollbar-track{background:#0d1117;border-radius:5px;margin:0 16px}.timeline-content::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#30363d,#484f58);border-radius:5px;border:2px solid #0d1117}.timeline-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#484f58,#6e7681)}.timeline-track{height:100%;background:linear-gradient(180deg,#0d1117,#010409);border:1px solid #30363d;border-radius:12px;position:relative;width:100%;cursor:crosshair;overflow:visible;box-shadow:inset 0 2px 12px #0006,0 2px 8px #0003;margin-left:30px;margin-right:30px;pointer-events:auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.timeline-track *::selection{background:transparent!important}.timeline-ruler{height:28px;background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid #21262d;border-radius:10px 10px 0 0;position:relative;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none}.time-marker{position:absolute;top:5px;font-size:10px;font-weight:600;color:#58a6ff;padding:0 4px;-webkit-user-select:none;user-select:none;pointer-events:none;letter-spacing:.3px}.time-tick{position:absolute;top:18px;width:1px;height:8px;background:linear-gradient(180deg,#58a6ff,transparent);pointer-events:none;opacity:.5}.time-marker-end{color:#f97316;font-weight:700;transform:translate(-100%);padding-right:4px;padding-left:0}.time-tick-end{background:linear-gradient(180deg,#f97316,transparent);opacity:.8;width:2px;transform:translate(-100%)}.timeline-grid{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .2s ease}.timeline-grid-line{position:absolute;top:28px;width:1px;height:calc(100% - 28px);background:linear-gradient(180deg,#58a6ff66,#58a6ff26)}.timeline-grid-line.major{width:2px;background:linear-gradient(180deg,#58a6ff99,#58a6ff40)}.easing-ribbon{position:absolute;top:28px;left:0;right:0;height:26px;background:#161b22cc;border-bottom:1px solid #21262d;pointer-events:none;overflow:hidden;z-index:4;user-select:none;-webkit-user-select:none}.easing-ribbon-segment{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#fffffff2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;box-sizing:border-box;border-radius:4px;text-shadow:0 1px 2px rgba(0,0,0,.3);pointer-events:auto;transition:all .15s ease;opacity:.7;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.easing-ribbon-segment::selection,.easing-ribbon-segment *::selection{background:transparent!important}.easing-ribbon-segment:hover{filter:brightness(1.2);transform:scaleY(1.1);opacity:1}.easing-ribbon-segment.selected{outline:2px solid #ffffff;outline-offset:-2px}.easing-ribbon-segment.easing-linear{background:linear-gradient(135deg,#484f58,#30363d);box-shadow:0 2px 6px #0003}.easing-ribbon-segment.easing-ease-in{background:linear-gradient(135deg,#2ea043,#238636);box-shadow:0 2px 6px #2ea0434d}.easing-ribbon-segment.easing-ease-out{background:linear-gradient(135deg,#388bfd,#1f6feb);box-shadow:0 2px 6px #388bfd4d}.easing-ribbon-segment.easing-ease-in-out{background:linear-gradient(135deg,#a371f7,#8957e5);box-shadow:0 2px 6px #a371f74d}.easing-ribbon-segment.easing-ease-in-cubic{background:linear-gradient(135deg,#ffa657,#f0883e);box-shadow:0 2px 6px #ffa6574d}.easing-ribbon-segment.easing-ease-out-cubic{background:linear-gradient(135deg,#ff7b72,#f85149);box-shadow:0 2px 6px #ff7b724d}.timeline-scrubber{position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(180deg,#ff7b72,#f85149,#f851494d);pointer-events:none;z-index:10;box-shadow:0 0 12px #f8514999,0 0 24px #f851494d;transition:background .15s ease,box-shadow .15s ease}.timeline-scrubber.dragging{cursor:grabbing}.timeline-scrubber.on-keyframe{--kf-c1: var(--keyframe-color-1, #3fb950);--kf-c2: var(--keyframe-color-2, #3fb950);background:linear-gradient(180deg,var(--kf-c1) 0%,var(--kf-c2) 50%,color-mix(in srgb,var(--kf-c2) 30%,transparent) 100%);box-shadow:0 0 16px color-mix(in srgb,var(--kf-c1) 80%,transparent),0 0 32px color-mix(in srgb,var(--kf-c1) 40%,transparent)}.timeline-scrubber.on-keyframe:before{background:linear-gradient(135deg,var(--kf-c1),var(--kf-c2));box-shadow:0 0 16px color-mix(in srgb,var(--kf-c1) 90%,transparent),0 4px 8px #0000004d}.timeline-scrubber:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:14px;height:14px;background:linear-gradient(135deg,#ff7b72,#f85149);border-radius:50%;box-shadow:0 0 12px #f85149b3,0 2px 4px #0000004d;border:2px solid rgba(255,255,255,.3);cursor:grab;pointer-events:auto}.timeline-scrubber.dragging:before{cursor:grabbing;transform:translate(-50%) scale(1.2);box-shadow:0 0 20px #f85149e6,0 4px 8px #0006}.timeline-scrubber:after{content:attr(data-time);position:absolute;top:-26px;left:50%;transform:translate(-50%);font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f85149,#da3633);padding:4px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px #f8514966}.keyframes-container{position:absolute;top:28px;left:0;width:100%;height:26px;pointer-events:none;z-index:5}.keyframe{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:14px;height:14px;background:linear-gradient(135deg,#3fb950,#238636);border:2px solid rgba(255,255,255,.95);border-radius:4px;cursor:grab;pointer-events:all;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000080,0 0 #3fb95000,inset 0 1px 2px #fff3;-webkit-user-select:none;user-select:none;z-index:10}.keyframe:hover{transform:translate(-50%,-50%) rotate(45deg) scale(1.3);box-shadow:0 6px 24px #3fb95099,0 0 0 5px #3fb95040}body.keyframe-dragging .keyframe,body.keyframe-dragging .keyframe *,body.keyframe-dragging .timeline-track,body.keyframe-dragging .timeline-track *,body.keyframe-dragging .keyframes-container,body.keyframe-dragging .keyframes-container *{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;-webkit-touch-callout:none!important}input,textarea,[contenteditable=true],body.keyframe-dragging input,body.keyframe-dragging textarea,body.keyframe-dragging [contenteditable=true]{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}body.keyframe-dragging .keyframe,body.keyframe-dragging .keyframe.dragging{cursor:grabbing!important}body.keyframe-dragging .keyframe::selection,body.keyframe-dragging .keyframe *::selection,body.keyframe-dragging .timeline-track::selection,body.keyframe-dragging .timeline-track *::selection{background:transparent!important}.keyframe.selected{background:linear-gradient(135deg,#58a6ff,#1f6feb);border-color:#fff;box-shadow:0 0 0 5px #58a6ff59,0 6px 24px #58a6ff99;animation:keyframe-pulse 2s ease-in-out infinite}.keyframe.indicator-active{background:linear-gradient(135deg,#4ade80,#22c55e);border-color:#fff;box-shadow:0 0 0 5px #4ade8066,0 6px 24px #4ade80b3,0 0 20px #4ade8080;animation:indicator-active-pulse 1s ease-in-out infinite}.keyframe.selected.indicator-active{background:linear-gradient(135deg,#4ade80,#22c55e);box-shadow:0 0 0 6px #4ade8080,0 6px 24px #4ade80cc,0 0 25px #4ade8099;animation:indicator-active-pulse 1s ease-in-out infinite}@keyframes indicator-active-pulse{0%,to{box-shadow:0 0 0 5px #4ade8066,0 6px 24px #4ade80b3,0 0 20px #4ade8080}50%{box-shadow:0 0 0 8px #4ade8040,0 6px 28px #4ade80cc,0 0 30px #4ade8099}}.keyframe-index{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);font-size:7px;font-weight:700;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;line-height:1}@keyframes keyframe-pulse{0%,to{box-shadow:0 0 0 4px #58a6ff4d,0 4px 20px #58a6ff80}50%{box-shadow:0 0 0 8px #58a6ff26,0 4px 24px #58a6ff99}}.keyframe.has-transition:after{content:"";position:absolute;top:calc(50% + 14px);left:50%;transform:translate(-50%) rotate(-45deg);width:20px;height:3px;background:linear-gradient(90deg,#f85149,#da3633);border-radius:2px;pointer-events:none;z-index:-1;box-shadow:0 0 8px #f8514999,0 2px 4px #f8514966}.keyframe.transition-fade-black:after{background:linear-gradient(90deg,#f85149,#da3633)}.keyframe.transition-fade-white:after{background:linear-gradient(90deg,#f85149,#da3633)}.keyframe-connections{position:absolute;top:54px;left:0;width:100%;bottom:0;pointer-events:none;z-index:3}.connection-band{position:absolute;top:50%;transform:translateY(-50%);height:20px;background:linear-gradient(90deg,#484f5880,#484f58cc);border:1px solid rgba(88,166,255,.3);border-radius:4px;pointer-events:all;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;overflow:hidden}.connection-band:hover{background:linear-gradient(90deg,#58a6ff66,#58a6ff99);border-color:#58a6ffcc;box-shadow:0 0 12px #58a6ff66;transform:translateY(-50%) scaleY(1.2)}.connection-label{font-size:10px;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;transition:color .2s ease}.connection-band:hover .connection-label{color:#fff}.keyframe.dragging{transform:translate(-50%,-50%) rotate(45deg) scale(1.3);box-shadow:0 8px 32px #58a6ff99;z-index:100;cursor:grabbing}.keyframe-ghost{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:16px;height:16px;background:#58a6ff4d;border:2px dashed #58a6ff;border-radius:4px;pointer-events:none;opacity:.7}.keyframe-time-tooltip{position:absolute;display:none;padding:4px 8px;background:#0d1117;border:1px solid #58a6ff;border-radius:4px;font-size:11px;font-weight:600;color:#58a6ff;font-family:SF Mono,Monaco,monospace;pointer-events:none;z-index:200;white-space:nowrap;box-shadow:0 4px 12px #0006}.keyframe-time-tooltip:before{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#58a6ff}.snap-indicator{position:absolute;top:0;width:2px;height:100%;background:#f0883e;box-shadow:0 0 8px #f0883e99;pointer-events:none;z-index:150;opacity:0;transition:opacity .1s ease}.snap-indicator.visible{opacity:1}.snap-interval-select{padding:6px 10px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:6px;color:#7d8590;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease;height:34px}.snap-interval-select:hover{border-color:#484f58;color:#f0f6fc}.snap-interval-select:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff26}.snap-interval-select option{background:#161b22;color:#f0f6fc}.keyframe-count-button{position:relative;display:flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#3fb95033,#2ea04326);border:1px solid rgba(63,185,80,.3);border-radius:8px;font-size:12px;font-weight:600;color:#3fb950;cursor:pointer;transition:all .2s ease}.keyframe-count-button:hover{background:linear-gradient(135deg,#3fb9504d,#2ea04340);border-color:#3fb95080;transform:translateY(-1px)}.keyframe-count-button:active{transform:translateY(0)}.keyframe-count-button i:first-child{font-size:11px}.keyframe-count-button .keyframes-label{font-size:11px;opacity:.9}.keyframe-count-button i:last-child{font-size:9px;opacity:.7;transition:transform .2s ease}.keyframe-count-button.active i:last-child{transform:rotate(180deg)}.keyframe-list-dropdown{position:absolute;bottom:calc(100% + 8px);left:0;width:320px;max-height:400px;background:linear-gradient(180deg,#0d1117,#010409);border:2px solid #30363d;border-radius:12px;box-shadow:0 8px 24px #0009;z-index:1000;animation:dropdownSlideUp .2s ease;overflow:hidden}@keyframes dropdownSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.keyframe-list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,#3fb95026,#2ea0431a);border-bottom:1px solid #30363d;font-size:13px;font-weight:600;color:#3fb950}.keyframe-list-close{width:24px;height:24px;border-radius:6px;border:1px solid #30363d;background:#21262d;color:#c9d1d9;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.keyframe-list-close:hover{background:#f85149;border-color:#f85149;color:#fff}.keyframe-list-body{max-height:350px;overflow-y:auto;padding:8px}.keyframe-list-body::-webkit-scrollbar{width:6px}.keyframe-list-body::-webkit-scrollbar-track{background:#0d1117;border-radius:3px}.keyframe-list-body::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.keyframe-list-body::-webkit-scrollbar-thumb:hover{background:#484f58}.keyframe-list-empty{padding:32px 16px;text-align:center;color:#8b949e;font-size:13px}.keyframe-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:4px;background:#161b2299;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.keyframe-list-item:hover{background:#30363d66;border-color:#3fb950}.keyframe-list-item.selected{background:#3fb95026;border-color:#3fb950}.keyframe-list-item-left{display:flex;align-items:center;gap:10px}.keyframe-list-item-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:linear-gradient(135deg,#3fb950,#2ea043);border-radius:6px;font-size:11px;font-weight:700;color:#fff}.keyframe-list-item-info{display:flex;flex-direction:column;gap:2px}.keyframe-list-item-time{font-size:13px;font-weight:600;color:#f0f6fc}.keyframe-list-item-easing{font-size:11px;color:#8b949e}.keyframe-list-item-icon{font-size:12px;color:#58a6ff;opacity:0;transition:opacity .2s ease}.keyframe-list-item:hover .keyframe-list-item-icon{opacity:1}.ctrl-btn{background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;color:#f0f6fc;width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:14px}.ctrl-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);border-color:#484f58;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.ctrl-btn:active{transform:translateY(0)}.ctrl-btn.active{background:linear-gradient(135deg,#58a6ff33,#1f6feb26);border-color:#58a6ff;color:#58a6ff;box-shadow:0 0 12px #58a6ff40}.ctrl-btn.green{background:linear-gradient(135deg,#238636,#2ea043);border-color:#2ea043}.ctrl-btn.green:hover{background:linear-gradient(135deg,#2ea043,#3fb950)}.ctrl-btn.red{background:#21262d;border-color:#30363d}.ctrl-btn.red:hover{background:linear-gradient(135deg,#da3633,#f85149);border-color:#f85149;color:#fff}.ctrl-btn.blue{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#388bfd}.ctrl-btn.blue:hover{background:linear-gradient(135deg,#388bfd,#58a6ff)}.ctrl-btn.purple{background:linear-gradient(135deg,#8957e5,#a371f7);border-color:#a371f7}.ctrl-btn.purple:hover{background:linear-gradient(135deg,#a371f7,#bc8cff)}.ctrl-btn.disabled,.ctrl-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ctrl-btn.disabled:hover,.ctrl-btn:disabled:hover{transform:none;background:#21262d}.ctrl-btn.export-btn-labeled{width:auto;padding:0 14px;gap:6px}.ctrl-btn.export-btn-labeled span:not(.export-remaining-badge){font-size:11px;font-weight:600;letter-spacing:.3px}.export-remaining-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;margin-left:8px;background:#0006;border:1px solid rgba(255,255,255,.3);border-radius:10px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);box-shadow:0 2px 4px #0000004d}.toggle-switch{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 12px;background:linear-gradient(180deg,#21262d99,#161b2266);border-radius:8px;transition:all .2s ease}.toggle-switch:hover{background:linear-gradient(180deg,#21262de6,#161b22b3)}.toggle-switch input{display:none}.toggle-slider{width:40px;height:22px;background:linear-gradient(180deg,#30363d,#21262d);border-radius:11px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 4px #0003}.toggle-slider:before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:linear-gradient(180deg,#7d8590,#6e7681);border-radius:50%;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.toggle-switch input:checked~.toggle-slider{background:linear-gradient(135deg,#238636,#2ea043);box-shadow:0 0 12px #2ea0434d,inset 0 2px 4px #0000001a}.toggle-switch input:checked~.toggle-slider:before{left:21px;background:linear-gradient(180deg,#fff,#f0f6fc)}.toggle-label{font-size:13px;color:#f0f6fc;font-weight:500;white-space:nowrap}.icon-btn{width:36px;height:36px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.icon-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;transform:translateY(-1px)}.icon-btn.danger:hover{background:linear-gradient(135deg,#f85149,#da3633);border-color:#f85149;color:#fff;box-shadow:0 4px 12px #f851494d}.icon-btn-sm{width:24px;height:24px;background:transparent;border:none;border-radius:4px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.icon-btn-sm:hover{background:#21262d;color:#f0f6fc}.icon-btn-sm.danger:hover{background:#f8514933;color:#f85149}.background-controls{display:flex;flex-direction:column;gap:12px}.bg-type-selector{display:flex;gap:4px;background:#161b22;border-radius:6px;padding:4px}.bg-type-btn{flex:1;padding:8px 12px;border:none;background:transparent;color:#7d8590;font-size:12px;font-weight:500;border-radius:4px;cursor:pointer;transition:all .2s ease}.bg-type-btn:hover{color:#f0f6fc}.bg-type-btn.active{background:#238636;color:#fff}.bg-type-selector{display:flex;gap:4px;background:linear-gradient(180deg,#0d1117,#010409);border-radius:14px;padding:5px;border:1px solid #21262d;margin-bottom:12px}.bg-type-btn{flex:1;padding:10px 6px 8px;background:transparent;border:none;border-radius:10px;color:#484f58;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden}.bg-type-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent);opacity:0;transition:opacity .25s ease}.bg-type-btn i{font-size:14px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.bg-type-btn span{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;position:relative;z-index:1;opacity:.8}.bg-type-btn:hover{color:#f0f6fc;background:linear-gradient(180deg,#21262de6,#161b22b3)}.bg-type-btn:hover:before{opacity:1}.bg-type-btn:hover i{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(88,166,255,.5))}.bg-type-btn:hover span{opacity:1}.bg-type-btn.active{background:linear-gradient(135deg,#238636,#2ea043);color:#fff;box-shadow:0 4px 16px #23863666,inset 0 1px #ffffff1a}.bg-type-btn.active i{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.bg-type-btn.active span{opacity:1}.apply-uploaded-bg-btn{width:100%;padding:12px 16px;background:linear-gradient(135deg,#1f6feb,#0969da);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;transition:all .2s ease;box-shadow:0 2px 8px #1f6feb4d}.apply-uploaded-bg-btn:hover{background:linear-gradient(135deg,#2672f3,#0a6ed1);box-shadow:0 4px 12px #1f6feb66;transform:translateY(-1px)}.apply-uploaded-bg-btn:active{transform:translateY(0);box-shadow:0 1px 4px #1f6feb4d}.apply-uploaded-bg-btn i{font-size:14px}.bg-tabs{display:flex;gap:6px;background:linear-gradient(180deg,#161b2299,#0d111766);border-radius:10px;padding:6px;border:1px solid #21262d}.bg-tab{flex:1;padding:10px 12px;background:transparent;border:none;border-radius:8px;color:#7d8590;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:5px}.bg-tab i{font-size:16px;transition:transform .2s ease}.bg-tab:hover{color:#f0f6fc;background:linear-gradient(180deg,#21262dcc,#161b2299)}.bg-tab:hover i{transform:scale(1.15)}.bg-tab.active{background:linear-gradient(135deg,#238636,#2ea043);color:#fff;box-shadow:0 4px 12px #23863659}.preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:none;overflow-y:visible;padding:0}.preset-grid::-webkit-scrollbar{width:6px}.preset-grid::-webkit-scrollbar-track{background:#0d1117;border-radius:3px}.preset-grid::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.preset-grid::-webkit-scrollbar-thumb:hover{background:#484f58}.preset-item{width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;border:1.5px solid rgba(48,54,61,.5);transition:border-color .2s ease,box-shadow .2s ease;box-shadow:0 1px 4px #0003;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden}.preset-item:hover{border-color:#58a6ff;box-shadow:0 3px 12px #58a6ff59}.preset-item.active{border-color:#3fb950;box-shadow:0 0 0 2px #3fb95066,0 3px 10px #3fb95033}.preset-item.active:after{content:"";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;bottom:2px;right:2px;font-size:7px;color:#fff;background:#3fb950;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000004d}.preset-container{background:linear-gradient(180deg,#161b22,#0d1117);border-radius:10px;padding:10px;border:1px solid #21262d}.preset-section-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(48,54,61,.5)}.preset-section-header i{font-size:12px;color:#58a6ff;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#58a6ff26,#1f6feb1a);border-radius:6px}.preset-section-header span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#f0f6fc}.preset-section-header .preset-count{margin-left:auto;font-size:9px;font-weight:600;color:#7d8590;background:#30363d99;padding:2px 6px;border-radius:8px}.custom-gradient-panel{display:flex;flex-direction:column;gap:0}.custom-gradient-card{background:linear-gradient(180deg,#161b22,#0d1117);border:1px solid #21262d;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px;box-shadow:0 4px 16px #0003}.gradient-preview-section{position:relative}.gradient-preview{height:80px;border-radius:12px;background:radial-gradient(circle at center,#1f6feb,#010409);transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #00000059,inset 0 1px #ffffff14;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}.gradient-preview:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);pointer-events:none}.gradient-preview-label{position:absolute;bottom:8px;right:10px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff9;background:#00000080;padding:4px 10px;border-radius:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.color-bar-preview{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--color-1, #1f6feb),var(--color-2, #010409));margin-top:8px;box-shadow:0 2px 8px #0000004d}.section-title{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7d8590;margin-bottom:10px}.section-title i{font-size:11px;color:#58a6ff}.color-controls-section{padding-top:4px}.color-picker-row{display:flex;align-items:center;gap:10px}.color-picker-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.color-picker-item input[type=color]{width:100%;height:40px;border:2px solid #30363d;border-radius:10px;padding:0;cursor:pointer;background:linear-gradient(180deg,#21262d,#161b22);transition:all .2s ease}.color-picker-item input[type=color]:hover{border-color:#58a6ff;transform:scale(1.03);box-shadow:0 4px 12px #58a6ff33}.color-picker-item input[type=color]::-webkit-color-swatch-wrapper{padding:4px}.color-picker-item input[type=color]::-webkit-color-swatch{border-radius:6px;border:none;box-shadow:inset 0 2px 4px #0003}.color-name{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#7d8590}.swap-btn{width:36px;height:36px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:50%;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}.swap-btn:hover{background:linear-gradient(135deg,#1f6feb,#388bfd);color:#fff;transform:scale(1.1);border-color:#58a6ff;box-shadow:0 4px 12px #1f6feb66}.swap-btn:active{transform:scale(.9)}.swap-btn i{font-size:12px;transition:transform .3s ease}.swap-btn:hover i{transform:rotate(180deg)}.direction-controls-section{padding-top:4px}.quick-presets-section{padding-top:4px;border-top:1px solid rgba(48,54,61,.5);margin-top:4px}.quick-preset-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.quick-preset-btn{aspect-ratio:1;padding:0;background:transparent;border:2px solid #30363d;border-radius:10px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.quick-preset-btn:hover{border-color:#58a6ff;transform:scale(1.12);box-shadow:0 4px 16px #58a6ff59;z-index:2}.quick-preset-btn:active{transform:scale(.95)}.quick-preset-btn.active{border-color:#3fb950;box-shadow:0 0 0 3px #3fb9504d}.quick-preset-preview{display:block;width:100%;height:100%;border-radius:8px}.direction-grid-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:linear-gradient(180deg,#0d1117,#010409);border-radius:12px;padding:6px;border:1px solid #21262d}.dir-btn-modern{aspect-ratio:1;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;color:#484f58;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:12px}.dir-btn-modern:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;transform:scale(1.08);border-color:#484f58}.dir-btn-modern.active{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#58a6ff;color:#fff;box-shadow:0 4px 12px #1f6feb66}.dir-btn-modern.active i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.gradient-preview-wrapper{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #0006,inset 0 1px #ffffff0d}.gradient-preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000004d;opacity:0;transition:opacity .25s ease}.gradient-preview-overlay i{font-size:20px;color:#fffc}.gradient-preview-wrapper:hover .gradient-preview-overlay{opacity:1}.gradient-controls{display:flex;flex-direction:column;gap:16px}.color-picker-section{display:flex;align-items:center;gap:12px}.color-input-group{flex:1}.color-input-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}.color-input-wrapper input[type=color]{width:100%;height:44px;border:2px solid #30363d;border-radius:10px;padding:0;cursor:pointer;background:linear-gradient(180deg,#21262d,#161b22);transition:all .2s ease}.color-input-wrapper input[type=color]:hover{border-color:#58a6ff;transform:scale(1.02)}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:4px}.color-input-wrapper input[type=color]::-webkit-color-swatch{border-radius:6px;border:none;box-shadow:inset 0 2px 4px #0003}.color-label{font-size:10px;font-weight:600;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.swap-colors-btn{width:40px;height:40px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:10px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}.swap-colors-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#58a6ff;transform:scale(1.1);border-color:#58a6ff}.swap-colors-btn:active{transform:scale(.95) rotate(180deg)}.swap-colors-btn i{font-size:14px;transition:transform .3s ease}.swap-colors-btn:hover i{transform:rotate(180deg)}.color-input-row{display:flex;align-items:center;gap:8px}.gradient-direction-btn{width:36px;height:36px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.gradient-direction-btn:hover{background:#30363d;color:#58a6ff}.gradient-direction-selector{display:flex;align-items:center;gap:8px;margin-bottom:8px}.gradient-direction-selector label{font-size:12px;color:#7d8590}.gradient-direction-selector select{flex:1;padding:6px 10px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#f0f6fc;font-size:12px;cursor:pointer}.gradient-direction-selector select:focus{outline:none;border-color:#58a6ff}.direction-selector{display:flex;flex-direction:column;gap:10px}.direction-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.direction-label i{font-size:12px;color:#58a6ff}.direction-selector label{font-size:11px;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:linear-gradient(180deg,#0d1117,#010409);border-radius:12px;padding:8px;border:1px solid #21262d}.dir-btn{width:100%;aspect-ratio:1;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:10px;color:#484f58;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);font-size:13px}.dir-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;transform:scale(1.08);border-color:#484f58}.dir-btn.active{background:linear-gradient(135deg,#1f6feb,#388bfd);border-color:#58a6ff;color:#fff;box-shadow:0 4px 16px #1f6feb66,inset 0 1px #ffffff26}.dir-btn.active i{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.media-upload-section{display:flex;gap:8px;margin-bottom:12px}.media-upload-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 12px;background:linear-gradient(180deg,#21262d,#161b22);border:2px dashed #30363d;border-radius:12px;color:#7d8590;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.media-upload-btn i{font-size:20px;transition:all .25s ease}.media-upload-btn span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.media-upload-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);border-color:#58a6ff;color:#f0f6fc;transform:translateY(-2px)}.media-upload-btn:hover i{transform:scale(1.2);color:#58a6ff}.media-upload-btn.video-btn:hover{border-color:#a855f7}.media-upload-btn.video-btn:hover i{color:#a855f7}.color-pickers{display:flex;flex-direction:column;gap:8px}.color-picker-group{display:flex;gap:12px}.color-picker-group label{display:flex;align-items:center;gap:8px;font-size:12px;color:#7d8590}.color-picker-group input[type=color]{width:32px;height:32px;border:2px solid #21262d;border-radius:6px;padding:0;cursor:pointer;background:none}.color-picker-group input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-picker-group input[type=color]::-webkit-color-swatch{border-radius:3px;border:none}.image-background-panel{background:linear-gradient(180deg,#161b2266,#0d111733);border-radius:10px;padding:12px;border:1px solid rgba(33,38,45,.5)}.image-upload-section{margin-bottom:12px;display:flex;gap:8px}.upload-background-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;background:linear-gradient(135deg,#1f6feb,#388bfd);border:2px solid rgba(88,166,255,.3);border-radius:12px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px #1f6feb59,0 0 0 1px #ffffff1a inset;position:relative;overflow:hidden}.upload-background-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .5s ease}.upload-background-btn:hover:before{transform:translate(100%)}.upload-background-btn:hover{background:linear-gradient(135deg,#388bfd,#58a6ff);transform:translateY(-3px) scale(1.02);box-shadow:0 10px 28px #1f6feb73,0 0 0 1px #ffffff26 inset;border-color:#58a6ff80}.upload-background-btn:active{transform:translateY(-1px) scale(.98)}.upload-background-btn i{font-size:15px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.upload-background-btn:hover i{transform:scale(1.15)}.upload-video-btn{background:linear-gradient(135deg,#8957e5,#a371f7);box-shadow:0 4px 12px #8957e54d}.upload-video-btn:hover{background:linear-gradient(135deg,#a371f7,#bc8cf7);box-shadow:0 6px 20px #8957e566}.image-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:400px;overflow-y:auto}.image-gallery::-webkit-scrollbar{width:6px}.image-gallery::-webkit-scrollbar-track{background:#0d1117;border-radius:3px}.image-gallery::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.image-gallery::-webkit-scrollbar-thumb:hover{background:#484f58}.image-thumbnail{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s ease;background:#0d1117}.image-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.image-thumbnail span{position:absolute;bottom:0;left:0;right:0;padding:6px;font-size:11px;font-weight:600;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));color:#c9d1d9;opacity:0;transition:opacity .2s ease}.image-thumbnail:hover{border-color:#58a6ff;transform:translateY(-2px);box-shadow:0 4px 12px #58a6ff4d}.image-thumbnail:hover img{transform:scale(1.05)}.image-thumbnail:hover span{opacity:1}.image-thumbnail.active{border-color:#238636;box-shadow:0 0 0 3px #2386364d}.watermark-controls{display:flex;flex-direction:column;gap:14px}.watermark-toggle-btn{width:100%;padding:10px 16px;background:linear-gradient(180deg,#21262d99,#161b2266);border:1px solid #30363d;border-radius:8px;color:#7d8590;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.watermark-toggle-btn:hover{background:linear-gradient(180deg,#21262de6,#161b22b3);color:#f0f6fc}.watermark-toggle-btn.active{background:linear-gradient(135deg,#238636,#2ea043);color:#fff;border-color:#2ea043}.watermark-toggle-btn.active i{color:#fff}.watermark-toggle-btn:disabled{opacity:.6;cursor:not-allowed}.watermark-upload-section{display:flex;flex-direction:column;gap:10px}.watermark-upload-section button.disabled{opacity:.5;cursor:not-allowed}.watermark-upload-section button.disabled:hover{background:linear-gradient(135deg,#238636,#2ea043)!important;transform:none!important}.watermark-preview{display:flex;align-items:center;gap:14px;padding:14px;background:linear-gradient(145deg,#161b22e6,#0d1117f2);border-radius:12px;border:2px solid rgba(88,166,255,.2);position:relative;overflow:hidden}.watermark-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top left,rgba(88,166,255,.08),transparent 60%);pointer-events:none}.watermark-preview img{border-radius:8px;border:2px solid rgba(88,166,255,.3);box-shadow:0 4px 12px #58a6ff33;z-index:1}.watermark-tier-info{display:flex;align-items:center;gap:10px;font-size:12px;z-index:1}.watermark-position-section{display:flex;flex-direction:column;gap:12px;padding:16px;background:linear-gradient(145deg,#161b22e6,#0d1117f2);border-radius:14px;border:2px solid rgba(163,113,247,.2);position:relative;overflow:hidden}.watermark-position-section:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at bottom right,rgba(163,113,247,.08),transparent 60%);pointer-events:none}.watermark-position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:1}.watermark-pos-btn{padding:16px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:10px;color:#7d8590;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;overflow:hidden}.watermark-pos-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(163,113,247,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.watermark-pos-btn i{transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:1}.watermark-pos-btn:hover{background:linear-gradient(145deg,#30363d,#21262d);color:#f0f6fc;border-color:#a371f7;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px #a371f740}.watermark-pos-btn:hover:before{opacity:1}.watermark-pos-btn:hover i{transform:scale(1.2)}.watermark-pos-btn.active{background:linear-gradient(135deg,#a371f740,#8957e533);color:#a371f7;border-color:#a371f7;box-shadow:0 0 20px #a371f766,0 4px 12px #a371f74d}.watermark-pos-btn.active:before{opacity:1}.watermark-multi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.watermark-multi-btn{padding:18px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:10px;color:#7d8590;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;overflow:hidden}.watermark-multi-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(35,134,54,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.watermark-multi-btn i{transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:1}.watermark-multi-btn:hover:not(:disabled){background:linear-gradient(145deg,#30363d,#21262d);border-color:#3fb950;color:#f0f6fc;transform:translateY(-3px) scale(1.08);box-shadow:0 8px 20px #3fb95040}.watermark-multi-btn:hover:not(:disabled):before{opacity:1}.watermark-multi-btn:hover:not(:disabled) i{transform:scale(1.15)}.watermark-multi-btn.active{background:linear-gradient(135deg,#23863640,#2ea04333);color:#3fb950;border-color:#3fb950;box-shadow:0 0 20px #23863666,0 4px 12px #2386364d}.watermark-multi-btn.active:before{opacity:1}.watermark-multi-btn.active i{color:#3fb950;transform:scale(1.05)}.watermark-multi-btn:disabled{cursor:not-allowed;opacity:.4}.watermark-multi-btn:disabled i{opacity:.3!important}.music-controls{display:flex;flex-direction:column;gap:10px}.music-select-row{display:flex;gap:6px}.music-select-row select{flex:1;padding:10px 12px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;color:#f0f6fc;font-size:12px;cursor:pointer;transition:all .2s ease}.music-select-row select option{background:#161b22;color:#f0f6fc;padding:8px 12px}.music-select-row select:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff26}.music-info{background:linear-gradient(180deg,#161b22,#0d1117);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:12px;border:1px solid #21262d}.music-header{display:flex;align-items:center;gap:10px}.music-icon{width:36px;height:36px;background:linear-gradient(135deg,#238636,#2ea043);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}.music-details{flex:1;min-width:0}.music-name{font-size:12px;font-weight:600;color:#f0f6fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.music-meta{font-size:10px;color:#7d8590}.music-waveform-container{display:flex;flex-direction:column;gap:6px}.music-waveform{height:56px;background:#0d1117;border-radius:8px;position:relative;overflow:hidden;border:1px solid #21262d}#waveform-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8;pointer-events:none}.waveform-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,rgba(88,166,255,.1) 3px,rgba(88,166,255,.1) 4px)}.waveform-selection{position:absolute;top:0;height:100%;background:linear-gradient(180deg,#58a6ff4d,#58a6ff26);border-left:2px solid #58a6ff;border-right:2px solid #58a6ff;cursor:grab;transition:background .15s ease;min-width:20px}.waveform-selection:hover{background:linear-gradient(180deg,#58a6ff66,#58a6ff33)}.waveform-selection:active{cursor:grabbing}.selection-handle{position:absolute;top:0;width:16px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center}.selection-handle.left{left:-8px}.selection-handle.right{right:-8px}.handle-line{width:3px;height:28px;background:#58a6ff;border-radius:2px;transition:all .15s ease;box-shadow:0 0 6px #58a6ff80}.selection-handle:hover .handle-line{height:36px;background:#79b8ff;box-shadow:0 0 10px #58a6ffb3}.waveform-playhead{position:absolute;top:0;width:2px;height:100%;background:#f97316;pointer-events:none;display:block;left:0;opacity:0;transition:opacity .15s ease;box-shadow:0 0 8px #f97316cc;z-index:10}.waveform-playhead.active{opacity:1}.waveform-playhead:before{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#f97316;border-radius:50%;box-shadow:0 0 6px #f97316cc}.waveform-playhead:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#f97316;border-radius:50%;box-shadow:0 0 6px #f97316cc}.waveform-time-markers{display:flex;justify-content:space-between;font-size:10px;font-weight:500;color:#58a6ff;padding:0 4px}.music-controls-row{display:flex;align-items:center;gap:10px;margin-top:10px}.music-play-btn{width:36px;height:36px;background:linear-gradient(135deg,#238636,#2ea043);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;font-size:12px}.music-play-btn:hover{background:linear-gradient(135deg,#2ea043,#3fb950);transform:scale(1.05)}.music-volume-slider{flex:1;display:flex;align-items:center;gap:8px;color:#7d8590;font-size:11px}.music-volume-slider input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:#30363d;border-radius:2px;cursor:pointer}.music-volume-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#58a6ff;border-radius:50%;cursor:pointer;transition:transform .1s ease}.music-volume-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.export-size-controls{display:flex;flex-direction:column;gap:16px}.export-preview-container{display:flex;justify-content:center;padding:24px 20px;background:linear-gradient(145deg,#1f6feb14,#0d1117e6);border-radius:16px;border:1px solid rgba(88,166,255,.2);position:relative;overflow:hidden}.export-preview-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top right,rgba(88,166,255,.12),transparent 60%);pointer-events:none}.export-preview-frame{position:relative;display:flex;align-items:center;justify-content:center;width:120px;height:110px;z-index:1}.export-preview-inner{position:relative;display:flex;align-items:center;justify-content:center;width:45px;height:80px;background:linear-gradient(145deg,#58a6ff,#1f6feb);border-radius:8px;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px #58a6ff59,0 0 0 1px #ffffff26 inset,0 1px 2px #ffffff4d inset;border:3px solid rgba(255,255,255,.25)}.export-preview-inner:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 12px 32px #58a6ff73,0 0 0 1px #fff3 inset,0 1px 2px #fff6 inset}.export-preview-inner i{color:#fff9;font-size:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));transition:all .3s ease}.export-preview-inner:hover i{color:#ffffffe6;transform:scale(1.1)}.preview-resolution-badge{position:absolute;top:5px;right:5px;font-size:7px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f85149,#da3633);padding:3px 6px;border-radius:4px;letter-spacing:.4px;box-shadow:0 2px 8px #f8514966;border:1px solid rgba(255,255,255,.2)}.preview-fps-badge{position:absolute;top:5px;left:5px;font-size:7px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3fb950,#2ea043);padding:3px 6px;border-radius:4px;letter-spacing:.4px;box-shadow:0 2px 8px #3fb95066;border:1px solid rgba(255,255,255,.2)}.export-preview-label{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:12px;font-weight:800;color:#58a6ff;background:linear-gradient(135deg,#161b22f2,#0d1117fa);padding:4px 12px;border-radius:6px;border:1px solid rgba(88,166,255,.3);box-shadow:0 4px 12px #0000004d;letter-spacing:.5px}.export-preview-dimensions{position:absolute;top:-8px;left:50%;transform:translate(-50%);font-size:9px;font-weight:600;color:#7d8590;background:#161b22;padding:2px 8px;border-radius:4px;white-space:nowrap;font-family:SF Mono,Monaco,monospace}.aspect-ratio-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.aspect-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:12px;color:#7d8590;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.aspect-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.aspect-btn:hover{border-color:#58a6ff;color:#f0f6fc;transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px #58a6ff40}.aspect-btn:hover:before{opacity:1}.aspect-btn.active{background:linear-gradient(135deg,#58a6ff40,#1f6feb33);border-color:#58a6ff;color:#58a6ff;box-shadow:0 0 20px #58a6ff4d,0 4px 12px #0003;transform:translateY(-2px)}.aspect-btn.active:before{opacity:1}.aspect-btn .aspect-icon{width:30px;height:24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));z-index:1}.aspect-btn:hover .aspect-icon{transform:scale(1.15)}.aspect-btn.active .aspect-icon{transform:scale(1.1)}.aspect-btn span{font-size:10px;font-weight:700;letter-spacing:.3px;z-index:1}.fps-select{display:flex;flex-direction:column;gap:10px}.fps-select label{font-size:10px;color:#7d8590;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.fps-buttons{display:flex;gap:8px}.fps-btn{flex:1;padding:10px 12px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:10px;color:#7d8590;font-size:12px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.fps-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(63,185,80,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.fps-btn:after{content:" fps";font-size:8px;opacity:.6;font-weight:600}.fps-btn:hover{border-color:#3fb950;color:#f0f6fc;transform:translateY(-2px) scale(1.03);box-shadow:0 6px 16px #3fb95033}.fps-btn:hover:before{opacity:1}.fps-btn.active{background:linear-gradient(135deg,#3fb95040,#2ea04333);border-color:#3fb950;color:#3fb950;box-shadow:0 0 16px #3fb9504d,0 4px 12px #0003}.fps-btn.active:before{opacity:1}.fps-btn.active:after{opacity:1}.resolution-select{display:flex;flex-direction:column;gap:10px}.resolution-select label{font-size:10px;color:#7d8590;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.resolution-buttons{display:flex;gap:7px}.resolution-btn{flex:1;padding:10px 8px;background:linear-gradient(145deg,#21262d,#161b22);border:2px solid #30363d;border-radius:10px;color:#7d8590;font-size:11px;font-weight:800;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;letter-spacing:.3px}.resolution-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(88,166,255,.15),transparent 70%);opacity:0;transition:opacity .3s ease}.resolution-btn:hover{border-color:#58a6ff;color:#f0f6fc;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #58a6ff33}.resolution-btn:hover:before{opacity:1}.resolution-btn.active{background:linear-gradient(135deg,#58a6ff40,#1f6feb33);border-color:#58a6ff;color:#58a6ff;box-shadow:0 0 16px #58a6ff4d,0 4px 12px #0003}.resolution-btn.active:before{opacity:1}.resolution-btn.locked{opacity:.5;cursor:not-allowed}.resolution-btn.locked:hover{border-color:#f0883e;color:#f0883e;opacity:.8}.resolution-btn .lock-icon{position:absolute;top:2px;right:2px;font-size:8px;opacity:.7}.scene-size-display{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(180deg,#161b2299,#0d111766);border-radius:10px;border:1px solid #21262d}.scene-size-display .size-info{display:flex;align-items:center;gap:10px}.scene-size-display .size-info i{color:#58a6ff;font-size:14px}.scene-size-display span{font-size:13px;color:#f0f6fc;font-weight:600;font-family:SF Mono,Monaco,Cascadia Code,monospace}.size-badge{font-size:10px;font-weight:700;color:#58a6ff;background:linear-gradient(135deg,#58a6ff33,#1f6feb26);padding:4px 10px;border-radius:6px;border:1px solid rgba(88,166,255,.3)}.custom-gradient-card.modern{background:linear-gradient(165deg,#161b22f2,#0d1117fa);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:0 0 0 1px #ffffff08,0 20px 50px #0006;position:relative;overflow:hidden}.custom-gradient-card.modern:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 60%);pointer-events:none}.gradient-preview-section-modern{position:relative}.gradient-preview-large{height:120px;border-radius:16px;background:radial-gradient(circle at center,#667eea,#764ba2);transition:all .4s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.gradient-preview-large:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);pointer-events:none}.preview-overlay{position:absolute;bottom:12px;right:12px}.preview-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#ffffffb3;background:#00000080;padding:6px 12px;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.color-controls-modern{display:flex;align-items:center;justify-content:space-between;gap:16px}.color-picker-modern{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}.color-picker-wrapper{position:relative;width:56px;height:56px}.color-picker-wrapper input[type=color]{width:100%;height:100%;border:none;padding:0;cursor:pointer;background:transparent;border-radius:14px}.color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:4px}.color-picker-wrapper input[type=color]::-webkit-color-swatch{border-radius:10px;border:none;box-shadow:0 4px 16px #0000004d,inset 0 2px 4px #ffffff1a}.color-picker-ring{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px solid rgba(255,255,255,.1);border-radius:17px;pointer-events:none;transition:all .3s ease}.color-picker-modern:hover .color-picker-ring{border-color:#6366f180;box-shadow:0 0 20px #6366f14d}.color-info{text-align:center}.color-label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff6;margin-bottom:4px}.color-hex{font-size:11px;font-weight:600;color:#ffffffb3;font-family:SF Mono,Monaco,monospace}.swap-btn-modern{width:44px;height:44px;background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border:1px solid rgba(99,102,241,.2);border-radius:12px;color:#fff9;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.16,1,.3,1);flex-shrink:0}.swap-btn-modern:hover{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;transform:scale(1.1) rotate(180deg);border-color:transparent;box-shadow:0 8px 24px #6366f166}.swap-btn-modern:active{transform:scale(.95) rotate(180deg)}.gradient-bar-container{padding:0 4px}.color-bar-preview-modern{height:8px;border-radius:4px;background:linear-gradient(90deg,#667eea,#764ba2);box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff1a}.direction-section-modern{padding-top:8px}.section-header-modern{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;margin-bottom:12px}.section-header-modern .section-icon{width:28px;height:28px;background:linear-gradient(135deg,#6366f126,#8b5cf626);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#818cf8}.direction-grid-ultra{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:linear-gradient(180deg,#0000004d,#0003);border-radius:14px;padding:8px;border:1px solid rgba(255,255,255,.05)}.dir-btn-ultra{aspect-ratio:1;background:linear-gradient(180deg,#ffffff0d,#ffffff05);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.16,1,.3,1)}.dir-btn-ultra:hover{background:linear-gradient(180deg,#ffffff1a,#ffffff0d);color:#fffc;transform:scale(1.08);border-color:#ffffff26}.dir-btn-ultra.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff;box-shadow:0 4px 16px #6366f180}.quick-presets-modern{padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}.section-header-modern .add-preset-btn{margin-left:auto;width:28px;height:28px;background:linear-gradient(135deg,#22c55e26,#16a34a26);border:1px solid rgba(34,197,94,.3);border-radius:8px;color:#22c55e;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.16,1,.3,1)}.section-header-modern .add-preset-btn:hover{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;transform:scale(1.1);box-shadow:0 4px 16px #22c55e66}.quick-presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px}.quick-preset-item{position:relative;aspect-ratio:1;border-radius:12px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);overflow:hidden;border:2px solid rgba(255,255,255,.08)}.quick-preset-item:hover{transform:scale(1.1);border-color:#6366f180;box-shadow:0 8px 24px #0006;z-index:2}.quick-preset-item.active{border-color:#22c55e;box-shadow:0 0 0 3px #22c55e4d}.quick-preset-item .preset-preview-bg{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px}.quick-preset-item .preset-delete-btn{position:absolute;top:4px;right:4px;width:18px;height:18px;background:#ef4444e6;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .2s ease}.quick-preset-item:hover .preset-delete-btn{opacity:1;transform:scale(1)}.quick-preset-item .preset-delete-btn:hover{background:#ef4444;transform:scale(1.15)}.quick-preset-item .preset-name{position:absolute;bottom:0;left:0;right:0;padding:4px;background:linear-gradient(transparent,#000c);font-size:8px;font-weight:600;text-align:center;color:#ffffffe6;text-transform:uppercase;letter-spacing:.3px;opacity:0;transition:opacity .2s ease}.quick-preset-item:hover .preset-name{opacity:1}.randomize-btn-modern{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border:1px solid rgba(99,102,241,.2);border-radius:12px;color:#ffffffb3;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.randomize-btn-modern:hover{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 24px #6366f166}.randomize-btn-modern:active{transform:translateY(0)}.preset-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10002;animation:fadeIn .2s ease}.preset-dialog{background:linear-gradient(165deg,#1e232dfa,#0f1219fc);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;width:90%;max-width:360px;animation:slideUp .3s cubic-bezier(.16,1,.3,1);box-shadow:0 0 0 1px #ffffff0d,0 25px 60px #0009}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.preset-dialog-header{text-align:center;margin-bottom:24px}.preset-dialog-icon{width:56px;height:56px;margin:0 auto 16px;background:linear-gradient(135deg,#6366f133,#8b5cf633);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#818cf8}.preset-dialog-icon.delete{background:linear-gradient(135deg,#ef444433,#dc262633);color:#f87171}.preset-dialog-header h3{margin:0 0 8px;font-size:20px;font-weight:700;color:#fff}.preset-dialog-header p{margin:0;font-size:13px;color:#ffffff80}.preset-dialog-preview{height:80px;border-radius:12px;margin-bottom:20px;box-shadow:0 4px 20px #0000004d,inset 0 1px #ffffff1a}.preset-dialog-form{margin-bottom:16px}.preset-dialog-form label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;margin-bottom:8px}.preset-dialog-form input{width:100%;padding:12px 16px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:14px;outline:none;transition:all .2s ease;box-sizing:border-box}.preset-dialog-form input:focus{border-color:#6366f180;box-shadow:0 0 0 3px #6366f133}.preset-dialog-form input::placeholder{color:#ffffff4d}.preset-dialog-colors{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}.preset-dialog-colors .color-chip{padding:8px 16px;border-radius:8px;font-size:11px;font-weight:600;font-family:SF Mono,Monaco,monospace}.preset-dialog-colors .color-chip span{color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5)}.preset-dialog-colors svg{color:#ffffff4d}.preset-dialog-buttons{display:flex;gap:12px}.preset-dialog-cancel{flex:1;padding:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#ffffffb3;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.preset-dialog-cancel:hover{background:#ffffff1a;color:#fff}.preset-dialog-save{flex:1;padding:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease;box-shadow:0 4px 16px #6366f166}.preset-dialog-save:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6366f180}.preset-dialog-delete{flex:1;padding:14px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease;box-shadow:0 4px 16px #ef444466}.preset-dialog-delete:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ef444480}.text-overlay-controls{display:flex;flex-direction:column;gap:12px}.action-btn-primary{width:100%;padding:12px 16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:1px solid rgba(99,102,241,.3);border-radius:10px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #6366f14d}.action-btn-primary:hover{background:linear-gradient(135deg,#7c7ff2,#9d75f7);transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.action-btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #6366f14d}.action-btn-primary i{font-size:14px}.text-layer-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.text-layer-list::-webkit-scrollbar{width:6px}.text-layer-list::-webkit-scrollbar-track{background:transparent}.text-layer-list::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}.text-layer-list::-webkit-scrollbar-thumb:hover{background:#484f58}.text-layer-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 16px;background:#161b2266;border:2px dashed rgba(99,102,241,.3);border-radius:10px;color:#7d8590;text-align:center}.text-layer-empty i{font-size:28px;color:#6366f180}.text-layer-empty span{font-size:13px;font-weight:500}.text-layer-hint{font-size:11px!important;color:#6e7681!important}.text-layer-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#161b2299;border:1px solid rgba(48,54,61,.6);border-radius:8px;cursor:pointer;transition:all .15s ease}.text-layer-item:hover{background:#21262dcc;border-color:#6366f14d}.text-layer-item.selected{background:#6366f11f;border-color:#6366f180}.text-layer-item.hidden-layer{opacity:.5}.text-layer-color-indicator{width:4px;height:28px;border-radius:2px;flex-shrink:0}.text-layer-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.text-layer-name{font-size:12px;font-weight:500;color:#e6edf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-layer-meta{font-size:10px;color:#7d8590}.text-layer-actions{display:flex;gap:2px;flex-shrink:0;opacity:.6;transition:opacity .15s ease}.text-layer-item:hover .text-layer-actions{opacity:1}.layer-action-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:5px;color:#7d8590;cursor:pointer;transition:all .15s ease;font-size:11px}.layer-action-btn:hover{background:#ffffff1a;color:#e6edf3}.layer-action-btn.active{color:#58a6ff}.layer-action-btn.edit-btn:hover{color:#6366f1;background:#6366f126}.layer-action-btn.delete-btn:hover{color:#f85149;background:#f8514926}.text-editor-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.text-editor-content{width:90%;max-width:700px;max-height:90vh;background:linear-gradient(180deg,#161b22,#0d1117);border:1px solid #30363d;border-radius:16px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.text-editor-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #21262d}.text-editor-header h3{margin:0;font-size:16px;font-weight:600;color:#f0f6fc;display:flex;align-items:center;gap:10px}.text-editor-header h3 i{color:#6366f1}.text-editor-close{width:32px;height:32px;border-radius:8px;border:none;background:#ffffff1a;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.text-editor-close:hover{background:#f8514933;color:#f85149}.text-editor-body{padding:20px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}.text-form-group{display:flex;flex-direction:column;gap:8px}.text-form-group label{font-size:12px;font-weight:600;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.text-form-group textarea,.text-form-group input[type=text],.text-form-group input[type=number],.text-form-group select{width:100%;padding:10px 12px;background:#21262d;border:1px solid #30363d;border-radius:8px;color:#f0f6fc;font-size:14px;transition:all .2s ease;box-sizing:border-box}.text-form-group textarea{min-height:80px;resize:vertical;font-family:inherit}.text-form-group textarea:focus,.text-form-group input[type=text]:focus,.text-form-group input[type=number]:focus,.text-form-group select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.text-form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.text-form-row.three-cols{grid-template-columns:repeat(3,1fr)}.text-color-picker{display:flex;align-items:center;gap:10px}.text-color-picker input[type=color]{width:40px;height:40px;border:2px solid #30363d;border-radius:8px;padding:2px;cursor:pointer;background:none}.text-color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.text-color-picker input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}.text-color-hex{flex:1;padding:10px 12px;background:#21262d;border:1px solid #30363d;border-radius:8px;color:#f0f6fc;font-size:14px;font-family:SF Mono,Monaco,monospace}.text-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.text-toggle-row span{font-size:13px;color:#f0f6fc}.text-section-divider{display:flex;align-items:center;gap:12px;padding:12px 0 8px;border-top:1px solid #21262d;margin-top:8px}.text-section-divider i{color:#6366f1;font-size:14px}.text-section-divider span{font-size:12px;font-weight:600;color:#7d8590;text-transform:uppercase;letter-spacing:.5px}.text-position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.text-position-btn{padding:12px 8px;background:linear-gradient(180deg,#21262d,#161b22);border:1px solid #30363d;border-radius:8px;color:#7d8590;font-size:9px;font-weight:600;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.text-position-btn:hover{background:linear-gradient(180deg,#30363d,#21262d);color:#f0f6fc;border-color:#484f58}.text-position-btn.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#6366f1;color:#fff;box-shadow:0 4px 12px #6366f14d}.text-editor-footer{display:flex;gap:12px;padding:16px 20px;border-top:1px solid #21262d;background:#0d111780}.text-editor-btn{flex:1;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.text-editor-btn.cancel{background:transparent;border:1px solid #30363d;color:#7d8590}.text-editor-btn.cancel:hover{background:#ffffff0d;border-color:#484f58;color:#f0f6fc}.text-editor-btn.save{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;box-shadow:0 4px 12px #6366f14d}.text-editor-btn.save:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.text-align-buttons{display:flex;gap:4px}.text-align-btn{flex:1;padding:10px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#7d8590;cursor:pointer;transition:all .2s ease}.text-align-btn:hover{background:#30363d;color:#f0f6fc}.text-align-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.text-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:popupFadeIn .2s ease}@keyframes popupFadeIn{0%{opacity:0}to{opacity:1}}.text-popup{background:linear-gradient(145deg,#1e232df2,#141820fa);border:1px solid rgba(255,255,255,.08);border-radius:16px;width:100%;max-width:440px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 80px #00000080,0 0 1px #ffffff1a inset;animation:popupSlideIn .25s cubic-bezier(.16,1,.3,1);overflow:hidden}@keyframes popupSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.text-popup-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(180deg,rgba(99,102,241,.08) 0%,transparent 100%);border-bottom:1px solid rgba(255,255,255,.06)}.text-popup-header-icon{width:36px;height:36px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}.text-popup-title{flex:1;font-size:15px;font-weight:600;color:#f0f6fc}.text-popup-close{width:30px;height:30px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.text-popup-close:hover{background:#f8514926;border-color:#f851494d;color:#f85149}.text-popup-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.popup-card{background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:14px}.popup-card-title{font-size:11px;font-weight:600;color:#a0aec0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}.popup-card-title i{color:#6366f1;font-size:11px}.popup-card textarea{width:100%;min-height:70px;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;color:#f0f6fc;font-size:14px;font-family:inherit;resize:vertical;outline:none;transition:all .2s}.popup-card textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.popup-card textarea::placeholder{color:#6c757d}.popup-field{display:flex;flex-direction:column;gap:6px}.popup-field label{font-size:10px;font-weight:500;color:#7d8590;text-transform:uppercase;letter-spacing:.3px}.popup-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}.popup-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.popup-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.popup-field select{background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 12px;color:#f0f6fc;font-size:12px;cursor:pointer;outline:none;transition:all .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237d8590' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.popup-field select:focus{border-color:#6366f1}.popup-input-unit{display:flex;align-items:center;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;transition:all .15s}.popup-input-unit:focus-within{border-color:#6366f1}.popup-input-unit input{flex:1;background:transparent;border:none;padding:9px 10px;color:#f0f6fc;font-size:12px;outline:none;min-width:0}.popup-input-unit span{padding:0 10px;color:#6c757d;font-size:11px;background:#ffffff08}.popup-color-field{display:flex;align-items:center;gap:8px;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:4px 10px 4px 4px}.popup-color-field input[type=color]{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;padding:0;background:transparent}.popup-color-hex{font-size:11px;color:#7d8590;font-family:SF Mono,Consolas,monospace;text-transform:uppercase}.popup-align-btns{display:flex;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:3px}.popup-align-btn{flex:1;padding:7px;background:transparent;border:none;border-radius:5px;color:#7d8590;cursor:pointer;transition:all .15s;font-size:11px}.popup-align-btn:hover{color:#f0f6fc;background:#ffffff0d}.popup-align-btn.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.popup-rotation-control{display:flex;align-items:center;gap:10px}.popup-slider{flex:1;-webkit-appearance:none;height:4px;background:#ffffff1a;border-radius:2px;outline:none}.popup-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #6366f166}.popup-slider::-moz-range-thumb{width:14px;height:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;cursor:pointer;border:none}.popup-rotation-input{width:70px}.popup-reset-btn{width:32px;height:32px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:11px}.popup-reset-btn:hover{background:#6366f126;border-color:#6366f14d;color:#6366f1}.popup-position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}.popup-pos-btn{aspect-ratio:2;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:6px;cursor:pointer;position:relative;transition:all .15s}.popup-pos-btn:after{content:"";position:absolute;width:6px;height:6px;background:#6c757d;border-radius:50%;transition:all .15s}.popup-pos-btn[data-position=top-left]:after{top:6px;left:6px}.popup-pos-btn[data-position=top-center]:after{top:6px;left:50%;transform:translate(-50%)}.popup-pos-btn[data-position=top-right]:after{top:6px;right:6px}.popup-pos-btn[data-position=middle-left]:after{top:50%;left:6px;transform:translateY(-50%)}.popup-pos-btn[data-position=middle-center]:after{top:50%;left:50%;transform:translate(-50%,-50%)}.popup-pos-btn[data-position=middle-right]:after{top:50%;right:6px;transform:translateY(-50%)}.popup-pos-btn[data-position=bottom-left]:after{bottom:6px;left:6px}.popup-pos-btn[data-position=bottom-center]:after{bottom:6px;left:50%;transform:translate(-50%)}.popup-pos-btn[data-position=bottom-right]:after{bottom:6px;right:6px}.popup-pos-btn:hover{background:#6366f11a;border-color:#6366f14d}.popup-pos-btn:hover:after,.popup-pos-btn.active:after{background:#6366f1;box-shadow:0 0 8px #6366f180}.popup-pos-btn.active{background:#6366f126;border-color:#6366f1}.popup-effect-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0}.popup-effect-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.05)}.popup-effect-label{font-size:12px;color:#f0f6fc;min-width:60px}.popup-effect-fields{display:none;flex:1;gap:6px;align-items:center;justify-content:flex-end}.popup-effect-fields.show{display:flex}.popup-effect-fields input[type=color]{width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;padding:2px;background:transparent}.popup-effect-fields input[type=number]{width:50px;background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:6px 8px;color:#f0f6fc;font-size:11px;outline:none}.popup-effect-fields input[type=number]:focus{border-color:#6366f1}.popup-switch{position:relative;width:36px;height:20px;flex-shrink:0}.popup-switch-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#ffffff1a;border-radius:10px;transition:all .2s}.popup-switch-slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#7d8590;border-radius:50%;transition:all .2s}.popup-switch input:checked+.popup-switch-slider:before{transform:translate(16px);background:#fff}.popup-anim-options{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}.popup-anim-options .popup-field{margin-bottom:10px}.text-popup-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;background:#0003;border-top:1px solid rgba(255,255,255,.05)}.popup-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .15s}.popup-btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.1);color:#7d8590}.popup-btn-cancel:hover{background:#ffffff0d;color:#f0f6fc}.popup-btn-save{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;box-shadow:0 4px 12px #6366f14d}.popup-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f166}.popup-btn-save i{font-size:11px}.music-library-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:linear-gradient(135deg,#6366f126,#8b5cf61a);border:1px solid rgba(99,102,241,.3);border-radius:10px;color:#e6edf3;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.music-library-btn:hover{background:linear-gradient(135deg,#6366f140,#8b5cf633);border-color:#6366f180;transform:translateY(-1px);box-shadow:0 4px 20px #6366f133}.music-library-btn i:first-child{font-size:16px;color:#a78bfa}.music-library-btn span{flex:1;text-align:left}.music-library-btn i:last-child{font-size:11px;opacity:.5;transition:transform .2s ease}.music-library-btn:hover i:last-child{transform:translate(3px);opacity:.8}.music-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100000;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.music-modal-overlay.active{opacity:1;visibility:visible}.music-modal{width:90%;max-width:900px;max-height:85vh;background:linear-gradient(165deg,#1a1d24,#13161c,#0d0f14);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #ffffff0d,0 25px 80px #000000b3,0 0 100px #6366f11a;display:flex;flex-direction:column;overflow:hidden;transform:scale(.9) translateY(20px);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.music-modal-overlay.active .music-modal{transform:scale(1) translateY(0)}.music-modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%)}.music-modal-title{display:flex;align-items:center;gap:16px}.music-modal-icon{width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #6366f159}.music-modal-icon svg{width:24px;height:24px;color:#fff}.music-modal-title h2{font-size:22px;font-weight:700;color:#f0f6fc;margin:0;letter-spacing:-.02em}.music-modal-subtitle{font-size:13px;color:#7d8590;margin:4px 0 0}.music-modal-close{width:36px;height:36px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#7d8590;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.music-modal-close:hover{background:#f8514926;border-color:#f851494d;color:#f85149;transform:rotate(90deg)}.music-modal-search{padding:16px 28px;position:relative;display:flex;gap:12px;align-items:center}.music-modal-search>i:first-child{position:absolute;left:44px;top:50%;transform:translateY(-50%);color:#6e7681;font-size:14px;pointer-events:none}.music-modal-search input{flex:1;padding:14px 16px 14px 44px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#e6edf3;font-size:14px;transition:all .2s ease}.music-modal-search input:focus{outline:none;background:#ffffff0f;border-color:#6366f180;box-shadow:0 0 0 3px #6366f11a}.music-modal-search input::placeholder{color:#484f58}.music-download-all-btn{display:flex;align-items:center;gap:8px;padding:12px 18px;background:linear-gradient(135deg,#6366f126,#a855f726);border:1px solid rgba(99,102,241,.3);border-radius:10px;color:#a5b4fc;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.music-download-all-btn:hover{background:linear-gradient(135deg,#6366f140,#a855f740);border-color:#6366f180;color:#c7d2fe;transform:translateY(-1px)}.music-download-all-btn:active{transform:translateY(0)}.music-download-all-btn i{font-size:14px;position:static;transform:none;color:inherit;pointer-events:auto}.music-download-all-btn.downloading{pointer-events:none;opacity:.7}.music-download-all-btn.downloading i{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.music-modal-body{flex:1;overflow-y:auto;padding:8px 28px 24px;scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.3) transparent}.music-modal-body::-webkit-scrollbar{width:6px}.music-modal-body::-webkit-scrollbar-track{background:transparent}.music-modal-body::-webkit-scrollbar-thumb{background:#6366f14d;border-radius:3px}.music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:4px}.music-card{background:linear-gradient(165deg,#1e232df2,#141820fa);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;cursor:pointer;transition:all .35s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.music-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#6366f11f,#a855f714,#ec48990a);opacity:0;transition:opacity .35s ease;pointer-events:none}.music-card:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(255,255,255,.03) 0%,transparent 50%);opacity:0;transition:opacity .35s ease;pointer-events:none}.music-card:hover{border-color:#6366f166;transform:translateY(-4px) scale(1.01);box-shadow:0 12px 40px #0006,0 0 60px #6366f11a}.music-card:hover:before{opacity:1}.music-card:hover:after{opacity:1}.music-card.selected{border-color:#6366f1b3;background:linear-gradient(165deg,#6366f126,#8b5cf614,#141820f2);box-shadow:0 0 0 2px #6366f140,0 12px 40px #6366f133,inset 0 1px #ffffff1a}.music-card.selected:before{opacity:1}.music-card.loading{pointer-events:none}.music-card.loading .music-card-icon{background:linear-gradient(135deg,#3b4252,#2e3440)}.music-card.loading .music-card-icon:after{content:"";position:absolute;width:24px;height:24px;border:2px solid rgba(99,102,241,.3);border-top-color:#6366f1;border-radius:50%;animation:card-spin .8s linear infinite}.music-card.loading .music-card-icon .music-icon,.music-card.loading .music-card-icon .play-icon{opacity:0}@keyframes card-spin{to{transform:rotate(360deg)}}.music-card-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#0000004d;overflow:hidden;opacity:0;transition:opacity .2s ease}.music-card.loading .music-card-progress{opacity:1}.music-card-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);transition:width .15s ease;border-radius:0 3px 3px 0}.music-card-meta .duration-loading{display:inline-flex;align-items:center;gap:4px;color:#6366f1}.music-card-meta .duration-loading:after{content:"";width:10px;height:10px;border:1.5px solid rgba(99,102,241,.3);border-top-color:#6366f1;border-radius:50%;animation:card-spin .8s linear infinite}.music-card-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;position:relative;z-index:1}.music-card-icon{width:52px;height:52px;background:linear-gradient(145deg,#2d333b,#21262d);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#8b949e;font-size:20px;transition:all .35s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 2px 8px #0003}.music-card:hover .music-card-icon,.music-card.selected .music-card-icon{background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);color:#fff;box-shadow:0 6px 24px #6366f180,inset 0 1px #fff3;transform:scale(1.05)}.music-card-icon .play-icon{opacity:0;position:absolute;transition:all .25s ease;transform:scale(.8)}.music-card:hover .music-card-icon .music-icon{opacity:0;transform:scale(.8)}.music-card:hover .music-card-icon .play-icon{opacity:1;transform:scale(1)}.music-card.playing .music-card-icon{background:linear-gradient(135deg,#22c55e,#16a34a,#10b981);box-shadow:0 6px 24px #22c55e80,inset 0 1px #fff3;animation:pulse-glow 1.5s ease-in-out infinite}.music-card.playing .music-card-icon .music-icon{opacity:0}.music-card.playing .music-card-icon .play-icon{opacity:1;transform:scale(1)}.music-card.playing .music-card-icon .play-icon:before{content:""}@keyframes pulse-glow{0%,to{box-shadow:0 6px 24px #22c55e80,inset 0 1px #fff3;transform:scale(1.05)}50%{box-shadow:0 8px 32px #22c55eb3,inset 0 1px #fff3;transform:scale(1.08)}}.music-card-info{flex:1;min-width:0}.music-card-name{font-size:15px;font-weight:600;color:#f0f6fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;letter-spacing:-.01em}.music-card:hover .music-card-name,.music-card.selected .music-card-name{color:#fff}.music-card-meta{font-size:12px;color:#8b949e;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.music-card-meta span{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;background:#ffffff0a;border-radius:6px;transition:all .2s ease}.music-card:hover .music-card-meta span{background:#6366f11a;color:#a5b4fc}.music-card-meta span i{font-size:10px;opacity:.7}.music-card-check{width:22px;height:22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.34,1.56,.64,1)}.music-card.selected .music-card-check{opacity:1;transform:scale(1)}.music-card-check i{color:#fff;font-size:10px}.uploaded-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.uploaded-badge i{margin-right:3px}.music-card.uploaded{background:linear-gradient(135deg,#10b98126,#0596691a);border-color:#10b98166;order:-1}.music-card.uploaded:hover{border-color:#10b98199;box-shadow:0 8px 30px #10b9814d}.music-card.uploaded .music-card-icon{background:linear-gradient(135deg,#10b981,#059669)}.music-card.uploaded.selected{border-color:#10b981;box-shadow:0 0 0 2px #10b9814d,0 8px 30px #10b9814d}.music-card.uploaded .music-card-check{background:linear-gradient(135deg,#10b981,#059669)}.music-card-waveform{height:56px;background:linear-gradient(180deg,#00000026,#00000040);border-radius:12px;overflow:hidden;position:relative;z-index:1;border:1px solid rgba(255,255,255,.03)}.music-card-waveform canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:1}.music-card-waveform canvas+.waveform-playhead+.music-card-waveform-bars:empty,.music-card-waveform-bars[style*="display: none"]{display:none!important}.waveform-progress-overlay{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,#22c55e40,#22c55e26);pointer-events:none;transition:width .1s linear;border-radius:12px 0 0 12px}.waveform-playhead{position:absolute;top:0;left:0%;width:2px;height:100%;background:linear-gradient(180deg,#4ade80,#22c55e,#16a34a);box-shadow:0 0 8px #22c55e99;pointer-events:none;opacity:0;transition:left .1s linear,opacity .2s ease}.music-card.playing .waveform-playhead{opacity:1}.music-card-waveform{cursor:pointer}.music-card.playing .music-card-waveform{cursor:ew-resize}.music-card.playing .music-card-waveform:hover .waveform-playhead{box-shadow:0 0 12px #22c55ecc}.music-card.playing.paused .music-card-icon .play-icon:before{content:""}.music-card.playing:not(.paused) .music-card-icon .play-icon:before{content:""}.music-card-waveform-bars{display:flex;align-items:center;justify-content:space-between;height:100%;gap:3px;padding:10px 14px}.music-card-waveform-bars span{flex:1;max-width:6px;min-height:4px;background:linear-gradient(180deg,#818cf8,#6366f1,#4f46e5);border-radius:3px;opacity:.3;transition:all .25s cubic-bezier(.25,.8,.25,1)}.music-card:hover .music-card-waveform-bars span,.music-card.selected .music-card-waveform-bars span{opacity:.6}.music-card:hover .music-card-waveform{background:linear-gradient(180deg,#6366f10d,#0003)}.music-card.playing .music-card-waveform{background:linear-gradient(180deg,#22c55e1a,#0003)}.music-card.playing .music-card-waveform-bars span{opacity:1;background:linear-gradient(180deg,#4ade80,#22c55e,#16a34a);animation:waveform-dance .6s ease-in-out infinite}.music-card.playing .music-card-waveform-bars span:nth-child(1){animation-delay:0s;animation-duration:.5s}.music-card.playing .music-card-waveform-bars span:nth-child(2){animation-delay:.08s;animation-duration:.55s}.music-card.playing .music-card-waveform-bars span:nth-child(3){animation-delay:.15s;animation-duration:.48s}.music-card.playing .music-card-waveform-bars span:nth-child(4){animation-delay:.05s;animation-duration:.6s}.music-card.playing .music-card-waveform-bars span:nth-child(5){animation-delay:.12s;animation-duration:.52s}.music-card.playing .music-card-waveform-bars span:nth-child(6){animation-delay:.03s;animation-duration:.58s}.music-card.playing .music-card-waveform-bars span:nth-child(7){animation-delay:.1s;animation-duration:.45s}.music-card.playing .music-card-waveform-bars span:nth-child(8){animation-delay:.07s;animation-duration:.55s}.music-card.playing .music-card-waveform-bars span:nth-child(9){animation-delay:.02s;animation-duration:.53s}.music-card.playing .music-card-waveform-bars span:nth-child(10){animation-delay:.11s;animation-duration:.47s}.music-card.playing .music-card-waveform-bars span:nth-child(11){animation-delay:.06s;animation-duration:.56s}.music-card.playing .music-card-waveform-bars span:nth-child(12){animation-delay:.09s;animation-duration:.51s}@keyframes waveform-dance{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.music-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 100%)}.music-now-playing{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:10px}.now-playing-visualizer{display:flex;align-items:flex-end;gap:3px;height:16px}.now-playing-visualizer span{width:3px;background:#22c55e;border-radius:2px;animation:equalizer .8s ease-in-out infinite}.now-playing-visualizer span:nth-child(1){animation-delay:0s;height:8px}.now-playing-visualizer span:nth-child(2){animation-delay:.15s;height:14px}.now-playing-visualizer span:nth-child(3){animation-delay:.3s;height:10px}.now-playing-visualizer span:nth-child(4){animation-delay:.45s;height:16px}.now-playing-visualizer span:nth-child(5){animation-delay:.6s;height:6px}@keyframes equalizer{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.now-playing-text{font-size:13px;color:#22c55e;font-weight:500}.music-modal-actions{display:flex;gap:12px}.music-modal-btn{padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.music-modal-btn.secondary{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#8b949e}.music-modal-btn.secondary:hover{background:#ffffff14;color:#e6edf3}.music-modal-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;box-shadow:0 4px 16px #6366f14d}.music-modal-btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #6366f166}.music-modal-btn.primary:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.music-modal{width:95%;max-height:90vh;border-radius:16px}.music-modal-header{padding:20px}.music-modal-body{padding:8px 20px 20px}.music-grid{grid-template-columns:1fr}.music-modal-footer{flex-direction:column;gap:16px;padding:16px 20px}.music-modal-actions{width:100%}.music-modal-btn{flex:1;justify-content:center}}.text-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.text-popup{background:linear-gradient(180deg,#1e293b,#0f172a);border:1px solid rgba(148,163,184,.1);border-radius:16px;width:90%;max-width:700px;max-height:fit-content;overflow:hidden;box-shadow:0 25px 50px -12px #000c;display:flex;flex-direction:column}.text-popup-header{background:linear-gradient(180deg,#334155,#1e293b);padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(148,163,184,.1)}.text-popup-header-icon{width:40px;height:40px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}.text-popup-title{flex:1;color:#f1f5f9;font-size:18px;font-weight:600;letter-spacing:-.02em}.text-popup-close{width:36px;height:36px;background:#94a3b81a;border:none;border-radius:8px;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.text-popup-close:hover{background:#ef444433;color:#ef4444}.text-popup-body{padding:20px;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.popup-card{background:#1e293b80;border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:16px;margin-bottom:0;box-sizing:border-box}.popup-card.full-width{grid-column:1 / -1}.popup-section{background:#1e293b4d;border:1px solid rgba(148,163,184,.08);border-radius:10px;padding:12px;box-sizing:border-box}.popup-section.full-width{width:100%}.popup-controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.popup-control{display:flex;flex-direction:column;gap:6px}.popup-control label{color:#94a3b8;font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px}.popup-control label i{font-size:10px;opacity:.7}.popup-control select,.popup-control input[type=number]{width:100%;background:#0f172a99;border:1px solid rgba(148,163,184,.15);border-radius:6px;padding:8px 10px;color:#f1f5f9;font-size:13px;box-sizing:border-box}.popup-control select:focus,.popup-control input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f11a}.popup-color-compact{display:flex;gap:6px;align-items:center}.popup-color-preview-small{width:32px;height:32px;border-radius:6px;border:2px solid rgba(148,163,184,.2);cursor:pointer;position:relative;overflow:hidden;flex-shrink:0}.popup-color-preview-small input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.popup-color-hex-compact{flex:1;background:#0f172a99;border:1px solid rgba(148,163,184,.15);border-radius:6px;padding:8px 10px;color:#f1f5f9;font-size:12px;font-family:SF Mono,Monaco,monospace;text-transform:uppercase;box-sizing:border-box}.popup-rotation-compact{display:flex;gap:6px;align-items:center}.popup-slider-compact{flex:1;-webkit-appearance:none;height:4px;background:#0f172a99;border:1px solid rgba(148,163,184,.15);border-radius:2px;outline:none}.popup-slider-compact::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;cursor:pointer}.popup-rotation-input-compact{width:75px}.popup-effects-compact{display:grid;grid-template-columns:1fr 1fr;gap:10px}.popup-effect-compact{display:flex;flex-direction:column;gap:8px}.popup-effect-toggle{display:flex;align-items:center;gap:8px}.popup-effect-toggle span{color:#cbd5e1;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}.popup-effect-toggle span i{font-size:11px;opacity:.7}.popup-switch-compact{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}.popup-switch-compact input{opacity:0;width:0;height:0}.popup-switch-slider-compact{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#94a3b833;transition:.3s;border-radius:10px}.popup-switch-slider-compact:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}.popup-switch-compact input:checked+.popup-switch-slider-compact{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.popup-switch-compact input:checked+.popup-switch-slider-compact:before{transform:translate(16px)}.popup-effect-controls{display:none;gap:6px;grid-template-columns:40px 1fr 1fr 1fr}.popup-effect-controls.show{display:grid}.popup-effect-controls input[type=color]{width:100%;height:32px;border:1px solid rgba(148,163,184,.15);border-radius:6px;cursor:pointer;background:#0f172a99;box-sizing:border-box}.popup-effect-controls input[type=number]{width:100%;padding:6px 8px;font-size:12px;background:#0f172a99;border:1px solid rgba(148,163,184,.15);border-radius:6px;color:#f1f5f9;box-sizing:border-box}.popup-card-title{color:#f1f5f9;font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}.popup-card-title i{color:#6366f1}.popup-field{margin-bottom:12px}.popup-field:last-child{margin-bottom:0}.popup-field label{display:block;color:#cbd5e1;font-size:13px;font-weight:500;margin-bottom:8px}.popup-field input[type=text],.popup-field input[type=number],.popup-field input[type=range],.popup-field select,.popup-field textarea{width:100%;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:10px 12px;color:#f1f5f9;font-size:14px;transition:all .2s ease;box-sizing:border-box}.popup-field input[type=text]:focus,.popup-field input[type=number]:focus,.popup-field select:focus,.popup-field textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.popup-field textarea{min-height:80px;resize:vertical;font-family:inherit}#text-content-input{background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:12px;color:#f1f5f9;font-size:14px;width:100%;min-height:80px;max-height:120px;resize:vertical;box-sizing:border-box;font-family:inherit}#text-content-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.popup-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.popup-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.popup-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}.popup-input-unit{display:flex;align-items:center;gap:8px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:0 12px}.popup-input-unit input{border:none!important;background:transparent!important;padding:10px 0!important;flex:1}.popup-input-unit span{color:#94a3b8;font-size:13px;font-weight:500}.popup-color-picker-field{grid-column:1 / -1!important}.popup-color-picker-container{display:flex;align-items:center;gap:12px;margin-bottom:12px}.popup-color-preview{position:relative;width:60px;height:60px;border-radius:12px;border:3px solid rgba(148,163,184,.3);cursor:pointer;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 12px #0000004d,inset 0 0 0 1px #ffffff1a}.popup-color-preview:hover{transform:scale(1.05);border-color:#6366f1;box-shadow:0 8px 20px #6366f166,inset 0 0 0 1px #fff3}.popup-color-preview input[type=color]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.popup-color-hex-input{flex:1;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:10px;padding:16px 18px;color:#f1f5f9;font-size:16px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all .2s ease}.popup-color-hex-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f126;background:#0f172a}.popup-color-presets{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:4px}.popup-color-preset{width:100%;aspect-ratio:1;border:2px solid rgba(148,163,184,.2);border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;box-shadow:0 2px 6px #0003,inset 0 0 0 1px #ffffff1a}.popup-color-preset:hover{transform:scale(1.15);border-color:#fff;box-shadow:0 4px 12px #0006,0 0 0 2px #6366f1,inset 0 0 0 1px #fff3;z-index:10}.popup-color-preset:active{transform:scale(1.05)}.popup-color-preset[data-color="#ffffff"]{border-color:#94a3b866;box-shadow:0 2px 6px #0003,inset 0 0 0 1px #0000001a}.popup-align-btns{display:flex;gap:4px}.popup-align-btn{flex:1;padding:10px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;color:#94a3b8;cursor:pointer;transition:all .2s ease}.popup-align-btn:hover{background:#6366f11a;border-color:#6366f1;color:#f1f5f9}.popup-align-btn.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff}.popup-rotation-control{display:flex;align-items:center;gap:12px}.popup-rotation-control input[type=range]{flex:1}.popup-rotation-input{width:90px}.popup-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:3px;outline:none}.popup-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;cursor:pointer}.popup-slider::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;cursor:pointer;border:none}.popup-effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.popup-effect-row{display:flex;flex-direction:column;gap:10px}.popup-effect-header{display:flex;align-items:center;gap:10px}.popup-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.popup-switch input{opacity:0;width:0;height:0}.popup-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#94a3b833;transition:.3s;border-radius:12px}.popup-switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}.popup-switch input:checked+.popup-switch-slider{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.popup-switch input:checked+.popup-switch-slider:before{transform:translate(20px)}.popup-effect-label{color:#cbd5e1;font-size:13px;font-weight:600;flex:1}.popup-effect-fields{display:none;gap:8px}.popup-effect-fields.show{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}.popup-effect-fields input[type=color]{width:100%;height:38px}.popup-effect-fields input[type=number]{width:100%;padding:8px 10px;font-size:13px}.popup-anim-options{display:none;margin-top:16px}.popup-anim-options.show{display:block}.text-popup-footer{padding:20px 24px;background:#1e293b80;border-top:1px solid rgba(148,163,184,.1);display:flex;gap:12px;justify-content:flex-end}.popup-btn-cancel{background:#94a3b81a;color:#cbd5e1}.popup-btn-cancel:hover{background:#94a3b833}.popup-btn-save{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.popup-btn-save:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px #6366f180}.popup-slider-field{display:flex;align-items:center;gap:12px}.popup-slider-field input[type=range]{flex:1}.popup-slider-field input[type=number]{width:70px;text-align:center}input[type=color]{width:100%;height:44px;border:1px solid rgba(148,163,184,.2);border-radius:8px;cursor:pointer;background:#0f172acc}.popup-checkbox-field{display:flex;align-items:center;gap:10px}.popup-checkbox-field input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#6366f1}.popup-checkbox-field label{margin:0;cursor:pointer}.popup-footer{padding:20px 24px;background:#1e293b80;border-top:1px solid rgba(148,163,184,.1);display:flex;gap:12px;justify-content:flex-end}.popup-btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.popup-btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.popup-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px #6366f180}.popup-btn-secondary{background:#94a3b81a;color:#cbd5e1}.popup-btn-secondary:hover{background:#94a3b833}.popup-reset-btn{width:36px;height:36px;background:#94a3b81a;border:none;border-radius:8px;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.popup-reset-btn:hover{background:#6366f133;color:#6366f1}.popup-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.popup-preset-btn{padding:12px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;color:#cbd5e1;font-size:13px;cursor:pointer;transition:all .2s ease}.popup-preset-btn:hover{background:#6366f11a;border-color:#6366f1;color:#f1f5f9}.popup-preset-btn.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#toast-container{position:fixed;top:20px;left:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:linear-gradient(180deg,#161b22,#0d1117);border:1px solid #30363d;border-radius:10px;padding:14px 18px;min-width:280px;max-width:400px;box-shadow:0 12px 32px #00000080;display:flex;align-items:center;gap:12px;animation:toastSlideIn .3s ease;pointer-events:all}.toast.info{border-left:3px solid #58a6ff}.toast.warning{border-left:3px solid #f0883e}.toast.error{border-left:3px solid #f85149}.toast.success{border-left:3px solid #3fb950}.toast-icon{font-size:18px;flex-shrink:0}.toast.info .toast-icon{color:#58a6ff}.toast.warning .toast-icon{color:#f0883e}.toast.error .toast-icon{color:#f85149}.toast.success .toast-icon{color:#3fb950}.toast-message{color:#f0f6fc;font-size:13px;flex:1}.toast-close{background:none;border:none;color:#484f58;cursor:pointer;font-size:18px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:4px;transition:all .15s ease}.toast-close:hover{color:#f0f6fc;background:#21262d}@keyframes toastSlideIn{0%{transform:translate(-400px);opacity:0}to{transform:translate(0);opacity:1}}.easing-popup{position:fixed;background:#161b22;border:1px solid #30363d;border-radius:12px;padding:12px;z-index:1000;box-shadow:0 16px 48px #00000080;min-width:220px}.easing-popup-header{font-size:12px;font-weight:600;color:#7d8590;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #21262d}.easing-options{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.easing-option,.connection-easing-option{display:flex;flex-direction:column;align-items:center;padding:10px 8px;background:#0d1117;border:1px solid #21262d;border-radius:8px;cursor:pointer;transition:all .15s ease}.easing-option:hover,.connection-easing-option:hover{background:#21262d;border-color:#30363d}.easing-option.selected,.connection-easing-option.selected{background:#1f6feb;border-color:#58a6ff}.easing-option svg,.connection-easing-option svg{width:40px;height:40px;color:#7d8590;margin-bottom:4px}.easing-option.selected svg,.connection-easing-option.selected svg{color:#fff}.easing-option span,.connection-easing-option span{font-size:9px;font-weight:500;color:#7d8590;text-align:center}.easing-option.selected span,.connection-easing-option.selected span{color:#fff}.easing-section{margin-bottom:12px}.easing-section:last-child{margin-bottom:0}.easing-section-title{font-size:11px;font-weight:600;color:#7d8590;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.transition-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.transition-option{display:flex;flex-direction:column;align-items:center;padding:8px 6px;background:#0d1117;border:1px solid #21262d;border-radius:8px;cursor:pointer;transition:all .15s ease}.transition-option:hover{background:#21262d;border-color:#30363d}.transition-option.active{background:#8957e5;border-color:#a371f7}.transition-option i{font-size:16px;color:#7d8590;margin-bottom:4px}.transition-option.active i{color:#fff}.transition-option span{font-size:9px;font-weight:500;color:#7d8590;text-align:center}.transition-option.active span{color:#fff}.transition-duration-control{display:flex;flex-direction:column;gap:6px;padding:8px;background:#0d1117;border-radius:8px}.transition-duration-control label{font-size:10px;color:#7d8590;font-weight:600}.transition-duration-control span{color:#58a6ff;font-weight:700}.transition-duration-control input[type=range]{width:100%;height:4px;background:#21262d;border-radius:2px;outline:none;-webkit-appearance:none}.transition-duration-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#8957e5;border-radius:50%;cursor:pointer}.transition-duration-control input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#8957e5;border-radius:50%;cursor:pointer;border:none}.export-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.export-dialog{background:linear-gradient(180deg,#161b22,#0d1117);border:1px solid #30363d;border-radius:16px;padding:32px;min-width:400px;text-align:center;box-shadow:0 24px 64px #00000080}.export-dialog h3{margin:0 0 20px;color:#f0f6fc;font-size:18px}.export-progress{width:100%;height:8px;background:#21262d;border-radius:4px;overflow:hidden;margin:20px 0}#export-status{margin:12px 0 0;color:#7d8590;font-size:13px}.help-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#010409e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:1;transition:opacity .2s ease}.help-modal.opening{animation:helpFadeIn .3s ease}.help-modal.closing{opacity:0}@keyframes helpFadeIn{0%{opacity:0}to{opacity:1}}.help-modal-content{background:linear-gradient(180deg,#0d1117,#010409);border:1px solid rgba(88,166,255,.2);border-radius:20px;max-width:960px;max-height:85vh;width:100%;box-shadow:0 25px 80px #000000e6,0 0 0 1px #ffffff0d inset,0 0 100px #58a6ff1a;display:flex;flex-direction:column;animation:helpSlideUp .4s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes helpSlideUp{0%{transform:translateY(40px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.help-modal-header{padding:20px 28px;border-bottom:1px solid rgba(48,54,61,.6);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(88,166,255,.08) 0%,transparent 100%)}.help-header-title{display:flex;align-items:center;gap:16px}.help-logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#58a6ff,#1f6feb);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 4px 16px #58a6ff66}.help-title-text h2{margin:0;font-size:22px;font-weight:700;color:#f0f6fc;letter-spacing:-.5px}.help-subtitle{font-size:13px;color:#8b949e;font-weight:400}.help-modal-close{width:36px;height:36px;border-radius:10px;border:1px solid rgba(48,54,61,.8);background:#21262d99;color:#8b949e;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.help-modal-close:hover{background:#f85149;border-color:#f85149;color:#fff;transform:rotate(90deg)}.help-tabs{display:flex;gap:4px;padding:12px 28px;border-bottom:1px solid rgba(48,54,61,.4);background:#0d111780}.help-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:10px;background:transparent;color:#8b949e;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.help-tab i{font-size:14px}.help-tab:hover{background:#30363d80;color:#c9d1d9}.help-tab.active{background:linear-gradient(135deg,#58a6ff33,#1f6feb26);color:#58a6ff;box-shadow:0 0 20px #58a6ff26}.help-modal-body{padding:24px 28px;overflow-y:auto;flex:1}.help-modal-body::-webkit-scrollbar{width:8px}.help-modal-body::-webkit-scrollbar-track{background:transparent}.help-modal-body::-webkit-scrollbar-thumb{background:#30363dcc;border-radius:4px}.help-modal-body::-webkit-scrollbar-thumb:hover{background:#58a6ff}.help-tab-content{display:none;animation:tabFadeIn .3s ease}.help-tab-content.active{display:block}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.shortcut-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.shortcut-card{background:#161b2299;border:1px solid rgba(48,54,61,.6);border-radius:14px;overflow:hidden;transition:all .25s ease}.shortcut-card:hover{border-color:#58a6ff4d;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.card-header{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(48,54,61,.4)}.card-header i{font-size:16px}.card-header h3{margin:0;font-size:14px;font-weight:600;color:#f0f6fc}.card-header.playback{background:linear-gradient(135deg,rgba(46,160,67,.15),transparent)}.card-header.playback i{color:#3fb950}.card-header.keyframes{background:linear-gradient(135deg,rgba(163,113,247,.15),transparent)}.card-header.keyframes i{color:#a371f7}.card-header.timeline{background:linear-gradient(135deg,rgba(88,166,255,.15),transparent)}.card-header.timeline i{color:#58a6ff}.card-header.view{background:linear-gradient(135deg,rgba(255,166,87,.15),transparent)}.card-header.view i{color:#ffa657}.card-header.panels{background:linear-gradient(135deg,rgba(255,123,114,.15),transparent)}.card-header.panels i{color:#ff7b72}.card-header.project{background:linear-gradient(135deg,rgba(121,192,255,.15),transparent)}.card-header.project i{color:#79c0ff}.card-body{padding:12px 16px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(48,54,61,.3)}.shortcut-row:last-child{border-bottom:none}.shortcut-row .keys{display:flex;gap:4px}.shortcut-row kbd{background:linear-gradient(180deg,#21262d,#161b22);color:#c9d1d9;padding:4px 8px;border-radius:5px;border:1px solid #30363d;font-family:SF Mono,Consolas,monospace;font-size:11px;font-weight:600;box-shadow:0 2px 4px #0000004d;min-width:24px;text-align:center}.shortcut-row span{color:#8b949e;font-size:12px}.mouse-controls{background:#161b2266;border:1px solid rgba(48,54,61,.5);border-radius:14px;padding:20px}.mouse-controls h4{margin:0 0 16px;font-size:14px;font-weight:600;color:#f0f6fc;display:flex;align-items:center;gap:10px}.mouse-controls h4 i{color:#58a6ff}.mouse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mouse-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#0d111799;border-radius:10px;border:1px solid rgba(48,54,61,.4);transition:all .2s ease}.mouse-item:hover{border-color:#58a6ff4d;background:#161b22cc}.mouse-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(88,166,255,.15),transparent);display:flex;align-items:center;justify-content:center;color:#58a6ff;font-size:16px}.mouse-action{font-size:12px;font-weight:600;color:#f0f6fc}.mouse-desc{font-size:11px;color:#8b949e}.getting-started-flow{display:flex;flex-direction:column;gap:0;margin-bottom:32px}.flow-step{display:flex;gap:20px;padding:20px;background:#161b2280;border:1px solid rgba(48,54,61,.5);border-radius:14px;transition:all .2s ease}.flow-step:hover{border-color:#58a6ff4d;background:#161b22b3}.step-number{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#58a6ff,#1f6feb);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 12px #58a6ff4d}.step-content{flex:1}.step-icon{display:none}.step-content h4{margin:0 0 8px;font-size:15px;font-weight:600;color:#f0f6fc}.step-content p{margin:0;font-size:13px;color:#8b949e;line-height:1.5}.step-content kbd{background:linear-gradient(180deg,#21262d,#161b22);color:#58a6ff;padding:3px 7px;border-radius:4px;border:1px solid #30363d;font-family:SF Mono,monospace;font-size:11px;font-weight:600}.flow-connector{display:flex;justify-content:center;padding:8px 0;color:#30363d;font-size:14px}.supported-formats{background:#161b2266;border:1px solid rgba(48,54,61,.5);border-radius:14px;padding:20px}.supported-formats h4{margin:0 0 16px;font-size:14px;font-weight:600;color:#f0f6fc;display:flex;align-items:center;gap:10px}.supported-formats h4 i{color:#58a6ff}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.format-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#0d111799;border-radius:10px;border:1px solid rgba(48,54,61,.4)}.format-item i{font-size:20px;color:#58a6ff}.format-item span{font-size:11px;color:#8b949e;text-align:center}.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.tip-card{background:#161b2280;border:1px solid rgba(48,54,61,.5);border-radius:14px;padding:20px;transition:all .2s ease}.tip-card:hover{border-color:#58a6ff4d;transform:translateY(-2px)}.tip-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}.tip-icon.auto{background:linear-gradient(135deg,rgba(163,113,247,.2),transparent);color:#a371f7}.tip-icon.easing{background:linear-gradient(135deg,rgba(88,166,255,.2),transparent);color:#58a6ff}.tip-icon.video{background:linear-gradient(135deg,rgba(46,160,67,.2),transparent);color:#3fb950}.tip-icon.dof{background:linear-gradient(135deg,rgba(255,166,87,.2),transparent);color:#ffa657}.tip-icon.bg{background:linear-gradient(135deg,rgba(255,123,114,.2),transparent);color:#ff7b72}.tip-icon.save{background:linear-gradient(135deg,rgba(121,192,255,.2),transparent);color:#79c0ff}.tip-icon.nav{background:linear-gradient(135deg,rgba(210,168,255,.2),transparent);color:#d2a8ff}.tip-icon.fit{background:linear-gradient(135deg,rgba(63,185,80,.2),transparent);color:#3fb950}.tip-card h4{margin:0 0 10px;font-size:14px;font-weight:600;color:#f0f6fc}.tip-card p{margin:0;font-size:12px;color:#8b949e;line-height:1.5}.tip-card kbd{background:linear-gradient(180deg,#21262d,#161b22);color:#58a6ff;padding:2px 6px;border-radius:4px;border:1px solid #30363d;font-family:SF Mono,monospace;font-size:10px;font-weight:600}.settings-section{margin-bottom:32px}.setting-card{display:flex;align-items:center;gap:16px;padding:20px;background:#161b2280;border:1px solid rgba(48,54,61,.5);border-radius:14px}.setting-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(88,166,255,.15),transparent);display:flex;align-items:center;justify-content:center;font-size:20px;color:#58a6ff;flex-shrink:0}.setting-info{flex:1}.setting-info h4{margin:0 0 4px;font-size:14px;font-weight:600;color:#f0f6fc}.setting-info p{margin:0;font-size:12px;color:#8b949e}.about-section{text-align:center;padding:32px;background:#161b224d;border:1px solid rgba(48,54,61,.4);border-radius:14px}.about-logo{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#58a6ff,#1f6feb);display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 16px;box-shadow:0 8px 24px #58a6ff4d}.about-section h3{margin:0 0 4px;font-size:20px;font-weight:700;color:#f0f6fc}.about-section .version{margin:0 0 16px;font-size:13px;color:#58a6ff;font-weight:500}.about-section .about-desc{font-size:13px;color:#8b949e;line-height:1.6;max-width:400px;margin:0 auto 24px}.about-links{margin-bottom:20px}.about-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:500;transition:all .2s ease}.about-link.patreon{background:linear-gradient(135deg,#ff424d,#f96854);color:#fff}.about-link.patreon:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff424d66}.about-section .legal-links{font-size:12px}.about-section .legal-links a{color:#7d8590;text-decoration:none;transition:color .2s}.about-section .legal-links a:hover{color:#58a6ff}.about-section .legal-links .separator{margin:0 10px;color:#484f58}.help-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-top:1px solid rgba(48,54,61,.4);background:#0d111780}.footer-hint{font-size:12px;color:#8b949e}.footer-hint kbd{background:#21262dcc;color:#58a6ff;padding:3px 6px;border-radius:4px;font-family:SF Mono,monospace;font-size:10px;font-weight:600;border:1px solid #30363d}.footer-credit{font-size:12px;color:#6e7681}.footer-credit i{color:#f85149}@media(max-width:900px){.shortcut-cards,.mouse-grid,.format-grid{grid-template-columns:repeat(2,1fr)}.tips-grid{grid-template-columns:1fr}}@media(max-width:600px){.help-modal-content{max-height:95vh}.shortcut-cards{grid-template-columns:1fr}.help-tabs{flex-wrap:wrap;gap:8px}.help-tab span{display:none}.help-modal-footer{flex-direction:column;gap:8px;text-align:center}}.export-progress-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:#010409d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:exportFadeIn .25s ease-out}@keyframes exportFadeIn{0%{opacity:0}to{opacity:1}}.export-progress-content{background:linear-gradient(145deg,#1a1f28fa,#0d1117fa);border:2px solid rgba(88,166,255,.25);border-radius:24px;padding:48px 56px;width:520px;box-shadow:0 32px 80px #000000e6,0 0 0 1px #ffffff14 inset,0 1px #ffffff1f inset,0 0 140px #58a6ff33;animation:exportSlideUp .4s cubic-bezier(.34,1.56,.64,1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden}.export-progress-content:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 0%,rgba(88,166,255,.08) 0%,transparent 60%);pointer-events:none}@keyframes exportSlideUp{0%{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}.export-progress-top{text-align:center;margin-bottom:32px}.export-progress-icon-container{width:88px;height:88px;background:linear-gradient(145deg,#58a6ff26,#1f6feb14);border:2px solid rgba(88,166,255,.35);border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 50px;position:relative;box-shadow:0 12px 40px #58a6ff59,0 0 0 10px #58a6ff0f,0 0 0 20px #58a6ff08,0 0 0 1px #ffffff14 inset,0 1px #ffffff26 inset;animation:iconPulse 2.5s ease-in-out infinite}@keyframes iconPulse{0%,to{transform:scale(1);box-shadow:0 12px 40px #58a6ff59,0 0 0 10px #58a6ff0f,0 0 0 20px #58a6ff08,0 0 0 1px #ffffff14 inset,0 1px #ffffff26 inset}50%{transform:scale(1.06);box-shadow:0 16px 48px #58a6ff73,0 0 0 14px #58a6ff17,0 0 0 28px #58a6ff0d,0 0 0 1px #ffffff1f inset,0 1px #fff3 inset}}.export-progress-icon-container svg{filter:drop-shadow(0 4px 16px rgba(88,166,255,.5))}.export-progress-top h3{margin:20px 0 10px;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.4)}.export-progress-top p{margin:0;font-size:14px;color:#8b949e;font-weight:500;line-height:1.6;white-space:pre-line}.export-progress-content-large{width:680px;max-width:95vw;padding:24px}.export-preview-container{margin-bottom:20px;border-radius:16px;overflow:hidden;background:#000;border:2px solid rgba(88,166,255,.3);box-shadow:0 0 60px #58a6ff26,0 20px 40px #00000080;animation:exportGlow 2s ease-in-out infinite alternate}@keyframes exportGlow{0%{box-shadow:0 0 40px #58a6ff1a,0 20px 40px #00000080}to{box-shadow:0 0 80px #58a6ff40,0 20px 40px #00000080}}.export-preview-wrapper{position:relative;background:linear-gradient(45deg,#0a0a0a 25%,#111 25%,#111 50%,#0a0a0a 50%,#0a0a0a 75%,#111 75%);background-size:20px 20px}.export-preview-canvas{width:100%;height:auto;min-height:280px;max-height:480px;object-fit:contain;display:block;margin:0 auto;background:transparent}@media(min-height:700px){.export-preview-canvas{max-height:540px}}.export-preview-overlay{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none}.export-preview-badge{display:flex;gap:8px}.export-preview-live{background:#ef4444e6;color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.5px;animation:livePulse 1.5s ease-in-out infinite;box-shadow:0 2px 8px #ef444466}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.7}}.export-preview-music{background:#8b5cf6e6;color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 8px #8b5cf666;display:flex;align-items:center;gap:5px}.export-preview-music i{font-size:10px;animation:musicBounce .8s ease-in-out infinite}@keyframes musicBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.export-preview-info-bar{display:flex;justify-content:center;gap:32px;padding:14px 20px;background:linear-gradient(180deg,#0d1117f2,#161b22f2);border-top:1px solid rgba(88,166,255,.15)}.export-preview-stat{display:flex;align-items:center;gap:8px;font-size:13px;color:#8b949e}.export-preview-stat i{color:#58a6ff;font-size:12px;opacity:.8}.export-preview-stat span{color:#e6edf3;font-weight:600;font-family:SF Mono,Fira Code,monospace;font-size:12px}.export-preview-container~.export-progress-top{display:none}.export-progress-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}.export-progress-text{flex:1}.export-progress-text h3{margin:0 0 4px;font-size:18px;color:#e6edf3}.export-progress-text p{margin:0;font-size:13px;color:#8b949e}.export-progress-bar-container{display:flex;align-items:center;gap:16px}.export-progress-bar-container .export-progress-bar-track{flex:1}.export-progress-bar-container .export-progress-percentage{min-width:48px;text-align:right;font-size:14px;font-weight:700;color:#58a6ff;font-family:SF Mono,Fira Code,monospace}.export-progress-main{display:flex;flex-direction:column;gap:16px}.export-progress-bar-track{width:100%;height:14px;background:linear-gradient(90deg,#0d1117,#161b22,#0d1117);border:1.5px solid rgba(88,166,255,.15);border-radius:10px;overflow:hidden;position:relative;box-shadow:0 4px 20px #00000080 inset,0 1px #ffffff08}.export-progress-bar-fill{height:100%;background:linear-gradient(90deg,#58a6ff,#1f6feb,#58a6ff);background-size:200% 100%;border-radius:8px;transition:none;will-change:width;position:relative;box-shadow:0 0 20px #58a6ffcc,0 0 40px #58a6ff66,0 4px 12px #1f6feb99;animation:progressGradient 2s linear infinite}@keyframes progressGradient{0%{background-position:0% 50%}to{background-position:200% 50%}}.export-progress-bar-fill:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 100%);border-radius:8px 8px 0 0}.export-progress-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:exportShimmer 1.2s ease-in-out infinite}@keyframes exportShimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.export-progress-info{display:flex;justify-content:center;align-items:center;padding:0 4px}.export-progress-percentage{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;font-size:20px;font-weight:700;color:#58a6ff;letter-spacing:.5px;text-shadow:0 2px 12px rgba(88,166,255,.6),0 0 24px rgba(88,166,255,.3);text-align:center}.export-cancel-btn{width:100%;padding:16px 20px;margin-top:24px;background:#ffffff05;border:2px solid rgba(255,255,255,.08);color:#8b949e;font-size:15px;font-weight:600;cursor:pointer;border-radius:14px;transition:all .4s cubic-bezier(.34,1.56,.64,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:1}.export-cancel-btn svg{transition:transform .3s ease}.export-cancel-btn:hover{background:#f851491f;border-color:#f8514959;color:#ff6b6b;transform:scale(1.02);box-shadow:0 4px 16px #f8514933}.export-cancel-btn:hover svg{transform:rotate(90deg)}.export-cancel-btn:active{transform:scale(.98)}.context-menu{position:fixed;z-index:3000;background:linear-gradient(180deg,#1c2128,#161b22);border:1px solid #30363d;border-radius:10px;padding:6px 0;min-width:180px;box-shadow:0 12px 32px #00000080,0 0 0 1px #ffffff0d;animation:contextMenuFadeIn .15s ease}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .1s ease;color:#e6edf3;font-size:13px}.context-menu-item:hover{background:#58a6ff26}.context-menu-item i{width:16px;text-align:center;font-size:12px;color:#8b949e}.context-menu-item:hover i{color:#58a6ff}.context-menu-item span:first-of-type{flex:1}.context-menu-item .shortcut{font-size:11px;color:#484f58;font-family:SF Mono,Monaco,monospace}.context-menu-item.danger{color:#f85149}.context-menu-item.danger:hover{background:#f8514926}.context-menu-item.danger i{color:#f85149}.context-menu-divider{height:1px;background:#30363d;margin:6px 0}.legal-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#010409e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:legalFadeIn .2s ease}@keyframes legalFadeIn{0%{opacity:0}to{opacity:1}}.legal-modal-content{background:linear-gradient(180deg,#0d1117,#010409);border:2px solid #30363d;border-radius:16px;max-width:700px;max-height:85vh;width:100%;box-shadow:0 24px 64px #000c;display:flex;flex-direction:column;animation:legalSlideUp .3s ease}@keyframes legalSlideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.legal-modal-header{padding:20px 28px;border-bottom:1px solid #30363d;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1f6feb26,#388bfd0d);border-radius:14px 14px 0 0}.legal-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#f0f6fc;display:flex;align-items:center;gap:12px}.legal-modal-header h2 i{color:#58a6ff}.legal-modal-close{width:36px;height:36px;border-radius:8px;border:1px solid #30363d;background:#21262d;color:#c9d1d9;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.legal-modal-close:hover{background:#f85149;border-color:#f85149;color:#fff;transform:rotate(90deg)}.legal-modal-body{padding:24px 28px;overflow-y:auto;flex:1}.legal-modal-body::-webkit-scrollbar{width:10px}.legal-modal-body::-webkit-scrollbar-track{background:#0d1117;border-radius:5px}.legal-modal-body::-webkit-scrollbar-thumb{background:#30363d;border-radius:5px}.legal-modal-body::-webkit-scrollbar-thumb:hover{background:#484f58}.legal-modal-body .last-updated{color:#7d8590;font-size:12px;margin-bottom:20px}.legal-modal-body h3{font-size:16px;font-weight:600;color:#f0f6fc;margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid #21262d}.legal-modal-body h3:first-of-type{margin-top:0}.legal-modal-body h4{font-size:14px;font-weight:600;color:#e6edf3;margin:16px 0 8px}.legal-modal-body p{color:#c9d1d9;line-height:1.7;margin-bottom:12px;font-size:14px}.legal-modal-body ul{margin:12px 0;padding-left:24px}.legal-modal-body li{color:#c9d1d9;line-height:1.6;margin-bottom:8px;font-size:14px}.legal-modal-body strong{color:#e6edf3}.legal-modal-body a{color:#58a6ff;text-decoration:none}.legal-modal-body a:hover{text-decoration:underline}.legal-highlight{background:linear-gradient(180deg,#161b22e6,#0d1117b3);border:1px solid #21262d;border-radius:10px;padding:16px 18px;margin:16px 0}.legal-highlight.success{border-left:3px solid #3fb950}.legal-highlight.info{border-left:3px solid #58a6ff}.legal-highlight.warning{border-left:3px solid #d29922}.legal-highlight p{margin:0}.legal-contact{background:linear-gradient(135deg,#1f6feb1a,#58a6ff0d);border:1px solid #1f6feb;border-radius:10px;padding:16px 18px;margin-top:16px}.legal-contact p{margin:0 0 8px}.legal-contact p:last-child{margin-bottom:0}.legal-modal-footer{padding:16px 28px;border-top:1px solid #30363d;text-align:center}.legal-modal-footer p{margin:0;color:#7d8590;font-size:12px}.legal-modal-footer a{color:#58a6ff;text-decoration:none}.legal-modal-footer a:hover{text-decoration:underline}.project-legal-links{margin-top:12px;padding-top:12px;border-top:1px solid rgba(48,54,61,.5);text-align:center;font-size:11px}.project-legal-links a{color:#7d8590;text-decoration:none;transition:color .2s}.project-legal-links a:hover{color:#58a6ff}.project-legal-links .separator{margin:0 8px;color:#484f58}.settings-container{display:flex;flex-direction:column;gap:16px}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#0f172a80;border:1px solid rgba(148,163,184,.1);border-radius:12px;transition:all .2s ease}.setting-item:hover{background:#0f172ab3;border-color:#6366f14d}.setting-label{display:flex;flex-direction:column;gap:4px}.setting-label i{font-size:16px;color:#6366f1;margin-right:8px}.setting-label span{font-size:14px;font-weight:600;color:#f1f5f9}.setting-label small{font-size:12px;color:#94a3b8}.toggle-buttons{display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid rgba(148,163,184,.3)}.toggle-btn{padding:8px 16px;font-size:12px;font-weight:600;border:none;background:#1e293bcc;color:#94a3b8;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.toggle-btn:first-child{border-right:1px solid rgba(148,163,184,.2)}.toggle-btn:hover:not(.active){background:#334155cc;color:#e2e8f0}.toggle-btn.active[data-value=on]{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px #6366f14d}.toggle-btn.active[data-value=off]{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;box-shadow:0 2px 8px #ef44444d}.font-select-container{position:relative;width:100%}.font-search-input{width:100%;max-width:180px;padding:10px 12px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:8px;color:#f1f5f9;font-size:14px;cursor:pointer;transition:all .2s ease}.font-search-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.font-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#0f172af2;border:1px solid rgba(148,163,184,.2);border-radius:8px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 8px 24px #0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.font-option{padding:10px 12px;cursor:pointer;transition:all .2s ease;color:#f1f5f9;font-size:14px;border-bottom:1px solid rgba(148,163,184,.1)}.font-option:last-child{border-bottom:none}.font-option:hover{background:#6366f133;color:#fff}.font-dropdown::-webkit-scrollbar{width:8px}.font-dropdown::-webkit-scrollbar-track{background:#0f172a80;border-radius:4px}.font-dropdown::-webkit-scrollbar-thumb{background:#6366f180;border-radius:4px}.font-dropdown::-webkit-scrollbar-thumb:hover{background:#6366f1b3}.export-complete-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:10001;animation:exportOverlayFadeIn .3s ease-out}@keyframes exportOverlayFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.export-complete-dialog{background:linear-gradient(165deg,#1e2332fa,#0f141efa);border-radius:24px;padding:40px;max-width:1100px;width:90%;max-height:90vh;box-shadow:0 0 0 1px #ffffff14,0 0 0 4px #3fb9501a,0 25px 80px #000c,0 0 120px #3fb95026;animation:exportDialogSlideUp .5s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;position:relative;overflow:hidden}.export-complete-dialog:before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:radial-gradient(ellipse at top center,rgba(63,185,80,.15) 0%,transparent 70%);pointer-events:none}.export-complete-dialog:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(63,185,80,.03) 60deg,transparent 120deg);animation:exportRotateGlow 20s linear infinite;pointer-events:none}@keyframes exportRotateGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes exportDialogSlideUp{0%{transform:translateY(50px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.export-complete-header{text-align:center;margin-bottom:32px;position:relative;z-index:1}.export-complete-icon{width:100px;height:100px;margin:0 auto 28px;background:linear-gradient(135deg,#3fb950,#22c55e,#10b981);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px #3fb95026,0 0 0 16px #3fb95014,0 12px 40px #3fb95080,0 0 80px #3fb9504d;animation:exportIconPulse 2s ease-in-out infinite,exportIconBounce .6s ease-out;position:relative}.export-complete-icon:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 50%);pointer-events:none}@keyframes exportIconPulse{0%,to{box-shadow:0 0 0 8px #3fb95026,0 0 0 16px #3fb95014,0 12px 40px #3fb95080,0 0 80px #3fb9504d}50%{box-shadow:0 0 0 12px #3fb95033,0 0 0 24px #3fb9501a,0 16px 50px #3fb95099,0 0 100px #3fb95066}}@keyframes exportIconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1)}}.export-complete-icon i{font-size:48px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);animation:exportCheckmark .5s ease-out .2s both}@keyframes exportCheckmark{0%{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.export-complete-header h2{margin:0 0 12px;font-size:32px;font-weight:800;background:linear-gradient(135deg,#fff,#3fb950,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;text-shadow:none;animation:exportTitleFade .5s ease-out .3s both}@keyframes exportTitleFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.export-complete-header p{margin:0;font-size:15px;color:#8b949e;animation:exportTitleFade .5s ease-out .4s both}.export-complete-header .completion-time{font-family:SF Mono,Consolas,Monaco,monospace;color:#3fb950;font-weight:600;background:#3fb9501a;padding:4px 10px;border-radius:6px;border:1px solid rgba(63,185,80,.2)}.export-complete-content{display:grid;grid-template-columns:380px 1fr;gap:28px;margin-bottom:28px;min-height:0;position:relative;z-index:1;animation:exportContentFade .5s ease-out .5s both}@keyframes exportContentFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.export-complete-info{display:flex;flex-direction:column;gap:16px}.export-info-grid{background:linear-gradient(145deg,#ffffff08,#0003);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.export-info-grid:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(63,185,80,.3),transparent)}.export-info-item{padding:12px;background:#0003;border-radius:10px;border:1px solid rgba(255,255,255,.04);transition:all .3s ease}.export-info-item:hover{background:#3fb95014;border-color:#3fb95033;transform:translateY(-2px)}.export-info-item span:first-child{color:#6e7681;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.export-info-item span:last-child{color:#f0f6fc;font-size:16px;font-weight:700;font-family:SF Mono,Consolas,Monaco,monospace;display:block;margin-top:4px}.export-filename-box{background:linear-gradient(145deg,#ffffff08,#0003);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.export-filename-box:hover{border-color:#3fb95033}.export-filename-box span:first-child{color:#6e7681;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.export-filename-box span:last-child{color:#3fb950;font-size:13px;font-weight:600;word-break:break-all;font-family:SF Mono,Consolas,Monaco,monospace;display:block;margin-top:6px;padding:10px;background:#3fb95014;border-radius:8px;border:1px solid rgba(63,185,80,.15)}.export-preview-container{background:linear-gradient(145deg,#0a0a0a,#000);border-radius:20px;overflow:hidden;border:2px solid rgba(63,185,80,.2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #ffffff0d,0 20px 60px #00000080,inset 0 0 100px #3fb95008;position:relative}.export-preview-container:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(63,185,80,.05) 0%,transparent 100%);pointer-events:none}.export-preview-container video{width:100%;height:100%;object-fit:contain;display:block}.export-complete-download-btn{width:100%;padding:18px 28px;background:linear-gradient(135deg,#3fb950,#22c55e,#10b981);border:none;border-radius:14px;color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:1;overflow:hidden;box-shadow:0 4px 20px #3fb95066,0 0 0 1px #ffffff1a inset;animation:exportButtonFade .5s ease-out .6s both;letter-spacing:.3px}@keyframes exportButtonFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.export-complete-download-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.export-complete-download-btn:hover:before{left:100%}.export-complete-download-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px #3fb95080,0 0 60px #3fb9504d,0 0 0 1px #fff3 inset}.export-complete-download-btn:active{transform:translateY(-1px) scale(1.01)}.export-complete-download-btn i{font-size:18px;animation:exportDownloadIconBounce 1s ease-in-out infinite}@keyframes exportDownloadIconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.export-complete-close-btn{width:100%;padding:14px 24px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#8b949e;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;z-index:1;animation:exportButtonFade .5s ease-out .7s both}.export-complete-close-btn:hover{background:#ffffff0f;border-color:#ffffff26;color:#f0f6fc;transform:translateY(-1px)}.export-complete-dialog .success-particle{position:absolute;width:8px;height:8px;background:#3fb950;border-radius:50%;pointer-events:none;animation:particleFly 1s ease-out forwards}@keyframes particleFly{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}:root{--sidebar-width: 393px;--sidebar-width-tablet: 320px;--timeline-height: 220px;--timeline-height-tablet: 180px;--timeline-height-mobile: 150px}@media(min-width:1440px){.side-panel{width:420px}.layout.sidebar-hidden .side-panel{margin-right:-420px}}@media(max-width:1600px){:root{--sidebar-width-laptop: 315px}.side-panel{width:var(--sidebar-width-laptop);padding:14px;gap:10px;overflow-x:hidden}.layout.sidebar-hidden .side-panel{margin-right:calc(var(--sidebar-width-laptop) * -1)}.panel-header{padding:20px;margin:-14px -14px 10px;overflow:visible}.panel-header h1 .version{display:none}.control-section{padding:11px;border-radius:10px}.section-header{gap:8px;margin-bottom:10px;padding-bottom:8px}.section-header i:first-child{width:24px;height:24px;font-size:11px;border-radius:7px}.section-header h3{font-size:10px;letter-spacing:.6px}.section-content-inner{gap:8px}.toggle-switch{padding:5px 8px;gap:8px}.toggle-slider{width:32px;height:18px}.toggle-slider:before{width:12px;height:12px}.toggle-switch input:checked~.toggle-slider:before{left:17px}.toggle-label{font-size:10px}.icon-btn{width:28px;height:28px;border-radius:6px;font-size:11px}.uploaded-media-placeholder{padding:11px}.placeholder-icon{width:32px;height:32px}.placeholder-icon i{font-size:14px}.placeholder-text h4{font-size:11px}.placeholder-text p{font-size:9px}.uploaded-media-item{padding:8px;gap:8px}.uploaded-media-thumbnail{width:42px;height:42px}.uploaded-media-title{font-size:10px}.uploaded-media-type{font-size:9px}.uploaded-media-delete{width:24px;height:24px}.bg-type-selector{padding:3px;margin-bottom:8px}.bg-type-btn{padding:6px 3px 5px;border-radius:6px}.bg-type-btn i{font-size:11px}.bg-type-btn span{font-size:7px}.slider-container{gap:6px}.slider-label{font-size:10px}.slider-value{font-size:9px;min-width:32px}.color-input-wrapper{gap:6px}.color-preview{width:28px;height:28px}.export-btn-side{padding:8px 10px;font-size:10px}.export-btn-side i{font-size:12px}.timeline-panel{height:160px}.layout.timeline-hidden .timeline-panel{margin-bottom:-160px}.timeline-header{padding:8px 12px}.timeline-header h3{font-size:11px}.time-display{padding:3px 6px}.time-display #current-time-display{font-size:11px}.time-display #total-time-display{font-size:10px}.duration-control{padding:4px 8px;font-size:10px}.easing-ribbon,.keyframes-container{height:24px}.easing-ribbon-segment{font-size:8px;letter-spacing:.5px}.keyframe{width:14px;height:14px}.keyframe-index{font-size:8px}.timeline-content{padding:24px 12px 8px}.timeline-ruler{height:22px}.time-marker{font-size:9px;top:4px}.time-tick{top:14px;height:6px}.timeline-controls button,.ctrl-btn{width:28px;height:28px;font-size:11px}.ctrl-btn.export-btn-labeled{padding:0 10px;gap:4px}.ctrl-btn.export-btn-labeled span:not(.export-remaining-badge){font-size:9px}.keyframe-count-button{padding:4px 8px;font-size:10px}.snap-interval-select{height:28px;font-size:10px;padding:4px 8px}.zoom-control{gap:6px;padding-left:8px}.zoom-control input[type=range]{width:60px}.zoom-btn{width:22px;height:22px;font-size:10px}.keyframe-connections{top:48px}.connection-band{height:16px}.connection-label{font-size:8px}.timeline-scrubber:before{width:11px;height:11px}.timeline-scrubber:after{font-size:9px;top:-22px;padding:3px 6px}.placeholder-text strong,.placeholder-text span,.dropzone-text strong,.dropzone-text span{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder-text strong,.dropzone-text strong{font-size:10px}.orientation-buttons{gap:4px}.orientation-btn{padding:8px 4px 6px;border-radius:8px;gap:4px}.orientation-btn i{font-size:14px}.orientation-btn span{font-size:7px;letter-spacing:.2px}.ground-material-buttons{gap:4px}.ground-mat-btn{padding:8px 4px 6px;border-radius:8px;gap:4px;font-size:7px}.ground-mat-btn i{font-size:12px}.model-rotation-controls{margin-top:10px;padding-top:10px}.rotation-header{margin-bottom:10px}.rotation-header span{font-size:9px}.reset-rotation-btn{width:26px;height:26px;font-size:11px}.rotation-slider{margin-bottom:8px}.rotation-slider .axis-label{width:20px;height:20px;font-size:9px}.rotation-slider .rotation-value{font-size:10px;min-width:35px}.rotation-slider input[type=range]::-webkit-slider-thumb{width:16px;height:16px}.preset-grid{gap:3px}.preset-item{border-radius:4px;max-width:95%;justify-self:center}.preset-container{padding:8px;border-radius:8px}.preset-section-header{margin-bottom:8px;padding-bottom:6px;gap:6px}.preset-section-header i{font-size:10px;width:20px;height:20px}.preset-section-header span{font-size:9px}.custom-gradient-card{padding:12px;gap:12px;border-radius:10px}.gradient-preview{height:60px;border-radius:8px}.gradient-preview-label{font-size:8px;padding:3px 8px}.color-stop{gap:8px}.color-stop-preview{width:24px;height:24px}.color-stop-label{font-size:9px}.gradient-type-buttons{gap:4px}.gradient-type-btn{padding:6px 8px;font-size:9px;border-radius:6px}.gradient-type-btn i{font-size:10px}.animation-style-buttons,.animation-controls-row{gap:4px}.anim-style-btn{padding:8px 6px;font-size:8px;border-radius:8px}.anim-style-btn i{font-size:12px}.effects-grid{gap:6px}.effect-item{padding:8px;border-radius:8px}.effect-item i{font-size:14px}.effect-item span{font-size:8px}.lighting-preset-grid{gap:4px}.lighting-preset-btn{padding:8px 6px;font-size:8px;border-radius:8px}.lighting-preset-btn i{font-size:12px}.export-buttons-section{gap:6px}.export-btn-side{padding:8px;gap:6px;border-radius:8px}.export-btn-side i{font-size:14px}.export-btn-side span{font-size:12px}.checkbox-label{font-size:10px;padding:4px 0;gap:6px}.checkbox-label input[type=checkbox]{width:14px;height:14px}.ground-material-label{font-size:9px;margin-bottom:8px}.view-controls{margin-bottom:8px}.watermark-dropzone{padding:10px;gap:8px;margin-top:8px}.dropzone-icon{width:36px;height:36px}.dropzone-icon i{font-size:16px}.dropzone-text .dropzone-hint{font-size:8px}.collapse-icon{width:20px;height:20px}.collapse-icon i{font-size:8px!important}.text-popup{max-width:580px;border-radius:12px}.text-popup-header{padding:14px 18px;gap:10px}.text-popup-header-icon{width:32px;height:32px;font-size:14px;border-radius:8px}.text-popup-title{font-size:15px}.text-popup-close{width:30px;height:30px}.text-popup-body{padding:14px;gap:12px}.popup-card{padding:12px;border-radius:10px}.popup-section{padding:10px;border-radius:8px}.popup-controls-grid{gap:8px}.popup-control{gap:4px}.popup-control label{font-size:10px;gap:4px}.popup-control label i{font-size:9px}.popup-control select,.popup-control input[type=number]{padding:6px 8px;font-size:12px;border-radius:5px}.popup-color-preview-small{width:26px;height:26px;border-radius:5px}.popup-color-hex-compact{padding:6px 8px;font-size:11px}.popup-slider-compact{height:3px}.popup-slider-compact::-webkit-slider-thumb{width:12px;height:12px}.popup-rotation-input-compact{width:60px}.popup-effects-compact{gap:8px}.popup-effect-toggle span{font-size:11px;gap:5px}.popup-effect-toggle span i{font-size:10px}.popup-switch-compact{width:30px;height:16px}.popup-switch-slider-compact{border-radius:8px}.popup-switch-slider-compact:before{height:12px;width:12px;left:2px;bottom:2px}.popup-switch-compact input:checked+.popup-switch-slider-compact:before{transform:translate(14px)}.popup-effect-controls{gap:4px;grid-template-columns:32px 1fr 1fr 1fr}.popup-effect-controls input[type=color]{height:26px}.popup-effect-controls input[type=number]{padding:4px 6px;font-size:11px}.popup-card-title{font-size:12px;margin-bottom:10px;gap:6px}.popup-field{margin-bottom:10px}.popup-field label{font-size:11px;margin-bottom:6px}.popup-field input[type=text],.popup-field input[type=number],.popup-field select,.popup-field textarea{padding:8px 10px;font-size:12px;border-radius:6px}#text-content-input{padding:10px;font-size:12px;min-height:60px;max-height:90px}.popup-grid-2,.popup-grid-3,.popup-grid-4{gap:8px}.popup-input-unit{padding:0 10px;border-radius:6px}.popup-input-unit input{padding:8px 0!important}.popup-input-unit span{font-size:11px}.popup-color-picker-container{gap:10px;margin-bottom:10px}.popup-color-preview{width:48px;height:48px;border-radius:10px;border-width:2px}.popup-color-hex-input{padding:12px 14px;font-size:14px;border-radius:8px}.popup-color-presets{grid-template-columns:repeat(12,1fr);gap:5px}.popup-color-preset{border-radius:5px}.popup-align-btn{padding:8px;border-radius:6px}.popup-rotation-control{gap:10px}.popup-rotation-input{width:70px}.popup-slider{height:5px}.popup-slider::-webkit-slider-thumb{width:14px;height:14px}.popup-effects-grid{gap:12px}.popup-effect-row{gap:8px}.popup-switch{width:36px;height:20px}.popup-switch-slider{border-radius:10px}.popup-switch-slider:before{height:14px;width:14px;left:3px;bottom:3px}.popup-switch input:checked+.popup-switch-slider:before{transform:translate(16px)}.popup-effect-label{font-size:12px}.popup-effect-fields input[type=color]{height:30px}.popup-effect-fields input[type=number]{padding:6px 8px;font-size:12px}.text-popup-footer,.popup-footer{padding:14px 18px;gap:10px}.popup-btn{padding:8px 16px;font-size:12px;border-radius:6px}.popup-reset-btn{width:30px;height:30px;border-radius:6px}input[type=color]{height:36px;border-radius:6px}.popup-checkbox-field input[type=checkbox]{width:16px;height:16px}.export-progress-content{padding:36px 42px;width:420px;border-radius:20px}.export-progress-icon-container{width:68px;height:68px;border-radius:18px;margin-bottom:36px}.export-progress-icon-container svg{width:32px;height:32px}.export-progress-top{margin-bottom:24px}.export-progress-top h3{font-size:18px;margin:16px 0 8px}.export-progress-top p{font-size:12px}.export-progress-main{gap:12px}.export-progress-bar-track{height:10px;border-radius:8px}.export-progress-bar-fill{border-radius:6px}.export-progress-percentage{font-size:16px}.export-cancel-btn{padding:12px 16px;margin-top:18px;font-size:13px;border-radius:10px}.export-dialog{padding:24px;min-width:320px;border-radius:12px}.export-dialog h3{font-size:16px;margin-bottom:16px}.export-progress{height:6px;margin:16px 0}#export-status{font-size:11px}.help-modal-content{max-width:680px;border-radius:14px}.help-modal-header{padding:18px 22px}.help-modal-header h2{font-size:20px;gap:10px}.help-modal-close{width:32px;height:32px}.help-modal-body{padding:18px 22px}.help-section{margin-bottom:24px}.help-section h3{font-size:16px;margin-bottom:12px;gap:8px}.help-section h3 i{font-size:14px}.help-section p{font-size:13px}.shortcut-list{gap:10px}.shortcut-item{padding:10px 14px}.shortcut-item kbd{padding:5px 10px;font-size:12px}.shortcut-item span{font-size:13px}.help-tips li{padding:8px 0 8px 20px;font-size:13px}.help-footer{margin-top:24px;padding-top:16px}.help-footer p{font-size:12px}.help-footer kbd{padding:3px 6px;font-size:11px}.legal-modal-content{max-width:600px;max-height:80vh;border-radius:14px}.legal-modal-header{padding:16px 22px}.legal-modal-header h2{font-size:18px;gap:10px}.legal-modal-close{width:32px;height:32px}.legal-modal-body{padding:18px 22px}.legal-modal-body .last-updated{font-size:11px;margin-bottom:16px}.legal-modal-body h3{font-size:14px;margin:20px 0 10px}.legal-modal-body h4{font-size:13px;margin:14px 0 6px}.legal-modal-body p{font-size:12px;margin-bottom:10px}.legal-modal-body ul{margin:10px 0;padding-left:20px}.legal-modal-body li{font-size:12px;margin-bottom:6px}.legal-highlight{padding:12px 14px;margin:12px 0;border-radius:8px}.legal-contact{padding:12px 14px;border-radius:8px}.legal-modal-footer{padding:12px 22px}.legal-modal-footer p{font-size:11px}.easing-popup{padding:10px;border-radius:10px;min-width:180px}.easing-popup-header{font-size:11px;margin-bottom:8px;padding-bottom:6px}.easing-options{gap:5px}.easing-option,.connection-easing-option{padding:8px 6px;border-radius:6px}.easing-option svg,.connection-easing-option svg{width:32px;height:32px}.easing-option span,.connection-easing-option span{font-size:8px}.easing-section{margin-bottom:10px}.easing-section-title{font-size:10px;margin-bottom:6px}.transition-options{gap:5px;margin-bottom:8px}.transition-option{padding:6px 5px;border-radius:6px}.transition-option i{font-size:14px}.transition-option span{font-size:8px}.transition-duration-control{gap:5px;padding:6px}.transition-duration-control label{font-size:9px}.toast{padding:10px 14px;min-width:240px;max-width:340px;border-radius:8px}.toast-icon{font-size:16px}.toast-message{font-size:12px}.toast-close{width:20px;height:20px;font-size:16px}.context-menu{padding:5px 0;min-width:160px;border-radius:8px}.context-menu-item{padding:6px 12px;gap:8px;font-size:12px}.context-menu-item i{font-size:11px}.context-menu-item .shortcut{font-size:10px}.context-menu-divider{margin:4px 0}.export-complete-dialog{padding:28px;max-width:900px;border-radius:20px}.export-complete-dialog:before{height:150px}.export-complete-header{margin-bottom:24px}.export-complete-icon{width:80px;height:80px;margin-bottom:20px;box-shadow:0 0 0 6px #3fb95026,0 0 0 12px #3fb95014,0 10px 30px #3fb95066,0 0 60px #3fb95040}.export-complete-icon i{font-size:38px}.export-complete-header h2{font-size:26px;margin-bottom:10px}.export-complete-header p{font-size:13px}.export-complete-header .completion-time{padding:3px 8px;font-size:12px}.export-complete-content{grid-template-columns:300px 1fr;gap:20px;margin-bottom:20px}.export-complete-info{gap:12px}.export-info-grid{padding:16px;gap:12px;border-radius:14px}.export-info-item{padding:10px;border-radius:8px}.export-info-item span:first-child{font-size:10px}.export-info-item span:last-child{font-size:14px}.export-filename-box{padding:16px;border-radius:14px}.export-filename-box span:first-child{font-size:10px}.export-filename-box span:last-child{font-size:11px;padding:8px}.export-preview-container{border-radius:16px}.export-complete-download-btn{padding:14px 24px;font-size:15px;margin-bottom:10px;gap:8px;border-radius:12px}.export-complete-download-btn i{font-size:16px}.export-complete-close-btn{padding:12px 20px;font-size:13px;border-radius:10px}}@media(max-width:1279px){.side-panel{width:var(--sidebar-width-tablet)}.layout.sidebar-hidden .side-panel{margin-right:calc(var(--sidebar-width-tablet) * -1)}.control-section{padding:12px}.section-header{margin-bottom:10px;padding-bottom:10px}.timeline-panel{height:var(--timeline-height-tablet)}.layout.timeline-hidden .timeline-panel{margin-bottom:calc(var(--timeline-height-tablet) * -1)}.timeline-header{padding:10px 16px}.zoom-control{display:none}}@media(max-width:1023px){.side-panel{position:fixed;right:0;top:0;height:100vh;width:var(--sidebar-width-tablet);z-index:1000;transform:translate(0);transition:transform .3s ease}.layout.sidebar-hidden .side-panel{transform:translate(100%);margin-right:0}.sidebar-toggle{position:fixed;right:var(--sidebar-width-tablet);z-index:1001;transition:right .3s ease}.layout.sidebar-hidden .sidebar-toggle{right:0}.layout:not(.sidebar-hidden):before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;pointer-events:auto}.layout.sidebar-hidden:before{display:none}.canvas-button-groups-container{top:12px;right:12px;gap:12px}.canvas-time-display{top:12px;left:12px;padding:8px 12px;font-size:16px}.animation-status-indicator{top:70px;left:12px;padding:6px 12px;font-size:12px}.help-button,.delete-canvas-bg-button,.delete-mockup-media-button{width:40px;height:40px;font-size:16px}.timeline-header-left{gap:10px}.time-display{padding:3px 8px}.time-display #current-time-display{font-size:12px}.duration-control{padding:5px 10px;font-size:11px}.panel-header{padding:16px;margin:-20px -20px 0}.panel-header h1{font-size:16px}.panel-header h1 i{width:32px;height:32px;font-size:14px}.panel-header .subtitle{margin-left:44px;font-size:10px}}@media(max-width:767px){#app{height:100dvh}.side-panel{width:100%;max-width:100vw}.layout.sidebar-hidden .side-panel{transform:translate(100%)}.sidebar-toggle{right:0;width:28px;height:50px}.layout:not(.sidebar-hidden) .sidebar-toggle{right:calc(100% - 28px)}.timeline-panel{height:var(--timeline-height-mobile)}.layout.timeline-hidden .timeline-panel{margin-bottom:calc(var(--timeline-height-mobile) * -1)}.timeline-header{padding:8px 12px;flex-wrap:wrap;gap:8px}.timeline-header-left{gap:8px;flex:1;min-width:0}.timeline-header h3{font-size:11px}.fps-display,.canvas-fps-display{display:none}.duration-control{padding:4px 8px;font-size:10px;gap:4px}.duration-control i{font-size:12px}.canvas-time-display{top:8px;left:8px;padding:6px 10px;font-size:14px;border-radius:8px}.canvas-time-display .time-current,.canvas-time-display .time-total{min-width:40px}.canvas-time-display .time-unit{font-size:12px}.animation-status-indicator{top:55px;left:8px;padding:5px 10px;font-size:11px;gap:6px}.canvas-button-groups-container{top:8px;right:8px;gap:10px}.help-button,.delete-canvas-bg-button,.delete-mockup-media-button{width:36px;height:36px;font-size:14px}.canvas-button-label{font-size:9px;padding:2px 6px}.control-section{padding:10px;border-radius:10px}.section-header{gap:10px;margin-bottom:10px;padding-bottom:10px}.section-icon{width:28px;height:28px;font-size:12px}.section-title{font-size:12px}.toggle-switch{padding:6px 10px;gap:10px}.toggle-slider{width:36px;height:20px}.toggle-slider:before{width:14px;height:14px}.toggle-switch input:checked~.toggle-slider:before{left:19px}.toggle-label{font-size:12px}.icon-btn{width:32px;height:32px;border-radius:6px}.text-popup{width:95%;max-width:none;margin:10px;max-height:calc(100dvh - 20px)}.text-popup-header{padding:16px}.text-popup-header-icon{width:36px;height:36px;font-size:16px}.text-popup-title{font-size:16px}.text-popup-body{padding:16px;gap:12px}.popup-controls-grid{grid-template-columns:repeat(2,1fr);gap:8px}.bg-type-selector{padding:4px;border-radius:10px;margin-bottom:10px}.bg-type-btn{padding:8px 4px 6px;border-radius:8px}.bg-type-btn i{font-size:12px}.bg-type-btn span{font-size:7px}.panel-header{padding:14px}.panel-header h1{font-size:15px;gap:10px}.panel-header h1 i{width:30px;height:30px;font-size:13px}.panel-header .subtitle{margin-left:40px;font-size:9px}.panel-header h1 .version{font-size:9px;padding:2px 6px}.export-buttons-section{gap:8px}.export-btn-side{padding:10px 14px}}@media(max-width:639px){.timeline-panel{height:130px}.layout.timeline-hidden .timeline-panel{margin-bottom:-130px}.timeline-header{padding:6px 10px}.timeline-header h3{font-size:10px}.time-display{padding:2px 6px}.time-display #current-time-display{font-size:11px;min-width:32px}.time-display #total-time-display{font-size:10px;min-width:32px}.canvas-time-display{top:6px;left:6px;padding:5px 8px;font-size:12px;border-radius:6px}.canvas-time-display .time-current,.canvas-time-display .time-total{min-width:32px}.animation-status-indicator{top:45px;left:6px;padding:4px 8px;font-size:10px}.canvas-button-groups-container{top:6px;right:6px;gap:8px}.help-button,.delete-canvas-bg-button,.delete-mockup-media-button{width:32px;height:32px;font-size:13px}.canvas-button-label{display:none}.side-panel{padding:14px;gap:10px}.control-section{padding:8px;gap:8px}.popup-controls-grid{grid-template-columns:1fr}.export-btn-side{padding:10px 12px}[data-tooltip]:after,[data-tooltip]:before{display:none}}@media(hover:none)and (pointer:coarse){.icon-btn{min-width:44px;min-height:44px}.toggle-switch,.bg-type-btn{min-height:44px}.duration-control{min-height:40px}.help-button:hover,.delete-canvas-bg-button:hover,.delete-mockup-media-button:hover{transform:none}.help-button:active,.delete-canvas-bg-button:active,.delete-mockup-media-button:active{transform:scale(.95)}[data-tooltip]:after,[data-tooltip]:before{display:none}.side-panel{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.timeline-container{-webkit-overflow-scrolling:touch}}@media(max-height:500px)and (orientation:landscape){.timeline-panel{height:100px}.layout.timeline-hidden .timeline-panel{margin-bottom:-100px}.canvas-time-display{top:4px;left:4px;padding:4px 6px;font-size:11px}.animation-status-indicator{top:35px;font-size:9px}.side-panel{width:280px}.control-section{padding:6px}.section-header{margin-bottom:6px;padding-bottom:6px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.control-section,.side-panel,.timeline-panel{border-width:.5px}}@media(prefers-reduced-motion:reduce){.side-panel,.timeline-panel,.sidebar-toggle,.help-button,.delete-canvas-bg-button,.delete-mockup-media-button,.toggle-slider,.toggle-slider:before,.icon-btn,.bg-type-btn,.control-section,.animation-status-indicator{transition:none}.layout.sidebar-hidden .side-panel,.layout.timeline-hidden .timeline-panel{transition:none}}@media print{.side-panel,.timeline-panel,.sidebar-toggle,.timeline-toggle,.canvas-button-groups-container,.canvas-time-display,.animation-status-indicator,.canvas-fps-display{display:none!important}.three-container{width:100%!important;height:auto!important}}