:root {
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #20242d;
  --border: #2a2f3a;
  --text: #e6e9ef;
  --muted: #8b93a3;
  --accent: #6c8cff;
  --accent-2: #4b6bff;
  --good: #36c08a;
  --radius: 10px;
  --max: 1040px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--max); margin: 0 auto; padding: 24px 20px 60px; }

/* Top bar -------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; color: var(--text); }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.nav a { color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--text); text-decoration: none; }
.search-mini input {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 6px 14px; width: 200px;
}
.linklike { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.linklike:hover { color: var(--text); }

/* Headings ------------------------------------------------------------- */
.page-head { margin-bottom: 20px; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block; cursor: pointer;
  background: var(--accent-2); color: #fff; border: 1px solid transparent;
  border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600;
}
.btn:hover { background: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.tiny { padding: 3px 8px; font-size: 12px; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); }

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.banner.error { background: #3a1d22; color: #ffb4be; border: 1px solid #5e2a32; }

/* Forms ---------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
input[type=email], input[type=password], input[type=search], select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font: inherit;
}
.inline { display: inline; }
.auth { max-width: 380px; margin: 30px auto; background: var(--surface); padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); }

/* Search --------------------------------------------------------------- */
.search-form { margin-bottom: 20px; }
.search-tabs { margin: 0 0 14px; }
.search-form input { width: 100%; font-size: 16px; padding: 12px 16px; border-radius: 999px; }
.results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.result { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.result-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summary { color: var(--muted); margin: 4px 0 8px; font-size: 14px; max-height: 4.5em; overflow: hidden; }
.actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.in-lib { color: var(--good); font-weight: 600; font-size: 13px; }

/* Posters -------------------------------------------------------------- */
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.poster { display: block; }
.poster.small { width: 70px; height: 100px; flex: 0 0 70px; }
.poster.large { width: 210px; height: 300px; flex: 0 0 210px; }
.show-name { font-weight: 600; color: var(--text); font-size: 16px; }

/* Up Next -------------------------------------------------------------- */
.upnext-grid, .library-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.upnext-card, .lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.upnext-card .poster, .lib-card .poster { position: relative; aspect-ratio: 2/3; flex-shrink: 0; }
.upnext-body, .lib-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Pin the action row / primary button to the card bottom so buttons align
   across a row regardless of title length or add/in-library state. */
.lib-body > .actions, .lib-body > .btn, .upnext-body > .btn { margin-top: auto; }
.ep-line { display: flex; gap: 8px; align-items: baseline; }
.ep-code { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; font-size: 13px; }
.ep-name { font-size: 14px; }
.lib-badge {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--good); color: #fff; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.progress { background: var(--surface-2); border-radius: 999px; height: 7px; overflow: hidden; }
.progress-bar { background: var(--good); height: 100%; }

/* Show detail ---------------------------------------------------------- */
.show-hero { display: flex; gap: 24px; margin-bottom: 28px; position: relative; }
.show-hero.has-backdrop {
  min-height: 340px; align-items: flex-end; overflow: hidden;
  padding: 26px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.show-backdrop-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.show-hero.has-backdrop::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,17,21,.96) 0%, rgba(15,17,21,.82) 42%, rgba(15,17,21,.3) 100%),
    linear-gradient(0deg, rgba(15,17,21,.78) 0%, rgba(15,17,21,.12) 58%, rgba(15,17,21,.34) 100%);
}
.show-hero.has-backdrop > .poster,
.show-hero.has-backdrop > .show-info { position: relative; z-index: 2; }
.show-hero.has-backdrop > .poster.large {
  width: 180px; height: 257px; flex-basis: 180px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
}
.show-hero.has-backdrop .show-info { max-width: 680px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.show-hero.has-backdrop .muted { color: #c3cad8; }
.show-hero.has-backdrop .summary { color: #d3d8e3; max-height: 6em; }
.show-hero.has-backdrop .chip {
  background: rgba(24,27,34,.72); border-color: rgba(230,233,239,.18); color: #d7dce7;
}
.show-info { min-width: 0; }
.genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.ext-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; font-size: 13px; }
.show-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0; }
.show-actions select { padding: 5px 8px; }
@media (max-width: 680px) {
  .show-hero { flex-direction: column; }
  .show-hero.has-backdrop { min-height: 0; align-items: flex-start; padding: 18px; gap: 16px; }
  .show-hero.has-backdrop::after {
    background:
      linear-gradient(0deg, rgba(15,17,21,.96) 0%, rgba(15,17,21,.72) 58%, rgba(15,17,21,.38) 100%),
      linear-gradient(90deg, rgba(15,17,21,.84) 0%, rgba(15,17,21,.28) 100%);
  }
  .show-hero.has-backdrop > .poster.large {
    width: 132px; height: 188px; flex: 0 0 auto;
  }
  .show-hero.has-backdrop .summary { max-height: 4.5em; }
}

/* Cast */
.section-title { font-size: 18px; margin: 4px 0 14px; }
.cast-section { margin: 8px 0 28px; }
.cast-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; }
.cast-card { min-width: 0; }
.cast-link { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.cast-link:hover { text-decoration: none; }
.cast-link:hover .cast-name { color: var(--accent); }
.cast-photo { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.cast-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.cast-char { line-height: 1.2; }

.season { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.season-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: pointer; list-style: none; user-select: none; }
.season-head::-webkit-details-marker { display: none; }
.season-head::before { content: "›"; flex: 0 0 auto; color: var(--muted); font-size: 16px; font-weight: 700; line-height: 1; transition: transform .15s ease; }
.season[open] > .season-head::before { transform: rotate(90deg); color: var(--accent); }
.season:not([open]) > .season-head { border-bottom: none; }
.season-head:hover { background: var(--surface); }
.season-title { font-size: 15px; font-weight: 600; }
.season-controls { margin-left: auto; display: flex; gap: 8px; }
.episodes { list-style: none; margin: 0; padding: 0; }
.episode { display: flex; align-items: flex-start; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.episode:last-child { border-bottom: none; }
.episode:has(.watch-toggle.on) { opacity: .62; }
.episode .ep-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-date { flex: 0 0 auto; }

/* Expandable episode rows */
.ep-disc { flex: 1; min-width: 0; }
.ep-summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  user-select: none; -webkit-user-select: none;
  padding: 3px 6px; margin: -3px -6px; border-radius: 6px;
  transition: background .12s ease;
}
.ep-summary:hover { background: var(--surface-2); }
.ep-summary::-webkit-details-marker { display: none; }
.ep-summary::before {
  content: "›"; flex: 0 0 auto; width: 10px;
  color: var(--muted); font-size: 16px; line-height: 1; font-weight: 700;
  transition: transform .15s ease, color .15s ease;
}
.ep-disc[open] > .ep-summary::before { transform: rotate(90deg); color: var(--accent); }
.ep-summary:hover .ep-name { color: var(--accent); }
.ep-detail { padding: 10px 0 4px 22px; }
.ep-detail-inner { display: flex; gap: 14px; }
.ep-still { width: 200px; max-width: 42%; height: auto; border-radius: 8px; background: var(--surface-2); }
.ep-detail-text { min-width: 0; }
.ep-detail-text .summary { max-height: none; }
@media (max-width: 560px) {
  .ep-detail-inner { flex-direction: column; }
  .ep-still { max-width: 100%; }
}

.watch-toggle { cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; white-space: nowrap; }
.watch-toggle:hover { color: var(--text); border-color: var(--accent); }
.watch-toggle.on { background: rgba(54,192,138,.14); border-color: var(--good); color: var(--good); }

/* Discover -------------------------------------------------------------- */
.disc-row { margin: 0 0 30px; }
.disc-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.disc-row-head h2 { font-size: 18px; }
.disc-row-head a { font-size: 14px; color: var(--muted); }
.disc-row-head a:hover { color: var(--accent); }

.discover-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.discover-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }

/* Library toolbar + stats */
.stats-strip { font-size: 13px; }
.library-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.library-toolbar input[type=search] { flex: 1 1 220px; min-width: 200px; max-width: 360px; }
.library-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }

/* Library status sections (Running / Awaiting release / Ended) */
.library-section { margin-bottom: 26px; }
.library-section > .section-title { margin: 0 0 12px; font-size: 17px; }
.library-section.ended > .section-title { color: var(--muted); font-size: 15px; }
.library-grid.compact { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.library-grid.compact .lib-body { padding: 8px; gap: 4px; }
.library-grid.compact .show-name { font-size: 13px; }
.library-grid.compact .progress { display: none; }
.library-grid.compact .btn { font-size: 11px; padding: 3px 8px; }

/* Library list view (dense rows, grid⇄list toggle) */
.lib-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lib-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.lib-row .poster.small { width: 46px; height: 66px; flex: 0 0 46px; }
.lib-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lib-row-meta { display: flex; align-items: center; gap: 10px; max-width: 360px; }
.lib-row-meta .progress { flex: 1 1 auto; }
.lib-row-meta .count { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lib-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.lib-row-side .nx { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) {
  .lib-row { flex-wrap: wrap; }
  .lib-row-side { width: 100%; margin-left: 60px; }
  .lib-row-meta { max-width: none; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
a.chip { color: var(--muted); cursor: pointer; }
a.chip:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.seg a { padding: 5px 14px; font-size: 13px; color: var(--muted); }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on { background: var(--accent-2); color: #fff; }
/* Segmented control rendered as radios (the grid⇄list view toggle). The active
   state is driven by :checked so it updates client-side without re-rendering the
   toolbar (only the results fragment swaps). */
.seg label { padding: 5px 14px; font-size: 13px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label:hover { color: var(--text); }
.seg label:has(input:checked) { background: var(--accent-2); color: #fff; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.library-toolbar .seg, .discover-filters .seg { margin-top: 0; margin-left: auto; align-self: flex-end; }

.cal-day { margin-bottom: 22px; }
.cal-date { font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; }

/* Calendar toolbar (nav + view toggle) */
.cal-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-toolbar h1 { margin: 0; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-month { font-weight: 600; min-width: 124px; text-align: center; }
.cal-toolbar .seg { margin-top: 0; margin-left: auto; }

/* Month grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 0; }
.cal-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-height: 92px; padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell.out { opacity: .45; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell-day { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 2px; }
.cal-cell.today .cal-cell-day { color: var(--accent); }
.cal-cell-eps { display: flex; flex-direction: column; gap: 3px; }
.cal-chip { display: block; width: 100%; text-align: left; border: none; cursor: pointer; background: var(--surface-2); color: var(--text); border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover { background: var(--border); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-chip.upcoming { cursor: default; background: transparent; border: 1px dashed var(--border); color: var(--muted); }
@media (max-width: 640px) {
  .cal-cell { min-height: 60px; }
  .cal-cell-day { font-size: 11px; }
  .cal-chip { font-size: 10px; padding: 1px 4px; }
}

/* Compact agenda rows for the library calendar */
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: none; }
.cal-row:has(.watch-toggle.on) { opacity: .55; }
.cal-show { font-weight: 600; color: var(--text); flex: 0 0 auto; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ep { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-action { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .cal-show { max-width: 120px; }
  .cal-ep { display: none; }
}

/* Misc ----------------------------------------------------------------- */
.empty { text-align: center; padding: 50px 20px; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; border-top: 1px solid var(--border); }
.foot a { color: var(--muted); }

@media (max-width: 560px) {
  .show-hero { flex-direction: column; }
  .poster.large { width: 160px; height: 228px; flex: 0 0 auto; }
  .show-hero.has-backdrop > .poster.large { width: 132px; height: 188px; flex: 0 0 auto; }
}