@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");:root{--bg-primary:#f5f7fa;--bg-secondary:#fff;--bg-tertiary:#f0f4f8;--bg-hover:#e8eef5;--text-primary:#2d3748;--text-secondary:#4a5568;--text-muted:#718096;--accent-primary:#a78bfa;--accent-secondary:#8b5cf6;--accent-hover:#c4b5fd;--border-color:#e2e8f0;--border-light:#cbd5e0;--success:#6ee7b7;--warning:#fbbf24;--danger:#fca5a5;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.08);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:5px}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:5px;-webkit-transition:background .2s ease;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:var(--accent-secondary)}::selection{background-color:var(--accent-hover);color:var(--text-primary)}::-moz-selection{background-color:var(--accent-hover);color:var(--text-primary)}.editor-container{display:flex;height:100vh;flex-direction:column}.top-bar{justify-content:space-between;padding:12px 24px;background-color:hsla(0,0%,100%,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-primary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-md)}.top-bar,.top-bar-left{display:flex;align-items:center}.top-bar-left{gap:20px}.logo{font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.top-bar-center,.top-bar-right{display:flex;gap:10px}.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;font-family:Poppins,sans-serif;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none}.btn-primary:hover{background:linear-gradient(135deg,var(--accent-hover),var(--accent-primary));transform:translateY(-1px);box-shadow:0 8px 16px -4px rgba(139,92,246,.3)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-hover);border-color:var(--border-light);transform:translateY(-1px)}.btn-success{background-color:var(--success);color:#fff}.btn-success:hover{background-color:#34d399;transform:translateY(-1px);box-shadow:0 8px 16px -4px rgba(110,231,183,.4)}.main-content{display:flex;flex:1 1;overflow:hidden;padding-bottom:0;gap:16px}.left-panel.mobile-hidden{display:none!important}.left-panel{width:320px;padding:20px;box-sizing:border-box;border-right:1px solid var(--border-color);background-color:hsla(0,0%,100%,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;overflow:hidden;max-height:100%}.left-panel-content{flex:1 1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.left-panel-scroll{flex:1 1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:380px}.left-panel h3{margin-bottom:15px;font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.upload-section{margin-bottom:30px}.file-input{width:100%;padding:8px 12px;margin-bottom:10px;background:#fff;color:var(--text-primary);border:2px solid var(--border-color);border-radius:8px;font-family:Poppins,sans-serif;font-weight:400;font-size:14px;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.file-input:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md)}.file-input::-webkit-file-upload-button{padding:8px 16px;margin-right:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;border-radius:6px;font-family:Poppins,sans-serif;font-weight:500;font-size:13px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.file-input::file-selector-button{padding:8px 16px;margin-right:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;border-radius:6px;font-family:Poppins,sans-serif;font-weight:500;font-size:13px;cursor:pointer;transition:all .2s ease}.file-input::-webkit-file-upload-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(124,58,237,.3)}.file-input::file-selector-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(124,58,237,.3)}.template-item{padding:12px;margin-bottom:10px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;color:var(--text-primary)}.template-item:hover{background-color:var(--bg-hover);border-color:var(--accent-secondary);transform:translateY(-2px);box-shadow:0 8px 16px -4px rgba(139,92,246,.2)}.canvas-container{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bg-tertiary);padding:8px;background-image:radial-gradient(circle at 1px 1px,var(--border-color) 1px,transparent 0);background-size:40px 40px}.canvas-wrapper{padding:10px;background:hsla(0,0%,100%,.85);box-shadow:var(--shadow-xl);border-radius:14px;border:1px solid var(--border-color);display:inline-block}.canvas-viewport{position:relative;overflow:hidden;border-radius:10px;outline:2px solid rgba(52,152,219,.35);outline-offset:0;background:#fff}.canvas-viewport,.canvas-viewport .konvajs-content{touch-action:none}@media screen and (max-width:768px){.canvas-wrapper{margin:0 auto;display:block!important;width:-moz-fit-content;width:fit-content;max-width:calc(100vw - 40px)}.canvas-wrapper canvas{max-width:100%;height:auto!important}.canvas-wrapper>div[style*="position: relative"]{max-width:100%!important}}.right-panel{width:300px;padding:12px 12px 280px;box-sizing:border-box;border-left:1px solid var(--border-color);background-color:hsla(0,0%,100%,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto}.right-panel h3{margin-bottom:12px;font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.property-group{margin-bottom:14px}.property-label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-secondary);font-weight:500;letter-spacing:.02em;text-transform:uppercase}.property-input{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;background-color:var(--bg-tertiary);color:var(--text-primary);font-family:Poppins,sans-serif;transition:all .2s ease}.property-input[type=range]{padding:0;height:6px;background:var(--bg-tertiary);outline:none;border:none;border-radius:3px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.property-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));cursor:pointer;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(139,92,246,.3);-webkit-transition:all .2s ease;transition:all .2s ease}.property-input[type=range]::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));cursor:pointer;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(139,92,246,.3);-moz-transition:all .2s ease;transition:all .2s ease}.property-input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px}.property-input[type=range]::-moz-range-track{width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px}.property-input[type=range]:hover::-webkit-slider-thumb{background:linear-gradient(135deg,var(--accent-hover),var(--accent-primary));transform:scale(1.1)}.property-input[type=range]:hover::-moz-range-thumb{background:linear-gradient(135deg,var(--accent-hover),var(--accent-primary));transform:scale(1.1)}.property-input:focus{outline:none;border-color:var(--accent-secondary);box-shadow:0 0 0 3px rgba(139,92,246,.15)}.property-input[type=range]:focus{border:none}.bottom-panel{justify-content:space-between;padding:12px 24px;background-color:hsla(0,0%,100%,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border-color);box-shadow:0 -4px 6px -1px rgba(0,0,0,.05)}.bottom-panel,.zoom-controls{display:flex;align-items:center}.zoom-controls{gap:10px}.layer-controls{display:flex;gap:10px}.timeline{padding:15px;background-color:hsla(0,0%,100%,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border-color);height:auto;max-height:380px;overflow-x:hidden;overflow-y:hidden;position:fixed;bottom:0;left:0;right:0;z-index:100;box-shadow:0 -4px 12px rgba(0,0,0,.1)}.timeline h4{margin-bottom:10px;font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.timeline-track{display:flex;gap:10px;height:60px;align-items:center}.timeline-clip{height:50px;min-width:100px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:8px;padding:8px 12px;color:#fff;font-size:12px;font-weight:500;cursor:move;box-shadow:var(--shadow-sm)}.empty-state{text-align:center;color:var(--text-muted);font-size:14px;font-weight:400}.btn-link{background:none;border:none;padding:6px 12px;cursor:pointer;transition:all .2s ease;border-radius:6px;color:var(--text-secondary);font-family:Poppins,sans-serif;font-weight:500}.btn-link:hover{background-color:var(--bg-hover);color:var(--accent-primary)}.my-assets-panel{padding:15px}.assets-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.assets-header h3{color:var(--text-primary);font-size:16px;font-weight:600;margin:0}.btn-icon{background:var(--accent-primary);border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease}.btn-icon:hover{background:var(--accent-secondary);transform:scale(1.05)}.my-assets-panel.loading{display:flex;justify-content:center;align-items:center;padding:40px;color:var(--text-muted)}.assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));grid-gap:12px;gap:12px;max-height:calc(100vh - 250px);overflow-y:auto;padding-right:5px}.asset-item{position:relative;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;overflow:hidden}.asset-item:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.asset-item img{width:100%;height:80px;object-fit:cover;border-radius:4px;margin-bottom:6px}.asset-name{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.breadcrumb{display:flex;align-items:center;padding:8px 10px;background:var(--bg-tertiary);border-radius:6px;margin-bottom:12px;font-size:12px;overflow-x:auto;white-space:nowrap}.breadcrumb-item{color:var(--accent-secondary);cursor:pointer;transition:color .2s ease}.breadcrumb-item:hover{color:var(--accent-primary);text-decoration:underline}.breadcrumb-separator{margin:0 6px;color:var(--text-muted)}.new-folder-input{display:flex;gap:6px;margin-bottom:12px}.new-folder-input input{flex:1 1;padding:8px 10px;border:2px solid var(--border-color);border-radius:6px;font-size:13px;outline:none;transition:border-color .2s ease}.new-folder-input input:focus{border-color:var(--accent-primary)}.new-folder-input button{padding:8px 12px;border:none;border-radius:6px;cursor:pointer;background:var(--accent-primary);color:#fff;font-size:14px;transition:all .2s ease}.new-folder-input button:hover{background:var(--accent-secondary)}.new-folder-input button:last-child{background:var(--danger)}.folder-item{position:relative;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;text-align:center}.folder-item:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.folder-icon{font-size:40px;margin-bottom:6px}.folder-name{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.delete-btn{position:absolute;top:4px;right:4px;background:hsla(0,0%,100%,.9);border:none;border-radius:4px;padding:4px 6px;cursor:pointer;font-size:12px;opacity:0;transition:opacity .2s ease}.asset-item:hover .delete-btn,.folder-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:var(--danger)}.asset-item{cursor:-webkit-grab;cursor:grab}.asset-item.dragging{opacity:.4;cursor:-webkit-grabbing;cursor:grabbing}.folder-item.drop-target{border-color:var(--accent-primary);background:var(--accent-hover);animation:pulse .6s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.drop-hint{font-size:11px;color:var(--accent-secondary);margin-left:8px;font-weight:500}.breadcrumb{transition:background .2s ease}.breadcrumb:hover{background:var(--bg-hover)}.trim-controls{padding:15px;background:var(--bg-tertiary);border-radius:8px}.trim-controls h4{margin-bottom:15px;color:var(--text-primary);font-size:16px}.trim-inputs{gap:12px}.trim-input-group,.trim-inputs{display:flex;flex-direction:column}.trim-input-group{gap:6px}.trim-input-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}.trim-input-group input[type=number]{padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;width:100%;transition:border-color .2s ease}.trim-input-group input[type=number]:focus{outline:none;border-color:var(--accent-primary)}.trim-info{padding:8px 12px;background:#fff;border-radius:6px;font-size:13px;color:var(--text-secondary);text-align:center}.video-preview{display:flex;flex-direction:column;gap:15px}.video-preview.empty{min-height:300px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:8px}.video-preview .empty-state{text-align:center;color:var(--text-secondary)}.preview-video{border:1px solid var(--border-color)}.preview-controls{display:flex;gap:10px;align-items:center}.preview-controls button{padding:8px 16px;background:var(--accent-primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.preview-controls button:hover:not(:disabled){background:var(--accent-secondary);transform:translateY(-1px)}.preview-controls button:disabled{opacity:.5;cursor:not-allowed}.timeline-clip{position:relative;padding:12px;background:#fff;border:2px solid var(--border-color);border-radius:6px;cursor:-webkit-grab;cursor:grab;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:80px}.timeline-clip:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.timeline-clip.active{border-color:var(--accent-secondary);background:var(--accent-hover);box-shadow:var(--shadow-md)}.timeline-clip:active{cursor:-webkit-grabbing;cursor:grabbing}.remove-clip-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;background:var(--danger);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;line-height:1;opacity:0;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}.timeline-clip:hover .remove-clip-btn{opacity:1}.remove-clip-btn:hover{background:#dc2626}.mobile-menu-btn,.mobile-panel-toggle{display:none}.mobile-menu-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;display:none;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mobile-menu-content{width:100%;max-height:85vh;background:#fff;border-radius:20px 20px 0 0;padding:20px;overflow-y:auto;box-shadow:0 -4px 20px rgba(0,0,0,.2)}@media screen and (max-width:1024px){.left-panel,.right-panel{width:250px}.canvas-container{padding:10px}}@media screen and (max-width:768px){.mobile-menu-btn{display:inline-flex!important;padding:8px 14px;font-size:13px;font-weight:600}.mobile-panel-toggle{display:inline-flex!important;padding:8px 12px;font-size:16px;align-items:center;gap:4px}.mobile-menu-modal{display:flex!important}.editor-container{overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh}.top-bar{padding:8px 12px}.top-bar,.top-bar-left{flex-wrap:wrap;gap:8px}.desktop-title-btn{display:none!important}.logo{font-size:18px}.top-bar-center,.top-bar-right{gap:6px;flex-wrap:wrap}.btn{padding:6px 12px;font-size:12px}.main-content{flex-direction:column;overflow:visible;height:auto;flex:none}.left-panel{display:none}.mobile-menu-modal .left-panel{display:block!important;padding:0}.mobile-menu-modal .left-panel,.right-panel{width:100%;max-width:100%;border:none;max-height:none;overflow:visible}.right-panel{border-top:1px solid var(--border-color);padding:20px 15px;order:3;display:block;background:#fff}.right-panel.mobile-hidden{display:none!important}.canvas-container{order:2;width:100%;min-height:unset;height:auto;padding:12px 10px;flex:none;display:flex;align-items:flex-start;justify-content:flex-start;background-color:var(--bg-tertiary);background-image:radial-gradient(circle at 1px 1px,var(--border-color) 1px,transparent 0);background-size:32px 32px}.canvas-wrapper{max-width:100%;max-height:none;display:inline-block}.canvas-container{overflow:auto;-webkit-overflow-scrolling:touch}.timeline{position:relative;bottom:auto;left:auto;width:100%;height:auto;min-height:300px;padding:15px 10px;order:4;border-top:2px solid var(--border-color)}.timeline-header{flex-wrap:wrap;gap:8px;padding:8px 0}.timeline-controls{flex-wrap:wrap;gap:6px}.timeline-controls button{padding:6px 10px;font-size:11px}.timeline-playback{gap:6px}.timeline-clip{min-height:36px;touch-action:none}.timeline-track{min-height:40px}.property-group label{font-size:12px}.property-group input,.property-group select{padding:8px;font-size:14px}.modal-overlay{padding:0}.modal-content{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;overflow-y:auto}.template-grid{grid-template-columns:1fr}.assets-grid,.stock-grid{grid-template-columns:repeat(2,1fr);gap:10px}.file-input{width:100%;padding:8px 10px;font-size:13px}.file-input::-webkit-file-upload-button{padding:8px 12px;margin-right:8px;font-size:12px}.file-input::file-selector-button{padding:8px 12px;margin-right:8px;font-size:12px}.left-panel button,.right-panel button{font-size:13px;padding:8px 12px}.upload-section{display:block!important;margin-bottom:20px}.upload-section h3{font-size:14px;margin-bottom:10px}.mobile-menu-content{animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}}@media screen and (max-width:480px){.logo{font-size:16px}.btn{padding:5px 10px;font-size:11px}.top-bar{padding:6px 10px}.canvas-container{min-height:250px;padding:5px}.timeline{padding:8px;min-height:250px}.assets-grid,.stock-grid{grid-template-columns:1fr}}@media screen and (max-width:768px) and (orientation:landscape){.main-content{flex-direction:row}.left-panel,.right-panel{width:200px;max-height:100%}.canvas-container{flex:1 1}.timeline{height:200px}}@media (hover:none) and (pointer:coarse){.btn{min-height:36px;min-width:36px}.timeline-clip{min-height:40px}.btn:hover{box-shadow:var(--shadow-sm)}.btn:hover,.template-item:hover,.timeline-clip:hover{transform:none}.remove-clip-btn{opacity:.7}.timeline-clip,.timeline-track{touch-action:pan-y}button{touch-action:manipulation}}.left-panel,.right-panel,.timeline-tracks{-webkit-overflow-scrolling:touch}@media screen and (max-width:768px){.canvas-wrapper{max-width:100%;overflow:hidden}.canvas-wrapper canvas{max-width:100%!important;height:auto!important}}