:root{
	--logo-size: min(20vw, 18px); /* 中央大字尺寸 */
    --bg:#06070a;
    --grid:#0b1020;
    --neon1:#00fff0;
    --neon2:##00b3ff;
    --neon3:#7afcff;
    --scan:#1affff20;
    --glow: 0 0 4px var(--neon1), 0 0 9px var(--neon2), 0 0 12px var(--neon3);
  }
  *{box-sizing:border-box}
  html,body{min-height: 100%;background:var(--bg);margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
  /* 赛博网格背景 */
  .grid{
    position:fixed; inset:0; pointer-events:none;
    background:
      radial-gradient(1200px 700px at 50% 60%, #0a1224 0%, transparent 60%),
      linear-gradient(transparent 95%, #0a0d18 0) ,
      repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 42px),
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 42px);
    mix-blend-mode:screen; opacity:.7
  }

  /* 中央容器 */
  .wrap{
    position:relative; display:grid; place-items:center; height:100%;
    overflow:hidden;
  }
  /* logo文字 */
  .logo{
    position:relative;
    font-weight:20;
    font-stretch:ultra-expanded;
    letter-spacing:.08em;
    font-size: var(--logo-size);
    line-height:1;
    color:transparent;
    -webkit-text-stroke: 2px var(--neon2);
    text-shadow: var(--glow);
    filter: drop-shadow(0 0 3px #00d9ff44);
    user-select:none;
    transform: translateZ(0);
  }
  .brand .logo{
  display: grid;                 /* 或用 display:flex; align/justify:center */
  place-items: center;           /* 水平+垂直居中 */
  width: 36px;                   /* 徽标宽 */
  height: 36px;                  /* 徽标高 */
  border-radius: 12px;           /* 圆角 */
  margin: 0; padding: 0;         /* 去内边距 */
  line-height: 1;                /* 防止行高影响 */
  letter-spacing: 0;             /* 取消额外字距（可按需） */

  /* 你自己的蓝色背景，可替换为现有渐变 */
  background: linear-gradient(180deg, #42c6ff, #0a74ff);
  box-shadow: 0 6px 16px rgba(10,116,255,.35);
  color:#fff;                 /* 文本本体设为白色 */
  font-size: 20px;               /* HS 字号，按需调 */
  font-weight: 900;
}
.brand .logo::before{
  color:#fff;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
}

.brand .logo::before,
.brand .logo::after{
  display: grid;
  place-items: center;
  inset: 0;                      /* 保持铺满容器 */
  text-align: center;
}
   /* 细微景深漂浮 */
  .float{ animation: float 6s ease-in-out infinite }
  @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
  /* 填充渐变与动感扫描线（用伪元素叠加） */
  .logo::before{
    content:attr(data-text);
    position:absolute; inset:0; text-align:center;
    background:linear-gradient(120deg, #001014 0%, #012a35 35%, #002b41 70%, #013245 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter: drop-shadow(0 0 6px #00eaff55);
  }
  .logo::after{
    content:attr(data-text);
    position:absolute; inset:0; text-align:center; color:transparent;
    -webkit-text-stroke: 4px #00fff533;
    mix-blend-mode:screen;
    mask:
      linear-gradient(#0000 0%, #000 45% 55%, #0000 100%),
      repeating-linear-gradient(0deg, #000 0 2px, #0000 2px 4px);
    animation: scan 3.2s linear infinite;
  }
  @keyframes scan{
    0%{ mask-position:0 120% }
    100%{ mask-position:0 -20% }
  }
  .hint{
    position:fixed; left:1rem; bottom:1rem; color:#8fa; font-size:12px; opacity:.6;
    background:#0b1322; border:1px solid #0f2a3a; padding:.4rem .6rem; border-radius:8px;
    backdrop-filter: blur(4px);
  }
  /* Canvas 层 */
  canvas#fx{
   position:fixed; inset:0; z-index:0; filter:contrast(115%) saturate(110%);
  }
  /* 将前景置于画布上层 */
  .wrap, .grid, .hint{ position:relative; z-index:9999; }