/* ======================
   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(60px,16%,180px); --fade-bottom:clamp(160px,42%,520px); }

/* Fallback 覆盖层（上下各一段黑→透明） */
.gradient-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2; /* 低于按钮/箭头（z=5），高于图片 */
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,0)   var(--fade-top),
    rgba(0,0,0,0)   calc(100% - var(--fade-bottom)),
    rgba(0,0,0,.85) 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; }