.dress-page { display:block!important; max-width:1040px!important; }
.dress-page .dress-controls { display:flex; margin:0; justify-content:center; align-items:end; gap:12px; }
.dress-page .learning-controls label { display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:12px; }
.dress-reset-text { margin-left: 5px; }
body[data-learning="dress"] footer { display:none; }
.dress-task { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; text-align:center; font-size:16px; margin:6px 0; min-height:48px; }
.dress-request-list { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.dress-request { display:flex; align-items:center; gap:4px; color:var(--learning-accent); font-weight:700; font-size:13px; }
.dress-request img { width:36px; height:36px; object-fit:contain; }
.dress-workspace { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; padding:12px; background:#152237; border:1px solid #4e6476; border-radius:20px; }
.dress-model { min-width:0; display:flex; flex-direction:column; align-items:center; }
.dress-stage { height:clamp(210px,calc(100svh - 360px),450px); aspect-ratio:2 / 3; position:relative; border-radius:18px; background-color:#f7eedd; background-size:cover; background-position:center; box-shadow:inset 0 0 0 2px #d9bda0; flex-shrink:0; }
.dress-base { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.dress-layer { position:absolute; object-fit:fill; pointer-events:none; max-width:none; }
.dress-layer[data-part="hands"] img { position:absolute; width:36%; height:100%; max-width:none; object-fit:fill; }
.dress-layer[data-part="hands"] img:first-child { left:0; clip-path:inset(0 50% 0 0); }
.dress-layer[data-part="hands"] img:last-child { right:0; clip-path:inset(0 0 0 50%); }
.dress-stage.drop-ready { outline:4px dashed #24845f; outline-offset:3px; }
.dress-outfit { font-size:12px; text-align:center; color:var(--muted); line-height:1.5; margin:6px 0 0; }
.dress-wardrobe { min-width:0; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.dress-wardrobe > select { width:100%; min-width:0; }
.dress-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:112px; gap:7px; height:clamp(136px,calc(100svh - 440px),360px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#89c9bf #20394a; padding:4px; scroll-padding:4px; align-content:start; border-radius:12px; border:1px solid #426279; background:#101d2e; }
.dress-item { border:2px solid #5c7388; border-radius:12px; background:#243950; color:#fff; cursor:pointer; min-width:0; min-height:44px; padding:4px; font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; touch-action:pan-y; user-select:none; -webkit-user-select:none; font-size:12px; line-height:1.2; }
.dress-item[aria-pressed="true"] { border-color:#89e3cc; background:#28594e; box-shadow:inset 0 0 0 1px #89e3cc; }
.dress-item:focus-visible, .dress-items:focus-visible { outline:3px solid #ffd166; outline-offset:1px; }
.dress-item img { width:100%; height:70px; object-fit:contain; pointer-events:none; }
.dress-item span { pointer-events:none; }
.dress-catalog-hint { font-size:11px; line-height:16px; color:var(--muted); text-align:center; margin:0; }
.dress-wardrobe-actions { display:flex; gap:6px; }
.dress-wardrobe-actions .btn { flex:1; min-width:44px; padding:5px; white-space:normal; margin:0!important; }
.dress-ghost { position:fixed; width:100px; height:100px; object-fit:contain; transform:translate(-50%,-50%); z-index:999; pointer-events:none; filter:drop-shadow(0 3px 3px #0008); }
.dress-feedback { min-height:44px; text-align:center; padding:8px 0; color:var(--learning-accent); line-height:1.4; }
.dress-feedback.error { color:#ffabab; }
.dress-put-on { animation:dress-put-on .26s ease-out; }
@keyframes dress-put-on { from { opacity:.4; transform:translateY(-8px) scale(.94); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .dress-put-on { animation:none; } }
.dress-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.dress-page .learning-note { margin-top:4px; }
@media(max-width:759px) {
  .dress-page .dress-controls { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr) 44px; gap:8px; }
  .dress-page .dress-controls label, .dress-page .dress-controls select { width:100%; max-width:none; min-width:0; }
  .dress-page #dressReset { width:44px; padding:4px; }
  .dress-reset-text { display:none; }
  .dress-workspace { gap:10px; padding:10px 7px; grid-template-columns:minmax(0,.43fr) minmax(0,.57fr); }
  .dress-stage { height:auto; width:100%; max-width:208px; }
  .dress-items { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:92px; gap:4px; padding:3px; height:clamp(136px,calc(100svh - 490px),280px); }
  .dress-page:has(#dressCheck:not([hidden])) .dress-items, .dress-page:has(#dressNext:not([hidden])) .dress-items { height:clamp(136px,calc(100svh - 530px),250px); }
  .dress-item { font-size:10px; line-height:12px; padding:3px; }
  .dress-item img { height:48px; }
  .dress-wardrobe .btn { font-size:11px; }
  .dress-task { font-size:14px; gap:4px; min-height:44px; }
  .dress-request span { display:none; }
  .dress-request img { width:36px; height:36px; }
  .dress-request-list { width:100%; gap:8px; }
  .dress-outfit { font-size:10px; }
  .dress-catalog-hint { font-size:10px; }
  .dress-feedback { font-size:14px; }
}