:root {
  --bg: #0e1014;
  --panel: #161920;
  --panel-2: #1c2029;
  --line: #272c37;
  --text: #e4e7ec;
  --muted: #8a92a3;
  --accent: #6ea8ff;
  --good: #3ecf7a;
  --good-bg: rgba(62, 207, 122, 0.12);
  --warn: #f0b429;
  --warn-bg: rgba(240, 180, 41, 0.16);
  --bad: #ef5d5d;
  --radius: 10px;
  /* Chart series: categorical slots 1 and 2 of the reference palette, dark steps (validated on --panel). */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #9a8fd6;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0 16px 40px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
[hidden] { display: none !important; }

header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  background: var(--bg);
  flex-wrap: wrap;
}
header #toggle { margin-left: auto; }

.tabs, .seg { display: inline-flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.tabs button, .seg button {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.seg button { padding: 3px 10px; font-size: 12px; }
.tabs button:hover, .seg button:hover { color: var(--text); }
.tabs button.active, .seg button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.brand { display: flex; align-items: center; gap: 10px; }

.status {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}
.status.ok { background: var(--good-bg); color: var(--good); }
.status.warn { background: var(--warn-bg); color: var(--warn); }

.stats-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  cursor: default;
}
.chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 3px; }
.chip.error-chip { color: var(--bad); border-color: rgba(239, 93, 93, 0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); }
}
.card.narrow { max-width: 760px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.onboarding { margin-bottom: 12px; border-color: var(--warn); }
.onboarding p { margin: 6px 0 0; color: var(--muted); }

.muted, .hint { color: var(--muted); font-weight: 400; }
.hint { font-size: 12px; margin: 0 0 10px; }
.empty { color: var(--muted); text-align: center; padding: 24px 0; margin: 0; }
.error { color: var(--bad); font-size: 13px; margin: 6px 0; }

.table-wrap { overflow-x: auto; }
.table-wrap.tall { max-height: 520px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
}
td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
/* Numbers line up on the right, so their length shows their size. */
th.num, td.num { text-align: right; }
/* Full-width tables keep their header row in view under the page header while the page scrolls. Narrower windows
   scroll a wide table sideways instead, which a sticky header can't do along with. */
.table-wrap.page th { top: var(--header-h, 0px); z-index: 1; }
@media (min-width: 1101px) { .table-wrap.page { overflow: visible; } }
@media (max-width: 1100px) { .table-wrap.page th { top: 0; } }
.table-wrap.page.scroll { overflow-x: auto; }
.table-wrap.page.scroll th { top: 0; }
/* Second lines in a cell (bazaar and faction, sale counts) may wrap, so tables fit more often. */
td .small { white-space: normal; }
.cell-item { display: inline-flex; align-items: center; gap: 8px; }
.cell-item .item-icon { padding: 2px; border-radius: 5px; }

.listings tbody tr { cursor: pointer; }
.listings tr.closed-row { opacity: 0.45; }
.listings tbody tr:hover { background: var(--panel-2); }
.listings .price { font-weight: 600; }
/* Green is kept for what stands out: well under the usual price, or under the user's deal price. */
.deal-text { color: var(--good); }
tr.hot { background: rgba(62, 207, 122, 0.07); box-shadow: inset 3px 0 0 var(--good); }
tr.hot .price { color: var(--good); }
tr.fresh { animation: flash 10s ease-out; }
@keyframes flash { from { background: var(--warn-bg); } to { background: transparent; } }
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}
.badge.closed { color: var(--bad); }
.badge.hot { background: var(--good-bg); color: var(--good); font-weight: 600; }

/* "How it works": explanations folded away until asked for. */
.explain { margin: -2px 0 8px; }
.explain summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; width: fit-content; }
.explain summary::-webkit-details-marker { display: none; }
.explain summary::before { content: "ⓘ "; }
.explain summary:hover { color: var(--text); }
.explain[open] summary { margin-bottom: 4px; }
.explain .hint { margin-bottom: 4px; max-width: 900px; }

.feed { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.feed li {
  display: grid;
  grid-template-columns: 64px 70px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}
.feed li.fresh { animation: flash 10s ease-out; }
.feed .time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.feed .what { overflow: hidden; text-overflow: ellipsis; }
.feed .extra { color: var(--muted); font-size: 12px; }
.kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.kind.new, .kind.restock { color: var(--warn); }
.kind.reprice { color: var(--accent); }
.kind.sold, .kind.gone { color: var(--muted); }
.kind.initial { color: var(--muted); }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.row input:not([type]), .row input[type="password"] { flex: 1 1 220px; }
/* Visitors (public view, no password) see no controls that change anything; the admin sees no login button. */
body.viewer .admin-only { display: none !important; }
body:not(.viewer) .viewer-only { display: none !important; }
.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
#live-filters input[type='text'] { width: 70px; }
#live-filters .rule { margin: 0 0 6px; padding-left: 10px; border-left: 2px solid var(--line, #333); }
input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  font: inherit;
  min-width: 0;
}
input[type="number"] { width: 70px; }
input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 14px;
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1220; font-weight: 600; }
.btn.small { padding: 2px 8px; font-size: 12px; }
.icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; }
.icon-btn:hover { color: var(--bad); }

.key-row { padding: 8px 0; border-top: 1px solid var(--line); }
.key-row.disabled { opacity: 0.55; }
.key-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.key-controls { display: flex; align-items: center; gap: 8px; }
.key-notes { font-size: 12px; margin-top: 2px; }
.key-notes .error { font-size: 12px; }
.warn-text { color: var(--warn); }

.focus-card { margin-bottom: 12px; }
.inline-hint { margin: 0; }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; margin-bottom: 10px; }
@media (max-width: 500px) { .focus-grid { grid-template-columns: minmax(0, 1fr); } }
.focus-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
.focus-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.focus-top .del-focus { margin-left: auto; }
/* An item picture, trimmed to the item, centred in a square tile of --size. */
.item-icon {
  width: var(--size); height: var(--size); flex: none; box-sizing: border-box; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.item-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
#brand-icon { display: inline-flex; }
#brand-icon .item-icon { padding: 3px; }
.focus-name { display: flex; flex-direction: column; flex: 1 1 140px; min-width: 0; }
/* The headline: the cheapest listing buyable now, big; the card turns green when it stands out. */
.focus-item.hot { border-color: var(--good); box-shadow: 0 0 0 1px var(--good), 0 0 22px rgba(62, 207, 122, 0.12); }
.focus-deal { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-top: 1px; }
.focus-price { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--text); font-variant-numeric: tabular-nums; }
.focus-item.hot .focus-price { color: var(--good); }
.focus-meta { margin-top: 6px; line-height: 1.5; }
.focus-legend { align-items: center; margin: -2px 0 10px; }
.focus-legend .explain { margin: 0 0 0 auto; }
.focus-legend .explain[open] { flex-basis: 100%; margin: 0; }
.off-key { font-size: 9px; font-style: normal; margin-right: 5px; }
.focus-item .deal { width: 110px; }
.small { font-size: 12px; }
.warn-box { margin: 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); }
.load-warning { margin-bottom: 12px; line-height: 1.5; }
.load-warning.mild { background: transparent; }

.chart { margin-top: 6px; min-height: 140px; }
.chart svg { display: block; overflow: visible; }
.chart-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 56px 0; margin: 0; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .end-label { fill: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s1 { stroke: var(--series-1); }
.chart .line.s2 { stroke: var(--series-2); }
.chart .line.s3 { stroke: var(--series-3); }
.chart .dot { stroke: var(--panel-2); stroke-width: 2; }
.chart .dot.s1 { fill: var(--series-1); }
.chart .dot.s2 { fill: var(--series-2); }
.chart .dot.s3 { fill: var(--series-3); }
.chart .off-scale.s1 { fill: var(--series-1); }
.chart .off-scale.s2 { fill: var(--series-2); }
.chart .off-scale.s3 { fill: var(--series-3); }
.chart .off-label { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .deal-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart .hover { fill: transparent; cursor: crosshair; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.key { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; border-radius: 1px; }
.key.s1 { background: var(--series-1); }
.key.s2 { background: var(--series-2); }
.key.s3 { background: var(--series-3); }
.tracked summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.tracked .types { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; }
.key.deal-key { background: none; border-top: 1px dashed var(--muted); height: 0; }
.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
}
.tooltip b { margin-left: 6px; }
.more { text-align: center; margin-top: 10px; }

select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  font: inherit;
}
#browse-q { flex: 1 1 220px; }
#browse-min { width: 90px; }
.seller-filter { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.filter { font-size: 12px; color: var(--text); padding: 2px 4px 2px 10px; }
.badge.filter .icon-btn { font-size: 12px; padding: 0 4px; }
.browse .price { font-weight: 600; }

h3 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.gain { color: var(--good); }
.loss { color: var(--bad); }
.badge.buy { color: var(--accent); }
.badge.sell { color: var(--good); }

.insights tbody tr { cursor: pointer; }
.insights tbody tr:hover, tr.selected { background: var(--panel-2); }
.ins-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 10px 12px; margin-bottom: 12px; }
.ins-detail .stats-strip { margin: 8px 0 0; }
.ins-detail .chip { background: var(--panel); }
.ins-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ins-tables { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .ins-tables { grid-template-columns: minmax(0, 1fr); } }
.ins-detail th { background: var(--panel-2); }
.chart .bar { fill: var(--series-1); }
.feed.compact { max-height: 320px; }
.feed.compact li { grid-template-columns: 96px 60px minmax(0, 1fr); font-size: 12px; }
#ins-q, #trade-item { flex: 1 1 200px; }
#trade-qty { width: 80px; }
#trade-price { width: 120px; }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th.sort-asc::after { content: " ▲"; font-size: 9px; }
th.sort-desc::after { content: " ▼"; font-size: 9px; }

/* Phones: the content first. One row for the brand and Admin, the tabs full width, the numbers in one line to
   swipe through, and in tables only the columns that matter for a decision (the others are marked .opt). */
@media (max-width: 640px) {
  header { gap: 8px 10px; padding: 8px 0; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  h1 { font-size: 16px; }
  header > .btn { order: 2; padding: 4px 10px; font-size: 13px; }
  header #toggle { margin-left: 0; }
  #tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  #tabs button { flex: 1 0 auto; padding: 5px 10px; }
  .stats-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 10px;
    padding: 0 16px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .stats-strip::-webkit-scrollbar, #tabs::-webkit-scrollbar { display: none; }
  th.opt, td.opt { display: none; }
  /* Names and labels wrap so the remaining columns fit; numbers stay on one line. */
  td:not(.num), td .small { white-space: normal; }
  table { font-size: 13px; }
  td { padding: 6px 5px; }
  .cell-item { align-items: flex-start; gap: 6px; }
  .cell-item .item-icon { width: 18px; height: 18px; }
  /* Player IDs are noise at this size; the name still links to the bazaar or profile. */
  .pid { display: none; }
  .card { padding: 10px 12px; }
  .focus-price { font-size: 19px; }
}