/* ============================================================
   style.css — 思酷素材 全局样式
   深色 + 浅色（微光玻璃拟态）双主题，CSS 变量体系驱动
   ============================================================ */

/* --------------------------------
 1. 字体
-------------------------------- */
@font-face {
  font-family: "f7";
  src: url("../font/f7.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------
 2. 共享变量（双主题通用）
-------------------------------- */
:root {
  /* 圆角 */
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;

  /* 字号 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.2rem;
  --fs-lg: 1.8rem;

  /* 间距 */
  --sp-xs: 0.4rem;
  --sp-sm: 0.8rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;

  /* 过渡 */
  --ease-card: cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --ease-drawer: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spin: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-theme: 0.45s;
  --dur-card: 0.3s;
  --dur-drawer: 300ms;
  --dur-fast: 150ms;
  --dur-spin: 0.6s;
}

/* --------------------------------
 3. 深色主题（默认）
-------------------------------- */
:root,
[data-theme="dark"] {
  /* 基础色板 */
  --color-canvas: #0a0b0f;
  --color-surface: #14151c;
  --color-elevated: #1e2029;
  --color-line: #2a2d38;
  --color-line-strong: #3a3d4a;
  --color-ink: #f2f4f8;
  --color-ink-soft: #9aa0ae;
  --color-ink-faint: #5c6170;
  --color-primary: #5b6bff;
  --color-primary-hover: #7886ff;
  --color-success: #2be08c;
  --color-warning: #f5d547;
  --color-info: #3dd7e5;
  --color-danger: #ff3a5c;
  --color-strong: #ff3e96;

  /* RGB 通道 */
  --color-canvas-rgb: 10 11 15;
  --color-surface-rgb: 20 21 28;
  --color-elevated-rgb: 30 32 41;
  --color-primary-rgb: 91 107 255;

  /* 阴影 */
  --shadow-drawer: 8px 8px 40px rgba(0, 0, 0, 0.6);

  /* 组件 token */
  --toggle-bg: #1e2029;
  --toggle-border: #2a2d38;
  --tooltip-bg: rgb(30 32 41 / 0.96);
  --tooltip-border: var(--color-line);
  --tooltip-text: var(--color-ink-soft);
}

/* --------------------------------
 4. 浅色主题（微光玻璃拟态）
-------------------------------- */
[data-theme="light"] {
  --color-canvas: #f0eee6;
  --color-canvas-warm: #fef0d5;
  --color-canvas-cool: #dceaf5;
  --color-surface: rgba(255, 255, 255, 0.55);
  --color-elevated: rgba(255, 255, 255, 0.72);
  --color-line: rgba(0, 0, 0, 0.08);
  --color-line-strong: rgba(0, 0, 0, 0.14);
  --color-ink: #1f2433;
  --color-ink-soft: #4a5168;
  --color-ink-faint: #8a90a3;
  --color-primary: #0087eb;
  --color-primary-hover: #1ea0ff;
  --color-success: #2ec27e;
  --color-warning: #f5a623;
  --color-info: #b1e3ff;
  --color-danger: #ff5470;

  --color-canvas-rgb: 240 238 230;
  --color-surface-rgb: 255 255 255;
  --color-elevated-rgb: 255 255 255;
  --color-primary-rgb: 0 135 235;

  --shadow-drawer: 0 10px 40px rgba(31, 36, 51, 0.12), 0 2px 6px rgba(31, 36, 51, 0.04);
  --shadow-glass-soft: 0 8px 24px -6px rgba(31, 36, 51, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-glass-hover: 0 16px 40px -10px rgba(31, 36, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --toggle-bg: rgba(255, 255, 255, 0.6);
  --toggle-border: rgba(0, 0, 0, 0.08);
  --tooltip-bg: rgba(255, 255, 255, 0.98);
  --tooltip-border: rgba(0, 0, 0, 0.08);
  --tooltip-text: #4a5168;

  --ray-warm: rgba(255, 224, 174, 0.55);
  --ray-cool: rgba(177, 227, 255, 0.55);
}

html {
  scroll-padding-top: 5rem;
}
/* --------------------------------
 5. 页面主体背景
-------------------------------- */
body {
  background: radial-gradient(1200px 700px at 80% -10%, rgba(91, 107, 255, 0.1), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(61, 215, 229, 0.06), transparent 60%), var(--color-canvas);
}

/* 浅色主题 — 微光玻璃拟态背景 */
[data-theme="light"] body {
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--ray-warm) 0%, transparent 55%), radial-gradient(ellipse 80% 55% at 50% 100%, var(--ray-cool) 0%, transparent 55%), radial-gradient(60% 50% at 0% 30%, rgba(255, 235, 200, 0.35) 0%, transparent 60%), radial-gradient(60% 50% at 100% 70%, rgba(180, 220, 255, 0.35) 0%, transparent 60%), linear-gradient(180deg, var(--color-canvas-warm) 0%, var(--color-canvas) 50%, var(--color-canvas-cool) 100%);
  background-attachment: fixed;
}

/* 浅色主题 — 光斑纹理叠加 */
[data-theme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 35% 75% at 50% 0%, rgba(255, 248, 225, 0.7) 0%, transparent 65%), radial-gradient(circle 6px at 18% 22%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle 4px at 82% 32%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle 5px at 28% 78%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle 4px at 75% 82%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 12% 55%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle 3px at 92% 60%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
}

/* --------------------------------
 6. 文本选区
-------------------------------- */
::selection {
  background-color: rgb(var(--color-primary-rgb) / 0.12);
  color: var(--color-ink);
}

/* --------------------------------
 7. Header 毛玻璃
-------------------------------- */
header {
  background-color: rgb(var(--color-canvas-rgb) / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

[data-theme="light"] header {
  background-color: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

/* --------------------------------
 8. 统一侧边栏（桌面固定可见 / 移动滑入）
-------------------------------- */
#page-sidebar {
  background-color: rgb(var(--color-canvas-rgb) / 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(-100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
}

/* 桌面端（≥1024px）：始终可见，无过渡动画 */
@media (min-width: 1024px) {
  #page-sidebar {
    transform: translateX(0);
    transition: none;
  }
}

/* 移动端打开状态 */
#page-sidebar.is-open {
  transform: translateX(0);
}

[data-theme="light"] #page-sidebar {
  background-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(255, 255, 255, 1) !important;
}

/* --------------------------------
 9. 侧边栏遮罩层（仅移动端）
-------------------------------- */
#sidebar-overlay {
  display: none;
  opacity: 0;
  transition: opacity 250ms ease;
}

#sidebar-overlay.is-visible {
  display: block;
}

#sidebar-overlay.is-open {
  opacity: 1;
}

/* ============================================================
 11. 全局滚动条美化
 ============================================================ */

/* --- WebKit 全局滚动条 --- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-line-strong);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* 浅色主题 — 半透明轻量滚动条 */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 51, 0.18);
  background-clip: content-box;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 36, 51, 0.35);
  background-clip: content-box;
}

/* --- Firefox 全局滚动条 --- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
}

[data-theme="light"] html {
  scrollbar-color: rgba(31, 36, 51, 0.18) transparent;
}

/* --- 侧边栏内滚动条 --- */
#page-sidebar::-webkit-scrollbar {
  width: 4px;
}

#page-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 4px;
  border: none;
  background-clip: border-box;
}

#page-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------
 12. 主题切换按钮
-------------------------------- */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-theme) ease,
    border-color var(--dur-theme) ease,
    box-shadow 0.2s ease;
}

#theme-toggle:hover {
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.15);
}

#theme-toggle:active {
  transform: scale(0.92);
  transition: transform 0.15s ease;
}

#theme-toggle .icon-spin {
  display: inline-block;
  transition: transform var(--dur-spin) var(--ease-spin);
  will-change: transform;
  backface-visibility: hidden;
}

#theme-toggle .icon-spin.is-rotating {
  transform: rotate(360deg);
}

/* --------------------------------
 13. 全局过渡（双主题平滑切换）
-------------------------------- */
*,
*::before,
*::after {
  transition:
    background-color var(--dur-theme) ease,
    color var(--dur-theme) ease,
    border-color var(--dur-theme) ease,
    box-shadow var(--dur-theme) ease,
    background var(--dur-theme) ease;
}

/* 排除：需要独立过渡控制的元素 */
#theme-toggle .icon-spin {
  transition: transform var(--dur-spin) var(--ease-spin);
}

#page-sidebar {
  transition: transform var(--dur-drawer) var(--ease-drawer);
}

#sidebar-overlay {
  transition: opacity 250ms ease;
}

/* --------------------------------
 14. 主标题字体
-------------------------------- */
main h1,
main h2,
main h3 {
  font-family: "Noto Serif SC", ui-serif, Georgia, serif !important;
}

/* --------------------------------
 15. 使用说明提示框
-------------------------------- */
.help-wrap {
  position: relative;
}

.help-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 340px;
  max-width: 86vw;
  height: 14px;
  pointer-events: auto;
}

.help-tip {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: 86vw;
  padding: 16px 18px 14px;
  border: 1px solid var(--tooltip-border);
  border-radius: var(--radius-md);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
  font-size: 13px;
  line-height: 1.6;
}

.help-wrap:hover .help-tip,
.help-wrap:focus-within .help-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.help-tip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 24px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--tooltip-border);
  border-left: 1px solid var(--tooltip-border);
  background: var(--tooltip-bg);
  transform: rotate(45deg);
  border-top-left-radius: 3px;
}

/* Light: glass morphism tooltip */
[data-theme="light"] .help-tip {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 18px 48px rgba(31, 36, 51, 0.14),
    0 2px 6px rgba(31, 36, 51, 0.05);
}

[data-theme="light"] .help-tip::before {
  background: var(--tooltip-bg);
}

.help-tip-title {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tooltip-border);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.2px;
}

.help-tip-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.help-tip-list li,
.help-tip-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.help-tip-ic {
  flex: 0 0 auto;
  line-height: 1.6;
  font-size: 14px;
}

.help-tip-note {
  padding: 9px 11px;
  margin-bottom: 11px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb) / 0.1);
  border: 1px solid var(--tooltip-border);
}

.help-tip-dl {
  padding-top: 10px;
  border-top: 1px dashed var(--tooltip-border);
  color: var(--tooltip-text);
}

.help-tip-dl a {
  color: var(--color-primary);
  font-weight: 700;
  word-break: break-all;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--color-primary-rgb) / 0.4);
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.help-tip-dl a:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary-hover);
}

.help-tip b {
  font-weight: 700;
  color: var(--color-ink);
}

/* --------------------------------
 16. 浅色主题 Header 按钮
-------------------------------- */
[data-theme="light"] #helpBtn,
[data-theme="light"] #openBtn,
[data-theme="light"] #bookmarkBtn {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

[data-theme="light"] #helpBtn:hover,
[data-theme="light"] #openBtn:hover,
[data-theme="light"] #bookmarkBtn:hover {
  background-color: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 135, 235, 0.25);
}

[data-theme="light"] header a,
[data-theme="light"] header button {
  color: var(--color-ink);
}

[data-theme="light"] .sidebar-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 135, 235, 0.18);
}

/* ============================================================
  17. Banner 区块 — blockquote & hr 美化
  ============================================================ */

/* --- Banner 容器 --- */
.banner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-lg) var(--sp-md) 0;
  width: 100%;
  margin: 0;
  padding: 1.5rem 1.75rem 1.4rem 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid #1f2034;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  font-size: var(--fs-base);
  line-height: 2.1;
  background: linear-gradient(135deg, rgba(var(--color-elevated-rgb) / 0.55), rgba(var(--color-surface-rgb) / 0.25));
  color: var(--color-ink-soft);
  /* background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #fff; */
  overflow: hidden;
  font-size: 1.1rem;
}

/* 右上角装饰引号水印 */
.banner::after {
  content: "\201C";
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-size: 5.5rem;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--color-primary);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.banner h2 {
  font-size: var(--fs-md);
  font-weight: 700;
}
.banner a {
  color: var(--color-primary);
}

.banner a:hover {
  color: var(--color-primary-hover);
}
/* --- 浅色主题变体 --- */
[data-theme="light"] .banner {
  border-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid #fff;
}

[data-theme="light"] .banner::before {
  background: linear-gradient(180deg, var(--color-primary), #b1e3ff);
}

[data-theme="light"] .banner::after {
  opacity: 0.2;
}

/* ============================================================
  18. Hero Banner — 全宽背景图 Banner
  ============================================================ */
.hero-banner {
  position: relative;
  aspect-ratio: 4 / 1;
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
  background: url("https://sskoo.com/wp-content/uploads/2026/04/bg.jpg") center/cover no-repeat;
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.hero-banner-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.hero-banner-content h1 {
  color: #fff;
  font-size: clamp(1.3rem, 3vw, 2.5rem);
  font-weight: 800;
  text-align: center;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

.hero-banner-content h3 {
  color: #fff;
  font-size: clamp(0.82rem, 1.5vw, 1.15rem);
  font-weight: 500;
  text-align: center;
  margin: 0;
  opacity: 0.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

@media (min-width: 1280px) {
  .hero-banner {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

[data-theme="light"] .hero-banner::before {
  background: rgba(0, 0, 0, 0.25);
}

/* ============================================================
  20. 卡片组件库
  ============================================================ */

/* 页面容器 */
.page {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-lg) 0;
  width: 100%;
}

/* 主标题 */
.page h1 {
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--sp-sm);
}

/* 副标题 */
.subtitle {
  text-align: left;
  color: var(--color-ink-faint);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-lg);
}

/* 卡片网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-md);
}

/* 单张卡片 — 深色默认 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--from), var(--via), #0d0d0d);
  border: 1px solid rgba(var(--rgb), 0.18);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 24px -8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: #fff;
  transition:
    transform var(--dur-card) var(--ease-card),
    border-color var(--dur-card) var(--ease-card),
    box-shadow var(--dur-card) var(--ease-card);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rgb), 0.4);
  box-shadow:
    0 18px 30px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 卡片信息元素 */
.card-num {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-emoji {
  font-size: 1.6rem;
}

.card-name {
  font-size: var(--fs-md);
  font-weight: 600;
}

.card-meta {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.42);
}

/* ============================================================
 21. 卡片色板：深色主题（card1 ~ card20）
    --rgb / --from / --via 为卡片背景、边框、阴影提供色值
 ============================================================ */
.card1 {
  --rgb: 230, 126, 34;
  --from: #2a1a10;
  --via: #151210;
}
.card2 {
  --rgb: 26, 188, 156;
  --from: #0c1e1b;
  --via: #0a1412;
}
.card3 {
  --rgb: 92, 107, 192;
  --from: #141830;
  --via: #0e1018;
}
.card4 {
  --rgb: 233, 30, 99;
  --from: #2a1218;
  --via: #150e11;
}
.card5 {
  --rgb: 46, 204, 113;
  --from: #0e2416;
  --via: #0c1410;
}
.card6 {
  --rgb: 84, 160, 255;
  --from: #0e1a2e;
  --via: #0c1018;
}
.card7 {
  --rgb: 241, 196, 15;
  --from: #2a2008;
  --via: #161408;
}
.card8 {
  --rgb: 0, 210, 211;
  --from: #082426;
  --via: #0a1416;
}
.card9 {
  --rgb: 155, 89, 182;
  --from: #1c1230;
  --via: #100e18;
}
.card10 {
  --rgb: 255, 107, 107;
  --from: #2c1210;
  --via: #160e0e;
}
.card11 {
  --rgb: 232, 160, 191;
  --from: #26141e;
  --via: #141012;
}
.card12 {
  --rgb: 255, 71, 87;
  --from: #2c0e12;
  --via: #160c0e;
}
.card13 {
  --rgb: 184, 224, 78;
  --from: #1e2410;
  --via: #12140a;
}
.card14 {
  --rgb: 30, 136, 168;
  --from: #081c24;
  --via: #0a1216;
}
.card15 {
  --rgb: 162, 155, 254;
  --from: #181430;
  --via: #0e0e18;
}
.card16 {
  --rgb: 255, 127, 80;
  --from: #2c1810;
  --via: #16100c;
}
.card17 {
  --rgb: 85, 198, 158;
  --from: #0c221a;
  --via: #0a1410;
}
.card18 {
  --rgb: 224, 64, 251;
  --from: #24102c;
  --via: #140c18;
}
.card19 {
  --rgb: 79, 195, 247;
  --from: #0c1e28;
  --via: #0a1216;
}
.card20 {
  --rgb: 247, 212, 74;
  --from: #262010;
  --via: #161208;
}

/* ============================================================
 22. 浅色主题 — 卡片微光玻璃拟态变体
 ============================================================ */
[data-theme="light"] .card {
  color: #1f2433;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(135deg, var(--from), var(--via));
  border: 1px solid rgba(var(--rgb), 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 10px 28px -8px rgba(var(--rgb), 0.28),
    0 2px 6px rgba(31, 36, 51, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rgb), 0.55);
  box-shadow:
    0 18px 38px -10px rgba(var(--rgb), 0.38),
    0 4px 8px rgba(31, 36, 51, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .card-num {
  color: rgba(31, 36, 51, 0.28);
}
[data-theme="light"] .card-meta {
  color: rgba(31, 36, 51, 0.6);
}
[data-theme="light"] .card-name {
  color: #1f2433;
}

/* 20 个浅色微光变体 — 每张卡片独立色调 */
[data-theme="light"] .card1 {
  --rgb: 245, 158, 11;
  --from: rgba(255, 232, 195, 0.75);
  --via: rgba(255, 246, 225, 0.55);
}
[data-theme="light"] .card2 {
  --rgb: 20, 184, 166;
  --from: rgba(196, 240, 230, 0.7);
  --via: rgba(225, 250, 244, 0.55);
}
[data-theme="light"] .card3 {
  --rgb: 139, 92, 246;
  --from: rgba(220, 210, 250, 0.7);
  --via: rgba(238, 232, 255, 0.55);
}
[data-theme="light"] .card4 {
  --rgb: 236, 72, 153;
  --from: rgba(252, 215, 232, 0.7);
  --via: rgba(255, 232, 244, 0.55);
}
[data-theme="light"] .card5 {
  --rgb: 34, 197, 94;
  --from: rgba(205, 240, 210, 0.7);
  --via: rgba(228, 250, 232, 0.55);
}
[data-theme="light"] .card6 {
  --rgb: 14, 165, 233;
  --from: rgba(200, 235, 252, 0.72);
  --via: rgba(225, 245, 255, 0.55);
}
[data-theme="light"] .card7 {
  --rgb: 234, 179, 8;
  --from: rgba(255, 238, 180, 0.72);
  --via: rgba(255, 248, 220, 0.55);
}
[data-theme="light"] .card8 {
  --rgb: 6, 182, 212;
  --from: rgba(195, 240, 245, 0.7);
  --via: rgba(225, 250, 252, 0.55);
}
[data-theme="light"] .card9 {
  --rgb: 168, 85, 247;
  --from: rgba(228, 210, 252, 0.7);
  --via: rgba(243, 232, 255, 0.55);
}
[data-theme="light"] .card10 {
  --rgb: 249, 115, 22;
  --from: rgba(255, 220, 200, 0.72);
  --via: rgba(255, 240, 228, 0.55);
}
[data-theme="light"] .card11 {
  --rgb: 244, 114, 182;
  --from: rgba(252, 220, 235, 0.7);
  --via: rgba(255, 235, 245, 0.55);
}
[data-theme="light"] .card12 {
  --rgb: 225, 29, 72;
  --from: rgba(252, 210, 222, 0.7);
  --via: rgba(255, 230, 240, 0.55);
}
[data-theme="light"] .card13 {
  --rgb: 132, 204, 22;
  --from: rgba(225, 245, 200, 0.7);
  --via: rgba(240, 252, 220, 0.55);
}
[data-theme="light"] .card14 {
  --rgb: 8, 145, 178;
  --from: rgba(195, 232, 240, 0.7);
  --via: rgba(225, 245, 250, 0.55);
}
[data-theme="light"] .card15 {
  --rgb: 129, 140, 248;
  --from: rgba(220, 222, 252, 0.7);
  --via: rgba(232, 234, 255, 0.55);
}
[data-theme="light"] .card16 {
  --rgb: 251, 146, 60;
  --from: rgba(255, 225, 205, 0.72);
  --via: rgba(255, 240, 225, 0.55);
}
[data-theme="light"] .card17 {
  --rgb: 16, 185, 129;
  --from: rgba(200, 240, 222, 0.7);
  --via: rgba(225, 250, 235, 0.55);
}
[data-theme="light"] .card18 {
  --rgb: 192, 38, 211;
  --from: rgba(240, 210, 248, 0.7);
  --via: rgba(250, 230, 255, 0.55);
}
[data-theme="light"] .card19 {
  --rgb: 56, 189, 248;
  --from: rgba(205, 238, 252, 0.72);
  --via: rgba(230, 248, 255, 0.55);
}
[data-theme="light"] .card20 {
  --rgb: 250, 204, 21;
  --from: rgba(255, 240, 200, 0.72);
  --via: rgba(255, 250, 225, 0.55);
}

/* ============================================================
  23. 卡片信息增强 — 难度标签 / 资源类型
  ============================================================ */

.card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 0.3rem;
  flex-wrap: wrap;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.5;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

.badge-beginner {
  background: rgba(46, 204, 113, 0.15);
  color: #2ec27e;
  border: 1px solid rgba(46, 204, 113, 0.25);
}

.badge-intermediate {
  background: rgba(84, 160, 255, 0.15);
  color: #54a0ff;
  border: 1px solid rgba(84, 160, 255, 0.25);
}

.badge-advanced {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.25);
}

.badge-tool {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.25);
}

.card-type {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

[data-theme="light"] .badge-beginner {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.2);
}
[data-theme="light"] .badge-intermediate {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.2);
}
[data-theme="light"] .badge-advanced {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
  border-color: rgba(236, 72, 153, 0.2);
}
[data-theme="light"] .badge-tool {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
  border-color: rgba(234, 179, 8, 0.2);
}
[data-theme="light"] .card-type {
  color: rgba(31, 36, 51, 0.5);
}

/* ============================================================
  24. 课程分层标题
  ============================================================ */

.stage-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.stage-header:first-child {
  margin-top: 0;
}

.stage-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stage-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

.stage-desc {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  margin-left: auto;
  text-align: right;
}

[data-theme="light"] .stage-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ============================================================
  25. 新手引导 — 对比表 / 路线图
  ============================================================ */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.92rem;
}

.compare-table th,
.compare-table td {
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}

.compare-table th {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

.compare-table td {
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.compare-table tr:last-child td {
  border-bottom: none;
}

[data-theme="light"] .compare-table th,
[data-theme="light"] .compare-table td {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.roadmap-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.roadmap-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb) / 0.1);
  border: 1px solid rgba(var(--color-primary-rgb) / 0.2);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 500;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

.roadmap-arrow {
  color: var(--color-ink-faint);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================================
  26. FAQ 折叠面板
  ============================================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--color-elevated-rgb) / 0.4), rgba(var(--color-surface-rgb) / 0.15));
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(var(--color-primary-rgb) / 0.3);
}

.faq-item summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "\25B6";
  font-size: 0.65rem;
  color: var(--color-primary);
  transition: transform 0.2s ease;
  display: inline-block;
}

.faq-item[open] summary::before {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 1.25rem 1rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.8;
}

.faq-answer strong {
  color: var(--color-primary);
  font-weight: 600;
}

[data-theme="light"] .faq-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .faq-item[open] {
  border-color: rgba(0, 135, 235, 0.25);
}

/* ============================================================
  27. 新增卡片色板 card21 ~ card24
  ============================================================ */

.card21 {
  --rgb: 52, 211, 153;
  --from: #0a2418;
  --via: #081410;
}
.card22 {
  --rgb: 251, 113, 133;
  --from: #241218;
  --via: #14080c;
}
.card23 {
  --rgb: 234, 179, 8;
  --from: #242008;
  --via: #161208;
}
.card24 {
  --rgb: 34, 211, 238;
  --from: #082024;
  --via: #0a1416;
}

[data-theme="light"] .card21 {
  --rgb: 16, 185, 129;
  --from: rgba(200, 240, 222, 0.7);
  --via: rgba(225, 250, 235, 0.55);
}
[data-theme="light"] .card22 {
  --rgb: 244, 114, 182;
  --from: rgba(252, 220, 235, 0.7);
  --via: rgba(255, 235, 245, 0.55);
}
[data-theme="light"] .card23 {
  --rgb: 245, 158, 11;
  --from: rgba(255, 232, 195, 0.75);
  --via: rgba(255, 246, 225, 0.55);
}
[data-theme="light"] .card24 {
  --rgb: 6, 182, 212;
  --from: rgba(195, 240, 245, 0.7);
  --via: rgba(225, 250, 252, 0.55);
}

/* 返回顶部按钮 */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 45;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}
#back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-to-top:hover {
  box-shadow: 0 6px 24px rgba(79, 70, 229, 0.55);
  transform: translateY(-2px);
}
[data-theme="light"] #back-to-top {
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
}
@media (max-width: 640px) {
  #back-to-top {
    bottom: 1.2rem;
    right: 1.2rem;
    width: 40px;
    height: 40px;
  }
}