/* 星屿海API · 网关控制台专用背景层（2026-11-15）
   只铺背景，不改网关自己的组件样式：控制台用 Semi Design，
   强行改组件颜色会踩到它内部状态，这里只让 body 透出背景层。 */

html{ background:#050b10; }
body{ background:transparent !important; }
/* 让控制台的两块大底（侧边栏容器、主内容区）透出背景，卡片本身保持不透明保证可读 */
main, [class*="sidebar-wrapper"]{ background:transparent !important; }
/* 卡片给一点透光，让背后的星空透出来；只是透明度，不改尺寸与阴影 */
[class*="bg-card"]{ background:rgba(26,32,40,.84) !important; }

.xh-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1100px 760px at 16% -12%, #0a2a33 0%, rgba(10,42,51,0) 60%),
    radial-gradient(1000px 700px at 88% -6%, #0a1730 0%, rgba(10,23,48,0) 62%),
    radial-gradient(900px 620px at 50% 116%, #07222b 0%, rgba(7,34,43,0) 64%),
    linear-gradient(180deg,#050b10 0%,#060d13 50%,#04080c 100%);
}
.xh-bg .hb-a{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.42; will-change:transform; }
.xh-bg .hb-a1{ width:900px; height:900px; left:-260px; top:-320px;
  background:radial-gradient(circle at 42% 42%, rgba(24,214,206,.28), rgba(24,214,206,0) 64%);
  animation:hbdrift1 34s ease-in-out infinite alternate; }
.xh-bg .hb-a2{ width:1000px; height:1000px; right:-320px; top:-240px;
  background:radial-gradient(circle at 55% 45%, rgba(70,110,255,.22), rgba(70,110,255,0) 66%);
  animation:hbdrift2 42s ease-in-out infinite alternate; }
.xh-bg .hb-a3{ width:760px; height:760px; left:42%; top:44%;
  background:radial-gradient(circle at 50% 50%, rgba(40,170,190,.14), rgba(40,170,190,0) 68%);
  animation:hbdrift3 48s ease-in-out infinite alternate; }
@keyframes hbdrift1{ to{ transform:translate3d(80px,60px,0) scale(1.10); } }
@keyframes hbdrift2{ to{ transform:translate3d(-80px,50px,0) scale(1.08); } }
@keyframes hbdrift3{ to{ transform:translate3d(60px,-40px,0) scale(1.12); } }

.xh-bg .hb-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(108,232,236,.08) 1px, transparent 1px),
                    linear-gradient(90deg,rgba(108,232,236,.08) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 74% at 50% 40%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, transparent 92%);
  animation:hbgrid 44s linear infinite;
}
@keyframes hbgrid{ from{background-position:0 0,0 0} to{background-position:64px 64px,64px 64px} }

.xh-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.8; }
.xh-bg .hb-vignette{ position:absolute; inset:0;
  background:radial-gradient(ellipse 78% 72% at 50% 42%, rgba(0,0,0,0) 34%, rgba(2,4,8,.62) 100%); }
.xh-bg .hb-grain{ position:absolute; inset:0; opacity:.1; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.xh-bg .hb-top{ position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,255,250,.4),transparent); opacity:.55; }

@media (max-width:640px){ .xh-bg .hb-a{ filter:blur(46px); opacity:.34; } }
@media (prefers-reduced-motion:reduce){ .xh-bg .hb-a,.xh-bg .hb-grid{ animation:none !important; } .xh-bg canvas{ display:none; } }

/* 顶部品牌标：网关写死 20px，这里放大到 24px 更显眼；矢量图不糊 */
img[src*="/logo.png"], img[alt="徽标"]{
  width:24px !important; height:24px !important;
  object-fit:contain; vertical-align:middle;
}