/* =============================================================
   哪吒监控 · 自定义美化样式  (CHARMVPS)
   注入方式: nginx sub_filter -> <link href="/nezha-custom/beautify.css">
   作用范围: 概览页 + 服务器详情页, 兼容明/暗色主题
   仅涉及视觉属性(圆角/边框/阴影/渐变/悬停), 不改动布局结构
   如需还原: 删除本文件或移除 nginx 注入即可
   ============================================================= */

:root {
  /* 统一强调色与圆角(带回退值, 防止主题未定义变量) */
  --nz-accent: var(--primary, 217 91% 60%);
  --nz-radius: 14px;
  --nz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. 卡片统一质感(概览卡 / 详情指标卡 / 统计卡) ---------- */
.server-charts > *,
.server-card-list > *,
.server-inline-list > *,
.server-overview > * {
  border-radius: var(--nz-radius) !important;
  border: 1px solid hsl(var(--border) / 0.7) !important;
  background-image: linear-gradient(
    180deg,
    hsl(var(--card) / 0.35),
    hsl(var(--card) / 0)
  ) !important;
  box-shadow:
    0 1px 2px hsl(0 0% 0% / 0.06),
    0 8px 24px -12px hsl(0 0% 0% / 0.35) !important;
  /* 磨砂玻璃: 在星空壁纸上更清晰、更有质感 */
  background-color: hsl(var(--card) / 0.62) !important;
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  transition:
    transform 0.35s var(--nz-ease),
    box-shadow 0.35s var(--nz-ease),
    border-color 0.35s var(--nz-ease) !important;
  will-change: transform;
}

/* 悬停: 轻微上浮 + 强调色描边 + 阴影加深 */
.server-charts > *:hover,
.server-card-list > *:hover,
.server-inline-list > *:hover,
.server-overview > *:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--nz-accent) / 0.55) !important;
  box-shadow:
    0 2px 4px hsl(0 0% 0% / 0.08),
    0 18px 40px -16px hsl(var(--nz-accent) / 0.35) !important;
}

/* ---------- 2. 详情页两个面板(网络在上 / 详情在下) ---------- */
.nz-panel {
  position: relative;
  animation: nz-fade-up 0.5s var(--nz-ease) both;
}
.nz-panel-detail { animation-delay: 0.06s; }

/* 面板标题「网络」「详情」: 按用户要求隐藏, 布局更简洁
   (两个面板本身已足够区分, 不再需要文字标签) */
.nz-panel-title {
  display: none !important;
}

@keyframes nz-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3. 详情页顶部信息卡 & 服务器名 ---------- */
.server-name {
  background: linear-gradient(
    92deg,
    hsl(var(--foreground)),
    hsl(var(--nz-accent) / 0.95)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 4. 概览四项统计卡 ----------
   关键: 不能裁剪 —— 「网络」卡右上角的装饰小人图是故意探出卡片边缘的,
   若 overflow:hidden 会把它截断显示不全 */
.server-overview > * {
  overflow: visible !important;
  position: relative;
}

/* ---------- 5. 分组切换 / 控件行: 圆角与过渡统一 ---------- */
.server-group button,
.server-overview-controls button {
  transition: all 0.25s var(--nz-ease) !important;
}

/* ---------- 6. 页脚淡化 ---------- */
.server-footer { opacity: 0.85; }

/* ---------- 7. 全局: 滚动条与选中色 ---------- */
* { scrollbar-width: thin; }
::selection {
  background: hsl(var(--nz-accent) / 0.28);
}

/* ---------- 8. 星空夜森林 壁纸背景 ----------
   壁纸铺在 body(带可读性遮罩); 容器透明化让其透出;
   动态星空 canvas 在 #nz-fx(z-index:-1), 内容之下 */
html {
  background-color: #0a0e16 !important;   /* 加载前/透出处的深色兜底, 避免白闪 */
}
body {
  background:
    linear-gradient(180deg,
      rgba(8, 11, 20, 0.50) 0%,
      rgba(8, 11, 20, 0.58) 55%,
      rgba(6, 9, 16, 0.78) 100%),
    url("/nezha-custom/wallpaper.jpg?v=2") center center / cover no-repeat fixed !important;
  min-height: 100vh;
}
/* 让应用容器透明, 露出壁纸 (卡片自身仍有磨砂底) */
#root,
#root > div,
.header-top {
  background-color: transparent !important;
}
/* 动态元素层 */
#nz-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- 9. 去掉头部「哪吒监控」描述文字 + 其前竖分隔线 ----------
   原为: logo + 站名 + 竖线 + <p opacity-40>哪吒监控</p>
   (同时已通过注入 window.CustomDesc=" " 从源头置空, 此处双保险) */
.header-top > section:first-child > p {
  display: none !important;
}
.header-top > section:first-child > .w-px {
  display: none !important;
}

/* ---------- 10. 页脚: 整条隐藏 ----------
   去掉 版权(©2020-2026 Nezha)、主题署名(主题-nezha-dash)、以及 Ctrl K 提示 */
.server-footer {
  display: none !important;
}