/* Reel — the site layer on top of nocturne.css.
   The "Reel" theme retunes Nocturne's tokens to a deep red; everything below
   reads from those tokens. */

:root {
  --color-bg: #0a0808;
  --color-surface: #161011;
  --color-text: #ece4e4;
  --color-accent: #c42f38;
  --color-accent-100: #fbe9ea;
  --color-accent-300: #f0a9ad;
  --color-accent-400: #d85a62;
  --color-accent-700: #6e1a1f;
  --color-accent-800: #4a1215;
  --color-accent-900: #2a0c0e;
  --color-neutral-800: #2a2222;
  --color-neutral-100: #f3eded;
  --color-divider: rgba(236, 228, 228, 0.14);
  --color-scrim: rgba(10, 8, 8, 0.8);
  --color-glow: rgba(196, 47, 56, 0.45);

  --page-max: 1280px;
  --page-gutter: 32px;
}

html { color-scheme: dark; }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 500px at 0% 0%, var(--color-accent-900) 0%, var(--color-bg) 60%) no-repeat, var(--color-bg);
}
a { color: var(--color-accent-400); }
a:hover { color: var(--color-accent-300); }
[hidden] { display: none !important; }

/* — header — */
.nav { padding: 16px var(--page-gutter); max-width: var(--page-max); margin: 0 auto; }
.nav-brand { display: flex; align-items: center; gap: 8px; }
.nav-brand i { color: var(--color-accent); font-size: 22px; }

.page {
  max-width: var(--page-max); margin: 0 auto;
  padding: 24px var(--page-gutter) 64px;
  display: flex; flex-direction: column; gap: 56px;
}
.page-tight { gap: 24px; }

/* — home hero — */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px; align-items: end;
}
.hero-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hero-copy { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.hero-copy .card-kicker { color: var(--color-accent-300); }
.hero-copy h1 { margin: 0; font-size: 44px; text-wrap: balance; }
.hero-copy p { margin: 0; opacity: .8; max-width: 44ch; text-wrap: pretty; }
.hero-copy .card-meta { font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-head h3 { margin: 0; }

/* — thumbnails — */
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; }
.thumb:hover img { transform: scale(1.03); }
.thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; color: var(--color-neutral-800); }
.thumb .tag.duration {
  position: absolute; right: 8px; bottom: 8px; pointer-events: none;
  background: var(--color-scrim); color: var(--color-text);
}
.thumb .progress {
  position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-accent);
}

/* — video cards — */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.grid-browse { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 20px; }
.vcard { display: flex; flex-direction: column; gap: 10px; }
.vcard-link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.vcard-link:hover { color: inherit; }
.vcard-link:hover .card-title { color: var(--color-accent-300); }
.vcard .card-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rows { display: flex; flex-direction: column; gap: 4px; }
.vrow {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 10px; border-radius: var(--radius-md);
}
.vrow:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.vrow .thumb { box-shadow: none; }
.vrow .card-body { max-width: 70ch; }

/* — browse toolbar — */
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
.toolbar h1 { margin: 0; }
.toolbar-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.toolbar .input { width: 220px; }
.seg-opt i { font-size: 16px; }
.empty { padding: 48px 0; }

/* — watch page — */
.watch { display: flex; flex-direction: column; gap: 20px; }
.watch .btn-ghost { align-self: flex-start; }
.player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--color-surface);
}
.player video, .player .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.player video { background: var(--color-bg); }
.player .poster { object-fit: cover; }
.player-overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.play-big {
  width: 72px; height: 72px; border-radius: 50%; font-size: 28px;
  border: 1px solid var(--color-accent); background: rgba(10, 8, 8, .55);
  color: var(--color-accent-300); box-shadow: 0 0 32px var(--color-glow);
}
.play-big:hover { background: rgba(74, 18, 21, .8); }
.play-big:active { background: var(--color-accent-800); }
.player-quality {
  position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 8px; border-radius: var(--radius-md);
  background: var(--color-scrim); color: var(--color-text);
  opacity: 0; transition: opacity .2s ease;
}
.player:hover .player-quality, .player-quality:focus-within { opacity: 1; }
.player-quality select {
  font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer;
}
.player-quality option { background: var(--color-surface); }
.player-error {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 24px; background: var(--color-scrim);
}

.details { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.details h1 { margin: 0; text-wrap: balance; }
.details .tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.details p { margin: 6px 0 0; font-size: 16px; opacity: .85; text-wrap: pretty; white-space: pre-line; }
.btn-primary.is-on { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }

.site-footer {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter) 40px;
  font-size: 12px;
}

/* — shows & episodes — */
.ep-code { color: var(--color-accent-300); font-variant-numeric: tabular-nums; }
.show-link { text-decoration: none; color: var(--color-accent-300); font-size: 12px; }
.show-link:hover { color: var(--color-accent-100); }
.episode-list { display: flex; flex-direction: column; gap: 4px; }
.episode {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 10px; border-radius: var(--radius-md); color: inherit; text-decoration: none;
}
.episode:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: inherit; }
.episode.is-next { box-shadow: inset 2px 0 0 var(--color-accent); }
.episode .thumb { box-shadow: none; }
.episode-play {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px;
  color: var(--color-accent-100); background: rgba(10, 8, 8, .35); opacity: 0; transition: opacity .2s ease;
}
.episode:hover .episode-play, .episode:focus-visible .episode-play { opacity: 1; }
.episode-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.episode-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ep-num { font-size: 20px; color: color-mix(in srgb, var(--color-text) 45%, transparent); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.episode .card-body { max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.episode:hover .card-title { color: var(--color-accent-300); }

.up-next {
  position: absolute; right: 16px; bottom: 64px; z-index: 2; width: min(320px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: var(--radius-md); background: rgba(10, 8, 8, .88); box-shadow: var(--shadow-lg);
}
.up-next .actions { margin-top: 2px; }

@media (max-width: 600px) {
  .episode { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 6px; }
  .episode .card-body { display: none; }
}

/* — sign-in & account — */
.auth-page { padding-top: 48px; }
.auth-panel { display: flex; flex-direction: column; gap: 14px; width: min(400px, 100%); }
.auth-panel h1 { margin: 0; }
.auth-panel > p { margin: 0; }
.auth-panel form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 44px; }
.input-wrap .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--color-text); opacity: .7; }
.input-wrap .reveal:hover { opacity: 1; }
.hint { margin: -6px 0 0; font-size: 12px; }
.notice {
  display: flex; gap: 8px; align-items: flex-start; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-divider);
}
.notice i { font-size: 18px; flex: none; margin-top: 1px; }
.notice-error { border-color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent-900) 70%, transparent); color: var(--color-accent-100); }
.notice-error i { color: var(--color-accent-400); }
.notice-ok i { color: var(--color-accent-300); }

.nav .nav-user { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-user i { font-size: 16px; }

.account { display: flex; flex-direction: column; gap: 40px; max-width: 720px; }
.account-block { display: flex; flex-direction: column; gap: 14px; }
.account-block h3 { margin: 0; }
.account-block form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.account-block .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.account-block .check input { accent-color: var(--color-accent); }
.user-row td:last-child { text-align: right; white-space: nowrap; }

/* — admin panel — */
.admin-tab { display: flex; flex-direction: column; gap: 32px; }
.admin-block { display: flex; flex-direction: column; gap: 12px; }
.admin-block h3 { margin: 0; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--color-accent); width: 16px; height: 16px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.btn.danger { color: var(--color-accent-400); }
.btn.danger:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }

.admin-list { display: flex; flex-direction: column; gap: 2px; }
.admin-row {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 8px; border-radius: var(--radius-md);
}
.admin-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.admin-row .thumb { box-shadow: none; }
.admin-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-row-main .card-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-row-actions { display: flex; gap: 6px; align-items: center; }
.admin-row-actions .ph-fill.ph-star { color: var(--color-accent); }

.jobs { display: flex; flex-direction: column; gap: 8px; }
.job {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.job > i { font-size: 20px; color: var(--color-accent-300); }
.job-error > i, .job-cancelled > i { color: var(--color-accent-400); }
.job-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.job-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); overflow-wrap: anywhere; }
.job-sub.ok { color: var(--color-accent-300); }
.job-sub.warn, .job-sub.err { color: var(--color-accent-400); }
.bar { height: 4px; border-radius: 2px; background: var(--color-neutral-800); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .4s ease; }
.spin { animation: spin 1.2s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.dropzone {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer;
  padding: 28px 24px; border-radius: var(--radius-lg);
  border: 1px dashed var(--color-divider); background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}
.dropzone > i { font-size: 32px; color: var(--color-accent); }
.dropzone .dz-title { font-size: 17px; font-weight: 500; }
.dropzone .text-muted { font-size: 13px; }
.dropzone:hover, .dropzone.over { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent-900) 50%, transparent); }
.uploads { display: flex; flex-direction: column; gap: 12px; }
.upload {
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.upload-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.upload-head > i { font-size: 24px; color: var(--color-accent-300); }
.upload-name .card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-fields { display: flex; flex-direction: column; gap: 10px; }
.upload-opts { display: flex; flex-wrap: wrap; gap: 20px; }
.upload.is-done .upload-fields { display: none; }
.upload-progress { display: flex; flex-direction: column; gap: 6px; }

.kind-seg { align-self: flex-start; }
.ep-block, .episode-fields { display: flex; flex-direction: column; gap: 6px; }
.ep-block .form-row, .episode-fields .form-row { grid-template-columns: minmax(0, 1fr) 90px 90px; }
.ep-hint { font-size: 12px; min-height: 1em; }
.ep-hint i { color: var(--color-accent-300); }
.admin-row .ep-code { margin-right: 8px; font-size: 13px; }
.library-head { flex-wrap: wrap; gap: 12px; }
.lib-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.lib-heading {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.lib-heading i { font-size: 16px; color: var(--color-accent-300); }
.lib-empty { padding: 8px; font-size: 14px; }
.show-block { display: flex; flex-direction: column; margin-bottom: 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
.show-row .card-title { font-size: 18px; }
.show-episodes { display: flex; flex-direction: column; padding: 0 0 6px 24px; }
.admin-row.is-episode { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 6px 8px; }
.season-label { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: 10px 8px 2px; }

.edit-dialog { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.edit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.edit-media { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.edit-media .player { width: 100%; border-radius: var(--radius-md); }
.edit-media video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-bg); }
.edit-fields { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 760px) {
  .edit-grid { grid-template-columns: minmax(0, 1fr); }
  .show-episodes { padding-left: 8px; }
  .admin-row.is-episode { grid-template-columns: 72px minmax(0, 1fr); }
  .ep-block .form-row, .episode-fields .form-row { grid-template-columns: minmax(0, 1fr) 70px 70px; }
  .admin-row { grid-template-columns: 96px minmax(0, 1fr); }
  .admin-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .user-row td:last-child { white-space: normal; }
}

/* — loading skeletons — */
.skeleton .thumb, .skeleton .line {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-neutral-800) 50%, var(--color-surface) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skeleton .line { height: 12px; border-radius: var(--radius-sm); width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton .thumb, .skeleton .line { animation: none; }
  .thumb img { transition: none; }
}

/* — small screens — */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-copy h1 { font-size: 34px; }
  .vrow { grid-template-columns: 140px minmax(0, 1fr); }
  .vrow .btn-icon { display: none; }
}
@media (max-width: 600px) {
  :root { --page-gutter: 16px; }
  .page { gap: 40px; padding-top: 8px; }
  h1 { font-size: 32px; }
  .toolbar .input { width: 100%; }
  .toolbar-controls { width: 100%; }
  .seg { max-width: 100%; overflow-x: auto; }
  .vrow { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 6px; }
  .vrow .card-body { display: none; }
  .player { border-radius: var(--radius-md); }
}