/* ============================================================================
   D2 GUN LOCKER  -  01-core-1.css  (part 1 of 4)
   ----------------------------------------------------------------------------
   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.
   See README for the component map; rules for one component may span parts.
   ============================================================================ */

/* ============================================================================
   D2 GUN LOCKER  -  01-core.css  (base stylesheet)
   ----------------------------------------------------------------------------
   All core styling: tokens (:root), reset, layout, header, cards, filters,
   detail panels, build crafter, stats views. Loaded first.
   ============================================================================ */

/* D2 GUN LOCKER — consolidated head stylesheet
   Consolidated from 3 source style blocks, in original cascade order.
   No rules reordered, merged, or removed — rendering is identical. */

  :root {
    --bg-primary: #0a0c10;
    --bg-secondary: #111520;
    --bg-card: #161b28;
    --bg-card-hover: #1c2236;
    --bg-perk: #0d1018;
    --border-dim: #1e2538;
    --border-bright: #2a3450;
    --text-primary: #e8eaf0;
    --text-secondary: #8890a8;
    --text-dim: #5a6380;
    --accent-kinetic: #d9d9d9;
    --accent-arc: #79bbe8;
    --accent-solar: #f2721b;
    --accent-void: #b185df;
    --accent-stasis: #4d88ff;
    --accent-strand: #35e37a;
    --tier-exotic: #ceae33;
    --tier-legendary: #522f65;
    --tier-rare: #5076a3;
    /* themeable brand accent (default: Cabal red). Settings page swaps these. */
    --accent: #ff3b34;
    --accent-rgb: 255, 59, 52;
    --accent-bright: var(--accent);
    --accent-dim: color-mix(in srgb, var(--accent), #000000 22%);
    --accent-2: var(--accent-dim); /* secondary accent; multi-colour themes override */
    --accent-fill-grad: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 60%) 0%, color-mix(in srgb, var(--accent-2), transparent 72%) 100%);
    --glow-a1: .24; --glow-r1: 62%; --glow-t2: 78%; --glow-r2: 64%;

    /* ---- Redesign token layer (2026-07) ----------------------------------
       The shared visual system: every page consumes these instead of ad-hoc
       values. Near-monochrome; ONE accent (the theme accent above). */
    --rail-w: 56px;            /* fixed left icon rail */
    --strip-h: 52px;           /* quiet top strip */
    --rail-mobile-h: 54px;     /* bottom bar height on narrow viewports */
    /* space: strict 4/8 grid */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
    /* type: tight 6-step scale. Rajdhani = UI, Orbitron = identity + big numerals */
    --font-ui: 'Rajdhani', sans-serif;
    --font-display: 'Orbitron', sans-serif;
    --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 28px;
    /* shape + separation: hairlines and background steps, not boxes */
    --hairline: rgba(255,255,255,.06);
    --hairline-strong: rgba(255,255,255,.11);
    --radius: 10px; --radius-sm: 6px;
    /* elevation: flat by default; ONE raised level for active panel/overlay */
    --shadow-raised: 0 12px 32px rgba(0,0,0,.38);
    /* motion: one easing, two durations. Fades + small translates only. */
    --ease: cubic-bezier(.25,.6,.3,1);
    --dur-1: .14s; --dur-2: .22s;
  }
  :root[data-glow="off"]  { --glow-a1: 0;   --glow-r1: 0%;  --glow-t2: 100%; --glow-r2: 0%; }
  :root[data-glow="low"]  { --glow-a1: .12; --glow-r1: 55%; --glow-t2: 88%;  --glow-r2: 58%; }
  :root[data-glow="med"]  { --glow-a1: .24; --glow-r1: 62%; --glow-t2: 78%;  --glow-r2: 64%; }
  :root[data-glow="high"] { --glow-a1: .38; --glow-r1: 70%; --glow-t2: 64%;  --glow-r2: 72%; }

  /* Light colour mode. Accent themes still apply on top of these neutral tokens.
     System mode resolves to data-mode="light"/"dark" via JS (prefers-color-scheme). */
  :root[data-mode="light"] {
    --bg-primary: #eceff5;
    --bg-secondary: #ffffff;
    --bg-card: #f5f7fb;
    --bg-card-hover: #e8edf5;
    --bg-perk: #eef1f7;
    --border-dim: #d3d9e4;
    --border-bright: #b6c0d2;
    --text-primary: #161b26;
    --text-secondary: #515b73;
    --text-dim: #828ca3;
    --hairline: rgba(12,18,32,.10);
    --hairline-strong: rgba(12,18,32,.18);
    --shadow-raised: 0 12px 32px rgba(20,30,50,.14);
  }
  :root[data-mode="light"] body { background: var(--bg-primary); color: var(--text-primary); }
  :root[data-mode="light"] .header {
    background: color-mix(in srgb, var(--bg-primary), transparent 6%);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg-primary); color: var(--text-primary);
    font-family: var(--font-ui); min-height: 100vh; overflow-x: hidden;
    /* The fixed left icon rail: all in-flow content starts right of it. */
    padding-left: var(--rail-w);
    /* Always reserve the viewport scrollbar gutter so the page width is identical
       on every page. Otherwise short pages (Settings, Lab) drop the scrollbar and
       the whole layout (nav bar included) jumps right by the scrollbar width. */
    overflow-y: scroll;
  }
  /* Firefox: page scrollbar uses the secondary theme accent (matches the
     webkit ::-webkit-scrollbar-thumb rule below). */
  html { scrollbar-width: thin; scrollbar-color: var(--accent-2) var(--bg-primary); }

  /* ---- The shell: fixed left icon rail + quiet top strip ------------------
     The rail owns navigation (icons only, labels on hover); the strip owns
     identity (wordmark / page name) and page-level context. No stacked bars. */
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
    display: flex; flex-direction: column; align-items: stretch;
    background: var(--bg-primary);
    border-right: 1px solid var(--hairline);
    z-index: 120;
  }
  .rail-logo {
    display: flex; align-items: center; justify-content: center;
    height: var(--strip-h); flex: 0 0 auto;
  }
  .rail-logo svg { width: 26px; height: 26px; display: block; }
  .rail .filters {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
    flex: 1 1 auto; min-height: 0; padding: var(--sp-2) 0;
  }
  /* Settings pinned to the bottom of the rail */
  .rail .page-nav-btn[data-page-fixed="settings"] { margin-top: auto; }

  .header {
    position: sticky; top: 0; z-index: 100;
    min-height: var(--strip-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--bg-primary), transparent 4%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    padding: 0 var(--sp-5);
  }
  .header-inner { display: flex; align-items: center; gap: var(--sp-4); width: 100%; min-width: 0; }
  .logo { display: flex; align-items: baseline; gap: var(--sp-2); flex-shrink: 0; }
  /* the app mark lives in the rail (.rail-logo.logo-icon); the strip has none */
  .header .logo-icon { display: none; }
  .logo-text {
    font-family: var(--font-display); font-size: 13px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary);
  }
  /* page name beside the wordmark: GUN LOCKER / weapons */
  .logo-sub {
    font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 400;
    letter-spacing: 1.5px; text-transform: lowercase; color: var(--text-secondary);
    margin-top: 0;
  }
  .logo-sub::before { content: '/ '; color: var(--text-dim); }

  .search-container { flex: 1; min-width: 180px; max-width: 720px; position: relative; }
  .search-input {
    width: 100%; padding: 9px 14px 9px 40px;
    background: var(--bg-secondary); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: var(--font-ui);
    font-size: 15px; font-weight: 400; letter-spacing: 0.5px; outline: none;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .search-input:focus { border-color: var(--hairline-strong); background: var(--bg-card); }
  .search-input::placeholder { color: var(--text-dim); }
  .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }

  .filters { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .filter-btn {
    padding: 5px 12px; background: transparent; border: 1px solid var(--hairline);
    border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    cursor: pointer; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    white-space: nowrap;
  }
  .filter-btn:hover { background: var(--bg-card); border-color: var(--hairline-strong); color: var(--text-primary); }
  .filter-btn.active { background: var(--bg-card-hover); border-color: var(--hairline-strong); color: var(--text-primary); }
  .filter-sep { width: 1px; height: 22px; background: var(--hairline); margin: 0 4px; }

  /* Rail nav buttons: icon only; label appears as a tooltip on hover/focus.
     Active = brighter icon + a 2px accent bar on the left edge. */
  .rail .page-nav-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 46px; padding: 0; margin: 0 var(--sp-2);
    background: transparent; border: 0; border-radius: var(--radius-sm);
    color: var(--text-dim); cursor: pointer;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  .rail .page-nav-btn .nav-icon { display: flex; align-items: center; justify-content: center; }
  .rail .page-nav-btn .nav-icon svg { width: 22px; height: 22px; }
  .rail .page-nav-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
  .rail .page-nav-btn.active { color: var(--text-primary); }
  .rail .page-nav-btn.active::before {
    content: ''; position: absolute; left: calc(-1 * var(--sp-2)); top: 25%; bottom: 25%;
    width: 2px; border-radius: 1px; background: var(--accent);
  }
  .rail .page-nav-btn .nav-label {
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--bg-card); border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm); padding: 4px 10px;
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-primary); white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
    z-index: 200;
  }
  .rail .page-nav-btn:hover .nav-label,
  .rail .page-nav-btn:focus-visible .nav-label { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* In-flow at the far right (margin-left:auto) so it can never sit on top of the Settings tab.
     Fixed width keeps the search/nav layout identical across pages; long text wraps to 2 lines. */
  .stats-bar { flex: 0 0 200px; margin-left: auto; text-align: right; line-height: 1.25; white-space: normal; font-size: var(--fs-xs); color: var(--text-dim); font-weight: 400; letter-spacing: 0.4px; }
  .stats-bar span { color: var(--text-secondary); }
  /* When a weapon is focused (picked from the Alternatives tab), the Clear All
     button turns red so it's obvious you can press it to clear the focus. */
  .clear-all-top.focus-active {
    border-color: var(--d2-red, #f25555);
    background: rgba(242, 85, 85, .18);
    color: #ffd9d9;
    box-shadow: 0 0 0 1px rgba(242, 85, 85, .35) inset;
  }
  .clear-all-top.focus-active:hover {
    background: rgba(242, 85, 85, .28);
  }

  .main { max-width: 1600px; margin: 0 auto; padding: 16px 24px 60px; }

  .weapon-filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .weapon-filter-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }

  .weapon-filter-group-head .weapon-filter-label {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .weapon-filter-group-head .clear-filter-btn {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .clear-filter-btn {
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .clear-filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-bright);
    background: var(--bg-card-hover);
  }

  .clear-filter-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .weapon-filter-title-row {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-dim);
    background: rgba(255,255,255,0.015);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .weapon-filter-title-row .weapon-filter-title {
    padding: 0;
    border-bottom: 0;
    background: none;
  }

  .clear-all-top {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-bright);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }

  .clear-all-top:hover {
    background: var(--bg-card-hover);
  }

  .weapon-filter-title {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255,255,255,0.015);
  }

  .weapon-filter-grid {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .weapon-filter-group {
    min-width: 260px;
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: 8px;
  }

  .weapon-filter-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
  }

  .weapon-filter-options::-webkit-scrollbar {
    width: 3px;
  }

  .weapon-filter-options::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
  }

  .weapon-filter-options::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 6px;
    border: 1px solid var(--bg-secondary);
  }

  .weapon-filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }

  .weapon-filter-options {
    scrollbar-color: var(--border-bright) var(--bg-secondary);
  }

  .weapon-filter-search {
    width: 100%;
    margin-bottom: 7px;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    outline: none;
  }

  .weapon-filter-search:focus {
    border-color: var(--border-bright);
    background: var(--bg-card);
  }

  .weapon-filter-search::placeholder {
    color: var(--text-dim);
  }

  .filter-no-options {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 2px;
  }

  .weapon-filter-options {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px;
    max-height: 96px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
  }

  .weapon-filter-chip {
    max-width: 100%;

    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }

  .weapon-filter-chip:hover,
  .weapon-filter-chip.active {
    background: var(--bg-card-hover);
    border-color: var(--border-bright);
    color: var(--text-primary);
  }

  .weapon-filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border-dim);
  }

  .weapon-filter-count {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
  }

  .clear-list-filters {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
  }

  .clear-list-filters:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-bright);
  }

  .weapon-filter-grid {
    padding: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 260px;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--border-bright) var(--bg-secondary);
  }

  .weapon-filter-grid::-webkit-scrollbar {
    height: 3px;
  }

  .weapon-filter-grid::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 8px;
  }

  .weapon-filter-grid::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 8px;
    border: 1px solid var(--bg-secondary);
  }

  .weapon-filter-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }

  .weapon-filter-group {
    scroll-snap-align: start;
  }

  /* (dead 1300px/700px .weapon-filter-grid media blocks removed — the base
     rule further down already forces grid-template-columns: none !important) */

  .app-layout {
    --left-pane: 1fr;
    --right-pane: 1fr;
    display: grid;
    grid-template-columns: minmax(220px, var(--left-pane)) 9px minmax(300px, var(--right-pane));
    gap: 8px;
    align-items: start;
    position: relative;
    overflow-x: clip;
    max-width: 100%;
  }

  .weapon-list-panel { min-width: 0; }

  .build-window {
    position: sticky;
    top: calc(var(--strip-h) + 16px);
    height: calc(100vh - var(--strip-h) - 40px);
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .build-window-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-dim);
    background: rgba(255,255,255,0.015);
  }

  .build-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--d2-red);
  }

  .build-selected {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
  }

  .build-actions {
    display: flex;
    gap: 7px;
    padding: 10px;
    background: transparent;
  }

  .build-btn {
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--border-dim);
    background: var(--bg-perk);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }

  .build-btn:hover,
  .build-btn.active {
    color: var(--text-primary);
    border-color: var(--border-bright);
    background: var(--bg-card-hover);
  }

  .build-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .crafter-panel {
    display: grid;
    animation: crafterPulse 0.22s ease;
    gap: 12px;
  }

  /* The Inspect view renders as .destiny-crafter; give it the same slide-up
     entry the old .crafter-panel had, but ONLY on weapon open/switch (the JS
     adds .dc-animate-in then). Internal re-renders (perk toggle, stack cycle,
     mw/mod change) rebuild .destiny-crafter too, and animating those made the
     whole panel re-fade on every click — instant update feels much snappier. */
  .destiny-crafter.dc-animate-in {
    animation: crafterPulse 0.22s ease;
  }

  @keyframes crafterPulse {
    from { opacity: 0.92; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .crafter-hero {
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    overflow: hidden;
  }

  .crafter-image {
    width: 100%;
    min-height: 180px;
    max-height: 260px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .crafter-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .crafter-image.icon-only img {
    width: 150px;
    height: 150px;
    object-fit: contain;
  }

  .crafter-info {
    padding: 12px;
  }

  .crafter-name {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
  }

  .crafter-meta {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
  }

  .crafter-selected {
    margin-top: 9px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
  }

  .crafter-selected strong {
    color: var(--accent-bright);
  }

  .crafter-stats {
    display: grid;
    gap: 8px;
  }

  .stat-section-title {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .stat-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;

    border: 0;
    border-radius: 0;
    padding: 3px 0;
  }

  .stat-name {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat-bar {
    height: 13px;
    background: rgba(255,255,255,0.10);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    border: 0;
  }

  .stat-fill {
    height: 100%;
    width: 0%;
    border-radius: 1px;
    transition: width 0.5s ease;
    background: rgba(255,255,255,0.92);
  }

  .stat-fill.positive {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.92) var(--base-stop, 0%),
      #43d17a var(--base-stop, 0%),
      #43d17a 100%
    );
  }

  .stat-fill.negative {
    background: linear-gradient(
      90deg,
      #e25555 0%,
      #e25555 var(--loss-stop, 0%),
      rgba(255,255,255,0.92) var(--loss-stop, 0%),
      rgba(255,255,255,0.92) 100%
    );
  }

  .stat-value {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    transition: color 0.25s ease;
    font-variant-numeric: tabular-nums;
  }

  .stat-value.positive {
    color: #68e394;
  }

  .stat-value.negative {
    color: #ff7676;
  }

  .stat-numbers {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .stat-number-card {
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: 8px 9px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
  }

  .stat-number-name {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .stat-number-value {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .stat-number-value.positive {
    color: #68e394;
  }

  .stat-number-value.negative {
    color: #ff7676;
  }

  .crafter-empty-note {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.4;
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    padding: 10px;
  }

  .weapon-grid .crafter-selected-perk {
    border: 1px solid rgba(206,174,51,0.95) !important;
    background: rgba(206,174,51,0.11) !important;
    box-shadow:
      inset 0 0 0 1px rgba(206,174,51,0.25),
      0 0 10px rgba(206,174,51,0.16);
  }

  .weapon-grid .crafter-selected-perk .perk-name {
    color: var(--accent-dim) !important;
  }

  .weapon-grid .crafter-selected-perk .perk-icon {
    border-color: rgba(206,174,51,0.85) !important;
  }

  /* Inspect 3-state: ENHANCED pick gets a brighter ring + an "E" badge (matches the
     Alternatives tab); NORMAL pick keeps the standard gold ring above. */
  .weapon-grid .crafter-sel-enhanced {
    border-color: rgba(255,196,84,0.98) !important;
    background: rgba(255,196,84,0.16) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,196,84,0.55),
      0 0 12px rgba(255,196,84,0.22) !important;
  }
  .weapon-grid .crafter-sel-enhanced .perk-icon {
    position: relative;
    border-color: rgba(255,196,84,0.95) !important;
    box-shadow: 0 0 0 2px rgba(255,196,84,0.5);
  }
  .weapon-grid .crafter-sel-enhanced .perk-icon::after {
    content: "E";
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffc454;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg-secondary);
    z-index: 2;
  }

  .build-empty {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.5;
    padding: 10px;
  }

  .alt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .alt-section {
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    overflow: hidden;
  }

  .alt-section-title {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255,255,255,0.015);
  }

  .alt-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
  }

  .alt-item:last-child { border-bottom: 0; }

  .alt-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-dim);
    overflow: hidden;
  }

  .alt-icon img { width: 100%; height: 100%; object-fit: cover; }

  .alt-name-btn {
    padding: 0;
    border: 0;

    font-family: 'Rajdhani', sans-serif;
    text-align: left;
    cursor: pointer;
    width: auto;
  }

  .alt-name-btn:hover {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .alt-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alt-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alt-score {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 700;
  }

  .weapon-card.selected {
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 1px rgba(136,144,168,0.35), 0 6px 24px rgba(0,0,0,0.3);
  }

  .weapon-grid { display: grid; grid-template-columns: 1fr !important; gap: 7px; }

  .alt-grid-three {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 18px !important;
  }

  .alt-section {
    min-width: 0;
  }

  .alt-item {
    cursor: pointer;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }

  .alt-item:hover {
    background: var(--bg-card-hover);
  }

  .alt-chevron {
    color: var(--text-dim);
    transition: transform 0.2s;
  }

  .alt-card.open .alt-chevron {
    transform: rotate(180deg);
  }

  .alt-details {
    display: none;
    padding: 8px 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    background: rgba(255,255,255,0.018);
  }

  .alt-card.open .alt-details {
    display: block;
  }

  .alt-foot {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px 8px;
  }

  .alt-compare-btn {
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-dim);
    background: rgba(10,12,16,0.88);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }

  .alt-compare-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-bright);
    background: var(--bg-card-hover);
  }

  .alt-compare-btn.added {
    color: var(--accent);
    border-color: rgba(206,174,51,0.65);
    background: rgba(206,174,51,0.10);
  }

  .alt-perk-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .alt-perk-col {
    flex: 1 1 86px;
    min-width: 78px;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background: var(--bg-secondary);
    overflow: hidden;
  }

  .alt-perk-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-dim);
    text-align: center;
  }

  .alt-perk-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px;
    justify-content: center;
    align-content: flex-start;
  }

  .alt-perk-row {
    display: inline-flex;
    padding: 3px;
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.12s, box-shadow 0.12s;
  }

  .alt-perk-row:hover {
    background: rgba(255,255,255,0.05);
  }

  .alt-perk-row.selected {
    background: rgba(var(--accent-rgb),0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.5);
  }

  .alt-perk-row.selected .alt-perk-icon {
    border-color: rgba(var(--accent-rgb),0.85);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.45);
    position: relative;
  }

  /* ENHANCED state: gold ring + a small "E" badge so it's clearly the enhanced pick */
  .alt-perk-row.sel-enhanced {
    background: rgba(255,196,84,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,196,84,0.55);
  }
  .alt-perk-row.sel-enhanced .alt-perk-icon {
    border-color: rgba(255,196,84,0.95);
    box-shadow: 0 0 0 2px rgba(255,196,84,0.5);
  }
  .alt-perk-row.sel-enhanced .alt-perk-icon::after {
    content: "E";
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffc454;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg-secondary);
  }

  .alt-perk-enh-head {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb),0.85);
    padding: 4px 6px 2px;
    text-align: center;
    border-top: 1px solid rgba(var(--accent-rgb),0.18);
  }

  .alt-perk-row.enh .alt-perk-icon { border-color: rgba(var(--accent-rgb),0.4); }

  .alt-perk-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    overflow: hidden;
    flex-shrink: 0;
  }

  .alt-perk-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 1250px) {
    .alt-grid-three {
      grid-template-columns: 1fr;
    }
  }
  .perk-item {
    cursor: pointer;
  }

  .perk-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 130px;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.55);
    padding: 5px;
    display: none;
  }

  .perk-context-btn {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;

    color: var(--text-primary);
    text-align: left;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .perk-context-btn:hover {
    background: var(--bg-card-hover);
  }

  .filter-controls {
    margin-bottom: 10px;
    background: var(--bg-perk);
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    overflow: hidden;
  }

  .filter-controls-title {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255,255,255,0.015);
  }

  .filter-control-row {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
  }

  .filter-control-row:last-child {
    border-bottom: 0;
  }

  .filter-control-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
  }

  .filter-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .filter-chip {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-dim);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  .filter-chip:hover,
  .filter-chip.active {
    background: var(--bg-card-hover);
    border-color: var(--border-bright);
    color: var(--text-primary);
  }
  @media (max-width: 1250px) {
    .filter-results {
      grid-template-columns: 1fr;
    }
  }

  /* Stack the two panes only when they genuinely cannot fit (left 220px min +
     resizer + right 300px min). Was 1100px, which stacked vertical/portrait
     monitors (1080 wide) that have ample room for the side-by-side layout -
     the per-pane left-compact/right-compact styles handle narrow panes. */
  @media (max-width: 840px) {
    .app-layout { grid-template-columns: 1fr; }
    .build-window {
      position: relative;
      top: auto;
      height: auto;
      max-height: 70vh;
    }
  }

  .weapon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .weapon-card {
    background: var(--bg-card); border: 1px solid var(--border-dim);
    overflow: hidden; transition: all 0.25s; cursor: default; position: relative;
  }
  .weapon-card .card-top { cursor: pointer; }
  .weapon-card .perk-item { cursor: pointer; }
  .weapon-card:hover { border-color: var(--border-bright); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
  .weapon-card.exotic { border-left: 4px solid var(--tier-exotic); }
  .weapon-card.legendary { border-left: 4px solid var(--tier-legendary); }

  .card-top { padding: 10px 12px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
  .card-top::before { content: ''; position: absolute; inset: 0; opacity: 0.05; pointer-events: none; }
  .weapon-card[data-element="Arc"] .card-top::before { background: linear-gradient(135deg, var(--accent-arc), transparent); }
  .weapon-card[data-element="Solar"] .card-top::before { background: linear-gradient(135deg, var(--accent-solar), transparent); }
  .weapon-card[data-element="Void"] .card-top::before { background: linear-gradient(135deg, var(--accent-void), transparent); }
  .weapon-card[data-element="Stasis"] .card-top::before { background: linear-gradient(135deg, var(--accent-stasis), transparent); }
  .weapon-card[data-element="Strand"] .card-top::before { background: linear-gradient(135deg, var(--accent-strand), transparent); }
  .weapon-card[data-element="Kinetic"] .card-top::before { background: linear-gradient(135deg, var(--accent-kinetic), transparent); }

  .weapon-icon { width: 52px; height: 52px;  background: var(--bg-primary); border: 1px solid var(--border-dim); overflow: hidden; flex-shrink: 0; position: relative; }
  .weapon-icon img { width: 100%; height: 100%; object-fit: cover; }
  .tier-badge { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
  .tier-badge.exotic { background: var(--tier-exotic); }
  .tier-badge.legendary { background: var(--tier-legendary); }
  .tier-badge.rare { background: var(--tier-rare); }

  .weapon-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
  .weapon-name { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; }
  .weapon-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .weapon-name-elem-img { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
  .weapon-name-elem-glyph { flex: 0 0 auto; font-size: 16px; line-height: 1; }
  .weapon-type { font-size: 11px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 3px; }
  .weapon-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 4px; }
  .weapon-archetype-badge,
  .weapon-season,
  .weapon-source { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 1px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.035); max-width: 100%; }
  .weapon-ammo-icon { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
  .weapon-ammo-icon svg { display: block; }
  .weapon-season { color: #d9c278; background: rgba(206,174,51,0.07); border-color: rgba(206,174,51,0.18); }
  .weapon-source { color: #9fb7da; background: rgba(121,187,232,0.055); border-color: rgba(121,187,232,0.16); }
  .weapon-season-icon { display: none !important; }
  .weapon-season-text,
  .weapon-source-text,
  .weapon-archetype-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 155px; }
  [data-element="Arc"] .weapon-name-elem-glyph { color: var(--accent-arc); }
  [data-element="Solar"] .weapon-name-elem-glyph { color: var(--accent-solar); }
  [data-element="Void"] .weapon-name-elem-glyph { color: var(--accent-void); }
  [data-element="Stasis"] .weapon-name-elem-glyph { color: var(--accent-stasis); }
  [data-element="Strand"] .weapon-name-elem-glyph { color: var(--accent-strand); }
  [data-element="Kinetic"] .weapon-name-elem-glyph { color: var(--accent-kinetic); }

  .expand-arrow { margin-left: auto; color: var(--text-dim); transition: transform 0.3s; flex-shrink: 0; }
  .weapon-card.expanded .expand-arrow { transform: rotate(180deg); }

  .card-perks {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
    border-top: 0px solid transparent;
  }
  .weapon-card.expanded .card-perks {
    max-height: 650px; border-top: 1px solid var(--border-dim);
    overflow-y: auto;
  }
  .perks-inner { padding: 10px 12px 12px; }
  .perk-columns { display: flex; gap: 8px; align-items: flex-start; }
  .perk-column {
    flex: 1; min-width: 0;
    background: var(--bg-perk); border: 1px solid var(--border-dim); border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden;
  }

  .perk-intrinsic-pick {
    flex: 1; min-width: 0;
    background: var(--bg-perk);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden;
  }

  .perk-list {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .normal-perks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
  }

  .enhanced-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-dim);
  }
  .perk-col-header {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); padding: 7px 10px 6px; border-bottom: 1px solid var(--border-dim);
    text-align: center; flex-shrink: 0; background: rgba(255,255,255,0.015);
  }
  .perk-list { display: flex; flex-direction: column; gap: 2px; padding: 5px; }

  .enhanced-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-dim);
  }

  .enhanced-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0 8px 6px;
  }
  .perk-item {
    display: flex; align-items: center; gap: 7px; padding: 5px 7px;
    border-radius: 5px; transition: background 0.15s; cursor: default;
  }
  .perk-item:hover { background: var(--bg-card-hover); }
  .perk-icon {
    width: 26px; height: 26px; border-radius: 50%; background: var(--bg-secondary);
    overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-dim);
  }
  .perk-icon img { width: 100%; height: 100%; object-fit: cover; }
  .perk-name { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.2px; line-height: 1.2; }
  .perk-item.enhanced {
    border: 1px solid rgba(206,174,51,0.28);
    background: rgba(206,174,51,0.045);
  }
  .enhanced-section {
    margin: 6px 5px 5px; padding-top: 6px;
    border-top: 1px solid var(--border-dim);
  }
  .enhanced-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--accent); padding: 0 8px 4px;
  }
  .perk-item.enhanced .perk-name { color: var(--accent); }

  /* Icon-only card perks: pack symbols into a centered wrapping grid; the perk
     name + description appear on hover via the floating preview. */
  .weapon-card .perk-list { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: flex-start; }
  .weapon-card .perk-item.icon-only { padding: 3px; gap: 0; }
  .weapon-card .perk-item.icon-only .perk-icon { width: 30px; height: 30px; }
  .weapon-card .perk-item.enhanced.icon-only { padding: 3px; }

  .card-perks::-webkit-scrollbar { width: 3px; }
  .card-perks::-webkit-scrollbar-track { background: var(--bg-card); }
  .card-perks::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 3px; }
  .card-perks::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

  .perk-column {
    --enhanced-offset: 0px;
  }

  .enhanced-section {
    margin-top: var(--enhanced-offset, 8px);
  }

  .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 20px; }
  .loading-spinner { width: 44px; height: 44px; border: 3px solid var(--border-dim); border-top-color: var(--text-secondary); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
  .loading-sub { font-size: 13px; color: var(--text-dim); max-width: 420px; text-align: center; line-height: 1.5; }
  .progress-bar-container { width: 240px; height: 3px; background: var(--border-dim); border-radius: 2px; overflow: hidden; }
  .progress-bar-fill { height: 100%; background: var(--text-secondary); border-radius: 2px; width: 0%; will-change: width; }

  .error-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 14px; }
  .error-screen h2 { font-family: 'Orbitron', sans-serif; font-size: 15px; letter-spacing: 2px; color: var(--accent-solar); }
  .error-screen p { color: var(--text-secondary); font-size: 13px; max-width: 480px; text-align: center; line-height: 1.5; }
  .retry-btn {
    margin-top: 6px; padding: 9px 24px; background: var(--bg-card); border: 1px solid var(--border-bright);
    border-radius: 8px; color: var(--text-primary); font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
  }
  .retry-btn:hover { background: var(--bg-card-hover); transform: translateY(-1px); }
  .no-results { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--text-dim); font-size: 14px; }

  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: var(--bg-primary); }
  ::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

  /* Universal slim scrollbars: any scroll container that lacks its own webkit styling
     would otherwise fall back to the large OS default. Force a thin bar everywhere. */
  * { scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; }
  *::-webkit-scrollbar { width: 3px; height: 3px; }
  *::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 3px; }
  *::-webkit-scrollbar-track { background: transparent; }

  @media (max-width: 900px) {
    .header-inner { gap: 10px; } .logo-text { font-size: 12px; letter-spacing: 2px; }
    .search-container { min-width: 100%; order: 10; }
    .weapon-grid { grid-template-columns: 1fr !important; }
    .stats-bar { display: none; } .main { padding: 10px 10px 40px; } .header { padding: 0 14px; }
  }

  .weapon-filter-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    gap: 8px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 10px 10px 12px !important;
  }

  .weapon-filter-group {
    min-width: 0 !important;
    width: 100% !important;
  }

  .destiny-crafter {
    position: relative;
    container-type: inline-size;
    min-height: 620px;
    padding: 0 0 16px;
    overflow: visible;
    background: linear-gradient(170deg, #2a2d35 0%, #1b1d23 30%, #111318 100%);
    border: 0;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    font-family: 'Rajdhani', sans-serif;
  }

  .destiny-crafter > * { position: relative; z-index: 1; }

  .dc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 0;
    max-width: 55%;
  }

  .dc-icon {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 0;
    background: rgba(0,0,0,0.4);
    overflow: hidden;
    flex-shrink: 0;
  }
  .dc-icon img { width: 100%; height: 100%; object-fit: cover; }

  .dc-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
  }

  .dc-type {
    margin-top: 2px;
    font-size: 14px;
    letter-spacing: 0.3px;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  .dc-description {
    padding: 10px 24px 0;
    max-width: 50%;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    line-height: 1.45;
    font-style: italic;
  }

  .dc-left {
    width: 50%;
    max-width: 480px;
    padding: 0 24px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
  }

  .dc-section { margin-top: 16px; }

  .dc-section-title {
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
  }
  .dc-section-title::after { display: none !important; }

  .dc-section-title.dc-section-lined {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 12px;
  }

  .dc-section-perks {
    margin-top: auto;
    margin-bottom: 8px;
  }

  .dc-section-bottom {
    margin-top: auto;
  }

  .dc-section-intrinsic {
    margin-top: 32px;
  }

  .dc-mw-diamond {
    color: var(--accent-dim);
    font-size: 10px;
    margin-right: 2px;
    flex-shrink: 0;
  }

  .dc-perk-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 0;
    border: 0;
  }

  .dc-perk-slot-wrap {
    width: auto;
    min-height: auto;
    display: flex;
    justify-content: center;
  }