:root {
  color-scheme: dark;
  --canvas: #060b24;
  --canvas-raised: #0a1230;
  --surface: #0d1636;
  --surface-strong: #131e47;
  --surface-soft: #1a2758;
  --line: #26325f;
  --line-soft: rgba(255, 255, 255, 0.09);
  --text: #f6f5f3;
  --muted: #96a1c1;
  --muted-strong: #cbd3ec;
  --brand-blue: #2a84f0;
  --brand-violet: #6c2cf0;
  --accent: #2a84f0;
  --accent-strong: #8a4dff;
  --signal: #4bd4c2;
  --danger: #ff6b6b;
  --header-height: 72px;
  --content-max: 1440px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  font-family: "Segoe UI Variable", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--canvas);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 84% 10%, rgba(23, 143, 255, 0.1), transparent 34rem),
    linear-gradient(180deg, #060b24 0%, #0a1230 52%, #060b24 100%);
  color: var(--text);
}

body.has-layer {
  overflow: hidden;
}

button,
input,
a {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 80;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: 4px;
  background: var(--text);
  color: var(--canvas);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.web-app {
  min-height: 100dvh;
}

.web-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 32px;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(6, 11, 36, 0.96), rgba(6, 11, 36, 0.52));
  backdrop-filter: blur(18px);
  transition: background 220ms ease, border-color 220ms ease;
}

.web-header.is-solid {
  border-color: var(--line-soft);
  background: rgba(6, 11, 36, 0.97);
}

.web-brand {
  display: inline-flex;
  align-items: center;
  width: 162px;
  min-width: 162px;
  color: var(--text);
  text-decoration: none;
}

.web-brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-button {
  position: relative;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transition: color 180ms ease, transform 180ms ease;
}

.nav-button::after {
  position: absolute;
  right: 14px;
  bottom: 3px;
  left: 14px;
  height: 2px;
  transform: scaleX(0);
  background: var(--accent);
  content: "";
  transition: transform 180ms ease;
}

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

.nav-button.is-active::after {
  transform: scaleX(1);
}

.nav-button:active,
.primary-button:active,
.secondary-button:active,
.icon-command:active,
.poster-card:active {
  transform: translateY(1px) scale(0.99);
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.global-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  width: min(23vw, 290px);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(10, 18, 48, 0.76);
  transition: border-color 180ms ease, background 180ms ease;
}

.global-search:focus-within {
  border-color: rgba(23, 143, 255, 0.66);
  background: var(--surface);
}

.global-search img {
  width: 16px;
  height: 16px;
  opacity: 0.68;
}

.global-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.global-search input::placeholder {
  color: #777d88;
}

.header-icon-button,
.wallet-trigger {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(10, 18, 48, 0.76);
  color: var(--muted-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.header-icon-button {
  padding: 0 11px;
  font-size: 12px;
}

.language-trigger img {
  width: 15px;
  height: 15px;
  opacity: 0.82;
}

.wallet-trigger {
  min-width: 64px;
  padding: 0 12px;
}

.wallet-trigger .fct-label {
  color: #ffd36d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.header-icon-button:hover,
.wallet-trigger:hover {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--text);
}

#web-main {
  min-height: 100dvh;
}

.web-skeleton {
  min-height: 100dvh;
  padding-top: var(--header-height);
  background: var(--canvas);
}

.skeleton-hero {
  min-height: 580px;
  background: linear-gradient(110deg, #0d1636 24%, #131e47 42%, #0d1636 60%);
  background-size: 240% 100%;
  animation: skeleton-shift 1.4s ease-in-out infinite;
}

.skeleton-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: min(calc(100% - 64px), var(--content-max));
  margin: 28px auto 0;
}

.skeleton-row span {
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: var(--surface);
}

@keyframes skeleton-shift {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.web-hero {
  position: relative;
  display: grid;
  height: clamp(500px, 55dvh, 610px);
  min-height: 500px;
  align-items: end;
  overflow: hidden;
  background: #0a1230;
}

.hero-media,
.hero-media picture,
.hero-media img,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: var(--hero-focus, center center);
  filter: saturate(0.82) contrast(1.03);
  transform: scale(1.008);
  transition: opacity 360ms ease, transform 5.8s ease;
}

.web-hero.is-entering .hero-media img {
  transform: scale(1.035);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(6, 11, 36, 0.88) 0%, rgba(6, 11, 36, 0.68) 31%, rgba(6, 11, 36, 0.16) 70%, rgba(6, 11, 36, 0.38) 100%),
    linear-gradient(0deg, var(--canvas) 0%, rgba(6, 11, 36, 0.02) 52%, rgba(6, 11, 36, 0.38) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), var(--content-max));
  margin: 0 auto;
  padding: 128px 0 40px;
}

.hero-kicker,
.detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #ff416c, #ff7955);
  color: white;
  font-size: 12px;
  font-weight: 760;
}

.hero-kicker::before,
.detail-kicker::before {
  display: none;
}

.hero-content h1,
.detail-content h1 {
  max-width: 700px;
  margin: 14px 0 12px;
  font-size: 58px;
  font-weight: 840;
  line-height: 1.04;
  text-wrap: balance;
}

.hero-meta,
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--muted-strong);
  font-size: 14px;
}

.hero-meta span,
.detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-meta span + span::before,
.detail-meta span + span::before {
  width: 3px;
  height: 3px;
  margin-right: 4px;
  border-radius: 50%;
  background: #707681;
  content: "";
}

.hero-description,
.detail-description {
  max-width: 610px;
  margin: 18px 0 0;
  color: #d2d5da;
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-actions,
.detail-actions,
.player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.primary-button,
.secondary-button,
.quiet-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 760;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.primary-button {
  border: 1px solid rgba(88, 118, 255, 0.72);
  background: linear-gradient(96deg, var(--brand-blue), var(--brand-violet));
  color: white;
  box-shadow: 0 13px 34px rgba(44, 89, 255, 0.28);
}

.primary-button:hover {
  border-color: rgba(141, 102, 255, 0.92);
  background: linear-gradient(96deg, #28a6ff, #8b3dff);
}

.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(19, 22, 27, 0.72);
  color: var(--text);
  backdrop-filter: blur(10px);
}

.secondary-button:hover,
.quiet-button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--surface-strong);
}

.quiet-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted-strong);
}

.button-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hero-carousel-controls {
  display: flex;
  width: min(410px, 72vw);
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.hero-progress {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 7px;
}

.hero-progress button {
  position: relative;
  width: 52px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-progress button::before,
.hero-progress button::after {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
}

.hero-progress button::before {
  background: rgba(255, 255, 255, 0.3);
}

.hero-progress button::after {
  transform: scaleX(0);
  transform-origin: left;
  background: var(--brand-blue);
}

.hero-progress button.is-active::after {
  animation: hero-progress 5.4s linear forwards;
}

.web-hero.is-carousel-paused .hero-progress button.is-active::after {
  animation-play-state: paused;
}

.hero-playback-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(14, 16, 20, 0.7);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.hero-playback-toggle:hover,
.hero-playback-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(29, 32, 38, 0.9);
}

.hero-playback-toggle img {
  width: 12px;
  height: 14px;
  object-fit: contain;
}

@keyframes hero-progress {
  to { transform: scaleX(1); }
}

.web-content {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 64px), var(--content-max));
  margin: 0 auto;
  padding-bottom: 110px;
}

.content-section {
  margin-top: 52px;
}

.home-after-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: start;
}

.home-after-hero > .content-section {
  min-width: 0;
  margin-top: 24px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.section-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.section-link {
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.section-link:hover {
  color: var(--text);
}

.continue-card {
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr);
  min-width: 0;
  min-height: 188px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(7, 22, 41, 0.88);
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease;
}

.continue-card:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 143, 255, 0.44);
}

.continue-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.continue-cover {
  position: relative;
  align-self: stretch;
  min-height: 112px;
  overflow: hidden;
}

.continue-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.continue-play {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(6, 11, 36, 0.62);
  backdrop-filter: blur(8px);
}

.continue-play img {
  width: 11px;
  height: 11px;
  object-fit: contain;
}

.continue-copy {
  min-width: 0;
  padding: 12px 14px 11px;
}

.continue-copy span {
  color: var(--muted);
  font-size: 13px;
}

.continue-copy h3 {
  margin: 0 0 5px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
}

.continue-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.continue-progress {
  height: 3px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.continue-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-blue);
}

.weekly-ranking {
  min-width: 0;
}

.weekly-ranking-list {
  display: grid;
  gap: 0;
}

.weekly-ranking-item {
  display: grid;
  grid-template-columns: 40px 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}

.weekly-ranking-item > strong {
  color: var(--muted);
  font-size: 22px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.weekly-ranking-item:first-child > strong {
  color: var(--brand-blue);
}

.weekly-ranking-item > img {
  width: 72px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
}

.weekly-ranking-copy {
  min-width: 0;
}

.weekly-ranking-item h3,
.weekly-ranking-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-ranking-item h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.weekly-ranking-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.weekly-ranking-views {
  color: var(--muted-strong);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.continue-actions {
  padding-right: 28px;
}

.ranking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.75fr);
  min-height: 0;
  align-items: stretch;
  gap: 22px;
  height: clamp(500px, 40vw, 620px);
}

.ranking-feature {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 7px;
  cursor: pointer;
  background: var(--surface);
}

.ranking-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.ranking-feature::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 9, 11, 0.96), transparent 66%);
  content: "";
}

.ranking-number {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  font-size: 20px;
  font-weight: 850;
}

.ranking-feature-copy {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 30px;
  left: 30px;
}

.ranking-feature-copy h3 {
  max-width: 22ch;
  margin: 0 0 8px;
  font-size: 36px;
  line-height: 1.12;
  text-wrap: balance;
}

.ranking-feature-copy p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 650;
}

.ranking-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  gap: 10px;
}

.ranking-item {
  display: grid;
  grid-template-columns: 44px 92px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.ranking-item:hover {
  transform: translateX(2px);
  background: var(--surface-strong);
}

.ranking-item > strong {
  color: #ff6b9b;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.ranking-item img {
  width: 92px;
  height: min(112px, 100%);
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  object-fit: cover;
  object-position: center 24%;
}

.ranking-item-copy {
  min-width: 0;
}

.ranking-item-copy h3 {
  display: -webkit-box;
  margin: 0 0 7px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ranking-item-copy p,
.ranking-trend {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.ranking-compact-trend {
  display: none;
}

.ranking-trend {
  justify-self: end;
  color: var(--muted-strong);
  font-weight: 700;
  white-space: nowrap;
}

.poster-rail {
  display: grid;
  grid-auto-columns: clamp(172px, 13.5vw, 214px);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 12px;
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
}

.poster-rail::-webkit-scrollbar {
  display: none;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: start;
  gap: 34px 18px;
}

.poster-card {
  display: grid;
  grid-template-rows: auto minmax(62px, auto);
  align-content: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  scroll-snap-align: start;
  transition: transform 220ms ease;
}

.poster-card:hover {
  transform: translateY(-4px);
}

.poster-media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
}

.poster-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease, filter 300ms ease;
}

.poster-card:hover .poster-media img {
  filter: brightness(1.06);
  transform: scale(1.025);
}

.poster-badge,
.poster-views {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  backdrop-filter: blur(8px);
}

.poster-badge {
  top: 9px;
  right: 9px;
  min-height: 24px;
  padding: 0 7px;
  background: rgba(237, 30, 97, 0.88);
  font-size: 11px;
  font-weight: 750;
}

.poster-views {
  right: 9px;
  bottom: 9px;
  padding: 5px 7px;
  background: rgba(8, 9, 11, 0.72);
  color: white;
  font-size: 11px;
}

.poster-copy {
  display: grid;
  min-width: 0;
  min-height: 62px;
  align-content: start;
  gap: 5px;
  padding: 11px 2px 0;
  overflow: hidden;
}

.poster-title {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.poster-meta {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genre-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.genre-tabs::-webkit-scrollbar {
  display: none;
}

.genre-tab {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  white-space: nowrap;
}

.genre-tab.is-active {
  border-color: rgba(237, 30, 97, 0.54);
  background: rgba(237, 30, 97, 0.12);
  color: #ff7ba5;
}

.load-sentinel {
  display: grid;
  min-height: 96px;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.load-sentinel span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.load-sentinel span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(66, 214, 196, 0.09);
  content: "";
}

.detail-page {
  min-height: 100dvh;
  background: var(--canvas);
}

.detail-hero {
  position: relative;
  display: grid;
  min-height: 650px;
  align-items: end;
  overflow: hidden;
}

.detail-background,
.detail-background img,
.detail-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.detail-background img {
  object-fit: cover;
  object-position: center 22%;
}

.detail-overlay {
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.98), rgba(8, 9, 11, 0.72) 42%, rgba(8, 9, 11, 0.22)),
    linear-gradient(0deg, var(--canvas), transparent 58%);
}

.detail-content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), var(--content-max));
  margin: 0 auto;
  padding: 150px 0 74px;
}

.back-command {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
}

.back-command:hover {
  color: var(--text);
}

.detail-body {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.8fr);
  gap: 54px;
  width: min(calc(100% - 64px), var(--content-max));
  margin: 0 auto;
  padding: 40px 0 110px;
}

.detail-related {
  width: min(calc(100% - 64px), var(--content-max));
  margin: 0 auto;
  padding-bottom: 110px;
}

.detail-summary h2,
.episode-section h2,
.player-meta h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.detail-summary p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.75;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--line-soft);
}

.detail-stats div {
  padding: 18px;
  background: var(--surface);
}

.detail-stats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.detail-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.episode-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.episode-legend {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #3a404a transparent;
}

.detail-episode-preview {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.episode-more-button {
  min-height: 38px;
  padding: 0 14px;
}

.episode-button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted-strong);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.episode-button > span {
  position: relative;
  z-index: 1;
}

.episode-status-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  opacity: 0.72;
}

.episode-button.is-current {
  border-color: #238dff;
  background: linear-gradient(145deg, rgba(35, 141, 255, 0.25), rgba(119, 44, 255, 0.16));
  color: #fff;
  box-shadow: inset 0 0 24px rgba(35, 141, 255, 0.12);
}

.episode-button:hover {
  border-color: #59616e;
  color: var(--text);
}

.player-page {
  width: min(calc(100% - 64px), var(--content-max));
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--header-height) + 34px) 0 110px;
}

.player-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.player-label {
  color: var(--muted);
  font-size: 12px;
}

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

.player-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #050506;
  box-shadow: var(--shadow);
}

.player-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: brightness(0.66);
}

.player-screen::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 6, 0.9), transparent 45%);
  content: "";
}

.local-upload-stage::after {
  display: none;
}

.local-upload-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050608;
}

.player-compatibility-error {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 32px;
  background: rgba(5, 6, 8, 0.9);
  color: #fff;
  text-align: center;
}

.player-compatibility-error strong {
  font-size: 24px;
}

.player-compatibility-error span {
  color: var(--muted-strong);
  font-size: 13px;
}

.player-error-back {
  justify-self: center;
  min-width: 96px;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.player-error-back:hover,
.player-error-back:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.player-center-button {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: rgba(246, 245, 243, 0.95);
  cursor: pointer;
}

.player-center-button img {
  width: 26px;
  height: 26px;
  filter: brightness(0);
}

.player-demo-label {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(5, 5, 6, 0.64);
  color: var(--muted-strong);
  font-size: 11px;
  backdrop-filter: blur(8px);
}

.player-controls {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  left: 18px;
}

.player-track {
  position: relative;
  height: 3px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.26);
}

.player-track span {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--accent);
}

.player-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-control-row div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-command {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(8, 9, 11, 0.55);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.icon-command img {
  width: 16px;
  height: 16px;
}

.player-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.player-side {
  max-height: calc((100vw - 64px - 358px) * 0.5625);
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.player-side header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.player-side h2 {
  margin: 0;
  font-size: 17px;
}

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

.player-episodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  max-height: 470px;
  overflow-y: auto;
  padding: 14px;
}

.player-episodes .episode-button.is-current {
  border-color: var(--accent);
  background: rgba(237, 30, 97, 0.14);
  color: white;
}

.player-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}

.player-meta p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.web-app.is-player-view .web-header,
.web-app.is-player-view .mobile-nav {
  display: none;
}

.web-app.is-player-view #web-main {
  min-height: 100dvh;
  background: #060b24;
}

.player-page {
  --player-media-width: 9;
  --player-media-height: 16;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: #070c26;
}

.player-site-header {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(20px, 3vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(1, 5, 11, 0.94);
}

.player-home-command {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(10, 24, 42, 0.84);
  cursor: pointer;
}

.player-home-command img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.player-home-command span {
  font-size: 13px;
  font-weight: 700;
}

.player-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.player-breadcrumb strong {
  color: #fff;
}

.player-breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-layout-shell {
  position: relative;
  width: min(calc(100% - 48px), 1800px);
  margin: 0 auto;
}

.player-primary-column {
  min-width: 0;
}

.player-page-heading {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 5px;
}

.player-page-heading span,
.player-page-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.player-page-heading h1 {
  margin: 0;
  color: #f4f6f8;
  font-size: clamp(24px, 2rem, 32px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.player-canvas {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: start;
  overflow: visible;
  padding: 0;
  background: transparent;
}

.player-screen {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--player-media-width) / var(--player-media-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: #000;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

.player-screen::after {
  display: none;
}

.player-media-frame,
.player-media-root {
  position: absolute;
  inset: 0;
}

.player-media-root > img,
.player-media-root > video {
  width: 100%;
  height: 100%;
}

.player-media-root > img {
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.8);
}

.player-media-root > video {
  display: block;
  object-fit: contain;
  background: #000;
}

.player-desktop-panel {
  display: grid;
  height: auto;
  min-width: 0;
  align-content: start;
  gap: 14px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.player-rail-summary,
.player-panel-episode-entry,
.player-panel-footer,
.player-rail-recommendations {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: #0d1636;
}

.player-panel-kicker {
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 800;
}

.player-rail-summary h2 {
  margin: 7px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.player-rail-summary > p {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.player-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.player-panel-actions button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.player-panel-actions img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.player-panel-actions button.is-active {
  border-color: rgba(19, 152, 255, 0.52);
  color: var(--brand-blue);
}

.player-panel-actions button.is-active img {
  filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(2681%) hue-rotate(190deg) brightness(103%);
}

.player-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.player-panel-heading span {
  color: var(--muted);
  font-size: 12px;
}

.player-panel-episodes {
  display: grid;
  max-height: 360px;
  align-content: start;
  grid-auto-rows: 42px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
}

.player-panel-episodes .episode-button {
  min-height: 42px;
  aspect-ratio: auto;
}

.player-panel-episode-entry {
  min-height: 0;
}

.player-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
}

.player-panel-next-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.player-panel-next-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-panel-next-copy strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-panel-next {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(48, 161, 255, 0.42);
  border-radius: 6px;
  background: #2a84f0;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.player-panel-next img {
  width: 13px;
  height: 13px;
  filter: brightness(0) invert(1);
}

.player-below-actions {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.player-below-action-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.player-below-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.player-below-actions button:hover,
.player-below-actions button:focus-visible,
.player-below-actions button.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #5aa3ff;
}

.player-below-actions button:focus-visible,
.player-recommendation-card:focus-visible {
  outline: 2px solid #5aa3ff;
  outline-offset: 2px;
}

.player-below-actions img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.player-now-playing,
.player-below-finished {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.player-description {
  padding: 20px 0 44px;
}

.player-description p {
  max-width: 72ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.75;
}

.player-rail-recommendations h2 {
  margin: 0 0 14px;
  font-size: 16px;
}

.player-recommendation-list {
  display: grid;
  gap: 10px;
}

.player-recommendation-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 142px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.player-recommendation-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  background: #0a1230;
}

.player-recommendation-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-recommendation-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.player-recommendation-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.player-recommendation-copy span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.44);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-persistent-chrome {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear;
}

.player-persistent-chrome.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.player-persistent-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 16px 18px 26px;
  background: linear-gradient(180deg, rgba(1, 5, 11, 0.9), transparent);
}

.player-persistent-top button,
.player-rail-actions button {
  pointer-events: auto;
}

.player-top-command {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(3, 9, 18, 0.58);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.player-top-command img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
}

.player-title-lockup {
  min-width: 0;
}

.player-title-lockup strong,
.player-title-lockup span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-title-lockup strong {
  font-size: 15px;
}

.player-title-lockup span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
}

.player-top-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-wallet-compact {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(3, 9, 18, 0.58);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.player-wallet-compact span {
  color: #f7b844;
  font-size: 9px;
  font-weight: 800;
}

.player-wallet-compact strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.player-rail-actions {
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  gap: 14px;
  transform: translateY(-42%);
}

.player-rail-command {
  display: grid;
  width: 48px;
  min-height: 58px;
  place-items: center;
  gap: 4px;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 2px 10px #000;
}

.player-rail-command img {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0, 0, 0, 0.72));
}

.player-rail-command.is-active img {
  filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(2681%) hue-rotate(190deg) brightness(103%);
}

.player-rail-command span {
  max-width: 48px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-center-button {
  z-index: 4;
  width: 64px;
  height: 64px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.player-center-button.is-playing {
  opacity: 0;
  pointer-events: none;
}

.player-temporary-chrome {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 124px 20px 22px;
  background: linear-gradient(0deg, rgba(1, 5, 11, 0.96), rgba(1, 5, 11, 0.72) 52%, transparent);
  opacity: 1;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

.player-temporary-chrome button,
.player-temporary-chrome input {
  pointer-events: auto;
}

.player-temporary-chrome.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.player-temporary-chrome.is-hidden.has-forced-next {
  opacity: 1;
  transform: translateY(0);
  background: transparent;
}

.player-temporary-chrome.is-hidden.has-forced-next > :not(.player-control-row),
.player-temporary-chrome.is-hidden.has-forced-next .player-control-left,
.player-temporary-chrome.is-hidden.has-forced-next .player-control-right > :not([data-player-next]) {
  display: none;
}

.player-temporary-chrome.is-hidden.has-forced-next .player-control-row,
.player-temporary-chrome.is-hidden.has-forced-next .player-control-right {
  opacity: 1;
  pointer-events: auto;
}

.player-temporary-chrome.is-hidden.has-forced-next [data-player-next] {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}

.player-temporary-copy strong,
.player-temporary-copy span {
  display: block;
}

.player-temporary-copy strong {
  padding-right: 48px;
  font-size: 22px;
  line-height: 1.2;
}

.player-temporary-copy span,
.player-temporary-copy p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
}

.player-temporary-copy span {
  margin-top: 6px;
}

.player-temporary-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 16px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.player-temporary-chrome .player-track {
  height: 3px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.player-temporary-chrome .player-track span {
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-violet));
  transition: width 120ms linear;
}

.player-seek-track {
  width: 100%;
  height: 14px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--brand-blue);
  appearance: none;
}

.player-seek-track::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--brand-blue) 0 var(--player-progress, 0%),
    rgba(255, 255, 255, 0.25) var(--player-progress, 0%) 100%
  );
}

.player-seek-track::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand-blue);
  appearance: none;
}

.player-seek-track::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.player-seek-track::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--brand-blue);
}

.player-seek-track::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand-blue);
}

.player-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.player-temporary-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.player-episode-pill {
  display: inline-flex;
  min-width: 0;
  max-width: calc(100% - 132px);
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 18, 31, 0.72);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.player-episode-pill img {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.player-episode-pill span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-next-compact {
  flex: 0 0 auto;
  display: inline-flex;
  width: 120px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, var(--brand-blue), var(--brand-violet));
  box-shadow: 0 12px 28px rgba(42, 90, 255, 0.28);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.player-next-compact img {
  width: 14px;
  height: 14px;
}

.player-ending-status {
  min-width: 0;
  margin-left: auto;
  text-align: right;
}

.player-ending-status strong,
.player-ending-status button {
  display: block;
}

.player-ending-status strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-ending-status button {
  margin: 4px 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  font-size: 9px;
}

.player-finished {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-left: auto;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 18, 31, 0.72);
  font-size: 12px;
  font-weight: 750;
}

.player-compatibility-error {
  z-index: 8;
}

.simple-page {
  width: min(calc(100% - 64px), var(--content-max));
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--header-height) + 48px) 0 120px;
}

.simple-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.simple-page-header h1 {
  margin: 0;
  font-size: 42px;
}

.simple-page-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.watchlist-page .content-section {
  margin-top: 34px;
}

.watchlist-page .empty-state {
  min-height: 220px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(7, 22, 41, 0.52);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.5fr);
  gap: 18px;
}

.profile-page-header {
  align-items: center;
}

.profile-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 1px solid rgba(85, 164, 255, 0.38);
  border-radius: 50%;
  background: #112948;
  color: #dbeaff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.account-session-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(85, 164, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 41, 72, 0.58);
  color: #bcd9ff;
  font-size: 12px;
  font-weight: 700;
}

.account-session-chip.is-registered {
  border-color: rgba(84, 206, 151, 0.34);
  background: rgba(20, 88, 62, 0.3);
  color: #8ce2b8;
}

.account-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: stretch;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.account-id-row {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-right: 24px;
  border-right: 1px solid var(--line-soft);
}

.account-id-row span,
.account-facts span {
  color: var(--muted);
  font-size: 12px;
}

.account-id-row strong {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.account-id-row small {
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-email-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(235, 178, 76, 0.34);
  border-radius: 999px;
  background: rgba(113, 76, 16, 0.22);
  color: #f1c56f !important;
  font-size: 11px !important;
  font-weight: 700;
}

.account-email-status.is-verified {
  border-color: rgba(84, 206, 151, 0.34);
  background: rgba(20, 88, 62, 0.24);
  color: #8ce2b8 !important;
}

.account-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--line-soft);
}

.account-facts > div {
  min-width: 0;
  padding: 16px 18px;
  background: #08172a;
}

.account-facts strong {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-facts strong.is-active {
  color: #75d6ad;
}

.account-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.account-controls > div:first-child {
  max-width: 620px;
}

.account-controls strong {
  font-size: 14px;
}

.account-controls p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.account-control-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.account-control-actions button {
  min-width: 112px;
}

.wallet-panel,
.settings-panel {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.wallet-panel {
  min-height: 270px;
  padding: 28px;
}

.wallet-panel > span {
  color: var(--muted);
}

.wallet-balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 30px;
}

.wallet-balance strong {
  font-size: 56px;
  font-variant-numeric: tabular-nums;
}

.wallet-balance span {
  color: var(--muted);
}

.settings-panel {
  overflow: hidden;
}

.setting-row {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row span {
  color: var(--muted);
  font-size: 12px;
}

.setting-row strong {
  display: block;
  margin-top: 5px;
}

.profile-orders {
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.profile-orders-header {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid var(--line-soft);
}

.profile-orders-header > div {
  min-width: 0;
}

.profile-orders-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.profile-orders-header p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.orders-refreshing {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.orders-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(23, 143, 255, 0.08);
  color: var(--muted-strong);
  font-size: 13px;
}

.orders-notice button {
  flex: 0 0 auto;
  min-height: 40px;
}

.orders-state {
  padding: 34px 24px;
  color: var(--muted);
  text-align: center;
}

.profile-orders-list {
  display: grid;
}

.profile-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: 18px 24px;
  border-top: 1px solid var(--line-soft);
}

.profile-order:first-child {
  border-top: 0;
}

.profile-order-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.profile-order-main strong,
.profile-order-main span,
.profile-order-main time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-order-main strong {
  font-size: 15px;
}

.profile-order-main span,
.profile-order-main time,
.profile-order-amount span {
  color: var(--muted);
  font-size: 12px;
}

.profile-order-amount {
  display: grid;
  min-width: 104px;
  gap: 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.profile-order-amount strong {
  font-size: 14px;
}

.profile-order-status {
  min-width: 74px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted-strong);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.profile-order-status.is-applied {
  background: rgba(23, 143, 255, 0.14);
  color: #8ac7ff;
}

.order-refund-button {
  min-width: 118px;
  min-height: 44px;
}

.profile-order-action-placeholder {
  width: 118px;
}

.refund-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.refund-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refund-summary strong {
  text-align: right;
}

.refund-summary b {
  grid-column: 1 / -1;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.empty-state,
.error-state {
  display: grid;
  min-height: 420px;
  place-items: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state > div,
.error-state > div {
  width: 100%;
  min-width: 0;
  max-width: 420px;
}

.state-symbol {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 24px;
}

.empty-state h2,
.error-state h2,
.empty-state p,
.error-state p {
  overflow-wrap: anywhere;
}

.empty-state h2,
.error-state h2 {
  margin: 0 0 8px;
}

.empty-state p,
.error-state p {
  margin: 0 0 22px;
  color: var(--muted);
}

.layer-root:empty {
  display: none;
}

.layer-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 6, 20, 0.76);
  backdrop-filter: blur(12px);
  animation: layer-fade 180ms ease both;
}

.layer-panel {
  width: min(100%, 520px);
  max-height: min(760px, calc(100dvh - 48px));
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #15181e;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.56);
  animation: layer-in 220ms ease both;
}

.layer-panel > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.layer-panel > header h2 {
  margin: 0;
  font-size: 24px;
}

.layer-panel > header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.layer-close {
  flex: 0 0 auto;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.layer-close img {
  width: 14px;
  height: 14px;
}

.layer-body {
  padding: 24px;
}

.account-auth-layer {
  width: min(100%, 500px);
}

.account-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0a1230;
}

.account-mode-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
}

.account-mode-tabs button.is-active {
  background: #1a2758;
  color: #fff;
}

.account-auth-form {
  display: grid;
  gap: 16px;
}

.account-auth-form label {
  display: grid;
  gap: 8px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.account-auth-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a1230;
  color: var(--text);
}

.account-auth-form input:focus {
  border-color: rgba(35, 141, 255, 0.72);
}

.account-password-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.account-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}

.account-auth-error {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(239, 120, 120, 0.34);
  border-radius: 6px;
  background: rgba(115, 30, 30, 0.22);
}

.account-auth-error.is-conflict {
  border-color: rgba(235, 178, 76, 0.38);
  background: rgba(113, 76, 16, 0.24);
}

.account-auth-error strong {
  font-size: 14px;
}

.account-auth-error p {
  margin: 6px 0 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
}

.account-auth-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(84, 206, 151, 0.34);
  border-radius: 6px;
  background: rgba(20, 88, 62, 0.24);
  color: #a7edca;
  font-size: 13px;
  line-height: 1.55;
}

.account-link-button,
.account-inline-action {
  width: fit-content;
  border: 0;
  background: transparent;
  color: #8ab8ff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-link-button {
  justify-self: end;
  margin-top: -4px;
}

.account-inline-action {
  margin-top: 12px;
  padding: 0;
}

.account-action-status {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0a1230;
  color: var(--muted-strong);
  text-align: center;
}

.account-action-status span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 999px;
  background: #1a2758;
  color: #8ab8ff;
  font-size: 24px;
  font-weight: 800;
}

.account-action-status.is-success {
  border-color: rgba(84, 206, 151, 0.28);
}

.account-action-status.is-success span {
  background: rgba(20, 88, 62, 0.38);
  color: #8ce2b8;
}

.account-secondary-action {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
}

.episode-drawer {
  width: min(100%, 760px);
  background: #0d1636;
}

.episode-drawer-header {
  align-items: center !important;
}

.episode-drawer-header > div {
  min-width: 0;
  margin-right: auto;
}

.episode-drawer-cover {
  flex: 0 0 auto;
  width: 54px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
}

.episode-range-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 18px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.episode-range-tabs::-webkit-scrollbar {
  display: none;
}

.episode-range-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-strong);
  cursor: pointer;
}

.episode-range-tab.is-active {
  border-color: rgba(35, 141, 255, 0.58);
  background: rgba(35, 141, 255, 0.16);
  color: #fff;
}

.episode-drawer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.balance-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.balance-line span {
  color: var(--muted);
}

.balance-line strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.layer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 10px;
  margin-top: 24px;
}

.layer-actions button {
  width: 100%;
}

.package-list,
.language-list {
  display: grid;
  gap: 8px;
}

.package-option,
.language-option {
  display: grid;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.package-option {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0 16px;
}

.language-option {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 0 16px;
}

.package-option.is-selected,
.language-option.is-selected {
  border-color: rgba(237, 30, 97, 0.76);
  background: rgba(237, 30, 97, 0.09);
}

.package-option span,
.language-option span {
  color: var(--muted);
  font-size: 12px;
}

.package-option strong,
.language-option strong {
  display: block;
  margin-bottom: 3px;
}

.package-option > strong {
  margin: 0;
  font-size: 17px;
}

.language-code {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 4px;
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.layer-message {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.65;
}

.web-toast {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #131e47;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  animation: toast-in 180ms ease both;
}

.mobile-nav {
  display: none;
}

@keyframes layer-fade {
  from { opacity: 0; }
}

@keyframes layer-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
}

@media (min-width: 1600px) {
  .hero-media,
  .hero-media picture {
    background: var(--canvas);
  }

  .hero-media img {
    object-fit: contain;
    object-position: right center;
  }
}

@media (max-width: 1180px) {
  .desktop-nav .nav-button:nth-child(4) {
    display: none;
  }

  .global-search {
    width: 210px;
  }

  .ranking-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  }

  .episode-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .ranking-item {
    grid-template-columns: 32px 72px minmax(0, 1fr);
    min-height: 112px;
    gap: 10px;
    padding: 10px 12px;
  }

  .ranking-item img {
    width: 72px;
    height: 88px;
  }

  .ranking-item-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ranking-compact-trend {
    display: inline;
  }

  .ranking-trend {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 64px;
  }

  .web-header {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0 20px;
  }

  .desktop-nav {
    display: none;
  }

  .header-tools {
    min-width: 0;
  }

  .global-search {
    width: min(38vw, 280px);
  }

  .web-hero {
    min-height: 590px;
  }

  .hero-content h1,
  .detail-content h1 {
    font-size: 50px;
  }

  .ranking-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ranking-feature {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .ranking-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(92px, auto));
    overflow: visible;
  }

  .continue-card {
    grid-template-columns: 190px minmax(0, 1fr) auto;
  }

  .detail-body,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .episode-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .player-site-header {
    display: none;
  }

  .player-page-heading,
  .player-below-actions,
  .player-description,
  .player-rail-recommendations {
    display: none;
  }

  .player-layout-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
  }

  .is-portrait-player .player-desktop-panel {
    display: none;
  }

  .is-portrait-player .player-canvas {
    min-height: 100dvh;
    padding: 0;
  }

  .is-portrait-player .player-screen {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    margin: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .is-portrait-player .local-upload-stage {
    min-height: 100dvh;
    aspect-ratio: auto;
  }

  .is-landscape-player .player-canvas {
    min-height: auto;
    padding: max(16px, env(safe-area-inset-top)) 0 0;
  }

  .is-landscape-player .player-screen {
    width: 100vw;
    max-width: none;
    height: auto;
    margin: 0;
    aspect-ratio: var(--player-media-width) / var(--player-media-height);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .is-landscape-player .player-desktop-panel {
    display: block;
    max-height: none;
    padding: 22px 18px 96px;
    border: 0;
    border-radius: 0;
    background: #0d1636;
    box-shadow: none;
  }

  .is-landscape-player .player-rail-summary,
  .is-landscape-player .player-panel-footer {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .is-landscape-player .player-panel-footer {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .player-layout {
    grid-template-columns: 1fr;
  }

  .player-side {
    max-height: none;
    min-height: 0;
  }

  .player-episodes {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-height: 270px;
  }

  .mobile-nav {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 68px;
    padding: 6px max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--line-soft);
    background: rgba(9, 10, 12, 0.95);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }

  .mobile-nav button.is-active {
    color: var(--accent-strong);
  }

  .mobile-nav img {
    width: 20px;
    height: 20px;
    opacity: 0.86;
  }

  .mobile-nav span {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .web-toast {
    bottom: 82px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 60px;
  }

  .web-header {
    grid-template-columns: auto minmax(74px, 1fr) auto;
    gap: 8px;
    padding: 0 14px;
  }

  .web-brand {
    width: 116px;
    min-width: 116px;
  }

  .header-tools {
    gap: 6px;
  }

  .global-search {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 10px;
  }

  .global-search input {
    font-size: 12px;
  }

  .language-trigger {
    display: none;
  }

  .wallet-trigger {
    min-width: 62px;
    padding: 0 10px;
  }

  .web-hero {
    height: 58dvh;
    min-height: 460px;
    max-height: 540px;
  }

  .hero-media img {
    object-position: var(--mobile-hero-focus, 68% center);
  }

  .detail-background img {
    object-position: center 18%;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, var(--canvas) 0%, rgba(6, 11, 36, 0.12) 64%, rgba(6, 11, 36, 0.48) 100%),
      linear-gradient(90deg, rgba(6, 11, 36, 0.58), transparent 74%);
  }

  .hero-content,
  .detail-content,
  .web-content,
  .detail-body,
  .player-page,
  .simple-page {
    width: calc(100% - 28px);
  }

  .hero-content {
    padding: 252px 0 26px;
  }

  .hero-content h1,
  .detail-content h1 {
    max-width: 94%;
    margin-top: 10px;
    font-size: 41px;
    line-height: 1.06;
  }

  .hero-description {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .hero-actions,
  .detail-actions {
    gap: 8px;
    margin-top: 20px;
  }

  .hero-actions .secondary-button[data-action="openDetail"] {
    display: none;
  }

  .hero-actions .secondary-button[data-action="toggleFavorite"] {
    width: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .hero-actions .secondary-button[data-action="toggleFavorite"] .button-icon {
    width: 18px;
    height: 18px;
  }

  .hero-meta span:nth-child(3) {
    display: none;
  }

  .primary-button,
  .secondary-button,
  .quiet-button {
    min-height: 43px;
    padding: 0 14px;
    font-size: 13px;
  }

  .hero-carousel-controls {
    width: min(270px, 82vw);
    margin-top: 24px;
  }

  .hero-progress {
    width: auto;
  }

  .hero-progress button {
    width: 36px;
  }

  .web-content {
    margin-top: 0;
    padding-bottom: 96px;
  }

  .home-after-hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-after-hero > .content-section {
    margin-top: 20px;
  }

  .home-after-hero #ranking-section {
    display: none;
  }

  .content-section {
    margin-top: 30px;
  }

  .section-heading {
    margin-bottom: 14px;
  }

  .section-heading h2 {
    font-size: 22px;
  }

  .section-heading p,
  .section-link {
    font-size: 11px;
  }

  .continue-card {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: 92px;
    min-height: 92px;
  }

  .continue-rail {
    display: block;
  }

  .continue-rail > :not(:first-child) {
    display: none;
  }

  .watchlist-page .continue-rail {
    display: grid;
    gap: 12px;
  }

  .watchlist-page .continue-rail > :not(:first-child) {
    display: grid;
  }

  .continue-cover {
    min-height: 92px;
  }

  .continue-copy {
    align-self: stretch;
    padding: 12px 14px 10px;
  }

  .continue-copy h3 {
    font-size: 17px;
  }

  .ranking-feature {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .ranking-feature-copy {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .ranking-feature-copy h3 {
    font-size: 22px;
  }

  .ranking-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .ranking-item {
    grid-template-columns: 30px 62px minmax(0, 1fr);
    min-height: 80px;
    padding: 8px 10px;
  }

  .ranking-item img {
    width: 62px;
    height: 64px;
  }

  .ranking-trend {
    display: none;
  }

  .poster-rail {
    grid-auto-columns: clamp(118px, 36vw, 154px);
    gap: 11px;
  }

  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 11px;
  }

  .poster-media {
    aspect-ratio: 2 / 3;
  }

  .poster-title {
    font-size: 14px;
  }

  .detail-hero {
    min-height: 550px;
  }

  .detail-overlay {
    background:
      linear-gradient(0deg, var(--canvas), rgba(8, 9, 11, 0.12) 70%),
      linear-gradient(90deg, rgba(8, 9, 11, 0.58), transparent);
  }

  .detail-content {
    padding: 74px 0 36px;
  }

  .detail-content .back-command {
    display: flex;
    width: max-content;
    margin-bottom: 176px;
  }

  .detail-description {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .detail-body {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 26px 0 96px;
  }

  .episode-section {
    order: -1;
  }

  .detail-actions .secondary-button[data-action="share"] {
    display: none;
  }

  .detail-actions .secondary-button[data-action="toggleFavorite"] {
    width: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .detail-actions .secondary-button[data-action="toggleFavorite"] .button-icon {
    width: 18px;
    height: 18px;
  }

  .detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .episode-toolbar {
    display: block;
  }

  .episode-legend {
    margin-top: 9px;
  }

  .episode-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-height: 330px;
  }

  .detail-episode-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }

  .detail-episode-preview .episode-button {
    aspect-ratio: auto;
    min-height: 58px;
  }

  .detail-episode-preview .episode-button:nth-child(n + 7) {
    display: none;
  }

  .detail-related {
    width: calc(100% - 28px);
    padding-bottom: 96px;
  }

  .episode-drawer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .player-page {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
  }

  .is-portrait-player .player-canvas {
    min-height: 100dvh;
    padding: 0;
  }

  .is-portrait-player .player-screen {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    margin: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .is-portrait-player .local-upload-stage {
    min-height: 100dvh;
    aspect-ratio: auto;
  }

  .player-persistent-top {
    min-height: 82px;
    padding: max(12px, env(safe-area-inset-top)) 14px 24px;
  }

  .player-top-command {
    width: 38px;
    height: 38px;
  }

  .player-wallet-compact {
    min-height: 36px;
    padding-inline: 9px;
  }

  .player-title-lockup strong {
    font-size: 13px;
  }

  .player-rail-actions {
    right: 8px;
    gap: 10px;
    transform: translateY(-34%);
  }

  .player-rail-command {
    width: 46px;
    min-height: 54px;
  }

  .player-temporary-chrome {
    padding: 116px 16px max(18px, env(safe-area-inset-bottom));
  }

  .player-temporary-copy strong {
    font-size: 20px;
  }

  .player-episode-pill {
    padding-inline: 12px;
  }

  .player-ending-status {
    max-width: 116px;
  }

  .player-compatibility-error strong {
    font-size: 18px;
  }

  .player-center-button {
    width: 62px;
    height: 62px;
  }

  .player-side {
    border-radius: 6px;
  }

  .player-episodes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .player-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .player-actions {
    margin-top: 6px;
  }

  .simple-page {
    padding-top: calc(var(--header-height) + 30px);
  }

  .simple-page-header h1 {
    font-size: 32px;
  }

  .profile-layout {
    gap: 12px;
  }

  .profile-page-header {
    align-items: flex-start;
  }

  .account-session-chip {
    min-height: 30px;
    padding: 0 10px;
  }

  .account-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .account-id-row {
    padding: 0 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .account-facts {
    grid-template-columns: 1fr;
  }

  .account-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
  }

  .account-facts strong {
    margin-top: 0;
    text-align: right;
  }

  .account-controls {
    display: grid;
    gap: 16px;
  }

  .account-control-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .account-control-actions button:only-child {
    grid-column: 1 / -1;
  }

  .wallet-panel {
    min-height: 230px;
    padding: 22px;
  }

  .wallet-balance strong {
    font-size: 48px;
  }

  .setting-row {
    min-height: 74px;
    padding: 0 18px;
  }

  .profile-orders-header,
  .profile-order {
    padding-right: 18px;
    padding-left: 18px;
  }

  .profile-orders-header {
    display: grid;
    gap: 10px;
  }

  .profile-order {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .profile-order-amount {
    min-width: 0;
    text-align: left;
  }

  .profile-order-status {
    width: max-content;
  }

  .order-refund-button {
    width: 100%;
    min-height: 44px;
  }

  .profile-order-action-placeholder {
    display: none;
  }

  .layer-backdrop {
    align-items: end;
    padding: 0;
  }

  .layer-panel {
    width: 100%;
    max-height: calc(100dvh - 64px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 10px 10px 0 0;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .layer-panel > header,
  .layer-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .layer-actions {
    grid-template-columns: 1fr;
  }

  .web-toast {
    right: 16px;
    bottom: 80px;
    left: 16px;
    max-width: none;
    text-align: center;
  }
}

/* 2026-11（Claude）：用户定的规矩——系统里关了“动画效果”（Windows 常见），网页动效也照常播放；
   想停的人按首屏 / 详情页右下角的暂停按钮，整站动效一起停（.web-app.is-motion-paused）。
   这里只保留“页面内跳转不做平滑滚动”。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* 2026-07-21 approved-reference fidelity pass */
:root {
  --header-height: 88px;
  --content-max: 1400px;
}

.avatar-trigger {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.avatar-trigger span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #112948;
  color: #dbeaff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.web-hero {
  height: clamp(480px, 49.8dvh, 530px);
  min-height: 480px;
  max-height: 530px;
}

.hero-content {
  padding: 152px 0 34px;
}

.hero-content h1 {
  margin: 15px 0 12px;
  font-size: 60px;
  letter-spacing: -0.035em;
}

.hero-actions .primary-button {
  min-width: 232px;
}

.hero-actions .secondary-button[data-action="openDetail"] {
  min-width: 150px;
}

.hero-actions .secondary-button[data-action="toggleFavorite"] {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

.hero-carousel-controls {
  margin-top: 26px;
  margin-left: 126px;
}

.home-after-hero {
  gap: 38px;
}

.home-after-hero > .content-section {
  margin-top: 20px;
}

.content-section {
  margin-top: 32px;
}

.section-heading {
  margin-bottom: 15px;
}

.section-heading h2 {
  font-size: 22px;
}

.continue-rail.has-1 {
  grid-template-columns: 1fr;
}

.continue-rail.has-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.continue-rail.has-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.continue-rail.has-1 .continue-card {
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
  grid-template-rows: 164px;
  min-height: 164px;
}

.continue-rail.has-1 .continue-cover {
  min-height: 164px;
}

.continue-rail.has-1 .continue-copy {
  align-self: center;
  padding: 20px 24px;
}

.continue-rail.has-1 .continue-copy h3 {
  font-size: 19px;
}

.weekly-ranking-item {
  grid-template-columns: 40px 72px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 56px;
  padding: 8px 2px;
}

.weekly-ranking-item > img {
  width: 72px;
  height: 40px;
}

.weekly-ranking-item h3 {
  margin-bottom: 4px;
  font-size: 14px;
}

#for-you {
  margin-top: 26px;
}

#for-you .poster-rail {
  grid-auto-columns: clamp(188px, 14.1vw, 218px);
  gap: 18px;
}

#for-you .poster-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

#for-you .poster-media {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

#for-you .poster-badge,
#for-you .poster-views {
  display: none;
}

#for-you .poster-copy {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 88px;
  align-content: end;
  padding: 34px 13px 13px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(0deg, rgba(2, 7, 15, 0.96), rgba(2, 7, 15, 0));
}

#for-you .poster-title {
  font-size: 16px;
}

@media (min-width: 961px) {
  .player-layout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 411px);
    align-items: start;
    gap: clamp(28px, 1.65vw, 32px);
    padding: 24px 0 64px;
  }

  .is-portrait-player .player-layout-shell {
    width: min(calc(100% - 48px), 1800px);
    grid-template-columns: minmax(0, 1fr) minmax(390px, 411px);
    gap: clamp(28px, 1.65vw, 32px);
  }

  .is-landscape-player .player-layout-shell {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 411px);
  }

  .is-portrait-player .player-screen {
    width: 100%;
    height: min(84dvh, 920px);
    margin: 0;
    aspect-ratio: auto;
  }

  .is-portrait-player .player-media-frame {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: auto;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
    transform: translateX(-50%);
  }

  .is-landscape-player .player-screen {
    width: 100%;
    max-height: none;
    margin: 0;
  }

  .player-panel-actions {
    display: none;
  }

  .web-header {
    grid-template-columns: auto minmax(360px, 1fr) auto;
    min-height: 88px;
    padding: 0 48px;
    background: linear-gradient(180deg, rgba(2, 8, 18, 0.98), rgba(2, 8, 18, 0.7));
  }

  .web-brand {
    width: 145px;
    min-width: 145px;
  }

  .desktop-nav {
    gap: 17px;
    margin-left: 64px;
  }

  .nav-button {
    padding-inline: 10px;
    font-size: 15px;
    font-weight: 600;
  }

  .nav-button::after {
    right: 10px;
    left: 10px;
  }

  .header-tools {
    gap: 18px;
  }

  .global-search {
    width: min(25vw, 320px);
    height: 44px;
    padding-inline: 17px;
  }

  .language-trigger {
    width: 44px;
    padding: 0;
  }

  .language-trigger span {
    display: none;
  }

  .wallet-trigger {
    min-width: 132px;
    min-height: 44px;
    padding-inline: 16px;
  }

  .wallet-trigger .fct-label {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    background: #f4ad34;
    color: white;
    font-size: 7px;
  }

  .hero-media img {
    object-position: var(--hero-focus, right top);
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(6, 11, 36, 0.88) 0%, rgba(6, 11, 36, 0.68) 31%, rgba(6, 11, 36, 0.16) 70%, rgba(6, 11, 36, 0.3) 100%),
      linear-gradient(0deg, var(--canvas) 0%, rgba(6, 11, 36, 0) 38%, rgba(6, 11, 36, 0.38) 100%);
  }

  #for-you .poster-rail {
    overflow-x: clip;
    overscroll-behavior-inline: none;
    scroll-snap-type: none;
  }

  #for-you .poster-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 60px;
  }

  .web-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 60px;
    padding: 0 14px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(6, 11, 36, 0.98), rgba(6, 11, 36, 0.74));
  }

  .web-brand {
    width: 118px;
    min-width: 118px;
  }

  .header-tools {
    gap: 8px;
  }

  .global-search {
    width: min(34vw, 132px);
    height: 40px;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 0 10px;
    border-color: rgba(255, 255, 255, 0.14);
  }

  .global-search input {
    font-size: 11px;
  }

  .wallet-trigger {
    min-width: 70px;
    min-height: 40px;
    padding: 0 10px;
  }

  .wallet-trigger .fct-label {
    font-size: 8px;
  }

  .avatar-trigger {
    display: none;
  }

  .web-hero {
    height: 455px;
    min-height: 455px;
    max-height: 455px;
  }

  .hero-media img {
    object-position: var(--mobile-hero-focus, center top);
    filter: saturate(0.9) contrast(1.02) brightness(0.9);
  }

  .hero-shade {
    background:
      linear-gradient(0deg, var(--canvas) 0%, rgba(6, 11, 36, 0.16) 52%, rgba(6, 11, 36, 0.46) 100%),
      linear-gradient(90deg, rgba(6, 11, 36, 0.34), transparent 78%);
  }

  .weekly-ranking-item {
    grid-template-columns: 32px 68px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .weekly-ranking-item > img {
    width: 68px;
    height: 38px;
  }

  .weekly-ranking-views {
    font-size: 10px;
  }

  .hero-content {
    position: absolute;
    inset: 0;
    width: calc(100% - 44px);
    padding: 258px 0 0;
  }

  .hero-kicker {
    padding: 5px 8px;
    font-size: 10px;
  }

  .hero-content h1 {
    max-width: 100%;
    margin: 9px 0 7px;
    font-size: 36px;
    letter-spacing: -0.04em;
  }

  .hero-meta {
    gap: 7px;
    font-size: 12px;
  }

  .hero-description {
    margin-top: 9px;
    font-size: 12px;
  }

  .hero-actions {
    flex-wrap: nowrap;
    margin-top: 14px;
  }

  .hero-actions .primary-button {
    min-width: 0;
    flex: 1;
    min-height: 46px;
    border-radius: 13px;
    font-size: 16px;
  }

  .hero-actions .secondary-button[data-action="toggleFavorite"] {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  .hero-carousel-controls {
    width: 190px;
    margin: 12px auto 0;
  }

  .hero-progress {
    gap: 5px;
  }

  .hero-progress button {
    width: 28px;
  }

  .hero-playback-toggle {
    display: none;
  }

  .web-content {
    width: calc(100% - 32px);
    padding-bottom: 92px;
  }

  .home-after-hero > .content-section {
    margin-top: 16px;
  }

  .section-heading {
    margin-bottom: 11px;
  }

  .section-heading h2 {
    font-size: 20px;
  }

  .continue-rail.has-1 .continue-card,
  .continue-rail.has-2 .continue-card,
  .continue-rail.has-3 .continue-card {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: 76px;
    min-height: 76px;
  }

  .continue-rail.has-1 .continue-cover,
  .continue-rail.has-2 .continue-cover,
  .continue-rail.has-3 .continue-cover {
    min-height: 76px;
  }

  .continue-rail.has-1 .continue-copy,
  .continue-rail.has-2 .continue-copy,
  .continue-rail.has-3 .continue-copy {
    align-self: stretch;
    padding: 10px 12px 8px;
  }

  .continue-rail.has-1 .continue-copy h3,
  .continue-copy h3 {
    font-size: 15px;
  }

  .continue-copy p {
    font-size: 10px;
  }

  .continue-progress {
    margin-top: 7px;
  }

  .continue-copy small {
    margin-top: 4px;
    font-size: 9px;
  }

  #for-you {
    margin-top: 18px;
  }

  #for-you .poster-rail {
    grid-auto-columns: 31.8vw;
    gap: 9px;
    margin-right: -16px;
    padding-bottom: 6px;
  }

  #for-you .poster-media {
    border-radius: 10px;
  }

  #for-you .poster-copy {
    min-height: 64px;
    gap: 2px;
    padding: 26px 9px 9px;
  }

  #for-you .poster-title {
    font-size: 13px;
    -webkit-line-clamp: 1;
  }

  #for-you .poster-meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
  }

  .mobile-nav {
    min-height: 70px;
    padding-top: 7px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(4, 12, 25, 0.98);
  }

  .mobile-nav img {
    width: 24px;
    height: 24px;
  }

  .mobile-nav span {
    font-size: 11px;
    font-weight: 600;
  }

  .mobile-nav button.is-active {
    color: var(--brand-blue);
  }

  .player-demo-label {
    display: none;
  }

  .player-media-root > img {
    height: 104%;
    object-position: center top;
    filter: brightness(0.92) saturate(0.94);
    transform: translateY(-3%);
  }

  .player-persistent-top {
    position: relative;
    min-height: 126px;
    padding: max(18px, env(safe-area-inset-top)) 20px 34px;
    background: linear-gradient(180deg, rgba(1, 5, 11, 0.72), transparent);
  }

  .player-title-lockup {
    position: absolute;
    top: max(25px, env(safe-area-inset-top));
    left: 50%;
    width: min(62vw, 240px);
    transform: translateX(-50%);
    text-align: center;
  }

  .player-title-lockup strong {
    font-size: 15px;
    font-weight: 500;
  }

  .player-title-lockup span {
    display: none;
  }

  .player-top-command {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .player-top-command img {
    width: 22px;
    height: 22px;
  }

  .player-back-command img {
    width: 28px;
    height: 28px;
  }

  .player-top-tools {
    justify-self: end;
  }

  .player-wallet-compact {
    position: absolute;
    top: max(66px, calc(env(safe-area-inset-top) + 50px));
    right: 20px;
    min-height: 34px;
    padding-inline: 12px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(12, 20, 32, 0.66);
  }

  .player-wallet-compact span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #f4ad34;
    color: white;
    font-size: 6px;
  }

  .player-wallet-compact strong {
    font-size: 15px;
    font-weight: 600;
  }

  .player-rail-actions {
    top: 60%;
    right: 15px;
    gap: 4px;
    transform: translateY(-25%);
  }

  .player-rail-command {
    width: 54px;
    min-height: 66px;
    gap: 5px;
    padding: 0;
  }

  .player-rail-command img {
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    filter: brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0, 0, 0, 0.72));
  }

  .player-rail-command span {
    max-width: 54px;
    font-size: 12px;
    font-weight: 500;
  }

  .player-temporary-chrome {
    padding: 100px 22px max(34px, env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(1, 5, 11, 0.98) 0%, rgba(1, 5, 11, 0.68) 45%, transparent 100%);
  }

  .player-temporary-copy strong {
    padding-right: 58px;
    font-size: 26px;
    letter-spacing: -0.04em;
  }

  .player-temporary-copy span {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
  }

  .player-temporary-copy p {
    margin: 7px 0 18px;
    font-size: 12px;
  }

  .player-progress-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .player-seek-track {
    height: 18px;
  }

  .player-temporary-row {
    margin-top: 16px;
  }

  .player-episode-pill {
    min-height: 50px;
    max-width: calc(100% - 118px);
    padding-inline: 18px;
  }

  .player-episode-pill img {
    display: none;
  }

  .player-episode-pill span {
    font-size: 13px;
    font-weight: 500;
  }

  .player-next-compact {
    width: 108px;
    min-height: 50px;
    border-radius: 14px;
    font-size: 15px;
  }

  .player-next-compact img {
    display: none;
  }

  .is-landscape-player .player-temporary-chrome {
    display: none;
  }

  .is-landscape-player .player-rail-actions {
    display: none;
  }
}

.player-screen:fullscreen,
.player-screen:-webkit-full-screen {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.player-screen:fullscreen .player-media-root > video,
.player-screen:-webkit-full-screen .player-media-root > video {
  object-fit: contain;
}

/* Formal player controls: cinematic content first, compact interface second. */
.player-screen {
  box-shadow: none;
  container-type: inline-size;
  container-name: player-screen;
}

.player-media-root video,
.player-media-root .xgplayer,
.player-media-root .xgplayer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.player-media-root .xgplayer {
  position: absolute;
  inset: 0;
  display: block;
}

.player-media-root.xgplayer.xgplayer-inactive {
  cursor: default;
}

.player-episode-entry--top {
  display: none;
}

.player-temporary-chrome {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(14px, 2vw, 24px);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%);
  transition: opacity 160ms ease;
}

.player-temporary-chrome.is-hidden {
  transform: none;
}

.player-progress-row {
  display: block;
  width: 100%;
}

.player-control-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.player-control-group {
  display: flex;
  min-width: 0;
  align-items: center;
}

.player-control-left {
  flex: 1 1 auto;
}

.player-control-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.player-control-row button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.player-control-row button:hover,
.player-control-row button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.player-control-row button:focus-visible,
.player-seek-track:focus-visible,
[data-player-volume]:focus-visible {
  outline: 2px solid #1997ff;
  outline-offset: 2px;
}

.player-control-row button:disabled,
.player-control-row button[hidden],
.player-control-row input:disabled,
.player-control-row input[hidden] {
  opacity: 0.36;
  cursor: default;
}

.player-control-row button img {
  width: 16px;
  height: 16px;
  opacity: 0.72;
  filter: brightness(0) invert(1);
}

.player-control-row button:hover img,
.player-control-row button:focus-visible img {
  opacity: 1;
}

.player-time {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
}

[data-player-volume] {
  width: 76px;
  height: 36px;
  margin: 0 2px;
  accent-color: var(--brand-blue);
  cursor: pointer;
}

.player-menu-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.player-control-row .player-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  min-width: 128px;
  align-items: stretch;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(3, 7, 12, 0.94);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(12px);
  transition: opacity 160ms ease;
}

.player-control-row .player-popover[hidden] {
  display: none;
}

.player-popover button {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  text-align: left;
}

.player-popover button[aria-pressed="true"] {
  color: #fff;
}

[data-player-settings-empty] {
  display: block;
  padding: 8px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  white-space: nowrap;
}

.player-control-row .player-next-compact {
  width: 120px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(3, 7, 12, 0.24);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
}

.player-control-row .player-next-compact:hover,
.player-control-row .player-next-compact:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.player-top-command,
.player-wallet-compact,
.player-episode-pill,
.player-next-compact,
.player-finished {
  box-shadow: none;
}

.player-rail-command {
  text-shadow: none;
}

.player-rail-command img {
  filter: brightness(0) invert(1);
}

.player-action-feedback {
  position: absolute;
  z-index: 7;
  left: 50%;
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 48px);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms ease;
}

.player-action-feedback.is-exiting {
  opacity: 0;
}

.player-action-feedback[hidden] {
  display: none;
}

.player-action-feedback[data-feedback-type="rate-hold"] {
  top: max(18px, env(safe-area-inset-top));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 7, 12, 0.78);
  color: #fff;
}

.player-action-feedback[data-feedback-type="volume"] {
  top: 50%;
  min-width: 100px;
  min-height: 48px;
  transform: translate(-50%, -50%);
  border: 0;
  background: rgba(248, 250, 252, 0.86);
  color: #05070c;
  font-size: 18px;
  font-weight: 650;
}

.player-action-feedback[data-feedback-type="text"] {
  top: 44%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 7, 12, 0.86);
  color: #fff;
}

.player-feedback-rate-symbol,
.player-feedback-volume-symbol {
  display: none;
}

.player-action-feedback[data-feedback-type="rate-hold"] .player-feedback-rate-symbol {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.player-feedback-forward {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  opacity: 0.45;
  animation: player-feedback-forward 900ms ease-in-out infinite;
}

.player-feedback-forward:nth-child(2) {
  animation-delay: -600ms;
}

.player-feedback-forward:nth-child(3) {
  animation-delay: -300ms;
}

.player-action-feedback[data-feedback-type="volume"] .player-feedback-volume-symbol {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0);
}

.player-feedback-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

@keyframes player-feedback-forward {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(-1px);
  }

  50% {
    opacity: 1;
    transform: translateX(1px);
  }
}

@media (pointer: coarse), (max-width: 720px) {
  .player-temporary-chrome {
    padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .player-control-row {
    gap: 4px;
  }

  .player-control-row button {
    min-width: 44px;
    min-height: 44px;
  }

  [data-player-volume],
  .player-time [data-player-duration],
  .player-time [aria-hidden="true"],
  .player-control-row [data-player-settings],
  .player-control-row .player-menu-anchor:has(> [data-player-settings]) {
    display: none;
  }

  .player-control-row .player-next-compact {
    width: auto;
    min-width: 44px;
    padding-inline: 10px;
  }
}

@container player-screen (max-width: 520px) {
  .player-control-row {
    gap: 0;
  }

  .player-control-row .player-control-group {
    gap: 0;
  }

  .player-control-row .player-control-left {
    flex: 0 0 auto;
  }

  .player-control-row .player-control-right {
    min-width: 0;
    flex: 0 1 auto;
  }

  .player-control-row button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 6px;
  }

  [data-player-volume],
  .player-time {
    display: none;
  }

  .player-control-row .player-menu-anchor:has(> [data-player-settings]) {
    display: none;
  }

  .player-control-row .player-next-compact {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .player-control-row .player-next-compact span {
    display: none;
  }

  .player-control-row .player-next-compact img {
    display: block;
  }
}

@media (min-width: 961px) {
  .player-episode-entry--rail {
    display: none;
  }
}

@media (max-width: 960px) {
  .player-panel-episode-entry {
    display: none;
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  .is-landscape-player .player-episode-entry--top {
    display: grid;
  }

  .is-landscape-player .player-episode-entry--rail {
    display: none;
  }
}

@media (max-width: 640px) {
  .is-landscape-player .player-temporary-chrome {
    display: block;
  }

  .is-landscape-player .player-rail-actions {
    display: none;
  }
}

.player-screen:fullscreen .player-episode-entry--top,
.player-screen:-webkit-full-screen .player-episode-entry--top {
  display: grid;
}

.player-screen:fullscreen .player-episode-entry--rail,
.player-screen:-webkit-full-screen .player-episode-entry--rail {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .player-temporary-chrome,
  .player-action-feedback,
  .player-popover {
    transition-duration: 1ms !important;
  }

  .player-feedback-forward {
    animation: none !important;
    transform: none !important;
  }
}

/* Approved home B composition: large covers first, dense enough to browse. */
.home-b-page {
  min-height: 100dvh;
  padding-top: var(--header-height);
}

.home-featured-stage,
.home-b-content {
  width: min(calc(100% - 96px), 1760px);
  margin-inline: auto;
}

.home-featured-stage {
  margin-top: 28px;
}

.home-featured-heading,
.home-module-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.home-featured-heading h1,
.home-module-heading h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.home-featured-heading p,
.home-module-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.home-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 20px;
  height: clamp(500px, 34vw, 590px);
}

.home-featured-primary {
  height: auto;
  min-height: 0;
  max-height: none;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.3);
}

.home-featured-primary .hero-media img {
  filter: saturate(0.9) contrast(1.04);
}

.home-featured-primary .hero-shade {
  background:
    linear-gradient(90deg, rgba(6, 11, 36, 0.92) 0%, rgba(6, 11, 36, 0.62) 46%, rgba(6, 11, 36, 0.08) 78%),
    linear-gradient(0deg, rgba(6, 11, 36, 0.9) 0%, transparent 50%);
}

.home-featured-primary .hero-content {
  width: auto;
  margin: 0;
  padding: clamp(26px, 3vw, 48px);
}

.home-featured-primary .hero-content h1 {
  max-width: 620px;
  margin: 12px 0 10px;
  font-size: 52px;
}

.home-featured-primary .hero-description {
  display: -webkit-box;
  max-width: 540px;
  margin-top: 14px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-featured-primary .hero-actions {
  margin-top: 20px;
}

.home-featured-primary .hero-actions .primary-button {
  min-width: 176px;
}

.home-featured-primary .hero-carousel-controls {
  width: min(350px, 62%);
  margin: 20px 0 0;
}

.home-featured-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
}

.home-featured-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(13, 22, 54, 0.88);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.home-featured-card:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 143, 255, 0.5);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.home-featured-card-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #060b24;
}

.home-featured-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease, filter 260ms ease;
}

.home-featured-card:hover .home-featured-card-media img {
  filter: brightness(1.06);
  transform: scale(1.025);
}

.home-featured-card-media > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(6, 11, 36, 0.74);
  color: white;
  font-size: 11px;
  font-weight: 720;
  backdrop-filter: blur(8px);
}

.home-featured-card-copy {
  display: grid;
  gap: 5px;
  padding: 13px 14px 14px;
}

.home-featured-card-copy strong {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-featured-card-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-b-content {
  padding-bottom: 120px;
}

.home-cover-section {
  padding-top: 42px;
  border-top: 1px solid var(--line-soft);
}

.home-cover-section:first-child {
  border-top: 0;
}

.home-module-heading .section-link {
  min-height: 36px;
  padding: 0 4px;
  color: var(--muted-strong);
}

.home-continue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 24px;
}

.home-continue-card,
.home-ranking-card {
  min-width: 0;
  cursor: pointer;
}

.home-continue-card {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(13, 22, 54, 0.76);
  transition: border-color 180ms ease, transform 180ms ease;
}

.home-continue-card:hover,
.home-ranking-card:hover,
.home-recommendation-card:hover {
  transform: translateY(-3px);
}

.home-continue-card:hover {
  border-color: rgba(23, 143, 255, 0.5);
}

.home-cover-frame {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(19, 152, 255, 0.1), rgba(118, 44, 255, 0.06)),
    #060b24;
}

.home-cover-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-continue-card .home-cover-frame {
  border-radius: 9px 0 0 9px;
}

.home-continue-status {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 10px 10px;
  background: linear-gradient(0deg, rgba(6, 11, 36, 0.92), transparent);
  color: white;
  font-size: 11px;
}

.home-poster-progress {
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}

.home-poster-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-blue);
}

.home-cover-copy {
  min-width: 0;
  padding-top: 11px;
}

.home-continue-card .home-cover-copy {
  display: grid;
  align-content: center;
  padding: 18px;
}

.home-cover-copy h3,
.home-cover-copy strong {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-cover-copy p,
.home-cover-copy small {
  display: block;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-continue-card .home-cover-copy > span {
  margin-top: 18px;
  color: #73c4ff;
  font-size: 13px;
  font-weight: 720;
}

.home-ranking-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.home-ranking-card {
  transition: transform 180ms ease;
}

.home-ranking-card .home-cover-frame,
.home-recommendation-card .home-cover-frame {
  border: 1px solid var(--line-soft);
}

.home-rank-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(6, 11, 36, 0.8);
  color: #fff;
  font-size: 15px;
  font-style: italic;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.home-ranking-card:nth-child(1) .home-rank-badge {
  border-color: rgba(255, 209, 92, 0.7);
  background: linear-gradient(145deg, #f3c45b, #9b5a09);
}

.home-ranking-card:nth-child(2) .home-rank-badge {
  background: linear-gradient(145deg, #d9e1eb, #6e7885);
}

.home-ranking-card:nth-child(3) .home-rank-badge {
  background: linear-gradient(145deg, #d99155, #76411e);
}

.home-recommendation-heading-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-recommendation-status {
  color: var(--muted);
  font-size: 12px;
}

.home-recommendation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;
  gap: 18px;
}

.home-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 22px;
}

.home-recommendation-card {
  display: grid;
  grid-template-rows: auto minmax(60px, auto);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease;
}

.home-recommendation-refresh {
  border: 1px solid var(--line);
  background: rgba(13, 22, 54, 0.78);
  color: var(--muted-strong);
  cursor: pointer;
  font-weight: 720;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.home-recommendation-refresh:hover {
  border-color: rgba(23, 143, 255, 0.64);
  background: var(--surface-strong);
  color: white;
}

.home-recommendation-refresh:disabled {
  cursor: wait;
  opacity: 0.58;
}

.home-recommendation-refresh-rail {
  display: grid;
  min-width: 52px;
  place-content: center;
  gap: 10px;
  padding: 18px 8px;
  border-radius: 8px;
}

.home-recommendation-refresh-rail span {
  font-size: 22px;
}

.home-recommendation-refresh-rail b {
  writing-mode: vertical-rl;
  letter-spacing: 0.22em;
}

.home-recommendation-refresh-compact {
  display: none;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 7px;
}

.home-library-section .poster-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .home-featured-stage,
  .home-b-content {
    width: min(calc(100% - 64px), 1180px);
  }

  .home-featured-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .home-featured-primary {
    aspect-ratio: 16 / 8.5;
  }

  .home-featured-secondary-grid {
    grid-template-rows: repeat(2, 230px);
  }

  .home-recommendation-layout {
    display: block;
  }

  .home-recommendation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-recommendation-refresh-rail {
    display: none;
  }

  .home-recommendation-refresh-compact {
    display: inline-flex;
  }

  .home-library-section .poster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .home-featured-secondary-grid {
    grid-template-rows: repeat(2, 190px);
    gap: 14px;
  }

  .home-ranking-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: inline proximity;
  }

  .home-ranking-card {
    scroll-snap-align: start;
  }

  .home-recommendation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-library-section .poster-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-b-page {
    padding-top: 64px;
  }

  .home-featured-stage,
  .home-b-content {
    width: calc(100% - 32px);
  }

  .home-featured-stage {
    margin-top: 20px;
  }

  .home-featured-heading,
  .home-module-heading {
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
  }

  .home-featured-heading h1,
  .home-module-heading h2 {
    font-size: 22px;
  }

  .home-featured-heading p,
  .home-module-heading p {
    margin-top: 4px;
    font-size: 11px;
  }

  .home-featured-primary {
    aspect-ratio: 4 / 3;
    border-radius: 9px;
  }

  .home-featured-primary .hero-media img {
    object-position: var(--mobile-hero-focus, center top);
  }

  .home-featured-primary .hero-content {
    padding: 20px;
  }

  .home-featured-primary .hero-content h1 {
    margin: 9px 0 7px;
    font-size: 36px;
  }

  .home-featured-primary .hero-description,
  .home-featured-primary .hero-meta span:nth-child(3) {
    display: none;
  }

  .home-featured-primary .hero-actions {
    margin-top: 14px;
  }

  .home-featured-primary .hero-actions .primary-button {
    min-width: 138px;
  }

  .home-featured-primary .hero-carousel-controls {
    width: 190px;
    margin: 12px 0 0;
  }

  .home-featured-secondary-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-featured-card {
    min-height: 176px;
  }

  .home-featured-card-media {
    aspect-ratio: 16 / 10;
  }

  .home-featured-card-copy {
    padding: 10px;
  }

  .home-featured-card-copy strong {
    font-size: 14px;
  }

  .home-featured-card-copy small {
    font-size: 10px;
  }

  .home-b-content {
    padding-bottom: 92px;
  }

  .home-cover-section {
    margin-top: 34px;
    padding-top: 30px;
  }

  .home-continue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-continue-card {
    display: block;
    border: 0;
    background: transparent;
  }

  .home-continue-card .home-cover-frame {
    border-radius: 8px;
  }

  .home-continue-card .home-cover-copy {
    display: block;
    padding: 10px 2px 0;
  }

  .home-continue-card .home-cover-copy > span {
    display: none;
  }

  .home-cover-copy h3,
  .home-cover-copy strong {
    font-size: 14px;
  }

  .home-cover-copy p,
  .home-cover-copy small {
    margin-top: 5px;
    font-size: 10px;
  }

  .home-ranking-grid {
    grid-auto-columns: 45%;
    grid-auto-flow: column;
    grid-template-columns: none;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .home-ranking-grid::-webkit-scrollbar {
    display: none;
  }

  .home-rank-badge {
    top: 9px;
    left: 9px;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .home-recommendation-status {
    display: none;
  }

  .home-recommendation-refresh-compact {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .home-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
  }

  .home-library-section .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .home-featured-secondary-grid {
    grid-template-columns: 1fr;
  }

  .home-featured-card {
    grid-template-columns: 46% minmax(0, 1fr);
    grid-template-rows: 118px;
    min-height: 118px;
  }

  .home-featured-card-media {
    aspect-ratio: auto;
  }

  .home-featured-card-copy {
    align-content: center;
  }
}

/* 2026-07-28 database-backed watch history reminder */
.header-history {
  position: relative;
  display: grid;
  place-items: center;
}

.history-trigger {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(10, 18, 48, 0.76);
  color: var(--muted-strong);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.history-trigger:hover,
.history-trigger[aria-expanded="true"] {
  border-color: rgba(23, 143, 255, 0.62);
  background: var(--surface-strong);
}

.history-trigger:active {
  transform: translateY(1px) scale(0.98);
}

.history-trigger img {
  width: 19px;
  height: 19px;
  opacity: 0.88;
}

.history-trigger-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 7px;
  height: 7px;
  border: 2px solid #071425;
  border-radius: 50%;
  background: var(--brand-blue);
  box-sizing: content-box;
}

.history-trigger.has-history .history-trigger-dot {
  display: block;
}

.watch-history-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 13px);
  right: 0;
  width: min(390px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(124, 164, 214, 0.28);
  border-radius: 14px;
  background: rgba(10, 18, 48, 0.98);
  color: var(--text);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px);
}

.watch-history-popover[hidden] {
  display: none;
}

.watch-history-popover::before {
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(124, 164, 214, 0.28);
  border-left: 1px solid rgba(124, 164, 214, 0.28);
  background: rgba(10, 18, 48, 0.98);
  content: "";
}

.watch-history-popover-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: inherit;
  text-align: left;
}

.settings-panel button.setting-row {
  cursor: pointer;
  transition: background 180ms ease;
}

.settings-panel button.setting-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

.watch-history-popover-header > strong {
  font-size: 14px;
  letter-spacing: 0.01em;
}

.watch-history-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.watch-history-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.watch-history-close img {
  width: 14px;
  height: 14px;
  filter: invert(1);
  opacity: 0.72;
}

.watch-history-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.watch-history-cover {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  aspect-ratio: 16 / 10;
  background: #060b24;
  cursor: pointer;
}

.watch-history-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-history-cover > span {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(6, 11, 36, 0.72);
}

.watch-history-cover > span img {
  width: 11px;
  height: 11px;
  filter: invert(1);
}

.watch-history-copy {
  display: grid;
  min-width: 0;
  align-content: center;
}

.watch-history-copy > strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-history-copy > span,
.watch-history-copy > small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.watch-history-progress {
  height: 3px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.watch-history-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-violet));
}

.watch-history-continue {
  min-height: 32px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid rgba(23, 143, 255, 0.42);
  border-radius: 7px;
  background: rgba(23, 143, 255, 0.13);
  color: #8ed2ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.watch-history-continue:hover {
  background: rgba(23, 143, 255, 0.22);
  color: white;
}

.watch-history-more {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.watch-history-more:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

@media (max-width: 640px) {
  .wallet-trigger {
    display: none;
  }

  .history-trigger {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .watch-history-popover {
    position: fixed;
    top: 68px;
    right: 14px;
    width: min(370px, calc(100vw - 28px));
    border-radius: 12px;
  }

  .watch-history-popover::before {
    display: none;
  }
}

@media (max-width: 390px) {
  .watch-history-card {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .watch-history-copy > strong {
    font-size: 14px;
  }
}

/* ==========================================================================
   2026-10 FCAIShort 品牌重设计（Claude）
   颜色全部取自公司元素包：FCAIShort 标识的蓝→紫播放符号与珊瑚橙圆点、
   FCAI 字标的深海蓝。热门 / 排行 / 价格这类“热”信息统一用珊瑚橙，
   替换原先的玫红；进度条统一用品牌光谱。只改视觉，不改布局逻辑与交互。
   ========================================================================== */
:root {
  --coral: #f07848;
  --coral-soft: rgba(240, 120, 72, 0.16);
  --coral-ink: #ff9a70;
  --spectrum: linear-gradient(90deg, #2478e4 0%, #00b4f0 34%, #6c2cf0 72%, #f07848 100%);
  --brand-gradient: linear-gradient(120deg, #2a84f0 0%, #5a46f0 55%, #7a2ef0 100%);
  --glass: rgba(6, 11, 36, 0.62);
  --radius-poster: 12px;
  --radius-panel: 16px;
}

body {
  background:
    radial-gradient(ellipse 60rem 32rem at 82% -4%, rgba(42, 132, 240, 0.16), transparent 70%),
    radial-gradient(ellipse 50rem 30rem at -6% 38%, rgba(108, 44, 240, 0.1), transparent 70%),
    var(--canvas);
}

/* ---------- 页头 ---------- */
.web-header {
  background: linear-gradient(180deg, rgba(6, 11, 36, 0.94), rgba(6, 11, 36, 0.6));
}

.web-header.is-solid {
  border-color: transparent;
  background: rgba(6, 11, 36, 0.96);
}

.web-header.is-solid::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--spectrum);
  content: "";
  opacity: 0.55;
}

.nav-button::after {
  height: 2px;
  border-radius: 99px;
  background: var(--spectrum);
}

.global-search,
.header-icon-button,
.wallet-trigger {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(13, 22, 54, 0.8);
}

.global-search:focus-within {
  border-color: rgba(42, 132, 240, 0.7);
  background: var(--surface-strong);
}

.global-search input::placeholder {
  color: #7d88a8;
}

/* 金币：珊瑚色硬币，取自 FCAIShort 标识上的圆点 */
.wallet-trigger .fct-label,
.player-wallet-compact span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb08c, var(--coral) 60%, #c9542a);
  color: #2a0f04;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0;
}

.avatar-trigger {
  padding: 2px;
  border: 0;
  background: var(--brand-gradient);
}

.avatar-trigger span {
  border-radius: 50%;
  background: #0d1636;
  color: #e6ecff;
}

/* ---------- 通用按钮 ---------- */
.primary-button {
  border-color: transparent;
  border-radius: 999px;
  background: var(--brand-gradient);
  box-shadow: 0 14px 34px rgba(58, 92, 240, 0.34);
}

.primary-button:hover {
  border-color: transparent;
  background: linear-gradient(120deg, #3a92ff 0%, #6650ff 55%, #8a3cff 100%);
}

.secondary-button,
.quiet-button {
  border-radius: 999px;
}

.secondary-button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(13, 22, 54, 0.66);
}

/* ---------- 首页精选 ---------- */
.hero-kicker,
.detail-kicker {
  border-radius: 999px;
  background: var(--coral);
  color: #2a0f04;
  font-weight: 800;
}

.hero-progress button::after {
  background: var(--spectrum);
  background-size: 260px 100%;
}

.home-featured-primary {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(42, 132, 240, 0.08);
}

.home-featured-primary .hero-shade {
  background:
    linear-gradient(90deg, rgba(6, 11, 36, 0.94) 0%, rgba(6, 11, 36, 0.62) 46%, rgba(6, 11, 36, 0.06) 78%),
    linear-gradient(0deg, rgba(6, 11, 36, 0.92) 0%, transparent 52%);
}

.home-featured-card {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(13, 22, 54, 0.82);
}

.home-featured-card:hover,
.home-continue-card:hover {
  border-color: rgba(42, 132, 240, 0.55);
}

.home-featured-card-media > span,
.poster-views {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: var(--glass);
}

/* ---------- 封面：统一铺满，不再出现上下黑边 ---------- */
.home-cover-frame {
  border-radius: var(--radius-poster);
  background:
    linear-gradient(135deg, rgba(42, 132, 240, 0.14), rgba(108, 44, 240, 0.1)),
    #0a1230;
}

.home-cover-frame img {
  object-fit: cover;
  object-position: center 30%;
}

.home-ranking-card .home-cover-frame,
.home-recommendation-card .home-cover-frame {
  border-color: rgba(255, 255, 255, 0.08);
}

.poster-media,
#for-you .poster-media {
  border-radius: var(--radius-poster);
}

#for-you .poster-card {
  border-radius: var(--radius-poster);
}

/* 分类角标：毛玻璃小胶囊；配音标识（CN 等）用珊瑚色点出 */
.poster-badge {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: var(--glass);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ---------- 热榜：大号排名数字，前三名珊瑚渐变 ---------- */
.home-rank-badge {
  top: auto;
  bottom: 6px;
  left: 10px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 54px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

.home-ranking-card:nth-child(-n + 3) .home-rank-badge {
  border: 0;
  background: linear-gradient(180deg, #ffd0b6 0%, #f07848 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  text-shadow: none;
}

.home-ranking-card .home-cover-frame::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(6, 11, 36, 0.78), transparent);
  content: "";
  pointer-events: none;
}

.weekly-ranking-item > strong,
.ranking-item > strong {
  color: var(--coral-ink);
  font-style: italic;
  font-weight: 900;
}

/* ---------- 为你推荐：“换一换” ---------- */
.home-recommendation-refresh {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(13, 22, 54, 0.8);
}

.home-recommendation-refresh-rail {
  border-radius: 999px;
}

.home-recommendation-refresh:hover {
  border-color: rgba(42, 132, 240, 0.7);
}

/* ---------- 分类标签 ---------- */
.genre-tab {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.genre-tab.is-active {
  border-color: #ffffff;
  background: #ffffff;
  color: #0a1230;
}

/* ---------- 进度：品牌光谱 ---------- */
.home-poster-progress i,
.continue-progress span {
  background: var(--spectrum);
  background-size: 320px 100%;
}

.player-seek-track::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, transparent 0 var(--player-progress, 0%), rgba(255, 255, 255, 0.22) var(--player-progress, 0%) 100%),
    var(--spectrum);
}

.player-seek-track::-webkit-slider-thumb {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(240, 120, 72, 0.35);
}

.player-seek-track::-moz-range-progress {
  background: var(--spectrum);
}

.player-seek-track::-moz-range-thumb {
  background: #fff;
}

/* ---------- 选集按钮 ---------- */
.episode-button {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(13, 22, 54, 0.9);
}

.episode-button:hover {
  border-color: rgba(42, 132, 240, 0.6);
}

.episode-button.is-current,
.player-episodes .episode-button.is-current {
  border-color: transparent;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 10px 26px rgba(58, 92, 240, 0.36);
}

.episode-button.is-locked {
  color: rgba(201, 209, 234, 0.62);
}

/* ---------- 详情页 ---------- */
.detail-stats {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-panel);
  background: rgba(13, 22, 54, 0.72);
}

/* ---------- 我的 / 追剧 / 空状态 ---------- */
.profile-avatar {
  border: 2px solid transparent;
  background:
    linear-gradient(#0d1636, #0d1636) padding-box,
    var(--brand-gradient) border-box;
}

.account-panel,
.wallet-panel,
.settings-panel,
.watchlist-page .empty-state {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-panel);
}

.wallet-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 120, 72, 0.22), transparent 55%),
    var(--surface);
}

.wallet-balance strong {
  background: linear-gradient(180deg, #ffffff 30%, #ffc3a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.state-symbol {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--spectrum) border-box;
  color: #fff;
}

/* ---------- 弹层 ---------- */
.layer-panel {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: #0d1636;
}

/* ---------- 手机底部导航 ---------- */
@media (max-width: 960px) {
  .mobile-nav {
    background: rgba(6, 11, 36, 0.96);
  }

  .mobile-nav button.is-active {
    position: relative;
    color: #ffffff;
  }

  .mobile-nav button.is-active::before {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 99px;
    background: var(--spectrum);
    content: "";
    transform: translateX(-50%);
  }

  .mobile-nav button.is-active img {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .home-rank-badge {
    font-size: 40px;
  }
}

/* 设置行是 <button>：清掉浏览器默认边框和居中对齐 */
.settings-panel button.setting-row {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  font: inherit;
  text-align: left;
}

.settings-panel button.setting-row:last-child {
  border-bottom: 0;
}

/* “换一换”统一放在标题右侧，不再用右边一条竖排按钮 */
.home-recommendation-layout {
  display: block;
}

.home-recommendation-refresh-rail {
  display: none;
}

.home-recommendation-refresh-compact {
  display: inline-flex;
  border-radius: 999px;
}

/* 播放页右栏 */
.player-rail-summary,
.player-panel-episode-entry,
.player-panel-footer,
.player-rail-recommendations {
  border-radius: var(--radius-panel);
}

.player-panel-kicker {
  color: var(--coral-ink);
}

.player-panel-next {
  border: 0;
  border-radius: 999px;
  background: var(--brand-gradient);
  box-shadow: 0 10px 26px rgba(58, 92, 240, 0.32);
}

.player-site-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) {
  /* 手机详情页：“查看更多”放在“选集”同一行右侧 */
  .episode-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* 热榜页：页头已经写了“本周热榜”，榜单自己的标题和“查看更多”（指向本页）不再重复 */
.simple-page > #ranking-section .weekly-ranking > .section-heading {
  display: none;
}

/* ==========================================================================
   2026-11 FCAIShort 新风格「首映之夜」（Claude）
   用户：“以前做得太丑了，做得高端大气一点，带点动态效果，不要被之前的风格限制住。”
   - 首页首屏铺满整屏：剧照缓缓推近、换片时交叉淡化、标题逐层出场；
     右下角一排“接下来”小卡片；整页的氛围光跟着当前剧照的主色变（脚本取色）。
   - 背景一层缓慢流动的品牌光（蓝 / 紫 + 剧照主色），加极淡的胶片颗粒。
   - 热榜用大号斜体数字（Playfair Display）立在海报左边；海报悬停时上浮、扫一道光。
   - 各块滚进屏幕时依次出场（只一次）。
   - 动效不看系统“减少动画”设置照常动（用户 10-31 定的规矩），
     首页首屏和详情页右下角都有“暂停”按钮，按下后整站动效一起停。
   ========================================================================== */
@font-face {
  font-family: "FC Display Numerals";
  src: url("/src/assets/fonts/playfair-display-latin-900-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0030-0039, U+002F;
}

@property --ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: #5b4ce0;
}

:root {
  font-family: "Segoe UI Variable", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --night: #04061a;
  --glass-strong: rgba(8, 12, 36, 0.72);
  --glass-soft: rgba(12, 18, 48, 0.46);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --numeral: "FC Display Numerals", "Times New Roman", serif;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --page-gutter: 48px;
}

/* ---------- 整页背景：流动的品牌光 + 剧照主色 + 胶片颗粒 ---------- */
body {
  background: var(--night);
}

.web-app {
  position: relative;
  isolation: isolate;
  --ambient: #5b4ce0;
  transition: --ambient 1.6s ease;
}

.web-app::before {
  position: fixed;
  z-index: -1;
  inset: -18vmax;
  background:
    radial-gradient(42vmax 30vmax at 74% 8%, rgba(91, 76, 224, 0.34), transparent 70%),
    radial-gradient(36vmax 28vmax at 8% 42%, rgba(108, 44, 240, 0.16), transparent 70%),
    radial-gradient(32vmax 24vmax at 58% 92%, rgba(42, 132, 240, 0.12), transparent 70%);
  background:
    radial-gradient(42vmax 30vmax at 74% 8%, color-mix(in oklab, var(--ambient) 36%, transparent), transparent 70%),
    radial-gradient(36vmax 28vmax at 8% 42%, rgba(108, 44, 240, 0.16), transparent 70%),
    radial-gradient(32vmax 24vmax at 58% 92%, color-mix(in oklab, var(--ambient) 14%, rgba(42, 132, 240, 0.12)), transparent 70%);
  content: "";
  pointer-events: none;
  animation: fc-aurora 38s ease-in-out infinite alternate;
}

.web-app::after {
  position: fixed;
  z-index: 1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.035;
  pointer-events: none;
}

.web-app.is-player-view::before,
.web-app.is-player-view::after {
  display: none;
}

@keyframes fc-aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-3vmax, 2vmax, 0) rotate(5deg) scale(1.06); }
  100% { transform: translate3d(2vmax, -2vmax, 0) rotate(-4deg) scale(1.1); }
}

/* ---------- 页头：首屏上透明，往下滚变成玻璃 ---------- */
.web-header {
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(4, 6, 26, 0.78) 0%, rgba(4, 6, 26, 0.32) 62%, transparent 100%);
  backdrop-filter: none;
  transition: background 320ms ease, backdrop-filter 320ms ease;
}

.web-header.is-solid {
  background: rgba(6, 9, 30, 0.72);
  backdrop-filter: blur(22px) saturate(1.4);
}

.nav-button {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.global-search,
.header-icon-button,
.wallet-trigger,
.history-trigger {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 40, 0.42);
  backdrop-filter: blur(14px);
}

/* ---------- 通用按钮 ---------- */
.primary-button {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #2a84f0 0%, #5b4cf5 55%, #9a3cf0 100%);
  box-shadow:
    0 14px 36px rgba(72, 88, 245, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, filter 220ms ease;
}

.primary-button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  content: "";
  transform: translateX(-120%);
  animation: fc-sheen 4.8s ease-in-out 1.6s infinite;
  pointer-events: none;
}

.primary-button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 20px 44px rgba(72, 88, 245, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

@keyframes fc-sheen {
  0%, 62% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.secondary-button {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
}

.secondary-button:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.13);
}

/* ---------- 首页首屏：整屏剧照 ---------- */
.home-b-page {
  padding-top: 0;
}

.home-featured-stage {
  position: relative;
  width: 100%;
  margin: 0;
}

.home-featured-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home-featured-grid {
  position: relative;
  display: block;
  height: clamp(640px, 94vh, 980px);
}

.home-featured-primary {
  position: absolute;
  inset: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--night);
  box-shadow: none;
}

.home-featured-primary .hero-media {
  animation: fc-hero-art-in 1.5s var(--ease-out) both;
}

.home-featured-primary .hero-media--previous {
  z-index: 0;
  animation: fc-hero-art-out 1.5s ease forwards;
}

.home-featured-primary .hero-media img,
.detail-background img {
  filter: saturate(1.02) contrast(1.04);
  transform-origin: 62% 40%;
  animation: fc-ken-burns 24s ease-in-out infinite alternate;
}

/* 换片前那张停在缓推大约走到的位置，淡出时不跳 */
.home-featured-primary .hero-media--previous img {
  animation: none;
  transform: scale(1.04) translate3d(-0.3%, -0.2%, 0);
}

@keyframes fc-hero-art-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fc-hero-art-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fc-ken-burns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

.home-featured-primary .hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 6, 26, 0.95) 0%, rgba(4, 6, 26, 0.74) 28%, rgba(4, 6, 26, 0.2) 60%, rgba(4, 6, 26, 0.04) 100%),
    linear-gradient(0deg, var(--night) 0%, rgba(4, 6, 26, 0.72) 12%, transparent 44%),
    linear-gradient(180deg, rgba(4, 6, 26, 0.66) 0%, transparent 24%);
}

/* 剧照主色在左下透出来，换片时跟着变 */
.home-featured-primary::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: -10%;
  height: 76%;
  background: radial-gradient(60% 70% at 18% 72%, color-mix(in oklab, var(--ambient) 34%, transparent), transparent 70%);
  content: "";
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
  pointer-events: none;
}

.home-featured-primary .hero-content {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: 236px;
  left: var(--page-gutter);
  width: min(660px, 48vw);
  margin: 0;
  padding: 0;
}

.hero-kicker-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-kicker,
.detail-kicker {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(240, 120, 72, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 154, 112, 0.45);
  color: #ffb08c;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.hero-index {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--numeral);
  font-variant-numeric: lining-nums;
  font-size: 17px;
  font-style: italic;
  font-weight: 900;
}

.hero-index b {
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.hero-index i {
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.home-featured-primary .hero-content h1 {
  max-width: 660px;
  margin: 18px 0 16px;
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.home-featured-primary .hero-meta {
  gap: 8px;
}

.home-featured-primary .hero-meta span {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #e3e7f7;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

.home-featured-primary .hero-meta span + span::before {
  display: none;
}

.home-featured-primary .hero-description {
  max-width: 560px;
  margin-top: 18px;
  color: #d4d9ee;
  font-size: 17px;
  line-height: 1.7;
}

.home-featured-primary .hero-actions {
  gap: 14px;
  margin-top: 30px;
}

.home-featured-primary .hero-actions .primary-button {
  min-width: 200px;
  min-height: 56px;
  font-size: 17px;
}

.home-featured-primary .hero-actions .secondary-button {
  width: 56px;
  min-height: 56px;
  padding: 0;
}

.home-featured-primary .hero-carousel-controls {
  width: min(420px, 100%);
  margin-top: 34px;
}

.hero-progress {
  gap: 8px;
}

.hero-progress button {
  width: 64px;
}

.hero-progress button::before,
.hero-progress button::after {
  height: 3px;
  border-radius: 99px;
}

.hero-progress button::before {
  background: rgba(255, 255, 255, 0.22);
}

.hero-progress button::after {
  background: linear-gradient(90deg, #2478e4, #00b4f0 40%, #9a3cf0 80%, #f07848);
}

.hero-playback-toggle,
.motion-toggle {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(8, 12, 36, 0.5);
  backdrop-filter: blur(12px);
}

/* 首屏文字依次出场（每次换片都会重来一遍） */
.home-featured-primary .hero-kicker-row,
.home-featured-primary .hero-content h1,
.home-featured-primary .hero-meta,
.home-featured-primary .hero-description,
.home-featured-primary .hero-actions,
.home-featured-primary .hero-carousel-controls {
  animation: fc-rise-in 900ms var(--ease-out) both;
}

.home-featured-primary .hero-content h1 {
  animation-name: fc-title-in;
  animation-duration: 1100ms;
  animation-delay: 120ms;
}

.home-featured-primary .hero-meta { animation-delay: 300ms; }
.home-featured-primary .hero-description { animation-delay: 380ms; }
.home-featured-primary .hero-actions { animation-delay: 460ms; }
.home-featured-primary .hero-carousel-controls { animation-delay: 540ms; }

@keyframes fc-rise-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fc-title-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 36px, 0); }
  to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; }
}

/* 右下角“接下来”：其余精选的小卡片 */
.home-featured-secondary-grid {
  position: absolute;
  z-index: 3;
  right: var(--page-gutter);
  bottom: 56px;
  display: grid;
  width: min(780px, 52vw);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 14px;
}

.home-featured-card {
  grid-template-rows: auto auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 12, 36, 0.48);
  backdrop-filter: blur(16px) saturate(1.3);
  transition: transform 320ms var(--ease-out), border-color 220ms ease, box-shadow 320ms ease, background 220ms ease;
}

.home-featured-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(14, 20, 56, 0.66);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.home-featured-card-media {
  aspect-ratio: 16 / 10;
}

.home-featured-card-media > span {
  white-space: nowrap;
}

.home-featured-card-copy {
  gap: 3px;
  padding: 10px 12px 12px;
}

.home-featured-card-copy strong {
  font-size: 14px;
}

.home-featured-card-copy small {
  font-size: 12px;
}

/* ---------- 首页内容区 ---------- */
.home-featured-stage,
.home-b-content {
  width: auto;
}

.home-b-content {
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
  margin-inline: auto;
}

.home-cover-section {
  margin-top: 0;
  padding-top: 84px;
  border-top: 0;
}

.home-module-heading,
.section-heading {
  align-items: end;
  margin-bottom: 30px;
}

.home-module-heading h2,
.section-heading h2,
.home-featured-heading h1 {
  position: relative;
  padding-bottom: 16px;
  font-size: 34px;
  font-weight: 880;
  letter-spacing: -0.015em;
}

.home-module-heading h2::after,
.section-heading h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2478e4, #00b4f0 40%, #9a3cf0 80%, #f07848);
  content: "";
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) 200ms;
}

.reveal:not(.is-inview) .home-module-heading h2::after,
.reveal:not(.is-inview) .section-heading h2::after {
  transform: scaleX(0);
}

.home-module-heading p,
.section-heading p {
  margin-top: 10px;
  font-size: 15px;
}

.section-link,
.home-module-heading .section-link {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.section-link:hover,
.home-module-heading .section-link:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ---------- 海报卡：圆角、上浮、扫光、播放标 ---------- */
.home-cover-frame,
.poster-media {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: #0b1030;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out), border-color 300ms ease;
}

.home-cover-frame img,
.poster-media img {
  transition: transform 900ms var(--ease-out), filter 400ms ease;
}

.home-cover-frame::after,
.poster-media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.26) 48%, transparent 62%);
  content: "";
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
}

.home-cover-frame::before,
.poster-media::before {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background:
    url("/src/assets/icons/fa-play.svg") 55% 50% / 18px 18px no-repeat,
    rgba(8, 12, 36, 0.5);
  backdrop-filter: blur(8px);
  content: "";
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
  pointer-events: none;
}

.home-ranking-card,
.home-recommendation-card,
.poster-card,
.home-continue-card {
  transition: none;
}

.home-ranking-card:hover,
.home-recommendation-card:hover,
.poster-card:hover {
  transform: none;
}

.home-ranking-card:hover .home-cover-frame,
.home-recommendation-card:hover .home-cover-frame,
.poster-card:hover .poster-media,
.home-ranking-card:focus-visible .home-cover-frame,
.home-recommendation-card:focus-visible .home-cover-frame,
.poster-card:focus-visible .poster-media {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 50px -10px color-mix(in oklab, var(--ambient) 70%, transparent);
  transform: translateY(-8px) scale(1.02);
}

.home-ranking-card:hover .home-cover-frame img,
.home-recommendation-card:hover .home-cover-frame img,
.poster-card:hover .poster-media img {
  filter: brightness(1.08) saturate(1.06);
  transform: scale(1.06);
}

.home-ranking-card:hover .home-cover-frame::after,
.home-recommendation-card:hover .home-cover-frame::after,
.poster-card:hover .poster-media::after {
  opacity: 1;
  transform: translateX(110%);
  transition: transform 1s var(--ease-out), opacity 200ms ease;
}

.home-ranking-card:hover .home-cover-frame::before,
.home-recommendation-card:hover .home-cover-frame::before,
.poster-card:hover .poster-media::before {
  opacity: 1;
  transform: scale(1);
}

.home-cover-copy,
.poster-copy {
  padding-top: 14px;
}

.home-cover-copy h3,
.home-cover-copy strong,
.poster-title {
  font-size: 16px;
  font-weight: 760;
}

.poster-badge {
  border-radius: 999px;
}

/* ---------- 本周热榜：大号斜体数字立在海报左边 ---------- */
.home-ranking-grid {
  gap: 30px 26px;
}

.home-ranking-card {
  position: relative;
  container-type: inline-size;
  padding-left: 40%;
}

/* 数字底边对齐海报底边（cqw 按海报宽算：海报高 = 150cqw；数字基线比行框低约 0.045em） */
.home-rank-badge {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: auto;
  left: -3%;
  display: flex;
  align-items: flex-end;
  width: auto;
  height: 144cqw;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.08) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: none;
  backdrop-filter: none;
  color: transparent;
  font-family: var(--numeral);
  font-size: 140cqw;
  font-style: italic;
  font-variant-numeric: lining-nums;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.74;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  text-shadow: none;
  filter: none;
  transition: transform 1.1s var(--ease-out), opacity 900ms ease;
  transition-delay: calc(var(--reveal-index, 0) * 90ms + 120ms);
}

.home-ranking-card:nth-child(-n + 3) .home-rank-badge {
  border: 0;
  background: linear-gradient(180deg, #ffd5bf 0%, #f07848 46%, rgba(154, 60, 240, 0.25) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 30px rgba(240, 120, 72, 0.25));
  -webkit-text-stroke: 1px rgba(255, 196, 168, 0.5);
}

.reveal:not(.is-inview) .home-rank-badge {
  opacity: 0;
  transform: translate3d(-12%, 18%, 0);
}

.home-ranking-card .home-cover-frame {
  z-index: 1;
  box-shadow: -18px 0 40px rgba(4, 6, 26, 0.72), 0 18px 40px rgba(0, 0, 0, 0.34);
}

.home-ranking-card .home-cover-frame::after {
  position: absolute;
  inset: 0;
  height: auto;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.26) 48%, transparent 62%);
}

/* ---------- 为你推荐 ---------- */
.home-recommendation-grid {
  gap: 40px 24px;
}

.home-recommendation-refresh {
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.home-recommendation-refresh {
  flex: 0 0 auto;
  white-space: nowrap;
}

.home-recommendation-refresh span {
  display: inline-block;
  transition: transform 500ms var(--ease-out);
}

.home-recommendation-refresh:hover span {
  transform: rotate(180deg);
}

/* ---------- 分类标签 ---------- */
.genre-tabs {
  gap: 10px;
  margin-bottom: 30px;
}

.genre-tab {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #c9d0e8;
  font-weight: 650;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms var(--ease-out);
}

.genre-tab:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.genre-tab.is-active {
  border-color: transparent;
  background: linear-gradient(120deg, #2a84f0 0%, #5b4cf5 55%, #9a3cf0 100%);
  box-shadow: 0 10px 26px rgba(72, 88, 245, 0.36);
  color: #fff;
}

.home-library-section .poster-grid {
  gap: 40px 22px;
}

/* ---------- 滚进屏幕时依次出场 ---------- */
.reveal .home-module-heading,
.reveal .section-heading,
.simple-page-header.reveal {
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.reveal:not(.is-inview) .home-module-heading,
.reveal:not(.is-inview) .section-heading,
.simple-page-header.reveal:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.reveal :is(.home-ranking-grid, .home-recommendation-grid, .poster-grid, .poster-rail, .weekly-ranking-list, .continue-rail, .episode-grid) > * {
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.reveal:not(.is-inview) :is(.home-ranking-grid, .home-recommendation-grid, .poster-grid, .poster-rail, .weekly-ranking-list, .continue-rail, .episode-grid) > * {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

.detail-body.reveal {
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.detail-body.reveal:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* ---------- 详情页：整屏剧照 ---------- */
.detail-hero {
  min-height: clamp(620px, 86vh, 900px);
}

.detail-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 6, 26, 0.96) 0%, rgba(4, 6, 26, 0.74) 34%, rgba(4, 6, 26, 0.18) 68%, rgba(4, 6, 26, 0.06) 100%),
    linear-gradient(0deg, var(--night) 0%, rgba(4, 6, 26, 0.6) 16%, transparent 50%),
    linear-gradient(180deg, rgba(4, 6, 26, 0.66) 0%, transparent 22%),
    radial-gradient(60% 60% at 16% 86%, color-mix(in oklab, var(--ambient) 30%, transparent), transparent 70%);
}

.detail-background {
  animation: fc-hero-art-in 1.5s var(--ease-out) both;
}

.detail-content {
  z-index: 2;
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
  padding: 140px 0 96px;
}

.detail-content > * {
  animation: fc-rise-in 900ms var(--ease-out) both;
}

.detail-content > :nth-child(2) { animation-delay: 80ms; }
.detail-content > :nth-child(3) { animation-name: fc-title-in; animation-duration: 1100ms; animation-delay: 140ms; }
.detail-content > :nth-child(4) { animation-delay: 300ms; }
.detail-content > :nth-child(5) { animation-delay: 380ms; }
.detail-content > :nth-child(6) { animation-delay: 460ms; }

.detail-content h1 {
  max-width: 760px;
  margin: 18px 0 16px;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.detail-meta span {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #e3e7f7;
  font-size: 13px;
}

.detail-meta span + span::before {
  display: none;
}

.detail-description {
  color: #d4d9ee;
  font-size: 17px;
  line-height: 1.75;
}

.detail-actions {
  gap: 12px;
  margin-top: 30px;
}

.detail-actions .primary-button {
  min-width: 200px;
  min-height: 56px;
  font-size: 17px;
}

.detail-actions .secondary-button {
  min-height: 56px;
  padding: 0 22px;
}

.back-command {
  min-height: 40px;
  margin-bottom: 36px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(8, 12, 36, 0.42);
  backdrop-filter: blur(12px);
}

.motion-toggle {
  position: absolute;
  z-index: 3;
  right: var(--page-gutter);
  bottom: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
}

.motion-toggle img {
  width: 12px;
  height: 14px;
  object-fit: contain;
}

.detail-body {
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
  gap: 56px;
  padding-top: 24px;
}

.detail-summary,
.episode-section {
  padding: 30px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: rgba(10, 15, 44, 0.5);
  backdrop-filter: blur(18px);
}

.detail-summary h2,
.episode-section h2 {
  font-size: 24px;
  font-weight: 850;
}

.detail-stats {
  border: 0;
  border-radius: 16px;
  background: transparent;
  gap: 10px;
}

.detail-stats div {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.detail-stats strong {
  font-size: 22px;
}

.detail-related {
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
}

.episode-button {
  border-radius: 14px;
  transition: transform 260ms var(--ease-out), border-color 200ms ease, background 200ms ease;
}

.episode-button:hover {
  transform: translateY(-3px);
}

/* ---------- 二级页（热榜 / 片库 / 追剧 / 我的） ---------- */
.simple-page {
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
  padding-top: calc(var(--header-height) + 64px);
}

.simple-page-header {
  margin-bottom: 44px;
}

.simple-page-header h1 {
  position: relative;
  padding-bottom: 20px;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.simple-page-header h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2478e4, #00b4f0 40%, #9a3cf0 80%, #f07848);
  content: "";
}

.simple-page-header p {
  margin-top: 14px;
  font-size: 16px;
}

/* 热榜页：一行一部，大号数字 + 横版剧照 */
.simple-page .weekly-ranking-list {
  gap: 14px;
}

.simple-page .weekly-ranking-item {
  grid-template-columns: 132px minmax(200px, 320px) minmax(0, 1fr) auto;
  gap: 32px;
  min-height: 184px;
  padding: 16px 28px 16px 8px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--hairline);
  border-radius: 22px;
  transition: background 260ms ease, border-color 260ms ease, transform 400ms var(--ease-out);
}

.simple-page .weekly-ranking-item:hover {
  border-color: var(--hairline-strong);
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(6px);
}

.simple-page .weekly-ranking-item > strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.12));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--numeral);
  font-size: 120px;
  font-variant-numeric: lining-nums;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-align: center;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

.simple-page .weekly-ranking-item:nth-child(-n + 3) > strong {
  background: linear-gradient(180deg, #ffd5bf 0%, #f07848 50%, rgba(154, 60, 240, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 196, 168, 0.5);
}

.simple-page .weekly-ranking-item > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transition: transform 600ms var(--ease-out);
}

.simple-page .weekly-ranking-item:hover > img {
  transform: scale(1.03);
}

.simple-page .weekly-ranking-item h3 {
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 850;
}

.simple-page .weekly-ranking-item p {
  font-size: 15px;
}

.simple-page .weekly-ranking-views {
  color: #e3e7f7;
  font-size: 18px;
  font-weight: 750;
}

.simple-page .weekly-ranking-views::before {
  margin-right: 8px;
  color: var(--coral-ink, #ff9a70);
  content: "▶";
  font-size: 13px;
}

.account-facts {
  border-color: var(--hairline);
  border-radius: 14px;
  background: var(--hairline);
}

.account-facts > div {
  background: rgba(8, 12, 36, 0.86);
}

.watchlist-page .empty-state,
.account-panel,
.wallet-panel,
.settings-panel {
  border-color: var(--hairline);
  border-radius: 22px;
  background-color: rgba(10, 15, 44, 0.5);
  backdrop-filter: blur(18px);
}

/* ---------- 暂停：整站动效一起停 ---------- */
.web-app.is-motion-paused::before,
.web-app.is-motion-paused .home-featured-primary .hero-media img,
.web-app.is-motion-paused .detail-background img,
.web-app.is-motion-paused .primary-button::after {
  animation-play-state: paused;
}

/* ---------- 平板：接下来的小卡片挪到首屏下面 ---------- */
@media (max-width: 1280px) {
  :root {
    --page-gutter: 32px;
  }

  .home-featured-grid {
    height: auto;
  }

  .home-featured-primary {
    position: relative;
    height: clamp(600px, 86vh, 820px);
    aspect-ratio: auto;
  }

  .home-featured-primary .hero-content {
    bottom: 120px;
    width: min(620px, 70vw);
  }

  .home-featured-primary .hero-content h1 {
    font-size: 64px;
  }

  .home-featured-secondary-grid {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(calc(100% - var(--page-gutter) * 2), 1180px);
    margin: -72px auto 0;
    grid-template-rows: auto;
  }

}

@media (max-width: 960px) {
  .home-featured-primary .hero-content h1,
  .detail-content h1 {
    font-size: 54px;
  }

  .simple-page-header h1 {
    font-size: 46px;
  }

  .home-ranking-grid {
    grid-template-columns: repeat(5, minmax(210px, 1fr));
  }

  .simple-page .weekly-ranking-item {
    grid-template-columns: 96px minmax(150px, 240px) minmax(0, 1fr);
    gap: 20px;
    min-height: 150px;
  }

  .simple-page .weekly-ranking-item > strong {
    font-size: 92px;
  }

  .simple-page .weekly-ranking-views {
    display: none;
  }

  .detail-summary,
  .episode-section {
    padding: 22px;
  }

  /* 手机、平板：底部导航做成悬浮的玻璃条 */
  .mobile-nav {
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    min-height: 64px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(8, 12, 36, 0.72);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(22px) saturate(1.4);
  }

  .mobile-nav button.is-active img {
    filter: drop-shadow(0 0 10px rgba(122, 160, 255, 0.8));
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 640px) {
  :root {
    --page-gutter: 16px;
  }

  .home-featured-primary {
    height: 78svh;
    min-height: 540px;
    max-height: 720px;
  }

  .home-featured-primary .hero-shade {
    background:
      linear-gradient(0deg, var(--night) 0%, rgba(4, 6, 26, 0.86) 22%, rgba(4, 6, 26, 0.2) 52%, rgba(4, 6, 26, 0.5) 100%);
  }

  .home-featured-primary .hero-content {
    right: var(--page-gutter);
    bottom: 96px;
    width: auto;
  }

  .hero-kicker-row {
    gap: 12px;
  }

  .hero-index b {
    font-size: 24px;
  }

  .home-featured-primary .hero-content h1 {
    margin: 12px 0 10px;
    font-size: 40px;
  }

  .home-featured-primary .hero-meta span {
    min-height: 26px;
    font-size: 12px;
  }

  .home-featured-primary .hero-actions {
    margin-top: 20px;
  }

  .home-featured-primary .hero-actions .primary-button {
    min-width: 0;
    flex: 1;
    min-height: 50px;
    font-size: 16px;
  }

  .home-featured-primary .hero-actions .secondary-button {
    width: 50px;
    min-height: 50px;
  }

  .home-featured-primary .hero-carousel-controls {
    width: 100%;
    margin-top: 22px;
  }

  .hero-progress button {
    width: auto;
    flex: 1;
  }

  /* 接下来：横着滑 */
  .home-featured-secondary-grid {
    display: grid;
    width: auto;
    margin: -56px 0 0;
    padding: 0 var(--page-gutter) 6px;
    grid-auto-columns: 58%;
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .home-featured-secondary-grid::-webkit-scrollbar {
    display: none;
  }

  /* 手机上小卡片也是上图下字（原来左图右字，字一放大就挤） */
  .home-featured-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    scroll-snap-align: start;
  }

  .home-featured-card-media {
    aspect-ratio: 16 / 10;
  }

  .home-featured-card-copy {
    align-content: start;
  }

  .home-featured-card-copy small {
    font-size: 12px;
  }

  .home-cover-section {
    padding-top: 56px;
  }

  .home-module-heading h2,
  .section-heading h2 {
    padding-bottom: 12px;
    font-size: 26px;
  }

  .home-module-heading p,
  .section-heading p {
    font-size: 13px;
  }

  .home-ranking-grid {
    grid-auto-columns: 62%;
    gap: 18px;
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 4px var(--page-gutter) 12px;
    scroll-padding-inline: var(--page-gutter);
  }

  .home-rank-badge {
    top: 0;
    left: -3%;
    width: auto;
    height: 144cqw;
    font-size: 140cqw;
  }

  .home-recommendation-grid {
    gap: 30px 14px;
  }

  .home-cover-frame,
  .poster-media {
    border-radius: 14px;
  }

  .detail-hero {
    min-height: 84svh;
  }

  .detail-content {
    width: calc(100% - var(--page-gutter) * 2);
    padding: 120px 0 64px;
  }

  .detail-content h1 {
    font-size: 40px;
  }

  .motion-toggle {
    right: var(--page-gutter);
    bottom: 22px;
  }

  .detail-body {
    gap: 18px;
  }

  .simple-page {
    width: calc(100% - var(--page-gutter) * 2);
    padding-top: calc(var(--header-height) + 32px);
  }

  .simple-page-header {
    margin-bottom: 28px;
  }

  .simple-page-header h1 {
    padding-bottom: 14px;
    font-size: 36px;
  }

  .simple-page .weekly-ranking-item {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px 14px;
    min-height: 0;
    padding: 14px 4px;
    border-radius: 18px;
  }

  .simple-page .weekly-ranking-item > strong {
    grid-row: 1 / span 2;
    font-size: 64px;
  }

  .simple-page .weekly-ranking-item > img {
    grid-column: 2;
  }

  .simple-page .weekly-ranking-copy {
    grid-column: 2;
  }

  .simple-page .weekly-ranking-item h3 {
    margin-bottom: 4px;
    font-size: 18px;
  }

  .simple-page .weekly-ranking-item p {
    font-size: 13px;
  }

  .genre-tab {
    min-height: 38px;
    padding: 0 16px;
  }
}

@media (max-width: 380px) {
  .home-featured-primary .hero-content h1,
  .detail-content h1 {
    font-size: 34px;
  }
}

/* =====================================================================
   2026-11-03 剧照完整显示（Claude）
   老板定的规矩：图要完整展现，人物不能一半在框里一半在框外。
   - 剧照和框形状差不多（每边裁掉不到 6%）就铺满；差得多就整张显示，
     空出来的地方用同一张图放大、虚化垫底（.art-fill，JS 按图的真实长宽比加，见 fitArtwork）。
   - 11-03 第二次改：海报、推荐、片库、追剧这些小框一律铺满，按图里人的位置取景（JS 的 focusArtwork），
     不再虚化垫底（用户：“那么多磨砂玻璃……不填满这个画框，差点意思”）。整张显示 + 虚化只留给首屏、详情页。
   - 首屏、详情页的框尽量做成接近 16:9，电脑上横版剧照基本不用裁。
   - 手机 / 竖着的平板：横图放在上面整张显示、字放在下面；手机竖图照旧铺满。
   ===================================================================== */
.art-fill {
  position: absolute;
  z-index: 0;
  inset: -12%;
  background: #070a22 center / cover no-repeat;
  filter: blur(26px) saturate(1.35) brightness(0.62);
  transform: scale(1.04);
  pointer-events: none;
}

:where(.art-fill) ~ img,
:where(.art-fill) ~ picture img {
  position: relative;
  z-index: 1;
}

[data-art-fit="whole"] {
  overflow: hidden;
}

[data-art-fit="whole"] > img,
[data-art-fit="whole"] > picture > img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* 整张显示时剧照本身不再缓推（推近会切边），改成后面的虚化底慢慢动 */
.hero-media[data-art-fit="whole"] img,
.detail-background[data-art-fit="whole"] img {
  animation: none !important;
  transform: none !important;
}

.hero-media > .art-fill,
.detail-background > .art-fill {
  animation: fc-fill-drift 30s ease-in-out infinite alternate;
}

@keyframes fc-fill-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}

.web-app.is-motion-paused .art-fill {
  animation-play-state: paused;
}

/* 铺满时的缓推幅度收小：最多再推近 5% */
@keyframes fc-ken-burns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.05) translate3d(-0.6%, -0.4%, 0); }
}

.home-featured-primary .hero-media--previous img {
  transform: scale(1.02);
}

/* 电脑上竖图（只有封面的剧）放右边，左边留给片名 */
.hero-media[data-art-bars="x"] img,
.detail-background[data-art-bars="x"] img {
  object-position: 86% 50% !important;
}

/* 框的高度跟着宽度走，尽量接近 16:9 */
.home-featured-grid {
  height: clamp(600px, min(94vh, 60.75vw), 980px);
}

.detail-hero {
  min-height: clamp(560px, min(86vh, 60.75vw), 900px);
}

@media (max-width: 1280px) {
  .home-featured-grid {
    height: auto;
  }

  .home-featured-primary {
    height: clamp(560px, min(86vh, 60.75vw), 820px);
  }
}

/* ---------- 手机、竖着的平板：图在上、字在下 ---------- */
@media (max-width: 640px), (max-aspect-ratio: 1/1) {
  .home-featured-primary,
  .detail-hero {
    --hero-art-top: 88px;
    container-type: inline-size;
  }

  .home-featured-primary {
    --hero-copy-zone: 500px;
    display: flex;
    height: auto;
    min-height: calc(var(--hero-art-top) + 56.25vw + var(--hero-copy-zone));
    max-height: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding-bottom: 120px;
  }

  .home-featured-primary .hero-content {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: calc(var(--hero-art-top) + 56.25cqw + 16px) var(--page-gutter) 0;
  }

  /* 横图：放在页头下面，整张宽度、按原比例 */
  .home-featured-primary[data-art-shape="landscape"] .hero-media img,
  .home-featured-primary[data-art-shape="square"] .hero-media img,
  .detail-hero .detail-background img {
    top: var(--hero-art-top);
    bottom: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    animation: none !important;
    transform: none !important;
  }

  .home-featured-primary[data-art-shape="landscape"] .hero-shade,
  .home-featured-primary[data-art-shape="square"] .hero-shade {
    background: linear-gradient(
      180deg,
      rgba(4, 6, 26, 0.55) 0,
      rgba(4, 6, 26, 0.2) var(--hero-art-top),
      transparent calc(var(--hero-art-top) + 10px),
      transparent calc(var(--hero-art-top) + 56.25cqw - 14px),
      rgba(4, 6, 26, 0.62) calc(var(--hero-art-top) + 56.25cqw + 26px),
      rgba(4, 6, 26, 0.84) 78%,
      var(--night) 100%
    );
  }

  /* 详情页：返回在最上面，下面一整张剧照，再下面是片名和简介 */
  .detail-hero {
    --hero-art-top: calc(88px + 56px);
    min-height: 0;
    align-items: start;
  }

  .detail-content {
    padding-top: calc(var(--hero-art-top) - 56px);
  }

  .detail-content .back-command {
    display: flex;
    width: max-content;
    margin-bottom: calc(56.25cqw + 32px);
  }

  /* 竖图放在横框里：居中，两边是虚化底 */
  .home-featured-primary .hero-media[data-art-bars="x"] img,
  .detail-hero .detail-background[data-art-bars="x"] img {
    object-position: 50% 50% !important;
  }

  .detail-overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 6, 26, 0.55) 0,
      rgba(4, 6, 26, 0.3) var(--hero-art-top),
      transparent calc(var(--hero-art-top) + 10px),
      transparent calc(var(--hero-art-top) + 56.25cqw - 14px),
      rgba(4, 6, 26, 0.66) calc(var(--hero-art-top) + 56.25cqw + 30px),
      rgba(4, 6, 26, 0.86) 80%,
      var(--night) 100%
    );
  }
}

@media (max-width: 640px) {
  .home-featured-primary,
  .detail-hero {
    --hero-art-top: 60px;
  }

  /* 高度按“两行片名”留够，轮播换片时整块不忽高忽低 */
  .home-featured-primary {
    --hero-copy-zone: 462px;
    padding-bottom: 96px;
  }

  .detail-hero {
    --hero-art-top: calc(60px + 52px);
  }

  .detail-content {
    padding-top: calc(var(--hero-art-top) - 52px);
  }

  .detail-content .back-command {
    min-height: 36px;
    margin-bottom: calc(56.25cqw + 28px);
  }

  /* 手机竖图（专门做的手机首屏图）照旧铺满整屏，字压在图下半截 */
  .home-featured-primary[data-art-shape="portrait"] .hero-media img {
    object-position: var(--mobile-hero-focus, center top);
  }

  .home-featured-primary .hero-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}