:root{
  --overlay-opacity:.28;
  --text:#fff;
  --muted:rgba(255,255,255,.85);
  --panel:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.28);
  --blue:#2d6cff;
  --pink:#ff4fa0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:#171425;
  color:var(--text);
  font-size:16px;
  line-height:1.6;
}

/* 背景 */
.bg-scene{position:relative}
.bg-layer{
  position:fixed;inset:0;z-index:-4;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-attachment:var(--bg-attachment,fixed);
  transition:opacity .8s ease;
}
#bg-layer-a{opacity:1}
#bg-layer-b{opacity:0}
#bg-particles{position:fixed;inset:0;z-index:-3;pointer-events:none}
#bg-dots{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.10),transparent 30%),
    radial-gradient(circle at 70% 30%,rgba(255,255,255,.08),transparent 28%),
    radial-gradient(circle at 40% 70%,rgba(255,255,255,.06),transparent 26%);
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(24,16,34,var(--overlay-opacity));
}

/* 布局 */
.container{width:min(1280px,92vw);margin:0 auto}
.main-space{padding:14px 0 24px}

/* 顶栏 */
.glass-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(10px);
  background:rgba(24,16,35,.24);
  border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.brand-logo{width:32px;height:32px;object-fit:contain}
.brand h1{margin:0;font-size:16px;font-weight:800}

.top-nav{display:flex;gap:10px}
.top-nav a{
  color:#fff;text-decoration:none;
  font-size:14px;padding:6px 10px;border-radius:10px;
  background:rgba(255,255,255,.14);
}
.top-nav a:hover{background:rgba(255,255,255,.22)}

/* 面板 */
.glass-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  backdrop-filter:blur(10px);
}
.p-16{padding:14px}
.mb-12{margin-bottom:12px}

/* 搜索 */
.search-row-wrap{margin-bottom:12px}
.search-row{padding:12px}
.search-box-large{display:flex;gap:10px}
.search-box-large input{
  flex:1;height:44px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.20);
  color:#fff;font-size:16px;padding:0 14px;outline:none;
}
.search-box-large input::placeholder{color:rgba(255,255,255,.76)}
.search-box-large button{
  border:0;height:44px;padding:0 16px;border-radius:999px;
  background:#fff;color:var(--pink);
  font-size:16px;font-weight:800;cursor:pointer;
}

/* tabs */
.tabs-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tab-btn{
  border:0;border-radius:10px;padding:7px 12px;cursor:pointer;
  background:rgba(255,255,255,.28);color:#fff;
  font-size:16px;font-weight:800;
}
.tab-btn.active{background:#fff;color:var(--blue)}
.panel-h3{margin:4px 0 6px;font-size:16px;font-weight:800}
.panel-p{margin:0;font-size:14px;color:var(--muted)}

/* 标题 */
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title-row h2{margin:0;font-size:16px;font-weight:800}
.pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.16);
  border-radius:999px;
  padding:5px 12px;
  font-size:14px;
}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;border-radius:12px;padding:6px 12px;
  font-size:12px;font-weight:800;
}
.btn-secondary{background:#fff;color:var(--pink)}
.btn-blue{background:var(--blue);color:#fff}
.btn-whitepink{background:#fff;color:var(--pink)}

/* 跑马灯（JS 控制） */
.film-wrap{overflow:hidden;width:100%}
.film-marquee{
  display:flex;
  gap:12px;
  width:max-content;
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* <3 时自动静止（JS 会加 is-static） */
.film-marquee.is-static{
  transform:translate3d(0,0,0) !important;
}

/* 卡片 */
.film-card{
  flex:0 0 260px;min-width:260px;height:180px;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(135deg,#0e1a3d,#0a142f);
}
.film-link{
  position:relative;display:block;width:100%;height:100%;
  color:#fff;text-decoration:none;
  background-size:cover;background-position:center;
}
.film-mask{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,.12))}
.film-info{position:absolute;left:10px;right:10px;bottom:8px;z-index:2}
.film-info h3{margin:0 0 4px;font-size:14px;line-height:1.35;font-weight:800}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;line-height:1.35;color:rgba(255,255,255,.92)}
.no-image .film-link{background:linear-gradient(135deg,#0f1f4a,#091125)}
.no-image-info{top:10px;bottom:auto}

/* 资源导航 */
.nav-grid{display:grid;grid-template-columns:1fr;gap:10px}
.nav-card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.10);
  border-radius:14px;padding:12px;
}
.nav-card h3{margin:0 0 6px;font-size:16px;font-weight:800}
.nav-card p{margin:0 0 8px;font-size:14px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:900px){
  .top-nav{display:none}
  .container{width:94vw}
  .film-card{flex-basis:220px;min-width:220px;height:160px}
}

/* ===== Global sparkles ===== */
#sparkles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* 背景层之上，正文之下 */
  overflow: hidden;
}
.spark{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 8px rgba(255,255,255,.7);
  animation: twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
  opacity: .35;
}
@keyframes twinkle{
  0%,100%{ transform: scale(.7); opacity: .2; }
  50%{ transform: scale(1.3); opacity: .95; }
}

.header-inner {
  position: relative;  /* 加这个确保绝对定位生效 */
  display: flex;
  align-items: center;
  min-height: 64px; /* 建议保留或按需设置 */
}

.center-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 2;
  text-align: center;
}
.top-nav {
  margin-left: auto;
  display: flex;
  gap: 10px;
}