/* ===== THEME TOKENS ===== */

/* Light theme (default) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:       #f7f7fb;
  --card:     #ffffff;
  --text:     #111827;
  --muted:    #6b7280;
  --accent:   #2563eb;
  --header:   #ffffff;
  --border:   #e5e7eb;
  --input:    #f3f4f6;
  --green:    #16a34a;
  --red:      #b91c1c;
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       #0f1117;
  --card:     #151826;
  --text:     #e6e9f0;
  --muted:    #a0a8c0;
  --accent:   #7aa2f7;
  --header:   #0b0d13;
  --border:   #22263a;
  --input:    #0b0d13;
  --green:    #a6da95;
  --red:      #f7768e;
}

/* (Optional) Respect OS setting if JS is disabled and no data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

/* ===== GLOBALS ===== */
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }

.header {
  /* padding:16px 24px; */
  background:var(--header);
  padding-block: 16px;
  border-bottom:1px solid var(--border);
}
.header h1 { margin:0; font-size:20px; color:var(--muted); }
.nav a { margin-left:16px; color:var(--muted); }

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Theme toggle button */
.theme-toggle {
  margin-left:12px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding:6px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { filter: brightness(0.97); }

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* Toolbar inputs adopt theme tokens */
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input[type=text], .toolbar select {
  background: var(--input);
  color: var(--text);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:6px;
}
.toolbar button { background: var(--accent); border:0; color:#fff; padding:8px 12px; border-radius:6px; cursor:pointer; }

/* Meta text */
.meta { color: var(--muted); margin: 4px 0 16px; }

/* Portrait grid/cards (from your last change) */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.card { background: var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; background: var(--input); overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.noimg { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--muted); background: var(--input); }

.body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.title { font-weight:600; font-size:16px; color: var(--text); text-decoration: none; }
.badges { display:flex; gap:6px; align-items:center; flex-wrap: wrap; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color: var(--text); background: var(--bg); opacity: 0.9; }
.pill { font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--border); color: var(--text); background: var(--bg); opacity: 0.9; }

/* Store-specific badges remain readable in both themes */
.badge-epic { background:#121212; color:#fff; }
.badge-gog { background:#2d1146; color:#e6d2ff; }
.badge-amazon { background:#081525; color:#8ddcff; }
.badge-steam { background:#0b1020; color:#9abaff; }
.badge-legacy { background:#201010; color:#ffb4b4; }
.badge-ea { background:#0a2a66; color:#d8e8ff; }
.badge-ubisoft { background:#1a2b34; color:#c4f1ff; }
.badge-battle { background:#009ae4; color:#002438; }
.badge-rockstar { background:#f8d12f; color:#151515; }
.badge-microsoft { background:#107c10; color:#e5ffe5; }
.badge-unknown { background:#ddd; color:#333; }

.desc { color: var(--muted); min-height: 48px; }
.dates { display:flex; justify-content:space-between; color: var(--muted); font-size: 13px; }
.left { color: var(--green); }
.expired { color: var(--red); }
.released { margin-top: 12px; }

.pager { display:flex; gap:10px; align-items:center; justify-content:center; margin: 18px 0; }
.btn { padding:8px 12px; border-radius:6px; border:1px solid var(--border); color: var(--text); background: var(--bg); }
.footer { text-align:center; color: var(--muted); padding:18px 0 28px; }

/* Subscribe / Unsubscribe */

/* Center the form and reuse your card look */
.form-wrap { max-width: 520px; margin: 0 auto; }
.form label { display:block; font-weight:600; margin: 6px 0 6px; }
.form input[type=email], .form input[type=text] {
  width:100%;
  background: var(--input);
  color: var(--text);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:6px;
}
.form .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Messages */
.flash { background: rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.35); padding:.6rem .8rem; border-radius:6px; margin:8px 0; }
.error { background: rgba(185,28,28,.12); border:1px solid rgba(185,28,28,.35); padding:.6rem .8rem; border-radius:6px; margin:8px 0; }

/* Primary action button (accent color) */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 12px;
}
.btn-primary:hover { filter: brightness(0.97); }

.no-decoration { text-decoration: none; color: var(--muted);}