/* ============================================================
   LOADOUT BAY (the loadout editor, js/lobby.js "LOADOUT BAY")
   Same approach as css/signup.css: everything paints through --lb-*
   tokens, flat in the tactical themes, moulded in NEUMORPHIC and
   GRAPHITE. Scoped under #loadout-overlay, with !important where the
   shared neumorphic button rules in themes.css would repaint a control;
   the ID outranks their :not() chains.
   ============================================================ */

#loadout-overlay {
    --lb-page: linear-gradient(180deg, #2a3444 0%, #1a2430 40%, #101820 100%);
    --lb-r: 5px; --lb-r-sm: 4px;
    --lb-fill: var(--bg-panel); --lb-fill-hi: var(--bg-elevated, var(--bg-panel)); --lb-sunk: rgba(0, 0, 0, 0.28);
    --lb-line: var(--border);
    --lb-raise: 0 0 0 1px var(--border); --lb-raise-lg: 0 0 0 1px var(--border-active, var(--border));
    --lb-in: inset 0 0 0 1px var(--border); --lb-well: inset 0 0 0 1px var(--border-active, var(--border));
    --lb-hover: 0 0 0 1px var(--amber), inset 0 0 0 100vmax color-mix(in srgb, var(--amber) 7%, transparent);
    --lb-press: inset 2px 0 0 var(--amber), 0 0 0 1px var(--amber), inset 0 0 0 100vmax color-mix(in srgb, var(--amber) 9%, transparent);
    --lb-acc: var(--amber); --lb-acc-glow: color-mix(in srgb, var(--amber) 35%, transparent);
    --lb-prim-bg: var(--amber); --lb-prim-fg: #1a1300; --lb-prim-sh: none; --lb-prim-hover: 0 0 0 1px var(--text-bright);
    --lb-ls: 0.1em; --lb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lb-key: #1c2a3a;
    --lb-c-aa: #4a9bff; --lb-c-ag-guided: #ff5555; --lb-c-ag-unguided: #ff9933; --lb-c-rockets: #c060ff; --lb-c-pods: #33cccc; --lb-c-fuel: #8a9aa8;
}
body.theme-neu #loadout-overlay {
    --lb-page: var(--bg-primary);
    --lb-r: var(--neu-r); --lb-r-sm: var(--neu-r-sm);
    --lb-fill: var(--neu-fill); --lb-fill-hi: var(--neu-fill); --lb-sunk: var(--neu-fill-sunk); --lb-line: rgba(255, 255, 255, 0.05);
    --lb-raise: var(--neu-out-sm); --lb-raise-lg: var(--neu-out); --lb-in: var(--neu-in-sm); --lb-well: var(--neu-in);
    --lb-hover: 3px 3px 12px var(--neu-lo), inset 1px 1px 0 var(--neu-rim);
    --lb-press: inset 2px 0 0 var(--amber), var(--neu-in-sm);
    --lb-prim-bg: var(--neu-fill); --lb-prim-fg: var(--amber); --lb-prim-sh: var(--neu-out-sm);
    --lb-prim-hover: 3px 3px 12px var(--neu-lo), inset 1px 1px 0 var(--neu-rim);
    --lb-key: #2f343b;
}
body.theme-graphite #loadout-overlay {
    --lb-page: linear-gradient(150deg, #1f1f1f 0%, #1c1c1c 50%, #191919 100%);
    --lb-r: 0; --lb-r-sm: 0;
    --lb-fill: var(--neu-fill); --lb-fill-hi: linear-gradient(145deg, #242424 0%, #1b1b1b 100%); --lb-sunk: #161616;
    --lb-line: rgba(255, 255, 255, 0.05);
    --lb-raise: 3px 3px 8px #0b0b0b, -2px -2px 6px rgba(47, 47, 47, 0.5), inset 1px 1px 0 rgba(70, 70, 70, 0.55);
    --lb-raise-lg: var(--neu-out);
    --lb-in: var(--neu-in-sm); --lb-well: inset 4px 4px 9px #0b0b0b, inset -3px -3px 7px rgba(47, 47, 47, 0.45);
    --lb-hover: var(--gr-stripe-lit), var(--gr-press-half), var(--gr-glow-surface);
    --lb-press: var(--gr-stripe), inset 5px 5px 11px #050505;
    --lb-acc: var(--gr-signal); --lb-acc-glow: rgba(94, 230, 168, 0.35);
    --lb-prim-bg: linear-gradient(145deg, #262626 0%, #1c1c1c 100%); --lb-prim-fg: var(--text-bright);
    --lb-prim-sh: var(--gr-stripe), var(--neu-out);
    --lb-prim-hover: var(--gr-stripe-lit), var(--gr-press-half), var(--gr-glow-surface);
    --lb-ls: 0.24em;
    --lb-key: #262626;
    --lb-c-aa: #d8cfbf; --lb-c-ag-guided: #e5737b; --lb-c-ag-unguided: #e0a060; --lb-c-rockets: #b48ae0; --lb-c-pods: #5ec8c8; --lb-c-fuel: #9a9a9a;
}

/* ---------- shell ---------- */
#loadout-overlay #lb-root { width: 100%; max-width: 1560px; height: 96vh; height: 96dvh; display: flex; }
#loadout-overlay .lb-scroll {
    flex: 1; overflow: auto; background: var(--lb-page); box-shadow: var(--lb-raise-lg), 0 20px 60px rgba(0, 0, 0, 0.6);
    border-radius: var(--lb-r);
}
#loadout-overlay .lb { font-family: var(--font-mono); color: var(--text-primary); font-size: 14px; line-height: 1.5; padding: 22px 26px 24px; }
#loadout-overlay .lb button { font-family: inherit; cursor: pointer; }
#loadout-overlay .lb :is(h2, h3, h4) { margin: 0; color: var(--text-bright); text-shadow: none; }
#loadout-overlay .lb :is(h2, h3) { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em; }
#loadout-overlay .lb-cap { font-size: 12px; font-weight: 700; letter-spacing: var(--lb-ls); color: var(--text-secondary); text-transform: uppercase; }
#loadout-overlay .lb-sub { font-size: 13px; color: var(--text-secondary); }
#loadout-overlay .lb-plate { background: var(--lb-fill); box-shadow: var(--lb-raise-lg); border-radius: var(--lb-r); }
#loadout-overlay .lb-pad { padding: 16px 18px; }
#loadout-overlay .lb-num {
    display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--lb-acc);
    background: var(--lb-sunk); box-shadow: var(--lb-in); border-radius: var(--lb-r-sm);
}
#loadout-overlay .lb-dot { width: 8px; height: 8px; border-radius: 50% !important; display: inline-block; background: var(--tc, var(--cc)); box-shadow: 0 0 6px var(--tc, var(--cc)); flex: none; }

#loadout-overlay .lb-btn {
    padding: 10px 16px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    background: var(--lb-fill-hi) !important; box-shadow: var(--lb-raise) !important; border: 0 !important;
    border-radius: var(--lb-r-sm) !important; color: var(--text-primary) !important; text-shadow: none !important;
    transition: box-shadow 0.3s var(--lb-ease), color 0.2s;
}
#loadout-overlay .lb-btn:hover { box-shadow: var(--lb-hover) !important; color: var(--text-bright) !important; }
#loadout-overlay .lb-btn.lb-prim { background: var(--lb-prim-bg) !important; color: var(--lb-prim-fg) !important; box-shadow: var(--lb-prim-sh) !important; padding: 13px 26px; font-size: 14px; letter-spacing: 2px; }
#loadout-overlay .lb-btn.lb-prim:hover { box-shadow: var(--lb-prim-hover) !important; }
#loadout-overlay .lb-btn.lb-ghost { background: transparent !important; box-shadow: none !important; color: var(--text-secondary) !important; }
#loadout-overlay .lb-btn.lb-ghost:hover { color: var(--text-bright) !important; box-shadow: none !important; }

#loadout-overlay .lb-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; }
#loadout-overlay .lb-head h2 { font-size: 28px; line-height: 1.1; }
#loadout-overlay .lb-who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
#loadout-overlay .lb-who b { color: var(--text-bright); }
#loadout-overlay .lb-sep { color: var(--text-secondary); }
#loadout-overlay .lb-x { margin-left: auto; }

#loadout-overlay .lb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
#loadout-overlay .lb-main { min-width: 0; }
@media (max-width: 1100px) { #loadout-overlay .lb-grid { grid-template-columns: 1fr; } }

/* ---------- presets ---------- */
#loadout-overlay .lb-presets { padding: 16px 18px; margin-bottom: 22px; }
#loadout-overlay .lb-presets-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
#loadout-overlay .lb-presets-h h3 { font-size: 18px; }
#loadout-overlay .lb-presets-h .lb-btn { margin-left: auto; }
#loadout-overlay .lb-preset-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
#loadout-overlay .lb-preset {
    text-align: left; padding: 11px 13px; background: var(--lb-fill-hi) !important; box-shadow: var(--lb-raise) !important;
    border: 0 !important; border-radius: var(--lb-r-sm) !important; color: var(--text-primary) !important; transition: box-shadow 0.3s var(--lb-ease);
}
#loadout-overlay .lb-preset:hover { box-shadow: var(--lb-hover) !important; }
#loadout-overlay .lb-preset.on { background: var(--lb-sunk) !important; box-shadow: var(--lb-press) !important; }
#loadout-overlay .lb-preset b { display: block; font-size: 13px; color: var(--text-bright); line-height: 1.35; }
#loadout-overlay .lb-preset small { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#loadout-overlay .lb-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 1px 6px; color: var(--text-secondary); background: var(--lb-sunk); box-shadow: var(--lb-in); border-radius: var(--lb-r-sm); }
#loadout-overlay .lb-tag.fit { color: var(--lb-acc); }

/* ---------- bay ---------- */
#loadout-overlay .lb-bay { padding: 18px 18px 16px; }
#loadout-overlay .lb-bay-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#loadout-overlay .lb-bay-h h3 { font-size: 18px; }
#loadout-overlay .lb-bay-h .lb-btn { margin-left: auto; }
#loadout-overlay .lb-art { position: relative; margin: 0 auto; max-width: 820px; }
#loadout-overlay .lb-art img { display: block; width: 100%; height: auto; opacity: 0.9; }
body.theme-graphite #loadout-overlay .lb-art img { filter: drop-shadow(0 0 2px rgba(94, 230, 168, 0.15)); }
#loadout-overlay .lb-leads { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#loadout-overlay .lb-leads line { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
#loadout-overlay .lb-leads line.on { stroke: var(--lb-acc); stroke-width: 1.5; }
#loadout-overlay .lb-hang { position: absolute; inset: 0; pointer-events: none; }
#loadout-overlay .lb-hang .lb-wi { position: absolute; width: 7.5%; height: auto; aspect-ratio: 1; transform: translate(-50%, 0); --ic: var(--cc); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); }
#loadout-overlay .lb-hang .lb-wi.on { --ic: var(--lb-acc); filter: drop-shadow(0 0 4px var(--lb-acc-glow)); }
#loadout-overlay .lb-rack { position: absolute; transform: translate(-50%, 0); font-size: 11px; font-weight: 700; color: var(--lb-acc); background: var(--lb-sunk); padding: 0 4px; }
#loadout-overlay .lb-sockets { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; max-width: 900px; margin: 14px auto 0; }
#loadout-overlay .lb-sockets.leads { margin-top: 34px; }
#loadout-overlay .lb-sock {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 96px; padding: 8px 6px 9px; text-align: center;
    background: var(--lb-fill-hi) !important; box-shadow: var(--lb-raise) !important; border: 0 !important; border-radius: var(--lb-r-sm) !important;
    color: var(--text-primary) !important; transition: box-shadow 0.3s var(--lb-ease);
}
#loadout-overlay .lb-sock::before { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 3px; background: var(--cc, transparent); }
#loadout-overlay .lb-sock:hover { box-shadow: var(--lb-hover) !important; }
#loadout-overlay .lb-sock.on { background: var(--lb-sunk) !important; box-shadow: var(--lb-press) !important; }
#loadout-overlay .lb-sock.empty { background: transparent !important; box-shadow: none !important; border: 1px dashed rgba(255, 255, 255, 0.14) !important; }
#loadout-overlay .lb-sock.empty:hover { border-color: transparent !important; box-shadow: var(--lb-hover) !important; }
#loadout-overlay .lb-sock.empty.on { border-color: transparent !important; background: var(--lb-sunk) !important; box-shadow: var(--lb-press) !important; }
#loadout-overlay .lb-sock .lb-num { align-self: center; }
#loadout-overlay .lb-sock .lb-wi { --s: 38px; align-self: center; --ic: var(--cc); }
#loadout-overlay .lb-sock.on .lb-wi { --ic: var(--lb-acc); }
#loadout-overlay .lb-wn { font-size: 13px; font-weight: 700; color: var(--text-bright); line-height: 1.2; word-break: break-word; }
#loadout-overlay .lb-wc { font-size: 11px; color: var(--text-secondary); }
#loadout-overlay .lb-sock.empty .lb-wn { color: var(--text-secondary); font-weight: 400; font-size: 20px; line-height: 1; }
#loadout-overlay .lb-sock.warn::after { content: ''; position: absolute; right: 5px; top: 7px; width: 7px; height: 7px; border-radius: 50% !important; background: var(--red); box-shadow: 0 0 6px var(--red); }

/* Weapon icons: DCS ME nose-on glyphs used as a mask, so they take any theme colour */
#loadout-overlay .lb-wi {
    display: inline-block; flex: none; width: var(--s, 32px); height: var(--s, 32px); background: var(--ic, currentColor);
    -webkit-mask: var(--wi) center / contain no-repeat; mask: var(--wi) center / contain no-repeat;
}

/* ---------- drawer ---------- */
#loadout-overlay .lb-drawer { margin-top: 14px; padding: 14px 16px 16px; background: var(--lb-sunk); box-shadow: inset 2px 0 0 var(--lb-acc); border-radius: var(--lb-r-sm); }
#loadout-overlay .lb-drawer-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#loadout-overlay .lb-drawer-h h3 { font-size: 17px; }
#loadout-overlay .lb-mirror { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; margin-left: auto; }
#loadout-overlay .lb-mirror input { accent-color: var(--lb-acc); width: 16px; height: 16px; }
#loadout-overlay .lb-search {
    flex: 1 1 200px; max-width: 280px; background: var(--lb-fill) !important; box-shadow: var(--lb-well) !important; border: 0 !important;
    border-radius: var(--lb-r-sm) !important; color: var(--text-bright) !important; font-family: inherit; font-size: 13px; padding: 8px 11px; outline: none;
}
#loadout-overlay .lb-none { color: var(--text-secondary); font-size: 14px; }
#loadout-overlay .lb-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#loadout-overlay .lb-cat {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    background: var(--lb-fill-hi) !important; box-shadow: var(--lb-raise) !important; border: 0 !important; border-radius: var(--lb-r-sm) !important;
    color: var(--text-primary) !important; transition: box-shadow 0.3s var(--lb-ease);
}
#loadout-overlay .lb-cat i { width: 8px; height: 8px; border-radius: 50% !important; background: var(--cc); }
#loadout-overlay .lb-cat em { font-style: normal; color: var(--text-secondary); font-weight: 400; }
#loadout-overlay .lb-cat:hover { box-shadow: var(--lb-hover) !important; }
#loadout-overlay .lb-cat.on { background: var(--lb-sunk) !important; box-shadow: var(--lb-press) !important; color: var(--text-bright) !important; }
#loadout-overlay .lb-weps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; padding: 2px 6px 2px 2px; scrollbar-gutter: stable; }
#loadout-overlay .lb-wep {
    position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; text-align: left; padding: 10px 12px 10px 64px;
    background: var(--lb-fill-hi) !important; box-shadow: var(--lb-raise) !important; border: 0 !important; border-radius: var(--lb-r-sm) !important;
    color: var(--text-primary) !important; transition: box-shadow 0.3s var(--lb-ease);
}
#loadout-overlay .lb-wep::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--cc); transition: opacity 0.2s; }
#loadout-overlay .lb-wep:hover::before, #loadout-overlay .lb-wep.on::before { opacity: 0; }
#loadout-overlay .lb-wep .lb-wi { position: absolute; left: 14px; top: 50%; margin-top: -19px; --s: 38px; --ic: var(--cc); }
#loadout-overlay .lb-wep:hover .lb-wi { --ic: var(--text-bright); }
#loadout-overlay .lb-wep.on .lb-wi { --ic: var(--lb-acc); }
#loadout-overlay .lb-wep b { font-size: 14px; color: var(--text-bright); }
#loadout-overlay .lb-wep span { font-size: 12px; color: var(--text-secondary); }
#loadout-overlay .lb-wep .lb-stock { position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 700; color: var(--lb-acc); }
#loadout-overlay .lb-wep .lb-stock.out { color: var(--red); }
#loadout-overlay .lb-wep:hover { box-shadow: var(--lb-hover) !important; }
#loadout-overlay .lb-wep.on { background: var(--lb-fill) !important; box-shadow: var(--lb-press) !important; }
#loadout-overlay .lb-wep.clear { padding-left: 15px; }
#loadout-overlay .lb-wep.clear b { color: var(--text-secondary); }
#loadout-overlay .lb-wep.out { opacity: 0.45; cursor: not-allowed; }

/* Scrollbar: a machined slot. Firefox gets the standard properties only,
   because in Chrome they switch the webkit styling off. */
@supports (-moz-appearance: none) {
    #loadout-overlay :is(.lb-weps, .lb-scroll) { scrollbar-width: thin; scrollbar-color: #3a3a3a #141414; }
}
#loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar { width: 12px; height: 12px; }
#loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar-track { background: var(--lb-sunk); box-shadow: var(--lb-in); border-radius: var(--lb-r-sm); }
#loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar-thumb {
    border: 3px solid transparent !important; background-clip: padding-box !important; border-radius: var(--lb-r-sm) !important;
    background-color: #2e2e2e !important; box-shadow: inset 1px 1px 0 rgba(90, 90, 90, 0.7), inset -1px -1px 0 #0b0b0b !important;
}
#loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar-thumb:hover { background-color: #383838 !important; box-shadow: inset 0 0 0 1px var(--lb-acc) !important; }
body:not(.theme-graphite):not(.theme-neu) #loadout-overlay :is(.lb-weps, .lb-scroll)::-webkit-scrollbar-thumb { background-color: #2a3a4c !important; box-shadow: none !important; }

/* ---------- side ---------- */
#loadout-overlay .lb-side { display: grid; gap: 20px; position: sticky; top: 0; }
#loadout-overlay .lb-side h4 { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px; }
#loadout-overlay .lb-wt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#loadout-overlay .lb-wt b { font-family: var(--font-heading); font-size: 30px; color: var(--text-bright); letter-spacing: 1px; }
#loadout-overlay .lb-wt span { color: var(--text-secondary); font-size: 13px; }
#loadout-overlay .lb-meter { height: 8px; margin: 10px 0 6px; background: var(--lb-sunk); box-shadow: var(--lb-in); border-radius: var(--lb-r-sm); overflow: hidden; }
#loadout-overlay .lb-meter i { display: block; height: 100%; background: var(--lb-acc); transition: width 0.4s var(--lb-ease); }
#loadout-overlay .lb-meter i.hi { background: #e0a060; }
#loadout-overlay .lb-meter i.over { background: var(--red); }
#loadout-overlay .lb-wt-note { font-size: 12px; color: var(--text-secondary); }
#loadout-overlay .lb-wt-note.over { color: var(--red); font-weight: 700; }
#loadout-overlay .lb-stores { display: grid; gap: 6px; }
#loadout-overlay .lb-store { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-primary); }
#loadout-overlay .lb-store .lb-wi { --s: 22px; --ic: var(--cc); }
#loadout-overlay .lb-store b { color: var(--lb-acc); min-width: 30px; }
#loadout-overlay .lb-store.none { color: var(--text-secondary); }
#loadout-overlay .lb-asym { margin-top: 12px; padding: 10px 12px; font-size: 13px; color: var(--red); background: var(--lb-sunk); box-shadow: inset 2px 0 0 var(--red); border-radius: var(--lb-r-sm); }
#loadout-overlay .lb-copy { display: grid; gap: 8px; }
#loadout-overlay .lb-copy .lb-btn { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 10px; }
#loadout-overlay .lb-copy .lb-btn small { color: var(--text-secondary); font-weight: 400; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fuel and countermeasures as instrument sliders: sunk slot, segmented
   LED fill up to --p (set from JS), raised square key. */
#loadout-overlay .lb-cons { display: grid; gap: 14px; }
#loadout-overlay .lb-con { display: grid; grid-template-columns: 74px 1fr 64px; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); }
#loadout-overlay .lb-con output { text-align: right; padding: 4px 8px; font-size: 14px; letter-spacing: 0.5px; color: var(--lb-acc); background: var(--lb-sunk); box-shadow: var(--lb-in); border-radius: var(--lb-r-sm); }
body.theme-graphite #loadout-overlay .lb-con output { text-shadow: 0 0 6px rgba(94, 230, 168, 0.35); }
#loadout-overlay .lb-con input[type=range] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; cursor: pointer;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    --led: var(--lb-acc);
}
#loadout-overlay .lb-con input[type=range]:focus { outline: none; }
#loadout-overlay .lb-con input[type=range]::-webkit-slider-runnable-track {
    height: 12px; border-radius: var(--lb-r-sm);
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--lb-sunk) calc(10% - 2px) 10%),
        linear-gradient(90deg, var(--led) 0 calc(var(--p, 0) * 1%), transparent calc(var(--p, 0) * 1%)),
        var(--lb-sunk);
    box-shadow: var(--lb-in);
}
#loadout-overlay .lb-con input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 24px; margin-top: -6px; border: 0; border-radius: var(--lb-r-sm) !important;
    background: linear-gradient(90deg, transparent 6px, var(--led) 6px 8px, transparent 8px), var(--lb-key);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), inset 1px 1px 0 rgba(90, 90, 90, 0.7);
    transition: box-shadow 0.25s var(--lb-ease);
}
#loadout-overlay .lb-con input[type=range]:hover::-webkit-slider-thumb { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 10px var(--lb-acc-glow), inset 0 0 0 1px var(--lb-acc); }
#loadout-overlay .lb-con input[type=range]:active::-webkit-slider-thumb { box-shadow: inset 2px 2px 5px #080808, 0 0 12px var(--lb-acc-glow), inset 0 0 0 1px var(--led); }
#loadout-overlay .lb-con input[type=range]::-moz-range-track { height: 12px; background: var(--lb-sunk); border-radius: var(--lb-r-sm); }
#loadout-overlay .lb-con input[type=range]::-moz-range-progress { height: 12px; background: var(--led); border-radius: var(--lb-r-sm); }
#loadout-overlay .lb-con input[type=range]::-moz-range-thumb { width: 14px; height: 24px; border: 0; border-radius: var(--lb-r-sm); background: var(--lb-key); }
#loadout-overlay .lb-con.low input[type=range] { --led: #e0a060; }
#loadout-overlay .lb-con.low output { color: #e0a060; }

#loadout-overlay .lb-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--lb-line); }
#loadout-overlay .lb-foot .lb-prim { margin-left: auto; }
#loadout-overlay .lb-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 5; padding: 12px 18px; font-size: 14px;
    color: var(--text-bright); background: var(--lb-fill); box-shadow: var(--lb-raise-lg), inset 2px 0 0 var(--lb-acc); border-radius: var(--lb-r-sm);
}

/* GRAPHITE hover: glow on the main label only, small text stays sharp */
body.theme-graphite #loadout-overlay .lb :is(.lb-sock, .lb-wep, .lb-preset, .lb-cat, .lb-btn):hover { text-shadow: none !important; }
body.theme-graphite #loadout-overlay .lb :is(.lb-sock:hover .lb-wn, .lb-wep:not(:disabled):hover b, .lb-preset:hover b, .lb-cat:not(.on):hover, .lb-btn:not(.lb-ghost):hover) {
    color: #7ee82a !important; text-shadow: 0 0 3px rgba(110, 230, 30, 0.6), 0 0 9px rgba(80, 210, 15, 0.35) !important;
}
body.theme-graphite #loadout-overlay .lb :is(.lb-sock, .lb-wep, .lb-preset):hover :is(small, span:not(.lb-num):not(.lb-wn), .lb-wc) { text-shadow: none !important; }

@media (max-width: 760px) {
    #loadout-overlay #lb-root { height: 100vh; height: 100dvh; max-width: 100%; }
    #loadout-overlay .lb { padding: 16px 12px 20px; }
    #loadout-overlay .lb-sockets { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; }
    #loadout-overlay .lb-leads { display: none; }
    #loadout-overlay .lb-con { grid-template-columns: 64px 1fr 60px; }
}