/* Self-hosted variable fonts (SIL Open Font License, see /fonts/OFL-*.txt), copied from
   the @fontsource-variable packages the website already uses. Loading them from Google
   through a render-blocking @import cost about 1 s on a first visit and made first paint
   depend on internet access. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/outfit-latin-ext-wght-normal.woff2?v=2.1.1.0.0") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/outfit-latin-wght-normal.woff2?v=2.1.1.0.0") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-ext-wght-normal.woff2?v=2.1.1.0.0") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2?v=2.1.1.0.0") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/*
 * RESPONSIVE DESIGN GUIDE
 * ========================
 * Breakpoints (max-width):
 *   ≤1100px  - sidebar collapses from 16rem to compact; dashboard history grid adapts
 *   ≤980px   - stats/settings go to single column; leaderboard podium collapses
 *   ≤760px   - nav becomes collapsible top bar; dashboard reverts to scrollable stacked
 *              layout (NOT a fixed-height column split); layout is column-stacked
 *   ≤640px   - further text/spacing shrinks; stats toolbar/KPI stack; topbar stacks
 *   ≤480px   - smallest adjustments (part-watched card width, mini-card sizing)
 *
 * IMPORTANT: When adding or changing dashboard or stats layouts, always verify on
 * mobile (≤760px). The dashboard uses a fixed-height flex split on desktop that is
 * explicitly overridden to scrollable sections at ≤760px (see that media block).
 * New panels added to #timeline-view must also work in the scrollable mobile mode.
 */

:root {
  color-scheme: dark;
  --bg: #05080c;
  --panel: rgba(18, 22, 28, 0.45);
  --panel-2: rgba(18, 22, 28, 0.55);
  --panel-3: #080b0f;
  --brand-menu: #1f242c;  /* Left menu brand surface */
  --brand-main: #080b0f;  /* Main background brand surface */
  --line: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.12);
  --skeleton-base: #101010;
  --skeleton-sheen: rgba(255, 255, 255, 0.16);
  --text: #f8fafc;
  --soft: #e2e8f0;
  --muted: #94a3b8;
  --blue: #e5a00d;
  --green: #10b981;
  --yellow: #eab308;
  --red: #f43f5e;
  --field: #0d1115;
  --accent: #e5a00d;
  --surface: #141b22;
  --surface-hover: #1e2936;
  --text-primary: #f1f5f9;
  --nav-active-border: #8a5c12;
  --nav-active-bg: #2a2013;
  --nav-active-text: #ffe4b0;
  --radius: 8px;
  --poster-radius: 8px;
  --library-poster-radius: var(--poster-radius);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --sidebar-width: 16rem;
  --top-control-padding: 0.65rem;
  --sidebar-logo-height: 2.4rem;
  --control-inline-padding: 0.7rem;
  --right-topbar-height: calc((var(--top-control-padding) * 2) + var(--sidebar-logo-height));
  --right-topbar-content-offset: 0.7rem;
  /* Text sizes. --text-scale is set from the
     Appearance Text size slider (appearance.js applyTextScale). */
  --text-scale: 1;
  --fs-card-label: calc(0.64rem * var(--text-scale));
  --fs-card-watch-count: calc(0.7rem * var(--text-scale));
  --fs-badge: calc(0.68rem * var(--text-scale));
  --fs-option: calc(0.9rem * var(--text-scale));
  --fs-option-error: calc(0.85rem * var(--text-scale));
  --fs-now-title: calc(clamp(1.1rem, 1.5vw, 1.4rem) * var(--text-scale));
  --fs-now-episode: calc(0.9rem * var(--text-scale));
  --fs-now-meta: calc(0.8rem * var(--text-scale));
  --fs-fact-label: calc(0.68rem * var(--text-scale));
  --fs-field-label: calc(0.7rem * var(--text-scale));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.media-detail-sync-notice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--text);
  font-size: 0.86rem;
}

.media-detail-sync-notice strong { color: var(--accent); }

.media-detail-sync-notice-spinner {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: media-detail-sync-spin 0.8s linear infinite;
}

.immersive-episode-row.is-syncing { opacity: 0.8; }

@keyframes media-detail-sync-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .media-detail-sync-notice-spinner { animation: none; }
}

/* Media detail loading states ------------------------------------------------
   Keep the poster mounted while metadata is enriched. The poster itself
   carries the state, rather than adding a floating metadata pill to the copy. */
.media-detail-page .immersive-poster-frame {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}

.media-detail-page .immersive-poster-frame .immersive-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

/* Detail-page artwork can arrive after the surrounding metadata. Keep its
   reserved box visually alive until the bitmap is ready instead of showing a
   momentary empty rectangle. The load listener in app-events.js adds
   `.is-loaded` as soon as the image resolves. */
.media-detail-page :is(
  .immersive-poster-img,
  .season-poster-img,
  .episode-thumb,
  .cast-avatar-img,
  .trailer-thumb,
  .media-image-thumb
):not(.is-loaded) {
  background-color: var(--skeleton-base);
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    var(--skeleton-sheen) 42%,
    var(--skeleton-sheen) 56%,
    transparent 78%
  );
  background-repeat: no-repeat;
  background-size: 250% 100%;
  animation: media-detail-image-skeleton 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes media-detail-image-skeleton {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.media-detail-page .immersive-poster-frame.is-loading .immersive-poster-img {
  animation: media-detail-poster-loading 1500ms ease-in-out infinite;
}

/* Keep the loading signal visible across the episode grid while the show,
   lazy season metadata, or watch history is still being enriched. The sheen
   is a non-interactive layer so episode navigation remains usable. */
.media-detail-page .immersive-episode-row.is-loading-data {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(229, 160, 13, 0.42);
  box-shadow: 0 0 0 1px rgba(229, 160, 13, 0.12), 0 0 22px rgba(229, 160, 13, 0.12);
}

.media-detail-page .immersive-episode-row.is-loading-data::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 20%,
    rgba(255, 247, 214, 0.04) 34%,
    rgba(255, 247, 214, 0.3) 47%,
    rgba(229, 160, 13, 0.12) 54%,
    transparent 70%
  );
  transform: translate3d(-125%, 0, 0);
  animation: media-detail-episode-tile-sheen 1450ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.media-detail-page .immersive-episode-row.is-loading-data .episode-thumb {
  animation: media-detail-episode-thumb-loading 1450ms ease-in-out infinite;
}

@keyframes media-detail-episode-tile-sheen {
  to {
    transform: translate3d(125%, 0, 0);
  }
}

@keyframes media-detail-episode-thumb-loading {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(0.985);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-detail-page .immersive-episode-row.is-loading-data::before,
  .media-detail-page .immersive-episode-row.is-loading-data .episode-thumb {
    animation: none;
  }

  .media-detail-page .immersive-episode-row.is-loading-data::before {
    opacity: 0.36;
    transform: none;
  }
}

.immersive-poster-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(7, 11, 16, 0.05) 32%, rgba(7, 11, 16, 0.72));
  color: #fff;
  pointer-events: none;
}

.immersive-poster-loading-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.immersive-poster-loading-dot {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  animation: media-detail-poster-loading-dot 1100ms ease-in-out infinite;
}

@keyframes media-detail-poster-loading {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.016);
  }
}

@keyframes media-detail-poster-loading-dot {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.episode-watch-history--loading {
  display: flex;
  align-items: center;
  min-height: 1.35rem;
  gap: 0.5rem;
}

.episode-watch-history-skeleton {
  display: block;
  height: 0.72rem;
  border-radius: 0.3rem;
  background: rgba(148, 163, 184, 0.25);
  animation: episode-watch-history-loading 1300ms ease-in-out infinite;
}

.episode-watch-history-skeleton--date {
  width: 10rem;
  max-width: 52%;
}

.episode-watch-history-skeleton--source {
  width: 3.4rem;
  animation-delay: 160ms;
}

@keyframes episode-watch-history-loading {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.9;
  }
}

@media (max-width: 640px) {
  .media-detail-page .immersive-poster-frame {
    width: 130px;
    max-width: 130px;
    justify-self: start;
    grid-row: 1 / span 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-detail-page .immersive-poster-frame.is-loading .immersive-poster-img,
  .immersive-poster-loading-dot,
  .episode-watch-history-skeleton,
  .media-detail-page :is(
    .immersive-poster-img,
    .season-poster-img,
    .episode-thumb,
    .cast-avatar-img,
    .trailer-thumb,
    .media-image-thumb
  ):not(.is-loaded) {
    animation: none;
  }

  .media-detail-page .immersive-poster-frame.is-loading .immersive-poster-img {
    opacity: 0.82;
  }
}

html.light-mode .media-detail-page .immersive-poster-frame {
  box-shadow: none;
}

/* Theme switch transition ------------------------------------------------- *
 * Applied only for the brief window around a light/dark toggle (see
 * toggleTheme() in app.js, which adds/removes this class), so every element's
 * color/background/border fades smoothly between themes instead of the
 * instant flash a plain class toggle gives - without slowing down every
 * other hover/focus transition in the app the rest of the time. */
html.theme-transition,
html.theme-transition * {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, fill 140ms ease, stroke 140ms ease, box-shadow 140ms ease, outline-color 140ms ease !important;
}

/* Settings task shell ----------------------------------------------------- */
.settings-pane,
.settings-row,
.settings-card,
.tool-section-card,
[data-sub-panel],
details.sync-tool-details,
details.sync-match-report,
details.issue-category,
.settings-pane [id] {
  scroll-margin-top: calc(var(--right-topbar-height) + var(--space-4));
}

.settings-hub {
  width: 100%;
  min-width: 0;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  container-type: inline-size;
}

.settings-mobile-section {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.settings-mobile-section label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-mobile-section .field {
  min-height: 2.75rem;
  font-size: 1rem;
}

.settings-help-disclosure > summary:focus-visible,
.settings-disclosure > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.settings-overview {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.settings-overview-header {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.settings-overview-header > div {
  display: grid;
  gap: var(--space-1);
}

.settings-overview-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.settings-overview-header p {
  max-width: 58ch;
  margin: 0;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.45;
}


.settings-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding-top: 0;
  margin-top: 0;
}

.settings-pane .settings-card,
.settings-pane .sync-panel,
.settings-pane .logs-panel,
.settings-pane .backup-settings-panel,
.settings-pane .tool-section-card {
  width: 100%;
  padding: 1.5rem !important;
  gap: var(--space-5) !important;
  justify-content: stretch !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* html.light-mode .glass-panel forces background: var(--panel) at higher
   specificity than the rule above (extra html type selector) - restate the
   panel-2 background here, scoped to light mode, so it actually wins. */
html.light-mode .settings-pane .settings-card,
html.light-mode .settings-pane .sync-panel,
html.light-mode .settings-pane .logs-panel,
html.light-mode .settings-pane .backup-settings-panel,
html.light-mode .settings-pane .tool-section-card,
html.light-mode .settings-disclosure {
  background: var(--panel-2);
}

.settings-card .section-heading {
  margin-bottom: 0;
}

.settings-help-disclosure,
.settings-disclosure {
  border-block: 1px solid var(--line);
  background: transparent;
}

.settings-help-disclosure > summary,
.settings-disclosure > summary {
  min-height: 2.75rem;
  padding: var(--space-3) 0;
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-help-disclosure > summary::marker {
  color: var(--muted);
}

.settings-help-body {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.settings-help-body > .guide-callout + .guide-callout,
.webhook-setup-guides > .guide-callout + .guide-callout {
  margin-top: var(--space-3);
}

.settings-help-body > .settings-card,
.settings-help-body > article {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.settings-help-body .section-heading {
  display: none;
}

.settings-disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #202428;
  scroll-margin-top: calc(var(--right-topbar-height) + var(--space-3));
}

.settings-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  list-style: none;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary > span:first-child {
  display: grid;
  gap: var(--space-1);
}

.settings-disclosure > summary strong {
  color: var(--text);
  font-size: 0.88rem;
}

.settings-disclosure > summary small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

.settings-disclosure[open] > summary > span:last-child {
  transform: rotate(45deg);
}

.settings-disclosure .settings-row {
  padding: 0 var(--space-4) var(--space-4);
}

/* Removed sync-specific row margin-top override - uniform 1.5rem flex gap handles spacing consistently */

@media (min-width: 48rem) {
  .settings-overview-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 56.3125rem) {
  .settings-mobile-section {
    display: none;
  }
}

@media (max-width: 40rem) {
  .settings-overview {
    gap: var(--space-5);
  }

  .settings-pane .settings-card,
  .settings-pane .sync-panel,
  .settings-pane .logs-panel,
  .settings-pane .backup-settings-panel {
    padding: var(--space-3) !important;
  }

  .settings-pane .settings-actions,
  .settings-pane .logs-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-pane .settings-actions button,
  .settings-pane .logs-actions button,
  .settings-pane .backup-file-button {
    width: 100%;
    min-height: 2.75rem !important;
  }
}

@media (pointer: coarse) {
  .settings-help-disclosure > summary,
  .settings-disclosure > summary {
    min-height: 2.75rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-chassis {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  flex-direction: row;
  gap: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

code {
  color: #d7dee6;
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
}

h1 {
  color: #f1f5f9;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.hidden {
  display: none !important;
}

.media-detail-page {
  position: relative;
  min-height: min(74vh, 860px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong), transparent 18%);
  border-radius: var(--radius);
  background: rgba(8, 11, 14, 0.16);
  padding: clamp(1rem, 2.4vw, 2rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

#explorerPanel {
  position: relative;
}

.media-detail-loader {
  display: flex;
  min-height: clamp(15rem, 42vh, 28rem);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--muted);
  text-align: center;
}

.media-detail-loader-spinner {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 3px solid color-mix(in srgb, var(--line-strong), transparent 18%);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: media-detail-loader-spin 0.72s linear infinite;
}

.media-detail-loader-label {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

@keyframes media-detail-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-detail-loader-spinner {
    animation: none;
    border-right-color: var(--accent);
  }
}

.empty-log--loading {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  text-align: left;
}

.empty-log-spinner {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--line-strong), transparent 18%);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: media-detail-loader-spin 0.72s linear infinite;
}

.empty-log-spinner--inline {
  width: 0.8rem;
  height: 0.8rem;
  border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .empty-log-spinner {
    animation: none;
    border-right-color: var(--accent);
  }
}

.sync-preview-panel { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel-bg) 88%, var(--accent) 12%); }
.sync-preview-heading, .sync-preview-footer, .sync-preview-metrics { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sync-preview-heading span { display: block; color: var(--text-muted); font-size: .82rem; margin-top: 2px; }
.sync-preview-metrics { justify-content: flex-start; }
.sync-preview-metrics span { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: .82rem; }
.sync-preview-actions { display: grid; gap: 6px; margin-top: var(--space-2); }
.sync-preview-action { display: grid; grid-template-columns: 82px minmax(120px, 1fr) minmax(120px, 1.4fr) minmax(100px, .8fr); gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); font-size: .82rem; }
.sync-preview-action small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-preview-risk { border-radius: 999px; padding: 3px 7px; text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.sync-preview-risk.additive { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sync-preview-risk.destructive { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.sync-preview-warning { color: var(--warning); margin: 0; }
.sync-preview-state.error { color: var(--danger); }
.sync-health-panel { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.sync-health-panel:empty { display: none; margin-top: 0; }
#cacheStatsPanel:empty { display: none; }
.sync-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.sync-health-metric { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.sync-health-metric span, .sync-health-metric small, .sync-health-destinations span { color: var(--text-muted); font-size: .78rem; }
.sync-health-destinations { display: grid; gap: 6px; }
.sync-health-destinations div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); }
@media (max-width: 760px) { .sync-preview-action { grid-template-columns: 76px 1fr; } .sync-preview-action small { grid-column: 2; } .sync-preview-panel { padding: var(--space-2); } }

.modal-backdrop-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: saturate(0.8);
  pointer-events: none;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 64%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 64%, rgba(0, 0, 0, 0.3) 100%);
}

.media-detail-page > :not(.modal-backdrop-image) {
  position: relative;
  z-index: 1;
}

.media-detail-page .immersive-header {
  display: grid;
  grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: stretch;
  align-content: start;
  margin-top: 0;
}

.media-detail-page .immersive-poster-img {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  height: auto;
}

.media-detail-page .immersive-meta {
  grid-column: 2;
  grid-row: 1;
}

.media-detail-page .immersive-poster-img {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.media-detail-page .immersive-meta {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-content: stretch;
  align-self: stretch;
  padding-top: 0.2rem;
}

.media-detail-page .media-detail-bottom-stack {
  display: grid;
  gap: var(--space-3);
  align-self: end;
  min-width: 0;
}

.media-detail-page .immersive-overview {
  display: block;
}

.media-kicker {
  color: var(--accent);
  font-size: 0.81rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-facts-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) calc(var(--space-3) + var(--space-2));
  margin-top: 1.25rem;
}

.media-detail-page .media-facts-rail {
  grid-template-columns: 1fr;
  margin-top: 0.75rem;
  gap: 0.5rem;
}

.media-fact {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  align-content: start;
}

/* Direct child only - a descendant selector here would also catch the
   provider-name text nested inside a chip row's pills (.media-fact-chip
   span), recoloring "Apple TV" etc. to the accent color along with the
   actual STATUS/NETWORK/... label. */
.media-fact > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: var(--fs-fact-label);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.media-fact b {
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.media-fact-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* The "Watch Now" row's app-links container defaults to full-width/centered
   for its old home in the collapsible facts aside - left-align it like every
   other chip row here instead. */
.media-fact-chip-row .media-app-links {
  width: auto;
  justify-content: flex-start;
}

/* Ratings, Available on, and Watch Now each get a dedicated full-width row -
   unlike .media-fact--wide, this isn't neutralized for the non-bio layout,
   since these three are meant to stand alone rather than pair up. */
.media-fact--full {
  grid-column: 1 / -1;
}

/* Same pill style as the Plex/Emby/Jellyfin app-link chips (.media-app-link) -
   no background fill, just the icon and label. */
.media-fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}

a.media-fact-chip:hover {
  color: var(--accent);
}

.media-fact-chip-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* Transparent facts panel that sits alongside the poster on a movie/show
   detail page - no card boundary, just label/value text with a divider
   between rows; it fills the full width and height of its grid column
   instead of being pinned to the top with dead space below (see
   immersive-sidebar align-self/justify-content below). */
.immersive-sidebar .media-facts-details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: space-between;
}

.immersive-sidebar .media-facts-details::details-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  justify-content: space-between;
}

@media (min-width: 761px) {
  .immersive-sidebar .media-facts-details {
    display: contents !important;
  }

  .immersive-sidebar .media-facts-details::details-content {
    display: contents !important;
  }

  .immersive-sidebar .media-facts-summary {
    display: none !important;
  }
}

.media-detail-page .immersive-header:has(.immersive-sidebar) {
  grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.media-detail-page .immersive-header .immersive-sidebar {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.media-facts-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.media-facts-top-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.media-fact-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.media-fact-table-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
}

.media-fact-table-label {
  padding: 0.65rem 0.9rem 0.65rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted, #94a3b8);
  font-size: var(--fs-fact-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.media-fact-table-value {
  padding: 0.65rem 0 0.65rem 0.9rem;
  color: var(--text, #ffffff);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.media-facts-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.media-facts-group--available {
  margin-top: 1.1rem;
}

.media-facts-bottom-group {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.media-facts-bottom-group .media-facts-group--available,
.media-facts-bottom-group .media-facts-group--watch-now,
.media-facts-bottom-group .media-facts-group--ratings {
  margin-top: 0;
}

.media-facts-group--watch-now {
  margin-top: 0.9rem;
}

.media-facts-group--ratings {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.media-facts-group-label {
  color: var(--muted, #94a3b8);
  font-size: var(--fs-fact-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.media-facts-group-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Provider tile icons */
.media-provider-list {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.media-provider-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 8px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.media-provider-tile:hover {
  background: transparent !important;
  border: none !important;
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.media-provider-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.media-provider-tile--text,
.media-provider-name {
  width: auto;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text, #ffffff);
}

/* Watch now badges - no border, no background */
.media-facts-group--watch-now .media-app-links {
  width: auto;
}

.media-facts-group--watch-now .media-app-link-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.media-facts-group--watch-now .media-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: auto;
  padding: 0.2rem 0.5rem 0.2rem 0;
  border-radius: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text, #ffffff);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.media-facts-group--watch-now .media-app-link:hover {
  background: transparent !important;
  border: none !important;
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.media-facts-group--watch-now .media-app-link-logo {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Ratings row - no border, no background, logo + rating format */
.media-ratings-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.media-ratings-row .rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: auto;
  padding: 0.2rem 0.4rem 0.2rem 0;
  border-radius: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text, #ffffff) !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.media-ratings-row .rating-pill:hover {
  background: transparent !important;
  border: none !important;
  filter: brightness(1.25);
  transform: translateY(-1px);
}

.media-ratings-row .rating-pill-icon {
  width: auto;
  height: 1.35rem;
  max-width: 2.5rem;
  object-fit: contain;
  border-radius: 3px;
  flex: 0 0 auto;
}

.media-ratings-row .rating-pill--personal {
  padding: 0.2rem 0;
  color: var(--muted, #94a3b8) !important;
}

.media-ratings-row .rating-pill--personal:hover {
  color: var(--accent, #38bdf8) !important;
}

.media-ratings-row .rating-pill--personal.has-rating {
  color: var(--accent, #38bdf8) !important;
}

.media-facts-details {
  width: 100%;
}

.media-facts-summary {
  outline: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  pointer-events: none; /* Disable collapse on desktop */
}

.media-facts-summary::-webkit-details-marker {
  display: none;
}

.media-facts-visible-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-3);
  width: 100%;
}

.media-facts-expand-btn {
  display: none; /* Hide on desktop */
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: var(--space-1);
  align-items: center;
  gap: 0.3rem;
  user-select: none;
  align-self: center;
}

.media-facts-expand-btn::before {
  content: "Expand";
}

.media-facts-expand-btn::after {
  content: " ▼";
  font-size: 0.55rem;
}

.media-facts-details[open] .media-facts-expand-btn::before {
  content: "Collapse";
}

.media-facts-details[open] .media-facts-expand-btn::after {
  content: " ▲";
}

.media-facts-details[open] .media-facts-rail--sidebar {
  margin-top: var(--space-4);
}

.media-app-links {
  display: flex;
  justify-content: center;
  width: 100%;
}

.media-app-links--inline {
  width: auto;
  margin-left: auto;
}

.media-app-links--inline .media-app-link-row {
  justify-content: flex-end;
}

.media-app-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.media-app-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.media-app-link-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.media-app-link-logo[hidden] + span {
  margin-left: 0.2rem;
}

.media-app-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.media-app-link--disabled,
.media-app-link--disabled:hover {
  border-color: color-mix(in srgb, var(--line), transparent 18%);
  color: var(--muted);
  cursor: default;
  opacity: 0.46;
}

.is-loading-metadata .immersive-overview {
  max-width: 58ch;
  color: var(--muted);
}

.media-detail-page .immersive-title {
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: 0;
  align-self: center;
  justify-self: center;
  text-align: center;
}

.media-detail-page .immersive-logo {
  max-height: clamp(76px, 9vw, 132px);
  max-width: min(420px, 92%);
  width: auto;
  object-fit: contain;
  object-position: center;
  align-self: center;
  justify-self: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
}

.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;
}

.media-detail-page .immersive-overview {
  max-width: none;
  color: color-mix(in srgb, var(--text), transparent 8%);
  line-height: 1.55;
}

.media-detail-page .immersive-back-button {
  border: 1px solid color-mix(in srgb, var(--line-strong), transparent 20%);
  border-radius: 999px;
  background: rgba(7, 10, 13, 0.72);
  color: var(--text);
  padding: 0.45rem 0.8rem;
  font-weight: 800;
}

.media-detail-page .progress-section,
.media-detail-page .seasons-section,
.media-detail-page .episodes-section {
  margin-top: 0.75rem;
}

.media-detail-page .cast-section {
  border-top: 0;
  padding-top: 0;
  gap: 0.4rem;
}

.media-detail-page .horizontal-scroll-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, 158px);
  gap: var(--space-3);
  overflow-x: auto;
  padding: 0.25rem 0 0.8rem;
}

.media-detail-page .season-poster-card {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.media-detail-page .season-poster-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.media-detail-page .show-episode-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.media-detail-page .immersive-episode-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  min-width: 0;
}

.media-detail-page .episode-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.media-detail-page .immersive-episode-actions {
  min-width: 0;
  justify-items: start;
  align-self: end;
}

.media-detail-page .watched-pill {
  white-space: normal;
}

@media (max-width: 760px) {
  .media-detail-page .immersive-header,
  .media-detail-page .immersive-header:has(.media-facts-rail--sidebar) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .media-detail-page .immersive-header .media-facts-rail--sidebar {
    grid-column: 2;
    grid-row: 2;
  }

  .media-facts-rail--sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-2);
  }

  .media-detail-page .immersive-title {
    font-size: 1.7rem;
  }

  .media-detail-page .immersive-meta {
    grid-template-rows: auto;
  }
}

/* Public demo guardrails -------------------------------------------------- */
.demo-mode-banner {
  margin: 0 0 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-muted, #64748b);
  font-size: 0.68rem;
  line-height: 1.4;
}

.sidebar-footer .demo-mode-banner {
  width: 100%;
  text-align: left;
}

.demo-settings-readonly-notice {
  margin-bottom: var(--space-3);
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--radius);
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-muted, #64748b);
  font-size: 0.82rem;
  line-height: 1.45;
}

body.demo-mode #settings-view.demo-settings-readonly input:not(#settingsSectionSelect),
body.demo-mode #settings-view.demo-settings-readonly select:not(#settingsSectionSelect),
body.demo-mode #settings-view.demo-settings-readonly textarea,
body.demo-mode #settings-view.demo-settings-readonly button:not(#settingsSectionSelect) {
  cursor: not-allowed;
}

body.demo-mode #sidebarOnboardingCta,
body.demo-mode #sidebarSyncAttention,
body.demo-mode #manualWatchReviewButton {
  display: none !important;
}

@media (max-width: 640px) {
  .media-detail-page {
    padding: var(--space-3);
  }

  .media-detail-page .immersive-header,
  .media-detail-page .immersive-header:has(.immersive-sidebar) {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    gap: var(--space-3);
    margin-top: var(--space-2);
    align-items: flex-start;
  }

  .media-detail-page .immersive-poster-img {
    width: 130px;
    height: auto;
    aspect-ratio: 2 / 3;
    justify-self: start;
    grid-row: 1 / span 4;
    grid-column: 1;
  }

  .media-detail-page .immersive-logo {
    display: block;
    max-width: 100%;
    max-height: 3.5rem;
    object-fit: contain;
    margin: 0 auto;
  }

  .media-detail-page .immersive-title {
    font-size: 1.3rem;
  }

  .media-detail-page .immersive-title,
  .media-detail-page .immersive-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    text-align: center;
  }

  .media-detail-page .immersive-meta {
    display: contents;
  }

  .media-detail-page .immersive-meta .immersive-title {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    text-align: center;
  }

  .media-detail-page .immersive-meta .immersive-subtitle {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    margin-top: -0.25rem;
  }

  .media-detail-page .ratings-row {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .media-detail-page .immersive-header .immersive-sidebar {
    display: contents;
  }

  .media-detail-page #seerrRequestContainer {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-content: center;
  }

  .media-detail-page .media-app-links {
    grid-column: 2;
    grid-row: 4;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    margin-top: 0;
  }

  .media-detail-page .progress-section {
    grid-column: 1 / -1;
    grid-row: 6;
    width: 100%;
  }

  .media-detail-page .immersive-overview {
    grid-column: 1 / -1;
    grid-row: 7;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
  }

  .media-detail-page .immersive-header .media-facts-details {
    grid-column: 1 / -1;
    grid-row: 8;
    width: 100%;
    justify-self: auto;
  }

  .media-detail-page .media-detail-bottom-stack {
    display: contents;
  }

  .media-detail-page .media-app-link-row {
    justify-content: center;
  }

  .rating-pill {
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
  }

  .media-facts-rail--sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: var(--space-2) var(--space-4);
  }

  .media-detail-page .horizontal-scroll-row {
    grid-auto-columns: minmax(80px, 100px);
  }

  .media-detail-page .immersive-overview::after {
    display: none;
  }

  /* Mobile collapsible metadata section overrides */
  .media-facts-details {
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
    margin-top: var(--space-4);
  }

  .media-facts-summary {
    pointer-events: auto; /* Enable collapse on mobile */
  }

  .media-facts-visible-row {
    gap: var(--space-2) var(--space-4);
  }

  .media-facts-expand-btn {
    display: inline-flex; /* Show toggle button on mobile */
  }

  .media-facts-details[open] .media-facts-rail--sidebar,
  .media-facts-details[open] .media-facts-panel {
    margin-top: var(--space-3);
  }

  .media-fact-table-row {
    grid-template-columns: 110px 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .media-detail-page .immersive-header:has(.immersive-sidebar) {
    grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr);
  }
}

@media (max-width: 1400px) {
  .media-detail-page .show-episode-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .media-detail-page .show-episode-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .media-detail-page .show-episode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.topbar {
  display: none;
}

.brand-block,
.topnav,
.section-heading,
.explorer-controls,
.timeline-toolbar,
.week-controls,
.logs-actions,
.segmented-control,
.settings-actions,
.import-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand-block {
  min-width: 0;
}

.session-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #0b0f12, 0 0 0 3px var(--line);
}

.session-dot.unlocked {
  background: #10b981;
}

.session-dot.locked {
  background: #f43f5e;
}

.eyebrow {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hamburger-button {
  display: none;
}

.nav-header-mobile {
  display: none;
}

.topnav {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100%;
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  overflow: visible;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel-3);
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 5;
}

.sidebar-scrollable {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Vertical-only scroll container: next to overflow-y: auto, a missing
     overflow-x would compute to `auto`, and a stray wide item (e.g. an
     indented Settings sub-item) would surface an unwanted horizontal
     scrollbar in the left menu. */
  overflow-x: hidden;
  /* Keep the sidebar's own scrollbar slim (e.g. when the Settings menu
     expands past the viewport) instead of using the thick browser default. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.sidebar-scrollable::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: 3px;
}

@media (max-width: 760px) {
  .sidebar-scrollable {
    display: contents;
  }
}

.nav-tab,
.settings-tab,
.segment-button,
.button-primary,
.button-ghost,
.button-danger,
.icon-button {
  min-height: 2.05rem;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.45rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.nav-tab,
.segment-button,
.settings-tab,
.button-ghost,
.icon-button {
  background: transparent;
  color: var(--soft);
}

.nav-tab.active,
.settings-tab.active,
.segment-button.active {
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.button-primary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
}

.button-primary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.button-ghost,
.icon-button {
  border-color: var(--line-strong);
  background: #111820;
}

.button-danger {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: #fda4af;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.icon-button {
  display: inline-grid;
  width: 2.1rem;
  place-items: center;
  padding: 0;
  font-size: 0.95rem;
}

.up-next-sync-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 1.85rem;
  min-height: 1.85rem;
  gap: 0.35rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.up-next-sync-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.up-next-sync-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.up-next-sync-label {
  display: none;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.up-next-sync-button[aria-busy="true"] .up-next-sync-label {
  display: inline;
}

.up-next-sync-button[aria-busy="true"] .up-next-sync-icon {
  animation: up-next-sync-spin 850ms linear infinite;
}

.media-up-next-show-btn[aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
}

.media-up-next-show-btn[aria-busy="true"] svg {
  animation: up-next-sync-spin 850ms linear infinite;
}

@keyframes up-next-sync-spin {
  to { transform: rotate(360deg); }
}

.up-next-dismissed-button {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  width: auto;
  min-width: 0;
  min-height: 1.55rem;
  padding: 0.12rem 0.55rem 0.12rem 0.42rem;
  border-color: var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted), transparent 90%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.up-next-dismissed-icon {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  opacity: 0.85;
}

.up-next-dismissed-button:hover:not(:disabled),
.up-next-dismissed-button:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--muted), transparent 82%);
}

.settings-modal.up-next-dismissed-modal {
  width: min(2200px, 98vw);
}

.up-next-dismissed-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.up-next-dismissed-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.shared-media-card--up-next-dismissed {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 11rem;
}

.shared-media-card--up-next-dismissed .shared-media-card-actions {
  width: 100%;
  margin-top: auto;
}

.shared-media-card--up-next-dismissed .shared-media-card-actions .button-ghost {
  width: 100%;
}

.dashboard-up-next-card.up-next-card-removing {
  animation: up-next-card-removing 850ms ease-in-out infinite alternate;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Keep the selected Up Next card visible while its watch request is saving.
   The pulse is deliberately restrained: it acknowledges the action without
   suggesting that the card has already been removed. */
.dashboard-up-next-card.up-next-card-saving {
  animation: up-next-card-saving 1100ms ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}

@keyframes up-next-card-saving {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.58; transform: scale(0.985); }
}

@keyframes up-next-card-removing {
  from { opacity: 0.58; transform: scale(0.985); }
  to { opacity: 0.9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-up-next-card.up-next-card-saving {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
}

@media (max-width: 1500px) {
  .up-next-dismissed-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .up-next-dismissed-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .up-next-dismissed-card-grid {
    grid-template-columns: 1fr;
  }
}

.button-ghost:hover,
.nav-tab:hover,
.settings-tab:hover,
.segment-button:hover,
.icon-button:hover {
  border-color: var(--accent);
  color: #f4f8fb;
}

.button-danger:hover:not(:disabled) {
  border-color: rgba(244, 63, 94, 0.7);
  background: transparent;
  color: #fff1f2;
}

.button-danger:active:not(:disabled) {
  background: transparent;
}

.button-primary:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--blue), transparent 40%);
  color: var(--blue);
}

.test-connection-button[data-tone="loading"] {
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.test-connection-button[data-tone="success"] {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
}

.test-connection-button[data-tone="error"] {
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.14);
  color: #fecdd3;
}

.page-shell {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 var(--control-inline-padding) var(--control-inline-padding);
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
}

/* The locked login is a standalone shell, matching the full-page onboarding
   flow instead of exposing dashboard navigation before authentication. */
body.auth-locked .page-shell {
  display: flex;
  flex-direction: column;
}

body.auth-locked .topnav,
body.auth-locked #pageTopbar {
  display: none !important;
}

/* Keep the navigation footprint stable while the session check resolves. The
   locked shell must not expose controls, but removing the sidebar entirely
   moves .page-shell from x=192 to x=0 and back, producing a large CLS spike
   on every authenticated reload. Visibility preserves the desktop sidebar
   width and the collapsed mobile bar height without accepting pointer input. */
body.auth-locked .topnav {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

.auth-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* The locked shell keeps the hidden desktop sidebar in the flex layout to
   avoid a reload shift, but the login itself is a viewport-level surface. The
   page shell would otherwise center it in the remaining right-hand column,
   leaving the logo and form half a sidebar width off-centre. */
@media (min-width: 761px) {
  body.auth-locked .auth-view {
    position: relative;
    left: calc(var(--sidebar-width) / -2);
  }
}

.auth-brand {
  display: flex;
  flex: 1 1 0;
  min-height: 5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.auth-brand-logo {
  width: min(100%, 22rem);
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  /* theme-boot.js sets src; reserve the space so nothing shifts before it does. */
  aspect-ratio: 1260 / 205;
}

.auth-footer-bar {
  flex: 1 1 0;
}

.app-shell {
  display: grid;
  gap: var(--space-3);
}

.view-panel,
.auth-form,
.settings-pane,
.settings-content,
.import-preview,
.history-table,
.db-status,
.explorer-panel,
.folder-children,
.episode-list,
.insight-list {
  display: grid;
  gap: 0;
}

.page-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  width: calc(100% + (var(--control-inline-padding) * 2));
  height: var(--right-topbar-height);
  min-height: var(--right-topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-inline: calc(var(--control-inline-padding) * -1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--brand-menu);
  padding: var(--right-topbar-content-offset) var(--control-inline-padding);
}

.page-shell[data-active-view="dashboard"] .page-topbar {
  display: none;
}

.page-shell[data-active-view="dashboard"] .live-panel {
  padding-top: var(--space-3);
}

.page-shell:not([data-active-view="dashboard"]) .page-topbar + .view-panel {
  padding-top: var(--space-2);
}

.page-topbar-title,
.page-topbar-actions,
#mediaDetailActions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.page-topbar-title {
  flex: 1 1 auto;
}

.page-topbar-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.page-topbar-copy h1 {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-topbar-copy span {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.page-topbar-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
  overflow: hidden;
  max-width: 60%;
}

#mediaDetailActions {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-end;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.page-topbar .immersive-back-button {
  min-height: 1.8rem;
  align-self: center;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-muted, var(--text)) !important;
  padding: 0.2rem 0.4rem !important;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none !important;
}

.page-topbar .immersive-back-button:hover {
  background: transparent !important;
  color: var(--primary) !important;
}

.view-control-source {
  display: none;
}

.topbar-controls-menu {
  display: flex;
  min-width: 0;
}

.topbar-controls-panel {
  display: flex;
  min-width: 0;
  align-items: center;
}

.topbar-controls-trigger {
  display: none;
}

.glass-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-panel,
.p-section,
.stat-card {
  padding: var(--space-3);
}

.auth-panel {
  display: grid;
  flex: 0 0 auto;
  width: min(100%, 440px);
  max-width: 440px;
  margin: 0 auto;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.auth-panel.glass-panel,
html.light-mode .auth-panel.glass-panel {
  background: var(--brand-menu);
}

.auth-panel #message:empty {
  display: none;
}

.auth-panel .field,
html.light-mode .auth-panel .field {
  background: var(--brand-main);
}

.auth-panel-logo {
  justify-self: center;
  height: 34px;
  width: auto;
  margin-bottom: var(--space-1);
}

.auth-panel #authPanelSignIn,
.auth-panel #claimPanel {
  display: grid;
  gap: var(--space-3);
  text-align: left;
}

.auth-panel .eyebrow {
  text-align: center;
}

.auth-panel h2 {
  text-align: center;
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.auth-panel .muted-copy {
  text-align: center;
  font-size: 0.85rem;
}

.auth-panel .auth-form {
  margin-top: var(--space-2);
  gap: var(--space-3);
  min-width: 0;
}

.auth-panel .auth-form .field-label,
.auth-panel .auth-form .field {
  min-width: 0;
}

.auth-panel .button-primary {
  min-height: 2.6rem;
  font-size: 0.85rem;
  justify-self: stretch;
}

.auth-recovery-help {
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
}

.auth-recovery-help > summary {
  color: var(--blue);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.auth-recovery-help > summary::-webkit-details-marker {
  display: none;
}

.auth-recovery-help > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.auth-recovery-help-body {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.auth-recovery-help-body p {
  margin: 0;
}

.auth-recovery-help-body strong,
.auth-recovery-help-body code {
  color: var(--text);
}

.auth-recovery-help-body code {
  padding: 0.08rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
}

.auth-recovery-note {
  color: var(--muted);
  font-style: italic;
}

.muted-copy,
.endpoint-box p,
.db-status p,
.section-heading span,
.movie-card span,
.movie-card small,
.folder-trigger span,
.season-trigger span,
.episode-row time,
.now-card small,
.now-card time {
  color: var(--muted);
  line-height: 1.45;
}

.section-heading {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.section-heading p,
.section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
}

.timeline-toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.explorer-controls {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: 0;
}

.explorer-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.explorer-heading-title {
  flex: 1;
  min-width: 0;
}

.explorer-heading .explorer-controls {
  margin-left: auto;
}

.dashboard-history-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.dashboard-history-title {
  min-width: 0;
}

.dashboard-history-filter {
  justify-self: center;
}

.compact-field {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.compact-field span {
  color: var(--muted);
  font-size: 0.81rem;
  font-weight: 800;
}

.explorer-hide-toggle {
  cursor: pointer;
  user-select: none;
  grid-template-columns: auto auto;
  justify-content: start;
}

.explorer-hide-toggle span {
  white-space: nowrap;
}

.explorer-hide-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  cursor: pointer;
  margin: 0 0 0 0.2rem;
}

.week-picker {
  display: grid;
  grid-template-columns: auto minmax(9.5rem, 1fr);
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.field-label,
.search-box {
  display: grid;
  gap: 0.35rem;
  color: #dbe3ea;
  font-size: var(--fs-field-label);
  font-weight: 800;
}

.search-box {
  min-width: min(380px, 100%);
}

.field {
  width: 100%;
  min-height: 2.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--field);
  padding: 0.45rem 0.6rem;
  color: var(--text);
  outline: none;
}

.field:focus {
  border-color: #4b96e6;
  box-shadow: 0 0 0 2px rgba(75, 150, 230, 0.18);
}

.auth-panel .field:focus-visible {
  outline: none;
}

.message {
  min-height: 1.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.message[data-tone="success"],
#settingsStatus[data-tone="success"] {
  color: #72e3b8;
}

.message[data-tone="error"],
#settingsStatus[data-tone="error"] {
  color: #fda4af;
}

.status-pill,
.source-badge,
.history-action-pill,
.target-pill,
.debug-badge,
.help-badge,
.token-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #10161d;
  padding: 0.22rem 0.48rem;
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.status-pill.is-clickable {
  cursor: pointer;
}

.status-pill.is-clickable:hover {
  border-color: var(--accent, var(--line-strong));
}

.source-badge {
  border: 0;
}

.source-badge--icon {
  gap: 0.3rem;
  padding: 0.22rem 0.5rem 0.22rem 0.4rem;
}

.source-badge--link {
  cursor: pointer;
  text-decoration: none;
}

.source-badge--link:hover,
.source-badge--link:focus-visible {
  color: var(--accent);
}

.source-badge--disabled {
  cursor: default;
  opacity: 0.46;
}

.source-badge-icon {
  width: 0.85rem;
  height: 0.85rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.theme-aware-icon-set {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.theme-aware-icon-set .theme-aware-icon--light {
  display: none;
}

.theme-aware-icon-set .theme-aware-icon--dark {
  display: block;
}

html.light-mode .theme-aware-icon-set .theme-aware-icon--light {
  display: block;
}

html.light-mode .theme-aware-icon-set .theme-aware-icon--dark {
  display: none;
}

.source-badge-icon-set {
  width: 1.35rem;
  height: 0.72rem;
}

.source-badge-icon-set .source-badge-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.part-watched-app-badge {
  cursor: pointer;
  font: inherit;
}

.rewatch-badge {
  border-color: var(--line-strong);
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
  gap: 0.25rem;
}

.episode-watch-history {
  display: grid;
  gap: 0.4rem;
}

.episode-watch-history-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.episode-watch-history-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.movie-watch-history-list {
  max-height: 1.7rem;
  overflow: hidden;
  transition: max-height 180ms ease-out;
}

.movie-watch-history-list > .episode-watch-history-row {
  flex: 0 0 auto;
}

.movie-watch-history-list > [hidden] {
  display: none !important;
}

.movie-rewatch-history.is-expanded .movie-watch-history-list {
  max-height: 20rem;
}

.watch-history-toggle-item {
  list-style: none;
  flex: 0 0 auto;
}

.movie-watch-history-list > .episode-watch-history-row + .episode-watch-history-row::before {
  content: "-";
  color: var(--muted);
  font-weight: 800;
}

.watch-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.35rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.watch-history-toggle:hover,
.watch-history-toggle:focus-visible {
  color: var(--accent);
}

.watch-history-toggle-icon {
  font-size: 0.71rem;
}

.episode-watch-history-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.episode-watch-history-date {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--soft);
}

/* Season grid cards are narrow: wrap the source badges under the date
   instead of letting them run past the card edge. */
.immersive-episode-row .episode-watch-history-row {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.part-watched-app-badge:hover,
.part-watched-app-badge:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.history-sync-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.history-action-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-status-dot {
  display: inline-flex;
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
  cursor: help;
}

.sync-status-dot--success {
  color: #34d399;
  background: #34d399;
}

.sync-status-dot--pending {
  color: #f59e0b;
  background: #f59e0b;
}

.sync-status-dot--error {
  color: #fb7185;
  background: #fb7185;
}

.status-ready,
.status-success,
.target-pill[data-status="success"] {
  border-color: rgba(16, 185, 129, 0.48);
  background: rgba(16, 185, 129, 0.12);
  color: #9ff1cf;
}

.status-muted {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
}

.status-error,
.target-pill[data-status="error"] {
  border-color: rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.12);
  color: #fecdd3;
}

.status-warning,
.target-pill[data-status="pending"] {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.media-sync-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.media-sync-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.retry-sync-btn {
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  min-height: 1.4rem;
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--soft);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.retry-sync-btn:hover {
  border-color: var(--yellow);
  background: rgba(245, 158, 11, 0.1);
  color: #fff;
}

.sync-job-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.sync-job-actions .button-ghost,
.sync-job-actions .retry-sync-btn {
  min-height: 1.85rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
}

/* Slim name-only availability pills */
.avail-pills-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.avail-pill {
  font-size: 0.74rem !important;
  padding: 0.12rem 0.5rem !important;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.avail-pill[data-avail-issue] {
  transition: filter 120ms ease;
}

.avail-pill[data-avail-issue]:hover {
  filter: brightness(1.25);
}

/* Unreleased episode pill */
.unreleased-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
  padding: 0.25rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
  font-style: italic;
}

.immersive-episode-row.is-unreleased {
  opacity: 0.55;
}

/* Availability issue popup */
.avail-issue-popup {
  position: absolute;
  z-index: 9999;
  width: 280px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  background: #0f1419;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
  padding: 0.85rem 1rem 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.avail-issue-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
  border-radius: 4px;
  transition: color 120ms ease;
}

.avail-issue-close:hover {
  color: var(--text);
}

.avail-issue-headline {
  display: block;
  color: #fde68a;
  font-size: 0.8rem;
  line-height: 1.4;
  padding-right: 1.2rem;
}

.avail-issue-fix-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.avail-issue-steps {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.avail-issue-steps li {
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.import-terminal.compact-terminal {
  min-height: 5.5rem;
  max-height: 9rem;
}

/* Settings -> Tools -> Database Repairs -> Watch-State Aliases */
.playstate-alias-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.playstate-alias-show {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.playstate-alias-show h4 {
  margin: 0;
  font-size: 1rem;
}

.playstate-alias-ids,
.playstate-alias-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.playstate-alias-warning {
  margin: 0;
  color: var(--yellow);
  font-size: 0.85rem;
}

.playstate-alias-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: 0.85rem;
}

.playstate-alias-rows li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.playstate-alias-rows li small {
  grid-column: 2 / -1;
  color: var(--muted);
}

@media (max-width: 760px) {
  .playstate-alias-rows li {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .playstate-alias-rows li > span:nth-child(3) {
    grid-column: 2;
  }
}

#tautulliPreviewSummary,
#tautulliImportSummary {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-plex {
  border-color: rgba(234, 179, 8, 0.45);
}

.source-emby {
  border-color: rgba(16, 185, 129, 0.45);
}

.source-jellyfin {
  border-color: rgba(75, 150, 230, 0.55);
}

.source-plembfin {
  border-color: rgba(59, 130, 246, 0.55);
}

.source-meter .source-plex,
.timeline-event.source-plex::before {
  background: #eab308;
}

.source-meter .source-emby,
.timeline-event.source-emby::before {
  background: #10b981;
}

.source-meter .source-jellyfin,
.timeline-event.source-jellyfin::before {
  background: #4b96e6;
}

.source-meter .source-plembfin,
.timeline-event.source-plembfin::before {
  background: #3b82f6;
}

.now-playing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.idle-state,
.now-card,
.ranking-row,
.episode-row,
.endpoint-box,
.empty-log,
.drop-zone,
.movie-card,
.folder-card,
.season-card,
.folder-trigger,
.season-trigger,
.day-slot,
.timeline-event {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.idle-state {
  display: grid;
  min-height: 4rem;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.idle-state b {
  color: var(--soft);
  font-size: 0.85rem;
}

.now-card {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  min-height: 8.75rem;
  gap: var(--space-2);
  padding: var(--space-3);
}

.now-card-content {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.live-now-card {
  appearance: none;
  border: 1px solid #243641;
  border-radius: var(--radius);
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.live-now-card:hover {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.live-now-card:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.now-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.now-card b {
  overflow: hidden;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-poster,
.now-poster,
.history-poster,
.explorer-poster,
.explorer-folder-poster,
.explorer-episode-poster {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--poster-radius);
  background: var(--panel-3);
  object-fit: cover;
  aspect-ratio: 2 / 3;
}

.explorer-search-box {
  flex: 1 1 10rem;
  min-width: 8rem;
}

.now-poster {
  width: 4.6rem;
  aspect-ratio: 2 / 3;
}

.history-title-cell {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.history-title-cell > span {
  min-width: 0;
}

.folder-title span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
}

.history-poster {
  width: 2.35rem;
  aspect-ratio: 2 / 3;
}

.explorer-poster {
  width: 3.5rem;
  aspect-ratio: 2 / 3;
}

/* Large movie poster grid (Image 2 style) */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--poster-width, 160px), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.movie-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: var(--space-2);
  text-decoration: none;
}

.movie-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  background: var(--panel-3);
}

.movie-card-body {
  display: grid;
  gap: 0.25rem;
  align-items: start;
}

.movie-card-body b {
  font-size: 0.95rem;
}

/* Now-playing large card: poster left, details right - mirrors part-watched layout */
/* Deliberately the same geometry as the watch history page cards: no card
   padding and no gap, so the poster sits flush against the top, left and bottom
   edges, with the card's own overflow clipping it to the rounded corners. The
   text side carries the padding instead. */
.now-card-large {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 140ms ease, background 140ms ease;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  text-align: left;
}

.now-poster-large-wrapper {
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  height: 100%;
  aspect-ratio: 2/3;
  /* Flush against the card edge, so it carries neither its own rounding nor a
     shadow that would read as a gap. */
  border-radius: 0;
  overflow: hidden;
  display: block;
}

.now-poster-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  display: block;
}

.now-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  /* The card itself has no padding so the poster can reach its edges; the text
     side owns the inset instead. */
  padding: 0.85rem;
  justify-content: space-between;
}

.now-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.now-card-title {
  font-size: var(--fs-now-title);
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-card-episode {
  font-size: var(--fs-now-episode);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--fs-now-meta);
  color: #9b9b9b;
}

.now-card-meta > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.now-card-progress-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.now-card-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.now-card-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 72%, white)
  );
  border-radius: 3px;
  transition: width 0.3s ease;
}

.now-card-progress-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
}

.now-meta {
  display: grid;
  gap: 0.35rem;
}

/* History list in dashboard uses same movie-grid */
.dashboard-history {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.sync-panel {
  display: grid;
  gap: var(--space-3);
}

.sync-heading .logs-actions {
  align-items: center;
}

.sync-jobs-panel,
.sync-history-panel {
  display: grid;
  gap: var(--space-3);
}

.sync-job-card,
.sync-history-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: var(--space-3);
}

.sync-job-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.sync-history-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.sync-history-summary::-webkit-details-marker {
  display: none;
}

.sync-history-summary b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-history-card[open] .sync-history-summary {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.sync-history-card[open] .sync-job-main {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sync-job-title {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.sync-job-title b,
.sync-job-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-job-title span {
  color: var(--muted);
  font-size: 0.78rem;
}

.sync-job-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.sync-job-meta div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-3);
  padding: var(--space-2);
}

.sync-job-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.sync-job-meta b {
  display: block;
  overflow-wrap: anywhere;
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.sync-target-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sync-telemetry {
  max-height: 9rem;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #090c0e;
  color: #cbd5e1;
  padding: var(--space-2);
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.explorer-folder-poster,
.explorer-episode-poster {
  width: 3.6rem;
  aspect-ratio: 2 / 3;
}

.explorer-episode-poster {
  width: 2.5rem;
}

.folder-trigger .accordion-chevron {
  align-self: start;
  margin-top: 0.1rem;
}

.folder-trigger .explorer-folder-poster {
  border-radius: var(--library-poster-radius);
}

.poster-fallback::before {
  content: "";
  display: block;
  width: 42%;
  height: 42%;
  margin: 58% auto 0;
  border-radius: 2px;
  background: var(--line-strong);
  transform: translateY(-50%);
}

/* Artwork that has not decoded yet shows a moving sheen instead of an empty
   box, so a grid being scrolled reads as loading rather than broken. The
   bitmap paints over this the moment it arrives; `is-loaded` then stops it. */
img.poster-img:not(.is-loaded) {
  background-color: var(--skeleton-base);
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    var(--skeleton-sheen) 42%,
    var(--skeleton-sheen) 56%,
    transparent 78%
  );
  background-repeat: no-repeat;
  background-size: 250% 100%;
  animation: poster-skeleton 1.2s ease-in-out infinite;
}

@keyframes poster-skeleton {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  img.poster-img:not(.is-loaded) {
    animation: none;
  }
}

.stream-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #9ff1cf;
  font-size: var(--fs-badge);
  font-weight: 850;
}

.stream-indicator::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--green);
}

/* A paused session is still live - the media server is still holding it open -
   so the card stays, but it must not read as actively playing. */
.stream-indicator.is-paused {
  color: var(--muted);
}

.stream-indicator.is-paused::before {
  background: var(--muted);
}

.now-card-progress-fill.is-paused {
  background: var(--muted);
}

.progress-track,
.mini-bar {
  overflow: hidden;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--panel-3);
}

.progress-track span,
.mini-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.timeline-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
  padding: var(--space-2) var(--space-3);
}

.timeline-summary b {
  font-size: 0.9rem;
}

.timeline-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(10rem, 1fr));
  gap: var(--space-2);
  overflow-x: auto;
}

.day-slot {
  display: grid;
  align-content: start;
  min-height: 18rem;
  gap: var(--space-2);
  padding: var(--space-2);
}

.day-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem var(--space-2);
}

.day-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day-head b {
  color: var(--text);
  font-size: 0.88rem;
}

.day-head em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #d7dee6;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 900;
}

.source-meter {
  display: flex;
  overflow: hidden;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--panel-3);
}

.source-meter span {
  min-width: 0.45rem;
}

.empty-meter {
  opacity: 0.5;
}

.day-events {
  display: grid;
  gap: 0.35rem;
}

.timeline-event {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.25rem;
  padding: 0.5rem 0.55rem 0.5rem 0.7rem;
  color: inherit;
  text-align: left;
}

.timeline-event::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.35rem;
  width: 2px;
  border-radius: 999px;
  background: var(--line-strong);
}

.timeline-event:hover,
.movie-card:hover,
.folder-trigger:hover,
.season-trigger:hover,
.episode-row:hover,
.help-menu-item:hover {
  border-color: var(--accent);
  background: #17202a;
}

.timeline-event b {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
}

.timeline-event small,
.timeline-event time,
.empty-day {
  color: var(--muted);
  font-size: 0.74rem;
}

.compact-empty {
  padding: var(--space-2) var(--space-3);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.stats-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3);
}

.stats-toolbar p {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

.stats-toolbar-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stats-toolbar span {
  color: var(--muted);
  font-size: 0.78rem;
}

.stats-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Stats: KPI strip */

.stats-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.stats-kpi-card {
  min-width: 0;
  padding: var(--space-3) 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stats-kpi-card > span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-kpi-card > b {
  display: block;
  font-size: clamp(1.15rem, 6vw, 1.7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stats-kpi-card > small {
  display: block;
  color: var(--muted);
  font-size: 0.80rem;
}

.stats-kpi-loading {
  color: var(--muted) !important;
  animation: stats-kpi-pulse 1.2s ease-in-out infinite;
}

@keyframes stats-kpi-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-kpi-loading {
    animation: none;
    opacity: 0.6;
  }
}

/* Stats: two-column body */

.stats-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 960px) {
  .stats-body-grid {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  }
}

.stats-leaderboard-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-lb-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* #1 featured leader */
.stats-lb-leader {
  display: grid;
  grid-template-columns: 7.5rem 1.8rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: 0;
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  align-items: stretch;
  overflow: hidden;
}

.stats-lb-leader[data-stats-media-href] {
  cursor: pointer;
}

.stats-lb-leader[data-stats-media-href]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.stats-lb-leader-poster-wrap {
  position: relative;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.stats-lb-leader-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: 100%;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  object-fit: cover;
  background: var(--panel);
  border: 0;
  display: block;
}

.stats-lb-rank-badge {
  align-self: start;
  justify-self: start;
  min-width: 1.8rem;
  padding: var(--space-2) 0 0;
  background: transparent;
  color: var(--muted);
  border: 0;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stats-lb-leader-copy {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.5rem;
  padding: var(--space-2);
}

.stats-lb-main-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}

.stats-lb-leader-copy .stats-label-accent {
  display: block;
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-lb-leader-copy h3 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.stats-lb-leader-copy p {
  margin: 0;
  color: var(--soft);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stats-lb-leader-copy .stats-review-facts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stats-lb-card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* ranked rows #2-#10 */
.stats-lb-podium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.stats-lb-podium-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 4.1rem 1.8rem minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-2);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-3);
  overflow: hidden;
}

.stats-lb-podium-card[data-stats-media-href] {
  cursor: pointer;
}

.stats-lb-podium-card[data-stats-media-href]:hover .stats-lb-podium-title {
  color: var(--blue);
}

.stats-lb-podium-card[data-stats-media-href]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.stats-lb-podium-poster-wrap,
.stats-lb-row-poster-wrap {
  position: relative;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.stats-lb-podium-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: 100%;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  object-fit: cover;
  background: var(--panel-3);
  border: 0;
  display: block;
}

.stats-lb-podium-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.45rem;
  padding: var(--space-2);
}

.stats-lb-podium-title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-lb-podium .stats-review-facts,
.stats-lb-row .stats-review-facts {
  gap: 0.35rem;
}

.stats-lb-podium .stats-review-facts b,
.stats-lb-row .stats-review-facts b {
  padding: 0.16rem 0.5rem;
  font-size: 0.74rem;
}

.stats-lb-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-lb-row {
  display: grid;
  grid-template-columns: 3.1rem 1.8rem minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-2);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-3);
  overflow: hidden;
}

.stats-lb-row[data-stats-media-href] {
  cursor: pointer;
}

.stats-lb-row[data-stats-media-href]:hover .stats-lb-row-title {
  color: var(--blue);
}

.stats-lb-row[data-stats-media-href]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.stats-lb-row-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: 100%;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  object-fit: cover;
  background: var(--panel-3);
  border: 0;
  display: block;
}

.stats-lb-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.35rem;
  padding: var(--space-2);
}

.stats-lb-row-title {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* Stats: insight right column */

.stats-insight-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-insight-col .stats-kpi-strip {
  display: flex;
  flex-wrap: wrap;
}

.stats-insight-col .stats-kpi-strip .stats-kpi-card {
  flex: 1 1 30%;
}

/* Movies vs TV split */
.stats-split-title {
  margin: 0 0 var(--space-3);
  font-size: 1.02rem;
  font-weight: 800;
}

.stats-split-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  margin-bottom: var(--space-3);
}

.stats-split-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.stats-split-labels > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stats-split-labels span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--soft);
  font-size: 0.78rem;
}

.stats-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stats-split-labels b {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.stats-split-labels b em {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  margin-left: 0.3rem;
}

/* Platform rows */
.stats-platform-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-platform-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stats-platform-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.84rem;
  gap: var(--space-2);
}

.stats-platform-row-head b {
  font-weight: 700;
  color: var(--text);
}

.stats-platform-row-head em {
  color: var(--soft);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-platform-row-head em b {
  color: var(--text);
  font-weight: 700;
}

/* Bookends */
.stats-bookends-title {
  margin: 0 0 var(--space-3);
  font-size: 1.02rem;
  font-weight: 800;
}

.stats-bookends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.stats-bookends > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stats-bookends span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-bookends b {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.stats-bookends small {
  display: block;
  color: var(--muted);
  font-size: 0.80rem;
}

/* Stats: shared meter */

.stats-review-facts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stats-review-facts b {
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--soft);
  background: var(--panel-2);
  font-size: 0.80rem;
  font-weight: 400;
}

.stats-media-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.stats-media-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}


/* ── Tools accordion ─────────────────────────────────────── */


.tool-accordion {
  border-radius: var(--radius);
  overflow: hidden;
}

.tool-accordion-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tool-accordion-header::-webkit-details-marker {
  display: none;
}

.tool-accordion-header::marker {
  display: none;
}

.tool-accordion-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tool-accordion-title > div {
  flex: 1;
  min-width: 0;
}

.tool-accordion-title > div > p {
  margin: 0;
  font-weight: 850;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.3;
}

.tool-accordion-title > div > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.tool-accordion-chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 0.18s ease;
  order: -1;
}

.tool-accordion-chevron::before {
  content: "▶";
  font-size: 0.6rem;
  display: block;
  transition: transform 0.18s ease;
}

details[open] .tool-accordion-chevron::before {
  transform: rotate(90deg);
}

.tool-accordion-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  padding-left: calc(1.1rem + var(--space-2));
}

.tool-accordion-body {
  padding: var(--space-3);
  padding-top: 0;
  border-top: 1px solid var(--line);
  margin-top: 0;
}

.backup-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.backup-transfer-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.backup-transfer-card .button-primary {
  justify-self: start;
}

.backup-transfer-warning {
  padding: var(--space-3) 0 0;
}

.backup-settings-panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
}

.backup-type-stack {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
}

.backup-section-heading {
  align-items: center;
}

.backup-section-heading .status-pill {
  justify-self: end;
}

.backup-section-heading .status-muted {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.12);
  color: var(--soft);
}

.backup-type-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.backup-type-card-muted {
  background: color-mix(in srgb, var(--panel-3) 78%, transparent);
}

.backup-type-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.backup-type-head > div:first-child {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
}

.backup-type-head > div:first-child:has(b + span) {
  display: block !important;
}

.backup-type-head > div:first-child:has(b + span) > b,
.backup-type-head > div:first-child:has(b + span) > span {
  display: inline !important;
}

.backup-type-head > div:first-child > b:has(+ span)::after {
  content: " - ";
  color: var(--muted);
  font-weight: normal;
}

.backup-type-head b {
  color: var(--text);
  font-size: 0.94rem;
}

.backup-type-head span:not(.status-pill) {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.backup-type-head .backup-enable-row {
  flex-shrink: 0;
}

.backup-type-head .backup-enable-row span {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
}

/* Form container for cards whose controls span multiple rows (settings row + passphrase row). */
.backup-settings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.backup-settings-inline.backup-passphrase-row {
  align-items: center;
}

.backup-passphrase-row .backup-passphrase-label {
  flex: 1 1 260px;
}

/* Caption and input share one line with the remember-passphrase toggle. */
.backup-passphrase-row .backup-passphrase-label {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--space-2) !important;
}

.backup-passphrase-caption {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Local Plekt Restore: keep passphrase field and action buttons on one row like the other backup/restore boxes. */
@media (min-width: 861px) {
  #plembfinRestoreForm {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-3) !important;
  }

  #plembfinRestoreForm .backup-settings-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  #plembfinRestoreForm .backup-passphrase-label {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--space-2) !important;
    width: auto !important;
  }

  #plembfinRestoreForm .backup-settings-right {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
}

.backup-passphrase-row .backup-enable-row {
  flex-shrink: 0;
}

/* Indeterminate progress bar shown while a Back Up Now request runs. */
.backup-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.backup-progress-bar {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: #2563eb;
  animation: backup-progress-slide 1.2s ease-in-out infinite;
}

@keyframes backup-progress-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}

/* Momentary green "Saved!" state applied to the clicked button. */
.button-flash-success,
.settings-pane .button-primary.button-flash-success,
.settings-pane .button-ghost.button-flash-success {
  border-color: rgba(16, 185, 129, 0.6) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #72e3b8 !important;
}

/* Disclosure hiding all but the two newest backups in restore lists. */
.backup-collapse > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: var(--space-1) 0;
  user-select: none;
}

.backup-collapse[open] > summary {
  margin-bottom: var(--space-2);
}

.backup-collapse .watch-backup-row + .watch-backup-row {
  margin-top: var(--space-2);
}

.backup-type-note {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.backup-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.backup-settings-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  flex-wrap: wrap;
}

.backup-settings-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.backup-settings-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.backup-settings-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.backup-enable-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.backup-settings-inline .backup-enable-row {
  grid-column: auto;
  min-height: 2.05rem;
  display: flex;
  align-items: center;
}

.settings-pane[data-settings-panel="backups"] .backup-settings-inline .button-primary,
.settings-pane[data-settings-panel="backups"] .backup-settings-inline .button-ghost {
  height: 2.05rem !important;
}

.backup-settings-inline .field-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  grid-column: auto !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

.backup-settings-inline .field-label .field {
  flex: 1 !important;
  min-width: 150px !important;
}

.backup-settings-inline:not(.backup-passphrase-row) .backup-passphrase-label {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-1) !important;
}

.backup-enable-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--yellow);
}

.backup-settings-actions {
  justify-content: flex-start;
}

.backup-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.backup-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

.backup-restore-section {
  margin-bottom: var(--space-4);
}

.backup-runtime {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.backup-runtime > div {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.backup-runtime-with-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.backup-runtime-with-action span,
.backup-runtime-with-action b {
  grid-column: 1;
}

.backup-runtime-with-action button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.backup-runtime span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.backup-runtime-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--red);
}

.backup-runtime-remote-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.backup-runtime-remote {
  display: block;
  width: 100%;
}

.backup-runtime-remote-grid > div {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

/* Restore clear-mode selector: stacked rows, normal case (NOT the 3-column uppercase
   .backup-runtime grid). */
.restore-clear-mode {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.restore-clear-mode .restore-clear-intro {
  font-weight: 600;
  color: var(--text);
  font-size: 0.85rem;
}

.restore-clear-mode label {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  cursor: pointer;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.restore-clear-mode label:hover {
  border-color: var(--line-strong);
}

.restore-clear-mode input[type="radio"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.restore-clear-mode label span {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
}

.restore-clear-mode label span b {
  color: var(--text);
  font-weight: 700;
}

/* Prominent "searching remote destinations" banner on the restore tab. */
.remote-search-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(120, 170, 255, 0.08);
  font-size: 0.82rem;
  color: var(--text);
}

.remote-search-banner .remote-search-spinner {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: remote-search-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

.restore-upload-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.restore-upload-panel span {
  color: var(--muted);
  font-size: 0.82rem;
}

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

.watch-backup-list {
  display: grid;
  gap: var(--space-2);
}

.watch-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.watch-backup-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.watch-backup-copy b,
.watch-backup-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-backup-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.watch-backup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.recovery-guide {
  display: grid;
  gap: var(--space-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.recovery-guide code {
  background: var(--panel-2);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

@media (max-width: 860px) {
  .backup-settings-grid,
  .backup-runtime,
  .backup-runtime-remote-grid {
    grid-template-columns: 1fr;
  }

  .backup-settings-inline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .backup-settings-left,
  .backup-settings-center,
  .backup-settings-right {
    flex: none;
    width: 100%;
    justify-content: flex-start;
  }

  .backup-settings-center {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .backup-type-head {
    align-items: stretch;
    flex-direction: column;
  }

  .watch-backup-row {
    align-items: stretch;
    flex-direction: column;
  }

  .watch-backup-actions {
    justify-content: flex-start;
  }

}

.stat-card {
  display: grid;
  min-height: 7rem;
  align-content: space-between;
  height: 100%;
}

.stat-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.stat-card b {
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.wide-insight,
.settings-wide-card {
  grid-column: 1 / -1;
}

.ranking-table {
  display: grid;
  gap: var(--space-2);
}

.ranking-head,
.ranking-row,
.insight-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1.15fr) minmax(11rem, 0.85fr) 5.25rem;
  align-items: center;
  gap: var(--space-2);
}

.ranking-head {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ranking-row,
.insight-row {
  padding: var(--space-2);
  min-height: 2.55rem;
}

.ranking-row b,
.insight-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row span,
.insight-row span {
  color: var(--muted);
  font-weight: 850;
}

.ranking-row em,
.insight-row em {
  color: var(--soft);
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.month-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 11rem;
  overflow: hidden;
}

.month-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.month-column > span {
  width: 100%;
  max-width: 2rem;
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  border: 1px solid var(--line-strong);
  background: var(--panel-3);
}

.month-column b {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--soft);
}

.month-column small {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .month-chart {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding-bottom: 0.3rem;
  }

  .month-column {
    flex: 0 0 2.75rem;
  }

  .month-column small {
    font-size: 0.58rem;
  }
}

.table-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) 0.5fr 0.65fr 0.9fr;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: var(--space-2);
}

.row-button {
  width: 100%;
  color: inherit;
  text-align: left;
}

.table-head {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-row b {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-row small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
}

.settings-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

.settings-sidebar {
  position: sticky;
  top: 3.7rem;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.settings-sidebar-head {
  display: grid;
  gap: var(--space-1);
}

.settings-sidebar-head h2 {
  font-size: 1rem;
}

.settings-menu {
  display: grid;
  gap: var(--space-2);
}

.settings-tab {
  width: 100%;
  text-align: left;
}

.settings-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: space-between;
}

.settings-actions,
.import-actions {
  justify-content: flex-end;
}

.connection-test-row {
  display: grid;
  gap: var(--space-2);
}

.connection-test-status {
  min-height: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.connection-test-status[data-tone="success"] {
  color: #86efac;
}

.connection-test-status[data-tone="error"] {
  color: #fda4af;
}

.settings-actions-spread {
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.settings-card .field-label,
.settings-card .field {
  min-width: 0;
}

.admin-credentials-form {
  display: grid;
  gap: var(--space-3);
}

.admin-credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.sync-panel form,
.settings-card form,
.tool-section-card form,
#syncTuningForm {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-5) !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* This form's own gap is smaller than the shared tool-section-card default
   above, so the action row doesn't sit unusually far from the field group. */
#traktConnectForm {
  gap: var(--space-3) !important;
}

#syncTuningForm > .settings-actions,
.sync-panel .settings-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#syncTuningStatus,
#syncTuningStatus:empty {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#syncTuningFields,
.sync-tuning-fields,
#syncIssuesContent,
#syncMatchReportContent,
#syncIssuesContainer,
.sync-issues-empty,
#webhookSetupGuides,
#rebuildsContent,
#databaseRepairsContent,
#diagnosticsContent,
#imageCacheContent,
#plexServerContent,
#embyServerContent,
#jellyfinServerContent,
#webhookSecretContent,
#metadataProviderContent,
#syncTuningContent,
#syncToolsContent,
#syncHistoryContent,
#migrationContent,
#tautulliImportContent,
#seerrContent,
#accountContent,
#refreshMetadataContent {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.metadata-provider-disclosures {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

details.sync-match-report,
details.sync-tool-details,
details.issue-category {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--panel-2) !important;
}

details.sync-match-report:not([open]),
details.sync-tool-details:not([open]),
details.issue-category:not([open]) {
  background: var(--panel-2) !important;
}

details.sync-match-report[open],
details.sync-tool-details[open],
details.issue-category[open] {
  background: rgba(255, 255, 255, 0.02) !important;
}

details.sync-tool-details > summary.accordion-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: var(--space-3) !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
}

details.sync-tool-details > summary.accordion-header::-webkit-details-marker {
  display: none !important;
}

.sync-tool-summary-title {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-size: 0.92rem !important;
  color: var(--text) !important;
}

.accordion-chevron {
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

details[open] .accordion-chevron {
  transform: rotate(90deg) !important;
}

.sync-issues-empty {
  padding: var(--space-3) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.sync-tuning-fields .settings-modal-field,
.settings-modal-field {
  display: flex !important;
  flex-direction: column !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.sync-tuning-fields .settings-modal-field-control,
.settings-modal-field-control {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.sync-tuning-fields .settings-modal-field-control .field,
.settings-modal-field-control .field {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.sync-tuning-fields .settings-field-optional {
  margin-left: var(--space-2);
  white-space: nowrap;
}

.sync-static-heading {
  width: 100% !important;
}

.sync-static-heading > div,
#syncHistoryToggle > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  width: 100% !important;
}

.sync-static-heading > div > div,
#syncHistoryToggle > div > div {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.sync-static-heading > div > span,
#syncHistoryToggle > div > span {
  flex: 0 1 auto !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-align: right !important;
  margin-left: auto !important;
}

.sync-static-heading > span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

details.sync-tool-details {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.settings-force-sync-panel {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.settings-pane .sync-tools-content .settings-actions.hidden {
  display: none !important;
}

/* Default settings main-card shell: the Sync Tools layout is the canonical
   structure for every settings page's primary content panel. */
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border-color: var(--line-strong);
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) > .section-heading {
  margin: 0 !important;
  padding: var(--space-3) !important;
  border-bottom: 1px solid var(--line) !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) > :not(.section-heading) {
  margin-top: 0 !important;
  padding: var(--space-3) !important;
}

.settings-pane .sync-tools-content {
  gap: var(--space-2) !important;
}

/* Keep the outer Repair Recent Items row aligned with the standard spacing
   already used between the individual Force Sync rows. */
.settings-pane #syncToolsContent {
  row-gap: var(--space-2) !important;
}

/* A hidden action row must not leave an empty grid track between boxes. */
.settings-pane #settingsForceSyncPanel > .settings-actions.hidden {
  display: none !important;
}

.settings-pane .sync-tools-content .sync-tool-button,
.settings-pane .sync-tools-content .sync-tools-cancel-button {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.settings-pane .sync-tools-content .sync-tools-cancel-button {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: #fda4af !important;
}

.settings-pane .sync-tools-content .sync-tools-cancel-button:hover:not(:disabled) {
  border-color: rgba(244, 63, 94, 0.7) !important;
  background: transparent !important;
  color: #fff1f2 !important;
}

.settings-pane .media-force-sync-choice-copy small,
.settings-pane .media-force-sync-target-copy small {
  max-width: none;
}

.settings-pane .sync-tools-when-to-use strong {
  color: var(--text);
}

/* Sync Tuning uses the same static action-row treatment as Sync Tools. */
#syncTuningFields {
  gap: var(--space-2) !important;
}

#diagnosticsContent .diagnostics-action-content .settings-modal-field-control:has(button) {
  display: flex;
  align-items: flex-end;
}

/* Sync Tuning rows are plain fields (a number input or a checkbox) - a
   single compact row per field: label + description on the left, a small
   fixed-width control on the right, instead of the taller stacked layout
   used for the diagnostics action rows above. */
#syncTuningFields .settings-modal-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content auto !important;
  grid-template-areas: "desc default control" !important;
  align-items: center !important;
  gap: 2px var(--space-4) !important;
  padding: var(--space-2) var(--space-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: color-mix(in srgb, #1a1a1a, white 10%) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}

#syncTuningFields .settings-modal-field:hover,
#syncTuningFields .settings-modal-field:focus-within {
  border-color: var(--blue) !important;
  background: color-mix(in srgb, #1a1a1a, white 16%) !important;
}

html.light-mode #syncTuningFields .settings-modal-field {
  background: var(--panel) !important;
}

html.light-mode #syncTuningFields .settings-modal-field:hover,
html.light-mode #syncTuningFields .settings-modal-field:focus-within {
  background: var(--panel-2) !important;
}

/* `display: contents` drops the wrapper out of layout so its title/help
   children become direct grid items of .settings-modal-field, placeable by
   grid-area independently (title spanning the row, help beside the input). */
#syncTuningFields .settings-modal-field .settings-modal-field-label {
  display: contents !important;
}

#syncTuningFields .settings-modal-field .settings-modal-field-title {
  display: none !important;
  grid-area: title;
  color: var(--text) !important;
  font-size: inherit !important;
}

#syncTuningFields .settings-modal-field .settings-field-help {
  grid-area: desc;
  align-self: center;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin-left: 0 !important;
}

#syncTuningFields .settings-modal-field .settings-modal-field-control {
  grid-area: control;
  width: auto !important;
  flex: 0 0 auto;
}

#syncTuningFields .settings-modal-field .settings-modal-field-control .field {
  width: 7rem !important;
  text-align: center;
}

#syncTuningFields .settings-field-default {
  grid-area: default;
  align-self: center;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  text-align: right;
  white-space: nowrap;
}

/* The watched-flag policy has four meaningful choices, so keep them visible
   instead of hiding them inside the browser's native select popup. The radio
   inputs preserve keyboard and screen-reader semantics while the option tiles
   make the active choice obvious before the form is saved. */
#syncTuningFields .settings-modal-field--choice {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) !important;
}

#syncTuningFields .settings-modal-field--choice .settings-modal-field-label {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
}

#syncTuningFields .settings-modal-field--choice .settings-field-help {
  max-width: 48rem;
}

/* The disclosure is the setting's box. Keep the generated field wrapper
   transparent so its controls use the full body width without a second card
   border or an empty label row above the choice tiles. */
#syncTuningFields .settings-modal-field {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

#syncTuningFields .settings-modal-field--choice {
  gap: var(--space-2) !important;
}

#syncTuningFields .settings-modal-field--choice .settings-modal-field-label {
  display: none !important;
}

.settings-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.settings-choice-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  min-height: 4.2rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.settings-choice-option:hover {
  border-color: var(--blue);
  background: var(--panel-3);
}

.settings-choice-option:has(input:checked) {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), var(--panel-2) 88%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue), transparent 55%);
}

.settings-choice-option:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.settings-choice-option input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--blue);
}

.settings-choice-option-body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.settings-choice-option-body--inline {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
}

.settings-choice-option-description--block {
  grid-column: 1 / -1;
}

.settings-choice-option-title,
.settings-choice-option-description {
  overflow-wrap: anywhere;
}

.settings-choice-option-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.settings-choice-option-description {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

html.light-mode .settings-choice-option {
  background: var(--panel);
}

html.light-mode .settings-choice-option:hover,
html.light-mode .settings-choice-option:has(input:checked) {
  background: var(--panel-2);
}

@media (max-width: 760px) {
  .settings-choice-grid {
    grid-template-columns: 1fr;
  }

  #syncTuningFields .settings-modal-field:not(.settings-modal-field--choice) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "desc desc" "default control" !important;
  }

  #syncTuningFields > .settings-modal-field--choice .settings-modal-field-label {
    flex-direction: column;
    gap: var(--space-1);
  }

  #syncTuningFields > .settings-modal-field--choice .settings-field-help {
    max-width: none;
  }
}

.sync-health-metric,
.sync-health-dest-row,
.sync-preview-warning-card,
.diagnostic-result-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel-2) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sync-health-metric:hover,
.sync-health-dest-row:hover,
.sync-preview-warning-card:hover,
.diagnostic-result-card:hover {
  border-color: var(--blue) !important;
  background: var(--panel-3) !important;
}

html:not(.light-mode) :is(.sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card),
html:not(.light-mode) :is(.sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card):is(:hover, :focus-within) {
  background: #1f242c !important;
}

details.sync-tool-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) !important;
  cursor: pointer;
  list-style: none;
}

details.sync-tool-details > summary::-webkit-details-marker {
  display: none;
}

.sync-tool-summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

details.sync-tool-details > summary > span {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

details.sync-tool-details > .tool-item-row {
  padding: 0 var(--space-3) var(--space-3);
}

details.sync-tool-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.settings-row-help > article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box !important;
}

.settings-row-help .section-heading {
  margin-bottom: var(--space-2) !important;
}

.settings-row-help > article.help-collapsed {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.help-read-more {
  display: none;
  align-self: flex-end;
  flex: 0 0 auto !important;
  margin-top: var(--space-2);
  z-index: 2;
}

.help-collapsed .help-read-more,
.help-expanded .help-read-more {
  display: inline-flex !important;
}

.help-content {
  min-height: 0;
  overflow: visible;
}

/* The collapsed height matches the settings row, so the clip can land mid-line;
   fade the last line out rather than show the tops of its letters. */
.help-collapsed .help-content {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  min-height: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent);
}

@media (max-width: 640px) {
  .sync-tuning-fields {
    grid-template-columns: 1fr;
  }
}

.endpoint-box,
.empty-log,
.drop-zone {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.sync-issues-empty {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.sync-issues-empty b {
  color: var(--soft);
}

.compact-endpoint {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}

.endpoint-box code,
.webhook-endpoint-container code,
.help-doc-body code {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-3);
  padding: 0.4rem 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: #60a5fa;
  word-break: break-all;
}

.webhook-endpoint-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.webhook-endpoint-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.webhook-endpoint-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.webhook-endpoint-label-row b {
  font-size: 0.85rem;
  color: var(--text);
}

.webhook-endpoint-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.webhook-secret-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.webhook-secret-line code {
  color: var(--text);
  word-break: break-all;
  padding: 0.15rem 0.45rem;
}

.webhook-setup-guides {
  display: grid;
  gap: var(--space-3);
}

.drop-zone {
  min-height: 12rem;
  place-items: center;
  text-align: center;
}

.drop-zone input {
  max-width: 280px;
}

.drop-zone b {
  font-size: 0.95rem;
}

.import-activity {
  display: grid;
  gap: var(--space-2);
}

.import-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: var(--space-2);
}

.import-progress-track {
  overflow: hidden;
  height: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-3);
}

.import-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 120ms ease;
}

#importProgressPercent {
  color: var(--muted);
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
}

.import-terminal {
  min-height: 10rem;
  max-height: 16rem;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #090c0e;
  color: #cbd5e1;
  padding: var(--space-3);
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-3);
}

.dashboard-history-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.movie-card,
.folder-trigger,
.season-trigger,
.episode-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--text);
  text-align: left;
}

.movie-card {
  display: flex;
  flex-direction: column;
  min-height: auto;
  justify-items: stretch;
  align-content: start;
  overflow: hidden;
}

.movie-card-body {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.movie-card b,
.folder-title b {
  overflow: hidden;
  width: 100%;
  color: #f1f5f9;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movie-card span {
  font-size: 0.81rem;
}

.movie-card small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-3);
  padding: 0.12rem 0.35rem;
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.6;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.folder-card,
.season-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.folder-trigger,
.season-trigger {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  min-height: 2.8rem;
}

.folder-trigger {
  grid-template-columns: 1rem 3.6rem minmax(0, 1fr) auto;
}

.folder-title {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.folder-children,
.episode-list {
  padding-left: var(--space-3);
}

.accordion-chevron {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  color: var(--soft);
  font-size: 0.81rem;
  font-weight: 900;
}

.accordion-chevron.expanded {
  color: #9ff1cf;
  transform: rotate(180deg);
}

.episode-row {
  display: grid;
  grid-template-columns: auto minmax(100px, 0.2fr) minmax(0, 1fr) auto;
  align-items: center;
}

.episode-code {
  color: var(--muted);
  font-weight: 900;
}

.debug-badge {
  background: #101820;
}

.explorer-show-grid .folder-trigger {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.explorer-show-grid .explorer-folder-poster {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.explorer-show-grid .folder-trigger time {
  font-size: 0.81rem;
  color: var(--muted);
}

.explorer-scroll-sentinel {
  display: grid;
  min-height: 3rem;
  place-items: center;
  padding-top: var(--space-3);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 1600px) {
  .movie-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .dashboard-history-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 1300px) {
  .movie-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-history-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sync-job-main,
  .sync-job-meta {
    grid-template-columns: 1fr;
  }

  .sync-job-main {
    align-items: start;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(3, 6, 8, 0.78);
  padding: var(--space-4);
}

.modal-panel {
  display: grid;
  width: min(1200px, 90vw);
  max-height: min(880px, 90vh);
  overflow: auto;
  gap: var(--space-3);
  padding: var(--space-3);
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The shared confirm surface also carries action errors. Keep that state
   compact and structured so server responses read like useful diagnostics,
   not a wall of newline-formatted text. */
.confirm-modal-overlay {
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(3, 6, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.confirm-modal-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 30rem);
  max-width: 30rem;
  max-height: min(42rem, 88vh);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--line-strong);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.5);
}

.confirm-modal-head {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 1rem 1rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-3) 92%, var(--accent) 8%);
}

.confirm-modal-head > div {
  min-width: 0;
  padding-top: 0.15rem;
}

.confirm-modal-head h2 {
  max-width: 24rem;
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.confirm-modal-close {
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.confirm-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
}

.confirm-modal-body .confirm-modal-media {
  margin: 0;
}

.confirm-modal-message {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.confirm-modal-actions button {
  min-width: 4.25rem;
}

.confirm-modal--error .confirm-modal-panel {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line-strong));
}

.confirm-modal--error .confirm-modal-head {
  border-bottom-color: color-mix(in srgb, var(--red) 24%, var(--line));
  background: color-mix(in srgb, var(--panel-3) 90%, var(--red) 10%);
}

.confirm-modal--error .confirm-modal-message {
  display: grid;
  gap: 1rem;
  white-space: normal;
}

.confirm-modal-error-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 9%, var(--panel-2));
}

.confirm-modal-error-mark {
  display: grid;
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  margin-top: 0.02rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: #fecdd3;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

.confirm-modal-error-detail {
  min-width: 0;
  color: var(--soft);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.confirm-modal-resolution {
  display: grid;
  gap: 0.35rem;
  padding-inline: 0.1rem;
}

.confirm-modal-resolution h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.confirm-modal-resolution p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .confirm-modal-head,
  .confirm-modal-body {
    padding-inline: 0.85rem;
  }

  .confirm-modal-head h2 {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0.5rem;
  }

  .modal-panel:not(.modal-panel--immersive) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    min-width: 0;
  }

  .confirm-modal-overlay {
    padding: 0.5rem;
  }

  .confirm-modal-panel {
    max-width: 100%;
    max-height: calc(100vh - 1rem);
  }

  .confirm-modal-actions {
    flex-wrap: wrap;
  }

  .confirm-modal-actions button {
    flex: 1 1 7rem;
  }
}

.media-force-sync-modal {
  display: flex;
  flex-direction: column;
  width: min(1080px, 94vw);
  max-height: min(900px, 92vh);
  padding: var(--space-4);
  gap: var(--space-4);
  overflow: hidden;
}

/* The taller min-height only applies once the activity log is showing - when
   it's idle (before a run starts) the modal shrinks to fit its two option
   rows instead of leaving a large empty gap below them. */
.media-force-sync-modal:has(.media-force-sync-activity:not(.hidden)) {
  min-height: min(600px, 76vh);
}

.media-force-sync-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow: hidden;
}

.media-force-sync-subtitle {
  max-width: 58ch;
  margin: 0.35rem 0 0;
}

.media-force-sync-options {
  flex: 0 0 auto;
  display: grid;
  gap: var(--space-2);
}

/* `.sync-tuning-fields` declares `display: flex !important`, which beat the
   `.hidden` utility on equal specificity purely by coming later in this file -
   so the Trakt connect form's first-connection fields never actually hid once
   the account was connected, leaving a "First connection" picker on screen for
   an already-connected user. Two classes outrank one, so this wins regardless
   of order. tracker-settings.js is the only place that toggles the pair. */
.sync-tuning-fields.hidden {
  display: none !important;
}

.media-force-sync-choice,
.media-force-sync-target-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  transition: border-color 160ms ease, background 160ms ease;
}

.media-force-sync-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  color: var(--text);
  text-align: left;
  cursor: default;
  transition: border-color 160ms ease, background 160ms ease;
}

.media-force-sync-choice:hover,
.media-force-sync-choice:focus-visible,
.media-force-sync-target-row:hover,
.media-force-sync-target-row:focus-within {
  border-color: var(--blue);
  background: var(--panel-3);
}

.media-force-sync-choice-copy,
.media-force-sync-target-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.media-force-sync-choice-copy strong,
.media-force-sync-target-copy label {
  color: var(--text);
  font-size: inherit;
  font-weight: 700;
}

.media-force-sync-choice-copy small,
.media-force-sync-target-copy small {
  max-width: none;
  color: var(--muted);
  font-size: inherit;
  line-height: 1.45;
}

.media-force-sync-run {
  flex: 0 0 auto;
}

.media-force-sync-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.personal-rating-sync-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 5%, var(--panel-2));
}

.personal-rating-sync-heading,
.personal-rating-sync-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.personal-rating-sync-heading > div,
.personal-rating-sync-action-row > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.personal-rating-sync-heading small,
.personal-rating-sync-action-row small {
  color: var(--muted);
  line-height: 1.45;
}

.personal-rating-sync-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
}

.personal-rating-sync-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.personal-rating-sync-controls .field {
  width: auto;
  min-width: 10rem;
  padding: 0.45rem 0.6rem;
}

.personal-rating-sync-number {
  width: 4.5rem !important;
  min-width: 0 !important;
}

.personal-rating-sync-providers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.personal-rating-sync-provider {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.personal-rating-sync-provider small {
  min-height: 2.2em;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.personal-rating-sync-provider select {
  width: 100%;
}

.personal-rating-sync-provider [role="alert"] {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.personal-rating-sync-provider [data-rating-hold] {
  max-width: 100%;
  white-space: normal;
  margin-top: 0.5rem;
}

/* Help copy on the left, Sync now pinned bottom-right. */
.personal-rating-sync-action-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

@media (max-width: 900px) {
  .personal-rating-sync-providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-rating-sync-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 680px) {
  .personal-rating-sync-heading,
  .personal-rating-sync-action-row {
    grid-template-columns: 1fr;
  }

  /* Stacked, the button spans the row rather than sitting orphaned right. */
  .personal-rating-sync-action-row button {
    width: 100%;
  }

  .personal-rating-sync-providers {
    grid-template-columns: 1fr;
  }
}

.personal-watchlist-sync-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 5%, var(--panel-2));
}

.personal-watchlist-sync-heading,
.personal-watchlist-sync-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.personal-watchlist-sync-heading > div,
.personal-watchlist-sync-action-row > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.personal-watchlist-sync-heading small,
.personal-watchlist-sync-action-row small {
  color: var(--muted);
  line-height: 1.45;
}

.watchlist-sync-help {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* The live one-line state sits above the static guide and reads as the more
   current of the two, so it takes the stronger colour. */
.watchlist-sync-summary {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
}

.watchlist-sync-summary:not(:empty) {
  margin-bottom: var(--space-1);
}

.watchlist-sync-help p,
.watchlist-sync-help ul {
  margin: 0.25rem 0 0;
}

.personal-watchlist-sync-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
}

.personal-watchlist-sync-controls label,
.personal-watchlist-sync-provider label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.personal-watchlist-sync-providers {
  display: grid;
  gap: var(--space-2);
}

.personal-watchlist-sync-provider {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 16rem) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.personal-watchlist-sync-provider-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.personal-watchlist-sync-provider-copy small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.personal-watchlist-sync-issues {
  display: grid;
  gap: var(--space-2);
}

.personal-watchlist-sync-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.personal-watchlist-sync-issue > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.personal-watchlist-sync-issue small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.personal-watchlist-sync-issue-titles {
  font-style: italic;
}

.personal-watchlist-sync-issue-error {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--panel-3));
}

.personal-watchlist-sync-issue-warning {
  border-color: color-mix(in srgb, var(--yellow) 45%, var(--line));
  background: color-mix(in srgb, var(--yellow) 8%, var(--panel-3));
}

.personal-watchlist-sync-issue-info {
  border-color: var(--line);
  background: var(--panel-3);
}

.personal-watchlist-sync-issue-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .personal-watchlist-sync-issue {
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-watchlist-sync-issue [data-settings-path] {
    justify-self: start;
  }
}

.personal-watchlist-sync-representation {
  color: var(--muted);
  font-size: 0.8rem;
}

.personal-watchlist-sync-representation select {
  width: 100%;
}

.personal-watchlist-sync-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.personal-watchlist-sync-metrics > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-3) 80%, transparent);
}

.personal-watchlist-sync-metrics span,
.personal-watchlist-sync-metrics b {
  font-size: 0.78rem;
}

.personal-watchlist-sync-metrics span {
  color: var(--muted);
}

/* Help copy on the left, Sync now pinned bottom-right. */
.personal-watchlist-sync-action-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.personal-watchlist-sync-preview {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.watchlist-sync-preview-head,
.watchlist-sync-preview-provider > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.watchlist-sync-preview-head small,
.watchlist-sync-preview-provider span,
.watchlist-sync-preview-provider p {
  color: var(--muted);
  line-height: 1.4;
}

.watchlist-sync-preview-provider {
  display: grid;
  gap: 0.25rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.watchlist-sync-error {
  color: var(--red) !important;
}

.personal-watchlist-sync-activity-wrap {
  display: grid;
  gap: var(--space-2);
}

.personal-watchlist-sync-activity {
  display: grid;
  gap: 0.35rem;
}

.watchlist-sync-activity-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1fr) minmax(12rem, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}

.watchlist-sync-activity-row small {
  color: var(--muted);
  text-align: right;
}

@media (max-width: 1100px) {
  .personal-watchlist-sync-provider {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .personal-watchlist-sync-representation {
    grid-column: 1 / -1;
  }

  .personal-watchlist-sync-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px) {
  .personal-watchlist-sync-heading,
  .personal-watchlist-sync-action-row {
    grid-template-columns: 1fr;
  }

  .personal-watchlist-sync-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-watchlist-sync-action-row button,
  .personal-watchlist-sync-action-row select {
    width: 100%;
  }

  .watchlist-sync-activity-row {
    grid-template-columns: 1fr 1fr;
  }

  .watchlist-sync-activity-row small {
    grid-column: 1 / -1;
    text-align: left;
  }
}

.media-force-sync-select {
  width: 100%;
  min-width: 0;
}

.media-force-sync-seasons {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-force-sync-seasons-label {
  font-weight: 700;
  color: var(--text);
}

.media-force-sync-seasons-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.media-force-sync-season-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.media-force-sync-season-pill:has(input:checked) {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 18%, var(--panel-3));
}

.media-force-sync-season-pill small {
  color: var(--muted);
}

.media-force-sync-activity {
  margin-top: 0;
}

.media-force-sync-activity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.media-force-sync-cancel {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.media-force-sync-activity .import-terminal {
  min-height: 20rem;
  max-height: 32rem;
  color: var(--text);
  background: var(--panel-3);
}

/* Inside the per-title modal only (not the Settings inline panel, which
   scrolls with the rest of the page): let this terminal fill whatever space
   is left below the options/header instead of using a plain max-height. A
   fixed max-height sized independently of the modal's own remaining room
   could add up to more than the modal ever fits, pushing the log's box past
   the dialog's own bottom edge instead of scrolling cleanly inside it. */
.media-force-sync-modal .media-force-sync-activity {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.media-force-sync-modal .media-force-sync-activity .import-terminal {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: none;
  overflow: auto;
}

@media (max-width: 680px) {
  .media-force-sync-modal {
    min-height: 0;
    padding: var(--space-3);
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
  }

  .media-force-sync-body {
    overflow: visible;
  }

  .media-force-sync-target-row {
    grid-template-columns: 1fr;
  }

  .media-force-sync-target-row .button-primary,
  .media-force-sync-target-row .button-ghost {
    width: 100%;
  }
}

.confirm-modal-media {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.confirm-modal-media.hidden {
  display: none;
}

.confirm-modal-media-poster {
  width: 56px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: var(--poster-radius);
  object-fit: cover;
  background: var(--panel-3);
}

.confirm-modal-media-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.confirm-modal-media-title {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-modal-media-meta {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.diagnostic-grid div,
.telemetry-block {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: var(--space-2);
}

.diagnostic-grid span,
.telemetry-block p {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.telemetry-block {
  margin-top: var(--space-3);
}

.telemetry-block pre {
  margin: 0;
  overflow: auto;
  color: #dbe3ea;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Complete media information panel -------------------------------------- */
.media-info-overlay {
  z-index: 80;
  place-items: start center;
  overflow-y: auto;
  padding: clamp(1rem, 4vh, 3rem) var(--space-4);
}

.media-info-overlay--detail-page {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: calc(var(--media-info-page-top) + var(--space-4)) calc(var(--media-info-page-right) + var(--space-4)) calc(var(--space-4) + var(--space-4)) calc(var(--media-info-page-left) + var(--space-4));
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.media-info-overlay--detail-page .media-info-panel {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: var(--radius);
}

.media-info-panel {
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--sidebar-width) - 2rem);
  max-width: 1800px;
  max-height: min(1040px, 94vh);
  overflow: hidden;
  padding: 0;
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}

.media-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-strong);
}

.media-info-title-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.media-info-title-block > div {
  min-width: 0;
}

.media-info-head-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.media-info-head-actions .button-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.media-info-poster {
  width: 64px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--poster-radius);
  background: var(--panel-3);
}

.media-info-field > span,
.media-info-subhead > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.media-info-title-block h2 {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.media-info-title-block p {
  margin: 0.4rem 0 0;
  color: var(--soft);
  font-size: 0.85rem;
}

.media-info-content {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  flex: 1 1 auto;
  gap: var(--space-6);
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding: var(--space-5) var(--space-5) clamp(1.5rem, 4vh, 3rem);
}

.media-info-overlay--detail-page .media-info-content {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.media-info-glance {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-strong);
}

.media-info-glance .media-info-section {
  gap: var(--space-3);
}

.media-info-glance .media-info-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--space-4);
  border-top: 1px solid var(--line);
}

.media-info-glance .media-info-field {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.media-info-watch-list,
.media-info-season-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.media-info-watch-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-info-watch-card--success {
  border-color: color-mix(in oklch, var(--green) 58%, var(--line-strong));
  background: color-mix(in oklch, var(--green) 7%, var(--panel-2));
}

.media-info-watch-card--error {
  border-color: color-mix(in oklch, var(--red) 62%, var(--line-strong));
  background: color-mix(in oklch, var(--red) 7%, var(--panel-2));
}

.media-info-watch-card--pending {
  border-color: color-mix(in oklch, var(--yellow) 62%, var(--line-strong));
  background: color-mix(in oklch, var(--yellow) 7%, var(--panel-2));
}

.media-info-watch-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.media-info-watch-card-head > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.media-info-watch-card-head strong {
  color: var(--text);
  font-size: 0.9rem;
}

.media-info-watch-card-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.media-info-watch-lines {
  display: grid;
  gap: var(--space-2);
}

.media-info-watch-line {
  display: grid;
  grid-template-columns: minmax(105px, max-content) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.media-info-watch-line > strong {
  color: var(--text);
  font-size: 0.8rem;
}

.media-info-watch-line > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.media-info-watch-line > b {
  min-width: 0;
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.media-info-watch-line--sync {
  align-items: center;
}

.media-info-watch-line--sync .media-info-sync-targets {
  justify-content: flex-start;
  min-width: 0;
}

.media-info-watch-state {
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  border: 1px solid color-mix(in oklch, var(--green) 45%, var(--line));
  border-radius: 999px;
  color: var(--green) !important;
  font-size: 0.81rem !important;
  font-weight: 700;
}

.media-info-sync-targets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.media-info-sync-target,
.media-info-sync-none {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.81rem;
}

.media-info-sync-none--success {
  border-color: color-mix(in oklch, var(--green) 42%, var(--line));
  color: var(--green);
}

.media-info-sync-none--error {
  border-color: color-mix(in oklch, var(--red) 55%, var(--line));
  color: var(--red);
}

.media-info-sync-none--pending {
  border-color: color-mix(in oklch, var(--yellow) 55%, var(--line));
  color: var(--yellow);
}

.media-info-sync-target b {
  color: var(--text);
  font-weight: 700;
}

.media-info-sync-target--success {
  border-color: color-mix(in oklch, var(--green) 42%, var(--line));
  color: var(--green);
}

.media-info-sync-target--error {
  border-color: color-mix(in oklch, var(--red) 55%, var(--line));
  color: var(--red);
}

.media-info-sync-target--pending {
  border-color: color-mix(in oklch, var(--yellow) 55%, var(--line));
  color: var(--yellow);
}

.media-info-season-group,
.media-info-episode-group {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-info-episode-group {
  border-color: var(--line);
  background: var(--panel-3);
}

.media-info-episode-group--success {
  border-color: color-mix(in oklch, var(--green) 58%, var(--line-strong));
  background: color-mix(in oklch, var(--green) 6%, var(--panel-2));
}

.media-info-episode-group--error {
  border-color: color-mix(in oklch, var(--red) 62%, var(--line-strong));
  background: color-mix(in oklch, var(--red) 6%, var(--panel-2));
}

.media-info-episode-group--pending {
  border-color: color-mix(in oklch, var(--yellow) 62%, var(--line-strong));
  background: color-mix(in oklch, var(--yellow) 6%, var(--panel-2));
}

.media-info-season-group > summary,
.media-info-episode-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-4);
}

.media-info-season-group > summary::-webkit-details-marker,
.media-info-episode-group > summary::-webkit-details-marker,
.media-info-debug-section > summary::-webkit-details-marker,
.media-info-record-debug > summary::-webkit-details-marker {
  display: none;
}

.media-info-season-group > summary::after,
.media-info-episode-group > summary::after,
.media-info-debug-section > summary::after,
.media-info-record-debug > summary::after {
  flex: 0 0 auto;
  color: var(--muted);
  content: "+";
  font-size: 1.1rem;
  font-weight: 500;
}

.media-info-season-group[open] > summary,
.media-info-episode-group[open] > summary,
.media-info-debug-section[open] > summary,
.media-info-record-debug[open] > summary {
  border-bottom: 1px solid var(--line);
}

.media-info-season-group[open] > summary::after,
.media-info-episode-group[open] > summary::after,
.media-info-debug-section[open] > summary::after,
.media-info-record-debug[open] > summary::after {
  content: "-";
}

.media-info-disclosure-title {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.media-info-disclosure-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.media-info-episode-list {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.media-info-episode-body {
  padding: var(--space-3);
}

.media-info-episode-body .media-info-watch-card {
  padding: 0;
  border: 0;
  background: transparent;
}

.media-info-debug-section {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-info-debug-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
}

.media-info-debug-summary {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.media-info-debug-summary strong {
  color: var(--text);
  font-size: 0.95rem;
}

.media-info-debug-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.media-info-debug-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--line);
}

.media-info-record-debug {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--panel-3) 70%, transparent);
}

.media-info-record-debug > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-3);
  color: var(--soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.media-info-record-debug > summary span:last-child {
  color: var(--muted);
  font-size: 0.81rem;
  font-weight: 500;
}

.media-info-record-debug-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
}

.media-info-section {
  display: grid;
  gap: var(--space-4);
}

.media-info-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.media-info-section-head h3 {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: 1.1rem;
}

.media-info-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.media-info-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-info-field strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.media-info-field--wide {
  grid-column: 1 / -1;
}

.media-info-field--warning {
  border-color: color-mix(in oklch, var(--yellow) 55%, var(--line-strong));
}

.media-info-history-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.media-info-history-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.media-info-record-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.media-info-record-state {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.media-info-record-state span {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.media-info-detail-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.media-info-detail-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: 0 0 var(--space-3);
}

.media-info-detail-section > summary::-webkit-details-marker,
.media-info-detail-record > summary::-webkit-details-marker {
  display: none;
}

.media-info-detail-section > summary::after {
  flex: 0 0 auto;
  color: var(--muted);
  content: "+";
  font-size: 1.2rem;
  font-weight: 500;
}

.media-info-detail-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.media-info-detail-section[open] > summary::after {
  content: "−";
}

.media-info-detail-summary {
  display: grid;
  gap: 0.25rem;
}

.media-info-detail-summary h3 {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: 1.1rem;
}

.media-info-detail-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.media-info-detail-section-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0 0;
}

.media-info-detail-record {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.media-info-detail-record > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4);
}

.media-info-detail-record > summary::after {
  flex: 0 0 auto;
  color: var(--muted);
  content: "+";
  font-size: 1.1rem;
  font-weight: 500;
}

.media-info-detail-record[open] > summary {
  border-bottom: 1px solid var(--line);
}

.media-info-detail-record[open] > summary::after {
  content: "−";
}

.media-info-record-title {
  min-width: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.media-info-record-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.81rem;
  text-align: right;
}

.media-info-history-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.media-info-provenance-block,
.media-info-subsection {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.media-info-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.media-info-subhead b {
  color: var(--soft);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.media-info-play-history {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.media-info-play-history li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  font-size: 0.8rem;
}

.media-info-play-history li:last-child {
  border-bottom: 0;
}

.media-info-telemetry {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.media-info-telemetry summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  color: var(--soft);
  font-size: 0.8rem;
  font-weight: 800;
}

.media-info-telemetry pre {
  max-height: 260px;
  overflow: auto;
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
  color: var(--soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.media-info-empty {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.85rem;
}

.media-info-empty strong {
  color: var(--soft);
}

.media-info-timeline-block {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-5);
  border-bottom: 1px solid var(--line-strong);
}

.media-info-timeline-head {
  align-items: end;
}

.media-info-timeline-head h3 {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: 1.1rem;
}

.media-info-timeline-context {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--space-4);
  border-top: 1px solid var(--line);
}

.media-info-timeline-context .media-info-field {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.media-info-timeline {
  display: grid;
  gap: 0;
  position: relative;
  padding: 0 0 0 1.35rem;
  margin: 0;
  list-style: none;
}

.media-info-timeline::before {
  position: absolute;
  inset: 0 auto 0 0.48rem;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.media-info-timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: 0 0 var(--space-4);
}

.media-info-timeline-event:last-child {
  padding-bottom: 0;
}

.media-info-timeline-marker {
  position: absolute;
  top: 0.15rem;
  left: -1.35rem;
  z-index: 1;
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 2px solid var(--panel-2);
  border-radius: 50%;
  background: var(--blue);
  color: #07111e;
  font-size: 0.58rem;
  font-weight: 900;
}

.media-info-timeline-event--error .media-info-timeline-marker,
.media-info-timeline-event--failed .media-info-timeline-marker {
  background: var(--red);
  color: #fff;
}

.media-info-timeline-event--skipped .media-info-timeline-marker,
.media-info-timeline-event--historical .media-info-timeline-marker {
  background: var(--muted);
  color: var(--panel-2);
}

.media-info-timeline-event-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.media-info-timeline-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.media-info-timeline-event-head > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.media-info-timeline-event-head strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
}

.media-info-timeline-event-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.media-info-timeline-kind {
  flex: 0 1 auto;
  max-width: 46%;
  color: var(--muted);
  font-size: 0.7rem !important;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: right;
}

.media-info-timeline-event-body > p {
  margin: 0;
  color: var(--soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.media-info-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.media-info-timeline-meta span {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.media-info-timeline-payload {
  margin-top: var(--space-1);
}

.media-info-timeline-payload pre {
  max-height: 320px;
}

.media-info-timeline-head > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.media-info-timeline-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.media-info-audit-coverage-note {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.media-info-audit-coverage-note strong {
  color: var(--soft);
  font-size: 0.78rem;
}

.media-info-audit-records {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.media-info-audit-record {
  min-width: 0;
}

.media-info-audit-record-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.media-info-audit-record--historical .media-info-audit-record-card {
  border-color: color-mix(in oklch, var(--yellow) 42%, var(--line));
}

.media-info-audit-record--error .media-info-audit-record-card,
.media-info-audit-record--failed .media-info-audit-record-card {
  border-color: color-mix(in oklch, var(--red) 55%, var(--line));
}

.media-info-audit-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.media-info-audit-record-head > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.media-info-audit-record-number {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.media-info-audit-record-head strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.media-info-audit-record-time {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.media-info-audit-record-status {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
}

.media-info-audit-record-details {
  display: grid;
  gap: 0.35rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.media-info-audit-record-details > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.media-info-audit-record-details > p {
  margin: 0;
  color: var(--soft);
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.media-info-audit-event-fields {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
}

.media-info-audit-event-fields .media-info-field {
  padding: var(--space-3);
  background: var(--panel-3);
}

.media-info-audit-event-fields .media-info-field strong {
  font-size: 0.82rem;
}

.media-info-audit-payload {
  margin-top: 0;
}

.media-info-audit-payload pre {
  max-height: 360px;
}

.media-info-audit-empty,
.media-info-audit-error {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.media-info-audit-empty strong,
.media-info-audit-error strong {
  color: var(--soft);
}

.media-info-audit-error {
  border-color: color-mix(in oklch, var(--yellow) 55%, var(--line-strong));
}

@media (max-width: 900px) {
  .media-info-panel {
    width: min(760px, calc(100vw - 2rem));
  }

  .media-info-glance .media-info-fields,
  .media-info-timeline-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .media-info-overlay {
    padding: 0;
  }

  .media-info-overlay--detail-page {
    inset: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .media-info-panel {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }

  .media-info-head,
  .media-info-content {
    padding: var(--space-4);
  }

  .media-info-overlay--detail-page .media-info-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
  }

  .media-info-head {
    gap: var(--space-3);
  }

  .media-info-head-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .media-info-title-block h2 {
    font-size: 1.3rem;
  }

  .media-info-title-block p {
    font-size: 0.85rem;
  }

  .media-info-fields,
  .media-info-glance .media-info-fields,
  .media-info-timeline-context {
    grid-template-columns: 1fr;
  }

  .media-info-sync-targets {
    justify-content: flex-start;
  }

  .media-info-field--wide {
    grid-column: auto;
  }

  .media-info-history-record {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .media-info-record-state {
    justify-content: flex-start;
    text-align: left;
  }

  .media-info-detail-section > summary,
  .media-info-detail-record > summary,
  .media-info-season-group > summary,
  .media-info-episode-group > summary,
  .media-info-debug-section > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .media-info-detail-count {
    width: 100%;
    text-align: left;
  }

  .media-info-record-meta {
    width: 100%;
    text-align: left;
  }

  .media-info-timeline-event-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-info-timeline-kind {
    max-width: 100%;
    text-align: left;
  }

  .media-info-timeline-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-info-audit-record-head {
    flex-direction: column;
  }

  .media-info-audit-record-status {
    max-width: 100%;
    align-self: flex-start;
  }
}

.help-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}

.help-sidebar {
  position: sticky;
  top: 3.7rem;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.help-sidebar-head h2 {
  font-size: 1rem;
}

.help-menu,
.help-menu-group {
  display: grid;
  gap: var(--space-2);
}

.help-menu-group p {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.help-menu-item {
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--soft);
  padding: 0.48rem 0.6rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.help-menu-item.active {
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.help-menu-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.help-menu-item-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
}

.help-menu-item.active .help-menu-item-desc {
  color: rgba(217, 236, 255, 0.65);
}

.help-canvas {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.help-hero {
  display: grid;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}

.help-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.help-hero h2 {
  font-size: 1.4rem;
  margin: 0;
}

.help-hero-desc {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0;
  line-height: 1.5;
}

.help-badges,
.token-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-badge {
  position: relative;
  overflow: hidden;
  padding-right: 2.7rem;
}

.help-badge--ready {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
}

.help-badge--required {
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
}

.help-badge-copy {
  position: absolute;
  top: 50%;
  right: 0.28rem;
  transform: translateY(-50%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 999px;
  background: #081014;
  padding: 0.16rem 0.42rem;
  color: #bbf7d0;
  font-size: 0.72rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
}

.help-badge:hover .help-badge-copy,
.help-badge:focus-within .help-badge-copy {
  opacity: 1;
  pointer-events: auto;
}

.help-doc-body {
  display: grid;
  gap: var(--space-3);
  color: var(--soft);
  line-height: 1.58;
}

.changelog-panel {
  display: grid;
  gap: var(--space-3);
}

/* CSS animations can never override an !important declaration (they sit
   below "important author" in the cascade), and the settings cards this
   targets set border/box-shadow with !important - so the pulse animates
   `outline` instead, which nothing else on those cards touches. */
@keyframes sectionTargetHighlightPulse {
  0% {
    outline-color: color-mix(in srgb, var(--blue), transparent 55%);
    outline-offset: 2px;
  }
  50% {
    outline-color: color-mix(in srgb, var(--blue), transparent 75%);
    outline-offset: 4px;
  }
  100% {
    outline-color: color-mix(in srgb, var(--blue), transparent 55%);
    outline-offset: 2px;
  }
}

.settings-target-highlight {
  outline: 1px solid color-mix(in srgb, var(--blue), transparent 55%) !important;
  animation: sectionTargetHighlightPulse 1.2s ease-in-out infinite;
  border-radius: var(--radius);
}

.changelog-status {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.changelog-status b {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.changelog-status span {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.4;
}

.changelog-status-update {
  background: color-mix(in srgb, var(--blue), transparent 94%);
  border-color: color-mix(in srgb, var(--blue), transparent 70%);
}

.changelog-status-ok {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.3);
}

.changelog-status-muted {
  border-color: var(--line);
}

.changelog-entry {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
  padding: var(--space-3);
  transition: border-color 0.2s ease;
}

.changelog-entry:hover {
  border-color: var(--line-strong);
}

.changelog-entry + .changelog-entry {
  margin-top: var(--space-3);
}

.changelog-entry-new {
  border-color: color-mix(in srgb, var(--blue), transparent 60%);
}

/* The changelog status reads inline with the card title ("Changelog - You're
   up to date - v1.1.0") instead of as a separate banner repeating it. Set as
   textContent from renderChangelog, so it is empty until the data loads. */
.changelog-heading-status {
  color: var(--muted);
  font-weight: 500;
}

.changelog-heading-status::before {
  content: " - ";
}

.changelog-heading-status:empty {
  display: none;
}

@media (max-width: 760px) {
  /* Keep the long status from shoving the section description off-screen. */
  .changelog-heading-status {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
  }

  .changelog-heading-status::before {
    content: none;
  }
}

/* Main / Alpha toggle on Settings -> Changelog. See
   public/modules/changelog-channels.js. */
.changelog-channel-tabs {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
  flex-wrap: wrap;
}

.changelog-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.changelog-channel-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Matches the house treatment for a selected control: a translucent tint of
   the colour with the colour as text, not a solid fill. Theme-safe in both
   light and dark, unlike white-on-amber. */
.changelog-channel-tab.is-selected {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
  color: var(--accent);
}

.changelog-channel-count {
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  .changelog-channel-tabs {
    gap: var(--space-1, 0.25rem);
  }

  .changelog-channel-tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.45rem 0.6rem;
  }
}

/* Card heading: title left, Main / Alpha tabs centred on the same row, the
   description right. The equal side columns keep the tabs at the card's
   centre. Overrides the generic sync-static-heading flex row, hence !important.
   On phones the row stacks: title, tabs, description. */
.settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) !important;
}

.settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading > .sync-heading-title {
  justify-self: start;
}

.settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading > .changelog-heading-tabs {
  display: flex !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
}

.changelog-heading-tabs .changelog-channel-tabs {
  margin: 0;
}

.settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading > span {
  justify-self: end;
  white-space: normal !important;
  text-align: right;
}

@media (max-width: 760px) {
  .settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading > span {
    justify-self: start;
    text-align: left;
  }

  .settings-pane .settings-row-main > .settings-card > .section-heading.changelog-heading.sync-static-heading > .changelog-heading-tabs {
    width: 100% !important;
  }
}

.changelog-section-heading {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.changelog-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.changelog-tag-new {
  background: var(--blue);
  color: #ffffff;
}

.changelog-tag-current {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border: 1px solid var(--line);
}

html.light-mode .changelog-tag-current {
  background: #e2e8f0;
  color: #475569;
}

html.light-mode .changelog-entry {
  background: var(--panel);
}

.changelog-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.changelog-entry-head b {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.changelog-entry-head time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.changelog-entry p {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
}

.changelog-entry ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.changelog-detail-groups { display: grid; gap: var(--space-3); }
.changelog-detail-group { display: grid; gap: var(--space-2); }
.changelog-detail-group h5 { margin: 0; color: var(--text); font-size: 0.78rem; font-weight: 700; }
.changelog-detail-subgroups { display: grid; gap: var(--space-3); }
.changelog-detail-subgroup { display: grid; gap: var(--space-2); }
.changelog-detail-subgroup h6 { margin: 0; color: var(--muted); font-size: 0.74rem; font-weight: 700; }

.help-doc-body ol,
.credential-guide ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.2rem;
}

.guide-callout {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: var(--space-3);
}

.credential-guide h3 {
  margin: var(--space-2) 0 0;
  color: var(--text);
  font-size: 0.9rem;
}

.terminal-output,
.copy-block {
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
  color: #dbe3ea;
}

.terminal-output {
  padding: var(--space-3);
  font-size: 0.78rem;
  line-height: 1.48;
  white-space: pre-wrap;
}

.copy-block {
  position: relative;
}

.copy-block pre {
  margin: 0;
  overflow: auto;
  padding: var(--space-3);
  padding-right: 4.5rem;
  color: #dbe3ea;
  font-size: 0.78rem;
  line-height: 1.48;
  white-space: pre-wrap;
}

.copy-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 2;
}

.copy-button:hover {
  background: var(--panel-3);
  border-color: var(--blue);
  color: var(--blue);
}

html.light-mode .copy-button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light-mode .copy-button:hover {
  background: #f1f5f9 !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

/* ── Edit dialogs (date / image / fix-match) ─────────────────────────── */

.media-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.edit-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 13, 0.72);
  backdrop-filter: blur(4px);
}

.edit-dialog {
  width: min(480px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg, #0d1117);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
}

.edit-dialog--wide {
  width: min(980px, 96vw);
}

.fix-match-dialog {
  width: min(1320px, 96vw);
  max-height: 94vh;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  gap: 0.65rem;
  --fix-match-poster-width: 6.25rem;
  --fix-match-poster-height: 9.375rem;
}

.fix-match-dialog > h3 {
  margin: 0;
}

.fix-match-dialog > .fix-match-intro,
.fix-match-dialog > .fix-match-yt-intro {
  margin: 0;
  line-height: 1.45;
}

.fix-match-dialog > .fix-match-intro {
  max-width: 82ch;
}

.fix-match-dialog > .fix-match-yt-rule {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.15rem 0 0;
}

.fix-match-dialog > .fix-match-yt-row {
  display: flex;
  gap: 0.5rem;
}

.fix-match-dialog .fix-match-yt-row .fix-match-yt-input {
  flex: 1;
  min-width: 0;
}

.fix-match-search-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.fix-match-search-row .fix-match-input {
  flex: 1 1 auto;
  min-width: 0;
}

.fix-match-search-progress {
  display: grid;
  gap: 0.35rem;
  margin-top: -0.45rem;
}

.fix-match-search-progress[hidden] {
  display: none;
}

.fix-match-search-progress-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.fix-match-search-progress-spinner,
.fix-match-result-progress-spinner {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: fix-match-spinner 760ms linear infinite;
}

.fix-match-search-progress-track {
  display: block;
  width: 100%;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 78%, transparent);
}

.fix-match-search-progress-track > span {
  display: block;
  width: 32%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  animation: fix-match-search-progress 1.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-origin: left center;
}

.fix-match-search-status {
  min-height: 0;
}

.fix-match-search-status:empty {
  display: none;
}

.edit-dialog--watch-date {
  width: min(640px, 96vw);
}

.edit-image-dialog {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: var(--space-3);
  width: min(1800px, 98vw); /* Expanded from 1600px/95vw to make the main box wider */
  height: min(1100px, 95vh); /* Constant height to keep main box the same size across menus */
  max-height: min(1100px, 95vh);
  overflow: hidden; /* Prevent double scrollbar, let grid handle scrolling */
}

.edit-dialog h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.edit-image-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.edit-image-sidebar {
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0;
  padding-right: 0.75rem;
  border-right: 1px solid var(--line);
}

.edit-image-tab {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 100ms, color 100ms, background 100ms;
}

.edit-image-sidebar .edit-image-tab {
  width: 100%;
  min-height: 2.35rem;
  text-align: left;
}

.edit-image-tab.active {
  border-color: var(--blue);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 88%);
}

.edit-image-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
}

.edit-image-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}

.edit-image-subtitle {
  margin: 0.2rem 0 0;
}

.edit-image-match-row {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.edit-image-match-row .edit-image-match-input {
  flex: 1 1 auto;
  min-width: 0;
}

.edit-image-match-results {
  max-height: 260px;
  flex-shrink: 0;
}

.edit-image-tools {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.edit-image-custom-toggle {
  min-width: 8.5rem;
}

.edit-image-custom-panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface), transparent 35%);
}

.edit-image-custom-panel[hidden] {
  display: none;
}

.edit-image-upload-label {
  display: inline-grid;
  place-items: center;
  min-height: 2.35rem;
  cursor: pointer;
}

.edit-image-upload-label input {
  display: none;
}

.edit-image-search-links {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 0.81rem;
}

.edit-image-search-links a {
  color: var(--blue);
  text-decoration: none;
}

.edit-image-search-links a:hover {
  text-decoration: underline;
}

.edit-image-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-2); /* Clean card background */
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.25rem;
  cursor: pointer;
  transition: border-color 100ms;
}

.edit-image-option:hover,
.edit-image-option.selected {
  border-color: var(--blue);
}

.edit-image-option img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--poster-radius);
  display: block;
}

.season-posters-back {
  margin-bottom: 0.5rem;
}

.season-option-label {
  display: block;
  padding: 0.35rem 0.25rem 0.1rem;
  font-size: 0.85rem;
  text-align: center;
}

.edit-image-option--logo {
  width: 100%;
}

.edit-image-option--logo img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: 160px; /* Increased from 120px to make logos appear bigger */
  object-fit: contain;
  /* Neutral mid-tone checkerboard pattern to make both dark and light transparent logos visible */
  background-color: #bdc3c7;
  background-image: linear-gradient(45deg, #7f8c8d 25%, transparent 25%, transparent 75%, #7f8c8d 75%, #7f8c8d),
                    linear-gradient(45deg, #7f8c8d 25%, #bdc3c7 25%, #bdc3c7 75%, #7f8c8d 75%, #7f8c8d);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  padding: 0.75rem;
}

.edit-image-option--backdrop img {
  aspect-ratio: 16 / 9;
}

.edit-image-badge-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
}

.edit-image-logo-lang {
  font-size: 0.78rem; /* Increased from 0.65rem */
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.edit-image-grid.edit-image-grid--logo {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

.edit-image-grid.edit-image-grid--backdrop {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.edit-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.edit-dialog-status {
  font-size: 0.78rem;
  color: var(--danger);
  min-height: 1em;
  margin: 0;
}

.edit-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
  align-content: start; /* Pack rows at the top to prevent stretching */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 0;
}

@media (max-width: 760px) {
  .edit-image-dialog {
    display: flex !important;
    flex-direction: column !important;
    height: 90vh !important;
    max-height: 90vh !important;
  }

  .edit-image-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    overflow-x: auto;
    padding-right: 0;
    padding-bottom: 0.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .edit-image-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }

  .edit-image-sidebar .edit-image-tab {
    width: auto;
    min-width: max-content;
  }

  .edit-image-tools {
    align-items: stretch;
  }

  .edit-image-custom-toggle {
    width: 100%;
  }

  .edit-image-search-links {
    justify-content: flex-start;
  }

  .edit-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .edit-image-grid.edit-image-grid--logo {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .edit-image-grid.edit-image-grid--backdrop {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

.edit-image-source-badge {
  font-size: 0.78rem; /* Increased from 0.6rem */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem; /* Increased padding */
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted), transparent 70%);
  color: var(--muted);
}

.edit-image-source-badge--fanart {
  background: color-mix(in srgb, var(--orange, #f59e0b), transparent 75%);
  color: var(--orange, #f59e0b);
}

.edit-image-source-badge--tvdb {
  background: color-mix(in srgb, var(--green, #22c55e), transparent 75%);
  color: var(--green, #22c55e);
}

.availability-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.availability-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.edit-date-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0 0.2rem;
  line-height: 1;
  vertical-align: middle;
  transition: color 100ms;
}

.edit-date-icon-btn:hover {
  color: var(--text);
}

/* Poster three-dot overflow menu (Mark Unwatched / Edit watch date / Fix
   match) shown on hover over posters outside the media detail pages. The
   button lives inside the poster wrapper; the dropdown itself is portaled
   to <body> by poster-menu.js and positioned with inline styles, since the
   wrappers below are narrow and clip overflow. */
.poster-media-wrap {
  position: relative;
  display: block;
}

.history-mini-card-poster-wrapper,
.history-card-poster-wrapper {
  position: relative;
}

.poster-overflow-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  /* Deliberately independent of the app's light/dark theme - the button
     sits on top of poster art of any brightness, so it needs its own fixed
     contrast rather than following --text/--panel. The blur softens
     whatever's in the image behind it, and the light ring + dark shadow
     combination keeps the circle's edge visible whether that art is a
     bright poster or a near-black one. */
  background: rgba(15, 15, 18, 0.72);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, background 120ms ease;
}

.poster-overflow-btn:hover,
.poster-overflow-btn:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.6);
}

/* html.light-mode button { color: var(--text) } below outranks the plain
   .poster-overflow-btn class on specificity (element+class beats class
   alone), which repainted the dots dark in light mode despite the fixed
   white color set above - restate it here so light mode keeps the same
   theme-independent white-on-dark look as dark mode. */
html.light-mode .poster-overflow-btn {
  color: #fff;
}

.movie-card:hover .poster-overflow-btn,
.folder-card:hover .poster-overflow-btn,
.history-grid-card:hover .poster-overflow-btn,
.history-mini-card:hover .poster-overflow-btn,
.history-page-card:hover .poster-overflow-btn,
.shared-media-card:hover .poster-overflow-btn,
.poster-overflow-btn.is-open,
.poster-overflow-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Touch devices have no hover state - keep the button reachable and give it
   a larger tap target. */
@media (hover: none) {
  .poster-overflow-btn {
    opacity: 1;
    pointer-events: auto;
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
  }
}

.poster-overflow-dropdown {
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 170px;
  padding: 0.3rem;
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.poster-overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.poster-overflow-item:hover,
.poster-overflow-item:focus-visible {
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.poster-overflow-item-danger {
  color: var(--red);
}

.poster-overflow-item-danger:hover,
.poster-overflow-item-danger:focus-visible {
  border-left-color: color-mix(in srgb, var(--red) 70%, transparent);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}

.poster-overflow-item-has-submenu {
  position: relative;
  padding-right: 1.8rem;
}

.poster-overflow-item-has-submenu::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 0.6rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-50%);
}

.poster-overflow-item-has-submenu:hover::after,
.poster-overflow-item-has-submenu:focus-visible::after {
  color: #fff;
}

.poster-overflow-item-has-submenu[aria-expanded="true"],
.poster-overflow-item-has-submenu[aria-expanded="true"]::after {
  color: var(--accent);
}

.poster-overflow-item-has-submenu[aria-expanded="true"] {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.poster-overflow-submenu {
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 12rem;
  max-width: min(15rem, calc(100vw - var(--space-4)));
  max-height: min(20rem, calc(100vh - var(--space-4)));
  overflow: auto;
  padding: var(--space-1);
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.poster-overflow-submenu .poster-overflow-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-overflow-submenu-empty {
  padding: 0.45rem 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.poster-overflow-item-create {
  margin-top: var(--space-1);
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

/* Poster-card unwatch feedback (watch-action.js confirmAndMarkUnwatched):
   dim immediately on confirm, then fade + shrink out once the server
   confirms removal, instead of the card just sitting there unchanged. */
.card-removing {
  filter: grayscale(65%);
  pointer-events: none;
  transition: filter 200ms ease;
  animation: card-removing-pulse 1100ms ease-in-out infinite;
}

@keyframes card-removing-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .card-removing {
    animation: none;
    opacity: 0.4;
  }
}

.card-removed {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.fix-match-results {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 420px;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.fix-match-provider-warning {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 58%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow) 9%, var(--panel-2));
  color: var(--text);
  line-height: 1.45;
}

.fix-match-provider-warning > span {
  color: var(--muted);
}

.fix-match-provider-warning .edit-dialog-skip-warning {
  justify-self: start;
  margin-top: 0.2rem;
}

.fix-match-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 0.85rem;
  transition: background 100ms, border-color 100ms;
}

.fix-match-result:disabled {
  cursor: default;
  opacity: 0.55;
}

.fix-match-result:hover {
  background: var(--panel-3);
  border-color: var(--blue);
}

.fix-match-result.is-rematching {
  align-items: flex-start;
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 90%);
  opacity: 1;
}

.fix-match-result img {
  width: 46px;
  height: 69px;
  object-fit: cover;
  border-radius: var(--poster-radius);
  flex-shrink: 0;
}

.fix-match-result small {
  color: var(--muted);
  font-size: 0.81rem;
}

.fix-match-result-progress {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 9rem;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.fix-match-dialog .fix-match-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  max-height: min(62vh, 680px);
  margin-top: 0.15rem;
  padding: 0.25rem 0.15rem 0.5rem;
}

.fix-match-dialog .fix-match-results:empty {
  display: none;
}

/* Fix Match: per-show TVDB/TMDB season and episode numbers (show-season-source.js). */
.fix-match-dialog .season-source-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.fix-match-dialog .fix-match-season-source {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0;
  border-block: 1px solid var(--line);
}

.fix-match-dialog .season-source-intro {
  margin: 0;
  line-height: 1.4;
}

.fix-match-dialog .season-source-options,
.fix-match-dialog .season-source-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.fix-match-dialog .season-source-option {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  cursor: pointer;
}

.fix-match-dialog .season-source-confirm {
  margin: 0.1rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.fix-match-dialog .season-source-confirm-title {
  margin: 0;
  line-height: 1.4;
}

.fix-match-dialog .season-source-confirm-list {
  margin: 0.4rem 0 0.55rem;
  padding-left: 1.1rem;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.fix-match-dialog .season-source-confirm-actions {
  gap: 0.4rem 0.5rem;
}

.fix-match-dialog .fix-match-result {
  flex-direction: row;
  align-items: stretch;
  gap: 0.85rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: var(--panel-2);
  padding: 0.65rem;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.fix-match-dialog .fix-match-result:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--yellow);
  transform: translateY(-1px);
}

.fix-match-dialog .fix-match-result.is-rematching {
  align-items: stretch;
}

.fix-match-dialog .fix-match-result img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--poster-radius);
  background: var(--panel-3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.fix-match-dialog .fix-match-result--discover .shared-media-card-poster-wrap {
  flex: 0 0 var(--fix-match-poster-width);
  width: var(--fix-match-poster-width);
  height: var(--fix-match-poster-height);
  max-height: none;
  align-self: flex-start;
  aspect-ratio: 2 / 3;
}

/* Match choices use the same poster-first geometry as Discover. Keep the
   result itself a button so the whole tile remains one keyboard target, but
   show only the title and overview in the body. */
.fix-match-dialog .fix-match-result--discover {
  position: relative;
  min-height: 11.5rem;
  text-align: left;
}

.fix-match-dialog .fix-match-result--discover.is-rematching {
  animation: fix-match-result-working 1.2s ease-in-out infinite;
  border-color: var(--blue);
}

.fix-match-dialog .fix-match-result--discover .fix-match-result-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin-top: auto;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
}

.fix-match-dialog .fix-match-result--discover .shared-media-card-body {
  gap: 0.35rem;
  padding: 0;
  justify-content: flex-start;
}

.fix-match-dialog .fix-match-result--discover .shared-media-card-title {
  min-height: 2.5em;
  padding-right: 0;
}

.fix-match-dialog .fix-match-result--discover .shared-media-card-description {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  align-items: flex-start;
  margin: 0.15rem 0;
}

.fix-match-dialog .fix-match-result--discover .shared-media-card-description-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.fix-match-dialog .fix-match-result-title {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.3;
  word-break: break-word;
}

.fix-match-dialog .fix-match-result-title small {
  display: block;
  margin-top: 0.2rem;
}

.fix-match-result-progress-label {
  white-space: nowrap;
}

@keyframes fix-match-spinner {
  to { transform: rotate(360deg); }
}

@keyframes fix-match-search-progress {
  0% { opacity: 0.35; transform: translateX(-130%) scaleX(0.75); }
  50% { opacity: 1; transform: translateX(105%) scaleX(1); }
  100% { opacity: 0.35; transform: translateX(330%) scaleX(0.75); }
}

@keyframes fix-match-result-working {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.88; transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .fix-match-search-progress-spinner,
  .fix-match-result-progress-spinner,
  .fix-match-search-progress-track > span,
  .fix-match-dialog .fix-match-result--discover.is-rematching {
    animation: none;
  }
}

@media (max-width: 640px) {
  .fix-match-dialog {
    width: min(calc(100% - 1rem), 560px);
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    padding: 1rem;
    --fix-match-poster-width: 5.5rem;
    --fix-match-poster-height: 8.25rem;
  }

  .fix-match-search-row {
    flex-direction: column;
  }

  .fix-match-search-row .fix-match-search-btn {
    width: 100%;
  }

  .fix-match-dialog .fix-match-results {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    max-height: 55vh;
  }
}

@media (max-width: 640px) {
  .edit-dialog-overlay {
    align-items: center;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .edit-dialog:not(.fix-match-dialog):not(.edit-image-dialog) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    min-width: 0;
    overflow-x: hidden;
    padding: 0.85rem;
  }

  .edit-image-dialog {
    width: min(calc(100% - 1rem), 60rem);
    max-width: calc(100vw - 1rem);
    height: calc(100vh - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
  }
}

.edit-dialog-status.is-success {
  color: var(--green, #22c55e);
}

.edit-dialog-status.is-muted {
  color: var(--muted);
}

/* ── end edit dialogs ────────────────────────────────────────────────── */

.logs-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 6.5rem);
  max-height: calc(100vh - 6.5rem);
  overflow: hidden;
}

.logs-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.activity-log {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface-2, rgba(15, 23, 42, 0.6));
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0, 0, 0, 0.2));
  margin-top: var(--space-2);
}

.activity-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel-bg, rgba(255, 255, 255, 0.03));
  border-bottom: 1px solid var(--line);
}

.activity-log-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.activity-log-icon {
  width: 18px;
  height: 18px;
  stroke: var(--accent, #3b82f6);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.activity-log-copy strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.activity-log-copy small {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.activity-log-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.logs-category-filter {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

html.light-mode .logs-category-filter {
  background: transparent;
  border-bottom-color: var(--line);
}

.logs-cat-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.logs-cat-btn:hover {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--line-strong);
}

.logs-cat-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue), transparent 75%);
}

html.light-mode .logs-cat-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

html.light-mode .logs-cat-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

html.light-mode .logs-cat-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

[data-settings-panel="logs"] .logs-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 220px);
}

.logs-terminal {
  flex: 1;
  min-height: 500px;
  max-height: none;
  overflow-y: auto;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  margin-top: var(--space-3);
  contain: content;
}

html.light-mode .logs-terminal {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

.log-section-header {
  font-weight: 700;
  color: var(--blue);
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.log-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}

html.light-mode .log-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.log-row-error {
  background: rgba(244, 63, 94, 0.08);
  border-radius: 4px;
  padding-left: 0.4rem;
}

.log-time {
  color: var(--muted);
  font-size: 0.78rem;
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
}

.log-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.2;
}

.badge-plex {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.badge-sync {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.badge-poll {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.badge-system {
  background: rgba(192, 132, 252, 0.12);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.25);
}

.badge-error {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

html.light-mode .badge-plex {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.25);
}

html.light-mode .badge-sync {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.25);
}

html.light-mode .badge-poll {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.25);
}

html.light-mode .badge-system {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
  border-color: rgba(147, 51, 234, 0.25);
}

html.light-mode .badge-error {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
  border-color: rgba(225, 29, 72, 0.25);
}

.log-instance {
  color: var(--muted);
  font-size: 0.7rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.log-msg {
  color: var(--text);
  word-break: break-word;
}

html.light-mode .log-msg {
  color: #1e293b;
}

@media (max-width: 980px) {
  .app-chassis {
    width: calc(100% - 1rem);
    margin-top: var(--space-2);
  }

  .topbar,
  .settings-hub,
  .help-layout {
    grid-template-columns: 1fr;
  }

  .settings-sidebar,
  .help-sidebar {
    position: static;
  }

  .settings-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-tab {
    text-align: center;
  }

  .topnav {
    justify-content: stretch;
  }

  .nav-tab {
    flex: 1 0 auto;
  }

  .insight-grid,
  .stats-toolbar,
  .admin-credentials-grid,
  .explorer-overview-view,
  .stats-grid,
  .episode-row,
  .ranking-head,
  .ranking-row,
  .insight-row {
    grid-template-columns: 1fr;
  }

  .stats-controls {
    justify-content: stretch;
  }

  .stats-controls .compact-field {
    flex: 1 1 10rem;
  }

  .stats-lb-leader {
    grid-template-columns: 5.5rem 1.8rem minmax(0, 1fr);
  }

  .stats-lb-podium {
    grid-template-columns: 1fr;
  }

  .table-head {
    display: none;
  }

  .table-row {
    grid-template-columns: 1fr;
  }

  .now-card {
    grid-template-columns: 3.9rem minmax(0, 1fr);
  }

  .now-poster {
    width: 3.9rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 13px;
  }

  .app-chassis {
    width: calc(100% - 1rem);
    gap: var(--space-3);
  }

  .topbar {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .timeline-toolbar,
  .week-controls,
  .logs-actions,
  .explorer-controls,
  .import-actions,
  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .explorer-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .explorer-heading .explorer-controls {
    justify-self: stretch;
  }

  .dashboard-history-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dashboard-history-filter {
    justify-content: center;
    justify-self: stretch;
  }

  .week-picker {
    grid-template-columns: 1fr;
  }

  .search-box,
  .explorer-search-box,
  .week-controls,
  .logs-actions,
  .explorer-controls,
  .timeline-toolbar {
    width: 100%;
  }

  .compact-field {
    grid-template-columns: 1fr;
  }

  .logs-actions button {
    width: 100%;
  }

  .settings-menu {
    grid-template-columns: 1fr;
  }

  body .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(110px, var(--poster-width, 160px)), 1fr));
  }

  body .dashboard-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .history-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(max(110px, var(--history-poster-width, 86px)), 1fr));
  }

  .compact-endpoint {
    grid-template-columns: 1fr;
  }

  .help-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  body .page-topbar {
    height: auto;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) var(--control-inline-padding);
  }

  body .page-topbar-title {
    width: 100%;
    justify-content: flex-start;
  }

  body .page-topbar-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 2px;
  }

  body .page-topbar-actions::-webkit-scrollbar {
    display: none;
  }

  body .page-topbar-actions .explorer-controls:not(.hidden),
  body .page-topbar-actions .stats-controls:not(.hidden),
  body .page-topbar-actions .upcoming-controls:not(.hidden),
  body .page-topbar-actions .discover-controls:not(.hidden),
  body .page-topbar-actions .sidebar-sub-menu:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  body .page-topbar-actions .discover-controls:not(.hidden) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .page-topbar-actions .compact-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body .page-topbar-actions .compact-field span {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  body .page-topbar-actions .compact-field input,
  body .page-topbar-actions .compact-field select {
    width: auto !important;
    min-width: 7.5rem !important;
    height: 1.8rem !important;
    min-height: 1.8rem !important;
    font-size: 0.81rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  body .page-topbar-actions .explorer-search-box {
    min-width: 10rem !important;
  }

  body .page-topbar-actions .explorer-search-box input {
    min-width: 10rem !important;
  }

  body .page-topbar-actions .explorer-size-slider input {
    width: 60px !important;
    min-width: 60px !important;
  }

  body .page-topbar-actions .explorer-view-toggle {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.15rem !important;
    flex-shrink: 0 !important;
  }

  body .page-topbar-actions .explorer-view-btn {
    padding: 0.2rem 0.4rem !important;
    min-height: 1.8rem !important;
    font-size: 0.81rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .page-topbar-actions .explorer-hide-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
  }

  body .page-topbar-actions .sidebar-sub-menu .settings-tab {
    padding: 0.25rem 0.5rem !important;
    min-height: 1.8rem !important;
    font-size: 0.81rem !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  body #mediaDetailActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 0.35rem;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  body #mediaDetailActions::-webkit-scrollbar {
    display: none;
  }

  body .topbar-controls-menu:not(.hidden) {
    display: block;
    width: 100%;
  }

  body .topbar-controls-trigger {
    display: flex;
    width: 100%;
    min-height: 2rem;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
  }

  body .topbar-controls-trigger::-webkit-details-marker {
    display: none;
  }

  body .topbar-controls-trigger::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-bottom: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 150ms ease;
  }

  body .topbar-controls-menu[open] .topbar-controls-trigger::after {
    transform: rotate(225deg);
  }

  body .topbar-controls-panel {
    display: none;
  }

  body .topbar-controls-menu[open] .topbar-controls-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
  }

  body .topbar-controls-panel > .stats-controls,
  body .topbar-controls-panel > .sidebar-sub-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  body .topbar-controls-panel > .stats-controls .compact-field,
  body .topbar-controls-panel > .sidebar-sub-menu .settings-tab,
  body .topbar-controls-panel > .sidebar-sub-menu .help-menu-item {
    width: 100%;
  }
}

.modal-panel--immersive {
  width: min(1900px, calc(100vw - 32px)) !important;
  height: min(1120px, calc(100vh - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  background: var(--bg) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
}

.modal-panel--immersive .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.modal-panel--immersive .modal-head {
  display: none !important;
}

.modal-panel--immersive .modal-backdrop-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0.25;
}

.immersive-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4) clamp(1.25rem, 2.4vw, 3rem) 2rem;
  gap: 0.75rem;
}

.immersive-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.immersive-topbar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.immersive-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.immersive-back-button {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 150ms ease;
  margin-bottom: 0.5rem;
}

.immersive-back-button:hover {
  color: var(--text);
}

.immersive-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .immersive-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.immersive-poster-img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.immersive-poster-img[data-lightbox-src] {
  cursor: zoom-in;
}

.immersive-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .immersive-meta {
    align-items: center;
  }
}

.format-badge {
  background: #f59e0b;
  color: #0b0f12;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.immersive-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
}

.immersive-subtitle {
  color: var(--soft);
  font-size: 0.9rem;
  margin: 0;
}

.ratings-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.rating-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.81rem;
  font-weight: 800;
}

.rating-pill-link {
  min-height: 2rem;
  color: var(--text);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rating-pill-link:hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--accent), transparent 35%);
  color: #ffffff;
}

.rating-pill-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 4px;
  flex: 0 0 auto;
}


/* Match the Plex/Emby/Jellyfin app-link pill style (.media-app-link) exactly,
   for the TMDB/TVDB/IMDb pills that also carry a brand icon - no background
   fill, just the icon and label. */
.rating-pill--brand {
  min-height: 2.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}

.rating-pill--brand:hover {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

.rating-pill--personal {
  appearance: none;
  background: color-mix(in srgb, var(--accent), transparent 92%);
  border-color: color-mix(in srgb, var(--accent), transparent 62%);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rating-pill--personal:hover,
.rating-pill--personal:focus-visible {
  background: color-mix(in srgb, var(--accent), transparent 84%);
  border-color: var(--accent);
  color: var(--accent);
}

.rating-pill--personal.has-rating {
  color: var(--accent);
}

.personal-rating-star {
  color: var(--accent);
}

@media (max-width: 640px) {
  .rating-pill {
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
  }
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.action-pill {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.81rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.action-pill:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--blue), transparent 40%);
  color: var(--blue);
}

.action-pill:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.personal-media-detail-action.has-personal-state {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  border-color: color-mix(in srgb, var(--accent), transparent 48%);
  color: var(--accent);
}

.personal-media-detail-action.has-personal-state:hover,
.personal-media-detail-action.has-personal-state:focus-visible {
  background: color-mix(in srgb, var(--accent), transparent 78%);
  border-color: var(--accent);
  color: var(--accent);
}

.actions-tools-dropdown {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.actions-tools-trigger {
  cursor: pointer;
  list-style: none;
}

.actions-tools-trigger::-webkit-details-marker {
  display: none;
}

body #mediaDetailActions.actions-collapsed .actions-tools-dropdown {
  position: relative;
  display: inline-block;
}

body #mediaDetailActions.actions-collapsed .actions-tools-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 999;
  min-width: 10.5rem;
  flex-direction: column;
  overflow: hidden;
  padding: 0.25rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-3);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.25));
}

body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill span,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn span,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill span {
  min-height: 0;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

body #mediaDetailActions.actions-collapsed .actions-tools-dropdown[open] .actions-tools-panel {
  display: flex;
}

body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill {
  display: flex;
  min-width: 10rem;
  width: 100%;
  max-width: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.81rem;
  letter-spacing: normal;
  opacity: 0.95;
  text-align: left;
  text-transform: none;
}

body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill:hover,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn:hover,
body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

body:has(#mediaDetailActions.actions-collapsed .actions-tools-dropdown[open]) .page-topbar-actions {
  overflow: visible;
}

body #mediaDetailActions.actions-collapsed:has(.actions-tools-dropdown[open]) {
  overflow: visible;
}

.media-actions-menu {
  display: flex;
  min-width: 0;
}

.media-actions-menu-panel {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.media-actions-menu-trigger {
  display: none;
}

.immersive-overview {
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 800px;
}

.progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.progress-section h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}

.progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: inherit;
  transition: width 300ms ease;
}

html.light-mode .progress-bar-fill {
  background: var(--blue);
}

.episodes-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.episodes-section h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.show-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.show-section-title h3 {
  margin: 0;
}

.show-section-title span,
.show-load-pill,
.season-poster-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.show-load-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #101820;
  padding: 0.25rem 0.6rem;
}

.show-load-pill.muted {
  color: var(--soft);
}

.episodes-accordion-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.show-season-block {
  display: grid;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  padding: 0;
}

.show-season-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.show-season-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.show-season-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.show-episode-list {
  display: grid;
  gap: var(--space-2);
}

.immersive-episode-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  padding: var(--space-2);
}

.immersive-episode-row.is-watched {
  border-color: rgba(16, 185, 129, 0.15);
}

/* Episode tile watch/unwatch feedback (media-detail-show.js): pulse the
   whole tile while the save is in flight, matching the .card-removing
   convention used for poster-card unwatch. */
.immersive-episode-row.is-saving {
  pointer-events: none;
  animation: episode-row-saving-pulse 1100ms ease-in-out infinite;
}

@keyframes episode-row-saving-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-episode-row.is-saving {
    animation: none;
    opacity: 0.7;
  }
}

.episode-thumb-wrap {
  position: relative;
}

.episode-thumb {
  display: block;
  width: 8rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #070b0e;
}

.episode-thumb-syncing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.25rem;
}

.episode-spoiler-placeholder {
  object-fit: cover;
}

.media-spoiler-toggle {
  cursor: pointer;
  user-select: none;
}

.media-spoiler-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
  flex: 0 0 auto;
}

.immersive-episode-copy {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
}

.immersive-episode-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.immersive-episode-availability {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.immersive-episode-availability.has-availability {
  justify-content: space-between;
}

.immersive-episode-availability-pills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.immersive-episode-availability-pills:empty {
  display: none;
}

.immersive-episode-title-row > b {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.25;
}

.episode-personal-rating {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.7rem;
  max-width: 100%;
  padding: 0.16rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.episode-personal-rating:hover,
.episode-personal-rating:focus-visible,
.episode-personal-rating.has-rating {
  background: color-mix(in srgb, var(--accent), transparent 90%);
  border-color: color-mix(in srgb, var(--accent), transparent 38%);
  color: var(--accent);
}

.immersive-episode-title-row time,
.immersive-episode-meta-row time {
  color: var(--muted);
  font-size: 0.80rem;
  font-weight: 800;
}

.immersive-episode-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.immersive-episode-dates {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.immersive-episode-copy p {
  display: -webkit-box !important;
  overflow: hidden;
  margin: 0;
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.immersive-episode-actions {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
}

.watched-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(16, 185, 129, 0.34);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.11);
  color: #a7f3d0;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.seasons-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seasons-section h3 {
  font-size: 0.94rem;
  font-weight: 700;
  margin: 0;
}

.horizontal-scroll-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.horizontal-scroll-row::-webkit-scrollbar {
  height: 6px;
}

.horizontal-scroll-row::-webkit-scrollbar-track {
  background: transparent;
}

.horizontal-scroll-row::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: 3px;
}

.season-poster-card {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.season-poster-img {
  width: 100px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  transition: transform 150ms ease, border-color 150ms ease;
}

.season-poster-card:hover .season-poster-img {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.season-poster-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.season-poster-card.active .season-poster-name {
  color: #f59e0b;
}

.season-poster-card.active .season-poster-img {
  border-color: #f59e0b;
}

.watch-date-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 9, 0.84);
  backdrop-filter: blur(3px);
  padding: var(--space-4);
}

.watch-date-dialog {
  display: grid;
  width: min(640px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  gap: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #0d141a;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.watch-date-dialog h3,
.watch-date-dialog p {
  margin: 0;
}

.watch-date-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.watch-date-head-text {
  display: grid;
  gap: 0.25rem;
}

.watch-date-head h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--text);
}

.watch-date-sub {
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.watch-date-close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color 150ms ease;
}

.watch-date-close:hover {
  color: var(--text);
}

.watch-date-dialog p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.watch-date-intro {
  font-size: 0.9rem !important;
}

.watch-date-episodes {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d11;
  overflow: hidden;
}

.watch-date-episodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #11181f;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.watch-date-episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.watch-date-episode {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.watch-date-episode:last-child {
  border-bottom: 0;
}

.watch-date-episode-code {
  flex: none;
  color: var(--text);
  font-size: 0.81rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.watch-date-episode-title {
  color: var(--soft);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-date-episode-air {
  flex: none;
  color: var(--muted);
  font-size: 0.78rem;
}

.watch-date-section-label {
  color: var(--muted);
  font-size: 0.80rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.watch-date-specials-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d11;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.watch-date-specials-toggle input {
  cursor: pointer;
}

.watch-date-unreleased-toggle {
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--text);
}

.watch-date-unreleased-toggle small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.watch-date-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
}

.season-dedupe-panel {
  display: grid;
  gap: 0.6rem;
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: var(--radius);
  background: rgba(244, 63, 94, 0.06);
  padding: 0.7rem 0.9rem;
}

.season-dedupe-panel .muted-copy {
  margin: 0;
}

.season-dedupe-btn {
  width: max-content;
}

.watch-date-list {
  display: grid;
  gap: 0.7rem;
}

.watch-date-list-row {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.7rem 0.9rem;
}

.watch-date-row-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.watch-date-row-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.80rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.watch-date-value-btn {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.watch-date-value-btn:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.watch-date-calendar-slot:not(:empty) {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}

.watch-date-calendar-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .watch-date-overlay {
    align-items: stretch;
    padding: 0.5rem;
  }

  .watch-date-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    gap: 0.75rem;
    overflow-x: hidden;
    padding: 0.85rem;
  }

  .watch-date-head {
    gap: 0.5rem;
  }

  .watch-date-head h3 {
    font-size: 1.05rem;
  }

  .watch-date-intro {
    font-size: 0.8rem !important;
  }

  .watch-date-episode {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 0.5rem;
  }

  .watch-date-episode-air {
    grid-column: 2;
    white-space: normal;
  }

  .watch-date-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-body {
    flex-direction: column;
    gap: 0.75rem;
  }

  .wd-time {
    width: 100%;
    align-items: stretch;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 0.75rem;
    padding-left: 0;
  }

  .wd-time-selects {
    width: 100%;
  }

  .wd-time-selects .wd-select {
    flex: 1 1 0;
    min-width: 0;
  }

  .watch-date-calendar-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.watch-date-remove-btn {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.watch-date-remove-btn:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
  color: #f87171;
}

.watch-date-remove-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.watch-date-add-btn {
  width: max-content;
  font-size: 0.8rem;
}

.watch-date-pick {
  display: grid;
  gap: 0.3rem;
  text-align: left;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.watch-date-pick:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.watch-date-pick.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.watch-date-pick:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.watch-date-pick-title {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 850;
}

.watch-date-pick-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

.watch-date-custom {
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.9rem 1rem;
}

.watch-date-custom label {
  color: var(--muted);
  font-size: 0.80rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Custom inline date + time picker */
.watch-date-picker {
  display: grid;
  gap: var(--space-2);
}

.wd-display {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
}

.wd-body {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

.wd-calendar {
  display: grid;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.wd-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.wd-month {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.wd-month:hover {
  background: var(--field);
  border-color: var(--line);
}

.wd-month-select-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  justify-content: center;
}

.wd-month-select {
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
}

.wd-nav {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.wd-nav:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--blue);
}

.wd-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wd-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.wd-dow {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1px 0;
}

.wd-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}

.wd-day {
  width: 100%;
  height: 100%;
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wd-day:hover:not(:disabled) {
  background: var(--field);
  border-color: var(--line-strong);
}

.wd-day.is-today {
  border-color: var(--line-strong);
}

.wd-day.is-selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.wd-day:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.wd-empty {
  pointer-events: none;
}

.wd-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  border-left: 1px solid var(--line);
  padding-left: var(--space-3);
  justify-content: flex-start;
}

.wd-time-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  align-self: flex-start;
}

.wd-time-selects {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wd-colon {
  font-weight: 800;
  color: var(--text);
}

.wd-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
}

.wd-select:focus {
  outline: none;
  border-color: var(--blue);
}

.wd-now-btn {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.wd-now-btn:hover {
  border-color: var(--line-strong);
  color: var(--blue);
}

.wd-use {
  width: 100%;
}

/* Ghost / secondary variant of .action-pill used for destructive-ish actions
   like "Mark unwatched". */
.action-pill-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
}

.action-pill-ghost:hover {
  background: transparent;
  border-color: #b4474f;
  color: #fca5a5;
}

.media-up-next-show-btn.is-added {
  color: var(--green);
}

/* Strong destructive variant for the permanent "Delete" action. */
.action-pill-danger {
  background: transparent;
  border-color: var(--line-strong);
  color: #fca5a5;
}

.action-pill-danger:hover {
  background: transparent;
  border-color: #b4474f;
  color: #fca5a5;
}

/* Seerr request button variant */
.seerr-request-btn {
  min-height: 2rem;
  background: rgba(88, 101, 242, 0.16);
  border-color: rgba(94, 234, 212, 0.38);
  color: #c7d2fe;
}

.seerr-request-btn:hover {
  background: rgba(88, 101, 242, 0.26);
  border-color: #5eead4;
  color: #ffffff;
}

.seerr-request-btn-4k {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(94, 234, 212, 0.55);
  color: #99f6e4;
}

.seerr-request-btn-4k:hover {
  background: rgba(20, 184, 166, 0.28);
  border-color: #99f6e4;
}

.seerr-request-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.seerr-request-icon,
.seerr-request-fallback {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border-radius: 3px;
}

.seerr-request-icon {
  object-fit: contain;
}

.seerr-request-fallback {
  display: inline-grid;
  place-items: center;
  background: #5865f2;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.seerr-request-icon + .seerr-request-fallback {
  display: none;
}

.seerr-owned-pill {
  min-height: 2rem;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #86efac;
}

.seerr-owned-pill-4k {
  border-color: rgba(94, 234, 212, 0.5);
  background: rgba(20, 184, 166, 0.16);
  color: #99f6e4;
}

.seerr-owned-pill-partial {
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.14);
  color: #fde68a;
}

.season-request-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.seerr-season-dialog {
  width: min(640px, 94vw);
}

.seerr-season-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.seerr-season-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
  background: rgba(148, 163, 184, 0.06);
  cursor: pointer;
}

.seerr-season-row:has(.seerr-season-checkbox:disabled) {
  opacity: 0.55;
  cursor: default;
}

.seerr-season-row-label {
  flex: 1;
  font-weight: 700;
  color: var(--text);
}

.seerr-season-row-status {
  font-size: 0.78rem;
  color: var(--soft);
}

.season-seerr-request-btn {
  min-height: 1.7rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.74rem;
}

.season-availability-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--soft);
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.season-availability-pill.is-complete {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #86efac;
}

.season-availability-pill.is-partial {
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.14);
  color: #fde68a;
}

.season-availability-pill.is-missing {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.episode-resolution-pill {
  min-height: 1.35rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
}

.season-availability-pill.is-4k {
  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(20, 184, 166, 0.15);
  color: #99f6e4;
}

.season-pill-4k-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.05rem 0.32rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(94, 234, 212, 0.35);
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
}

.season-pill-4k-tag.is-full {
  border-color: rgba(94, 234, 212, 0.55);
  background: rgba(20, 184, 166, 0.22);
  color: #99f6e4;
}

.confirm-dialog-body {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: min(52vh, 30rem);
  overflow-y: auto;
}

@media (max-width: 760px) {
  .backup-transfer-grid {
    grid-template-columns: 1fr;
  }

  .immersive-episode-row {
    grid-template-columns: 1fr;
  }

  .episode-thumb {
    width: 100%;
  }

  .immersive-episode-actions,
  .show-season-head {
    justify-items: stretch;
    align-items: stretch;
  }

  .show-season-head {
    flex-direction: column;
  }
}

html,
body {
  background: var(--bg);
}

body {
  overflow-x: hidden;
}

.app-chassis {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  gap: 0;
}

@media (min-width: 1024px) and (max-height: 1200px) {
  .app-chassis {
    width: 114.286vw;
    height: 114.286vh;
    zoom: 0.875;
  }
}

@media (min-width: 1024px) and (max-height: 1080px) {
  .app-chassis {
    width: 133.333vw;
    height: 133.333vh;
    zoom: 0.75;
  }
}

.topbar {
  display: none !important;
}

.brand-search {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: stretch;
  gap: 0.8rem;
  margin: 0;
  padding: 0 0 0;
}

.topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

.brand-block {
  flex: 0 0 auto;
  gap: 0.45rem;
  margin: 0 -0.55rem;
  padding: var(--top-control-padding) 0.7rem 0;
}

.brand-link {
  display: flex;
  width: 100%;
  align-items: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.brand-logo {
  display: block;
  width: 100%;
  height: var(--sidebar-logo-height);
  max-height: none;
  object-fit: contain;
  aspect-ratio: 1260 / 205;
}

h1 {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0;
}

.global-search {
  position: relative;
  display: block;
  width: 100%;
  min-width: auto;
  padding: 0 0.45rem;
}

.global-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.global-search input {
  width: 100%;
  min-height: 2.25rem;
  border: 0;
  border-bottom: 1px solid #3a3a3a;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 0.48rem 0.65rem;
  font-size: 0.94rem;
}

html.light-mode .global-search input {
  border-bottom-color: #cbd5e1;
}

.global-search input::placeholder {
  color: #a0a0a0;
}

.global-search input:focus {
  outline: none;
  border-bottom-color: #e5a00d;
}

#globalSearchDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(1200px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  z-index: 9500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}

@media (max-width: 1240px) {
  #globalSearchDropdown {
    width: min(860px, calc(100vw - 24px));
  }
}

@media (max-width: 760px) {
  #globalSearchDropdown {
    width: auto;
    right: 0;
    max-height: 480px;
  }
  .gsd-columns {
    flex-direction: column;
  }
  .gsd-column {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .gsd-column:last-of-type {
    border-bottom: none;
  }
}

.gsd-columns {
  display: flex;
  background: var(--panel);
}

.gsd-column {
  flex: 1;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gsd-column:last-of-type {
  border-right: none;
}

.gsd-column-header {
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--soft);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gsd-column-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gsd-column-empty {
  padding: 2.75rem 1.15rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Search Results Page 3-Column Layout */
.search-columns {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
}

.search-column {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  /* Theme tokens, not a fixed dark wash: a hardcoded dark panel reads as a
     heavy grey slab against the light theme's white page. */
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  gap: var(--space-3);
}

.search-column-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent, #e5a00d);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.search-column-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* Search cards use a compact art rail so poster proportions do not dictate a
   full-width, full-height card. The wrapper also gives failed images a stable
   fallback box instead of collapsing the card. */
.search-results-view .explorer-overview-card {
  grid-template-columns: clamp(96px, 30%, 138px) minmax(0, 1fr);
  align-items: start;
}

.search-results-view .search-card-art {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--panel-3);
}

.search-results-view .search-card-art .overview-thumb-poster {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.search-results-view .search-card-art .overview-thumb-poster.poster-fallback {
  min-height: 0;
}

.search-people-pager {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.search-people-count,
.search-people-error {
  color: var(--muted);
  font-size: 0.80rem;
  text-align: center;
}

.search-people-error {
  color: var(--red);
}

.search-load-more-people {
  width: 100%;
  justify-content: center;
}

.search-results-view.explorer-overview-view > .search-people-pager {
  grid-column: 1 / -1;
}

@media (min-width: 1201px) {
  /* Keep the search workspace inside the viewport. Each category gets its own
     scroll area, so a long TV list cannot push the other columns off-screen. */
  .page-shell[data-active-view="search"] {
    overflow-y: hidden;
  }

  .page-shell[data-active-view="search"] .view-panel[data-view-panel="search"] {
    padding-top: 0;
    height: calc(100vh - var(--right-topbar-height) - var(--space-2) - var(--control-inline-padding));
    min-height: 0;
  }

  .page-shell[data-active-view="search"] .view-panel[data-view-panel="search"] > .glass-panel {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .page-shell[data-active-view="search"] #searchViewResults {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0 !important;
    overflow: hidden;
  }

  .search-columns {
    height: 100%;
    min-height: 0;
    align-items: flex-start;
  }

  .search-column {
    align-self: flex-start;
    height: fit-content;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .search-column-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  .search-column-grid > * {
    flex-shrink: 0;
  }

  .search-column-grid::-webkit-scrollbar {
    width: 6px;
  }

  .search-column-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .search-column-grid::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 4px;
  }
}

@media (max-width: 1200px) {
  .page-shell[data-active-view="search"] #searchViewResults {
    margin-top: 0 !important;
  }

  .search-columns {
    flex-direction: column;
  }
  .search-column {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .search-results-view.explorer-overview-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-results-view .explorer-overview-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

.gsd-header {
  padding: 0.8rem 1.15rem 0.6rem;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.global-search-result {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 136px;
  padding: 0.65rem 1.15rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.global-search-result:last-of-type {
  border-bottom: none;
}

.global-search-result:hover,
.global-search-result:focus {
  background: var(--panel-2);
  outline: none;
}

.gsd-loading {
  padding: 0.75rem 1.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.gsd-error {
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--yellow) 9%, var(--panel-2));
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.media-detail-page button:focus-visible,
.media-detail-page a:focus-visible,
#globalSearchDropdown button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .media-facts-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.gsr-thumb {
  flex: 0 0 100px;
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--line-strong);
  display: block;
}

.gsr-thumb--empty {
  background: var(--line-strong);
}

.gsr-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gsr-title {
  display: block;
  position: static;
  width: auto;
  height: auto;
  overflow: hidden;
  clip: auto;
  font-size: 1.12rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.gsr-sub {
  display: block;
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  font-size: 0.9rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsr-overview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 0.25rem;
}

.gsd-more {
  display: block;
  width: 100%;
  padding: 0.75rem 1.15rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background 0.1s;
}

.gsd-more:hover,
.gsd-more:focus {
  background: rgba(229,160,13,0.08);
  outline: none;
}

.session-dot {
  background: #e5a00d;
  box-shadow: none;
}

.session-dot.unlocked {
  background: #4ade80;
}

.session-dot.locked {
  background: #f87171;
}

.topbar .settings-action,
.topbar .button-ghost {
  min-height: 2rem;
  border-color: transparent;
  background: transparent;
  color: #d6d6d6;
}

.topbar .settings-action.active,
.topbar .button-ghost:hover,
.topbar .settings-action:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.topnav {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.65rem;
  overflow: visible;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: #1f242c;
  padding: 0 0.55rem 0.9rem;
}

.sidebar-primary,
.sidebar-secondary {
  display: grid;
  gap: 0;
}

.sidebar-primary {
  padding: var(--space-1) 0 0;
}

.sidebar-secondary {
  padding: 0 0 var(--space-1);
}


.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 0;
  padding: var(--space-3) 0;
}

.app-version {
  border: 0;
  background: transparent;
  padding: 0.35rem 0.65rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.app-version:hover,
.app-version:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.app-version-update {
  color: var(--accent, #6366f1);
}

/* Two adjacent <button> elements rendered as one seamless pill - the dismiss
   "x" reads as sitting inside the "Complete onboarding" button, but stays a
   real, independently-focusable/clickable control rather than an illegal
   nested <button>. */
.sidebar-onboarding-cta {
  display: flex;
  align-items: stretch;
  width: calc(100% - 1.3rem);
  margin: 0 0.65rem 0.5rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 6px;
  overflow: hidden;
}

.sidebar-onboarding-cta.hidden {
  display: none;
}

.sidebar-onboarding-cta-button {
  flex: 1;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0.35rem 0 0.35rem 0.5rem;
  cursor: pointer;
  text-align: center;
}

.sidebar-onboarding-cta-button:hover,
.sidebar-onboarding-cta-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.sidebar-onboarding-cta-dismiss {
  flex-shrink: 0;
  width: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.sidebar-onboarding-cta-dismiss:hover,
.sidebar-onboarding-cta-dismiss:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.sidebar-sync-attention {
  width: 100%;
  margin: 0 0 0.2rem;
}

.sidebar-sync-attention.hidden {
  display: none;
}

.sidebar-sync-attention-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 0.22rem 0.65rem;
  border: 0;
  color: var(--yellow);
  background: transparent;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  cursor: pointer;
}

.sidebar-sync-attention-button:hover,
.sidebar-sync-attention-button:focus-visible {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.sidebar-sync-attention-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
  border-radius: 4px;
}

.sidebar-sync-attention-button[data-attention-tone="error"] {
  color: var(--red);
}

.sync-progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.2rem 0.65rem 0.05rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent, #6366f1);
  background: none;
  border: 0;
  cursor: pointer;
}

.startup-scan-notice {
  padding: 0.35rem 0.65rem 0.1rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.startup-scan-notice.hidden {
  display: none;
}

.sync-progress-text {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}

.sync-progress-indicator:hover,
.sync-progress-indicator:focus-visible {
  text-decoration: underline;
}

.sync-progress-indicator[data-sync-state="idle"] {
  color: var(--muted);
}

.sync-progress-indicator[data-sync-state="attention"] {
  color: var(--yellow);
  font-weight: 700;
}

.sync-progress-indicator[data-sync-state="attention"][data-attention-tone="error"] {
  color: var(--red);
}

.sync-progress-indicator[data-action-tone="success"],
.sync-activity-status[data-action-tone="success"] {
  color: var(--green, #72e3b8);
}

.sync-progress-indicator[data-action-tone="warning"],
.sync-activity-status[data-action-tone="warning"] {
  color: var(--yellow);
}

.sync-progress-indicator[data-action-tone="error"],
.sync-activity-status[data-action-tone="error"] {
  color: var(--red);
}

.sync-progress-indicator.hidden {
  display: none;
}

.manual-watch-review-nav {
  color: var(--yellow);
}

.manual-watch-review-nav:hover,
.manual-watch-review-nav:focus-visible {
  color: var(--yellow);
}

.manual-watch-review-nav.hidden {
  display: none;
}

.manual-watch-review-nav .sync-progress-dot {
  animation: none;
  opacity: 1;
}

.manual-watch-review-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-watch-review-nav-count {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  font-size: inherit;
  line-height: inherit;
}

.sync-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: sync-progress-pulse 1.1s ease-in-out infinite;
}

[data-sync-state="idle"] .sync-progress-dot {
  animation: none;
  opacity: 0.6;
}

[data-sync-state="attention"] .sync-progress-dot {
  animation: none;
  opacity: 1;
}

@keyframes sync-progress-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sync-progress-dot { animation: none; }
}

.sidebar-footer .button-ghost {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.sidebar-appearance-button {
  font-family: inherit;
}

.sidebar-appearance-panel {
  margin: 0.15rem 0 0.35rem;
  padding-left: var(--space-3);
  display: grid;
  gap: 0;
}

.sidebar-appearance-list {
  display: grid;
  gap: 0;
}

/* Text size: a heading like Style and Theme. The slider shows only while open. */
.sidebar-appearance-text-size > summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.4rem 0.65rem 0.4rem 1.4rem;
  border-left: 3px solid transparent;
  background: transparent;
  color: #c8c8c8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sidebar-appearance-text-size > summary svg,
.sidebar-appearance-theme .theme-toggle-label svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  opacity: 0.75;
}

.sidebar-appearance-text-size > summary:hover {
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-appearance-text-size[open] > summary {
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

html.light-mode .sidebar-appearance-text-size > summary {
  color: var(--text);
}

html.light-mode .sidebar-appearance-text-size > summary:hover {
  border-left-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
}

html.light-mode .sidebar-appearance-text-size[open] > summary {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

.sidebar-appearance-text-size > summary::-webkit-details-marker {
  display: none;
}

.sidebar-appearance-text-size output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.sidebar-appearance-text-size input {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0.4rem 0.6rem 0.6rem 0.9rem;
  accent-color: var(--accent, #6b8afd);
}

.sidebar-appearance-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #c8c8c8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.65rem 0.4rem 1.4rem;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Background Art only matters where there is a page backdrop: the Dashboard
   and details pages (the media rows show only on details pages). */
.sidebar-appearance-list-item.sidebar-appearance-background-art {
  display: none;
}

body:has(.page-shell[data-active-view="dashboard"]) .sidebar-appearance-list-item.sidebar-appearance-background-art,
body:has(#sidebarAppearanceMediaGroup:not(.hidden)) .sidebar-appearance-list-item.sidebar-appearance-background-art {
  display: flex;
}

/* Card Art is hidden on media detail pages, which have no cards to show it on. */
body:has(#sidebarAppearanceMediaGroup:not(.hidden)) .sidebar-appearance-list-item.sidebar-appearance-card-art {
  display: none;
}

.sidebar-appearance-list-item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  opacity: 0.75;
}

.sidebar-appearance-list-item input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.sidebar-appearance-list-item:hover {
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-appearance-list-item.active,
.sidebar-appearance-list-item:has(input:checked) {
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

.sidebar-appearance-list-item.active svg,
.sidebar-appearance-list-item:has(input:checked) svg {
  opacity: 1;
}

.sidebar-appearance-list-item input:focus-visible {
  outline: 2px solid #e5a00d;
  outline-offset: -2px;
}

.nav-label {
  padding: 0 0.65rem 0.35rem;
  color: #b8b8b8;
  font-size: 0.9rem;
  font-weight: 700;
}

.sidebar-view-toggle {
  --sidebar-view-blue: #4b96e6;
  --sidebar-view-blue-soft: color-mix(in srgb, var(--sidebar-view-blue), transparent 88%);
  --sidebar-view-blue-hover: color-mix(in srgb, var(--sidebar-view-blue), transparent 94%);
  display: grid;
  gap: 0.4rem;
  padding: 0 0.4rem 0.85rem;
}

.sidebar-view-toggle .nav-label {
  padding: 0 0.25rem;
}

.sidebar-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--sidebar-view-blue), transparent 78%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--sidebar-view-blue), transparent 96%);
  padding: 0.25rem;
}

.sidebar-segmented-btn {
  display: grid;
  min-width: 0;
  min-height: 2.15rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.35rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sidebar-segmented-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.sidebar-segmented-btn:hover {
  background: var(--sidebar-view-blue-hover);
  color: var(--sidebar-view-blue);
}

.sidebar-segmented-btn.active {
  border-color: color-mix(in srgb, var(--sidebar-view-blue), transparent 55%);
  background: var(--sidebar-view-blue-soft);
  color: var(--sidebar-view-blue);
}

.sidebar-segmented-btn:focus-visible {
  outline: 2px solid var(--sidebar-view-blue);
  outline-offset: 2px;
}

.nav-tab {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.48rem 0.65rem;
  color: #c8c8c8;
  font-size: 0.94rem;
  font-weight: 400;
}

.nav-tab:hover {
  border-color: transparent;
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.nav-tab.active {
  border-color: transparent;
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

.topbar .nav-tab {
  width: auto;
  min-width: max-content;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
}

.topbar .nav-tab.active {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
}

.view-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
}

.page-shell[data-active-view="dashboard"] {
  /* Keep the four dashboard sections inside the viewport on desktop. */
  overflow: hidden;
}

.page-shell[data-active-view="dashboard"] .app-shell {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.page-shell[data-active-view="dashboard"] #timeline-view {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 0.7rem;
}

/* Keep four equal dashboard bands; each rail gets the space below its title. */
.page-shell[data-active-view="dashboard"] .live-panel,
.page-shell[data-active-view="dashboard"] #upNextDashboardSection,
.page-shell[data-active-view="dashboard"] .dashboard-history-panel {
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 0;
}

#timeline-view #upNextDashboardSection,
#timeline-view .dashboard-history-panel { flex-grow: 1; }

@media (min-width: 761px) {
  #timeline-view > .live-panel > .section-heading,
  #timeline-view > #upNextDashboardSection > .section-heading,
  #timeline-view > .dashboard-history-panel > .section-heading {
    flex: 0 0 1.85rem;
    min-height: 1.85rem;
    margin-bottom: 0.1rem;
    padding-left: 0.4rem;
  }

  #timeline-view #nowPlayingGrid {
    scrollbar-width: none;
  }

  #timeline-view #nowPlayingGrid::-webkit-scrollbar {
    display: none;
  }

  #timeline-view #tvHistoryRow,
  #timeline-view #movieHistoryRow {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  #timeline-view #upNextPanel::-webkit-scrollbar,
  #timeline-view #tvHistoryRow::-webkit-scrollbar,
  #timeline-view #movieHistoryRow::-webkit-scrollbar {
    height: 0.5rem;
  }

  #timeline-view #upNextPanel::-webkit-scrollbar-track,
  #timeline-view #tvHistoryRow::-webkit-scrollbar-track,
  #timeline-view #movieHistoryRow::-webkit-scrollbar-track {
    background: transparent;
  }

  #timeline-view #upNextPanel::-webkit-scrollbar-thumb,
  #timeline-view #tvHistoryRow::-webkit-scrollbar-thumb,
  #timeline-view #movieHistoryRow::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--line-strong);
  }
}

/* A visible Part Watched rail shares its history section with the completed
   history rail. When no resume item exists this block is removed by .hidden. */
.page-shell[data-active-view="dashboard"] .dashboard-history-progress-section {
  flex: 0 1 42%;
  min-height: 0;
  overflow: hidden;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-progress-section .dashboard-part-watched-row {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-panel .dashboard-row-section {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0 !important;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-panel .dashboard-row-section .horizontal-scroll-row {
  flex: 1 1 0;
  min-height: 0;
  padding-bottom: var(--space-2);
}

/* ---- Now Playing: card fills the slice; poster width follows its height ---- */
.page-shell[data-active-view="dashboard"] .now-playing-grid {
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
}

/* The Now Playing rail clips vertical overflow, including the usual hover
   lift. Keep its card edge fully visible in every dashboard theme. */
#timeline-view #nowPlayingGrid :is(.live-now-card, [data-up-next-card-id]):hover {
  transform: none;
}

.page-shell[data-active-view="dashboard"] .now-playing-grid .idle-state {
  display: grid;
  min-height: 0;
  height: 100%;
  place-items: center;
  border-color: transparent;
  background: transparent;
}

.page-shell[data-active-view="dashboard"] .now-card-large {
  flex: 0 0 auto;
  width: min(34rem, 80vw);
  height: 100%;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.page-shell[data-active-view="dashboard"] .now-poster-large-wrapper {
  flex: 0 0 auto;
  height: 100%;
  max-height: 100%;
  width: auto;
  aspect-ratio: 2 / 3;
}

/* Same treatment the dashboard history cards give an uncached poster. Without
   it the flush poster area reads as a hole in the card rather than artwork that
   has not arrived yet.

   flow-root, not block: the placeholder glyph is centred by a percentage top
   margin on ::before, which otherwise collapses through this span and pushes
   the whole tinted box down, leaving a bare wedge at the top of the poster. */
.page-shell[data-active-view="dashboard"] .now-poster-large-wrapper .poster-fallback {
  display: flow-root;
  background: var(--panel-3);
}

.page-shell[data-active-view="dashboard"] .now-card-details {
  gap: 0.2rem;
  min-height: 0;
  /* Matches the padding the dashboard history cards give their own detail
     column, so the two rails line up. */
  padding: 0.65rem;
  overflow: hidden;
}

.page-shell[data-active-view="dashboard"] .now-card-title {
  font-size: var(--fs-now-title);
}

.page-shell[data-active-view="dashboard"] .now-card-episode {
  font-size: var(--fs-now-episode);
}

.page-shell[data-active-view="dashboard"] .now-card-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-shell[data-active-view="dashboard"] .now-card-meta {
  margin-top: auto;
  gap: 0.12rem;
  font-size: var(--fs-now-meta);
}

.page-shell[data-active-view="dashboard"] .now-card-progress-container {
  margin-top: 0;
  gap: 0.15rem;
}

/* ---- Part Watched: compact rail inside its matching history section ---- */
.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row {
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-page-card {
  height: 100%;
  align-items: stretch;
  overflow: hidden;
  padding: 0.55rem;
  gap: 0.7rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-poster-wrapper {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 2 / 3;
}

/* Compact the details so the whole card (including actions) fits the rail. */
.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-details {
  gap: 0.2rem;
  min-height: 0;
  overflow: hidden;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-title {
  font-size: 0.95rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-episode {
  font-size: 0.8rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-meta {
  gap: 0.12rem;
  font-size: 0.78rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-progress-container {
  margin-top: 0;
  gap: 0.15rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-actions {
  margin-top: 0;
}

.page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-action-btn {
  min-height: 0;
  padding: 0.3rem 0.5rem;
}

/* Vertical card: poster on top, compact centered text below. The text block
   has a fixed height so every poster ends up the same size. */
.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card,
.page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card {
  height: 100%;
  /* Width follows the poster (poster grows to fill the row height; width comes
     from the 2:3 ratio). Capped so it never gets absurdly wide. */
  width: auto;
  max-width: 16rem;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}

/* Poster grows to fill the height left after the fixed-height caption; width
   follows from the 2:3 ratio (centered, not stretched) → true aspect & biggest
   possible poster. The poster's width sets the card width. */
.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card-poster-wrapper,
.page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card-poster-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: auto;
  aspect-ratio: 2 / 3;
}

/* Caption: fixed height (2-line title + 2 sub lines) so posters stay a uniform
   size across the TV and Movies rows. Width tracks the card without widening it. */
.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card-details,
.page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card-details {
  flex: 0 0 auto;
  height: 4rem;
  width: 0;
  min-width: 100%;
  gap: 0.05rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* Title reserves two lines: a 1-line title leaves a blank line (the gap) below
   it; a 2-line title uses that space instead. */
.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card-title,
.page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 100%;
  height: 2.4em;          /* exactly two lines */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card-sub,
.page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card-sub {
  font-size: 0.7rem;
  line-height: 1.25;
  color: #9b9b9b;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Episode title accent (matches the Part Watched section). */
.page-shell[data-active-view="dashboard"] #tvHistoryRow .history-card-episode-title {
  color: var(--accent);
  font-weight: 700;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0.2rem 0.45rem 0;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .dashboard-history-page-card {
  flex: 0 0 385px;
  min-width: 0;
  gap: 0;
  padding: 0;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-poster-wrapper {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 2 / 3;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-title {
  font-size: 1rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-episode {
  font-size: 0.86rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-meta {
  gap: 0.28rem;
  font-size: 0.82rem;
}

.page-shell[data-active-view="dashboard"] .dashboard-history-card-row .meta-label {
  font-size: var(--fs-card-label);
}

/* Up Next and inline Part Watched deliberately use the same page-card geometry
   as the TV and movie history cards. Their content differs, but their visual
   rhythm and poster sizing do not. */
.dashboard-part-watched-card,
.dashboard-up-next-card {
  text-decoration: none;
}

/* Let each dashboard poster form the leading surface of its tile while the
   information column keeps the card's existing inset. */
#timeline-view .dashboard-history-page-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

#timeline-view .dashboard-history-page-card > .history-card-poster-wrapper {
  align-self: stretch;
  height: auto;
  max-height: none;
}

#timeline-view .dashboard-history-page-card > .history-card-details {
  padding: 0.65rem;
}

#timeline-view .dashboard-history-page-card .history-card-poster-wrapper .poster-fallback {
  background: var(--panel-3);
}

/* Compact history rows (modules/dashboard-modern.js): the toggle beside each
   "Recently watched" title shows that row as posters only.
   The #timeline-view plus row-id selectors outrank the card rules, so
   compact holds in both modes. */
.dashboard-history-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-compact-toggle {
  width: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Page control bars use the standard icon-button footprint. Dashboard row
   toggles keep their smaller, title-adjacent size. */
.page-card-mode-toggle {
  width: 2.1rem;
  min-width: 2.1rem;
  min-height: 2.05rem;
}

.dashboard-compact-toggle svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The icon shows the row's current look: tiles for full cards, posters when
   compact. */
.dashboard-compact-toggle[aria-pressed="true"] .dashboard-compact-icon-card,
.dashboard-compact-toggle:not([aria-pressed="true"]) .dashboard-compact-icon-posters {
  display: none;
}

.dashboard-compact-toggle:hover,
.dashboard-compact-toggle:focus-visible {
  color: var(--text);
}

.dashboard-compact-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--text), transparent 91%);
  background: color-mix(in srgb, var(--text), transparent 96%);
  color: color-mix(in srgb, var(--text), var(--muted) 35%);
}

/* Every card keeps its normal look; only its width changes. The poster gets
   a fixed width and the details a fixed width (open card width minus the
   poster), so folding the card to the poster width slides the details
   closed behind the poster without reflowing them. The open width follows
   the dashboard's per-state card widths below. */
#timeline-view .dashboard-row-compact {
  --compact-poster-width: 10.25rem;
  --compact-open-width: 385px;
}

#timeline-view[data-dash-state="2"] .dashboard-row-compact {
  --compact-open-width: 430px;
}

#timeline-view[data-dash-state="3"] .dashboard-row-compact {
  --compact-open-width: 500px;
}

#timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card {
  flex: 0 0 var(--compact-open-width);
  transition: flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

#timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card:not(.dashboard-card-open) {
  flex-basis: calc(var(--compact-poster-width) + 2px);
  cursor: pointer;
}

#timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card > .history-card-poster-wrapper {
  flex: 0 0 var(--compact-poster-width);
  width: var(--compact-poster-width);
  align-self: stretch;
}

#timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card > .history-card-details {
  flex: 0 0 auto;
  width: calc(var(--compact-open-width) - var(--compact-poster-width) - 2px);
  min-width: 0;
}

/* Phones stack the poster over the text, so a folded card just hides it. */
@media (max-width: 640px) {
  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card,
  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card:not(.dashboard-card-open) {
    flex-basis: clamp(128px, 40vw, 176px);
  }

  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card > .history-card-poster-wrapper {
    flex: 0 0 auto;
    width: 100%;
  }

  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card > .history-card-details {
    width: auto;
  }

  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card:not(.dashboard-card-open) > .history-card-details {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #timeline-view .dashboard-row-compact :is(#tvHistoryRow, #movieHistoryRow) > .dashboard-history-page-card {
    transition: none;
  }
}

.dashboard-part-watched-card .history-card-poster-wrapper,
.dashboard-up-next-card .history-card-poster-wrapper {
  position: relative;
}

/* The whole card opens its episode (app-events.js), so it shows a pointer. */
.dashboard-up-next-card {
  cursor: pointer;
}

.dashboard-part-watched-card .history-card-poster-link,
.dashboard-up-next-card .history-card-poster-link {
  border-radius: var(--poster-radius);
  overflow: hidden;
}

.dashboard-part-watched-card .part-watched-progress-container {
  margin-top: 0.05rem;
}

.dashboard-part-watched-card .history-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.dashboard-part-watched-card .history-card-actions .part-watched-action-btn {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding-inline: 0.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-part-watched-card .history-card-details {
  min-width: 0;
  overflow: hidden;
}

/* The inline Part Watched cards use the shared history-card markup. Keep that
   desktop variant compact enough for the viewport-fit dashboard row, including
   the action footer that is easy to lose at 1080p heights. */
@media (min-width: 761px) {
  #timeline-view .dashboard-part-watched-card .history-card-details {
    gap: var(--space-1);
  }

  #timeline-view .dashboard-part-watched-card .history-card-header {
    gap: 0;
  }

  #timeline-view .dashboard-part-watched-card .history-card-title {
    font-size: 0.92rem;
    line-height: 1.1;
  }

  #timeline-view .dashboard-part-watched-card .history-card-episode {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  #timeline-view .dashboard-part-watched-card .history-card-meta {
    gap: var(--space-1);
    font-size: 0.72rem;
  }

  #timeline-view .dashboard-part-watched-card .history-card-meta-row {
    gap: 0;
  }

  #timeline-view .dashboard-part-watched-card .history-card-footer {
    gap: var(--space-1);
    font-size: 0.72rem;
  }

  #timeline-view .dashboard-part-watched-card .history-card-apps {
    gap: var(--space-1);
  }

  #timeline-view .dashboard-part-watched-card .part-watched-app-badge {
    gap: var(--space-1);
    padding-inline: var(--space-1);
    font-size: 0.66rem;
  }

  #timeline-view .dashboard-part-watched-card .part-watched-progress-container {
    gap: var(--space-1);
    margin-top: 0;
  }

  #timeline-view .dashboard-part-watched-card .part-watched-progress-text {
    font-size: 0.7rem;
  }

  #timeline-view .dashboard-part-watched-card .history-card-actions {
    gap: var(--space-2);
    margin-top: 0;
  }

  #timeline-view .dashboard-part-watched-card .part-watched-action-btn {
    min-height: 1.6rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.1;
  }
}

.dashboard-up-next-card .history-card-footer--watch-now {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.2rem;
}

.dashboard-up-next-card .up-next-progress-container {
  gap: 0.15rem;
  margin-top: 0;
}

.dashboard-up-next-card .up-next-progress-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.dashboard-up-next-card .up-next-clear-button {
  flex: 0 0 auto;
  min-width: 2.5rem;
  width: auto;
  height: auto;
  min-height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.dashboard-up-next-card .up-next-clear-button:hover,
.dashboard-up-next-card .up-next-clear-button:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--red);
}

.dashboard-up-next-card .part-watched-progress-text {
  font-size: 0.68rem;
  line-height: 1;
}

.dashboard-up-next-card .up-next-app-links {
  display: flex;
  width: 100%;
  min-height: 1.45rem;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.dashboard-up-next-card .up-next-app-links::-webkit-scrollbar {
  display: none;
}

.dashboard-up-next-card .up-next-app-links .media-app-link-row {
  display: flex;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
}

#timeline-view .dashboard-up-next-card .up-next-app-links .source-badge--icon,
#timeline-view .history-card-apps .source-badge,
#timeline-view .part-watched-app-badge {
  background: transparent;
  gap: var(--space-1);
  padding-inline: var(--space-1);
}

html.light-mode #timeline-view .dashboard-up-next-card .up-next-app-links .source-badge--icon,
html.light-mode #timeline-view .history-card-apps .source-badge,
html.light-mode #timeline-view .part-watched-app-badge {
  background: transparent;
}

.up-next-apps-empty {
  color: var(--muted, #666);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Keep inline progress cards horizontally scrollable in the alternate poster
   view too; the default cards view gets this width from the shared row rule. */
#timeline-view #tvHistoryRow .dashboard-part-watched-card,
#timeline-view #movieHistoryRow .dashboard-part-watched-card {
  flex: 0 0 385px;
}

#timeline-view[data-dash-state="2"] .dashboard-history-card-row .dashboard-history-page-card {
  flex: 0 0 430px;
}

#timeline-view[data-dash-state="3"] .dashboard-history-card-row .dashboard-history-page-card {
  flex: 0 0 500px;
}

/* Rows need only a few pixels of top breathing room: the cards lift on hover,
   and an auto-scroller with zero top padding clips that border. Keep the
   spacing symmetrical across Up Next and both history rows. */
#timeline-view #upNextPanel.dashboard-history-card-row,
#timeline-view #tvHistoryRow.horizontal-scroll-row,
#timeline-view #movieHistoryRow.horizontal-scroll-row {
  padding: 0.55rem 0.2rem 0.55rem;
  scroll-padding: 0.55rem 0.2rem;
}

/* Up Next may have no horizontal scrollbar, so let its cards use the rail's
   full height. The panel's own bottom inset still keeps card borders clear. */
#timeline-view #upNextPanel.dashboard-history-card-row {
  padding-top: 0.55rem;
  padding-bottom: 0;
}

/* Shared FLIP/entrance motion for live dashboard snapshots. Only transform
   and opacity move, so the row never reflows while the animation is running. */
.dashboard-card-motion {
  will-change: transform;
}

.dashboard-card-enter {
  animation: dashboard-card-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard-card-exit {
  animation: dashboard-card-exit 200ms cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
  transform-origin: center left;
}

@keyframes dashboard-card-enter {
  from { opacity: 0; transform: translate3d(-14px, 0, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes dashboard-card-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(12px, 0, 0) scale(0.97); }
}

@media (max-width: 480px) {
  .dashboard-part-watched-card .history-card-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-card-enter,
  .dashboard-card-exit,
  .dashboard-up-next-card.up-next-card-removing,
  .up-next-sync-button[aria-busy="true"] .up-next-sync-icon {
    animation: none;
  }
}

/* Keep a fixed poster column at desktop widths. Safari can derive an automatic
   flex basis from a landscape episode still, then let the poster grow with the
   card's wrapping text until the details are squeezed out. */
@media (min-width: 641px) {
  #timeline-view .dashboard-history-card-row .dashboard-history-page-card > .history-card-poster-wrapper {
    flex: 0 0 10rem;
    width: 10rem;
    min-width: 10rem;
  }
}

@media (max-width: 640px) {
  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .dashboard-history-page-card,
  #timeline-view[data-dash-state="2"] .dashboard-history-card-row .dashboard-history-page-card,
  #timeline-view[data-dash-state="3"] .dashboard-history-card-row .dashboard-history-page-card {
    flex: 0 0 clamp(128px, 40vw, 176px);
    flex-direction: column;
    /* The generic <= 600px .history-page-card rule sets flex-start, which
       sizes the details to their text and clips it past the card edge. */
    align-items: stretch;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  #timeline-view #tvHistoryRow .dashboard-part-watched-card,
  #timeline-view #movieHistoryRow .dashboard-part-watched-card {
    flex: 0 0 clamp(128px, 40vw, 176px);
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-poster-wrapper {
    width: 100%;
    height: auto;
    max-height: none;
  }

  #timeline-view .dashboard-history-page-card > .history-card-details {
    padding: 0.5rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-title {
    font-size: 0.86rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-episode {
    font-size: 0.80rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .history-card-meta {
    font-size: 0.72rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-card-row .meta-label {
    font-size: var(--fs-card-label);
  }

  /* The narrow cards cannot fit all three Watch Now links on one line. */
  #timeline-view .dashboard-up-next-card .up-next-app-links .media-app-link-row {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }
}

.glass-panel {
  border-color: rgba(255, 255, 255, 0.07);
  background: transparent;
  box-shadow: none;
}

.view-panel > .glass-panel,
.live-panel,
.history-timeline-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.section-heading {
  min-height: 0;
  margin-bottom: 0.45rem;
}

.up-next-heading-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.up-next-source-status {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-1);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--yellow);
  font-weight: 700;
  white-space: normal;
  line-height: 1.3;
}

.up-next-source-status-row-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.up-next-source-status-row {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
}

.up-next-source-status-row-copy > strong {
  color: var(--yellow);
  font-size: 0.76rem;
}

.up-next-source-status-separator {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.up-next-source-status-row-copy > span {
  overflow-wrap: anywhere;
}

.up-next-source-retry {
  flex: 0 0 auto;
  min-height: 1.7rem;
  border-color: transparent;
  background: transparent;
  padding: 0.2rem 0.1rem;
  color: var(--yellow);
  font-size: 0.7rem;
  white-space: nowrap;
}

.up-next-source-retry:hover,
.up-next-source-retry:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  text-decoration: underline;
}

.up-next-source-help {
  display: inline-flex;
  min-height: 1.7rem;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 0.35rem;
  background: var(--panel-2);
  padding: 0.2rem 0.55rem;
  color: var(--soft);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.up-next-source-help:hover,
.up-next-source-help:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 640px) {
  .up-next-source-status {
    flex-wrap: wrap;
    margin-left: 0;
  }
}

/* Settings Section Headings inline layout with hyphen */
.settings-pane .section-heading:not(.sync-static-heading) > div:has(p + span),
.settings-pane .section-heading:not(.sync-static-heading):not(:has(div)):has(p + span) {
  display: block !important;
}

.settings-pane .section-heading:not(.sync-static-heading) > div:has(p + span) > p,
.settings-pane .section-heading:not(.sync-static-heading) > div:has(p + span) > span,
.settings-pane .section-heading:not(.sync-static-heading):not(:has(div)):has(p + span) > p,
.settings-pane .section-heading:not(.sync-static-heading):not(:has(div)):has(p + span) > span {
  display: inline !important;
}

.settings-pane .section-heading:not(.sync-static-heading) > div > p:has(+ span)::after,
.settings-pane .section-heading:not(.sync-static-heading):not(:has(div)) > p:has(+ span)::after {
  content: " - ";
  color: var(--muted);
  font-weight: normal;
}

.section-heading p {
  font-size: 0.95rem;
  font-weight: 850;
}

.section-heading span,
.movie-card span,
.movie-card small,
.folder-trigger span,
.season-trigger span,
.now-card small,
.now-card time {
  color: #9b9b9b;
}

.segmented-control {
  border: 0;
  background: transparent;
}

.segment-button {
  min-height: 2rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.segment-button.active,
.segment-button:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--text);
}

.field {
  border-color: rgba(255, 255, 255, 0.11);
  background: #2a2a2a;
}

.field:focus {
  border-color: #e5a00d;
  box-shadow: 0 0 0 2px rgba(229, 160, 13, 0.18);
}

.now-playing-grid {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.7rem;
  scrollbar-width: thin;
}

.idle-state {
  width: 100%;
  min-height: 4.8rem;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.now-card {
  grid-template-columns: 5.4rem 17rem;
  flex: 0 0 24rem;
  min-height: 9.8rem;
  border-color: rgba(255, 255, 255, 0.08);
  background: #242424;
  padding: 0.7rem;
}

.now-poster {
  width: 5.4rem;
  border: 0;
  border-radius: var(--poster-radius);
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--poster-width, 160px), 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.dashboard-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.movie-card,
.folder-card,
.folder-trigger,
.season-trigger {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.movie-card {
  gap: 0.48rem;
  overflow: visible;
  content-visibility: visible;
  contain-intrinsic-size: auto;
  cursor: pointer;
}

.movie-card:hover,
.folder-trigger:hover,
.season-trigger:hover {
  border-color: transparent;
  background: transparent;
}

.movie-card:hover .movie-poster,
.folder-trigger:hover .explorer-folder-poster,
.season-trigger:hover .explorer-folder-poster {
  transform: scale(1.035);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

.movie-poster,
.explorer-folder-poster,
.explorer-episode-poster,
.media-poster,
.history-poster,
.explorer-poster {
  border: 0;
  border-radius: var(--poster-radius);
  background: #101010;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.movie-grid .movie-poster,
.explorer-show-grid .folder-trigger .explorer-folder-poster {
  border-radius: var(--library-poster-radius);
}

.movie-card-body {
  gap: 0.16rem;
}

.movie-card b,
.folder-title b {
  color: #f5f5f5;
  font-size: 0.78rem;
  font-weight: 750;
}

.movie-card span,
.movie-card small {
  font-size: 0.9rem;
  font-weight: 400;
}

.movie-card small {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-weight: 650;
  letter-spacing: 0;
  opacity: 0.82;
  text-transform: none;
}

.history-sync-row {
  min-height: 1.2rem;
}

.history-action-pill {
  max-width: 100%;
  border-color: rgba(229, 160, 13, 0.55);
  background: rgba(20, 20, 20, 0.8);
  color: #d8b566;
  padding: 0.14rem 0.36rem;
  font-size: 0.72rem;
}

.sync-status-dot {
  width: 0.48rem;
  height: 0.48rem;
  box-shadow: none;
}

.explorer-heading {
  grid-template-columns: minmax(12rem, 1fr) minmax(20rem, auto);
  padding-bottom: 0.35rem;
}

.explorer-heading-title p {
  font-size: 1rem;
}

.explorer-heading-title span {
  display: inline-block;
  margin-top: 0;
  font-size: 0.80rem;
}

.explorer-controls > .compact-field:not(.explorer-search-box):not(.explorer-size-slider) {
  flex-shrink: 0;
}

.explorer-controls {
  gap: 0.7rem;
}

.explorer-show-grid .folder-trigger {
  padding: 0;
}

.explorer-show-grid .folder-card,
.explorer-show-grid .folder-trigger {
  height: 100%;
}

.explorer-show-grid .movie-card-body {
  min-height: 4.7rem;
}

.explorer-show-grid .movie-card-body > b {
  display: -webkit-box;
  min-height: 2.2rem;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.explorer-show-grid .folder-trigger time {
  font-size: 0.78rem;
}

.folder-card,
.season-card,
.episode-row,
.endpoint-box,
.ranking-row,
.empty-log,
.drop-zone,
.day-slot,
.timeline-event,
.now-card {
  border-radius: 4px;
}

.modal-panel--immersive {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
}



.immersive-container {
  padding: clamp(2rem, 3vw, 3rem);
  gap: var(--space-3);
}

.immersive-back-button {
  color: #cfcfcf;
}

.immersive-header {
  grid-template-columns: 13.5rem minmax(0, 42rem);
  gap: 2.4rem;
  align-items: center;
  min-height: 22rem;
}

.immersive-poster-img {
  width: 13.5rem;
  border: 0;
  border-radius: var(--poster-radius);
}

.immersive-title {
  font-size: clamp(2rem, 4vw, 3.9rem);
}

.immersive-overview {
  max-width: 46rem;
  color: #e8e8e8;
}

.season-poster-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.72);
}

.immersive-episode-row {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1100px) {
  .app-chassis {
    display: flex;
    flex-direction: row;
  }

  .global-search {
    width: min(28rem, 42vw);
    min-width: 12rem;
  }

  .dashboard-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
  }

}

@media (max-width: 760px) {
  .app-chassis {
    display: flex;
    flex-direction: column;
  }

  .topbar {
    position: sticky;
    height: auto;
    min-height: 3.5rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.75rem;
  }

  .brand-search {
    width: 100%;
    flex-wrap: wrap;
  }

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

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .topnav {
    position: relative;
    top: 0;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-width: auto;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 0;
    padding: 0;
    flex-shrink: 0;
    max-height: 3.5rem;
    transition: max-height 300ms ease;
  }

  .explorer-heading-sticky {
    position: static !important;
  }

  .topnav.nav-open {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    z-index: 500;
  }

  .brand-search {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
    flex-wrap: wrap;
  }

  .brand-block {
    position: absolute;
    top: 0.65rem;
    left: 50%;
    z-index: 1;
    min-width: auto;
    flex-shrink: 0;
    order: 2;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
  }

  .brand-heading {
    font-size: 1rem;
  }

  .topnav.nav-closed .global-search,
  .topnav.nav-closed .sidebar-scrollable,
  .topnav.nav-closed .sidebar-footer {
    visibility: hidden;
  }

  .brand-logo {
    height: 1.8rem;
    width: auto;
  }

  .global-search {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    min-width: 0;
    margin-top: 0.5rem;
  }

  .hamburger-button {
    display: flex !important;
    flex-direction: column;
    gap: 0.35rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.60rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: var(--soft);
    flex-shrink: 0;
    margin-left: 0;
    order: 1;
    position: relative;
    z-index: 2;
  }

  .hamburger-button span {
    width: 1.2rem;
    height: 0.15rem;
    background: currentColor;
    border-radius: 1px;
    transition: all 200ms ease;
  }

  .hamburger-button:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .hamburger-button.active span:nth-child(1) {
    transform: rotate(45deg) translateY(0.4rem);
  }

  .hamburger-button.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-button.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-0.4rem);
  }

  .hamburger-button.active::after {
    content: "✕";
    position: absolute;
    font-size: 1.5rem;
    font-weight: 300;
    color: currentColor;
  }

  .hamburger-button.active span {
    display: none;
  }

  .sidebar-primary,
  .sidebar-secondary {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0;
    width: 100%;
  }

  .sidebar-secondary {
    margin-top: 0;
  }

  .sidebar-footer {
    margin-top: auto;
  }

  .nav-label {
    display: none;
  }

  .nav-tab {
    width: 100%;
    min-width: auto;
    border-left: 3px solid transparent;
    border-bottom: 0;
    border-radius: 0;
    text-align: left;
    padding: 0.55rem 0.75rem;
    justify-content: flex-start;
  }

  .nav-tab:hover,
  .nav-tab.active {
    border-left-color: #e5a00d;
    border-bottom-color: transparent;
  }

  .settings-tab {
    width: 100%;
    min-width: auto;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-align: left;
    padding: 0.55rem 0.75rem;
    justify-content: flex-start;
  }

  .settings-tab.active {
    border-left-color: #e5a00d;
  }

  .sidebar-sub-menu {
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .sidebar-sub-menu .settings-tab,
  .sidebar-sub-menu .backups-sub-tab,
  .sidebar-sub-menu .help-menu-item {
    width: 100%;
    padding-left: 1.5rem;
    border-left: 3px solid transparent;
    border-radius: 0;
  }

  .sidebar-sub-menu .settings-tab:hover,
  .sidebar-sub-menu .backups-sub-tab:hover,
  .sidebar-sub-menu .help-menu-item:hover {
    border-left-color: #e5a00d;
  }

  .sidebar-sub-menu .settings-tab.active,
  .sidebar-sub-menu .backups-sub-tab.active,
  .sidebar-sub-menu .help-menu-item.active {
    border-left-color: #e5a00d;
  }

  .sidebar-sub-menu .help-menu-group {
    display: flex;
    flex-direction: column;
  }

  .sidebar-sub-menu .help-menu-group p {
    padding: 0.5rem 0.75rem 0.25rem 1.5rem;
    font-size: 0.7rem;
  }

  /* Hierarchical settings menu */
  .sidebar-sub-menu .settings-group-parent {
    padding-left: 0.75rem;
    font-weight: 700;
    opacity: 0.9;
    min-height: auto;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-top: 0.3rem;
  }

  .sidebar-sub-menu .settings-group-parent.active {
    border-left-color: #e5a00d;
  }

  .sidebar-sub-menu .settings-group-child {
    padding-left: 2.5rem !important;
    font-weight: 500;
    opacity: 0.8;
    font-size: 0.8rem;
    min-height: auto;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
  }

  .sidebar-sub-menu .settings-group-child.active {
    border-left-color: #e5a00d;
    opacity: 1;
  }

  .page-shell {
    grid-column: 1;
    grid-row: 2;
    padding: 0 0.75rem 2rem;
    overflow-y: auto;
    min-height: 0;
  }


  .dashboard-history-heading,
  .explorer-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dashboard-history-filter,
  .explorer-heading .explorer-controls {
    justify-self: stretch;
  }

  .dashboard-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.1rem, 1fr));
    gap: 1.2rem 0.75rem;
  }

  .explorer-list-card,
  .explorer-list-header {
    --list-cols: calc(var(--poster-width, 160px) * 0.4) 1fr 8rem !important;
  }
  .explorer-list-card > *:nth-child(n+4),
  .explorer-list-header > *:nth-child(n+4) {
    display: none;
  }

  .now-card {
    flex-basis: 20rem;
    grid-template-columns: 4.8rem minmax(0, 1fr);
  }

  .now-poster {
    width: 4.8rem;
  }

  .immersive-header {
    grid-template-columns: 1fr;
    min-height: auto;
    justify-items: center;
    text-align: center;
  }

  .immersive-poster-img {
    width: min(13rem, 54vw);
  }

  .modal-backdrop-image {
    left: 0;
    top: 0;
  }

  /* Explorer page specific - only affect explorer pages */
  #explorerTopbarControls:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0 !important;
  }

  #explorerTopbarControls .compact-field {
    margin: 0 !important;
  }

  #explorerTopbarControls .compact-field input,
  #explorerTopbarControls .compact-field select {
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem !important;
    height: 1.8rem;
  }

  #explorerTopbarControls .explorer-view-toggle {
    display: flex;
    justify-content: flex-start;
    gap: 0.2rem;
    margin-top: 0.2rem;
  }

  #explorerTopbarControls .explorer-view-btn {
    padding: 0.3rem 0.4rem !important;
    min-height: 1.7rem !important;
    font-size: 0.81rem;
  }

  #explorerTopbarControls .explorer-search-box {
    margin-bottom: 0.2rem !important;
  }

  /* Mobile: Show sort option directly instead of dropdown */
  #topbarControlsMenu {
    display: block !important;
    border: none;
    background: transparent;
    padding: 0;
  }

  #topbarControlsMenu summary {
    display: none;
  }

  #topbarControlsPanel {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
  }

  #topbarControlsPanel > #explorerTopbarControls {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.4rem;
  }

  #topbarControlsPanel #explorerTopbarControls .compact-field.explorer-search-box,
  #topbarControlsPanel #explorerTopbarControls .compact-field:nth-of-type(2),
  #topbarControlsPanel #explorerTopbarControls .explorer-view-toggle {
    display: none !important;
  }

  #topbarControlsPanel #explorerTopbarControls .compact-field:nth-of-type(3) {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #topbarControlsPanel #explorerTopbarControls .compact-field:nth-of-type(3) select {
    width: 100%;
  }

  body .page-topbar-actions .explorer-controls:not(.hidden),
  body .explorer-controls:not(.hidden) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-shrink: 1 !important;
  }

  /* Mobile control panels visibility */
  body .page-topbar-actions .explorer-controls > .compact-field,
  body .page-topbar-actions .explorer-controls > .explorer-view-toggle,
  body .page-topbar-actions .explorer-controls > #explorerHideWatchedLabel,
  body .page-topbar-actions .explorer-controls > #explorerHideEndedLabel,
  body .explorer-controls > .compact-field,
  body .explorer-controls > .explorer-view-toggle,
  body .explorer-controls > #explorerHideWatchedLabel,
  body .explorer-controls > #explorerHideEndedLabel {
    display: none !important;
  }

  /* Show only the active one */
  body .page-topbar-actions .explorer-controls > .compact-field.active-mobile-panel,
  body .page-topbar-actions .explorer-controls > .explorer-view-toggle.active-mobile-panel,
  body .page-topbar-actions .explorer-controls > #explorerHideWatchedLabel.active-mobile-panel,
  body .page-topbar-actions .explorer-controls > #explorerHideEndedLabel.active-mobile-panel,
  body .explorer-controls > .compact-field.active-mobile-panel,
  body .explorer-controls > .explorer-view-toggle.active-mobile-panel,
  body .explorer-controls > #explorerHideWatchedLabel.active-mobile-panel,
  body .explorer-controls > #explorerHideEndedLabel.active-mobile-panel {
    display: flex !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    animation: fadeInControlPanel 0.2s ease;
  }

  body .mobile-controls-row {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0.25rem 0 0.4rem 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0.15rem !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body .mobile-controls-row .mobile-control-tab {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text) !important;
    padding: 0.2rem 0.25rem !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    opacity: 0.65;
    transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
    border-radius: 4px !important;
    outline: none !important;
  }

  body .mobile-controls-row .mobile-control-tab.active {
    opacity: 1 !important;
    color: var(--primary, #0088cc) !important;
  }

  body .mobile-controls-row .mobile-control-tab:hover {
    opacity: 1;
    color: var(--primary, #0088cc) !important;
    background: var(--bg-hover, rgba(128, 128, 128, 0.08)) !important;
  }

  body .mobile-controls-row .mobile-control-tab svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    fill: currentColor !important;
  }

  body .mobile-controls-row .mobile-control-tab span {
    display: block !important;
    color: inherit !important;
    line-height: 1.2 !important;
    margin-top: 0.15rem !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 0.55rem !important;
    min-height: 2.4em !important;
  }

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

  body .page-topbar-actions .explorer-controls > .active-mobile-panel,
  body .explorer-controls > .active-mobile-panel {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body .page-topbar-actions .explorer-controls > .active-mobile-panel.explorer-search-box input,
  body .explorer-controls > .active-mobile-panel.explorer-search-box input,
  body .page-topbar-actions .explorer-controls > .active-mobile-panel select,
  body .explorer-controls > .active-mobile-panel select {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .explorer-controls > .active-mobile-panel.explorer-size-slider,
  body .explorer-controls > .active-mobile-panel.explorer-size-slider {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  body .page-topbar-actions .explorer-controls > .active-mobile-panel.explorer-size-slider input,
  body .explorer-controls > .active-mobile-panel.explorer-size-slider input {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 1rem !important;
  }

  body .page-topbar-actions .explorer-controls > .active-mobile-panel.explorer-view-toggle,
  body .explorer-controls > .active-mobile-panel.explorer-view-toggle {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 0.25rem !important;
  }

  body .page-topbar-actions .explorer-controls > .active-mobile-panel.explorer-view-toggle .explorer-view-btn,
  body .explorer-controls > .active-mobile-panel.explorer-view-toggle .explorer-view-btn {
    flex: 1 1 0% !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Cast members - optimize for mobile */
  .cast-compact-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 0.75rem 0.5rem !important;
  }

  .cast-member-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }

  .cast-avatar-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  .cast-actor-name,
  .cast-compact-row b,
  .cast-compact-row strong {
    font-size: 0.81rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .cast-character-name {
    font-size: 0.71rem !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
  }

  /* Fix accordion scroll */
  details summary {
    scroll-margin-top: 0;
    padding: 0.5rem 0;
  }

  .explorer-heading-sticky.is-media-detail {
    position: relative !important;
  }

  /* Detail page spacing */
  .media-detail-page {
    padding: 0.5rem 0.5rem 1rem !important;
  }

  .section-heading {
    gap: 0.3rem;
    padding: 0.5rem 0;
  }

  /* Immersive header optimization */
  .immersive-header {
    gap: 0.75rem;
    padding: 0;
  }

  .immersive-meta {
    gap: 0.5rem;
    align-items: center;
  }

  /* Button layout */
  .settings-actions,
  [class*="actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .settings-actions button,
  [class*="actions"] button {
    flex: 1;
    min-width: 100px;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.81rem !important;
  }

  /* Text overflow fix */
  .immersive-meta p,
  .section-heading p,
  .section-heading h2 {
    white-space: normal;
    word-wrap: break-word;
  }

  /* ---- Dashboard: revert fixed-height column split to scrollable sections ---- */
  .page-shell[data-active-view="dashboard"] {
    overflow-y: auto;
  }

  .page-shell[data-active-view="dashboard"] .app-shell {
    height: auto;
    grid-template-rows: auto;
  }

  .page-shell[data-active-view="dashboard"] #timeline-view {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
    gap: 0.75rem;
  }

  .page-shell[data-active-view="dashboard"] .live-panel,
  .page-shell[data-active-view="dashboard"] #upNextDashboardSection,
  .page-shell[data-active-view="dashboard"] .dashboard-history-panel {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  /* Reset flex-grow overrides that size the desktop column splits */
  #timeline-view .live-panel,
  #timeline-view #upNextDashboardSection,
  #timeline-view .dashboard-history-panel { flex-grow: 0; }

  /* Now Playing: let the details column set the card height instead of
     compressing its metadata into the desktop-sized 9rem rail. */
  .page-shell[data-active-view="dashboard"] .now-playing-grid {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 10.5rem;
  }

  .page-shell[data-active-view="dashboard"] .now-card-large {
    flex: 0 0 auto;
    width: min(88vw, 26rem);
    height: auto;
    min-height: 10.5rem;
    align-items: stretch;
  }

  .page-shell[data-active-view="dashboard"] .now-poster-large-wrapper {
    flex: 0 0 7rem;
    width: 7rem;
    height: auto;
    min-height: 10.5rem;
  }

  .page-shell[data-active-view="dashboard"] .now-card-details {
    height: auto;
    overflow: visible;
  }

  /* Part Watched: horizontal scroll row with natural card heights */
  .page-shell[data-active-view="dashboard"] .dashboard-part-watched-row {
    flex: 0 0 auto;
    min-height: 0;
    overflow-x: auto;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-page-card {
    height: auto;
    min-height: 10.5rem;
    width: min(88vw, 26rem);
    flex: 0 0 auto;
    align-items: stretch;
    overflow: visible;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-poster-wrapper {
    width: 6.5rem;
    height: 9.75rem;
    flex: 0 0 6.5rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-part-watched-row .part-watched-action-btn {
    min-height: 2.4rem;
    padding: 0.45rem 0.5rem !important;
    white-space: normal;
  }

  /* Watch History rows: natural scrollable height */
  .page-shell[data-active-view="dashboard"] .dashboard-history-progress-section {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-history-progress-section .dashboard-part-watched-row {
    flex: 0 0 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-row-section {
    flex: 0 0 auto;
    min-height: 0;
  }

  .page-shell[data-active-view="dashboard"] .dashboard-row-section .horizontal-scroll-row {
    flex: 0 0 auto;
    min-height: 9rem;
  }

  .page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card,
  .page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card {
    height: 12.25rem;
    max-width: 9rem;
  }

  .page-shell[data-active-view="dashboard"] #tvHistoryRow .history-mini-card-poster-wrapper,
  .page-shell[data-active-view="dashboard"] #movieHistoryRow .history-mini-card-poster-wrapper {
    flex: 0 0 8rem;
    height: 8rem;
    width: 100%;
  }

  /* Stats leaderboard leader card: shrink poster on mobile */
  .stats-lb-leader {
    grid-template-columns: 5rem 1.8rem minmax(0, 1fr);
  }

  .stats-lb-leader-copy h3 {
    font-size: 1.4rem;
  }
}

@media (max-width: 640px) {
  body .topnav {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* Only the Back/title row stays pinned below the navbar; the controls row
     (mediaDetailActions) stays in normal flow and scrolls away with the page.
     #appShell is `display: grid`, and Chromium/Blink silently fails to keep
     `position: sticky` working for an element nested two levels inside a grid
     container (verified: a sticky child of a plain <div> that is itself a
     grid item never clamps; the same sticky child promoted via
     `display: contents` on the wrapper works correctly). So .page-topbar is
     flattened here to promote .page-topbar-title/.page-topbar-actions to
     direct grid items of #appShell, which is what makes the title's sticky
     positioning actually take effect. */
  body.media-detail-active .page-topbar,
  body:has(.page-shell[data-active-view="explorer"]) .page-topbar,
  body:has(.page-shell[data-active-view="history"]) .page-topbar {
    display: contents !important;
  }

  /* #appShell (display: grid) puts a var(--space-3) gap between EVERY row -
     title/actions, and also actions/content. Canceling just the title-actions
     gap with a negative margin left the second gap in place: once the
     (non-sticky) actions row scrolls past, that gap is exposed as a bare
     white strip directly under the sticky title, because it belongs to the
     content row, not to anything that scrolls away with the actions row.
     Simplest correct fix: kill the grid gap entirely here and re-add
     breathing room only where it can scroll away with its owning row
     (padding-bottom on the actions row, not a gap belonging to the next row). */
  body.media-detail-active #appShell,
  body:has(.page-shell[data-active-view="explorer"]) #appShell,
  body:has(.page-shell[data-active-view="history"]) #appShell {
    gap: 0 !important;
  }

  body.media-detail-active .page-topbar-title,
  body:has(.page-shell[data-active-view="explorer"]) .page-topbar-title,
  body:has(.page-shell[data-active-view="history"]) .page-topbar-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--brand-menu) !important;
    border-bottom: 1px solid var(--line) !important;
    margin-inline: calc(var(--control-inline-padding) * -1) !important;
    width: calc(100% + (var(--control-inline-padding) * 2)) !important;
    padding: 0.5rem var(--control-inline-padding) !important;
    box-sizing: border-box !important;
  }

  body.media-detail-active .page-topbar-actions,
  body:has(.page-shell[data-active-view="explorer"]) .page-topbar-actions,
  body:has(.page-shell[data-active-view="history"]) .page-topbar-actions,
  body.media-detail-active #mediaDetailActions {
    overflow: visible !important;
  }

  /* Controls row matches the navbar/title background and sits flush against
     the title row (no more grid gap to cancel now that #appShell's gap is 0).
     It also needs its own stacking position: .modal-backdrop-image is
     `position: fixed` with z-index: 0, and a non-positioned (position:
     static) element always paints *below* any positioned element in the
     same context regardless of DOM order - so without this, the fixed
     backdrop art was painting over the controls row instead of the other
     way around. */
  body.media-detail-active .page-topbar-actions,
  body:has(.page-shell[data-active-view="explorer"]) .page-topbar-actions,
  body:has(.page-shell[data-active-view="history"]) .page-topbar-actions {
    position: relative !important;
    z-index: 10 !important;
    background: var(--brand-menu) !important;
    margin-inline: calc(var(--control-inline-padding) * -1) !important;
    width: calc(100% + (var(--control-inline-padding) * 2)) !important;
    max-width: calc(100% + (var(--control-inline-padding) * 2)) !important;
    padding-inline: var(--control-inline-padding) !important;
    padding-bottom: var(--space-3) !important;
    box-sizing: border-box !important;
  }

  body.media-detail-active #mediaDetailActions {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0.25rem 0 0.4rem 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0.15rem !important;
    flex-shrink: 0 !important;
  }

  body:not(.media-detail-active) #mediaDetailActions {
    display: none !important;
  }

  body #mediaDetailActions::-webkit-scrollbar {
    display: none !important;
  }

  body #mediaDetailActions .action-pill,
  body #mediaDetailActions .seerr-request-btn,
  body #mediaDetailActions .rating-pill {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text) !important;
    padding: 0.2rem 0.25rem !important;
    min-width: 3.2rem !important;
    max-width: 4.8rem !important;
    width: auto !important;
    height: auto !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    opacity: 0.85;
    transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
    border-radius: 4px !important;
    outline: none !important;
  }

  body #mediaDetailActions .action-pill:hover,
  body #mediaDetailActions .seerr-request-btn:hover,
  body #mediaDetailActions .rating-pill:hover {
    opacity: 1;
    color: var(--primary, #0088cc) !important;
    background: var(--bg-hover, rgba(128, 128, 128, 0.08)) !important;
  }

  body #mediaDetailActions .action-pill:disabled,
  body #mediaDetailActions .seerr-request-btn:disabled,
  body #mediaDetailActions .rating-pill:disabled {
    opacity: 0.3 !important;
    color: var(--text) !important;
    cursor: not-allowed !important;
    background: transparent !important;
  }

  body #mediaDetailActions .personal-media-detail-action.has-personal-state {
    color: var(--accent) !important;
    opacity: 1;
  }

  body #mediaDetailActions .media-up-next-show-btn.is-added {
    color: var(--green) !important;
  }

  body #mediaDetailActions .action-pill svg,
  body #mediaDetailActions .seerr-request-btn svg,
  body #mediaDetailActions .seerr-request-btn img,
  body #mediaDetailActions .rating-pill svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    fill: currentColor !important;
  }

  body #mediaDetailActions .action-pill span,
  body #mediaDetailActions .seerr-request-btn span,
  body #mediaDetailActions .rating-pill span {
    display: block !important;
    color: inherit !important;
    line-height: 1.2 !important;
    margin-top: 0.15rem !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 0.55rem !important;
    min-height: 2.4em !important;
  }

  /* "Expand All"/"Collapse All" seasons stays reachable without scrolling
     the (potentially collapsed/overflowing) actions row - pin it to the
     right edge of the row's own scroll area, like Sonarr's season toolbar. */
  body #mediaDetailActions .media-toggle-all-seasons-btn {
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    background: var(--panel-3) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-dropdown {
    position: relative !important;
    display: inline-block !important;
  }

  body #mediaDetailActions > *:not(.media-toggle-all-seasons-btn) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #mediaDetailActions .action-pill,
  body #mediaDetailActions .seerr-request-btn,
  body #mediaDetailActions .rating-pill {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-dropdown[open] {
    z-index: 99 !important;
  }

  body #mediaDetailActions summary::-webkit-details-marker {
    display: none !important;
  }

  body #mediaDetailActions summary,
  body #mediaDetailActions .actions-tools-trigger {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    list-style: none !important;
  }

  body #mediaDetailActions summary:focus,
  body #mediaDetailActions summary:active,
  body #mediaDetailActions .actions-tools-trigger:focus,
  body #mediaDetailActions .actions-tools-trigger:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Sonarr-style dropdown card, shown whenever Tools is opened */
  body #mediaDetailActions.actions-collapsed .actions-tools-panel {
    display: none;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    background: var(--panel-3) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.25)) !important;
    border-radius: 6px !important;
    z-index: 999 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0.25rem 0 !important;
    width: max-content !important;
    min-width: min(12rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-dropdown[open] .actions-tools-panel {
    display: flex !important;
  }

  /* Tools actions stay in a readable stacked list inside the grouped menu. */
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    width: 100% !important;
    min-width: 9.5rem !important;
    max-width: none !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.81rem !important;
    text-transform: none !important;
    border-radius: 0 !important;
    opacity: 0.95 !important;
    text-align: left !important;
    letter-spacing: normal !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill:hover,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn:hover,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill:hover {
    color: var(--primary) !important;
    background: var(--bg-hover) !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill svg,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn svg,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  body #mediaDetailActions.actions-collapsed .actions-tools-panel .action-pill span,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .seerr-request-btn span,
  body #mediaDetailActions.actions-collapsed .actions-tools-panel .rating-pill span {
    margin: 0 !important;
    font-size: 0.81rem !important;
  }

  /* Stats: collapse toolbar to stacked column on narrow screens */
  .stats-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .stats-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .stats-controls .compact-field {
    grid-template-columns: 6rem 1fr;
  }

  /* Stats KPI: 3-column so 5 cards fit neatly (3+2) without a lone orphan */
  .stats-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Stats leader (#1): compact the poster, clamp the description */
  .stats-lb-leader {
    grid-template-columns: 4.5rem 1.8rem minmax(0, 1fr);
    overflow: hidden;
  }

  .stats-lb-leader-copy {
    min-width: 0;
    overflow: hidden;
  }

  .stats-lb-leader-copy h3 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }

  .stats-lb-leader-copy p {
    font-size: 0.8rem;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Stats podium: single column on small screens */
  .stats-lb-podium {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Hierarchical Navigation */
.sidebar-sub-menu {
  display: grid;
  gap: 0.08rem;
  padding-left: var(--space-3);
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}

.sidebar-sub-menu .settings-tab,
.sidebar-sub-menu .backups-sub-tab,
.sidebar-sub-menu .help-menu-item {
  width: 100%;
  min-height: 1.4rem;
  font-size: 0.78rem;
  padding: 0.22rem 0.6rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  cursor: pointer;
}

.sidebar-sub-menu .help-menu-item-desc {
  display: none;
}

.sidebar-sub-menu .settings-tab:hover,
.sidebar-sub-menu .backups-sub-tab:hover,
.sidebar-sub-menu .help-menu-item:hover {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-sub-menu .settings-tab.active,
.sidebar-sub-menu .backups-sub-tab.active,
.sidebar-sub-menu .help-menu-item.active {
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

/* Hierarchical settings menu: parent group headers vs their child sections */
.sidebar-sub-menu .settings-group-parent {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text);
  min-height: 1.15rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  margin-top: 0.3rem;
}

.sidebar-sub-menu .settings-group-parent:first-child {
  margin-top: 0;
}

.sidebar-sub-menu .settings-group-parent.active {
  border-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.sidebar-sub-menu .settings-group-child {
  margin-left: 0.55rem;
  padding-left: 0.65rem;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 2px solid var(--line);
  border-radius: 0;
}

.sidebar-sub-menu .settings-group-child:hover {
  border-left-color: var(--line-strong);
}

.sidebar-sub-menu .settings-group-child.active {
  border-left-color: var(--nav-active-border);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.sidebar-sub-menu .settings-group-grandchild {
  margin-left: 1.1rem;
  padding-left: 1.25rem;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--muted);
}

.sidebar-sub-menu .settings-group-grandchild:hover,
.sidebar-sub-menu .settings-group-grandchild:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

/* The indented Settings rows are grid items of .sidebar-sub-menu with left
   margins for the hierarchy indentation. Stretch them (width: auto) instead
   of forcing width: 100%, which would add the margin on top of the full
   width and push the rows past the sidebar's right edge, surfacing an
   unwanted horizontal scrollbar on .sidebar-scrollable. */
.sidebar-scrollable .sidebar-sub-menu .settings-group-child,
.sidebar-scrollable .sidebar-sub-menu .settings-group-grandchild {
  width: auto;
}

/* Child sections use the same hover and selected styling as the top-level nav rows. */
.sidebar-scrollable .sidebar-sub-menu .settings-group-child {
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #c8c8c8;
}

.sidebar-scrollable .sidebar-sub-menu .settings-group-child:hover {
  border-color: transparent;
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-scrollable .sidebar-sub-menu .settings-group-child.active {
  border-color: transparent;
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

html.light-mode .sidebar-scrollable .sidebar-sub-menu .settings-group-child {
  color: var(--text);
}

html.light-mode .sidebar-scrollable .sidebar-sub-menu .settings-group-child:hover {
  border-left-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
}

html.light-mode .sidebar-scrollable .sidebar-sub-menu .settings-group-child.active {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

/* The visible Settings rows (General, Media servers, ...) are group headers, not children. */
.sidebar-scrollable .sidebar-sub-menu .settings-group-parent {
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
}

.sidebar-scrollable .sidebar-sub-menu .settings-group-parent:hover {
  border-color: transparent;
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-scrollable .sidebar-sub-menu .settings-group-parent.active {
  border-color: transparent;
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

html.light-mode .sidebar-scrollable .sidebar-sub-menu .settings-group-parent:hover {
  border-left-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
}

html.light-mode .sidebar-scrollable .sidebar-sub-menu .settings-group-parent.active {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

.sidebar-sub-menu .help-menu-group {
  display: grid;
  gap: 0.1rem;
}

.sidebar-sub-menu .help-menu-group p {
  padding: 0.4rem 0.6rem 0.2rem;
  color: var(--soft);
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Horizontal Scroll Row styling */
.horizontal-scroll-row {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.horizontal-scroll-row .movie-card {
  width: 160px;
  flex: 0 0 160px;
}

@media (pointer: coarse) {
  .history-timeline-panel .horizontal-scroll-row {
    scroll-snap-type: x proximity;
  }

  .history-timeline-panel .horizontal-scroll-row .movie-card,
  .history-timeline-panel .horizontal-scroll-row .history-mini-card {
    scroll-snap-align: start;
  }
}

/* Dashboard Row Title styling */
.dashboard-row-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 var(--space-1);
  padding-left: 0.2rem;
}

/* View More Card and placeholder styling */
.view-more-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius);
  background: var(--panel-3);
  border: 1px dashed var(--line-strong);
  color: var(--blue);
  font-weight: 800;
  font-size: 0.9rem;
  transition: all 140ms ease;
}

.view-more-card:hover .view-more-poster-placeholder {
  border-color: var(--blue);
  background: rgba(75, 150, 230, 0.04);
  color: #fff;
}

/* Inline Media Detail Overrides */
#explorerPanel .media-detail-page {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
}

html.light-mode #explorerPanel .media-detail-page {
  background: transparent !important;
}

#explorerPanel .modal-backdrop-image {
  opacity: 0.12 !important;
}

/* Keep the inline detail backdrop inside the media region. It bleeds through
   the media section's small surrounding gaps, while the control bar keeps its
   own opaque surface and never gets artwork painted underneath it. */
body:has(#explorerPanel > .modal-backdrop-image) .page-shell {
  background: transparent !important;
}

body:has(#explorerPanel > .modal-backdrop-image) .page-topbar {
  background: var(--brand-menu) !important;
  border-bottom-color: color-mix(in srgb, var(--line), transparent 35%);
}

/* Media pages: the navbar (and its stacked title and controls rows on phones)
   uses the left menu's colour. */
body.media-detail-active .page-topbar,
body.media-detail-active .page-topbar-title,
body.media-detail-active .page-topbar-actions {
  background: var(--brand-menu) !important;
}

body:has(#explorerPanel > .modal-backdrop-image) #explorerPanel > .modal-backdrop-image {
  position: absolute;
  /* Bleed across the whole gap the media region has above it, not just part of
     it: #appShell's grid gap (var(--space-3)) plus the view panel's own
     padding-top (var(--space-2)). Covering only part of it left a hairline of
     page background showing as a white sliver under the topbar. The topbar is
     opaque in this state and paints above the artwork, so the extra overlap
     behind it stays invisible. */
  top: calc(-1 * (var(--space-2) + var(--space-3)));
  right: calc(-1 * var(--control-inline-padding));
  bottom: 0;
  left: calc(-1 * var(--control-inline-padding));
  width: auto;
  height: auto;
}

/* A glass panel's backdrop filter can become the containing surface for a
   fixed descendant. Disable it while the detail artwork is active so the
   backdrop is truly viewport-wide and can show beneath the control bar. */
body:has(#explorerPanel > .modal-backdrop-image) .view-panel[data-view-panel="explorer"] > .glass-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Highlighted Episode Row */
.immersive-episode-row.is-highlighted {
  border-color: var(--yellow) !important;
  background: rgba(234, 179, 8, 0.08) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.18) !important;
}

/* Poster size slider styles */
.explorer-size-slider {
  min-width: 120px;
  max-width: 200px;
  flex-shrink: 0;
}

.explorer-size-slider input[type="range"] {
  accent-color: var(--accent);
  height: 6px;
  border-radius: var(--radius);
  background: var(--line);
  cursor: pointer;
  width: 100%;
  padding: 0;
}

/* ── Explorer view toggle ─────────────────────────────────── */

.explorer-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  background: var(--panel-2);
  flex-shrink: 0;
}

.explorer-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.explorer-view-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.explorer-view-btn.active {
  background: var(--panel-3);
  border-color: var(--line-strong);
  color: var(--text);
}

/* ── List view ────────────────────────────────────────────── */

/* poster | title | source | release | watched | year | runtime | sync */
.movies-list {
  --list-cols: calc(var(--poster-width, 160px) * 0.4) 1fr 8rem 10rem 11rem 5rem 7rem 3rem;
}

/* poster | title | next-air | episodes | seasons | last-watched | year */
.shows-list {
  --list-cols: calc(var(--poster-width, 160px) * 0.4) 16rem 11rem 1fr 6rem 11rem 5rem;
}

.explorer-list-view {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.explorer-list-header {
  display: grid;
  grid-template-columns: var(--list-cols);
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.explorer-list-header span {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  user-select: none;
}

.list-header-sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.list-header-sortable:hover {
  color: var(--text);
}

.sort-arrow {
  font-size: 0.71rem;
  color: var(--yellow);
  flex-shrink: 0;
}

.explorer-list-card {
  display: grid;
  grid-template-columns: var(--list-cols);
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 120ms ease;
}

.explorer-list-card:last-child {
  border-bottom: none;
}

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

.list-thumb-poster {
  width: calc(var(--poster-width, 160px) * 0.4);
  height: calc(var(--poster-width, 160px) * 0.4 * 1.5);
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  background: var(--panel-3);
  flex-shrink: 0;
  display: block;
}

.list-thumb-poster.poster-fallback {
  width: calc(var(--poster-width, 160px) * 0.4);
  height: calc(var(--poster-width, 160px) * 0.4 * 1.5);
}

.list-card-title {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.list-card-col {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Status fallback in the "Next Airing" column (Returning / Ended / etc.) -
   dimmed and italic so genuine upcoming dates stand out. */
.list-next-air-status {
  font-style: italic;
  opacity: 0.7;
}

.list-eps-progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 0.5rem;
}

.list-eps-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
}

.list-eps-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: inherit;
  transition: width 300ms ease;
}

.list-eps-label {
  font-size: 0.81rem;
  color: var(--muted);
  white-space: nowrap;
}

.list-card-year {
  font-weight: 600;
  color: var(--text);
}

.list-card-platform {
  display: flex;
  align-items: center;
}

.list-card-sync {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-show-nav {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  flex-shrink: 0;
}

.list-show-nav:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

/* ── Overview view ────────────────────────────────────────── */

.explorer-overview-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: var(--space-2);
  align-items: start;
}

.explorer-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  overflow: hidden;
  transition: background 120ms ease, border-color 120ms ease;
}

.explorer-overview-card:hover {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.overview-thumb-poster {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}

.overview-thumb-poster.poster-fallback {
  width: 100%;
  min-height: 160px;
  background: var(--panel-3);
}

.overview-show-poster-btn,
.overview-show-poster-btn:focus {
  outline: none;
  display: block;
  line-height: 0;
}

.overview-card-meta {
  padding: 0.85rem;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  align-content: start;
}

.overview-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.overview-card-header b {
  font-size: 0.92rem;
  line-height: 1.3;
}

.overview-show-title-btn b {
  font-size: 0.92rem;
  line-height: 1.3;
}

.overview-card-badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.overview-card-attrs {
  font-size: 0.80rem;
  color: var(--muted);
  line-height: 1.3;
  min-height: 1em;
}

.overview-card-text {
  font-size: 0.78rem;
  color: var(--soft);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em;
}

.overview-card-date {
  font-size: 0.80rem;
  color: var(--muted);
}

/* Cast Styles */
.cast-compact-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  margin-top: 0.25rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* Rail artwork waits for data-rail-src to be promoted to src as the rail is
   reached; keep the card's own placeholder instead of showing alt text. */
img[data-rail-src] {
  visibility: hidden;
}

.cast-more-card {
  flex: 0 0 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font: inherit;
}

.cast-more-card-image {
  width: 100px;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--poster-radius);
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.cast-more-card:hover .cast-more-card-image,
.cast-more-card:focus-visible .cast-more-card-image {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 68%, var(--accent) 32%);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cast-more-card-plus {
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}

.cast-compact-row::-webkit-scrollbar {
  height: 6px;
}

.cast-compact-row::-webkit-scrollbar-track {
  background: transparent;
}

.cast-compact-row::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: 3px;
}

.cast-member-card {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.3rem;
}

.cast-avatar-img {
  width: 100px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cast-member-card:hover .cast-avatar-img,
.cast-member-card:focus-visible .cast-avatar-img {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cast-actor-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8e8e8;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.cast-character-name {
  font-size: 0.81rem;
  color: #e8e8e8;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  opacity: 0.65;
}

/* Trailer/Video Styles */
.media-detail-page .trailer-scroll-row {
  display: flex !important;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: 0.75rem;
}

.trailer-card {
  flex: 0 0 480px !important;
  width: 480px !important;
  min-width: 480px !important;
  flex-shrink: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.trailer-thumb-container {
  position: relative;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #000000;
}

.trailer-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 150ms ease;
}

.trailer-card:hover .trailer-thumb {
  transform: scale(1.03);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  opacity: 0.8;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

.trailer-card:hover .play-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  color: #ef4444; /* red play button accent on hover */
}

.trailer-title {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Media Images Section */
.media-images-scroll-row {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.media-images-scroll-row::-webkit-scrollbar {
  height: 6px;
}

.media-images-scroll-row::-webkit-scrollbar-track {
  background: transparent;
}

.media-images-scroll-row::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
  border-radius: 3px;
}

.media-image-card {
  flex: 0 0 260px;
  width: 260px;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
}

.media-image-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.media-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Review Styles */
.review-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .review-list {
    grid-template-columns: 1fr;
  }
}

.review-card {
  background: rgba(13, 19, 26, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

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

.review-author {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text);
}

.review-rating {
  font-size: 0.81rem;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.review-content {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--soft);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-content.expanded {
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
}

.review-toggle-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.7rem !important;
  padding: 0.2rem 0.5rem !important;
  cursor: pointer;
}

/* Person profile */
.person-profile-container {
  --person-section-gap: 1.35rem;
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: var(--person-section-gap);
  align-items: start;
  min-width: 0;
}

.person-profile-sidebar,
.person-profile-content {
  min-width: 0;
}

.person-profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--person-section-gap);
}

.person-profile-sidebar .person-profile-name,
.person-profile-sidebar .person-profile-meta,
.person-profile-sidebar .person-socials-section,
.person-profile-sidebar .person-biography-section,
.person-profile-sidebar > .muted-copy {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 921px) {
  /* Keep the profile itself inside the viewport so the two columns, rather
     than the explorer page, own vertical scrolling. */
  .page-shell:has(.person-profile-container) {
    padding-bottom: 0;
  }

  #explorerPanel:has(> .person-profile-container) {
    min-height: 0;
    overflow: hidden;
  }

  .person-profile-container {
    height: calc(100vh - var(--right-topbar-height) - var(--space-3) - var(--control-inline-padding));
    max-height: calc(100vh - var(--right-topbar-height) - var(--space-3) - var(--control-inline-padding));
    min-height: 0;
    overflow: hidden;
  }

  .person-profile-sidebar,
  .person-profile-content {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--line-strong), var(--muted) 18%) transparent;
  }

  .person-profile-content {
    display: flex;
    flex-direction: column;
    gap: var(--person-section-gap);
    /* Keep the outer column fixed; the movie and TV panes own the scrolling. */
    overflow-y: hidden;
  }

  .person-photos-section {
    flex: 0 0 auto;
  }

  .person-profile-sidebar::-webkit-scrollbar,
  .person-profile-content::-webkit-scrollbar {
    width: 7px;
  }

  .person-profile-sidebar::-webkit-scrollbar-track,
  .person-profile-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .person-profile-sidebar::-webkit-scrollbar-thumb,
  .person-profile-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line-strong), var(--muted) 18%);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  .person-profile-sidebar:hover::-webkit-scrollbar-thumb,
  .person-profile-content:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line-strong), var(--muted) 38%);
    background-clip: padding-box;
  }
}

.person-profile-name {
  margin: 1.25rem 0 0;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.person-profile-age {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
}

.person-socials-section {
  display: grid;
  gap: 0.55rem;
}

.person-socials-section h3 {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.person-socials-section .person-socials-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.person-biography-section {
  margin-top: 0;
}

@media (max-width: 920px) {
  .person-profile-container {
    grid-template-columns: 1fr;
    gap: var(--person-section-gap);
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .person-profile-sidebar,
  .person-profile-content {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    padding-right: 0;
  }

  .person-profile-sidebar {
    max-width: 42rem;
  }

  .person-profile-img {
    width: min(100%, 350px) !important;
  }

  .person-profile-meta .meta-item {
    min-width: 0;
  }
}

.person-profile-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.person-profile-meta {
  margin: 0 0 1.1rem;
  padding: 0 0 0.35rem;
}

.person-profile-meta-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.person-profile-meta h3 {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blue);
  letter-spacing: 0.05em;
  margin: 0 0 0.55rem;
}

.person-profile-meta .meta-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 100%;
}

.person-profile-meta .meta-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}

.person-profile-meta .meta-value {
  font-size: 0.85rem;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
}

.person-socials .person-socials-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

.person-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  color: var(--text);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.person-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.person-social-icon {
  display: block;
  height: 2rem;
  width: auto;
}

.person-biography-section h3 {
  font-size: 1.1rem;
  margin: 1.4rem 0 0.5rem;
  color: #fff;
}

.person-biography-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--soft);
  white-space: pre-line;
  margin: 0;
  max-width: 65ch;
}

.person-photos-section {
  min-width: 0;
}

.person-photos-section h3,
.person-credits-section h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #fff;
}

.person-photos-section h3 {
  margin-top: 0;
}

@media (min-width: 921px) {
  .person-profile-content .person-credits-section {
    margin-top: 0;
  }
}

.person-photos-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
  vertical-align: middle;
}

.person-photos-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.person-photo-thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 180px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: opacity 120ms ease;
}

.person-photo-thumb:hover {
  opacity: 0.85;
}

/* Photo lightbox */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

.photo-lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 86vw;
  height: calc(86vh - 60px);
  cursor: pointer;
  content-visibility: auto;
}

.photo-lightbox-img-wrap.grabbing {
  cursor: grabbing;
}

.photo-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* var(--poster-radius) is 8px, sized for poster thumbnails - at this
     image's much larger on-screen scale that reads as barely-rounded, so
     scale it up to actually look rounded like a poster does. */
  border-radius: calc(var(--poster-radius) * 2);
  transform-origin: center center;
  transition: transform 150ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-lightbox-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  z-index: 2;
}

.photo-lightbox-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #111;
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
  min-width: 2.25rem;
  min-height: 2rem;
}

.photo-lightbox-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.3);
}

.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  z-index: 2;
}

.photo-lightbox-nav:hover { background: rgba(0,0,0,0.8); }
.photo-lightbox-nav--prev { left: 0.5rem; }
.photo-lightbox-nav--next { right: 0.5rem; }

.photo-lightbox-counter {
  color: #111;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 0.35rem;
}

.person-credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.4rem 0.85rem;
}

.person-credits-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 2.5rem;
}

@media (max-width: 920px) {
  .person-profile-content .person-credits-section {
    margin-top: var(--person-section-gap);
  }
}

.person-credits-controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem 1.2rem;
  padding: 0.55rem 0 0.8rem;
}

.person-credit-filter {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 0.45rem;
}

.person-credit-filter > span {
  flex: 0 0 auto;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.person-media-filter-buttons {
  display: flex;
  min-width: 0;
  gap: 0.3rem;
}

.person-filter-button {
  min-height: 1.9rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.person-filter-button:hover {
  border-color: color-mix(in srgb, var(--blue), transparent 35%);
  color: var(--soft);
}

.person-filter-button.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 88%);
  color: var(--blue);
}

.person-filter-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.person-filter-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.person-filter-group-label {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.person-filter-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.person-filter-menu-option {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.55rem;
  text-align: left;
  cursor: pointer;
}

.person-credits-controls .person-filter-menu {
  flex-wrap: nowrap;
}

.person-credits-controls .person-filter-options {
  flex-wrap: nowrap;
  max-width: min(72vw, 56rem);
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}

.person-filter-menu-option:hover,
.person-filter-menu-option:focus-visible {
  background: color-mix(in srgb, var(--blue), transparent 86%);
  color: var(--blue);
}

.person-filter-menu-option.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 88%);
  color: var(--blue);
}

.person-credit-filter select {
  width: auto;
  min-width: 7rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.person-credit-filter select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.person-credits-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 0.85rem;
}

.person-credits-header-main {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.person-credits-header-main .person-credits-controls {
  padding: 0;
}

.person-credits-header h3 {
  margin: 0;
}

.person-credits-split {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  min-height: 0;
}

.person-credits-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-2), transparent 25%);
  padding: 0.75rem;
}

.person-credits-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
}

.person-credits-pane-header h4 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
}

.person-credits-pane .person-credit-filter {
  gap: 0.3rem;
}

.person-credits-pane .person-credit-filter > span {
  color: var(--muted);
  font-size: 0.71rem;
}

.person-credits-pane .person-credit-filter select {
  min-width: 5.5rem;
  font-size: 0.78rem;
}

.person-credits-pane .person-credits-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--line-strong), var(--muted) 18%) transparent;
}

.person-credits-pane .person-credits-grid::-webkit-scrollbar {
  width: 7px;
}

.person-credits-pane .person-credits-grid::-webkit-scrollbar-track {
  background: transparent;
}

.person-credits-pane .person-credits-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line-strong), var(--muted) 18%);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.person-credits-pane .person-credits-grid:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line-strong), var(--muted) 38%);
  background-clip: padding-box;
}

.person-credits-count {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.person-credits-loading {
  display: flex;
  min-height: 100px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.pill-toggle-group {
  display: flex;
  gap: 0.25rem;
}

.pill-toggle {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 100ms, color 100ms, background 100ms;
  white-space: nowrap;
}

.pill-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pill-toggle.active {
  border-color: var(--blue);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 88%);
}

html.light-mode .pill-toggle {
  background: #fff;
  border-color: var(--line);
}

html.light-mode .pill-toggle.active {
  background: color-mix(in srgb, var(--blue), transparent 88%);
}

.filmography-load-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

.person-credit-card {
  display: block;
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: 220px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease;
}

.person-credit-card:any-link {
  color: inherit;
  text-decoration: none;
}

.person-credit-card:hover {
  transform: translateY(-3px);
}

.person-credit-card:focus-visible {
  border-radius: var(--poster-radius);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.person-credit-poster-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: var(--poster-radius);
  background: var(--panel-2);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.person-credit-card.in-library .person-credit-poster-wrap {
  border-color: rgba(16, 185, 129, 0.42);
}

.person-credit-card.in-library:hover .person-credit-poster-wrap {
  border-color: var(--green);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.12);
}

.person-credit-card:not(.in-library):hover .person-credit-poster-wrap {
  border-color: color-mix(in srgb, var(--blue), transparent 50%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.person-credit-poster {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #111;
}

.person-credit-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.5rem 0.1rem 0;
  min-width: 0;
}

.person-credit-title-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.35rem;
}

.person-credit-title {
  min-width: 0;
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-credit-character {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-credit-year {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--soft);
}

.person-credit-badges {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  left: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: flex-end;
}

.library-badge,
.watch-state-badge {
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-size: 0.71rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.library-badge,
.watch-state-badge.is-complete {
  background: var(--green);
  color: #04120d;
}

.watch-state-badge.is-partial {
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.14);
  color: #facc15;
}

.watch-state-badge small {
  margin-left: 0.15rem;
  color: inherit;
  font-size: 0.58rem;
  opacity: 0.8;
}

@media (max-width: 1100px) {
  .person-credits-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .person-media-filter-buttons {
    flex-wrap: wrap;
  }

  .person-credits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem var(--space-2);
  }

  .person-credits-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .person-credits-pane {
    min-height: 0;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .person-credits-pane .person-credits-grid {
    overflow: visible;
    padding-right: 0;
  }

  .person-photos-grid {
    display: flex !important;
    gap: var(--space-2) !important;
  }

  .person-photo-thumb {
    width: auto !important;
    height: 150px !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 420px) {
  .person-credits-controls {
    align-items: stretch;
  }

  .person-credit-filter {
    width: 100%;
    justify-content: space-between;
  }

  .person-credits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Watch history dashboard poster sizing overrides */
#tvHistoryRow .movie-card,
#movieHistoryRow .movie-card {
  width: 180px;
  flex: 1 1 180px;
  flex-shrink: 0;
  max-width: 220px;
}

/* Dashboard watch-history mini cards (poster + details, ~2 posters wide) */
#tvHistoryRow.horizontal-scroll-row,
#movieHistoryRow.horizontal-scroll-row {
  padding: 0 0 var(--space-2);
  scroll-padding: 0;
}

.history-mini-card {
  display: flex;
  gap: var(--space-3);
  padding: 0.75rem;
  width: 360px;
  flex: 0 0 360px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  align-items: stretch;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.history-mini-card:hover {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.history-mini-card-poster-wrapper {
  flex: 0 0 118px;
  width: 118px;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 130ms ease, box-shadow 130ms ease;
  display: block;
}

.history-mini-card:hover .history-mini-card-poster-wrapper {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.history-mini-card-poster-wrapper img,
.history-mini-card-poster-wrapper span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-mini-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.history-mini-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.history-mini-card-title {
  font-size: 1rem;
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-mini-card-episode {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e5a00d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.history-mini-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: #9b9b9b;
}

.history-mini-card-meta > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.history-mini-card-apps .source-badge {
  font-size: 0.68rem;
}

html.light-mode .history-mini-card-title {
  color: var(--text);
}

@media (max-width: 480px) {
  .history-mini-card {
    width: 84vw;
    flex: 0 0 84vw;
    max-width: 320px;
  }

  .history-mini-card-poster-wrapper {
    flex-basis: 84px;
    width: 84px;
  }
}

/* Person modal drawer styling */
#personModal {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  background: rgba(3, 6, 8, 0.45);
  backdrop-filter: blur(4px);
  z-index: 60;
}

#personModal .modal-panel {
  width: min(580px, 100vw);
  max-width: 580px;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border-left: 1px solid var(--line-strong);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--bg);
}

#personModal .modal-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  flex: 0 0 auto;
}

#personModal #personModalBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: var(--space-4);
  min-height: 0;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Clickable episode rows */
.immersive-episode-row:not(.is-unreleased) {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.immersive-episode-row:not(.is-unreleased):hover {
  border-color: rgba(234, 179, 8, 0.45);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.1);
  background: #0f161c;
}

/* Seerr-style season disclosure */
.season-accordions {
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.season-accordions .show-section-title > span {
  color: var(--muted);
  font-size: 0.81rem;
  font-weight: 700;
}

.season-accordions .show-section-title .media-toggle-all-seasons-btn {
  margin-left: auto;
}

.season-section-title {
  justify-content: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.season-section-heading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.season-section-heading span {
  color: var(--muted);
  font-size: 0.81rem;
  font-weight: 700;
  white-space: nowrap;
}

.season-section-title #seerrRequestContainer {
  margin-left: auto;
  min-width: 0;
}

.season-section-title #seerrRequestContainer:has(.tv-availability-summary) {
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
  white-space: nowrap;
}

.season-section-title .tv-availability-summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  margin: 0;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .season-section-title {
    gap: 0.4rem;
  }

  .season-section-heading {
    gap: 0.4rem;
  }

  .season-section-heading h3 {
    font-size: 0.9rem;
  }

  .season-section-heading span {
    font-size: 0.7rem;
  }

  .season-section-title .tv-availability-summary {
    min-height: 1.55rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.68rem;
  }
}

.season-accordion-list {
  display: grid;
  gap: var(--space-2);
}

.seasons-section.season-accordions {
  scroll-margin-top: calc(var(--right-topbar-height) + 12px);
}

/* Season poster thumbnail at the start of each season row (media-detail-show.js). */
.season-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.season-row-title-text {
  min-width: 0;
}

/* Row poster follows the media card poster: 2:3, flush with the row's left, top
   and bottom edges. Its left corners follow the card's inner curve, so the card's
   rounded border shows around it (the open card doesn't clip its contents). */
.season-accordion-trigger.has-row-poster {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.season-row-poster {
  flex: 0 0 auto;
  width: 84px;
  height: 126px;
  object-fit: cover;
  border-radius: calc(var(--season-card-radius, 6px) - 1px) 0 0 calc(var(--season-card-radius, 6px) - 1px);
  background: var(--panel-2);
}

.season-accordion {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--season-card-radius, 6px);
  background: color-mix(in srgb, var(--panel-2), transparent 92%);
}

.season-accordion.is-open {
  border-color: color-mix(in srgb, var(--text), transparent 24%);
}

/* Collapsed-season saving feedback (media-detail-show.js): a bulk
   watch/unwatch triggered from the show-level control bar reaches episodes
   in seasons whose accordion panel isn't rendered (and so can't show the
   per-episode .immersive-episode-row.is-saving pulse), so pulse the
   collapsed header itself instead - same animation, same intent. */
.season-accordion.is-saving .season-accordion-trigger {
  pointer-events: none;
  animation: episode-row-saving-pulse 1100ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .season-accordion.is-saving .season-accordion-trigger {
    animation: none;
    opacity: 0.7;
  }
}

.season-accordion-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 48px;
  align-items: center;
  column-gap: var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  cursor: pointer;
  /* Reserves space for the sticky .page-topbar so scrollIntoView() (see
     scrollSeasonAccordionIntoView in media-detail-show.js) lands this header
     visible just below the bar instead of hidden underneath it. */
  scroll-margin-top: calc(var(--right-topbar-height) + 12px);
}

.season-accordion-trigger:hover {
  background: color-mix(in srgb, var(--panel-3), transparent 12%);
}

/* The open season keeps its background on hover. */
.season-accordion.is-open .season-accordion-trigger:hover {
  background: transparent;
}

.season-accordion.is-open .season-accordion-trigger {
  border-bottom: 0;
}

.season-row-title {
  min-width: 0;
}

.season-row-mobile-summary {
  display: none;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.season-row-title strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.season-row-col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

/* Season row text, stacked: "Season N", season name, episode count, watched, next airing. */
.season-row-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

.season-row-name {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
}

.season-row-next {
  color: var(--soft);
}

.season-accordion-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.season-accordion-chevron {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 160ms ease-out;
}

.season-accordion.is-open .season-accordion-chevron {
  transform: rotate(180deg);
}

.season-accordion-panel {
  padding: 0 var(--space-4) var(--space-3);
}

/* Season cards sit in their own column (.season-accordion-cards). The open
   season's episodes (.season-accordion-detail) sit in a second column beside
   them. Mobile drops the columns: the cards flow as one list and each open
   season's episodes follow its card through the inline order set in
   media-detail-show.js. */
.season-accordion-cards {
  display: contents;
}

.season-accordion-detail {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2), transparent 92%);
  overflow: hidden;
}

@media (min-width: 761px) {
  .season-accordion-list {
    grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr);
    align-items: start;
    /* positionSeasonDetails sets a min-height to fit the episode box; stretched
       rows would then push the cards down, away from the box placed beside them. */
    align-content: start;
    column-gap: var(--space-4);
  }

  /* Each season keeps its own row (--season-row, set in media-detail-show.js):
     the card in column 1 and, when open, its episodes in column 2 of that row,
     top-aligned to the card. The card keeps its natural height, so the curves
     meet its top and bottom edges. */
  .season-accordion-cards {
    display: contents;
  }

  .season-accordion-list {
    position: relative;
  }

  .season-accordion {
    grid-column: 1;
    align-self: start;
  }

  /* Placed beside its card by positionSeasonDetails (media-detail-show.js). Out
     of the row flow, so opening a season doesn't push the other cards down. */
  .season-accordion-detail {
    position: absolute;
    /* The visible outline is the ::after frame below; the box's own borders
       only keep the layout. */
    border-color: transparent;
    border-left: 0;
    /* Square where the card's top line runs in, so the corner clips no notch. */
    border-top-left-radius: 0;
    overflow: visible;
  }

  /* The open season's outline runs from its card into the episode box: the card
     has no right edge, and two curves in the gap take its top and bottom edges
     into the episode box's left border. The top curve sits at the box's top
     edge, the bottom curve at the card's bottom edge. */
  .seasons-section .season-accordion-cards > .season-accordion.is-open {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    overflow: visible;
  }

  /* Top: the card's top line runs across the gap into the episode box's rounded
     top-left corner. */
  /* --season-hairline (set in positionSeasonDetails) is a 1px border's real
     drawn width: under the app shell's CSS zoom a border snaps to a whole
     screen pixel, so a plain 1px line here would sit off the borders it joins. */
  .season-accordion-detail::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--season-hairline, 1px));
    left: calc(-1 * var(--space-4));
    width: var(--space-4);
    height: var(--season-hairline, 1px);
    background: var(--season-open-line);
  }

  /* The episode box's outline as one frame, so its rounded bottom-left corner
     draws as a single curve. The frame's left edge is masked beside the card,
     down to where the bottom curve ends: the card's height (--season-card-h,
     set in positionSeasonDetails) plus the curve. */
  .season-accordion-detail::after {
    --join-y: calc(var(--season-card-h, 0px) - var(--season-hairline, 1px) + var(--season-card-radius, 6px));
    content: "";
    position: absolute;
    inset: calc(-1 * var(--season-hairline, 1px));
    border: var(--season-hairline, 1px) solid var(--season-open-line);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask:
      linear-gradient(#000, #000) right top / calc(100% - var(--season-hairline, 1px)) 100% no-repeat,
      linear-gradient(transparent var(--join-y), #000 var(--join-y)) left top / var(--season-hairline, 1px) 100% no-repeat;
    mask:
      linear-gradient(#000, #000) right top / calc(100% - var(--season-hairline, 1px)) 100% no-repeat,
      linear-gradient(transparent var(--join-y), #000 var(--join-y)) left top / var(--season-hairline, 1px) 100% no-repeat;
  }

  /* Bottom: the card's bottom line runs across the gap, then curves down into the
     episode box's left edge (a quarter circle of the card radius). The corner
     inside the curve takes the open background, so it reads as one shape. */
  .seasons-section .season-accordion-cards > .season-accordion.is-open::after {
    --join-r: var(--season-card-radius, 6px);
    --join-w: var(--season-hairline, 1px);
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    width: var(--space-4);
    height: var(--join-r);
    background:
      radial-gradient(
        circle var(--join-r) at 0 100%,
        transparent calc(var(--join-r) - 1.5 * var(--join-w)),
        var(--season-open-line) calc(var(--join-r) - var(--join-w)),
        var(--season-open-line) calc(var(--join-r) - 0.5 * var(--join-w)),
        var(--season-open-fill) var(--join-r)
      ) right top / var(--join-r) var(--join-r) no-repeat,
      linear-gradient(var(--season-open-line), var(--season-open-line)) left top / calc(100% - var(--join-r)) var(--join-w) no-repeat;
  }

  /* Fills the gap beside the open card with the card's own background, so the
     card and the episode box read as one surface. */
  .seasons-section .season-accordion-cards > .season-accordion.is-open::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--space-4);
    background: inherit;
  }

  .season-row-poster {
    width: 150px;
    height: 225px;
  }

  /* Keeps wrapped lines (season name, next airing) off the card's top and bottom edges. */
  .season-row-text {
    padding-block: var(--space-2);
  }

  .season-accordion-detail .season-accordion-panel {
    padding-top: var(--space-3);
  }
}

.season-accordion-panel .show-season-block {
  gap: 0;
}

.season-accordion-panel .show-season-head {
  min-height: 44px;
  padding: var(--space-2) 0;
}

.season-desktop-action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.season-mobile-action-menu {
  display: none;
}

.season-accordion-panel .show-episode-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.media-detail-page .season-accordion-panel .immersive-episode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "thumb"
    "copy";
  gap: var(--space-2);
  align-content: start;
  align-items: start;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}

.media-detail-page .season-accordion-panel .immersive-episode-row:last-child {
  border-bottom: 1px solid var(--line);
}

.media-detail-page .season-accordion-panel .immersive-episode-row:hover {
  box-shadow: none;
}

.media-detail-page .season-accordion-panel .immersive-episode-row.is-highlighted .immersive-episode-copy p {
  display: block !important;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.season-accordion-panel .episode-thumb-wrap {
  grid-area: thumb;
  width: 100%;
  max-width: none;
  justify-self: start;
}

.season-accordion-panel .episode-thumb {
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
}

.season-accordion-panel .immersive-episode-copy {
  display: flex;
  flex-direction: column;
  grid-area: copy;
  height: 100%;
  min-height: 0;
  padding: 0 var(--space-2) var(--space-2);
}

/* Keep the release/action row aligned when an episode synopsis is shorter
   than the three-line clamp used by the card copy. Watch history follows this
   reserved area and can extend the card below it. */
.season-accordion-panel .immersive-episode-copy-wrap {
  min-height: 3.48rem;
}

.season-accordion-panel .immersive-episode-actions {
  justify-content: flex-end;
}

.season-accordion-panel .immersive-episode-title-row b {
  flex-wrap: wrap;
}

.season-accordion-panel .immersive-episode-meta-row {
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 0;
  padding-top: var(--space-2);
}

.season-accordion-panel .immersive-episode-dates {
  justify-content: flex-start;
}

.episode-progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(161, 98, 7, 0.5);
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  padding: 0.14rem 0.38rem;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.episode-progress-badge small {
  color: inherit;
  font-size: 0.68rem;
  opacity: 0.9;
}

.episode-progress-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #92400e;
  font-size: 0.80rem;
  font-weight: 800;
  white-space: nowrap;
}

.episode-progress-track {
  flex: 1 1 5rem;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(161, 98, 7, 0.22);
}

.episode-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #d97706;
}

html:not(.light-mode) .episode-progress-badge {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.14);
  color: #facc15;
}

html:not(.light-mode) .episode-progress-inline {
  color: #facc15;
}

html:not(.light-mode) .episode-progress-track {
  background: rgba(148, 163, 184, 0.28);
}

html:not(.light-mode) .episode-progress-fill {
  background: #facc15;
}

@media (max-width: 1700px) {
  .season-accordion-panel .show-episode-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1400px) {
  .season-accordion-panel .show-episode-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .season-accordion-panel .show-episode-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .season-accordion-panel .show-episode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .season-accordion-trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
    padding-inline: var(--space-3);
  }

  .season-row-title {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
  }

  .season-row-mobile-summary {
    display: inline;
    margin-left: 0.15rem;
  }

  .season-row-episodes,
  .season-row-watched,
  .season-row-next {
    display: none;
  }


  .season-accordion-meta {
    margin-left: 0;
  }

  .season-accordion-panel {
    padding-inline: var(--space-3);
  }

  .season-accordion-panel .show-season-label.is-complete {
    display: none;
  }

  .season-desktop-action-controls {
    display: none;
  }

  .season-mobile-action-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .season-mobile-action-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-3), transparent 12%);
    color: var(--soft);
    font-size: 0.72rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
  }

  .season-mobile-action-trigger::-webkit-details-marker {
    display: none;
  }

  .season-mobile-action-trigger::after {
    content: "⌄";
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 160ms ease-out;
  }

  .season-mobile-action-menu[open] > .season-mobile-action-trigger::after {
    transform: rotate(180deg);
  }

  .season-mobile-action-controls {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 25;
    display: grid;
    min-width: min(15rem, calc(100vw - 3rem));
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel-3);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  }

  .season-mobile-action-controls .action-pill,
  .season-mobile-action-controls .season-request-controls,
  .season-mobile-action-controls .season-request-controls .rating-pill {
    width: 100%;
  }

  .season-mobile-action-controls .season-request-controls {
    display: grid;
    gap: 0.45rem;
  }

  .season-accordion-panel .show-episode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-detail-page .season-accordion-panel .immersive-episode-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "thumb"
      "copy";
    min-height: 0;
    gap: var(--space-3);
  }

  .season-accordion-panel .immersive-episode-row.is-highlighted .immersive-episode-meta-row {
    display: none;
  }

  .season-accordion-panel .immersive-episode-row.is-highlighted .immersive-episode-copy p {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-line-clamp: 3;
  }

  .season-accordion-panel .immersive-episode-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }

  .season-accordion-panel .immersive-episode-availability {
    width: 100%;
  }

  .season-accordion-panel .immersive-episode-availability.has-availability {
    justify-content: space-between;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .immersive-episode-meta-row {
    display: none;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid color-mix(in srgb, var(--line), transparent 12%);
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history-list {
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history-row {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history-row:not(:first-child),
  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history-row .source-badge {
    display: none;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-watch-history-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .season-accordion-panel .immersive-episode-row.is-watched .episode-edit-date-btn {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .season-accordion-panel .immersive-episode-actions {
    justify-content: flex-end;
  }

  .episode-progress-inline {
    gap: 0.25rem;
  }
}



/* Tools tab collapsible sections */
.tool-section-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  user-select: none;
}

.tool-section-summary::-webkit-details-marker { display: none; }

.tool-section-summary::before {
  content: "▶";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

details[open] > .tool-section-summary::before {
  transform: rotate(90deg);
}

.tool-section-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tool-section-summary-text b {
  font-size: 0.9rem;
  color: var(--text);
}

.tool-section-summary-text span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
}

/* Tools tab layout */
.tool-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tool-item-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.tool-item-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.tool-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.tool-item-title-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tool-item-title-desc b {
  font-size: 0.95rem;
  color: var(--text);
}

.tool-item-title-desc span {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Mobile responsive */
@media (max-width: 900px) {
  .settings-row {
    flex-direction: column;
  }
  .settings-row-main,
  .settings-row-help {
    flex: none;
    width: 100%;
  }
}

/* Removed compact settings adjustments in favor of modern spacious layout */

/* Alpha filter sidebar */

/*
 * Pull heading flush against the topbar with a negative margin equal to the
 * page-shell padding-top (1.05rem). padding-top compensates visually.
 * top: 3.5rem = topbar height → heading sticks immediately, zero movement.
 */
.explorer-heading-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  margin-bottom: 0.5rem;
}

.explorer-heading-sticky.is-media-detail {
  background: transparent !important;
  border-bottom: none !important;
}

.explorer-with-alpha {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.explorer-with-alpha .explorer-panel {
  flex: 1 1 0;
  min-width: 0;
}

.alpha-filter-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: sticky;
  top: 0;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 65vh;
  max-height: 65vh;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.15rem;
  z-index: 10;
  user-select: none;
  overflow-y: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}

.alpha-filter-nav::-webkit-scrollbar {
  display: none;
}

.alpha-filter-nav button {
  display: block;
  width: 1.5rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 0.15rem 0;
  transition: background 0.1s, color 0.1s;
  text-align: center;
}

.alpha-filter-nav button:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
}

.alpha-filter-nav button.alpha-empty {
  color: var(--muted);
  opacity: 0.35;
  cursor: default;
}

.alpha-filter-nav button.alpha-current {
  background: var(--blue);
  color: #fff;
}

@media (max-width: 700px) {
  .alpha-filter-nav {
    display: none;
  }
}

/*
 * Large-screen layout: topbar = 3.5rem, page-shell padding-top = 1.05rem.
 * margin-top: -1.05rem pulls heading up so its top edge sits right at the
 * topbar bottom - no gap for content to scroll through.
 * padding-top: calc(1.05rem + 0.25rem) restores the visual internal spacing.
 * top: 3.5rem = heading sticks at topbar bottom with zero movement.
 */
@media (min-width: 761px) {
  .page-shell[data-active-view="explorer"] {
    padding-top: 0;
  }

  .explorer-heading-sticky {
    top: 0;
    margin-top: 0;
    padding-top: var(--top-control-padding) !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .alpha-filter-nav {
    /* Heading is ~4.2rem tall once padding is applied, topbar = 3.5rem.
       Strip sticks below heading at 3.5 + 4.2 = 7.7rem ≈ 8rem. */
    top: 4rem;
    height: 65vh;
    max-height: 65vh;
  }
}

.show-progress-bar-attached {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(14, 18, 22, 0.88);
  color: #c8c8c8;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  font-family: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

.show-poster-attached {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Search results header centering layout */
.search-results-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

@media (max-width: 1200px) {
  .search-results-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }
}

/* Override default square icon button width for search filter text buttons */
.search-view-filters .explorer-view-btn {
  width: auto;
}

.history-filter-toggle .explorer-view-btn {
  width: auto;
  padding: 0 0.7rem;
  font-size: 0.81rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Watch History Page Grid Layout */
.history-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--history-poster-width, 86px), 1fr));
  gap: var(--space-3);
  width: 100%;
}

.history-grid-card {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}

.history-grid-card:hover .history-grid-poster {
  border-color: var(--yellow);
  transform: translateY(-2px);
}

.history-grid-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  background: var(--panel-3);
  transition: transform 140ms ease, border-color 140ms ease;
}

.history-grid-poster.poster-fallback {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

.history-grid-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.history-grid-copy b,
.history-grid-copy span,
.history-grid-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-grid-copy b {
  font-size: 0.86rem;
  line-height: 1.25;
  color: var(--text);
}

.history-grid-copy span,
.history-grid-copy small {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Watch History Page Dense List Layout */
.history-table-view {
  --history-list-cols: calc(var(--history-poster-width, 86px) * 0.42) minmax(12rem, 1.4fr) minmax(10rem, 1fr) 7rem 10rem 8rem;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.history-list-header,
.history-list-row {
  display: grid;
  grid-template-columns: var(--history-list-cols);
  align-items: center;
  gap: 0.75rem;
}

.history-list-header {
  padding: 0.45rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.history-list-header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.history-list-row {
  min-width: 0;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background 120ms ease;
}

.history-list-row:last-child {
  border-bottom: 0;
}

.history-list-row:hover {
  background: rgba(255,255,255,0.04);
}

.history-list-poster {
  width: calc(var(--history-poster-width, 86px) * 0.42);
  height: calc(var(--history-poster-width, 86px) * 0.42 * 1.5);
  object-fit: cover;
  border-radius: var(--poster-radius);
  border: 1px solid var(--line);
  background: var(--panel-3);
  display: block;
}

.history-list-poster.poster-fallback {
  width: calc(var(--history-poster-width, 86px) * 0.42);
  height: calc(var(--history-poster-width, 86px) * 0.42 * 1.5);
}

.history-list-title,
.history-list-col {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-list-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
}

.history-list-col {
  font-size: 0.8rem;
  color: var(--muted);
}

.history-list-source {
  display: flex;
  align-items: center;
  min-width: 0;
}

@media (max-width: 900px) {
  .history-table-view {
    --history-list-cols: calc(var(--history-poster-width, 86px) * 0.42) minmax(0, 1fr) minmax(8rem, 0.8fr) 9rem;
  }
  .history-list-header > *:nth-child(4),
  .history-list-row > *:nth-child(4),
  .history-list-header > *:nth-child(6),
  .history-list-row > *:nth-child(6) {
    display: none;
  }
}

/* Watch History Page List Layout */
.history-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
}

@media (max-width: 1200px) {
  .history-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .history-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .history-list {
    grid-template-columns: 1fr;
  }
}

.history-page-card {
  display: flex;
  gap: var(--space-3);
  padding: 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
  align-items: stretch;
}

.history-page-card:hover {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.history-card-poster-wrapper {
  flex: 0 0 var(--history-poster-width, 86px);
  width: var(--history-poster-width, 86px);
  /* The card stretches its items, which hands the poster a definite height and
     cancels aspect-ratio. Opting out of the stretch keeps posters at 2:3 when
     wrapped detail text makes the card taller than the poster. */
  align-self: flex-start;
  aspect-ratio: 2/3;
  border-radius: var(--poster-radius);
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.history-card-poster-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.history-page-card:hover .history-card-poster-wrapper {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45);
}

.history-card-poster-wrapper img,
.history-card-poster-wrapper span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

/* Let the card-view history poster form the leading surface of its tile while
   the existing detail inset remains unchanged. */
.history-list .history-page-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.history-list .history-page-card > .history-card-poster-wrapper {
  align-self: stretch;
  height: auto;
  max-height: none;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.history-list .history-page-card > .history-card-poster-wrapper .history-card-poster-link {
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.history-list .history-page-card > .history-card-details {
  padding: 0.6rem;
}

.history-list .history-page-card .history-card-poster-wrapper .poster-fallback {
  background: var(--panel-3);
}

.history-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.history-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
}

.history-card-title-link {
  color: inherit;
  text-decoration: none;
}

.history-card-title-link:hover,
.history-card-title-link:focus-visible {
  color: var(--accent);
}

.history-card-title-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.45rem;
}

.history-card-title-row .history-card-title-link {
  min-width: 0;
}

.up-next-checking-status {
  flex: 0 0 auto;
  color: var(--muted, #9b9b9b);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.history-card-episode {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
}

.history-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #9b9b9b;
}

.history-card-meta > span,
.history-card-meta > div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.history-card-meta .history-card-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
}

.history-card-meta-row .meta-value {
  color: var(--text);
  font-size: 0.82rem;
}

/* Dashboard cards: keep Last Played / progress / the app row together at the
   bottom, directly under each other, instead of spread by space-between. */
.dashboard-history-page-card:not(.explorer-history-card) .history-card-header {
  margin-bottom: auto;
}

/* Season/Ep sits in the header, right under the episode name. */
.history-card-header .history-card-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  margin-top: 0.2rem;
  font-size: 0.82rem;
}

.history-card-meta-row .meta-value.history-card-watch-count {
  color: var(--muted, #666);
  font-size: var(--fs-card-watch-count);
  font-weight: 700;
}

.history-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.history-card-apps {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.meta-label {
  font-weight: 800;
  color: var(--muted, #666);
  text-transform: uppercase;
  font-size: var(--fs-card-label);
  letter-spacing: 0.05em;
}

/* Card text weights on the dashboard, History and library cards. */
:is(#timeline-view .dashboard-history-page-card, #history-view .history-list .history-page-card, #explorerPanel .explorer-history-card) .meta-label {
  font-weight: 700;
  letter-spacing: 0.12em;
}

:is(#timeline-view .dashboard-history-page-card, #history-view .history-list .history-page-card, #explorerPanel .explorer-history-card) .history-card-meta-row .meta-value {
  font-weight: 600;
}

:is(#timeline-view .dashboard-history-page-card, #history-view .history-list .history-page-card, #explorerPanel .explorer-history-card) .history-card-episode {
  font-weight: 600;
}

/* Animations */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-10px);
  }
}

/* Enhanced sync button styling */
.sync-btn {
  transition: all 0.2s ease;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.sync-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sync-action-btn {
  transition: all 0.2s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sync-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(75, 150, 230, 0.3);
}

/* Sync issue card expandable styling */
.sync-issue-card {
  transition: all 0.2s ease;
}

.sync-issue-card[open] {
  background: rgba(0, 0, 0, 0.08);
  border-left-color: var(--blue);
}

.sync-issue-card summary:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dismiss-issue-btn {
  font-size: 1.1rem !important;
  padding: 0.25rem 0.35rem !important;
  min-height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dismiss-issue-btn:hover {
  color: var(--red) !important;
}

@media (max-width: 600px) {
  .history-table-view {
    --history-list-cols: 2.4rem minmax(0, 1fr) 6.5rem;
  }
  .history-list-header > *:nth-child(n+4),
  .history-list-row > *:nth-child(n+4) {
    display: none;
  }
  .history-page-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .history-card-poster-wrapper {
    width: 64px;
    /* The card stacks at this width, so a flex-basis would pin the poster's
       height instead of its width and flatten it to a square. Sizing from width
       alone lets aspect-ratio set the height. */
    flex: 0 0 auto;
  }

  .history-list .history-page-card > .history-card-poster-wrapper,
  .history-list .history-page-card > .history-card-poster-wrapper .history-card-poster-link {
    border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  }
}

/* Light mode theme */
html.light-mode {
  color-scheme: light;
  --bg: #ffffff;       /* Pure white - main content background */
  --panel: #ffffff;    /* Pure white - crisp cards and containers */
  --panel-2: #f8fafc;  /* Slate 50 - light surface for internal elements */
  --panel-3: #f1f5f9;  /* Slate 100 - cool grey sidebar background */
  --brand-menu: #f1f5f9;
  --brand-main: #fbfbfb;
  --line: #e2e8f0;     /* Slate 200 - clean and subtle border */
  --line-strong: #cbd5e1; /* Slate 300 - more visible border */
  --skeleton-base: #e2e8f0;   /* Slate 200 - placeholder tile while artwork loads */
  --skeleton-sheen: rgba(255, 255, 255, 0.85);
  --text: #0f172a;     /* Slate 900 - dark slate for high legibility */
  --soft: #334155;     /* Slate 700 - medium dark text */
  --muted: #64748b;    /* Slate 500 - muted text with high contrast */
  --blue: #2563eb;
  --green: #059669;
  --yellow: #d97706;
  --red: #dc2626;
  --field: #ffffff;
  --accent: #2563eb;
  --surface: #f1f5f9;
  --surface-hover: #e2e8f0;
  --text-primary: #0f172a;
  --nav-active-border: #315b86;
  --nav-active-bg: #172232;
  --nav-active-text: #d9ecff;
}

html.light-mode,
html.light-mode body {
  background: var(--bg);
  color: var(--text);
}

html.light-mode .glass-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05), 0 4px 6px -1px rgba(15, 23, 42, 0.01);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.light-mode .view-panel > .glass-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.light-mode .topnav {
  background: var(--panel-3);
  border-right: 1px solid var(--line);
}

html.light-mode .sidebar-primary,
html.light-mode .sidebar-secondary {
  background: var(--panel-3);
}

html.light-mode .nav-label {
  color: var(--muted);
}

html.light-mode .sidebar-view-toggle {
  --sidebar-view-blue: var(--blue);
}

html.light-mode .nav-tab {
  color: var(--text);
  border-left: 3px solid transparent;
}

html.light-mode .nav-tab:hover {
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
  border-left-color: rgba(37, 99, 235, 0.3);
}

html.light-mode .nav-tab.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
  border-left-color: var(--blue);
}

/* Keep portaled three-dot menus in the same navigation visual language as the
   left menu when the light theme is active. */
html.light-mode .poster-overflow-item:hover,
html.light-mode .poster-overflow-item:focus-visible {
  border-left-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
}

html.light-mode .poster-overflow-item-danger:hover,
html.light-mode .poster-overflow-item-danger:focus-visible {
  border-left-color: rgba(220, 38, 38, 0.55);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

html.light-mode .poster-overflow-item-has-submenu:hover::after,
html.light-mode .poster-overflow-item-has-submenu:focus-visible::after {
  color: var(--blue);
}

html.light-mode .poster-overflow-item-has-submenu[aria-expanded="true"] {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

html.light-mode .sidebar-appearance-list-item {
  color: var(--text);
}

html.light-mode .sidebar-appearance-list-item:hover {
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
  border-left-color: rgba(37, 99, 235, 0.3);
}

html.light-mode .sidebar-appearance-list-item.active,
html.light-mode .sidebar-appearance-list-item:has(input:checked) {
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
  border-left-color: var(--blue);
}

html.light-mode .sidebar-appearance-list-item input:focus-visible {
  outline-color: var(--blue);
}

html.light-mode .page-topbar {
  background: var(--brand-menu);
  border-bottom: 1px solid var(--line);
}

html.light-mode .page-shell {
  background: var(--bg);
}

html.light-mode button,
html.light-mode input {
  color: var(--text);
}

html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="password"],
html.light-mode input[type="search"],
html.light-mode input[type="url"],
html.light-mode input[type="datetime-local"],
html.light-mode input[type="date"],
html.light-mode input[type="time"],
html.light-mode input[type="number"],
html.light-mode textarea,
html.light-mode select,
html.light-mode .field {
  background: #ffffff;
  border: 1px solid var(--line);
  color-scheme: light;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

html.light-mode input[type="text"]:focus,
html.light-mode input[type="email"]:focus,
html.light-mode input[type="password"]:focus,
html.light-mode input[type="search"]:focus,
html.light-mode input[type="url"]:focus,
html.light-mode input[type="datetime-local"]:focus,
html.light-mode input[type="date"]:focus,
html.light-mode input[type="time"]:focus,
html.light-mode input[type="number"]:focus,
html.light-mode textarea:focus,
html.light-mode select:focus,
html.light-mode .field:focus {
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05), 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

/* The left menu search is an underlined field in both themes, not a boxed input. */
html.light-mode .global-search input,
html.light-mode .global-search input:focus {
  border: 0;
  border-bottom: 1px solid #cbd5e1;
  background: transparent;
  box-shadow: none;
}

html.light-mode .global-search input:focus {
  border-bottom-color: #e5a00d;
}

html.light-mode .button-primary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
}

html.light-mode .button-primary:hover {
  background: transparent;
  border-color: rgba(37, 99, 235, 0.55);
  color: #2563eb;
}

html.light-mode .button-ghost {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  transition: all 150ms ease;
}

html.light-mode .button-ghost:hover {
  background: var(--panel-2);
  border-color: var(--line-strong);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08);
}

html.light-mode .up-next-sync-button:hover,
html.light-mode .up-next-sync-button:focus-visible {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent);
}

html.light-mode .up-next-sync-button:disabled:hover {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

html.light-mode .button-danger {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: #dc2626;
  box-shadow: none;
}

html.light-mode .button-danger:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.6);
  background: transparent;
  color: #b91c1c;
  box-shadow: none;
}

html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6 {
  color: var(--text);
}

html.light-mode .section-heading {
  color: var(--text);
}

html.light-mode .muted,
html.light-mode .muted-copy {
  color: var(--muted);
}

html.light-mode .eyebrow {
  color: var(--muted);
}

html.light-mode code {
  background: rgba(241, 245, 249, 0.9);
  color: #2563eb;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(203, 213, 225, 0.8);
}

html.light-mode .modal-backdrop-image {
  opacity: 0.08;
}

html.light-mode .media-detail-page {
  background: rgba(248, 250, 252, 0.18);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

html.light-mode .modal-overlay {
  background: rgba(15, 23, 42, 0.3);
}

html.light-mode .media-info-overlay--detail-page {
  background: transparent;
}

html.light-mode .modal-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
}

html.light-mode .confirm-modal-panel {
  border-color: var(--line-strong);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
}

html.light-mode .confirm-modal-head {
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

html.light-mode .confirm-modal--error .confirm-modal-panel {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line-strong));
}

html.light-mode .confirm-modal--error .confirm-modal-head {
  border-bottom-color: color-mix(in srgb, var(--red) 22%, var(--line));
  background: color-mix(in srgb, var(--panel) 92%, var(--red) 8%);
}

html.light-mode .confirm-modal-error-summary {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 6%, var(--panel));
}

html.light-mode .confirm-modal-error-mark {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: #b91c1c;
}

html.light-mode .sidebar-footer {
  background: var(--panel-3);
}

html.light-mode .movie-card b,
html.light-mode .folder-title b {
  color: var(--text);
}

html.light-mode .history-card-title {
  color: var(--text);
}

html.light-mode .field-label {
  color: var(--text);
}

html.light-mode .page-topbar .immersive-back-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-muted, var(--text)) !important;
  box-shadow: none !important;
}

html.light-mode .page-topbar .immersive-back-button:hover {
  background: transparent !important;
  color: var(--primary) !important;
}

html.light-mode .rating-pill {
  background: var(--panel-2);
}

html.light-mode .rating-pill-link:hover {
  background: var(--panel-3);
}

/* Keep the TMDB/TVDB/IMDb pills backgroundless in light mode too, winning
   over the plain .rating-pill light background above - including on hover,
   which otherwise still picked up the plain pill's hover fill. */
html.light-mode .rating-pill--brand {
  background: transparent;
}

html.light-mode .rating-pill--brand:hover {
  background: transparent;
}

html.light-mode .sidebar-sub-menu .settings-tab.active,
html.light-mode .sidebar-sub-menu .backups-sub-tab.active,
html.light-mode .sidebar-sub-menu .help-menu-item.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
  border-color: rgba(37, 99, 235, 0.2);
}

html.light-mode .sidebar-sub-menu .settings-tab:hover,
html.light-mode .sidebar-sub-menu .backups-sub-tab:hover,
html.light-mode .sidebar-sub-menu .help-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

html.light-mode .watched-pill {
  color: var(--green);
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
}

html.light-mode .status-ready,
html.light-mode .status-success,
html.light-mode .target-pill[data-status="success"] {
  border-color: rgba(5, 150, 105, 0.25);
  background: rgba(5, 150, 105, 0.08);
  color: var(--green);
}

html.light-mode .status-success {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

html.light-mode .status-error,
html.light-mode .target-pill[data-status="error"] {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

html.light-mode .status-warning,
html.light-mode .target-pill[data-status="pending"] {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
  color: var(--yellow);
}

html.light-mode .sync-activity-row-feedback--success {
  border-color: rgba(5, 150, 105, 0.25);
  background: rgba(5, 150, 105, 0.08);
  color: var(--green);
}

html.light-mode .sync-activity-row-feedback--warning {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
  color: var(--yellow);
}

html.light-mode .sync-activity-row-feedback--error {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

html.light-mode .sync-activity-row-feedback--muted {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
}

html.light-mode .endpoint-box code,
html.light-mode .webhook-endpoint-container code,
html.light-mode .help-doc-body code,
html.light-mode .copy-block pre code {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

html.light-mode #dropZone {
  background: var(--panel-2) !important;
}

html.light-mode .import-progress-track {
  background: var(--line) !important;
}

html.light-mode .history-page-card {
  background: var(--panel);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
}

html.light-mode .history-page-card:hover {
  background: var(--panel);
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

html.light-mode .season-accordion {
  background: color-mix(in srgb, var(--panel-2), transparent 92%);
  border: 1px solid var(--line);
}

html.light-mode .season-accordion.is-open {
  border-color: var(--line-strong);
}

html.light-mode .season-accordion-trigger:hover {
  background: var(--panel);
}

html.light-mode .history-poster,
html.light-mode .explorer-poster {
  background: var(--panel-2);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

html.light-mode .movie-card:hover .movie-poster,
html.light-mode .folder-trigger:hover .explorer-folder-poster,
html.light-mode .season-trigger:hover .explorer-folder-poster {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

/* Theme toggle button */
.theme-toggle-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  margin-bottom: var(--space-2);
}

.theme-toggle-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 999px;
}

.theme-toggle-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 0;
  background: var(--panel-3);
  border: 1px solid var(--line);
  overflow: hidden;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 0;
  background: var(--surface-hover);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease, box-shadow 220ms ease;
  z-index: 0;
}

html.light-mode .theme-toggle-thumb {
  transform: translateX(0);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.theme-toggle-label {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 180ms ease;
  user-select: none;
}

/* Dark mode: thumb is on the right ("Dark" side active) */
.theme-toggle-label--light {
  color: var(--muted);
}

.theme-toggle-label--dark {
  color: #e2e8f0;
}

/* Light mode: thumb slides left ("Light" side active) */
html.light-mode .theme-toggle-label--light {
  color: var(--text);
}

html.light-mode .theme-toggle-label--dark {
  color: var(--muted);
}

/* Appearance panel theme switcher: each option is a row styled like the
   .sidebar-appearance-list-item rows above; the current option is highlighted. */
.sidebar-appearance-theme {
  display: grid;
  gap: 0;
}

.sidebar-appearance-theme-group {
  display: grid;
  gap: 0.1rem;
}

.sidebar-appearance-theme .theme-toggle-button {
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}

.sidebar-appearance-theme .theme-toggle-button:focus-visible {
  outline: 2px solid #e5a00d;
  outline-offset: -2px;
  border-radius: 0;
}

.sidebar-appearance-theme .theme-toggle-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.sidebar-appearance-theme .theme-toggle-thumb {
  display: none;
}

.sidebar-appearance-theme .theme-toggle-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.4rem 0.65rem 0.4rem 1.4rem;
  border-left: 3px solid transparent;
  background: transparent;
  color: #c8c8c8;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sidebar-appearance-theme .theme-toggle-button:hover .theme-toggle-label {
  border-left-color: rgba(229, 160, 13, 0.55);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

html:not(.light-mode) .sidebar-appearance-theme #themeToggleButton .theme-toggle-label--dark,
html.light-mode .sidebar-appearance-theme #themeToggleButton .theme-toggle-label--light {
  border-left-color: #e5a00d;
  background: rgba(229, 160, 13, 0.12);
  color: #e5a00d;
}

html:not(.light-mode) .sidebar-appearance-theme .theme-toggle-label--dark svg,
html.light-mode .sidebar-appearance-theme .theme-toggle-label--light svg,
.sidebar-appearance-text-size[open] > summary svg {
  opacity: 1;
}

html.light-mode .sidebar-appearance-theme .theme-toggle-label {
  color: var(--text);
}

html.light-mode .sidebar-appearance-theme .theme-toggle-button:hover .theme-toggle-label {
  border-left-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  color: var(--blue);
}

html.light-mode .sidebar-appearance-theme #themeToggleButton .theme-toggle-label--light {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

/* Ensure sidebar footer has proper styling */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding: var(--space-3);
}

/* On desktop, pin the footer (Sync - Idle, version, Appearance) to the bottom
   of the sidebar while the nav above it scrolls. Without this, expanding the
   Settings menu pushes the footer below the fold. `margin-top: auto` (set
   earlier) still centers it in the available space when there is no overflow.
   Mobile is excluded: there the topnav itself becomes a clipped, fixed-height
   shell, and a sticky footer would be pulled over the brand/search bar. */
@media (min-width: 761px) {
  .sidebar-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Matches .topnav's dark-mode background (#1f242c) so scrolling nav items
       don't show through behind the pinned footer. Light mode overrides this
       via `html.light-mode .sidebar-footer`. */
    background: #1f242c;
  }
}

/* Media details page specific overrides */
html.light-mode .immersive-title {
  color: var(--text);
}

html.light-mode .cast-actor-name {
  color: var(--text);
}

html.light-mode .cast-character-name {
  color: var(--soft);
}

html.light-mode .action-pill {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: none;
}

html.light-mode .action-pill:hover {
  background: transparent;
  border-color: rgba(37, 99, 235, 0.55);
  color: #2563eb;
}

html.light-mode .action-pill-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: none;
}

html.light-mode .action-pill-ghost:hover {
  background: transparent;
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--red);
}

html.light-mode .action-pill-danger {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--red);
  box-shadow: none;
}

html.light-mode .action-pill-danger:hover {
  background: transparent;
  border-color: rgba(220, 38, 38, 0.45);
  color: var(--red);
  box-shadow: none;
}

html.light-mode .seerr-request-btn {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}

html.light-mode .seerr-request-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #4338ca;
}

html.light-mode .seerr-owned-pill {
  color: var(--green);
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
}

/* Appearance settings - hide media page sections */
body.hide-logo-art .immersive-logo { display: none !important; }
body.hide-logo-art .immersive-title.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}
body.hide-cast .cast-section { display: none !important; }
body.hide-trailers .trailers-section { display: none !important; }
body.hide-reviews .reviews-section { display: none !important; }
body.hide-images .media-images-section { display: none !important; }
body.hide-related .related-section { display: none !important; }


html.light-mode .seerr-owned-pill-4k {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.25);
}

html.light-mode .seerr-owned-pill-partial {
  color: var(--yellow);
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}

html.light-mode .season-availability-pill {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--soft);
}

html.light-mode .season-availability-pill.is-complete {
  color: var(--green);
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
}

html.light-mode .season-availability-pill.is-partial {
  color: var(--yellow);
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}

html.light-mode .season-availability-pill.is-missing {
  color: var(--red);
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}

html.light-mode .season-availability-pill.is-4k {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.25);
}

html.light-mode .season-pill-4k-tag {
  border-color: rgba(13, 148, 136, 0.3);
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

html.light-mode .season-pill-4k-tag.is-full {
  border-color: rgba(13, 148, 136, 0.45);
  background: rgba(13, 148, 136, 0.18);
  color: #0f766e;
}

html.light-mode .media-detail-page .immersive-poster-img {
  box-shadow: none;
}

html.light-mode .person-profile-img {
  box-shadow: none;
}

html.light-mode .person-biography-section h3,
html.light-mode .person-photos-section h3,
html.light-mode .person-credits-section h3 {
  color: var(--text);
}

html.light-mode .person-photos-count {
  background: var(--panel-3);
  color: var(--soft);
}

html.light-mode .person-credit-filter select {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--soft);
}

html.light-mode .live-now-card {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html.light-mode .live-now-card:hover {
  border-color: var(--yellow);
  background: rgba(234, 179, 8, 0.04);
}

html.light-mode .now-card-title {
  color: var(--text);
}

html.light-mode .source-badge {
  background: var(--panel-3);
  border-color: var(--line);
  color: var(--soft);
}

html.light-mode .watch-state-badge.is-partial {
  border-color: rgba(180, 110, 0, 0.4);
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
}

html.light-mode .library-badge,
html.light-mode .watch-state-badge.is-complete {
  color: #052e16;
}

html.light-mode .review-card {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--text);
}

/* Part Watched Page List Layout */
/* Part Watched cards live in the dashboard horizontal scroll row */
#partWatchedRow.horizontal-scroll-row {
  padding-top: 6px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 10px;
  scroll-padding-left: 6px;
  scroll-padding-right: 6px;
}

#partWatchedRow .part-watched-page-card {
  width: 400px;
  flex: 0 0 400px;
}

@media (max-width: 480px) {
  #partWatchedRow .part-watched-page-card {
    width: 86vw;
    flex: 0 0 86vw;
    max-width: 360px;
  }
}

.part-watched-page-card {
  display: flex;
  gap: var(--space-3);
  padding: 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.part-watched-page-card:hover {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.part-watched-card-poster-wrapper {
  flex: 0 0 var(--part-watched-poster-width, 120px);
  width: var(--part-watched-poster-width, 120px);
  aspect-ratio: 2/3;
  border-radius: var(--poster-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 130ms ease, box-shadow 130ms ease;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.part-watched-page-card:hover .part-watched-card-poster-wrapper {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.part-watched-card-poster-wrapper img,
.part-watched-card-poster-wrapper span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.part-watched-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  justify-content: space-between;
}

.part-watched-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.part-watched-card-title {
  font-size: 1.1rem;
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.part-watched-card-episode {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.part-watched-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #9b9b9b;
}

.part-watched-card-meta > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Progress bar container */
.part-watched-progress-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.part-watched-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.part-watched-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 72%, white)
  );
  border-radius: 3px;
  transition: width 0.3s ease;
}

.part-watched-progress-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
}

/* Actions */
.part-watched-card-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.part-watched-action-btn {
  flex: 1;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  min-height: 1.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.part-watched-action-btn[data-action-watch] {
  background: color-mix(in srgb, var(--blue), transparent 88%);
  border-color: color-mix(in srgb, var(--blue), transparent 60%);
  color: var(--blue);
}

.part-watched-action-btn[data-action-watch]:hover {
  background: color-mix(in srgb, var(--blue), transparent 80%);
  border-color: color-mix(in srgb, var(--blue), transparent 40%);
}

html.light-mode .part-watched-action-btn[data-action-watch] {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.35);
  color: #2563eb;
}

html.light-mode .part-watched-action-btn[data-action-watch]:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.55);
}

html.light-mode .part-watched-page-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html.light-mode .part-watched-page-card:hover {
  background: rgba(0, 0, 0, 0.02);
}

html.light-mode .part-watched-card-title {
  color: var(--text);
}

/* Light mode watch date overlay and dialog */
html.light-mode .watch-date-overlay {
  background: rgba(15, 23, 42, 0.3);
}

html.light-mode .watch-date-dialog {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
}

html.light-mode .watch-date-head h3 {
  color: var(--text);
}

html.light-mode .watch-date-sub {
  color: var(--muted);
}

/* Scrob-inspired media discovery and dashboard card system */
.shared-media-card {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  gap: var(--space-3);
  padding: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.shared-media-card:hover {
  border-color: var(--accent);
  background: var(--panel);
  transform: translateY(-2px);
}

.shared-media-card-poster {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--poster-radius);
  color: inherit;
  text-decoration: none;
}

.shared-media-card-poster-wrap {
  position: relative;
  display: block;
  flex: 0 0 6.25rem;
  width: 6.25rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--poster-radius);
}

.shared-media-card-poster-image,
.shared-media-card-poster .poster-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shared-media-card-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.shared-media-card-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shared-media-card-title:hover,
.shared-media-card-title:focus-visible {
  color: var(--accent);
}

/* overflow: hidden drops the flex minimum height, so without flex-shrink: 0 a
   short card squeezes this one line until its text is cut in half. */
.shared-media-card-meta,
.shared-media-card-status {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-media-card-status {
  color: var(--accent);
}

.shared-media-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.shared-media-card-badges .status-pill {
  padding: 0.12rem 0.4rem;
  font-size: 0.63rem;
}

.shared-media-card-description {
  display: -webkit-box;
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.shared-media-card-type-rating {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: 1rem;
}

.shared-media-card-type {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-card-label);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-media-card-rating {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1;
  color: var(--accent);
  font-size: var(--fs-badge);
  font-weight: 800;
  text-decoration: none;
}

.shared-media-card-rating:hover,
.shared-media-card-rating:focus-visible {
  text-decoration: underline;
}

button.shared-media-card-rating--action {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
}

html.light-mode button.shared-media-card-rating--action {
  color: var(--accent);
}

.shared-media-card-release {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
}

.shared-media-card-release-label {
  color: var(--muted);
  font-size: var(--fs-card-label);
  font-weight: 700;
}

.shared-media-card-release-value {
  overflow: hidden;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.shared-media-card--discover .shared-media-card-description,
.shared-media-card--personal .shared-media-card-description {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  align-items: center;
  margin: 0.15rem 0;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.shared-media-card--discover .shared-media-card-description-text,
.shared-media-card--personal .shared-media-card-description-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.shared-media-card--discover {
  position: relative;
  display: flex;
  width: 385px;
  flex-direction: row;
  gap: 0;
  padding: 0;
  align-self: stretch;
  height: 100%;
}

.shared-media-card--discover .shared-media-card-poster {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.shared-media-card--discover .shared-media-card-poster-wrap {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  background: var(--panel-3);
}

.shared-media-card--discover .shared-media-card-body {
  gap: 0.35rem;
  padding: 0.65rem;
  justify-content: flex-start;
}

.shared-media-card--discover .shared-media-card-title {
  min-height: 2.5em;
  padding-right: 2.75rem;
}

.shared-media-card--discover .shared-media-card-description {
  margin-top: 0.15rem;
}

.shared-media-card--discover .shared-media-card-poster .poster-fallback {
  background: var(--panel-3);
}

.shared-media-card--collection-part {
  width: 12rem;
  padding: 0.45rem;
}

.shared-media-card--collection-part .shared-media-card-poster {
  flex-basis: 3.5rem;
  width: 3.5rem;
}

.shared-media-card--collection-part .shared-media-card-poster-wrap {
  flex-basis: 3.5rem;
  width: 3.5rem;
}

.search-collection-toggle {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.search-collection-parts {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  padding-top: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.search-collection-parts .shared-media-card {
  flex: 0 0 12rem;
}

.discover-shell {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.discover-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.discover-controls .compact-field {
  min-width: 12rem;
}

.page-topbar-actions .discover-controls {
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.page-topbar-actions .discover-controls .compact-field {
  min-width: 0;
}

.page-topbar-actions .personal-media-topbar-controls {
  display: flex;
  min-width: 0;
  align-items: center;
}

.page-topbar-actions .personal-media-topbar-controls .personal-media-toolbar-actions {
  justify-content: flex-end;
}

.discover-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
}

.discover-feed {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.discover-feed-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.discover-feed-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
}

.discover-feed-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.discover-feed-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-height: 18rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.5rem;
}

.discover-feed-row .shared-media-card {
  flex: 0 0 385px;
}

.discover-feed-row.is-empty {
  align-items: center;
  justify-content: center;
}

.discover-feed-empty {
  width: 100%;
  min-height: 8rem;
  align-content: center;
  text-align: center;
}

/* Desktop Discover mirrors the dashboard's viewport-fit treatment: each of
   the four feeds gets the same vertical slice, while its cards stay in their
   own horizontal rail. Mobile keeps the natural stacked page so the rails
   remain comfortable to browse by touch. */
@media (min-width: 761px) {
  .page-shell[data-active-view="discover"] {
    overflow-y: hidden;
  }

  .page-shell[data-active-view="discover"] .app-shell {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
  }

  .page-shell[data-active-view="discover"] #discover-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
  }

  .page-shell[data-active-view="discover"] .discover-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: var(--space-3);
  }

  .page-shell[data-active-view="discover"] #discoverPanel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .page-shell[data-active-view="discover"] .discover-panel {
    height: 100%;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .page-shell[data-active-view="discover"] .discover-feed {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: var(--space-1);
    overflow: hidden;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row {
    flex: 1 1 0;
    min-height: 0;
    padding: 0.35rem 0.1rem 0.5rem;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card {
    flex: 0 0 385px;
    min-height: 0;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card:hover,
  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card:focus-within {
    position: relative;
    z-index: 1;
  }

  .page-shell[data-active-view="discover"] .shared-media-card--discover {
    width: 385px;
    min-height: 0;
  }
}

.personal-media-shell {
  min-height: 0;
}

.personal-media-panel {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.personal-media-toolbar-actions,
.personal-media-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.personal-media-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 385px), 385px));
  gap: var(--space-3);
  min-width: 0;
}

.personal-media-card-grid .shared-media-card--personal {
  position: relative;
  min-height: 0;
  height: auto;
  gap: 0;
  padding: 0;
  align-items: stretch;
  align-self: stretch;
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-poster-wrap {
  flex: 0 0 10rem;
  width: 10rem;
  height: auto;
  max-height: none;
  align-self: stretch;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  background: var(--panel-3);
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-poster {
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-body {
  min-height: 0;
  gap: 0.35rem;
  padding: 0.65rem;
  justify-content: flex-start;
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-title,
.personal-media-list-row .shared-media-card--personal .shared-media-card-title {
  min-height: 2.5em;
  padding-right: 2.75rem;
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-description,
.personal-media-list-row .shared-media-card--personal .shared-media-card-description {
  -webkit-line-clamp: 6;
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-poster .poster-fallback {
  background: var(--panel-3);
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.personal-media-card-grid .shared-media-card--personal .shared-media-card-actions button {
  min-width: 0;
  width: 100%;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
}

.personal-media-list-viewport,
.personal-media-list-overflow {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.personal-media-list-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-height: 18rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.5rem;
}

.personal-media-list-row.is-empty {
  align-items: center;
  justify-content: center;
}

.personal-media-list-empty {
  width: 100%;
  min-height: 8rem;
  align-content: center;
  text-align: center;
}

.personal-media-list-row .shared-media-card--personal {
  position: relative;
  display: flex;
  width: 385px;
  flex: 0 0 385px;
  min-height: 0;
  height: 100%;
  gap: 0;
  padding: 0;
  align-items: stretch;
  align-self: stretch;
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-poster-wrap {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  background: var(--panel-3);
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-poster {
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-body {
  min-height: 0;
  gap: 0.35rem;
  padding: 0.65rem;
  justify-content: flex-start;
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-poster .poster-fallback {
  background: var(--panel-3);
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.personal-media-list-row .shared-media-card--personal .shared-media-card-actions button {
  min-width: 0;
  width: 100%;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
}

/* One segmented "< Move >" pill, centred at the bottom of the card. */
.page-shell .personal-media-list-row .shared-media-card--personal .shared-media-card-actions .playlist-move-control {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: stretch;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--text, #fff) 5%, transparent);
  white-space: nowrap;
}

.page-shell .personal-media-list-row .shared-media-card--personal .shared-media-card-actions .playlist-move-control .playlist-move {
  width: auto;
  min-width: 2rem;
  min-height: 1.75rem;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
}

.page-shell .personal-media-list-row .shared-media-card--personal .shared-media-card-actions .playlist-move-control .playlist-move:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, var(--yellow)) 18%, transparent);
  color: var(--accent, var(--yellow));
}

.page-shell .personal-media-list-row .shared-media-card--personal .shared-media-card-actions .playlist-move-control .playlist-move:disabled {
  opacity: 0.3;
  cursor: default;
}

.playlist-move-label {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border-inline: 1px solid var(--line-strong, var(--line));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.personal-media-list-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.personal-media-list-heading h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-media-list-heading span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Playlists: the Options menu (Info, Refresh now, Edit, Stop updating, Delete). */
.playlist-options {
  position: relative;
  flex: 0 0 auto;
}

.playlist-options > summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  font-size: 0.7rem;
  list-style: none;
}

.playlist-options > summary::-webkit-details-marker {
  display: none;
}

.playlist-options-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.3rem);
  right: 0;
  display: grid;
  min-width: 10rem;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.playlist-options-item {
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
}

.playlist-options-item:hover,
.playlist-options-item:focus-visible {
  background: var(--surface-hover);
}

.playlist-options-item:disabled {
  cursor: default;
  opacity: 0.55;
}

.playlist-options-item--danger {
  color: var(--red, #e5484d);
}

/* The rule in full, in the Info pop-up. */
.playlist-rule-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1rem;
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 0.85rem;
}

.playlist-rule-info dt {
  color: var(--muted);
  font-weight: 700;
}

.playlist-rule-info dd {
  margin: 0;
  color: var(--text);
}

/* Left of the title while the rule is checked. */
.personal-media-list-heading .playlist-refresh-indicator {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: remote-search-spin 0.8s linear infinite;
}

.personal-media-list-heading .playlist-refresh-indicator[hidden] {
  display: none;
}

/* Playlists: app badges, reorder, missing notes, held changes, Recently deleted. */
.playlist-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.playlist-provider-icons {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
}

.playlist-provider-icon {
  position: relative;
}

.playlist-provider-icon--pending img {
  opacity: 0.45;
}

.playlist-provider-icon:is(.playlist-provider-icon--error, .playlist-provider-icon--missing)::after {
  content: "";
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--panel);
  border-radius: 50%;
  background: var(--yellow);
}

.playlist-provider-icon--error::after {
  background: var(--red);
}

.personal-media-list-heading .playlist-provider-only {
  font-weight: 600;
}

.playlist-item-missing {
  margin: 0;
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Posters-only view hides the card body, so the missing note moves onto the
   poster's top-left corner (the top right holds the menu and stack count). */
.playlist-missing-badge {
  display: none;
  position: absolute;
  left: 0.35rem;
  top: 0.35rem;
  z-index: 2;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  font-size: 0.68rem;
  font-weight: 800;
  pointer-events: none;
}

.page-card-mode-compact .shared-media-card:not(.page-card-open) .playlist-missing-badge {
  display: inline-block;
}

/* Episode stacks (plan/archive/custom-playlist-sync/plan.md decision 26): only in
   Posters only. There a collapsed stack's episodes are hidden behind the stack
   poster; elsewhere the stack is hidden and every episode shows. */
[data-view-panel="personal-media"]:not(.page-card-mode-compact) [data-playlist-stack],
.page-card-mode-compact [data-playlist-stack-member][data-stack-collapsed="1"] {
  display: none !important;
}

[data-playlist-stack] {
  position: relative;
}

[data-playlist-stack] .poster-overflow-btn {
  display: none;
}

[data-playlist-stack] .shared-media-card-poster-wrap {
  /* Two card edges peeking out to the right, inside the rail gap, so the
     scrolling rail cannot clip them. */
  box-shadow: 3px 0 0 -1px var(--panel, #222), 4px 0 0 0 color-mix(in srgb, var(--text, #fff) 45%, transparent),
    7px 0 0 -1px var(--panel, #222), 8px 0 0 0 color-mix(in srgb, var(--text, #fff) 25%, transparent);
}

[data-playlist-stack][data-stack-expanded="1"] .shared-media-card-poster-wrap {
  outline: 2px solid var(--accent, var(--yellow));
  outline-offset: -2px;
}

.playlist-stack-count {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  pointer-events: none;
}

[data-playlist-drag-key] {
  cursor: grab;
}

[data-playlist-stack] {
  cursor: pointer;
}

/* While dragged, the card's slot in the rail is an empty insert outline; the
   browser's drag image is the picked-up card (playlists.js). */
[data-playlist-drag-key].is-dragging {
  border-color: transparent;
  outline: 2px dashed var(--accent, var(--yellow));
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent, var(--yellow)) 8%, transparent);
  box-shadow: none;
  cursor: grabbing;
}

[data-playlist-drag-key].is-dragging > * {
  visibility: hidden;
}

.playlist-held-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--yellow);
  border-radius: 0.6rem;
  color: var(--text);
  font-size: 0.8rem;
}

.playlist-unidentified-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.playlist-held-change > span {
  flex: 1 1 16rem;
  min-width: 0;
}

.playlist-held-actions,
.playlist-deleted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.playlist-held-actions button,
.playlist-deleted-actions button {
  min-height: 1.8rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
}

.personal-media-dialog:has(.playlist-recently-deleted) {
  width: min(100%, 50rem);
  max-height: 85vh;
}

.playlist-recently-deleted-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 0.8rem;
}

.playlist-recently-deleted-head button {
  flex: none;
}

.playlist-recently-deleted-copy {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.playlist-recently-deleted .playlist-deleted-row {
  padding: 0.7rem 0.9rem;
}

.playlist-recently-deleted .playlist-deleted-copy b {
  font-size: 0.95rem;
}

.playlist-recently-deleted .playlist-deleted-copy span {
  font-size: 0.8rem;
}

.playlist-recently-deleted .playlist-deleted-actions button,
.playlist-recently-deleted-head button {
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

.playlist-deleted-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.playlist-deleted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}

.playlist-deleted-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.playlist-deleted-copy span {
  color: var(--muted);
  font-size: 0.75rem;
}

.playlist-provider-picker {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.playlist-provider-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.playlist-provider-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
}

.playlist-provider-choice img {
  width: 1rem;
  height: 1rem;
}

.playlist-provider-choice.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.playlist-provider-choice small {
  color: var(--muted);
}

.playlist-availability-notice,
.playlist-deselect-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.personal-media-list-heading .playlist-kind-label {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.playlist-kind-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.playlist-kind-picker .playlist-availability-notice {
  flex-basis: 100%;
}

.playlist-kind-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
}

.playlist-kind-choice:has(input:checked) {
  border-color: var(--accent);
}

.playlist-kind-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Automatic playlists (playlist-rules.js): the rule editor and the panel. */
.playlist-rule-editor {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.playlist-rule-genres-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.playlist-rule-genres-head .field {
  width: auto;
}

.playlist-rule-genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Genre chips look like the dialog's choice cards: only the tick is accented. */
.playlist-rule-genre {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
}

.playlist-rule-genre input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--blue);
}

.playlist-rule-genre:hover {
  border-color: var(--line-strong);
}

.playlist-rule-genre:has(input:checked) {
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.playlist-rule-genre:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Create / edit playlist dialog: steps down the side (like Setup's steps). */
.personal-media-dialog:has(.playlist-wizard) {
  width: min(100%, 72rem);
  max-height: 92vh;
}

/* Larger text than the compact Settings defaults. */
.personal-media-dialog:has(.playlist-wizard) .personal-media-dialog-head h2 {
  font-size: 1.2rem;
}

.playlist-wizard .playlist-wizard-tab,
.playlist-wizard .personal-media-dialog-actions > button {
  font-size: 0.9rem;
}

.playlist-wizard .playlist-wizard-tab {
  min-height: 2.6rem;
}

.playlist-wizard .field-label,
.playlist-wizard legend {
  font-size: 0.9rem;
}

.playlist-wizard .field {
  min-height: 2.6rem;
  font-size: 0.95rem;
}

.playlist-wizard .settings-choice-option {
  min-height: 5rem;
  padding: var(--space-3);
}

.playlist-wizard .settings-choice-option-title {
  font-size: 0.98rem;
}

.playlist-wizard .settings-choice-option-description,
.playlist-wizard .personal-media-dialog-copy,
.playlist-wizard .playlist-rule-genre {
  font-size: 0.88rem;
}

.personal-media-create-form.playlist-wizard {
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5, 1.5rem);
}

.playlist-wizard-steps {
  position: sticky;
  top: 0;
  display: grid;
  gap: var(--space-2);
  padding-right: var(--space-4);
  border-right: 1px solid var(--line);
}

.playlist-wizard-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Quieter than the Settings defaults: the accent marks only the step number
   and the chosen radio, not whole tabs and cards. */
.playlist-wizard .playlist-wizard-tab.active {
  border-color: var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
}

.playlist-wizard .playlist-wizard-tab.active .playlist-wizard-number {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--panel);
}

.playlist-wizard .settings-choice-option:has(input:checked) {
  border-color: var(--line-strong);
  background: var(--panel-2);
  box-shadow: none;
}

.playlist-wizard .settings-choice-option:hover {
  border-color: var(--line-strong);
}

/* A neutral focus for the name box instead of the thick orange ring. */
.playlist-wizard .field:focus,
.playlist-wizard .field:focus-visible,
html.light-mode .playlist-wizard .field:focus {
  border-color: color-mix(in srgb, var(--text) 45%, var(--line));
  box-shadow: none;
  outline: none;
}

html.light-mode .personal-media-dialog-head .icon-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--text);
}

html.light-mode .personal-media-dialog-head .icon-button:hover {
  background: var(--panel-2);
}

.playlist-wizard-tab[hidden],
.playlist-wizard-panel[hidden],
.personal-media-dialog-actions > [hidden] {
  display: none;
}

.playlist-wizard-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.playlist-wizard-main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  min-height: 30rem;
  align-content: start;
}

.playlist-wizard-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.playlist-wizard-panel h3 {
  margin: 0;
  font-size: 1.2rem;
}

.playlist-wizard-fieldset {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.playlist-wizard-kinds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.playlist-wizard .personal-media-dialog-actions {
  margin-top: auto;
}

.playlist-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}

.playlist-rule-years {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.playlist-rule-editor.hidden,
.playlist-rule-years.hidden {
  display: none;
}

.playlist-rule-error {
  margin: 0;
}

.playlist-rule-label {
  flex: 0 0 auto;
  cursor: help;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
}

/* A confirmed held check, waiting for the next check (decision 64). */
.playlist-rule-confirmed {
  flex: 0 0 auto;
  cursor: help;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.playlist-rule-status {
  color: var(--muted);
  font-size: 0.76rem;
}

.playlist-rule-error {
  color: var(--red, #e5484d);
  font-size: 0.78rem;
}

.playlist-rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The "Remove items once watched" switch: words on the left, box on the right.
   The generic .settings-modal-field rules force a column with !important. */
.settings-modal-field.playlist-remove-watched {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-3);
}

.playlist-remove-watched .settings-modal-field-label {
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  min-width: 0;
}

.playlist-remove-watched .settings-modal-field-title {
  flex: 0 1 auto;
}

.playlist-remove-watched .settings-field-help {
  text-align: left !important;
  margin-left: 0 !important;
}

.playlist-remove-watched .settings-modal-field-control {
  width: auto !important;
  flex: 0 0 auto;
  align-self: center !important;
}

@media (max-width: 760px) {
  .playlist-rule-grid,
  .playlist-wizard-kinds,
  .playlist-wizard .settings-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The steps become a scrolling row above the step. */
  .personal-media-create-form.playlist-wizard {
    grid-template-columns: minmax(0, 1fr);
  }

  .playlist-wizard-steps {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 0 0 var(--space-2);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .playlist-wizard-tab {
    flex: 0 0 auto;
    width: auto;
  }

  .playlist-wizard-main {
    min-height: 0;
  }
}

/* Episode picker: the season list scrolls so the actions stay in view. */
.playlist-episode-seasons {
  display: grid;
  gap: 0.4rem;
  max-height: min(52vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.playlist-episode-season {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.playlist-episode-season summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.playlist-episode-season summary span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.playlist-episode-season-toggle {
  margin: 0 0.65rem 0.4rem;
}

.playlist-episode-list {
  display: grid;
  margin: 0;
  padding: 0 0.35rem 0.4rem;
  list-style: none;
}

.playlist-episode-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.84rem;
}

.playlist-episode-choice:hover {
  background: var(--panel-2);
}

.playlist-episode-choice.is-held {
  cursor: default;
  opacity: 0.6;
}

.playlist-episode-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-episode-choice small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .playlist-episode-seasons {
    max-height: 50vh;
  }

  .playlist-episode-name {
    white-space: normal;
  }
}

/* "Import from apps" dialog (playlist-import.js). */
.personal-media-dialog:has(.playlist-import) {
  width: min(100%, 46rem);
  max-height: 90vh;
}

.playlist-import-apps {
  display: grid;
  gap: 0.75rem;
  max-height: calc(90vh - 15rem);
  overflow-y: auto;
}

.playlist-import-app h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.playlist-import-app h3 img {
  width: 1rem;
  height: 1rem;
}

.playlist-import-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.playlist-import-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.playlist-import-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.playlist-import-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-import-pick small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.playlist-import-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.playlist-import-note.is-error {
  color: var(--danger);
}

.playlist-import-options {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.5rem;
}

.playlist-import-options[hidden] {
  display: none;
}

.playlist-import-mode {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.82rem;
}

.playlist-import-mode label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
}

.playlist-import-targets {
  display: grid;
  gap: 0.3rem;
}

@media (max-width: 760px) {
  .playlist-import-apps {
    max-height: 55vh;
  }

  .playlist-import-pick {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .playlist-import-pick small {
    grid-column: 2;
  }

  .playlist-import-title {
    white-space: normal;
  }

  .playlist-import-options {
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .page-shell[data-active-view="playlists"] .personal-media-list-heading {
    flex-wrap: wrap;
  }
}

.personal-media-rating-section {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.personal-media-empty {
  min-height: 10rem;
  align-content: center;
  justify-items: start;
}

.personal-media-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(2, 6, 23, 0.72);
}

.personal-media-dialog {
  width: min(100%, 30rem);
  max-height: min(90vh, 42rem);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.personal-media-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.personal-media-dialog-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.personal-media-dialog-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.personal-media-dialog-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.personal-media-dialog-error {
  margin: 0;
  color: var(--danger);
  line-height: 1.4;
}

.personal-rating-grid,
.personal-list-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.personal-rating-choice {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.personal-rating-choice:hover,
.personal-rating-choice.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent);
}

.personal-list-choice-grid {
  grid-template-columns: 1fr;
}

.personal-list-choice--added,
.personal-list-choice--added:disabled {
  cursor: default;
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent), transparent 48%);
  background: color-mix(in srgb, var(--accent), transparent 90%);
  color: var(--accent);
}

.personal-media-dialog-actions {
  justify-content: flex-end;
}

.personal-media-create-form {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: var(--space-3);
}

.personal-media-create-form .field-label {
  width: 100%;
  min-width: 0;
}

.personal-media-create-form .field {
  display: block;
  width: 100%;
  min-width: 0;
}

.personal-media-create-form .personal-media-dialog-actions {
  width: 100%;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.personal-media-create-form .personal-media-dialog-actions > * {
  flex: 0 0 auto;
}

@media (min-width: 761px) {
  .page-shell[data-active-view="playlists"] {
    overflow-y: hidden;
  }

  .page-shell[data-active-view="playlists"] .app-shell {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
  }

  .page-shell[data-active-view="playlists"] #personal-media-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
  }

  .page-shell[data-active-view="playlists"] .personal-media-shell {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .page-shell[data-active-view="playlists"] .personal-media-panel {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    align-content: start;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .page-shell[data-active-view="playlists"] .personal-media-list-viewport {
    flex: 0 0 100%;
    min-height: 0;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .page-shell[data-active-view="playlists"] .personal-media-list-overflow {
    flex: 0 0 auto;
  }

  .page-shell[data-active-view="playlists"] .personal-media-list-section {
    display: flex;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
  }

  .page-shell[data-active-view="playlists"] .personal-media-list-row {
    flex: 1 1 0;
    min-height: 0;
  }

  .page-shell[data-active-view="playlists"] .personal-media-list-overflow .personal-media-list-row {
    flex: 0 0 14rem;
    min-height: 14rem;
  }
}

@media (max-width: 760px) {
  .personal-media-toolbar-actions {
    align-items: stretch;
  }

  .personal-media-toolbar-actions {
    width: 100%;
  }

  .personal-media-toolbar-actions > * {
    flex: 1 1 auto;
  }

  body .page-topbar-actions .personal-media-topbar-controls:not(.hidden) {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
  }

  body .page-topbar-actions .personal-media-topbar-controls .personal-media-toolbar-actions {
    width: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body .page-topbar-actions .personal-media-topbar-controls .personal-media-toolbar-actions > * {
    flex: 0 0 auto !important;
  }

  .personal-media-list-row .shared-media-card--personal {
    width: min(88vw, 26rem);
    flex-basis: min(88vw, 26rem);
  }
}

.dashboard-part-watched-rows {
  display: block;
  min-width: 0;
}

.dashboard-history-progress-section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-history-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.dashboard-history-subheading h3 {
  margin: 0;
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 850;
}

.dashboard-history-subheading span {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.dashboard-part-watched-row {
  min-width: 0;
  padding: 0.1rem 0.1rem 0.45rem;
}

.dashboard-part-watched-row .part-watched-page-card {
  width: min(25rem, 100%);
  flex-basis: min(25rem, 100%);
}

.dashboard-part-watched-row .part-watched-card-title {
  font-size: 0.9rem;
}

.dashboard-part-watched-row .part-watched-card-meta {
  gap: 0.2rem;
  font-size: 0.72rem;
}

.dashboard-part-watched-row .part-watched-card-actions {
  margin-top: 0.2rem;
}

.dashboard-part-watched-row .part-watched-action-btn {
  min-height: 1.8rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.7rem;
}

.dashboard-part-watched-row .part-watched-card-poster-wrapper {
  flex-basis: 5.5rem;
  width: 5.5rem;
}

/* Dashboard Up Next shares the four-section desktop split. */
#timeline-view #upNextDashboardSection {
  display: flex;
  min-height: 0;
  flex-direction: column;
  flex: 1 1 0;
  flex-grow: 1;
  overflow: hidden;
}

#timeline-view .dashboard-history-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  flex: 1 1 0;
  flex-grow: 1;
  overflow: hidden;
}

#timeline-view #upNextPanel {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
}

#timeline-view #upNextPanel .shared-media-card {
  height: 100%;
}

#timeline-view #upNextPanel .shared-media-card--up-next {
  width: clamp(14rem, 18vw, 20rem);
  flex-basis: clamp(14rem, 18vw, 20rem);
  min-height: 0;
}

#timeline-view #upNextPanel .shared-media-card--up-next .shared-media-card-poster {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 2 / 3;
}

#timeline-view #upNextPanel .shared-media-card--up-next .shared-media-card-body {
  min-height: 0;
}

#timeline-view #upNextPanel .shared-media-card--up-next .shared-media-card-actions {
  width: 100%;
  margin-top: auto;
}

#timeline-view #upNextPanel .up-next-watch-button {
  width: 100%;
}

#timeline-view #upNextPanel .up-next-empty-state {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-content: center;
  justify-items: center;
  text-align: center;
}

#timeline-view #upNextPanel .up-next-empty-state span {
  max-width: 42ch;
}

html.light-mode .shared-media-card {
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
}

@media (max-width: 760px) {
  #timeline-view #upNextDashboardSection,
  #timeline-view .dashboard-history-panel {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  #timeline-view #upNextPanel {
    flex: 0 0 auto;
    min-height: 0;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
  }

  #timeline-view #upNextPanel .shared-media-card {
    height: auto;
    width: min(88vw, 26rem);
    min-height: 9rem;
  }

  #timeline-view #upNextPanel .shared-media-card--up-next {
    flex-basis: min(88vw, 26rem);
  }

  .dashboard-part-watched-row {
    overflow-x: auto;
  }

  .dashboard-part-watched-row .part-watched-page-card {
    width: min(88vw, 26rem);
    flex-basis: min(88vw, 26rem);
  }

  .discover-controls .compact-field {
    flex: 1 1 10rem;
    min-width: 0;
  }

  .shared-media-card--discover {
    width: min(88vw, 26rem);
  }

  .discover-feed-row .shared-media-card--discover {
    flex-basis: min(88vw, 26rem);
  }
}

html.light-mode .watch-date-close {
  color: var(--muted);
}

html.light-mode .watch-date-close:hover {
  color: var(--text);
}

html.light-mode .watch-date-dialog p {
  color: var(--muted);
}

html.light-mode .watch-date-episodes {
  background: var(--panel-2);
  border-color: var(--line);
}

html.light-mode .watch-date-episodes-head {
  background: var(--panel-3);
  border-bottom-color: var(--line);
  color: var(--muted);
}

html.light-mode .watch-date-episode {
  border-bottom-color: var(--line);
}

html.light-mode .watch-date-episode-code {
  color: var(--text);
}

html.light-mode .watch-date-episode-title {
  color: var(--text);
}

html.light-mode .watch-date-episode-air {
  color: var(--muted);
}

html.light-mode .watch-date-section-label {
  color: var(--muted);
}

html.light-mode .watch-date-pick {
  background: var(--panel-2);
  border-color: var(--line);
}

html.light-mode .watch-date-specials-toggle {
  background: var(--panel-2);
  border-color: var(--line);
}

html.light-mode .watch-date-pick:hover:not(:disabled) {
  background: var(--panel-3);
  border-color: var(--accent);
}

html.light-mode .watch-date-pick:disabled {
  background: var(--panel-2);
  border-color: var(--line);
  opacity: 0.5;
  cursor: not-allowed;
}

html.light-mode .watch-date-pick-title {
  color: var(--text);
}

html.light-mode .watch-date-pick-sub {
  color: var(--muted);
}

html.light-mode .watch-date-custom {
  background: var(--panel-2);
  border-color: var(--line);
}

html.light-mode .watch-date-custom label {
  color: var(--muted);
}

/* The picker uses theme variables (--field, --blue, --line, --text, --muted),
   so it inherits the light palette automatically - no overrides needed. */

/* Watch History View Segmented Control inside Settings */
.settings-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.25rem;
  max-width: 320px;
}

/* Light mode overrides for settings segmented control */
html.light-mode .settings-segmented-control {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

/* Reusing sidebar-segmented-btn inside settings card */
.settings-segmented-control .sidebar-segmented-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.35rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  transition: all 140ms ease;
  font-size: 0.8rem;
}

.settings-segmented-control .sidebar-segmented-btn svg {
  width: 1rem;
  height: 1rem;
}

.settings-segmented-control .sidebar-segmented-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

html.light-mode .settings-segmented-control .sidebar-segmented-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.settings-segmented-control .sidebar-segmented-btn.active {
  border-color: color-mix(in srgb, var(--blue), transparent 50%);
  background: color-mix(in srgb, var(--blue), transparent 90%);
  color: var(--blue);
}

/* Sign out button restyling inside settings submenu */
.sidebar-sub-menu .settings-tab.button-signout {
  margin-top: var(--space-3) !important;
  border-top: 1px solid var(--line) !important;
  padding-top: var(--space-3) !important;
  color: var(--red) !important;
  border-radius: 0 0 4px 4px !important;
}

.sidebar-sub-menu .settings-tab.button-signout:hover {
  border-color: transparent !important;
  background: rgba(244, 63, 94, 0.08) !important;
  color: #ffa1b2 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 900px) {
  .sidebar-sub-menu .settings-tab.button-signout {
    padding-left: 1.5rem !important;
    border-left: 3px solid transparent !important;
  }
  .sidebar-sub-menu .settings-tab.button-signout:hover {
    border-left-color: var(--red) !important;
  }
}

/* ── Settings Redesign (Outfit & Glassmorphic Aesthetics) ── */
.settings-hub {
  width: 100%;
  padding-top: 0;
  margin-top: 0;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 0;
  margin-top: 0;
}

.settings-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 0;
  margin-top: 0;
  /* Keeps scrollIntoView from tucking a section under the sticky .page-topbar. */
  scroll-margin-top: calc(var(--right-topbar-height) + var(--space-3));
}

.settings-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  scroll-margin-top: calc(var(--right-topbar-height) + var(--space-3));
}

.settings-row-main {
  flex: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
}

.settings-row-help {
  flex: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
}

.settings-row-help > .settings-card,
.settings-row-help > article,
.settings-row-help > section {
  height: 100%;
}

.settings-card {
  padding: 1.5rem !important;
  gap: 1.5rem !important;
  transition: all 0.3s ease;
}

.settings-card .section-heading {
  margin-bottom: 0 !important;
}

.settings-row-help .settings-card {
  background: rgba(30, 41, 59, 0.25);
  justify-content: flex-start !important;
  gap: var(--space-5) !important;
}

.settings-row-help .settings-card .section-heading {
  margin-bottom: var(--space-3) !important;
}

.database-repairs-help {
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  align-content: stretch;
}

.settings-row-help .guide-callout {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.settings-row-help .tool-accordion-desc {
  line-height: 1.5;
  color: var(--soft);
  margin-bottom: 0;
  font-size: 0.9rem;
}

.settings-pane .field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.settings-pane .field {
  height: 2.6rem !important;
  min-height: 2.6rem !important;
  border-radius: 8px;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.9rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.settings-pane .field:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue), transparent 80%), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.settings-pane .button-primary,
.settings-pane .button-ghost,
.settings-pane .button-danger,
.settings-pane .backup-file-button {
  min-height: 2.05rem !important;
  height: auto !important;
  border-radius: 4px !important;
  padding: 0.45rem 0.72rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.settings-pane .button-primary {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.backup-settings-inline .field {
  height: 2.05rem !important;
  min-height: 2.05rem !important;
}

.settings-pane .button-primary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue), transparent 40%) !important;
  background: transparent !important;
  color: var(--blue) !important;
  transform: none !important;
}

.settings-pane .button-ghost,
.settings-pane .backup-file-button {
  border: 1px solid var(--line-strong) !important;
  background: #111820 !important;
  color: var(--soft) !important;
}

.settings-pane .button-ghost:hover:not(:disabled),
.settings-pane .backup-file-button:hover {
  border-color: var(--accent) !important;
  color: #f4f8fb !important;
  transform: none !important;
}

.settings-pane .button-danger {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: #fda4af !important;
}

.settings-pane .button-danger:hover:not(:disabled) {
  border-color: rgba(244, 63, 94, 0.7) !important;
  background: transparent !important;
  color: #fff1f2 !important;
  transform: none !important;
}

/* Custom Slide Switch */
.settings-pane .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  user-select: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.settings-pane .checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.6rem;
  height: 1.4rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0;
}

.settings-pane .checkbox-label input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  top: 0.07rem;
  left: 0.07rem;
  background: #cbd5e1;
  transition: transform 0.3s ease, background 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-pane .checkbox-label input[type="checkbox"]:checked {
  background: var(--blue);
}

.settings-pane .checkbox-label input[type="checkbox"]:checked::before {
  transform: translateX(1.25rem);
  background: #ffffff;
}

/* Operational activity log */
.activity-log {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-3);
  overflow: hidden;
}

.activity-log:has(> .import-terminal.hidden) {
  display: none !important;
}

.activity-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.activity-log-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.activity-log-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.activity-log-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.activity-log-copy strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.activity-log-copy small,
.activity-log-state {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.25;
}

.activity-log-state {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.sync-progress {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
}

.sync-progress.hidden {
  display: none;
}

.sync-progress-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.sync-progress-summary strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.sync-progress-summary span {
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
}

.sync-progress-track {
  height: 0.38rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 72%, transparent);
}

.sync-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sync-progress[data-status="complete"] .sync-progress-fill {
  background: var(--green);
}

.sync-progress[data-status="error"] .sync-progress-fill {
  background: var(--red);
}

.sync-progress[data-status="stopped"] .sync-progress-fill {
  background: var(--yellow);
}

.full-sync-progress {
  gap: var(--space-2);
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.full-sync-progress-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.settings-pane .logs-terminal,
.settings-pane .import-terminal {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: 'JetBrains Mono', 'Cascadia Mono', monospace !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  padding: 1rem !important;
  color: #e2e8f0 !important;
}

.settings-pane #forceSyncTerminal {
  height: clamp(18rem, 48vh, 38rem);
  min-height: 18rem;
  max-height: 38rem;
}

@media (max-width: 30rem) {
  .sync-progress-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .sync-progress-summary span {
    text-align: left;
  }

  .full-sync-progress-details {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-pane #forceSyncTerminal {
    height: 22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-progress-fill {
    transition: none;
  }
}

/* Cache Gauges */
.cache-gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.cache-gauge-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.cache-gauge-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.cache-gauge-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cache-gauge-title {
  font-weight: 700;
  font-size: 0.85rem;
}

.cache-gauge-size {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
}

.cache-gauge-count {
  font-size: 0.78rem;
  color: var(--muted);
}

.cache-gauge-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.cache-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #6366f1);
  border-radius: 999px;
}

/* Mobile responsive adjustments */
@media (max-width: 900px) {
  .settings-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .settings-row-main,
  .settings-row-help {
    flex: none;
    width: 100%;
  }

  .settings-pane[data-settings-panel="backups"] .backup-settings-inline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .settings-pane[data-settings-panel="backups"] .backup-settings-left,
  .settings-pane[data-settings-panel="backups"] .backup-settings-center,
  .settings-pane[data-settings-panel="backups"] .backup-settings-right {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
  }

  .settings-pane[data-settings-panel="backups"] .backup-settings-inline .field-label {
    align-items: stretch !important;
    flex-direction: column !important;
    white-space: normal !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .settings-pane[data-settings-panel="backups"] .backup-settings-inline .field-label .field,
  .settings-pane[data-settings-panel="backups"] .backup-settings-inline .field {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .settings-pane[data-settings-panel="backups"] .import-terminal {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Light Mode Overrides */
html.light-mode .settings-row-help .settings-card {
  background: rgba(15, 23, 42, 0.03);
}

html.light-mode .settings-pane .field {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

html.light-mode .settings-pane .field:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

html.light-mode .backup-section-heading .status-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

html.light-mode .status-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

html.light-mode .settings-pane .button-ghost {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

html.light-mode .settings-pane .button-ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

html.light-mode .settings-pane .button-primary {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

html.light-mode .settings-pane .button-primary:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.55) !important;
  background: transparent !important;
  color: #2563eb !important;
  box-shadow: none !important;
  transform: none !important;
}

html.light-mode .settings-pane .button-danger,
html.light-mode .settings-pane .sync-tools-content .sync-tools-cancel-button {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}

html.light-mode .settings-pane .button-danger:hover:not(:disabled),
html.light-mode .settings-pane .sync-tools-content .sync-tools-cancel-button:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.6) !important;
  background: transparent !important;
  color: #b91c1c !important;
  box-shadow: none !important;
  transform: none !important;
}

html.light-mode .settings-pane .button-ghost,
html.light-mode .settings-pane .backup-file-button {
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html.light-mode .settings-pane .button-ghost:hover:not(:disabled),
html.light-mode .settings-pane .backup-file-button:hover {
  border-color: var(--line-strong) !important;
  background: var(--panel-2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.light-mode .activity-log {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

html.light-mode .activity-log-header {
  background: var(--panel-2);
  border-bottom-color: var(--line);
}

html.light-mode .settings-pane .logs-terminal,
html.light-mode .settings-pane .import-terminal {
  color: #0f172a !important;
}

html.light-mode .settings-pane .checkbox-label input[type="checkbox"] {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.06);
}

html.light-mode .settings-pane .checkbox-label input[type="checkbox"]::before {
  background: #ffffff;
}

html.light-mode .settings-pane .checkbox-label input[type="checkbox"]:checked {
  background: var(--blue);
}

html.light-mode .cache-gauge-card {
  background: rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Refined Trakt drop zone */
.settings-pane .drop-zone {
  min-height: 10rem;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.settings-pane .drop-zone:hover {
  border-color: var(--blue) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--blue), transparent 95%);
}

html.light-mode .settings-pane .drop-zone {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

html.light-mode .settings-pane .drop-zone:hover {
  border-color: var(--blue) !important;
}

.mobile-controls-row {
  display: none;
}

@media (min-width: 761px) {
  body .action-pill br,
  body .seerr-request-btn br,
  body .rating-pill br {
    display: none !important;
  }
}

/* --- Upcoming calendar ------------------------------------------------- */

.upcoming-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.upcoming-month-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.upcoming-month-title {
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.2;
  min-width: 0;
  padding: 0 0.35rem;
  text-align: center;
  white-space: nowrap;
}

.upcoming-nav-button {
  min-width: 0;
  min-height: 1.8rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.2;
}

.upcoming-search-field {
  grid-template-columns: auto minmax(0, 1fr);
  width: min(21rem, 28vw);
  min-width: 0;
}

.upcoming-search-field input {
  width: 100%;
  min-width: 0;
}

.upcoming-calendar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.upcoming-month-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* One block per month. The block is what confines its sticky heading - without
   it every heading in the range would pile up at the top of the scroller. */
.upcoming-month-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.upcoming-month-block + .upcoming-month-block {
  margin-top: var(--space-3);
}

.upcoming-month-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Monday-start week row. Days belonging to the neighbouring month render as
   invisible spacers so the columns stay aligned. */
.upcoming-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-3);
  /* Clears the sticky topbar and month heading when a row is scrolled to. */
  scroll-margin-top: calc(var(--right-topbar-height) + 3.75rem);
}

.upcoming-week-day.is-outside {
  visibility: hidden;
}

.upcoming-month-heading {
  position: sticky;
  /* Parks a little below the topbar rather than flush against it. */
  top: calc(var(--right-topbar-height) + 0.5rem);
  z-index: 5;
  padding: 0.5rem 0.75rem;
  /* Opaque so week rows scrolling underneath never show through. */
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  scroll-margin-top: calc(var(--right-topbar-height) + var(--space-3) + 0.5rem);
}

.upcoming-entry {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 3.525rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
}

.upcoming-entry:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.upcoming-entry-poster-wrap {
  display: block;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  min-height: 3.525rem;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  background: var(--panel-3);
}

.upcoming-entry-poster {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  object-fit: cover;
  background: var(--panel-3);
  display: block;
}

.upcoming-entry-poster.poster-fallback {
  border: 0;
}

.upcoming-entry-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  padding: 0.3rem 0.45rem 0.3rem 0.3rem;
}

.upcoming-entry-meta {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.upcoming-entry-code {
  color: var(--accent);
  font-size: 0.94rem;
  font-weight: 700;
  white-space: nowrap;
}

.upcoming-entry-title {
  font-size: 0.94rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-entry-episode {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-status {
  color: var(--muted);
  padding: 0.6rem 0.2rem;
}

html.light-mode .upcoming-month-heading {
  border-color: rgba(0, 0, 0, 0.08);
}

html.light-mode .upcoming-entry {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

html.light-mode .upcoming-entry:hover {
  background: rgba(59, 130, 246, 0.06);
}

.upcoming-week-day {
  min-height: 8.5rem;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.upcoming-week-day.is-past {
  opacity: 0.55;
}

.upcoming-week-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.upcoming-week-day-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.upcoming-week-day-weekday {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.upcoming-week-day-number {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
}

.upcoming-week-day.is-today .upcoming-week-day-number {
  color: var(--accent);
}

.upcoming-week-day-entries {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
  overflow-y: auto;
}

html.light-mode .upcoming-week-day {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Mobile (≤760px): the 7-column grid becomes an agenda list. Empty days stay
   visible so Today remains a useful anchor even when nothing airs that day;
   only the neighbouring-month spacer cells are hidden. */
@media (max-width: 760px) {
  .upcoming-controls {
    display: flex;
    width: max-content;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-start;
  }

  .upcoming-month-controls {
    grid-template-columns: 2.75rem minmax(8rem, 1fr) 2.75rem auto;
    width: max-content;
    gap: 0.45rem;
  }

  .upcoming-month-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 0.96rem;
    line-height: 1.2;
    align-self: center;
  }

  .upcoming-nav-button {
    min-width: 2.75rem;
  }

  #upcomingPrevButton {
    grid-column: 1;
    grid-row: 1;
  }

  #upcomingNextButton {
    grid-column: 3;
    grid-row: 1;
  }

  #upcomingTodayButton {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
    min-width: 5.5rem;
  }

  .upcoming-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    width: 14rem;
    min-width: 14rem;
  }

  body .page-topbar-actions .upcoming-search-field input {
    min-width: 10rem !important;
  }

  .upcoming-search-field input {
    width: 100%;
    min-width: 0;
  }

  .upcoming-controls .button-ghost {
    min-height: 2.75rem;
  }

  .upcoming-entry {
    min-height: 4.6rem;
    gap: 0;
    padding: 0;
    font-size: 0.82rem;
  }

  .upcoming-entry-poster-wrap {
    flex-basis: 2.9rem;
    width: 2.9rem;
    min-height: 4.35rem;
  }

  .upcoming-entry-text {
    padding: 0.45rem;
  }

  .upcoming-entry-title,
  .upcoming-entry-episode {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .upcoming-entry-title {
    -webkit-line-clamp: 2;
  }

  .upcoming-entry-episode {
    -webkit-line-clamp: 2;
  }

  .upcoming-month-list {
    gap: 0.4rem;
  }

  .upcoming-month-block {
    gap: 0.4rem;
  }

  /* Agenda list: week rows stack their days, and spacing comes from the day
     cells themselves so a week with no visible days collapses to nothing while
     still holding its place as a scroll anchor. */
  .upcoming-month-grid,
  .upcoming-week-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .upcoming-week-row .upcoming-week-day {
    margin-bottom: 0.4rem;
  }

  .upcoming-month-heading {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }

  .upcoming-week-day.is-outside {
    display: none;
  }

  .upcoming-week-day {
    min-height: 0;
    padding: 0.5rem;
    gap: 0.35rem;
  }

  .upcoming-week-day.is-past {
    opacity: 0.75;
  }

  .upcoming-week-day-entries {
    gap: 0.35rem;
  }
}

/* Upcoming mobile header --------------------------------------------------
   Keep the two calendar navigation concerns separate: search/Today share a
   utility row, while month navigation gets a full-width row with generous
   touch targets. Search is the only disclosure on this page. */
.upcoming-calendar-utilities {
  display: contents;
}

.upcoming-month-controls {
  order: 2;
}

.upcoming-search-dropdown {
  position: relative;
  display: flex;
  order: 1;
  flex: 0 0 auto;
}

.upcoming-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
}

.upcoming-search-trigger::-webkit-details-marker {
  display: none;
}

.upcoming-search-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 999;
  display: none;
  width: min(21rem, calc(100vw - 1rem));
  box-sizing: border-box;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-3);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.25));
}

.upcoming-search-dropdown[open] > .upcoming-search-panel {
  display: block;
}

.upcoming-search-panel .upcoming-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.upcoming-search-panel .upcoming-search-field input {
  width: 100%;
  min-width: 0;
}

.upcoming-today-button {
  order: 3;
}

body .page-topbar-actions:has(.upcoming-search-dropdown[open]) {
  overflow: visible !important;
}

@media (max-width: 760px) {
  body #upcomingTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #upcomingTopbarControls .page-action-primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "utilities" "month";
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }

  body #upcomingTopbarControls .upcoming-calendar-utilities {
    display: flex !important;
    grid-area: utilities;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }

  body #upcomingTopbarControls .upcoming-search-trigger,
  body #upcomingTopbarControls .upcoming-today-button {
    display: inline-flex !important;
    min-height: 2.75rem !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.5rem 0.65rem !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls .upcoming-search-trigger {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    padding-inline: 0 !important;
  }

  body #upcomingTopbarControls .upcoming-today-button {
    min-width: 6rem !important;
  }

  body #upcomingTopbarControls .upcoming-month-controls {
    display: grid !important;
    grid-area: month;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 1.4fr) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }

  body #upcomingTopbarControls .upcoming-nav-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding-inline: 0.5rem !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls .upcoming-nav-button svg {
    flex: 0 0 auto !important;
  }

  body #upcomingTopbarControls .upcoming-month-title {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls .upcoming-search-panel {
    left: 0;
    width: min(18rem, calc(100vw - 1rem));
  }

  body #upcomingTopbarControls:has(.upcoming-search-dropdown[open]) {
    overflow: visible !important;
  }

  .upcoming-week-day {
    scroll-margin-top: calc(var(--right-topbar-height) + 3.75rem);
  }
}

@media (max-width: 420px) {
  .upcoming-month-controls {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }

  #upcomingTodayButton {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    min-width: 7rem;
  }

  .upcoming-month-title {
    font-size: 0.9rem;
  }

  .upcoming-entry {
    align-items: stretch;
  }
}

/* Compact topbar controls reflow within the available column instead of
   relying on a hidden horizontal swipe for calendar navigation. */
@media (max-width: 1023px) {
  body .page-topbar-actions .upcoming-controls:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  body .page-topbar-actions .upcoming-search-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .upcoming-search-field input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .upcoming-month-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  body .page-topbar-actions .stats-controls:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  body .page-topbar-actions .stats-controls .compact-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--space-1) !important;
  }

  body .page-topbar-actions .stats-controls .compact-field:last-child {
    grid-column: 1 / -1;
  }

  body .page-topbar-actions .stats-controls .field {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .upcoming-controls:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  body .page-topbar-actions .upcoming-search-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .upcoming-search-field input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .upcoming-month-controls {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem auto;
    width: 100%;
    min-width: 0;
  }

  body .page-topbar-actions .upcoming-nav-button {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    padding-inline: 0 !important;
  }

  body .page-topbar-actions #upcomingTodayButton {
    width: auto !important;
    min-width: 7rem !important;
  }

  .brand-link,
  .nav-tab,
  .settings-tab,
  .button-primary,
  .button-ghost,
  .icon-button,
  .field,
  .theme-toggle-button {
    min-height: 2.75rem;
  }

  .brand-link {
    display: flex;
    align-items: center;
  }

  body .page-topbar-actions .compact-field input,
  body .page-topbar-actions .compact-field select,
  body .page-topbar-actions .sidebar-sub-menu .settings-tab {
    min-height: 2.75rem !important;
    height: 2.75rem !important;
  }
}

@media (max-width: 420px) {
  body .page-topbar-actions .upcoming-month-controls {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }
}

/* iOS enlarges the visual viewport when a focused form control renders below
   16px. Keep text-entry controls at that threshold on phone-sized screens so
   search, sign-in, and settings fields do not zoom the whole application. */
@media (max-width: 760px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Settings Page Layout (Desktop Viewports) */
@media (min-width: 900px) {
  /* Admin credentials side-by-side password grid */
  .settings-pane .admin-credentials-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-3) !important;
  }

  /* Form field-label containers: label above control, left-aligned */
  .settings-pane .field-label:not(.backup-enable-row):not(.checkbox-label):not(.tool-item-row .field-label):not(.backup-type-card .field-label) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }

  /* Inputs inside field labels fill width */
  .settings-pane .field-label:not(.backup-enable-row):not(.checkbox-label):not(.tool-item-row .field-label):not(.backup-type-card .field-label) .field {
    text-align: left !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Align checkbox toggles naturally */
  .settings-pane .checkbox-label:not(.backup-enable-row):not(.tool-item-row .checkbox-label):not(.backup-type-card .checkbox-label) {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    text-align: left !important;
    width: 100% !important;
    max-width: none !important;
  }

  .settings-pane .checkbox-label:not(.backup-enable-row):not(.tool-item-row .checkbox-label):not(.backup-type-card .checkbox-label) input {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }

  .settings-pane .checkbox-label:not(.backup-enable-row):not(.tool-item-row .checkbox-label):not(.backup-type-card .checkbox-label) span {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--soft) !important;
    white-space: normal !important;
  }

  /* Anchor settings action buttons (Save / Test buttons) to the bottom-right of the box */
  .settings-pane .settings-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    width: 100% !important;
    margin-top: var(--space-4) !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* ── Accordion toggle & chevron styling ────────────────────────────── */
summary::-webkit-details-marker {
  display: none !important;
}
summary {
  list-style: none !important;
}

.accordion-header {
  user-select: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.accordion-header:hover {
  opacity: 0.9;
}

.accordion-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--muted);
  display: inline-block;
  vertical-align: middle;
}

.accordion-header:hover .accordion-chevron,
details summary:hover .accordion-chevron {
  color: var(--text);
}

details[open] > summary .accordion-chevron,
.accordion-header.open .accordion-chevron,
button[aria-expanded="true"] .accordion-chevron {
  transform: rotate(90deg);
}

/* Sub-card styling for accordions inside settings sections (Sync Issues, Match Report) */
details.issue-category,
details.sync-match-report {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  margin-bottom: var(--space-3) !important;
  overflow: hidden !important;
}

details.issue-category > summary,
details.sync-match-report > summary {
  padding: var(--space-3) var(--space-4) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

details.issue-category > summary:hover,
details.sync-match-report > summary:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}


/* Ensure details cards (issue-category, sync-match-report) match main glass-panel card styling without bloated container padding */
details.settings-card,
details.tool-section-card,
details.issue-category,
details.sync-match-report {
  padding: 0 !important;
}

details.settings-card > summary,
details.tool-section-card > summary,
details.issue-category > summary,
details.sync-match-report > summary {
  padding: var(--space-3) !important;
}



/* ── Sonarr-style settings: landing link list ─────────────────────────── */
.settings-link-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* ── Grouped settings overview ─────────────────────────────────────────── */
.settings-group-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #202428;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.settings-group-section:hover,
.settings-group-section:focus-visible {
  border-color: var(--line-strong);
  background: color-mix(in srgb, #1a1a1a, white 8%);
  transform: translateY(-2px);
}

/* Settings landing cards use the sidebar surface in both dark themes. */
html:not(.light-mode):root .settings-group-section,
html:not(.light-mode):root .settings-group-section:hover,
html:not(.light-mode):root .settings-group-section:focus-visible {
  background: #1f242c;
}

html.light-mode .settings-group-section {
  background: var(--panel-2);
}

html.light-mode .settings-group-section:hover,
html.light-mode .settings-group-section:focus-visible {
  background: color-mix(in srgb, var(--panel-2), black 4%);
}

.settings-group-section:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.settings-group-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.settings-group-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 48rem) {
  .settings-link-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Sonarr-style settings: service card grid ─────────────────────────── */
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  width: 100%;
}

/* ── Guided setup (/setup) ─────────────────────────────────────────────── */
.dashboard-setup-checklist { display: grid; gap: var(--space-3); padding: var(--space-4); }
.dashboard-setup-checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dashboard-setup-checklist-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dashboard-setup-checklist-title h2 { margin: 0; font-size: 1rem; }
.dashboard-setup-checklist-title p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.dashboard-setup-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dashboard-setup-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 4rem; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); text-decoration: none; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.dashboard-setup-action:hover, .dashboard-setup-action:focus-visible { border-color: var(--line-strong); background: var(--panel-3); transform: translateY(-1px); }
.dashboard-setup-action-number { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.dashboard-setup-action-copy { display: grid; gap: var(--space-1); min-width: 0; }
.dashboard-setup-action-copy b { font-size: 0.86rem; }
.dashboard-setup-action-copy span { color: var(--muted); font-size: 0.80rem; line-height: 1.35; }
.dashboard-setup-action-arrow { color: var(--muted); font-size: 1rem; transition: transform 150ms ease, color 150ms ease; }
.dashboard-setup-action:hover .dashboard-setup-action-arrow, .dashboard-setup-action:focus-visible .dashboard-setup-action-arrow { color: var(--text); transform: translateX(2px); }

/* The setup view is a three-row flex column filling the visible page-shell
   height: logo, the onboarding box, and the footer bar. The logo/footer rows
   grow to share whatever space is left above/below the box equally
   (flex: 1 1 0 on both), and each centers its own content within that space -
   which is what puts the logo and footer bar exactly halfway between the page
   edge and the box, rather than pinned to a fixed offset. #setupPageRoot is
   `display: contents` so its two rendered children (.setup-brand and
   .setup-shell) act as direct flex items here instead of being boxed inside
   an extra wrapper; #setupFooterBar is a real DOM sibling (not part of that
   re-rendered innerHTML) so it survives every setup page render untouched.
   The box itself only grows as tall as its content, so it ends up vertically
   centered as a side effect of the two flexible rows around it being equal.
   Each row also has a min-height floor so a tall step's content (many
   provider/server cards) can't squeeze the logo or footer bar down to no
   visible gap at all - past that floor the page scrolls, same as any other
   view here, rather than the box being clipped or the flex rows going to 0. */
.page-shell[data-active-view="setup"] .app-shell {
  /* .app-shell is a bare `display: grid` box sized to its content by
     default, so #setup-view's own `min-height: 100%` below would otherwise
     resolve against an auto-height ancestor and collapse to content size
     (percentage heights against an auto-height parent are ignored per the
     CSS spec) - it needs a real height to measure against, matching the
     dashboard's identical fix above. */
  height: 100%;
}

#setup-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#setupPageRoot {
  display: contents;
}
.setup-brand { display: flex; flex: 1 1 0; min-height: 5rem; align-items: center; justify-content: center; width: 100%; max-width: 1100px; margin: 0 auto; }
.setup-brand-logo { height: 5.5rem; width: auto; object-fit: contain; }
.setup-footer-bar {
  /* Transparent spacer/centering region only - flex-grow on an element that
     also carries the pill's own border/background would stretch the visible
     card to fill the whole gap instead of just centering it there, which is
     what the nested .setup-footer-bar-card is for. */
  flex: 1 1 0;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-footer-bar-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}
.setup-footer-bar-meta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.setup-footer-bar-meta:empty { display: none; }
.setup-footer-bar .theme-toggle-button { width: 8rem; margin-bottom: 0; }
/* Onboarding's footer toggle shows only the Light and Dark words, no icons. */
#setupFooterBar .theme-toggle-label svg,
#authFooterBar .theme-toggle-label svg { display: none; }
#authFooterBar .setup-footer-bar-card { background: var(--brand-menu); }
.setup-footer-bar .app-version { white-space: nowrap; }
.setup-footer-bar .app-version:disabled { cursor: default; }
.setup-footer-bar .app-version:disabled:hover { color: var(--muted); text-decoration: none; }
.setup-restore-backup-button { width: 100%; text-align: center; justify-content: center; }
.setup-shell { display: grid; flex: 0 0 auto; width: 100%; gap: var(--space-4); max-width: 1100px; margin: 0 auto; font-size: 1.05rem; }
.setup-shell .section-heading h2 { font-size: 1.3rem; }
.setup-shell .section-heading span { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.setup-header-actions { display: flex; align-items: center; gap: var(--space-3); }
.setup-progress {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}
.setup-progress-step {
  min-width: 0;
  padding-inline: clamp(0.25rem, 0.65vw, 0.6rem);
  text-align: center;
  font-size: clamp(0.72rem, 0.78vw, 0.86rem);
  line-height: 1.15;
  white-space: nowrap;
}
.setup-progress-step:disabled { cursor: not-allowed; opacity: 0.42; }
.setup-progress-step.done:not(.active) { color: var(--green); border-color: color-mix(in srgb, var(--green), transparent 55%); }
.setup-step-body { display: grid; gap: var(--space-3); font-size: 1rem; }
/* A connected server's URL is a single unbreakable token. With the default
   min-width: auto on a grid item, its min-content width sized the whole step
   body wider than the setup shell, and page-shell's overflow-x: hidden then
   clipped the right edge of every card at narrow widths instead of scrolling.
   Let the tracks shrink, and let the URL itself wrap. */
.setup-step-body,
.setup-step-body > *,
.setup-server-rows > * { min-width: 0; }
.setup-step-body .settings-card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.setup-step-body .settings-card { padding: var(--space-4); gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.setup-step-body .settings-card b { font-size: 1.05rem; }
/* Overrides .settings-card's shared justify-content: space-between, which
   pushes each card's paragraph down to the bottom of the row's tallest
   sibling - with these one-line taglines that left a floating gap between
   the heading and the text on every shorter card in the row. */
.setup-overview-item { justify-content: flex-start; gap: var(--space-2); }
.setup-overview-item-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.setup-overview-item p { margin: 0; }
.setup-overview-intro { text-align: center; }
.setup-options-fields { display: grid; gap: var(--space-3); }
.setup-step-body .setup-options-card {
  min-height: 0;
  justify-content: flex-start;
  gap: var(--space-3);
}
.setup-options-heading { display: grid; gap: var(--space-1); }
.setup-options-heading b { font-size: 1.05rem; }
.setup-options-heading p { max-width: 75ch; margin: 0; font-size: 0.9rem; line-height: 1.45; }
.setup-options-radio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-options-radio-grid .settings-choice-option { min-height: 4.7rem; }
.setup-step-body .setup-options-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.setup-options-toggle-copy { display: grid; gap: var(--space-1); min-width: 0; }
.setup-options-toggle-copy b { font-size: 1.05rem; }
.setup-options-toggle-copy span { max-width: 75ch; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
/* A toggle that lives inside a policy card rather than being the card itself,
   so it has to bring its own flex row; the card owns the surrounding note and
   the collapsed consequence list. */
.setup-step-body .setup-options-toggle--inline {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.setup-options-recommended {
  margin-left: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
}
.setup-options-provider-note { max-width: 75ch; margin: 0; font-size: 0.9rem; line-height: 1.5; }
.setup-options-consequences summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.setup-options-consequences > div { max-width: 75ch; margin-top: var(--space-2); font-size: 0.9rem; line-height: 1.5; }
/* Shared by the setup card and the Sync Tuning field help, which renders the
   same list inside its own help span. */
.policy-consequence-list { margin: var(--space-1) 0; padding-left: 1.2em; display: grid; gap: 2px; }
.setup-options-switch {
  appearance: none;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 1.4rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong), transparent 25%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong), transparent 20%);
  cursor: pointer;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.setup-options-switch::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--text), transparent 75%);
  transition: transform 160ms ease, background 160ms ease;
}
.setup-options-switch:checked {
  border-color: color-mix(in srgb, var(--blue), transparent 15%);
  background: var(--blue);
}
.setup-options-switch:checked::before {
  transform: translateX(1.2rem);
  background: var(--panel);
}
.setup-options-switch:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.setup-restore-choice {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.setup-restore-choice:hover,
.setup-restore-choice:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
}
.setup-server-rows { display: grid; gap: var(--space-3); }
.setup-server-row-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.setup-server-row-main .button-primary { flex-shrink: 0; font-size: 0.92rem; }
.setup-server-row-title { display: flex; align-items: center; gap: var(--space-2); }
.setup-server-name { text-transform: capitalize; font-size: 1.15rem; }
.setup-server-detail { font-size: 0.95rem; overflow-wrap: anywhere; }
.setup-import-toggle-label { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.setup-import-status-line { margin: 0; font-size: 0.92rem; }
.setup-import-status-line.is-error { color: var(--red, #ef4444); }
.setup-step-intro { max-width: 75ch; }
.setup-claim-step { display: grid; gap: var(--space-5); width: 100%; max-width: 48rem; margin: 0 auto; }
.setup-claim-step > .setup-step-intro { max-width: 58ch; margin: 0 auto; text-align: center; }
.setup-claim-form-host { width: 100%; max-width: none; margin: 0; }
.setup-claim-panel {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  text-align: left;
}
.setup-claim-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.setup-claim-panel-heading h3 { margin: 0; font-size: 1.08rem; }
.setup-claim-panel-heading p { max-width: 58ch; margin: var(--space-1) 0 0; font-size: 0.88rem; line-height: 1.45; }
.setup-claim-panel-heading .badge { flex: 0 0 auto; }
.setup-claim-panel .setup-claim-form { display: grid; gap: var(--space-4); margin: 0; }
.setup-claim-panel .setup-claim-form .field-label { gap: var(--space-2); }
.setup-claim-panel .setup-claim-form .field { min-height: 2.55rem; }
.setup-claim-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.setup-claim-password-help { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.setup-claim-panel .message { margin: 0; }
.setup-claim-panel .button-primary { min-height: 2.6rem; font-size: 0.85rem; }
.setup-claim-summary { gap: var(--space-5); }
.setup-claim-summary-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.setup-claim-summary-list > div { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
.setup-claim-summary-list dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.setup-claim-summary-list dd { display: grid; gap: 0.3rem; min-width: 0; margin: 0; color: var(--text); font-size: 0.9rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.setup-claim-summary-list dd a { color: var(--blue); overflow-wrap: anywhere; }
.setup-claim-summary-list dd small { color: var(--muted); font-size: 0.76rem; font-weight: 500; line-height: 1.45; }
.setup-claim-summary-status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--green); }
.setup-claim-summary-status::before { content: "✓"; font-size: 0.82rem; font-weight: 800; }
.setup-claim-complete { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--green), var(--line) 55%); border-radius: var(--radius); background: color-mix(in srgb, var(--green), transparent 94%); }
.setup-claim-complete-mark { display: inline-grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border: 1px solid color-mix(in srgb, var(--green), transparent 45%); border-radius: 50%; color: var(--green); font-size: 1.15rem; font-weight: 800; }
.setup-claim-complete b { font-size: 1.05rem; }
.setup-claim-complete p { margin: var(--space-1) 0 0; }
.setup-webhook-rows { display: grid; gap: var(--space-2); }
.setup-webhook-row { width: 100%; padding: var(--space-3) !important; gap: var(--space-3) !important; }
.setup-webhook-row-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.setup-webhook-title { display: inline-flex; align-items: baseline; min-width: 0; color: var(--muted); }
.setup-webhook-title b { color: var(--text); font-size: 1.05rem !important; }
.setup-webhook-row--automatic { gap: var(--space-2) !important; }
.setup-webhook-automatic-copy { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.setup-webhook-automatic-copy b { color: var(--green); }
.setup-webhook-accordion > summary { cursor: pointer; list-style: none; }
.setup-webhook-accordion > summary::-webkit-details-marker { display: none; }
.setup-webhook-summary-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.setup-webhook-chevron { color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform 150ms ease; }
.setup-webhook-accordion[open] .setup-webhook-chevron { transform: rotate(90deg); }
.setup-webhook-accordion-body { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-subtle); }
.setup-webhook-confirmation { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line-subtle); }
.setup-webhook-row .webhook-guide-content { gap: var(--space-3) !important; padding-top: 0 !important; }
.setup-webhook-row .copy-block { width: 100%; }
.setup-webhook-row .copy-block pre { overflow-x: auto; }
.webhook-instruction-list { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.25rem; color: var(--text); font-size: 0.88rem; line-height: 1.5; }
.webhook-option-list { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-left: 1.25rem; }
.webhook-option-list li { padding-left: var(--space-1); }
.webhook-option-list code { font-weight: 700; }
.setup-metadata-card { display: grid; gap: var(--space-2); }
.setup-metadata-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.setup-metadata-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.setup-metadata-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.setup-metadata-optional { margin-top: var(--space-3); }
.setup-metadata-optional-intro { margin-top: var(--space-2); max-width: 75ch; font-size: 0.92rem; }
.setup-metadata-optional-grid { margin-top: var(--space-2); }
.setup-metadata-provider-desc { font-size: 0.88rem; }
.setup-metadata-provider-status { font-size: 0.95rem; }
.setup-trakt-card { display: grid; gap: var(--space-2); }
.setup-trakt-heading { display: flex; justify-content: space-between; align-items: center; }
.setup-trakt-flow { text-align: center; }
.setup-trakt-code { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; }
.setup-trakt-waiting { font-size: 0.95rem; }
.setup-trakt-actions { display: flex; gap: var(--space-2); }
.setup-trakt-date-pref-help { font-size: 0.88rem; }
.setup-trakt-sync-note { font-size: 0.92rem; }
.webhook-option-list span { color: var(--muted); }
.setup-import-note { font-size: 0.92rem; }
.setup-import-list { display: grid; border: 1px solid var(--line-subtle); border-radius: var(--radius); overflow: hidden; }
.setup-import-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); background: var(--panel-2); }
.setup-import-row + .setup-import-row { border-top: 1px solid var(--line-subtle); }
.setup-import-source { display: inline-flex; align-items: baseline; min-width: 0; color: var(--muted); }
.setup-import-source b { color: var(--text); font-size: 1rem; }
.setup-import-result { display: grid; gap: var(--space-2); min-width: 12rem; text-align: right; }
.setup-import-result-head { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); min-width: 0; }
.setup-import-result .muted-copy { margin: 0; font-size: 0.88rem; }
.setup-import-result .badge { flex-shrink: 0; }
.setup-import-progress { height: 6px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.setup-import-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 300ms ease; }
.setup-import-progress-fill.is-complete { background: var(--green); }
.setup-import-progress-fill.is-failed { background: var(--red); }
.setup-import-progress-fill.is-indeterminate { width: 40%; animation: setup-import-progress-slide 1.1s ease-in-out infinite; }
@keyframes setup-import-progress-slide {
  0% { margin-left: 0%; }
  50% { margin-left: 60%; }
  100% { margin-left: 0%; }
}
.setup-backup-card { border: 1px solid var(--line) !important; background: var(--panel-2) !important; }
.setup-backup-section { gap: var(--space-3) !important; }
.setup-backup-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.setup-backup-heading p { margin: var(--space-1) 0 0; font-size: 0.88rem; }
.setup-backup-fields { display: grid; grid-template-columns: minmax(9rem, 0.7fr) minmax(9rem, 0.7fr) minmax(18rem, 2fr); gap: var(--space-3); align-items: start; }
.setup-backup-security { display: grid; gap: var(--space-2); }
.setup-backup-label-line { display: inline-flex; align-items: baseline; gap: 0.25em; white-space: nowrap; }
.setup-backup-passphrase .muted-copy { font-size: 0.78rem; font-weight: 400; }
.setup-backup-remember { min-height: 1.25rem; }
.setup-step-body details.settings-card.setup-backup-remote { display: block; min-height: 0; padding: var(--space-4) !important; }
.setup-backup-remote > summary { padding: 0 !important; cursor: pointer; list-style: none; }
.setup-backup-remote > summary::-webkit-details-marker { display: none; }
.setup-backup-remote-body { display: grid; gap: var(--space-3); padding-top: 0; margin-top: var(--space-3); }
.setup-backblaze-signup { margin: 0; font-size: 0.88rem; }
.setup-backblaze-workflow { display: grid; border-block: 1px solid var(--line-subtle); }
.setup-backblaze-stage { display: grid; grid-template-columns: minmax(16rem, 1.2fr) minmax(18rem, 1fr); gap: clamp(var(--space-4), 4vw, var(--space-6)); padding: var(--space-4) 0; align-items: start; }
.setup-backblaze-stage + .setup-backblaze-stage { border-top: 1px solid var(--line-subtle); }
.setup-backblaze-guide { display: grid; gap: var(--space-2); }
.setup-backblaze-guide h3 { margin: 0; font-size: 0.95rem; }
.setup-backblaze-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35em; font-size: 0.85rem; }
.setup-backblaze-stage-fields { display: grid; gap: var(--space-3); }
.setup-backblaze-connect-fields { max-width: 28rem; }
.setup-backblaze-key-note { margin: calc(var(--space-1) * -1) 0 0; font-size: 0.8rem; line-height: 1.5; }
.setup-backblaze-toggles { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.setup-backblaze-actions { display: flex; gap: var(--space-2); padding-top: var(--space-2); }
.setup-field-error { padding: var(--space-2); margin: calc(var(--space-2) * -1); border-radius: var(--radius); border: 1px solid var(--red); background: color-mix(in srgb, var(--red), transparent 92%); }
.setup-review-lead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.setup-review-mark { display: inline-grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 1.15rem; font-weight: 800; }
.setup-review-lead.is-ready .setup-review-mark { color: var(--green); border-color: color-mix(in srgb, var(--green), transparent 45%); background: color-mix(in srgb, var(--green), transparent 92%); }
.setup-review-lead.is-optional .setup-review-mark { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow), transparent 45%); background: color-mix(in srgb, var(--yellow), transparent 92%); }
.setup-review-lead b { font-size: 1.08rem; }
.setup-review-lead p { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.9rem; }
.setup-review-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.setup-review-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; padding: var(--space-3) var(--space-4); }
.setup-review-row + .setup-review-row { border-top: 1px solid var(--line-subtle); }
.setup-review-copy { display: grid; grid-template-columns: minmax(8.5rem, 0.55fr) minmax(0, 2fr); align-items: baseline; gap: var(--space-3); min-width: 0; }
.setup-review-copy b { font-size: 0.95rem !important; }
.setup-review-copy span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.setup-review-row > .badge { flex-shrink: 0; }
.setup-actions { display: flex; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-subtle, var(--line)); }
.setup-actions button { font-size: 0.92rem; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; border: 1px solid var(--line-subtle, var(--line)); color: var(--muted); }
.badge-success { color: var(--green); border-color: color-mix(in srgb, var(--green), transparent 45%); }
.badge-warning { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow), transparent 45%); }
.badge-error { color: var(--red); border-color: color-mix(in srgb, var(--red), transparent 45%); }

@media (max-width: 60rem) {
  .setup-progress {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .setup-progress-step { flex: 0 0 auto; min-width: max-content; }
}

@media (max-width: 42rem) {
  .setup-shell .section-heading { flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
  .setup-header-actions { flex-wrap: wrap; }
  .dashboard-setup-checklist-head { align-items: stretch; }
  .dashboard-setup-checklist-title { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .dashboard-setup-actions { grid-template-columns: minmax(0, 1fr); }
  .setup-options-radio-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-step-body .setup-options-toggle { align-items: flex-start; }
  .setup-options-recommended { display: block; margin-left: 0; }
  .setup-claim-panel { padding: var(--space-4); }
  .setup-claim-panel-heading { flex-direction: column; gap: var(--space-2); }
  .setup-claim-password-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-claim-summary-list { grid-template-columns: minmax(0, 1fr); }
  .setup-import-row { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .setup-import-result { width: 100%; min-width: 0; text-align: left; }
  .setup-import-result-head { justify-content: flex-start; flex-wrap: wrap; }
  .setup-backup-heading { align-items: flex-start; }
  .setup-backup-fields, .setup-backblaze-stage { grid-template-columns: minmax(0, 1fr); }
  .setup-backblaze-stage { gap: var(--space-3); }
  .setup-review-row { align-items: flex-start; }
  .setup-review-copy { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

.settings-service-subsection {
  display: grid;
  gap: var(--space-2);
}

.settings-service-subsection + .settings-service-subsection {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subtle);
}

.settings-service-subsection > h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.settings-service-subsection > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 6.25rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.service-card:hover,
.service-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--panel-3);
  transform: translateY(-2px);
}

.service-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.service-card b {
  font-size: 1rem;
  font-weight: 750;
}

.service-card-desc {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.service-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
}

.service-card--add {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}

.service-card--add span {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.service-card-add-text {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center;
}

.service-card--add:hover,
.service-card--add:focus-visible {
  color: var(--text);
}

/* ── Sonarr-style settings: edit / picker modals ──────────────────────── */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-4);
  animation: settingsModalOverlayFade 0.18s ease-out;
}

html.light-mode .settings-modal-overlay {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes settingsModalOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes settingsModalPop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.settings-modal {
  width: min(720px, 95vw);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  gap: 0;
  padding: 0;
  overflow: hidden;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  animation: settingsModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

html.light-mode .settings-modal {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.settings-modal--with-help {
  width: min(1440px, 96vw);
}

.settings-picker-modal {
  width: min(720px, 95vw);
}

.settings-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
}

html.light-mode .settings-modal-head {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.settings-modal-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
}

.settings-modal-close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.settings-modal-close:hover,
.settings-modal-close:focus-visible {
  color: var(--text);
  background: var(--surface-hover);
}

.settings-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}

.settings-modal--with-help .settings-modal-body {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(480px, 1.2fr);
  gap: var(--space-5);
  align-items: start;
}

.settings-modal-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.settings-modal-leading-action-row {
  display: flex;
}

.settings-modal-leading-action-row .settings-modal-leading-action {
  width: 100%;
}

.settings-inline-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .settings-inline-field-pair {
    grid-template-columns: 1fr;
  }
}

.settings-inline-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-3);
  width: 100%;
}

.settings-inline-footer .settings-inline-enabled {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.settings-inline-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .settings-inline-footer {
    flex-wrap: wrap !important;
  }
}

.webhook-secret-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: color-mix(in srgb, #1a1a1a, white 10%);
}

html.light-mode .webhook-secret-box {
  background: var(--panel);
}

.settings-modal-status {
  min-height: 1.2rem;
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.settings-modal-status[data-tone="muted"] {
  color: var(--muted);
}
.settings-modal-status.success,
.settings-modal-status[data-tone="success"] {
  color: #10b981;
}
.settings-modal-status.error,
.settings-modal-status[data-tone="error"] {
  color: #f87171;
}

.settings-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--panel-3);
}

html.light-mode .settings-modal-foot {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.settings-modal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.settings-picker-intro {
  margin: 0 0 var(--space-2);
  color: var(--soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.plex-account-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.plex-account-summary b {
  color: var(--text);
  font-size: 1rem;
}

.plex-account-summary span {
  color: var(--muted);
  font-size: 0.8rem;
}

.trakt-connected-summary {
  margin-top: var(--space-3);
  padding-bottom: var(--space-2);
}

.trakt-sync-progress {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent) 7%, var(--panel-2));
}

.trakt-sync-progress-copy {
  display: grid;
  gap: var(--space-1);
}

/* The one thing the Trakt box says for itself: what the First connection choice
   will actually do about Plex. Everything else about the two modes lives in the
   Trakt Help panel beside it rather than being repeated here. Reads as plain
   guidance when historical Plex sync is on, and as a warning when it is off. */
.trakt-first-connection-plex-note {
  max-width: 80ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.trakt-first-connection-plex-note.is-warning {
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--yellow, var(--line-strong)), transparent 55%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow, var(--panel-2)), transparent 90%);
  color: inherit;
}
.trakt-sync-policy-note {
  max-width: 80ch;
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--yellow, var(--line-strong)), transparent 55%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow, var(--panel-2)), transparent 90%);
  font-size: 0.85rem;
  line-height: 1.5;
}

.trakt-sync-progress-copy b {
  color: var(--text);
  font-size: 0.82rem;
}

.trakt-sync-progress-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.trakt-sync-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 13%, var(--panel));
}

.trakt-sync-progress-track span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: trakt-sync-progress-slide 1.1s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes trakt-sync-progress-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(315%); }
}

@media (prefers-reduced-motion: reduce) {
  .trakt-sync-progress-track span {
    width: 100%;
    opacity: 0.7;
    animation: none;
  }
}

.jellyfin-quick-connect-code {
  text-align: center;
}

.jellyfin-quick-connect-code b {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.75rem;
  letter-spacing: 0.16em;
}

.jellyfin-quick-connect-code small {
  color: var(--muted);
}

.plex-server-picker {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.settings-modal-optional-fields {
  margin-top: var(--space-2);
}

.settings-modal-optional-fields-body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

.plex-server-picker .service-card {
  min-height: 5rem;
}

.settings-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.settings-modal-field-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  width: 100% !important;
}

.settings-modal-field-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--text);
}

.settings-field-optional {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
}

.settings-field-help {
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-align: right !important;
  flex: 0 1 auto !important;
  margin-left: auto !important;
}

.settings-modal-field-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.settings-modal-field-control .field {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.88rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

html.light-mode .settings-modal-field-control .field {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.settings-modal-field-control .field:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue), transparent 75%);
  outline: none;
}

.settings-modal-field--checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

html.light-mode .settings-modal-field--checkbox {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.settings-modal-field--checkbox .settings-modal-field-label {
  padding: 0;
  margin: 0;
}

.settings-modal-field--checkbox input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent, var(--blue));
  cursor: pointer;
}

.settings-field-help {
  color: var(--soft);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

.settings-field-optional {
  color: var(--muted);
  font-size: 0.80rem;
  font-style: normal;
  font-weight: 400;
}

.settings-modal-help {
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

html.light-mode .settings-modal-help {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.settings-modal-help .settings-help-body {
  font-size: 0.92rem;
  color: var(--soft);
  line-height: 1.55;
}

.settings-modal-help .tool-accordion-desc,
.settings-help-body p,
.settings-help-body li {
  color: var(--soft);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.settings-modal-help code,
.settings-help-body code {
  background: var(--panel-2);
  color: var(--blue);
  border: 1px solid var(--line-strong);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
}

html.light-mode .settings-modal-help code,
html.light-mode .settings-help-body code {
  background: #e2e8f0;
  color: #1d4ed8;
  border-color: #cbd5e1;
}

.settings-help-steps {
  padding-left: 1.2rem;
}

.settings-help-body a {
  color: var(--blue);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .settings-modal--with-help .settings-modal-body {
    grid-template-columns: 1fr;
  }
}

/* Sonarr-style aligned label/control rows inside the modal on desktop. */
@media (min-width: 761px) {
  .settings-modal-field {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }

  .settings-modal-field-label {
    padding-top: 0.55rem;
    text-align: right;
  }

  .settings-modal-field--checkbox .settings-modal-field-label {
    padding-top: 0.1rem;
  }

  .settings-modal-field-control .field {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .settings-modal--with-help .settings-modal-body {
    grid-template-columns: 1fr;
  }

  .settings-modal--with-help .settings-modal-help {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .settings-modal {
    width: 96vw;
    max-height: 92dvh;
  }

  .settings-modal-foot {
    flex-wrap: wrap;
  }

  .settings-modal-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .settings-modal-delete {
    margin-right: auto;
  }

  .settings-card-grid {
    grid-template-columns: 1fr;
  }

  .setup-webhook-row-heading {
    align-items: center;
  }

  .setup-webhook-title {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card {
    transition: none;
  }
}

/* Phone layout guardrails -------------------------------------------------
   Keep shared mobile control tabs readable at narrow widths. The previous
   rules allowed labels to break at every character, which made the control
   strip grow vertically and pushed page content below the fold. */
@media (max-width: 640px) {
  body .mobile-controls-row {
    align-items: stretch !important;
    min-height: 3.5rem !important;
    overflow: hidden !important;
  }

  body .mobile-controls-row .mobile-control-tab {
    min-height: 3rem !important;
    padding: 0.35rem 0.15rem !important;
    gap: 0.2rem !important;
  }

  body .mobile-controls-row .mobile-control-tab span {
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }

  body .mobile-controls-row .mobile-control-tab svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  /* Upcoming is a two-part control group: search first, calendar second. */
  body #upcomingTopbarControls:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }

  body #upcomingTopbarControls .upcoming-search-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #upcomingTopbarControls .upcoming-search-field input {
    min-width: 0 !important;
    width: 100% !important;
  }

  body #upcomingTopbarControls .upcoming-month-controls {
    display: grid !important;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem !important;
    width: 100% !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  body #upcomingTopbarControls .upcoming-month-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body #upcomingTopbarControls #upcomingTodayButton {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    min-width: 7rem !important;
  }

  /* Detail actions remain a single compact, horizontally scrollable row. */
  body #mediaDetailActions {
    min-height: 3.5rem !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body #mediaDetailActions > * {
    flex: 0 0 auto !important;
  }

  body #mediaDetailActions > *:not(.media-toggle-all-seasons-btn) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body #mediaDetailActions .media-toggle-all-seasons-btn {
    flex: 0 0 4.25rem !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    max-width: 4.25rem !important;
    margin-left: 0 !important;
  }

  body #mediaDetailActions .action-pill span,
  body #mediaDetailActions .seerr-request-btn span,
  body #mediaDetailActions .rating-pill span {
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }
}
.unknown-show-evidence {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
}

.unknown-show-evidence h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.unknown-show-evidence p {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.unknown-show-evidence ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.1rem;
}

.unknown-show-evidence li {
  color: var(--text);
  font-size: 0.84rem;
}

.unknown-show-evidence li span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Shared settings row treatment ------------------------------------------
   Keep every settings tool panel on the same visual system as Sync Tools:
   compact sibling spacing, bordered rows, left-aligned descriptions, and
   controls/content that use the full available width. */
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) > div:has(details.sync-tool-details),
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) > div:has(details.sync-match-report) {
  gap: var(--space-2) !important;
}

/* Older page-specific rules reset these content wrappers to zero padding.
   Restore the shared Sync Tools inset and compact row rhythm. */
.settings-pane .settings-row-main #refreshMetadataContent,
.settings-pane .settings-row-main #diagnosticsContent,
.settings-pane .settings-row-main #imageCacheContent,
.settings-pane .settings-row-main #plexServerContent,
.settings-pane .settings-row-main #embyServerContent,
.settings-pane .settings-row-main #jellyfinServerContent,
.settings-pane .settings-row-main #webhookSecretContent,
.settings-pane .settings-row-main #metadataProviderContent,
.settings-pane .settings-row-main #migrationContent,
.settings-pane .settings-row-main #databaseRepairsContent,
.settings-pane .settings-row-main #rebuildsContent,
.settings-pane .settings-row-main #syncTuningContent,
.settings-pane .settings-row-main #syncToolsContent,
.settings-pane .settings-row-main #syncIssuesContent,
.settings-pane .settings-row-main #syncMatchReportContent,
.settings-pane .settings-row-main #syncHistoryContent,
.settings-pane .settings-row-main #tautulliImportContent,
.settings-pane .settings-row-main #seerrContent,
.settings-pane .settings-row-main #accountContent,
.settings-pane .settings-row-main #webhookSetupGuides,
.settings-pane .settings-row-main #syncTuningFields {
  margin-top: 0 !important;
  padding: var(--space-3) !important;
  gap: var(--space-2) !important;
}

.settings-pane .settings-row-main #syncTuningContent #syncTuningFields {
  padding: 0 !important;
}

.settings-pane .settings-row-main #syncIssuesContainer,
.settings-pane .settings-row-main #syncHistoryPanel {
  display: grid !important;
  gap: var(--space-2) !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card) {
  gap: 0 !important;
  border: 1px solid var(--line) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card):hover,
.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card):focus-within {
  border-color: var(--blue) !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto;
  align-items: center !important;
  gap: 0.25rem var(--space-3) !important;
  min-width: 0;
  padding: var(--space-3) !important;
  cursor: pointer !important;
  list-style: none !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary::-webkit-details-marker {
  display: none !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary > :first-child {
  grid-column: 1;
  min-width: 0;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary > span {
  grid-column: 1;
  grid-row: 2;
  max-width: none !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.45;
  text-align: left !important;
}

.settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.settings-pane .settings-row-main details.sync-tool-details[open] > summary,
.settings-pane .settings-row-main details.sync-match-report[open] > summary {
  border-bottom: 1px solid var(--line);
}

.settings-pane .settings-row-main details.sync-tool-details > .tool-item-row,
.settings-pane .settings-row-main details.sync-match-report > #syncMatchReportContainer,
.settings-pane .settings-row-main details.issue-category > :not(summary) {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) !important;
}

.settings-pane .settings-row-main details.sync-tool-details > .tool-item-row {
  border-bottom: 0 !important;
}

.settings-pane .settings-row-main details.settings-static-details > summary {
  pointer-events: none;
  cursor: default !important;
}

.settings-pane .settings-row-main details.settings-static-details > summary .accordion-chevron {
  display: none !important;
}

@media (max-width: 760px) {
  .settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category) > summary {
    grid-template-columns: 1fr !important;
  }
}

/* Canonical settings layout ----------------------------------------------
   Sync Tools is the reference for every settings page. Keep the shell,
   headings, content insets, controls, and interactive rows consistent while
   allowing genuinely long result/list panels to remain expandable. */
.settings-pane .settings-row {
  align-items: flex-start;
}

.settings-pane .settings-row-main,
.settings-pane .settings-row-help {
  gap: var(--space-2) !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  width: 100%;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-3) !important;
  margin: 0 !important;
  padding: var(--space-3) !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > div,
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > .sync-heading-title {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading.sync-static-heading > div:first-child {
  width: auto !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > span,
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > div > span {
  min-width: 0;
  max-width: none !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  margin-top: 0 !important;
  padding: var(--space-3) !important;
  /* Use the same measured sibling gap as the Sync Tools boxes everywhere. */
  gap: var(--space-2) !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > .settings-card-grid,
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > form,
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > .settings-actions {
  min-width: 0;
}

/* Keep one-off section actions in the same top control bar as the heading. */
.settings-pane .settings-row-main .settings-heading-action {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  white-space: nowrap;
}

/* The page top bar clips its action row; don't lift a hovered action outside it. */
#pageTopbarActions .sync-action-btn:hover:not(:disabled) {
  transform: none;
}

/* #restore-local/#restore-remote are card shells too, but they sit one level
   deeper than the rule above expects - inside #restoreSectionsHome, kept there
   because the onboarding wizard's "Restore from backup" step reparents them
   (see settings-shell.js and docs/settings.md). Restate the same card shell
   directly by id so the extra nesting level doesn't fall through to the
   generic 1.5rem .settings-card padding. */
#restore-local,
#restore-remote {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  width: 100%;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  background: #202428 !important;
  box-shadow: none !important;
}

html.light-mode #restore-local,
html.light-mode #restore-remote {
  background: var(--panel-2) !important;
}

#restore-local > .section-heading,
#restore-remote > .section-heading {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-3) !important;
  margin: 0 !important;
  padding: var(--space-3) !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

#restore-local > .section-heading > div,
#restore-local > .section-heading > .sync-heading-title,
#restore-remote > .section-heading > div,
#restore-remote > .section-heading > .sync-heading-title {
  min-width: 0;
  flex: 1 1 auto;
}

#restore-local > .section-heading.sync-static-heading > div:first-child,
#restore-remote > .section-heading.sync-static-heading > div:first-child {
  width: auto !important;
}

#restore-local > .section-heading > span,
#restore-local > .section-heading > div > span,
#restore-remote > .section-heading > span,
#restore-remote > .section-heading > div > span {
  min-width: 0;
  max-width: none !important;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
}

#restore-local > :not(.section-heading),
#restore-remote > :not(.section-heading) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  margin-top: 0 !important;
  padding: var(--space-3) !important;
  gap: var(--space-2) !important;
}

/* Help cards use the same heading boundary and panel tokens, but retain a
   normal content inset because their prose is not an action-row list. */
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) {
  min-width: 0;
  width: 100%;
  padding: var(--space-3) !important;
  gap: var(--space-3) !important;
  justify-content: flex-start !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  min-height: 46px;
  gap: var(--space-3) !important;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 !important;
  padding: var(--space-3) !important;
  border-bottom: 1px solid var(--line) !important;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading p,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading h2 {
  margin: 0 !important;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > .settings-help-link {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > .settings-help-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > .settings-help-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > span {
  min-width: 0;
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.45;
  text-align: right;
}

/* Help mirrors the left-hand controls: each topic gets its own readable block
   instead of becoming one uninterrupted paragraph column. */
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) {
  display: grid !important;
  gap: var(--space-3);
  margin: 0 !important;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > div {
  display: grid;
  gap: var(--space-1);
  margin: 0 !important;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}

/* Use the same scan pattern as Account Help everywhere: each help topic has a
   visible bullet, an indented title, and its explanation on the following line.
   Account's semantic list keeps its own native bullet treatment. */
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > div:not(:has(ul)):not(:empty) {
  position: relative;
  padding-left: 1.2rem;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > div:not(:has(ul)):not(:empty)::before {
  content: "•";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--text);
  font-weight: 800;
}

.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-pane .settings-row-help .settings-help-content > div > b,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) > div > b {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.35;
}

.settings-pane .settings-row-help .settings-help-content p,
.settings-pane .settings-row-help .settings-help-content ul,
.settings-pane .settings-row-help .settings-help-content ol,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) p,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) ul,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) ol {
  margin: 0 !important;
  line-height: 1.45 !important;
}

.settings-pane .settings-row-help .settings-help-content ul,
.settings-pane .settings-row-help .settings-help-content ol,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) ul,
.settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > :not(.section-heading) ol {
  display: grid;
  gap: var(--space-1);
  padding-left: 1.2rem;
}

.settings-pane .settings-row-help .settings-help-content li > span {
  display: block;
}

.settings-pane .settings-row-help .settings-help-content li > span + span {
  margin-top: var(--space-1);
}

/* Account fields are action rows like Sync Tuning, rather than a three-column
   form that compresses as the main settings column narrows. */
.settings-pane #adminCredentialsForm {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
}

.settings-pane #syncTuningForm {
  gap: var(--space-2) !important;
}

.settings-pane #adminCredentialsForm > .field-label,
.settings-pane #adminCredentialsForm .admin-credentials-grid > .field-label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem) !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}

.settings-pane #adminCredentialsForm > .field-label:hover,
.settings-pane #adminCredentialsForm > .field-label:focus-within,
.settings-pane #adminCredentialsForm .admin-credentials-grid > .field-label:hover,
.settings-pane #adminCredentialsForm .admin-credentials-grid > .field-label:focus-within {
  border-color: var(--blue) !important;
}

.settings-pane #adminCredentialsForm .admin-credentials-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-2) !important;
  min-width: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .settings-pane #adminCredentialsForm .admin-credentials-grid {
    grid-template-columns: 1fr !important;
  }
}

.settings-pane #adminCredentialsForm .admin-credentials-grid .field,
.settings-pane #adminCredentialsForm > .field-label .field {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.settings-pane #adminCredentialsStatus {
  margin: 0 !important;
  padding: var(--space-1) 0 !important;
}

/* Service cards, log filters, and backup destinations are all sibling rows in
   the Sync Tools visual system. */
.settings-pane .settings-card-grid {
  gap: var(--space-2) !important;
}

.settings-pane .settings-card-grid .service-card {
  min-height: 6rem;
  padding: var(--space-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
  transform: none !important;
}

.settings-pane .settings-card-grid .service-card:hover,
.settings-pane .settings-card-grid .service-card:focus-visible {
  border-color: var(--blue) !important;
  transform: none !important;
}

.settings-pane .settings-card-grid .service-card b {
  font-size: 0.92rem;
  font-weight: 800;
}

.settings-pane #logsCategoryFilter {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
  margin: 0 !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel-2) !important;
}

.settings-pane #logsTerminal {
  margin-top: var(--space-2) !important;
  padding: var(--space-3) !important;
  border-radius: var(--radius) !important;
}

.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) > .settings-actions,
.settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) .settings-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
  margin: 0 !important;
}

/* Keep the shared button scale and make destructive cancellation readable in
   both themes without introducing a second button language. */
.settings-pane .settings-row-main button:not(.accordion-header),
.settings-pane .settings-row-help button:not(.accordion-header) {
  min-height: 2.05rem !important;
  height: auto !important;
  border-radius: 4px !important;
  padding: 0.45rem 0.72rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading,
  .settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > span,
  .settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > div > span,
  .settings-pane .settings-row-help > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) > .section-heading > span {
    width: 100%;
    text-align: left;
  }

  .settings-pane #adminCredentialsForm > .field-label,
  .settings-pane #adminCredentialsForm .admin-credentials-grid > .field-label {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) .settings-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .settings-pane .settings-row-main > :is(.settings-card, .sync-panel, .logs-panel) .settings-actions > button {
    width: 100%;
  }
}

/* Sync activity page (/sync-activity) */
.sync-activity-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.sync-activity-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent, #6366f1);
}

.sync-activity-status[data-sync-state="idle"] {
  color: var(--muted);
}

.sync-activity-status[data-sync-state="attention"] {
  color: var(--yellow);
}

.sync-activity-status[data-sync-state="attention"][data-attention-tone="error"] {
  color: var(--red);
}

.sync-activity-status[data-action-tone="success"] {
  font-weight: 800;
}

.sync-activity-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sync-activity-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.sync-activity-summary-text {
  color: inherit;
}

.sync-activity-summary-text--issues {
  color: var(--red);
}

.sync-activity-failed-toggle {
  flex: 0 0 auto;
}

.sync-attention-panel {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--yellow) 52%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow) 7%, var(--panel-2));
}

.sync-attention-panel.hidden {
  display: none;
}

.sync-attention-panel[data-attention-tone="error"] {
  border-color: color-mix(in srgb, var(--red) 52%, var(--line-strong));
  background: color-mix(in srgb, var(--red) 6%, var(--panel-2));
}

.sync-attention-heading,
.sync-attention-item-header,
.sync-attention-item-footer,
.sync-attention-error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.sync-attention-heading > div,
.sync-attention-item-title,
.sync-attention-error > div {
  min-width: 0;
}

.sync-attention-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--yellow);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sync-attention-panel[data-attention-tone="error"] .sync-attention-kicker {
  color: var(--red);
}

.sync-attention-heading h2,
.sync-attention-item h3,
.sync-attention-item h4 {
  margin: 0;
}

.sync-attention-heading h2 {
  font-size: 1.05rem;
}

.sync-attention-heading p,
.sync-attention-error span,
.sync-attention-loading span {
  display: block;
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.sync-attention-list {
  display: grid;
  gap: var(--space-2);
}

.sync-attention-item {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.sync-attention-item-header {
  align-items: center;
}

.sync-attention-item h3 {
  color: var(--text);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.sync-attention-summary {
  margin: 0;
  color: var(--soft);
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sync-attention-client-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--panel-3);
}

.sync-attention-client-context > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.sync-attention-client-context span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-attention-client-context strong {
  color: var(--soft);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.sync-attention-client-cause {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--line));
  border-radius: calc(var(--radius) - 1px);
  background: color-mix(in srgb, var(--red) 5%, var(--panel-3));
}

.sync-attention-client-cause > span {
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-attention-client-cause code {
  color: var(--soft);
  font: inherit;
  font-size: 0.83rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sync-attention-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sync-attention-detail-grid > div,
.sync-attention-examples {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.sync-attention-item h4 {
  color: var(--soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-attention-detail-grid p,
.sync-attention-detail-grid ol,
.sync-attention-examples ul {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.sync-attention-detail-grid ol,
.sync-attention-examples ul {
  padding-left: 1.15rem;
}

.sync-attention-detail-grid li + li,
.sync-attention-examples li + li {
  margin-top: 0.3rem;
}

.sync-attention-examples {
  display: grid;
  gap: var(--space-1);
}

.sync-attention-issues {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.sync-attention-issues-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sync-attention-issues-heading h4 {
  color: var(--soft);
}

.sync-attention-issues-heading > span,
.sync-attention-issues-note,
.sync-attention-issue-meta,
.sync-attention-issue-reason,
.sync-attention-issue-unavailable {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.sync-attention-issues-note {
  margin: 0;
}

.sync-attention-issue-list {
  display: grid;
  gap: var(--space-1);
  max-height: 34rem;
  min-width: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.sync-attention-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--panel-3);
}

.sync-attention-match-row > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.sync-attention-match-row > .sync-attention-match-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.sync-attention-match-row--removing {
  pointer-events: none;
  animation: sync-attention-match-removing 760ms ease-in-out infinite alternate;
  will-change: opacity, transform;
}

.sync-attention-match-row--removed {
  opacity: 0;
  transform: translateX(0.6rem) scale(0.985);
  transition: opacity 220ms cubic-bezier(0.25, 1, 0.5, 1), transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes sync-attention-match-removing {
  from { opacity: 0.62; transform: scale(0.995); }
  to { opacity: 0.92; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sync-attention-match-row--removing {
    animation: none;
    opacity: 0.62;
  }

  .sync-attention-match-row--removed {
    transition: none;
  }
}

.sync-attention-match-row strong,
.sync-attention-match-row span {
  overflow-wrap: anywhere;
}

.sync-attention-match-row span {
  color: var(--muted);
  font-size: 0.77rem;
}

.sync-attention-show-group {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--panel-3);
  overflow: hidden;
}

.sync-attention-show-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  background: var(--panel-3);
  transition: background 0.15s ease;
}

.sync-attention-show-header:hover,
.sync-attention-show-header:focus-visible {
  background: var(--panel-2);
}

.sync-attention-show-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sync-attention-show-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}

.sync-attention-show-chevron.is-expanded {
  transform: rotate(90deg);
}

.sync-attention-show-title-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sync-attention-show-title {
  margin: 0;
  color: var(--soft);
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-attention-show-meta {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.sync-attention-show-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.sync-attention-show-episodes {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.sync-attention-show-episodes .sync-attention-issue {
  background: var(--panel-3);
}

.sync-attention-show-terminal {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.sync-attention-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px);
  background: var(--panel-3);
}

.sync-attention-issue-terminal {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg);
}

.sync-attention-issue-terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0.35rem var(--space-2);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.7rem;
}

.sync-attention-issue-terminal-prompt {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.sync-attention-issue-terminal-title {
  color: var(--soft);
  font-weight: 800;
}

.sync-attention-issue-terminal-target {
  overflow: hidden;
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-attention-issue-terminal-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
}

.sync-attention-issue-terminal-state--running {
  color: var(--blue);
}

.sync-attention-issue-terminal-state--success {
  color: var(--green);
}

.sync-attention-issue-terminal-state--error {
  color: var(--red);
}

.sync-attention-issue-terminal-output {
  max-height: 10rem;
  margin: 0;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  color: var(--soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.sync-attention-issue-copy {
  display: grid;
  flex: 1 1 20rem;
  gap: 0.15rem;
  min-width: 0;
}

.sync-attention-issue-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

.sync-attention-issue h4 {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.sync-attention-issue-meta,
.sync-attention-issue-reason {
  overflow-wrap: anywhere;
}

.sync-attention-issue-reason {
  color: var(--soft);
}

.sync-attention-issue-match-guidance {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  border-radius: calc(var(--radius) - 1px);
  background: color-mix(in srgb, var(--yellow) 7%, var(--panel-3));
  color: var(--soft);
  font-size: 0.77rem;
  line-height: 1.45;
}

.sync-attention-issue-match-guidance strong,
.sync-attention-issue-fix-match {
  color: var(--yellow);
}

.sync-attention-issue-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 55%, var(--line));
  border-radius: 999px;
  color: var(--yellow);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-attention-issue-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.sync-attention-issue-actions button,
.sync-attention-issue-actions a {
  min-height: 2rem;
  white-space: nowrap;
}

.sync-attention-issue-skip {
  color: var(--yellow);
}

.sync-attention-issue-unavailable {
  max-width: 15rem;
  text-align: right;
}

.sync-attention-item-footer {
  align-items: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.sync-attention-detected {
  flex: 0 1 auto;
  color: var(--muted);
  font-size: 0.77rem;
}

.sync-attention-actions {
  display: flex;
  flex: 1 1 28rem;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.sync-attention-actions p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
  text-align: right;
}

.sync-attention-actions a {
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}

.sync-attention-skip {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--yellow) 60%, var(--line-strong));
  color: var(--yellow);
  white-space: nowrap;
}

.sync-attention-loading,
.sync-attention-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--soft);
  line-height: 1.4;
}

.sync-attention-error {
  color: var(--red);
}

.sync-activity-search {
  flex: 1 1 18rem;
  max-width: 28rem;
}

.sync-activity-search .field {
  width: 100%;
  min-height: 2.2rem;
}

.sync-activity-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.sync-activity-page-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sync-activity-page-numbers {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sync-activity-page-number {
  min-width: 2rem;
  padding-inline: var(--space-2);
}

.sync-activity-page-number.is-current {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue), transparent 84%);
  color: var(--blue);
  opacity: 1;
}

.sync-activity-page-ellipsis {
  color: var(--muted);
  padding-inline: var(--space-1);
}

.sync-activity-page-label {
  min-width: 5.5rem;
  text-align: center;
  color: var(--soft);
  font-weight: 700;
}

.sync-activity-page-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.sync-activity-page-controls .sync-activity-page-number.is-current:disabled {
  cursor: default;
  opacity: 1;
}

.sync-activity-trakt-progress {
  margin-bottom: var(--space-3);
  font-size: 0.92rem;
}

.sync-activity-current-progress {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 7%, var(--panel-2));
}

.sync-activity-current-progress[data-sync-state="idle"] {
  border-color: var(--line);
  background: var(--panel-2);
}

.sync-activity-current-progress-header,
.sync-activity-current-progress-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.sync-activity-current-progress-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sync-activity-current-progress-kicker {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sync-activity-current-progress-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
}

.sync-activity-current-progress-track {
  position: relative;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 82%, transparent);
}

.sync-activity-current-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 220ms ease;
}

.sync-activity-current-progress[data-indeterminate="true"] .sync-activity-current-progress-fill {
  width: 34%;
  animation: sync-activity-progress-slide 1.2s ease-in-out infinite;
}

.sync-activity-current-progress[data-paused="true"] .sync-activity-current-progress-fill {
  animation-play-state: paused;
}

@keyframes sync-activity-progress-slide {
  0% { transform: translateX(-115%); }
  50% { transform: translateX(190%); }
  100% { transform: translateX(320%); }
}

.sync-activity-current-progress-footer {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.sync-activity-pause-status {
  color: var(--yellow);
}

.sync-activity-row--entering {
  animation: sync-activity-row-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sync-activity-row-enter {
  from { opacity: 0; transform: translateY(-0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sync-activity-current-progress[data-indeterminate="true"] .sync-activity-current-progress-fill,
  .sync-activity-row--entering {
    animation: none;
  }

  .sync-activity-current-progress-fill {
    transition: none;
  }
}

.sync-activity-rows {
  display: grid;
  gap: var(--space-2);
}

.sync-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(18rem, 26rem);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: pointer;
}

.sync-activity-row:hover {
  border-color: var(--line-strong);
}

.sync-activity-row-main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.sync-activity-row-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sync-activity-row-title {
  display: block;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  word-break: break-word;
}

.sync-activity-row-title:hover,
.sync-activity-row-title:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.sync-activity-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sync-activity-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
}

.sync-activity-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--muted);
}

.sync-activity-action {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.sync-activity-row-meta > span + span::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--muted);
}

.sync-activity-row-route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--muted);
}

.sync-activity-route-leg {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.sync-activity-route-leg b {
  color: var(--soft);
  font-weight: 600;
}

.sync-activity-route-arrow {
  opacity: 0.65;
}

.sync-activity-row-detail {
  padding-top: var(--space-1);
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-word;
}

.sync-activity-row-outcome {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}

.sync-activity-outcome-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Target results and the per-item log download share one line. */
.sync-activity-row-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-start;
}

.sync-activity-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Retry feedback, shown inline on the row it came from instead of a toast -
   same tone palette as .status-warning/.status-error/.status-ready above. */
.sync-activity-row-feedback {
  margin-top: var(--space-2);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}

.sync-activity-row-feedback--success {
  border-color: rgba(16, 185, 129, 0.48);
  background: rgba(16, 185, 129, 0.12);
  color: #9ff1cf;
}

.sync-activity-row-feedback--warning {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.sync-activity-row-feedback--error {
  border-color: rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.12);
  color: #fecdd3;
}

.sync-activity-row-feedback--muted {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
}

.sync-activity-target {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.sync-activity-target[data-status="success"] {
  color: var(--green);
}

.sync-activity-target[data-status="error"] {
  color: var(--red);
}

.sync-activity-group-failed-hint,
.sync-activity-row-detail--warning {
  color: var(--red);
}

.sync-activity-target[data-status="pending"] {
  color: var(--yellow);
}

.sync-activity-target--empty {
  line-height: 1.35;
  white-space: normal;
}

.sync-activity-inline-targets {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sync-activity-row-status {
  white-space: nowrap;
}

.sync-activity-download,
.sync-activity-retry {
  white-space: nowrap;
  font-size: 0.81rem;
  padding: 0.3rem 0.6rem;
}

.sync-activity-log {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  max-height: 22rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.sync-activity-log.hidden {
  display: none;
}

@media (max-width: 760px) {
  .sync-attention-heading,
  .sync-attention-item-header,
  .sync-attention-item-footer,
  .sync-attention-error {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-attention-detail-grid {
    grid-template-columns: 1fr;
  }

  .sync-attention-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-attention-actions p {
    max-width: none;
    text-align: left;
  }

  .sync-attention-issue {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .sync-attention-issue-actions {
    align-items: stretch;
    justify-content: stretch;
  }

  .sync-attention-issue-actions button,
  .sync-attention-issue-actions a {
    flex: 1 1 10rem;
    text-align: center;
  }

  .sync-attention-issue-unavailable {
    max-width: none;
    text-align: left;
  }

  .sync-attention-actions button,
  .sync-attention-actions a {
    width: 100%;
  }

  .sync-activity-search {
    flex-basis: 100%;
    max-width: none;
    order: 3;
  }

  .sync-activity-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-activity-page-controls {
    justify-content: space-between;
    overflow-x: auto;
  }

  .sync-activity-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .sync-activity-row-outcome {
    grid-column: 2;
    width: 100%;
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .sync-activity-row-actions {
    justify-content: flex-start;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .sync-activity-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sync-activity-row-outcome {
    grid-column: 2;
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Grouped audit rows keep the page scannable without hiding any audit data. */
.sync-activity-help {
  margin: calc(var(--space-3) * -0.25) 0 var(--space-3);
  color: var(--muted);
  font-size: 0.82rem;
}

.sync-activity-group-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(27rem, 32rem) minmax(12rem, 17rem);
  cursor: pointer;
}

.sync-activity-group-row--awaiting-retry {
  position: relative;
  border-color: color-mix(in srgb, #f59e0b 45%, var(--line));
  background: color-mix(in srgb, #f59e0b 4%, var(--panel-2));
}

.sync-activity-group-row--awaiting-retry::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.16;
  animation: sync-activity-awaiting-retry-tile 1.8s ease-in-out infinite;
}

.sync-activity-group-row--awaiting-retry .sync-status-dot {
  animation: sync-activity-awaiting-retry-pulse 1.8s ease-in-out infinite;
}

.sync-activity-group-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sync-activity-group-main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.sync-activity-group-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sync-activity-group-title {
  font-size: 1rem;
}

.sync-activity-type {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-activity-group-summary {
  color: var(--muted);
  font-size: 0.8rem;
}

.sync-activity-group-latest-detail {
  color: var(--soft);
}

.sync-activity-group-actions {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}

.sync-activity-group-actions-label {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.sync-activity-group-action-buttons {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-1);
}

.sync-activity-group-action-buttons button {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
}

.sync-activity-group-outcome {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}

.sync-activity-group-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  color: var(--muted);
  font-size: 0.78rem;
}

.sync-activity-group-count-labels {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sync-activity-group-issue-count {
  color: var(--red);
}

.sync-activity-group-counts .sync-activity-download {
  flex: 0 0 auto;
  margin-left: auto;
}

.sync-activity-group-detail {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  cursor: default;
}

.sync-activity-group-detail.hidden {
  display: none;
}

.sync-activity-current-issues,
.sync-activity-current-results {
  display: grid;
  gap: var(--space-2);
}

.sync-activity-current-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--soft);
  font-size: 0.82rem;
}

.sync-activity-current-section-heading span {
  color: var(--muted);
  font-size: 0.78rem;
}

.sync-activity-current-issue-list {
  display: grid;
  gap: var(--space-2);
}

.sync-activity-current-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--red) 48%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 5%, var(--panel-3));
}

.sync-activity-current-issue--no-actions {
  grid-template-columns: minmax(0, 1fr);
}

.sync-activity-current-issue-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.sync-activity-current-issue-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--soft);
  font-size: 0.88rem;
}

.sync-activity-current-issue-heading strong {
  color: var(--red);
  font-weight: 800;
}

.sync-activity-current-issue-heading time {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.sync-activity-current-issue-title {
  max-width: 100%;
  font-size: 0.95rem;
}

.sync-activity-current-issue-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.sync-activity-current-issue-cause {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--soft);
  font-size: 0.8rem;
}

.sync-activity-current-issue-cause > span:first-child,
.sync-activity-current-issue-label {
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-activity-current-issue-results {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sync-activity-target-results--detailed {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sync-activity-target--detailed {
  display: grid;
  grid-template-columns: minmax(7rem, auto) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  white-space: normal;
  line-height: 1.4;
}

.sync-activity-target-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--soft);
  font-weight: 700;
}

.sync-activity-target-status {
  font-weight: 800;
}

.sync-activity-target-detail {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.sync-activity-current-issue-explanation {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sync-activity-current-issue-actions {
  align-self: start;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}

.sync-activity-current-issue-actions-label {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.sync-activity-current-issue-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.sync-activity-current-issue-action-buttons button {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
}

.sync-activity-current-other-results {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.sync-activity-current-other-results > summary,
.sync-activity-history-disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--soft);
  cursor: pointer;
  list-style: none;
}

.sync-activity-current-other-results > summary::-webkit-details-marker,
.sync-activity-history-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sync-activity-current-other-results > summary::before,
.sync-activity-history-disclosure > summary::before {
  content: "+";
  color: var(--muted);
  font-weight: 800;
}

.sync-activity-current-other-results[open] > summary::before,
.sync-activity-history-disclosure[open] > summary::before {
  content: "−";
}

.sync-activity-current-other-results > summary span,
.sync-activity-history-disclosure > summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.sync-activity-current-result-list {
  display: grid;
  gap: var(--space-1);
}

.sync-activity-current-result {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) minmax(10rem, auto) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.sync-activity-current-result strong {
  min-width: 0;
  color: var(--soft);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.sync-activity-current-result-time {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.sync-activity-history-disclosure {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-3) 72%, var(--panel-2));
  overflow: hidden;
}

.sync-activity-history-disclosure > summary {
  padding: var(--space-2) var(--space-3);
}

.sync-activity-history-disclosure > summary:hover,
.sync-activity-history-disclosure > summary:focus-visible,
.sync-activity-current-other-results > summary:hover,
.sync-activity-current-other-results > summary:focus-visible {
  background: color-mix(in srgb, var(--panel-2), transparent 20%);
}

.sync-activity-history-body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--line);
}

.sync-activity-history-placeholder {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  color: var(--muted);
  font-size: 0.78rem;
}

.sync-activity-history-placeholder b {
  color: var(--soft);
}

.sync-activity-group-detail-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--soft);
  font-size: 0.82rem;
}

.sync-activity-group-detail-heading span {
  color: var(--muted);
}

.sync-activity-dismiss,
.sync-activity-dismiss-show {
  color: var(--yellow);
}

.sync-activity-event-list {
  display: grid;
  gap: var(--space-1);
}

.sync-activity-event {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-3);
}

.sync-activity-event--awaiting-retry {
  border-color: color-mix(in srgb, #f59e0b 45%, var(--line));
}

.sync-activity-event--awaiting-retry > summary {
  background: color-mix(in srgb, #f59e0b 6%, transparent);
}

.sync-activity-event--awaiting-retry .sync-status-dot {
  animation: sync-activity-awaiting-retry-pulse 1.8s ease-in-out infinite;
}

.sync-activity-row-detail--awaiting-retry {
  color: var(--yellow);
}

@keyframes sync-activity-awaiting-retry-pulse {
  0%, 100% {
    opacity: 0.68;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes sync-activity-awaiting-retry-tile {
  0%, 100% {
    opacity: 0.16;
  }

  50% {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-activity-group-row--awaiting-retry::after {
    animation: none;
    opacity: 0.42;
  }

  .sync-activity-group-row--awaiting-retry .sync-status-dot,
  .sync-activity-event--awaiting-retry .sync-status-dot {
    animation: none;
  }
}

.sync-activity-event > summary {
  display: grid;
  grid-template-columns: auto auto minmax(8rem, auto) minmax(8rem, auto) minmax(8rem, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--soft);
  cursor: pointer;
  list-style: none;
}

.sync-activity-event > summary::-webkit-details-marker {
  display: none;
}

.sync-activity-event > summary::before {
  content: "+";
  grid-column: 1;
  color: var(--muted);
  font-weight: 700;
}

.sync-activity-event[open] > summary::before {
  content: "−";
}

.sync-activity-event > summary > .sync-status-dot { grid-column: 2; }
.sync-activity-event > summary > strong { grid-column: 3; }
.sync-activity-event > summary > .sync-activity-inline-targets { grid-column: 4; }
.sync-activity-event > summary > .sync-activity-event-source { grid-column: 5; }
.sync-activity-event > summary > .sync-activity-event-time { grid-column: 6; }
.sync-activity-event > summary > .status-pill { grid-column: 7; }

.sync-activity-event > summary:hover,
.sync-activity-event > summary:focus-visible {
  background: color-mix(in srgb, var(--panel-2), transparent 20%);
}

.sync-activity-event-source,
.sync-activity-event-time {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.sync-activity-event-time {
  justify-content: flex-end;
}

.sync-activity-event-body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
  border-top: 1px solid var(--line);
}

.sync-activity-event-body .sync-activity-row-actions {
  justify-content: flex-start;
}

.sync-activity-event-body .sync-activity-log {
  max-height: 16rem;
}

.sync-activity-group-more {
  margin-top: var(--space-2);
}

@media (max-width: 1100px) {
  .sync-activity-group-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sync-activity-group-actions {
    grid-column: 2;
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .sync-activity-group-outcome {
    grid-column: 2;
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .sync-activity-event > summary {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .sync-activity-event > summary::before { grid-column: 1; grid-row: 1 / span 3; }
  .sync-activity-event > summary > .sync-status-dot { grid-column: 2; grid-row: 1 / span 3; }
  .sync-activity-event > summary > strong { grid-column: 3; grid-row: 1; min-width: 0; }

  .sync-activity-event > summary > .sync-activity-inline-targets {
    grid-column: 3;
    grid-row: 2;
  }

  .sync-activity-event-source {
    grid-column: 3 !important;
    grid-row: 3;
  }

  .sync-activity-event-time {
    grid-column: 4 !important;
    grid-row: 1 / span 3;
  }

  .sync-activity-event > summary .status-pill {
    grid-column: 3 !important;
    grid-row: 4;
    justify-self: start;
  }

  .sync-activity-group-action-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-activity-group-action-buttons button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .sync-activity-current-issue {
    grid-template-columns: minmax(0, 1fr);
  }

  .sync-activity-current-issue-actions {
    grid-column: 1 / -1;
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .sync-activity-current-issue-header {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-activity-target--detailed {
    grid-template-columns: minmax(6.5rem, auto) auto;
  }

  .sync-activity-target-detail {
    grid-column: 1 / -1;
  }

  .sync-activity-current-result {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sync-activity-current-result .sync-activity-inline-targets {
    grid-column: 2;
    grid-row: 2;
  }

  .sync-activity-current-result-time {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .sync-activity-current-result .status-pill {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }
}

/* Popup surfaces sit above the page content. The dark theme deliberately
   uses translucent glass for ordinary panels, but that treatment lets cards
   show through menus and dialogs. Give popup containers an opaque surface
   while leaving the light theme and the full-screen immersive view unchanged. */
html:not(.light-mode) #globalSearchDropdown,
html:not(.light-mode) .modal-panel.glass-panel:not(.modal-panel--immersive),
html:not(.light-mode) .edit-dialog.glass-panel,
html:not(.light-mode) .media-info-panel.glass-panel,
html:not(.light-mode) .settings-modal,
html:not(.light-mode) .personal-media-dialog {
  background: var(--panel-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.light-mode) #globalSearchDropdown .gsd-columns,
html:not(.light-mode) #globalSearchDropdown .global-search-result,
html:not(.light-mode) #globalSearchDropdown .gsd-more {
  background: var(--panel-3);
}

html:not(.light-mode) #globalSearchDropdown .gsd-column-header {
  background: #111820;
}

html:not(.light-mode) #globalSearchDropdown .global-search-result:hover,
html:not(.light-mode) #globalSearchDropdown .global-search-result:focus,
html:not(.light-mode) #globalSearchDropdown .gsd-more:hover,
html:not(.light-mode) #globalSearchDropdown .gsd-more:focus {
  background: #151d26;
}

/* Final mobile shell corrections ----------------------------------------- *
 * The shared topbar keeps every page's control source in the DOM so the
 * desktop shell can move the active group into place. On narrow screens a
 * later generic .explorer-controls rule was overriding .hidden and making
 * inactive groups participate in the flex layout. Keep inactive sources out
 * of the mobile topbar, then let the active groups use the full content
 * column. These rules are intentionally mobile-only so desktop sizing stays
 * unchanged. */
@media (max-width: 760px) {
  body .page-topbar-actions > .hidden {
    display: none !important;
  }

  body .topnav.nav-open {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(19rem, 84vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-right: 1px solid var(--line-strong) !important;
    border-bottom: 0 !important;
    box-shadow: 16px 0 42px rgba(0, 0, 0, 0.28);
    z-index: 500 !important;
    animation: mobile-nav-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  body .topnav.nav-open .brand-search {
    padding: 0.45rem 0.55rem;
    gap: 0.35rem;
  }

  body .topnav.nav-open .global-search {
    margin-top: 0.2rem;
  }

  body .topnav.nav-open .nav-tab {
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.9rem;
  }

  body .topnav.nav-open .sidebar-footer {
    padding-top: 0.45rem;
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
  }

  body .page-shell[data-active-view="dashboard"] .dashboard-history-panel .dashboard-row-section {
    flex: 0 0 auto;
    min-height: 0;
  }

  body .page-shell[data-active-view="dashboard"] .dashboard-history-panel .dashboard-row-section .horizontal-scroll-row {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
  }

  body .setup-brand-logo {
    width: min(100%, 34rem);
    max-width: 100%;
    height: auto;
    max-height: 5.5rem;
  }

  body .sync-activity-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  body .sync-activity-header-actions #syncActivitySummary {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body .sync-activity-header-actions > button {
    min-width: 0;
  }

  body .page-topbar-actions .discover-controls:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: var(--space-2) !important;
  }

  body .page-topbar-actions .discover-controls:not(.hidden) .compact-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--space-1) !important;
    flex: 1 1 auto !important;
  }

  body .page-topbar-actions .discover-controls:not(.hidden) .compact-field input,
  body .page-topbar-actions .discover-controls:not(.hidden) .compact-field select {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .page-topbar-actions .discover-controls:not(.hidden) #discoverRefreshButton {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .personal-media-list-viewport {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body .personal-media-list-section,
  body .personal-media-list-heading,
  body .personal-media-list-row {
    width: 100%;
    min-width: 0;
  }
}

@keyframes mobile-nav-enter {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  body .topnav.nav-open { animation-duration: 1ms; }
}

/* The same full-card/poster control is available on library and media pages.
   Compact mode only changes card presentation; each page's current view and
   filters stay selected. */
.page-card-mode-compact :is(.discover-feed-row, .personal-media-card-grid, .personal-media-list-row) > .shared-media-card:not(.page-card-open) {
  flex-direction: column;
  flex-basis: 10rem;
  width: 10rem;
  padding: 0;
  gap: 0;
}

.page-card-mode-compact :is(.discover-feed-row, .personal-media-card-grid, .personal-media-list-row) > .shared-media-card:not(.page-card-open) .shared-media-card-poster-wrap {
  flex-basis: auto;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 0;
}

.page-card-mode-compact :is(.discover-feed-row, .personal-media-card-grid, .personal-media-list-row) > .shared-media-card:not(.page-card-open) .shared-media-card-body {
  display: none;
}

.page-card-mode-compact .explorer-overview-view {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
}

.page-card-mode-compact .explorer-overview-card:not(.page-card-open) {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
}

.page-card-mode-compact .explorer-overview-card:not(.page-card-open) > :is(.overview-thumb-poster, .overview-show-poster-btn) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.page-card-mode-compact .explorer-overview-card:not(.page-card-open) > .overview-card-meta {
  display: none;
}

.page-card-mode-compact .explorer-list-view {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  gap: 0.65rem;
  overflow: visible;
  border: 0;
  justify-content: space-between;
}

.page-card-mode-compact .explorer-list-header {
  display: none;
}

.page-card-mode-compact .explorer-list-card:not(.page-card-open) {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 2 / 3;
}

.page-card-mode-compact .explorer-list-card:not(.page-card-open) > :not(.list-thumb-poster) {
  display: none;
}

.page-card-mode-compact .explorer-list-card:not(.page-card-open) > .list-thumb-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.page-card-mode-compact .history-list .history-page-card:not(.page-card-open) {
  aspect-ratio: 2 / 3;
  min-width: 0;
}

.page-card-mode-compact .history-list {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
}

.page-card-mode-compact .history-grid-view {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
}

.page-card-mode-compact .history-list .history-page-card:not(.page-card-open) > .history-card-details {
  display: none;
}

.page-card-mode-compact .history-list .history-page-card:not(.page-card-open) > .history-card-poster-wrapper {
  flex: 0 0 100%;
  width: 100%;
}

.page-card-mode-compact .history-grid-view .history-grid-card:not(.page-card-open) .history-grid-copy,
.page-card-mode-compact .history-list .history-list-header,
.page-card-mode-compact .history-table-view .history-list-header,
.page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) > :not(.history-list-poster) {
  display: none;
}

.page-card-mode-compact .history-table-view {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  gap: 0.65rem;
  border: 0;
  overflow: visible;
  justify-content: space-between;
}

.page-card-mode-compact .history-list-row:not(.page-card-open) {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 2 / 3;
}

.page-card-mode-compact .history-list-row:not(.page-card-open) > .history-list-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

/* Run cards on History are folded records, not visual poster stacks. */
#history-view .dashboard-collapsed-run-card {
  box-shadow: none !important;
  margin-right: 0 !important;
}

#history-view .dashboard-run-expanded {
  box-shadow: none !important;
}

/* Mobile media rails ----------------------------------------------------- *
 * Dashboard media rows use a compact, poster-first tile that exposes the
 * next card at the right edge. Keep the same geometry on the other media
 * views so a page entry never turns into a desktop-width card stack on a
 * phone. These rules intentionally stay below the desktop card system and
 * are limited to the mobile breakpoint. */
@media (max-width: 760px) {
  .page-shell[data-active-view="discover"],
  .page-shell[data-active-view="watchlist"],
  .page-shell[data-active-view="ratings"],
  .page-shell[data-active-view="playlists"],
  .page-shell[data-active-view="history"] {
    --mobile-dashboard-card-width: clamp(128px, 40vw, 176px);
  }

  .page-shell[data-active-view="discover"] .discover-feed-row,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid,
  .page-shell[data-active-view="playlists"] .personal-media-list-row,
  .page-shell[data-active-view="history"] .history-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-3);
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.55rem 0.2rem;
    scroll-padding-inline: 0.2rem;
    overscroll-behavior-inline: contain;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal,
  .page-shell[data-active-view="history"] .history-list .history-page-card {
    box-sizing: border-box;
    width: var(--mobile-dashboard-card-width);
    min-width: 0;
    flex: 0 0 var(--mobile-dashboard-card-width);
    align-self: stretch;
    scroll-snap-align: start;
  }

  /* Discover and personal cards share the dashboard's poster-first stack on
     mobile. The information/action area remains inside the tile instead of
     being pushed off the right edge of a desktop-style horizontal card. */
  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover .shared-media-card-poster-wrap,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal .shared-media-card-poster-wrap,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-poster-wrap,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-poster-wrap {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: none;
    align-self: stretch;
    aspect-ratio: 2 / 3;
    border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover .shared-media-card-poster,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal .shared-media-card-poster,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-poster,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-poster {
    border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover .shared-media-card-body,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal .shared-media-card-body,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-body,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-body {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0.5rem;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover .shared-media-card-actions,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal .shared-media-card-actions,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-actions,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: auto;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row .shared-media-card--discover .shared-media-card-actions button,
  .page-shell[data-active-view="playlists"] .personal-media-list-row .shared-media-card--personal .shared-media-card-actions button,
  .page-shell[data-active-view="watchlist"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-actions button,
  .page-shell[data-active-view="ratings"] .personal-media-card-grid .shared-media-card--personal .shared-media-card-actions button {
    min-width: 0;
    width: 100%;
    padding-inline: 0.25rem;
    font-size: 0.68rem;
  }

  .page-shell[data-active-view="discover"] .discover-feed-row {
    min-height: 0;
  }

  /* History uses the same tile geometry as the dashboard rows. Keep the
     existing history details, but put them below the poster and let the
     complete list browse horizontally on a narrow screen. */
  .page-shell[data-active-view="history"] .history-list .history-page-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .page-shell[data-active-view="history"] .history-list .history-page-card > .history-card-poster-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 2 / 3;
    border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  }

  .page-shell[data-active-view="history"] .history-list .history-page-card > .history-card-poster-wrapper .history-card-poster-link {
    border-radius: var(--poster-radius) var(--poster-radius) 0 0;
  }

  .page-shell[data-active-view="history"] .history-list .history-page-card > .history-card-details {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 0.5rem;
  }

  .page-shell[data-active-view="history"] .history-list .history-card-title {
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .page-shell[data-active-view="history"] .history-list .history-card-episode,
  .page-shell[data-active-view="history"] .history-list .history-card-meta,
  .page-shell[data-active-view="history"] .history-list .meta-label {
    font-size: var(--fs-card-label);
  }
}

/* Keep the shared page controls in the same mobile flow as the collapsed
   navigation. The old topbar breakpoint was 640px, so the 641-760px range
   could still squeeze page controls into the desktop title row. */
@media (max-width: 760px) {
  body .page-topbar {
    height: auto;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) var(--control-inline-padding);
  }

  body .page-topbar-title {
    width: 100%;
    justify-content: flex-start;
  }

  body .page-topbar-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 2px;
  }

  body .page-topbar-actions::-webkit-scrollbar {
    display: none;
  }
}
/* Manual Watch review page */
.manual-watch-review-page {
  min-width: 0;
}

.manual-watch-review-rows {
  display: grid;
  gap: var(--space-3);
}

.manual-watch-review-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.manual-watch-review-toolbar-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-height: 1.9rem;
  text-align: right;
}

.manual-watch-review-search-field {
  width: min(100%, 28rem);
  min-width: min(100%, 18rem);
}

.manual-watch-review-search-field input {
  min-width: 0;
}

.manual-watch-review-filter-status {
  margin: 0;
  white-space: nowrap;
}

.manual-watch-review-card {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--yellow) 38%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow) 4%, var(--panel-2));
  transition: opacity 160ms ease, border-color 160ms ease;
}

.manual-watch-review-card.is-busy {
  opacity: 0.6;
}

.manual-watch-review-poster-wrap {
  flex: 0 0 clamp(7.5rem, 12vw, 10rem);
  width: clamp(7.5rem, 12vw, 10rem);
  align-self: flex-start;
  aspect-ratio: 2 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-3, var(--panel-2));
  border-radius: var(--poster-radius, 8px) 0 0 var(--poster-radius, 8px);
}

.manual-watch-review-poster-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.manual-watch-review-poster {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0;
  background: var(--panel-3, var(--panel-2));
}

.manual-watch-review-poster--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1.4rem;
}

.manual-watch-review-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
}

.manual-watch-review-heading,
.manual-watch-review-meta,
.manual-watch-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.manual-watch-review-heading {
  justify-content: space-between;
  align-items: flex-start;
}

.manual-watch-review-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.manual-watch-review-title-link {
  color: inherit;
  text-decoration: none;
}

.manual-watch-review-title-link:hover,
.manual-watch-review-title-link:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.manual-watch-review-episode {
  margin: 0.25rem 0 0;
  color: var(--soft);
  font-size: 0.8rem;
}

.manual-watch-review-meta {
  color: var(--muted);
  font-size: 0.74rem;
}

.manual-watch-review-meta > span + span::before {
  content: "•";
  margin-right: var(--space-2);
  color: var(--line-strong);
}

.manual-watch-review-episode-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.manual-watch-review-copy {
  max-width: 72rem;
  margin: 0;
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.manual-watch-review-actions {
  margin-top: 0.15rem;
}

.manual-watch-review-actions button {
  min-height: 2rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.76rem;
}

.manual-watch-review-show {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--yellow) 38%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow) 4%, var(--panel-2));
  transition: opacity 160ms ease, border-color 160ms ease;
}

.manual-watch-review-show.is-busy {
  opacity: 0.6;
}

.manual-watch-review-card.is-busy,
.manual-watch-review-show.is-busy,
.manual-watch-review-episode-row.is-busy {
  pointer-events: none;
  animation: manual-watch-review-saving-pulse 950ms cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
  will-change: opacity, transform;
}

@keyframes manual-watch-review-saving-pulse {
  0%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.62;
    transform: translate3d(0, 1px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .manual-watch-review-card.is-busy,
  .manual-watch-review-show.is-busy,
  .manual-watch-review-episode-row.is-busy {
    animation: none;
    opacity: 0.7;
    transform: none;
    will-change: auto;
  }
}

.manual-watch-review-show-poster-wrap {
  width: 100%;
  border-radius: var(--poster-radius, 8px);
}

.manual-watch-review-show-content {
  grid-column: 2;
  min-width: 0;
  padding: 0;
}

.manual-watch-review-show-header {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: 0;
}

.manual-watch-review-show-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.35rem;
  min-width: 0;
}

.manual-watch-review-show-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.manual-watch-review-show-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.manual-watch-review-show-actions button {
  min-height: 2rem;
}

.manual-watch-review-season-list {
  display: grid;
  gap: 0;
}

.manual-watch-review-season {
  min-width: 0;
  padding: 0;
}

.manual-watch-review-season + .manual-watch-review-season {
  margin-top: var(--space-2);
}

.manual-watch-review-season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.manual-watch-review-season-heading {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.manual-watch-review-season-heading strong {
  color: var(--text);
  font-size: 0.86rem;
}

.manual-watch-review-season-heading span {
  color: var(--muted);
  font-size: 0.74rem;
}

.manual-watch-review-season-actions {
  flex: 0 1 auto;
  margin-left: auto;
  justify-content: flex-end;
}

.manual-watch-review-season-details {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2), transparent 92%);
}

.manual-watch-review-season-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  list-style: none;
}

.manual-watch-review-season-details[open] > summary {
  border-bottom: 1px solid var(--line-strong);
}

.manual-watch-review-season-details > summary::-webkit-details-marker {
  display: none;
}

.manual-watch-review-season-details > summary::after {
  content: "⌄";
  margin-left: var(--space-2);
  color: var(--yellow);
  font-size: 0.95rem;
  flex: 0 0 auto;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.manual-watch-review-season-details[open] > summary::after {
  transform: rotate(180deg) translateY(-1px);
}

.manual-watch-review-season-content {
  padding: 0 var(--space-4) var(--space-3);
}

.manual-watch-review-episodes {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  min-width: 0;
  padding: 0;
}

.manual-watch-review-episodes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.7rem 0 0.15rem;
  color: var(--soft);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.manual-watch-review-episodes > summary::-webkit-details-marker {
  display: none;
}

.manual-watch-review-episodes > summary::after {
  content: "⌄";
  margin-left: auto;
  color: var(--yellow);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.manual-watch-review-episodes[open] > summary::after {
  transform: rotate(180deg) translateY(-1px);
}

.manual-watch-review-episode-list {
  display: grid;
  gap: 0;
}

.manual-watch-review-episode-row {
  display: block;
  min-width: 0;
  padding: var(--space-3) 0 0;
  margin-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.manual-watch-review-episode-row:first-child {
  padding-top: var(--space-3);
  margin-top: 0;
  border-top: 0;
}

.manual-watch-review-episode-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.manual-watch-review-episode-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.manual-watch-review-episode-meta > span {
  min-width: 0;
}

.manual-watch-review-episode-status {
  font-size: 0.7rem;
  line-height: 1.25;
}

.manual-watch-review-episode-event {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 700;
}

.manual-watch-review-episode-event--unknown {
  color: var(--muted);
  font-weight: 600;
}

.manual-watch-review-episode-event--watched {
  color: var(--green);
}

.manual-watch-review-episode-event .source-badge {
  gap: 0.3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.manual-watch-review-episode-event .source-badge-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.manual-watch-review-episode-row.is-pending {
  padding-bottom: var(--space-2);
}

.manual-watch-review-episode-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.manual-watch-review-episode-heading h4 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.manual-watch-review-episode-release {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.manual-watch-review-episode-release::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--line-strong);
}

.manual-watch-review-episode-code {
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.manual-watch-review-episode-actions {
  justify-content: flex-start;
  margin-top: 0.15rem;
}

.manual-watch-review-episode-actions button {
  min-height: 1.9rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
}

.manual-watch-review-episode-actions.manual-watch-review-inline-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0;
}

.manual-watch-review-episode-actions.manual-watch-review-inline-actions button {
  min-height: 1.65rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
}

html.light-mode .manual-watch-review-card {
  background: color-mix(in srgb, var(--yellow) 6%, var(--panel-2));
}

html.light-mode .manual-watch-review-show {
  background: color-mix(in srgb, var(--yellow) 6%, var(--panel-2));
}

html.light-mode .manual-watch-review-season {
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  .manual-watch-review-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-watch-review-search-field {
    width: 100%;
    min-width: 0;
  }

  .manual-watch-review-filter-status {
    align-self: flex-start;
  }

  .manual-watch-review-toolbar-status {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 0;
    text-align: left;
  }

  .manual-watch-review-card {
    align-items: flex-start;
  }

  .manual-watch-review-card > .manual-watch-review-poster-wrap,
  .manual-watch-review-show-poster-wrap {
    flex-basis: 5.6rem;
    width: 5.6rem;
  }

  .manual-watch-review-poster {
    min-height: 0;
  }

  .manual-watch-review-main,
  .manual-watch-review-show-content {
    padding: var(--space-2);
  }

  .manual-watch-review-show {
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .manual-watch-review-show-content {
    grid-column: 2;
    padding: 0;
  }

  .manual-watch-review-episodes {
    padding: 0;
  }

  .manual-watch-review-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-watch-review-actions button {
    width: 100%;
  }

  .manual-watch-review-show-header {
    align-items: stretch;
    flex-direction: column;
    padding: 0;
  }

  .manual-watch-review-episodes {
    grid-column: 1 / -1;
    padding-top: var(--space-2);
  }

  .manual-watch-review-show-actions,
  .manual-watch-review-season-actions,
  .manual-watch-review-episode-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-watch-review-show-actions button,
  .manual-watch-review-season-actions button,
  .manual-watch-review-episode-actions button {
    width: 100%;
  }

  .manual-watch-review-episode-actions.manual-watch-review-inline-actions {
    align-items: center;
    flex-direction: row;
  }

  .manual-watch-review-episode-actions.manual-watch-review-inline-actions button {
    width: auto;
  }

  .manual-watch-review-season-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Mobile control bar final corrections ----------------------------------
   The controls menu is retired while the active control group is mounted
   inline. Its legacy ID rule above otherwise outranks the shared .hidden
   utility. Keep the mobile tab strip usable across the full mobile range. */
@media (max-width: 760px) {
  body #topbarControlsMenu.hidden {
    display: none !important;
  }

  /* Route changes move each page's controls into the shared topbar. Some of
     the older page-specific rules use !important for their active layout, so
     keep an explicit inactive-state guard at the end of the mobile rules. */
  body .page-topbar-actions > .hidden,
  body .page-topbar-actions > .view-control-source.hidden,
  body #upcomingTopbarControls.hidden,
  body .explorer-controls.hidden {
    display: none !important;
  }

  body .mobile-controls-row {
    align-items: stretch !important;
    min-height: 3.5rem !important;
    overflow: hidden !important;
  }

  body .mobile-controls-row .mobile-control-tab {
    min-height: 3rem !important;
    padding: 0.35rem 0.15rem !important;
    gap: 0.2rem !important;
  }

  body .mobile-controls-row .mobile-control-tab span {
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.15 !important;
  }
}

/* About product page ------------------------------------------------------
   Keep the top-level product page information-dense and local to the
   existing application shell instead of turning it into a marketing page. */
.about-page-row .settings-row-main {
  flex: 0 1 min(100%, 70rem);
  width: min(100%, 70rem);
  margin-inline: auto;
}

.settings-pane .about-page-card {
  padding: 0 !important;
  overflow: hidden;
}

/* The centred About card uses the left menu's colour in both themes. The About
   page is its own view (#about-view), not a Settings route, so the card is not
   under #settings-view and the shared Settings depth rules do not reach it. */
#about-view .about-page-card {
  background: var(--brand-menu) !important;
}

.settings-pane .about-page-card > .about-page-inner {
  display: grid;
  gap: clamp(var(--space-5), 3vw, var(--space-6));
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(var(--space-4), 3vw, 2.25rem) !important;
}

.about-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-4);
  width: min(100%, 60rem);
  margin-inline: auto;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.about-page-intro-copy {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 48rem;
}

.about-page-intro h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.about-page-intro p,
.about-section-head p,
.about-trust-note p {
  max-width: 72ch;
  margin: 0;
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.about-page-brand {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
}

.about-page-brand-logo {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  aspect-ratio: 1260 / 205;
}

.about-page-tagline {
  max-width: 42rem !important;
  color: var(--soft) !important;
  font-size: 0.98rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45 !important;
}

.about-build-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}

.about-build-line strong {
  color: var(--text);
  font-weight: 750;
}

.about-build-separator {
  color: var(--line-strong);
}

.about-fact-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.about-fact-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 34rem);
  margin-inline: auto;
}

.about-fact {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  background: var(--panel-3);
}

.about-fact dt {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-fact dd {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.about-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.about-section-head {
  display: grid;
  gap: var(--space-1);
}

.about-section-head h3,
.about-trust-note h3,
.about-resources h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.about-capability-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface), transparent 18%);
}

.about-capability-group h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 750;
}

.about-detail-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-detail-list li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-left: 1rem;
}

.about-detail-list li::before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.about-detail-list strong,
.about-integration-name strong,
.about-flow-step strong {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 750;
}

.about-detail-list span,
.about-integration-name span,
.about-flow-step span,
.about-integration-row p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.about-integration-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.about-integration-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.05fr) minmax(14rem, 1.45fr) minmax(15rem, 2fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--panel-3);
}

.about-integration-row:first-child {
  border-top: 0;
}

html.light-mode .about-fact,
html.light-mode .about-capability-group,
html.light-mode .about-integration-row {
  background: var(--panel-2);
}

.about-integration-name {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.about-integration-name span {
  overflow-wrap: anywhere;
}

.about-integration-row p {
  margin: 0;
}

.about-integration-kind {
  justify-self: end;
  color: var(--accent) !important;
  font-size: 0.7rem !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35 !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-strong);
}

.about-flow-number {
  color: var(--accent) !important;
  font-size: 0.76rem !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.about-flow-step div {
  display: grid;
  gap: 0.2rem;
}

.about-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
  gap: var(--space-3);
  width: min(100%, 62rem);
  margin-inline: auto;
}

.about-trust-note,
.about-resources {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  width: min(100%, 62rem);
  margin-inline: auto;
  padding: 0;
}

.about-trust-note {
  background: color-mix(in srgb, var(--accent), transparent 93%);
}

.about-resources-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.about-resources-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.about-resource-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.about-resource-actions .sync-tool-button {
  white-space: nowrap;
}

.about-share-status {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: nowrap;
}

.about-trust-note p + p {
  margin-top: var(--space-1);
}

.about-resource-links {
  min-width: 0;
}

.about-link-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-link-list a {
  display: grid;
  gap: var(--space-1);
  height: 100%;
  padding: 0;
  color: var(--text);
  text-decoration: none;
}

.about-link-list a span {
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 750;
}

.about-link-list a small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.about-link-list a:hover span,
.about-link-list a:focus-visible span {
  color: var(--text);
  text-decoration: underline;
}

.about-attribution {
  width: min(100%, 62rem);
  margin: 0 auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: center;
}

.about-attribution strong {
  color: var(--soft);
  font-weight: 750;
}

.about-release-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.about-release-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.about-release-head > button {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .about-fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-integration-row {
    grid-template-columns: minmax(10rem, 0.95fr) minmax(12rem, 1.4fr) auto;
  }

  .about-integration-row p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .about-fact-grid-compact {
    grid-template-columns: 1fr;
  }

  .about-page-intro {
    gap: var(--space-4);
  }

  .about-page-brand {
    justify-items: center;
  }

  .about-resources-head {
    flex-direction: column;
  }

  .about-resource-actions {
    justify-content: flex-start;
  }

  .about-capability-grid,
  .about-flow,
  .about-trust-grid {
    grid-template-columns: 1fr;
  }

  .about-integration-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .about-integration-row p {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-release-head {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .about-fact-grid {
    grid-template-columns: 1fr;
  }

  .about-fact dt {
    white-space: normal;
  }
}

.about-share-modal {
  width: min(42rem, calc(100vw - (2 * var(--space-4))));
  max-height: min(42rem, calc(100vh - (2 * var(--space-4))));
  padding: var(--space-5);
  gap: var(--space-4);
}

.about-share-modal .modal-head > div {
  display: grid;
  gap: var(--space-1);
}

.about-share-modal .modal-head h2 {
  margin: 0;
}

.about-share-modal-copy {
  margin: 0;
  color: var(--soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.about-share-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about-share-option {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.about-share-option.button-primary {
  border: 0;
  background: transparent;
  color: var(--blue);
}

.about-share-option.button-ghost {
  border: 0;
  background: transparent;
}

.about-share-option:hover,
.about-share-option:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent), transparent 94%);
  color: var(--text);
  text-decoration: none;
  transform: none;
}

.about-share-option-copy {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  min-width: 0;
}

.about-share-option-copy strong {
  color: inherit;
  font-size: 0.84rem;
  font-weight: 750;
}

.about-share-option-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.about-share-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

html.light-mode .about-share-option,
html.light-mode .about-share-option.button-ghost,
html.light-mode .about-share-option.button-primary {
  background: transparent;
}

@media (max-width: 560px) {
.about-share-modal {
  padding: var(--space-4);
}

}

/* Tautulli importer flow */
.tautulli-import-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tautulli-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-3) 78%, transparent);
}
.tautulli-step-marker {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
  border-radius: 50%;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 800;
}
.tautulli-step-content { min-width: 0; }
.tautulli-step-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.tautulli-step-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
}
.tautulli-step-heading p,
.tautulli-target-help,
.tautulli-step-note {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.tautulli-import-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tautulli-targets {
  min-width: 0;
  margin: 0;
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.tautulli-targets legend {
  padding: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}
.tautulli-target-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.tautulli-target-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-2) 76%, transparent);
  cursor: pointer;
}
.tautulli-target-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--panel-2));
}
.tautulli-target-option input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--blue);
}
.tautulli-target-option span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}
.tautulli-target-option strong {
  color: var(--text);
  font-size: 0.8rem;
}
.tautulli-target-option small {
  color: var(--muted);
  font-size: 0.7rem;
}
.tautulli-field-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}
.tautulli-action-hint {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
.tautulli-preview-message {
  margin: 0;
  max-width: 80ch;
}

.tautulli-preview-message.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tautulli-preview-message.is-loading::before,
.tautulli-import-status.is-loading::before {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: tautulli-preview-spin 0.8s linear infinite;
}

.tautulli-preview-progress {
  height: 0.45rem;
  overflow: hidden;
  margin-top: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.tautulli-preview-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
  transition: width 180ms ease;
}

.tautulli-preview-progress.is-indeterminate .tautulli-preview-progress-bar {
  width: 35%;
  animation: tautulli-preview-progress-slide 1.2s ease-in-out infinite alternate;
}

.tautulli-preview-progress-text {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.tautulli-preview-actions,
.tautulli-operation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.tautulli-preview-actions {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.tautulli-preview-actions b {
  color: var(--text);
  font-size: 0.84rem;
}

.tautulli-preview-actions p {
  margin: 0.2rem 0 0;
}

.tautulli-operation-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tautulli-operation-progress {
  height: 0.45rem;
  overflow: hidden;
  margin-top: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.tautulli-operation-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 180ms ease;
}

.tautulli-operation-progress.is-indeterminate .tautulli-operation-progress-bar {
  width: 35%;
  animation: tautulli-preview-progress-slide 1.2s ease-in-out infinite alternate;
}

.tautulli-operation-progress.is-complete .tautulli-operation-progress-bar {
  background: var(--green, #22c55e);
}

.tautulli-operation-progress.is-error .tautulli-operation-progress-bar {
  background: var(--red, #ef4444);
}

.tautulli-operation-progress-text {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.tautulli-operation-progress-text.is-complete {
  color: var(--green, #22c55e);
}

.tautulli-operation-progress-text.is-error {
  color: var(--red, #ef4444);
}

@keyframes tautulli-preview-progress-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(285%); }
}

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

@media (prefers-reduced-motion: reduce) {
  .tautulli-preview-message.is-loading::before,
  .tautulli-import-status.is-loading::before,
  .tautulli-preview-progress.is-indeterminate .tautulli-preview-progress-bar,
  .tautulli-operation-progress.is-indeterminate .tautulli-operation-progress-bar { animation: none; }
}

/* Shared media-style page action bars ------------------------------------
   Page-level controls use the same compact icon/label language as the media
   detail actions. Secondary fields stay inside a small Tools disclosure so a
   phone never has to squeeze a full desktop form into the topbar. */
.view-control-source.page-action-bar,
.view-control-source .page-action-bar {
  display: none;
}

.page-action-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
}

.page-action-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
}

.page-action-pill,
.page-tools-trigger {
  cursor: pointer;
}

.page-tools-dropdown {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
}

.page-tools-trigger {
  list-style: none;
}

.page-tools-trigger::-webkit-details-marker {
  display: none;
}

.page-tools-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 999;
  min-width: min(17rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  box-sizing: border-box;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-3);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.25));
}

.page-tools-dropdown[open] > .page-tools-panel {
  display: flex;
}

.page-tools-panel .compact-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}

.page-tools-panel .compact-field span {
  color: var(--muted);
  font-size: 0.7rem;
}

.page-tools-panel .compact-field input,
.page-tools-panel .compact-field select,
.page-tools-panel .settings-mobile-section .field {
  width: 100%;
  min-width: 0;
}

.page-tools-panel .settings-mobile-section {
  width: 100%;
  margin-bottom: 0;
}

.page-tools-panel .explorer-size-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.page-tools-panel .explorer-size-slider input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.page-tools-panel .explorer-hide-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.page-tools-panel .page-tool-action,
.page-tools-panel .action-pill {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
}

.page-tools-panel .page-tool-action:hover,
.page-tools-panel .action-pill:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.page-tools-panel .page-tool-action svg,
.page-tools-panel .action-pill svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.page-tools-panel .page-tool-action span,
.page-tools-panel .action-pill span {
  min-height: 0;
  white-space: nowrap;
}

body .page-topbar-actions .page-action-bar:not(.hidden),
body .page-topbar-actions .view-control-source.page-action-bar:not(.hidden),
body .page-topbar-actions #personalMediaTopbarControls:not(.hidden) {
  display: flex !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  gap: 0.35rem !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body .page-topbar-actions .page-action-bar > .page-action-primary,
body .page-topbar-actions #personalMediaTopbarControls > .page-action-bar {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

body .page-topbar-actions #personalMediaTopbarControls > .page-action-bar > .page-action-primary {
  min-width: 0 !important;
}

body .page-topbar-actions:has(.page-tools-dropdown[open]) {
  overflow: visible !important;
}

body .page-topbar-actions #upcomingTopbarControls .action-pill,
#upcomingTopbarControls .action-pill {
  min-height: 1.8rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 6px;
}

@media (max-width: 760px) {
  body .page-topbar-actions .page-action-bar:not(.hidden),
  body .page-topbar-actions .view-control-source.page-action-bar:not(.hidden),
  body .page-topbar-actions #personalMediaTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body .page-topbar-actions .page-action-bar > .page-action-primary,
  body .page-topbar-actions #personalMediaTopbarControls > .page-action-bar,
  body .page-topbar-actions #personalMediaTopbarControls > .page-action-bar > .page-action-primary {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    gap: 0.15rem !important;
  }

  body .page-topbar-actions .page-action-bar .page-action-pill,
  body .page-topbar-actions .page-action-bar .page-tools-trigger {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 3rem !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    padding: 0.35rem 0.15rem !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  body .page-topbar-actions .page-action-bar .page-action-pill:hover,
  body .page-topbar-actions .page-action-bar .page-tools-trigger:hover {
    background: var(--bg-hover) !important;
    color: var(--primary) !important;
  }

  body .page-topbar-actions .page-action-bar .page-action-pill svg,
  body .page-topbar-actions .page-action-bar .page-tools-trigger svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    color: inherit !important;
    fill: currentColor !important;
  }

  body .page-topbar-actions .page-action-bar .page-action-pill span,
  body .page-topbar-actions .page-action-bar .page-tools-trigger span {
    display: block !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 1.15 !important;
    font-size: 0.55rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .page-topbar-actions .page-action-bar .page-tools-dropdown {
    position: relative;
    min-width: 3.6rem !important;
    flex: 0 0 3.6rem !important;
  }

  body .page-topbar-actions .page-action-bar .page-tools-dropdown > .page-tools-trigger {
    width: 100% !important;
    min-width: 3.6rem !important;
  }

  body .page-topbar-actions .page-action-bar .page-tools-panel {
    right: 0;
    min-width: min(17rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  body .page-topbar-actions .page-action-bar .page-tools-panel .page-tool-action,
  body .page-topbar-actions .page-action-bar .page-tools-panel .action-pill {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.25rem !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    padding: 0.45rem 0.6rem !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0.78rem !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body .page-topbar-actions .page-action-bar .page-tools-panel .page-tool-action span,
  body .page-topbar-actions .page-action-bar .page-tools-panel .action-pill span {
    display: block !important;
    min-height: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 0.78rem !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body .page-topbar-actions .page-action-bar .mobile-controls-row {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 3.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body .page-topbar-actions .page-action-bar.explorer-controls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body .page-topbar-actions .page-action-bar.explorer-controls > .page-action-primary,
  #explorerTopbarControls > .page-action-primary {
    width: 100% !important;
    flex: 1 1 auto !important;
    order: 0 !important;
  }

  body .page-topbar-actions .upcoming-month-controls {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 0.15rem !important;
  }

  body .page-topbar-actions .upcoming-month-title {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 0.75rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .page-topbar-actions .upcoming-nav-button {
    width: auto !important;
    min-width: 3.6rem !important;
    flex: 0 0 3.6rem !important;
  }

  body .page-topbar-actions:has(.page-tools-dropdown[open]) {
    overflow: visible !important;
  }
}
.tautulli-backup-step .tautulli-step-heading,
.tautulli-import-step .tautulli-step-heading { align-items: center; }
.tautulli-import-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: var(--space-2) 0 0;
  line-height: 1.4;
}
.tautulli-operation-status {
  margin: var(--space-2) 0 0;
  line-height: 1.4;
}
.tautulli-backup-status {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.tautulli-import-note {
  padding: 0 var(--space-2);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
/* Where this import will actually be sent: the per-target decision plus the
   standing Plex historical policy, shown before the import rather than
   discovered in the result. */
.tautulli-policy-note {
  max-width: 80ch;
  margin: var(--space-2) 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Possible-match review: one row per ambiguous play, with its candidate
   records and the three resolutions. */
.tautulli-review-panel {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-2), transparent 15%);
}
.tautulli-review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.tautulli-review-list { display: grid; gap: var(--space-2); max-height: 26rem; overflow-y: auto; }
.tautulli-review-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* Shown only when the user has turned historical Plex sync off, so this import
   will not reach Plex. Silent when the setting is on - there is nothing to ask. */
.tautulli-plex-notice {
  max-width: 80ch;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--yellow, var(--line-strong)), transparent 55%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--yellow, var(--panel-2)), transparent 90%);
  font-size: 0.85rem;
  line-height: 1.5;
}

.tautulli-review-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.tautulli-review-item { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.tautulli-review-badge { align-self: start; }
.tautulli-review-item b { font-size: 0.92rem; overflow-wrap: anywhere; }
.tautulli-review-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.tautulli-review-candidate,
.tautulli-review-action {
  display: grid;
  gap: 2px;
  /* Settings standardises its buttons at 2.05rem; these match rather than
     introducing a one-off control height on this panel alone. */
  min-height: 2.05rem;
  padding: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.tautulli-review-candidate small { color: var(--muted); font-size: 0.75rem; }
.tautulli-review-candidate:hover,
.tautulli-review-action:hover { border-color: var(--accent); }
.tautulli-review-candidate.is-chosen,
.tautulli-review-action.is-chosen {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, var(--panel-2));
}
@media (max-width: 48rem) {
  .tautulli-target-options { grid-template-columns: 1fr; }
  .tautulli-step-heading,
  .tautulli-backup-step .tautulli-step-heading,
  .tautulli-import-step .tautulli-step-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .tautulli-preview-actions { align-items: flex-start; flex-direction: column; }
  .tautulli-operation-actions { justify-content: flex-start; }
  .tautulli-review-panel { padding: var(--space-2); }
  .tautulli-review-choices { flex-direction: column; }
  .tautulli-review-candidate,
  .tautulli-review-action { width: 100%; }
}

/* Upcoming mobile header final cascade ----------------------------------
   This follows the older shared page-control rules above, so the Upcoming
   layout keeps one clear touch row at every phone width: Search, month
   navigation, then Today. */
@media (max-width: 760px) {
  body #upcomingTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #upcomingTopbarControls .page-action-primary {
    display: grid !important;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem !important;
    grid-template-areas: "search month today" !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.35rem !important;
    align-items: stretch !important;
  }

  body #upcomingTopbarControls .upcoming-calendar-utilities {
    display: contents !important;
  }

  body #upcomingTopbarControls .upcoming-search-dropdown {
    display: flex !important;
    grid-area: search !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  body #upcomingTopbarControls .upcoming-search-trigger {
    width: 100% !important;
    min-width: 2.75rem !important;
  }

  body #upcomingTopbarControls .upcoming-search-trigger,
  body #upcomingTopbarControls .upcoming-today-button {
    display: inline-flex !important;
    min-height: 2.75rem !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.5rem 0.65rem !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls #upcomingTodayButton {
    grid-area: today !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 2.75rem !important;
    padding-inline: 0 !important;
  }

  body #upcomingTopbarControls .upcoming-search-trigger .upcoming-search-label,
  body #upcomingTopbarControls #upcomingTodayButton .upcoming-today-label {
    display: none !important;
  }

  body #upcomingTopbarControls .upcoming-month-controls {
    display: grid !important;
    grid-area: month !important;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.15rem !important;
    align-items: stretch !important;
  }

  body #upcomingTopbarControls .upcoming-nav-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding-inline: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls .upcoming-nav-button span {
    display: none !important;
  }

  body #upcomingTopbarControls .upcoming-month-title {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #upcomingTopbarControls .upcoming-search-panel {
    left: 0;
    width: min(18rem, calc(100vw - 1rem));
  }

  body #upcomingTopbarControls:has(.upcoming-search-dropdown[open]),
  body .page-topbar-actions:has(.upcoming-search-dropdown[open]) {
    overflow: visible !important;
  }
}

/* Page-specific controls keep the direct desktop layout flexible while the
   mobile cascade below gives each route an intentional compact arrangement. */
.discover-filter-field {
  min-width: 0;
  flex: 1 1 12rem;
}

.discover-refresh-action {
  flex: 0 0 auto;
}

/* Final page-specific mobile control cascade ----------------------------
   These selectors intentionally follow the older shared explorer/discover
   rules so the page-specific layout wins without changing desktop behavior. */
@media (max-width: 760px) {
  body #discoverTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #discoverTopbarControls .page-action-primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.6rem !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: end !important;
    gap: 0.35rem !important;
  }

  body #discoverTopbarControls .discover-filter-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.2rem !important;
  }

  body #discoverTopbarControls .discover-filter-field .field {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
  }

  body #discoverTopbarControls .discover-refresh-action {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 3.6rem !important;
  }

  body #historyTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
  }

  body #historyTopbarControls > .page-action-primary {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  body #historyTopbarControls > .page-action-primary > .mobile-controls-row {
    width: 100% !important;
    min-height: 3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    gap: 0.1rem !important;
  }

  body #historyTopbarControls > .explorer-search-box.active-mobile-panel,
  body #explorerTopbarControls > .explorer-size-slider.active-mobile-panel {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0.1rem 0 0 !important;
    gap: 0.2rem !important;
    animation: fadeInControlPanel 0.16s ease;
  }

  body #historyTopbarControls > .explorer-search-box.active-mobile-panel input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body #explorerTopbarControls > .explorer-size-slider.active-mobile-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  body #explorerTopbarControls > .explorer-size-slider.active-mobile-panel input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body #statsTopbarControls:not(.hidden) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body #statsTopbarControls > .page-action-primary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.35rem !important;
    align-items: end !important;
  }

  body #statsTopbarControls .stats-filter-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.2rem !important;
  }

body #statsTopbarControls .stats-filter-field .field {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
  }
}

/* On narrow show detail pages the logo and synopsis share the right side of
   the artwork hero. The progress section remains the full-width row below it
   so watch state keeps its existing visual position. */
@media (max-width: 640px) {
  .media-detail-page.media-detail-show-page .immersive-overview {
    grid-column: 2;
    grid-row: 2 / 6;
    width: 100%;
    max-width: 34ch;
    align-self: start;
    justify-self: stretch;
  }
}

/* Compact mode also wins over the mobile rail's stacked-card defaults. */
@media (max-width: 760px) {
  .page-shell[data-active-view="discover"] [data-view-panel="discover"].page-card-mode-compact .shared-media-card:not(.page-card-open) .shared-media-card-body,
  .page-shell[data-active-view="watchlist"] [data-view-panel="personal-media"].page-card-mode-compact .shared-media-card:not(.page-card-open) .shared-media-card-body,
  .page-shell[data-active-view="ratings"] [data-view-panel="personal-media"].page-card-mode-compact .shared-media-card:not(.page-card-open) .shared-media-card-body,
  .page-shell[data-active-view="playlists"] [data-view-panel="personal-media"].page-card-mode-compact .shared-media-card:not(.page-card-open) .shared-media-card-body,
  .page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-page-card:not(.page-card-open) .history-card-details {
    display: none !important;
  }

  .page-shell[data-active-view="explorer"] [data-view-panel="explorer"].page-card-mode-compact .movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

/* Compact page mode is a poster gallery. These rules follow the page-specific
   rail sizing so Discover and Personal Media cannot retain their 385px cards. */
.page-shell [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open) {
  box-sizing: border-box;
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  flex: 0 0 10rem;
  height: auto;
  align-self: flex-start;
  min-height: 0;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.page-shell [data-view-panel="discover"].page-card-mode-compact .shared-media-card--discover:not(.page-card-open) .shared-media-card-poster-wrap {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: none;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) var(--poster-radius) 0 0;
}

.page-shell [data-view-panel="discover"].page-card-mode-compact .shared-media-card--discover:not(.page-card-open) .shared-media-card-body,
.page-shell [data-view-panel="personal-media"].page-card-mode-compact .shared-media-card--personal:not(.page-card-open) .shared-media-card-body {
  display: none !important;
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
  gap: var(--space-3);
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid > .shared-media-card--personal:not(.page-card-open) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 10rem;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid .shared-media-card:not(.page-card-open) .shared-media-card-poster-wrap {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) {
  box-sizing: border-box;
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  flex: 0 0 10rem;
  height: 100%;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row .shared-media-card:not(.page-card-open) .shared-media-card-poster-wrap {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) var(--poster-radius) 0 0;
}

/* The Movies / TV poster view is already poster-only. Compact mode makes its
   tiles denser, while overview and list views fold down to the same gallery. */
.page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid:not(.explorer-list-view) {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid > :not(.page-card-open) .movie-card-body {
  display: none !important;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid > .explorer-history-card:not(.page-card-open) {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  flex-direction: column;
  gap: 0;
  padding: 0;
  aspect-ratio: 2 / 3;
}

.page-shell [data-view-panel="history"].page-card-mode-compact .history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
  justify-content: space-between;
  overflow: visible;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .explorer-history-card:not(.page-card-open) > .history-card-poster-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: none;
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 2 / 3;
  border-radius: var(--poster-radius) var(--poster-radius) 0 0;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .explorer-history-card:not(.page-card-open) .history-page-poster {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .explorer-history-card:not(.page-card-open) > .history-card-details {
  display: none !important;
}

.page-shell [data-view-panel="history"].page-card-mode-compact .history-list .history-page-card:not(.page-card-open),
.page-shell [data-view-panel="history"].page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) {
  border: 0 !important;
  box-shadow: none !important;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .explorer-overview-view {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 9rem));
  justify-content: start;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .explorer-list-view {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 9rem));
  justify-content: start;
}

@media (max-width: 760px) {
  .page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid,
  .page-shell [data-view-panel="history"].page-card-mode-compact .history-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
    justify-content: space-between;
    overflow: visible;
  }

  .page-shell [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open),
  .page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) {
    width: 10rem;
    min-width: 0;
    max-width: 10rem;
    flex-basis: 10rem;
  }

  .page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
    justify-content: space-between;
  }

  .page-shell[data-active-view="discover"] [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open),
  .page-shell[data-active-view="watchlist"] [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid > .shared-media-card--personal:not(.page-card-open),
  .page-shell[data-active-view="ratings"] [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid > .shared-media-card--personal:not(.page-card-open),
  .page-shell[data-active-view="playlists"] [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
    flex: 0 0 10rem;
  }

  .page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-list > .history-page-card:not(.page-card-open) {
    width: 100%;
    flex: initial;
  }

  .page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid:not(.explorer-list-view) {
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), min(10rem, 100%)));
    justify-content: space-between;
  }
}

/* Movies and TV reuse the dashboard's history tile markup and theme styling.
   Keep the alternate compact, list, and overview modes under their own rules. */
.page-shell [data-view-panel="explorer"]:not(.page-card-mode-compact) #explorerPanel .movie-grid:not(.explorer-list-view, .explorer-overview-view) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24.0625rem), 1fr));
  justify-content: stretch;
  align-items: stretch;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .movie-grid:not(.explorer-list-view, .explorer-overview-view) > :is(.movie-card, .folder-card):is(:not(.page-card-mode-compact *), .page-card-open) {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: 15rem;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.page-shell [data-view-panel="explorer"] #explorerPanel .movie-grid:not(.explorer-list-view, .explorer-overview-view) > .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open) {
  position: relative;
  isolation: isolate;
  text-decoration: none;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open) > .history-card-poster-wrapper {
  box-sizing: border-box;
  width: auto;
  height: 100%;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0;
  background: var(--panel-3);
  box-shadow: none;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open) .history-page-poster {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open) > .history-card-details {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0.65rem;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open) .history-card-title {
  font-size: 1rem;
  font-weight: 850;
}

.page-shell [data-view-panel="explorer"] #explorerPanel .explorer-history-card:is(:not(.page-card-mode-compact *), .page-card-open):hover .history-card-poster-wrapper {
  transform: none;
}

@media (max-width: 760px) {
  .page-shell [data-view-panel="explorer"]:not(.page-card-mode-compact) #explorerPanel .movie-grid:not(.explorer-list-view, .explorer-overview-view) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* History has no size control: its posters use the other pages' poster-mode
   width, and on desktop its cards mode takes the Movies and TV full-card size
   above. Phones keep the shared mobile card rail. */
.page-shell [data-view-panel="history"] {
  --history-poster-width: 10.041rem;
}

@media (min-width: 761px) {
  .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24.0625rem), 1fr));
    align-items: stretch;
  }

  .page-shell [data-view-panel="history"] .history-list > .history-page-card:is(:not(.page-card-mode-compact *), .page-card-open) {
    box-sizing: border-box;
    min-width: 0;
    height: 15rem;
  }

  .page-shell [data-view-panel="history"] .history-list > .history-page-card:is(:not(.page-card-mode-compact *), .page-card-open) > .history-card-poster-wrapper {
    width: auto;
    height: 100%;
    flex: 0 0 auto;
    aspect-ratio: 2 / 3;
  }

  .page-shell [data-view-panel="history"] .history-list > .history-page-card:is(:not(.page-card-mode-compact *), .page-card-open) > .history-card-details {
    min-height: 0;
    padding: 0.65rem;
  }

  .page-shell [data-view-panel="history"] .history-list > .history-page-card:is(:not(.page-card-mode-compact *), .page-card-open) .history-card-title {
    font-size: 1rem;
  }
}

/* Poster mode uses the poster dimensions of each page's full-card layout.
   Discover and Playlists have slightly shorter rail cards than the fixed
   10rem gallery cards used by the other page groups. */
.page-shell [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open) {
  width: 10.041rem;
  min-width: 10.041rem;
  max-width: 10.041rem;
  flex-basis: 10.041rem;
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) {
  width: 9.707rem;
  min-width: 9.707rem;
  max-width: 9.707rem;
  flex-basis: 9.707rem;
}

/* Desktop Discover and Playlists give each rail a fixed slice of the screen, so
   in poster mode the poster takes the rail's height and its width follows at
   2:3. A fixed width overflowed the slice and cropped the poster, worst when
   the rail's scrollbar showed. */
@media (min-width: 761px) {
  .page-shell[data-active-view="discover"] [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open),
  .page-shell[data-active-view="playlists"] [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    height: 100%;
  }

  .page-shell[data-active-view="discover"] [data-view-panel="discover"].page-card-mode-compact .discover-feed-row > .shared-media-card--discover:not(.page-card-open) .shared-media-card-poster-wrap,
  .page-shell[data-active-view="playlists"] [data-view-panel="personal-media"].page-card-mode-compact .personal-media-list-row > .shared-media-card--personal:not(.page-card-open) .shared-media-card-poster-wrap {
    width: auto;
    height: 100%;
    max-height: none;
    aspect-ratio: 2 / 3;
  }
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(10.125rem, 100%), min(10.125rem, 100%)));
}

.page-shell [data-view-panel="personal-media"].page-card-mode-compact .personal-media-card-grid > .shared-media-card--personal:not(.page-card-open) {
  max-width: 10.125rem;
}

.page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-list,
.page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-grid-view,
.page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-table-view {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--history-poster-width, 86px), 100%), min(var(--history-poster-width, 86px), 100%)));
}

.page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-list .history-page-card:not(.page-card-open),
.page-shell[data-active-view="history"] [data-view-panel="history"].page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) {
  width: 100%;
  aspect-ratio: 2 / 3;
}

.page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid:not(.explorer-list-view, .explorer-overview-view) {
  grid-template-columns: repeat(auto-fill, minmax(min(10.041rem, 100%), min(10.041rem, 100%)));
}

/* Poster mode hides the details, so the card's own rounded corners must clip
   the poster (Modern squares the poster itself for the full-card layout). */
.page-shell [data-view-panel="explorer"].page-card-mode-compact .movie-grid > .explorer-history-card:not(.page-card-open) {
  overflow: hidden;
}

/* Movies and TV cards show the title's summary under the title (in place of
   the episode line on TV); explorer.js fills it in once TMDB details load. */
.page-shell #explorerPanel .explorer-history-card .history-card-summary {
  display: -webkit-box;
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.page-shell #explorerPanel .explorer-history-card .history-card-summary:empty {
  display: none;
}

/* App Used matches the dashboard's plain badge. The older .movie-card span
   rules would otherwise resize, recolour and fill it on the Movies page. */
.page-shell #explorerPanel .explorer-history-card .history-card-apps .source-badge {
  background: transparent;
  gap: var(--space-1);
  padding-inline: var(--space-1);
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 850;
}

.page-shell #explorerPanel .explorer-history-card .history-card-apps .source-badge span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Discover's full cards take the Movies and TV card size and type: 15rem
   tall, a flush full-height 2:3 poster and a 1rem heavy title. */
@media (min-width: 761px) {
  .page-shell [data-view-panel="discover"] .discover-feed-row > .shared-media-card--discover:is(:not(.page-card-mode-compact *), .page-card-open) {
    box-sizing: border-box;
    height: 15rem;
    min-height: 15rem;
  }

  .page-shell [data-view-panel="discover"] .shared-media-card--discover:is(:not(.page-card-mode-compact *), .page-card-open) .shared-media-card-poster-wrap {
    width: auto;
    height: 100%;
    max-height: none;
    flex: 0 0 auto;
    aspect-ratio: 2 / 3;
  }

  .page-shell [data-view-panel="discover"] .shared-media-card--discover:is(:not(.page-card-mode-compact *), .page-card-open) .shared-media-card-body {
    min-width: 0;
    padding: 0.65rem;
  }

  .page-shell [data-view-panel="discover"] .shared-media-card--discover:is(:not(.page-card-mode-compact *), .page-card-open) .shared-media-card-title {
    font-size: 1rem;
    font-weight: 850;
  }
}

/* Posters only: a clicked poster opens in place (modules/page-card-open.js).
   The poster-mode rules above skip .page-card-open, so the open item takes
   its full-card look. In a grid it takes three poster slots, a list or table
   row the full width, and on phones (or where fewer than three posters fit,
   .page-card-open-full) every opened card the full width.
   History's grid tiles keep their slot and show their caption. Discover and
   Playlists rails just let the card take its full-card width. */
.page-card-mode-compact :is(.personal-media-card-grid, .history-list, .movie-grid:not(.explorer-list-view)) > .page-card-open {
  grid-column: span 3;
}

.page-card-mode-compact :is(.explorer-list-view > .page-card-open, .history-table-view .history-list-row.page-card-open, .page-card-open-full) {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .page-card-mode-compact :is(.personal-media-card-grid, .history-list, .movie-grid:not(.explorer-list-view)) > .page-card-open {
    grid-column: 1 / -1;
  }

  /* Playlists on phones: an opened poster opens across the rail, poster on
     the left and details beside it, instead of the narrow poster-first stack. */
  .page-shell[data-active-view="playlists"] .page-card-mode-compact .personal-media-list-row > .shared-media-card--personal.page-card-open {
    flex-direction: row;
    width: min(92vw, 24rem);
    flex: 0 0 min(92vw, 24rem);
  }

  /* The poster keeps the folded poster's size (9.707rem wide at 2:3). */
  .page-shell[data-active-view="playlists"] .page-card-mode-compact .personal-media-list-row > .shared-media-card--personal.page-card-open .shared-media-card-poster-wrap {
    width: 9.707rem;
    height: auto;
    flex: 0 0 9.707rem;
    align-self: flex-start;
    aspect-ratio: 2 / 3;
    border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  }

  .page-shell[data-active-view="playlists"] .page-card-mode-compact .personal-media-list-row > .shared-media-card--personal.page-card-open .shared-media-card-poster {
    border-radius: var(--poster-radius) 0 0 var(--poster-radius);
  }

  .page-shell[data-active-view="playlists"] .page-card-mode-compact .personal-media-list-row > .shared-media-card--personal.page-card-open .shared-media-card-body {
    width: auto;
    min-width: 0;
  }
}

/* History, Posters only: each folded poster carries its episode name, watched
   date and app along its bottom edge (modules/history-poster-overlay.js), over
   a blurred dark tint that reads on light, dark and busy posters in either
   theme. Full cards and an opened poster keep their own details, so the
   overlay shows only on folded posters. The cards view's poster wrapper sizes
   every span and img inside it as the poster, hence the badge resets. */
.history-poster-overlay {
  display: none;
}

.page-card-mode-compact .history-grid-view .history-grid-card:not(.page-card-open) .history-poster-overlay,
.page-card-mode-compact .history-list .history-page-card:not(.page-card-open) .history-poster-overlay,
.page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) > .history-poster-overlay,
.page-card-mode-compact .personal-media-list-row > .shared-media-card:not(.page-card-open) .playlist-poster-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding: 0.95rem 0.5rem 0.45rem;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background: linear-gradient(to top, rgba(8, 10, 14, 0.78), rgba(8, 10, 14, 0.5) 75%, rgba(8, 10, 14, 0.2));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 0.8rem), transparent);
  mask-image: linear-gradient(to top, #000 calc(100% - 0.8rem), transparent);
  transition: transform 140ms ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-card-mode-compact .history-grid-view .history-grid-card:not(.page-card-open) .history-poster-overlay,
  .page-card-mode-compact .history-list .history-page-card:not(.page-card-open) .history-poster-overlay,
  .page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) > .history-poster-overlay,
  .page-card-mode-compact .personal-media-list-row > .shared-media-card:not(.page-card-open) .playlist-poster-overlay {
    background: linear-gradient(to top, rgba(8, 10, 14, 0.9), rgba(8, 10, 14, 0.72) 75%, rgba(8, 10, 14, 0.35));
  }
}

/* The grid poster has its own 1px border and lifts on hover. */
.page-card-mode-compact .history-grid-view .history-grid-card:not(.page-card-open) .history-poster-overlay {
  inset: auto 1px 1px;
  border-radius: 0 0 calc(var(--poster-radius) - 1px) calc(var(--poster-radius) - 1px);
}

.page-card-mode-compact .history-grid-view .history-grid-card:not(.page-card-open):hover .history-poster-overlay {
  transform: translateY(-2px);
}

.page-card-mode-compact .history-table-view .history-list-row:not(.page-card-open) {
  position: relative;
}

.history-poster-overlay .history-poster-overlay-episode {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 600;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.history-poster-overlay .history-poster-overlay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  min-width: 0;
  font-size: 0.66rem;
}

.history-poster-overlay .history-poster-overlay-date {
  white-space: nowrap;
  opacity: 0.92;
}

.history-poster-overlay .source-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  height: auto;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem 0.1rem 0.28rem;
  font-size: 0.62rem;
  text-shadow: none;
}

.history-poster-overlay .source-badge > span:not(.source-badge-icon-set) {
  display: inline;
  width: auto;
  height: auto;
}

.history-poster-overlay .source-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.history-poster-overlay .source-badge-icon-set {
  display: inline-flex;
  width: 1.2rem;
  height: 0.64rem;
}

.history-poster-overlay .source-badge-icon-set .source-badge-icon {
  width: 100%;
  height: 100%;
}

/* Settings surfaces use two brand tones only. The settings canvas is the main
   background; each nested surface level (section, box, input, control) flips
   between the left-menu and main-background tones. Every rule repeats the same
   surface list; the #settings-view id keeps these above per-section rules. */

#settings-view {
  background: var(--brand-main);
}

html #settings-view :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  background: var(--brand-menu) !important;
  background-image: none !important;
}

html #settings-view :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  background: var(--brand-main) !important;
  background-image: none !important;
}

html #settings-view :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  background: var(--brand-menu) !important;
  background-image: none !important;
}

html #settings-view :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  background: var(--brand-main) !important;
  background-image: none !important;
}

html #settings-view :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel, .tool-section-card, .settings-group-section, .service-card, .about-page-card, .backup-type-card, .restore-upload-panel, .drop-zone, .webhook-secret-box, .webhook-endpoint-container, .copy-block, .settings-disclosure, .settings-help-disclosure, details.settings-modal-optional-fields, details.issue-category, details.sync-match-report, details.sync-tool-details, .sync-history-card, .sync-issue-card, .sync-job-card, .watch-backup-row, .settings-modal-field:not(#syncTuningFields .settings-modal-field), .admin-credentials-grid > .field-label, .settings-choice-option, .settings-segmented-control, .sync-health-metric, .sync-health-dest-row, .sync-preview-warning-card, .diagnostic-result-card, .field, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  background: var(--brand-menu) !important;
  background-image: none !important;
}

/* ==========================================================================
   Modern look (merged from styles-modern.css; plan/archive/modern-only).
   These rules override the base rules above. Each keeps the html:root prefix
   so it has the same specificity it was written with (html:root matches the
   same as the old html[data-style="modern"]); dark rules use
   html:root:not(.light-mode) and light rules html:root.light-mode.
   ========================================================================== */

/* Dark: dashboard cards --------------------------------------------------- */
/* The History page's cards mode uses the same card markup and styles. */

html:root:not(.light-mode) #timeline-view .dashboard-history-page-card,
html:root:not(.light-mode) #history-view .history-list .history-page-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.82) 0%, rgba(15, 19, 25, 0.82) 100%);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root:not(.light-mode) #timeline-view .dashboard-history-page-card:hover,
html:root:not(.light-mode) #history-view .history-list .history-page-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(38, 46, 57, 0.9) 0%, rgba(18, 23, 30, 0.9) 100%);
  /* Kept within the card row's ~8.8px bottom padding, which clips overflow. */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  /* A 1px border fades on the rounded corners; an outline drawn over it keeps
     the corners as bright as the straight edges. */
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* The card clips its own corners; square poster corners avoid a sliver of card
   surface showing between the 8px poster radius and the 10px card radius. */
html:root:not(.light-mode) #timeline-view .dashboard-history-page-card > .history-card-poster-wrapper,
html:root:not(.light-mode) #timeline-view .dashboard-history-page-card > .history-card-poster-wrapper .history-card-poster-link,
html:root:not(.light-mode) #history-view .history-list .history-page-card > .history-card-poster-wrapper,
html:root:not(.light-mode) #history-view .history-list .history-page-card > .history-card-poster-wrapper .history-card-poster-link {
  border-radius: 0;
}

html:root:not(.light-mode) #timeline-view .dashboard-history-page-card:hover .history-card-poster-wrapper,
html:root:not(.light-mode) #history-view .history-list .history-page-card:hover .history-card-poster-wrapper {
  transform: none;
}

/* Field labels recede so the values stand out. */
html:root:not(.light-mode) #timeline-view .dashboard-history-page-card .meta-label,
html:root:not(.light-mode) #history-view .history-list .history-page-card .meta-label {
  color: rgba(148, 163, 184, 0.72);
  font-size: var(--fs-card-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html:root:not(.light-mode) #timeline-view .dashboard-history-page-card .history-card-meta-row .meta-value,
html:root:not(.light-mode) #history-view .history-list .history-page-card .history-card-meta-row .meta-value {
  color: var(--text);
  font-weight: 600;
}

html:root:not(.light-mode) #timeline-view .dashboard-history-page-card .history-card-episode,
html:root:not(.light-mode) #history-view .history-list .history-page-card .history-card-episode {
  color: var(--accent);
  font-weight: 600;
}

/* "Watched Twice" / "Watched N Times" as a small blue pill. */
html:root:not(.light-mode) #timeline-view .history-card-meta-row .meta-value.history-card-watch-count {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  padding: 0.08rem 0.5rem;
  color: #7dd3fc;
  font-size: var(--fs-card-watch-count);
  font-weight: 700;
}

/* Dark: provider badges in each provider's colour (no pill background) ---- */

html:root .source-plex,
html:root .media-app-link--plex {
  --modern-provider: #e5a00d;
}

html:root .source-emby,
html:root .media-app-link--emby {
  --modern-provider: #52b54b;
}

html:root .source-jellyfin,
html:root .media-app-link--jellyfin {
  --modern-provider: #aa5cc3;
}

html:root .source-plembfin,
html:root .media-app-link--plembfin {
  --modern-provider: #38bdf8;
}

/* App Used badges only: the Watch Now app links keep the plain text colour. */
html:root:not(.light-mode) #timeline-view .source-badge:not([class*="media-app-link--"]),
html:root:not(.light-mode) #history-view .history-list .source-badge,
html:root:not(.light-mode) #explorerPanel .explorer-history-card .source-badge:not([class*="media-app-link--"]) {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #ffffff 35%);
}

/* Keep provider branding on the icon while the app name stays neutral. */
html:root :is(#timeline-view, #history-view, #explorerPanel) .source-badge:not([class*="media-app-link--"]) > span:last-child {
  color: var(--soft);
}

html:root .page-shell #explorerPanel .explorer-history-card .history-card-apps .source-badge > span:last-child {
  color: var(--soft);
}

html:root:not(.light-mode) #timeline-view .source-badge--link:hover,
html:root:not(.light-mode) #timeline-view .source-badge--link:focus-visible,
html:root:not(.light-mode) #history-view .history-list .source-badge--link:hover,
html:root:not(.light-mode) #history-view .history-list .source-badge--link:focus-visible,
html:root:not(.light-mode) #timeline-view .part-watched-app-badge:hover {
  color: #ffffff;
}

/* Collapsed runs (modules/dashboard-modern.js): the count pill, the expand
   affordance and the expanded edge. */
.dashboard-collapsed-run-card {
  cursor: pointer;
}

.dashboard-run-count {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 55%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 86%);
  padding: 0.05rem 0.5rem;
  color: var(--accent);
  font-size: var(--fs-badge);
  font-weight: 700;
}

/* An expanded run: its cards share an accent top edge. */
#timeline-view .dashboard-run-expanded,
#history-view .dashboard-run-expanded {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent), transparent 35%);
}

/* Backdrop artwork (modules/dashboard-modern.js). Each [data-art] key gets
   --modern-art and --modern-art-shade from an injected stylesheet once its
   backdrop resolves; until then (or without one) the surface shows as is. */
html:root #nowPlayingGrid .live-now-card,
html:root #timeline-view .dashboard-history-page-card {
  position: relative;
  isolation: isolate;
}

html:root #nowPlayingGrid .live-now-card::before,
html:root #timeline-view .dashboard-history-page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--modern-art, none) center 30% / cover no-repeat;
  pointer-events: none;
}

html:root #nowPlayingGrid .live-now-card::after,
html:root #timeline-view .dashboard-history-page-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--modern-art-shade, 0);
  background: linear-gradient(90deg, rgba(10, 13, 18, 0.97) 0%, rgba(10, 13, 18, 0.82) 32%, rgba(10, 13, 18, 0.2) 75%);
  pointer-events: none;
}

/* The small cards' text runs the full width, so the shade stays heavy. */
html:root:not(.light-mode) #timeline-view .dashboard-history-page-card::after {
  background: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.84) 55%, rgba(12, 16, 22, 0.66) 100%);
}

/* The featured Up Next card spans the Now Playing panel, so its shade fades
   out to the right and the backdrop shows across the extra width. */
html:root:not(.light-mode) #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card::after {
  background: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.84) 30%, rgba(12, 16, 22, 0.25) 75%);
}

html:root.light-mode #nowPlayingGrid .live-now-card::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.86) 32%, rgba(255, 255, 255, 0.3) 75%);
}

/* Light: the same backdrops under a white shade, so the dark text reads. */
html:root.light-mode #timeline-view .dashboard-history-page-card::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.7) 100%);
}

html:root.light-mode #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 30%, rgba(255, 255, 255, 0.3) 75%);
}

/* Card Art off (Appearance menu): no card shows a backdrop, even one already
   loaded or loaded for the page backdrop. */
html[data-card-art="off"] [data-art] {
  --modern-art: none;
  --modern-art-shade: 0;
}

/* Background Art off (Appearance menu): details pages drop their backdrop.
   A hidden element's background image is not downloaded. The Dashboard
   backdrop is never set while it is off (modules/dashboard-modern.js). */
html[data-background-art="off"] .modal-backdrop-image {
  display: none;
}

/* The dashboard's main area shows the backdrop of the top item (the featured
   Up Next card, or the first live session) under a shade of the page colour,
   fading to plain background further down. It stays put while the page
   scrolls, since .page-shell is the scroller. */
html:root .page-shell[data-active-view="dashboard"][data-page-art] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg), transparent 22%) 0%, color-mix(in srgb, var(--bg), transparent 10%) 55%, var(--bg) 100%),
    var(--modern-page-art, none) center top / cover no-repeat,
    var(--bg);
}

/* The dashboard sections keep their glass tint but not its blur, so the page
   backdrop stays sharp behind every row. */
html:root #timeline-view .glass-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Now Playing (modules/dashboard-modern.js). While idle, the panel holds copies of the first two Up Next cards, side by side and
   stretched to share the panel width; the heading then reads "Up Next" and
   the rail's own title is hidden. During playback it reads "Now Playing" and
   the rail's title returns. Below: that layout, the chrome-less panel, the
   live sessions' backdrop layout, and a backdrop spanning each featured card. */
html:root #timeline-view .live-panel {
  /* The glass tint stays, so the page backdrop reads the same behind this
     panel as behind the other sections. */
  border-color: transparent;
  box-shadow: none;
  /* Without the panel chrome the feature would sit against the top edge. */
  padding: 0.75rem 0 0;
}

#timeline-view:not(:has(#nowPlayingGrid > [data-now-playing-card-id])):has(.modern-idle-feature) #upNextDashboardSection .up-next-heading-copy > h2 {
  display: none;
}

html:root #nowPlayingGrid {
  gap: 0.75rem;
  padding: 0;
}

#nowPlayingGrid > .idle-state:has(~ .modern-idle-feature) {
  display: none;
}

/* dashboard-modern.js marks each rail card it copies into the panel, and each
   card for media playing live, so the rail does not show it twice. */
#timeline-view #upNextPanel > [data-up-next-card-id][data-featured-in-panel] {
  display: none;
}

/* Up Next cards (in the rail and featured in the panel) show the episode title
   in the normal text colour, not the accent. Two ids outrank the accent rules. */
html :is(#upNextPanel, #nowPlayingGrid) [data-up-next-card-id] .history-card-episode,
html #timeline-view :is(#upNextPanel, #nowPlayingGrid) [data-up-next-card-id] .history-card-episode {
  color: var(--text);
}

/* Options popup opened by the cog beside the Now Playing heading
   (modules/now-playing-options.js). */
#timeline-view .live-panel {
  position: relative;
}

.now-playing-options-menu {
  position: absolute;
  top: 2.4rem;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 0.75rem;
  width: min(22rem, 100%);
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.now-playing-options-menu.hidden {
  display: none;
}

.now-playing-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-option);
  cursor: pointer;
}

.now-playing-option-count {
  justify-content: space-between;
}

.now-playing-option-count input {
  width: 4.5rem;
}

.now-playing-option-error {
  margin: 0;
  color: var(--danger, #f87171);
  font-size: var(--fs-option-error);
}

.now-playing-option-error.hidden {
  display: none;
}

/* The row wrapper normally adds breathing room around its cards. The featured
   copies share a row with live cards, so remove that inset and let their card
   edges align to the same full-height grid bounds. */
#timeline-view #nowPlayingGrid .modern-idle-feature {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
}

#timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

/* Only the card stretches: its text column keeps to the width of its text,
   so the progress bar and Clear end where the text does. */
#timeline-view #nowPlayingGrid .modern-idle-feature .history-card-details {
  flex: 0 1 auto;
  width: auto;
  max-width: 24rem;
}

html:root #nowPlayingGrid .live-now-card {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  gap: 1rem;
  width: auto;
  min-width: min(24rem, 100%);
  max-width: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  /* The poster meets the top, left and bottom edges, like the other cards;
     only the text side is inset. */
  padding: 0 1rem 0 0;
}

html:root #nowPlayingGrid .live-now-card:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

html:root #nowPlayingGrid .live-now-card .now-poster-large-wrapper {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 0;
}

html:root #nowPlayingGrid .live-now-card .now-poster-large-wrapper :is(img, .poster-fallback) {
  border-radius: 0;
}

html:root #nowPlayingGrid .live-now-card .now-card-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Live, title and episode anchor to the top; the details and progress bar
     sit at the bottom (the meta block's auto top margin). */
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
  height: 100%;
  /* The same 0.65rem the Up Next card's text column has, top and bottom; the
     card's own padding and gap inset the sides. */
  padding: 0.65rem 0;
  overflow: hidden;
}

html:root #nowPlayingGrid .live-now-card .stream-indicator {
  color: var(--accent);
  font-size: var(--fs-badge);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html:root #nowPlayingGrid .live-now-card .stream-indicator.is-paused {
  color: var(--muted);
}

html:root #nowPlayingGrid .live-now-card .now-card-title {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-now-title);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root #nowPlayingGrid .live-now-card .now-card-episode {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-now-episode);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root #nowPlayingGrid .live-now-card .now-card-meta {
  display: flex;
  /* One detail per line: User, Device, App Used. */
  flex-flow: column nowrap;
  margin-top: auto;
  gap: 0.15rem;
  color: var(--muted);
  font-size: var(--fs-now-meta);
}

html:root #nowPlayingGrid .live-now-card .now-card-progress-container {
  width: min(18rem, 100%);
  margin-top: 0.2rem;
}

html:root #nowPlayingGrid .live-now-card .now-card-progress-bar {
  height: 4px;
}

@media (max-width: 760px) {
  html:root #nowPlayingGrid .live-now-card {
    height: auto;
    min-height: 10.5rem;
    min-width: min(22rem, 88vw);
  }

  html:root #nowPlayingGrid .live-now-card .now-poster-large-wrapper {
    width: 6.5rem;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
  }

  html:root #nowPlayingGrid .live-now-card .now-card-details {
    padding: 0.75rem 0;
  }
}

/* Up to 760px the features take the live cards' layout (6.5rem poster beside
   the text). Without it, phones stack the rail cards poster-over-text, so a
   full-width feature's poster fills the screen, and at 641-760px the poster
   sizes from the card height and squeezes the text into a sliver. */
@media (max-width: 760px) {
  #timeline-view #nowPlayingGrid .modern-idle-feature {
    height: auto;
    min-width: min(18rem, 100%);
  }

  #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card {
    flex-direction: row;
    gap: 0;
    padding: 0;
  }

  #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card > .history-card-poster-wrapper {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
  }

  #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card > .history-card-poster-wrapper,
#timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card > .history-card-poster-wrapper .history-card-poster-link {
    border-radius: 0;
  }

  #timeline-view #nowPlayingGrid .modern-idle-feature .history-card-details {
    flex: 1 1 auto;
    max-width: none;
    padding: 0.65rem 0.75rem;
  }

  /* The text now runs the full width, so the shade stays heavy like the
     rail cards' instead of fading out to the right. */
  html:root:not(.light-mode) #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card::after {
    background: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.84) 55%, rgba(12, 16, 22, 0.66) 100%);
  }

  html:root.light-mode #timeline-view #nowPlayingGrid .modern-idle-feature > .dashboard-history-page-card::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.7) 100%);
  }
}

/* Phones: two features no longer fit side by side, so each takes most of the
   row like the live cards and the second peeks in from the right. */
@media (max-width: 640px) {
  #timeline-view #nowPlayingGrid .modern-idle-feature {
    min-width: min(22rem, 88vw);
  }
}

/* Dark: sidebar ------------------------------------------------------------ */

html:root:not(.light-mode) .topnav .nav-tab {
  border-radius: 0 8px 8px 0;
}

html:root:not(.light-mode) .topnav .nav-tab.active {
  border-left-color: transparent;
  background: linear-gradient(90deg, rgba(229, 160, 13, 0.24) 0%, rgba(229, 160, 13, 0.05) 100%);
  box-shadow: inset 3px 0 0 var(--accent);
  color: #f5c451;
}

/* Light ------------------------------------------------------------------- */
/* The dark rules above, redrawn on white. The accent is the light mode's own
   (blue), as dark uses the dark accent: amber text on white would not
   meet contrast. */

/* The sections are solid white, bordered cards in light mode. Over the page
   backdrop any white tint or border shows as a box, so they go clear and the
   page shade alone keeps the headings readable. */
html:root.light-mode .page-shell[data-page-art] #timeline-view .glass-panel {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html:root.light-mode #timeline-view .dashboard-history-page-card,
html:root.light-mode #history-view .history-list .history-page-card {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Keep the featured Up Next copies and the rail on one light-theme edge
   treatment. Their backdrops can leave the standard white card shadow reading
   as a bright outline against the dashboard artwork. */
html:root.light-mode #timeline-view :is(#upNextPanel, #nowPlayingGrid) [data-up-next-card-id] {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

html:root.light-mode #timeline-view #nowPlayingGrid .live-now-card {
  border-color: transparent;
  box-shadow: none;
}

html:root.light-mode #timeline-view :is(#upNextPanel, #nowPlayingGrid) [data-up-next-card-id]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html:root.light-mode #timeline-view .dashboard-history-page-card:hover,
html:root.light-mode #history-view .history-list .history-page-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root.light-mode #timeline-view .dashboard-history-page-card > .history-card-poster-wrapper,
html:root.light-mode #timeline-view .dashboard-history-page-card > .history-card-poster-wrapper .history-card-poster-link,
html:root.light-mode #history-view .history-list .history-page-card > .history-card-poster-wrapper,
html:root.light-mode #history-view .history-list .history-page-card > .history-card-poster-wrapper .history-card-poster-link {
  border-radius: 0;
}

html:root.light-mode #timeline-view .dashboard-history-page-card:hover .history-card-poster-wrapper,
html:root.light-mode #history-view .history-list .history-page-card:hover .history-card-poster-wrapper {
  transform: none;
}

html:root.light-mode #timeline-view .dashboard-history-page-card .meta-label,
html:root.light-mode #history-view .history-list .history-page-card .meta-label {
  color: rgba(71, 85, 105, 0.8);
  font-size: var(--fs-card-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html:root.light-mode #timeline-view .dashboard-history-page-card .history-card-meta-row .meta-value,
html:root.light-mode #history-view .history-list .history-page-card .history-card-meta-row .meta-value {
  color: var(--text);
  font-weight: 600;
}

html:root.light-mode #timeline-view .dashboard-history-page-card .history-card-episode,
html:root.light-mode #history-view .history-list .history-page-card .history-card-episode {
  color: var(--accent);
  font-weight: 600;
}

html:root.light-mode #timeline-view .history-card-meta-row .meta-value.history-card-watch-count {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  padding: 0.08rem 0.5rem;
  color: #0369a1;
  font-size: var(--fs-card-watch-count);
  font-weight: 700;
}

/* Provider colours darkened, where dark lightens them, so they read on white. */
html:root.light-mode #timeline-view .source-badge:not([class*="media-app-link--"]),
html:root.light-mode #history-view .history-list .source-badge,
html:root.light-mode #explorerPanel .explorer-history-card .source-badge:not([class*="media-app-link--"]) {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #000000 28%);
}

html:root.light-mode :is(#timeline-view, #history-view, #explorerPanel) .source-badge:not([class*="media-app-link--"]) > span:last-child {
  color: var(--soft);
}

html:root.light-mode .page-shell #explorerPanel .explorer-history-card .history-card-apps .source-badge > span:last-child {
  color: var(--soft);
}

html:root.light-mode #timeline-view .source-badge--link:hover,
html:root.light-mode #timeline-view .source-badge--link:focus-visible,
html:root.light-mode #history-view .history-list .source-badge--link:hover,
html:root.light-mode #history-view .history-list .source-badge--link:focus-visible,
html:root.light-mode #timeline-view .part-watched-app-badge:hover {
  color: var(--text);
}

html:root.light-mode .topnav .nav-tab {
  border-radius: 0 8px 8px 0;
}

html:root.light-mode .topnav .nav-tab.active {
  border-left-color: transparent;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.03) 100%);
  box-shadow: inset 3px 0 0 var(--accent);
  color: #1d4ed8;
}

/* Collapsed runs carry an episode counter on the poster (.dashboard-run-badge,
   modules/dashboard-modern.js), so a posters-only card still shows the size of
   the run. A corner tab flush with the poster's top left, following its rounded corner,
   in the accent of the full card's .dashboard-run-count. */
.dashboard-collapsed-run-card > .history-card-poster-wrapper {
  position: relative;
}

.dashboard-collapsed-run-card > .history-card-poster-wrapper > .dashboard-run-badge {
  position: absolute;
  inset: -1px auto auto -1px;
  width: auto !important;
  height: auto !important;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 35%);
  border-width: 0 1px 1px 0;
  border-radius: 10px 0 9px 0;
  background: #0b0f14;
  padding: 0.2rem 0.6rem 0.22rem 0.55rem;
  color: #fff;
  font-size: var(--fs-badge);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Discover and Personal Media cards (.shared-media-card, modules/media-card.js)
   take the dashboard card look: the same surface, hover, square poster corners
   (the card clips its own), receding labels, and the rating as a small pill.
   Scoped to .page-shell so the Fix Match dialog's result cards are untouched. */
html:root:not(.light-mode) .page-shell .shared-media-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.82) 0%, rgba(15, 19, 25, 0.82) 100%);
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root:not(.light-mode) .page-shell .shared-media-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(38, 46, 57, 0.9) 0%, rgba(18, 23, 30, 0.9) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root.light-mode .page-shell .shared-media-card {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root.light-mode .page-shell .shared-media-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* Library overview and list modes use the same Modern surface language as
   dashboard and Discover cards, while keeping the existing library layouts. */
html:root:not(.light-mode) .page-shell :is(.explorer-overview-card, .explorer-list-view) {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

html:root:not(.light-mode) .page-shell .explorer-overview-card {
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.94), rgba(15, 19, 25, 0.94));
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root:not(.light-mode) .page-shell .explorer-overview-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #262e39, #12171e);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root.light-mode .page-shell :is(.explorer-overview-card, .explorer-list-view) {
  border-color: rgba(15, 23, 42, 0.1);
  border-radius: 10px;
}

html:root.light-mode .page-shell .explorer-overview-card {
  background: linear-gradient(180deg, #fff, #f1f5f9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root.light-mode .page-shell .explorer-overview-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root .page-shell .explorer-list-view {
  overflow: hidden;
}

html:root .page-shell .explorer-list-header {
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 7%);
  border-color: color-mix(in srgb, var(--line) 75%, var(--accent) 25%);
}

html:root .page-shell .explorer-list-header span,
html:root .page-shell .overview-card-attrs,
html:root .page-shell .overview-card-date,
html:root .page-shell .list-card-col {
  letter-spacing: 0.025em;
}

html:root .page-shell .overview-card-meta {
  padding: 0.9rem;
  gap: 0.45rem;
}

html:root .page-shell .overview-card-header b,
html:root .page-shell .overview-show-title-btn b,
html:root .page-shell .list-card-title {
  font-weight: 700;
}

html:root .page-shell .explorer-list-card {
  transition: background 140ms ease;
}

html:root:not(.light-mode) .page-shell .explorer-list-card:hover {
  background: rgba(245, 158, 11, 0.08);
}

html:root.light-mode .page-shell .explorer-list-card:hover {
  background: rgba(37, 99, 235, 0.06);
}

html:root .page-shell .explorer-overview-card .source-badge,
html:root .page-shell .explorer-list-card .source-badge {
  border-color: color-mix(in srgb, var(--modern-provider, currentColor), transparent 55%);
  font-weight: 700;
}

/* Raw provider colours miss 4.5:1 on these surfaces: lighten in dark, darken in light. */
html:root:not(.light-mode) .page-shell :is(.explorer-overview-card, .explorer-list-card) .source-badge {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #ffffff 35%);
}

html:root.light-mode .page-shell :is(.explorer-overview-card, .explorer-list-card) .source-badge {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #000000 40%);
}

html:root .page-shell .overview-thumb-poster,
html:root .page-shell .list-thumb-poster {
  border-radius: 0;
}

/* Discover and Personal Media posters sit flush with the card's edge (left on
   desktop, top on phones), so the card's own corners round them. */
html:root .page-shell .shared-media-card:is(.shared-media-card--discover, .shared-media-card--personal) .shared-media-card-poster-wrap,
html:root .page-shell .shared-media-card:is(.shared-media-card--discover, .shared-media-card--personal) .shared-media-card-poster {
  border-radius: 0;
}

html:root:not(.light-mode) .page-shell .shared-media-card :is(.shared-media-card-type, .shared-media-card-release-label) {
  color: rgba(148, 163, 184, 0.72);
}

html:root.light-mode .page-shell .shared-media-card :is(.shared-media-card-type, .shared-media-card-release-label) {
  color: rgba(71, 85, 105, 0.8);
}

html:root .page-shell .shared-media-card :is(.shared-media-card-type, .shared-media-card-release-label) {
  font-size: var(--fs-card-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html:root .page-shell .shared-media-card .shared-media-card-release-value {
  color: var(--text);
  font-weight: 600;
}

/* History, Discover, and Personal Media cards take the dashboard's backdrop
   (modules/card-art.js) under the same heavy shade, which reads whether the
   poster sits beside the text or above it on phones. */
html:root #history-view .history-list .history-page-card[data-art],
html:root .page-shell .shared-media-card[data-art] {
  position: relative;
  isolation: isolate;
}

html:root #history-view .history-list .history-page-card[data-art]::before,
html:root #history-view .history-list .history-page-card[data-art]::after,
html:root .page-shell .shared-media-card[data-art]::before,
html:root .page-shell .shared-media-card[data-art]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

html:root #history-view .history-list .history-page-card[data-art]::before,
html:root .page-shell .shared-media-card[data-art]::before {
  background: var(--modern-art, none) center 30% / cover no-repeat;
}

html:root #history-view .history-list .history-page-card[data-art]::after,
html:root .page-shell .shared-media-card[data-art]::after {
  opacity: var(--modern-art-shade, 0);
  background: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.84) 55%, rgba(12, 16, 22, 0.66) 100%);
}

html:root.light-mode #history-view .history-list .history-page-card[data-art]::after,
html:root.light-mode .page-shell .shared-media-card[data-art]::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.7) 100%);
}

html:root .page-shell .shared-media-card .shared-media-card-rating {
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 86%);
  padding: 0.05rem 0.45rem;
  font-size: var(--fs-badge);
  line-height: 1.4;
}

/* Movies and TV library cards share the dashboard history card appearance.
   The surface rules name [data-view-panel="explorer"] and .history-page-card to
   outrank the cards-mode layout rule above (radius, border and background). */
html:root .page-shell[data-active-view="explorer"] [data-view-panel="explorer"] #explorerPanel .history-page-card.explorer-history-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.82) 0%, rgba(15, 19, 25, 0.82) 100%);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

html:root .page-shell[data-active-view="explorer"] [data-view-panel="explorer"] #explorerPanel .history-page-card.explorer-history-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(38, 46, 57, 0.9) 0%, rgba(18, 23, 30, 0.9) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card::before,
html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card::before {
  background: var(--modern-art, none) center 30% / cover no-repeat;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card::after {
  opacity: var(--modern-art-shade, 0);
  background: linear-gradient(90deg, rgba(12, 16, 22, 0.94) 0%, rgba(12, 16, 22, 0.84) 55%, rgba(12, 16, 22, 0.66) 100%);
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card > .history-card-poster-wrapper,
html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card > .history-card-poster-wrapper .history-card-poster-link {
  border-radius: 0;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card:hover .history-card-poster-wrapper {
  transform: none;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card .meta-label {
  color: rgba(148, 163, 184, 0.72);
  font-size: var(--fs-card-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card .history-card-meta-row .meta-value {
  color: var(--text);
  font-weight: 600;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card .history-card-episode {
  color: var(--accent);
  font-weight: 600;
}

html:root .page-shell[data-active-view="explorer"] #explorerPanel .history-card-meta-row .meta-value.history-card-watch-count {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  padding: 0.08rem 0.5rem;
  color: #7dd3fc;
  font-size: var(--fs-card-watch-count);
  font-weight: 700;
}

html:root.light-mode .page-shell[data-active-view="explorer"] [data-view-panel="explorer"] #explorerPanel .history-page-card.explorer-history-card {
  border-color: rgba(15, 23, 42, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html:root.light-mode .page-shell[data-active-view="explorer"] [data-view-panel="explorer"] #explorerPanel .history-page-card.explorer-history-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
}

html:root.light-mode .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 55%, rgba(255, 255, 255, 0.7) 100%);
}

html:root.light-mode .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card .meta-label {
  color: rgba(71, 85, 105, 0.8);
}

html:root.light-mode .page-shell[data-active-view="explorer"] #explorerPanel .explorer-history-card .history-card-meta-row .meta-value.history-card-watch-count {
  border-color: rgba(2, 132, 199, 0.3);
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
}

/* History grid and list modes. Poster mode (.page-card-mode-compact) is left
   alone until its design call is made, except for a poster opened into its
   tile or row (.page-card-open, modules/page-card-open.js). */
html:root .page-shell [data-view-panel="history"] :where(.history-grid-card):is(:not(.page-card-mode-compact *), .page-card-open) .history-grid-poster {
  border-radius: 10px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html:root:not(.light-mode) .page-shell [data-view-panel="history"] :where(.history-grid-card):is(:not(.page-card-mode-compact *), .page-card-open) .history-grid-poster {
  border-color: rgba(255, 255, 255, 0.07);
}

html:root.light-mode .page-shell [data-view-panel="history"] :where(.history-grid-card):is(:not(.page-card-mode-compact *), .page-card-open) .history-grid-poster {
  border-color: rgba(15, 23, 42, 0.09);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html:root .page-shell [data-view-panel="history"] .history-grid-card:is(:not(.page-card-mode-compact *), .page-card-open):hover .history-grid-poster {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root:not(.light-mode) .page-shell [data-view-panel="history"] .history-grid-card:is(:not(.page-card-mode-compact *), .page-card-open):hover .history-grid-poster {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

html:root.light-mode .page-shell [data-view-panel="history"] .history-grid-card:is(:not(.page-card-mode-compact *), .page-card-open):hover .history-grid-poster {
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
}

html:root .page-shell [data-view-panel="history"] :where(.history-grid-card, .history-list-row):is(:not(.page-card-mode-compact *), .page-card-open) :is(.history-grid-copy b, .history-list-title) {
  font-weight: 700;
}

/* The episode title line, as on the cards; movies keep the muted "Movie". */
html:root .page-shell [data-view-panel="history"] .history-grid-card[data-prefetch-type="tv"]:is(:not(.page-card-mode-compact *), .page-card-open) .history-grid-copy span:not(.rewatch-badge) {
  color: var(--accent);
  font-weight: 600;
}

html:root .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-table-view {
  border-radius: 10px;
}

html:root:not(.light-mode) .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-table-view {
  border-color: rgba(255, 255, 255, 0.08);
}

html:root.light-mode .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-table-view {
  border-color: rgba(15, 23, 42, 0.1);
}

html:root .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-list-header {
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 7%);
  border-color: color-mix(in srgb, var(--line) 75%, var(--accent) 25%);
}

html:root .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-list-header span {
  letter-spacing: 0.025em;
}

/* The accent tint drops --muted to about 4.2:1 on the light header. */
html:root.light-mode .page-shell [data-view-panel="history"]:not(.page-card-mode-compact) .history-list-header span,
html:root.light-mode .page-shell .explorer-list-header span {
  color: #475569;
}

html:root:not(.light-mode) .page-shell [data-view-panel="history"] .history-list-row:is(:not(.page-card-mode-compact *), .page-card-open):hover {
  background: rgba(245, 158, 11, 0.08);
}

html:root.light-mode .page-shell [data-view-panel="history"] .history-list-row:is(:not(.page-card-mode-compact *), .page-card-open):hover {
  background: rgba(37, 99, 235, 0.06);
}

/* Provider badges as on the library list (step 3): tinted border, and the
   colour lightened (dark) or darkened (light) to reach 4.5:1. */
html:root .page-shell [data-view-panel="history"] .history-list-row:is(:not(.page-card-mode-compact *), .page-card-open) .source-badge {
  border-color: color-mix(in srgb, var(--modern-provider, currentColor), transparent 55%);
  font-weight: 700;
}

html:root:not(.light-mode) .page-shell [data-view-panel="history"] .history-list-row:is(:not(.page-card-mode-compact *), .page-card-open) .source-badge {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #ffffff 35%);
}

html:root.light-mode .page-shell [data-view-panel="history"] .history-list-row:is(:not(.page-card-mode-compact *), .page-card-open) .source-badge {
  color: color-mix(in srgb, var(--modern-provider, var(--soft)), #000000 40%);
}

/* Media detail: corners, surfaces, labels and hover. The highlighted episode keeps its
   !important yellow treatment from the rules above. */
/* Shows wrap the poster in a frame; movies place the image directly. */
html:root .media-detail-page .immersive-poster-frame,
html:root .media-detail-page .immersive-poster-img,
html:root .media-detail-page .season-poster-img {
  border-radius: 10px;
}

html:root .media-detail-page .season-poster-img {
  transition: transform 150ms ease, border-color 150ms ease, outline-color 160ms ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

html:root .media-detail-page .season-poster-card:hover .season-poster-img {
  outline-color: var(--accent);
}

/* Fact labels recede like the card labels; their colours stay as the base
   rules set them, since they sit over the backdrop. */
html:root .media-detail-page :is(.media-fact > span, .media-fact-table-label, .media-facts-group-label) {
  font-size: var(--fs-fact-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html:root .media-detail-page .season-accordion {
  border-radius: 10px;
  transition: border-color 160ms ease;
}

html:root:not(.light-mode) .media-detail-page .season-accordion {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.55) 0%, rgba(15, 19, 25, 0.55) 100%);
}

html:root.light-mode .media-detail-page .season-accordion {
  border-color: rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(241, 245, 249, 0.55) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html:root .media-detail-page .season-accordion.is-open {
  border-color: color-mix(in srgb, var(--accent), transparent 55%);
}

html:root .seasons-section.season-accordions {
  --season-open-line: color-mix(in srgb, var(--accent), transparent 55%);
  --season-card-radius: 10px;
  --season-open-fill: rgba(15, 19, 25, 0.55);
}

html:root.light-mode .seasons-section.season-accordions {
  --season-open-fill: rgba(241, 245, 249, 0.55);
}

html:root .media-detail-page .season-accordion.is-open .season-accordion-trigger:hover {
  background: transparent;
}

/* The gradient runs over the open card's height (--season-card-h, set beside the
   card on desktop; minus the card's two border lines), then holds its end colour,
   so the episode box matches the card row for row across the join. */
html:root:not(.light-mode) .media-detail-page .season-accordion-detail {
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.55) 0, rgba(15, 19, 25, 0.55) calc(var(--season-card-h, 100%) - 2px), rgba(15, 19, 25, 0.55) 100%);
}

html:root.light-mode .media-detail-page .season-accordion-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0, rgba(241, 245, 249, 0.55) calc(var(--season-card-h, 100%) - 2px), rgba(241, 245, 249, 0.55) 100%);
}

html:root .media-detail-page .season-accordion.is-open .season-accordion-trigger {
  border-bottom-color: color-mix(in srgb, var(--line), var(--accent) 20%);
}

html:root .media-detail-page .season-accordion.is-open .season-accordion-chevron {
  color: var(--accent);
}

html:root:not(.light-mode) .media-detail-page .season-accordion-trigger:hover {
  background: rgba(245, 158, 11, 0.08);
}

html:root.light-mode .media-detail-page .season-accordion-trigger:hover {
  background: rgba(37, 99, 235, 0.06);
}

/* Episode tiles take the dashboard card surface. The tile clips its corners
   around the flush, square thumbnail. */
html:root .media-detail-page .season-accordion-panel .immersive-episode-row {
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

html:root:not(.light-mode) .media-detail-page .season-accordion-panel .immersive-episode-row {
  border-color: rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(32, 39, 49, 0.82) 0%, rgba(15, 19, 25, 0.82) 100%);
}

html:root.light-mode .media-detail-page .season-accordion-panel .immersive-episode-row {
  border-color: rgba(15, 23, 42, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html:root .media-detail-page .season-accordion-panel .immersive-episode-row:hover {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root:not(.light-mode) .media-detail-page .season-accordion-panel .immersive-episode-row:hover {
  background: linear-gradient(180deg, rgba(38, 46, 57, 0.9) 0%, rgba(18, 23, 30, 0.9) 100%);
}

html:root.light-mode .media-detail-page .season-accordion-panel .immersive-episode-row:hover {
  background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
}

html:root .media-detail-page .season-accordion-panel .immersive-episode-row .episode-thumb-syncing {
  border-radius: 0;
}

html:root .media-detail-page .action-pill {
  border-radius: 8px;
}

/* Settings, a light pass: corners, surfaces and field labels only. The
   settings rules above use !important throughout, so these must too. */
html:root .settings-pane :is(.settings-row-main, .settings-row-help) > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) {
  border-radius: 10px !important;
}

html:root:not(.light-mode) .settings-pane :is(.settings-row-main, .settings-row-help) > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html:root.light-mode .settings-pane :is(.settings-row-main, .settings-row-help) > :is(.settings-card, .sync-panel, .logs-panel, .backup-settings-panel) {
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* The accordions and history cards inside a section. */
html:root .settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card) {
  border-radius: 10px !important;
  transition: border-color 160ms ease, background 160ms ease, outline-color 160ms ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

html:root:not(.light-mode) .settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card) {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html:root.light-mode .settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card) {
  border-color: rgba(15, 23, 42, 0.09) !important;
}

html:root .settings-pane .settings-row-main :is(details.sync-tool-details, details.sync-match-report, details.issue-category, .sync-history-card):is(:hover, :focus-within) {
  border-color: var(--accent) !important;
  outline-color: var(--accent);
}

html:root .settings-pane .settings-row-main details:is(.sync-tool-details, .sync-match-report, .issue-category)[open] > summary .accordion-chevron {
  color: var(--accent);
}

/* Field labels recede like the card labels. Inputs and selects keep their own
   case and spacing (the browser resets both on form controls). The passphrase
   labels carry a sentence-case hint, so they are left as they are. */
html:root .settings-pane .field-label:not(.checkbox-label):not(.backup-enable-row):not(.backup-passphrase-label) {
  font-size: var(--fs-field-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html:root:not(.light-mode) .settings-pane .field-label:not(.checkbox-label):not(.backup-enable-row):not(.backup-passphrase-label) {
  color: #94a3b8;
}

html:root.light-mode .settings-pane .field-label:not(.checkbox-label):not(.backup-enable-row):not(.backup-passphrase-label) {
  color: #64748b;
}

/* Match the queue card hover treatment to the Recently watched cards. */
html:root #timeline-view #upNextDashboardSection .dashboard-history-page-card,
html:root #timeline-view #upNextPanel .dashboard-history-page-card,
html:root #timeline-view #nowPlayingGrid .dashboard-history-page-card,
html:root #timeline-view #nowPlayingGrid .live-now-card {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Resting queue cards have no edge in either mode: over the dashboard
   artwork any border or shadow reads as a bright outline. Only hover and
   keyboard focus draw an edge. The artwork layers stop at the padding box,
   so the card's own panel colour is clipped there too; otherwise it shows
   through the transparent border as a light ring. */
html:root #timeline-view #upNextDashboardSection .dashboard-history-page-card,
html:root #timeline-view #upNextPanel .dashboard-history-page-card,
html:root #timeline-view #nowPlayingGrid .dashboard-history-page-card,
html:root #timeline-view #nowPlayingGrid .live-now-card {
  border-color: transparent;
  box-shadow: none;
  background-clip: padding-box;
}

html:root #timeline-view #upNextDashboardSection .dashboard-history-page-card:hover,
html:root #timeline-view #upNextPanel .dashboard-history-page-card:hover,
html:root #timeline-view #nowPlayingGrid .dashboard-history-page-card:hover,
html:root #timeline-view #nowPlayingGrid .live-now-card:hover {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

html:root:not(.light-mode) #timeline-view #upNextDashboardSection .dashboard-history-page-card:hover,
html:root:not(.light-mode) #timeline-view #upNextPanel .dashboard-history-page-card:hover,
html:root:not(.light-mode) #timeline-view #nowPlayingGrid .dashboard-history-page-card:hover,
html:root:not(.light-mode) #timeline-view #nowPlayingGrid .live-now-card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

html:root.light-mode #timeline-view #upNextDashboardSection .dashboard-history-page-card:hover,
html:root.light-mode #timeline-view #upNextPanel .dashboard-history-page-card:hover,
html:root.light-mode #timeline-view #nowPlayingGrid .dashboard-history-page-card:hover,
html:root.light-mode #timeline-view #nowPlayingGrid .live-now-card:hover {
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.14);
}

/* The regular Up Next row has a few pixels of inset, like the Recently
   watched rails, so its cards can lift without clipping. The featured rail
   touches its scrollport edge, so it keeps the outline and shadow in place. */
html:root #timeline-view #upNextDashboardSection .dashboard-history-page-card:hover,
html:root #timeline-view #upNextPanel .dashboard-history-page-card:hover,
html:root #timeline-view #nowPlayingGrid .dashboard-history-page-card:hover,
html:root #timeline-view #nowPlayingGrid .live-now-card:hover {
  transform: translateY(-2px);
}

/* Both scrolling rails need the same inset as Recently watched so a lifted
   card and its shadow remain inside the scrollport. */
html:root #timeline-view #nowPlayingGrid {
  padding: 0.55rem 0.2rem 0;
}

/* The idle-feature wrapper is a single featured card, not a scrolling rail.
   Let its hover edge reach the padding on #nowPlayingGrid instead of clipping
   it at a nested overflow boundary. */
html:root #timeline-view #nowPlayingGrid .modern-idle-feature {
  overflow: visible;
}