@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@400;700&family=Roboto:wght@400;500;700&display=swap";:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--bg-glass: rgba(26, 26, 37, .8);--bg-glass-light: rgba(255, 255, 255, .05);--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #6a6a7a;--accent-primary: #7c3aed;--accent-secondary: #a855f7;--accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);--accent-glow: rgba(124, 58, 237, .4);--success: #10b981;--danger: #ef4444;--border-color: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 30px var(--accent-glow);--transition-fast: .15s ease;--transition-normal: .25s ease;--sidebar-width: 280px;--header-height: 60px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;height:100vh;background:radial-gradient(ellipse at 20% 0%,rgba(124,58,237,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(236,72,153,.1) 0%,transparent 50%),var(--bg-primary)}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 24px;background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);z-index:100}.logo{display:flex;align-items:center;gap:8px}.logo-icon{width:28px;height:28px;color:var(--accent-secondary)}.logo-text{font-size:20px;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color);padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}.sidebar-left{border-right:1px solid var(--border-color)}.sidebar-right{border-left:1px solid var(--border-color)}.tool-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn svg{width:18px;height:18px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--bg-glass-light);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary)}.btn-danger{background:#ef444433;color:var(--danger);border:1px solid rgba(239,68,68,.3)}.btn-export{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:14px;font-size:15px}.btn-export:hover:not(:disabled){box-shadow:0 0 30px #10b98166}.btn-block{width:100%}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-glass-light);color:var(--text-primary)}.ratio-buttons{display:flex;gap:8px}.ratio-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--bg-glass-light);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.ratio-btn svg{width:24px;height:24px}.ratio-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.ratio-btn.active{background:#7c3aed33;border-color:var(--accent-primary);color:var(--accent-secondary)}.zoom-control{display:flex;align-items:center;gap:8px}.zoom-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-glass-light);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.zoom-btn svg{width:16px;height:16px}.zoom-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.zoom-value{text-align:center;font-size:13px;color:var(--text-secondary)}.slider{-webkit-appearance:none;width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent-gradient);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--accent-glow)}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0 / 20px 20px,linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0 / 20px 20px;overflow:hidden}.canvas-wrapper{position:relative;background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid #a4a4a4;overflow:hidden}.canvas-wrapper.portrait{aspect-ratio:9 / 16;max-height:calc(100vh - var(--header-height) - 64px)}.canvas-wrapper.landscape{aspect-ratio:16 / 9;max-width:calc(100vw - var(--sidebar-width) * 2 - 64px)}.drop-zone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-lg);transition:all var(--transition-fast);z-index:10}.drop-zone.hidden{display:none}.drop-zone.drag-over{border-color:var(--accent-primary);background:#7c3aed1a}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--text-muted);text-align:center}.drop-zone-content svg{width:64px;height:64px;opacity:.5}.drop-zone-content p{font-size:16px;color:var(--text-secondary)}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:12px;font-weight:500;color:var(--text-secondary)}textarea,.select{width:100%;padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:14px;transition:all var(--transition-fast)}textarea:focus,.select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6a7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.input-with-slider{display:flex;align-items:center;gap:12px}.input-with-slider span{font-size:13px;color:var(--text-secondary);min-width:45px;text-align:right}.color-picker-row{display:flex;align-items:center;gap:12px}.color-input{width:40px;height:40px;padding:0;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none}.color-picker-row span{font-size:13px;color:var(--text-secondary);font-family:monospace}.style-buttons{display:flex;gap:4px}.style-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.style-btn svg{width:18px;height:18px}.style-btn:hover{background:var(--bg-glass-light);color:var(--text-primary)}.style-btn.active{background:#7c3aed33;border-color:var(--accent-primary);color:var(--accent-secondary)}.bg-options{display:flex;gap:4px}.bg-btn{flex:1;padding:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.bg-btn.active{background:#7c3aed33;border-color:var(--accent-primary);color:var(--accent-secondary)}.toggle-row{display:flex;align-items:center;gap:12px}.toggle-row span{font-size:13px;color:var(--text-secondary)}.toggle{position:relative;width:44px;height:24px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;transition:all var(--transition-fast)}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--text-secondary);border-radius:50%;transition:all var(--transition-fast)}.toggle input:checked+.toggle-slider{background:var(--accent-primary);border-color:var(--accent-primary)}.toggle input:checked+.toggle-slider:before{transform:translate(20px);background:#fff}.duration-control{display:flex;align-items:center;gap:12px}.duration-value{font-size:18px;font-weight:600;color:var(--accent-secondary);min-width:40px;text-align:right}.export-info{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-glass-light);border-radius:var(--radius-md);border:1px solid var(--border-color)}.info-row{display:flex;justify-content:space-between;font-size:13px}.info-row span:first-child{color:var(--text-muted)}.info-row span:last-child{color:var(--text-primary);font-weight:500}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000}.modal.active{display:flex}.modal-content{width:90%;max-width:400px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:24px;overflow:hidden;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{padding:24px;border-bottom:1px solid var(--border-color)}.modal-header h3{font-size:18px;font-weight:600}.modal-body{padding:32px}.progress-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--accent-gradient);border-radius:4px;transition:width .3s ease}.progress-text{font-size:13px;color:var(--text-secondary);text-align:center;margin-top:8px}.progress-detail{font-size:13px;color:var(--text-muted);text-align:center;margin-top:12px}