@font-face{font-family:Manrope;src:url('./assets/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{font-family:Manrope,Arial,sans-serif;color:#efefef;background:#141414;font-size:13px;font-synthesis:none;--muted:#a1a1a1;--line:#303030;--accent:#a88aff;--surface:#1d1d1d;--raised:#292929;color-scheme:dark}*{box-sizing:border-box}body{margin:0}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}button,a,[role=button]{touch-action:manipulation}button{cursor:pointer;user-select:none;border:1px solid var(--line);background:#242424;color:#ddd;border-radius:7px;min-height:38px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s}button:active{background:#3c3c3c;transform:translateY(1px)}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,label:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button span[data-icon]{display:flex}h1,h2,p{margin:0}h1,h2{font-size:14px;font-weight:650}input,select{font-size:16px}select{width:100%;background:#262626;color:#eee;border:1px solid #3a3a3a;border-radius:7px;padding:12px 10px;font-size:13px;min-height:44px}input[type=range]{width:100%;accent-color:var(--accent);height:22px;cursor:pointer;margin:6px 0 15px}input[type=color]{border:0;border-radius:4px;background:none;padding:0;width:26px;height:26px;cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}label{color:#ddd}.app{height:100dvh;display:flex;flex-direction:column;min-height:650px}.topbar{height:72px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px;gap:20px;background:#171717}.brand{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-1.2px;font-weight:800;white-space:nowrap}.brand-studio{font-weight:400;margin-left:6px;color:#bcbcbc}.project-title{display:flex;align-items:center;gap:9px;color:#b1b1b1;font-size:12px}.tag{border:1px solid #353535;border-radius:4px;font-size:11px;padding:4px 7px;color:#bfbfbf;margin-left:5px}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#98b69b}.header-actions{display:flex;align-items:center;gap:15px}.primary{background:#7854cb;color:#fff;border:1px solid #7854cb;font-weight:650;padding:12px 19px;min-height:43px}.icon-button{width:36px;padding:8px;min-height:36px;background:transparent;border-color:transparent}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr) 270px;flex:1;min-height:0}.panel{padding:23px 20px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent;background:#1b1b1b}.design-panel{border-right:1px solid var(--line)}.settings-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h1,.panel-heading h2{font-size:17px;letter-spacing:-.4px}.step{font-size:11px;color:#767676}.intro{font-size:12px;color:var(--muted);margin-top:6px;margin-bottom:23px}.upload-zone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px dashed #555;border-radius:9px;padding:23px 8px;cursor:pointer;background:#202020}.upload-zone>span[data-icon] svg{width:29px;height:29px;color:var(--accent);margin-bottom:5px}.upload-zone strong{font-size:13px;font-weight:600}.upload-zone>span:not([data-icon]){font-size:11px;color:#aaa}.upload-zone small{font-size:11px;color:#aaa}.upload-zone.dragging{border-color:var(--accent);background:#30283d}.design-item{display:flex;align-items:center;gap:10px;margin-top:16px}.design-item img{width:47px;height:54px;object-fit:contain;background:#303030;border-radius:5px;padding:5px}.design-item>div{flex:1;min-width:0}.design-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:550}.design-item>div>span{display:block;font-size:11px;color:#aaa;margin-top:5px}.design-item button{width:27px;padding:4px}.section{border-top:1px solid var(--line);padding-top:19px;margin-top:20px}.section.first{border-top:0;padding-top:0;margin-top:24px}.section.first>label{display:block;color:#b3b3b3;font-size:12px;margin-bottom:9px}.label-row{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:8px}.label-row h2,.label-row label,.label-row>span{font-size:12px;font-weight:500}.label-row output{font-size:11px;background:#282828;border:1px solid #353535;border-radius:4px;padding:3px 8px;min-width:49px;text-align:center;font-variant-numeric:tabular-nums}.hint{font-size:11px;color:#aaa;line-height:1.6}.section>p.hint{margin-top:7px}.segmented{display:flex;background:#292929;border-radius:7px;padding:3px;gap:3px}.segmented button{border:0;flex:1;background:transparent;min-height:30px;font-size:11px;padding:6px 10px}.segmented button.active{background:#414141;color:#fff}.text-button{padding:0;min-height:24px;border:0;background:none;color:#b9a5eb;font-size:11px}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.position-grid label{display:flex;gap:6px;align-items:center;font-size:11px;color:#aaa}.position-grid input{margin:2px 0 10px}.button-row{display:flex;gap:8px}.button-row button{flex:1;font-size:11px;padding:8px 5px;gap:6px}.button-row svg{width:15px}.vertical-icon{transform:rotate(90deg)}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.template-grid button{padding:7px;height:69px}.template-grid img{width:100%;height:100%;object-fit:contain}.privacy-note{display:flex;align-items:center;gap:7px;font-size:11px;color:#929292;margin-top:23px;line-height:1.6}.privacy-note svg{width:14px}.legal{display:flex;gap:14px;font-size:11px;color:#888;margin-top:15px}.canvas-area{background:#262626;position:relative;min-width:0;overflow:hidden;isolation:isolate}.canvas-toolbar{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:8px}.history{display:flex;background:#303030;border-radius:7px;padding:2px}.mode-switch{background:#1b1b1b;min-width:180px;border:1px solid #383838}.mode-switch button{font-size:12px}.mode-switch button.active{background:#48404f;color:#e5d6ff}.canvas-toolbar>.icon-button{background:#303030;border:1px solid #414141}.stage-label{position:absolute;top:88px;left:25px;z-index:1;pointer-events:none}.stage-label>span{display:block;font-size:12px;color:#ddd}.stage-label>span+span{color:#a6a6a6;font-size:11px;margin-top:5px}#viewport{position:absolute;inset:45px 0 105px}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}#loading{display:grid;place-items:center;height:100%;font-size:13px;color:#bbb;padding:25px;text-align:center}.zoom-tools{position:absolute;right:20px;top:44%;display:flex;flex-direction:column;background:#303030;border:1px solid #414141;border-radius:7px;z-index:2}.zoom-tools button+button{border-top:1px solid #414141;border-radius:0 0 7px 7px}.stage-bottom{position:absolute;bottom:20px;left:20px;right:20px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}.view-buttons{display:flex;gap:5px;background:#1e1e1e;border:1px solid #3c3c3c;border-radius:7px;padding:4px}.view-buttons button{min-height:30px;background:transparent;border:0;font-size:11px;padding:7px 12px;color:#aaa}.view-buttons button.active{background:#414141;color:#fff}.rotation-bar{display:flex;align-items:center;gap:10px;width:min(360px,95%);font-size:11px;color:#bcbcbc}.rotation-bar input{margin:0;flex:1;min-width:0;height:15px}.rotation-bar button{min-height:27px;width:27px;border:1px solid #5b5b5b;border-radius:50%;padding:5px}.rotation-bar svg{width:13px;height:13px}.rotation-bar output{min-width:32px;font-variant-numeric:tabular-nums;font-size:11px}.canvas-hint{font-size:11px;color:#ababab}.garment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.garment-grid button{height:68px;display:flex;flex-direction:column;gap:5px;padding:5px 2px;font-size:11px;border-color:#343434;background:#242424}.garment-grid svg{width:30px;height:30px;stroke:#bbb;stroke-width:1.1}.garment-grid button.active{border-color:#ad8ef5;background:#332d3c;color:#e1d3ff}.garment-grid button.active svg{stroke:#e1d3ff}.swatches{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0}.swatches button{background:var(--swatch);width:25px;height:25px;min-height:25px;border-radius:50%;padding:0;border:1px solid #777}.swatches button.active{outline:2px solid #b294f7;outline-offset:3px}.custom-color{display:flex;align-items:center;gap:8px;font-size:11px;color:#aaa}.custom-color>span{margin-left:auto;font-size:11px}.light-buttons{display:flex;gap:7px}.light-buttons button{flex:1;flex-direction:column;padding:11px 2px;font-size:11px;gap:7px;background:#232323}.light-buttons button.active{background:#34303b;border-color:#8970b7;color:#e2d6f9}.backgrounds{display:flex;gap:9px;margin:12px 0 17px}.backgrounds button,.backgrounds label{background:var(--swatch);width:32px;height:32px;min-height:32px;padding:0;border:1px solid #777;border-radius:5px}.backgrounds button.active{outline:2px solid var(--accent);outline-offset:2px}.backgrounds label{display:grid;place-items:center}.backgrounds input{width:25px;height:25px}.checkbox{display:flex;align-items:center;gap:8px;font-size:11px;color:#b8b8b8;cursor:pointer}.studio-signature{margin-top:35px;padding-top:22px;border-top:1px solid var(--line)}.studio-signature span{font-size:11px;letter-spacing:.6px;color:#929292}.studio-signature strong{font-size:24px;letter-spacing:-1px;display:block;font-weight:500;margin-top:5px;color:#aaa}.statusbar{height:31px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid var(--line);font-size:11px;color:#959595;background:#171717}.statusbar>span:first-child{display:flex;align-items:center;gap:7px}.footer-separator{padding:0 7px;color:#555}.mobile-tabs{display:none}dialog{border:1px solid #444;background:#202020;color:#eee;border-radius:14px;padding:34px;max-width:470px;width:calc(100% - 30px)}dialog::backdrop{background:#000a}.dialog-close{position:absolute;right:12px;top:12px}dialog h2{font-size:26px;letter-spacing:-1px;margin:15px 0}dialog p,dialog li{font-size:12px;color:#bcbcbc;line-height:1.8}dialog ol{padding-left:19px}dialog li{padding:5px 0}dialog label:not(.checkbox){display:block;margin:22px 0 8px}dialog .checkbox{margin:20px 0}dialog .primary{width:100%;margin:4px 0 10px}dialog .button-row{margin-top:20px}.eyebrow{font-size:11px;letter-spacing:1px;color:#c2aaff}#toast{position:fixed;bottom:45px;left:50%;transform:translate(-50%,15px);background:#eee;color:#151515;padding:12px 18px;border-radius:7px;z-index:10;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:90vw;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}@media(hover:hover) and (pointer:fine){button:not(:disabled):hover{background:#414141;color:#fff}.primary:hover{background:#805bd1!important}.swatches button:hover{background:var(--swatch)!important}.backgrounds button:hover{background:var(--swatch)!important}a:hover{color:#d8c6ff}.upload-zone:hover{border-color:#b39adf;background:#29252f}}@media(min-width:1600px){.workspace{grid-template-columns:300px minmax(0,1fr) 300px}.panel{padding:28px}.section{margin-top:24px;padding-top:22px}}@media(max-width:1150px) and (min-width:1001px){.workspace{grid-template-columns:230px minmax(0,1fr) 230px}.panel{padding:20px 16px}.project-title{display:none}.view-buttons button{padding:7px 8px}.canvas-toolbar{left:12px;right:12px}.mode-switch{min-width:145px}.mode-switch button{padding:6px}.swatches{gap:8px}}@media(max-width:1000px){.app{height:auto;min-height:100dvh}.topbar{height:65px;padding:env(safe-area-inset-top) 16px 0;gap:8px}.brand{font-size:20px;gap:8px}.brand img{width:27px;height:27px}.brand-studio{margin-left:4px}.project-title{display:none}.header-actions{gap:5px}.header-actions>.icon-button{display:none}.primary{font-size:11px;min-height:39px;padding:9px 12px}.primary svg{width:15px}.mobile-tabs{display:flex;border-bottom:1px solid var(--line);height:60px;background:#1b1b1b;position:sticky;top:0;z-index:4}.mobile-tabs button{flex:1;border:0;border-radius:0;background:none;flex-direction:column;gap:4px;font-size:11px;color:#a3a3a3;min-height:55px;padding:7px}.mobile-tabs button.active{color:#d8c3ff;box-shadow:inset 0 -2px #a88aff}.mobile-tabs svg{width:19px;height:19px}.workspace{display:flex;flex-direction:column;flex:1}.canvas-area{order:0;height:calc(100svh - 175px);min-height:410px;max-height:800px;flex-shrink:0}.panel{display:none;order:1;border:0;padding:23px 20px;overflow:visible}.app[data-tab=design] .design-panel{display:block}.app[data-tab=garment] .settings-panel,.app[data-tab=scene] .settings-panel{display:block}.app[data-tab=scene] .settings-panel>.panel-heading,.app[data-tab=scene] .settings-panel>.section,.app[data-tab=scene] .studio-signature{display:none}.app[data-tab=garment] .scene-controls,.app[data-tab=garment] .studio-signature{display:none}.app:not([data-tab=mockup]) .canvas-area{height:44svh;min-height:295px}.app:not([data-tab=mockup]) .stage-label,.app:not([data-tab=mockup]) .rotation-bar,.app:not([data-tab=mockup]) .canvas-hint{display:none}.app:not([data-tab=mockup]) .stage-bottom{bottom:10px}.app:not([data-tab=mockup]) #viewport{inset:38px 0 45px}.canvas-toolbar{top:14px;left:13px;right:13px}.mode-switch{min-width:151px}.mode-switch button{font-size:11px}.history .icon-button{width:30px}.stage-label{top:71px;left:19px}.stage-label>span{font-size:11px}.stage-label>span+span{font-size:11px}#viewport{inset:47px 0 125px}.zoom-tools{right:13px}.zoom-tools button{min-height:44px;width:36px}.stage-bottom{bottom:20px;left:12px;right:12px;gap:11px}.view-buttons button{min-height:37px;padding:7px 13px;font-size:11px}.rotation-bar{width:285px}.rotation-bar button{height:32px;min-height:32px;width:32px}.statusbar{height:40px;padding:0 16px calc(env(safe-area-inset-bottom,0px)/2);font-size:11px}.statusbar>span:nth-child(2){display:none}.section{margin-top:24px}.panel-heading h1,.panel-heading h2{font-size:19px}.label-row h2,.label-row label,.label-row>span{font-size:13px}.upload-zone{padding:24px}.upload-zone>span:not([data-icon]),.upload-zone small{font-size:11px}.button-row button{min-height:44px;font-size:12px}.segmented button{min-height:39px;font-size:12px}.garment-grid{grid-template-columns:repeat(3,1fr)}.garment-grid button{height:86px;font-size:11px}.garment-grid svg{width:36px;height:36px}.swatches{gap:15px}.swatches button{width:32px;height:32px}.backgrounds button,.backgrounds label{height:40px;width:40px}.light-buttons button{min-height:70px;font-size:12px}select{font-size:16px}.custom-color{font-size:12px}.templates .template-grid button{height:95px}.privacy-note,.legal{font-size:11px}.scene-controls .section:first-child{margin-top:0;border:0}.checkbox{min-height:44px;font-size:12px}#toast{bottom:55px;width:max-content;max-width:90vw}.panel input[type=range]{height:32px}}@media(max-width:360px){.brand{font-size:17px}.brand img{width:24px;height:24px}.topbar{padding-left:12px;padding-right:12px}.view-buttons button{padding:7px 10px}.mode-switch{min-width:135px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.light-background .stage-label>span{color:#2b2b2b}.light-background .stage-label>span+span,.light-background .canvas-hint,.light-background .rotation-bar{color:#4a4a4a}.light-background .rotation-bar button{color:#333;border-color:#777}.button-row button[aria-pressed=true]{border-color:#a88aff;color:#d8c3ff}
.mode-switch button{white-space:nowrap}.mode-switch button:first-child{flex:1.7}@media(max-width:1000px){.header-actions>.icon-button{display:inline-flex;width:30px;min-height:40px}.mode-switch{min-width:168px}.mode-switch button{padding:6px 8px}}

.brand h1{font:inherit;margin:0}.statusbar>span:first-child{min-width:0}#status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1000px){.statusbar>span:first-child{max-width:44%}.statusbar>span:last-child{white-space:nowrap}}

@media(max-width:1000px){.canvas-toolbar{gap:7px}.mode-switch{min-width:136px}.history .icon-button{width:44px;min-height:44px}.canvas-toolbar>.icon-button{width:44px;min-height:44px}.zoom-tools button{width:44px;min-height:44px}.view-buttons button{min-height:44px}.rotation-bar button{width:44px;min-height:44px}.view-buttons{gap:2px}.view-buttons button{padding:7px 10px}}

.zoom-tools button[aria-pressed=true]{color:#d6c1ff;background:#43394e}.label-row h2,.label-row label,.label-row>span{font-size:13px}.segmented button,.light-buttons button,.view-buttons button{font-size:12px}.stage-label>span:first-child{font-size:13px}