:root {
  --bg: #0b0b0b;
  --surface: #161616;
  --surface2: #1e1e1e;
  --border: #222222;
  --border-mid: #333333;
  --crimson: #990000;
  --red: #cc2200;
  --silver: #c0c0c0;
  /* --fire and --gold are kept as aliases of --red and --silver so the
     existing references across the HTML keep resolving. --fire still reads
     correctly as the negative/error colour. */
  --fire: #cc2200;
  --gold: #c0c0c0;
  --text-primary: #e8e8e8;
  --text-secondary: #888888;
  --text-muted: #3a3a3a;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Scrollbars are hidden everywhere — this is a phone-first app and the
     gutters cost horizontal room the card rows need. */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--silver);
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font);
}

/* 16px is deliberate: anything smaller makes iOS Safari zoom the page on
   focus, which throws the layout off mid-entry at a show. */
input, select, textarea {
  font-family: var(--font);
  background: var(--surface2);
  color: var(--text-primary);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}

/* The rule above colours the box, but not the parts the browser draws itself:
   the value text, the calendar glyph and the picker panel are UA widgets and
   ignore it. Left in light mode they come out dark on a dark field — the show
   date read as empty until focus repainted it. Scoped to date inputs so no
   other control's rendering changes. */
input[type="date"] {
  color-scheme: dark;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--crimson);
}

.btn-primary {
  background: var(--crimson);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
}

.btn-secondary {
  background: var(--surface2);
  color: var(--text-primary);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
}

.btn-danger {
  background: var(--red);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
}

/* Outline variant for destructive actions that sit on screen permanently —
   still unmistakably destructive, without a block of red in the layout. The
   solid .btn-danger stays for the confirmation step that actually commits. */
.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}

.surface {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  /* Reserved so the badges that do not take a condition class — Photo, the
     payment method — line up with the outlined condition ones beside them
     rather than sitting a hair short. */
  border: 0.5px solid transparent;
}

/* Outlined rather than filled. The tinted fills were nearly black against a
   #0b0b0b page, so they read as a slightly-off rectangle rather than as
   colour; the border carries the condition now and the text matches it.
   Border and text share one value per condition — they are the same signal,
   and letting them drift would make one of the two wrong. */
.badge-nm { background: transparent; color: #4caf50; border: 0.5px solid #4caf50; }
.badge-lp { background: transparent; color: #cddc39; border: 0.5px solid #cddc39; }
.badge-mp { background: transparent; color: #ff9800; border: 0.5px solid #ff9800; }
.badge-hp { background: transparent; color: #ff5722; border: 0.5px solid #ff5722; }
.badge-dmg { background: transparent; color: #f44336; border: 0.5px solid #f44336; }
.badge-sealed { background: transparent; color: #7986cb; border: 0.5px solid #7986cb; }
.badge-graded { background: transparent; color: #c0c0c0; border: 0.5px solid #c0c0c0; }

.divider {
  height: 0.5px;
  background: var(--border);
  margin: 16px 0;
}

.text-gold { color: var(--silver); }
.text-purple { color: var(--crimson); }
.text-fire { color: var(--fire); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }