/* ══════════════════════════════════════════════════════════════
   UI 预览覆盖层 · 混合方案（A 朔望月相主干 + C 逢魔之时点缀 + B 微点阵）
   代码来源：Gemini（Argon）方案，逐块取回原文，仅做覆盖层适配
   本文件只被 lab/ui-crescent.html 引用，主站不加载
   ══════════════════════════════════════════════════════════════ */

/* ── 1.1 设计 Token + 「暮光星纸」浅色主题（Gemini 原文） ── */
:root {
  --bg-deep:    oklch(8% 0.015 270);
  --bg-base:    oklch(12% 0.012 270);
  --bg-raised:  oklch(16% 0.010 270);
  --bg-high:    oklch(20% 0.008 265);
  --accent:      oklch(60% 0.18 280);
  --accent-soft: oklch(50% 0.13 280);
  --accent-dim:  oklch(30% 0.08 280);
  --accent-glow: oklch(60% 0.18 280 / 0.3);
  --gold:          oklch(80% 0.14 95);
  --twilight-rose: oklch(72% 0.16 350); /* 逢魔之时 · 暮光绯樱点缀色 */
  --text-primary:   oklch(92% 0.01 270);
  --text-secondary: oklch(72% 0.01 270);
  --text-muted:     oklch(50% 0.01 265);
  --border: oklch(100% 0 0 / 0.06);
  --glass-bg: oklch(100% 0 0 / 0.04);
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --space-3xl: 4rem; --space-4xl: 5rem;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem;
  --text-3xl: 3.5rem; --text-4xl: 5rem;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --spring: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391, 0.472, 0.562, 0.66, 0.765, 0.878, 1, 1.068, 1.105, 1.12, 1.115, 1.096, 1.07, 1.04, 1.012, 0.991, 0.978, 0.972, 0.975, 0.982, 0.991, 0.998, 1);
  --header-h: 64px; --content-max: 1100px;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-sans: 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', system-ui, sans-serif;
}
[data-theme="light"] {
  /* 告别「白茫茫」：采用温润护眼的暮光星纸色（淡紫灰纸底 + 暖象牙卡片） */
  --bg-deep:    oklch(93.8% 0.016 280);
  --bg-base:    oklch(95.6% 0.012 280);
  --bg-raised:  oklch(97.2% 0.008 275);
  --bg-high:    oklch(91.5% 0.020 280);
  --text-primary:   oklch(16% 0.02 275);
  --text-secondary: oklch(34% 0.02 275);
  --text-muted:     oklch(48% 0.025 270);
  --border: oklch(30% 0.06 280 / 0.11);
  --glass-bg: oklch(97.5% 0.008 280 / 0.78);
  --gold: oklch(48% 0.15 65);
  --twilight-rose: oklch(58% 0.18 350);
}

/* ── 1.2 Logo 新月内切金边（Gemini 原文） ── */
.brand-mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: inset -2px -1.5px 0 0 oklch(82% 0.15 95 / 0.85), 0 2px 10px var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: #fff; transition: transform 0.45s var(--spring), box-shadow 0.3s ease;
}

/* ── 1.2 Hero 彗星线 + 逢魔之时三色渐变（Gemini 原文） ── */
.hero-line {
  position: relative; width: 88px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--twilight-rose), var(--accent), transparent);
  margin-bottom: var(--space-xl); transform-origin: left;
}
.hero-line::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%) rotate(-25deg);
  box-shadow: inset -2.5px -1px 0 0 var(--gold), 0 0 12px var(--gold);
}
.hero-pre { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--gold); letter-spacing: 0.2em; margin-bottom: var(--space-md); }
.hero-name {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
  line-height: 1.16;
  margin-bottom: clamp(var(--space-xl), 4vh, var(--space-2xl));
}
.hero-name .highlight {
  background: linear-gradient(125deg, var(--accent) 0%, var(--twilight-rose) 38%, var(--gold) 72%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 28px oklch(60% 0.18 280 / 0.22));
}

/* ── 1.2 档案卡新月水印 + 卡标（Gemini 原文） ── */
.hero-card::before {
  content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--twilight-rose), var(--accent), transparent);
  opacity: 0.82;
}
.hero-card::after {
  content: ''; position: absolute; top: -28px; right: -28px;
  width: 148px; height: 148px; border-radius: 50%;
  box-shadow: inset -22px 14px 0 -4px oklch(80% 0.14 95 / 0.07);
  filter: drop-shadow(0 0 24px oklch(60% 0.18 280 / 0.16));
  pointer-events: none; z-index: 0;
  transform: rotate(-18deg);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card-mark {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 900; font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: inset -3.5px -2.5px 0 0 oklch(82% 0.15 95 / 0.88), 0 8px 24px var(--accent-glow);
}

/* ── 1.3 分区新月印记 + 星轨分割线（Gemini 原文） ── */
.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-serif); font-size: var(--text-xs); color: var(--gold);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: var(--space-md);
}
.section-label::before {
  content: '☾'; font-size: 0.85em; color: var(--gold);
  text-shadow: 0 0 10px oklch(80% 0.14 95 / 0.45);
}
.section-divider {
  position: relative; width: 72px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--accent) 55%, transparent);
  margin-bottom: var(--space-2xl);
}
.section-divider::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-deep);
  box-shadow: inset -2.5px -1px 0 0 var(--gold), 0 0 10px oklch(80% 0.14 95 / 0.5);
  transform: translateY(-50%) rotate(-20deg);
}

/* ── 1.3 时间线「朔 → 望」月相节点（Gemini 原文） ── */
.timeline-track-fill {
  position: absolute; left: 5px; top: 16px; width: 2px; height: 0;
  background: linear-gradient(to bottom, var(--accent), var(--twilight-rose), var(--gold)); border-radius: 999px;
  transition: height 0.3s ease;
}
.timeline-dot {
  position: absolute; left: calc(-1 * var(--space-2xl)); top: 17px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg-deep);
  border: 1px solid oklch(80% 0.14 95 / 0.22);
  box-shadow: inset -3.5px -1.5px 0 0 var(--gold);
  transition: all 450ms var(--ease-out-expo);
  transform: rotate(-20deg) scale(0.95); opacity: 0.9; z-index: 2;
}
[data-theme="light"] .timeline-dot {
  background: var(--bg-deep); border-color: oklch(48% 0.15 65 / 0.3);
  box-shadow: inset -3.5px -1.5px 0 0 var(--accent);
}
.timeline-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0; pointer-events: none;
}
.timeline-dot.active {
  border-color: var(--gold);
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--gold) 45%, var(--accent) 100%);
  box-shadow: inset 0 0 0 0 var(--gold), 0 0 14px var(--accent-glow), 0 0 6px oklch(80% 0.14 95 / 0.6);
  transform: rotate(0deg) scale(1.22); opacity: 1;
}

/* ── 1.4 项目封面微距点阵（Gemini 原文） ── */
.project-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(oklch(100% 0 0 / 0.14) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(135deg, oklch(100% 0 0 / 0.10), transparent 36%, oklch(0% 0 0 / 0.10));
  opacity: 0.65; transition: opacity 0.4s ease;
}
.project-card:hover .project-visual::after { opacity: 1; }

/* ── 1.4 页脚新月徽章（Gemini 原文） ── */
.footer-decor {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-serif); color: oklch(52% 0.04 280);
  letter-spacing: 0.28em; margin-bottom: var(--space-sm);
}
.footer-decor::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset -6px -2.5px 0 0 var(--gold);
  filter: drop-shadow(0 0 10px oklch(80% 0.14 95 / 0.35));
  transform: rotate(-18deg);
}

/* ── 1.4 进度轨月相点（Gemini 原文） ── */
.project-progress-dot {
  position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%;
  border: none; background: oklch(8% 0.015 270);
  box-shadow: inset -2.5px -1px 0 0 oklch(100% 0 0 / 0.45);
  transform: rotate(-20deg); transition: all 220ms var(--ease-out-expo);
}
.project-progress-dot.completed {
  box-shadow: inset -3px -1px 0 0 var(--gold);
  background: oklch(14% 0.02 270);
}
.project-progress-dot.active {
  transform: rotate(0deg) scale(1.55);
  background: radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%, var(--accent));
  box-shadow: 0 0 0 4px oklch(60% 0.18 280 / 0.16), 0 0 18px var(--accent-glow);
}

/* ── 1.4 浅色模式卡片「暮光星纸」（Gemini 原文） ── */
[data-theme="light"] .hero-card,
[data-theme="light"] .project-card-m,
[data-theme="light"] .stat-card,
[data-theme="light"] .about-card,
[data-theme="light"] .contact-card {
  background: linear-gradient(155deg, oklch(98% 0.006 280 / 0.88), oklch(95.5% 0.014 285 / 0.82)) !important;
  border-color: oklch(35% 0.08 280 / 0.12) !important;
  box-shadow: 0 12px 32px oklch(30% 0.06 280 / 0.07), inset 0 1px 0 oklch(100% 0 0 / 0.65) !important;
}
[data-theme="light"] .featured-card,
[data-theme="light"] .projects-stack .project-card {
  background: oklch(45% 0.12 280 / 0.08) !important;
  border: none !important;
  box-shadow: 0 14px 36px oklch(30% 0.06 280 / 0.08), 0 1px 3px oklch(0% 0 0 / 0.04) !important;
}
[data-theme="light"] .featured-card-inner,
[data-theme="light"] .projects-stack .project-card-inner {
  background: linear-gradient(155deg, oklch(97.8% 0.006 280), oklch(95.2% 0.014 280)) !important;
}

/* ── 第 2 节 详情页小样：hero-icon / arch-diagram / 页脚（Gemini 原文） ── */
.hero-icon {
  width: 88px; height: 88px; margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, oklch(20% 0.06 285), oklch(30% 0.08 285));
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  box-shadow: inset -4px -3px 0 0 oklch(80% 0.14 95 / 0.55), 0 12px 40px var(--accent-glow);
}
.arch-diagram {
  background:
    radial-gradient(oklch(100% 0 0 / 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(135deg, oklch(14% 0.03 285), oklch(10% 0.02 270));
  border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 18px;
  padding: 2rem; margin: 1.4rem 0;
  font-family: 'Consolas','Courier New', monospace;
  font-size: 0.82rem; line-height: 2; color: var(--text-secondary);
  white-space: pre; overflow-x: auto;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.footer .footer-decor {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-serif); color: oklch(52% 0.04 280);
  letter-spacing: 0.28em; font-size: 0.9rem; margin-bottom: 1.2rem;
}
.footer .footer-decor::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset -6px -2.5px 0 0 var(--gold);
  filter: drop-shadow(0 0 10px oklch(80% 0.14 95 / 0.35));
  transform: rotate(-18deg);
}

/* ── 第 3 节 博客小样：樱粉光晕（Gemini 原文，:global 已转普通选择器） ── */
.blog-shell .article-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--twilight-rose, oklch(72% 0.16 350)), var(--gold), transparent 65%) top left / 100% 1px no-repeat,
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), oklch(72% 0.16 350 / 0.14), oklch(60% 0.18 280 / 0.08) 45%, transparent 65%);
  opacity: 0; transition: opacity 0.4s;
}
.blog-shell .article-card:hover::before { opacity: 1; }
.blog-shell .article-card:hover {
  border-color: color-mix(in oklab, var(--twilight-rose, oklch(72% 0.16 350)) 45%, var(--accent));
  box-shadow: 0 18px 44px oklch(0% 0 0 / 0.26), 0 0 24px oklch(72% 0.16 350 / 0.08);
}
[data-theme="light"] .blog-shell .article-card {
  background: linear-gradient(155deg, oklch(98% 0.006 280 / 0.88), oklch(95.5% 0.014 285 / 0.82));
  border-color: oklch(35% 0.08 280 / 0.12);
  box-shadow: 0 10px 28px oklch(30% 0.06 280 / 0.07);
}

/* ── 覆盖层适配（非 Gemini 原文：与前两轮移动端规则对齐） ── */
@media (max-width: 768px) {
  /* f2 的桌面字号会压过主站移动端标题规则，这里重申移动端值 */
  .hero-name { font-size: clamp(2rem, 11vw, 3.2rem); }
  /* 移动端拆壳时同步隐藏档案卡新月水印 */
  .hero-card::after { display: none; }
  /* 12px 月相节点在移动端时间线上的对齐 */
  .timeline-dot { left: calc(-1 * var(--space-lg)); }
}

/* ── 预览页小样区基础样式（非 Gemini 原文，仅供小样演示） ── */
.preview-demo { border-top: 1px dashed var(--border); }
.preview-demo .blog-shell .article-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.4rem 1.6rem; max-width: 720px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.preview-demo .article-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; }
.preview-demo .article-meta { font-size: var(--text-xs); color: var(--gold); margin-bottom: 0.6rem; }
.preview-demo .article-excerpt { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; }
.preview-demo .demo-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-sm); }
.preview-chip {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 120;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: oklch(14% 0.015 270 / 0.88); border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary); font-size: 12px; text-decoration: none;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.35);
}
.preview-chip b { color: var(--gold); font-weight: 700; }