/* ============================================================
   Lxxyy Blog · Premium Portfolio Edition
   方向：墨蓝/靛蓝强调色 · 深浅色跟随系统 · 玻璃拟态细节
   交互：加载动画 / 自定义光标 / 卡片光标高光 / 滚动浮现
   ============================================================ */

/* ---------- 自托管展示字体（拉丁/数字，中文回落系统字体） ---------- */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 设计 Token：浅色 ---------- */
:root {
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

    --body-background: #F3F4FB;
    --card-background: #FFFFFF;
    --card-background-selected: #F3F4FD;
    --card-separator-color: rgba(22, 24, 43, 0.08);
    --body-text-color: #16182B;
    --accent-color: #4F46E5;
    --accent-color-darker: #4338CA;
    --accent-color-text: #FFFFFF;
    --scrollbar-thumb: rgba(79, 70, 229, 0.35);

    --ink: #16182B;
    --muted: rgba(22, 24, 43, 0.56);
    --line: rgba(22, 24, 43, 0.10);
    --accent-soft: rgba(79, 70, 229, 0.10);
    --radius: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 64, 0.04), 0 6px 18px rgba(16, 24, 64, 0.06);
    --shadow-md: 0 2px 6px rgba(16, 24, 64, 0.05), 0 18px 44px rgba(16, 24, 64, 0.12);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 设计 Token：深色 ---------- */
:root[data-scheme="dark"] {
    --body-background: #090B14;
    --card-background: rgba(255, 255, 255, 0.045);
    --card-background-selected: rgba(255, 255, 255, 0.09);
    --card-separator-color: rgba(255, 255, 255, 0.09);
    --body-text-color: #E7E9F4;
    --accent-color: #8B93FF;
    --accent-color-darker: #6366F1;
    --accent-color-text: #0A0D18;
    --scrollbar-thumb: rgba(139, 147, 255, 0.35);

    --ink: #E7E9F4;
    --muted: rgba(231, 233, 244, 0.55);
    --line: rgba(255, 255, 255, 0.10);
    --accent-soft: rgba(139, 147, 255, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ---------- 全局 ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--body-text-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--body-background);
}
/* 高级氛围渐变背景（跟随深浅色） */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1200px 780px at 82% -12%, var(--accent-soft), transparent 60%),
        radial-gradient(900px 620px at -12% 18%, var(--accent-soft), transparent 55%);
}
:root[data-scheme="dark"] body::before {
    background:
        radial-gradient(1200px 780px at 82% -12%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(900px 620px at -12% 18%, rgba(99, 102, 241, 0.10), transparent 55%);
}

::selection { background: var(--accent-color); color: var(--accent-color-text); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* 内容层级高于氛围背景/颗粒 */
.main-container { position: relative; z-index: 2; }

/* 焦点可见性（无障碍） */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 6px;
}

/* ---------- 加载动画（Preloader） ---------- */
.preloader {
    position: fixed; inset: 0; z-index: 99999;
    background: #07080F;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.9s;
}
.preloader::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px 500px at 50% 42%, rgba(99, 102, 241, 0.18), transparent 60%);
}
.pl-inner { text-align: center; }
.pl-word {
    display: flex; justify-content: center; gap: 0.04em; overflow: hidden;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.1;
    color: #EDEEF7; letter-spacing: 0.01em;
}
.pl-word span { display: inline-block; transform: translateY(120%); animation: plUp 0.7s var(--ease) forwards; }
.pl-word span:nth-child(1) { animation-delay: 0.06s; }
.pl-word span:nth-child(2) { animation-delay: 0.12s; }
.pl-word span:nth-child(3) { animation-delay: 0.18s; }
.pl-word span:nth-child(4) { animation-delay: 0.24s; }
.pl-word span:nth-child(5) { animation-delay: 0.30s; }
.pl-word span:nth-child(6) { animation-delay: 0.36s; }
.pl-word .pl-dot { color: var(--accent-color); }
.pl-sub {
    margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.42em; text-indent: 0.42em;
    color: rgba(237, 238, 247, 0.5); text-transform: uppercase;
    opacity: 0; animation: plFade 0.8s ease 0.7s forwards;
}
.pl-bar { margin: 1.8rem auto 0; width: 190px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pl-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6366F1, #8B93FF); animation: plFill 1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards; }

@keyframes plUp { to { transform: translateY(0); } }
@keyframes plFade { to { opacity: 1; } }
@keyframes plFill { to { width: 100%; } }

/* 退出：整屏上滑揭示 */
body.site-loaded .preloader { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
/* 二次访问：更快的轻量转场 */
body.pl-quick .preloader { transition: transform 0.55s var(--ease), visibility 0s linear 0.6s; }
body.pl-quick .pl-word span { animation-duration: 0.35s; }
body.pl-quick .pl-bar-fill { animation-duration: 0.4s; animation-delay: 0.1s; }
body.pl-quick .pl-sub { animation-delay: 0.25s; }

/* ---------- 自定义光标 ---------- */
.cursor-dot, .cursor-ring, .cursor-glow {
    position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%;
    transform: translate(-100px, -100px);
}
.cursor-dot { width: 7px; height: 7px; background: var(--accent-color); z-index: 9999; }
.cursor-ring {
    width: 34px; height: 34px; z-index: 9998; opacity: 0.6;
    border: 1.5px solid var(--accent-color);
    transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.25s;
}
body.cursor-active .cursor-ring { width: 54px; height: 54px; opacity: 1; }
.cursor-glow {
    width: 520px; height: 520px; z-index: 1; opacity: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.20), transparent 60%);
    filter: blur(40px);
}
:root[data-scheme="dark"] .cursor-glow { opacity: 1; }

/* ---------- 颗粒质感（film grain） ---------- */
.grain {
    position: fixed; inset: -50%; width: 200%; height: 200%;
    z-index: 3; pointer-events: none; opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* ---------- 左侧边栏 ---------- */
.left-sidebar {
    background: var(--card-background);
    border: 1px solid var(--card-separator-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
:root[data-scheme="dark"] .left-sidebar {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-avatar { transition: transform 0.3s var(--ease); display: inline-block; }
.site-avatar img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--card-background), 0 0 0 4.5px var(--accent-color);
    transition: transform 0.35s var(--ease);
}
.site-avatar:hover img { transform: scale(1.05) rotate(2deg); }
.site-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.site-description { color: var(--muted); }

/* 侧栏导航 */
.menu li a { border-radius: 12px; transition: background 0.25s var(--ease), color 0.25s, transform 0.25s var(--ease); }
.menu li a:hover { transform: translateX(4px); }
.menu li.current a, .menu li a.current {
    background: var(--accent-soft); color: var(--accent-color); font-weight: 600;
}

/* ---------- 文章卡片 ---------- */
.article-list article {
    position: relative; overflow: hidden;
    background: var(--card-background);
    border: 1px solid var(--card-separator-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 30px 32px; margin-bottom: 24px;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
                border-color 0.35s ease, background-color 0.35s ease, opacity 0.6s ease;
}
:root[data-scheme="dark"] .article-list article {
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.article-list article:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}
/* 卡片内跟随鼠标的高光 */
.article-list article::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 42%);
    opacity: 0; transition: opacity 0.35s ease;
}
.article-list article:hover::before { opacity: 1; }
.article-list article > * { position: relative; z-index: 1; }

.article-list .article-title, .article-title {
    font-family: var(--font-display); font-weight: 600;
    letter-spacing: -0.01em; line-height: 1.32; color: var(--ink);
}
.article-title a { color: inherit; text-decoration: none; }
.article-subtitle, .article-time, .article-translations, .article-category { color: var(--muted); }
.article-tags a {
    background: var(--accent-soft); color: var(--accent-color);
    border-radius: 999px; padding: 3px 11px; font-weight: 500; text-decoration: none;
    transition: background 0.25s, transform 0.25s var(--ease);
}
.article-tags a:hover { transform: translateY(-2px); }
/* 分类是小胶囊，不是通栏条（.article-category 是块级 header，链接才是胶囊） */
.article-category { background: transparent; padding: 0; border: none; }
.article-category a { display: inline-block; border-radius: 999px; padding: 4px 12px; font-weight: 500; text-decoration: none; transition: transform 0.25s var(--ease), filter 0.25s; }
.article-category a:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- 右侧小部件 ---------- */
.widget {
    background: var(--card-background);
    border: 1px solid var(--card-separator-color);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
:root[data-scheme="dark"] .widget { background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.widget::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 45%);
    opacity: 0; transition: opacity 0.35s ease;
}
.widget:hover::before { opacity: 1; }
.widget-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }

/* ---------- 滚动浮现 ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal-in { opacity: 1; transform: none; }

/* ---------- 正文排版 ---------- */
.article-content { line-height: 1.8; color: var(--body-text-color); }
.article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.article-content a {
    color: var(--accent-color); text-decoration: none;
    background-image: linear-gradient(var(--accent-color), var(--accent-color));
    background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size 0.35s var(--ease), color 0.25s;
    padding-bottom: 1px;
}
.article-content a:hover { background-size: 100% 1.5px; }
.article-content blockquote {
    margin: 1.4em 0; padding: 14px 20px; border-left: 3px solid var(--accent-color);
    background: var(--accent-soft); border-radius: 0 12px 12px 0; color: var(--body-text-color);
}
.article-content code {
    background: var(--accent-soft); color: var(--accent-color-darker);
    padding: 2px 7px; border-radius: 6px; font-size: 0.9em;
}
:root[data-scheme="dark"] .article-content code { color: var(--accent-color); }
.article-content pre {
    border-radius: 14px; border: 1px solid var(--card-separator-color);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.article-content pre code { background: transparent; padding: 0; color: inherit; }
.article-content img { border-radius: 14px; box-shadow: var(--shadow-sm); }
.article-content hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }
.article-content table { border-radius: 12px; overflow: hidden; }

/* ---------- 按钮 / 分页 ---------- */
.pagination .page-link, .btn {
    border-radius: 12px; transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s;
}
.pagination .page-link:hover { transform: translateY(-2px); }

/* ---------- 响应式微调 ---------- */
@media (max-width: 768px) {
    .article-list article { padding: 22px 20px; }
    .pl-sub { letter-spacing: 0.28em; }
}

/* ---------- 降低动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pl-word span, .pl-bar-fill, .pl-sub { animation: none !important; transform: none; opacity: 1; }
    .pl-bar-fill { width: 100%; }
    .preloader { transition: opacity 0.3s ease; }
    body.site-loaded .preloader { transform: none; opacity: 0; }
    .article-list article, .site-avatar, .site-avatar img, .menu li a { transition: none; }
    .reveal { opacity: 1; transform: none; }
    .cursor-dot, .cursor-ring, .cursor-glow, .grain { display: none !important; }
}

/* ================= 首页签名 Hero（会呼吸 · Lxxyy 专属） ================= */
.hero {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: clamp(400px, 58vh, 580px);
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    overflow: hidden;
    background: var(--card-background);
    border: 1px solid var(--card-separator-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
:root[data-scheme="dark"] .hero {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* 蓝图网格纹理（墨蓝调，极淡，向中心渐隐） */
.hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 42%, #000 30%, transparent 100%);
            mask-image: radial-gradient(72% 72% at 50% 42%, #000 30%, transparent 100%);
}
/* 呼吸氛围光：外层负责居中+鼠标跟随，内层负责缩放/透明度“呼吸” */
.hero-glow {
    position: absolute; left: 50%; top: 34%; width: 560px; height: 560px; z-index: 0;
    transform: translate(-50%, -50%); pointer-events: none;
}
.hero-glow i {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 62%);
    filter: blur(30px);
    animation: heroBreath 5.5s ease-in-out infinite;
}
@keyframes heroBreath {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.14); opacity: 1; }
}
.hero > *:not(.hero-grid):not(.hero-glow):not(.hero-ring) { position: relative; z-index: 1; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.55em;
    margin: 0 0 1.2rem; font-size: 0.8rem; letter-spacing: 0.3em; text-indent: 0.3em;
    text-transform: uppercase; color: var(--muted);
}
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.45; } }

.hero-title {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(3.4rem, 11vw, 7.5rem); line-height: 1.02; letter-spacing: -0.02em;
    color: var(--ink);
    transition: transform 0.3s var(--ease);
}
.hero-title span { display: inline-block; animation: letterBreath 4.6s ease-in-out infinite; }
.hero-title span:nth-child(1) { animation-delay: 0s; }
.hero-title span:nth-child(2) { animation-delay: 0.15s; }
.hero-title span:nth-child(3) { animation-delay: 0.3s; }
.hero-title span:nth-child(4) { animation-delay: 0.45s; }
.hero-title span:nth-child(5) { animation-delay: 0.6s; }
.hero-title span:nth-child(6) { animation-delay: 0.75s; }
@keyframes letterBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-title .hero-accent { color: var(--accent-color); animation: accentBlink 1.6s steps(2, start) infinite; }
@keyframes accentBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.hero-rotator { margin: 1.15rem 0 0; font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--muted); }
#heroWord { color: var(--accent-color); font-weight: 600; display: inline-block; transition: opacity 0.3s ease, transform 0.3s ease; }
#heroWord.swap { opacity: 0; transform: translateY(8px); }

.hero-meta { margin: 1.4rem 0 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.hero-scroll {
    display: inline-block; margin-top: 2rem; font-size: 0.78rem; letter-spacing: 0.22em; text-indent: 0.22em;
    text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.25s;
}
.hero-scroll:hover { color: var(--accent-color); }
.hero-scroll .chev { display: block; margin-top: 0.3rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 768px) {
    .hero { padding: 3rem 1.2rem 2.6rem; }
}

/* Hero 降低动态偏好 */
@media (prefers-reduced-motion: reduce) {
    .hero-title span, .hero-accent, .hero-dot, .hero-glow i, .hero-scroll .chev { animation: none !important; }
    .hero-title { transition: none; }
    #heroWord { transition: none; }
}

/* ================= 视觉精修（第二轮） ================= */
/* 文章卡片内容节奏 */
.article-list .article-title { font-size: 1.35rem; line-height: 1.35; margin-bottom: 0.4rem; }
.article-summary {
    color: var(--muted); line-height: 1.78; margin-top: 0.55rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-time { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--muted); }
.post-emoji { display: inline-block; font-size: 1.35rem; margin-bottom: 0.4rem; }

/* 深浅色切换平滑过渡 */
body { transition: background-color 0.35s ease, color 0.35s ease; }
.left-sidebar, .widget, .hero { transition: background-color 0.35s ease, border-color 0.35s ease; }

/* 侧栏导航 & 小部件 */
.menu li a { display: flex; align-items: center; gap: 0.6em; }
.widget-title { display: flex; align-items: center; gap: 0.55em; }
.widget-title::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--accent-color); flex: none; }

/* 阅读进度条（文章页） */
.read-progress {
    position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 9990;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-color-darker));
    box-shadow: 0 0 10px var(--accent-soft);
    transition: width 0.08s linear;
}

/* 代码块收紧（审查微调，消除底部过大留白） */
.article-content .highlight { margin: 1.3em 0; }
.article-content pre { padding: 16px 20px; line-height: 1.65; }
.article-content pre code { line-height: 1.65; }

/* ================= 层次与色彩强化（第三轮 · Aurora 极光渐变） ================= */
:root {
    --g1: #4F46E5;   /* 靛蓝 */
    --g2: #8B5CF6;   /* 紫罗兰 */
    --g3: #06B6D4;   /* 青 */
    --grad: linear-gradient(120deg, var(--g1), var(--g2) 52%, var(--g3));
    /* 带色彩倾向的层级阴影（更有纵深） */
    --shadow-sm: 0 1px 2px rgba(79, 70, 229, 0.06), 0 8px 24px rgba(99, 102, 241, 0.08);
    --shadow-md: 0 4px 12px rgba(79, 70, 229, 0.10), 0 22px 55px rgba(99, 102, 241, 0.16);
}
:root[data-scheme="dark"] {
    --g1: #818CF8;
    --g2: #A78BFA;
    --g3: #22D3EE;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(99, 102, 241, 0.14);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 22px 55px rgba(139, 92, 246, 0.22);
}

/* 多层极光背景（三色相，向不同方向晕开，营造纵深） */
body::before {
    background:
        radial-gradient(900px 620px at 85% -12%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(720px 520px at -10% 16%, rgba(139, 92, 246, 0.13), transparent 55%),
        radial-gradient(820px 620px at 50% 112%, rgba(6, 182, 212, 0.11), transparent 60%);
}
:root[data-scheme="dark"] body::before {
    background:
        radial-gradient(900px 620px at 85% -12%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(720px 520px at -10% 16%, rgba(139, 92, 246, 0.18), transparent 55%),
        radial-gradient(820px 620px at 50% 112%, rgba(6, 182, 212, 0.14), transparent 60%);
}

/* Hero：极光渐变标题字 */
.hero-title {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero-title span { color: transparent; -webkit-text-fill-color: transparent; }
.hero-title .hero-accent { background: none; -webkit-text-fill-color: var(--accent-color); color: var(--accent-color); }
/* Hero 第二团互补色辉光（青色，右下），与主紫辉光叠出层次 */
.hero::before {
    content: ''; position: absolute; right: -8%; bottom: -18%; width: 440px; height: 440px; z-index: 0;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.20), transparent 62%);
    filter: blur(42px); pointer-events: none;
    animation: heroBreath 6.5s ease-in-out 1.2s infinite;
}
:root[data-scheme="dark"] .hero::before { background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 62%); }
/* 主辉光偏紫罗兰 */
.hero-glow i { background: radial-gradient(circle, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.08) 45%, transparent 66%); }

/* 卡片/侧栏/小部件/Hero 顶部渐变细线（精致分层），悬停渐亮 */
.article-list article::after, .widget::after, .left-sidebar::after, .hero::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--g1), var(--g2), var(--g3), transparent);
    opacity: 0.35; transition: opacity 0.35s ease;
}
.article-list article:hover::after, .widget:hover::after, .left-sidebar:hover::after, .hero:hover::after { opacity: 1; }

/* 标签 / 链接下划 / 选中 / 滚动条 / 进度条 / 小部件标记：统一极光渐变 */
.article-tags a { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; }
.article-content a { background-image: linear-gradient(90deg, var(--g1), var(--g3)); }
::selection { background: var(--g2); color: #fff; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--g1), var(--g2)); background-clip: padding-box; }
.read-progress { background: var(--grad); }
.widget-title::before { background: var(--grad); }
.menu li.current a, .menu li a.current {
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    color: var(--accent-color); font-weight: 600;
}
.hero-eyebrow .hero-dot { background: var(--grad); }
#heroWord { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ================= 左侧栏加宽 + 放松（修复"目录太挤"） ================= */
/* 用 .container .left-sidebar 匹配主题优先级；侧栏改为舒适的固定宽度 */
@media (min-width: 1024px) {
    .container .left-sidebar { flex: 0 0 244px; width: 244px; max-width: 244px; }
}
@media (min-width: 1536px) {
    .container .left-sidebar { flex: 0 0 264px; width: 264px; max-width: 264px; }
}

/* 侧栏内部节奏 */
.left-sidebar header { gap: 16px; }

/* 主导航：更宽松的行距、更大的点击热区、更清晰的字号 */
.left-sidebar .menu { margin-top: 16px; }
.left-sidebar .menu li + li { margin-top: 4px; }
.left-sidebar .menu li a {
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 1.06rem;
    line-height: 1.4;
    white-space: nowrap;
}

/* ================= 动态感强化（第四轮 · 会动的极光 + 入场动画 + 磁吸） ================= */
/* 自主漂移的极光团：让整个背景"活"起来 */
.aurora-blob {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(90px); opacity: 0.32; will-change: transform;
}
.aurora-blob.b1 { width: 540px; height: 540px; background: #4F46E5; top: -12%; left: -8%; animation: drift1 26s ease-in-out infinite; }
.aurora-blob.b2 { width: 470px; height: 470px; background: #8B5CF6; top: 22%; right: -12%; animation: drift2 32s ease-in-out infinite; }
.aurora-blob.b3 { width: 430px; height: 430px; background: #06B6D4; bottom: -14%; left: 30%; animation: drift3 38s ease-in-out infinite; }
:root[data-scheme="dark"] .aurora-blob { opacity: 0.5; filter: blur(100px); }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(70px, 50px) scale(1.12); } 66% { transform: translate(-50px, 70px) scale(0.94); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-60px, -50px) scale(1.08); } 66% { transform: translate(50px, -70px) scale(1.14); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -60px) scale(1.1); } }

/* Hero 入场动画（纯CSS、带延迟避开loading；不依赖JS，JS失效也能正常显示） */
.hero-eyebrow, .hero-title, .hero-rotator, .hero-meta, .hero-scroll { opacity: 0; animation: heroIn 0.8s var(--ease) forwards; }
.hero-eyebrow { animation-delay: 1.15s; }
.hero-title { animation-delay: 1.28s; }
.hero-rotator { animation-delay: 1.45s; }
.hero-meta { animation-delay: 1.55s; }
.hero-scroll { animation-delay: 1.68s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* 降低动态偏好：关闭漂移与入场，直接显示 */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob { display: none !important; }
    .hero-eyebrow, .hero-title, .hero-rotator, .hero-meta, .hero-scroll { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ================= 关于页组件 + 侧栏填充 + 更多色彩（第五轮） ================= */
/* 侧栏：导航在整栏剩余空间里垂直居中分布，填满不再空 */
@media (min-width: 1024px) {
    /* 侧栏必须占满整列高度，menu 才能在剩余空间里分布 */
    .container .left-sidebar {
        min-height: 100vh;
        padding-top: 28px;
        padding-bottom: 28px;
    }

    /* 主导航 flex 填充，普通链接在可用空间里垂直居中 */
    .left-sidebar #main-menu {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }

    /* 底部设置/管理后台始终贴底 */
    .left-sidebar #main-menu .menu-bottom-section {
        margin-top: auto;
    }

    /* 菜单项撑满整行 */
    .left-sidebar #main-menu li {
        width: 100%;
    }
    .left-sidebar #main-menu li a {
        display: flex;
        width: 100%;
    }
}

/* ---- 关于页 · 个人卡片（头像小圆形，不再撑满） ---- */
.about-card {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--card-background);
    border: 1px solid var(--card-separator-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.7rem; margin: 1rem 0 1.6rem;
    position: relative; overflow: hidden;
}
.about-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad);
}
.about-card img {
    width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: none; margin: 0;
    box-shadow: 0 0 0 3px var(--card-background), 0 0 0 6px var(--accent-color);
}
.about-card .info h2 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.about-card .role { color: var(--muted); margin-bottom: 0.8rem; font-size: 0.98rem; }
.about-card .meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge { border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.badge:nth-child(1) { background: rgba(99, 102, 241, 0.13); color: #5b54e6; }
.badge:nth-child(2) { background: rgba(139, 92, 246, 0.14); color: #8B5CF6; }
.badge:nth-child(3) { background: rgba(6, 182, 212, 0.14); color: #0e94b4; }
:root[data-scheme="dark"] .badge:nth-child(1) { color: #a5b0ff; }
:root[data-scheme="dark"] .badge:nth-child(2) { color: #c4b0ff; }
:root[data-scheme="dark"] .badge:nth-child(3) { color: #6fe3f5; }

/* ---- 关于页 · 技能标签（彩色循环） ---- */
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1.4rem; }
.skill-tag {
    border-radius: 999px; padding: 0.45rem 0.95rem; font-size: 0.88rem; font-weight: 500;
    transition: transform 0.2s var(--ease), box-shadow 0.2s; cursor: default;
}
.skill-tag:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.skill-tag:nth-child(6n+1) { background: rgba(79, 70, 229, 0.12); color: #5b54e6; }
.skill-tag:nth-child(6n+2) { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.skill-tag:nth-child(6n+3) { background: rgba(6, 182, 212, 0.13); color: #0e94b4; }
.skill-tag:nth-child(6n+4) { background: rgba(236, 72, 153, 0.12); color: #db2777; }
.skill-tag:nth-child(6n+5) { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.skill-tag:nth-child(6n+6) { background: rgba(16, 185, 129, 0.13); color: #059669; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+1) { color: #a5b0ff; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+2) { color: #c4b0ff; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+3) { color: #6fe3f5; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+4) { color: #f9a8d4; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+5) { color: #fcd34d; }
:root[data-scheme="dark"] .skill-tag:nth-child(6n+6) { color: #6ee7b7; }

/* ---- 关于页 · 项目卡片 ---- */
.project-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0.8rem 0 1.4rem; }
.project-card {
    display: block; text-decoration: none; color: inherit;
    background: var(--card-background); border: 1px solid var(--card-separator-color);
    border-radius: var(--radius); padding: 1.4rem; position: relative; overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.project-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0.7; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-color); }
.project-card h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.project-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

/* ---- 关于页 · 联系按钮（渐变） ---- */
.contact-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.8rem 0; }
.contact-btn {
    padding: 0.7rem 1.4rem; border-radius: 12px; font-weight: 600; text-decoration: none; color: #fff;
    background: var(--grad); box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.contact-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.contact-btn.mint { background: linear-gradient(135deg, #10b981, #06b6d4); }
.contact-btn.orange { background: linear-gradient(135deg, #f59e0b, #f43f5e); }

/* 这些块级链接不要正文的下划线动画 */
.article-content a.project-card, .article-content a.contact-btn { background-image: none; padding-bottom: 0; }

/* ---- 正文标题加一点渐变强调（更丰富） ---- */
.article-content h2 { border-left: 3px solid transparent; border-image: linear-gradient(var(--g1), var(--g3)) 1; padding-left: 0.6em; }

/* 移动端 about-card 竖排 */
@media (max-width: 560px) {
    .about-card { flex-direction: column; text-align: center; gap: 1rem; }
    .about-card .meta { justify-content: center; }
}

/* ================= 图案动态效果增强（第六轮 · 点阵/极光环/分区标题） ================= */

/* ---- 全站漂移点阵图案层：给背景增加“呼吸”的图案肌理 ---- */
.bg-pattern {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, var(--line) 1.4px, transparent 1.7px);
    background-size: 32px 32px;
    opacity: 0.32;
    animation: patternDrift 90s linear infinite;
    -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 15%, transparent 78%);
            mask-image: radial-gradient(130% 110% at 50% 0%, #000 15%, transparent 78%);
}
:root[data-scheme="dark"] .bg-pattern {
    opacity: 0.22;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.3px, transparent 1.6px);
}
@media (prefers-reduced-motion: reduce) {
    .bg-pattern { animation: none; transform: none !important; }
}
@keyframes patternDrift {
    from { background-position: 0 0; }
    to { background-position: 32px 32px; }
}

/* ---- Hero 旋转极光环：三色渐变环缓慢旋转，增加仪式感动态 ---- */
.hero-ring {
    position: absolute; left: 50%; top: 34%; width: 520px; height: 520px; z-index: 0;
    transform: translate(-50%, -50%); pointer-events: none;
}
.hero-ring i {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), var(--g1));
    -webkit-mask-image: radial-gradient(transparent 60%, #000 61%, #000 64.5%, transparent 65.5%);
            mask-image: radial-gradient(transparent 60%, #000 61%, #000 64.5%, transparent 65.5%);
    opacity: 0.20; animation: ringRotate 28s linear infinite;
}
.hero-ring b {
    position: absolute; inset: 20%; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 68%);
    filter: blur(26px); animation: heroBreath 6s ease-in-out infinite;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
:root[data-scheme="dark"] .hero-ring i { opacity: 0.32; }
:root[data-scheme="dark"] .hero-ring b { opacity: 0.65; }
@media (max-width: 768px) { .hero-ring { width: 400px; height: 400px; } }
@media (prefers-reduced-motion: reduce) { .hero-ring i { animation: none; } }

/* ---- 极光团明暗呼吸：让漂移的色块更有“呼吸感” ---- */
.aurora-blob.b1 { animation: drift1 26s ease-in-out infinite, blobPulse 9s ease-in-out infinite; }
.aurora-blob.b2 { animation: drift2 32s ease-in-out infinite, blobPulse 11s ease-in-out infinite; }
.aurora-blob.b3 { animation: drift3 38s ease-in-out infinite, blobPulse 13s ease-in-out infinite; }
@keyframes blobPulse {
    0%, 100% { filter: brightness(0.88); }
    50% { filter: brightness(1.32); }
}

/* ---- 文章列表分区标题：打破“直接堆卡片”的单调 ---- */
.section-head {
    display: flex; align-items: center; gap: 0.9rem;
    margin: 0 0 1.8rem;
}
.section-head h2 {
    margin: 0; font-family: var(--font-display); font-size: 0.9rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.section-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none;
    animation: pulseDot 2s ease-in-out infinite;
}
.section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
@media (max-width: 768px) { .section-head { margin-bottom: 1.4rem; } }

/* ---- 页脚：渐变顶线 + 轻微居中，告别“白纸底下一行字” ---- */
.site-footer {
    position: relative; padding-top: 2.4rem; margin-top: 3rem;
    text-align: center; color: var(--muted); font-size: 0.86rem;
}
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
    background: var(--grad); opacity: 0.55;
}
.site-footer .copyright { margin-bottom: 0.35rem; }