/* ============================================================
   云界光年 C端 · 科幻氛围增强层 (2026-08-17)
   纯 CSS，独立于 components.css；整体删除本文件即回退原样式。
   原则：保持浅色玻璃面板 + 深色文字可读，仅在「四周氛围 / 辉光 / 动效」上做文章。
   安全：不改动任何 DOM 结构、路由、后端；动画均尊重 prefers-reduced-motion。
   ============================================================ */
:root{
  --sc-teal:#12BCA9;
  --sc-teal-d:#0d9488;
  --sc-cyan:#22d3ee;
  --sc-blue:#3b82f6;
}

/* ---------- 背景层：固定全屏，承载浅色基底 + 极光 + 透视网格 ---------- */
.scifi-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(18,188,169,0.16), transparent 60%),
    radial-gradient( 960px 560px at 92%   6%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(1200px 700px at 50% 116%, rgba(59,130,246,0.11), transparent 60%),
    linear-gradient(180deg, #eef4f8 0%, #f1f7fa 46%, #e9f3f5 100%);
}
/* 漂移极光球 */
.scifi-bg::before{
  content:''; position:absolute; inset:-15%;
  background:
    radial-gradient(560px 380px at 18% 22%, rgba(18,188,169,0.20), transparent 62%),
    radial-gradient(520px 360px at 82% 30%, rgba(34,211,238,0.16), transparent 62%),
    radial-gradient(640px 440px at 62% 86%, rgba(59,130,246,0.13), transparent 62%);
  filter: blur(22px);
  animation: scifiAurora 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
/* 透视科技网格 */
.scifi-bg::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(18,188,169,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,188,169,0.05) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 28%, #000 0%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 28%, #000 0%, transparent 78%);
  animation: scifiGrid 26s linear infinite;
  will-change: background-position;
}
@keyframes scifiAurora{
  0%  { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2.5%,-2%,0) scale(1.08); }
  100%{ transform: translate3d(-2%,2%,0) scale(1.04); }
}
@keyframes scifiGrid{ from{background-position:0 0,0 0} to{background-position:46px 46px,46px 46px} }

/* 让 .c-layout 透出背景层（自身不再铺底色） */
.c-layout{ background: transparent !important; }

/* ---------- 顶栏：更强玻璃 + 底部能量流光 ---------- */
.c-topbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74)) !important;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(18,188,169,0.30) !important;
  box-shadow: 0 2px 26px rgba(18,188,169,0.16), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  position: sticky; top:0; z-index:100;
}
.c-topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--sc-teal), var(--sc-cyan), var(--sc-teal), transparent);
  background-size: 220% 100%;
  animation: scifiFlow 4.5s linear infinite;
  opacity:.85;
}
@keyframes scifiFlow{ from{background-position:0% 0} to{background-position:220% 0} }

/* ---------- 品牌图标：旋转光环 + 脉冲辉光 ---------- */
.c-brand .brand-icon{ position:relative; overflow:visible; animation: scifiPulse 3.2s ease-in-out infinite; }
.c-brand .brand-icon::after{
  content:''; position:absolute; inset:-5px; border-radius:12px;
  background: conic-gradient(from 0deg, var(--sc-teal), var(--sc-cyan), var(--sc-blue), var(--sc-teal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:2px; opacity:.55; animation: scifiSpin 6s linear infinite;
}
@keyframes scifiSpin{ to{ transform: rotate(360deg); } }
@keyframes scifiPulse{
  0%,100%{ box-shadow:0 2px 12px rgba(18,188,169,0.30); }
  50%    { box-shadow:0 2px 22px rgba(18,188,169,0.55); }
}

/* ---------- 顶栏导航项：悬浮抬升 + 流光下划线 ---------- */
.c-nav-item{ transition: all .22s cubic-bezier(.2,.7,.3,1); }
.c-nav-item:hover{ transform: translateY(-1px); box-shadow:0 4px 14px rgba(18,188,169,0.18); }
.c-nav-item.active{
  background: linear-gradient(135deg, rgba(18,188,169,0.16), rgba(34,211,238,0.12)) !important;
  color: var(--sc-teal-d) !important;
  box-shadow: 0 4px 16px rgba(18,188,169,0.22), inset 0 0 0 1px rgba(18,188,169,0.18);
}
.c-nav-item.active::after{
  height:3px !important; left:14px; right:14px; border-radius:3px;
  background: linear-gradient(90deg, var(--sc-teal), var(--sc-cyan)) !important;
  box-shadow:0 0 8px rgba(18,188,169,0.6);
}

/* ---------- 侧边栏：更强玻璃 ---------- */
.c-sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.62)) !important;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-right: 1px solid rgba(18,188,169,0.22) !important;
  box-shadow: 2px 0 22px rgba(18,188,169,0.08);
}
/* 侧栏激活项：渐变底 + 左侧流光条 */
.c-sb-item{ transition: all .2s cubic-bezier(.2,.7,.3,1); }
.c-sb-item:hover{ transform: translateX(2px); box-shadow:0 3px 12px rgba(18,188,169,0.12); }
.c-sb-item.active{
  background: linear-gradient(90deg, rgba(18,188,169,0.16), rgba(34,211,238,0.07)) !important;
  color: var(--sc-teal-d) !important; font-weight:600;
  border-left:3px solid transparent !important;
  border-image: linear-gradient(180deg, var(--sc-teal), var(--sc-cyan)) 1 !important;
  box-shadow: inset 0 0 0 1px rgba(18,188,169,0.10), 0 2px 12px rgba(18,188,169,0.14);
}
/* 父级（帮助中心）展开态 */
.c-sb-parent.open{ color: var(--sc-teal-d) !important; }

/* ---------- 卡片：顶部高光线 + 悬浮辉光 ---------- */
.c-layout .card{
  border:1px solid rgba(18,188,169,0.14) !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 8px rgba(16,24,42,0.05), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  position:relative; overflow:hidden;
}
.c-layout .card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(18,188,169,0.7), transparent);
  opacity:.6;
}
.c-layout .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(16,24,42,0.10), inset 0 0 0 1px rgba(18,188,169,0.22), 0 0 22px rgba(18,188,169,0.10) !important;
}

/* ---------- 统计卡 / 快捷项：悬浮辉光环 ---------- */
.c-layout .stat-card:hover{ box-shadow: 0 14px 34px rgba(16,24,42,0.10), 0 0 22px rgba(18,188,169,0.14) !important; }
.c-layout .quick-item:hover{ box-shadow: 0 10px 26px rgba(16,24,42,0.08), 0 0 18px rgba(18,188,169,0.12) !important; }

/* ---------- 主按钮：流光辉光 ---------- */
.c-layout .btn-primary{
  background: linear-gradient(135deg, #14b8a6, #12BCA9) !important;
  box-shadow: 0 6px 18px rgba(18,188,169,0.30) !important;
  transition: all .2s;
}
.c-layout .btn-primary:hover{ box-shadow: 0 8px 26px rgba(18,188,169,0.45) !important; transform: translateY(-1px); }

/* ---------- 页面入场动画（goto 时切换 .page-in 触发） ---------- */
#page-content.page-in{ animation: pageIn .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(10px); filter: blur(2px); }
  to  { opacity:1; transform: translateY(0);    filter: blur(0); }
}

/* ---------- 降低动态偏好：关闭动画，保留静态视觉 ---------- */
@media (prefers-reduced-motion: reduce){
  .scifi-bg::before, .scifi-bg::after, .c-topbar::after,
  .c-brand .brand-icon, .c-brand .brand-icon::after,
  #page-content.page-in{ animation: none !important; }
}