/* ============================================================
   Sun-Panel 自定义样式 v3   →  /vol2/@appdata/Sun-Panel/web/custom/index.css
   （web/custom 是软链接，实际落盘在 /vol2/@appdata/Sun-Panel/web/custom/）
   覆盖后浏览器强刷 Ctrl+Shift+R

   v3 改动
   ① 系统状态：五项强制一行（grid 5 列），重做成"遥测仪表"风，
      与下方功能跳转块在底色 / 圆角 / 描边 / 强调色上明确区分
   ② 功能跳转块图标：取消强制正方形，一律 object-fit:contain 保持原始比例
      （横条 ZTE、竖条 PDF工具箱 / MinIO 不再被压扁）
   ③ 保留 v2 的毛玻璃 + hover 质感
   ============================================================ */

/* ------------------------------------------------------------
   0. 系统状态：五项一行
   ------------------------------------------------------------ */
.system-monitor .icon-info-box{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:12px !important;
}
/* 窄屏逐级降列，避免挤成一团 */
@media (max-width:1280px){
  .system-monitor .icon-info-box{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width:860px){
  .system-monitor .icon-info-box{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  .system-monitor .icon-info-box{ grid-template-columns:minmax(0,1fr) !important; }
}

/* 五张卡片各自的强调色（CPU / RAM / 盘1 / 盘2 / 盘3） */
.system-monitor .icon-info-box > *{ --sp-a:#38bdf8; }               /* 兜底 */
.system-monitor .icon-info-box > *:nth-child(1){ --sp-a:#22d3ee; }  /* 青  */
.system-monitor .icon-info-box > *:nth-child(2){ --sp-a:#a78bfa; }  /* 紫  */
.system-monitor .icon-info-box > *:nth-child(3){ --sp-a:#34d399; }  /* 绿  */
.system-monitor .icon-info-box > *:nth-child(4){ --sp-a:#fbbf24; }  /* 琥珀 */
.system-monitor .icon-info-box > *:nth-child(5){ --sp-a:#fb7185; }  /* 玫红 */

/* ------------------------------------------------------------
   1. 系统状态卡片本体：深色渐变面板 + 描边 + 角标，与跳转块区分
   ------------------------------------------------------------ */
.system-monitor .generic-monitor-card .item-card-info{
  position:relative !important;
  border-radius:13px !important;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgba(28,37,56,.94) 0%, rgba(13,17,27,.96) 100%) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 20px -14px rgba(0,0,0,.9),
    0 2px 10px rgba(0,0,0,.30) !important;
  overflow:hidden !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
/* 顶部能量线 */
.system-monitor .generic-monitor-card .item-card-info::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--sp-a) 50%, transparent 100%);
  opacity:.55; pointer-events:none;
}
/* 左侧强调竖条 */
.system-monitor .generic-monitor-card .item-card-info::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--sp-a) 0%, rgba(255,255,255,0) 92%);
  opacity:.75; pointer-events:none;
}
.system-monitor .generic-monitor-card .item-card-info:hover{
  transform:translateY(-2px);
  border-color:var(--sp-a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 26px rgba(0,0,0,.45),
    0 0 20px -6px var(--sp-a) !important;
}

/* 图标：染色 + 发光（组件渲染的是 svg.svg-icon + fill:currentColor） */
.system-monitor .generic-monitor-card .item-card-info svg.svg-icon{
  color:var(--sp-a) !important;
  filter:drop-shadow(0 0 7px var(--sp-a));                                              /* 老浏览器回退 */
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--sp-a) 60%, transparent));
}

/* 图标区收窄一点，给 5 列留出文字空间（图标槽有两层 60px 需要一起收） */
.system-monitor .generic-monitor-card .item-card-info > div:first-child,
.system-monitor .generic-monitor-card .item-card-info > div:first-child div{
  width:54px !important;
}
.system-monitor .generic-monitor-card .item-card-info > div:last-child{
  max-width:calc(100% - 62px) !important;
  padding-right:12px;
}

/* 标签 / 数值：小标签 + 等宽数字，做出仪表读数感 */
.system-monitor .generic-monitor-card .mb-1.text-xs{
  align-items:baseline !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.system-monitor .generic-monitor-card .mb-1.text-xs > span:first-child{
  color:rgba(255,255,255,.52) !important;
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.06em;
}
.system-monitor .generic-monitor-card .mb-1.text-xs > span:last-child{
  color:#eaf4ff !important;
  font-size:12px !important;
  font-weight:700;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 进度条：细轨 + 发光渐变填充 + 流动高光 */
.system-monitor .generic-monitor-card .n-progress-graph-line-rail{
  background:rgba(255,255,255,.07) !important;
  border-radius:99px !important;
}
.system-monitor .generic-monitor-card .n-progress-graph-line-fill{
  position:relative !important;
  overflow:hidden !important;
  border-radius:99px !important;
  background:var(--sp-a) !important;                                                   /* 老浏览器回退 */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sp-a) 35%, transparent) 0%,
    var(--sp-a) 100%) !important;
  box-shadow:0 0 9px var(--sp-a) !important;                                            /* 老浏览器回退 */
  box-shadow:0 0 9px color-mix(in srgb, var(--sp-a) 65%, transparent) !important;
}
@keyframes sp-scan{
  0%   { transform:translateX(-110%); }
  100% { transform:translateX(320%); }
}
.system-monitor .generic-monitor-card .n-progress-graph-line-fill::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation:sp-scan 2.8s linear infinite;
  pointer-events:none;
}

/* 标题「系统状态」左侧加发光竖条 */
.system-monitor .system-monitor-header > .text-shadow{
  position:relative;
  padding-left:13px;
}
.system-monitor .system-monitor-header > .text-shadow::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:1.05em; border-radius:2px;
  background:linear-gradient(180deg,#22d3ee 0%,#3b82f6 100%);
  box-shadow:0 0 9px rgba(34,211,238,.85);
}

/* ------------------------------------------------------------
   2. 功能跳转块：图标保持原始比例（横条 / 竖条不再被压成正方形）
   ------------------------------------------------------------ */
.item-icon img,
.app-icon-info-icon img,
.app-icon-small-icon img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;   /* 关键：等比缩放留白，而不是拉伸填满 */
  display:block !important;
}
/* 图标盒：居中摆放。66×66 是给 custom/index.js 的"视觉尺寸归一化"留的容器
   （内容最大 58px，深色图标 boost 后画布最大约 62px，四周仍有呼吸）；
   脚本没跑或报错时，下面的 contain 规则就是完整降级。 */
.item-list .app-icon-info-icon .item-icon,
.item-list .app-icon-info-icon .item-icon > div{
  width:66px !important;
  height:66px !important;
}
.item-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* img 由脚本改了宽高后，仍需在容器内居中 */
.item-icon > .n-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* 文字图标 / iconfont 模式下的字符保持居中 */
.item-icon > .n-icon,
.item-icon > .iconfont{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}

/* 图标槽与文字区的对齐 */
.app-icon-info-icon{
  flex:0 0 70px !important;
}
.app-icon-info-text-box{
  min-width:0;
  /* 中文字形在行盒里天然偏上（下方留了 descender 空间），实测文字墨迹中心
     比卡片中心高约 3px，会让"几何居中"的图标看着偏下。把文字块压回来。 */
  transform:translateY(3px);
}
.app-icon-info-text-box-title{
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.app-icon-info-text-box-description{
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   3. 功能跳转块：保留 v2 的毛玻璃质感与 hover
   ------------------------------------------------------------ */
.item-list .item-card-info,
.item-card-small-icon{
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.item-list .item-card-info:hover,
.item-card-small-icon:hover{
  transform:translateY(-3px);
  background-color:rgba(255,255,255,.10) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.34) !important;
}
.item-list .item-card-info .text-xs,
.item-list .app-icon-info-text-box-description{
  color:rgba(255,255,255,.60) !important;
}
.item-list .app-icon-info-text-box-title,
.item-card-small-title{
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ------------------------------------------------------------
   4. 主题系统（十款，调色板取自 dsh-theme-pack）
   ------------------------------------------------------------
   设计原则（v2 重构）：
     · 背景是"氛围"不是"插画" —— 主体是几层大半径、强羽化的光晕，
       光位每款都不同（顶光 / 角光 / 底光 / 环形），内容区不放具象物体
     · 具象元素退成"线描"：只贴边、描边为主、透明度 0.11~0.20
     · 全屏铺一层噪点，去掉矢量图的塑料感
     · 卡片 / 边线 / 三级文字 / 五色强调跟着主题一起换（见 4.1 变量表）
   body[data-sp-bg] 由 custom/index.js 写入；不写 = 用面板自带背景。
   ------------------------------------------------------------ */

/* 4.1 主题变量表 */

/* 赛博朋克·夜城霓虹 */
body[data-sp-bg="cyberpunk"]{
  --sp-dark:1;
  --sp-bg-a:#120b22; --sp-bg-b:#1a1030; --sp-bg-c:#0a0612;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(90% 61% at 12% -12%, rgba(255,45,149,0.46) 0%, rgba(0,0,0,0) 64%);
  --sp-light-3:radial-gradient(75% 54% at 92% 6%, rgba(0,240,255,0.35) 0%, rgba(0,0,0,0) 66%);
  --sp-light-4:radial-gradient(93% 68% at 50% 118%, rgba(180,90,255,0.38) 0%, rgba(0,0,0,0) 68%);
  --sp-card:rgba(28,17,54,0.6); --sp-card-hover:rgba(28,17,54,0.8);
  --sp-card-line:rgba(180,90,255,.16); --sp-card-line-hover:rgba(0,240,255,0.45);
  --sp-t1:#f2ecff; --sp-t2:#b9a8e0; --sp-t3:#8a76b8;
  --sp-brand:#ffe600; --sp-accent:#00f0ff;
  --sp-a1:#00f0ff; --sp-a2:#ffe600; --sp-a3:#00e5a0; --sp-a4:#ff2d95; --sp-a5:#ff3b5c;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-texture:repeating-linear-gradient(0deg, rgba(180,90,255,.045) 0 1px, rgba(0,0,0,0) 1px 54px),repeating-linear-gradient(90deg, rgba(0,240,255,.04) 0 1px, rgba(0,0,0,0) 1px 54px);
  --sp-texture-mask:radial-gradient(125% 90% at 50% 0%, #000 8%, rgba(0,0,0,0) 70%);
  --sp-glow:radial-gradient(38% 26% at 12% -12%, rgba(255,120,190,.60) 0%, rgba(255,45,149,.18) 45%, rgba(0,0,0,0) 72%);

  --sp-grain:.11;
}

/* 黑客终端·绿幕 */
body[data-sp-bg="hacker"]{
  --sp-dark:1;
  --sp-bg-a:#01120a; --sp-bg-b:#03190e; --sp-bg-c:#000803;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(82% 50% at 50% -18%, rgba(0,255,102,0.38) 0%, rgba(0,0,0,0) 62%);
  --sp-light-3:radial-gradient(43% 64% at 50% 50%, rgba(0,255,102,0.07) 0%, rgba(0,0,0,0) 70%);
  --sp-light-4:radial-gradient(72% 46% at 50% 116%, rgba(0,204,82,0.23) 0%, rgba(0,0,0,0) 68%);
  --sp-card:rgba(4,29,15,0.6); --sp-card-hover:rgba(4,29,15,0.8);
  --sp-card-line:rgba(0,255,102,.14); --sp-card-line-hover:rgba(0,255,102,0.45);
  --sp-t1:#c8ffd9; --sp-t2:#7dffa8; --sp-t3:#4dcc7a;
  --sp-brand:#00ff66; --sp-accent:#00ff66;
  --sp-a1:#00ff66; --sp-a2:#7dffa8; --sp-a3:#00cc52; --sp-a4:#c8ffd9; --sp-a5:#ff5050;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-texture:repeating-linear-gradient(0deg, rgba(0,255,102,.05) 0 1px, rgba(0,0,0,0) 1px 3px);
  --sp-texture-mask:linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 100%);
  --sp-glow:radial-gradient(34% 22% at 50% -18%, rgba(120,255,170,.55) 0%, rgba(0,255,102,.15) 48%, rgba(0,0,0,0) 74%);

  --sp-grain:.12;
}

/* 交易终端·红绿盘 */
body[data-sp-bg="trader"]{
  --sp-dark:0;
  --sp-bg-a:#f4f8fc; --sp-bg-b:#ffffff; --sp-bg-c:#e9eef5;
  --sp-light-1:radial-gradient(130% 110% at 50% 40%, rgba(0,0,0,0) 44%, rgba(22,44,72,.13) 100%);
  --sp-light-2:radial-gradient(93% 57% at 6% -16%, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 58%);
  --sp-light-3:radial-gradient(68% 46% at 98% 108%, rgba(30,111,255,0.22) 0%, rgba(0,0,0,0) 66%);
  --sp-light-4:radial-gradient(50% 36% at 50% 50%, rgba(23,91,216,0.07) 0%, rgba(0,0,0,0) 72%);
  --sp-card:rgba(255,255,255,0.74); --sp-card-hover:rgba(255,255,255,0.92);
  --sp-card-line:rgba(30,90,160,.12); --sp-card-line-hover:rgba(23,91,216,0.42);
  --sp-t1:#14243a; --sp-t2:#3f546c; --sp-t3:#64788f;
  --sp-brand:#175bd8; --sp-accent:#1e6fff;
  --sp-a1:#1e6fff; --sp-a2:#175bd8; --sp-a3:#00a848; --sp-a4:#0e2a4a; --sp-a5:#e02a20;
  --sp-shadow:rgba(14,42,74,0.14);
  --sp-texture:repeating-linear-gradient(0deg, rgba(30,90,160,.04) 0 1px, rgba(0,0,0,0) 1px 54px);
  --sp-texture-mask:radial-gradient(120% 90% at 50% 0%, #000 18%, rgba(0,0,0,0) 78%);
  --sp-grain:.085;
}

/* 午夜极光 */
body[data-sp-bg="aurora"]{
  --sp-dark:1;
  --sp-bg-a:#0a1224; --sp-bg-b:#0d1730; --sp-bg-c:#050914;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(82% 43% at 14% -10%, rgba(124,77,255,0.49) 0%, rgba(0,0,0,0) 60%);
  --sp-light-3:radial-gradient(75% 39% at 72% 8%, rgba(0,245,212,0.41) 0%, rgba(0,0,0,0) 62%);
  --sp-light-4:radial-gradient(90% 50% at 40% 114%, rgba(45,107,255,0.38) 0%, rgba(0,0,0,0) 66%);
  --sp-card:rgba(14,25,50,0.6); --sp-card-hover:rgba(14,25,50,0.8);
  --sp-card-line:rgba(90,200,255,.14); --sp-card-line-hover:rgba(0,245,212,0.45);
  --sp-t1:#e8ecf8; --sp-t2:#aab8d4; --sp-t3:#7d8fb0;
  --sp-brand:#7c4dff; --sp-accent:#00f5d4;
  --sp-a1:#00f5d4; --sp-a2:#7c4dff; --sp-a3:#2ee0b0; --sp-a4:#2d6bff; --sp-a5:#ff5c7a;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-texture:radial-gradient(1.4px 1.4px at 14% 22%, rgba(255,255,255,.42) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.2px 1.2px at 72% 12%, rgba(255,255,255,.32) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.5px 1.5px at 38% 66%, rgba(255,255,255,.26) 50%, rgba(0,0,0,0) 51%);
  --sp-glow:radial-gradient(36% 24% at 14% -10%, rgba(170,140,255,.50) 0%, rgba(124,77,255,.16) 46%, rgba(0,0,0,0) 72%);

  --sp-grain:.11;
}

/* 蒸汽波·未来复古 */
body[data-sp-bg="vaporwave"]{
  --sp-dark:1;
  --sp-bg-a:#1c0a38; --sp-bg-b:#23104a; --sp-bg-c:#14042b;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(72% 44% at 50% 108%, rgba(255,113,206,0.49) 0%, rgba(0,0,0,0) 62%);
  --sp-light-3:radial-gradient(82% 41% at 50% -12%, rgba(185,103,255,0.38) 0%, rgba(0,0,0,0) 62%);
  --sp-light-4:radial-gradient(57% 39% at 8% 60%, rgba(1,205,254,0.23) 0%, rgba(0,0,0,0) 68%);
  --sp-card:rgba(37,18,84,0.6); --sp-card-hover:rgba(37,18,84,0.8);
  --sp-card-line:rgba(255,113,206,.16); --sp-card-line-hover:rgba(1,205,254,0.45);
  --sp-t1:#fdeef8; --sp-t2:#d8b8e8; --sp-t3:#a97fc4;
  --sp-brand:#ff71ce; --sp-accent:#01cdfe;
  --sp-a1:#01cdfe; --sp-a2:#ff71ce; --sp-a3:#3df5b0; --sp-a4:#b967ff; --sp-a5:#ff5c8a;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-texture:repeating-linear-gradient(0deg, rgba(255,113,206,.06) 0 1px, rgba(0,0,0,0) 1px 48px),repeating-linear-gradient(90deg, rgba(1,205,254,.05) 0 1px, rgba(0,0,0,0) 1px 48px);
  --sp-texture-mask:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 76%);
  --sp-glow:radial-gradient(34% 26% at 50% 108%, rgba(255,175,225,.52) 0%, rgba(255,113,206,.16) 46%, rgba(0,0,0,0) 72%);

  --sp-grain:.10;
}

/* 深空漫游 */
body[data-sp-bg="space"]{
  --sp-dark:1;
  --sp-bg-a:#0a0c14; --sp-bg-b:#0e1119; --sp-bg-c:#05060a;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(68% 57% at 96% 2%, rgba(143,123,255,0.41) 0%, rgba(0,0,0,0) 60%);
  --sp-light-3:radial-gradient(64% 46% at 4% 98%, rgba(109,213,255,0.26) 0%, rgba(0,0,0,0) 66%);
  --sp-light-4:radial-gradient(54% 39% at 24% 22%, rgba(94,72,190,0.20) 0%, rgba(0,0,0,0) 70%);
  --sp-card:rgba(16,19,30,0.6); --sp-card-hover:rgba(16,19,30,0.8);
  --sp-card-line:rgba(140,120,255,.15); --sp-card-line-hover:rgba(109,213,255,0.45);
  --sp-t1:#eef0f6; --sp-t2:#b6bcd0; --sp-t3:#8890a8;
  --sp-brand:#8f7bff; --sp-accent:#6dd5ff;
  --sp-a1:#6dd5ff; --sp-a2:#8f7bff; --sp-a3:#7df0c0; --sp-a4:#ff9d6d; --sp-a5:#ff6d7a;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-texture:radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.2px 1.2px at 68% 9%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.6px 1.6px at 34% 62%, rgba(255,255,255,.3) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.1px 1.1px at 84% 46%, rgba(255,255,255,.34) 50%, rgba(0,0,0,0) 51%);
  --sp-glow:radial-gradient(36% 30% at 96% 2%, rgba(190,180,255,.48) 0%, rgba(143,123,255,.15) 46%, rgba(0,0,0,0) 72%);

  --sp-grain:.11;
}

/* 哥特暗夜 */
body[data-sp-bg="gothic"]{
  --sp-dark:1;
  --sp-bg-a:#14100c; --sp-bg-b:#191410; --sp-bg-c:#0d0a08;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(86% 72% at 50% 42%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.92) 100%);
  --sp-light-3:radial-gradient(75% 44% at 50% -14%, rgba(201,162,39,0.38) 0%, rgba(0,0,0,0) 58%);
  --sp-light-4:radial-gradient(61% 39% at 50% 118%, rgba(139,26,26,0.29) 0%, rgba(0,0,0,0) 64%);
  --sp-card:rgba(27,21,17,0.6); --sp-card-hover:rgba(27,21,17,0.8);
  --sp-card-line:rgba(201,162,39,.14); --sp-card-line-hover:rgba(139,26,26,0.45);
  --sp-t1:#ede6d8; --sp-t2:#bfb4a0; --sp-t3:#94887a;
  --sp-brand:#c9a227; --sp-accent:#8b1a1a;
  --sp-a1:#c9a227; --sp-a2:#e0c060; --sp-a3:#8b1a1a; --sp-a4:#8fae6a; --sp-a5:#d43a3a;
  --sp-shadow:rgba(0,0,0,.45);
  --sp-glow:radial-gradient(32% 20% at 50% -14%, rgba(240,200,90,.42) 0%, rgba(201,162,39,.12) 46%, rgba(0,0,0,0) 72%);

  --sp-grain:.12;
}

/* 水墨和风 */
body[data-sp-bg="inkwash"]{
  --sp-dark:0;
  --sp-bg-a:#fbf7ee; --sp-bg-b:#fffdf6; --sp-bg-c:#f6f1e6;
  --sp-light-1:radial-gradient(130% 110% at 50% 40%, rgba(0,0,0,0) 44%, rgba(22,44,72,.13) 100%);
  --sp-light-2:radial-gradient(72% 56% at 2% -8%, rgba(47,93,80,0.38) 0%, rgba(0,0,0,0) 62%);
  --sp-light-3:radial-gradient(61% 44% at 100% 102%, rgba(168,132,44,0.23) 0%, rgba(0,0,0,0) 68%);
  --sp-light-4:radial-gradient(50% 36% at 62% 30%, rgba(194,59,34,0.07) 0%, rgba(0,0,0,0) 70%);
  --sp-card:rgba(255,255,255,0.74); --sp-card-hover:rgba(255,255,255,0.92);
  --sp-card-line:rgba(26,26,26,.08); --sp-card-line-hover:rgba(194,59,34,0.42);
  --sp-t1:#26221c; --sp-t2:#5d5648; --sp-t3:#837b68;
  --sp-brand:#c23b22; --sp-accent:#2f5d50;
  --sp-a1:#2f5d50; --sp-a2:#c23b22; --sp-a3:#a8842c; --sp-a4:#3d7a4e; --sp-a5:#5d5648;
  --sp-shadow:rgba(168,132,44,0.14);
  --sp-texture:repeating-linear-gradient(92deg, rgba(26,26,26,.026) 0 1px, rgba(0,0,0,0) 1px 7px);
  --sp-texture-mask:radial-gradient(130% 100% at 50% 0%, #000 30%, rgba(0,0,0,0) 88%);
  --sp-grain:.09;
}

/* 冰川极简 */
body[data-sp-bg="glacier"]{
  --sp-dark:0;
  --sp-bg-a:#f6fafd; --sp-bg-b:#ffffff; --sp-bg-c:#eef4f9;
  --sp-light-1:radial-gradient(130% 110% at 50% 40%, rgba(0,0,0,0) 44%, rgba(22,44,72,.13) 100%);
  --sp-light-2:radial-gradient(93% 51% at 50% -18%, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 58%);
  --sp-light-3:radial-gradient(64% 44% at 2% 106%, rgba(77,159,216,0.26) 0%, rgba(0,0,0,0) 66%);
  --sp-light-4:radial-gradient(54% 36% at 96% 88%, rgba(46,111,184,0.13) 0%, rgba(0,0,0,0) 72%);
  --sp-card:rgba(255,255,255,0.74); --sp-card-hover:rgba(255,255,255,0.92);
  --sp-card-line:rgba(80,140,190,.14); --sp-card-line-hover:rgba(46,111,184,0.42);
  --sp-t1:#20303f; --sp-t2:#56687a; --sp-t3:#7d8fa0;
  --sp-brand:#2e6fb8; --sp-accent:#4d9fd8;
  --sp-a1:#4d9fd8; --sp-a2:#2e6fb8; --sp-a3:#3d9a6a; --sp-a4:#2e6fb8; --sp-a5:#d45454;
  --sp-shadow:rgba(46,111,184,0.14);
  --sp-texture:repeating-linear-gradient(125deg, rgba(80,140,190,.035) 0 1px, rgba(0,0,0,0) 1px 66px);
  --sp-texture-mask:radial-gradient(120% 100% at 50% 0%, #000 12%, rgba(0,0,0,0) 76%);
  --sp-grain:.085;
}

/* 复古打字机 */
body[data-sp-bg="typewriter"]{
  --sp-dark:0;
  --sp-bg-a:#f7efdf; --sp-bg-b:#fdf7ea; --sp-bg-c:#f2e8d5;
  --sp-light-1:radial-gradient(130% 110% at 50% 40%, rgba(0,0,0,0) 44%, rgba(22,44,72,.13) 100%);
  --sp-light-2:radial-gradient(86% 50% at 50% -16%, rgba(255,236,190,0.92) 0%, rgba(0,0,0,0) 58%);
  --sp-light-3:radial-gradient(64% 41% at 94% 108%, rgba(138,31,31,0.17) 0%, rgba(0,0,0,0) 66%);
  --sp-light-4:radial-gradient(57% 39% at 8% 76%, rgba(74,59,42,0.13) 0%, rgba(0,0,0,0) 70%);
  --sp-card:rgba(255,253,245,0.74); --sp-card-hover:rgba(255,253,245,0.92);
  --sp-card-line:rgba(74,59,42,.1); --sp-card-line-hover:rgba(34,48,79,0.42);
  --sp-t1:#2e2620; --sp-t2:#5d5144; --sp-t3:#837564;
  --sp-brand:#22304f; --sp-accent:#4a3b2a;
  --sp-a1:#22304f; --sp-a2:#4a3b2a; --sp-a3:#8a1f1f; --sp-a4:#4f6a3a; --sp-a5:#a8842c;
  --sp-shadow:rgba(138,31,31,0.14);
  --sp-grain:.11;
}

/* 事件视界·卡冈图雅 */
body[data-sp-bg="gargantua"]{
  --sp-dark:1;
  --sp-bg-a:#08070c; --sp-bg-b:#050508; --sp-bg-c:#020203;
  --sp-light-1:radial-gradient(126% 106% at 50% 42%, rgba(0,0,0,0) 36%, rgba(0,0,0,.40) 100%);
  --sp-light-2:radial-gradient(41% 44% at 82% 74%, rgba(255,168,92,0.49) 0%, rgba(255,120,40,0.17) 42%, rgba(0,0,0,0) 70%);
  --sp-light-3:radial-gradient(57% 43% at 12% 4%, rgba(61,95,168,0.38) 0%, rgba(0,0,0,0) 64%);
  --sp-light-4:radial-gradient(86% 72% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.80) 100%);
  --sp-card:rgba(21,18,22,.58); --sp-card-hover:rgba(33,27,29,.76);
  --sp-card-line:rgba(255,181,107,.15); --sp-card-line-hover:rgba(255,181,107,.42);
  --sp-t1:#f8f2e7; --sp-t2:#c2b5a4; --sp-t3:#8b8073;
  --sp-brand:#ffb56b; --sp-accent:#fff4dc;
  --sp-a1:#fff4dc; --sp-a2:#ffb56b; --sp-a3:#7fb3ff; --sp-a4:#e07a2f; --sp-a5:#ff6b4a;
  --sp-shadow:rgba(0,0,0,.55);
  --sp-texture:radial-gradient(1.3px 1.3px at 16% 24%, rgba(220,235,255,.45) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.1px 1.1px at 62% 12%, rgba(220,235,255,.36) 50%, rgba(0,0,0,0) 51%),radial-gradient(1.5px 1.5px at 36% 68%, rgba(220,235,255,.28) 50%, rgba(0,0,0,0) 51%),radial-gradient(1px 1px at 78% 52%, rgba(220,235,255,.32) 50%, rgba(0,0,0,0) 51%);
  --sp-glow:radial-gradient(22% 24% at 82% 74%, rgba(255,225,170,.62) 0%, rgba(255,160,80,.20) 42%, rgba(0,0,0,0) 70%);

  --sp-grain:.11;
}

/* 4.2 通用映射：所有元素跟着主题变量走 */
/* 噪点：SVG feTurbulence —— 比位图细腻，stitchTiles 消除平铺接缝。
   ⚠ 补记：这里原本引用的 --sp-noise 从未被任何主题定义过，所以带主题时的
   颗粒层一直是失效的（只有 body 无主题时另有一套），这正是渐变看着"平涂"的原因。 */
:root{
  --sp-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 底色 + 四层光晕（--sp-light-1 暗角 / 2 主光 / 3 补光 / 4 底光） */
body[data-sp-bg] .cover.wallpaper{
  background-image:
    var(--sp-light-1, none),
    var(--sp-light-2, none),
    var(--sp-light-3, none),
    var(--sp-light-4, none),
    linear-gradient(175deg, var(--sp-bg-a) 0%, var(--sp-bg-b) 48%, var(--sp-bg-c) 100%) !important;
  background-repeat:no-repeat !important;
}

/* 光核层：--sp-glow 是一个比主光更小、更亮的光心。
   关键在 mix-blend-mode:screen —— 它让光与底下的颜色"相加"（真的变亮），
   而不是像普通盖一层那样只是把颜色往白里拉，于是有了体积光/发光感。
   浅色主题 screen 会过曝成白，用 --sp-blend 换 multiply 或直接不给 --sp-glow。 */
body[data-sp-bg] .cover.wallpaper::before{
  content:""; position:absolute; inset:-8%; pointer-events:none;
  background-image:var(--sp-glow, none);
  background-repeat:no-repeat;
  mix-blend-mode:var(--sp-blend, screen);
  opacity:var(--sp-glow-o, .82);
  animation:sp-breathe 90s ease-in-out infinite;
}
/* 极缓慢的"呼吸"：只动 opacity（合成层动画，GPU 开销可忽略），
   周期拉到 90s —— 盯着看能察觉它在活，扫一眼不会觉得在闪。
   没有 --sp-glow 的主题这一层是空的，等于不跑。 */
@keyframes sp-breathe{
  0%,100%{ opacity:var(--sp-glow-o, .82); }
  50%    { opacity:calc(var(--sp-glow-o, .82) * .68); }
}
@media (prefers-reduced-motion: reduce){
  body[data-sp-bg] .cover.wallpaper::before{ animation:none; }
}

/* 质感层：噪点（去平涂感）+ 主题星尘。--sp-grain 同时控制这两者的强度 */
body[data-sp-bg] .cover.wallpaper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--sp-noise), var(--sp-texture, none);
  background-size:180px 180px, auto;
  background-position:0 0, center;
  background-repeat:repeat, repeat;
  -webkit-mask-image:var(--sp-texture-mask, none);
  mask-image:var(--sp-texture-mask, none);
  opacity:var(--sp-grain, .10);
}

/* logo / 时钟 */
body[data-sp-bg] .text-shadow{ color:var(--sp-t1) !important; text-shadow:var(--sp-ts, 0 2px 12px var(--sp-shadow)) !important; }
body[data-sp-bg] .clock-time,
body[data-sp-bg] .clock-date,
body[data-sp-bg] .clock{ color:var(--sp-t1) !important; }

/* 搜索框 */
body[data-sp-bg] .search-container{
  background-color:var(--sp-card) !important;
  border:1px solid var(--sp-card-line) !important;
  color:var(--sp-t2) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
body[data-sp-bg] .search-container input{ color:var(--sp-t1) !important; background-color:transparent !important; }
body[data-sp-bg] .search-container input::placeholder{ color:var(--sp-t3) !important; }

/* 分组标题 */
body[data-sp-bg] .group-title{ color:var(--sp-t2) !important; text-shadow:var(--sp-ts, none) !important; }

/* 功能跳转块 */
body[data-sp-bg] .item-list .item-card-info,
body[data-sp-bg] .item-card-small-icon{
  background-color:var(--sp-card) !important;
  border-color:var(--sp-card-line) !important;
  box-shadow:0 8px 22px var(--sp-shadow), inset 0 1px 0 var(--sp-inset) !important;
  --custom-box-shadow-color:var(--sp-card-line-hover);
}
body[data-sp-bg] .item-list .item-card-info:hover,
body[data-sp-bg] .item-card-small-icon:hover{
  background-color:var(--sp-card-hover) !important;
  border-color:var(--sp-card-line-hover) !important;
}
body[data-sp-bg] .app-icon-info-text-box-title,
body[data-sp-bg] .item-card-small-title{ color:var(--sp-t1) !important; text-shadow:var(--sp-ts, none) !important; }
body[data-sp-bg] .app-icon-info-text-box-description,
body[data-sp-bg] .item-list .item-card-info .text-xs{ color:var(--sp-t2) !important; }

/* 系统状态 */
body[data-sp-bg] .system-monitor-header > .text-shadow{ color:var(--sp-t1) !important; }
body[data-sp-bg] .system-monitor .generic-monitor-card .item-card-info{
  background:
    radial-gradient(130% 150% at 0% 0%, var(--sp-inset) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(155deg, var(--sp-card) 0%, var(--sp-card-hover) 100%) !important;
  border-color:var(--sp-card-line) !important;
  box-shadow:inset 0 1px 0 var(--sp-inset), 0 2px 10px var(--sp-shadow) !important;
}
body[data-sp-bg] .system-monitor .generic-monitor-card .item-card-info:hover{ border-color:var(--sp-a) !important; }
body[data-sp-bg] .system-monitor .icon-info-box > *:nth-child(1){ --sp-a:var(--sp-a1); }
body[data-sp-bg] .system-monitor .icon-info-box > *:nth-child(2){ --sp-a:var(--sp-a2); }
body[data-sp-bg] .system-monitor .icon-info-box > *:nth-child(3){ --sp-a:var(--sp-a3); }
body[data-sp-bg] .system-monitor .icon-info-box > *:nth-child(4){ --sp-a:var(--sp-a4); }
body[data-sp-bg] .system-monitor .icon-info-box > *:nth-child(5){ --sp-a:var(--sp-a5); }
body[data-sp-bg] .system-monitor .generic-monitor-card .mb-1.text-xs > span:first-child{ color:var(--sp-t3) !important; }
body[data-sp-bg] .system-monitor .generic-monitor-card .mb-1.text-xs > span:last-child{ color:var(--sp-t1) !important; }
body[data-sp-bg] .system-monitor .generic-monitor-card .n-progress-graph-line-rail{ background:var(--sp-inset) !important; }

/* footer / 悬浮按钮 / 右上角工具栏 */
body[data-sp-bg] .custom-footer,
body[data-sp-bg] .custom-footer *{ color:var(--sp-t3) !important; }
body[data-sp-bg] .float-btn{ color:var(--sp-t2) !important; }
body[data-sp-bg] .float-btn:hover{ background-color:var(--sp-card-hover) !important; }
body[data-sp-bg] .fixed-element{
  background-color:var(--sp-card) !important;
  border:1px solid var(--sp-card-line) !important;
}
/* 这些按钮里的图标写死了 text-white，浅色主题下会变成"白底白图标" */
body[data-sp-bg] .float-btn svg.svg-icon,
body[data-sp-bg] .float-btn .svg-icon,
body[data-sp-bg] .fixed-element svg.svg-icon,
body[data-sp-bg] .fixed-element .svg-icon,
body[data-sp-bg] .fixed-element .n-icon{ color:var(--sp-t2) !important; }

/* 分组标题右侧的「添加(+)/排序(拖动)」按钮：图标写死 text-white，
   且默认 opacity:0、只有悬停标题时才浮现 —— 浅色主题下表现为
   "悬停上去什么都没有"，很容易被当成按钮不存在。
   两个坑：
     ① 功能分组用 .group-buttons，「系统状态」那一行却用 .system-monitor-buttons，
        类名不同；后者里面的 <span> 连 title 属性都没有，按 [title="Add"] 找会漏。
     ② 必须命中 <svg> 自己 —— text-white 就写在它的 class 上，改父级 color 没用。
   全页扫描确认：浅色主题下残留的白色 svg 只有这两类，故按 svg.text-white 统一接管。 */
body[data-sp-bg] svg.svg-icon.text-white,
body[data-sp-bg] svg.text-white,
body[data-sp-bg] .group-buttons .n-icon,
body[data-sp-bg] .system-monitor-buttons .n-icon{ color:var(--sp-t2) !important; }
/* 悬停加深一档，否则浅色下"看得见"和"可点"分不清 */
body[data-sp-bg] .group-buttons > span:hover,
body[data-sp-bg] .system-monitor-buttons > span:hover,
body[data-sp-bg] .group-buttons > span:hover svg,
body[data-sp-bg] .system-monitor-buttons > span:hover svg{ color:var(--sp-t1) !important; }

/* 滚动条 */
body[data-sp-bg] ::-webkit-scrollbar-thumb{ background:var(--sp-card-line-hover); }

/* 4.3 浅色主题：卡片内高光提亮、文字去投影，否则浅底上发脏 */
body[data-sp-bg="trader"],
body[data-sp-bg="inkwash"],
body[data-sp-bg="glacier"],
body[data-sp-bg="typewriter"]{
  --sp-inset:rgba(255,255,255,.92);
  --sp-ts:none;
}
body[data-sp-bg]:not([data-sp-bg="trader"]):not([data-sp-bg="inkwash"]):not([data-sp-bg="glacier"]):not([data-sp-bg="typewriter"]){
  --sp-inset:rgba(255,255,255,.07);
  --sp-ts:0 2px 12px rgba(0,0,0,.45);
}

/* 4.4 少量形态差异：让主题不只好看，手感也不同 */
body[data-sp-bg="cyberpunk"] .item-list .item-card-info,
body[data-sp-bg="hacker"] .item-list .item-card-info,
body[data-sp-bg="gothic"] .item-list .item-card-info{ border-radius:8px !important; }
body[data-sp-bg="vaporwave"] .item-list .item-card-info{ border-radius:22px !important; }
body[data-sp-bg="hacker"] .app-icon-info-text-box-title,
body[data-sp-bg="hacker"] .app-icon-info-text-box-description,
body[data-sp-bg="typewriter"] .app-icon-info-text-box-title,
body[data-sp-bg="typewriter"] .app-icon-info-text-box-description{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
body[data-sp-bg="gargantua"] .item-list .item-card-info{
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
}
body[data-sp-bg="cyberpunk"] .item-list .item-card-info:hover{
  box-shadow:0 14px 32px rgba(0,0,0,.42), 0 0 0 1px var(--sp-a1), 0 0 18px -4px var(--sp-a1) !important;
}

/* 4.5 切换按钮 + 主题面板 */
/* 4.6 切换按钮 + 主题面板（右下角，风格对齐面板自带的 float-btn） */

/* 定位：面板自带的回顶部按钮（.n-back-top）固定在 right:10px / bottom:10px，
   可见实体是其内层 button（46x34，右边缘距屏 10px）。两者原本在右下角几乎完全重合
   （主题按钮 z-index 更高，会盖住回顶部）。这里把主题按钮抬到它正上方、右边缘与它对齐，
   形成一列竖排工具按钮；无论回顶部是否出现都不跳动。 */
.sp-bg-switch{
  position:fixed; right:10px; bottom:62px; z-index:62;
  width:42px; height:42px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--sp-ui-bg, rgba(42,42,42,.55));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--sp-ui-line, rgba(255,255,255,.12));
  color:var(--sp-ui-fg, rgba(255,255,255,.72));
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sp-bg-switch:hover{
  background:var(--sp-ui-bg-hover, rgba(72,78,92,.72)); color:var(--sp-ui-fg-hover, #fff);
  transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.sp-bg-switch svg{ width:20px; height:20px; display:block; }

.sp-bg-panel{
  position:fixed; right:10px; bottom:114px; z-index:62;
  width:304px; max-width:calc(100vw - 36px);
  max-height:calc(100vh - 132px); overflow-y:auto;
  padding:12px; border-radius:14px;
  background:var(--sp-ui-panel, rgba(18,21,28,.9));
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--sp-ui-line, rgba(255,255,255,.12));
  box-shadow:0 18px 44px rgba(0,0,0,.48);
  opacity:0; transform:translateY(8px) scale(.97); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.sp-bg-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.sp-bg-panel > h4{
  margin:2px 0 10px 2px; font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--sp-ui-fg, rgba(255,255,255,.7)); opacity:.85;
}
.sp-bg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.sp-bg-item{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; cursor:pointer;
  font-size:12.5px; line-height:1.1; color:var(--sp-ui-fg, rgba(255,255,255,.82));
  border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sp-bg-item:hover{ background:var(--sp-ui-item-hover, rgba(255,255,255,.09)); }
.sp-bg-item.active{
  border-color:var(--sp-ui-active, rgba(255,255,255,.38));
  background:var(--sp-ui-item-hover, rgba(255,255,255,.09));
}
.sp-bg-swatch{
  width:16px; height:16px; border-radius:5px; flex:0 0 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

/* 4.7 让切换按钮自己也跟随主题（按钮在 body 下，用当前主题变量） */
body[data-sp-bg] .sp-bg-switch,
body[data-sp-bg] .sp-bg-panel{
  --sp-ui-bg:var(--sp-card); --sp-ui-bg-hover:var(--sp-card-hover);
  --sp-ui-line:var(--sp-card-line); --sp-ui-fg:var(--sp-t2); --sp-ui-fg-hover:var(--sp-t1);
  --sp-ui-panel:var(--sp-card-hover);
  --sp-ui-item-hover:var(--sp-card);
  --sp-ui-active:var(--sp-card-line-hover);
}

/* ------------------------------------------------------------
   5. 滚动条
   ------------------------------------------------------------ */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.20); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); }

/* ------------------------------------------------------------
   5. 无障碍：尊重"减少动态效果"
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .system-monitor .generic-monitor-card .n-progress-graph-line-fill::after{ animation:none; }
  .system-monitor .generic-monitor-card .item-card-info:hover,
  .item-list .item-card-info:hover,
  .item-card-small-icon:hover{ transform:none; }
}

/* ------------------------------------------------------------
   7. 面板「原背景」重做 —— 方案 B「极光色团」（定稿 2026-09-23）
   - 只作用于「未启用任何主题」时（body 无 data-sp-bg）；
     原背景是面板设置里配的一张 base64 内嵌 JPEG（一块死平的中灰蓝）。
   - 四团弥散光色 + 极淡颗粒：紫（左上）/ 青（右上）/ 粉（右下）/ 绿（左下）。
   - 11 款主题完全不受影响；以后在面板设置里换背景图也不会再生效，
     要恢复自带图就删掉这一段。
   ------------------------------------------------------------ */
body:not([data-sp-bg]) .cover.wallpaper{
  background-color:#1a1c22 !important;
  background-image:
    radial-gradient(45% 38% at 18% 22%, rgba(144,116,226,.38) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(42% 36% at 82% 16%, rgba(104,196,198,.28) 0%, rgba(0,0,0,0) 64%),
    radial-gradient(52% 42% at 72% 90%, rgba(252,138,172,.22) 0%, rgba(0,0,0,0) 66%),
    radial-gradient(46% 38% at 10% 88%, rgba(112,226,182,.20) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(160deg, #20222a 0%, #171920 100%) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
/* 颗粒层：消掉渐变的平涂感（主题的 --sp-noise 在本机从未定义，这里自带 feTurbulence） */
body:not([data-sp-bg]) .cover.wallpaper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  background-repeat:repeat;
  opacity:.05;
}