/* A quiet dressing nook in the same leafy, rounded world as the grove. */
.app-shell .view#dressing-view { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 104px 0 44px; color: #385343; }
.dressing-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 25px; }
.dressing-heading h1 { margin: 0; font-size: clamp(29px, 4vw, 38px); letter-spacing: -.045em; line-height: 1.12; }
.dressing-heading p { margin: 7px 0 0; color: #74816b; font-size: 14px; }
.dressing-balance { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.dressing-balance b { font-size: 18px; }
.dressing-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr); align-items: start; gap: 28px; }
.dressing-portrait { min-width: 0; }
.dressing-pet-picker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 13px; color: #687a65; font-size: 13px; }
.dressing-pet-picker select { width: min(260px, 66%); min-height: 44px; border: 1px solid #c6d1bc; border-radius: 13px; padding: 8px 35px 8px 13px; font: inherit; font-weight: 800; color: #385840; background: #fffdf3; }
.dressing-stage { position: relative; isolation: isolate; aspect-ratio: 560 / 440; overflow: hidden; border: 1px solid #c7c6af; border-radius: 24px; background: radial-gradient(ellipse at 50% 24%, #fff9e7 0, #eceddc 50%, #d1d7bf); box-shadow: 0 5px 0 #d7dcc8, 0 16px 35px #41573b0e; }
.dressing-stage::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 35px, #66794407 36px 37px); z-index: -2; }
.dressing-stage::after { content: ''; position: absolute; top: 82%; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(0deg, #c1a67f10 0 26px, #90724e22 27px 28px), linear-gradient(#e0ccb0, #c9b695); border-top: 6px solid #af9c7b; z-index: -2; }
.dressing-mirror { position: absolute; top: 9%; bottom: 20%; left: 21%; width: 58%; padding: 9px; border: 7px solid #ad9775; border-radius: 46% 46% 18px 18px; background: linear-gradient(135deg, #e9f4e9 0, #f8fcf0 31%, #fdfef5 32%, #e2ede3 66%, #d0e1d4); box-shadow: inset 0 0 0 2px #d1b992, 0 4px 0 #7e826653, 0 8px 30px #48534219; z-index: -1; }
.dressing-mirror i { position: absolute; inset: 14px 25px; border-radius: inherit; background: linear-gradient(125deg, transparent 28%, #ffffff69 29% 32%, transparent 33% 41%, #ffffff49 42% 44%, transparent 45%); }
.dressing-curtain { position: absolute; top: 0; bottom: 22%; width: 21%; border-bottom: 8px solid #af837b; background: repeating-linear-gradient(90deg, #dfb2a1 0 10px, #c99b8b 18px, #e9c3ad 30px); box-shadow: 5px 4px 14px #55443419; z-index: -1; }
.dressing-curtain.left { left: -3%; border-radius: 0 0 60% 7%; transform: rotate(-3deg); }
.dressing-curtain.right { right: -3%; border-radius: 0 0 7% 60%; transform: rotate(3deg); }
.dressing-curtain::after { content: ''; position: absolute; top: 55%; left: 0; right: 0; height: 7px; background: #bc925d; border: 1px solid #a57d4d; transform: rotate(-7deg); }
.dressing-lamp { position: absolute; top: 22%; width: 6%; height: 6%; border-radius: 42% 42% 9px 9px; background: #fff0b4; border: 2px solid #b4a17b; box-shadow: 0 0 23px 13px #fff4ba66; z-index: -1; }
.dressing-lamp.left { left: 12%; }
.dressing-lamp.right { right: 12%; }
.dressing-lamp::after { content: ''; position: absolute; width: 40%; top: 100%; height: 8px; left: 30%; background: #a78e69; }
.dressing-platform { position: absolute; top: 82%; left: 23%; width: 54%; height: 7%; border-radius: 50%; background: linear-gradient(#eacdaf, #c5a183); border: 2px solid #b49878; box-shadow: 0 7px 0 #9d886b, 0 11px 14px #75644735; z-index: -1; }
.dressing-plant { position: absolute; bottom: 12%; left: 7%; width: 9%; height: 7%; border-radius: 4px 4px 12px 12px; border: 2px solid #9d7862; background: #be957d; z-index: -1; }
.dressing-plant :is(i, b, em) { position: absolute; bottom: 85%; width: 52%; height: 39px; border-radius: 0 90%; background: #7f9d69; }
.dressing-plant i { left: -5%; transform: rotate(-23deg); }
.dressing-plant b { left: 45%; transform: rotate(28deg) scaleX(-1); background: #64885e; }
.dressing-plant em { left: 17%; bottom: 102%; transform: rotate(9deg); height: 50px; background: #92ac77; }
.dressing-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline-offset: -6px !important; touch-action: none; cursor: grab; }
.dressing-stage canvas:active { cursor: grabbing; }
.dressing-preview-caption { min-height: 45px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 11px 4px 7px; text-align: center; }
.dressing-preview-caption p { margin: 0; color: #7b816e; font-size: 12px; }
.dressing-preview-caption button { min-height: 36px; border: 0; background: none; padding: 4px; color: #426d52; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.dressing-worn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 4px; }
.dressing-slot { min-height: 63px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; text-align: left; border: 1px dashed #bac8ad; border-radius: 13px; background: #f7f7eb; font: inherit; color: #526c50; cursor: pointer; }
.dressing-slot.is-filled { border-style: solid; background: #edf3e2; }
.dressing-slot > i { display: grid; flex: 0 0 29px; height: 29px; place-items: center; border-radius: 9px; background: #e8efda; font-style: normal; font-size: 21px; }
.dressing-slot > span:not(.inventory-art) { min-width: 0; font-size: 12px; }
.dressing-slot small { display: block; margin-top: 4px; font-size: 10px; color: #7c8b71; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dressing-slot > b { margin-left: auto; font-size: 14px; font-weight: 500; }
.dressing-slot .inventory-art { flex: 0 0 30px; width: 30px; height: 37px; }
.dressing-closet { min-width: 0; border: 1px solid #d3d9c5; border-radius: 21px; background: #fffdf3; box-shadow: 0 4px 0 #dee3ce; overflow: hidden; }
.dressing-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; gap: 4px; background: #edf1e2; border-bottom: 1px solid #d7dec9; }
.dressing-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 9px 10px; border: 0; border-radius: 13px; color: #7d8b70; background: none; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.dressing-tabs button[aria-selected="true"] { background: #fffdf3; color: #3e6349; box-shadow: 0 2px 5px #61784416; }
.dressing-tabs b { font-size: 11px; font-weight: 750; }
.dressing-filters { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 14px 15px 4px; }
.dressing-filters button { flex: 1; border: 0; border-radius: 11px; background: none; color: #768569; font: inherit; font-size: 12px; min-height: 38px; cursor: pointer; }
.dressing-filters button[aria-pressed="true"] { background: #e6edda; color: #456445; }
.dressing-panel { padding: 14px; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7c6a2 transparent; }
.dressing-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.dressing-item { min-width: 0; padding: 11px; border: 1px solid #e0e3d3; border-radius: 16px; background: #fffef9; }
.dressing-item.is-worn { border-color: #a3be8c; background: #f1f7e8; }
.dressing-item-art { display: grid; place-items: center; height: 91px; margin-bottom: 9px; border-radius: 11px; background: radial-gradient(ellipse, #f8f4dc, #f1f3e6); }
.dressing-item-art .inventory-art { width: 104px; height: 74px; }
.dressing-item h3 { margin: 0; font-size: 14px; line-height: 1.25; font-weight: 850; letter-spacing: -.018em; }
.dressing-item p { min-height: 18px; margin: 5px 0 10px; color: #82856e; font-size: 11px; line-height: 1.45; }
.dressing-item p img { vertical-align: -3px; }
.dressing-item p span { display: block; }
.dressing-item p s { opacity: .7; margin-left: 3px; }
.dressing-item > small { display: block; color: #8b7d50; font-size: 10px; margin: 9px 0 4px; }
.dressing-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -3px 0 8px; }
.dressing-colors button { position: relative; width: 32px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: none; cursor: pointer; }
.dressing-colors button::before { content: ''; position: absolute; inset: 6px 5px; border-radius: 50%; background: var(--swatch); border: 1px solid #45654122; }
.dressing-colors button[aria-pressed="true"] { border-color: #80936d; background: #edf2e1; }
.dressing-action, .dressing-try { min-height: 43px; border: 1px solid #507753; border-radius: 10px; background: #4b795b; color: #fffdf0; padding: 8px 10px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.dressing-item > .dressing-action { width: 100%; }
.dressing-item-actions { display: grid; grid-template-columns: .75fr 1fr; gap: 5px; margin-top: 10px; }
.dressing-try, .dressing-action.secondary { color: #55704f; border-color: #ced8bf; background: #f0f4e5; }
.dressing-item-actions :is(button) { padding-inline: 4px; font-size: 11px; }
.dressing-action:hover:not(:disabled) { background: #3c644c; }
.dressing-try:hover:not(:disabled), .dressing-action.secondary:hover:not(:disabled) { background: #e1ebd3; }
#dressing-view button:disabled { opacity: .55; cursor: default; }
.dressing-shop-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 1px 15px; }
.dressing-shop-intro p { margin: 0; font-size: 12px; color: #7b866b; }
.dressing-shop-intro button { border: 0; background: none; padding: 7px 0; min-height: 36px; color: #4d744e; font: inherit; font-size: 12px; cursor: pointer; }
.dressing-panel .currency-guide { margin: 0; border-radius: 13px; }
.dressing-panel .currency-guide-half { padding: 10px; }
.dressing-panel .currency-guide-title strong { font-size: 11px; }
.dressing-panel .currency-guide-half p { font-size: 10px; }
.dressing-panel .currency-guide-conversion { font-size: 10px; }
.dressing-empty-closet { display: grid; justify-items: center; padding: 43px 14px 50px; text-align: center; }
.dressing-empty-closet > span { font-size: 38px; color: #bdac7e; margin-bottom: 16px; }
.dressing-empty-closet h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.03em; }
.dressing-empty-closet p { margin: 0 0 21px; color: #879076; font-size: 13px; line-height: 1.7; }
.dressing-empty-closet button, .dressing-no-pet button { min-height: 46px; padding: 10px 17px; border: 1px solid #527353; border-radius: 12px; font: inherit; font-size: 13px; background: #4b795b; color: #fffdf2; cursor: pointer; }
.dressing-notice { margin: 10px 15px 0; padding: 10px; border-radius: 11px; background: #eaf2df; color: #4e7147; font-size: 12px; line-height: 1.5; }
.dressing-notice.is-error { background: #fbebe1; color: #9b554f; }
.dressing-no-pet { position: absolute; inset: 25% 13% 15%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 15px; text-align: center; color: #596d55; background: #fafbeddb; border-radius: 22px; }
.dressing-no-pet strong { font-size: 21px; letter-spacing: -.025em; }
.dressing-no-pet p { margin: 0 0 6px; color: #7c876e; font-size: 13px; }
.app-shell .main-nav { width: min(820px, calc(100vw - 24px)); }
.app-shell .dressing-nav-button .nav-label { max-width: 75px; white-space: normal; font-size: 11px; line-height: 1.1; }
@media (max-width: 760px) {
  .app-shell .view#dressing-view { width: calc(100% - 28px); padding-top: 100px; }
  .dressing-heading { margin-bottom: 17px; gap: 8px; align-items: start; }
  .dressing-heading h1 { font-size: 28px; }
  .dressing-heading p { font-size: 12px; max-width: 210px; }
  .dressing-balance { font-size: 11px; margin-top: 7px; gap: 4px; }
  .dressing-balance b { font-size: 15px; }
  .dressing-balance img { width: 18px; height: 18px; }
  .dressing-layout { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .dressing-portrait { width: 100%; max-width: 520px; margin: 0 auto; }
  .dressing-slot { gap: 6px; padding: 6px; }
  .dressing-slot .inventory-art { width: 26px; flex-basis: 26px; }
  .dressing-slot small { max-width: 64px; }
  .dressing-panel { max-height: none; overflow: visible; }
  .app-shell .main-nav { overflow-x: auto; grid-auto-columns: minmax(61px, 1fr); scrollbar-width: none; }
  .app-shell .dressing-nav-button .nav-label { font-size: 10px; max-width: 55px; }
}
@media (max-width: 350px) {
  .dressing-heading { flex-wrap: wrap; }
  .dressing-balance { margin: 0; }
  .dressing-slot .inventory-art, .dressing-slot > i { display: none; }
  .dressing-slot { justify-content: center; }
  .dressing-item { padding: 9px; }
}