/* Wardrobe controls own their surfaces so legacy PNG button skins cannot leak in. */
#cosmeticsWardrobePanel.hidden { display:none !important; }
#cosmeticsWardrobePanel { padding:0; margin:16px auto; max-width:1240px; }
.page:has(#loadoutScreen[data-focus="appearance"]:not(.hidden))::before { max-width:100vw; }
#cosmeticsDialog { padding:0; width:min(1180px,95vw); max-width:1180px; max-height:94dvh; border:1px solid #65583e; border-radius:18px; background:#10131c; color:#eee9df; overflow:auto; box-shadow:0 30px 100px #000b; }
#cosmeticsDialog::backdrop { background:#030811c9; backdrop-filter:blur(5px); }
.wardrobe { --wd-gold:#dbc28b; --wd-muted:#a8abb9; color:#eee9df; background:linear-gradient(115deg,#191b28,#111720 65%,#151d27); border:1px solid #3a3e4b; border-radius:18px; overflow:hidden; text-align:left; font-family:Inter,system-ui,sans-serif; }
#cosmeticsDialog .wardrobe { border:0; overflow:clip; }
#cosmeticsDialog { color-scheme:dark; overscroll-behavior:contain; scrollbar-color:#565867 #151a24; }
body:has(#cosmeticsDialog[open]) { overflow:hidden; }
#cosmeticsDialog .wd-header { padding:18px 26px; }
#cosmeticsDialog .wd-footer { position:sticky; bottom:0; z-index:4; background:#131822; }
.wardrobe *, .wardrobe *::before, .wardrobe *::after { box-sizing:border-box; }
.wardrobe button { margin:0; min-width:0; min-height:0; height:auto; border:1px solid #414556; border-radius:10px; background:#1c2230; background-image:none; color:#eee9df; font:inherit; font-size:13px; font-weight:500; line-height:1.3; text-shadow:none; box-shadow:none; padding:12px 16px; cursor:pointer; filter:none; transform:none; opacity:1; letter-spacing:0; }
.wardrobe button::before,.wardrobe button::after { content:none; }
.wardrobe button:hover:not(:disabled) { border-color:#bea876; background:#272c3a; }
.wardrobe button:focus-visible { outline:2px solid #eed498; outline-offset:3px; }
.wardrobe button:disabled { cursor:default; opacity:.42; }
.wd-header { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:25px 30px 23px; border-bottom:1px solid #ffffff10; }
.wd-eyebrow { color:var(--wd-gold); font-size:10px; font-weight:700; letter-spacing:.17em; }
.wardrobe h2 { margin:7px 0; font:500 29px/1.15 Georgia,serif; color:#f4ebd9; }
.wardrobe p { line-height:1.6; }
.wd-header p { margin:0; font-size:12px; color:var(--wd-muted); }
.wd-header-end { display:flex; gap:20px; align-items:center; }
.wd-badge { font-size:10px; color:#c1b697; background:#d7bb8010; border:1px solid #a48b4e40; border-radius:20px; padding:7px 12px; }
.wardrobe .wd-close { font-size:25px; width:36px; height:36px; padding:0; border-radius:50%; color:#bbb8b0; background:transparent; }
#cosmeticsWardrobePanel .wd-close { display:none; }
.wd-body { display:grid; grid-template-columns:158px minmax(275px,1fr) minmax(290px,.94fr); min-height:485px; }
.wd-nav { border-right:1px solid #ffffff10; padding:24px 12px; display:flex; flex-direction:column; gap:7px; }
.wardrobe .wd-nav button { display:flex; align-items:center; gap:9px; text-align:left; padding:12px 8px; color:#9fa7b6; background:transparent; border-color:transparent; }
.wd-nav svg { width:29px; flex-shrink:0; height:29px; }
.wd-nav small { display:block; font-size:9px; color:#9ca0ac; margin-top:4px; }
.wardrobe .wd-nav button[aria-pressed=true] { color:var(--wd-gold); background:#ddc68e0d; border-color:#bb9e593a; }
.wd-options { padding:28px 24px 20px; }
.wd-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wardrobe h3 { color:#eae5d8; margin:7px 0 0; font:500 21px/1.3 Georgia,serif; }
.wd-selection-count { white-space:nowrap; color:#969cac; font-size:10px; }
.wd-description { color:#aeb2bf; font-size:12px; margin:10px 0 22px; }
.wd-options-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.wardrobe .wd-option { display:flex; flex-direction:column; align-items:center; position:relative; padding:13px 6px 12px; background:#121823a6; border-color:#343b4a; min-height:119px; }
.wardrobe .wd-option[aria-pressed=true] { background:linear-gradient(135deg,#bca1691b,#19202e); border-color:#d2b779; box-shadow:inset 0 0 0 1px #d2b77924; }
.wd-option strong { font-size:11px; font-weight:600; margin:7px 0 4px; }
.wd-option small { color:#969eaf; font-size:9px; }
.wd-rarity { color:#b9c1ce; font-size:9px; text-transform:capitalize; margin:0 0 7px; }
.wd-option[data-rarity=rare] .wd-rarity { color:#91c9ef; }
.wd-option[data-rarity=epic] .wd-rarity { color:#c4a5ed; }
.wd-option[data-rarity=legendary] .wd-rarity { color:#ecd18b; }
.wd-item-description { color:#aeb6c4; font-size:10px; line-height:1.5; margin:9px 4px 0; font-weight:400; }
.wd-options-grid[data-category=aura] { max-height:510px; overflow-y:auto; scrollbar-color:#565867 #151a24; padding:4px; margin:-4px; }
.wd-option-art { width:48px; height:48px; color:var(--dye); }
.wd-option[data-value=black] .wd-option-art { color:#8c8d9d; }
.wd-option-art svg { width:100%; height:100%; }
.wd-art-robe svg { fill:color-mix(in srgb,var(--dye) 30%,transparent); stroke-width:1.3; }
.wd-check { position:absolute; top:6px; right:7px; color:#e2c98e; font-size:11px; }
.wd-options-grid[data-category=wizard],.wd-options-grid[data-category=aura] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wd-options-grid[data-category=wizard] .wd-option { min-height:177px; }
.wd-options-grid[data-category=wizard] .wd-option-art { width:75px; height:85px; }
.wd-note { font-size:10px; color:#939baa; margin:20px 0 0; padding-top:16px; border-top:1px solid #ffffff0c; }
.wd-stage { display:flex; flex-direction:column; position:relative; border-left:1px solid #ffffff10; background:radial-gradient(ellipse at 50% 56%,#31556035,transparent 66%),linear-gradient(#131b2580,#0c121b80); overflow:hidden; }
.wd-stage-top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:20px 20px 0; z-index:1; }
.wd-stage .wd-eyebrow { color:#8fabb3; font-size:9px; }
.wd-preview-badge { color:#a7b5bb; font-size:9px; border:1px solid #53616b65; padding:4px 7px; border-radius:20px; }
.wd-preview-badge[data-dirty=true] { color:#e6c78d; border-color:#d4ae5d55; }
.wd-canvas-wrap { position:relative; flex:1; min-height:330px; }
.wd-canvas-wrap canvas { position:relative; display:block; width:100%; height:100%; max-height:420px; object-fit:contain; z-index:1; background:none; border:0; border-radius:0; }
.wd-halo { position:absolute; width:72%; aspect-ratio:1; border:1px solid #9bbdb812; border-radius:50%; top:12%; left:14%; box-shadow:0 0 0 13px #7fa49b04,0 0 0 14px #9bbdb809; }
.wd-halo::before { content:'✦'; color:#b6cfc320; position:absolute; top:-10px; left:calc(50% - 7px); }
.wd-loading { position:absolute; left:0; right:0; bottom:8px; text-align:center; color:#9db4c0; font-size:11px; z-index:2; }
.wd-character-caption { text-align:center; margin-top:-22px; padding:0 20px; z-index:1; }
.wd-character-caption h3 { font-size:21px; }
.wd-character-caption p { color:#a1aeb9; font-size:10px; margin:5px 0 14px; }
.wd-equipment-note { margin:auto 20px 17px; padding-top:13px; border-top:1px solid #ffffff0c; text-align:center; color:#84929f; font-size:9px; }
.wd-footer { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:18px 26px; border-top:1px solid #ffffff12; background:#11141ec2; }
.wd-feedback { color:#a6aab7; font-size:11px; line-height:1.6; max-width:530px; }
.wd-feedback[data-kind=success] { color:#a4d8bd; }.wd-feedback[data-kind=error] { color:#ffb2a2; }
.wd-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wardrobe .wd-save { min-width:136px; color:#201c14; border-color:#ddc48c; background:linear-gradient(135deg,#e7d3a5,#c4a465); font-weight:700; }
.wardrobe .wd-save:hover:not(:disabled) { color:#201c14; background:#edd8aa; border-color:#f8e3b2; }
.wd-save span { margin-left:12px; }.wardrobe .wd-reset { background:transparent; font-size:11px; }
.exploreHudQuickDock .exploreMenuPromptButton.cosmeticsPrompt { opacity:1; }
@media(max-width:1000px) { .wd-body { grid-template-columns:125px minmax(240px,1fr) minmax(230px,.9fr); }.wd-options { padding:24px 16px; }.wd-nav { padding:22px 6px; }.wd-nav small { display:none; }.wd-nav svg { width:25px; }.wd-options-grid { gap:7px; }.wd-stage-top { padding:20px 12px 0; } }
@media(max-width:760px) { .wd-header { padding:20px; }.wardrobe h2 { font-size:25px; }.wd-badge { display:none; }.wd-body { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.wd-nav { grid-column:1/-1; flex-direction:row; border-right:0; border-bottom:1px solid #ffffff10; padding:10px; }.wd-nav button { flex:1; justify-content:center; }.wd-stage-top { flex-wrap:wrap; }.wd-canvas-wrap { min-height:290px; }.wd-options-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.wd-selection-count { display:none; }.wd-options { padding:20px 12px; }.wardrobe h3 { font-size:19px; }.wd-footer { padding:16px; gap:10px; }.wd-actions { gap:6px; }.wardrobe .wd-reset { padding:10px 8px; }.wardrobe .wd-save { min-width:110px; }.wd-equipment-note { display:none; }.wd-character-caption { margin-top:0; } }
@media(max-width:480px) {
  /* Clip rounded corners without trapping the preview's sticky scroll context. */
  .wardrobe { overflow:clip; }
  .wd-body { display:flex; flex-direction:column; min-height:0; }
  .wd-nav { order:0; }
  .wd-stage { order:1; position:sticky; top:0; z-index:3; display:grid; grid-template-columns:minmax(120px,150px) minmax(0,1fr); grid-template-rows:auto 175px; flex-shrink:0; border-left:0; border-bottom:1px solid #ffffff18; background:radial-gradient(ellipse at 24% 65%,#24404a,#111923 75%); }
  .wd-stage-top { grid-column:1/-1; padding:10px 16px 0; }
  .wd-canvas-wrap { grid-column:1; height:175px; min-height:0; flex:none; }
  .wd-canvas-wrap canvas { height:175px; }
  .wd-character-caption { grid-column:2; margin:0; padding:0 14px 0 4px; display:flex; flex-direction:column; justify-content:center; text-align:left; }
  .wd-character-caption h3 { font-size:19px; }
  .wd-character-caption p { line-height:1.5; }
  .wd-loading { bottom:0; font-size:9px; }
  .wd-options { order:2; padding:20px 16px; }
  .wd-options-grid[data-category=aura] { max-height:none; overflow:visible; }
  .wd-options-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wd-footer { flex-direction:column; align-items:stretch; }
  .wd-actions { justify-content:flex-end; }
  .wd-feedback { min-height:32px; }
  .wd-nav svg { display:none; }
}