/* ============================================================
 * 搜剧AI UI 框架（souju-ui）
 * 设计规范对齐 souju.ai：深色沉浸 + Cyan 强调 + Amber 热度徽章
 * 支持 大(large) / 中(regular) / 小(compact) 三种布局尺寸
 * ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 间距基准（.25rem 刻度体系） */
  --spacing: .25rem;

  /* 色彩系统（souju.ai design tokens） */
  --movie-bg: #071013;
  --movie-bg-elevated: #0b171c;
  --movie-surface: #0f1c21;
  --movie-surface-muted: #16262c;
  --movie-panel: rgba(255, 255, 255, .03);
  --movie-text: #f8fafc;
  --movie-text-muted: #cbd5e1;
  --movie-text-subtle: #8fa8ae;
  --movie-border: rgba(103, 232, 249, .14);
  --movie-border-strong: rgba(103, 232, 249, .28);
  --movie-primary: #67e8f9;             /* Cyan-400 强调色 */
  --movie-primary-strong: #a2f4fd;      /* Cyan-200 */
  --movie-primary-rgb: 103, 232, 249;
  --movie-accent: #ffd236;              /* Amber 热度 */
  --movie-accent-soft: #fef3c6;
  --movie-success: #5ee9b5;
  --movie-danger: #ff6568;
  --movie-heat-text: rgba(254, 249, 195, .92);
  --movie-heat-border: rgba(253, 224, 71, .25);
  --movie-mask: rgba(0, 0, 0, .88);

  /* 圆角（souju.ai：feed 卡片 .625rem / 徽章 .3rem / 按钮 .25rem / 大容器 1rem+） */
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-md: .3rem;
  --radius-card: .625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  /* 模糊 */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-xl: 24px;

  /* 布局常量 */
  --header-row-height: 3.5rem;
  --control-size: 2.5rem;
  --page-edge: 1.25rem;

  /* 布局尺寸档（默认 regular，由 data-size 覆盖） */
  --card-min-width: 10rem;
  --card-cover-ratio: 2 / 3;
  --grid-gap: 1rem;
  --font-scale: 1;
  --section-gap: 2.25rem;
  --container-max: 80rem;
  --banner-ratio: 16 / 9;
  --card-title-size: .875rem;
  --card-meta-size: .75rem;
  --ep-item-size: .8125rem;
  --hero-title-size: 2rem;

  /* 字体栈（souju.ai） */
  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "STHeiti", ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* 动效 */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --duration-fast: .15s;
  --duration-base: .25s;
}

/* ---------- 2. 三种布局尺寸档 ---------- */

/* 大模板：宽屏展示 —— 大卡片、大字号、大间距、更宽容器 */
html[data-size="large"] {
  --card-min-width: 14rem;
  --card-cover-ratio: 2 / 3;
  --grid-gap: 1.5rem;
  --font-scale: 1.125;
  --section-gap: 3rem;
  --container-max: 90rem;
  --banner-ratio: 21 / 9;
  --card-title-size: 1rem;
  --card-meta-size: .8125rem;
  --ep-item-size: .875rem;
  --hero-title-size: 2.375rem;
  --header-row-height: 4rem;
  --control-size: 2.75rem;
  --page-edge: 2rem;
}

/* 中模板：常规页面 —— 标准密度 */
html[data-size="regular"] {
  --card-min-width: 10rem;
  --grid-gap: 1rem;
  --font-scale: 1;
  --section-gap: 2.25rem;
  --container-max: 80rem;
  --banner-ratio: 16 / 9;
  --card-title-size: .875rem;
  --card-meta-size: .75rem;
  --ep-item-size: .8125rem;
  --hero-title-size: 2rem;
  --header-row-height: 3.5rem;
  --control-size: 2.5rem;
  --page-edge: 1.25rem;
}

/* 小模板：紧凑布局 —— 小卡片、紧凑间距、适合移动端与信息密集型页面 */
html[data-size="compact"] {
  --card-min-width: 6.25rem;
  --card-cover-ratio: 2 / 3;
  --grid-gap: .625rem;
  --font-scale: .875;
  --section-gap: 1.5rem;
  --container-max: 60rem;
  --banner-ratio: 3 / 2;
  --card-title-size: .8125rem;
  --card-meta-size: .6875rem;
  --ep-item-size: .75rem;
  --hero-title-size: 1.5rem;
  --header-row-height: 3rem;
  --control-size: 2.25rem;
  --page-edge: .875rem;
}

/* ---------- 3. 基础排版（受 font-scale 控制） ---------- */
body {
  font-family: var(--font-sans);
  font-size: calc(1rem * var(--font-scale));
  background: var(--movie-bg);
  color: var(--movie-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-edge);
}

/* ---------- 4. 框架组件 ---------- */

/* 4.1 按钮体系 */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .5em 1.25em;
  font-size: .875em;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}
.ui-btn--primary {
  background: linear-gradient(90deg, var(--movie-primary), var(--movie-primary-strong));
  color: #04120c;
}
.ui-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 4px 20px rgba(var(--movie-primary-rgb), .25); }
.ui-btn--ghost {
  background: var(--movie-panel);
  border-color: var(--movie-border);
  color: var(--movie-text-muted);
}
.ui-btn--ghost:hover { border-color: var(--movie-primary); color: var(--movie-primary); }
.ui-btn--danger { background: var(--movie-danger); color: #fff; }
.ui-btn--sm { padding: .35em .9em; font-size: .8125em; border-radius: var(--radius-sm); }
.ui-btn--block { width: 100%; }

/* 4.2 影视卡片（movie-card，feed 卡片 .625rem 圆角） */
.movie-card {
  display: block;
  background: var(--movie-surface);
  border: 1px solid var(--movie-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.movie-card:hover {
  transform: translateY(-3px);
  border-color: var(--movie-border-strong);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--movie-primary-rgb), .12);
}
.movie-card__poster {
  position: relative;
  aspect-ratio: var(--card-cover-ratio);
  overflow: hidden;
  background: var(--movie-surface-muted);
}
.movie-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.movie-card:hover .movie-card__poster img { transform: scale(1.04); }
.movie-card__type {
  position: absolute; left: .5em; top: .5em;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: var(--card-meta-size); padding: .15em .6em; border-radius: var(--radius-md);
  backdrop-filter: blur(var(--blur-sm));
}
.movie-card__score {
  position: absolute; right: .5em; top: .5em;
  background: var(--movie-primary); color: #04120c;
  font-size: var(--card-meta-size); font-weight: 700; padding: .15em .6em; border-radius: var(--radius-md);
}
.movie-card__badge {
  position: absolute; left: .5em; bottom: .5em;
  background: rgba(0, 0, 0, .6); color: var(--movie-primary);
  font-size: var(--card-meta-size); padding: .15em .6em; border-radius: var(--radius-md);
  backdrop-filter: blur(var(--blur-sm));
}
/* 热度徽章（souju.ai home-feed-card-heat：Amber） */
.movie-card__heat {
  position: absolute; right: .5em; bottom: .5em;
  color: var(--movie-heat-text);
  border: 1px solid var(--movie-heat-border);
  font-size: var(--card-meta-size); padding: .15em .6em; border-radius: var(--radius-md);
  background: rgba(7, 13, 16, .68);
}
.movie-card__body { padding: .625em .75em; }
.movie-card__title {
  font-size: var(--card-title-size); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.movie-card__meta {
  font-size: var(--card-meta-size); color: var(--movie-text-subtle); margin-top: .15em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 4.3 网格（由尺寸档变量驱动） */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
  gap: var(--grid-gap);
}
.movie-grid--dense { grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min-width) * .78), 1fr)); }

/* 4.4 区块 */
.ui-section { margin: var(--section-gap) 0; }
.ui-section__head { display: flex; align-items: baseline; gap: .875rem; margin-bottom: var(--grid-gap); }
.ui-section__title { font-size: calc(1.3125rem * var(--font-scale)); font-weight: 700; letter-spacing: .01em; }
.ui-section__more { margin-left: auto; font-size: .8125rem; color: var(--movie-text-subtle); }
.ui-section__more:hover { color: var(--movie-primary); }

/* 4.5 表单控件 */
.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  background: var(--movie-bg-elevated);
  border: 1px solid var(--movie-border);
  border-radius: var(--radius-sm);
  padding: .55em .875em;
  color: var(--movie-text);
  font-size: .875em;
  font-family: inherit;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--movie-primary); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--movie-text-subtle); }
.ui-label { display: block; font-size: .8125rem; color: var(--movie-text-muted); margin-bottom: .3em; }

/* 4.6 开关（souju.ai 风格） */
.ui-switch { position: relative; display: inline-block; width: 2.5em; height: 1.375em; flex: none; }
.ui-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch__slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--movie-surface-muted); border: 1px solid var(--movie-border);
  border-radius: var(--radius-full); transition: var(--duration-fast) var(--ease-out);
}
.ui-switch__slider::before {
  content: ""; position: absolute; height: 1em; width: 1em; left: .1875em; top: .1875em;
  background: var(--movie-text-subtle); border-radius: 50%; transition: var(--duration-fast) var(--ease-out);
}
.ui-switch input:checked + .ui-switch__slider { background: rgba(var(--movie-primary-rgb), .2); border-color: var(--movie-primary); }
.ui-switch input:checked + .ui-switch__slider::before { transform: translateX(1.125em); background: var(--movie-primary); }

/* 4.7 标签 / 徽章 */
.ui-tag {
  display: inline-flex; align-items: center;
  padding: .2em .75em; border-radius: var(--radius-full);
  font-size: .75rem; color: var(--movie-text-muted);
  background: var(--movie-panel); border: 1px solid var(--movie-border);
  transition: all var(--duration-fast) var(--ease-out);
}
.ui-tag:hover, .ui-tag--active { border-color: var(--movie-primary); color: var(--movie-primary); }
.ui-tag--heat { color: var(--movie-heat-text); border-color: var(--movie-heat-border); }

/* 4.8 分页 */
.ui-pagination { display: flex; gap: .375rem; justify-content: center; margin: var(--section-gap) 0; }
.ui-pagination a, .ui-pagination span {
  min-width: 2rem; text-align: center; padding: .35em .6em;
  border: 1px solid var(--movie-border); border-radius: var(--radius-sm);
  font-size: .8125rem; color: var(--movie-text-subtle);
}
.ui-pagination a:hover, .ui-pagination .on { border-color: var(--movie-primary); color: var(--movie-primary); }

/* 4.9 面板 */
.ui-panel {
  background: var(--movie-surface);
  border: 1px solid var(--movie-border);
  border-radius: var(--radius-lg);
  padding: var(--grid-gap);
}

/* 4.10 骨架屏 */
.ui-skeleton {
  position: relative; overflow: hidden;
  background: var(--movie-surface-muted); border-radius: var(--radius-card);
}
.ui-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* 4.11 尺寸切换器（大/中/小） */
.ui-size-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--movie-border); border-radius: var(--radius-full);
  overflow: hidden; background: var(--movie-panel);
}
.ui-size-switch a {
  padding: .3em .8em; font-size: .75rem; color: var(--movie-text-subtle);
  transition: all var(--duration-fast) var(--ease-out); line-height: 1.4;
}
.ui-size-switch a:hover { color: var(--movie-text); }
.ui-size-switch a.on { background: var(--movie-primary); color: #04120c; font-weight: 700; }

/* 4.12 主题切换器 */
.ui-theme-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--movie-border); border-radius: var(--radius-full);
  overflow: hidden; background: var(--movie-panel);
}
.ui-theme-switch a { padding: .3em .8em; font-size: .75rem; color: var(--movie-text-subtle); line-height: 1.4; }
.ui-theme-switch a:hover { color: var(--movie-text); }
.ui-theme-switch a.on { background: var(--movie-primary); color: #04120c; font-weight: 700; }

/* 4.13 顶部导航（souju.ai header：3.5rem 行高 + 毛玻璃） */
.ui-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-row-height);
  background: rgba(7, 16, 19, .86);
  backdrop-filter: blur(var(--blur-md));
  border-bottom: 1px solid var(--movie-border);
}
.ui-header__inner {
  height: 100%; display: flex; align-items: center; gap: var(--grid-gap);
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--page-edge);
}
.ui-header__nav { display: flex; gap: .125rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.ui-header__nav::-webkit-scrollbar { display: none; }
.ui-header__nav a {
  padding: .4em .8em; border-radius: var(--radius-sm);
  font-size: .875em; color: var(--movie-text-muted); white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}
.ui-header__nav a:hover, .ui-header__nav a.active { color: var(--movie-text); background: var(--movie-panel); }
.ui-header__logo { display: flex; align-items: center; gap: .5em; flex: none; }
.ui-header__mark {
  width: var(--control-size); height: var(--control-size);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--movie-primary), #1a9c72);
  color: #04120c; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(1em * var(--font-scale));
}
.ui-header__title { font-size: calc(1.0625rem * var(--font-scale)); font-weight: 700; }
.ui-header__actions { display: flex; align-items: center; gap: .5em; flex: none; }
.ui-header__search {
  display: flex; align-items: center;
  background: var(--movie-panel); border: 1px solid var(--movie-border);
  border-radius: var(--radius-full); overflow: hidden; height: var(--control-size);
}
.ui-header__search input {
  border: none; background: transparent; outline: none;
  padding: 0 .875em; color: var(--movie-text); font-size: .8125em; width: 11em;
}
.ui-header__search button {
  border: none; background: var(--movie-primary); color: #04120c;
  padding: 0 .875em; height: 100%; cursor: pointer; font-weight: 600; font-size: .8125em;
}

/* 4.14 Hero（souju.ai 首页大搜索区） */
.ui-hero {
  padding: calc(var(--section-gap) * 1.6) 0 var(--section-gap);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--movie-primary-rgb), .09), transparent 60%),
    radial-gradient(circle at 72% 18%, rgba(var(--movie-primary-rgb), .0264), transparent 42%);
}
.ui-hero__title { font-size: calc(var(--hero-title-size) * var(--font-scale)); font-weight: 800; letter-spacing: .02em; }
.ui-hero__sub { color: var(--movie-text-muted); margin: .75em 0 1.5em; }
.ui-hero__search { display: flex; gap: .625em; max-width: 36em; }
.ui-hero__search .ui-input { border-radius: var(--radius-full); padding: .8em 1.25em; }
.ui-hero__search .ui-btn { border-radius: var(--radius-full); }

/* 4.15 公告条 */
.ui-announce {
  background: linear-gradient(90deg, rgba(var(--movie-primary-rgb), .1), transparent);
  border-bottom: 1px solid var(--movie-border);
  font-size: .8125em;
}
.ui-announce__inner { display: flex; align-items: center; gap: .75em; height: 2.125rem; }
.ui-announce__tag {
  background: var(--movie-primary); color: #04120c;
  font-size: .6875rem; font-weight: 700; padding: .1em .6em; border-radius: var(--radius-sm);
}
.ui-announce a { color: var(--movie-text-muted); }
.ui-announce a:hover { color: var(--movie-primary); }
.ui-announce__more { margin-left: auto; }

/* ---------- 5. 响应式兜底（JS 不可用时按视口自动切换） ---------- */
@media (min-width: 1600px) {
  html:not([data-size]) { --card-min-width: 14rem; --grid-gap: 1.5rem; --font-scale: 1.125; --section-gap: 3rem; --container-max: 90rem; --banner-ratio: 21 / 9; --hero-title-size: 2.375rem; --header-row-height: 4rem; --control-size: 2.75rem; --page-edge: 2rem; }
}
@media (max-width: 767px) {
  html:not([data-size]) { --card-min-width: 6.25rem; --grid-gap: .625rem; --font-scale: .875; --section-gap: 1.5rem; --container-max: 60rem; --banner-ratio: 3 / 2; --hero-title-size: 1.5rem; --header-row-height: 3rem; --control-size: 2.25rem; --page-edge: .875rem; }
}

/* 小屏通用适配（任何尺寸档下，超宽元素收缩） */
@media (max-width: 767px) {
  .ui-hero__search { flex-direction: column; }
  .ui-section__head { flex-wrap: wrap; }
}

/* ---------- 6. 大屏增强 ---------- */
@media (min-width: 1600px) {
  html[data-size="large"] .ui-header__search input { width: 15em; }
}

/* ---------- 7. 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}