/* =========================
   BANK OVERLAY
========================= */

#bankContent {
  flex: 1;
  min-height: 0;
  width: min(880px, 922px);
}

.bank-hero-copy h2,
.bank-confirm-kicker,
.bank-confirm-dialog h3 {
  font-family: var(--font-accent);
}

.bank-window {
  width: min(880px, 922px);
  max-height: 929px;
  overflow: hidden;
}

.bank-overlay {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bank-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
}

.bank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "main tools close"
    "stats tools close";
  gap: 10px 14px;
  align-items: start;
  padding: 12px 18px;
  background:
    radial-gradient(circle at left center, rgba(197, 179, 109, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
}

.bank-hero-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.storage-bank-hero {
  grid-template-areas: "main tools close";
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
}

.storage-bank-hero .bank-hero-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 0;
}

.storage-bank-hero .bank-hero-coins-wrap {
  transform: none;
}

.bank-hero-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(215, 197, 134, 0.16), rgba(98, 77, 34, 0.24));
  border: 1px solid rgba(214, 184, 116, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 26px rgba(0,0,0,0.24);
}

.bank-hero-icon {
  width: 31px;
  height: 31px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.bank-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bank-hero-copy h2 {
  margin: 0;
  line-height: 1.05;
}

.bank-hero-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.bank-hero-title-row h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-storage-toggle,
.bank-market-toggle,
.bank-controls-toggle {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(214, 184, 116, 0.24);
  border-radius: 7px;
  background: rgba(22, 20, 14, 0.74);
  color: var(--ui-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.bank-storage-toggle {
  min-width: 50px;
  height: 42px;
  padding: 0 6px;
}

.bank-storage-toggle-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}

.bank-storage-toggle:hover,
.bank-controls-toggle:hover,
.bank-storage-toggle[aria-expanded="true"],
.bank-controls-toggle[aria-expanded="true"] {
  border-color: rgba(185, 220, 119, 0.58);
  color: var(--ui-text);
}

.bank-storage-toggle-chevron,
.bank-controls-chevron {
  transition: transform 140ms ease;
}

.bank-storage-toggle[aria-expanded="true"] .bank-storage-toggle-chevron,
.bank-controls-toggle[aria-expanded="true"] .bank-controls-chevron {
  transform: rotate(180deg);
}

.bank-storage-popover {
  position: absolute;
  z-index: 25;
  top: 76px;
  left: 16px;
  right: 16px;
  padding: 9px;
  border: 1px solid rgba(214, 184, 116, 0.34);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(43, 34, 21, 0.98), rgba(18, 15, 10, 0.99));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}

.bank-hero-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.bank-hero-overview {
  grid-area: stats;
  min-width: 0;
  display: block;
}

.bank-hero .bank-close {
  grid-area: close;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  flex: 0 0 auto;
}

.bank-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 360px;
}

.inventory-hero-overview .bank-hero-stats {
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  max-width: 240px;
}

.bank-hero-stat {
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(22, 20, 14, 0.62);
  border: 1px solid rgba(214, 184, 116, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.bank-hero-stat strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1;
}

.bank-hero-stat span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.bank-hero-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.bank-hero-actions button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
}

.bank-hero-tools {
  grid-area: tools;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "coins bags"
    "actions actions";
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}

.bank-hero-coins-wrap {
  grid-area: coins;
  position: relative;
  flex: 0 0 auto;
  transform: translateX(-26px);
}

.bank-hero-coins {
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 184, 116, 0.24);
  background:
    linear-gradient(180deg, rgba(54, 43, 24, 0.82), rgba(18, 15, 10, 0.88));
  color: var(--ui-text);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.bank-hero-coins:hover {
  border-color: rgba(214, 184, 116, 0.44);
  filter: brightness(1.08);
}

.bank-action-menu.bank-coin-action-menu {
  /* Deposit menus are siblings of the clickable bank window inside a
     pointer-events:none overlay. Restore hit testing for the whole popup. */
  pointer-events: auto;
  width: min(420px, calc(var(--canvas-visible-width, 1920px) - 32px));
  max-height: min(560px, calc(var(--canvas-visible-height, 1080px) - 96px));
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Coin menus retain their bank hierarchy and theme; the native popover layer
   lets the anchored popup escape the window's clipped panels. */
.bank-hero-coins-wrap > .bank-coin-action-menu.is-bank-coin-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}

.bank-coin-action-menu[popover]:not(:popover-open) {
  display: none;
}

.bank-coin-action-menu::backdrop {
  background: transparent;
  pointer-events: none;
}

.bank-coin-action-menu input {
  text-align: center;
  font-weight: 800;
}

.bank-coin-denomination-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bank-coin-denomination-input {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.bank-coin-denomination-input img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.bank-coin-denomination-input input {
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 3px;
}

.bank-coin-entry-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ui-text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bank-coin-entry-total .bank-confirm-coins {
  gap: 5px;
  color: var(--ui-text);
  font-size: 11px;
  letter-spacing: 0;
}

.bank-grid-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
}

.bank-grid-heading { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.bank-grid-heading h3 { margin: 0; }
.bank-grid-heading span, .bank-view-note { color: var(--ui-text-muted); }
.bank-grid-heading-actions { display: flex; align-items: center; gap: 9px; }
.bank-controls-toggle.has-active-filters { border-color: rgba(185, 220, 119, 0.58); color: var(--ui-text); }
.bank-controls-toggle strong { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: rgba(185, 220, 119, 0.2); color: #d9efad; font-size: 10px; line-height: 17px; }
.bank-controls { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; gap: 8px; margin: 8px 0; }
.bank-search { min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(214, 184, 116, 0.26); border-radius: 7px; background: rgba(13, 11, 8, 0.74); }
.bank-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ui-text); }
.bank-controls select, .bank-organize-btn { min-height: 36px; border: 1px solid rgba(214, 184, 116, 0.26); border-radius: 7px; padding: 0 10px; background: rgba(27, 23, 15, 0.94); color: var(--ui-text); }
.bank-organize-btn:not(:disabled):hover { border-color: rgba(185, 220, 119, 0.58); }
.bank-organize-btn:disabled { opacity: 0.45; }
.bank-view-note { display: block; margin: -2px 0 8px; font-size: 11px; }
.bank-empty-result { padding: 18px; text-align: center; color: var(--ui-text-muted); }

@media (max-width: 760px) {
  .bank-controls { grid-template-columns: 1fr 1fr; }
  .bank-search { grid-column: 1 / -1; }
}

.bank-slots {
  flex: 1;
  height: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  display: grid;
  grid-template-columns: repeat(10, minmax(52px, 1fr));
  /* Slot indexes stay in reading order when the number of columns changes. */
  grid-auto-flow: row;
  direction: ltr;
  gap: 8px;
  padding-right: 4px;
}

.bank-storage-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  padding: 0 2px;
}

.bank-storage-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(214, 184, 116, 0.18);
  background: rgba(22, 20, 14, 0.68);
  color: var(--ui-text);
  display: grid;
  gap: 1px;
  text-align: left;
}

.bank-storage-tab span {
  font-size: 12px;
  font-weight: 800;
}

.bank-storage-tab small {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.bank-storage-tab.active {
  border-color: rgba(185, 220, 119, 0.58);
  background: linear-gradient(180deg, rgba(83, 112, 58, 0.82), rgba(36, 45, 28, 0.88));
}

.bank-storage-tab.is-remote:not(.active) {
  opacity: 0.76;
}

.bank-remote-note {
  color: rgba(225, 202, 132, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.bank-shipment-status {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(214, 184, 116, 0.14);
  background: rgba(22, 20, 14, 0.46);
}

.bank-shipment-status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.bank-shipment-status-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-shipment-status-row small {
  color: var(--ui-text-muted);
  white-space: nowrap;
}

.bank-shipment-cart {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(214, 184, 116, 0.16);
  background: rgba(18, 16, 12, 0.62);
}

.bank-shipment-cart-head,
.bank-shipment-cart-actions,
.bank-shipment-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bank-shipment-cart-head {
  justify-content: space-between;
}

.bank-shipment-cart-head div {
  display: grid;
  gap: 1px;
}

.bank-shipment-cart-head span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.bank-shipment-cart-list {
  display: grid;
  gap: 6px;
  max-height: 132px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.bank-shipment-cart-list p {
  margin: 0;
  color: var(--ui-text-muted);
}

.bank-shipment-cart-item {
  min-height: 34px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.bank-shipment-cart-item img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.bank-shipment-cart-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-shipment-cart-item button,
.bank-shipment-cart-head button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
}

.bank-cargo-preview { display: grid; gap: 8px; padding: 10px; border: 1px solid #8f713f; background: #17140ed9; color: #f1ddb1; }
.bank-cargo-preview > small { color: #c9b990; }
.bank-cargo-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12px; }
.bank-cargo-meter progress { grid-column: 1 / -1; width: 100%; height: 10px; accent-color: #d5b65d; }
.bank-cargo-meter.is-overloaded { color: #ffb0a0; }
.bank-cargo-meter.is-overloaded progress { accent-color: #d06550; }
.bank-shipment-cart-item span small { display: block; color: #ceb98e; font-size: 11px; }
.bank-shipment-fit-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

.bank-shipment-cart-actions {
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
}

@media (max-height: 760px) {
  .bank-shipment-cart {
    padding: 8px;
    gap: 6px;
  }

  .bank-shipment-cart-list {
    max-height: 78px;
  }
}

.bank-shipment-cart-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
}

.bank-open-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.bank-open-storage-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
}

.inventory-window {
  max-width: 600px;
  overflow: hidden;
}

.inventory-window::before,
.inventory-window .bank-hero::before {
  content: none;
}

.inventory-slots {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(6, minmax(66px, 1fr));
  align-content: start;
  gap: 8px;
}

.item-pointer-drag-ghost {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: none;
  opacity: 0.88;
  border: 1px solid rgba(222, 187, 115, 0.5);
  background: rgba(18, 15, 11, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6));
  will-change: transform;
}

/* The ghost no longer has the source slot's class. Size its cloned artwork
   explicitly so native-size item images cannot be clipped to one corner. */
.item-pointer-drag-ghost > img:not(.item-composite-layer),
.item-pointer-drag-ghost > .item-composite-icon {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
  object-position: center;
}

.item-pointer-drag-ghost [data-inventory-menu],
.item-pointer-drag-ghost [data-bank-menu],
.item-pointer-drag-ghost button {
  display: none !important;
}

.is-item-pointer-drop-target {
  outline: 2px solid rgba(238, 202, 112, 0.88) !important;
  outline-offset: -2px;
}

body.item-drag-active,
body.item-drag-active * {
  cursor: url("/releases/2026.11.02-01/frontend/assets/ui/cursor.png") 2 2, auto !important;
}

.inventory-bag-row,
.bank-hero-bags {
  grid-area: bags;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}

.inventory-tool-bag-shortcut,
.inventory-bag-slot {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(214, 178, 108, 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.1)),
    rgba(17, 14, 10, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
  color: inherit;
  cursor: default;
}

.inventory-bag-slot.empty {
  opacity: 0.62;
  border-style: dashed;
}

.inventory-bag-slot.unlockable {
  opacity: 0.62;
  filter: grayscale(0.35);
  cursor: pointer;
}

.inventory-bag-slot.unlockable:hover {
  opacity: 0.8;
  border-color: rgba(214, 184, 116, 0.52);
}

.inventory-bag-slot.locked {
  opacity: 0.22;
  filter: grayscale(1) brightness(0.55);
  pointer-events: none;
}

.bag-slot-cost {
  position: absolute;
  right: -4px;
  bottom: -7px;
  transform: scale(0.66);
  transform-origin: right bottom;
  pointer-events: none;
}

.inventory-bag-slot.filled {
  cursor: pointer;
}

.inventory-bag-slot.filled:hover {
  border-color: rgba(236, 198, 120, 0.72);
  filter: brightness(1.08);
}

.inventory-bag-slot img:not(.item-composite-layer),
.inventory-bag-slot .item-composite-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

.inventory-slot {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 178, 108, 0.24);
  background: rgba(18, 15, 11, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  display: grid;
  place-items: center;
  min-width: 0;
}

.inventory-slot.empty {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0)),
    rgba(10, 8, 6, 0.62);
}

.inventory-slot.filled:hover {
  border-color: rgba(236, 198, 120, 0.7);
}

.inventory-slot.is-empty-fishing-pouch {
  border-color: rgba(190, 72, 62, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(151, 45, 38, 0.32),
    0 0 8px rgba(167, 49, 42, 0.2);
}

.inventory-slot.is-empty-fishing-pouch:hover {
  border-color: rgba(229, 104, 88, 0.95);
}

.inventory-slot.is-active-fishing-pouch {
  border-color: rgba(214, 178, 108, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 157, 0.12);
}

.inventory-slot.is-unseen-loot {
  z-index: 1;
  border-color: rgba(255, 235, 174, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 203, 0.66),
    0 0 13px rgba(232, 196, 113, 0.42);
}

.inventory-slot.has-open-menu {
  z-index: 120;
}

.inventory-slot.has-open-menu:hover {
  filter: none;
}

.inventory-slot.is-broken {
  filter: grayscale(0.45);
}

.inventory-slot.has-whetstone-buff {
  border-color: rgba(241, 194, 80, 0.82);
  box-shadow: inset 0 0 14px rgba(216, 154, 50, 0.18), 0 0 12px rgba(241, 194, 80, 0.34);
}

.item-durability-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.item-durability-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #67b34c, #b7d86b);
}

.item-whetstone-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  min-width: 32px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff3c4;
  font-family: var(--font-readable, Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: none;
  background: #201a12;
  border: 1px solid #c5a565;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.bank-chest-picker { position: relative; flex-shrink: 0; }
.bank-chest-picker summary { list-style: none; cursor: pointer; }
.bank-chest-picker summary::-webkit-details-marker { display: none; }
.bank-chest-slot { flex-shrink: 0; }

#bankOverlay .inventory-bag-slot:is(.locked, .unlockable),
#bankOverlay .bank-chest-slot[data-chest-action="unlock"] {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.65;
  border-color: rgba(145, 145, 145, 0.35);
}

#bankOverlay .inventory-bag-slot.unlockable:hover,
#bankOverlay .bank-chest-slot[data-chest-action="unlock"]:not(:disabled):hover {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.85;
}
.bank-chest-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
  width: min(300px, 75vw); max-height: 50vh; overflow: auto;
  padding: 12px; display: grid; gap: 8px;
  background: #242018; border: 1px solid #a98b52; border-radius: 6px;
  box-shadow: 0 5px 18px #0009; white-space: normal;
}
.bank-chest-icon { width: 30px; height: 30px; }

#bankOverlay .bank-market-toggle {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 4px;
}

.bank-market-toggle img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bank-market-toggle:hover {
  border-color: #d6b874;
}

.inventory-tool-bag-shortcut > img,
.inventory-tool-bag-shortcut > .item-composite-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.inventory-tool-bag-shortcut:hover {
  border-color: rgba(214, 178, 108, 0.7);
  filter: brightness(1.15);
}

.bank-coin-action-menu > label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.bank-coin-action-menu input[type="checkbox"],
.bank-coin-action-menu input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 0;
  accent-color: #c7ab68;
}

.bank-coin-action-menu > p {
  margin: 6px 0;
  color: var(--ui-text-muted);
  line-height: 1.4;
}

.inventory-slot.dragging {
  opacity: 0.55;
  border-color: rgba(236, 198, 120, 0.82);
}

.inventory-slot img:not(.item-composite-layer),
.inventory-slot .item-composite-icon {
  width: min(42px, 70%);
  height: min(42px, 70%);
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

.inventory-deposit-btn {
  position: absolute;
  left: 5px;
  bottom: 4px;
  max-width: calc(100% - 10px);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(226, 190, 112, 0.3);
  background: rgba(22, 18, 12, 0.88);
  color: #f2dfb6;
  font-size: 10px;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
}

.inventory-slot.filled:hover .inventory-deposit-btn {
  opacity: 1;
  pointer-events: auto;
}

.inventory-amount {
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  color: #f3dfb1;
  text-shadow: 0 1px 2px #000;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-amount.value-tier-base {
  color: #f3efe5;
}

.inventory-amount.value-tier-1k {
  color: #9fd26d;
}

.inventory-amount.value-tier-10k {
  color: #74b9ff;
}

.inventory-amount.value-tier-100k {
  color: #f0c866;
}

.inventory-amount.value-tier-million {
  color: #c68cff;
}

.bank-slot {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 178, 108, 0.24);
  background: rgba(18, 15, 11, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  display: grid;
  place-items: center;
  min-width: 0;
  transition: border-color 0.12s ease, filter 0.15s ease;
}

.inventory-slot.is-multi-marked,
.bank-slot.is-multi-marked,
.special-bag-jewelry-slot.is-multi-marked {
  border-color: rgba(244, 196, 92, 0.95);
  box-shadow: 0 0 7px rgba(244, 196, 92, 0.75), inset 0 0 8px rgba(255, 218, 128, 0.2);
  animation: multi-item-mark-glow 1.6s ease-in-out infinite alternate;
}

@keyframes multi-item-mark-glow {
  from { box-shadow: 0 0 5px rgba(244, 196, 92, 0.55), inset 0 0 6px rgba(255, 218, 128, 0.12); }
  to { box-shadow: 0 0 11px rgba(255, 211, 105, 0.9), inset 0 0 10px rgba(255, 218, 128, 0.25); }
}

.multi-item-action-menu > strong {
  display: block;
  padding: 5px 8px;
  color: #f4d58b;
  font-size: 0.72rem;
  white-space: nowrap;
}

.fishing-pouch-window {
  position: absolute;
  pointer-events: auto;
  z-index: 1210;
  top: 155px;
  left: min(calc(80px + 535px), calc(100vw - 370px));
  width: 340px;
  padding: 12px;
  color: #eadfca;
  border: 1px solid rgba(170, 143, 82, 0.48);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(57, 45, 27, 0.98), rgba(24, 20, 14, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.05);
}

.fishing-pouch-window header { display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; }
.fishing-pouch-window header:active { cursor: grabbing; }
.fishing-pouch-window header [data-pouch-close],
.fishing-pouch-window header [data-tool-bag-close] { cursor: pointer; }
.fishing-pouch-window h3 { margin: 2px 0 0; font-size: 17px; }
.fishing-pouch-window small { color: #bda772; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.fishing-pouch-window > p { margin: 8px 0 10px; color: #9f9277; font-size: 11px; }
.fishing-pouch-window [data-pouch-close],
.fishing-pouch-window [data-tool-bag-close] { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; line-height: 1; }
.fishing-pouch-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.fishing-pouch-slot { position: relative; aspect-ratio: 1; min-width: 0; border: 1px solid rgba(190, 157, 89, .2); border-radius: 7px; background: rgba(6, 5, 3, .43); }
.fishing-pouch-slot.empty { opacity: .5; }
.fishing-pouch-slot.has-whetstone-buff {
  border-color: rgba(241, 194, 80, 0.82);
  box-shadow: inset 0 0 14px rgba(216, 154, 50, 0.18), 0 0 12px rgba(241, 194, 80, 0.34);
}
.fishing-pouch-slot > img,
.fishing-pouch-slot > .item-composite-icon {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
}
.fishing-pouch-slot > span:not(.item-whetstone-badge):not(.item-icon-wrap) { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.fishing-pouch-slot .item-whetstone-badge {
  top: 4px;
  right: 4px;
}
.fishing-pouch-slot-actions { display: none; position: absolute; z-index: 2; inset: 3px; align-content: center; gap: 3px; padding: 3px; border-radius: 5px; background: rgba(17, 13, 8, .94); }
.fishing-pouch-slot.is-menu-open .fishing-pouch-slot-actions { display: grid; }
.fishing-pouch-slot-actions button { padding: 3px 2px; font-size: 9px; }
.tool-bag-window-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.tool-bag-window-actions button { min-width: 145px; padding: 7px 10px; font-size: 10px; }
.tool-bag-window-actions button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 768px) {
  .fishing-pouch-window { position: fixed; left: 12px; right: 12px; top: auto; bottom: 82px; width: auto; }
}

#inventoryOverlay.fishing-pouch-visible {
  z-index: 1200 !important;
}

.bank-slot:hover {
  border-color: rgba(236, 198, 120, 0.7);
}

.bank-slot.empty {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0)),
    rgba(10, 8, 6, 0.62);
}

.bank-slot img:not(.item-composite-layer),
.bank-slot .item-composite-icon {
  width: min(42px, 70%);
  height: min(42px, 70%);
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

.bank-slot.filled {
  cursor: pointer;
}

.bank-slot.is-broken {
  border-color: rgba(184, 62, 49, 0.72);
  filter: saturate(0.78);
}

.bank-slot.is-broken::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  border: 1px solid rgba(184, 62, 49, 0.46);
  pointer-events: none;
}

.bank-slot.has-open-menu {
  z-index: 120;
}

.bank-slot.has-open-menu:hover {
  filter: none;
}

.bank-action-menu {
  position: fixed;
  z-index: 2600;
  top: 0;
  left: 0;
  width: min(210px, 1382px);
  max-height: min(360px, calc(var(--canvas-visible-height, 1080px) - 96px));
  overflow-y: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(22, 19, 14, 0.98);
  border: 1px solid rgba(214, 184, 116, 0.22);
  box-shadow: 0 16px 34px rgba(0,0,0,0.42);
}

.bank-action-menu button,
.bank-action-menu input {
  width: 100%;
  min-height: 32px;
  border-radius: 6px;
  font-size: 12px;
}

.bank-action-menu button {
  border: 1px solid rgba(214, 184, 116, 0.2);
  background: rgba(255,255,255,0.06);
  color: var(--ui-text);
}

.bank-action-menu button:hover {
  background: rgba(214, 184, 116, 0.16);
}

.bank-action-menu input {
  min-width: 0;
  padding: 0 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ui-text);
}

.bank-action-destroy,
.bank-destroy-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.bank-destroy-row {
  display: grid;
  grid-template-columns: minmax(46px, 0.45fr) minmax(0, 1fr);
  gap: 6px;
}

.bucket-fill-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.bucket-fill-heading span {
  color: var(--ui-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.bucket-fill-presets {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 52px;
  gap: 6px;
}

.bank-destroy-confirm p,
.bank-action-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.bank-action-error {
  color: #ffb3a8;
}

.bank-confirm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
}

.bank-confirm-dialog {
  width: min(420px, 100%);
  padding: 18px;
  border-radius: 10px;
  background:
    radial-gradient(circle at top left, rgba(214, 184, 116, 0.13), transparent 42%),
    rgba(22, 19, 14, 0.98);
  border: 1px solid rgba(214, 184, 116, 0.26);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.58);
}

.bank-confirm-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-accent, #d6b874);
}

.bank-confirm-dialog h3 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.15;
}

.bank-confirm-dialog p {
  margin: 0;
  color: var(--ui-text-muted);
  line-height: 1.42;
}

.bank-confirm-summary {
  display: grid;
  gap: 4px;
  margin: 14px 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bank-confirm-quote {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.bank-confirm-quote > div {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(214, 184, 116, 0.14);
  display: grid;
  gap: 4px;
}

.bank-confirm-quote span,
.bank-confirm-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bank-confirm-quote > div > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.bank-confirm-coins span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bank-action-menu button .bank-confirm-coins {
  justify-content: center;
  margin-left: 4px;
}

.bank-confirm-coins img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.bank-confirm-price-breakdown {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(214, 184, 116, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.bank-confirm-price-breakdown > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.bank-confirm-price-breakdown .is-saving {
  color: #9fc875;
}

.bank-confirm-price-breakdown .is-saving > strong {
  margin-left: auto;
  margin-right: -8px;
}

.bank-confirm-price-breakdown .is-total {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(214, 184, 116, 0.18);
  color: var(--ui-text);
  font-weight: 700;
}

.bank-confirm-summary span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.bank-confirm-summary strong {
  color: var(--ui-text);
}

.bank-confirm-items {
  display: grid;
  gap: 3px;
}

.bank-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bank-confirm-actions button {
  min-width: 112px;
  min-height: 38px;
  border-radius: 8px;
}

.bank-confirm-primary {
  background: linear-gradient(180deg, rgba(156, 126, 62, 0.95), rgba(92, 58, 24, 0.95));
  border-color: rgba(238, 197, 105, 0.45);
  color: #fff7df;
}

.bank-amount {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 12px;
  background: rgba(0,0,0,0.72);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Keep bank scrollbars inside their scaled scrollports, not a detached layer. */
html.gom-custom-scrollbars #bankOverlay * {
  scrollbar-width: thin !important;
  scrollbar-color: #ad8850 rgba(0, 0, 0, .2);
}

html.gom-custom-scrollbars #bankOverlay *::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
}

.bank-slots::-webkit-scrollbar {
  width: 8px;
}

.bank-slots::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

#bankPanel.bank-button {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
    rgba(33, 28, 20, 0.82);
  border: 1px solid rgba(214, 184, 116, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

#bankPanel.bank-button:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)),
    rgba(40, 33, 22, 0.9);
}

.bank-button-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bank-button-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(214, 184, 116, 0.1);
  border: 1px solid rgba(214, 184, 116, 0.12);
}

.bank-button-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.bank-button-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bank-button-copy strong {
  font-size: 15px;
}

.bank-button-copy small {
  color: var(--ui-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bank-button-meta {
  flex-shrink: 0;
  font-weight: 700;
}

@media (max-width: 768px) {
  #bankContent {
    width: 100%;
  }

  .bank-window {
    width: 100%;
    max-height: calc(var(--canvas-visible-height, 1080px) - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .bank-body {
    padding: 10px;
    gap: 10px;
  }

  .bank-hero {
    padding: 14px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main close"
      "tools tools"
      "stats stats";
  }

  .storage-bank-hero {
    grid-template-areas:
      "main close"
      "tools tools";
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .bank-hero-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .bank-hero-icon {
    width: 30px;
    height: 30px;
  }

  .bank-hero-overview {
    width: 100%;
  }

  .bank-hero-stats,
  .inventory-hero-overview .bank-hero-stats {
    min-width: 0;
    max-width: none;
  }

  .bank-hero-tools {
    align-items: stretch;
  }

  .bank-hero-bags {
    justify-content: flex-start;
  }

  .bank-hero-actions {
    justify-content: flex-end;
  }

  .bank-slots {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    gap: 8px;
  }

  .inventory-slots {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  }

  .bank-amount {
    font-size: 11px;
  }
}


.courier-bank-entry {
  width: 100%; padding: 10px; margin-bottom: 10px; color: #eed9a6;
  background: #302a20; border: 1px solid #8c7954; border-radius: 5px; cursor: pointer;
}
/* Match the inventory's framed panels and item slots. */
.fishing-pouch-window {
  width: 380px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 16px;
  border-radius: 14px;
  border-color: rgba(190,157,89,.65);
  background: var(--material-wood);
}
.fishing-pouch-window > header {
  margin: -16px -16px 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(190,157,89,.32);
  background: linear-gradient(180deg, rgba(117,88,42,.13), rgba(0,0,0,.18));
}
.fishing-pouch-window > header h3 {
  font-family: var(--font-accent);
  font-size: 24px;
  margin: 3px 0 0;
}
.fishing-pouch-window .fishing-pouch-slot {
  border-radius: 0;
  background: linear-gradient(135deg, rgba(111,116,102,.22), transparent 58%), rgba(8,7,5,.62);
  border-color: rgba(190,157,89,.36);
}
.fishing-pouch-slot.filled:hover,
.fishing-pouch-slot.filled:focus-visible {
  border-color: #c7ab68;
  box-shadow: inset 0 0 12px rgba(214,184,116,.13);
}
.fishing-pouch-slot.is-menu-open { z-index: 10; }
.fishing-pouch-slot .fishing-pouch-slot-actions {
  inset: auto auto auto 0;
  top: calc(100% + 5px);
  width: 170px;
  padding: 7px;
  border: 1px solid rgba(214,184,116,.4);
  border-radius: 8px;
  background: rgba(22,19,14,.98);
  box-shadow: 0 12px 25px rgba(0,0,0,.5);
}
.fishing-pouch-slot:nth-child(5n) .fishing-pouch-slot-actions,
.fishing-pouch-slot:nth-child(5n - 1) .fishing-pouch-slot-actions { left: auto; right: 0; }
.fishing-pouch-slot-actions button { min-height: 32px; font-size: 12px; padding: 6px 9px; }

/* Personal layout only: trading workspaces keep their paired fitting rules. */
body:not(.management-workspace-open):not(.flea-market-store-open):not(.flea-market-trade-open) #inventoryOverlay .inventory-window {
 width:var(--inventory-preferred-width,448px);max-width:calc(100vw / var(--ui-user-scale,1) - 24px);max-height:calc(100vh / var(--ui-user-scale,1) - 24px);min-width:0;
}
body:not(.management-workspace-open):not(.flea-market-store-open):not(.flea-market-trade-open) #inventoryOverlay .inventory-slots {
 grid-template-columns:repeat(var(--inventory-columns,6),minmax(0,1fr));max-height:var(--inventory-grid-height,400px);gap:8px;
}
.inventory-layout-editor {position:absolute;z-index:12;right:12px;top:65px;padding:16px;width:260px;max-width:calc(100% - 24px);background:#211b11;border:1px solid #a98b4c;border-radius:10px;box-shadow:0 12px 32px #000a;display:grid;gap:12px;}
.inventory-layout-editor label {display:flex;justify-content:space-between;gap:12px;align-items:center;}
.inventory-layout-editor input {width:65px;}.inventory-layout-editor button {padding:6px 8px;margin:2px;}
[data-inventory-layout]{min-width:30px;min-height:30px;}
.is-window-dragging,.is-window-dragging * {transition:none!important;animation:none!important;cursor:grabbing!important;user-select:none!important;}
[data-managed-window] {box-sizing:border-box;}
@media(prefers-reduced-motion:reduce){.game-window,.game-window *{animation:none!important;transition:none!important;}}

.inventory-layout-editor{box-sizing:border-box;max-height:calc(100% - 77px);overflow:auto;}

/* The breakpoint follows the inventory window, not the browser viewport. */
#inventoryOverlay .inventory-window {container-type:inline-size;container-name:inventory-window;}
#inventoryOverlay .inventory-tools-toggle {display:none;grid-area:toggle;}
@container inventory-window (width < 420px) {
 #inventoryOverlay .inventory-bank-hero {grid-template-columns:minmax(0,1fr) 32px 36px;grid-template-areas:"main toggle close";gap:8px;align-items:center;padding:10px 12px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-main {gap:8px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-icon-wrap {width:30px;height:34px;flex:0 0 30px;border-radius:8px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-icon {width:22px;height:22px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-label {display:none;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-copy h2 {font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 #inventoryOverlay .inventory-bank-hero .bank-close {width:36px;height:36px;padding:0;min-width:0;}
 #inventoryOverlay .inventory-tools-toggle {display:block;width:32px;height:36px;padding:0;font-size:18px;}
 #inventoryOverlay .inventory-bank-hero .inventory-hero-tools {display:none;}
 #inventoryOverlay .inventory-tools-expanded .inventory-bank-hero {grid-template-areas:"main toggle close" "tools tools tools";}
 #inventoryOverlay .inventory-tools-expanded .inventory-bank-hero .inventory-hero-tools {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid rgba(214,184,116,.2);}
 #inventoryOverlay .inventory-bank-hero .bank-hero-bags {flex-wrap:wrap;}
}

/* Medium windows have room for inline actions with compact title chrome. */
@container inventory-window (min-width: 420px) {
 #inventoryOverlay .inventory-bank-hero {grid-template-areas:"main tools close";align-items:center;}
 #inventoryOverlay .inventory-bank-hero .inventory-hero-tools,
 #inventoryOverlay .inventory-bank-hero .bank-close {align-self:center;}
 #inventoryOverlay .inventory-bank-hero .inventory-hero-tools {display:flex;align-items:center;gap:8px;padding-top:0;}
}
@container inventory-window (min-width: 420px) and (max-width: 600px) {
 #inventoryOverlay .inventory-bank-hero {grid-template-columns:minmax(0,1fr) auto 36px;grid-template-areas:"main tools close";gap:8px;align-items:center;padding:10px 12px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-main {gap:8px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-icon-wrap {width:30px;height:34px;flex:0 0 30px;border-radius:8px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-icon {width:22px;height:22px;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-label {display:none;}
 #inventoryOverlay .inventory-bank-hero .bank-hero-copy h2 {font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 #inventoryOverlay .inventory-bank-hero .bank-close {width:36px;height:36px;padding:0;min-width:0;}
}
/* Local storage shipping is explicitly enabled before displaying its cart. */
#bankOverlay .bank-freight-toggle[aria-pressed="true"] {
  color: #ffe4a3;
  filter: brightness(1.15);
}
#bankOverlay .bank-shipment-destination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
#bankOverlay .bank-shipment-destination select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* Show jewelry resonance on each piece and counts within bank stacks. */
.jewelry-status-badges {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  pointer-events: none;
  z-index: 2;
}
.jewelry-status {
  max-width: 100%;
  box-sizing: border-box;
  padding: 1px 3px;
  border-radius: 3px;
  background: #25303a;
  color: #e1e5e8;
  font-size: 9px;
  line-height: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.jewelry-status-attuned { background: #164b48; color: #c2fff0; }
.jewelry-status-bound { background: #303b74; color: #e2e7ff; }
.jewelry-status-deeply_bound { background: #574020; color: #ffe2a1; }

/* Normal bags | tool bag and special bags | controls. */
#inventoryOverlay .inventory-bag-group { display:flex; align-items:center; gap:7px; flex-shrink:0; }
#inventoryOverlay .inventory-special-bag-group { border-left:1px solid rgba(214,178,108,.35); border-right:1px solid rgba(214,178,108,.35); padding:0 10px; }
#inventoryOverlay .inventory-equipped-bag { flex:0 0 38px; }
#inventoryOverlay .inventory-equipped-bag.empty { cursor:default; font-size:10px; }

#inventoryOverlay .inventory-equipped-bag.empty { opacity:1; }
#inventoryOverlay .inventory-equipped-bag .inventory-empty-bag-icon { opacity:.38; filter:grayscale(1); }
#inventoryOverlay .inventory-bag-type-badge { position:absolute; right:2px; bottom:1px; min-width:13px; height:14px; display:grid; place-items:center; font-size:10px; font-weight:700; line-height:1; color:#d8c49b; background:#29251e; border:1px solid rgba(214,178,108,.4); border-radius:3px; box-shadow:0 1px 3px #0008; }
#inventoryOverlay .inventory-equipped-bag.is-item-pointer-drop-target { border-color:#d6b26c; box-shadow:0 0 7px #d6b26c66; }

.special-bag-window .special-bag-equip { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.special-bag-window h4 { font-size:12px; margin:14px 0 8px; }
.special-bag-window .fishing-pouch-slot-actions label { display:grid; gap:4px; font-size:11px; }
.special-bag-window .fishing-pouch-slot-actions input { width:100%; box-sizing:border-box; }
.special-bag-window [data-error] { color:#e4a69c; }
.special-bag-window [data-error]:empty { display:none; }

.special-bag-window .fishing-pouch-slot-actions:has([data-variant]) { width:270px; max-width:75vw; }
.special-bag-window [data-variant] { width:100%; min-width:0; }

.special-bag-window { overflow:visible; }
.special-bag-window .tool-bag-window-actions { flex-wrap:wrap; }

/* Keep the full binding label below the jewelry, including longer translations. */
.special-bag-window .special-bag-jewelry-slot { aspect-ratio:auto; min-height:106px; display:flex; flex-direction:column; align-items:center; padding:4px 2px; box-sizing:border-box; }
.special-bag-window .special-bag-jewelry-slot > img,
.special-bag-window .special-bag-jewelry-slot > .item-composite-icon { position:relative; inset:auto; transform:none; width:42px; height:42px; flex:0 0 42px; margin:0 auto 4px; }
.special-bag-window .special-bag-jewelry-slot .jewelry-status-badges { position:static; width:100%; align-items:stretch; gap:3px; margin-top:auto; }
.special-bag-window .special-bag-jewelry-slot .jewelry-status { text-align:center; white-space:normal; overflow-wrap:anywhere; padding:3px 1px; }

.processing-queue-row[data-queue-recipe] { cursor:pointer; }
.processing-queue-row[data-queue-recipe]:hover, .processing-queue-row[data-queue-recipe]:focus-visible { background:rgba(190,157,89,.1); outline:1px solid rgba(190,157,89,.4); outline-offset:-1px; }

/* Unified bank: one Mountgate frame owns the header, tabs and both work areas.
   The inventory is docked with its live DOM intact so item and bag actions keep
   their existing bindings. Every override stays within this bank workspace. */
body.management-workspace-bank.bank-unified-workspace {
  --bank-panel-border: rgba(167, 128, 76, .48);
  --bank-panel-highlight: rgba(226, 211, 174, .06);
  --bank-header-height: 116px;
  --bank-columns: 10;
  --bank-grid-gaps: 32px;
  --bank-inventory-columns: 6;
  --bank-inventory-grid-gaps: 20px;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #bankContent {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0;
  height: auto;
  max-height: none !important;
  overflow: visible;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #bankContent > .bank-window {
  position: absolute !important;
  top: var(--management-workspace-top) !important;
  left: var(--management-bank-expanded-left) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--management-bank-expanded-width) !important;
  height: var(--management-workspace-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--mg-bronze, #a7804c);
  border-radius: 10px;
  background: var(--material-stone);
  box-shadow: inset 0 0 0 3px rgba(9, 11, 8, .65), 0 18px 64px rgba(0, 0, 0, .66);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  container-name: bank-workspace;
}

body.bank-unified-workspace #bankOverlay .bank-window > .mg-frame-art {
  z-index: 10;
}

body.bank-unified-workspace #bankOverlay .bank-window > .bank-workspace-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 76px;
  grid-template-areas: "main balances close";
  align-items: center;
  gap: 16px;
  min-height: var(--bank-header-height);
  height: auto;
  padding: 10px 14px 8px 102px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 30% 5%, rgba(126, 135, 82, .14), transparent 58%),
    linear-gradient(90deg, rgba(12, 15, 13, .3), transparent 62%),
    var(--mg-surface-window, var(--material-stone));
  box-shadow: none;
  z-index: 5;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header::after {
  display: none;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-main {
  grid-area: main;
  gap: 0;
  align-items: center;
  min-width: 0;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-pennant {
  position: absolute;
  top: -3px;
  left: 10px;
  width: 83px;
  height: 139px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(3px 6px 5px rgba(0, 0, 0, .65));
}

body.bank-unified-workspace #bankOverlay .bank-pennant img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-copy {
  max-width: none;
  gap: 7px;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-copy h2 {
  margin: 0;
  max-width: none;
  font-family: "MedievalSharp", Georgia, serif;
  font-size: clamp(24px, 2cqw, 32px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
  color: var(--mg-parchment, #e2d3ae);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-label {
  font-family: var(--font-accent);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: none;
  color: var(--ui-text-muted);
}

body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-close {
  grid-area: close;
  display: inline-flex !important;
  align-self: start;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin-top: 0;
}

body.bank-unified-workspace #bankOverlay .bank-window-controls {
  grid-area: close;
  display: flex;
  align-self: start;
  align-items: center;
  gap: 4px;
}

.bank-settings-dialog { width: min(460px, calc(100vw - 32px)); }
.game-confirm-dialog.bank-settings-dialog h3 { font-size: 20px; }
.bank-settings-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }
.bank-settings-field select { min-width: 150px; max-width: 60%; padding: 9px; border: 1px solid #a7804c; border-radius: 4px; color: #e5d6b3; background: #24251c; }
.bank-settings-dialog .game-confirm-actions { flex-wrap: wrap; }

body.bank-unified-workspace #bankOverlay .bank-workspace-balances {
  grid-area: balances;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: 2px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: rgba(9, 11, 8, .47);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5);
}

body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-hero-coins-wrap {
  min-width: 0;
  transform: none;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  min-height: 49px;
  max-width: 100%;
  padding: 8px 15px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font-family: var(--font-accent);
  font-size: 14px;
  line-height: 1.25;
  cursor: pointer;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-balances > :last-child:not(:first-child) {
  border-left: 1px solid var(--bank-panel-border);
}

body.bank-unified-workspace #bankOverlay .bank-balance-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--mg-parchment-dim, #d6c39a);
}

body.bank-unified-workspace #bankOverlay .bank-balance-label > img,
body.bank-unified-workspace #bankOverlay .bank-balance > img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay .bank-balance .bank-confirm-coins {
  display: inline-flex;
  gap: 9px;
  font-family: var(--font-readable, Arial, sans-serif);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.bank-unified-workspace #bankOverlay .bank-balance-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-readable, Arial, sans-serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.bank-unified-workspace #bankOverlay .bank-balance .bank-confirm-coins img {
  width: 22px;
  height: 22px;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance:hover {
  background: rgba(167, 128, 76, .13);
  filter: brightness(1.1);
}

body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance:disabled {
  opacity: .5;
  cursor: default;
}

body.bank-unified-workspace #bankOverlay .bank-primary-tabs {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  min-height: 57px;
  padding: 0 12px 0 102px;
  border-bottom: 1px solid var(--mg-bronze, #a7804c);
  background: rgba(7, 9, 7, .22);
  z-index: 3;
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 55px;
  margin: 0 0 -1px;
  padding: 8px 16px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgba(63, 64, 50, .12), rgba(6, 8, 6, .4));
  box-shadow: inset 0 1px 0 rgba(226, 211, 174, .05);
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ui-text-muted);
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab[aria-selected="true"] {
  color: #f1dfb5;
  border-color: var(--mg-amber, #d3a262);
  border-bottom-color: #9a7a46;
  background:
    linear-gradient(180deg, rgba(122, 111, 65, .3), rgba(53, 55, 34, .65)),
    var(--mg-surface-recessed, #1b1c15);
  box-shadow: inset 0 1px 0 rgba(241, 222, 164, .21), inset 0 0 22px rgba(167, 128, 76, .12);
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  bottom: -4px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #9a7a46;
  border-right: 1px solid #e2cc90;
  border-bottom: 1px solid #e2cc90;
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab:hover {
  border-color: var(--mg-amber, #d3a262);
  color: var(--ui-text);
}

body.bank-unified-workspace #bankOverlay .bank-primary-tab .bank-tab-badge {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid #a86351;
  border-radius: 50%;
  background: #763c2f;
  color: #ffe4ca;
  font-family: var(--font-readable, Arial, sans-serif);
  font-size: 13px;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.54fr) minmax(330px, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 15px 14px 12px;
  overflow: hidden;
}

body.bank-unified-workspace #bankOverlay .bank-workspace-panels.is-freight {
  grid-template-columns: minmax(0, 1.1fr) minmax(370px, 1fr);
}

body.bank-unified-workspace #bankOverlay .bank-workspace-panels.is-market {
  grid-template-columns: minmax(0, 1fr);
}

body.bank-unified-workspace #bankOverlay .bank-workspace-panels > [hidden],
body.bank-unified-workspace #bankOverlay .bank-workspace-panels > .hidden {
  display: none !important;
}

body.bank-unified-workspace #bankOverlay .bank-storage-panel.bank-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.bank-unified-workspace #bankOverlay .bank-storage-panel > .bank-grid-card {
  flex: 1;
  gap: 0;
  margin: 0;
  padding: 10px;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: var(--material-wood-deep);
  box-shadow: inset 0 1px 0 var(--bank-panel-highlight);
  overflow: hidden;
  container-type: inline-size;
}

body.bank-unified-workspace #bankOverlay .bank-grid-heading,
body.bank-unified-workspace #bankOverlay .bank-panel-heading {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 37px;
  margin-bottom: 10px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--bank-panel-border);
  color: var(--ui-text);
}

body.bank-unified-workspace #bankOverlay .bank-grid-heading h3,
body.bank-unified-workspace #bankOverlay .bank-panel-heading h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
}

body.bank-unified-workspace #bankOverlay .bank-panel-heading > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay h3.bank-panel-heading {
  justify-content: flex-start;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

body.bank-unified-workspace #bankOverlay .bank-storage-toggle {
  min-width: 38px;
  min-height: 34px;
  height: auto;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 12px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-toggle-icon {
  width: 24px;
  height: 24px;
}

body.bank-unified-workspace #bankOverlay .bank-category-control {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 37px;
  padding-left: 6px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: var(--material-wood-deep);
}

body.bank-unified-workspace #bankOverlay .bank-category-control > img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay .bank-category-control > select {
  flex: 1;
  width: 0;
  padding-left: 4px;
  padding-right: 3px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.bank-unified-workspace #bankOverlay .bank-controls {
  flex: 0 0 auto;
  grid-template-columns: minmax(130px, 1fr) minmax(120px, .63fr) 88px auto;
  gap: 7px;
  margin: 0 0 10px;
}

body.bank-unified-workspace #bankOverlay .bank-search,
body.bank-unified-workspace #bankOverlay .bank-controls select,
body.bank-unified-workspace #bankOverlay .bank-organize-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 37px;
  border-color: var(--bank-panel-border);
  border-radius: 4px;
  font-size: 13px;
}

body.bank-unified-workspace #bankOverlay .bank-search {
  gap: 8px;
  padding: 0 9px;
}

body.bank-unified-workspace #bankOverlay .bank-search-icon {
  position: relative;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border: 2px solid #b9a67f;
  border-radius: 50%;
  box-sizing: border-box;
  filter: drop-shadow(0 1px 1px #000);
}

body.bank-unified-workspace #bankOverlay .bank-search-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -3px;
  width: 8px;
  height: 2px;
  background: #b9a67f;
  transform: rotate(48deg);
  border-radius: 1px;
}

body.bank-unified-workspace #bankOverlay .bank-search input {
  min-height: 32px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}

body.bank-unified-workspace #bankOverlay .bank-search img,
body.bank-unified-workspace #bankOverlay .bank-filter-icon,
body.bank-unified-workspace #bankOverlay .bank-controls-toggle img,
body.bank-unified-workspace #bankOverlay .bank-organize-btn img {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay .bank-organize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  white-space: nowrap;
  background: linear-gradient(180deg, #292b22, #171b14) !important;
  border: 1px solid var(--bank-panel-border) !important;
  box-shadow: inset 0 1px 0 rgba(226, 211, 174, .07), inset 0 1px 4px rgba(0, 0, 0, .25);
}

body.bank-unified-workspace #bankOverlay .bank-storage-panel .bank-slots {
  flex: 1;
  height: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--bank-workspace-bank-columns, repeat(var(--bank-columns), minmax(0, 1fr)));
  grid-auto-rows: var(--bank-workspace-bank-row-size, calc((100cqw - var(--bank-grid-gaps)) / var(--bank-columns)));
  align-content: start;
  justify-content: center;
  gap: 3px;
  padding: 0 5px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

body.bank-unified-workspace #bankOverlay .bank-storage-panel .bank-slot {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 1px;
  border-color: rgba(167, 128, 76, .34);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .55);
}

body.bank-unified-workspace #bankOverlay .bank-storage-panel .bank-slot img:not(.item-composite-layer),
body.bank-unified-workspace #bankOverlay .bank-storage-panel .bank-slot .item-composite-icon {
  width: 80%;
  height: 80%;
  max-width: var(--bank-workspace-bank-slot-size, 76px);
  max-height: var(--bank-workspace-bank-slot-size, 76px);
}

body.bank-unified-workspace #bankOverlay .bank-amount {
  bottom: 2px;
  right: 3px;
  padding: 0 3px;
  border: 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, .6);
  font-size: 12px;
  line-height: 17px;
  text-shadow: 0 1px 2px #000;
}

body.bank-unified-workspace #bankOverlay .bank-storage-footer {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 37px;
  margin-top: 0;
  padding: 6px 9px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 3px;
  background: rgba(8, 10, 7, .34);
  font-size: 13px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-footer > span,
body.bank-unified-workspace #bankOverlay .bank-storage-footer > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-footer img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay .bank-storage-footer button {
  min-height: 29px;
  padding: 3px 10px;
  font-size: 12px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-expansions {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 8px 12px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: var(--material-wood-deep);
  box-shadow: inset 0 1px 0 var(--bank-panel-highlight);
}

body.bank-unified-workspace #bankOverlay .bank-expansions-label {
  margin-right: auto;
  max-width: 126px;
  font-family: var(--font-accent);
  font-size: 14px;
  line-height: 1.2;
  color: var(--mg-parchment-dim, #d6c39a);
}

body.bank-unified-workspace #bankOverlay .bank-storage-expansions .bank-hero-bags {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 3px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot > img {
  width: 33px;
  height: 33px;
}

body.bank-unified-workspace #bankOverlay .bank-storage-expansions .bank-chest-picker {
  padding-left: 12px;
  border-left: 1px solid var(--bank-panel-border);
}

body.bank-unified-workspace #bankOverlay .bank-inventory-dock,
body.bank-unified-workspace #bankOverlay .bank-freight-panel,
body.bank-unified-workspace #bankOverlay .bank-market-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: var(--material-wood-deep);
  box-shadow: inset 0 1px 0 var(--bank-panel-highlight);
}

body.bank-unified-workspace #bankOverlay .bank-inventory-dock {
  overflow: visible;
}

/* A nested live overlay must neither cover the screen nor apply UI zoom twice. */
body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] {
  position: relative !important;
  inset: auto !important;
  z-index: auto;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
  overflow: visible;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] #inventoryContent {
  position: static !important;
  inset: auto !important;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  zoom: 1 !important;
  transform: none !important;
  pointer-events: auto;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-window {
  position: relative !important;
  inset: auto !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  zoom: 1 !important;
  overflow: visible;
  container-type: inline-size;
  container-name: bank-inventory;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-window > .mg-frame-art,
body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-window::after,
body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero::after {
  display: none;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero {
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: contents;
  height: auto !important;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero > .bank-hero-main {
  grid-column: 1;
  grid-row: 1;
  min-height: 37px;
  margin: 0 0 10px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--bank-panel-border);
  display: flex;
  justify-content: space-between;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-icon-wrap,
body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-label,
body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-window-controls,
body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-tools-toggle {
  display: none !important;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-copy h2 {
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-copy {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

body.bank-unified-workspace #bankOverlay .bank-inventory-capacity {
  color: var(--ui-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-hero-tools {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  margin-top: 11px;
  padding: 0;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-hero-bank-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid #9b9d60 !important;
  border-radius: 4px;
  background: linear-gradient(180deg, #4c6032, #243b1b) !important;
  box-shadow: inset 0 0 0 2px rgba(12, 23, 8, .6), inset 0 1px 0 rgba(229, 226, 157, .3) !important;
  color: #eee4bc;
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-hero-bank-action img {
  width: 24px;
  height: 24px;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .bank-hero-bags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 55px;
  padding-top: 8px;
  border-top: 1px solid var(--bank-panel-border);
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bag-group {
  gap: 7px;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-special-bag-group {
  padding: 0 8px;
  border-right: 0;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bag-slot {
  border-radius: 3px;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-window > .bank-body {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .bank-grid-card {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-slots {
  display: grid;
  flex: 1;
  grid-template-columns: var(--bank-workspace-inventory-columns, repeat(var(--bank-inventory-columns), minmax(0, 1fr)));
  grid-auto-rows: var(--bank-workspace-inventory-row-size, calc((100cqw - var(--bank-inventory-grid-gaps)) / var(--bank-inventory-columns)));
  align-content: start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  padding-right: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-slot {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-color: rgba(167, 128, 76, .34);
  border-radius: 1px;
}

body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-slot > img:not(.item-composite-layer),
body.management-workspace-bank.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-slot > .item-composite-icon {
  width: 80%;
  height: 80%;
  max-width: var(--bank-workspace-inventory-slot-size, 76px);
  max-height: var(--bank-workspace-inventory-slot-size, 76px);
}

body.bank-unified-workspace #bankOverlay .management-discard-zone {
  display: none;
  flex: 0 0 auto;
  min-height: 25px;
  margin-top: 8px;
  padding: 4px 8px;
  border-color: rgba(167, 128, 76, .22);
  border-radius: 3px;
  font-size: 10px;
  opacity: .62;
}

body.bank-unified-workspace.item-drag-active #bankOverlay .management-discard-zone {
  display: flex;
  opacity: 1;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel {
  padding: 12px;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 4px;
  background: rgba(7, 10, 6, .35);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .3);
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction [data-freight-direction] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 37px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-muted);
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction [data-freight-direction] img {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  object-fit: contain;
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction [data-freight-direction]:hover {
  border-color: var(--bank-panel-border);
  background: rgba(167, 128, 76, .08);
  color: var(--ui-text);
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction [data-freight-direction][aria-pressed="true"] {
  border-color: var(--mg-bronze, #a7804c);
  background: linear-gradient(180deg, rgba(103, 112, 65, .52), rgba(44, 58, 31, .72));
  box-shadow: inset 0 1px 0 rgba(237, 219, 164, .12);
  color: #f1dfb5;
}

body.bank-unified-workspace #bankOverlay .bank-freight-direction [data-freight-direction]:disabled {
  opacity: .45;
  cursor: default;
}

body.bank-unified-workspace #bankOverlay .bank-shipment-route {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 9px;
  border-left: 2px solid rgba(167, 128, 76, .6);
  background: rgba(119, 128, 83, .06);
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel > h3 {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 2px 7px;
  border-bottom: 1px solid var(--bank-panel-border);
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 500;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart > * {
  flex: 0 0 auto;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-head {
  gap: 12px;
  padding: 2px 0;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-head > div > span {
  display: none;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-head strong {
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

body.bank-unified-workspace #bankOverlay .bank-shipment-destination {
  box-sizing: border-box;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 3px;
  background: rgba(119, 112, 83, .07);
  font-family: var(--font-accent);
  font-size: 14px;
}

body.bank-unified-workspace #bankOverlay .bank-shipment-destination select {
  min-height: 35px;
  padding: 6px 10px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 3px;
  font-family: var(--font-readable, Arial, sans-serif);
  font-size: 13px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-list {
  box-sizing: border-box;
  grid-template-columns: repeat(var(--bank-freight-slots, 5), minmax(0, 1fr));
  min-height: 84px;
  max-height: 200px;
  align-content: start;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--bank-panel-border);
  border-radius: 3px;
  background: rgba(4, 6, 4, .3);
  overflow-y: auto;
}

.bank-shipment-cart-empty-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 54px;
  padding: 5px 12px;
  border: 1px dashed rgba(167, 128, 76, .35);
  border-radius: 2px;
  color: var(--ui-text-muted, #c9b990);
  background: rgba(4, 6, 4, .18);
  font-size: 12px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-empty-slot {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 120px;
  padding: 8px 4px;
  text-align: center;
}

.bank-shipment-cart-empty-slot > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(167, 128, 76, .25);
  color: #a7804c;
}

[data-shipment-cart-item] { cursor: grab; touch-action: none; }
[data-shipment-cart-item].dragging { cursor: grabbing; opacity: .45; }

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-list > .bank-freight-drop-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 7px;
  border: 1px dashed var(--bank-panel-border);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

body.bank-unified-workspace #bankOverlay [data-bank-freight-drop].is-item-pointer-drop-target {
  outline: 2px solid var(--mg-bronze, #a7804c);
  outline-offset: -3px;
  background: rgba(104, 115, 74, .25);
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-list > p:not(.bank-freight-drop-hint) {
  align-self: center;
  padding: 20px 12px;
  line-height: 1.5;
  text-align: center;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  min-width: 0;
  min-height: 120px;
  padding: 5px 7px;
  border: 1px solid rgba(167, 128, 76, .25);
  border-radius: 2px;
  background: rgba(64, 66, 47, .12);
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-item > img {
  grid-column: 1 / -1;
  justify-self: center;
  width: 42px;
  height: 42px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-item > span {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-accent);
  font-size: 12px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-item button {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 3px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-cargo-preview {
  gap: 6px;
  padding: 8px 10px;
  border-color: var(--bank-panel-border);
  border-radius: 3px;
  background: rgba(119, 112, 83, .07);
  color: var(--ui-text);
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-cargo-meter progress {
  height: 10px;
  accent-color: #80964f;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-actions {
  position: static;
  margin-top: 0;
  padding-top: 4px;
}

body.bank-unified-workspace #bankOverlay .bank-freight-panel .bank-shipment-cart-actions button {
  flex: 0 1 auto;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--mg-bronze, #a7804c);
  border-radius: 4px;
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 500;
}

body.bank-unified-workspace #bankOverlay .bank-shipment-status {
  flex: 0 0 auto;
  max-height: 125px;
  padding: 11px;
  border-color: var(--bank-panel-border);
  border-radius: 4px;
  background: var(--material-wood-deep);
  overflow-y: auto;
}

body.bank-unified-workspace #bankOverlay .bank-storage-popover {
  top: calc(var(--bank-header-height) + 100px);
  left: 20px;
  right: auto;
  max-width: min(640px, calc(100% - 40px));
  border-color: var(--mg-bronze, #a7804c);
  border-radius: 4px;
  background: var(--material-wood-deep);
  z-index: 20;
}

body.bank-unified-workspace #bankOverlay .bank-market-panel {
  grid-column: 1 / -1;
  overflow: hidden;
}

body.bank-unified-workspace #bankOverlay .bank-market-collection {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  background: transparent;
}

body.bank-unified-workspace #bankOverlay .bank-market-collection .trade-office-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  background: transparent;
}

body.bank-unified-workspace #bankOverlay .bank-market-panel > .overlay {
  position: relative !important;
  inset: auto !important;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
}

/* Coin transfers belong to the balances within the bank header. */
body.bank-unified-workspace #playerCoins,
body.bank-unified-workspace #playerCoins:hover {
  cursor: default;
}

@container bank-workspace (max-width: 1200px) {
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    --bank-columns: 8;
    --bank-grid-gaps: 26px;
    --bank-inventory-columns: 5;
    --bank-inventory-grid-gaps: 17px;
  }
  body.bank-unified-workspace #bankOverlay .bank-window > .bank-workspace-header {
    grid-template-columns: minmax(0, 1fr) auto 76px;
    gap: 10px;
    min-height: 90px;
    padding-right: 10px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance {
    flex-direction: column;
    gap: 5px;
    min-height: 54px;
    padding: 6px 11px;
    font-size: 14px;
  }
  body.bank-unified-workspace #bankOverlay .bank-balance .bank-confirm-coins {
    gap: 6px;
    font-size: 14px;
  }
  body.bank-unified-workspace #bankOverlay .bank-balance .bank-confirm-coins img {
    width: 18px;
    height: 18px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    grid-template-columns: minmax(0, 1.4fr) minmax(290px, 1fr);
    gap: 10px;
    padding: 12px 10px 10px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tabs,
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    min-height: 44px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    padding-block: 6px;
    font-size: 18px;
  }
  body.bank-unified-workspace #bankOverlay .bank-grid-heading,
  body.bank-unified-workspace #bankOverlay .bank-panel-heading {
    min-height: 34px;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  body.bank-unified-workspace #bankOverlay .bank-grid-heading h3,
  body.bank-unified-workspace #bankOverlay .bank-panel-heading h3,
  body.bank-unified-workspace #bankOverlay h3.bank-panel-heading,
  body.bank-unified-workspace #bankOverlay .bank-freight-panel > h3,
  body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-copy h2 {
    font-size: 19px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels.is-freight {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr);
  }
  body.bank-unified-workspace #bankOverlay .bank-controls {
    grid-template-columns: minmax(110px, 1fr) minmax(108px, .8fr) 76px;
  }
  body.bank-unified-workspace #bankOverlay .bank-organize-btn {
    grid-column: 1 / -1;
    min-height: 29px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions {
    gap: 6px;
    min-height: 56px;
    padding: 6px 9px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-footer {
    min-height: 33px;
    padding: 4px 9px;
    font-size: 12px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot > img {
    width: 28px;
    height: 28px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions .bank-hero-bags {
    gap: 6px;
  }
  body.bank-unified-workspace #bankOverlay .bank-expansions-label {
    max-width: 100px;
    font-size: 14px;
  }
}

@container bank-workspace (max-width: 850px) {
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    --bank-columns: 5;
    --bank-grid-gaps: 17px;
    --bank-inventory-columns: 4;
    --bank-inventory-grid-gaps: 14px;
  }
  body.bank-unified-workspace #bankOverlay .bank-window > .bank-workspace-header {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-areas: "main close" "balances balances";
    min-height: 130px;
    gap: 9px;
    padding: 12px 12px 10px 85px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-pennant {
    left: 5px;
    width: 70px;
    height: 117px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-label {
    font-size: 13px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances {
    position: relative;
    justify-content: stretch;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-hero-coins-wrap {
    position: static;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-coin-action-menu {
    right: 0;
    width: min(360px, calc(100cqw - 24px));
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances > * {
    flex: 1;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance {
    flex-direction: row;
    width: 100%;
    min-height: 39px;
    padding: 5px 7px;
    font-size: 13px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tabs {
    min-height: 48px;
    padding-left: 12px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    min-height: 47px;
    gap: 8px;
    padding: 7px 10px;
    font-size: 16px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tab img {
    width: 26px;
    height: 26px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 1fr);
    gap: 8px;
    padding: 10px 8px 8px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels.is-freight {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }
  body.bank-unified-workspace #bankOverlay .bank-grid-heading h3,
  body.bank-unified-workspace #bankOverlay .bank-panel-heading h3,
  body.bank-unified-workspace #bankOverlay h3.bank-panel-heading,
  body.bank-unified-workspace #bankOverlay .bank-freight-panel > h3,
  body.bank-unified-workspace #bankOverlay #inventoryOverlay[data-bank-docked] .inventory-bank-hero .bank-hero-copy h2 {
    font-size: 18px;
  }
  body.bank-unified-workspace #bankOverlay .bank-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  }
  body.bank-unified-workspace #bankOverlay .bank-search {
    grid-column: 1 / -1;
  }
  body.bank-unified-workspace #bankOverlay .bank-organize-btn {
    grid-column: auto;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions {
    flex-wrap: wrap;
    gap: 5px;
  }
  body.bank-unified-workspace #bankOverlay .bank-expansions-label {
    max-width: none;
    width: 100%;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
}

@container bank-workspace (max-width: 600px) {
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    --bank-columns: 7;
    --bank-grid-gaps: 23px;
    --bank-inventory-columns: 5;
    --bank-inventory-grid-gaps: 17px;
  }
  body.bank-unified-workspace #bankOverlay .bank-window > .bank-workspace-header {
    padding-left: 68px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-pennant {
    width: 55px;
    height: 98px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-copy h2 {
    font-size: 22px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-hero-label {
    font-size: 12px;
  }
  body.bank-unified-workspace #bankOverlay .bank-balance-label > img {
    display: none;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-balances .bank-balance {
    flex-direction: column;
    gap: 3px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tabs {
    gap: 4px;
    padding: 0 5px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    gap: 6px;
    padding: 7px 5px;
    font-size: 16px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels,
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels.is-freight {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-panel.bank-body {
    flex: 0 0 380px;
    overflow: visible;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-panel > .bank-grid-card {
    min-height: 290px;
  }
  body.bank-unified-workspace #bankOverlay .bank-inventory-dock {
    flex: 0 0 420px;
  }
  body.bank-unified-workspace #bankOverlay .bank-freight-panel {
    flex: 0 0 auto;
    min-height: 420px;
    overflow: visible;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions {
    flex-wrap: nowrap;
    min-height: 58px;
  }
  body.bank-unified-workspace #bankOverlay .bank-expansions-label {
    width: auto;
    max-width: 100px;
    font-size: 12px;
  }
}

@media (max-height: 720px) and (min-width: 850px) {
  body.management-workspace-bank.bank-unified-workspace {
    --bank-header-height: 87px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-header .bank-pennant {
    width: 70px;
    height: 117px;
    left: 15px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tabs,
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    min-height: 44px;
  }
  body.bank-unified-workspace #bankOverlay .bank-primary-tab {
    padding-block: 5px;
  }
  body.bank-unified-workspace #bankOverlay .bank-workspace-panels {
    padding-top: 10px;
    padding-bottom: 8px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions {
    min-height: 55px;
    padding-block: 5px;
  }
  body.bank-unified-workspace #bankOverlay .bank-storage-expansions .inventory-bag-slot {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
}