@font-face{font-family:ClothingScript;src:url('/fonts/346ecb58b3f35014.ttf') format('truetype');font-display:swap}
#page-clothing{padding:0 18px 10px;height:calc(100dvh - var(--topbar));min-height:650px;--c-border:#3b2a49;--c-muted:#9988a9;--c-bg:#15101e;--c-accent:#b388ef}
body[data-page=clothing] #page-clothing{display:flex;flex-direction:column}#page-clothing [hidden]{display:none!important}
.c-heading{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px}.c-heading h1{font-size:23px;letter-spacing:-.8px;margin:7px 0 0;white-space:nowrap}.c-heading h1 small{font-size:10px;letter-spacing:0;font-weight:400;color:var(--c-muted);margin-left:12px}.c-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#b994df}
.c-actions,.c-segment,.c-add{display:flex;align-items:center;gap:5px}.c-segment{background:#100c16;padding:3px;border:1px solid var(--c-border);border-radius:8px}.c-segment button{border:0!important;background:transparent!important}.c-segment button[aria-pressed=true]{background:#463156!important;color:#f2dfff!important}
#page-clothing button{font:inherit;font-size:10px;font-weight:600;color:#cdbbdf;cursor:pointer;background:#241b30;border:1px solid #443152;border-radius:6px;padding:8px 10px;transition:background .15s,border-color .15s;white-space:nowrap}
#page-clothing button:hover{background:#392849;border-color:#966bc3}#page-clothing button:disabled{opacity:.4;cursor:default}#page-clothing button[aria-pressed=true],#page-clothing button.c-selected{background:#55366e;color:#f1dfff;border-color:#bc91e4}#page-clothing .c-primary{background:#a272df;color:#fff;border-color:#b98ae8}#page-clothing .c-accent{color:#e8d0ff;border-color:#8056a2;background:#382147}
#page-clothing input:not([type=checkbox]):not([type=range]):not([type=color]),#page-clothing textarea,#page-clothing select{font:inherit;font-size:11px;background:#100c17;color:#e8ddef;border:1px solid #3b2b49;border-radius:5px;padding:9px;min-width:0;width:100%;box-sizing:border-box;outline:none}
#page-clothing input:focus,#page-clothing textarea:focus,#page-clothing select:focus{border-color:#b78cdb!important;box-shadow:0 0 0 2px #b78cdb18}#page-clothing input[type=range]{accent-color:#b68ce2;min-width:0;width:100%;height:15px}#page-clothing input[type=checkbox]{accent-color:#b68ce2}#page-clothing input[type=color]{padding:0;border:0;background:transparent;height:28px;min-width:35px;width:35px;cursor:pointer}
.c-workspace{flex:1;min-height:0;display:grid;grid-template-columns:204px minmax(0,1fr) 242px;border:1px solid var(--c-border);border-radius:12px;overflow:hidden;background:#100d17}.c-panel{min-width:0;background:var(--c-bg);display:flex;flex-direction:column;min-height:0}.c-library{border-right:1px solid var(--c-border)}.c-inspector{border-left:1px solid var(--c-border)}
.c-panel-title{padding:14px 12px;font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#d4bce8;font-weight:700;display:flex;align-items:center;justify-content:space-between;flex:none;border-bottom:1px solid #382744}.c-panel-title>span{font-size:8px;background:#372642;border-radius:4px;padding:3px 5px;color:#b59bc7}
#page-clothing .c-drop{margin:12px;border:1px dashed #795394;background:#21172d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;white-space:normal;min-height:105px;flex:none}.c-drop svg{width:26px;height:26px;color:#b58bd7}.c-drop b{font-size:12px}.c-drop small{font-size:9px;font-weight:400;color:#a18bad;line-height:1.5}.c-dragover{outline:2px solid #c091f0}
.c-library-scroll{overflow:auto;flex:1;min-height:0;padding:0 12px}.c-genders button{flex:1}.c-categories{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0}#page-clothing .c-categories button{padding:8px 6px;font-size:9px;display:flex;align-items:center;justify-content:space-between;gap:4px}.c-categories small{color:#9c82af;font-size:8px}.c-search{display:flex;align-items:center;background:#100c17;border:1px solid var(--c-border);border-radius:6px;padding-left:8px;gap:5px}.c-search input{border:0!important;padding-left:2px!important}.c-search>span{font-size:18px;color:#a386b5}.c-count{font-size:9px;color:#a88fba;margin:13px 0 9px}.c-catalog{display:grid;grid-template-columns:1fr 1fr;gap:7px}#page-clothing .c-catalog button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 4px;background:#1c1427;white-space:normal}.c-catalog svg{width:33px;height:33px;color:#9172aa}.c-catalog b{font-size:9px}.c-catalog small{font-size:8px;color:#947ea5;font-weight:400}.c-muted{font-size:10px;line-height:1.65;color:var(--c-muted);font-weight:400}.c-library .c-muted{font-size:9px}
.c-variants{padding:12px;border-top:1px solid var(--c-border);background:#1b1325;max-height:140px;overflow:auto;flex:none}.c-variants>b{font-size:10px;font-weight:600;color:#bca2ce}.c-variants>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}#page-clothing .c-variants button{padding:6px;min-width:25px;font-size:9px}.c-variants select{margin-top:7px}
.c-center{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;min-height:0;background:#0d0b13;width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box}.c-center[data-view="3d"]{grid-template-columns:1fr}.c-center[data-view="3d"] .c-sheet{display:none}.c-center[data-view=sheet]{grid-template-columns:1fr}.c-center[data-view=sheet] .c-model{display:none}.c-model,.c-sheet{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.c-model{background:radial-gradient(ellipse at 55% 40%,#302138 0,#17111f 55%,#100c17 100%);border-right:1px solid #382744}.c-canvas-bar{height:45px;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 9px;background:#140f1be6;border-bottom:1px solid #35243f;flex:none;position:relative;z-index:2}.c-dot{font-size:8px;letter-spacing:1px;font-weight:700;color:#b397c6;white-space:nowrap}.c-dot::before{content:'•';color:#be8fec;margin-right:5px}.c-dot small{font-size:8px;color:#796586;letter-spacing:0}.c-canvas-bar>div{display:flex;gap:4px}#page-clothing .c-canvas-bar button{font-size:8px;padding:5px 6px}
#c-viewer{position:absolute;inset:45px 0 0;padding-bottom:40px;transition:filter .2s}#c-viewer canvas{width:100%;height:100%;display:block;touch-action:none}#c-viewer.c-night{filter:brightness(.35)}.c-camera{position:absolute;bottom:31px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border:1px solid #5f3f73;border-radius:8px;background:#22162ee0;z-index:2}#page-clothing .c-camera button{padding:5px 6px;font-size:8px}.c-model-hint{position:absolute;bottom:8px;left:5px;right:5px;text-align:center;font-size:8px;color:#8d719e;margin:0;pointer-events:none}
.c-sheet-stage{flex:1;min-height:0;position:relative;background-color:#0d0b13;background-image:radial-gradient(#3c2c4b55 1px,transparent 1px);background-size:18px 18px}.c-sheet-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}.c-sheet-hint{font-size:8px;text-align:center;color:#826d94;line-height:1.5;padding:8px;background:#120d18;border-top:1px solid #30213c;flex:none}.c-toolrail{position:absolute;z-index:3;left:8px;top:10px;display:flex;flex-direction:column;gap:4px;background:#1b1425ef;border:1px solid #4a345c;border-radius:8px;padding:5px}#page-clothing .c-toolrail button{width:29px;height:29px;font-size:15px;padding:0;border-color:transparent;background:transparent}#c-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;pointer-events:none;color:#755c8b}#c-empty b{font-size:15px}#c-empty span{font-size:10px}
.c-inspector-scroll{overflow:auto;min-height:0;flex:1;padding:12px}.c-add button{flex:1;min-width:0;padding:8px 5px!important}.c-wide{width:100%;margin:8px 0 0}#c-psd{font-size:9px}.c-layers{margin-top:12px}.c-layer{display:flex;border:1px solid #3b2a49;border-radius:5px;margin:5px 0;background:#1b1326;overflow:hidden}.c-layer.c-selected{border-color:#b488d9;background:#342145}#page-clothing .c-layer button{background:transparent;border:0;border-radius:0;padding:9px 6px;min-width:0}.c-layer button:last-child{flex:1;display:flex;align-items:center;gap:8px;text-align:left}.c-layer b{font-size:10px;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.c-layer small{font-size:8px;font-weight:400;color:#a38cb4}.c-layer button span{font-size:13px;color:#bd97d8}.c-no-layer{text-align:center;padding:12px 0}
.c-section{margin-top:15px;padding-top:15px;border-top:1px solid #35263f}.c-section h2{font-size:10px;color:#d3b8e5;font-weight:700;margin:0 0 13px;letter-spacing:.4px}.c-section>label,.c-text-settings>label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#ae97bf;margin:9px 0}.c-section label>select,.c-text-settings label>input:not([type=color]){width:62%!important}.c-color-field{display:flex;align-items:center;gap:7px;font-size:10px;color:#a78eb9}.c-color-field>input:last-child{width:75px!important;font-size:10px!important;padding:6px!important}.c-color-field input[type=color]{margin-left:auto}.c-control{display:grid;grid-template-columns:1fr 48px;align-items:center;gap:7px;margin:12px 0}.c-control label,.c-control output{font-size:10px;color:#b69bc8}.c-control output{text-align:right;font-size:9px}.c-control input[type=number]{padding:5px!important;font-size:10px!important}.c-control input[type=range]{grid-column:1/-1}.c-check{display:flex;align-items:center;justify-content:flex-start!important;gap:5px!important;font-size:9px!important}.c-jersey{display:grid;grid-template-columns:1fr 48px;gap:5px}.c-jersey input{font-size:10px!important}.c-transform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.c-transform label{font-size:9px;color:#a990bc;display:flex;flex-direction:column;gap:4px}.c-opacity{display:grid!important;grid-template-columns:auto 1fr 33px;gap:8px!important}.c-opacity output{font-size:9px;text-align:right}.c-text-settings{margin-top:8px}.c-status{height:27px;flex:none;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#bba3ce;gap:10px}.c-status>span:last-child{color:#695579;font-size:7px;letter-spacing:1px}.c-error{color:#f5a7b5}
#page-clothing.c-theatre{position:fixed;inset:0;height:100dvh;z-index:1000;background:#0e0a14;padding:0 14px 8px;min-height:0}#page-clothing.c-theatre .c-workspace{grid-template-columns:225px minmax(0,1fr) 275px}#page-clothing.c-theatre .c-heading{height:65px}
@media(min-width:1700px){.c-workspace{grid-template-columns:238px minmax(0,1fr) 275px}.c-heading h1{font-size:25px}#page-clothing button{font-size:11px}.c-inspector-scroll{padding:15px}.c-canvas-bar>div button{font-size:9px!important}}
@media(max-width:1350px){.c-heading h1 small{display:none}.c-heading{height:68px}.c-actions{gap:4px}.c-actions>button{font-size:9px!important;padding:8px!important}.c-workspace{grid-template-columns:180px minmax(0,1fr) 212px}.c-canvas-bar{height:62px;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding:7px}.c-canvas-bar>div{width:100%}#c-viewer{top:62px}.c-canvas-bar>div button{flex:1;padding:4px!important;font-size:7px!important}.c-library-scroll,.c-inspector-scroll{padding:9px}.c-camera button{padding:4px!important;font-size:7px!important}.c-heading .eyebrow{font-size:8px}.c-heading h1{font-size:21px}.c-variants{padding:9px}}
@media(max-width:950px){#page-clothing{height:auto;min-height:0;padding:0 10px 12px}.c-heading{height:auto;min-height:92px;flex-wrap:wrap;padding:12px 0}.c-workspace{grid-template-columns:155px minmax(0,1fr);min-height:900px}.c-inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--c-border);max-height:420px}.c-inspector-scroll{display:grid;grid-template-columns:1fr 1fr;gap:15px}.c-center{min-height:600px}.c-center[data-view=split]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.c-center[data-view=split] .c-model{border-bottom:1px solid var(--c-border)}.c-status>span:last-child{display:none}.c-heading h1{font-size:20px}.c-layer-settings{grid-column:1/-1}}

/* The wardrobe opens over the stage, keeping categories and tools in reach. */
.c-center{position:relative}.c-library-label{font-size:8px;letter-spacing:1.1px;color:#b995d7;margin:13px 0 9px}.c-categories{gap:5px!important;margin:0 0 13px!important}#page-clothing .c-categories button{display:flex;align-items:center;gap:5px;min-width:0;padding:8px 6px;font-size:9px;text-align:left}.c-categories button svg{width:15px;height:15px;flex:none;color:#c69aea}.c-categories button span{overflow:hidden;text-overflow:ellipsis;flex:1}.c-categories button small{font:9px monospace;color:#af91c6;flex:none}.c-current{border:1px solid #4e365e;border-radius:7px;padding:10px;margin-top:13px;display:flex;flex-direction:column;gap:6px}.c-current:empty{display:none}.c-current>small{font-size:7px;letter-spacing:1px;color:#9875b0}.c-current>b{font-size:11px}.c-current>span{font-size:8px;color:#ae93c1}.c-gallery{position:absolute;inset:0;z-index:8;background:#100d17;display:flex;flex-direction:column;min-height:0}.c-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 18px 13px;border-bottom:1px solid #3b2a49;background:#191220;flex:none}.c-gallery-heading .eyebrow{font-size:7px;letter-spacing:1.6px;color:#ad80d1}.c-gallery-heading h2{font-size:18px;font-weight:650;letter-spacing:-.4px;margin:5px 0}.c-gallery-heading p{font:10px monospace;color:#a68cb9;margin:6px 0 0}#page-clothing #c-gallery-close{align-self:flex-start;font-size:15px;padding:5px 8px;background:#251b30}.c-gallery-filters{display:flex;gap:8px;padding:11px 16px;background:#15101d;border-bottom:1px solid #34233f;flex:none}.c-gallery-filters .c-search{flex:1;margin:0;min-width:80px}.c-gallery-filters select{width:190px!important;max-width:45%;font-size:10px!important}.c-gallery-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:14px 16px}.c-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;align-content:start}#page-clothing .c-garment-card{padding:0;text-align:left;border-radius:8px;white-space:normal;overflow:hidden;background:#1b1723;border:1px solid #39313f;min-width:0;transition:border-color .15s,background .15s}#page-clothing .c-garment-card:hover{background:#272030;border-color:#ba8be4}#page-clothing .c-garment-card.c-selected{border-color:#c394f0;background:#342440}.c-card-image{position:relative;aspect-ratio:1/1.12;background:radial-gradient(ellipse at 50% 40%,#2a2332,#18151f 75%);overflow:hidden}.c-card-image img{height:100%;width:100%;display:block;object-fit:contain;color:transparent}.c-card-image img:not([data-thumbnail-state=ready]){opacity:0}.c-card-variants{position:absolute;top:7px;right:6px;border-radius:4px;padding:3px 5px;background:#0e0b14d9;color:#c3aed2;font:8px monospace;pointer-events:none}.c-thumb-loading{position:absolute;top:45%;left:calc(50% - 10px);width:20px;height:20px;border:2px solid #574363;border-top-color:#c597e8;border-radius:50%;animation:c-thumb-spin 1s linear infinite;pointer-events:none}.c-card-image:has(img[data-thumbnail-state=ready]) .c-thumb-loading{display:none}.c-card-image:has(img[data-thumbnail-state=error]) .c-thumb-loading{width:auto;height:auto;left:8px;right:8px;text-align:center;border:0;animation:none;color:#aa89be;font-size:9px}.c-card-image:has(img[data-thumbnail-state=error]) .c-thumb-loading::after{content:'Pratinjau belum tersedia'}.c-card-caption{padding:10px;border-top:1px solid #342b3e;display:flex;flex-direction:column;gap:6px;min-width:0}.c-card-caption>b{font-size:10px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.c-card-caption>small{font:8px monospace;color:#a18bac;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.c-gallery-empty{grid-column:1/-1;padding:60px 15px;text-align:center;color:#ad90c1;font-size:12px}.c-gallery-footer{display:flex;justify-content:space-between;gap:12px;flex:none;padding:10px 16px;border-top:1px solid #36283f;color:#977ca9;font-size:8px}.c-gallery-open>.c-model,.c-gallery-open>.c-sheet{visibility:hidden}@keyframes c-thumb-spin{to{transform:rotate(360deg)}}
@media(min-width:1700px){.c-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}.c-card-caption>b{font-size:11px}.c-card-caption>small,.c-card-variants{font-size:9px}}
@media(max-width:1350px){#page-clothing .c-categories button{font-size:8px;padding:7px 4px;gap:3px}.c-categories button svg{width:12px;height:12px}.c-categories button small{font-size:8px}.c-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.c-gallery-scroll{padding:10px}.c-gallery-heading{padding:12px}.c-gallery-filters{padding:9px}}
@media(max-width:950px){.c-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}.c-gallery-heading h2{font-size:16px}.c-gallery-filters{flex-wrap:wrap}.c-gallery-filters select{max-width:none;width:100%!important}.c-gallery-footer{font-size:7px;flex-wrap:wrap}}

.c-animation-panel{border:1px solid #614278;border-radius:8px;padding:12px;margin-top:16px;background:linear-gradient(135deg,#2b1a37,#19111f)}.c-animation-panel summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:.8px;color:#dcc5ee;list-style:none}.c-animation-panel summary::-webkit-details-marker{display:none}.c-animation-panel summary::after{content:'⌄';font-size:13px;color:#b58bcf}.c-animation-panel:not([open]) summary::after{content:'›'}.c-animation-badge{margin-left:auto;font-size:7px;letter-spacing:.3px;color:#c7a1e7;border:1px solid #67417f;padding:3px 5px;border-radius:4px;background:#40234f}.c-animation-panel>.c-muted{font-size:9px;margin:12px 0 3px;line-height:1.65}.c-animation-title{display:flex;align-items:center;gap:7px;margin-top:12px}.c-animation-title>b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#e2c6f5}#page-clothing .c-animation-title button{font-size:8px;padding:5px}.c-animation-transport{display:flex;align-items:center;gap:7px;margin:12px 0 9px}#page-clothing .c-animation-transport button{padding:6px 8px;font-size:9px}.c-animation-transport>span{font:9px monospace;color:#ba95d4;flex:1}.c-animation-transport>label{display:flex;align-items:center;font-size:8px;color:#c2a7d5;gap:3px}.c-animation-transport input{width:12px!important;height:12px!important}.c-animation-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.c-animation-options>label{display:flex;flex-direction:column;gap:5px;font-size:8px;color:#bfa0d5}#page-clothing .c-animation-options select{width:100%;font-size:9px;padding:6px}#c-animation-export-note{font-size:8px;line-height:1.6;color:#ab8dbf;margin:10px 0 0}#c-viewer.c-animation-dragover::after{content:'Lepas GIF / APNG pada pakaian';position:absolute;inset:15%;border:2px dashed #c495ed;border-radius:16px;background:#4d286b99;display:grid;place-items:center;color:#f0ddff;font-size:15px;font-weight:650;pointer-events:none;z-index:5}

.c-warp-actions{margin-top:12px}.c-warp-actions button{font-size:9px!important}.c-wrap-panel{margin:14px 0;padding:12px;border:1px solid #65447d;border-radius:8px;background:#21162d}.c-wrap-panel summary{font-size:8px;letter-spacing:.8px;font-weight:700;color:#d1b4e6;cursor:pointer}.c-wrap-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.c-wrap-grid>label{display:flex;flex-direction:column;gap:5px;color:#b599cb;font-size:8px}#page-clothing .c-wrap-grid input,#page-clothing .c-wrap-grid select{width:100%!important;font-size:10px!important;padding:7px!important}.c-wrap-panel .c-muted{font-size:8px;margin-bottom:0;line-height:1.7}#c-sheet{cursor:default}#page-clothing #c-wrap[aria-pressed=true]{border-color:#d7adfa;background:#634080}