/* Category navigation and actions share a palette across the game's panels. */
body.arcane-layout {--menu-accent:#78c7e6;--menu-selected:#245365}
#game-overlay:is([data-view=market],[data-view=store],[data-view=shop]) {--menu-accent:#edc382;--menu-selected:#5b432d}
#game-overlay:is([data-view=gacha],[data-view=codex],[data-view=talents],[data-view=skills]) {--menu-accent:#d8aff2;--menu-selected:#483961}
#game-overlay:is([data-view=forge],[data-view=workshop],[data-view=inventory]) {--menu-accent:#a5b9fa;--menu-selected:#343e65}
#game-overlay:is([data-view=pets],[data-view=characters]) {--menu-accent:#a4d6bb;--menu-selected:#284f47}
body.arcane-layout #arcane-shell #overlay-body :is(nav,[role=tablist]) button:is(.active,.selected,[aria-selected=true],[aria-pressed=true]):not(:disabled),
body.arcane-layout #arcane-shell #overlay-body :is([data-store-tab],[data-gacha],[data-build-tab]) :is(.active,.selected,[aria-pressed=true]):not(:disabled) {
  color:#fff!important;border-color:var(--menu-accent)!important;
  background:linear-gradient(145deg,var(--menu-selected),#112a3b)!important;
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--menu-accent) 22%,transparent)!important;
}
body.arcane-layout #arcane-shell #overlay-body button:is([data-store-buy],[data-com-action=buy]):not(:disabled) {
  color:#f2d9a9!important;border-color:#b78b54!important;background:linear-gradient(#654a30,#322c2a)!important;
}
body.arcane-layout #arcane-shell #overlay-body button:is([data-store-currency=gems],[data-store-cash],[data-gacha=open]):not(:disabled) {
  color:#e2caff!important;border-color:#a886c2!important;background:linear-gradient(#513c6a,#302644)!important;
}
body.arcane-layout #arcane-shell #overlay-body button:is([data-com-action^=claim],[data-com-action=market-tab][data-com-value=payouts]):not(:disabled) {
  color:#d0f3df!important;border-color:#78ac95!important;background:linear-gradient(#2f5849,#193b37)!important;
}
body.arcane-layout #arcane-shell #overlay-body button:is(.danger,[data-com-action=cancel],[data-ui*=delete]):not(:disabled) {
  color:#ffe0e4!important;border-color:#c27784!important;background:linear-gradient(#713e4a,#482532)!important;
}
body.arcane-layout #arcane-shell #overlay-body :is(.commerce-filters,nav,[role=tablist]) :is(input,select,button):focus-visible {
  outline:2px solid var(--menu-accent)!important;outline-offset:2px!important;
}
.market-payouts {display:grid;gap:8px;margin-top:12px}
.market-payouts header,.market-payouts article {
  position:static!important;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;
  border:1px solid #497787;border-radius:9px;background:#112c3a;
}
.market-payouts header button {margin-inline-start:auto}
.market-payouts article>div {flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
.market-payouts article small {display:block;margin-top:4px;color:#9bb9c8}
.market-payouts article>img {width:34px;height:34px;object-fit:contain}
.market-payouts header strong,.market-payouts article strong {color:#bce7d0}

body.arcane-layout #arcane-shell #overlay-body button[data-com-action=market-tab][data-com-value=payouts][aria-pressed=true] {
  background:linear-gradient(#376c58,#1d4038)!important;border-color:#a5dbc1!important;
}
body.arcane-layout #arcane-shell #overlay-body .commerce-filters button[type=submit],
body.arcane-layout #arcane-shell #overlay-body .commerce-filters button:not([data-com-action]) {
  background:linear-gradient(#305570,#1a334a)!important;border-color:#749bb7!important;
}
body.arcane-layout #arcane-shell #overlay-body [data-gacha=pane] {
  color:#dfc9ed!important;border-color:#8a709c!important;background:linear-gradient(#3b3152,#222842)!important;
}
body.arcane-layout #arcane-shell #overlay-body [data-gacha=pane]:hover {
  border-color:#dec1ee!important;
}

/* Keep category labels in their own column even under the shared menu styles. */
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));
}
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs>button {
  grid-template-columns:23px minmax(0,1fr)!important;
  align-content:center!important;
  min-height:42px!important;
  padding:7px 9px!important;
}
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs>button>span,
body.arcane-layout #arcane-shell #overlay-body .store-buy-actions button>span {
  position:static!important;display:block!important;width:auto!important;min-width:max-content!important;
  max-width:none!important;overflow:visible!important;white-space:nowrap!important;
  word-break:normal!important;overflow-wrap:normal!important;transform:none!important;margin:0!important;
}
body.arcane-layout #arcane-shell #overlay-body .store-buy-actions {display:flex!important;flex-wrap:wrap!important;gap:6px!important}
body.arcane-layout #arcane-shell #overlay-body .store-buy-actions button {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:6px!important;flex:1 0 max-content!important;width:auto!important;min-width:max-content!important;
  padding:6px 8px!important;white-space:nowrap!important;
}
body.arcane-layout #arcane-shell #overlay-body .store-buy-actions button>img {
  position:static!important;flex:none!important;transform:none!important;margin:0!important;
}
.market-hero-tabs {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
body.arcane-layout #arcane-shell #overlay-body .market-hero-tabs>button {
  display:inline-flex!important;align-items:center!important;gap:5px!important;min-height:32px!important;padding:4px 7px!important;
}
body.arcane-layout #arcane-shell #overlay-body .market-hero-tabs>button>* {position:static!important;transform:none!important;margin:0!important}
.market-hero-tabs img {width:23px;height:23px;object-fit:cover;border-radius:4px}
.market-hero-tabs span {white-space:nowrap!important;width:auto!important}

button:is([data-filter-hero="0"],[data-loot-hero="0"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="0"]){--hero-filter-bg:#713543;--hero-filter-edge:#ff9ba9}
button:is([data-filter-hero="1"],[data-loot-hero="1"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="1"]){--hero-filter-bg:#325842;--hero-filter-edge:#a8e6ad}
button:is([data-filter-hero="2"],[data-loot-hero="2"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="2"]){--hero-filter-bg:#55406f;--hero-filter-edge:#d5acf6}
button:is([data-filter-hero="3"],[data-loot-hero="3"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="3"]){--hero-filter-bg:#385771;--hero-filter-edge:#b5dcf7}
button:is([data-filter-hero="4"],[data-loot-hero="4"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="4"]){--hero-filter-bg:#654a2c;--hero-filter-edge:#efbf77}
button:is([data-filter-hero="5"],[data-loot-hero="5"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="5"]){--hero-filter-bg:#364981;--hero-filter-edge:#a7bfff}
button:is([data-filter-hero="6"],[data-loot-hero="6"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="6"]){--hero-filter-bg:#69405f;--hero-filter-edge:#f3acd8}
button:is([data-filter-hero="7"],[data-loot-hero="7"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="7"]){--hero-filter-bg:#693c32;--hero-filter-edge:#ffa88a}
button:is([data-filter-hero="8"],[data-loot-hero="8"],:is([data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero])[data-value="8"]){--hero-filter-bg:#4d435d;--hero-filter-edge:#c9b8e8}
body.arcane-layout :is(#arcane-shell #overlay-body,#modal) button:is([data-filter-hero],[data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero],[data-loot-hero]) {
  background:linear-gradient(150deg,var(--hero-filter-bg,#244458),#112736)!important;
}
body.arcane-layout :is(#arcane-shell #overlay-body,#modal) button:is([data-filter-hero],[data-ranking=hero],[data-ui=inventory-character],[data-setcodex=hero],[data-ws=hero-filter],[data-ws=refine-filter-hero],[data-loot-hero]):is(.active,[aria-pressed=true]){
  border-color:var(--hero-filter-edge,#8adbe7)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--hero-filter-bg,#244458) 80%,#bdd4ef),#15283b)!important;
  box-shadow:inset 0 0 9px color-mix(in srgb,var(--hero-filter-edge,#8adbe7) 22%,transparent)!important;
}
/* Uniform Market category buttons */
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,106px),1fr));
}
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs>button {
  grid-template-columns:20px minmax(0,1fr)!important;
  gap:6px!important;
  height:40px!important;min-height:40px!important;
  padding:5px 7px!important;
}
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs>button>img {
  width:20px!important;height:20px!important;
}
body.arcane-layout #arcane-shell #overlay-body .market-category-tabs>button>span {
  font:700 12px/1.15 inherit;
  font-size:12px!important;line-height:1.15!important;
  min-width:0!important;max-width:100%!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
/* Shared Market illustrations for inventory categories */
body.arcane-layout #arcane-shell #game-overlay .inventory-v2 .inventory-tab-toolbar [data-ui="inventory-tab"][data-value="weapon"]::before {
    background: url("assets/icons/market-illustrated/weapons.webp") center / contain no-repeat !important;
  }
body.arcane-layout #arcane-shell #game-overlay .inventory-v2 .inventory-tab-toolbar [data-ui="inventory-tab"][data-value="equipment"]::before {
    background: url("assets/icons/market-illustrated/equipment.webp") center / contain no-repeat !important;
  }
body.arcane-layout #arcane-shell #game-overlay .inventory-v2 .inventory-tab-toolbar [data-ui="inventory-tab"][data-value="accessory"]::before {
    background: url("assets/icons/market-illustrated/accessories.webp") center / contain no-repeat !important;
  }
body.arcane-layout #arcane-shell #game-overlay .inventory-v2 .inventory-tab-toolbar [data-ui="inventory-tab"][data-value="resources"]::before {
    background: url("assets/icons/market-illustrated/resources.webp") center / contain no-repeat !important;
  }
body.arcane-layout #arcane-shell #game-overlay .inventory-v2 .inventory-tab-toolbar [data-ui="inventory-tab"][data-value="pets"]::before {
    background: url("assets/icons/market-illustrated/pets.webp") center / contain no-repeat !important;
  }

/* Compact combat profile and square skill cards */
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-art {
  display:block!important;position:relative!important;isolation:isolate;
  height:clamp(70px,10dvh,88px)!important;min-height:0!important;
  background:#0b2233!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-art .arcane-hero-fallback {
  inset:0 0 0 auto!important;width:76%!important;
  mask-image:linear-gradient(90deg,transparent,#000 36%)!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-art::after {
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#091c2bed 0%,#091c2bbd 34%,#091c2b35 66%,transparent),
    linear-gradient(0deg,#071824ad,transparent 55%);
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-art>.arcane-hero-title {
  position:absolute!important;inset:0!important;z-index:3!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  gap:3px!important;margin:0!important;padding:7px 11px!important;
  background:none!important;border:0!important;box-shadow:none!important;max-width:100%!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-title>.account-combat-nick {
  max-width:62%;padding:0!important;font:600 10px/1.2 'Segoe UI',sans-serif!important;
  color:#a8d9e6!important;letter-spacing:.3px;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-title>#arcane-hero-name {
  display:block!important;max-width:75%;font-size:22px!important;line-height:1.1!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-title>#arcane-hero-level {
  background:#0a2638ce!important;border-color:#6395ac80!important;
  padding:3px 5px!important;color:#d5edf7!important;font-size:10px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel #combat-hud {
  padding:7px 9px!important;gap:5px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills {
  grid-template-columns:repeat(3,minmax(0,84px))!important;
  justify-content:center!important;gap:6px!important;padding-top:5px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button {
  aspect-ratio:1!important;height:auto!important;min-height:0!important;
  justify-content:flex-end!important;gap:2px!important;padding:3px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button[data-hud-art=painted]::after {
  background-size:100% 100%,cover!important;
  background-position:center,center 38%!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button small {
  flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:23px!important;
  font-size:9px!important;line-height:1.15!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button>b {
  flex:0 0 auto!important;height:auto!important;min-height:0!important;line-height:10px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button>em {
  top:5px!important;font-size:10px!important;height:16px!important;line-height:14px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button[data-state=cooldown]::before {
  width:27px!important;height:27px!important;top:2px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted] {
  grid-column:1/-1;height:50px!important;min-height:50px!important;margin:2px 0 0!important;padding:5px 8px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]>progress {bottom:5px!important}
body.arcane-layout #arcane-shell #arcane-hero-column {gap:7px!important}
body.arcane-layout #arcane-shell #arcane-chat-panel .chat-messages {min-height:0!important}
@media(max-width:900px){
  body.arcane-layout #arcane-shell #arcane-hero-column:not(.chat-expanded) #arcane-chat-panel {
    height:clamp(260px,43dvh,400px)!important;
  }
}

.market-buy-qty {display:flex;align-items:center;justify-content:space-between;gap:6px;color:#b8d7e7;font-size:12px}
.market-buy-qty input {width:70px;min-width:0;box-sizing:border-box;padding:5px 7px;background:#0a2435;color:#e0f5ff;border:1px solid #587e95;border-radius:6px}
/* Taller combat cards and prominent nickname */
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-art {
  height:clamp(81px,11dvh,96px)!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .arcane-hero-title>.account-combat-nick {
  max-width:73%;padding:2px 6px!important;border:1px solid #cba86a7a;border-radius:5px;
  background:#281c18bd;color:#ffe0a3!important;font:700 12px/1.15 'Segoe UI',sans-serif!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills {
  grid-template-columns:repeat(3,minmax(0,96px))!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button {
  aspect-ratio:1!important;justify-content:flex-end!important;padding:4px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button small {
  font-size:10px!important;max-height:25px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .battle-skills>button[data-hud-art=painted]::after {
  background-size:100% 100%,cover!important;background-position:center,center 30%!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted] {
  height:64px!important;min-height:64px!important;padding:7px 9px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]::before {
  background-size:auto 100%!important;background-position:right center!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]>progress {
  bottom:8px!important;
}

body.arcane-layout #game-overlay .expedition-current {
  --expedition-edge:#71c7b3;--expedition-fill:#245448;
  display:grid;grid-template-columns:clamp(54px,10vw,100px) minmax(0,1fr) auto;
  align-items:center;gap:11px;margin:0 0 12px;padding:8px;border:1px solid var(--expedition-edge);
  border-radius:9px;background:linear-gradient(110deg,var(--expedition-fill),#11293d);
}
body.arcane-layout #game-overlay .expedition-current[data-difficulty="1"] {--expedition-edge:#ef9b89;--expedition-fill:#633746}
.expedition-current img {display:block;width:100%;height:57px;object-fit:cover;border-radius:6px}
.expedition-current div {display:grid;gap:3px;min-width:0}
.expedition-current small,.expedition-current span {color:#c4dfeb;font-size:11px}
.expedition-current strong {font-size:clamp(15px,2vw,20px);color:#fff;overflow-wrap:anywhere}
.expedition-current>b {color:#fff;background:#0b2233bf;border:1px solid var(--expedition-edge);padding:5px 8px;border-radius:6px}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=difficulty][data-value="1"] {--exp-tab:#623543;--exp-line:#ea9886}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=difficulty][data-value="0"] {--exp-tab:#254b55;--exp-line:#86d7d1}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=continent][data-tone="0"] {--exp-tab:#30523a;--exp-line:#9ad8a5}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=continent][data-tone="1"] {--exp-tab:#664c2c;--exp-line:#edc386}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=continent][data-tone="2"] {--exp-tab:#355579;--exp-line:#a9d4fa}
body.arcane-layout #arcane-shell #overlay-body button[data-ui=continent][data-tone="3"] {--exp-tab:#55406f;--exp-line:#d9b3ef}
body.arcane-layout #arcane-shell #overlay-body button:is([data-ui=continent],[data-ui=difficulty]) {
  color:#f1f5fa!important;background:linear-gradient(150deg,var(--exp-tab),#122a3b)!important;
  border-color:color-mix(in srgb,var(--exp-line) 65%,#25374a)!important;
}
body.arcane-layout #arcane-shell #overlay-body button:is([data-ui=continent],[data-ui=difficulty])[aria-pressed=true] {
  border-color:var(--exp-line)!important;box-shadow:inset 0 -2px var(--exp-line)!important;
  background:linear-gradient(135deg,var(--exp-tab),color-mix(in srgb,var(--exp-tab) 62%,#173a52))!important;
}
/* Center the original pet card in the banner's left column. */
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted] {
  padding:4px 8px 4px 4px!important;
  gap:5px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]>img {
  width:54px!important;height:54px!important;flex:0 0 54px!important;
  align-self:center!important;margin:0!important;object-fit:contain!important;object-position:center!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]>span {
  padding-top:5px!important;
}
body.arcane-layout #arcane-shell #arcane-hero-panel .pet-combat-hud[data-hud-art=painted]>progress {
  left:63px!important;width:min(87px,34%)!important;
}


body.arcane-layout {
  --active-filter-surface: #303640;
}
body.arcane-layout #arcane-shell #game-overlay #overlay-body
 :is(.market-category-tabs,.market-hero-tabs,.codex-filter-row,.inventory-tabs) button:is(.active,.selected,[aria-pressed=true],[aria-selected=true]):not(:disabled),
body.arcane-layout #arcane-shell #game-overlay #overlay-body
 button:is([data-ui=continent],[data-ui=difficulty],[data-ui=inventory-character],[data-ranking=hero],[data-ranking=metric],[data-store-tab],[data-gacha=hero],[data-gacha=weapon-job],[data-ws=hero-filter],[data-ws=refine-filter-hero],[data-ws=material-rarity],[data-ws^=refine-filter-]):is(.active,.selected,[aria-pressed=true],[aria-selected=true]):not(:disabled),
body.arcane-layout #modal button[data-loot-hero]:is(.active,[aria-pressed=true]):not(:disabled) {
  background: var(--active-filter-surface) !important;
  border-color: #49515c !important;
  box-shadow: none !important;
}

/* Refino uses the same palette as the character and rarity filters. */
body.arcane-layout #arcane-shell #game-overlay #overlay-body
 button[data-ws=refine-filter-hero] {
  color: var(--hero-filter-edge, #dcebf5) !important;
  border-color: color-mix(in srgb, var(--hero-filter-edge, #8adbe7) 70%, #25374a) !important;
}
body.arcane-layout #arcane-shell #game-overlay #overlay-body
 button[data-ws=refine-filter-rarity][style] {
  color: var(--rarity) !important;
  border-color: var(--rarity) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 22%, #152c3d), #0c2030) !important;
}
body.arcane-layout #arcane-shell #game-overlay #overlay-body
 button:is([data-ws=refine-filter-rarity][style],[data-ws=refine-filter-hero])[aria-pressed=true] {
  background: var(--active-filter-surface) !important;
  border-color: #49515c !important;
  box-shadow: none !important;
}