/* ═══════════════════════════════════════════════════════════════
   omen — design system
   A refined dark theme for media discovery
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── tokens ─────────────────────────────────────────────────── */
:root {
  /* surfaces — subtle elevation via lightness */
  --bg:          #09090b;
  --surface:     #131316;
  --surface-2:   #1c1c21;
  --border:      #27272a;
  --border-hover:#3f3f46;

  /* text */
  --text:        #fafafa;
  --text-secondary: #a1a1aa;
  --muted:       #71717a;

  /* accent — violet */
  --accent:      #a78bfa;
  --accent-hover:#8b5cf6;
  --accent-dim:  #7c3aed;
  --accent-ghost: rgba(167,139,250,0.08);
  --accent-glow:  rgba(167,139,250,0.15);

  /* semantic */
  --green:       #4ade80;
  --green-dim:   rgba(74,222,128,0.12);
  --yellow:      #fbbf24;
  --yellow-dim:  rgba(251,191,36,0.12);
  --red:         #f87171;
  --red-dim:     rgba(248,113,113,0.12);

  /* geometry */
  --radius-sm:   0.375rem;
  --radius:      0.5rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration:    150ms;

  /* shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow:      0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* glassmorphism */
  --glass-bg:     rgba(19,19,22,0.72);
  --glass-blur:   blur(20px) saturate(1.8);
  --glass-border: rgba(255,255,255,0.06);
}

/* ── reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  /* Clip accidental inline overflow without turning body into a scroll container. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent-dim); color: var(--text); }

/* custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── scroll anchoring ──────────────────────────────────────── */
#media-grid, .media-grid, .media-detail, .season-block { scroll-margin-top: 4.5rem; }

/* ── focus ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── navigation ─────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  background: rgba(9,9,11,0.65);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 1.5rem;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0 0.5rem;
}

.logo {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.logo:hover { color: var(--accent-hover); }

/* Keep shell actions touch- and keyboard-operable without inflating passive
   links elsewhere in the application. */
nav :where(a, button),
.bottom-nav-item,
.genre-pill {
  min-inline-size: 2.75rem;
}
nav :where(a, button, input:not([type="hidden"])),
.bottom-nav-item,
:where(.btn, .genre-pill, button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, summary),
.checkbox-label {
  min-block-size: 2.75rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-links { display: flex; gap: 0.125rem; margin-left: auto; }
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--surface-2); color: var(--text); }
.nav-admin {
  color: var(--accent) !important;
  font-weight: 600;
}
.nav-admin:hover { background: var(--accent-ghost) !important; }

/* hamburger menu — <details> disclosure, hidden on desktop */
.nav-menu { display: none; position: relative; flex-shrink: 0; }
.nav-menu > .nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
  list-style: none;
}
.nav-menu > .nav-burger::-webkit-details-marker { display: none; }
.nav-menu > .nav-burger::marker { display: none; content: ""; }
.nav-menu > .nav-burger:hover { color: var(--text); background: var(--surface-2); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  z-index: 80;
}
.nav-dropdown a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
}
.nav-dropdown a:hover { background: var(--surface-2); color: var(--text); }
.nav-dropdown a.active { color: var(--text); background: var(--surface-2); }
.nav-dropdown .nav-logout { color: var(--red); }
.nav-dropdown .nav-logout:hover { background: var(--red-dim); }

/* mobile notification bell — hidden on desktop, visible on mobile */
.nav-notif-mobile {
  display: none;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  padding: 0.25rem;
  flex-shrink: 0;
  transition: color var(--duration) var(--ease);
}
.nav-notif-mobile:hover { color: var(--text); }
.nav-notif-mobile #notif-count-mobile:not(:empty) {
  position: absolute;
  top: -2px;
  right: -4px;
  background: var(--red);
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  min-width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}

/* ── omnisearch ─────────────────────────────────────────────── */
.omni-search { position: relative; flex: 1; min-width: 0; max-width: 36rem; }
.omni-search input[type="search"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 5.25rem 0.5rem 2.25rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.omni-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  background: var(--surface-2);
}
.omni-search input[type="search"]::placeholder { color: var(--muted); }
.omni-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}
.omni-submit {
  position: absolute;
  right: 0;
  top: 50%;
  min-height: 2.75rem;
  transform: translateY(-50%);
  padding: 0.35rem 1rem;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.omni-submit:hover { background: var(--accent-hover); }
.omni-submit:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.omni-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 28rem;
  overflow-y: auto;
  animation: dropdown-in 0.15s var(--ease);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.omni-dropdown:empty { display: none; }

.omni-hit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  transition: background var(--duration) var(--ease);
}
.omni-hit:hover, .omni-hit.omni-active { background: var(--surface-2); }

.omni-thumb {
  width: 2.5rem;
  height: 3.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.omni-thumb-empty { background: var(--surface-2); }

.omni-hit-info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.omni-hit-title {
  font-size: 0.8125rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omni-hit-meta {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--muted);
}
.omni-type-badge {
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-full);
  background: var(--accent-dim);
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.omni-see-all {
  display: block;
  text-align: center;
  padding: 0.625rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  border-top: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}
.omni-see-all:hover { background: var(--surface-2); }
.omni-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: 0.8125rem; }

/* ── main layout ────────────────────────────────────────────── */
main {
  padding: 1.5rem;
}

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn-small {
  min-inline-size: 2.75rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration) var(--ease);
}
.btn-small:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(248,113,113,0.3);
}
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); }

.btn-monitor {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-monitor:hover { background: var(--accent); color: var(--bg); }

.btn-monitored {
  background: var(--accent);
  color: var(--bg);
}
.btn-monitored:hover { filter: brightness(1.1); }

.btn-approve { background: var(--green); color: var(--bg); }
.btn-approve:hover { filter: brightness(1.1); background: var(--green); }
.btn-deny { background: transparent; color: var(--red); border: 1px solid rgba(248,113,113,0.3); }
.btn-deny:hover { background: var(--red-dim); border-color: var(--red); }

/* ── badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.badge.available { background: var(--green-dim); color: var(--green); }
.badge.requested,
.badge.pending   { background: var(--yellow-dim); color: var(--yellow); }
.badge.approved  { background: var(--green-dim); color: var(--green); }
.badge.denied    { background: var(--red-dim); color: var(--red); }
.badge.default   { background: var(--accent-ghost); color: var(--accent); }
.badge.template  { background: var(--surface-2); color: var(--muted); }
button.badge { cursor: pointer; border: none; font-family: inherit; transition: opacity var(--duration) var(--ease); }
button.badge:hover { opacity: 0.7; }
.type-badge {
  background: var(--surface-2);
  color: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── notification badge ─────────────────────────────────── */
.notif-badge { position: relative; }
.notif-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background: var(--red);
  color: var(--bg);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── type toggle (mobile bar, search) ───────────────────────── */
.type-toggle { display: flex; gap: 0.25rem; }
.toggle-link, .toggle-active {
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}
.toggle-link {
  color: var(--muted);
  border: 1px solid var(--border);
}
.toggle-link:hover { color: var(--text); border-color: var(--border-hover); }
.toggle-active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* ── type tabs (sidebar) ───────────────────────────────────── */
.type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.1875rem;
  border: 1px solid var(--border);
}
.type-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.8125rem;
  white-space: nowrap;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.type-tab:hover { color: var(--text); background: var(--surface-2); }

.indexer-categories { grid-column: 1 / -1; }
.indexer-categories legend { font-weight: 600; }
.indexer-category-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem 1rem;
}
.indexer-category-options label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2rem;
}
.type-tab-active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  cursor: default;
}
.type-tab-active:hover { background: var(--accent); color: var(--bg); }
.type-tab svg { flex-shrink: 0; }

/* ── discover layout ────────────────────────────────────────── */
.discover { display: block; margin-left: 16.5rem; padding-right: 1.5rem; }
.discover > .content { min-width: 0; }
.discover-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.discover-mode-switcher {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  display: flex;
  align-self: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(0.75rem);
}

.discover-mode {
  min-height: 2.75rem;
  min-width: 5.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.875rem;
  border-radius: calc(var(--radius-sm) - 0.125rem);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
}

.discover-mode.active { background: var(--surface-hover); color: var(--text); }

.discover-feature {
  width: 100%;
  min-height: 20rem;
  display: grid;
  grid-template-columns: minmax(11rem, 23%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.discover-feature-poster { min-height: 20rem; background: var(--surface-hover); }
.discover-feature-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.discover-feature-copy { align-self: center; max-width: 46rem; padding: clamp(1.5rem, 4vw, 3rem); }
.discover-feature-copy h2 { margin: 0.35rem 0 0.5rem; font-size: clamp(2rem, 4vw, 3.5rem); }
.discover-feature-copy p { color: var(--text-secondary); line-height: 1.55; }
.discover-feature-meta { font-size: 0.8125rem; }
.browse-grid { width: 100%; }
.trending-section { margin-bottom: 0.5rem; }
.trending-section .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
}

/* ── rec group attribution ─────────────────────────────── */
.rec-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rec-title strong {
  color: var(--accent);
}
.rec-sources {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-ghost);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.rec-group + .rec-group { margin-top: 0.25rem; }

/* mobile bar — hidden on desktop, shown on mobile */
.mobile-bar { display: none; }

/* filter close button — hidden on desktop */
.filter-close {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
  z-index: 2;
}
.filter-close:hover { color: var(--text); background: var(--surface-2); }

/* filter toggle button (mobile) */
.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.filter-toggle-btn:hover { border-color: var(--accent); color: var(--text); }

/* filter drawer backdrop (mobile) */
.filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 59;
}

.grid-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.grid-toolbar .grid-loading {
  margin-right: auto;
  color: var(--accent);
}
.grid-toolbar .grid-loading[hidden] {
  display: none;
}
.grid-toolbar select {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  cursor: pointer;
}

.filters {
  position: fixed;
  left: 0;
  top: 3.5rem;
  bottom: 0;
  width: 16.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-radius: 0;
  z-index: 30;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.filter-controls { padding-bottom: 4rem; }

/* mobile filter header — hidden on desktop */
.filter-header {
  display: none;
}

/* filter sections — settings-card pattern */
.filter-section {
  padding: 0.875rem 1rem;
}
.filter-section + .filter-section {
  border-top: 1px solid var(--border);
}
.filter-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.625rem;
}

.filter-group { }
.filter-group > label { display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; font-weight: 500; }
.filter-group select,
.filter-group input[type="number"] {
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8125rem;
  transition: border-color var(--duration) var(--ease);
}
.filter-group select:hover,
.filter-group input[type="number"]:hover { border-color: var(--border-hover); }
.filter-group select:focus,
.filter-group input[type="number"]:focus { outline: none; border-color: var(--accent); }

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
.filter-row > div > label { display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; font-weight: 500; }

.filter-toggles { display: flex; flex-direction: column; gap: 0.625rem; }

/* custom checkbox — dark theme */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--border-hover);
  border-radius: 0.25rem;
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--duration) var(--ease);
}
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.3rem;
  height: 0.55rem;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.15s var(--ease);
}
input[type="checkbox"]:hover {
  border-color: var(--accent);
  background: var(--accent-ghost);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  border-color: var(--bg);
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* toggle switch variant — filter sidebar */
.filter-toggles input[type="checkbox"] {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--surface-2);
}
.filter-toggles input[type="checkbox"]::after {
  width: 0.875rem;
  height: 0.875rem;
  border: none;
  border-radius: 50%;
  background: var(--muted);
  transform: none;
  left: 2px;
  top: 50%;
  margin-top: -0.4375rem;
  transition: all var(--duration) var(--ease);
}
.filter-toggles input[type="checkbox"]:hover {
  background: var(--surface-2);
}
.filter-toggles input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.filter-toggles input[type="checkbox"]:checked::after {
  background: white;
  left: calc(100% - 0.875rem - 2px);
  transform: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease);
}
.checkbox-label:hover { color: var(--text); }

.genre-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.genre-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--surface);
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}
.genre-pill:hover { color: var(--text); background: var(--surface-2); border-color: var(--text-secondary); }
.genre-active { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.genre-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.genre-check {
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease);
}
.genre-check:hover { color: var(--text); }

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--border);
}

.btn-clear {
  font-size: 0.8rem;
  text-decoration: none;
}

.progressive-filters > summary {
  cursor: pointer;
  margin-bottom: 0;
}
.progressive-filters[open] > summary { margin-bottom: 0.625rem; }

.save-filter-profile {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 31;
  width: 16.5rem;
  display: block;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.save-filter-profile summary {
  color: var(--text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
}
.save-filter-profile-fields {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.save-filter-profile-fields > label:first-child {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.save-filter-profile input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
}

.manage-profiles {
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.manage-profiles:hover { color: var(--accent-hover); }

/* ── media grid ─────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
}

.search-sentinel-slot {
  display: block;
}

.search-sentinel-slot .scroll-sentinel {
  margin-top: 0;
  padding-top: 2rem;
}

.scroll-sentinel {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  /* Extend bounding box upward so IntersectionObserver fires early */
  padding-top: 100vh;
  margin-top: -100vh;
  pointer-events: none;
}

.media-card {
  position: relative;
  isolation: isolate;
  contain: paint;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.media-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(167,139,250,0.14);
}

.poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-height: 0;
  overflow: hidden;
}
.poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
}
.media-card:hover .poster img { transform: scale(1.04); }

/* Card hover overlay */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.3) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.media-card:hover .card-overlay,
.media-card:focus .card-overlay {
  opacity: 1;
}
.card-type-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--accent);
  color: #fff;
}
.card-overview {
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hide overlay on touch devices — no hover */
@media (hover: none) {
  .card-overlay { display: none; }
}

.status-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  z-index: 2;
  cursor: help;
}
.status-dot.dot-available    { background: var(--green); }
.status-dot.dot-pending      { background: var(--yellow); }
.status-dot.dot-approved     { background: var(--accent); }
.status-dot.dot-denied       { background: var(--red, #ef4444); }
.status-dot.dot-downloading  {
  background: conic-gradient(
    #3b82f6 calc(var(--progress, 0) * 1%),
    var(--surface-2, #374151) 0
  );
}

/* ── card download progress bar (bottom of poster) ────── */
.card-dl-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 3;
}
.card-dl-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.5s var(--ease);
  min-width: 2px;
}
.card-dl-label {
  display: none;
}

.info {
  padding: 0.5rem 0.5rem 0.375rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
  z-index: 1;
}
.info h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.125rem;
}
.year { color: rgba(255,255,255,0.8); }
.rating-high { color: var(--green); font-weight: 600; }
.rating-mid  { color: var(--yellow); font-weight: 600; }
.rating-low  { color: var(--red); font-weight: 600; }

/* ── pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.page-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.page-link:hover { color: var(--accent-hover); }
.page-info { font-size: 0.75rem; color: var(--muted); }

/* ── recommendation rows ────────────────────────────────────── */
.recommendations {
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.recommendations h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.rec-row { margin-bottom: 1.75rem; }
.rec-row h3,
.rec-reason {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
  font-weight: 500;
}
.rec-row h3 em,
.rec-reason em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.rec-cards {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rec-cards::-webkit-scrollbar { display: none; }
.rec-cards .media-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 11rem;
  min-width: 11rem;
}

/* ── skeleton loading ──────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}
.rec-skeleton-row { margin-bottom: 1.75rem; }
.rec-skeleton-title {
  width: 14rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: var(--text-secondary);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  margin-bottom: 0.625rem;
}
.rec-skeleton-cards { display: flex; gap: 0.75rem; overflow: hidden; }
.rec-skeleton-card {
  flex-shrink: 0;
  width: 9.5rem;
  height: 14.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ratings skeleton — pill placeholders while badges load */
.ratings-skeleton {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.ratings-skeleton-pill {
  width: 4.5rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--surface);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* similar-titles skeleton — matches .similar-card dimensions */
.similar-skeleton {
  display: flex;
  gap: 0.75rem;
  overflow: hidden;
}
.similar-skeleton-card {
  flex-shrink: 0;
  width: 9.5rem;
  min-width: 9.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.similar-skeleton-poster {
  aspect-ratio: 2/3;
  background: var(--surface);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.similar-skeleton-info { padding: 0.5rem 0.125rem 0; }
.similar-skeleton-title {
  width: 70%;
  height: 0.75rem;
  background: var(--text-secondary);
  border-radius: 0.25rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  margin-bottom: 0.375rem;
}
.similar-skeleton-meta {
  width: 40%;
  height: 0.625rem;
  background: var(--text-secondary);
  border-radius: 0.25rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  opacity: 0.12;
}

/* season-details skeleton */
.season-skeleton { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; }
.season-skeleton-header {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.season-skeleton-poster {
  width: 5rem;
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  background: var(--surface);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.season-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.season-skeleton-line {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: var(--text-secondary);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.season-skeleton-line:nth-child(1) { width: 30%; height: 1rem; }
.season-skeleton-line:nth-child(2) { width: 85%; }
.season-skeleton-line:nth-child(3) { width: 70%; }

/* ── year preset ───────────────────────────────────────────── */
.year-preset-select {
  font-size: 0.75rem;
  padding: 0.1875rem 0.375rem;
  color: var(--text-secondary);
}

/* ── nav logout ────────────────────────────────────────────── */
.nav-logout { opacity: 0.6; transition: opacity 0.15s; }
.nav-logout:hover { opacity: 1; }

/* ── cinematic detail page ──────────────────────────────────── */
.media-detail {
  max-width: 72rem;
  margin: 0 auto;
}

/* backdrop — full bleed, tall, cinematic */
.detail-backdrop {
  position: relative;
  margin: calc(-1.5rem - 3.5rem) -1.5rem 0;
  overflow: hidden;
  height: clamp(20rem, 55vh, 34rem);
  background: var(--surface-2);
  animation: backdrop-shimmer 2s ease-in-out infinite alternate;
}
@keyframes backdrop-shimmer {
  from { background-color: var(--surface-2); }
  to   { background-color: var(--surface); }
}
.detail-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.detail-backdrop--empty {
  height: clamp(14rem, 35vh, 22rem);
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg) 100%);
  margin: calc(-1.5rem - 3.5rem) -1.5rem 0;
  position: relative;
  overflow: hidden;
}
.detail-backdrop--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 60%);
}

/* hero overlay — sits on the bottom of the backdrop */
.detail-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  align-items: end;
  margin-top: -8rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.hero-poster {
  width: 13rem;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  aspect-ratio: 2/3;
  object-fit: cover;
  flex-shrink: 0;
}
.hero-poster--placeholder {
  width: 13rem;
  aspect-ratio: 2/3;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.hero-poster--placeholder svg { width: 3rem; height: 3rem; opacity: 0.35; }
.hero-info {
  min-width: 0;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* title */
.hero-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}
.hero-tagline {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}
.hero-reason {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* meta pills */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.625rem;
}
.hero-meta > span:not(.meta-genre):not(.meta-cert):not(.meta-rating) {
  /* default text items (year, runtime) — just text */
}
.meta-cert {
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.meta-rating {
  color: var(--accent);
  font-weight: 600;
}
.meta-genre {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration) var(--ease);
}
.meta-genre:hover { border-color: var(--border-hover); color: var(--text); }
.hero-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

/* status badges + external links */
.hero-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.ext-link {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
}
.ext-link:hover { border-color: var(--accent); background: var(--accent-ghost); }

/* multi-source rating badges */
.hero-ratings {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 1.75rem;
  margin-bottom: 0.25rem;
}

.rating-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.rating-badge:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
}

.rating-badge__icon {
  font-size: 0.9rem;
  line-height: 1;
}
.rating-badge__icon--rt-fresh { filter: none; }
.rating-badge__icon--rt-rotten { opacity: 0.85; }
.rating-badge__icon--rt-upright { filter: none; }
.rating-badge__icon--rt-spilled { opacity: 0.7; }

.rating-badge__icon--imdb {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  background: #f5c518;
  color: #000;
  line-height: 1;
}

.rating-badge__icon--tmdb {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  background: #01d277;
  color: #081c22;
  line-height: 1;
}

.rating-badge__score {
  color: var(--text);
}

/* actions */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.taste-buttons {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}
.taste-current {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

.admin-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius);
  font-size: 0.8125rem;
}
.admin-bar__label {
  color: var(--text-secondary);
  margin-right: auto;
}

/* ── detail body (content below hero) ──────────────────────── */
.detail-body {
  padding: 2rem 1.5rem 0;
}

.detail-actions {
  margin: 2rem 1.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.active-quality-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
}
.active-quality-plan strong { color: var(--text); }
.manual-release-review { margin-bottom: 1rem; }
.manual-release-review summary { cursor: pointer; }
.manual-release-review form { margin-top: 0.5rem; }

.season-actions {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.season-actions h2 { font-size: 1rem; }
.season-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* overview */
.detail-overview {
  line-height: 1.75;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* crew — inline entries separated by dots */
.detail-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}
.crew-entry { display: inline-flex; align-items: baseline; gap: 0.375rem; }
.crew-name { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.crew-role { font-size: 0.75rem; color: var(--muted); }

/* streaming providers — compact inline logos */
.detail-providers {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}
.providers-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.provider-logo {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* trailers */
.detail-trailers { margin-bottom: 2rem; }
.detail-trailers h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.trailer-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.trailer-card {
  flex: 0 0 18rem;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--duration) var(--ease);
}
.trailer-card:hover { transform: scale(1.02); }
.trailer-thumb {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--surface-2);
}
.trailer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trailer-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  background: rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
.trailer-card:hover .trailer-play { opacity: 1; background: rgba(0,0,0,0.4); }
.trailer-name {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* episode info (last/next aired) */
.detail-episodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ep-brief {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ep-brief-label {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}
.ep-brief-code { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ep-brief-name { color: var(--text-secondary); }
.ep-brief-date { color: var(--muted); font-size: 0.75rem; }
.ep-brief--next { border-color: var(--accent-dim); }

/* cast */
.detail-cast { margin-bottom: 2rem; }
.detail-cast h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.cast-scroll {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.cast-card {
  flex: 0 0 6.5rem;
  text-align: center;
}
.cast-photo {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--surface-2);
}
.cast-photo--placeholder {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.cast-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cast-character {
  display: block;
  font-size: 0.625rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* collection card */
.detail-collection {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}
.collection-poster {
  width: 3.5rem;
  border-radius: var(--radius);
  aspect-ratio: 2/3;
  object-fit: cover;
}
.collection-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.collection-name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
}

/* facts footer */
.detail-facts {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.fact-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fact-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fact-value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.fact-logo {
  height: 1.25rem;
  width: auto;
  max-width: 3rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.status-facts { margin-bottom: 1rem; }
.version-value { font-family: monospace; font-size: 0.75rem; }

/* keywords */
.detail-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 2rem;
}
.keyword-pill {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* similar section */
.detail-similar {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.detail-similar h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }

/* taste buttons */ */
.taste-buttons {
  display: flex;
  gap: 0.75rem;
}
.taste-btn {
  padding: 0.4375rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  transition: all var(--duration) var(--ease);
}
.taste-btn:hover { border-color: var(--accent); color: var(--text); background: var(--accent-ghost); }
.taste-btn.liked {
  background: var(--green-dim);
  color: var(--green);
  border-color: rgba(74,222,128,0.3);
}
.taste-btn.liked:hover { background: rgba(74,222,128,0.2); }
.taste-btn.disliked {
  background: var(--red-dim);
  color: var(--red);
  border-color: rgba(248,113,113,0.3);
}
.taste-btn.disliked:hover { background: rgba(248,113,113,0.2); }

/* request button */
.request-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--duration) var(--ease);
}
.request-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.request-btn:active { transform: translateY(0); }

/* season picker */
.season-picker { position: relative; }
.season-picker-form {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 16rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  box-shadow: var(--shadow-lg);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 20rem;
  overflow-y: auto;
}
.season-picker:not([open]) .season-picker-form { display: none; }
.season-picker > summary { list-style: none; }
.season-picker > summary::-webkit-details-marker { display: none; }
.season-picker > summary::marker { display: none; content: ""; }
.season-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: background var(--duration) var(--ease);
}
.season-check:hover { background: var(--accent-ghost); color: var(--text); }
.season-check input[type="checkbox"],
.season-check input[type="radio"] {
  width: 1rem;
  height: 1rem;
}

/* status badges on detail page */
.detail-status { display: flex; gap: 0.5rem; margin: 0.75rem 0; flex-wrap: wrap; }
.badge-available { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.badge-requested { background: rgba(167,139,250,0.12); color: var(--accent); border: 1px solid var(--accent); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.badge-denied { background: rgba(248,113,113,0.12); color: var(--red); border: 1px solid var(--red); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }

/* season accordion */
.seasons-accordion { margin: 1.5rem 0; }
.seasons-accordion h2 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.season-block { border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; }
.season-block[open] { background: var(--surface); }
.season-header { padding: 0.75rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; gap: 0.5rem; }
.season-header:hover { background: var(--surface-hover); }
.season-header .season-left { display: flex; align-items: center; gap: 0.5rem; }
.season-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; cursor: help; }
.season-dot.dot-available    { background: var(--green); }
.season-dot.dot-pending      { background: var(--yellow); }
.season-dot.dot-approved     { background: var(--accent); }
.season-dot.dot-denied       { background: var(--red, #ef4444); }
.season-dot.dot-downloading  {
  background: conic-gradient(
    #3b82f6 calc(var(--progress, 0) * 1%),
    var(--surface-2, #374151) 0
  );
}
.episode-count { font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
.season-header-right { display: flex; align-items: center; gap: 0.75rem; }
.season-request-form { display: inline; }
.season-request-form .btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.season-episodes-link {
  display: inline-flex;
  align-items: center;
  margin: 0 1rem 0.75rem;
}

/* episode list */
.episode-list { padding: 0 1rem 0.75rem; }
.episode-row { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--border); align-items: flex-start; }
.ep-number { font-size: 0.75rem; color: var(--muted); min-width: 1.5rem; text-align: right; padding-top: 0.125rem; display: flex; align-items: center; gap: 0.25rem; justify-content: flex-end; }
.ep-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; flex-shrink: 0; cursor: help; }
.ep-dot.dot-available    { background: var(--green); }
.ep-dot.dot-pending      { background: var(--yellow); }
.ep-dot.dot-approved     { background: var(--accent); }
.ep-dot.dot-denied       { background: var(--red, #ef4444); }
.ep-dot.dot-downloading  {
  background: conic-gradient(
    #3b82f6 calc(var(--progress, 0) * 1%),
    var(--surface-2, #374151) 0
  );
}
.ep-info { flex: 1; }
.ep-name { font-weight: 500; font-size: 0.875rem; }
.ep-meta { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); margin-top: 0.125rem; }
.ep-rating { color: var(--accent); }

/* ── similar cards (augur-powered) ─────────────────────────── */
.similar-cards {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0.5rem 0;
}
.similar-cards::-webkit-scrollbar { display: none; }
.similar-card {
  display: block;
  width: 9.5rem;
  min-width: 9.5rem;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: transform var(--duration) var(--ease);
}
.similar-card:hover { transform: translateY(-2px); }
.similar-card .poster { position: relative; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; }
.similar-card .poster img { width: 100%; height: 100%; object-fit: cover; }
.similar-card .info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.375rem 0.375rem 0.25rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%); z-index: 1; }
.similar-card .info h3 { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.similar-card .meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: rgba(255,255,255,0.7); margin-top: 0.125rem; }

/* confidence badge on similar cards */
.confidence-badge {
  position: absolute;
  bottom: 0.375rem;
  left: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
  line-height: 1.4;
  pointer-events: none;
}
.confidence-low {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}
.confidence-mid {
  background: rgba(59, 130, 246, 0.25);
  color: #93bbfc;
}
.confidence-high {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

/* ── rec heading with confidence ───────────────────────────── */
.rec-heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.rec-heading .rec-reason { margin-bottom: 0; }
.rec-confidence {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6ee7b7;
  white-space: nowrap;
  opacity: 0.8;
}

/* ── taste profile ─────────────────────────────────────────── */
.taste-profile { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.taste-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.taste-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.taste-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 400;
}
.taste-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.taste-empty p { margin-bottom: 1rem; max-width: 28rem; margin-inline: auto; }
.taste-empty .btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.5rem;
}
.taste-section { margin-bottom: 2.5rem; }
.taste-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.taste-icon {
  font-size: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.taste-icon.liked { background: var(--green-dim, rgba(16, 185, 129, 0.15)); color: #10b981; }
.taste-icon.disliked { background: var(--red-dim, rgba(239, 68, 68, 0.15)); color: #ef4444; }
.taste-section-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.25rem;
}
.taste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
}
.taste-profile.taste-grid { display: block; grid-template-columns: none; }
.taste-card-wrap {
  position: relative;
}
.taste-card-wrap .media-card { width: 100%; }
.taste-remove {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ef4444;
  border: none;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  z-index: 2;
}
.taste-card-wrap:hover .taste-remove { opacity: 1; }
.taste-remove:hover { background: rgba(239, 68, 68, 0.3); }

/* ── search ─────────────────────────────────────────────────── */
.search-page { max-width: 60rem; margin: 0 auto; }
.search-form { margin-bottom: 1.5rem; }
.search-bar { display: flex; gap: 0.5rem; }
.search-bar input[type="text"] {
  flex: 1;
  padding: 0.625rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.search-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.search-form .type-toggle { margin-top: 0.75rem; }

/* ── surprise ───────────────────────────────────────────────── */
.surprise-controls {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: flex;
  gap: 0.5rem;
}
.surprise-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  white-space: nowrap;
}
.surprise-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
}
.surprise-btn--roll {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}
@media (max-width: 48rem) {
  .surprise-controls {
    display: none;
  }
}
.surprise-type {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

  color: inherit;
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.detail-title-link:hover { color: var(--accent); }

/* ── profiles ───────────────────────────────────────────────── */
.profile-list { max-width: 40rem; margin: 0 auto; }
.profile-list h2 { margin-bottom: 1rem; font-weight: 600; }
.profiles { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease);
}
.profile-card:hover { border-color: var(--border-hover); }
.profile-info { display: flex; align-items: center; gap: 0.5rem; }
.profile-info h3 { font-size: 0.9375rem; font-weight: 500; }
.profile-actions { display: flex; gap: 0.375rem; }
.empty { color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; }

/* profile editor */
.profile-editor {
  max-width: 30rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}
.profile-editor h3 { margin-bottom: 1rem; font-weight: 600; }

/* ── forms ──────────────────────────────────────────────────── */
.field { margin-bottom: 0.875rem; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.3125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input, .field select {
  width: 100%;
  padding: 0.4375rem 0.625rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.field-row { display: flex; gap: 0.75rem; }
.field-row .field { flex: 1; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem;
  margin-bottom: 0.875rem;
}
legend { font-size: 0.75rem; color: var(--muted); padding: 0 0.25rem; font-weight: 500; }
.genre-checks { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.form-actions { margin-top: 1.25rem; }

/* ── requests page ──────────────────────────────────────────── */
.requests-page { max-width: 60rem; margin: 0 auto; }
.requests-page h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }

.request-filters {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.filter-tab {
  color: var(--muted);
  text-decoration: none;
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
}
.filter-tab:hover { color: var(--text); background: var(--surface); }
.filter-tab.filter-active {
  color: var(--text);
  background: var(--surface-2);
  font-weight: 600;
}

.request-list { display: flex; flex-direction: column; gap: 0.625rem; }
.request-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  transition: border-color var(--duration) var(--ease);
}
.request-row:hover { border-color: var(--border-hover); }

.request-poster {
  width: 48px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.request-info { flex: 1; min-width: 0; }
.request-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color var(--duration) var(--ease);
}
.request-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.3125rem;
  font-size: 0.75rem;
}
.request-date { color: var(--muted); }
.request-actions { display: flex; gap: 0.375rem; flex-shrink: 0; }

.request-poster-link { flex-shrink: 0; line-height: 0; }
.request-poster-link:hover .request-poster { opacity: 0.8; }
.request-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── request card grid (aligned with .grid.media-grid for visual coherence) */
.request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
}
.req-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all 0.2s var(--ease);
}
.req-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(167,139,250,0.15);
}
.req-card-poster-link { display: block; line-height: 0; }
.req-card-poster {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 2 / 3;
}
.req-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease);
}
.req-card:hover .req-card-poster img { transform: scale(1.04); }
.req-status-chip {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.65);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  z-index: 2;
}
/* per-status colors — higher-specificity than standalone .badge-* so the
   chip wins over the full-size pill styles at line 1827. */
.req-status-chip.badge-available,
.req-status-chip.badge-approved  { background: var(--green-dim); color: var(--green); border: 0; border-radius: var(--radius-sm); padding: 0.2rem 0.45rem; font-size: 0.6rem; }
.req-status-chip.badge-pending   { background: var(--yellow-dim); color: var(--yellow); border: 0; border-radius: var(--radius-sm); padding: 0.2rem 0.45rem; font-size: 0.6rem; }
.req-status-chip.badge-denied    { background: var(--red-dim); color: var(--red); border: 0; border-radius: var(--radius-sm); padding: 0.2rem 0.45rem; font-size: 0.6rem; }
.req-status-chip.badge-downloading { background: color-mix(in srgb, var(--accent) 25%, rgba(0,0,0,0.55)); color: var(--accent); border-radius: var(--radius-sm); padding: 0.2rem 0.45rem; font-size: 0.6rem; }
.req-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
}
.req-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 1s linear;
}
.req-card-info { display: flex; flex-direction: column; gap: 0.25rem; }
.req-card-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.req-card-title:hover { color: var(--accent); }
.req-card-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.7rem;
  flex-wrap: wrap;
}
.req-dl-stats { display: flex; gap: 0.4rem; font-size: 0.7rem; flex-wrap: wrap; }
.req-admin-actions { display: flex; gap: 0.3rem; margin-top: 0.25rem; flex-wrap: wrap; }

.btn-warn { color: var(--yellow); border-color: rgba(234,179,8,0.3); }
.btn-warn:hover { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); }

.approve-form {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 0.5rem;
}
.approve-form h4 { margin: 0 0 0.75rem; font-size: 0.875rem; }
.approve-seasons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.season-check { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; cursor: pointer; }
.approve-form-actions { display: flex; gap: 0.5rem; }

/* ── login ──────────────────────────────────────────────────── */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-ghost) 0%, transparent 100%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 22rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-align: center;
  margin-bottom: 0.25rem;
}
.login-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 1.75rem;
}
.login-error {
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--red);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.login-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.625rem;
  font-size: 0.9375rem;
}
.login-card .field { margin-bottom: 1rem; }
.login-card .field label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.login-card .field input {
  font-size: 0.9375rem;
  padding: 0.5625rem 0.75rem;
}

/* ── admin ──────────────────────────────────────────────────── */
.admin-page { max-width: 72rem; margin: 0 auto; }
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.admin-header h1 { font-size: 1.5rem; font-weight: 700; }
.admin-nav { display: flex; gap: 0.5rem; }
.admin-nav .btn.active { background: var(--accent); color: var(--bg); }
.input-sm { padding: 0.25rem 0.5rem; font-size: 0.8125rem; }

/* Inline table inputs (admin user table) */
.admin-table select.input,
.admin-table input.input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
}
.admin-table select.input { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.375rem center; }
.admin-table select.input:focus,
.admin-table input.input:focus { outline: none; border-color: var(--accent); }

/* Hide number spinners globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Collapsible log groups */
.log-groups { display: flex; flex-direction: column; gap: 0.5rem; }
.log-group { border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.log-group-summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; background: var(--surface); user-select: none; }
.log-group-summary:hover { background: var(--surface-2); }
.log-group[open] .log-group-summary { border-bottom: 1px solid var(--border); }
.log-group .admin-table-wrap { max-height: 24rem; overflow-y: auto; }
.log-group .admin-table { font-size: 0.8125rem; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-table td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.admin-table tr { transition: background var(--duration) var(--ease); }
.admin-table tbody tr:hover { background: var(--surface); }

.user-name { font-weight: 600; }
.user-date { color: var(--muted); font-size: 0.8125rem; }
.muted-text { color: var(--muted); font-size: 0.75rem; }
.role-form { display: inline; }
.role-select {
  padding: 0.3125rem 0.5rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}
.role-select:focus { outline: none; border-color: var(--accent); }

.policy-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.policy-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.policy-input {
  width: 3.5rem;
  padding: 0.25rem 0.375rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8125rem;
  text-align: center;
}
.policy-input::placeholder { color: var(--text-muted); }
.policy-input:focus { outline: none; border-color: var(--accent); }
.policy-check {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.policy-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.btn-tiny {
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn-tiny:hover { border-color: var(--border-hover); color: var(--text); }

/* settings dashboard */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.settings-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color var(--duration) var(--ease);
}
.settings-card:hover { border-color: var(--border-hover); }
.settings-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
}
.settings-label { font-size: 0.8125rem; color: var(--muted); }
.settings-value { font-size: 0.8125rem; font-weight: 500; }
.status-ok { color: var(--green); }
.status-err { color: var(--red); }
.conn-ok { color: var(--green); font-weight: 600; }
.conn-err { color: var(--red); font-weight: 600; }

.settings-card-wide {
  grid-column: 1 / -1;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.input,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
}
.input:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}
.form-group-full {
  grid-column: 1 / -1;
}
.form-group-wide {
  grid-column: 1 / -1;
}
.input-mono {
  font-family: monospace;
  font-size: 0.85rem;
}
.settings-card .btn {
  margin-top: 1rem;
}
.settings-card .btn-inline {
  margin-top: 0;
}
.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── error page ─────────────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}
.error-card { text-align: center; max-width: 28rem; }
.error-code {
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.error-title { font-size: 1.5rem; font-weight: 600; margin: 0.75rem 0; }
.error-message { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }
.error-detail {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--red);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  white-space: pre-wrap;
}
.error-home { display: inline-block; text-decoration: none; }

/* ── empty state ────────────────────────────────────────────── */
.empty-state {
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
}
.empty-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  color: var(--muted);
  text-align: center;
}
.empty-state-box svg { opacity: 0.5; }
.empty-state-box > p:first-child {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}
.empty-state-box .empty-hint {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  max-width: 24rem;
  margin: 0;
  line-height: 1.45;
}

/* ── toast notifications ────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast-show { opacity: 1; transform: translateX(0); }
.toast-hide { opacity: 0; transform: translateX(1rem); }
.toast-info    { border-left: 3px solid var(--accent); }
.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--red); }

/* ── HTMX states ────────────────────────────────────────────── */
.htmx-settling { opacity: 0; transition: opacity 0.2s var(--ease); }
.htmx-added { opacity: 1; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

.grid-loading {
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary, var(--muted));
  padding: 0.25rem 0;
}

.htmx-request #media-grid, .htmx-request .media-grid { opacity: 0.5; transition: opacity 0.2s var(--ease); }

#rec-section { min-height: 12rem; }
#rec-section:not(.rec-skeleton) { min-height: auto; }

.spinner {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn.htmx-request,
.request-btn.htmx-request,
.taste-btn.htmx-request {
  opacity: 0.5;
  pointer-events: none;
  cursor: wait;
}

/* ── notifications ───────────────────────────────────────── */
.nav-notif {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-notif svg { opacity: 0.7; transition: opacity var(--duration) var(--ease); }
.nav-notif:hover svg { opacity: 1; }
.nav-settings { display: flex; align-items: center; }
.nav-settings svg { opacity: 0.7; transition: opacity var(--duration) var(--ease); }
.nav-settings:hover svg { opacity: 1; }
.notif-dot {
  position: absolute;
  top: -0.25rem;
  right: -0.5rem;
  background: var(--red);
  color: var(--bg);
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  border-radius: 999px;
  padding: 0 0.25rem;
}

.notifications { max-width: 60rem; margin: 0 auto; }
.notifications h1 { margin-bottom: 1.5rem; }

.notif-list { display: flex; flex-direction: column; gap: 0.5rem; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease);
}
.notif-item:hover { border-color: var(--border-hover); }
a.notif-link {
  text-decoration: none;
  cursor: pointer;
}
a.notif-link:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.notif-icon { flex-shrink: 0; padding-top: 0.125rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { display: block; color: var(--text); }
.notif-time { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.notif-arrow { flex-shrink: 0; align-self: center; opacity: 0.4; transition: opacity var(--duration) var(--ease); }
a.notif-link:hover .notif-arrow { opacity: 1; }

/* ── settings ────────────────────────────────────────────── */
.settings-page { max-width: 32rem; margin: 0 auto; }
.settings-page h2 { font-weight: 600; margin-bottom: 1.25rem; }
.settings-page .settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.settings-section {
  padding: 1.25rem 1.5rem;
}
.settings-section + .settings-section {
  border-top: 1px solid var(--border);
}
.settings-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.setting-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.setting-value {
  font-size: 0.875rem;
  color: var(--text);
  font-weight: 500;
}
.settings-section select.input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
}
.settings-section .btn {
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── tablet (≤64rem / 1024px) ──────────────────────────────── */
@media (max-width: 64rem) {
  .nav-link { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
  .discover { margin-left: 14.5rem; }
  .filters,
  .save-filter-profile { width: 14.5rem; }
  .detail-hero { grid-template-columns: 11rem 1fr; gap: 1.5rem; }
  .hero-poster { width: 11rem; }
  .rec-cards .media-card { width: 9.5rem; min-width: 9.5rem; }
}

/* ── small tablet / large phone (≤50rem / 800px) ──────────── */
@media (max-width: 50rem) {
  .discover-mode-switcher { top: var(--header-height); width: 100%; }
  .discover-mode { flex: 1; min-width: 0; }
  .discover-feature { grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr); min-height: 15rem; }
  .discover-feature-poster { min-height: 15rem; }
  .discover-feature-copy { padding: 1.25rem; }
  .discover-feature-copy h2 { font-size: 1.75rem; }
  .discover-feature-copy > p:not(.discover-feature-meta) { display: none; }

  nav { flex-wrap: wrap; height: auto; min-height: 3.5rem; padding: 0.5rem 1rem; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links { gap: 0; }
  /* On mobile the top nav keeps only logout: discover/taste/requests/settings/notif
     live in the bottom-nav + the standalone mobile bell. Hiding .nav-notif here
     prevents the desktop bell from duplicating the mobile bell at <768px. */
  .nav-links > a:not(.nav-logout) { display: none; }
  .nav-link { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  .nav-notif-mobile { display: flex; }
  .omni-search { order: 1; flex-basis: 100%; margin-top: 0.375rem; }
  .omni-kbd { display: none; }

  /* iOS Safari zooms any input whose computed font-size is <16px. Keep every
     interactive text field at 16px on mobile so tapping never triggers a
     disruptive zoom. Desktop sizing is untouched. */
  input, select, textarea { font-size: 16px; }
  /* Search input (smaller by design on desktop) — also normalize on mobile. */
  .omni-search input { font-size: 16px; }

  /* discover → single column, filter full-screen */
  .discover { margin-left: 0; }
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .filters {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    background: var(--bg);
    border: none;
    border-radius: 0;
    overflow-y: auto;
    padding: 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 0;
  }
  body.filters-open .filters { display: flex; }
  body.filters-open .filter-backdrop { display: none; }
  .save-filter-profile {
    display: none;
    width: 100%;
    z-index: 61;
  }
  body.filters-open .save-filter-profile { display: block; }
  .filter-close { display: none; }

  /* mobile filter header — sticky bar */
  .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .filter-header-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
  }
  .filter-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  /* detail page responsive */
  .detail-hero { grid-template-columns: 10rem 1fr; gap: 1.25rem; margin-top: -6rem; }
  .hero-poster { width: 10rem; }
  .hero-title { font-size: 1.5rem; }
  /* Backdrop eats screen real estate on phones — shrink so the hero text
     + action fit above the fold without scrolling. */
  .detail-backdrop { height: clamp(13rem, 32vh, 18rem); margin: calc(-1.5rem - 3.5rem) -1rem 0; }
  .detail-backdrop--empty { height: clamp(10rem, 22vh, 14rem); margin: calc(-1.5rem - 3.5rem) -1rem 0; }

  /* request rows */
  .request-row { flex-wrap: wrap; gap: 0.75rem; }
  .request-actions { width: 100%; justify-content: flex-end; }

  /* admin — card layout on mobile */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table thead { display: none; }
  .admin-table,
  .admin-table tbody { display: block; }
  .admin-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.875rem;
    border-bottom: 1px solid var(--border);
    gap: 0.25rem 1rem;
  }
  .admin-table td {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: none;
    font-size: 0.875rem;
  }
  .admin-table td > * {
    min-width: 0;
  }
  .admin-table code {
    overflow-wrap: anywhere;
  }
  .admin-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  /* users table — card per user */
  .admin-users-table tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.5rem;
    padding: 1rem;
  }
  .admin-users-table .user-name {
    width: 100%;
    font-size: 1rem;
  }
  .admin-users-table .user-name::before { display: none; }
  .admin-users-table td:last-child { margin-left: auto; }

  /* job history — card rows */
  .job-history .admin-table tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.5rem;
    padding: 0.875rem 1rem;
    position: relative;
  }
  .job-history .admin-table td:first-child {
    width: 100%;
    font-weight: 600;
    font-size: 0.9375rem;
  }
  .job-history .admin-table td:first-child::before { display: none; }
  .job-history .admin-table td[data-label="Status"] { position: absolute; top: 0.875rem; right: 1rem; }
  .job-history .admin-table td[data-label="Status"]::before { display: none; }
  .job-log-row { flex-direction: column; }
  .job-log-row td { width: 100%; }
  .job-log-row td::before { display: none; }
  .job-row-expandable::after { position: absolute; bottom: 0.875rem; right: 1rem; }

  /* settings grid */
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .settings-card .btn { width: 100%; text-align: center; }

  /* notifications */
  .notif-item { gap: 0.5rem; padding: 0.625rem 0.75rem; }
}

/* ── phone (≤36rem / 576px) ────────────────────────────────── */
@media (max-width: 36rem) {
  main { padding: 0.75rem; }
  nav { padding: 0.5rem 0.75rem; gap: 0.5rem; }

  /* grid */
  .grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; }
  .similar-cards { gap: 0.5rem; }
  .similar-card { width: 8rem; min-width: 8rem; }

  /* search dropdown */
  .omni-dropdown { width: calc(100vw - 1.5rem); right: -0.5rem; border-radius: 0 0 var(--radius) var(--radius); }

  /* detail page → stacked */
  .detail-hero {
    grid-template-columns: 1fr;
    margin-top: -2rem;
    text-align: center;
    justify-items: center;
  }
  .hero-poster { width: 8rem; }
  .hero-info { padding-bottom: 0; }
  .hero-title { font-size: 1.25rem; }
  .hero-meta { justify-content: center; }
  .hero-badges { justify-content: center; }
  .hero-ratings { justify-content: center; }
  .hero-actions { justify-content: center; }
  /* Even tighter backdrop at the smallest breakpoint. */
  .detail-backdrop { height: clamp(10rem, 26vh, 14rem); }
  .detail-backdrop--empty { height: clamp(8rem, 18vh, 11rem); }
  .detail-body { padding: 1.5rem 0.75rem 0; }
  .detail-backdrop { margin: -0.75rem -0.75rem 0; }
  .trailer-card { flex: 0 0 14rem; }
  .cast-card { flex: 0 0 5.5rem; }
  .cast-photo, .cast-photo--placeholder { width: 5.5rem; height: 5.5rem; }
  .ep-brief { flex-wrap: wrap; }

  /* request row → stack */
  .request-poster { width: 40px; height: 60px; }
  .request-row { padding: 0.625rem 0.75rem; }

  /* rec cards smaller */
  .rec-cards .media-card { width: 7.5rem; min-width: 7.5rem; }

  /* surprise banner */
  .surprise-banner { flex-wrap: wrap; padding: 0.625rem 1rem; gap: 0.5rem; }
  .surprise-reason { font-size: 0.8125rem; }

  /* settings */
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 1rem; }
  .admin-header h1 { font-size: 1.25rem; }

  /* user cards — stack all fields */
  .admin-users-table tr {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .admin-users-table td:last-child { margin-left: 0; width: 100%; }
  .admin-users-table td:last-child .btn { width: 100%; text-align: center; }
  .role-select { width: 100%; }

  /* job cards — tighter on small screens */
  .job-history .admin-table td[data-label="Status"] { position: static; }
  .job-history .admin-table td[data-label="Status"]::before { display: flex; }
  .job-history .admin-table tr { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .job-history .admin-table td:first-child { font-size: 0.875rem; }
  .job-row-expandable::after { position: static; float: none; align-self: flex-end; }

  /* notifications */
  .notifications h1 { font-size: 1.25rem; }
  .notif-text { font-size: 0.875rem; }

  /* profile card */
  .profile-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .profile-actions { width: 100%; }

  /* taste buttons — tighter on phone */
  .taste-buttons { gap: 0.5rem; }
  .taste-btn { padding: 0.3rem 0.625rem; font-size: 0.75rem; }

  /* type tabs — compact */
  .type-tab { padding: 0.375rem 0.5rem; font-size: 0.75rem; gap: 0.25rem; }
}

/* ── tiny phone (≤26rem / 416px) ───────────────────────────── */
@media (max-width: 26rem) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .info h3 { font-size: 0.75rem; }
  .meta { font-size: 0.625rem; }
  .type-toggle { gap: 0.125rem; }
  .toggle-link, .toggle-active { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
  .btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
}


/* ── admin job history ─────────────────────────────────────── */
.job-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.job-history { margin-top: 0.5rem; }
.job-history .admin-table td,
.job-history .admin-table th { font-size: 0.8125rem; }
.job-row-expandable { cursor: pointer; }
.job-row-expandable:hover { background: var(--surface); }
.job-row-expandable::after { content: "▸"; float: right; color: var(--muted); font-size: 0.75rem; transition: transform var(--duration) var(--ease); }
.job-row-expandable.expanded::after { transform: rotate(90deg); }
.job-log-row td { padding: 0 !important; }
.job-log-row.hidden { display: none; }
.job-log-full {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-family: var(--mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow-y: auto;
  color: var(--text);
  scrollbar-width: thin;
}
.job-log-error { border-left: 3px solid var(--red); }

/* ── Job dashboard card layout ─────────────────────────────── */
.job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.job-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.job-interval-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.job-interval-label {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.job-interval-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.job-interval-row input[type="number"] {
  width: 5.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8125rem;
  font-family: inherit;
}
.job-interval-row input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}
.job-interval-hint {
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1;
}
.job-error-box {
  margin-top: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--red);
}
.status-running { color: var(--yellow); }
.muted { color: var(--muted); }

/* ── Provider / Network filter controls ────────────────────── */
.provider-filter,
.network-filter { margin-top: 0; }
.provider-filter summary,
.network-filter summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
  transition: color var(--duration) var(--ease);
  list-style: none;
}
.provider-filter summary::-webkit-details-marker,
.network-filter summary::-webkit-details-marker { display: none; }
.provider-filter summary::after,
.network-filter summary::after {
  content: "▸";
  float: right;
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform var(--duration) var(--ease);
}
.provider-filter[open] summary::after,
.network-filter[open] summary::after { transform: rotate(90deg); }
.provider-filter summary:hover,
.network-filter summary:hover { color: var(--text); }
.provider-list,
.network-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.provider-pill,
.network-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.filter-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(0.5);
  border: 2px solid transparent;
  transition: all var(--duration) var(--ease);
}
.provider-pill:hover .filter-logo,
.network-check:hover .filter-logo {
  opacity: 0.7;
  filter: grayscale(0.2);
}
.provider-active .filter-logo,
.network-check:has(input:checked) .filter-logo {
  opacity: 1;
  filter: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.filter-logo-label {
  font-size: 0.625rem;
  color: var(--muted);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── bottom nav (mobile) ───────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(9,9,11,0.72);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid var(--glass-border);
  padding: 0.375rem 0;
  padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
}
.bottom-nav-item {
  display: flex;
  flex: 1 1 2.75rem;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--duration) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottom-nav-item:hover,
.bottom-nav-item:active { color: var(--text); }
.bottom-nav-item svg { opacity: 0.7; transition: opacity var(--duration) var(--ease); }
.bottom-nav-item:hover svg,
.bottom-nav-item:active svg { opacity: 1; }

@media (max-width: 48rem) {
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  main { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Library states ── */
.library-page { padding: 1.5rem; }
.library-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.library-filter label { width: 100%; }
.library-filter input { flex: 1 1 18rem; }
.library-states { justify-content: flex-start; }
.library-filter {
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.library-filter label { width: min(100%, 32rem); }
.library-filter input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.library-filter input:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 1px;
}
.library-grid,
.monitor-list { margin-top: 1rem; }
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
}
.library-card {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.library-poster-link {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.library-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-card-body { padding: 0.75rem; }
.library-card-body > a {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.library-card-body > a:hover { color: var(--accent); }
.library-card-body p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.monitor-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.monitor-list { display: grid; gap: 0.75rem; }
.monitor-row { justify-content: space-between; }
.monitor-row > div:last-child { display: grid; text-align: right; }
.activity-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.activity-header h1 { margin-bottom: 0; }
.activity-tabs,
.system-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.activity-tabs a,
.system-tabs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.activity-tabs a:hover,
.activity-tabs a[aria-current="page"],
.system-tabs a:hover,
.system-tabs a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.notification-recovery {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: -0.5rem 0 0.75rem 3rem;
  padding: 0.75rem;
  border-left: 3px solid var(--red);
  background: var(--surface-2);
}
.notification-recovery p { flex: 1 1 20rem; margin: 0; }
.notification-recovery form { margin: 0; }
.personal-settings { max-width: 36rem; }
.account-actions { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.account-actions p { color: var(--muted); }
.bounded-setting-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.bounded-setting-form h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  text-transform: capitalize;
}
.bounded-setting-form form {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(12rem, 2fr) auto;
  gap: 0.625rem;
  align-items: end;
}
.bounded-setting-form label {
  margin: 0 0 0.625rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.bounded-setting-form form .btn { margin-top: 0; min-height: 2.75rem; }
.bounded-setting-form .form-actions { display: flex; gap: 0.5rem; }
@media (max-width: 700px) {
  .bounded-setting-form form { grid-template-columns: 1fr; }
  .bounded-setting-form label { margin-bottom: -0.25rem; }
  .bounded-setting-form form .btn { width: 100%; }
}
.setting-feedback { margin: 0 0 1rem; padding: 0.75rem; border-left: 3px solid var(--green); background: var(--surface-2); }
.setting-feedback.error { border-left-color: var(--red); }
@media (max-width: 700px) {
  .activity-header { align-items: stretch; flex-direction: column; }
  .activity-tabs,
  .system-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .activity-tabs a,
  .system-tabs a { justify-content: center; padding-inline: 0.5rem; text-align: center; }
}

.sync-review { max-width: 42rem; }
.sync-review-list {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.sync-review-list article { border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ── inline form errors (HTMX retargeted) ── */
.form-error {
  color: var(--red);
  font-size: 0.8125rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,0.3);
}
.form-error:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   omen-v2 additions — grab engine, downloads, history
   Features not present in original omen
   ═══════════════════════════════════════════════════════════════ */

/* ── download progress (inline on requests + download page) ─── */
#download-page { max-width: 72rem; margin: 0 auto; }
.dl-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dl-progress-bar, .progress-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dl-progress-fill, .progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease);
}

.dl-progress-fill.complete, .progress-fill.complete { background: var(--green); }
.dl-progress-fill.failed, .progress-fill.failed { background: var(--red); }

.dl-speed { color: var(--muted); font-size: 0.6875rem; }
.dl-eta { color: var(--muted); font-size: 0.6875rem; }
.dl-pct { font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; }
.dl-stats { display: flex; gap: 0.5rem; margin-top: 0.25rem; }

/* ── download page (card layout) ──────────────────────────── */
.sab-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.sab-banner-icon { font-size: 1rem; }
.banner-warn {
  background: color-mix(in srgb, var(--warning) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--warning);
}
.banner-error {
  background: color-mix(in srgb, var(--red) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red);
}

.dl-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  color: var(--text);
}
.dl-section-title:first-of-type { margin-top: 0.5rem; }

.dl-cards { display: flex; flex-direction: column; gap: 0.5rem; }

.dl-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s var(--ease);
}
.dl-card:hover { border-color: var(--accent); }

.dl-card-poster {
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: calc(var(--radius) / 2);
  flex-shrink: 0;
  background: var(--surface-2);
}
.dl-card-no-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dl-card-info { flex: 1; min-width: 0; }
.dl-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-card-meta {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.dl-card-actions { flex-shrink: 0; display: flex; gap: 0.375rem; }

.badge-queued { background: var(--surface-2); color: var(--muted); }
.badge-downloading { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.badge-post_processing { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.badge-completed { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.badge-failed { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.badge-cancelled { background: var(--surface-2); color: var(--muted); }

/* ── history page ─────────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 0.25rem; }

.history-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.history-event:last-child { border-bottom: none; }

.event-type {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--surface-2);
  color: var(--text-secondary);
}

.event-type.grab { background: var(--accent-ghost); color: var(--accent); }
.event-type.import { background: var(--green-dim); color: var(--green); }
.event-type.fail { background: var(--red-dim); color: var(--red); }

.event-date { color: var(--muted); font-size: 0.75rem; }

/* ── indexer management ───────────────────────────────────── */
.indexer-list { display: flex; flex-direction: column; gap: 0.75rem; }

.indexer-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease);
}

.indexer-card:hover { border-color: var(--border-hover); }

.indexer-name {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}
.indexer-url {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.indexer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
}

.indexer-status.enabled {
  color: var(--green);
  background: var(--green-dim);
}
.indexer-status.disabled {
  color: var(--muted);
  background: var(--surface-2);
}

.category-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.2rem 0;
  white-space: nowrap;
}
.category-check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 0.9rem;
  height: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── quality profiles ─────────────────────────────────────── */
.qp-list { display: flex; flex-direction: column; gap: 0.5rem; }

.qp-card {
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.qp-name { font-weight: 600; font-size: 0.875rem; }
.qp-meta { color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.25rem; }
.qp-default { color: var(--accent); font-size: 0.6875rem; font-weight: 600; }

.qp-test-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.qp-test-row[data-passes="true"] { border-color: rgba(52,211,153,0.3); }
.qp-test-row[data-passes="false"] { opacity: 0.65; }
.qp-test-info { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.qp-test-name { font-weight: 600; }
.qp-test-type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.qp-test-reason { color: var(--muted); font-family: monospace; font-size: 0.8rem; }
.qp-test-badge { white-space: nowrap; flex-shrink: 0; }

/* ── monitor toggle ───────────────────────────────────────── */
.monitor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.monitor-btn:hover { border-color: var(--accent); color: var(--accent); }
.monitor-btn.active { background: var(--accent-ghost); border-color: var(--accent); color: var(--accent); }

/* ── grab search results ──────────────────────────────────── */
.grab-results { display: flex; flex-direction: column; gap: 0.25rem; }
tr.release-rejected td { opacity: 0.55; }
tr.release-rejected td:first-child { opacity: 1; }
.release-reject-reason {
  display: block;
  font-size: 0.7rem;
  color: var(--red);
  margin-top: 0.15rem;
  font-style: italic;
}
.release-reject-badge { color: var(--red); font-size: 0.85rem; }

.grab-result {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.grab-result:hover { background: var(--surface-2); }

.grab-title { font-weight: 500; }
.grab-size { color: var(--muted); font-size: 0.75rem; }
.grab-quality { font-size: 0.6875rem; color: var(--accent); }

/* ── request list enhancements (v2 download state) ────────── */
.request-card .dl-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.request-card .admin-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* ── system status (admin dashboard) ──────────────────────── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.status-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.status-card .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.status-card .value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }

/* ── log level badges ─────────────────────────────────────── */
.log-error { color: var(--deny); font-weight: 700; }
.log-warn  { color: #f59e0b; font-weight: 600; }
.log-info  { color: var(--approve); }
.log-debug { color: var(--muted); }

/* ── toast notification ───────────────────────────────────── */
.omen-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  transition: transform 0.22s var(--ease);
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
.omen-toast.show {
  transform: translateX(-50%) translateY(0);
}
.omen-toast.toast-err {
  border-color: var(--deny);
  color: var(--deny);
}

/* ── mobile back button ───────────────────────────────────── */
.nav-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-back:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 48rem) {
  .nav-back { display: inline-flex; }
}

/* ── notification list ────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.notif-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.notif-row:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.notif-row.unread { border-left: 3px solid var(--accent); }
.notif-row.unread .notif-title { font-weight: 600; }
.notif-thumb {
  position: relative;
  width: 3.25rem;
  height: 4.875rem;
  flex-shrink: 0;
}
.notif-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) * 0.75);
  background: var(--surface-2);
}
.notif-poster--empty {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
}
.notif-badge {
  position: absolute;
  bottom: -0.25rem;
  right: -0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}
.notif-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.notif-title { font-size: 0.9375rem; color: var(--text); }
.notif-text { font-size: 0.8125rem; color: var(--text-secondary); }
.notif-media { font-size: 0.875rem; color: var(--text); font-weight: 500; }
.notif-year { font-weight: 400; }
.notif-time { font-size: 0.75rem; }
.notif-read-btn { flex-shrink: 0; }
@media (max-width: 36rem) {
  .notif-row { padding: 0.5rem 0.625rem; gap: 0.625rem; }
  .notif-thumb { width: 2.75rem; height: 4.125rem; }
  .notif-title { font-size: 0.875rem; }
  .notif-text { font-size: 0.75rem; }
}

/* Trigger continuation before the reader reaches the loaded results' edge.
   Keep the manual fallback button at the true document position. */
.browse-prefetch { transform: translateY(-200vh); }
.browse-prefetch > button { transform: translateY(200vh); }