/* ============================================================================
   D2 GUN LOCKER  -  02-refinements-3.css  (part 3 of 3)
   ----------------------------------------------------------------------------
   Contiguous slice of the original stylesheet, cut only at rule boundaries and
   kept in EXACT cascade order (no rules reordered/removed). Load parts in order.
   Late style overrides; load after all 01-core parts.
   ============================================================================ */

  body[data-current-page="build-crafter"] .bc-mod-box:not(:hover):not(:focus-visible):not(.active),
  body[data-current-page="build-crafter"] .bc-mod-box.stat:not(:hover):not(:focus-visible):not(.active),
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-mod-box:not(:hover):not(:focus-visible):not(.active),
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-mod-box.stat:not(:hover):not(:focus-visible):not(.active) {
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(0,0,0,.34) !important;
    color: rgba(255,255,255,.66) !important;
    box-shadow: none !important;
  }

  body[data-current-page="build-crafter"] .bc-mod-box.filled:not(:hover):not(:focus-visible):not(.active),
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-mod-box.filled:not(:hover):not(:focus-visible):not(.active) {
    border: 1px solid rgba(255,255,255,.30) !important;
    background: rgba(0,0,0,.30) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body[data-current-page="build-crafter"] .bc-focus-box.disabled,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled,
  body[data-current-page="build-crafter"] .bc-focus-box.disabled:hover,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled:hover,
  body[data-current-page="build-crafter"] .bc-focus-box.disabled:focus-visible,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled:focus-visible,
  body[data-current-page="build-crafter"] .bc-focus-box.disabled.active,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled.active,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-focus-box.disabled,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-bonus-box.disabled,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-focus-box.disabled:hover,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-bonus-box.disabled:hover,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-focus-box.disabled:focus-visible,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-bonus-box.disabled:focus-visible,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-focus-box.disabled.active,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-bonus-box.disabled.active {
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(0,0,0,.34) !important;
    color: rgba(255,255,255,.44) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }

  body[data-current-page="build-crafter"] .bc-focus-box.disabled .bc-focus-name,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled .bc-bonus-name,
  body[data-current-page="build-crafter"] .bc-focus-box.disabled .bc-focus-symbol,
  body[data-current-page="build-crafter"] .bc-bonus-box.disabled .bc-bonus-symbol,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-focus-box.disabled .bc-focus-name,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-bonus-box.disabled .bc-bonus-name {
    color: rgba(255,255,255,.44) !important;
    text-shadow: none !important;
    filter: none !important;
  }

  body[data-current-page="build-crafter"] .bc-package-placeholder,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-package-placeholder,
  body[data-current-page="build-crafter"] .bc-armor-row.active .bc-package-box:not(:hover):not(:focus-visible):not(.active) .bc-package-placeholder {
    color: var(--accent-dim) !important;
    text-shadow: 0 0 8px rgba(var(--accent-rgb),.20) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .logo { cursor: pointer; }
  /* The Armor Picker page doesn't use the header search; reserve its space so the page-nav
     buttons stay in the same spot on every page, but keep the bar itself hidden. */
  body[data-current-page="build-crafter"] .search-container { visibility: hidden; pointer-events: none; }

  /* Clear (X) button inside the search bar — visible only when the field has text. */
  .search-input { padding-right: 38px !important; }
  .search-clear {
    position: absolute;
    right: 7px;
    top: calc(50% - 13px); /* vertical centre without transform — immune to :hover transform resets */
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .search-clear:hover { background: rgba(255,255,255,0.16); color: #fff; }
  .search-clear:active { background: rgba(255,255,255,0.22); }
  .search-input:not(:placeholder-shown) ~ .search-clear { display: flex; }

  .weapon-archetype-inline { color: var(--text-dim); font-weight: 600; }

  .stats-fill.positive {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.82) 0%,
      rgba(255,255,255,0.82) var(--base-stop, 0%),
      #43d17a var(--base-stop, 0%),
      #43d17a 100%) !important;
  }
  .stats-fill.negative {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.82) 0%,
      rgba(255,255,255,0.82) var(--loss-stop, 0%),
      #e25555 var(--loss-stop, 0%),
      #e25555 100%) !important;
  }
  .build-btn.compare-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }

  .build-btn.compare-disabled {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .card-compare-btn.compare-disabled,
  .card-compare-btn:disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    border-color: var(--border-dim) !important;
    color: var(--text-dim) !important;
    background: rgba(10,12,16,0.55) !important;
    box-shadow: none !important;
  }

  .card-compare-btn.compare-disabled:hover,
  .card-compare-btn:disabled:hover {
    color: var(--text-dim) !important;
    border-color: var(--border-dim) !important;
    background: rgba(10,12,16,0.55) !important;
  }

  #weaponFilterPanel .clear-filter-btn.select-all-filter-btn {
    border-color: rgba(104,227,148,0.46) !important;
    background: rgba(104,227,148,0.12) !important;
    color: #bdf7cf !important;
    box-shadow: none !important;
  }

  #weaponFilterPanel .clear-filter-btn.select-all-filter-btn:hover {
    border-color: rgba(104,227,148,0.76) !important;
    background: rgba(104,227,148,0.20) !important;
    color: #ecfff2 !important;
    box-shadow: 0 0 0 1px rgba(104,227,148,0.10) inset, 0 8px 20px rgba(104,227,148,0.12) !important;
  }

  #weaponFilterPanel .clear-filter-btn,
  #armorFilterPanel .clear-filter-btn {
    min-height: 21px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.55px !important;
    line-height: 1 !important;
  }

  #weaponFilterPanel .clear-filter-btn.select-all-filter-btn,
  #armorFilterPanel .clear-filter-btn.select-all-filter-btn {
    padding: 3px 8px !important;
  }

  :root {
    --sticky-filter-top: calc(var(--strip-h) + 12px);
  }

  #weaponFilterPanel,
  #armorFilterPanel {
    position: sticky !important;
    top: var(--sticky-filter-top) !important;
    z-index: 88 !important;
    align-self: start !important;
    margin-bottom: 10px !important;
  }

  /* (Old armor z-index/opaque-fill attempt removed: z-order was never the issue —
     cards sit below the sticky bar; the bar is transparent by design and the armor
     page now gets the same ::after backdrop cover as weapons, see the
     @media (min-width:841px) pinned-pane block.) */

  /* FILTER BOXES WRAP INSTEAD OF SHRINK (Mo: hold the base box width; as the slider
     narrows the pane the boxes reflow into a vertical stack rather than getting thinner).
     The base layout is a single scrolling row (grid-auto-flow:column + grid-auto-columns +
     grid-template-columns:none!important). Setting an explicit auto-fill template flips it
     to wrap and makes every grid-auto-columns override (260/210/110px, calc, mobile) inert,
     so this one late rule covers all states. --d2gl-filter-box-w = the min box width before
     a box drops to the next row (tweak in one place). */
  :root { --d2gl-filter-box-w: 210px; }
  .weapon-filter-grid,
  .armor-filter-grid,
  #weaponFilterPanel .weapon-filter-grid,
  #armorFilterPanel .weapon-filter-grid,
  #armorFilterPanel .armor-filter-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--d2gl-filter-box-w), 100%), 1fr)) !important;
    grid-auto-flow: row !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  #weaponFilterPanel .weapon-filter-panel,
  #armorFilterPanel .weapon-filter-panel,
  #armorFilterPanel .armor-filter-panel {
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  }

  #weaponFilterPanel.filters-minimized .weapon-filter-panel,
  #armorFilterPanel.filters-minimized .weapon-filter-panel,
  #armorFilterPanel.filters-minimized .armor-filter-panel {
    margin-bottom: 6px !important;
  }

  #weaponFilterPanel.filters-minimized .weapon-filter-grid,
  #weaponFilterPanel.filters-minimized .weapon-filter-footer,
  #armorFilterPanel.filters-minimized .weapon-filter-grid,
  #armorFilterPanel.filters-minimized .armor-filter-grid,
  #armorFilterPanel.filters-minimized .weapon-filter-footer {
    display: none !important;
  }

  #weaponFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .armor-filter-title-row {
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background .12s ease, border-color .12s ease !important;
  }

  #weaponFilterPanel .weapon-filter-title-row:hover,
  #armorFilterPanel .weapon-filter-title-row:hover,
  #armorFilterPanel .armor-filter-title-row:hover {
    background: rgba(255,255,255,0.028) !important;
  }

  #weaponFilterPanel .weapon-filter-title-row .weapon-filter-title,
  #armorFilterPanel .weapon-filter-title-row .weapon-filter-title,
  #armorFilterPanel .armor-filter-title-row .armor-filter-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .filter-minimize-toggle {
    display: none !important;
  }

  .filter-minimize-arrow {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    box-shadow: none !important;
    pointer-events: none;
    transition: color .12s ease, transform .12s ease;
  }

  #weaponFilterPanel .weapon-filter-title-row:hover .filter-minimize-arrow,
  #armorFilterPanel .weapon-filter-title-row:hover .filter-minimize-arrow,
  #armorFilterPanel .armor-filter-title-row:hover .filter-minimize-arrow {
    color: var(--text-primary);
  }

  .filters-minimized .filter-minimize-arrow {
    color: #b7daf3;
  }

  #weaponFilterPanel.filters-minimized .weapon-filter-title-row,
  #armorFilterPanel.filters-minimized .weapon-filter-title-row,
  #armorFilterPanel.filters-minimized .armor-filter-title-row {
    border-bottom: 0 !important;
  }

  @media (max-width: 900px) {
    #weaponFilterPanel,
    #armorFilterPanel {
      top: var(--sticky-filter-top) !important;
      z-index: 88 !important;
    }

    .filter-minimize-arrow {
      width: 22px;
      height: 22px;
      flex-basis: 22px;
      font-size: 15px;
    }
  }

  /* (ui8) Window title headers removed - close is a floating circle X. */

  #buildWindowPanel .build-title-row,
  #armorDetailPanel .armor-detail-header-row {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #buildWindowPanel .window-minimize-arrow,
  #armorDetailPanel .window-minimize-arrow {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    box-shadow: none !important;
    pointer-events: none;
    margin-left: 2px;
    transition: color .12s ease, transform .12s ease;
  }

  #buildWindowPanel .build-window-header:hover .window-minimize-arrow,
  #armorDetailPanel .armor-detail-header:hover .window-minimize-arrow {
    color: var(--text-primary);
  }

  #buildWindowPanel.window-minimized .window-minimize-arrow,
  #armorDetailPanel.window-minimized .window-minimize-arrow {
    color: #b7daf3;
  }

  #buildWindowPanel.window-minimized,
  #armorDetailPanel.window-minimized {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Minimized = header + action tabs still visible, only the content collapses.
     This matches the armor window, whose header controls stay visible when
     minimized - so a first-time visitor always sees the Alternatives / Perk
     Filter / Inspect / Compare / Stats tabs and knows the window exists. */
  #buildWindowPanel.window-minimized .build-content,
  #armorDetailPanel.window-minimized .armor-detail-content {
    display: none !important;
  }

  #buildWindowPanel.window-minimized .build-actions {
    border-bottom: 0 !important;
  }

  #buildWindowPanel.window-minimized .build-window-header,
  #armorDetailPanel.window-minimized .armor-detail-header {
    border-bottom: 0 !important;
  }

  @media (max-width: 900px) {
    #buildWindowPanel .window-minimize-arrow,
    #armorDetailPanel .window-minimize-arrow {
      width: 22px;
      height: 22px;
      flex-basis: 22px;
      font-size: 15px;
    }
  }

  #buildWindowPanel .build-title-row,
  #armorDetailPanel .armor-detail-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #buildWindowPanel .build-title-row > :first-child,
  #armorDetailPanel .armor-detail-header-row > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* (ui6) Both clear controls are corner X buttons now - see CLOSE X block. */

  #buildWindowPanel .build-title-row .window-minimize-arrow,
  #armorDetailPanel .armor-detail-header-row .window-minimize-arrow {
    margin-left: 0 !important;
  }

  #weaponFilterPanel .select-all-top-filter,
  #armorFilterPanel .select-all-top-filter {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(104,227,148,0.55) !important;
    background: rgba(104,227,148,0.13) !important;
    color: #bdf7cf !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto !important;
    box-shadow: none !important;
  }

  #weaponFilterPanel .select-all-top-filter:hover,
  #armorFilterPanel .select-all-top-filter:hover {
    border-color: rgba(104,227,148,0.82) !important;
    background: rgba(104,227,148,0.22) !important;
    color: #ecfff2 !important;
    box-shadow: 0 0 0 1px rgba(104,227,148,0.12) inset, 0 8px 20px rgba(104,227,148,0.12) !important;
  }

  #weaponFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .armor-filter-title-row {
    gap: 8px !important;
  }

  @media (max-width: 700px) {
    #weaponFilterPanel .select-all-top-filter,
    #armorFilterPanel .select-all-top-filter {
      padding: 5px 9px;
      font-size: 10px;
    }
  }

  /* (content-visibility / intrinsic-size for cards is declared ONCE, in the
     virtualization block near line ~3450 — the old duplicate here disagreed
     with three other declarations and caused scrollbar jumping.) */
  .weapon-grid,
  .armor-grid {
    overflow-anchor: none;
  }

  .weapon-filter-chip,
  .filter-chip,
  .weapon-card,
  .armor-card,
  .armor-item {
    will-change: auto;
  }

  /* (Exotics previously had no archetype, so their badge was hidden. They now
     carry their intrinsic-perk name in that badge - the equivalent of a
     legendary's frame - so it must show. The old display:none rule was removed.) */

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot {
    border-color: rgba(104,227,148,0.58);
    background: rgba(104,227,148,0.09);
    color: #a6f0c0;
  }
  .destiny-crafter .dc-mod-box.exotic-catalyst-slot:hover {
    border-color: rgba(104,227,148,0.9);
    box-shadow: 0 0 0 1px rgba(104,227,148,0.16), 0 0 14px rgba(104,227,148,0.12);
  }
  .destiny-crafter .dc-mod-box.exotic-catalyst-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .destiny-crafter .dc-mod-box.exotic-catalyst-slot .dc-catalyst-fallback {
    color: #a6f0c0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
  }
  .destiny-crafter .dc-mod-box.exotic-catalyst-slot::after {
    color: rgba(166,240,192,0.58);
  }

  .weapon-card.exotic .perk-column.exotic-intrinsic-column {
    border-color: rgba(206,174,51,0.42);
    background: rgba(206,174,51,0.045);
  }
  .weapon-card.exotic .perk-column.exotic-intrinsic-column .perk-col-header { color: var(--accent); }
  .weapon-card.exotic .perk-column.exotic-catalyst-column {
    border-color: rgba(104,227,148,0.34);
    background: rgba(104,227,148,0.035);
  }
  .weapon-card.exotic .perk-column.exotic-catalyst-column .perk-col-header { color: #68e394; }
  .weapon-card.exotic .perk-item.exotic-intrinsic-perk .perk-name {
    color: var(--accent-bright);
    font-weight: 800;
  }
  .weapon-card.exotic .perk-item.exotic-catalyst-perk .perk-name {
    color: #a6f0c0;
    font-weight: 800;
  }

  :root {
    --sticky-flush-top: var(--sticky-filter-top, 82px);
  }

  #weaponFilterPanel,
  #armorFilterPanel {
    top: var(--sticky-flush-top) !important;
  }

  #buildWindowPanel.build-window,
  #armorDetailPanel.armor-detail-window,
  .build-window#buildWindowPanel,
  .armor-detail-window#armorDetailPanel {
    top: var(--sticky-flush-top) !important;
    height: calc(100vh - var(--sticky-flush-top) - 18px) !important;
  }

  #weaponFilterPanel .weapon-filter-panel,
  #armorFilterPanel .weapon-filter-panel,
  #armorFilterPanel .armor-filter-panel,
  #buildWindowPanel.build-window {
    background: var(--bg-card) !important;
  }

  @media (max-width: 840px) {
    #buildWindowPanel.build-window,
    #armorDetailPanel.armor-detail-window,
    .build-window#buildWindowPanel,
    .armor-detail-window#armorDetailPanel {
      top: auto !important;
      height: auto !important;
    }
  }

  :root {
    --sticky-sealed-top: calc(var(--sticky-filter-top, 82px) - 2px);
  }

  #weaponFilterPanel,
  #armorFilterPanel {
    top: var(--sticky-sealed-top) !important;
    margin-top: 0 !important;
    z-index: 89 !important;
    background: var(--bg-card) !important;
  }

  #buildWindowPanel.build-window,
  #armorDetailPanel.armor-detail-window,
  .build-window#buildWindowPanel,
  .armor-detail-window#armorDetailPanel {
    top: var(--sticky-sealed-top) !important;
    height: calc(100vh - var(--sticky-sealed-top) - 18px) !important;
  }

  #weaponFilterPanel .weapon-filter-panel,
  #armorFilterPanel .weapon-filter-panel,
  #armorFilterPanel .armor-filter-panel,
  #buildWindowPanel.build-window,
  #armorDetailPanel.armor-detail-window {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  #weaponFilterPanel::before,
  #armorFilterPanel::before,
  #buildWindowPanel.build-window::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -4px;
    height: 5px;
    background: var(--bg-card);
    pointer-events: none;
    z-index: -1;
  }

  @media (max-width: 840px) {
    #buildWindowPanel.build-window,
    #armorDetailPanel.armor-detail-window,
    .build-window#buildWindowPanel,
    .armor-detail-window#armorDetailPanel {
      top: auto !important;
      height: auto !important;
    }

    #buildWindowPanel.build-window::before,
    #armorDetailPanel.armor-detail-window::before {
      display: none !important;
    }
  }

  #armorGrid .armor-card-top {
    align-items: center !important;
  }

  #armorGrid .armor-db-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  /* The source chip is a grid item in the line above; default justify-items:stretch
     blew it out to the full card width. Start-align ONLY the chip so it hugs its text;
     the name/meta keep stretch so their ellipsis still works. */
  #armorGrid .weapon-source { justify-self: start; }

  /* Match the weapon-card box: a weapon card = header (.card-top) + one perk row, so
     armor cards (header only) come out shorter and the two grids look mismatched. Give
     armor cards a weapon-card-sized min-height; the content sits at the top and the
     space a weapon card uses for perks is left empty on purpose ("consistent box"). */
  #armorGrid .armor-card { min-height: 97px; }
  #armorGrid .armor-card.expanded { min-height: 0; }

  #armorGrid .armor-db-meta {
    margin-top: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .55px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #armorGrid .armor-db-source,
  #armorGrid .armor-perk-preview,
  #armorGrid .armor-perk-chip {
    display: none !important;
  }

  #weaponFilterPanel .clear-filter-btn.select-all-filter-btn,
  #armorFilterPanel .clear-filter-btn.select-all-filter-btn,
  .ap-fragments-section .clear-filter-btn.select-all-filter-btn {
    border-color: rgba(104,227,148,0.62) !important;
    background: rgba(104,227,148,0.13) !important;
    color: #bdf7cf !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }

  #weaponFilterPanel .clear-filter-btn.select-all-filter-btn:hover,
  #armorFilterPanel .clear-filter-btn.select-all-filter-btn:hover,
  .ap-fragments-section .clear-filter-btn.select-all-filter-btn:hover {
    border-color: rgba(104,227,148,0.86) !important;
    background: rgba(104,227,148,0.22) !important;
    color: #ecfff2 !important;
  }

  #armorGrid .armor-perk-preview,
  #armorGrid .armor-perk-chip {
    display: none !important;
  }

  #buildContent .destiny-crafter .dc-catalyst-box-wrap { display: none !important; }

  #buildContent .destiny-crafter .dc-catalyst-box-wrap { display: block !important; }

  .destiny-crafter .dc-section-exotic-catalyst .dc-section-title,
  .ultimate-stats-panel .stats-exotic-catalyst-row .stats-card-title {
    color: rgba(166,240,192,0.78);
  }

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot,
  .ultimate-stats-panel .dc-mod-box.exotic-catalyst-slot {
    border-color: rgba(104,227,148,0.58);
    background: rgba(104,227,148,0.09);
    color: #a6f0c0;
  }

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot.empty,
  .ultimate-stats-panel .dc-mod-box.exotic-catalyst-slot.empty {
    color: rgba(166,240,192,0.50);
    background: rgba(104,227,148,0.045);
    border-color: rgba(104,227,148,0.36);
  }

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot:hover,
  .ultimate-stats-panel .dc-mod-box.exotic-catalyst-slot:hover {
    border-color: rgba(104,227,148,0.9);
    box-shadow: 0 0 0 1px rgba(104,227,148,0.16), 0 0 14px rgba(104,227,148,0.12);
  }

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot img,
  .ultimate-stats-panel .dc-mod-box.exotic-catalyst-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .destiny-crafter .dc-mod-box.exotic-catalyst-slot .dc-catalyst-fallback,
  .ultimate-stats-panel .dc-mod-box.exotic-catalyst-slot .dc-catalyst-fallback {
    color: #a6f0c0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.35px;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
  }

  .weapon-card.exotic .perk-column.exotic-catalyst-column .perk-col-header {
    color: #68e394;
  }

.armor-detail-tab.active {
  border-color: rgba(var(--accent-rgb),.72) !important;
  background: rgba(var(--accent-rgb),.16) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb),.75) !important;
}

.alt-section-title-row {
  cursor: pointer !important;
  user-select: none;
}
.alt-section-title-row:hover { background: rgba(255,255,255,.04) !important; }
.alt-toggle-arrow {
  font-size: 11px; color: var(--text-secondary);
  transition: transform .2s; display: inline-block;
}
.alt-section:not(.collapsed) .alt-toggle-arrow { transform: rotate(0deg); }
.alt-section.collapsed .alt-toggle-arrow { transform: rotate(0deg); }
.alt-section-toggle { pointer-events: none; background: none; border: none; padding: 0 2px; }
.compare-sort-btn {
  background: none; border: 1px solid transparent; border-radius: 4px; padding: 1px 5px;
  color: var(--text-dim); font-size: 10px; cursor: pointer; margin-left: 4px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; vertical-align: middle;
}
.compare-sort-btn:hover { border-color: var(--border-bright); color: var(--text-secondary); }
.compare-sort-btn.active-asc { border-color: rgba(67,209,122,.6); color: #43d17a; background: rgba(67,209,122,.1); }
.compare-sort-btn.active-desc { border-color: rgba(255,100,100,.6); color: #ff8888; background: rgba(255,100,100,.1); }

.bc-piece-stat-value.mw-gold { color: var(--tier-exotic) !important; }
.armor-total-value.mw-gold-total { color: var(--tier-exotic) !important; }

.bc-mod-box .bc-stat-icon, .bc-mod-box img.bc-stat-api-icon {
  width: 22px; height: 22px; display: block; margin: 0 auto;
}
.bc-mod-icon-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.bc-mod-kicker { font-size: 9px !important; color: var(--text-dim) !important; text-transform: uppercase; letter-spacing: .5px; line-height: 1; }

.bc-energy-row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px; font-size: 10px; color: var(--text-secondary);
  border-top: 1px solid rgba(255,255,255,.05); margin-top: 4px;
}
.bc-energy-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.bc-energy-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.bc-energy-bar-fill.ok { background: rgba(67,209,122,.7); }
.bc-energy-bar-fill.warn { background: rgba(255,180,50,.8); }
.bc-energy-bar-fill.over { background: rgba(var(--accent-rgb),.85); }
.bc-energy-label { font-family: 'Rajdhani', sans-serif; font-weight: 800; min-width: 30px; text-align: right; }

.bc-armor-row.has-exotic-here .bc-slot-label::after {
  content: '◆'; font-size: 9px; color: var(--tier-exotic);
  position: absolute; top: 2px; right: 2px;
}
.bc-armor-row.has-exotic-here { border-left: 2px solid var(--tier-exotic) !important; }
.bc-slot-label { position: relative; }
.bc-exotic-row-thumb {
  width: 18px; height: 18px; border-radius: 3px; object-fit: cover;
  border: 1px solid rgba(206,174,51,.5); flex-shrink: 0;
}

.add-to-bc-btn {
  padding: 4px 8px; font-size: 11px; font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: .5px; background: rgba(206,174,51,.12);
  border: 1px solid rgba(206,174,51,.4); border-radius: 5px; cursor: pointer;
  color: #ceae33; transition: all .15s; margin-left: 4px;
}
.add-to-bc-btn:hover { background: rgba(206,174,51,.22); border-color: rgba(206,174,51,.7); }

#landingPage {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #0a0c10 0%, color-mix(in srgb, #0a0c10, var(--accent) 13%) 40%, color-mix(in srgb, #0a0c10, var(--accent-2) 20%) 72%, #0a0c10 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; overflow: hidden;
}
#landingPage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 36% 40%, rgba(var(--accent-rgb),.17) 0%, transparent 62%), radial-gradient(ellipse 55% 50% at 70% 62%, color-mix(in srgb, var(--accent-2), transparent 84%) 0%, transparent 60%);
}
.landing-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 48px; }
.landing-logo-icon { width: 64px; height: 64px; opacity: .95; }
.landing-title {
  font-family: 'Orbitron', sans-serif; font-size: 32px; font-weight: 900;
  letter-spacing: 6px; text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 52%, var(--accent-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.landing-subtitle {
  font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 4px;
  color: rgba(255,255,255,.35); text-transform: uppercase; margin-top: -4px;
}
.landing-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.landing-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 160px; padding: 28px 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; cursor: pointer; color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: all .2s; position: relative; overflow: hidden;
}
.landing-btn::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 76%), color-mix(in srgb, var(--accent-2), transparent 90%));
  transition: opacity .2s;
}
.landing-btn:hover { border-color: rgba(var(--accent-rgb),.55); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),.2); }
.landing-btn:hover::before { opacity: 1; }
.landing-btn svg { opacity: .85; transition: opacity .2s; }
.landing-btn:hover svg { opacity: 1; }
.landing-version { margin-top: 44px; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.18); text-transform: uppercase; font-family: 'Orbitron', sans-serif; }

.armor-page .header-inner, .bc-shell ~ .header-inner { align-items: center !important; }

.dc-stat-fill, .stat-fill, .bc-energy-bar-fill, .armor-total-fill {
  will-change: width;
  transform: translateZ(0);
}

.weapon-card {
  contain: layout style !important;
}
.armor-card {
  contain: layout style !important;
}
/* (intrinsic-size lives in the virtualization block near ~3450 — one authority) */

#dcTooltip {
  will-change: transform;
  contain: layout style paint;
  left: 0 !important; top: 0 !important;
}

.weapon-card, .armor-card, .filter-btn, .build-btn,
.perk-item, .alt-item, .bc-armor-row, .page-nav-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#weaponGrid, #armorGrid, #buildContent, .bc-exotic-list,
.weapon-filter-panel, #armorFilterPanel {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* (intrinsic-size lives in the virtualization block near ~3450 — one authority) */

.weapon-card {
  transition: transform .2s cubic-bezier(.34, 1.45, .6, 1), border-color .18s ease,
              box-shadow .18s ease, background-color .18s ease;
}

/* Bigger, clearer highlight on weapon + armor cards — applied to the SELECTED
   card too (Mo), and HOVER lifts the card on a springy ease so it "bounces".
   The armor bounce never worked because armor only transitioned border-color +
   box-shadow (02-ref-1:70), so its lift snapped instantly — adding `transform`
   to the armor transition makes it animate like the weapon cards. Brighter 3px
   accent ring + soft outer glow; box-shadow only (no border-color shorthand) so
   the armor tier-colour left stripe is preserved. Late + !important so it beats
   the 01-core-4 / 02-refinements-1 rules. */
.armor-card {
  transition: transform .2s cubic-bezier(.34, 1.45, .6, 1), border-color .18s ease, box-shadow .18s ease !important;
}
.weapon-card:hover, .weapon-card.selected,
.armor-card:hover, .armor-card.selected {
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.92),
    0 0 26px 1px rgba(var(--accent-rgb), 0.48),
    0 12px 32px rgba(0, 0, 0, 0.46) !important;
  transform: translateY(-3px) !important;
}

/* Armor legendary rarity stripe used --tier-legendary (#522f65) — a dark purple
   nearly invisible on the dark card, so the left rarity strip didn't read. Match
   the brighter legendary purple the weapon cards use (#8f55b5). Exotic armor
   (gold) was already visible. !important so it holds in the expanded state too. */
/* (T223) Make armor cards match weapon cards exactly, per Mo:
   - rarity strip: identical to the weapon card strip (3px + same colours). Was a 4px
     strip in a dark purple that read as too thin / faint next to the weapon cards.
   - background: same dark gradient as weapon cards. Was the lighter grey var(--bg-card),
     which showed as a grey area behind/within the card (the empty lower part of the box). */
.armor-card.exotic { border-left: 3px solid var(--tier-exotic) !important; }
.armor-card.legendary { border-left: 3px solid #8f55b5 !important; }
.armor-card {
  background: linear-gradient(180deg, rgba(19,23,31,.9), rgba(9,12,17,.96)) !important;
}

/* Nothing should sit behind the armor cards — the page background must show through the
   gaps, exactly like the weapons page. None of these containers should paint a fill, but
   force it transparent so a dark/grey layer can't appear (covers any runtime-set fill too). */
body[data-current-page="armor"] #mainContent,
.armor-db-layout, #armorStableRoot,
.armor-list-panel, .armor-grid, #armorGrid {
  background: transparent !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.loading-spinner {
  position: relative;
  border-top-color: var(--accent);
  box-shadow: 0 0 22px rgba(var(--accent-rgb),0.20);
  will-change: transform;
}
.loading-spinner::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  border-bottom-color: var(--accent-2);
  border-radius: 50%;
  will-change: transform;
  animation: spin 1.4s linear infinite reverse;
}
.loading-text {
  animation: d2glTextPulse 2.2s ease-in-out infinite;
}
.progress-bar-container {
  width: 260px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.progress-bar-fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.35);
}
.progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%);
  animation: d2glShimmer 1.4s ease-in-out infinite;
}
@keyframes d2glShimmer { to { transform: translateX(100%); } }
@keyframes d2glTextPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill::after,
  .loading-text { animation: none !important; }
  .weapon-card { transition: none !important; }
}

/* Masterwork level slider (Inspect + Stats tabs) */
.dc-mw-level {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid var(--border-dim);
  border-radius: 7px;
  background: rgba(255,255,255,0.02);
}
.dc-mw-level-cap {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.dc-mw-level-val {
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
  min-width: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dc-mw-level-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  outline: none;
  cursor: pointer;
}
.dc-mw-level-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #14161b;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.55);
}
.dc-mw-level-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #14161b;
  cursor: pointer;
}
.dc-mw-level-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}

/* ============================ BUILD LOADOUT (Build Crafter weapons + armor) ============================ */
.card-build-btn.in-build { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.55); color: var(--accent); }
.add-to-bc-btn.in-build { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.6); color: var(--accent); }

.bc-loadout-section { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.bc-loadout-block {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.018);
  padding: 12px 14px 14px;
}
.bc-loadout-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.bc-loadout-title { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.bc-loadout-help { font-size: 11px; color: var(--text-dim); font-weight: 600; flex: 1; min-width: 180px; }
.bc-loadout-help strong { color: var(--accent); }
.bc-loadout-grid { display: grid; gap: 10px; }
.bc-loadout-grid.weapons { grid-template-columns: repeat(3, 1fr); }
.bc-loadout-grid.armor { grid-template-columns: repeat(5, 1fr); }

.bc-slot-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  padding: 9px 10px 10px;
  min-width: 0;
  min-height: 96px;
}
.bc-slot-card.filled { cursor: default; }
.bc-slot-card[data-build-weapon-open] { cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.bc-slot-card[data-build-weapon-open]:hover { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.05); transform: translateY(-1px); }
.bc-slot-card.empty { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-style: dashed; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.012); }
.bc-slot-card.exotic { border-color: rgba(226,179,74,0.45); background: rgba(226,179,74,0.05); }
.bc-slot-card-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.bc-slot-exotic-tag { color: var(--accent); }
.bc-slot-card-empty { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 14px; }
.bc-slot-remove {
  position: absolute; top: 6px; right: 6px;
  width: 21px; height: 21px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.35); color: var(--text-secondary);
  font-size: 11px; line-height: 1; cursor: pointer; z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.bc-slot-remove:hover { background: rgba(226,85,85,0.85); color: #fff; }
.bc-slot-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding-right: 18px; }
.bc-slot-thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); }
.bc-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-slot-meta { min-width: 0; }
.bc-slot-name { font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-slot-type { font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.3px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-slot-perks { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: #d7dae2; border-radius: 999px; padding: 3px 8px 3px 4px;
  font-size: 9.5px; font-weight: 700; max-width: 100%;
}
.bc-chip.exotic { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.34); color: var(--accent-bright); }
.bc-chip img { width: 14px; height: 14px; border-radius: 50%; object-fit: contain; flex: 0 0 14px; }
.bc-chip-empty { font-size: 9.5px; color: var(--text-dim); font-style: italic; }

/* Build Crafter search results dropdown (header search bar) */
.bc-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200;
  display: none; max-height: 380px; overflow-y: auto;
  background: #14161b; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55); padding: 5px;
}
.bc-search-group { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding: 8px 9px 4px; }
.bc-search-result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border: none; border-radius: 6px;
  background: none; color: #fff; cursor: pointer; text-align: left; transition: background 0.12s;
}
.bc-search-result:hover { background: rgba(var(--accent-rgb),0.1); }
.bc-search-res-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); }
.bc-search-res-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-search-res-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bc-search-res-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-search-res-type { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.bc-search-res-add { font-size: 11px; font-weight: 800; color: var(--accent); white-space: nowrap; flex: 0 0 auto; }
.bc-search-result.in-build .bc-search-res-add { color: var(--text-dim); }
.bc-search-empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 12px; }

@media (max-width: 1000px) {
  .bc-loadout-grid.armor { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .bc-loadout-grid.weapons, .bc-loadout-grid.armor { grid-template-columns: 1fr 1fr; }
}

/* ---- Armor card "Build" button (armor page) ---- */
.armor-card { position: relative; }
.armor-build-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,22,28,0.82); color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.armor-build-btn:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.5); color: var(--accent); }
.armor-build-btn.in-build { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.6); color: var(--accent); }

/* ---- Added armor piece shown inside the planner row ---- */
.bc-slot-icon.has-piece { padding: 0; overflow: hidden; }
.bc-slot-piece-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
body[data-current-page="build-crafter"] .bc-armor-row.has-piece { flex-wrap: wrap; row-gap: 8px; }
.bc-row-piece {
  flex: 0 0 100%; width: 100%;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 4px 2px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bc-row-piece-name { font-size: 12px; font-weight: 800; color: #fff; }
.bc-row-piece-perks { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.bc-row-piece-remove {
  border: 1px solid rgba(226,85,85,0.4); background: rgba(226,85,85,0.12); color: #ff9b9b;
  border-radius: 5px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; cursor: pointer; flex: 0 0 auto;
}
.bc-row-piece-remove:hover { background: rgba(226,85,85,0.85); color: #fff; }

/* ---- Build Overview panel (right side) ---- */
.bc-overview-panel { margin-bottom: 14px; }
.bc-ov-stickers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bc-ov-sticker {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #d7dae2;
}
.bc-ov-sticker.exotic { background: rgba(var(--accent-rgb),0.14); border-color: rgba(var(--accent-rgb),0.4); color: var(--accent-bright); }
.bc-ov-sticker.elem { background: rgba(120,160,255,0.1); border-color: rgba(120,160,255,0.3); color: #b9c8f5; }
.bc-ov-group-title { font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 8px; }
.bc-ov-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.02); padding: 10px 11px; margin-bottom: 9px; }
.bc-ov-item.exotic { border-color: rgba(var(--accent-rgb),0.32); background: rgba(var(--accent-rgb),0.04); }
.bc-ov-item-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.bc-ov-slot { font-size: 9px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-dim); flex: 0 0 auto; }
.bc-ov-thumb { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); }
.bc-ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-ov-name-wrap { min-width: 0; flex: 1; }
.bc-ov-name { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-ov-sub { font-size: 10px; font-weight: 600; color: var(--text-dim); margin-top: 1px; }
.bc-ov-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-bottom: 9px; }
.bc-ov-stat { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.bc-ov-stat-name { color: var(--text-dim); font-weight: 600; }
.bc-ov-stat-val { color: #fff; font-weight: 800; }
.bc-ov-perks { display: flex; flex-direction: column; gap: 7px; }
.bc-ov-perk { background: rgba(255,255,255,0.025); border-radius: 6px; padding: 6px 8px; }
.bc-ov-perk-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--accent-bright); }
.bc-ov-perk-head img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; flex: 0 0 18px; }
.bc-ov-perk-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-top: 4px; }
.bc-ov-empty { padding: 18px; text-align: center; color: var(--text-dim); font-size: 12px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; }
.bc-ov-empty-line { font-size: 11px; color: var(--text-dim); font-style: italic; }

/* ============================ ARMOR PICKER PAGE (v5) ============================ */
.ap-page { max-width: none; margin: 0; }
.ap-class-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 0 16px; }
.ap-cr-left { justify-self: start; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-cr-center { justify-self: center; }
.ap-cr-right { justify-self: end; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ap-class-strip { margin: 0; max-width: 430px; }
.ap-clear-all { flex: 0 0 auto; }
@media (max-width: 620px) {
  .ap-class-row { grid-template-columns: 1fr; }
  .ap-cr-left, .ap-cr-center, .ap-cr-right { justify-self: center; justify-content: center; }
}
body[data-current-page="build-crafter"] .ap-class-strip { padding: 0 !important; background: transparent !important; border: none !important; gap: 8px !important; }
body[data-current-page="build-crafter"] .ap-class-strip .bc-class-pick { min-height: 0 !important; padding: 7px 10px !important; flex-direction: row !important; gap: 8px !important; font-size: 12px !important; border-radius: 7px !important; }
body[data-current-page="build-crafter"] .ap-class-strip .bc-class-icon-box { width: 20px !important; height: 20px !important; }
body[data-current-page="build-crafter"] .ap-class-strip .bc-class-icon-box svg, body[data-current-page="build-crafter"] .ap-class-strip .bc-class-icon-box img { width: 18px !important; height: 18px !important; }
.ap-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ap-section-title { font-family: 'Orbitron', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
/* All option sections + rank flow in ONE grid in source order (1,2,3,4,5,rank):
   1 column when narrow, 2+ columns as the screen widens. Matching lists full-width below. */
.ap-main-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; margin-bottom: 14px; }
.ap-main-top > section { min-width: 0; max-height: var(--ap-top-h, 420px); overflow-y: auto; overflow-x: visible; }
.ap-main-top > section::-webkit-scrollbar { width: 7px; }
.ap-main-top > section::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.ap-main-top > section.ap-sets-section { overflow-x: visible; }
/* below the options: Rank + Quick goals on the left, the buildable sets on the right */
.ap-main-bottom { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 16px; }
.ap-bottom-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: start; }
.ap-main-matching { min-width: 0; }
@media (max-width: 980px) {
  .ap-main-bottom { grid-template-columns: 1fr; }
}

/* Rank stat sliders */
.ap-sliders { display: flex; flex-direction: column; gap: 13px; padding: 6px 2px 2px; }
.ap-slider-row { display: flex; align-items: center; gap: 10px; }
.ap-slider-ico { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity 0.14s; }
.ap-slider-row.on .ap-slider-ico { opacity: 1; }
.ap-slider-ico .bc-stat-icon, .ap-slider-ico img, .ap-slider-ico svg { width: 20px; height: 20px; }
.ap-slider-track-wrap { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; display: flex; align-items: center; }
.ap-slider-track-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 999px; background: rgba(255,255,255,0.09); }
.ap-slider-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 999px; background: rgba(var(--accent-rgb),0.55); pointer-events: none; }
.ap-slider-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 2px; height: 15px; background: rgba(255,255,255,0.55); border-radius: 1px; pointer-events: none; z-index: 2; }
.ap-slider { position: relative; z-index: 3; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
.ap-slider:focus { outline: none; }
.ap-slider::-webkit-slider-runnable-track { background: transparent; height: 22px; border: none; }
.ap-slider::-moz-range-track { background: transparent; height: 22px; border: none; }
.ap-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(var(--accent-rgb),0.95); box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; }
.ap-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(var(--accent-rgb),0.95); box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer; }
.ap-slider-val { flex: 0 0 auto; width: 34px; min-width: 34px; text-align: right; font-size: 13px; font-weight: 800; color: #e8eaf0; font-variant-numeric: tabular-nums; background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 2px 3px; font-family: inherit; -moz-appearance: textfield; cursor: text; }
.ap-slider-val::-webkit-outer-spin-button, .ap-slider-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ap-slider-val:hover { border-color: rgba(var(--accent-rgb),0.35); }
.ap-slider-val:focus { outline: none; border-color: rgba(var(--accent-rgb),0.8); background: rgba(0,0,0,0.25); }
.ap-slider-val.over { color: #e6885a; }
.ap-slider-max { flex: 0 0 auto; min-width: 32px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ap-stats-section, .ap-fragments-section, .ap-fonts-section, .ap-mods-section, .ap-armor-section, .ap-quick-section, .ap-attune-section-wrap { border: 1.5px solid rgba(var(--accent-rgb),0.4); border-radius: 12px; background: rgba(255,255,255,0.018); padding: 12px; }
/* Stat Mods + Attuned share one grid column (Attuned tucks into the space under Stat Mods) so the row
   keeps 5 columns and Assumptions doesn't wrap to a second row. Natural height (both are short), so it
   never runs past the taller columns; overflow stays visible so the forced-negative dropdown isn't clipped. */

.ap-stats-cols { display: grid; grid-template-columns: 1fr; gap: 9px; }
.ap-col-head { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.ap-pool { display: flex; flex-direction: column; gap: 6px; min-height: 64px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 9px; padding: 7px; background: rgba(0,0,0,0.14); }
.ap-applied { display: flex; flex-direction: column; gap: 6px; min-height: 130px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 9px; padding: 7px; background: rgba(0,0,0,0.14); }
.ap-stat-chip { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.04); cursor: grab; user-select: none; }
.ap-stat-chip:hover { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.45); }
.ap-stat-label { flex: 1; font-size: 13.5px; font-weight: 800; color: #fff; }
.ap-stat-add { font-size: 15px; font-weight: 900; color: var(--accent); }
.ap-applied-row { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.045); cursor: grab; user-select: none; }
.ap-grip { color: var(--text-dim); font-size: 11px; flex: 0 0 auto; }
.ap-applied-rank { width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--accent-rgb),0.16); color: var(--accent); font-weight: 900; font-size: 13px; }
.ap-total-rank { width: 17px; height: 17px; flex: 0 0 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--accent-rgb),0.18); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent-bright); font-weight: 800; font-size: 10px; line-height: 1; }
.ap-total-rank.none { background: transparent; border-color: transparent; }
.ap-applied-row .ap-stat-label { font-size: 13px; }
.ap-target-input { width: 44px; flex: 0 0 44px; padding: 5px 4px; border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; background: rgba(0,0,0,0.3); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 800; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.ap-target-input::-webkit-outer-spin-button, .ap-target-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ap-target-input:focus { outline: none; border-color: rgba(var(--accent-rgb),0.6); }
.ap-mini-btn { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--text-secondary); font-size: 9px; cursor: pointer; }
.ap-mini-btn.remove:hover { background: rgba(226,85,85,0.18); border-color: rgba(226,85,85,0.55); color: #ff7676; }
.ap-mini-empty, .ap-applied-empty { color: var(--text-dim); font-size: 11.5px; padding: 12px 6px; text-align: center; line-height: 1.4; }
.ap-drag-hidden { display: none !important; }
.ap-drop-placeholder { height: 36px; border: 2px dashed rgba(var(--accent-rgb),0.65); border-radius: 8px; background: rgba(var(--accent-rgb),0.09); }

.ap-stat-ico, .ap-ft-ico, .ap-frag-stat-ico, .ap-bb-ico, .ap-total-ico, .ap-mod-ico, .ap-ps-ico { display: inline-flex; align-items: center; justify-content: center; }
.ap-stat-ico .bc-stat-icon, .ap-stat-ico img, .ap-stat-ico svg { width: 24px; height: 24px; }
.ap-ft-ico .bc-stat-icon, .ap-ft-ico img, .ap-ft-ico svg, .ap-frag-stat-ico .bc-stat-icon, .ap-frag-stat-ico img, .ap-frag-stat-ico svg { width: 13px; height: 13px; }
.ap-total-ico .bc-stat-icon, .ap-total-ico img, .ap-total-ico svg { width: 24px; height: 24px; }
.ap-ps-ico .bc-stat-icon, .ap-ps-ico img, .ap-ps-ico svg { width: 17px; height: 17px; }

.ap-frag-glyph { font-size: 12px; line-height: 1; }
.ap-glyph-arc { color: #7fd0ff; } .ap-glyph-solar { color: #ff9d52; } .ap-glyph-void { color: #b388f0; }
.ap-glyph-stasis { color: #7aa6f0; } .ap-glyph-strand { color: #57d39a; } .ap-glyph-prismatic { color: #f0a6d6; }
.ap-frag-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
.ap-frag-sub { display: flex; align-items: center; justify-content: center; padding: 9px 4px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.03); cursor: pointer; }
.ap-elem-img { width: 26px; height: 26px; object-fit: contain; }
.ap-frag-sub .ap-frag-glyph { font-size: 22px; }
.ap-frag-sub:hover { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.45); }
.ap-frag-sub.on { background: rgba(var(--accent-rgb),0.14); border-color: rgba(var(--accent-rgb),0.55); color: #fff; }

/* longer: show all fragments, no inner scroll */
.ap-frag-list { display: flex; flex-direction: column; gap: 5px; }
.ap-frag { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 7px 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; background: rgba(255,255,255,0.025); color: var(--text-secondary); cursor: pointer; }
.ap-frag:hover { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.45); }
.ap-frag.on { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.55); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.25); }
.ap-frag-name { font-size: 12.5px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; }
.ap-frag-cls { font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb),0.14); border-radius: 999px; padding: 1px 6px; }
.ap-frag-mod { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-frag-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; }
.ap-frag-stat.pos { color: #68e394; } .ap-frag-stat.neg { color: #ff7676; }
.ap-frag-nomod { font-size: 11px; color: var(--text-dim); }
.ap-frag-totals { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-frag-totals.empty { color: var(--text-dim); font-size: 11.5px; }
.ap-frag-totals-label { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); }
.ap-frag-total { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); }
.ap-frag-total.pos { background: rgba(67,209,122,0.14); border-color: rgba(67,209,122,0.4); color: #68e394; }
.ap-frag-total.neg { background: rgba(226,85,85,0.14); border-color: rgba(226,85,85,0.4); color: #ff7676; }

/* armor — vertical, longer (no inner scroll), per-piece stats */
.ap-slots-col { display: flex; flex-direction: column; gap: 9px; }
.ap-slot-v { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(255,255,255,0.02); padding: 9px; }
.ap-slot-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.ap-slot-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.ap-slot-ico svg, .ap-slot-ico img { width: 20px; height: 20px; }
.ap-slot-name { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; color: #fff; }
.ap-slot-mw { margin-left: auto; flex: 0 0 auto; padding: 2px 7px; border: 1px solid rgba(67,209,122,0.3); border-radius: 6px; background: rgba(67,209,122,0.08); color: #68e394; font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 0.5px; }
.ap-slot-boxes { display: grid; grid-template-columns: 1.85fr 1fr 1fr 1fr 1.05fr; gap: 5px; margin-bottom: 8px; align-items: stretch; }
.ap-big-box { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px; background: rgba(var(--accent-rgb),0.06); min-height: 44px; min-width: 0; }
.ap-bb-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); }
.ap-bb-val { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #fff; min-height: 24px; }
.ap-bb-ico .bc-stat-icon, .ap-bb-ico img, .ap-bb-ico svg, .ap-bb-ico .bc-group-icon { width: 24px; height: 24px; }
.ap-bb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-bb-sec { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; }
.ap-bb-sec-ico { display: inline-flex; opacity: 0.6; }
.ap-bb-sec-ico.pri { opacity: 1; }
.ap-bb-sec-ico .bc-stat-icon, .ap-bb-sec-ico img, .ap-bb-sec-ico svg { width: 20px; height: 20px; }
.ap-group-box .ap-bb-val { width: 100%; }
.ap-mod-box { display: flex; flex-direction: column; gap: 2px; padding: 6px 7px; border: 1px solid rgba(120,160,255,0.26); border-radius: 7px; background: rgba(120,160,255,0.06); min-width: 0; min-height: 44px; }
.ap-mod-label { font-size: 8px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); }
.ap-mod-val { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #cdd9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 19px; }
.ap-mod-ico .bc-stat-icon, .ap-mod-ico img, .ap-mod-ico svg { width: 17px; height: 17px; }
.ap-mod-none { font-size: 10px; font-weight: 600; color: var(--text-dim); }
.ap-mod-tune { font-size: 10px; }
.ap-tune-pos { color: #68e394; font-weight: 900; } .ap-tune-neg { color: #ff7676; font-weight: 900; }
.ap-piece-stats { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.ap-piece-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 9px; }
.ap-piece-stat.pri { color: #fff; border-color: rgba(var(--accent-rgb),0.35); background: rgba(var(--accent-rgb),0.08); }

/* totals (stat box, moved up under the row) */
.ap-totals { border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 11px; background: rgba(var(--accent-rgb),0.04); padding: 14px 16px; margin-bottom: 16px; }
.ap-totals-head { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-waste { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: none; padding: 2px 9px; border-radius: 999px; }
.ap-waste.none { color: #68e394; background: rgba(67,209,122,0.14); border: 1px solid rgba(67,209,122,0.35); }
.ap-waste { color: var(--accent); background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.35); }
.ap-waste.over { color: #ff7676; background: rgba(226,85,85,0.16); border: 1px solid rgba(226,85,85,0.4); }
.ap-totals-grid { display: flex; flex-direction: column; gap: 7px; }
.ap-total-row { display: flex; align-items: center; gap: 9px; }
.ap-total-row.muted { opacity: 0.5; }
.ap-total-ico { width: 18px; flex: 0 0 18px; }
.ap-total-name { flex: 0 0 52px; font-size: 12px; font-weight: 800; color: #fff; }
.ap-total-bar { flex: 1 1 auto; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 50px; position: relative; }
.ap-total-ceiling { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: repeating-linear-gradient(45deg, rgba(var(--accent-rgb),0.13), rgba(var(--accent-rgb),0.13) 4px, rgba(var(--accent-rgb),0.05) 4px, rgba(var(--accent-rgb),0.05) 8px); border-right: 1px solid rgba(var(--accent-rgb),0.5); }
.ap-ceiling-key { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; margin-left: auto; }
.ap-target-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 auto; }
.ap-target-row { display: flex; align-items: stretch; gap: 5px; }
.ap-step { display: flex; flex-direction: column; gap: 2px; }
.ap-step-btn { width: 26px; height: 17px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 5px; background: rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 9px; line-height: 1; cursor: pointer; }
.ap-step-btn:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.5); color: #fff; }
.ap-step-btn:active { background: rgba(var(--accent-rgb),0.28); }
.ap-step-btn:disabled { opacity: 0.28; cursor: default; background: rgba(255,255,255,0.03); }
.ap-step-btn:disabled:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); color: var(--text-secondary); }
.ap-target-cap { font-size: 8px; font-weight: 800; letter-spacing: 0.3px; color: var(--accent); }
.ap-target-cap.over { color: #ff7676; }
.ap-target-input.over-max { border-color: rgba(226,85,85,0.7); color: #ff7676; background: rgba(226,85,85,0.1); }
.ap-target-input.capped { border-color: rgba(var(--accent-rgb),0.6); color: var(--accent); }
.ap-total-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.5), rgba(var(--accent-rgb),0.85)); transition: width 0.2s; position: relative; z-index: 1; }
.ap-total-fill.met { background: linear-gradient(90deg, rgba(67,209,122,0.6), rgba(104,227,148,0.9)); }
.ap-total-val { flex: 0 0 32px; text-align: right; font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 900; color: #fff; }
.ap-total-val.neg { color: #ff7676; }
.ap-total-target { flex: 0 0 50px; font-size: 11px; font-weight: 800; }
.ap-total-target.met { color: #68e394; } .ap-total-target.miss { color: var(--text-dim); }
.ap-total-target.none { color: rgba(255,255,255,0.25); font-weight: 600; font-size: 10px; }

/* ranked list (moved down) */

.ap-account { border: 1px dashed rgba(255,255,255,0.14); border-radius: 10px; background: rgba(255,255,255,0.012); padding: 14px; }
.ap-account-head { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.ap-account-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }
.ap-connect-btn { padding: 9px 16px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: var(--text-dim); font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 800; cursor: not-allowed; opacity: 0.7; }
.ap-empty { padding: 20px; text-align: center; color: var(--text-dim); font-size: 12.5px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 10px; }

.ap-bottom-totals .ap-totals { margin-bottom: 0; }
.ap-applied-row .ap-stat-label { flex: 0 1 auto; }
.ap-applied-row .ap-mini-btn.remove { margin-left: auto; }
/* on narrower screens, let the top option sections wrap and the bottom stack */
@media (max-width: 560px) { .ap-frag-subs { grid-template-columns: repeat(2,1fr); } }

/* empty / unused armor boxes flagged red */
.ap-mod-box.empty, .ap-big-box.empty { border-color: rgba(226,85,85,0.55); background: rgba(226,85,85,0.10); }
.ap-mod-box.empty .ap-mod-label, .ap-big-box.empty .ap-bb-label { color: #ff8e8e; }
.ap-mod-box.empty .ap-mod-none, .ap-big-box.empty .ap-mod-none { color: #ff7676; }

/* FONTS SECTION (stat mods) */
.ap-modcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-modcol > section { min-width: 0; }
.ap-fonts-grid { display: flex; flex-direction: column; gap: 6px; }
/* Fonts stretches to the row height (matching the taller sections) and spreads its rows so it sits in line with its neighbours instead of looking stunted. Assumptions no longer wraps under it now the top grid fits all 5 columns, so this can't push it down. */
.ap-main-top > section.ap-fonts-section { align-self: stretch; display: flex; flex-direction: column; }
.ap-fonts-section .ap-fonts-grid { flex: 1 1 auto; justify-content: space-between; }
.ap-font-row { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: rgba(255,255,255,0.022); }
.ap-font-row.on { border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.07); }
.ap-font-slotico { display: inline-flex; align-items: center; justify-content: center; width: 24px; flex: 0 0 24px; opacity: 0.92; }
.ap-font-slotico img, .ap-font-slotico svg { width: 22px; height: 22px; object-fit: contain; }
.ap-font-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 22px; }
.ap-font-ico img, .ap-font-ico svg { width: 20px; height: 20px; object-fit: contain; }
.ap-font-step { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-left: auto; }
.ap-font-btn { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 14px; line-height: 1; cursor: pointer; }
.ap-font-btn:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.5); color: #fff; }
.ap-font-btn:active { background: rgba(var(--accent-rgb),0.28); }
.ap-font-btn:disabled { opacity: 0.28; cursor: default; background: rgba(255,255,255,0.03); }
.ap-font-btn:disabled:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); color: var(--text-secondary); }
.ap-font-count { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: #e8eaf0; font-variant-numeric: tabular-nums; }
.ap-font-bonus { flex: 0 0 auto; min-width: 30px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ap-font-bonus.on { color: #68e394; }

/* 4 - Stat Mods box (2 columns of +10 / +5 per stat + a None box) */
.ap-mod-count { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--text-dim); text-transform: uppercase; margin: 0 0 7px; }
.ap-mod-count.full { color: #68e394; }
/* Stat-mod budget: +10 / +5 count rows + Optimal toggle */
.ap-modbudget { display: flex; flex-direction: column; gap: 8px; }
.ap-modb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(255,255,255,0.03); }
.ap-modb-row.on { border-color: rgba(var(--accent-rgb),0.45); background: rgba(var(--accent-rgb),0.08); }
.ap-modb-lbl { font-size: 13px; font-weight: 700; color: #e8eaf0; display: flex; align-items: baseline; gap: 7px; }
.ap-modb-energy { font-size: 10px; font-weight: 600; color: var(--text-dim); }
.ap-modb-step { display: inline-flex; align-items: center; gap: 6px; }
.ap-modb-count { min-width: 20px; text-align: center; font-size: 14px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ap-modb-note { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.ap-mods-grid { display: flex; flex-direction: column; gap: 6px; }
.ap-mod-row { display: grid; grid-template-columns: 26px minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: rgba(255,255,255,0.022); }
.ap-mod-row.ap-mod-dim { opacity: .4; }
.ap-mod-ico { display: flex; align-items: center; justify-content: center; }
.ap-mod-ico svg, .ap-mod-ico img { width: 18px; height: 18px; }
.ap-mod-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; padding: 2px 5px; border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; min-width: 0; }
.ap-mod-cell .ap-font-btn { width: 22px; height: 22px; flex-shrink: 0; font-size: 14px; }
.ap-mod-cell .ap-font-count { min-width: 15px; flex-shrink: 0; }
.ap-mod-cell .ap-mod-lbl { min-width: 0; }
.ap-mod-cell.on { border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.08); }
.ap-mod-lbl { margin-right: auto; font-size: 12px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ap-mod-cell.on .ap-mod-lbl { color: #e8eaf0; }
.ap-mod-none { margin-top: 8px; width: 100%; padding: 9px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; }
.ap-mod-none:hover { border-color: rgba(var(--accent-rgb),0.45); color: #fff; }
.ap-mod-none.on { border-color: rgba(var(--accent-rgb),0.6); background: rgba(var(--accent-rgb),0.14); color: #fff; }

/* ============ THEMES (accent swap) + SETTINGS PAGE ============ */
:root[data-theme="traveller"] { --accent: #eef2fa; --accent-rgb: 238, 242, 250; }
:root[data-theme="arc"]       { --accent: #1fb0ff; --accent-rgb: 31, 176, 255; }
:root[data-theme="solar"]     { --accent: #ff7a14; --accent-rgb: 255, 122, 20; }
:root[data-theme="void"]      { --accent: #aa6bff; --accent-rgb: 170, 107, 255; }
:root[data-theme="stasis"]    { --accent: #3d6bff; --accent-rgb: 61, 107, 255; }
:root[data-theme="strand"]    { --accent: #1aff7d; --accent-rgb: 26, 255, 125; }
:root[data-theme="prismatic"] { --accent: #ff7fd4; --accent-rgb: 255, 127, 212; }
:root[data-theme="scorn"]     { --accent: #9333ea; --accent-rgb: 147, 51, 234; }
:root[data-theme="vex"]       { --accent: #15d3ec; --accent-rgb: 21, 211, 236; }
:root[data-theme="fallen"]    { --accent: #ffcc1a; --accent-rgb: 255, 204, 26; }
:root[data-theme="cabal"]     { --accent: #ff3b34; --accent-rgb: 255, 59, 52; }
:root[data-theme="taken"]     { --accent: #14e0cd; --accent-rgb: 20, 224, 205; }
:root[data-theme="darkness"]  { --accent: #f0631a; --accent-rgb: 240, 99, 26; }
/* multi-colour faction themes (primary drives UI, --accent-2 = secondary) */
:root[data-theme="vanguard"]        { --accent: #4a82ff; --accent-rgb: 74, 130, 255;  --accent-2: #ff7a1e; }
:root[data-theme="crucible"]        { --accent: #fb3a3a; --accent-rgb: 251, 58, 58;   --accent-2: #ffffff; }
:root[data-theme="gambit"]          { --accent: #36c95f; --accent-rgb: 54, 201, 95;   --accent-2: #0c0e12; }
:root[data-theme="iron-banner"]     { --accent: #e6b23a; --accent-rgb: 230, 178, 58;  --accent-2: #3aa85a; }
:root[data-theme="future-war-cult"] { --accent: #ec3b3b; --accent-rgb: 236, 59, 59;   --accent-2: #ffd21a; }
:root[data-theme="new-monarchy"]    { --accent: #eef2fa; --accent-rgb: 238, 242, 250; --accent-2: #e23b3b; }
:root[data-theme="osiris"]          { --accent: #e3b23a; --accent-rgb: 227, 178, 58;  --accent-2: #f0f2f8; }
:root[data-theme="dead-orbit"]      { --accent: #c4ccd8; --accent-rgb: 196, 204, 216; --accent-2: #0c0e12; }
:root[data-theme="hive"]            { --accent: #66c24a; --accent-rgb: 102, 194, 74;  --accent-2: #3a9be0; }

.settings-page { max-width: 1180px; }
.settings-section { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.018); padding: 18px; }
.settings-head { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.theme-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.theme-group-head { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,0.09); }
.theme-group-list { display: flex; flex-direction: column; gap: 8px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
@media (max-width: 1024px) { .theme-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .theme-groups { grid-template-columns: 1fr; } }
.theme-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 13px; border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; background: rgba(255,255,255,0.025); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.08s; }
.theme-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.theme-card.active { border-color: var(--swatch); background: color-mix(in srgb, var(--swatch), transparent 88%); box-shadow: inset 0 0 0 1px var(--swatch); }
.theme-swatch { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: linear-gradient(135deg, var(--swatch) 0%, var(--swatch) 49%, var(--swatch2, var(--swatch)) 51%, var(--swatch2, var(--swatch)) 100%); border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 0 14px color-mix(in srgb, var(--swatch), transparent 55%); }
.theme-meta { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.theme-name { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; color: #fff; }
.theme-sub { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.theme-check { flex: 0 0 auto; font-size: 16px; font-weight: 900; color: var(--swatch); width: 18px; text-align: center; }

/* ===== Vendors page ===== */
.vendors-page { max-width: 1600px; }

/* Let users drag the filter panel shorter (weapon + armor pages). The groups scroll inside, while
   the Select All / Clear All title row and footer stay fixed outside this grid. */
.weapon-filter-grid { overflow-y: auto; min-height: 72px; }

/* Full-width drag bar beneath the filter grid — resize its height from anywhere along the bottom. */
.filter-grid-resizer {
  height: 13px; margin: 3px 0 0;
  display: flex; align-items: center; justify-content: center;
  cursor: ns-resize; border-radius: 0 0 8px 8px;
  background: var(--bg-perk); border: 1px solid var(--border-dim); border-top: none;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.filter-grid-resizer::before { content: ''; width: 36px; height: 3px; border-radius: 3px; background: var(--border-bright); }
.filter-grid-resizer:hover::before { background: var(--text-dim); }
.filter-grid-resizer.dragging::before { background: var(--text-primary); }
.vendor-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid rgba(var(--accent-rgb),.30);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 90%), color-mix(in srgb, var(--accent-2), transparent 93%));
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.vendor-note strong { color: var(--text-primary); font-weight: 700; }
.vendor-connect {
  margin-left: auto; white-space: nowrap;
  border: 1px solid rgba(var(--accent-rgb),.40);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent-bright); font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 8px 13px; border-radius: 8px; cursor: pointer;
}
.vendor-connect:hover { background: color-mix(in srgb, var(--accent), transparent 78%); }
.vendor-grid {
  display: flex; flex-direction: column; gap: 14px;
}
.vendor-card {
  position: relative; border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px; padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--v), transparent 93%), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .2s;
  overflow: hidden;
  display: flex; gap: 18px; align-items: stretch;
}
/* Left identity rail (avatar / name / timer / pin) at a fixed width; the body
   takes the rest of the row for the horizontally-scrolling stock. */
.vendor-rail { flex: 0 0 272px; min-width: 0; display: flex; flex-direction: column; }
.vendor-rail .vendor-top { margin-top: 1px; }
.vendor-rail .vendor-foot { margin-top: auto; }
.vendor-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vendor-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--v); opacity: .85;
}
.vendor-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--v), transparent 55%);
  box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.vendor-top { display: flex; gap: 13px; align-items: flex-start; }
.vendor-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 16px;
  color: var(--v);
  background: color-mix(in srgb, var(--v), transparent 86%);
  border: 1px solid color-mix(in srgb, var(--v), transparent 55%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--v), transparent 78%);
  letter-spacing: .5px;
}
.vendor-id { min-width: 0; flex: 1; }
.vendor-name {
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 15px;
  color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vendor-role { font-size: 12px; color: var(--v); font-weight: 600; margin-top: 2px; }
.vendor-loc { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.vendor-status {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 20px; color: var(--text-secondary);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.vendor-status.here {
  color: var(--v);
  background: color-mix(in srgb, var(--v), transparent 86%);
  border-color: color-mix(in srgb, var(--v), transparent 60%);
}
.vendor-sells {
  margin: 13px 0 12px; font-size: 12.5px; color: var(--text-primary);
  line-height: 1.45; display: flex; gap: 8px; align-items: baseline;
}
.vendor-sells-k {
  flex: 0 0 auto; font-family: 'Orbitron', sans-serif; font-size: 9.5px;
  font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-secondary); background: rgba(255,255,255,.05);
  padding: 3px 7px; border-radius: 6px;
}
.vendor-timer {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--v), transparent 70%);
  background: color-mix(in srgb, var(--v), transparent 92%);
  border-radius: 10px; padding: 10px 13px;
}
.vt-label {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary);
}
.vt-val {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 19px; font-weight: 700; color: var(--v);
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.vendor-inv { min-width: 0; }
.vendor-away { opacity: .55; }
.vendor-foot { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: flex-end; }
.vendor-pin-btn {
  font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-secondary); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 12px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.vendor-pin-btn:hover { color: var(--text-primary); }
.vendor-pin-btn.on { color: var(--v); background: color-mix(in srgb, var(--v), transparent 86%); border-color: color-mix(in srgb, var(--v), transparent 55%); }
.vendor-away .vendor-avatar { filter: grayscale(.5); }

/* ===== Settings: behaviour toggles (density / motion / scale) ===== */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
:root[data-motion="reduced"] *:hover { transform: none !important; }

:root[data-density="compact"] #weaponGrid,
:root[data-density="compact"] #armorGrid { gap: 7px !important; }
:root[data-density="compact"] .weapon-card { padding-top: 10px !important; padding-bottom: 10px !important; }
:root[data-density="compact"] .armor-list-row { padding-top: 7px !important; padding-bottom: 7px !important; }
:root[data-density="compact"] .main { padding-top: 12px !important; }

/* ===== Settings: sectioned layout + controls ===== */
.settings-page { max-width: 1180px; }
.settings-layout { display: grid; grid-template-columns: 188px 1fr; gap: 22px; align-items: start; margin-top: 6px; }
.settings-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 14px; }
.set-rail-btn {
  text-align: left; font-family: 'Orbitron', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--text-secondary); background: transparent;
  border: 1px solid transparent; border-radius: 9px; padding: 10px 13px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.set-rail-btn:hover { color: var(--text-primary); background: rgba(255,255,255,.04); }
.set-rail-btn.active {
  color: var(--accent-bright); background: var(--accent-fill-grad);
  border-color: rgba(var(--accent-rgb),.30);
}
.settings-panel {
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  background: rgba(255,255,255,.018); padding: 20px 22px; min-height: 320px;
}
.settings-panel .settings-head {
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #fff; margin: 0 0 16px;
}
.set-sub { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); margin: 18px 0 9px; }
.set-row { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.06); }
.set-row:first-of-type { border-top: none; }
.set-row-info { min-width: 0; flex: 1; }
.set-row-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.set-row-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; max-width: 52ch; }
.set-row-ctl { flex: 0 0 auto; }
.set-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 4px; }
.set-seg-btn {
  font-family: 'Orbitron', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-secondary); background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s;
}
.set-seg-btn:hover { color: var(--text-primary); }
.set-seg-btn.active { color: var(--accent-bright); background: var(--accent-fill-grad); border-color: rgba(var(--accent-rgb),.42); }
.set-note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-left: 3px solid rgba(var(--accent-rgb),.5); border-radius: 8px; padding: 11px 14px; margin-top: 14px; }
.set-btn {
  font-family: 'Orbitron', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent-bright); background: color-mix(in srgb, var(--accent), transparent 86%);
  border: 1px solid rgba(var(--accent-rgb),.42); border-radius: 8px; padding: 8px 16px; cursor: pointer;
  transition: background .14s, border-color .14s;
}
.set-btn:hover { background: color-mix(in srgb, var(--accent), transparent 78%); }
.set-btn.danger { color: #ffb0b0; background: linear-gradient(rgba(255,63,63,.20), rgba(255,63,63,.14)); border-color: rgba(255,80,80,.55); }
.set-btn.danger:hover { background: rgba(255,63,63,.34); color: #fff; }
.set-ver { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--text-primary); }
.set-io { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 4px; min-height: 56px; resize: vertical;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--text-primary);
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; padding: 9px 11px; }
.set-io.bad { border-color: rgba(255,80,80,.6); }
.set-vendor-list { display: flex; flex-direction: column; gap: 7px; }
.set-vendor { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.015); }
.set-vendor-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.set-vendor-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.set-vendor-name.off { color: var(--text-secondary); opacity: .6; text-decoration: line-through; }
.set-vendor-btn { font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--text-secondary); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 11px; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.set-vendor-btn:hover { color: var(--text-primary); }
.set-vendor-btn.on { color: var(--accent-bright); background: color-mix(in srgb, var(--accent), transparent 84%); border-color: rgba(var(--accent-rgb),.5); }
.set-vendor-btn.off { color: var(--text-secondary); opacity: .8; }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* vendor local-reset time line */
.vendor-at { font-size: 11px; color: var(--text-secondary); margin-top: 5px; text-align: right; }
.vendor-section-head { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); margin: 6px 2px 11px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.09); }
.vendor-section-head + .vendor-grid { margin-bottom: 22px; }
.vendor-at .vt-at { color: var(--text-primary); font-weight: 600; }
.vendor-empty { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 40px; font-size: 14px; }

/* ===== Exotic armor detail — 4-section layout ===== */
.armor-exo { display: flex; flex-direction: column; gap: 13px; }
.armor-inspect-id { display: flex; gap: 13px; align-items: center; padding-bottom: 4px; }
.armor-exo-id-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: rgba(206,174,51,.12); border: 1px solid rgba(206,174,51,.4); display: flex; align-items: center; justify-content: center; }
.armor-exo-id-icon img { width: 100%; height: 100%; object-fit: cover; }
.armor-exo-section { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); padding: 14px 15px; }
.armor-exo-head { font-family: 'Orbitron', sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-bright); margin: -2px -3px 13px; padding: 7px 11px; border-radius: 8px; border-left: 3px solid var(--accent-bright); background: linear-gradient(90deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),0)); }
.armor-exo-perk { display: flex; gap: 13px; align-items: flex-start; }
.armor-exo-perk-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.armor-exo-perk-icon img { width: 100%; height: 100%; object-fit: cover; }
.armor-exo-perk-name { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.armor-exo-perk-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.armor-exo-numbers { display: flex; flex-direction: column; gap: 7px; }
.armor-exo-num { display: flex; align-items: baseline; gap: 10px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.015); }
.armor-exo-num-label { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); }
.armor-exo-num-value { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--accent-bright); }
.armor-exo-num-note { flex: 0 0 100%; font-size: 11.5px; color: var(--text-secondary); }
.armor-exo-detail { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-top: 10px; }
.armor-exo-detail:first-child { margin-top: 0; }
.armor-exo-placeholder { font-size: 12.5px; font-style: italic; color: var(--text-secondary); opacity: .8; padding: 4px 0; }
.armor-exo-section .armor-perk-list { display: flex; flex-direction: column; gap: 9px; }
/* Numbers & stacks: big bold value, effect text in its own row */
.armor-exo-numlist { display: flex; flex-direction: column; gap: 11px; }
.armor-exo-numrow { display: flex; align-items: baseline; gap: 14px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.018); }
.armor-exo-bignum { flex: 0 0 auto; min-width: 62px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 25px; font-weight: 800; line-height: 1; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.armor-exo-numdesc { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }
.armor-exo-numnote { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
/* All perks & set bonuses: small stickers */
.armor-exo-section-sm { padding: 12px 14px; }
.armor-exo-stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.armor-exo-sticker { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text-primary); }
.armor-exo-sticker.is-set { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.1); color: var(--accent-bright); }

/* Floating perk hover preview (Inspect tab + weapon cards) */
.perk-hover-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  max-width: 300px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: linear-gradient(135deg, #11141c 0%, #0a0c12 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 9px;
  padding: 9px 11px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.perk-hover-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--accent-bright);
  margin-bottom: 3px;
}
.perk-hover-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.perk-hover-stats {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.perk-hover-stat-line { white-space: nowrap; }
.perk-hover-stat-line.up { color: #7bd88f; }
.perk-hover-stat-line.down { color: #e88; }
.perk-hover-notes {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  line-height: 1.42;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.perk-hover-notes .phn-line { margin: 0 0 3px; color: var(--text-secondary); }
.perk-hover-notes .phn-line:last-child { margin-bottom: 0; }
.perk-hover-notes .phn-white { color: var(--text-primary, #e8ecf5); }  /* normal white */
.perk-hover-notes .phn-green { color: #7bd88f; }   /* bonus / utility */
.perk-hover-notes .phn-blue  { color: #3fa7dd; }   /* PvE (matches mode-accent) */
.perk-hover-notes .phn-red   { color: #e8485c; }   /* PvP (matches mode-accent) */

/* Full-width PvP falloff graph (fills the card so it reads large) */
.range-summary-row { display: flex; gap: 12px; flex-wrap: wrap; }
.range-summary-row > div { flex: 1 1 160px; }

/* Neutral (+0) breakdown op for stat rows with no perk/mod change */
.stats-bd-op.neutral { color: var(--text-tertiary, #6b7488); opacity: 0.7; }

/* General-stat (combat summary) lines: "Crit: 70 +14 = 84" */

/* Compare tab: General / In-depth sub-tabs */
.compare-subtabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.compare-subtab {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary, #8b93b0);
  border-radius: 999px;
  padding: 6px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.compare-subtab:hover { color: var(--text-primary, #e8ecf5); border-color: rgba(var(--accent-rgb),0.5); }
.compare-subtab.active {
  background: rgba(var(--accent-rgb),0.14);
  border-color: rgba(var(--accent-rgb),0.7);
  color: var(--text-primary, #fff);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3) inset;
}

.compare-indepth { display: flex; flex-direction: column; gap: 20px; }
.compare-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary, #e8ecf5);
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
}
.compare-graph-wrap { width: 100%; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; }
.compare-graph-svg { width: 100%; height: auto; display: block; }
.compare-graph-empty { color: var(--text-secondary, #8b93b0); font-size: 13px; padding: 18px; text-align: center; }
.compare-num-name { font-weight: 700; }
.compare-indepth-note { font-size: 11.5px; color: var(--text-secondary, #8b93b0); opacity: 0.8; line-height: 1.4; }
.compare-graph-toggles .cgt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cgt-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.03); cursor: pointer; font-size: 12.5px; color: var(--text-primary, #e7ebf5); user-select: none; transition: opacity .12s, border-color .12s, background .12s; }
.cgt-item:hover { border-color: rgba(255,255,255,0.26); background: rgba(255,255,255,0.06); }
.cgt-item.off { opacity: 0.42; }
.cgt-check { width: 15px; height: 15px; accent-color: #68e394; cursor: pointer; margin: 0; flex-shrink: 0; }
.cgt-swatch { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cgt-name { white-space: nowrap; }

/* In-depth compare general-numbers table: centred weapon names above the numbers */
.compare-indepth .compare-table thead th { text-align: center; }
.compare-indepth .compare-table .compare-num-name { display:block; text-align:center; }
.compare-indepth .compare-table tbody td { text-align: center; }
.compare-indepth .compare-table tbody th { text-align: left; }

/* In-depth compare falloff graph hover */
.compare-falloff-wrap { position: relative; }
.compare-hover-line { pointer-events: none; }
.compare-hover-dot { pointer-events: none; }

/* In-depth numbers table header: icon + name + remove button, centred */
.compare-indepth .compare-num-th { position: relative; text-align: center; vertical-align: bottom; padding: 26px 10px 8px; }
.compare-indepth .compare-num-th .compare-weapon-icon { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-dim); background: var(--bg-perk); }
.compare-indepth .compare-num-th .compare-weapon-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-indepth .compare-num-th .compare-num-name { display: block; text-align: center; font-weight: 700; }
.compare-indepth .compare-num-th .compare-remove {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 18px;
  border-radius: 50%; border: 1px solid var(--border-bright); background: var(--bg-card);
  color: var(--text-secondary); font-size: 14px; cursor: pointer; padding: 0; text-align: center;
}
.compare-indepth .compare-num-th .compare-remove:hover { color: #fff; border-color: #ff6b6b; background: rgba(255,107,107,0.18); }

/* Compare tables (general + in-depth): clean, aligned sort arrows in a wider label column */
.compare-table .compare-stat-head,
.compare-table th:first-child { width: 158px !important; min-width: 158px !important; }
.compare-table tbody tr th:first-child { white-space: normal !important; vertical-align: middle; }
.compare-th-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compare-th-label { flex: 1 1 auto; line-height: 1.2; }
.compare-sort-arrows { flex: 0 0 auto; display: inline-flex; flex-direction: column; gap: 1px; }
.compare-sort-btn {
  display: block; width: 16px; height: 11px; padding: 0; margin: 0;
  border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 9px; line-height: 11px; text-align: center;
}
.compare-sort-btn:hover { color: var(--text-primary); }
.compare-sort-btn.active-asc, .compare-sort-btn.active-desc { color: var(--accent); }

/* Perk-effects controls subsection (stat-changing & long-tail perks) */
.stats-fx-title { margin-top: 14px; }
.fx-passive { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); border: 1px solid var(--border-dim); border-radius: 4px; padding: 1px 4px; margin-left: 6px; }

/* Interface size — 5 levels, scales the content area (Smallest..Largest) */
:root[data-scale="xs"] .main { zoom: .85; }
:root[data-scale="s"] .main { zoom: .92; }
:root[data-scale="l"] .main { zoom: 1.10; }
:root[data-scale="xl"] .main { zoom: 1.20; }

/* Keep buttons, text and controls inside their box/section (esp. at larger sizes) */
.set-seg { flex-wrap: wrap; }
.set-row-ctl, .set-row-info { min-width: 0; }
.set-row-label, .set-row-desc { overflow-wrap: break-word; }
.perk-columns, .stats-mode-split, .mode-key-grid { min-width: 0; }
.stack-control, .cs-item, .perk-column, .stats-card, .stat-control { min-width: 0; }
.stack-control-head { gap: 8px; }
.stack-control-head > span, .cs-label, .stats-card-title { overflow-wrap: break-word; min-width: 0; }
.stack-buttons { flex-wrap: wrap; }

/* Loading spinner must always animate — it's load feedback, not decoration.
   Higher specificity than the data-motion="reduced" universal rule, so it wins. */
:root[data-motion="reduced"] .loading-spinner { animation: spin 0.8s linear infinite !important; }
:root[data-motion="reduced"] .loading-spinner::after { animation: spin 1.4s linear infinite reverse !important; }

/* ===== Exotic class item two-column icon perks (armor card + stats tab) ===== */
.ci-note { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: -4px 0 10px; }
.ci-hint, .ci-card-hint { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 11px; }
.ci-card-hint { padding: 0 2px; }
.ci-perk-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.ci-perk-box { min-width: 0; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 11px; }
.ci-perk-box-head { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--accent-bright); display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.ci-perk-box-role { font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .2px; text-transform: none; color: var(--text-secondary); }
.ci-perk-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-perk-item { cursor: default; flex: 0 0 auto; }
.ci-perk-item .perk-icon { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: border-color .12s, box-shadow .12s; }
.ci-perk-item .perk-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-perk-item:hover .perk-icon { border-color: var(--accent-bright); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.25); }
.ci-perk-item { cursor: pointer; }
.ci-perk-item.ci-selected .perk-icon { border-color: var(--accent-bright); background: rgba(var(--accent-rgb),.18); box-shadow: 0 0 0 2px var(--accent-bright), 0 0 10px rgba(var(--accent-rgb),.4); }
/* Selected-perk detail in the right window: condition headers above the big-number rows. */
.ci-detail-cond { font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent-bright); margin: 10px 0 4px; }
.ci-section .armor-exo-numrow:first-of-type, .ci-section .ci-detail-cond:first-of-type { margin-top: 6px; }
@media (max-width: 640px) { .ci-perk-cols { grid-template-columns: 1fr; } }

/* Logo text picks up the full theme: both accent colours (single-colour themes
   fall back to accent -> accent-dim, which reads as a subtle accent gradient). */
.logo-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Item 4: the weapon photo sits on top of a left column; the ammo symbol and the
   element symbol sit SIDE BY SIDE on one row directly below it (ammo left, element
   to its right) so the icons line up across all cards and nothing competes with
   the corner badges. */
.weapon-card .card-left-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex: 0 0 auto; align-self: center;
}
.weapon-card .card-left-col .weapon-ammo-icon { margin: 0; flex: 0 0 auto; }
/* Ammo + element on a single centered row under the photo. */
.weapon-card .card-left-col .card-icon-row {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 7px; flex: 0 0 auto;
}
.weapon-card .card-top > .expand-arrow-blank { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; }

/* On wide screens the weapons/armor pages are a 2-column split. Pin the page to
   the viewport and give the left list and the right detail panel each their OWN
   scrollbar, instead of one document-level scroll. (<=840px keeps page scroll.) */
@media (min-width: 841px) {
  /* Pin the page area to the viewport so the document itself never scrolls.
     The JS in 09-ui-fixes.js refines this height from the live header; this calc
     is the fallback if JS hasn't run yet. */
  body[data-current-page="weapons"] #mainContent,
  body[data-current-page="armor"] #mainContent {
    height: calc(100vh - var(--sticky-filter-top, 82px)) !important;
    overflow: hidden !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  /* The split container fills the pinned page. grid-template-rows: minmax(0,1fr)
     is essential: it gives the single row a DEFINITE height (the container's),
     so the columns get a height to scroll within instead of growing to content. */
  body[data-current-page="weapons"] .app-layout,
  body[data-current-page="armor"] .armor-db-layout {
    height: 100% !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  /* left column (filters + card grid) scrolls on its own - VERTICALLY ONLY.
     overflow-x:hidden kills the stray blue horizontal scrollbar at the bottom
     of the list when the card grid is a hair wider than the pane. */
  body[data-current-page="weapons"] .weapon-list-panel,
  body[data-current-page="armor"] .armor-list-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  /* SCROLL-INTO-NOTHING (weapons): the weapon cards must vanish as they scroll
     up under the floating controls, with NO visible box and the page background
     left open. The trick: every previous cover looked like a box because it used
     a FLAT colour (--bg-primary) while the real page background is a fixed
     radial-glow gradient (see body in 01-core-4) - so the flat patch showed as a
     lighter rectangle. This cover paints the IDENTICAL body gradient with
     background-attachment:fixed, so it lines up pixel-for-pixel with the page
     behind it and is completely invisible. The cards dissolve into it over the
     last few px (a soft line, not a hard edge) and the controls sit on top.
     pointer-events:none keeps clicks falling through. */
  body[data-current-page="weapons"] #weaponFilterPanel,
  body[data-current-page="armor"] #armorFilterPanel {
    position: sticky;
    isolation: isolate;          /* own stacking context so cards can't paint over */
  }
  body[data-current-page="weapons"] #weaponFilterPanel::after,
  body[data-current-page="armor"] #armorFilterPanel::after {
    content: "";
    position: absolute;
    left: -24px; right: -24px;
    top: -200px;                 /* cover well above, up past the header */
    bottom: 0;                   /* down to the bar's bottom edge = the vanish line */
    pointer-events: none;
    z-index: -1;                 /* behind the controls, in the bar's own context */
    /* EXACT copy of the body background (01-core-4), fixed so it aligns with the
       page pixel-for-pixel and is invisible. */
    background:
      radial-gradient(circle at top left, rgba(var(--accent-rgb), var(--glow-a1)), transparent var(--glow-r1)),
      radial-gradient(circle at bottom right, color-mix(in srgb, var(--accent-2), transparent var(--glow-t2)), transparent var(--glow-r2)),
      linear-gradient(180deg, #07090d 0%, #05070a 100%);
    background-attachment: fixed;
    /* soft 6px feather at the very bottom so cards melt into the line, not a hard cut */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 6px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 6px), transparent 100%);
  }
  /* right detail panel fills the column; its content scrolls on its own */
  body[data-current-page="weapons"] #buildWindowPanel.build-window,
  body[data-current-page="armor"] #armorDetailPanel.armor-detail-window {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body[data-current-page="weapons"] #buildWindowPanel.build-window::before,
  body[data-current-page="armor"] #armorDetailPanel.armor-detail-window::before {
    display: none !important;
  }
  /* the middle resizer = a full-height divider between the two scroll areas */
  body[data-current-page="weapons"] .app-layout > .layout-resizer,
  body[data-current-page="armor"] .armor-db-layout > .layout-resizer {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    align-self: stretch !important;
  }
  /* keep the filter bar pinned at the top of its own scrolling column */
  body[data-current-page="weapons"] #weaponFilterPanel,
  body[data-current-page="armor"] #armorFilterPanel {
    top: 0 !important;
  }
  body[data-current-page="weapons"] #weaponFilterPanel::before,
  body[data-current-page="armor"] #armorFilterPanel::before {
    display: none !important;
  }
}

/* ===== Aeon Cult Sect-mod picker (horizontal selectable symbols + right-side detail) ===== */
.aeon-sect-picker { padding: 2px 2px 0; }
.aeon-sect-label {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 9px;
}
.aeon-sect-row { display: flex; flex-wrap: wrap; gap: 10px; }
.aeon-sect-item {
  flex: 0 0 auto; width: 78px; cursor: pointer; text-align: center;
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 9px 6px;
  background: rgba(255,255,255,.03); transition: border-color .15s, background .15s, transform .12s;
}
.aeon-sect-item:hover { border-color: rgba(var(--accent-rgb),.55); transform: translateY(-1px); }
.aeon-sect-item.selected {
  border-color: rgba(var(--accent-rgb),.85);
  background: rgba(var(--accent-rgb),.12);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.45) inset;
}
.aeon-sect-icon {
  width: 44px; height: 44px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(0,0,0,.3);
  color: var(--text-secondary); font-size: 20px; overflow: hidden;
}
.aeon-sect-icon img { width: 100%; height: 100%; object-fit: contain; }
.aeon-sect-item.selected .aeon-sect-icon { border-color: rgba(var(--accent-rgb),.6); }
.aeon-sect-name {
  font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--text-secondary); line-height: 1.2;
}
.aeon-sect-item.selected .aeon-sect-name { color: var(--text-primary); }
.aeon-sect-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 9px; }

/* A selected armor card must keep its accent outline even while expanded. The `.armor-card.expanded`
   rule (02-refinements-1) sets border/box-shadow with !important and loads earlier, so without this
   the expanded selection looked unselected. Higher specificity + !important + later load = wins. */
.armor-card.selected,
.armor-card.expanded.selected {
  border-top-color: rgba(var(--accent-rgb), .6) !important;
  border-right-color: rgba(var(--accent-rgb), .6) !important;
  border-bottom-color: rgba(var(--accent-rgb), .6) !important;
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.92),
    0 0 26px 1px rgba(var(--accent-rgb), 0.48),
    0 12px 32px rgba(0,0,0,0.46) !important;
  transform: translateY(-3px) !important;
}

/* Filter columns size to their own content and never stretch to match the tallest column — a short
   list (e.g. Rarity) must not open a big empty area below itself. The resizer drives the shared chip-
   list height; the grid then auto-sizes to the lists, so empty space below the chips is impossible. */
.weapon-filter-grid { align-items: start !important; height: auto !important; }

/* ===================== Extras page (DR / Buff / Debuff calculators) ===================== */
.extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.extras-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 16px;
}
.extras-card-head { margin-bottom: 12px; }
.extras-card-title { font-size: 17px; font-weight: 800; color: var(--text-primary); letter-spacing: .3px; }
.extras-card-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.extras-out {
  display: flex; align-items: baseline; gap: 12px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.extras-out-big { font-size: 30px; font-weight: 800; color: rgba(var(--accent-rgb), 1); line-height: 1; }
.extras-out-small { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.extras-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dim); margin: 14px 0 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.extras-rule {
  font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: none;
  color: var(--text-dim); background: var(--bg-secondary);
  border: 1px solid var(--border-dim); border-radius: 20px; padding: 1px 7px;
}
.extras-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.extras-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-secondary); border: 1px solid var(--border-dim);
  border-radius: 8px; padding: 6px 9px; cursor: pointer;
  font-family: inherit; color: var(--text-primary); font-size: 11.5px; font-weight: 700;
  transition: border-color .12s, background .12s;
}
.extras-chip:hover { border-color: var(--border-bright); }
.extras-chip.active { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .14); }
.extras-chip-pct { font-size: 11px; font-weight: 800; color: var(--text-dim); }
.extras-chip.active .extras-chip-pct { color: rgba(var(--accent-rgb), 1); }
.extras-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.extras-seg-btn {
  background: var(--bg-secondary); border: 1px solid var(--border-dim);
  border-radius: 8px; padding: 6px 11px; cursor: pointer;
  font-family: inherit; color: var(--text-primary); font-size: 11.5px; font-weight: 700;
  transition: border-color .12s, background .12s;
}
.extras-seg-btn:hover { border-color: var(--border-bright); }
.extras-seg-btn.active { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .14); color: rgba(var(--accent-rgb), 1); }
.extras-stepper { align-items: center; }
.extras-stepper .extras-seg-btn { min-width: 34px; font-size: 15px; line-height: 1; padding: 5px 0; }
.extras-stepper-val { font-size: 12px; font-weight: 700; color: var(--text-primary); min-width: 96px; text-align: center; }
.extras-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.extras-part {
  font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-secondary); border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 2px 7px;
}
.extras-parts-empty { font-size: 11px; color: var(--text-dim); font-style: italic; margin-bottom: 4px; }
.extras-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.extras-custom-input {
  width: 92px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border-dim); background: var(--bg-secondary);
  color: var(--text-primary); font-family: inherit; font-size: 12px; font-weight: 700; outline: none;
}
.extras-custom-input:focus { border-color: rgba(var(--accent-rgb), .7); }
.extras-add-btn {
  background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .5);
  border-radius: 7px; padding: 6px 11px; cursor: pointer;
  color: rgba(var(--accent-rgb), 1); font-family: inherit; font-size: 11.5px; font-weight: 800;
}
.extras-add-btn:hover { background: rgba(var(--accent-rgb), .24); }
.extras-custom-chips { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.extras-custom-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; color: var(--text-primary);
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 6px; padding: 3px 4px 3px 8px;
}
.extras-custom-x {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px; font-weight: 800;
}
.extras-custom-x:hover { color: var(--text-primary); }

/* ===== Extras · weapon-perk picker window ===== */
.extras-perk-bar { display: flex; gap: 8px; margin: 2px 0 8px; }
.extras-perk-open {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  color: rgba(var(--accent-rgb), 1); background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 8px;
  padding: 7px 12px; transition: background .12s ease, border-color .12s ease;
}
.extras-perk-open:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.7); }
.extras-perk-empty { color: var(--text-dim, #8a8f98); font-size: 12.5px; padding: 4px 2px; }

.extras-modal-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(4, 6, 10, 0.66); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: extrasFade .12s ease;
}
@keyframes extrasFade { from { opacity: 0; } to { opacity: 1; } }

/* Unified page-open animation: every page that renders into #mainContent fades
   in on open, matching the Weapons-page entrance the rest of the app already had.
   Opacity-only so it never disturbs sticky filter panels or triggers layout shift.
   Only the page ROOT is a direct child, so in-page re-renders (grid/filters, which
   touch grandchildren) don't replay it. Reduced-motion users get animation:none. */
#mainContent.d2gl-nav-anim > * { animation: d2glPageEnter .34s ease; }
@keyframes d2glPageEnter { from { opacity: 0; } to { opacity: 1; } }
.extras-modal {
  width: 100%; max-width: 460px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--bg-card, #11151c); border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); overflow: hidden;
}
.extras-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.extras-modal-title { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.extras-modal-count { font-weight: 600; font-size: 12px; color: rgba(var(--accent-rgb), 1); margin-left: 6px; }
.extras-modal-close {
  appearance: none; cursor: pointer; border: none; background: transparent;
  color: var(--text-dim, #99a); font-size: 22px; line-height: 1; padding: 0 4px; border-radius: 6px;
}
.extras-modal-close:hover { color: #fff; }
.extras-perk-search {
  margin: 0 16px 6px; padding: 9px 11px; font: inherit; font-size: 13px;
  color: var(--text, #e7e9ee); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-dim, rgba(255,255,255,0.12)); border-radius: 9px; outline: none;
}
.extras-perk-search:focus { border-color: rgba(var(--accent-rgb), 0.6); }
.extras-modal-body { overflow-y: auto; padding: 4px 12px 8px; }
.extras-modal-grp {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim, #8a8f98); padding: 12px 4px 6px;
}
.extras-modal-grp .extras-rule { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.extras-perk-list { display: flex; flex-direction: column; gap: 4px; }
.extras-perk-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  appearance: none; cursor: pointer; font: inherit; color: var(--text, #e7e9ee);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-dim, rgba(255,255,255,0.10));
  border-radius: 9px; padding: 9px 11px; transition: background .1s ease, border-color .1s ease;
}
.extras-perk-row:hover { background: rgba(255, 255, 255, 0.06); }
.extras-perk-row.active { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.55); }
.extras-perk-sym {
  flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--text-dim, #8a8f98);
}
.extras-perk-sym svg { width: 16px; height: 16px; }
.extras-perk-row.active .extras-perk-sym { color: rgba(var(--accent-rgb), 1); }
.extras-perk-name { flex: 1 1 auto; font-size: 13px; }
.extras-perk-pct { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: rgba(var(--accent-rgb), 1); }
.extras-modal-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border-dim, rgba(255,255,255,0.08)); }
.extras-modal-done {
  appearance: none; cursor: pointer; width: 100%; font: inherit; font-weight: 700; font-size: 14px;
  color: #07120a; background: rgba(var(--accent-rgb), 1); border: none; border-radius: 9px; padding: 10px;
}
.extras-modal-done:hover { filter: brightness(1.08); }

/* ===== Extras · sub-group framing (make each group stand out) ===== */
.extras-subgroup {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-dim, rgba(255,255,255,0.08));
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin: 10px 0 0;
}
.extras-subgroup .extras-group-label { margin-top: 0; }
.extras-subgroup .extras-chips:last-child,
.extras-subgroup .extras-seg:last-child,
.extras-subgroup .extras-custom:last-child,
.extras-subgroup .extras-perk-bar:last-child { margin-bottom: 0; }

/* Extras · Weapons-stat slider */
.extras-slider-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }
.extras-wstat-slider {
  flex: 1 1 auto; height: 4px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, rgba(var(--accent-rgb), 0.7), rgba(var(--accent-rgb), 0.22));
  border-radius: 3px; outline: none; cursor: pointer;
}
.extras-wstat-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(var(--accent-rgb), 1); border: 2px solid var(--bg-card, #11151c); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.extras-wstat-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--accent-rgb), 1);
  border: 2px solid var(--bg-card, #11151c); cursor: pointer;
}
.extras-slider-val { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: rgba(var(--accent-rgb), 1); min-width: 96px; text-align: right; }

/* ===== Landing · settings gear (top-right) ===== */
.landing-gear {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; cursor: pointer; color: var(--text-primary); transition: all .2s; z-index: 2;
}
.landing-gear svg { opacity: .55; transition: opacity .2s; }
.landing-gear:hover { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .18); }
.landing-gear:hover svg { opacity: 1; } /* spin handled by .ico-fx .gear-spin */

/* ===== Lab · Elemental Honing element toggle ===== */
.extras-honing-mode { margin-bottom: 8px; }
.extras-honing-mode .extras-seg-btn { flex: 1 1 0; font-weight: 700; }

/* ===== Lab · fireteam DPS calculator ===== */
/* Top stat tiles + damage-phase control */
.ft-stats { display: flex; flex-direction: column; gap: 12px; }
.ft-stat {
  background: var(--bg-card); border: 1px solid var(--border-dim);
  border-radius: 12px; padding: 13px 16px; min-width: 0;
}
.ft-stat-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.42);
}
.ft-stat-val {
  font-size: 26px; font-weight: 900; line-height: 1; color: var(--text-primary);
  letter-spacing: .3px; overflow-wrap: anywhere;
}
.ft-stat-hero .ft-stat-val { color: rgba(var(--accent-rgb), 1); }
.ft-stat-lbl {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dim); margin-top: 6px;
}
.ft-stat-phase .ft-phase-row { margin-bottom: 6px; }
.ft-phase-row { display: flex; align-items: baseline; gap: 6px; }
.ft-phase-input {
  width: 78px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border-dim); background: var(--bg-secondary);
  color: var(--text-primary); font-family: inherit; font-size: 22px; font-weight: 900; outline: none; text-align: center;
}
.ft-phase-input:focus { border-color: rgba(var(--accent-rgb), .7); }
.ft-phase-unit { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* Buff (2/3) + Debuff (1/3) row — forced equal height */
.extras-grid-config { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.extras-grid-config > .extras-card { margin-bottom: 0; }
@media (max-width: 860px) { .extras-grid-config { grid-template-columns: 1fr; align-items: start; } }

/* Honing on/off toggle (reveals the stack + element when on) */
.extras-toggle {
  appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-secondary); border: 1px solid var(--border-dim); border-radius: 999px;
  padding: 4px 11px 4px 5px; transition: border-color .12s, background .12s;
}
.extras-toggle-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--text-dim); transition: background .12s; }
.extras-toggle-txt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.extras-toggle.on { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); }
.extras-toggle.on .extras-toggle-dot { background: rgba(var(--accent-rgb), 1); }
.extras-toggle.on .extras-toggle-txt { color: rgba(var(--accent-rgb), 1); }
.extras-honing-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Lower row: fireteam builder + table (left, 2/3) | the 4 stats (right, 1/3) */
.ft-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.ft-col-left, .ft-col-right { min-width: 0; }
@media (max-width: 860px) { .ft-grid2 { grid-template-columns: 1fr; } }

/* Fireteam card */
.ft-card { margin-bottom: 0; }
.ft-build {
  background: var(--bg-secondary); border: 1px solid var(--border-dim);
  border-radius: 10px; padding: 12px; margin-bottom: 14px;
}
.ft-build-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft-namebar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border-dim); }
.ft-name-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.ft-name { width: 210px; max-width: 55%; font-weight: 700; }
.ft-newg {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  color: rgba(var(--accent-rgb), 1); background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 8px; padding: 6px 11px; margin-left: auto;
  transition: background .12s;
}
.ft-newg:hover { background: rgba(var(--accent-rgb), .18); }
.ft-srctype { flex: 0 0 auto; }
.ft-srcfields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 280px; }
.ft-input {
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-dim);
  background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; outline: none;
}
.ft-input:focus { border-color: rgba(var(--accent-rgb), .7); }
.ft-variant { flex: 0 1 200px; }
.ft-num { width: 110px; font-weight: 700; }
.ft-num-sm { width: 78px; }
.ft-text { width: 170px; }
.ft-dps-tag { font-size: 12px; font-weight: 800; color: rgba(var(--accent-rgb), 1); white-space: nowrap; }
.ft-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: pointer; }
.ft-check input { accent-color: rgba(var(--accent-rgb), 1); }
.ft-weapon-btn { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-field { display: inline-flex; align-items: center; gap: 6px; }
.ft-ss-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); white-space: nowrap; }
.ft-ss-pct { color: rgba(var(--accent-rgb), 1); font-weight: 800; }
.ft-add { white-space: nowrap; margin-left: auto; }
.ft-build-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }
.ft-empty { font-size: 12.5px; color: var(--text-dim); font-style: italic; padding: 14px 4px; text-align: center; }

/* Fireteam table — transposed: guardians as columns, grouped by name */
.ft-table-wrap { overflow-x: auto; }
.ft-gtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ft-gtable th, .ft-gtable td { border-bottom: 1px solid var(--border-dim); vertical-align: middle; }
.ft-gtable tbody th {
  text-align: left; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-dim); padding: 9px 12px 9px 2px; white-space: nowrap; width: 1%;
}
.ft-gtable td { padding: 9px 10px; color: var(--text-primary); font-weight: 600; text-align: center; min-width: 96px; }
.ft-g-corner { border-bottom: 1px solid var(--border-dim); }
.ft-g-head {
  text-align: center; padding: 8px 10px; border-bottom: 2px solid rgba(var(--accent-rgb), .35);
  font-weight: 800; color: var(--text-primary); white-space: nowrap;
}
.ft-g-name { font-size: 12.5px; font-weight: 800; }
.ft-g-del { margin-left: 6px; }
.ft-d-src { font-weight: 700; }
.ft-r-dps td { font-variant-numeric: tabular-nums; }
.ft-r-total td { font-weight: 800; color: rgba(var(--accent-rgb), 1); font-variant-numeric: tabular-nums; }
.ft-r-total th { color: var(--text-primary); }
.ft-c-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-mini {
  appearance: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
  color: var(--text-dim); background: var(--bg-secondary); border: 1px solid var(--border-dim);
  border-radius: 7px; padding: 4px 9px; margin-left: 5px; transition: border-color .12s, color .12s;
}
.ft-mini:hover { border-color: var(--border-bright); color: var(--text-primary); }
.ft-mini-x { font-size: 13px; line-height: 1; padding: 2px 7px; }
.ft-star { color: rgba(var(--accent-rgb), 1); font-size: 11px; }
.ft-tag-other {
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; vertical-align: middle;
  color: var(--text-dim); background: var(--bg-secondary); border: 1px solid var(--border-dim); border-radius: 5px; padding: 1px 5px; margin-left: 5px;
}
.ft-table-note { font-size: 11px; color: var(--text-dim); margin-top: 9px; line-height: 1.4; }

/* DR section relocated to the bottom, laid out horizontally */
.extras-grid-dr { grid-template-columns: 1fr; }
.extras-grid-dr .extras-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 22px; align-items: start;
}
.extras-grid-dr .extras-card-head,
.extras-grid-dr .extras-out,
.extras-grid-dr .extras-dr-parts { grid-column: 1 / -1; }

/* ===== Lab · selected chips: body click mutes/enables, × removes ===== */
.extras-chip-sel {
  position: relative; border-color: rgba(var(--accent-rgb), .7);
  background: rgba(var(--accent-rgb), .14); padding-right: 6px;
}
.extras-chip-sel .extras-chip-pct { color: rgba(var(--accent-rgb), 1); }
.extras-chip-sel.muted { border-color: var(--border-dim); background: var(--bg-secondary); opacity: .55; }
.extras-chip-sel.muted .extras-chip-name { text-decoration: line-through; }
.extras-chip-sel.muted .extras-chip-pct { color: var(--text-dim); }
.extras-chip-x {
  appearance: none; border: none; background: transparent; cursor: pointer; color: var(--text-dim);
  font-size: 15px; line-height: 1; padding: 0 2px; margin-left: 1px; border-radius: 4px; font-weight: 700;
}
.extras-chip-x:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* ===== Lab · nested sub-item (sits under the main controls, same group box) ===== */
.extras-subitem {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border-dim, rgba(255,255,255,0.14));
}
.extras-subitem-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim, #8a8f98); margin-bottom: 6px;
}
.extras-subitem-label .extras-rule { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }

/* ===== Lab · per-subsection select-all/clear + per-card clear-all ===== */
.extras-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.extras-clearall {
  flex: 0 0 auto; appearance: none; cursor: pointer; font: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #ffb6b6; background: rgba(255, 80, 80, .10); border: 1px solid rgba(255, 120, 120, .32);
  border-radius: 7px; padding: 5px 10px; transition: color .12s, border-color .12s, background .12s; white-space: nowrap;
}
.extras-clearall:hover:not(:disabled) { color: #fff; background: rgba(255, 80, 80, .18); border-color: rgba(255, 120, 120, .58); }
.extras-clearall:disabled { opacity: .35; cursor: default; }
/* Global "confirm before clearing" armed state — applied to any Clear button by the
   guard in 14-settings.js while it waits for the confirming second tap. The guard swaps
   the real button text to "Confirm?", and the filter-panel label sync skips armed buttons,
   so this only needs to style the armed state (no text overlay). */
.confirm-armed { border-color: rgba(255, 120, 120, .9) !important; box-shadow: 0 0 0 2px rgba(255, 70, 70, .55), 0 0 12px rgba(255, 80, 80, .35) !important; }
.extras-subitem-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.extras-lbl-text { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.extras-sec-btn {
  margin-left: auto; flex: 0 0 auto; appearance: none; cursor: pointer; font: inherit;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  border-radius: 6px; padding: 3px 8px; border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s; white-space: nowrap;
}
.extras-sec-all { color: #bdf7cf; background: rgba(104, 227, 148, .13); border-color: rgba(104, 227, 148, .62); }
.extras-sec-all:hover { color: #ecfff2; background: rgba(104, 227, 148, .22); border-color: rgba(104, 227, 148, .86); }
.extras-sec-clear { color: #ffb6b6; background: rgba(255, 80, 80, .10); border-color: rgba(255, 120, 120, .32); }
.extras-sec-clear:hover { color: #fff; background: rgba(255, 80, 80, .18); border-color: rgba(255, 120, 120, .58); }

/* Lab, Guardian and Vendors have no searchable list, so blank the header search bar on them.
   Use visibility (not display) so the search box keeps its footprint and the page-nav buttons
   sit in exactly the same spot on every page. On mobile (<=900px) the search wraps to its own
   full-width row, so there it's fully collapsed to avoid leaving an empty strip. */
body[data-current-page="extras"] .search-container,
body[data-current-page="guardian"] .search-container,
body[data-current-page="vendors"] .search-container { visibility: hidden; }
@media (max-width: 900px) {
  body[data-current-page="extras"] .search-container,
  body[data-current-page="guardian"] .search-container,
  body[data-current-page="vendors"] .search-container { display: none; }
}

/* Settings search results (flat, grouped by section). */
.settings-search-results .set-search-group { margin-bottom: 18px; }
.set-search-group-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin: 2px 0 8px; }
.set-search-empty { color: var(--text-secondary); padding: 14px 2px; }

/* ── Narrow filter-group headers ───────────────────────────────────────────
   The Select All / Clear button always sits on the same row as the filter
   title (right-aligned). The title shrinks and wraps as the column narrows so
   the button stays beside it instead of overlapping or dropping below.
   Applies to weapons + armor (shared classes). */

/* ── Top spacing: match the nav→first-box gap to the (smaller) first-box→content gap ──
   These pages render a title/class box as the first child of .main. The .main top
   padding (24px) left a larger gap above that box than the gap below it. Tighten the
   top gap so it equals the inner content gap on each page (the smaller value):
   guardian's class-row margin (16px); the shared .armor-page grid gap (12px). */
body[data-current-page="guardian"] .main { padding-top: 16px !important; }
body[data-current-page="build-crafter"] .main,
body[data-current-page="extras"] .main,
body[data-current-page="vendors"] .main { padding-top: 12px !important; }

/* ── Unify select/clear button corner rounding ─────────────────────────────
   The armor window's Clear All button (.clear-all-top) renders at 4px; other
   select/clear buttons were scattered across 5/6/7/10px. Pin them all to 4px
   so every select/clear button matches the armor window button. Listed states
   include the hover/active variants that otherwise change radius. */
.clear-filter-btn,
.clear-list-filters,
.clear-all-top,
.right-filter-clear,
.filter-controls-clear-btn,
.filter-controls-clear-btn:active,
.extras-clearall,
.extras-sec-btn,
.build-clear-all-btn,
.build-title-row .build-clear-all-btn,
.build-title-row .build-clear-all-btn:active,
#weaponFilterPanel .clear-filter-btn,
#armorFilterPanel .clear-filter-btn,
#weaponFilterPanel .clear-filter-btn.select-all-filter-btn,
#weaponFilterPanel .clear-filter-btn.select-all-filter-btn:hover,
#armorFilterPanel .clear-filter-btn.select-all-filter-btn {
  border-radius: 4px !important;
}

/* ── Clear / Clear-All buttons: clean enabled look + dim when nothing to clear ──
   Mirrors the armor-picker stat-target Clear button (.clear-filter-btn): a clean
   subtle button when there's something to clear, greyed to opacity .35 (via the
   `disabled` attribute, set by 26-clear-states.js) when nothing is selected. */
/* De-red the perk-filter clears so they match the filter Clear All (clean, not red). */
.filter-controls-clear-btn,
.right-filter-clear {
  border: 1px solid rgba(255,120,120,.32) !important;
  background: rgba(255,80,80,.10) !important;
  color: #ffb6b6 !important;
}
.filter-controls-clear-btn:hover:not(:disabled),
.right-filter-clear:hover:not(:disabled) {
  border-color: rgba(255,120,120,.58) !important;
  background: rgba(255,80,80,.18) !important;
  color: #fff !important;
}
/* Dim state (nothing to clear). */
.clear-all-top:disabled,
.build-clear-all-btn:disabled,
.filter-controls-clear-btn:disabled,
.right-filter-clear:disabled {
  opacity: .35 !important;
  cursor: default !important;
}
.clear-all-top:disabled:hover,
.build-clear-all-btn:disabled:hover,
.filter-controls-clear-btn:disabled:hover,
.right-filter-clear:disabled:hover {
  border-color: rgba(255,120,120,.32) !important;
  background: rgba(255,80,80,.10) !important;
  color: #ffb6b6 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Guardian subsection Clear buttons (Overshields, Damage resistance, etc.) ──
   Sit on the same row as the subsection title; clean enabled, dim when empty. */
.guardian-page .extras-subgroup .extras-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.g-sub-clear {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,120,120,.32);
  background: rgba(255,80,80,.10);
  color: #ffb6b6;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.g-sub-clear:hover:not(:disabled) {
  border-color: rgba(255,120,120,.58);
  background: rgba(255,80,80,.18);
  color: #fff;
}
.g-sub-clear:disabled { opacity: .35; cursor: default; }

/* ── Nav-icon hover/active animations ───────────────────────────────────────
   Each icon animates on hover, holds its end state while its page is active
   (.page-nav-btn.active), and reverses when hover ends / the page is deselected.
   renderNavFixed keeps the buttons in the DOM (it toggles .active rather than
   rebuilding) so these transitions play in both directions. */
.ico-fx .nav-icon svg { overflow: visible; }

/* Settings — gear spins 270° clockwise (reverses anti-clockwise on leave). */
.ico-fx .gear-spin {
  transform-box: fill-box; transform-origin: center;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.ico-fx:hover .gear-spin,
.ico-fx.active .gear-spin { transform: rotate(270deg); }

/* Armor Picker — the four squares drift out to the corners (slow). */
.ico-fx .ap-sq { transition: transform 1.1s cubic-bezier(.33,1,.68,1); }
.ico-fx:hover .ap-tl, .ico-fx.active .ap-tl { transform: translate(calc(var(--ico-sz,26px) * -.115), calc(var(--ico-sz,26px) * -.115)); }
.ico-fx:hover .ap-tr, .ico-fx.active .ap-tr { transform: translate(calc(var(--ico-sz,26px) *  .115), calc(var(--ico-sz,26px) * -.115)); }
.ico-fx:hover .ap-bl, .ico-fx.active .ap-bl { transform: translate(calc(var(--ico-sz,26px) * -.115), calc(var(--ico-sz,26px) *  .115)); }
.ico-fx:hover .ap-br, .ico-fx.active .ap-br { transform: translate(calc(var(--ico-sz,26px) *  .115), calc(var(--ico-sz,26px) *  .115)); }

/* Lab — bubbles ride up the centre-line at a steady (linear) speed, through the neck. */
.ico-fx .lab-bubble { opacity: 0; fill: var(--bg-primary, #15171c); transform-box: fill-box; transform-origin: center; }
@keyframes lab-rise {
  0%   { transform: translateY(calc(var(--ico-sz,26px) *  .08)) scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(calc(var(--ico-sz,26px) * -.42)) scale(1); opacity: 0; }
}
.ico-fx:hover .lab-b1, .ico-fx.active .lab-b1 { animation: lab-rise 3.2s linear infinite; }
.ico-fx:hover .lab-b2, .ico-fx.active .lab-b2 { animation: lab-rise 3.2s linear infinite 1.05s; }
.ico-fx:hover .lab-b3, .ico-fx.active .lab-b3 { animation: lab-rise 3.2s linear infinite 2.1s; }

/* Vendor — shop door swings open on its left hinge. */
.ico-fx .shop-door {
  transform-box: fill-box; transform-origin: left center;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.ico-fx:hover .shop-door, .ico-fx.active .shop-door { transform: scaleX(.08); }

/* ── Weapon — hand cannon rests at ~2 o'clock and swings anti-clockwise up to ~1 o'clock. */
.ico-fx .w-hc {
  transform-box: fill-box; transform-origin: center;
  transition: transform 1s cubic-bezier(.25,.8,.3,1);
  transform: rotate(30deg);
}
.ico-fx:hover .w-hc, .ico-fx.active .w-hc { transform: rotate(0deg); }

/* ── Armor — the helmet rotates in 3D, slowly and continuously. */
.ico-fx .armor-helm { position: relative; display: inline-flex; width: var(--ico-sz,26px); height: var(--ico-sz,26px); perspective: 340px; }
.ico-fx .armor-helm .helm-rot {
  position: relative; width: var(--ico-sz,26px); height: var(--ico-sz,26px);
  transform-style: preserve-3d; transform-origin: center;
}
.ico-fx .armor-helm .helm-face {
  position: absolute; inset: 0; width: var(--ico-sz,26px); height: var(--ico-sz,26px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center;
}
.ico-fx .armor-helm .helm-s { transform: rotateY(0deg); }
.ico-fx .armor-helm .helm-f { transform: rotateY(180deg); }
/* Spin a full turn, then hold the helmet front-on (~0.4s of the 4.5s cycle) before turning again. */
@keyframes helm-spin { 0% { transform: rotateY(0deg); } 91% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }
.ico-fx:hover .helm-rot,
.ico-fx.active .helm-rot { animation: helm-spin 4.5s linear infinite; }

/* ── Guardian — the disc rises away as the class emblem rises in from below (slow). */
.ico-fx .guardian-ico { position: relative; display: inline-flex; width: var(--ico-sz,26px); height: var(--ico-sz,26px); overflow: hidden; }
.ico-fx .guardian-ico .gd-disc {
  position: absolute; inset: 0; width: var(--ico-sz,26px); height: var(--ico-sz,26px);
  transform-box: fill-box; transform-origin: center;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1), opacity 1s ease;
}
.ico-fx .guardian-ico .gd-emb {
  position: absolute; inset: 0; width: var(--ico-sz,26px); height: var(--ico-sz,26px); display: none;
  opacity: 0; transform: translateY(calc(var(--ico-sz,26px) * .62)) scale(.85);
  transform-box: fill-box; transform-origin: center;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1), opacity 1s ease;
}
.ico-fx .guardian-ico[data-gclass="titan"]   .gd-e-titan,
.ico-fx .guardian-ico[data-gclass="hunter"]  .gd-e-hunter,
.ico-fx .guardian-ico[data-gclass="warlock"] .gd-e-warlock { display: block; }
.ico-fx:hover .gd-disc, .ico-fx.active .gd-disc { transform: translateY(calc(var(--ico-sz,26px) * -.62)); opacity: 0; }
.ico-fx:hover .guardian-ico .gd-emb,
.ico-fx.active .guardian-ico .gd-emb { opacity: 1; transform: translateY(0) scale(1); }

/* Shared icon size token (drives the size-relative animations above). */
.ico-fx { --ico-sz: 26px; }
/* Landing screen reuses the exact nav icons; scale them up so the same .ico-fx animations run. */
.landing-btn.ico-fx { --ico-sz: 46px; }
.landing-btn .nav-icon, .landing-gear .nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.landing-btn .nav-icon svg { width: 46px; height: 46px; overflow: visible; }
.landing-gear .nav-icon svg { width: 22px; height: 22px; overflow: visible; }

/* Fixed unofficial-tool disclaimer pinned to the bottom-right on every page. Sits above
   the landing overlay (z 9999) but below the boot loader (z 99999); pointer-events:none
   so it never intercepts clicks and position:fixed so it never shifts any layout. */
#siteDisclaimer {
  position: fixed;
  right: 12px;
  bottom: 8px;
  z-index: 10000;
  max-width: min(340px, 72vw);
  text-align: right;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-dim);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
body.startup-loading #siteDisclaimer { display: none; }

/* ===== Stats window: minimize / open the weapon name + icon header ===== */
.stats-sticky-top { position: sticky; }
.stats-hero-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim, #9aa3b5);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stats-hero-toggle:hover { background: rgba(255,255,255,0.1); color: var(--text-bright, #e8ecf4); }
.stats-hero-toggle svg { transition: transform 0.18s ease; transform: rotate(180deg); }
.stats-sticky-top.stats-hero-min .stats-hero-toggle svg { transform: rotate(0deg); }
.stats-sticky-top.stats-hero-min .stats-hero { display: none; }
/* keep the toggle clear of the weapon art when expanded */
.stats-sticky-top .stats-hero { padding-right: 30px; }

/* ============================================================
   BUILD-WINDOW SECTION BUTTONS — HORIZONTAL SCROLL
   On narrow widths (mobile especially) the section buttons
   (Alternatives / Perk Filter / Inspect / Compare / Stats)
   overflowed .build-actions and were clipped by the window's
   overflow:hidden — Stats, being last, was unreachable. The row
   now scrolls horizontally instead of clipping, so any number
   of future section buttons stays reachable. Same pattern the
   desktop right-compact mode already uses; scrollbar hidden,
   touch momentum scrolling on, and over-scroll contained so a
   row swipe never triggers browser back-navigation.
   ============================================================ */
.build-window .build-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
}
.build-window .build-actions::-webkit-scrollbar { display: none; } /* WebKit */
.build-window .build-actions .build-btn {
  flex: 0 0 auto;       /* keep natural size; never squash or drop */
  white-space: nowrap;  /* labels never wrap mid-word */
}

/* ============================================================
   VENDOR LIVE STOCK (33-vendor-sales.js)
   Per-card inventory: status line, collapsible item list with
   icons, weapon roll strip and cost chips.
   ============================================================ */
.vinv-status { font-size: 11px; color: var(--text-secondary); opacity: .8; padding: 2px 0; }
.vinv-status.vinv-error { color: #ff8a7a; opacity: 1; }
.vendor-stock-stamp { opacity: .7; font-size: 10.5px; margin-left: 6px; }

.vinv-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px; padding: 7px 10px; cursor: pointer;
  color: var(--text-primary); font-family: 'Orbitron', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .35px;
}
.vinv-toggle:hover { border-color: rgba(var(--accent-rgb), .45); }
.vinv-toggle-label { flex: 1; text-align: left; }
.vinv-count { color: var(--text-secondary); font-weight: 600; font-size: 10px; }
.vinv-chev { transition: transform .15s ease; font-size: 11px; color: var(--text-secondary); }
.vinv-toggle.open .vinv-chev { transform: rotate(180deg); }

.vinv-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.vinv-group { min-width: 0; }
.vinv-strip {
  display: flex; flex-direction: row; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 8px; scrollbar-width: thin;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.vinv-group-head {
  font-family: 'Orbitron', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary);
  margin: 0 0 6px;
}
.vinv-row {
  flex: 0 0 150px; width: 150px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 9px; padding: 11px 9px;
  scroll-snap-align: start;
}
.vinv-icon { width: 46px; height: 46px; border-radius: 7px; flex: 0 0 auto; background: rgba(0,0,0,.45); }
.vinv-main { width: 100%; min-width: 0; text-align: center; }
.vinv-name {
  font-size: 11.5px; font-weight: 600; color: var(--text-primary); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vinv-qty { margin-left: 5px; font-size: 10px; color: var(--text-secondary); font-weight: 500; }
.vinv-type { font-size: 9.5px; color: var(--text-secondary); margin-top: 1px; }
.vinv-t-exotic { color: #d9b13a; }
.vinv-t-legendary { color: #c08ae6; }
.vinv-t-rare { color: #7fb3e8; }
.vinv-t-uncommon { color: #7ecf90; }
.vinv-t-common { color: #cfc8bf; }
.vinv-perks { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; justify-content: center; }
.vinv-perk {
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255,255,255,.08); padding: 1px;
}
.vinv-costs {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 8px;
  justify-content: center; align-items: center;
  margin-top: 2px; font-size: 10px; color: var(--text-secondary);
}
.vinv-cost { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vinv-cost-icon { width: 13px; height: 13px; }
.vinv-cost-name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Sign in with Bungie (34-bungie-auth.js) ---- */
.vendor-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.vendor-auth-name { font-size: 11px; color: var(--text-primary); opacity: .9; }
.vendor-auth-btn {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: var(--text-primary); font-family: 'Orbitron', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .35px;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.vendor-auth-btn:hover { border-color: rgba(var(--accent-rgb), .5); }
.vendor-auth-signin { border-color: rgba(var(--accent-rgb), .4); color: var(--accent-bright); }
.vendor-auth-expired { font-size: 10.5px; color: #f3c46a; }
.vinv-signin-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent-bright); font-size: 11px; text-decoration: underline;
}

/* ---- Extra vendors (focusing screens etc., signed-in) ---- */
.vendor-extra-icon { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; background: rgba(0,0,0,.4); }
.vendor-extra-grid { margin-top: 14px; }

/* ---- Vendor rows: stack rail above body on narrow screens ---- */
@media (max-width: 720px) {
  .vendor-card { flex-direction: column; gap: 12px; }
  .vendor-rail { flex-basis: auto; }
  .vendor-rail .vendor-foot { margin-top: 11px; }
}

/* ============================================================================
   DETAIL AUTO-COLLAPSE (35-detail-collapse.js)
   ----------------------------------------------------------------------------
   Closed is the DEFAULT (`:not(open)`) so the page never flashes an empty
   split before scripts settle. Attribute-selector specificity (0,2,0) beats
   every base layout rule (0,1,0) regardless of file order.
   ============================================================================ */
.app-layout:not([data-detail="open"]),
.armor-db-layout:not([data-detail="open"]) { grid-template-columns: 1fr; overflow-x: clip; max-width: 100%; }
.app-layout:not([data-detail="open"]) > .layout-resizer,
.app-layout:not([data-detail="open"]) > .build-window,
.armor-db-layout:not([data-detail="open"]) > .layout-resizer,
.armor-db-layout:not([data-detail="open"]) > .armor-detail-window { display: none; }
/* Gentle fade when the pane earns its width. Opacity only: a transform here
   would create a containing block and break the pane's position:sticky. */
.app-layout[data-detail="open"] > .build-window,
.armor-db-layout[data-detail="open"] > .armor-detail-window { animation: d2glDetailIn .2s ease; }
@keyframes d2glDetailIn { from { opacity: 0; } to { opacity: 1; } }

/* Replay the open fade when a DIFFERENT weapon is selected while the pane is
   already open (data-detail stays "open" so the rule above won't re-fire). 35/
   01k toggles .d2gl-detail-reselect to restart it. Higher specificity so it wins
   over the steady open rule. */
#buildWindowPanel.build-window.d2gl-detail-reselect,
.app-layout[data-detail="open"] > .build-window.d2gl-detail-reselect {
  animation: d2glDetailIn .2s ease;
}

/* Reverse fade on CLOSE: 35 adds .d2gl-detail-closing while data-detail is still
   "open" (so the pane is still shown + 2-col) and holds it for ~180ms so this
   exit fade can play, THEN flips data-detail to closed. Opacity only - a
   transform would create a containing block and break the pane's sticky. */
.app-layout.d2gl-detail-closing[data-detail="open"] > .build-window,
.armor-db-layout.d2gl-detail-closing[data-detail="open"] > .armor-detail-window {
  animation: d2glDetailOut .16s ease forwards;
}
@keyframes d2glDetailOut { from { opacity: 1; } to { opacity: 0; } }

/* ----------------------------------------------------------------------------
   RESPONSIVE LAYOUT - THREE CLEAN STATES (no progressive shuffling)
   ----------------------------------------------------------------------------
   NORMAL  (> 900px): the desktop side-by-side split, untouched.
   MEDIUM  (601-900px), weapon open: ONE-column weapon list on the LEFT at a
           fixed 288px width (>= the 280px/430px thresholds, so the desktop
           left/right-compact toggles in 01k can never fire = no card reshuffle),
           inspect on the RIGHT. The inspect's own container query (<=860px,
           defined below) drops its internals to a single vertical column in the
           order: name, picture, description, mods/catalyst, perks, stats,
           PvP/PvE tabs, graphs.
   SMALL   (<= 600px), weapon open: the list is hidden; the inspect fills the
           width and stays vertical (same container query).

   In MEDIUM + SMALL the split dividers and the mobile list/inspect drag handle
   are hidden, the list scrolls inside a sticky rail, and the inspect flows in
   the page - so nothing reshuffles while resizing within a state.

   The grid !important beats `.app-layout{grid-template-columns:1fr !important}`
   at <=900px (01-core-3). Everything stays scoped to [data-detail="open"], so
   the un-inspected browse list is left exactly as it was.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* MEDIUM - list left (one fixed-width column), inspect right. */
  .app-layout[data-detail="open"] {
    grid-template-columns: 288px minmax(0, 1fr) !important;
    gap: 10px;
    align-items: start;
  }
  /* Split dividers are meaningless here. */
  .app-layout[data-detail="open"] > .layout-resizer { display: none !important; }
  /* List rides as a sticky rail that stays put while the inspect scrolls, and
     scrolls inside its own column (overrides the mobile 58vh cap). Filters are
     reachable from the top-bar search while a weapon is open. */
  .app-layout[data-detail="open"] > .weapon-list-panel {
    position: sticky; top: calc(var(--strip-h) + 16px); align-self: start;
  }
  .app-layout[data-detail="open"] #weaponFilterPanel { display: none; }
  .app-layout[data-detail="open"] .weapon-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: calc(100vh - var(--strip-h) - 48px);
    overflow-y: auto;
  }
  /* Inspect flows in the page so all of it (including the graphs) is reachable
     by normal scrolling - no trapped inner scrollbox. */
  .app-layout[data-detail="open"] > .build-window {
    position: static; height: auto; max-height: none; overflow: visible;
  }
}

/* SMALL - drop the list entirely; inspect goes full-width (still vertical via
   the container query). Tap the list when not inspecting; close (X) to return. */
@media (max-width: 600px) {
  .app-layout[data-detail="open"] {
    grid-template-columns: 1fr !important;
  }
  .app-layout[data-detail="open"] > .weapon-list-panel { display: none !important; }
}

/* ============================================================================
   FILTER SUMMARY CHIPS (36-filter-chips.js)
   ----------------------------------------------------------------------------
   Chips only show while the panel is minimised — expanded, the grid itself
   displays the selections, so chips would be noise.
   ============================================================================ */
.d2gl-filter-chips { display: none; }
.filters-minimized .weapon-filter-title-row .d2gl-filter-chips,
.filters-minimized .armor-filter-title-row .d2gl-filter-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  margin: 0;
}
.d2gl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-perk);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.d2gl-chip:hover { border-color: var(--border-bright); color: var(--text-primary); }
.d2gl-chip-x { color: var(--text-dim); font-weight: 900; }
.d2gl-chip:hover .d2gl-chip-x { color: var(--text-primary); }
.d2gl-chip-more { cursor: default; pointer-events: none; }

/* (3) Keep the filter + view squares packed at the start of the bar and shove
   the Clear All / Select All control to the far right. An auto right-margin on
   the title absorbs the free space that space-between was distributing. */
.weapon-filter-title-row .weapon-filter-title,
.armor-filter-title-row .weapon-filter-title,
.armor-filter-title-row .armor-filter-title { margin-right: auto; }

/* ============================================================================
   FILTER FAB (37)
   ============================================================================ */
.d2gl-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  margin-right: 9px;
  color: var(--text-secondary);
  background: var(--bg-perk);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  cursor: pointer;
}
.d2gl-fab:hover { color: var(--text-primary); border-color: var(--border-bright); }
/* Expanded panel: the fab reads as "pressed". */
#weaponFilterPanel:not(.filters-minimized) .d2gl-fab:not(.d2gl-view-toggle),
#armorFilterPanel:not(.filters-minimized) .d2gl-fab:not(.d2gl-view-toggle) {
  color: var(--text-primary); border-color: var(--border-bright); background: var(--bg-card-hover);
}
/* Minimised: the row is just fab(s) + chips. */
.filters-minimized .weapon-filter-title-row .weapon-filter-title,
.filters-minimized .armor-filter-title-row .weapon-filter-title,
.filters-minimized .armor-filter-title-row .armor-filter-title,
.filters-minimized .weapon-filter-title-row .clear-all-top,
.filters-minimized .armor-filter-title-row .clear-all-top,
.filters-minimized .weapon-filter-title-row .select-all-top,
.filters-minimized .armor-filter-title-row .select-all-top,
.filters-minimized .weapon-filter-title-row .filter-minimize-arrow,
.filters-minimized .armor-filter-title-row .filter-minimize-arrow { display: none; }
/* Grow-from-the-square on fab expand only (.d2gl-anim is added for ~250ms). */
#weaponFilterPanel.d2gl-anim:not(.filters-minimized) .weapon-filter-panel,
#armorFilterPanel.d2gl-anim:not(.filters-minimized) .weapon-filter-panel,
#armorFilterPanel.d2gl-anim:not(.filters-minimized) .armor-filter-panel {
  animation: d2glGrow .18s ease;
  transform-origin: top left;
}
@keyframes d2glGrow { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Reverse animation on CLOSE: .d2gl-closing is added by 37 just before the panel
   collapses. The panel is still open (not yet .filters-minimized), so the grid
   is still rendered - it shrinks + fades out, then 37 collapses it for real. */
#weaponFilterPanel.d2gl-closing .weapon-filter-panel,
#armorFilterPanel.d2gl-closing .weapon-filter-panel,
#armorFilterPanel.d2gl-closing .armor-filter-panel {
  animation: d2glShrink .16s ease forwards;
  transform-origin: top left;
}
@keyframes d2glShrink { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }

/* (7) Dropdown/expand arrow on weapon cards removed app-wide - the card body
   opens Inspect now, so the chevron no longer has a job. */
.weapon-grid .weapon-card .expand-arrow,
.weapon-grid .weapon-card .expand-arrow-blank { display: none !important; }

/* ============================================================================
   GRID VIEW + INSPECT PERK PICKER (39)
   ============================================================================ */
/* Grid view is driven by data-weapon-view on .app-layout (survives card
   re-renders / lazy-load, so the toggle keeps working - not just once).
   The rules apply in EVERY state, including while the weapon window is open
   (item 8b): the old :not([data-detail="open"]) gating made the toggle a
   visible no-op whenever a weapon was selected. With the window open the
   same auto-fill simply yields fewer columns in the narrower half.
   Compare buttons stay visible in grid view (item 4). */
.app-layout[data-weapon-view="grid"] .weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important; gap: 10px;
  overflow-x: clip; max-width: 100%;
}
.app-layout[data-weapon-view="grid"] .card-perks,
.app-layout[data-weapon-view="grid"] .expand-arrow,
.app-layout[data-weapon-view="grid"] .expand-arrow-blank { display: none; }
.app-layout[data-weapon-view="grid"] .weapon-card { cursor: pointer; }
.app-layout[data-weapon-view="grid"] .card-top { padding: 10px; gap: 9px; }
.app-layout[data-weapon-view="grid"] .weapon-name { font-size: 13px; }
.app-layout[data-weapon-view="grid"] .weapon-type { font-size: 11px; }
.app-layout[data-weapon-view="grid"] .weapon-badges { gap: 4px; flex-wrap: wrap; }

/* ---- List view: a flat dedicated row (.wlr) emitted by the renderer ----------
   The normal nested card content is hidden in list view; .wlr is a single flat
   7-column grid (every cell a DIRECT child) so it lays out predictably with no
   display:contents flattening. Left to right: picture, name, type, archetype/
   intrinsic, ammo, element, season. Scoped to NOT detail-open. */
.wlr { display: none; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card { display: block !important; padding: 0 !important; min-height: 0 !important; cursor: pointer; contain-intrinsic-size: 80px !important; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .card-top,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .weapon-season,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .card-action-btns,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .card-perks { display: none !important; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr {
  display: grid !important;
  grid-template-columns: 72px 1.5fr 1fr 1fr 0.7fr 0.7fr 0.9fr;
  align-items: center;
  column-gap: 16px;
  height: 80px;
  padding: 0 18px;
  box-sizing: border-box;
}
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-icon { display: flex; align-items: center; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-icon .weapon-icon { width: 72px !important; height: 72px !important; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-icon .weapon-icon img { width: 100% !important; height: 100% !important; object-fit: cover; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-name { font-size: 18px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-type,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-arch { font-size: 13px; font-weight: 500; color: var(--text-secondary); text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-ammo,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-elem,
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-season { display: flex; align-items: center; justify-content: center; }
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr-season { position: static !important; inset: auto !important; margin: 0 !important; justify-self: center; width: -moz-fit-content; width: fit-content; max-width: 100%; }
.app-layout[data-weapon-view="grid"] .weapon-season,
.app-layout[data-weapon-view="grid"] .weapon-source,
.app-layout[data-weapon-view="grid"] .weapon-archetype-badge { font-size: 9.5px; }
.weapon-card { cursor: pointer; }

/* Perk columns NEVER wrap (the origin-trait column used to drop below the
   others at narrow widths) — when tight, the track scrolls horizontally with
   a slim visible scrollbar, same treatment as the quick-filter bar. */
.d2gl-perk-cols-track { display: flex; flex-wrap: nowrap; gap: 14px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hairline-strong, rgba(255,255,255,.11)) transparent; }
.d2gl-perk-cols-track::-webkit-scrollbar { height: 4px; }
.d2gl-perk-cols-track::-webkit-scrollbar-thumb { background: var(--hairline-strong, rgba(255,255,255,.11)); border-radius: 2px; }
.d2gl-perk-cols-track .d2gl-perk-col { flex: 0 0 auto; }
.d2gl-perk-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.d2gl-perk-col-head { display: none; }
.d2gl-perk-col-head {
  font-size: 10.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); padding: 2px 2px 3px;
}
.d2gl-perk-opt {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--bg-perk); border: 1px solid var(--border-dim); border-radius: 50%;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.d2gl-perk-opt img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.d2gl-perk-glyph { font-size: 13px; font-weight: 900; color: var(--text-secondary); }
.d2gl-perk-opt:hover {
  border-color: rgba(var(--accent-rgb), .85);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 9px 1px rgba(var(--accent-rgb), .35);
  transform: translateY(-1px);
}
/* (3) Selected perk glows in the active theme accent instead of a circle marker. */
.d2gl-perk-opt.active {
  border-color: rgba(var(--accent-rgb), .9);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .55), 0 0 12px 2px rgba(var(--accent-rgb), .55);
}
/* Enhanced pick: brighter gold ring + an "E" badge (matches the Alternatives/Compare tabs). */
.d2gl-perk-opt.d2gl-sel-enhanced {
  position: relative;
  border-color: rgba(255,196,84,0.98);
  box-shadow: 0 0 0 2px rgba(255,196,84,0.6), 0 0 12px 2px rgba(255,196,84,0.5);
}
.d2gl-perk-opt.d2gl-sel-enhanced::after {
  content: "E";
  position: absolute; bottom: -3px; right: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffc454; color: #1a1a1a;
  font-size: 9px; font-weight: 900; line-height: 14px; text-align: center;
  box-shadow: 0 0 0 1.5px var(--bg-secondary); z-index: 2;
}
/* The in-game "enhanced" treatment - a gold arrow up the left side and a gold
   glow blooming from the bottom of the circle. Shown on EVERY perk while the
   Enhanced toggle is on (.d2gl-enh-mode), so the whole column reads as enhanced;
   and always on any perk whose SELECTED variant is Enhanced (.d2gl-sel-enhanced)
   even when the default toggle is Normal. The selected perk additionally gets the
   gold ring outline (below). */
.d2gl-perk-opt.d2gl-sel-enhanced::before,
.d2gl-enh-mode .d2gl-perk-opt::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22glow%22%20cx%3D%220.5%22%20cy%3D%221.08%22%20r%3D%220.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffc650%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%220.38%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220.5%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220.12%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219%22%20r%3D%2218%22%20fill%3D%22url%28%23glow%29%22%2F%3E%3Cg%20fill%3D%22%23ffce68%22%20stroke%3D%22%239c5e10%22%20stroke-width%3D%220.45%22%3E%3Crect%20x%3D%225.9%22%20y%3D%2211%22%20width%3D%222.1%22%20height%3D%2216%22%20rx%3D%221.05%22%2F%3E%3Cpath%20d%3D%22M6.95%206%20L10.3%2011.5%20L3.6%2011.5%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: d2glEnhGlow 1.8s ease-in-out infinite;
}
/* A perk cycled to its NORMAL variant (.d2gl-sel-normal) is not enhanced, so it
   drops the glow + arrow even while the Enhanced toggle is on. Higher specificity
   (0,3,1) than the all-perks enhanced rule above (0,2,1), so it wins. */
.d2gl-enh-mode .d2gl-perk-opt.d2gl-sel-normal::before {
  display: none;
}
/* The intrinsic/frame perk is fixed (aria-disabled, not selectable) and can never be
   enhanced - so it never shows the gold glow + arrow, even while Enhanced is on.
   (0,3,1) beats the all-perks enhanced rule above (0,2,1), so it wins. */
.d2gl-enh-mode .d2gl-perk-opt.d2gl-perk-intrinsic::before {
  display: none;
}
@keyframes d2glEnhGlow {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
:root[data-motion="reduced"] .d2gl-perk-opt.d2gl-sel-enhanced::before,
:root[data-motion="reduced"] .d2gl-enh-mode .d2gl-perk-opt::before {
  animation: none;
}
/* Enhanced toggle perk: the activation-card icon mirrors the picker's gold ring +
   arrow + glow when the SELECTED variant is Enhanced, so the toggle section shows
   which version is active. A Normal variant gets no treatment; cycling-tap on the
   perk in the picker switches the variant and therefore this glow. */
.dc-perk-activation-icon.dc-pa-enh {
  position: relative;
  border-color: rgba(255,196,84,0.98);
  box-shadow: 0 0 0 1.5px rgba(255,196,84,0.6), 0 0 9px 1px rgba(255,196,84,0.5);
}
.dc-perk-activation-icon.dc-pa-enh::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22glow%22%20cx%3D%220.5%22%20cy%3D%221.08%22%20r%3D%220.9%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffc650%22%20stop-opacity%3D%221%22%2F%3E%3Cstop%20offset%3D%220.38%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220.5%22%2F%3E%3Cstop%20offset%3D%220.68%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220.12%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb43a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219%22%20r%3D%2218%22%20fill%3D%22url%28%23glow%29%22%2F%3E%3Cg%20fill%3D%22%23ffce68%22%20stroke%3D%22%239c5e10%22%20stroke-width%3D%220.45%22%3E%3Crect%20x%3D%225.9%22%20y%3D%2211%22%20width%3D%222.1%22%20height%3D%2216%22%20rx%3D%221.05%22%2F%3E%3Cpath%20d%3D%22M6.95%206%20L10.3%2011.5%20L3.6%2011.5%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: d2glEnhGlow 1.8s ease-in-out infinite;
}
:root[data-motion="reduced"] .dc-perk-activation-icon.dc-pa-enh::before { animation: none; }
/* Choose Perks header: title on the left, Enhanced/Normal toggle inline on the right. */
.d2gl-perk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* Intrinsic column option is fixed (always "on"), not clickable. */
.d2gl-perk-intrinsic { cursor: default; }
.d2gl-perk-intrinsic:hover { transform: none; }
.d2gl-perk-col-intrinsic { position: relative; }
.d2gl-perk-col-intrinsic::after {
  content: ""; position: absolute; top: 6px; right: -6px; bottom: 6px;
  width: 1px; background: var(--border-dim);
}
.d2gl-perk-hint { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--text-dim); text-transform: none; margin-left: 8px; }
/* Stat panel wears a subtle tint while showing a hover preview. */
.dc-stat-panel.d2gl-preview { outline: 1px dashed var(--border-bright); outline-offset: 3px; border-radius: 6px; }
.dc-mode-wrap.d2gl-preview-mode { outline: 1px dashed var(--border-bright); outline-offset: 3px; border-radius: 6px; }

/* ============================================================================
   INSPECT REFLOW (ui4) — items 1-6
   Desktop split-pane only; mobile keeps its stacked overrides from core-2.
   ============================================================================ */
@media (min-width: 751px) {
  /* (6) Smaller weapon name + picture to free vertical space. */
  .destiny-crafter .dc-title { font-size: 24px; }
  .destiny-crafter .dc-type { font-size: 12px; }
  .destiny-crafter .dc-icon { width: 44px; height: 44px; }
  .destiny-crafter .dc-header { padding-top: 16px; gap: 11px; }

  /* (weapon picture removed from the inspect — no rule needed) */

  /* (4) Weapon Mods now lead the left column where the old perk track was, so
     drop the bottom-pinning that used to push them down. */
  .destiny-crafter .dc-section-bottom { margin-top: 0; padding: 14px 0 18px; }
  /* Centre the catalyst / masterwork / mod boxes in the gap between their
     section title and the "Choose Perks" heading below - they were sitting
     cramped right on top of it. The padding above gives symmetric breathing
     room; this margin keeps the boxes clear of Choose Perks. */
  .destiny-crafter .dc-section-bottom .dc-mod-track { margin: 2px 0 6px; }
  .destiny-crafter .dc-left { min-height: 0; }

  /* Alternatives cards reuse the main list sticker header (icon+ammo, name with
     element icon, archetype/source/season stickers). Adjust the alt-item grid so
     the icon column fits the stacked icon+ammo, and let the badges wrap under the
     name like the main card. */
  .alt-item { grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: flex-start !important; }
  /* icon on top, ammo symbol directly under it - same as the main card */
  .alt-item .card-left-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .alt-item .alt-icon { width: 34px; height: 34px; flex: 0 0 auto; }
  .alt-item .card-left-col .weapon-ammo-icon { margin: 0; flex: 0 0 auto; }
  /* the info column is the positioning context so the season can pin to its corner */
  .alt-item .alt-main.weapon-info { position: relative; padding-right: 34px; }
  .alt-item .alt-main .weapon-type { font-size: 11px; color: var(--text-dim); margin: 1px 0 4px; }
  /* Alternatives: NO weapon selected = reflowing grid (like the main weapon grid).
     A weapon selected = the WHOLE list becomes a single-column list (every weapon
     stacked in one column), and the open weapon's perks show on the right. */
  .alt-horizontal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 10px;
    align-items: start;
    max-width: 100%;
    overflow-x: clip;
  }
  .alt-horizontal-list > .alt-card { min-width: 0; }
  /* perks hidden until a card is opened */
  .alt-horizontal-list .alt-details { display: none; }

  /* SELECTED: a card is open -> single-column list (no grid, so nothing can be
     pushed off-screen). Every card is one-per-row in a narrow left column. */
  .alt-horizontal-list:has(.alt-card.open) {
    grid-template-columns: 1fr;
  }

  /* the OPEN card: header on the left, its perks panel on the right */
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open {
    outline: 1px solid rgba(var(--accent-rgb), 0.55);
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    grid-template-areas: "head perks" "foot perks";
    align-items: start;
    column-gap: 14px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-item { grid-area: head; border-bottom: 0; min-width: 0; }
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-foot { grid-area: foot; }
  /* perks panel on the RIGHT - constrained so it can never push off-screen */
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-details {
    display: block;
    grid-area: perks;
    position: static;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    padding: 4px 4px 4px 14px;
    align-self: stretch;
    overflow-x: clip;
  }
  /* a column for each group (Barrels, Mags/Battery, Perk 1, Perk 2, Origin) */
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-cols {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; min-width: 0;
  }
  /* NO boxes on the columns - just a heading + a vertical stack of circles */
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-col {
    flex: 0 0 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-title {
    border-bottom: 0;
    padding: 0 0 6px;
  }
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-list {
    display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0;
  }
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-enh-head { border-top: 0; }
  /* perk icons as CIRCLES */
  .alt-horizontal-list:has(.alt-card.open) .alt-card.open .alt-perk-icon { border-radius: 50%; }

  /* stickers flow horizontally and WRAP to the next line (not vertical stack) */
  .alt-item .alt-main .weapon-badges { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
  .alt-item .alt-main .weapon-source-season-row { position: static; display: flex; gap: 6px; align-items: center; }
  /* season sticker pinned to the top-right CORNER, in line with the name (same as main card) */
  .alt-item .alt-main .weapon-source-season-row .weapon-season { position: absolute !important; top: 0; right: 0; margin: 0; z-index: 2; }
  .alt-item .alt-name-wrap.weapon-name { padding-right: 0; }
  /* Picker anchor is a zero-height hook; the picker section spaces itself. */
  .destiny-crafter .dc-picker-anchor { height: 0; margin: 0; }
}

/* ============================================================================
   FILTER BAR PLACEMENT + WEAPON-WINDOW CLOSE X (ui5) — items 1 & 2
   ============================================================================ */
/* (1) Pin the Clear All / Select All control hard-right in BOTH filter title
   rows, so the fab + grid/list square stay packed at the left and the control
   never floats to the middle when the bar spans the full width. */
.weapon-filter-title-row > .clear-all-top,
.armor-filter-title-row > .clear-all-top,
.weapon-filter-title-row > #clearListFiltersTop { margin-left: auto !important; }
.weapon-filter-title-row .d2gl-fab,
.armor-filter-title-row .d2gl-fab { flex: 0 0 auto; }

/* (ui8) Corner X superseded by the floating red circle X - see ui8 block. */

/* ============================================================================
   PERFORMANCE + FIXES (ui6) — items 1, 2, 5, 7
   ============================================================================ */
/* (1,7) Off-screen cards skip layout and paint entirely. This is the big win
   behind a snappy grid<->list toggle (only visible cards reflow) and smooth
   scrolling through 2000 weapons. `auto` intrinsic-size remembers each card's
   real height so the scrollbar stays stable in both views. */
.weapon-grid .weapon-card:not(.expanded),
.armor-grid .armor-card:not(.selected):not(.expanded) {
  content-visibility: auto;
  contain-intrinsic-size: auto 116px;
}
/* The grid container itself never affects outside layout - cheaper reflows. */
.weapon-grid, .armor-grid { contain: layout style; }

/* (weapon picture + right-compact are both gone — no dimming rule needed) */

/* (2) The intrinsic is informational, not a selection - no glow, ever. */
#d2glPerkCols .d2gl-perk-intrinsic,
#d2glPerkCols .d2gl-perk-intrinsic:hover {
  border-color: var(--border-dim);
  box-shadow: none;
  transform: none;
}

/* ============================================================================
   CARD STICKER LAYOUT (ui7) — item 2
   weapon-type
   archetype            (own line, directly under the type)
   [ source ][ season ] (source left, season pushed right)
   ============================================================================ */
.weapon-badges { flex-direction: column; align-items: stretch; gap: 4px; }
.weapon-badges .weapon-archetype-badge { align-self: flex-start; }
.weapon-source-season-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.weapon-source-season-row { min-width: 0; }
.weapon-source-season-row .weapon-source { min-width: 0; }
/* Season chip pins to the card's TOP-RIGHT corner (matching the armor cards —
   Mo). Anchored to the CARD: .weapon-info must NOT be a positioned ancestor or
   the chip lands inset at the info column's corner instead (the "empty space
   top and right" bug). The card is the containing block via position:relative.
   The name reserves a right gutter; list view (.wlr-season) re-statics it. */
.weapon-card { position: relative; }
.weapon-card .weapon-season {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 4;
  margin: 0 !important;
}
.weapon-card .weapon-info .weapon-name { padding-right: 44px; }

/* ============================================================================
   UI8 — full-width search bar, circle X, armor view + h-scroll
   (Nav lives in the fixed left rail now — see 01-core-1.css. The search node's
   runtime home is the page filter row's slot; when no slot exists it is parked
   in the hidden stash by 36-filter-chips.js.)
   ============================================================================ */

/* --- The full-width bar: [fab][view][ search …50% ][chips → right][clear] -- */
.weapon-filter-title-row,
.armor-filter-title-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
/* Search bar: a fixed cap tied to the VIEWPORT (50vw), not the pane, so it's
   the same width whether or not a weapon is open - it no longer shrinks when
   the inspect pane splits the page. (A true "always exactly half the screen,
   ending at the last weapon in a row" needs the split-pane architecture
   reworked into an overlay - see the note to Mo; this is the low-risk fix that
   stops the search bar jumping width.) */
/* Proportional share, not greedy: two flex:1 siblings (search + quick bar) in a
   nowrap row re-negotiated their split at every pixel of resize, wrapping quick
   chips one by one. A clamped basis gives the bar a deterministic remainder. */
.d2gl-search-slot { flex: 0 1 clamp(160px, 24vw, 420px); max-width: 100%; min-width: 160px; display: flex; }
.d2gl-search-slot .search-container {
  display: flex !important;
  width: 100%;
  min-width: 0;
  position: relative;
}
.d2gl-search-slot .search-input { width: 100%; }
/* Item 6: chips start just right of the search bar and grow into the middle;
   Clear All is pushed to the far right (order + margin-left:auto). DOM order
   is [fab][view][slot][clear-all][chips][arrow] — flex order puts the chips
   before Clear All visually without touching the builders. */
.weapon-filter-title-row .d2gl-filter-chips,
.armor-filter-title-row .d2gl-filter-chips {
  order: 0;
  margin-left: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
}
.weapon-filter-title-row > .clear-all-top,
.armor-filter-title-row > .clear-all-top { order: 5; margin-left: auto !important; flex: 0 0 auto; }
.filter-minimize-arrow { order: 6; }
.d2gl-filter-count { order: 7; }
/* Armor bar has no search slot: chips take the right half from the start. */
.armor-filter-title-row .d2gl-filter-chips { max-width: 60%; }

/* Mobile: chip strip collapses to an "N filters" summary pill. */
.d2gl-filter-count { display: none; }
@media (max-width: 840px) {
  .weapon-filter-title-row .d2gl-filter-chips,
  .armor-filter-title-row .d2gl-filter-chips { display: none !important; }
  .d2gl-filter-count {
    display: inline-flex; align-items: center;
    margin-left: auto; flex: 0 0 auto;
    padding: 3px 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), .14);
    border: 1px solid rgba(var(--accent-rgb), .4);
    border-radius: 999px;
    cursor: pointer;
  }
  .d2gl-filter-count.d2gl-filter-count-empty {
    color: var(--text-dim);
    background: rgba(255,255,255,.04);
    border-color: var(--border-dim);
  }
  .d2gl-search-slot { max-width: none; }
}

/* --- (2) Close: BIG red circle floating in the window's top-right corner -- */
#buildWindowPanel, .armor-detail-window { position: relative; }
.build-close-x, .armor-close-x {
  position: absolute !important;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  margin: 0 !important; padding: 0 !important; min-width: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0 !important;            /* hide the "×" glyph; the X is drawn crisply below */
  letter-spacing: 0 !important;
  color: transparent !important;
  /* Transparent glass: lets the weapon art show through, with a soft blur for a premium feel. */
  background: rgba(14, 18, 26, 0.34) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.22) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  z-index: 7;
}
/* Thin X: two 1.5px bars crossed at ±45° — same on weapon + armor windows. */
.build-close-x::before, .build-close-x::after,
.armor-close-x::before, .armor-close-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  transition: background .18s ease;
}
.build-close-x::before, .armor-close-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.build-close-x::after,  .armor-close-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.build-close-x:hover, .armor-close-x:hover {
  background: rgba(28, 34, 46, 0.5) !important;
  border-color: rgba(255,255,255,.26) !important;
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.32) !important;
}
.build-close-x:hover::before, .build-close-x:hover::after,
.armor-close-x:hover::before, .armor-close-x:hover::after { background: #fff; }

/* --- (A1) Armor grid view: compact cards, perk rows hidden ---------------- */
.armor-db-layout[data-armor-view="grid"]:not([data-detail="open"]) .armor-card .armor-card-perk-row { display: none; }
.armor-db-layout[data-armor-view="grid"] .armor-card { cursor: pointer; }

/* --- (A2) Armor filter box: fixed-width groups + horizontal scroll -------- */
/* Columns were a % of the pane, so narrowing the pane crushed the filters.
   Fixed width + the existing overflow-x:auto = clean horizontal scroll. */
.armor-filter-grid { grid-auto-columns: 210px !important; }

/* ============================================================================
   UI9 — inspect column layout, suggest-on-top, latest-season orange,
         card corner badges, thinner nav, floating minimized bar
   ============================================================================ */

/* --- (1) Inspect: perks | 3cm | stat bars — one fixed column every weapon --
   The perk track is pinned to its 6-column width (intrinsic + barrel + mag +
   trait 1 + trait 2 + origin: 6×38px options + 5×14px gaps + track padding),
   so the stat bars and the weapon picture start at the same x for EVERY
   weapon; fewer columns just leave a wider gap. The bars' vertical offset
   lines the middle of the first (Impact) bar up with the middle of the top
   perk row. Both knobs are CSS variables for quick tuning. */
.destiny-crafter { --dc-perk-track-w: 302px; }

/* ============================================================================
   INSPECT LAYOUT (>=751px) — pure flow, no absolutes. One grid:
       header  (spans both)
       desc    (spans both)
       perks | stats
       modes   (spans both — PvP/PvE panels + graphs)
   The stat panel is a real grid column, so it can never overlap the perk track,
   the pane's scroll height is always true, and collapsing the weapon list just
   gives both columns more room. (The old regime absolutely pinned the stat
   panel under the since-removed weapon screenshot, which overlapped the perks
   whenever the pane changed width.)
   ============================================================================ */
@media (min-width: 751px) {
  .destiny-crafter {
    display: grid !important;
    grid-template-columns: minmax(var(--dc-perk-track-w, 302px), 1fr) minmax(280px, 420px) !important;
    column-gap: var(--sp-6, 32px) !important;
    row-gap: var(--sp-3, 12px) !important;
    align-items: start !important;
  }
  /* default: every direct child spans the full width (header, description,
     mode panels, anything a later feature adds)… */
  .destiny-crafter > * { grid-column: 1 / -1; min-width: 0; }
  /* …except the perk track and the stat panel, which sit side by side. */
  .destiny-crafter > .dc-left { grid-column: 1; width: auto; max-width: none; }
  .destiny-crafter > .dc-stat-panel {
    grid-column: 2;
    position: static !important; inset: auto !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    z-index: auto;
  }
  .destiny-crafter .dc-main-row { display: block; min-height: 0; }
  .destiny-crafter .dc-main-row #d2glPerkCols { width: auto; max-width: 100%; min-width: 0; margin: 0; }
}
/* Below 751px the existing mobile stack (flex column, ordered) applies. */

/* --- (2) Search-bar filter suggestions render ON TOP ----------------------
   Root cause: .weapon-filter-panel has overflow:hidden (rounded-corner crop
   for the expanded grid). With the bar minimized the panel is only as tall
   as the row, so the absolutely-positioned dropdown was clipped to the long
   box. The minimized bar is chrome-less now (item 8), so it can safely show
   overflow; the dropdown also gets a z-index above the sticky panels. */
#weaponFilterPanel.filters-minimized .weapon-filter-panel,
#armorFilterPanel.filters-minimized .weapon-filter-panel,
#armorFilterPanel.filters-minimized .armor-filter-panel { overflow: visible !important; }
.search-filter-suggest { z-index: 5000; }

/* --- (3) Latest-season stickers go orange so new gear stands out ---------- */
.weapon-season.weapon-season-latest {
  border-color: #ff9b3d !important;
  background: rgba(255, 138, 40, 0.16) !important;
}
.weapon-season.weapon-season-latest .weapon-season-text,
.weapon-season.weapon-season-latest { color: #ffb066 !important; }

/* --- (4) Weapon season chip is IN-FLOW in the source row (01k template) —
   the corner-absolute version collided with the ammo/element icon row. --- */

/* (B) Armor cards: short "S29" chip pinned to the card's top-right corner
   (dark orange via .weapon-season-latest when it is the newest season). The
   46px name gutter fits the short form. Source renders in .armor-db-source. */
.armor-card { position: relative; }
.armor-card .weapon-season {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 4;
  margin: 0 !important;
}
.armor-card .armor-db-name { padding-right: 46px; }


/* --- (1) Weapons + Armor filter bar: no box at all, just floating controls ---
   The header box is gone in BOTH states - the sticky #weaponFilterPanel and
   #armorFilterPanel containers, their inner panels and title rows are all
   transparent, so the filter button, grid/list button, search bar,
   selected-filter chips and Clear All float directly on the page. The cards
   scroll up behind the bar and FADE INTO NOTHING via a mask on the scroll
   container (see the fade mask rule in the pinned-pane block) - no backdrop, no
   cover, fully fluid. Armor matches Weapons so the two pages read identically. */
#weaponFilterPanel,
#armorFilterPanel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#weaponFilterPanel .weapon-filter-panel,
#armorFilterPanel .weapon-filter-panel,
#armorFilterPanel .armor-filter-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
#weaponFilterPanel .weapon-filter-title-row,
#armorFilterPanel .weapon-filter-title-row,
#armorFilterPanel .armor-filter-title-row {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding-left: 4px;
  padding-right: 4px;
}
/* A focused weapon turns Clear All red and it MUST stay clickable even when the
   filter panel is minimized (which otherwise hides .clear-all-top). Raised
   z-index keeps it above the floating search bar so the click can't be
   intercepted. */
#weaponFilterPanel.filters-minimized .clear-all-top.focus-active,
#armorFilterPanel.filters-minimized .clear-all-top.focus-active {
  display: inline-flex !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}
/* The bottom drag handle (.filter-grid-resizer) belongs to the EXPANDED filter
   grid: keep it while the filters are open, hide it when collapsed so nothing
   floats under the bar. Placed here (after the base rule at ~1427) so the
   minimized hide always wins the cascade. Both panels for consistency. */
#weaponFilterPanel.filters-minimized .filter-grid-resizer,
#armorFilterPanel.filters-minimized .filter-grid-resizer {
  display: none !important;
}

/* --- (8) Floating minimized bar: contents only, no box ---------------------
   While minimized, the panel shell and title row lose their background,
   border and shadow — the fab, view toggle, search bar, chips and Clear All
   float directly on the page. The bar's background is no longer a click
   target (05): the chevron arrow is, so it gets its pointer back. */
#weaponFilterPanel.filters-minimized .weapon-filter-panel,
#armorFilterPanel.filters-minimized .weapon-filter-panel,
#armorFilterPanel.filters-minimized .armor-filter-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#weaponFilterPanel.filters-minimized .weapon-filter-title-row,
#armorFilterPanel.filters-minimized .weapon-filter-title-row,
#armorFilterPanel.filters-minimized .armor-filter-title-row {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-left: 4px;
  padding-right: 4px;
}
#weaponFilterPanel .weapon-filter-title-row,
#armorFilterPanel .weapon-filter-title-row,
#armorFilterPanel .armor-filter-title-row {
  cursor: default !important;
}
#weaponFilterPanel .weapon-filter-title-row:hover,
#armorFilterPanel .weapon-filter-title-row:hover,
#armorFilterPanel .armor-filter-title-row:hover {
  background: transparent !important;
}
#weaponFilterPanel.filters-minimized .weapon-filter-title-row:hover,
#armorFilterPanel.filters-minimized .weapon-filter-title-row:hover,
#armorFilterPanel.filters-minimized .armor-filter-title-row:hover {
  background: transparent !important;
}
.filter-minimize-arrow {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.filter-minimize-arrow:hover { color: var(--text-primary); }

/* ============================================================================
   EXPERIMENT — INSPECT TAB WITH NO BOXES (Mo wants to see how it looks)
   ----------------------------------------------------------------------------
   Strip the background, border and shadow from the inspect surfaces so the
   weapon picture, stat bars and perk icons float directly on the page - the
   same "floating, no box" treatment as the filter bar. The perk OPTION circles
   and the masterwork/catalyst icons keep their own look (they ARE the content);
   only the surrounding panels/sections lose their chrome. Desktop inspect only.
   Easy to revert: delete this whole block.
   ============================================================================ */
@media (min-width: 751px) {
  /* Outer inspect panel: no box. */
  #buildWindowPanel.build-window,
  #buildContent .destiny-crafter {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  /* The tab strip (Alternatives/Inspect/Compare/Stats) - drop its panel chrome. */
  #buildWindowPanel .build-actions {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Inner sections (Weapon Mods / Choose Perks / description) - no dividers/boxes. */
  #buildContent .destiny-crafter .dc-section,
  #buildContent .destiny-crafter .dc-description,
  #buildContent .destiny-crafter .dc-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* The lined section titles drop their underline rule for a cleaner float. */
  #buildContent .destiny-crafter .dc-section-lined {
    border-bottom: 0 !important;
  }
  /* Perk columns inside the picker: no card background, just the icons. */
  #buildContent .destiny-crafter .perk-column,
  #buildContent .destiny-crafter .d2gl-perk-cols {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Stat panel stays chrome-less (it already is) - keep it transparent. */
  #buildContent .destiny-crafter .dc-stat-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   INSPECT STAT-BAR SIZING (>=751px). Fixed values — the old --inspect-stat-scale
   resizer was removed (its setter is gone), and the weapon picture no longer
   exists, so nothing here scales any more.
   ============================================================================ */
@media (min-width: 751px) {
  .app-layout .destiny-crafter .dc-stat-row {
    grid-template-columns: 105px minmax(0, 1fr) 30px;
    gap: 8px;
    margin: 3px 0;
  }
  .app-layout .destiny-crafter .dc-stat-name { font-size: 12px; }
  .app-layout .destiny-crafter .dc-stat-bar { height: 11px; }
  .app-layout .destiny-crafter .dc-stat-value { font-size: 12px; }
}

/* ============================================================================
   Stats tab v2 — PVP | PVE mode split.
   Shared Weapon Stats card on top (bars + inline MW/Mod controls), then two
   mode columns: PVP (Crucible red) with TTK hero tile, damage, range, reload,
   falloff graph + table; PVE (Vanguard blue) with boss-damage hero tile,
   reload, damage graph + enemy table. Stacks to one column on narrow panes.
   ============================================================================ */
.stats-bars-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.stats-bars-head-text{min-width:0;}
.stats-bars-head .stats-mod-sub{margin-top:2px;}
.stats-mod-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.stats-mod-inline .stats-mod-boxes{display:flex;gap:8px;align-items:center;}

.stats-mode-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin-top:12px;}
.stats-mode-col{min-width:0;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:12px;overflow:hidden;border-top:2px solid var(--mode-accent,#888);}
.stats-mode-col.mode-pvp{--mode-accent:#e8485c;--mode-accent-rgb:232,72,92;}
.stats-mode-col.mode-pve{--mode-accent:#3fa7dd;--mode-accent-rgb:63,167,221;}
.stats-mode-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px 9px;border-bottom:1px solid var(--border-dim);background:linear-gradient(180deg,rgba(var(--mode-accent-rgb),.12),rgba(var(--mode-accent-rgb),0));}
.stats-mode-tag{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:16px;letter-spacing:3px;color:var(--mode-accent);line-height:1;}
.stats-mode-sub{font-size:11px;letter-spacing:.4px;color:var(--text-dim);}

.mode-key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;padding:10px 12px;}
.mode-key-tile{min-width:0;background:rgba(255,255,255,.025);border:1px solid var(--border-dim);border-radius:9px;padding:8px 10px;}
.mode-key-pair{display:contents;}
.dc-mode-body.pve-solo .mode-key-pair{display:flex;gap:8px;min-width:0;}
.dc-mode-body.pve-solo .mode-key-pair > .mode-key-tile{flex:1 1 0;min-width:0;}
.mode-key-tile.hero{border-color:rgba(var(--mode-accent-rgb),.45);background:rgba(var(--mode-accent-rgb),.06);}
.mode-key-label{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;}
.mode-key-value{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;line-height:1.15;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mode-key-tile.hero .mode-key-value{font-size:25px;color:var(--mode-accent);}
.mode-key-unit{font-size:12px;font-weight:600;color:var(--text-secondary);margin-left:1px;}
.mode-key-tile.hero .mode-key-unit{color:rgba(var(--mode-accent-rgb),.85);}
.mode-key-sub{margin-top:3px;font-size:11px;line-height:1.35;color:var(--text-dim);}
.mode-key-sub .cs-line{display:inline-flex;gap:4px;align-items:baseline;margin-right:8px;white-space:nowrap;}
.mode-key-sub .cs-line em{font-style:normal;color:var(--text-dim);}
.mode-key-sub .cs-line strong{color:var(--text-secondary);font-weight:700;}
.mode-key-sub .cs-add{color:#7bd88f;font-weight:700;}
.mode-key-sub .cs-add.negative{color:#e88;}
.mode-key-sub .cs-add.positive{color:#7bd88f;}
/* Boss Damage tile: stacked crit/body rows, each big final number with a compact
   base/added column to its right (added on top, base below). */
.mode-key-value .boss-dmg-rows{display:flex;flex-direction:column;gap:5px;white-space:normal;}
.boss-dmg-row{display:flex;align-items:center;gap:7px;line-height:1;}
.boss-dmg-final{font-weight:700;font-variant-numeric:tabular-nums;}
.boss-dmg-lbl{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}
.boss-dmg-stack{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.08;margin-left:2px;font-variant-numeric:tabular-nums;}
.boss-dmg-add{font-size:11px;font-weight:700;}
.boss-dmg-add.pos{color:#7bd88f;}
.boss-dmg-add.neg{color:#e88;}
.boss-dmg-base{font-size:11px;font-weight:600;color:var(--text-dim);}
.mode-key-value .reload-final-time.positive{color:#7bd88f;}
.mode-key-value .reload-final-time.negative{color:#e88;}
.mode-key-value .reload-final-time.neutral{color:var(--text-primary);}
/* Item 8/9: colour the big DPS / Total number itself when a perk or battery moves it (green up /
   red down, neutral = unchanged), matching the reload tile. */
.mode-key-value .mode-key-final.positive{color:#7bd88f;}
.mode-key-value .mode-key-final.negative{color:#e88;}
.mode-key-value .mode-key-final.neutral{color:inherit;}
/* Item 9: themed damage-row finals (PvE Boss + PvP Damage tiles share the layout). PvE: crit gold
   w/ a thin blue outline, body blue. PvP: crit gold w/ a thin red outline, body red. paint-order
   keeps the gold fill painted over the outline so the glyph stays full and crisp. */
.boss-dmg-final.dmg-crit-pve{color:#e8b04b;-webkit-text-stroke:0.7px #6fb3e0;paint-order:stroke fill;}
.boss-dmg-final.dmg-body-pve{color:#6fb3e0;}
.boss-dmg-final.dmg-crit-pvp{color:#e8b04b;-webkit-text-stroke:0.7px #e8485c;paint-order:stroke fill;}
.boss-dmg-final.dmg-body-pvp{color:#e8485c;}

@media (max-width:1280px){.stats-mode-split{grid-template-columns:1fr;}}

/* Measured-state chips for the PvE DPS / Total Damage tiles (Catalyst, exotic
   modes, Wolfpack Rounds, glaive melee...). Radio behaviour: one row at a time;
   click the active chip again to return to base. */
.pvedps-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 12px 10px;}
.pvedps-chips-cap{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);margin-right:2px;}
.pvedps-chip{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;letter-spacing:.4px;color:var(--text-secondary);background:rgba(255,255,255,.03);border:1px solid var(--border-dim);border-radius:999px;padding:3px 10px;cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease;}
.pvedps-chip:hover{border-color:rgba(var(--mode-accent-rgb,63,167,221),.6);color:var(--text-primary);}
.pvedps-chip.on{color:#0d1117;background:var(--mode-accent,#3fa7dd);border-color:var(--mode-accent,#3fa7dd);}
.pvedps-chip.wolf{border-style:dashed;}
.pvedps-chips+.pvedps-chips{padding-top:0;}

/* ============================================================================
   Inspect tab — PvP / PvE expandable combat panels (replaces the Stats tab).
   Two buttons under the stat bar; the chosen one expands its panel below,
   reusing the stats-mode visuals (Crucible red / Vanguard blue accents).
   ============================================================================ */
/* Exotic inspect: exotics have no Masterwork/Mod boxes, so the left column is
   shorter than the absolute stat panel (top:220px) on the right - which let the
   PvP/PvE mode wrap (in flow, below .dc-left) start above the stat panel's bottom
   and overlap it. Floor the exotic left column on desktop so the mode wrap always
   clears the stat panel. Only at >900px (the side-by-side layout where the stat
   panel is absolute); at <=900 it stacks in-flow so no clearance is needed.
   min-height is an estimate of the picture+stat-panel column height - tunable. */
@media (min-width: 901px) {
  .destiny-crafter.dc-exotic .dc-left { min-height: 400px; }
}
.dc-mode-wrap{margin-top:14px;clear:both;padding:0 24px;}
.dc-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.dc-mode-btn{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-dim);border-top:2px solid var(--border-dim);border-radius:10px;padding:11px 10px;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease;}
.dc-mode-btn.pvp{--mode-accent:#e8485c;--mode-accent-rgb:232,72,92;}
.dc-mode-btn.pve{--mode-accent:#3fa7dd;--mode-accent-rgb:63,167,221;}
.dc-mode-btn:hover{color:var(--text-primary);border-color:rgba(var(--mode-accent-rgb),.5);}
.dc-mode-btn.active{color:var(--mode-accent);border-top-color:var(--mode-accent);background:linear-gradient(180deg,rgba(var(--mode-accent-rgb),.14),rgba(var(--mode-accent-rgb),.03));}

.dc-mode-cols{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px;}
.dc-mode-cols.both{grid-template-columns:1fr 1fr;}
.dc-mode-body{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:12px;overflow:hidden;border-top:2px solid var(--mode-accent,#888);min-width:0;}
.dc-mode-body.mode-pvp{--mode-accent:#e8485c;--mode-accent-rgb:232,72,92;}
.dc-mode-body.mode-pve{--mode-accent:#3fa7dd;--mode-accent-rgb:63,167,221;}
@media (max-width:900px){.dc-mode-cols.both{grid-template-columns:1fr;}}

.dc-mode-shared{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:10px;align-items:start;}
@media (max-width:900px){.dc-mode-shared{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}}

/* <=750px: the inspect stacks to one vertical column (ordered by the flex
   block further down: header, [flavor], stats, perks, graphs). Above 750px the
   flow grid (perks | stats) applies. */
@media (max-width: 750px) {
  .destiny-crafter > .dc-stat-panel {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; max-width: none;
    margin: 14px 0 0; padding: 0 24px;
  }
  .destiny-crafter .dc-left { width: 100%; max-width: none; }
  .destiny-crafter .dc-mode-shared {
    grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row;
  }
  .destiny-crafter .dc-mode-cols.both { grid-template-columns: 1fr; }
}
.dc-mode-mods{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 2px 8px;}
.dc-mode-mods .stats-mod-sub{font-size:11px;color:var(--text-dim);}
.dc-mode-cones{margin-top:0;}
@media (max-width:560px){.dc-mode-buttons{grid-template-columns:1fr;}}


/* Damage-by-range graph (45-range-graph.js) — sits above the cones in the open PvP/PvE inspect panel. */
.dc-range-graph .rg-chart{margin:8px 0 6px;}
.dc-range-graph .rg-chart svg{display:block;width:100%;height:auto;}
.dc-range-graph .rg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dc-range-graph .rg-xmax{font-size:10px;line-height:1;padding:3px 6px;border-radius:5px;background:rgba(20,22,30,0.85);color:var(--text-secondary,#b9c0cc);border:1px solid rgba(255,255,255,0.16);cursor:pointer;flex:none;}
.dc-range-graph .rg-xmax:hover{border-color:rgba(255,255,255,0.32);}
.dc-range-graph .rg-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 4px 2px;}
.dc-range-graph .rg-key{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-secondary,#b9c0cc);}
.dc-range-graph .rg-key-muted{color:var(--text-dim,#79808c);}
.dc-range-graph .rg-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}
.dc-range-graph .rg-dash{width:15px;height:0;border-top:2px dashed currentColor;display:inline-block;opacity:.7;flex:none;}

/* ============================================================================
   WEAPON CARD REDESIGN (20260615cards) — taller, cleaner list cards. Archetype
   + source now render as plain LEFT-ALIGNED text (the pill boxes are removed),
   so the first letters of weapon-type / archetype / source line up down the
   left edge of the info column. Element glyph, ammo icon, weapon name, and the
   season corner sticker are unchanged. Card height feeds the list virtualization
   automatically (it measures a real card) — only FALLBACK_PITCH was nudged.
   ============================================================================ */
.weapon-card .card-top {
  box-sizing: border-box;
  min-height: 150px;
  padding: 14px 16px;
  align-items: center;
  gap: 16px;
}
/* Strip the pill box off archetype + source -> plain text. padding:0 is what
   pulls their first letter flush-left, in line with the weapon-type above. */
.weapon-badges .weapon-archetype-badge,
.weapon-source-season-row .weapon-source {
  display: block;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-transform: none;
  letter-spacing: 0.3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Stack type / archetype / source to a common left edge. (All font SIZES live
   in the CARD TYPE SCALE block near the end of this file — one authority.) */
.weapon-card .weapon-name { padding-right: 0; }
.weapon-info > .weapon-name { padding-right: 0; }
.weapon-info > .weapon-type { margin-top: 4px; }
.weapon-badges { margin-top: 4px; gap: 4px; align-items: flex-start; }
.weapon-badges .weapon-archetype-badge { align-self: flex-start; font-weight: 400; color: var(--text-secondary); }
.weapon-source-season-row { gap: 6px; }
.weapon-source-season-row .weapon-source { font-weight: 400; color: #9fb7da; }

/* (The .weapon-element-row rules that used to sit here styled markup 01k no
   longer emits — removed as dead.) */

/* Bigger weapon photo to fill the taller card. */
.weapon-card .weapon-icon { width: 80px; height: 80px; }

/* Compare button trimmed to a compact "+" (the label text is removed in JS). */
.card-compare-btn { font-size: 16px; line-height: 1; padding: 3px 9px; letter-spacing: 0; }

/* (Grid re-assert sizes removed — the CARD TYPE SCALE block near the end of
   this file is the single sizing authority for the card.) */

/* ============================================================================
   NO-SLIDER FIXED LAYOUT
   ----------------------------------------------------------------------------
   The draggable list|inspect width slider (#layoutResizer / #armorLayoutResizer)
   and the mobile list-height drag bar (.list-grid-resizer) are removed; the
   split is now a fixed ratio. Browse (no weapon open) is unchanged: full-width
   multi-column grid. Weapon/armor OPEN:
     >900px  : ONE-column list on the left at a fixed ratio, inspect fills right.
     601-900 : ONE-column list (288px), inspect narrower   [pre-existing block].
     <=600   : list hidden, inspect only                   [pre-existing block].
   The inspect body stacks to a single vertical column <=840px in the order:
     (alt/compare buttons already sit above .destiny-crafter in .build-actions)
     picture -> name/type -> stats -> perks -> mods -> PvP/PvE + graphs + cones.
   Stat bars + picture are a fixed size now (the slider that scaled them is gone).
   ========================================================================== */

/* Remove both sliders everywhere. display:none also drops them from the grid
   track flow, so the 2-column templates below land list + inspect cleanly. */
.app-layout > .layout-resizer,
.armor-db-layout > .layout-resizer { display: none !important; }


/* DESKTOP / vertical monitor (>900px): open = 1-col list (fixed ratio) | inspect.
   On a narrower (portrait) monitor the 1fr inspect just gets narrower while the
   list stays put. The 33% is a DEFAULT pending the ratio photo; tune the value
   (or set --d2gl-list-ratio on .app-layout). */
/* ARMOR open layout (>=901): 1-col list (fixed ratio) | detail. The WEAPON page
   uses the explicit width bands appended at the very end of this file. */
@media (min-width: 901px) {
  .armor-db-layout[data-detail="open"] {
    grid-template-columns: minmax(300px, var(--d2gl-list-ratio, 33%)) minmax(0, 1fr) !important;
    gap: 14px;
    align-items: start;
  }
  .armor-db-layout[data-detail="open"] > .armor-list-panel { min-width: 0; }
  .armor-db-layout[data-detail="open"] .armor-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* MOBILE / narrow (<=1100px): inspect body is a single vertical column in the
   requested order. Matches the static-stack breakpoint above so the perks +
   stats are stacked (never side-by-side absolute) until the pane is wide enough
   to fit the 2-col without overlapping. The stack block above sizes/centres the
   picture; here we only set the vertical ORDER. */
@media (max-width: 750px) {
  .destiny-crafter { display: flex !important; flex-direction: column !important; }
  .destiny-crafter > .dc-header     { order: 2; max-width: 100%; }
  .destiny-crafter > .dc-description { order: 3; }
  .destiny-crafter > .dc-stat-panel { order: 4; }
  .destiny-crafter > .dc-left       { order: 5; }
  .destiny-crafter > .dc-mode-wrap  { order: 6; }
}

/* ============================================================================
   CARD TYPE SCALE — the single sizing authority for the weapon card (grid).
   Hierarchy through type and space (design brief): ONE prominent name line
   (600), quiet 400-weight meta lines, chips at the sticker size. Target card
   height ~114px — dense but calm. Left column = photo + ammo/element row.
   ============================================================================ */
.app-layout[data-weapon-view="grid"] .card-top { min-height: 114px !important; padding: var(--sp-3) var(--sp-4) !important; gap: var(--sp-4) !important; }
.weapon-card .card-left-col { gap: 4px !important; }
.weapon-card .weapon-icon { width: 58px !important; height: 58px !important; }
.app-layout[data-weapon-view="grid"] .weapon-name { font-size: var(--fs-lg) !important; font-weight: 600 !important; }
.app-layout[data-weapon-view="grid"] .weapon-type { font-size: var(--fs-sm) !important; font-weight: 400 !important; }
.app-layout[data-weapon-view="grid"] .weapon-archetype-badge { font-size: var(--fs-sm) !important; }
.app-layout[data-weapon-view="grid"] .weapon-source { font-size: var(--fs-xs) !important; }
.weapon-source-season-row .weapon-source { font-size: var(--fs-xs) !important; }
.app-layout[data-weapon-view="grid"] .weapon-season { font-size: var(--fs-xs) !important; }
/* the compare "+" sits absolute bottom-right: the last text row keeps clear of it */
.weapon-card .weapon-source-season-row { padding-right: 36px; }
/* element symbol beside the ammo, scaled */
.weapon-card .card-left-col .weapon-name-elem-img { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }
.weapon-card .card-left-col .weapon-name-elem-glyph { font-size: 13px !important; flex: 0 0 auto !important; }
/* ammo glyph + expand arrow scaled */
.weapon-card .card-left-col .weapon-ammo-icon svg { width: 26px !important; height: 20px !important; }
.weapon-card .expand-arrow,
.weapon-card .card-top > .expand-arrow-blank { width: 16px !important; height: 16px !important; }

/* ============================================================================
   MINIMIZE WEAPON LIST — toggle (in the build-window toolbar) collapses the
   left list so the inspect fills the full width (useful on narrow screens).
   Body class (set by 01k) so the state survives list re-renders. The list is
   only hidden while a weapon is open; browsing still shows the full list.
   ============================================================================ */
.build-list-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-right: 2px;
  border: 1px solid var(--border-dim); border-radius: 6px;
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.build-list-toggle:hover { border-color: var(--border-bright); color: var(--text-primary); background: rgba(255,255,255,0.07); }
.build-list-toggle::before { content: "\00AB"; }                          /* «  collapse */
body.d2gl-list-collapsed .build-list-toggle::before { content: "\00BB"; } /* »  expand   */
/* collapsed: hide the list, inspect spans the full width */
body.d2gl-list-collapsed .app-layout[data-detail="open"] > .weapon-list-panel { display: none !important; }
body.d2gl-list-collapsed .app-layout[data-detail="open"] { grid-template-columns: 1fr !important; }
/* on phones the list is already hidden when a weapon is open, so the toggle is moot */
@media (max-width: 600px) { .build-list-toggle { display: none !important; } }

/* ============================================================================
   WEAPON PAGE — explicit responsive width bands (Mo spec). Appended last so it
   beats every earlier weapon-layout breakpoint.
     >=1451px   : 2 weapon-card columns (min card width) + inspect on the right.
     1101-1450px: 1 weapon-card column (min card width) + inspect on the right.
     751-1100px : NO list; inspect only, perks left / stats right (horizontal),
                  picture top-right (gap tightened to fit), grey/black inspect
                  backgrounds removed.
     375-750px  : mobile vertical layout (the <=750 blocks earlier in this file).
   --d2gl-card-min = the (minimum) weapon-card width in the open list; tune here.
   ============================================================================ */
.app-layout { --d2gl-card-min: 300px; }

/* <=1100: no weapon list; inspect fills the width (beats the old 601-900 "288px
   list" rule earlier in the file). */
@media (max-width: 1100px) {
  .app-layout[data-detail="open"] { grid-template-columns: 1fr !important; }
  .app-layout[data-detail="open"] > .weapon-list-panel { display: none !important; }
}

/* >=1101: list visible; the filter panel is hidden (the slim list has no room) —
   filter from the top-bar search while inspecting. */
@media (min-width: 1101px) {
  .app-layout[data-detail="open"] > .weapon-list-panel { display: block !important; min-width: 0; }
  .app-layout[data-detail="open"] #weaponFilterPanel { display: none !important; }
}

/* 1101-1450: ONE card column at its minimum width + inspect. */
@media (min-width: 1101px) and (max-width: 1450px) {
  .app-layout[data-detail="open"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px; align-items: start;
  }
  .app-layout[data-detail="open"] .weapon-grid {
    grid-template-columns: var(--d2gl-card-min, 300px) !important;
    justify-content: start;
  }
}

/* >=1451: TWO card columns at min width + inspect. */
@media (min-width: 1451px) {
  .app-layout[data-detail="open"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px; align-items: start;
  }
  .app-layout[data-detail="open"] .weapon-grid {
    grid-template-columns: repeat(2, var(--d2gl-card-min, 300px)) !important;
    justify-content: start; gap: 10px;
  }
}

/* (751-1450 picture-offset band removed — the picture is gone) */

/* (671-810 trim band removed — the flow grid sizes both columns) */

/* 671-1100 inspect-only: strip the grey/black inspect box + the bar behind the
   top buttons (both kicked in <=840). */
@media (min-width: 751px) and (max-width: 1100px) {
  #buildWindowPanel.build-window { background: transparent !important; }
  #buildWindowPanel.build-window::before { display: none !important; }
}

/* ============================================================================
   MOBILE WEAPON INSPECT (<=750px) — compact, single-column, simplified (Mo spec).
   The <=670 stack/order blocks earlier in this file already make the inspect a
   vertical column; this trims + re-centers its pieces for a phone.
   ============================================================================ */
/* Trailing weapon-state chips (Ophidian etc.) flow INLINE with the perk slots on
   desktop; the mobile block below drops them onto their own line. */
.stack-chip-trailing { display: contents; }

@media (max-width: 750px) {
  /* (1) drop the big weapon picture, (2) drop the description/lore */
  .destiny-crafter > .dc-description { display: none !important; }

  /* (3) mini icon + name + type at a mobile size */
  .destiny-crafter .dc-header { gap: 8px !important; padding-top: 8px !important; align-items: center !important; }
  .destiny-crafter .dc-icon { width: 30px !important; height: 30px !important; flex: 0 0 auto !important; }
  .destiny-crafter .dc-title { font-size: 16px !important; line-height: 1.15 !important; }
  .destiny-crafter .dc-type { font-size: 10px !important; }

  /* (4) choose-perks columns: shrink so every slot fits side-by-side (no wrap), centered */
  .d2gl-perk-cols-track {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    justify-content: center !important;
    padding: 4px 0 6px !important;
  }
  .d2gl-perk-col { gap: 4px !important; flex: 0 0 auto !important; }
  .d2gl-perk-opt { width: 30px !important; height: 30px !important; }
  .d2gl-perk-opt .d2gl-perk-glyph { font-size: 11px !important; }

  /* (5) mw + mod/catalyst boxes sit on top of the selected perks, centered;
     (6) the selected-perk slots are centered;
     (7) Ophidian (any weapon-state toggle) drops to its own centered line below. */
  .dc-mods-and-toggles { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  .dc-mods-and-toggles .dc-mod-track { display: flex !important; justify-content: center !important; flex: 0 0 auto !important; }
  .stack-chip-strip { width: 100% !important; }
  .stack-chip-row { flex-wrap: wrap !important; justify-content: center !important; }
  .stack-chip-trailing {
    display: flex !important;
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  /* (8) PvP/PvE: on mobile show ONLY the graphs — hide the per-mode combat stat
     tables (TTK/DPS/reload). Which graphs appear for each open mode, and their
     order, is handled in 01h (PvP -> DoT+falloff+cones, PvE -> DoT). */
  .destiny-crafter .dc-mode-cols { display: none !important; }
}

/* (751-1100 grid block removed — the >=751 flow grid above covers all widths) */
}

/* >=841 the page area is pinned (overflow:hidden, only the panels scroll), so the
   flow inspect above needs a definite-height build-window whose .build-content is
   the scroller - the same pane behaviour the desktop uses. This overrides the
   <=900 "inspect flows in the document" rule for this band. (<=840 the document
   itself scrolls, which the flow grid already handles.) */
@media (min-width: 841px) and (max-width: 1100px) {
  .app-layout[data-detail="open"] > .build-window,
  #buildWindowPanel.build-window {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* The tab strip (Inspect/Alternatives/Compare) keeps its natural height - it
     must never be shrunk by the flex column. */
  #buildWindowPanel .build-actions {
    flex: 0 0 auto !important;
  }
  /* flex-basis MUST be 0 here, not auto: with basis:auto the scroller's full
     content height became its flex BASE size, overflowed the column, and
     flex-shrink then compressed the SIBLING tab strip (~50px -> ~33px) and its
     buttons (~30px -> ~16px) so the labels spilled out of the boxes. basis 0 +
     grow 1 + overflow:auto is the correct definite-height scroller and matches
     the desktop default (.build-content = flex:1 = 1 1 0%). */
  #buildWindowPanel .build-content,
  #buildContent {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ============================================================================
   UI11 — SEARCH BAR STAYS VISIBLE WHILE A WEAPON IS OPEN (item: keep search)
   ----------------------------------------------------------------------------
   The persistent search box lives inside the weapon filter panel's title row
   (#weaponSearchSlot). Earlier rules hid the WHOLE #weaponFilterPanel when a
   weapon is open (data-detail="open"), which also hid the search box, leaving
   only the list. Show the panel's title row (search + Clear All) again and hide
   only the heavy bits (the filter grid/footer/resizer). Selected filters are now
   managed from the search dropdown (28-search-filters.js), so the inline summary
   chips + minimise arrow are hidden here to keep the row clean while inspecting.
   Non-media + !important so this beats the @media(max-width:900) and the
   @media(min-width:1101px){...!important} hide rules above, at every width. The
   <=600px rule that drops the whole list panel still wins (its parent goes
   display:none), so phones are unaffected. */
.app-layout[data-detail="open"] #weaponFilterPanel { display: block !important; }
.app-layout[data-detail="open"] #weaponFilterPanel .weapon-filter-grid,
.app-layout[data-detail="open"] #weaponFilterPanel .weapon-filter-footer,
.app-layout[data-detail="open"] #weaponFilterPanel .filter-grid-resizer,
.app-layout[data-detail="open"] #weaponFilterPanel .filter-minimize-arrow,
.app-layout[data-detail="open"] #weaponFilterPanel .d2gl-fab,
.app-layout[data-detail="open"] #weaponFilterPanel .d2gl-filter-chips,
.app-layout[data-detail="open"] #weaponFilterPanel .d2gl-filter-count { display: none !important; }
/* Compact card when only the search row remains. */
.app-layout[data-detail="open"] #weaponFilterPanel .weapon-filter-panel {
  padding: 8px !important;
  overflow: visible !important;
}
.app-layout[data-detail="open"] #weaponFilterPanel .weapon-filter-title-row { margin: 0 !important; }

/* Selected-filters section inside the search dropdown (28-search-filters.js). */
.sfs-head-selected { color: var(--accent, #6ad1ff) !important; }
.sfs-selected-row { border-color: var(--border-bright) !important; }
.sfs-selected-row.active .sfs-value::before { color: var(--accent, #6ad1ff) !important; }
.sfs-divider {
  height: 1px;
  margin: 5px 6px 3px;
  background: var(--border-dim);
}
.sfs-empty { color: var(--text-dim); text-transform: none; letter-spacing: 0.2px; font-weight: 600; }

/* ============================================================
   Armor Picker - Real mode (owned-armor comparison)
   Soft-cap red state above; everything below is Real-only.
   ============================================================ */

/* mode toggle + account strip share the class row */
.ap-mode-toggle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid rgba(255,255,255,0.14); border-radius: 11px; background: rgba(0,0,0,0.28); }
.ap-mode-btn { padding: 10px 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-family: 'Orbitron', sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; cursor: pointer; transition: background 0.14s, color 0.14s; }
.ap-mode-btn:hover { color: #fff; }
.ap-mode-btn.on { background: rgba(var(--accent-rgb),0.18); color: var(--accent-bright); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.4); }

/* signed-in / signed-out account chip */
.ap-acct { display: inline-flex; align-items: center; }
.ap-acct-in { gap: 9px; }
.ap-acct-name { font-size: 12.5px; font-weight: 800; color: #fff; }
.ap-acct-count { font-size: 11px; font-weight: 700; color: var(--text-dim); }
@keyframes ap-acct-baking-kf { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ap-acct-count.ap-acct-baking { color: var(--accent-bright); animation: ap-acct-baking-kf 1.3s ease-in-out infinite; }
.ap-acct-mini { padding: 5px 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; }
.ap-acct-mini:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.4); color: #fff; }
.ap-acct-mini:disabled { opacity: 0.5; cursor: default; }
/* Pulsing ring on the Sync button (theme accent) so it's hard to miss. Reduced-motion disables it via the global rule. */
@keyframes ap-sync-pulse-kf {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 34px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.ap-acct-mini.ap-sync-pulse { border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent-bright); animation: ap-sync-pulse-kf 1.6s ease-out infinite; }
.ap-acct-mini.ap-sync-pulse:hover:not(:disabled) { color: #fff; }
.ap-acct-mini.ap-sync-pulse:disabled { animation: none; }

/* Bungie sign-in button */
.ap-bungie-btn { padding: 8px 18px; border: 1px solid rgba(var(--accent-rgb),0.45); border-radius: 8px; background: rgba(var(--accent-rgb),0.14); color: var(--accent-bright); font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.ap-bungie-btn:hover { background: rgba(var(--accent-rgb),0.22); border-color: rgba(var(--accent-rgb),0.65); }
.ap-bungie-btn.lg { padding: 11px 24px; font-size: 12.5px; }
/* In-card vendor sign-in CTA: centred, with the armor-picker accent pulse (theme colour). */
.vendor-card-signin { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.vendor-card-signin .vendor-signin-cta { display: inline-block; animation: ap-sync-pulse-kf 1.8s ease-out infinite; }

/* Real armor column */
.ap-real-section { gap: 10px; --ap-real-cols: minmax(180px, 240px) repeat(6, minmax(40px, 1fr)) minmax(50px, 60px) minmax(122px, 150px); }

/* sign-in call-to-action */
.ap-real-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 2px; }
.ap-real-cta-title { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.4px; color: #fff; }
.ap-real-cta-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* status / loading / error lines */
.ap-real-msg { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); padding: 8px 2px; }
.ap-real-msg.error { color: #ff9d9d; }
.ap-real-msg strong { color: #fff; }

/* impossible verdict */
.ap-impossible { border: 1px solid rgba(226,85,85,0.4); border-radius: 10px; background: rgba(226,85,85,0.08); padding: 14px; }
.ap-impossible-title { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #ff7676; margin-bottom: 5px; }
.ap-impossible-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* closest-set verdict pill in the section head */
.ap-real-verdict { font-size: 11px; font-weight: 800; letter-spacing: 0.2px; text-align: right; }
/* quick-goal presets */
.ap-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.ap-goal-btn { padding: 11px 8px; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; background: rgba(0,0,0,0.22); color: var(--text-secondary); font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; text-align: center; }
.ap-goal-btn:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.ap-goal-btn.on { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.6); color: var(--accent-bright); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.35); }
.ap-goal-verdict { font-size: 11px; font-weight: 800; letter-spacing: 0.2px; text-align: right; color: var(--accent-bright); }
/* fragment limit: count readout + locked (over-limit) fragments */
.ap-frag-count { font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px; }
.ap-frag-count.full { color: var(--accent-bright); }
.ap-frag.locked, .ap-frag:disabled { opacity: 0.4; cursor: not-allowed; }
.ap-frag.locked:hover, .ap-frag:disabled:hover { transform: none; border-color: rgba(255,255,255,0.1); }
.ap-real-verdict.ok { color: #68e394; }
.ap-real-verdict.miss { color: #ffc266; }

/* section title + count box row */
.ap-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }

/* THE only scroll region: owned-set cards */
.ap-real-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
/* matching-list pagination: prev/next bar (top + bottom) and the "scroll to load more" hint for All */
.ap-page-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 6px 0; border: 1px solid rgba(var(--accent-rgb),0.22); border-radius: 9px; background: rgba(var(--accent-rgb),0.05); }
.ap-page-nav.top { margin-top: 2px; }
.ap-page-btn { padding: 5px 12px; border: 1px solid rgba(var(--accent-rgb),0.45); border-radius: 8px; background: rgba(0,0,0,0.25); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: border-color 0.14s, background 0.14s, opacity 0.14s; }
.ap-page-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb),0.8); background: rgba(var(--accent-rgb),0.12); }
.ap-page-btn:disabled { opacity: 0.35; cursor: default; }
.ap-page-ind { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ap-page-pg { font-weight: 800; color: #fff; }
.ap-page-shown { color: var(--text-secondary); white-space: nowrap; }
.ap-page-more { padding: 9px 10px; margin: 6px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dim); border: 1px dashed rgba(255,255,255,0.14); border-radius: 9px; }

/* one owned piece */
.ap-real-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(255,255,255,0.02); padding: 10px; display: grid; grid-template-columns: var(--ap-real-cols); column-gap: 4px; row-gap: 5px; align-items: center; }
.ap-real-card.mw { border-color: rgba(230,200,112,0.7); box-shadow: 0 0 0 1px rgba(230,200,112,0.35); }
.ap-real-card.empty { opacity: 0.62; border-style: dashed; }
.ap-real-exotic { font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #e6c870; background: rgba(206,174,80,0.16); border-radius: 999px; padding: 1px 7px; }
.ap-real-where { font-size: 10px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.ap-real-icon { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: 0 0 34px; background: rgba(0,0,0,0.3); }
.ap-real-icon.mw { box-shadow: 0 0 0 2px #e6c870, 0 0 7px rgba(230,200,112,0.55); }
.ap-real-name { font-size: 13px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-real-none { font-size: 11.5px; color: var(--text-dim); }

/* top row: slot symbol + focus/mod chips (no slot text); spans everything but the actions column */
.ap-real-head { grid-column: 1 / 9; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 8px; }
.ap-real-head .ap-real-exotic { margin-left: auto; }
/* actions column: location on top, Equip over Transfer, far right, spanning both rows */
.ap-real-actions { grid-column: 9 / 10; grid-row: 1 / 5; align-self: stretch; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.1); }
.ap-real-actions .ap-real-where { text-align: right; margin-bottom: 1px; }
.ap-real-actions .ap-real-btn { width: 100%; }
.ap-real-actions .ap-real-status { text-align: right; }
/* segregated per-piece total column */
.ap-rc-total, .ap-rc-total-h { border-left: 1px solid rgba(255,255,255,0.16); }
.ap-rc-total { font-weight: 900; color: #fff; }
.ap-rc-total-h { padding-left: 2px; }

/* per-piece archetype focus (3 stat symbols) next to the name */
.ap-pc-arch { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; margin-left: 8px; display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.ap-rc-rowlabel { grid-column: 1; justify-self: start; align-self: center; padding-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-dim); text-transform: uppercase; }
.ap-pc-arch-i { display: inline-flex; align-items: center; }
.ap-pc-arch-i .bc-stat-icon, .ap-pc-arch-i img, .ap-pc-arch-i svg { width: 16px; height: 16px; }

/* "show N sets" themed dropdown in the results head */
.ap-count-dd { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ap-count-label { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); }
.ap-count-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 78px; padding: 5px 9px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(0,0,0,0.25); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.ap-count-btn:hover, .ap-count-btn.open { border-color: rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.08); }
.ap-count-cur { flex: 1 1 auto; text-align: left; }
.ap-count-caret { font-size: 9px; color: var(--text-dim); }
.ap-count-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 70; min-width: 110px; padding: 5px; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 10px; background: #131722; box-shadow: 0 14px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px; }
.ap-count-opt { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; }
.ap-count-opt:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ap-count-opt.sel { background: rgba(var(--accent-rgb),0.16); color: var(--accent-bright); }
.ap-count-tick { font-size: 11px; }
.ap-count-custom { width: 62px; padding: 5px 7px; border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 8px; background: rgba(0,0,0,0.25); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.ap-count-custom:focus { outline: none; border-color: rgba(var(--accent-rgb),0.7); }

/* Attuned section (Tier-5 tuning control): consider toggle + forced-negative dropdown */
.ap-attune { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
.ap-attune-neg { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-attune-neg.off { opacity: 0.4; pointer-events: none; }
.ap-attune-neg-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.ap-attune-dd { position: relative; display: inline-flex; align-items: center; }
.ap-attune-ddbtn { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; padding: 5px 9px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(0,0,0,0.25); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.ap-attune-ddbtn:hover, .ap-attune-ddbtn[aria-expanded="true"] { border-color: rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.08); }
.ap-attune-ddbtn:disabled { cursor: default; }
.ap-attune-ico { display: inline-flex; width: 15px; height: 15px; }
.ap-attune-ico svg, .ap-attune-ico img { width: 100%; height: 100%; }
.ap-attune-optlbl { flex: 1 1 auto; text-align: left; }
.ap-attune-none { font-weight: 800; }
/* forced-negative active: a chosen dump stat is a negative, so show its symbol + label red */
.ap-attune-ddbtn.neg .ap-attune-optlbl { color: #ff5b5b; }
.ap-attune-ddbtn.neg .ap-attune-ico img,
.ap-attune-ddbtn.neg .ap-attune-ico svg { filter: brightness(0) saturate(100%) invert(45%) sepia(75%) saturate(3956%) hue-rotate(337deg) brightness(101%) contrast(101%); }
.ap-attune-caret { font-size: 9px; color: var(--text-dim); margin-left: auto; }
.ap-attune-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 70; min-width: 168px; padding: 5px; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 10px; background: #131722; box-shadow: 0 14px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px; }
.ap-attune-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; }
.ap-attune-opt:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ap-attune-opt.sel { background: rgba(var(--accent-rgb),0.16); color: var(--accent-bright); }
.ap-attune-osub { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--text-dim); }

/* stat column header (symbols) — shares --ap-real-cols so symbols sit over numbers */
.ap-real-colhead { display: grid; grid-template-columns: var(--ap-real-cols); column-gap: 4px; align-items: center; padding: 2px 10px 4px; }
.ap-rc-spacer { grid-column: 1; }
.ap-rc-h { display: flex; align-items: center; justify-content: center; }
.ap-rc-h .bc-stat-icon, .ap-rc-h img, .ap-rc-h svg { width: 20px; height: 20px; }
.ap-rc-h.pri { filter: drop-shadow(0 0 3px rgba(var(--accent-rgb),1)) drop-shadow(0 0 9px rgba(var(--accent-rgb),0.75)); transform: scale(1.12); }
.ap-rc-h-sort { cursor: pointer; gap: 2px; border-radius: 5px; transition: background 0.12s; }
.ap-rc-h-sort:hover { background: rgba(var(--accent-rgb),0.13); }
.ap-rc-h-sort.sorted { background: rgba(var(--accent-rgb),0.22); }
.ap-rc-h-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-rc-sort-ind { font-size: 9px; line-height: 1; color: var(--accent-bright); }

/* per-piece stat numbers (bare grid cells in columns 2..7) */
.ap-rc-v { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13.5px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* card stat cells: base values (white), the +10/+5 mod (green), tuning (+5 green / -5 red) - all one size */
.ap-rc-c { display: flex; align-items: center; justify-content: center; min-height: 23px; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ap-rc-c.base { color: #fff; gap: 4px; }
.ap-rc-att { position: absolute; right: calc(100% + 3px); top: 50%; transform: translateY(-50%); width: 12px; height: 13px; color: var(--accent-bright); pointer-events: none; }
.ap-rc-att .ap-att-svg { width: 12px; height: 13px; display: block; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb),0.55)); }
.ap-rc-att .ap-att-svg rect { fill: currentColor; }
.ap-rc-c.adj { font-size: 16px; }
.ap-rc-bv { line-height: 1.1; }
.ap-rc-ico { display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; }
.ap-rc-ico .bc-stat-icon, .ap-rc-ico img, .ap-rc-ico svg { width: 19px; height: 19px; opacity: 0.9; }
.ap-rc-c.base.zero { color: var(--text-dim); opacity: 0.45; }
.ap-rc-c.base.zero .ap-rc-ico { opacity: 0.4; }
.ap-rc-c.adj .up { color: #74dd8a; }
.ap-rc-c.adj .dn { color: #ff8d8d; }
.ap-rc-c.total { grid-column: 8; align-self: end; color: #fff; border-left: 1px solid rgba(255,255,255,0.16); }
/* faint lines separating the base / mod / tune rows */
.ap-rc-sep { align-self: start; height: 0; margin-top: -3px; border-top: 1px solid rgba(255,255,255,0.08); pointer-events: none; }
.ap-rc-v.pri { color: var(--accent-bright); }
.ap-rc-v.zero { color: var(--text-dim); opacity: 0.5; }
.ap-rc-v.under { color: #ff8d8d; opacity: 1; }
.ap-rc-v.pos { color: #8fd98f; }
.ap-rc-v.neg { color: #ff8d8d; }
/* fragment / font accounting rows above the piece cards (share the card grid) */
.ap-comp-contrib { display: grid; grid-template-columns: var(--ap-real-cols); column-gap: 4px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.025); }
.ap-rc-clabel { grid-column: 1; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ap-real-btn { padding: 5px 11px; border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 6px; background: rgba(var(--accent-rgb),0.1); color: var(--accent-bright); font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; transition: background 0.14s; }
.ap-real-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.2); }
.ap-real-btn:disabled { opacity: 0.5; cursor: default; }
.ap-real-btn.equip { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.ap-real-btn.equip:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
.ap-real-status { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.ap-real-status.ok { color: #68e394; }
.ap-real-status.err { color: #ff9d9d; }

/* Sets filter: exotic select + legendary-set chips (sits above the set list) */
.ap-sets-section { border: 1.5px solid rgba(var(--accent-rgb),0.4); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); padding: 13px 15px; margin-bottom: 12px; }
.ap-sets-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.ap-sets-head .clear-filter-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.clear-all-top.ap-clear-all { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* collapsed-set totals: white, or gold when every piece is masterworked */
.ap-comp .ap-comp-bar .ap-rc-v { color: #fff; }
.ap-comp .ap-comp-bar.all-mw .ap-rc-v { color: #e6c870; }
.ap-comp .ap-comp-bar .ap-rc-v.under { color: #ff8d8d; }
.ap-sets-title { font-family: 'Orbitron', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.ap-sets-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ap-sets-col { display: flex; flex-direction: column; gap: 14px; }
.ap-sets-col .ap-exotic-dd, .ap-sets-col .ap-sets-field { width: 100%; }
.ap-sets-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ap-disexo-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ap-disexo-chip { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 7px; background: rgba(var(--accent-rgb),0.06); min-width: 0; }
.ap-disexo-chip .ap-exotic-ico { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 22px; }
.ap-disexo-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #fff; }
.ap-disexo-chip-x { flex: 0 0 auto; width: 18px; height: 18px; line-height: 1; padding: 0; border: none; border-radius: 5px; background: rgba(255,255,255,0.08); color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.ap-disexo-chip-x:hover { background: rgba(255,90,90,0.25); color: #fff; }
.ap-sets-field-sets { flex: 1 1 260px; }
.ap-sets-label { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); }
.ap-sets-label-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; row-gap: 7px; }
.ap-sets-label-row .ap-set-clear { margin-left: auto; }
.ap-setmode-group { display: inline-flex; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 7px; overflow: hidden; }
.ap-setmode-btn { padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-secondary); background: transparent; border: none; border-right: 1px solid rgba(var(--accent-rgb),0.2); cursor: pointer; transition: background 0.14s, color 0.14s; }
.ap-setmode-btn:last-child { border-right: none; }
.ap-setmode-btn:hover:not(.disabled):not(.on) { background: rgba(var(--accent-rgb),0.1); color: #fff; }
.ap-setmode-btn.on { background: rgba(var(--accent-rgb),0.2); color: var(--accent-bright); }
.ap-setmode-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.ap-sets-count { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 999px; background: rgba(var(--accent-rgb),0.22); color: var(--accent-bright); font-size: 10px; font-weight: 800; text-align: center; }
.ap-sets-count.any { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.ap-set-chips { display: flex; flex-direction: column; gap: 6px; }
.ap-set-chip { text-align: left; padding: 6px 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s; }
.ap-set-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ap-set-chip.on { border-color: rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.16); color: var(--accent-bright); }
.ap-set-chip.disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.ap-set-chip.disabled:hover { background: rgba(255,255,255,0.04); color: var(--text-secondary); }
/* Saved builds: per-combo Save button + the Saved dropdown by the class tabs */
.ap-comp-save { background: none; border: 1px solid rgba(var(--accent-rgb),0.42); color: var(--accent-bright); font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; cursor: pointer; transition: background 0.14s; }
.ap-comp-save:hover { background: rgba(var(--accent-rgb),0.16); }
.ap-comp-actions { grid-column: 9; display: flex; flex-direction: column; gap: 4px; align-items: stretch; justify-self: stretch; min-width: 0; }
.ap-comp-actions .ap-real-btn { padding: 4px 6px; font-size: 9.5px; white-space: nowrap; }
.ap-comp-exo-ico { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.ap-comp-exo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--accent-bright); }
.ap-comp-setn { flex: 0 0 auto; }
.ap-saved-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 10px; }
.ap-saved-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-secondary); font-size: 12px; font-weight: 700; border-radius: 9px; padding: 7px 13px; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.ap-saved-btn:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.09); }
.ap-saved-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ap-saved-btn.open { border-color: rgba(var(--accent-rgb),0.5); color: var(--accent-bright); }
.ap-saved-count { font-size: 10px; font-weight: 800; opacity: 0.7; }
.ap-saved-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; display: grid; grid-template-columns: repeat(3, minmax(360px, 1fr)); gap: 6px; width: min(1180px, 95vw); max-height: 470px; overflow-y: auto; padding: 8px; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 12px; background: #131722; box-shadow: 0 16px 46px rgba(0,0,0,0.65); }
.ap-saved-menu::-webkit-scrollbar { width: 8px; }
.ap-saved-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
.ap-saved-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-saved-col-h { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.08); }
.ap-saved-col-h svg, .ap-saved-col-h img { width: 16px; height: 16px; }
.ap-saved-empty { padding: 8px 6px; font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
.ap-saved-item { display: flex; align-items: stretch; gap: 2px; }
.ap-saved-load { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #fff; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.ap-saved-load:hover { background: rgba(var(--accent-rgb),0.13); border-color: rgba(var(--accent-rgb),0.4); }
.ap-saved-row1 { flex: 1 1 auto; display: flex; align-items: center; gap: 5px; min-width: 0; }
.ap-saved-elem { flex: 0 0 auto; display: inline-flex; }
.ap-saved-elem svg, .ap-saved-elem img { width: 14px; height: 14px; }
.ap-saved-exo-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 5px; object-fit: cover; background: rgba(255,255,255,0.05); }
.ap-saved-exo { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-saved-exo.none { color: var(--text-secondary); font-weight: 600; opacity: 0.7; font-style: italic; }
.ap-saved-stats { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 6px; }
.ap-saved-stat { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--text-secondary); }
.ap-saved-stat svg, .ap-saved-stat img { width: 12px; height: 12px; opacity: 0.85; }
.ap-saved-stat b { color: #fff; font-weight: 700; }
.ap-saved-del { flex: 0 0 auto; background: none; border: none; color: var(--text-secondary); font-size: 15px; line-height: 1; padding: 0 6px; cursor: pointer; border-radius: 7px; }
.ap-saved-del:hover { color: #ff7676; background: rgba(255,90,90,0.12); }
@media (max-width: 640px) { .ap-saved-menu { grid-template-columns: 1fr; width: min(440px, 94vw); } }

.ap-set-clear { background: none; border: none; color: var(--accent-bright); font-size: 10px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; padding: 0 2px; }
.ap-set-clear:hover { text-decoration: underline; }
.ap-sets-none { font-size: 11.5px; color: var(--text-dim); }

/* themed exotic dropdown with armor images */
.ap-exotic-dd { position: relative; width: 240px; max-width: 100%; }
.ap-exotic-dd.disabled { opacity: 0.55; }
.ap-exotic-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; background: rgba(0,0,0,0.28); color: #fff; cursor: pointer; text-align: left; transition: border-color 0.14s, background 0.14s; }
.ap-exotic-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb),0.4); background: rgba(0,0,0,0.34); }
.ap-exotic-btn.open { border-color: rgba(var(--accent-rgb),0.6); }
.ap-exotic-btn:disabled { cursor: default; }
.ap-exotic-ico { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-secondary); }
.ap-exotic-ico.any { color: var(--accent-bright); }
.ap-exotic-btn-txt, .ap-exotic-opt-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.ap-exotic-btn-name, .ap-exotic-opt-name { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-exotic-btn-sub, .ap-exotic-opt-sub { font-size: 10px; font-weight: 600; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-exotic-caret { flex: 0 0 auto; color: var(--text-dim); font-size: 11px; transition: transform 0.16s; }
.ap-exotic-btn.open .ap-exotic-caret { transform: rotate(180deg); }
.ap-exotic-menu { position: relative; margin-top: 5px; z-index: 1; max-height: 230px; overflow-y: auto; padding: 5px; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 10px; background: #131722; box-shadow: 0 14px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px; }
.ap-exotic-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 7px; border: none; border-radius: 7px; background: transparent; color: #fff; cursor: pointer; text-align: left; transition: background 0.12s; }
.ap-exotic-opt:hover { background: rgba(255,255,255,0.06); }
.ap-exotic-opt.sel { background: rgba(var(--accent-rgb),0.16); }
.ap-exotic-opt-tick { flex: 0 0 auto; color: var(--accent-bright); font-weight: 800; font-size: 12px; }
.ap-exotic-menu::-webkit-scrollbar { width: 8px; }
.ap-exotic-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* Assumptions panel (switch toggles) */
.ap-assume-section { border: 1.5px solid rgba(var(--accent-rgb),0.4); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); padding: 13px 15px; }
.ap-assume-note { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
/* Theory "use optimal": the Fragments / Fonts section shows the auto-picked subclass + fragments
   (or font counts) selected, but read-only - toggle off Use optimal in Assumptions to edit by hand. */
.ap-fragments-section.ap-opt-on .ap-frag-sub,
.ap-fragments-section.ap-opt-on .ap-frag,
.ap-fonts-section.ap-opt-on .ap-font-btn { pointer-events: none; }
.ap-fragments-section.ap-opt-on .ap-frag:not(.on),
.ap-fonts-section.ap-opt-on .ap-font-row:not(.on) { opacity: 0.5; }
.ap-opt-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-bright); border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); background: color-mix(in srgb, var(--accent-bright) 12%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; align-self: center; }
.ap-assume-note strong { color: var(--text-secondary); }
/* "Use optimal" also covers Stat Mods + Attune: read-only, fitted by the optimiser. */
.ap-mods-section.ap-opt-on .ap-modbudget,
.ap-attune-section-wrap.ap-opt-on .ap-attune { pointer-events: none; }
.ap-attune-ro { display: flex; }
.ap-attune-roline { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: rgba(255,255,255,0.02); width: 100%; }
.ap-attune-roico { color: var(--accent-bright); font-size: 13px; flex: 0 0 auto; }
.ap-attune-rotxt { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
/* Theory priority box: drag the four target-fillers to set what's applied first. */
.ap-prio { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
.ap-prio-cap { font-size: 11px; font-weight: 700; color: var(--text-secondary); line-height: 1.3; margin-bottom: 9px; }
.ap-prio-track { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-prio-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; cursor: grab; user-select: none; transition: border-color 0.12s, background 0.12s, transform 0.12s, opacity 0.12s; }
.ap-prio-chip:hover { border-color: color-mix(in srgb, var(--accent-bright) 45%, transparent); background: color-mix(in srgb, var(--accent-bright) 10%, transparent); }
.ap-prio-chip:active { cursor: grabbing; }
.ap-prio-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent-bright) 22%, transparent); color: var(--accent-bright); font-size: 11px; font-weight: 800; }
.ap-prio-lbl { line-height: 1; }
.ap-prio-grip { width: 7px; height: 13px; flex: 0 0 auto; opacity: 0.4; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 3.5px 4px; }
.ap-prio-chip.dragging { opacity: 0.45; }
.ap-prio-chip.drag-over { border-color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 16%, transparent); transform: translateY(-1px); }
.ap-assume-list { display: flex; flex-direction: column; gap: 7px; }
/* Helper-priority: Apple-style two-position slide (Fonts | Fragments) */
.ap-helperpref-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: rgba(255,255,255,0.02); }
.ap-helperpref-cap { font-size: 11px; font-weight: 700; color: var(--text-secondary); line-height: 1.25; }
.ap-helperpref { position: relative; display: flex; width: 168px; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(0,0,0,0.28); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-hp-seg { flex: 1; position: relative; z-index: 1; padding: 4px 0; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; color: var(--text-secondary); transition: color 0.18s; }
.ap-helperpref.is-fonts .ap-hp-fonts, .ap-helperpref.is-frags .ap-hp-frags { color: #fff; }
.ap-hp-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: rgba(var(--accent-rgb),0.32); border: 1px solid rgba(var(--accent-rgb),0.6); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.ap-helperpref.is-fonts .ap-hp-thumb { transform: translateX(100%); }
.ap-helperpref:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.ap-assume-toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 9px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; background: rgba(255,255,255,0.02); cursor: pointer; text-align: left; transition: border-color 0.14s, background 0.14s; }
.ap-assume-toggle:hover:not(.disabled) { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.ap-assume-toggle.disabled { opacity: 0.45; cursor: default; }
.ap-assume-switch { flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px; background: rgba(255,255,255,0.12); position: relative; transition: background 0.16s; }
.ap-assume-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left 0.16s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.ap-assume-toggle.on .ap-assume-switch { background: rgba(var(--accent-rgb),0.85); }
.ap-assume-toggle.on .ap-assume-knob { left: 17px; }
.ap-assume-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-assume-label { font-size: 12.5px; font-weight: 700; color: #fff; }
.ap-assume-sub { font-size: 10.5px; color: var(--text-dim); }
.ap-attune-section-wrap .ap-assume-sub { font-size: 12.5px; line-height: 1.45; }
.ap-attune-section-wrap .ap-assume-toggle { padding-top: 9px; padding-bottom: 9px; }

/* one possible-set composition: a collapsible bar (totals) that expands to its 5 cards */
.ap-comp { margin: 0; }
.ap-comp-bar { display: grid; grid-template-columns: var(--ap-real-cols); column-gap: 4px; align-items: center; padding: 11px 10px; cursor: pointer; list-style: none; user-select: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(255,255,255,0.025); transition: background 0.14s, border-color 0.14s; }
.ap-comp-bar::-webkit-details-marker { display: none; }
.ap-comp-bar:hover { background: rgba(255,255,255,0.05); }
.ap-comp.selected > .ap-comp-bar { border-color: rgba(var(--accent-rgb),0.55); box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),0.9); }
.ap-comp[open] > .ap-comp-bar { border-color: rgba(var(--accent-rgb),0.35); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: rgba(var(--accent-rgb),0.07); }
.ap-comp-label { grid-column: 1; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-comp-chev { display: inline-block; font-size: 15px; line-height: 1; color: var(--text-dim); transition: transform 0.16s; flex: 0 0 auto; }
.ap-comp[open] .ap-comp-chev { transform: rotate(90deg); }
.ap-comp-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 2px; }
/* big themed loading area while owned armor is fetched (matches the site boot spinner) */
.ap-real-loading { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ap-real-loading-txt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ap-real-loading .loading-spinner { width: 64px; height: 64px; border-width: 4px; }
.ap-real-loading .loading-spinner::after { inset: 6px; border-width: 3px; }
.ap-real-loading .loading-text { font-size: 12px; letter-spacing: 3px; }

/* theory-mode hint pointing at Real */
.ap-account-hint { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); padding: 10px 12px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 9px; background: rgba(255,255,255,0.015); }
.ap-account-hint strong { color: var(--accent); }
.ap-auth-fail { color: #ff9d9d; font-weight: 700; }

/* ============================================================================
   VENDORS — launcher buttons + near-fullscreen modal  (beta 181)
   Page = a grid of vendor buttons; clicking one opens a modal that covers most
   of the viewport with the page dimmed behind it. Xur's modal lays out 3
   armor-picker-style section boxes (3 columns wide, stacked when narrow); each
   section can be minimised. Other vendors get one generic section.
   ============================================================================ */

/* --- launcher buttons --- */
.vendor-launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 18px 0 0; }
.vendor-card {
  --v: #aa6bff; display: flex; flex-direction: column; align-items: stretch; text-align: center; min-height: 70vh;
  padding: 34px 34px 30px; border-radius: 24px; cursor: pointer; color: #e6e9f0;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.vendor-card:hover { transform: translateY(-3px); border-color: var(--v); background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); }
.vendor-card-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vendor-card-glyph {
  width: 80px; height: 80px; display: grid; place-items: center; border-radius: 18px;
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 36px; letter-spacing: .5px; color: var(--v);
  background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.14);
}
.vendor-card-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 26px; }
.vendor-card-sub { font-size: 14px; color: #8a92a3; }
.vendor-card-preview { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 22px; margin: 28px 0; min-width: 0; }
.vpre-sec { min-width: 0; }
.vpre-lbl { font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase; color: #8a92a3; margin-bottom: 10px; text-align: left; }
.vpre-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.vpre-row::-webkit-scrollbar { height: 7px; }
.vpre-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.vpre-ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.09); }
.vpre-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendor-card-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: auto; }
.vendor-card-foot .vendor-modal-timer { font-size: 16px; padding: 10px 18px; }
.vendor-card-foot .vendor-modal-timer .vt-val { font-size: 21px; }
.vendor-card-count { font-size: 16px; color: #aeb6c6; }
.vcount-n { font-weight: 800; color: #f0c75f; font-size: 24px; }
@media (max-width: 1100px) {
  .vendor-launcher { grid-template-columns: 1fr; }
  .vendor-card { min-height: 0; padding: 26px 22px 22px; }
  .vendor-card-glyph { width: 64px; height: 64px; font-size: 28px; }
  .vendor-card-name { font-size: 22px; }
  .vpre-ico { width: 48px; height: 48px; }
}

/* --- modal overlay --- */
.vendor-modal { position: fixed; inset: 0; z-index: 4000; display: none; }
.vendor-modal.open { display: block; }
body.vendor-modal-lock { overflow: hidden; }
.vendor-modal-backdrop { position: absolute; inset: 0; background: rgba(4,6,12,0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vendor-modal-window {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92vw; height: 90vh; max-width: 1500px; display: flex; flex-direction: column; overflow: hidden;
  background: #0c0f17; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.vendor-modal-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent); }
.vendor-modal-title { flex: 1; display: flex; align-items: center; gap: 13px; min-width: 0; }
.vendor-modal-glyph { --v: #aa6bff; flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 15px; color: var(--v); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.16); }
.vendor-modal-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vendor-modal-vname { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .3px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-modal-sub { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-modal-timerslot { flex: 0 0 auto; }
.vendor-modal-timer { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 11px; background: rgba(255,255,255,0.04); font-size: 12.5px; color: rgba(255,255,255,0.62); white-space: nowrap; }
.vendor-modal-timer .vt-ico { font-size: 13px; opacity: 0.7; }
.vendor-modal-timer .vt-val { color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; }
.vendor-modal-away { color: #f2a33a; margin-left: 4px; }
.vendor-modal-x { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; cursor: pointer; font-size: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.vendor-modal-x:hover { background: rgba(255,255,255,0.12); }
.vendor-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px; }

/* --- sections (generic vendors use collapsible .vendor-section boxes) --- */
.vendor-section { min-width: 0; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); }
.vendor-section + .vendor-section { margin-top: 14px; }
.vendor-section-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 11px 13px; background: rgba(255,255,255,0.04); border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; text-align: left; }
.vendor-section-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.vendor-section-min { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.vendor-section-min::before, .vendor-section-min::after { content: ''; position: absolute; background: rgba(255,255,255,0.7); }
.vendor-section-min::before { top: 8px; left: 2px; right: 2px; height: 2px; }
.vendor-section-min::after  { left: 8px; top: 2px; bottom: 2px; width: 2px; opacity: 0; }
.vendor-section.collapsed .vendor-section-min::after { opacity: 1; }
.vendor-section-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.vendor-section.collapsed .vendor-section-body { display: none; }

/* --- Xur window: stacked, type-grouped sections (matches the redesign) --- */
.xur-window { display: flex; flex-direction: column; gap: 30px; }
.xur-sec { min-width: 0; }
.xur-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.xur-sec-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.xur-sec-count { font-size: 12.5px; color: #8a92a3; }
.xur-sec-tools { margin-left: auto; }
.xur-sort { display: inline-flex; align-items: center; gap: 8px; }
.xur-sort-l { font-size: 12px; color: #8a92a3; }
.xur-sort-sel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e6e9f0; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.xur-sort-sel:focus { outline: none; border-color: rgba(170,107,255,0.5); }

/* --- ARMOR: three class columns (Warlock | Titan | Hunter) --- */
.xa-cols { display: flex; gap: 14px; align-items: flex-start; }
.xa-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.xa-col-head { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: #c6ccd9; padding: 2px 2px 5px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.xa-col-head.xa-cls-hunter { color: #9fccf2; background: none; }
.xa-col-head.xa-cls-titan { color: #eda398; background: none; }
.xa-col-head.xa-cls-warlock { color: #e6c878; background: none; }
.xa-col-empty { font-size: 12px; color: #5b6271; text-align: center; padding: 16px 0; }
.xa-card { position: relative; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; padding: 13px; }
.xa-top { display: flex; gap: 11px; align-items: flex-start; }
.xa-ico { width: 46px; height: 46px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.3); }
.xa-id { min-width: 0; flex: 1; }
.xa-name { font-weight: 700; font-size: 13.5px; color: #fff; line-height: 1.2; }
.xa-name.vinv-t-exotic { color: #d9b13a; }
.xa-name.vinv-t-legendary { color: #c08ae6; }
.xa-chip { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: rgba(255,255,255,0.08); color: #c6ccd9; }
.xa-cls-hunter { background: rgba(90,169,230,0.18); color: #9fccf2; }
.xa-cls-titan { background: rgba(217,106,94,0.18); color: #eda398; }
.xa-cls-warlock { background: rgba(216,169,58,0.18); color: #e6c878; }
.xa-tot { flex: none; text-align: center; min-width: 36px; }
.xa-tot-n { font-weight: 800; font-size: 22px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.xa-tot-l { font-size: 8.5px; letter-spacing: 1px; color: #7f8799; margin-top: 4px; }
.xa-bars { display: flex; gap: 5px; align-items: flex-end; margin: 12px 0 0; }
.xa-bar { flex: 1; text-align: center; }
.xa-bar-v { font-size: 10.5px; color: #aeb6c6; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.xa-bar-tk { height: 32px; border-radius: 4px; background: rgba(255,255,255,0.08); display: flex; align-items: flex-end; overflow: hidden; }
.xa-bar-fl { width: 100%; background: #5b647a; border-radius: 4px; }
.xa-bar.top .xa-bar-fl { background: #d9b13a; }
.xa-bar-ic { margin-top: 5px; height: 15px; display: grid; place-items: center; opacity: 0.75; }
.xa-bar-ic svg, .xa-bar-ic img { width: 15px; height: 15px; }
.xa-bar.top .xa-bar-ic { opacity: 1; }
.xa-bar-ltr { font-size: 10.5px; font-weight: 700; color: #aeb6c6; }
.xa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); }
.vcost-wrap { flex: none; }
.xa-states { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.xa-state { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.xa-state-ico { font-size: 10.5px; line-height: 1; }
.xa-state-aff { background: rgba(74,196,122,0.14); color: #7fdca0; }
.xa-state-no { background: rgba(255,255,255,0.05); color: #8a92a3; }
.xa-state-owned { background: rgba(74,196,122,0.2); color: #8fe6b0; }
.xa-state-notowned { background: rgba(224,90,90,0.16); color: #f0a3a3; }
.xur-footnote { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 6px; font-size: 11.5px; color: #6f7686; }
.xur-footnote span { display: inline-flex; align-items: center; gap: 6px; }

/* --- weapon columns (exotic: Weapons | Catalysts; legendary: Primary | Special | Heavy) --- */
.xw-cols { display: flex; gap: 14px; align-items: flex-start; }
.xw-cols .xa-col { gap: 12px; }
.xa-col-head.xw-ammo-primary { color: #dfe3ea; }
.xa-col-head.xw-ammo-special { color: #7fdca0; }
.xa-col-head.xw-ammo-heavy { color: #c08ae6; }
.xur-wep { display: flex; align-items: flex-start; gap: 13px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 13px 15px; }
.xur-wep-ico { width: 50px; height: 50px; flex: none; border-radius: 9px; background: rgba(0,0,0,0.3); }
.xur-wep-id { flex: 1; min-width: 0; }
.xur-wep-name { font-weight: 700; font-size: 14.5px; color: #fff; line-height: 1.2; }
.xur-wep-name.vinv-t-exotic { color: #d9b13a; }
.xur-wep-name.vinv-t-legendary { color: #c08ae6; }
.xur-wep-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.xur-wep-type { font-size: 12px; color: #8a92a3; }
.xur-wep-cat { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #1a1407; background: #e0a23a; padding: 2px 7px; border-radius: 5px; }
.xur-wep-states { margin-top: 9px; }
.xur-wep-cost { flex: none; }

/* --- consumables / materials pills --- */
.xur-mat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.xur-mat { display: inline-flex; align-items: center; gap: 11px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; padding: 11px 15px; }
.xur-mat-ico { width: 36px; height: 36px; flex: none; border-radius: 8px; background: rgba(0,0,0,0.3); }
.xur-mat-name { font-size: 13.5px; font-weight: 600; color: #e6e9f0; }
.xur-mat-cost { flex: none; }

/* --- Eververse: featured hero + image-forward cosmetic gallery --- */
.ev-window { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.ev-topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.ev-topbar-l { min-width: 0; }
.ev-topbar-r { flex: none; margin-left: auto; }
.ev-bal { display: inline-flex; align-items: center; gap: 9px; background: rgba(217,177,58,0.12); border: 1px solid rgba(217,177,58,0.26); border-radius: 22px; padding: 9px 16px; font-weight: 700; font-size: 16px; color: #fbe3a0; }
.ev-bal-ico { width: 20px; height: 20px; border-radius: 4px; flex: none; }
.ev-bal-n { font-variant-numeric: tabular-nums; }
/* character switcher */
.vchar-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.vchar { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px 14px 6px 7px; cursor: pointer; color: #c6ccd9; transition: border-color .15s ease, background .15s ease; }
.vchar:hover { border-color: rgba(255,255,255,0.2); }
.vchar.selected { border-color: rgba(217,177,58,0.55); background: rgba(217,177,58,0.10); color: #fff; }
.vchar-emb { width: 32px; height: 32px; border-radius: 7px; flex: none; background: rgba(0,0,0,0.3); }
.vchar-id { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.vchar-cls { font-weight: 700; font-size: 13.5px; }
.vchar-lvl { font-size: 11px; color: #f0c75f; font-variant-numeric: tabular-nums; }
.ev-hero { position: relative; display: flex; gap: 24px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 22px; }
.ev-hero-img { flex: none; width: 196px; height: 196px; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.3); }
.ev-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-hero-body { min-width: 0; }
.ev-hero-tag { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: #e7c66b; background: rgba(217,177,58,0.16); padding: 5px 12px; border-radius: 20px; }
.ev-hero-star { font-size: 11px; }
.ev-hero-name { font-size: 30px; font-weight: 700; color: #fff; line-height: 1.12; margin: 0 0 7px; }
.ev-hero-name.vinv-t-exotic { color: #d9b13a; }
.ev-hero-name.vinv-t-legendary { color: #c08ae6; }
.ev-hero-type { font-size: 15px; color: #9aa3b2; line-height: 1.4; margin-bottom: 20px; }
.ev-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.evg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.evg-card { flex: 0 1 184px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.evg-card:hover { border-color: rgba(255,255,255,0.17); transform: translateY(-2px); }
.evg-img { aspect-ratio: 1; background: rgba(0,0,0,0.28); overflow: hidden; }
.evg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evg-body { padding: 13px 14px 14px; }
.evg-name { font-weight: 700; font-size: 14px; color: #fff; line-height: 1.25; }
.evg-name.vinv-t-exotic { color: #d9b13a; }
.evg-name.vinv-t-legendary { color: #c08ae6; }
.evg-name.vinv-t-rare { color: #5076a3; }
.evg-type { font-size: 12px; color: #8a92a3; margin-top: 3px; }
.evg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; }
/* bigger cost + status chips throughout the store (Mo) */
.ev-window .vcost { font-size: 16px; }
.ev-window .vcost-icon { width: 21px; height: 21px; }
.ev-window .xa-state { font-size: 12.5px; padding: 4px 11px; }
.ev-window .xa-state-ico { font-size: 12px; }
.ev-hero-foot .vcost { font-size: 19px; }
.ev-hero-foot .vcost-icon { width: 24px; height: 24px; }
.ev-hero-foot .xa-state { font-size: 13.5px; padding: 5px 13px; }
@media (max-width: 720px) {
  .ev-hero { flex-direction: column; align-items: stretch; }
  .ev-hero-img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* --- cost pill (qty then the real Strange Coin icon from the API) --- */
.vcost { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #fbe3a0; white-space: nowrap; }
.vcost-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.vcost-icon { width: 19px; height: 19px; border-radius: 4px; }

/* --- Remind me button (modal head) --- */
.vendor-modal-remind { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 11px; background: transparent; border: 1px solid rgba(255,255,255,0.16); color: #d6dbe6; font-size: 13px; cursor: pointer; }
.vendor-modal-remind:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }

/* narrow: class/ammo columns stack vertically; hide the header timer pill (launcher shows it) */
@media (max-width: 720px) {
  .xa-cols, .xw-cols { flex-direction: column; }
  .vendor-modal-sub { white-space: normal; }
  .vendor-modal-timerslot { display: none; }
  .vendor-modal-remind { padding: 8px 10px; }
}

/* ============ Ask assistant (52-assistant.js) ============ */
.d2a-hub{position:fixed;right:22px;bottom:22px;width:58px;height:58px;z-index:9000;}
.d2a-hub-btn{position:absolute;right:0;bottom:0;width:58px;height:58px;border:none;border-radius:50%;cursor:pointer;color:#0c0e12;background:rgba(var(--accent-rgb,240,199,95),1);box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .2s ease,opacity .15s ease;}
.d2a-hub-btn:hover{box-shadow:0 9px 26px rgba(0,0,0,.5),0 0 20px rgba(var(--accent-rgb,240,199,95),.55);}
.d2a-hub-btn svg{width:26px;height:26px;}
.d2a-hub.open .d2a-hub-btn{transform:rotate(90deg);}
.d2a-hub.panel-open .d2a-hub-btn{opacity:0;pointer-events:none;transform:scale(.85);}
.d2a-orbit{position:absolute;inset:0;pointer-events:none;}
.d2a-orbit-item{position:absolute;right:5px;bottom:5px;opacity:0;transform:translate(0,0) scale(.4);transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;pointer-events:none;}
.d2a-hub.open .d2a-orbit-item{opacity:1;pointer-events:auto;}
.d2a-hub.open .d2a-orbit-ask{transform:translate(-4px,-84px) scale(1);}
.d2a-hub.open .d2a-orbit-zoom{transform:translate(-98px,-18px) scale(1);transition-delay:.05s;}
.d2a-ob-ask{width:48px;height:48px;border-radius:50%;cursor:pointer;background:#1b1f29;border:1px solid rgba(var(--accent-rgb,240,199,95),.55);color:#f0c75f;font-size:21px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;}
.d2a-ob-ask:hover{background:#232838;}
.d2a-orbit-zoom .ui-scale-controls{position:static!important;top:auto!important;margin:0!important;display:flex!important;}
@media (max-width:520px){.d2a-hub{right:16px;bottom:16px;}.d2a-orbit-zoom{display:none;}}
.d2a-panel{position:fixed;right:20px;bottom:20px;z-index:9001;width:380px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;background:#12151c;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease;overflow:hidden;}
.d2a-panel.open{opacity:1;transform:none;pointer-events:auto;}
.d2a-head{display:flex;align-items:baseline;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);}
.d2a-title{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:#eef1f7;letter-spacing:.04em;}
.d2a-sub{font-size:12px;color:#8a93a6;}
.d2a-close{margin-left:auto;background:none;border:none;color:#9aa3b4;font-size:24px;line-height:1;cursor:pointer;padding:0 4px;}
.d2a-close:hover{color:#fff;}
.d2a-log{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.d2a-msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.45;}
.d2a-user{align-self:flex-end;background:rgba(var(--accent-rgb,240,199,95),.16);border:1px solid rgba(var(--accent-rgb,240,199,95),.3);color:#f4f6fa;border-bottom-right-radius:4px;}
.d2a-bot{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:#dfe4ee;border-bottom-left-radius:4px;}
.d2a-bot b{color:#f0c75f;font-weight:700;}
.d2a-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.d2a-list li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 9px;background:rgba(255,255,255,.03);border-radius:7px;}
.d2a-li-name{color:#cdd4e0;}
.d2a-li-val{color:#f0c75f;font-weight:700;white-space:nowrap;}
.d2a-note{margin-top:9px;font-size:11.5px;color:#7e8799;line-height:1.4;}
.d2a-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%;}
.d2a-chip{font-family:inherit;font-size:12.5px;padding:7px 11px;border-radius:999px;border:1px solid rgba(var(--accent-rgb,240,199,95),.35);background:rgba(var(--accent-rgb,240,199,95),.08);color:#e7ddc2;cursor:pointer;text-align:left;}
.d2a-chip:hover{background:rgba(var(--accent-rgb,240,199,95),.18);}
.d2a-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.07);}
.d2a-input input{flex:1 1 auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;color:#eef1f7;font-family:inherit;font-size:14px;outline:none;}
.d2a-input input:focus{border-color:rgba(var(--accent-rgb,240,199,95),.5);}
.d2a-send{flex:0 0 auto;width:42px;border:none;border-radius:10px;background:rgba(var(--accent-rgb,240,199,95),1);color:#0c0e12;font-size:18px;font-weight:800;cursor:pointer;}
@media (max-width:520px){.d2a-panel{right:8px;left:8px;bottom:8px;width:auto;height:74vh;}.d2a-fab{right:14px;bottom:14px;}}

/* (weapon inspect picture removed entirely — mask no longer needed) */

/* ============================================================================
   MOBILE PASS 2 (audit fixes) — rules that must sit at the end of this file
   because earlier rules in THIS sheet would out-cascade them.
   ============================================================================ */
@media (max-width: 520px) {
  /* Landing: the Orbitron-900 wordmark was wider than the phone viewport and
     clipped both ends. Scale it fluidly and give the page side padding. */
  #landingPage { padding: 0 16px; }
  .landing-title { font-size: clamp(20px, 7.5vw, 32px); letter-spacing: 3px; text-align: center; }
  .landing-subtitle { font-size: 10px; letter-spacing: 2.5px; text-align: center; }
  .landing-buttons { gap: 10px; }
  .landing-btn { width: calc(50% - 10px); min-width: 130px; padding: 20px 10px; }
  /* Assistant chat panel: sit above the fixed bottom nav bar + home indicator. */
  .d2a-panel {
    bottom: calc(var(--rail-mobile-h, 54px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    height: min(74vh, calc(100vh - var(--rail-mobile-h, 54px) - 90px)) !important;
  }
}
@media (max-width: 600px) {
  /* Vendors: the centered 92vw x 90vh modal reads as a floating box on a
     phone — make it a full-screen sheet that respects the bottom bar. */
  .vendor-modal-window {
    width: 100vw !important; max-width: none !important;
    height: calc(100vh - var(--rail-mobile-h, 54px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    top: 0 !important; left: 0 !important; transform: none !important;
    border-radius: 0 !important;
  }
}