/* ==========================================================================
   影视站点模板 style.css（整理 / 响应式版）
   - 合并重复样式
   - Desktop / Web 专用样式
   - 保留顶部导航、搜索、Banner、卡片、详情页、播放器桌面样式
   - 保留原有 class 名，尽量不需要改 HTML
   ========================================================================== */

/* ==========================================================================
   1. 设计变量
   ========================================================================== */
:root {
  color-scheme: dark;
  --c-bg: #0d0f14;
  --c-bg-soft: #11141b;
  --c-bg-card: #171c26;
  --c-bg-hover: #1e2430;

  --c-primary: #4d8cff;
  --c-primary-hover: #6ba3ff;
  --c-primary-soft: rgba(77, 140, 255, 0.14);
  --c-primary-line: rgba(77, 140, 255, 0.45);

  --c-text: #fff;
  --c-text-2: #a6adba;
  --c-text-3: #6c7480;

  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-light: rgba(255, 255, 255, 0.05);

  --c-danger: #ff6b6b;
  --c-warn: #ffc53d;
  --c-success: #34d399;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 6px 20px rgba(77, 140, 255, 0.35);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;

  --container-w: 1280px;
  --header-h: 60px;

  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --f-xs: 12px;
  --f-sm: 13px;
  --f-base: 14px;
  --f-md: 16px;
  --f-lg: 18px;
  --f-xl: 22px;
  --f-2xl: 28px;

  --tr: 0.25s ease;
  --tr-fast: 0.18s ease;
}


/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  overflow-x: hidden;
  font-family: var(--font-family);
  font-size: var(--f-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open,
body.search-open {
  overflow: hidden;
}

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

img {
  border: 0;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-fast);
}

a:hover {
  color: var(--c-primary-hover);
}

ul,
ol {
  list-style: none;
}

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

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

input,
select,
textarea {
  color: inherit;
  outline: none;
}

::selection {
  color: #fff;
  background: var(--c-primary);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
  background: #2a303c;
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
  background: #3a4252;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   3. 通用布局
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.page {
  min-height: 70vh;
  padding-top: calc(var(--header-h) + var(--s-4));
}

.section {
  margin-bottom: var(--s-6);
}

.panel {
  padding: var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
}

.vod-section {
  display: grid;
  gap: var(--s-4);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.section__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--f-lg);
  font-weight: 600;
  line-height: 1.2;
}

.section__title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--c-primary);
}

.stat-count {
  margin-left: var(--s-2);
  font-size: var(--f-sm);
  font-weight: 400;
  color: var(--c-text-3);
}

.section__more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.section__more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tr);
}

.section__more:hover {
  color: var(--c-primary-hover);
}

.section__more:hover::after {
  transform: rotate(45deg) translateX(2px);
}

.divider {
  height: 1px;
  border: 0;
  background: var(--c-border);
}

/* ==========================================================================
   4. 按钮
   ========================================================================== */
.btn {
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-inline: var(--s-5);
  white-space: nowrap;
  user-select: none;
  font-size: var(--f-base);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition:
    color var(--tr),
    background var(--tr),
    border-color var(--tr),
    box-shadow var(--tr),
    transform var(--tr);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  color: #fff;
  background: var(--c-primary);
}

.btn--primary:hover {
  color: #fff;
  background: var(--c-primary-hover);
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--c-text-2);
  background: transparent;
  border-color: var(--c-border);
}

.btn--ghost:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.btn--sm {
  height: 34px;
  padding-inline: var(--s-4);
  font-size: var(--f-sm);
  border-radius: var(--r-sm);
}

.btn--lg {
  height: 48px;
  padding-inline: var(--s-6);
  font-size: var(--f-md);
}

/* ==========================================================================
   5. 顶部导航
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--header-h);
  background: rgba(13, 15, 20, 0.72);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition:
    background var(--tr),
    border-color var(--tr),
    box-shadow var(--tr);
}

.header.is-scrolled {
  background: rgba(13, 15, 20, 0.96);
  border-bottom-color: var(--c-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header__inner {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--s-5);
}

.header__logo {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  font-size: var(--f-xl);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header__logo img {
  display: block;
  width: auto;
  max-width: min(190px, 36vw);
  height: 34px;
  object-fit: contain;
}

.header__nav {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  height: 100%;
  align-items: center;
  transform: translateX(-50%);
}

.nav {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--s-1);
}

.nav > li {
  position: relative;
}

.nav__link {
  position: relative;
  display: flex;
  height: var(--header-h);
  align-items: center;
  gap: 4px;
  padding-inline: var(--s-3);
  white-space: nowrap;
  font-size: var(--f-base);
  color: var(--c-text-2);
}

.nav__link .nav__caret {
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  transition: transform var(--tr);
}

.nav > li:hover > .nav__link,
.nav__link.is-active {
  color: var(--c-text);
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  right: var(--s-3);
  bottom: 0;
  left: var(--s-3);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--c-primary);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 50;
  min-width: 132px;
  padding: var(--s-2);
  visibility: hidden;
  opacity: 0;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  transform: translateY(8px);
  transition:
    opacity var(--tr),
    transform var(--tr),
    visibility var(--tr);
}

.nav > li:hover .nav__dropdown,
.nav > li:focus-within .nav__dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--f-sm);
  color: var(--c-text-2);
  border-radius: var(--r-sm);
}

.nav__dropdown a:hover,
.nav__dropdown a.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
}

/* 桌面搜索 */
.header__search {
  position: relative;
  min-width: 0;
  flex: 0 1 340px;
  margin-left: auto;
}

.search-form {
  display: flex;
  width: 100%;
  gap: var(--s-2);
}

.search-form__input {
  min-width: 0;
  height: 42px;
  flex: 1;
  padding-inline: var(--s-4);
  color: var(--c-text);
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition:
    border-color var(--tr),
    background var(--tr);
}

.search-form__input::placeholder {
  color: var(--c-text-3);
}

.search-form__input:focus {
  background: var(--c-bg);
  border-color: var(--c-primary-line);
}

.search-form__input.is-error {
  border-color: var(--c-danger);
}

.search-form__btn {
  height: 42px;
  flex: 0 0 auto;
  padding-inline: var(--s-5);
  color: #fff;
  font-weight: 500;
  background: var(--c-primary);
  border-radius: var(--r-md);
  transition:
    background var(--tr),
    box-shadow var(--tr);
}

.search-form__btn:hover {
  background: var(--c-primary-hover);
  box-shadow: var(--shadow-primary);
}

/* 手机按钮：桌面隐藏 */
.header__btns {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}

.header__icon-btn {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--c-text-2);
  border-radius: var(--r-md);
  transition:
    color var(--tr-fast),
    background var(--tr-fast);
}

.header__icon-btn:hover,
body.nav-open .header__nav-toggle,
body.search-open .header__search-toggle {
  color: var(--c-text);
  background: var(--c-bg-hover);
}

.header__icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.header__nav-toggle {
  flex-direction: column;
  gap: 4px;
}

.header__nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform var(--tr-fast),
    opacity var(--tr-fast);
}

body.nav-open .header__nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .header__nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .header__nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-mask {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 180;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.66);
  transition:
    opacity var(--tr),
    visibility var(--tr);
}

body.nav-open .nav-mask,
body.search-open .nav-mask {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
   6. 面包屑
   ========================================================================== */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.crumb li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--s-2);
}

.crumb li:not(:last-child)::after {
  content: "/";
  opacity: 0.5;
  color: var(--c-text-3);
}

.crumb a {
  color: var(--c-text-3);
}

.crumb a:hover {
  color: var(--c-primary-hover);
}

.crumb .is-current {
  max-width: min(320px, 60vw);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-text);
  text-overflow: ellipsis;
}

/* ==========================================================================
   7. Banner
   ========================================================================== */
.banner {
    position: relative;

    width: calc(100% - 40px);
    max-width: 1380px;

    height: clamp(300px, 31vw, 470px);

    margin: 0 auto 28px;

    overflow: hidden;

    background: var(--c-bg-card);

    border-radius: 14px;
}

.banner__item {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

.banner__item.is-active {
  visibility: visible;
  opacity: 1;
}

.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner__mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(13, 15, 20, 0.96) 0%,
      rgba(13, 15, 20, 0.78) 28%,
      rgba(13, 15, 20, 0.36) 58%,
      rgba(13, 15, 20, 0.06) 100%
    ),
    linear-gradient(
      0deg,
      rgba(13, 15, 20, 0.58) 0%,
      rgba(13, 15, 20, 0) 42%
    );
}

.banner__content {
  position: absolute;
  top: 50%;
  left: clamp(24px, 4vw, 48px);
  z-index: 2;
  width: min(520px, calc(100% - 96px));
  transform: translateY(-50%);
}

.banner__title {
  display: -webkit-box;
  margin-bottom: var(--s-3);
  overflow: hidden;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.banner__meta {
  margin-bottom: var(--s-3);
  font-size: var(--f-sm);
  color: var(--c-text-2);
}

.banner__desc {
  display: -webkit-box;
  max-width: 560px;
  margin-bottom: var(--s-5);
  overflow: hidden;
  font-size: var(--f-sm);
  color: var(--c-text-3);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.banner__dots {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-4);
  z-index: 5;
  display: flex;
  gap: var(--s-2);
}

.banner__dot {
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--r-full);
  transition:
    width var(--tr),
    background var(--tr);
}

.banner__dot.is-active {
  width: 22px;
  background: var(--c-primary);
}

.banner__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  background: rgba(13, 15, 20, 0.56);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(-50%);
  transition:
    opacity var(--tr),
    visibility var(--tr),
    background var(--tr),
    border-color var(--tr);
}

.banner:hover .banner__arrow,
.banner:focus-within .banner__arrow {
  visibility: visible;
  opacity: 1;
}

.banner__arrow:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.banner__arrow--prev {
  left: var(--s-4);
}

.banner__arrow--next {
  right: var(--s-4);
}

/* ==========================================================================
   8. 视频卡片
   ========================================================================== */
.vod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--s-4);
}

.vod-card {
  min-width: 0;
}

.vod-card__cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--c-bg-hover);
  border-radius: var(--r-md);
  transform: translateZ(0);
  transition:
    transform var(--tr),
    box-shadow var(--tr);
}

.vod-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vod-card__mask {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(
      to top,
      rgba(13, 15, 20, 0.88) 0%,
      rgba(13, 15, 20, 0.25) 45%,
      rgba(13, 15, 20, 0.05) 100%
    );
  transition: opacity var(--tr);
}

.vod-card__badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 2;
  max-width: calc(100% - var(--s-4));
  padding: 2px 8px;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--f-xs);
  line-height: 1.6;
  color: #fff;
  text-overflow: ellipsis;
  background: rgba(13, 15, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.vod-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  padding-inline: var(--s-4);
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: var(--f-sm);
  font-weight: 500;
  color: #fff;
  background: rgba(77, 140, 255, 0.92);
  border-radius: var(--r-full);
  box-shadow: 0 8px 20px rgba(77, 140, 255, 0.4);
  transform: translate(-50%, -50%) scale(0.85);
  transition:
    opacity var(--tr),
    visibility var(--tr),
    transform var(--tr);
}

.vod-card__play svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.vod-card__info {
  padding: var(--s-3) var(--s-1) 0;
}

.vod-card__title {
  margin-bottom: var(--s-1);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--f-base);
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.vod-card__title a {
  color: var(--c-text);
}

.vod-card__title a:hover {
  color: var(--c-primary-hover);
}

.vod-card__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--s-2);
  overflow: hidden;
  font-size: var(--f-xs);
  color: var(--c-text-3);
}

.vod-card__meta .tag {
  padding: 1px 6px;
  font-size: var(--f-xs);
  line-height: 1.5;
  color: var(--c-text-2);
  background: var(--c-bg-hover);
  border-radius: 4px;
}

.vod-card__meta .tag--hot {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
}

@media (hover: hover) and (pointer: fine) {
  .vod-card:hover .vod-card__cover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
  }

  .vod-card:hover .vod-card__img {
    transform: scale(1.06);
  }

  .vod-card:hover .vod-card__mask {
    opacity: 1;
  }

  .vod-card:hover .vod-card__play {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ==========================================================================
   9. 列表筛选
   ========================================================================== */
.filter-card {
  margin-bottom: var(--s-5);
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

.filter-row + .filter-row {
  border-top: 1px dashed var(--c-border-light);
}

.filter-row__label {
  width: 58px;
  flex: 0 0 auto;
  padding-top: 6px;
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.filter-row__tags {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.filter-tag {
  display: inline-flex;
  height: 30px;
  align-items: center;
  padding-inline: var(--s-3);
  white-space: nowrap;
  font-size: var(--f-sm);
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  transition:
    color var(--tr-fast),
    background var(--tr-fast),
    border-color var(--tr-fast);
}

.filter-tag:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.filter-tag.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border-light);
}

.sort-bar__label {
  margin-right: var(--s-2);
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.sort-tab {
  display: inline-flex;
  height: 32px;
  align-items: center;
  padding-inline: var(--s-4);
  font-size: var(--f-sm);
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border-radius: var(--r-sm);
}

.sort-tab:hover {
  color: var(--c-primary-hover);
}

.sort-tab.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-3);
}

.selected-tags__label {
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.selected-tag {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-2) 0 var(--s-3);
  font-size: var(--f-sm);
  color: var(--c-text);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-primary-line);
  border-radius: var(--r-full);
}

.selected-tag .remove {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
  border-radius: var(--r-full);
}

.selected-tag .remove:hover {
  color: #fff;
  background: var(--c-danger);
}

/* ==========================================================================
   10. 分页
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-4);
}

.pagination__btn {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s-3);
  font-size: var(--f-sm);
  color: var(--c-text-2);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition:
    color var(--tr),
    border-color var(--tr),
    background var(--tr),
    transform var(--tr);
}

.pagination__btn:hover {
  color: var(--c-primary-hover);
  border-color: var(--c-primary-line);
  transform: translateY(-2px);
}

.pagination__btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-primary);
}

.pagination__btn.is-disabled {
  opacity: 0.5;
  color: var(--c-text-3);
  pointer-events: none;
}

.pagination__ellipsis {
  display: inline-flex;
  min-width: 24px;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
}

.pagination__info {
  display: inline-flex;
  height: 38px;
  align-items: center;
  padding-inline: var(--s-3);
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

/* ==========================================================================
   11. 详情页
   ========================================================================== */
.detail__main {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
}

.detail__poster {
  width: 240px;
  flex: 0 0 auto;
}

.detail__poster .vod-card__cover {
  border: 1px solid var(--c-border);
}

.detail__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__info {
  min-width: 0;
  flex: 1;
}

.detail__title {
  margin-bottom: var(--s-1);
  overflow-wrap: anywhere;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
}

.detail__subtitle {
  margin-bottom: var(--s-4);
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

.detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  font-size: var(--f-sm);
  color: var(--c-text-2);
  border-top: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
}

.detail__meta-item {
  display: flex;
  min-width: 0;
}

.detail__meta-label {
  flex: 0 0 auto;
  margin-right: var(--s-2);
  color: var(--c-text-3);
}

.detail__meta-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-3);
}

.detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.detail__tags .tag {
  padding: 3px 10px;
  font-size: var(--f-xs);
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
}

.detail__tags .tag:hover {
  color: var(--c-primary-hover);
  border-color: var(--c-primary-line);
}

.detail__desc {
  margin-top: var(--s-5);
}

.detail__desc-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--f-md);
  font-weight: 600;
}

.detail__desc-head::before {
  content: "";
  width: 4px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--c-primary);
  border-radius: 2px;
}

.detail__desc-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--f-sm);
  line-height: 1.9;
  color: var(--c-text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.detail__desc-text.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.detail__desc-toggle {
  margin-top: var(--s-2);
  cursor: pointer;
  font-size: var(--f-sm);
  color: var(--c-primary-hover);
}

.detail__desc-toggle:hover {
  text-decoration: underline;
}

/* ==========================================================================
   12. 播放源 / 集数范围 / 剧集列表
   ========================================================================== */
.play-source__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 14px;
}

.play-source__tab,
.episode-range-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 500;
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition:
    color var(--tr-fast),
    background var(--tr-fast),
    border-color var(--tr-fast);
}

.play-source__tab {
  height: 36px;
  padding-inline: var(--s-4);
  font-size: var(--f-sm);
  border-radius: var(--r-full);
}

.play-source__tab:hover,
.episode-range-btn:hover {
  color: #fff;
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.play-source__tab.is-active,
.episode-range-btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.play-source__panel {
  display: none;
}

.play-source__panel.is-active {
  display: block;
}

.episode-range-tabs {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 4px 0 14px;
}

.episode-range-btn {
  min-width: 92px;
  height: 34px;
  padding-inline: 14px;
  font-size: var(--f-sm);
  line-height: 1;
  border-radius: 8px;
}

/* 剧集列表：只纵向滚动 */
.episode-scroll,
.episode-scroll.no-scrollbar {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  width: 100%;
  max-height: 280px;
  align-content: start;
  gap: var(--s-2);
  padding: 4px 10px 6px 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
  scrollbar-width: thin !important;
  scrollbar-color: #3b4658 rgba(255, 255, 255, 0.03) !important;
  -ms-overflow-style: auto !important;
}

.episode-scroll::-webkit-scrollbar,
.episode-scroll.no-scrollbar::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 0 !important;
}

.episode-scroll::-webkit-scrollbar-track,
.episode-scroll.no-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--r-full);
}

.episode-scroll::-webkit-scrollbar-thumb,
.episode-scroll.no-scrollbar::-webkit-scrollbar-thumb {
  background: #3b4658;
  border-radius: var(--r-full);
}

.episode-scroll::-webkit-scrollbar-thumb:hover,
.episode-scroll.no-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--c-primary);
}

.episode-scroll .episode-btn {
  display: flex;
  width: 100%;
  min-width: 0 !important;
  height: 38px;
  flex: none !important;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s-2);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--f-sm);
  font-weight: 400;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  transition:
    color var(--tr-fast),
    background var(--tr-fast),
    border-color var(--tr-fast);
}

.episode-scroll .episode-btn:hover {
  color: #fff;
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.episode-scroll .episode-btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 3px 12px rgba(77, 140, 255, 0.2);
}

.episode-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.episode-row__title {
  min-width: 0;
  font-size: var(--f-md);
  font-weight: 600;
}

.episode-row__head .stat-count {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: var(--f-sm);
  color: var(--c-text-3);
}

/* ==========================================================================
   13. 播放器
   ========================================================================== */
.player__wrap {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin-bottom: var(--s-4);
  overflow: hidden !important;
  background: #000 !important;
  border-radius: var(--r-lg);
}
/* =========================================================
   苹果CMS播放器容器
   不要再强制所有 iframe 显示
   ========================================================= */

.player__wrap #MacPlayer,
.player__wrap .MacPlayer,
.player__wrap #playleft {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}

/*
 * 真正的播放 iframe
 *
 * 排除苹果CMS自己的 buffer / install iframe
 */
.player__wrap iframe:not(#buffer):not(#install) {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    border: 0 !important;

    z-index: 10;
}

/*
 * 苹果CMS辅助 iframe
 *
 * 这两个绝对不能被模板 CSS 强制铺满
 */
.player__wrap iframe#buffer,
.player__wrap iframe#install {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;

    z-index: -1 !important;
}

/* HTML5 video */
.player__wrap video,
.player__wrap #MacPlayer video,
.player__wrap .MacPlayer video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: #000;
}

/* DPlayer / VideoJS */
.player__wrap .dplayer,
.player__wrap .dplayer-video-wrap,
.player__wrap .video-js {
  width: 100% !important;
  height: 100% !important;
}

.player__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: center;
  font-size: var(--f-md);
  color: var(--c-text-3);
}

.player__info {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border-light);
}

.player__title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--f-lg);
  font-weight: 600;
  text-overflow: ellipsis;
}

.player__ep {
  flex: 0 0 auto;
  padding: 2px 10px;
  font-size: var(--f-sm);
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-radius: var(--r-full);
}

.player__nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-2);
}

.player__nav a {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s-3);
  white-space: nowrap;
  font-size: var(--f-sm);
  color: var(--c-text-2);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  transition:
    color var(--tr),
    background var(--tr),
    border-color var(--tr);
}

.player__nav a:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.player__nav a.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* ==========================================================================
   18. 可访问性 / 动画偏好
   ========================================================================== */
/* ========================================================================== 
   Desktop profile settings
   ========================================================================== */
.profile-settings-page {
  min-height:100vh;
  padding:calc(var(--header-h) + 34px) 0 72px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.035), transparent 28%),
    #0f1115;
}
.profile-settings-shell { max-width:1040px; }
.profile-settings-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:22px; }
.profile-settings-eyebrow { display:block; margin-bottom:6px; color:#7f858f; font-size:9px; font-weight:750; letter-spacing:.18em; }
.profile-settings-heading h1 { color:#f2f3f5; font-size:28px; font-weight:680; letter-spacing:-.02em; }
.profile-settings-heading p { margin-top:6px; color:#7e848d; font-size:11px; }
.profile-settings-back { display:inline-flex; height:36px; align-items:center; gap:7px; padding:0 11px; color:#aeb3bb; font-size:10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.profile-settings-back:hover { color:#f0f1f3; background:rgba(255,255,255,.045); }
.profile-settings-back svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.profile-settings-grid { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
.profile-settings-summary,
.profile-settings-card { background:#17191d; border:1px solid rgba(255,255,255,.07); border-radius:15px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.profile-settings-summary { display:flex; flex-direction:column; align-items:center; padding:26px 22px 22px; text-align:center; }
.profile-settings-avatar-wrap { position:relative; width:92px; height:92px; margin-bottom:14px; }
.profile-settings-avatar-wrap > img { width:100%; height:100%; object-fit:cover; background:#26292f; border:1px solid rgba(255,255,255,.10); border-radius:50%; }
.profile-avatar-action { position:absolute; right:0; bottom:2px; display:grid; width:31px; height:31px; place-items:center; cursor:pointer; color:#d9dde3; background:#23262b; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,.24); }
.profile-avatar-action:hover { color:#fff; background:#2d3036; }
.profile-avatar-action:focus-within { outline:2px solid #5c9bff; outline-offset:2px; }
.profile-avatar-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.profile-settings-summary > strong { max-width:100%; overflow:hidden; color:#f1f2f4; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.profile-settings-summary > span { margin-top:3px; color:#808690; font-size:10px; }
.profile-settings-summary > p { margin-top:12px; color:#707680; font-size:9px; }
.profile-status-chip { display:inline-flex; height:26px; align-items:center; gap:6px; margin-top:12px; padding:0 9px; color:#9ea4ad; font-size:9px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055); border-radius:999px; }
.profile-status-chip span { width:6px; height:6px; background:#49b982; border-radius:50%; box-shadow:0 0 0 3px rgba(73,185,130,.08); }
.profile-avatar-upload { width:100%; height:36px; margin-top:18px; color:#d9dde3; font-size:10px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.profile-avatar-upload:hover:not(:disabled) { color:#fff; background:rgba(255,255,255,.08); }
.profile-avatar-upload:disabled { opacity:.42; cursor:not-allowed; }
.profile-settings-summary > small { margin-top:9px; color:#686e77; font-size:8px; line-height:1.55; }
.profile-settings-card { padding:24px; }
.profile-settings-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:17px; }
.profile-settings-section-head > div > span { display:block; margin-bottom:4px; color:#6f7680; font-size:8px; font-weight:750; letter-spacing:.16em; }
.profile-settings-section-head h2 { color:#eceef1; font-size:16px; font-weight:650; }
.profile-settings-section-head p { max-width:330px; color:#737983; font-size:9px; line-height:1.55; text-align:right; }
.profile-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.profile-form-grid--password { row-gap:13px; }
.profile-field { display:grid; gap:7px; }
.profile-field--wide { grid-column:1 / -1; }
.profile-field > span { color:#969ca5; font-size:9px; font-weight:600; }
.profile-field input { width:100%; height:40px; padding:0 12px; color:#e8eaed; font-size:10px; background:#111317; border:1px solid rgba(255,255,255,.075); border-radius:10px; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.profile-field input::placeholder { color:#5f6570; }
.profile-field input:hover:not(:disabled) { border-color:rgba(255,255,255,.11); }
.profile-field input:focus { background:#0e1013; border-color:rgba(92,153,255,.46); box-shadow:0 0 0 3px rgba(77,140,255,.08); }
.profile-field input:disabled { color:#767c85; background:#14161a; cursor:not-allowed; }
.profile-settings-divider { height:1px; margin:24px 0; background:rgba(255,255,255,.065); }
.profile-password-meter { display:grid; grid-template-columns:repeat(3,48px) minmax(0,1fr); align-items:center; gap:5px; margin-top:10px; }
.profile-password-meter > span { height:3px; background:#2b2e34; border-radius:999px; }
.profile-password-meter > span.is-active { background:#5b94ee; }
.profile-password-meter small { margin-left:4px; color:#6d737d; font-size:8px; }
.profile-form-message { min-height:18px; margin-top:16px; color:#df7379; font-size:9px; }
.profile-form-message.is-success { color:#66bf91; }
.profile-settings-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.profile-button { display:inline-flex; min-width:94px; height:38px; align-items:center; justify-content:center; padding:0 15px; font-size:10px; font-weight:620; border-radius:10px; }
.profile-button--ghost { color:#a8adb5; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.profile-button--ghost:hover { color:#f0f1f3; background:rgba(255,255,255,.055); }
.profile-button--primary { color:#fff; background:#4385ef; border:1px solid #4385ef; }
.profile-button--primary:hover { background:#4d8ff8; }
.profile-button--primary:disabled { opacity:.58; cursor:wait; }
.profile-button:focus-visible,
.profile-avatar-upload:focus-visible { outline:2px solid rgba(92,153,255,.92); outline-offset:2px; }
html[data-theme="light"] .profile-settings-page { background:#f3f4f6; }
html[data-theme="light"] .profile-settings-heading h1 { color:#202328; }
html[data-theme="light"] .profile-settings-back { color:#626873; border-color:rgba(20,25,32,.10); }
html[data-theme="light"] .profile-settings-back:hover { color:#202328; background:#fff; }
html[data-theme="light"] .profile-settings-summary,
html[data-theme="light"] .profile-settings-card { background:#fff; border-color:rgba(20,25,32,.08); box-shadow:0 18px 44px rgba(27,32,39,.08); }
html[data-theme="light"] .profile-settings-summary > strong,
html[data-theme="light"] .profile-settings-section-head h2 { color:#202328; }
html[data-theme="light"] .profile-field input { color:#272b31; background:#f6f7f8; border-color:rgba(20,25,32,.09); }
html[data-theme="light"] .profile-field input:focus { background:#fff; border-color:rgba(68,116,185,.34); }
html[data-theme="light"] .profile-settings-divider { background:rgba(20,25,32,.07); }
html[data-theme="light"] .profile-avatar-upload { color:#565c66; background:#f5f6f7; border-color:rgba(20,25,32,.08); }

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

/* =========================================================
   播放页 - 影片 Hub
   海报 / 标题 + 剧集 Dropdown + 影片资料 Dropdown
   ========================================================= */

.play-hub {
    margin-bottom: var(--s-5);
}

/* =========================================================
   顶部影片信息
   ========================================================= */

.play-hub__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.play-hub__poster {
    width: 118px;
    flex: 0 0 118px;
    overflow: hidden;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.play-hub__poster img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.play-hub__main {
    min-width: 0;
    flex: 1;
    padding-top: 3px;
}

.play-hub__title {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--c-text);
}

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

.play-hub__tags span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text-2);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
}

/* =========================================================
   两个 Dropdown 共用
   ========================================================= */

.play-hub-dropdown {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.play-hub-dropdown__summary {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--c-text-2);
    transition:
        color var(--tr-fast),
        background var(--tr-fast);
}

.play-hub-dropdown__summary::-webkit-details-marker {
    display: none;
}

.play-hub-dropdown__summary::marker {
    content: "";
}

.play-hub-dropdown__summary:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, 0.035);
}

.play-hub-dropdown__name {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}

.play-hub-dropdown__right {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.play-hub-dropdown__right .stat-count {
    margin-left: 0;
}

.play-hub-dropdown__arrow {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.play-hub-dropdown[open] > .play-hub-dropdown__summary .play-hub-dropdown__arrow {
    transform: translateY(2px) rotate(225deg);
}

.play-hub-dropdown__content {
    padding: 14px 15px 16px;
    border-top: 1px solid var(--c-border-light);
}

/* =========================================================
   剧集 Dropdown
   ========================================================= */

.play-hub-dropdown--episodes .play-source__tabs {
    margin-bottom: 14px;
}

.play-hub-dropdown--episodes .episode-range-tabs:empty {
    display: none;
}

/* =========================================================
   影片资料
   ========================================================= */

.play-info-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.75;
    border-bottom: 1px solid var(--c-border-light);
}

.play-info-row:first-child {
    padding-top: 2px;
}

.play-info-row__label {
    color: var(--c-text-3);
}

.play-info-row__value {
    min-width: 0;
    color: var(--c-text-2);
    overflow-wrap: anywhere;
}

.play-info-desc {
    padding-top: 16px;
}

.play-info-desc__title {
    position: relative;
    margin-bottom: 10px;
    padding-left: 11px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.play-info-desc__title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 15px;
    background: var(--c-primary);
    border-radius: 4px;
    transform: translateY(-50%);
}

.play-info-desc__text {
    font-size: 14px;
    line-height: 1.9;
    color: var(--c-text-2);
    overflow-wrap: anywhere;
}



.watch-later-btn {
    display: inline-flex;
    height: 34px;

    align-items: center;
    justify-content: center;

    padding: 0 13px;

    cursor: pointer;

    white-space: nowrap;

    font-size: var(--f-sm);

    color: var(--c-text-2);

    background: transparent;

    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);

    transition:
        color var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast);
}

.watch-later-btn:hover {
    color: #fff;

    background: var(--c-primary-soft);

    border-color: var(--c-primary-line);
}

.watch-later-btn.is-saved {
    color: #fff;

    background: var(--c-primary);

    border-color: var(--c-primary);
}



/* =========================================================
   Navbar - 收藏
   ========================================================= */

.nav__watch-later {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 收藏数量 */

.watch-later-count {
    display: inline-flex;

    min-width: 18px;
    height: 18px;

    align-items: center;
    justify-content: center;

    padding: 0 5px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    color: #fff;

    background: var(--c-primary);

    border-radius: var(--r-full);
}

/* 数量很多的时候也不会变形 */

.watch-later-count {
    flex: 0 0 auto;
}



/* =========================================================
   我的收藏页面
   ========================================================= */

.watch-page__head {
    margin-bottom: 20px;
}

/* 清空 */

.watch-page__clear {
    display: inline-flex;

    height: 34px;

    align-items: center;
    justify-content: center;

    padding: 0 13px;

    cursor: pointer;

    font-size: 13px;

    color: var(--c-text-3);

    background: transparent;

    border: 1px solid var(--c-border);

    border-radius: var(--r-sm);

    transition:
        color var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast);
}

.watch-page__clear:hover {
    color: #fff;

    background: rgba(255, 107, 107, 0.12);

    border-color: rgba(255, 107, 107, 0.45);
}

/* =========================================================
   收藏 Grid
   ========================================================= */

.watch-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px, 1fr)
        );

    gap: 20px;
}

/* =========================================================
   收藏卡片
   ========================================================= */

.watch-card {
    min-width: 0;
}

.watch-card__cover {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 3 / 4;

    background: var(--c-bg-card);

    border: 1px solid var(--c-border-light);

    border-radius: var(--r-md);
}

.watch-card__cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}

.watch-card__cover:hover img {
    transform: scale(1.04);
}

/* 播放按钮 */

.watch-card__play {
    position: absolute;

    right: 10px;
    bottom: 10px;

    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    font-size: 12px;

    color: #fff;

    background: rgba(13, 15, 20, 0.78);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--r-full);

    backdrop-filter: blur(6px);

    opacity: 0;

    transform: translateY(5px);

    transition:
        opacity var(--tr-fast),
        transform var(--tr-fast);
}

.watch-card__cover:hover
.watch-card__play {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================================
   卡片信息
   ========================================================= */

.watch-card__body {
    padding: 10px 2px 0;
}

.watch-card__title {
    overflow: hidden;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 550;

    line-height: 1.5;

    text-overflow: ellipsis;
}

.watch-card__title a {
    color: var(--c-text);
}

.watch-card__actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;
}

.watch-card__continue,
.watch-card__remove {
    display: inline-flex;

    height: 30px;

    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 12px;

    border-radius: var(--r-sm);
}

.watch-card__continue {
    color: #fff;

    background: var(--c-primary);
}

.watch-card__continue:hover {
    color: #fff;

    background: var(--c-primary-hover);
}

.watch-card__remove {
    cursor: pointer;

    color: var(--c-text-3);

    background: var(--c-bg-soft);

    border: 1px solid var(--c-border);
}

.watch-card__remove:hover {
    color: #fff;

    border-color: rgba(255,255,255,.18);
}

/* =========================================================
   收藏为空
   ========================================================= */

.watch-empty {
    min-height: 360px;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    text-align: center;

    background: var(--c-bg-card);

    border: 1px solid var(--c-border-light);

    border-radius: var(--r-lg);
}

.watch-empty__icon {
    margin-bottom: 12px;

    font-size: 46px;

    line-height: 1;

    color: var(--c-text-3);
}

.watch-empty h2 {
    margin-bottom: 6px;

    font-size: 18px;
}

.watch-empty p {
    margin-bottom: 20px;

    font-size: 13px;

    color: var(--c-text-3);
}



/* =========================================================
   播放页 - 收藏 / 喜欢
   ========================================================= */

.play-hub__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 14px;
}

.play-action-btn {
    display: inline-flex;

    height: 34px;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 0 13px;

    cursor: pointer;

    white-space: nowrap;

    font-size: 13px;

    color: var(--c-text-2);

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--c-border);

    border-radius: var(--r-full);

    transition:
        color var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast),
        transform var(--tr-fast);
}

.play-action-btn:hover {
    color: #fff;

    background: var(--c-primary-soft);

    border-color: var(--c-primary-line);
}

.play-action-btn:active {
    transform: scale(0.96);
}

.play-action-btn__icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 16px;
    line-height: 1;
}

/* 收藏以后 */

#favoriteBtn.is-active {
    color: #fff;

    background: var(--c-primary);

    border-color: var(--c-primary);
}

/* 喜欢以后 */

#likeBtn.is-active {
    color: #fff;

    background: rgba(255, 107, 129, 0.16);

    border-color: rgba(255, 107, 129, 0.55);
}

#likeBtn.is-active .play-action-btn__icon {
    color: #ff6b81;
}



/* =========================================================
   Footer
   ========================================================= */

.footer {
    margin-top: 48px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 20, 27, 0.72),
            rgba(13, 15, 20, 0.96)
        );

    border-top: 1px solid var(--c-border-light);
}

.footer__inner {
    padding-top: 32px;
    padding-bottom: 30px;
}

/* =========================================================
   Footer 顶部
   ========================================================= */

.footer__top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 32px;
}

.footer__brand {
    min-width: 0;
}

.footer__logo {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 18px;
    font-weight: 650;

    color: var(--c-text);
}

.footer__logo:hover {
    color: var(--c-primary-hover);
}

.footer__desc {
    max-width: 420px;

    font-size: 13px;
    line-height: 1.8;

    color: var(--c-text-3);
}

/* =========================================================
   Footer links
   ========================================================= */

.footer__links {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 10px 18px;
}

.footer__links a {
    font-size: 13px;

    color: var(--c-text-2);

    transition:
        color var(--tr-fast);
}

.footer__links a:hover {
    color: var(--c-primary-hover);
}

/* =========================================================
   分割线
   ========================================================= */

.footer__divider {
    height: 1px;

    margin: 24px 0 18px;

    background: var(--c-border-light);
}

/* =========================================================
   Footer 底部
   ========================================================= */

.footer__bottom {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.footer__copy,
.footer__disclaimer {
    margin: 0;

    font-size: 12px;
    line-height: 1.75;

    color: var(--c-text-3);
}

.footer__copy a {
    color: var(--c-text-2);
}

.footer__copy a:hover {
    color: var(--c-primary-hover);
}

.footer__sep {
    margin: 0 6px;

    color: var(--c-text-3);
}



.footer__logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
}

.footer__logo img {
    display: block;

    width: auto;
    height: 34px;

    max-width: 180px;

    object-fit: contain;
}



/* ==========================================================================
   19. 主题 / Light Mode
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --c-bg: #f5f7fa;
  --c-bg-soft: #eef1f5;
  --c-bg-card: #fff;
  --c-bg-hover: #e7ebf0;
  --c-text: #151922;
  --c-text-2: #4f5968;
  --c-text-3: #7b8492;
  --c-border: rgba(15, 23, 42, .12);
  --c-border-light: rgba(15, 23, 42, .07);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
  --shadow-lg: 0 16px 44px rgba(15, 23, 42, .14);
}

/* 页面顶部始终使用深色 Header，确保 Banner 上的导航清晰 */
.header:not(.is-scrolled) {
  background: rgba(13, 15, 20, .94);
  border-bottom-color: rgba(255, 255, 255, .06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

.header:not(.is-scrolled) .nav__link {
  color: #c4cbd5;
}

.header:not(.is-scrolled) .nav__link:hover,
.header:not(.is-scrolled) .nav__link.is-active {
  color: #fff;
}

.header:not(.is-scrolled) .nav__link.is-active::after,
.header:not(.is-scrolled) .watch-later-count {
  background: var(--c-primary);
}

.header:not(.is-scrolled) .watch-later-count {
  color: #fff;
}

/* Light Mode 滚动后切换成浅色 Header */
html[data-theme="light"] .header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: rgba(15, 23, 42, .08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, .10);
}

html[data-theme="light"] .header.is-scrolled .nav__link {
  color: #4f5968;
}

html[data-theme="light"] .header.is-scrolled .nav__link:hover,
html[data-theme="light"] .header.is-scrolled .nav__link.is-active {
  color: #151922;
}

/* Dark Mode 滚动后的 Header */
html[data-theme="dark"] .header.is-scrolled {
  background: rgba(13, 15, 20, .97);
}

html[data-theme="dark"] .header.is-scrolled .nav__link {
  color: #aeb7c4;
}

html[data-theme="dark"] .header.is-scrolled .nav__link:hover,
html[data-theme="dark"] .header.is-scrolled .nav__link.is-active {
  color: #fff;
}

/* Light Mode Footer */
html[data-theme="light"] .footer {
  background: linear-gradient(180deg, #fff, #f5f7fa);
  border-top-color: rgba(15, 23, 42, .08);
}

/* ========================================================================== 
   20. Desktop compact quick menu
   ========================================================================== */
.desktop-quick {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 650;
  display: flex;
  width: 46px;
  flex-direction: column;
  align-items: stretch;
  padding: 4px;
  color: #aeb3bc;
  background: rgba(27,28,32,.93);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 15px;
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
  backdrop-filter: blur(18px) saturate(1.02);
}
.desktop-quick__button {
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  padding:0;
  color:inherit;
  background:transparent;
  border-radius:11px;
  transition:color .14s ease, background .14s ease, transform .14s ease;
}
.desktop-quick__button:hover,
.desktop-quick.is-open .desktop-quick__more { color:#f2f3f5; background:rgba(255,255,255,.065); }
.desktop-quick__button:active { transform:scale(.94); }
.desktop-quick__button:focus-visible { outline:2px solid rgba(92,153,255,.92); outline-offset:1px; }
.desktop-quick__button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.desktop-quick__divider { display:block; height:1px; margin:2px 6px; background:rgba(255,255,255,.075); }
.desktop-quick__more { display:grid; place-items:center; }
.desktop-quick__more-icon { width:19px !important; height:19px !important; fill:currentColor !important; stroke:none !important; }
.desktop-quick__more-icon circle { fill:currentColor; stroke:none; }

.desktop-quick-menu {
  position:absolute;
  right:calc(100% + 9px);
  bottom:0;
  width:202px;
  padding:6px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  color:#d4d7dc;
  background:rgba(27,28,32,.975);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(20px) saturate(1.02);
  backdrop-filter:blur(20px) saturate(1.02);
  transform:translate(4px,4px) scale(.975);
  transform-origin:bottom right;
  transition:opacity .14s ease, transform .16s cubic-bezier(.2,.8,.2,1), visibility .14s ease;
}
.desktop-quick.is-open .desktop-quick-menu { visibility:visible; opacity:1; pointer-events:auto; transform:translate(0,0) scale(1); }
.desktop-quick-menu__item { position:relative; }
.desktop-quick-menu__row {
  display:grid;
  width:100%;
  min-height:40px;
  grid-template-columns:18px minmax(0,1fr) auto 11px;
  align-items:center;
  gap:8px;
  padding:0 9px;
  color:#c4c8cf;
  font-size:11px;
  text-align:left;
  border-radius:8px;
  transition:color .14s ease, background .14s ease;
}
.desktop-quick-menu__row:hover,
.desktop-quick-menu__item.is-submenu-open > .desktop-quick-menu__row { color:#f1f2f4; background:rgba(255,255,255,.06); }
.desktop-quick-menu__row:focus-visible,
.desktop-quick-submenu button:focus-visible { outline:2px solid rgba(92,153,255,.92); outline-offset:1px; }
.desktop-quick-menu__row > svg:first-child { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.desktop-quick-menu__row > span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.desktop-quick-menu__row > small { color:#858b95; font-size:9px; }
.quick-row-chevron { width:10px !important; height:10px !important; fill:none; stroke:#6d737c; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.desktop-quick-submenu {
  position:absolute;
  top:-6px;
  right:calc(100% + 8px);
  width:148px;
  padding:6px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:rgba(27,28,32,.985);
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  box-shadow:0 16px 42px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  transform:translateX(5px) scale(.98);
  transform-origin:top right;
  transition:opacity .13s ease, transform .15s ease, visibility .13s ease;
}
.desktop-quick-menu__item.is-submenu-open > .desktop-quick-submenu,
.desktop-quick-menu__item:focus-within > .desktop-quick-submenu { visibility:visible; opacity:1; pointer-events:auto; transform:translateX(0) scale(1); }
.desktop-quick-submenu button {
  display:grid;
  width:100%;
  min-height:37px;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:6px;
  padding:0 8px;
  color:#afb4bc;
  font-size:10px;
  text-align:left;
  border-radius:8px;
}
.desktop-quick-submenu button:hover { color:#f0f1f3; background:rgba(255,255,255,.055); }
.desktop-quick-submenu button.is-active { color:#e8edf7; }
.desktop-quick-submenu button small { color:#747a84; font-size:8px; }
.quick-check { width:13px; height:13px; visibility:hidden; fill:none; stroke:#5c9bff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.desktop-quick-submenu button.is-active .quick-check { visibility:visible; }

html[data-theme="light"] .desktop-quick { color:#686e77; background:rgba(250,250,251,.95); border-color:rgba(20,25,32,.09); box-shadow:0 12px 34px rgba(25,31,39,.15); }
html[data-theme="light"] .desktop-quick__divider { background:rgba(20,25,32,.08); }
html[data-theme="light"] .desktop-quick__button:hover,
html[data-theme="light"] .desktop-quick.is-open .desktop-quick__more { color:#22262c; background:rgba(20,25,32,.055); }
html[data-theme="light"] .desktop-quick-menu,
html[data-theme="light"] .desktop-quick-submenu { color:#30343a; background:rgba(252,252,253,.985); border-color:rgba(20,25,32,.09); box-shadow:0 16px 44px rgba(25,31,39,.15); }
html[data-theme="light"] .desktop-quick-menu__row { color:#555b65; }
html[data-theme="light"] .desktop-quick-menu__row:hover,
html[data-theme="light"] .desktop-quick-menu__item.is-submenu-open > .desktop-quick-menu__row { color:#20242a; background:rgba(20,25,32,.05); }
html[data-theme="light"] .desktop-quick-submenu button { color:#565c66; }
html[data-theme="light"] .desktop-quick-submenu button:hover { color:#20242a; background:rgba(20,25,32,.05); }
html[data-theme="light"] .desktop-quick-submenu button.is-active { color:#245fac; }


/* =========================================================
   Top Promo Banner
   ========================================================= */

.top-promo {
    margin-bottom: 14px;
}

.top-promo__inner {
    display: flex;
    height: 44px;
    align-items: center;
    gap: 14px;
    overflow: hidden;

    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 11px;
}

.top-promo__badge {
    display: flex;
    height: 100%;
    flex: 0 0 auto;
    align-items: center;

    padding: 0 16px;

    font-size: 12px;
    font-weight: 600;
    color: #fff;

    background: var(--c-primary);
}

.top-promo__viewport {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.top-promo__track {
    display: flex;
    width: max-content;
    align-items: center;

    animation: top-promo-scroll 28s linear infinite;
}

.top-promo__item {
    flex: 0 0 auto;

    padding-right: 56px;

    white-space: nowrap;

    font-size: 13px;
    color: var(--c-text-2);
}

.top-promo__inner:hover .top-promo__track {
    animation-play-state: paused;
}

@keyframes top-promo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   Watch Context Bar
   ========================================================= */

.watch-context {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    min-height: 54px;
    align-items: center;
    gap: 16px;

    margin-bottom: 12px;

    border-bottom: 1px solid var(--c-border-light);
}

.watch-context__back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;

    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);

    transition:
        color var(--tr-fast),
        transform var(--tr-fast);
}

.watch-context__back:hover {
    color: var(--c-text);
    transform: translateX(-2px);
}

.watch-context__back svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watch-context__title {
    max-width: min(460px, 42vw);

    overflow: hidden;
    white-space: nowrap;

    text-align: center;

    font-size: 15px;
    font-weight: 620;
    color: var(--c-text);

    text-overflow: ellipsis;
}

.watch-context__status {
    justify-self: end;

    padding: 3px 9px;

    font-size: 11px;
    font-weight: 500;
    color: var(--c-primary-hover);

    background: var(--c-primary-soft);
    border-radius: var(--r-full);
}


/* ==========================================================================
   Homepage - Modern Streaming Cards
   ========================================================================== */

.home-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 22px 16px;
}


/* =========================================================
   Card
   ========================================================= */

.home-card {
    min-width: 0;
}

.home-card__media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 3 / 4;

    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;

    box-shadow: var(--shadow-sm);

    transform: translateZ(0);

    transition:
        transform var(--tr),
        border-color var(--tr),
        box-shadow var(--tr);
}


/* Poster */

.home-card__poster-link {
    position: absolute;
    inset: 0;

    display: block;
}

.home-card__img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .3s ease;
}


/* =========================================================
   Quality
   ========================================================= */

.home-card__quality {
    position: absolute;

    top: 9px;
    left: 9px;

    z-index: 4;

    padding: 3px 8px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;

    color: #fff;

    background: rgba(12, 14, 18, .72);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 7px;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


/* =========================================================
   Score
   ========================================================= */

.home-card__score {
    position: absolute;

    top: 9px;
    right: 9px;

    z-index: 4;

    padding: 4px 8px;

    font-size: 12px;
    font-weight: 600;

    color: #ffd34d;

    background: rgba(12,14,18,.72);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


/* =========================================================
   Hover overlay
   ========================================================= */

.home-card__overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(7,9,13,.92) 0%,
            rgba(7,9,13,.58) 38%,
            rgba(7,9,13,.08) 72%
        );

    transition:
        opacity var(--tr),
        visibility var(--tr);
}


/* =========================================================
   Actions
   ========================================================= */

.home-card__actions {
    position: absolute;

    right: 12px;
    bottom: 14px;
    left: 12px;

    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 7px;

    visibility: hidden;
    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity var(--tr),
        visibility var(--tr),
        transform var(--tr);
}

.home-card__action {
    display: flex;

    width: 100%;
    height: 38px;

    align-items: center;
    justify-content: center;

    gap: 6px;

    font-size: 12px;
    font-weight: 600;

    border-radius: 10px;

    transition:
        transform var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast);
}

.home-card__action:active {
    transform: scale(.97);
}


/* Play */

.home-card__action--play {
    color: #fff;

    background: var(--c-primary);

    box-shadow: 0 7px 18px rgba(77,140,255,.32);
}

.home-card__action--play:hover {
    color: #fff;

    background: var(--c-primary-hover);
}

.home-card__action--play svg {
    width: 14px;
    height: 14px;

    fill: currentColor;
}


/* Detail */

.home-card__action--detail {
    color: rgba(255,255,255,.92);

    background: rgba(20,24,31,.72);
    border: 1px solid rgba(255,255,255,.20);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.home-card__action--detail:hover {
    color: #fff;

    background: rgba(32,38,49,.92);
    border-color: rgba(255,255,255,.32);
}


/* =========================================================
   Info
   ========================================================= */

.home-card__info {
    padding: 10px 2px 0;
}

.home-card__title {
    overflow: hidden;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-overflow: ellipsis;
}

.home-card__title a {
    color: var(--c-text);
}

.home-card__title a:hover {
    color: var(--c-primary-hover);
}

.home-card__meta {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 7px;

    margin-top: 4px;

    overflow: hidden;

    font-size: 12px;

    color: var(--c-text-3);
}

.home-card__meta span {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.home-card__meta span + span::before {
    content: "·";

    margin-right: 7px;

    color: var(--c-text-3);
}


/* =========================================================
   Desktop hover
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .home-card:hover .home-card__media {
        border-color: var(--c-primary-line);

        box-shadow:
            0 14px 36px rgba(0,0,0,.34);

        transform: translateY(-5px);
    }

    .home-card:hover .home-card__img {
        transform: scale(1.045);
    }

    .home-card:hover .home-card__overlay,
    .home-card:hover .home-card__actions {
        visibility: visible;
        opacity: 1;
    }

    .home-card:hover .home-card__actions {
        transform: translateY(0);
    }

}


/* ==========================================================================
   Light Mode
   ========================================================================== */

html[data-theme="light"] .home-card__media {
    background: #fff;

    border-color: rgba(15,23,42,.10);

    box-shadow:
        0 3px 14px rgba(15,23,42,.07);
}

html[data-theme="light"] .home-card:hover .home-card__media {
    border-color: rgba(77,140,255,.42);

    box-shadow:
        0 16px 34px rgba(15,23,42,.14);
}


/* Desktop */
@media (min-width: 1101px) {

    .banner {
        height: clamp(330px, 31vw, 470px);
    }

}


/* ==========================================================================
   Filter Card
   ========================================================================== */

.filter-card {
    margin-bottom: 28px;
    padding: 14px 18px;

    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;

    box-shadow: var(--shadow-sm);
}


/* Header */

.filter-card__head {
    display: none;
    align-items: center;
    justify-content: space-between;

    min-height: 50px;
}

.filter-card__heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-card__heading > svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--c-primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.filter-card__heading > div {
    display: flex;
    flex-direction: column;
}

.filter-card__heading strong {
    font-size: 14px;
    color: var(--c-text);
}

.filter-card__heading span {
    margin-top: 2px;

    font-size: 11px;
    color: var(--c-text-3);
}

.filter-card__toggle {
    display: none;
}


/* Rows */

.filter-row {
    display: grid;

    grid-template-columns:
        58px minmax(0, 1fr);

    gap: 12px;

    align-items: start;

    padding: 10px 0;

    border-bottom:
        1px dashed
        var(--c-border-light);
}

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

.filter-row__label {
    padding-top: 5px;

    font-size: 12px;
    font-weight: 500;

    color: var(--c-text-3);
}


/* Options */

.filter-row__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.filter-tag {
    display: inline-flex;

    min-height: 28px;

    align-items: center;
    justify-content: center;

    padding: 0 11px;

    white-space: nowrap;

    font-size: 12px;
    font-weight: 500;

    color: var(--c-text-2);

    background: var(--c-bg-soft);

    border: 1px solid transparent;
    border-radius: 999px;

    transition:
        color var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast),
        transform var(--tr-fast);
}

.filter-tag:hover {
    color: var(--c-text);

    background: var(--c-bg-hover);

    transform: translateY(-1px);
}

.filter-tag.is-active {
    color: #fff;

    background: var(--c-primary);

    box-shadow:
        0 5px 14px
        rgba(77, 140, 255, .20);
}

html[data-theme="light"] .filter-card {
    background: rgba(255, 255, 255, .78);

    border-color: rgba(15, 23, 42, .08);

    box-shadow:
        0 8px 28px
        rgba(15, 23, 42, .055);
}

html[data-theme="light"] .filter-tag {
    color: #566171;

    background: #eef1f5;
}

html[data-theme="light"] .filter-tag:hover {
    color: #151922;

    background: #e4e9ef;
}

html[data-theme="light"] .filter-tag.is-active {
    color: #fff;

    background: var(--c-primary);
}



/* ==========================================================================
   Media Card
   ========================================================================== */

.media-card {
    min-width: 0;
}

.media-card__cover {
    position: relative;
    overflow: hidden;

    aspect-ratio: 3 / 4;

    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;

    transition:
        transform var(--tr),
        border-color var(--tr),
        box-shadow var(--tr);
}

.media-card__poster {
    position: absolute;
    inset: 0;
}

.media-card__img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}


/* Badge */

.media-card__badge,
.media-card__score {
    position: absolute;
    top: 8px;
    z-index: 5;

    padding: 3px 7px;

    font-size: 11px;
    font-weight: 500;

    color: #fff;

    background: rgba(10, 12, 16, .72);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;

    backdrop-filter: blur(8px);
}

.media-card__badge {
    left: 8px;
}

.media-card__score {
    right: 8px;
    color: #ffd34d;
}


/* Overlay */

.media-card__shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(7,9,13,.92),
            rgba(7,9,13,.35) 45%,
            transparent 72%
        );

    transition:
        opacity var(--tr),
        visibility var(--tr);
}


/* Actions */

.media-card__actions {
    position: absolute;

    right: 10px;
    bottom: 12px;
    left: 10px;

    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 6px;

    visibility: hidden;
    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity var(--tr),
        visibility var(--tr),
        transform var(--tr);
}

.media-card__btn {
    display: flex;

    height: 40px;

    align-items: center;
    justify-content: center;

    gap: 5px;

    font-size: 13px;
    font-weight: 600;

    border-radius: 10px;
}

.media-card__btn--play {
    color: #fff;
    background: var(--c-primary);
}

.media-card__btn--play:hover {
    color: #fff;
    background: var(--c-primary-hover);
}

.media-card__btn--play svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.media-card__btn--detail {
    color: #fff;

    background: rgba(18,22,29,.72);
    border: 1px solid rgba(255,255,255,.20);

    backdrop-filter: blur(8px);
}


/* Info */

.media-card__info {
    padding: 10px 2px 0;
}

.media-card__title {
    overflow: hidden;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;

    text-overflow: ellipsis;
}

.media-card__title a {
    color: var(--c-text);
}

.media-card__meta {
    display: flex;
    gap: 6px;

    margin-top: 4px;

    font-size: 11px;

    color: var(--c-text-3);
}

.media-card__meta span + span::before {
    content: "·";
    margin-right: 6px;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

    .media-card:hover .media-card__cover {
        transform: translateY(-4px);

        border-color: var(--c-primary-line);

        box-shadow:
            0 14px 34px
            rgba(0,0,0,.24);
    }

    .media-card:hover .media-card__img {
        transform: scale(1.04);
    }

    .media-card:hover .media-card__shade,
    .media-card:hover .media-card__actions {
        visibility: visible;
        opacity: 1;
    }

    .media-card:hover .media-card__actions {
        transform: translateY(0);
    }

}


/* ==========================================================================
   HOMEPAGE QUICK FILTER
   ========================================================================== */

.home-filter {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;

    margin: 18px 0 30px;
    padding: 16px 18px;

    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;

    box-shadow: var(--shadow-sm);
}

.home-filter__intro {
    display: flex;
    align-items: center;
    gap: 10px;

    padding-right: 18px;
    border-right: 1px solid var(--c-border-light);
}

.home-filter__icon {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    align-items: center;
    justify-content: center;

    color: var(--c-primary);

    background: var(--c-primary-soft);
    border-radius: 9px;
}

.home-filter__icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-filter__intro > div:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-filter__intro strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}

.home-filter__intro span {
    margin-top: 2px;

    white-space: nowrap;

    font-size: 10px;
    color: var(--c-text-3);
}

.home-filter__rows {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.home-filter__row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;

    min-height: 36px;
}

.home-filter__row + .home-filter__row {
    border-top: 1px dashed var(--c-border-light);
}

.home-filter__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-3);
}

.home-filter__links {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.home-filter__pill {
    display: inline-flex;
    min-height: 26px;

    align-items: center;
    justify-content: center;

    padding: 0 10px;

    white-space: nowrap;

    font-size: 11px;
    font-weight: 500;

    color: var(--c-text-2);

    background: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: 999px;

    transition:
        color var(--tr-fast),
        background var(--tr-fast),
        border-color var(--tr-fast),
        transform var(--tr-fast);
}

.home-filter__pill:hover {
    color: var(--c-text);
    background: var(--c-bg-hover);
    transform: translateY(-1px);
}

.home-filter__pill.is-active {
    color: #fff;
    background: var(--c-primary);
}


/* ==========================================================================
   HOMEPAGE MEDIA SYSTEM — Featured + category rails
   One desktop visual language for posters, metadata, navigation and edge fade.
   ========================================================================== */
.featured-section {
  position: relative;
  min-width: 0;
  margin: 0 0 34px;
  padding: 16px 18px 16px;
  overflow: hidden;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-light);
  border-radius: 16px;
  box-shadow: none;
}

.featured-section::before { display: none; }

.featured-section__head {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.featured-section__title-wrap,
.featured-section__tools,
.featured-nav {
  display: flex;
  align-items: center;
}

.featured-section__title-wrap { min-width: 0; }
.featured-section__tools { flex: 0 0 auto; gap: 10px; }
.featured-nav { gap: 7px; }

.featured-section .section__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.featured-nav__btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast), opacity var(--tr-fast);
}

.featured-nav__btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.featured-nav__btn:hover:not(:disabled) {
  color: var(--c-text);
  background: var(--c-bg-hover);
  border-color: color-mix(in srgb, var(--c-border) 70%, var(--c-text-3));
  transform: translateY(-1px);
}

.featured-nav__btn:active:not(:disabled) { transform: scale(.95); }
.featured-nav__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.featured-nav__btn:disabled { cursor: default; opacity: .28; }

.featured-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.featured-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-bg-card) 78%, transparent) 58%, var(--c-bg-card) 100%);
  transition: opacity .18s ease;
}

.featured-section.is-end .featured-carousel::after,
.featured-section.no-overflow .featured-carousel::after { opacity: 0; }

.featured-track {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.featured-track::-webkit-scrollbar { display: none; }
.featured-track .media-card { width: 176px; min-width: 176px; flex: 0 0 176px; scroll-snap-align: start; }

/* Homepage cards share the same poster radius, type scale and metadata spacing. */
.page-home .media-card__cover {
  border-radius: 12px;
  border-color: var(--c-border-light);
}
.page-home .media-card__info { padding: 9px 36px 0 1px; }
.page-home .media-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.page-home .media-card__meta {
  gap: 5px;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}
.page-home .media-card__badge,
.page-home .media-card__score {
  top: 8px;
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 7px;
}
.page-home .media-card__badge {
  max-width: calc(100% - 74px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .page-home .media-card:hover .media-card__cover {
    border-color: color-mix(in srgb, var(--c-border) 72%, var(--c-text-3));
    box-shadow: 0 10px 24px rgba(0,0,0,.13);
  }
}

/* Category rails */
.home-media-section {
  position: relative;
  margin-bottom: 34px;
}
.home-media-section .section__head { margin-bottom: 14px; }
.home-media-rail,
.home-media-viewport { position: relative; }
.home-media-viewport { width: 100%; overflow: hidden; }

.home-media-track.vod-grid {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.home-media-track.vod-grid::-webkit-scrollbar { display: none; }
.home-media-track.vod-grid > .media-card {
  width: clamp(190px,11.5vw,214px);
  min-width: clamp(190px,11.5vw,214px);
  flex: 0 0 clamp(190px,11.5vw,214px);
  scroll-snap-align: start;
}

.home-media-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 72px;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-bg) 38%, transparent) 48%, var(--c-bg) 100%);
  transition: opacity .18s ease;
}
.home-media-section.is-end .home-media-viewport::after,
.home-media-section.no-overflow .home-media-viewport::after { opacity: 0; }

.home-media-nav {
  position: absolute;
  top: 42%;
  z-index: 8;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,.94);
  background: rgba(24,29,38,.76);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}
.home-media-nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-media-nav:hover {
  background: rgba(41,49,63,.94);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-50%) scale(1.04);
}
.home-media-nav:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.home-media-nav--prev { left: 8px; }
.home-media-nav--next { right: 8px; }
.home-media-section.is-start .home-media-nav--prev,
.home-media-section.is-end .home-media-nav--next,
.home-media-section.no-overflow .home-media-nav { visibility: hidden; opacity: 0; pointer-events: none; }

html[data-theme="light"] .featured-section {
  background: rgba(255,255,255,.82);
  border-color: rgba(15,23,42,.065);
  box-shadow: none;
}
html[data-theme="light"] .featured-carousel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.58) 58%, rgba(255,255,255,.96) 100%);
}
html[data-theme="light"] .home-media-viewport::after {
  background: linear-gradient(90deg, transparent 0%, rgba(244,246,248,.42) 48%, #f4f6f8 100%);
}
html[data-theme="light"] .home-media-nav {
  color: #273140;
  background: rgba(255,255,255,.90);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
}
html[data-theme="light"] .home-media-nav:hover {
  color: #111827;
  background: #fff;
  border-color: rgba(15,23,42,.16);
}

/* ==========================================================================
   26. Zhuijuba UI V2 — cinematic Apple-like shell
   Header actions / announcements / account / language / same-page modals
   Smart filter / article pages / rankings / premium light & dark backgrounds
   ========================================================================== */

:root {
  --ui-glass: rgba(15, 22, 34, .74);
  --ui-glass-strong: rgba(12, 18, 29, .92);
  --ui-glass-border: rgba(137, 177, 230, .13);
  --ui-glass-highlight: rgba(255,255,255,.06);
  --ui-blue: #4b8cff;
  --ui-blue-hover: #6aa1ff;
  --ui-blue-soft: rgba(75,140,255,.13);
  --ui-panel-shadow: 0 22px 70px rgba(0,0,0,.30);
  --ui-modal-shadow: 0 30px 100px rgba(0,0,0,.48);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1000px 580px at 50% -160px, rgba(56, 112, 188, .15), transparent 66%),
    radial-gradient(720px 500px at 92% 10%, rgba(34, 76, 132, .09), transparent 70%),
    linear-gradient(180deg, #09111b 0%, #080d15 46%, #070b11 100%);
  background-attachment: fixed;
}

html[data-theme="light"] body {
  background:
    radial-gradient(1000px 560px at 50% -170px, rgba(87, 150, 239, .13), transparent 66%),
    radial-gradient(720px 460px at 92% 8%, rgba(125, 173, 235, .10), transparent 68%),
    linear-gradient(180deg, #f9fbfe 0%, #f4f7fb 52%, #f7f9fc 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] .header {
  background: rgba(7, 12, 20, .80) !important;
  border-bottom-color: rgba(126, 166, 220, .10) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
}

/* Desktop navigation + utility surfaces */
html[data-theme="light"] .header,
html[data-theme="light"] .header:not(.is-scrolled),
html[data-theme="light"] .header.is-scrolled {
  background: rgba(248,249,251,.90) !important;
  border-bottom-color: rgba(20,24,31,.08) !important;
  box-shadow: 0 8px 26px rgba(18,24,32,.06);
}

.header {
  background: rgba(12,14,18,.86);
  border-bottom-color: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.header.is-scrolled {
  background: rgba(12,14,18,.96);
  border-bottom-color: rgba(255,255,255,.07);
  box-shadow: 0 8px 28px rgba(0,0,0,.20);
}
.header__inner { gap: 14px; }
.header__logo img { height: 32px; max-width: 176px; }
.header__nav { z-index: 1; }
.nav { gap: 0; }
.nav__link { padding-inline: 13px; font-size: 14px; color: #aeb3bc; }
.nav__link.is-active::after { right: 12px; left: 12px; height: 2px; }
html[data-theme="light"] .header .nav__link { color: #646a75 !important; }
html[data-theme="light"] .header .nav__link:hover,
html[data-theme="light"] .header .nav__link.is-active { color: #17191d !important; }

.header__search {
  width: 286px;
  min-width: 230px;
  flex: 0 1 286px;
  margin-left: auto;
}
.search-form { position: relative; display: block; }
.search-form__input {
  width: 100%;
  height: 40px;
  padding: 0 15px 0 42px;
  color: #e5e7eb;
  font-size: 13px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 11px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.search-form__input::placeholder { color: #747b86; }
.search-form__input:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.115); }
.search-form__input:focus { background: rgba(20,22,27,.96); border-color: rgba(111,151,214,.38); box-shadow: 0 0 0 3px rgba(77,140,255,.08); }
.search-form__btn {
  position: absolute;
  top: 0;
  left: 7px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: #9097a3;
  background: transparent;
  border-radius: 9px;
  box-shadow: none;
}
.search-form__btn:hover { color: #fff; background: transparent; box-shadow: none; }
.search-form__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html[data-theme="light"] .search-form__input { color:#21242a; background: rgba(22,27,34,.035); border-color: rgba(20,25,32,.09); }
html[data-theme="light"] .search-form__input:hover { background: rgba(22,27,34,.055); }
html[data-theme="light"] .search-form__input:focus { background:#fff; border-color: rgba(65,105,166,.28); box-shadow:0 0 0 3px rgba(77,140,255,.07); }
html[data-theme="light"] .search-form__btn { color:#6e7580; }
html[data-theme="light"] .search-form__btn:hover { color:#20242b; }

.header-actions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
.header-popover-wrap { position: relative; }
.header-action-btn {
  display: inline-flex;
  height: 40px;
  min-width: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: #aeb4be;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.header-action-btn:hover,
.header-popover-wrap.is-open > .header-action-btn {
  color: #f5f6f7;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.055);
}
.header-action-btn:active { transform: scale(.97); }
.header-action-btn:focus-visible,
.header-user-trigger:focus-visible { outline: 2px solid rgba(92,153,255,.90); outline-offset: 2px; }
.header-action-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.header-icon-only { position: relative; width: 40px; padding: 0; }
.header-language-btn { min-width: 56px; padding-inline: 8px; }
.header-action-chevron { width: 11px !important; height: 11px !important; }
.header-language-current { font-size: 12px; font-weight: 620; letter-spacing: .035em; }
html[data-theme="light"] .header-action-btn { color:#656b75; }
html[data-theme="light"] .header-action-btn:hover,
html[data-theme="light"] .header-popover-wrap.is-open > .header-action-btn { color:#1a1d22; background:rgba(20,25,32,.045); border-color:rgba(20,25,32,.04); }

.header-notice-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: #ff5266;
  border: 1.5px solid #0c0e12;
  border-radius: 50%;
}
html[data-theme="light"] .header-notice-dot { border-color:#f8f9fb; }
.header-notice-dot.is-hidden { display:none; }

.header-user-trigger {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.header-user-trigger:hover,
.header-user-wrap.is-open .header-user-trigger { border-color: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.header-user-trigger:active { transform: scale(.96); }
.header-user-photo {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: cover;
  color: #b4bbc5;
  background: #24272d;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.header-user-photo--guest { display:grid; place-items:center; }
.header-user-photo--guest svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
html[data-theme="light"] .header-user-trigger:hover,
html[data-theme="light"] .header-user-wrap.is-open .header-user-trigger { border-color:rgba(20,25,32,.12); box-shadow:0 0 0 3px rgba(20,25,32,.025); }
html[data-theme="light"] .header-user-photo { background:#e7e9ed; border-color:rgba(20,25,32,.10); }

.header-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 700;
  width: 310px;
  max-width: calc(100vw - 24px);
  padding: 9px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #e7e8eb;
  background: rgba(24,25,29,.975);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.02);
  backdrop-filter: blur(20px) saturate(1.02);
  transform: translateY(5px) scale(.985);
  transform-origin: top right;
  transition: opacity .14s ease, transform .16s cubic-bezier(.2,.8,.2,1), visibility .14s ease;
}
.header-popover-wrap.is-open .header-popover,
.header-popover.is-open { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
html[data-theme="light"] .header-popover { color:#24272c; background:rgba(252,252,253,.98); border-color:rgba(20,25,32,.09); box-shadow:0 18px 48px rgba(26,31,39,.16), 0 2px 8px rgba(26,31,39,.07); }

.language-menu { width: 190px; }
.language-menu button { display:flex; width:100%; align-items:center; justify-content:space-between; min-height:36px; padding:8px 10px; color:#b7bbc3; border-radius:9px; }
.language-menu button:hover { color:#f5f6f7; background:rgba(255,255,255,.055); }
.language-menu button.is-active { color:#f3f6fb; background:rgba(77,140,255,.14); }
.language-menu small { color:#777d87; font-size:9px; font-weight:700; }
html[data-theme="light"] .language-menu button { color:#5d636d; }
html[data-theme="light"] .language-menu button:hover { color:#202328; background:rgba(20,25,32,.045); }
html[data-theme="light"] .language-menu button.is-active { color:#205cae; background:rgba(77,140,255,.10); }

.notification-menu { width: 350px; padding:0; overflow:hidden; }
.popover-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 15px 11px; border-bottom:1px solid rgba(255,255,255,.065); }
.popover-head strong { display:block; font-size:13px; }
.popover-head span { display:block; margin-top:2px; color:#7f858f; font-size:10px; }
.popover-text-btn { padding:4px 0; color:#81aef6; font-size:10px; }
.notification-list { max-height:340px; overflow:auto; padding:7px; }
.notification-item { position:relative; display:flex; align-items:center; border-radius:9px; }
.notification-item:hover { background:rgba(255,255,255,.045); }
.notification-item__main { display:flex; min-width:0; flex:1; align-items:center; gap:9px; padding:9px 32px 9px 8px; }
.notification-item__icon { display:flex; width:31px; height:31px; flex:0 0 31px; align-items:center; justify-content:center; color:#8ab5fa; background:rgba(77,140,255,.10); border-radius:8px; }
.notification-item__icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.notification-item__copy { min-width:0; }
.notification-item__copy strong { display:block; overflow:hidden; white-space:nowrap; color:#e9eaed; font-size:11px; text-overflow:ellipsis; }
.notification-item__copy small { display:block; margin-top:2px; color:#767c85; font-size:9px; }
.notification-item__dismiss { position:absolute; top:50%; right:7px; width:23px; height:23px; color:#777d87; border-radius:7px; transform:translateY(-50%); }
.notification-item__dismiss:hover { color:#f1f2f4; background:rgba(255,255,255,.055); }
.notification-empty { padding:30px 16px; text-align:center; color:#767c85; font-size:11px; }
.popover-footer-link { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; color:#9da2ab; font-size:10px; border-top:1px solid rgba(255,255,255,.06); }
.popover-footer-link:hover { color:#fff; }
html[data-theme="light"] .popover-head { border-bottom-color:rgba(20,25,32,.07); }
html[data-theme="light"] .notification-item:hover { background:rgba(20,25,32,.04); }
html[data-theme="light"] .notification-item__copy strong { color:#25282e; }
html[data-theme="light"] .notification-item__dismiss:hover { color:#202328; background:rgba(20,25,32,.05); }
html[data-theme="light"] .popover-footer-link { border-top-color:rgba(20,25,32,.07); }
html[data-theme="light"] .popover-footer-link:hover { color:#202328; }

.user-menu { width: 250px; padding: 9px; }
.user-menu__identity { display:flex; align-items:center; gap:10px; padding:5px 4px 11px 5px; }
.user-menu__photo { width:38px; height:38px; flex:0 0 38px; object-fit:cover; background:#2a2c31; border:1px solid rgba(255,255,255,.09); border-radius:50%; }
.user-menu__identity-copy { min-width:0; flex:1; }
.user-menu__identity-copy strong { display:block; overflow:hidden; white-space:nowrap; color:#f0f1f3; font-size:12px; font-weight:670; text-overflow:ellipsis; }
.user-menu__identity-copy span { display:block; overflow:hidden; margin-top:2px; white-space:nowrap; color:#7d838c; font-size:10px; text-overflow:ellipsis; }
.user-menu__settings-shortcut { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; color:#868c96; border-radius:8px; }
.user-menu__settings-shortcut:hover { color:#f1f2f4; background:rgba(255,255,255,.055); }
.user-menu__settings-shortcut svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.user-menu__guest { padding:8px 6px 10px; }
.user-menu__guest strong { display:block; color:#f0f1f3; font-size:13px; }
.user-menu__guest > span { display:block; margin:3px 0 10px; color:#7d838c; font-size:10px; }
.user-menu__primary { width:100%; height:34px; color:#fff; font-size:11px; font-weight:640; background:#3f82ef; border-radius:9px; }
.user-menu__links { display:grid; gap:2px; }
.user-menu__links a,
.user-menu__links button,
.user-menu__logout { display:flex; width:100%; min-height:40px; align-items:center; gap:10px; padding:0 10px; color:#b8bdc5; font-size:11px; text-align:left; border-radius:8px; transition:color .14s ease, background .14s ease; }
.user-menu__links a:hover,
.user-menu__links button:hover { color:#f3f4f6; background:rgba(255,255,255,.06); }
.user-menu__links svg,
.user-menu__logout svg { width:16px; height:16px; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.user-menu__links .menu-chevron { width:11px; height:11px; margin-left:auto; color:#696f79; stroke-width:1.6; }
.user-menu__divider { height:1px; margin:7px 5px; background:rgba(255,255,255,.07); }
.user-menu__logout { color:#e36b72; }
.user-menu__logout:hover { color:#f08187; background:rgba(222,82,91,.08); }
.user-menu__logout span { min-width:0; }
.user-menu__settings-shortcut:focus-visible,
.user-menu__links a:focus-visible,
.user-menu__links button:focus-visible,
.user-menu__logout:focus-visible { outline:2px solid rgba(92,153,255,.92); outline-offset:1px; }
html[data-theme="light"] .user-menu__photo { background:#e9ebef; border-color:rgba(20,25,32,.09); }
html[data-theme="light"] .user-menu__identity-copy strong,
html[data-theme="light"] .user-menu__guest strong { color:#202328; }
html[data-theme="light"] .user-menu__settings-shortcut { color:#707681; }
html[data-theme="light"] .user-menu__settings-shortcut:hover { color:#1f2329; background:rgba(20,25,32,.05); }
html[data-theme="light"] .user-menu__links a,
html[data-theme="light"] .user-menu__links button { color:#5f6570; }
html[data-theme="light"] .user-menu__links a:hover,
html[data-theme="light"] .user-menu__links button:hover { color:#202328; background:rgba(20,25,32,.045); }
html[data-theme="light"] .user-menu__divider { background:rgba(20,25,32,.07); }

/* Experience strip above slideshow */
.experience-strip { margin: 18px 0 14px; }
.experience-strip__inner {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,28,43,.76), rgba(12,20,31,.76));
  border:1px solid rgba(126,167,221,.13);
  border-radius:15px;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  backdrop-filter:blur(18px);
}
.experience-item {
  position:relative; display:flex; min-width:0; align-items:center; gap:11px;
  padding:14px 16px; text-align:left;
}
.experience-item + .experience-item::before { content:""; position:absolute; top:12px; bottom:12px; left:0; width:1px; background:rgba(255,255,255,.07); }
.experience-item:hover { background:rgba(255,255,255,.035); }
.experience-item__icon { display:flex; width:34px; height:34px; flex:0 0 34px; align-items:center; justify-content:center; border-radius:10px; }
.experience-item__icon--blue { color:#6ca3ff; background:rgba(75,140,255,.11); }
.experience-item__icon--gold { color:#ffc86b; background:rgba(255,190,79,.10); }
.experience-item__icon--pink { color:#ff7092; background:rgba(255,91,128,.10); }
.experience-item strong { display:block; overflow:hidden; white-space:nowrap; font-size:12px; color:#dce6f4; text-overflow:ellipsis; }
.experience-item small { display:block; overflow:hidden; margin-top:2px; white-space:nowrap; font-size:10px; color:#718095; text-overflow:ellipsis; }
html[data-theme="light"] .experience-strip__inner { background:rgba(255,255,255,.72); border-color:rgba(38,65,101,.08); box-shadow:0 14px 30px rgba(38,62,91,.07); }
html[data-theme="light"] .experience-item + .experience-item::before { background:rgba(32,56,86,.08); }
html[data-theme="light"] .experience-item:hover { background:rgba(56,102,162,.035); }
html[data-theme="light"] .experience-item strong { color:#1c2735; }
html[data-theme="light"] .experience-item small { color:#7b8898; }

/* Smart filter */
.smart-filter {
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:0;
  margin:18px 0 16px;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(15,24,38,.88), rgba(11,18,29,.82));
  border:1px solid rgba(124,167,222,.13);
  border-radius:18px;
  box-shadow:0 20px 52px rgba(0,0,0,.18);
  backdrop-filter:blur(20px);
}
.smart-filter__intro { display:flex; align-items:flex-start; gap:12px; padding:22px 20px; border-right:1px solid rgba(255,255,255,.07); }
.smart-filter__icon { display:flex; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; color:#6ea5ff; background:rgba(75,140,255,.12); border-radius:12px; }
.smart-filter__icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.smart-filter__intro strong { display:block; margin-top:2px; font-size:15px; }
.smart-filter__intro span { display:block; margin-top:4px; font-size:10px; color:var(--c-text-3); }
.smart-filter__main { min-width:0; padding:15px 16px 14px; }
.smart-filter__topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.smart-filter__roots { display:flex; flex-wrap:wrap; gap:7px; }
.smart-filter__root,
.smart-filter__choice {
  min-width:62px; height:32px; padding:0 14px;
  color:var(--c-text-2); font-size:11px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:999px;
  transition:.16s ease;
}
.smart-filter__root { min-width:78px; font-size:12px; }
.smart-filter__root:hover,
.smart-filter__choice:hover { color:var(--c-text); border-color:rgba(105,159,231,.25); background:rgba(75,140,255,.08); }
.smart-filter__root.is-active,
.smart-filter__choice.is-active { color:#fff; background:linear-gradient(180deg,#568fff,#3e7ef2); border-color:transparent; box-shadow:0 7px 18px rgba(63,126,242,.25); }
.smart-filter__reset { display:flex; align-items:center; gap:6px; padding:7px 8px; color:var(--c-text-3); font-size:10px; border-radius:8px; }
.smart-filter__reset:hover { color:var(--c-text); background:rgba(255,255,255,.04); }
.smart-filter__rows { display:grid; gap:0; }
.smart-filter__row { display:grid; grid-template-columns:74px minmax(0,1fr); gap:10px; align-items:start; padding:8px 0; border-top:1px dashed rgba(255,255,255,.065); }
.smart-filter__row:first-child { border-top:0; }
.smart-filter__label { padding-top:7px; font-size:10px; font-weight:650; color:var(--c-text-3); }
.smart-filter__choices { display:flex; flex-wrap:wrap; gap:6px; }
.smart-filter__choice { min-width:0; height:29px; padding:0 12px; }
.smart-filter__bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.smart-filter__preview { display:flex; min-width:0; align-items:center; gap:8px; font-size:10px; color:var(--c-text-3); }
.smart-filter__preview strong { color:#89b5ff; font-weight:600; }
.smart-filter__preview-icon { display:flex; width:24px; height:24px; align-items:center; justify-content:center; color:#84b0fa; background:rgba(75,140,255,.09); border-radius:7px; }
.smart-filter__submit { min-width:132px; }
html[data-theme="light"] .smart-filter { background:rgba(255,255,255,.78); border-color:rgba(38,66,102,.09); box-shadow:0 18px 44px rgba(40,64,92,.08); }
html[data-theme="light"] .smart-filter__intro { border-right-color:rgba(34,61,95,.08); }
html[data-theme="light"] .smart-filter__row { border-top-color:rgba(35,61,94,.08); }
html[data-theme="light"] .smart-filter__root,
html[data-theme="light"] .smart-filter__choice { color:#5f6b7b; background:#f1f4f8; border-color:rgba(45,71,103,.06); }
html[data-theme="light"] .smart-filter__root:hover,
html[data-theme="light"] .smart-filter__choice:hover { color:#263342; background:#eaf1fb; }
html[data-theme="light"] .smart-filter__root.is-active,
html[data-theme="light"] .smart-filter__choice.is-active { color:#fff; background:linear-gradient(180deg,#568fff,#3d7df0); }
html[data-theme="light"] .smart-filter__bottom { border-top-color:rgba(35,61,94,.08); }

.smart-results {
  margin:0 0 26px; padding:18px;
  background:rgba(14,22,34,.76); border:1px solid rgba(123,165,220,.12); border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.15);
  backdrop-filter:blur(18px);
}
.smart-results__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.smart-results__head h2 { margin:1px 0 0; font-size:18px; }
.smart-results__head p { margin-top:3px; font-size:10px; color:var(--c-text-3); }
.smart-results__close { width:30px; height:30px; color:var(--c-text-3); background:rgba(255,255,255,.04); border-radius:50%; }
.smart-results__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.smart-result-card { min-width:0; }
.smart-result-card__poster { position:relative; display:block; aspect-ratio:2/3; overflow:hidden; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:12px; }
.smart-result-card__poster img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.smart-result-card__poster:hover img { transform:scale(1.025); }
.smart-result-card__score { position:absolute; top:7px; right:7px; padding:3px 6px; color:#ffd85b; font-size:9px; background:rgba(8,12,18,.74); border:1px solid rgba(255,255,255,.12); border-radius:7px; }
.smart-result-card h3 { margin-top:8px; overflow:hidden; white-space:nowrap; font-size:12px; text-overflow:ellipsis; }
.smart-result-card p { margin-top:2px; overflow:hidden; white-space:nowrap; font-size:9px; color:var(--c-text-3); text-overflow:ellipsis; }
.smart-results__empty { padding:36px 10px; text-align:center; color:var(--c-text-3); }
html[data-theme="light"] .smart-results { background:rgba(255,255,255,.78); border-color:rgba(38,66,102,.08); box-shadow:0 16px 40px rgba(40,64,92,.07); }

/* Shared buttons / fields */
.ui-primary-button,
.ui-secondary-button {
  display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:10px; padding:0 18px;
  font-size:12px; font-weight:650; border-radius:12px; transition:.18s ease;
}
.ui-primary-button { color:#fff; background:linear-gradient(180deg,#5791ff,#377af0); box-shadow:0 10px 26px rgba(55,122,240,.28); }
.ui-primary-button:hover { color:#fff; transform:translateY(-1px); box-shadow:0 14px 32px rgba(55,122,240,.34); }
.ui-primary-button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.ui-secondary-button { color:var(--c-text-2); background:rgba(255,255,255,.05); border:1px solid var(--c-border); }
.button-arrow { font-size:18px; line-height:1; }
.ui-field { display:grid; gap:7px; }
.ui-field > span { font-size:10px; font-weight:650; color:var(--c-text-2); }
.ui-field input,
.ui-field select,
.ui-field textarea,
.auth-contact-row select,
.auth-contact-row input {
  width:100%; min-width:0; height:42px; padding:0 12px;
  color:var(--c-text); background:rgba(255,255,255,.045); border:1px solid var(--c-border); border-radius:11px;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ui-field textarea { height:auto; min-height:130px; padding:11px 12px; resize:vertical; }
.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus,
.auth-contact-row select:focus,
.auth-contact-row input:focus { background:rgba(255,255,255,.065); border-color:rgba(91,151,235,.55); box-shadow:0 0 0 3px rgba(75,140,255,.09); }
html[data-theme="light"] .ui-field input,
html[data-theme="light"] .ui-field select,
html[data-theme="light"] .ui-field textarea,
html[data-theme="light"] .auth-contact-row select,
html[data-theme="light"] .auth-contact-row input { color:#182333; background:#f4f6f9; border-color:rgba(38,61,91,.10); }

/* Modal system */
.site-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .18s ease,visibility .18s ease; }
.site-modal.is-open { visibility:visible; opacity:1; pointer-events:auto; }
.site-modal__backdrop { position:absolute; inset:0; background:rgba(3,7,12,.62); backdrop-filter:blur(14px); }
.site-modal__dialog {
  position:relative; z-index:1; width:min(760px,100%); max-height:min(820px,calc(100dvh - 48px)); overflow:auto;
  color:var(--c-text); background:linear-gradient(165deg,rgba(17,26,40,.98),rgba(9,15,24,.98));
  border:1px solid rgba(128,169,220,.14); border-radius:22px; box-shadow:var(--ui-modal-shadow);
  transform:translateY(12px) scale(.985); transition:transform .2s ease;
}
.site-modal.is-open .site-modal__dialog { transform:translateY(0) scale(1); }
html[data-theme="light"] .site-modal__backdrop { background:rgba(42,55,73,.28); }
html[data-theme="light"] .site-modal__dialog { color:#182333; background:rgba(255,255,255,.97); border-color:rgba(40,66,101,.10); box-shadow:0 32px 90px rgba(35,55,80,.22); }
.site-modal__close { position:absolute; top:14px; right:14px; z-index:3; width:32px; height:32px; color:var(--c-text-3); background:rgba(255,255,255,.05); border:1px solid var(--c-border); border-radius:50%; font-size:19px; }
.site-modal__close:hover { color:var(--c-text); background:rgba(255,255,255,.09); }
body.modal-open { overflow:hidden; }
.modal-section-head { padding:28px 28px 18px; }
.modal-section-head h2 { margin:2px 0 0; font-size:24px; line-height:1.2; }
.modal-section-head p { margin-top:6px; font-size:11px; color:var(--c-text-3); }
.modal-eyebrow { font-size:9px; font-weight:750; letter-spacing:.16em; color:#6fa6ff; }

/* Auth */
.auth-modal { width:min(520px,100%); padding:28px; overflow:visible; }
.auth-modal__brand { display:flex; align-items:center; gap:14px; padding:4px 0 18px; }
.auth-modal__brand img { width:auto; max-width:140px; height:28px; object-fit:contain; }
.auth-modal__brand h2 { font-size:20px; }
.auth-modal__brand p { margin-top:2px; font-size:10px; color:var(--c-text-3); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:18px; padding:4px; background:rgba(255,255,255,.035); border:1px solid var(--c-border); border-radius:12px; }
.auth-tab { height:34px; color:var(--c-text-3); font-size:11px; border-radius:9px; }
.auth-tab.is-active { color:var(--c-text); background:rgba(255,255,255,.08); box-shadow:0 5px 12px rgba(0,0,0,.13); }
html[data-theme="light"] .auth-tabs { background:#f2f5f8; }
html[data-theme="light"] .auth-tab.is-active { color:#17212e; background:#fff; }
.auth-form { display:none; gap:13px; }
.auth-form.is-active { display:grid; }
.ui-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-verify-row { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:10px; align-items:end; }
.auth-captcha-refresh { height:42px; overflow:hidden; background:#fff; border:1px solid var(--c-border); border-radius:11px; }
.auth-captcha-refresh img { width:100%; height:100%; object-fit:cover; }
.auth-form__message { min-height:16px; font-size:10px; color:#ff7e8b; }
.auth-form__message.is-success { color:#52d59b; }
.auth-submit { width:100%; }
.auth-privacy { text-align:center; font-size:9px; color:var(--c-text-3); }
.auth-optional-block { overflow:hidden; border:1px solid var(--c-border); border-radius:11px; }
.auth-optional-toggle { display:flex; width:100%; height:36px; align-items:center; justify-content:space-between; padding:0 11px; color:var(--c-text-3); font-size:10px; }
.auth-optional-content { display:grid; gap:10px; padding:10px; border-top:1px solid var(--c-border); }
.auth-contact-row { display:grid; grid-template-columns:85px minmax(0,1fr) 92px; gap:7px; }
.auth-contact-row select,.auth-contact-row input { height:38px; }
.auth-send-code { height:38px; color:#dceaff; font-size:10px; background:rgba(75,140,255,.16); border:1px solid rgba(75,140,255,.22); border-radius:10px; }
html[data-theme="light"] .auth-send-code { color:#316fce; }

/* Library */
.library-modal { width:min(880px,100%); padding-bottom:24px; }
.library-tabs,.rank-tabs { display:flex; gap:6px; padding:0 28px 16px; }
.library-tab,.rank-tab { height:32px; padding:0 13px; color:var(--c-text-3); font-size:10px; background:rgba(255,255,255,.035); border:1px solid var(--c-border); border-radius:999px; }
.library-tab.is-active,.rank-tab.is-active { color:#fff; background:var(--c-primary); border-color:transparent; }
.library-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 28px; }
.library-card { min-width:0; }
.library-card__poster { display:block; aspect-ratio:2/3; overflow:hidden; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:12px; }
.library-card__poster img { width:100%; height:100%; object-fit:cover; }
.library-card strong { display:block; margin-top:7px; overflow:hidden; white-space:nowrap; font-size:11px; text-overflow:ellipsis; }
.library-card small { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; font-size:9px; color:var(--c-text-3); text-overflow:ellipsis; }
.library-empty { padding:48px 24px; text-align:center; color:var(--c-text-3); }
.library-empty > span { display:flex; width:40px; height:40px; margin:0 auto 12px; align-items:center; justify-content:center; color:#78aaff; background:var(--c-primary-soft); border-radius:50%; font-size:21px; }
.library-empty strong { display:block; color:var(--c-text-2); font-size:12px; }
.library-empty p { margin-top:4px; font-size:10px; }

/* Ranking */
.rank-modal { width:min(760px,100%); padding-bottom:20px; }
.rank-panel { display:none; padding:0 22px 8px; }
.rank-panel.is-active { display:grid; }
.rank-row { display:grid; grid-template-columns:28px 42px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:58px; padding:7px 8px; border-top:1px solid var(--c-border-light); border-radius:10px; }
.rank-row:first-child { border-top:0; }
.rank-row:hover { background:rgba(255,255,255,.035); }
html[data-theme="light"] .rank-row:hover { background:rgba(35,68,109,.04); }
.rank-number { font-size:11px; font-weight:750; color:var(--c-text-3); text-align:center; }
.rank-row:nth-child(1) .rank-number,.rank-row:nth-child(2) .rank-number,.rank-row:nth-child(3) .rank-number { color:#ffc85c; }
.rank-row img { width:42px; height:50px; object-fit:cover; border-radius:7px; }
.rank-copy { min-width:0; }
.rank-copy strong { display:block; overflow:hidden; white-space:nowrap; font-size:11px; text-overflow:ellipsis; }
.rank-copy small { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; font-size:9px; color:var(--c-text-3); text-overflow:ellipsis; }
.rank-metric { font-size:9px; color:#ff775c; }
.rank-metric--score { color:#ffc84f; }
.rank-page { padding-bottom:50px; }
.rank-page-hero { padding:42px 4px 24px; }
.rank-page-hero h1 { margin-top:4px; font-size:32px; }
.rank-page-hero p { margin-top:6px; color:var(--c-text-3); }
.rank-page-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rank-page-column { padding:14px; background:rgba(15,23,36,.72); border:1px solid var(--c-border); border-radius:16px; }
html[data-theme="light"] .rank-page-column { background:rgba(255,255,255,.75); }
.rank-page-column__head { display:flex; align-items:center; gap:10px; padding:4px 5px 12px; }
.rank-page-column__head > span { font-size:22px; font-weight:750; color:rgba(95,153,240,.38); }
.rank-page-column__head strong { display:block; font-size:13px; }
.rank-page-column__head small { display:block; color:var(--c-text-3); font-size:9px; }

/* Report */
.report-modal { width:min(600px,100%); padding-bottom:20px; }
.report-form { display:grid; gap:13px; padding:0 28px 8px; }
.report-meta { display:flex; justify-content:space-between; gap:12px; font-size:9px; color:var(--c-text-3); }
.report-message { min-height:16px; font-size:10px; color:#ff7d88; }
.report-message.is-success { color:#52d59b; }
.report-actions { display:flex; justify-content:flex-end; gap:8px; }
.feedback-honeypot { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

/* Toast */
.site-toast { position:fixed; left:50%; bottom:28px; z-index:1400; max-width:min(420px,calc(100vw - 32px)); padding:10px 14px; visibility:hidden; opacity:0; color:#fff; font-size:11px; background:rgba(15,23,35,.92); border:1px solid rgba(255,255,255,.11); border-radius:999px; box-shadow:0 16px 40px rgba(0,0,0,.28); backdrop-filter:blur(16px); transform:translate(-50%,12px); transition:.2s ease; }
.site-toast.is-show { visibility:visible; opacity:1; transform:translate(-50%,0); }

/* Article / announcement pages */
.article-page,.article-detail-page { padding-bottom:56px; }
.article-hero { padding:38px 4px 22px; }
.article-hero__eyebrow { font-size:9px; font-weight:750; letter-spacing:.17em; color:#6fa6ff; }
.article-hero h1 { margin-top:4px; font-size:32px; }
.article-hero p { margin-top:4px; color:var(--c-text-3); }
.article-list-shell { padding:18px; background:rgba(14,22,34,.68); border:1px solid var(--c-border); border-radius:18px; }
html[data-theme="light"] .article-list-shell { background:rgba(255,255,255,.74); }
.article-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:0 2px 12px; border-bottom:1px solid var(--c-border); }
.article-list-head > div { display:flex; align-items:center; gap:8px; }
.article-list-head__dot { width:7px; height:7px; background:#4b8cff; border-radius:50%; box-shadow:0 0 0 5px rgba(75,140,255,.09); }
.article-list-head span { font-size:10px; color:var(--c-text-3); }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.article-card { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:150px; overflow:hidden; background:rgba(255,255,255,.025); border:1px solid var(--c-border-light); border-radius:14px; }
.article-card__media { min-height:150px; overflow:hidden; }
.article-card__media img { width:100%; height:100%; object-fit:cover; }
.article-card__body { min-width:0; padding:15px; }
.article-card__meta { display:flex; gap:7px; margin-bottom:5px; font-size:9px; color:var(--c-text-3); }
.article-card h2 { font-size:14px; line-height:1.45; }
.article-card p { display:-webkit-box; margin-top:7px; overflow:hidden; color:var(--c-text-3); font-size:10px; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.article-card__more { display:inline-flex; gap:4px; margin-top:12px; color:#78a9f7; font-size:10px; }
.article-paging { margin-top:18px; }
.article-detail-container { max-width:900px; }
.article-back { display:inline-flex; align-items:center; gap:6px; margin:28px 0 14px; color:var(--c-text-3); font-size:11px; }
.article-detail-card { padding:36px 44px 46px; background:rgba(14,22,34,.70); border:1px solid var(--c-border); border-radius:20px; box-shadow:0 20px 55px rgba(0,0,0,.14); }
html[data-theme="light"] .article-detail-card { background:rgba(255,255,255,.86); box-shadow:0 18px 45px rgba(36,58,84,.07); }
.article-detail-head { max-width:720px; margin:0 auto 24px; text-align:center; }
.article-detail-badge { display:inline-flex; padding:5px 10px; color:#79a9f8; font-size:9px; background:var(--c-primary-soft); border-radius:999px; }
.article-detail-head h1 { margin:14px 0 10px; font-size:30px; line-height:1.28; }
.article-detail-meta { display:flex; justify-content:center; gap:10px; color:var(--c-text-3); font-size:9px; }
.article-detail-lead { margin-top:14px; color:var(--c-text-2); font-size:12px; line-height:1.8; }
.article-detail-cover { margin:22px 0; overflow:hidden; border-radius:16px; }
.article-detail-cover img { display:block; width:100%; max-height:520px; object-fit:cover; }
.article-detail-content { color:var(--c-text-2); font-size:14px; line-height:1.9; }
.article-detail-content img { height:auto !important; border-radius:12px; }
.article-detail-content p { margin:1em 0; }

/* Footer buttons that look like links */
.footer__links button { color:inherit; font:inherit; }
.footer__links button:hover { color:var(--c-primary-hover); }


@media (prefers-reduced-motion: reduce) {
  .site-modal__dialog,.site-toast,.header-popover,.desktop-quick-menu,.desktop-quick-submenu { transition:none !important; }
}

/* =========================================================
   Desktop homepage geometry — one content grid, no page zoom
   ========================================================= */
@media (min-width: 1101px) {
  :root {
    --container-w: 1680px;
    --header-h: 68px;
    --f-xs: 13px;
    --f-sm: 14px;
    --f-base: 16px;
    --f-md: 17px;
    --f-lg: 20px;
    --f-xl: 24px;
    --f-2xl: 32px;
  }

  .container { padding-inline: 24px; }
  .page { width: 100%; max-width: none; padding-top: calc(var(--header-h) + 18px); }

  /* Only the homepage uses the unified 1680px outer edge. */
  body.page-home-body .header__inner,
  .page-home > .container,
  .page-home .banner {
    width: min(calc(100% - 48px), 1680px);
    max-width: 1680px;
    margin-inline: auto;
  }
  body.page-home-body .header__inner,
  .page-home > .container { padding-inline: 0; }

  .page-home {
    padding-bottom: 12px;
    background: #0b0f14;
  }
  html[data-theme="light"] .page-home { background: #f4f6f8; }

  .header__inner { display:flex; gap:14px; }
  .header__logo { flex:0 0 auto; }
  .header__nav {
    position:static;
    top:auto;
    left:auto;
    min-width:0;
    flex:1 1 auto;
    justify-content:center;
    transform:none;
  }
  .nav { min-width:0; gap:0; }
  .nav__link { padding-inline:10px; font-size:14px; }
  .header__search { width:286px; min-width:230px; flex:0 1 286px; margin-left:0; }
  .header-actions { flex:0 0 auto; margin-left:0; }

  .page-home .banner {
    height: clamp(340px,24.5vw,410px);
    margin-bottom: 18px;
    border-radius: 14px;
  }
  .page-home .banner__bg { object-position: center center; }
  .page-home .banner__content {
    left: clamp(40px,3.4vw,64px);
    width: min(560px,calc(100% - 104px));
  }
  .page-home .banner__title {
    margin-bottom: 10px;
    font-size: clamp(2rem,2.45vw,2.8rem);
    line-height: 1.16;
  }
  .page-home .banner__meta,
  .page-home .banner__desc { font-size:14.5px; }
  .page-home .banner__desc {
    max-width: 560px;
    margin-bottom: 18px;
    line-height: 1.65;
    text-indent: 0;
    -webkit-line-clamp: 2;
  }
  .page-home .banner .btn { min-height:42px; padding-inline:20px; font-size:14px; }

  .page-home .section__head { margin-bottom:14px; }
  .page-home .section__title { font-size:22px; }
  .page-home .section__title::before { width:4px; height:20px; }
  .page-home .section__more { font-size:14px; }

  .vod-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px 18px; }
}

/* 1366 / 1440 desktop: keep readable controls without squeezing navigation. */
@media (min-width:1101px) and (max-width:1439px) {
  :root { --header-h:66px; }
  body.page-home-body .header__inner,
  .page-home > .container,
  .page-home .banner { width: calc(100% - 40px); }
  .header__inner { gap:9px; }
  .header__logo img { max-width:145px; height:30px; }
  .nav__link { padding-inline:7px; font-size:13px; }
  .header__search { width:226px; min-width:190px; flex-basis:226px; }
  .header-actions { gap:4px; }
  .header-action-btn { height:38px; min-width:38px; }
  .header-icon-only { width:38px; }
  .header-language-btn { min-width:52px; }
  .header-user-trigger { width:40px; height:40px; }
  .header-user-photo { width:36px; height:36px; }
  .page-home .banner { height:clamp(340px,24.5vw,380px); }
  .page-home .banner__title { font-size:clamp(2rem,3vw,2.55rem); }
}

@media (min-width:1600px) {
  .header__search { width:310px; flex-basis:310px; }
}

/* ==========================================================================\n   Smart Filter — restrained desktop UI\n   Native/settings-like hierarchy: one surface, simple tabs, quiet choices.\n   ========================================================================== */
.smart-filter {
  display: block;
  margin: 24px 0 22px;
  overflow: hidden;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  backdrop-filter: none;
}

.smart-filter__intro {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 20px 14px;
  border-right: 0;
  border-bottom: 1px solid var(--c-border-light);
}

.smart-filter__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 8px;
}

.smart-filter__icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
}

.smart-filter__intro strong {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.smart-filter__intro span {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--c-text-3);
}

.smart-filter__main {
  min-width: 0;
  padding: 0 20px 17px;
}

.smart-filter__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--c-border-light);
}

.smart-filter__roots {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.smart-filter__root {
  position: relative;
  min-width: 0;
  height: 34px;
  padding: 0 1px;
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 560;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.smart-filter__root::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  opacity: 0;
  background: var(--c-primary);
  border-radius: 999px;
  transform: scaleX(.65);
  transition: opacity .16s ease, transform .16s ease;
}

.smart-filter__root:hover {
  color: var(--c-text);
  background: transparent;
  border-color: transparent;
}

.smart-filter__root.is-active {
  color: var(--c-text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.smart-filter__root.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.smart-filter__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 7px;
  color: var(--c-text-3);
  font-size: 11px;
  border-radius: 7px;
}

.smart-filter__reset:hover {
  color: var(--c-text-2);
  background: var(--c-bg-hover);
}

.smart-filter__rows {
  display: grid;
  gap: 0;
}

.smart-filter__row {
  display: grid;
  grid-template-columns: 68px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--c-border-light);
}

.smart-filter__row:first-child {
  border-top: 0;
}

.smart-filter__label {
  padding-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-3);
}

.smart-filter__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.smart-filter__choice {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  color: var(--c-text-2);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}

.smart-filter__choice:hover {
  color: var(--c-text);
  background: var(--c-bg-hover);
  border-color: transparent;
}

.smart-filter__choice.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
  box-shadow: none;
}

.smart-filter__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  padding-top: 13px;
  border-top: 1px solid var(--c-border-light);
}

.smart-filter__preview {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--c-text-3);
}

.smart-filter__preview strong {
  color: var(--c-text-2);
  font-weight: 550;
}

.smart-filter__preview-icon {
  display: none;
}

.smart-filter__submit {
  min-width: 116px;
  min-height: 38px;
  padding: 0 16px;
  font-size: 12px;
  border-radius: 9px;
  box-shadow: none;
}

.smart-filter__submit:hover {
  transform: none;
  box-shadow: 0 5px 16px rgba(77,140,255,.22);
}

/* Results use the same visual language instead of a second glass panel. */
.smart-results {
  margin: 0 0 30px;
  padding: 18px 20px 20px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: none;
}

.smart-results .modal-eyebrow {
  display: none;
}

.smart-results__head {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--c-border-light);
}

.smart-results__head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.smart-results__head p {
  margin-top: 4px;
  font-size: 11px;
}

.smart-results__close {
  width: 30px;
  height: 30px;
  background: var(--c-bg-soft);
}

.smart-results__grid {
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 20px 18px;
}

.smart-result-card__poster {
  border-radius: 10px;
  box-shadow: none;
}

.smart-result-card h3 {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 570;
}

.smart-result-card p {
  margin-top: 3px;
  font-size: 10px;
}

html[data-theme="light"] .smart-filter,
html[data-theme="light"] .smart-results {
  background: #fff;
  border-color: rgba(15,23,42,.09);
  box-shadow: 0 10px 28px rgba(15,23,42,.055);
}

html[data-theme="light"] .smart-filter__intro,
html[data-theme="light"] .smart-filter__topline,
html[data-theme="light"] .smart-filter__row,
html[data-theme="light"] .smart-filter__bottom,
html[data-theme="light"] .smart-results__head {
  border-color: rgba(15,23,42,.07);
}

html[data-theme="light"] .smart-filter__root,
html[data-theme="light"] .smart-filter__choice {
  color: #667181;
  background: transparent;
  border-color: transparent;
}

html[data-theme="light"] .smart-filter__root:hover,
html[data-theme="light"] .smart-filter__choice:hover {
  color: #202a37;
  background: #f4f6f8;
}

html[data-theme="light"] .smart-filter__root.is-active {
  color: #1f2937;
  background: transparent;
}

html[data-theme="light"] .smart-filter__choice.is-active {
  color: #2869d8;
  background: #eef5ff;
  border-color: #d8e7ff;
}

@media (min-width: 1101px) and (max-width: 1299px) {
  .smart-results__grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (min-width: 1600px) {
  .smart-results__grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
}


/* ==========================================================================
   HOME DISCOVERY WORKSPACE — desktop homepage only
   Compact quick-filter + poster-led recommendations on one aligned grid.
   ========================================================================== */
@media (min-width: 1101px) {
  .home-discovery-layout {
    display: grid;
    grid-template-columns: clamp(380px,22vw,410px) minmax(0,1fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 30px;
  }

  .home-discovery-layout .home-quick-filter {
    min-width: 0;
    margin: 0;
    overflow: visible;
    color: var(--c-text);
    background: #14181f;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
  }

  .home-quick-filter__head {
    display:flex;
    min-height:48px;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px 8px;
  }
  .home-quick-filter__title-wrap { display:flex; min-width:0; align-items:center; gap:10px; }
  .home-quick-filter__title-icon {
    display:inline-flex;
    width:28px;
    height:28px;
    flex:0 0 28px;
    align-items:center;
    justify-content:center;
    color:#4c8dff;
  }
  .home-quick-filter__title-icon svg {
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .home-quick-filter__title {
    overflow:hidden;
    white-space:nowrap;
    color:#f4f6f9;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.02em;
    text-overflow:ellipsis;
  }
  .home-quick-filter__reset {
    min-height:32px;
    padding:0 6px;
    gap:6px;
    color:#a8b0bd;
    font-size:12px;
    font-weight:500;
    background:transparent;
    border:0;
    border-radius:7px;
  }
  .home-quick-filter__reset svg {
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .home-quick-filter__reset:hover { color:#e9edf3; background:rgba(255,255,255,.04); }

  .home-quick-filter__body { padding:0 18px 16px; }
  .home-quick-filter__segments {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    width:100%;
    padding:3px;
    background:#1c2026;
    border:1px solid rgba(255,255,255,.05);
    border-radius:11px;
  }
  .home-quick-filter__segments .smart-filter__root {
    position:relative;
    width:100%;
    min-width:0;
    height:38px;
    padding:0 6px;
    color:#b6bdc8;
    font-size:13px;
    font-weight:560;
    background:transparent;
    border:0;
    border-radius:8px;
    box-shadow:none;
  }
  .home-quick-filter__segments .smart-filter__root::after { display:none; }
  .home-quick-filter__segments .smart-filter__root:hover { color:#eef1f5; background:rgba(255,255,255,.035); }
  .home-quick-filter__segments .smart-filter__root.is-active {
    color:#fff;
    background:#2a2f37;
    box-shadow:0 1px 0 rgba(255,255,255,.02),0 2px 8px rgba(0,0,0,.10);
  }

  .home-quick-filter__fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 12px;
    margin-top:14px;
  }
  .home-quick-filter__field { min-width:0; }
  .home-quick-filter__label {
    display:block;
    margin:0 0 5px;
    color:#aab2bd;
    font-size:12.5px;
    font-weight:500;
    line-height:1.35;
  }
  .home-quick-filter__select {
    display:flex;
    width:100%;
    height:44px;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    padding:0 12px;
    color:#f1f3f6;
    font-size:13.5px;
    font-weight:540;
    text-align:left;
    background:#1b1f25;
    border:1px solid rgba(255,255,255,.105);
    border-radius:10px;
    box-shadow:none;
    transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
  }
  .home-quick-filter__select:hover { background:#20242b; border-color:rgba(255,255,255,.16); }
  .home-quick-filter__select:focus-visible,
  .home-quick-filter__select.is-open { outline:0; border-color:#4389ff; box-shadow:0 0 0 2px rgba(67,137,255,.12); }
  .home-quick-filter__select:disabled { cursor:default; opacity:.62; }
  .home-quick-filter__value { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .home-quick-filter__select > svg {
    width:16px;
    height:16px;
    flex:0 0 16px;
    fill:none;
    stroke:#aab2bd;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .14s ease,stroke .14s ease;
  }
  .home-quick-filter__select.is-open > svg { stroke:#edf2f8; transform:rotate(180deg); }

  .home-quick-filter__more-toggle {
    display:inline-flex;
    min-height:30px;
    align-items:center;
    gap:8px;
    margin-top:10px;
    padding:0 2px;
    color:#aeb6c2;
    font-size:12.5px;
    font-weight:500;
    background:transparent;
    border:0;
    border-radius:7px;
  }
  .home-quick-filter__more-toggle:hover { color:#f1f4f8; }
  .home-quick-filter__sliders {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
  }
  .home-quick-filter__more-chevron {
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .16s ease;
  }
  .home-quick-filter__more-toggle.is-open .home-quick-filter__more-chevron { transform:rotate(90deg); }
  .home-quick-filter__more {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:8px;
    padding:11px;
    background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
  }
  .home-quick-filter__more[hidden] { display:none !important; }
  .home-quick-filter__field--wide { grid-column:1 / -1; }
  .home-quick-filter__submit {
    width:100%;
    min-width:0;
    min-height:46px;
    margin-top:10px;
    padding:0 16px;
    gap:9px;
    color:#fff;
    font-size:14px;
    font-weight:650;
    background:#4388f7;
    border-radius:10px;
    box-shadow:none;
  }
  .home-quick-filter__submit:hover { background:#4b91ff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(42,110,225,.18); }
  .home-quick-filter__submit > svg {
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .home-discovery-layout .featured-section {
    min-width:0;
    margin:0;
    padding:14px 16px 14px;
    overflow:hidden;
    border-radius:16px;
  }
  .home-discovery-layout .featured-section__head { margin-bottom:10px; }
  .home-discovery-layout .featured-section .section__title { font-size:20px; }
  .home-discovery-layout .featured-track { gap:16px; padding-bottom:2px; }
  .home-discovery-layout .featured-track .media-card {
    width:clamp(170px,10.2vw,180px);
    min-width:clamp(170px,10.2vw,180px);
    flex-basis:clamp(170px,10.2vw,180px);
  }
  .home-discovery-layout + .smart-results { margin-top:0; }

  html[data-theme="light"] .home-discovery-layout .home-quick-filter {
    background:#fff;
    border-color:rgba(15,23,42,.075);
    box-shadow:0 5px 18px rgba(15,23,42,.045);
  }
  html[data-theme="light"] .home-quick-filter__title { color:#161d27; }
  html[data-theme="light"] .home-quick-filter__title-icon { color:#347df3; }
  html[data-theme="light"] .home-quick-filter__segments { background:#f1f3f6; border-color:rgba(15,23,42,.055); }
  html[data-theme="light"] .home-quick-filter__segments .smart-filter__root { color:#616d7d; }
  html[data-theme="light"] .home-quick-filter__segments .smart-filter__root:hover { color:#243142; background:rgba(15,23,42,.03); }
  html[data-theme="light"] .home-quick-filter__segments .smart-filter__root.is-active { color:#17202c; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.07),0 3px 9px rgba(15,23,42,.04); }
  html[data-theme="light"] .home-quick-filter__label { color:#5f6c7d; }
  html[data-theme="light"] .home-quick-filter__select { color:#1f2937; background:#fff; border-color:rgba(15,23,42,.13); }
  html[data-theme="light"] .home-quick-filter__select:hover { background:#fbfcfd; border-color:rgba(15,23,42,.19); }
  html[data-theme="light"] .home-quick-filter__more-toggle { color:#657284; }
  html[data-theme="light"] .home-quick-filter__more-toggle:hover { color:#253142; }
  html[data-theme="light"] .home-quick-filter__more { background:#f8fafc; border-color:rgba(15,23,42,.065); }
}

.smart-filter-popover {
  position:fixed;
  z-index:1200;
  width:318px;
  max-width:calc(100vw - 24px);
  max-height:min(390px,calc(100vh - 24px));
  padding:13px;
  overflow:auto;
  color:#f1f4f8;
  background:rgba(24,28,34,.985);
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  box-shadow:0 20px 48px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(16px) saturate(1.04);
  backdrop-filter:blur(16px) saturate(1.04);
  transform-origin:top left;
  animation:smartFilterPopoverIn .14s ease-out both;
}
.smart-filter-popover--type,
.smart-filter-popover--year,
.smart-filter-popover--sort { width:278px; }
.smart-filter-popover__title { margin:0 0 10px; color:#f2f4f7; font-size:14px; font-weight:650; }
.smart-filter-popover__search {
  display:flex;
  height:41px;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:0 11px;
  background:#1d2128;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
}
.smart-filter-popover__search:focus-within { border-color:#4389ff; box-shadow:0 0 0 2px rgba(67,137,255,.12); }
.smart-filter-popover__search svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:#8994a4; stroke-width:1.7; stroke-linecap:round; }
.smart-filter-popover__search input { width:100%; min-width:0; height:100%; color:#eef2f7; font-size:13px; background:transparent; border:0; outline:0; }
.smart-filter-popover__search input::placeholder { color:#7f8998; }
.smart-filter-popover__options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.smart-filter-popover--type .smart-filter-popover__options,
.smart-filter-popover--year .smart-filter-popover__options,
.smart-filter-popover--sort .smart-filter-popover__options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.smart-filter-popover__option {
  display:flex;
  min-width:0;
  min-height:39px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 9px;
  color:#c5ccd5;
  font-size:12px;
  font-weight:520;
  line-height:1.25;
  text-align:center;
  background:#252a31;
  border:1px solid transparent;
  border-radius:8px;
  transition:color .12s ease,background .12s ease,border-color .12s ease;
}
.smart-filter-popover__option span { overflow:hidden; text-overflow:ellipsis; }
.smart-filter-popover__option svg { width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.smart-filter-popover__option:hover { color:#fff; background:#2b3038; }
.smart-filter-popover__option:focus-visible { outline:2px solid rgba(76,141,255,.72); outline-offset:1px; }
.smart-filter-popover__option.is-active { color:#a9c9ff; background:rgba(67,137,255,.13); border-color:#3f86fa; }
.smart-filter-popover__empty { grid-column:1/-1; padding:18px 8px; color:#8f99a8; font-size:12px; text-align:center; }
html[data-theme="light"] .smart-filter-popover { color:#17202c; background:rgba(255,255,255,.985); border-color:rgba(15,23,42,.11); box-shadow:0 20px 46px rgba(15,23,42,.16); }
html[data-theme="light"] .smart-filter-popover__title { color:#1b2531; }
html[data-theme="light"] .smart-filter-popover__search { background:#f7f9fb; border-color:rgba(15,23,42,.10); }
html[data-theme="light"] .smart-filter-popover__search input { color:#1f2937; }
html[data-theme="light"] .smart-filter-popover__option { color:#526071; background:#f4f6f8; }
html[data-theme="light"] .smart-filter-popover__option:hover { color:#17202c; background:#edf1f5; }
html[data-theme="light"] .smart-filter-popover__option.is-active { color:#2869d8; background:#eef5ff; border-color:#4b8cf5; }
@keyframes smartFilterPopoverIn {
  from { opacity:0; transform:translateY(-3px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@media (min-width:1180px) and (max-width:1399px) {
  .home-discovery-layout { grid-template-columns:380px minmax(0,1fr); gap:18px; }
  .home-discovery-layout .featured-track .media-card { width:170px; min-width:170px; flex-basis:170px; }
}

@media (min-width:1101px) and (max-width:1179px) {
  .home-discovery-layout { display:block; }
  .home-discovery-layout .smart-filter,
  .home-discovery-layout .featured-section { margin-bottom:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .smart-filter-popover { animation:none; }
  .home-quick-filter__more-chevron,
  .home-quick-filter__select > svg { transition:none; }
}

/* ==========================================================================
   Banner readability
   The hero should feel cinematic, not covered by a black sheet.
   ========================================================================== */
.banner {
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 12px 28px rgba(0,0,0,.11);
}
html[data-theme="light"] .page-home .banner {
  border-color: rgba(15,23,42,.06);
  box-shadow: 0 8px 22px rgba(15,23,42,.075);
}

.banner__mask {
  background:
    linear-gradient(
      90deg,
      rgba(8,14,23,.68) 0%,
      rgba(8,14,23,.46) 28%,
      rgba(8,14,23,.18) 58%,
      rgba(8,14,23,.025) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8,14,23,.26) 0%,
      rgba(8,14,23,0) 44%
    );
}

html[data-theme="dark"] .banner__mask {
  background:
    linear-gradient(
      90deg,
      rgba(7,15,26,.64) 0%,
      rgba(10,20,33,.42) 30%,
      rgba(12,24,38,.15) 60%,
      rgba(12,24,38,.02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(7,14,24,.24) 0%,
      rgba(7,14,24,0) 44%
    );
}

html[data-theme="light"] .banner__mask {
  background:
    linear-gradient(
      90deg,
      rgba(14,22,34,.58) 0%,
      rgba(14,22,34,.35) 30%,
      rgba(14,22,34,.10) 60%,
      rgba(14,22,34,.015) 100%
    ),
    linear-gradient(
      0deg,
      rgba(14,22,34,.18) 0%,
      rgba(14,22,34,0) 44%
    );
}

.banner__title {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.26);
}

.banner__meta,
.banner__desc {
  color: rgba(255,255,255,.74) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

.banner .btn--ghost {
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.banner .btn--ghost:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}

/* ==========================================================================
   Smart Results v2 — contained scrolling + sort toolbar
   ========================================================================== */
@media (min-width: 1101px) {
  .smart-results {
    overflow: hidden;
  }

  .smart-results__head {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .smart-results__head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .smart-results__sort {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    margin-left: auto;
  }

  .smart-results__sort-label {
    font-size: 10px;
    color: var(--c-text-3);
  }

  .smart-results__sort-tabs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--c-border-light);
    border-radius: 9px;
  }

  .smart-results__sort-btn {
    min-height: 29px;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 550;
    color: var(--c-text-3);
    border-radius: 7px;
    transition: color .16s ease, background .16s ease;
  }

  .smart-results__sort-btn:hover {
    color: var(--c-text);
    background: rgba(255,255,255,.045);
  }

  .smart-results__sort-btn.is-active {
    color: #77a9ff;
    background: rgba(77,140,255,.12);
  }

  /* The result card area scrolls; the title + sort controls remain visible. */
  .smart-results__grid {
    max-height: 720px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    padding-right: 10px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(130,150,180,.48) rgba(255,255,255,.025);
  }

  .smart-results__grid::-webkit-scrollbar {
    display: block;
    width: 9px;
  }

  .smart-results__grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
    border-radius: 999px;
  }

  .smart-results__grid::-webkit-scrollbar-thumb {
    background: rgba(130,150,180,.46);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }

  .smart-results__grid::-webkit-scrollbar-thumb:hover {
    background: rgba(117,160,224,.72);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  html[data-theme="light"] .smart-results__sort-tabs {
    background: #f5f7fa;
    border-color: rgba(15,23,42,.07);
  }

  html[data-theme="light"] .smart-results__sort-btn {
    color: #697586;
  }

  html[data-theme="light"] .smart-results__sort-btn:hover {
    color: #202a37;
    background: #edf1f5;
  }

  html[data-theme="light"] .smart-results__sort-btn.is-active {
    color: #2869d8;
    background: #eaf2ff;
  }

  html[data-theme="light"] .smart-results__grid {
    scrollbar-color: rgba(100,120,148,.45) rgba(15,23,42,.035);
  }

  html[data-theme="light"] .smart-results__grid::-webkit-scrollbar-track {
    background: rgba(15,23,42,.035);
  }

  html[data-theme="light"] .smart-results__grid::-webkit-scrollbar-thumb {
    background: rgba(100,120,148,.42);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

/* ==========================================================================
   PROFILE LIBRARY V5 — progress, view-all and management UI
   ========================================================================== */
.library-modal { width:min(940px,calc(100% - 24px)); max-height:min(88vh,820px); padding-bottom:0; overflow:hidden; }
.library-modal__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-right:72px; }
.library-manage-toggle { min-width:64px; height:34px; padding:0 14px; color:#9fc2ff; font-size:11px; font-weight:700; background:rgba(77,140,255,.10); border:1px solid rgba(77,140,255,.22); border-radius:10px; }
.library-manage-toggle:disabled { opacity:.38; cursor:not-allowed; }
.library-list { max-height:55vh; overflow-y:auto; align-content:start; grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:24px; }
.library-list.is-loading { min-height:180px; opacity:.5; }
.library-manage-card { position:relative; min-width:0; padding:8px; background:rgba(255,255,255,.025); border:1px solid var(--c-border-light); border-radius:15px; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.library-manage-card:hover { background:rgba(255,255,255,.045); transform:translateY(-2px); }
.library-manage-card.is-selected { background:rgba(77,140,255,.09); border-color:rgba(77,140,255,.72); }
.library-card__link { display:block; min-width:0; color:var(--c-text); }
.library-card__poster { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--c-bg-soft); border:1px solid var(--c-border-light); border-radius:11px; }
.library-card__poster img { width:100%; height:100%; object-fit:cover; }
.library-card__poster > b { position:absolute; top:8px; left:8px; max-width:calc(100% - 16px); padding:4px 7px; overflow:hidden; color:#fff; font-size:9px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; background:rgba(4,9,16,.68); border-radius:7px; backdrop-filter:blur(8px); }
.library-card__copy { display:block; min-width:0; padding:9px 2px 2px; }
.library-card__copy strong,.library-card__copy small,.library-card__watch-time { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.library-card__copy strong { font-size:12px; }
.library-card__copy small { margin-top:3px; color:var(--c-text-3); font-size:9px; }
.library-card__watch-time { margin-top:7px; color:#8fb8ff; font-size:9px; font-weight:650; }
.library-card__progress { position:absolute; right:7px; bottom:7px; left:7px; height:4px; overflow:hidden; background:rgba(255,255,255,.28); border-radius:999px; }
.library-card__progress > i { display:block; height:100%; background:linear-gradient(90deg,#4d8cff,#76b2ff); border-radius:inherit; }
.library-card__select { position:absolute; top:16px; right:16px; z-index:3; display:grid; width:28px; height:28px; place-items:center; visibility:hidden; opacity:0; color:transparent; font-size:14px; font-weight:800; background:rgba(5,12,21,.76); border:2px solid rgba(255,255,255,.78); border-radius:50%; transform:scale(.86); transition:.16s ease; }
.library-modal.is-managing .library-card__select { visibility:visible; opacity:1; transform:scale(1); }
.library-manage-card.is-selected .library-card__select { color:#fff; background:var(--c-primary); border-color:var(--c-primary); }
.library-modal.is-managing .library-card__link { pointer-events:none; }
.library-manage-bar { position:sticky; right:0; bottom:0; left:0; z-index:5; display:flex; min-height:64px; align-items:center; gap:10px; padding:11px 28px; background:rgba(10,18,29,.96); border-top:1px solid var(--c-border); backdrop-filter:blur(18px); }
.library-manage-bar[hidden] { display:none; }
.library-manage-bar > span { flex:1; color:var(--c-text-3); font-size:10px; }
.library-select-all,.library-clear-button,.library-delete-button { min-height:36px; padding:0 13px; font-size:10px; font-weight:700; border-radius:10px; }
.library-select-all { color:#9fc2ff; background:rgba(77,140,255,.1); border:1px solid rgba(77,140,255,.18); }
.library-clear-button { color:#ff9b9b; background:transparent; border:1px solid rgba(255,105,105,.22); }
.library-delete-button { color:#fff; background:#e2525c; }
.library-delete-button:disabled { opacity:.35; cursor:not-allowed; }
html[data-theme="light"] .library-manage-card { background:#f8fafc; }
html[data-theme="light"] .library-manage-bar { background:rgba(255,255,255,.96); }

@media (max-width:760px) {
  .library-modal { width:calc(100% - 16px); max-height:92vh; }
  .library-modal__head { padding-right:62px; }
  .library-list { grid-template-columns:repeat(2,minmax(0,1fr)); padding-right:18px; padding-left:18px; }
  .library-manage-bar { padding-right:18px; padding-left:18px; }
}

@media (max-width:520px) {
  .library-list { grid-template-columns:1fr; }
  .library-card__link { display:grid; grid-template-columns:112px minmax(0,1fr); gap:11px; align-items:center; }
  .library-card__copy { padding:0; }
  .library-manage-bar { flex-wrap:wrap; }
}

/* ========================================================================== 
   UI/UX FIX 2026-09-21 — auth, library, navbar, dark logo, detail light mode
   ========================================================================== */

/* Dark artwork logo: source logo is optimized for light surfaces. */
html[data-theme="dark"] .header__logo img,
html[data-theme="dark"] .footer__logo img,
html[data-theme="dark"] .auth-modal__brand img {
  filter: brightness(0) invert(1);
  opacity: .96;
}

/* Accessible custom checkboxes for remember-me and registration consent. */
.auth-check-row {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--c-text-2);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--c-border-light);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.auth-check-row:hover { border-color: rgba(77,140,255,.30); background: rgba(77,140,255,.045); }
.auth-check-row:active { transform: scale(.995); }
.auth-check-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.auth-check-box {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  color: transparent;
  font-size: 12px;
  font-weight: 800;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  transition: .18s ease;
}
.auth-check-row input:checked + .auth-check-box { color: #fff; background: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 5px 14px rgba(77,140,255,.25); }
.auth-check-row input:focus-visible + .auth-check-box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.auth-check-row > span:last-child { display: grid; min-width: 0; gap: 2px; }
.auth-check-row strong { color: var(--c-text); font-size: 11px; font-weight: 650; }
.auth-check-row small { color: var(--c-text-3); font-size: 9px; line-height: 1.45; }
html[data-theme="light"] .auth-check-row { background: #f7f9fc; }

/* Management mode: every card surface is a safe selection target; link navigation is disabled. */
.library-modal.is-managing .library-manage-card { cursor: pointer; user-select: none; }
.library-modal.is-managing .library-manage-card:hover { transform: none; border-color: rgba(77,140,255,.42); }
.library-card__select { width: 34px; height: 34px; top: 12px; right: 12px; cursor: pointer; }
.library-card__select:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.library-manage-card.is-selected { box-shadow: inset 0 0 0 1px rgba(77,140,255,.22); }

.play-source__panel[hidden] { display: none !important; }


/* ========================================================================== 
   CARD FAVORITES + COMPACT UTILITY CONTROLS — 2026-09-21
   ========================================================================== */
.media-card__info,
.vod-card__info {
  position: relative;
  padding-right: 38px;
}

.card-favorite-btn {
  position: absolute;
  top: 7px;
  right: 0;
  z-index: 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--c-text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.card-favorite-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .18s ease, transform .18s ease;
}
.card-favorite-btn:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-color: rgba(77,140,255,.20);
}
.card-favorite-btn:active { transform: scale(.91); }
.card-favorite-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.card-favorite-btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 6px 16px rgba(77,140,255,.22);
}
.card-favorite-btn.is-active svg { fill: currentColor; }
.card-favorite-btn.is-busy { pointer-events: none; opacity: .55; }
html[data-theme="light"] .card-favorite-btn:not(.is-active):hover {
  background: #eaf2ff;
  border-color: rgba(77,140,255,.18);
}

@media (max-width: 640px) {
  .media-card__info,
  .vod-card__info { padding-right: 34px; }
  .card-favorite-btn { top: 6px; width: 28px; height: 28px; border-radius: 9px; }
  .card-favorite-btn svg { width: 16px; height: 16px; }
}



/* ========================================================================== 
   Tablet-width desktop fallback
   If a proxy/cache ever serves the desktop template around tablet widths,
   keep the header usable while the device-template cookie switches on reload.
   ========================================================================== */
@media (max-width: 1100px) {
  .header__inner {
    gap: 8px;
    padding-inline: 16px;
  }

  .header__logo img {
    max-width: 118px;
    height: 30px;
  }

  .header__nav {
    display: none;
  }

  .header__search {
    width: auto;
    min-width: 0;
    max-width: 430px;
    flex: 1 1 300px;
    margin-left: auto;
  }

  .header__search .search-form {
    gap: 6px;
  }

  .header__search .search-form__input {
    min-width: 0;
    padding-inline: 12px;
  }

  .header__search .search-form__btn {
    min-width: 68px;
    padding-inline: 12px;
  }

  .header-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .header-user-label,
  .header-user__name {
    display: none !important;
  }

  .header-action-btn {
    min-width: 40px;
    padding-inline: 9px;
  }

  .header-language-btn {
    min-width: 68px;
  }
}

/* ==========================================================================
   SEARCH V3 — richer desktop results + bidirectional sort controls
   ========================================================================== */
.search-page__head {
  margin: 8px 0 14px;
}
.search-page__eyebrow {
  display:block;
  margin-bottom:5px;
  color:var(--c-primary-hover);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
.search-page__subtitle {
  margin-top:5px;
  color:var(--c-text-3);
  font-size:11px;
}
.web-search-smart-filter {
  margin-top:14px;
  margin-bottom:22px;
}
.web-search-smart-filter .smart-filter__intro > div:last-child {
  min-width:0;
}
.web-search-smart-filter .smart-filter__intro span {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.web-search-smart-filter .smart-filter__reset svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.search-native-results[hidden] { display:none !important; }
.search-native-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:4px 0 16px;
}
.search-native-head h2 {
  margin:0;
  color:var(--c-text);
  font-size:18px;
  line-height:1.2;
}
.search-native-head p {
  margin-top:4px;
  color:var(--c-text-3);
  font-size:10px;
}

.result-sort-control {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.result-sort-control__label,
.smart-results__sort-label {
  flex:0 0 auto;
  color:var(--c-text-3);
  font-size:10px;
  font-weight:550;
}
.result-sort-segment {
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:3px;
  padding:3px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--c-border-light);
  border-radius:11px;
}
.result-sort-option,
.smart-results__sort-btn {
  display:inline-flex;
  min-height:32px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  white-space:nowrap;
  color:var(--c-text-3);
  font-size:11px;
  font-weight:600;
  border-radius:8px;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease;
}
.result-sort-option:hover,
.smart-results__sort-btn:hover {
  color:var(--c-text);
  background:rgba(255,255,255,.045);
}
.result-sort-option::after {
  content:"↕";
  min-width:10px;
  color:var(--c-text-3);
  font-size:10px;
  line-height:1;
  text-align:center;
}
.result-sort-option.is-active {
  color:var(--c-primary-hover);
  background:var(--c-primary-soft);
  box-shadow:inset 0 0 0 1px var(--c-primary-line);
}
.result-sort-option.is-active::after {
  content:"↓";
  color:currentColor;
}
.result-sort-option.is-active.is-asc::after { content:"↑"; }
.smart-results__sort-btn.is-active {
  color:var(--c-primary-hover);
  background:var(--c-primary-soft);
  box-shadow:inset 0 0 0 1px var(--c-primary-line);
}
.result-sort-direction {
  min-width:10px;
  color:currentColor;
  font-size:10px;
  line-height:1;
  text-align:center;
}
.result-sort-reset {
  display:inline-flex;
  min-height:32px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  color:var(--c-text-3);
  font-size:10px;
  font-weight:600;
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.result-sort-reset svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.result-sort-reset:hover {
  color:var(--c-text);
  background:var(--c-bg-hover);
  border-color:var(--c-border-light);
}
.result-sort-reset.is-disabled { opacity:.48; }
.smart-results__sort {
  display:flex;
  align-items:center;
  gap:9px;
}
.smart-results__sort .result-sort-reset { margin-left:1px; }
.search-smart-results .smart-results__head { gap:12px; }
.search-smart-results .smart-results__head > div:first-child { min-width:0; flex:1 1 auto; }
.search-smart-results .smart-results__grid { margin-top:2px; }
.search-vod-grid { margin-top:0; }

html[data-theme="light"] .result-sort-segment {
  background:#f4f6f9;
  border-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .result-sort-option,
html[data-theme="light"] .smart-results__sort-btn {
  color:#687587;
}
html[data-theme="light"] .result-sort-option:hover,
html[data-theme="light"] .smart-results__sort-btn:hover {
  color:#1f2a38;
  background:#e9eef4;
}
html[data-theme="light"] .result-sort-option.is-active,
html[data-theme="light"] .smart-results__sort-btn.is-active {
  color:#2869d8;
  background:#eaf2ff;
  box-shadow:inset 0 0 0 1px rgba(50,112,215,.12);
}

@media (max-width:1100px) {
  .search-native-head {
    align-items:flex-start;
    flex-direction:column;
    gap:11px;
  }
  .search-result-sort { width:100%; }
  .search-result-sort .result-sort-segment { flex:1 1 auto; }
  .search-result-sort .result-sort-option { flex:1 1 0; }
}

/* =========================================================
   2026-09-22 — Stable source-aware history
   ========================================================= */

.library-card__poster {
    position: relative;
}

.library-card__source {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;

    max-width: calc(100% - 76px);
    padding: 5px 8px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;

    color: rgba(255,255,255,.94);
    background: rgba(9,13,21,.72);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.library-card__watch-time {
    min-height: 16px;
}

.player__wrap iframe.is-safety-reloading {
    opacity: 0;
}

.player__wrap iframe {
    transition: opacity .16s ease;
}


/* =========================================================
   2026-09-22 — Actor profile, Apple-inspired editorial layout
   ========================================================= */

.actor-page--profile {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(91,142,255,.055), transparent 32%),
        var(--c-bg);
}

.actor-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 0 62px;
    border-bottom: 1px solid var(--c-border);
    background:
        linear-gradient(180deg, rgba(12,17,26,.56) 0%, rgba(12,17,26,.82) 62%, rgba(12,17,26,.96) 100%);
}

.actor-hero__ambient {
    position: absolute;
    inset: -18%;
    z-index: -2;
    pointer-events: none;
}

.actor-hero__ambient::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--actor-portrait-image);
    background-position: center 24%;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(86px) saturate(1.15);
    opacity: .24;
    transform: scale(1.16);
}

.actor-hero__ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 32%, rgba(79,132,255,.17), transparent 28%),
        linear-gradient(90deg, rgba(9,14,22,.50), rgba(9,14,22,.84) 62%, rgba(9,14,22,.96));
}

.actor-hero__container {
    position: relative;
    z-index: 1;
}

.actor-back {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;

    margin: 0 0 24px;
    padding: 0 13px 0 10px;

    color: rgba(240,246,255,.78);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 650;
    cursor: pointer;

    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);

    transition:
        transform .18s ease,
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.actor-back:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    transform: translateX(-2px);
}

.actor-back svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.actor-hero__grid {
    display: grid;
    grid-template-columns: minmax(240px, 338px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(42px, 6vw, 86px);
}

.actor-portrait {
    position: relative;
    width: min(100%, 338px);
    aspect-ratio: 2 / 3;
    margin: 0;

    overflow: hidden;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 28px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
        rgba(255,255,255,.04);

    box-shadow:
        0 36px 90px rgba(0,0,0,.34),
        0 12px 32px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.actor-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 16%),
        linear-gradient(0deg, rgba(2,6,12,.22), transparent 22%);
}

.actor-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.actor-portrait__fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;

    color: rgba(255,255,255,.72);
    font-size: clamp(62px, 10vw, 118px);
    font-weight: 760;
    letter-spacing: -.06em;

    background:
        radial-gradient(circle at 35% 25%, rgba(77,139,255,.22), transparent 38%),
        rgba(255,255,255,.04);
}

.actor-identity {
    min-width: 0;
    max-width: 790px;
}

.actor-eyebrow {
    margin-bottom: 14px;

    color: #76a7ff;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.actor-identity__name {
    max-width: 900px;
    margin: 0;

    color: #fff;
    font-size: clamp(42px, 5.2vw, 74px);
    line-height: .98;
    font-weight: 760;
    letter-spacing: -.052em;
    overflow-wrap: anywhere;
}

.actor-identity__en {
    margin-top: 15px;

    color: rgba(236,243,255,.58);
    font-size: clamp(15px, 1.45vw, 21px);
    line-height: 1.35;
    font-weight: 520;
    letter-spacing: -.015em;
}

.actor-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.actor-fact {
    display: grid;
    gap: 3px;

    min-width: 128px;
    padding: 11px 13px;

    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.actor-fact span {
    color: rgba(222,232,247,.45);
    font-size: 10px;
    font-weight: 650;
}

.actor-fact strong {
    color: rgba(248,251,255,.88);
    font-size: 12px;
    font-weight: 650;
}

.actor-bio {
    max-width: 760px;
    margin-top: 30px;
}

.actor-bio__title {
    margin-bottom: 9px;

    color: rgba(245,249,255,.96);
    font-size: 13px;
    font-weight: 760;
}

.actor-bio__text,
.actor-bio__empty {
    color: rgba(230,237,248,.72);
    font-size: 14px;
    line-height: 1.88;
    letter-spacing: -.006em;
}

.actor-bio__text {
    max-height: 15.2em;
    overflow: auto;
    padding-right: 8px;
    scrollbar-width: thin;
}

.actor-bio__empty {
    max-width: 560px;
    color: rgba(225,234,247,.50);
}

.actor-works-section {
    position: relative;
    z-index: 2;
    padding: 48px 0 72px;
}

.actor-works-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.actor-works-head__eyebrow {
    display: block;
    margin-bottom: 7px;

    color: var(--c-primary);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .15em;
}

.actor-works-head h2 {
    margin: 0;
    color: var(--c-text);
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.035em;
}

.actor-works-head p {
    max-width: 420px;
    margin: 0;

    color: var(--c-text-3);
    font-size: 12px;
    line-height: 1.6;
    text-align: right;
}

.actor-works-head p strong {
    display: block;
    margin-top: 2px;
    color: var(--c-text-2);
    font-weight: 650;
}

.actor-works-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(158px, 15.4vw, 210px);
    gap: 16px;

    width: 100%;
    padding: 2px 2px 17px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(121,145,184,.34) transparent;
}

.actor-work-card {
    width: auto !important;
    min-width: 0 !important;
    scroll-snap-align: start;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.actor-work-card__cover {
    position: relative;
    display: block;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 2 / 3;

    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 20px;

    box-shadow:
        0 14px 36px rgba(7,12,20,.10),
        0 2px 7px rgba(7,12,20,.06);

    transform: translateZ(0);
    transition:
        transform .24s cubic-bezier(.2,.8,.2,1),
        box-shadow .24s ease,
        border-color .24s ease;
}

.actor-work-card__cover .vod-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .34s cubic-bezier(.2,.8,.2,1);
}

.actor-work-card:hover .actor-work-card__cover {
    border-color: var(--c-primary-line);
    box-shadow:
        0 22px 54px rgba(7,12,20,.18),
        0 4px 14px rgba(7,12,20,.08);
    transform: translateY(-5px);
}

.actor-work-card:hover .actor-work-card__cover .vod-card__img {
    transform: scale(1.035);
}

.actor-work-card__hover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    opacity: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(5,8,13,.42));
    transition: opacity .22s ease;
}

.actor-work-card:hover .actor-work-card__hover {
    opacity: 1;
}

.actor-work-card__play {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;

    color: #101722;
    background: rgba(255,255,255,.91);
    border-radius: 50%;
    box-shadow: 0 14px 36px rgba(0,0,0,.24);

    transform: translateY(6px) scale(.92);
    transition: transform .22s ease;
}

.actor-work-card:hover .actor-work-card__play {
    transform: translateY(0) scale(1);
}

.actor-work-card__play svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transform: translateX(1px);
}

.actor-work-card__info {
    padding: 11px 2px 0 !important;
}

.actor-work-card__title {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.35;
    font-weight: 700 !important;
}

.actor-work-card__title a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--c-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.actor-work-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px !important;

    color: var(--c-text-3);
    font-size: 10.5px !important;
    line-height: 1.45;
}

.actor-work-card__meta span {
    min-width: 0;
}

html[data-theme="light"] .actor-hero {
    background:
        linear-gradient(180deg, rgba(245,248,253,.78) 0%, rgba(242,246,252,.90) 58%, rgba(242,246,252,.985) 100%);
}

html[data-theme="light"] .actor-hero__ambient::before {
    opacity: .13;
    filter: blur(90px) saturate(.9);
}

html[data-theme="light"] .actor-hero__ambient::after {
    background:
        radial-gradient(circle at 24% 32%, rgba(67,121,230,.11), transparent 30%),
        linear-gradient(90deg, rgba(239,244,252,.30), rgba(239,244,252,.72) 62%, rgba(239,244,252,.94));
}

html[data-theme="light"] .actor-back {
    color: rgba(32,47,68,.72);
    background: rgba(255,255,255,.58);
    border-color: rgba(44,65,94,.11);
}

html[data-theme="light"] .actor-back:hover {
    color: #132033;
    background: rgba(255,255,255,.86);
    border-color: rgba(44,65,94,.18);
}

html[data-theme="light"] .actor-identity__name {
    color: #111a28;
}

html[data-theme="light"] .actor-identity__en {
    color: rgba(31,46,67,.54);
}

html[data-theme="light"] .actor-fact {
    background: rgba(255,255,255,.58);
    border-color: rgba(45,66,96,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

html[data-theme="light"] .actor-fact span {
    color: rgba(43,61,86,.47);
}

html[data-theme="light"] .actor-fact strong {
    color: rgba(20,32,49,.82);
}

html[data-theme="light"] .actor-bio__title {
    color: #172337;
}

html[data-theme="light"] .actor-bio__text,
html[data-theme="light"] .actor-bio__empty {
    color: rgba(32,48,70,.66);
}

html[data-theme="light"] .actor-portrait {
    border-color: rgba(38,60,90,.10);
    box-shadow:
        0 32px 80px rgba(31,53,84,.16),
        0 9px 28px rgba(31,53,84,.10),
        inset 0 1px 0 rgba(255,255,255,.75);
}

@media (max-width: 980px) {
    .actor-hero {
        padding-bottom: 48px;
    }

    .actor-hero__grid {
        grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
        gap: 34px;
    }

    .actor-identity__name {
        font-size: clamp(36px, 5.8vw, 58px);
    }

    .actor-works-head {
        align-items: start;
    }
}

@media (max-width: 720px) {
    .actor-hero {
        padding: 18px 0 38px;
    }

    .actor-back {
        margin-bottom: 18px;
    }

    .actor-hero__grid {
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
    }

    .actor-portrait {
        width: 118px;
        border-radius: 18px;
    }

    .actor-eyebrow {
        margin-top: 4px;
        margin-bottom: 8px;
        font-size: 9px;
    }

    .actor-identity__name {
        font-size: clamp(29px, 9vw, 42px);
        line-height: 1.02;
    }

    .actor-identity__en {
        margin-top: 8px;
        font-size: 13px;
    }

    .actor-facts,
    .actor-bio {
        grid-column: 1 / -1;
    }

    .actor-facts {
        margin-top: 18px;
    }

    .actor-fact {
        min-width: 0;
        flex: 1 1 120px;
    }

    .actor-bio {
        margin-top: 20px;
    }

    .actor-bio__text,
    .actor-bio__empty {
        font-size: 13px;
        line-height: 1.82;
    }

    .actor-works-section {
        padding: 34px 0 54px;
    }

    .actor-works-head {
        display: block;
        margin-bottom: 17px;
    }

    .actor-works-head p {
        margin-top: 8px;
        text-align: left;
    }

    .actor-works-head p strong {
        display: inline;
        margin-left: 5px;
    }

    .actor-works-rail {
        grid-auto-columns: 146px;
        gap: 12px;
        margin-right: calc(var(--container-padding, 16px) * -1);
        padding-right: 18px;
    }

    .actor-work-card__cover {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actor-back,
    .actor-work-card__cover,
    .actor-work-card__cover .vod-card__img,
    .actor-work-card__hover,
    .actor-work-card__play,
    .player__wrap iframe {
        transition: none !important;
    }
}

/* ========================================================================== 
   Desktop play page V6 — scoped to aid=15 only
   ========================================================================== */
.page-play-body {
  --play-surface: var(--c-bg-card);
  --play-soft: var(--c-bg-soft);
  --play-border: var(--c-border-light);
}

.page-play-body .play-page {
  padding-top: calc(var(--header-h) + 16px);
}

.page-play-body .play-page__container {
  max-width: 1680px;
}

.page-play-body .play-breadcrumb {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  color: var(--c-text-3);
}

.page-play-body .play-breadcrumb a {
  color: var(--c-text-3);
}

.page-play-body .play-breadcrumb a:hover {
  color: var(--c-primary-hover);
}

.page-play-body .play-breadcrumb span:last-child {
  overflow: hidden;
  color: var(--c-text-2);
  text-overflow: ellipsis;
}

.page-play-body .watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(392px, 27vw, 455px);
  align-items: start;
  gap: 20px;
}

.page-play-body .watch-main {
  min-width: 0;
}

.page-play-body .player__wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  box-shadow: none;
}

.page-play-body .player__wrap video,
.page-play-body .player__wrap #MacPlayer video,
.page-play-body .player__wrap .MacPlayer video {
  object-fit: contain !important;
}

.page-play-body .watch-meta {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 6px;
}

.page-play-body .watch-meta__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.page-play-body .watch-meta__title-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}

.page-play-body .watch-meta__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(25px, 1.6vw, 32px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--c-text);
  text-overflow: ellipsis;
}

.page-play-body .watch-meta__episode {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-3);
}

.page-play-body .watch-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-3);
}

.page-play-body .watch-meta__facts span {
  display: inline-flex;
  align-items: center;
}

.page-play-body .watch-meta__facts span + span::before {
  content: "·";
  margin: 0 7px;
  color: var(--c-text-3);
}

.page-play-body .watch-meta__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.page-play-body .watch-action-link,
.page-play-body .watch-action-btn,
.page-play-body .watch-next-btn {
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--play-surface);
  border: 1px solid var(--c-border);
  border-radius: 9px;
  cursor: pointer;
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}

.page-play-body .watch-action-link svg,
.page-play-body .watch-action-btn svg,
.page-play-body .watch-next-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-play-body .watch-action-link--detail {
  color: var(--c-primary-hover);
  background: transparent;
  border-color: transparent;
}

.page-play-body .watch-action-link:hover,
.page-play-body .watch-action-btn:hover {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.page-play-body .watch-action-btn.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.page-play-body .watch-action-btn.is-active svg {
  fill: currentColor;
}

.page-play-body .watch-next-btn {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.page-play-body .watch-next-btn:hover {
  color: #fff;
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

.page-play-body .watch-next-btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.page-play-body #favoriteBtn.is-active,
.page-play-body #likeBtn.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.page-play-body .watch-sidebar {
  min-width: 0;
  overflow: visible;
  padding: 18px;
  background: var(--play-surface);
  border: 1px solid var(--play-border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.035);
}

.page-play-body .watch-sidebar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.page-play-body .watch-sidebar__header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
}

.page-play-body .watch-sidebar__subtitle,
.page-play-body .watch-sidebar__current {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text-3);
}

.page-play-body .watch-sidebar__current {
  max-width: 42%;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-play-body .watch-lines__label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
}

.page-play-body .watch-lines__rail {
  display: flex;
  width: 100%;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.page-play-body .watch-lines__rail::after {
  content: "";
  width: 1px;
  flex: 0 0 1px;
}

.page-play-body .watch-source-tab {
  min-width: 0;
  height: 38px;
  flex: 1 0 max-content;
  scroll-snap-align: start;
  padding: 0 14px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  background: var(--play-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.page-play-body .watch-source-tab:hover {
  color: var(--c-text);
  background: var(--c-bg-elevated, var(--play-soft));
}

.page-play-body .watch-source-tab.is-active {
  color: var(--c-primary-hover);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.page-play-body .watch-source-tab.is-browsing:not(.is-active) {
  color: var(--c-text);
  border-color: var(--c-border);
}

.page-play-body .watch-source-message {
  display: none;
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #a85b1f;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 8px;
}

.page-play-body .watch-source-message.is-visible {
  display: block;
}

.page-play-body .watch-episode-panels {
  margin-top: 12px;
}

.page-play-body .watch-episode-panel[hidden] {
  display: none !important;
}

.page-play-body .watch-episode-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.85fr) auto;
  gap: 7px;
  margin-bottom: 9px;
}

.page-play-body .watch-episode-tools[hidden] {
  display: none !important;
}

.page-play-body .watch-range-field,
.page-play-body .watch-jump-field {
  min-width: 0;
}

.page-play-body .watch-range-select,
.page-play-body .watch-jump-input,
.page-play-body .watch-tool-btn,
.page-play-body .watch-current-btn {
  height: 36px;
  font-size: 12px;
  color: var(--c-text-2);
  background: var(--play-soft);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

.page-play-body .watch-range-select,
.page-play-body .watch-jump-input {
  width: 100%;
  padding: 0 10px;
  outline: none;
}

.page-play-body .watch-range-select:focus,
.page-play-body .watch-jump-input:focus {
  border-color: var(--c-primary-line);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.page-play-body .watch-tool-btn {
  padding: 0 11px;
  cursor: pointer;
}

.page-play-body .watch-current-btn {
  grid-column: 1 / -1;
  justify-self: start;
  height: auto;
  padding: 3px 0 0;
  color: var(--c-primary-hover);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.page-play-body .watch-episode-grid,
.page-play-body .watch-episode-grid.episode-scroll,
.page-play-body .watch-episode-grid.episode-scroll.no-scrollbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-height: none;
  padding: 0;
  overflow: visible !important;
  scroll-behavior: smooth;
}

.page-play-body .watch-episode-panel.is-scroll-mode .watch-episode-grid,
.page-play-body .watch-episode-panel.is-paged-mode .watch-episode-grid {
  max-height: 252px;
  padding-right: 5px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 132, 151, 0.55) transparent !important;
}

.page-play-body .watch-episode-grid::-webkit-scrollbar {
  width: 6px !important;
}

.page-play-body .watch-episode-grid::-webkit-scrollbar-track {
  background: transparent !important;
}

.page-play-body .watch-episode-grid::-webkit-scrollbar-thumb {
  background: rgba(120, 132, 151, 0.45) !important;
  border-radius: 999px !important;
}

.page-play-body .watch-episode-grid .episode-btn {
  display: flex;
  width: 100%;
  min-width: 0 !important;
  height: 44px;
  flex: none !important;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  background: var(--play-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
}

.page-play-body .watch-episode-grid .episode-btn:hover {
  color: var(--c-text);
  background: var(--c-primary-soft);
  border-color: var(--c-primary-line);
}

.page-play-body .watch-episode-grid .episode-btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: none;
}

.page-play-body .watch-episode-grid .episode-btn.is-located:not(.is-active) {
  color: var(--c-primary-hover);
  background: transparent;
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.page-play-body .watch-single-note {
  margin: 4px 0 0;
  padding: 11px 12px;
  font-size: 13px;
  color: var(--c-text-2);
  background: var(--play-soft);
  border-radius: 8px;
}

.page-play-body .watch-episode-hint {
  min-height: 18px;
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-3);
}

.page-play-body .watch-sidebar__footer {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--c-border-light);
}

.page-play-body .watch-autonext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.page-play-body .watch-autonext strong,
.page-play-body .watch-autonext span {
  display: block;
}

.page-play-body .watch-autonext strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
}

.page-play-body .watch-autonext #autoNextSupportText {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-3);
}

.page-play-body .watch-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  background: #9ca3af;
  border: 0;
  border-radius: 999px;
  transition: background var(--tr-fast), opacity var(--tr-fast);
}

.page-play-body .watch-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform var(--tr-fast);
}

.page-play-body .watch-switch[aria-checked="true"] {
  background: var(--c-primary);
}

.page-play-body .watch-switch[aria-checked="true"] span {
  transform: translateX(18px);
}

.page-play-body .watch-switch:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.page-play-body .watch-feedback {
  margin-top: 10px;
  padding: 0;
  font-size: 12px;
  color: var(--c-text-3);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.page-play-body .watch-feedback span {
  margin-left: 4px;
  color: var(--c-primary-hover);
}

.page-play-body .play-recommendations {
  margin-top: 24px;
}

.page-play-body .play-recommendations .section__head {
  margin-bottom: 12px;
}

.page-play-body .play-recommendations .vod-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.page-play-body .play-recommendations .vod-card__cover {
  border-radius: 9px;
}

.page-play-body .play-recommendations .vod-card__title {
  font-size: 14px;
  line-height: 1.35;
}

.page-play-body .play-recommendations .vod-card__meta {
  font-size: 12px;
  color: var(--c-text-3);
}

.page-play-body :is(.watch-source-tab, .episode-btn, .watch-range-select, .watch-jump-input, .watch-tool-btn, .watch-current-btn, .watch-action-link, .watch-action-btn, .watch-next-btn, .watch-switch, .watch-feedback):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

html[data-theme="light"] .page-play-body .watch-sidebar {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.09);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.025);
}

html[data-theme="light"] .page-play-body .watch-source-tab,
html[data-theme="light"] .page-play-body .watch-episode-grid .episode-btn,
html[data-theme="light"] .page-play-body .watch-range-select,
html[data-theme="light"] .page-play-body .watch-jump-input,
html[data-theme="light"] .page-play-body .watch-tool-btn,
html[data-theme="light"] .page-play-body .watch-single-note {
  background: #f4f6f8;
}

html[data-theme="light"] .page-play-body .watch-episode-grid .episode-btn:hover:not(.is-active):not(.is-located) {
  color: #1f2937;
  background: #eaf2ff;
}

html[data-theme="light"] .page-play-body .watch-source-tab.is-active,
html[data-theme="light"] .page-play-body .watch-episode-grid .episode-btn.is-active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}

html[data-theme="dark"] .page-play-body .watch-sidebar {
  background: #171b21;
  border-color: rgba(255,255,255,.075);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

@media (max-width: 1500px) {
  .page-play-body .watch-layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 18px;
  }

  .page-play-body .watch-meta {
    gap: 12px;
  }

  .page-play-body .watch-meta__actions {
    gap: 6px;
  }

  .page-play-body .watch-action-link,
  .page-play-body .watch-action-btn,
  .page-play-body .watch-next-btn {
    padding-inline: 11px;
  }
}

@media (max-width: 1260px) {
  .page-play-body .watch-layout {
    grid-template-columns: minmax(0, 1fr) 365px;
  }

  .page-play-body .watch-sidebar {
    padding: 16px;
  }

  .page-play-body .watch-meta {
    flex-direction: column;
  }

  .page-play-body .watch-meta__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1120px) {
  .page-play-body .watch-layout {
    grid-template-columns: 1fr;
  }

  .page-play-body .watch-sidebar {
    width: 100%;
  }

  .page-play-body .play-recommendations .vod-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-play-body .watch-lines__rail,
  .page-play-body .watch-episode-grid {
    scroll-behavior: auto !important;
  }
}
.page-play-body .watch-lines { position: relative; }
.page-play-body .watch-lines.is-overflowing::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 30px;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--play-surface));
}
.page-play-body .watch-episode-hint.is-error { color: #b45309; }


/* ===== Desktop play page V7 interaction-state refinements ===== */
.page-play-body .watch-line-status {
  min-height: 17px;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--c-text-3);
}
.page-play-body .watch-source-tab.is-active { color:#fff; background:var(--c-primary); border-color:var(--c-primary); }
.page-play-body .watch-source-tab.is-browsing:not(.is-active) { color:var(--c-primary-hover); background:var(--c-primary-soft); border-color:var(--c-primary-line); }
.page-play-body .watch-source-message { color:var(--c-text-2); background:var(--play-soft); border-color:var(--c-border-light); }
.page-play-body .watch-source-message.is-warning { color:#9a5b19; background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.18); }

.page-play-body .watch-episode-tools {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:end;
  gap:7px;
}
.page-play-body .watch-tool-label { display:block; margin:0 0 5px 2px; font-size:11px; font-weight:600; color:var(--c-text-3); }
.page-play-body .watch-range-select,
.page-play-body .watch-jump-input,
.page-play-body .watch-tool-btn { height:38px; }
.page-play-body .watch-current-btn { grid-column:1 / -1; margin-top:-1px; padding-top:2px; font-size:11px; }
.page-play-body .watch-range-select:focus,
.page-play-body .watch-jump-input:focus { border-color:var(--c-border); box-shadow:none; }

.page-play-body .watch-episode-grid .episode-btn { position:relative; color:var(--c-text); background:var(--play-soft); border-color:transparent; }
.page-play-body .watch-episode-grid .episode-btn.is-active {
  color:#fff !important;
  background:var(--c-primary) !important;
  border-color:var(--c-primary) !important;
  box-shadow:none !important;
}
.page-play-body .watch-episode-grid .episode-btn.is-active::before {
  content:"";
  width:0; height:0; margin-right:7px; flex:0 0 auto;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid currentColor;
}
.page-play-body .watch-episode-grid .episode-btn.is-located:not(.is-active) {
  color:#1768d9 !important;
  background:#e8f2ff !important;
  border-color:#6ca7f7 !important;
  box-shadow:none !important;
}
.page-play-body .watch-episode-grid .episode-btn.is-disabled,
.page-play-body .watch-episode-grid .episode-btn[aria-disabled="true"] {
  color:var(--c-text-3) !important;
  background:var(--play-soft) !important;
  border-color:transparent !important;
  cursor:not-allowed;
  pointer-events:none;
  opacity:1;
}
.page-play-body .watch-episode-grid .episode-btn:focus { outline:none; }
.page-play-body .watch-episode-grid .episode-btn:focus-visible {
  outline:2px solid #1677ff !important;
  outline-offset:2px;
  box-shadow:none !important;
}
.page-play-body .watch-episode-hint { min-height:17px; color:var(--c-text-3); }
.page-play-body .watch-episode-hint.is-error { color:#b45309; }

.page-play-body .watch-sidebar.is-single-movie { align-self:start; padding-bottom:15px; }
.page-play-body .watch-sidebar.is-single-movie .watch-sidebar__header { margin-bottom:12px; }
.page-play-body .watch-sidebar.is-single-movie .watch-lines { margin-top:0; }
.page-play-body .watch-sidebar.is-single-movie .watch-lines__rail { padding-bottom:0; }
.page-play-body .watch-sidebar.is-single-movie .watch-line-status:empty { display:none; }
.page-play-body .watch-sidebar.is-single-movie .watch-sidebar__footer { margin-top:12px; padding-top:10px; }
.page-play-body .watch-layout.is-single-movie .watch-meta__actions .watch-next-btn { display:none !important; }
.page-play-body .watch-layout.is-single-movie .watch-episode-panels { display:none !important; }

html[data-theme="light"] .page-play-body .watch-episode-grid .episode-btn:not(.is-active):not(.is-located) { color:#253247; background:#f2f5f8; }
html[data-theme="dark"] .page-play-body .watch-episode-grid .episode-btn:not(.is-active):not(.is-located) { color:#d7dee8; background:#222832; }
html[data-theme="dark"] .page-play-body .watch-episode-grid .episode-btn.is-located:not(.is-active) { color:#8ec0ff !important; background:#163357 !important; border-color:#397ed7 !important; }
html[data-theme="dark"] .page-play-body .watch-source-message { background:#20262f; border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .page-play-body .watch-source-message.is-warning { color:#f0bd77; background:rgba(180,103,20,.11); border-color:rgba(245,158,11,.2); }
.page-play-body .watch-sidebar.is-single-movie .watch-autonext,
.page-play-body .watch-layout.is-single-movie .watch-autonext {
  display: none !important;
}

/* ========================================================================== 
   Desktop movie detail page — 2026-09-23
   Scope: .movie-detail-page only. No homepage/search/play/mobile overrides.
   ========================================================================== */
@media (min-width: 1101px) {
  .movie-detail-page {
    width:100%;
    min-height:100vh;
    padding-top:var(--header-h);
    padding-bottom:44px;
    color:var(--c-text);
    background:#0d1016;
  }

  .movie-detail-page .movie-detail-shell,
  .movie-detail-page.movie-detail-page > .container {
    width:min(calc(100% - 48px), 1680px);
    max-width:1680px;
    margin-inline:auto;
    padding-inline:0;
  }

  .movie-detail-hero {
    position:relative;
    overflow:hidden;
    min-height:430px;
    background:#0d1016;
  }

  .movie-detail-hero__backdrop {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(68%, 1120px);
    background-position:center right;
    background-size:cover;
    opacity:.30;
    filter:saturate(.92) contrast(.96);
    pointer-events:none;
  }

  .movie-detail-hero__backdrop.is-poster-fallback {
    width:54%;
    opacity:.11;
    filter:blur(7px) saturate(.78);
    transform:scale(1.04);
  }

  .movie-detail-hero__wash {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg, #0d1016 0%, rgba(13,16,22,.985) 38%, rgba(13,16,22,.80) 61%, rgba(13,16,22,.42) 100%),
      linear-gradient(0deg, #0d1016 0%, rgba(13,16,22,.12) 34%, transparent 64%);
  }

  .movie-detail-breadcrumb {
    position:relative;
    z-index:2;
    display:flex;
    min-height:50px;
    align-items:center;
    gap:9px;
    color:#828b9a;
    font-size:13px;
  }

  .movie-detail-breadcrumb a { color:#8f99aa; }
  .movie-detail-breadcrumb a:hover { color:var(--c-primary-hover); }

  .movie-detail-hero__inner {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    align-items:start;
    gap:42px;
    padding:0 0 28px;
  }

  .movie-detail-poster-wrap { width:250px; min-width:0; }
  .movie-detail-poster {
    overflow:hidden;
    width:100%;
    background:#151a23;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.24);
  }
  .movie-detail-poster img {
    display:block;
    width:100%;
    height:auto;
    max-height:375px;
    object-fit:contain;
    background:#151a23;
  }

  .movie-detail-content {
    width:min(760px, 100%);
    min-width:0;
    padding-top:8px;
  }

  .movie-detail-title {
    max-width:100%;
    margin:0;
    color:#f5f7fb;
    font-size:clamp(36px, 2.5vw, 44px);
    font-weight:760;
    line-height:1.16;
    letter-spacing:-.7px;
    overflow-wrap:anywhere;
  }

  .movie-detail-subtitle {
    margin-top:8px;
    color:#9da6b4;
    font-size:15px;
    line-height:1.5;
  }

  .movie-detail-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    margin-top:12px;
    color:#aeb6c2;
    font-size:15px;
    line-height:1.7;
  }
  .movie-detail-meta > span { display:inline-flex; align-items:center; min-width:0; }
  .movie-detail-meta > span + span::before {
    content:'·';
    margin:0 8px;
    color:#697383;
  }
  .movie-detail-score { color:#f6c453; font-weight:650; }

  .movie-detail-update {
    margin-top:5px;
    color:#919baa;
    font-size:14px;
    line-height:1.55;
  }

  .movie-detail-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:17px;
  }

  .movie-detail-btn {
    display:inline-flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    line-height:1;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
  }
  .movie-detail-btn:hover { transform:translateY(-1px); }
  .movie-detail-btn:focus-visible { outline:3px solid rgba(77,140,255,.28); outline-offset:2px; }
  .movie-detail-btn__svg,
  .detail-action-icon svg { width:18px; height:18px; flex:0 0 18px; }
  .movie-detail-btn__svg { fill:currentColor; }
  .detail-action-icon { display:grid; place-items:center; }
  .detail-action-icon svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  .movie-detail-btn--primary {
    min-width:150px;
    color:#fff;
    background:var(--c-primary);
    border-color:var(--c-primary);
    box-shadow:0 8px 18px rgba(77,140,255,.18);
  }
  .movie-detail-btn--primary:hover { color:#fff; background:var(--c-primary-hover); border-color:var(--c-primary-hover); }
  .movie-detail-btn--primary.is-disabled,
  .movie-detail-btn--primary:disabled { color:#8c96a6; background:#242a34; border-color:#303744; box-shadow:none; cursor:not-allowed; transform:none; }

  .movie-detail-btn--ghost {
    color:#e0e5ec;
    background:rgba(18,22,30,.58);
    border-color:rgba(255,255,255,.16);
  }
  .movie-detail-btn--ghost:hover { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); }
  .movie-detail-btn--ghost.is-active { color:#dbe9ff; background:rgba(77,140,255,.13); border-color:rgba(77,140,255,.42); }
  #detailFavoriteBtn.is-active .detail-action-icon svg { fill:currentColor; }
  #detailLikeBtn.is-active { color:#ff8da0; border-color:rgba(255,111,134,.36); background:rgba(255,107,129,.09); }
  #detailLikeBtn.is-active .detail-action-icon svg { fill:currentColor; }

  .movie-detail-description { margin-top:18px; max-width:760px; }
  .movie-detail-description__title {
    margin:0 0 5px;
    color:#eef2f7;
    font-size:17px;
    font-weight:700;
    line-height:1.5;
  }
  .movie-detail-description__body { position:relative; }
  .movie-detail-description__text {
    display:-webkit-box;
    overflow:hidden;
    color:#aeb6c2;
    font-size:15px;
    line-height:1.75;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .movie-detail-description__text.is-expanded { display:block; overflow:visible; -webkit-line-clamp:unset; }
  .movie-detail-description__more {
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-top:4px;
    color:var(--c-primary-hover);
    font-size:13px;
    font-weight:600;
  }
  .movie-detail-description__more svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; }
  .movie-detail-description__more.is-expanded svg { transform:rotate(180deg); }
  .movie-detail-description__more:focus-visible { outline:2px solid var(--c-primary); outline-offset:3px; border-radius:4px; }

  .movie-detail-director {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:12px;
    margin-top:12px;
    font-size:15px;
    line-height:1.7;
  }
  .movie-detail-director__label { color:#8e98a7; }
  .movie-detail-director__value { color:#bec5cf; }

  .movie-detail-cast-section,
  .movie-detail-recommend-section { margin-top:18px; }

  .movie-detail-section-heading {
    display:flex;
    align-items:center;
    min-height:34px;
    margin-bottom:10px;
  }
  .movie-detail-section-heading h2 {
    margin:0;
    color:var(--c-text);
    font-size:20px;
    font-weight:720;
    line-height:1.3;
  }

  .movie-detail-cast-strip {
    display:flex;
    min-width:0;
    align-items:flex-start;
    gap:24px;
    overflow-x:auto;
    padding:2px 2px 6px;
    scrollbar-width:thin;
  }
  .detail-cast-person {
    display:grid;
    width:72px;
    flex:0 0 72px;
    justify-items:center;
    gap:7px;
    color:var(--c-text);
    text-align:center;
  }
  .detail-cast-person:hover { color:var(--c-primary-hover); }
  .detail-cast-person:focus-visible { outline:2px solid var(--c-primary); outline-offset:4px; border-radius:12px; }
  .detail-cast-person__photo {
    display:grid;
    width:64px;
    height:64px;
    place-items:center;
    overflow:hidden;
    color:#c4cbd5;
    background:#1d232d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
  }
  .detail-cast-person__photo img { width:100%; height:100%; object-fit:cover; }
  .detail-cast-person__fallback { font-size:20px; font-weight:700; }
  .detail-cast-person__name {
    display:block;
    width:100%;
    overflow:hidden;
    color:inherit;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .movie-detail-recommend-section { margin-bottom:22px; }
  .movie-detail-recommend-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px;
  }
  .movie-detail-recommend-grid .vod-card:nth-child(n+7) { display:none; }
  .movie-detail-recommend-grid .vod-card__cover { aspect-ratio:3 / 4; border-radius:12px; }
  .movie-detail-recommend-grid .vod-card__info { padding:8px 32px 0 2px; }
  .movie-detail-recommend-grid .vod-card__title { margin-bottom:2px; font-size:14px; font-weight:650; }
  .movie-detail-recommend-grid .vod-card__meta { gap:7px; font-size:12px; color:var(--c-text-3); }
  .movie-detail-recommend-grid .vod-card__meta > span + span::before { content:'·'; margin-right:7px; color:var(--c-text-3); }
  .movie-detail-recommend-grid .vod-card__badge { top:8px; left:8px; max-width:calc(100% - 16px); padding:2px 7px; font-size:11px; }

  html[data-theme="light"] .movie-detail-page { color:#202124; background:#f8f9fa; }
  html[data-theme="light"] .movie-detail-hero { background:#f8f9fa; }
  html[data-theme="light"] .movie-detail-hero__backdrop { opacity:.24; filter:saturate(.82) contrast(.92); }
  html[data-theme="light"] .movie-detail-hero__backdrop.is-poster-fallback { opacity:.075; filter:blur(9px) saturate(.72); }
  html[data-theme="light"] .movie-detail-hero__wash {
    background:
      linear-gradient(90deg, #f8f9fa 0%, rgba(248,249,250,.985) 38%, rgba(248,249,250,.90) 58%, rgba(248,249,250,.58) 100%),
      linear-gradient(0deg, #f8f9fa 0%, rgba(248,249,250,.16) 36%, transparent 70%);
  }
  html[data-theme="light"] .movie-detail-breadcrumb { color:#7b8492; }
  html[data-theme="light"] .movie-detail-breadcrumb a { color:#667180; }
  html[data-theme="light"] .movie-detail-poster { background:#fff; border-color:rgba(25,34,48,.08); box-shadow:0 10px 28px rgba(31,42,56,.12); }
  html[data-theme="light"] .movie-detail-poster img { background:#fff; }
  html[data-theme="light"] .movie-detail-title { color:#202124; }
  html[data-theme="light"] .movie-detail-subtitle { color:#6e7785; }
  html[data-theme="light"] .movie-detail-meta { color:#606a78; }
  html[data-theme="light"] .movie-detail-meta > span + span::before { color:#a1a8b1; }
  html[data-theme="light"] .movie-detail-update { color:#747e8b; }
  html[data-theme="light"] .movie-detail-btn--ghost { color:#27313e; background:rgba(255,255,255,.86); border-color:rgba(27,38,52,.15); }
  html[data-theme="light"] .movie-detail-btn--ghost:hover { color:#17202b; background:#fff; border-color:rgba(27,38,52,.24); }
  html[data-theme="light"] .movie-detail-btn--ghost.is-active { color:#2766cc; background:#eef5ff; border-color:rgba(55,116,216,.30); }
  html[data-theme="light"] #detailLikeBtn.is-active { color:#d54d66; background:#fff3f5; border-color:#f2c0c9; }
  html[data-theme="light"] .movie-detail-description__title { color:#252b33; }
  html[data-theme="light"] .movie-detail-description__text { color:#626c79; }
  html[data-theme="light"] .movie-detail-director__label { color:#7b8490; }
  html[data-theme="light"] .movie-detail-director__value { color:#606a76; }
  html[data-theme="light"] .movie-detail-section-heading h2 { color:#202124; }
  html[data-theme="light"] .detail-cast-person { color:#252a31; }
  html[data-theme="light"] .detail-cast-person__photo { color:#596575; background:#edf1f5; border-color:rgba(23,34,48,.08); }
  html[data-theme="light"] .movie-detail-recommend-grid .vod-card__title a { color:#262b32; }
  html[data-theme="light"] .movie-detail-recommend-grid .vod-card__meta { color:#7b8491; }

  @media (max-width: 1500px) {
    .movie-detail-hero__inner { grid-template-columns:230px minmax(0,1fr); gap:34px; }
    .movie-detail-poster-wrap { width:230px; }
    .movie-detail-poster img { max-height:345px; }
    .movie-detail-content { width:min(720px,100%); }
    .movie-detail-title { font-size:clamp(34px,2.7vw,40px); }
    .movie-detail-recommend-grid { gap:15px; }
  }

  @media (max-width: 1280px) {
    .movie-detail-page .movie-detail-shell,
    .movie-detail-page.movie-detail-page > .container { width:min(calc(100% - 40px),1680px); }
    .movie-detail-hero__inner { grid-template-columns:215px minmax(0,1fr); gap:28px; }
    .movie-detail-poster-wrap { width:215px; }
    .movie-detail-poster img { max-height:322px; }
    .movie-detail-content { width:min(680px,100%); }
    .movie-detail-title { font-size:34px; }
    .movie-detail-description__text { line-height:1.7; }
    .movie-detail-cast-strip { gap:18px; }
    .movie-detail-recommend-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .movie-detail-recommend-grid .vod-card:nth-child(6) { display:none; }
  }
}



/* =========================================================
   Desktop playback geometry v5 — left aligned cinema viewport
   Keep the player compact without re-centering the whole player/sidebar pair.
   This preserves the site's main content left edge and keeps the sidebar right.
   ========================================================= */
@media (min-width: 1121px) {
  .page-play-body .watch-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 23vw, 370px);
    gap: 18px;
  }

  .page-play-body .watch-main {
    width: 100%;
    max-width: 1120px;
    justify-self: start;
  }

  .page-play-body .player__wrap {
    border-radius: 12px;
  }

  .page-play-body .watch-sidebar {
    justify-self: end;
    width: 100%;
    padding: 17px;
  }
}

@media (min-width: 1501px) {
  /* Keep the player and episode panel as one compact desktop composition.
     The page container may be up to 1680px, but that spare width must stay
     on the right — never between the player and the episode panel. */
  .page-play-body .watch-layout {
    width: 100%;
    max-width: 1500px;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
  }

  .page-play-body .watch-main {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .page-play-body .watch-sidebar {
    width: 100%;
    justify-self: stretch;
  }
}

/* =========================================================
   Desktop catalog page redesign (movie / tv / variety / anime)
   ========================================================= */
.catalog-page {
    padding: 22px 0 40px;
}

.catalog-page__container {
    width: min(1680px, calc(100% - 64px));
}

.catalog-hero {
    margin: 14px 0 20px;
}

.catalog-hero__title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 48px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f4f8ff;
}

.catalog-hero__count {
    font-size: 20px;
    font-weight: 500;
    color: rgba(218, 229, 255, 0.54);
}

.catalog-filter-card {
    margin-top: 18px;
    border: 1px solid rgba(114, 143, 196, 0.22);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(18, 26, 43, 0.96), rgba(14, 20, 33, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    overflow: hidden;
}

.catalog-filter-card__mobile-head {
    display: none;
}

.catalog-filter-card__body {
    display: grid;
    gap: 0;
    padding: 10px 20px 12px;
}

.catalog-filter-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: flex-start;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px dashed rgba(123, 142, 173, 0.18);
}

.catalog-filter-row--last {
    border-bottom: 0;
}

.catalog-filter-row__label {
    padding-top: 8px;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(213, 223, 244, 0.78);
}

.catalog-filter-row__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.catalog-chip,
.catalog-sort-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(88, 110, 144, 0.22);
    background: rgba(8, 13, 23, 0.76);
    color: rgba(227, 236, 255, 0.88);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.catalog-chip:hover,
.catalog-sort-pill:hover,
.catalog-sortbar__reset:hover,
.catalog-recommend-btn:hover {
    color: #f6f9ff;
    border-color: rgba(85, 136, 255, 0.48);
}

.catalog-chip.is-active,
.catalog-sort-pill.is-active {
    color: #fff;
    border-color: rgba(88, 145, 255, 0.92);
    background: linear-gradient(180deg, #4b93ff, #2f6fff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.catalog-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 18px 0 12px;
}

.catalog-sortbar__left,
.catalog-sortbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.catalog-sortbar__left {
    gap: 14px;
}

.catalog-sort-pill {
    min-height: 44px;
    padding: 0 22px;
    background: transparent;
    border-color: transparent;
    color: rgba(223, 232, 248, 0.8);
}

.catalog-sort-pill.is-active {
    background: linear-gradient(180deg, #307bff, #1c5fda);
    border-color: rgba(93, 150, 255, 0.92);
}

.catalog-sortbar__reset,
.catalog-recommend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(86, 107, 143, 0.22);
    border-radius: 14px;
    background: transparent;
    color: rgba(196, 212, 245, 0.9);
    font-size: 15px;
    font-weight: 600;
}

.catalog-sortbar__reset {
    border-color: transparent;
    padding: 0 0 0 8px;
    color: rgba(118, 170, 255, 0.96);
}

.catalog-sortbar__reset svg,
.catalog-recommend-btn svg,
.catalog-card__bookmark svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalog-recommend-btn {
    border-color: rgba(66, 123, 235, 0.92);
    color: #79acff;
}

.catalog-results {
    margin-top: 8px;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 28px 18px;
}

.catalog-card {
    min-width: 0;
}

.catalog-card__poster {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(110, 132, 172, 0.18);
    background: rgba(10, 15, 24, 0.9);
    aspect-ratio: 2 / 3;
}

.catalog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.catalog-card:hover .catalog-card__img {
    transform: scale(1.03);
}

.catalog-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(29, 36, 49, 0.92);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.catalog-card__shade {
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(7,11,18,0), rgba(7,11,18,.76));
}

.catalog-card__info {
    padding: 12px 2px 0;
}

.catalog-card__topline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.catalog-card__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #f3f7ff;
}

.catalog-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-card__bookmark {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(169, 187, 217, 0.78);
}

.catalog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    color: rgba(178, 193, 220, 0.68);
    font-size: 14px;
    line-height: 1.35;
}

.catalog-card__meta span + span::before {
    content: '·';
    margin-right: 8px;
    color: rgba(124, 145, 182, 0.6);
}

.catalog-empty {
    margin-top: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(110, 132, 172, 0.16);
    border-radius: 18px;
    background: rgba(14, 20, 33, 0.82);
    color: rgba(220, 230, 246, 0.72);
    text-align: center;
}

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

@media (max-width: 1366px) {
    .catalog-page__container {
        width: min(100%, calc(100% - 40px));
    }

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

    .catalog-hero__title {
        font-size: 40px;
    }
}

@media (max-width: 1100px) {
    .catalog-filter-card__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 18px 0;
    }

    .catalog-filter-card__mobile-head strong {
        display: block;
        color: #f2f7ff;
        font-size: 17px;
    }

    .catalog-filter-card__mobile-head span {
        display: block;
        margin-top: 4px;
        color: rgba(196, 210, 236, 0.68);
        font-size: 13px;
    }

    .catalog-filter-card__toggle {
        min-height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(83, 131, 230, 0.65);
        background: rgba(17, 25, 40, 0.9);
        color: #dce8ff;
        font-size: 14px;
        font-weight: 600;
    }

    .catalog-filter-card__body {
        display: none;
        padding-top: 8px;
    }

    .catalog-filter-card__body.is-open {
        display: grid;
    }

    .catalog-filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .catalog-filter-row__label {
        padding-top: 0;
    }

    .catalog-sortbar {
        flex-direction: column;
        align-items: flex-start;
    }

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

@media (max-width: 767px) {
    .catalog-page__container {
        width: min(100%, calc(100% - 28px));
    }

    .catalog-hero__title {
        font-size: 32px;
        gap: 12px;
    }

    .catalog-hero__count {
        font-size: 16px;
    }

    .catalog-sortbar__right {
        width: 100%;
        justify-content: space-between;
    }

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

    .catalog-card__title {
        font-size: 15px;
    }

    .catalog-chip,
    .catalog-sort-pill {
        min-height: 36px;
        padding: 0 14px;
        font-size: 14px;
    }
}

/* Catalog page refinement — smaller title, no navbar collision, click-to-toggle sort order */
.catalog-page {
    padding-top: 10px;
}

.catalog-hero {
    margin: 10px 0 16px;
    padding-top: 8px;
}

.catalog-hero__title {
    gap: 12px;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 780;
}

.catalog-hero__count {
    font-size: 14px;
    font-weight: 560;
    color: rgba(211, 223, 248, 0.58);
}

.catalog-filter-card {
    margin-top: 12px;
    border-radius: 20px;
}

.catalog-filter-card__body {
    padding: 8px 20px 10px;
}

.catalog-filter-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
}

.catalog-filter-row__label {
    padding-top: 9px;
    font-size: 14px;
    color: rgba(207, 220, 245, 0.74);
}

.catalog-filter-row__options {
    gap: 10px;
}

.catalog-chip,
.catalog-sort-pill {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 560;
}

.catalog-sortbar {
    margin: 16px 0 12px;
    gap: 16px;
}

.catalog-sortbar__label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-right: 6px;
    color: rgba(198, 211, 238, 0.62);
    font-size: 13px;
    font-weight: 600;
}

.catalog-sortbar__left,
.catalog-sortbar__right {
    gap: 10px;
}

.catalog-sort-pill {
    position: relative;
    min-height: 38px;
    padding: 0 34px 0 14px;
    border-color: rgba(88, 110, 144, 0.18);
    background: rgba(12, 18, 31, 0.76);
    color: rgba(220, 230, 247, 0.78);
}

.catalog-sort-pill span {
    position: relative;
    z-index: 1;
}

.catalog-sort-pill::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 999px;
    opacity: .7;
}

.catalog-sort-pill.is-active {
    color: #fff;
    background: rgba(26, 47, 88, 0.72);
    border-color: rgba(80, 136, 246, 0.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.catalog-sort-pill.is-asc::after,
.catalog-sort-pill.is-desc::after {
    opacity: 1;
}

.catalog-sort-pill.is-asc::after {
    content: '↑';
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(146, 188, 255, 0.96);
}

.catalog-sort-pill.is-desc::after {
    content: '↓';
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(146, 188, 255, 0.96);
}

.catalog-sortbar__reset,
.catalog-recommend-btn {
    min-height: 38px;
    font-size: 14px;
    gap: 8px;
}

.catalog-sortbar__reset {
    padding-left: 4px;
    font-weight: 560;
}

.catalog-recommend-btn {
    padding: 0 14px;
    border-radius: 12px;
}

.catalog-grid {
    gap: 24px 16px;
}

.catalog-card__badge {
    top: 10px;
    left: 10px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

.catalog-card__info {
    padding: 10px 1px 0;
}

.catalog-card__title {
    font-size: 16px;
    line-height: 1.32;
}

.catalog-card__bookmark {
    width: 28px;
    height: 28px;
}

.catalog-card__meta {
    margin-top: 6px;
    font-size: 13px;
}

@media (max-width: 1366px) {
    .catalog-hero__title {
        font-size: 28px;
    }
}

@media (max-width: 1100px) {
    .catalog-hero {
        padding-top: 4px;
    }

    .catalog-hero__title {
        font-size: 26px;
    }

    .catalog-sortbar__label {
        min-height: 32px;
        padding-right: 2px;
    }

    .catalog-sort-pill {
        min-height: 36px;
        padding: 0 30px 0 12px;
    }
}

@media (max-width: 767px) {
    .catalog-page {
        padding-top: 4px;
    }

    .catalog-hero {
        margin-top: 8px;
    }

    .catalog-hero__title {
        font-size: 24px;
    }

    .catalog-sortbar__left {
        gap: 8px;
    }

    .catalog-sort-pill {
        min-height: 34px;
        padding: 0 28px 0 12px;
        font-size: 13px;
    }
}


/* Catalog hotfix 2026-09-24: preserve fixed-header clearance */
.page.catalog-page {
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: 40px;
}

.page.catalog-page .catalog-hero__title {
    font-size: 30px;
    line-height: 1.18;
    font-weight: 760;
}

@media (max-width: 1366px) {
    .page.catalog-page .catalog-hero__title { font-size: 28px; }
}

@media (max-width: 767px) {
    .page.catalog-page { padding-top: calc(var(--header-h) + 12px); }
    .page.catalog-page .catalog-hero__title { font-size: 24px; }
}


/* =========================================================
   2026-09-24 Theme consistency hotfix
   - Desktop catalog/filter follows light/dark mode
   - Report Problem native select follows the active theme
   ========================================================= */

/* ---------- Desktop catalog: LIGHT ---------- */
html[data-theme="light"] .catalog-page {
    color: #202936;
}

html[data-theme="light"] .catalog-hero__title {
    color: #202936;
}

html[data-theme="light"] .catalog-hero__count,
html[data-theme="light"] .catalog-sortbar__label,
html[data-theme="light"] .catalog-card__meta {
    color: #7a8493;
}

html[data-theme="light"] .catalog-filter-card {
    background: #ffffff;
    border-color: rgba(31, 48, 72, 0.11);
    box-shadow: 0 8px 26px rgba(35, 52, 76, 0.055), inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="light"] .catalog-filter-row {
    border-bottom-color: rgba(31, 48, 72, 0.10);
}

html[data-theme="light"] .catalog-filter-row__label {
    color: #747f8e;
}

html[data-theme="light"] .catalog-chip {
    color: #4d5766;
    background: #f3f5f8;
    border-color: rgba(31, 48, 72, 0.09);
}

html[data-theme="light"] .catalog-chip:hover {
    color: #245fae;
    background: #edf3ff;
    border-color: rgba(61, 119, 220, 0.24);
}

html[data-theme="light"] .catalog-chip.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, #5797ff, #3479ef);
    border-color: rgba(52, 121, 239, 0.86);
}

html[data-theme="light"] .catalog-sort-pill {
    color: #646e7d;
    background: #f7f8fa;
    border-color: rgba(31, 48, 72, 0.08);
}

html[data-theme="light"] .catalog-sort-pill:hover {
    color: #245fae;
    background: #f0f5ff;
    border-color: rgba(61, 119, 220, 0.22);
}

html[data-theme="light"] .catalog-sort-pill.is-active {
    color: #ffffff;
    background: #3e83f5;
    border-color: #3e83f5;
    box-shadow: 0 5px 14px rgba(62, 131, 245, 0.18);
}

html[data-theme="light"] .catalog-sort-pill.is-asc::after,
html[data-theme="light"] .catalog-sort-pill.is-desc::after {
    color: rgba(255,255,255,.94);
}

html[data-theme="light"] .catalog-sortbar__reset {
    color: #3474cf;
}

html[data-theme="light"] .catalog-recommend-btn {
    color: #3474cf;
    background: #ffffff;
    border-color: rgba(52, 116, 207, 0.42);
}

html[data-theme="light"] .catalog-recommend-btn:hover {
    color: #245fae;
    background: #f4f8ff;
    border-color: rgba(52, 116, 207, 0.65);
}

html[data-theme="light"] .catalog-card__poster {
    background: #eef1f5;
    border-color: rgba(31, 48, 72, 0.10);
}

html[data-theme="light"] .catalog-card__title,
html[data-theme="light"] .catalog-card__title a {
    color: #202936;
}

html[data-theme="light"] .catalog-card__bookmark {
    color: #8793a4;
}

html[data-theme="light"] .catalog-card__bookmark:hover {
    color: #3479ef;
}

html[data-theme="light"] .catalog-empty {
    color: #6d7888;
    background: #ffffff;
    border-color: rgba(31, 48, 72, 0.10);
}

/* ---------- Report modal / native select ---------- */
html[data-theme="dark"] #reportModal,
html[data-theme="dark"] #reportModal select {
    color-scheme: dark;
}

html[data-theme="dark"] #reportModal .ui-field select {
    color: #f0f5ff;
    background-color: #151d2a;
    border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] #reportModal .ui-field select option {
    color: #f0f5ff;
    background: #151d2a;
}

html[data-theme="light"] #reportModal,
html[data-theme="light"] #reportModal select {
    color-scheme: light;
}

html[data-theme="light"] #reportModal .ui-field select {
    color: #202936;
    background-color: #f4f6f9;
    border-color: rgba(31,48,72,.11);
}

html[data-theme="light"] #reportModal .ui-field select option {
    color: #202936;
    background: #ffffff;
}

/* Keep modal labels readable in both modes. */
html[data-theme="light"] #reportModal .modal-section-head h2 {
    color: #202936;
}

html[data-theme="light"] #reportModal .modal-section-head p,
html[data-theme="light"] #reportModal .ui-field > span,
html[data-theme="light"] #reportModal .report-meta {
    color: #6e7887;
}

html[data-theme="dark"] #reportModal .modal-section-head h2 {
    color: #f3f7ff;
}


/* =========================================================
   Web Search Filter V2
   Same design language as desktop category filters.
   Prominent, collapsible, theme-aware.
   ========================================================= */

.web-search-smart-filter {
    margin: 16px 0 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(18, 26, 43, .97), rgba(14, 20, 33, .96));
    border: 1px solid rgba(114, 143, 196, .22);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.web-search-filter__head {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(110, 136, 180, .13);
}

.web-search-smart-filter .smart-filter__intro {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
}

.web-search-smart-filter .smart-filter__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #6fa6ff;
    background: rgba(67, 126, 235, .14);
    border: 1px solid rgba(76, 137, 248, .12);
    border-radius: 11px;
}

.web-search-smart-filter .smart-filter__icon svg {
    width: 18px;
    height: 18px;
}

.web-search-filter__intro-copy {
    min-width: 0;
}

.web-search-smart-filter .smart-filter__intro strong {
    display: block;
    margin: 0;
    color: #f1f6ff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 720;
}

.web-search-smart-filter .smart-filter__intro span {
    display: block;
    max-width: min(760px, 58vw);
    margin-top: 4px;
    overflow: hidden;
    color: rgba(191, 205, 232, .58);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.web-search-filter__toggle {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    color: rgba(201, 218, 248, .88);
    background: rgba(9, 15, 26, .52);
    border: 1px solid rgba(103, 135, 186, .20);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 650;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.web-search-filter__toggle:hover {
    color: #fff;
    background: rgba(65, 118, 220, .10);
    border-color: rgba(73, 135, 248, .48);
}

.web-search-filter__toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.web-search-smart-filter.is-collapsed .web-search-filter__toggle svg {
    transform: rotate(180deg);
}

.web-search-smart-filter.is-collapsed .web-search-filter__head {
    border-bottom-color: transparent;
}

.web-search-smart-filter.is-collapsed .web-search-filter__body {
    display: none;
}

.web-search-smart-filter .smart-filter__main {
    padding: 10px 18px 15px;
}

.web-search-smart-filter .smart-filter__topline {
    padding: 2px 0 12px;
    border-bottom: 1px dashed rgba(115, 140, 181, .16);
}

.web-search-smart-filter .smart-filter__roots {
    gap: 8px 9px;
}

.web-search-smart-filter .smart-filter__root,
.web-search-smart-filter .smart-filter__choice {
    display: inline-flex;
    min-width: 0;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    color: rgba(220, 230, 247, .82);
    background: rgba(7, 13, 23, .72);
    border: 1px solid rgba(83, 109, 151, .18);
    border-radius: 999px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 580;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.web-search-smart-filter .smart-filter__root::after {
    display: none;
}

.web-search-smart-filter .smart-filter__root:hover,
.web-search-smart-filter .smart-filter__choice:hover {
    color: #fff;
    background: rgba(20, 33, 53, .92);
    border-color: rgba(72, 126, 224, .34);
}

.web-search-smart-filter .smart-filter__root.is-active,
.web-search-smart-filter .smart-filter__choice.is-active {
    color: #fff;
    background: linear-gradient(180deg, #4d92ff, #3276ee);
    border-color: rgba(82, 145, 255, .92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.web-search-smart-filter .smart-filter__reset {
    min-height: 34px;
    padding: 0 9px;
    color: rgba(126, 177, 255, .92);
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
}

.web-search-smart-filter .smart-filter__reset:hover {
    color: #a7c8ff;
    background: rgba(71, 128, 228, .08);
}

.web-search-smart-filter .smart-filter__row {
    grid-template-columns: 70px minmax(0,1fr);
    gap: 14px;
    padding: 11px 0;
    border-top: 1px dashed rgba(115, 140, 181, .14);
}

.web-search-smart-filter .smart-filter__row:first-child {
    border-top: 0;
}

.web-search-smart-filter .smart-filter__label {
    padding-top: 9px;
    color: rgba(196, 209, 233, .62);
    font-size: 12px;
    font-weight: 620;
}

.web-search-smart-filter .smart-filter__choices {
    gap: 7px 8px;
}

.web-search-smart-filter .smart-filter__bottom {
    margin-top: 2px;
    padding-top: 13px;
    border-top: 1px solid rgba(109, 135, 177, .13);
}

.web-search-smart-filter .smart-filter__preview {
    color: rgba(187, 202, 228, .58);
    font-size: 11px;
}

.web-search-smart-filter .smart-filter__preview strong {
    color: #83b1ff;
    font-weight: 650;
}

.web-search-smart-filter .smart-filter__submit {
    min-width: 126px;
    min-height: 38px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 680;
}

/* ---------------- LIGHT MODE ---------------- */

html[data-theme="light"] .web-search-smart-filter {
    background: #fff;
    border-color: rgba(31, 48, 72, .11);
    box-shadow:
        0 8px 26px rgba(35, 52, 76, .055),
        inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-theme="light"] .web-search-filter__head {
    border-bottom-color: rgba(31, 48, 72, .09);
}

html[data-theme="light"] .web-search-smart-filter.is-collapsed .web-search-filter__head {
    border-bottom-color: transparent;
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__icon {
    color: #3479ef;
    background: #eef5ff;
    border-color: rgba(52,121,239,.11);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__intro strong {
    color: #202936;
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__intro span {
    color: #7a8493;
}

html[data-theme="light"] .web-search-filter__toggle {
    color: #566272;
    background: #f4f6f9;
    border-color: rgba(31,48,72,.10);
}

html[data-theme="light"] .web-search-filter__toggle:hover {
    color: #245fae;
    background: #eef4ff;
    border-color: rgba(61,119,220,.28);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__topline,
html[data-theme="light"] .web-search-smart-filter .smart-filter__row {
    border-color: rgba(31,48,72,.09);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__root,
html[data-theme="light"] .web-search-smart-filter .smart-filter__choice {
    color: #4f5b6a;
    background: #f3f5f8;
    border-color: rgba(31,48,72,.08);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__root:hover,
html[data-theme="light"] .web-search-smart-filter .smart-filter__choice:hover {
    color: #245fae;
    background: #edf3ff;
    border-color: rgba(61,119,220,.22);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__root.is-active,
html[data-theme="light"] .web-search-smart-filter .smart-filter__choice.is-active {
    color: #fff;
    background: linear-gradient(180deg, #5797ff, #3479ef);
    border-color: rgba(52,121,239,.86);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__label {
    color: #747f8e;
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__reset {
    color: #3474cf;
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__bottom {
    border-top-color: rgba(31,48,72,.09);
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__preview {
    color: #7a8493;
}

html[data-theme="light"] .web-search-smart-filter .smart-filter__preview strong {
    color: #3474cf;
}

/* Desktop/tablet safeguard */
@media (max-width: 1100px) {
    .web-search-filter__head {
        min-height: 62px;
        padding: 11px 14px;
    }

    .web-search-smart-filter .smart-filter__main {
        padding-inline: 14px;
    }

    .web-search-smart-filter .smart-filter__row {
        grid-template-columns: 58px minmax(0,1fr);
        gap: 10px;
    }
}

/* =========================================================
   Detail page Light Mode backdrop visibility fix — stronger
   ========================================================= */

html[data-theme="light"] .movie-detail-hero {
    background: #f8f9fa;
}

/* 正常 backdrop：比上一版明显，但仍保持浅色页面的轻盈感 */
html[data-theme="light"] .movie-detail-hero__backdrop {
    opacity: .52;
    filter:
        saturate(.96)
        contrast(.98)
        brightness(.99);
}

/* 没有 slide backdrop、只能使用 poster 时，也不要淡到几乎看不见 */
html[data-theme="light"] .movie-detail-hero__backdrop.is-poster-fallback {
    width: 60%;
    opacity: .22;
    filter:
        blur(7px)
        saturate(.88)
        contrast(.96);
    transform: scale(1.045);
}

/*
 * 左边维持文字阅读区；
 * 从中间开始更快放出背景图；
 * 最右侧只保留极轻的白色薄雾。
 */
html[data-theme="light"] .movie-detail-hero__wash {
    background:
        linear-gradient(
            90deg,
            #f8f9fa 0%,
            rgba(248,249,250,.985) 24%,
            rgba(248,249,250,.86) 40%,
            rgba(248,249,250,.56) 58%,
            rgba(248,249,250,.22) 78%,
            rgba(248,249,250,.04) 100%
        ),
        linear-gradient(
            0deg,
            #f8f9fa 0%,
            rgba(248,249,250,.14) 22%,
            transparent 58%
        );
}

.movie-detail-shell > .movie-detail-hero__inner {
    padding: 16px;
}

/* =========================================================
   Catalog page top spacing after breadcrumb removal
   ========================================================= */

.page.catalog-page {
    padding-top: calc(var(--header-h) + 18px);
}

.catalog-page .catalog-hero {
    margin-top: 0;
    padding-top: 0;
}

/* =========================================================
   Footer dark-mode gap fix
   The old .footer { margin-top:48px } exposed the BODY color
   between page content and footer. Homepage/detail use slightly
   different dark backgrounds, so it looked like an extra black bar.
   ========================================================= */
@media (min-width: 1101px) {
    .footer {
        margin-top: 0;
    }
}

/* Smart-filter results borrow the page's cinematic teal glass instead of
   sitting on top as a separate opaque charcoal slab. Keep this last so it
   wins over the legacy and responsive smart-results rules above. */
.smart-results {
    scroll-margin-top: calc(var(--header-h, 60px) + 38px);
    background: linear-gradient(135deg, rgba(18,43,57,.80), rgba(16,30,45,.84) 54%, rgba(31,32,47,.80));
    border-color: rgba(151,199,222,.20);
    box-shadow: 0 22px 56px rgba(0,8,18,.28), inset 0 1px 0 rgba(228,245,255,.055);
    -webkit-backdrop-filter: blur(26px) saturate(1.24);
    backdrop-filter: blur(26px) saturate(1.24);
}
.smart-results__head { border-bottom-color: rgba(167,205,224,.13); }
.smart-results__grid { scrollbar-color: rgba(138,180,205,.48) rgba(7,19,31,.18); }
.smart-results__grid::-webkit-scrollbar-track { background: rgba(7,19,31,.18); }
.smart-results__grid::-webkit-scrollbar-thumb {
    background: rgba(138,180,205,.48);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.smart-results__grid::-webkit-scrollbar-thumb:hover {
    background: rgba(154,205,231,.72);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme="light"] .smart-results {
    background: linear-gradient(135deg, rgba(247,251,255,.86), rgba(232,241,250,.88) 56%, rgba(243,239,246,.85));
    border-color: rgba(116,153,184,.24);
    box-shadow: 0 20px 50px rgba(29,55,78,.13), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .smart-results__head { border-bottom-color: rgba(72,106,137,.13); }
html[data-theme="light"] .smart-results__grid { scrollbar-color: rgba(103,137,166,.46) rgba(54,82,108,.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .smart-results { background: rgba(16,31,46,.97); }
    html[data-theme="light"] .smart-results { background: rgba(241,247,252,.98); }
}

/* The page provides the colour; the results surface only adds contrast. */
body .smart-results {
  background:rgba(12,17,24,.30);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);
  backdrop-filter:blur(22px) saturate(1.05);
}
html[data-theme=light] body .smart-results {
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.44);
  box-shadow:0 12px 34px rgba(32,46,51,.08),inset 0 1px 0 rgba(255,255,255,.20);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body .smart-results {background:rgba(20,26,33,.85);}
  html[data-theme=light] body .smart-results {background:rgba(244,247,246,.78);}
}

/* Readable copy and restrained controls on the ambient results surface. */
body .smart-results__head p,
body .smart-results__sort-label,
body .smart-result-card__info p {color:rgba(239,245,250,.82);font-size:12px;line-height:1.5;}
body .smart-result-card__info {position:relative;padding-right:30px;padding-top:9px;}
body .smart-result-card__info h3 {margin-top:0;font-size:14px;line-height:1.4;font-weight:600;}
body .smart-result-card__info p {margin-top:4px;}
body .smart-result-card__info .card-favorite-btn {top:6px;right:0;width:28px;height:28px;color:#c0cddd;}
body .smart-result-card__info .card-favorite-btn.is-active {color:#a9caff;}
body .smart-results__sort-tabs {padding:3px;gap:3px;border-radius:12px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.13);}
body .smart-results__sort-btn {font-size:11px;min-height:30px;color:#d9e2ee;border-radius:9px;}
body .smart-results__sort-btn.is-active {color:#fff;background:rgba(255,255,255,.16);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
body .smart-results__sort-btn:hover {color:#fff;background:rgba(255,255,255,.10);}
body .smart-results .result-sort-reset,
body .smart-results__close {color:#e1e9f3;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);box-shadow:none;}
body .smart-results .result-sort-reset {border-radius:10px;font-size:11px;padding:7px 10px;}
body .smart-results .result-sort-reset.is-disabled {opacity:.75;}
body .smart-results .result-sort-reset:hover,
body .smart-results__close:hover {background:rgba(255,255,255,.13);color:#fff;}
html[data-theme=light] body .smart-results__head p,
html[data-theme=light] body .smart-results__sort-label,
html[data-theme=light] body .smart-result-card__info p {color:#485b6b;}
html[data-theme=light] body .smart-result-card__info .card-favorite-btn {color:#526b80;}
html[data-theme=light] body .smart-result-card__info .card-favorite-btn.is-active {color:#2869b8;}
html[data-theme=light] body .smart-results__sort-tabs {background:rgba(255,255,255,.20);border-color:rgba(52,70,88,.14);}
html[data-theme=light] body .smart-results__sort-btn {color:#394c5e;}
html[data-theme=light] body .smart-results__sort-btn.is-active {background:rgba(255,255,255,.58);color:#182b3c;box-shadow:0 1px 4px rgba(35,50,65,.08);}
html[data-theme=light] body .smart-results__sort-btn:hover {background:rgba(255,255,255,.42);color:#182b3c;}
html[data-theme=light] body .smart-results .result-sort-reset,
html[data-theme=light] body .smart-results__close {background:rgba(255,255,255,.24);border-color:rgba(52,70,88,.12);color:#394c5e;}
html[data-theme=light] body .smart-results .result-sort-reset:hover,
html[data-theme=light] body .smart-results__close:hover {background:rgba(255,255,255,.50);color:#182b3c;}

/* Readable copy and restrained controls on the ambient results surface. */
body .smart-results__head p,
body .smart-results__sort-label,
body .smart-result-card__info p {color:rgba(239,245,250,.82);font-size:12px;line-height:1.5;}
body .smart-result-card__info {position:relative;padding-right:30px;padding-top:9px;}
body .smart-result-card__info h3 {margin-top:0;font-size:14px;line-height:1.4;font-weight:600;}
body .smart-result-card__info p {margin-top:4px;}
body .smart-result-card__info .card-favorite-btn {top:6px;right:0;width:28px;height:28px;color:#c0cddd;}
body .smart-result-card__info .card-favorite-btn.is-active {color:#a9caff;}
body .smart-results .result-sort-segment {padding:3px;gap:3px;border-radius:12px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.13);}
body .smart-results__sort-btn {font-size:11px;min-height:30px;color:#d9e2ee;border-radius:9px;}
body .smart-results__sort-btn.is-active {color:#fff;background:rgba(255,255,255,.16);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
body .smart-results__sort-btn:hover {color:#fff;background:rgba(255,255,255,.10);}
body .smart-results .result-sort-reset,
body .smart-results__close {color:#e1e9f3;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);box-shadow:none;}
body .smart-results .result-sort-reset {border-radius:10px;font-size:11px;padding:7px 10px;}
body .smart-results .result-sort-reset.is-disabled {opacity:.75;}
body .smart-results .result-sort-reset:hover,
body .smart-results__close:hover {background:rgba(255,255,255,.13);color:#fff;}
html[data-theme=light] body .smart-results__head p,
html[data-theme=light] body .smart-results__sort-label,
html[data-theme=light] body .smart-result-card__info p {color:#485b6b;}
html[data-theme=light] body .smart-result-card__info .card-favorite-btn {color:#526b80;}
html[data-theme=light] body .smart-result-card__info .card-favorite-btn.is-active {color:#2869b8;}
html[data-theme=light] body .smart-results .result-sort-segment {background:rgba(255,255,255,.20);border-color:rgba(52,70,88,.14);}
html[data-theme=light] body .smart-results__sort-btn {color:#394c5e;}
html[data-theme=light] body .smart-results__sort-btn.is-active {background:rgba(255,255,255,.58);color:#182b3c;box-shadow:0 1px 4px rgba(35,50,65,.08);}
html[data-theme=light] body .smart-results__sort-btn:hover {background:rgba(255,255,255,.42);color:#182b3c;}
html[data-theme=light] body .smart-results .result-sort-reset,
html[data-theme=light] body .smart-results__close {background:rgba(255,255,255,.24);border-color:rgba(52,70,88,.12);color:#394c5e;}
html[data-theme=light] body .smart-results .result-sort-reset:hover,
html[data-theme=light] body .smart-results__close:hover {background:rgba(255,255,255,.50);color:#182b3c;}


body #smartResults .result-sort-segment{background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;box-shadow:none!important;}
body #smartResults .result-sort-reset,body #smartResults .smart-results__close{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.12)!important;color:#e1e9f3!important;}
html[data-theme=light] body #smartResults .result-sort-segment{background:rgba(255,255,255,.20)!important;border-color:rgba(52,70,88,.14)!important;}
html[data-theme=light] body #smartResults .result-sort-reset,html[data-theme=light] body #smartResults .smart-results__close{background:rgba(255,255,255,.24)!important;border-color:rgba(52,70,88,.12)!important;color:#394c5e!important;}


body #smartResults#smartResults .result-sort-segment{background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;box-shadow:none!important;}
body #smartResults#smartResults .result-sort-reset,body #smartResults#smartResults .smart-results__close{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.12)!important;color:#e1e9f3!important;}
html[data-theme=light] body #smartResults#smartResults .result-sort-segment{background:rgba(255,255,255,.20)!important;border-color:rgba(52,70,88,.14)!important;}
html[data-theme=light] body #smartResults#smartResults .result-sort-reset,html[data-theme=light] body #smartResults#smartResults .smart-results__close{background:rgba(255,255,255,.24)!important;border-color:rgba(52,70,88,.12)!important;color:#394c5e!important;}