*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background:#0a0a0f}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#0a0a0f,#1a1a2e);color:#fff}.main-content{display:flex;flex:1;gap:.5rem;padding:.5rem;width:100%;height:100vh;box-sizing:border-box}.preview-area{flex:1;background:#ffffff08;border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:0;border:2px dashed #ec4899;transition:border-color .2s,background-color .2s;overflow:auto;position:relative}.preview-area.dragging{border-color:#22d3ee;background:#22d3ee1a}.drop-zone{text-align:center;color:#888;padding:1.5rem}.drop-icon{font-size:4rem;color:#ec4899;margin-bottom:1rem;line-height:1}.drop-zone p{margin:.5rem 0}.drop-zone button{margin-top:1rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#ec4899,#8b5cf6);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s}.drop-zone button:hover{transform:translateY(-2px);box-shadow:0 4px 20px #ec489980}.canvas-container{max-width:100%;max-height:100%;overflow:auto}.canvas-container canvas{max-width:100%;height:auto;display:block;border-radius:8px}.sidebar-wrapper{flex-shrink:0;position:relative;max-height:calc(100vh - 2rem)}.controls{background:#ffffff0d;border-radius:16px;padding:1.25rem;overflow-y:auto;max-height:calc(100vh - 2rem);border:1px solid rgba(236,72,153,.2)}.resize-handle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:ew-resize;background:transparent;transition:background .2s;border-radius:16px 0 0 16px;z-index:10}.resize-handle:hover{background:#ec48994d}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid rgba(139,92,246,.3)}.controls-header h2{margin:0;font-size:1.1rem;font-weight:600;background:linear-gradient(135deg,#ec4899,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.reset-btn{padding:.4rem .8rem;background:transparent;border:1px solid #8b5cf6;border-radius:6px;color:#a78bfa;font-size:.85rem;cursor:pointer;transition:all .2s}.reset-btn:hover{border-color:#ec4899;color:#ec4899;background:#ec48991a}.control-group{margin-bottom:1.25rem}.control-group>label{display:block;font-size:.85rem;color:#a78bfa;margin-bottom:.5rem;font-weight:500}.button-group{display:flex;gap:.5rem;flex-wrap:wrap}.button-group button{flex:1;min-width:70px;padding:.5rem .75rem;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#c4b5fd;font-size:.8rem;cursor:pointer;transition:all .2s;text-transform:capitalize;text-align:center}.button-group button:hover{border-color:#ec4899;color:#f472b6;background:#ec48991a}.button-group button.active{background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:transparent;color:#fff}.color-inputs{display:flex;gap:.75rem;align-items:center}.color-inputs input[type=color]{width:50px;height:36px;border:1px solid rgba(139,92,246,.3);border-radius:6px;cursor:pointer;background:#8b5cf61a;padding:2px}.color-inputs input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-inputs input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}.color-inputs input[type=range]{flex:1;height:6px;border-radius:3px;background:#8b5cf64d;-webkit-appearance:none;appearance:none}.color-inputs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#8b5cf6);cursor:pointer}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:150px}.position-btn{aspect-ratio:1;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#a78bfa;font-size:1rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.position-btn:hover{border-color:#ec4899;color:#f472b6;background:#ec48991a}.position-btn.active{background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:transparent;color:#fff}.control-group label input[type=checkbox]{margin-right:.5rem;accent-color:#ec4899}.proportion-dropdown{position:relative}.proportion-dropdown-trigger{width:100%;padding:.6rem .75rem;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#c4b5fd;font-size:.85rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between;text-align:left}.proportion-dropdown-trigger:hover{border-color:#ec4899;background:#ec48991a}.proportion-selected{display:flex;align-items:center;gap:.5rem}.proportion-label{font-weight:500;color:#fff}.proportion-section-tag{font-size:.7rem;padding:.15rem .4rem;background:#8b5cf64d;border-radius:4px;color:#a78bfa}.proportion-arrow{font-size:.65rem;color:#a78bfa;transition:transform .2s}.proportion-arrow.open{transform:rotate(180deg)}.proportion-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:400px;overflow-y:auto;background:#1a1a2e;border:1px solid rgba(139,92,246,.3);border-radius:8px;box-shadow:0 10px 40px #00000080;z-index:100}.proportion-dropdown-menu::-webkit-scrollbar{width:6px}.proportion-dropdown-menu::-webkit-scrollbar-track{background:transparent}.proportion-dropdown-menu::-webkit-scrollbar-thumb{background:#8b5cf6;border-radius:3px}.proportion-section{border-bottom:1px solid rgba(139,92,246,.15)}.proportion-section:last-child{border-bottom:none}.proportion-section-header{padding:.6rem .75rem .4rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#ec4899;background:#1a1a2e;position:sticky;top:0;z-index:1;border-bottom:1px solid rgba(139,92,246,.15)}.proportion-option{width:100%;padding:.5rem .75rem;background:transparent;border:none;color:#c4b5fd;font-size:.8rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:space-between;text-align:left}.proportion-option:hover{background:#8b5cf626;color:#fff}.proportion-option.active{background:linear-gradient(135deg,#ec489933,#8b5cf633);color:#fff}.proportion-option.active .proportion-option-label{font-weight:600}.proportion-option-label{font-weight:500}.proportion-option-desc{font-size:.7rem;color:#888}.proportion-search{padding:.5rem;position:sticky;top:0;background:#1a1a2e;z-index:2;border-bottom:1px solid rgba(139,92,246,.2)}.proportion-search input{width:100%;padding:.5rem .75rem;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#fff;font-size:.85rem;outline:none;transition:border-color .2s;box-sizing:border-box}.proportion-search input:focus{border-color:#ec4899}.proportion-search input::placeholder{color:#666}.proportion-custom{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.proportion-custom input[type=number]{width:60px;padding:.4rem .5rem;background:#8b5cf61a;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#fff;font-size:.85rem;text-align:center;outline:none;transition:border-color .2s;-moz-appearance:textfield}.proportion-custom input[type=number]::-webkit-outer-spin-button,.proportion-custom input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.proportion-custom input[type=number]:focus{border-color:#ec4899}.proportion-custom span{color:#a78bfa;font-weight:600}.proportion-custom-apply{flex:1;padding:.4rem .75rem;background:#8b5cf633;border:1px solid rgba(139,92,246,.3);border-radius:6px;color:#c4b5fd;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.proportion-custom-apply:hover{background:#ec489933;border-color:#ec4899;color:#f472b6}.proportion-custom-apply.active{background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:transparent;color:#fff}.background-preview-colors{display:flex;gap:.25rem;align-items:center}.color-dot{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}.background-custom{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.background-custom input[type=color]{width:40px;height:32px;border:1px solid rgba(139,92,246,.3);border-radius:6px;cursor:pointer;background:#8b5cf61a;padding:2px}.background-custom input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.background-custom input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}.background-custom input[type=range]{flex:1;height:6px;border-radius:3px;background:#8b5cf64d;-webkit-appearance:none;appearance:none}.background-custom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#8b5cf6);cursor:pointer}.background-option{justify-content:flex-start;gap:.5rem}.background-option-preview{width:24px;height:24px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}.export-buttons{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(139,92,246,.3)}.export-buttons button.primary{width:100%;padding:.75rem;background:linear-gradient(135deg,#ec4899,#8b5cf6);border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s}.export-buttons button.primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #ec489980}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-track{background:transparent}.controls::-webkit-scrollbar-thumb{background:#8b5cf6;border-radius:3px}.controls::-webkit-scrollbar-thumb:hover{background:#ec4899}.zoom-overlay{position:absolute;bottom:16px;left:16px;z-index:50}.zoom-trigger{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#1a1a2ee6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(139,92,246,.3);border-radius:8px;color:#c4b5fd;font-size:.8rem;cursor:pointer;transition:all .2s}.zoom-trigger:hover{border-color:#ec4899;background:#1a1a2ef2;color:#f472b6}.zoom-icon{display:flex;align-items:center;justify-content:center;color:#a78bfa}.zoom-label{font-weight:500;color:#fff;min-width:70px}.zoom-arrow{font-size:.6rem;color:#a78bfa;transition:transform .2s}.zoom-arrow.open{transform:rotate(180deg)}.zoom-dropdown-menu{position:absolute;bottom:calc(100% + 4px);left:0;min-width:160px;background:#1a1a2ef2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(139,92,246,.3);border-radius:8px;box-shadow:0 10px 40px #00000080;overflow:hidden}.zoom-option{width:100%;padding:.6rem .75rem;background:transparent;border:none;color:#c4b5fd;font-size:.8rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:space-between;text-align:left}.zoom-option:hover{background:#8b5cf626;color:#fff}.zoom-option.active{background:linear-gradient(135deg,#ec489933,#8b5cf633);color:#fff}.zoom-option.active .zoom-option-label{font-weight:600}.zoom-option-label{font-weight:500}.zoom-option-desc{font-size:.7rem;color:#888}.canvas-container.zoom-fit{overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.canvas-container.zoom-fit canvas{max-width:none}.canvas-container.zoom-active{align-items:flex-start;justify-content:flex-start;padding:16px}.canvas-container.zoom-active canvas{max-width:none}.toast-container{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px}.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#1a1a2ef2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;box-shadow:0 4px 20px #0000004d;color:#fff;font-size:.9rem;transform:translate(120%);opacity:0;transition:transform .2s ease,opacity .2s ease}.toast.visible{transform:translate(0);opacity:1}.toast.success{border:1px solid rgba(34,197,94,.4)}.toast.success .toast-icon{color:#22c55e}.toast.error{border:1px solid rgba(239,68,68,.4)}.toast.error .toast-icon{color:#ef4444}.toast-icon{display:flex;align-items:center;justify-content:center}.toast-message{font-weight:500}@media(max-width:900px){.main-content{flex-direction:column;padding:.5rem}.sidebar-wrapper{width:100%!important;max-height:none}.controls{max-height:none}.resize-handle{display:none}.preview-area{min-height:400px}}