/* ============================================================
   Needsofnature CN · Liquid Glass Edition
   真折射：SDF 位移贴图 + feDisplacementMap + RGB 色散
   ============================================================ */
html[data-theme="glass"]{
  --bg: #0b0b14;
  --bg-soft: #131320;
  --card: rgba(20, 22, 36, 0.44);
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.17);
  --text: #e6e9f7;
  --muted: #9aa0bd;
  --faint: #6b7089;
  --accent: #8ef1ff;
  --accent-2: #c9a6ff;
  --accent-3: #ffb48a;
  --green: #9ff5b8;
  --red: #ff8fa8;
  --yellow: #ffe08a;
  --radius: 22px;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --glass-blur: 22px;
  --glass-sat: 175%;
  --glass-alpha: 0.052;
}
/* ---------- 背景：光晕 + 网格（给折射提供可被掰弯的内容） ---------- */
html[data-theme="glass"] body::before{
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(142, 241, 255, 0.20), transparent 70%),
    radial-gradient(34% 28% at 84% 22%, rgba(201, 166, 255, 0.18), transparent 70%),
    radial-gradient(40% 34% at 66% 88%, rgba(255, 180, 138, 0.14), transparent 70%),
    radial-gradient(30% 26% at 12% 82%, rgba(159, 245, 184, 0.10), transparent 70%);
  filter: blur(30px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}
html[data-theme="glass"] body::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.115) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 55%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 55%, transparent 92%);
}
html[data-theme="glass"] body{
  background: var(--bg);
  color: var(--text);
  font: 15px/1.68 "Sora", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* ---------- 玻璃基类 ---------- */
html[data-theme="glass"] .glass{
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, var(--glass-alpha));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
/* 真折射：Chromium 才认 backdrop-filter: url() */
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .glass[data-lg="card"]{
    backdrop-filter: url(#lgCard) blur(6px) saturate(190%);
    -webkit-backdrop-filter: url(#lgCard) blur(6px) saturate(190%);
  }
html[data-theme="glass"] .glass[data-lg="pill"]{
    backdrop-filter: url(#lgPill) blur(3px) saturate(200%);
    -webkit-backdrop-filter: url(#lgPill) blur(3px) saturate(200%);
  }
html[data-theme="glass"] .glass[data-lg="nav"]{
    backdrop-filter: url(#lgNav) blur(14px) saturate(180%);
    -webkit-backdrop-filter: url(#lgNav) blur(14px) saturate(180%);
  }
html[data-theme="glass"] .glass[data-lg="btn"]{
    backdrop-filter: url(#lgBtn) blur(3px) saturate(200%);
    -webkit-backdrop-filter: url(#lgBtn) blur(3px) saturate(200%);
  }
html[data-theme="glass"] .glass[data-lg="field"]{
    backdrop-filter: url(#lgField) blur(5px) saturate(170%);
    -webkit-backdrop-filter: url(#lgField) blur(5px) saturate(170%);
  }}
/* 边缘高光描边（伪元素，不参与折射，保持锐利） */
html[data-theme="glass"] .glass > .spec{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 1px rgba(255, 255, 255, 0.20);
}
/* 顶部斜向流光 */
html[data-theme="glass"] .glass > .sheen{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
}
html[data-theme="glass"] .glass > .sheen::before{
  content: '';
  position: absolute;
  top: -60%;
  left: -30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(12deg);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s;
}
html[data-theme="glass"] .glass:hover > .sheen::before{ transform: translateX(240%) rotate(12deg); }
html[data-theme="glass"] .glass > *:not(.spec):not(.sheen){ position: relative; z-index: 1; }
/* ---------- 卡片 ---------- */
html[data-theme="glass"] .card{
  background: rgba(255, 255, 255, var(--glass-alpha));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.32s, border-color 0.32s;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .card{
    backdrop-filter: url(#lgCard) blur(6px) saturate(190%);
    -webkit-backdrop-filter: url(#lgCard) blur(6px) saturate(190%);
  }}
html[data-theme="glass"] .card:hover{
  transform: translateY(-2px);
  border-color: var(--border-soft);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="glass"] .card h2{ font-size: 18px; letter-spacing: -0.01em; }
html[data-theme="glass"] .card h3{ color: var(--muted); font-size: 14px; }
/* ---------- 导航：悬浮液态条 ---------- */
html[data-theme="glass"] .nav{
  position: sticky;
  top: 10px;
  z-index: 60;
  margin: 10px auto 0;
  max-width: 1060px;
  width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 18px;
  background: rgba(14, 16, 28, 0.55);
  border: 1px solid var(--border);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .nav{
    backdrop-filter: url(#lgNav) blur(14px) saturate(180%);
    -webkit-backdrop-filter: url(#lgNav) blur(14px) saturate(180%);
  }}
html[data-theme="glass"] .nav .brand{
  font-weight: 750;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  margin-right: 12px;
  padding: 0 8px;
  color: var(--text);
  white-space: nowrap;
}
html[data-theme="glass"] .nav .brand b{
  background: linear-gradient(96deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 液态指示器 */
html[data-theme="glass"] .nav-ind{
  position: absolute;
  top: 7px;
  left: 0;
  height: calc(100% - 14px);
  border-radius: 13px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.07));
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 22px rgba(142, 241, 255, 0.14);
  backdrop-filter: blur(6px) saturate(200%);
  -webkit-backdrop-filter: blur(6px) saturate(200%);
  opacity: 0;
  will-change: transform, width;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .nav-ind{
    backdrop-filter: url(#lgPill) blur(2px) saturate(220%);
    -webkit-backdrop-filter: url(#lgPill) blur(2px) saturate(220%);
  }}
html[data-theme="glass"] .nav a.nav-link, html[data-theme="glass"] .nav button.nav-link, html[data-theme="glass"] .nav .who, html[data-theme="glass"] .nav .brand, html[data-theme="glass"] .nav .lang-btn{ position: relative; z-index: 1; }
html[data-theme="glass"] .nav a.nav-link, html[data-theme="glass"] .nav button.nav-link{
  color: var(--muted);
  font-size: 13.5px;
  padding: 7px 13px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.22s, transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme="glass"] .nav a.nav-link:hover, html[data-theme="glass"] .nav button.nav-link:hover{ color: var(--text); text-decoration: none; }
html[data-theme="glass"] .nav a.nav-link.active{ color: #06121a; font-weight: 620; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28); }
html[data-theme="glass"] .nav a.nav-link.active:hover{ text-decoration: none; }
html[data-theme="glass"] .nav .spacer{ flex: 1; }
html[data-theme="glass"] .nav .who{ color: var(--muted); font-size: 12.5px; padding: 0 8px; white-space: nowrap; }
html[data-theme="glass"] .nav .who b{ color: var(--accent-2); font-weight: 600; }
/* ---------- 按钮 ---------- */
html[data-theme="glass"] .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 9px 17px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 520;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 16px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1), background 0.22s,
              border-color 0.22s, box-shadow 0.22s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .btn{
    backdrop-filter: url(#lgBtn) blur(2px) saturate(210%);
    -webkit-backdrop-filter: url(#lgBtn) blur(2px) saturate(210%);
  }}
html[data-theme="glass"] .btn:hover{ background: rgba(255, 255, 255, 0.13); text-decoration: none; transform: translateY(-1px); }
html[data-theme="glass"] .btn:active{ transform: translateY(1px) scale(0.975); }
html[data-theme="glass"] .btn.primary{
  background: linear-gradient(150deg, rgba(142, 241, 255, 0.30), rgba(142, 241, 255, 0.14));
  border-color: rgba(142, 241, 255, 0.55);
  color: #eafcff;
  box-shadow: 0 6px 22px rgba(142, 241, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
html[data-theme="glass"] .btn.primary:hover{ background: linear-gradient(150deg, rgba(142, 241, 255, 0.42), rgba(142, 241, 255, 0.20)); }
html[data-theme="glass"] .btn.danger{
  border-color: rgba(255, 143, 168, 0.55);
  color: var(--red);
  background: rgba(255, 143, 168, 0.12);
}
html[data-theme="glass"] .btn.small{ padding: 5px 12px; font-size: 12.5px; border-radius: 11px; }
html[data-theme="glass"] .btn:disabled{ opacity: 0.45; cursor: not-allowed; transform: none; }
/* 涟漪 */
html[data-theme="glass"] .ripple{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 68%);
  animation: ripple 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  z-index: 2;
}
@keyframes ripple{
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* ---------- 输入 ---------- */
html[data-theme="glass"] input[type="text"], html[data-theme="glass"] input[type="password"], html[data-theme="glass"] input[type="number"], html[data-theme="glass"] textarea, html[data-theme="glass"] select{
  width: 100%;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  padding: 10px 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] input[type="text"], html[data-theme="glass"] input[type="password"], html[data-theme="glass"] input[type="number"], html[data-theme="glass"] textarea, html[data-theme="glass"] select{
    backdrop-filter: url(#lgField) blur(4px) saturate(180%);
    -webkit-backdrop-filter: url(#lgField) blur(4px) saturate(180%);
  }}
html[data-theme="glass"] input:focus, html[data-theme="glass"] textarea:focus, html[data-theme="glass"] select:focus{
  border-color: rgba(142, 241, 255, 0.60);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 0 3px rgba(142, 241, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-theme="glass"] label.field{ font-size: 13px; color: var(--muted); font-weight: 520; }
/* ---------- 作品卡 ---------- */
html[data-theme="glass"] .proj-card{
  display: block;
  color: var(--text);
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, var(--glass-alpha));
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1), border-color 0.34s, box-shadow 0.34s;
  position: relative;
  overflow: hidden;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .proj-card{
    backdrop-filter: url(#lgCard) blur(5px) saturate(190%);
    -webkit-backdrop-filter: url(#lgCard) blur(5px) saturate(190%);
  }}
html[data-theme="glass"] .proj-card::after{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-14deg);
  transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
html[data-theme="glass"] .proj-card:hover::after{ left: 120%; }
html[data-theme="glass"] .proj-card:hover{
  transform: translateY(-4px);
  border-color: rgba(142, 241, 255, 0.32);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-decoration: none;
}
html[data-theme="glass"] .proj-card .t{ font-size: 16px; font-weight: 650; margin-bottom: 5px; letter-spacing: -0.01em; }
html[data-theme="glass"] .proj-card .d{ color: var(--muted); font-size: 13px; min-height: 2.6em; }
html[data-theme="glass"] .proj-card .meta{ margin-top: 12px; font-size: 12px; color: var(--faint); display: flex; gap: 12px; flex-wrap: wrap; }
/* 入场错峰 */
html[data-theme="glass"] .stagger > *{ animation: rise 0.52s cubic-bezier(0.2, 0.9, 0.2, 1) backwards; }
html[data-theme="glass"] .stagger > *:nth-child(1){ animation-delay: 0.02s; }
html[data-theme="glass"] .stagger > *:nth-child(2){ animation-delay: 0.06s; }
html[data-theme="glass"] .stagger > *:nth-child(3){ animation-delay: 0.10s; }
html[data-theme="glass"] .stagger > *:nth-child(4){ animation-delay: 0.14s; }
html[data-theme="glass"] .stagger > *:nth-child(5){ animation-delay: 0.18s; }
html[data-theme="glass"] .stagger > *:nth-child(6){ animation-delay: 0.22s; }
html[data-theme="glass"] .stagger > *:nth-child(7){ animation-delay: 0.26s; }
html[data-theme="glass"] .stagger > *:nth-child(8){ animation-delay: 0.30s; }
html[data-theme="glass"] .stagger > *:nth-child(n+9){ animation-delay: 0.34s; }
@keyframes rise{
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* ---------- 标签芯片 ---------- */
html[data-theme="glass"] .tag-chip{
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: 99px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px) saturate(170%);
  -webkit-backdrop-filter: blur(8px) saturate(170%);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1), background 0.2s, color 0.2s, border-color 0.2s;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .tag-chip{
    backdrop-filter: url(#lgBtn) blur(2px) saturate(190%);
    -webkit-backdrop-filter: url(#lgBtn) blur(2px) saturate(190%);
  }}
html[data-theme="glass"] .tag-chip:hover{ border-color: var(--border-soft); color: var(--text); transform: translateY(-1px); }
html[data-theme="glass"] .tag-chip:active{ transform: scale(0.95); }
html[data-theme="glass"] .tag-chip.on{
  background: rgba(255, 143, 168, 0.16);
  border-color: rgba(255, 143, 168, 0.5);
  color: var(--red);
}
html[data-theme="glass"] .pill{
  display: inline-block;
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  margin-right: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px) saturate(170%);
  -webkit-backdrop-filter: blur(8px) saturate(170%);
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .pill{
    backdrop-filter: url(#lgPill) blur(2px) saturate(190%);
    -webkit-backdrop-filter: url(#lgPill) blur(2px) saturate(190%);
  }}
html[data-theme="glass"] .pill.cat{ color: var(--accent); border-color: rgba(142, 241, 255, 0.4); }
html[data-theme="glass"] .pill.hidden-tag{ opacity: 0.55; border-style: dashed; }
/* ---------- Hero ---------- */
html[data-theme="glass"] .hero{ text-align: center; padding: 62px 20px 40px; }
html[data-theme="glass"] .hero h1{
  font-size: 38px;
  line-height: 1.22;
  margin: 0 0 12px;
  letter-spacing: -0.025em;
  font-weight: 700;
}
html[data-theme="glass"] .hero h1 b{
  background: linear-gradient(96deg, var(--accent), var(--accent-2) 50%, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="glass"] .hero p{ color: var(--muted); max-width: 580px; margin: 0 auto; font-size: 14.5px; }
/* ---------- 其他组件 ---------- */
html[data-theme="glass"] .tabs{ border-bottom: 1px solid var(--border); }
html[data-theme="glass"] .tabs button{ color: var(--muted); font-size: 13.5px; padding: 10px 15px; border-radius: 11px 11px 0 0; }
html[data-theme="glass"] .tabs button:hover{ color: var(--text); }
html[data-theme="glass"] .tabs button.active{ color: var(--accent); border-bottom-color: var(--accent); }
html[data-theme="glass"] .ver-item{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px 17px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)){html[data-theme="glass"] .ver-item{
    backdrop-filter: url(#lgCard) blur(4px) saturate(180%);
    -webkit-backdrop-filter: url(#lgCard) blur(4px) saturate(180%);
  }}
html[data-theme="glass"] .changelog{ border-left: 2px solid rgba(142, 241, 255, 0.35); }
html[data-theme="glass"] .cmt{ border-bottom: 1px solid var(--border); }
html[data-theme="glass"] .cmt .who b{ color: var(--accent-2); }
html[data-theme="glass"] .rating .bar{ background: rgba(255, 143, 168, 0.35); border-radius: 99px; height: 8px; }
html[data-theme="glass"] .rating .bar .up{ background: linear-gradient(90deg, var(--green), #6ee7a0); }
html[data-theme="glass"] .table th{ color: var(--muted); font-weight: 560; }
html[data-theme="glass"] .table td{ border-bottom: 1px solid var(--border); }
html[data-theme="glass"] .toast{
  background: rgba(18, 20, 34, 0.82);
  border: 1px solid rgba(142, 241, 255, 0.4);
  border-radius: 15px;
  padding: 12px 22px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
}
html[data-theme="glass"] .mod-item .ic{
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="glass"] .empty{ color: var(--faint); font-size: 13.5px; padding: 44px 0; }
html[data-theme="glass"] a{ color: var(--accent); }
html[data-theme="glass"] .muted{ color: var(--muted); }
html[data-theme="glass"] .faint{ color: var(--faint); }
/* 页面切换：液体扫光 */
html[data-theme="glass"] .wrap{ animation: pageIn 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes pageIn{
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 720px){html[data-theme="glass"] .nav{ width: calc(100% - 16px); top: 6px; margin-top: 6px; padding: 6px 8px; overflow-x: auto; }
html[data-theme="glass"] .nav .brand{ font-size: 13.5px; margin-right: 6px; }
html[data-theme="glass"] .hero{ padding: 40px 16px 28px; }
html[data-theme="glass"] .hero h1{ font-size: 27px; }
html[data-theme="glass"] .card{ padding: 18px; }
html[data-theme="glass"] .wrap{ padding: 18px 12px 60px; }}
@media (prefers-reduced-motion: reduce){html[data-theme="glass"] *, html[data-theme="glass"] *::before, html[data-theme="glass"] *::after{
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
html[data-theme="glass"] body::before{ animation: none; }}