/* ============================================================
   NAS 监控图表浅色主题彩色渐变
   通过 custom.js 为各卡片添加标识类：
   nas-cpu / nas-memory / nas-temp / nas-disk
   深色主题保持原有 slate 风格不变
   ============================================================ */
/* ---- NAS CPU 使用率：蓝色 #3b82f6 ---- */
html:not(.dark) .nas-cpu .bg-linear-to-b {
  --tw-gradient-from: rgb(59 130 246 / 0.45) !important;
  --tw-gradient-to: rgb(59 130 246 / 0.08) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html:not(.dark) .nas-cpu .border-t-theme-500 {
  border-top-color: rgb(59 130 246) !important;
}
html:not(.dark) .nas-cpu .bg-linear-to-br {
  --tw-gradient-from: rgb(59 130 246 / 0.3) !important;
  --tw-gradient-to: rgb(37 99 235 / 0.1) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* ---- NAS 内存使用率：绿色 #22c55e ---- */
html:not(.dark) .nas-memory .bg-linear-to-b {
  --tw-gradient-from: rgb(34 197 94 / 0.45) !important;
  --tw-gradient-to: rgb(34 197 94 / 0.08) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html:not(.dark) .nas-memory .border-t-theme-500 {
  border-top-color: rgb(34 197 94) !important;
}
html:not(.dark) .nas-memory .bg-linear-to-br {
  --tw-gradient-from: rgb(34 197 94 / 0.3) !important;
  --tw-gradient-to: rgb(22 163 74 / 0.1) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* ---- NAS CPU 温度：橙色 #f97316 ---- */
html:not(.dark) .nas-temp .bg-linear-to-b {
  --tw-gradient-from: rgb(249 115 22 / 0.45) !important;
  --tw-gradient-to: rgb(249 115 22 / 0.08) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html:not(.dark) .nas-temp .border-t-theme-500 {
  border-top-color: rgb(249 115 22) !important;
}
html:not(.dark) .nas-temp .bg-linear-to-br {
  --tw-gradient-from: rgb(249 115 22 / 0.3) !important;
  --tw-gradient-to: rgb(234 88 12 / 0.1) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* ---- NAS 磁盘 I/O：青色 #14b8a6 ---- */
html:not(.dark) .nas-disk .bg-linear-to-b {
  --tw-gradient-from: rgb(20 184 166 / 0.45) !important;
  --tw-gradient-to: rgb(20 184 166 / 0.08) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html:not(.dark) .nas-disk .border-t-theme-500 {
  border-top-color: rgb(20 184 166) !important;
}
html:not(.dark) .nas-disk .bg-linear-to-br {
  --tw-gradient-from: rgb(20 184 166 / 0.3) !important;
  --tw-gradient-to: rgb(13 148 136 / 0.1) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ============================================================
   界面美化增强 v2（2026-09-23）
   基于真实 DOM 类名：ul.services-list / .services-group / h2.service-group-name
   卡片质感 / 悬浮动效 / 分组标题色条 / 渐变背景
   ============================================================ */

/* ---- 页面背景：壁纸模式（当前使用：壁纸.png） ---- */
html.dark body,
html.dark #__next,
html.dark #page_wrapper,
html:not(.dark) body,
html:not(.dark) #__next,
html:not(.dark) #page_wrapper {
  background: linear-gradient(rgb(11 17 32 / 0.35), rgb(11 17 32 / 0.35)), url('/icons/wallpapers/bizhi.png') center / cover no-repeat fixed !important;
}

/* ---- 服务与书签卡片：大圆角 + 柔和阴影 + 平滑过渡 ---- */
ul.services-list > li,
.bookmark-group li {
  border-radius: 14px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
html.dark ul.services-list > li,
html.dark .bookmark-group li {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.30) !important;
}
html:not(.dark) ul.services-list > li,
html:not(.dark) .bookmark-group li {
  box-shadow: 0 2px 10px rgb(15 23 42 / 0.08) !important;
}

/* ---- 悬浮动效：卡片上浮 + 边框泛蓝 + 图标放大 ---- */
ul.services-list > li:hover,
.bookmark-group li:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(56 189 248 / 0.5) !important;
}
html.dark ul.services-list > li:hover,
html.dark .bookmark-group li:hover {
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.45) !important;
}
html:not(.dark) ul.services-list > li:hover,
html:not(.dark) .bookmark-group li:hover {
  box-shadow: 0 8px 22px rgb(15 23 42 / 0.15) !important;
}
ul.services-list > li img,
.bookmark-group li img {
  transition: transform 0.18s ease !important;
}
ul.services-list > li:hover img,
.bookmark-group li:hover img {
  transform: scale(1.1) !important;
}

/* ---- 分组标题：左侧蓝紫渐变色条 ---- */
h2.service-group-name {
  position: relative !important;
  padding-left: 12px !important;
  letter-spacing: 0.03em !important;
}
h2.service-group-name::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 1.05em !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #38bdf8, #818cf8) !important;
}

/* ---- 站点状态指示灯：柔和光晕 ---- */
ul.services-list li span[class*='rounded-full'][class*='bg-green'] {
  box-shadow: 0 0 6px 1px rgb(74 222 128 / 0.7) !important;
}
ul.services-list li span[class*='rounded-full'][class*='bg-red'] {
  box-shadow: 0 0 6px 1px rgb(248 113 113 / 0.7) !important;
}

/* 底部备案号 */
#beian-footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 12px; color: #ccc; background: rgba(0,0,0,0.45); padding: 4px 0; z-index: 9999; }
#beian-footer a { color: #9cf; }