/* ============================================================================
   生化危機模式（BIOHAZARD MODE）
   ----------------------------------------------------------------------------
   全部規則都以 html.bio 開頭 —— 不開啟這個模式時，這些樣式一條都不生效，
   主主題完全不受影響。切換邏輯在 source/js/bio-mode.js。
   ========================================================================== */

/* 同时写上 html.bio.dark-mode：生化模式会借用 dark-mode 的暗色底，
   而 custom.css 里 html.dark-mode 也定义了 --accent（粉色）。
   两个选择器优先级相同、谁后加载谁生效——为免加载顺序变化导致变粉，
   这里用更高的优先级把变量锁死。 */
html.bio,
html.bio.dark-mode {
    --accent: #6fe08a;
    --accent-light: #8ff0a6;
    --accent-deep: #3ea75f;
    --accent-pale: #0e1a12;
    --accent-rgb: 111, 224, 138;
    --accent-light-rgb: 143, 240, 166;
    --accent-deep-rgb: 62, 167, 95;

    --bio-panel: rgba(8, 12, 11, 0.20);
    --bio-panel-2: rgba(12, 18, 17, 0.16);
    --bio-line: rgba(110, 190, 130, 0.18);
    --bio-line-strong: rgba(110, 190, 130, 0.38);
    --bio-text: #dde5de;
    --bio-dim: #93a098;
    --bio-red: #c11c1c;
    --bio-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

    background: #07090a;
}

/* 主主題的背景輪播層（bg-slideshow.js 建的）在生化模式下讓位 */
html.bio .site-bg-layer { display: none !important; }

/* 背景層：html 底色 + body 透明，負層疊在最底下 */
html.bio body {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--bio-text);
}

.bio-bg,
.bio-fx { display: none; }
html.bio .bio-bg,
html.bio .bio-fx { display: block; }

.bio-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}
.bio-bg i {
    position: absolute;
    inset: 0;
    /* 图本身偏暗，提亮 + 加对比，避免整页发闷 */
    filter: brightness(1.32) contrast(1.06) saturate(1.04);
    background-position: 70% center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2.8s ease;
}
.bio-bg i.on { opacity: 1; }

/* 壓暗 + 掃描線 */
.bio-fx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.bio-fx-vignette { display: none; }
.bio-fx-scan {
    z-index: 998;
    opacity: .55;
    background: repeating-linear-gradient(
        to bottom,
        rgba(120, 255, 170, .035) 0 1px,
        rgba(0, 0, 0, 0) 1px 3px
    );
}

/* 注：背景層是負 z-index，內容自然在上面，不需要給容器加定位，
   否則會把 #music-bar 這類原本 fixed 的元素拉回文檔流，整個版面就散了。 */

/* ================= 頁頭（生化模式重寫） ================= */
/* 說明：Bulma 的 navbar 是「.container > .navbar-brand + .navbar-menu」的三層結構，
   而且 .navbar-container 帶 overflow:auto —— 內容只要高過 56px，就會同時冒出
   一條橫向和一條縱向滾動條。所以這裡把整條鏈路的 overflow 都放開、高度鎖死。 */
html.bio .navbar {
    background: rgba(8, 12, 11, .82);
    border-bottom: 1px solid var(--bio-line);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    height: 56px;
}
html.bio .container.navbar-container {
    display: flex;
    align-items: center;
    overflow: visible !important;
    height: 56px !important;
    max-height: 56px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 24px !important;
}
/* 櫻花 logo 連同站名整塊去掉 */
html.bio .navbar-brand { display: none !important; }
html.bio .navbar-menu {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    height: 56px;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html.bio .navbar-start,
html.bio .navbar-end {
    display: flex;
    align-items: center;
    height: 56px;
}
html.bio .navbar-start { overflow: hidden; }
html.bio .navbar-end { margin-left: auto; }
html.bio .navbar-end .navbar-item,
html.bio .navbar-end a { flex: none; }
html.bio .navbar-item {
    display: flex !important;
    align-items: center;
    height: 56px !important;
    max-height: 56px !important;
    padding: 0 14px !important;
    position: relative;
    z-index: 0;
    color: var(--bio-dim);
    font-family: var(--bio-mono);
    font-size: 13px;
    letter-spacing: .4px;
}
html.bio .navbar-item:hover,
html.bio .navbar-item.is-active {
    background: transparent;
    color: #fdf1f1;
    text-shadow: 0 0 12px rgba(190, 26, 26, .55);
}
html.bio .navbar a,
html.bio .navbar .icon { color: inherit; }

/* 每個選項一片不同的血（貼圖，被 .navbar-start 裁掉下半） */
html.bio .navbar-item::before {
    content: "";
    position: absolute; left: 50%; bottom: -12px;
    width: 60px; height: 60px; margin-left: -30px; z-index: -1;
    background: url("/images/bio/splat/nav-1.svg") center / contain no-repeat;
    opacity: 0; transform: scale(.72) rotate(-6deg);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
html.bio .navbar-item:nth-child(2)::before { background-image: url("/images/bio/splat/nav-2.svg"); width: 68px; margin-left: -34px; }
html.bio .navbar-item:nth-child(3)::before { background-image: url("/images/bio/splat/nav-3.svg"); }
html.bio .navbar-item:nth-child(4)::before { background-image: url("/images/bio/splat/nav-4.svg"); width: 54px; margin-left: -27px; }
html.bio .navbar-item:nth-child(5)::before { background-image: url("/images/bio/splat/nav-5.svg"); width: 64px; margin-left: -32px; }
html.bio .navbar-item:nth-child(6)::before { background-image: url("/images/bio/splat/nav-6.svg"); }
html.bio .navbar-item:hover::before,
html.bio .navbar-item.is-active::before { opacity: .95; transform: none; }

/* 生化模式下隱藏日夜切換 */
html.bio #theme-toggle { display: none !important; }
/* ☣ 按鈕：兩種模式都用緊湊方塊 */
#bio-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center; flex: none;
    width: 38px; height: 38px; padding: 0 !important; line-height: 1;
    border-radius: 4px;
}
html.bio #bio-toggle {
    color: var(--accent);
    background: rgba(111, 224, 138, .10);
    box-shadow: inset 0 0 0 1px rgba(111, 224, 138, .35), 0 0 16px rgba(111, 224, 138, .18);
}
html.bio #bio-toggle:hover { background: rgba(111, 224, 138, .2); }
/* ================= 卡片 / 側欄 ================= */
html.bio .card,
html.bio .card-content,
html.bio .card-header,
html.bio .box,
html.bio .widget {
    background: var(--bio-panel) !important;
    border: 1px solid var(--bio-line);
    border-radius: 3px;
    /* brightness 压低：卡片透出亮背景图时不至于把文字冲淡 */
    backdrop-filter: blur(8px) brightness(.68);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 10px 34px rgba(0, 0, 0, .35);
    color: var(--bio-text);
}
html.bio .card-header-title,
html.bio .widget-title,
html.bio .article-title { color: var(--bio-text); }
html.bio .widget-title {
    font-family: var(--bio-mono);
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent-deep);
    border-bottom: 1px dashed var(--bio-line);
    padding-bottom: 6px;
}
html.bio .card-content .content,
html.bio .article .content { color: var(--bio-text); }

/* 文章卡四角掛血，正文區域保持乾淨 */
/* 文章正文卡不带血迹，保持干净 */

/* ================= 正文 ================= */
html.bio .content a { color: var(--accent); border-bottom: 1px dashed rgba(111, 224, 138, .35); }
html.bio .content a:hover { color: var(--accent-light); border-bottom-color: var(--accent); }
html.bio .content h1,
html.bio .content h2,
html.bio .content h3,
html.bio .content h4 { color: #eaf1ea; }
html.bio .content h2 {
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}
html.bio .content blockquote {
    background: rgba(193, 28, 28, .08);
    border-left: 3px solid var(--bio-red);
    color: var(--bio-text);
}
/* 行内代码：原主题的 dark-mode 规则是写死的粉色 #ffb0d4，
   这里换成琥珀色（跟代码块里的字符串同色系），避免和绿色强调色重复。 */
html.bio .article .content code:not([class]),
html.bio .content code:not([class*="language"]) {
    background: rgba(217, 164, 91, .12) !important;
    color: #d9a45b !important;
    border: 1px solid rgba(217, 164, 91, .18);
    font-family: var(--bio-mono);
}
/* 代码块里的 <code> 不能套到上面那套行内样式（但 pre 本身的深色底板要保留） */
html.bio .article .content pre code,
html.bio .article .content figure.highlight code {
    background: none !important;
    border: 0 !important;
    color: inherit !important;
    padding: 0 !important;
}
html.bio figure.highlight,
html.bio pre,
html.bio .highlight {
    background: rgba(3, 6, 5, .80) !important;
    border: 1px solid var(--bio-line);
}
html.bio .content table th {
    background: rgba(111, 224, 138, .10);
    color: var(--bio-text);
}
html.bio .content table td,
html.bio .content table th { border-color: var(--bio-line); }
html.bio hr { background: var(--bio-line); }

/* ================= 標籤 / 元資訊 ================= */
/* 标签：custom.css 里有多条带 !important 的粉色规则，优先级各不相同：
     html.dark-mode .tag:not(body)                    → (0,2,2)
     html.dark-mode .card .tag / .article .tag        → (0,3,2)
     html.dark-mode .tags.has-addons .tag:not(body)   → (0,4,2)
   所以这里逐级覆盖，最后一条优先级最高（0,4,2），同分时 bio.css 后加载胜出。 */
html.bio .tag:not(body),
html.bio .card .tag:not(body),
html.bio .article .tag:not(body),
html.bio .tags.has-addons .tag:not(body),
html.bio .card .tags.has-addons .tag:not(body),
html.bio .article .tags.has-addons .tag:not(body) {
    background-color: transparent !important;
    border: 1px solid rgba(150, 20, 20, .30) !important;
    color: #aebbB2 !important;
    font-family: var(--bio-mono);
    font-size: 11.5px;
}
html.bio .tag:not(body):hover,
html.bio .tags.has-addons:hover .tag:not(body),
html.bio .card .tags.has-addons:hover .tag:not(body),
html.bio .article .tags.has-addons:hover .tag:not(body) {
    background-color: rgba(111, 224, 138, .08) !important;
    border-color: rgba(111, 224, 138, .55) !important;
    color: var(--accent) !important;
}
html.bio .tags.has-addons .tag:not(body):last-child,
html.bio .card .tags.has-addons .tag:not(body):last-child {
    background-color: rgba(111, 224, 138, .06) !important;
    color: #93a098 !important;
}

html.bio .article-meta,
html.bio .article-meta a { color: var(--bio-dim); font-family: var(--bio-mono); font-size: 12px; }

/* ================= 頁腳 / 回到頂部 / 搜尋 ================= */
html.bio .footer {
    background: rgba(8, 12, 11, .72);
    border-top: 1px solid var(--bio-line);
    color: var(--bio-dim);
    backdrop-filter: blur(10px);
}
html.bio .footer a { color: var(--accent-deep); }
html.bio #back-to-top {
    background: rgba(8, 12, 11, .8);
    border: 1px solid var(--bio-line-strong);
    color: var(--accent);
}
html.bio .searchbox-input {
    background: rgba(8, 12, 11, .85);
    border: 1px solid var(--bio-line);
    color: var(--bio-text);
}
html.bio .searchbox-result-item:hover { background: rgba(111, 224, 138, .1); }

/* ================= 音樂播放器 ================= */
html.bio #music-toggle {
    background: rgba(8, 12, 11, .85);
    border: 1px solid var(--bio-line-strong);
    color: var(--accent);
}
html.bio #music-bar {
    background: rgba(8, 12, 11, .86) !important;
    border: 1px solid var(--bio-line-strong) !important;
    backdrop-filter: blur(12px);
}
html.bio #music-bar .mb-head,
html.bio #music-bar .mb-list { background: transparent !important; }
html.bio #music-title { color: var(--accent) !important; font-family: var(--bio-mono); letter-spacing: 1px; }
html.bio #music-bar .mb-list-item { border-color: var(--bio-line) !important; }

/* 浮动特效是 JS 画在三个 canvas 上的：1=微光点 2=樱花/礼花 3=雨
   生化模式只关掉樱花那层，雨留着 */
html.bio body > canvas[data-bio-canvas="petals"] { display: none !important; }
html.bio body > canvas[data-bio-canvas="dots"] { filter: grayscale(.85) brightness(.55); }

/* 注：不覆蓋滾動條樣式——全域 ::-webkit-scrollbar 會讓搜索框等內層容器冒出多餘的滾動條 */

/* ============================================================================
   過場：終端啟動
   ========================================================================== */
#bio-term {
    position: fixed; inset: 0; z-index: 9999;
    background: #050706; color: var(--accent);
    font-family: var(--bio-mono); font-size: 13px; line-height: 1.9;
    padding: 8vh 8vw; letter-spacing: .5px;
    display: none;
}
#bio-term.on { display: block; }
#bio-term pre { margin: 0; white-space: pre-wrap; background: none; border: 0; }
#bio-term .dim { color: #4d6b55; }
#bio-term .warn { color: #d24a3a; }
#bio-term .ok { color: #9fffae; }
#bio-term .pbar { color: var(--accent); }
#bio-term .cur {
    display: inline-block; width: 8px; height: 14px;
    background: var(--accent); vertical-align: -2px;
    animation: bio-blink 1s steps(1) infinite;
}
@keyframes bio-blink { 50% { opacity: 0 } }
#bio-term.fast .cur { animation: none; opacity: 1; }
#bio-term::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(120, 255, 170, .05) 0 1px, transparent 1px 3px);
}
#bio-term .term-logo {
    position: absolute; top: 5vh; right: 5vw; text-align: center;
}
#bio-term .term-logo img {
    display: block; width: 76px; height: 76px;
    filter: drop-shadow(0 0 14px rgba(179, 25, 25, .55));
    animation: bio-logo-in .55s ease both;
}
@keyframes bio-logo-in {
    from { opacity: 0; transform: scale(.84) rotate(-14deg) }
    to   { opacity: 1; transform: none }
}
#bio-term .term-logo span {
    display: block; margin-top: 9px; font-size: 9px; letter-spacing: 3px; color: #8b3a3a;
}

/* 尊重系統「減少動態效果」 */
@media (prefers-reduced-motion: reduce) {
    #bio-term .term-logo img { animation: none; }
}

/* ============================================================================
   版面重排（生化模式專屬）
   目标：贴近设计样张——左栏收窄、个人信息精简成一行、去掉杂项 widget
   ========================================================================== */

/* 整体：左右两栏重新分配宽度 */
html.bio .columns { margin-left: 0 !important; margin-right: 0 !important; }
html.bio .column.column-left {
    flex: none !important;
    width: 272px !important;
    max-width: 272px !important;
    padding: 1rem 0.75rem 1rem 0 !important;
}
html.bio .column.column-main {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 1rem 0 !important;
}
@media (max-width: 768px) {
    html.bio .column.column-left { width: 100% !important; max-width: none !important; padding: 0 !important; }
    html.bio .column.column-main { padding: 0.5rem 0 !important; }
}

/* 侧栏 widget：更紧凑 */
html.bio .widget { margin-bottom: 16px !important; border-radius: 3px; }
html.bio .widget .card-content { padding-top: 16px !important; padding-bottom: 18px !important; }
html.bio .widget .card-content { padding: 14px 16px !important; }
html.bio .widget .menu-label {
    font-family: var(--bio-mono);
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent-deep);
    border-bottom: 1px dashed var(--bio-line);
    padding-bottom: 6px; margin-bottom: 10px;
}
html.bio .widget .menu-list a { font-size: 13.5px; padding: 4px 10px; }
html.bio .widget .menu-list a:hover { background: rgba(111, 224, 138, .08); color: var(--accent); }

/* 个人信息卡：横排一行，去掉统计 / 关注按钮 / 社交图标 */
html.bio .widget[data-type="profile"] .card-content { padding: 14px 16px !important; }
html.bio .widget[data-type="profile"] nav.level:first-of-type { justify-content: flex-start; margin-bottom: 0 !important; }
html.bio .widget[data-type="profile"] .level-item { justify-content: flex-start; }
html.bio .widget[data-type="profile"] .level-item > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 13px;
    align-items: center;
    text-align: left;
}
html.bio .widget[data-type="profile"] figure.image { grid-row: span 3; }
/* 地区那一行原本是居中布局，改成左对齐跟上面两行对齐 */
html.bio .widget[data-type="profile"] .level-item > div > p.is-flex { justify-content: flex-start !important; }
html.bio .widget[data-type="profile"] .level-item > div > p { text-align: left; }
html.bio .widget[data-type="profile"] figure.image {
    width: 52px !important; height: 52px !important;
    margin: 0 !important; flex: none;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 1px var(--bio-line-strong);
}
html.bio .widget[data-type="profile"] figure.image img { width: 100%; height: 100%; object-fit: cover; }
html.bio .widget[data-type="profile"] .title.is-size-4 {
    font-family: var(--bio-mono) !important;
    font-size: 15px !important; letter-spacing: .5px;
    margin: 0 !important; line-height: 1.3 !important;
}
html.bio .widget[data-type="profile"] p.is-size-6 { font-size: 11.5px !important; margin: 0 !important; color: var(--bio-dim); line-height: 1.5; }
/* 统计数字 / 社交图标（都是 nav.level.is-mobile）和关注按钮（div.level）：藏掉 */
html.bio .widget[data-type="profile"] nav.level.is-mobile,
html.bio .widget[data-type="profile"] div.level { display: none !important; }

/* 最新文章 / 归档：生化模式下让位，保持左栏干净 */
html.bio .widget[data-type="recent-posts"],
html.bio .widget[data-type="archives"] { display: none !important; }

/* 文章卡：内边距收紧，标题走等宽 */
html.bio .card:has(.article) .card-content { padding: 26px 30px !important; }
html.bio .card-content.article .title,
html.bio .article-title,
html.bio .card-title { font-family: var(--bio-mono) !important; letter-spacing: .2px; }
html.bio .article-meta { font-family: var(--bio-mono); font-size: 12px; letter-spacing: .3px; }

/* 文章顶部注入的档案编号 */
html.bio .bio-file-no {
    font-family: var(--bio-mono); font-size: 11.5px; letter-spacing: 1.6px;
    color: var(--accent-deep); margin-bottom: 8px;
}
/* 退出模式后这行档案号要消失（元素是 JS 插的，不会自己没） */
html:not(.bio) .bio-file-no { display: none !important; }
.bio-file-no .blink { animation: bio-blink 1.4s steps(1) infinite; }
/* ============================================================================
   滚动容器归位
   原主题给 .column 设了 overflow:auto，导致正文列 / 侧栏各自带一条常驻滚动条，
   看起来就像页头下面挂着两条。生化模式下改成跟随整页滚动。
   ========================================================================== */
/* 不能改成 overflow:visible（会把列宽撑破、正文跑到屏幕外），
   所以保留原来的滚动行为，只把列自带的滚动条隐藏掉。 */
html.bio .column { scrollbar-width: none; -ms-overflow-style: none; }
html.bio .column::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

/* 只给根滚动条做暗色，内层容器一律不碰 */
html.bio::-webkit-scrollbar { width: 10px; height: 10px; }
html.bio::-webkit-scrollbar-track { background: #0a0d0b; }
html.bio::-webkit-scrollbar-thumb { background: rgba(111, 224, 138, .28); border-radius: 2px; }
html.bio::-webkit-scrollbar-thumb:hover { background: rgba(111, 224, 138, .45); }
/* ============================================================================
   播放器（生化模式：去掉悬浮圆钮，直接铺开样张那套小条）
   ========================================================================== */
/* 生化模式的音乐只留页头一个按钮，条形播放器整块不显示 */
html.bio #music-toggle,
html.bio #music-bar { display: none !important; }

/* 页头音乐按钮 */
#bio-music {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center; flex: none;
    width: 34px; height: 34px; padding: 0 !important;
    border-radius: 4px;
    color: var(--bio-dim);
    opacity: .85;
}
#bio-music:hover { color: var(--accent); background: rgba(111, 224, 138, .12); opacity: 1; }
html.bio #bio-music.is-on { color: var(--accent); }
html:not(.bio) #bio-music { display: none !important; }
/* 无封面时那层黑胶（原主题是紫色盘体），生化模式换成墨绿 */
html.bio #music-bar:not(.has-cover) .mb-cover::before {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(111, 224, 138, .55) 0 12%,
            rgba(111, 224, 138, .85) 12% 13.5%,
            transparent 13.5%),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, .04) 0 1px,
            rgba(0, 0, 0, 0) 1px 3.2px),
        radial-gradient(circle at 50% 50%,
            #16211a 0 26%,
            #111a15 55%,
            #0a100d 88%,
            #070b09 100%) !important;
}
html.bio #music-bar .mb-cover .mb-fallback { color: rgba(111, 224, 138, .35) !important; }
/* ============================================================================
   阅读模式（文章页）：隐藏左侧个人信息栏，正文居中并加宽
   ========================================================================== */
html.bio.bio-reading .column-left { display: none !important; }
html.bio.bio-reading .columns { justify-content: center !important; }
html.bio.bio-reading .column-main {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 1.2rem 1rem 2rem !important;
}
html.bio.bio-reading .card:has(.article) .card-content { padding: 34px 42px !important; }
/* 回到顶部的按钮（右下角，滚动超过 240px 才出现） */
#bio-top {
    position: fixed;
    right: 22px; bottom: 86px;
    z-index: 60;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: rgba(8, 12, 11, .84);
    border: 1px solid var(--bio-line-strong);
    color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, background .18s;
    font-size: 14px;
}
#bio-top.show { opacity: 1; transform: none; pointer-events: auto; }
#bio-top:hover { background: var(--accent); color: #06110a; }
html:not(.bio) #bio-top { display: none; }
/* ============================================================================
   光标：生化模式下不用 Keil 指针，恢复系统默认
   主主题那条规则是 `*, *::before, *::after { cursor: url(...) !important }`，
   所以这里必须同等 !important，并靠更高的选择器优先级压过去（bio.css 后加载）。
   ========================================================================== */
html.bio,
html.bio *,
html.bio *::before,
html.bio *::after {
    cursor: auto !important;
}
html.bio a,
html.bio button,
html.bio .button,
html.bio [role="button"],
html.bio summary,
html.bio input[type="range"],
html.bio #music-toggle,
html.bio #bio-toggle,
html.bio #bio-music,
html.bio #bio-top {
    cursor: pointer !important;
}
html.bio input[type="text"],
html.bio textarea {
    cursor: text !important;
}

/* 退出时的淡出遮罩 */
#bio-exit {
    position: fixed; inset: 0; z-index: 9998;
    background: #050706;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;      /* 淡入 0.5s */
}
#bio-exit.on { opacity: 1; }
#bio-exit.out { transition: opacity .8s ease; opacity: 0; }   /* 淡出 0.8s */
/* ============================================================================
   右侧目录小窗（只在阅读视图显示）
   ========================================================================== */
html.bio #bio-toc {
    position: fixed;
    right: 22px; top: 112px;
    width: 214px;
    max-height: 62vh;
    overflow-y: auto;
    z-index: 40;
    padding: 12px 6px 12px 14px;
    background: rgba(8, 12, 11, .62);
    border: 1px solid var(--bio-line);
    border-radius: 3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    scrollbar-width: none;
}
html.bio #bio-toc::-webkit-scrollbar { width: 0; display: none; }\nhtml:not(.bio) #bio-toc { display: none !important; }

.bio-toc-title {
    font-family: var(--bio-mono);
    font-size: 10.5px; letter-spacing: 1.6px;
    color: var(--accent-deep);
    border-bottom: 1px dashed var(--bio-line);
    padding-bottom: 6px; margin-bottom: 8px;
}
html.bio #bio-toc .bio-toc-item {
    display: block;
    font-size: 12.5px; line-height: 1.45;
    color: var(--bio-dim);
    padding: 3px 8px 3px 10px;
    margin-left: -2px;
    border-left: 1px solid var(--bio-line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .18s ease, border-color .18s ease;
}
html.bio #bio-toc .bio-toc-item.lvl3 { padding-left: 20px; font-size: 11.5px; }
html.bio #bio-toc .bio-toc-item:hover { color: var(--accent) !important; border-left-color: var(--accent); }
html.bio #bio-toc .bio-toc-item.on {
    color: var(--accent) !important;
    border-left: 2px solid var(--accent);
    padding-left: 9px;
    background: rgba(111, 224, 138, .07);
}
.bio-toc-item.on.lvl3 { padding-left: 19px; }

/* 屏幕不够宽就不显示，避免压到正文 */
@media (max-width: 1320px) {
    html.bio #bio-toc { display: none !important; }
}
/* 文章标题：显式锁死颜色与不透明度。
   阅读视图下卡片是半透明的，标题若继承了偏暗的颜色会显得「灰掉」。 */
html.bio .card-content.article .title,
html.bio .card-content.article h1,
html.bio .article-title,
html.bio .card-header-title {
    color: #eef3ef !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}
/* 标题本身（或里面的链接）悬停时保持本色，别被 dark-mode 的 a:hover 染成粉色 */
html.bio .card-content.article .title a,
html.bio .card-content.article .title a:hover,
html.bio .card-content.article .title a:visited,
html.bio .article-title a,
html.bio .article-title a:hover,
html.bio .card-header-title a,
html.bio .card-header-title a:hover {
    color: #eef3ef !important;
    text-decoration: none !important;
}
/* ============================================================================
   列表页（非阅读视图）的文章标题：绿色 + 悬停轻微放大，提示可点击
   —— 阅读视图里标题是纯文本，保持冷白，不参与这套交互。
   ========================================================================== */
html.bio:not(.bio-reading) .card-content.article > .title,
html.bio:not(.bio-reading) .card-content.article > .title a {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: transform .18s ease, color .18s ease, text-shadow .18s ease;
    transform-origin: left center;
}
html.bio:not(.bio-reading) .card-content.article > .title a {
    display: inline-block;
}
html.bio:not(.bio-reading) .card-content.article > .title a:hover,
html.bio:not(.bio-reading) .card-content.article > .title:hover a {
    color: var(--accent-light) !important;
    transform: scale(1.03);
    text-shadow: 0 0 14px rgba(111, 224, 138, .35);
}
/* 首页卡片顶部的其它 .title（比如归档年份）沿用普通样式 */
html.bio:not(.bio-reading) .card-content.article > .title.is-3 { letter-spacing: .2px; }
/* ============================================================================
   PJAX 换页动画：原主题是整块 .columns 从 opacity:0 淡入
   （custom.css: .columns.pjax-swap { animation: pjaxFadeIn .3s }）
   卡片本来就很透，再乘一层透明度，看起来就是「瞬间变全透又弹回来」。
   这里换成只做位移、不改透明度。
   ========================================================================== */
html.bio .columns.pjax-swap {
    animation: bioPjaxIn .3s cubic-bezier(.2, .8, .2, 1) !important;
}
@keyframes bioPjaxIn {
    from { transform: translateY(6px); }
    to   { transform: none; }
}