/* =============================================================
   Downloadery 资源下载市场
   · 现代 · 专业 · 有“可下载”的资源市场质感
   · 支持浅色 / 深色 用户自主切换（记忆偏好）
   · 支持卡片 / 列表 双视图切换（记忆偏好）
   · 布局：左侧栏 + 主内容（全宽）
   ============================================================= */

/* ---------- 字体 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Design Tokens — 浅色（默认）
   ============================================================ */
:root,
:root[data-theme="light"] {
  /* 品牌主色：下载蓝 + 激活青绿（资源站的"可信度"与"可点击"） */
  --brand:      #0B63E5;  /* 经典下载蓝，可信 · 明确 */
  --brand-600:  #0A55C1;
  --brand-500:  #3B82F6;  /* 按钮高亮 */
  --brand-100:  #DBEAFE;
  --brand-50:   #EFF6FF;

  --accent:     #14B8A6;  /* teal-500 — 确认/直达 CTA 色（可下载语义） */
  --accent-400: #2DD4BF;
  --accent-600: #0D9488;
  --accent-50:  #F0FDFA;

  --amber:      #D97706;  /* amber-600 — 精选/难度/提醒 */
  --amber-50:   #FFFBEB;
  --rose:       #E11D48;
  --rose-50:    #FFF1F2;

  /* 中性色：暖灰纸张 + 近墨文字（柔和高对比） */
  --bg:         #F6F7FB;
  --bg-alt:     #EEF1F7;
  --surface:    #FFFFFF;
  --surface-2:  #FAFBFE;
  --ink-900:    #0C1222;
  --ink-800:    #1E2640;
  --ink-700:    #334155;
  --ink-600:    #475569;
  --ink-500:    #64748B;
  --ink-400:    #94A3B8;
  --ink-300:    #CBD5E1;
  --ink-200:    #E2E8F0;
  --ink-100:    #F1F5F9;
  --ink-50:     #F8FAFC;

  /* 分割线 / 边框 */
  --line:         rgba(12, 18, 34, 0.07);
  --line-strong:  rgba(12, 18, 34, 0.13);
  --ring:         rgba(11, 99, 229, 0.18);

  /* 阴影：收敛、更有"点击感"、少脏污 */
  --s-xs: 0 1px 2px rgba(12, 18, 34, 0.04), 0 1px 1px rgba(12, 18, 34, 0.03);
  --s-sm: 0 2px 6px rgba(12, 18, 34, 0.05), 0 10px 30px -14px rgba(12, 18, 34, 0.14);
  --s-md: 0 4px 12px rgba(12, 18, 34, 0.06), 0 22px 56px -22px rgba(12, 18, 34, 0.20);
  --s-lg: 0 26px 72px -24px rgba(12, 18, 34, 0.28), 0 10px 30px -14px rgba(12, 18, 34, 0.18);
  --s-card-h: 0 16px 52px -22px rgba(11, 99, 229, 0.30), 0 6px 14px -6px rgba(12, 18, 34, 0.08);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.7);

  /* 圆角：下载市场偏"方·稳"，整体略微缩小 — 但卡片保留较大圆角 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --pill: 999px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 400ms;

  /* 字体 */
  --f-display:  "Fraunces", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", Georgia, serif;
  --f-sans:     "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   Design Tokens — 深色
   ============================================================ */
:root[data-theme="dark"] {
  --brand:      #60A5FA;  /* blue-400 高亮 */
  --brand-600:  #93C5FD;
  --brand-500:  #60A5FA;
  --brand-100:  rgba(96, 165, 250, 0.18);
  --brand-50:   rgba(96, 165, 250, 0.10);

  --accent:     #2DD4BF;
  --accent-400: #5EEAD4;
  --accent-600: #2DD4BF;
  --accent-50:  rgba(45, 212, 191, 0.14);

  --amber:      #FBBF24;
  --amber-50:   rgba(251, 191, 36, 0.12);
  --rose:       #FB7185;
  --rose-50:    rgba(251, 113, 133, 0.12);

  --bg:         #0A0F1F;
  --bg-alt:     #0D142A;
  --surface:    #121935;
  --surface-2:  #172142;
  --ink-900:    #F3F6FC;
  --ink-800:    #E3E9F5;
  --ink-700:    #CBD5E1;
  --ink-600:    #94A3B8;
  --ink-500:    #64748B;
  --ink-400:    #475569;
  --ink-300:    #334155;
  --ink-200:    #1E293B;
  --ink-100:    #162043;
  --ink-50:     #121935;

  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --ring:         rgba(96, 165, 250, 0.28);

  --s-xs: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.32);
  --s-sm: 0 2px 10px rgba(0,0,0,0.45), 0 12px 36px -16px rgba(0,0,0,0.60);
  --s-md: 0 6px 18px rgba(0,0,0,0.50), 0 28px 64px -26px rgba(0,0,0,0.70);
  --s-lg: 0 34px 90px -28px rgba(0,0,0,0.75), 0 12px 36px -16px rgba(0,0,0,0.60);
  --s-card-h: 0 18px 60px -26px rgba(96, 165, 250, 0.36), 0 8px 18px -8px rgba(0,0,0,0.45);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ---------- 全局基础 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--ink-800);
  background: var(--bg);
  line-height: 1.6;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

/* ============================================================
   背景：下载蓝的柔和辉光（Downloadery glow）— 随主题换色
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 100% -10%, rgba(11, 99, 229, 0.16), transparent 62%),
    radial-gradient(820px 560px at -10% 30%, rgba(20, 184, 166, 0.12), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(217, 119, 6, 0.08), transparent 62%);
  filter: saturate(1.05);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(920px 620px at 100% 0%, rgba(96, 165, 250, 0.26), transparent 62%),
    radial-gradient(820px 560px at -10% 30%, rgba(45, 212, 191, 0.16), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(251, 191, 36, 0.08), transparent 62%);
  filter: saturate(1.15);
}

/* 细粒噪点，营造纸质感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.app { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ============================================================
   侧边栏
   ============================================================ */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 276px;
  flex-shrink: 0;
  padding: 28px 22px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
  overflow-y: auto;
}
/* 玻璃态内发光边缘 */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 35%);
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar-brand {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding-bottom: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  grid-row: 1 / span 2;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  box-shadow: var(--s-sm), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), var(--inset-hi);
  position: relative;
}
.brand-logo::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--surface);
}
.brand-title {
  grid-column: 2; grid-row: 1;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand-sub {
  grid-column: 2; grid-row: 2;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}

/* 视图 Tab 胶囊 */
.side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: var(--bg-alt);
  border-radius: var(--pill);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
}
.side-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-600);
  border-radius: var(--pill);
  cursor: pointer;
  z-index: 1;
  transition: color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.side-tab svg { width: 14px; height: 14px; }
.side-tab:hover { color: var(--ink-800); }
.side-tab.active { color: #fff; }
.side-tabs::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  left: 4px;
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  border-radius: var(--pill);
  box-shadow: 0 6px 20px -10px var(--brand), var(--inset-hi);
  transition: transform var(--t-base) var(--ease);
  z-index: 0;
}
.side-tabs:has(.side-tab:nth-child(2).active)::before { transform: translateX(100%); }

/* 导航 */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-700);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: all var(--t-fast) var(--ease);
}
.nav-item:hover {
  background: var(--bg-alt);
  color: var(--ink-900);
  transform: translateX(1px);
}
.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  color: var(--brand-600);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
:root[data-theme="dark"] .nav-item.active { color: var(--brand); }
.nav-item .count {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-500);
  background: var(--bg-alt);
  padding: 2px 8px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  font-weight: 600;
}
.nav-item.active .count {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand-600);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
:root[data-theme="dark"] .nav-item.active .count { color: var(--brand); }

.nav-topic .topic-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
}
.nav-topic .topic-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.nav-divider {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 14px 12px 6px;
  font-weight: 700;
}

.side-empty {
  padding: 24px 12px;
  color: var(--ink-500);
  font-size: 13px;
  text-align: center;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
}

/* 侧栏 Footer */
.sidebar-footer {
  margin-top: 16px;
  padding: 16px 12px 4px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-500);
}
.sidebar-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 700;
  margin-top: 6px;
}
.sidebar-footer a:hover { color: var(--accent-600); }

/* 主题切换按钮 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12.5px;
  transition: all var(--t-base) var(--ease);
  box-shadow: var(--s-xs), var(--inset-hi);
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
  box-shadow: var(--s-sm), var(--inset-hi);
  color: var(--brand-600);
}
:root[data-theme="dark"] .theme-toggle:hover { color: var(--brand); }
.theme-toggle svg {
  width: 15px; height: 15px;
  transition: transform var(--t-base) var(--ease);
}
.theme-toggle:hover svg { transform: rotate(-12deg) scale(1.05); }
.theme-toggle .tt-track {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  width: 40px; height: 22px;
  padding: 2px;
  border-radius: var(--pill);
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  position: relative;
}
.theme-toggle .tt-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
:root[data-theme="dark"] .theme-toggle .tt-thumb {
  transform: translateX(18px);
  background: linear-gradient(145deg, #1e293b, #0f172a);
}

/* ============================================================
   主内容
   ============================================================ */
.main {
  flex: 1;
  min-width: 0;
  padding: 22px 32px 80px;
  position: relative;
  z-index: 1;
}

/* Hero：极窄标题 + 横向巨搜 + 统计磁贴（Downloadery 风格） */
.hero {
  padding: 26px 8px 20px;
  position: relative;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: var(--brand-600);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  font-family: var(--f-mono);
}
:root[data-theme="dark"] .hero-eyebrow { color: var(--brand); }
.hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.hero-title {
  margin: 14px 0 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 900;
}
.hero-sub {
  margin: 0 0 22px;
  color: var(--ink-500);
  font-size: 15px;
  max-width: 720px;
  line-height: 1.75;
}

/* Hero-meta —— Downloadery "下载中心控制面板" 整体容器卡
   —— 搜索框主区 + 4 个横向统计磁贴，表面带渐变与顶部极光条 */
.hero-meta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 7%, var(--surface)) 0%,
      var(--surface) 40%,
      color-mix(in srgb, var(--accent) 6%, var(--surface)) 100%);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r-2xl) + 2px);
  box-shadow: var(--s-sm), var(--inset-hi);
  overflow: hidden;
}
.hero-meta::before {
  /* 顶部极光条（蓝→青绿渐变） */
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-500) 40%, var(--accent) 80%, var(--accent-400) 100%);
  opacity: 0.9;
  pointer-events: none;
}
.hero-meta::after {
  /* 左下柔光：品牌色弥散光点 */
  content: "";
  position: absolute;
  left: -80px; bottom: -90px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero-meta > * { position: relative; z-index: 1; }

/* ======= 搜索框（Download Control 主控件）：左侧渐变描边 + ⌘K 快捷键 + 图标发光容器 ======= */
.search-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 18px;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r-xl) + 2px);
  box-shadow: var(--s-xs), var(--inset-hi);
  transition: all var(--t-base) var(--ease);
  position: relative;
  isolation: isolate;
}
.search-box::before {
  /* 渐变描边底层（聚焦/悬浮显现） */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: -1;
  pointer-events: none;
}
.search-box::after {
  /* 聚焦时的外发光环 */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--r-xl) + 6px);
  background: radial-gradient(120% 200% at 20% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
              radial-gradient(120% 200% at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: -2;
  pointer-events: none;
}
.search-box:hover::before,
.search-box:focus-within::before { opacity: 1; }
.search-box:focus-within::after  { opacity: 0.9; }
.search-box:focus-within {
  transform: translateY(-1.5px);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand) 70%, transparent),
              0 0 0 4px var(--ring), var(--inset-hi);
  border-color: transparent;
}
.search-box > .sb-icon {
  width: 40px; height: 40px;
  border-radius: 13px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand) 55%, #fff) 0%, var(--brand) 55%, var(--brand-600) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px -12px var(--brand),
              inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}
.search-box > .sb-icon::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -30%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 60%);
}
.search-box > .sb-icon svg { width: 18px; height: 18px; }

.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15.5px;
  color: var(--ink-800);
  font-weight: 600;
  font-family: var(--f-sans);
  letter-spacing: 0.002em;
}
.search-box input::placeholder { color: var(--ink-400); font-weight: 400; }

.search-box .sb-kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #000 5%, transparent);
  flex-shrink: 0;
  user-select: none;
}
.search-box .sb-kbd kbd {
  all: unset;
  display: inline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: 10.5px;
}
:root[data-theme="dark"] .search-box .sb-kbd {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink-400);
}
.search-box:focus-within .sb-kbd {
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--brand-600);
}
:root[data-theme="dark"] .search-box:focus-within .sb-kbd { color: var(--brand); }

/* ======= 4 个统计磁贴：1 横排 4 格（下载站的"数据概览带"） ======= */
.hero-meta .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.meta-stat {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 11px;
  border-radius: calc(var(--r-lg) + 1px);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  color: var(--ink-700);
  box-shadow: var(--s-xs);
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  isolation: isolate;
}
.meta-stat::before {
  /* 左上 4 像素的品牌色指示条（data-accent） */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: var(--meta-accent, var(--brand));
  opacity: 0.92;
  pointer-events: none;
}
.meta-stat::after {
  /* 右下角柔光（data-accent） */
  content: "";
  position: absolute;
  right: -50%; bottom: -60%;
  width: 180px; height: 180px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--meta-accent, var(--brand)) 22%, transparent) 0%,
    transparent 60%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}
.meta-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--meta-accent, var(--brand)) 35%, transparent);
  box-shadow: var(--s-sm),
              0 10px 24px -14px color-mix(in srgb, var(--meta-accent, var(--brand)) 60%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--meta-accent, var(--brand)) 5%, var(--surface)) 0%,
      var(--surface) 100%);
}
.meta-stat .ms-icon {
  width: 34px; height: 34px;
  border-radius: 11px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--meta-accent, var(--brand)) 14%, var(--surface)) 0%,
      color-mix(in srgb, var(--meta-accent, var(--brand)) 22%, var(--bg-alt)) 100%);
  border: 1px solid color-mix(in srgb, var(--meta-accent, var(--brand)) 24%, transparent);
  color: var(--meta-accent, var(--brand-600));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform var(--t-fast) var(--ease);
}
:root[data-theme="dark"] .meta-stat .ms-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.meta-stat:hover .ms-icon { transform: rotate(-6deg) scale(1.06); }
.meta-stat .ms-icon svg { width: 16px; height: 16px; }

.meta-stat .stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.meta-stat .label-text {
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--f-mono);
  line-height: 1;
}
.meta-stat .num {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ink-900);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.meta-stat .ms-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-600);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  line-height: 1.1;
}
:root[data-theme="dark"] .meta-stat .ms-delta { color: var(--accent); }
.meta-stat .ms-delta svg { width: 9px; height: 9px; }

/* 4 个统计项的 data-accent 差异化着色 */
.meta-stat[data-accent="cat"]    { --meta-accent: #3B82F6; }  /* brand-500 蓝 */
.meta-stat[data-accent="topic"]  { --meta-accent: #14B8A6; }  /* accent 青绿 */
.meta-stat[data-accent="work"]   { --meta-accent: #6366F1; }  /* indigo-500 作品紫 */
.meta-stat[data-accent="star"]   { --meta-accent: #F59E0B; }  /* amber-500 精选金 */

/* 筛选胶囊行 */
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-400);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--f-mono);
  margin-right: 2px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-600);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
}
.pill:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
  color: var(--brand-600);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .pill:hover { color: var(--brand); }
.pill.active {
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px -10px var(--brand);
}
.pill svg { width: 13px; height: 13px; }

/* 分隔头：如「全部作品 · 共 N 个」 */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 4px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-head h2::before {
  content: "";
  width: 4px; height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.section-head .meta {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-500);
}

/* ============================================================
   作品卡片：现代卡片（封面 + 标题 + 标签 + 悬浮交互）
   class 约定来自 app.js -> workCardEl()
   ============================================================ */
.cards-grid,
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* -------- 作品卡片（默认卡片视图） -------- */
.work-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  box-shadow: var(--s-xs);
  min-height: 338px;
}
.work-card::before {
  /* 顶部极光细条 —— hover 显现（Downloadery：蓝→绿渐变） */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-500), var(--accent));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: 2;
  pointer-events: none;
}
.work-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: var(--s-card-h);
}
.work-card:hover::before { opacity: 1; }

.work-code {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink-800);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--ink-900) 10%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--f-mono);
  letter-spacing: 0.03em;
  z-index: 5;
}

/* 缩略图区（卡片模式：封面大图；列表模式：左方小图） */
.work-head {
  position: relative;
}
.work-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--bg-alt), var(--ink-100));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 44px;
  color: color-mix(in srgb, var(--brand) 55%, var(--ink-300));
}
:root[data-theme="dark"] .work-thumb {
  background: linear-gradient(135deg, var(--surface-2), var(--ink-200));
  color: color-mix(in srgb, var(--brand) 70%, var(--ink-300));
}
.work-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.work-card:hover .work-thumb img { transform: scale(1.05); }

/* 覆盖在缩略图上的角标（沿用原有 class 约定，在 work-thumb 父级下用绝对定位） */
.work-card > .work-featured-pin,
.work-card .work-featured-pin { display: none; }

/* 标题行 + 标签 主体区 */
.work-title-row {
  padding: 16px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.work-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--ink-600);
  border: 1px solid var(--line);
  font-family: var(--f-sans);
  letter-spacing: 0.01em;
}
.tag.tag-diff-easy    { background: var(--brand-50);  color: var(--brand-600); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.tag.tag-diff-mid     { background: var(--amber-50);  color: var(--amber);     border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.tag.tag-diff-hard    { background: var(--rose-50);   color: var(--rose);      border-color: color-mix(in srgb, var(--rose) 22%, transparent); }
.tag.tag-disk         { font-family: var(--f-mono); font-weight: 600; }
.tag.tag-disk[data-d="baidu"]  { background: color-mix(in srgb, #3371c8 10%, var(--surface)); color: #3371c8; border-color: color-mix(in srgb, #3371c8 25%, transparent); }
.tag.tag-disk[data-d="aliyun"] { background: color-mix(in srgb, #FF8C1A 10%, var(--surface)); color: var(--amber); border-color: color-mix(in srgb, #FF8C1A 25%, transparent); }
.tag.tag-disk[data-d="quark"]  { background: color-mix(in srgb, #6366F1 12%, var(--surface)); color: var(--accent-600); border-color: color-mix(in srgb, #6366F1 25%, transparent); }
.tag.tag-disk[data-d="other"]  { background: var(--bg-alt); color: var(--ink-500); }

/* 作品描述 */
.work-desc {
  margin: 0;
  padding: 2px 18px 0;
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部：信息 + 获取按钮 */
.work-footer {
  margin-top: auto;
  padding: 14px 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.work-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-400);
}
.work-info > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--pill);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-500);
  white-space: nowrap;
}
.work-info svg { width: 12px; height: 12px; color: var(--ink-400); }

/* 直达提示 */
.direct-tip {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--accent-600) !important;
  background: var(--accent-50) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
  font-weight: 700;
}
:root[data-theme="dark"] .direct-tip { color: var(--accent) !important; }
.direct-tip svg { color: var(--accent) !important; }

/* 获取按钮（整体渐变胶囊 —— 下载蓝主按钮；直达：青绿） */
.btn-get {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--pill);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
  border: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: 0 10px 24px -12px var(--brand), var(--inset-hi);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-get:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px var(--brand), var(--inset-hi);
  filter: saturate(1.1);
}
.btn-get.free.is-direct {
  background: linear-gradient(145deg, var(--accent-600), var(--accent));
  box-shadow: 0 10px 24px -12px var(--accent);
}
.btn-get svg { width: 13px; height: 13px; }

/* 专题详情：头部横幅 */
.topic-hero {
  padding: 28px 30px;
  border-radius: var(--r-2xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366F1) 18%, var(--surface)) 0%, var(--surface) 60%),
    var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--s-sm);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.topic-hero::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%);
  filter: blur(10px);
  opacity: 0.6;
}
.topic-cover {
  position: relative;
  z-index: 1;
  width: 180px; height: 120px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-alt), var(--ink-100));
  border: 1px solid var(--line-strong);
  box-shadow: var(--s-sm);
}
.topic-cover img { width: 100%; height: 100%; object-fit: cover; }
.topic-info { position: relative; z-index: 1; min-width: 0; }
.topic-info h1 {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 30px;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.topic-info p {
  margin: 0 0 10px;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.75;
}
.topic-info .ti-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-500);
}
.topic-info .ti-meta .chip {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-weight: 600;
}

/* 专题集合：卡片网格 + 列表视图（class 来自 app.js 专题集合渲染） */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.topic-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  box-shadow: var(--s-xs);
  display: flex;
  flex-direction: column;
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--s-card-h);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

.topic-card .topic-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, var(--bg-alt), var(--ink-100));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-card .topic-cover::after {
  /* 顶部色条 */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, linear-gradient(90deg, var(--brand), var(--accent)));
}
.topic-card .topic-cover.topic-cover-color {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent, var(--brand)) 42%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--brand)) 22%, var(--surface)) , var(--bg-alt));
}
.topic-card .topic-cover img { width: 100%; height: 100%; object-fit: cover; }
.topic-card .topic-cover-emoji {
  font-size: 46px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.1));
}
.topic-card .topic-featured-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: linear-gradient(145deg, var(--amber), #b45309);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 6px 14px -4px rgba(217, 119, 6, 0.6);
}
.topic-card .topic-featured-badge svg { width: 12px; height: 12px; }

.topic-card .topic-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.topic-card .topic-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink-900);
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topic-card .topic-title .topic-code {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--accent-600);
  background: var(--accent-50);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  flex-shrink: 0;
}
.topic-card .topic-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-500);
  line-height: 1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.topic-card .topic-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--ink-500);
  font-family: var(--f-mono);
}
.topic-card .topic-meta > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
}
.topic-card .topic-meta svg { width: 13px; height: 13px; color: var(--ink-400); }
.topic-card .topic-enter {
  font-weight: 700;
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:root[data-theme="dark"] .topic-card .topic-enter { color: var(--brand); }
.topic-card .topic-enter svg { color: inherit; width: 13px; height: 13px; }

/* 空态 */
.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-500);
}
.empty-state .es-icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: var(--bg-alt);
  border: 1px dashed var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--ink-400);
}
.empty-state h3 {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink-800);
}
.empty-state p { margin: 0; font-size: 13px; line-height: 1.7; }

/* ============================================================
   分页
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 18px 22px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--s-xs), var(--inset-hi);
  flex-wrap: wrap;
}
.pg-info {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
}
.pg-info strong {
  color: var(--ink-900);
  font-weight: 700;
}
.pg-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pg-ctrl button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-700);
  cursor: pointer;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12.5px;
  transition: all var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--inset-hi);
}
.pg-ctrl button:hover:not(:disabled):not(.active) {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
  color: var(--brand-600);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .pg-ctrl button:hover:not(:disabled):not(.active) { color: var(--brand); }
.pg-ctrl button.active {
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -8px var(--brand);
  font-weight: 800;
}
.pg-ctrl button:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-ctrl svg { width: 14px; height: 14px; }
.pg-ctrl .pg-jump {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-500);
}
.pg-ctrl .pg-jump input {
  width: 60px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-800);
  font-family: var(--f-mono);
  font-size: 12px;
  text-align: center;
}
.pg-ctrl .pg-jump input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ============================================================
   模态框：获取链接
   ============================================================ */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn var(--t-base) var(--ease-out);
}
:root[data-theme="dark"] .modal-mask { background: rgba(5, 8, 20, 0.72); }
.modal-mask.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  width: 100%;
  max-width: 540px;
  border-radius: var(--r-2xl);
  box-shadow: var(--s-lg);
  overflow: hidden;
  animation: popIn 360ms var(--ease-out);
  border: 1px solid var(--line-strong);
  position: relative;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--amber));
}
.modal-head {
  padding: 22px 26px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.modal-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  min-width: 0;
  line-height: 1.3;
}
.modal-close {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 18px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.modal-close:hover {
  background: var(--rose-50);
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 25%, transparent);
  transform: rotate(90deg);
}

.modal-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.modal-meta {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.modal-meta .mm-cover {
  width: 68px; height: 68px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--accent-600));
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  color: #fff;
  font-size: 24px;
}
.modal-meta .mm-cover img { width: 100%; height: 100%; object-fit: cover; }
.modal-meta .mm-info { min-width: 0; flex: 1; }
.modal-meta .mm-info .mm-t {
  font-weight: 700; color: var(--ink-900); font-size: 14.5px; line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.modal-meta .mm-info .mm-d {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-500);
  display: flex; gap: 8px; flex-wrap: wrap;
}

.nd-list {
  display: flex; flex-direction: column; gap: 10px;
}
.nd-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--s-xs);
  transition: all var(--t-fast) var(--ease);
}
.nd-item:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line-strong));
  transform: translateY(-1px);
}
.nd-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.nd-type[data-d="baidu"]  { background: color-mix(in srgb, #3371c8 12%, var(--surface)); color: #3371c8; border: 1px solid color-mix(in srgb, #3371c8 25%, transparent); }
.nd-type[data-d="aliyun"] { background: color-mix(in srgb, #FF8C1A 12%, var(--surface)); color: var(--amber); border: 1px solid color-mix(in srgb, #FF8C1A 25%, transparent); }
.nd-type[data-d="quark"]  { background: color-mix(in srgb, #6366F1 14%, var(--surface)); color: var(--accent-600); border: 1px solid color-mix(in srgb, #6366F1 25%, transparent); }
.nd-type[data-d="other"]  { background: var(--bg-alt); color: var(--ink-600); border: 1px solid var(--line-strong); }
.nd-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nd-info .nd-url {
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nd-info .nd-code {
  font-size: 11.5px; color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.nd-info .nd-code code {
  font-family: var(--f-mono);
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brand-600);
  font-weight: 700;
  letter-spacing: 0.05em;
}
:root[data-theme="dark"] .nd-info .nd-code code { color: var(--brand); }
.nd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--pill);
  border: none;
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: 0 8px 22px -10px var(--brand);
  white-space: nowrap;
  font-family: var(--f-sans);
}
.nd-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px var(--brand); }
.nd-btn svg { width: 13px; height: 13px; }

.toast {
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--ink-900);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--s-lg);
  animation: fadeIn 200ms var(--ease-out);
}
:root[data-theme="dark"] .toast { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-900); }

/* ============================================================
   返回顶部
   ============================================================ */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 46px; height: 46px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--brand-600);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all var(--t-base) var(--ease);
  z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--s-sm), var(--inset-hi);
}
:root[data-theme="dark"] .to-top { color: var(--brand); }
.to-top:hover {
  background: linear-gradient(145deg, var(--brand), var(--accent-600));
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -12px var(--brand);
}
.to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ============================================================
   移动端
   ============================================================ */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 40;
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: var(--s-sm), var(--inset-hi);
}
.sidebar-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(3px);
  z-index: 15;
}
.sidebar-mask.visible { display: block; }

/* ======= Hero-meta 响应式 =======
   ≥1280 ：默认 —— 左搜索（1.45fr）+ 右 4 格（1fr）
   ≤1280 ：搜索框在上独占一行，下排 4 格横向 1×4
   ≤980  ：下排 2×2 更宽松
   ≤720  ：hero-meta padding 收窄；搜索框 sb-kbd 隐藏；下排 2×2；字体略缩
*/
@media (max-width: 1280px) {
  .hero-meta {
    grid-template-columns: 1fr;
  }
  .hero-meta .meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero-meta .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-stat .num { font-size: 20px; }
}
@media (max-width: 720px) {
  .hero-meta { padding: 12px; gap: 12px; }
  .search-box { padding: 12px 12px 12px 14px; gap: 10px; }
  .search-box > .sb-icon { width: 36px; height: 36px; border-radius: 11px; }
  .search-box > .sb-icon svg { width: 16px; height: 16px; }
  .search-box input { font-size: 14.5px; }
  .search-box .sb-kbd { display: none; }
  .meta-stat { padding: 9px 10px; gap: 8px; }
  .meta-stat .ms-icon { width: 32px; height: 32px; border-radius: 10px; }
  .meta-stat .ms-icon svg { width: 14px; height: 14px; }
  .meta-stat .num { font-size: 19px; }
  .meta-stat .label-text { font-size: 10.5px; }
  .meta-stat .ms-delta { font-size: 9.5px; }
}
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    transform: translateX(-105%);
    transition: transform var(--t-base) var(--ease);
    width: 88%;
    max-width: 320px;
    box-shadow: var(--s-lg);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-nav-toggle { display: inline-flex; }
  .sidebar-mask.visible { display: block; }
  .main { padding: 70px 18px 80px; }
  .hero { padding: 14px 2px 16px; }
  .topic-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .topic-cover { width: 100%; height: 160px; }
}

/* 入场动效 —— 卡片错峰淡入 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.work-card, .topic-card, .stat-card, .panel, .modal { animation: riseIn 460ms var(--ease-out) both; }
.work-card:nth-child(4n+1), .topic-card:nth-child(4n+1) { animation-delay: 0.02s; }
.work-card:nth-child(4n+2), .topic-card:nth-child(4n+2) { animation-delay: 0.06s; }
.work-card:nth-child(4n+3), .topic-card:nth-child(4n+3) { animation-delay: 0.10s; }
.work-card:nth-child(4n+4), .topic-card:nth-child(4n+4) { animation-delay: 0.14s; }

/* ============================================================
   顶部工具条 / 分类头 / 筛选栏 / 视图切换控件（Downloadery 体系）
   ============================================================ */
.top-bar {
  padding: 6px 2px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 80%);
  border-radius: var(--r-2xl);
  position: relative;
}
.top-bar > .hero-title {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.top-bar > .hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.top-bar > .hero-sub { margin: 2px 0 0; }

/* 旧的 meta-stat 单行样式兜底（防别处用到） */
.hero-meta .meta-stat { margin: 0; }

/* 筛选栏（难度 + 网盘） */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--s-xs);
}
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
.filter-group .filter-label {
  padding: 0 6px 0 12px;
  margin: 0;
  font-size: 11px;
}
.filter-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: calc(var(--pill) - 4px);
  color: var(--ink-600);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
}
.filter-btn:hover { color: var(--brand-600); }
:root[data-theme="dark"] .filter-btn:hover { color: var(--brand); }
.filter-btn.active {
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--brand);
}

/* 分类 / 专题详情头（自带左色条 + 右侧统计 + 视图切换入口） */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  margin: 2px 0 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 6%, var(--surface)) 0%, var(--surface) 50%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--s-xs);
  position: relative;
  overflow: hidden;
}
.category-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--header-accent, var(--brand)), var(--accent));
}
.category-header h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18.5px;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 12px;
}
.category-header .cat-desc {
  font-size: 13px;
  color: var(--ink-500);
  margin-left: 2px;
}
.category-header .cat-right {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
}
.cat-count {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-500);
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.cat-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
:root[data-theme="dark"] .cat-back-link { color: var(--brand); }
.cat-back-link:hover { transform: translateY(-1px); }
.cat-back-link svg { width: 13px; height: 13px; }

/* 视图切换：分段控件（卡片 ↔ 列表） */
.view-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  box-shadow: var(--s-xs), var(--inset-hi);
}
.view-switch .vs-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 8px 0 10px;
  user-select: none;
}
.view-switch .vs-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: none;
  background: transparent;
  border-radius: calc(var(--pill) - 4px);
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.view-switch .vs-seg svg { width: 14px; height: 14px; }
.view-switch .vs-seg:hover { color: var(--brand-600); }
:root[data-theme="dark"] .view-switch .vs-seg:hover { color: var(--brand); }
.view-switch .vs-seg.active {
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
  box-shadow: 0 6px 18px -10px var(--brand);
}

/* ============================================================
   列表视图：.list-mode 覆盖作品卡片 / 专题卡片为紧凑行式
   ============================================================ */
.works-grid.list-mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.works-grid.list-mode .work-card {
  flex-direction: row;
  align-items: stretch;
  min-height: 112px;
  border-radius: var(--r-lg);
  padding: 10px 16px 10px 10px;
  gap: 14px;
  min-height: 0;
  height: auto;
}
.works-grid.list-mode .work-card::before {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 4px; height: auto;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  opacity: 1;
}
.works-grid.list-mode .work-card:hover { transform: translateX(2px); }

.works-grid.list-mode .work-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.works-grid.list-mode .work-thumb {
  aspect-ratio: auto;
  width: 156px;
  min-width: 156px;
  height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-left: 4px;
  font-size: 26px;
}
.works-grid.list-mode .work-code {
  top: 14px;
  left: 18px;
  font-size: 9.5px;
  padding: 2px 7px;
}
.works-grid.list-mode .work-title-row {
  padding: 0;
  flex: 1;
  min-width: 0;
}
.works-grid.list-mode .work-title {
  font-size: 15.5px;
  -webkit-line-clamp: 1;
}
.works-grid.list-mode .work-tags {
  padding: 0;
}
.works-grid.list-mode .work-desc {
  display: none;
}
.works-grid.list-mode .work-footer {
  padding: 0 0 0 14px;
  margin: 0;
  width: 220px;
  min-width: 220px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border-left: 1px dashed var(--line);
  gap: 10px;
}
.works-grid.list-mode .work-info {
  width: 100%;
  justify-content: flex-end;
}

/* 专题列表视图 */
.topics-grid.list-mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topics-grid.list-mode .topic-card {
  flex-direction: row;
  align-items: stretch;
  min-height: 116px;
  padding: 10px 18px 10px 10px;
  gap: 18px;
  border-radius: var(--r-lg);
}
.topics-grid.list-mode .topic-card:hover { transform: translateX(2px); }
.topics-grid.list-mode .topic-card .topic-cover::after {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 4px; height: auto;
}
.topics-grid.list-mode .topic-card .topic-cover {
  aspect-ratio: auto;
  width: 168px;
  min-width: 168px;
  height: 96px;
  border-radius: var(--r-md);
  margin-left: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.topics-grid.list-mode .topic-card .topic-body {
  padding: 4px 0;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.topics-grid.list-mode .topic-card .topic-title {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topics-grid.list-mode .topic-card .topic-desc { -webkit-line-clamp: 2; }
.topics-grid.list-mode .topic-card .topic-meta {
  padding: 0 0 0 14px;
  border: none;
  border-left: 1px dashed var(--line);
  margin: 0;
  width: 200px;
  min-width: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  border-top: none;
  margin-top: 0;
}

/* 响应式：小屏下列表视图回归竖直堆叠，避免左侧缩略图挤变形 */
@media (max-width: 720px) {
  .works-grid.list-mode .work-card,
  .topics-grid.list-mode .topic-card {
    flex-direction: column;
    padding: 10px;
    min-height: 0;
  }
  .works-grid.list-mode .work-card::before,
  .topics-grid.list-mode .topic-card .topic-cover::after {
    top: 0; left: 0; right: 0;
    bottom: auto;
    width: 100%;
    height: 4px;
  }
  .works-grid.list-mode .work-head {
    flex-direction: column;
  }
  .works-grid.list-mode .work-thumb,
  .topics-grid.list-mode .topic-card .topic-cover {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-left: 0;
    margin-top: 4px;
  }
  .works-grid.list-mode .work-footer,
  .topics-grid.list-mode .topic-card .topic-meta {
    width: 100%;
    min-width: 0;
    padding: 10px 0 0;
    border-left: none;
    border-top: 1px dashed var(--line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .works-grid.list-mode .work-info { width: auto; }
  .filter-bar { gap: 10px; }
  .view-switch .vs-label { display: none; }
}

/* =============================================================
   主题层（可扩展）：
   选择器约定：:root[data-theme-group="主题id"][data-theme-mode="light|dark"]
   作用：只覆写 Design Tokens，不改动布局结构；保证组件样式完全复用。
   —— 机制：
       data-theme-group = downloadery | m3-expressive | liquid-glass | …
       data-theme-mode  = light | dark
       （与 legacy [data-theme="light|dark"] 共存；当 data-theme-group 未设置时，
        回退到 :root / [data-theme="light|dark"] 的默认 Downloadery 表现）
   ============================================================= */

/* -------- Theme 01：Downloadery（原工程默认；保持变量一致，兜底用） -------- */
:root[data-theme-group="downloadery"][data-theme-mode="light"] {
  --brand:      #0B63E5;
  --brand-600:  #0A55C1;
  --brand-500:  #3B82F6;
  --brand-100:  #DBEAFE;
  --brand-50:   #EFF6FF;
  --accent:     #14B8A6;
  --accent-400: #2DD4BF;
  --accent-600: #0D9488;
  --accent-50:  #F0FDFA;
  --amber:      #D97706;
  --amber-50:   #FFFBEB;
  --rose:       #E11D48;
  --rose-50:    #FFF1F2;
  --bg:         #F6F7FB;
  --bg-alt:     #EEF1F7;
  --surface:    #FFFFFF;
  --surface-2:  #FAFBFE;
  --ink-900:    #0C1222;
  --ink-800:    #1E2640;
  --ink-700:    #334155;
  --ink-600:    #475569;
  --ink-500:    #64748B;
  --ink-400:    #94A3B8;
  --ink-300:    #CBD5E1;
  --ink-200:    #E2E8F0;
  --ink-100:    #F1F5F9;
  --ink-50:     #F8FAFC;
  --line:         rgba(12, 18, 34, 0.07);
  --line-strong:  rgba(12, 18, 34, 0.13);
  --ring:         rgba(11, 99, 229, 0.18);
  --s-xs: 0 1px 2px rgba(12, 18, 34, 0.04), 0 1px 1px rgba(12, 18, 34, 0.03);
  --s-sm: 0 2px 6px rgba(12, 18, 34, 0.05), 0 10px 30px -14px rgba(12, 18, 34, 0.14);
  --s-md: 0 4px 12px rgba(12, 18, 34, 0.06), 0 22px 56px -22px rgba(12, 18, 34, 0.20);
  --s-lg: 0 26px 72px -24px rgba(12, 18, 34, 0.28), 0 10px 30px -14px rgba(12, 18, 34, 0.18);
  --s-card-h: 0 16px 52px -22px rgba(11, 99, 229, 0.30), 0 6px 14px -6px rgba(12, 18, 34, 0.08);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.7);
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms; --t-base: 220ms; --t-slow: 400ms;
  --f-display:  "Fraunces", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", Georgia, serif;
  --f-sans:     "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
:root[data-theme-group="downloadery"][data-theme-mode="dark"] {
  --brand:      #60A5FA;
  --brand-600:  #93C5FD;
  --brand-500:  #60A5FA;
  --brand-100:  rgba(96, 165, 250, 0.18);
  --brand-50:   rgba(96, 165, 250, 0.10);
  --accent:     #2DD4BF;
  --accent-400: #5EEAD4;
  --accent-600: #2DD4BF;
  --accent-50:  rgba(45, 212, 191, 0.14);
  --amber:      #FBBF24;
  --amber-50:   rgba(251, 191, 36, 0.12);
  --rose:       #FB7185;
  --rose-50:    rgba(251, 113, 133, 0.12);
  --bg:         #0A0F1F;
  --bg-alt:     #0D142A;
  --surface:    #121935;
  --surface-2:  #172142;
  --ink-900:    #F3F6FC;
  --ink-800:    #E3E9F5;
  --ink-700:    #CBD5E1;
  --ink-600:    #94A3B8;
  --ink-500:    #64748B;
  --ink-400:    #475569;
  --ink-300:    #334155;
  --ink-200:    #1E293B;
  --ink-100:    #162043;
  --ink-50:     #121935;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --ring:         rgba(96, 165, 250, 0.28);
  --s-xs: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.32);
  --s-sm: 0 2px 10px rgba(0,0,0,0.45), 0 12px 36px -16px rgba(0,0,0,0.60);
  --s-md: 0 6px 18px rgba(0,0,0,0.50), 0 28px 64px -26px rgba(0,0,0,0.70);
  --s-lg: 0 34px 90px -28px rgba(0,0,0,0.75), 0 12px 36px -16px rgba(0,0,0,0.60);
  --s-card-h: 0 18px 60px -26px rgba(96, 165, 250, 0.36), 0 8px 18px -8px rgba(0,0,0,0.45);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.04);
}
:root[data-theme-group="downloadery"][data-theme-mode="light"] body::before {
  background:
    radial-gradient(900px 560px at 100% -10%, rgba(11, 99, 229, 0.16), transparent 62%),
    radial-gradient(820px 560px at -10% 30%, rgba(20, 184, 166, 0.12), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(217, 119, 6, 0.08), transparent 62%);
}
:root[data-theme-group="downloadery"][data-theme-mode="dark"] body::before {
  background:
    radial-gradient(920px 620px at 100% 0%, rgba(96, 165, 250, 0.26), transparent 62%),
    radial-gradient(820px 560px at -10% 30%, rgba(45, 212, 191, 0.16), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(251, 191, 36, 0.08), transparent 62%);
}

/* -------- Theme 02：Material 3 Expressive（类 Android 16 / Material You）
   语义映射：
     Primary(Expressive 紫品红) → brand
     Tertiary(青绿薄荷)         → accent
     Error(Rosy Red)            → rose
     Warning(Molten Orange)     → amber
     Neutral 色阶               → ink-*
     Surface levels(S0~S5)      → bg / bg-alt / surface / surface-2
     Shape：Material 3 Extra Large Top（大圆角 + pill）
     Shadow：Material 3 柔和双阴影（Ambient + Key），减少脏污
     字体：偏向 Google Sans 风格，用 Noto Sans SC 主 + Fraunces 粗 display 做对比
------------------------------------------------------------------- */
:root[data-theme-group="m3-expressive"][data-theme-mode="light"] {
  /* Expressive Core Palette（Light） */
  --brand:      #6750A4;   /* M3 Primary 40 */
  --brand-600:  #5B3FA0;   /* Primary 30（更深版文字） */
  --brand-500:  #7F67BE;   /* Primary 50（按钮高亮） */
  --brand-100:  #EADDFF;   /* Primary Container 90 */
  --brand-50:   #F6EDFF;   /* Primary 95 */

  --accent:     #3A6B64;   /* Tertiary 40（青绿薄荷） */
  --accent-400: #4F8A80;   /* Tertiary 50 */
  --accent-600: #2B534E;   /* Tertiary 30 */
  --accent-50:  #CCE8E1;   /* Tertiary Container 90 */

  --amber:      #8A5500;   /* M3 Warning Molten Orange 40（压暗更显克制） */
  --amber-50:   #FFDDB4;   /* Warning Container 90 */
  --rose:       #B3261E;   /* M3 Error 40 */
  --rose-50:    #F9DEDC;   /* Error Container 90 */

  /* Surface levels（S0 bg · S1 bg-alt · S2 surface · S3 surface-2） */
  --bg:         #FFFBFE;   /* M3 S0：纯白微紫罗兰底（Expressive 特性） */
  --bg-alt:     #F7F2FA;   /* M3 Surface 1 */
  --surface:    #FFFBFE;   /* M3 Surface 2（卡片表面） */
  --surface-2:  #F3EDF7;   /* M3 Surface 3（悬浮表面/导航栏） */

  /* Neutral（Expressive：蓝紫灰 Neutral Variant） */
  --ink-900:    #1C1B1F;   /* On Background / Surface（Neutral 10） */
  --ink-800:    #2B2930;   /* Neutral 20（强调标题） */
  --ink-700:    #48464C;   /* Neutral 30（正文深） */
  --ink-600:    #605B64;   /* Neutral 50（正文） */
  --ink-500:    #78717C;   /* Neutral 60（次正文） */
  --ink-400:    #938F99;   /* Neutral Variant 50（辅助信息） */
  --ink-300:    #CAC4D0;   /* Neutral Variant 80（分割线弱） */
  --ink-200:    #E7E0EC;   /* Neutral Variant 90（分割线） */
  --ink-100:    #F0ECF4;   /* Neutral 92（表层分割） */
  --ink-50:     #F7F2FA;   /* Neutral 95（Surface 1） */

  --line:         rgba(28, 27, 31, 0.08);
  --line-strong:  rgba(28, 27, 31, 0.14);
  --ring:         rgba(103, 80, 164, 0.22);   /* Primary 40 @ 22% */

  /* Material 3 Umbra + Penumbra：柔和分层阴影（更干净的 Key 阴影） */
  --s-xs: 0 1px 1px rgba(28,27,31,0.04);
  --s-sm: 0 1px 2px rgba(28,27,31,0.05), 0 1px 3px 1px rgba(28,27,31,0.06);
  --s-md: 0 1px 2px rgba(28,27,31,0.05), 0 2px 6px 2px rgba(28,27,31,0.08);
  --s-lg: 0 4px 8px 3px rgba(28,27,31,0.09), 0 1px 3px rgba(28,27,31,0.10);
  --s-card-h: 0 8px 24px -12px rgba(103, 80, 164, 0.38), 0 2px 8px -2px rgba(28,27,31,0.10);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.9);

  /* Material 3 Shape Tokens（圆角更大、更"药片状"） */
  --r-xs: 8px;    /* Extra Small */
  --r-sm: 12px;   /* Small */
  --r-md: 16px;   /* Medium（表单、Tag） */
  --r-lg: 22px;   /* Large（卡片） */
  --r-xl: 28px;   /* Extra Large（面板） */
  --r-2xl: 34px;  /* Extra Large + Top Hero */
  --pill: 999px;

  /* Material Easing：emphasized 曲线 + 稍慢的 base */
  --ease:     cubic-bezier(0.2, 0, 0, 1);        /* M3 Standard */
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --t-fast: 120ms;
  --t-base: 300ms;   /* M3 Emphasized：稍慢更有情绪 */
  --t-slow: 500ms;

  /* 字体：Display → Fraunces（Expressive: 粗衬线做标题有"情绪"）
           Sans → Noto Sans SC（Material Sans 风格） */
  --f-display:  "Fraunces", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", Georgia, serif;
  --f-sans:     "Noto Sans SC", "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Expressive 暗色（M3 Dark：Primary/Secondary/Tertiary 全部 80 色值；Surface 1-5 叠色） */
:root[data-theme-group="m3-expressive"][data-theme-mode="dark"] {
  --brand:      #D0BCFF;   /* Primary 80 */
  --brand-600:  #E8DEF8;   /* Primary 90（更深版深色文字） */
  --brand-500:  #B69DF8;   /* Primary 70（按钮高亮） */
  --brand-100:  rgba(208, 188, 255, 0.20);
  --brand-50:   rgba(208, 188, 255, 0.10);

  --accent:     #6FDBB8;   /* Tertiary 80（青绿薄荷） */
  --accent-400: #4F8A80;   /* Tertiary 50（hover） */
  --accent-600: #6FDBB8;   /* Tertiary 80（深色同 accent） */
  --accent-50:  rgba(111, 219, 184, 0.14);

  --amber:      #F5B978;   /* Warning Container 95 的暗色暖色 */
  --amber-50:   rgba(245, 185, 120, 0.14);
  --rose:       #F2B8B5;   /* Error 80 */
  --rose-50:    rgba(242, 184, 181, 0.14);

  /* M3 Dark Surface（带 tonal elevation）：S0→S5 越来越"亮"的"色叠加紫"质感 */
  --bg:         #141218;   /* M3 S0 暗色背景 */
  --bg-alt:     #1C1B1F;   /* Surface 1（叠 5% Primary） */
  --surface:    #211F26;   /* Surface 2（叠 8% Primary） */
  --surface-2:  #2B2930;   /* Surface 3（叠 11% Primary） */

  --ink-900:    #E6E1E5;   /* On Surface（Neutral 90） */
  --ink-800:    #CAC4D0;   /* Neutral Variant 80（强调正文） */
  --ink-700:    #CAC4D0;
  --ink-600:    #938F99;   /* Neutral Variant 50（正文深） */
  --ink-500:    #79767D;   /* Neutral Variant 60（次正文） */
  --ink-400:    #5C5560;   /* Neutral Variant 40（辅助） */
  --ink-300:    #38363C;   /* Neutral Variant 30（分割线强） */
  --ink-200:    #2C2B31;   /* Neutral Variant 20（分割线） */
  --ink-100:    #211F26;   /* Neutral Variant 10（表层分割） */
  --ink-50:     #1C1B1F;   /* Surface 1 */

  --line:         rgba(230, 225, 229, 0.08);
  --line-strong:  rgba(230, 225, 229, 0.16);
  --ring:         rgba(208, 188, 255, 0.32);

  --s-xs: 0 1px 2px rgba(0,0,0,0.45);
  --s-sm: 0 2px 4px rgba(0,0,0,0.45), 0 2px 6px 2px rgba(0,0,0,0.45);
  --s-md: 0 2px 4px rgba(0,0,0,0.45), 0 6px 12px 4px rgba(0,0,0,0.45);
  --s-lg: 0 6px 10px 4px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.50);
  --s-card-h: 0 12px 32px -16px rgba(208, 188, 255, 0.38), 0 4px 10px -2px rgba(0,0,0,0.55);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Shape 不变，保持与 Light 统一 */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 34px; --pill: 999px;
}

/* M3 Expressive：背景辉光（Primary Violet 主导 + Tertiary Teal 辅） */
:root[data-theme-group="m3-expressive"][data-theme-mode="light"] body::before {
  background:
    radial-gradient(900px 640px at 100% -10%, rgba(103, 80, 164, 0.18), transparent 62%),
    radial-gradient(820px 640px at -8% 30%, rgba(58, 107, 100, 0.12), transparent 60%),
    radial-gradient(720px 540px at 50% 120%, rgba(138, 85, 0, 0.08), transparent 62%);
  filter: saturate(1.15);
}
:root[data-theme-group="m3-expressive"][data-theme-mode="dark"] body::before {
  background:
    radial-gradient(920px 660px at 100% 0%, rgba(208, 188, 255, 0.24), transparent 62%),
    radial-gradient(820px 640px at -8% 30%, rgba(111, 219, 184, 0.16), transparent 60%),
    radial-gradient(720px 540px at 50% 120%, rgba(245, 185, 120, 0.08), transparent 62%);
  filter: saturate(1.25);
}
/* M3 Expressive：hero-meta 容器极光（4 段紫→青绿渐变更 Expressive 风味） */
:root[data-theme-group="m3-expressive"] .hero-meta::before {
  background: linear-gradient(90deg,
    var(--brand) 0%,
    color-mix(in srgb, var(--brand) 65%, var(--accent) 35%) 35%,
    var(--accent) 70%,
    var(--accent-400) 100%);
}
/* M3 Expressive：sb-icon 图标容器色，brand 换成 Primary 紫 */
:root[data-theme-group="m3-expressive"] .search-box > .sb-icon {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand) 50%, #fff) 0%, var(--brand) 55%, var(--brand-600) 100%);
  box-shadow: 0 10px 22px -12px var(--brand),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
/* M3 Expressive：主 CTA 渐变改为 brand 紫（Expressive 强情绪化主色） */
:root[data-theme-group="m3-expressive"] .btn-get {
  background: linear-gradient(145deg, var(--brand-600), var(--brand-500));
  box-shadow: 0 14px 32px -14px var(--brand), var(--inset-hi);
}
:root[data-theme-group="m3-expressive"] .btn-get.free.is-direct {
  background: linear-gradient(145deg, var(--accent-600), var(--accent));
  box-shadow: 0 14px 32px -14px var(--accent);
}
/* M3 Expressive：filter-btn.active / view-switch.vs-seg.active 紫主导 */
:root[data-theme-group="m3-expressive"] .filter-btn.active,
:root[data-theme-group="m3-expressive"] .view-switch .vs-seg.active {
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
  box-shadow: 0 8px 22px -12px var(--brand);
}
/* M3 Expressive：主题切换按钮 thumb 用紫 */
:root[data-theme-group="m3-expressive"] .theme-toggle .tt-thumb {
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
}

/* ============================================================
   Theme 2：Liquid Glass（类 Apple iOS 18 / macOS Sequoia 风格）
   ------------------------------------------------------------
   Core Vision：
     背景：超细腻 Gaussian Blur + 多层柔光 Iridescent 渐变"极光"
     表面：Liquid — 半透明白色叠加深/浅，顶部内高光 + 底部内阴影形成"液体边缘"
     主色：Apple Blue（#0A84FF）+ 辅色 Apple Mint / Pink Tint 做虹彩流动
     中性色：Apple System Gray 序列（cool gray，不发黄）
     边框：极细 0.5px + Subtle Frost 高透光边框（非纯白不突兀）
     圆角：SF Rounded — 连续曲率 Squircle（用 22-24px 的 pill-like 近似）
     阴影：Ambient 极软远阴影 + 内部高光"折射感"（液态玻璃"悬浮离纸"效果）
     动效：Springy ease-out（Apple bounce 风格），略慢、弹性回拉
     字体：SF Pro 中文替代 = PingFang SC（Apple 原生字体）
   ------------------------------------------------------------
   新增语义变量（可复用，后续其他玻璃主题直接覆写）：
     --glass-bg       ：glass 表面的实际背景色（带透明度）
     --glass-bg-2     ：次级 glass 表面（更透）
     --glass-blur     ：backdrop-filter blur 半径
     --glass-saturate ：backdrop-filter saturate 值
     --glass-border   ：frost 边框（高光侧 + 阴影侧的差异感）
     --glass-hi       ：内 top 折射高光（液体上沿）
     --glass-shadow   ：内 bottom 阴影（液体下沿会聚感）
------------------------------------------------------------------- */
:root[data-theme-group="liquid-glass"][data-theme-mode="light"] {
  /* Liquid Glass Light：Apple System Blue + Mint 辅色 */
  --brand:      #0A84FF;   /* Apple System Blue */
  --brand-600:  #0066CC;   /* Deep Blue（文字/压暗按钮） */
  --brand-500:  #409CFF;   /* 浅蓝（Hover 渐变顶） */
  --brand-100:  rgba(10, 132, 255, 0.12);
  --brand-50:   rgba(10, 132, 255, 0.06);

  --accent:     #30D158;   /* Apple System Green / Mint */
  --accent-400: #34C759;   /* Tint Green */
  --accent-600:  #248A3D;  /* 压暗绿（深色文字用） */
  --accent-50:  rgba(52, 199, 89, 0.10);

  --amber:      #FF9F0A;   /* Apple System Orange（Warning） */
  --amber-50:   rgba(255, 159, 10, 0.10);
  --rose:       #FF3B30;   /* Apple System Red */
  --rose-50:    rgba(255, 59, 48, 0.10);

  /* Liquid 层：Light 下 bg 是"乳白色极光底"，表面全是半透明叠层 */
  --bg:         #F0F4F8;   /* 类似 Apple UI 背景的暖灰雾感（不纯白） */
  --bg-alt:     #E7EEF4;   /* 略深浅一层（可用于 body-alt 分隔） */
  --surface:    #FFFFFF;   /* 纯实色 fallback（低端不支持 backdrop-filter 时用） */
  --surface-2:  #F7FAFC;   /* 次表面 fallback */

  /* Apple System Gray（cool 冷灰） */
  --ink-900:    #1D1D1F;   /* Label Primary — 苹果近墨，不发黑 */
  --ink-800:    #1D1D1F;   /* Label Primary */
  --ink-700:    #3C3C43;   /* Label Secondary（iOS） */
  --ink-600:    #3C3C43;   /* Label Secondary */
  --ink-500:    #6E6E73;   /* Label Tertiary */
  --ink-400:    #8E8E93;   /* Label Quaternary */
  --ink-300:    #C7C7CC;   /* Separator / Opaque */
  --ink-200:    #E5E5EA;   /* Separator / Non-opaque */
  --ink-100:    #F2F2F7;   /* System Gray 6 */
  --ink-50:     #F9F9FB;   /* System Gray 6 更浅 */

  /* Glass 特有的边框线：0.5px Hairline + Subtle 反射 */
  --line:         rgba(60, 60, 67, 0.10);   /* Apple Separator Light */
  --line-strong:  rgba(60, 60, 67, 0.18);
  --ring:         rgba(10, 132, 255, 0.22); /* Focus Ring 苹果蓝 */

  /* Glass 阴影：超软远投影，体现"离开纸面 1~2mm"感觉
     不用过深颜色，用 Cool Gray 调更像 Apple */
  --s-xs: 0 1px 2px rgba(29, 29, 31, 0.04);
  --s-sm: 0 2px 8px rgba(29, 29, 31, 0.05), 0 8px 24px -10px rgba(29, 29, 31, 0.10);
  --s-md: 0 4px 14px rgba(29, 29, 31, 0.06), 0 20px 60px -20px rgba(29, 29, 31, 0.16);
  --s-lg: 0 8px 32px rgba(29, 29, 31, 0.10), 0 32px 80px -30px rgba(29, 29, 31, 0.22);
  --s-card-h: 0 16px 56px -20px rgba(10, 132, 255, 0.28), 0 8px 24px -10px rgba(29, 29, 31, 0.10);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.9);   /* glass 顶部高光（Liquid 核心） */

  /* 圆角：Apple SF Rounded — 略大于 M3，近似 squircle */
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-2xl: 36px;
  --pill: 999px;

  /* Apple Easing：bounce / springy 略慢带微回拉 */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);   /* Apple bounce */
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 560ms;

  /* 字体：Apple 生态优先 PingFang / SF */
  --f-display:  "-apple-system", "SF Pro Display", "PingFang SC", "Noto Serif SC", "Microsoft YaHei", Georgia, serif;
  --f-sans:     "-apple-system", "SF Pro Text", "PingFang SC", "Plus Jakarta Sans", "Microsoft YaHei", sans-serif;
  --f-mono:     "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Liquid Glass 玻璃语义 tokens（后续主题直接复用变量） */
  --glass-bg:       rgba(255, 255, 255, 0.70);   /* 主玻璃：70% 透（Apple Frosted Glass） */
  --glass-bg-2:     rgba(255, 255, 255, 0.55);   /* 次玻璃：55% 透 */
  --glass-blur:     22px;
  --glass-saturate: 1.6;                        /* 饱和提升使玻璃下的渐变更炫彩流动 */
  --glass-border:   rgba(255, 255, 255, 0.65);  /* 白色 Hairline 高光边 */
  --glass-hi:       inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-shadow:   inset 0 -1px 0 rgba(29, 29, 31, 0.08);
}

/* Liquid Glass 暗色：Apple Dark UI + Aqua 流动蓝青极光 */
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] {
  --brand:      #64D2FF;   /* Apple Dark 高亮 Aqua Blue（iOS 18 暗色亮蓝） */
  --brand-600:  #0A84FF;   /* Apple Blue — 暗色 CTA 顶色 */
  --brand-500:  #5AC8FA;   /* 浅 Aqua */
  --brand-100:  rgba(100, 210, 255, 0.20);
  --brand-50:   rgba(100, 210, 255, 0.10);

  --accent:     #30D158;   /* Apple Dark Green */
  --accent-400: #34C759;
  --accent-600: #30D158;
  --accent-50:  rgba(52, 199, 89, 0.14);

  --amber:      #FF9F0A;
  --amber-50:   rgba(255, 159, 10, 0.14);
  --rose:       #FF453A;
  --rose-50:    rgba(255, 69, 58, 0.14);

  /* Dark Liquid 层：Apple Black / Dark Gray 基底 + 叠层 Frost */
  --bg:         #0B0B0D;   /* 近似 Apple Dark Background（略偏蓝黑不偏棕） */
  --bg-alt:     #121318;
  --surface:    #1C1C1E;   /* System Gray 6 — 暗色 fallback */
  --surface-2:  #2C2C2E;   /* System Gray 5 */

  /* Apple Label 系列（Dark UI 专用） */
  --ink-900:    #F5F5F7;   /* Label Primary */
  --ink-800:    #F5F5F7;
  --ink-700:    #E8E8ED;   /* Label Secondary */
  --ink-600:    #E8E8ED;
  --ink-500:    #98989D;   /* Label Tertiary */
  --ink-400:    #6E6E73;   /* Label Quaternary */
  --ink-300:    #38383A;   /* System Gray 2 */
  --ink-200:    #2C2C2E;   /* Separator Opaque */
  --ink-100:    #1C1C1E;   /* System Gray 6 */
  --ink-50:     #141416;

  --line:         rgba(245, 245, 247, 0.09);   /* Apple Separator Dark */
  --line-strong:  rgba(245, 245, 247, 0.18);
  --ring:         rgba(100, 210, 255, 0.30);

  /* 暗色玻璃阴影：更重的"底托"感，但依旧 soft ambient */
  --s-xs: 0 1px 2px rgba(0,0,0,0.50);
  --s-sm: 0 2px 8px rgba(0,0,0,0.55), 0 8px 24px -10px rgba(0,0,0,0.70);
  --s-md: 0 4px 14px rgba(0,0,0,0.60), 0 20px 60px -20px rgba(0,0,0,0.80);
  --s-lg: 0 8px 32px rgba(0,0,0,0.70), 0 32px 80px -30px rgba(0,0,0,0.90);
  --s-card-h: 0 16px 60px -20px rgba(100, 210, 255, 0.30), 0 8px 24px -10px rgba(0,0,0,0.70);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.08);

  /* 圆角 & 动效 & 字体同 Light */
  --r-xs: 9px;  --r-sm: 13px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --r-2xl: 36px; --pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --t-fast: 160ms; --t-base: 280ms; --t-slow: 560ms;
  --f-display: "-apple-system", "SF Pro Display", "PingFang SC", "Noto Serif SC", "Microsoft YaHei", Georgia, serif;
  --f-sans:    "-apple-system", "SF Pro Text", "PingFang SC", "Plus Jakarta Sans", "Microsoft YaHei", sans-serif;
  --f-mono:    "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 暗色玻璃 tokens（底色更黑+更厚、blur 略激进） */
  --glass-bg:       rgba(44, 44, 50, 0.55);
  --glass-bg-2:     rgba(28, 28, 30, 0.45);
  --glass-blur:     28px;
  --glass-saturate: 1.8;
  --glass-border:   rgba(255, 255, 255, 0.12);
  --glass-hi:       inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-shadow:   inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* Liquid Glass：背景极光（4 段虹彩流动 — 蓝/青/粉/紫的 Apple Iridescence） */
:root[data-theme-group="liquid-glass"][data-theme-mode="light"] body::before {
  background:
    radial-gradient(980px 720px at 100% -10%, rgba(10, 132, 255, 0.28), transparent 62%),
    radial-gradient(860px 720px at -6% 28%, rgba(52, 199, 89, 0.20), transparent 60%),
    radial-gradient(780px 640px at 52% 118%, rgba(175, 82, 222, 0.18), transparent 62%),
    radial-gradient(520px 480px at 30% -8%, rgba(255, 55, 95, 0.14), transparent 60%);
  filter: saturate(1.25);
}
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] body::before {
  background:
    radial-gradient(1000px 760px at 100% -6%, rgba(100, 210, 255, 0.30), transparent 62%),
    radial-gradient(860px 720px at -8% 30%, rgba(52, 199, 89, 0.18), transparent 60%),
    radial-gradient(780px 640px at 55% 120%, rgba(191, 90, 242, 0.18), transparent 62%),
    radial-gradient(520px 480px at 30% -10%, rgba(255, 55, 95, 0.14), transparent 60%);
  filter: saturate(1.40);
}

/* Liquid Glass：将关键容器统一改为"Liquid 玻璃表面"
   （card / panel / hero-meta / search-box / sidebar / modal / theme-group-picker） */
:root[data-theme-group="liquid-glass"] .card,
:root[data-theme-group="liquid-glass"] .hero-meta,
:root[data-theme-group="liquid-glass"] .search-box,
:root[data-theme-group="liquid-glass"] .side,
:root[data-theme-group="liquid-glass"] .modal-content,
:root[data-theme-group="liquid-glass"] .theme-group-picker,
:root[data-theme-group="liquid-glass"] .filter-bar,
:root[data-theme-group="liquid-glass"] .to-top,
:root[data-theme-group="liquid-glass"] .chip,
:root[data-theme-group="liquid-glass"] .topic-card,
:root[data-theme-group="liquid-glass"] .stat-tile,
:root[data-theme-group="liquid-glass"] .tag,
:root[data-theme-group="liquid-glass"] .filter-btn,
:root[data-theme-group="liquid-glass"] .view-switch,
:root[data-theme-group="liquid-glass"] .work-empty-state {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-hi),
    var(--glass-shadow),
    var(--s-sm);
}

/* Liquid Glass：hover 时提升 glass 亮度与 blur（悬浮"靠近眼睛"感） */
:root[data-theme-group="liquid-glass"] .card:hover {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    var(--glass-hi),
    var(--glass-shadow),
    var(--s-card-h) !important;
  transform: translateY(-1px);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base);
}
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .card:hover {
  background: rgba(60, 60, 67, 0.62) !important;
}

/* Liquid Glass：深色下侧栏要更"厚"一点 */
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .side,
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .search-box,
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .hero-meta,
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .modal-content,
:root[data-theme-group="liquid-glass"][data-theme-mode="dark"] .theme-group-picker {
  background: var(--glass-bg-2) !important;
}

/* Liquid Glass：Hero-meta CTA 渐变条改为 Aqua → Mint（Apple 健康/天气配色） */
:root[data-theme-group="liquid-glass"] .hero-meta::before {
  background: linear-gradient(90deg,
    var(--brand) 0%,
    color-mix(in srgb, var(--brand) 65%, #FF375F 35%) 42%,
    var(--accent) 75%,
    #FFD60A 100%);
  opacity: 0.96;
}

/* Liquid Glass：sb-icon 改成 Apple Aqua 按钮风格 — 玻璃色主蓝渐变 */
:root[data-theme-group="liquid-glass"] .search-box > .sb-icon {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand) 35%, #fff) 0%, var(--brand) 55%, var(--brand-600) 100%);
  box-shadow: 0 10px 24px -12px var(--brand), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Liquid Glass：主 CTA 按钮 — Aqua Liquid 渐变 + 强高光 + Spring bounce */
:root[data-theme-group="liquid-glass"] .btn-get {
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand) 55%, var(--brand-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -6px 12px rgba(0, 0, 0, 0.10),
    0 10px 28px -14px var(--brand);
}
:root[data-theme-group="liquid-glass"] .btn-get:hover {
  transform: translateY(-1px);
}
:root[data-theme-group="liquid-glass"] .btn-get:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
:root[data-theme-group="liquid-glass"] .btn-get.free.is-direct {
  background: linear-gradient(180deg, #35E079 0%, var(--accent) 55%, var(--accent-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -6px 12px rgba(0, 0, 0, 0.10),
    0 10px 28px -14px var(--accent);
}

/* Liquid Glass：filter-btn.active / view-switch 激活态 Aqua 色 */
:root[data-theme-group="liquid-glass"] .filter-btn.active,
:root[data-theme-group="liquid-glass"] .view-switch .vs-seg.active {
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
  color: #fff !important;
  box-shadow: 0 10px 24px -14px var(--brand);
}

/* Liquid Glass：主题切换按钮 thumb Aqua */
:root[data-theme-group="liquid-glass"] .theme-toggle .tt-thumb {
  background: linear-gradient(145deg, var(--brand), var(--brand-500));
}


/* ============================================================
   Theme 3：Windows Metro（类 Windows 8 / Windows 10 Modern UI 风格）
   ------------------------------------------------------------
   Core Vision：
     色彩：纯色高饱和的 Microsoft Accent — Orange（Windows 经典橙）
     Tile：扁平纯色色块，无渐变、无内阴影、0 blur（完全 flat！）
     圆角：锋利方正（2~4px，最小可能，逼近 Windows 8 Live Tile 的硬边）
     网格：每个"方块"之间强调 1px hairline 切分，不要模糊阴影
     文字：Segoe UI 风格（优先 Microsoft YaHei UI 中文 + Segoe 英文）
     装饰：背景 Metro 色块散点（Live Tile 的 16×16 彩色方块分布）
     阴影：Metro 不做模糊阴影，hover 用 2px offset 硬切阴影"凸出"效果
     动效：Sharp ease — 线性/极快回弹，Metro 干净利落
   ------------------------------------------------------------
   新增语义变量（Metro / Flat 主题复用）：
     --metro-border   ：tile 的 1px solid hairline（无 blur）
     --metro-offset   ：tile hover 的 2px offset（纯硬阴影）
------------------------------------------------------------------- */
:root[data-theme-group="windows-metro"][data-theme-mode="light"] {
  /* Metro Light：微软经典 Accent Orange + 青蓝辅色 */
  --brand:      #FF8C00;   /* Windows 8 / 10 Classic Orange（Start 屏幕） */
  --brand-600:  #E67A00;   /* 深橙（压暗文字 CTA 底部） */
  --brand-500:  #FFA84D;   /* 浅橙（hover 顶部） */
  --brand-100:  rgba(255, 140, 0, 0.14);
  --brand-50:   rgba(255, 140, 0, 0.07);

  --accent:     #0078D4;   /* Microsoft Blue（Windows Logo 蓝） */
  --accent-400: #1A8AE0;
  --accent-600:  #005A9E;
  --accent-50:  rgba(0, 120, 212, 0.10);

  --amber:      #D13438;   /* Windows Brick Red（Warning） */
  --amber-50:   rgba(209, 52, 56, 0.10);
  --rose:       #E81123;   /* Windows Error Red */
  --rose-50:    rgba(232, 17, 35, 0.10);

  /* Metro Surface：Flat 白 / 极浅灰（没有任何 blur/磨砂） */
  --bg:         #FFFFFF;   /* Start 屏幕纯白底 */
  --bg-alt:     #F2F2F2;   /* Tile 背景备选灰 */
  --surface:    #FFFFFF;
  --surface-2:  #F7F7F7;

  /* Microsoft / Segoe 冷灰文字 */
  --ink-900:    #1B1B1B;   /* Metro On Surface 纯近墨 */
  --ink-800:    #1B1B1B;
  --ink-700:    #333333;   /* 正文黑 */
  --ink-600:    #333333;
  --ink-500:    #5C5C5C;   /* 次正文 */
  --ink-400:    #8A8A8A;   /* 辅助 */
  --ink-300:    #BDBDBD;   /* Opaque Separator */
  --ink-200:    #D6D6D6;   /* Non-opaque Separator */
  --ink-100:    #F0F0F0;   /* Tile 浅灰 */
  --ink-50:     #F7F7F7;

  /* Metro：锐利 1px 实线（没有半透明） */
  --line:         #E0E0E0;
  --line-strong:  #B0B0B0;
  --ring:         rgba(255, 140, 0, 0.28);

  /* Metro 阴影：完全 flat！常态无阴影，hover 仅 2px 硬偏移感
     用极淡"2px 下偏移 + 无 blur"的风格模拟 Live Tile 贴到板上感 */
  --s-xs: none;
  --s-sm: none;
  --s-md: 0 1px 0 0 #E0E0E0;    /* 仅一根底部 hairline（Metro underline） */
  --s-lg: 0 2px 0 0 #D0D0D0;    /* 仅 2px 灰底切分 */
  --s-card-h: 2px 2px 0 0 rgba(255, 140, 0, 0.70);   /* hover：2px 橙硬投影 */
  --inset-hi: none;

  /* 圆角：Metro 锋利方正（2px ~ 3px） */
  --r-xs: 2px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-2xl: 6px;
  --pill: 3px;

  /* 动效：Sharp ease — Metro 干净利落 */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);    /* Material sharp / Metro snappy */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 90ms;
  --t-base: 140ms;
  --t-slow: 240ms;

  /* 字体：Segoe UI / Microsoft YaHei UI — Windows 系统优先 */
  --f-display:  "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Serif SC", sans-serif;
  --f-sans:     "Segoe UI", "Microsoft YaHei UI", "Segoe UI Variable", "PingFang SC", sans-serif;
  --f-mono:     "Consolas", "Cascadia Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Metro Tile 语义变量（复用） */
  --metro-border: #D6D6D6;
  --metro-offset: rgba(255, 140, 0, 0.70);
}

/* Metro 暗色：Windows 10 Dark Mode（深近黑 + 高饱和橙色 Tile 强调） */
:root[data-theme-group="windows-metro"][data-theme-mode="dark"] {
  --brand:      #FF8C00;   /* 暗色 Accent 依旧保留亮橙（Windows 暗色 accent 经典） */
  --brand-600:  #FFA84D;
  --brand-500:  #FFB970;
  --brand-100:  rgba(255, 140, 0, 0.22);
  --brand-50:   rgba(255, 140, 0, 0.10);

  --accent:     #4CC2FF;   /* Windows 10 Dark Mode Cyan Blue */
  --accent-400: #1A8AE0;
  --accent-600: #4CC2FF;
  --accent-50:  rgba(76, 194, 255, 0.14);

  --amber:      #FF6B6B;
  --amber-50:   rgba(255, 107, 107, 0.14);
  --rose:       #FF4343;
  --rose-50:    rgba(255, 67, 67, 0.14);

  /* Metro Dark 基底：Dark Near-Black（Windows 10 Dark Background = 1f1f1f） */
  --bg:         #141414;
  --bg-alt:     #1F1F1F;
  --surface:    #1F1F1F;
  --surface-2:  #252525;

  --ink-900:    #F2F2F2;
  --ink-800:    #F2F2F2;
  --ink-700:    #E6E6E6;
  --ink-600:    #E6E6E6;
  --ink-500:    #BDBDBD;
  --ink-400:    #8A8A8A;
  --ink-300:    #3B3B3B;   /* Dark Separator */
  --ink-200:    #2E2E2E;   /* Tile separator */
  --ink-100:    #1F1F1F;
  --ink-50:     #181818;

  --line:         #2E2E2E;
  --line-strong:  #3B3B3B;
  --ring:         rgba(255, 140, 0, 0.34);

  /* Dark Metro：同样 flat，但 hover 用亮色方块偏移 */
  --s-xs: none;
  --s-sm: none;
  --s-md: 0 1px 0 0 #2E2E2E;
  --s-lg: 0 2px 0 0 #252525;
  --s-card-h: 2px 2px 0 0 rgba(255, 140, 0, 0.65);
  --inset-hi: none;

  --r-xs: 2px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-2xl: 6px; --pill: 3px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 90ms; --t-base: 140ms; --t-slow: 240ms;
  --f-display:  "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Serif SC", sans-serif;
  --f-sans:     "Segoe UI", "Microsoft YaHei UI", "Segoe UI Variable", "PingFang SC", sans-serif;
  --f-mono:     "Consolas", "Cascadia Mono", "JetBrains Mono", ui-monospace, monospace;
  --metro-border: #2E2E2E;
  --metro-offset: rgba(255, 140, 0, 0.65);
}

/* Metro：背景 Tile 散点（模拟 Live Tile Start 屏幕彩色方块） */
:root[data-theme-group="windows-metro"][data-theme-mode="light"] body::before {
  background:
    radial-gradient(20px 20px at 6% 14%, #FF8C00 30%, transparent 31%),
    radial-gradient(28px 28px at 94% 20%, #0078D4 30%, transparent 31%),
    radial-gradient(18px 18px at 22% 86%, #107C10 30%, transparent 31%),   /* Xbox Green */
    radial-gradient(24px 24px at 84% 90%, #E81123 30%, transparent 31%),
    radial-gradient(16px 16px at 50% 6%,  #FFB900 30%, transparent 31%),   /* Office 金 */
    radial-gradient(18px 18px at 70% 50%, #5C2D91 30%, transparent 31%);   /* VS 紫 */
  opacity: 0.20;
  filter: saturate(1.05);
}
:root[data-theme-group="windows-metro"][data-theme-mode="dark"] body::before {
  background:
    radial-gradient(20px 20px at 6% 14%, #FF8C00 30%, transparent 31%),
    radial-gradient(28px 28px at 94% 20%, #4CC2FF 30%, transparent 31%),
    radial-gradient(18px 18px at 22% 86%, #107C10 30%, transparent 31%),
    radial-gradient(24px 24px at 84% 90%, #E81123 30%, transparent 31%),
    radial-gradient(16px 16px at 50% 6%,  #FFB900 30%, transparent 31%),
    radial-gradient(18px 18px at 70% 50%, #8C6CC4 30%, transparent 31%);
  opacity: 0.28;
  filter: saturate(1.15);
}

/* Metro：所有 card / panel / surface 锐利切边 + 1px 实色边线 */
:root[data-theme-group="windows-metro"] .card,
:root[data-theme-group="windows-metro"] .hero-meta,
:root[data-theme-group="windows-metro"] .search-box,
:root[data-theme-group="windows-metro"] .side,
:root[data-theme-group="windows-metro"] .modal-content,
:root[data-theme-group="windows-metro"] .theme-group-picker,
:root[data-theme-group="windows-metro"] .filter-bar,
:root[data-theme-group="windows-metro"] .to-top,
:root[data-theme-group="windows-metro"] .chip,
:root[data-theme-group="windows-metro"] .topic-card,
:root[data-theme-group="windows-metro"] .stat-tile,
:root[data-theme-group="windows-metro"] .tag,
:root[data-theme-group="windows-metro"] .filter-btn,
:root[data-theme-group="windows-metro"] .view-switch,
:root[data-theme-group="windows-metro"] .work-empty-state,
:root[data-theme-group="windows-metro"] .btn {
  background: var(--surface) !important;
  border: 1px solid var(--metro-border) !important;
  box-shadow: var(--s-md);
  border-radius: var(--r-md);
}

/* Metro：hover 用硬 2px 偏移 Live Tile "弹出"效果，不使用任何 blur shadow */
:root[data-theme-group="windows-metro"] .card:hover {
  transform: translate(-1px, -1px);
  border-color: var(--brand) !important;
  box-shadow: 2px 2px 0 var(--metro-offset) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  background: var(--surface) !important;
}

/* Metro：Hero CTA 渐变改为双色硬切（Orange → Blue，Windows 双色 Logo 配色） */
:root[data-theme-group="windows-metro"] .hero-meta::before {
  background: linear-gradient(90deg,
    #FF8C00 0%, #FF8C00 25%,
    #0078D4 25%, #0078D4 50%,
    #107C10 50%, #107C10 75%,
    #E81123 75%, #E81123 100%);
  opacity: 0.92;
}

/* Metro：sb-icon 用扁平纯色橙（无渐变） */
:root[data-theme-group="windows-metro"] .search-box > .sb-icon {
  background: var(--brand);
  box-shadow: none;
  color: #fff;
}

/* Metro：CTA 按钮改为纯色 Tile（无渐变）+ hover 2px 橙投影 */
:root[data-theme-group="windows-metro"] .btn-get {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  box-shadow: none;
  border: 1px solid var(--brand) !important;
}
:root[data-theme-group="windows-metro"] .btn-get:hover {
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 var(--metro-offset) !important;
}
:root[data-theme-group="windows-metro"] .btn-get.free.is-direct {
  background: #107C10 !important;   /* Xbox Green Direct */
  border-color: #107C10 !important;
}
:root[data-theme-group="windows-metro"] .btn-get.free.is-direct:hover {
  box-shadow: 2px 2px 0 #107C10aa !important;
}

/* Metro：Filter/View-Switch active：纯 orange tile 无边框渐变 */
:root[data-theme-group="windows-metro"] .filter-btn.active,
:root[data-theme-group="windows-metro"] .view-switch .vs-seg.active {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: none;
}

/* Metro：主题切换按钮 thumb flat 橙色 tile */
:root[data-theme-group="windows-metro"] .theme-toggle .tt-thumb {
  background: var(--brand);
}


/* ============================================================
   Theme 4：Plain Professional（朴素专业 — 学术/政务/企业内网风）
   ------------------------------------------------------------
   Core Vision：
     色彩：低饱和中性灰蓝靛（Indigo 500 极压暗）做品牌，不抢眼
     装饰：零渐变 / 零光晕 / 零虹彩 / 零 Tile，只剩"排版层级"
     表面：象牙暖白纸（Light）/ 冷墨（Dark），无磨砂无 blur
     边线：1px 细直线（非锐利非 rounded，取 4~6px 中值）— 类似学术期刊 PDF
     阴影：仅 1px 极淡阴影 + 1px inset hi（排版卡片"压印"感）
     圆角：6~10px（中等，既不 Metro 锋利也不 M3 夸张）
     字体：Source Serif Pro / Noto Serif SC（正文）做"学术论文"风标题衬线
           Source Han / Inter 无衬线正文（保持清晰可读性）
     行距：略大，阅读舒适（通过 font 层面 fallback 到系统中文）
------------------------------------------------------------------- */
:root[data-theme-group="plain-pro"][data-theme-mode="light"] {
  /* Plain 压暗品牌（Indigo 600 压低饱和，专业不刺眼） */
  --brand:      #3B4F7A;   /* Slate Indigo — 高校/律师/咨询行业常用深靛蓝 */
  --brand-600:  #2A3A5C;   /* 更压暗的链接/文字色 */
  --brand-500:  #4D6294;   /* hover 次深色（无渐变，只加色阶差） */
  --brand-100:  rgba(59, 79, 122, 0.10);
  --brand-50:   rgba(59, 79, 122, 0.05);

  --accent:     #526B5E;   /* Low-Sat Moss 苔藓绿（专业辅助色，类似 Excel Green 压暗版） */
  --accent-400: #637E6F;
  --accent-600:  #3F5449;
  --accent-50:  rgba(82, 107, 94, 0.08);

  --amber:      #8A5A00;   /* Dark Amber（Warning 压暗） */
  --amber-50:   rgba(138, 90, 0, 0.08);
  --rose:       #9E2B2B;   /* Maroon（Error 暗枣红） */
  --rose-50:    rgba(158, 43, 43, 0.08);

  /* Plain Surface：象牙暖白纸 — 接近印刷纸的 #FBFAF7 */
  --bg:         #FBFAF7;
  --bg-alt:     #F3F1EC;
  --surface:    #FFFFFF;   /* 卡片：纯白（模拟 A4 纸） */
  --surface-2:  #F7F5F0;   /* 次表面：纸背色 */

  /* 学术灰：Neutral 灰阶 — 纯黑/纯白不出现，保持"印刷柔和" */
  --ink-900:    #222325;   /* 近墨（#1D1D1F 再暖点） */
  --ink-800:    #2B2C2E;
  --ink-700:    #3C3D3F;   /* 正文深（Body Bold） */
  --ink-600:    #4D4E50;   /* 正文标准（Body） */
  --ink-500:    #6D6E70;   /* 次正文（Caption） */
  --ink-400:    #8C8D8F;   /* 辅助（Mute） */
  --ink-300:    #BFC0C2;   /* 分割线 强（Table inner） */
  --ink-200:    #DADBDD;   /* 分割线 默认 */
  --ink-100:    #ECEDEE;   /* 条纹 / 浅底 */
  --ink-50:     #F4F4F5;   /* 最浅底纹 */

  /* Plain：Hairline 分隔（1px 实色灰，无半透明模糊） */
  --line:         #DADBDD;
  --line-strong:  #BFC0C2;
  --ring:         rgba(59, 79, 122, 0.18);

  /* Plain 阴影：超薄"压印"感 — 1px 1px 0.02 alpha only */
  --s-xs: 0 1px 0 rgba(0,0,0,0.02);
  --s-sm: 0 1px 2px rgba(0,0,0,0.03);
  --s-md: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
  --s-lg: 0 2px 6px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.03);
  --s-card-h: 0 2px 8px rgba(0,0,0,0.06);   /* hover 只是稍微有边界 */
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.75);   /* 纸张顶部极淡高光 */

  /* 圆角：Plain 中值（5~10px，"看起来方正但边缘不尖锐"） */
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-2xl: 12px;
  --pill: 999px;   /* 纯 pill 仅用于 badge tag 标签页 */

  /* 动效：Plain 极慢但极简（淡入淡出，无回弹无弹性） */
  --ease:     linear;
  --ease-out: linear;
  --t-fast: 110ms;
  --t-base: 180ms;
  --t-slow: 320ms;

  /* 字体：衬线 Display（学术论文风） + Inter/SC 正文
     注意"衬线做标题"—让 Plain 不像 IT 工具站，更像文档/资料中心 */
  --f-display:  "Source Serif Pro", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --f-sans:     "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Plain Professional 暗色：学术 Dark UI — 冷墨色 Midnight（类似专业 IDE） */
:root[data-theme-group="plain-pro"][data-theme-mode="dark"] {
  --brand:      #8AA0CC;   /* Low-Sat Slate Indigo 压暗亮一点（Dark Primary） */
  --brand-600:  #A9B8DA;
  --brand-500:  #7488B4;
  --brand-100:  rgba(138, 160, 204, 0.18);
  --brand-50:   rgba(138, 160, 204, 0.09);

  --accent:     #8DA697;   /* Dark Moss Green（Dark UI 更亮的苔藓绿） */
  --accent-400: #A3B9A8;
  --accent-600: #8DA697;
  --accent-50:  rgba(141, 166, 151, 0.12);

  --amber:      #D7B272;   /* Warm Gold（Dark Warning 暗金） */
  --amber-50:   rgba(215, 178, 114, 0.12);
  --rose:       #C78484;   /* Maroon Light（Dark Error 暗枣红） */
  --rose-50:    rgba(199, 132, 132, 0.12);

  /* Dark Plain：Midnight 墨蓝黑（不发红不发黄，冷墨） */
  --bg:         #15171B;
  --bg-alt:     #1B1D22;
  --surface:    #1F2127;
  --surface-2:  #24272D;

  --ink-900:    #D9DADB;   /* 冷白不发亮 */
  --ink-800:    #D9DADB;
  --ink-700:    #C6C7C8;
  --ink-600:    #C6C7C8;
  --ink-500:    #9A9B9D;
  --ink-400:    #78797B;
  --ink-300:    #3A3C40;   /* Strong Separator */
  --ink-200:    #2C2E33;   /* Default Separator */
  --ink-100:    #24272D;
  --ink-50:     #1C1E23;

  --line:         #2C2E33;
  --line-strong:  #3A3C40;
  --ring:         rgba(138, 160, 204, 0.24);

  /* Dark Plain：几乎无阴影（仅分割线） */
  --s-xs: 0 1px 0 rgba(0,0,0,0.25);
  --s-sm: 0 1px 2px rgba(0,0,0,0.30);
  --s-md: 0 1px 2px rgba(0,0,0,0.34), 0 2px 4px rgba(0,0,0,0.24);
  --s-lg: 0 2px 6px rgba(0,0,0,0.40), 0 4px 14px rgba(0,0,0,0.30);
  --s-card-h: 0 2px 8px rgba(0,0,0,0.45);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.04);

  --r-xs: 4px; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; --pill: 999px;
  --ease: linear; --ease-out: linear;
  --t-fast: 110ms; --t-base: 180ms; --t-slow: 320ms;
  --f-display:  "Source Serif Pro", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --f-sans:     "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Plain Professional：背景完全空白，没有任何径向光晕
   （"朴素"的核心 = 去掉一切装饰性图层） */
:root[data-theme-group="plain-pro"][data-theme-mode="light"] body::before {
  background: transparent;
  filter: none;
}
:root[data-theme-group="plain-pro"][data-theme-mode="dark"] body::before {
  background: transparent;
  filter: none;
}

/* Plain：card/panel 只用纸张 + 1px 边线（无 blur/无玻璃），保持 PDF 印刷感 */
:root[data-theme-group="plain-pro"] .card,
:root[data-theme-group="plain-pro"] .hero-meta,
:root[data-theme-group="plain-pro"] .search-box,
:root[data-theme-group="plain-pro"] .side,
:root[data-theme-group="plain-pro"] .modal-content,
:root[data-theme-group="plain-pro"] .theme-group-picker,
:root[data-theme-group="plain-pro"] .filter-bar,
:root[data-theme-group="plain-pro"] .to-top,
:root[data-theme-group="plain-pro"] .chip,
:root[data-theme-group="plain-pro"] .topic-card,
:root[data-theme-group="plain-pro"] .stat-tile,
:root[data-theme-group="plain-pro"] .tag,
:root[data-theme-group="plain-pro"] .filter-btn,
:root[data-theme-group="plain-pro"] .view-switch,
:root[data-theme-group="plain-pro"] .work-empty-state {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-sm);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root[data-theme-group="plain-pro"] .card:hover {
  box-shadow: var(--s-card-h) !important;
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  transform: none;
}

/* Plain：Hero 渐变条压暗为靛→苔绿低饱和水平渐变（专业、不抢眼） */
:root[data-theme-group="plain-pro"] .hero-meta::before {
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand) 45%,
    var(--accent) 80%,
    var(--accent-600) 100%);
  opacity: 0.82;
}

/* Plain：sb-icon 改为低饱和靛蓝纯色块（不使用发光/渐变） */
:root[data-theme-group="plain-pro"] .search-box > .sb-icon {
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}

/* Plain：主 CTA 改为单色（无渐变）靛蓝 Flat Button — 类似 Bootstrap Primary 的专业 CTA */
:root[data-theme-group="plain-pro"] .btn-get {
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--s-xs);
  border: 1px solid var(--brand) !important;
}
:root[data-theme-group="plain-pro"] .btn-get:hover {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}
:root[data-theme-group="plain-pro"] .btn-get.free.is-direct {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
:root[data-theme-group="plain-pro"] .btn-get.free.is-direct:hover {
  background: var(--accent-400) !important;
  border-color: var(--accent-400) !important;
}

/* Plain：Filter/View 激活态 — 靛蓝填充（不渐变） */
:root[data-theme-group="plain-pro"] .filter-btn.active,
:root[data-theme-group="plain-pro"] .view-switch .vs-seg.active {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: none;
}

/* Plain：主题切换 thumb — 单色靛蓝（不渐变） */
:root[data-theme-group="plain-pro"] .theme-toggle .tt-thumb {
  background: var(--brand);
}


/* -------- 侧栏：主题组选择器（小巧 swatch 预览 + 名称） -------- */
.theme-group-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
:root[data-theme="dark"] .theme-group-picker {
  background: var(--ink-100);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-group-picker .tgp-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 2px;
}
.theme-group-picker .tgp-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.theme-group-picker .tgp-card {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
:root[data-theme="dark"] .theme-group-picker .tgp-card {
  background: var(--ink-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.theme-group-picker .tgp-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}
.theme-group-picker .tgp-card.active {
  border-color: var(--brand);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
:root[data-theme="dark"] .theme-group-picker .tgp-card.active {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-group-picker .tgp-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  height: 22px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.theme-group-picker .tgp-sw {
  width: 100%;
  height: 100%;
  display: block;
}
.theme-group-picker .tgp-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-700);
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .theme-group-picker .tgp-name { color: var(--ink-800); }

/* --- 前台紧凑下拉式主题选择（替代原 2x2 并排卡片，减少页面占用） --- */
.theme-group-picker .tgp-select {
  position: relative;
  width: 100%;
  outline: none;
}
.theme-group-picker .tgp-select-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.theme-group-picker .tgp-select-head:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}
.theme-group-picker .tgp-select:focus-within .tgp-select-head,
.theme-group-picker .tgp-select.open .tgp-select-head {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
}
.theme-group-picker .tgp-select-swatches {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 44px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.theme-group-picker .tgp-select-swatches .tgp-sw {
  width: 100%; height: 100%;
}
.theme-group-picker .tgp-select-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .theme-group-picker .tgp-select-name { color: var(--ink-800); }
.theme-group-picker .tgp-select-caret {
  flex: 0 0 auto;
  color: var(--ink-500);
  transition: transform var(--t-fast) var(--ease);
  stroke: currentColor;
}
.theme-group-picker .tgp-select.open .tgp-select-caret {
  transform: rotate(180deg);
}

/* 下拉列表 */
.theme-group-picker .tgp-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform-origin: top center;
  animation: tgp-pop 160ms var(--ease);
}
:root[data-theme="dark"] .theme-group-picker .tgp-select-list {
  background: var(--ink-200);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.55),
    0 3px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-group-picker .tgp-select.open .tgp-select-list { display: flex; }
@keyframes tgp-pop {
  0%   { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.theme-group-picker .tgp-select-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-700);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
:root[data-theme="dark"] .theme-group-picker .tgp-select-opt { color: var(--ink-800); }
.theme-group-picker .tgp-select-opt:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.theme-group-picker .tgp-select-opt.active {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
}
.theme-group-picker .tgp-select-opt-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-group-picker .tgp-select-check {
  flex: 0 0 auto;
  color: inherit;
  stroke: currentColor;
}