/* ============================================================
   KLLXS — 非主流霓虹风
   深色底 · 荧光字 · 发光 · 扫描线 · 像素装饰
   ============================================================ */

/* ---------- 主色调：霓虹粉绿青 ---------- */
html {
    --default: #FF2D95;
    --default-middle: #FF6BAA;
    --default-shallow: #FFB3D9;
    --default-alpha-10: rgba(255, 45, 149, 0.1);
    --default-alpha-20: rgba(255, 45, 149, 0.2);
    --default-alpha-30: rgba(255, 45, 149, 0.3);

    /* 自定义霓虹色 */
    --neon-pink: #FF2D95;
    --neon-green: #00FF9C;
    --neon-cyan: #00E5FF;
    --neon-purple: #B026FF;
    --neon-yellow: #FFE600;
    --bg-dark: #0A0014;
    --bg-card: #14001F;
    --bg-card-2: #1F0030;
    --border-glow: rgba(255, 45, 149, 0.4);
}

html.dark {
    --default: #FF2D95;
    --default-middle: #FF6BAA;
    --default-shallow: #FFB3D9;
    --default-alpha-10: rgba(255, 45, 149, 0.1);
    --default-alpha-20: rgba(255, 45, 149, 0.2);
    --default-alpha-30: rgba(255, 45, 149, 0.3);
}

/* 亮色模式：老式打印纸风格 */
html:not(.dark) {
    --bg-dark: #F0E6D2;
    --bg-card: #FFFFFF;
    --bg-card-2: #FAF0DC;
    --neon-pink: #C71585;
    --neon-green: #008B5A;
    --neon-cyan: #006B8C;
    --neon-purple: #7B1FA2;
    --neon-yellow: #B8860B;
    --border-glow: rgba(199, 21, 133, 0.3);
}

/* ---------- 全局背景 ---------- */
/* 背景色放 html：深色模式的渐变网格挪到 body::before 固定层（见下），
   body 自身不再铺不透明底色，否则 z-index:-1 的固定层会被它盖住 */
html {
    background-color: var(--bg-dark);
}

body {
    font-family: "Courier New", "Consolas", "Microsoft YaHei", monospace;
    color: var(--neon-green);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* 深色模式：背景网格 + 渐变
   之前写在 body 上用 background-attachment: fixed —— 那会让浏览器每次滚动
   整屏重绘 4 层渐变背景，页面越长越卡（影集页图片最多，感受最明显）。
   改成独立 fixed 伪元素后可被提升为合成层，滚动时零重绘，视觉不变 */
html.dark body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at top, rgba(176, 38, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(255, 45, 149, 0.12) 0%, transparent 50%),
        linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}

/* 亮色模式：纸张纹理 */
html:not(.dark) body {
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(0, 107, 140, 0.04) 24px, rgba(0, 107, 140, 0.04) 25px);
    color: var(--neon-purple);
}

/* 扫描线（全屏覆盖） */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.08) 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
    /* 原 mix-blend-mode: multiply 已移除：全屏混合模式会让合成器每帧
       重新混合整个视口内容，是整页动画/滚动变卡的重量级原因；
       深色底上黑条纹普通叠加视觉几乎一致 */
}

html:not(.dark) body::after {
    display: none;
}

/* ---------- 滚动条 ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neon-pink) var(--bg-dark);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--neon-pink), var(--neon-purple));
    border-radius: 0;
    border: 2px solid var(--bg-dark);
}

/* ---------- 选中文字 ---------- */
::selection {
    background: var(--neon-pink);
    color: #fff;
    text-shadow: none;
}

/* ---------- 发光文字工具类 ---------- */
.glow-pink   { color: var(--neon-pink);   text-shadow: 0 0 5px var(--neon-pink),   0 0 15px var(--neon-pink); }
.glow-green  { color: var(--neon-green);  text-shadow: 0 0 5px var(--neon-green),  0 0 15px var(--neon-green); }
.glow-cyan   { color: var(--neon-cyan);   text-shadow: 0 0 5px var(--neon-cyan),   0 0 15px var(--neon-cyan); }
.glow-purple { color: var(--neon-purple); text-shadow: 0 0 5px var(--neon-purple), 0 0 15px var(--neon-purple); }
.glow-yellow { color: var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow), 0 0 15px var(--neon-yellow); }

/* 闪烁动画 */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.6; }
    6% { opacity: 1; }
    7% { opacity: 0.4; }
    8% { opacity: 1; }
}

@keyframes rainbow-text {
    0%   { color: var(--neon-pink); }
    33%  { color: var(--neon-cyan); }
    66%  { color: var(--neon-purple); }
    100% { color: var(--neon-pink); }
}

@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes float-up {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

.blink { animation: blink 1s steps(2) infinite; }
.flicker { animation: flicker 4s linear infinite; }
/* 阴影不进 keyframes（颜色变时 currentColor 自动跟随），减少逐帧插值属性 */
.rainbow { animation: rainbow-text 6s linear infinite; text-shadow: 0 0 10px currentColor; }

/* ---------- 顶部滚动条幅 ---------- */
.site-banner {
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink), var(--neon-purple));
    color: #fff;
    font-size: 13px;
    padding: 6px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--neon-pink);
    text-shadow: 0 0 4px #fff;
    letter-spacing: 2px;
}

.site-banner .banner-text {
    display: inline-flex;
    white-space: nowrap;
    animation: scroll-left 60s linear infinite;
}

.site-banner .banner-text > span {
    padding-right: 50px;
}

.site-banner .star {
    color: var(--neon-yellow);
    margin: 0 8px;
}

/* ---------- 导航 ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 0, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-glow);
    box-shadow: 0 0 20px rgba(255, 45, 149, 0.3);
}

html:not(.dark) .site-header {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(199, 21, 133, 0.2);
}

.site-header [hx-ext="bny-nav"] {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

.site-header [hx-ext="bny-nav"] > .head {
    padding: 14px 24px;
}

.site-header [hx-ext="bny-nav"] .logo-box {
    color: var(--neon-pink) !important;
    gap: 10px;
    font-size: 20px;
    text-shadow: 0 0 8px var(--neon-pink);
}

.site-header [hx-ext="bny-nav"] .logo-box .logo {
    width: 32px;
    height: 32px;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 0 10px var(--neon-pink);
    border: 1px solid var(--neon-pink);
}

.site-header [hx-ext="bny-nav"] .logo-text {
    font-family: "Courier New", monospace;
    font-weight: 700;
    letter-spacing: 2px;
}

.site-header [hx-ext="bny-nav"] .menu {
    padding: 0 24px;
    gap: 4px;
}

.site-header [hx-ext="bny-nav"] .menu .trigger {
    color: var(--neon-cyan) !important;
    padding: 8px 16px;
    border-radius: 0;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 700;
    font-family: "Courier New", monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 4px var(--neon-cyan);
    border: 1px solid transparent;
}

.site-header [hx-ext="bny-nav"] .menu .trigger::before {
    display: none !important;
}

.site-header [hx-ext="bny-nav"] .menu .trigger:hover {
    color: #fff !important;
    background: var(--neon-pink) !important;
    text-shadow: 0 0 6px #fff;
    border-color: var(--neon-pink);
    box-shadow: 0 0 15px var(--neon-pink);
}

.site-header [hx-ext="bny-nav"] .menu .trigger.active {
    color: var(--neon-yellow) !important;
    background: rgba(255, 230, 0, 0.1) !important;
    border-color: var(--neon-yellow);
    text-shadow: 0 0 8px var(--neon-yellow);
}

.site-header [hx-ext="bny-nav"] .menu .trigger .bny-icon {
    font-size: 16px;
}

/* 主题切换图标 */
html.dark .icon-sun { display: inline-block; }
html.dark .icon-moon { display: none; }
html:not(.dark) .icon-sun { display: none; }
html:not(.dark) .icon-moon { display: inline-block; }

/* ---------- 页脚 ---------- */
.site-footer {
    border-top: 1px solid var(--border-glow);
    background: var(--bg-card);
    margin-top: 80px;
    box-shadow: 0 0 20px rgba(255, 45, 149, 0.2);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.footer-logo {
    font-family: "Courier New", monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--neon-pink);
    text-shadow: 0 0 6px var(--neon-pink);
    letter-spacing: 2px;
}

.footer-tagline {
    font-size: 12px;
    color: var(--neon-cyan);
    font-style: italic;
    text-shadow: 0 0 4px var(--neon-cyan);
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--neon-green);
    flex-wrap: wrap;
}

.footer-meta a {
    color: var(--neon-green);
    text-decoration: none;
    text-shadow: 0 0 4px var(--neon-green);
}

.footer-meta a:hover {
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
}

.footer-divider {
    color: var(--neon-pink);
}

/* ---------- 通用容器 ---------- */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

.page-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* ---------- 区块标题 ---------- */
.section-head {
    margin-bottom: 40px;
}

.section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--neon-yellow);
    margin-bottom: 12px;
    text-shadow: 0 0 6px var(--neon-yellow);
}

.section-title {
    font-family: "Courier New", monospace;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    margin: 0 0 12px;
}

.section-desc {
    font-size: 14px;
    color: var(--neon-green);
    max-width: 600px;
    line-height: 1.7;
    opacity: 0.85;
}

.section-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
    border-radius: 0;
    margin: 16px 0;
    box-shadow: 0 0 8px var(--neon-pink);
}

/* ---------- 首页：终端名片 ---------- */
.terminal-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px;
}

.terminal-box {
    background: var(--bg-card);
    border: 1px solid var(--neon-pink);
    border-radius: 0;
    box-shadow: 0 0 30px rgba(255, 45, 149, 0.4), inset 0 0 30px rgba(255, 45, 149, 0.05);
    margin-bottom: 32px;
    overflow: hidden;
}

.terminal-titlebar {
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
    color: #fff;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 0 0 4px #fff;
}

.terminal-titlebar .titlebar-dots {
    display: flex;
    gap: 6px;
}

.terminal-titlebar .dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px #fff;
}

.terminal-body {
    padding: 24px;
    font-size: 14px;
    line-height: 1.8;
}

.terminal-prompt {
    color: var(--neon-pink);
    text-shadow: 0 0 4px var(--neon-pink);
}

.terminal-prompt .user { color: var(--neon-green); text-shadow: 0 0 4px var(--neon-green); }
.terminal-prompt .at { color: var(--neon-yellow); }
.terminal-prompt .host { color: var(--neon-cyan); text-shadow: 0 0 4px var(--neon-cyan); }
.terminal-prompt .path { color: var(--neon-purple); text-shadow: 0 0 4px var(--neon-purple); }

.terminal-output {
    color: var(--neon-green);
    margin: 8px 0 16px;
    text-shadow: 0 0 3px var(--neon-green);
}

.terminal-ascii {
    color: var(--neon-pink);
    text-shadow: 0 0 6px var(--neon-pink);
    font-size: 12px;
    line-height: 1.2;
    white-space: pre;
    margin: 16px 0;
    font-family: "Courier New", monospace;
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--neon-green);
    vertical-align: middle;
    animation: blink 1s steps(2) infinite;
    box-shadow: 0 0 6px var(--neon-green);
}

/* 社交链接 */
.social-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-glow);
    border-radius: 0;
    transition: all 0.2s;
    color: var(--neon-cyan);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 0 4px var(--neon-cyan);
    letter-spacing: 1px;
}

.social-link:hover {
    border-color: var(--neon-pink);
    background: var(--neon-pink);
    color: #fff;
    text-shadow: 0 0 6px #fff;
    box-shadow: 0 0 20px var(--neon-pink);
    text-decoration: none;
    transform: translate(-2px, -2px);
}

.social-link .bny-icon {
    font-size: 18px;
}

/* ---------- 日记 · 霓虹留言板 ---------- */
.diary-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

.diary-head {
    text-align: center;
    margin-bottom: 40px;
}

.diary-head .section-divider {
    margin: 16px auto;
}

.diary-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.diary-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: 0;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 45, 149, 0.15);
}

.diary-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.4);
    transform: translate(-2px, -2px);
}

.diary-left {
    flex-shrink: 0;
}

.diary-date {
    flex-shrink: 0;
    width: 78px;
    padding: 2px 12px 2px 0;
    border-right: 1px dashed var(--border-glow);
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--neon-pink);
    text-shadow: 0 0 6px var(--neon-pink);
    letter-spacing: 0.5px;
    text-align: center;
}

.diary-date::before {
    content: "◷";
    display: block;
    font-size: 14px;
    color: var(--neon-cyan);
    text-shadow: 0 0 6px var(--neon-cyan);
    margin-bottom: 4px;
}

.diary-body {
    flex: 1;
    min-width: 0;
}



.diary-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--neon-green);
    margin-bottom: 12px;
    text-shadow: 0 0 2px var(--neon-green);
}

.diary-content p {
    margin: 0 0 8px;
}

.diary-content p:last-child {
    margin-bottom: 0;
}

/* 图片网格 */
.diary-images {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    aspect-ratio: 1;
    max-width: 480px;
    border: 1px solid var(--border-glow);
    padding: 4px;
    background: var(--bg-card-2);
    margin: 0 auto;
}

/* 1张：满格 */
.diary-images-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

/* 2张：左右各半 */
.diary-images-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

/* 3张：左大右二 */
.diary-images-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.diary-images-3 .diary-img:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.diary-images-3 .diary-img:nth-child(2) { grid-column: 2; grid-row: 1; }
.diary-images-3 .diary-img:nth-child(3) { grid-column: 2; grid-row: 2; }

/* 4张：四宫格 */
.diary-images-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* 5张：左二右三 */
.diary-images-5 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); }
.diary-images-5 .diary-img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.diary-images-5 .diary-img:nth-child(2) { grid-column: 1; grid-row: 4 / 7; }
.diary-images-5 .diary-img:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.diary-images-5 .diary-img:nth-child(4) { grid-column: 2; grid-row: 3 / 5; }
.diary-images-5 .diary-img:nth-child(5) { grid-column: 2; grid-row: 5 / 7; }

/* 6张：左大(2×2) + 右二 + 底三 */
.diary-images-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.diary-images-6 .diary-img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.diary-images-6 .diary-img:nth-child(2) { grid-column: 3; grid-row: 1; }
.diary-images-6 .diary-img:nth-child(3) { grid-column: 3; grid-row: 2; }
.diary-images-6 .diary-img:nth-child(4) { grid-column: 1; grid-row: 3; }
.diary-images-6 .diary-img:nth-child(5) { grid-column: 2; grid-row: 3; }
.diary-images-6 .diary-img:nth-child(6) { grid-column: 3; grid-row: 3; }

/* 7张：左三右四 */
.diary-images-7 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(12, 1fr); }
.diary-images-7 .diary-img:nth-child(1) { grid-column: 1; grid-row: 1 / 5; }
.diary-images-7 .diary-img:nth-child(2) { grid-column: 1; grid-row: 5 / 9; }
.diary-images-7 .diary-img:nth-child(3) { grid-column: 1; grid-row: 9 / 13; }
.diary-images-7 .diary-img:nth-child(4) { grid-column: 2; grid-row: 1 / 4; }
.diary-images-7 .diary-img:nth-child(5) { grid-column: 2; grid-row: 4 / 7; }
.diary-images-7 .diary-img:nth-child(6) { grid-column: 2; grid-row: 7 / 10; }
.diary-images-7 .diary-img:nth-child(7) { grid-column: 2; grid-row: 10 / 13; }

/* 8张：上三 + 中二 + 下三 */
.diary-images-8 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.diary-images-8 .diary-img:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.diary-images-8 .diary-img:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 3; }
.diary-images-8 .diary-img:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 3; }
.diary-images-8 .diary-img:nth-child(4) { grid-column: 1 / 4; grid-row: 3 / 5; }
.diary-images-8 .diary-img:nth-child(5) { grid-column: 4 / 7; grid-row: 3 / 5; }
.diary-images-8 .diary-img:nth-child(6) { grid-column: 1 / 3; grid-row: 5 / 7; }
.diary-images-8 .diary-img:nth-child(7) { grid-column: 3 / 5; grid-row: 5 / 7; }
.diary-images-8 .diary-img:nth-child(8) { grid-column: 5 / 7; grid-row: 5 / 7; }

/* 9张：九宫格 */
.diary-images-9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

.diary-img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-dark);
    cursor: zoom-in;
}

/* bny-image-item 包裹层撑满格子 */
.diary-img .bny-image-item {
    display: block;
    width: 100%;
    height: 100%;
}

.diary-img img,
.diary-img .bny-image-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
    filter: hue-rotate(20deg) saturate(1.2);
}

.diary-img:hover img {
    transform: scale(1.05);
    filter: hue-rotate(0deg) saturate(1.5);
}

.diary-actions {
    display: flex;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-glow);
}

.diary-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--neon-pink);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    text-shadow: 0 0 4px var(--neon-pink);
    letter-spacing: 1px;
}

.diary-action:hover {
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
}

.diary-action .bny-icon {
    font-size: 14px;
}

.diary-like.liked {
    color: var(--neon-green);
    text-shadow: 0 0 6px var(--neon-green);
}

/* 结束标记 */
.diary-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    color: var(--neon-purple);
    font-size: 12px;
    letter-spacing: 4px;
}

.diary-end-line {
    width: 40px;
    height: 1px;
    background: var(--neon-purple);
    box-shadow: 0 0 4px var(--neon-purple);
}

/* ---------- 影集页 · 瀑布流堆叠 ---------- */
.gallery-hero {
    padding: 48px 24px 32px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.gallery-hero .section-label,
.gallery-hero .section-title,
.gallery-hero .section-desc {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gallery-hero .section-title {
    margin-bottom: 12px;
}

.gallery-hero .section-divider {
    margin: 16px auto !important;
}

/* 瀑布流：CSS Grid 按行放置 —— 日期早的从左到右、从上到下阅读。
   之前用 column 多列是「先灌满一列再下一列」，阅读顺序是竖着的；
   grid-auto-flow: row dense 让后一张卡去填前面的空位，接近最短列堆叠。
   每张卡占几行由服务端按卡高算好写进 --span（行高 10px / 行距 24px）。 */
.gallery-masonry {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 10px;
    grid-auto-flow: row dense;
    gap: 24px 20px;
}

.gallery-card {
    grid-row: span var(--span, 11);
    align-self: start;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    box-shadow: 0 0 12px rgba(255, 45, 149, 0.1);
    /* 只过渡 hover 实际变化的属性，不用 all（all 会把所有属性纳入过渡监听） */
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gallery-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.25);
    transform: translateY(-3px);
}

/* 图片堆叠：容器按 --bny-image-group-size 撑开并居中 */
.gallery-card .bny-image-group {
    --bny-image-group-size: 240px;
    display: block;
    position: relative;
    width: var(--bny-image-group-size);
    max-width: 100%;
    height: calc(var(--bny-image-group-size) + 20px);
    margin: 0 auto;
    line-height: 1;
}

.gallery-card .bny-image-group .bny-image-item {
    position: absolute;
    left: 50%;
    bottom: 4px;
    /* 保留 bunny 自带的 nth-child 旋转位移时，用负 margin 居中堆叠 */
    margin-left: calc(var(--bny-image-group-size) / -2);
    width: var(--bny-image-group-size);
    height: var(--bny-image-group-size);
}

.gallery-card .bny-image-group .bny-image-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--border-glow);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    background: var(--bg-card-2);
    cursor: zoom-in;
}

/* 卡片信息 */
.gallery-card-info {
    margin-top: 16px;
    text-align: center;
}
.gallery-card-title {
    font-size: 14px;
    font-weight: 700;
    /* 行高锁死：卡高/--span 估算依赖它；超长标题省略号，不撑高卡片 */
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neon-yellow);
    text-shadow: 0 0 4px var(--neon-yellow);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.gallery-card-meta {
    font-size: 11px;
    line-height: 16px; /* 行高锁死：同上 */
    color: var(--neon-cyan);
    text-shadow: 0 0 3px var(--neon-cyan);
}

/* 滚动结束条与瀑布流同宽 */
.gallery-page-end {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
}

/* 响应式 */
@media (max-width: 1024px) {
    .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    /* 手机单列：退回普通块级流，顺序天然从上到下，不再需要行跨度 */
    .gallery-masonry {
        display: block;
        padding-left: 16px;
        padding-right: 16px;
    }
    .gallery-card { margin-bottom: 24px; }
    .gallery-card .bny-image-group {
        --bny-image-group-size: min(240px, 70vw) !important;
        width: min(var(--bny-image-group-size), 100%);
    }
    .gallery-card .bny-image-group .bny-image-item {
        margin-left: calc(min(var(--bny-image-group-size), 100vw - 64px) / -2);
    }
}

/* ---------- 编程页 ---------- */
.projects-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: 0;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 45, 149, 0.15);
}

.project-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.4);
    transform: translate(-2px, -2px);
}

.project-card .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.project-card .project-name {
    font-family: "Courier New", monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 1px;
}

.project-card .project-year {
    font-size: 11px;
    color: var(--neon-purple);
    letter-spacing: 2px;
    font-family: "Courier New", monospace;
    flex-shrink: 0;
    padding-top: 4px;
    text-shadow: 0 0 4px var(--neon-purple);
}

.project-card .project-desc {
    font-size: 13px;
    color: var(--neon-green);
    line-height: 1.7;
    margin: 0 0 16px;
    flex: 1;
    text-shadow: 0 0 2px var(--neon-green);
}

.project-card .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.project-card .project-tags .bny-tag {
    margin-left: 0;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 0;
    font-family: "Courier New", monospace;
}

.project-card .project-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-glow);
}

.project-card .project-links a {
    font-size: 12px;
    color: var(--neon-cyan);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    text-shadow: 0 0 4px var(--neon-cyan);
    letter-spacing: 1px;
}

.project-card .project-links a:hover {
    color: var(--neon-yellow);
    text-shadow: 0 0 6px var(--neon-yellow);
}

/* ---------- 响应式 ---------- */
@media (max-width: 968px) {
    .projects-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .terminal-page,
    .projects-page,
    .diary-page,
    .gallery-hero {
        padding: 32px 16px;
    }

    .section-title { font-size: 1.5rem; }
    .terminal-ascii { font-size: 9px; }

    .social-links { grid-template-columns: 1fr; }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .terminal-body { padding: 16px; }
    .diary-card { padding: 16px; }
}

/* SPA 进度条 */
.bny-spa-progress {
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan)) !important;
    box-shadow: 0 0 10px var(--neon-pink) !important;
}

/* 滚动加载（HTMX hx-indicator → .htmx-request） */
.scroll-end {
    cursor: pointer;
}

.scroll-end[data-done="1"] {
    cursor: default;
    opacity: 0.7;
}

.scroll-end-text {
    letter-spacing: 2px;
}

.scroll-loading {
    display: none;
    text-align: center;
    padding: 12px 0 28px;
    color: var(--neon-purple);
    font-size: 12px;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--neon-purple);
}

.scroll-loading.htmx-request,
.scroll-loading[hidden] {
    display: none;
}

.scroll-loading.htmx-request {
    display: block !important;
}

.scroll-empty {
    opacity: 0.8;
}