.da7-series-library,
.series-watch-page {
  --series-ink: #fff;
  --series-dark: #101b2f;
  --series-gold: #ffbf33;
  padding-block: 24px 48px;
}

.series-library-heading,
.series-watch-page .series-heading {
  background: linear-gradient(120deg, #243855, var(--series-dark) 65%);
  color: var(--series-ink);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 42px);
}

.series-kicker { display: inline-block; color: var(--series-gold); font-size: .84rem; font-weight: 800; }
.series-library-heading h1,
.series-watch-page .series-heading h1 {
  color: inherit;
  font-size: clamp(1.7rem, 4.3vw, 2.85rem);
  line-height: 1.35;
  margin: 4px 0 10px;
}
.series-library-heading p,
.series-watch-page .series-intro { color: #e1e8f4; line-height: 1.85; margin: 0; }

.series-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--series-gold);
  color: #182338;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.series-button:hover { color: #182338; background: #ffd472; text-decoration: none; }
.series-library-filters {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-block: 18px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.series-library-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.series-library-filters input, .series-library-filters select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg, var(--card));
  color: inherit;
  font: inherit;
}
.series-library-filters summary { width: fit-content; padding: 6px 4px; font-weight: 750; cursor: pointer; }
.series-library-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; padding-block: 10px; }
.series-library-fields label { display: grid; align-content: start; gap: 4px; font-size: .875rem; min-width: 0; }
.series-library-fields label[hidden] { display: none; }
.series-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.series-library-results { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.35rem; }
.series-library-results span { border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; font-size: .875rem; }
.series-library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 365px), 1fr)); gap: 20px; }
.series-library-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.series-library-cover { background: var(--series-dark); aspect-ratio: 16/9; }
.series-library-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.series-library-card-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(15px, 3vw, 23px); }
.series-library-card-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
.series-library-card h3 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.5; }
.series-library-card h3 a, .series-library-parts a { color: inherit; }
.series-library-card p { margin: 0; color: var(--muted); line-height: 1.8; }
.series-library-parts { align-self: stretch; list-style: none; margin: 0; padding: 0; }
.series-library-parts li + li { border-block-start: 1px solid var(--line); }
.series-library-parts a { min-height: 44px; padding-block: 7px; display: flex; align-items: center; gap: 11px; }
.series-library-parts span { white-space: nowrap; color: var(--muted); font-size: .77rem; }
.series-library-parts strong { overflow-wrap: anywhere; }
.series-library-open { margin-block-start: auto; }
.series-library-empty { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.series-library-empty p { margin-block-start: 0; }

.series-library-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block-end: 8px; font-weight: 750; }
.series-watch-page .series-heading { display: flex; align-items: center; gap: clamp(18px, 4vw, 42px); }
.series-heading-art { flex: 0 0 36%; min-width: 0; }
.series-watch-page .series-heading-cover { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: #101b2f; }
.series-heading-copy { min-width: 0; }
.series-watch-page .series-heading .series-stats { color: #e1e8f4; margin-block: 14px; }
.series-jump { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.series-jump a:not(.series-button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--series-ink); text-decoration: underline; text-underline-offset: 4px; }
.series-watch-page :is(#series-guide, #series-quiz, [id^="episode-"], .series-reading [id]) { scroll-margin-top: 155px; }
.series-watch-page .series-reading > :is(p, ul, ol):not(.da7-source-list) { max-width: 76ch; }
.series-content-index { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-block: 0 20px; }
.series-content-index ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 8px 0 0; padding: 0; }
.series-content-index a { text-decoration: underline; text-underline-offset: 4px; }
.series-watch-page .series-queue li:target { outline: 2px solid var(--series-gold); outline-offset: -2px; border-radius: 10px; }

.da7-series-library :focus-visible,
.series-watch-page :focus-visible { outline: 2px solid #377cea; outline-offset: 3px; }

@media (max-width: 760px) {
  .series-watch-page .series-heading { flex-direction: column; align-items: stretch; }
  .series-heading-art { max-width: 420px; flex: auto; }
  .series-watch-page .series-heading-cover { border-radius: 12px; }
  .series-library-grid { grid-template-columns: minmax(0, 1fr); }
}