:root{--bg-dark:#000;--bg-sidebar:#090a0f;--bg-drawer:#10131b;--bg-panel:#0d0f14;--bg-card:#141821d9;--bg-input:#161b26;--border-color:#ffffff1f;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f166;--accent-pink:#ec4899;--accent-cyan:#06b6d4;--accent-green:#10b981;--text-main:#fff;--text-muted:#a1a1aa;--text-dim:#71717a;--font-sans:"Be Vietnam Pro", "Inter", -apple-system, sans-serif;--font-heading:"Outfit", sans-serif;--radius-sm:6px;--radius-md:8px;--radius-lg:14px}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-dark);width:100vw;height:100vh;color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow:hidden}#root{background:#000;flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.app-header{border-bottom:1px solid var(--border-color);z-index:50;background:#090a0f;justify-content:space-between;align-items:center;height:48px;min-height:48px;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:800}.gradient-text{background:linear-gradient(135deg,#a5b4fc 0%,#6366f1 50%,#ec4899 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.badge-privacy{color:#34d399;background:#10b98126;border:1px solid #10b9814d;border-radius:20px;padding:4px 10px;font-size:.72rem;font-weight:600}.btn{border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;outline:none;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{color:#fff;box-shadow:0 4px 12px var(--primary-glow);background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%)}.btn-primary:hover{background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%)}.btn-secondary{color:var(--text-main);border:1px solid var(--border-color);background:#ffffff14}.btn-secondary:hover{background:#ffffff26}.btn-danger{color:#f87171;background:#ef444426;border:1px solid #ef44444d}.btn-icon{flex-shrink:0;width:32px;height:32px;padding:0}.main-workspace{background:#000;flex:1;width:100vw;height:calc(100vh - 288px);display:flex;position:relative;overflow:hidden}.vertical-icon-toolbar{background:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:35;flex-direction:column;align-items:center;gap:8px;width:56px;min-width:56px;height:100%;padding:12px 0;display:flex}.tool-icon-btn{border-radius:var(--radius-md);width:42px;height:44px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:.62rem;font-weight:600;transition:all .15s;display:flex}.tool-icon-btn:hover{color:var(--text-main);background:#ffffff14}.tool-icon-btn.active{color:#818cf8;border:1px solid var(--primary);background:#6366f133}.tool-drawer-panel{background:var(--bg-drawer);border-right:1px solid var(--border-color);z-index:30;flex-direction:column;width:320px;min-width:320px;max-width:320px;height:100%;animation:.18s cubic-bezier(.16,1,.3,1) slideIn;display:flex;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.drawer-header{border-bottom:1px solid var(--border-color);font-size:.85rem;font-weight:700;font-family:var(--font-heading);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.drawer-content{flex-direction:column;flex:1;gap:10px;padding:12px 14px;display:flex;overflow-y:auto}.form-group{flex-direction:column;gap:4px;min-width:0;display:flex}.form-label{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;justify-content:space-between;align-items:center;font-size:.74rem;font-weight:600;display:flex;overflow:hidden}.form-input,.form-select,.form-textarea{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;min-width:0;color:var(--text-main);box-sizing:border-box;text-overflow:ellipsis;outline:none;padding:6px 8px;font-family:inherit;font-size:.8rem}.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-position:right 6px center;background-repeat:no-repeat;background-size:14px;padding-right:24px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary)}.range-slider-container{box-sizing:border-box;align-items:center;width:100%;height:32px;display:flex}.range-slider{appearance:none;cursor:pointer;vertical-align:middle;background:#ffffff29;border-radius:3px;outline:none;width:100%;min-width:0;height:6px;margin:0}.range-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;transition:transform .15s,background .15s;box-shadow:0 0 8px #6366f166}.range-slider::-webkit-slider-thumb:hover{background:#818cf8;transform:scale(1.2)}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.preset-card{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;background:#ffffff08;flex-direction:column;justify-content:center;align-items:center;min-width:0;padding:6px 4px;display:flex}.preset-card.active{border-color:var(--primary);color:var(--primary);background:#6366f12e}.preset-name{white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;font-weight:600;overflow:hidden}.preset-ratio{color:var(--text-dim);font-size:.58rem}.center-dropzone-stage{background:#000;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;padding:32px;display:flex}.center-drop-box{text-align:center;cursor:pointer;background:#6366f108;border:2px dashed #6366f166;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;max-width:500px;padding:40px 28px;transition:all .2s;display:flex}.center-drop-box:hover,.center-drop-box.drag-over{border-color:var(--primary);background:#6366f114}.center-drop-icon{width:56px;height:56px;color:var(--primary);background:#6366f126;border-radius:50%;justify-content:center;align-items:center;display:flex}.stage-section{background:#000;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:16px;display:flex;position:relative;overflow:hidden}.canvas-viewport-wrapper{flex:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.canvas-container{-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;max-width:100%;max-height:100%;display:flex;position:relative;overflow:visible;box-shadow:0 20px 50px #000000e6}.main-preview-canvas{object-fit:contain;background:#000;border-radius:4px;max-width:100%;max-height:calc(100vh - 250px);display:block}.player-controls-floating{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);z-index:20;background:#12141cd9;border-radius:30px;align-items:center;gap:14px;min-width:320px;max-width:90vw;margin-top:10px;padding:8px 18px;display:flex}.player-slider-container{flex:1;align-items:center;gap:10px;min-width:140px;display:flex}.player-time-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:3px;outline:none;flex:1;height:5px}.player-time-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 0 6px #0009}.player-time-slider::-webkit-slider-thumb:hover{background:#38bdf8;transform:scale(1.25)}.control-play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.time-display-capcut{color:#e4e4e7;letter-spacing:1px;font-family:monospace;font-size:.85rem;font-weight:700}.timeline-fullwidth{border-top:1px solid var(--border-color);background:#090b10;flex-direction:column;width:100vw;height:240px;min-height:240px;display:flex;position:relative;overflow:hidden}.timeline-top-ruler{-webkit-user-select:none;user-select:none;background:#06070a;border-bottom:1px solid #ffffff14;align-items:center;height:26px;display:flex;position:relative}.timeline-ruler-inner{height:100%;position:absolute;left:16px;right:16px}.ruler-tick-mark{height:100%;color:var(--text-dim);pointer-events:none;flex-direction:column;align-items:center;font-family:monospace;font-size:.65rem;display:flex;position:absolute;top:0;transform:translate(-50%)}.ruler-tick-line{background:#ffffff59;width:1px;height:6px;margin-bottom:1px}.timeline-tracks-area{cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;padding:8px 0;position:relative;overflow:auto hidden}.timeline-track-inner-zone{height:100%;margin:0 16px;position:relative}.filmstrip-track{background:#11141d;border:1px solid #fff3;border-radius:6px;width:100%;height:48px;display:flex;position:relative;overflow:visible}.filmstrip-thumb{object-fit:cover;border-right:1px solid #0006;flex:1;height:100%}.capcut-playhead{z-index:30;pointer-events:none;background:#fff;width:2px;height:100%;position:absolute;top:0;transform:translate(-50%);box-shadow:0 0 8px #fffc}.capcut-playhead-cap{clip-path:polygon(0 0,100% 0,50% 100%);background:#fff;width:12px;height:10px;position:absolute;top:0;left:-5px}.text-layers-track-row{width:100%;height:24px;margin-top:6px;display:flex;position:relative}.timeline-track-item{color:#fff;-webkit-user-select:none;user-select:none;cursor:grab;background:#6366f173;border:1px solid #6366f1;border-radius:4px;align-items:center;height:24px;font-size:.72rem;transition:background .15s,border-color .15s;display:flex;position:absolute;top:0;overflow:visible}.timeline-track-item:active{cursor:grabbing}.timeline-track-item.selected{background:#ec48998c;border-color:#ec4899;box-shadow:0 0 8px #ec489966}.timeline-track-handle{cursor:col-resize;z-index:10;background:#ffffff80;width:6px;height:100%;transition:background .15s;position:absolute;top:0}.timeline-track-handle:hover{background:#fff}.timeline-track-handle.left{border-top-left-radius:3px;border-bottom-left-radius:3px;left:0}.timeline-track-handle.right{border-top-right-radius:3px;border-bottom-right-radius:3px;right:0}.export-modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.export-modal{text-align:center;flex-direction:column;gap:16px;width:100%;max-width:440px;padding:24px;display:flex}.progress-bar-bg{background:#ffffff1a;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#6366f1,#ec4899);height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin,.spin-loader{animation:.8s linear infinite spin!important}.glass-panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-lg);background:#10131beb;box-shadow:0 16px 40px #0009}.drawer-backdrop-mobile,.mobile-sheet-handle{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpMobile{0%{transform:translateY(100%)}to{transform:translateY(0)}}html,body,#root{height:100dvh}.main-workspace{height:calc(100dvh - 288px)}@media (width<=768px){.app-header{height:46px;min-height:46px;padding:0 10px}.brand{gap:6px}.brand-title{font-size:.95rem}.brand-tagline{display:none}.header-actions{align-items:center;gap:6px;display:flex}.badge-privacy{padding:3px 6px;font-size:.68rem}.badge-privacy .badge-text{display:none}.btn-header-sample .btn-text,.btn-header-export .btn-text{display:inline}.main-workspace{flex-direction:column-reverse;height:calc(100dvh - 156px)}.vertical-icon-toolbar{border-right:none;border-top:1px solid var(--border-color);z-index:35;background:#090a0f;flex-direction:row;justify-content:space-around;align-items:center;width:100vw;min-width:100vw;height:46px;min-height:46px;padding:0 4px}.tool-icon-btn{flex-direction:row;flex:1;gap:4px;height:38px;padding:0 4px;font-size:.7rem}.tool-icon-btn svg{width:16px;height:16px}.drawer-backdrop-mobile{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;background:#000000a6;animation:.2s fadeIn;display:block;position:fixed;inset:0}.tool-drawer-panel{z-index:45;border-right:none;border-top:1px solid var(--border-color);border-radius:16px 16px 0 0;width:100vw;min-width:100vw;max-width:100vw;height:55vh;max-height:480px;animation:.22s cubic-bezier(.16,1,.3,1) slideUpMobile;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 35px #000000d9}.mobile-sheet-handle{cursor:pointer;background:#ffffff4d;border-radius:2px;flex-shrink:0;width:38px;height:4px;margin:8px auto 2px;display:block}.stage-section{flex:1;padding:8px}.main-preview-canvas{max-height:calc(100dvh - 272px)}.center-dropzone-stage{padding:16px}.center-drop-box{border-radius:14px;gap:10px;padding:24px 16px}.center-drop-box h3{font-size:1rem!important}.center-drop-box form{flex-direction:column!important}.player-controls-floating{border-radius:24px;gap:8px;margin-top:6px;padding:6px 12px}.player-controls-floating .btn-icon{width:28px;height:28px}.control-play-btn{width:32px;height:32px}.time-display-capcut{letter-spacing:.5px;font-size:.72rem}.timeline-fullwidth{height:110px;min-height:110px}.timeline-top-ruler{height:22px}.ruler-tick-mark{font-size:.58rem}.filmstrip-track{height:36px}.text-layers-track-row{height:22px;margin-top:4px}.timeline-track-item{height:22px;font-size:.65rem}.timeline-track-handle{width:8px}.export-modal{border-radius:14px;width:92vw;max-width:380px;padding:16px}}@media (width<=480px){.btn-header-sample .btn-text{display:none}.brand-title{font-size:.88rem}.player-controls-floating{gap:4px;padding:4px 8px}.player-controls-floating .time-display-capcut{font-size:.65rem}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}}