#content-dialog:has(.clothing-panel){width:min(1000px,calc(100vw - 28px));max-width:calc(100vw - 20px);background:#eee9d8;color:#35483a;border-color:#768d72}
#content-dialog:has(.clothing-panel) .dialog-heading{background:#384e3d;color:#f4edda;border-color:#95a187}
#content-dialog:has(.clothing-panel) #dialog-close{width:44px;height:44px;min-height:44px;flex-shrink:0}
.clothing-panel{font-family:var(--body);line-height:1.7;color:#35483a;min-width:0;overflow-wrap:anywhere}
.clothing-panel *{box-sizing:border-box}.clothing-panel h3,.clothing-panel h4{font-family:var(--pixel),monospace}.clothing-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:3px 0 20px;margin-bottom:20px;border-bottom:2px solid #b7c1a6}.clothing-heading>div{min-width:0}.clothing-kicker{font:10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#78856c}.clothing-heading h3{font-size:21px;line-height:1.6;margin:5px 0 8px}.clothing-heading p{font-size:12px;line-height:1.8;color:#6d7966;margin:0}.clothing-heading>.clothing-button{flex-shrink:0}
.clothing-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:9px 13px;border:2px solid #a8b59a;border-radius:0;background:#f4eedc;color:#435e43;font:12px/1.5 var(--pixel),monospace;cursor:pointer;text-align:center;overflow-wrap:anywhere}.clothing-button:hover:not(:disabled){background:#e3e9d1;border-color:#708b67}.clothing-button.primary{background:#526f4b;color:#fff1cd;border-color:#38563b;box-shadow:3px 3px 0 #bdc6a8}.clothing-button.primary:hover:not(:disabled){background:#405f41}.clothing-button[aria-pressed=true]{background:#d7e2c8;border-color:#557d53;box-shadow:inset 0 -3px #8ca17b}.clothing-button:disabled{opacity:.48;cursor:default;box-shadow:none}.clothing-panel [hidden]{display:none!important}.clothing-panel button:focus-visible,.clothing-panel input:focus-visible,.clothing-panel select:focus-visible,.clothing-panel canvas:focus-visible{outline:3px solid #ab8037;outline-offset:3px}
.clothing-tabs{display:flex;gap:7px;flex-wrap:wrap}.clothing-tabs .clothing-button{min-width:70px}.clothing-feedback{font-size:12px;line-height:1.8;color:#526d48;min-height:1.8em;margin:13px 0}.clothing-feedback.is-error{color:#9c4f3e}.clothing-note{font-size:11px;line-height:1.9;color:#768269;margin:13px 0 0}.clothing-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:15px}.clothing-card{min-width:0;border:2px solid #b9c2a7;background:#f8f1dd;padding:10px;box-shadow:3px 3px 0 #d1d8be}.clothing-card-preview{display:block;width:100%;padding:0;border:0;background:none;color:#3d573f;cursor:pointer;text-align:left}.clothing-card-preview canvas{display:block;width:100%;height:auto;aspect-ratio:128/150;image-rendering:pixelated;border:1px solid #bac4ac}.clothing-card-preview>span{display:block;font:13px/1.7 var(--pixel),monospace;margin:10px 0 5px;overflow-wrap:anywhere}.clothing-author{font-size:10px;line-height:1.8;color:#73836a;margin:0 0 9px;overflow-wrap:anywhere}.clothing-author>span{display:inline-block;background:#e1e8cc;color:#657a51;padding:1px 4px}.clothing-card>.clothing-button{width:100%;font-size:10px;padding:8px 4px}.clothing-pagination{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:25px 0 5px}.clothing-pagination>span{font-size:11px;color:#77856e}.clothing-empty{text-align:center;padding:38px 18px;background:#e4e8d5;border:2px dashed #b1bea1;margin-top:20px}.clothing-empty>span{font-size:35px;color:#85986d}.clothing-empty h4{font-size:17px;margin:10px 0;color:#56704a}.clothing-empty p{font-size:12px;color:#7c896e;margin:10px 0 20px}
.clothing-title-label{display:block;font-size:12px;font-weight:bold;margin-bottom:20px}.clothing-title-label>span{float:right;font:10px/1.8 ui-monospace,monospace;color:#869075}.clothing-title-label>input{display:block;width:100%;height:46px;margin-top:7px;padding:10px 13px;border:2px solid #a9b99a;border-radius:0;background:#faf4e2;color:#42593f;font:15px/1.6 var(--body)}.clothing-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}.clothing-drawing{min-width:0;background:#e1e6d2;padding:16px;border:2px solid #aebda0}.clothing-board-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.clothing-board-heading>span{font:11px ui-monospace,monospace;color:#859477;white-space:nowrap}.clothing-board-heading .clothing-button{min-width:60px;padding:7px 10px}.clothing-board-wrap{max-width:380px;margin:auto;border:2px solid #788e70;background:#c9d0c0;box-shadow:4px 4px 0 #bfcaab}.clothing-board-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;image-rendering:pixelated;touch-action:none;cursor:crosshair}.clothing-board-wrap canvas[aria-disabled=true]{cursor:default;opacity:.75}.clothing-board-hint{font-size:10px;line-height:1.9;text-align:center;color:#79896b;margin:12px 0}.clothing-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.clothing-tools>.clothing-button{flex:1 1 auto;min-width:64px;font-size:11px;padding:8px}.clothing-studio-side{min-width:0}.clothing-live-preview{display:flex;justify-content:center;gap:13px;background:#e3e7d4;border:2px solid #b9c3a8;padding:12px}.clothing-live-preview figure,.clothing-detail-previews figure{margin:0;text-align:center;min-width:0}.clothing-live-preview canvas{display:block;width:104px;max-width:100%;height:auto;image-rendering:pixelated}.clothing-live-preview figcaption,.clothing-detail-previews figcaption{font-size:10px;color:#7f8c72;margin-top:7px}.clothing-shape-row{display:flex;gap:8px;margin-top:14px}.clothing-shape-row .clothing-button{flex:1;padding:8px 4px;font-size:11px}.clothing-template-label{display:block;font-size:11px;color:#75866a;margin:13px 0 8px}.clothing-template-label select{display:block;width:100%;height:44px;border:2px solid #b3bf9f;border-radius:0;background:#f6f0df;color:#4c6546;font:12px var(--body);padding:8px;margin-top:5px}.clothing-template-label+.clothing-button{width:100%;font-size:11px}.clothing-palette-heading{display:flex;justify-content:space-between;align-items:center;margin:17px 0 8px;font-size:11px;color:#6e805e}.clothing-palette-heading>span{font:10px ui-monospace,monospace;color:#879471}.clothing-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:5px}.clothing-color{width:100%;min-width:0;height:36px;background:var(--clothing-color);border:2px solid #adb99d;cursor:pointer;position:relative;border-radius:0}.clothing-color[aria-pressed=true]{border-color:#3f633e;box-shadow:inset 0 0 0 2px #fff4d8,0 0 0 1px #3f633e}.clothing-color[aria-pressed=true]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:bold 17px sans-serif;text-shadow:0 1px 2px #000,1px 0 2px #000}.clothing-custom-color{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin-top:13px}.clothing-custom-color>label{font-size:10px;color:#7d8d6c;flex:0 0 58px}.clothing-custom-color input[type=color]{display:block;width:58px;height:44px;border:2px solid #a5b695;background:#f2ecd9;padding:3px;cursor:pointer;margin-top:4px}.clothing-rgb{display:flex;gap:5px;flex:1;min-width:150px}.clothing-rgb label{display:block;min-width:0;flex:1;font:10px ui-monospace,monospace;color:#7e8c70}.clothing-rgb input{display:block;width:100%;min-width:0;height:44px;padding:5px 3px;border:2px solid #b1bfa0;border-radius:0;background:#f9f2df;color:#526c4b;font:12px ui-monospace,monospace;margin-top:4px}.clothing-custom-color>.clothing-button{flex:1 1 100%;font-size:11px}
.clothing-submit-box{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:2px solid #b9c5a6;padding:20px 0 3px;margin-top:22px}.clothing-submit-box strong{font-size:12px;color:#55714b}.clothing-submit-box p{font-size:11px;line-height:1.9;color:#7b886c;margin:6px 0 0}.clothing-submit-actions{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 180px}.clothing-submit-actions .clothing-button{width:100%}.clothing-detail-previews{display:flex;justify-content:center;gap:30px;background:#e0e5d1;border:2px solid #aaba9a;padding:25px}.clothing-detail-previews canvas{display:block;width:160px;max-width:100%;height:auto;image-rendering:pixelated;border:2px solid #a9b69a}.clothing-detail-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
@media(max-width:820px){.clothing-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.clothing-editor-grid{gap:16px}.clothing-drawing{padding:11px}.clothing-heading h3{font-size:18px}.clothing-live-preview{gap:6px;padding:8px}}
@media(max-width:620px){.clothing-heading{align-items:stretch;flex-direction:column;gap:13px;margin-bottom:16px;padding-bottom:16px}.clothing-heading>.clothing-button{align-self:flex-start}.clothing-heading h3{font-size:17px}.clothing-heading p{font-size:11px}.clothing-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.clothing-card{padding:8px}.clothing-card-preview>span{font-size:12px}.clothing-editor-grid{grid-template-columns:minmax(0,1fr);gap:20px}.clothing-drawing{padding:12px}.clothing-board-wrap{max-width:380px}.clothing-live-preview{gap:22px;padding:12px}.clothing-live-preview canvas{width:110px}.clothing-palette{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.clothing-color{height:38px}.clothing-submit-box{flex-direction:column;align-items:stretch;gap:13px}.clothing-submit-actions{flex:auto}.clothing-submit-actions .clothing-button{flex:1 1 100%}.clothing-detail-previews{gap:14px;padding:16px 10px}.clothing-detail-previews figure{flex:1}.clothing-detail-previews canvas{width:100%}.clothing-pagination{gap:8px}.clothing-pagination .clothing-button{padding:8px}.clothing-pagination>span{font-size:10px}}

@media(max-width:600px){#content-dialog:has(.clothing-panel) #dialog-title{font-size:20px;line-height:1.5}}