/* @font-face（english + chinese）已拆到 css/fonts-late.css，
   主页 load 后 idle 注入，见 js/lib/sakura-load.js ensureFonts；
   栈：english → chinese → 系统回退（无字重文件，bold 走伪粗体） */

/* ==========================================================================
   SAKURA.LOG - Black & Pink Y2K Theme Styles (Complete Restored Edition)
   ========================================================================== */
/* 视口滚动根在 #page-scroll：html/body 锁死，经典槽才能叠在固定壁纸上。
   html 必须铺 --bg-primary：body/#page-scroll 透明后，进主页/切页会透出 UA 白底。 */
html {
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-primary);
    color-scheme: dark;
}

/* 主栏高度桥：切页后 min-height 过渡，时长用旧横移时钟，防滚动条拇指跳变 */
main.is-nav-height-bridging {
    transition: min-height var(--nav-height-bridge-duration) var(--nav-height-bridge-ease);
}

:root {
    --bg-primary: #0d0d0e;
    --bg-secondary: #131317;
    --bg-glass: rgba(19, 19, 23, 0.45);
    --bg-glass-nav: rgba(13, 13, 14, 0.35);
    --text-primary: #f4f4f6;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    /* 全站字距唯一旋钮（拉丁/中文同属性；想松就加大，想跟字体原貌用 0） */
    --en-letter-spacing: 0.05em;
    --pink-accent: #f472b6;
    --pink-light: #fbcfe8;
    /* 页面/目录滚动条：拇指不透明粉；轨道纯黑 0.3；悬停/焦点六色马卡龙（与进度条同源） */
    --scrollbar-thumb: var(--pink-accent);
    --scrollbar-thumb-hover: linear-gradient(
        to bottom,
        var(--macaron-pink),
        var(--macaron-cyan),
        var(--macaron-purple),
        var(--macaron-peach),
        var(--macaron-mint),
        var(--macaron-sky)
    );
    --scrollbar-track: rgba(0, 0, 0, 0.3);
    --pink-glow: rgba(244, 114, 182, 0.35);
    --pink-deep: #db2777;
    --border-color: rgba(244, 114, 182, 0.16);
    --border-hover: rgba(244, 114, 182, 0.45);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --card-shadow-hover: 0 12px 40px 0 rgba(244, 114, 182, 0.18);
    /* 导航/正文视图雾入（opacity only） */
    --nav-view-fog-duration: 0.35s;
    --nav-view-fog-ease: ease;
    /* 切页滚动条高度桥：保持旧横移同款时长/缓动（勿绑雾入） */
    --nav-height-bridge-duration: 0.78s;
    --nav-height-bridge-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* 顶栏胶囊：保留独立横移手感（不跟雾入同速） */
    --nav-indicator-duration: 0.78s;
    --nav-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* 🌸 全站马卡龙色谱（与首访/文章加载短条 / 友链发丝线同源；流光与 .tag-pastel-* 共用） */
    --macaron-pink: #f8bbd0;
    --macaron-cyan: #80deea;
    --macaron-purple: #b39ddb;
    --macaron-peach: #ffab91;
    --macaron-mint: #a5d6a7;
    --macaron-sky: #b3e5fc;
    --macaron-pink-rgb: 248, 187, 208;
    --macaron-cyan-rgb: 128, 222, 234;
    --macaron-purple-rgb: 179, 157, 219;
    --macaron-peach-rgb: 255, 171, 145;
    --macaron-mint-rgb: 165, 214, 167;
    --macaron-sky-rgb: 179, 229, 252;

    /* 六色马卡龙流光：竖向供归档 / 碎碎念 / 文章卡左侧；横向供友链交换卡顶条 */
    --macaron-rail-glow: linear-gradient(
        to bottom,
        rgba(var(--macaron-pink-rgb), 0) 0%,
        rgba(var(--macaron-pink-rgb), 0.75) 10%,
        rgba(var(--macaron-cyan-rgb), 0.85) 26%,
        rgba(var(--macaron-purple-rgb), 0.85) 42%,
        rgba(var(--macaron-peach-rgb), 0.85) 58%,
        rgba(var(--macaron-mint-rgb), 0.85) 74%,
        rgba(var(--macaron-sky-rgb), 0.75) 90%,
        rgba(var(--macaron-sky-rgb), 0) 100%
    );
    --macaron-rail-glow-x: linear-gradient(
        to right,
        rgba(var(--macaron-pink-rgb), 0) 0%,
        rgba(var(--macaron-pink-rgb), 0.75) 10%,
        rgba(var(--macaron-cyan-rgb), 0.85) 26%,
        rgba(var(--macaron-purple-rgb), 0.85) 42%,
        rgba(var(--macaron-peach-rgb), 0.85) 58%,
        rgba(var(--macaron-mint-rgb), 0.85) 74%,
        rgba(var(--macaron-sky-rgb), 0.75) 90%,
        rgba(var(--macaron-sky-rgb), 0) 100%
    );
    /* 镂空态：中段挖掉圆点/火箭位，上下仍是同一六色序 */
    --macaron-rail-glow-notch: linear-gradient(
        to bottom,
        rgba(var(--macaron-pink-rgb), 0) 0%,
        rgba(var(--macaron-pink-rgb), 0.75) 10%,
        rgba(var(--macaron-cyan-rgb), 0.85) 26%,
        rgba(var(--macaron-purple-rgb), 0.85) 38%,
        transparent calc(50% - 4px),
        transparent calc(50% + 4px),
        rgba(var(--macaron-peach-rgb), 0.85) 62%,
        rgba(var(--macaron-mint-rgb), 0.85) 74%,
        rgba(var(--macaron-sky-rgb), 0.75) 90%,
        rgba(var(--macaron-sky-rgb), 0) 100%
    );
    /* 拖尾芯：两端不透明，远端末端羽化交给 mask，避免接头处出现渐变空档 */
    --macaron-rail-glow-core: linear-gradient(
        to bottom,
        rgba(var(--macaron-pink-rgb), 0.75) 0%,
        rgba(var(--macaron-cyan-rgb), 0.85) 20%,
        rgba(var(--macaron-purple-rgb), 0.85) 40%,
        rgba(var(--macaron-peach-rgb), 0.85) 60%,
        rgba(var(--macaron-mint-rgb), 0.85) 80%,
        rgba(var(--macaron-sky-rgb), 0.75) 100%
    );

    /* ⏱️ 轨道跟随（欠阻尼弹簧 · 果冻过冲）
       --rail-follow-tau：越大越慢（ω = 1/τ）。0.2 偏跟手，0.35 更软。
       --rail-follow-zeta：<1 欠阻尼才有过冲。0.55 更弹，0.62 丝滑果冻，≥1 无过冲。
       --archive-flow-step：归档列表流水 stagger（默认 0.12）。入场流光按同一 step
                           逐条把目标钉到对应行（位置同步），不再「一脚弹到轨底」。
       DevTools → :root 改即可热调。 */
    --rail-follow-tau: 0.25;
    --rail-follow-zeta: 0.5;
    --archive-flow-step: 0.1;

    /* 归档标题：进焦快右移，离焦回左（只动当前行与刚离开的那一行） */
    --archive-title-shift: 0.82rem;
    --archive-title-in: 0.5s;
    --archive-title-out: 1.2s;

    /* 主页文章卡左侧流光 / 友链交换卡顶条：进焦从中心扩，离焦缩回中间。
       --article-rail-out 同时管 scale 与 opacity；opacity 若另写短时长，离焦会先淡没，内缩看不见。 */
    --article-rail-in: 1.1s;
    --article-rail-out: 1.3s;
    --article-title-in: 0.42s;
    --article-title-out: 0.55s;

    /* 碎碎念火箭拖尾：尖端/节奏对齐归档彗星尾（core 渐变 + 58% mask，无 extra） */
    --thought-trail-in: 0.68s;
    --thought-trail-out: 0.88s;
    --thought-trail-hold: 0.65s;
    --thought-trail-min: 72px;
    --thought-trail-max: 560px;
    --thought-trail-extra: 0px;

    /* 归档流光拖尾（彗星尾，贴在 56px 滑块反方向）
       节奏与碎碎念同源；max 更短，因为拖尾被夹在当年轨道内。 */
    --archive-trail-in: 0.68s;
    --archive-trail-out: 0.88s;
    --archive-trail-hold: 0.65s;
    --archive-trail-min: 72px;
    --archive-trail-max: 620px;
    /* ⚠️ 原 --archive-trail-extra(28px) 已删除：它只加在拖尾【远端】，会让远端越过
       「上一次聚焦行」约 17px、戳进上一行（「从 5 换到 7，拖尾却从 4 长出来」）。
       长度现在严格 = |焦点 − 链首起点|，短尾可读性由 --archive-trail-min 负责。
       见 06-performance.txt 3.14。 */

    /* 🌟 玻璃模糊半径（全站最贵的一项 GPU 开销：模糊像素 ≈ 玻璃面积 × 半径）。
       .glass-nav / .glass-card 都读这里，改 :root 即可热调做 A/B。
       ⚠️ 默认值必须与现网一致（8px）：改这里等于改观感，先看 06-performance.txt §2[A]。 */
    --glass-blur: 8px;

    /* ⏱️【背景图缩放动画时间调节】：可在 0.4s ~ 1.5s 自由调整；与横移时钟独立（首页滚动跟手也读这里） */
    --bg-zoom-duration: 1.2s;
    --bg-zoom-timing: cubic-bezier(0.25, 1, 0.5, 1);
}

body,
button,
input,
textarea,
select,
.font-sans,
.font-serif,
.font-mono {
    font-family: 'english', 'chinese', sans-serif;
    letter-spacing: var(--en-letter-spacing);
}

/* 压住 Tailwind tracking-*，避免局部类拆开全站字距 */
.tracking-tight,
.tracking-wide,
.tracking-wider,
.tracking-widest,
.tracking-\[0\.25em\] {
    letter-spacing: var(--en-letter-spacing);
}

body {
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    color: var(--text-primary);
    transition: color 0.4s ease, border-color 0.4s ease;
}

#page-scroll {
    position: relative;
    z-index: 30; /* 高于花瓣 canvas(z-10/20)，经典槽才能画在壁纸上而不是被 canvas 盖住 */
    height: 100%;
    height: 100dvh;
    overflow-x: clip;
    overflow-y: scroll;
    background: transparent;
    overscroll-behavior-y: contain;
}

.bg-theme {
    background-color: var(--bg-primary);
}

.text-theme {
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-muted);
}

.border-theme {
    border-color: var(--border-color);
}

/* 与 Tailwind border-pink-500/20 同系：theme 色 40% 透明度，供 border-t border-theme/40 等使用 */
.border-theme\/40 {
    border-color: rgb(244 114 182 / 0.4);
}

/* 页面滚动条：槽在 #page-scroll 内，透明容器才能透出固定壁纸 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-hover);
}

/*
  Chrome 121+：一旦写了 scrollbar-color/width 就会禁用 ::-webkit-scrollbar-*。
  标准属性只留给不支持 webkit 伪元素的引擎（Firefox）。
*/
@supports not selector(::-webkit-scrollbar) {
    #page-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

.glass-nav {
    background: var(--bg-glass-nav);
    backdrop-filter: blur(var(--glass-blur, 8px));
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--glass-blur, 8px));
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--card-shadow-hover);
}

.article-card {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* 左侧马卡龙流光：默认缩在竖直中点；hover 从中心向上下展开，离焦缩回。
   不用 overflow:hidden，以免裁掉卡片悬停阴影。条带上下各留 10px 避开圆角。
   离焦 opacity 必须跟 --article-rail-out，否则 0.28s 淡出把 scaleY 内缩盖掉。 */
.article-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: var(--macaron-rail-glow);
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.45),
                0 0 14px rgba(var(--macaron-cyan-rgb), 0.28);
    transform: scaleY(0);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: transform var(--article-rail-out) cubic-bezier(0.22, 0.6, 0.28, 1),
                opacity var(--article-rail-out) ease;
}

@media (hover: hover) and (pointer: fine) {
    .article-card:hover::before {
        transform: scaleY(1);
        opacity: 1;
        transition-duration: var(--article-rail-in), 0.2s;
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease;
    }
}

.article-card:hover {
    transform: translateY(-4px);
    background-color: rgba(244, 114, 182, 0.025);
    border-color: rgba(244, 114, 182, 0.32) !important;
    box-shadow: 0 12px 28px -10px rgba(244, 114, 182, 0.12),
                0 0 14px rgba(244, 114, 182, 0.06) !important;
}

@media (hover: hover) and (pointer: fine) {
    .article-card h2 {
        transform: scale(1);
        transform-origin: left center;
        transition: transform var(--article-title-out) cubic-bezier(0.22, 0.6, 0.28, 1),
                    color 0.35s ease;
    }

    .article-card:hover h2 {
        transform: scale(1.035);
        transition-duration: var(--article-title-in), 0.32s;
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease;
    }
}

.text-gradient {
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--pink-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 导航栏链接 */
.site-nav {
    position: relative;
}

@media (min-width: 1024px) {
    .site-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* 左右留给品牌区 / 搜索按钮，避免挤出或重叠 */
        max-width: calc(100% - 22rem);
        flex-wrap: nowrap;
        justify-content: center;
    }

    .site-nav .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* 仍是桌面横排，但宽度不够宽时先收间距，而不是换行 */
@media (min-width: 1024px) and (max-width: 1280px) {
    .site-nav {
        gap: 0.75rem !important;
        /* 覆盖 gap-5 / gap-8 */
    }
}

.nav-active-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    background: rgba(244, 114, 182, 0.16);
    border: 1px solid rgba(244, 114, 182, 0.5);
    box-shadow: 0 0 18px var(--pink-glow), inset 0 0 12px rgba(244, 114, 182, 0.08);
    opacity: 0;
    transition:
        left var(--nav-indicator-duration) var(--nav-indicator-ease),
        top var(--nav-indicator-duration) var(--nav-indicator-ease),
        width var(--nav-indicator-duration) var(--nav-indicator-ease),
        height var(--nav-indicator-duration) var(--nav-indicator-ease),
        opacity 0.2s ease;
}

.nav-active-indicator.is-ready {
    opacity: 1;
}

.nav-link {
    position: relative;
    z-index: 1;
    font-family: 'english', 'chinese', sans-serif;
    color: var(--text-secondary);
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.nav-link svg {
    color: inherit;
    fill: currentColor;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.nav-link:hover {
    color: var(--pink-accent);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--pink-accent) !important;
    /* 粉底胶囊由 .nav-active-indicator 承担，此处只保留文字高亮 */
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: 0 0 12px var(--pink-glow);
    transform: translateY(0);
}

.nav-link.active svg {
    filter: drop-shadow(0 0 6px var(--pink-accent));
}

.badge-y2k {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(244, 114, 182, 0.1);
    color: var(--pink-accent);
    border: 1px solid var(--border-color);
    letter-spacing: var(--en-letter-spacing);
}

.tag-badge {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(244, 114, 182, 0.12);
    color: var(--pink-accent);
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.filter-btn {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.72rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-glass);
    transition: all 0.25s ease;
}

.filter-btn.active {
    background: var(--pink-accent);
    color: #ffffff;
    border-color: var(--pink-accent);
    box-shadow: 0 0 16px var(--pink-glow);
}

/* 全站统一按钮 */
.btn-icon {
    font-family: 'english', 'chinese', sans-serif !important;
    background: rgba(19, 19, 23, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(244, 114, 182, 0.25) !important;
    color: var(--pink-accent, #f472b6) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.btn-icon:hover {
    background: rgba(244, 114, 182, 0.18) !important;
    border-color: var(--pink-accent, #f472b6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px var(--pink-glow) !important;
    transform: translateY(-1px) scale(1.03) !important;
}

.btn-icon:active {
    transform: scale(0.96) !important;
    background: rgba(244, 114, 182, 0.28) !important;
}

.visitor-stat-badge {
    background: rgba(244, 114, 182, 0.08);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.3s ease;
}

.visitor-stat-badge:hover {
    border-color: var(--pink-accent);
    background: rgba(244, 114, 182, 0.16);
    box-shadow: 0 0 12px var(--pink-glow);
}

/* ==========================================================================
   🚀 本站网络延迟胶囊 (#net-badge) — 色值/阈值对齐友链 ping
   ≤600 绿 / ≤2000 黄 / >2000 红 / 失败灰
   ========================================================================== */
.net-badge .net-dot {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.net-badge.net-green .net-dot {
    background-color: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.85);
}
.net-badge.net-green .net-value { color: #34d399; }

.net-badge.net-yellow .net-dot {
    background-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.85);
}
.net-badge.net-yellow .net-value { color: #fbbf24; }

.net-badge.net-red .net-dot {
    background-color: #f87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.85);
}
.net-badge.net-red .net-value { color: #f87171; }

.net-badge.net-pending .net-dot {
    background-color: #f472b6;
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.6);
}
.net-badge.net-pending .net-value { color: #f472b6; }

.net-badge.net-gray .net-dot { background-color: #6b7280; }
.net-badge.net-gray .net-value { color: #9ca3af; }

/* 木鱼敲击与动效 */
@keyframes muyuKnockBounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.85) rotate(-3deg);
    }

    60% {
        transform: scale(1.06) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.muyu-knock {
    animation: muyuKnockBounce 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes floatUpFadeOut {
    0% {
        opacity: 0;
        transform: translate(-50%, 12px) scale(0.35);
        filter: blur(3px);
    }

    18% {
        opacity: 1;
        transform: translate(-50%, -2px) scale(1.1);
        filter: blur(0px);
        text-shadow: 0 0 16px rgba(244, 114, 182, 0.95);
    }

    60% {
        opacity: 0.95;
        transform: translate(-50%, -30px) scale(1.0);
        filter: blur(0px);
        text-shadow: 0 0 8px rgba(244, 114, 182, 0.6);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -58px) scale(0.9);
        filter: blur(3px);
    }
}

.muyu-float-text {
    font-family: 'english', 'chinese', sans-serif;
    position: absolute;
    font-size: 0.88rem;
    white-space: nowrap;
    animation: floatUpFadeOut 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 40;
}

/* 🌟 1. 消除点赞抖动：改为纯净平滑缩放 */
.like-pop {
    animation: likeScaleBounce 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes likeScaleBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}
/* 唱片旋转与频谱 */
@keyframes spin-vinyl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.vinyl-disc-rotating {
    animation: spin-vinyl 14s linear infinite;
    animation-play-state: running;
}

.vinyl-disc-rotating.paused {
    animation-play-state: paused !important;
}

@keyframes dot-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.4;
    }
}

.status-dot-ping {
    animation: dot-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-play-state: running;
}

.status-dot-ping.paused {
    animation-play-state: paused !important;
    opacity: 0.6;
}

.equalizer-bar {
    animation: equalize 1.2s ease-in-out infinite alternate;
}

.equalizer-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.equalizer-bar:nth-child(3) {
    animation-delay: 0.4s;
}

.equalizer-bar:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes equalize {
    0% {
        height: 3px;
    }

    100% {
        height: 14px;
    }
}

/* 🌟 [找回 1] 全站组件交错逐行浮入动画 */
@keyframes mistyFloatIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

/* 首页内容区未揭开前：壳层 + 文章卡隐身（滚入后由 JS 播 sakura-float-up） */
#home-scroll-content.opacity-0 .article-card,
#home-scroll-content.opacity-0 #component-music-player,
#home-scroll-content.opacity-0 #component-gear-setup,
#home-scroll-content.opacity-0 #articles-filter-header {
    opacity: 0;
    animation: none !important;
}

.article-card-anim {
    animation: mistyFloatIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* 🌟 [找回 2] 文章详情页头部与正文逐行入场动画 */
.float-in-meta {
    animation: mistyFloatIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.float-in-title {
    animation: mistyFloatIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
}

.float-in-subtitle {
    animation: mistyFloatIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.float-in-content {
    animation: mistyFloatIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s backwards;
}

.float-in-footer {
    animation: mistyFloatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.36s backwards;
}

/* 🌟 全站流水：升起 + 去模糊（字面量，插入即播） */
@keyframes floatUpSlideIn {
    0% {
        opacity: 0;
        transform: translateY(36px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 进场结束后由 main.js animationend 卸掉本 class，避免 fill:both 留下常驻层 */
.sakura-float-up {
    animation: floatUpSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity, filter;
}

/* 横移期间停在流水 0%，滑完再挂 sakura-float-up，避免先露定稿再闪灭 */
.is-float-armed {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(4px);
    animation: none !important;
}

.article-view-enter {
    animation: articleContainerFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. 修复动画结束后的 containing block 限制 */
@keyframes articleContainerFade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: none;
        /* 👈 设为 none，解除包含块对 sticky 的影响 */
    }
}
/* Markdown 排版 */
.markdown-body {
    font-family: 'english', 'chinese', sans-serif;
    word-break: break-word;
    overflow-wrap: break-word;
}

.markdown-body p {
    font-family: 'english', 'chinese', sans-serif;
    line-height: 1.85;
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
}

.markdown-body strong {
    font-family: 'english', 'chinese', sans-serif;
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-body em {
    color: var(--pink-accent);
    font-family: 'english', 'chinese', sans-serif;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: var(--text-primary);
    font-family: 'english', 'chinese', sans-serif;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    scroll-margin-top: 100px;
}

.markdown-body h2 {
    font-size: 1.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4rem;
    color: var(--pink-accent);
}

.markdown-body h4 {
    font-size: 1.15rem;
}

.markdown-body h5,
.markdown-body h6 {
    font-size: 1rem;
    color: var(--text-secondary);
}

.markdown-body blockquote {
    margin: 1rem 0;
    padding: 0.65rem 1rem;
    border-left: 3px solid var(--pink-accent);
    background: rgba(244, 114, 182, 0.06);
    border-radius: 0 12px 12px 0;
}

.markdown-body blockquote p {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.875rem;
    line-height: 1.7;
    font-style: normal;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.markdown-body blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-body pre {
    background: rgba(13, 13, 18, 0.40) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(244, 114, 182, 0.25) !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    overflow-x: auto;
}

.markdown-body pre code {
    background: transparent !important;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
}

.markdown-body :not(pre)>code {
    background: rgba(244, 114, 182, 0.06) !important;
    color: var(--pink-accent, #f472b6) !important;
    border: 1px solid rgba(244, 114, 182, 0.25) !important;
    padding: 0.1rem 0.3rem !important;
    border-radius: 6px !important;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.85em;
}
.markdown-body a {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #f472b6;
    /* 可选：粉色，和站点风格一致 */
}

.markdown-body a:hover {
    opacity: 0.85;
}

/* GFM 表格：Tailwind Preflight 会清掉边框，必须显式补回，否则像「没渲染」 */
.markdown-body .md-table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(19, 19, 23, 0.35);
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--text-secondary);
}

.markdown-body thead th {
    background: rgba(244, 114, 182, 0.08);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.markdown-body th,
.markdown-body td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.markdown-body tbody tr:last-child th,
.markdown-body tbody tr:last-child td {
    border-bottom: none;
}

.markdown-body tbody tr:hover td {
    background: rgba(244, 114, 182, 0.04);
}

.markdown-body th[align="center"],
.markdown-body td[align="center"] {
    text-align: center;
}

.markdown-body th[align="right"],
.markdown-body td[align="right"] {
    text-align: right;
}

.markdown-body ul,
.markdown-body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.85;
}

.markdown-body li {
    margin-bottom: 0.35rem;
}

.markdown-body li > ul,
.markdown-body li > ol {
    margin: 0.35rem 0 0.5rem;
}

.markdown-body li input[type="checkbox"] {
    margin-right: 0.45rem;
    vertical-align: middle;
    accent-color: var(--pink-accent);
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1rem 0;
}

.markdown-body del {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* 极光与背景网格 */
@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.cyber-grid-overlay {
    background-image:
        linear-gradient(to right, rgba(244, 114, 182, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244, 114, 182, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
}

@keyframes ambient-float {

    0%,
    100% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -40px) scale(1.1);
    }

    66% {
        transform: translate(-25px, 20px) scale(0.95);
    }
}

.ambient-orb-1,
.ambient-orb-2 {
    overflow: visible;
}

.ambient-orb-1 {
    animation: ambient-float 18s ease-in-out infinite;
}

.ambient-orb-2 {
    animation: ambient-float 22s ease-in-out infinite reverse;
}

/* 预烘精灵：比宿主大一圈（含原 CSS blur 外溢），随宿主缩放 */
.ambient-orb-sprite {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.muyu-pure-img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    clip-path: inset(2px);
    -webkit-clip-path: inset(2px);
}

@keyframes tocItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sakura-item-anim,
.toc-item-anim {
    font-family: 'english', 'chinese', sans-serif;
    animation: tocItemIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.archive-item-anim {
    font-family: 'english', 'chinese', sans-serif;
}

#about-bio,
#bio-text {
    font-family: 'english', 'chinese', sans-serif !important;
    letter-spacing: var(--en-letter-spacing);
    line-height: 1.7;
}

.typewriter-cursor {
    display: inline-block;
    color: var(--pink-accent);
    font-weight: 300;
    margin-left: 3px;
    animation: cursorBlink 1.2s ease-in-out infinite;
}

/* 🌟 打字机逐字马卡龙色：清掉父级 .hero-text-shadow 继承下来的黑色阴影 */
#bio-text {
    text-shadow: none;
}

/* 🌟 顶部阅读进度条：六色马卡龙（与流光轨同色谱），2px 细条 + 轻光晕。
   background-size: 100vw 让色带按视口铺开，随 width 推进逐渐露出后半色谱。 */
#reading-progress-bar {
    height: 2px;
    background-image: linear-gradient(
        to right,
        var(--macaron-pink),
        var(--macaron-cyan),
        var(--macaron-purple),
        var(--macaron-peach),
        var(--macaron-mint),
        var(--macaron-sky)
    );
    background-size: 100vw 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.45),
                0 0 14px rgba(var(--macaron-cyan-rgb), 0.28);
    pointer-events: none;
}

/* 🌟 加载进度条（首访 #page-loader + 文章正文占位）：短条在轨道里左右往返
   （indeterminate——无法获知真实完成时刻，不做 0→100% 假进度） */
.loader-progress-track {
    height: 6px; /* 与文章正文占位同粗细 */
}

.loader-progress-fill {
    width: 50%;
    left: 0;
    background: linear-gradient(90deg,
        var(--macaron-pink), var(--macaron-cyan), var(--macaron-purple),
        var(--macaron-peach), var(--macaron-mint), var(--macaron-sky));
    box-shadow: 0 0 14px rgba(var(--macaron-pink-rgb), 0.55);
    animation: loaderProgressBounce 1.35s ease-in-out infinite alternate;
    will-change: left;
}

@keyframes loaderProgressBounce {
    from { left: 0%; }
    to { left: 50%; } /* 100% − 50% 条宽 */
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@media (max-width: 1279px) {
    #article-toc-panel {
        display: none !important;
    }
}

@media (min-width: 1280px) {

    #mobile-toc-toggle-btn,
    #mobile-toc-drawer-wrapper {
        display: none !important;
    }
}

/* 🌟 [找回 3] 音乐播放器进度条 Firefox 兼容滑块与悬停动效 */
#player-seek {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 9999px;
    background: rgba(244, 114, 182, 0.15);
    outline: none;
    cursor: pointer;
}

#player-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pink-accent, #f472b6);
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.9);
    cursor: pointer;
    transition: transform 0.15s ease;
}

#player-seek:hover::-webkit-slider-thumb {
    transform: scale(1.25);
}

#player-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pink-accent, #f472b6);
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.9);
    cursor: pointer;
}

#bg-carousel-container {
    /* 壁纸图未就绪时仍是暗底，避免透明 html 透出 UA 白屏；图层/压暗叠在这上面 */
    background-color: var(--bg-primary);
}

.bg-carousel-layer {
    position: absolute;
    /* 余量改用视口百分比：为静息缩放 0.97 + 漂移（见下方 canvas 动画）留边，
       fixed 定位下百分比按视口解析，4K / 手机竖屏自适应，无需 media query。
       注意：.bg-carousel-layer 的 transform 由 JS 逐帧驱动（滚动缩放 1.3→0.97），
       漂移动画必须挂在内层 canvas 上，否则会覆盖 JS 的 inline transform。 */
    inset: -5%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* 默认透明，避免 JS 设 0 时从 1 触发反向过渡 */
    filter: blur(0px);
    -webkit-filter: blur(0px);
    transform-origin: center center;
    transform: scale(1);
    transition: opacity 3s cubic-bezier(0.4, 0, 0.2, 1),
                transform var(--bg-zoom-duration) var(--bg-zoom-timing),
                filter 0.1s ease-out;
}

/* 🌟 首页打字机态背景放大统一由 JS 内联驱动（单一真源），此处不再保留 CSS 缩放规则 */

.bg-carousel-layer > canvas.bg-paint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   背景"微微动"呼吸漂移（挂在内层 canvas，与 .bg-carousel-layer 的滚动缩放复合）
   强度档位：明显可感（位移 ±1.6vw / ±1.2vh 量级，肉眼可辨缓慢游移，仍不夸张）
   安全约束：(V + 2X)·s ≥ V + 2A
     V=视口边长  X=inset 绝对值(5% 视口)  s=图层静息缩放(0.97)·canvas 最小缩放
     canvas scale 1.02→1.04，故最坏覆盖比例 = 1.1 × 0.97 × 1.02 = 1.0883
     可用余量 = V·(1.0883 − 1)/2 ≈ 4.42%·V；最大位移 1.6%·V → 约 2.76 倍裕度
     （1920×1080 时约 31px 位移 vs 85px 余量）。
   位移一律用 vw/vh 表达（按轴等比），320px 窄屏 ~ 4K 均成立。
   仅用 transform，不触发 layout / paint，核显友好。
   ⚠️ 本动画刻意不随 prefers-reduced-motion 关闭（产品要求壁纸始终"活着"），
      故文件末尾的 reduce 媒体查询已不再覆盖 canvas.bg-paint。
   -------------------------------------------------------------------------- */
@keyframes bgDriftA {
    0% {
        transform: translate3d(-1.6vw, -1.2vh, 0) scale(1.02);
    }
    50% {
        transform: translate3d(1.5vw, 1.05vh, 0) scale(1.04);
    }
    100% {
        transform: translate3d(-1.6vw, -1.2vh, 0) scale(1.02);
    }
}

@keyframes bgDriftB {
    0% {
        transform: translate3d(1.5vw, 1vh, 0) scale(1.04);
    }
    50% {
        transform: translate3d(-1.55vw, -1.15vh, 0) scale(1.022);
    }
    100% {
        transform: translate3d(1.5vw, 1vh, 0) scale(1.04);
    }
}

/* 两层错峰（40s / 48s），避免同步漂移的机械感 */
#bg-layer-1 > canvas.bg-paint {
    animation: bgDriftA 40s ease-in-out infinite;
}

#bg-layer-2 > canvas.bg-paint {
    animation: bgDriftB 48s ease-in-out infinite;
}

#component-music-player,
#component-gear-setup {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

#component-music-player:hover,
#component-gear-setup:hover {
    transform: translateY(-3px) scale(1.012);
    border-color: var(--pink-accent) !important;
    box-shadow: 0 16px 40px -8px rgba(244, 114, 182, 0.3) !important;
}

.hero-text-shadow {
    font-family: 'english', 'chinese', sans-serif;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.75) !important;
}

.hero-pill {
    font-family: 'english', 'chinese', sans-serif;
    background: rgba(13, 13, 17, 0.60) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(244, 114, 182, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.hero-pill:hover {
    background: rgba(244, 114, 182, 0.20) !important;
    border-color: var(--pink-accent) !important;
    box-shadow: 0 0 16px var(--pink-glow) !important;
    transform: translateY(-2px);
}

#muyu-widget>div {
    background: rgba(13, 13, 17, 0.2) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(244, 114, 182, 0.35) !important;
}

#muyu-widget>div:hover {
    background: rgba(244, 114, 182, 0.18) !important;
    border-color: var(--pink-accent) !important;
    box-shadow: 0 0 20px rgba(244, 114, 182, 0.3) !important;
}

#nav-home-btn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.45));
}

/* 🌟 [找回 4] 搜索按钮悬停微光与图标旋转动效 */
#search-toggle-btn {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease,
        background-color 0.3s ease !important;
}

#search-toggle-btn:hover {
    transform: scale(1.12);
    border-color: var(--pink-accent) !important;
    background: rgba(244, 114, 182, 0.15) !important;
    box-shadow: 0 0 18px var(--pink-glow) !important;
}

#search-toggle-btn svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.25s ease;
}

#search-toggle-btn:hover svg {
    transform: rotate(-15deg) scale(1.15);
    stroke: var(--pink-accent);
}

/* 🌟 [找回 5] 邮箱悬浮气泡 */
.email-tooltip-bubble {
    font-family: 'english', 'chinese', sans-serif;
    background: rgba(19, 19, 23, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(244, 114, 182, 0.45);
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.6), 0 0 16px rgba(244, 114, 182, 0.25);
}

.group\/email:hover .email-tooltip-bubble,
.group\/email:focus-within .email-tooltip-bubble,
.email-tooltip-bubble.active {
    opacity: 1 !important;
    transform: translate(-50%, -4px) !important;
    pointer-events: auto !important;
}

/* 壳层 / 卡片流水一律由 playStagger 触发，禁止在 *-view-enter 下写死子级 float */

#about-profile-card {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

#about-content {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

@media (min-width: 768px) {
    #about-profile-card,
    #about-content {
        height: 100% !important;
    }
}

.about-avatar-glow {
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.45) 0%, transparent 70%);
    border-radius: 1.25rem;
    filter: blur(10px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-avatar-box {
    position: relative;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 3px solid rgba(244, 114, 182, 0.6);
    background: rgba(244, 114, 182, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 1;
    /* 悬停放大刻意偏慢（0.6s），与导航品牌区 duration-700 同量级 */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease, box-shadow 0.6s ease;
}

.about-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-avatar-box:hover {
    transform: scale(1.10) !important;
    border-color: var(--pink-accent, #f472b6) !important;
    box-shadow: 0 12px 32px rgba(244, 114, 182, 0.5) !important;
}

/* 🌟 [找回 6] 个人页头像悬停时光晕联动扩散
   glow 在 box 之前，~ 选不中；用父级 :has 联动（与 box/img 同 0.6s） */
.relative:has(> .about-avatar-box:hover) > .about-avatar-glow,
.about-avatar-box:hover .about-avatar-img {
    transform: scale(1.05);
}



/* 友链板块布局（全部伙伴在上、合并卡在下） */
#friends-list-section {
    margin-bottom: 4.0rem !important;
}

#friends-form-card {
    margin-bottom: 4.0rem !important;
    position: relative;
}

/* 🌟 合并卡顶部马卡龙流光：与 .article-card::before 同配方（3px + 羽化六色 + 光晕）。
   默认缩在水平中点；每次进入友链页、卡片可见且壳层浮入落定后加 .is-rail-on，
   从中心向两侧展开。时长/缓动复用 --article-rail-in。
   .is-rail-reset：二次进入时瞬间收回，避免先播收缩再展开。 */
#friends-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    border-radius: 999px;
    background: var(--macaron-rail-glow-x);
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.45),
                0 0 14px rgba(var(--macaron-cyan-rgb), 0.28);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: transform var(--article-rail-out) cubic-bezier(0.22, 0.6, 0.28, 1),
                opacity 0.28s ease;
}

#friends-form-card.is-rail-reset::before {
    transition: none;
    transform: scaleX(0);
    opacity: 0;
}

#friends-form-card.is-rail-on::before {
    transform: scaleX(1);
    opacity: 1;
    transition-duration: var(--article-rail-in), 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease;
    transition-delay: 0.8s, 0.8s; /* 动画前多等 400ms */
}

/* 🌟 合并卡内子卡：与 #friend-my-config-card 同源浅粉底 + 细边，形成两级分区 */
.friends-subcard {
    background: rgba(244, 114, 182, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.25rem;
}

/* 🌟 表单字段标签：复用分类马卡龙色谱 .tag-pastel-*，做成小徽章 */
.friend-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.15rem 0.6rem !important;
    border-radius: 0.45rem !important;
    font-family: 'english', 'chinese', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: var(--en-letter-spacing) !important;
    line-height: 1.5 !important;
    width: fit-content !important;
}

#friends-list-header {
    margin-bottom: 1.75rem !important;
}

/* ⚠️ 必须排除共用验证码的小输入框：它的 .friend-note-captcha-a 特异性低于本条，
   不排除会被撑成 width:100% / height（2026-09-16 表单合并时的坑） */
#friends-form-card {
    --friend-field-h: 2.35rem;
}

#friends-form-card input[type="text"]:not(.friend-note-captcha-a),
#friends-form-card input[type="url"] {
    display: block !important;
    width: 100% !important;
    height: var(--friend-field-h) !important;
    padding: 0.35rem 0.85rem !important;
    font-family: 'english', 'chinese', sans-serif !important;
    font-size: 0.8125rem !important;
    border-radius: 0.7rem !important;
    box-sizing: border-box !important;
    /* 空态 / 聚焦 / 已填 / autofill 同一底，勿再加深 */
    background-color: rgba(244, 114, 182, 0.05) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: border-color 0.25s ease, box-shadow 0.25s ease,
                color 5000s ease-in-out 0s, -webkit-text-fill-color 5000s ease-in-out 0s !important;
}

#friends-form-card input[type="text"]:not(.friend-note-captcha-a):focus,
#friends-form-card input[type="url"]:focus {
    background-color: rgba(244, 114, 182, 0.05) !important;
}

/* 浏览器 autofill 默认白/黄底会盖掉玻璃主题；内阴影色对齐空态粉底，避免填完变深/变白 */
#friends-form-card input[type="text"]:not(.friend-note-captcha-a):-webkit-autofill,
#friends-form-card input[type="text"]:not(.friend-note-captcha-a):-webkit-autofill:hover,
#friends-form-card input[type="text"]:not(.friend-note-captcha-a):-webkit-autofill:focus,
#friends-form-card input[type="url"]:-webkit-autofill,
#friends-form-card input[type="url"]:-webkit-autofill:hover,
#friends-form-card input[type="url"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    /* 与空态 rgba(244,114,182,0.05) 叠在玻璃上的观感接近，勿用更深的 #17131a */
    box-shadow: 0 0 0 1000px #1a1519 inset !important;
    border-color: var(--border-color) !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
}

.friend-url-tip {
    margin: 0;
}

/* 友链 URL 通栏；提示单独一行，验证码+提交再下一行 */
.friend-apply-url-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.friend-apply-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    height: var(--friend-field-h, 2.35rem);
    flex-shrink: 0;
}

.friend-apply-captcha-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    height: var(--friend-field-h, 2.35rem);
    flex: 0 0 auto;
}

.friend-captcha-label {
    flex-shrink: 0;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
}

#friend-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: var(--friend-field-h, 2.35rem) !important;
    padding: 0 0.9rem !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0.7rem !important;
    line-height: 1 !important;
}

/* 宽屏：验证码+提交单独一行、成组靠右（不与 tip 同行） */
@media (min-width: 768px) {
    .friend-apply-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

/* 窄屏布局保持现状：提示在上；验证码行 / 提交各自独占一行 */
@media (max-width: 767px) {
    .friend-apply-actions {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0.55rem;
    }

    .friend-apply-captcha-row {
        width: 100%;
    }

    #friends-form-card .friend-apply-captcha-row .friend-note-captcha {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    #friend-submit-btn {
        width: 100% !important;
    }
}

#friend-copy-config-btn {
    position: absolute !important;
    top: 1.0rem !important;
    right: 1.0rem !important;
    display: inline-flex !important;
    width: auto !important;
    flex-shrink: 0 !important;
}


.friend-card {
    font-family: 'english', 'chinese', sans-serif;
    width: 100% !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

.friend-card:hover {
    border-color: var(--pink-accent) !important;
    box-shadow: 0 12px 32px -6px rgba(244, 114, 182, 0.28) !important;
}

.friend-card--offline:hover {
    border-color: rgba(107, 114, 128, 0.45) !important;
    box-shadow: none !important;
}

.friend-avatar-box {
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-width: 3.25rem !important;
    margin-right: 1.25rem !important;
    flex-shrink: 0 !important;
    border-radius: 0.85rem !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.friend-card:hover .friend-avatar-box {
    transform: scale(1.10) rotate(4deg);
    border-color: var(--pink-accent) !important;
    box-shadow: 0 0 14px var(--pink-glow);
}

.friend-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.friend-descr {
    margin-top: 0.85rem !important;
    line-height: 1.6 !important;
    font-size: 0.78rem !important;
}

.friend-bottom-bar {
    margin-top: 0.65rem !important;
    padding-top: 0.55rem !important;
    border-top: 1px solid rgba(244, 114, 182, 0.22) !important;
}

/* ==========================================================================
   🌸 友链列表网格
   ========================================================================== */
.friends-grid-stack {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   🌸 友链待审队列 · 脚印墙（嵌在 #friends-form-card 同底玻璃底部）
   ========================================================================== */
.friend-notes-panel {
    margin-top: 0.25rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(244, 114, 182, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.friend-notes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.friend-notes-head-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.friend-notes-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    flex: none;
    border-radius: 0.72rem;
    font-size: 0.92rem;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.24), rgba(244, 114, 182, 0.06));
    border: 1px solid rgba(244, 114, 182, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.friend-notes-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.friend-notes-title {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: var(--en-letter-spacing);
    color: #f9a8d4;
    white-space: nowrap;
}

.friend-notes-sub {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.58rem;
    letter-spacing: var(--en-letter-spacing);
    color: var(--text-muted);
    opacity: 0.8;
    white-space: nowrap;
}

.friend-notes-counter {
    flex: none;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.68rem;
    color: var(--text-secondary);
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(244, 114, 182, 0.05);
    white-space: nowrap;
}

.friend-notes-counter-num {
    color: #f9a8d4;
    font-weight: 700;
}

.friend-notes-feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
}

.friend-notes-empty {
    grid-column: 1 / -1;
    padding: 1.4rem 0.8rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-radius: 1rem;
    border: 1px dashed rgba(244, 114, 182, 0.22);
    background: rgba(244, 114, 182, 0.03);
}

.friend-note-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    color: inherit;
    min-height: 3rem;
    min-width: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.16), rgba(244, 114, 182, 0.05));
    border: 1px solid rgba(244, 114, 182, 0.26);
    box-sizing: border-box;
    transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.friend-note-row:hover {
    border-color: rgba(244, 114, 182, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -14px rgba(244, 114, 182, 0.6);
}

.friend-note-row.is-processed {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(244, 114, 182, 0.02));
    border-color: rgba(244, 114, 182, 0.16);
    opacity: 0.82;
}

.friend-note-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.72rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(244, 114, 182, 0.36);
    padding: 0.12rem;
    background: rgba(13, 13, 14, 0.5);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.06);
}

.friend-note-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

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

.friend-note-name {
    font-size: 0.875rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-note-meta {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.7rem;
    margin-top: 0.08rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-note-host {
    color: rgba(249, 168, 212, 0.85);
}

.friend-note-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--en-letter-spacing);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.friend-note-status::before {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: currentColor;
}

.friend-note-status.is-pending {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.34);
}

.friend-note-status.is-done {
    color: #f9a8d4;
    background: rgba(244, 114, 182, 0.14);
    border-color: rgba(244, 114, 182, 0.38);
}

/* 🌟 2026-09-16 表单合并：原「古法申请」输入条（.friend-note-composer /
   .friend-note-field / .friend-note-key / .friend-note-commit）已删除，
   字段统一改用 #friend-input-*，发送按钮并入 #friends-form-card 底部。 */

/* 合并卡里的共用验证码：与字段输入同高的小胶囊 */
#friends-form-card .friend-note-captcha {
    height: var(--friend-field-h, 2.35rem);
    padding: 0 0.75rem;
    border: 1px solid rgb(244 114 182 / 0.3);
    border-radius: 0.7rem;
    background: rgba(244, 114, 182, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#friends-form-card .friend-note-captcha:focus-within {
    border-color: rgba(244, 114, 182, 0.5);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.08);
}

.friend-note-captcha {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.friend-note-captcha-q {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f9a8d4;
    white-space: nowrap;
    line-height: 1;
}

.friend-note-captcha-eq {
    font-family: 'english', 'chinese', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1;
}

.friend-note-captcha-a {
    width: 2.4rem !important;
    height: 1.35rem !important;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-bottom: 1px solid rgba(244, 114, 182, 0.55) !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.35rem;
    color: inherit;
    outline: none;
}

.friend-note-captcha-a:focus {
    border-bottom-color: #f472b6 !important;
}

.friend-note-captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #f9a8d4;
    cursor: pointer;
    border-radius: 0.4rem;
}

.friend-note-captcha-refresh:hover {
    color: #fff;
    background: rgba(244, 114, 182, 0.18);
}

.friend-note-captcha-refresh svg {
    display: block;
}

@media (max-width: 639px) {
    .friend-notes-feed {
        grid-template-columns: minmax(0, 1fr);
    }

    .friend-notes-head {
        align-items: flex-start;
    }

    .friend-notes-title {
        white-space: normal;
    }
}

/* ==========================================================================
   🌸 评论 / 留言：铺在底玻璃上，碎碎念同款行分隔，不另套卡片
   ========================================================================== */
.comment-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.comment-card {
    position: relative;
    padding: 1.35rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.comment-card + .comment-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgb(244 114 182 / 0.4);
    pointer-events: none;
}

/* ==========================================================================
   🌸 碎碎念 / 统一大容器 + 条目分隔
   ========================================================================== */
#thoughts-list-header {
    padding: 1.1rem var(--thought-pad-x, 1.25rem) 1rem;
    position: relative;
    z-index: 3;
}

.thoughts-body {
    position: relative;
}

/* 外壳挂 .glass-card：底色 / blur 跟全站玻璃卡走，不再单独加深或加 blur(16px) */
.thoughts-panel {
    --thought-rail-x: 1.75rem;
    --thought-pad-x: 1rem;
    --thought-pad-left: 4.75rem;
    overflow: hidden !important;
}

@media (min-width: 640px) {
    .thoughts-panel {
        --thought-rail-x: 2rem;
        --thought-pad-x: 1.25rem;
        --thought-pad-left: 5.125rem;
    }
}

#thoughts-feed,
.thoughts-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 条目：透明底铺在 #thoughts-panel 玻璃上，粉线分行，对齐 .comment-card */
.thought-card {
    position: relative !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.65rem var(--thought-pad-x) 1.75rem var(--thought-pad-left) !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
    transform: none !important;
}

/* 行间分隔：与评论区 border-t border-theme/40 同色；左缘缩到正文区，不侵入火箭轨 */
.thought-card + .thought-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--thought-pad-left) !important;
    right: var(--thought-pad-x) !important;
    height: 1px !important;
    background: rgb(244 114 182 / 0.4) !important;
    pointer-events: none !important;
}

.thought-card:focus,
.thought-card:focus-within {
    outline: none !important;
}

.thought-card:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 当前条：底色与其它条目一致，不做左侧粉线 / 不高亮 */
.thought-card.is-tm-active {
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   🌸 灯箱模态框 (Lightbox Modal) 丝滑现代美学
   ========================================================================== */
#thought-lightbox-modal {
    background: rgba(10, 10, 14, 0.88) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: zoom-out !important;
}

#thought-lightbox-img {
    cursor: zoom-out !important;
    border: 1px solid rgba(244, 114, 182, 0.35) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(244, 114, 182, 0.25) !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 640px) {
    .thought-card {
        padding: 1.25rem var(--thought-pad-x) 1.25rem var(--thought-pad-left) !important;
        border-radius: 0 !important;
    }
}

.thought-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.thought-avatar-box {
    width: 2.85rem !important;
    height: 2.85rem !important;
    min-width: 2.85rem !important;
    min-height: 2.85rem !important;
    border-radius: 0.95rem !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(244, 114, 182, 0.5) !important;
    background: rgba(244, 114, 182, 0.12) !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.25) !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.thought-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
    display: block !important;
}

.thought-divider {
    height: 1px !important;
    width: 100% !important;
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.35) 0%, rgba(244, 114, 182, 0.08) 70%, transparent 100%) !important;
    margin-top: 1.15rem !important;
    margin-bottom: 1.25rem !important;
    border: none !important;
}

.thought-divider-subtle {
    height: 1px !important;
    width: 100% !important;
    background: rgba(244, 114, 182, 0.12) !important;
    margin-top: 1.15rem !important;
    margin-bottom: 1.0rem !important;
    border: none !important;
}

.thought-body {
    font-family: 'english', 'chinese', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.85 !important;
    color: rgba(244, 244, 246, 0.92) !important;
    letter-spacing: var(--en-letter-spacing) !important;
    word-break: break-word !important;
    margin-top: 0.85rem !important;
}

.thought-media-grid {
    width: 100% !important;
    margin-top: 1.15rem !important;
    margin-bottom: 1.15rem !important;
}

.thought-grid-1 {
    display: block !important;
    max-width: 440px !important;
}

.thought-grid-1 .thought-img-box {
    width: 100% !important;
    max-height: 280px !important;
    height: 240px !important;
    border-radius: 1rem !important;
}

.thought-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    max-width: 480px !important;
}

.thought-grid-2 .thought-img-box {
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    height: 160px !important;
    border-radius: 0.85rem !important;
}

.thought-grid-3,
.thought-grid-more {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    max-width: 540px !important;
}

.thought-grid-3 .thought-img-box,
.thought-grid-more .thought-img-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: 135px !important;
    border-radius: 0.75rem !important;
}

.thought-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    max-width: 440px !important;
}

.thought-grid-4 .thought-img-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: 150px !important;
    border-radius: 0.85rem !important;
}

.thought-img-box {
    position: relative !important;
    overflow: hidden !important;
    background: rgba(244, 114, 182, 0.06) !important;
    border: 1px solid rgba(244, 114, 182, 0.22) !important;
    cursor: zoom-in !important;
    box-sizing: border-box !important;
}

/* 🌟 3. 配图悬停放大：平滑慢速 0.85s 缓动 */
.thought-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.35s ease !important;
}

.thought-img-box img.is-seq-loaded {
    opacity: 1;
}

.thought-img-box:hover img {
    transform: scale(1.05) !important;
    will-change: transform;
}
.thought-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0.85rem !important;
    width: 100% !important;
}

.thought-liked-bar {
    margin-top: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.45rem 0.75rem !important;
    background: rgba(244, 114, 182, 0.07) !important;
    border-radius: 0.75rem !important;
    border-left: 3px solid var(--pink-accent, #f472b6) !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* 🌟 4. 友链本站信息卡片边框：与留言板/评论编辑框完全一致 */
.friend-config-hint {
    margin: 0 0 -0.35rem;
}

#friend-my-config-card {
    border: 1px solid var(--border-color) !important;
    background: rgba(244, 114, 182, 0.05) !important;
}

#friend-my-config-grid .friend-config-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

#friend-my-config-grid .friend-config-item:hover {
    border-color: rgba(244, 114, 182, 0.35);
    background: rgba(244, 114, 182, 0.08);
    color: var(--text-primary);
}

/* 1. 横向溢出由 #page-scroll overflow-x:clip 承担（html/body 已 overflow:hidden） */

/* 3. 强化 PC 端文章右侧目录粘性吸顶 */
#article-toc-panel {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 6rem !important;
    align-self: flex-start !important;
    z-index: 30;
}

/* ==========================================================================
   🌟 全局视图雾入：仅 opacity，禁止 transform/filter 残留（否则吃掉子级流水）
   ========================================================================== */
@keyframes sakuraViewFog {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modernViewEnter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 整页壳层雾入：只用透明度，禁止 transform/filter（否则吃掉子级流水） */
.animate-fadeIn,
.home-view-enter,
.sakura-view-enter {
    animation: sakuraViewFog var(--nav-view-fog-duration) var(--nav-view-fog-ease) both;
}

/* 文章容器单独轻量淡入（保持 sticky 友好，不用 transform） */
.article-view-enter {
    animation: sakuraViewFog var(--nav-view-fog-duration) var(--nav-view-fog-ease) both !important;
}

/* 联网门控：未就绪内容不占布局，避免空列表时底部组件顶到视口再被推下去 */
.is-view-gated {
    display: none !important;
}

/* ⚠️ 绝对删除了导致目录丢失的 .hidden 强行覆盖代码 */

/* ==========================================================================
   🌸 UI 抛光：导航收纳 / 骨架屏 / 触感 / 呼吸箭头 / 减动效
   ========================================================================== */

/* 顶栏滚动后强化玻璃 */
#site-header.is-scrolled {
    background: rgba(13, 13, 14, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-color: rgba(244, 114, 182, 0.32) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(244, 114, 182, 0.08) !important;
}

/* 小屏：导航收入右上角下拉面板 */
@media (max-width: 1023px) {
    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% + 0.55rem);
        right: 0.75rem;
        left: auto;
        width: min(17.5rem, calc(100vw - 1.5rem));
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem !important;
        flex-wrap: nowrap;
        padding: 0.65rem;
        border-radius: 1.1rem;
        background: rgba(19, 19, 23, 0.92);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border: 1px solid rgba(244, 114, 182, 0.28);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(244, 114, 182, 0.1);
        z-index: 70;
    }

    .site-nav.is-open {
        display: flex;
        animation: modernViewEnter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .site-nav .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.55rem 0.85rem;
    }
}

/* 焦点环：键盘可见，鼠标点击不抢戏 */
:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.22) !important;
    border-color: rgba(244, 114, 182, 0.55) !important;
}

input:focus-visible,
textarea:focus-visible {
    border-color: rgba(244, 114, 182, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.18) !important;
}

/* 按钮触感微调（与现有 btn-icon:active 一致方向） */
.btn-icon:active,
.nav-link:active {
    transform: scale(0.97) !important;
}

/* EXPLORE 箭头呼吸浮动 */
@keyframes sakuraBreatheY {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 7px); }
}

.sakura-breathe-arrow {
    animation: sakuraBreatheY 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sakura-breathe-arrow:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    /* 仅关闭循环装饰；进场流水 / 雾入保留（否则全站 sakura-float-up 会被 animation:none 杀掉）
       ⚠️ 背景呼吸漂移（canvas.bg-paint）刻意不在列内：产品要求壁纸始终"活着"，
          本媒体查询不再覆盖它（如需恢复无障碍，把 .bg-carousel-layer > canvas.bg-paint
          加回下面选择器列表即可）。 */
    .sakura-breathe-arrow,
    .animate-spin-slow,
    .ambient-orb-1,
    .ambient-orb-2 {
        animation: none !important;
    }

    /* 背景渐显时长由上方 .bg-carousel-layer 的 transition 控制，此处不再强制 0.2s */
}

/* ==========================================================================
   🌸 碎碎念 · 左侧火箭时光轴 (随滚动连续移动 + 归档式跟随流光)
   ========================================================================== */
.thought-rocket-rail {
    position: absolute;
    left: var(--thought-rail-x);
    top: 1rem;
    bottom: 1rem;
    width: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    /* 静轨保持淡粉，不铺马卡龙；六色只出现在移动中的拖尾 */
    background: rgba(244, 114, 182, 0.14);
    box-shadow: inset 0 0 10px rgba(244, 114, 182, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* 火箭拖尾：外壳高度固定 max，可见长度 --trail-len 走 fill 的 scaleY。
   展开/收缩仍是外壳 scaleY；羽化 mask 在 fill 上。 */
.thought-rail-glow {
    position: absolute;
    left: var(--thought-rail-x);
    top: 0;
    width: 5px;
    height: var(--thought-trail-max);
    margin-top: 0;
    transform: translateX(-50%) scaleY(0);
    transform-origin: center bottom;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: transform var(--thought-trail-out) cubic-bezier(0.22, 0.6, 0.28, 1);
    z-index: 2;
    --trail-len: 1;
}

.thought-rail-glow-fill {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--macaron-rail-glow-core);
    transform: scaleY(var(--trail-len, 1));
    transform-origin: inherit;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.thought-rail-glow.is-show {
    opacity: 1;
}

.thought-rail-glow.is-trail-above {
    transform-origin: center bottom;
}

.thought-rail-glow.is-trail-above .thought-rail-glow-fill {
    -webkit-mask-image: linear-gradient(to top, black 0%, black 58%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, black 58%, transparent 100%);
}

.thought-rail-glow.is-trail-below {
    transform-origin: center top;
}

.thought-rail-glow.is-trail-below .thought-rail-glow-fill {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}

.thought-rail-glow.is-moving {
    transform: translateX(-50%) scaleY(1);
    transition-duration: var(--thought-trail-in);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.thought-rail-glow.is-moving .thought-rail-glow-fill {
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.35),
                0 0 12px rgba(var(--macaron-cyan-rgb), 0.2);
}

.thought-rocket {
    position: absolute;
    left: var(--thought-rail-x);
    top: 0;
    z-index: 4;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: grab;
    touch-action: none;
    filter: drop-shadow(0 0 8px var(--pink-glow));
    opacity: 0;
    transition: filter 0.2s ease, opacity 0.3s ease;
    appearance: none;
    outline: none;
}

.thought-rocket.is-show {
    opacity: 1;
}

.thought-rocket:hover,
.thought-rocket.is-dragging {
    filter: drop-shadow(0 0 16px var(--pink-accent));
}

.thought-rocket.is-dragging {
    cursor: grabbing;
}

.thought-rocket-svg {
    display: block;
    width: 44px;
    height: 44px;
    pointer-events: none;
}

.thought-rocket-flame {
    transform-origin: 15.5px 30px;
    transition: opacity 0.2s ease;
}

.thought-rocket.is-dragging .thought-rocket-flame {
    animation: thought-flame-pulse 0.45s ease-in-out infinite alternate;
}

@keyframes thought-flame-pulse {
    from { opacity: 0.55; transform: scaleY(0.85); }
    to { opacity: 1; transform: scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .thought-rocket.is-dragging .thought-rocket-flame {
        animation: none !important;
    }
}

/* ==========================================================================
   🗂️ 归档光纤时间轴组件与丝滑跟随流光 (Follow Rail Glow)
   ========================================================================== */
#archive-timeline-list {
    --tag-ch: 8ch;
}

.archive-timeline-track {
    background: linear-gradient(to bottom, rgba(244, 114, 182, 0.3), rgba(244, 114, 182, 0.08) 92%, transparent);
    /* 3px 与 .article-card::before 同宽；-2px 把条带中心对准 1px border-l，圆点不用挪。 */
    background-size: 3px 100%;
    background-repeat: no-repeat;
    background-position: -2px top;
}

/* 🌟 时间轴轨道跟随壳：弹簧只动这一层；滑块与拖尾是壳内兄弟，
   避免 .is-notching 的 mask 把伸出轨道的拖尾裁掉。 */
.archive-rail-follow {
    position: absolute;
    left: -2px;
    top: 0;
    width: 4px;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0);
    /* transform 由 JS 欠阻尼弹簧驱动（--rail-follow-tau / --rail-follow-zeta，见 blog-views.js） */
    transition: opacity 0.24s ease;
    z-index: 2;
}

/* 🌟 56px 实心头：移动过程中不镂空；落位加 .is-notching 时镂空。
   配色：与 #friends-form-card::before 同款六色马卡龙（--macaron-rail-glow）。
   宽度 4px 与主页 .article-card::before 同款；left:-2px 在壳上，与静轨纤维对齐。 */
.archive-rail-slider {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--macaron-rail-glow);
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.45),
                0 0 14px rgba(var(--macaron-cyan-rgb), 0.28);
    z-index: 1;
}

/* 🌟 彗星拖尾：高度固定为 max，可见长度用 --trail-len 走 scaleY，不写 height。
   展开/收缩仍是外壳 scaleY(0↔1)；羽化 mask 在 fill 上（与 length 同比例缩放，等价旧百分比）。
   ⚠️ 近端必须相对 .archive-rail-follow（滑块头）定位 —— 这样尾巴永远咬着滑块。
      曾经为「远端不越界」把近端挪到焦点行（多一层 --trail-shift 平移壳），
      结果飞行途中滑块头与尾巴分离 116~409px，看起来就是「分裂」。见 3.15。 */
.archive-rail-trail {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--archive-trail-max);
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: transform var(--archive-trail-out) cubic-bezier(0.22, 0.6, 0.28, 1);
    z-index: 0;
    --trail-len: 1;
}

.archive-rail-trail-fill {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: var(--macaron-rail-glow-core);
    transform: scaleY(var(--trail-len, 1));
    transform-origin: inherit;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-rail-trail.is-trail-above {
    bottom: calc(100% - 12px);
    top: auto;
    transform-origin: center bottom;
}

.archive-rail-trail.is-trail-above .archive-rail-trail-fill {
    -webkit-mask-image: linear-gradient(to top, black 0%, black 58%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, black 58%, transparent 100%);
}

.archive-rail-trail.is-trail-below {
    top: calc(100% - 12px);
    bottom: auto;
    transform-origin: center top;
}

.archive-rail-trail.is-trail-below .archive-rail-trail-fill {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}

.archive-rail-trail.is-moving {
    transform: scaleY(1);
    transition-duration: var(--archive-trail-in);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-rail-trail.is-moving .archive-rail-trail-fill {
    box-shadow: 0 0 8px rgba(var(--macaron-pink-rgb), 0.35),
                0 0 12px rgba(var(--macaron-cyan-rgb), 0.2);
}

/* 🌟 落位镂空：几何仍对齐 .archive-dot ±4px；配色用 --macaron-rail-glow-notch */
.archive-rail-slider.is-notching {
    background: var(--macaron-rail-glow-notch);
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black calc(50% - 5px),
        transparent calc(50% - 4px),
        transparent calc(50% + 4px),
        black calc(50% + 5px),
        black 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black calc(50% - 5px),
        transparent calc(50% - 4px),
        transparent calc(50% + 4px),
        black calc(50% + 5px),
        black 100%
    );
}

.archive-item {
    position: relative;
    transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-item:hover {
    background-color: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.35);
    box-shadow: 0 4px 20px -2px rgba(244, 114, 182, 0.16);
}

/* 归档标题：进焦快右移，离焦慢回左。只动当前行与刚离开的那一行，其余不动。 */
@media (hover: hover) and (pointer: fine) {
    .archive-item h3 {
        padding-right: 0.4rem;
        transform: translateX(0);
        transition: transform var(--archive-title-out) cubic-bezier(0.22, 0.6, 0.28, 1),
                    color 0.28s ease;
    }

    .archive-item:hover h3 {
        transform: translateX(var(--archive-title-shift));
        transition-duration: var(--archive-title-in), 0.28s;
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease;
    }

    .archive-item .archive-item-arrow {
        transform: translateX(0);
        transition: transform var(--archive-title-out) cubic-bezier(0.22, 0.6, 0.28, 1),
                    opacity 0.42s ease,
                    color 0.28s ease;
    }

    .archive-item:hover .archive-item-arrow {
        transform: translateX(0.4rem);
        transition-duration: 0.32s, 0.28s, 0.28s;
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease;
    }
}

/* PC 正文侧栏目录：对齐归档列表的框 / 底色 / 阴影悬停（不影响手机抽屉） */
#article-toc-list .toc-item {
    position: relative;
    transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* scrollspy 激活项：弱于悬停的常驻轻框 */
#article-toc-list .toc-item.text-pink-400 {
    background-color: rgba(244, 114, 182, 0.05);
    border-color: rgba(244, 114, 182, 0.22);
}

@media (hover: hover) and (pointer: fine) {
    #article-toc-list .toc-item:hover {
        background-color: rgba(244, 114, 182, 0.08);
        border-color: rgba(244, 114, 182, 0.35);
        box-shadow: 0 4px 20px -2px rgba(244, 114, 182, 0.16);
        color: var(--pink-accent, #f472b6);
    }
}

.archive-item .archive-dot {
    box-shadow: 0 0 0 2px rgba(19, 19, 23, 0.95);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-item:hover .archive-dot {
    background-color: var(--pink-accent);
    border-color: #fff;
    box-shadow: 0 0 14px rgba(244, 114, 182, 0.95), 0 0 24px rgba(244, 114, 182, 0.45);
}

/* 🌟 流光经过：圆点用马卡龙渐变填满（节点 z-10 压在 4px 轨上，避免「条子盖住圆点」）。
   lit 区间由 JS 按「可见拖尾水面」刷：外壳 scaleY 收缩时远端圆点依次褪色。 */
.archive-item.is-rail-lit .archive-dot {
    background-color: transparent;
    background-image: var(--macaron-rail-glow);
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 10px rgba(var(--macaron-pink-rgb), 0.85),
                0 0 18px rgba(var(--macaron-cyan-rgb), 0.4);
    transform: scale(1.2);
}

.archive-year-group:not(:last-child) {
    margin-bottom: 3.25rem;
}

/* ==========================================================================
   🌸 分类马卡龙柔和色谱常驻样式 (Sakura Pastel Palette)
   文字用 :root --macaron-*；底/边更淡（bg≈0.08、border≈0.22），全站统一偏柔。
   ========================================================================== */
.tag-pastel-pink {
    background: rgba(var(--macaron-pink-rgb), 0.08) !important;
    color: var(--macaron-pink) !important;
    border: 1px solid rgba(var(--macaron-pink-rgb), 0.22) !important;
}

.tag-pastel-cyan {
    background: rgba(var(--macaron-cyan-rgb), 0.08) !important;
    color: var(--macaron-cyan) !important;
    border: 1px solid rgba(var(--macaron-cyan-rgb), 0.22) !important;
}

.tag-pastel-purple {
    background: rgba(var(--macaron-purple-rgb), 0.08) !important;
    color: var(--macaron-purple) !important;
    border: 1px solid rgba(var(--macaron-purple-rgb), 0.22) !important;
}

.tag-pastel-amber {
    background: rgba(var(--macaron-peach-rgb), 0.08) !important;
    color: var(--macaron-peach) !important;
    border: 1px solid rgba(var(--macaron-peach-rgb), 0.22) !important;
}

.tag-pastel-emerald {
    background: rgba(var(--macaron-mint-rgb), 0.08) !important;
    color: var(--macaron-mint) !important;
    border: 1px solid rgba(var(--macaron-mint-rgb), 0.22) !important;
}

.tag-pastel-indigo {
    background: rgba(var(--macaron-sky-rgb), 0.08) !important;
    color: var(--macaron-sky) !important;
    border: 1px solid rgba(var(--macaron-sky-rgb), 0.22) !important;
}

/* ==========================================================================
   🌸 友链四色微晶延时胶囊 (Green / Yellow / Red / Gray)
   ========================================================================== */
.friend-ping-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-family: 'english', 'chinese', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    background: rgba(13, 13, 14, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.friend-ping-badge .ping-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* 🟢 极速/健康 ( < 600ms ) */
.friend-ping-badge.ping-green {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.25);
}
.friend-ping-badge.ping-green .ping-dot {
    background-color: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
}

/* 🟡 良好/一般 ( 600ms - 2000ms ) */
.friend-ping-badge.ping-yellow {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}
.friend-ping-badge.ping-yellow .ping-dot {
    background-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}

/* 🔴 较慢 ( > 2000ms ) */
.friend-ping-badge.ping-red {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.25);
}
.friend-ping-badge.ping-red .ping-dot {
    background-color: #f87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.9);
}

/* ⚪ 离线/超时 */
.friend-ping-badge.ping-gray {
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.2);
}
.friend-ping-badge.ping-gray .ping-dot {
    background-color: #6b7280;
}

/* 🟣 测速中 */
.friend-ping-badge.ping-pending {
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.2);
}
.friend-ping-badge.ping-pending .ping-dot {
    background-color: #f472b6;
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.6);
}

/* 悬停卡片时的胶囊微放大反馈（失联卡不响应） */
.friend-card--active:hover .friend-ping-badge {
    transform: translateY(-1px);
    border-color: rgba(244, 114, 182, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   ☁ 友链失联区 · 灰裂卡（仅 ping gray）
   ========================================================================== */
.friends-offline-section {
    margin-top: 2.5rem;
    padding-top: 0.25rem;
}

.friends-offline-header {
    opacity: 0.92;
}

.friend-card--offline {
    filter: grayscale(0.9) brightness(0.72);
    opacity: 0.88;
    pointer-events: none;
    cursor: not-allowed;
    border-color: rgba(107, 114, 128, 0.45) !important;
    box-shadow: none !important;
    user-select: none;
}

.friend-card--offline .friend-avatar-box {
    border-color: rgba(107, 114, 128, 0.45) !important;
    background: rgba(39, 39, 42, 0.5) !important;
    box-shadow: none !important;
}

.friend-card--offline .text-pink-400 {
    color: #9ca3af !important;
}

.friend-card-crack {
    display: none;
}

.friend-card--offline .friend-card-crack {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    /* 对角线裂痕：暗缝 + 亮边，像玻璃碎裂 */
    background:
      linear-gradient(
        122deg,
        transparent 0%,
        transparent 46.2%,
        rgba(0, 0, 0, 0.55) 47.4%,
        rgba(255, 255, 255, 0.22) 48.2%,
        rgba(0, 0, 0, 0.65) 49%,
        transparent 50.4%,
        transparent 100%
      ),
      linear-gradient(
        98deg,
        transparent 0%,
        transparent 58%,
        rgba(0, 0, 0, 0.4) 59.2%,
        rgba(255, 255, 255, 0.12) 60%,
        rgba(0, 0, 0, 0.45) 60.8%,
        transparent 62.2%,
        transparent 100%
      );
    mix-blend-mode: soft-light;
}

.friend-card--offline .friend-card-crack::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 80% 55% at 48% 52%,
      transparent 40%,
      rgba(0, 0, 0, 0.28) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .friend-card--offline {
        filter: grayscale(0.85) brightness(0.78);
    }
}

/* ==========================================================================
   📱 手机端专项优化（纯新增，不影响桌面原功能）
   ========================================================================== */

/* 1. 全局触屏基础：禁止字号自动缩放、清除点击高亮、消除 300ms 双击延迟 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

a,
button,
[role="button"],
input,
textarea,
select,
label {
    touch-action: manipulation;
}

/* 2. 首屏用小视口高度：稳定，避免地址栏收展时高度变化导致吸附落点漂移 */
@media (max-width: 640px) {
    #hero-stage {
        min-height: calc(100vh - 96px) !important;
        min-height: calc(100svh - 96px) !important;
    }
}

/* 3. 触控目标放大到 ≥44px（仅真触屏设备，不误伤桌面窄窗/平板鼠标） */
@media (hover: none) and (pointer: coarse) {
    .btn-icon,
    .nav-menu-toggle,
    #search-toggle-btn,
    #nav-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/* 4. 正文手机排版收窄：标题/代码块更紧凑，避免溢出 */
@media (max-width: 640px) {
    #detail-title {
        font-size: 1.7rem;
        line-height: 1.3;
    }

    .markdown-body h1 {
        font-size: 1.5rem;
    }

    .markdown-body h2 {
        font-size: 1.35rem;
    }

    .markdown-body h3 {
        font-size: 1.15rem;
    }

    .markdown-body blockquote p {
        font-size: 0.8125rem;
    }

    .markdown-body pre {
        padding: 0.9rem !important;
    }

    .markdown-body pre code {
        font-size: 0.85rem;
    }

    .markdown-body th,
    .markdown-body td {
        padding: 0.5rem 0.7rem;
        font-size: 0.85em;
    }
}

/* 5. 安全区：底部避让刘海 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* 5.5 归档条目手机端：标题允许多行换行（不再截断），徽标收窄留出空间 */
@media (max-width: 640px) {
    .archive-item {
        align-items: flex-start;
    }

    .archive-item h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.4 !important;
        align-items: flex-start !important;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .archive-item .tag-badge {
        min-width: 0 !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* 6. 真触屏设备隐藏滚动条，滚动更沉浸（目录 .toc-scroll 下面再开回来） */
@media (hover: none) and (pointer: coarse) {
    #page-scroll::-webkit-scrollbar,
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    #page-scroll,
    * {
        scrollbar-width: none;
    }
}

/* ==========================================================================
   🌸 目录组件统一滚动条 (PC 侧栏 + 手机抽屉)
   - 覆盖上方真触屏「全隐藏」规则，目录内始终显示粉主题细滚动条
   - 仅作用域 .toc-scroll，不影响其它区域滚动条观感
   ========================================================================== */
.toc-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
}

.toc-scroll::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.toc-scroll::-webkit-scrollbar-thumb {
    background: var(--pink-accent);
    border-radius: 9999px;
}

.toc-scroll::-webkit-scrollbar-thumb:hover,
.toc-scroll::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-hover);
}

@supports not selector(::-webkit-scrollbar) {
    .toc-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

/* 真触屏设备：重新开启目录滚动条（覆盖上面的全局 display:none / scrollbar-width:none） */
@media (hover: none) and (pointer: coarse) {
    .toc-scroll {
        scrollbar-width: thin;
    }

    .toc-scroll::-webkit-scrollbar {
        display: block;
        width: 4px;
    }
}