:root {
  color-scheme: dark;
  --bg: #08080b;
  --surface: #15151b;
  --surface-2: #202029;
  --surface-3: #2b2b35;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.36);
  --line: rgba(255, 255, 255, 0.1);
  --pink: #ff3f82;
  --violet: #8f50ff;
  --gold: #ffc600;
  --green: #20d67b;
  --danger: #ff4e62;
  --page-width: 430px;
  --nav-height: 66px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media (display-mode: standalone) and (max-width: 1023px) {
  html.android-chrome {
    --safe-top: max(env(safe-area-inset-top, 0px), 24px);
  }
}

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

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #050506;
  color: var(--text);
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 35% 0, rgba(82, 43, 112, 0.2), transparent 38%),
    #050506;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

button {
  color: inherit;
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#app {
  position: relative;
  width: 100%;
  max-width: var(--page-width);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.55);
}

.app-shell,
.app {
  position: relative;
  min-height: 100dvh;
  background: var(--bg);
}

.screen,
.page,
.main-content {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--bg);
}

.page-scroll,
.scroll-content {
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.content-pad {
  padding: 14px;
}

.safe-top {
  padding-top: var(--safe-top);
}

.muted,
.secondary-text,
.helper {
  color: var(--muted);
}

.empty-state {
  display: grid;
  min-height: 42dvh;
  place-content: center;
  justify-items: center;
  padding: 36px 24px;
  color: var(--muted);
  text-align: center;
}

.empty-state img {
  width: 90px;
  margin-bottom: 14px;
  opacity: 0.72;
}

/* Splash */
.splash,
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  width: 100%;
  max-width: var(--page-width);
  min-height: 100dvh;
  margin: auto;
  place-items: center;
  overflow: hidden;
  background: #09040e url("../public/assets/splash_bg.png") center / cover no-repeat;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.splash::after,
.splash-screen::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(8, 0, 13, 0.08), rgba(8, 0, 13, 0.16) 52%, rgba(8, 0, 13, 0.96));
}

.splash-logo {
  position: relative;
  z-index: 1;
  width: min(58vw, 250px);
  filter: drop-shadow(0 7px 22px rgba(0, 0, 0, 0.46));
}

.splash-brand {
  position: absolute;
  z-index: 2;
  bottom: calc(44px + var(--safe-bottom));
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  letter-spacing: 0.22em;
}

/* Shared bars and buttons */
.topbar,
.page-header,
.subpage-header {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: calc(50px + var(--safe-top));
  padding: var(--safe-top) 8px 0;
  background: rgba(8, 8, 11, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.page-title,
.topbar-title {
  overflow: hidden;
  font-size: 17px;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button,
.back-button,
.close-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  padding: 9px;
  place-items: center;
  background: transparent;
  border-radius: 999px;
}

.icon-button img,
.back-button img,
.close-button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.primary-button,
.gradient-button,
.login-button,
.action-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  background: linear-gradient(100deg, var(--violet), var(--pink));
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 63, 130, 0.18);
}

.primary-button:active,
.gradient-button:active,
.action-button:active,
.nav-item:active,
.poster-card:active,
.menu-row:active {
  transform: scale(0.98);
}

.secondary-button {
  min-height: 40px;
  padding: 0 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.danger-button {
  width: 100%;
  min-height: 46px;
  color: #ff626f;
  font-weight: 650;
  background: #1b1b20;
  border-radius: 12px;
}

/* Main navigation */
.bottom-nav,
.tabbar {
  position: fixed;
  z-index: 34;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: var(--page-width);
  height: calc(var(--nav-height) + var(--safe-bottom));
  margin: auto;
  padding: 6px 8px var(--safe-bottom);
  background:
    linear-gradient(180deg, rgba(18, 18, 24, 0.72), rgba(8, 8, 12, 0.96));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
}

.bottom-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-item,
.bottom-nav button {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px 4px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: transparent;
  border-radius: 14px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.16s ease;
}

.nav-item:active,
.bottom-nav button:active {
  transform: scale(0.94);
}

.nav-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  transition: color 0.18s ease, transform 0.18s ease;
}

.nav-icon-svg {
  display: block;
}

.nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.nav-item img,
.bottom-nav button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.72;
}

.nav-item.active,
.nav-item[aria-current="page"],
.bottom-nav button.active {
  color: #fff;
}

.nav-item.active .nav-icon,
.nav-item[aria-current="page"] .nav-icon {
  color: var(--pink);
  background: transparent;
  transform: none;
}

.nav-item.active .nav-label,
.nav-item[aria-current="page"] .nav-label {
  color: #fff;
  font-weight: 750;
}

.nav-item.active img,
.nav-item[aria-current="page"] img,
.bottom-nav button.active img {
  opacity: 1;
}

/* Home */
.home-page,
.home-screen {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(31, 10, 45, 0.38), transparent 210px),
    linear-gradient(180deg, #0e0813, #08080b 34%);
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(10px + var(--safe-top)) 12px 0;
  background: linear-gradient(180deg, rgba(14, 8, 19, 0.98) 55%, rgba(14, 8, 19, 0));
}

.home-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px auto;
  gap: 10px;
  align-items: center;
}

.search-bar,
.search-box {
  display: flex;
  min-width: 0;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.search-bar img,
.search-box img {
  width: 18px;
  height: 18px;
}

.search-bar input,
.search-box input {
  min-width: 0;
  flex: 1;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
}

.search-bar input::placeholder,
.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.round-action {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 7px;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.round-action img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.category-tabs,
.home-tabs,
.reward-tabs {
  display: flex;
  width: 100%;
  gap: 18px;
  margin-top: 7px;
  padding: 0 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar,
.home-tabs::-webkit-scrollbar,
.reward-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab,
.home-tabs button,
.reward-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 550;
  background: transparent;
  scroll-snap-align: center;
}

.category-tab.active,
.home-tabs button.active,
.reward-tab.active {
  color: #fff;
  font-size: 16px;
  font-weight: 750;
}

.category-tab.active::after,
.home-tabs button.active::after,
.reward-tab.active::after {
  position: absolute;
  right: 22%;
  bottom: 2px;
  left: 22%;
  height: 3px;
  content: "";
  background: #fff;
  border-radius: 999px;
}

/* Home channel tabs: horizontal scroll for 6 columns */
.home-page .category-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.home-page .category-tabs::-webkit-scrollbar {
  display: none;
}

.home-page .category-tab {
  display: grid;
  flex: 1 0 auto;
  min-width: 52px;
  min-height: 34px;
  place-items: center;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.02em;
  background: transparent;
  border-radius: 9px;
  scroll-snap-align: center;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.home-page .category-tab:active {
  transform: scale(0.97);
}

.home-page .category-tab.active {
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.18);
}

.home-page .category-tab.active::after {
  display: none;
}

.genre-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 2px 2px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

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

.genre-chip {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  scroll-snap-align: start;
}

.genre-chip small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 500;
}

.genre-chip.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

.list-pager {
  display: grid;
  place-items: center;
  padding: 18px 0 28px;
  position: relative;
  z-index: 2;
}

.list-pager button {
  min-height: 44px;
  min-width: 140px;
  padding: 0 22px;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
}

.list-pager.muted,
.list-pager span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}

.home-browse-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.home-browse-entry span {
  font-size: 13px;
  font-weight: 700;
}

.home-browse-entry small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.home-browse-entry em {
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}

.library-page .page-scroll {
  padding: 0 12px 88px;
}

.library-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 4px 0 10px;
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.96), rgba(8, 8, 11, 0.88));
  backdrop-filter: blur(12px);
}

.library-sort-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  scrollbar-width: none;
}

.library-sort-tabs::-webkit-scrollbar {
  display: none;
}

.library-sort-tab {
  flex: 1 0 auto;
  min-height: 34px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 650;
  background: transparent;
  border-radius: 9px;
}

.library-sort-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.library-count {
  margin: 8px 2px 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}

.library-content {
  padding-top: 4px;
}

.library-page .page-header {
  margin: 0 -4px;
}

.section-heading.home-all-jump {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
}

.section-heading.home-all-jump .home-tab-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
}

.home-hot-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-hot-trio-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
}

.home-hot-trio-card .poster-image {
  aspect-ratio: 0.72;
  border-radius: 12px;
}

.home-hot-trio-card strong,
.home-hot-trio-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hot-trio-card strong {
  font-size: 12px;
  font-weight: 700;
}

.home-hot-trio-card small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
}

.home-tab-panel {
  min-height: 180px;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.home-tab-panel.is-loading {
  opacity: 0.28;
  pointer-events: none;
  filter: saturate(0.85);
}

.home-tab-panel.is-enter {
  animation: home-tab-fade-in 0.36s ease;
}

@keyframes home-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-tab-panel,
  .home-tab-panel.is-enter {
    transition: none;
    animation: none;
  }
}

.home-content {
  padding: 2px 12px 88px;
}

.hero-banner,
.feature-banner {
  position: relative;
  min-height: 176px;
  margin: 8px 0 18px;
  overflow: hidden;
  background: #191220 url("../public/assets/top_bg.png") center / cover;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.hero-banner::after,
.feature-banner::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.84));
}

.hero-copy {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  left: 14px;
}

.hero-copy h2 {
  margin-bottom: 5px;
  font-size: 21px;
}

.hero-copy p {
  color: var(--muted);
  font-size: 12px;
}

.mobile-carousel {
  position: relative;
  margin: 8px 0 18px;
}

.mobile-carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
  touch-action: pan-y;
}

.mobile-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mobile-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 188px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: #15101c;
  border: 0;
}

.mobile-carousel .mobile-carousel-media,
.mobile-carousel .mobile-carousel-media img,
.mobile-carousel .mobile-carousel-shade {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.mobile-carousel .mobile-carousel-media {
  z-index: 0;
  overflow: hidden;
  background-color: #15101c;
  background-size: cover;
  background-position: center;
}

.mobile-carousel .mobile-carousel-media img {
  z-index: 1;
  object-fit: cover;
}

.mobile-carousel .mobile-carousel-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(8, 5, 13, 0.55), transparent 48%),
    linear-gradient(180deg, transparent 28%, rgba(8, 5, 13, 0.88) 100%);
  pointer-events: none;
}

.mobile-carousel-copy {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 16px;
  left: 14px;
  display: grid;
  gap: 5px;
}

.mobile-carousel-copy small {
  width: fit-content;
  padding: 3px 8px;
  color: #fff;
  font-size: 10px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  border-radius: 999px;
}

.mobile-carousel-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mobile-carousel-copy em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-style: normal;
}

.mobile-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.mobile-carousel-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  transition: width 0.25s ease, background 0.25s ease;
}

.mobile-carousel-dots button.active {
  width: 16px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
}

.section-block {
  margin: 16px 0 22px;
}

.section-heading,
.section-title-row {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-heading h2,
.section-heading h3,
.section-title-row h2 {
  font-size: 18px;
  font-weight: 750;
}

.section-heading button,
.section-more {
  color: var(--muted);
  font-size: 12px;
  background: transparent;
}

.poster-grid,
.drama-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 9px;
}

.poster-card,
.drama-card {
  min-width: 0;
  background: transparent;
  transition: transform 0.14s ease;
}

.poster-image,
.poster-art,
.drama-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 0.69;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(89, 37, 129, 0.18), rgba(0, 0, 0, 0.42)),
    url("../public/assets/splash_bg.png") 18% 8% / 570% auto no-repeat;
  border-radius: 7px;
}

.poster-card:nth-child(6n + 2) .poster-image,
.poster-card:nth-child(6n + 2) .poster-art,
.drama-card:nth-child(6n + 2) .drama-cover { background-position: 47% 10%; }
.poster-card:nth-child(6n + 3) .poster-image,
.poster-card:nth-child(6n + 3) .poster-art,
.drama-card:nth-child(6n + 3) .drama-cover { background-position: 73% 16%; }
.poster-card:nth-child(6n + 4) .poster-image,
.poster-card:nth-child(6n + 4) .poster-art,
.drama-card:nth-child(6n + 4) .drama-cover { background-position: 22% 44%; }
.poster-card:nth-child(6n + 5) .poster-image,
.poster-card:nth-child(6n + 5) .poster-art,
.drama-card:nth-child(6n + 5) .drama-cover { background-position: 51% 48%; }
.poster-card:nth-child(6n) .poster-image,
.poster-card:nth-child(6n) .poster-art,
.drama-card:nth-child(6n) .drama-cover { background-position: 81% 55%; }

.poster-image > img,
.poster-art > img,
.drama-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster-image .badge,
.poster-art .badge,
.rank-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 3px 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  background: linear-gradient(90deg, #ff554a, #ff2f83);
  border-radius: 4px;
}

.episode-count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  background: rgba(0, 0, 0, 0.56);
  border-radius: 4px;
}

.poster-title,
.drama-title {
  overflow: hidden;
  margin-top: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 590;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-meta,
.drama-meta {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-cards {
  display: grid;
  grid-auto-columns: 43%;
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.horizontal-cards > * {
  scroll-snap-align: start;
}

.home-tab-hint {
  color: var(--muted);
  font-size: 12px;
}

.home-topic-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 4px 0 14px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.home-topic-chips::-webkit-scrollbar {
  display: none;
}

.home-topic-chips button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.home-feature-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px;
  text-align: left;
  background: linear-gradient(135deg, rgba(78, 28, 98, 0.55), rgba(20, 14, 28, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.home-feature-art {
  aspect-ratio: 0.72;
  border-radius: 10px;
}

.home-feature-copy {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.home-feature-copy small {
  width: fit-content;
  padding: 2px 8px;
  color: #fff;
  font-size: 10px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  border-radius: 999px;
}

.home-feature-copy strong {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-feature-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-explore-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-mosaic-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  text-align: left;
  background: transparent;
}

.home-mosaic-card .poster-image {
  aspect-ratio: 1.2;
  border-radius: 12px;
}

.home-mosaic-card strong {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-new-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.home-new-rail::-webkit-scrollbar {
  display: none;
}

.home-new-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  text-align: left;
  background: transparent;
}

.home-new-card .poster-image {
  aspect-ratio: 0.72;
  border-radius: 12px;
}

.home-new-card span {
  display: grid;
  gap: 4px;
}

.home-new-card i {
  width: fit-content;
  padding: 2px 6px;
  color: #1a0f08;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(90deg, #ffd28a, #ff8d5c);
  border-radius: 999px;
}

.home-new-card strong {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-new-card small,
.home-new-row small,
.home-rank-copy small,
.home-classic-row small,
.home-female-card small {
  color: var(--muted);
  font-size: 11px;
}

.home-new-list,
.home-rank-list,
.home-classic-list {
  display: grid;
  gap: 10px;
}

.home-new-row,
.home-rank-row,
.home-classic-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.home-rank-row {
  grid-template-columns: 28px 64px minmax(0, 1fr) auto;
}

.home-classic-row {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: stretch;
  padding: 10px;
}

.home-row-thumb {
  width: 64px;
  aspect-ratio: 0.72;
  border-radius: 8px;
}

.home-classic-art {
  width: 86px;
  aspect-ratio: 0.72;
  border-radius: 10px;
}

.home-new-row span,
.home-rank-copy,
.home-classic-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-new-row strong,
.home-rank-copy b,
.home-classic-row strong,
.home-female-card strong {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-new-row em,
.home-rank-row em {
  color: var(--gold);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.home-rank-index {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 800;
}

.home-rank-row:nth-child(-n + 3) .home-rank-index {
  color: #ff8d5c;
}

.home-classic-row em {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-ai-banner {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 16px 14px;
  background:
    radial-gradient(circle at 85% 20%, rgba(90, 160, 255, 0.28), transparent 42%),
    linear-gradient(135deg, rgba(28, 48, 92, 0.92), rgba(14, 16, 28, 0.96));
  border: 1px solid rgba(140, 190, 255, 0.14);
  border-radius: 16px;
}

.home-ai-banner small {
  width: fit-content;
  padding: 3px 8px;
  color: #fff;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.home-ai-banner strong {
  font-size: 18px;
}

.home-ai-banner p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.category-drawer,
.drawer {
  position: fixed;
  z-index: 61;
  top: 0;
  right: max(0px, calc((100vw - var(--page-width)) / 2));
  bottom: 0;
  width: min(78vw, 280px);
  padding: calc(28px + var(--safe-top)) 14px 24px;
  background: #38383e;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.42);
  animation: drawer-in 0.25s ease both;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 18px;
  font-size: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.drawer-chip {
  min-height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}

.drawer-chip.active {
  background: linear-gradient(100deg, var(--violet), var(--pink));
}

/* Vertical recommendations and player */
.shorts-feed,
.short-video-page,
.video-player,
.player-page {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.shorts-track,
.shorts-feed {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}

.short-card,
.short-item,
.player-slide {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #080808;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.short-card video,
.short-card .video-poster,
.player-slide video,
.player-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

/* 推荐页：未识别前/横屏用 contain，避免横片被当竖屏裁切 */
.short-card[data-video-orientation="unknown"] .short-video,
.short-card[data-video-orientation="unknown"] .video-poster,
.short-card[data-video-orientation="landscape"] .short-video,
.short-card[data-video-orientation="landscape"] .video-poster,
.short-card.is-landscape .short-video,
.short-card.is-landscape .video-poster {
  object-fit: contain;
  background: #000;
}

.short-card[data-video-orientation="portrait"] .short-video,
.short-card[data-video-orientation="portrait"] .video-poster,
.short-card.is-portrait .short-video,
.short-card.is-portrait .video-poster {
  object-fit: cover;
}

.short-card[data-video-orientation="landscape"] .short-info,
.short-card.is-landscape .short-info {
  right: 78px;
  bottom: calc(28px + var(--safe-bottom));
}

.short-card[data-video-orientation="landscape"] .short-info p,
.short-card.is-landscape .short-info p {
  -webkit-line-clamp: 1;
}

.short-card[data-video-orientation="landscape"] .action-rail,
.short-card.is-landscape .action-rail {
  bottom: calc(88px + var(--safe-bottom));
  gap: 12px;
}

.short-card video:not([src]),
.player-slide video:not([src]) {
  opacity: 0;
}

.short-card::after,
.player-slide::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 25%, transparent 53%, rgba(0, 0, 0, 0.92));
}

.player-overlay,
.short-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.player-overlay button,
.short-overlay button,
.player-overlay [role="button"],
.short-overlay [role="button"] {
  pointer-events: auto;
}

.player-top {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-top .back-button {
  background: rgba(0, 0, 0, 0.18);
}

.speed-button {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 999px;
}

.player-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}

.fullscreen-button {
  width: 36px;
  height: 36px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.speed-button img {
  width: 18px;
}

.action-rail {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: calc(126px + var(--safe-bottom));
  display: grid;
  justify-items: center;
  gap: 17px;
}

.rail-action {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #fff;
  font-size: 11px;
  background: transparent;
}

.rail-action img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}

.rail-action.active img {
  transform: scale(1.06);
}

.short-info,
.player-info {
  position: absolute;
  z-index: 4;
  right: 64px;
  bottom: calc(82px + var(--safe-bottom));
  left: 14px;
}

.short-info h2,
.player-info h2 {
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 750;
  text-shadow: 0 2px 8px #000;
}

.short-info p,
.player-info p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 2px 7px #000;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 推荐页：标题避开右侧操作栏与底部导航，避免被遮挡 */
.shorts-page .action-rail {
  right: 8px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 56px);
  z-index: 6;
  width: 54px;
  gap: 14px;
}

.shorts-page .short-info {
  right: 78px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
  left: 14px;
  z-index: 5;
  max-width: calc(100% - 96px);
  padding-right: 2px;
}

.shorts-page .short-info h2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.shorts-page .short-info p {
  -webkit-line-clamp: 2;
  max-width: 100%;
}

.shorts-page .short-card[data-video-orientation="landscape"] .short-info,
.shorts-page .short-card.is-landscape .short-info {
  right: 78px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
}

.shorts-page .short-card[data-video-orientation="landscape"] .action-rail,
.shorts-page .short-card.is-landscape .action-rail {
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 56px);
}

.episode-bar {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: calc(18px + var(--safe-bottom));
  left: 12px;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  backdrop-filter: blur(12px);
}

.player-progress-wrap {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: calc(166px + var(--safe-bottom));
  left: 14px;
  display: block;
  height: 20px;
  pointer-events: auto;
}

.player-progress {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  outline: none;
  --progress: 0%;
}

.player-progress::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(
    to right,
    #fff 0%,
    #fff var(--progress),
    rgba(255, 255, 255, 0.28) var(--progress),
    rgba(255, 255, 255, 0.28) 100%
  );
  border-radius: 99px;
}

.player-progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.player-progress:hover::-webkit-slider-thumb,
.player-progress:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
  transform: scale(1.08);
}

.player-progress::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 99px;
}

.player-progress::-moz-range-progress {
  height: 3px;
  background: #fff;
  border-radius: 99px;
}

.player-progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.center-play {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  padding: 0;
  background: url("../public/assets/ic_player.png") center / contain no-repeat;
  border-radius: 50%;
  opacity: 0.88;
  transform: translate(-50%, -50%);
}

.unlock-card {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: min(86%, 330px);
  padding: 24px 18px;
  text-align: center;
  background: rgba(20, 20, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  transform: translate(-50%, -50%);
}

.unlock-card h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.unlock-card p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
}

.unlock-actions {
  display: grid;
  gap: 10px;
}

/* Rewards */
.rewards-page,
.reward-page {
  min-height: 100dvh;
  padding: calc(24px + var(--safe-top)) 12px calc(86px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 8%, rgba(84, 25, 109, 0.36), transparent 28%),
    #000;
}

.reward-tabs {
  justify-content: center;
  gap: 34px;
  margin: 0 0 14px;
}

.coin-hero,
.reward-hero {
  position: relative;
  display: grid;
  min-height: 154px;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  text-align: center;
}

.coin-hero::before,
.reward-hero::before {
  position: absolute;
  width: 170px;
  height: 170px;
  content: "";
  background: url("../public/assets/rewards_award_bg_im.png") center / contain no-repeat;
  opacity: 0.7;
}

.coin-hero > *,
.reward-hero > * {
  position: relative;
}

.coin-value {
  color: var(--gold);
  font-size: 32px;
  font-weight: 800;
}

.reward-card,
.task-card,
.invite-panel {
  margin: 12px 0;
  padding: 14px;
  background: linear-gradient(145deg, rgba(56, 34, 65, 0.95), rgba(27, 22, 31, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.reward-download-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.reward-download-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: var(--gold);
  font-size: 22px;
  background: rgba(255, 198, 0, 0.1);
  border-radius: 10px;
}

.reward-download-card > div { min-width: 0; flex: 1; }
.reward-download-card h2 { font-size: 14px; }
.reward-download-card p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.reward-download-action,
.reward-download-pending {
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 9px;
}
.reward-download-action { color: #181008; background: var(--gold); }
.reward-download-pending { color: var(--muted); background: rgba(255, 255, 255, 0.07); }

@media (max-width: 430px) {
  .reward-download-card { flex-wrap: wrap; }
  .reward-download-action,
  .reward-download-pending { margin-left: 50px; }
}

.sign-header,
.reward-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sign-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.sign-day {
  display: grid;
  min-height: 62px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.sign-day img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sign-day.active,
.sign-day.done {
  color: #fff;
  background: rgba(255, 198, 0, 0.12);
  border-color: rgba(255, 198, 0, 0.7);
}

.ad-reward-button,
.invite-button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: #fff;
  font-weight: 650;
  background: url("../public/assets/look_ad_bg.png") center / 100% 100% no-repeat;
  border-radius: 8px;
}

.ad-reward-button img {
  width: 24px;
}

.task-list {
  display: grid;
  gap: 4px;
}

.task-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

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

.task-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.task-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.task-copy strong {
  display: block;
  font-size: 14px;
}

.task-copy small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--gold);
  font-size: 11px;
}

.task-state {
  min-width: 62px;
  padding: 7px 10px;
  color: #fff;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}

.task-state.ready {
  color: #321900;
  background: var(--gold);
}

.invite-hero {
  padding-top: 16px;
  text-align: center;
}

.invite-hero h2 {
  font-size: 24px;
}

.invite-hero img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
}

.invite-steps {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.8;
}

/* Profile */
.profile-page {
  min-height: 100dvh;
  padding: calc(28px + var(--safe-top)) 12px calc(86px + var(--safe-bottom));
  background:
    radial-gradient(circle at 80% 0, rgba(214, 65, 171, 0.18), transparent 32%),
    linear-gradient(180deg, #16101c, #08080b 43%);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 6px 4px 16px;
}

.avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: cover;
  background: #2a2930;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.profile-name {
  font-size: 19px;
  font-weight: 750;
  background: linear-gradient(90deg, #ba38da, #f0a05d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.profile-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.wallet-strip {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
  padding: 0 14px;
  background: linear-gradient(120deg, rgba(77, 42, 90, 0.95), rgba(44, 37, 48, 0.96));
  border-radius: 12px;
}

.coin-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-weight: 750;
}

.coin-inline img {
  width: 24px;
  height: 24px;
}

.vip-carousel {
  display: grid;
  grid-auto-columns: 87%;
  grid-auto-flow: column;
  gap: 10px;
  margin: 2px -12px 16px;
  padding: 0 12px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.vip-card {
  position: relative;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  background: #ede5d9 url("../public/assets/my_banner_bg1.png") center / cover;
  border-radius: 14px;
  scroll-snap-align: center;
}

.vip-card:nth-child(2) { background-image: url("../public/assets/my_banner_bg2.png"); }
.vip-card:nth-child(3) { background-image: url("../public/assets/my_banner_bg3.png"); }
.vip-card:nth-child(4) { background-image: url("../public/assets/my_banner_bg4.png"); }

.vip-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.52), transparent 82%);
}

.vip-card > * {
  position: relative;
  z-index: 1;
}

.vip-badge {
  display: inline-block;
  padding: 3px 7px;
  color: #231605;
  font-size: 10px;
  font-weight: 750;
  background: #ffe19a;
  border-radius: 4px;
}

.vip-card h3 {
  margin-top: 12px;
  font-size: 21px;
}

.vip-price {
  margin-top: 11px;
  font-size: 18px;
  font-weight: 800;
}

.profile-menu,
.settings-list,
.list-card {
  padding: 2px 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.menu-row,
.setting-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 5px;
  color: #fff;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

.menu-row > img:first-child,
.setting-row > img:first-child {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.menu-row > img:last-child,
.setting-row > img:last-child {
  width: 11px;
  height: 11px;
  object-fit: contain;
  opacity: 0.6;
}

.setting-row:not(:has(img)):not(:has(.menu-icon)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Subpages, search and records */
.subpage {
  min-height: 100dvh;
  padding-bottom: var(--safe-bottom);
  background: #0b0b0e;
}

.subpage-content {
  padding: 14px 12px 36px;
}

.search-page .page-header {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px;
  padding-right: 12px;
}

.search-page .search-box {
  width: 100%;
}

.search-results {
  display: grid;
  gap: 12px;
  padding: 14px 12px;
}

.search-result,
.record-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  min-height: 120px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 10px;
}

.search-result .record-cover,
.record-item .record-cover {
  width: 90px;
  height: 120px;
  aspect-ratio: auto;
  flex: 0 0 auto;
  border-radius: 7px;
}

.search-result .record-cover > img,
.record-item .record-cover > img,
.search-result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.result-copy h3,
.record-copy h3 {
  margin: 4px 0 8px;
  font-size: 16px;
}

.result-copy p,
.record-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.tag {
  padding: 3px 7px;
  color: #d7c7e5;
  font-size: 10px;
  background: rgba(154, 79, 200, 0.18);
  border-radius: 4px;
}

.form-card {
  padding: 18px 14px;
  background: var(--surface);
  border-radius: 14px;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

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

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  color: #fff;
  background: #202027;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  outline: none;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.login-page {
  display: grid;
  min-height: 100dvh;
  padding: calc(30px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  align-content: center;
  justify-items: center;
  background:
    linear-gradient(180deg, rgba(8, 8, 11, 0.24), #08080b 80%),
    url("../public/assets/splash_bg.png") center / cover;
}

.login-logo {
  width: 150px;
  margin-bottom: 44px;
  filter: drop-shadow(0 7px 17px rgba(0, 0, 0, 0.45));
}

.google-login {
  display: flex;
  width: min(100%, 320px);
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #232323;
  font-size: 15px;
  font-weight: 650;
  background: #fff;
  border-radius: 999px;
}

.google-login img {
  width: 24px;
  height: 24px;
}

.google-login-host {
  display: flex;
  width: min(100%, 320px);
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

.legal-copy {
  max-width: 320px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

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

.language-option {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #fff;
  background: #19191f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.language-option.active {
  border-color: rgba(255, 63, 130, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 63, 130, 0.28);
}

.wallet-hero {
  padding: 24px;
  text-align: center;
  background: linear-gradient(140deg, #4c2657, #261a2e);
  border-radius: 15px;
}

.wallet-hero .amount {
  margin: 8px 0 18px;
  color: var(--gold);
  font-size: 34px;
  font-weight: 800;
}

.charge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.charge-card {
  position: relative;
  min-height: 120px;
  padding: 14px;
  text-align: center;
  background: #1a1a21;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
}

.charge-card.selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 198, 0, 0.2);
}

.charge-card img {
  width: 40px;
  height: 42px;
  margin: 0 auto 8px;
  object-fit: contain;
}

.charge-card strong {
  display: block;
  color: var(--gold);
  font-size: 18px;
}

.transaction-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.transaction-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  background: #19191f;
  border-radius: 10px;
}

.transaction-row img {
  width: 28px;
}

.invite-level-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.invite-level-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.invite-level-summary strong { font-size: 12px; }
.invite-level-summary span { color: var(--muted); font-size: 11px; }
.invite-level-summary b { color: var(--gold); font-size: 15px; }

.transaction-row .source-detail,
.transaction-row .source-rule,
.transaction-row .source-time {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.transaction-row .source-detail { color: rgba(255, 255, 255, 0.78); }
.transaction-row .source-rule,
.transaction-row .source-time { color: rgba(255, 255, 255, 0.52); }

.positive { color: var(--green); }
.negative { color: #ff7482; }

.article,
.policy-content {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.85;
}

.article h2,
.policy-content h2 {
  margin: 22px 0 8px;
  color: #fff;
  font-size: 17px;
}

.about-logo {
  width: 84px;
  height: 84px;
  margin: 20px auto 10px;
  object-fit: contain;
  border-radius: 20px;
}

.about-version {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Sheets, dialog and transient state */
.backdrop,
.modal-backdrop,
.drawer-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(2px);
  animation: fade-in 0.2s ease both;
}

.modal,
.dialog {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 50%;
  width: min(calc(100vw - 42px), 360px);
  max-height: 82dvh;
  padding: 20px;
  overflow-y: auto;
  background: #23232a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.58);
  transform: translate(-50%, -50%);
  animation: dialog-in 0.22s ease both;
}

.modal h2,
.dialog h2,
.modal h3,
.dialog h3 {
  margin-bottom: 9px;
  text-align: center;
}

.modal p,
.dialog p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.mobile-guide-actions {
  align-items: stretch;
}

.mobile-guide-actions .primary-button,
.mobile-guide-actions .secondary-button,
.mobile-guide-download {
  display: grid;
  min-height: 44px;
  place-items: center;
  text-decoration: none;
}

.mobile-guide-steps {
  margin: 14px 0 4px;
  padding-left: 1.2em;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.7;
}

.mobile-guide-tip {
  position: fixed;
  z-index: 55;
  right: 12px;
  bottom: calc(var(--nav-height, 58px) + var(--safe-bottom, 0px) + 10px);
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 12px 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, rgba(36, 24, 48, 0.96), rgba(18, 18, 24, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  animation: mobile-guide-in 0.28s ease both;
}

.mobile-guide-tip.is-ios {
  border-color: rgba(255, 255, 255, 0.18);
}

.mobile-guide-tip.is-android {
  border-color: rgba(110, 220, 140, 0.28);
}

.mobile-guide-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.mobile-guide-copy strong {
  font-size: 14px;
  font-weight: 750;
}

.mobile-guide-copy span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.mobile-guide-tip-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.mobile-guide-tip-cta {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(100deg, var(--violet, #7b4dff), var(--pink, #ff3f82));
  border: 0;
  border-radius: 999px;
}

.mobile-guide-tip-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 20px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 50%;
}

@keyframes mobile-guide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.bottom-sheet,
.episode-sheet,
.share-sheet {
  position: fixed;
  z-index: 70;
  right: max(0px, calc((100vw - var(--page-width)) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - var(--page-width)) / 2));
  max-height: 78dvh;
  padding: 18px 14px calc(18px + var(--safe-bottom));
  overflow-y: auto;
  background: #222228;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 55px rgba(0, 0, 0, 0.5);
  animation: sheet-in 0.25s ease both;
}

.sheet-handle {
  width: 38px;
  height: 4px;
  margin: -5px auto 14px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 99px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

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

.episode-button {
  position: relative;
  min-height: 42px;
  color: rgba(255, 255, 255, 0.82);
  background: #303038;
  border-radius: 8px;
}

.episode-button.active {
  color: #fff;
  background: linear-gradient(100deg, var(--violet), var(--pink));
}

.episode-button.locked::after {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 12px;
  height: 10px;
  content: "";
  background: url("../public/assets/video_dia_list_suo.png") center / contain no-repeat;
}

.share-poster-preview {
  display: grid;
  gap: 14px;
  margin: 12px 4px 20px;
  padding: 12px;
  background: linear-gradient(120deg, #291b45, #8b235b);
  border-radius: 16px;
}

.share-poster-preview > img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  max-height: 220px;
  object-fit: contain;
  background: #11111c;
  border-radius: 9px;
}

.share-poster-preview > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.share-poster-preview small,
.share-poster-preview span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.share-poster-preview strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 8px;
  padding: 4px 6px 8px;
}

.share-option {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  background: transparent;
}

.share-option:disabled {
  opacity: 0.48;
  cursor: wait;
}

.share-option img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1 / 1;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border-radius: 50%;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 18px;
  bottom: calc(90px + var(--safe-bottom));
  left: 18px;
  width: max-content;
  max-width: min(calc(100vw - 36px), 360px);
  margin: auto;
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  background: rgba(42, 42, 48, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateY(10px);
  transition: 0.22s ease;
}

.toast.show,
.toast.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.toast.reward {
  max-width: min(calc(100vw - 36px), 420px);
  padding: 14px 20px;
  color: #fff9dc;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  white-space: pre-line;
  background: linear-gradient(135deg, rgba(105, 55, 8, 0.98), rgba(171, 105, 13, 0.98));
  border-color: rgba(255, 224, 139, 0.85);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 190, 66, 0.28);
}

.loading,
.spinner-wrap {
  display: grid;
  min-height: 48dvh;
  place-items: center;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.api-notice {
  margin: 8px 12px 0;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.63);
  font-size: 10px;
  line-height: 1.5;
  background: rgba(255, 198, 0, 0.08);
  border: 1px solid rgba(255, 198, 0, 0.16);
  border-radius: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes dialog-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
}

@media (min-width: 700px) {
  body {
    padding: 22px 0;
  }

  #app,
  .app-shell,
  .app,
  .screen,
  .page,
  .main-content,
  .shorts-feed,
  .short-card,
  .short-item,
  .player-page,
  .player-slide {
    min-height: calc(100dvh - 44px);
    height: calc(100dvh - 44px);
  }

  #app {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
  }

  .bottom-nav,
  .tabbar {
    bottom: 22px;
    border-radius: 0 0 24px 24px;
  }

  .category-drawer {
    top: 22px;
    bottom: 22px;
    right: calc((100vw - var(--page-width)) / 2);
    border-radius: 0 24px 24px 0;
  }

  .bottom-sheet,
  .episode-sheet,
  .share-sheet {
    bottom: 22px;
    border-radius: 18px 18px 24px 24px;
  }
}

@media (max-width: 360px) {
  .poster-grid,
  .drama-grid {
    gap: 12px 7px;
  }

  .category-tabs,
  .home-tabs {
    gap: 14px;
  }

  .share-options {
    gap: 16px 10px;
  }
}

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

/* Adaptive player experience: one media core, mobile immersion and desktop workspace */
.desktop-player-header,
.desktop-player-panel {
  display: none;
}

.player-workspace,
.player-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.player-stage {
  touch-action: pan-y;
}

.player-stage.is-swiping {
  touch-action: none;
}

.player-swipe-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  will-change: transform;
}

.episode-swipe-preview,
.episode-current-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background: #08080b;
  contain: layout paint;
}

.episode-swipe-preview {
  will-change: transform;
}

.episode-swipe-preview > img,
.episode-current-preview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.episode-swipe-caption {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 7px;
  padding: max(70px, env(safe-area-inset-top)) 20px 40px;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, .82), transparent);
}

.episode-swipe-caption strong { font-size: 22px; }
.episode-swipe-caption span { font-size: 13px; color: #e0e0e7; }

.player-page .player-stage.is-swiping .mobile-player-overlay,
.player-page .player-stage.is-episode-settling .mobile-player-overlay {
  opacity: 0;
  visibility: hidden;
}

.player-stage.is-swiping .player-feedback,
.player-stage.is-episode-settling .player-feedback {
  visibility: hidden;
}

.player-swipe-layer .player-media,
.player-swipe-layer .series-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Keep the stage fixed when a horizontal end card appears in a portrait episode. */
.player-swipe-layer .series-video {
  object-fit: contain;
}

.player-stage.is-landscape .player-media,
.player-stage.is-landscape .series-video,
.player-page[data-video-orientation="landscape"] .player-swipe-layer .series-video,
.player-page[data-video-orientation="landscape"] .player-swipe-layer .player-media {
  object-fit: contain;
  background: #000;
}

.player-page[data-video-orientation="landscape"] .player-swipe-layer {
  background: #050507;
}

/* 移动端横屏片：上下留黑边，避免被 cover 裁切 */
@media (max-width: 1023px) {
  .player-page[data-video-orientation="landscape"] .player-stage {
    background: #000;
  }

  .player-page[data-video-orientation="landscape"] .player-info {
    max-width: calc(100% - 28px);
  }

  .player-page[data-video-orientation="landscape"] .action-rail {
    top: 42%;
  }
}

.player-stage > .media-tap-zone {
  z-index: 3;
}

.player-stage > .player-feedback {
  z-index: 5;
}

.desktop-player-panel .watch-coin-status {
  margin: 8px 0 14px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.4;
}

.desktop-player-panel .watch-coin-status[data-state="earned"] { color: #d5bd7e; }
.desktop-player-panel .watch-coin-status[data-state="error"] { color: #ff9a9f; }

.player-stage > .player-overlay,
.player-stage > .unlock-card,
.player-stage > .swipe-hint {
  z-index: 6;
}

.media-tap-zone {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.short-state,
.player-feedback {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.short-state-icon,
.player-feedback-action {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #fff;
  font-size: 27px;
  background: rgba(8, 8, 12, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.short-state-icon:empty {
  opacity: 0;
  transform: scale(0.8);
}

.short-card[data-short-status="buffering"] .short-state::after {
  width: 30px;
  height: 30px;
  content: "";
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.short-card[data-short-status="buffering"] .short-state-icon {
  display: none;
}

.rail-symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  font-size: 21px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
}

.player-feedback .spinner,
.player-feedback .buffering-copy,
.player-feedback-action,
.player-error {
  display: none;
}

.player-page[data-player-status="buffering"] .player-feedback { gap: 8px; }
.player-page[data-player-status="buffering"] .player-feedback .buffering-copy {
  display: block;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  text-shadow: 0 1px 6px #000;
}

.player-feedback-action {
  pointer-events: auto;
}

.player-page[data-player-status="loading"] .player-feedback .spinner,
.player-page[data-player-status="buffering"] .player-feedback .spinner {
  display: block;
}

.player-page[data-player-status="playing"] .player-feedback .spinner,
.player-page[data-player-status="paused"] .player-feedback .spinner,
.player-page[data-player-status="ended"] .player-feedback .spinner,
.player-page[data-player-status="idle"] .player-feedback .spinner,
.player-page[data-player-status="error"] .player-feedback .spinner {
  display: none !important;
}

.player-page[data-player-status="paused"] .player-feedback-action,
.player-page[data-player-status="ended"] .player-feedback-action,
.player-page[data-player-status="idle"] .player-feedback-action {
  display: grid;
}

.player-page[data-player-status="error"] .player-feedback {
  width: min(82%, 320px);
}

.player-page[data-player-status="error"] .player-error {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 18px;
  color: #fff;
  text-align: center;
  pointer-events: auto;
  background: rgba(20, 20, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(14px);
}

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

.player-error button {
  min-height: 38px;
  margin-top: 5px;
  color: #fff;
  background: linear-gradient(100deg, var(--violet), var(--pink));
  border-radius: 999px;
}

.mobile-player-overlay {
  transition: opacity 0.22s ease;
}

.controls-hidden .mobile-player-overlay {
  opacity: 0;
  visibility: hidden;
}

.controls-visible .mobile-player-overlay,
.player-page[data-player-status="paused"] .mobile-player-overlay,
.player-page[data-player-status="buffering"] .mobile-player-overlay,
.player-page[data-player-status="error"] .mobile-player-overlay {
  opacity: 1;
  visibility: visible;
}

.player-control-bar {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: calc(67px + var(--safe-bottom));
  left: 12px;
  display: grid;
  grid-template-columns: 36px auto minmax(54px, 1fr) auto 36px 43px 36px;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 5px 7px;
  pointer-events: auto;
  background: rgba(7, 7, 10, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(12px);
}

.player-control {
  display: grid;
  min-width: 36px;
  min-height: 36px;
  padding: 5px;
  place-items: center;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  background: transparent;
  border-radius: 8px;
}

.player-control:hover,
.player-control:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.player-control img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.player-time {
  color: rgba(255, 255, 255, 0.83);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.player-control-bar .player-progress-wrap {
  position: static;
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
}

.player-control-bar .player-progress {
  height: 28px;
  cursor: pointer;
}

.player-control-bar .player-progress::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(
    to right,
    #fff 0%,
    #fff var(--progress),
    rgba(255, 255, 255, 0.28) var(--progress),
    rgba(255, 255, 255, 0.28) 100%
  );
}

.player-control-bar .player-progress::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  box-shadow: none;
}

.player-control-bar .player-progress:hover::-webkit-slider-thumb,
.player-control-bar .player-progress:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.mobile-player-overlay .player-info {
  bottom: calc(118px + var(--safe-bottom));
}

.mobile-player-overlay .action-rail {
  bottom: calc(180px + var(--safe-bottom));
}

.mobile-player-overlay .episode-bar {
  min-height: 44px;
}

.mobile-player-overlay .episode-bar img {
  width: 18px;
}

.swipe-hint {
  position: absolute;
  z-index: 4;
  top: calc(58px + var(--safe-top));
  left: 50%;
  padding: 5px 9px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.26);
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-50%);
  animation: swipe-hint 4s ease 0.6s 1;
}

@keyframes swipe-hint {
  0%, 100% { opacity: 0; transform: translate(-50%, 5px); }
  18%, 75% { opacity: 1; transform: translate(-50%, 0); }
}

.unlock-episode {
  display: inline-block;
  margin-bottom: 9px;
  padding: 4px 9px;
  color: #ffd7e5;
  font-size: 11px;
  background: rgba(255, 63, 130, 0.15);
  border-radius: 999px;
}

.unlock-balance {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.unlock-balance strong {
  color: var(--gold);
}

.unlock-card button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.episode-range-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 13px;
  overflow-x: auto;
}

.episode-autoplay-toggle {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  background: #303038;
  border-radius: 8px;
}

.episode-autoplay-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
}

.episode-range-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  background: #303038;
  border-radius: 999px;
}

.episode-range-tabs button.active {
  color: #fff;
  background: linear-gradient(100deg, var(--violet), var(--pink));
}

.episode-button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.episode-button i {
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  font-style: normal;
}

.episode-button.current,
.episode-button.active {
  color: #fff;
  background: linear-gradient(100deg, var(--violet), var(--pink));
}

.episode-button.seen {
  color: #b8ffdb;
  background: rgba(32, 214, 123, 0.14);
}

.episode-button.partial {
  color: #ffe097;
  background: rgba(255, 198, 0, 0.13);
}

.episode-button.locked {
  color: rgba(255, 255, 255, 0.58);
  background: #292930;
}

.episode-button.locked::after {
  display: none;
}

.episode-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
}

.episode-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.episode-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-current { background: var(--pink); }
.legend-partial { background: var(--gold); }
.legend-seen { background: var(--green); }
.legend-locked { background: #60606b; }

.ad-progress-modal {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.ad-progress-modal .spinner {
  display: block;
  min-height: 0;
}

.ad-progress-modal .ad-countdown {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--gold);
  font-size: 25px;
  background: rgba(255, 198, 0, 0.1);
  border-radius: 50%;
}

.ad-progress-modal small {
  color: var(--faint);
  font-size: 10px;
  line-height: 1.5;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --page-width: 768px; }

  body { padding: 0; }

  #app {
    max-width: 768px;
    border: 0;
    border-radius: 0;
  }

  .poster-grid,
  .drama-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .player-page,
  .player-slide,
  .shorts-feed,
  .short-card {
    height: 100dvh;
    min-height: 100dvh;
  }

  .player-stage {
    width: min(100%, 540px);
    margin: 0 auto;
  }
}

@media (min-width: 700px) and (max-width: 767px) {
  :root { --page-width: 100%; }
  body { padding: 0; }
  #app { max-width: none; border: 0; border-radius: 0; }
  .player-page,
  .player-slide,
  .shorts-feed,
  .short-card { height: 100dvh; min-height: 100dvh; }
}

@media (min-width: 1024px) {
  :root {
    --page-width: 100%;
    --nav-height: 68px;
  }

  .mobile-guide-tip {
    display: none !important;
  }

  html,
  body {
    min-height: 100%;
    padding: 0;
    background: #0b0b0f;
  }

  #app {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell,
  .app,
  .screen,
  .page,
  .main-content,
  .page-scroll {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    height: auto;
  }

  .bottom-nav,
  .tabbar {
    top: 0;
    bottom: auto;
    grid-template-columns: repeat(4, 132px);
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 68px;
    padding: 7px 22px;
    background: rgba(10, 10, 14, 0.95);
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
  }

  .nav-item,
  .bottom-nav button {
    grid-template-columns: 24px auto;
    align-content: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
  }

  .home-page .page-scroll,
  .rewards-page .page-scroll,
  .profile-page .page-scroll {
    padding-top: 68px;
  }

  .home-header {
    top: 68px;
    padding: 18px max(24px, calc((100vw - 1200px) / 2)) 0;
  }

  .home-content,
  .search-results,
  .subpage-content {
    width: min(1200px, calc(100vw - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .home-actions {
    max-width: 820px;
  }

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

  .horizontal-cards {
    grid-auto-columns: 190px;
  }

  .hero-banner,
  .feature-banner {
    min-height: 300px;
  }

  .rewards-page,
  .profile-page {
    padding-top: 68px;
  }

  .rewards-page .page-scroll,
  .profile-page .page-scroll {
    width: min(980px, calc(100vw - 48px));
    margin: 0 auto;
  }

  .profile-menu {
    margin-bottom: 40px;
  }

  .player-page,
  .player-workspace,
  .player-stage,
  .player-slide {
    height: auto;
    min-height: 0;
  }

  .player-page {
    min-height: 100dvh;
    overflow: auto;
    background:
      radial-gradient(circle at 28% 45%, rgba(73, 39, 93, 0.14), transparent 38%),
      #0d0d12;
  }

  .desktop-player-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    min-height: 68px;
    padding: 0 max(24px, calc((100vw - 1280px) / 2));
    background: rgba(9, 9, 13, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
  }

  .desktop-brand {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    background: transparent;
  }

  .desktop-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 9px;
  }

  .desktop-brand strong {
    font-size: 18px;
  }

  .desktop-player-header nav {
    display: flex;
    gap: 8px;
  }

  .desktop-player-header nav button,
  .desktop-back {
    min-height: 38px;
    padding: 0 14px;
    color: var(--muted);
    background: transparent;
    border-radius: 9px;
  }

  .desktop-player-header nav button:hover,
  .desktop-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .desktop-back {
    justify-self: end;
  }

  .player-workspace {
    display: grid;
    grid-template-columns: minmax(330px, 480px) minmax(440px, 1fr);
    gap: clamp(28px, 4vw, 64px);
    width: min(1280px, calc(100vw - 48px));
    min-height: calc(100dvh - 68px);
    margin: 0 auto;
    padding: 22px 0;
    align-items: center;
  }

  .player-stage {
    justify-self: center;
    width: min(100%, calc((100dvh - 112px) * 0.5625));
    min-width: 330px;
    max-width: 480px;
    height: min(calc(100dvh - 112px), 820px);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
  }

  .player-stage.is-landscape {
    width: min(100%, 920px);
    min-width: 420px;
    max-width: 920px;
    height: auto;
    max-height: min(calc(100dvh - 112px), 720px);
    aspect-ratio: 16 / 9;
  }

  /* 竖屏：左播放器 + 右简介/选集（默认 grid 两列） */
  /* 横屏：上播放器 + 下简介/选集 */
  /* 未知：先只显示舞台，等 metadata/缓存确认后再切终态，避免竖屏误切横屏布局 */
  .player-page[data-video-orientation="unknown"] .player-workspace {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    min-height: calc(100dvh - 68px);
  }

  .player-page[data-video-orientation="unknown"] .player-stage,
  .player-stage.is-orientation-pending {
    width: min(100%, calc((100dvh - 160px) * 0.5625));
    min-width: 300px;
    max-width: 480px;
    height: auto;
    max-height: min(calc(100dvh - 140px), 820px);
    aspect-ratio: 9 / 16;
  }

  .player-page[data-video-orientation="unknown"] .desktop-player-panel {
    display: none;
  }

  .player-page[data-video-orientation="landscape"] .player-workspace,
  .player-workspace:has(.player-stage.is-landscape) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    width: min(1080px, calc(100vw - 48px));
    min-height: auto;
    align-items: stretch;
    gap: 24px;
    padding: 22px 0 40px;
  }

  .player-page[data-video-orientation="landscape"] .player-stage,
  .player-workspace:has(.player-stage.is-landscape) .player-stage {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: min(calc(100dvh - 180px), 620px);
    aspect-ratio: 16 / 9;
  }

  .player-page[data-video-orientation="landscape"] .desktop-player-panel,
  .player-workspace:has(.player-stage.is-landscape) .desktop-player-panel {
    display: flex;
    height: auto;
    max-height: none;
    align-self: stretch;
    overflow: visible;
  }

  .player-page[data-video-orientation="portrait"] .desktop-player-panel {
    display: flex;
  }

  .player-page[data-video-orientation="landscape"] .desktop-episode-section,
  .player-workspace:has(.player-stage.is-landscape) .desktop-episode-section {
    margin-top: 8px;
    flex: none;
    overflow: visible;
  }

  .player-page[data-video-orientation="landscape"] .desktop-episode-grid,
  .player-workspace:has(.player-stage.is-landscape) .desktop-episode-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .player-page[data-video-orientation="landscape"] .desktop-description,
  .player-workspace:has(.player-stage.is-landscape) .desktop-description {
    -webkit-line-clamp: 5;
  }

  .player-stage video,
  .player-stage .player-media {
    object-fit: contain;
  }

  .mobile-player-overlay .player-top,
  .mobile-player-overlay .action-rail,
  .mobile-player-overlay .player-info,
  .mobile-player-overlay .episode-bar,
  .swipe-hint {
    display: none;
  }

  .player-control-bar {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 38px auto minmax(80px, 1fr) auto 38px 44px 38px;
    background: rgba(5, 5, 7, 0.78);
  }

  .controls-hidden .player-control-bar {
    transform: translateY(8px);
  }

  .desktop-player-panel {
    display: flex;
    min-width: 0;
    height: min(calc(100dvh - 112px), 820px);
    flex-direction: column;
    align-self: center;
    overflow: hidden;
    color: #fff;
  }

  .desktop-breadcrumb {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    white-space: nowrap;
  }

  .desktop-breadcrumb button {
    color: var(--muted);
    background: transparent;
  }

  .desktop-breadcrumb > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-drama-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
  }

  .eyebrow {
    color: var(--pink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .desktop-drama-heading h1 {
    margin: 7px 0 6px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.2;
  }

  .desktop-drama-heading p {
    color: var(--muted);
    font-size: 13px;
  }

  .desktop-favorite {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
  }

  .desktop-favorite.active {
    color: #ffdce9;
    border-color: rgba(255, 63, 130, 0.42);
  }

  .desktop-description {
    display: -webkit-box;
    margin-top: 18px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .desktop-actions {
    display: flex;
    gap: 9px;
    margin: 18px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-actions button {
    min-height: 40px;
    padding: 0 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    border-radius: 9px;
  }

  .desktop-actions button:hover {
    background: rgba(255, 255, 255, 0.13);
  }

  .desktop-episode-section {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

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

  .desktop-section-heading > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

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

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

  .autoplay-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
  }

  .autoplay-toggle input {
    accent-color: var(--pink);
  }

  .desktop-episode-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(48px, 1fr));
    gap: 8px;
    min-height: 0;
    padding-right: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .desktop-episode {
    min-height: 46px;
  }

  .desktop-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 14px;
    padding-top: 13px;
    color: var(--faint);
    font-size: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-shortcuts strong {
    color: var(--muted);
  }

  .episode-sheet,
  .share-sheet,
  .bottom-sheet {
    right: 50%;
    left: auto;
    width: min(540px, calc(100vw - 48px));
    transform: translateX(50%);
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 430px) {
  .player-control-bar {
    grid-template-columns: 34px auto minmax(38px, 1fr) auto 34px 39px 34px;
    gap: 2px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .player-time {
    font-size: 9px;
  }

  .player-control {
    min-width: 34px;
    min-height: 34px;
    padding: 4px;
  }
}

/*
 * Desktop web layout
 *
 * The application uses the same data and player state at every breakpoint,
 * but the main web pages need a real site shell on a wide screen.  Keep these
 * rules after the legacy adaptive rules above so they win at >= 1024px without
 * changing the touch-first 320-1023px layout.
 */
.desktop-site-header,
.desktop-only,
.desktop-quick-panel,
.desktop-short-sidebar {
  display: none;
}

.desktop-home-hero {
  display: block;
}

@media (min-width: 1024px) {
  :root {
    --desktop-content-width: 1240px;
    --desktop-gutter: clamp(24px, 4vw, 64px);
    --desktop-header-height: 74px;
  }

  html,
  body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    overflow-x: hidden;
    background: #08080d;
  }

  body {
    padding: 0;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    content: "";
    background:
      radial-gradient(circle at 18% -10%, rgba(116, 54, 154, 0.18), transparent 34%),
      radial-gradient(circle at 90% 14%, rgba(41, 67, 122, 0.1), transparent 32%),
      #08080d;
  }

  #app {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell,
  .app,
  .screen,
  .page,
  .main-content {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
  }

  .page-scroll,
  .scroll-content {
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - var(--desktop-header-height));
    height: auto;
    overflow-x: clip;
    overflow-y: auto;
  }

  /* The touch tab bar must never become an awkward desktop toolbar. */
  .bottom-nav,
  .tabbar {
    display: none !important;
  }

  .desktop-only {
    display: revert !important;
  }

  .desktop-site-header.desktop-only {
    display: flex !important;
  }

  .desktop-quick-panel.desktop-only,
  .desktop-short-sidebar.desktop-only {
    display: flex !important;
  }

  /* Shared desktop site chrome */
  .desktop-site-header {
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    width: 100%;
    min-height: var(--desktop-header-height);
    align-items: center;
    gap: 28px;
    padding: 0 max(28px, calc((100vw - var(--desktop-content-width)) / 2));
    color: #fff;
    background: rgba(8, 8, 13, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px) saturate(1.2);
  }

  .desktop-site-brand {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
  }

  .desktop-site-brand img {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 6px 14px rgba(255, 63, 130, 0.18));
  }

  .desktop-site-brand strong,
  .desktop-site-brand span {
    overflow: hidden;
    font-size: 19px;
    font-weight: 780;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
  }

  .desktop-site-brand strong {
    background: linear-gradient(100deg, #fff, #ffd7e8 46%, #d19bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

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

  .desktop-site-nav > a,
  .desktop-site-nav > button,
  .desktop-site-nav .nav-item {
    position: relative;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    font-weight: 620;
    white-space: nowrap;
    background: transparent;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .desktop-site-nav > a:hover,
  .desktop-site-nav > button:hover,
  .desktop-site-nav .nav-item:hover,
  .desktop-site-nav > .active,
  .desktop-site-nav > [aria-current="page"],
  .desktop-site-nav .nav-item.active,
  .desktop-site-nav .nav-item[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
  }

  .desktop-site-nav > .active::after,
  .desktop-site-nav > [aria-current="page"]::after,
  .desktop-site-nav .nav-item.active::after,
  .desktop-site-nav .nav-item[aria-current="page"]::after {
    position: absolute;
    right: 16px;
    bottom: 4px;
    left: 16px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--violet), var(--pink));
    border-radius: 999px;
  }

  .desktop-site-nav img {
    width: 18px;
    height: 18px;
    margin-right: 7px;
    object-fit: contain;
  }

  .desktop-site-actions {
    display: flex;
    min-width: 0;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }

  .desktop-site-actions .search-bar,
  .desktop-site-actions .search-box {
    width: clamp(180px, 17vw, 250px);
    height: 40px;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .desktop-site-actions .icon-button,
  .desktop-site-actions .round-action {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 8px;
    place-items: center;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
  }

  .desktop-site-actions .icon-button:hover,
  .desktop-site-actions .round-action:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
  }

  .desktop-site-actions img {
    width: 19px;
    height: 19px;
    object-fit: contain;
  }

  /* Home: a restrained, editorial width instead of a stretched phone canvas. */
  .home-page {
    min-height: 100dvh;
    background:
      linear-gradient(180deg, rgba(37, 14, 51, 0.36), transparent 320px),
      #0a0a10;
  }

  .home-page .home-header {
    display: none;
  }

  .home-page .page-scroll {
    min-height: calc(100dvh - var(--desktop-header-height));
    padding: 0 0 72px;
  }

  .desktop-content-shell,
  .home-page .home-content,
  .home-page .search-results,
  .home-page .subpage-content {
    width: min(var(--desktop-content-width), calc(100% - 56px));
    margin-right: auto;
    margin-left: auto;
  }

  .desktop-content-shell {
    padding: 28px 0 26px;
  }

  .home-page .home-content {
    padding: 0 0 32px;
  }

  .desktop-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(270px, 0.92fr);
    gap: 22px;
    width: 100%;
    min-height: 300px;
    margin: 0 0 38px;
  }

  .desktop-home-hero > .hero-banner,
  .desktop-home-hero > .feature-banner,
  .desktop-home-hero .hero-banner,
  .desktop-home-hero .feature-banner {
    min-height: 300px;
    height: 100%;
    margin: 0 !important;
    aspect-ratio: 2 / 1;
    border-radius: 19px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
  }

  .desktop-home-hero .hero-copy {
    right: 28px;
    bottom: 26px;
    left: 28px;
  }

  .desktop-home-hero .hero-copy h2 {
    max-width: 76%;
    margin-bottom: 8px;
    font-size: clamp(25px, 2.6vw, 38px);
    line-height: 1.17;
  }

  .desktop-home-hero .hero-copy p {
    font-size: 13px;
  }

  .desktop-quick-panel {
    display: flex;
    min-width: 0;
    min-height: 300px;
    flex-direction: column;
    gap: 15px;
    padding: 22px;
    color: #fff;
    background:
      linear-gradient(145deg, rgba(43, 34, 61, 0.94), rgba(25, 24, 34, 0.96)),
      #1a1822;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 19px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
  }

  .desktop-quick-panel h2,
  .desktop-quick-panel h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  .desktop-quick-panel p,
  .desktop-quick-panel small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .desktop-quick-panel .quick-panel-heading,
  .desktop-quick-panel .panel-heading,
  .desktop-quick-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .desktop-quick-panel .quick-panel-item,
  .desktop-quick-panel .continue-item,
  .desktop-quick-panel > a,
  .desktop-quick-panel > button {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
  }

  .desktop-quick-panel .quick-panel-item:hover,
  .desktop-quick-panel .continue-item:hover,
  .desktop-quick-panel > a:hover,
  .desktop-quick-panel > button:hover {
    background: rgba(255, 255, 255, 0.11);
  }

  .desktop-quick-panel .quick-panel-item img,
  .desktop-quick-panel .continue-item img,
  .desktop-quick-panel > a img,
  .desktop-quick-panel > button img {
    width: 42px;
    height: 54px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 7px;
  }

  .desktop-quick-panel .quick-panel-copy,
  .desktop-quick-panel .continue-copy {
    min-width: 0;
    flex: 1;
  }

  .desktop-quick-panel strong,
  .desktop-quick-panel .quick-panel-copy > span,
  .desktop-quick-panel .continue-copy > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-quick-panel .quick-panel-progress,
  .desktop-quick-panel .continue-progress {
    width: 100%;
    height: 3px;
    margin-top: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
  }

  .desktop-quick-panel .quick-panel-progress::after,
  .desktop-quick-panel .continue-progress::after {
    display: block;
    width: 42%;
    height: 100%;
    content: "";
    background: linear-gradient(90deg, var(--violet), var(--pink));
    border-radius: inherit;
  }

  .home-page .section-block {
    margin: 30px 0 38px;
  }

  .home-page .section-heading,
  .home-page .section-title-row {
    min-height: 42px;
    margin-bottom: 15px;
  }

  .home-page .section-heading h2,
  .home-page .section-title-row h2 {
    font-size: 21px;
    letter-spacing: -0.015em;
  }

  .home-page .section-heading button,
  .home-page .section-more {
    min-height: 34px;
    padding: 0 11px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
  }

  .home-page .poster-grid,
  .home-page .drama-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 25px 16px;
  }

  .home-page .poster-card,
  .home-page .drama-card {
    min-width: 0;
  }

  .home-page .poster-card:hover,
  .home-page .drama-card:hover {
    transform: translateY(-4px);
  }

  .home-page .poster-image,
  .home-page .poster-art,
  .home-page .drama-cover {
    aspect-ratio: 0.69;
    border-radius: 11px;
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.22);
  }

  .home-page .poster-title,
  .home-page .drama-title {
    margin-top: 9px;
    font-size: 14px;
  }

  .home-page .poster-meta,
  .home-page .drama-meta {
    margin-top: 4px;
    font-size: 11px;
  }

  .home-page .horizontal-cards {
    grid-auto-columns: 214px;
    gap: 16px;
  }

  /* Rewards: two balanced desktop columns, with the coin/invite hero spanning both. */
  .rewards-page {
    min-height: 100dvh;
    padding: 0;
    background:
      radial-gradient(circle at 50% 0, rgba(84, 25, 109, 0.27), transparent 34%),
      #0a0a0e;
  }

  .rewards-page .page-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    align-items: start;
    gap: 22px 24px;
    width: min(1120px, calc(100% - 56px));
    min-height: calc(100dvh - var(--desktop-header-height));
    margin: 0 auto;
    padding: 30px 0 76px;
  }

  .rewards-page .reward-tabs {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 30px;
    margin: 0;
    padding: 0 4px;
  }

  .rewards-page .reward-tab {
    min-height: 40px;
    font-size: 15px;
  }

  .rewards-page .coin-hero,
  .rewards-page .reward-hero {
    grid-column: 1 / -1;
    min-height: 190px;
    place-content: center start;
    justify-items: start;
    padding: 28px 34px;
    text-align: left;
    background:
      linear-gradient(115deg, rgba(86, 43, 108, 0.84), rgba(38, 32, 54, 0.85)),
      #24202e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
  }

  .rewards-page .coin-hero::before,
  .rewards-page .reward-hero::before {
    right: 54px;
    left: auto;
    width: 210px;
    height: 210px;
  }

  .rewards-page .coin-value {
    margin-top: 6px;
    font-size: 46px;
  }

  .rewards-page .reward-card,
  .rewards-page .task-card,
  .rewards-page .invite-panel {
    width: 100%;
    margin: 0;
    border-radius: 18px;
  }

  .rewards-page .reward-card {
    grid-column: 1;
  }

  .rewards-page .task-card {
    grid-column: 2;
  }

  .rewards-page .invite-hero {
    grid-column: 1 / -1;
    min-height: 230px;
    margin: 0;
    border-radius: 20px;
  }

  .rewards-page .invite-panel {
    grid-column: 1;
  }

  .rewards-page .task-card + * {
    grid-column: 2;
  }

  .rewards-page .sign-days {
    gap: 7px;
  }

  .rewards-page .sign-day {
    min-width: 0;
  }

  .rewards-page .task-row {
    min-height: 66px;
  }

  /* Profile: wider account hero, four-up membership cards and a two-column menu. */
  .profile-page {
    min-height: 100dvh;
    padding: 0;
    background:
      radial-gradient(circle at 82% 0, rgba(214, 65, 171, 0.13), transparent 30%),
      #0a0a0f;
  }

  .profile-page .page-scroll {
    width: min(1120px, calc(100% - 56px));
    min-height: calc(100dvh - var(--desktop-header-height));
    margin: 0 auto;
    padding: 34px 0 78px;
  }

  .profile-page .profile-header {
    min-height: 108px;
    padding: 24px 28px;
    background: linear-gradient(120deg, rgba(50, 29, 67, 0.8), rgba(27, 26, 39, 0.76));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
  }

  .profile-page .avatar {
    width: 72px;
    height: 72px;
  }

  .profile-page .profile-name {
    font-size: 23px;
  }

  .profile-page .wallet-strip {
    min-height: 72px;
    margin: 18px 0;
    padding: 0 24px;
    background: linear-gradient(120deg, rgba(77, 42, 90, 0.92), rgba(44, 37, 48, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
  }

  .profile-page .vip-carousel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    overflow: visible;
  }

  .profile-page .vip-card {
    min-height: 168px;
    padding: 19px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.17);
  }

  .profile-page .vip-card h3 {
    font-size: 20px;
  }

  .profile-page .profile-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 6px 17px;
    border-radius: 16px;
  }

  .profile-page .menu-row {
    min-height: 60px;
  }

  /* Recommendation page: one centered 9:16 player and a calm desktop rail. */
  .shorts-page {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 22% 12%, rgba(80, 36, 111, 0.16), transparent 34%),
      #08080c;
  }

  .desktop-shorts-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(320px, 440px);
    align-items: start;
    justify-content: center;
    gap: clamp(34px, 5vw, 76px);
    width: min(990px, calc(100% - 56px));
    margin: 0 auto;
    padding: 28px 0 54px;
  }

  .desktop-shorts-layout > .shorts-feed {
    width: auto;
    height: clamp(500px, calc(100dvh - 150px), 746px);
    min-height: 0;
    max-height: 746px;
    overflow-x: hidden;
    overflow-y: auto;
    aspect-ratio: 9 / 16;
    scroll-snap-type: y mandatory;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 19px;
    box-shadow: 0 26px 62px rgba(0, 0, 0, 0.36);
    scrollbar-width: none;
  }

  .desktop-shorts-layout > .shorts-feed::-webkit-scrollbar {
    display: none;
  }

  .desktop-shorts-layout .short-card {
    width: 100%;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
  }

  .desktop-short-sidebar {
    display: flex;
    min-width: 0;
    min-height: 0;
    max-height: min(746px, calc(100dvh - 150px));
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    background: rgba(19, 19, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 19px;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.18);
  }

  .desktop-short-sidebar h2,
  .desktop-short-sidebar h3 {
    font-size: 20px;
    line-height: 1.35;
  }

  .desktop-short-sidebar p,
  .desktop-short-sidebar small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
  }

  .desktop-short-sidebar .short-sidebar-heading,
  .desktop-short-sidebar .sidebar-heading,
  .desktop-short-sidebar > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .desktop-short-sidebar .short-sidebar-list,
  .desktop-short-sidebar .sidebar-list {
    display: grid;
    min-height: 0;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .desktop-short-sidebar .short-sidebar-item,
  .desktop-short-sidebar .sidebar-item,
  .desktop-short-sidebar > a,
  .desktop-short-sidebar > button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 9px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
  }

  .desktop-short-sidebar .short-sidebar-item:hover,
  .desktop-short-sidebar .sidebar-item:hover,
  .desktop-short-sidebar > a:hover,
  .desktop-short-sidebar > button:hover {
    background: rgba(255, 255, 255, 0.11);
  }

  .desktop-short-sidebar .short-sidebar-item img,
  .desktop-short-sidebar .sidebar-item img,
  .desktop-short-sidebar > a img,
  .desktop-short-sidebar > button img {
    width: 52px;
    height: 70px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
  }

  .desktop-short-sidebar .short-sidebar-copy,
  .desktop-short-sidebar .sidebar-copy {
    min-width: 0;
    flex: 1;
  }

  .desktop-short-sidebar strong,
  .desktop-short-sidebar .short-sidebar-copy > span,
  .desktop-short-sidebar .sidebar-copy > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Search, history and settings also need a web-width surface, not a phone column. */
  .subpage {
    min-height: 100dvh;
    padding-bottom: 72px;
    background: #0a0a0e;
  }

  .subpage .page-header {
    min-height: var(--desktop-header-height);
    padding: 0 max(28px, calc((100vw - var(--desktop-content-width)) / 2));
    background: rgba(8, 8, 13, 0.9);
  }

  .subpage-content,
  .subpage .search-results {
    width: min(1040px, calc(100% - 56px));
    margin-right: auto;
    margin-left: auto;
    padding: 30px 0 56px;
  }

  .subpage .search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .subpage .search-result,
  .subpage .record-item {
    min-height: 134px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .desktop-site-header {
    gap: 17px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .desktop-site-nav > a,
  .desktop-site-nav > button,
  .desktop-site-nav .nav-item {
    padding-right: 10px;
    padding-left: 10px;
  }

  .desktop-site-actions .search-bar,
  .desktop-site-actions .search-box {
    width: 168px;
  }

  .desktop-content-shell,
  .home-page .home-content {
    width: min(var(--desktop-content-width), calc(100% - 40px));
  }

  .home-page .poster-grid,
  .home-page .drama-grid {
    column-gap: 11px;
  }

  .desktop-shorts-layout {
    gap: 28px;
    width: min(930px, calc(100% - 40px));
  }

  .desktop-shorts-layout {
    grid-template-columns: minmax(0, 390px) minmax(300px, 1fr);
  }
}

@media (min-width: 1024px) and (max-height: 720px) {
  .desktop-site-header {
    min-height: 66px;
    --desktop-header-height: 66px;
  }

  .desktop-site-brand img {
    width: 34px;
    height: 34px;
  }

  .desktop-site-nav > a,
  .desktop-site-nav > button,
  .desktop-site-nav .nav-item,
  .desktop-site-actions .icon-button,
  .desktop-site-actions .round-action,
  .desktop-site-actions > button:not(.search-bar) {
    min-height: 36px;
    height: 36px;
  }

  .desktop-shorts-layout > .shorts-feed {
    height: calc(100dvh - 120px);
  }

  .desktop-short-sidebar {
    max-height: calc(100dvh - 120px);
  }
}

@media (min-width: 1024px) {
  .desktop-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
  }

  .desktop-quick-stats span {
    display: grid;
    gap: 3px;
    padding: 12px;
    color: var(--muted);
    font-size: 11px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 10px;
  }

  .desktop-quick-stats strong {
    color: #fff;
    font-size: 17px;
  }

  .desktop-short-thumb {
    display: block;
    width: 58px;
    height: 78px;
    flex: 0 0 auto;
    overflow: hidden;
    background-size: 410% auto;
    border-radius: 8px;
  }

  .desktop-short-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .short-sidebar-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 6px;
  }
}

/* Touch intent: series swipes are handled by the player controller; the
 * recommendation feed keeps its native vertical scrolling behaviour. */
.player-stage .series-tap-zone {
  touch-action: none;
}

.player-control-bar .player-progress-wrap,
.player-control-bar .player-progress {
  touch-action: pan-x;
}

/* Real desktop video-site information architecture */
.drama-detail-page {
  min-height: 100dvh;
  background: #0a0a0e;
}

.drama-detail-main {
  padding: 16px 14px 92px;
}

.desktop-detail-breadcrumb {
  display: none;
}

.drama-detail-hero {
  display: grid;
  gap: 18px;
}

.drama-detail-poster {
  width: min(58vw, 230px);
  margin: 0 auto;
  aspect-ratio: 0.69;
  overflow: hidden;
  border-radius: 14px;
}

.drama-detail-copy h1 {
  margin: 6px 0 12px;
  font-size: 25px;
  line-height: 1.22;
}

.drama-detail-copy > p {
  margin-top: 15px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.drama-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12px;
}

.drama-detail-facts strong {
  color: var(--gold);
}

.drama-detail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-top: 20px;
}

.desktop-play-primary,
.desktop-detail-secondary {
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  font-weight: 650;
  border-radius: 9px;
}

.desktop-play-primary {
  background: linear-gradient(100deg, var(--violet), var(--pink));
  box-shadow: 0 10px 25px rgba(255, 63, 130, 0.18);
}

.desktop-detail-secondary {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.drama-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 11px 13px;
  color: var(--muted);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 9px;
}

.drama-resume button {
  color: #fff;
  background: transparent;
}

.drama-detail-episodes {
  margin-top: 30px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.drama-detail-episodes > header {
  display: grid;
  gap: 12px;
  margin-bottom: 15px;
}

.drama-detail-episodes h2 {
  font-size: 20px;
}

.drama-detail-episodes p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.drama-detail-episode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.drama-detail-episode-grid button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 10px;
  color: #fff;
  background: #292930;
  border-radius: 8px;
}

.drama-detail-episode-grid button.locked {
  color: rgba(255, 255, 255, 0.56);
}

.drama-detail-episode-grid i {
  font-size: 10px;
  font-style: normal;
}

@media (min-width: 1024px) {
  .desktop-site-actions > .desktop-search-entry {
    display: flex !important;
    width: clamp(210px, 20vw, 286px) !important;
    height: 40px !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 13px !important;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px !important;
  }

  .desktop-site-brand {
    color: #fff;
    background: transparent;
  }

  .desktop-site-actions > .desktop-search-entry img {
    width: 17px;
    height: 17px;
    opacity: 0.7;
  }

  .desktop-site-actions > .desktop-search-entry:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
  }

  .desktop-video-home,
  .desktop-discover-page,
  .drama-detail-page {
    min-height: 100dvh;
    color: #fff;
    background:
      radial-gradient(circle at 20% -12%, rgba(101, 46, 132, 0.15), transparent 34%),
      #09090e;
  }

  .desktop-web-main,
  .drama-detail-main {
    width: min(1240px, calc(100vw - 56px));
    margin: 0 auto;
    padding: 28px 0 72px;
  }

  .desktop-cinema-hero {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(310px, 0.9fr);
    gap: 22px;
    min-height: 430px;
  }

  .desktop-cinema-feature {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(5, 5, 8, 0.93) 0%, rgba(7, 7, 10, 0.64) 42%, rgba(5, 5, 8, 0.08) 75%),
      linear-gradient(180deg, transparent 50%, rgba(5, 5, 8, 0.66)),
      url("../public/assets/top_bg.png") center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
  }

  .desktop-cinema-copy {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 42px;
    width: min(470px, 58%);
    transform: translateY(-50%);
  }

  .desktop-kicker {
    color: #ff5e97;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .desktop-cinema-copy h1 {
    margin: 12px 0 14px;
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.12;
    text-wrap: balance;
  }

  .desktop-cinema-copy > p {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.72;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .desktop-hero-actions,
  .desktop-current-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }

  .desktop-ranking {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 18px;
    background: rgba(28, 26, 36, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
  }

  .desktop-ranking-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .desktop-ranking-title h2 {
    margin-top: 4px;
    font-size: 20px;
  }

  .desktop-ranking-title button {
    color: var(--muted);
    font-size: 11px;
    background: transparent;
  }

  .desktop-rank-row {
    display: grid;
    grid-template-columns: 30px 48px minmax(0, 1fr) 20px;
    min-height: 68px;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    color: #fff;
    text-align: left;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }

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

  .desktop-rank-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9px;
  }

  .desktop-rank-row > strong {
    color: rgba(255, 255, 255, 0.32);
    font-size: 18px;
    font-style: italic;
  }

  .desktop-rank-row:nth-child(2) > strong,
  .desktop-rank-row:nth-child(3) > strong,
  .desktop-rank-row:nth-child(4) > strong {
    color: #ff6e9f;
  }

  .desktop-rank-thumb {
    width: 46px;
    height: 56px;
    border-radius: 6px;
  }

  .desktop-rank-row > span:nth-child(3) {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .desktop-rank-row b,
  .desktop-rank-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-rank-row b {
    font-size: 13px;
  }

  .desktop-rank-row small {
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-rank-row > i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-style: normal;
  }

  .desktop-channel-tabs {
    position: sticky;
    z-index: 20;
    top: var(--desktop-header-height);
    display: flex;
    gap: 4px;
    width: min(720px, 100%);
    margin: 28px 0 0;
    padding: 5px;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .desktop-channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .desktop-channel-tabs button {
    position: relative;
    display: grid;
    flex: 1 0 auto;
    min-width: 72px;
    min-height: 40px;
    place-items: center;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .desktop-channel-tabs button:hover {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
  }

  .desktop-channel-tabs button.active,
  .desktop-channel-tabs button.active:hover {
    color: #fff;
    font-weight: 750;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 8px 18px rgba(0, 0, 0, 0.2);
  }

  .desktop-channel-tabs button.active::after {
    display: none;
  }

  .desktop-shelf {
    margin-top: 40px;
  }

  .desktop-shelf > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
  }

  .desktop-shelf h2 {
    font-size: 23px;
  }

  .desktop-shelf header p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-shelf header button {
    color: var(--muted);
    font-size: 12px;
    background: transparent;
  }

  .desktop-poster-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }

  .desktop-poster-card {
    min-width: 0;
    color: #fff;
    text-align: left;
    background: transparent;
  }

  .desktop-poster-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 0.69;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .desktop-poster-card:hover .desktop-poster-art {
    transform: translateY(-5px);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.4);
  }

  .desktop-poster-art::after {
    position: absolute;
    inset: 45% 0 0;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  }

  .desktop-card-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    background: rgba(255, 63, 130, 0.88);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.84);
    transition: 0.2s ease;
  }

  .desktop-poster-card:hover .desktop-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .desktop-poster-art > em {
    position: absolute;
    z-index: 2;
    right: 7px;
    bottom: 7px;
    padding: 3px 6px;
    color: #fff;
    font-size: 9px;
    font-style: normal;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 4px;
  }

  .desktop-poster-card > strong,
  .desktop-poster-card > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-poster-card > strong {
    margin-top: 10px;
    font-size: 14px;
  }

  .desktop-poster-card > small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-site-footer {
    display: flex;
    min-height: 110px;
    align-items: center;
    gap: 16px;
    padding: 0 max(28px, calc((100vw - 1240px) / 2));
    color: var(--muted);
    background: #07070a;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .desktop-site-footer strong {
    color: #fff;
    font-size: 17px;
  }

  .desktop-site-footer nav {
    display: flex;
    gap: 16px;
    margin-left: auto;
  }

  .desktop-site-footer button {
    color: var(--muted);
    background: transparent;
  }

  /* Desktop recommendation is a video page, not a stretched swipe card. */
  .desktop-discover-main {
    display: grid;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    gap: 42px;
    width: min(1120px, calc(100vw - 56px));
    min-height: calc(100dvh - var(--desktop-header-height));
    margin: 0 auto;
    padding: 28px 0 48px;
    align-items: start;
  }

  .desktop-discover-media-column > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .desktop-discover-media-column h1 {
    margin-top: 4px;
    font-size: 25px;
  }

  .desktop-discover-media-column header > p {
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-short-stage {
    position: relative;
    width: auto;
    max-width: 100%;
    height: min(calc(100dvh - 190px), 720px);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  }

  .desktop-short-stage .video-poster,
  .desktop-short-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .desktop-discover-context {
    display: flex;
    min-width: 0;
    max-height: 730px;
    flex-direction: column;
    gap: 18px;
  }

  .desktop-current-short,
  .desktop-up-next {
    padding: 24px;
    background: rgba(27, 26, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
  }

  .desktop-current-short h2 {
    margin: 9px 0 12px;
    font-size: 27px;
    line-height: 1.25;
  }

  .desktop-current-short > p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .desktop-current-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
  }

  .desktop-current-actions button {
    min-height: 38px;
    padding: 0 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    border-radius: 8px;
  }

  .desktop-up-next {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

  .desktop-up-next > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .desktop-up-next header span {
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-up-next-list {
    display: grid;
    min-height: 0;
    gap: 8px;
    overflow-y: auto;
  }

  .desktop-up-next-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    min-height: 80px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
    border-radius: 10px;
  }

  .desktop-up-next-item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .desktop-up-next-item > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  .desktop-up-next-item strong,
  .desktop-up-next-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-up-next-item small {
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-up-next-item em {
    color: var(--muted);
    font-style: normal;
  }

  .desktop-short-thumb i {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 4px;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
  }

  /* Dedicated drama detail page */
  .drama-detail-main {
    width: min(1180px, calc(100vw - 56px));
  }

  .desktop-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--faint);
    font-size: 12px;
  }

  .desktop-detail-breadcrumb button {
    color: var(--muted);
    background: transparent;
  }

  .drama-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 38px;
    min-height: 390px;
    align-items: center;
    padding: 30px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 45%, rgba(145, 75, 181, 0.18), transparent 30%),
      linear-gradient(145deg, #1a1721, #111117);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
  }

  .drama-detail-poster {
    width: 250px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.44);
  }

  .drama-detail-copy {
    max-width: 740px;
  }

  .drama-detail-copy h1 {
    margin: 10px 0 14px;
    font-size: clamp(32px, 3.3vw, 46px);
  }

  .drama-detail-copy > p {
    max-width: 700px;
    font-size: 14px;
  }

  .drama-detail-actions {
    display: flex;
  }

  .drama-detail-actions button {
    min-height: 46px;
  }

  .drama-resume {
    max-width: 620px;
  }

  .drama-detail-episodes {
    margin-top: 30px;
    padding: 24px;
    border-radius: 16px;
  }

  .drama-detail-episodes > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .drama-detail-episodes .episode-range-tabs {
    margin: 0;
  }

  .drama-detail-episode-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
  }

  .drama-detail-episode-grid button {
    min-height: 46px;
    padding: 0 9px;
    font-size: 11px;
  }

  .desktop-player-related {
    width: min(1240px, calc(100vw - 56px));
    margin: 0 auto;
    padding: 0 0 72px;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .desktop-cinema-hero {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
  }

  .desktop-cinema-copy {
    left: 28px;
    width: 64%;
  }

  .desktop-poster-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .desktop-poster-row > :nth-child(6) {
    display: none;
  }

  .desktop-discover-main {
    grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
    gap: 28px;
  }

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

/*
 * Production desktop surfaces
 *
 * The desktop routes now render purpose-built web markup rather than relying
 * on the mobile card tree.  The selectors below are intentionally scoped to
 * those new surfaces; the existing mobile home, feed and player rules remain
 * the source of truth below 1024px.
 */

/* Shared detail atoms also have a compact mobile presentation. */
.desktop-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: #ff8db8;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.drama-detail-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 65% 0, rgba(102, 48, 139, 0.2), transparent 36%),
    #09090e;
}

.drama-detail-main {
  width: 100%;
  margin: 0 auto;
  padding: 18px 14px 48px;
}

.desktop-detail-breadcrumb {
  display: none;
}

.drama-detail-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drama-detail-poster {
  width: min(62vw, 238px);
  height: auto;
  margin: 0 auto;
  aspect-ratio: 0.69;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 13px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
}

.drama-detail-copy {
  min-width: 0;
}

.drama-detail-copy h1 {
  margin-top: 8px;
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.2;
}

.drama-detail-copy > p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.75;
}

.drama-detail-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}

.drama-detail-facts strong {
  color: var(--gold);
  font-size: 16px;
}

.drama-detail-copy > .tag-list {
  margin-top: 13px;
}

.drama-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.drama-detail-actions .desktop-play-primary,
.drama-detail-actions .desktop-detail-secondary {
  min-height: 42px;
}

.drama-resume {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 11px 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  background: rgba(255, 198, 0, 0.08);
  border: 1px solid rgba(255, 198, 0, 0.16);
  border-radius: 10px;
}

.drama-resume span {
  min-width: 0;
}

.drama-resume button {
  flex: 0 0 auto;
  color: #ffe29a;
  font-size: 11px;
  white-space: nowrap;
  background: transparent;
}

.drama-detail-episodes {
  margin-top: 28px;
  padding: 17px 14px 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
}

.drama-detail-episodes > header {
  display: grid;
  gap: 13px;
}

.drama-detail-episodes h2 {
  font-size: 20px;
}

.drama-detail-episodes header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.drama-detail-episodes .episode-range-tabs {
  margin: 0;
}

.drama-detail-episode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.drama-detail-episode-grid > button {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  border-radius: 8px;
}

.drama-detail-episode-grid > button span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.drama-detail-episode-grid > button i {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  font-style: normal;
}

.drama-detail-episode-grid > button:not(.locked):hover {
  border-color: rgba(255, 63, 130, 0.42);
  background: rgba(255, 63, 130, 0.14);
}

.drama-detail-episode-grid > button.locked {
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.045);
}

@media (min-width: 1024px) {
  /* Header */
  .desktop-site-header .desktop-search-entry {
    display: flex;
    width: 220px;
    min-width: 220px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
  }

  .desktop-site-header .desktop-search-entry:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
  }

  .desktop-site-header .desktop-search-entry img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .desktop-site-header .desktop-search-entry span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-site-header .desktop-user-button {
    padding: 4px;
  }

  .desktop-site-header .desktop-user-button img {
    width: 30px;
    height: 30px;
    margin: 0;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
  }

  /* Home */
  .desktop-video-home {
    min-height: 100dvh;
    padding-bottom: 0;
    background:
      linear-gradient(180deg, rgba(40, 14, 55, 0.26), transparent 400px),
      #09090e;
  }

  .desktop-web-main {
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto;
    padding: 36px 0 60px;
  }

  .desktop-cinema-hero {
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(280px, 1fr);
    align-items: stretch;
    gap: 24px;
  }

  .desktop-cinema-feature {
    position: relative;
    min-width: 0;
    min-height: 380px;
    overflow: hidden;
    background:
      linear-gradient(120deg, rgba(28, 12, 42, 0.12), rgba(11, 8, 15, 0.28)),
      url("../public/assets/splash_bg.png") var(--feature-position, center) / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32);
  }

  .desktop-cinema-feature::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(8, 5, 13, 0.06), transparent 45%),
      linear-gradient(180deg, transparent 25%, rgba(8, 5, 13, 0.92) 100%);
  }

  .desktop-cinema-copy {
    position: absolute;
    z-index: 1;
    right: clamp(24px, 4vw, 54px);
    bottom: clamp(24px, 4vw, 46px);
    left: clamp(24px, 4vw, 54px);
  }

  .desktop-cinema-copy h1 {
    max-width: 720px;
    margin-top: 11px;
    font-size: clamp(30px, 3.4vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  .desktop-cinema-copy > p {
    display: -webkit-box;
    max-width: 640px;
    margin-top: 12px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .desktop-cinema-copy .tag-list {
    margin-top: 15px;
  }

  .desktop-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }

  .desktop-play-primary,
  .desktop-detail-secondary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 720;
    border-radius: 999px;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .desktop-play-primary {
    background: linear-gradient(100deg, var(--violet), var(--pink));
    box-shadow: 0 10px 26px rgba(255, 63, 130, 0.2);
  }

  .desktop-play-primary:hover,
  .desktop-detail-secondary:hover {
    transform: translateY(-1px);
  }

  .desktop-detail-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.13);
  }

  .desktop-detail-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .desktop-ranking {
    display: flex;
    min-width: 0;
    min-height: 380px;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    background: rgba(20, 19, 28, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    box-shadow: 0 23px 52px rgba(0, 0, 0, 0.2);
  }

  .desktop-ranking-title {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 3px;
  }

  .desktop-ranking-title h2 {
    margin-top: 4px;
    font-size: 21px;
  }

  .desktop-ranking-title button {
    padding: 7px 9px;
    color: var(--muted);
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
  }

  .desktop-ranking-title button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .desktop-rank-row {
    display: grid;
    grid-template-columns: 25px 45px minmax(0, 1fr) 18px;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    gap: 9px;
    padding: 7px;
    color: #fff;
    text-align: left;
    background: transparent;
    border-radius: 11px;
  }

  .desktop-rank-row:hover {
    background: rgba(255, 255, 255, 0.075);
  }

  .desktop-rank-row > strong {
    color: rgba(255, 255, 255, 0.44);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .desktop-rank-row:nth-of-type(2) > strong,
  .desktop-rank-row:nth-of-type(3) > strong {
    color: #ffc56a;
  }

  .desktop-rank-thumb {
    width: 45px;
    height: 56px;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 7px;
  }

  .desktop-rank-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-rank-row > span:nth-of-type(2) {
    min-width: 0;
  }

  .desktop-rank-row b,
  .desktop-rank-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-rank-row b {
    font-size: 12px;
  }

  .desktop-rank-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-rank-row > i {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-style: normal;
  }

  .desktop-channel-tabs {
    position: sticky;
    z-index: 20;
    top: var(--desktop-header-height);
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: min(720px, 100%);
    margin-top: 28px;
    padding: 5px;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .desktop-channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .desktop-channel-tabs button {
    position: relative;
    display: grid;
    flex: 1 0 auto;
    min-width: 72px;
    min-height: 40px;
    place-items: center;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
  }

  .desktop-channel-tabs button.active,
  .desktop-channel-tabs button:hover {
    color: #fff;
  }

  .desktop-channel-tabs button:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .desktop-channel-tabs button.active,
  .desktop-channel-tabs button.active:hover {
    font-weight: 750;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 8px 18px rgba(0, 0, 0, 0.2);
  }

  .desktop-channel-tabs button.active::after {
    display: none;
    content: none;
  }

  .desktop-shelf {
    margin-top: 31px;
  }

  .desktop-shelf > header {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }

  .desktop-shelf h2 {
    font-size: 22px;
    letter-spacing: -0.018em;
  }

  .desktop-shelf header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-shelf > header > button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 11px;
    color: var(--muted);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 999px;
  }

  .desktop-shelf > header > button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .desktop-poster-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .desktop-poster-card {
    display: block;
    min-width: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    background: transparent;
    transition: transform 0.16s ease;
  }

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

  .desktop-poster-art {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 0.69;
    overflow: hidden;
    border-radius: 11px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  }

  .desktop-poster-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    background: rgba(8, 8, 12, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

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

  .desktop-poster-art em {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 3px 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 9px;
    font-style: normal;
    background: rgba(0, 0, 0, 0.58);
    border-radius: 4px;
  }

  .desktop-poster-card > strong,
  .desktop-poster-card > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-poster-card > strong {
    margin-top: 9px;
    font-size: 14px;
  }

  .desktop-poster-card > small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-site-footer {
    display: flex;
    width: min(1240px, calc(100% - 56px));
    min-height: 82px;
    align-items: center;
    gap: 12px 18px;
    margin: 0 auto;
    padding: 22px 0 28px;
    color: var(--faint);
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-site-footer strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
  }

  .desktop-site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-left: auto;
  }

  .desktop-site-footer button {
    color: var(--muted);
    font-size: 11px;
    background: transparent;
  }

  .desktop-site-footer button:hover {
    color: #fff;
  }

  /* Desktop discovery */
  .desktop-discover-page {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 17% 16%, rgba(82, 42, 116, 0.17), transparent 32%),
      #08080d;
  }

  .desktop-discover-main {
    display: grid;
    grid-template-columns: minmax(380px, 430px) minmax(360px, 480px);
    align-items: start;
    justify-content: center;
    gap: clamp(34px, 5vw, 72px);
    width: min(1040px, calc(100% - 56px));
    margin: 0 auto;
    padding: 35px 0 66px;
  }

  /* 推荐页横屏：上播放器下简介 */
  .desktop-discover-page[data-video-orientation="landscape"] .desktop-discover-main {
    grid-template-columns: 1fr;
    width: min(1080px, calc(100% - 56px));
    gap: 22px;
  }

  .desktop-discover-page[data-video-orientation="landscape"] .desktop-discover-context {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 18px;
    padding-top: 0;
  }

  .desktop-discover-media-column {
    min-width: 0;
  }

  .desktop-discover-media-column > header {
    display: flex;
    min-height: 52px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
  }

  .desktop-discover-media-column h1 {
    margin-top: 6px;
    font-size: 26px;
  }

  .desktop-discover-media-column > header p {
    max-width: 180px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
  }

  .desktop-short-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 28px 66px rgba(0, 0, 0, 0.38);
  }

  .desktop-short-stage.is-landscape,
  .desktop-short-stage[data-video-orientation="landscape"] {
    width: 100%;
    max-height: min(620px, calc(100dvh - 220px));
    aspect-ratio: 16 / 9;
  }

  .desktop-short-stage .video-poster,
  .desktop-short-stage .short-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-short-stage.is-landscape .video-poster,
  .desktop-short-stage.is-landscape .short-video,
  .desktop-short-stage[data-video-orientation="landscape"] .video-poster,
  .desktop-short-stage[data-video-orientation="landscape"] .short-video,
  .desktop-short-stage[data-video-orientation="unknown"] .video-poster,
  .desktop-short-stage[data-video-orientation="unknown"] .short-video,
  .desktop-short-stage.is-orientation-pending .video-poster,
  .desktop-short-stage.is-orientation-pending .short-video {
    object-fit: contain;
    background: #000;
  }

  .desktop-short-stage.is-portrait .video-poster,
  .desktop-short-stage.is-portrait .short-video,
  .desktop-short-stage[data-video-orientation="portrait"] .video-poster,
  .desktop-short-stage[data-video-orientation="portrait"] .short-video {
    object-fit: cover;
  }

  .desktop-short-stage .video-poster {
    z-index: 0;
  }

  .desktop-short-stage .short-video {
    z-index: 1;
    background: #000;
  }

  .desktop-short-stage .short-video:not([src]) {
    opacity: 0;
  }

  .desktop-discover-context {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 18px;
    padding-top: 45px;
  }

  .desktop-current-short,
  .desktop-up-next {
    min-width: 0;
    padding: 23px;
    background: rgba(19, 19, 27, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
  }

  .desktop-current-short h2 {
    margin-top: 8px;
    font-size: 25px;
    line-height: 1.25;
  }

  .desktop-current-short > p {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .desktop-current-short > .tag-list {
    margin-top: 15px;
  }

  .desktop-current-actions,
  .desktop-current-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .desktop-current-actions {
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-current-actions button {
    min-height: 36px;
    padding: 0 12px;
    color: var(--muted);
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
  }

  .desktop-current-actions button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
  }

  .desktop-current-cta {
    margin-top: 15px;
  }

  .desktop-current-cta .desktop-play-primary,
  .desktop-current-cta .desktop-detail-secondary {
    min-height: 40px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 11px;
  }

  .desktop-up-next > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
  }

  .desktop-up-next > header h3 {
    font-size: 18px;
  }

  .desktop-up-next > header span {
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-up-next-list {
    display: grid;
    max-height: 500px;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .desktop-up-next-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 18px;
    min-width: 0;
    min-height: 80px;
    align-items: center;
    gap: 11px;
    padding: 7px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 11px;
  }

  .desktop-up-next-item:hover,
  .desktop-up-next-item:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .desktop-up-next-item .desktop-short-thumb {
    width: 58px;
    height: 78px;
  }

  .desktop-up-next-item .desktop-short-thumb i {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    font-size: 9px;
    font-style: normal;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
  }

  .desktop-up-next-item > span:nth-child(2) {
    min-width: 0;
  }

  .desktop-up-next-item strong,
  .desktop-up-next-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-up-next-item strong {
    font-size: 12px;
  }

  .desktop-up-next-item small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-up-next-item > em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
  }

  /* Detail page */
  .drama-detail-page {
    min-height: 100dvh;
    padding-bottom: 0;
  }

  .drama-detail-main {
    width: min(1180px, calc(100% - 56px));
    padding: 30px 0 72px;
  }

  .drama-detail-page .desktop-detail-breadcrumb {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
    overflow: hidden;
    color: var(--faint);
    font-size: 11px;
    white-space: nowrap;
  }

  .desktop-detail-breadcrumb button {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
  }

  .desktop-detail-breadcrumb button:hover {
    color: #fff;
  }

  .desktop-detail-breadcrumb strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 620;
    text-overflow: ellipsis;
  }

  .drama-detail-hero {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 378px;
    align-items: center;
    gap: clamp(28px, 5vw, 68px);
    padding: 30px clamp(28px, 4vw, 54px);
    background:
      linear-gradient(112deg, rgba(44, 26, 58, 0.78), rgba(22, 21, 30, 0.72)),
      #181521;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 25px 58px rgba(0, 0, 0, 0.23);
  }

  .drama-detail-poster {
    width: 260px;
    height: 377px;
    margin: 0;
    border-radius: 13px;
  }

  .drama-detail-copy h1 {
    margin-top: 10px;
    font-size: clamp(30px, 3.2vw, 47px);
    letter-spacing: -0.035em;
  }

  .drama-detail-copy > p {
    max-width: 650px;
    margin-top: 19px;
    font-size: 14px;
    line-height: 1.8;
  }

  .drama-detail-facts {
    gap: 9px 17px;
    margin-top: 18px;
    font-size: 13px;
  }

  .drama-detail-facts strong {
    font-size: 21px;
  }

  .drama-detail-copy > .tag-list {
    margin-top: 17px;
  }

  .drama-detail-actions {
    margin-top: 24px;
  }

  .drama-detail-actions .desktop-play-primary {
    min-width: 138px;
  }

  .drama-resume {
    max-width: 640px;
    margin-top: 20px;
    padding: 13px 15px;
    font-size: 12px;
  }

  .drama-detail-episodes {
    margin-top: 30px;
    padding: 24px 25px 27px;
    border-radius: 18px;
  }

  .drama-detail-episodes > header {
    display: flex;
    min-height: 46px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
  }

  .drama-detail-episodes h2 {
    font-size: 23px;
  }

  .drama-detail-episodes header p {
    margin-top: 6px;
    font-size: 12px;
  }

  .drama-detail-episodes .episode-range-tabs {
    flex: 0 0 auto;
    max-width: 50%;
    justify-content: flex-end;
  }

  .drama-detail-episode-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 9px;
    margin-top: 20px;
  }

  .drama-detail-episode-grid > button {
    min-height: 47px;
    justify-content: center;
    padding: 0 7px;
    font-size: 12px;
    border-radius: 9px;
  }

  .drama-detail-episode-grid > button i {
    font-size: 10px;
  }

  .drama-detail-page .desktop-shelf {
    margin-top: 38px;
  }
}

@media (min-width: 1200px) {
  .drama-detail-episode-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  .desktop-web-main,
  .drama-detail-main,
  .desktop-site-footer {
    width: calc(100% - 40px);
  }

  .desktop-cinema-hero {
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.9fr);
    gap: 18px;
  }

  .desktop-cinema-feature,
  .desktop-ranking {
    min-height: 350px;
  }

  .desktop-poster-row {
    column-gap: 11px;
  }

  .desktop-discover-main {
    grid-template-columns: minmax(360px, 400px) minmax(320px, 1fr);
    gap: 30px;
    width: calc(100% - 40px);
  }

  .drama-detail-hero {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 30px;
    padding-right: 30px;
    padding-left: 30px;
  }

  .drama-detail-poster {
    width: 230px;
    height: 333px;
  }
}

@media (max-width: 767px) {
  .drama-detail-page .desktop-site-header,
  .drama-detail-page .desktop-detail-breadcrumb,
  .desktop-video-home .desktop-site-header,
  .desktop-discover-page .desktop-site-header {
    display: none !important;
  }
}

/* =========================================================
   Desktop web redesign (v1.4.5)
   True website layout — not a stretched phone shell
   ========================================================= */

.poster-image,
.poster-art,
.drama-cover,
.desktop-poster-art,
.desktop-rank-thumb,
.desktop-continue-art,
.desktop-short-thumb,
.record-cover {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--poster-a, #4b1d6b) 78%, transparent), color-mix(in srgb, var(--poster-b, #e0478a) 55%, #09090e)),
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--poster-b, #e0478a) 45%, transparent), transparent 55%),
    linear-gradient(145deg, var(--poster-a, #4b1d6b), var(--poster-b, #e0478a)) !important;
  background-size: cover !important;
}

.menu-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.menu-arrow {
  margin-left: auto;
  color: var(--faint);
  font-size: 18px;
}

.sign-coin,
.charge-coin,
.tx-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  font-size: 16px;
}

.charge-coin {
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  font-size: 24px;
  background: rgba(255, 198, 0, 0.12);
  border-radius: 50%;
}

@media (min-width: 1024px) {
  /* Kill the old “mobile tab bar as top toolbar” leftovers */
  .rewards-page,
  .profile-page,
  .home-page .page-scroll,
  .rewards-page .page-scroll,
  .profile-page .page-scroll {
    padding-top: 0 !important;
  }

  .home-header {
    top: 0 !important;
  }

  .desktop-web-page,
  .desktop-video-home,
  .desktop-discover-page,
  .drama-detail-page,
  .player-page {
    padding-bottom: 0;
    background:
      radial-gradient(ellipse 70% 45% at 12% -10%, rgba(143, 80, 255, 0.16), transparent 55%),
      radial-gradient(ellipse 55% 40% at 92% 8%, rgba(255, 63, 130, 0.1), transparent 50%),
      #08080d;
  }

  .desktop-site-header {
    backdrop-filter: blur(22px) saturate(1.2);
    background: rgba(8, 8, 13, 0.82) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  }

  .desktop-site-brand strong {
    font-size: 20px;
    letter-spacing: 0.02em;
    background: linear-gradient(100deg, #fff 30%, #ffb0d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .desktop-brand-mark {
    display: none;
  }

  .desktop-site-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
  }

  .desktop-site-nav > button {
    position: relative;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease;
  }

  .desktop-site-nav > button.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .desktop-site-nav > button.active::after {
    display: none;
  }

  .desktop-tool-button,
  .desktop-coin-entry {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 40px;
    max-width: none;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .desktop-tool-button:hover,
  .desktop-coin-entry:hover,
  .desktop-user-button:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .desktop-coin-entry strong {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .desktop-user-button {
    display: inline-flex !important;
    width: auto !important;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px !important;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px !important;
  }

  .desktop-avatar.tiny {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .desktop-user-label {
    max-width: 72px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-action-icon {
    font-size: 14px;
    opacity: 0.8;
  }

  .desktop-web-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding: 28px 32px;
    background:
      linear-gradient(120deg, rgba(143, 80, 255, 0.16), rgba(255, 63, 130, 0.1)),
      rgba(20, 19, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
  }

  .desktop-web-cta h2 {
    margin-top: 8px;
    font-size: 28px;
    letter-spacing: -0.03em;
  }

  .desktop-web-cta p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
  }

  .desktop-rank-board {
    display: grid;
    gap: 12px;
  }

  .desktop-rank-board-row {
    display: grid;
    grid-template-columns: 48px 72px minmax(0, 1fr) 64px auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    text-align: left;
    color: #fff;
    background: rgba(20, 19, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  }

  .desktop-rank-board-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 63, 130, 0.28);
    transform: translateY(-2px);
  }

  .desktop-rank-index {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
  }

  .desktop-rank-board-row:nth-child(-n + 3) .desktop-rank-index {
    color: var(--gold);
  }

  .desktop-rank-board-cover {
    width: 72px;
    height: 96px;
    aspect-ratio: auto;
    border-radius: 10px;
  }

  .desktop-rank-board-copy {
    min-width: 0;
  }

  .desktop-rank-board-copy b,
  .desktop-rank-board-copy small,
  .desktop-rank-board-copy em {
    display: block;
  }

  .desktop-rank-board-copy b {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-rank-board-copy small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-rank-board-copy em {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .desktop-rank-score {
    color: var(--gold);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }

  .desktop-rank-play {
    min-height: 36px;
    padding: 8px 14px;
    color: #fff;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .desktop-library-sort {
    display: flex;
    gap: 8px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .desktop-library-sort button {
    min-height: 34px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 12px;
    background: transparent;
    border-radius: 999px;
  }

  .desktop-library-sort button.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .desktop-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
  }

  .desktop-filter-chips button {
    min-height: 34px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .desktop-filter-chips button.active,
  .desktop-filter-chips button:hover {
    color: #fff;
    background: linear-gradient(100deg, rgba(143, 80, 255, 0.35), rgba(255, 63, 130, 0.28));
    border-color: transparent;
  }

  .desktop-library-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .desktop-api-banner {
    margin-bottom: 18px;
    padding: 12px 16px;
    color: rgba(255, 230, 180, 0.92);
    font-size: 13px;
    background: rgba(255, 180, 60, 0.1);
    border: 1px solid rgba(255, 180, 60, 0.22);
    border-radius: 12px;
  }

  .desktop-cinema-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
    align-items: stretch;
    gap: 24px;
  }

  .desktop-hero-stack {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    min-height: 360px;
    padding: 22px 24px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 20%, rgba(143, 80, 255, 0.14), transparent 42%),
      radial-gradient(circle at 80% 80%, rgba(255, 63, 130, 0.08), transparent 40%),
      rgba(16, 14, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
  }

  .desktop-stack-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 0.72;
    max-height: 360px;
  }

  .desktop-stack-card {
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--feature-a, #4b1d6b), var(--feature-b, #e0478a));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transform-origin: 30% 80%;
    will-change: transform, opacity, filter;
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.45s ease,
      filter 0.45s ease,
      box-shadow 0.45s ease;
  }

  .desktop-stack-card[data-stack-depth="0"] {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    box-shadow: 0 20px 44px rgba(255, 63, 130, 0.16), 0 14px 32px rgba(0, 0, 0, 0.36);
  }

  .desktop-stack-card[data-stack-depth="1"] {
    z-index: 2;
    opacity: 0.9;
    filter: brightness(0.88);
    transform: translate3d(14%, -3%, 0) scale(0.9) rotate(3.5deg);
  }

  .desktop-stack-card[data-stack-depth="2"] {
    z-index: 1;
    opacity: 0.74;
    filter: brightness(0.74);
    transform: translate3d(26%, -6%, 0) scale(0.8) rotate(7deg);
  }

  .desktop-stack-card:hover[data-stack-depth="1"],
  .desktop-stack-card:hover[data-stack-depth="2"] {
    filter: brightness(0.96);
  }

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

  .desktop-stack-media {
    aspect-ratio: auto;
    border-radius: 0;
  }

  .desktop-stack-media img {
    object-fit: cover;
  }

  .desktop-stack-media em {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.22);
    font-size: 72px;
    font-style: normal;
    font-weight: 800;
  }

  .desktop-stack-shade {
    background: linear-gradient(180deg, transparent 50%, rgba(8, 5, 13, 0.45) 100%);
    pointer-events: none;
  }

  .desktop-stack-copy {
    position: relative;
    z-index: 4;
    min-width: 0;
    max-width: 400px;
    margin-left: 28px;
    padding-left: 12px;
  }

  .desktop-stack-copy.is-changing .desktop-stack-title,
  .desktop-stack-copy.is-changing .desktop-stack-desc,
  .desktop-stack-copy.is-changing .desktop-hero-meta {
    animation: desktop-stack-copy-in 0.32s ease;
  }

  .desktop-stack-title {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    font-size: 22px;
    font-weight: 740;
    letter-spacing: -0.02em;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .desktop-stack-desc {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .desktop-stack-copy .desktop-hero-meta {
    margin-top: 14px;
    font-size: 12px;
  }

  .desktop-stack-copy .desktop-hero-actions {
    margin-top: 16px;
  }

  .desktop-stack-copy .desktop-play-primary,
  .desktop-stack-copy .desktop-detail-secondary {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  .desktop-stack-dots {
    display: flex;
    gap: 8px;
    margin-top: 18px;
  }

  .desktop-stack-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    transition: width 0.25s ease, background 0.25s ease;
  }

  .desktop-stack-dots button.active {
    width: 22px;
    background: linear-gradient(90deg, var(--violet), var(--pink));
  }

  @keyframes desktop-stack-copy-in {
    from { opacity: 0.35; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }

  /* legacy single feature still works if referenced elsewhere */
  .desktop-cinema-feature {
    position: relative;
    isolation: isolate;
    min-height: 360px !important;
  }

  .desktop-cinema-cover,
  .desktop-cinema-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .desktop-cinema-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
  }

  .desktop-cinema-art {
    display: grid;
    place-items: center;
    font-size: clamp(120px, 18vw, 220px);
    font-weight: 800;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.08);
    user-select: none;
  }

  .desktop-cinema-feature::after {
    background:
      linear-gradient(90deg, rgba(8, 5, 13, 0.82) 0%, rgba(8, 5, 13, 0.35) 48%, transparent 72%),
      linear-gradient(180deg, transparent 18%, rgba(8, 5, 13, 0.88) 100%) !important;
  }

  .desktop-cinema-copy {
    max-width: 560px;
  }

  .desktop-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
  }

  .desktop-hero-meta strong {
    color: var(--gold);
    font-size: 18px;
  }

  .desktop-ranking {
    animation: desktop-hero-in 0.65s ease 0.06s both;
  }

  .desktop-continue-rail {
    margin-top: 36px;
    animation: desktop-rise 0.5s ease 0.1s both;
  }

  .desktop-continue-rail > header {
    margin-bottom: 14px;
  }

  .desktop-continue-rail h2 {
    font-size: 22px;
    letter-spacing: -0.02em;
  }

  .desktop-continue-rail header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-continue-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }

  .desktop-continue-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    text-align: left;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }

  .desktop-continue-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
  }

  .desktop-continue-art {
    width: 54px;
    height: 72px;
    aspect-ratio: auto;
    border-radius: 8px;
  }

  .desktop-continue-copy strong,
  .desktop-continue-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-continue-copy strong {
    font-size: 13px;
  }

  .desktop-continue-copy small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
  }

  .desktop-shelf {
    animation: desktop-rise 0.5s ease both;
  }

  .desktop-poster-card:hover .desktop-poster-art {
    box-shadow: 0 18px 40px rgba(255, 63, 130, 0.18);
  }

  /* Account / rewards / subpages */
  .desktop-account-main,
  .desktop-subpage-main {
    width: min(1100px, calc(100% - 56px));
    padding-top: 28px;
    padding-bottom: 64px;
  }

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

  .desktop-section-intro h1 {
    margin-top: 8px;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.03em;
  }

  .desktop-section-intro p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
  }

  .desktop-coin-pill {
    display: grid;
    min-width: 140px;
    gap: 4px;
    padding: 14px 18px;
    text-align: right;
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.12), rgba(255, 63, 130, 0.08));
    border: 1px solid rgba(255, 198, 0, 0.22);
    border-radius: 16px;
  }

  .desktop-coin-pill span {
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-coin-pill strong {
    color: var(--gold);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
  }

  .desktop-inline-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }

  .desktop-inline-tabs button {
    min-height: 38px;
    padding: 0 18px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border-radius: 999px;
  }

  .desktop-inline-tabs button.active {
    color: #fff;
    background: linear-gradient(100deg, var(--violet), var(--pink));
  }

  .desktop-rewards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 20px;
  }

  .desktop-panel {
    padding: 22px;
    background: rgba(20, 19, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  }

  .desktop-reward-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .desktop-invite-panel .invite-panel,
  .desktop-invite-panel > * {
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .desktop-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    margin-bottom: 22px;
  }

  .desktop-profile-user,
  .desktop-wallet-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    text-align: left;
    color: #fff;
    background: rgba(20, 19, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }

  .desktop-profile-user:hover,
  .desktop-wallet-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
  }

  .desktop-avatar {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    border-radius: 50%;
  }

  .desktop-avatar.large {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }

  .desktop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .desktop-profile-user strong,
  .desktop-wallet-card strong {
    display: block;
    font-size: 18px;
  }

  .desktop-profile-user small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-wallet-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background:
      linear-gradient(145deg, rgba(255, 198, 0, 0.12), rgba(143, 80, 255, 0.08)),
      rgba(20, 19, 28, 0.78);
  }

  .desktop-wallet-card span {
    color: var(--muted);
    font-size: 12px;
  }

  .desktop-wallet-card strong {
    margin-top: 6px;
    color: var(--gold);
    font-size: 28px;
  }

  .desktop-wallet-card small {
    color: rgba(255, 198, 0, 0.7);
    font-size: 13px;
  }

  .desktop-vip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
  }

  .desktop-vip-card {
    display: block;
    padding: 18px;
    text-align: left;
    color: #fff;
    background: rgba(20, 19, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .desktop-vip-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 63, 130, 0.35);
  }

  .desktop-vip-card h3 {
    margin-top: 12px;
    font-size: 18px;
  }

  .desktop-vip-card p {
    margin-top: 8px;
    min-height: 40px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .desktop-vip-card .vip-price {
    margin-top: 14px;
    color: var(--gold);
    font-size: 20px;
    font-weight: 700;
  }

  .desktop-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .desktop-menu-grid .menu-row {
    border-radius: 12px;
  }

  .desktop-menu-grid .menu-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  /* Subpages */
  .desktop-subpage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }

  .desktop-subpage-header button {
    min-height: 36px;
    padding: 0 12px;
    color: var(--muted);
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
  }

  .desktop-subpage-header button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .desktop-subpage-header h1 {
    font-size: 28px;
    letter-spacing: -0.03em;
  }

  .desktop-subpage-card {
    max-width: 760px;
    padding: 28px;
    background: rgba(20, 19, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  }

  .desktop-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 20px;
  }

  .desktop-search-form input {
    min-height: 46px;
    padding: 0 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }

  .desktop-search-results,
  .desktop-collection-grid {
    display: grid;
    gap: 10px;
  }

  .desktop-subpage-card .search-result {
    width: 100%;
    border-radius: 14px;
  }

  .desktop-login-card,
  .desktop-about-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
  }

  .desktop-login-logo,
  .desktop-about-card .about-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 18px;
  }

  .desktop-login-brand h2 {
    margin-top: 8px;
    font-size: 24px;
  }

  .desktop-login-brand p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
  }

  .desktop-login-card .google-login,
  .desktop-login-card .legal-copy {
    width: min(360px, 100%);
  }

  /* Player polish */
  .player-page .desktop-site-header {
    position: sticky;
  }

  .player-workspace {
    align-items: start !important;
    padding-top: 28px !important;
  }

  .player-page[data-video-orientation="landscape"] .player-workspace {
    align-items: stretch !important;
  }

  .player-stage {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .desktop-player-panel {
    padding: 8px 4px 24px;
  }

  .player-page[data-video-orientation="landscape"] .desktop-player-panel {
    padding: 4px 0 8px;
  }

  .player-page[data-video-orientation="landscape"] .desktop-player-related {
    width: min(1080px, calc(100% - 48px));
  }

  .desktop-player-related {
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto 48px;
  }

  .desktop-discover-main {
    animation: desktop-rise 0.45s ease both;
  }

  .desktop-short-stage {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .desktop-continue-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .desktop-rewards-grid,
  .desktop-profile-hero,
  .desktop-menu-grid {
    grid-template-columns: 1fr;
  }

  .desktop-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .desktop-rank-board-row {
    grid-template-columns: 40px 64px minmax(0, 1fr) auto;
  }

  .desktop-rank-score {
    display: none;
  }

  .desktop-web-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .desktop-user-label {
    display: none;
  }

  .desktop-hero-stack {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 40px;
    padding: 20px;
    min-height: 360px;
  }

  .desktop-stack-card[data-stack-depth="1"] {
    transform: translate(14%, -3%) scale(0.9) rotate(3deg);
  }

  .desktop-stack-card[data-stack-depth="2"] {
    transform: translate(26%, -6%) scale(0.8) rotate(6deg);
  }
}

@keyframes desktop-hero-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes desktop-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-cinema-feature,
  .desktop-hero-stack,
  .desktop-stack-card,
  .desktop-ranking,
  .desktop-continue-rail,
  .desktop-shelf,
  .desktop-discover-main {
    animation: none !important;
    transition: none !important;
  }
}

/* Tablet: keep a phone-like stage instead of stretching H5 awkwardly */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    background:
      radial-gradient(circle at 50% 0, rgba(82, 43, 112, 0.18), transparent 40%),
      #050508;
  }

  #app {
    max-width: 430px;
    margin: 0 auto;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.55);
  }

  :root {
    --page-width: 430px;
  }
}

/* Mobile feeds reserve navigation space inside their own scroll container. */
@media (max-width: 1023px) {
  .home-page,
  .library-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  .home-page > .page-scroll,
  .library-page > .page-scroll {
    height: 100%;
    min-height: 0;
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
    scroll-padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
    -webkit-overflow-scrolling: touch;
  }
  .subpage {
    padding-bottom: max(var(--safe-bottom), 16px);
  }
  .category-drawer {
    padding-bottom: calc(24px + var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal:not(.home-reward-dialog),
  .dialog {
    max-height: min(82dvh, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px));
    top: calc(50% + (var(--safe-top) - var(--safe-bottom)) / 2);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* The legacy 700–1023px frame has a fixed height; subpages must scroll inside it. */
@media (min-width: 700px) and (max-width: 1023px) {
  .subpage {
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* The profile list owns its safe-area/nav clearance so its last row is reachable.
   Padding on the outer screen does not extend the nested list's scroll range. */
@media (max-width: 1023px) {
  .profile-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .profile-page > .page-scroll {
    height: 100%;
    min-height: 0;
    padding: calc(28px + var(--safe-top)) 12px calc(var(--nav-height) + var(--safe-bottom) + 24px);
    overflow-y: auto;
    scroll-padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
    -webkit-overflow-scrolling: touch;
  }
}

/* Keep the last reward action inside the mobile scroll area, above navigation. */
@media (max-width: 1023px) {
  .rewards-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .rewards-page > .page-scroll {
    height: 100%;
    min-height: 0;
    padding: calc(24px + var(--safe-top)) 12px calc(var(--nav-height) + var(--safe-bottom) + 24px);
    overflow-y: auto;
    scroll-padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
    -webkit-overflow-scrolling: touch;
  }
}

/* App download is a primary reward-page entry, visible before daily tasks. */
.reward-download-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  margin: 12px 0 20px;
  padding: 18px;
  background: linear-gradient(120deg, rgba(143, 80, 255, 0.24), rgba(255, 63, 130, 0.16));
  border: 1px solid rgba(255, 198, 0, 0.42);
  box-shadow: 0 8px 24px rgba(143, 80, 255, 0.12);
}
.reward-download-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.08); }
.reward-download-icon img { width: 36px; height: 36px; object-fit: contain; }
.reward-download-card h2 { font-size: 18px; }
.reward-download-card p { font-size: 12px; line-height: 1.5; }
.reward-download-action, .reward-download-pending {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-left: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
}
.reward-download-action { background: linear-gradient(110deg, #ffd558, #ffc600); }
.task-center { --task-accent: #ffd56c; }
.task-center-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 16px; }
.task-center-header h1 { margin:0; font-size:25px; letter-spacing:-.5px; }
.task-center-header p { margin:6px 0 0; color:rgba(255,255,255,.58); font-size:12px; }
.task-center-refresh { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.07); color:white; font-size:23px; }
.task-balance-card { position:relative; overflow:hidden; border-radius:22px; padding:22px; margin-bottom:18px; background:linear-gradient(120deg,#493225,#342442 72%); border:1px solid rgba(255,213,108,.22); }
.task-balance-card::after { content:'🪙'; position:absolute; right:22px; top:22px; font-size:62px; opacity:.17; transform:rotate(-15deg); pointer-events:none; }
.task-balance-card .coin-value { display:block; font-size:38px; line-height:1.35; margin:6px 0 10px; color:#ffe39d; overflow-wrap:anywhere; }
.task-balance-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.task-balance-top span { color:#e0d4c1; font-size:13px; }
.task-balance-top a { color:#ffe39d; font-size:12px; position:relative; z-index:1; }
.task-inline-link { background:transparent; padding:0; color:#ffda88; font-size:12px; line-height:1.7; text-align:left; }
.task-balance-caption { color:#c2b5c8; font-size:11px; }
.task-center .reward-card, .task-center .task-card { padding:18px 16px; border-radius:20px; background:#201b27; border:1px solid rgba(255,255,255,.055); margin-bottom:16px; }
.task-center .section-heading { margin-bottom:10px; }
.task-center .section-heading h2 { font-size:17px; }
.task-subtitle { font-size:12px; line-height:1.6; color:rgba(255,255,255,.52); margin:4px 0 14px; }
.task-status-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; margin:0 0 16px; border-radius:12px; background:rgba(255,192,89,.08); color:#ead3b2; font-size:12px; line-height:1.6; }
.task-sign-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin:16px 0; }
.task-sign-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:86px; border-radius:12px; background:rgba(255,255,255,.035); color:#ad9db4; font-size:11px; }
.task-sign-day strong { font-size:13px; color:#d9c3a3; }
.task-sign-day .sign-mark { font-size:20px; line-height:1; }
.task-sign-day.done { background:rgba(255,215,117,.09); color:#ffe1a0; }
.task-sign-day.current { outline:1px solid #ffc964; background:rgba(255,192,74,.1); }
.task-sign-button { display:block; width:100%; min-height:43px; border-radius:24px; background:linear-gradient(110deg,#ffe094,#ffc464); font-weight:700; color:#462c13; }
.task-sign-button:disabled { background:rgba(255,255,255,.06); color:#a99fad; }
.task-center .task-row { align-items:center; gap:11px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.task-center .task-row:last-child { border:0; padding-bottom:0; }
.task-center .task-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; background:rgba(255,211,119,.07); font-size:23px; }
.task-center .task-copy { min-width:0; flex:1; }
.task-center .task-copy strong { display:block; font-size:14px; line-height:1.45; }
.task-center .task-copy small { display:block; margin-top:5px; font-size:11px; line-height:1.6; color:#b2a8ba; }
.task-center .task-copy .task-reward { color:#ffd284; }
.task-action { min-height:36px; min-width:70px; padding:8px 12px; flex:0 0 auto; border-radius:20px; background:#ffc966; color:#493013; font-size:12px; font-weight:650; }
.task-action:disabled { color:#a197a8; background:rgba(255,255,255,.045); }
.task-stage { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:10px; border-radius:12px; background:rgba(255,255,255,.035); }
.task-stage b { font-size:12px; font-weight:500; }
.task-stage .task-action { min-width:62px; }
.task-center .task-pending-rewards { border-color:rgba(255,206,111,.3); background:linear-gradient(120deg,#332729,#251e31); }
.task-pending-rewards h2 small { font-size:12px; color:#ffd284; margin-left:8px; }
.task-pending-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid rgba(255,255,255,.07); }
.task-pending-row > span { min-width:0; }
.task-pending-row strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.task-pending-row small { display:block; font-size:12px; line-height:1.6; color:#b2a8ba; margin-top:3px; }
.task-pending-row .task-reward { color:#ffd284; }
.my-invites-link { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:16px; padding:14px 16px; border-radius:14px; background:rgba(255,213,108,.09); border:1px solid rgba(255,213,108,.16); color:#ffdf98; text-align:left; font-size:13px; }
.my-invites-summary { padding:22px; margin-bottom:18px; border-radius:20px; background:linear-gradient(120deg,#3d2d28,#272039); border:1px solid rgba(255,213,108,.18); }
.my-invites-summary h2 { margin:0 0 14px; font-size:20px; }
.my-invites-summary p { margin:8px 0; font-size:12px; line-height:1.7; color:#c6b9cc; }
.my-invites-count { display:flex; align-items:baseline; gap:9px; color:#ffe09b; }
.my-invites-count strong { font-size:38px; }
.my-invites-count span { font-size:13px; }
.my-invites-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:20px 2px 12px; }
.my-invites-toolbar h2 { font-size:17px; margin:0; }
.my-invites-toolbar button { background:transparent; color:#dfc58e; font-size:12px; padding:8px 2px; }
.my-invites-list { display:grid; gap:10px; }
.my-invite-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:16px 14px; border-radius:15px; background:#211b28; border:1px solid rgba(255,255,255,.04); }
.my-invite-avatar { display:grid; place-items:center; position:relative; width:44px; height:44px; overflow:hidden; border-radius:50%; background:#43334e; color:#debedc; font-size:18px; }
.my-invite-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.my-invite-person { min-width:0; }
.my-invite-person strong { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.my-invite-person small { display:block; margin-top:5px; font-size:11px; line-height:1.5; color:#96899f; }
.my-invite-award { max-width:105px; text-align:right; }
.my-invite-award strong { display:block; font-size:16px; color:#ffda8f; overflow-wrap:anywhere; }
.my-invite-award small { display:block; margin-top:6px; font-size:11px; line-height:1.5; color:#a99ab0; }
.my-invite-award[data-state="paid"] small { color:#abd5ae; }
.my-invite-award[data-state="needs_review"] small { color:#ebbe7d; }
.my-invites-notice { margin:16px 0; padding:16px; text-align:center; color:#b4a5bf; font-size:13px; line-height:1.8; border-radius:14px; background:rgba(255,255,255,.035); }
.my-invites-more { display:block; width:100%; margin:18px 0 12px; min-height:44px; border-radius:23px; color:#ffe3a5; background:rgba(255,213,108,.10); border:1px solid rgba(255,213,108,.22); font-size:13px; }
.my-invites-more:disabled { color:#968a9d; opacity:.7; }
.my-invites-footer { text-align:center; margin:16px 0; color:#968a9d; font-size:11px; line-height:1.7; }
@media (max-width:360px) { .my-invite-row { gap:9px; padding:14px 10px; grid-template-columns:38px minmax(0,1fr) auto; } .my-invite-avatar { width:38px; height:38px; } .my-invite-award { max-width:88px; } .my-invite-award strong { font-size:14px; } }
.task-progress { height:5px; margin-top:10px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.08); }
.task-progress > span { display:block; height:100%; background:linear-gradient(90deg,#ffa969,#ffe08c); border-radius:inherit; transition:width .35s ease; }
.task-watch-overview { display:flex; gap:22px; flex-wrap:wrap; margin:10px 0 0; }
.task-watch-overview strong { display:block; font-size:22px; color:#ffe0a4; }
.task-watch-overview small { display:block; color:#b2a8ba; font-size:11px; margin-top:5px; }
.task-coming-note { font-size:11px; color:#95899f; line-height:1.6; margin:14px 2px 4px; }
.task-reward-celebration { position:fixed; z-index:1100; pointer-events:none; inset:0; display:grid; place-items:center; }
.task-reward-celebration .reward-pop { border-radius:24px; padding:24px 32px; text-align:center; color:#ffe9b5; background:rgba(39,28,45,.96); border:1px solid #806438; box-shadow:0 12px 60px #0009; animation:task-reward-in .45s ease-out; }
.task-reward-celebration strong { display:block; font-size:34px; margin:8px 0; }
.task-reward-celebration small { font-size:13px; color:#d9cbbb; }
@keyframes task-reward-in { from { opacity:0; transform:translateY(14px) scale(.86); } to { opacity:1; transform:none; } }
@media (min-width:1024px) { .task-center-layout { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(400px,1.3fr); gap:24px; align-items:start; } .task-center .task-balance-card { padding:26px; } }
@media (max-width:360px) { .task-center .task-copy strong { font-size:13px; } .task-center .task-row { gap:8px; } .task-action { min-width:60px; padding:8px; } .task-sign-day strong { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .task-progress > span, .task-reward-celebration .reward-pop { animation:none; transition:none; } }
.reward-download-pending { color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.1); }
@media (max-width: 1023px) {
  .reward-download-card { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .reward-download-action, .reward-download-pending { grid-column: 1 / -1; width: 100%; }
}

/* APK entry and non-blocking ten-minute viewing reminder. */
.home-apk-entry { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:38px; max-width:132px; padding:6px 10px; border:1px solid rgba(246,190,65,.36); border-radius:12px; background:rgba(246,190,65,.1); color:#ffd47d; font-size:12px; font-weight:700; line-height:1.3; cursor:pointer; }
.home-apk-entry svg { flex:none; }
.home-apk-entry span { min-width:0; overflow-wrap:anywhere; }
.home-apk-entry:focus-visible, .apk-watch-prompt button:focus-visible { outline:2px solid #ffd47d; outline-offset:3px; }
.apk-watch-prompt { position:fixed; z-index:110; top:calc(env(safe-area-inset-top, 0px) + 68px); left:12px; right:12px; max-width:390px; margin:0 auto; box-sizing:border-box; padding:14px 36px 14px 15px; border:1px solid rgba(255,210,126,.38); border-radius:16px; background:rgba(30,23,38,.97); color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.26); animation:apk-prompt-enter .18s ease-out; text-align:left; }
.apk-watch-prompt > strong { display:block; font-size:15px; line-height:1.45; }
.apk-watch-prompt p { margin:5px 0 0; font-size:12px; line-height:1.6; color:#ded5e5; }
.apk-watch-prompt > small { display:block; margin-top:4px; color:#ffd47d; font-size:11px; }
.apk-watch-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; }
.apk-watch-prompt button { border:0; font:inherit; font-size:12px; cursor:pointer; }
.apk-watch-download { padding:9px 14px; border-radius:9px; color:#241a09; background:#ffd47d; font-weight:700 !important; }
.apk-watch-later { padding:9px 5px; color:#eee5f1; background:transparent; }
.apk-watch-close { position:absolute; top:6px; right:5px; width:32px; height:32px; border-radius:50%; font-size:22px !important; color:#cfc3d6; background:transparent; }
.apk-download-card { width:min(100%, 480px); margin:28px auto; padding:30px 22px; box-sizing:border-box; text-align:center; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:linear-gradient(145deg,#2f2433,#18131f); }
.apk-download-logo { display:block; margin-inline:auto; width:74px; height:74px; object-fit:contain; border-radius:18px; }
.apk-download-card h1 { margin:20px 0 14px; font-size:23px; line-height:1.5; }
.apk-download-card p { color:#d1c8d8; font-size:14px; line-height:1.8; }
.apk-download-pending { display:inline-block; margin:16px 0 6px; padding:7px 13px; border-radius:20px; color:#ffdc89; background:rgba(255,212,125,.1); font-size:13px; }
.apk-download-card .apk-device-note { margin-top:20px; font-size:12px; color:#b9acbf; }
.apk-download-card > button, .apk-download-card > a { display:flex; align-items:center; justify-content:center; width:100%; margin-top:16px; min-height:44px; text-decoration:none; }
@keyframes apk-prompt-enter { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .apk-watch-prompt { animation:none; } }
@media (max-width:360px) { .home-apk-entry { padding:6px 7px; max-width:105px; font-size:11px; } .home-actions { gap:7px; } }
/* Shared homepage loader: static boot, session restore and catalogue request. */
.page-loader { display:grid; min-height:48vh; min-height:48dvh; padding:32px; place-items:center; }
.page-loader--screen { min-height:100vh; min-height:100dvh; }
.page-loader > .spinner { width:42px; height:42px; border-width:3px; border-color:rgba(179,154,255,.16); border-top-color:#b39aff; animation-duration:.85s; }
@media (prefers-reduced-motion:reduce) { .page-loader > .spinner { animation:none; } }
/* Expanded viewing challenges: compact tiers and confirmed claim states. */
.task-group-heading { font-size:13px; color:#c8b8df; margin:22px 0 0; letter-spacing:.04em; }
.task-group-heading:first-child { margin-top:12px; }
.task-stage > span { flex:1; min-width:0; }
.task-stage .task-progress { margin:7px 0 4px; }
.task-stage small { overflow-wrap:anywhere; }
.task-stage[data-stage-state="claimable"] { background:rgba(229,174,60,.08); box-shadow:inset 0 0 0 1px rgba(229,174,60,.25); }
.task-stage[data-stage-state="completed"] { opacity:.72; }
.task-stage[data-stage-state="claimable"] .task-action { animation:task-ready-glow 1.8s ease-in-out 2; }
@keyframes task-ready-glow { 50% { box-shadow:0 0 0 4px rgba(238,192,79,.12); } }
@media (prefers-reduced-motion:reduce) { .task-stage[data-stage-state="claimable"] .task-action { animation:none; } }


/* Icon-only red envelope. The orange ring is server-confirmed viewing progress. */
.watch-redpacket-slot { position:absolute; right:12px; top:calc(88px + var(--safe-top,0px)); z-index:26; pointer-events:auto; }
.watch-redpacket { position:relative; display:grid; place-items:center; width:76px; height:76px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:manipulation; }
.watch-redpacket-ring { position:relative; display:grid; place-items:center; width:72px; height:72px; border-radius:50%; border:3px solid transparent; background:linear-gradient(rgba(30,10,8,.65),rgba(30,10,8,.65)) padding-box,conic-gradient(#ff941f var(--packet-progress),rgba(255,148,31,.16) 0) border-box; filter:drop-shadow(0 3px 8px #0006); }
.watch-redpacket svg { filter:drop-shadow(0 3px 2px rgba(57,2,2,.4)); }
.watch-redpacket.is-ready .watch-redpacket-ring { box-shadow:0 0 17px #ff9e3640; animation:packet-icon-float 3s ease-in-out infinite; }
.watch-redpacket.is-ready svg { animation:packet-icon-tilt 4s ease-in-out 3; }
.packet-icon-spark { position:absolute; width:10px; height:10px; right:9px; top:8px; background:#ffe5ad; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity:0; pointer-events:none; }
.is-ready .packet-icon-spark { animation:packet-sparkle 2.8s ease-in-out infinite; }
@keyframes packet-icon-float { 50% { transform:translateY(-3px); box-shadow:0 0 23px #ff9e3666; } }
@keyframes packet-icon-tilt { 12% { transform:rotate(-7deg); } 18% { transform:rotate(7deg); } 24%,100% { transform:rotate(0); } }
@keyframes packet-sparkle { 30% { opacity:1; transform:scale(1.2) rotate(90deg); } 65%,100% { opacity:0; transform:scale(.5) rotate(140deg); } }
/* Folded red paper, gold seal and a distinct user-controlled claim action. */
.packet-dialog-layer { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:28px 20px; overscroll-behavior:contain; }
.packet-dialog-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); cursor:default; }
.packet-dialog-card { position:relative; isolation:isolate; width:min(340px,100%); max-height:calc(100dvh - 56px); overflow-y:auto; overflow-x:hidden; padding:122px 28px 26px; border-radius:25px; border:1px solid rgba(255,210,145,.42); background:radial-gradient(ellipse at 50% 25%,#ef6650 0,transparent 65%),linear-gradient(155deg,#cc3536,#a92133); box-shadow:0 26px 100px #0008, inset 0 0 40px rgba(255,148,80,.15); text-align:center; color:#ffe9c1; animation:packet-dialog-in .35s cubic-bezier(.2,.8,.2,1) both; font-family:inherit; }
.packet-dialog-close { position:absolute; z-index:5; right:13px; top:12px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid #ffe6bc40; background:#85212940; color:#ffe9c1; font-size:25px; line-height:1; cursor:pointer; }
.packet-dialog-fold { position:absolute; top:0; left:-10%; width:120%; height:104px; z-index:-1; border-radius:0 0 50% 50%; background:linear-gradient(160deg,#fa7958,#df4c3f); box-shadow:0 3px 0 #ffc47f45,0 12px 24px #77162435; transform-origin:top center; }
.packet-dialog-seal { position:absolute; left:50%; top:67px; z-index:2; display:grid; place-items:center; width:62px; height:62px; margin-left:-31px; border-radius:50%; border:4px double #a56c32; color:#a6642a; background:linear-gradient(135deg,#ffe2a7,#e9b56c); box-shadow:0 4px 12px #751c274d,inset 0 0 0 3px #fff0c54a; font:30px/1 Georgia,"Songti SC",serif; }
.packet-dialog-kicker { position:relative; margin:24px 0 9px; font-size:11px; letter-spacing:.15em; color:#f5cfaa; }
.packet-dialog-card h2 { margin:0; font-size:23px; letter-spacing:.03em; color:#ffeac5; }
.packet-dialog-value { margin:23px 0 14px; font-size:66px; font-weight:750; letter-spacing:-.04em; line-height:1; color:#ffe8ae; text-shadow:0 3px 15px #86202040; font-variant-numeric:tabular-nums; }
.packet-dialog-value span { display:block; font-size:13px; letter-spacing:.12em; font-weight:400; margin-top:10px; color:#f5d2ab; }
.packet-dialog-description { min-height:20px; margin:0 0 24px; color:#f7d8bc; font-size:12px; line-height:1.6; }
.packet-dialog-claim { position:relative; overflow:hidden; width:100%; min-height:51px; border:1px solid #fff0bd; border-radius:28px; background:linear-gradient(100deg,#efc087,#ffe5b2 50%,#edbb7d); box-shadow:0 5px 0 #8e203147,0 8px 20px #75233433; color:#98562a; font-size:17px; font-weight:700; letter-spacing:.08em; cursor:pointer; }
.packet-dialog-claim::after { content:""; position:absolute; inset:-80% auto -80% -55%; width:35%; transform:rotate(25deg); background:linear-gradient(90deg,transparent,#fff9,transparent); animation:packet-button-shine 3.6s ease-in-out infinite; pointer-events:none; }
.packet-dialog-claim:disabled { opacity:.65; cursor:wait; }.packet-dialog-claim:disabled::after { animation:none; }
.packet-dialog-expiry { margin:17px 0 0; color:#f1c7af; font-size:10px; line-height:1.8; }
.packet-dialog-notice { margin:-12px 0 16px; padding:8px 10px; border-radius:10px; background:#8b192642; color:#fff0d9; font-size:12px; line-height:1.6; }
.packet-dialog-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
.packet-dialog-stars i { position:absolute; width:5px; height:5px; border-radius:50%; background:#ffe4ad; opacity:.6; box-shadow:0 0 10px #ffe4ad; }
.packet-dialog-stars i:nth-child(1) { top:34%; left:13%; }.packet-dialog-stars i:nth-child(2) { top:48%; right:11%; width:3px; height:3px; }.packet-dialog-stars i:nth-child(3) { top:67%; left:8%; width:3px; height:3px; }.packet-dialog-stars i:nth-child(4) { top:24%; right:20%; }
.is-opening .packet-dialog-seal { animation:packet-seal-turn .8s ease-in-out infinite; }.is-paid .packet-dialog-seal { animation:packet-seal-success .55s ease-out both; }
.is-paid .packet-dialog-value { animation:packet-value-in .5s .1s ease-out both; }.is-paid .packet-dialog-stars i { animation:packet-confetti 1.2s ease-out both; }
@keyframes packet-dialog-in { from { opacity:0; transform:translateY(26px) scale(.91); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes packet-button-shine { 0%,65% { left:-55%; } 100% { left:150%; } }
@keyframes packet-seal-turn { 50% { transform:rotateY(180deg); } }
@keyframes packet-seal-success { from { transform:scale(.7); } 60% { transform:scale(1.14); } to { transform:scale(1); } }
@keyframes packet-value-in { from { opacity:0; transform:translateY(10px) scale(.85); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes packet-confetti { to { transform:translateY(-50px) scale(0); opacity:0; } }
@media(min-width:1024px) { .watch-redpacket-slot { top:74px; right:18px; } }
@media(prefers-reduced-motion:reduce) { .watch-redpacket *, .packet-dialog-layer *, .packet-dialog-claim::after { animation:none!important; transition:none!important; } }



/* A wide rounded edge line opens the existing envelope; the full target remains easy to tap. */
.watch-redpacket-slot { --packet-size:clamp(44px,12vmin,58px); right:0; }
.watch-redpacket-slot.packet-placement-header { display:none; }
.watch-redpacket { width:var(--packet-size); height:var(--packet-size); margin-right:10px; transition:opacity .18s ease,transform .18s ease; }
.watch-redpacket-ring { width:calc(var(--packet-size) - 2px); height:calc(var(--packet-size) - 2px); border-width:2px; }
.watch-redpacket svg { width:calc(var(--packet-size) * .63); height:calc(var(--packet-size) * .77); }
.watch-redpacket.is-docked { width:38px; height:84px; min-width:38px; padding:8px 6px 8px 20px; margin:0; border:0; border-radius:16px 0 0 16px; background:transparent; box-shadow:none; }
.packet-edge-line { display:block; width:12px; height:64px; border-radius:999px; background:linear-gradient(180deg,rgba(255,225,194,.86),rgba(225,155,117,.78)); box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.26); pointer-events:none; }
.watch-redpacket.is-docked:hover .packet-edge-line { background:linear-gradient(180deg,#ffe5ba,#f9b969); }
.watch-redpacket.is-docked.is-ready .packet-edge-line { background:linear-gradient(180deg,#ffe2a0,#ffb858); box-shadow:0 0 14px rgba(255,177,76,.3),inset 0 0 0 1px rgba(255,239,205,.5); }
.watch-redpacket.is-docked:focus-visible { outline:2px solid #ffe2a0; outline-offset:-3px; }
@media(min-width:1024px) {
 .watch-redpacket-slot.packet-placement-player { display:none; }
 /* Desktop keeps its original compact envelope inside the navigation header. */
 .watch-redpacket-slot.packet-placement-header { --packet-size:clamp(30px,3vw,48px); --packet-dock-size:calc(var(--packet-size) * .72); display:flex; align-items:center; justify-content:center; position:static; flex:0 0 var(--packet-size); width:var(--packet-size); height:var(--packet-size); }
 .packet-placement-header .watch-redpacket { margin:0; }
 .packet-placement-header .watch-redpacket.is-docked { width:var(--packet-dock-size); min-width:0; height:var(--packet-dock-size); padding:0; overflow:visible; border:0; border-radius:50%; background:transparent; }
 .packet-placement-header .watch-redpacket.is-docked .watch-redpacket-ring { width:var(--packet-dock-size); height:var(--packet-dock-size); transform:none; opacity:.8; border-width:1.5px; animation:none; box-shadow:none; }
 .packet-placement-header .watch-redpacket.is-docked svg { width:calc(var(--packet-size) * .46); height:calc(var(--packet-size) * .56); animation:none; }
 .packet-placement-header .watch-redpacket.is-docked .packet-icon-spark { display:none; }
 .packet-placement-header .watch-redpacket.is-docked.is-ready::before { content:""; position:absolute; left:0; top:0; width:4px; height:4px; border-radius:50%; background:#ffd878; box-shadow:0 0 5px #ffb95b; }
}
@media(prefers-reduced-motion:reduce) { .watch-redpacket { transition:none; } }

/* Shared action rhythm: separate copy, content and controls without moving player icon controls. */
:root { --action-gap:12px; --card-gap:20px; --card-padding:20px; }
.primary-button,.secondary-button,.gradient-button,.login-button,.danger-button { min-height:46px; padding:11px 20px; line-height:1.45; }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.button-row { display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--action-gap); }
.button-row > button { flex:1 1 148px; min-width:0; margin:0; }
.modal-actions,.unlock-actions { gap:12px; }
.modal-actions > button,.unlock-actions > button { min-height:46px; }
.wallet-hero { display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 22px; border-radius:20px; }
.wallet-hero .amount { margin:0; line-height:1.25; font-size:40px; }
.wallet-hero .task-balance-caption { display:block; line-height:1.65; }
.wallet-hero .wallet-primary-action { margin-top:6px; min-width:168px; }
.reward-card,.task-card,.invite-panel { margin:var(--card-gap) 0; padding:var(--card-padding); border-radius:18px; }
.task-center .reward-card,.task-center .task-card { padding:20px; margin-bottom:20px; }
.invite-panel > h2 { line-height:1.5; margin-bottom:12px; }
.invite-panel > p { line-height:1.8; }
.invite-panel > p + p { margin-top:8px; }
.invite-panel > button { margin-top:16px; }
.invite-hero { padding-bottom:8px; }
.invite-hero-actions { margin:20px auto 8px; max-width:560px; }
.invite-hero-actions .invite-button { width:auto; min-height:48px; padding:12px 18px; margin:0; border-radius:999px; background:linear-gradient(100deg,var(--violet),var(--pink)); }
.watch-invite-wallet > h2 { margin:0 0 12px; }
.watch-invite-wallet .transaction-list { margin-top:18px; }
.watch-invite-actions { margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.watch-invite-actions .secondary-button { font-size:13px; }
.transaction-list { gap:12px; margin-top:16px; }
.transaction-row { padding:16px 14px; gap:12px; border-radius:14px; }
.transaction-row strong { line-height:1.5; }
.transaction-row .source-detail,.transaction-row .source-time { margin-top:6px; line-height:1.6; }
.task-stage { gap:14px; padding:14px; margin-top:12px; }
.task-action { min-height:42px; min-width:76px; padding:10px 14px; }
.task-stage .task-action { min-width:72px; }
.task-sign-button { min-height:46px; margin-top:4px; }
.task-center-refresh { width:44px; height:44px; flex:0 0 44px; }
.task-center .task-row { gap:14px; padding:20px 0; }
.task-pending-row { gap:16px; padding:16px 0; }
.task-group-heading { margin-top:26px; margin-bottom:6px; }
.section-heading { gap:14px; }
.my-invites-link { min-height:46px; margin-top:18px; }
.reward-tabs,.desktop-inline-tabs { gap:12px; }
.reward-tabs button,.desktop-inline-tabs button { min-height:44px; }
.watch-invite-rules details { padding:12px 0; }
.watch-invite-rules tbody tr + tr { border-top:1px solid rgba(255,255,255,.04); }
.watch-invite-rules > button { width:100%; margin-top:18px; }
.settings-list,.menu-list { margin-top:16px; }
@media(max-width:359px) {
 :root { --card-padding:16px; }
 .button-row > button { flex-basis:100%; }
 .wallet-hero { padding:24px 18px; }
 .task-center .reward-card,.task-center .task-card { padding:16px; }
 .task-center .task-row { gap:10px; }
 .task-stage { gap:10px; padding:12px; }
}
@media(min-width:1024px) {
 :root { --card-padding:24px; --card-gap:24px; }
 .watch-invite-actions { justify-content:flex-start; }
 .watch-invite-actions > button { flex:0 1 auto; min-width:156px; }
 .wallet-hero { padding:32px; }
}

/* withdrawal display */
.withdrawal-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px}.coin-dollar{font-size:14px;font-weight:600;color:var(--muted,#8795a9);white-space:nowrap}.withdrawal-button{border:0;border-radius:999px;padding:8px 20px;background:#ffbc49;color:#332107;font-weight:700;cursor:pointer}.withdrawal-entry small{flex-basis:100%;font-size:11px;color:var(--muted,#8795a9)}.withdrawal-entry small:empty{display:none}.profile-page .withdrawal-entry{margin:0 18px 16px}.desktop-wallet-card .coin-dollar{font-size:14px}

/* APK withdrawal prompt: independent button sizing avoids cramped two-column labels. */
.modal.apk-install-dialog{box-sizing:border-box;width:min(calc(100vw - 32px),380px);max-height:calc(100dvh - 32px);padding:28px 24px 20px;border:1px solid rgba(184,146,255,.2);border-radius:24px;background:radial-gradient(ellipse at 50% 0,rgba(127,73,190,.24),transparent 62%),#202027;box-shadow:0 24px 80px #0009;text-align:center;overflow-x:hidden}
.apk-install-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.apk-install-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:36px;height:36px;padding:8px;border:0;border-radius:50%;background:rgba(255,255,255,.055);color:#c9c5d1;cursor:pointer}
.apk-install-close svg{width:20px;height:20px}
.apk-install-icon{display:grid;place-items:center;width:68px;height:68px;margin:2px auto 15px;border-radius:21px;color:#ead7ff;background:linear-gradient(145deg,#b165ef38,#874bd320);border:1px solid #cb94ff35;box-shadow:0 9px 30px #8541c21c}
.apk-install-icon svg{width:44px;height:44px}
.apk-install-eyebrow{display:block;color:#ba9bd5;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:2.3px;margin-bottom:9px}
.modal.apk-install-dialog h2{margin:0 0 12px;color:#f6f1fc;font-size:clamp(19px,5.3vw,23px);font-weight:700;line-height:1.35;letter-spacing:.2px;white-space:nowrap}
.modal.apk-install-dialog .apk-install-description{margin:0;color:#bcb6c6;font-size:clamp(12px,3.5vw,14px);line-height:1.8;word-break:normal;overflow-wrap:normal}
.apk-install-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:24px}
.apk-install-actions button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;min-height:48px;margin:0;padding:12px 16px;border-radius:13px;font-family:inherit;font-size:15px;font-weight:650;line-height:22px;white-space:nowrap;word-break:keep-all;cursor:pointer}
.apk-install-primary{border:1px solid #bd8dff55;background:linear-gradient(105deg,#9854eb,#bf59d5);color:#fff;box-shadow:0 6px 18px #8e41c825}
.apk-install-primary svg{flex:0 0 18px;width:18px;height:18px}
.apk-install-secondary{border:1px solid #ffffff12;background:#ffffff05;color:#c5bfce}
.apk-install-actions button:active{transform:scale(.985)}
.apk-install-dialog button:focus-visible{outline:2px solid #e1bbff;outline-offset:3px}
.modal.apk-install-dialog .apk-install-footnote{margin:15px 0 0;color:#85808e;font-size:11px;line-height:1.6}
@media(max-width:350px){.modal.apk-install-dialog{padding:25px 18px 18px}.apk-install-actions{margin-top:20px}.modal.apk-install-dialog .apk-install-footnote{font-size:10px}}

/* Home reward introduction shown once per document visit, after session restoration. */
.home-reward-dialog .home-reward-symbol{font-size:34px;color:#ffcf70;background:linear-gradient(145deg,#ffc35524,#9653ef22);border-color:#e2ae6940}
.home-reward-dialog .home-reward-symbol svg{width:42px;height:42px}
.modal.home-reward-dialog .home-reward-description{font-size:14px;line-height:1.8;color:#cec5d8;margin:0}
.modal.home-reward-dialog .home-reward-note{font-size:12px;line-height:1.7;color:#a49ab1;margin:10px 0 0}
.home-reward-dialog .apk-install-eyebrow{color:#dab47a}

/* Fluid type and spacing with readable lower bounds. Browser zoom remains enabled. */
:root {
  --ui-small:clamp(.75rem,.69rem + .28vw,.875rem);
  --ui-body:clamp(.875rem,.80rem + .32vw,1rem);
  --ui-title:clamp(1.375rem,1.12rem + 1vw,1.75rem);
  --ui-gap:clamp(.5rem,2.3vw,1rem);
  --ui-card-pad:clamp(1rem,4.2vw,1.5rem);
  --ui-touch:max(44px,2.75rem);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body { min-width:0; }
button,input,select,textarea { font-family:inherit; }
:lang(km),:lang(th) { letter-spacing:normal; }
.home-actions { grid-template-columns:minmax(0,1fr) 132px;gap:clamp(6px,1.8vw,10px); }
.home-actions .search-bar,.home-actions .round-action,.home-actions .home-apk-entry { box-sizing:border-box;height:var(--ui-touch);min-height:var(--ui-touch);max-height:var(--ui-touch);min-width:0; }
.home-actions .round-action { width:var(--ui-touch); }
.home-actions .search-bar { text-align:start;font-size:var(--ui-small);line-height:1.6; }
.home-actions .search-bar img,.search-box img { flex:0 0 18px; }
.home-actions .search-bar span,.home-apk-entry span { display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal; }
.home-actions .home-apk-entry { width:100%;max-width:none;padding:0 10px;font-size:var(--ui-small);line-height:1.6; }
.search-box { flex:1;min-width:0;min-height:var(--ui-touch);height:auto; }
.search-box button { flex:0 1 auto;min-width:0;max-width:42%;min-height:var(--ui-touch);line-height:1.5;overflow-wrap:anywhere;font-size:var(--ui-small); }
.search-box input { width:0;font:inherit;font-size:max(16px,1rem); }
.home-tabs button,.tab-button,.nav-label { line-height:1.5; }
.task-center-header h1,.my-invites-summary h2 { font-size:var(--ui-title);line-height:1.5;overflow-wrap:anywhere; }
.task-center-header p,.task-subtitle,.task-center .task-copy small,.task-center .task-stage b,.task-status-banner,.task-balance-caption,.my-invites-footer,.apk-watch-prompt p { font-size:var(--ui-small);line-height:1.7; }
.task-center .task-copy strong,.task-center .section-heading h2,.my-invites-link,.watch-invite-actions .secondary-button { font-size:var(--ui-body);line-height:1.6; }
.task-center .reward-card,.task-center .task-card,.invite-panel,.my-invites-summary { padding:var(--ui-card-pad); }
.task-copy,.task-stage>span,.task-pending-row>span,.section-heading>h2,.task-center-header>div,.task-balance-top>span { min-width:0;overflow-wrap:anywhere; }
.task-action,.task-stage .task-action { flex:0 0 clamp(84px,25vw,112px);width:clamp(84px,25vw,112px);min-width:0;max-width:100%;min-height:var(--ui-touch);white-space:normal;overflow-wrap:anywhere;line-height:1.6;padding:10px 8px;font-size:var(--ui-small); }
.task-status-banner,.task-balance-top,.sign-header,.section-heading { flex-wrap:wrap; }
.task-status-banner>a,.task-status-banner>button { flex:0 1 auto;max-width:100%; }
.button-row,.apk-watch-actions { flex-wrap:wrap; }
.button-row>button,.invite-hero-actions>button,.watch-invite-actions>button,.apk-watch-actions>button { min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6;min-height:var(--ui-touch); }
.task-sign-button,.primary-button,.secondary-button,.my-invites-more { white-space:normal;overflow-wrap:anywhere;line-height:1.6;min-height:var(--ui-touch);padding-block:10px; }
.task-balance-card .coin-value { font-size:clamp(1.5rem,1rem + 3vw,2.375rem);line-height:1.5;overflow-wrap:anywhere; }
.task-sign-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-gap); }
.task-sign-day { min-width:0;overflow-wrap:anywhere;padding:10px 4px; }
.task-sign-day small { font-size:var(--ui-small);line-height:1.6;text-align:center; }
.task-sign-day strong { font-size:var(--ui-body); }
.watch-invite-rules table { table-layout:fixed; }
.watch-invite-rules th,.watch-invite-rules td { overflow-wrap:anywhere;vertical-align:top; }
.watch-invite-rules th:first-child { width:44%; }
.watch-invite-rules th:nth-child(2) { width:20%; }
.watch-invite-rules th:last-child { width:36%; }
.packet-dialog-card { padding-inline:clamp(16px,5vw,28px); }
.packet-dialog-card h2 { font-size:var(--ui-title);line-height:1.5;overflow-wrap:anywhere; }
.packet-dialog-value { font-size:clamp(2.25rem,9vw,4.125rem);line-height:1.4;overflow-wrap:anywhere; }
.packet-dialog-description,.packet-dialog-expiry,.packet-dialog-kicker { font-size:var(--ui-small);line-height:1.7;letter-spacing:normal; }
.packet-dialog-claim { padding:12px;white-space:normal;overflow-wrap:anywhere;line-height:1.6;letter-spacing:normal;font-size:var(--ui-body); }
.modal.apk-install-dialog h2,.apk-install-actions button { white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.6; }
.withdrawal-entry .withdrawal-button { min-height:var(--ui-touch);font-size:var(--ui-body);line-height:1.6;white-space:normal; }
.page-title,.desktop-section-intro h1 { overflow-wrap:anywhere;line-height:1.5; }
.modal { overflow-wrap:anywhere; }
.feedback-form input,.feedback-form textarea,.feedback-form select { max-width:100%;min-width:0; }
@media(max-width:360px) {
 .home-actions { grid-template-columns:minmax(0,1fr) 132px;gap:6px; }
 .home-actions .search-bar { padding:0 9px;gap:5px; }
 .home-actions .home-apk-entry { padding:0 7px; }
 .task-center .task-row { flex-wrap:wrap; }
 .task-center .task-row>.task-action { margin-inline-start:auto; }
 .task-stage { flex-wrap:wrap; }
 .task-stage>span { flex:1 1 100%; }
 .task-stage>.task-action { margin-inline-start:auto;max-width:100%; }
}
@media(min-width:700px) { .task-sign-grid { grid-template-columns:repeat(7,minmax(0,1fr)); } }
@media(max-width:300px) { .home-actions { grid-template-columns:minmax(0,1fr); } .home-actions .home-apk-entry { grid-column:1/-1; } }

/* A DOM fullscreen element only displays its descendants, including modal sheets. */
.player-stage > #modal-root .episode-sheet,
.player-stage > #modal-root .share-sheet,
.player-stage > #modal-root .bottom-sheet { left:0; right:0; }

/* Phone landscape is a viewing layout; secondary actions live behind More. */
.landscape-more-button, .player-control.landscape-episodes { display:none; }
.landscape-options {
  position:fixed; z-index:70; top:0; right:0; bottom:0;
  width:min(300px,78vw); padding:16px max(16px,env(safe-area-inset-right)) 16px 16px;
  overflow-y:auto; color:#fff; background:rgba(22,22,28,.98);
  box-shadow:-12px 0 40px rgba(0,0,0,.3);
}
.landscape-options header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.landscape-options h2 { font-size:16px; }
.landscape-options .close-button { min-width:44px; min-height:44px; font-size:25px; }
.landscape-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.landscape-options-grid button { min-height:52px; padding:10px; color:#fff; font-size:13px; line-height:1.4; overflow-wrap:anywhere; border:1px solid #ffffff16; border-radius:10px; background:#ffffff09; }
.landscape-options-grid button[aria-pressed="true"] { color:#ff7ca8; border-color:#ff7ca850; }
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1023px) {
  body:has(.player-page) { padding:0; }
  #app:has(.player-page), .app-shell:has(.player-page) { max-width:none; width:100%; height:100dvh; min-height:100dvh; border:0; border-radius:0; }
  .player-page .player-workspace, .player-page .player-stage { width:100%; max-width:none; height:100dvh; min-height:100dvh; margin:0; }
  .player-page { width:100%; max-width:none; }
  .player-stage.player-slide::after { background:none; }
  .player-stage .mobile-player-overlay::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(#0009,transparent 24%,transparent 65%,#000b); }
  .player-stage .mobile-player-overlay .action-rail,
  .player-stage .mobile-player-overlay .episode-bar,
  .player-stage .mobile-player-overlay .player-tools,
  .player-stage .mobile-player-overlay .player-info p,
  .player-stage .mobile-player-overlay .vip-player-note,
  .player-stage > .packet-placement-player,
  .player-stage > .swipe-hint { display:none; }
  .player-stage .mobile-player-overlay .player-top { top:max(8px,var(--safe-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); }
  .player-stage .player-top .back-button { width:44px; height:44px; background:none; }
  .player-stage .landscape-more-button { display:grid; place-items:center; width:44px; height:44px; padding:0; color:white; font-size:28px; line-height:1; background:none; }
  .player-stage .mobile-player-overlay .player-info { display:flex; align-items:center; top:max(8px,var(--safe-top)); bottom:auto; left:max(68px,calc(56px + env(safe-area-inset-left))); right:max(72px,calc(60px + env(safe-area-inset-right))); height:44px; max-width:none; }
  .player-stage .mobile-player-overlay .player-info h2 { margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:500; }
  .player-stage .player-control-bar { left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); bottom:max(8px,var(--safe-bottom)); display:grid; grid-template-columns:44px auto auto minmax(8px,1fr) max-content max-content 44px; grid-template-rows:28px 44px; gap:0 8px; padding:0; border:0; border-radius:0; background:none; backdrop-filter:none; }
  .player-stage .player-progress-wrap { grid-column:1/-1; grid-row:1; min-height:28px; }
  .player-stage .player-control-bar .play-toggle { grid-column:1; grid-row:2; }
  .player-stage .player-control-bar .current-time { grid-column:2; grid-row:2; }
  .player-stage .player-control-bar .current-time::after { content:" /"; color:#aaa; }
  .player-stage .player-control-bar .total-time { grid-column:3; grid-row:2; color:#bbb; }
  .player-stage .player-control-bar .mute-button { display:none; }
  .player-stage .player-control-bar [data-action="speed"] { grid-column:5; grid-row:2; }
  .player-stage .player-control.landscape-episodes { display:grid; grid-column:6; grid-row:2; }
  .player-stage .player-control-bar [data-action="fullscreen"] { grid-column:7; grid-row:2; }
  .player-stage .player-control-bar .player-control { min-width:44px; min-height:44px; padding:8px; font-size:13px; background:none; }
  .player-stage .player-control-bar .player-time { font-size:12px; }
}

/* Fullscreen is offered only after the active episode is confirmed wide. */
.player-stage [data-action="fullscreen"][hidden] { display:none !important; }
.watch-login-backdrop { background:rgba(5,5,9,.66); backdrop-filter:blur(9px); }
.modal.watch-login-card { width:min(380px,calc(100vw - 32px)); max-height:calc(100dvh - 28px); padding:30px 26px 18px; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:linear-gradient(155deg,#29232f 0%,#1a1820 68%); box-shadow:0 24px 80px #0009; }
.watch-login-close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:44px; height:44px; padding:12px; border:0; border-radius:50%; color:#a7a1b0; background:none; }
.watch-login-close:hover { color:white; background:#ffffff0b; }
.watch-login-close svg { width:19px; height:19px; }
.watch-login-emblem { width:56px; height:56px; margin:0 auto 18px; border-radius:16px; box-shadow:0 10px 26px #ec338323; }
.watch-login-emblem img { display:block; width:100%; height:100%; border-radius:16px; }
.modal.watch-login-card h2 { margin:0 14px 10px; font-size:22px; line-height:1.4; font-weight:700; letter-spacing:0; text-align:center; }
.modal.watch-login-card p { margin:0; color:#aca5b7; font-size:13px; line-height:1.75; text-align:center; }
.watch-login-actions { display:grid; gap:6px; margin-top:24px; }
.watch-login-primary,.watch-login-secondary { width:100%; min-height:46px; padding:12px 16px; border:0; border-radius:12px; font:inherit; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.watch-login-primary { color:#fff; font-weight:650; background:linear-gradient(105deg,#9b45ed,#ef3a91); box-shadow:0 5px 20px #dd399322; }
.watch-login-secondary { color:#aca5b7; background:none; }
.watch-login-secondary:hover { color:white; background:#ffffff06; }
.watch-login-primary:focus-visible,.watch-login-secondary:focus-visible,.watch-login-close:focus-visible { outline:2px solid #e2b2ff; outline-offset:3px; }
@media(orientation:landscape) and (max-height:480px) {
 .modal.watch-login-card { width:min(500px,calc(100vw - 36px)); padding:24px 28px 16px; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:18px; }
 .watch-login-emblem { width:48px; height:48px; margin:5px 0 0; }
 .modal.watch-login-card h2 { margin:0 30px 7px 0; font-size:19px; text-align:left; }
 .modal.watch-login-card p { text-align:left; font-size:12px; }
 .watch-login-actions { grid-column:1/-1; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; align-items:center; }
}

/* One complete portrait card in every orientation; scale is isolated from its entrance animation. */
.packet-dialog-layer { display:flex; align-items:center; justify-content:center; padding:24px; }
.packet-dialog-fit { position:relative; flex:0 0 340px; width:340px; transform:scale(var(--packet-dialog-scale,.85)); transform-origin:center; }
.packet-dialog-card { width:340px; max-height:none; overflow:hidden; padding-inline:clamp(16px,5vmin,28px); --ui-small:clamp(.75rem,.69rem + .28vmin,.875rem); --ui-body:clamp(.875rem,.80rem + .32vmin,1rem); --ui-title:clamp(1.375rem,1.12rem + 1vmin,1.75rem); }
.packet-dialog-value { font-size:clamp(2.25rem,9vmin,4.125rem); }
@media (orientation:landscape) and (max-height:600px) {
 .episode-sheet { left:auto !important; right:0; top:0; bottom:0; width:min(420px,max(300px,58vw)); height:100dvh; max-height:100dvh; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 14px; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; overflow:hidden; border-radius:16px 0 0 16px; animation:drawer-in .2s ease both; }
 .episode-sheet .sheet-handle { display:none; }
 .episode-sheet .sheet-header { min-height:44px; margin-bottom:4px; gap:10px; }
 .episode-sheet .sheet-header h2 { margin:0; font-size:16px; }
 .episode-sheet .sheet-header p { font-size:11px; }
 .episode-sheet .close-button { min-width:44px; min-height:44px; }
 .episode-sheet .episode-autoplay-toggle { min-height:44px; margin-bottom:6px; }
 .episode-sheet .episode-range-tabs { min-width:0; margin-bottom:8px; padding-bottom:2px; }
 .episode-sheet .episode-range-tabs button { min-height:44px; }
 .episode-sheet .episode-grid { min-height:0; overflow-y:auto; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); align-content:start; gap:6px; padding:2px 0 8px; overscroll-behavior:contain; }
 .episode-sheet .episode-button { min-height:44px; }
 .episode-sheet .episode-legend { margin-top:6px; gap:8px; font-size:10px; }
}

/* Public withdrawal ticker is visible only on the selected Hot home tab. */
.screen:not(:has([data-home-tab="hot"][aria-current="page"])) .withdrawal-ticker { display:none; }

/* Two controls remain after removing top history; iOS has only search. */
.home-header .home-actions > .search-bar:only-child { grid-column: 1 / -1; }
.home-header .home-actions .home-apk-entry span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
.home-header .home-actions .home-apk-entry { height: auto; max-height: none; min-height: var(--ui-touch); }