:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--accent: #c77dff;--accent-dark: #9d4edd;--accent-light: rgba(199, 125, 255, .15);--surface: #0f0f13;--surface-2: #18181f;--surface-3: #22222d;--border: rgba(255, 255, 255, .08);--text: #fafafa;--text-muted: rgba(255, 255, 255, .5)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--surface);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;top:0;z-index:100;background:#0f0f13e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.header-inner{max-width:1200px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{font-size:1.5rem}.logo h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-actions{display:flex;gap:.5rem}.btn-outline{background:var(--surface-2);border:1px solid var(--border);border-radius:.5rem;padding:.45rem .85rem;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .2s}.btn-outline:hover{border-color:var(--accent);color:var(--text);background:var(--surface-3)}.main{flex:1;max-width:1200px;margin:0 auto;padding:1.5rem;width:100%}.layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.preview-section{position:sticky;top:5rem}.preview-card{background:var(--surface-2);border:1px solid var(--border);border-radius:1rem;padding:1.5rem}.preview-card h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1rem}.dress-canvas{display:flex;justify-content:center;padding:1rem;background:var(--surface-3);border-radius:.75rem;margin-bottom:1.25rem}.dress-svg{width:180px;height:auto;filter:drop-shadow(0 4px 20px rgba(0,0,0,.4))}.color-summary{display:flex;flex-direction:column;gap:.4rem}.color-chip{display:flex;align-items:center;gap:.6rem;padding:.4rem 0}.chip-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--border);flex-shrink:0}.chip-label{font-size:.8rem;color:var(--text-muted);min-width:60px}.chip-hex{font-family:SF Mono,Fira Code,monospace;font-size:.75rem;color:var(--accent);text-transform:uppercase}.controls-section{display:flex;flex-direction:column;gap:1.25rem}.control-card{background:var(--surface-2);border:1px solid var(--border);border-radius:1rem;padding:1.5rem}.control-card h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1rem}.part-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.part-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:9999px;border:1px solid var(--border);background:var(--surface-3);color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .2s}.part-btn:hover{border-color:var(--accent);color:var(--text)}.part-btn.active{border-color:var(--accent);background:var(--accent-light);color:var(--text);font-weight:600}.part-swatch{width:12px;height:12px;border-radius:3px;border:1px solid var(--border)}.color-editor{margin-bottom:1.25rem}.editor-label{display:block;font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}.color-input-row{display:flex;align-items:center;gap:.6rem}.color-picker{width:44px;height:44px;border:2px solid var(--border);border-radius:.5rem;background:none;cursor:pointer;padding:2px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:.35rem}.hex-input{width:90px;padding:.5rem .6rem;background:var(--surface-3);border:1px solid var(--border);border-radius:.5rem;color:var(--text);font-family:SF Mono,Fira Code,monospace;font-size:.85rem;outline:none;transition:border-color .2s}.hex-input:focus{border-color:var(--accent)}.hsl-label{font-size:.7rem;color:var(--text-muted);font-family:SF Mono,Fira Code,monospace}.swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1.25rem}.swatch-btn{aspect-ratio:1;border-radius:.5rem;border:2px solid transparent;cursor:pointer;transition:all .2s}.swatch-btn:hover{transform:scale(1.12);border-color:var(--text)}.save-btn{width:100%}.btn-primary{background:linear-gradient(135deg,var(--accent),#ff6b9d);color:#fff;border:none;border-radius:.6rem;padding:.7rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.preset-list{display:flex;flex-direction:column;gap:.5rem}.preset-btn{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;background:var(--surface-3);border:1px solid var(--border);border-radius:.6rem;cursor:pointer;transition:all .2s;width:100%}.preset-btn:hover{border-color:var(--accent);background:#c77dff0f}.preset-name{color:var(--text);font-size:.85rem;font-weight:500}.preset-colors{display:flex;gap:.3rem}.preset-dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--border)}@media(max-width:768px){.layout{grid-template-columns:1fr}.preview-section{position:static}.header-inner{flex-wrap:wrap}.header-actions{width:100%;justify-content:flex-end}}@media(max-width:480px){.swatch-grid{grid-template-columns:repeat(5,1fr);gap:.4rem}.part-buttons{gap:.4rem}.part-btn{padding:.35rem .65rem;font-size:.75rem}.color-input-row{flex-wrap:wrap}.hsl-label{width:100%}}