@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent: #F5A623;
  --accent-bg: rgba(245,166,35,0.05);
  --accent-muted: rgba(245,166,35,0.19);
  --bg: #0A0F1E;
  --bg-card: rgba(255,255,255,0.06);
  --text: #F5F5FA;
  --text-muted: #C8CCDB;
  --text-light: #C8CCDB;
  --border: rgba(255,255,255,0.16);
  --border-check: rgba(255,255,255,0.48);
  --ghost-bg: rgba(255,255,255,0.04);
  --ghost-text: #C8CCDB;
  --radius: 12px;
  --radius-sm: 8px;
  --max-width: 900px;
  --transition: 0.15s ease;
  --font-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --glass: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.16);
  --bg2: #12121A;
  --text2: #C8CCDB;
  --indigo: #3D1A8E;
  --crimson: #8E1A3D;
  --teal: #0A4A3A;
  --accent2: #00D4AA;
  --accent3: #60A5FA;
  --success: #00D4AA;
  --danger: #E54D4D;
  --danger-bg: rgba(229,77,77,0.08);
  --danger-border: rgba(229,77,77,0.3);
  --danger-hover: rgba(229,77,77,0.2);
}

body {
  font-family: var(--font-serif);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* === Ambient Background === */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: var(--indigo);
  top: -200px;
  left: -100px;
  animation: drift1 18s ease-in-out infinite alternate;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: var(--crimson);
  bottom: -150px;
  right: -100px;
  animation: drift2 22s ease-in-out infinite alternate;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: var(--teal);
  top: 40%;
  left: 40%;
  animation: drift3 26s ease-in-out infinite alternate;
}

@keyframes drift1 { to { transform: translate(60px, 40px); } }
@keyframes drift2 { to { transform: translate(-60px, -40px); } }
@keyframes drift3 { to { transform: translate(-80px, 60px); } }

.page {
  position: relative;
  z-index: 1;
}

/* === Spotlight Logo & Beam === */
/* The logo artboard is trimmed to the artwork (viewBox 120 28 416 193), so these
   offsets position the ink directly — they are not padding compensation.
   Height is bounded by the 72px nav: it has to be small enough that the orb's
   halo clears the viewport top while the wordmark still tucks above the nav's
   bottom border. At 80px the halo starts at 2.5px and the wordmark ends at
   71.3px — both edges land inside. Re-check both if the nav height changes. */
.spotlight-logo-container {
  position: fixed;
  top: 0;
  left: 34px;
  z-index: 101;
}

.spotlight-logo {
  height: 80px;
  width: auto;
  display: block;
}

.spotlight-beam {
  display: none;
}

/* === Nav (v2) === */
nav.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(10, 15, 30, 0.65);
  border-bottom: 1px solid var(--glass-border);
  padding: 16px 48px;
}

.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 39px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); }

/* Discover dropdown */
.nav-discover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.discover-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.discover-trigger:hover { color: var(--text); }
.discover-trigger.active { color: var(--accent); }
.discover-trigger svg { width: 14px; height: 14px; }

.discover-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 160px;
  background: rgba(18, 18, 26, 0.95);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.discover-dropdown.open { display: block; }

.discover-dropdown-form {
  display: block;
  margin: 0;
}

.discover-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.discover-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.discover-dropdown-item svg { width: 16px; height: 16px; color: var(--text-muted); }

/* Search icon button */
.nav-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.nav-search:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.nav-search svg { width: 18px; height: 18px; }

/* Nav-integrated search (Feature 1: My Content / global search) */
.nav-search-area {
  display: flex;
  align-items: center;
}

.nav-search-expanded {
  position: relative;
  flex: 1;
  max-width: 420px;
}

.nav-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.10);
}

.nav-search-input-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.nav-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  min-width: 0;
}

.nav-search-input::placeholder {
  color: var(--text-muted);
}

.nav-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.nav-search-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.nav-search-close svg {
  width: 14px;
  height: 14px;
}

#nav-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 400;
}

#nav-search-results .search-dropdown {
  position: static;
  border-top: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

.search-scrim {
  position: fixed;
  inset: 0;
  top: 71px;
  background: rgba(10, 15, 30, 0.5);
  z-index: 90;
}

.search-scrim[hidden] {
  display: none;
}

/* Avatar / profile dropdown */
.nav-profile {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
}

.nav-profile .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--crimson));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.nav-profile-chevron { width: 14px; height: 14px; }

.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(18, 18, 26, 0.95);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.avatar-dropdown.open { display: block; }

.avatar-dropdown a,
.avatar-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.avatar-dropdown a svg,
.avatar-dropdown button svg { width: 16px; height: 16px; color: var(--text-muted); }

.avatar-dropdown .divider-line {
  height: 1px;
  background: var(--glass-border);
  margin: 4px 8px;
}

.avatar-dropdown .signout-form { display: contents; }

.avatar-dropdown a.text-muted-link,
.avatar-dropdown button.text-muted-link { color: var(--text-muted); font-size: 12px; }
.avatar-dropdown a.text-muted-link:hover,
.avatar-dropdown button.text-muted-link:hover { color: var(--text); }

/* === Footer (v2) === */
footer.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--glass-border);
  padding: 24px 24px 32px;
  margin-top: 0;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.15s;
}

.footer-links a:hover { color: var(--text); }

.footer-dot {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 12px;
}

.footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.5;
}

@media (max-width: 700px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* === Layout === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

.screen-pad {
  padding: 28px 24px;
}

/* === Wizard Progress Bar === */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 48px 16px;
  gap: 0;
  max-width: 600px;
  margin: 0 auto;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.wizard-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: var(--text2);
  border: 2px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.wizard-step.active .wizard-circle,
.wizard-step.completed .wizard-circle {
  background: var(--accent);
  color: #0A0F1E;
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.3);
}

.wizard-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.3;
}

.wizard-step.active .wizard-label,
.wizard-step.completed .wizard-label {
  color: var(--accent);
}

.wizard-line {
  width: 48px;
  flex-shrink: 0;
  height: 2px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 22px;
  transition: all 0.3s ease;
}

.wizard-line.completed {
  background: var(--accent);
}

/* === Typography === */
h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 16px;
  color: var(--text);
}

h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 4px;
}

.subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Poster + title header for the onboarding rate/hooks steps */
.onboarding-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.onboarding-title.has-description {
  align-items: flex-start;
}

.onboarding-title-poster {
  width: 46px;
  height: 69px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ghost-bg);
}

.onboarding-title-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.onboarding-title-text h2 {
  margin-bottom: 2px;
}

.onboarding-title-text .subtitle {
  margin-bottom: 0;
}

.onboarding-title-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.helper-text {
  font-size: 13px;
  color: var(--text-muted);
}

.accent-italic {
  font-style: italic;
  color: var(--accent);
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-light);
  font-family: var(--font-sans);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.brand-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-family: var(--font-sans);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* === Home (blank) === */
.home-blank {
  padding: 48px 24px 80px;
  max-width: 900px;
  margin: 0 auto;
}

.greeting {
  margin-bottom: 24px;
}

.greeting h1 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}

.greeting h1 .emph {
  font-weight: 700;
  color: var(--accent);
}

.greeting .sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.greeting .sub strong {
  color: var(--text);
  font-weight: 600;
}

/* === Home onboarding hero (State A — no recommendations yet) === */
.onboard-hero {
  text-align: center;
  padding: 40px 24px 44px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(245,166,35,0.10), transparent 60%),
    var(--bg-card);
  backdrop-filter: blur(20px);
  margin-bottom: 36px;
}
.onboard-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
}
.onboard-hero .hero-eyebrow i { width: 13px; height: 13px; }
.onboard-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 12px;
}
.onboard-hero h1 .emph { color: var(--accent); }
.onboard-hero .hero-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 28px;
}
.onboard-hero .hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  text-decoration: none;
  min-width: 190px;
}
.btn-hero i { width: 17px; height: 17px; }
.btn-hero.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #0A0F1E;
}
.btn-hero.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245,166,35,0.4);
}
.btn-hero.outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-hero.outline:hover {
  background: var(--accent-bg);
  transform: translateY(-1px);
}
.onboard-hero .hero-microcopy {
  font-size: 13px;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .onboard-hero h1 { font-size: 24px; }
  .onboard-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-hero { min-width: 0; width: 100%; }
}

/* === Home content tiles (Feature 7) === */
.home-section {
  margin-top: 32px;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-height: 130px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.tile:hover {
  border-color: rgba(245, 166, 35, 0.35);
  transform: translateY(-2px);
}

.tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(245, 166, 35, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-icon svg {
  width: 14px;
  height: 14px;
}

.tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tile-count {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.tile-count-empty {
  font-size: 22px;
  color: var(--text-muted);
}

.tile-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: auto;
}

.tile-thumbs {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}

.tile-thumb {
  flex: 1;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg2);
  max-width: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--indigo), var(--crimson));
}

.tile.empty {
  cursor: pointer;
}

.tile.empty .tile-empty-msg {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.tile.empty .tile-empty-msg strong {
  color: var(--text);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

@media (max-width: 700px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* === Home picks preview === */
.home-picks-section .hidden {
  display: none !important;
}

.home-picks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.home-picks-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-picks-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.home-picks-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.home-picks-toggle {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  gap: 2px;
}

.home-picks-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  text-decoration: none;
  line-height: 1;
}

.home-picks-tab svg {
  width: 13px;
  height: 13px;
}

.home-picks-tab:hover {
  color: var(--text);
}

.home-picks-tab.active {
  background: var(--accent);
  color: var(--bg);
}

.home-picks-tab.disabled-tab {
  opacity: 0.4;
}

.home-picks-tab.disabled-tab:hover {
  opacity: 0.65;
  color: var(--text-muted);
}

.home-picks-lane {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.home-picks-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.home-picks-card:hover {
  border-color: rgba(245, 166, 35, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.home-picks-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--bg2);
  overflow: hidden;
}

.home-picks-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-picks-poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--indigo), var(--crimson));
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 8px;
}

.home-picks-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-picks-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-picks-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 700px) {
  .home-picks-lane {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-picks-header {
    align-items: flex-start;
  }
}

/* Focus highlight when arriving from home picks */
@keyframes recCardFocusHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
  20%  { box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.55), 0 0 32px rgba(245, 166, 35, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

.rec-card.rec-card-focus-highlight {
  animation: recCardFocusHighlight 2.2s ease-out !important;
  border-color: rgba(245, 166, 35, 0.6) !important;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--accent);
  color: #0A0F1E;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}


.btn-ghost {
  background: var(--glass);
  color: var(--text2);
  border: 1px solid var(--glass-border);
  padding: 12px 28px;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-block {
  width: 100%;
}

/* === Platform Badge === */
.platform-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.platform-netflix { background: rgba(229,9,20,0.2); color: #FF6B6B; }
.platform-apple { background: rgba(255,255,255,0.1); color: #CCCCCC; }
.platform-max { background: rgba(0,43,231,0.2); color: #6B8AFF; }
.platform-hulu { background: rgba(28,231,131,0.15); color: #4ADE80; }
.platform-peacock { background: rgba(255,255,255,0.1); color: #CCCCCC; }
.platform-amc { background: rgba(26,140,255,0.2); color: #60A5FA; }
.platform-disney { background: rgba(17,60,207,0.2); color: #7B9FFF; }
.platform-prime { background: rgba(0,168,225,0.2); color: #5BC0EB; }
.platform-paramount { background: rgba(0,100,210,0.2); color: #6BA3E8; }
.platform-default { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* === Search === */
.search-wrap {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(245,166,35,0.15);
}

.search-input::placeholder {
  color: var(--text2);
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(18, 18, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.search-no-results {
  padding: 12px 16px;
  color: var(--text2);
  font-size: 14px;
}

/* === Show List (search results) === */
.show-list {
  list-style: none;
}

.show-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-top: 1px solid var(--glass-border);
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: background var(--transition);
}

.show-item:hover {
  background: rgba(255,255,255,0.08);
}

.show-item-rich {
  gap: 10px;
  padding: 8px 14px;
}

.search-poster {
  width: 36px;
  height: 54px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ghost-bg);
}

.search-poster-placeholder {
  width: 36px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ghost-bg);
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 16px;
}

.search-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.search-item-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item-cast {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
  margin-top: 1px;
}

.show-year {
  color: var(--text-light);
}

/* === Added Shows List === */
.added-shows {
  margin-top: 28px;
  margin-bottom: 24px;
}

.added-show-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 6px;
  border: 1px solid var(--glass-border);
  font-size: 15px;
}

/* === Rewatch Toggle === */

/* === Relationship Selector === */
.relationship-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.relationship-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: 2px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  transition: all var(--transition);
}

.relationship-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(245,166,35,0.1);
}

.relationship-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

/* === Hook Cards === */
.hooks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 24px;
}

.hook-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.hook-card:hover {
  background: rgba(255,255,255,0.04);
}

.hook-card.selected {
  background: rgba(255,255,255,0.04);
}

.hook-card input[type="checkbox"] {
  display: none;
}

.hook-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-check);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.hook-card.selected .hook-check {
  background: var(--accent);
  border-color: var(--accent);
}

.hook-check-icon {
  display: none;
  color: #0A0F1E;
  font-size: 11px;
  font-weight: 700;
}

.hook-card.selected .hook-check-icon {
  display: block;
}

.hook-text {
  flex: 1;
  color: var(--text2);
  line-height: 1.4;
}

.hook-card.selected .hook-text {
  color: var(--text);
}

/* === Mood Filter Grid === */
.mood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0;
}

.mood-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  text-align: center;
}

.mood-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.1);
}

.mood-card.selected {
  border-color: var(--accent);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
}

.mood-card.selected .mood-card-icon {
  transform: scale(1.1);
}

.mood-card.selected .mood-card-label {
  color: var(--accent);
}

.mood-card input[type="checkbox"] {
  display: none;
}

.mood-card-icon {
  font-size: 28px;
  transition: transform var(--transition);
}

.mood-card-label {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.3;
  color: var(--text);
  transition: color var(--transition);
}

.mood-grid .mood-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 5px);
  justify-self: center;
}

.mood-panel-icon {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.25);
}

/* Mood chips — accent variant of db-chip */
.mood-chip:hover {
  border-color: rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.04);
}
.mood-chip.selected {
  border-color: rgba(245, 166, 35, 0.45);
  background: rgba(245, 166, 35, 0.08);
}
.mood-chip.selected .mood-chip-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* === Test Batch === */
.test-show-card {
  padding: 0;
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.test-show-card:hover {
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.test-show-card.responded {
  border-color: var(--accent-muted);
}

.test-show-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.test-show-title {
  font-size: 17px;
  font-weight: 500;
}

.test-show-year {
  color: var(--text-light);
  font-weight: 400;
}

.test-options {
  display: flex;
  gap: 8px;
}

.test-options-4 {
  flex-wrap: wrap;
}

.test-options-4 .test-option {
  flex: 1 1 calc(50% - 4px);
  min-width: calc(50% - 4px);
}

.test-option {
  flex: 1;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  color: var(--text);
  transition: all var(--transition);
}

.test-option:hover {
  border-color: var(--accent);
}

.test-option.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.test-responded {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}

/* === Hooks Drawer (inline on test batch) === */
.hooks-drawer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.hooks-drawer-glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px;
  animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.drawer-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.hooks-list-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hooks-list-compact .hook-card {
  padding: 10px 12px;
}

.hooks-list-compact .hook-text {
  font-size: 13px;
}

.drawer-confirmed {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  padding: 8px 0;
}

.hooks-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  background: rgba(245, 166, 35, 0.1);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.hooks-save-btn:hover {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.5);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* === Recommendation Explanation & Confidence === */
.recommendation-explanation {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-style: italic;
  padding: 0 2px;
}

.confidence-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-sans);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.confidence-strong {
  background: #16a34a18;
  color: #16a34a;
}

.confidence-stretch {
  background: #d9770618;
  color: #d97706;
}

/* === Profile === */
.profile-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 24px 20px;
  border: 1px solid var(--glass-border);
  text-align: left;
  margin-bottom: 20px;
}

.profile-name {
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 28px;
  text-align: center;
}

.profile-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.profile-item-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.profile-shows {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  margin-bottom: 28px;
}

.profile-show-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
}

.profile-show-name {
  font-weight: 500;
}

.profile-show-hooks {
  color: var(--text2);
  font-size: 12px;
}

/* === Spacing & Utilities === */
.mt-4 { margin-top: 4px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.text-center { text-align: center; }

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

/* === Back link === */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text2);
  text-decoration: none;
  margin-bottom: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}

.back-link:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
}

/* === HTMX loading indicator === */
.htmx-indicator {
  display: none;
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  display: block;
}

.calibration-loading {
  align-items: center;
  gap: 10px;
  padding: 12px 0 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.htmx-request .calibration-loading,
.calibration-loading.htmx-request {
  display: flex;
}

.calibration-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Reassurance line that fades in only if the wait runs long (hook
   generation takes ~10-15s; fast requests hide before this appears). */
.calibration-loading::after {
  content: 'Still working, this can take about 15 seconds';
  color: var(--text2);
  opacity: 0;
  animation: fadeIn 0.4s ease 7s forwards;
}

/* === Tap-commit state ===
   Added via hx-on to the element that fired a slow request: the tapped
   option locks in visually, siblings dim, and the group goes inert so
   double-taps can't fire duplicate requests. */
.test-option.is-committing,
.relationship-btn.is-committing {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.rec-relationship-options:has(.is-committing),
.relationship-options:has(.is-committing),
.rec-actions:has(.is-committing) {
  pointer-events: none;
}

.rec-relationship-options:has(.is-committing) .test-option:not(.is-committing),
.relationship-options:has(.is-committing) .relationship-btn:not(.is-committing) {
  opacity: 0.35;
}

.btn-not-my-thing.is-committing::after,
.btn-accent-outline.is-committing::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* === Loading Screen === */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50vh;
  padding: 40px 24px;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.loading-subtitle {
  font-size: 14px;
  color: var(--text2);
  font-family: var(--font-sans);
}

/* === Onboarding Interstitial (golden profile reveal) === */
.loading-screen.interstitial {
  justify-content: flex-start;
  min-height: auto;
  padding-bottom: 120px;
}

.interstitial-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}

.interstitial-card {
  width: 100%;
  /* Wide enough for two mode columns side by side: each column is 360px (a
     4-poster row without wrapping) + 28px gap + 40px card padding = 788px.
     At the old 640px the modes stacked, which the /profile page never showed
     because its container is wider. Collapses to one column under 768px. */
  max-width: 860px;
  text-align: left;
}

.interstitial-eyebrow {
  text-align: center;
}

.interstitial-card .profile-name {
  display: block;
  cursor: default;
}

.interstitial-card .profile-name:hover {
  color: var(--text);
}

.stagger-in {
  animation: fadeIn 0.5s ease both;
}

/* The interstitial strip owns the bottom edge — hide the floating feedback
   FAB while it's on screen so it can't overlap the CTA (mobile especially). */
body:has(.interstitial-strip) .fb-widget {
  display: none;
}

/* One spinner at a time: while the pending block ("Building your Taste
   Profile") is on screen, the strip stays hidden. It appears when the poll
   swaps the pending block for the golden profile card. */
.loading-screen.interstitial:has(.interstitial-pending) .interstitial-strip {
  display: none;
}

.interstitial-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--glass-border);
  font-size: 14px;
  color: var(--text2);
}

.strip-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.strip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
}

.strip-subtext {
  font-size: 12px;
  color: var(--text-muted);
}

.interstitial-strip .interstitial-cta {
  width: 100%;
  max-width: 400px;
}

/* === Recommendations Page === */
/* === Page Header === */
.page-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 48px 0;
  text-align: center;
}

.profile-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  color: var(--text);
  display: inline-block;
}
.profile-name:visited { color: var(--text); }
.profile-name:hover { color: var(--accent); }
.profile-name .dna-icon {
  display: inline-block;
  opacity: 0.5;
  transition: opacity 0.2s;
  font-size: 22px;
  margin-left: 6px;
}
.profile-name:hover .dna-icon { opacity: 1; }

.profile-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.profile-hint {
  font-size: 13px;
  color: var(--text2);
}

.refresh-picks-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  background: rgba(245, 166, 35, 0.12);
  color: var(--accent);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.refresh-picks-btn:hover {
  background: rgba(245, 166, 35, 0.2);
  border-color: rgba(245, 166, 35, 0.4);
  transform: translateY(-1px);
}

/* === Mode Toggle === */
.mode-toggle {
  display: inline-flex;
  margin-top: 28px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

.mode-btn {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  border-right: 1px solid var(--glass-border);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.mode-btn:last-child { border-right: none; }
.mode-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.mode-btn.active {
  background: rgba(245, 166, 35, 0.15);
  color: var(--accent);
}
.mode-btn.active.gems {
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent2);
}

.mode-btn.active.fresh {
  background: rgba(96, 165, 250, 0.12);
  color: var(--accent3);
}

.mode-hint {
  font-size: 13px;
  color: var(--text2);
  margin-top: 12px;
}

/* Legacy class aliases for existing templates */
.rec-header { text-align: center; margin-bottom: 24px; }
.rec-mode-toggle { display: none; }
.rec-mode-btn { display: none; }
.rec-mode-hint { display: none; }
.rec-profile-hint { display: none; }

/* === Recommendation Cards === */
.rec-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rec-card {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.rec-card:hover {
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

/* First card gets spotlight glow */
.rec-list .rec-card:first-child {
  border-color: rgba(245, 166, 35, 0.2);
  box-shadow: 0 -20px 80px rgba(245, 166, 35, 0.08), 0 8px 32px rgba(0,0,0,0.2);
}

.rec-card-inner {
  display: flex;
  gap: 0;
  position: relative;
}

/* Poster */
.rec-poster-wrap {
  width: 180px;
  flex-shrink: 0;
  align-self: flex-start;
  position: relative;
  overflow: visible;
}

.rec-poster {
  width: 180px;
  min-height: 270px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.rec-poster-placeholder {
  width: 180px;
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(61,26,142,0.3), rgba(142,26,61,0.2));
  font-size: 48px;
}

/* Badge row (top-right of card) */
.rec-badge-row {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Card info section */
.rec-info {
  flex: 1;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative;
}

.rec-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rec-rank {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text-light);
  letter-spacing: 0.04em;
}

.rec-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.rec-year {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
}

.rec-overview {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.rec-overview.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.rec-credits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-credits-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
}

.rec-credits-icon {
  font-size: 13px;
  opacity: 0.7;
}

/* Why you'll love it */
.rec-explanation {
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
}
.rec-explanation.gem-style {
  background: rgba(0, 212, 170, 0.05);
  border-color: rgba(0, 212, 170, 0.1);
}

.rec-explanation.fresh-style {
  background: rgba(96, 165, 250, 0.05);
  border-color: rgba(96, 165, 250, 0.1);
}

.rec-explanation-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.rec-explanation.gem-style .rec-explanation-label {
  color: var(--accent2);
}

.rec-explanation.fresh-style .rec-explanation-label {
  color: var(--accent3);
}

.rec-explanation p {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* Spotlit's Read — verdict panel on the search detail card. Matches the
   "Why you'll love it" shape; subtle indigo accent distinguishes it from the
   recommendation surface. */
.rec-explanation.spotlit-read {
  background: rgba(129, 140, 248, 0.05);
  border-color: rgba(129, 140, 248, 0.12);
}

.rec-explanation.spotlit-read .rec-explanation-label {
  color: rgb(165, 180, 252);
}

/* Overall up/down call, rendered as a small badge pinned to the top-right of
   the take box. Keep the label/paragraph clear of it when present. */
.rec-explanation.spotlit-read.has-thumb {
  position: relative;
}

.rec-explanation.spotlit-read.has-thumb .rec-explanation-label,
.rec-explanation.spotlit-read.has-thumb p {
  padding-right: 34px;
}

.spotlit-thumb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlit-thumb svg {
  width: 16px;
  height: 16px;
}

.spotlit-thumb-up {
  color: var(--success);
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.35);
}

.spotlit-thumb-down {
  color: var(--danger);
  background: rgba(229, 77, 77, 0.12);
  border: 1px solid rgba(229, 77, 77, 0.35);
}

.spotlit-read-thinking {
  font-style: italic;
  opacity: 0.7;
}

.spotlit-read-error p {
  margin-bottom: 8px;
}

.spotlit-read-retry {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(165, 180, 252, 0.3);
  background: rgba(129, 140, 248, 0.08);
  color: rgb(165, 180, 252);
  cursor: pointer;
}

.spotlit-read-retry:hover {
  background: rgba(129, 140, 248, 0.16);
}

/* While the retry request is in flight, the parent panel carries the
   htmx-request class (via hx-indicator="closest .spotlit-read" on the
   button). Swap the error message + button out for the same thinking
   microcopy the initial placeholder uses, so the user sees the action
   landed. */
.spotlit-read-retrying {
  display: none;
}

.spotlit-read.htmx-request .spotlit-read-error-message,
.spotlit-read.htmx-request .spotlit-read-retry {
  display: none;
}

.spotlit-read.htmx-request .spotlit-read-retrying {
  display: block;
}

/* Actions */
.rec-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* On mobile the three labelled actions can't fit one row without wrapping
   onto multiple lines, so stack them full-width instead. */
@media (max-width: 700px) {
  .rec-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rec-actions .btn-accent-outline,
  .rec-actions .btn-not-my-thing,
  .rec-actions .btn-accent-confirmed {
    width: 100%;
    justify-content: center;
  }
}

/* Unified action button base */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text2);
}
.btn-action:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
}
.btn-action svg { flex-shrink: 0; }

.btn-action.trailer {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.2);
  color: var(--accent);
}
.btn-action.trailer:hover {
  background: rgba(245, 166, 35, 0.2);
  border-color: rgba(245, 166, 35, 0.3);
}

.btn-action.rate {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.15);
  color: var(--accent);
}
.btn-action.rate:hover {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.3);
}

.btn-action.dismiss:hover {
  border-color: rgba(229, 77, 77, 0.3);
  color: var(--danger);
  background: rgba(229, 77, 77, 0.08);
}

/* Not My Thing — warm-red outline ghost button */
.btn-not-my-thing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(229, 77, 77, 0.2);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-not-my-thing:hover {
  border-color: rgba(229, 77, 77, 0.4);
  color: var(--danger);
  background: rgba(229, 77, 77, 0.08);
}
.btn-not-my-thing svg { flex-shrink: 0; }

.btn-rate-it {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(245, 166, 35, 0.15);
  background: rgba(245, 166, 35, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-rate-it:hover {
  background: rgba(245, 166, 35, 0.18);
  border-color: rgba(245, 166, 35, 0.3);
}
.btn-rate-it svg { flex-shrink: 0; }

.rec-rate-drawer {
  padding: 16px 0 0;
}

.rec-rate-drawer .drawer-header {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.rec-relationship-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Amber outline action button (Add to My List, Rate it on title detail) */
.btn-accent-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid rgba(245, 166, 35, 0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-accent-outline:hover {
  background: rgba(245, 166, 35, 0.08);
  border-color: var(--accent);
}
.btn-accent-outline svg { flex-shrink: 0; }

/* Green-tinted confirmed status indicator (On My List, Rated).
   Non-interactive: rendered as a disabled button. */
.btn-accent-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(78, 203, 113, 0.12);
  color: #4ecb71;
  border: 1.5px solid rgba(78, 203, 113, 0.45);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: default;
}
.btn-accent-confirmed[disabled] { opacity: 1; }
.btn-accent-confirmed svg { flex-shrink: 0; }

/* Skip-for-now icon button — top-right of rec card */
.rec-dismiss {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.rec-dismiss:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}
.rec-dismiss svg { width: 16px; height: 16px; }

/* Trailer slot — flex container collapses inline whitespace so the button sits flush under the poster */
.trailer-slot { display: flex; }

/* Play-trailer strip — sits flush below the poster image */
.poster-trailer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.2s;
}
.poster-trailer:hover { background: rgba(0, 0, 0, 0.75); }
.poster-trailer-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.poster-trailer:hover .poster-trailer-icon { border-color: #fff; }
.poster-trailer-icon svg { width: 14px; height: 14px; color: #fff; margin-left: 2px; }
.poster-trailer-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

/* Not My Thing flyout */
.nmt-flyout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.nmt-chips-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.nmt-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
}
.nmt-chip:hover {
  background: rgba(255,255,255,0.04);
}
.nmt-chip.selected {
  background: rgba(255,255,255,0.04);
}
.nmt-chip.selected .nmt-check {
  background: #e54d4d;
  border-color: #e54d4d;
}
.nmt-chip.selected .hook-check-icon {
  display: block;
}
.nmt-chip.selected .hook-text {
  color: var(--text);
}
.nmt-chip.db-active {
  background: rgba(229, 77, 77, 0.08);
}
.nmt-deal-breaker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(229, 77, 77, 0.2);
  background: rgba(229, 77, 77, 0.05);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.nmt-deal-breaker-toggle:hover {
  border-color: rgba(229, 77, 77, 0.4);
  background: rgba(229, 77, 77, 0.1);
}
.nmt-db-label {
  color: rgba(229, 77, 77, 0.7);
  font-weight: 600;
  white-space: nowrap;
}
.nmt-chip.db-active .nmt-deal-breaker-toggle {
  border-color: rgba(229, 77, 77, 0.6);
  background: rgba(229, 77, 77, 0.15);
}
.nmt-chip.db-active .nmt-db-label {
  color: var(--danger);
}
.nmt-db-confirm {
  font-size: 12px;
  color: var(--danger);
  padding: 8px 0 4px;
  line-height: 1.5;
}
.nmt-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid rgba(229, 77, 77, 0.3);
  background: rgba(229, 77, 77, 0.1);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.nmt-save-btn:hover:not(:disabled) {
  background: rgba(229, 77, 77, 0.18);
  border-color: rgba(229, 77, 77, 0.5);
}
.nmt-save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Not My Thing — the user's own reasons ("Add your own"). Custom rows share
   the .nmt-chip row shape; the pencil marks them as the user's, × removes.
   The zone reuses the Rate It drawer's .custom-add-row / .custom-add-btn /
   .custom-hook-error components. */
.nmt-chip .custom-pencil {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--accent);
  margin-right: 6px;
  vertical-align: -1.5px;
  flex: 0 0 auto;
}
.nmt-custom-del {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 17px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.nmt-custom-del:hover {
  color: var(--danger);
  background: var(--danger-hover);
}
/* .nmt-chip is display:flex, which would beat .htmx-indicator's display:none. */
.nmt-custom.pending {
  display: none;
  cursor: default;
  color: var(--text2);
  font-style: italic;
}
.nmt-custom.pending.htmx-request {
  display: flex;
}
.nmt-custom-zone {
  margin: 4px 0 0;
}
.nmt-custom-zone .custom-add-row {
  margin-bottom: 0;
}
.nmt-chips-missing {
  color: var(--text-muted);
  padding: 4px 0 8px;
}

.runtime-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 3px 8px;
}

.rec-footer {
  padding-bottom: 32px;
}

/* === Bottom Actions (Show More + Refresh) === */
.bottom-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 24px 0 8px;
}

/* === Show More Button === */
.show-more-wrap {
  display: flex;
}
.show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.show-more-btn:hover {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.show-more-btn .show-more-spinner {
  display: none;
}
.show-more-btn.htmx-request .show-more-label {
  display: none;
}
.show-more-btn.htmx-request .show-more-spinner {
  display: inline;
}

/* === Something Familiar Section === */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.decade-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.decade-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.decade-chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.decade-chip:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
}

.decade-chip.active {
  background: rgba(245, 166, 35, 0.15);
  border-color: rgba(245, 166, 35, 0.3);
  color: var(--accent);
}

.familiar-lane-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 20px 0 12px;
}

/* === My Content · Favorites tab (merged movie + series favs) === */
.favs-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Favorites sub-filter chips. A dedicated class (NOT .decade-chip) — the global
   click handler in layout.erb toggles .active on any .decade-chip, which would
   fight this tab's own filter handler and strip the active state. */
.favs-chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.favs-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.favs-chip.active {
  background: rgba(245, 166, 35, 0.15);
  border-color: rgba(245, 166, 35, 0.3);
  color: var(--accent);
}

.favs-chip-count {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.65;
}

.favs-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text2);
  margin: 4px 0 14px;
}

.favs-section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.favs-group + .favs-group .favs-section-header { margin-top: 28px; }

.favs-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Client-side All/Movies/Series filter: hide the other group and the now
   redundant section headers when a single type is selected. */
.favs-panel.favs-view-movies .favs-group-series,
.favs-panel.favs-view-series .favs-group-movies { display: none; }

.favs-panel.favs-view-movies .favs-section-header,
.favs-panel.favs-view-series .favs-section-header { display: none; }

.rec-lane-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}

.rec-lane-badge.popular {
  background: rgba(245, 166, 35, 0.12);
  color: var(--accent);
  border: 1px solid rgba(245, 166, 35, 0.2);
}

.rec-lane-badge.gems {
  background: rgba(0, 212, 170, 0.1);
  color: var(--accent2);
  border: 1px solid rgba(0, 212, 170, 0.15);
}

.rec-lane-badge.fresh {
  background: rgba(96, 165, 250, 0.1);
  color: var(--accent3);
  border: 1px solid rgba(96, 165, 250, 0.15);
}

.rec-lane-badge.crowd {
  background: rgba(61, 26, 142, 0.2);
  color: #B088FF;
  border: 1px solid rgba(61, 26, 142, 0.3);
}

.rec-lane-badge.classic {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* === Taste DNA === */
.dna-section {
  margin-bottom: 28px;
}

.dna-hooks-group {
  margin-bottom: 10px;
  text-align: left;
}

.dna-hooks-group:last-child {
  margin-bottom: 0;
}

.dna-hooks-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.dna-hooks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Hook chips — checkbox pattern matching db-chip */
.hook-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--glass-border);
  background: transparent;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all var(--transition);
}
.hook-chip:hover {
  border-color: var(--border-check);
}
.hook-chip.selected {
  border-color: var(--glass-border);
}
.hook-chip input[type="checkbox"] {
  display: none;
}
.hook-chip-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.hook-chip.selected .hook-chip-check {
  background: var(--accent);
  border-color: var(--accent);
}
.hook-chip-check svg {
  width: 12px;
  height: 12px;
  stroke: white;
  stroke-width: 2.5;
  fill: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.hook-chip.selected .hook-chip-check svg {
  opacity: 1;
}
.hook-chip-label {
  font-size: 13px;
  color: var(--text-light);
  transition: color 0.15s;
}
.hook-chip.selected .hook-chip-label {
  color: var(--text);
}
.hook-save-btn {
  transition: opacity 0.2s ease;
}

.dna-remove-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition);
}

.dna-remove-btn:hover {
  color: var(--accent);
}

.dna-people-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}

.dna-people-chip:hover {
  border-color: var(--accent);
}

.dna-people-chip.selected {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.dna-stale-banner {
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.dna-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.dna-footer {
  padding-bottom: 32px;
}

.mood-grid.compact {
  gap: 8px;
}

.mood-grid.compact .mood-card {
  padding: 10px 12px;
}

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

/* === Trailer Modal === */
.trailer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.trailer-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.trailer-modal-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity var(--transition);
}

.trailer-modal-close:hover {
  opacity: 1;
}

.trailer-modal-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.trailer-modal-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#trailer-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.trailer-error {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bg2);
  color: var(--text2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  border-radius: var(--radius);
}

.trailer-error p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.trailer-error a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: all var(--transition);
}

.trailer-error a:hover {
  background: var(--accent);
  color: #fff;
}

/* === Responsive: Tablet (≥768px) === */
@media (min-width: 768px) {
  :root {
    --max-width: 900px;
  }

  .screen-pad {
    padding: 36px 32px;
  }

  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 24px;
  }

  .trailer-modal {
    max-width: 640px;
  }

  .rec-poster,
  .rec-poster-placeholder,
  .rec-poster-wrap {
    width: 140px;
    min-width: 140px;
  }

  .rec-poster,
  .rec-poster-placeholder {
    min-height: 210px;
  }

}

/* === Responsive: Desktop (≥1024px) === */
@media (min-width: 1024px) {
  :root {
    --max-width: 900px;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 26px;
  }

  .trailer-modal {
    max-width: 720px;
  }

  .rec-poster,
  .rec-poster-placeholder,
  .rec-poster-wrap {
    width: 180px;
    min-width: 180px;
  }

  .rec-poster,
  .rec-poster-placeholder {
    min-height: 270px;
  }

  .test-options-4 .test-option {
    flex: 1;
    min-width: 0;
  }

}

/* === Taste DNA Page: Title + Accordion Sections === */
.modal-title {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 32px;
  margin-bottom: 24px;
}

.dna-accordion {
  margin-bottom: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.dna-accordion:last-child {
  margin-bottom: 0;
}

.dna-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}

.dna-accordion-header:hover {
  background: var(--ghost-bg);
}

.dna-accordion-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dna-accordion-icon {
  font-size: 20px;
}

.dna-accordion-title {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text);
}

.dna-accordion-count {
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 400;
}

.dna-accordion-chevron {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  transition: color 0.2s ease;
}

.dna-accordion-chevron svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.dna-chevron-show { display: inline; }
.dna-chevron-hide { display: none; }

.dna-accordion.expanded .dna-accordion-chevron {
  color: var(--accent);
}

.dna-accordion.expanded .dna-accordion-chevron svg {
  transform: rotate(180deg);
}

.dna-accordion.expanded .dna-chevron-show { display: none; }
.dna-accordion.expanded .dna-chevron-hide { display: inline; }

.dna-accordion-body {
  display: none;
  padding: 0 20px 20px;
  border-top: 1px solid var(--glass-border);
}

.dna-accordion.expanded .dna-accordion-body {
  display: block;
}

/* === Program Row (collapsible item within accordion) === */
.dna-program-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  font-size: 14px;
}

.dna-program-row:hover {
  background: var(--ghost-bg);
  border-color: var(--border-check);
}

.dna-program-row.expanded {
  border-color: var(--border-check);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.dna-program-icon {
  flex-shrink: 0;
  width: 32px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.dna-program-poster {
  flex-shrink: 0;
  width: 32px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.dna-program-title {
  font-weight: 500;
  flex: 1;
  text-align: left;
}

.dna-program-title .show-year {
  font-weight: 400;
  color: var(--text-light);
  font-size: 13px;
}

.dna-program-meta {
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-sans);
  white-space: nowrap;
}

.dna-program-chevron {
  display: flex;
  align-items: center;
  color: var(--text-light);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.dna-program-chevron svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.dna-program-row.expanded .dna-program-chevron {
  color: var(--accent);
}

.dna-program-row.expanded .dna-program-chevron svg {
  transform: rotate(180deg);
}

.dna-program-detail {
  display: none;
  border: 1px solid var(--glass-border);
  border-top: none;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  padding: 12px 16px 16px;
  margin-bottom: 8px;
  background: var(--glass);
}

.dna-program-detail.expanded {
  display: block;
}

.dna-people-group {
  margin-top: 10px;
}

/* === Responsive: Unified Modal === */
@media (max-width: 640px) {
  .dna-accordion-header {
    padding: 14px 14px;
  }

  .dna-accordion-body {
    padding: 0 14px 16px;
  }

  .dna-program-row {
    padding: 8px 10px;
    gap: 8px;
  }

  .dna-program-poster,
  .dna-program-icon {
    width: 28px;
    height: 42px;
  }

  .dna-program-icon {
    font-size: 18px;
  }

  .dna-program-meta {
    display: none;
  }
}

/* === Deal Breakers Accordion Variant (danger accent) === */
.db-accordion .dna-accordion-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.db-accordion .dna-accordion-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--danger);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-accordion.expanded .dna-accordion-chevron {
  color: var(--danger);
}

/* === Responsive: Mobile (≤768px) === */
@media (max-width: 768px) {
  /* shrink the fixed logo so it stops covering the row */
  .spotlight-logo-container { top: 4px; left: 23px; }
  .spotlight-logo { height: 40px; }

  nav.top-nav { padding: 12px 14px; }

  .nav-inner {
    max-width: none;
    margin: 0;
    padding-left: 84px;          /* clears the smaller logo with a gap */
    gap: 14px;
    justify-content: flex-start; /* margin-left:auto on .nav-profile pushes the avatar right */
  }

  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }

  /* avatar only on mobile, drop the name + chevron to save room */
  .nav-profile span,
  .nav-profile-chevron { display: none; }

  /* search takeover: when the box opens it fills the whole nav row and every
     other item steps aside. .nav-search-area needs hiding here too — its base
     `display: flex` outranks the `hidden` attribute the toggle JS sets, so the
     search icon would otherwise stay in the row and stop the box filling. */
  .nav-search-expanded { max-width: none; flex: 1 1 100%; }
  .nav-inner:has(.nav-search-expanded:not([hidden])) .nav-links,
  .nav-inner:has(.nav-search-expanded:not([hidden])) .nav-profile,
  .nav-inner:has(.nav-search-expanded:not([hidden])) .nav-search-area {
    display: none;
  }

  /* nav is shorter on mobile (12px padding vs 16px), so drop the scrim to match */
  .search-scrim { top: 63px; }

  /* Horizontal gutter now comes from .container (see end-of-file block); keep
     only the vertical padding here so it doesn't double up. */
  .page-header {
    padding: 32px 0 0;
  }

  .rec-list {
    padding: 24px 0 60px;
  }

  .rec-card-inner {
    flex-direction: column;
  }

  /* Poster becomes a centered portrait column on mobile. Sizing the whole wrap
     (not just the image) keeps the poster and the "Play trailer" bar that lives
     inside it locked to the same width, and a capped width keeps a full-height
     poster from dominating the card. aspect-ratio drives the height so nothing
     is cropped, and it sizes the no-poster placeholder div too. Width is the
     single knob: 200px -> 300px tall. */
  .rec-poster-wrap {
    width: 200px !important;
    min-width: 0 !important;
    max-width: 70%;
    align-self: center;
    margin-top: 16px;
  }

  .rec-poster,
  .rec-poster-placeholder {
    width: 100% !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }

  .mode-toggle {
    flex-wrap: wrap;
  }

  .mode-btn {
    flex: 1;
    text-align: center;
  }

  footer {
    padding: 24px 20px;
    flex-direction: column;
    gap: 16px;
  }
}

/* =============================================
   Deal Breakers Onboarding
   ============================================= */

.deal-breakers-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 32px 28px;
  animation: panelFadeIn 0.4s ease-out;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.db-panel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.db-panel-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--danger);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.db-panel-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}
.db-panel-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 560px;
}

.db-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.db-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.db-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  position: relative;
}
.db-chip:hover {
  border-color: var(--danger-border);
  background: rgba(229,77,77,0.04);
}
.db-chip.selected {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}
.db-chip input[type="checkbox"] {
  display: none;
}

.db-chip-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.db-chip.selected .db-chip-check {
  background: var(--danger);
  border-color: var(--danger);
}
.db-chip-check svg {
  width: 12px;
  height: 12px;
  stroke: white;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.db-chip.selected .db-chip-check svg {
  opacity: 1;
}

.db-chip-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  transition: color 0.15s;
}
.db-chip.selected .db-chip-label {
  color: var(--text);
}

/* Free text input */
.db-other-section {
  margin-top: 4px;
  margin-bottom: 32px;
}
.db-other-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.db-other-input-wrap {
  display: flex;
  gap: 10px;
}
.db-other-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s;
}
.db-other-input::placeholder {
  color: rgba(200,204,219,0.6);
}
.db-other-input:focus {
  border-color: var(--danger-border);
}
.db-other-add-btn {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: rgba(229,77,77,0.1);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.db-other-add-btn:hover {
  background: var(--danger-hover);
}

.db-custom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.db-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  animation: dbChipIn 0.2s ease-out;
}
@keyframes dbChipIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.db-custom-chip-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(229,77,77,0.2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}
.db-custom-chip-remove:hover {
  background: rgba(229,77,77,0.4);
}
.db-custom-chip-remove svg {
  width: 10px;
  height: 10px;
  stroke: var(--danger);
  stroke-width: 2.5;
  fill: none;
}

/* Selection summary */
.db-selection-summary {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-border);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.db-summary-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--danger);
  fill: none;
  stroke-width: 2;
}
.db-summary-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.4;
}
.db-summary-text strong {
  color: var(--text);
  font-weight: 600;
}

/* Bottom actions */
.db-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.db-error-msg {
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  display: none;
}

/* Responsive */
@media (max-width: 640px) {
  .deal-breakers-panel { padding: 24px 18px; }
  .db-panel-title { font-size: 20px; }
  .db-bottom-actions { flex-direction: column-reverse; }
  .db-bottom-actions .btn-ghost,
  .db-bottom-actions .btn-primary { width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .db-chip { padding: 8px 12px; }
  .db-chip-label { font-size: 13px; }
}

/* Hide Continue button when hooks drawer is open */
#hooks-drawer:has(.hooks-drawer) ~ #calibration-continue,
#movie-hooks-drawer:has(.hooks-drawer) ~ #onboarding-continue {
  display: none !important;
}

/* === Onboarding: Remove / Edit / Enforce Hooks === */

/* Ghost trash icon */
.remove-title-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  opacity: 0.4;
  transition: color var(--transition), opacity var(--transition);
  display: flex;
  align-items: center;
}
.remove-title-btn:hover {
  color: var(--danger);
  opacity: 1;
}

/* Inline toast after removal */
.removed-toast {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  animation: fadeOutToast 2s ease-out forwards;
}
@keyframes fadeOutToast {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* Edit hooks link */
.edit-hooks-link {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
}
.edit-hooks-link:hover {
  text-decoration: underline;
}

/* Save button disabled state */
.hooks-save-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Drawer footer (Save + Remove/Cancel) */
.drawer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
}

/* "Remove this title" danger link in drawer footer */
.remove-this-title {
  font-size: 12px;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.remove-this-title:hover {
  text-decoration: underline;
}

/* ============================================================
 * Landing page (Public Beta) — Feature 1
 * Used by views/layout_landing.erb + views/landing.erb.
 * ============================================================ */

.landing-body { overflow-x: hidden; }

.landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  background: rgba(10, 15, 30, 0.6);
  border-bottom: 1px solid var(--glass-border);
  padding: 16px 48px;
}

.landing-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sign-in-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  transition: all 0.15s;
}
.sign-in-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
}
.landing-hero-inner {
  max-width: 540px;
  width: 100%;
  text-align: center;
}
.landing-tagline {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--text);
}
.landing-tagline .accent { color: var(--accent); }
.landing-subtitle {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}
.beta-badge svg { width: 14px; height: 14px; }

/* Form card — used by landing waitlist + future sign-in/sign-up cards */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(20px);
  text-align: left;
}
.form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.form-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-field.full { flex: none; width: 100%; }
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  outline: none;
  width: 100%;
}
.form-input::placeholder { color: rgba(200, 204, 219, 0.4); }
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}
.form-input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(229, 77, 77, 0.12);
}
.form-error {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}

.btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--accent);
  border: none;
  color: var(--bg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
}
.btn-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
}
.btn-full svg { width: 16px; height: 16px; }

/* Waitlist success state */
.waitlist-success {
  text-align: center;
  padding: 20px 0;
}
.waitlist-success .check-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.15);
  border: 2px solid var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent2);
}
.waitlist-success .check-circle svg { width: 28px; height: 28px; }
.waitlist-success h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.waitlist-success p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* How Spotlit works strip */
.how-it-works {
  max-width: 540px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  width: 100%;
}
.hw-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 24px;
}
.hw-steps {
  display: flex;
  gap: 20px;
}
.hw-step {
  flex: 1;
  text-align: center;
  padding: 20px 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
.hw-step .hw-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--accent);
}
.hw-step .hw-icon svg { width: 20px; height: 20px; }
.hw-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.hw-step-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Request-access CTA on the standalone /how-it-works page */
.how-cta {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 60px;
  text-align: center;
}
.how-cta p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.how-cta .btn-full {
  max-width: 280px;
  margin: 0 auto;
  text-decoration: none;
}

/* Data & attributions — required TMDB/OMDb credit. Quiet fine-print so the
   TMDB logo stays less prominent than Spotlit's own branding (brand-guideline
   requirement). Rendered on /how-it-works, above the footer. */
.data-attribution {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 48px;
  text-align: center;
}
.da-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 12px;
}
.da-tmdb {
  margin-bottom: 10px;
}
.da-tmdb-logo {
  display: inline-block;
  height: 16px;
  width: auto;
  margin-bottom: 10px;
}
.data-attribution p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.7;
  margin: 0;
}
.data-attribution a { color: inherit; }
.da-omdb a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Landing footer */
.landing-footer {
  border-top: 1px solid var(--glass-border);
  padding: 32px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.landing-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}
.landing-footer .footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-footer .footer-links a:hover { color: var(--text); }
.landing-footer .footer-legal {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.5;
}

@media (max-width: 700px) {
  .landing-nav { padding: 14px 20px; }
  .landing-hero { padding: 60px 20px 30px; }
  .landing-tagline { font-size: 28px; }
  .hw-steps { flex-direction: column; }
  .form-row { flex-direction: column; }
  .landing-footer { padding: 24px 20px; flex-direction: column; gap: 16px; }
}

/* === Auth pages (sign-up, invalid invite) ===================================
   Used by signup.erb and invalid_invite.erb. Translates the centered-card
   pattern from the sign-up flow mocks (design_work/sign-up flow). */

.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.centered-card {
  max-width: 420px;
  width: 100%;
}
.centered-card .welcome-text {
  text-align: center;
  margin-bottom: 28px;
}
.centered-card .welcome-text h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.centered-card .welcome-text p {
  font-size: 14px;
  color: var(--text-muted);
}

.logo-centered {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.logo-centered .spotlight-logo {
  height: 77px;
  width: auto;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: white;
  border: none;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-google:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}
.btn-google .g-logo {
  width: 18px;
  height: 18px;
}

.btn-magic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

/* Keep the longer "Continue with email (magic link)" label on one line on
   narrow screens by trimming font/padding rather than letting it wrap. */
@media (max-width: 700px) {
  .btn-google, .btn-magic { font-size: 13px; padding: 12px 14px; gap: 8px; }
}
.btn-magic:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-magic svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
}
.auth-divider .line {
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.auth-divider .or-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.email-prefilled {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(0, 212, 170, 0.06);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.email-prefilled svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent2);
}
.email-prefilled .email-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-prefilled .verified-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.signup-terms {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 20px;
  line-height: 1.5;
  opacity: 0.7;
}
.signup-terms a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.signup-terms a:hover {
  color: var(--text);
}

.error-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--danger-bg);
  border: 2px solid var(--danger-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--danger);
}
.error-icon svg {
  width: 30px;
  height: 30px;
}
.error-card-text {
  text-align: center;
}
.error-card-text h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.error-card-text p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-back:hover {
  text-decoration: underline;
}
.btn-back svg {
  width: 16px;
  height: 16px;
}

/* Magic-link "Check your email" success state — sign-in page (Feature 5) */
.magic-sent {
  text-align: center;
  padding: 16px 0;
}
.magic-sent .mail-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.12);
  border: 2px solid rgba(245, 166, 35, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}
.magic-sent .mail-icon svg {
  width: 26px;
  height: 26px;
}
.magic-sent h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.magic-sent p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.magic-sent .email-highlight {
  color: var(--accent);
  font-weight: 600;
}
.magic-sent .resend-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
}
.magic-sent .resend-link:hover {
  color: var(--accent);
}

/* --- Feature 9: Admin screen --- */
.admin-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.admin-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 0;
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-badge svg { width: 12px; height: 12px; }

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--glass-border);
}
.admin-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px 14px;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.admin-tab.active .tab-count {
  background: rgba(245,166,35,0.18);
  color: var(--accent);
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.toolbar-left { display: flex; align-items: center; gap: 12px; }
.toolbar-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  width: 280px;
  outline: none;
  transition: all 0.15s;
}
.toolbar-search::placeholder { color: rgba(200,204,219,0.4); }
.toolbar-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.12);
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.admin-table tr:hover td { background: rgba(255,255,255,0.03); }

.user-name { font-weight: 600; }
.user-email { font-size: 12px; color: var(--text-muted); }
.meta-text { font-size: 12px; color: var(--text-muted); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-badge.waiting { background: rgba(200,204,219,0.1); color: var(--text-muted); }
.status-badge.invited { background: rgba(245,166,35,0.12); color: var(--accent); }
.status-badge svg { width: 10px; height: 10px; }
.status-meta { display: block; margin-top: 4px; }

.table-actions { display: flex; gap: 6px; }
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.action-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}
.action-btn:disabled { opacity: 0.5; cursor: wait; }
.action-btn svg { width: 12px; height: 12px; }
.action-btn.primary {
  background: rgba(245,166,35,0.12);
  border-color: rgba(245,166,35,0.3);
  color: var(--accent);
}
.action-btn.primary:hover { background: rgba(245,166,35,0.2); }
.action-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.action-btn.danger:hover { background: var(--danger-bg); border-color: rgba(229,77,77,0.4); }

.admin-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-sm);
}
.admin-empty p { margin: 4px 0; }

/* Avatar dropdown: red Admin link */
.avatar-dropdown a.admin-link { color: var(--danger); font-weight: 600; }
.avatar-dropdown a.admin-link svg { color: var(--danger); }

@media (max-width: 700px) {
  .admin-container { padding: 20px 0 60px; } /* gutter from .container */
  .toolbar-search { width: 100%; }
}

/* ===== Feature 10: Admin User Management ===== */

/* Toolbar "Create test user" amber pill button */
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.toolbar-btn:hover { background: rgba(245, 166, 35, 0.2); }
.toolbar-btn svg { width: 14px; height: 14px; }

/* "View as" green action button */
.action-btn.view-as { color: var(--success, #00D4AA); border-color: rgba(0, 212, 170, 0.25); }
.action-btn.view-as:hover { background: rgba(0, 212, 170, 0.08); border-color: rgba(0, 212, 170, 0.4); }

/* Auth method badges in users table */
.auth-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-badge.auth-google { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.auth-badge.auth-magic  { background: rgba(245, 166, 35, 0.12); color: var(--accent); }
.auth-badge.auth-test   { background: rgba(200, 204, 219, 0.1); color: var(--text-muted); }

/* Inline error inside drawers */
.admin-inline-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--danger);
}
.admin-inline-error svg { width: 14px; height: 14px; }

/* Slide-out drawer (Create test user / Edit user) */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.admin-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.admin-drawer-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: rgba(18, 18, 26, 0.98);
  border-left: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  backdrop-filter: blur(30px);
  z-index: 401;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.admin-drawer-panel.open { right: 0; }
.admin-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
}
.admin-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-drawer-title svg { width: 18px; height: 18px; color: var(--accent); }
.admin-drawer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  transition: all 0.15s;
}
.admin-drawer-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.admin-drawer-close svg { width: 18px; height: 18px; }
.admin-drawer-body { padding: 24px; flex: 1; overflow-y: auto; }
.admin-drawer-body .form-field { margin-bottom: 14px; }
.drawer-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Impersonation banner (sits at the top of every page while admin is impersonating) */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.10));
  border-bottom: 1px solid rgba(245, 166, 35, 0.4);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(20px);
}
.impersonation-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.impersonation-banner-inner strong { color: var(--accent); font-weight: 700; }
.impersonation-eye { display: inline-flex; color: var(--accent); }
.impersonation-eye svg { width: 16px; height: 16px; }
.impersonation-exit-form { margin-left: auto; }
.impersonation-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(245, 166, 35, 0.4);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}
.impersonation-exit:hover { background: rgba(245, 166, 35, 0.18); }
.impersonation-exit svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .admin-drawer-panel { width: 100%; }
  .admin-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* --- Account page (Feature 11) --- */
.account-container {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 0 80px;
}
.account-page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.account-page-header h1 { font-size: 22px; font-weight: 700; }
.account-page-header svg { width: 22px; height: 22px; color: var(--text-muted); }

.account-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(20px);
}
.account-email-label { margin-bottom: 4px; }

.email-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(0, 212, 170, 0.06);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: var(--radius-sm);
}
.email-readonly svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--success); }
.email-readonly .email-text { font-size: 14px; font-weight: 500; color: var(--text); }
.email-readonly .verified-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-method {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px;
}
.auth-method svg { width: 14px; height: 14px; color: var(--text-muted); }
.auth-method .g-icon { width: 14px; height: 14px; }
.auth-method span { font-size: 12px; color: var(--text-muted); font-weight: 500; }

.card-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 22px 0;
}

.btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--accent);
  border: none;
  color: var(--bg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
}
.btn-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
}
.btn-save svg { width: 16px; height: 16px; }
.btn-save:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-save.saved {
  background: var(--success);
  color: var(--bg);
  opacity: 1;
}

.member-since {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}
.member-since svg { width: 13px; height: 13px; }

/* Weekly digest opt-in (account page) — copy + slider switch, auto-saves on change */
.account-digest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.account-digest-saving { font-size: 12px; color: var(--text-muted); }
.account-digest-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.account-digest-copy {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 700px) {
  .account-digest-row { flex-direction: column; gap: 14px; }
}

/* Slider switch — a checkbox styled as an on/off toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  padding-top: 2px;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid var(--glass-border);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}
.switch input:checked + .switch-track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label {
  font-size: 14px;
  color: var(--text);
  min-width: 24px;
}
.htmx-request .switch { opacity: 0.6; pointer-events: none; }

/* Weekly digest unsubscribe page (public shell) */
.digest-unsub-footnote {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.digest-unsub-footnote a,
.digest-unsub .welcome-text a { color: var(--accent); text-decoration: underline; }

/* Weekly digest "No Longer Watching" confirmation (signed-in shell).
   Borrows the centered-card auth pattern above and the .rec-poster sizing from
   the rec card; only the poster framing is new. */
.digest-nlw .nlw-poster-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.digest-nlw .nlw-poster {
  width: 140px;
  min-height: 210px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}
.digest-nlw .nlw-reassure {
  margin-top: 10px;
  font-size: 13px;
}

/* Chip generation is a real LLM call (~10-15s), so the wait uses the same
   indicator as every other Not My Thing surface: spinner, "Generating
   questions", and the 7s "still working" line. Stacked, because this card is
   far narrower than the rec rows .calibration-loading was built for. */
.digest-nlw .calibration-loading {
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.digest-nlw-footnote {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.digest-nlw-footnote a { color: var(--accent); text-decoration: underline; }

/* ---------- Title Detail Card (Feature 2 / My Content) ---------- */
.title-detail-wrap {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 48px;
}

@media (max-width: 768px) {
  .title-detail-wrap {
    padding: 0 20px;
  }
}

.title-detail-card {
  position: relative;
}

.detail-card-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.detail-card-close svg { width: 16px; height: 16px; display: block; }
.detail-card-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.detail-meta {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.detail-type-badge,
.detail-runtime,
.imdb-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.detail-type-badge { color: var(--accent); border-color: rgba(245, 166, 35, 0.35); }
.imdb-pill { color: #f5c518; border-color: rgba(245, 197, 24, 0.3); }

.detail-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.detail-status-inline i { width: 12px; height: 12px; }
.detail-status-inline-saved {
  background: rgba(0, 212, 170, 0.15);
  color: var(--accent2);
  border-color: rgba(0, 212, 170, 0.35);
}

.detail-state-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.detail-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.4);
  color: var(--accent);
}
.detail-status-rated {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.detail-state-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ---------- Toast ---------- */
#toast-container {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   My Content (Feature 3 — page shell, tabs, empty states)
   ============================================================ */

.my-content-page {
  padding: 28px 0 80px;
}

.page-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}

.tabs-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.tab-btn.active {
  background: rgba(245, 166, 35, 0.12);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.25);
}
.tab-btn .tab-count {
  margin-left: 0;
}
.tab-btn.active .tab-count {
  background: rgba(245, 166, 35, 0.2);
  color: var(--accent);
}

.tab-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.tab-content-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.add-btn:hover:not(:disabled) {
  background: rgba(245, 166, 35, 0.2);
  border-color: rgba(245, 166, 35, 0.4);
}
.add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.add-btn svg {
  width: 14px;
  height: 14px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.empty-state .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.empty-state .empty-icon svg {
  width: 24px;
  height: 24px;
}
.empty-state .empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.empty-state .empty-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .tabs-bar {
    gap: 2px;
  }
  .tab-btn {
    font-size: 12px;
    padding: 10px 8px;
  }
}

/* ============================================================
   My List tab (Feature 4 — saved cards, removal prompt, undo)
   ============================================================ */

.my-list-card,
.upcoming-card {
  position: relative;
  margin-bottom: 16px;
}

.my-list-remove-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.my-list-remove-btn svg { width: 16px; height: 16px; display: block; }
.my-list-remove-btn:hover {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.my-list-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.my-list-date-added {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.avail-badge svg { width: 14px; height: 14px; }
.avail-badge.tbd { color: var(--text-muted); }

.my-list-remove-prompt {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 8px);
}
.my-list-remove-prompt .prompt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.my-list-remove-prompt .prompt-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.my-list-remove-prompt .prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toast-undo-link {
  margin-left: 12px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toast-undo-link:hover {
  text-decoration: underline;
}

/* ===== Movie Favs hook drawer (Feature 5) ===== */
.movie-favs-card {
  margin-bottom: 20px;
}
.hook-trigger-wrap {
  margin-top: 12px;
}
.hook-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s;
}
.hook-trigger:hover { color: var(--accent); }
.hook-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.hook-trigger.open svg { transform: rotate(180deg); }

.hook-drawer {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.hook-drawer.hidden { display: none; }

.hook-section { margin-bottom: 12px; }
.hook-section:last-child { margin-bottom: 0; }
.hook-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.hook-section-title.friction { color: var(--text-muted); }

.hook-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.hook-item.friction { color: var(--text-muted); }
.hook-item .hook-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(245, 166, 35, 0.2);
  border: 1px solid rgba(245, 166, 35, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.hook-item .hook-check svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}
.hook-item.friction .hook-check {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-border);
}
.hook-item.friction .hook-check svg { color: var(--text-muted); }

.hook-credits { margin-top: 8px; }
.hook-credits-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.hook-credit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hook-credit-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}

/* Series season-status info rows on detail cards (My List, Upcoming,
   Recommendations, Search detail). */
.season-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.season-status-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.season-status-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.85;
}
.season-status-key {
  font-weight: 600;
  opacity: 0.75;
}
.season-status-row-airing   { color: var(--accent2); }
.season-status-row-upcoming { color: var(--accent); }
.season-status-row-neutral  { color: var(--text-muted); }
.season-status-row-ended    { color: var(--text-muted); opacity: 0.85; }

.season-status-placeholder {
  display: block;
  margin-top: 10px;
  height: 17px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Miniseries pill — rendered alongside the type badge in `.rec-meta`. Purple
   is the only new color family in this feature; everything else reuses
   existing tokens. */
.pill-mini {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(157, 123, 255, 0.12);
  border: 1px solid rgba(157, 123, 255, 0.4);
  color: #9D7BFF;
  letter-spacing: 0.02em;
}


/* ──────────────────────────────────────────────────────────────────────
   Vibe Search
   ────────────────────────────────────────────────────────────────────── */

.discover-dropdown-link {
  text-decoration: none;
  color: var(--text2);
}
.discover-dropdown-link.active { color: var(--accent); }

.vibe-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

/* ─── Empty / clarification state ─── */

.vibe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 60px;
}

.vibe-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--accent);
}
.vibe-empty-icon i { width: 32px; height: 32px; }

.vibe-empty-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  margin: 0 0 10px;
}

.vibe-empty-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 460px;
  line-height: 1.5;
  margin: 0 0 32px;
}

/* ─── Gated state (no taste profile) ─── */

.vibe-gated {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 80px;
}
.vibe-gated-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--text-muted);
}
.vibe-gated-icon i { width: 32px; height: 32px; }
.vibe-gated-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 12px;
}
.vibe-gated-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 480px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.vibe-gated-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.vibe-gated-cta {
  padding: 12px 28px;
  border-radius: 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
}
.vibe-gated-cta-primary {
  background: var(--accent);
  color: #0A0F1E;
  border: 1.5px solid var(--accent);
}
.vibe-gated-cta-primary:hover { transform: translateY(-1px); }
.vibe-gated-cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.vibe-gated-cta-secondary:hover {
  background: var(--accent-bg);
  transform: translateY(-1px);
}
.vibe-gated-hint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.vibe-search-form {
  width: 100%;
  max-width: 640px;
}

.vibe-textarea-wrap {
  position: relative;
}

.vibe-textarea {
  width: 100%;
  padding: 16px 120px 16px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 92px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vibe-textarea::placeholder { color: var(--text-muted); font-style: italic; opacity: 0.7; }
.vibe-textarea:focus {
  outline: none;
  border-color: var(--accent-muted);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.vibe-submit-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 20px;
  background: var(--accent);
  color: #0A0F1E;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.vibe-submit-btn:hover { transform: translateY(-1px); }
.vibe-submit-btn:disabled { opacity: 0.5; cursor: wait; }

.vibe-examples {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.vibe-example-chip {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.vibe-example-chip:hover {
  border-color: var(--accent-muted);
  color: var(--accent);
  background: var(--accent-bg);
}

/* ─── Loading state ─── */

/* Loading state lives as a sibling of .vibe-empty-form inside .vibe-empty;
   default hidden, revealed when the form's submit toggles .is-searching. */
.vibe-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  text-align: center;
  gap: 8px;
}
.vibe-empty.is-searching .vibe-empty-form { display: none; }
.vibe-empty.is-searching .vibe-loading    { display: flex; }

.vibe-loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vibeSpin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes vibeSpin { to { transform: rotate(360deg); } }

.vibe-loading-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.vibe-loading-sub {
  font-size: 14px;
  color: var(--text-muted);
}

/* ─── Results state ─── */

.vibe-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.vibe-results-query-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.vibe-results-label {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.vibe-results-query {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.vibe-results-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vibe-history-wrap { position: relative; }
.vibe-history-btn,
.vibe-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.vibe-history-btn {
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
}
.vibe-history-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
.vibe-history-btn i { width: 14px; height: 14px; }

.vibe-new-btn {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.vibe-new-btn:hover { background: var(--accent); color: var(--bg); }
.vibe-new-btn i { width: 14px; height: 14px; }

.vibe-history-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 420px;
  background: #11182a;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 300;
}
.vibe-history-menu.open { display: block; }

.vibe-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.vibe-history-item:hover { background: rgba(255,255,255,0.06); }
.vibe-history-query {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vibe-history-date {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.vibe-history-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.vibe-results-meta {
  color: var(--text-muted);
  font-size: 14px;
  margin: 8px 0 24px;
}
.vibe-results-meta strong { color: var(--text); font-weight: 600; }

.vibe-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── Cards — variant overrides on top of .rec-card ─── */

.vibe-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vibe-type-badge.vibe-type-movie  { background: rgba(245,166,35,0.18); color: var(--accent); }
.vibe-type-badge.vibe-type-series { background: rgba(74,158,255,0.18); color: #4A9EFF; }

.rec-explanation.heads-up {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}
.rec-explanation.heads-up .rec-explanation-label { color: var(--danger); }

.vibe-card-heads-up {
  opacity: 0.78;
  transition: opacity 0.2s;
}
.vibe-card-heads-up:hover { opacity: 1; }

.vibe-rated-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-muted);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.vibe-rated-badge svg { flex-shrink: 0; }

/* ─── Worth a Look section ─── */

.vibe-worth-section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vibe-worth-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vibe-show-more-btn {
  padding: 12px 42px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.vibe-show-more-btn:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.vibe-worth-label {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.vibe-worth-expanded { width: 100%; }
.vibe-worth-header { text-align: center; margin-bottom: 8px; }
.vibe-worth-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.vibe-worth-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.vibe-worth-divider {
  width: 60px;
  height: 1px;
  background: var(--glass-border);
  margin: 16px auto 20px;
}
.vibe-worth-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =============================================================
   Mobile horizontal gutter — single source of truth.
   On mobile, .container owns the page side-gutter (on desktop the
   gutter comes from its centered max-width column). The outer page
   wrappers below each carried their own horizontal padding; it is
   zeroed here on mobile so it doesn't double up with the container
   gutter — their vertical padding is left untouched. Wrappers that
   were already 0 horizontal (.my-content-page, .account-container,
   .dna-accordion) just inherit the container gutter; .rec-list and
   .page-header are handled in the max-width:768px block above.
   Placed at end-of-file so it wins source order over the scattered
   base rules. Internal content cards (.profile-card, .rec-card,
   .deal-breakers-panel, …) keep their own padding.
   ============================================================= */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-blank,
  .vibe-page,
  .loading-screen,
  .screen-pad,
  .wizard-progress,
  .admin-container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   Feedback widget — floating button + bottom sheet / popover
   ============================================================ */
.fb-widget { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }

/* Floating action button (always visible, clears the iOS home bar) */
.fb-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #1A1206;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 14px 30px -8px rgba(245,166,35,0.55);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fb-fab:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -8px rgba(245,166,35,0.62); }
.fb-fab svg { width: 17px; height: 17px; }

/* Scrim (mobile only — shown behind the bottom sheet) */
.fb-scrim {
  position: fixed; inset: 0;
  background: rgba(8,6,18,0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}

/* Panel — popover on desktop, bottom sheet on mobile */
.fb-panel {
  position: fixed;
  z-index: 1210;
  width: 340px;
  right: 20px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #1E2438, #161A2A);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 30px 64px -20px rgba(0,0,0,0.75);
  padding: 18px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease;
  visibility: hidden;
}
.fb-widget.fb-open .fb-panel { opacity: 1; transform: none; visibility: visible; }
.fb-widget.fb-open .fb-scrim { opacity: 0; } /* scrim only on mobile (below) */
.fb-grip { display: none; }

.fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fb-title { font-family: var(--font-serif); font-weight: 700; font-size: 16px; margin: 0; color: var(--text); }
.fb-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fb-close:hover { color: var(--text); }

.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--ghost-bg); color: var(--text-muted);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.fb-chip.selected { color: var(--text); border-color: var(--accent); background: var(--accent-muted); }
.fb-sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fb-sw-bug { background: var(--danger); }
.fb-sw-idea { background: var(--accent); }
.fb-sw-confusing { background: var(--accent3); }
.fb-sw-other { background: var(--text-light); }

.fb-textarea {
  width: 100%; height: 86px; resize: none;
  background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-sans); font-size: 14px; padding: 11px 12px; margin-bottom: 6px;
}
.fb-textarea::placeholder { color: var(--text-muted); opacity: 0.65; }
.fb-textarea:focus { outline: none; border-color: var(--accent); }

.fb-counter { text-align: right; font-size: 11px; color: var(--text-muted); font-family: ui-monospace, monospace; margin: 0 2px 12px; }
.fb-counter.warn { color: var(--accent); }

.fb-ctx {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  background: rgba(0,0,0,0.22); border: 1px dashed var(--border); border-radius: 9px;
  padding: 9px 11px; margin-bottom: 14px;
}
.fb-ctx-icon { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.fb-ctx code { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--text-light); }

.fb-error {
  font-size: 12px; color: var(--danger);
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 10px;
}

.fb-send {
  width: 100%; height: 48px; border: none; border-radius: var(--radius);
  background: var(--accent); color: #1A1206;
  font-family: var(--font-serif); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.fb-send:hover:not(:disabled) { background: #F4B85A; }
.fb-send:disabled { background: var(--accent-muted); color: rgba(245,166,35,0.55); cursor: not-allowed; }

/* Success state (replaces the form in place) */
.fb-success-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 8px 10px; }
.fb-check { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,212,170,0.16); border: 1px solid rgba(0,212,170,0.5); display: grid; place-items: center; margin-bottom: 14px; }
.fb-check svg { width: 24px; height: 24px; color: var(--success); }
.fb-success-title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; margin: 0 0 5px; color: var(--text); }
.fb-success-sub { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* Mobile (<=640px): bottom sheet that slides up + scrim */
@media (max-width: 640px) {
  .fb-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fb-scrim { pointer-events: none; }
  .fb-widget.fb-open .fb-scrim { opacity: 1; pointer-events: auto; }
  .fb-panel {
    left: 0; right: 0; bottom: 0; width: auto;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transform-origin: bottom center;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transition: transform 0.28s cubic-bezier(.22,.9,.32,1);
    opacity: 1; visibility: visible;
  }
  .fb-widget.fb-open .fb-panel { transform: translateY(0); }
  .fb-grip { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--border); margin: 0 auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-panel, .fb-scrim, .fb-fab { transition: none; }
}

/* === Unified Rating (verdict tiers + trait hooks + rewatch) === */

:root {
  --solid: #2FBF9F;
  --solid-bg: rgba(47,191,159,0.10);
  --solid-muted: rgba(47,191,159,0.30);
}

.verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.verdict-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 13px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: inherit;
  transition: all var(--transition);
}

.verdict-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.verdict-tile .vhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.verdict-tile .vhead svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.verdict-tile .vsub {
  font-size: 11.5px;
  color: var(--text2);
  font-weight: 500;
  line-height: 1.35;
}

.verdict-tile[data-tone="loved"].sel {
  background: var(--accent-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.verdict-tile[data-tone="loved"].sel .vhead { color: var(--accent); }

.verdict-tile[data-tone="solid"].sel {
  background: var(--solid-bg);
  border-color: var(--solid-muted);
  box-shadow: 0 0 0 1px var(--solid);
}

.verdict-tile[data-tone="solid"].sel .vhead { color: var(--solid); }

.verdict-tile[data-tone="neg"].sel {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  box-shadow: 0 0 0 1px var(--danger);
}

.verdict-tile[data-tone="neg"].sel .vhead { color: var(--danger); }

.trait-instruction {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
}

.trait-instruction strong {
  color: var(--text);
  font-weight: 600;
}

.trait-hook {
  padding: 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

.trait-hook .trait-stmt {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 11px;
}

.trait-seg {
  display: inline-flex;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
}

.trait-seg button {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--text2);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.trait-seg button:first-child {
  border-right: 1px solid var(--glass-border);
}

.trait-seg button svg {
  width: 16px;
  height: 16px;
}

.trait-seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.trait-hook[data-state="liked"] .trait-seg .up {
  background: var(--accent-muted);
  color: var(--accent);
}

.trait-hook[data-state="not_for_me"] .trait-seg .down {
  background: var(--danger-hover);
  color: var(--danger);
}

.rewatch-row {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin: 16px 0 4px;
  border: 1.5px dashed var(--accent-muted);
  border-radius: var(--radius);
  background: var(--accent-bg);
  cursor: pointer;
  transition: all var(--transition);
}

.rewatch-row.visible { display: flex; }

.rewatch-row .rewatch-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,166,35,0.12);
  color: var(--accent);
}

.rewatch-row .rewatch-ic svg {
  width: 19px;
  height: 19px;
}

.rewatch-row .rewatch-txt { flex: 1 1 auto; }

.rewatch-row .rewatch-txt .rt1 {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.rewatch-row .rewatch-txt .rt2 {
  display: block;
  font-size: 11.5px;
  color: var(--text2);
  font-weight: 500;
  margin-top: 2px;
}

.rewatch-row .rewatch-chk {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.5px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--transition);
}

.rewatch-row .rewatch-chk svg {
  width: 16px;
  height: 16px;
}

.rewatch-row.on {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.rewatch-row.on .rewatch-chk {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0F1E;
}

/* Locked (legacy) rating: read-only hook display + upgrade note */
.locked-hooks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.locked-hook {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.locked-hook-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 1px;
}

.locked-hook-check svg { width: 18px; height: 18px; }

.locked-hook-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}

.rating-locked-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin: 16px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}

.rating-locked-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}

.rating-locked-ic svg { width: 17px; height: 17px; }

.rating-locked-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.rating-locked-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 3px;
  line-height: 1.45;
}

/* === Custom (user-entered) hooks — Rate It drawer + profile DNA rows === */
.custom-hooks-zone {
  margin-bottom: 10px;
  /* The zone renders in contexts (DNA detail) whose ancestors center text. */
  text-align: left;
}

.trait-hook.custom-hook {
  position: relative;
}

.custom-hook .trait-stmt {
  padding-right: 26px;
}

.custom-hook .custom-pencil {
  display: inline-block; /* Tailwind reset makes svg display:block */
  width: 13px;
  height: 13px;
  color: var(--accent);
  margin-right: 7px;
  vertical-align: -1.5px;
  flex: 0 0 auto;
}

.custom-hook .custom-del {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 17px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.custom-hook .custom-del:hover {
  color: var(--danger);
  background: var(--danger-hover);
}

.trait-hook.custom-hook.pending .trait-stmt {
  color: var(--text2);
  font-style: italic;
  margin-bottom: 0;
  padding-right: 0;
}

.custom-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--radius);
}

.custom-add-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

.custom-add-row input[type="text"]::placeholder {
  color: var(--text2);
  opacity: 0.7;
}

.custom-add-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.custom-add-btn:hover:not(:disabled) {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}

.custom-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.custom-hook-error {
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.4;
}

.custom-hook-error:not(:empty) {
  padding: 2px 2px 8px;
}

.rating-summary-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.rating-summary-text {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  flex: 1 1 auto;
  line-height: 1.4;
}

.rating-summary-text b {
  color: var(--text);
  font-weight: 700;
}

/* Verdict pill badges + inline re-rate pills (profile Taste DNA rows) */
.verdict-minipill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--text2);
}

.verdict-minipill svg {
  width: 11px;
  height: 11px;
}

.verdict-minipill.loved {
  color: var(--accent);
  border-color: var(--accent-muted);
  background: var(--accent-bg);
}

.verdict-minipill.solid {
  color: var(--solid);
  border-color: var(--solid-muted);
  background: var(--solid-bg);
}

.verdict-minipill.neg {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.dna-vpills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
}

/* "Rated Jun 20, 2026" at the right end of the verdict-pill row. margin-left:auto
   in the wrapping flex row means it fills the free space on the last pill line, or
   takes its own line (still right-aligned) when that line is full — no mobile rule. */
.rated-on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
}

.rated-on svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dna-vpill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--text2);
}

.dna-vpill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dna-vpill[data-tone="loved"].sel {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.dna-vpill[data-tone="solid"].sel {
  background: var(--solid-bg);
  border-color: var(--solid);
  color: var(--solid);
}

.dna-vpill[data-tone="neg"].sel {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

@media (min-width: 700px) {
  .verdict-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .trait-hook {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .trait-hook .trait-stmt {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .trait-hook .trait-seg {
    flex: 0 0 300px;
    width: 300px;
  }

  /* Custom rows: delete moves after the segment control (mock desktop). */
  .trait-hook.custom-hook .trait-stmt {
    padding-right: 0;
  }

  .custom-hook .custom-del {
    position: static;
    order: 3;
  }
}

/* --- Legal pages (/privacy, /terms), consent gate + modals --- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px 80px;
  position: relative;
}
/* Let the logo scroll away with the page instead of the global fixed corner,
   so long legal text never slides underneath it. */
.legal-page .spotlight-logo-container { position: absolute; }
.legal-doc {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}
.legal-doc h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; }
.legal-doc .legal-meta { color: var(--text-muted); font-size: 13px; margin: 0 0 28px; }
.legal-doc h2 { font-size: 18px; font-weight: 700; margin: 32px 0 10px; color: var(--text); }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.obf-email { white-space: nowrap; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  vertical-align: top;
}
.legal-table th { background: rgba(255, 255, 255, 0.04); font-weight: 700; }

/* Consent checkbox (sign-up form + consent gate) */
.consent-field { margin: 4px 0; }
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.consent-check input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-check a { color: var(--accent); text-decoration: underline; }
.consent-check-error { color: var(--danger); }
.consent-check-error input[type="checkbox"] { outline: 2px solid var(--danger); outline-offset: 1px; }
.consent-signout { text-align: center; margin-top: 18px; }
.consent-signout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.consent-signout-btn:hover { color: var(--text); }

/* Inline legal modal */
body.legal-modal-open { overflow: hidden; }
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.legal-modal[hidden] { display: none; }
.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 18, 0.7);
  backdrop-filter: blur(4px);
}
.legal-modal-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.legal-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.legal-modal-close:hover { color: var(--text); }
.legal-modal-scroll { overflow-y: auto; padding: 28px 26px; }

@media (max-width: 700px) {
  .legal-page { padding: 84px 18px 60px; }
  .legal-doc { font-size: 14.5px; }
  .legal-doc h1 { font-size: 24px; }
  .legal-modal { padding: 0; }
  .legal-modal-panel { max-height: 100vh; height: 100%; border-radius: 0; border: none; }
  .legal-modal-scroll { padding: 60px 18px 28px; }
}

/* --- Contact page (/contact) --- */
.contact-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.contact-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}
.contact-form-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.contact-form-foot .form-error { margin: 0; }
.contact-form-foot .fb-counter { margin: 0; }
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
}


/* --- Admin: Catalog tab (read-only show inspector) --- */
/* Reuses the admin system: .toolbar-search/.toolbar-btn for the search row,
   .table-actions/.action-btn(.danger) for the buttons. Only what that system
   has no equivalent for is defined here. */

/* Load sits directly beside the input rather than at the far edge of the
   container — .admin-toolbar's space-between is right for a table header, but
   strands the button here. */
.admin-show-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.admin-show-search-input { flex: 0 1 320px; }

.admin-show-tmdb {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.admin-show-tmdb > label {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.admin-show-tmdb-input {
  flex: 0 1 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-show-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.admin-show-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-show-meta-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  color: var(--text);
}

.admin-show-refs {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.admin-show-refs-none { color: var(--success); }
.admin-show-refs-warn { color: var(--accent); }

/* Label left, actions right, sitting directly on top of the record box. */
.admin-show-record-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.admin-show-json-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0;
}

/* Read-only: the record can only be changed by re-pulling from TMDB, so this
   is a viewer. Height is set per-render from the line count (capped), so short
   records don't leave a wall of empty space. */
.admin-show-json {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
  cursor: default;
}

.admin-show-json:focus { outline: none; }

.admin-show-notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 12px;
}

.admin-show-notice--ok {
  border-color: rgba(0,212,170,0.3);
  background: rgba(0,212,170,0.08);
  color: var(--success);
}

.admin-show-notice--error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.admin-show-notice--warn {
  border-color: var(--accent-muted);
  background: var(--accent-bg);
  color: var(--accent);
}

@media (max-width: 700px) {
  .admin-show-search-input,
  .admin-show-tmdb-input { flex: 1 1 100%; }
}

/* === Golden Profile (deterministic, v2) ==================================
   Rendered by views/_golden_profile_body.erb from lib/golden_profile.rb.
   Three cards: the shows you rated, what that adds up to, what loses you.

   .gp-name exists because .profile-name is defined twice (l.1776 profile-page
   style, l.2101 recs-header link style) and the later one wins everywhere on
   source order — so the profile-page name renders bold/white rather than the
   italic accent it was written for. Rather than reorder two long-standing
   blocks and risk the recs header, the Golden Profile name opts in explicitly.
   ======================================================================== */
.gp-name.profile-name {
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: normal;
  color: var(--accent);
  display: block;
  text-align: center;
  cursor: default;
  margin-bottom: 22px;
}

.gp-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 22px 20px;
  margin-bottom: 16px;
  text-align: left;
}

.gp-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.gp-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-muted), transparent);
}

.gp-deck {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 56ch;
}

/* --- card 1: the poster wall (the only place posters appear) ---
   Modes sit side by side; each column holds a 4-poster row without wrapping
   (4 x 84px + 3 x 8px gap = 360px), so a mode never orphans a poster. */
.gp-wall { display: flex; flex-wrap: wrap; gap: 24px 28px; }
/* Only matches when the deck line is suppressed (a single mode), restoring the
   18px the deck's own margin-bottom was contributing. Not 12px: this collapses
   against .gp-label's 6px margin-bottom, so the larger of the two is the gap. */
.gp-label + .gp-wall { margin-top: 18px; }
.gp-wall .gp-mode { flex: 1 1 360px; min-width: 360px; }

/* Mode colour is identity, not decoration: the same palette orders the modes
   top to bottom. Assigned by index in lib/golden_profile.rb. */
.gp-mode-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.gp-mode-c0 { color: var(--accent); }
.gp-mode-c1 { color: var(--accent2); }
.gp-mode-c2 { color: var(--accent3); }
.gp-mode-c3 { color: #C08BE8; }
.gp-mode-how { font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; }

.gp-posters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.gp-poster-cell { width: 84px; }
.gp-poster {
  position: relative;
  display: block;
  width: 84px;
  height: 126px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.gp-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-poster-title {
  display: block;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  min-height: 26px;
}

/* --- card 2: the theme is the focal point, titles are quiet --- */
.gp-theme { margin-bottom: 20px; }
/* last-of-type, not last-child: the "+ N more" button may follow. */
.gp-theme:last-of-type { margin-bottom: 4px; }
.gp-theme-text { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.gp-theme-titles { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 5px; }

/* --- card 3: collapsed, evidence inline as text, no posters --- */
.gp-lose { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.gp-lose:last-of-type { border-bottom: 0; padding-bottom: 2px; }
/* No glyph column, so the label lines sit flush under the headline rather than
   indented past a bullet that no longer exists. */
.gp-lose-text { font-size: 15px; line-height: 1.45; }
.gp-lose-cond { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin-top: 5px; }
.gp-lose-ev { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 5px; }
.gp-ev-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 6px;
}
/* Tints, not the raw --accent2/--danger: those are tuned for 15px+ elements, and
   on this card's effective background (rgb(35,39,53)) --danger measures 3.89:1 —
   under AA for text this size, which is why "Bailed" was the hard one to read.
   Same hues, lightened until they clear it: 6.80:1 red, 9.26:1 green.
   Green means "this one worked" and nothing else — hence the separate caveat
   orange for "Unless", which is a warning about a turn-off, not a win. It is
   deliberately not --accent (#F5A623): that gold is section chrome (.gp-label,
   .gp-more), and this row of labels is a semantic scale, green -> orange -> red. */
.gp-ev-ok { color: #4FE3C1; }
.gp-ev-caveat { color: #FFA94D; }
.gp-ev-no { color: #FF9089; }
.gp-ev-neutral { color: var(--text-muted); opacity: 0.75; }
.gp-ev-sep { opacity: 0.35; margin: 0 9px; }

/* Rows past the fold ship in the HTML and are revealed in place — no fetch.
   The button removes itself, so a card can only ever open, never re-collapse. */
.gp-fold { display: none; }
.gp-open .gp-fold { display: block; }

/* Accent-coloured for the same reason the accordion's Show/Hide is: muted grey
   here read as a caption, which is what made the old static count look inert. */
.gp-more {
  display: block;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 12px 0 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gp-more:hover { opacity: 0.75; }
.gp-more-center { width: 100%; text-align: center; }
.gp-foot { font-size: 12px; color: var(--text-muted); text-align: center; padding: 8px 0 2px; }

/* --- interstitial reveal: card by card, not item by item.
       Per-item stagger would run ~9s with this much content. --- */
.gp-reveal { animation: fadeIn 0.5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .gp-reveal { animation: none; }
}

@media (max-width: 768px) {
  .gp-name.profile-name { font-size: 25px; }
  .gp-wall { gap: 20px; }
  .gp-wall .gp-mode { flex: 1 1 100%; min-width: 0; }
  .gp-theme-text { font-size: 16.5px; }
  /* A mode's four posters must fit one row here too: at 375px the card gives
     271px of content, so 4 x 62px + 3 x 6px gap = 266px. Any larger and the
     fourth poster orphans onto a row of its own. */
  .gp-posters { gap: 6px; }
  .gp-poster-cell, .gp-poster { width: 62px; }
  .gp-poster { height: 93px; }
}

/* --- Admin: Weekly Email run viewer (R5) -----------------------------------
   The owner's replacement for the prototype's HTML diagnostic report, which
   Railway's filesystem can neither keep nor show. Everything here is read-only:
   status tone is the whole UI, because `sending` and `send_failed` are the two
   rows that need a decision (arch §4.3). --- */

.status-badge--ok { background: rgba(0,212,170,0.12); color: var(--success); }
.status-badge--warn { background: rgba(245,166,35,0.12); color: var(--accent); }
.status-badge--danger { background: var(--danger-bg); color: var(--danger); }
.status-badge--muted { background: rgba(200,204,219,0.1); color: var(--text-muted); }

.wk-batch {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.wk-batch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wk-batch-week { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.wk-none { padding: 10px 0 2px; }

.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.wk-chip {
  display: inline-flex;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.wk-chip b { color: var(--text); font-weight: 600; }

/* Wide tables scroll inside the panel rather than pushing the page sideways. */
.wk-scroll { overflow-x: auto; margin-top: 12px; }
.wk-data-table th, .wk-data-table td { padding: 8px 10px; font-size: 12px; }
.wk-data-table td { vertical-align: top; }

.wk-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 6px;
}
.wk-alert { color: var(--danger); font-size: 12px; }
.wk-muted { color: var(--text-muted); }
.wk-flag--true { color: var(--success); font-weight: 600; }
.wk-flag--false { color: var(--text-muted); }

a.action-btn { text-decoration: none; }

.wk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.wk-back:hover { color: var(--text); }
.wk-back svg { width: 14px; height: 14px; }

.wk-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.wk-run-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.wk-run-status { text-align: right; }
.wk-run-status p { margin: 6px 0 0; font-size: 12px; }

.wk-panel {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.wk-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.wk-subhead {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 16px 0 0;
}

.wk-kv { width: 100%; border-collapse: collapse; }
.wk-kv th {
  text-align: left;
  vertical-align: top;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 14px 6px 0;
  white-space: nowrap;
  width: 1%;
}
.wk-kv td { font-size: 12.5px; padding: 6px 0; color: var(--text); }
.wk-list { margin: 0; padding-left: 18px; font-size: 12.5px; }

.wk-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The email renders on a white background inside its own sandbox. */
.wk-email-frame {
  width: 100%;
  height: 640px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}

/* ~90KB per prompt: collapsed always, and never inline-open by default. */
.wk-sidecar { border-top: 1px solid rgba(255,255,255,0.06); padding: 10px 0; }
.wk-sidecar:first-of-type { border-top: 0; padding-top: 0; }
.wk-sidecar summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.wk-sidecar summary:hover { color: var(--text); }
.wk-sidecar-body { margin-top: 10px; max-height: 460px; }

/* --- Weekly Email tab: engagement funnel strip + batch cards ------------- */
/* Solid panels on purpose — glass is atmosphere, not structure. */

.wk-funnel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.wk-funnel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text2);
}
.wk-funnel-legend { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.wk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px 0 10px;
}
.wk-dot--ok { background: var(--success); }
.wk-dot--bad { background: var(--danger); }

.wk-funnel { display: flex; align-items: stretch; margin-bottom: 12px; }
.wk-kpi {
  flex: 1;
  background: rgba(22, 28, 46, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 14px 16px;
}
.wk-kpi--good { border-top: 3px solid var(--success); }
.wk-kpi--bad { border-top: 3px solid var(--danger); }
.wk-kpi h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wk-kpi-big { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.wk-kpi-big small { font-size: 12px; color: var(--text2); font-weight: 600; }
.wk-kpi--good .wk-kpi-big { color: var(--success); }
.wk-kpi--bad .wk-kpi-big { color: var(--danger); }
.wk-kpi--north.wk-kpi--good .wk-kpi-big { color: var(--accent); }
.wk-kpi-note { font-size: 11px; color: var(--text2); margin-top: 4px; line-height: 1.5; }
.wk-funnel-arrow { align-self: center; color: var(--text-muted); font-size: 16px; padding: 0 6px; flex: 0 0 auto; }

.wk-trend { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.wk-bar { flex: 0 0 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk-bar i {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #FFC964, var(--accent));
  border-radius: 5px 5px 2px 2px;
}
.wk-bar--dim i { background: rgba(255, 255, 255, 0.22); }
.wk-bar span { font-size: 9.5px; color: var(--text-muted); font-weight: 600; }
.wk-bar b { font-size: 10.5px; color: var(--text2); }

.wk-strip-foot { font-size: 11px; color: var(--text-muted); margin: 0 0 6px; }
.wk-scroll-hint { font-size: 12px; color: var(--text-muted); font-weight: 600; margin: 20px 0 4px; }

.wk-eng-table th.wk-num, .wk-eng-table td.wk-num { text-align: center; }
.wk-eng-table td { vertical-align: top; }
.wk-zero { color: var(--text-muted); }
.wk-nmt { color: var(--danger); font-weight: 700; }
.wk-cell-sub { font-size: 10px; color: var(--text-muted); }
.wk-add-chip {
  display: inline-block;
  background: rgba(245, 166, 35, 0.14);
  border: 1px solid rgba(245, 166, 35, 0.35);
  color: #FFC964;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  margin: 1px 3px 1px 0;
}
.wk-open-btn {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.wk-open-btn:hover { text-decoration: underline; }
.wk-card-foot { font-size: 11px; color: var(--text-muted); margin: 10px 0 0; }

.wk-loader {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 22px 0 4px;
}
.wk-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
  animation: spin 1s linear infinite;
}

@media (max-width: 700px) {
  .wk-batch-head, .wk-run-head { flex-direction: column; }
  .wk-run-status { text-align: left; }
  .wk-funnel { flex-wrap: wrap; gap: 10px; }
  .wk-funnel-arrow { display: none; }
  .wk-kpi { flex: 1 1 45%; }
}