:root {
  color-scheme:dark;
  --bg:#0c0e11;
  --panel:#14171c;
  --panel-2:#1c2027;
  --text:#eef0f3;
  --muted:#9299a5;
  --accent:#b5f36c;
  --accent-2:#91d748;
  --border:#262b33;
  --danger:#ff918c;
  --ok:#b5f36c;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --tab-h:0px;
}

* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html {
  scroll-behavior:smooth;
  scrollbar-color:#343a43 var(--bg);
}

body {
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,input,select {
  font:inherit;
}

button {
  cursor:pointer;
  color:inherit;
  touch-action:manipulation;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}

button:disabled {
  cursor:default;
  opacity:.55;
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

button svg,.search-icon,.catalog-sort svg,.avatar svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

.hidden,[hidden] {
  display:none!important;
}

.muted {
  color:var(--muted);
}

.app {
  width:min(100%,1640px);
  margin:0 auto;
  padding:var(--safe-top) 48px 30px;
}

.topbar {
  height:88px;
  display:flex;
  align-items:center;
  gap:38px;
  border-bottom:1px solid #ffffff0d;
  position:relative;
  z-index:10;
}

.brand {
  background:none;
  border:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:25px;
  font-weight:800;
  letter-spacing:-1px;
  padding:0;
  flex-shrink:0;
}

.brand-mark {
  width:33px;
  height:33px;
  display:inline-grid;
  place-content:center;
  padding-left:2px;
  border-radius:10px;
  background:var(--accent);
  color:#16210b;
  font-size:15px;
  transform:rotate(-5deg);
}

.brand-dot {
  color:var(--accent);
}

.desktop-nav {
  display:flex;
  gap:26px;
  height:100%;
  align-items:center;
  white-space:nowrap;
}

.nav-link {
  padding:6px 0;
  height:100%;
  background:none;
  border:0;
  color:var(--muted);
  position:relative;
  font-size:14px;
}

.nav-link:hover,.nav-link.active {
  color:var(--text);
}

.nav-link.active:after {
  content:'';
  position:absolute;
  bottom:0;
  left:25%;
  width:50%;
  height:3px;
  border-radius:2px;
  background:var(--accent);
}

.search-bar {
  display:flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 5px 0 14px;
  background:#191d23;
  border:1px solid #ffffff09;
  border-radius:10px;
  margin-left:auto;
  width:min(100%,350px);
  min-width:180px;
}

.search-bar:focus-within {
  border-color:#b5f36c80;
}

.search-icon {
  width:17px;
  color:var(--muted);
  flex-shrink:0;
}

.search-bar input {
  border:0;
  background:none;
  outline:none;
  width:100%;
  min-width:0;
  color:var(--text);
  font-size:12px;
  padding:0;
  height:100%;
}

input::placeholder {
  color:#737c89;
}

.search-shortcut {
  border:1px solid #ffffff20;
  border-radius:4px;
  padding:0 5px;
  color:#77818e;
}

.search-bar button {
  font-size:12px;
  font-weight:600;
  border:0;
  background:#2b3430;
  color:var(--accent);
  border-radius:7px;
  height:30px;
  padding:0 12px;
  white-space:nowrap;
}

.search-bar button:hover {
  background:var(--accent);
  color:var(--bg);
}

.account-menu {
  position:relative;
  flex-shrink:0;
}

.account-menu summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
}

.account-menu summary::-webkit-details-marker {
  display:none;
}

.avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  background:#262d26;
  color:#b4c9a6;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.avatar svg {
  width:23px;
  height:23px;
  transform:translateY(3px);
}

.user-name {
  max-width:65px;
  font-size:12px;
  color:#bdc1c7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.account-chevron {
  color:var(--muted);
}

.account-dropdown {
  position:absolute;
  top:45px;
  right:0;
  padding:6px;
  border-radius:12px;
  background:#1c2027;
  border:1px solid var(--border);
  width:164px;
  box-shadow:0 12px 45px #0009;
}

.account-dropdown button {
  display:block;
  border:0;
  background:transparent;
  width:100%;
  text-align:left;
  padding:12px;
  border-radius:8px;
  font-size:13px;
}

.account-dropdown button:hover {
  background:#2a3039;
}

.discovery-intro {
  min-height:205px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.intro-copy {
  position:relative;
  z-index:1;
  padding:25px 0;
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:500;
  color:#a3b59a;
  display:flex;
  align-items:center;
  gap:8px;
}

.live-dot {
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 9px #b5f36c80;
}

.intro-copy h1 {
  margin:16px 0 13px;
  font-size:clamp(27px,2.6vw,39px);
  letter-spacing:-1.6px;
  line-height:1.2;
  font-weight:750;
}

.intro-copy h1 span {
  color:var(--accent);
}

.intro-description {
  font-size:12px;
  letter-spacing:.4px;
  color:var(--muted);
  margin:0;
}

.intro-art {
  position:absolute;
  width:400px;
  height:205px;
  right:15px;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

.intro-orbit {
  position:absolute;
  width:360px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(ellipse,#758c2630,transparent 70%);
  filter:blur(10px);
}

.intro-wordmark {
  font-size:36px;
  font-weight:800;
  line-height:1.2;
  transform:rotate(-10deg);
  color:#313b2a;
}

.intro-wordmark em {
  color:#718655;
  font-style:normal;
}

.intro-poster {
  position:absolute;
  width:105px;
  height:151px;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 12px 24px #0009;
  border:1px solid #ffffff26;
}

.intro-poster:nth-of-type(1) {
  transform:translate(-83px,5px) rotate(-15deg);
  opacity:.7;
}

.intro-poster:nth-of-type(2) {
  transform:translate(83px,8px) rotate(14deg);
  opacity:.75;
}

.intro-poster:nth-of-type(3) {
  transform:rotate(-2deg);
  z-index:1;
}

.catalog-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  padding:7px 0 22px;
}

.section-kicker {
  font-size:9px;
  letter-spacing:2.5px;
  color:#737e8b;
}

.catalog-heading h2 {
  margin:7px 0 0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.6px;
  display:flex;
  align-items:center;
  gap:11px;
}

.heading-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

.catalog-sort {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#b0b6c0;
  flex-shrink:0;
  padding:0 9px;
  border:1px solid #ffffff0c;
  border-radius:7px;
  background:#191d23;
}

.catalog-sort svg {
  width:16px;
  height:16px;
}

#sortSelect {
  color:#dce2e9;
  background:transparent;
  border:0;
  min-height:36px;
  padding:5px 3px;
  font:inherit;
  cursor:pointer;
}

#sortSelect option { background:#191d23; }

.catalog-filters {
  background:linear-gradient(110deg,#191d23,#16191e);
  border:1px solid #ffffff08;
  border-radius:12px;
  padding:12px 18px;
  display:grid;
  gap:6px;
}

.filter-row {
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.filter-label {
  color:#8d96a3;
  font-size:12px;
  flex-shrink:0;
  width:32px;
}

.filter-options {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}

.genre-options {
  flex:1;
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:#505a42 transparent;
}

.genre-options .filter-chip { flex-shrink:0; }

.filter-chip {
  border:1px solid transparent;
  background:none;
  color:#afb6c1;
  min-height:32px;
  padding:5px 14px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
}

.filter-chip:hover {
  background:#ffffff09;
  color:#fff;
}

.filter-chip.active {
  background:var(--accent);
  color:#1b2810;
  font-weight:650;
}

.year-select-wrap {
  margin-left:auto;
}

#yearSelect {
  color:#a9b1bc;
  background:#242930;
  border:1px solid #343a43;
  border-radius:6px;
  padding:5px 8px;
  height:30px;
  font-size:11px;
  max-width:110px;
}

.catalog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  gap:12px;
  font-size:12px;
}

.catalog-context {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.catalog-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:4px 12px;
  flex-shrink:0;
}

.catalog-health {
  font-size:10px;
  color:#d5bc83;
  white-space:nowrap;
}

.catalog-actions .catalog-retry {
  color:var(--accent);
  white-space:nowrap;
}

.catalog-retry:disabled,.catalog-state button:disabled {
  opacity:.6;
  cursor:wait;
}

#resetFilters { flex-shrink:0; }

.catalog-count {
  color:#89939f;
  font-size:11px;
}

.text-btn {
  background:transparent;
  color:var(--muted);
  border:0;
  padding:8px 0;
  font-size:12px;
}

.text-btn:hover {
  color:var(--accent);
}

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:25px 16px;
}

.catalog-card {
  display:flex;
  flex-direction:column;
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  min-width:0;
  gap:7px;
  position:relative;
}

.catalog-cover {
  width:100%;
  aspect-ratio:2/3;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:8px;
  background:#1d232b;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px #ffffff09;
}

.catalog-cover:after {
  content:'';
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(transparent,#0009);
  pointer-events:none;
}

.catalog-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s,opacity .3s;
}

.poster-fallback {
  display:grid;
  align-content:center;
  justify-items:center;
  height:100%;
  padding:10px;
  text-align:center;
  font-size:13px;
  gap:15px;
  color:#aec5a0;
  background:linear-gradient(150deg,#344638,#171c25);
}

.fallback-icon {
  font-size:25px;
  opacity:.6;
}

.catalog-card:hover .catalog-cover {
  box-shadow:0 0 0 2px #b5f36caa;
}

.catalog-card:hover .catalog-cover img {
  transform:scale(1.06);
  opacity:.8;
}

.catalog-card:hover .catalog-title {
  color:var(--accent);
}

.poster-play {
  display:grid;
  place-items:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-40%);
  width:40px;
  height:40px;
  padding-left:2px;
  border-radius:50%;
  background:var(--accent);
  color:#17240e;
  opacity:0;
  transition:opacity .2s,transform .2s;
  z-index:2;
}

.catalog-card:hover .poster-play,.catalog-card:focus-visible .poster-play {
  opacity:1;
  transform:translate(-50%,-50%);
}

.catalog-rating {
  display:flex;
  align-items:center;
  gap:3px;
  position:absolute;
  z-index:1;
  bottom:8px;
  right:8px;
  color:#ffdc80;
  font-size:14px;
  font-weight:750;
  text-shadow:0 1px 4px #000;
}

.rating-star {
  font-size:10px;
}

.catalog-type {
  position:absolute;
  left:7px;
  top:7px;
  padding:3px 6px;
  border-radius:4px;
  background:#12171fc9;
  backdrop-filter:blur(8px);
  font-size:9px;
  color:#e8e9ec;
}

.catalog-title {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-top:3px;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
  transition:color .2s;
}

.catalog-meta {
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#939ba6;
  width:100%;
  white-space:nowrap;
}

.catalog-heat {
  display:flex;
  align-items:center;
  gap:3px;
}

.catalog-heat svg {
  width:10px;
  height:12px;
  stroke:#9fa28b;
  stroke-width:1.5;
}

.catalog-pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:106px;
  color:#87939f;
  font-size:12px;
}

.load-more {
  min-width:180px;
  background:#20262b;
  border:1px solid #343e37;
  color:#c9d9bd;
  padding:12px 20px;
  border-radius:8px;
  font-size:12px;
}

.load-more span {
  padding-left:16px;
}

.load-more:hover {
  background:#2c3827;
  border-color:#6b8850;
}

.catalog-footnote {
  border-top:1px solid #ffffff0c;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#87929e;
  font-size:10px;
  line-height:1.8;
}

.catalog-state {
  text-align:center;
  padding:50px 20px;
  color:var(--muted);
  line-height:1.8;
}

.catalog-state strong {
  font-size:16px;
  display:block;
  color:var(--text);
  margin-bottom:8px;
}

.catalog-state button {
  display:block;
  margin:18px auto 0;
  padding:9px 22px;
  border:1px solid #526141;
  background:#2a3622;
  color:var(--accent);
  border-radius:7px;
}

.skeleton-cover,.skeleton-line {
  background:linear-gradient(100deg,#1a1e24 30%,#282d34 50%,#1a1e24 70%);
  background-size:300% 100%;
  animation:shimmer 1.8s infinite;
  border-radius:8px;
}

.skeleton-cover {
  aspect-ratio:2/3;
}

.skeleton-line {
  width:78%;
  height:10px;
  margin-top:12px;
}

.skeleton-line.short {
  width:52%;
  height:7px;
  margin:9px 0 4px;
}

@keyframes shimmer {
  to {
    background-position:-150% 0;
  }
}

body:not(.tab-home) .discover-page,body.tab-home .layout,body.tab-home .workspace-heading {
  display:none;
}

.home-shelves {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:24px;
}

.home-shelves:has(.shelf:not(.hidden)) {
  margin-bottom:28px;
}

body.tab-home #searchHistShelf {
  display:none;
}

.shelf-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.shelf-head h2 {
  font-size:17px;
  margin:0;
}

.shelf-btn {
  border:0;
  background:none;
  color:var(--muted);
  padding:8px;
  font-size:12px;
}

.history {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hist-chip {
  border:1px solid var(--border);
  background:#1b2026;
  color:#b0b7c2;
  padding:8px 14px;
  border-radius:7px;
  font-size:12px;
}

.hist-chip:hover {
  color:var(--accent);
  border-color:#5c6b4c;
}

.poster-row {
  display:flex;
  gap:14px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:2px 0 8px;
}

.poster-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:110px;
  flex-shrink:0;
  background:transparent;
  color:inherit;
  border:0;
  text-align:left;
  padding:0;
  min-width:0;
}

.cover-wrap {
  position:relative;
  display:block;
  aspect-ratio:2/3;
  width:100%;
  border-radius:7px;
  overflow:hidden;
  background:var(--panel-2);
}

.cover,.cover-ph {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cover-ph {
  background:linear-gradient(140deg,#334333,#1c2027);
}

.cover-badge {
  position:absolute;
  left:5px;
  bottom:5px;
  padding:3px 6px;
  border-radius:4px;
  font-size:10px;
  color:#fff;
  background:#0c0e14bf;
  max-width:calc(100% - 10px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.poster-name {
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.poster-sub,.poster-src {
  font-size:10px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.poster-card.active .cover-wrap {
  box-shadow:0 0 0 2px var(--accent);
}

.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:20px 0;
  font-size:12px;
  color:var(--muted);
}

.back-home {
  border:0;
  background:transparent;
  color:#bfccaf;
  padding:10px 0;
}

.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:22px;
  align-items:start;
}

.player-panel,.results-panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  min-width:0;
}

.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px;
  border-bottom:1px solid var(--border);
  font-size:12px;
}

.panel-head h2 {
  margin:0;
  font-size:15px;
}

.poster-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:14px;
  gap:18px 10px;
  max-height:700px;
  overflow-y:auto;
}

.poster-grid .poster-card {
  width:auto;
}

.video-wrap {
  aspect-ratio:16/9;
  background:#07090b;
  position:relative;
}

#art {
  position:absolute;
  inset:0;
}

.player-placeholder {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  background:radial-gradient(ellipse at 50% 35%,#1b2420,#080b0e 70%);
  padding:20px;
}

.placeholder-play {
  color:var(--accent);
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid #778d4855;
  border-radius:50%;
  padding-left:4px;
  font-size:18px;
  margin-bottom:5px;
}

.player-placeholder h2 {
  margin:0;
  font-size:20px;
}

.player-placeholder p {
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.player-placeholder .kbd-hint,.player-placeholder .mobile-hint {
  font-size:10px;
  color:#87939f;
}

.placeholder-discover {
  border:1px solid #5c714b;
  background:#26341f;
  color:var(--accent);
  border-radius:6px;
  padding:9px 18px;
  margin-bottom:8px;
  font-size:12px;
}

.mobile-hint {
  display:none;
}

.play-info {
  padding:20px;
  border-top:1px solid var(--border);
}

.play-title-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px;
}

.play-title {
  font-size:19px;
  font-weight:700;
  margin-bottom:7px;
}

#playMeta {
  font-size:12px;
}

.auto-next {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

input[type=checkbox] {
  accent-color:var(--accent);
}

.line-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.line-head-title {
  font-size:13px;
  font-weight:600;
}

.probe-btn {
  border:1px solid #3d4a35;
  color:var(--accent);
  background:#20291b;
  border-radius:6px;
  padding:7px 12px;
  font-size:11px;
}

.line-wrap {
  position:relative;
  margin-bottom:18px;
  min-height:40px;
}

.line-wrap.is-probing .chips {
  opacity:.35;
  pointer-events:none;
}

.probe-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:12px;
  background:#14171ce6;
  border-radius:6px;
  pointer-events:none;
}

.chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip,.ep-btn,.nav-btn {
  border:1px solid #343a43;
  border-radius:6px;
  background:#1d2229;
  padding:9px 12px;
  color:#bbc1ca;
  font-size:12px;
}

.chip {
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
}

.chip-speed {
  font-size:10px;
  color:var(--muted);
}

.chip.active,.ep-btn.active {
  border-color:#7ca650;
  color:var(--accent);
  background:#293523;
}

.chip:hover,.ep-btn:hover,.nav-btn:hover {
  border-color:#7ca650;
}

.ep-nav {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:start;
}

.episodes {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  max-height:180px;
  overflow-y:auto;
}

.ep-btn {
  min-width:38px;
  padding:8px;
}

.play-status {
  margin-top:14px;
  font-size:12px;
}

.empty,.error,.loading {
  padding:40px 18px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:2;
}

.error {
  color:var(--danger);
}

.empty-symbol {
  display:block;
  font-size:45px;
  margin-bottom:10px;
  color:#5b6d4f;
}

.loading:before {
  content:'';
  display:block;
  width:22px;
  height:22px;
  border:2px solid #33442d;
  border-top-color:var(--accent);
  border-radius:50%;
  margin:0 auto 16px;
  animation:spin .8s linear infinite;
}

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

.tab-bar,.install-bar {
  display:none;
}

body.need-auth .app,body.need-auth .tab-bar,body.need-auth .install-bar {
  display:none!important;
}

.auth-gate {
  display:none;
  min-height:100dvh;
  place-items:center;
  padding:24px;
  background:radial-gradient(ellipse at 70% 15%,#68784224,transparent 60%),radial-gradient(ellipse at 10% 80%,#19332855,transparent 60%);
}

body.need-auth .auth-gate {
  display:grid;
}

.auth-card {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(100%,420px);
  background:#171c21b3;
  border:1px solid #ffffff13;
  border-radius:20px;
  padding:38px;
  box-shadow:0 25px 100px #0004;
}

.auth-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  margin-bottom:24px;
}

.auth-card h1 {
  margin:0;
  font-size:25px;
  letter-spacing:-.8px;
}

.auth-intro {
  font-size:12px;
  color:var(--muted);
  margin:0 0 16px;
}

.auth-card input {
  width:100%;
  min-height:48px;
  border-radius:8px;
  background:#20262c;
  border:1px solid #343b44;
  padding:10px 14px;
  color:var(--text);
  font-size:16px;
}

.auth-card button[type=submit] {
  border:0;
  min-height:47px;
  border-radius:8px;
  background:var(--accent);
  color:#213212;
  font-weight:700;
  margin-top:5px;
}

.auth-card button[type=submit]:hover {
  background:#c8fa93;
}

.auth-link {
  background:none;
  border:0;
  color:#b6c9a4;
  padding:7px;
  font-size:12px;
}

.auth-error {
  margin:0;
  min-height:1.2em;
  color:var(--danger);
  font-size:12px;
}

@media(min-width:1600px) {
  .catalog-grid {
    grid-template-columns:repeat(10,minmax(0,1fr));
  }
}

@media(max-width:1200px) {
  .app {
    padding-left:30px;
    padding-right:30px;
  }
  .topbar {
    gap:26px;
  }
  .desktop-nav {
    gap:22px;
  }
  .user-name {
    display:none;
  }
  .catalog-grid {
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:24px 14px;
  }
  .intro-art {
    right:0;
    width:300px;
  }
}

@media(max-width:960px) {
  :root {
    --tab-h:calc(62px + var(--safe-bottom));
  }
  .app {
    padding:var(--safe-top) 24px calc(24px + var(--tab-h));
  }
  .topbar {
    gap:22px;
    height:78px;
  }
  .desktop-nav {
    gap:18px;
  }
  .desktop-nav .nav-link:last-child {
    display:none;
  }
  .account-chevron,.search-shortcut {
    display:none;
  }
  .search-bar {
    min-width:160px;
  }
  .search-bar input {
    font-size:16px;
  }
  .search-bar input::placeholder {
    font-size:12px;
  }
  .catalog-grid {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:23px 12px;
  }
  .catalog-filters {
    padding:12px;
  }
  .filter-row {
    gap:10px;
  }
  .filter-chip {
    padding:5px 11px;
  }
  .filter-options {
    gap:4px;
  }
  .intro-art {
    right:-35px;
    width:280px;
    opacity:.8;
  }
  .discovery-intro {
    min-height:195px;
  }
  .intro-description {
    max-width:370px;
    line-height:1.8;
  }
  .intro-copy h1 {
    font-size:29px;
  }
  .intro-poster {
    width:87px;
    height:130px;
  }
  .layout {
    grid-template-columns:minmax(0,1fr);
  }
  body.tab-list .player-panel,body.tab-watch .results-panel,body.tab-watch .home-shelves {
    display:none;
  }
  .poster-grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
    max-height:none;
    padding:18px;
    gap:22px 12px;
  }
  .tab-bar {
    display:flex;
    position:fixed;
    inset:auto 0 0;
    height:var(--tab-h);
    padding:6px 18px var(--safe-bottom);
    border-top:1px solid #ffffff10;
    background:#13171bef;
    backdrop-filter:blur(18px);
    z-index:40;
  }
  .tab-btn {
    flex:1;
    border:0;
    background:transparent;
    color:#8d97a5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:10px;
    min-height:48px;
  }
  .tab-btn svg {
    width:19px;
    height:19px;
  }
  .tab-btn.active {
    color:var(--accent);
  }
  .tab-btn.active svg {
    fill:#b5f36c15;
  }
  .install-bar {
    display:flex;
    position:fixed;
    bottom:calc(var(--tab-h) + 10px);
    left:16px;
    right:16px;
    z-index:41;
    background:#252c23;
    border:1px solid #4b5941;
    padding:12px;
    border-radius:10px;
    align-items:center;
    gap:12px;
    box-shadow:0 5px 30px #0008;
  }
  .install-text {
    flex:1;
    font-size:12px;
  }
  .install-bar button {
    padding:8px 12px;
    border:0;
    background:var(--accent);
    color:#18230f;
    border-radius:6px;
  }
  .install-bar .install-close {
    background:none;
    color:var(--muted);
    font-size:20px;
    padding:5px 10px;
  }
  .kbd-hint {
    display:none;
  }
  .mobile-hint {
    display:block;
  }
  .chip,.nav-btn,.ep-btn {
    min-height:44px;
  }
  .ep-nav {
    grid-template-columns:1fr 1fr;
  }
  .episodes {
    grid-column:1/-1;
    order:-1;
    gap:8px;
    margin-bottom:4px;
  }
  .ep-btn {
    min-width:44px;
  }
  .chips {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
  }
  .chip {
    flex-shrink:0;
  }
}

@media(max-width:740px) {
  .desktop-nav {
    display:none;
  }
  .app {
    padding-left:18px;
    padding-right:18px;
  }
  .catalog-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .filter-chip {
    min-height:36px;
    padding:6px 12px;
  }
  .year-options .filter-chip:nth-child(n+5) {
    display:none;
  }
  .intro-art {
    width:200px;
    right:-28px;
    opacity:.7;
  }
  .intro-poster {
    width:76px;
    height:112px;
  }
  .intro-poster:nth-of-type(1) {
    transform:translate(-54px,5px) rotate(-16deg);
  }
  .intro-poster:nth-of-type(2) {
    transform:translate(48px,8px) rotate(14deg);
  }
  .intro-copy h1 {
    font-size:28px;
  }
  .intro-description {
    max-width:280px;
    font-size:11px;
  }
  .intro-copy .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .catalog-heading h2 {
    font-size:20px;
  }
}

@media(max-width:520px) {
  .topbar {
    height:auto;
    min-height:119px;
    flex-wrap:wrap;
    gap:14px;
    padding:15px 0 14px;
  }
  .brand {
    font-size:23px;
    gap:8px;
  }
  .brand-mark {
    width:29px;
    height:29px;
    font-size:13px;
    border-radius:8px;
  }
  .account-menu {
    margin-left:auto;
  }
  .account-menu .user-name {
    display:block;
  }
  .search-bar {
    order:3;
    width:100%;
    height:39px;
    flex:1 1 100%;
    border-radius:8px;
  }
  .search-bar button {
    height:29px;
    padding:0 14px;
  }
  .discovery-intro {
    min-height:149px;
  }
  .intro-copy {
    padding:23px 0;
    max-width:calc(100% - 74px);
  }
  .intro-copy h1 {
    font-size:25px;
    letter-spacing:-1px;
    margin:12px 0 10px;
  }
  .intro-copy h1 span {
    display:block;
    margin-top:5px;
  }
  .intro-copy .eyebrow {
    font-size:8px;
    letter-spacing:.4px;
    white-space:nowrap;
  }
  .intro-description {
    display:none;
  }
  .intro-art {
    right:-8px;
    top:0;
    width:124px;
    height:154px;
  }
  .intro-poster {
    width:58px;
    height:86px;
    border-radius:4px;
  }
  .intro-poster:nth-of-type(1) {
    transform:translate(-29px,2px) rotate(-18deg);
  }
  .intro-poster:nth-of-type(2) {
    transform:translate(31px,7px) rotate(16deg);
  }
  .intro-orbit {
    width:190px;
    height:140px;
  }
  .intro-wordmark {
    font-size:25px;
  }
  .catalog-heading {
    padding:4px 0 16px;
  }
  .section-kicker {
    font-size:8px;
    letter-spacing:1.8px;
  }
  .catalog-heading h2 {
    font-size:19px;
    margin-top:5px;
  }
  .catalog-sort {
    font-size:10px;
  }
  .catalog-sort svg {
    width:13px;
  }
  .catalog-filters {
    margin:0 -3px;
    padding:10px 8px;
    border-radius:9px;
    gap:4px;
  }
  .filter-row {
    gap:5px;
    align-items:flex-start;
  }
  .filter-label {
    font-size:11px;
    width:28px;
    min-height:34px;
    display:flex;
    align-items:center;
  }
  .filter-options {
    gap:2px;
    flex:1;
  }
  .filter-chip {
    padding:6px 10px;
    min-height:34px;
    font-size:11px;
    border-radius:5px;
  }
  .year-options {
    flex-wrap:nowrap;
    flex:0 1 auto;
  }
  .year-options .filter-chip:nth-child(n+4) {
    display:none;
  }
  .year-select-wrap {
    margin-top:2px;
    margin-left:auto;
  }
  #yearSelect {
    max-width:93px;
    height:30px;
    font-size:10px;
    padding:5px;
  }
  .catalog-toolbar {
    min-height:48px;
    font-size:11px;
  }
  .catalog-count {
    font-size:10px;
  }
  .catalog-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:21px 10px;
  }
  .catalog-cover {
    border-radius:6px;
  }
  .catalog-card {
    gap:6px;
  }
  .catalog-title {
    font-size:12px;
    margin-top:2px;
  }
  .catalog-meta {
    font-size:9px;
  }
  .catalog-heat {
    gap:2px;
  }
  .catalog-heat svg {
    width:9px;
  }
  .catalog-rating {
    right:6px;
    bottom:6px;
    font-size:13px;
  }
  .catalog-type {
    font-size:8px;
    left:5px;
    top:5px;
  }
  .catalog-pagination {
    min-height:90px;
  }
  .catalog-footnote {
    font-size:9px;
  }
  .catalog-footnote>span:last-child {
    display:none;
  }
  .catalog-context {
    gap:7px;
  }
  .workspace-heading {
    margin:12px 0;
    gap:12px;
  }
  #workspaceHint {
    font-size:10px;
    text-align:right;
  }
  .player-panel {
    margin:0 -18px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .player-placeholder {
    gap:7px;
    padding:10px;
  }
  .placeholder-play {
    width:34px;
    height:34px;
    font-size:12px;
    margin:0;
  }
  .player-placeholder h2 {
    font-size:15px;
  }
  .player-placeholder p {
    font-size:10px;
  }
  .placeholder-discover {
    margin-bottom:0;
    padding:7px 12px;
    font-size:10px;
  }
  .player-placeholder .mobile-hint {
    display:none;
  }
  .play-info {
    padding:18px;
  }
  .play-title {
    font-size:17px;
  }
  .auto-next {
    font-size:10px;
  }
  .poster-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:12px;
    gap:18px 10px;
  }
  .auth-card {
    padding:28px;
  }
}

@media(max-width:370px) {
  .app {
    padding-left:14px;
    padding-right:14px;
  }
  .filter-chip {
    padding-left:8px;
    padding-right:8px;
  }
  .catalog-grid {
    gap:18px 8px;
  }
  .catalog-heat .heat-prefix {
    display:none;
  }
  .player-panel {
    margin:0 -14px;
  }
}

@media(max-width:960px) and (orientation:landscape) and (max-height:500px) {
  body.tab-watch .topbar,body.tab-watch .workspace-heading,body.tab-watch .home-shelves,body.tab-watch .results-panel,body.tab-watch .play-info,body.tab-watch .tab-bar,body.tab-watch .install-bar {
    display:none!important;
  }
  body.tab-watch .app {
    padding:0;
    max-width:none;
  }
  body.tab-watch .player-panel {
    border:0;
    border-radius:0;
    margin:0;
  }
  body.tab-watch .video-wrap {
    aspect-ratio:auto;
    height:100dvh;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* Compact discovery layout: keep more covers above the fold. */
@media (min-width: 961px) {
  .topbar { height: 76px; }
  .discovery-intro { min-height: 112px; }
  .intro-art { height: 112px; }
  .intro-poster { width: 67px; height: 98px; }
  .intro-poster:nth-of-type(1) { transform: translate(-64px, 3px) rotate(-15deg); }
  .intro-poster:nth-of-type(2) { transform: translate(63px, 6px) rotate(14deg); }
  .intro-copy { padding: 9px 0; }
  .intro-copy .eyebrow { margin: 4px 0; }
  .intro-copy h1 { font-size: 30px; margin: 8px 0; }
  .catalog-heading { padding: 7px 0 13px; }
  .catalog-heading h2 { font-size: 21px; margin-top: 5px; }
  .catalog-filters { padding: 9px 18px; gap: 4px; }
  .catalog-toolbar { min-height: 44px; }
  .catalog-grid { gap: 23px 14px; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .catalog-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .topbar { min-height: 105px; padding: 12px 0; gap: 10px; }
  .search-bar { height: 35px; }
  .discovery-intro { display: none; }
  .intro-copy { padding: 10px 0; max-width: 100%; }
  .intro-copy h1 { font-size: 19px; margin: 0; letter-spacing: -.7px; }
  .intro-copy h1 span { display: inline; margin: 0; }
  .intro-copy .eyebrow, .intro-art { display: none; }
  .catalog-heading { padding: 12px 0 8px; }
  .section-kicker { display: none; }
  .catalog-heading h2 { font-size: 18px; margin: 0; }
  .catalog-filters { padding: 7px 8px; gap: 2px; }
  .filter-label, .filter-chip { min-height: 29px; }
  .filter-chip { padding-top: 4px; padding-bottom: 4px; }
  .filter-label { align-self: center; }
  #regionFilters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #505a42 transparent; }
  #regionFilters .filter-chip { flex-shrink: 0; }
  #yearSelect { height: 27px; }
  .year-select-wrap { margin-top: 1px; }
  .catalog-toolbar { min-height: 36px; }
  .catalog-grid { row-gap: 16px; }
}
@media (max-width: 370px) {
  .discovery-intro { display: none; }
  .catalog-heading { padding-top: 16px; }
  .filter-chip { padding-left: 7px; padding-right: 7px; }
}

/* Line controls remain interactive while probes are running. */
.line-head { flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.line-option { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; min-height: 32px; }
.line-option input { width: 14px; height: 14px; }
.line-summary { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 0 0 12px; min-height: 19px; }
.line-wrap.is-probing .chips { opacity: 1; pointer-events: auto; }
.probe-overlay { position: static; background: transparent; text-align: left; display: block; margin-top: 8px; font-size: 10px; color: var(--accent); }
.chip.recommended { border-color: #637a49; }
.chip-name { display: flex; align-items: center; gap: 6px; }
.line-recommend-tag { font-size: 9px; border-radius: 3px; background: #b5f36c20; color: var(--accent); padding: 2px 4px; }
.line-followup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 18px; }
.line-speed-help { font-size: 10px; color: var(--muted); }
@media (max-width: 520px) {
  .line-actions { gap: 8px; width: 100%; justify-content: space-between; }
  .line-option { font-size: 10px; min-height: 36px; }
  .line-actions .probe-btn { min-height: 36px; }
  .line-summary { font-size: 10px; }
}

@media(max-width:520px) {
  .catalog-actions { gap:3px 9px; max-width:58%; }
  .catalog-actions .text-btn { font-size:10px; }
  .catalog-health { font-size:9px; }
}