#clothes{max-width:1500px;margin:auto;color:#342b47}.clothesHeading,.clothesSectionHeading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px}.clothesHeading h1{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;margin:8px 0}.clothesHeading p,.clothesSectionHeading p{color:#746782;line-height:1.5;margin:6px 0}.clothesHeading button,.clothesSectionHeading button,.clothesPublish button{background:#7053e8;color:#fff;border:0;border-radius:12px;padding:12px 18px;font-weight:700}.clothesTypeTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.clothesTypeTabs button,.paintToolGrid button,.clothesAngles button,.paintHistory button{border:1px solid #dfd7eb;background:white;color:#59446c;border-radius:10px;padding:10px 12px;font-weight:650;min-height:42px}.clothesTypeTabs button[aria-pressed=true],.paintToolGrid button[aria-pressed=true]{background:#7053e8;color:white;border-color:#7053e8}.clothesStudio{display:grid;grid-template-columns:210px minmax(300px,1fr) 260px;gap:16px;align-items:start}.paintTools,.paintDetail{background:white;border:1px solid #e4ddeb;border-radius:18px;padding:18px}.paintTools h2,.paintDetail h2{font-size:17px;margin:0 0 16px}.paintTools label,.paintDetail label{display:grid;gap:7px;margin:14px 0;color:#6b5b7b;font-size:13px;font-weight:650}.paintTools input,.paintDetail input,.paintTools select,.paintDetail select,.communityClothesTools input,.communityClothesTools select{min-height:40px;width:100%;box-sizing:border-box;background:#faf9fd;border:1px solid #dcd4e8;border-radius:9px;padding:8px;color:#342846}.paintTools input[type=color]{height:42px;padding:3px}.paintTools input[type=range]{padding:0;accent-color:#7053e8}.paintTools button{font-size:12px}.paintToolGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.paintHistory{display:flex;gap:6px;margin:14px 0}.paintHistory button{flex:1}.paintTools>button{width:100%;min-height:38px;border-radius:8px;border:1px solid #dfd7eb;background:#f6f1fc;color:#59446c}.paintUpload{overflow:hidden}.paintTools input[type=file]{font-size:11px}.clothesCanvasWrap{position:relative;background:radial-gradient(ellipse at 50% 35%,#fff,#e8e1f5);border:1px solid #dfd7eb;border-radius:22px;overflow:hidden;min-height:540px}.clothesCanvasWrap>canvas{display:block;width:100%;height:540px;touch-action:none}.clothes3DStatus{position:absolute;inset:40% 8% auto;text-align:center;padding:15px;background:#ffffffe8;border-radius:10px;color:#645075}.clothes3DStatus[hidden]{display:none}.clothesAngles{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:12px}.clothesAngles button{font-size:12px}.paintHint,.paintDetail p{font-size:12px;color:#7d6f8b;line-height:1.55}.paintDetail>canvas{display:block;width:100%;aspect-ratio:1;touch-action:none;border-radius:10px;border:1px solid #dcd4e8;background:#f3f0fa;cursor:crosshair}.clothesPublish{border-top:1px solid #e5deed;margin-top:20px;padding-top:8px}.clothesPublish button{display:block;width:100%;margin:8px 0}.clothesPublish button:first-of-type{background:#f0eafa;color:#6443a0;border:1px solid #dacfec}.clothesPublish p[role=status]{color:#3f7250;overflow-wrap:anywhere}.clothesPublish p.error{color:#a92747}.clothesMine{margin-top:38px}.clothesGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}.clothesCard{background:white;border:1px solid #e2dbea;border-radius:16px;overflow:hidden;box-shadow:0 7px 20px #32214a05}.clothesCardPreview{height:210px;background:radial-gradient(ellipse,#f6f2ff,#e8e0f1);display:grid;place-items:center}.clothesCardPreview img{width:100%;height:100%;object-fit:contain}.clothesCardPreview svg{width:50px;height:50px;color:#9482b0}.clothesCardContent{padding:15px}.clothesCard h3{font-size:17px;margin:7px 0}.clothesKind{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#8b75a2;font-weight:750}.clothesCreator{font-size:12px;color:#7b6a89;margin:6px 0}.clothesPrice{font-size:14px;color:#60429c}.clothesCardContent>small{display:block;margin-top:8px;color:#7b6a89;font-size:11px}.clothesCardActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.clothesCardActions button{background:#f3edfa;color:#674d84;border:1px solid #e1d7ef;border-radius:9px;min-height:38px;padding:8px 10px;font-size:12px;font-weight:700;flex:1}.clothesCardActions button.primary{background:#7053e8;color:white}.communityClothesTools{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}.communityClothesTools label{display:grid;gap:6px;font-size:12px;color:#746782;flex:1;min-width:180px}.communityClothesTools label:last-child{max-width:260px}#communityClothesPanel[hidden]{display:none}#communityClothesPanel{margin-top:24px}.communityWardrobe{margin-top:28px;padding:22px;background:#fff;border:1px solid #e4ddeb;border-radius:18px}.communityWardrobe .clothesSectionHeading{margin-bottom:18px}.clothesEmpty{padding:18px;color:#7d6f8b;grid-column:1/-1}.adminClothesRow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px;border:1px solid #e1d7ed;border-radius:12px;margin:8px 0}.adminClothesRow span{font-size:12px;color:#796688;flex:1}.adminClothesRow button{border:1px solid #d9cbea;background:#eee6f9;color:#624781;border-radius:9px;padding:10px}#clothes button:disabled{opacity:.5;cursor:wait}#paintDetailCanvas{image-rendering:auto}#clothesMineMore,#clothesMarketMore{margin:20px auto;display:block;border:1px solid #d8cbed;background:white;color:#654c82;border-radius:10px;padding:12px 24px}#clothesMineMore[hidden],#clothesMarketMore[hidden]{display:none}
@media(max-width:1120px){.clothesStudio{grid-template-columns:180px minmax(250px,1fr)}.paintDetail{grid-column:1/-1;display:grid;grid-template-columns:1fr 260px;gap:0 25px}.paintDetail>canvas{grid-column:2;grid-row:1/6}.paintDetail>.clothesPublish{grid-column:1/-1}}@media(max-width:720px){.clothesHeading,.clothesSectionHeading{align-items:flex-start;flex-wrap:wrap;gap:12px}.clothesStudio{grid-template-columns:1fr}.paintTools{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.paintTools>h2,.paintToolGrid{grid-column:1/-1}.paintToolGrid{grid-template-columns:repeat(4,1fr)}.paintTools label{margin:6px 0}.paintTools>button{align-self:center}.clothesCanvasWrap{min-height:430px}.clothesCanvasWrap>canvas{height:430px}.paintDetail{display:block}.paintDetail>canvas{max-width:320px;margin:auto}.clothesGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.clothesCardPreview{height:180px}.clothesCardContent{padding:11px}.clothesCard h3{font-size:15px}.communityWardrobe{padding:15px}.communityClothesTools label:last-child{max-width:none}}

.paintTools h2,.paintDetail h2,.communityWardrobe h2,.clothesCard h3{color:#322642}.clothesCardContent,.communityWardrobe{color:#322642}

/* Simple paint workspace: both sides remain visible together. */
.clothesSimple{grid-template-columns:minmax(380px,1.15fr) minmax(280px,.85fr);gap:22px}.clothesSimple h2{color:#352547;font-size:20px;margin:0 0 14px}.simplePaint{background:#fff;border-radius:20px;padding:18px}.simpleTools.paintTools{padding:0;border:0}.simpleTools .paintToolGrid{grid-template-columns:repeat(4,1fr)}.simpleTools .paintToolGrid button{font-size:15px;min-height:52px}.simpleColors{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:16px 0}.simpleColors>button{width:36px;height:36px;border:2px solid #d7cfdf;border-radius:50%;padding:0}.simpleColors>button[aria-pressed=true]{outline:3px solid #7053e8;outline-offset:2px}.simpleColors label{display:flex;align-items:center;gap:8px;margin:0}.simpleColors input[type=color]{width:48px;height:38px}.simpleBrush{display:flex;gap:16px;align-items:center}.simpleBrush>label{flex:1}.simpleBrush .paintHistory{margin:0}.simpleMore{margin:10px 0}.simpleMore summary,.simplePublish summary{padding:12px;border-radius:10px;background:#f0ebf8;color:#624587;font-weight:700;cursor:pointer}.simpleSides{display:grid;grid-template-columns:1fr 1fr;gap:12px}.simpleSide{background:#faf9fd;border:1px solid #e2daef;border-radius:14px;padding:10px}.simpleSide h2{text-align:center;font-size:18px;margin-bottom:5px}.simpleSide canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.simpleTip{font-size:14px;color:#8e84a0;line-height:1.5}.simplePaint>.simpleTip{color:#726183}.clothesSimple .clothesCanvasWrap{min-height:440px}.clothesSimple .clothesCanvasWrap>canvas{height:440px}.simpleRotate{display:grid;gap:8px;color:#c5b9dc;font-size:14px;font-weight:700}.simpleRotate input{width:100%;accent-color:#a990ff}.simplePublish{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;background:#fff;border-radius:18px;padding:20px;margin:0;border:0;color:#44304f}.simplePublish h2,.simplePublish p[role=status]{grid-column:1/-1}.simplePublish label{display:grid;gap:7px;font-weight:700}.simplePublish input{padding:12px;border:1px solid #d9cdeb;border-radius:10px}.simplePublish>button{margin:0;align-self:end;min-height:46px}.simplePublish details{grid-column:1/-1}.simplePublish details input{margin:10px 0}.simpleTools label[hidden]{display:none}.clothesSimple select[hidden]{display:none}
@media(max-width:900px){.clothesSimple{grid-template-columns:1fr}.clothesSimple .clothesStage{grid-row:1}.clothesSimple .clothesCanvasWrap{min-height:300px}.clothesSimple .clothesCanvasWrap>canvas{height:300px}.simplePublish{grid-template-columns:1fr}.simpleTools .paintToolGrid button{padding:8px;font-size:13px}.simpleBrush{flex-wrap:wrap}.simpleBrush>label{min-width:160px}.simpleSides{gap:8px}.simplePaint{padding:12px}}

.clothesSimple .clothesStage>h2{color:#eee8fa}.clothesSimple .clothesStage{position:sticky;top:100px}.simpleTools .paintToolGrid button{min-height:46px}.simpleColors{margin:12px 0}.simpleBrush label{margin:6px 0}.simpleMore{margin:8px 0}.clothesHeading{margin-bottom:16px}@media(max-width:900px){.clothesSimple .clothesStage{position:static}}

#clothes button svg{width:20px;height:20px;flex:0 0 20px;vertical-align:middle}#clothes .clothesTypeTabs button,#clothes .paintToolGrid button,#clothes .paintHistory button,#clothesNew,#clothesSave{display:inline-flex;align-items:center;justify-content:center;gap:7px}.simpleColors>button{box-sizing:border-box;flex:0 0 36px;width:36px;min-width:36px;height:36px;min-height:36px;max-height:36px;aspect-ratio:1;border-radius:50%}.simpleColors label{flex:0 0 auto;min-width:0}.simpleColors input[type=color]{box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;height:38px;max-height:38px}.paintViewport{overflow:auto;max-height:350px;overscroll-behavior:contain;border-radius:8px}.paintViewport canvas{max-width:none!important;display:block;height:auto;touch-action:none}.paintZoomControls{display:flex;align-items:center;gap:12px;margin:12px 0;color:#624587;font-size:13px}.paintZoomControls label{display:flex;align-items:center;gap:10px;flex:1;flex-wrap:wrap}.paintZoomControls input{min-width:100px;flex:1;accent-color:#7053e8}.paintZoomControls button{border:1px solid #dfd7eb;border-radius:9px;background:#f2edf8;color:#624587;padding:9px}.paintZoomControls output{font-variant-numeric:tabular-nums;min-width:40px}.simpleSide{min-width:0}.simplePaint{min-width:0}@media(max-width:520px){.simpleTools .paintToolGrid{grid-template-columns:repeat(2,1fr)}.simpleColors{gap:7px}.simpleColors>button{flex-basis:32px;width:32px;min-width:32px;height:32px;min-height:32px;max-height:32px}.paintZoomControls{gap:7px;flex-wrap:wrap}.paintViewport{max-height:250px}.simpleSide{padding:6px}.simpleSides{gap:7px}}

.simpleLateralSides{margin-top:12px}.simpleSide h2{font-size:16px}.clothesSimple .clothesStage>h2{color:#eee8fa}

/* Match the site's dark theme throughout the clothing editor. */
#clothes{color:#e9edf7}#clothes .clothesHeading p,#clothes .clothesSectionHeading p,#clothes .simpleTip{color:#a3afc5}#clothes .simplePaint,#clothes .simplePublish,#clothes .clothesCard{background:#151e2e;border:1px solid #2d3950;color:#e5eaf4}#clothes .simpleTools{background:transparent;color:#e5eaf4}#clothes .simpleSide{background:#101826;border-color:#2b3851}#clothes h2,#clothes .clothesCard h3{color:#e9edf7}#clothes .clothesTypeTabs button,#clothes .paintToolGrid button,#clothes .paintHistory button,#paintZoomReset{background:#202b3f;border-color:#36445f;color:#e4e9f4}#clothes .clothesTypeTabs button[aria-pressed=true],#clothes .paintToolGrid button[aria-pressed=true]{background:#7053e8;border-color:#9c85ff;color:#fff}#clothes .simpleMore summary,#clothes .simplePublish summary{background:#222b41;color:#cfbfff}#clothes .paintTools label,#clothes .simplePublish label,#clothes .paintZoomControls{color:#bac6da}#clothes input:not([type=range]):not([type=color]),#clothes select{background:#0e1726;border:1px solid #37465f;color:#eef2fb}#clothes input[type=color]{background:#202b3f;border-color:#3d4a62}#clothes input[type=range]{background:transparent;border:0}#clothes .clothesCanvasWrap{background:radial-gradient(ellipse at 50% 35%,#28364e,#111a2a);border-color:#35415c}#clothes .clothesAngles button{background:#222e43;border-color:#3a4965;color:#dfe7f6}#clothes .simplePublish>button{background:#7053e8;color:white;border:0}#clothes .clothesKind,#clothes .clothesCreator,#clothes .clothesPrice,#clothes .clothesCardContent>small{color:#b9aad6}#clothes .clothesEmpty{color:#a7b2c8}#clothes .clothesCardContent{color:#e9edf7}#clothes .clothesCardPreview{background:radial-gradient(ellipse,#28364d,#182335)}#clothes .clothesPublish p[role=status]{color:#a9e2bc}#clothes .clothesPublish p.error{color:#ff9eb6}#clothes .clothes3DStatus{background:#172238ee;color:#e9e1ff}#clothes .simpleSide canvas{background:transparent}#clothes .simpleColors>button{border-color:#697894}

/* Editor layout: explicit areas keep preview and publishing in separate rows. */
#clothes{width:100%;min-width:0;box-sizing:border-box;overflow-wrap:anywhere}
#clothes *{box-sizing:border-box}
#clothes .clothesSimple{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr)!important;grid-template-areas:"paint preview" "save save";align-items:start;gap:20px}
#clothes .simplePaint{grid-area:paint;min-width:0;width:100%}
#clothes .clothesStage{grid-area:preview;position:static!important;top:auto!important;grid-row:1!important;width:100%;min-width:0;align-self:start}
#clothes .simplePublish{grid-area:save;position:static!important;grid-column:1/-1!important;width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:14px}
#clothes .simplePublish>*{min-width:0;max-width:100%}
#clothes .simplePublish input{width:100%;box-sizing:border-box}
#clothes .clothesCanvasWrap{min-height:0!important;height:360px}
#clothes .clothesCanvasWrap>canvas{height:100%!important;width:100%!important}
#clothes .simpleSides{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
#clothes .paintViewport{max-height:none;overflow:auto;min-width:0}
#clothes .simpleSide canvas{width:100%;height:auto}
#clothes .extraPaintSides{margin-top:12px;border:1px solid #34455e;border-radius:12px;padding:10px}
#clothes .extraPaintSides summary{cursor:pointer;padding:8px;color:#e6edff;font-weight:700}
#clothes .creationChoices{padding:16px;border:1px solid #34455e;border-radius:16px;background:#152031;margin-bottom:20px}
#clothes .creationChoices h2{font-size:18px;margin:0 0 12px;color:#f2f5ff}
#clothes .creationChoices p{font-size:14px;color:#b9c7dc}
#clothes .creationChoiceGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#clothes .creationChoiceGrid button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px;background:#263550;color:#f2f5ff;border:1px solid #50607d;border-radius:10px;font-weight:700}
#clothes .paintZoomControls{flex-wrap:wrap}
#clothes .paintZoomControls label{min-width:0}
#clothes .clothesHeading{flex-wrap:wrap}
@media(max-width:1200px){#clothes .clothesSimple{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"preview" "paint" "save"}#clothes .clothesCanvasWrap{height:280px}#clothes .creationChoiceGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){#clothes .creationChoiceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}#clothes .simpleSides{gap:8px}#clothes .simpleSide{padding:6px}#clothes .simpleBrush{display:grid;grid-template-columns:1fr}#clothes .clothesTypeTabs button{flex:1 1 42%}#clothes .simplePublish{padding:14px}#clothes .clothesCanvasWrap{height:260px}}
