:root {
  /* Dark, tinted-neutral base (never pure black) + one warm amber accent --
     fits "checking game prices at a desk in the evening," restrained strategy. */
  --bg: oklch(18% 0.006 255);
  --panel: oklch(23% 0.007 255);
  --panel-raised: oklch(27% 0.008 255);
  --border: oklch(32% 0.008 255);
  --border-soft: oklch(28% 0.007 255);
  --text: oklch(93% 0.004 255);
  --muted: oklch(68% 0.012 255);
  --muted-dim: oklch(52% 0.012 255);

  --accent: oklch(78% 0.14 75);
  --accent-strong: oklch(84% 0.15 75);
  --accent-text: oklch(18% 0.02 75);

  --profit: oklch(72% 0.14 155);
  --cost: oklch(72% 0.05 255);
  --stale: oklch(70% 0.16 40);
  --fresh: oklch(72% 0.14 155);
  --aging: oklch(78% 0.13 90);
  --danger: oklch(68% 0.18 25);

  --radius: 10px;
  --radius-sm: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

/* ---------- header ---------- */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.title-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sub {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}

.controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.field label { white-space: nowrap; }

select,
input[type="number"],
input[type="text"] {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.85rem;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

select:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(78% 0.14 75 / 0.25);
}

#batchSizeCustom { width: 84px; }

.tax-toggle {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.tax-toggle input { accent-color: var(--accent); }

.btn-primary {
  background: var(--accent);
  border: none;
  color: var(--accent-text);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 160ms var(--ease-out), background 150ms var(--ease-out);
}

.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:active { transform: scale(0.97); }

.btn-primary:disabled {
  background: var(--muted-dim);
  color: oklch(85% 0.004 255);
  cursor: wait;
  transform: none;
}

@media (hover: none) {
  .btn-primary:hover { background: var(--accent); }
}

/* ---------- freshness bar ---------- */

.freshness-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--panel-raised);
  border-bottom: 1px solid var(--border);
}

.freshness-bar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fresh);
  flex: none;
}

.freshness-bar[data-level="aging"] .dot { background: var(--aging); }
.freshness-bar[data-level="stale"] .dot { background: var(--danger); }
.freshness-bar[data-level="aging"] { color: var(--aging); }
.freshness-bar[data-level="stale"] { color: var(--danger); }

/* ---------- layout ---------- */

main {
  padding: 20px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.search-panel {
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 650;
}

.search-panel h2 { margin-bottom: 2px; }

.hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 68ch;
}

/* ---------- search ---------- */

.search-row {
  position: relative;
  max-width: 480px;
}

.search-row input[type="text"] {
  width: 100%;
  padding: 10px 12px;
}

.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  z-index: 5;
  box-shadow: 0 12px 28px oklch(10% 0.01 255 / 0.45);
}

.suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}

.suggestions button:hover,
.suggestions button:focus-visible {
  background: var(--panel);
  outline: none;
}

#searchResult { margin-top: 14px; }

#searchResult .lookup-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 8px;
}

#searchResult .lookup-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th, td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
}

th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: none;
}

td.profit {
  color: var(--profit);
  font-weight: 600;
}

td.cost { color: var(--cost); }

tbody tr:hover { background: var(--panel-raised); }

.empty {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 14px 0;
}

.empty.loading { color: var(--muted-dim); }

.stale-tag {
  color: var(--stale);
  font-size: 0.72rem;
  border: 1px solid var(--stale);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ---------- footer ---------- */

footer {
  padding: 16px 24px 30px;
  color: var(--muted);
  font-size: 0.78rem;
}

footer p { max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}