
:root{--fs-bg:#f7f8f7;--fs-ink:#132126;--fs-muted:#657177;--fs-line:#dfe5e2;--fs-accent:#e5f94a;--fs-dark:#111b21;--fs-radius:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--fs-bg);color:var(--fs-ink);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:not-allowed}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #889d20;outline-offset:2px}
.fs-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#101a1e;color:#fff;padding:15px max(24px,calc((100vw - 1420px)/2));min-height:70px}.fs-logo{display:flex;gap:12px;align-items:center;font-size:13px;letter-spacing:.06em;white-space:nowrap}.fs-logo img{border-radius:7px}.fs-logo strong{font-weight:850}.fs-bar-links{display:flex;gap:25px;font-size:13px;font-weight:650;align-items:center}.fs-bar-links a:last-child{border:1px solid #586466;padding:8px 14px;border-radius:999px}
.fs-app{width:min(1470px,calc(100% - 44px));margin:0 auto}.fs-intro{display:flex;gap:30px;justify-content:space-between;align-items:end;padding:40px 0 31px}.fs-eyebrow,.fs-intro-aside strong,.fs-next small{font-size:11px;font-weight:850;letter-spacing:.17em}.fs-eyebrow span{display:inline-block;margin-left:12px;border:1px solid #bbc7bf;border-radius:2px;padding:4px 7px;font-size:9px}.fs-intro h1{font-size:clamp(38px,5.5vw,76px);letter-spacing:-.065em;line-height:1;margin:12px 0 15px;font-weight:850}.fs-intro p{margin:0;max-width:670px;font-size:15px;color:var(--fs-muted)}.fs-intro-aside{max-width:260px;display:grid;gap:9px;border-left:2px solid #1d2a2e;padding-left:18px}.fs-intro-aside small{color:var(--fs-muted);font-size:12px}
.fs-workspace{display:grid;grid-template-columns:minmax(215px,250px) minmax(380px,1fr) minmax(230px,270px);min-height:710px;background:#fff;border:1px solid var(--fs-line);box-shadow:0 24px 70px #1023210b;overflow:hidden;border-radius:18px}.fs-sidebar,.fs-inspector{padding:22px 19px;min-width:0;background:#fff}.fs-sidebar{border-right:1px solid var(--fs-line)}.fs-inspector{border-left:1px solid var(--fs-line)}.fs-panel-title{display:grid;gap:4px;margin-bottom:15px}.fs-panel-title span{font-size:10px;font-weight:800;letter-spacing:.17em;color:#83918c}.fs-panel-title strong{font-size:15px;letter-spacing:-.02em}.fs-rule{border:0;border-top:1px solid var(--fs-line);margin:23px 0}
.fs-garments{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.fs-garments button{min-width:0;display:grid;place-items:center;gap:4px;padding:9px 5px 7px;border:1px solid #e0e4e1;border-radius:10px;background:#f7f8f6;color:#263437;text-align:center;font-size:11px;font-weight:700}.fs-garments button:hover,.fs-garments button.active{border-color:#1b3434;background:#eaf3e4}.fs-garments .fs-garment-thumb{width:65px;height:59px;display:block;overflow:hidden}.fs-garments svg{width:100%;height:100%}.fs-swatches{display:flex;gap:9px;flex-wrap:wrap}.fs-swatches button{border:2px solid #fff;outline:1px solid #c6d0cc;width:27px;height:27px;border-radius:50%;background:var(--swatch);padding:0}.fs-swatches button.active{outline:3px solid #263e34}.fs-inline-color{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#627270;font-size:12px;font-weight:650;margin-top:14px}.fs-inline-color input{border:1px solid #bbc7c3;background:transparent;border-radius:6px;width:42px;height:32px;padding:2px}.fs-label{display:grid;gap:6px;font-size:12px;color:#586969;margin:13px 0}.fs-label input,.fs-label textarea{width:100%;min-width:0;background:#f9faf9;color:#1b282a;border:1px solid #d5deda;border-radius:9px;padding:10px 11px;outline-offset:2px}.fs-label textarea{resize:vertical;min-height:80px}
.fs-stage-panel{display:flex;flex-direction:column;min-width:0;background:#f5f6f4}.fs-stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 19px;background:#fff;border-bottom:1px solid var(--fs-line)}.fs-stage-top>div:first-child{display:grid;gap:3px}.fs-stage-top small{font-size:10px;letter-spacing:.17em;color:#88938d;font-weight:850}.fs-stage-top strong{font-size:14px}.fs-view-toggle{display:flex;background:#eff2ef;padding:3px;border-radius:8px}.fs-view-toggle button{background:transparent;border:0;padding:7px 13px;border-radius:6px;font-size:12px;font-weight:700}.fs-view-toggle button.active{background:#182a2c;color:#fff}.fs-stage-box{position:relative;flex:1;min-height:470px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 46%,#fff,#e9ece9 76%)}.fs-stage-box::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#8698910c 1px,transparent 1px),linear-gradient(90deg,#8698910c 1px,transparent 1px);background-size:27px 27px;pointer-events:none}.fs-stage-box>svg{width:min(90%,560px);height:auto;max-height:100%;aspect-ratio:1;overflow:visible;touch-action:none;position:relative;filter:drop-shadow(0 20px 24px #00000013)}.fs-stage-text{position:absolute;font-size:10px;letter-spacing:.12em;font-weight:800;color:#8d9996;z-index:1}.fs-stage-left{top:17px;left:17px}.fs-stage-right{top:17px;right:17px;text-align:right}.fs-stage-bottom{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#687673;font-weight:800;letter-spacing:.07em}.fs-stage-bottom span:last-child{text-transform:none;letter-spacing:0;font-weight:500}.fs-stage-toolbar{background:#fff;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px;border-top:1px solid var(--fs-line)}.fs-stage-toolbar button,.fs-small-actions button,.fs-secondary,.fs-save-actions button,.fs-next-actions button{border:1px solid #d0d9d4;background:#fff;color:#243433;border-radius:9px;padding:10px 12px;font-size:12px;font-weight:750}.fs-stage-toolbar button:hover,.fs-small-actions button:hover,.fs-secondary:hover,.fs-save-actions button:hover{background:#f1f6ea}.fs-status{min-height:35px;padding:9px 18px 11px;margin:0;font-size:12px;color:#556765;background:#f1f3f1;border-top:1px solid #e1e5e2}.fs-status.error{color:#9c3029}.fs-status.success{color:#146148}
.fs-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fs-actions button{display:flex;flex-direction:column;align-items:center;gap:9px;min-height:73px;padding:9px 3px;border:1px solid #dbe3db;background:#f5f7f4;border-radius:10px;font-size:20px;font-weight:800}.fs-actions button span{font-size:10px;font-weight:700}.fs-actions button:hover{background:#eaf5dc}.fs-slider{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:12px;color:#647470;margin:13px 0}.fs-slider span{color:#263d36;font-weight:750}.fs-slider input{grid-column:1/-1;width:100%;accent-color:#253e34}.fs-small-actions{display:flex;gap:8px}.fs-small-actions button{flex:1}.fs-layers{display:grid;gap:7px;max-height:200px;overflow:auto}.fs-layers button{display:flex;gap:8px;align-items:center;border:1px solid #dfe6e1;border-radius:9px;padding:10px 9px;width:100%;background:#f7f9f6;text-align:left;font-size:12px;overflow:hidden}.fs-layers button.active{background:#e6f3da;border-color:#9dc395}.fs-layers button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.fs-layers button small{color:#63766a}.fs-layers>p,.fs-projects>p{font-size:12px;color:#75817b}.fs-save-actions{display:flex;gap:8px}.fs-save-actions button{flex:1}.fs-save-actions .fs-primary{background:#15282b;color:#fff;border-color:#15282b}.fs-secondary{margin-top:9px;width:100%}.fs-projects{padding-top:9px;display:grid;gap:7px}.fs-projects[hidden],.fs-selected-controls[hidden],.fs-label[hidden]{display:none}.fs-projects button{display:block;width:100%;text-align:left;border:1px solid #dbe3df;background:#fff;padding:11px;border-radius:9px}.fs-projects button.active{border-color:#60865d;background:#eef6e9}.fs-projects button strong{display:block;font-size:12px}.fs-projects button small{display:block;color:#74827a;font-size:11px}
.fs-next{display:flex;align-items:center;justify-content:space-between;gap:35px;background:#141f22;color:#fff;border-radius:17px;padding:28px 35px;margin:24px 0 35px}.fs-next small{color:#c4d2b2}.fs-next h2{font-size:clamp(25px,3vw,38px);letter-spacing:-.05em;margin:6px 0}.fs-next p{max-width:680px;color:#b7c2bc;font-size:13px;margin:0}.fs-next-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:end;flex:0 0 auto}.fs-next-actions button{color:#fff;background:transparent;border-color:#596864;padding:13px}.fs-next-actions .fs-next-primary{background:var(--fs-accent);border-color:var(--fs-accent);color:#1a2a2a}.fs-footer{display:flex;justify-content:center;align-items:center;gap:22px;padding:26px;color:#6e7974;border-top:1px solid #dce4df;font-size:12px}
@media(max-width:1200px){.fs-workspace{grid-template-columns:210px minmax(290px,1fr) 235px}.fs-app{width:calc(100% - 28px)}.fs-stage-box{min-height:420px}.fs-sidebar,.fs-inspector{padding:18px 13px}.fs-stage-text{font-size:8px}}
@media(max-width:940px){.fs-workspace{grid-template-columns:1fr minmax(230px,310px)}.fs-stage-panel{grid-column:1;grid-row:1/3}.fs-sidebar{grid-column:2;grid-row:1;border-bottom:1px solid #dce4df;border-right:0}.fs-inspector{grid-column:2;grid-row:2;border-left:1px solid #dce4df}.fs-intro-aside{display:none}.fs-next{align-items:start;flex-direction:column}.fs-next-actions{justify-content:start}}
@media(max-width:680px){.fs-bar{min-height:60px;padding:12px 15px}.fs-logo{font-size:10px;gap:7px}.fs-logo img{width:29px;height:29px}.fs-bar-links{gap:10px;font-size:11px}.fs-bar-links a:nth-child(2){display:none}.fs-bar-links a:last-child{padding:7px 9px}.fs-app{width:100%}.fs-intro{padding:28px 19px 22px}.fs-intro h1{font-size:42px}.fs-intro p{font-size:13px}.fs-workspace{display:flex;flex-direction:column;border-radius:0;border-left:0;border-right:0}.fs-stage-panel{order:1}.fs-sidebar{order:2;border-top:1px solid var(--fs-line);border-bottom:1px solid var(--fs-line)}.fs-inspector{order:3;border-left:0}.fs-garments{grid-template-columns:repeat(4,1fr)}.fs-stage-top{padding:11px 13px}.fs-stage-box{min-height:360px}.fs-stage-box>svg{width:94%}.fs-stage-text{font-size:7px}.fs-stage-bottom{font-size:9px;bottom:10px}.fs-stage-toolbar button{font-size:11px;padding:8px 9px}.fs-actions{grid-template-columns:repeat(3,1fr)}.fs-intro-aside{display:none}.fs-sidebar,.fs-inspector{padding:21px 19px}.fs-next{margin:18px 14px 30px;padding:24px 22px}.fs-next-actions{width:100%}.fs-next-actions button{flex:1;white-space:normal}.fs-footer{flex-wrap:wrap}}

.fs-label select{width:100%;min-width:0;background:#f9faf9;color:#1b282a;border:1px solid #d5deda;border-radius:9px;padding:10px 11px;outline-offset:2px}
.fs-check{display:flex;align-items:flex-start;gap:9px;font-size:12px;font-weight:650;color:#4d645e;margin:15px 0}
.fs-check input{width:17px;height:17px;flex:0 0 17px;accent-color:#29482f}
.fs-spec-note{font-size:11px;line-height:1.5;color:#7b8883;margin:4px 0 2px}

/* 2027 Fashion Studio: accessible category picker, live 3D concept viewer */
.fs-categories{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 11px}
.fs-categories button{border:1px solid #d7dfd9;border-radius:999px;background:#f4f6f3;color:#2e463c;padding:6px 10px;font-size:10px;font-weight:750}
.fs-categories button.active{color:#f2fff1;background:#1b3732;border-color:#1b3732}
.fs-garments{max-height:340px;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-width:thin}
.fs-garments button{min-height:87px}
.fs-stage-switches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fs-mode-toggle button.active{background:#315a36;color:#fff}
.fs-stage-box>svg[hidden],.fs-stage-3d[hidden]{display:none!important}
.fs-stage-3d{width:100%;height:100%;position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#fs-3d-canvas{width:100%;height:100%;touch-action:none}
#fs-3d-canvas canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#fs-3d-canvas canvas:active{cursor:grabbing}
.fs-3d-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:#10252bcc;color:#fff;max-width:calc(100% - 26px);width:max-content;font-size:11px;text-align:center;pointer-events:none}
#fs-3d-error{position:absolute;inset:auto 20px 95px;padding:17px;text-align:center;border-radius:12px;background:#fffef5;color:#624b12;border:1px solid #cab86b;font-size:13px}
.fs-stage-box:has(.fs-stage-3d:not([hidden])) .fs-stage-bottom{z-index:4;pointer-events:none}
.fs-stage-box:has(.fs-stage-3d:not([hidden])) .fs-stage-text{z-index:4;pointer-events:none}
@media (max-width:1080px){.fs-stage-switches{gap:5px}.fs-view-toggle button{padding:7px 9px}}
@media (max-width:680px){.fs-stage-top{flex-wrap:wrap;align-items:flex-start}.fs-stage-switches{width:100%;justify-content:space-between}.fs-garments{max-height:230px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.fs-garments button{font-size:10px;min-height:72px}.fs-garments .fs-garment-thumb{height:46px;width:58px}.fs-3d-hint{font-size:9px;bottom:36px}}

.fs-garments button[hidden]{display:none!important}
.fs-stage-top .fs-view-toggle button{white-space:nowrap}

/* BTB Fashion Studio -- refined mobile-first creator workspace */
.fs-save-indicator{display:inline-flex;vertical-align:middle;margin-left:9px;padding:3px 7px;border-radius:999px;background:#edf2ef;color:#5a7066;font-size:9px;letter-spacing:.02em;text-transform:none;font-weight:800}
.fs-save-indicator.dirty{background:#fff1d6;color:#8d5b1d}
.fs-save-indicator.saved{background:#e5f2df;color:#2f663b}
.fs-lookbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:#fefefe;border-bottom:1px solid var(--fs-line)}
.fs-lookbar>span{font-size:9px;font-weight:850;letter-spacing:.13em;color:#72817a;margin-right:7px}
.fs-lookbar button{background:#f5f7f5;border:1px solid #d9e4dc;color:#233c34;border-radius:100px;padding:8px 13px;font-size:11px;font-weight:800;transition:background .15s,border-color .15s,transform .15s}
.fs-lookbar button:hover,.fs-lookbar button:focus-visible{background:#e8f6d7;border-color:#86b986;transform:translateY(-1px)}
.fs-lookbar button:active{transform:scale(.98)}
.fs-workspace{box-shadow:0 16px 60px #16322a11}
.fs-garments button{transition:background .16s,box-shadow .16s,border-color .16s,transform .16s}
.fs-garments button.active{box-shadow:0 0 0 1px #2a6b4b;background:#eaf6e9;color:#1d4030}
.fs-garments button:hover{transform:translateY(-1px)}
.fs-stage-top{gap:16px}
.fs-stage-toolbar button{min-height:38px}
.fs-stage-toolbar button:hover{border-color:#8fae9c;color:#133a24}
.fs-stage-box{background:radial-gradient(ellipse at 50% 33%,#fff 2%,#f6f8f5 42%,#e8eeea 100%)}
.fs-stage-box>svg{filter:drop-shadow(0 18px 21px #213a3321)}
.fs-stage-text{pointer-events:none}
.fs-stage-3d{background:radial-gradient(ellipse at 50% 33%,#fff 2%,#edf5f1 80%)}
.fs-actions button{transition:background .15s,transform .15s}
.fs-actions button:hover{transform:translateY(-2px);background:#edf8e3}
.fs-save-actions .fs-primary{background:#203c34;color:white}
.fs-save-actions .fs-primary:hover{background:#305945;color:white}
@media(max-width:940px){
 .fs-lookbar{justify-content:flex-start;gap:6px}
 .fs-lookbar button{padding:8px 10px}
}
@media(max-width:680px){
 .fs-workspace{box-shadow:none}
 .fs-lookbar{padding:9px 11px;gap:6px;justify-content:center}
 .fs-lookbar>span{flex-basis:100%;text-align:center;margin:0}
 .fs-lookbar button{flex:1;min-width:0;padding:9px 5px;font-size:10px}
 .fs-stage-box{min-height:360px}
 .fs-stage-panel{order:1}
 .fs-sidebar{order:2}
 .fs-inspector{order:3}
 .fs-stage-top{padding:11px 14px}
 .fs-stage-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
 .fs-stage-toolbar button{min-height:42px;width:100%}
 .fs-stage-bottom{gap:8px}
 .fs-stage-bottom span:last-child{max-width:52%;text-align:right}
 .fs-actions button{min-height:68px}
 .fs-save-actions{gap:10px}
 .fs-save-actions button{min-height:44px}
 .fs-stage-text.fs-stage-right{right:10px;max-width:125px}
}
@media(prefers-reduced-motion:reduce){
 .fs-lookbar button,.fs-garments button,.fs-actions button{transition:none}
}

.fs-inline-text{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#edf3eb;border-top:1px solid #d7e4d8;border-bottom:1px solid #d7e4d8}
.fs-inline-text[hidden]{display:none!important}
.fs-inline-text label{color:#365548;font-size:9px;font-weight:850;letter-spacing:.12em;white-space:nowrap}
.fs-inline-text input{flex:1;min-width:0;max-width:320px;border:1px solid #c5d7ca;background:white;border-radius:9px;padding:10px 11px;color:#172b24;font-weight:700}
.fs-inline-text button{border:0;border-radius:9px;padding:10px 15px;white-space:nowrap;background:#223b30;color:#fff;font-size:12px;font-weight:800;min-height:40px}
.fs-inline-text button:hover{background:#32563e}
@media(max-width:680px){
 .fs-inline-text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:10px 13px}
 .fs-inline-text label{grid-column:1 / -1}
 .fs-inline-text input{width:100%}
}
