/* Forever AH: a dark theme in the spirit of the original game's interface:
   stone-dark backgrounds, gilded frame borders, gold labels, in-game-style
   tooltips and coin glyphs. Everything here is plain CSS drawn from scratch;
   no game artwork is used except the item icons served by the API. */

:root {
  --bg: #0c0a07;
  --panel: #16120c;
  --panel-2: #1f1910;
  --panel-3: #2a2215;
  --edge: #000;
  --gilt: #6d5228;
  --gilt-hi: #b08a43;
  --gold: #ffd100;
  --gold-soft: #e9c768;
  --text: #f0e8d4;
  --muted: #a1977f;
  --line: #2c2418;
  --up: #ff6b5b;
  --down: #3dd16f;
  --min: #57d68d;
  --median: #ffd100;
  --qty: #3b2f1b;
  --tip-bg: rgba(6, 7, 20, 0.96);
  --tip-border: #8f93a3;

  --q-POOR: #9d9d9d;
  --q-COMMON: #ffffff;
  --q-UNCOMMON: #1eff00;
  --q-RARE: #0070dd;
  --q-EPIC: #a335ee;
  --q-LEGENDARY: #ff8000;
  --q-ARTIFACT: #e6cc80;

  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--text);
  font: 13.5px/1.45 var(--sans);
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -20%, #2a1f10 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    var(--bg);
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 600; }

/* ---------- frames: gilded double border ---------- */
.frame {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--gilt), inset 0 0 0 2px var(--edge), 0 2px 10px rgba(0,0,0,.5);
  border-radius: 6px;
}
.frame-inset {
  background: #0d0a06;
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px #3d2f17, inset 0 2px 6px rgba(0,0,0,.6);
  border-radius: 5px;
}
.frame-title {
  color: var(--gold); font-size: 14px; letter-spacing: .03em;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(255, 209, 0, .15);
  padding: 10px 14px 8px; border-bottom: 1px solid var(--line);
}
.frame-title.up { color: var(--up); }
.frame-title.down { color: var(--down); }
.title { color: var(--gold); font-size: 22px; text-shadow: 0 1px 0 #000; }

/* ---------- controls ---------- */
.btn {
  font: 600 12.5px var(--sans); color: var(--gold);
  background: linear-gradient(180deg, #6a1410, #3a0907);
  border: 1px solid #000; border-radius: 4px; padding: 6px 13px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--gilt), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow: 0 1px 0 #000;
}
.btn:hover { box-shadow: inset 0 0 0 1px var(--gilt-hi), inset 0 1px 0 rgba(255,255,255,.12); filter: brightness(1.12); }
.btn:active { filter: brightness(.9); }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.primary { background: linear-gradient(180deg, #8a1b14, #4d0c08); }

input, select {
  font: inherit; color: var(--text);
  background: #0d0a06; border: 1px solid #000; border-radius: 4px; padding: 6px 9px;
  box-shadow: inset 0 0 0 1px #3d2f17;
}
input:focus, select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gilt-hi); }
input[type=number] { width: 72px; }

.seg { display: inline-flex; border: 1px solid #000; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px #3d2f17; }
.seg button { font: 600 12px var(--sans); color: var(--muted); background: #120e09; border: 0; padding: 5px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid #2b2114; }
.seg button.active { color: var(--gold); background: linear-gradient(180deg, #33270f, #1e170b); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: linear-gradient(180deg, #1d160d, #110d08);
  border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--gilt), 0 4px 14px rgba(0,0,0,.6);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-coin {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b8 0, #ffd34d 22%, #d39b1d 60%, #7a5208 100%);
  box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gilt), 0 0 12px rgba(255,200,60,.35);
}
.brand-name { font: 700 19px var(--serif); color: var(--gold); letter-spacing: .02em; text-shadow: 0 2px 0 #000; }
.brand-name em { font-style: normal; color: var(--text); font-weight: 600; }
.house-picker { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; }
.house-picker .label { color: var(--gold-soft); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.house-picker select { width: 340px; border: 0; box-shadow: none; background: transparent; }
.global-search { position: relative; width: 300px; }
.global-search input { width: 100%; }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 420px; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px; z-index: 30;
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.7);
}
.dropdown li { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 4px; cursor: pointer; }
.dropdown li:hover, .dropdown li.active { background: rgba(255,209,0,.08); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.ok .dot { background: var(--down); box-shadow: 0 0 6px var(--down); }
.conn.bad .dot { background: var(--up); }

/* ---------- layout ---------- */
.layout { flex: 1; display: grid; grid-template-columns: 112px 1fr; min-height: 0; }
.rail {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 10px;
  background: linear-gradient(90deg, #0f0b07, #140f09); border-right: 1px solid #000; box-shadow: 1px 0 0 #2b2114;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px;
  font: 600 12px var(--sans); color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.tab .glyph { font-size: 18px; line-height: 1; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); background: linear-gradient(180deg, #2a2011, #17110a); border-color: #000; box-shadow: inset 0 0 0 1px var(--gilt); }
.rail-foot { margin-top: auto; text-align: center; line-height: 1.3; }
.legal { margin: 8px 2px 0; font-size: 9px; line-height: 1.35; color: var(--muted, #8a7f6a); opacity: .75; text-align: center; }
main { overflow: hidden; position: relative; }
.view { height: 100%; overflow-y: auto; padding: 16px 20px 24px; }
.view-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- browse ---------- */
#view-browse { display: grid; grid-template-columns: 250px 1fr; gap: 14px; overflow: hidden; }
.cats { overflow-y: auto; min-height: 0; }
.cat-tree { list-style: none; margin: 0; padding: 6px; }
.cat-tree li { margin: 0; }
.cat-row {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 4px; padding: 5px 8px; cursor: pointer;
}
.cat-row:hover { background: rgba(255,209,0,.06); }
.cat-row.active { background: linear-gradient(90deg, rgba(255,209,0,.14), transparent); color: var(--gold); }
.cat-row .count { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cat-row .caret { width: 10px; color: var(--gilt-hi); font-size: 10px; }
.cat-class > .cat-row { font-weight: 600; color: var(--gold-soft); }
.cat-sub { list-style: none; margin: 0 0 4px 16px; padding: 0; border-left: 1px solid #2b2114; }
.cat-sub .cat-row { padding-left: 10px; font-size: 12.5px; }
.browse-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; }
.filters #f-name { width: 190px; }
.mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  font: 600 11.5px var(--sans); background: #0d0a06; border: 1px solid #000; border-radius: 10px;
  padding: 3px 9px; cursor: pointer; opacity: .55; box-shadow: inset 0 0 0 1px #2b2114;
}
.chip.on { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
.table-wrap { flex: 1; overflow: auto; min-height: 0; padding: 2px; }
.pager { display: flex; align-items: center; gap: 8px; }

table.market, table.houses { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.market th, .houses th {
  position: sticky; top: 0; z-index: 1; text-align: right; white-space: nowrap;
  font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-soft);
  background: linear-gradient(180deg, #2a2112, #1a140b); padding: 9px 12px; border-bottom: 1px solid #000;
}
.market th[data-sort] { cursor: pointer; user-select: none; }
.market th[data-sort]:hover { color: var(--gold); }
.market th.sorted::after { content: " ▾"; color: var(--gold); }
.market th.sorted.asc::after { content: " ▴"; }
.market th.left, .houses th.left, .market td.left, .houses td.left { text-align: left; }
.market td, .houses td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.market tbody tr { cursor: pointer; }
.market tbody tr:hover td { background: rgba(255,209,0,.045); }
.empty-note { padding: 28px; text-align: center; }

.item-cell { display: flex; align-items: center; gap: 9px; min-width: 220px; }
.item-cell .name { overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* ---------- icons with quality borders ---------- */
.icon {
  position: relative; display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 5px;
  background: #050403; border: 1px solid #000; box-shadow: inset 0 0 0 2px var(--qc, #4a4a4a);
  overflow: hidden;
}
.icon img { width: 100%; height: 100%; display: block; padding: 2px; border-radius: 5px; object-fit: cover; }
.icon.lg { width: 56px; height: 56px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--qc, #4a4a4a), 0 0 14px color-mix(in srgb, var(--qc, #000) 35%, transparent); }
.icon.sm { width: 22px; height: 22px; border-radius: 4px; }
.icon .ph { display: grid; place-items: center; width: 100%; height: 100%; color: #5d4f33; font: 700 14px var(--serif); }
.icon.lg .ph { font-size: 24px; }

.q-POOR { color: var(--q-POOR); --qc: var(--q-POOR); }
.q-COMMON { color: var(--q-COMMON); --qc: #8a8a8a; }
.q-UNCOMMON { color: var(--q-UNCOMMON); --qc: var(--q-UNCOMMON); }
.q-RARE { color: #3b9cff; --qc: var(--q-RARE); }
.q-EPIC { color: #c27cff; --qc: var(--q-EPIC); }
.q-LEGENDARY { color: var(--q-LEGENDARY); --qc: var(--q-LEGENDARY); }
.q-ARTIFACT, .q-HEIRLOOM { color: var(--q-ARTIFACT); --qc: var(--q-ARTIFACT); }

/* ---------- money: number + coin ---------- */
.money { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.money .u { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.money .u::after { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.6); }
.money .g::after { background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c230 45%, #a37408); }
.money .s::after { background: radial-gradient(circle at 35% 30%, #ffffff, #c9cdd3 45%, #7b8087); }
.money .c::after { background: radial-gradient(circle at 35% 30%, #ffd7b0, #d07c3b 45%, #7a3d12); }
.money.none { color: var(--muted); }

.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- movers ---------- */
.movers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mover-list { list-style: none; margin: 0; padding: 4px 6px 8px; }
.mover-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 9px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
}
.mover-list li:hover { background: rgba(255,209,0,.05); }
.mover-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-list .sub { grid-column: 2 / 4; font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
.mover-list .pct { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- item view ---------- */
.item-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.item-head { display: flex; align-items: center; gap: 14px; }
.item-title { font-size: 26px; text-shadow: 0 2px 0 #000; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { padding: 10px 13px; }
.stat .label { font: 600 10.5px var(--sans); color: var(--gold-soft); text-transform: uppercase; letter-spacing: .08em; }
.stat .value { font-size: 16px; font-weight: 600; margin-top: 4px; }
.stat .sub { font-size: 12px; margin-top: 3px; color: var(--muted); }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.chart-frame { padding: 10px 12px 12px; }
.chart-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 10px; }
.legend .key.min { background: var(--min); }
.legend .key.median { background: var(--median); }
.legend .key.qty { background: #5a4626; height: 9px; }
.chart { height: 400px; position: relative; background: #0b0906; border-radius: 4px; box-shadow: inset 0 0 0 1px #2b2114; }
.chart svg { display: block; width: 100%; height: 100%; }
.chart .grid line { stroke: #241c11; }
.chart .axis text { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.chart .line { fill: none; stroke-width: 2; }
.chart .line.min { stroke: var(--min); }
.chart .line.median { stroke: var(--median); }
.chart .area { fill: url(#medianFill); }
.chart .bar { fill: #3b2f1b; }
.chart .cursor { stroke: #6d5a35; stroke-dasharray: 3 3; }
.chart .marker { stroke: #000; stroke-width: 2; }
.chart .nodata { fill: var(--muted); font-size: 14px; font-family: var(--serif); }
.houses-frame { overflow: hidden; }
.houses td, .houses th { padding-left: 9px; padding-right: 9px; }
.houses td.left { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.houses tr.unified td { background: rgba(255,209,0,.06); }
.houses tr.unified td.left { color: var(--gold); font-weight: 600; }
.houses tr.best td.left::before { content: "◆ "; color: var(--down); }
.houses tr.current td:first-child { box-shadow: inset 3px 0 0 var(--gilt-hi); }
.houses tbody tr { cursor: pointer; }
.houses tbody tr:hover td { background: rgba(255,209,0,.05); }
.houses tr.unlisted td { color: #5f5747; }
.footnote { margin-top: 12px; }

/* ---------- in-game style tooltip ---------- */
.wow-tooltip {
  position: fixed; pointer-events: none; z-index: 50; min-width: 200px; max-width: 320px;
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000, 0 6px 22px rgba(0,0,0,.7);
  padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
}
.wow-tooltip .t-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.wow-tooltip .t-line { color: #fff; }
.wow-tooltip .t-yellow { color: var(--gold); }
.wow-tooltip .t-sep { height: 1px; background: #2c2e3c; margin: 6px 0; }
.wow-tooltip .row { display: flex; justify-content: space-between; gap: 14px; }
.wow-tooltip .row .k { color: var(--gold); }

/* ---------- dialogs & toasts ---------- */
dialog { color: var(--text); width: 440px; padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog form { padding: 0 18px 16px; }
dialog .frame-title { margin: 0 -18px 14px; }
dialog label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--gold-soft); }
dialog label input { display: block; width: 100%; margin-top: 5px; }
.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#settings-status.ok { color: var(--down); }
#settings-status.bad { color: var(--up); }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: 70vw;
  background: #2a0f0b; border: 1px solid #000; box-shadow: inset 0 0 0 1px #8a2a20; color: #ffd9d0;
  padding: 9px 14px; border-radius: 6px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0906; }
::-webkit-scrollbar-thumb { background: #3a2d18; border-radius: 6px; border: 2px solid #0b0906; }