:root {
  --bg: #0b0d12;
  --bg-elev: #12161f;
  --bg-elev-2: #181d28;
  --border: #232a3a;
  --border-strong: #2f384c;
  --text: #e7ecf3;
  --text-muted: #8c97ad;
  --text-dim: #65718a;
  --accent: #6aa3ff;
  --accent-dark: #4d8bff;
  --accent-strong: #38d39f;
  --accent-soft: rgba(106, 163, 255, 0.12);
  --accent-glow: rgba(106, 163, 255, 0.14);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #7eb0ff;
  --good: #38d39f;
  --good-soft: rgba(56, 211, 159, 0.14);
  --watching: #24a968;
  --watching-soft: rgba(36, 169, 104, 0.14);
  --finished: #e3b341;
  --finished-soft: rgba(227, 179, 65, 0.18);
  --dropped: #ff6b6b;
  --dropped-soft: rgba(255, 107, 107, 0.18);
  --progress-track: #4a2428;
  /* Show progress bar fill — revert: set --progress-fill to --progress-fill-prev */
  --progress-fill-prev: #32d583;
  --progress-fill-caught-up-prev: #38d39f;
  --progress-fill: #24a968;
  --progress-fill-caught-up: #28b077;
  --progress-gradient-end: #a855f7;
  --warn: #ffb547;
  --bad: #ff6b6b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  --radius-sm: 8px;
  /* Brand-mark accent colors — previously duplicated in landing.css,
   * legal.css, and home-in-app.css. Promoted to :root so any page can
   * pick them up without re-declaring; per-page overrides still work
   * because :root is the lowest-specificity site-wide source. */
  --landing-gold: #f5c518;
  --landing-green: #2ecc71;
  --page-gutter: clamp(20px, 3vw, 48px);
  --sidebar-width: 0px;
  --stat-yellow: #f5c400;
  --stat-green: #32d583;
  --stat-orange: #ff8a3d;
  --stat-pink: #ff3f75;
  --sync-btn-bg: linear-gradient(180deg, #ffd21a, #e7ad00);
  --sync-btn-text: #080b10;
  --stripe-test-banner-height: 30px;
  --sidebar-bg: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
  --shelf-bg: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  --shelf-border: var(--border-subtle, var(--border));
  --aurora-clr-1: #00c2ff;
  --aurora-clr-2: #33ff8c;
  --aurora-clr-3: #ffc640;
  --aurora-clr-4: #e54cff;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
}

.stripe-test-banner {
  position: relative;
  z-index: 10000;
  width: 100%;
  flex-shrink: 0;
  min-height: var(--stripe-test-banner-height);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  background: #4a1c24;
  color: #ffc9c9;
  border-bottom: 1px solid #7a2838;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

html.has-stripe-test-banner .sync-progress:not([hidden]) {
  top: var(--stripe-test-banner-height);
}

html.has-stripe-test-banner .offline-banner:not([hidden]) {
  top: var(--stripe-test-banner-height);
}

html.has-stripe-test-banner .mobile-app-support-bar:not([hidden]) {
  top: calc(12px + env(safe-area-inset-top, 0px) + var(--stripe-test-banner-height));
}

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

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-language-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.footer-language-flag {
  width: 36px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elev);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.footer-language-flag[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.footer-language-flag:hover {
  transform: translateY(-1px);
}

.footer-language-flag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footer-discord-link {
  display: inline-flex;
  vertical-align: middle;
  text-decoration: none;
  line-height: 0;
  margin: 0 1px;
}

.footer-discord-link:hover {
  text-decoration: none;
  opacity: 0.85;
}

.footer-discord-link img {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---- app shell ---- */

.app-chrome-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tab-btn-link {
  text-decoration: none;
  box-sizing: border-box;
}

.tab-btn-link .tab-icon svg {
  color: var(--accent);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  text-align: left;
  border-left: 3px solid transparent;
  line-height: 1.25;
}

.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.tab-icon svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.tab-icon img.tab-icon-img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

.tab-btn.active {
  background: var(--tab-active-bg, var(--accent-soft));
  border-left-color: var(--accent);
  color: var(--text);
}

.tab-btn:hover {
  color: var(--text);
  background: var(--tab-hover, var(--accent-soft));
}

/* Aurora shimmer on Add Show tab + panel title (colors only in text glyphs) */
.aurora-title {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.15;
  background: var(--aurora-bg, var(--bg));
}

.aurora-title-text {
  position: relative;
  z-index: 1;
  color: var(--aurora-text, #fff);
}

.aurora {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: var(--aurora-blend-mode, darken);
  pointer-events: none;
}

.aurora__item {
  overflow: hidden;
  position: absolute;
  width: var(--aurora-size, 12rem);
  height: var(--aurora-size, 12rem);
  background-color: var(--aurora-clr-1);
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  filter: blur(var(--aurora-blur, 0.65rem));
  mix-blend-mode: var(--aurora-item-blend-mode, overlay);
  opacity: var(--aurora-item-opacity, 1);
}

.aurora__item:nth-of-type(1) {
  top: -50%;
  animation: aurora-border 6s ease-in-out infinite, aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
  background-color: var(--aurora-clr-3);
  right: 0;
  top: 0;
  animation: aurora-border 6s ease-in-out infinite, aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
  background-color: var(--aurora-clr-2);
  left: 0;
  bottom: 0;
  animation: aurora-border 6s ease-in-out infinite, aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
  background-color: var(--aurora-clr-4);
  right: 0;
  bottom: -50%;
  animation: aurora-border 6s ease-in-out infinite, aurora-4 24s ease-in-out infinite alternate;
}

.tab-btn-aurora .aurora-title,
.mobile-tab-menu-item-aurora .aurora-title,
.panel-title-aurora.aurora-title {
  --aurora-blur: 0.3rem;
  --aurora-size: 4.5rem;
  background: none;
  overflow: visible;
}

.tab-btn-aurora:hover .aurora-title,
.tab-btn-aurora.active .aurora-title {
  background: none;
}

/* Sidebar tab: shimmer lives in the glyphs only — no label background box. */
.tab-btn-aurora .aurora {
  display: none;
}

.tab-btn-aurora .aurora-title-text,
.panel-title-aurora .aurora-title-text,
.aurora-gradient-text {
  display: inline-block;
  background-image: linear-gradient(
    110deg,
    var(--aurora-clr-1) 0%,
    var(--aurora-clr-2) 25%,
    var(--aurora-clr-3) 50%,
    var(--aurora-clr-4) 75%,
    var(--aurora-clr-1) 100%
  );
  background-size: 200% auto;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: aurora-text-gradient 6s linear infinite;
}

.mobile-tab-menu-item[data-tab="search"] .mobile-tab-menu-item-icon {
  color: var(--aurora-clr-1);
  animation: aurora-icon-cycle 8s linear infinite;
}

@keyframes aurora-icon-cycle {
  0%,
  100% {
    color: var(--aurora-clr-1);
  }

  25% {
    color: var(--aurora-clr-2);
  }

  50% {
    color: var(--aurora-clr-3);
  }

  75% {
    color: var(--aurora-clr-4);
  }
}

.panel-title-aurora.aurora-gradient-text {
  display: block;
}

@media (max-width: 1279px) {
  .mobile-tab-menu-item[data-tab="search"],
  .mobile-tab-menu-item-aurora {
    border: 0;
    border-left: 3px solid var(--aurora-clr-1);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--aurora-clr-1) 16%, transparent),
      transparent 72%
    );
    animation: aurora-icon-cycle 8s linear infinite;
  }

  .mobile-tab-menu-item[data-tab="search"] > .mobile-tab-menu-item-label,
  .mobile-tab-menu-item-aurora > .mobile-tab-menu-item-label,
  .mobile-tab-menu-item[data-tab="search"] .mobile-tab-menu-item-icon,
  .mobile-tab-menu-item-aurora .mobile-tab-menu-item-icon {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    background: none;
    background-image: none;
    animation: none;
    font-weight: 700;
  }

  .panel-title-aurora.aurora-gradient-text {
    background-image: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: currentColor;
    color: var(--aurora-clr-1);
    animation: aurora-mobile-label-color 4s ease-in-out infinite;
  }
}

@keyframes aurora-mobile-label-color {
  0%,
  100% {
    color: var(--aurora-clr-1);
    -webkit-text-fill-color: var(--aurora-clr-1);
  }

  33% {
    color: var(--aurora-clr-3);
    -webkit-text-fill-color: var(--aurora-clr-3);
  }

  66% {
    color: var(--aurora-clr-4);
    -webkit-text-fill-color: var(--aurora-clr-4);
  }
}

@keyframes aurora-text-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-btn-aurora .aurora-title-text,
  .mobile-tab-menu-item[data-tab="search"] .aurora-title-text,
  .mobile-tab-menu-item[data-tab="search"] > .mobile-tab-menu-item-label.aurora-gradient-text,
  .mobile-tab-menu-item[data-tab="search"] > .mobile-tab-menu-item-label.aurora-mobile-label,
  .mobile-tab-menu-item-aurora .aurora-title-text,
  .mobile-tab-menu-item-aurora > .mobile-tab-menu-item-label.aurora-gradient-text,
  .mobile-tab-menu-item-aurora > .mobile-tab-menu-item-label.aurora-mobile-label,
  .panel-title-aurora .aurora-title-text,
  .panel-title-aurora.aurora-gradient-text,
  .aurora-gradient-text {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
  }

  .mobile-tab-menu-item[data-tab="search"],
  .mobile-tab-menu-item-aurora {
    border-left-color: var(--border);
    background: transparent;
  }

  .mobile-tab-menu-item[data-tab="search"] .mobile-tab-menu-item-icon {
    animation: none;
    color: var(--text);
  }
}

@keyframes aurora-1 {
  0% {
    top: 0;
    right: 0;
  }

  50% {
    top: 100%;
    right: 75%;
  }

  75% {
    top: 100%;
    right: 25%;
  }

  100% {
    top: 0;
    right: 0;
  }
}

@keyframes aurora-2 {
  0% {
    top: -50%;
    left: 0%;
  }

  60% {
    top: 100%;
    left: 75%;
  }

  85% {
    top: 100%;
    left: 25%;
  }

  100% {
    top: -50%;
    left: 0%;
  }
}

@keyframes aurora-3 {
  0% {
    bottom: 0;
    left: 0;
  }

  40% {
    bottom: 100%;
    left: 75%;
  }

  65% {
    bottom: 40%;
    left: 50%;
  }

  100% {
    bottom: 0;
    left: 0;
  }
}

@keyframes aurora-4 {
  0% {
    bottom: -50%;
    right: 0;
  }

  50% {
    bottom: 0%;
    right: 40%;
  }

  90% {
    bottom: 50%;
    right: 25%;
  }

  100% {
    bottom: -50%;
    right: 0;
  }
}

@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }

  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
  }

  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
  }

  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
  }

  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__item {
    animation: none !important;
  }
}

.sidebar-filter {
  display: block;
  margin: 0;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
}

.sidebar-filter select {
  width: 100%;
  min-width: 0;
}

.sidebar-filter-collapsible {
  padding-top: 14px;
  padding-bottom: 14px;
}

.sidebar-filter-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.sidebar-filter-collapsible > summary::-webkit-details-marker {
  display: none;
}

.sidebar-filter-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.sidebar-filter-collapsible-summary::after {
  content: '▾';
  color: var(--text-dim);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.sidebar-filter-collapsible[open] > .sidebar-filter-collapsible-summary::after {
  transform: rotate(180deg);
}

.sidebar-filter-collapsible-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.sidebar-filter-collapsible-body select {
  width: 100%;
  min-width: 0;
}

.platform-filter-list {
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.platform-filter-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.platform-filter-option:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.platform-filter-option:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.platform-filter-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.platform-filter-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.platform-filter-option img.platform-filter-icon {
  display: block;
}

.platform-filter-icon--all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.platform-filter-icon--empty {
  display: inline-block;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.platform-filter-label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}

.sidebar-check-list {
  display: grid;
  gap: 6px;
}

.sidebar-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.sidebar-check input {
  margin: 0;
  accent-color: var(--accent);
}

.sidebar-stats {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.sidebar-stats div {
  padding: 10px 0;
}

.sidebar-stats div:nth-child(-n + 2) {
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.sidebar-stats span {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
}

.sidebar-stats strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  margin-top: 2px;
}

.stat-green {
  color: var(--good, var(--stat-green)) !important;
}

.stat-orange {
  color: var(--stat-orange) !important;
}

.stat-pink {
  color: var(--stat-pink) !important;
}

.app-shell {
  margin-left: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: none;
  position: relative;
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.app-loading[hidden] {
  display: none;
}

.app-loading p {
  margin: 0;
}

.content {
  flex: 1;
  padding: 28px 42px 28px;
}

.list-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}

.list-filter-input {
  width: 220px;
  max-width: min(280px, 28vw);
  min-width: 0;
  height: 40px;
  min-height: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  line-height: 38px;
  box-sizing: border-box;
}

.list-filter-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.list-filter-clear {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/*
 * Media-type badges used in the unified Add search results. The
 * badge sits inline in each result row's year line so that
 * shows and movies are visually distinct at a glance without
 * adding a second metadata line.
 */
.search-media-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  margin-right: 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
}

.search-media-badge--tv {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
}

.search-media-badge--movie {
  background: color-mix(in srgb, #f5a524 18%, transparent);
  border-color: color-mix(in srgb, #f5a524 55%, transparent);
  color: color-mix(in srgb, #f5a524 80%, var(--text));
}

.mobile-app-support-bar {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(820px, calc(100vw - 32px));
  padding: 8px 10px 8px 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.mobile-app-support-bar.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mobile-app-support-drag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}

.mobile-app-support-drag:hover,
.mobile-app-support-drag:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elev-2, var(--bg-elev)) 75%, transparent);
}

.mobile-app-support-bar.is-dragging .mobile-app-support-drag {
  cursor: grabbing;
}

.mobile-app-support-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-app-support-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-app-support-close:hover,
.mobile-app-support-close:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elev-2, var(--bg-elev)) 75%, transparent);
}

.mobile-app-support-bar[hidden] {
  display: none !important;
}

@media (max-width: 1279px) {
  .mobile-app-support-bar {
    display: none !important;
  }
}

.mobile-app-support-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
}

.mobile-app-support-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mobile-app-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-elev-2, var(--bg-elev)) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s;
}

.mobile-app-support-btn:hover:not(:disabled),
.mobile-app-support-btn:focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  color: var(--accent-text, #111);
  font-weight: 700;
  box-shadow: 0 0 16px var(--accent-glow, transparent);
  filter: brightness(1.05);
}

.mobile-app-support-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mobile-app-support-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-muted);
  background-color: currentColor;
  transition: color 0.15s, background-color 0.15s;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.mobile-app-support-icon--android {
  mask-image: url('/assets/mobile-app/android-support.png');
  -webkit-mask-image: url('/assets/mobile-app/android-support.png');
}

.mobile-app-support-icon--ios {
  mask-image: url('/assets/mobile-app/ios-support.png');
  -webkit-mask-image: url('/assets/mobile-app/ios-support.png');
}

.mobile-app-support-icon--unsure {
  mask-image: url('/assets/mobile-app/unsure-support.png');
  -webkit-mask-image: url('/assets/mobile-app/unsure-support.png');
}

.mobile-app-support-btn:hover:not(:disabled) .mobile-app-support-icon,
.mobile-app-support-btn:focus-visible .mobile-app-support-icon {
  color: inherit;
}

.content-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}

.content-topbar.compact h1 {
  font-size: 28px;
}

.hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.hero-title img.hero-art {
  width: auto;
  height: auto;
  max-width: min(108px, 22vw);
  max-height: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-title h1 {
  font-size: 32px;
  margin: 0 0 4px;
  line-height: 1.1;
  color: var(--text);
}

.hero-title-head {
  margin-bottom: 4px;
}

.hero-title-head h1 {
  margin: 0 0 4px;
}

.view-layout-slot {
  display: none;
}

.view-layout-toggle--title {
  display: none;
}

@media (max-width: 1279px) {
  .hero-title-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 4px;
  }

  .hero-title-head h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .view-layout-slot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .view-layout-toggle--title {
    display: inline-flex;
  }

  .view-layout-toggle--topbar {
    display: none !important;
  }
}

.hero-title p {
  color: var(--text-muted);
  margin: 2px 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.hero-title p.muted {
  font-size: 0.82rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.list-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/*
 * Variant used inside the Add toolbar to sit next to the
 * flex-1 search box. Stops the dropdown from being squashed by
 * the search input grabbing all the horizontal space and gives
 * it a comfortable minimum width so the longest option label
 * ("TV & Movies") doesn't truncate.
 */
.search-media-sort {
  flex: 0 0 auto;
}

.search-media-filter-wrap {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
}

.search-media-filter-wrap > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.search-media-filter-wrap > summary b {
  color: var(--text);
  font-weight: 700;
}

.search-media-filter-wrap > summary::-webkit-details-marker {
  display: none;
}

.search-media-filter-wrap > summary::after {
  content: '▾';
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-left: 2px;
}

.search-media-filter-wrap[open] > summary::after {
  transform: rotate(180deg);
}

.search-media-filter-wrap .sidebar-filter-collapsible-body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

.search-media-filter-wrap .sidebar-filter-collapsible-body {
  border-top: 0;
}

.search-media-sort .list-sort-select {
  min-width: 9.5rem;
}

.list-sort-label {
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.list-sort-control {
  display: contents;
}

.list-sort-select {
  min-width: 9.5rem;
  max-width: min(12rem, 42vw);
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background-color: var(--surface-2, rgba(255, 255, 255, 0.04));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  box-sizing: border-box;
}

.list-sort-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
 * Active-filter highlight — applied automatically by the
 * delegated change listener in app.js to any .list-sort-select
 * whose data-default attribute differs from its current value.
 * Surfaces that a filter is "on" (vs the default no-op state) at
 * a glance, using the theme accent for affinity with other
 * selected/active UI bits.
 */
.list-sort-select.is-active-filter {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 16%, var(--surface-2, rgba(255, 255, 255, 0.04)));
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.sync-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  color: var(--accent-text, #fff);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 16px var(--accent-glow, transparent);
}

.sync-btn:hover {
  filter: brightness(1.05);
}

.shelf {
  margin-top: 20px;
  padding: 28px 20px;
  border-radius: 24px;
  background: var(--shelf-bg);
  border: 1px solid var(--shelf-border);
}

.search-shelf {
  margin-top: 28px;
  padding: 24px;
  border-radius: 24px;
  background: var(--shelf-bg);
  border: 1px solid var(--shelf-border);
}

.search-hint {
  color: var(--text-muted);
  margin: 16px 0 0;
  font-size: 0.95rem;
}

.discover-shelf {
  margin-top: 20px;
}

.discover-head {
  margin-bottom: 14px;
}

.discover-head--with-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}

.discover-head h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}

.discover-filters--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  flex: 1 1 220px;
  justify-content: flex-end;
}

.discover-filter-picker {
  position: relative;
  min-width: min(100%, 220px);
  max-width: 320px;
  flex: 1 1 180px;
}

.discover-filter-picker > summary {
  list-style: none;
  cursor: pointer;
}

.discover-filter-picker > summary::-webkit-details-marker {
  display: none;
}

.discover-filter-picker-summary {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 28px 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev-1, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
}

.discover-filter-picker-summary::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c97ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.15s ease;
}

.discover-filter-picker[open] > .discover-filter-picker-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.discover-filter-picker-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-filter-panel {
  position: absolute;
  z-index: 40;
  right: 0;
  left: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev, var(--bg-elev-1));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  max-height: min(60vh, 320px);
  overflow: auto;
}

.discover-filter-panel-section + .discover-filter-panel-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.discover-filter-panel-heading {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.discover-filter-panel-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.discover-filter-panel-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
}

.discover-filter-panel-check:hover {
  background: var(--bg-elev-2, rgba(255, 255, 255, 0.04));
}

.discover-filter-panel-check:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.discover-filter-panel-check input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.discover-filter-days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.discover-filter-days select {
  font: inherit;
  font-size: 0.86rem;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev-1, var(--bg));
  color: var(--text);
}

.discover-filter-days[hidden],
#discover-filter-days-wrap[hidden] {
  display: none;
}

.discover-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discover-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.discover-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}

.discover-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.discover-card-poster {
  width: 72px;
  height: 108px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.discover-card-body {
  min-width: 0;
}

.discover-card-title {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
}

.discover-card-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.discover-card-reason {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--accent);
}

.discover-result-ratings {
  margin-top: 6px;
}

.show-ratings--compact {
  flex-wrap: wrap;
  gap: 6px;
}

.show-ratings--compact .show-rating {
  font-size: 0.78rem;
  padding: 2px 6px;
}

.show-ratings--compact .show-rating-stars .star-icon {
  --star-size: 1em;
}

.discover-card-providers {
  margin-top: 6px;
}

.discover-card-action {
  align-self: center;
}

.suggestion-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.suggestion-dismiss-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.suggestion-dismiss-btn:hover:not(:disabled),
.suggestion-dismiss-btn:focus-visible {
  color: var(--text);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent) 10%);
}

.suggestion-dismiss-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.discover-in-library {
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.discover-card-library-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

@media (max-width: 640px) {
  .discover-card {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      'poster body'
      'action action';
    align-items: start;
  }

  .discover-card-poster {
    grid-area: poster;
    width: 56px;
    height: 84px;
  }

  .discover-card-body {
    grid-area: body;
  }

  .discover-card-action {
    grid-area: action;
    justify-self: end;
    width: 100%;
  }

  .discover-card-action .trending-action-btn {
    width: auto;
  }
}

.discover-empty,
.discover-loading {
  margin: 12px 0 0;
  font-size: 0.92rem;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-title h2 {
  font-size: 25px;
  margin: 0;
  color: var(--text);
}

.section-title-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.section-title-heading h2 {
  margin: 0;
}

.section-title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.shelf-mark-all-watched,
.shelf-dismiss-all {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, outline-color 0.15s ease, color 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.shelf-mark-all-watched:hover,
.shelf-mark-all-watched:focus-visible,
.shelf-dismiss-all:hover,
.shelf-dismiss-all:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.shelf-mark-all-watched {
  background: var(--good);
  border-color: transparent;
  color: #041810;
}

.shelf-mark-all-watched:hover,
.shelf-mark-all-watched:focus-visible {
  filter: brightness(1.06);
}

.shelf-dismiss-all {
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  color: var(--text-muted);
}

.shelf-dismiss-all:hover,
.shelf-dismiss-all:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent) 10%);
}

.shelf-mark-all-watched:disabled,
.shelf-dismiss-all:disabled {
  opacity: 0.55;
  cursor: wait;
}

.shelf-scrolls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.shelf-scroll {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.shelf-scroll svg {
  display: block;
}

.shelf-scroll[hidden] {
  display: none;
}

.shelf-scroll:hover {
  border-color: var(--border-strong);
}

.shelf-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 170px);
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.episode-card {
  position: relative;
  /* See .card for the rationale — overflow: clip + clip-margin
   * lets the provider-pill tooltip escape the card boundary
   * without breaking the poster's rounded-corner clipping. The
   * overflow: hidden line is the fallback for browsers that
   * don't understand `overflow: clip`. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 60px;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  min-height: 280px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.episode-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.episode-card img.poster {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--bg-elev-2);
}

.episode-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--good);
  color: var(--accent-text, #fff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.episode-badge-coming {
  background: var(--warn);
  color: #1a1208;
}

.episode-air-date {
  position: relative;
  z-index: 2;
  margin: 0 12px 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--warn);
}

.episode-card.coming-item,
.episode-card.new-item {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding-bottom: 0;
}

.episode-card-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-card.coming-item .episode-provider-pills,
.episode-card.new-item .episode-provider-pills {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  margin: 0;
}

.episode-card.coming-item .episode-provider-pill,
.episode-card.new-item .episode-provider-pill {
  margin: 0;
}

.episode-card.coming-item .episode-air-date {
  margin: 0;
}

.episode-provider-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  gap: 5px;
  color: var(--text);
}

.episode-provider-pill img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Episode-card icon-only pills (Coming Soon + New Episodes) get
 * the transparent / bigger-icon treatment in the desktop @media
 * (min-width: 1101px) block alongside library cards and list
 * rows. On mobile they fall back to the base chip + 14×14 above. */

.coming-tree-summary .episode-provider-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.coming-tree-summary .episode-provider-pill {
  margin: 0;
  flex-shrink: 0;
}

.coming-tree-section .section-title {
  margin-bottom: 16px;
}

.coming-tree-root {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  --tree-line: color-mix(in srgb, var(--border) 88%, var(--text-muted));
  --tree-bg: var(--bg-elev);
}

.coming-tree-children {
  list-style: none;
  margin: 0 0 0 11px;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--tree-line);
}

.coming-tree-node {
  position: relative;
  margin: 0;
  padding: 0;
}

.coming-tree-children > .coming-tree-node::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 17px;
  width: 22px;
  border-top: 1px solid var(--tree-line);
}

.coming-tree-children > .coming-tree-node-episode::before {
  top: 16px;
  width: 24px;
}

.coming-tree-children > .coming-tree-node:last-child::after {
  content: '';
  position: absolute;
  left: -23px;
  top: 18px;
  bottom: 0;
  width: 3px;
  background: var(--tree-bg);
}

.coming-tree-details > summary {
  list-style: none;
}

.coming-tree-details > summary::-webkit-details-marker {
  display: none;
}

.coming-tree-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.coming-tree-summary:hover,
.coming-tree-node-episode:hover {
  background: color-mix(in srgb, var(--bg-elev-2) 75%, transparent);
}

.coming-tree-twisty {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
}

.coming-tree-twisty::before {
  content: '▸';
  transition: transform 0.15s ease;
}

.coming-tree-details[open] > .coming-tree-summary .coming-tree-twisty::before {
  transform: rotate(90deg);
}

.coming-tree-twisty-leaf::before {
  content: none;
}

.coming-tree-poster {
  width: 24px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg-elev-2);
  box-shadow: 0 0 0 1px var(--border);
}

.coming-tree-season-icon {
  width: 26px;
  height: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.coming-tree-season-tv {
  padding: 2px;
  border: 1.5px solid var(--text-muted);
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--text-muted) 22%, var(--bg-elev));
  line-height: 0;
}

.coming-tree-season-screen {
  width: 18px;
  height: 13px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--bg-elev-2) 55%, #060d18);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--warn);
  line-height: 1;
}

.coming-tree-season-stand {
  position: relative;
  width: 10px;
  height: 3px;
  margin-top: 1px;
  border-radius: 0 0 2px 2px;
  background: var(--text-muted);
}

.coming-tree-season-stand::before,
.coming-tree-season-stand::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 0 0 1px 1px;
}

.coming-tree-season-stand::before {
  left: -4px;
  transform: rotate(-18deg);
  transform-origin: right bottom;
}

.coming-tree-season-stand::after {
  right: -4px;
  transform: rotate(18deg);
  transform-origin: left bottom;
}

.coming-tree-episode-icon {
  width: 18px;
  height: 14px;
  margin-left: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.coming-tree-episode-icon svg {
  display: block;
}

.coming-tree-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.coming-tree-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.coming-tree-node-show > .coming-tree-details > .coming-tree-summary .coming-tree-label {
  font-weight: 700;
}

.coming-tree-meta {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.coming-tree-meta::before {
  content: '· ';
}

.coming-tree-node-episode {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 8px 4px 0;
  border-radius: 6px;
  cursor: pointer;
}

.coming-tree-node-episode .coming-tree-episode-icon {
  margin-left: 0;
}

.coming-tree-episode-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.coming-tree-episode-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-tree-episode-date {
  font-size: 12px;
  font-weight: 650;
  color: var(--warn);
  white-space: nowrap;
}

.coming-calendar-section {
  margin-top: 0;
}

.coming-view-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
}

.coming-view-tab {
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.coming-view-tab:hover {
  color: var(--text);
}

.coming-view-tab.active {
  color: var(--text);
  background: var(--bg-elev-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.coming-calendar-empty {
  margin: 8px 0 0;
}

.coming-calendar-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

.coming-calendar-head h2 {
  margin: 0;
}

.coming-calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.coming-calendar-nav .ghost {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 1.2rem;
  line-height: 1;
}

.coming-calendar-month-label {
  min-width: 9rem;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}

.coming-calendar-shell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  padding: 12px;
  overflow-x: auto;
}

.coming-calendar-weekdays,
.coming-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.coming-calendar-weekdays {
  margin-bottom: 8px;
}

.coming-calendar-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.coming-calendar-day {
  min-height: 108px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 10px;
  background: var(--bg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.coming-calendar-day--pad {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.coming-calendar-day--today {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.coming-calendar-day-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
}

.coming-calendar-day--today .coming-calendar-day-num {
  color: var(--accent);
}

.coming-calendar-day-eps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.coming-calendar-ep {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: var(--bg-elev);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.coming-calendar-ep:hover {
  border-color: var(--border-strong, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}

.coming-calendar-ep-thumb {
  width: 34px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  background: var(--bg-elev-2);
  align-self: center;
}

.coming-calendar-ep-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.coming-calendar-ep-title {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-calendar-ep-code {
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .coming-calendar-shell {
    padding: 10px 8px;
  }

  .coming-calendar-weekdays,
  .coming-calendar-grid {
    gap: 4px;
    min-width: 640px;
  }

  .coming-calendar-day {
    min-height: 92px;
    padding: 4px;
  }

  .coming-calendar-ep {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 3px;
  }

  .coming-calendar-ep-thumb {
    width: 28px;
    height: 42px;
  }

  .coming-calendar-ep-code {
    font-size: 0.66rem;
  }
}

.episode-card h3 {
  position: relative;
  z-index: 2;
  font-size: 15px;
  line-height: 1.2;
  margin: 12px 12px 4px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-card .episode-meta {
  position: relative;
  z-index: 2;
  margin: 0 12px 4px;
  font-size: 12px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-card .episode-release-note {
  position: relative;
  z-index: 2;
  margin: 0 12px 10px;
  font-size: 11px;
  line-height: 1.4;
}

.episode-provider-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px 12px;
  width: 36px;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev-2);
}

.episode-provider-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.episode-card-media {
  position: relative;
  flex-shrink: 0;
}

.episode-card-media .episode-badge {
  top: 8px;
  left: 8px;
}

.episode-card-actions {
  position: absolute;
  z-index: 3;
  bottom: 8px;
  right: 8px;
  top: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.episode-card:hover .episode-card-actions {
  opacity: 1;
}

.episode-card-actions button {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.15s ease, outline-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.episode-card-actions button:hover,
.episode-card-actions button:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.episode-card-actions .btn-mark-watched {
  background: var(--good);
  border-color: transparent;
  color: #041810;
}

.episode-card-actions .btn-mark-watched:hover,
.episode-card-actions .btn-mark-watched:focus-visible {
  filter: brightness(1.06);
}

.episode-card-actions .btn-dismiss {
  color: var(--text-muted);
}

.episode-card-actions .btn-dismiss:hover,
.episode-card-actions .btn-dismiss:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent) 10%);
}

#new-list .episode-card-actions {
  opacity: 1;
}

.new-episodes-help {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 94%, var(--good) 6%);
}

.new-episodes-help-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.45em;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.new-episodes-help-sep {
  opacity: 0.55;
}

.new-episodes-help-demo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  min-width: 14px;
  min-height: 14px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--border);
  pointer-events: none;
  vertical-align: middle;
}

.new-episodes-help-demo.btn-mark-watched {
  background: var(--good);
  border-color: transparent;
  color: #041810;
}

.site-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 24px 42px 32px;
}

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

#panel-search .toolbar {
  flex-wrap: nowrap;
  gap: 8px;
}

.search-input,
input[type="search"]:not(.list-filter-input),
select {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font: inherit;
  min-width: 220px;
}

select.list-sort-select {
  min-width: 0;
  padding: 7px 28px 7px 10px;
  border-radius: 8px;
  background-color: var(--surface-2, rgba(255, 255, 255, 0.04));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.82rem;
  box-sizing: border-box;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  padding: 10px 16px;
  touch-action: manipulation;
}

button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent-dark)));
  border-color: transparent;
  color: var(--accent-text, #fff);
  font-weight: 700;
  box-shadow: 0 0 16px var(--accent-glow, transparent);
}

button.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover, var(--accent)), var(--accent-strong, var(--accent-dark)));
  filter: brightness(1.04);
}

button.ghost {
  background: transparent;
}

a.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 8px 14px;
  font: inherit;
  font-size: 0.88rem;
  touch-action: manipulation;
}

a.ghost:hover {
  color: var(--text);
  background: var(--bg-elev-2);
  border-color: var(--border-strong, var(--border));
}

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

.sync-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 10px 42px;
}

.sync-progress-bar {
  height: 4px;
  background: var(--progress-track);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.sync-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--progress-fill);
  border-radius: inherit;
  transition: width 0.2s ease;
}

@media (max-width: 1279px) {
  html {
    overflow-x: clip;
    max-width: 100%;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .app-shell,
  .content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .user-menu-panel {
    z-index: 100;
    max-width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    width: max-content;
    box-sizing: border-box;
  }

  .user-menu-panel.is-fixed {
    position: fixed;
    left: auto;
  }

  .mobile-tab-menu-panel {
    z-index: 100;
    max-width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    width: max-content;
    box-sizing: border-box;
  }

  .mobile-tab-menu-panel.is-fixed {
    position: fixed;
    left: auto;
  }

  .topbar-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .list-filter-bar {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .list-filter-input {
    width: 100%;
    max-width: none;
  }

  #mobile-tab-menu-btn {
    touch-action: manipulation;
  }

  .user-menu-btn {
    touch-action: manipulation;
  }

  .tab-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 0.84rem;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    min-height: 44px;
  }

  .tab-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }

  .sidebar-filter {
    margin: 0;
    padding: 14px;
  }

  .sidebar-stats {
    padding: 14px;
  }

  .sidebar-stats div {
    padding: 8px 0;
  }

  .sidebar-stats div:nth-child(-n + 2) {
    padding-bottom: 10px;
  }

  .sidebar-stats strong {
    font-size: 26px;
  }

  .app-shell {
    margin-left: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sync-progress {
    left: 0;
    padding: 8px 16px;
  }

  .content {
    padding: 16px;
  }

  .hero-title h1 {
    font-size: 24px;
  }

  .content-topbar.compact h1 {
    font-size: 22px;
  }

  .hero-title p {
    font-size: 0.85rem;
  }

  .shelf,
  .search-shelf {
    margin-top: 16px;
    padding: 16px 14px;
    border-radius: 18px;
  }

  .section-title h2 {
    font-size: 20px;
  }

  .shelf-grid {
    grid-auto-columns: minmax(128px, 38vw);
    gap: 14px;
  }

  html:not(.library-layout) .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
  }

  /* Compact library cards — meta beside poster, full-width title below, then progress. */
  html:not(.library-layout) .card-grid .card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    height: auto;
    min-height: 0;
  }

  html:not(.library-layout) .card-grid .card .show-status-banner {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  html:not(.library-layout) .card-grid .card .card-body {
    display: contents;
  }

  html:not(.library-layout) .card-grid .card .card-body-main {
    display: contents;
  }

  html:not(.library-layout) .card-grid .card .title {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 6px 10px 0;
    margin: 0;
  }

  html:not(.library-layout) .card-grid .card .card-body-aside {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 0 10px;
    min-width: 0;
  }

  html:not(.library-layout) .card-grid .card .card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
  }

  html:not(.library-layout) .card-grid .card .card-meta-year::after {
    content: none;
  }

  html:not(.library-layout) .card-grid .card .card-body-aside .progress-label--inline {
    display: block;
    margin-top: 0;
    padding: 0;
    font-size: 0.72rem;
  }

  html:not(.library-layout) .card-grid .card .provider-row--below {
    display: none;
  }

  html:not(.library-layout) .card-grid .card .provider-row--aside {
    display: grid;
    grid-template-columns: repeat(2, min-content);
    gap: 6px 10px;
    margin-top: 4px;
    padding: 0;
  }

  html:not(.library-layout) .card-grid .card .progress-label--below {
    display: none;
  }

  html:not(.library-layout) .card-grid .card .card-poster {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: block;
    width: 84px;
    min-height: 0;
  }

  html:not(.library-layout) .card-grid .card .card-poster::after {
    content: none;
  }

  html:not(.library-layout) .card-grid .card .poster {
    width: 84px;
    height: 126px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  html:not(.library-layout) .card-grid .card .card-progress {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 6px 10px 12px;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
  }

  html:not(.library-layout) .card-grid .card .progress-bar {
    height: 14px;
  }

  html:not(.library-layout) .card-grid .card .progress-count {
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0 5px;
    line-height: 1;
  }

  /* Provider-pill enhancements for library cards live in the
   * desktop-only @media (min-width: 1101px) block. Mobile keeps
   * the base small chip + 14×14 icon — per request, the larger
   * transparent pills are a desktop-only treatment. */

  html:not(.library-layout) .card-grid .card:hover {
    transform: none;
  }

  .content-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-title {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-title img.hero-art {
    align-self: flex-start;
    width: auto;
  }

  .hero-title > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
  }

  .topbar-actions {
    width: 100%;
    align-self: stretch;
  }

  .list-sort {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
  }

  .list-sort-label {
    display: block;
    margin: 0;
    padding: 0 2px;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .list-sort-control {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elev);
    overflow: hidden;
    box-sizing: border-box;
  }

  .list-sort-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .list-sort-select,
  select.list-sort-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 10px 36px 10px 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.3;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
  }

  .list-sort-select:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .hero-title img.hero-art {
    max-width: 72px;
    max-height: 60px;
  }

  .site-footer {
    padding: 16px;
    font-size: 0.75rem;
  }

  .modal-backdrop {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-header {
    flex-wrap: wrap;
  }

  .season-header {
    flex-wrap: wrap;
  }

  .season-header .btn-season-watch {
    width: 100%;
    text-align: center;
  }

  .search-wrap {
    min-width: 0;
    width: 100%;
  }

  .list-filter-notice {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px;
    margin-bottom: 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .list-filter-notice-content {
    display: contents;
  }

  .list-filter-notice-text {
    font-size: 0.84rem;
    margin-bottom: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .list-filter-notice-detail {
    display: block;
    margin: 0 0 10px;
    font-size: 0.8rem;
    white-space: normal;
  }

  .list-filter-notice-detail::before {
    content: none;
  }

  .list-filter-notice-actions,
  .empty-state-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .list-filter-notice-actions .ghost,
  .list-filter-notice-actions .primary,
  .empty-state-actions .ghost,
  .empty-state-actions .primary {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: inherit;
    line-height: inherit;
    white-space: normal;
  }

  .empty-state-filtered {
    padding: 28px 16px;
  }

  .search-result:has(.search-library-status) {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .search-library-status {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .search-library-status .ghost {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.82rem;
  }

  .search-input,
  input[type="search"],
  select:not(.list-sort-select) {
    min-width: 0;
    width: 100%;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/*
 * Icon-only provider pill treatment (all viewports).
 *
 * Single source of truth for the transparent + logo-only look
 * across every surface that uses iconOnly mode — library cards
 * (.card-grid .card), list rows (.show-list-row), AND episode
 * cards / rows (.episode-provider-pill on Coming Soon + New
 * Episodes). Applies to mobile and desktop alike — per request,
 * the chip / circle background is dropped everywhere so the
 * provider logo reads as a clean glyph instead of a button.
 *
 * Icon sizing is responsive: 26px on desktop, 22px on mobile
 * (tuned in the @media (max-width: 640px) block further down)
 * so pills stay tappable without dominating compact rows.
 *
 * Also neutralizes the legacy .show-list-row-providers
 * .provider-pill 0.88 scale for the icon-only variant — that
 * squeeze was tuned for the chip pill and unnecessarily shrinks
 * the new transparent logo. Scale still applies to
 * label-rendering pills via the non-icon-only selector.
 */
.card-grid .card .provider-pill--icon-only,
.show-list-row .provider-pill--icon-only,
.episode-provider-pill.provider-pill--icon-only {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  gap: 0;
}

.card-grid .card a.provider-pill--icon-only:hover,
.card-grid .card a.provider-pill--icon-only:focus-visible,
.show-list-row a.provider-pill--icon-only:hover,
.show-list-row a.provider-pill--icon-only:focus-visible,
a.episode-provider-pill.provider-pill--icon-only:hover,
a.episode-provider-pill.provider-pill--icon-only:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: none;
  opacity: 0.82;
}

.card-grid .card .provider-pill--icon-only img,
.show-list-row .provider-pill--icon-only img,
.episode-provider-pill.provider-pill--icon-only img {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  display: block;
}

.show-list-row-providers .provider-pill--icon-only {
  transform: none;
}

@media (max-width: 640px) {
  /* Shrink the transparent icon-only pills slightly on phones so a
   * row of providers doesn't dominate compact cards / list rows
   * now that the chip background is gone on mobile too. */
  .card-grid .card .provider-pill--icon-only img,
  .show-list-row .provider-pill--icon-only img,
  .episode-provider-pill.provider-pill--icon-only img {
    width: 22px;
    height: 22px;
  }

  .content {
    padding: 14px max(12px, env(safe-area-inset-left)) 18px max(12px, env(safe-area-inset-right));
  }

  html:not(.library-layout) .card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  html:not(.library-layout) .card-grid .card .show-status-banner {
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  html:not(.library-layout) .card-grid .card .title {
    font-size: 0.88rem;
    -webkit-line-clamp: 2;
  }

  /* Movie cards on mobile have no progress row after the title (movies
   * aren't episodic), so the title is the last grid item and sat almost
   * flush against the card's bottom edge — the gap was visibly smaller
   * than the breathing room above the poster (status banner + aside top
   * padding). Add explicit bottom padding so the bottom margin roughly
   * matches the top, just on phones, just on movie cards (show cards
   * have their own .card-progress row with its own bottom padding). */
  html:not(.library-layout) .card-grid .card-movie .title {
    padding-bottom: 8px;
  }

  html:not(.library-layout) .card-grid .card .meta,
  html:not(.library-layout) .card-grid .card .card-meta {
    margin-top: 3px;
    font-size: 0.72rem;
  }

  html:not(.library-layout) .card-grid .card .card-progress {
    padding: 5px 10px 10px;
  }

  html:not(.library-layout) .card-grid .card .progress-bar {
    height: 12px;
  }

  html:not(.library-layout) .card-grid .card .progress-count {
    font-size: 0.5rem;
    padding: 0 4px;
  }

  html:not(.library-layout) .card-grid .card .progress-label,
  html:not(.library-layout) .card-grid .card .progress-label--inline {
    font-size: 0.65rem;
  }

  /* Icon-only provider pills on mobile keep the base chip + 14×14
   * icon. The label span isn't even emitted by JS when iconOnly
   * is true, so no `display: none` needed. The desktop-only
   * transparent + 26×26 treatment lives in @media (min-width:
   * 1101px). */

  .watching-list {
    gap: 24px;
  }

  .watching-section-title {
    margin-bottom: 10px;
  }

  .watching-section-title h2 {
    font-size: 1.1rem;
  }

  .episode-card {
    min-height: 0;
  }

  .episode-card img.poster {
    height: 110px;
  }

  .shelf-grid {
    grid-auto-columns: minmax(104px, 36vw);
    gap: 10px;
  }

  #new-list .shelf-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: unset;
    overflow-x: visible;
    overflow-y: visible;
  }

  #new-list .shelf-scrolls {
    display: none;
  }

  .new-list-truncated {
    margin: 0 4px 12px;
    line-height: 1.4;
  }

  .episode-card:hover {
    transform: none;
  }

  .episode-card-actions {
    opacity: 1;
  }

  .episode-card-actions button {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 5px;
  }

  .shelf-mark-all-watched,
  .shelf-dismiss-all {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 6px;
  }

  .new-episodes-help {
    margin-bottom: 8px;
    padding: 5px 8px;
  }

  .new-episodes-help-line {
    font-size: 0.68rem;
    gap: 0.3em 0.35em;
    flex-wrap: nowrap;
  }

  .new-episodes-help-section-hint {
    display: none;
  }

  .episode-card h3 {
    font-size: 0.88rem;
  }

  .episode-card .episode-meta,
  .episode-card .episode-release-note {
    font-size: 0.72rem;
  }

  .shelf-foot {
    padding: 8px 4px 0;
  }

  .shelf-deferred-hint {
    margin: 0 4px 8px;
  }

  .hero-title img.hero-art {
    display: none;
  }

  .hero-title h1 {
    font-size: 22px;
  }

  .sync-btn {
    height: 44px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .modal-backdrop {
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 14px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .modal-header-content {
    display: contents;
  }

  .modal-header > img,
  .modal-header #modal-poster {
    grid-column: 1;
    grid-row: 1;
    width: 64px;
    height: 96px;
  }

  .modal-header-top {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .modal-header-top h2 {
    overflow-wrap: anywhere;
  }

  .modal-header .modal-show-details {
    grid-column: 1 / -1;
  }

  .modal-show-details-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev-2);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    user-select: none;
  }

  .modal-show-details-summary::after {
    content: '▾';
    color: var(--text-dim);
    transition: transform 0.2s ease;
  }

  .modal-show-details[open] > .modal-show-details-summary::after {
    transform: rotate(180deg);
  }

  .modal-show-details:not([open]) .modal-show-details-body {
    display: none;
  }

  .modal-show-details[open] .modal-show-details-body {
    display: block;
    margin-top: 10px;
  }

  .modal-body {
    flex: none;
    max-height: none;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 14px max(14px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  }

  .modal-header-top h2 {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  .modal-header-top .modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .modal-header-top .modal-close-btn svg {
    width: 16px;
    height: 16px;
  }

  .modal-header .show-ratings {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 0;
  }

  .modal-header .show-rating {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    padding: 8px 10px;
    min-height: 32px;
  }

  .modal-header .show-rating-label,
  .modal-header .show-rating-logo,
  .modal-header .show-rating-logo--imdb {
    flex-shrink: 0;
  }

  .modal-header .show-rating-stars {
    flex: 0 0 auto;
    min-width: 0;
  }

  .modal-header .show-rating-stars .star-icon {
    --star-size: 0.88em;
  }

  .modal-header .show-rating-count {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.65rem;
  }

  .modal-overview {
    font-size: 0.84rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .modal-show-details[open] .modal-overview {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .modal-toolbar {
    margin-top: 8px;
    gap: 5px;
    flex-direction: column;
    align-items: stretch;
  }

  .modal-toolbar .modal-hide-watched {
    margin-left: 0;
    align-self: flex-start;
    font-size: 0.78rem;
  }

  .modal-toolbar .modal-hide-watched input {
    width: 14px;
    height: 14px;
  }

  .modal-toolbar button {
    min-height: 0;
    padding: 5px 10px;
    font-size: 0.78rem;
  }

  .episode-row {
    grid-template-columns: auto auto 1fr auto;
    gap: 6px;
    padding: 4px 10px;
  }

  .episode-row .ep-num {
    min-width: 32px;
  }

  .empty-state {
    padding: 32px 16px;
  }

  .prefs-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    margin: auto;
  }
}

@media (max-width: 480px) {
  .tab-btn {
    justify-content: center;
    min-width: 44px;
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .tab-btn .tab-label {
    display: none;
  }

  .tab-icon,
  .tab-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .sidebar-stats strong {
    font-size: 22px;
  }

  .sidebar-filter {
    font-size: 0.84rem;
  }

  .section-title {
    flex-wrap: wrap;
    gap: 10px;
  }

  .shelf-grid {
    grid-auto-columns: minmax(118px, 44vw);
  }

  .coming-tree-root {
    padding: 10px 10px 10px 8px;
  }

  .coming-tree-children {
    margin-left: 8px;
    padding-left: 16px;
  }

  .coming-tree-children > .coming-tree-node::before {
    left: -16px;
    width: 16px;
  }

  .coming-tree-children > .coming-tree-node-episode::before {
    width: 18px;
  }

  .coming-tree-children > .coming-tree-node:last-child::after {
    left: -17px;
  }

  .coming-tree-episode-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .coming-tree-episode-date {
    margin-left: 0;
  }
}

#panel-library {
  display: block;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

/*
 * Empty-state placeholders (a bare <p class="muted"> or a
 * .empty-state block) sit directly inside .card-grid when there's
 * nothing to render. Without an explicit column span they get
 * placed in a single auto-fill column (160px on desktop), which
 * makes the message wrap every couple of words. Span the whole
 * grid row so the copy reads naturally at any viewport.
 */
.card-grid > p,
.card-grid > .empty-state {
  grid-column: 1 / -1;
}

.watching-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 20px;
}

.watching-section .card-grid {
  margin-top: 0;
}

.watching-section-title {
  margin-bottom: 16px;
}

.watching-section-title h2 {
  font-size: 1.35rem;
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* overflow: clip is functionally identical to overflow: hidden
   * (descendants are clipped, no scroll container) but unlocks
   * overflow-clip-margin so absolutely-positioned children — most
   * importantly the provider-pill hover tooltip — can paint a
   * little outside the card boundary. Without this the tooltip
   * gets cut off on cards near a grid edge or whenever the pill
   * is at a card corner. The first `overflow: hidden` is the
   * fallback for browsers that don't understand `overflow: clip`
   * (pre-Chrome 90 / pre-Safari 16); the second declaration wins
   * in modern browsers and enables overflow-clip-margin. The
   * poster image's rounded-corner clipping still works because
   * .card-poster has its own overflow: hidden. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 60px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  position: relative;
}

.show-status-banner {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-muted);
}

.show-status-banner.watching {
  color: var(--watching);
  background: var(--watching-soft);
  border-bottom-color: color-mix(in srgb, var(--watching) 35%, transparent);
}

.show-status-banner.caught_up {
  color: var(--good);
  background: var(--good-soft);
  border-bottom-color: color-mix(in srgb, var(--good) 35%, transparent);
}

.show-status-banner.finished {
  color: var(--finished);
  background: var(--finished-soft);
  border-bottom-color: rgba(227, 179, 65, 0.4);
}

.show-status-banner.dropped {
  color: var(--dropped);
  background: var(--dropped-soft);
  border-bottom-color: color-mix(in srgb, var(--dropped) 40%, transparent);
}

.show-status-banner.not_started {
  color: var(--text-dim);
}

[data-theme-mode="light"] .show-status-banner.watching {
  color: color-mix(in srgb, var(--watching) 58%, var(--text));
  background: color-mix(in srgb, var(--watching) 26%, var(--bg-elev-2));
  border-bottom-color: color-mix(in srgb, var(--watching) 50%, var(--border));
}

[data-theme-mode="light"] .show-status-banner.caught_up {
  color: color-mix(in srgb, var(--good) 58%, var(--text));
  background: color-mix(in srgb, var(--good) 26%, var(--bg-elev-2));
  border-bottom-color: color-mix(in srgb, var(--good) 50%, var(--border));
}

[data-theme-mode="light"] .show-status-banner.finished {
  color: color-mix(in srgb, var(--finished) 55%, var(--text));
  background: color-mix(in srgb, var(--finished) 28%, var(--bg-elev-2));
  border-bottom-color: color-mix(in srgb, var(--finished) 45%, var(--border));
}

[data-theme-mode="light"] .show-status-banner.dropped {
  color: color-mix(in srgb, var(--dropped) 55%, var(--text));
  background: color-mix(in srgb, var(--dropped) 24%, var(--bg-elev-2));
  border-bottom-color: color-mix(in srgb, var(--dropped) 45%, var(--border));
}

[data-theme-mode="light"] .show-status-banner.not_started {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-dim) 14%, var(--bg-elev-2));
}

.card-status-watching {
  border-color: color-mix(in srgb, var(--watching) 35%, transparent);
}

.card-status-watching .progress-fill {
  background: var(--progress-fill);
}

.card-status-watching .progress-segment.is-filled,
.card-status-watching .progress-dot.is-filled {
  background: var(--progress-fill);
}

.card-status-watching .progress-dot.is-current {
  border-color: var(--progress-fill);
}

.card-status-watching .progress-fill--gradient {
  background: linear-gradient(90deg, var(--progress-fill) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

.card-status-watching .progress-label,
.card-status-watching .progress-label--inline,
.card-status-watching .progress-label--below {
  color: var(--progress-fill);
}

.card-status-caught_up {
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
}

.card-status-caught_up .progress-fill {
  background: var(--progress-fill-caught-up);
}

.card-status-caught_up .progress-segment.is-filled,
.card-status-caught_up .progress-dot.is-filled {
  background: var(--progress-fill-caught-up);
}

.card-status-caught_up .progress-dot.is-current {
  border-color: var(--progress-fill-caught-up);
}

.card-status-caught_up .progress-fill--gradient {
  background: linear-gradient(90deg, var(--progress-fill-caught-up) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

.card-status-caught_up .progress-label,
.card-status-caught_up .progress-label--inline,
.card-status-caught_up .progress-label--below {
  color: var(--progress-fill-caught-up);
}

.card-status-finished {
  opacity: 0.45;
  border-color: rgba(227, 179, 65, 0.3);
  background: rgba(18, 22, 31, 0.25);
  box-shadow: none;
}

.card-status-finished .show-status-banner.finished {
  background: rgba(227, 179, 65, 0.08);
}

.card-status-finished .progress-fill {
  background: var(--finished);
}

.card-status-finished .progress-segment.is-filled,
.card-status-finished .progress-dot.is-filled {
  background: var(--finished);
}

.card-status-finished .progress-dot.is-current {
  border-color: var(--finished);
}

.card-status-finished .progress-fill--gradient {
  background: linear-gradient(90deg, var(--finished) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

.card-status-finished .progress-label,
.card-status-finished .progress-label--inline,
.card-status-finished .progress-label--below {
  color: var(--finished);
}

.card-status-finished:hover {
  opacity: 1;
  background: var(--bg-elev);
  border-color: rgba(227, 179, 65, 0.45);
  box-shadow: var(--shadow);
}

.card-status-finished:hover .show-status-banner.finished {
  background: var(--finished-soft);
}

.card-status-dropped {
  opacity: 0.45;
  border-color: color-mix(in srgb, var(--dropped) 30%, transparent);
  background: rgba(18, 22, 31, 0.25);
  box-shadow: none;
}

.card-status-dropped .show-status-banner.dropped {
  background: rgba(255, 107, 107, 0.08);
}

.card-status-dropped .progress-fill {
  background: var(--dropped);
}

.card-status-dropped .progress-segment.is-filled,
.card-status-dropped .progress-dot.is-filled {
  background: var(--dropped);
}

.card-status-dropped .progress-dot.is-current {
  border-color: var(--dropped);
}

.card-status-dropped .progress-fill--gradient {
  background: linear-gradient(90deg, var(--dropped) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

.card-status-dropped .progress-label,
.card-status-dropped .progress-label--inline,
.card-status-dropped .progress-label--below {
  color: var(--dropped);
}

.card-status-dropped:hover {
  opacity: 1;
  background: var(--bg-elev);
  border-color: color-mix(in srgb, var(--dropped) 45%, transparent);
  box-shadow: var(--shadow);
}

.card-status-dropped:hover .show-status-banner.dropped {
  background: var(--dropped-soft);
}

[data-theme-mode="light"] .card-status-finished .show-status-banner.finished {
  background: color-mix(in srgb, var(--finished) 22%, var(--bg-elev-2));
}

[data-theme-mode="light"] .card-status-finished:hover .show-status-banner.finished {
  background: color-mix(in srgb, var(--finished) 30%, var(--bg-elev-2));
}

[data-theme-mode="light"] .card-status-dropped .show-status-banner.dropped {
  background: color-mix(in srgb, var(--dropped) 20%, var(--bg-elev-2));
}

[data-theme-mode="light"] .card-status-dropped:hover .show-status-banner.dropped {
  background: color-mix(in srgb, var(--dropped) 28%, var(--bg-elev-2));
}

.modal > .show-status-banner {
  border-radius: var(--radius) var(--radius) 0 0;
}

.card > .show-status-banner {
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-poster {
  position: relative;
  overflow: hidden;
}

.card-series-ended {
  border-color: rgba(180, 140, 40, 0.55);
}

.card-series-cancelled {
  border-color: rgba(180, 30, 30, 0.55);
}

.card-series-ended .card-poster::after,
.card-series-cancelled .card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

.card-series-ended .card-poster::after {
  background: linear-gradient(135deg, rgba(180, 130, 20, 0.28), rgba(90, 60, 10, 0.38));
}

.card-series-cancelled .card-poster::after {
  background: linear-gradient(135deg, rgba(190, 28, 28, 0.32), rgba(120, 8, 8, 0.4));
}

.series-status-stamp {
  display: none;
}

.card-series-ended .series-status-stamp.ended,
.card-series-cancelled .series-status-stamp.cancelled {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  z-index: 4;
  color: #fff;
  font-weight: 800;
  font-size: clamp(9px, 1.8vw, 13px);
  letter-spacing: 0.1em;
  padding: 3px 14px 3px 16px;
  width: 180%;
  max-width: none;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.88);
  outline: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.card-series-ended .series-status-stamp.ended {
  background: linear-gradient(180deg, #c9921a 0%, #8a5a08 100%);
}

.card-series-cancelled .series-status-stamp.cancelled {
  background: linear-gradient(180deg, #c41a1a 0%, #8a0a0a 100%);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.card .poster {
  aspect-ratio: 2/3;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-elev-2);
}

.card .card-body {
  padding: 12px;
}

.card-progress {
  margin-top: 8px;
}

.progress-label--inline {
  display: none;
}

.progress-label--below {
  display: block;
}

.card-meta {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.card-meta-year:not(:last-child)::after {
  content: ' · ';
}

.progress-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  background: var(--progress-track);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--progress-fill);
  border-radius: inherit;
  z-index: 0;
}

.progress-count {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  padding: 0 8px;
  pointer-events: none;
}

.progress-count-watched,
.progress-count-total {
  color: #fff;
  text-shadow:
    0 0 1px #000,
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.85),
    0.5px -0.5px 0 rgba(0, 0, 0, 0.85),
    -0.5px 0.5px 0 rgba(0, 0, 0, 0.85),
    0.5px 0.5px 0 rgba(0, 0, 0, 0.85);
}

.progress-label {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--progress-fill);
}

.progress-bar--classic {
  height: 6px;
  background: color-mix(in srgb, var(--bad) 55%, var(--progress-track));
}

.progress-bar--rounded,
.progress-bar--gradient {
  height: 14px;
}

.progress-bar--labeled {
  height: 18px;
  border-radius: 4px;
}

.progress-bar--default {
  border-radius: 999px;
}

.progress-segments {
  display: flex;
  gap: 3px;
  align-items: stretch;
  height: 14px;
}

.progress-segment {
  flex: 1;
  min-width: 0;
  border-radius: 2px;
  background: var(--progress-track);
}

.progress-segment.is-filled {
  background: var(--progress-fill);
}

.progress-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--progress-track);
  flex-shrink: 0;
}

.progress-dot.is-filled {
  background: var(--progress-fill);
}

.progress-dot.is-current {
  background: transparent;
  border: 2px solid var(--progress-fill);
  box-sizing: border-box;
}

.progress-fill--gradient {
  background: linear-gradient(90deg, var(--progress-fill) 0%, var(--progress-gradient-end, #a855f7) 100%);
}

.card-progress[data-progress-style="classic"] .progress-label,
.card-progress[data-progress-style="rounded"] .progress-label,
.card-progress[data-progress-style="segmented"] .progress-label,
.card-progress[data-progress-style="labeled"] .progress-label,
.card-progress[data-progress-style="gradient"] .progress-label,
.card-progress[data-progress-style="default"] .progress-label {
  color: var(--progress-fill);
}

.card-progress[data-progress-style="dots"] .progress-label {
  color: var(--progress-fill);
}

.card .title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Movie cards can render with no meta / providers / watched
 * control (e.g. archived rows or titles missing TMDB data), in
 * which case the title would sit flush against the bottom edge
 * of the card body. Reserve a small bottom margin so the title
 * always has breathing room — harmless when other rows follow
 * since they have their own top spacing. */
.card-movie .title {
  margin-bottom: 6px;
}

.card .meta {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.card .card-meta {
  margin-top: 6px;
}

.card-body-aside {
  display: contents;
}

.provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.provider-row.provider-row--aside {
  display: none;
}

.provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

a.provider-pill {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

a.provider-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev-2));
}

a.provider-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.provider-pill--display-only {
  cursor: default;
  text-decoration: none;
}

.provider-pill img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/*
 * Rent / buy variants — used by movie pills tagged kind='rent' or
 * kind='buy' in src/tmdb.js#parseMovieWatchProviders. Same shape
 * as a regular pill so the row still looks coherent, just with a
 * warm amber tint plus a tiny "$" overlay so the user understands
 * the title isn't free with a subscription on that provider.
 */
.provider-pill--rent,
.provider-pill--buy {
  border-color: color-mix(in srgb, #f5a524 60%, var(--border));
  background: color-mix(in srgb, #f5a524 12%, var(--bg-elev-2));
}

a.provider-pill--rent:hover,
a.provider-pill--buy:hover {
  border-color: color-mix(in srgb, #f5a524 80%, var(--border));
  background: color-mix(in srgb, #f5a524 20%, var(--bg-elev-2));
}

.provider-pill-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  height: 11px;
  margin-left: 2px;
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, #f5a524 75%, transparent);
  color: #1a1206;
  font-weight: 700;
  font-size: 0.55rem;
  line-height: 1;
}

.provider-pill--icon-only .provider-pill-kind {
  /* Keep the rent/buy marker inside the logo corner so card
     overflow rules don't clip it off-screen. */
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
  min-width: 8px;
  height: 9px;
  padding: 0 1px;
  border-radius: 2px;
  font-size: 7px;
  line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 85%, transparent);
}

.provider-pill--icon-only {
  position: relative;
}

/* Styled tooltip on hover / keyboard focus. Driven by the
 * data-tooltip attribute set in renderProviderPill so screen
 * readers still use aria-label (the more accessible source).
 * Tooltip rises above the pill so it stays inside the .card
 * boundary even with `overflow: hidden`. pointer-events: none
 * so the tooltip can't intercept clicks meant for the pill. */
.provider-pill[data-tooltip] {
  position: relative;
}

.provider-pill[data-tooltip]::after,
.provider-pill[data-tooltip]::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.05s, transform 0.12s ease 0.05s;
  z-index: 50;
}

.provider-pill[data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  /* Reset inherited link styling — provider pills are <a>. */
  text-transform: none;
  text-decoration: none;
}

.provider-pill[data-tooltip]::before {
  content: '';
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--border);
}

.provider-pill[data-tooltip]:hover::after,
.provider-pill[data-tooltip]:hover::before,
.provider-pill[data-tooltip]:focus-visible::after,
.provider-pill[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Touch devices don't really have hover — hide the tooltip so a
 * tap doesn't leave it sticky on the previously-tapped pill. */
@media (hover: none) {
  .provider-pill[data-tooltip]::after,
  .provider-pill[data-tooltip]::before {
    display: none;
  }
}

.new-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.new-list .empty-state {
  margin-top: 28px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.empty-state-filtered p {
  margin: 0 0 10px;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.empty-state--onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 28px;
  max-width: 460px;
  margin-inline: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
}

.empty-state--onboarding .empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft, rgba(125, 125, 125, 0.12));
}

.empty-state--onboarding .empty-state-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.empty-state--onboarding .empty-state-message {
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
  color: var(--text-muted);
}

.empty-state--onboarding .empty-state-actions {
  margin-top: 20px;
}

.empty-state--onboarding .empty-state-cta {
  padding: 11px 26px;
  font-size: 0.95rem;
}

.list-filter-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
}

.list-filter-notice-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.list-filter-notice-text {
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-filter-notice-detail {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
}

.list-filter-notice-detail::before {
  content: ' · ';
}

.list-filter-notice-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 6px;
}

.list-filter-notice-actions .ghost,
.list-filter-notice-actions .primary {
  padding: 5px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.list-filter-notice-actions .primary {
  font-weight: 700;
}

.search-library-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.modal {
  width: min(920px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: auto;
}

.modal-header {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header > img,
.modal-header #modal-poster {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.modal-header h2 {
  margin: 0 0 8px;
}

.modal-header-content {
  flex: 1;
  min-width: 0;
}

.modal-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.modal-header-top h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.modal-close-btn {
  flex-shrink: 0;
}

.show-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.show-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.show-rating:hover {
  border-color: var(--stroke-strong);
  text-decoration: none;
}

.show-rating-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.88;
}

.show-rating-score {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.show-rating-value {
  font-size: 0.9375rem;
  font-weight: 700;
}

.show-rating-suffix {
  font-size: 0.9375rem;
  font-weight: 700;
  opacity: 0.88;
}

.show-rating--tmdb .show-rating-label {
  color: var(--accent);
}

.show-rating--imdb {
  border-color: color-mix(in srgb, #f5c518 28%, var(--stroke));
  background: color-mix(in srgb, #f5c518 6%, var(--surface-2));
}

.show-rating--imdb .show-rating-label {
  color: #f5c518;
}

.show-rating-logo--imdb {
  width: auto;
  height: 14px;
  max-width: 38px;
  border-radius: 0;
}

.show-rating--watchnext {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  cursor: pointer;
  font: inherit;
}

.show-rating--watchnext .show-rating-label {
  color: var(--accent);
}

.show-rating-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.show-rating-count {
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.72;
  margin-left: 2px;
}

.modal-user-rating {
  margin: 10px 0 14px;
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface-2);
}

.modal-user-rating--saved {
  padding: 10px 14px;
}

.modal-user-rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-user-rating h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.modal-user-rating--saved h3 {
  margin: 0;
}

.modal-user-rating-edit {
  flex-shrink: 0;
  padding: 4px 10px;
  min-height: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.modal-user-rating-editor[hidden] {
  display: none;
}

.modal-user-rating-help {
  margin: 0 0 10px;
}

.user-rating-stars {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.star-rating-input {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.star-rating-input-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.star-rating-input-star:hover,
.star-rating-input-star:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.star-icons {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  vertical-align: middle;
}

.star-icon {
  --star-size: 1.35em;
  --star-fill: var(--accent);
  --star-empty: color-mix(in srgb, var(--text) 24%, transparent);
  width: var(--star-size);
  height: var(--star-size);
  display: block;
  flex-shrink: 0;
}

.star-icon-bg {
  fill: var(--star-empty);
}

.star-icon-fg {
  fill: var(--star-fill);
}

.star-icons--sm .star-icon {
  --star-size: 1.05em;
}

.show-rating-stars .star-icon {
  --star-size: 0.95em;
}

.show-rating--watchnext .star-icon,
.show-rating--tmdb .star-icon {
  --star-fill: var(--accent);
}

.show-rating--imdb .star-icon {
  --star-fill: #f5c518;
}

.community-review-meta .star-icons {
  margin-left: auto;
}

.modal-user-review {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--surface, var(--bg-elev));
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.modal-user-review:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.modal-user-rating-actions {
  margin-top: 10px;
}

.community-reviews {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.community-reviews-title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.community-reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.community-review-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--surface);
}

.community-review-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.8125rem;
}

.community-review-score {
  color: var(--text-muted);
  font-weight: 600;
}

.community-review-item p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.episode-community-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.episode-community-rating .star-icons--xs {
  --star-size: 0.75rem;
}

.episode-user-rating {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.episode-user-rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.episode-user-rating-title,
.episode-community-reviews-title {
  margin: 0;
  font-size: 0.92rem;
}

.episode-user-rating-editor[hidden] {
  display: none !important;
}

.episode-review-label {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
}

.episode-review-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 4.5rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.4;
  resize: vertical;
}

.episode-rating-actions {
  margin-top: 10px;
}

.episode-user-rating-summary {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.episode-community-reviews {
  margin-top: 12px;
}

.episode-community-reviews-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.modal-show-details > summary {
  list-style: none;
}

.modal-show-details > summary::-webkit-details-marker {
  display: none;
}

.modal-show-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
}

.modal-show-details-summary::after {
  content: '▾';
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.modal-show-details[open] > .modal-show-details-summary::after {
  transform: rotate(180deg);
}

.modal-show-details-body {
  margin-top: 10px;
}

.modal-overview-block {
  margin-top: 12px;
}

.modal-overview {
  color: var(--text-muted);
  margin: 0 0 12px;
}

.modal-toolbar {
  margin-top: 12px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.modal-toolbar .modal-hide-watched {
  align-self: center;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .modal-toolbar .modal-hide-watched {
    margin-left: auto;
  }
}

.modal-body {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-hide-watched {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.modal-hide-watched input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.modal-seasons-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.season-progress {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.82rem;
}

.season-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}

.season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev-2);
  cursor: pointer;
}

.season-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.season-start {
  color: var(--text-dim);
  font-weight: 400;
}

.episode-list {
  padding: 4px 0;
}

.episode-item {
  border-top: 1px solid var(--border);
}

.episode-item:first-child {
  border-top: none;
}

.episode-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
}

.episode-item:first-child .episode-row {
  border-top: none;
}

.episode-row .ep-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}

.episode-row-label {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.episode-row .ep-num {
  color: var(--text-dim);
  font-size: 0.75rem;
  min-width: 36px;
}

.episode-row .ep-air-date {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.episode-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  pointer-events: none;
}

.episode-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.episode-item.is-expanded .episode-expand svg {
  transform: rotate(180deg);
}

.episode-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 0 14px 12px 74px;
}

.episode-detail-still {
  width: 140px;
  height: 79px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
}

.episode-detail-body {
  min-width: 0;
}

.episode-detail-meta {
  margin: 0 0 6px;
}

.episode-detail-overview {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.episode-detail:not(:has(.episode-detail-still)) {
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {
  .episode-detail {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 12px 12px;
  }

  .episode-detail-still {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .episode-detail-body {
    width: 100%;
  }

  .episode-detail-overview {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}

.modal-share {
  margin-top: 10px;
}

.share-section {
  margin-top: 10px;
}

.share-section-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.share-note-label {
  display: block;
  margin-bottom: 8px;
}

.share-note-label > span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}

.share-note-input {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.4;
  resize: vertical;
}

.share-recommend-field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.share-recommend-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
}

.share-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
}

.share-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-elev);
}

.share-btn--copied {
  color: var(--good, #2ecc71);
  border-color: color-mix(in srgb, var(--good, #2ecc71) 45%, var(--border));
}

.share-btn--x:hover,
.share-btn--x:focus-visible {
  color: var(--text);
}

.share-btn--facebook:hover,
.share-btn--facebook:focus-visible {
  color: #1877f2;
}

.share-btn--reddit:hover,
.share-btn--reddit:focus-visible {
  color: #ff4500;
}

.share-btn--bluesky:hover,
.share-btn--bluesky:focus-visible {
  color: #0085ff;
}

.share-section-foot {
  margin: 8px 0 0;
}

.share-section-foot a {
  color: var(--accent, #6aa3ff);
}

.share-complete-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elev);
  color: var(--text);
}

.share-complete-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.share-complete-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.share-complete-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.share-complete-body {
  padding: 14px 16px;
  overflow: auto;
}

.share-complete-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: min(760px, calc(100vw - 48px));
  min-width: min(560px, calc(100vw - 48px));
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 30;
  box-shadow: var(--shadow);
}

.search-wrap {
  position: relative;
  /* Don't grow to fill the toolbar — that would push the
   * search-media filter out to the far right with a big gap
   * between them. `flex: 0 1 auto` lets the search box hug
   * its content (the input's intrinsic ~260px width via the
   * base `select, input { min-width: 220px }` rule) so the
   * "Filter" dropdown sits right next to it. The toolbar's
   * empty space just falls on the right. min-width keeps the
   * input usable on narrower viewports before it wraps. */
  flex: 0 1 auto;
  min-width: 240px;
  overflow: visible;
}

#panel-search .toolbar,
#panel-search .search-shelf {
  overflow: visible;
}

/*
 * Animated accent border for the Add-Shows search box (SVG comet via rAF on all platforms).
 * With prefers-reduced-motion, JS skips the animation loop and CSS dims the trail.
 */
#panel-search .search-wrap {
  padding: 2px;
  border-radius: calc(var(--radius-sm) + 3px);
  isolation: isolate;
}

#panel-search .search-wrap .search-input {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  border-color: transparent;
  border-radius: var(--radius-sm);
}

.search-border-anim {
  position: absolute;
  inset: 0;
  /* Inline SVG is a replaced element and collapses to its intrinsic ~300x150
   * size without explicit dimensions, so pin it to the search box. */
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

/*
 * Comet tail: several identical dash segments animate in lockstep but each is
 * phase-shifted a hair behind the previous one (negative animation-delay) with
 * decreasing opacity/width, so the head is bright and the trail fades to fully
 * transparent. The fixed phase offset keeps their spacing constant, so it reads
 * as one streak rather than separate dots.
 */
.search-border-anim .search-border-anim-rect {
  /* Geometry, dash pattern, and stroke-dashoffset are driven in JS via rAF. */
  fill: none;
  stroke: var(--accent);
  stroke-width: calc(2.2px - var(--i) * 0.03px);
  stroke-linecap: round;
  opacity: calc(1 - var(--i) * 0.062);
}

.search-border-anim .search-border-anim-rect:first-child {
  filter: drop-shadow(0 0 3px var(--accent));
}

@media (prefers-reduced-motion: reduce) {
  .search-border-anim .search-border-anim-rect:not(:first-child) {
    display: none;
  }
  .search-border-anim .search-border-anim-rect:first-child {
    opacity: 0.55;
  }
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-info strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.25;
}

.search-result-info .provider-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.search-result-year {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.search-add-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.search-in-library {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.search-result:hover {
  background: var(--bg-elev-2);
}

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

.search-preview-meta {
  color: var(--text-muted);
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.provider-section {
  margin-top: 12px;
}

.provider-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.provider-section-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0;
}

.provider-subsection + .provider-subsection {
  margin-top: 12px;
}

.provider-section-label--sub {
  font-size: 0.68rem;
  margin-bottom: 4px;
}

.search-preview-overview {
  color: var(--text-muted);
  margin: 12px 0 0;
  line-height: 1.55;
  white-space: pre-wrap;
}

.search-preview-modal .modal-header {
  border-bottom: none;
  align-items: flex-start;
}

.search-preview-modal .modal-header .search-thumb {
  margin-top: 2px;
}


/* ---- topbar icon buttons & preferences dialog ---- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.topbar-actions .icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn svg {
  display: block;
  flex-shrink: 0;
}

.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-elev);
}

.user-menu {
  position: relative;
}

.mobile-tab-menu {
  position: relative;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 1279px) {
  .mobile-tab-menu {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .mobile-tab-menu {
    display: none;
  }
}

.mobile-tab-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 40;
  box-sizing: border-box;
}

.mobile-tab-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-tab-menu-item:hover {
  background: var(--bg-elev-2);
}

.mobile-tab-menu-item:hover:not([data-tab="search"]) {
  color: var(--accent);
}

.mobile-tab-menu-item[data-tab="search"]:hover,
.mobile-tab-menu-item-aurora:hover {
  color: var(--text);
}

.mobile-tab-menu-item[data-tab="search"]:hover .mobile-tab-menu-item-icon,
.mobile-tab-menu-item-aurora:hover .mobile-tab-menu-item-icon {
  color: var(--aurora-clr-2);
}

.mobile-tab-menu-item.active:not([data-tab="search"]) {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.mobile-tab-menu-item.active[data-tab="search"],
.mobile-tab-menu-item.active.mobile-tab-menu-item-aurora {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.mobile-tab-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-tab-menu-item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-tab-menu-item-label {
  flex: 1;
  min-width: 0;
}

.mobile-tab-menu-btn[aria-expanded="true"] {
  color: var(--accent);
}

.user-menu-icon-stack {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.user-menu-icon {
  display: block;
  width: 26px;
  height: 26px;
}

.user-menu-icon-default {
  background-color: currentColor;
  mask: url('/assets/user-profile-icon.png') center / contain no-repeat;
  -webkit-mask: url('/assets/user-profile-icon.png') center / contain no-repeat;
  transition: opacity 0.15s ease;
}

.user-menu-icon-hover {
  position: absolute;
  inset: 0;
  background: url('/assets/user-profile-icon-hover.png') center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

[data-theme-mode="light"] .user-menu-icon-hover {
  background-image: url('/assets/user-profile-icon-hover-light.png');
}

.user-menu-btn:hover .user-menu-icon-default,
.user-menu-btn[aria-expanded="true"] .user-menu-icon-default,
html.force-user-icon-hover .user-menu-btn .user-menu-icon-default {
  opacity: 0;
}

.user-menu-btn:hover .user-menu-icon-hover,
.user-menu-btn[aria-expanded="true"] .user-menu-icon-hover,
html.force-user-icon-hover .user-menu-btn .user-menu-icon-hover {
  opacity: 1;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 40;
}

.user-menu-header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.user-menu-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.user-menu-email {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}

.user-menu-usage {
  margin: 4px 0 0;
  font-size: 0.78rem;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

a.user-menu-item:hover {
  color: var(--accent);
}

button.user-menu-item:hover {
  background: var(--bg-elev-2);
  color: var(--bad);
}

button.user-menu-item#user-menu-notifications:hover {
  color: var(--accent);
}

.user-menu-item-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-menu-item-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ad-slot {
  margin: 16px 0 0;
  min-height: 0;
  text-align: center;
}

.ad-slot-modal {
  margin: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prefs-dialog {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.prefs-dialog::backdrop {
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(2px);
}

.prefs-dialog form {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: inherit;
  min-height: 0;
}

.prefs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.prefs-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.prefs-body {
  padding: 20px 22px 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.prefs-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.prefs-column > .prefs-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

@media (max-width: 820px) {
  .prefs-body {
    overflow: auto;
  }
}

.prefs-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 8px;
}

.progress-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.progress-style-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.progress-style-swatch:hover {
  border-color: var(--border-strong);
}

.progress-style-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.progress-style-preview {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}

.progress-style-preview .progress-bar,
.progress-style-preview .progress-segments,
.progress-style-preview .progress-dots {
  flex: 1;
  margin-top: 0;
}

.progress-style-preview .progress-dot {
  width: 6px;
  height: 6px;
}

.progress-style-preview .progress-dots {
  gap: 3px;
}

.progress-style-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.progress-style-swatch.active .progress-style-name {
  color: var(--text);
}

.progress-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}

.progress-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px 7px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.progress-color-swatch:hover {
  border-color: var(--border-strong);
}

.progress-color-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.progress-color-dot {
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--swatch-color) 0%, var(--swatch-color-end, var(--swatch-color)) 100%);
  border: 1px solid color-mix(in srgb, var(--swatch-color) 35%, transparent);
}

.progress-color-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.progress-color-swatch.active .progress-color-name {
  color: var(--text);
}

.prefs-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.prefs-footnote code {
  font-size: 0.75rem;
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.prefs-platform-help {
  margin: 0 0 10px;
}

.prefs-platform-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px 12px;
  flex: 1;
  min-height: 280px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
}

.prefs-platform-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.prefs-platform-check input {
  margin: 0;
  accent-color: var(--accent);
}

.prefs-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

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

.small {
  font-size: 0.85rem;
}

/* ---- auth (login) ---- */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.auth-page {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.auth-brand-mark {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: var(--brand-mark-filter, none);
}

.auth-brand-wordmark {
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent);
}

.auth-brand-tld {
  color: var(--good, var(--accent-dark));
}

.auth-card {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.auth-lead {
  margin: 0 0 16px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form .cf-turnstile {
  margin: 4px 0 2px;
}

.auth-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.auth-submit {
  width: 100%;
}

.auth-error {
  margin: 12px 0 0;
  color: var(--bad);
  font-size: 0.9rem;
}

.auth-footer {
  text-align: center;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.prefs-account-field {
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.search-result-expand {
  border-style: dashed;
  background: var(--bg);
}

.search-result-expand:hover {
  border-color: var(--accent);
}

.search-result-expand.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.search-result-note {
  cursor: default;
  background: transparent;
  border: none;
  padding-top: 4px;
}

.search-result-note:hover {
  background: transparent;
}

/* ---- Floating notification inbox ---- */

.notification-fab-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
}

.notification-fab {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #080b10;
  background: linear-gradient(135deg, var(--accent, #f5c518), var(--good, #2ecc71));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notification-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

.notification-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  border: 2px solid var(--bg, #0a0c10);
}

.notification-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 1201;
  width: min(380px, calc(100vw - 44px));
  max-height: min(560px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.notification-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--border);
}

.notification-panel-header h2 {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.notification-panel-mark-all {
  font-size: 12px;
  padding: 6px 10px;
}

.notification-panel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.notification-panel-tab {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.notification-panel-tab:hover {
  color: var(--text);
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
}

.notification-panel-tab.active {
  color: var(--text);
  background: var(--bg-elev-2);
}

.notification-panel-body {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.notification-panel-pane {
  min-height: 0;
}

.notification-panel-list {
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notification-panel-empty {
  margin: 0;
  padding: 12px 16px 16px;
  text-align: center;
  font-size: 13px;
}

.notification-item.read {
  opacity: 0.88;
}

.notification-item-when {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.notification-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.notification-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
}

.notification-item.unread {
  border-color: color-mix(in srgb, var(--accent, #f5c518) 35%, var(--border));
}

.notification-item-poster {
  width: 40px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

.notification-item-body {
  min-width: 0;
  flex: 1;
}

.notification-item-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--good);
  margin-bottom: 2px;
}

.notification-item-kind.status-cancelled {
  color: var(--bad, #f87171);
}

.notification-item-kind.status-ended {
  color: var(--accent, #f5c518);
}

.notification-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.notification-item-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .notification-fab-wrap {
    right: 14px;
    bottom: 14px;
  }

  .notification-panel {
    right: 14px;
    bottom: 78px;
    width: calc(100vw - 28px);
  }
}

/* Mobile show modal — overrides base .modal-* rules that load later in the file */
@media (max-width: 640px) {
  html.modal-open,
  html.movie-modal-open {
    overflow: hidden;
    height: 100%;
  }

  html.modal-open body,
  html.movie-modal-open body {
    overflow: hidden;
  }

  #modal-backdrop:not([hidden]),
  #movie-modal-backdrop:not([hidden]) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  #modal-backdrop:not([hidden]) .modal,
  #movie-modal-backdrop:not([hidden]) .modal {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #modal-backdrop:not([hidden]) .modal > .modal-header,
  #movie-modal-backdrop:not([hidden]) .modal > .modal-header {
    display: grid;
  }

  #modal-backdrop:not([hidden]) .modal > .modal-header > img,
  #modal-backdrop:not([hidden]) .modal > .modal-header #modal-poster,
  #movie-modal-backdrop:not([hidden]) .modal > .modal-header > img,
  #movie-modal-backdrop:not([hidden]) .modal > .modal-header #movie-modal-poster {
    width: 64px;
    height: 96px;
    object-fit: cover;
    order: 1;
  }

  #modal-backdrop:not([hidden]) .modal > .modal-body {
    flex: none;
    max-height: none;
    overflow: visible;
  }

  #modal-backdrop:not([hidden]) .modal-header-top,
  #movie-modal-backdrop:not([hidden]) .modal-header-top {
    order: 2;
  }

  #modal-backdrop:not([hidden]) #modal-ratings,
  #movie-modal-backdrop:not([hidden]) #movie-modal-ratings {
    order: 3;
  }

  #modal-backdrop:not([hidden]) #modal-show-details,
  #movie-modal-backdrop:not([hidden]) #movie-modal-details {
    order: 4;
  }

  #modal-backdrop:not([hidden]) #modal-show-details > .modal-show-details-summary,
  #movie-modal-backdrop:not([hidden]) #movie-modal-details > .modal-show-details-summary {
    display: flex;
    margin-top: 0;
  }

  #modal-backdrop:not([hidden]) #modal-user-rating,
  #movie-modal-backdrop:not([hidden]) #movie-modal-user-rating {
    order: unset;
    margin-bottom: 4px;
    padding-bottom: 10px;
  }

  #modal-backdrop:not([hidden]) #modal-share {
    order: unset;
    margin-top: 0;
  }

  #modal-backdrop:not([hidden]) #modal-share .share-section {
    margin-top: 0;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar,
  #movie-modal-backdrop:not([hidden]) .modal-toolbar {
    order: unset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface-2);
  }

  #movie-modal-backdrop:not([hidden]) .modal-toolbar #movie-modal-watched {
    grid-column: 1 / -1;
  }

  #movie-modal-backdrop:not([hidden]) .modal-toolbar #movie-modal-remove {
    grid-column: 1 / -1;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar #modal-caught-up,
  #modal-backdrop:not([hidden]) .modal-toolbar #modal-resume-watching {
    grid-column: 1 / -1;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar #modal-dropped[hidden] ~ #modal-remove {
    grid-column: 1 / -1;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar .modal-hide-watched {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 2px 0 0;
    padding: 0;
    font-size: 0.78rem;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar .modal-hide-watched input {
    width: 14px;
    height: 14px;
  }

  #modal-backdrop:not([hidden]) .modal-toolbar button,
  #movie-modal-backdrop:not([hidden]) .modal-toolbar button {
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
  }

  #modal-backdrop:not([hidden]) .modal-user-rating-actions,
  #movie-modal-backdrop:not([hidden]) .modal-user-rating-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }

  #modal-backdrop:not([hidden]) .modal-user-rating-actions #modal-user-rating-save,
  #movie-modal-backdrop:not([hidden]) .modal-user-rating-actions #movie-modal-user-rating-save {
    flex: 2 1 0;
    min-width: 0;
  }

  #modal-backdrop:not([hidden]) .modal-user-rating-actions #modal-user-rating-clear,
  #movie-modal-backdrop:not([hidden]) .modal-user-rating-actions #movie-modal-user-rating-clear {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Detail modals: full chip pills (logo + name) on mobile — match desktop. */
  #modal-backdrop:not([hidden]) .provider-section .provider-row,
  #movie-modal-backdrop:not([hidden]) .provider-section .provider-row,
  .search-preview-modal .provider-section .provider-row {
    gap: 6px;
    margin-top: 0;
  }

  #modal-backdrop:not([hidden]) .provider-section .provider-pill,
  #movie-modal-backdrop:not([hidden]) .provider-section .provider-pill,
  .search-preview-modal .provider-section .provider-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
    gap: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  #modal-backdrop:not([hidden]) .provider-section .provider-pill img,
  #movie-modal-backdrop:not([hidden]) .provider-section .provider-pill img,
  .search-preview-modal .provider-section .provider-pill img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  #modal-backdrop:not([hidden]) .provider-section-label,
  #movie-modal-backdrop:not([hidden]) .provider-section-label,
  .search-preview-modal .provider-section-label {
    margin-bottom: 8px;
  }
}

/* Native Android WebView: backdrop-filter is costly compared to Chrome. */
html.watchnext-android .app-loading,
html.watchnext-android .mobile-app-support-bar,
html.watchnext-android .prefs-dialog::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Library tab view layout toggle (cards vs list) */
.view-layout-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
}

.view-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.view-layout-btn + .view-layout-btn {
  border-left: 1px solid var(--border);
}

.view-layout-btn:hover:not(.active) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--bg-elev-2));
}

.view-layout-btn:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--bg-elev-2));
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 1;
}

.view-layout-btn.active {
  color: var(--accent-text, #fff);
  background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, var(--border));
}

.view-layout-btn.active:hover,
.view-layout-btn.active:focus-visible {
  color: var(--accent-text-hover, var(--accent-text, #fff));
  background: var(--accent-hover, var(--accent));
}

.card-grid.view-layout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: unset;
}

.show-list-row {
  --show-list-poster-width: 56px;
  display: grid;
  grid-template-columns: var(--show-list-poster-width) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 84px;
  padding: 0 12px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  cursor: pointer;
  /* See .card — overflow: clip + clip-margin lets the provider
   * tooltip rise above the row even when the pill is the right-
   * most one in the strip. The poster's rounded left corners are
   * still clipped via .show-list-row-poster-wrap. overflow:
   * hidden is the legacy-browser fallback. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 60px;
}

.show-list-row-poster-wrap {
  position: relative;
  width: var(--show-list-poster-width);
  height: 84px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  align-self: stretch;
}

.show-list-row-poster-wrap.card-poster {
  border-radius: 8px 0 0 8px;
}

.show-list-row-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  background: var(--bg-elev-2);
}

.show-list-row.card-series-ended .show-list-row-poster-wrap.card-poster::after,
.show-list-row.card-series-cancelled .show-list-row-poster-wrap.card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

.show-list-row.card-series-ended .show-list-row-poster-wrap.card-poster::after {
  background: linear-gradient(135deg, rgba(180, 130, 20, 0.28), rgba(90, 60, 10, 0.38));
}

.show-list-row.card-series-cancelled .show-list-row-poster-wrap.card-poster::after {
  background: linear-gradient(135deg, rgba(190, 28, 28, 0.32), rgba(120, 8, 8, 0.4));
}

.show-list-row .series-status-stamp {
  display: none;
}

.show-list-row.card-series-ended .series-status-stamp.ended,
.show-list-row.card-series-cancelled .series-status-stamp.cancelled {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  z-index: 4;
  width: 130%;
  max-width: none;
  font-size: 7px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  white-space: nowrap;
}

.show-list-row-body {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  overflow: hidden;
}

.show-list-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.show-list-row-head .title {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show-list-row-status {
  flex-shrink: 0;
  display: inline-block;
  width: auto;
  padding: 2px 7px;
  font-size: 0.58rem;
  line-height: 1.2;
  border: 0;
  border-radius: 999px;
  text-align: center;
}

.show-list-row-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show-list-row-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.show-list-row-progress.card-progress {
  margin-top: 0;
}

.show-list-row-pct-label.progress-label {
  margin-top: 0;
}

.show-list-row-progress-track,
.show-list-row-progress .progress-bar,
.show-list-row-progress .progress-segments,
.show-list-row-progress .progress-dots {
  flex: 1 1 auto;
  min-width: 3rem;
}

.show-list-row-progress .progress-bar {
  height: 8px;
}

.show-list-row-progress .progress-bar--default,
.show-list-row-progress .progress-bar--labeled {
  height: 16px;
}

.show-list-row-progress .progress-bar--labeled {
  border-radius: 4px;
}

.show-list-row-progress .progress-count {
  font-size: 0.58rem;
  padding: 0 5px;
}

.show-list-row-progress .progress-bar--classic {
  height: 6px;
}

.show-list-row-progress .progress-bar--rounded,
.show-list-row-progress .progress-bar--gradient {
  height: 10px;
}

.show-list-row-progress .progress-segments {
  height: 10px;
  gap: 2px;
}

.show-list-row-progress .progress-segments--fluid,
.show-list-row-progress .progress-dots--fluid {
  flex: 1 1 0;
  min-width: 3rem;
  max-width: none;
  justify-content: flex-start;
}

.show-list-row-progress .progress-segments--fluid .progress-segment {
  flex: 0 0 auto;
  width: 4px;
  min-width: 4px;
}

.show-list-row-progress .progress-dots--fluid {
  min-height: 10px;
  gap: 4px;
}

.show-list-row-progress .progress-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

.show-list-row-progress-bar {
  flex: 1 1 auto;
  height: 8px;
  min-width: 3rem;
}

.show-list-row-pct-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.show-list-row-providers {
  margin: 0;
  /* overflow-x clips long provider runs horizontally; overflow-y
   * stays visible so the styled hover tooltip on each pill can
   * rise above the row without getting cut off. */
  overflow-x: clip;
  overflow-y: visible;
}

.show-list-row-providers .provider-row {
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: clip;
  overflow-y: visible;
}

.show-list-row-providers .provider-pill {
  transform: scale(0.88);
  transform-origin: left center;
}

/* The 0.88 squeeze is only needed for the legacy chip-style
 * pill (border + padding hugging a 14×14 logo). The desktop
 * transparent 26×26 treatment removes the scale via the
 * @media (min-width: 1101px) block so list-row pills feel as
 * substantial as the Coming Soon ones on desktop. Mobile keeps
 * the scale + chip + 14×14 it always had. */

/* List rows reuse card status progress colors (green for watching, etc.). */
.show-list-row.card-status-not_started .show-list-row-pct-label {
  color: var(--text-muted);
}

.show-list-row.card-status-not_started .progress-fill {
  background: var(--text-muted);
}

.shelf--list-layout .episode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shelf--list-collapsible > .shelf-list-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.shelf--list-collapsible > .shelf-list-summary::-webkit-details-marker {
  display: none;
}

.shelf--list-collapsible[open] > .shelf-list-summary {
  margin-bottom: 22px;
}

.shelf--list-collapsible:not([open]) > .shelf-list-summary {
  margin-bottom: 0;
}

.shelf--list-collapsible > .shelf-list-summary h2 {
  margin: 0;
  line-height: 1.15;
  align-self: center;
}

.shelf--list-collapsible > .shelf-list-summary::after {
  content: '';
  flex-shrink: 0;
  align-self: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.2s ease;
}

.shelf--list-collapsible:not([open]) > .shelf-list-summary::after {
  transform: rotate(-90deg);
}

@media (max-width: 1279px) {
  .shelf--list-collapsible > .shelf-list-summary {
    gap: 12px;
    min-height: 44px;
  }

  .shelf--list-collapsible > .shelf-list-summary::after {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
    opacity: 0.85;
  }
}

.shelf--list-collapsible .shelf-list-summary .section-title-heading {
  flex: 1;
  min-width: 0;
}

.shelf-list-body .episode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.episode-list-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  cursor: pointer;
}

.episode-list-row-poster {
  width: 56px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
}

.episode-list-row-body {
  min-width: 0;
}

.episode-list-row-body h3 {
  margin: 4px 0 2px;
  font-size: 1rem;
  line-height: 1.25;
}

.episode-list-row-body .episode-badge {
  position: static;
  display: inline-block;
  margin: 0;
}

.episode-list-row-actions {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 1;
}

.episode-list-row-foot {
  margin-top: 6px;
}

.episode-list-row--coming {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 84px;
  padding: 0 12px 0 0;
}

.episode-list-row--coming .episode-list-row-poster-wrap {
  width: 56px;
  height: 84px;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg-elev-2);
}

.episode-list-row--coming .episode-list-row-poster {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.episode-list-row--coming .episode-list-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  overflow: hidden;
}

.episode-list-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.episode-list-row-head .title {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-list-row-badge {
  flex-shrink: 0;
  position: static;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.episode-list-row-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-list-row-meta .episode-air-date-inline {
  color: var(--warn);
  font-weight: 650;
}

.episode-list-row--coming .episode-list-row-foot {
  margin: 0;
  /* overflow-x clips long provider runs horizontally; overflow-y
   * stays visible so the styled hover tooltip on each provider
   * pill can rise above the row without getting cut off. Mirrors
   * the .show-list-row-providers fix. */
  overflow-x: clip;
  overflow-y: visible;
}

.episode-list-row--coming .episode-list-row-foot .episode-provider-pills {
  margin: 0;
}

.episode-list-row--new {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  min-height: 84px;
  padding: 0 12px 0 0;
}

.episode-list-row--new .episode-list-row-poster-wrap {
  width: 56px;
  height: 84px;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg-elev-2);
}

.episode-list-row--new .episode-list-row-poster {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.episode-list-row--new .episode-list-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  overflow: hidden;
}

.episode-list-row--new .episode-list-row-foot {
  margin: 0;
  /* See .episode-list-row--coming .episode-list-row-foot — same
   * reason: let the provider tooltip rise above the row. */
  overflow-x: clip;
  overflow-y: visible;
}

.episode-list-row--new .episode-list-row-foot .episode-provider-pills {
  margin: 0;
}

.episode-list-row--new .episode-list-row-actions {
  align-self: center;
  padding-right: 4px;
}

@media (min-width: 641px) {
  .episode-list-row-actions {
    flex-direction: row;
    gap: 4px;
  }
}

.episode-list-row-meta .episode-release-inline {
  font-weight: 650;
}

.episode-list-row-meta .episode-release-inline.is-today {
  color: var(--warn);
}

@media (max-width: 640px) {
  .coming-tree-node-show > .coming-tree-details > .coming-tree-summary {
    align-items: flex-start;
  }

  .coming-tree-node-show > .coming-tree-details > .coming-tree-summary .coming-tree-text {
    display: grid;
    gap: 3px;
  }

  .coming-tree-node-show > .coming-tree-details > .coming-tree-summary .coming-tree-label,
  .coming-tree-node-show > .coming-tree-details > .coming-tree-summary .coming-tree-meta {
    display: block;
    margin-left: 0;
  }

  .coming-tree-node-show > .coming-tree-details > .coming-tree-summary .coming-tree-meta::before {
    content: none;
  }

  .episode-list-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .episode-list-row--coming {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 114px;
  }

  .episode-list-row--coming .episode-list-row-poster-wrap {
    width: 76px;
    height: 114px;
  }

  .episode-list-row--new {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 114px;
    position: relative;
  }

  .episode-list-row--new .episode-list-row-poster-wrap,
  .episode-list-row--coming .episode-list-row-poster-wrap {
    width: 76px;
    height: 100%;
    min-height: 114px;
  }

  .episode-list-row--new .episode-list-row-body,
  .episode-list-row--coming .episode-list-row-body {
    padding-block: 8px;
    overflow: visible;
  }

  .episode-list-row--coming .episode-list-row-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 5px;
  }

  .episode-list-row--coming .episode-list-row-head {
    display: contents;
  }

  .episode-list-row--coming .episode-list-row-head .title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .episode-list-row--coming .episode-list-row-meta {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .episode-list-row--coming .episode-list-row-foot {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }

  .episode-list-row--coming .episode-list-row-badge {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: end;
  }

  .episode-list-row--new .episode-list-row-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 5px;
  }

  .episode-list-row--new .episode-list-row-head {
    display: contents;
  }

  .episode-list-row--new .episode-list-row-head .title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .episode-list-row--new .episode-list-row-meta {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .episode-list-row--new .episode-list-row-foot {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }

  .episode-list-row--new .episode-list-row-badge {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    margin-right: 66px;
  }

  .episode-list-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }

  .episode-list-row-head .title,
  .episode-list-row-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .episode-list-row-badge {
    justify-self: end;
  }

  .episode-list-row--new .episode-list-row-actions {
    position: absolute;
    right: 10px;
    bottom: 8px;
    flex-direction: row;
    padding: 0;
  }

  .episode-list-row--new .episode-list-row-foot,
  .episode-list-row--coming .episode-list-row-foot,
  .episode-list-row--new .episode-provider-pills,
  .episode-list-row--coming .episode-provider-pills {
    overflow: visible;
  }

  .episode-list-row--new .episode-provider-pills,
  .episode-list-row--coming .episode-provider-pills {
    flex-wrap: wrap;
  }

  .episode-list-row-poster {
    width: 52px;
  }

  .show-list-row {
    --show-list-poster-width: 76px;
    grid-template-columns: var(--show-list-poster-width) minmax(0, 1fr);
    min-height: 114px;
  }

  .show-list-row-poster-wrap {
    height: 100%;
    min-height: 114px;
  }

  .show-list-row-body {
    padding-block: 8px;
    overflow: visible;
  }

  .show-list-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }

  .show-list-row-head .title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .show-list-row-status {
    justify-self: end;
  }

  .show-list-row-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .show-list-row-pct-suffix {
    display: none;
  }

  .show-list-row-providers,
  .show-list-row-providers .provider-row {
    overflow: visible;
  }

  .show-list-row-providers .provider-row {
    flex-wrap: wrap;
  }
}

/* Archived (over free-tier cap) cards. Stays visible in the
 * library but transparent + non-interactive-feeling so users see
 * immediately that the title is in a frozen state. Clicking
 * opens .archived-dialog (Upgrade / Remove / Cancel) instead of
 * the regular show or movie modal. */
.card.is-archived,
.show-list-row.is-archived {
  position: relative;
  opacity: 0.42;
  filter: saturate(0.6);
  transition: opacity 0.18s ease;
}

.card.is-archived:hover,
.show-list-row.is-archived:hover,
.card.is-archived:focus-within,
.show-list-row.is-archived:focus-within {
  opacity: 0.7;
  cursor: pointer;
}

.archived-stamp {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 4px 9px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg-elev-0, #111);
  background: var(--accent, #ffb84a);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.show-list-row.is-archived .archived-stamp {
  top: 6px;
  right: 6px;
  font-size: 0.58rem;
  padding: 3px 7px;
}

/* Click-on-archived dialog. Sized to a comfortable read width
 * on desktop, full-width on mobile. <dialog> handles backdrop
 * automatically; we just style ::backdrop. */
.archived-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  background: var(--bg-elev-1);
  color: var(--text);
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.archived-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.archived-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 18px;
}

.archived-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.archived-dialog-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.archived-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.archived-dialog-actions button {
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}

.archived-dialog-actions button:hover {
  background: var(--bg-elev-3, var(--bg-elev-2));
}

.archived-dialog-primary {
  background: var(--accent, #ffb84a) !important;
  color: var(--bg-elev-0, #111) !important;
  border-color: var(--accent, #ffb84a) !important;
  font-weight: 700 !important;
}

.archived-dialog-primary:hover {
  filter: brightness(1.08);
}

.archived-dialog-remove {
  color: var(--dropped, #d76b6b) !important;
  border-color: color-mix(in srgb, var(--dropped, #d76b6b) 35%, transparent) !important;
}

@media (max-width: 480px) {
  .archived-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .archived-dialog-actions button {
    width: 100%;
  }
}