:root{--bg-app:#0f1115;--bg-panel:#181b21;--bg-elevated:#242830;--bg-elevated-hover:#2d323c;--border:#ffffff14;--border-strong:#ffffff29;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--accent:#6366f1;--accent-hover:#4f46e5}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}input,textarea,select{-webkit-user-select:text;user-select:text}html,body,#root{background:var(--bg-app);width:100%;height:100%;color:var(--text-primary);font-family:Inter,sans-serif;overflow:hidden}.app{width:100%;height:100%;position:relative;overflow:hidden}.viewer{z-index:1;width:100%;height:100%;position:fixed;inset:0}.sidebar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid var(--border);z-index:10;background:#181b21eb;flex-direction:column;gap:20px;width:570px;min-width:320px;max-width:570px;height:100%;padding:24px 8px 24px 24px;display:flex;position:fixed;top:0;right:0;overflow-y:auto}.sidebar,.panel-body{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.sidebar::-webkit-scrollbar{width:8px}.panel-body::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:0 0}.panel-body::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}.panel-body::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff47}.panel-body::-webkit-scrollbar-thumb:hover{background:#ffffff47}.sidebar-resize-handle{cursor:col-resize;z-index:20;touch-action:none;width:6px;height:100%;display:none;position:absolute;top:0;left:-3px}.sidebar-resize-handle:after{content:"";background:0 0;width:2px;height:100%;transition:background .15s;position:absolute;top:0;left:2px}.sidebar-resize-handle:hover:after,.sidebar-resize-handle--active:after{background:var(--accent)}@media (width>=769px){.sidebar-resize-handle{display:block}:root{--sidebar-w:570px}.viewer{transform:translateX(calc(var(--sidebar-w) / -2));transition:transform .35s cubic-bezier(.4,0,.2,1)}}.sidebar h1{color:var(--text-primary);font-size:22px;font-weight:700}.section{flex-direction:column;gap:8px;display:flex}.section label{color:var(--text-secondary);font-size:14px}input[type=file]{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:12px;padding:10px}input[type=color]{cursor:pointer;border:none;border-radius:12px;width:100%;height:50px}button{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:14px;font-family:inherit;font-weight:600;transition:all .2s}button:hover{opacity:.92;transform:translateY(-2px)}canvas{width:100%!important;height:100%!important}.panel-handle{display:none}.panel-body{flex-direction:column;flex:1;gap:20px;padding-right:16px;display:flex;overflow-y:auto}.garment-toggle{gap:8px;display:flex}.garment-btn{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex:1;padding:10px 0;font-weight:600}.garment-btn:hover{background:var(--bg-elevated-hover);opacity:1;transform:none}.garment-btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}.garment-btn--active:hover{background:var(--accent-hover)}.sheet-hint{color:var(--text-secondary);font-size:12px;line-height:1.5}.position-sheet{aspect-ratio:1;border:1px solid var(--border-strong);touch-action:none;border-radius:12px;width:100%;position:relative;overflow:hidden}.position-sheet-grid{pointer-events:none;background-image:repeating-linear-gradient(90deg,#ffffff14 0 1px,#0000 1px 12.5%),repeating-linear-gradient(#ffffff14 0 1px,#0000 1px 12.5%);position:absolute;inset:0}.sheet-art{cursor:grab;touch-action:none;border:2px solid #0000;border-radius:4px;width:auto;max-width:none;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 10px #00000059}.sheet-art--active{border-color:var(--accent);cursor:grabbing;box-shadow:0 0 0 2px #6366f159,0 2px 10px #00000059}@media (width<=768px){:root{--mobile-sidebar-h:min(56vh, calc(100vw + 64px));--mobile-handle-h:22px}.app{position:relative;overflow:hidden}.viewer{transform:translateY(calc(var(--mobile-sidebar-h) / -2));transition:transform .35s cubic-bezier(.4,0,.2,1);position:fixed;inset:0}.app:has(.sidebar.panel--closed) .viewer{transform:translateY(0)}.sidebar{width:100%;min-width:0;max-width:none;height:var(--mobile-sidebar-h);border-left:none;border-top:1px solid var(--border);z-index:20;-webkit-backdrop-filter:blur(28px)saturate(1.4);backdrop-filter:blur(28px)saturate(1.4);background:#181b21b8;border-radius:20px 20px 0 0;flex-direction:column;gap:0;padding:0;transition:height .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;inset:auto 0 0;overflow:hidden;box-shadow:0 -4px 32px #00000073}.sidebar.panel--closed{height:var(--mobile-handle-h)}.panel-handle{width:100%;height:var(--mobile-handle-h);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.panel-handle:hover{opacity:1;background:#ffffff08;transform:none}.panel-pill{background:var(--border-strong);border-radius:2px;width:36px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.panel-body{flex:1;gap:8px;padding:4px 14px 10px;overflow:hidden}.sheet-hint{display:none}}.slider-row{align-items:center;gap:8px;display:flex}.slider-label{color:var(--text-secondary);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;font-size:11px;font-weight:600}.slider-row input[type=range]{height:4px;accent-color:var(--accent);cursor:pointer;flex:1}.slider-value{color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;width:34px;font-size:11px}.color-picker-wrap{position:relative}.color-swatch{border:2px solid var(--border-strong);cursor:pointer;border-radius:10px;width:100%;height:44px;padding:0;transition:border-color .15s;display:block}.color-swatch:hover{opacity:1;border-color:#ffffff4d;transform:none}.color-popover{z-index:300;border-radius:14px;animation:.2s tip-fade-in;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden;box-shadow:0 8px 32px #00000080}@keyframes tip-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.color-popover .react-colorful{border-radius:0;width:220px;height:220px}.color-popover .react-colorful__saturation{border-radius:0}.color-popover .react-colorful__hue{border-radius:0 0 4px 4px;height:18px}.loading-overlay{z-index:1000;background:var(--bg-app);justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}.loading-overlay--out{opacity:0;pointer-events:none}.loading-spinner{border:4px solid #6366f12e;border-top-color:var(--accent);border-radius:50%;width:52px;height:52px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.instructions-overlay{z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;justify-content:center;align-items:center;animation:.3s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.instructions-modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;width:90%;max-width:600px;max-height:85vh;padding:32px;overflow-y:auto;box-shadow:0 20px 60px #00000080}.instructions-modal h2{color:var(--text-primary);text-align:center;margin-bottom:24px;font-size:28px}.instructions-modal h3{color:var(--accent);margin-bottom:16px;font-size:16px;font-weight:600}.instructions-section{margin-bottom:24px}.instruction-row{align-items:center;gap:16px;margin-bottom:16px;display:flex}.instruction-icon{background:var(--bg-elevated);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.instruction-text{color:var(--text-secondary);flex:1;font-size:14px;line-height:1.6}.instruction-text strong{color:var(--text-primary);margin-bottom:4px;display:block}.instruction-note{color:#7dd3fc;background:#0ea5e91a;border-left:3px solid #0ea5e9;border-radius:4px;margin-top:8px;padding:12px 16px;font-size:13px;line-height:1.5}.instructions-start-btn{background:var(--accent);color:#fff;text-align:center;box-sizing:border-box;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:24px;padding:14px 20px;font-size:16px;font-weight:600;text-decoration:none;transition:all .2s;display:block}.instructions-start-btn:hover{background:var(--accent-hover);box-shadow:0 8px 16px #6366f14d}.instructions-start-btn:active{transform:scale(.98)}.budget-modal-text{color:var(--text-secondary);text-align:center;font-size:14px;line-height:1.6}.budget-modal-dismiss{width:100%;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;margin-top:12px;padding:10px 20px;font-size:13px;transition:color .2s;display:block}.budget-modal-dismiss:hover{color:var(--text-primary)}.instructions-loading{color:var(--text-secondary);flex-direction:column;align-items:center;gap:12px;padding:20px 0 4px;font-size:14px;font-weight:500;display:flex}@media (width<=768px){.instructions-modal{max-width:95%;padding:20px}.instructions-modal h2{margin-bottom:16px;font-size:22px}.instruction-icon{width:70px;height:70px}.instruction-text{font-size:13px}.desktop-only{display:none!important}}@media (width>=769px){.mobile-only{display:none!important}}.art-slots{gap:8px;display:flex}.art-slot{aspect-ratio:1;border:2px solid var(--border);background:var(--bg-elevated);cursor:pointer;border-radius:10px;flex:1;justify-content:center;align-items:center;min-width:0;padding:0;transition:border-color .15s,background .15s,box-shadow .15s;display:flex;overflow:hidden}.art-slot:hover{border-color:var(--border-strong);background:var(--bg-elevated-hover);opacity:1;transform:none}.art-slot--active{border-color:var(--accent);background:#6366f124;box-shadow:0 0 0 3px #6366f12e}.art-slot--active:hover{border-color:var(--accent);background:#6366f124}.art-slot--filled{background:var(--bg-elevated);border-color:#6366f173}.art-slot--filled.art-slot--active{border-color:var(--accent)}.art-slot-thumb{object-fit:contain;width:100%;height:100%}.art-slot-num{color:var(--text-secondary);font-size:15px;font-weight:700}.art-slot-empty{color:var(--text-secondary);opacity:.4;font-size:20px;font-weight:300;line-height:1}.art-slot-controls{flex-direction:column;gap:10px;display:flex}.upload-button{background:var(--accent);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex;color:#fff!important}.upload-button svg{color:#fff;stroke:#fff}.upload-button:hover{background:var(--accent-hover);box-shadow:0 4px 12px #6366f14d}.upload-button:active{transform:scale(.98)}.remove-art-btn{background:#ef4444;padding:10px 12px;font-size:13px}.remove-art-btn:hover{background:#dc2626}.action-row{gap:10px;display:flex}.btn-primary{flex:2}.btn-secondary{color:var(--text-secondary);border:1px solid var(--border);background:0 0;flex:1}.btn-secondary:hover{background:var(--bg-elevated-hover);color:var(--text-primary);border-color:var(--border-strong);opacity:1;transform:none}.art-icon-controls{gap:10px;display:flex}.icon-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;height:46px;transition:all .2s;display:flex}.icon-btn svg{stroke:currentColor}.icon-btn:hover{background:var(--accent-hover);opacity:1;transform:none}.icon-btn:active{transform:scale(.96)}.icon-btn--remove{color:#f87171;background:#ef444429;border:1px solid #ef444459}.icon-btn--remove:hover{color:#fff;background:#ef4444;border-color:#ef4444}.icon-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.settings-trigger{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:44px;height:44px;color:var(--text-primary);border:1px solid var(--border);z-index:30;background:#181b21b3;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;top:16px;right:16px}.settings-trigger:hover{opacity:1;background:#242830d9;transform:none}.gif-trigger{background:var(--accent);color:#fff;z-index:30;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:background .2s,opacity .2s;display:flex;position:fixed;top:68px;right:16px}.gif-trigger:hover{background:var(--accent-hover)}.gif-trigger:disabled{opacity:.6;cursor:not-allowed}.gif-trigger svg{stroke:#fff}.settings-panel{flex-direction:column;gap:20px;display:flex}.settings-panel-header{display:none}@media (width<=768px){.settings-panel{z-index:50;-webkit-backdrop-filter:blur(30px)saturate(1.4);backdrop-filter:blur(30px)saturate(1.4);padding:24px;padding-top:max(24px, env(safe-area-inset-top));background:#0f1115c7;flex-direction:column;gap:20px;display:none;position:fixed;inset:0;overflow-y:auto}.settings-panel--open{display:flex}.settings-panel-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.settings-panel-header h2{color:var(--text-primary);font-size:20px;font-weight:700}.settings-close-btn{background:var(--bg-elevated);border:1px solid var(--border);width:36px;height:36px;color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:flex}.settings-close-btn:hover{background:var(--bg-elevated-hover);opacity:1;transform:none}}.modal-close-btn{background:var(--bg-elevated);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:20px;line-height:1;transition:background .15s,color .15s;display:flex}.modal-close-btn:hover{background:var(--bg-elevated-hover);color:var(--text-primary);opacity:1;transform:none}.gif-error-text{color:var(--text-secondary);margin-bottom:16px;font-size:13px;line-height:1.6}