/* ============================================================
   SHZK V2 设计令牌 —— 深邃科技风（品牌蓝 #008FD7）
   ============================================================ */
:root{
  /* 底色 / 抬升面 */
  --bg-0:#070B12;  --bg-1:#0B1220;  --bg-2:#101A2B;  --bg-3:#17243B;
  --bg-glass:rgba(16,26,43,.72);
  /* 品牌 */
  --brand:#008FD7;  --brand-hi:#2EAEEC;  --brand-2:#19C2C8;
  --brand-deep:#05609C;
  --brand-soft:rgba(0,143,215,.12);
  --brand-line:rgba(46,174,236,.32);
  /* 文字 */
  --t1:#EAF2FA;  --t2:#9DB2CA;  --t3:#5E7388;
  /* 状态（仅用于状态） */
  --ok:#2FD08C;  --ok-soft:rgba(47,208,140,.13);
  --warn:#F5A524; --warn-soft:rgba(245,165,36,.13);
  --alarm:#FF7A45; --crit:#FF4060; --crit-soft:rgba(255,64,96,.13);
  --info:#38A1FF;
  /* 发丝边 / 阴影 / 发光 */
  --line:rgba(130,170,215,.11);
  --line-2:rgba(130,170,215,.20);
  --sh-1:0 10px 30px rgba(0,0,0,.40);
  --sh-2:0 18px 50px rgba(0,0,0,.50);
  --glow-brand:0 0 0 1px rgba(46,174,236,.14),0 0 36px rgba(0,143,215,.16);
  /* 圆角 / 间距 / 尺寸 */
  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --side-w:236px;
  /* 字体 */
  --f-sans:"IBM Plex Sans","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --f-display:"Barlow Condensed","IBM Plex Sans","PingFang SC",sans-serif;
  /* 动效 */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f-sans);
  background:var(--bg-0);
  color:var(--t1);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* 背景：细网格 + 两团品牌光晕 */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background-image:
    linear-gradient(rgba(130,170,215,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,170,215,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 100%);
}
body::after{
  background:
    radial-gradient(820px 480px at 12% -8%,rgba(0,143,215,.15),transparent 62%),
    radial-gradient(720px 420px at 100% 108%,rgba(25,194,200,.09),transparent 60%);
}
#root{position:relative;z-index:1;height:100%}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(130,170,215,.18);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(130,170,215,.32)}
::-webkit-scrollbar-track{background:transparent}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.hidden{display:none !important}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blinkDot{0%,100%{box-shadow:0 0 0 0 rgba(255,64,96,.5)}50%{box-shadow:0 0 0 6px rgba(255,64,96,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeUp .45s var(--ease) both}