/* ===================================================================
   Yume — web client
   Built entirely on the Yume design tokens (css/tokens.css, generated
   from packages/design-tokens). No hard-coded colors below — every
   value references a token so dark/light themes come for free.
   =================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* subtle accent-tinted ambience behind everything */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at -10% 100%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%);
}

::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* every route change slides its content in */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.page > * { animation: page-in .38s var(--ease-out) both; }
.page > :nth-child(2) { animation-delay: .05s; }
.page > :nth-child(3) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .page > * { animation: none; } }

/* ===== layout ===== */

.app-shell {
  display: flex;
  flex-direction: row;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  position: relative;
  z-index: 1;
}

.global-banner {
  position: fixed;
  inset: 0 0 auto 0;
  height: 46vh;
  z-index: 0;
  background-size: cover;
  background-position: center 25%;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  filter: brightness(.4) saturate(1.05);
}
.global-banner.visible { opacity: .55; }

/* ===== sidebar — slim icon rail (Hayase-style); labels are tooltips ===== */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) 0;
  gap: var(--space-2);
  z-index: 30;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--space-2);
  color: var(--fg);
}
.sidebar-logo svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
.sidebar-logo-text { display: none; }

.sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--fg-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
}
.sidebar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-btn span { display: none; }
.sidebar-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.nav-more { display: none; } /* mobile-only; shown in the bottom bar via media query */
.sidebar-btn:hover { background: var(--bg-raised); color: var(--fg); }
.sidebar-btn.active {
  background: var(--border-strong);
  color: var(--fg);
}
.sidebar-spacer { flex-grow: 1; }

/* ===== main page area ===== */

.page {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: clip;
  min-width: 0;
  scroll-behavior: smooth;
}

.page-pad { padding: var(--space-5) var(--space-6) var(--space-8); }

/* ===== hero (home) ===== */

.hero {
  position: relative;
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-7) var(--space-6) var(--space-6);
  overflow: clip;
}

.hero-content { max-width: 46rem; position: relative; z-index: 2; }

.hero-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.hero-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--fg-muted);
}
.hero-meta .dot::before { content: '•'; color: var(--fg-faint); }

.hero-desc {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 40rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.hero-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ===== buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: .55rem 1.3rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-theme { background: var(--accent); color: var(--accent-fg); }
.btn-theme:hover, .btn-primary:hover { box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-secondary { background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--bg-raised); }
.btn-sm { padding: .35rem .9rem; font-size: var(--text-xs); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ===== horizontal sections ===== */

.section { margin-top: var(--space-6); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--space-6);
  margin-bottom: var(--space-1);
}
.section-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  margin: 0;
  letter-spacing: -.01em;
}
.section-title::before {
  content: '';
  width: 4px;
  height: 1.15em;
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  flex-shrink: 0;
}
.section-more {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.section-more::after { content: ' →'; }
.section-more:hover { color: var(--accent); transform: translateX(2px); }

.hscroll {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  padding: var(--space-3) var(--space-6) var(--space-4);
  gap: var(--space-4);
  scrollbar-width: thin;
}

/* ===== anime card ===== */

.card {
  width: var(--card-w);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-base) var(--ease-spring);
}
.card:hover { transform: translateY(-3px); }

.card-cover {
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--bg-raised);
  position: relative;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card:hover .card-cover {
  box-shadow: var(--shadow-2), 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 28px color-mix(in srgb, var(--accent) 18%, transparent);
}
.card:hover .card-title { color: var(--accent); }
.card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card-cover img { transform: scale(1.06); }

.card-cover .card-status-dot {
  position: absolute;
  top: .5rem; left: .5rem;
  width: .55rem; height: .55rem;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2.5px color-mix(in oklab, var(--bg) 80%, transparent);
}

.card-cover .card-score {
  position: absolute;
  bottom: .5rem; right: .5rem;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  padding: .12rem .5rem;
  display: flex;
  align-items: center;
  gap: .28rem;
  color: var(--fg);
}
.card-score svg { width: .62rem; height: .62rem; fill: var(--accent); stroke: var(--accent); }

.card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: color-mix(in oklab, var(--fg) 15%, transparent);
}
.card-progress > div { height: 100%; background: var(--accent); }

.card-cover .card-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg-sunken) 35%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.card:hover .card-play { opacity: 1; }
.card-play svg {
  width: 1.15rem; height: 1.15rem;
  fill: #fff; stroke: none;
  padding: .6rem;
  box-sizing: content-box;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--accent) 92%, transparent);
  box-shadow: var(--shadow-2);
  transform: scale(.8);
  transition: transform var(--dur-base) var(--ease-spring);
}
.card:hover .card-play svg { transform: scale(1); }

.card-title {
  transition: color var(--dur-fast) var(--ease-out);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.card-sub {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-weight: var(--weight-medium);
  margin-top: .1rem;
}

/* ===== site footer ===== */

.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--bg-raised);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-5);
  max-width: var(--content-max);
}
.footer-brand { max-width: 20rem; }
.footer-logo { display: flex; align-items: center; gap: .5rem; color: var(--accent); font-weight: var(--weight-black); font-size: var(--text-lg); }
.footer-logo span { color: var(--fg); letter-spacing: -.02em; }
.footer-tagline { color: var(--fg-faint); font-size: var(--text-sm); margin: var(--space-2) 0 0; line-height: 1.5; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-col h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); margin: 0 0 .2rem; font-weight: var(--weight-bold); }
.footer-col a { color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--fg-faint); font-size: var(--text-xs);
}
.footer-credits a { color: var(--fg-muted); text-decoration: underline; }
.footer-credits a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .site-footer { padding: var(--space-5) var(--space-4) var(--space-4); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-bottom { flex-direction: column; }
}

/* ===== spotlight header (random-anime banner) ===== */

.spotlight {
  position: relative;
  min-height: 12rem;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6) var(--space-6) var(--space-5);
  margin-bottom: var(--space-4);
  overflow: clip;
  isolation: isolate;
}
.spotlight-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 28%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease-out), transform 12s linear;
}
.spotlight-bg.loaded { opacity: .5; transform: scale(1.12); }
.spotlight-scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 3%, color-mix(in oklab, var(--bg) 35%, transparent) 45%, transparent 78%),
    linear-gradient(to right, color-mix(in oklab, var(--bg) 82%, transparent) 8%, transparent 62%);
}
.spotlight-inner { position: relative; max-width: 46rem; }
.spotlight-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1.04;
  margin: 0;
  text-shadow: 0 2px 20px color-mix(in oklab, var(--bg-sunken) 70%, transparent);
}
.spotlight-sub {
  color: var(--fg-muted);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  margin: .4rem 0 0;
}
.spotlight-credit {
  position: absolute;
  right: var(--space-5); bottom: var(--space-3);
  max-width: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-faint);
  opacity: .5;
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.spotlight-credit::before {
  content: '';
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-right: .4rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  vertical-align: middle;
}
.spotlight-credit:hover { opacity: .95; color: var(--fg-muted); }

@media (max-width: 720px) {
  .spotlight { min-height: 9rem; padding: var(--space-5) var(--space-4) var(--space-4); }
  .spotlight-title { font-size: var(--text-2xl); }
  .spotlight-credit { max-width: 60%; }
}

/* skeleton */
.skeleton { position: relative; overflow: clip; background: var(--bg-raised); }
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 6%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ===== grid (search results / list) ===== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: var(--space-5) var(--space-4);
  padding: var(--space-4) 0;
}
.grid .card { width: 100%; }

/* ===== search page ===== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.filter-group { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-group label {
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-faint);
}

.input, .select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-md);
  padding: .55rem .85rem;
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  min-width: 8rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--fg-faint); }
.search-input-big { min-width: 16rem; flex-grow: 1; }

/* ===== anime detail page (original Hayase layout) ===== */

.detail-page { padding: 7rem var(--space-6) var(--space-8); }
.detail-wrap { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }

.detail-hero-row { display: flex; align-items: flex-end; gap: var(--space-5); }
.detail-hero-row .detail-cover {
  width: 180px;
  height: 256px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: clip;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-spring);
}
.detail-hero-row .detail-cover:hover { transform: scale(1.02); }
.detail-hero-row .detail-cover img { width: 100%; height: 100%; object-fit: cover; }

.detail-headings { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.detail-secondary {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--fg-faint);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .25rem; }
.chip {
  background: var(--custom, var(--accent));
  color: var(--custom-fg, white);
  border-radius: var(--radius-sm);
  padding: .1rem .9rem;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  transition: filter var(--dur-fast) var(--ease-out);
}
a.chip:hover { filter: brightness(.85); }

.detail-actions-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.play-group { display: flex; width: 200px; margin-right: var(--space-3); }
.play-btn {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--custom, var(--accent));
  color: var(--custom-fg, white);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  padding: .55rem 1rem;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  transition: filter var(--dur-fast) var(--ease-out);
}
.play-btn:hover { filter: brightness(.85); }
.entry-select {
  background: var(--custom, var(--accent));
  color: var(--custom-fg, white);
  border: none;
  border-left: 1px solid color-mix(in oklab, var(--custom-fg, white) 25%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: inherit;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  padding: 0 .4rem;
  max-width: 6.5rem;
  cursor: pointer;
}

.detail-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: none;
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  font-size: .65rem;
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.detail-icon-btn:hover { color: var(--custom, var(--accent)); background: var(--border); }
.detail-icon-btn.active { color: var(--custom, var(--accent)); }

.chips-scroll { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.genre-chip, .tag-chip {
  flex-shrink: 0;
  background: var(--bg-raised);
  color: var(--fg);
  border-radius: var(--radius-md);
  padding: .3rem .9rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.genre-chip:hover { color: var(--custom, var(--accent)); }
.tag-chip {
  background: color-mix(in oklab, var(--bg-raised) 45%, transparent);
  color: var(--fg-faint);
  border: 2px dashed var(--border-strong);
}
.tag-chip.spoiler { filter: blur(4px); }
.tag-chip.spoiler:hover { filter: none; }

.dtabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; gap: var(--space-2); }
.dtab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: none;
  color: var(--fg-faint);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  padding: .65rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.dtab svg { flex-shrink: 0; }
.dtab:hover { color: var(--fg); }
.dtab.active { color: var(--custom, var(--accent)); filter: brightness(1.25); }
.dtab.active::after {
  content: '';
  position: absolute;
  left: .6rem; right: .6rem; bottom: -1px;
  height: 2.5px;
  border-radius: var(--radius-full);
  background: var(--custom, var(--accent));
}
.dtab-content { padding-top: var(--space-4); }

/* star rating badge row */
.score-badges { display: flex; align-items: center; gap: var(--space-3); margin: .1rem 0; }
.score-star {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: .25rem .6rem;
  font-weight: var(--weight-black); font-size: var(--text-sm);
}
.score-star svg { color: var(--amber-500); }
.score-favs { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }

/* rich Continue Watching button */
.play-group:has(.play-btn-rich) { width: auto; min-width: 250px; }
.play-btn-rich {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 1.2rem .6rem 1rem;
  overflow: clip;
}
.play-btn-rich .play-btn-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.play-btn-rich .play-btn-text b { font-size: var(--text-sm); font-weight: var(--weight-black); }
.play-btn-rich .play-btn-text small { font-size: .68rem; font-weight: var(--weight-bold); opacity: .85; }
.play-btn-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: color-mix(in oklab, var(--custom-fg, #fff) 25%, transparent);
}
.play-btn-bar span { display: block; height: 100%; background: var(--custom-fg, #fff); }

/* sidebar: progress ring + tags */
.side-progress { display: flex; align-items: center; gap: var(--space-4); }
.side-ring {
  width: 6.2rem; height: 6.2rem; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: conic-gradient(var(--custom, var(--accent)) calc(var(--pct) * 1%), var(--border) 0);
  display: grid; place-items: center;
}
.side-ring-inner {
  width: 5rem; height: 5rem;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.side-ring-inner b { font-size: var(--text-sm); font-weight: var(--weight-black); }
.side-ring-inner span { font-size: .62rem; color: var(--fg-faint); font-weight: var(--weight-bold); }
.side-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.side-tags .tag-chip { font-size: .68rem; }

/* episodes tab header + range chips + resume bar */
.eplist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.eplist-title { display: flex; align-items: baseline; gap: var(--space-3); }
.eplist-title b { font-size: var(--text-lg); font-weight: var(--weight-black); }
.eplist-title span { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }
.eplist-ranges { display: flex; gap: .35rem; flex-wrap: wrap; }
.eplist-range {
  border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: .28rem .7rem; border-radius: var(--radius-full); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.eplist-range:hover { color: var(--fg); }
.eplist-range.active { background: var(--custom, var(--accent)); border-color: var(--custom, var(--accent)); color: var(--custom-fg, white); }
.episode-resume { height: 3px; border-radius: var(--radius-full); background: var(--border); margin-top: .45rem; max-width: 20rem; overflow: clip; }
.episode-resume > div { height: 100%; background: var(--custom, var(--accent)); border-radius: var(--radius-full); }

/* two-column detail body: tabs left, info sidebar right */
.detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: var(--space-6);
  align-items: start;
}
.detail-main-col { min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: var(--space-4); }

.side-card {
  background: color-mix(in oklab, var(--bg-raised) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.side-card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-faint); font-weight: var(--weight-bold);
}
.side-rows { display: flex; flex-direction: column; gap: .45rem; }
.side-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.side-row-label { color: var(--fg-faint); flex-shrink: 0; }
.side-row-value { font-weight: var(--weight-bold); text-align: right; min-width: 0; }

.side-airing {
  background: linear-gradient(135deg, color-mix(in srgb, var(--custom, var(--accent)) 22%, var(--bg-raised)), var(--bg-raised));
  border-color: color-mix(in srgb, var(--custom, var(--accent)) 40%, var(--border));
}
.side-airing-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); font-weight: var(--weight-bold); }
.side-airing-ep { font-size: var(--text-lg); font-weight: var(--weight-black); margin-top: .15rem; }
.side-airing-time { color: var(--custom, var(--accent)); font-weight: var(--weight-bold); font-size: var(--text-sm); filter: brightness(1.35); }

.side-streams { display: flex; flex-direction: column; gap: .3rem; }
.side-stream {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg-muted);
  padding: .3rem .45rem; margin: 0 -.45rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.side-stream:hover { background: var(--border); color: var(--fg); }
.side-stream-dot { width: .5rem; height: .5rem; border-radius: var(--radius-full); background: var(--accent); flex-shrink: 0; }
.side-synonyms { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.6; }

.chip-airing { background: var(--custom, var(--accent)) !important; color: var(--custom-fg, white) !important; }


.detail-banner {
  height: 21rem;
  background-size: cover;
  background-position: center 25%;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  filter: brightness(.7);
}
.detail-banner.no-banner { height: 6rem; }
.detail-banner.no-banner + .detail-head { margin-top: -2rem; }
.detail-banner.no-banner + .detail-grid { margin-top: -2rem; }
.detail-banner.no-banner + .detail-grid .detail-main { padding-top: 0; }
.detail-banner.no-banner + .detail-head .detail-info { padding-top: 0; }

.detail-grid {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-6);
  padding: 0 var(--space-6) var(--space-8);
  margin-top: -8rem;
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
}

.info-panel { display: flex; flex-direction: column; }
.info-rows {
  background: var(--bg-raised);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}
.info-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: .28rem 0; }
.info-label { color: var(--fg-faint); font-weight: var(--weight-bold); }
.info-value { font-weight: var(--weight-bold); text-align: right; }
.info-alt { color: var(--fg-muted); font-weight: var(--weight-medium); padding: .15rem 0; }

.detail-main { min-width: 0; padding-top: 6.5rem; }

.detail-head {
  display: flex;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  margin-top: -8rem;
  position: relative;
  z-index: 2;
}

.detail-cover {
  width: 14rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-3);
  align-self: flex-start;
}
.detail-cover img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }

.detail-info { padding-top: 6.5rem; min-width: 0; flex-grow: 1; }
.detail-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1);
}
.detail-native { color: var(--fg-faint); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }

.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.badge {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: .2rem .75rem;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
a.badge:hover { color: var(--accent); border-color: var(--accent); }
.badge.badge-theme { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.badge.badge-outline { background: transparent; }

.detail-desc {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 52rem;
  margin-top: var(--space-3);
}
.detail-desc.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle {
  color: var(--fg-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  margin-top: var(--space-1);
}
.desc-toggle:hover { color: var(--accent); }

.detail-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; align-items: center; }

.detail-body { padding: 0; }

.detail-section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  margin: var(--space-6) 0 var(--space-3);
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-4) 0 0;
  color: var(--fg-faint);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.stats-row b { display: block; color: var(--fg); font-size: var(--text-base); }

/* ===== episodes ===== */

.episodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60rem;
}

.episode {
  display: flex;
  flex-direction: row;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  overflow: clip;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
  position: relative;
}
.episode:hover { background: var(--border); transform: translateX(3px); }

.episode-thumb {
  width: 14rem;
  flex-shrink: 0;
  aspect-ratio: 16/9;
  background: var(--bg-sunken);
  position: relative;
  overflow: clip;
}
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-thumb .ep-num {
  position: absolute;
  bottom: .45rem; left: .45rem;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  padding: .05rem .5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  color: var(--fg);
}
.episode-thumb .ep-filler {
  position: absolute;
  top: .45rem; right: .45rem;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius-sm);
  padding: .05rem .5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}
.episode-thumb .ep-watched-overlay {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.episode-thumb .ep-watched-overlay svg { width: 2rem; height: 2rem; color: var(--accent); }

.episode-body { padding: var(--space-3) var(--space-4); min-width: 0; align-self: center; flex-grow: 1; }
.episode-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-meta { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-medium); margin-top: .15rem; }
.episode-summary {
  font-size: var(--text-xs);
  color: var(--fg-faint);
  margin-top: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== relations / characters ===== */

.char-card { width: 7.5rem; flex-shrink: 0; text-align: center; }
.char-card img {
  width: 7.5rem; height: 7.5rem;
  object-fit: cover;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
}
.char-name { font-size: var(--text-xs); font-weight: var(--weight-bold); margin-top: var(--space-2); }
.char-role { font-size: var(--text-xs); color: var(--fg-faint); }

.relation-label {
  font-size: .65rem;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  margin-bottom: .15rem;
}

/* ===== schedule page ===== */

.day-group { margin-top: var(--space-5); }
.day-title {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: -.01em;
  padding: 0 var(--space-6);
  margin: var(--space-5) 0 var(--space-1);
}
.day-title::before {
  content: '';
  width: 4px;
  height: 1.05em;
  align-self: center;
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  flex-shrink: 0;
}
.day-title span { color: var(--fg-faint); font-weight: var(--weight-bold); font-size: var(--text-sm); margin-left: var(--space-2); }

.sched-time { font-size: var(--text-xs); font-weight: var(--weight-black); color: var(--fg-faint); }
.sched-ep { color: var(--accent); font-weight: var(--weight-black); }

/* ===== library page ===== */

.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  padding: .38rem 1rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--fg); border-color: var(--border-strong); }
.tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.tab .count { opacity: .65; margin-left: .3rem; }

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.list-row:hover { border-color: var(--accent); }
.list-row img { width: 3rem; height: 4.25rem; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.list-row-title { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.list-row-sub { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-medium); }
.list-row-grow { flex-grow: 1; min-width: 0; }
.list-row .progress-controls { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.icon-btn {
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-overlay);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: .9rem; height: .9rem; }

/* status dot colors — library states from tokens */
.dot-CURRENT { background: var(--status-watching); }
.dot-PLANNING { background: var(--status-planning); }
.dot-COMPLETED { background: var(--status-completed); }
.dot-PAUSED { background: var(--status-paused); }
.dot-DROPPED { background: var(--status-dropped); }
.dot-REPEATING { background: var(--status-watching); }

/* ===== profile page ===== */

.profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0 var(--space-5);
}
.profile-avatar {
  width: 5.5rem; height: 5.5rem;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  border: 2px solid var(--accent);
}
.profile-name { font-size: var(--text-2xl); font-weight: var(--weight-black); margin: 0; }
.profile-level {
  color: var(--accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.stat-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.stat-card b { display: block; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--accent); }
.stat-card span { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .05em; }

.genre-bars { display: flex; flex-direction: column; gap: var(--space-2); max-width: 34rem; }
.genre-bar { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.genre-bar .genre-name { width: 7rem; flex-shrink: 0; color: var(--fg-muted); }
.genre-bar .genre-track { flex-grow: 1; height: .55rem; border-radius: var(--radius-full); background: var(--bg-raised); overflow: clip; }
.genre-bar .genre-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.genre-bar .genre-count { width: 2.5rem; text-align: right; color: var(--fg-faint); }

/* ===== analytics / charts ===== */

.analytics-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); margin-top: var(--space-2); }

.chart-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
}
.chart-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.chart-card-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg-muted); margin: 0 0 var(--space-3); }
.chart-empty { color: var(--fg-faint); font-size: var(--text-sm); padding: var(--space-5) 0; text-align: center; }

svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .chart-tick { font-size: 11px; fill: var(--fg-faint); }
svg.chart .chart-value { font-size: 11px; font-weight: 700; fill: var(--fg-muted); }
svg.chart .chart-name { font-size: 12px; fill: var(--fg); dominant-baseline: middle; }

.donut-wrap { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.donut-wrap svg.chart { width: 180px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: var(--space-1); min-width: 8rem; }
.donut-legend-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-muted); }
.donut-legend-row b { margin-left: auto; color: var(--fg); font-variant-numeric: tabular-nums; }
.donut-swatch { width: .7rem; height: .7rem; border-radius: 3px; flex-shrink: 0; }

/* ===== achievements ===== */

.ach-banner {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-raised)), var(--bg-raised));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.ach-level-badge {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--accent); color: #fff;
  font-size: var(--text-xl); font-weight: var(--weight-black);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.ach-level-title { font-size: var(--text-lg); font-weight: var(--weight-black); }
.ach-level-xp { font-size: var(--text-xs); color: var(--fg-faint); margin: .1rem 0 .4rem; }
.ach-level-track { height: .5rem; border-radius: var(--radius-full); background: var(--bg); overflow: clip; }
.ach-level-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width var(--dur-base) var(--ease-out); }
.ach-count { text-align: center; }
.ach-count b { display: block; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--accent); }
.ach-count span { font-size: var(--text-xs); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .05em; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.ach-card {
  display: flex; gap: var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  opacity: .62;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.ach-card.unlocked { opacity: 1; }
.ach-card.unlocked:hover { transform: translateY(-2px); border-color: var(--accent); }
.ach-icon {
  width: 2.8rem; height: 2.8rem; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--bg);
  filter: grayscale(1);
}
.ach-card.unlocked .ach-icon { filter: none; }
.ach-body { flex-grow: 1; min-width: 0; }
.ach-name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.ach-tier {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-bold);
  padding: .05rem .35rem; border-radius: var(--radius-full);
}
.ach-tier.tier-bronze { background: color-mix(in srgb, #cd7f32 30%, transparent); color: #e6a86b; }
.ach-tier.tier-silver { background: color-mix(in srgb, #c0c0c0 26%, transparent); color: #d8d8d8; }
.ach-tier.tier-gold { background: color-mix(in srgb, #ffd700 26%, transparent); color: #ffdf4d; }
.ach-desc { font-size: var(--text-xs); color: var(--fg-muted); margin: .2rem 0 .45rem; }
.ach-done { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--status-completed, #34d399); }
.ach-progress-wrap { display: flex; align-items: center; gap: var(--space-2); }
.ach-progress-track { flex-grow: 1; height: .4rem; border-radius: var(--radius-full); background: var(--bg); overflow: clip; }
.ach-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); }
.ach-progress-text { font-size: .65rem; color: var(--fg-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== notifications ===== */

.notif-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-3); }
.notif-filter {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .35rem .75rem;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.notif-filter:hover { color: var(--fg); }
.notif-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.notif-filter-count {
  font-size: .6rem; padding: .05rem .3rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
.notif-filter.active .notif-filter-count { background: rgba(255,255,255,.25); }

.notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notif-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.notif-row:hover { border-color: var(--accent); }
.notif-row.unread { border-left: 3px solid var(--accent); }
.notif-icon {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.15rem;
  border-radius: var(--radius-md); background: var(--bg);
}
.notif-body { flex-grow: 1; min-width: 0; }
.notif-title { font-weight: var(--weight-bold); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-text { font-size: var(--text-xs); color: var(--fg-muted); }
.notif-time { font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; flex-shrink: 0; }
.notif-dismiss {
  flex-shrink: 0; width: 1.6rem; height: 1.6rem; line-height: 1;
  border-radius: var(--radius-full); border: none;
  background: transparent; color: var(--fg-faint); font-size: 1.2rem; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.notif-dismiss:hover { background: var(--bg); color: var(--fg); }

/* sidebar bell + unread badge */
.sidebar-btn { position: relative; }
.notif-badge {
  position: absolute; top: .35rem; right: .35rem;
  min-width: 1rem; height: 1rem; padding: 0 .2rem;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--accent); color: #fff;
  font-size: .6rem; font-weight: var(--weight-black);
  line-height: 1;
}
.notif-badge.hidden { display: none; }

/* ===== theme engine ===== */

.theme-base-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.theme-base-opt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .6rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg-muted); font-weight: var(--weight-bold); font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.theme-base-opt:hover { color: var(--fg); }
.theme-base-opt.active { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 3px var(--accent-soft); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); }
.theme-swatch-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.theme-swatch-card:hover { transform: translateY(-2px); }
.theme-swatch-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-swatch { width: 100%; height: 2.4rem; border-radius: var(--radius-md); }
.theme-swatch-name { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.theme-swatch-base { font-size: var(--text-xs); color: var(--fg-faint); text-transform: capitalize; }

.theme-custom-row { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.theme-color-input { width: 3rem; height: 3rem; padding: 0; border: none; border-radius: var(--radius-md); background: none; cursor: pointer; }
.theme-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color-input::-webkit-color-swatch { border: 1px solid var(--border); border-radius: var(--radius-md); }

.theme-preview { padding: var(--space-4); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.theme-preview-card { max-width: 22rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.theme-preview-title { font-weight: var(--weight-black); font-size: var(--text-lg); }
.theme-preview-sub { font-size: var(--text-xs); color: var(--fg-faint); margin-top: .15rem; }

/* ===== settings (categorized) ===== */

.settings-layout { display: grid; grid-template-columns: 13rem 1fr; gap: var(--space-5); margin-top: var(--space-4); align-items: start; }
.settings-rail { display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: var(--space-4); }
.settings-tab {
  display: flex; align-items: center; gap: var(--space-2);
  padding: .55rem .75rem;
  border-radius: var(--radius-md);
  color: var(--fg-muted); font-weight: var(--weight-bold); font-size: var(--text-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.settings-tab:hover { background: var(--bg-raised); color: var(--fg); }
.settings-tab.active { background: var(--accent-soft); color: var(--accent); }
.settings-tab-icon { font-size: 1rem; }
.settings-panel { min-width: 0; }
.settings-panel .setting-card:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-rail { flex-direction: row; overflow-x: auto; position: static; padding-bottom: var(--space-2); }
  .settings-tab { white-space: nowrap; }
}

/* ===== dashboard ===== */

.dash-widget { margin-bottom: var(--space-6); }
.dash-widget-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.dash-widget-link { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-faint); white-space: nowrap; }
.dash-widget-link:hover { color: var(--accent); }
.dash-airing-list, .dash-ach-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-ach-row { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }

.dash-editor { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.dash-editor-row { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.dash-editor-name { flex-grow: 1; font-weight: var(--weight-bold); font-size: var(--text-sm); }
.dash-editor-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ===== extension store ===== */

.ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.ext-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.ext-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ext-card-head { display: flex; align-items: center; gap: var(--space-3); }
.ext-icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-black);
  flex-shrink: 0;
  overflow: clip;
}
.ext-icon img { width: 100%; height: 100%; object-fit: cover; }
.ext-name { font-weight: var(--weight-black); font-size: var(--text-base); }
.ext-dev { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-medium); }
.ext-dev .verified { color: var(--info); }
.ext-summary { font-size: var(--text-sm); color: var(--fg-muted); flex-grow: 1; }
.ext-meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); align-items: center; }
/* Installed extensions read as a state, not just a different button. */
.ext-card.installed { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.ext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.ext-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.ext-option { display: flex; flex-direction: column; gap: .3rem; font-size: var(--text-sm); }
.ext-option-inline { flex-direction: row; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ext-option-label { font-weight: var(--weight-bold); text-transform: capitalize; }
.ext-option-help { font-size: var(--text-xs); color: var(--fg-faint); flex-basis: 100%; }
.ext-option .input { width: 100%; }

.ext-type-chip {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: .1rem .6rem;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .65rem;
}

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 44rem;
  margin: var(--space-4) 0;
}
.callout code {
  font-family: var(--font-mono);
  font-size: .8em;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  padding: .1rem .4rem;
}

/* ===== settings ===== */

.setting-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  max-width: 44rem;
}
.setting-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: var(--weight-black); }
.setting-card p { margin: 0 0 var(--space-3); color: var(--fg-faint); font-size: var(--text-sm); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 2.6rem; height: 1.45rem; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 1.1rem; height: 1.1rem;
  left: .2rem; top: .18rem;
  background: var(--fg);
  border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(1.1rem); background: var(--accent-fg); }

/* ===== modal ===== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--bg-sunken) 65%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.modal-backdrop.hidden { display: none; }

.search-modal {
  width: min(38rem, calc(100vw - 2rem));
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-3);
}

.search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.search-modal-input-wrap svg { width: 1.1rem; height: 1.1rem; color: var(--fg-faint); flex-shrink: 0; }
.search-modal-input-wrap input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: var(--text-base);
  font-family: inherit;
}
.search-modal-input-wrap kbd {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .65rem;
  font-weight: var(--weight-black);
  padding: .15rem .4rem;
  color: var(--fg-faint);
}

.search-modal-results { max-height: 55vh; overflow-y: auto; }
.search-result {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  align-items: center;
}
.search-result:hover, .search-result.selected { background: var(--accent-soft); }
.search-result img { width: 2.6rem; height: 3.6rem; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.search-result-title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.search-result-sub { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-medium); }
.search-modal-empty { padding: var(--space-6); text-align: center; color: var(--fg-faint); font-size: var(--text-sm); }

/* trailer modal */
.trailer-modal {
  width: min(60rem, calc(100vw - 2rem));
  aspect-ratio: 16/9;
  background: var(--bg-sunken);
  border-radius: var(--radius-lg);
  overflow: clip;
  border: 1px solid var(--border-strong);
}
.trailer-modal iframe { width: 100%; height: 100%; border: 0; }

/* ===== toasts ===== */

.toasts {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toast {
  background: color-mix(in oklab, var(--bg-overlay) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-2);
  animation: toast-in var(--dur-base) var(--ease-spring);
  max-width: 22rem;
}
.toast.error { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== misc ===== */

.empty-state {
  text-align: center;
  color: var(--fg-faint);
  padding: var(--space-7) var(--space-4);
  font-weight: var(--weight-bold);
  background: color-mix(in oklab, var(--bg-raised) 55%, transparent);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 40rem;
  margin: var(--space-4) auto;
}
.empty-state::before {
  content: '◌';
  display: block;
  font-size: 2rem;
  margin-bottom: .4rem;
  color: var(--border-strong);
}

.error-state {
  text-align: center;
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) var(--space-6);
  font-weight: var(--weight-bold);
}

.load-more-wrap { display: flex; justify-content: center; padding: var(--space-5); }

.spinner {
  width: 2rem; height: 2rem;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
  margin: var(--space-6) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-title-tick { display: flex; align-items: center; gap: .6rem; }
.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  margin: 0 0 var(--space-4);
}

/* ===== mobile "More" bottom sheet ===== */

.more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: color-mix(in oklab, var(--bg-sunken) 60%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.more-backdrop.open { opacity: 1; }

.more-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 96;
  background: var(--bg-overlay);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-spring);
  max-height: 80vh;
  overflow-y: auto;
}
.more-sheet.open { transform: none; }
.more-grabber { width: 2.4rem; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); margin: .2rem auto var(--space-3); }

.more-profile {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  margin-bottom: var(--space-3);
}
.more-profile-avatar {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  font-size: 1.4rem;
}
.more-profile-name { font-weight: var(--weight-black); font-size: var(--text-base); }
.more-profile-sub { font-size: var(--text-xs); color: var(--fg-faint); }
.more-profile .btn { margin-left: auto; }

.more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px solid transparent;
  color: var(--fg-muted);
  text-align: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.more-item:hover, .more-item:active { border-color: var(--accent); color: var(--fg); }
.more-item.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.more-item svg { width: 1.5rem; height: 1.5rem; }
.more-item span { font-size: .62rem; font-weight: var(--weight-bold); line-height: 1.1; }

/* ===== hover preview panel ===== */

.preview-panel {
  position: fixed;
  width: 360px;
  z-index: 90;
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: scale(.92) translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
  pointer-events: auto;
}
.preview-panel.open { opacity: 1; transform: none; }

.preview-media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-overlay) 2%, transparent 55%);
  pointer-events: none;
}
.preview-media-title {
  position: absolute; left: var(--space-4); right: 4rem; bottom: .55rem;
  font-weight: var(--weight-black); font-size: var(--text-lg); line-height: 1.15;
  color: var(--fg);
  text-shadow: 0 1px 12px color-mix(in oklab, var(--bg-sunken) 80%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.preview-score {
  position: absolute; right: .6rem; bottom: .6rem;
  display: flex; align-items: center; gap: .3rem;
  background: color-mix(in oklab, var(--bg-sunken) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  padding: .15rem .55rem;
  font-size: var(--text-xs); font-weight: var(--weight-black);
}
.preview-score svg { fill: var(--accent); stroke: var(--accent); }

.preview-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.preview-chip {
  font-size: .65rem; font-weight: var(--weight-bold);
  padding: .16rem .5rem;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.preview-genres { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.preview-genre {
  font-size: .65rem; font-weight: var(--weight-bold);
  color: var(--accent);
  padding: .16rem .5rem;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
}
.preview-genre:hover { filter: brightness(1.2); }
.preview-actions { display: flex; gap: .45rem; margin-top: var(--space-3); align-items: center; }
.preview-icon-btn {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.preview-icon-btn:hover { color: var(--fg); border-color: var(--fg-faint); background: var(--bg-raised); }
.preview-icon-btn.active { color: var(--accent); border-color: var(--accent); }

.preview-media {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--bg-sunken);
}
.preview-trailer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.preview-trailer.loaded { opacity: 1; }

.preview-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.preview-title { font-weight: var(--weight-black); font-size: var(--text-base); }
.preview-meta { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); margin-top: .1rem; }
.preview-desc {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== hero trailer (muted, behind content) ===== */

.hero-trailer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 220px);
  top: -110px;
  border: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.hero-trailer.loaded { opacity: .55; }

/* ===== watch together ===== */

.w2g-feed { margin-top: var(--space-3); display: flex; flex-direction: column; gap: .25rem; }
.w2g-event { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-medium); }

/* ===== watch page / player ===== */

.watch-page { max-width: 100rem; margin: 0 auto; }
.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--space-5);
  align-items: start;
}
.watch-main { min-width: 0; }
.watch-side { position: sticky; top: var(--space-4); min-width: 0; }

/* episode sidebar */
.wep-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: clip;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 3rem);
}
.wep-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.wep-head h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-black); }
.wep-count { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }
.wep-list { overflow-y: auto; padding: .4rem; scrollbar-width: thin; }
.wep {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .45rem .55rem;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast);
}
.wep:hover { background: var(--border); }
.wep.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.wep.watched { opacity: .62; }
.wep.active.watched { opacity: 1; }
.wep-thumb {
  position: relative; width: 5.4rem; aspect-ratio: 16/9; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: clip; background: var(--bg-sunken);
}
.wep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wep-playing {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg-sunken) 55%, transparent);
  color: var(--accent);
}
.wep-num {
  width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-weight: var(--weight-black); font-size: var(--text-sm); color: var(--fg-muted);
}
.wep.active .wep-num { background: var(--accent); color: var(--accent-fg); }
.wep-body { min-width: 0; flex-grow: 1; }
.wep-title {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wep-meta { font-size: .65rem; color: var(--fg-faint); margin-top: .1rem; }
.wep > svg, .wep > span svg { color: var(--accent); flex-shrink: 0; }

.watch-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.watch-title { font-size: var(--text-xl); font-weight: var(--weight-black); margin: 0; }
.watch-total { color: var(--fg-faint); font-weight: var(--weight-bold); font-size: var(--text-base); }

.player-box {
  position: relative;
  aspect-ratio: 16 / 9;
  background: black;
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-2);
}

.player-shell {
  position: absolute;
  inset: 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

.player-pick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
}
.player-pick-inner { width: min(34rem, 90%); }

.watch-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.w2g-badge { display: inline-block; margin-bottom: var(--space-2); }

.watch-autosave {
  display: flex; align-items: center; gap: .4rem;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.watch-autosave svg { color: var(--ok); flex-shrink: 0; }

/* room badge overlaid on the player */
.player-room-badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  border: none; cursor: pointer;
  background: color-mix(in oklab, var(--bg-sunken) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: .28rem .6rem; border-radius: var(--radius-full);
}
.player-room-badge::first-letter { color: var(--live); }

/* up-next end card */
.player-upnext {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg-sunken) 78%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.player-upnext-inner { text-align: center; padding: var(--space-4); }
.player-upnext-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); font-weight: var(--weight-bold); }
.player-upnext-title { font-size: var(--text-2xl); font-weight: var(--weight-black); margin-top: .2rem; color: #fff; }
.player-upnext-count { margin-top: .8rem; font-size: var(--text-xs); color: var(--fg-muted); }

/* Watch Together popup */
.w2g-panel {
  width: min(30rem, 92vw);
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: clip;
}
.w2g-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.w2g-panel-head h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-black); }
.w2g-close { border: none; background: none; color: var(--fg-faint); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.w2g-close:hover { color: var(--fg); }
.w2g-panel-body { padding: var(--space-4); }
.w2g-or { text-align: center; color: var(--fg-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; margin: var(--space-3) 0; position: relative; }
.w2g-or::before, .w2g-or::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); }
.w2g-or::before { left: 0; }
.w2g-or::after { right: 0; }
.w2g-room-code { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.w2g-room-code code { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--accent); letter-spacing: .05em; }

.ep-grid { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 14rem; overflow-y: auto; }
.ep-num-btn {
  min-width: 2.4rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ep-num-btn:hover { background: var(--border-strong); color: var(--fg); }
.ep-num-btn.watched { color: var(--accent); }
.ep-num-btn.active { background: var(--accent); color: var(--accent-fg); }

.watch-ep-info { margin-top: var(--space-4); }
.watch-ep-summary { font-size: var(--text-sm); color: var(--fg-muted); margin-top: var(--space-1); max-width: 52rem; }
.player-video { width: 100%; height: 100%; object-fit: contain; background: black; }

.player-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg-sunken) 85%, transparent), transparent);
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 3;
}
.player-back {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--fg);
  display: inline-block;
  margin-bottom: var(--space-2);
}
.player-top .player-back { margin-bottom: 0; }
.player-back:hover { color: var(--accent); }
.player-ep-label { color: var(--fg-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.player-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: linear-gradient(to top, color-mix(in oklab, var(--bg-sunken) 90%, transparent), transparent);
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 3;
}
.player-controls-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

.player-idle .player-controls,
.player-idle .player-top { opacity: 0; pointer-events: none; }
.player-idle { cursor: none; }

.player-btn {
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.player-btn:hover { color: var(--accent); }
.player-play { font-size: 1.3rem; width: 2.6rem; }
.player-time { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.player-speed { font-size: var(--text-xs); }

.player-seek {
  position: relative;
  height: .3rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, #fff 22%, transparent);
  cursor: pointer;
  touch-action: none;
  transition: height var(--dur-fast) var(--ease-out);
}
.player-seek:hover { height: .45rem; }
.player-seek-buffer { position: absolute; inset: 0 auto 0 0; background: color-mix(in oklab, #fff 34%, transparent); width: 0; border-radius: var(--radius-full); }
.player-seek-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 0; border-radius: var(--radius-full); }
.player-seek-thumb {
  position: absolute; right: 0; top: 50%;
  width: .85rem; height: .85rem;
  transform: translate(50%, -50%) scale(0);
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.player-seek:hover .player-seek-thumb,
.player-shell.player-paused .player-seek-thumb { transform: translate(50%, -50%) scale(1); }

.player-volume { width: 6rem; accent-color: var(--accent); }

.player-skip {
  position: absolute;
  bottom: 4.5rem;
  right: var(--space-4);
  z-index: 4;
}

/* ---- Netflix-style top bar ---- */
.player-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(to bottom, rgb(0 0 0 / .72), transparent);
  transition: opacity var(--dur-base) var(--ease-out);
}
.player-topbar-title {
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgb(0 0 0 / .8);
}

/* ---- Netflix-style center controls: −10 / play / +10 ---- */
.player-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 8vw, 4.5rem);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.player-center button { pointer-events: auto; }
.player-big {
  width: 4.6rem; height: 4.6rem;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-full);
  background: rgb(0 0 0 / .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast);
}
.player-big:hover { transform: scale(1.08); background: rgb(0 0 0 / .6); }
.player-big svg { margin-left: 2px; }
.player-jump {
  position: relative;
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-full);
  background: rgb(0 0 0 / .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast);
}
.player-jump:hover { transform: scale(1.08); background: rgb(0 0 0 / .55); }
.player-jump span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .58rem; font-weight: var(--weight-black);
}
.player-idle .player-center { opacity: 0; pointer-events: none; }
.player-idle .player-center button { pointer-events: none; }
.player-idle .player-topbar { opacity: 0; pointer-events: none; }
.player-shell.player-paused .player-center { opacity: 1 !important; }
.player-shell.player-paused .player-center button { pointer-events: auto !important; }

/* ---- Yume branded loader (start + buffering), Netflix-style ---- */
.player-loader {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: black;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.player-loader.hidden { display: grid !important; opacity: 0; pointer-events: none; }
.player-loader svg { color: #fff; position: absolute; }
.player-loader-ring {
  width: 4.6rem; height: 4.6rem;
  border-radius: var(--radius-full);
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  animation: yume-spin .9s linear infinite;
}
@keyframes yume-spin { to { transform: rotate(360deg); } }

/* ---- gear menu ---- */
.player-menu {
  position: absolute; right: var(--space-4); top: 3.4rem; z-index: 7;
  width: 15.5rem;
  background: color-mix(in oklab, var(--bg-overlay) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4);
}
.player-menu-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); font-weight: var(--weight-bold); margin-bottom: .4rem; }
.player-menu-speeds { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: var(--space-3); }
.player-menu-speed {
  border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: .22rem .5rem; border-radius: var(--radius-full); cursor: pointer;
}
.player-menu-speed.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.player-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* ---- Continue Watching card (reference style) ---- */
.cw-card {
  margin-top: var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.cw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cw-title { display: flex; align-items: center; gap: .5rem; color: var(--accent); font-weight: var(--weight-black); font-size: var(--text-base); }
.cw-right { display: flex; align-items: baseline; gap: .5rem; }
.cw-right-label { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }
.cw-right b { color: var(--accent); font-size: var(--text-lg); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.cw-sub { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-muted); margin-top: .15rem; }
.cw-time { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--fg); }
.cw-segments { display: flex; gap: .3rem; margin-top: var(--space-3); }
.cw-seg { flex: 1 1 0; height: .38rem; border-radius: var(--radius-full); background: var(--border); transition: background var(--dur-base); }
.cw-seg.on { background: var(--accent); }

/* ---- episode meta chips + show more ---- */
.watch-ep-title { font-size: var(--text-xl); font-weight: var(--weight-black); margin: 0 0 .5rem; }
.epmeta-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.epmeta-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-muted); }
.epmeta-chip svg { color: var(--fg-faint); }
.epmeta-chip + .epmeta-chip { border-left: 1px solid var(--border-strong); padding-left: .6rem; }
.epmeta-badge {
  font-size: .65rem; font-weight: var(--weight-black);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .1rem .4rem; color: var(--fg-muted);
}
.epmeta-badge.filler { color: var(--amber-500); border-color: var(--amber-500); }
.watch-ep-summary.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.showmore { border: none; background: none; color: var(--accent); font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; padding: .3rem 0; }
.showmore:hover { filter: brightness(1.2); }

.hidden { display: none !important; }
.nav-flag-hidden { display: none !important; }

/* ===== access / feature-flag gate ===== */

.gate {
  max-width: 30rem;
  margin: 8vh auto var(--space-8);
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.gate-icon { font-size: 3rem; line-height: 1; }
.gate-title { font-size: var(--text-2xl); font-weight: var(--weight-black); margin: 0; }
.gate-sub { color: var(--fg-muted); margin: 0 0 var(--space-4); max-width: 24rem; }
.gate .setting-card { width: 100%; text-align: left; margin: 0; }

/* ===== admin: feature flags ===== */

.flag-list { display: flex; flex-direction: column; gap: .5rem; max-width: 54rem; }
.flag-row {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.flag-meta { flex-grow: 1; min-width: 12rem; }
.flag-label { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.flag-desc { font-size: var(--text-xs); color: var(--fg-muted); margin-top: .1rem; }
.flag-key { font-family: var(--font-mono); font-size: .62rem; color: var(--fg-faint); display: inline-block; margin-top: .25rem; }
.flag-controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.flag-access { font-size: var(--text-xs); min-width: 8rem; }
.flag-perm { font-size: var(--text-xs); }

/* ===== admin: two-column shell with a section nav rail ===== */

.admin-shell {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100dvh - 3.6rem);
}
.admin-nav {
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  padding: var(--space-4) var(--space-3) var(--space-5);
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-nav-head {
  display: flex; align-items: center; gap: .5rem;
  font-weight: var(--weight-extrabold); font-size: var(--text-base);
  letter-spacing: -.01em;
  padding: 0 .55rem var(--space-4);
}
.admin-nav-head svg { color: var(--accent); }
/* How many sections this account can reach. A permission set is invisible
   until something goes wrong with it. */
.admin-nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--weight-medium);
  color: var(--fg-faint);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: .05rem .4rem;
}

/* Group headings carry the structure the flat list used to leave implicit. */
.admin-nav-group {
  font-size: .6rem;
  font-weight: var(--weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: var(--space-4) .55rem .3rem;
}
.admin-nav-group:first-of-type { padding-top: 0; }

.admin-nav-item {
  display: flex; align-items: center; gap: .6rem;
  text-align: left; border: none; background: none; cursor: pointer;
  padding: .42rem .55rem;
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admin-nav-item:hover { background: var(--bg); color: var(--fg); }
.admin-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.admin-nav-item svg { flex-shrink: 0; opacity: .8; }
.admin-nav-item.active svg { opacity: 1; }
.admin-nav-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.admin-content { padding: var(--space-5) var(--space-6) var(--space-7); min-width: 0; }
.admin-content-head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.admin-content-heading { display: flex; align-items: flex-start; gap: .7rem; }
.admin-content-heading > svg { color: var(--accent); margin-top: .2rem; flex-shrink: 0; }
.admin-content-title { font-size: var(--text-xl); font-weight: var(--weight-extrabold); margin: 0; letter-spacing: -.015em; }
.admin-content-sub { color: var(--fg-faint); font-size: var(--text-sm); margin: .1rem 0 0; }
.admin-content-body { min-width: 0; }

/* A filter row above a list. Shared by the error and audit views. */
.admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-4); }

@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; min-height: 0; }
  .admin-nav {
    position: static; flex-direction: row; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: var(--space-3);
  }
  .admin-nav-head, .admin-nav-group { display: none; }
  .admin-nav-item { flex-shrink: 0; }
  .admin-content { padding: var(--space-4); }
}

/* ===== admin: error triage ===== */

.err-layout { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.err-list { display: flex; flex-direction: column; gap: .3rem; }

.err-row {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.err-row:hover { border-color: var(--border-strong); }
.err-row.active { border-color: var(--accent); background: var(--accent-soft); }

/* The occurrence count is the first thing worth knowing: one bug seen 4000
   times and one seen twice need different attention. */
.err-row-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--danger);
  flex-shrink: 0;
  min-width: 2.4rem;
}
.err-row-main { min-width: 0; flex: 1; }
.err-row-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.err-row-sub { font-size: var(--text-xs); color: var(--fg-faint); }

.err-detail {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: var(--space-4);
  min-width: 0;
}
.err-detail-head { border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.err-detail-title { margin: 0 0 .25rem; font-size: var(--text-base); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.err-detail-meta { font-size: var(--text-xs); color: var(--fg-faint); }
.err-actions { display: flex; gap: .4rem; margin-top: var(--space-3); }

/* Occurrences are unbounded — a bug seen 4000 times has 4000 of them — so the
   list scrolls inside the panel rather than making the page arbitrarily tall. */
.err-occurrences { max-height: 26rem; overflow-y: auto; }
.err-occ { border-top: 1px solid var(--border); }
.err-occ summary {
  cursor: pointer; padding: .45rem 0;
  font-size: var(--text-xs); color: var(--fg-muted); font-family: var(--font-mono);
}
.err-occ summary:hover { color: var(--fg); }
/* A stack trace is wide by nature — it scrolls in its own box rather than
   pushing the page sideways. */
.err-stack {
  margin: 0 0 .6rem;
  padding: .6rem .7rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.55;
  color: var(--fg-muted);
  overflow-x: auto;
  white-space: pre;
}

/* ===== admin: audit trail ===== */

.audit-rows { display: flex; flex-direction: column; }
.audit-row {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 5.5rem minmax(6rem, auto) minmax(0, 1fr) auto;
  gap: .75rem; align-items: baseline;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}
.audit-row:hover { background: var(--bg-raised); }
.audit-action { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--fg); }
.audit-subject { color: var(--fg-faint); }
.audit-actor { color: var(--accent); font-weight: var(--weight-semibold); }
.audit-detail {
  font-family: var(--font-mono); color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.audit-when { color: var(--fg-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .err-layout { grid-template-columns: 1fr; }
  /* The middle columns are context, not the point: on a narrow screen the
     action, who did it and when are what survive. */
  .audit-row { grid-template-columns: minmax(0, 1fr) auto; }
  .audit-subject, .audit-detail { display: none; }
}

/* ===== admin: roles & permissions ===== */

.roles-layout { display: grid; grid-template-columns: 15rem 1fr; gap: var(--space-5); align-items: start; }
.roles-rail { display: flex; flex-direction: column; gap: .4rem; position: sticky; top: var(--space-4); }
.role-item {
  text-align: left; border: 1px solid var(--border); background: var(--bg-raised);
  border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.role-item:hover { border-color: var(--border-strong); }
.role-item.active { border-color: var(--accent); background: var(--accent-soft); }
.role-name { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.role-sub { font-size: var(--text-xs); color: var(--fg-faint); margin-top: .1rem; }
.role-sub code { font-family: var(--font-mono); }
.role-count { display: inline-block; margin-top: .3rem; font-size: .65rem; font-weight: var(--weight-bold); color: var(--accent); }

.roles-panel { min-width: 0; }
.roles-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.roles-panel-head .input { min-width: 14rem; }
.perm-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.perm-group { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; }
.perm-group-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.perm-group-title { font-weight: var(--weight-black); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.perm-group-count { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }
.perm-group-head .btn { margin-left: auto; }
.perm-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .4rem var(--space-4); cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.perm-row:last-child { border-bottom: none; }
.perm-row:hover { background: var(--bg-raised); }
.perm-row input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.perm-info { min-width: 0; }
.perm-slug-row { display: flex; align-items: center; gap: .4rem; }
.perm-slug { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); }
.perm-desc { display: block; font-size: .68rem; color: var(--fg-faint); }
.perm-badge { flex-shrink: 0; font-size: .55rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .05em; padding: .1rem .32rem; border-radius: var(--radius-sm); line-height: 1.4; }
.perm-badge-live { color: var(--green-400); background: color-mix(in oklab, var(--green-500) 16%, transparent); }
.perm-badge-planned { color: var(--fg-faint); background: color-mix(in oklab, var(--fg-faint) 12%, transparent); text-transform: none; letter-spacing: 0; }
.perm-row.perm-active .perm-slug { color: var(--green-400); }
.perm-live-count { font-size: .6rem; font-weight: var(--weight-bold); color: var(--green-400); background: color-mix(in oklab, var(--green-500) 14%, transparent); padding: .12rem .4rem; border-radius: var(--radius-sm); }
.perm-legend { font-size: var(--text-xs); color: var(--fg-muted); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin: 0 0 var(--space-3); }

@media (max-width: 820px) {
  .roles-layout { grid-template-columns: 1fr; }
  .roles-rail { position: static; flex-direction: row; overflow-x: auto; }
  .role-item { min-width: 11rem; flex-shrink: 0; }
}

/* ===== admin: catalogue management ===== */

.btn-danger { background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 45%, transparent); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 26%, transparent); }

.cat-layout { display: grid; grid-template-columns: 22rem 1fr; gap: var(--space-5); align-items: start; }
.cat-list-col { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cat-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-toolbar .input { flex: 1 1 8rem; min-width: 0; }
.cat-list { display: flex; flex-direction: column; gap: .35rem; max-height: calc(100vh - 12rem); overflow-y: auto; padding-right: .25rem; }
.cat-count { font-size: var(--text-xs); color: var(--fg-faint); padding: .1rem .1rem .3rem; }
.cat-row {
  display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%;
  border: 1px solid var(--border); background: var(--bg-raised); border-radius: var(--radius-lg);
  padding: .55rem .7rem; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cat-row:hover { border-color: var(--border-strong); }
.cat-row.active { border-color: var(--accent); background: var(--accent-soft); }
.cat-row-main { min-width: 0; flex-grow: 1; }
.cat-row-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row-sub { font-size: var(--text-xs); color: var(--fg-faint); margin-top: .1rem; }

.vis-badge { flex-shrink: 0; font-size: .6rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; padding: .18rem .4rem; border-radius: var(--radius-sm); }
.vis-public { color: var(--green-400); background: color-mix(in oklab, var(--green-500) 15%, transparent); }
.vis-unlisted { color: var(--amber-400); background: color-mix(in oklab, var(--amber-500) 15%, transparent); }
.vis-hidden { color: var(--danger); background: color-mix(in oklab, var(--danger) 15%, transparent); }

.cat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 22rem; color: var(--fg-faint); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-xl); }
.cat-placeholder svg { opacity: .4; }

.cat-editor { display: flex; flex-direction: column; gap: var(--space-4); }
.cat-editor-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.cat-editor-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-extrabold); }
.cat-editor-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }

.cat-visibility { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); }
.cat-vis-hint { margin: .2rem 0 0; font-size: var(--text-xs); color: var(--fg-faint); max-width: 30rem; }
.cat-visibility .select { min-width: 9rem; }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
.cat-field { display: flex; flex-direction: column; gap: .3rem; }
.cat-field-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-muted); }
.cat-field textarea.input { resize: vertical; font-family: inherit; }
.cat-check { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-sm); cursor: pointer; }
.cat-actions { display: flex; gap: .6rem; padding-top: var(--space-2); border-top: 1px solid var(--border); }

.cat-episodes { margin-top: var(--space-3); }
.cat-ep-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-2); }
.cat-ep-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); }
.cat-ep-row + .cat-ep-row { margin-top: .35rem; }

/* An unpublished episode is not a broken one — it is waiting for a subtitle.
   Muted rather than alarming, but clearly distinct from a live row. */
.cat-ep-row-unpublished { opacity: .62; border-style: dashed; }

/* How much of the season viewers can actually reach, said once at the top
   instead of left to be counted off the rows. */
.cat-ep-summary {
  padding: .5rem .6rem;
  margin-bottom: .5rem;
  border-radius: var(--radius-md);
  font-size: .82rem;
  color: var(--fg-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
/* Nothing published yet is the normal state right after an import, not a
   fault — so this is drawn to be noticed, not to alarm. */
.cat-ep-summary-none {
  color: var(--info);
  border-color: color-mix(in oklab, var(--info) 40%, var(--border));
  background: color-mix(in oklab, var(--info) 10%, transparent);
}
.cat-ep-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: var(--weight-bold); min-width: 2.6rem; }
.cat-ep-main { min-width: 0; flex-grow: 1; }
.cat-ep-title { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-ep-sub { font-size: var(--text-xs); color: var(--fg-faint); }
.cat-ep-del { color: var(--danger); }

@media (max-width: 900px) {
  .cat-layout { grid-template-columns: 1fr; }
  .cat-list-col { position: static; }
  .cat-list { max-height: 26rem; }
  .cat-grid { grid-template-columns: 1fr; }
}

/* ===== comments ===== */

.comment {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  max-width: 52rem;
}
.comment-link { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
.comment-link:hover { border-color: var(--accent); }
.comment-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; margin-bottom: .2rem; }
.comment-author { font-weight: var(--weight-black); font-size: var(--text-sm); color: var(--accent); }
.comment-context { font-size: var(--text-xs); color: var(--fg-muted); font-weight: var(--weight-bold); }
.comment-time { font-size: var(--text-xs); color: var(--fg-faint); margin-left: auto; }
.comment-body { font-size: var(--text-sm); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-spoiler {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-faint);
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.comment-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.comment-action {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: 0;
}
.comment-action:hover { color: var(--accent); }
.comment-form { margin-top: var(--space-3); max-width: 52rem; }
.comment-input { width: 100%; resize: vertical; font-family: inherit; }

/* ===== profiles ("who's watching") ===== */

.profiles-screen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.profiles-title { font-size: var(--text-2xl); font-weight: var(--weight-black); margin: 0 0 var(--space-6); }
.profiles-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }

.profile-tile {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out);
  width: 8rem;
}
.profile-tile:hover { color: var(--fg); }
.profile-avatar-big {
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: var(--weight-black);
  border: 3px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.profile-tile:hover .profile-avatar-big { transform: scale(1.04); }
.profile-tile.active .profile-avatar-big { border-color: var(--accent); }
.profile-avatar-add { color: var(--fg-faint); font-size: 3rem; }
.profile-tile-name { font-weight: var(--weight-bold); font-size: var(--text-base); }
.profile-tile-edit { font-size: var(--text-xs); color: var(--fg-faint); font-weight: var(--weight-bold); }

.avatar-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.avatar-opt {
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 2px solid transparent;
  font-size: 1.3rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.avatar-opt:hover { border-color: var(--border-strong); }
.avatar-opt.active { border-color: var(--accent); }

/* sidebar profile switcher */
.sidebar-profile { background: none; border: none; }
.sidebar-avatar {
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: var(--weight-black);
  border: 1px solid var(--border-strong);
}
.sidebar-profile:hover .sidebar-avatar { border-color: var(--accent); }

.profile-menu {
  position: fixed;
  z-index: 120;
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  min-width: 14rem;
  animation: toast-in var(--dur-base) var(--ease-spring);
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}
.profile-menu-item:hover { background: var(--bg-raised); }
.profile-menu-item.active { color: var(--accent); font-weight: var(--weight-bold); }
.profile-menu-avatar {
  width: 1.7rem; height: 1.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.profile-menu-sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }

/* ===== admin: infrastructure monitoring ===== */

.mon-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-raised);
  margin-bottom: var(--space-4);
}
.mon-banner-dot { font-size: 1.4rem; line-height: 1; }
.mon-banner-title { font-weight: var(--weight-bold); font-size: var(--text-base); }
.mon-banner-sub { font-size: var(--text-xs); color: var(--fg-faint); margin-top: .1rem; }
.mon-banner.mon-green { border-color: color-mix(in oklab, var(--green-500) 45%, transparent); }
.mon-banner.mon-yellow { border-color: color-mix(in oklab, var(--amber-500) 50%, transparent); background: color-mix(in oklab, var(--amber-500) 8%, var(--bg-raised)); }
.mon-banner.mon-red { border-color: color-mix(in oklab, var(--danger) 55%, transparent); background: color-mix(in oklab, var(--danger) 8%, var(--bg-raised)); }

.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); }
.mon-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-raised); padding: var(--space-3);
  border-left-width: 3px; border-left-color: var(--border);
}
.mon-card.mon-green { border-left-color: var(--green-500); }
.mon-card.mon-yellow { border-left-color: var(--amber-500); }
.mon-card.mon-red { border-left-color: var(--danger); }
.mon-card-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mon-card-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); font-weight: var(--weight-bold); }
.mon-card-dot { font-size: .7rem; }
.mon-card-value { font-size: 1.5rem; font-weight: var(--weight-extrabold); margin-top: .35rem; line-height: 1.1; }
.mon-card-sub { font-size: var(--text-xs); color: var(--fg-faint); margin-top: .2rem; }

.mon-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.mon-service {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised);
}
.mon-service.mon-not_configured { opacity: .6; }
.mon-service-main { flex-grow: 1; min-width: 0; }
.mon-service-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); text-transform: capitalize; }
.mon-service-sub { font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-service-latency { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }

.mon-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.mon-dep { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); padding: .6rem .75rem; }
.mon-dep-head { display: flex; align-items: center; gap: .45rem; font-size: var(--text-sm); text-transform: capitalize; }
.mon-dep-tag { margin-left: auto; font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .35rem; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--fg-faint) 14%, transparent); color: var(--fg-faint); }
.mon-dep-tag.mon-dep-required { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.mon-dep-list { margin: .4rem 0 0; padding-left: 1.1rem; font-size: var(--text-xs); color: var(--fg-faint); }
.mon-dep-list li { margin: .1rem 0; }

.mon-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.mon-trend { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); padding: .6rem .7rem; }
.mon-trend-label { font-size: var(--text-xs); color: var(--fg-faint); margin-bottom: .3rem; }
.mon-trend .chart { width: 100%; height: auto; }
.mon-trend-empty { font-size: var(--text-xs); color: var(--fg-faint); padding: .8rem 0; }

@media (max-width: 700px) {
  .mon-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .mon-card-value { font-size: 1.25rem; }
}

/* ===== admin: alerts & diagnostics ===== */

.mon-alert-none { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--fg-faint); padding: .6rem .75rem; border: 1px dashed var(--border); border-radius: var(--radius-md); }
.mon-alert { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-md); background: var(--bg-raised); }
.mon-alert + .mon-alert { margin-top: .4rem; }
.mon-alert.mon-yellow { border-left-color: var(--amber-500); }
.mon-alert.mon-red { border-left-color: var(--danger); }
.mon-alert-main { flex-grow: 1; min-width: 0; }
.mon-alert-subject { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.mon-alert-sub { font-size: var(--text-xs); color: var(--fg-faint); }
.mon-alert-since { font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; }
.mon-alert-history { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.mon-alert-past { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-xs); color: var(--fg-faint); padding: .15rem 0; }

.mon-diag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.mon-diag-note { margin: 0; font-size: var(--text-xs); color: var(--fg-faint); max-width: 38rem; }
.mon-diag-output { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); padding: .75rem 1rem; }
.mon-diag-total { font-weight: var(--weight-extrabold); font-size: var(--text-base); margin-bottom: .5rem; }
.mon-diag-group { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); margin: .7rem 0 .25rem; font-weight: var(--weight-bold); }
.mon-diag-row { display: flex; align-items: center; gap: .6rem; padding: .2rem 0; font-size: var(--text-sm); }
.mon-diag-name { flex: 0 0 11rem; }
.mon-diag-status { font-family: var(--font-mono); font-size: .65rem; font-weight: var(--weight-bold); padding: .1rem .35rem; border-radius: var(--radius-sm); }
.mon-diag-pass .mon-diag-status { color: var(--green-400); background: color-mix(in oklab, var(--green-500) 15%, transparent); }
.mon-diag-warn .mon-diag-status { color: var(--amber-400); background: color-mix(in oklab, var(--amber-500) 15%, transparent); }
.mon-diag-fail .mon-diag-status { color: var(--danger); background: color-mix(in oklab, var(--danger) 15%, transparent); }
.mon-diag-skip .mon-diag-status { color: var(--fg-faint); background: color-mix(in oklab, var(--fg-faint) 12%, transparent); }
.mon-diag-value { color: var(--fg-faint); font-size: var(--text-xs); }

@media (max-width: 640px) {
  .mon-diag-name { flex-basis: 7rem; }
  .mon-diag-row { flex-wrap: wrap; }
}

/* ---- catalogue: metadata provenance + duplicate scan ---- */
.cat-provenance { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.prov-table { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.prov-row {
  display: grid; grid-template-columns: 12rem 1fr auto auto; gap: .6rem; align-items: center;
  padding: .35rem .6rem; border-radius: var(--radius-sm); background: var(--bg-raised);
}
.prov-field { font-size: var(--text-xs); color: var(--fg); }
.prov-source { font-size: var(--text-xs); color: var(--fg-faint); }
.prov-auto { font-size: var(--text-xs); color: var(--fg-faint); opacity: .7; }

.dup-pair {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center;
  padding: .7rem; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.dup-side { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.dup-title { font-size: var(--text-sm); font-weight: 600; }
.dup-meta { font-size: var(--text-xs); color: var(--fg-faint); text-align: center; white-space: nowrap; }

@media (max-width: 720px) {
  .prov-row { grid-template-columns: 1fr auto; }
  .dup-pair { grid-template-columns: 1fr; }
  .dup-meta { text-align: left; }
}


/* Group heading inside the Language settings section. The section lists three
   unrelated axes (interface / catalogue / playback) and without a break they
   read as one long list of switches. */
.settings-group-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-faint);
}
.settings-group-title:first-child { margin-top: 0; }

/* Said out loud when a description is still in the other language. Quiet on
   purpose — it is context, not a warning, and the paragraph under it is still
   the thing to read. */
.detail-desc-note {
  margin: 0 0 .4rem;
  font-size: var(--text-xs);
  color: var(--fg-faint);
  font-style: italic;
}

/* ===========================================================================
   Translations admin view
   ---------------------------------------------------------------------------
   Reuses the catalogue's two-column layout (.cat-layout / .cat-list / .cat-row)
   rather than introducing a second one — an editor moving between the two
   screens should not have to relearn where things are.
   =========================================================================== */

.tr-progress { margin-bottom: var(--space-4); }

.tr-progress-bar {
  height: .35rem;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  overflow: hidden;
  margin-bottom: .45rem;
}
.tr-progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-out);
}
.tr-progress-text { font-size: var(--text-xs); color: var(--fg-muted); }
.tr-progress-drafts { font-size: var(--text-xs); color: var(--amber-400); margin-top: .25rem; }

.tr-toggle { display: flex; align-items: center; gap: .45rem; font-size: var(--text-sm); color: var(--fg-muted); cursor: pointer; }
.tr-toggle input { accent-color: var(--accent); }

/* Which half of a translation exists. Two letters rather than icons: T and D
   are unambiguous at 11px in a dense list, and a half-filled pair reads as
   half-done at a glance. */
.tr-flags { display: flex; gap: .25rem; flex-shrink: 0; align-self: center; }
.tr-flag {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font-size: .62rem;
  font-weight: var(--weight-extrabold);
  background: var(--bg-sunken);
  color: var(--fg-faint);
  border: 1px solid var(--border);
}
.tr-flag.on { background: var(--ok); color: var(--bg); border-color: transparent; }

.tr-editor { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-editor-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: -.015em;
}

.tr-field { display: flex; flex-direction: column; gap: .4rem; }
.tr-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-faint);
}
.tr-field textarea { resize: vertical; min-height: 9rem; line-height: 1.55; font-family: inherit; }
.tr-hint { margin: 0; font-size: var(--text-xs); color: var(--fg-faint); line-height: 1.45; }

.tr-source {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: .7rem .9rem;
}
.tr-source summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-faint);
}
.tr-source-text {
  margin: .6rem 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.6;
  max-height: 16rem;
  overflow-y: auto;
}

.tr-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tr-meta { font-size: var(--text-xs); color: var(--fg-faint); }

@media (max-width: 560px) {
  .tr-editor-title { font-size: var(--text-base); }
  .tr-actions .btn { flex: 1; }
}

/* ===========================================================================
   Sub / dub + provider switcher under the player
   ---------------------------------------------------------------------------
   One bar, two groups. It only renders when there is an actual choice, so the
   spacing here assumes it is either absent or worth the room.
   =========================================================================== */

.vbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  padding: var(--space-3) 0 0;
}

.vbar-group { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.vbar-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-faint);
  flex-shrink: 0;
}

.vbar-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.vbar-chip {
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.vbar-chip:hover { border-color: var(--border-strong); color: var(--fg); }
.vbar-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vbar-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

@media (max-width: 560px) {
  /* Stacked, and the chip row scrolls rather than wrapping into three lines
     under a small player. */
  .vbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .vbar-group { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .vbar-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
  .vbar-chips::-webkit-scrollbar { display: none; }
}

/* ===========================================================================
   Onboarding wizard
   ---------------------------------------------------------------------------
   Centred dialog on a pointer, bottom sheet on a phone. The phone treatment is
   not decoration: a centred dialog on a 390px screen ends up either too small
   to read or taller than the viewport, and a sheet anchored to the bottom puts
   the actions where the thumb already is.
   =========================================================================== */

.onboard-backdrop {
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.onboard-card {
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3, 0 24px 64px rgba(0, 0, 0, .5));
  width: min(30rem, 100%);
  max-height: min(42rem, calc(100vh - 3rem));
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.onboard-body { display: flex; flex-direction: column; gap: var(--space-4); }

.onboard-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.onboard-lead {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.onboard-group { display: flex; flex-direction: column; gap: var(--space-2); }

.onboard-group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-faint);
}

.onboard-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-2);
}

.onboard-choice {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
  text-align: left;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.onboard-choice:hover { border-color: var(--border-strong); }
.onboard-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onboard-choice.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.onboard-choice-label { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.onboard-choice-hint { font-size: var(--text-xs); color: var(--fg-faint); line-height: 1.35; }

.onboard-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  cursor: pointer;
}
.onboard-switch > span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.onboard-switch-label { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.onboard-switch-hint { font-size: var(--text-xs); color: var(--fg-faint); line-height: 1.35; }
.onboard-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex-shrink: 0; }

.onboard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.onboard-actions { display: flex; gap: var(--space-2); align-items: center; }

.onboard-dots { display: flex; gap: .35rem; }
.onboard-dot {
  width: .4rem;
  height: .4rem;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.onboard-dot.active { background: var(--accent); width: 1.1rem; }

.onboard-skip {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
  align-self: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.onboard-skip:hover { color: var(--fg-muted); }
.onboard-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 560px) {
  .onboard-backdrop { align-items: flex-end; padding: 0; }
  .onboard-card {
    width: 100%;
    max-width: none;
    max-height: 88vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
  .onboard-choices { grid-template-columns: 1fr 1fr; }
  .onboard-actions { flex: 1; justify-content: flex-end; }
}

/* ===========================================================================
   Responsive overrides — LAST ON PURPOSE.

   These used to sit in the middle of the file, which quietly disabled four of
   them: a media query has no extra specificity, so a component rule written
   further down wins outright. Three of the four were the watch page, and the
   effect on a phone was severe — .watch-side kept `position: sticky` from its
   later rule, so the episode panel floated over the page instead of stacking
   under the player, and the content behind it was squeezed into a strip a few
   characters wide.

   Anything that overrides a component belongs after every component. Keep new
   breakpoints in this block, at the end of the file.
   =========================================================================== */
/* ===== responsive ===== */

/* tablet: collapse the two-column detail/watch layouts */
@media (max-width: 1000px) {
  .detail-columns { grid-template-columns: 1fr; }
  .detail-side { position: static; order: 2; }
  .detail-side .side-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem var(--space-5); }
  .watch-layout { grid-template-columns: 1fr; }
  .watch-side { position: static; }
  .wep-panel { max-height: 24rem; }
}

/* mobile: bottom navigation bar — 4 primary tabs + a More sheet */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .page { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
  .sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--border);
    border-right: none;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    z-index: 80;
  }
  .sidebar-logo, .sidebar-spacer, #profile-switcher { display: none; }
  /* only the primary tabs + More appear on the bar */
  .sidebar-btn { display: none; }
  .sidebar-btn.nav-primary,
  .sidebar-btn.nav-more {
    display: flex;
    position: relative;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    height: auto;
    min-width: 0;
    padding: .45rem 0 .25rem;
    border-radius: var(--radius-md);
    color: var(--fg-faint);
    background: transparent;
  }
  .sidebar-btn.nav-primary svg,
  .sidebar-btn.nav-more svg { width: 1.4rem; height: 1.4rem; }
  .sidebar-btn.nav-primary span,
  .sidebar-btn.nav-more span {
    display: block;
    font-size: .6rem;
    font-weight: var(--weight-bold);
    letter-spacing: .01em;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-btn.nav-primary:hover,
  .sidebar-btn.nav-more:hover { background: transparent; color: var(--fg-muted); }
  .sidebar-btn.nav-primary.active,
  .sidebar-btn.nav-more.active { background: transparent; color: var(--accent); }
  /* active indicator bar along the top edge of the tab */
  .sidebar-btn.nav-primary.active::before,
  .sidebar-btn.nav-more.active::before {
    content: '';
    position: absolute;
    top: -.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.7rem;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--accent);
  }
  /* notification badge repositioned above the labeled tab icon */
  .sidebar-btn.nav-primary .notif-badge { top: .2rem; right: auto; left: 50%; margin-left: .1rem; }
  .detail-head { flex-direction: column; gap: var(--space-4); margin-top: -6rem; padding: 0 var(--space-4); }
  .detail-grid { grid-template-columns: 1fr; margin-top: -6rem; padding: 0 var(--space-4) var(--space-7); }
  .detail-page { padding: 4rem var(--space-4) var(--space-7); }
  .detail-hero-row { flex-direction: column; align-items: center; text-align: center; }
  .detail-headings { align-items: center; }
  .detail-hero-row .detail-cover { width: 150px; height: 214px; }
  .dtab { padding: .6rem 1.1rem; }
  .info-panel { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
  .info-panel .detail-cover { width: 9rem; }
  .info-panel .btn { width: auto !important; }
  .info-rows { flex-grow: 1; margin-top: 0; }
  .detail-main { padding-top: 0; }
  .detail-cover { width: 9rem; }
  .detail-info { padding-top: 0; }
  .page-pad { padding: var(--space-4) var(--space-4) var(--space-7); }
  .section-head, .hscroll, .day-title { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero { padding: var(--space-6) var(--space-4) var(--space-5); min-height: 20rem; }
  .hero-title { font-size: var(--text-2xl); }
  .detail-body { padding: 0 var(--space-4); }
  .error-state { margin: var(--space-4); }
  .episode-thumb { width: 8.5rem; }
}

/* ---------------------------------------------------------------------------
   Phone (≤ 560px)
   ---------------------------------------------------------------------------
   Everything above is written for a pointer and a wide viewport, and a phone
   inherits it whether or not it makes sense there. These are the places where
   it did not.
   ------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* A 180x256 cover next to the headings made the hero row 256px tall, so the
     title started 302px down an 844px screen — a third of the phone spent
     before the content, and when the cover fails to load, a third of the
     screen showing nothing. Smaller cover, and the row may wrap. */
  .detail-page { padding-top: 3.5rem; }
  /* The 768px block stacks this column and centres it, which at 390px spends
     the cover's full height before the title starts. Back to a row, so the
     cover sits beside the headings instead of above them, and left-aligned so
     a wrapped title does not read as ragged. flex-wrap lets the headings drop
     below the cover if they are ever squeezed under their 12rem basis. */
  .detail-hero-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    text-align: left;
    gap: var(--space-3);
  }
  .detail-hero-row .detail-cover { width: 104px; height: 148px; flex: 0 0 auto; }
  .detail-headings { flex: 1 1 12rem; align-items: flex-start; min-width: 0; }

  /* The atmospheric backdrop is 46vh, which on a phone is most of the first
     screen. Half that still reads as atmosphere and stops competing. */
  .global-banner { height: 26vh; }

  /* Chips were 16px with desktop padding, which on 390px turned five facts
     into two rows of slabs louder than the title. */
  .chip { font-size: var(--text-xs); padding: .18rem .6rem; }
  .chip-row { gap: .35rem; }

  /* The list control sits beside the play button and was squeezed until its
     own option read "＋ Add to L", which looks broken rather than truncated.
     On a phone the pair takes the full width and the control gets room. */
  .play-group { width: 100%; }
  .entry-select { flex: 0 0 auto; min-width: 8.5rem; }
  .play-btn { min-width: 0; }
  .play-btn-text { min-width: 0; overflow: hidden; }

  /* Titles set for a 1200px column overflow a 390px one. */
  .detail-title { font-size: 1.5rem; line-height: 1.15; }

  /* A failed image used to render its alt text at full size, which pushed the
     card open and turned a poster grid into a wall of words. The text is
     clipped to the frame it was meant to fill; the frame keeps its shape. */
  .card-cover { overflow: hidden; }
  .card-cover img {
    color: transparent;          /* hides alt text without hiding the box */
    font-size: 0;
    background: var(--bg-sunken);
  }

  /* The filter panel filled the first screen, so the results it filters were
     never visible at the same time as the filters. Collapsed by default on a
     phone: the details element carries its own toggle. */
  .filters { padding: var(--space-3); gap: var(--space-3); }
  .filters .filter-group { min-width: 0; }

  /* The bottom bar is fixed and translucent, so content scrolled under it is
     legible enough to look like a rendering fault. Clear it properly. */
  .page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

  /* On a watch page the episode list is the second most useful thing after the
     player. It was ordered after the comments, which put it below a screen of
     empty discussion on every phone. */
  /* align-items: start is inherited from the desktop grid; in a flex column it
     shrinks children to their content width, which left the episode panel half
     the screen wide floating in space. */
  .watch-layout { display: flex; flex-direction: column; align-items: stretch; }
  .watch-side { order: -1; width: 100%; }
  .wep-panel { max-height: 18rem; }
}

/* The search filter panel's own disclosure. On a wide screen it is always open
   and the summary is decoration, so it is hidden there entirely; on a phone it
   is the control that keeps the results visible. */
.filters-box { border: none; }
.filters-summary { display: none; }

@media (max-width: 560px) {
  .filters-summary {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    cursor: pointer;
    list-style: none;
    padding: .6rem .8rem;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
  }
  .filters-summary::-webkit-details-marker { display: none; }
  .filters-summary::after {
    content: '▾';
    position: absolute;
    right: 1.4rem;
    color: var(--fg-faint);
  }
  .filters-box[open] .filters-summary::after { content: '▴'; }
  .filters-summary { position: relative; }
  /* What the panel contains, so it can be left closed without wondering. */
  .filters-hint {
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--fg-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}