/* ==========================================================================
   TA2 Public Website — dark theme.
   Refined design pass (SPEC-TA2-013 post-v3):
     - Gold warmed from neon (#ffd700) to champion gold (#f5c518)
     - Inter for body, Playfair Display for hero headers (auction-catalog feel)
     - Radial vignette background for depth
     - Pressure bar desaturated for premium look
     - Card hover: gold glow
     - Range-active: gradient gold fill
   ========================================================================== */

:root {
  --bg-darkest: #191919;
  --bg-darker:  #1e1e1e;
  --bg-dark:    #252525;
  --bg-alt:     #2a2a2a;
  --bg-input:   #222;
  --bg-button:  #2d2d2d;
  --bg-header:  #161616;
  --text-bright:#ffffff;
  --text-normal:#cccccc;
  --text-dim:   #999999;
  --text-muted: #7a7a7a;

  /* Warmer, richer gold — less neon, more "trading house" */
  --gold:       #f5c518;
  --gold-deep:  #d4a017;

  --green:      #4caf50;
  --red:        #ef5350;
  --blue:       #4a90e2;
  --orange:     #ff9800;

  /* Refined pressure-bar colors — desaturated from the generic red/green */
  --pressure-buy:  #2e9e5e;
  --pressure-sell: #c94545;

  --border:     #333;
  --border-soft:#2a2a2a;

  /* Serif display face for hero elements. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Subtle radial vignette — lighter center, darker edges. Adds depth without noise.
     Fixed so it doesn't scroll with content. */
  background:
    radial-gradient(ellipse at center top, #242424 0%, #1e1e1e 45%, #161616 100%)
    fixed;
  color: var(--text-normal);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--blue); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-darkest);
  /* Divider removed — the toolbar below reads as one continuous header now. */
}
/* Brand cluster — pumpkin mascot + site title sit together on the left.
   Flex with a tight gap so the two feel like one unit rather than two stranded labels. */
.top-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Fixed-height so the mascot scales smoothly regardless of source image dimensions;
   width: auto preserves the native aspect ratio. 44 px is ~1.8× the h1 font-size,
   giving the mascot a bit more visual weight than the title — appropriate for a
   site-defining brand element. */
.top-logo {
  height: 44px;
  width: auto;
  display: block;
  /* Subtle radial glow so the mascot reads as "on the dark header" rather than
     pasted on. Drop-shadow (not box-shadow) respects PNG transparency. */
  filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.25));
}
.top h1 {
  margin: 0;
  font-family: var(--font-display);
  /* Bumped from 24 px for a little more presence — headline is the first thing
     visitors read and the old size felt a touch understated alongside the mascot. */
  font-size: 30px;
  font-weight: 600;
  /* Gold + dual-layer halo matches the Compare / Trade Calc buttons' glow language —
     tight inner ring for luminosity + wider soft outer ring for atmosphere. */
  color: var(--gold);
  letter-spacing: 0.3px;
  text-shadow:
    0 0 8px  rgba(245, 197, 24, 0.45),
    0 0 22px rgba(245, 197, 24, 0.25);
}
.status-pill {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Toolbar (sort + search) ────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.sort {
  background: var(--bg-button);
  color: var(--text-normal);
  border: 1px solid var(--border-soft);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sort:hover { background: var(--bg-alt); color: var(--text-bright); }
.sort.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: #1a1a1a;
  font-weight: 600;
}
.search-label {
  margin-left: 12px;
  color: var(--text-dim);
  font-size: 13px;
}
#search {
  background: var(--bg-input);
  color: var(--text-normal);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  width: 260px;
  font-family: inherit;
  transition: border-color 0.12s;
}
#search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12);
}

/* ── Grid layout: sidebar + centered grid ───────────────────────────────── */
/* Left sidebar hosts the Compare toggle. Grid stays centered with a max width so
   80+ items don't sprawl on ultra-wide monitors. Sidebar + grid share a flex
   container so the whole block is horizontally centered. */
.grid-layout {
  display: flex;
  gap: 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: flex-start;
}
.grid-sidebar {
  flex: 0 0 140px;
  padding: 32px 0;
  position: sticky;
  top: 16px;
}
.grid-column { flex: 1; min-width: 0; }

/* Sidebar button — deliberately bold so the Compare entry point is the first thing
   a visitor notices. Inactive state is NOT a neutral card; it already tints gold and
   glows, announcing itself. Active state becomes the full gold gradient. */
.sidebar-btn {
  width: 100%;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(245, 197, 24, 0.12) 0%, rgba(245, 197, 24, 0.04) 100%),
    var(--bg-dark);
  border: 2px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 0 16px rgba(245, 197, 24, 0.15);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.sidebar-btn:hover {
  background:
    linear-gradient(180deg, rgba(245, 197, 24, 0.22) 0%, rgba(245, 197, 24, 0.08) 100%),
    var(--bg-dark);
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.35);
  transform: translateY(-1px);
  color: var(--text-bright);
}
.sidebar-btn.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: #1a1a1a;
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.40);
}
.sidebar-btn-icon { font-size: 18px; line-height: 1; }
.sidebar-hint {
  margin: 12px 4px 0;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

/* Cards grid — no own max-width; the layout parent handles that. */
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 200px));
  justify-content: center;
  gap: 20px;
  padding: 32px 0 48px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(140px, 180px)); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(3, minmax(130px, 170px)); } }
@media (max-width: 700px)  {
  .grid-layout { flex-direction: column; padding: 0 12px; }
  .grid-sidebar { flex: 0 0 auto; position: static; padding: 12px 0 0; }
  .sidebar-btn { max-width: 200px; margin: 0 auto; }
  .sidebar-hint { display: none; }
  .grid {
    grid-template-columns: repeat(2, minmax(120px, 160px));
    gap: 12px;
    padding: 16px 0 32px;
  }
}

/* Compare-mode gating: the body.compare-mode class (set by JS) controls whether
   per-card checkboxes are visible. With mode off, selections stay in memory but
   their visual treatment is suppressed so the grid looks normal. */
body:not(.compare-mode) .card-checkbox { display: none; }
body:not(.compare-mode) .card.selected {
  border-color: var(--border-soft);
  box-shadow: none;
}
body:not(.compare-mode) .card.selected::after { display: none; }
.card {
  position: relative;
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 190px;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.card:hover {
  background: var(--bg-alt);
  border-color: var(--gold);
  transform: translateY(-2px);
  /* Subtle gold glow — reinforces the "this is valuable" feel. */
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.18), 0 0 0 1px rgba(245, 197, 24, 0.25);
}
.card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 14px rgba(245, 197, 24, 0.22);
}

/* Compare checkbox — top-left corner of each card. Click stops propagation so
   checking an item doesn't open its detail view. */
.card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: rgba(25, 25, 25, 0.85);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: transparent;
  line-height: 1;
}
.card-checkbox:hover {
  border-color: var(--gold);
  transform: scale(1.12);
}
.card-checkbox.checked {
  background: var(--gold);
  border-color: var(--gold-deep);
  color: #1a1a1a;
}
/* A tiny colored dot bottom-left when the card is selected — indicates the colour this
   item will take in the compare chart. Assigned from the palette via inline --compare-color. */
.card.selected::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--compare-color, var(--gold));
  box-shadow: 0 0 0 2px var(--bg-dark);
}
.card-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 6px 0 10px;
  background: var(--bg-header);
  border-radius: 4px;
  padding: 4px;
}
.card-name {
  font-size: 12.5px;
  color: var(--text-bright);
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.25;
  min-height: 30px;
}
.card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
/* SPEC-TA2-017 staleness badge — inline after the price on cards whose
   stored valuation is older than 3 days (the calculator's window). */
.card-stale {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}
.card.no-data .card-price {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
}
.empty { padding: 24px; color: var(--text-muted); text-align: center; }

/* ── Detail view ────────────────────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-soft);
}
.back {
  background: var(--bg-button);
  color: var(--text-normal);
  border: 1px solid var(--border-soft);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.back:hover { background: var(--bg-alt); color: var(--text-bright); }
.detail-icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: var(--bg-header);
  border-radius: 5px;
  padding: 6px;
  border: 1px solid var(--border-soft);
}
.detail-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.detail-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.detail-title p {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}
.detail-title .hero-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
.detail-title .hero-meta {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-left: 10px;
}
.detail-title .hero-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}
/* Compare-view header chips — one per item, with its line colour. */
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font-size: 12.5px;
  color: var(--text-normal);
}
.compare-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.compare-chip-price {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-soft);
}
.range {
  background: var(--bg-button);
  color: var(--text-normal);
  border: 1px solid var(--border-soft);
  padding: 5px 13px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.range:hover { background: var(--bg-alt); color: var(--text-bright); }
.range.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: #1a1a1a;
  font-weight: 700;
}
.hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ── Chart + pressure bar layout ────────────────────────────────────────── */
.chart-wrap {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 14px;
  padding: 18px 28px 36px;
  height: calc(100vh - 320px);
  min-height: 400px;
}
.chart {
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.pressure {
  position: relative;
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pressure::before {
  /* Subtle 50% marker line so the eye can eyeball buy vs sell share quickly. */
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 2;
  pointer-events: none;
}
.pressure-sell {
  background: var(--pressure-sell);
  width: 100%;
  transition: height 0.3s ease;
}
.pressure-buy {
  background: var(--pressure-buy);
  width: 100%;
  flex: 1;
}
.pressure-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-bright);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  padding: 14px 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11.5px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-darkest);
}

.view[hidden] { display: none; }

/* Sidebar secondary button — Trade Calc. Visually IDENTICAL to the Compare button
   (same gold gradient, 2px gold border, gold text, gold glow, hover brighten,
   active state) — every property inherits from .sidebar-btn via the cascade.
   The only two properties that stay specific to the secondary variant are:
     margin-top: 18px    — sits below Compare with a gap
     text-decoration: none — Trade Calc is an <a> element; Compare is a <button>.
                             Kill the default underline anchors get. */
.sidebar-btn-secondary {
  margin-top: 18px;
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────────────────
    Trade calculator — 3×3 grids, drag + click-to-place, cash inputs, P&L.
   ────────────────────────────────────────────────────────────────────────── */
.trade-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 22px 28px 40px;
  align-items: start;
}
/* Wider palette column on bigger monitors — more item tiles visible at once. */
@media (min-width: 1500px) { .trade-layout { grid-template-columns: 440px 1fr; max-width: 1560px; } }
@media (min-width: 1800px) { .trade-layout { grid-template-columns: 520px 1fr; max-width: 1760px; } }

.trade-palette {
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 14px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}
.trade-palette h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
#trade-palette-search {
  background: var(--bg-input);
  color: var(--text-normal);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 8px;
}
#trade-palette-search:focus { outline: none; border-color: var(--gold); }

/* Sort-filter row in the palette — compact versions of the main-grid sort buttons.
   Flex-wraps on narrow palettes so nothing overflows. */
.trade-palette-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.sort-small {
  flex: 1 1 auto;
  min-width: 42px;
  padding: 5px 8px;
  background: var(--bg-button);
  color: var(--text-normal);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sort-small:hover { background: var(--bg-alt); color: var(--text-bright); }
.sort-small.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #1a1a1a;
  border-color: var(--gold-deep);
  font-weight: 700;
}

.trade-palette-items {
  display: grid;
  /* Tiles scale to available width — 3 columns on standard monitors,
     4 on wide, 5+ on 4K. Bigger minimum so icons have room to breathe. */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  flex: 1;
  min-height: 220px;
  border-radius: 6px;
  transition: background 0.15s, box-shadow 0.15s;
}
/* Drop-to-remove: when the user drags a filled slot over the palette, the palette
   flashes a faint red highlight so the "release to remove" intent is obvious. */
.trade-palette-items.palette-drop-target {
  background: rgba(239, 83, 80, 0.10);
  box-shadow: inset 0 0 0 2px var(--red);
}
.palette-item {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 10px 6px 8px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  user-select: none;
}
.palette-item:hover {
  background: var(--bg-button);
  border-color: var(--gold);
}
.palette-item.selected {
  border-color: var(--gold);
  background: rgba(245, 197, 24, 0.08);
  box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(245, 197, 24, 0.2);
}
.palette-item.dragging { opacity: 0.4; transform: scale(0.95); }
.palette-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.palette-item-name {
  font-size: 11px;
  color: var(--text-bright);
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  pointer-events: none;
}
.palette-item-price {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Main three-column area: yours | center | theirs */
.trade-main {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 18px;
  align-items: start;
}
.trade-side {
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.trade-side.winning  {
  border-color: rgba(46, 158, 94, 0.55);
  box-shadow: 0 0 22px rgba(46, 158, 94, 0.12);
}
.trade-side.losing   {
  border-color: rgba(201, 69, 69, 0.45);
  box-shadow: 0 0 22px rgba(201, 69, 69, 0.10);
}
.trade-side-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.2px;
}
.trade-grid {
  display: grid;
  grid-template-columns: repeat(3, 86px);
  /* Rows are auto — grid grows as slots are added via the + button. */
  grid-auto-rows: 86px;
  gap: 6px;
}
/* Row +/- controls, placed directly under the grid and aligned to the right so
   they sit next to the bottom-right slot. */
.trade-grid-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: 264px;                /* 3×86 + 2×6 — matches the grid exactly */
  margin-top: -4px;
}
.btn-row {
  width: 36px;
  height: 28px;
  background: var(--bg-button);
  border: 1px solid var(--border-soft);
  color: var(--text-normal);
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.15s;
}
.btn-row:hover {
  background: var(--bg-alt);
}
.btn-row-add:hover:not(:disabled) {
  color: #4cd280;
  border-color: #4cd280;
  box-shadow: 0 0 12px rgba(76, 210, 128, 0.25);
}
.btn-row-remove:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(239, 83, 80, 0.22);
}
.btn-row:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.trade-slot {
  background: var(--bg-header);
  border: 2px dashed var(--border);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.trade-slot:hover { border-color: var(--gold); background: rgba(245, 197, 24, 0.04); }
.trade-slot.filled {
  background: var(--bg-alt);
  border-style: solid;
  border-color: var(--border-soft);
}
.trade-slot.filled:hover { border-color: var(--gold); }
.trade-slot.drag-over {
  border-color: var(--gold);
  background: rgba(245, 197, 24, 0.14);
  transform: scale(1.04);
}
.trade-slot img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.trade-slot-count {
  position: absolute;
  bottom: 2px;
  right: 3px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  letter-spacing: 0.3px;
}
.trade-slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  cursor: pointer;
  padding: 0;
}
.trade-slot.filled:hover .trade-slot-remove { display: flex; }
.trade-slot.dragging {
  opacity: 0.4;
  transform: scale(0.92);
  border-color: var(--gold);
}

.trade-cash {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.trade-cash label {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  min-width: 50px;
}
.trade-cash-input {
  flex: 1;
  background: var(--bg-input);
  color: var(--text-normal);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.trade-cash-input:focus { outline: none; border-color: var(--gold); }

.trade-total {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 0;
  border-top: 1px solid var(--border-soft);
}
.trade-total-label {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
}
.trade-total-value {
  color: var(--gold);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Center P&L panel */
.trade-center {
  background: var(--bg-dark);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 52px; /* line up visually with the grids, below the titles */
  min-height: 280px;
}
.trade-net-label {
  margin: 0;
  color: var(--text-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.trade-net {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
  letter-spacing: -0.5px;
}
.trade-net.positive { color: #4cd280; }
.trade-net.negative { color: #ef7070; }
.trade-net.even     { color: var(--text-dim); }
.trade-net-verdict {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.35;
  min-height: 28px;
}

/* Eval-bar between offers. Centre line at 50%; fill grows to the "winning" side.
   When your side (left) is bigger the bar fills toward the LEFT; when theirs is
   bigger it fills toward the RIGHT. */
.trade-bar {
  position: relative;
  width: 100%;
  height: 18px;
  background: var(--bg-input);
  border-radius: 9px;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--border-soft);
}
.trade-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Default: centered, no skew. JS sets left/right/background based on imbalance. */
  left: 50%;
  width: 0;
  transition: all 0.25s ease;
}
.trade-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}
.trade-reset {
  margin-top: 14px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.trade-reset:hover { background: var(--bg-alt); color: var(--red); border-color: var(--red); }

/* Responsive: stack on narrower viewports */
@media (max-width: 1050px) {
  .trade-layout { grid-template-columns: 1fr; }
  .trade-palette { position: static; max-height: 300px; }
  .trade-palette-items { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .trade-main { grid-template-columns: 1fr; gap: 14px; }
  .trade-center { margin-top: 0; min-height: 0; }
  .trade-grid { grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 72px); }
}

/* ── Compare feature ────────────────────────────────────────────────────── */
.compare-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--bg-dark);
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(245, 197, 24, 0.28),
              0 0 30px rgba(245, 197, 24, 0.12);
  z-index: 10;
  animation: compare-bar-in 0.22s cubic-bezier(.2, .8, .3, 1.2);
}
/* HTML's `hidden` attribute normally applies display:none via user-agent CSS, but
   our explicit display:flex above wins by specificity. This rule puts the attribute
   back in charge so setting/clearing `hidden` from JS actually shows/hides the bar. */
.compare-bar[hidden] { display: none; }
@keyframes compare-bar-in {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
#compare-count {
  color: var(--text-bright);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.btn-compare-primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #1a1a1a;
  border: 1px solid var(--gold-deep);
  padding: 8px 18px;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: filter 0.12s, transform 0.08s;
}
.btn-compare-primary:hover     { filter: brightness(1.06); }
.btn-compare-primary:active    { transform: translateY(1px); }
.btn-compare-primary:disabled  { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.btn-compare-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.btn-compare-secondary:hover { background: var(--bg-alt); color: var(--text-bright); }
.btn-compare-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* A brief red flash on the bar when the user tries to exceed the 5-item limit. */
.compare-bar.max-warn { animation: compare-maxwarn 0.3s; }
@keyframes compare-maxwarn {
  0%, 100% { border-color: var(--gold); }
  50%      { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 30px rgba(239, 83, 80, 0.3); }
}

/* Compare view — reuses detail-header but with a wider chart area and no pressure bar. */
.compare-chart-wrap {
  padding: 18px 28px 36px;
  height: calc(100vh - 300px);
  min-height: 500px;
}
#compare-chart {
  width: 100%;
  height: 100%;
}

/* Same range-button styling as the detail view, but scoped to compare via .range-c. */
.range-c {
  background: var(--bg-button);
  color: var(--text-normal);
  border: 1px solid var(--border-soft);
  padding: 5px 13px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.range-c:hover { background: var(--bg-alt); color: var(--text-bright); }
.range-c.active {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: #1a1a1a;
  font-weight: 700;
}

/* uPlot legend styling specifically for the compare chart — show it prominently
   so users can read each item's name + colour + current value at the cursor. */
#view-compare .u-legend {
  color: var(--text-normal);
  font-size: 12.5px;
  padding: 8px 4px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#view-compare .u-legend th { color: var(--text-dim); }
#view-compare .u-legend .u-marker {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  margin-right: 6px;
}

/* ── uPlot dark-theme overrides ─────────────────────────────────────────── */
.uplot {
  color: var(--text-normal);
  font-family: inherit;
}
.uplot .u-axis { color: var(--text-dim); }
.uplot .u-legend {
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
}
.uplot .u-select { background: rgba(245, 197, 24, 0.12); }
.uplot .u-over   { background: transparent; }