/* ============================================================================
   影视应用 · 设计系统核心
   ============================================================================
   取值来源：对 dongpian17.com 产物 CSS 的逆向提取（:root 与 [data-theme] 块、
   组件规则、Tailwind 工具类解析值）。所有数值为原始值，未做“近似”。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 令牌 -- */

:root {
  --radius: 0.625rem;

  /* 应用外壳 */
  --movie-sidebar-expanded: 17rem;
  --movie-sidebar-collapsed: 4.5rem;
  --movie-sidebar-width: var(--movie-sidebar-expanded);
  --movie-page-edge: 0.75rem;
  --movie-sidebar-content-gap: 1rem;
  --movie-header-control-size: 2.25rem;
  --movie-header-icon-size: 1rem;
  --movie-header-row-height: 3.5rem;

  /* 安全区（刘海屏 / 手势条） */
  --app-native-safe-area-top: 0px;
  --app-native-safe-area-right: 0px;
  --app-native-safe-area-bottom: 0px;
  --app-native-safe-area-left: 0px;
  --app-safe-area-top: max(env(safe-area-inset-top, 0px), var(--app-native-safe-area-top));
  --app-safe-area-right: max(env(safe-area-inset-right, 0px), var(--app-native-safe-area-right));
  --app-safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-native-safe-area-bottom));
  --app-safe-area-left: max(env(safe-area-inset-left, 0px), var(--app-native-safe-area-left));
  --app-page-shell-padding-top: 0.5rem;
  --app-sticky-top: var(--app-safe-area-top);

  /* 底部导航 */
  --app-primary-bottom-nav-bottom: 0.7rem;
  --app-primary-bottom-nav-padding: 0.32rem;
  --app-primary-bottom-nav-item-height: 3.35rem;
  --app-primary-bottom-nav-height: calc(
    var(--app-primary-bottom-nav-item-height) + var(--app-primary-bottom-nav-padding) +
      var(--app-primary-bottom-nav-padding) + 2px
  );
  --app-bottom-floating-gap: 0.5rem;
  --app-primary-nav-safe-bottom: var(--app-safe-area-bottom);
  --app-primary-bottom-nav-clearance: calc(
    var(--app-primary-bottom-nav-bottom) + var(--app-primary-nav-safe-bottom) +
      var(--app-primary-bottom-nav-height) + var(--app-bottom-floating-gap)
  );
  --app-bottom-floating-offset: max(0.625rem, var(--app-safe-area-bottom));

  --default-font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "STHeiti",
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --default-mono-font-family: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono",
    Menlo, monospace;

  --spacing: 0.25rem;
}

/* 暗色（默认） */
:root,
:root.dark,
[data-theme="movie-dark"] {
  --movie-bg: #0d0e10;
  --movie-bg-elevated: #151619;
  --movie-surface: rgba(255, 255, 255, 0.06);
  --movie-surface-strong: rgba(255, 255, 255, 0.09);
  --movie-border: rgba(255, 255, 255, 0.12);
  --movie-border-soft: rgba(255, 255, 255, 0.086);

  --movie-primary-rgb: 255 207 50;
  --movie-primary-strong-rgb: 243 185 19;
  --movie-surface-deep-rgb: 20 20 18;
  --movie-surface-bright-rgb: 255 255 255;

  --movie-primary: #ffcf32;
  --movie-primary-strong: #f3b913;
  --movie-primary-soft: #ffe07a;
  --movie-primary-foreground: #17130a;
  --movie-primary-muted: rgb(var(--movie-primary-rgb) / 0.14);
  --movie-share-button-background: #ffcf32;
  --movie-share-icon-color: #17130a;
  --movie-accent: #ffcf32;
  --movie-accent-muted: rgb(var(--movie-primary-rgb) / 0.1);

  --movie-legacy-bg-rgb: 13, 14, 16;
  --movie-legacy-bg-elevated-rgb: 21, 22, 25;
  --movie-legacy-surface-rgb: 255, 255, 255;
  --movie-legacy-border-soft-rgb: 255, 255, 255;
  --movie-legacy-primary-rgb: 255, 207, 50;
  --movie-legacy-primary-strong-rgb: 243, 185, 19;
  --movie-legacy-accent-rgb: 255, 207, 50;
  --movie-legacy-text-rgb: 255, 255, 255;
  --movie-legacy-text-subtle-rgb: 255, 255, 255;

  --movie-text: rgba(255, 255, 255, 0.93);
  --movie-text-primary: rgba(255, 255, 255, 0.93);
  --movie-text-muted: rgba(255, 255, 255, 0.58);
  --movie-text-subtle: rgba(255, 255, 255, 0.4);

  --movie-danger: #fecaca;
  --movie-danger-strong: #fca5a5;
  --movie-danger-bg: rgba(239, 68, 68, 0.12);
  --movie-danger-border: rgba(252, 165, 165, 0.3);
  --movie-warning: #fde68a;
  --movie-warning-bg: rgba(251, 191, 36, 0.12);
  --movie-warning-border: rgba(253, 230, 138, 0.3);
  --movie-success: #a7f3d0;
  --movie-success-bg: rgba(52, 211, 153, 0.12);
  --movie-success-border: rgba(167, 243, 208, 0.24);
  --movie-info: #f3b913;
  --movie-info-bg: rgb(var(--movie-primary-rgb) / 0.1);
  --movie-info-border: rgb(var(--movie-primary-rgb) / 0.22);

  --movie-panel: var(--movie-bg-elevated);
  --movie-border-strong: rgba(255, 255, 255, 0.2);

  /* 原站引用但从未定义，实际为透明；显式声明以避免任何回退差异 */
  --movie-surface-muted: transparent;
  --movie-surface-soft: transparent;
  --movie-primary-border: var(--movie-border-soft);

  --background: #0d0e10;
  --foreground: #f7f7f5;
  --card: #151619;
  --card-foreground: #f7f7f5;
  --popover: #18191c;
  --popover-foreground: #f7f7f5;
  --primary: #ffcf32;
  --primary-foreground: #17130a;
  --secondary: #202125;
  --secondary-foreground: #f7f7f5;
  --muted: #202125;
  --muted-foreground: rgba(255, 255, 255, 0.58);
  --accent: rgba(255, 207, 50, 0.14);
  --accent-foreground: #f7f7f5;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.14);
  --ring: rgba(255, 207, 50, 0.44);
}

/* 亮色 */
[data-theme="movie-light"] {
  --movie-bg: #f3f3f0;
  --movie-bg-elevated: #fff;
  --movie-surface: rgba(20, 20, 18, 0.04);
  --movie-surface-strong: rgba(20, 20, 18, 0.08);
  --movie-border: rgba(20, 20, 18, 0.14);
  --movie-border-soft: rgba(20, 20, 18, 0.08);

  --movie-primary-rgb: 255 207 50;
  --movie-primary-strong-rgb: 216 148 0;
  --movie-surface-deep-rgb: 20 20 18;
  --movie-surface-bright-rgb: 255 255 255;

  --movie-primary: #ffcf32;
  --movie-primary-strong: #d89400;
  --movie-primary-soft: #ffe07a;
  --movie-primary-foreground: #17130a;
  --movie-primary-muted: rgba(255, 207, 50, 0.2);
  --movie-share-button-background: #d89400;
  --movie-share-icon-color: #fff;
  --movie-accent: #bd7b00;
  --movie-accent-muted: rgba(189, 123, 0, 0.1);

  --movie-legacy-bg-rgb: 243, 243, 240;
  --movie-legacy-bg-elevated-rgb: 255, 255, 255;
  --movie-legacy-surface-rgb: 20, 20, 18;
  --movie-legacy-border-soft-rgb: 20, 20, 18;
  --movie-legacy-primary-rgb: 255, 207, 50;
  --movie-legacy-primary-strong-rgb: 216, 148, 0;
  --movie-legacy-accent-rgb: 189, 123, 0;
  --movie-legacy-text-rgb: 22, 22, 20;
  --movie-legacy-text-subtle-rgb: 22, 22, 20;

  --movie-text: #161614;
  --movie-text-primary: #161614;
  --movie-text-muted: rgba(22, 22, 20, 0.64);
  --movie-text-subtle: rgba(22, 22, 20, 0.44);

  --movie-panel: #fff;
  --movie-border-strong: rgba(20, 20, 18, 0.22);

  --background: #f3f3f0;
  --foreground: #161614;
  --card: #fff;
  --card-foreground: #161614;
  --primary: #d89400;
  --primary-foreground: #fff;
  --secondary: #e8e7e2;
  --muted: #e8e7e2;
  --muted-foreground: rgba(22, 22, 20, 0.62);
  --border: rgba(20, 20, 18, 0.12);
  --input: rgba(20, 20, 18, 0.13);
  --ring: rgba(216, 148, 0, 0.38);
}

/* ---------------------------------------------------------------- 2. 重置 -- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  overflow-x: clip;
  background-color: var(--movie-bg);
  color: var(--movie-text);
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--default-font-family);
  font-size: 1rem;
  line-height: 1.5;
}

/* 原站全局隐藏滚动条，保持沉浸感 */
html,
body,
#app,
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

img,
video {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
}

svg {
  display: block;
  flex-shrink: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--movie-primary-strong);
  outline-offset: 2px;
}

::selection {
  background: var(--movie-primary-muted);
  color: var(--movie-text);
}

/* ---------------------------------------------------------- 3. 外壳布局 -- */

.app-bg {
  background:
    radial-gradient(circle at 16% 0%, rgb(var(--movie-primary-rgb) / 0.12), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(243, 201, 105, 0.07), transparent 28%),
    linear-gradient(180deg, var(--movie-bg-elevated) 0%, var(--movie-bg) 48%, var(--movie-bg) 100%);
  max-width: 100vw;
  overflow-x: clip;
}

[data-theme="movie-light"] .app-bg {
  background:
    radial-gradient(circle at 16% 0%, rgb(var(--movie-primary-strong-rgb) / 0.2), transparent 34%),
    radial-gradient(circle at 90% 6%, rgba(167, 102, 22, 0.16), transparent 32%),
    linear-gradient(180deg, var(--movie-bg-elevated) 0%, var(--movie-bg) 48%, var(--movie-bg) 100%);
}

.app-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    linear-gradient(115deg, rgb(var(--movie-primary-rgb) / 0.1), transparent 34%),
    linear-gradient(245deg, rgba(250, 204, 21, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 6px
    );
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.78) 42%, transparent 78%);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.78) 42%, transparent 78%);
}

.main-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: var(--movie-page-edge);
  padding-right: var(--movie-page-edge);
  padding-top: var(--app-page-shell-padding-top);
}

@media (min-width: 1024px) {
  .main-shell {
    transition: padding-left 0.18s;
    padding-left: calc(var(--movie-sidebar-width) + var(--movie-sidebar-content-gap));
    padding-right: var(--movie-page-edge);
  }
}

/* 侧边导航（桌面） */
.side-menu {
  display: none;
}

@media (min-width: 1024px) {
  .side-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: var(--movie-sidebar-width);
    border-right: 1px solid var(--movie-border-soft);
    background: rgb(var(--movie-legacy-bg-rgb) / 0.72);
    backdrop-filter: blur(12px);
    padding: 0.9rem 0.75rem;
    transition: width 0.18s;
    overflow: hidden;
  }

  .side-menu > .brand-lockup {
    margin-bottom: 1.1rem;
    padding: 0 0.4rem;
  }

  .side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .side-nav-divider {
    height: 1px;
    margin: 0.7rem 0.4rem;
    background: var(--movie-border-soft);
  }

  .side-menu-footer {
    margin-top: auto;
  }
}

.side-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  border-radius: 0.6rem;
  color: var(--movie-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.side-nav-item:hover {
  background: var(--movie-surface);
  color: var(--movie-text);
}

.side-nav-item.is-active {
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
  font-weight: 800;
}

/* 折叠态：只留图标 */
.side-menu[data-collapsed="true"] {
  --movie-sidebar-width: var(--movie-sidebar-collapsed);
}

.side-menu[data-collapsed="true"] .side-nav-item span,
.side-menu[data-collapsed="true"] .brand-name {
  display: none;
}

.side-menu[data-collapsed="true"] .side-nav-item {
  justify-content: center;
  padding: 0;
}

/* 顶部栏 */
.app-header-brand {
  display: none;
}

@media (max-width: 1023px) {
  .app-header-brand {
    display: inline-flex;
  }
}

.app-header-search {
  max-width: 30rem;
  margin-inline: auto;
}

.app-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

.app-header-sticky {
  position: sticky;
  top: var(--app-sticky-top);
  z-index: 30;
  background: rgb(var(--movie-legacy-bg-rgb) / 0.82);
  backdrop-filter: blur(14px);
}

/* 底部导航（移动） */
.bottom-nav {
  position: fixed;
  left: var(--movie-page-edge);
  right: var(--movie-page-edge);
  bottom: calc(var(--app-primary-bottom-nav-bottom) + var(--app-safe-area-bottom));
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  height: var(--app-primary-bottom-nav-height);
  align-items: center;
  border: 1px solid var(--movie-border-soft);
  border-radius: 1rem;
  background: rgb(var(--movie-legacy-bg-elevated-rgb) / 0.86);
  backdrop-filter: blur(16px);
  padding: var(--app-primary-bottom-nav-padding);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }
}

.bottom-nav-item {
  display: flex;
  height: var(--app-primary-bottom-nav-item-height);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border-radius: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--movie-text-subtle);
  transition: color 0.15s, background-color 0.15s;
}

.bottom-nav-item[aria-current="page"] {
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

/* 页面主体 */
.page-body {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  padding-bottom: calc(var(--app-primary-bottom-nav-clearance) + 0.5rem);
}

@media (min-width: 1024px) {
  .page-body {
    padding-bottom: 2rem;
  }
}

/* 顶栏 */
.app-header {
  display: flex;
  min-height: var(--movie-header-row-height);
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .app-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* 二级页顶部（返回 + 居中标题） */
.page-top-nav {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.page-top-nav-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

@media (min-width: 768px) {
  .page-top-nav-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* 品牌标识 */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--movie-primary-rgb) / 0.3);
  background: var(--movie-primary-muted);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 4. 表面 -- */

.surface {
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.5rem;
  background: var(--movie-surface);
}

.panel {
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.75rem;
  background: rgb(var(--movie-legacy-bg-elevated-rgb) / 0.72);
}

/* ------------------------------------------------------------ 5. 按钮 -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--movie-border);
  border-radius: 0.5rem;
  background: var(--movie-surface);
  color: var(--movie-text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.btn:hover {
  border-color: var(--movie-border-strong);
  background: var(--movie-surface-strong);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn-primary {
  border-color: rgb(var(--movie-primary-rgb) / 0.32);
  background: var(--movie-primary);
  color: var(--movie-primary-foreground);
  font-weight: 900;
}

.btn-primary:hover {
  background: var(--movie-primary-strong);
  border-color: var(--movie-primary-strong);
}

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

.btn-ghost:hover {
  border-color: var(--movie-border-soft);
  background: var(--movie-surface);
  color: var(--movie-text);
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
}

.btn-sm {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

/* 主题化覆盖：与原站 html[data-theme=...] .movie-button-primary 一致 */
[data-theme="movie-light"] .btn-primary,
[data-theme="movie-dark"] .btn-primary {
  border-color: var(--movie-primary) !important;
  background: var(--movie-primary) !important;
  color: #17130a !important;
}

/* ------------------------------------------------------------ 6. 徽标 -- */

.chip {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.625rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 9999px;
  background: var(--movie-surface);
  color: var(--movie-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip-primary {
  border-color: var(--movie-primary-strong);
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
  font-weight: 900;
}

.badge {
  display: inline-flex;
  height: 1.5rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
  font-size: 0.6875rem;
  font-weight: 900;
}

/* 评分角标 */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--movie-primary-strong);
  font-size: 0.8125rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 7. 海报卡片 -- */

.poster-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

@media (min-width: 640px) {
  .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1280px) {
  .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}

.poster-card {
  position: relative;
  display: block;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.5rem;
  background: var(--movie-surface);
  box-shadow: 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.24);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.poster-card:hover,
.poster-card:focus-visible {
  border-color: rgb(var(--movie-primary-strong-rgb) / 0.38);
  box-shadow: 0 0 0 1px rgb(var(--movie-primary-strong-rgb) / 0.15),
    0 0 16px rgb(var(--movie-primary-strong-rgb) / 0.13), 0 9px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.poster-frame {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: rgba(var(--movie-legacy-text-rgb) / 0.06);
}

.poster-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 竖屏短剧用 3/4 版式 */
.poster-card[data-vertical="true"] .poster-frame {
  aspect-ratio: 3 / 4;
}

.poster-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    transparent 14%,
    rgba(0, 0, 0, 0.08) 32%,
    rgba(0, 0, 0, 0.3) 56%,
    rgba(0, 0, 0, 0.66),
    rgba(0, 0, 0, 0.94)
  );
}

.poster-corner-label {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 0.25rem;
  background: rgba(5, 11, 14, 0.76);
  color: rgb(var(--movie-surface-bright-rgb) / 0.96);
  padding: 0.15rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
}

.poster-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0.5rem 0.625rem 0.625rem;
}

.poster-title {
  overflow: hidden;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.poster-sub {
  margin-top: 0.125rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.6875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 进度条（继续观看） */
.poster-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}

.poster-progress > span {
  display: block;
  height: 100%;
  background: var(--movie-primary);
}

/* ------------------------------------------------- 8. 骨架屏 / 空态 -- */

.skeleton {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.5rem;
  background-color: rgba(var(--movie-legacy-text-rgb) / 0.06);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-poster {
  aspect-ratio: 2 / 3;
  border-radius: 0.5rem;
}

.state-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--movie-text-muted);
}

.state-view-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--movie-text);
}

.state-view-desc {
  font-size: 0.875rem;
  line-height: 1.5rem;
  max-width: 26rem;
}

.error-panel {
  border: 1px solid rgba(252, 165, 165, 0.35);
  border-radius: 0.5rem;
  background: var(--movie-danger-bg);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ------------------------------------------------------ 9. 分区标题 -- */

.section {
  margin-bottom: 1.75rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.section-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--movie-text-subtle);
}

.section-more:hover {
  color: var(--movie-primary-strong);
}

/* 横向滚动条（首页 rail） */
.rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.25rem;
}

.rail > * {
  flex: 0 0 auto;
  width: 8.5rem;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .rail > * {
    width: 9.5rem;
  }
}

/* Hero 大图 */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 1rem;
  aspect-ratio: 16 / 9;
  min-height: 15rem;
}

@media (min-width: 768px) {
  .hero {
    aspect-ratio: 21 / 9;
    min-height: 20rem;
  }
}

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

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 8, 10, 0.96) 0%,
    rgba(6, 8, 10, 0.72) 28%,
    rgba(6, 8, 10, 0.24) 58%,
    transparent 100%
  );
}

.hero-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 42rem;
}

@media (min-width: 768px) {
  .hero-body {
    padding: 2rem;
  }
}

.hero-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 2.25rem;
  }
}

.hero-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ------------------------------------------------------ 10. 表单 -- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--movie-text-muted);
}

.input {
  height: 2.75rem;
  width: 100%;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.5rem;
  background: var(--movie-bg-elevated);
  color: var(--movie-text);
  padding: 0 0.875rem;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--movie-text-subtle);
  opacity: 1;
}

.input:focus {
  border-color: var(--movie-primary-strong);
  box-shadow: 0 0 0 3px var(--movie-primary-muted);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.search-box .input {
  padding-left: 2.5rem;
}

.search-box > svg {
  position: absolute;
  left: 0.875rem;
  color: var(--movie-text-subtle);
  pointer-events: none;
}

/* 分段控件 */
.segmented {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 9999px;
  background: var(--movie-surface);
  padding: 0.25rem;
}

.segmented > button {
  height: 2rem;
  border-radius: 9999px;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--movie-text-muted);
  transition: background-color 0.15s, color 0.15s;
}

.segmented > button[aria-pressed="true"] {
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

/* ------------------------------------------------------ 11. 文字 -- */

.text-muted { color: var(--movie-text-muted); }
.text-subtle { color: var(--movie-text-subtle); }
.text-primary-color { color: var(--movie-primary-strong); }

.title-xl { font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; }
.title-lg { font-size: 1.375rem; line-height: 1.875rem; font-weight: 900; }
.title-md { font-size: 1.125rem; line-height: 1.75rem; font-weight: 900; }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------ 12. 工具类 -- */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.px-3 { padding-inline: 0.75rem; }
.py-3 { padding-block: 0.75rem; }
.py-6 { padding-block: 1.5rem; }

.size-3 { width: 0.75rem; height: 0.75rem; }
.size-4 { width: 1rem; height: 1rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.size-8 { width: 2rem; height: 2rem; }
.size-10 { width: 2.5rem; height: 2.5rem; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

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

/* 容器宽度 */
.container-narrow { max-width: 48rem; margin-inline: auto; }
.container-wide { max-width: 72rem; margin-inline: auto; }

/* --------------------------------------------------------- 13. 动效 -- */

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

/* ---------------------------------------------------- 14. 加载 / 提示 -- */

.spinner {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--movie-border);
  border-top-color: var(--movie-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.toast-host {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + var(--app-safe-area-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

@media (max-width: 1023px) {
  /* 移动端抬高，避免被底部导航遮住 */
  .toast-host {
    bottom: calc(var(--app-primary-bottom-nav-clearance) + 0.5rem);
    left: 1rem;
    right: 1rem;
  }
}

.toast {
  pointer-events: auto;
  transform: translateY(0.5rem);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 22rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.6rem;
  background: rgb(var(--movie-legacy-bg-elevated-rgb) / 0.96);
  backdrop-filter: blur(12px);
  padding: 0.6rem 0.9rem;
  color: var(--movie-text);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.toast[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  border-color: var(--movie-success-border);
  color: var(--movie-success);
}

.toast-error {
  border-color: var(--movie-danger-border);
  color: var(--movie-danger-strong);
}

/* ------------------------------------------------------- 15. 评论区 -- */

.comment-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--movie-border-soft);
}

.comment-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 50%;
  background: var(--movie-surface);
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-body {
  min-width: 0;
  flex: 1 1 0%;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-author {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--movie-text);
}

.comment-time {
  font-size: 0.75rem;
  color: var(--movie-text-subtle);
}

.comment-delete {
  margin-left: auto;
  color: var(--movie-text-subtle);
  transition: color 0.15s;
}

.comment-delete:hover {
  color: var(--movie-danger-strong);
}

.comment-text {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--movie-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.75rem;
  padding: 0 0.55rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 9999px;
  background: var(--movie-surface);
  color: var(--movie-text-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.comment-like:hover {
  border-color: var(--movie-border-strong);
  color: var(--movie-text);
}

.comment-like.is-liked {
  border-color: rgb(var(--movie-primary-strong-rgb) / 0.42);
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

/* -------------------------------------------------------- 16. 播放器 -- */

.player-shell {
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.75rem;
  background: #000;
  overflow: hidden;
}

.player-video {
  display: block;
  width: 100%;
  max-height: 72dvh;
  background: #000;
}

.player-license {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--movie-border-soft);
  background: var(--movie-bg-elevated);
  color: var(--movie-text-subtle);
  font-size: 0.75rem;
}

.player-license-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  color: var(--movie-primary-strong);
  font-weight: 700;
}

.player-license-link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------ 17. 详情页 -- */

.detail-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 1rem;
  margin-bottom: 1.5rem;
}

.detail-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.detail-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.72) 46%, rgba(8, 9, 11, 0.4) 100%),
    linear-gradient(to top, rgba(8, 9, 11, 0.9), transparent 60%);
}

.detail-hero-inner {
  position: relative;
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .detail-hero-inner {
    padding: 2rem;
    gap: 2rem;
  }
}

.detail-poster {
  display: none;
  width: 12rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.6rem;
  box-shadow: 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .detail-poster {
    display: block;
  }
}

.detail-poster img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.detail-info {
  min-width: 0;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.detail-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .detail-title {
    font-size: 2.25rem;
  }
}

.detail-original {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
}

.detail-overview {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 52rem;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* 剧集列表 */
.episode-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}

.episode-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.5rem;
  background: var(--movie-surface);
  color: var(--movie-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.episode-item:hover {
  border-color: var(--movie-border-strong);
  color: var(--movie-text);
}

.episode-item[aria-current="true"] {
  border-color: var(--movie-primary-strong);
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

/* 竖屏短剧容器 */
.vertical-stage {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.vertical-frame {
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 1rem;
  background: #000;
}

.vertical-frame .player-video {
  max-height: 74dvh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* ------------------------------------------------------ 18. 表单页 -- */

.form-card {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.85rem;
  background: rgb(var(--movie-legacy-bg-elevated-rgb) / 0.72);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-error {
  border: 1px solid var(--movie-danger-border);
  border-radius: 0.5rem;
  background: var(--movie-danger-bg);
  padding: 0.6rem 0.85rem;
  color: var(--movie-danger-strong);
  font-size: 0.85rem;
}

/* --------------------------------------------------- 19. 用户信息卡 -- */

.profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.85rem;
  background: rgb(var(--movie-legacy-bg-elevated-rgb) / 0.72);
  padding: 1.25rem;
}

.profile-avatar {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--movie-border-soft);
  border-radius: 50%;
  background: var(--movie-surface);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 统计条 */
.stat-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.75rem;
}

.stat-cell {
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.6rem;
  background: var(--movie-surface);
  padding: 0.75rem;
  text-align: center;
}

.stat-value {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--movie-text);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--movie-text-subtle);
}

/* --------------------------------------------------- 20. 列表页通用 -- */

.list-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--movie-border-soft);
  border-radius: 0.7rem;
  background: var(--movie-surface);
  padding: 0.85rem 1rem;
  transition: border-color 0.15s, background-color 0.15s;
}

.list-row:hover {
  border-color: var(--movie-border-strong);
  background: var(--movie-surface-strong);
}

.tab-bar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.35rem;
}

.tab-bar > button {
  height: 2.1rem;
  flex-shrink: 0;
  border: 1px solid var(--movie-border-soft);
  border-radius: 9999px;
  background: var(--movie-surface);
  padding: 0 0.9rem;
  color: var(--movie-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.tab-bar > button[aria-pressed="true"] {
  border-color: var(--movie-primary-strong);
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

/* Markdown 简版渲染（公告正文） */
.prose {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--movie-text-muted);
}

.prose h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--movie-text);
}

.prose h3 {
  margin: 0.9rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--movie-text);
}

.prose ul {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.prose li {
  margin: 0.2rem 0;
}

.prose p {
  margin: 0.45rem 0;
}

.prose a {
  color: var(--movie-primary-strong);
  font-weight: 600;
}

.prose code {
  border-radius: 0.25rem;
  background: var(--movie-surface-strong);
  padding: 0.1rem 0.35rem;
  font-family: var(--default-mono-font-family);
  font-size: 0.85em;
}