:root {
  --ink: #15110d; --ink-glass: rgba(21,17,13,.82);
  --bronze: #c9a24b; --bronze-dim: #7a6736;
  --parchment: #e9dec8; --parchment-dim: #a99f88;
  --rail-h: 48px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--parchment); font: 14px var(--sans); }
body { display: flex; flex-direction: column; }

/* ---- instrument rail ---- */
#rail {
  position: relative; min-height: var(--rail-h); z-index: 1100; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 5px 12px; flex-wrap: wrap;
  background: var(--ink-glass); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bronze-dim);
}
.wordmark { font-family: var(--serif); font-variant: small-caps; letter-spacing: .14em; color: var(--bronze); font-size: 15px; }
.filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.filters::after { content: ""; }
.field { display: inline-flex; flex-direction: column; gap: 2px; }
.field-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--parchment-dim); }
.field-row { display: inline-flex; align-items: center; gap: 4px; }
.dash, .pct { color: var(--parchment-dim); }
.f-text, .f-sel, .f-num {
  background: #0e0b08; color: var(--parchment); border: 1px solid var(--bronze-dim);
  border-radius: 3px; padding: 4px 6px; font: inherit;
}
.f-num { width: 52px; font-family: var(--mono); text-align: right; }
.actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.auto { display: inline-flex; align-items: center; gap: 4px; color: var(--parchment-dim); font-size: 12px; }
.btn {
  background: transparent; color: var(--bronze); border: 1px solid var(--bronze-dim);
  border-radius: 3px; padding: 6px 10px; font: inherit; cursor: pointer; line-height: 1;
}
.btn:hover { border-color: var(--bronze); }
.btn[aria-pressed="true"] { background: rgba(201,162,75,.16); border-color: var(--bronze); }
.btn.icon { font-size: 15px; padding: 5px 9px; }
.rail-only-narrow { display: none; }
.count { font-family: var(--mono); color: var(--bronze); white-space: nowrap; }
.dirty { color: var(--bronze); font-size: 12px; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }

/* ---- map ---- */
#content { position: relative; flex: 1 1 auto; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--ink); }

/* ---- floating Results window ---- */
#results {
  position: absolute; top: 14px; right: 14px; width: 312px; max-height: calc(100% - 28px);
  z-index: 1000; display: flex; flex-direction: column;
  background: var(--ink-glass); backdrop-filter: blur(4px);
  border: 1px solid var(--bronze-dim); border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); overflow: hidden;
  transition: opacity .15s ease;
}
#results.hidden { display: none; }
#resultsBar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: move;
  background: rgba(201,162,75,.10); border-bottom: 1px solid var(--bronze-dim); user-select: none;
}
.results-title { font-family: var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--bronze); }
.results-count { font-family: var(--mono); font-size: 11px; color: var(--parchment-dim); margin-left: auto; }
.results-close { background: none; border: none; color: var(--parchment-dim); cursor: pointer; font-size: 15px; padding: 0 2px; }
.results-close:hover { color: var(--bronze); }
.summary { font-family: var(--mono); color: var(--bronze); font-size: 12px; padding: 8px 10px 2px; }
.rows { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 12px; overflow-y: auto; }
.row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; padding: 6px;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.row:hover, .row.active { border-color: var(--bronze-dim); background: rgba(201,162,75,.08); }
.row .thumb { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ring, var(--bronze-dim)); background: #0e0b08; }
.row .name { color: var(--parchment); }
.row .meta { color: var(--parchment-dim); font-size: 12px; }
.row .mat { font-family: var(--mono); font-size: 12px; }
.empty { color: var(--parchment-dim); padding: 12px 2px; }
.more { color: var(--parchment-dim); font-size: 12px; padding: 8px 2px; }

/* ---- themed Leaflet popup (no white) ---- */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--ink-glass); color: var(--parchment); border: 1px solid var(--bronze-dim);
  box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.leaflet-popup-content { margin: 10px 12px; font: 13px var(--sans); }
.leaflet-popup-close-button { color: var(--parchment-dim) !important; }
.leaflet-popup-close-button:hover { color: var(--bronze) !important; }
.pop-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pop-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bronze-dim); }
.pop-name { font-family: var(--serif); color: var(--bronze); font-size: 15px; }
.pop-meta { color: var(--parchment-dim); font-size: 12px; }
.pop-mats { border-collapse: collapse; width: 100%; }
.pop-mats td { padding: 1px 0; vertical-align: top; }
.pop-chance { font-family: var(--mono); text-align: right; padding-left: 12px !important; color: var(--bronze); }

/* hover tooltip card */
.cameo-card { background: var(--ink-glass) !important; color: var(--parchment) !important; border: 1px solid var(--bronze-dim) !important; box-shadow: 0 2px 10px rgba(0,0,0,.5) !important; font: 12px var(--sans); max-width: none !important; white-space: nowrap; }
.cameo-card .t-name { color: var(--bronze); } .cameo-card .t-mat { font-family: var(--mono); }
.leaflet-tooltip.cameo-card::before { border-top-color: var(--bronze-dim) !important; }

/* ---- cameo / glyph markers ---- */
.cameo-wrap { background: none; border: none; }
.cameo {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ring); overflow: visible; background: #0e0b08;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  transition: transform .15s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}
.cameo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.cameo .lvl { position: absolute; right: -2px; bottom: -2px; font: 10px/1 var(--mono);
  background: var(--ink); color: var(--bronze); border: 1px solid var(--ring); border-radius: 8px; padding: 1px 3px; }
.cameo.glyph img, .cameo.noimg img { display: none; }
.cameo.glyph::before, .cameo.noimg::before {
  content: ""; position: absolute; inset: 8px; background: var(--fill, var(--bronze)); display: block;
}
.cameo.noimg::before { border-radius: 50%; }
.cameo.diamond::before { transform: rotate(45deg); }
.cameo.triangle::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cameo.square::before { border-radius: 2px; }
.cameo.circle::before { border-radius: 50%; }
.cameo:hover, .cameo.bloom { transform: scale(1.6); z-index: 1200; }
.leaflet-marker-icon:hover { z-index: 1200 !important; }

/* ---- result→map selection: forge-light spotlight ----
   Picking a result lights EVERY matching spawn of that mob in molten gold and recedes the rest into
   the mine dark. Clustered spawns aren't in the DOM, so the glow itself is drawn as halo markers
   (`.sel-halo`, one per matching spawn, in an above-markers pane) — all instances light up even while
   clustered. `.has-selection` (on the map container) dims everything else; `.sel` keeps a picked
   mob's visible cameo from dimming and lifts it above its neighbours (re-applied in createIcon so it
   survives Leaflet re-renders). The halo's see-through centre lets a declustered portrait show. */
.cameo-wrap.sel { z-index: 10000 !important; }
.has-selection .cameo-wrap:not(.sel) .cameo {
  opacity: .3; filter: grayscale(.75) brightness(.78); transform: scale(.82);
}
.has-selection .marker-cluster { opacity: .42; filter: grayscale(.6); transition: opacity .2s ease, filter .2s ease; }
.sel-halo {
  box-sizing: border-box; border-radius: 50%; border: 3px solid #f2c24e;
  background: rgba(242,194,78,.10); pointer-events: none;
  box-shadow: 0 0 0 2px rgba(242,194,78,.45), 0 0 14px 4px rgba(242,194,78,.6);
}

/* ---- bronze cluster bubbles (override markercluster defaults) ---- */
.marker-cluster { background: rgba(122,103,54,.35); }
.marker-cluster div { background: rgba(201,162,75,.75); color: var(--ink); font: 12px var(--mono); font-weight: 700; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(122,103,54,.35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: rgba(201,162,75,.78); }
.marker-cluster-large div { background: rgba(226,116,42,.85); }

/* ---- chance legend ---- */
.legend {
  position: absolute; left: 8px; bottom: 26px; z-index: 1000;
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  background: var(--ink-glass); border: 1px solid var(--bronze-dim); border-radius: 4px;
  font-size: 11px; color: var(--parchment-dim);
}
.legend-label { color: var(--bronze); }
.legend-ramp { width: 90px; height: 8px; border-radius: 4px; border: 1px solid var(--bronze-dim);
  background: linear-gradient(90deg, #5a5550, #b5742a, #f2c24e); }

#credit { position: absolute; left: 8px; bottom: 6px; z-index: 1000; font-size: 11px; color: var(--parchment-dim); }
#credit a { color: var(--bronze-dim); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .rail-only-narrow { display: inline-block; }
  .filters {
    display: none; position: absolute; top: var(--rail-h); left: 0; right: 0; z-index: 1090;
    flex-direction: column; align-items: stretch; gap: 10px; padding: 12px;
    background: var(--ink-glass); backdrop-filter: blur(6px); border-bottom: 1px solid var(--bronze-dim);
  }
  .filters.open { display: flex; }
}
@media (max-width: 720px) {
  #results { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 48%; border-radius: 0;
    border-left: none; border-right: none; border-bottom: none; }
  #resultsBar { cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .cameo, #results { transition: none; }
  .cameo:hover, .cameo.bloom { transform: scale(1.3); }
}

/* ---- material chips ---- */
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 7px;
  background: rgba(201,162,75,.16); border: 1px solid var(--bronze-dim); border-radius: 10px;
  color: var(--parchment); font-size: 12px; }
.chip button { background: none; border: none; color: var(--parchment-dim); cursor: pointer; font: inherit; line-height: 1; padding: 0; }
.chip button:hover { color: var(--bronze); }

/* ---- saved-lists popover + toast ---- */
.pop-menu { position: absolute; top: var(--rail-h); right: 12px; z-index: 1101; width: 280px;
  background: var(--ink-glass); backdrop-filter: blur(6px); border: 1px solid var(--bronze-dim);
  border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.5); padding: 10px; }
.pop-menu[hidden] { display: none; }
.pop-menu-head { display: flex; gap: 6px; margin-bottom: 8px; }
.saved-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.saved-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.saved-item:hover { border-color: var(--bronze-dim); background: rgba(201,162,75,.08); }
.saved-item .s-name { flex: 1; color: var(--parchment); }
.saved-item .s-meta { color: var(--parchment-dim); font-size: 11px; font-family: var(--mono); }
.saved-item .s-del { background: none; border: none; color: var(--parchment-dim); cursor: pointer; }
.saved-item .s-del:hover { color: #e0533a; }
.saved-empty { color: var(--parchment-dim); font-size: 12px; padding: 4px 2px; }
.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200;
  background: var(--ink-glass); border: 1px solid var(--bronze); border-radius: 4px; padding: 8px 14px;
  color: var(--parchment); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.toast[hidden] { display: none; }

/* ---- results sort + value ---- */
.results-sort { font-size: 11px; color: var(--parchment-dim); display: inline-flex; align-items: center; gap: 4px; }
.results-sort .f-sel { padding: 2px 4px; }
.row .val { font-family: var(--mono); font-size: 11px; color: var(--bronze); }
.pop-val { font-family: var(--mono); text-align: right; padding-left: 10px !important; color: var(--bronze); }
.pop-total { margin-top: 6px; font-family: var(--mono); color: var(--bronze); font-size: 12px; }

/* ---- click-popup drop/spoil/extra tables (Phase 3) ---- */
.pop-drops { margin-top: 8px; border-top: 1px solid var(--bronze-dim); padding-top: 6px;
  max-height: 220px; overflow-y: auto; }
.drops-loading, .drops-none { color: var(--parchment-dim); font-size: 12px; font-style: italic; }
.drop-sec { margin-top: 6px; }
.drop-h { font-family: var(--serif); font-variant: small-caps; letter-spacing: .08em;
  color: var(--bronze); font-size: 12px; margin-bottom: 2px; }
.drop-tbl { border-collapse: collapse; width: 100%; }
.drop-tbl td { padding: 1px 0; vertical-align: top; font-size: 12px; }
.drop-name { padding-right: 8px; }
.drop-qty { font-family: var(--mono); text-align: right; color: var(--parchment-dim); padding: 0 8px; white-space: nowrap; }
.drop-chance { font-family: var(--mono); text-align: right; color: var(--bronze); white-space: nowrap; }

/* ---- auth control ---- */
.authbox[hidden] { display: none; }
.authbox { display: inline-flex; align-items: center; gap: 8px; }
.userbox { display: inline-flex; align-items: center; gap: 6px; }
.userbox[hidden], #signIn[hidden] { display: none; }
.userpic { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bronze-dim); }
.username { color: var(--parchment); font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Items window: mirrors #results, anchored left ---- */
#items {
  position: absolute; top: 14px; left: 14px; width: 240px; max-height: calc(100% - 28px);
  z-index: 1000; display: flex; flex-direction: column;
  background: var(--ink-glass); backdrop-filter: blur(4px);
  border: 1px solid var(--bronze-dim); border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); overflow: hidden;
  transition: opacity .15s ease;
}
#items.hidden { display: none; }
#itemsBar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: move;
  background: rgba(201,162,75,.10); border-bottom: 1px solid var(--bronze-dim); user-select: none;
}
#itemsBar .results-close { margin-left: auto; }
#itemChips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; overflow-y: auto; }
.items-empty { color: var(--parchment-dim); font-size: 12px; padding: 4px 2px; }
.chip-val { font-family: var(--mono); font-size: 11px; color: var(--bronze); }

/* ---- pill toggles (active state inherited from .btn[aria-pressed="true"]) ---- */
.btn.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 5px 10px; }

/* ---- responsive: Items as a top sheet so it doesn't collide with the Results bottom sheet ---- */
@media (max-width: 720px) {
  #items { top: var(--rail-h); left: 0; right: 0; width: 100%; max-height: 32%; border-radius: 0; }
  #itemsBar { cursor: default; }
}

/* ---- ignore: context menu + manage popover ---- */
.npc-menu {
  position: fixed; z-index: 1200; min-width: 160px;
  background: var(--ink-glass); backdrop-filter: blur(6px);
  border: 1px solid var(--bronze-dim); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.5); padding: 4px;
}
.npc-menu[hidden] { display: none; } /* explicit, matching the other popovers (not just UA default) */
.npc-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--parchment); font: inherit; padding: 6px 10px; cursor: pointer; border-radius: 3px;
}
.npc-menu-item:hover { background: rgba(201,162,75,.16); color: var(--bronze); }
.ignore-title { font-family: var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--bronze); }
#ignoreCount { font-family: var(--mono); }

/* ---- help popover ---- */
.help-pop { width: 320px; }
.help-title { font-family: var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--bronze); }
.help-list { margin: 8px 0 4px; padding: 0 10px 4px 24px; }
.help-list li { margin: 7px 0; font-size: 13px; color: var(--parchment); line-height: 1.45; }
.help-list b { color: var(--bronze); }
.help-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--bronze-dim); }
.help-foot-lead { margin: 0 0 9px; font-size: 13px; color: var(--parchment); line-height: 1.45; }
.help-discord { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--bronze-dim); border-radius: 8px; background: rgba(201,162,75,.16);
  color: var(--bronze); text-decoration: none; font-weight: 600; }
.help-discord:hover { background: rgba(201,162,75,.28); border-color: var(--bronze); }

/* ---- settings popover (profile + price overrides) ---- */
.settings-title { font-family: var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--bronze); }
.settings-sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bronze-dim); }
.settings-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.settings-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--bronze); font-size: 12px; margin-bottom: 6px; }
.settings-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0;
  color: var(--parchment-dim); font-size: 12px; }
.settings-field .f-num { width: 60px; }
.ov-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; }
.ov-row:hover { border-color: var(--bronze-dim); background: rgba(201,162,75,.08); }
.ov-name { flex: 1; color: var(--parchment); }
.ov-val { font-family: var(--mono); font-size: 12px; color: var(--bronze); }
.ov-del { background: none; border: none; color: var(--parchment-dim); cursor: pointer; }
.ov-del:hover { color: #e0533a; }

/* ---- inline price editor (chips / popup / overrides) ---- */
.val-edit { cursor: pointer; border-bottom: 1px dotted var(--bronze-dim); }
.val-edit:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
.val-input { width: 72px; background: #0e0b08; color: var(--parchment); border: 1px solid var(--bronze);
  border-radius: 3px; padding: 1px 4px; font: inherit; font-family: var(--mono); text-align: right; }
.chip-val.val-edit { border-bottom: none; } /* chip is already framed */
.pop-val .val-edit { border-bottom: none; } /* keep popup value column clean until hover */
.pop-val .val-edit:hover { border-bottom: 1px dotted var(--bronze); }

/* ---- Phase 5: report tabs + controls ---- */
.results-tabs { display: flex; gap: 4px; padding: 6px 10px 0; }
.tab {
  flex: 1 1 0; background: transparent; color: var(--parchment-dim);
  border: 1px solid var(--bronze-dim); border-radius: 4px 4px 0 0; border-bottom: none;
  padding: 5px 8px; font: inherit; cursor: pointer;
}
.tab[aria-pressed="true"] { color: var(--bronze); background: rgba(201,162,75,.12); }
.report-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px 2px; }
.report-controls[hidden] { display: none; }
.seg { display: inline-flex; border: 1px solid var(--bronze-dim); border-radius: 4px; overflow: hidden; }
.seg-btn {
  background: transparent; color: var(--parchment-dim); border: none; border-left: 1px solid var(--bronze-dim);
  padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.seg-btn:first-child { border-left: none; }
.seg-btn[aria-pressed="true"] { background: rgba(201,162,75,.16); color: var(--bronze); }

/* ---- Phase 5: report list ---- */
.report { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 12px; overflow-y: auto; }
.report[hidden], .rows[hidden] { display: none; }
.report-summary { padding: 2px 0 4px; border-bottom: 1px solid var(--bronze-dim); margin-bottom: 4px; }
.rs-callout { font-family: var(--mono); color: var(--bronze); font-size: 12px; }
.rs-totals { color: var(--parchment-dim); font-size: 11px; margin-top: 2px; }
.report-row .val { font-family: var(--mono); color: var(--bronze); font-size: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.badge {
  font-size: 10px; line-height: 1.4; padding: 1px 6px; border: 1px solid var(--bronze-dim);
  border-radius: 9px; color: var(--parchment-dim); white-space: nowrap;
}
.badge.b-fit { color: var(--bronze); border-color: var(--bronze); }
.report-item { grid-template-columns: 1fr; }
.ri-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ri-val { font-family: var(--mono); color: var(--bronze); }
.ri-src { font-size: 11px; color: var(--parchment-dim); margin-top: 2px; cursor: pointer; }
.ri-src:hover { color: var(--bronze); }

/* ---- Phase 5: value-heat legend variant ---- */
.legend.value .legend-ramp { background: linear-gradient(90deg, #3b4e7a, #4fd1e0, #a855f7); }

/* ---- Phase 5: themed scrollbars (replace ugly OS defaults) ---- */
.rows, #report, .pop-drops, .saved-list, #itemChips, #overridesList {
  scrollbar-width: thin; scrollbar-color: var(--bronze-dim) transparent;
}
/* Content-side gutter so the bar never crowds the text. WebKit can inset the thumb (below); Firefox
   can't, so padding-right does the spacing there. Both engines get a clear gap either way. */
.rows, #report, #itemChips { padding-right: 12px; }
.pop-drops, .saved-list, #overridesList { padding-right: 10px; }
.rows::-webkit-scrollbar, #report::-webkit-scrollbar, .pop-drops::-webkit-scrollbar,
.saved-list::-webkit-scrollbar, #itemChips::-webkit-scrollbar, #overridesList::-webkit-scrollbar {
  width: 12px; height: 12px;
}
/* 3px transparent border + content-box clip floats the 6px bronze thumb in the track. */
.rows::-webkit-scrollbar-thumb, #report::-webkit-scrollbar-thumb, .pop-drops::-webkit-scrollbar-thumb,
.saved-list::-webkit-scrollbar-thumb, #itemChips::-webkit-scrollbar-thumb, #overridesList::-webkit-scrollbar-thumb {
  background: var(--bronze-dim); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
.rows::-webkit-scrollbar-thumb:hover, #report::-webkit-scrollbar-thumb:hover, .pop-drops::-webkit-scrollbar-thumb:hover,
.saved-list::-webkit-scrollbar-thumb:hover, #itemChips::-webkit-scrollbar-thumb:hover, #overridesList::-webkit-scrollbar-thumb:hover {
  background: var(--bronze);
}
.rows::-webkit-scrollbar-track, #report::-webkit-scrollbar-track, .pop-drops::-webkit-scrollbar-track,
.saved-list::-webkit-scrollbar-track, #itemChips::-webkit-scrollbar-track, #overridesList::-webkit-scrollbar-track {
  background: transparent;
}
/* Firefox can't inset the scrollbar thumb (no ::-webkit-* support), so it keeps the native thin bar
   (themed via scrollbar-color above). Give it a larger content gutter instead so the bar doesn't
   crowd the text. Firefox-only feature query — Chromium/WebKit don't support -moz-appearance. */
@supports (-moz-appearance: none) {
  .rows, #report, #itemChips { padding-right: 18px; }
  .pop-drops, .saved-list, #overridesList { padding-right: 16px; }
}