:root {
  --bg: #080b10;
  --surface: #0e131b;
  --surface-2: #131b26;
  --surface-3: #182334;
  --line: #263346;
  --line-soft: #192332;
  --text: #f5f7fb;
  --muted: #8d9aad;
  --gold: #f5bd38;
  --gold-soft: rgba(245,189,56,.14);
  --green: #30d58a;
  --green-soft: rgba(48,213,138,.13);
  --red: #ff5b6e;
  --red-soft: rgba(255,91,110,.13);
  --blue: #7aa9ff;
  /* Chart series. Kept in step with CHART_INK in app.js. */
  --insta-buy: #f0973c;
  --insta-sell: #45b0d0;
  --sma: #8ea6d8;
  --chart-volume: #31536b;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }

button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.site-header { height: 96px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: rgba(8,11,16,.96); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 9px; align-items: center; font-size: 16px; letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #17130a; background: var(--gold); font-weight: 900; }
.brand strong { color: var(--gold); }
.game-badge { padding: 3px 6px; border: 1px solid var(--line); color: var(--muted); border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
nav { display: flex; gap: 28px; color: var(--muted); font-size: 13px; }
nav a { padding: 23px 0 20px; border-bottom: 2px solid transparent; }
nav a:hover, nav a.active { color: var(--text); border-bottom-color: var(--gold); }
main { position: relative; }
#market-view { height: calc(100dvh - 96px); padding: 4px 4px 0; }
.header-tool-context { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 10px; justify-self: start; }
.header-tool-logo { width: 44px; height: 44px; align-self: start; object-fit: contain; mix-blend-mode: screen; }
.header-tool-copy { min-width: 0; display: grid; gap: 8px; }
.header-tool-title { min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }.header-tool-title h1 { margin: 0; font-size: 18px; letter-spacing: -.025em; }.header-tool-title span { overflow: hidden; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; }
.header-metrics { display: flex; align-items: center; gap: 16px; }.header-metrics > div { min-width: 74px; display: grid; gap: 2px; }.header-metrics strong { font-size: 13px; line-height: 1; }.header-metrics small { color: var(--muted); font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.item-header-context { width: min(100%, 560px); }
.item-header-icon { width: 44px; height: 44px; align-self: start; object-fit: contain; object-position: center top; }
.item-header-copy { min-width: 0; display: grid; gap: 4px; }
.item-header-copy .header-tool-title { min-width: 0; overflow: hidden; }
.item-header-copy .header-tool-title h1 { min-width: 0; overflow: hidden; line-height: 1.15; text-overflow: ellipsis; }
.item-header-description { width: 100%; margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.item-header-meta { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.item-header-meta:empty { display: none; }
.item-meta-sep { color: rgba(255,255,255,.24); }
.item-meta-access.members { color: var(--gold); }
.item-meta-access.free { color: #9db9e5; }
/* The wordmark's diamond sits at 54.14% of its width, not at 50%, so centring
   the image leaves the mark the eye actually reads as centre pushed to the
   right. The logo is nudged back by that difference to land the diamond on the
   same axis as the switch below it. */
.header-brand { --logo-diamond-offset: 4.14%; justify-self: center; display: grid; place-items: center; gap: 3px; }
.brand-logo { transform: translateX(calc(-1 * var(--logo-diamond-offset))); }.header-brand-link { justify-content: center; }.header-population { padding: 0; display: flex; align-items: center; gap: 5px; border: 0; color: var(--muted); background: transparent; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.header-population span { color: var(--text); font-size: 10px; font-weight: 800; }.header-population b { color: var(--blue); }.header-population:hover, .header-population:focus-visible { outline: 0; color: var(--blue); }
/* OSRS publishes both sides of the book live, so the manual price-recording
   rail has nothing to add there and the chart takes the full width. */
html[data-manual-price-checks="false"] .research-rail { display: none; }
html[data-manual-price-checks="false"] .trading-workspace { grid-template-columns: minmax(0, 1fr); }
.last-trade.stale { color: var(--muted); }
/* Trade balance: a centre-anchored weight bar with the reading beneath it, so
   the lean is legible at a glance and the number says how far. */
.trade-balance { display: grid; gap: 3px; justify-items: center; }
.trade-balance b { font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.trade-balance-track { position: relative; width: 100%; max-width: 92px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
/* The centre tick is the zero line the bar grows away from. */
.trade-balance-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.28); }
.trade-balance-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.trade-balance.buy b { color: #7aa9ff; }
.trade-balance.buy i { background: #7aa9ff; }
.trade-balance.sell b { color: #e3b34c; }
.trade-balance.sell i { background: #e3b34c; }
.trade-balance.balanced b { color: #30d58a; }
.trade-balance.balanced i { background: rgba(48,213,138,.55); }
.trade-balance.no-trades { color: var(--muted); }
.population-modal-heading { display: flex; align-items: center; gap: 14px; }
.population-modal-logo { width: 52px; height: 52px; flex: none; object-fit: contain; mix-blend-mode: screen; }
/* The switch sits centred over the player-count link so the game reads first
   and the number it qualifies sits directly beneath it. */
.header-brand-controls { display: grid; justify-items: center; gap: 4px; }
/* Two equal tracks rather than content-sized halves: OSRS is a wider word than
   RS3, and letting it win would put the divide off the control's centre. */
.game-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.34); }
.game-option { padding: 3px 9px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-align: center; }
.game-option:hover { color: var(--text); background: rgba(255,255,255,.06); }
.game-option.active { color: #17130a; background: var(--gold); }
.game-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.kicker { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 7px; }
.market-shell { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
.market-heading { min-height: 82px; display: flex; justify-content: space-between; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.market-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.stats { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stats > div, .stats > button { min-width: 112px; padding: 13px 18px; display: grid; gap: 3px; border: 0; border-left: 1px solid var(--line); color: var(--text); background: transparent; text-align: left; }
.stats > :first-child { border-left: 0; }
.stats span { font-size: 18px; font-weight: 700; }
.stats small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.stats .population-trigger { min-width: 148px; position: relative; }
.stats .population-trigger small { display: flex; align-items: center; gap: 5px; }
.stats .population-trigger b { color: var(--blue); font-size: 10px; transition: transform .15s ease; }
.stats .population-trigger:hover, .stats .population-trigger:focus-visible { outline: 0; background: rgba(122,169,255,.08); box-shadow: inset 0 -2px 0 var(--blue); }
.stats .population-trigger:hover span, .stats .population-trigger:focus-visible span { color: #b9d0ff; }
.stats .population-trigger:hover b { transform: translate(1px,-1px); }
.toolbar { padding: 10px 12px; display: grid; grid-template-columns: auto auto minmax(250px, 1fr) auto; gap: 8px; border-bottom: 1px solid var(--line-soft); background: #0b1017; align-items: center; }
.toolbar > label:not(.search-box) { display: grid; gap: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.search-box { height: 42px; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; gap: 10px; padding: 0 13px; color: var(--muted); background: var(--surface-2); }
.search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,189,56,.08); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
select { height: 42px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-2); padding: 0 33px 0 12px; }
.filter-toggle { position: relative; width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-2); }
.filter-toggle svg { width: 17px; height: 17px; fill: currentColor; }
.filter-toggle:hover, .filter-toggle[aria-expanded="true"], .filter-toggle.has-filters { color: var(--gold); border-color: rgba(245,189,56,.48); background: var(--gold-soft); }
.filter-toggle b { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 999px; color: #17130a; background: var(--gold); font-size: 8px; }
.market-watchlist-picker { position: relative; min-width: 185px; }
.market-watchlist-picker-toggle { width: 100%; height: 42px; padding: 0 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid #2b384a; border-radius: 7px; color: var(--text); background: linear-gradient(180deg,#162130 0%,#101925 48%,#0b121b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), inset 0 -1px 0 rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); text-align: left; }
.watchlist-trigger-star { color: #748197; font-size: 16px; text-shadow: 0 1px 0 #000; }.watchlist-trigger-copy { min-width: 0; display: grid; gap: 2px; }.watchlist-trigger-copy strong { overflow: hidden; font-size: 9px; letter-spacing: .075em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }.watchlist-trigger-copy small { overflow: hidden; color: #8190a6; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.watchlist-trigger-chevron { width: 13px; height: 13px; display: block; color: #69778c; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(calc(var(--chevron-turns, 0) * 180deg)); transition: transform .22s ease; }
.market-watchlist-picker-toggle:hover { border-color: #43536a; background: linear-gradient(180deg,#1a2738,#101925); }.market-watchlist-picker-toggle[aria-expanded="true"] { border-color: rgba(245,189,56,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(245,189,56,.065); }.market-watchlist-picker-toggle.has-selection .watchlist-trigger-star { color: var(--gold); }
.market-watchlist-menu { position: fixed; z-index: 80; width: min(340px, calc(100vw - 16px)); overflow: hidden; border: 1px solid #344156; border-radius: 9px; background: #0b121b; box-shadow: 0 18px 46px rgba(0,0,0,.55); }.market-watchlist-menu[data-placement="below"] { transform-origin: top left; }.market-watchlist-menu[data-placement="above"] { transform-origin: bottom left; }
.market-watchlist-create { padding: 8px; display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 6px; border-bottom: 1px solid var(--line-soft); }.market-watchlist-create input { width: 100%; height: 34px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #080d14; outline: 0; font-size: 10px; }.market-watchlist-create input:focus { border-color: var(--gold); }.market-watchlist-create button { height: 34px; padding: 0 10px; border: 1px solid rgba(245,189,56,.38); border-radius: 7px; color: var(--gold); background: var(--gold-soft); font-size: 9px; font-weight: 800; }
.watchlist-menu-caption { padding: 8px 12px 5px; color: #78869b; font-size: 8px; letter-spacing: .035em; }.market-watchlist-options { max-height: 232px; padding: 0 5px 5px; overflow-y: auto; overscroll-behavior: contain; }.market-watchlist-option { min-height: 40px; padding: 5px 8px; display: flex; align-items: center; gap: 9px; border-radius: 6px; cursor: pointer; }.market-watchlist-option:hover { background: var(--surface-3); }.market-watchlist-option input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--gold); }.market-watchlist-option span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 1; }.market-watchlist-option strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.market-watchlist-option small { color: var(--muted); font-size: 8px; white-space: nowrap; }.market-watchlist-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 10px; }
.row-watchlist-popover { position: fixed; z-index: 80; width: min(320px, calc(100vw - 16px)); overflow: hidden; border: 1px solid #344156; border-radius: 9px; background: #0b121b; box-shadow: 0 20px 54px rgba(0,0,0,.62); }.row-watchlist-popover[data-placement="below"] { transform-origin: top left; }.row-watchlist-popover[data-placement="above"] { transform-origin: bottom left; }.row-watchlist-heading { min-height: 48px; padding: 8px 11px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg,#111c2a,#0c141e); }.row-watchlist-heading > span { color: var(--gold); font-size: 16px; }.row-watchlist-heading > div { min-width: 0; display: grid; gap: 2px; }.row-watchlist-heading strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.row-watchlist-heading small { color: var(--muted); font-size: 8px; }.row-watchlist-popover .market-watchlist-options { max-height: 210px; padding-top: 5px; }
.toolbar-pagination { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.page-size-control { height: 42px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.page-size-control select { width: 66px; height: 34px; padding: 0 22px 0 8px; border-radius: 7px; }
.toolbar-pagination .pagination { min-height: 0; flex: 0 0 auto; justify-content: flex-end; gap: 5px; background: transparent; }
.toolbar-pagination .pagination button { height: 34px; min-width: 34px; padding: 0 8px; }
.toolbar-pagination .pagination span { padding: 0 2px; }
.table-meta { min-height: 43px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.table-meta-leading { min-width: 0; display: flex; align-items: center; gap: 9px; }
.table-config { position: relative; flex: 0 0 auto; }
.table-config-toggle { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: #8d9aad; background: #111a26; }
.table-config-toggle svg { width: 15px; height: 15px; fill: currentColor; }.table-config-toggle:hover, .table-config-toggle[aria-expanded="true"] { color: var(--gold); border-color: rgba(245,189,56,.5); background: var(--gold-soft); }
.table-config-menu { position: absolute; z-index: 55; top: calc(100% + 6px); left: 0; width: 270px; overflow: hidden; border: 1px solid #344156; border-radius: 9px; color: var(--text); background: #0b121b; box-shadow: 0 18px 46px rgba(0,0,0,.58); }
.table-config-heading, .saved-filter-heading { padding: 10px 12px; display: grid; gap: 3px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg,#111c2a,#0c141e); }.table-config-heading { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }.table-config-heading-copy { min-width: 0; display: grid; gap: 3px; }.table-config-heading strong, .saved-filter-heading strong { font-size: 11px; }.table-config-heading small, .saved-filter-heading small { color: var(--muted); font-size: 8px; }
.cursor-selector { width: 112px; display: grid; gap: 2px; color: #647286; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.cursor-selector select { width: 100%; height: 24px; padding: 0 20px 0 6px; border: 1px solid #2a3547; border-radius: 5px; color: #8794a6; background-color: #0c141e; font-size: 8px; opacity: .72; }.cursor-selector:hover select, .cursor-selector select:focus-visible { color: #c6cfdb; border-color: #526078; opacity: 1; }
.table-config-options { max-height: 330px; padding: 5px; overflow-y: auto; }.table-config-option { min-height: 34px; padding: 5px 8px; display: flex; align-items: center; gap: 9px; border-radius: 6px; color: #b9c3d1; cursor: pointer; }.table-config-option:hover { background: var(--surface-3); }.table-config-option input { width: 15px; height: 15px; accent-color: var(--gold); }.table-config-option input:disabled { opacity: .45; }.table-config-option span { flex: 1; font-size: 10px; }.table-config-option small { color: #66758a; font-size: 8px; }
.table-config-reset { width: 100%; height: 36px; border: 0; border-top: 1px solid var(--line-soft); color: #9aa7b9; background: #0e1722; font-size: 9px; font-weight: 750; }.table-config-reset:hover { color: var(--gold); background: var(--gold-soft); }
#source-state.stale { color: var(--red); }
.table-viewport { position: relative; flex: 1; min-height: 0; display: flex; }
.table-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; scrollbar-width: none; }
.table-wrap::-webkit-scrollbar { width: 0; height: 0; }
/* Proxy scroll rails: real scrollers parked where the bars belong, so the vertical bar starts below the sticky header. */
.table-rail { position: absolute; z-index: 19; display: none; }
.table-rail > div { width: 1px; height: 1px; }
.table-rail-y { top: var(--table-head-height, 48px); right: 0; bottom: 0; width: 15px; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; }
/* The header row runs on across the reserved rail so it never stops short of the panel edge. */
.table-rail-cap { position: absolute; z-index: 6; top: 0; right: 0; width: 15px; height: var(--table-head-height, 48px); display: none; background: #121b28; box-shadow: 0 1px 0 var(--gold); pointer-events: none; }
.table-viewport.has-rail-y .table-rail-cap { display: block; }
.table-rail-x { left: 0; right: 0; bottom: 0; height: 15px; overflow-x: scroll; overflow-y: hidden; overscroll-behavior: contain; }
.table-viewport.has-rail-y .table-rail-y, .table-viewport.has-rail-x .table-rail-x { display: block; }
.table-viewport.has-rail-y .table-wrap { padding-right: 15px; }
.table-viewport.has-rail-x .table-wrap { padding-bottom: 15px; }
.table-viewport.has-rail-x .table-rail-y { bottom: 15px; }
.table-viewport.has-rail-y .table-rail-x { right: 15px; }
table { width: 100%; min-width: 1320px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.market-table { min-width: 1449px; table-layout: fixed; }
.market-col-chart { width: 44px; }.market-col-watch { width: 44px; }.market-col-item { width: 290px; }.market-col-guide { width: 150px; }.market-col-previous { width: 155px; }.market-col-change { width: 110px; }.market-col-volume { width: 125px; }.market-col-traded { width: 135px; }.market-col-limit { width: 105px; }.market-col-alch { width: 110px; }.market-col-edge { width: 115px; }.market-col-membership { width: 76px; }.market-col-wiki { width: 88px; }
thead { position: sticky; top: 0; z-index: 5; background: #121b28; box-shadow: 0 1px 0 var(--gold); }
th { height: 48px; padding: 0 13px; text-align: right; color: #a9b4c4; font-size: 10px; text-transform: uppercase; letter-spacing: .065em; white-space: nowrap; }
.market-table thead > tr:first-child > th:not(:last-child) { border-right: 1px solid rgba(38,51,70,.52); }
.market-table [data-column="item"] { text-align: left; }
th button { color: inherit; background: none; border: 0; padding: 0; text-transform: inherit; letter-spacing: inherit; font-weight: 700; }
th button:hover, th button.active { color: var(--gold); }
/* A header cell is two zones: a grab strip on top for reordering, and everything
   underneath it as one sort target. */
.market-header-cell, .recipe-header-cell { position: relative; padding: 15px 13px 0; user-select: none; }
.column-grip { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 15px; cursor: grab; background: linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,0)); transition: background .12s ease; }
.column-grip::after { content: ""; position: absolute; top: 4px; left: 50%; width: 24px; height: 7px; opacity: .4; background: radial-gradient(circle, #718096 1.35px, transparent 1.6px) 0 0 / 8px 8px; transform: translateX(-50%); transition: opacity .12s ease, background-image .12s ease; }
.column-grip:hover { background: linear-gradient(180deg, rgba(245,189,56,.2), rgba(245,189,56,.02)); }
.column-grip:hover::after { opacity: 1; background-image: radial-gradient(circle, var(--gold) 1.35px, transparent 1.6px); }
.column-grip:active { cursor: grabbing; }
.market-header-cell:has(> button), .recipe-header-cell:has(> button), .recipe-header-cell:has(> .recipe-sort-heading) { padding: 0; }
.market-header-cell > button, .recipe-header-cell > button { display: block; width: 100%; min-height: 48px; padding: 15px 13px 0; text-align: inherit; cursor: pointer; }
.market-header-cell > button:hover, .recipe-header-cell > button:hover { color: var(--gold); background: rgba(245,189,56,.05); }
.recipe-header-cell > .recipe-sort-heading { display: flex; width: 100%; min-height: 48px; padding: 15px 13px 0; justify-content: flex-end; align-items: center; }
.recipe-header-cell > .recipe-sort-heading > button { flex: 1; align-self: stretch; text-align: right; padding-top: 0; }
.market-table.column-drag-active .column-grip, .recipe-table.column-drag-active .column-grip { cursor: grabbing; }
.market-table.column-drag-active, .recipe-table.column-drag-active { cursor: grabbing; }
.market-table.column-drag-active .column-drag-source, .recipe-table.column-drag-active .column-drag-source { opacity: .42; background: rgba(245,189,56,.07); box-shadow: inset 1px 0 rgba(245,189,56,.2), inset -1px 0 rgba(245,189,56,.2); }
.market-table.column-drag-active .column-drop-target, .recipe-table.column-drag-active .column-drop-target { background: rgba(245,189,56,.1); }
.column-drop-indicator { position: absolute; z-index: 12; width: 3px; pointer-events: none; background: var(--gold); box-shadow: 0 0 0 1px rgba(8,11,16,.8), 0 0 12px rgba(245,189,56,.7); transform: translateX(-1px); }
.column-drop-indicator::before, .column-drop-indicator::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); transform: translateX(-50%) rotate(45deg); }
.column-drop-indicator::before { top: 0; }.column-drop-indicator::after { bottom: 0; }
.column-drag-preview { position: fixed; top: -1000px; left: -1000px; z-index: 999; height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid rgba(245,189,56,.72); border-radius: 7px; color: #f7d77e; background: #111b29; box-shadow: 0 10px 28px rgba(0,0,0,.55); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.market-header-cell [data-sort] span { display: inline-block; min-width: 9px; color: #64748a; }.market-header-cell [data-sort].active span { color: var(--gold); }
.column-filter-row { background: #0c131d; box-shadow: inset 0 1px 0 var(--line-soft), 0 1px 0 var(--gold); }
.column-filter-row th { height: 46px; padding: 6px 4px; border-top: 1px solid #1f2a39; }
.column-filter-row th[data-numeric-filter] { padding: 6px 8px; }
.column-filter-row th[data-column="membership"] { padding: 6px 8px; }
.filter-row-spacer { text-align: right; }
.filter-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.filter-row-spacer #filter-reset { width: 27px; height: 27px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #111a26; font-size: 14px; }
.filter-row-spacer #filter-reset:hover { color: var(--gold); border-color: var(--gold); }
/* Filter command centre: saved views on the left, the active game's filterable
   columns on the right, and the two commit actions in the footer. Base colours
   mirror .market-watchlist-menu so both panels theme identically. */
.filter-popover { position: fixed; z-index: 80; width: min(760px, calc(100vw - 16px)); display: grid; overflow: hidden; border: 1px solid #344156; border-radius: 9px; color: var(--text); background: #0b121b; box-shadow: 0 18px 46px rgba(0,0,0,.55); text-align: left; text-transform: none; letter-spacing: 0; }
.filter-popover[data-placement="below"] { transform-origin: top left; }.filter-popover[data-placement="above"] { transform-origin: bottom left; }
.filter-popover-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
.filter-views { display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--line-soft); }
.filter-fields { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.filter-section-heading { padding: 10px 12px; display: grid; gap: 3px; border-bottom: 1px solid var(--line-soft); }
.filter-section-heading strong { font-size: 11px; }
.filter-section-heading small { color: var(--muted); font-size: 8px; }
.filter-field-scroll { max-height: 330px; padding: 8px 12px 12px; overflow-y: auto; overscroll-behavior: contain; }
.filter-field-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 9px 14px; }
.filter-field-row { min-width: 0; display: grid; gap: 4px; }
.filter-field-row label { display: flex; align-items: baseline; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.filter-field-row label em { color: var(--gold); font-style: normal; }
.filter-field-row label small { color: #6f6a61; font-size: 7px; letter-spacing: .04em; text-transform: none; }
.filter-field-inputs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
.filter-field-row.max-only .filter-field-inputs, .filter-field-access .filter-field-inputs { grid-template-columns: minmax(0,1fr); }
.filter-field-inputs input, .filter-field-inputs select, .filter-popover-save input { width: 100%; height: 34px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: #080d14; font-size: 10px; }
.filter-field-inputs input:focus, .filter-field-inputs select:focus, .filter-popover-save input:focus { border-color: var(--gold); }
.filter-field-access { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.filter-popover-actions { padding: 9px 12px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); }
.filter-popover-save { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; justify-self: end; }
.filter-popover-save input { width: 190px; }
/* Same plate as the watchlist's + Add so the panels read as one family. */
.filter-popover-actions button { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: transparent; font-size: 9px; font-weight: 800; }
/* Scoped past `.filter-popover-actions button` above, which would otherwise
   out-specify these and flatten every button to the neutral plate. */
.filter-popover-actions .filter-action-reset { color: var(--muted); }
.filter-popover-actions .filter-action-save,
.filter-popover-actions .filter-action-apply { border-color: rgba(245,189,56,.38); color: var(--gold); background: var(--gold-soft); }
.filter-popover-actions .filter-action-apply { color: var(--brand-gold-bright); border-color: var(--brand-border-strong); }
.filter-action-apply span { margin-left: 5px; }
.saved-filter-picker { position: relative; min-width: 0; }.saved-filter-toggle { max-width: 174px; height: 27px; padding: 0 8px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: linear-gradient(180deg,#151a17,#0e1210); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); text-transform: none; letter-spacing: 0; }.saved-filter-toggle > span { color: var(--gold); font-size: 10px; }.saved-filter-toggle > b { min-width: 0; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.saved-filter-toggle:hover { border-color: var(--brand-border); background: linear-gradient(180deg,#1b211c,#0e1210); }.saved-filter-toggle[aria-expanded="true"], .saved-filter-toggle.has-selection { border-color: var(--brand-border-strong); color: var(--brand-gold-bright); background: var(--gold-soft); }
.saved-filter-menu { position: absolute; z-index: 60; top: calc(100% + 7px); left: 0; width: 320px; overflow: hidden; border: 1px solid #3a4760; border-radius: 9px; color: var(--text); background: #0b121b; box-shadow: 0 20px 54px rgba(0,0,0,.62); text-align: left; text-transform: none; letter-spacing: 0; }
.saved-filter-create { padding: 8px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; border-bottom: 1px solid var(--line-soft); }.saved-filter-create input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--text); background: #080d14; font-size: 10px; }.saved-filter-create input:focus { border-color: var(--brand-border-strong); }.saved-filter-create button { height: 34px; padding: 0 12px; border: 1px solid var(--brand-border-strong); border-radius: 6px; color: var(--brand-gold-bright); background: var(--gold-soft); font-size: 9px; font-weight: 800; }.saved-filter-create button:hover { border-color: var(--gold); background: rgba(238,184,69,.2); }
.saved-filter-options { max-height: 230px; padding: 5px; overflow-y: auto; }.saved-filter-empty { padding: 18px; color: var(--muted); font-size: 9px; text-align: center; }.saved-filter-option { min-height: 42px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; border-radius: 6px; }.saved-filter-option:hover, .saved-filter-option.active { background: var(--gold-soft); }.saved-filter-option > button:first-child { min-width: 0; padding: 6px 8px; display: grid; gap: 2px; color: var(--text); text-align: left; text-transform: none; letter-spacing: 0; }.saved-filter-option > button:first-child strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.saved-filter-option > button:first-child small { color: var(--muted); font-size: 8px; }.saved-filter-option.active > button:first-child strong { color: var(--brand-gold-bright); }.saved-filter-option .saved-filter-delete { width: 32px; color: var(--muted); font-size: 13px; }.saved-filter-option .saved-filter-delete:hover { color: var(--red); }
.header-filter-control { min-width: 0; padding: 2px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; border: 1px solid #263346; border-radius: 6px; background: #111a26; }
.header-filter-control.single { grid-template-columns: minmax(0, 1fr); }
.header-filter-control input, .header-access-filter select { width: 100%; height: 28px; min-width: 0; border: 1px solid var(--line); border-radius: 4px; outline: 0; font-size: 9px; }
.header-filter-control input { padding: 0 7px; color: var(--text); background: #080d14; }
.header-access-filter select { padding: 0 20px 0 7px; color: #b7c1cf; background: #101925; }
.header-filter-control input:focus, .header-access-filter select:focus { border-color: var(--gold); }
.column-filter-row th.has-filter { background: rgba(245,189,56,.045); }
.column-filter-row th.has-filter .header-filter-control input { border-color: rgba(245,189,56,.34); }
.header-access-filter { min-width: 0; }
td { height: 58px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
tbody tr { background: var(--surface); transition: background .12s ease; }
tbody tr:nth-child(odd) { background: #111925; }
tbody tr:hover { background: var(--surface-3); }

.watch-col { width: 44px; text-align: center; }
/* Quick chart column: the button expands the shared item workspace under its row. */
.chart-col { width: 44px; text-align: center; }
.chart-column-glyph, .quick-chart-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.market-header-cell.chart-col .chart-column-glyph { color: var(--muted); vertical-align: middle; }
.quick-chart-button { width: 27px; height: 27px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-2); }
.quick-chart-button:hover, .quick-chart-button:focus-visible { outline: 0; color: var(--gold); border-color: rgba(245,189,56,.55); background: var(--gold-soft); }
.quick-chart-button.active { color: var(--gold); border-color: rgba(245,189,56,.62); background: linear-gradient(180deg, rgba(129,80,9,.38), rgba(55,34,6,.3)); box-shadow: inset 0 0 14px rgba(222,139,18,.14), 0 0 12px rgba(222,139,18,.1); }
.quick-view-row > .quick-view-cell { padding: 0; background: #060a10; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--line); }
.quick-view-row:hover > .quick-view-cell { background: #060a10; }
.quick-view-frame { position: sticky; left: 0; padding: 4px; display: flex; overflow: hidden; overscroll-behavior: contain; }
/* The row shows the chart and the two submit forms only. The item page keeps the
   topbar, the timeframe controls and the submission tabs. */
.quick-view-frame .workspace-topbar, .quick-view-frame .chart-controls, .quick-view-frame .rail-tabs { display: none; }
/* Its height is set from the window, so every band inside flexes instead of stacking. */
.quick-view-frame .item-detail-shell { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.quick-view-frame .trading-workspace { flex: 1; min-height: 0; align-items: stretch; }
.quick-view-frame .workspace-chart, .quick-view-frame .chart-card, .quick-view-frame .chart-wrap { min-height: 0; display: flex; flex-direction: column; }
.quick-view-frame .workspace-chart, .quick-view-frame .chart-card { flex: 1; }
.quick-view-frame .chart-card { border-bottom: 0; }
.quick-view-frame .chart-wrap { flex: 1; }
.quick-view-frame #price-chart { flex: 1; min-height: 0; }
.quick-view-frame .research-rail { min-height: 0; display: flex; flex-direction: column; }
.quick-view-frame .rail-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.quick-view-frame .rail-section { border-bottom: 0; }
.watch-button { width: 31px; height: 31px; border-radius: 8px; border: 0; color: #748197; background: transparent; font-size: 20px; }
.watch-button:hover, .watch-button.watched { color: var(--gold); background: var(--gold-soft); }
.item-cell { display: flex; align-items: center; gap: 11px; min-width: 250px; cursor: pointer; }
.item-cell img { width: 34px; height: 34px; object-fit: contain; image-rendering: auto; }
.item-cell strong { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.item-cell small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.price { font-weight: 700; }
.previous-price { color: #a9b4c4; font-weight: 650; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.neutral { color: var(--muted); }
.change-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.change-badge.positive { background: var(--green-soft); }
.change-badge.negative { background: var(--red-soft); }
.member-badge { display: inline-flex; border: 1px solid var(--line); color: var(--muted); border-radius: 5px; padding: 4px 6px; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.member-icon, .member-icon-split { display: inline-block; vertical-align: middle; image-rendering: auto; }
.member-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.market-table td[data-column="membership"], .market-table th[data-column="membership"], .market-table td[data-column="wiki"], .market-table th[data-column="wiki"] { text-align: center; }
.member-badge.member { color: var(--gold); border-color: rgba(245,189,56,.3); background: var(--gold-soft); }
.wiki-link { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.wiki-link:hover, .wiki-link:focus-visible { outline: 0; color: var(--gold); border-color: rgba(245,189,56,.5); background: var(--gold-soft); }
.loading { min-height: 230px; display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--muted); }
.loading span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: bounce 1s infinite alternate; }
.loading span:nth-child(2) { animation-delay: .16s; }.loading span:nth-child(3) { animation-delay: .32s; margin-right: 7px; }
@keyframes bounce { to { opacity: .25; transform: translateY(-7px); } }
.empty { text-align: center; color: var(--muted); height: 200px; }
.pagination { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 7px; background: #0b1017; }
.pagination button { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.pagination button:hover:not(:disabled), .pagination button.active { color: #17130a; border-color: var(--gold); background: var(--gold); }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination span { color: var(--muted); padding: 0 6px; }

.item-detail-page { width: 100%; margin: 0; padding: 4px 4px 24px; }
.item-detail-shell { overflow: hidden; border: 0; border-radius: 0; background: #090e15; box-shadow: none; }
.workspace-topbar { min-height: 56px; padding: 6px 16px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #0b121b; }
.item-back { height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: 11px; font-weight: 750; white-space: nowrap; }
.item-back:hover { color: var(--gold); border-color: rgba(245,189,56,.5); background: var(--gold-soft); }
.item-title-row { min-width: 0; display: grid; grid-template-columns: 40px 40px 40px minmax(0, 1fr); align-items: center; gap: 8px; }
.watch-star { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1; }
.watch-star:hover, .watch-star:focus-visible { color: var(--gold); border-color: rgba(245,189,56,.55); background: var(--gold-soft); outline: 0; }
.watch-star.watched { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.metric-swap { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-2); font-size: 18px; line-height: 1; transition: color .16s ease, border-color .16s ease, transform .22s ease; }
.metric-swap:hover, .metric-swap:focus-visible, .metric-swap[aria-pressed="true"] { color: var(--gold); border-color: rgba(245,189,56,.55); outline: 0; }.metric-swap[aria-pressed="true"] { transform: rotate(180deg); }
.external-link-box { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-2); transition: color .16s ease, border-color .16s ease, background .16s ease; }
.external-link-box svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.external-link-box:hover, .external-link-box:focus-visible { color: var(--gold); border-color: rgba(245,189,56,.55); background: var(--gold-soft); outline: 0; }
.metric-deck { position: relative; min-width: 0; align-self: stretch; margin: -6px -16px -6px 0; overflow: hidden; background: var(--line); }
.metric-deck-face { position: absolute; inset: 0; display: grid; gap: 1px; background: var(--line); overflow-x: auto; transition: transform .32s cubic-bezier(.2,.78,.24,1); will-change: transform; }
.detail-metrics { grid-template-columns: repeat(7, minmax(92px, 1fr)); transform: translateY(0); }
.indicator-metrics { grid-template-columns: repeat(6, minmax(110px, 1fr)); transform: translateY(-100%); }
.metric-deck.show-indicators .item-metric-face { transform: translateY(100%); }
.metric-deck.show-indicators .indicator-metric-face { transform: translateY(0); }
.metric { min-width: 0; display: grid; align-content: center; background: #0c131d; padding: 6px 12px; }
.metric small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; text-overflow: ellipsis; white-space: nowrap; }
.metric strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.metric em { display: block; margin-top: 3px; overflow: hidden; color: #718096; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.core-tooltip { position: fixed; z-index: 120; width: max-content; max-width: min(460px, calc(100vw - 24px)); padding: 9px 11px; border: 1px solid #41536b; border-radius: 8px; color: #d6deea; background: #111a26; box-shadow: 0 14px 36px rgba(0,0,0,.58); font-size: 10px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease; }
.core-tooltip.visible { opacity: 1; transform: translateY(0); }
.trading-workspace { min-height: 710px; display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start; }
.workspace-chart { min-width: 0; }

.chart-card { border: 0; border-bottom: 1px solid var(--line); background: #070a09; overflow: hidden; }
.chart-controls { padding: 14px 18px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-soft); background: #0c100d; }
.timeframe-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #080c12; }
.timeframe-tabs button { height: 31px; min-width: 47px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }
.timeframe-tabs button:hover { color: var(--text); }.timeframe-tabs button.active { color: #17130a; background: var(--gold); }
.overlay-controls { display: flex; gap: 9px; }
.overlay-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.overlay-controls select { height: 34px; min-width: 106px; font-size: 10px; padding-left: 10px; }
.control-label { display: inline-flex; align-items: center; gap: 5px; }
.info-tooltip-trigger { width: 14px; height: 14px; padding: 0; border: 1px solid #516783; border-radius: 50%; display: inline-grid; place-items: center; color: #9db9e5; background: transparent; font: 800 9px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.info-tooltip-trigger:hover, .info-tooltip-trigger:focus-visible { color: #d8e7ff; border-color: var(--blue); background: rgba(122,169,255,.12); outline: 0; }
.chart-heading { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 5px 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2px 14px; pointer-events: none; }
.chart-heading .kicker { flex: 0 0 auto; margin: 0; font-size: 9px; line-height: 1.5; letter-spacing: .1em; white-space: nowrap; }
.chart-heading h3 { margin: 0; font-size: 17px; }
/* Only the quick view needs a way out to the item page; the page is already there. */
.chart-open-item { display: none; }
.quick-view-frame .chart-open-item { position: absolute; z-index: 3; top: 4px; left: 8px; height: 21px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border: 1px solid rgba(245,189,56,.5); border-radius: 5px; color: var(--gold); background: var(--gold-soft); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: auto; }
.quick-view-frame .chart-open-item:hover, .quick-view-frame .chart-open-item:focus-visible { outline: 0; color: #17130a; border-color: var(--gold); background: var(--gold); }
/* The range label shifts to the daily observation box's edge, clearing that corner. */
.quick-view-frame .chart-heading { padding-left: max(6.8%, 77px); }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1px 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.legend span::before { content: ""; width: 13px; height: 2px; background: var(--gold); display: inline-block; vertical-align: middle; margin-right: 5px; }
.legend .series-price-key::before { background: var(--gold); }
.legend .series-buy-key::before { background: var(--insta-buy); }
.legend .series-sell-key::before { background: var(--insta-sell); }
/* The SMA is drawn dashed on the chart, so its key is dashed too. */
.legend .average-key::before { height: 0; background: none; border-top: 2px dashed var(--sma); }
.legend .band-key::before { height: 7px; background: rgba(122,169,255,.14); border: 1px solid rgba(122,169,255,.3); }
.legend .recent-key::before { background: #62d8ff; }.legend .target-buy-key::before { background: #30d58a; }.legend .target-sell-key::before { background: #ff5b6e; }
.legend .volume-key::before { background: var(--chart-volume); height: 7px; opacity: .8; }
.chart-wrap { position: relative; width: 100%; }
#price-chart { width: 100%; min-height: 300px; display: block; touch-action: none; cursor: crosshair; }
/* The observation readout floats on the chart under the range/legend row, so it
   costs no vertical space and never blocks the crosshair. */
.chart-inspector { position: absolute; z-index: 2; top: 27px; left: 6.8%; right: 10.5%; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); align-items: center; column-gap: 12px; row-gap: 1px; padding: 4px 11px; border: 1px solid rgba(146,96,24,.42); border-radius: 6px; color: var(--muted); background: rgba(7,10,9,.82); font-variant-numeric: tabular-nums; pointer-events: none; }
.chart-inspector > div { min-width: 0; padding: 0; display: flex; align-items: baseline; gap: 6px; border-left: 0; }
/* Each label owns its slot, so a longer reading never nudges its neighbours. */
.chart-inspector small, .inspector-date span { flex: 0 0 auto; }
.chart-inspector strong { min-width: 0; flex: 1 1 auto; }
.inspector-prompt { grid-column: 1 / -1; grid-row: 1 / span 2; }
.chart-inspector small, .inspector-date span { overflow: hidden; color: #78879a; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.chart-inspector strong { overflow: hidden; color: #eef2f8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* Every cell is placed explicitly so a value always sits above its opposite
   number, whatever the active game leaves out. */
.chart-inspector .ic2 { grid-column: 2; }.chart-inspector .ic3 { grid-column: 3; }.chart-inspector .ic4 { grid-column: 4; }
.chart-inspector .ic5 { grid-column: 5; }.chart-inspector .ic6 { grid-column: 6; }
.chart-inspector .ir1 { grid-row: 1; }.chart-inspector .ir2 { grid-row: 2; }.chart-inspector .irboth { grid-row: 1 / span 2; }
/* The date owns the first column outright, so nothing wraps beneath it. */
.inspector-date { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; background: none; }
.inspector-date strong { color: var(--gold); }.inspector-value .tooltip-swatch { flex: 0 0 auto; align-self: center; }
.inspector-prompt span { color: #78879a; font-size: 10px; }
.tooltip-swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--sma); }.tooltip-swatch.price, .tooltip-swatch.series-price { background: var(--gold); }.tooltip-swatch.series-buy { background: var(--insta-buy); }.tooltip-swatch.series-sell { background: var(--insta-sell); }.tooltip-swatch.spread { border-radius: 2px; background: linear-gradient(90deg, var(--insta-buy), var(--insta-sell)); }.tooltip-swatch.average { background: var(--sma); }.tooltip-swatch.high, .tooltip-swatch.low { background: var(--blue); opacity: .55; }.tooltip-swatch.range-high, .tooltip-swatch.range-low { background: none; border: 1px solid var(--muted); }.tooltip-swatch.volume { border-radius: 2px; background: var(--chart-volume); }
.research-rail { min-width: 0; align-self: stretch; border-left: 1px solid var(--line); background: #0a1018; }
.rail-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: #080d14; }
.rail-tabs button { min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.rail-tabs button:hover, .rail-tabs button:focus-visible { color: var(--text); border-color: var(--line); outline: 0; }.rail-tabs button.active { color: var(--gold); border-color: rgba(245,189,56,.36); background: var(--gold-soft); }
.rail-tabs b { min-width: 16px; height: 16px; margin-left: 4px; display: inline-grid; place-items: center; border-radius: 999px; color: #69798d; background: #151e2b; font-size: 8px; }.rail-tabs button.has-orders b { color: #07120c; background: var(--green); }
.rail-section { padding: 18px; border-bottom: 1px solid var(--line); }
.rail-heading { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rail-heading .kicker { margin: 0 0 4px; }.rail-heading h3 { margin: 0; font-size: 15px; }
.rail-title-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.rail-title-row .info-tooltip-trigger { flex: 0 0 14px; }
.local-badge, .count-badge { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(122,169,255,.3); border-radius: 5px; color: #9fbfff; background: rgba(122,169,255,.08); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.research-disclosure { margin: -3px 0 14px; color: #7f8ca0; font-size: 10px; line-height: 1.5; }
.price-check-card { position: relative; display: grid; gap: 9px; padding: 12px; border: 1px solid #2a3749; border-radius: 9px; background: #0b121b; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.price-check-card:focus-within { border-color: #536a88; background: #0d1621; box-shadow: 0 0 0 3px rgba(83,106,136,.13); }
.recent-price-card { border-left: 3px solid rgba(98,216,255,.72); }
.recent-price-card:focus-within { border-color: rgba(98,216,255,.72); box-shadow: 0 0 0 3px rgba(98,216,255,.12); }
.instant-check-card { border-left: 3px solid rgba(48,213,138,.68); }
.instant-check-card:focus-within { border-color: rgba(48,213,138,.62); box-shadow: 0 0 0 3px rgba(48,213,138,.10); }
.check-card-heading { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; }.check-card-heading > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #34455b; border-radius: 7px; color: #9fb0c5; background: #111b28; font: 800 11px ui-monospace, monospace; }.check-card-heading > div { min-width: 0; display: grid; gap: 3px; }.check-card-heading strong { color: #e5ebf4; font-size: 12px; }.check-card-heading small { color: #748399; font-size: 8px; line-height: 1.35; }
.inline-info-label, .field-label-with-info, .metric-label-with-info { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.inline-info-label > span, .field-label-with-info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-info-label .info-tooltip-trigger, .field-label-with-info .info-tooltip-trigger, .metric-label-with-info .info-tooltip-trigger { width: 14px; height: 14px; flex: 0 0 14px; font-size: 9px; }
.recent-price-card .check-card-heading > span { color: #62d8ff; border-color: rgba(98,216,255,.34); background: rgba(98,216,255,.07); }.instant-check-card .check-card-heading > span { color: #30d58a; border-color: rgba(48,213,138,.30); background: rgba(48,213,138,.06); }
.checker-divider { height: 25px; display: grid; place-items: center; color: #5f6d80; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.checker-divider::before { content: ""; width: 100%; height: 1px; grid-area: 1 / 1; background: var(--line-soft); }.checker-divider span { z-index: 1; grid-area: 1 / 1; padding: 0 9px; background: #0a1018; }
.research-field { min-width: 0; padding: 10px 11px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #0d151f; }
.research-field > span { color: #c9d2df; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.research-field > small { color: #718096; font-size: 8px; text-align: right; }
.research-field > .field-label-with-info { grid-column: 1 / -1; justify-content: flex-start; white-space: nowrap; }
.research-field input { grid-column: 1 / -1; width: 100%; height: 37px; margin-top: 5px; padding: 0 10px; border: 1px solid #2b394c; border-radius: 5px; color: var(--text); background: #080d14; font: 700 13px ui-monospace, monospace; }
/* Compact submit fields: the card heading already names them, so the label is a
   screen-reader name and any info icon sits beside the input rather than above it. */
.research-field.compact, .research-field.compact-solo { align-items: center; }
.research-field.compact input, .research-field.compact-solo input { margin-top: 0; }
.research-field.compact input { grid-column: 1; }
.research-field.compact > .info-tooltip-trigger { grid-column: 2; width: 15px; height: 15px; flex: 0 0 15px; font-size: 9px; }
.research-field:focus-within { border-color: #49617d; }.research-field.recent-check:focus-within { border-color: rgba(98,216,255,.55); }.research-field.sell-check:focus-within { border-color: rgba(48,213,138,.55); }.research-field.buy-check:focus-within { border-color: rgba(255,91,110,.55); }
.flip-calculation { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.flip-calculation > div { min-width: 0; padding: 10px; background: #080d14; border-right: 1px solid var(--line); }.flip-calculation > div:last-child { border-right: 0; }
.flip-calculation small { min-height: 14px; display: flex; align-items: center; margin-bottom: 5px; color: #718096; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }.flip-calculation .metric-label-with-info { display: flex; }.flip-calculation strong { font: 700 13px ui-monospace, monospace; }

.ticket-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; }.ticket-actions button { min-height: 39px; padding: 0 10px; border: 1px solid #324159; border-radius: 6px; color: #c4cedb; background: #121b27; font-size: 10px; font-weight: 800; }.ticket-actions .primary-action { border-color: #30d58a; color: #07120c; background: #30d58a; }
.rail-primary { min-height: 40px; padding: 0 12px; border: 1px solid #30d58a; border-radius: 6px; color: #07120c; background: #30d58a; font-size: 10px; font-weight: 850; }.rail-primary:disabled { cursor: not-allowed; opacity: .35; }
.recent-submit { color: #041116; border-color: #62d8ff; background: #62d8ff; }.instant-submit { color: #07120c; border-color: #30d58a; background: #30d58a; }
.research-status { min-height: 14px; margin: 0; color: #8ca0b9; font-size: 9px; }.research-status.negative { color: var(--red); }.research-status.positive { color: var(--green); }
.rail-subheading { margin: 17px 0 8px; padding-top: 13px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-soft); }.rail-subheading strong { font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }.rail-subheading small { color: #68778b; font-size: 8px; text-transform: uppercase; }
.price-submission-history { display: grid; gap: 8px; }.rail-empty { margin: 0; padding: 14px; border: 1px dashed #2b3748; border-radius: 7px; color: #69798d; font-size: 10px; text-align: center; }
.price-submission-card { position: relative; padding: 9px 26px 9px 10px; display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #0d151f; }.price-submission-card > div { min-width: 0; display: grid; gap: 3px; }.price-submission-card small { color: #718096; font-size: 7px; text-transform: uppercase; }.price-submission-card strong { overflow: hidden; font: 700 9px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.price-submission-card .recent-price { color: #62d8ff; }
.submission-remove { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; color: #66758a; background: transparent; font-size: 12px; line-height: 1; }
.submission-remove:hover, .submission-remove:focus-visible { outline: 0; color: var(--red); border-color: rgba(255,91,110,.42); background: rgba(255,91,110,.1); }
/* On the submission list the rail owns the scrolling, so the page stays put. */
.item-detail-page.rail-scroll { height: calc(100dvh - 96px); padding-bottom: 4px; overflow: hidden; }
.item-detail-page.rail-scroll .item-detail-shell { height: 100%; display: flex; flex-direction: column; }
.item-detail-page.rail-scroll .trading-workspace { min-height: 0; flex: 1; }
.item-detail-page.rail-scroll .research-rail { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.item-detail-page.rail-scroll .rail-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rail-tabs button.has-submissions b { color: #17130a; background: var(--gold); }
/* Removal confirmation. */
.confirm-dialog { width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid #33435a; border-radius: 10px; color: var(--text); background: #0b121b; box-shadow: 0 26px 70px rgba(0,0,0,.7); }
.confirm-dialog::backdrop { background: rgba(2,5,9,.72); }
.confirm-shell { padding: 18px; display: grid; gap: 10px; }
.confirm-shell h2 { margin: 0; font-size: 15px; }
.confirm-shell p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.confirm-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.confirm-remember input { width: 15px; height: 15px; accent-color: var(--gold); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.confirm-actions button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface-2); font-size: 10px; font-weight: 800; }
.confirm-actions .confirm-accept { color: #1b0709; border-color: var(--red); background: var(--red); }
.watchlist-form { display: grid; grid-template-columns: 1fr 36px; gap: 6px; }.watchlist-form input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #080d14; }.watchlist-form button { border: 1px solid var(--line); border-radius: 6px; color: var(--gold); background: #121b27; font-size: 18px; }
.item-watchlists { margin-top: 9px; display: grid; gap: 5px; }.watchlist-row { min-height: 38px; padding: 7px 9px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 6px; color: #aeb9c8; background: #0d151f; font-size: 10px; }.watchlist-row input { width: 15px; height: 15px; accent-color: var(--gold); }.watchlist-row > span { min-width: 0; display: grid; gap: 2px; }.watchlist-row small { color: #65758a; }.watchlist-row button { border: 0; color: #65758a; background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.population-dialog { width: min(980px, calc(100% - 28px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid #33435a; border-radius: 14px; color: var(--text); background: #090e15; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.population-dialog::backdrop { background: rgba(2,5,9,.76); backdrop-filter: blur(5px); }
.population-modal-shell { min-width: 0; overflow: hidden; }
.population-modal-header { min-height: 88px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: #0c131d; }
.population-modal-header h2 { font-size: 24px; }.population-modal-header p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.population-modal-header > button { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: 22px; }.population-modal-header > button:hover { color: var(--text); border-color: #52657f; }
.population-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #0a1018; }
.population-summary > div { min-width: 0; min-height: 78px; padding: 12px 16px; display: grid; align-content: center; gap: 4px; border-right: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }.population-summary > div:last-child { border-right: 0; }
.population-summary small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.population-summary strong { font-size: 18px; }.population-summary span { overflow: hidden; color: #6f7d91; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.population-chart-controls { min-height: 51px; padding: 8px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-soft); background: #0c121b; }
.population-chart-controls > span { color: var(--muted); font-size: 9px; text-align: right; }
.population-inspector { min-height: 52px; margin: 11px 16px 0; padding: 0 13px; display: flex; align-items: center; gap: 0; overflow: hidden; border: 1px solid #29364a; border-radius: 8px; color: #78879a; background: #0d141e; font-variant-numeric: tabular-nums; }
.population-inspector > span { font-size: 10px; }.population-inspector > div { min-width: 0; padding: 8px 16px; display: grid; gap: 3px; border-left: 1px solid #29364a; }.population-inspector > div:first-child { padding-left: 0; border-left: 0; }.population-inspector small { color: #718096; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }.population-inspector strong { overflow: hidden; color: #eef2f8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.population-chart-wrap { width: 100%; padding: 3px 10px 0; background: #090d13; }
#population-chart { width: 100%; min-height: 330px; display: block; cursor: crosshair; touch-action: none; }
.population-source-note { min-height: 54px; padding: 10px 17px; display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid var(--line-soft); color: #78879a; background: #0b1119; font-size: 9px; line-height: 1.5; }.population-source-note > span { color: var(--blue); }.population-source-note p { margin: 0; }.population-source-note strong { color: #9eacc0; }
@media (max-width: 1220px) {
  .trading-workspace { grid-template-columns: 1fr; }.research-rail { display: block; border-top: 1px solid var(--line); border-left: 0; }.rail-section { height: auto; border-right: 0; }
}
@media (max-width: 980px) {
  .toolbar { grid-template-columns: auto auto minmax(220px, 1fr) auto; overflow-x: auto; }
  .workspace-topbar { align-items: start; }.item-title-row { grid-template-columns: 40px 40px 40px minmax(0, 1fr); }.metric-deck { min-height: 64px; margin: 0 -16px -10px 0; }.detail-metrics { grid-template-columns: repeat(7, minmax(105px, 1fr)); }.indicator-metrics { grid-template-columns: repeat(6, minmax(118px, 1fr)); }
  .research-rail { display: block; }
  .chart-controls { align-items: stretch; flex-direction: column; }.overlay-controls { justify-content: flex-end; }
  .chart-inspector { left: 10px; right: 10px; column-gap: 8px; }

}
@media (max-width: 700px) {
  nav { display: none; }
  .market-heading { align-items: flex-start; gap: 24px; flex-direction: column; }.stats { width: 100%; }.stats > div, .stats > button { min-width: 0; flex: 1; padding: 12px; }
  .toolbar { grid-template-columns: auto auto minmax(220px, 1fr) auto; }.filter-toggle { width: 42px; }.market-watchlist-picker { min-width: 145px; }
  .item-detail-page { width: 100%; padding: 4px; }.workspace-topbar { grid-template-columns: 1fr; }.item-title-row { grid-template-columns: 40px 40px 40px minmax(0, 1fr); }.detail-metrics { grid-template-columns: repeat(7, minmax(110px, 1fr)); }.indicator-metrics { grid-template-columns: repeat(6, minmax(124px, 1fr)); }
  .timeframe-tabs { overflow-x: auto; }.timeframe-tabs button { min-width: 44px; }.overlay-controls { justify-content: stretch; }.overlay-controls label { flex: 1; }.overlay-controls select { width: 100%; min-width: 0; }
  .chart-heading { position: static; padding: 10px 10px 6px; align-items: flex-start; gap: 4px 10px; }.legend { gap: 2px 10px; }.chart-inspector { position: static; margin: 0 10px 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 3px; }.chart-inspector > div { grid-column: auto; grid-row: auto; }.inspector-date { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: baseline; gap: 6px; }
  .research-rail { display: block; }.rail-section { border-right: 0; }
  .population-dialog { width: calc(100% - 12px); max-height: calc(100vh - 12px); }.population-summary { grid-template-columns: 1fr 1fr; }.population-summary > div:nth-child(2) { border-right: 0; }.population-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }.population-chart-controls { align-items: stretch; flex-direction: column; }.population-chart-controls > span { text-align: left; }.population-inspector { align-items: stretch; flex-direction: column; }.population-inspector > div { width: 100%; padding: 8px 0; border-top: 1px solid #29364a; border-left: 0; }.population-inspector > div:first-child { border-top: 0; }#population-chart { min-height: 275px; }
}

[hidden] { display: none !important; }
.view-navigation { justify-self: end; align-items: stretch; gap: 7px; }
.view-navigation button, .view-navigation a { min-height: 42px; align-self: center; padding: 0 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.view-navigation button:hover, .view-navigation button.active { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.view-navigation button.active { color: var(--gold); }
.view-navigation a { display: flex; align-items: center; }
.recipe-view { width: 100%; height: calc(100dvh - 96px); padding: 4px 4px 0; }
.recipe-shell { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.recipe-heading { min-height: 82px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line-soft); }
.recipe-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.recipe-stats > div { min-width: 130px; }
.recipe-filter-grid { display: grid; grid-template-columns: 1.1fr .58fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 14px 20px; background: #0b1017; border-bottom: 1px solid var(--line-soft); }
.recipe-filter-grid[hidden] { display: none; }
.recipe-filter-grid:not([hidden]) { animation: recipe-filter-slide .16s ease-out; transform-origin: top; }
@keyframes recipe-filter-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.recipe-filter-grid label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.recipe-filter-grid select, .recipe-filter-grid input { width: 100%; height: 42px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 0 11px; }
.recipe-filter-grid input:focus, .recipe-filter-grid select:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,189,56,.08); }
.recipe-reset { height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; color: var(--gold); background: var(--surface-2); font-weight: 800; }
.recipe-reset:hover { border-color: var(--gold); background: var(--gold-soft); }
.recipe-search-row { display: grid; grid-template-columns: auto auto minmax(220px, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: #0b1017; }
/* The search options live in the row itself: they shape most searches, so hiding them behind the funnel cost a click every time. */
.recipe-search-options { display: flex; align-items: center; gap: 8px; }
.recipe-search-options label { display: flex; align-items: center; gap: 7px; }
.recipe-search-options select { height: 42px; padding: 0 30px 0 13px; color: var(--text); font-size: 14px; }
.recipe-level-field { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.recipe-level-field input { width: 72px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-2); font-size: 14px; }
.recipe-search-options select:focus, .recipe-level-field input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,189,56,.08); }
.recipe-search-options .recipe-reset { height: 42px; padding: 0 13px; font-size: 14px; }
.saved-filter-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 9px; text-align: center; }
.recipe-filter-toggle { flex: 0 0 auto; }
.recipe-filter-toggle.active { color: var(--gold); border-color: rgba(245,189,56,.5); background: var(--gold-soft); }
.recipe-search-row > div:not(.toolbar-pagination) { color: var(--muted); font-size: 11px; }
.recipe-search-row .toolbar-pagination { min-width: 0; }
.recipe-table-wrap { flex: 1; min-height: 0; }
.recipe-table { min-width: 1795px; }
.recipe-col-chart { width: 44px; }.recipe-col-recipe { width: 250px; }.recipe-col-item-type { width: 120px; }.recipe-col-daily-volume { width: 105px; }.recipe-col-inputs { width: 285px; }.recipe-col-output { width: 235px; }.recipe-col-material-cost { width: 125px; }.recipe-col-sale-price { width: 115px; }.recipe-col-profit { width: 110px; }.recipe-col-roi { width: 85px; }.recipe-col-xp { width: 100px; }.recipe-col-access { width: 76px; }.recipe-col-skill { width: 125px; }.recipe-col-wiki { width: 88px; }
.recipe-table thead > tr > th:not(:last-child) { border-right: 1px solid rgba(38,51,70,.52); }

.recipe-table th button span { display: inline-block; min-width: 9px; color: #64748a; }
.recipe-table th button.active span { color: var(--gold); }
.recipe-sort-heading { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.recipe-sort-heading .info-tooltip-trigger { width: 13px; height: 13px; flex: 0 0 13px; font-size: 8px; line-height: 1; }
.recipe-table [data-recipe-column="itemType"] { text-align: left; }
.recipe-table th[data-recipe-column="recipe"], .recipe-table th[data-recipe-column="inputs"], .recipe-table th[data-recipe-column="output"],
.recipe-table [data-recipe-column="skill"], .recipe-table [data-recipe-column="access"], .recipe-table [data-recipe-column="wiki"] { text-align: center; }
.recipe-table td[data-recipe-column="recipe"], .recipe-table td[data-recipe-column="inputs"], .recipe-table td[data-recipe-column="output"] { text-align: left; }
.recipe-table td[data-recipe-column="skill"] .recipe-skill-badge { margin: 0 auto; }
.recipe-table td { height: 70px; }
.recipe-product { display: flex; align-items: center; gap: 10px; min-width: 220px; white-space: normal; }
.recipe-product img { width: 38px; height: 38px; object-fit: contain; }
.recipe-product strong { display: block; line-height: 1.25; }
.recipe-product small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.recipe-inputs { min-width: 230px; display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.recipe-input { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; color: #c5cedb; background: rgba(255,255,255,.02); font-size: 10px; }
.recipe-input img { width: 20px; height: 20px; object-fit: contain; }
/* A priced input is a quick view trigger, so it takes the same states as the row button. */
.recipe-input[data-quick-chart] { color: #c5cedb; text-align: left; }
.recipe-input[data-quick-chart]:hover, .recipe-input[data-quick-chart]:focus-visible { outline: 0; color: var(--gold); border-color: rgba(245,189,56,.55); background: var(--gold-soft); }
.recipe-input[data-quick-chart].active { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.value-main { display: block; font-weight: 800; }
.value-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.recipe-skill-badge { display: inline-flex; padding: 5px 7px; border-radius: 6px; color: #c9d8ee; background: #17243a; font-size: 10px; font-weight: 800; }
.recipe-xp-value { color: #a9c6e8; font-size: 11px; white-space: nowrap; }
.recipe-item-type { color: #a9b7c9; font-size: 11px; line-height: 1.35; }
.recipe-volume-value { color: #dce7f6; font-size: 12px; white-space: nowrap; }
.recipe-error { padding: 55px 20px; text-align: center; color: var(--red); }
.recipe-error strong { display: block; margin-bottom: 7px; color: var(--text); }
@media (max-width: 1150px) {
  .recipe-filter-grid { grid-template-columns: repeat(4, 1fr); }.recipe-reset { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-header { padding: 0 12px; }.view-navigation { display: flex; gap: 2px; }.view-navigation a { display: none; }.view-navigation button { padding: 0 8px; font-size: 10px; }
  .recipe-heading { align-items: flex-start; flex-direction: column; }.recipe-stats { width: 100%; }.recipe-stats > div { min-width: 0; flex: 1; padding: 12px; }.recipe-filter-grid { grid-template-columns: 1fr 1fr; }.recipe-search-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .brand .game-badge { display: none; }.recipe-filter-grid { grid-template-columns: 1fr; }
}