/* ============================================================================
   xyppusher ART KIT / glass.css
   液态玻璃 + 壁纸层。依赖 tokens.css（值）与 ui.css（组件）。
   运行时由 glass.js 写 body 上的 --glass-a / --surf-blur / --surf-sat、
   data-wall / data-wall-tone / data-perf。

   配方五步（实测可行，见 docs/GLASS.md）：
     1 模糊   backdrop-filter: blur(32px)
     2 增色   saturate(185%)
     3 叠白   background: rgb(255 255 255 / 8%)    ← ★ 白层，不是深色底
     4 亮边   inset 1px 1px #fff8 + 极淡外描边
     5 折射   url(#art-glass)（SVG 位移，只给大块）
   ========================================================================== */

/* ── 壁纸层：三层叠放 ────────────────────────────────────────────────────
   #wall-layer > #wall-img    壁纸本身：fixed + cover，永不拉伸
   #wall-layer > #wall-scrim  压暗：保证其上文字可读（强度由 luma + 用户滑块）
   .app-view                  面板本体：面改成半透明
   ========================================================================== */
#wall-layer {
  position: fixed;
  inset: 0;
  /* ★ 必须是负值：#wall-layer 是定位元素，而 .app-view 这些普通块在同一层叠
     上下文里**没有定位**，z-index: 0 会把壁纸盖到它们上面（表现就是标题被压住、
     卡片却浮起来）。壁纸永远是背景，压到最底。 */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
#wall-layer.on { opacity: 1; }

#wall-img {
  position: absolute;
  inset: 0;
  /* 显式写一遍：pointer-events 虽然继承自 #wall-layer，但打包/压缩后容易被别的
     规则覆盖，写死最稳（壁纸永远不该抢点击） */
  pointer-events: none;
  background-image: none;
  background-repeat: no-repeat;
  /* ★ cover：铺满且**不改变宽高比**。宁可裁掉边缘，也不让脸变扁。 */
  background-size: cover;
  background-position: var(--wall-focus);
  transition: background-image .25s ease, background-position .25s ease;
  will-change: background-position;
}

#wall-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--wall-scrim);
  transition: background .3s ease;
}

/* 有壁纸时 body 不再铺灰底，让 fixed 的壁纸层露出来 */
body[data-wall="1"] { background: transparent; }

/* ── SVG 折射滤镜（第 5 步）──────────────────────────────────────────── */
/* 噪声 → 高斯平滑成"起伏的厚薄" → 拿它位移背景采样点，边界就被折射。
   scale 决定强度：20~30 是玻璃甜点，太大整块扭成麻花。 */
.art-glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── 深色壁纸档（默认）：白字 + 投影 ─────────────────────────────────── */
body[data-wall="1"] {
  --ink: #ffffff;
  --ink-2: rgb(255 255 255 / .92);
  --ink-3: rgb(255 255 255 / .80);
  /* ★ 0.58 在深青玻璃上只有 3.93:1；提到 0.68 才够 4.5（次要说明也算正文） */
  --ink-4: rgb(255 255 255 / .68);
  --text-shadow: 0 1px 3px rgba(0, 0, 0, .45);

  --line: rgb(255 255 255 / .16);
  --line-strong: rgb(255 255 255 / .28);
  --glass-line: rgb(255 255 255 / .16);
  --glass-ring: rgb(255 255 255 / .45);

  /* 语义色：荧光化（在玻璃上要"发光"才看得见） */
  --ok: #5ef2a0;
  --ok-soft: rgb(94 242 160 / .16);
  --warn: #ffd166;
  --warn-soft: rgb(255 209 102 / .16);
  --warn-line: rgb(255 209 102 / .40);
  --danger: #ff8a8a;
  --danger-soft: rgb(255 138 138 / .18);
  --danger-line: rgb(255 138 138 / .38);

  --brand: #7ab8ff;
  --brand-ink: #a8d0ff;
  --brand-dark: #9ec6ff;
  --brand-soft: rgb(122 184 255 / .22);
  --brand-line: rgb(122 184 255 / .45);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
  --shadow: 0 4px 16px rgba(0, 0, 0, .34), 0 20px 50px -22px rgba(0, 0, 0, .60);

  color: var(--ink);
  background: transparent;
  text-shadow: var(--text-shadow);
}

/* ── 基础玻璃面 ───────────────────────────────────────────────────────── */
/* 三档玻璃：主面 / 凹陷面 / 弱面。alpha 由 JS 写在 --glass-a 上，
   省电模式下会被抬到 0.62（不模糊时要靠更厚的白遮住壁纸）。 */
body[data-wall="1"] .topbar,
body[data-wall="1"] .sidebar,
body[data-wall="1"] .card,
body[data-wall="1"] .stat,
body[data-wall="1"] .modal,
body[data-wall="1"] .login-card,
body[data-wall="1"] .toast,
body[data-wall="1"] .page-head,
body[data-wall="1"] .surface {
  background: var(--glass);
  backdrop-filter: blur(var(--surf-blur)) saturate(var(--surf-sat));
  -webkit-backdrop-filter: blur(var(--surf-blur)) saturate(var(--surf-sat));
  /* 第 4 步：亮边。inset 白线是"玻璃厚度"的来源；外描边定边界。 */
  border: 1px solid var(--glass-ring);
  box-shadow:
    inset 1px 1px 0 0 rgb(255 255 255 / .50),
    inset -1px -1px 0 0 rgb(255 255 255 / .12),
    0 8px 32px -8px rgba(0, 0, 0, .45);
}

/* 第 5 步：折射只给"大块"用（顶栏 / 侧栏 / 主卡片 / 弹窗）。
   ⚠️ 这里**必须继续用 var(--surf-blur)**：写死小值会把 32px 覆盖掉，
      结果是卡片背后的壁纸细节一点没糊 → 透出来一片发浑的灰，
      看着像"灰色卡片"而不是玻璃。这是"显灰"的真正原因。 */
body[data-wall="1"] .topbar,
body[data-wall="1"] .sidebar,
body[data-wall="1"] .card,
body[data-wall="1"] .modal {
  backdrop-filter: url(#art-glass) blur(var(--surf-blur)) saturate(var(--surf-sat));
  -webkit-backdrop-filter: url(#art-glass) blur(var(--surf-blur)) saturate(var(--surf-sat));
}

/* 顶栏/侧栏：通栏大块，白层更薄，壁纸透得更明显（参考图里侧栏几乎是透明的） */
body[data-wall="1"] .topbar,
body[data-wall="1"] .sidebar {
  background: rgb(255 255 255 / calc(var(--glass-a) * .45));
}
body[data-wall="1"] .sidebar { border-right: 1px solid var(--glass-line); }
body[data-wall="1"] .topbar { border-width: 0 0 1px 0; }

/* 拟态：悬停时玻璃"浮起来一点"（不是加深底色 —— 那是浅色主题的做法） */
body[data-wall="1"] .card,
body[data-wall="1"] .stat {
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
body[data-wall="1"] .card:hover {
  border-color: rgb(255 255 255 / .62);
  box-shadow:
    inset 1px 1px 0 0 rgb(255 255 255 / .62),
    inset -1px -1px 0 0 rgb(255 255 255 / .16),
    0 14px 40px -10px rgba(0, 0, 0, .55);
}
body[data-wall="1"] .stat:hover {
  border-color: rgb(255 255 255 / .55);
  transform: translateY(-1px);
}

/* 弹窗：它是焦点，白层稍厚一点（也有遮罩兜底） */
body[data-wall="1"] .modal {
  background: rgb(255 255 255 / calc(var(--glass-a) * 1.8));
  box-shadow:
    inset 1px 1px 0 0 rgb(255 255 255 / .55),
    0 24px 70px -20px rgba(0, 0, 0, .65);
}
body[data-wall="1"] .modal-mask { background: rgb(6 9 16 / .42); }
body[data-wall="1"] .modal-foot { background: rgb(255 255 255 / .06); }
body[data-wall="1"] .modal-x:hover { background: rgb(255 255 255 / .14); }

/* ── 凹陷面：输入框 / 次级按钮 ────────────────────────────────────────── */
/* 玻璃上的输入框做成"比玻璃更暗一层 + 内阴影"，才有真正的凹陷感 */
body[data-wall="1"] input[type="text"],
body[data-wall="1"] input[type="password"],
body[data-wall="1"] input[type="number"],
body[data-wall="1"] input[type="search"],
body[data-wall="1"] input[type="email"],
body[data-wall="1"] select,
body[data-wall="1"] textarea,
body[data-wall="1"] .btn:not(.btn-primary):not(.btn-danger) {
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .22);
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
  text-shadow: var(--text-shadow);
}
body[data-wall="1"] input:focus,
body[data-wall="1"] select:focus,
body[data-wall="1"] textarea:focus {
  border-color: var(--brand);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 3px rgb(122 184 255 / .28);
}
body[data-wall="1"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
body[data-wall="1"] option { background: #1a2233; color: #fff; }
body[data-wall="1"] input::placeholder,
body[data-wall="1"] textarea::placeholder { color: rgb(255 255 255 / .48); }
body[data-wall="1"] input:disabled,
body[data-wall="1"] select:disabled,
body[data-wall="1"] textarea:disabled {
  background: rgb(255 255 255 / .04);
  color: rgb(255 255 255 / .40);
}

body[data-wall="1"] .btn:hover { background: rgb(255 255 255 / .18); }
body[data-wall="1"] .btn:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .30); }
body[data-wall="1"] .btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
body[data-wall="1"] .btn-ghost:hover { background: rgb(255 255 255 / .12); }
body[data-wall="1"] .btn-primary {
  background: linear-gradient(180deg, #7ab8ff, #4f92e8);
  border-color: rgb(255 255 255 / .35);
  color: #06121f;
  text-shadow: none;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .55), 0 4px 14px -4px rgba(0, 0, 0, .40);
}
body[data-wall="1"] .btn-primary:hover {
  background: linear-gradient(180deg, #93c8ff, #5fa2f5);
}
body[data-wall="1"] .btn-danger {
  background: rgb(255 138 138 / .18);
  border-color: var(--danger-line);
  color: var(--danger);
}

/* ── 导航 ─────────────────────────────────────────────────────────────── */
body[data-wall="1"] .nav-item {
  color: var(--ink-2);
  border: 1px solid transparent;
  text-shadow: var(--text-shadow);
}
body[data-wall="1"] .nav-item:hover { background: rgb(255 255 255 / .12); }
body[data-wall="1"] .nav-item.active {
  background: rgb(255 255 255 / .20);
  border-color: rgb(255 255 255 / .35);
  color: #fff;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .45), 0 4px 12px -4px rgba(0, 0, 0, .35);
}
body[data-wall="1"] .nav-item.active svg { stroke: #fff; }

/* ── 表格：密集内容不能透（字会花），用"实心玻璃" ────────────────────── */
body[data-wall="1"] .table thead th {
  background: rgb(12 16 26 / .55);
  color: var(--ink-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-strong);
}
body[data-wall="1"] .table tbody tr { background: rgb(12 16 26 / .28); }
body[data-wall="1"] .table tbody tr:hover { background: rgb(255 255 255 / .10); }
body[data-wall="1"] .table th,
body[data-wall="1"] .table td { border-bottom: 1px solid var(--line); }
body[data-wall="1"] .table tr.is-fail td { background: rgb(255 138 138 / .14); }
body[data-wall="1"] .table tr.is-fail:hover td { background: rgb(255 138 138 / .22); }
body[data-wall="1"] .table .cell-strong { color: #fff; }

/* ── 徽标：半透明色块 + 亮字 ──────────────────────────────────────────── */
body[data-wall="1"] .badge-muted { background: rgb(255 255 255 / .14); color: var(--ink-2); border-color: rgb(255 255 255 / .22); }
body[data-wall="1"] .badge-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
body[data-wall="1"] .badge-ok { background: var(--ok-soft); color: var(--ok); border-color: rgb(94 242 160 / .38); }
body[data-wall="1"] .badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
body[data-wall="1"] .badge-bad { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

/* ── 次级面：tabs / 提示块 / 进度条 ───────────────────────────────────── */
body[data-wall="1"] .tabs,
body[data-wall="1"] .card-head,
body[data-wall="1"] .filters,
body[data-wall="1"] .progress,
body[data-wall="1"] .check:hover {
  background: rgb(255 255 255 / .07);
}
body[data-wall="1"] .tab { color: var(--ink-3); text-shadow: var(--text-shadow); }
body[data-wall="1"] .tab:hover { color: var(--ink); }
body[data-wall="1"] .tab.active {
  color: #fff;
  background: rgb(255 255 255 / .20);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .40);
}

/* ── 页面标题 / 提示条 / 空态 ────────────────────────────────────────── */
body[data-wall="1"] .page-head {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-left: -2px;
}
body[data-wall="1"] .page-head h2 { color: #fff; }
body[data-wall="1"] .page-head .sub { color: var(--ink-3); }
body[data-wall="1"] .banner {
  background: rgb(90 62 10 / .55);
  color: #ffe0a3;
  border-bottom: 1px solid rgb(255 209 102 / .30);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  text-shadow: var(--text-shadow);
}
body[data-wall="1"] .empty { color: var(--ink-4); }
body[data-wall="1"] .empty strong { color: var(--ink-3); }
body[data-wall="1"] .brand-mark {
  background: linear-gradient(180deg, #7ab8ff, #4f92e8);
  color: #06121f;
  text-shadow: none;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .55);
}
body[data-wall="1"] ::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / .24);
  border-radius: 8px;
}
body[data-wall="1"] ::-webkit-scrollbar-track { background: transparent; }

/* 内容区不铺底色，让壁纸透出来 */
body[data-wall="1"] .main,
body[data-wall="1"] .app-view { background: transparent; }

/* ── 低性能模式：只关模糊/折射，把白层加厚保证可读 ──────────────────── */
body[data-wall="1"][data-perf="low"] .topbar,
body[data-wall="1"][data-perf="low"] .sidebar,
body[data-wall="1"][data-perf="low"] .card,
body[data-wall="1"][data-perf="low"] .stat,
body[data-wall="1"][data-perf="low"] .modal,
body[data-wall="1"][data-perf="low"] .login-card,
body[data-wall="1"][data-perf="low"] .toast,
body[data-wall="1"][data-perf="low"] .page-head,
body[data-wall="1"][data-perf="low"] .table thead th {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 省电档没有模糊，标题底衬要更厚才压得住照片。
   ★ 这里只对亮色档成立；深色档改深色面（见下方），否则白字压白玻璃会糊。 */
body[data-wall="1"][data-perf="low"][data-wall-tone="light"] .page-head {
  background: rgb(255 255 255 / .92);
}

/* ── 省电档（深色壁纸）：没有模糊时，白层再厚也会把白字淹掉 ─────────────
   原实现用白 62% + 白字，实测对比度只有 ~1.6:1。这里改成"深色面 + 白字"，
   保留暗色玻璃的观感，也不给 GPU 加负担。这是 kit 相对原面板的修正。 */
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .topbar,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .sidebar,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .card,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .stat,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .modal,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .toast,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .page-head,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .surface {
  background: rgb(10 15 24 / .74);
  border-color: rgb(255 255 255 / .22);
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / .16),
    0 6px 22px -10px rgba(0, 0, 0, .55);
}
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .topbar,
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .sidebar {
  background: rgb(10 15 24 / .66);
}
body[data-wall="1"][data-perf="low"][data-wall-tone="dark"] .page-head {
  background: rgb(10 15 24 / .78);
}

/* 无壁纸时也不该有模糊 */
body[data-perf="low"] .topbar,
body[data-perf="low"] .sidebar,
body[data-perf="low"] .card,
body[data-perf="low"] .stat,
body[data-perf="low"] .modal,
body[data-perf="low"] .login-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #wall-layer, #wall-img, #wall-scrim { transition: none; }
}

/* ── 亮色壁纸档：白玻璃 + 深字 ───────────────────────────────────────── */
/* 壁纸平均亮度 > 0.62 时（白天空、雪景、浅色壁纸），白字在 8% 白玻璃上
   只有 ~3.5:1 —— 不合格。这时整体反相：白玻璃 + 深字 + 更厚的白层。
   由 glass.js 写在 body 上的 data-wall-tone 决定，用户换图会自动切。 */
body[data-wall-tone="light"] {
  --ink: #10161f;
  --ink-2: #1f2937;
  --ink-3: #333c49;
  /* ★ 亮底上要更深：0.55 那档只有 3.9~4.1，压到接近纯深灰才过 4.5 */
  --ink-4: #414b59;
  --text-shadow: 0 1px 2px rgba(255, 255, 255, .65);

  --line: rgb(15 23 42 / .16);
  --line-strong: rgb(15 23 42 / .28);
  --glass-line: rgb(15 23 42 / .14);
  --glass-ring: rgb(255 255 255 / .70);

  /* 语义色在亮底上要**压深**（和深色档反向） */
  --ok: #075c2c;
  --ok-soft: rgb(16 185 129 / .18);
  --warn: #7d4f06;
  --warn-soft: rgb(245 158 11 / .20);
  --warn-line: rgb(180 120 20 / .38);
  --danger: #961414;
  --danger-soft: rgb(239 68 68 / .16);
  --danger-line: rgb(190 60 60 / .34);

  --brand: #17479f;
  --brand-ink: #123a85;
  --brand-dark: #123a85;
  --brand-soft: rgb(37 99 235 / .16);
  --brand-line: rgb(37 99 235 / .34);
}

/* 亮色壁纸下白层要更厚，才压得住照片高光 */
body[data-wall-tone="light"] .topbar,
body[data-wall-tone="light"] .sidebar,
body[data-wall-tone="light"] .card,
body[data-wall-tone="light"] .stat,
body[data-wall-tone="light"] .modal,
body[data-wall-tone="light"] .login-card,
body[data-wall-tone="light"] .toast,
body[data-wall-tone="light"] .page-head,
body[data-wall-tone="light"] .surface {
  background: rgb(255 255 255 / calc(var(--glass-a) * 3.4 + .22));
  border-color: rgb(255 255 255 / .80);
  box-shadow:
    inset 1px 1px 0 0 rgb(255 255 255 / .90),
    inset -1px -1px 0 0 rgb(15 23 42 / .06),
    0 8px 32px -8px rgba(15, 23, 42, .28);
}
body[data-wall-tone="light"] input[type="text"],
body[data-wall-tone="light"] input[type="password"],
body[data-wall-tone="light"] input[type="number"],
body[data-wall-tone="light"] input[type="search"],
body[data-wall-tone="light"] input[type="email"],
body[data-wall-tone="light"] select,
body[data-wall-tone="light"] textarea,
body[data-wall-tone="light"] .btn:not(.btn-primary):not(.btn-danger) {
  background: rgb(255 255 255 / .62);
  border-color: rgb(15 23 42 / .20);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10);
}
body[data-wall-tone="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233d4756' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
body[data-wall-tone="light"] option { background: #fff; color: #10161f; }
body[data-wall-tone="light"] .nav-item { color: var(--ink-2); }
body[data-wall-tone="light"] .nav-item:hover { background: rgb(15 23 42 / .07); }
body[data-wall-tone="light"] .nav-item.active {
  background: rgb(255 255 255 / .85);
  border-color: rgb(15 23 42 / .14);
  color: var(--ink);
  box-shadow: inset 1px 1px 0 #fff, 0 2px 8px -2px rgba(15, 23, 42, .20);
}
body[data-wall-tone="light"] .nav-item.active svg { stroke: var(--brand); }
body[data-wall-tone="light"] .table thead th {
  background: rgb(255 255 255 / .70);
  color: var(--ink-3);
}
body[data-wall-tone="light"] .table tbody tr { background: rgb(255 255 255 / .42); }
body[data-wall-tone="light"] .table tbody tr:hover { background: rgb(255 255 255 / .72); }
body[data-wall-tone="light"] .table .cell-strong { color: var(--ink); }
body[data-wall-tone="light"] .badge-muted {
  background: rgb(15 23 42 / .10);
  color: var(--ink-2);
  border-color: rgb(15 23 42 / .16);
}
body[data-wall-tone="light"] .tab { color: var(--ink-3); }
body[data-wall-tone="light"] .tab.active {
  color: var(--ink);
  background: rgb(255 255 255 / .85);
  box-shadow: inset 1px 1px 0 #fff;
}
body[data-wall-tone="light"] .tabs,
body[data-wall-tone="light"] .card-head,
body[data-wall-tone="light"] .filters,
body[data-wall-tone="light"] .progress {
  background: rgb(15 23 42 / .05);
}
body[data-wall-tone="light"] .banner {
  background: rgb(255 243 214 / .85);
  color: #7a4b04;
  border-bottom-color: rgb(180 120 20 / .30);
}
body[data-wall-tone="light"] .modal { background: rgb(255 255 255 / .92); }
body[data-wall-tone="light"] .modal-mask { background: rgb(15 23 42 / .34); }
body[data-wall-tone="light"] .modal-foot { background: rgb(15 23 42 / .04); }
body[data-wall-tone="light"] .btn-primary { color: #fff; text-shadow: none; }
body[data-wall-tone="light"] .page-head h2 { color: var(--ink); }
body[data-wall-tone="light"] ::-webkit-scrollbar-thumb { background: rgb(15 23 42 / .22); }