/* ==========================================================================
   MB01 · Design Token（全端共享）
   蓝色深色梦幻 / 星空质感
   本文件为底座：变量 + 重置 + 排版 + 星空背景层 + 通用工具类
   后台 admin-theme.css、安装 install.css 复制同一份 :root 变量块
   ========================================================================== */

:root{
  /* 背景层 */
  --bg-space:    #050816;   /* 深空黑蓝，页面底色 */
  --bg-deep:     #0a0e27;   /* 深蓝，区块底色 */
  --bg-panel:    rgba(255,255,255,0.05);  /* 玻璃面板 */
  --bg-elevate:  #111a3a;   /* 卡片/表格行，对比更强 */

  /* 主色 / 强调 */
  --c-primary:   #3b82f6;   /* 电光蓝 */
  --c-cyan:      #22d3ee;   /* 青蓝 */
  --c-violet:    #8b5cf6;   /* 紫蓝 */
  --grad-main:   linear-gradient(135deg,#3b82f6 0%,#22d3ee 50%,#8b5cf6 100%);

  /* 文本 */
  --t-primary:   #e2e8f0;
  --t-secondary: #94a3b8;
  --t-muted:     #64748b;
  --t-ink:       #f1f5f9;

  /* 描边 / 发光 / 状态 */
  --line:        rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --glow:        0 0 24px rgba(59,130,246,0.45);
  --ok:          #34d399;
  --warn:        #fbbf24;
  --err:         #f87171;

  /* 间距 / 圆角 */
  --radius:      14px;
  --radius-sm:   10px;
  --gap:         20px;
  --container:   1200px;
  --pad-x:       clamp(14px,3vw,24px);   /* 所有容器的左右内边距 */

  /* 布局基准（统一各页栅格，避免每页各写一套） */
  --sidebar:     300px;   /* 两栏布局的侧栏宽度 */
  --side-uc:     260px;   /* 会员中心侧栏（菜单项较长） */
  --card-min:    156px;   /* 影片卡最小宽度，决定网格列数 */
  --header-h:    64px;    /* 固定导航高度，供各页让位与吸附偏移使用 */

  /* 统一断点：1200 / 992 / 768 / 560 */

  /* 字体 */
  --font-cn: "PingFang SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-tech: "Rajdhani","Orbitron",var(--font-cn);

  /* 层级 */
  --z-bg: 0; --z-content: 1; --z-nav: 900; --z-drawer: 950; --z-top: 1000;
}

/* ---------- 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg-space);
  color:var(--t-primary);
  font-family:var(--font-cn);
  font-size:14px;
  line-height:1.6;
  letter-spacing:.2px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; transition:color .25s ease; }
a:hover{ color:var(--c-cyan); }
img{ max-width:100%; border:0; vertical-align:middle; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:rgba(59,130,246,.4); color:#fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--c-primary),var(--c-violet));
  border-radius:999px; border:2px solid var(--bg-space);
}
::-webkit-scrollbar-thumb:hover{ background:var(--c-cyan); }

/* ---------- 星空背景层（全局 CSS 星点打底，零 JS 负担） ---------- */
.mb-space{
  position:fixed; inset:0; z-index:var(--z-bg);
  pointer-events:none; overflow:hidden;
}
/* 星云光晕 */
.mb-space::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(50% 40% at 18% 12%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(45% 35% at 82% 25%, rgba(139,92,246,.20), transparent 70%),
    radial-gradient(60% 45% at 50% 100%, rgba(34,211,238,.14), transparent 70%);
  filter:blur(10px);
  animation:mb-nebula 26s ease-in-out infinite alternate;
}
/* 三层星点：近大远小、缓慢漂移 */
.mb-space::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 20%, rgba(255,255,255,.90) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 65%, rgba(190,225,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.70) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 72% 48%, rgba(200,230,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 42% 88%, rgba(170,210,255,.70) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 45%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 63% 72%, rgba(200,225,255,.70) 50%, transparent 51%);
  background-size:520px 520px, 380px 380px, 640px 640px, 460px 460px, 700px 700px, 420px 420px, 560px 560px, 340px 340px;
  animation:mb-twinkle 7s ease-in-out infinite alternate;
}
.mb-space__grid{
  position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
}
@keyframes mb-nebula{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(-2%,1.5%,0) scale(1.06);} }
@keyframes mb-twinkle{ from{ opacity:.55; } to{ opacity:1; } }

/* 内容层置于星空之上 */
.mb-page{ position:relative; z-index:var(--z-content); }

/* ---------- 排版 ---------- */
.mb-h1{ font-size:clamp(26px,3.4vw,42px); font-weight:700; color:var(--t-ink); letter-spacing:.5px; }
.mb-h2{ font-size:clamp(20px,2.2vw,26px); font-weight:600; color:var(--t-ink); }
.mb-h3{ font-size:16px; font-weight:600; color:var(--t-ink); }
.mb-text{ color:var(--t-secondary); }
.mb-muted{ color:var(--t-muted); }

/* 渐变文字（标题/数字/Logo） */
.mb-gradient-text{
  background:var(--grad-main);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.mb-num{ font-family:var(--font-tech); font-variant-numeric:tabular-nums; letter-spacing:1px; }

/* 渐变标题装饰线 */
.mb-underline{
  position:relative; display:inline-block; padding-bottom:8px;
}
.mb-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:56px;
  border-radius:2px; background:var(--grad-main); box-shadow:var(--glow);
}

/* 多行截断 */
.mb-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.mb-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mb-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- 容器 / 栅格 ---------- */
.mb-container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--pad-x);
}
.mb-container--wide{ max-width:1440px; }
.mb-row{ display:flex; gap:var(--gap); flex-wrap:wrap; }
.mb-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mb-col{ flex:1 1 260px; min-width:0; }

/* ---------- 通用工具类 ---------- */
.mb-mt{ margin-top:var(--gap); } .mb-mt-lg{ margin-top:calc(var(--gap)*2); }
.mb-mb{ margin-bottom:var(--gap); } .mb-mb-lg{ margin-bottom:calc(var(--gap)*2); }
.mb-center{ text-align:center; }
.mb-hide{ display:none !important; }
.mb-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 焦点可见（可访问性） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--c-cyan); outline-offset:2px;
}

/* 滚动渐显（由 ui.js 添加 is-in） */
.mb-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.mb-reveal.is-in{ opacity:1; transform:none; }

/* ---------- 响应式（统一断点 1200 / 992 / 768 / 560） ---------- */
@media (max-width:1200px){
  :root{ --card-min:148px; --sidebar:272px; --side-uc:240px; }
}
@media (max-width:992px){
  :root{
    --container:100%; --gap:16px; --card-min:140px;
    --sidebar:248px; --side-uc:222px; --header-h:58px;
  }
}
@media (max-width:768px){ :root{ --card-min:132px; } }
@media (max-width:560px){
  body{ font-size:13.5px; }
  :root{ --radius:12px; --radius-sm:9px; --gap:12px; --pad-x:14px; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce){
  .mb-space::before,.mb-space::after{ animation:none !important; }
  .mb-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
}