/* ======================
   Reset & Base
   ====================== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Arial, sans-serif;
  background:#000; color:#fff;
  overflow-x:hidden;
}

/* ======================
   Navbar（左 Logo | 中菜单 | 右功能区）
   ====================== */
#navbar{ position:fixed; top:0; left:0; right:0; background:transparent; transition:background-color .3s ease, backdrop-filter .3s ease; z-index:100; }
body.scrolled #navbar{ background:rgba(0,0,0,.4); backdrop-filter:blur(10px); }

#navbar nav{ display:flex; align-items:center; gap:16px; padding:8px 24px; min-height:56px; }
#navbar .logo{ order:-1; display:inline-flex; align-items:center; line-height:0; }
#navbar .logo svg{ height:32px; width:auto; display:block; }

#navbar nav ul{ list-style:none; display:flex; gap:20px; margin-left:auto; margin-right:auto; }
#navbar nav ul li{ display:inline-flex; }
#navbar nav ul a{
  color:#e5e7eb; text-decoration:none; font-size:23px;
  transition:color .18s ease, text-shadow .18s ease;
}
#navbar nav ul a:visited{ color:#e5e7eb; }
#navbar nav ul a:hover, #navbar nav ul a:focus-visible{
  color:#ffa500; text-shadow:0 0 10px rgba(255,165,0,.25); outline:none;
}

/* 右侧功能区：搜索组 + 历史/头像 */
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-icons{ display:flex; align-items:center; gap:10px; }
.nav-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9999px; color:#e5e7eb; text-decoration:none; transition:background .2s, transform .2s; }
.nav-icon:hover{ background:rgba(255,255,255,.1); } .nav-icon:active{ transform:scale(.96); }
.nav-icon svg{ width:20px; height:20px; display:block; }
.nav-icon.avatar img{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }

/* ======================
   搜索组：按钮在右、输入框在左，只向左展开
   ====================== */
#searchWrap.search-wrap{
  --h:34px; --w:280px;
  display:flex; flex-direction:row-reverse; align-items:center; gap:8px;
}
#searchWrap .search-toggle{
  width:var(--h); height:var(--h);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; background:transparent; border:1px solid transparent; transition:background .2s;
}
#searchWrap .search-toggle:hover{ background:rgba(255,255,255,.08); }

#searchWrap .search-form{
  display:inline-flex; align-items:center; gap:8px; overflow:hidden;
  position:static !important; right:auto !important; left:auto !important; width:auto !important;
  opacity:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:9999px; backdrop-filter:blur(6px);
  transition:opacity .18s ease;
}
#searchWrap .search-form input[type="search"]{
  height:var(--h); width:0; min-width:0; padding:0; border:none; outline:none; color:#fff; background:transparent; pointer-events:none;
  transition:width .22s ease, padding .22s ease;
}
#searchWrap.open .search-form{ opacity:1; }
#searchWrap.open .search-form input[type="search"]{ width:var(--w); padding:0 12px; pointer-events:auto; }

/* 屏读辅助 */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 小屏：搜索宽度缩短 */
@media (max-width:480px){ #searchWrap.search-wrap{ --w:60vw; } }

/* ======================
   海报区域（全屏） + 按钮/箭头
   ====================== */
.poster-section{ position:relative; width:100%; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.poster{ position:absolute; inset:0; z-index:1; }
#movie-poster{ width:100%; height:100%; object-fit:cover; display:block; }

/* 按钮/左右切换永远在上层 */
.poster .poster-btn-group,
.poster .carousel-btn,
.poster-section .poster-prev-btn,
.poster-section .poster-next-btn{
  position:absolute; z-index:5; user-select:none;
}
.poster .poster-btn-group{ top:58%; left:11%; display:flex; gap:15px; }
.poster .poster-btn{
  padding:10px 24px; background:#ff9100; color:#fff; font-size:25px; font-weight:700; border:0; border-radius:3px; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.poster .poster-btn:hover{ transform:scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,.25); }

.poster-section .poster-prev-btn,
.poster-section .poster-next-btn{
  top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:48px; cursor:pointer;
}
.poster-section .poster-prev-btn{ left:24px; }
.poster-section .poster-next-btn{ right:24px; }
.poster-section .poster-prev-btn:hover,
.poster-section .poster-next-btn:hover{ color:#ff9800; }

/* ======================
   轮播缩略条（底部）
   ====================== */
.carousel-container{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:flex-start;
  width:1020px; height:160px; overflow:hidden; z-index:4; /* 高于遮罩 */
}
.carousel{ display:flex; gap:10px; transition:transform .5s ease; }
.carousel-item{
  width:160px; height:90px; object-fit:cover; border-radius:10px; cursor:pointer; border:3px solid transparent; transition:border .3s ease, opacity .2s;
}
.carousel-item:hover{ opacity:.7; }
.carousel-item.selected{
  border:3px solid #ff9800; border-radius:8px; box-shadow:0 0 10px rgba(255,152,0,.7); transition:all .3s ease;
}

/* ======================
   海报“融黑”（双端）
   —— 现代浏览器：mask；旧浏览器：覆盖层 fallback
   ====================== */
/* 上下融黑：加大覆盖范围 */
/* 上下融黑：范围更大 */
.poster{
  --fade-top: clamp(120px, 26%, 320px);
  --fade-bottom: clamp(260px, 60%, 720px);
}

/* Fallback 覆盖层（上下各一段黑→透明） */
.gradient-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.97) 0%,
    rgba(0,0,0,0)   var(--fade-top),
    rgba(0,0,0,0)   calc(100% - var(--fade-bottom)),
    rgba(0,0,0,.97) 100%
  );
}
/* 现代浏览器：真正“融黑”——只给图片加 mask，关闭覆盖层 */
@supports ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
  .gradient-overlay{ display:none !important; }
  #movie-poster{
    -webkit-mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) var(--fade-top),
      rgba(0,0,0,1) calc(100% - var(--fade-bottom)),
      rgba(0,0,0,0) 100%
    );
            mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) var(--fade-top),
      rgba(0,0,0,1) calc(100% - var(--fade-bottom)),
      rgba(0,0,0,0) 100%
    );
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  }
}

/* ======================
   展示区（推荐网格）
   ====================== */
.recommend-section{ position:relative; width:100%; background:#000; padding:20px 40px; z-index:2; }
.recommend-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.recommend-header h2{ color:#fff; font-size:22px; }
.recommend-header .recommend-subtitle{ color:#ccc; margin-left:10px; }
.recommend-header .more-link{ color:#fff; text-decoration:none; font-size:16px; }
.more-link:hover, .more-link:focus-visible{ color:#ffa500; text-shadow:0 0 10px rgba(255,165,0,.25); outline:none; }

.recommend-grid{
  display:grid; grid-template-columns:repeat(6, 180px);
  gap:20px 15px; justify-content:center; padding:0 40px;
}
.recommend-item{ width:150px; text-align:center; cursor:pointer; transition:transform .3s ease; }
.recommend-item img{ width:100%; height:auto; border-radius:8px; display:block; }
.recommend-item:hover img{ transform:scale(1.05); transition:transform .3s ease; }
.movie-info{ margin-top:5px; color:#fff; font-size:14px; }
.movie-title{ display:block; } .movie-episode{ display:block; color:#aaa; }

/* 只隐藏“轮播区”的左右按钮（不影响海报的左右按钮） */
.carousel-container .carousel-btn{ display:none !important; }

/* ======================
   卡片：悬停变暗 + 播放按钮（只在图片区域）
   ====================== */
.recommend-grid a, .recommend-grid a:link, .recommend-grid a:visited, .recommend-grid a:hover, .recommend-grid a:active{
  color:inherit !important; text-decoration:none !important; text-underline-offset:0;
}
a.recommend-item .movie-info{ color:#9ca3af !important; }
a.recommend-item .movie-title{ color:#e5e7eb !important; }
a.recommend-item .movie-episode{ color:inherit !important; }

.recommend-grid a.recommend-item .thumb{ position:relative; border-radius:14px; overflow:hidden; contain:paint; }
.recommend-grid a.recommend-item .thumb img{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:14px; }
.recommend-grid a.recommend-item .thumb::before,
.recommend-grid a.recommend-item .thumb::after{ pointer-events:none; will-change:opacity, transform; }

.recommend-grid a.recommend-item .thumb::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .18s ease; z-index:1;
}
.recommend-grid a.recommend-item .thumb::after{
  content:""; position:absolute; left:50%; top:50%; width:56px; height:56px;
  transform:translate(-50%,-50%) scale(.96); opacity:0; transition:opacity .18s, transform .18s; z-index:2;
  background:no-repeat 50% 50%/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='white' stroke-width='4'/%3E%3Cpolygon points='35,28 35,52 55,40' fill='white'/%3E%3C/svg%3E");
}
.recommend-grid a.recommend-item .thumb:hover::before{ opacity:1 !important; }
.recommend-grid a.recommend-item .thumb:hover::after{ opacity:1 !important; transform:translate(-50%,-50%) scale(1.06); }
.recommend-grid a.recommend-item:focus-visible .thumb::before{ opacity:1; }
.recommend-grid a.recommend-item:focus-visible .thumb::after{ opacity:1; transform:translate(-50%,-50%) scale(1.02); }

/* —— 导航三栏栅格：左 logo / 中菜单 / 右功能区 —— */
#navbar nav{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
}

/* 左列：logo 固定在最左 */
#navbar .logo{
  grid-column: 1;
  justify-self: start;
}

/* 中列：菜单永远居中，不随右侧伸缩漂移 */
#navbar nav ul{
  grid-column: 2;
  justify-self: center;
  margin: 0 !important;           /* 干掉之前的 margin:auto 居中方式 */
}

/* 右列：搜索组 + 历史 + 头像 固定在最右 */
.nav-right{
  grid-column: 3;
  justify-self: end;
  margin: 0 !important;           /* 防止旧样式影响 */
}

/* 小屏时给中间菜单留足空间，避免与右侧重叠（按需调整断点） */
@media (max-width: 768px){
  #navbar nav ul{ gap: 14px; }
}
/* 海报淡入淡出动画（基础过渡） */
#movie-poster,
#movie-poster-fx{
  transition: opacity .45s ease;
}
#movie-poster-fx{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 4;           /* 在图片之上，但低于按钮/箭头（它们是 z=5） */
}
/* === 导航三栏栅格：左 logo / 中菜单 / 右功能区（不再被右侧挤） === */
#navbar nav{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
}
#navbar .logo{ grid-column:1; justify-self:start; }
#navbar nav ul{
  grid-column:2; justify-self:center;
  margin:0 !important;          /* 干掉旧的 margin:auto 冲突 */
}
.nav-right{ grid-column:3; justify-self:end; margin:0 !important; }

/* === 海报淡入淡出：确保不被其它样式覆盖（放在文件最末尾） === */
#movie-poster{
  opacity: 1;
  transition: opacity .35s ease !important;
}
#movie-poster.fade-out{ opacity: 0 !important; }
#movie-poster.fade-in { opacity: 1 !important; }

/* （保留你之前的“上下融黑”实现）
 * —— 如果你用的是 mask 版：确保按钮/箭头在上层 —— */
.poster .poster-btn-group,
.poster .carousel-btn,
.poster-section .poster-prev-btn,
.poster-section .poster-next-btn{
  position: absolute;
  z-index: 5 !important;    /* 永远在遮罩/图片之上 */
  pointer-events: auto;
}
/* ===== 用户中心 · 登录弹窗 ===== */
.uc-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.uc-modal.open{ display:block; }

/* 背景虚化 + 半透明遮罩 */
.uc-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 弹窗外观：深色半透明卡片，细边框，柔和阴影 */
.uc-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw, 420px);
  padding:22px 22px 18px;
  border-radius:16px;
  background: rgba(20,20,20,0.86);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  color:#e5e7eb;
}

/* 标题 & 关闭 */
.uc-title{ margin:6px 0 14px; font-size:20px; font-weight:700; color:#fff; }
.uc-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:#e5e7eb; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.uc-close:hover{ background:rgba(255,255,255,0.08); }
.uc-close:active{ transform: scale(0.96); }

/* 表单控件 */
.uc-form{ display:flex; flex-direction:column; gap:10px; }
.uc-label{ font-size:13px; color:#cbd5e1; }
.uc-input{
  height:38px; padding:0 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff; outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.uc-input::placeholder{ color:#9ca3af; }
.uc-input:focus{
  border-color:#ff9100;
  box-shadow: 0 0 0 3px rgba(255,145,0,0.25);
  background: rgba(255,255,255,0.08);
}

/* 按钮组：主色橙 + 次级描边 */
.uc-actions{ display:flex; gap:10px; margin-top:8px; }
.uc-btn{
  height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  font-weight:700; cursor:pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.uc-btn.primary{ background:#ff9100; color:#fff; }
.uc-btn.primary:hover{ transform: translateY(-1px); }
.uc-btn.ghost{
  background:transparent; color:#e5e7eb; border-color: rgba(255,255,255,0.18);
}
.uc-btn.ghost:hover{ background: rgba(255,255,255,0.06); }

/* 错误提示位 */
.uc-error{ margin-top:10px; color:#ff6b6b; font-size:13px; }

/* 打开弹窗时禁止页面滚动（可选） */
body.modal-open{ overflow:hidden; }

/* —— 注册“邮箱 / 手机”二选一 tab —— */
.uc-tabs{ display:flex; gap:8px; margin:6px 0 12px; }
.uc-tab-btn{
  flex:1; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06); color:#e5e7eb; cursor:pointer; font-weight:700;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.uc-tab-btn:hover{ background:rgba(255,255,255,0.1); }
.uc-tab-btn.active{ background:#ff9100; color:#fff; border-color:#ff9100; }

/* 面板显隐（不影响你的基础 .uc-panel 样式） */
.uc-panel[hidden] { display: none !important; }

/* ===== Auth 命名空间，避免与你现有样式冲突 ===== */
.auth-modal { position: fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index: 9999; opacity:0; pointer-events:none; transition: opacity .2s ease; }
.auth-modal.open { opacity:1; pointer-events:auto; }
.auth-mask { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.auth-dialog { position:relative; width:min(520px, 92vw); max-height:90vh; overflow:auto;
  background:#0b1020; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); padding:20px 20px 16px; color:#e5e7eb; }
.auth-close { position:absolute; right:10px; top:10px; background:transparent; color:#9ca3af;
  border:0; font-size:18px; cursor:pointer; }
.auth-title { margin:0 0 10px; font-size:20px; font-weight:800; color:#fff; }
.auth-form { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.auth-label { font-size:13px; color:#cbd5e1; }
.auth-input { width:100%; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; padding:0 12px; outline:none; }
.auth-input::placeholder { color:#9ca3af; }
.auth-actions { display:flex; gap:10px; margin-top:6px; }
.auth-btn { height:38px; padding:0 16px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#e5e7eb; font-weight:700; cursor:pointer; }
.auth-btn.primary { background:#ff9100; border-color:#ff9100; color:#fff; }
.auth-btn.ghost { background:transparent; }
.auth-error { background:#b91c1c; color:#fff; padding:8px 10px; border-radius:8px; font-size:13px; }
.auth-panel[hidden] { display:none !important; }

.auth-tabs { display:flex; gap:8px; margin:6px 0 12px; }
.auth-tab { flex:1; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#e5e7eb; font-weight:800; cursor:pointer; }
.auth-tab.active { background:#ff9100; color:#fff; border-color:#ff9100; }

.auth-toast { position: fixed; top:20px; left:50%; transform:translateX(-50%);
  background:#10b981; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:10000; font-weight:800; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.auth-toast.show { opacity:1; pointer-events:auto; }
.auth-toast.hide { opacity:0; pointer-events:none; }
/* 当前选中的注册方式高亮 */
.uc-tab-btn.active{ background:#ff9100; border-color:#ff9100; color:#fff; }
.uc-tab-btn.active{ background:#ff9100; border-color:#ff9100; color:#fff; }

/* ============ 下拉框（Select）暗色样式 ============ */

/* 统一输入组件基色（如果你已是暗色，可忽略这段） */
.auth-input,
.uc-input {
  background: #0b1020;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.18);
}
.auth-input::placeholder,
.uc-input::placeholder { color:#9ca3af; }

/* 仅针对 <select> 的定制：黑底 + 浅色箭头 + 右侧留出箭头空间 */
select.auth-input,
select.uc-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0b1020;
  color: #e5e7eb;
  padding-right: 30px;              /* 给箭头留位置 */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  /* 浅色下拉箭头（SVG），避免系统默认白箭头/黑箭头和底色打架 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 去掉老 IE/Edge 的自带箭头（安全冗余） */
select.auth-input::-ms-expand,
select.uc-input::-ms-expand { display: none; }

/* 聚焦态：边框/光晕高亮 */
select.auth-input:focus,
select.uc-input:focus {
  outline: none;
  border-color: #ff9100;
  box-shadow: 0 0 0 2px rgba(255,145,0,.25);
}

/* 下拉面板里的每一项：黑底白字（不同系统支持度略有差异） */
#auth-panel-register option,
#panel-register option {
  background: #0b1020;
  color: #e5e7eb;
}
#auth-panel-register option:checked,
#panel-register option:checked,
#auth-panel-register option:hover,
#panel-register option:hover {
  background: #1f2937;  /* hover/选中稍浅一点 */
  color: #fff;
}

/* —— 若你页面有更早的“白底”规则在覆盖，强力兜底 —— */
select.auth-input,
select.uc-input,
#auth-panel-register option,
#panel-register option {
  background-color: #0b1020 !important;
  color: #e5e7eb !important;
}
/* 导航栏搜索按钮规范化：去默认背景和边框，图标居中、跟随主题色 */
#navbar .search-wrap .search-toggle{
  appearance:none;
  background:transparent;
  border:none;
  width:36px; height:36px;
  border-radius:10px;
  display:inline-grid;
  place-items:center;
  color:#e8eaed;                 /* 用 currentColor 驱动 SVG 颜色 */
  line-height:0;
}
#navbar .search-wrap .search-toggle:hover{
  background:rgba(255,255,255,.06);
}
#navbar .search-wrap .search-toggle img,
#navbar .search-wrap .search-toggle svg{
  width:20px; height:20px; display:block;
  /* 如果你的 search.svg 是黑色填充，反相成白色： */
  filter: invert(0);
}

/* 若你的 search.svg 自带白底导致“白方块”，强制透明背景 */
#navbar .search-wrap .search-toggle img{ background: transparent !important; }
/* 默认：手机 2–3 列（保持你原来的感觉） */
.grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(2, 1fr);
}

/* 平板：4 列 */
@media (min-width: 768px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

/* 窄桌面：5 列 */
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(5, 1fr); }
}

/* 宽桌面：6 列（你的诉求） */
@media (min-width: 1280px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
}

/* 卡片自适应：防止内容把格子撑爆 */
.card{ min-width: 0; }
.thumb{ aspect-ratio: 2/3; }
.wrap{ max-width: 1320px; } /* 可按美观再调，比如 1360/1440 */
/* ==== 搜索结果卡片：固定高度，不被长描述撑开 ==== */

/* 让卡片变成上下两段：上图（固定比例）+ 下信息（固定高度） */
.grid .card{
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* 防止被长英文撑宽 */
}

/* 缩略图固定 2:3（你现在就是这样，保留以统一高度） */
.grid .thumb{
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
}

/* 信息区固定高度（按你卡片字体大致 90–110px 之间可调） */
.grid .meta{
  flex: 0 0 auto;
  min-height: 96px;
  max-height: 96px;             /* ← 关键：固定高度 */
  overflow: hidden;             /* 超出直接裁掉 */
  padding: 10px 12px 12px;
}

/* 上方小行（类型/年份）单行省略，避免换行增高 */
.grid .badge{
  display: block;
  font-size: 12px;
  color: #9aa4b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 标题：单行省略 */
.grid .title{
  font-weight: 700;
  margin: 6px 0 2px;
  line-height: 1.35;
  color: #e8eaed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 描述：最多两行，超出裁掉（不撑开卡片） */
.grid .desc{
  font-size: 12px;
  color: #9aa4b2;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* ← 两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;       /* 长词也会断行 */
}
/* ===== 播放页：左右分割线 ===== */
.player-layout{ position: relative; }      /* 以防父级需要定位 */
.player-right{ position: relative; }

/* 在右侧面板的左边缘，画一条位于 24px 间隙正中间的竖线 */
.player-right::before{
  content:"";
  position:absolute;
  left:-12px;                /* 你的 grid gap 是 24px，这里取一半放到正中 */
  top:0;
  bottom:0;                  /* 让它跟随右栏高度延伸 */
  width:1px;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 12%,
      rgba(255,255,255,.10) 88%,
      rgba(255,255,255,0) 100%);
  /* 微弱发光，接近你截图效果 */
  box-shadow: 0 0 0 0 transparent, 0 0 12px rgba(0,0,0,.25) inset;
}

/* 小屏或竖屏堆叠时隐藏分割线 */
@media (max-width: 1024px){
  .player-right::before{ display:none; }
}
body.portrait .player-right::before{ display:none !important; }
/* 布局：左视频 / 右信息侧栏 */
.player-layout{
  --sidew: 420px;   /* 右栏宽度（和你原来一致） */
  --gap: 24px;      /* 两列间隙 */
  margin-top: 64px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidew);
  gap: var(--gap);
  position: relative; /* 供伪元素定位 */
}

/* 分割线：放在两列中缝（gap 的正中） */
.player-layout::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: calc(100% - var(--sidew) - (var(--gap) / 2));
  width:1px;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 12%,
      rgba(255,255,255,.10) 88%,
      rgba(255,255,255,0) 100%);
}

/* 小屏单列/竖屏时隐藏分割线 */
@media (max-width: 1024px){
  .player-layout::before{ display:none; }
}
body.portrait .player-layout::before{ display:none !important; }
.video-wrap{
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 0;          /* ← 改这里：原来是 10px */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  aspect-ratio: 16 / 9;
}

/* 竖屏样式里如果还有覆盖，确保也是 0 */
body.portrait .video-wrap{
  border-radius: 0;
}
/* === 仅作用于分页跳转栏（#pager） === */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap: nowrap;         /* 不换行，强制单行 */
  overflow-x: auto;          /* 屏幕太窄时允许横向滚动而不是换行 */
  padding-bottom: 6px;       /* 给可能出现的滚动条留点空间 */
}

.pager .pages{
  display:flex;              /* 页码区域也强制横排 */
  align-items:center;
  gap:10px;
  flex-wrap: nowrap;
}
/* 集数锁定态（>10 集且未登录） */
.ep-btn.locked{
  position: relative;
  color: #9aa4b2;
  border-style: dashed;
  cursor: not-allowed;
}
.ep-btn.locked::after{
  content: "🔒";
  position: absolute;
  right: 8px;
  font-size: 16px;
  opacity: .9;
}
/* 历史卡片：进度条 + EP 标签 */
.card .thumb { position: relative; overflow: hidden; }
.card .thumb .progress{
  position:absolute; left:8px; right:8px; bottom:8px; height:6px;
  background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden;
}
.card .thumb .progress .bar{
  height:100%; width:0; background: #ffb21e;  /* 可替换主题色 */
  transition: width .3s ease;
}
.card .thumb .ep-badge{
  position:absolute; left:8px; bottom:18px; padding:2px 6px; font-size:12px;
  color:#fff; background: rgba(0,0,0,.55); border-radius:6px;
  backdrop-filter: blur(2px);
}
/* 历史卡片进度与 EP 标签 */
.card .thumb{ position:relative; overflow:hidden; }
.card .thumb .progress{
  position:absolute; left:8px; right:8px; bottom:8px; height:6px;
  background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden;
}
.card .thumb .progress .bar{ height:100%; width:0; background:#ffb21e; transition:width .3s ease; }
.card .thumb .ep-badge{
  position:absolute; left:8px; bottom:18px; padding:2px 6px; font-size:12px;
  color:#fff; background:rgba(0,0,0,.55); border-radius:6px; backdrop-filter:blur(2px);
}
/* 历史卡片：进度条 + EP 标签 */
.card .thumb{ position:relative; overflow:hidden; }
.card .thumb .progress{
  position:absolute; left:8px; right:8px; bottom:8px; height:6px;
  background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden;
}
.card .thumb .progress .bar{ height:100%; width:0; background:#ffb21e; transition: width .3s ease; }
.card .thumb .ep-badge{
  position:absolute; left:8px; bottom:18px; padding:2px 6px; font-size:12px;
  color:#fff; background: rgba(0,0,0,.55); border-radius:6px; backdrop-filter: blur(2px);
}
/* === 统一搜索样式（任何页面都生效） === */
.search-wrap{ --h:34px; --w:280px; display:flex; flex-direction:row-reverse; align-items:center; gap:8px; }
.search-wrap .search-toggle{
  appearance:none; background:transparent; border:none;
  width:36px; height:36px; border-radius:10px;
  display:inline-grid; place-items:center; color:#fff; line-height:0;
}
.search-wrap .search-toggle:hover{ background:rgba(255,255,255,.06); }

/* 图标强制白色（无论是 <img> 还是 <svg>） */
.search-wrap .search-toggle img,
.search-wrap .search-toggle svg{
  width:20px; height:20px; display:block;
  filter: invert(1) brightness(1.2) contrast(1.1);
  background: transparent !important;
}

/* 输入框：默认收起，展开后向左拉伸 */
.search-wrap .search-form{ position:relative; }
.search-wrap .search-form input[type="search"]{
  height:var(--h); width:0; opacity:.0; pointer-events:none;
  border-radius:10px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:#e8eaed;
  padding:0 10px; transition:width .25s ease, opacity .2s ease;
}
.search-wrap.open .search-form input[type="search"]{
  width:var(--w); opacity:1; pointer-events:auto;
}
.search-wrap ::placeholder{ color:#a7b0bd; }
/* 登录和注册面板居中 */
.auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 增加按钮之间的间距 */
.auth-actions {
  display: flex;
  gap: 20px;  /* 按钮间距稍微大一点 */
  justify-content: center;
}

/* 居中标题 */
.auth-title {
  text-align: center;
  margin-bottom: 20px; /* 标题下方稍微留一点空间 */
}
/* 调整输入框宽度 */
.auth-input {
  width: 100%;  /* 使输入框充满容器，避免太宽 */
  max-width: 400px; /* 适当限制最大宽度 */
  margin-bottom: 10px; /* 调整输入框之间的间距 */
}

/* 背景虚化效果 */
.auth-modal.open .auth-mask {
  backdrop-filter: blur(8px); /* 添加虚化效果 */
  background: rgba(0, 0, 0, 0.6); /* 背景变暗 */
}

.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保在最上层 */
}

.auth-modal.open {
  display: flex;
}

/* 对话框容器 */
.auth-dialog {
  background-color: #2b2f38;
  padding: 20px;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
}

/* 调整按钮宽度 */
.auth-btn {
  width: 100%;
  max-width: 300px; /* 按钮最大宽度 */
  margin: 10px 0; /* 按钮间距 */
}
/* 背景设置为黑色 */
.auth-modal.open .auth-mask {
  backdrop-filter: blur(8px);  /* 背景虚化 */
  background: rgba(0, 0, 0, 0.8); /* 背景颜色改为黑色 */
}

/* 弹窗容器 */
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.auth-modal.open {
  display: flex;
}

/* 对话框容器 */
.auth-dialog {
  background-color: #0000;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 100%;
  color: #fff;
}

/* 输入框宽度调整 */
.auth-input {
  width: 100%;  /* 输入框充满容器 */
  max-width: 380px; /* 最大宽度调整 */
  margin-bottom: 10px; /* 间距 */
  box-sizing: border-box;
}

/* 标签调整为左对齐 */
.auth-form .auth-label {
  margin-bottom: 6px;  /* 标签间距 */
  text-align: left;    /* 左对齐 */
  font-weight: 600;    /* 字体加粗 */
}

/* 选择国家/地区和密码框宽度统一 */
#auth-register-country,
#auth-register-pw {
  max-width: 380px;  /* 最大宽度限制 */
  width: 100%;
}

/* 按钮放在同一排 */
.auth-actions {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  justify-content: flex-start;  /* 按钮左对齐 */
}

.auth-btn {
  width: 100%;  /* 按钮宽度 */
  max-width: 180px;  /* 最大宽度 */
}

/* 按钮的样式调整 */
.auth-btn.primary {
  background-color: #ff9800;
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 10px 15px;
}

.auth-btn.ghost {
  background-color: #2b2f38;
  color: #ff9800;
  border-radius: 5px;
  border: 1px solid #ff9800;
  padding: 10px 15px;
}

/* 微调选择框和密码的间距 */
#auth-register-country,
#auth-register-phone,
#auth-register-pw {
  margin-top: 5px;
  margin-bottom: 10px;
}
/* 放到全局样式里 */
.sv-locked { filter: grayscale(.2); }
.sv-lock-mask .sv-lock-tip { font-weight:600; }
/* —— 首页海报按钮最终版（强覆盖）—— */
#poster-play.poster-btn,
.poster .poster-btn {
  position: relative;
  z-index: 2;                          /* 确保在海报渐变之上 */
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 56px !important;
  padding: 0 28px !important;

  border-radius: 999px !important;     /* 胶囊形状 */
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .3px;

  /* 玻璃+品牌橙渲染，不用 color-mix，兼容性稳 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08)),
    rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);

  box-shadow:
    0 8px 24px rgba(0,0,0,.40),
    0 0 28px rgba(0,0,0,.24) !important;

  transform: translateZ(0);
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

#poster-play.poster-btn:hover,
.poster .poster-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.48),
    0 0 42px rgba(255,152,0,.40) !important;
}

#poster-play.poster-btn:active,
.poster .poster-btn:active {
  transform: translateY(0);
  box-shadow:
    0 8px 20px rgba(0,0,0,.44),
    0 0 22px rgba(255,152,0,.28) !important;
}

#poster-play.poster-btn:focus-visible,
.poster .poster-btn:focus-visible {
  outline: 2px solid rgba(255,152,0,.60);
  outline-offset: 3px;
}

/* 确保海报的渐变层不会挡到按钮点击 */
.gradient-overlay { pointer-events: none; z-index: 1; }
.poster-btn-group { position: relative; z-index: 2; }
/* ===============================
   手机端适配补丁（仅样式，无改动 JS/HTML）
   =============================== */

/* 小屏：整体排版紧凑化 */
@media (max-width: 768px){

  /* — 导航 — */
  #navbar nav{ padding:6px 12px; gap:8px; }
  #navbar .logo svg{ height:24px; }
  #navbar nav ul{ gap:10px; }
  #navbar nav ul a{ font-size:14px; }
  .nav-icon{ width:30px; height:30px; }
  .nav-icon svg{ width:18px; height:18px; }
  #searchWrap.search-wrap{ --h:30px; --w:58vw; }

  /* — 海报：避免裁切，按钮更贴手 — */
  .poster-section{ height:min(72vh, 560px); }
  /* contain 避免“半幅黑”问题；仍配合你的融黑遮罩使用 */
  #movie-poster{ object-fit:contain; object-position:center; }
  .poster{ --fade-top:clamp(30px,8%,80px); --fade-bottom:clamp(100px,30%,280px); }
  .poster .poster-btn-group{ left:14px; bottom:14px; top:auto; }
  .poster .poster-btn{ font-size:16px; padding:8px 14px; border-radius:8px; }
  .poster-section .poster-prev-btn,
  .poster-section .poster-next-btn{ font-size:32px; }

  /* — 轮播缩略条：保持一次显示 6 张以配合 visibleCount=6 — */
  .carousel-container{
    width:100vw; height:84px;
    padding:6px 10px; box-sizing:border-box;
    left:50%; transform:translateX(-50%);
  }
  .carousel{ gap:8px; }
  .carousel-item{
    /* 6 张 + 5 个 8px 间距 ≈ 正好一屏，避免 JS 逻辑错位 */
    width:14.4vw;
    aspect-ratio:16/9;
    height:auto;
    border-width:2px;
  }

  /* — 推荐网格：2 列布局 — */
  .recommend-section{ padding:12px 12px; }
  .recommend-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px 10px; padding:0;
  }
  .recommend-item{ width:auto; }
  .recommend-grid a.recommend-item .thumb img{ aspect-ratio:2/3; }
}

/* 超小屏进一步收紧 */
@media (max-width: 480px){
  #navbar nav ul a{ font-size:13px; }
  #searchWrap.search-wrap{ --w:64vw; }
  .poster-section{ height:min(66vh, 480px); }
  .recommend-header{ flex-direction:column; align-items:flex-start; gap:4px; }
}
/* ====== 手机端适配补丁 v2（修正 3 处报错，不改 JS/HTML） ====== */
@media (max-width: 768px){

  /* 导航：修正 nav.ul → nav ul */
  #navbar nav ul a{ font-size:14px; }
  .nav-icon{ width:30px; height:30px; }
  .nav-icon svg{ width:18px; height:18px; }

  /* 搜索：避免 --w/--h 被当成报错，直接覆写 input 宽度与按钮尺寸 */
  #searchWrap .search-toggle{ width:30px; height:30px; }
  #searchWrap.open .search-form input[type="search"]{ width:58vw; }

  /* 海报：防裁切 + 手指友好 */
  .poster-section{ height:min(72vh,560px); }
  #movie-poster{ object-fit:contain; object-position:center; }
  .poster{ --fade-top:clamp(30px,8%,80px); --fade-bottom:clamp(100px,30%,280px); }
  .poster .poster-btn-group{ left:14px; bottom:14px; top:auto; }
  .poster-section .poster-prev-btn,
  .poster-section .poster-next-btn{ font-size:32px; }

  /* 轮播缩略：保持一次显示 6 张，配合 visibleCount=6 */
  .carousel-container{
    width:100vw; height:84px; padding:6px 10px; box-sizing:border-box;
    left:50%; transform:translateX(-50%);
  }
  .carousel{ gap:8px; }
  .carousel-item{ width:14.4vw; aspect-ratio:16/9; height:auto; border-width:2px; }

  /* 推荐区：两列 */
  .recommend-section{ padding:12px 12px; }
  .recommend-grid{ grid-template-columns:repeat(2,1fr); gap:12px 10px; padding:0; }
  .recommend-item{ width:auto; }
  .recommend-grid a.recommend-item .thumb img{ aspect-ratio:2/3; }
} /* ← 关闭第一个 @media，避免嵌套错误 */

@media (max-width: 480px){
  #navbar nav ul a{ font-size:13px; }        /* 同样是 nav ul */
  #searchWrap.open .search-form input[type="search"]{ width:64vw; }
  .poster-section{ height:min(66vh,480px); }
  .recommend-header{ flex-direction:column; align-items:flex-start; gap:4px; }
}
/* ======= Mobile Patch v3 (仅样式) ======= */
@media (max-width: 768px){

  /* 海报：降低高度、左下角按钮 */
  .poster-section{ height: clamp(240px, 54vw, 400px); }
  #movie-poster{ object-fit: cover; } /* 填满避免上下黑边 */
  .poster{ --fade-top:clamp(16px,6%,48px); --fade-bottom:clamp(56px,18%,110px); }
  .poster .poster-btn-group{ top:auto; left:16px; bottom:16px; }
  .poster .poster-btn{ font-size:16px; padding:8px 14px; border-radius:10px; }

  /* 轮播：放到海报正下方 */
  .carousel-container{
    position: static;           /* 取消绝对定位 */
    left:auto; bottom:auto; transform:none;
    width:100%; height:84px;
    margin:8px auto 0; padding:6px 10px; box-sizing:border-box;
    justify-content:center;
  }
  .carousel{ gap:8px; }
  /* 仍维持一次 6 张缩略，兼容 visibleCount=6 的脚本计算 */
  .carousel-item{ width:14.4vw; aspect-ratio:16/9; height:auto; border-width:2px; }

  
  .recommend-item{ width:auto !important; }
  .recommend-grid a.recommend-item .thumb img{ aspect-ratio:2/3; }

  /* 搜索 / 全部短剧 / 个人中心：5 列卡片（覆盖它们各自页面内联样式的“2列”） */
  body.search-page .grid,
  body.all-page .grid,
  body.profile-page .grid{
    grid-template-columns: repeat(5, 1fr) !important;
    gap:10px 8px;
  }

  /* 个人中心：信息在上，网格在下，不再被挤 */
  body.profile-page .layout{ flex-direction: column; }
  body.profile-page .sidebar{ position: static; top:auto; width:auto; flex:none; }
  body.profile-page .content{ width:100%; }
}

/* 超小屏再稍微收一点 */
@media (max-width: 480px){
  .poster-section{ height: clamp(220px, 58vw, 360px); }
  .carousel-container{ height:78px; }
}
/* ======= Mobile Patch v4：按钮更小 + 轮播对齐修正（仅样式） ======= */
@media (max-width: 768px){

  /* ① Play 按钮更小，并保持左下角 */
  .poster .poster-btn-group{ left:12px; bottom:12px; top:auto; }
  .poster .poster-btn{
    font-size:14px;           /* 原 16 → 14 */
    padding:6px 12px;         /* 原 8x14 → 6x12 */
    border-radius:8px;
  }

  /* ② 轮播留黑/对不齐修正：与 JS 里 gap=10 对齐 + 取消置中 */
  .carousel-container{
    position: static;         /* 跟在海报下方 */
    width:100%;
    height:84px;
    margin:8px 0 0;
    padding:0;                /* 去掉左右内边距，消除边缘留黑 */
    overflow:hidden;
    display:flex; align-items:center;
    justify-content:flex-start; /* 不再居中，配合 transform 位移 */
  }
  .carousel{
    width:100%;
    gap:10px;                 /* ★ 与脚本中的 gap=10 保持一致 */
  }
  .carousel-item{
    /* 6 张 + 5 个 10px 间距 = 100%，完美铺满，无“前后留黑” */
    width:calc((100% - 50px)/6);
    aspect-ratio:16/9;
    height:auto;
  }
}

/* 超小屏再收一点按钮尺寸 */
@media (max-width: 480px){
  .poster .poster-btn{ font-size:13px; padding:6px 10px; }
}
/* ===== Mobile Patch v5（仅两处：按钮更小 + 轮播不变小） ===== */
@media (max-width: 768px){

  /* ① Play Now 更小，仍在左下角 */
  .poster .poster-btn-group{ left:12px; bottom:12px; top:auto; }
  .poster .poster-btn{
    font-size:13px;      /* 再缩一档 */
    padding:5px 10px;    /* 再缩一档 */
    border-radius:8px;
  }

  /* ② 轮播：保持满屏宽，不变小；同时去掉两侧留黑 */
  .carousel-container{
    position: relative;          /* 让 left/transform 生效 */
    width:100vw;                 /* 直接按视口宽度渲染，保证不比之前小 */
    left:50%;
    transform:translateX(-50%);  /* 居中对齐视口 */
    height:84px;
    margin:8px 0 0;
    padding:0;                   /* 不留左右内边距，避免边缘黑边 */
    overflow:hidden;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .carousel{ width:100%; gap:10px; }   /* 与脚本的 gap 对齐 */
  .carousel-item{
    /* 6 张 + 5×10px 间距 = 正好铺满一屏，不会“前看不到、后留黑” */
    width:calc((100vw - 50px)/6);
    aspect-ratio:16/9;
    height:auto;
    border-width:2px;
  }
}

@media (max-width: 480px){
  .poster .poster-btn{ font-size:12px; padding:5px 9px; } /* 超小屏再小一点 */
}
/* === Mobile：缩小海报 Play Now 按钮（仅样式覆盖） === */
@media (max-width: 768px){
  /* 位置保持左下，尺寸明显变小 */
  .poster .poster-btn-group{ left:12px; bottom:12px; top:auto; }

  /* 胶囊按钮本体 */
  #poster-play.poster-btn,
  .poster .poster-btn{
    height:40px !important;          /* 原来是 ~56px */
    padding:0 14px !important;       /* 收窄内边距 */
    font-size:13px !important;       /* 文案更小 */
    gap:.4rem !important;            /* 图标与文字间距小一点 */
    border-radius:999px !important;  /* 仍保留胶囊/毛玻璃风格 */
  }

  /* 按钮里的小三角图标一起缩小 */
  #poster-play.poster-btn svg,
  .poster .poster-btn svg{
    width:14px; height:14px;
  }
}

/* 超小屏再小一档 */
@media (max-width: 480px){
  #poster-play.poster-btn,
  .poster .poster-btn{
    height:36px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }
  #poster-play.poster-btn svg,
  .poster .poster-btn svg{
    width:12px; height:12px;
  }
}
/* ==== 首页卡片标题/副标题：单行省略，避免挤乱 ==== */
.recommend-item{ min-width:0; } /* 关键：让网格项里的文字允许缩进，否则省略号不生效 */

.movie-info{ margin-top:5px; color:#fff; font-size:14px; }

.movie-title{
  display:block;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.movie-episode{
  display:block;
  color:#aaa;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
/* ==== 首页卡片标题/副标题：多行换行+省略号（最多2行） ==== */
.recommend-item{ min-width:0; } /* 避免被网格撑爆，换行才生效 */

.movie-title,
.movie-episode{
  /* 覆盖掉之前的 nowrap */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 多行省略的关键 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* ← 想显示几行就改这里：2/3/4 */
  line-clamp: 2;

  word-break: break-word;     /* 长英文/下划线也能断开 */
  max-width: 100%;
}

/* 可选：让卡片高度更整齐（按两行字的高度预留） */
.movie-info{ min-height: 3.2em; }  /* 约=1.6em*2 行 */
@media (max-width: 768px){
  /* 首页展示区：手机 3 列 */
  .recommend-grid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap:12px 10px; padding:0 10px;
  }
  /* 可选：搜索/全部/个人中心 也改为 3 列 */
  body.search-page .grid,
  body.all-page .grid,
  body.profile-page .grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/* ===== 安全覆盖：手机端展示区改为 3 列（不影响轮播） ===== */
@media (max-width: 768px){
  /* 只改推荐展示区的网格列数 */
  .recommend-section .recommend-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* 保留原来的间距和内边距，如需更松可调下面两行 */
    gap: 10px 8px;
    padding: 0 8px;
  }
}
/* === 全部短剧页：标题两行、省略；手机端字号更小（与首页一致） === */

/* 标题：最多两行，超出省略；允许换行并断长英文 */
body.all-page .title{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     /* 想要 3 行就改成 3 */
  word-break: break-word;
}

/* 描述：确保也是两行省略（本页原本就有，兜底一下） */
body.all-page .desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 手机端：把标题/描述字号压小，风格与首页一致 */
@media (max-width: 768px){
  body.all-page .title{ font-size: 14px; line-height: 1.35; }
  body.all-page .desc { font-size: 12px; }
  body.all-page .badge{ font-size: 12px; }  /* 年份/类型那行 */
}
/* ===== 个人主页：卡片标题两行、省略；手机端 3 列 + 小字号 ===== */

/* 历史记录网格：手机改 3 列（不影响首页/全部页） */
@media (max-width: 768px){
  body.profile-page .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px 8px;
  }
}

/* 卡片标题/描述：最多 2 行，超出省略（仅个人主页） */
body.profile-page .title,
body.profile-page .movie-title{            /* 兼容你有的两种命名 */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                   /* 想显示 3 行就改这里 */
  line-clamp: 2;
  word-break: break-word;
  max-width: 100%;
}
body.profile-page .desc,
body.profile-page .movie-episode{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}

/* 手机端：字号更小，与首页展示区一致 */
@media (max-width: 768px){
  body.profile-page .title,
  body.profile-page .movie-title{ font-size:14px; line-height:1.35; }
  body.profile-page .desc,
  body.profile-page .movie-episode{ font-size:12px; }
  body.profile-page .badge{ font-size:12px; }
}

/* 头像信息卡：更紧凑的排版（不依赖具体 HTML 结构，按 id/class 兜底） */
body.profile-page #pf-card,
body.profile-page .profile-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
}
body.profile-page #pf-name{
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.profile-page #pf-id{ color: #9aa4b2; font-size: 13px; }
body.profile-page .pf-actions button{ border-radius: 10px; }
    /* ===== 播放页修复：右侧不再横向滚动 + 标题可换行 ===== */

/* 右侧面板是 grid 子项，防止内容按 max-content 撑出滚动条 */
.player-right{ min-width: 0; }  /* 关键一行 */

/* 标题：允许断词换行，长英文/下划线也能断；移动端再缩些字号 */
.player-right .title{
  white-space: normal;
  word-break: break-word;      /* 遇到超长单词/下划线串也能断 */
  overflow-wrap: anywhere;     /* 现代浏览器更友好的断行 */
}
@media (max-width: 768px){
  .player-right .title{ font-size: 20px; line-height: 1.25; }
}

/* 分页标签与集数容器：不滚动，自动换行铺满 */
.player-right .range-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: visible;
}

.player-right .ep-grid{
  display: grid;
  gap: 12px 10px;
  overflow: visible;           /* 明确不产生横向滚动条 */
  grid-template-columns: repeat(5, minmax(64px, 1fr)); /* 桌面每行 5 个 */
}
@media (max-width: 1024px){
  .player-right .ep-grid{ grid-template-columns: repeat(4, minmax(54px, 1fr)); }
}
@media (max-width: 768px){
  .player-right .ep-grid{ grid-template-columns: repeat(4, minmax(54px, 1fr)); }
}
@media (max-width: 480px){
  .player-right .ep-grid{ grid-template-columns: repeat(3, minmax(54px, 1fr)); }
}

/* 集数按钮占满单元格宽度，数字仍保持单行 */
.ep-grid .ep-btn, .ep-grid button{
  width: 100%;
  white-space: nowrap;
}
/* ===== 首页/推荐区：加大卡片间距 ===== */
.recommend-section .recommend-grid{
  /* 行距 / 列距（桌面） */
  gap: 28px 22px !important;
}

/* ===== 列表页/搜索页/个人中心：加大卡片间距 ===== */
body.all-page .grid,
body.search-page .grid,
body.profile-page .grid{
  gap: 28px 22px !important;
}

/* 移动端：适度放大但保持紧凑 */
@media (max-width: 768px){
  .recommend-section{ padding: 16px 12px; } /* 两侧留白稍微加大 */
  .recommend-section .recommend-grid{
    gap: 16px 12px !important;
  }
  body.all-page .grid,
  body.search-page .grid,
  body.profile-page .grid{
    gap: 20px 14px !important;
  }
}
/* ===== 播放页：简介/标题直接完整显示（覆盖任何 clamp/省略设置） ===== */
.player-right .title{
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.player-right .desc,
.player-right .desc.clamp{            /* 你的 <p id="desc" class="desc clamp"> 也一并覆盖 */
  display: block !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 8px 0 14px;
  color: #cbd5e1;
  line-height: 1.65;
}

/* 手机端：适度缩小字体，避免占屏过多 */
@media (max-width: 768px){
  .player-right .title{ font-size: 20px; line-height: 1.25; }
  .player-right .desc { font-size: 13px; }
}
/* === 播放页：简介永远完整显示，去掉渐变与按钮 === */
/* 1) 简介不再裁切/折叠 */
.player-right #desc,
.player-right #desc.clamp{
  display:block !important;
  overflow:visible !important;
  max-height:none !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  white-space:normal !important;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* 2) 去掉用于“淡出”的伪元素（有些主题会在 desc 或容器上画渐变） */
.player-right .desc::after,
.player-right .desc.clamp::after,
.player-right .desc-block::after{
  content:none !important;
  display:none !important;
}

/* 3) 彻底隐藏“展开/收起”按钮 */
#descToggle{ display:none !important; }

/* 4) 标题太长自动换到下一行（一起加上更顺眼） */
.player-right #title{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* ===== Auth 弹窗：按钮不换行 & 自适应宽度 ===== */
#auth-modal .auth-actions{            /* 按钮所在容器的类名按你实际写法改，以下两种都覆盖 */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;                /* 关键：不换行 */
  word-break: keep-all;               /* 英文单词不拆开 */
  width: auto !important;             /* 关键：不使用固定宽度 */
  min-width: 120px;                   /* 够放 “Create Account” */
  box-sizing: border-box;
}

/* 你的“幽灵按钮”样式（保持主题色，可按需微调） */
.auth-btn.ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #ffb54d;                     /* 和主按钮的橙色系呼应 */
}
.auth-btn.ghost:hover{
  border-color: #ffb54d;
  color: #fff;
}

/* 小屏处理：两颗按钮竖排，宽度占满 */
@media (max-width: 420px){
  #auth-modal .auth-actions{ flex-direction: column; }
  .auth-btn{ min-width: 100%; }
}

/* 若只想“点杀”这一个按钮，也可加这一行（可选） */
#auth-goto-register{ white-space: nowrap; width: auto !important; }
/* 未登录时，Profile 的分页整块隐藏 */
.profile-page.guest #pager { 
  display: none !important; 
}
/* 让缩放进入/离开都有动画 */
.recommend-item img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
  transition: transform .25s ease;   /* ← 新增：放到基础态 */
}
.recommend-item:hover img{
  transform: scale(1.05);            /* ← 保留缩放，不再重复 transition */
}