:root {
    --bg-color: #f7f7f7;
    --text-main: #222222;
    --text-muted: #666666;
    --text-light: #999999;
    --border-color: #e0e0e0;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.03);
    --hover-bg: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] {
    --bg-color: #0a0a0a;
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --text-light: #555555;
    --border-color: #222222;
    --glass-bg: rgba(18, 18, 18, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.5);
    --hover-bg: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.8;
    font-size: 15px;
    transition: background-color 0.6s ease, color 0.6s ease;
    overflow-x: hidden;
}

.art-font { font-family: 'Playfair Display', serif; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* Transitions & Loader */
.fade-enter { opacity: 0; transform: translateY(15px); transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.fade-enter-active { opacity: 1; transform: translateY(0); }

.loader-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; pointer-events: none; }
.spinner { width: 40px; height: 40px; border: 2px solid var(--border-color); border-top-color: var(--text-main); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 1000; }
.glass-nav { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; cursor: pointer; letter-spacing: 1px; transition: transform 0.3s ease; }
.logo:active { transform: scale(0.95); } /* Logo 點擊反饋 */
.nav-controls { display: flex; gap: 20px; align-items: center; }

/* --- 搜索框動態伸縮 --- */
.search-wrapper input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-light);
    color: var(--text-main);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s;
    width: 60px; /* 初始僅顯示 Search */
}

.search-wrapper input:focus, 
.search-wrapper input:hover {
    border-bottom-color: var(--text-main);
    width: 240px; /* 懸停展開 */
}

/* --- More 菜單佈局 --- */
.more-menu-container { position: relative; }
.more-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 20px; padding: 5px 15px; font-family: inherit; color: var(--text-main); cursor: pointer; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); display: flex; align-items: center; gap: 6px; }
.more-btn:hover { background: var(--hover-bg); }
/* 完美物理點擊反饋 */
.more-btn:active { transform: scale(0.92); background: var(--border-color); }
.more-btn .arrow { font-size: 0.7rem; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.more-menu-container.active .arrow { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: calc(100% + 15px); right: 0; width: 180px; padding: 10px 0; z-index: 1100; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.more-menu-container.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-menu ul { list-style: none; }
.dropdown-menu li { opacity: 0; transform: translateX(-10px); transition: all 0.4s ease; transition-delay: calc(var(--i) * 0.08s); }
.more-menu-container.active li { opacity: 1; transform: translateX(0); }
.dropdown-menu a { display: block; padding: 10px 20px; text-decoration: none; color: var(--text-muted); font-size: 0.9rem; transition: 0.3s; }
.dropdown-menu a:hover { color: var(--text-main); background: var(--hover-bg); padding-left: 25px; }

/* 切換按鈕完美點擊反饋 */
.icon-btn { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; cursor: pointer; font-size: 1.2rem; padding: 8px; border-radius: 50%; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); color: var(--text-main); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--hover-bg) !important; }
.icon-btn:active { transform: scale(0.85); opacity: 0.7; }

/* Grid Layout */
.main-container { max-width: 1200px; margin: 100px auto 40px auto; padding: 0 24px; min-height: 80vh; }
.grid-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.glass-card { background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); border-radius: 8px; }

/* Hero & Feed */
.hero { margin-bottom: 60px; }
.hero-title { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
.hero-subtitle { color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0.5px; }
.feed-column { display: flex; flex-direction: column; gap: 30px; }
.post-card { padding: 32px; cursor: pointer; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.post-card:active { transform: translateY(0) scale(0.99); } /* 卡片點擊微回彈 */
[data-theme="dark"] .post-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.8); border-color: #444; }
.card-meta { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.card-title { font-size: 1.8rem; line-height: 1.3; margin-bottom: 16px; font-weight: 600; }
.card-summary { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; }
.tag-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 4px; background: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-muted); margin-right: 8px; transition: all 0.3s; }

/* Sticky Sidebar */
.sidebar-column { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 30px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-column::-webkit-scrollbar { display: none; }
.widget { padding: 24px; }
.widget-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-light); margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud span { cursor: pointer; font-size: 0.8rem; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border-color); color: var(--text-muted); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.tag-cloud span:hover { background: var(--text-main); color: var(--bg-color); border-color: var(--text-main); }
.tag-cloud span:active { transform: scale(0.9); }
.toc-list { list-style: none; border-left: 2px solid var(--border-color); padding-left: 12px; }
.toc-list li { margin-bottom: 10px; }
.toc-list a { text-decoration: none; color: var(--text-muted); font-size: 0.85rem; transition: color 0.3s ease, transform 0.3s ease; display: block; line-height: 1.4; }
.toc-list a:hover { color: var(--text-main); }
.toc-list a.active { color: var(--text-main); font-weight: 600; transform: translateX(4px); }
.toc-h3 { padding-left: 12px; font-size: 0.8rem !important; }
.sidebar-link { text-decoration: none; color: var(--text-main); font-weight: 500; font-size: 0.95rem; display: block; transition: color 0.3s; }
.sidebar-link:hover { color: var(--text-light); }

/* Post View Details */
.back-btn { background: none; border: none; font-family: inherit; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; margin-bottom: 30px; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.back-btn:hover { color: var(--text-main); transform: translateX(-4px); }
.back-btn:active { transform: translateX(-8px) scale(0.95); } /* 返回按鈕點擊反饋 */
.post-content-column { padding: 50px; }
.post-header { margin-bottom: 50px; }
.post-header h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 16px; }
.post-header .meta { color: var(--text-light); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; }

/* Markdown Core */
.markdown-body a { color: var(--text-main); text-decoration: none; font-weight: 500; background-image: linear-gradient(var(--text-main), var(--text-main)); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.markdown-body a:hover { background-size: 100% 1px; }

/* ========================================================================= */
/* --- 引用欄及折疊內容中的長鏈接：固定佈局 + 懸浮浮窗提示 (無佈局偏移) --- */
/* ========================================================================= */
.markdown-body details a,
.markdown-body blockquote a {
    display: inline-block;
    max-width: 250px; /* 強制約束佈局最大寬度，絕不撐破頁面 */
    white-space: nowrap;
    overflow: hidden; /* 兼容舊版瀏覽器的備用截斷 */
    overflow: clip; /* 現代化裁剪：裁剪文本但不創建新的塊級格式化上下文 */
    overflow-clip-margin: 500px; /* 允許生成的浮窗逸出裁剪區域 */
    text-overflow: ellipsis;
    vertical-align: bottom;
    position: relative; /* 浮窗的定位基準點 */
    transition: color 0.3s ease;
}

/* 動態生成的網址懸浮小框 (Tool-tip) */
.markdown-body details a::after,
.markdown-body blockquote a::after {
    content: attr(href); /* 自動提取 HTML 中的 href 屬性作為顯示內容 */
    position: absolute;
    bottom: calc(100% + 8px); /* 位於鏈接的正上方 */
    left: 0;
    transform: translateY(8px) scale(0.95);
    transform-origin: left bottom; /* 動畫從左下角展開，確保不出屏 */
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: normal; /* 浮窗內允許自由換行 */
    word-break: break-all; /* 長網址強制換行 */
    width: max-content;
    max-width: 320px; /* 浮窗自身的最大寬度 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none; /* 防止干擾鼠標點擊真實鏈接 */
}

/* 黑夜模式的浮窗陰影加深 */
[data-theme="dark"] .markdown-body details a::after,
[data-theme="dark"] .markdown-body blockquote a::after {
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    background: rgba(18, 18, 18, 0.9);
}

/* 懸浮時顯示提示框，不改變鏈接元素本身的大小！佈局零偏移！ */
.markdown-body details a:hover::after,
.markdown-body blockquote a:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 懸浮時網址本身變色，增強互動感 */
.markdown-body details a:hover,
.markdown-body blockquote a:hover {
    color: #3b82f6; /* 科技藍 */
}
/* ========================================================================= */

.markdown-body h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin: 2em 0 1em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5em; }
.markdown-body h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin: 1.5em 0 0.8em; }
.markdown-body p { margin-bottom: 1.5em; color: var(--text-muted); }
.markdown-body blockquote { border-left: 2px solid var(--text-main); padding-left: 20px; font-style: italic; color: var(--text-light); margin: 2em 0; }
.markdown-body pre { background: #111 !important; border-radius: 6px; padding: 20px; font-size: 0.85rem; overflow-x: auto; margin: 2em 0; border: 1px solid #333; }
.markdown-body code { font-family: monospace; }
.markdown-body img { max-width: 100%; border-radius: 4px; margin: 2em 0; filter: grayscale(20%); transition: filter 0.5s; }
.markdown-body img:hover { filter: grayscale(0%); }
/* ========================================================= */
/* 自動換行修復 (優化版)：排除提示欄與折疊內容 */
/* ========================================================= */

/* 1. 僅針對普通段落應用 pre-wrap，讓網頁尊重 .md 中的單次換行 */
.markdown-body p {
    white-space: pre-wrap;
    margin-bottom: 0.8em; /* 根據你之前的喜好調整間距 */
    color: var(--text-muted); /* */
    display: block;
}

/* 2. 🛡️ 排除邏輯：重置提示欄與折疊內容中的換行行為 */
/* 這樣在這些區域內，單次換行會被視為空格，回歸標準 Markdown 表現 */
.markdown-body .tip-box p,
.markdown-body details p,
.markdown-body details blockquote p {
    white-space: normal !important;
}

/* 額外確保折疊標題 (summary) 也不受影響 */
.markdown-body details summary {
    white-space: nowrap; /* 保持標題在一行 */
}

/* --- 提示欄 (Tip Box) --- */
.markdown-body .tip-box {
    background: var(--hover-bg);
    border-left: 3px solid var(--text-main);
    padding: 16px 20px;
    margin: 2em 0;
    border-radius: 0 8px 8px 0;
    position: relative;
    font-size: 0.95rem;
}
.markdown-body .tip-box::before {
    content: '!';
    position: absolute;
    left: -12px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: var(--text-main);
    color: var(--bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* --- 折疊引用完美動畫 (Perfect Collapsible Quote) --- */
/* ═══════════════════════════════════════════════════════════ */
/* 📦 Details 折叠框 - 完整升级版（修复版） */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 1.5em 0;
    background: var(--glass-bg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.markdown-body details:hover {
    border-color: var(--text-light);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════ */
/* Summary - 完美的交互 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    outline: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
    padding-right: 60px;  /* 给图标更多空间 */
}

.markdown-body details summary::-webkit-details-marker {
    display: none;
}

.markdown-body details summary:hover {
    background: var(--hover-bg);
    padding-left: 24px;
    padding-right: 64px;
}

.markdown-body details summary:active {
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════ */
/* 🎨 美化图标 - 更精致的设计 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details summary::before {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    
    /* 创建美化的加号图标 */
    background: 
        linear-gradient(90deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    color: var(--text-muted);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.markdown-body details summary:hover::before {
    color: var(--text-main);
    transform: translateY(-50%) scale(1.15);
}

/* ═══════════════════════════════════════════════════════════ */
/* 打开状态 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details[open] summary {
    border-bottom: 1px solid var(--border-color);
    background: var(--hover-bg);
    padding-bottom: 14px;
}

.markdown-body details[open] summary::before {
    transform: translateY(-50%) rotate(45deg);
    color: var(--text-main);
}

.markdown-body details[open] summary:hover::before {
    transform: translateY(-50%) rotate(45deg) scale(1.15);
}

/* ═══════════════════════════════════════════════════════════ */
/* 🎬 内容展开/折叠动画 - 流畅的长度变化 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details[open] > *:not(summary) {
    animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
        margin-top: -20px;
        visibility: hidden;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        margin-top: 0;
        visibility: visible;
    }
}

/* 折叠时的反向动画 */
.markdown-body details:not([open]) > *:not(summary) {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        margin-top: 0;
        visibility: visible;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
        margin-top: -20px;
        visibility: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* 内容区域 - 无高度限制 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details > *:not(summary) {
    padding: 20px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    /* 重要：移除任何高度限制 */
    max-height: none !important;
    height: auto !important;
}

.markdown-body details > p:not(summary) {
    margin: 0 0 15px 0;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
}

.markdown-body details > p:not(summary):last-child {
    margin-bottom: 0;
}

.markdown-body details blockquote {
    margin: 0;
    padding: 16px 20px;
    border-left: 3px solid var(--text-light);
    background: var(--hover-bg);
    border-radius: 4px;
    font-style: italic;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════ */
/* 📱 移动端优化 */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .markdown-body details {
        border-radius: 10px;
        margin: 1.2em 0;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
    }
    
    .markdown-body details summary {
        padding: 14px 16px;
        padding-right: 50px;
        font-size: 0.95rem;
    }
    
    .markdown-body details summary:hover {
        padding-right: 54px;
    }
    
    .markdown-body details summary::before {
        right: 14px;
        width: 20px;
        height: 20px;
    }
    
    .markdown-body details[open] > *:not(summary) {
        padding: 16px;
    }
    
    .markdown-body details > *:not(summary) {
        padding: 16px;
    }
    
    .markdown-body details blockquote {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .markdown-body details {
        margin: 1em 0;
        border-radius: 8px;
    }
    
    .markdown-body details summary {
        padding: 12px 14px;
        padding-right: 45px;
        font-size: 0.9rem;
    }
    
    .markdown-body details summary::before {
        right: 12px;
        width: 18px;
        height: 18px;
    }
    
    .markdown-body details > *:not(summary) {
        padding: 14px;
    }
    
    .markdown-body details > p:not(summary) {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* 🌙 暗色模式增强 */
/* ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] .markdown-body details {
    background: rgba(30, 30, 40, 0.7);
    border-color: #333333;
}

html[data-theme="dark"] .markdown-body details:hover {
    border-color: #555555;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .markdown-body details summary::before {
    color: #888888;
}

html[data-theme="dark"] .markdown-body details summary:hover::before {
    color: #cccccc;
}

html[data-theme="dark"] .markdown-body details[open] summary::before {
    color: #cccccc;
}

html[data-theme="dark"] .markdown-body details blockquote {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #555555;
}

/* ═══════════════════════════════════════════════════════════ */
/* 代码块内的特殊处理 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body details > pre,
.markdown-body details code {
    max-height: none !important;
    height: auto !important;
}

.markdown-body details > pre {
    margin: 15px 0;
    background: #0d1117 !important;
    border: 1px solid #30363d;
    border-radius: 6px;
}

/* --- 新增：CSS Grid 堆疊高斯模糊區域 (Geofence) --- */
#restricted-boundary {
    border: none;
    border-top: 1px dashed var(--text-light);
    margin: 4em 0 2em 0;
    height: 1px;
}

.restricted-container {
    display: grid; /* 關鍵：使用 Grid 讓子元素在同一個空間堆疊，並自動撐開最大高度 */
    margin-top: 2em;
    border-radius: 12px;
    overflow: hidden;
}

.restricted-blur-zone {
    grid-area: 1 / 1; /* 佔據同一個網格位置 */
    filter: blur(14px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5; /* 降低不透明度，讓上層文字更清晰 */
}

.restricted-overlay {
    grid-area: 1 / 1; /* 與模糊層完全重疊 */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 40%, var(--bg-color) 100%);
}

/* 獨立的告別信內容框，優雅的毛玻璃樣式 */
.restricted-msg {
    max-width: 650px;
    width: 100%;
    padding: 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    color: var(--text-main);
    font-family: 'Playfair Display', serif;
    line-height: 1.8;
    text-align: center;
    animation: msgFadeIn 1.2s ease-out forwards;
}

[data-theme="dark"] .restricted-msg {
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 確保 Markdown 內的加粗和斜體生效 --- */
.markdown-body strong {
    font-weight: 700;
    color: var(--text-main);
}
.markdown-body em {
    font-style: italic;
    color: var(--text-muted);
}
.markdown-body strong em,
.markdown-body em strong {
    font-weight: 700;
    font-style: italic;
}
.markdown-body h1 em, 
.markdown-body h2 em, 
.markdown-body h3 em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

/* --- 新增：牛逼的 CSS 樣式 --- */

/* 1. 反向文字 (Reverse) */
.reverse-text {
    display: inline-block;
    transform: scaleX(-1);
}

/* 2. 吐槽內容 (Spoiler) */
.spoiler {
    background-color: var(--text-main);
    color: var(--text-main);
    border-radius: 4px;
    padding: 0 4px;
    cursor: help;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.spoiler:hover {
    background-color: transparent;
}

/* 3. 彩色流轉文字 (Rainbow) */
.rainbow-text {
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #6366f1, #a855f7, #ef4444);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-scroll 4s linear infinite;
    font-weight: bold;
}
@keyframes rainbow-scroll { to { background-position: 200% center; } }

/* 4. 喵喵喵特效 (Meow Logic) */
.meow-target {
    display: inline-block;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
}
.meow-away {
    transform: scale(3) translateY(-100vh) rotate(360deg) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 5. 橫線斜體 (Del-Italic) */
.del-italic {
    text-decoration: line-through;
    font-style: italic;
    color: var(--text-muted);
}

/* 移動端適配 */
/* --- 移動端 Sort 按鈕 (PC端隱藏) --- */
.mobile-sort-btn {
    display: none;
}

/* ========================================================================= */
/* --- 移動端適配 (Mobile Responsive) --- */
/* ========================================================================= */
@media (max-width: 900px) { 
    .grid-layout { grid-template-columns: 1fr; } 
    .post-content-column { padding: 30px 20px; } 
    
    /* 徹底隱藏 PC 端側邊欄，防止佈局衝突 */
    .sidebar-column { display: none; } 
    
    .post-header h1 { font-size: 2.2rem; } 
    .search-wrapper input:focus, .search-wrapper input:hover { width: 140px; }

    /* 1. 顯示移動端 Sort 容器，確保絕對頂層 */
    .mobile-sort-container {
        display: block;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 3500; /* 極高的 z-index 保證在最頂層 */
    }

    /* 2. 精緻的方形毛玻璃按鈕 */
    .mobile-sort-btn {
        width: 56px;
        height: 56px;
        background: rgba(150, 150, 150, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        border-radius: 16px; /* 蘋果風格的平滑圓角 */
        color: var(--text-main);
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    .mobile-sort-btn:active {
        transform: scale(0.9);
        background: rgba(150, 150, 150, 0.3);
    }

    /* 3. 類似 More 菜單的向上展開面板 */
    .mobile-drawer {
        position: absolute;
        bottom: calc(100% + 16px); /* 位於按鈕正上方 16px */
        right: 0;
        width: 280px;
        max-height: 65vh; /* 防止內容過多超出屏幕 */
        overflow-y: auto;
        background: var(--glass-bg);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        
        /* 隱藏滾動條 */
        scrollbar-width: none; 
        -ms-overflow-style: none;
        
        /* 展開動畫初始狀態 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(0.95);
        transform-origin: bottom right;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
    
    .mobile-drawer::-webkit-scrollbar { display: none; }
    
    [data-theme="dark"] .mobile-drawer {
        box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    }

    /* 觸發展開狀態 */
    .mobile-sort-container.active .mobile-drawer {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* 4. 面板內部組件的美化調整，去除原有 PC 組件的多餘 padding */
    .mobile-drawer .widget { padding: 0 0 24px 0; border: none; background: transparent; box-shadow: none; backdrop-filter: none; }
    .mobile-drawer .widget:last-child { padding-bottom: 0; margin-bottom: 0; }
    .mobile-drawer .widget-title { font-size: 0.8rem; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
}

/* --- 高級開場序列 (Boot Sequence UI) --- */
.onboarding-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 3000; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: var(--bg-color);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.2s;
}
.onboarding-overlay.hide {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.ob-section {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.ob-section.active {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.ob-title { font-size: 3rem; color: var(--text-main); margin-bottom: 0.5rem; }
.ob-subtitle { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 4px; margin-bottom: 2.5rem; text-transform: uppercase; }

.ob-form { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.ob-input-wrapper { display: flex; flex-direction: column; text-align: left; width: 300px; }
.ob-input-wrapper label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-light); margin-bottom: 0.5rem; }
.ob-input-wrapper select, 
.ob-input-wrapper input {
    background: transparent; border: 1px solid var(--border-color); color: var(--text-main);
    padding: 14px 20px; border-radius: 8px; font-family: inherit; font-size: 1rem; outline: none;
    transition: border-color 0.4s ease;
}
.ob-input-wrapper select:focus, 
.ob-input-wrapper input:focus { border-color: var(--text-main); }
.ob-input-wrapper select option { background: var(--bg-color); color: var(--text-main); }

.ob-btn {
    background: var(--text-main); color: var(--bg-color); border: none;
    padding: 14px 45px; border-radius: 30px; font-family: inherit; font-size: 1rem; font-weight: 500;
    cursor: pointer; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s; 
    margin-top: 1.5rem; letter-spacing: 1px; text-transform: uppercase;
}
.ob-btn:hover { opacity: 0.9; }
.ob-btn:active { transform: scale(0.92); }

.ob-spinner {
    width: 50px; height: 50px; border: 2px solid var(--border-color);
    border-top-color: var(--text-main); border-radius: 50%;
    animation: spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
    margin: 0 auto 2rem auto;
} 



/* ========================================================================= */
/* --- 降級視圖 / 錯誤狀態 (Error State Fallback) --- */
/* ========================================================================= */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    padding: 40px 20px;
    margin-top: 20px;
    animation: detailsExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.error-img {
    max-width: 320px; 
    width: 100%;
    height: auto;
    margin-bottom: 32px;
    transition: filter 0.6s ease;
    filter: grayscale(0%); 
    
    image-rendering: -moz-crisp-edges;         
    image-rendering: -o-crisp-edges;           
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;                
    -ms-interpolation-mode: nearest-neighbor;  
    
    /* --- 新增：禁止所有互動 --- */
    pointer-events: none;       /* 禁用所有滑鼠事件（無法右鍵呼出菜單、無法點擊） */
    user-select: none;          /* 禁用文本/區塊選取 */
    -webkit-user-select: none;  /* Safari 兼容 */
    -webkit-user-drag: none;    /* 禁用原生圖片拖拽行為 (Webkit核心) */

    mix-blend-mode: multiply;
}

/* 暗色模式下的色彩反轉 $C_{invert} = 1 - C$ */
[data-theme="dark"] .error-img {
    filter: invert(1) hue-rotate(180deg); 
    mix-blend-mode: screen;
}

.error-text {
    font-size: 1.6rem;
    color: var(--text-main);
    line-height: 1.5;
}

.error-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-top: 8px;
}

/* --- 新增：免責聲明文本框 --- */
.ob-disclaimer-box {
    max-width: 450px;
    margin: 0 auto 2rem auto;
    padding: 24px 30px;
    text-align: justify;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ob-disclaimer-box {
    color: var(--text-muted);
}

/* ========================================================================= */
/* --- 18+ 警告框背景：希臘字母漂浮動畫 --- */
/* ========================================================================= */
.greek-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.greek-bg span {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    color: var(--text-muted);
    opacity: 0.15;
    animation: floatLetters 20s linear infinite;
}

@keyframes floatLetters {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(40px, -60px) rotate(120deg) scale(1.1); }
    66% { transform: translate(-30px, 40px) rotate(240deg) scale(0.9); }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

/* 隨機打亂每個字母的位置與動畫週期 */
.greek-bg .g1 { top: 10%; left: 15%; animation-delay: 0s; }
.greek-bg .g2 { top: 75%; left: 20%; animation-delay: -5s; animation-duration: 25s; }
.greek-bg .g3 { top: 40%; left: 80%; animation-delay: -10s; animation-direction: reverse; }
.greek-bg .g4 { top: 85%; left: 75%; animation-delay: -2s; animation-duration: 18s; }
.greek-bg .g5 { top: 20%; left: 60%; animation-delay: -15s; animation-duration: 22s; }
.greek-bg .g6 { top: 50%; left: 10%; animation-delay: -7s; animation-direction: reverse; }
.greek-bg .g7 { top: 5%; left: 45%; animation-delay: -12s; }
.greek-bg .g8 { top: 60%; left: 90%; animation-delay: -4s; animation-duration: 24s; }

/* ========================================================================= */
/* --- 史詩級開場動畫 (Epic Intro Boot Sequence) --- */
/* ========================================================================= */
.epic-intro {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 5000; display: flex; justify-content: center; align-items: center;
    background: var(--bg-color); transition: background 1.5s ease, opacity 1.5s ease;
    overflow: hidden; pointer-events: none;
}
#intro-container {
    position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    perspective: 1000px; /* 啟動 3D 景深，讓單詞迸發更有衝擊力 */
}
.intro-text {
    position: absolute; font-family: 'Playfair Display', serif; font-size: 2.5rem;
    color: var(--text-main); text-align: center; opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.intro-text.active { opacity: 1; }
.intro-letter {
    display: inline-block; transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.intro-blue {
    color: #3b82f6; font-size: 4.5rem; font-weight: bold;
}
.rest {
    display: inline-block; overflow: hidden; max-width: 250px;
    transition: max-width 0.8s ease, opacity 0.5s ease;
    vertical-align: bottom; line-height: 4.5rem;
}
.intro-hide { max-width: 0; opacity: 0; margin-right: 0 !important; }

/* 壓扁與漩渦消失特效 */
.vortex {
    transform: scaleY(0.05) scaleX(0.1) rotate(1080deg) !important;
    opacity: 0 !important;
    transition: transform 1s cubic-bezier(0.5, 0, 0.1, 1), opacity 0.8s ease !important;
}
/* --- 在 .vortex 下方加入這個 甩出來的特效 --- */
.whip-out {
    display: inline-block;
    opacity: 0;
    transform: translateX(80px) skewX(-20deg) scale(0.8);
    animation: whipOutAnim 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes whipOutAnim {
    100% { opacity: 1; transform: translateX(0) skewX(0) scale(1); }
}

/* 燈泡晃動與碎裂特效 */
.intro-bulb {
    font-size: 5rem; opacity: 0; filter: grayscale(100%);
    transition: all 0.5s ease; transform-origin: top center;
}
.bulb-sway {
    animation: swayBulb 1.5s ease-in-out forwards;
}
@keyframes swayBulb {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(25deg); filter: grayscale(100%); }
    50% { transform: rotate(-20deg); filter: grayscale(100%); }
    75% { transform: rotate(10deg); filter: grayscale(0%) drop-shadow(0 0 40px #fde047); }
    100% { transform: rotate(0deg); filter: grayscale(0%) drop-shadow(0 0 60px #fde047); }
}
.bulb-shatter {
    transform: scale(2.5) !important; opacity: 0 !important;
    transition: all 0.15s ease-out !important;
}

/* 意識流單詞 3D 爆炸粒子 */
.intro-particle {
    position: absolute; font-family: 'Inter', sans-serif; font-weight: bold;
    color: rgba(255, 255, 255, 0.85); opacity: 0; pointer-events: none; text-shadow: 0 0 10px rgba(255,255,255,0.5);
    transition: transform 2.5s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 2s ease;
}

/* ========================================================================= */
/* --- 終極移動端適配 (Mobile Responsiveness) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    /* --- 1. 18+ 警告模態框適配 --- */
    #nsfw-modal .ob-section {
        padding: 24px !important;
        width: 90%; /* 避免貼邊 */
    }
    #nsfw-modal .ob-title {
        font-size: 1.6rem !important; /* 縮小警告標題 */
    }
    #nsfw-modal .ob-disclaimer-box {
        font-size: 0.85rem;
        margin-bottom: 1.5rem !important;
    }
    #nsfw-modal .ob-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem;
    }

    /* --- 2. 史詩級開場動畫適配 --- */
    /* 鏡頭一：DICK 縮放 */
    .intro-text {
        font-size: 0.9rem; /* 縮小基礎字號 */
    }
    .intro-blue {
        font-size: 2.2rem; /* 縮小藍色首字母 */
    }
    .rest {
        line-height: 2.2rem; /* 嚴格對齊首字母高度 */
        margin-right: 6px !important; /* 覆蓋 JS 中的 20px 間距，防止撐爆屏幕 */
    }
    
    /* 鏡頭二：Curated Thoughts 甩出特效微調 */
    #txt-curated {
        /* 手機屏幕窄，減少向左平移的距離 */
        transform: translateX(-5px) !important; 
    }
    #txt-designed {
        margin-left: 5px !important;
    }

    /* 鏡頭三：燈泡適配 */
    .intro-bulb {
        font-size: 4rem; /* 燈泡稍微縮小 */
    }

    /* 鏡頭五：終極宣告長句換行與縮放 */
    #step4 {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
        white-space: normal !important; /* 允許長句子自然換行 */
        padding: 0 20px; /* 增加左右安全邊距 */
        line-height: 1.6;
    }
    /* ========================================================================= */
    /* --- 文章版權與引用聲明區塊 (Post Citation Block) --- */
    /* ========================================================================= */
    
}   
/* ========================================================================= */
/* --- 博客文章版權引用區塊 (嚴格還原深藍色設計與 SVG 裁切) --- */
/* ========================================================================= */

/* ========================================================================= */
/* --- 博客文章版權引用區塊 (優化：緊貼文章、寬度對齊、字體精緻化) --- */
/* ========================================================================= */

/* 1. 外層容器 */
.license-container {
    position: relative;
    background-color: #0b1120; 
    border-radius: 4px;
    padding: 24px 30px; /* 減小內邊距，看起來更緊湊精緻 */
    margin-top: 20px; /* 關鍵：縮小頂部距離，緊緊貼住上方文章 */
    width: 100%; /* 確保寬度與文章容器完全一致 */
    box-sizing: border-box; /* 確保 padding 不會撐破寬度 */
    overflow: hidden; 
    font-family: 'Inter', sans-serif;
    color: #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
    text-align: left;
}

/* 2. 標題 */
.license-title {
    font-size: 0.95rem; /* 縮小標題字體 */
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

/* 3. 鏈接 */
.license-blog-link {
    display: inline-block;
    color: #60a5fa;
    font-size: 0.85rem; /* 縮小鏈接字體 */
    text-decoration: none;
    margin-bottom: 20px; /* 縮小與下方 Meta 資訊的距離 */
    position: relative;
    z-index: 2;
    word-break: break-all;
}

.license-blog-link:hover {
    text-decoration: underline;
    color: #93c5fd;
}

/* 4. 底部 Meta 區塊 */
.license-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px; /* 縮小項目間距，防止文字被擠壓換行 */
    position: relative;
    z-index: 2;
    flex-wrap: wrap; /* 空間不足時允許換行，防止破版 */
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px; /* 標籤與數值的距離 */
}

.meta-label {
    color: #94a3b8; 
    font-size: 0.8rem; /* 縮小灰色標籤字體 */
}

.meta-value,
.meta-license-link {
    color: #f8fafc; 
    font-size: 0.85rem; /* 縮小白色數值字體 */
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap; /* 強制文字不換行，解決日期被切斷的問題 */
}

.meta-license-link:hover {
    color: #60a5fa;
}

/* 5. SVG CC 圖標 */
.license-cc-icon {
    position: absolute;
    right: -30px; 
    top: 50%;
    transform: translateY(-50%);
    width: 150px; /* 稍微縮小 SVG 配合卡片高度的減小 */
    height: 150px;
    fill: rgba(255, 255, 255, 0.08); 
    z-index: 1; 
    pointer-events: none;
}

/* ========================================================================= */
/* --- 版權區塊移動端適配 --- */
/* ========================================================================= */
@media (max-width: 768px) {
    .license-container {
        padding: 20px;
        margin-top: 20px;
    }
    .license-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .license-cc-icon {
        width: 120px;
        height: 120px;
        right: -20px;
    }
}

/* ========================================================= */
/* 牛逼鏈接：基礎文本樣式 */
/* ========================================================= */
.magic-link {
    position: relative;
    color: #64748b; /* 深灰色 */
    text-decoration: none !important; /* 絕對不顯示下劃線，!important 防止被主題覆蓋 */
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block; /* 確保提示框定位準確 */
    padding: 0 2px;
}

/* 鼠標懸浮時鏈接本體的變色 */
.magic-link:hover {
    color: #3b82f6; /* 變成科技藍（可自定義） */
}

/* ========================================================================= */
/* (Magic Link)：極簡深灰風格 + 高透明度毛玻璃提示框 🌟 */
/* ========================================================================= */

.magic-link {
    position: relative;
    color: #64748b !important; /* 強制深灰色 */
    text-decoration: none !important; /* 絕對隱藏下劃線 */
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
    display: inline-block;
    padding: 0 2px;
}

/* 鼠標懸浮時鏈接本體略微變亮/變藍，增強互動感 */
.magic-link:hover {
    color: #3b82f6 !important; 
}

/* --- 毛玻璃提示框 (Tooltip) --- */
.magic-link::after {
    /* 自動抓取屬性內容：\A 為換行 */
    content: "Affiliation: " attr(data-owner) "\A URL: " attr(href);
    
    position: absolute;
    bottom: calc(100% + 12px); 
    left: 50%;
    
    /* 初始狀態：隱藏並向下偏移，準備彈出 */
    transform: translateX(-50%) translateY(10px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* 佈局與字體 */
    width: max-content;
    max-width: 280px; 
    padding: 10px 16px;
    white-space: pre-wrap; 
    word-break: break-all; 
    font-size: 0.75rem;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    z-index: 5000;

    /* 🌟 核心修改：高透明度淺灰色毛玻璃 🌟 */
    background: rgba(240, 240, 240, 0.4); /* 預設高透明淺灰色 */
    color: #1e293b; /* 預設深色文字 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    
    /* Q 彈的物理阻尼動畫 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- 視黑夜或白天情況調整顏色 --- */

/* 1. 白天模式 (Light Mode) 保持輕盈 */
[data-theme="light"] .magic-link::after {
    background: rgba(245, 245, 245, 0.45);
    color: #334155;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 2. 黑夜模式 (Dark Mode) 自動切換為深灰色半透 */
[data-theme="dark"] .magic-link::after {
    background: rgba(45, 45, 45, 0.4); /* 暗色環境下的淺灰色感 */
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- 觸發狀態 --- */
.magic-link:hover::after,
.magic-link:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* 響應式優化：在極窄螢幕下微調寬度 */
@media (max-width: 480px) {
    .magic-link::after {
        max-width: 200px;
        font-size: 0.7rem;
        padding: 8px 12px;
    }
}

/* ========================================================================= */
/* 🛠️ 多功能狀態欄系統 (Status Box System) */
/* ========================================================================= */

/* 1. 基礎容器樣式 (繼承自 tip-box 邏輯) */
.status-box {
    background: var(--hover-bg);
    padding: 16px 20px;
    margin: 1.8em 0;
    border-radius: 0 8px 8px 0;
    position: relative;
    font-size: 0.95rem;
    border-left: 4px solid var(--text-main); /* 預設邊框顏色 */
}

/* 2. 圓圈圖標基礎樣式 */
.status-box::before {
    position: absolute;
    left: -14px;
    top: 12px;
    width: 26px;
    height: 26px;
    background: var(--text-main); /* 圓圈背景依舊隨主題變化 */
    
    /* 🌟 核心修改：強制符號恆定為純白色，不受主題變量影響 */
    color: #ffffff !important; 
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 5;
}

/* 3. 每種狀態的專屬顏色與圖標內容 */

/* 話題 (#) - 藍色 */
.box-topic { border-left-color: #3b82f6 !important; }
.box-topic::before { content: '#'; background: #3b82f6 !important; }

/* 相關 (@) - 青色 */
.box-related { border-left-color: #06b6d4 !important; }
.box-related::before { content: '@'; background: #06b6d4 !important; }

/* 疑問 (?) - 橘黃色 */
.box-question { border-left-color: #f59e0b !important; }
.box-question::before { content: '?'; background: #f59e0b !important; }

/* 極其相關 (&) - 洋紅色 */
.box-urgent { border-left-color: #ec4899 !important; }
.box-urgent::before { content: '&'; background: #ec4899 !important; }

/* 已完成 (☑︎) - 翡翠綠 */
.box-done { border-left-color: #10b981 !important; }
.box-done::before { content: '☑︎'; background: #10b981 !important; font-size: 0.75rem; }

/* 對的 (✓) - 鮮綠色 */
.box-right { border-left-color: #22c55e !important; }
.box-right::before { content: '✓'; background: #22c55e !important; }

/* 錯的 (✗) - 鮮紅色 */
.box-wrong { border-left-color: #ef4444 !important; }
.box-wrong::before { content: '✗'; background: #ef4444 !important; }

/* 爭議 (⍻)  */
.box-dispute { border-left-color: #f6a45c !important; }
.box-dispute::before { content: '⍻'; background: #f6a45c !important; }

/* 觀察 (𓂀) - 金黃色 */
.box-view { border-left-color: #11719a !important; }
.box-view::before { content: '𓂀'; background: #11719a !important; font-size: 1rem; }

/* 未完成 (✎) - 灰藍色 */
.box-todo { border-left-color: #64748b !important; }
.box-todo::before { content: '✎'; background: #64748b !important; font-size: 0.9rem; }

/* 段落三兄弟 (§, ¶, ❡) - 沉穩深灰色 */
.box-para-sec, .box-para-pil, .box-para-fle { border-left-color: #475569 !important; }
.box-para-sec::before { content: '§'; background: #475569 !important; }
.box-para-pil::before { content: '¶'; background: #475569 !important; }
.box-para-fle::before { content: '❡'; background: #475569 !important; }

/* ========================================================================= */
/* --- Dashboard 新增組件樣式 (Quotes, Activity Graph, File Tree) --- */
/* ========================================================================= */

/* 名言輪播 (Quotes Carousel) */
.quote-carousel {
    height: 160px; /* 🌟 強制恆定高度，防止切換名言時畫面跳動 */
    padding: 24px 40px;
    margin-bottom: 40px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .quote-carousel { height: 220px; padding: 20px; } /* 手機端因換行多，加高 */
}
.quote-carousel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15); /* 淡淡的科技藍光暈 */
}
.quote-content {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--text-main);
    transition: opacity 0.8s ease;
}

/* 時間線網格圖 (Activity Graph) */
.activity-section { margin-bottom: 40px; padding: 30px; }
.activity-graph-wrapper { overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.activity-graph {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    width: max-content;
}
.activity-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #ebedf0; /* 淺色模式無數據 */
    transition: transform 0.2s;
    position: relative;
}
.activity-cell:hover { transform: scale(1.2); z-index: 10; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
[data-theme="dark"] .activity-cell { background-color: #161b22; } /* 暗色模式無數據 */
/* 活躍度顏色階層 */
.activity-cell[data-level="1"] { background-color: #9be9a8; }
.activity-cell[data-level="2"] { background-color: #40c463; }
.activity-cell[data-level="3"] { background-color: #30a14e; }
.activity-cell[data-level="4"] { background-color: #216e39; }
[data-theme="dark"] .activity-cell[data-level="1"] { background-color: #0e4429; }
[data-theme="dark"] .activity-cell[data-level="2"] { background-color: #006d32; }
[data-theme="dark"] .activity-cell[data-level="3"] { background-color: #26a641; }
[data-theme="dark"] .activity-cell[data-level="4"] { background-color: #39d353; }

/* 檔案總管 (File Tree Explorer) */
.explorer-section { padding: 30px; margin-bottom: 40px; }
.file-tree { font-family: 'Inter', sans-serif; font-size: 0.95rem; }

.ft-item { margin: 4px 0; }
.ft-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    cursor: pointer; color: var(--text-main);
    transition: background 0.2s;
}
.ft-header:hover { background: var(--hover-bg); }
.ft-header.active-filter { background: rgba(59, 130, 246, 0.1); color: #3b82f6; font-weight: 600; }

.ft-icon {
    width: 20px; height: 20px;
    flex-shrink: 0; color: #737373; /* 高級灰檔案夾顏色 */
    transition: transform 0.3s ease;
}
.ft-header.expanded .ft-icon { transform: rotate(90deg); }

/* 核心：0fr -> 1fr 完美流暢展開動畫 */
.ft-children-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ft-children-wrapper.expanded { grid-template-rows: 1fr; }
.ft-children-inner {
    overflow: hidden;
    padding-left: 26px; /* 縮進 */
    margin-left: 20px;
    border-left: 1px solid var(--border-color);
}

.ft-doc {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px;
    cursor: pointer; color: var(--text-muted);
    text-decoration: none; transition: all 0.2s;
}
.ft-doc:hover { background: var(--hover-bg); color: #3b82f6; transform: translateX(4px); }
.ft-doc-icon { width: 16px; height: 16px; color: #9ca3af; }

.view-all-btn {
    font-size: 1.1rem; padding: 16px 50px; background: #003153; 
    box-shadow: 0 10px 20px rgba(0, 49, 83, 0.3);
}
[data-theme="dark"] .view-all-btn { background: #3b82f6; box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2); }

/* ========================================================================= */
/* 📁 檔案樹：文字截斷與懸浮毛玻璃提示框 (File Tree Tooltip) */
/* ========================================================================= */

.ft-header, .ft-doc {
    position: relative; /* 確保提示框以此為基準定位 */
}

/* 核心：文字超過一行自動變 ... */
.ft-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* 佔據 flex 容器的剩餘空間 */
    min-width: 0; /* 允許 flex 內部文字縮短溢出 */
}

/* --- 動態毛玻璃提示框 (Tooltip) --- */
.ft-tooltip-target::after {
    content: attr(data-fullname); /* 自動抓取 data-fullname 屬性值 */
    position: absolute;
    bottom: calc(100% + 8px); /* 位於文字上方 */
    left: 50%;
    
    /* 初始狀態：隱藏、縮小並向下偏移 */
    transform: translateX(-50%) translateY(10px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    width: max-content;
    max-width: 260px; /* 防止提示框過長撐破畫面 */
    padding: 8px 12px;
    white-space: normal;
    word-break: break-all;
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    z-index: 5000;
    
    /* 🌟 高透明度淺灰色毛玻璃設計 🌟 */
    background: rgba(240, 240, 240, 0.4);
    color: #1e293b;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Q 彈動畫 */
}

/* 白天模式適配 */
[data-theme="light"] .ft-tooltip-target::after {
    background: rgba(245, 245, 245, 0.45);
    color: #334155;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 黑夜模式適配 */
[data-theme="dark"] .ft-tooltip-target::after {
    background: rgba(45, 45, 45, 0.4);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 觸發狀態：只有當 JS 判定文字溢出並加上 .show-tooltip 類別時，才允許觸發懸浮框 */
.ft-tooltip-target.show-tooltip:hover::after,
.ft-tooltip-target.show-tooltip:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ========================================================================= */
/* --- 專屬 404 錯誤頁面 UI (SANGUAI INC. Error Page) --- */
/* ========================================================================= */
.error-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    background: var(--bg-color); /* 對齊全局底色 */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    padding-bottom: 50px;
    font-family: 'Inter', sans-serif;
    animation: detailsExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 頂部 SANGUAI INC. 藝術字 */
.ep-header {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    padding: 25px 0;
    color: var(--text-main);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 深藍色提示橫條 */
.ep-subheader {
    width: 100%;
    background-color: #004d99; /* 科技深藍色 */
    color: #ffffff;
    text-align: center;
    padding: 12px 0;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 1px;
}

/* 像素化小狐狸 */
.ep-fox {
    width: 200px;
    margin: 50px 0 30px 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
}
[data-theme="dark"] .ep-fox {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
}

.ep-message-title {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 12px;
}

.ep-message-badge {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-main);
    padding: 16px 30px;
    border: 1px solid var(--border-color);
    border-left: 4px solid #ef4444; /* 左側鮮紅色警戒指示線 */
    border-radius: 8px; /* 俐落的微圓角 */
    font-size: 1.15rem;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.08); /* 淡淡的危險紅色光暈 */
    letter-spacing: 0.5px;
    display: inline-block;
    max-width: 90%;
}

/* 暗黑模式下的錯誤框 */
[data-theme="dark"] .ep-message-badge {
    background: rgba(239, 68, 68, 0.05); /* 暗色下透出一點點紅 */
    border-color: rgba(239, 68, 68, 0.2);
    border-left-color: #f87171;
}

/* 針對 <em> 標籤內的 HTTP 404 Not Found 套用代碼字體 */
.ep-message-badge em {
    font-family: monospace; 
    font-style: normal;
    color: #ef4444;
    font-weight: 600;
    margin-left: 5px;
}

/* 重定向文本 */
.ep-redirect {
    color: #004d99;
    font-size: 1.1rem;
    font-weight: 500;
}
[data-theme="dark"] .ep-redirect {
    color: #60a5fa;
}

@media (max-width: 768px) {
    .error-page-wrapper {
        border-radius: 12px;
        padding-bottom: 30px;
        border: none; /* 手機端可選去掉外邊框，讓畫面更乾淨 */
    }
    
    .ep-header {
        font-size: 2.2rem; /* 縮小藝術字標題 */
        padding: 20px 0;
    }
    
    .ep-subheader {
        font-size: 0.95rem; /* 縮小藍色橫條字體 */
        padding: 10px 0;
    }
    
    .ep-fox {
        width: 150px; /* 縮小狐狸 */
        margin: 35px 0 20px 0;
    }
    
    .ep-message-badge {
        font-size: 0.95rem; /* 縮小錯誤框字體 */
        padding: 12px 20px;
        margin-bottom: 30px;
        width: 85%; /* 防止貼邊 */
    }
    
    .ep-redirect {
        font-size: 0.95rem;
    }
}

/* ========================================================================= */
/* 📸 文章多媒體系統：圖片、影片 */
/* ========================================================================= */

/* ========================================================================= */
/* 🖼️ 圖片裁切與全螢幕放大系統 (Image Lightbox System) */
/* ========================================================================= */

/* 1. 文章內圖片：自動裁切 (防長圖霸屏) */
.markdown-body img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 450px; /* 🌟 限制最大高度，超長圖會被自動裁切 */
    object-fit: cover; 
    object-position: top center; /* 盡量保留長圖的上半部（例如人物臉部） */
    border-radius: 12px;
    margin: 2.5em auto;
    cursor: zoom-in; /* 滑鼠變成放大鏡 */
    box-shadow: var(--shadow-soft);
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease, box-shadow 0.5s ease;
}

/* 優雅的懸浮交互 */
.markdown-body img:hover {
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
[data-theme="dark"] .markdown-body img:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* 2. 獨立的全螢幕毛玻璃遮罩 */
.img-lightbox-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.65); /* 半透明黑底 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    cursor: zoom-out;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
}

.img-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 3. 放大後的高清原圖 */
.img-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain; /* 確保全圖完整顯示，絕不變形或裁切 */
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    
    /* 初始狀態微縮小，製造優雅的彈出感 */
    transform: scale(0.95) translateY(15px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-lightbox-overlay.active .img-lightbox-img {
    transform: scale(1) translateY(0);
    opacity: 1;
}



/* ========================================================================= */
/* 🌀 史詩開場：3D 文字沖刷特效 (The Wash-out Effect) */
/* ========================================================================= */
.particle-wash {
    position: absolute;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    /* 核心：從中心點向螢幕沖刷 */
    transform: translate3d(0, 0, -1000px); 
    animation: textWashAnim 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes textWashAnim {
    0% { transform: translate3d(0, 0, -500px) scale(0.5); opacity: 0; filter: blur(10px); }
    20% { opacity: 1; filter: blur(0px); }
    100% { transform: translate3d(var(--tx), var(--ty), 1000px) scale(3); opacity: 0; filter: blur(5px); }
}

/* ========================================================================= */
/* 🏰 CYGNUS  (No Bold, Elegant Serif Italic) */
/* ========================================================================= */
.cygnus-card {
    background: var(--glass-bg);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid var(--glass-border);
    padding: 40px 60px;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
    
    /* 🌟 核心修正：全局鎖死為優雅的 Times New Roman，且絕對不加粗 */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400 !important; 
    color: var(--text-main);
}
[data-theme="dark"] .cygnus-card {
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.ob-section.active .cygnus-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 頂部標題 */
.cygnus-header {
    text-align: center;
    font-size: 1.25rem;
    font-style: italic; /* 斜體襯線 */
    font-weight: 400 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* 極簡分隔線 */
.cygnus-divider {
    height: 1px;
    width: 100%;
    background: var(--border-color);
    margin: 20px 0;
    opacity: 0.6;
}

/* 中央排版 */
.cygnus-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 10px 0;
}

.cygnus-logo-container {
    flex-shrink: 0;
}
.cygnus-logo {
    max-width: 140px;
    height: auto;
    display: block;
    transition: filter 0.3s;
}
[data-theme="dark"] .cygnus-logo {
    filter: invert(1) hue-rotate(180deg);
}

/* 右側文字資訊區 */
.cygnus-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cygnus-title {
    font-size: 2.2rem;
    font-weight: 400 !important; /* 拔除加粗 */
    letter-spacing: 3px;
}
.cygnus-reading {
    font-size: 1.5rem;
    font-style: italic; /* 斜體襯線 */
    font-weight: 400 !important;
    display: flex;
    align-items: baseline;
    opacity: 0.9;
}

/* 加載點動畫 (保持不抖動佈局) */
.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
    display: inline-block;
    width: 1.5em;
    text-align: left;
}
@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* 底部隨機文案 */
.cygnus-footer {
    text-align: center;
    font-size: 1.05rem;
    font-style: italic; /* 🌟 讓警示/嘲諷文案全部以精緻的斜體襯線呈現 */
    font-weight: 400 !important;
    line-height: 1.6;
    max-width: 550px;
    margin: 0 auto;
    opacity: 0.85;
}

/* 移動端垂直佈局還原 */
@media (max-width: 768px) {
    .cygnus-card { padding: 30px 20px; }
    .cygnus-header { font-size: 1.05rem; }
    .cygnus-body { flex-direction: column; gap: 20px; text-align: center; }
    .cygnus-logo { max-width: 110px; margin: 0 auto; }
    .cygnus-info { align-items: center; gap: 8px; }
    .cygnus-title { font-size: 1.8rem; }
    .cygnus-reading { font-size: 1.3rem; justify-content: center; }
    .cygnus-footer { font-size: 0.95rem; }
}

/* ========================================================================= */
/* 📊 高級網絡活動頁面 (Advanced Activity & Contributions) */
/* ========================================================================= */

.clickable-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.clickable-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .clickable-card:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); }

.view-details-text {
    float: right; font-size: 0.75rem; color: var(--text-light);
    letter-spacing: 0.5px; text-transform: none; font-weight: normal;
    transition: color 0.3s, transform 0.3s;
}
.clickable-card:hover .view-details-text { color: #3b82f6; transform: translateX(-4px); }

/* --- 1. 日曆優化設計 (GitHub 質感) --- */
.adv-calendar-layout { display: flex; gap: 10px; padding: 10px 0; }
.adv-calendar-inner { 
    padding: 16px; 
    background: var(--glass-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    display: inline-block;
    box-shadow: var(--shadow-soft);
}
.adv-calendar-scroll {
    overflow-x: auto; padding-bottom: 15px; scrollbar-width: thin; flex: 1;
}
.adv-calendar-x {
    position: relative; height: 24px; font-size: 0.75rem;
    color: var(--text-light); font-weight: 500;
}
.calendar-month-label { position: absolute; bottom: 4px; }
.adv-calendar-y {
    display: flex; flex-direction: column; justify-content: space-between;
    padding-top: 40px; padding-bottom: 16px; margin-right: 8px;
    font-size: 0.7rem; color: var(--text-light); font-weight: 500;
}
.adv-calendar-grid {
    display: grid; 
    grid-template-rows: repeat(7, 12px); /* 網格高度精緻化 */
    grid-auto-flow: column; 
    gap: 4px; 
}
.activity-cell {
    width: 12px; height: 12px; 
    border-radius: 3px;
    background-color: #ebedf0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.activity-cell:hover { transform: scale(1.3); z-index: 10; border: 1px solid rgba(0,0,0,0.1); }
[data-theme="dark"] .activity-cell { background-color: #161b22; }

/* 日曆方塊出場彈出動畫 */
.cell-animate {
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- 2. 總佔比堆疊條狀圖 (Stacked Bar) --- */
.stacked-bar-container { margin-bottom: 24px; }
.stacked-bar { 
    display: flex; 
    width: 100%; 
    height: 14px; 
    border-radius: 10px; 
    overflow: hidden; 
    background: var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.stacked-bar-segment { 
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); 
    height: 100%; 
    position: relative;
}
.stacked-bar-segment:hover { filter: brightness(1.1); }
.stacked-bar-segment:not(:last-child) { border-right: 2px solid var(--bg-color); } /* 片段間的區隔線 */

/* --- 3. 作者數據卡片網格 (Legend Grid) --- */
.author-legend-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 16px; 
}
.author-legend-item { 
    display: flex; align-items: flex-start; gap: 12px; 
    padding: 16px; 
    background: var(--glass-bg); 
    border-radius: 12px; 
    border: 1px solid var(--glass-border); 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s, box-shadow 0.3s;
    box-shadow: var(--shadow-soft);
}
.author-legend-item:hover { 
    transform: translateY(-4px); 
    background: var(--hover-bg); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.06); 
}
[data-theme="dark"] .author-legend-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.4); }

.legend-dot { 
    width: 14px; height: 14px; 
    border-radius: 50%; 
    margin-top: 4px; 
    flex-shrink: 0; 
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);
}
.legend-info { display: flex; flex-direction: column; width: 100%; }
.legend-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px; }
.legend-name { font-weight: 600; color: var(--text-main); font-size: 1.05rem; }
.legend-pct { font-weight: 700; font-size: 1.05rem; font-family: 'Inter', monospace; }
.legend-meta { font-size: 0.85rem; color: var(--text-muted); }

/* --- 移動端適配 --- */
@media (max-width: 768px) {
    .author-legend-grid { grid-template-columns: 1fr; }
    .author-legend-item { padding: 14px; }
    .stacked-bar { height: 12px; }
}

/* ========================================================================= */
/* 💀 系統異常層：MEOWSTAR & 認知濾網崩壞 (ULTIMATE EDITION) */
/* ========================================================================= */

.abyss-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 99999; 
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; touch-action: none; user-select: none;
}

/* --- Loop A: 紫色泡狀物 (Gooey Metaballs) --- */
.gooey-filter {
    width: 100%; height: 100%; position: absolute;
    background: #000;
    filter: blur(25px) contrast(50); /* 經典黏液融合濾鏡 */
    transition: transform 0.1s;
}
.blob {
    position: absolute; top: 50%; left: 50%;
    background: #6b21a8; /* 深紫色 */
    border-radius: 50%;
}
.blob-core { width: 150px; height: 150px; margin: -75px 0 0 -75px; background: #4c1d95; animation: throb 4s infinite alternate; }
.blob-1 { width: 180px; height: 180px; margin: -90px 0 0 -90px; animation: orbitBlob1 6s infinite linear; }
.blob-2 { width: 120px; height: 120px; margin: -60px 0 0 -60px; animation: orbitBlob2 4s infinite linear reverse; }
.blob-3 { width: 220px; height: 220px; margin: -110px 0 0 -110px; animation: orbitBlob3 8s infinite ease-in-out; background: #3b0764; }

@keyframes throb { 0% { transform: scale(0.8); } 100% { transform: scale(1.3); } }
@keyframes orbitBlob1 { 0% { transform: rotate(0deg) translateX(80px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); } }
@keyframes orbitBlob2 { 0% { transform: rotate(0deg) translateY(120px) rotate(0deg); } 100% { transform: rotate(360deg) translateY(120px) rotate(-360deg); } }
@keyframes orbitBlob3 { 0% { transform: translate(-100px, 50px) scale(0.5); } 50% { transform: translate(100px, -50px) scale(1.2); } 100% { transform: translate(-100px, 50px) scale(0.5); } }

/* 長按時的顫抖 */
.blobs-tremble { animation: insaneTremble 0.1s infinite; filter: blur(30px) contrast(80) hue-rotate(45deg); background: #1a0000; }
@keyframes insaneTremble { 0% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 100% { transform: translate(-5px, -5px); } }

/* 粒子爆炸 */
#explosion-container { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.abyss-particle {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; background: #c084fc; border-radius: 50%;
    box-shadow: 0 0 10px #a855f7;
    animation: blastOut 1s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes blastOut {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; background: #000; }
}

/* ========================================================================= */
/* 👁️ THE HYPER EYE (究極觀測者之眼) */
/* ========================================================================= */
#pixel-eye-stage { position: relative; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; z-index: 100; }
.hyper-eye-container {
    width: 200px; height: 200px;
    transform: scaleY(0.1); opacity: 0;
    filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.5));
}

/* 眼睛的瘋狂掃視 */
@keyframes hyperEyeScan {
    0% { transform: scaleY(0.1); opacity: 0; }
    5% { transform: scaleY(1); opacity: 1; }
    15% { transform: scaleY(1) translateX(-30px) rotate(-10deg); } /* 左瞥 */
    20% { transform: scaleY(1) translateX(-30px) rotate(-10deg) scaleY(0.2); } /* 眨眼 */
    25% { transform: scaleY(1) translateX(-30px) rotate(-10deg); }
    40% { transform: scaleY(1) translateX(40px) rotate(15deg); } /* 右瞪 */
    60% { transform: scaleY(1) translateX(-15px) rotate(-5deg); }
    80% { transform: scaleY(1) translateX(0) scale(1.3); filter: drop-shadow(0 0 50px rgba(255,0,0,0.8)); } /* 正視逼近 */
    100% { transform: scaleY(1) translateX(0) scale(1.3); opacity: 1; filter: drop-shadow(0 0 60px rgba(255,0,0,1)); }
}

/* 眼白與血絲的脈動 */
.eye-sclera { animation: scleraTwitch 0.2s infinite alternate; }
@keyframes scleraTwitch { 0% { fill: #fff; } 100% { fill: #fee2e2; } }

.eye-veins path {
    stroke-dasharray: 10 5;
    animation: veinsPulse 2s infinite linear;
}
@keyframes veinsPulse { 0% { stroke-dashoffset: 0; opacity: 0.5; } 50% { opacity: 1; stroke-width: 3; } 100% { stroke-dashoffset: 30; opacity: 0.5; } }

/* 虹膜與豎瞳的恐怖收縮 */
.eye-iris { animation: irisDilate 3s infinite alternate ease-in-out; transform-origin: 100px 100px; }
@keyframes irisDilate { 0% { transform: scale(1); } 100% { transform: scale(1.15); fill: #991b1b; } }

.eye-pupil { transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: 100px 100px; }
/* 觸發深紅盯視 */
.eye-pupil.hyper-stare { 
    fill: #000; stroke: #ff0000; stroke-width: 2;
    transform: scaleX(0.2) scaleY(1.4); /* 瞳孔縮成極細的豎線 */
    animation: pupilTremble 0.1s infinite;
}
@keyframes pupilTremble { 0% { transform: scaleX(0.2) scaleY(1.4) translateX(-1px); } 100% { transform: scaleX(0.2) scaleY(1.4) translateX(1px); } }

/* 血淚與軌道 */
.blood-tear {
    position: absolute; top: 150px; left: 146px;
    width: 8px; height: 8px; background: #dc2626;
    box-shadow: -8px 0 0 #dc2626, 8px 0 0 #dc2626, 0 -8px 0 #dc2626, 0 8px 0 #dc2626;
}
@keyframes tearOrbit {
    0% { transform: translate(0, 0); opacity: 1; }
    20% { transform: translate(0, 80px); } 
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); opacity: 0; }
}

/* 血色鎖鏈射出 */
.blood-chain { position: absolute; top: -50px; left: -50px; width: 120%; height: 120%; filter: drop-shadow(0 0 12px #dc2626); }
@keyframes chainShoot {
    0% { stroke-dasharray: 0 2000; stroke-dashoffset: 0; }
    100% { stroke-dasharray: 2000 2000; stroke-dashoffset: 0; }
}

/* 暴力拖拽與畫布撕裂 */
@keyframes draggedToHell {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100vw, -100vh) rotate(45deg) scale(0.5); opacity: 0; }
}
.canvas-torn {
    animation: brutalTear 0.6s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    transform-origin: top left;
}
@keyframes brutalTear {
    0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    40% { clip-path: polygon(0 0, 100% 30%, 80% 100%, 0 100%); background: #2a0000; }
    100% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 0; filter: drop-shadow(20px 0 0 #f00); }
}

/* ========================================================================= */
/* 💀 狂亂深淵場景 (觸手與骷髏的絕望之舞) */
/* ========================================================================= */

/* 1. 狂亂觸手 (Mad Tentacles) */
.mad-tentacles {
    position: absolute; bottom: -50px; left: 0; width: 100%; height: 350px;
    pointer-events: none; z-index: 1;
}
.mad-t {
    transform-origin: bottom center;
    animation: tentacleThrash 3s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.mt-1 { animation-duration: 2.5s; }
.mt-2 { animation-duration: 3.2s; animation-delay: -1s; filter: drop-shadow(0 0 10px #f00); }
.mt-3 { animation-duration: 2.8s; animation-delay: -2s; }

@keyframes tentacleThrash {
    0% { transform: rotate(-15deg) skewX(5deg); stroke-dasharray: 400; stroke-dashoffset: 0; }
    50% { transform: rotate(10deg) skewX(-10deg); }
    100% { transform: rotate(25deg) skewX(15deg); stroke-dasharray: 400; stroke-dashoffset: 50; }
}

/* 2. 深淵骷髏群 (Abyss Skulls) */
.abyss-skulls { position: absolute; bottom: 10vh; width: 100%; display: flex; justify-content: space-around; z-index: 2; pointer-events: none; }
.skull { width: 120px; height: 120px; opacity: 0; transform: translateY(100px); }

.sk-1 { animation: skullRise 6s infinite ease-in-out; }
.sk-2 { animation: skullRise 8s infinite ease-in-out; animation-delay: -3s; width: 150px; height: 150px; }

@keyframes skullRise {
    0% { transform: translateY(100px) rotate(-10deg); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translateY(-50px) rotate(5deg) scale(1.1); opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(-150px) rotate(15deg) scale(0.9); opacity: 0; filter: blur(5px); }
}

/* 骷髏下顎脫臼動畫 */
.skull-jaw {
    transform-origin: 50px 70px;
    animation: jawDrop 3s infinite alternate cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes jawDrop {
    0%, 30% { transform: translateY(0) rotate(0deg); }
    70%, 100% { transform: translateY(15px) rotate(-5deg); } /* 下顎掉落並歪斜 */
}

/* 骷髏紅眼閃爍 */
.skull-eye-glow { animation: skullEyePulse 0.1s infinite alternate; }
@keyframes skullEyePulse { 0% { opacity: 0.5; r: 5; } 100% { opacity: 1; r: 8; filter: drop-shadow(0 0 10px #f00); } }

/* 倒插十字架 */
.inverted-cross-scene { position: absolute; bottom: 50px; right: 10vw; width: 150px; height: 250px; z-index: 0; }
.cross-vertical { position: absolute; top: 0; left: 70px; width: 10px; height: 200px; background: #2a0000; box-shadow: 0 0 15px #f00; }
.cross-horizontal { position: absolute; top: 120px; left: 20px; width: 110px; height: 10px; background: #2a0000; box-shadow: 0 0 15px #f00; }

/* 破碎光環 */
.shattered-halo { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; }
.halo-fragment { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fef08a; box-shadow: 0 0 30px #eab308; opacity: 0.3; }
.f1 { clip-path: polygon(0 0, 50% 50%, 100% 0); transform: rotate(20deg); animation: floatH 4s infinite alternate; }
.f2 { clip-path: polygon(100% 0, 50% 50%, 100% 100%); transform: rotate(-15deg) translate(20px, 10px); animation: floatH 5s infinite alternate-reverse; }
.f3 { clip-path: polygon(0 100%, 50% 50%, 0 0); transform: rotate(45deg) translate(-30px, -20px); animation: floatH 6s infinite alternate; border-color: #713f12; }
@keyframes floatH { to { transform: translateY(20px) rotate(5deg); } }

/* ========================================================================= */
/* ⛪ 深淵宗教主題 (Abyss Theme Overrides) */
/* ========================================================================= */
[data-theme="abyss"] {
    --bg-color: #050000;
    --text-main: #fca5a5;
    --text-muted: #991b1b;
    --text-light: #7f1d1d;
    --border-color: #450a0a;
    --glass-bg: rgba(20, 0, 0, 0.85);
    --glass-border: rgba(220, 38, 38, 0.2);
    --shadow-soft: 0 10px 40px rgba(220, 38, 38, 0.15);
    --hover-bg: rgba(153, 27, 27, 0.2);
}

/* 佈景裝飾 */
#abyss-decor { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; }
.abyss-ground { position: absolute; bottom: 0; width: 100%; height: 30vh; background: linear-gradient(to top, #1a0000, transparent); }

/* 破碎光環 */
.shattered-halo { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; }
.halo-fragment { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fef08a; box-shadow: 0 0 30px #eab308; opacity: 0.3; }
.f1 { clip-path: polygon(0 0, 50% 50%, 100% 0); transform: rotate(20deg); animation: floatH 4s infinite alternate; }
.f2 { clip-path: polygon(100% 0, 50% 50%, 100% 100%); transform: rotate(-15deg) translate(20px, 10px); animation: floatH 5s infinite alternate-reverse; }
.f3 { clip-path: polygon(0 100%, 50% 50%, 0 0); transform: rotate(45deg) translate(-30px, -20px); animation: floatH 6s infinite alternate; border-color: #713f12; }
@keyframes floatH { to { transform: translateY(20px) rotate(5deg); } }

/* 倒插十字與觸手 */
.inverted-cross-scene { position: absolute; bottom: 50px; right: 10vw; width: 150px; height: 250px; }
.cross-vertical { position: absolute; top: 0; left: 70px; width: 10px; height: 200px; background: #2a0000; box-shadow: 0 0 15px #f00; }
.cross-horizontal { position: absolute; top: 120px; left: 20px; width: 110px; height: 10px; background: #2a0000; box-shadow: 0 0 15px #f00; }
.tentacles { position: absolute; bottom: -20px; left: -50px; width: 250px; height: 150px; }
.tentacle { animation: writhe 3s infinite alternate ease-in-out; }
.t2 { animation-delay: -1.5s; stroke-width: 8; stroke: #1a0000; }
@keyframes writhe { 0% { stroke-dasharray: 200; stroke-dashoffset: 0; } 100% { stroke-dasharray: 200; stroke-dashoffset: 50; } }

/* UI Glitch 干擾 */
.abyss-glitch-text {
    position: relative; color: #fff !important; font-weight: 900; letter-spacing: -1px;
    animation: textFlicker 0.1s infinite !important;
}
.abyss-glitch-text::before, .abyss-glitch-text::after {
    content: attr(data-orig); position: absolute; top: 0; left: 0; width: 100%; opacity: 0.8;
}
.abyss-glitch-text::before { left: 2px; color: #f00; z-index: -1; animation: glitchSkew 0.3s infinite linear alternate-reverse; }
.abyss-glitch-text::after { left: -2px; color: #00f; z-index: -2; animation: glitchSkew 0.4s infinite linear alternate; }

@keyframes textFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes glitchSkew { 0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 1px); } 20% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -1px); } 100% { clip-path: inset(40% 0 40% 0); transform: translate(0, 0); } }

/* ========================================================================= */
/* ❓ 支線：認知濾網重置 (?) */
/* ========================================================================= */

#glitch-dialog-box {
    background: #000; border: 2px solid #500; border-left: 10px solid #f00;
    padding: 30px 50px; font-family: monospace; box-shadow: 0 0 50px rgba(255,0,0,0.5);
    transform: scale(0);
}
.dialog-speaker { color: #f00; font-size: 1.2rem; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 5px; animation: textFlicker 0.2s infinite; }
.dialog-text { font-size: 2.5rem; color: #fff; font-weight: bold; }

@keyframes dialogPop { 0% { transform: scale(0) skew(40deg); } 70% { transform: scale(1.1) skew(-10deg); } 100% { transform: scale(1) skew(0deg); } }

/* 血肉席捲 */
#blood-sweep {
    position: absolute; top: -100vh; left: 0; width: 100vw; height: 200vh;
    background: linear-gradient(to bottom, transparent 0%, #dc2626 40%, #7f1d1d 50%, #450a0a 60%, #000 100%);
    z-index: 10;
}
@keyframes bloodTsunami { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } }

/* 像素溶解歸零 */
@keyframes pixelatedDissolve {
    0% { opacity: 1; filter: contrast(1) blur(0px); transform: scale(1); }
    50% { opacity: 1; filter: contrast(10) blur(10px); transform: scale(1.05); }
    100% { opacity: 0; filter: contrast(20) blur(20px); transform: scale(1.1); }
}

/* ========================================================================= */
/* 🚫 18+ 警告模態框 (NSFW Modal) */
/* ========================================================================= */

.nsfw-modal-box {
    position: relative;
    z-index: 10;
    padding: 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

[data-theme="dark"] .nsfw-modal-box {
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.nsfw-btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap; /* 螢幕過窄時允許按鈕換行，防擠壓 */
}

.nsfw-btn-group .ob-btn {
    padding: 12px 30px;
    margin-top: 0;
    flex: 1; /* 讓兩個按鈕等寬 */
    min-width: 120px;
}

/* --- 移動端完美適配 --- */
@media (max-width: 768px) {
    .nsfw-modal-box {
        padding: 24px 20px;
        width: 85%; /* 防止太貼邊緣 */
    }
    
    .nsfw-modal-box .ob-title {
        font-size: 1.6rem !important; /* 縮小標題 */
    }
    
    .nsfw-modal-box .ob-disclaimer-box {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 1.5rem !important;
    }
    
    .nsfw-btn-group {
        gap: 10px;
    }
    
    .nsfw-btn-group .ob-btn {
        padding: 10px 15px !important;
        font-size: 0.85rem;
    }
}

/* ========================================================================= */
/* 📅 日曆活動詳細視圖 (Activity Details Modal) */
/* ========================================================================= */

.activity-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* 暗化背景，凸顯彈窗 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4000; /* 確保蓋過導航欄和其他元素 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 動畫初始狀態 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.activity-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.activity-modal-content {
    width: 90%;
    max-width: 500px; /* 限制最大寬度，保持閱讀舒適度 */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    padding: 30px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    
    /* 內容動畫初始狀態 */
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .activity-modal-content {
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

.activity-modal-overlay.active .activity-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.activity-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.activity-modal-header h3 {
    margin: 0;
    font-size: 1.6rem;
    color: var(--text-main);
}

/* 滾動列表設定 */
.activity-modal-list {
    overflow-y: auto;
    padding-right: 10px; /* 留出滾動條空間 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin; /* Firefox 滾動條變細 */
}

/* Chrome/Safari 滾動條美化 */
.activity-modal-list::-webkit-scrollbar {
    width: 6px;
}
.activity-modal-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.activity-list-item {
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--hover-bg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 懸浮時的平移與科技藍發光效果 */
.activity-list-item:hover {
    transform: translateX(6px);
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);
}

.activity-list-item-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-main);
    line-height: 1.4;
}

.activity-list-item-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: 'Inter', monospace; /* 讓字數與作者有數據感 */
}

/* ========================================================================= */
/* --- 📱 移動端適配：底部滑出面板 (Bottom Sheet) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    .activity-modal-overlay {
        align-items: flex-end; /* 讓內容沈底 */
    }
    
    .activity-modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0; /* 只有上方圓角 */
        padding: 24px 20px 40px 20px; /* 底部多留點白，防 iOS Home 條遮擋 */
        
        /* 變更動畫為從底部滑入 */
        transform: translateY(100%);
    }

    .activity-modal-overlay.active .activity-modal-content {
        transform: translateY(0);
    }
}

/* ========================================================================= */
/* ⬛ ECHO THEME: Futuristic Literary & Research Archive */
/* ========================================================================= */

.echo-theme {
    --e-bg: #0B0D10;
    --e-surface: #11151A;
    --e-text: #E8EDF2;
    --e-muted: #94A0AE;
    --e-accent: #7DA2FF;
    --e-border: #1A2026;
    
    --e-font-sans: 'Inter', sans-serif;
    --e-font-mono: 'JetBrains Mono', monospace;

    background-color: var(--e-bg);
    color: var(--e-text);
    font-family: var(--e-font-sans);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.echo-theme * { box-sizing: border-box; }
.echo-theme a { text-decoration: none; color: inherit; }

.echo-container {
    max-width: 1080px; /* 偏窄的閱讀寬度 */
    margin: 0 auto;
    padding: 80px 40px;
}

/* --- 導航列 --- */
.echo-nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--e-border);
    padding-bottom: 24px;
    margin-bottom: 80px;
}
.echo-logo { 
    font-family: var(--e-font-sans); 
    font-size: 1.25rem; 
    font-weight: 500; 
    letter-spacing: -0.5px; 
}
.echo-links { display: flex; gap: 32px; font-size: 0.85rem; color: var(--e-muted); }
.echo-links a { transition: color 0.3s ease; }
.echo-links a:hover, .echo-links a.active { color: var(--e-text); }
.echo-exit { font-family: var(--e-font-mono); font-size: 0.75rem; }

/* --- 頭部區域 --- */
.echo-header { margin-bottom: 80px; max-width: 640px; }
.echo-header h1 { 
    font-size: 2.5rem; 
    font-weight: 300; 
    letter-spacing: -1px; 
    margin-bottom: 16px; 
    line-height: 1.2; 
    color: var(--e-text);
}
.echo-header p { font-size: 1.1rem; color: var(--e-muted); font-weight: 300; }

/* --- 非對稱網格佈局 --- */
.echo-layout {
    display: grid;
    grid-template-columns: 1fr 340px; /* 右側固定寬度，左側自適應 */
    gap: 80px;
    align-items: start;
}

/* 瑞士現代主義：右側欄非對稱下沉 */
@media (min-width: 901px) {
    .echo-side-col { margin-top: 140px; }
}

/* --- 模塊化卡片 (無陰影、純邊框) --- */
.echo-card {
    background: var(--e-surface);
    border: 1px solid var(--e-border);
    padding: 48px;
    margin-bottom: 40px;
    transition: border-color 0.4s ease;
}
.echo-card:hover { border-color: var(--e-muted); } /* 極低調的懸停反饋 */
.echo-compact { padding: 32px; }

.echo-meta {
    display: flex; justify-content: space-between;
    font-family: var(--e-font-mono); font-size: 0.75rem;
    color: var(--e-muted); margin-bottom: 32px; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.echo-card h2 { font-size: 1.4rem; font-weight: 400; margin-bottom: 16px; letter-spacing: -0.5px; }
.echo-card h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: 12px; color: var(--e-text); }
.echo-card p { color: var(--e-muted); font-size: 0.95rem; margin-bottom: 32px; font-weight: 300; }

.echo-read-more { 
    font-size: 0.85rem; 
    color: var(--e-accent); 
    transition: opacity 0.3s; 
    font-family: var(--e-font-mono);
}
.echo-read-more:hover { opacity: 0.7; }

/* --- 實驗性影片模組 --- */
.echo-video-module { margin-bottom: 40px; border: 1px solid var(--e-border); }
.echo-video-placeholder {
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: background 0.4s ease;
}
.echo-video-placeholder:hover { background: #05070A; }
.echo-video-placeholder:hover .echo-play-btn { color: var(--e-accent); }
.echo-video-time { 
    position: absolute; bottom: 16px; right: 16px; 
    font-family: var(--e-font-mono); font-size: 0.7rem; color: var(--e-muted); 
}
.echo-play-btn { font-size: 1.5rem; color: var(--e-border); transition: color 0.3s ease; }

.echo-video-caption { 
    padding: 16px 20px; background: var(--e-surface); 
    border-top: 1px solid var(--e-border); display: flex; 
    justify-content: space-between; font-size: 0.8rem; color: var(--e-muted); 
}
.echo-video-caption span:first-child { font-family: var(--e-font-mono); color: var(--e-text); }

/* --- 筆記殘骸區域 --- */
.echo-note {
    border-left: 1px solid var(--e-border);
    padding-left: 24px;
    margin-bottom: 40px;
    transition: border-color 0.4s ease;
}
.echo-note:hover { border-left-color: var(--e-accent); }
.echo-note-id { 
    font-family: var(--e-font-mono); font-size: 0.7rem; 
    color: var(--e-muted); display: block; margin-bottom: 12px; letter-spacing: 1px; 
}
.echo-note p { font-size: 0.9rem; color: var(--e-text); line-height: 1.7; margin: 0; font-weight: 300; }

/* --- 進度條 (微動畫) --- */
.echo-progress { height: 1px; background: var(--e-border); width: 100%; margin-top: 24px; }
.echo-progress-bar { height: 100%; background: var(--e-muted); transition: background 0.4s ease; }
.echo-card:hover .echo-progress-bar { background: var(--e-accent); }

/* --- 克制的動效設計 (Restrained Motion) --- */
.echo-fade { 
    opacity: 0; 
    transform: translateY(8px); 
    transition: opacity 1s cubic-bezier(0.2, 0, 0, 1), transform 1s cubic-bezier(0.2, 0, 0, 1); 
}
.echo-fade.visible { opacity: 1; transform: translateY(0); }

/* --- 移動端適配 --- */
@media (max-width: 900px) {
    .echo-layout { grid-template-columns: 1fr; gap: 40px; }
    .echo-container { padding: 40px 24px; }
    .echo-nav { flex-direction: column; gap: 24px; align-items: flex-start; }
    .echo-header h1 { font-size: 2rem; }
    .echo-card { padding: 24px; }
}

/* --- Echo 文章閱讀器全屏層 --- */
#echo-post-viewer {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--e-bg, #0B0D10); z-index: 6000;
    overflow-y: auto; opacity: 0; visibility: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0, 0, 1);
}
#echo-post-viewer.active { opacity: 1; visibility: visible; }

.echo-article-content {
    max-width: 640px; margin: 0 auto;
    color: var(--e-muted) !important;
}
.echo-article-content h2, .echo-article-content h3 { color: var(--e-text) !important; }

/* --- 視頻播放器覆蓋層 --- */
.echo-play-overlay {
    position: absolute; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: flex;
    justify-content: center; align-items: center;
    font-size: 2rem; color: #fff; cursor: pointer;
    transition: opacity 0.3s;
}

/* --- 修正移動端適配 --- */
@media (max-width: 768px) {
    .echo-article-content { padding: 0 20px; }
    .echo-header h1 { font-size: 1.8rem !important; }
}

/* ========================================================================= */
/* ⬛ ECHO THEME: 視圖切換與排版拓展 */
/* ========================================================================= */

/* 視圖切換控制 */
.echo-view-section {
    width: 100%;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1; transform: translateY(0);
}
.echo-view-section.fade-out { opacity: 0; transform: translateY(10px); }
.echo-view-section.hidden { display: none; }

/* --- FRAGMENTS (偶得的句子) --- */
/* 追求極致的瑞士排版：大字體、細字重、極端留白 */
.echo-fragments-grid {
    display: flex;
    flex-direction: column;
    gap: 120px; /* 極端的段落間距 */
    padding: 60px 0;
    max-width: 800px;
    margin: 0 auto;
}
.echo-quote-item {
    border-left: 1px solid var(--e-border);
    padding-left: 40px;
    margin-left: 20vw; /* 不對稱排版：向右偏移 */
    transition: border-color 0.5s ease;
}
.echo-quote-item:hover { border-left-color: var(--e-muted); }
.echo-quote-meta {
    font-family: var(--e-font-mono);
    font-size: 0.75rem;
    color: var(--e-muted);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.echo-quote-text {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--e-text);
    letter-spacing: -0.5px;
}

/* --- FIELD NOTES (田野筆記/Tips) --- */
/* 類似數據矩陣的緊湊網格 */
.echo-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.echo-note-card {
    margin-bottom: 0 !important; /* 覆蓋原有卡片底部間距 */
    padding: 32px;
    cursor: pointer;
    background: transparent; /* 去除底色，僅保留線框 */
}
.echo-note-card:hover {
    background: var(--e-surface);
}

/* 移動端適配修正 */
@media (max-width: 900px) {
    .echo-fragments-grid { gap: 80px; padding: 20px 0; }
    .echo-quote-item { margin-left: 0; padding-left: 20px; }
    .echo-quote-text { font-size: 1.4rem; }
    .echo-notes-grid { grid-template-columns: 1fr; }
}

/* ========================================================================= */
/* ⬛ ECHO THEME: 專屬板塊排版 */
/* ========================================================================= */

.echo-view-section { width: 100%; }
.echo-view-section.hidden { display: none; }

/* --- FRAGMENTS (偶得的句子) --- */
.echo-fragments-grid {
    display: flex; flex-direction: column;
    gap: 120px; padding: 60px 0; max-width: 800px; margin: 0 auto;
}
.echo-quote-item {
    border-left: 1px solid var(--e-border);
    padding-left: 40px; margin-left: 15vw;
    transition: border-color 0.5s ease;
}
.echo-quote-item:hover { border-left-color: var(--e-accent); }
.echo-quote-meta {
    font-family: var(--e-font-mono); font-size: 0.75rem;
    color: var(--e-muted); margin-bottom: 20px; letter-spacing: 1px;
}
.echo-quote-text {
    font-size: 1.8rem; font-weight: 300; line-height: 1.5;
    color: var(--e-text); letter-spacing: -0.5px;
}

/* --- FIELD NOTES (田野筆記/Tips) --- */
.echo-notes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px;
}
.echo-note-card {
    padding: 32px; cursor: pointer; border: 1px solid var(--e-border);
    background: transparent; transition: all 0.3s ease;
}
.echo-note-card:hover {
    background: var(--e-surface); border-color: var(--e-muted);
    transform: translateY(-4px);
}

/* 確保視頻模組也有進場動畫 */
.echo-video-module.echo-fade { opacity: 0; transform: translateY(10px); }
.echo-video-module.visible { opacity: 1; transform: translateY(0); }

/* 引入結尾欄所需的字體 */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&display=swap');

/* ========================================================================= */
/* 1 & 2. 自定義提示欄 (Alert Boxes) */
/* ========================================================================= */
.custom-alert {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    margin: 24px 0;
    border-radius: 4px; /* 銳利的微圓角 */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.alert-info { background-color: #0d3b85; } /* 圖1 藍色 */
.alert-surprise { background-color: #7a7a7a; } /* 圖2 灰色 */

.alert-icon-circle {
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 42px;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 24px;
    line-height: 1;
}

.alert-surprise .alert-icon-circle {
    font-size: 38px;
    letter-spacing: -2px; /* 讓 !? 靠緊一點 */
}

.custom-alert .alert-text {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ========================================================================= */
/* 3 & 4. 插入的項目：可折疊漸變卡片 (Aquila / Virgo) */
/* ========================================================================= */
.project-module {
    margin: 32px 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.project-banner {
    display: flex;
    align-items: center;
    padding: 24px 40px;
    color: #ffffff;
}

/* Aquila & Virgo 漸變背景 */
.project-module.aquila .project-banner {
    background: linear-gradient(90deg, #000000 0%, #4a4a4a 50%, #f0f0f0 100%);
}
.project-module.virgo .project-banner {
    background: linear-gradient(90deg, #000000 0%, #5c5c5c 50%, #e6e6e6 100%);
}

.project-logo {
    width: 90px;
    height: 90px;
    background: #ffffff;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 28px;
    margin-right: 32px;
    flex-shrink: 0;
}

.project-title {
    font-size: 1.6rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 1px;
}

/* 折疊內容區塊 */
.project-body {
    position: relative;
    padding: 0;
}

.project-content {
    padding: 24px 32px;
    color: var(--text-main);
    line-height: 1.8;
    overflow: hidden;
    /* 預設收起高度，可依需求調整 */
    max-height: 120px; 
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 底部模糊遮罩 */
.project-mask {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg-color));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* More 按鈕 */
.project-more-btn {
    position: absolute;
    bottom: 12px; left: 50%; transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    z-index: 10;
    display: none; /* 預設隱藏，由 JS 判斷是否顯示 */
}

.project-more-btn:hover {
    background: var(--hover-bg);
    color: #3b82f6;
    border-color: #3b82f6;
}

/* 展開狀態 */
.project-body.is-expanded .project-content {
    /* JS 會動態賦予真實的 scrollHeight */
    max-height: 2000px; 
}
.project-body.is-expanded .project-mask {
    opacity: 0;
}

/* ========================================================================= */
/* 5. 結尾欄 (Ending Block) - 緊湊防複製版 */
/* ========================================================================= */
.ending-block {
    margin: 2em 0; /* 與上下元素的間距對齊版權塊 */
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* 🛡️ 核心：禁止文字被選取與複製 */
    user-select: none;
    -webkit-user-select: none; /* 兼容 Safari */
}

.ending-main {
    padding: 24px 30px; /* 大幅縮小上下內邊距 */
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
}

.ending-main p {
    font-size: 1.05rem; /* 縮小基礎字號，與版權塊的 0.95rem 視覺平衡 */
    line-height: 1.5;
    margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.ending-main em {
    font-style: italic;
    font-weight: bold;
    font-size: 1.15rem; /* 縮小強調字號 */
}

.ending-sub {
    background-color: #192f4d; /* 深藍色底部 */
    color: #8fa8c7; 
    padding: 12px 20px; /* 縮小底部欄高度 */
    font-family: 'Alegreya SC', serif; 
    font-size: 0.85rem; /* 縮小英文字號 */
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* 移動端適配微調 */
@media (max-width: 768px) {
    .ending-main { padding: 20px; }
    .ending-main p { font-size: 0.95rem; }
    .ending-main em { font-size: 1.05rem; }
    .ending-sub { font-size: 0.75rem; letter-spacing: 1px; }
}

/* ========================================================================= */
/* 🌪️ 精緻混亂：全站瀑布流排版 (Masonry Chaos Layout) */
/* ========================================================================= */

/* 1. 主站文章列表：瀑布流 */
.feed-column {
    column-count: 2;          /* 將文章拆為兩列 */
    column-gap: 30px;
    display: block;           /* 覆蓋原先的 flex 避免干擾 */
}
.post-card {
    break-inside: avoid;      /* 確保卡片不會被硬生生切成兩半 */
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
    text-align: left;         /* 確保內文與標題靠左 */
}

/* 2. 主站首頁 Dashboard：Bento Box 瀑布流 */
.bento-grid {
    column-count: 2;
    column-gap: 30px;
    display: block;
}
.bento-item {
    break-inside: avoid;
    margin-bottom: 30px !important;
    display: inline-block;
    width: 100%;
}

/* 3. Echo 站點：碎片與筆記的瀑布流 */
.echo-fragments-grid {
    column-count: 2;
    column-gap: 60px;
    display: block;
    max-width: 1000px; /* 放寬以容納雙列 */
}
.echo-quote-item {
    break-inside: avoid;
    margin-bottom: 60px;
    margin-left: 0 !important; /* 移除舊的非對稱，由瀑布流接管混亂感 */
    padding-left: 30px;
    display: inline-block;
    width: 100%;
    text-align: left;
}

.echo-notes-grid {
    column-count: 3; /* 筆記較短，使用三列產生更高密度的混亂感 */
    column-gap: 30px;
    display: block;
}
.echo-note-card {
    break-inside: avoid;
    margin-bottom: 30px !important;
    display: inline-block;
    width: 100%;
    text-align: left;
}

/* --- 文章頁面標題：強制靠左對齊修復 --- */
.post-header {
    text-align: left !important;
}

/* 移動端適配瀑布流 (小螢幕時自動回歸單列) */
@media (max-width: 1024px) {
    .echo-notes-grid { column-count: 2; }
}
@media (max-width: 768px) {
    .bento-grid, .feed-column, .echo-fragments-grid, .echo-notes-grid { column-count: 1; }
}

/* ========================================================================= */
/* 🔒 私有版權區塊 (Closed Source / All Rights Reserved) */
/* ========================================================================= */

/* 覆蓋原本的深藍底色，改為極黑/深灰色，並加上左側的紅色警戒線 */
.license-container.closed-source {
    background-color: #0a0a0a;
    border-left: 4px solid #ef4444; 
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.05); /* 淡淡的紅色光暈 */
}

[data-theme="light"] .license-container.closed-source {
    background-color: #1a1a1a;
}

/* 顯示為不可點擊的紅色警戒文字 */
.closed-source .closed-text {
    color: #ef4444;
    cursor: not-allowed;
    font-weight: 600;
}
.closed-source .closed-text:hover {
    color: #dc2626;
    text-decoration: none;
}

/* 巨型半透明鎖頭水印 */
.closed-source .lock-icon {
    width: 130px; 
    height: 130px;
    right: 10px; /* 鎖頭較為方正，往左挪一點 */
    stroke: rgba(255, 255, 255, 0.04); /* 極致低調的透明度 */
    fill: transparent;
}

/* 移動端適配微調 */
@media (max-width: 768px) {
    .closed-source .lock-icon {
        width: 100px;
        height: 100px;
        right: 0px;
    }
    .meta-license-link {
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }
}

/* ========================================================================= */
/* 🥚 頁腳隱藏彩蛋 (Footer Reveal Easter Egg) */
/* ========================================================================= */

/* 初始隱藏狀態：高度為0、透明 */
.footer-reveal-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    display: flex;
    justify-content: center;
    /* 使用貝茲曲線讓展開有 Q 彈的物理滑動感 */
    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s ease, 
                margin-top 0.5s ease;
}

/* 當鼠標懸停在整個頁腳時：展開高度並顯示 */
.site-footer:hover .footer-reveal-container {
    max-height: 400px; /* 設置一個足夠容納圖片的最大高度 */
    opacity: 1;
    margin-top: 30px; /* 展開時與上方的版權文字拉開一點距離 */
}

/* 圖片本體的基礎樣式與微微上浮的動畫 */
.footer-egg-img {
    max-width: 90%; /* 防止在手機端撐破螢幕 */
    max-height: 280px; 
    width: auto;
    object-fit: contain;
    border-radius: 8px; /* 加上微圓角更精緻 */
    
    /* 預設稍微往下沉 */
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    
    display: none; /* 預設全部隱藏，交給下方的主題系統控制 */
}

/* 展開時圖片歸位，製造滑出感 */
.site-footer:hover .footer-egg-img {
    transform: translateY(0);
}

/* 🌙 結合你的明暗主題系統自動切換 */
[data-theme="light"] .footer-egg-img.egg-light {
    display: block;
}

[data-theme="dark"] .footer-egg-img.egg-dark {
    display: block;
}

/* ========================================================================= */
/* 🧊 冷淡註釋系統 (Cold Inline Notes) */
/* ========================================================================= */

/* 觸發詞本體 */
.cold-note-trigger {
    color: #64748b; /* 預設冷灰色 */
    cursor: pointer;
    border-bottom: 1px dashed rgba(100, 116, 139, 0.4);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
    position: relative;
    display: inline;
}

[data-theme="dark"] .cold-note-trigger {
    color: #94a3b8;
}

.cold-note-trigger:hover, 
.cold-note-trigger.is-active {
    color: #3b82f6; /* 點擊或懸浮時透出一點科技藍 */
    border-bottom-color: #3b82f6;
}

/* 動態生成的註釋外框 */
.cold-note-container {
    display: none; /* 預設完全脫離文檔流，保證原句不斷行 */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    width: 100%; /* 強制佔滿整行，將後續文字往下擠 */
    
    /* 核心毛玻璃效果，完美繼承你的主題變數 */
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-left: 3px solid #64748b; /* 左側加入一道冷峻的引導線 */
    border-radius: 4px;
    
    /* 這裡的 transition 控制向下推開的流暢度 */
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease, 
                margin 0.4s ease;
}

/* 內部文字區塊 */
.cold-note-content {
    display: block;
    padding: 16px 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    word-break: break-all;
}

/* ========================================================================= */
/* ☀️ 白天模式：版權區塊色彩翻轉 (Light Theme License Override) */
/* ========================================================================= */

/* --- 1. 開源區塊：專屬淺空藍 (絕對隔離，守護鄰家大姐姐) --- */
[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) {
    background-color: #e0f2fe; 
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .license-title {
    color: #0f172a; 
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .license-blog-link {
    color: #0284c7; 
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .license-blog-link:hover {
    color: #0369a1;
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .meta-label {
    color: #64748b; 
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .meta-value,
[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .meta-license-link {
    color: #1e293b; 
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .meta-license-link:hover {
    color: #0284c7;
}

[data-theme="light"] .license-container:not(.closed-source):not(.beta-source) .license-cc-icon {
    fill: rgba(2, 132, 199, 0.06); 
}

/* --- 2. 不開源區塊：冷硬鐵灰與警戒紅 (拒絕藍色污染) --- */
[data-theme="light"] .license-container.closed-source {
    background-color: #f1f5f9; /* 稍微深一點的冷鐵灰，徹底沒有藍色調 */
    border-left: 4px solid #ef4444; 
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.08); 
}

/* 強制覆蓋標題與連結，變成極致的黑與紅 */
[data-theme="light"] .license-container.closed-source .license-title {
    color: #0f172a; 
}

[data-theme="light"] .license-container.closed-source .license-blog-link {
    color: #ef4444; /* 連結也變成血紅色，不留一點藍色 */
}

[data-theme="light"] .license-container.closed-source .license-blog-link:hover {
    color: #dc2626;
}

[data-theme="light"] .license-container.closed-source .meta-label {
    color: #64748b;
}

[data-theme="light"] .license-container.closed-source .meta-value {
    color: #1e293b;
}

[data-theme="light"] .license-container.closed-source .meta-license-link.closed-text {
    color: #ef4444; 
}

[data-theme="light"] .license-container.closed-source .meta-license-link.closed-text:hover {
    color: #dc2626;
}

[data-theme="light"] .license-container.closed-source .lock-icon {
    stroke: rgba(239, 68, 68, 0.08); 
}

/* ========================================================================= */
/* 🖋️ 句子切換器 (Formal Sentence Switcher) */
/* ========================================================================= */

.sentence-switcher-section {
    padding: 40px;
    margin-bottom: 40px;
    text-align: left;
}

/* 核心容器：高度動畫的關鍵 */
.sentence-container {
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    margin: 20px 0;
}

.sentence-inner {
    padding: 10px 0;
}

/* 文字樣式：正式感 + 斜體 Times New Roman */
.sentence-text {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 切換時的淡出狀態 */
.sentence-text.is-switching {
    opacity: 0;
    transform: translateY(-10px);
}

/* 控制區域與按鈕 */
.sentence-controls {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.switcher-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 10px 24px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.switcher-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--hover-bg);
}

.switcher-btn:active {
    transform: scale(0.96);
}

.btn-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.4s ease;
}

.switcher-btn:hover .btn-icon {
    transform: translateX(4px);
}

/* 移動端適配 */
@media (max-width: 768px) {
    .sentence-switcher-section { padding: 30px 20px; }
    .sentence-text { font-size: 1.15rem; }
    .switcher-btn { width: 100%; justify-content: center; }
}

/* ========================================================================= */
/* 🎁 終極彩蛋：男娘吉祥物與物理碎紙系統 */
/* ========================================================================= */

/* --- 1. 吉祥物防護與黑夜透明度 --- */
#desk-char {
    /* 確保他可以被點擊 */
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#desk-char:active {
    transform: scale(0.95); /* 點擊時有 Q 彈反饋 */
}

.mascot-light, .mascot-dark {
    width: 100%;
    display: none;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.3s ease, filter 0.3s ease; /* 切換圖片時的漸變 */
}
[data-theme="light"] .mascot-light { display: block; }
[data-theme="dark"] .mascot-dark { display: block; }

[data-theme="dark"] #desk-char { opacity: 0.8; } /* 黑夜模式預設透明度 */
[data-theme="dark"] #desk-char:hover { opacity: 1; filter: brightness(1.1); } /* 鼠標放上去變亮 */

/* --- 2. 傲嬌氣泡對話框 (Speech Bubble) --- */
.mascot-dialog {
    position: absolute;
    top: 15%;
    right: 85%; /* 顯示在角色左側 */
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    border-radius: 16px 16px 0 16px; /* 氣泡尾巴指向右下角 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    
    /* 動畫初始狀態 */
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transform-origin: bottom right;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 20;
}

[data-theme="dark"] .mascot-dialog {
    background: rgba(20, 20, 20, 0.85);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.mascot-dialog.show-dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 氣泡小尾巴 */
.mascot-dialog::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}
[data-theme="dark"] .mascot-dialog::after { background: rgba(20, 20, 20, 0.85); }

.mascot-dialog-icon {
    font-size: 1.4rem;
    color: #3b82f6; /* ♂ 藍色 */
    font-weight: bold;
    line-height: 1;
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.4));
}
.mascot-dialog-text {
    font-size: 0.95rem;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* 移動端適配：防止人物太大或氣泡出界 */
@media (max-width: 768px) {
    #desk-char { width: 160px !important; bottom: calc(100% - 10px) !important; right: 2% !important; }
    .mascot-dialog { right: 70%; padding: 8px 12px; }
    .mascot-dialog-text { font-size: 0.8rem; }
    .mascot-dialog-icon { font-size: 1.1rem; }
}

/* --- 2. 頂級極簡表單 UI (沿用你的高級黑白設計) --- */
.fancy-modal-box {
    position: relative; padding: 50px; border-radius: 16px;
    background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(30px) saturate(120%); -webkit-backdrop-filter: blur(30px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
    width: 90%; max-width: 460px; color: #f3f4f6;
}
[data-theme="light"] .fancy-modal-box {
    background: rgba(255, 255, 255, 0.85); color: #0f172a;
    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12);
}
.modal-title { font-size: 2rem; margin-bottom: 30px; text-align: center; }

/* 表單與輸入框 */
.fancy-form { display: flex; flex-direction: column; gap: 24px; }
.input-group { position: relative; width: 100%; }
.input-group input, .input-group textarea {
    width: 100%; padding: 12px 10px 8px 0; font-size: 1rem; color: inherit; 
    background: transparent; border: none; outline: none; font-family: inherit; resize: none;
}
.input-group textarea { height: 80px; }
.input-group label {
    position: absolute; top: 12px; left: 0; font-size: 1rem; color: var(--text-light);
    pointer-events: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border-color); }
.input-line::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: var(--text-main); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.input-group input:focus ~ label, .input-group input:valid ~ label,
.input-group textarea:focus ~ label, .input-group textarea:valid ~ label { top: -12px; font-size: 0.75rem; color: var(--text-main); }
.input-group input:focus ~ .input-line::after, .input-group textarea:focus ~ .input-line::after { transform: scaleX(1); }

.fancy-submit-btn {
    padding: 16px; margin-top: 15px; border-radius: 8px; background: #ffffff; border: none;
    color: #000000; font-family: inherit; font-size: 0.9rem; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
[data-theme="light"] .fancy-submit-btn { background: #0f172a; color: #ffffff; }
.fancy-submit-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* --- 3. 碎紙特效 --- */
.shatter-prep {
    animation: shakeShatter 0.3s ease-in-out forwards;
}
@keyframes shakeShatter {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px) rotate(-1deg); }
    40%, 80% { transform: translateX(5px) rotate(1deg); }
}

.shred-particle {
    position: absolute;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    animation: shredFall 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes shredFall {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* 移動端適配 */
@media (max-width: 768px) {
    .sentence-switcher-section { padding: 30px 20px; }
    .sentence-text { font-size: 1.15rem; }
    
    /* 🌟 核心修復：手機端改為垂直排列，並讓 Next Thought 跑到上面 */
    .sentence-controls {
        flex-direction: column-reverse; 
        gap: 12px;
    }
    
    .switcher-btn { 
        width: 100%; 
        justify-content: center; 
        margin: 0; /* 消除潛在的 margin 溢出 */
    }
}

/* ========================================================================= */
/* 🎭 表情包系統 (Phiz Stickers) */
/* ========================================================================= */

/* 1. 容器基礎設定：觸發文字環繞 */
.phiz-container {
    position: relative;
    display: inline-block;
    
    /* 🌟 大小調整區：修改這裡改變表情包在頁面中的寬高 🌟 */
    width: 140px; 
    height: 140px; 
    /* ---------------------------------------------------- */
    
    margin: 10px 20px 10px 0; /* 右側留空，讓環繞文字有呼吸空間 */
    float: left; /* 讓文字環繞在表情包右側 */
    border-radius: 8px;
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 獨佔一行的情況 (如果 markdown 裡表情包前後有換行) */
p > .phiz-container:only-child {
    float: none;
    display: block;
    margin: 20px auto; /* 置中顯示 */
}

/* 2. 圖片本體 (完全被壓在遮罩下) */
.phiz-img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important; /* 覆蓋全域 img 的 margin */
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: none; /* 禁用點擊 */
    -webkit-user-drag: none; /* 禁用拖拽 */
    filter: none !important; /* 不受全局變暗影響 */
}

/* 3. 🛡️ 絕對防護遮罩 (防下載、防右鍵) */
.phiz-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5;
    cursor: help; /* 鼠標變為問號，暗示有備註 */
    /* 背景全透明，純粹用來擋住圖片 */
    background: transparent;
}

/* 4. 💬 毛玻璃浮動備註 (Tooltip) */
.phiz-tooltip {
    position: absolute;
    bottom: calc(100% + 5px); /* 在圖片正上方 */
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 12px 12px 12px 0; /* 氣泡指向左下角 */
    
    color: var(--text-main);
    font-family: 'Times New Roman', Times, serif;
    font-style: italic; /* 🌟 強制斜體 */
    font-size: 0.9rem;
    padding: 8px 14px;
    white-space: nowrap; /* 備註不換行 */
    pointer-events: none;
    z-index: 20;
    
    /* 動畫初始狀態 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .phiz-tooltip {
    background: rgba(20, 20, 20, 0.85);
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* 5. 交互觸發狀態 (懸浮遮罩時，顯示氣泡) */
.phiz-container:hover {
    transform: scale(1.05); /* 輕微放大 */
}

.phiz-container:hover .phiz-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- 移動端適配 --- */
@media (max-width: 768px) {
    .phiz-container {
        /* 手機端稍微縮小表情包 */
        width: 110px; 
        height: 110px;
        margin: 5px 15px 5px 0;
    }
    .phiz-tooltip {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* ========================================================================= */
/* 📱 終極移動端防撐破適配 (X-Axis Overflow Fix) */
/* ========================================================================= */
/* 確保所有可能超寬的容器都被鎖死在 100% 寬度內，並強制長文字換行 */
.post-content-column {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.markdown-body {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.markdown-body p, 
.markdown-body div, 
.markdown-body span,
.markdown-body a {
    max-width: 100%;
    box-sizing: border-box;
}

/* 確保所有圖片絕不撐破屏幕 */
.markdown-body img {
    max-width: 100% !important;
    box-sizing: border-box;
    height: auto;
}

/* 確保表情包在極窄螢幕下自動適配 */
.phiz-container {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .phiz-container {
        width: 100px; /* 手機端再稍微縮小一點 */
        height: 100px;
        margin: 5px 10px 5px 0;
    }
}

/* ========================================================================= */
/* 🚫 大陸地區限制存取：視覺阻斷看板系統 (Restricted Visual Board) */
/* ========================================================================= */

.restricted-visual-board {
    width: 100%;
    margin: 0 auto 2.5em auto;
    position: relative;
    z-index: 100;
    animation: msgFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 圖片包裝盒：禁止所有用戶選取與原生互動 */
.restricted-img-shield {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    background-color: transparent;
    
    /* 🛡️ 第一層防護：禁止系統選取 */
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* 🛡️ 第二層防護：絕對定位的「幽靈遮罩層」 */
/* 完美覆蓋在圖片正上方，用戶點擊右鍵或嘗試拖拽時，實際只能選到這塊透明玻璃，絕不可能下載到原圖 */
.restricted-shield-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    cursor: not-allowed;
    
    /* 強制阻斷原生拖拽 */
    pointer-events: auto;
    -webkit-user-drag: none;
}

/* 圖片基礎樣式：像素對齊、灰階過渡與不可選取 */
.restricted-banner-img {
    display: none; /* 預設隱藏 */
    width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* 🛡️ 第三層防護：原生瀏覽器級別禁用拖曳 */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* ☀️ 白天模式 (Light Mode) 路由：啟用第一張 5.jpg */
[data-theme="light"] .restricted-banner-img.light-banner {
    display: block;
}

/* 🌙 黑夜模式 (Dark Mode) 路由：自動切換為第二張 6.jpg */
[data-theme="dark"] .restricted-banner-img.dark-banner {
    display: block;
}

/* ⛪ 狂亂深淵主題 (Abyss Mode) 同步沿用黑夜版看板 */
[data-theme="abyss"] .restricted-banner-img.dark-banner {
    display: block;
}

/* 手機移動端自適應：優化邊界呼吸感，防止撐破 */
@media (max-width: 768px) {
    .restricted-visual-board {
        margin-bottom: 1.5em;
        padding: 0 4px;
    }
    .restricted-img-shield {
        border-radius: 8px;
    }
}

/* ========================================================================= */
/* 🚨 圖片加載失敗組件 (Image Error Board - 1:1 Pixel Perfect) */
/* ========================================================================= */

/* 1. 外部灰框容器 (限制寬度，防霸屏，極致貼合) */
.error-board {
    position: relative;
    max-width: 450px; /* 微調最大寬度，讓整體比例更精緻 */
    width: 100%;
    margin: 3em auto;
    background-color: #cfd3d6;
    padding: 30px 4px 0 4px; /* 🌟 嚴絲合縫的關鍵：極度縮小左右的灰色留白，僅保留頂部標籤空間 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

[data-theme="dark"] .error-board {
    background-color: #2c2f33;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.error-board:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 2. 左上角 ERROR 漸變標籤 */
.error-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #1f2226, #484c52);
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.45rem;
    font-weight: bold;
    padding: 2px 35px 2px 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    letter-spacing: 1px;
}

[data-theme="dark"] .error-badge {
    background: linear-gradient(to right, #000000, #222222);
}

/* 3. 內層卡片區域 (去除多餘 padding 與幽靈空白) */
.error-board-inner {
    background-color: transparent; /* 圖片本身自帶白底，移除多餘底色 */
    padding: 0; /* 🌟 嚴絲合縫的關鍵：移除所有內邊距 */
    border-radius: 2px;
    line-height: 0; /* 🌟 消除圖片底部的原生文字基線空白 */
}

/* 4. 🌟 核心裁切遮罩區 (控制圖片露出多少) */
.error-img-clipper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 🌟 調整收起狀態的高度，多露出一點點，解決「遮住太多」 */
    max-height: 250px; 
    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 展開狀態：高度徹底解放 */
.error-board.is-expanded .error-img-clipper {
    max-height: 1500px; /* 🌟 徹底加大最大高度，確保超長圖片也絕不會被腰斬 */
}

/* 透明防護罩，防止拖拽圖片並負責接收點擊事件 */
.error-img-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5;
    cursor: pointer;
}

/* 圖片本體強制設定 */
.error-fb-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    filter: none !important;
}

[data-theme="dark"] .error-fb-img {
    filter: brightness(0.9) !important; /* 黑夜模式稍微壓暗不刺眼 */
}

/* 5. 底部操作欄 (>More Info < / IP & TIME) */
.error-board-footer {
    background-color: #cfd3d6;
    padding: 8px 15px; /* 縮小上下間距，讓整體視覺更緊湊 */
    text-align: center;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.3s ease;
}

[data-theme="dark"] .error-board-footer {
    background-color: #2c2f33;
}

.error-board-footer:hover {
    filter: brightness(0.95);
}

[data-theme="dark"] .error-board-footer:hover {
    filter: brightness(1.1);
}

/* >More Info < 字體設定 */
.error-btn-text {
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: opacity 0.3s;
    margin: 0;
}

[data-theme="dark"] .error-btn-text {
    color: #e0e0e0;
}

/* 展開後的 IP 與 TIME 設定 */
.error-meta-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    animation: msgFadeIn 0.5s ease;
    margin: 0;
}

[data-theme="dark"] .error-meta-info {
    color: #d1d5db;
}

.error-meta-info.hidden,
.error-btn-text.hidden {
    display: none !important;
}

/* 📱 極致移動端響應式微調 */
@media (max-width: 480px) {
    .error-board {
        max-width: 92%;
        margin: 2em auto;
        padding: 28px 4px 0 4px; /* 手機端邊距極致縮小 */
    }
    .error-badge {
        font-size: 1.2rem;
        padding: 2px 25px 2px 15px;
    }
    .error-img-clipper {
        max-height: 190px; /* 手機端微調露出範圍 */
    }
    .error-board.is-expanded .error-img-clipper {
        max-height: 1200px;
    }
    .error-btn-text, .error-meta-info {
        font-size: 1.15rem;
    }
}



/* ========================================================================= */
/* 💛 BETA 專屬版權聲明區塊 (Beta / Not Open Source) */
/* ========================================================================= */

.license-container.beta-source {
    background-color: #1a1a0a; /* 極深的暗黃/黑色系 */
    border-left: 4px solid #facc15; /* 黃色警戒邊框 */
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.05);
}

[data-theme="light"] .license-container.beta-source {
    background-color: #fefce8; /* 淺黃色底色 */
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.1);
}

/* 文字顏色適配 */
.beta-source .license-title { color: #fef08a; }
[data-theme="light"] .beta-source .license-title { color: #854d0e; }

.beta-source .license-blog-link { color: #fde047; }
.beta-source .license-blog-link:hover { color: #fef08a; }
[data-theme="light"] .beta-source .license-blog-link { color: #ca8a04; }

.beta-source .meta-label { color: #a1a1aa; }
[data-theme="light"] .beta-source .meta-label { color: #a16207; }

.beta-source .meta-value { color: #f4f4f5; }
[data-theme="light"] .beta-source .meta-value { color: #422006; }

.beta-source .meta-license-link.beta-text {
    color: #facc15;
    cursor: not-allowed;
    font-weight: 600;
}
[data-theme="light"] .beta-source .meta-license-link.beta-text { color: #b45309; }

/* 🌟 大型 BETA 浮水印 (取代原本的圖標) */
.beta-watermark {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 90px; /* 巨大字體 */
    color: #facc15;
    opacity: 0.08; /* 極低透明度，融入背景 */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    letter-spacing: -2px;
}
[data-theme="light"] .beta-watermark { opacity: 0.15; color: #ca8a04; }

/* 手機端微調 */
@media (max-width: 768px) {
    .beta-comic-clipper { max-height: 200px; } /* 手機端裁切得更短一點 */
    .beta-watermark { font-size: 70px; right: -10px; }
}


/* =========================================================================
   📌 MARKDOWN & ECHO 表格優化 (響應式 + 斑馬紋 + 多主題適配)
   ========================================================================= */

/* 1. 響應式容器效果：當螢幕太窄時自動啟用橫向滾動，絕不撐破外層 Glass 記憶卡片 */
.markdown-body table,
.echo-article-content table {
    display: block;
    width: 100% !important;
    overflow-x: auto; /* 核心：超出寬度時自動顯示水平滾動條 */
    webkit-overflow-scrolling: touch; /* 讓手機端滑動更平滑 */
    border-collapse: collapse;
    border-spacing: 0;
    margin: 30px 0;
    font-size: 0.95rem;
    transition: border-color 0.6s ease;
}

/* 調整表頭與單元格的基礎內邊距與對齊 */
.markdown-body table th,
.markdown-body table td,
.echo-article-content table th,
.echo-article-content table td {
    padding: 12px 18px;
    text-align: left; /* 預設靠左，可跟隨 Markdown 對齊語法 */
    min-width: 100px; /* 防止文字被擠壓得太嚴重 */
}

.markdown-body table th,
.echo-article-content table th {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 平滑的滑鼠懸停（Hover）過渡動畫 */
.markdown-body table tbody tr,
.echo-article-content table tbody tr {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════ */
/* 🎯 表格横向滚动条美化 */
/* ═══════════════════════════════════════════════════════════ */

.markdown-body table::-webkit-scrollbar,
.echo-article-content table::-webkit-scrollbar {
    height: 8px;
    background: transparent;
}

.markdown-body table::-webkit-scrollbar-track,
.echo-article-content table::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

html[data-theme="light"] .markdown-body table::-webkit-scrollbar-thumb,
html[data-theme="light"] .echo-article-content table::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
    transition: background 0.3s ease;
}

html[data-theme="light"] .markdown-body table::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .echo-article-content table::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

html[data-theme="dark"] .markdown-body table::-webkit-scrollbar-thumb,
html[data-theme="dark"] .echo-article-content table::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 4px;
    transition: background 0.3s ease;
}

html[data-theme="dark"] .markdown-body table::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .echo-article-content table::-webkit-scrollbar-thumb:hover {
    background: #666666;
}


/* ==========================================
   ☀️ 亮色模式 (Light Mode) 專屬色彩
   ========================================== */
html[data-theme="light"] .markdown-body table,
html[data-theme="light"] .echo-article-content table {
    border: none;
    border-bottom: 2px solid #dee2e6;
}

html[data-theme="light"] table th {
    background-color: #f1f3f5; /* 表頭稍微加深 */
    color: #343a40;
    border-bottom: 2px solid #dee2e6;
}

html[data-theme="light"] table td {
    border: 1px solid #dee2e6;
    color: #495057;
}

/* 斑馬條紋：偶數行淺灰，奇數行純白 */
html[data-theme="light"] table tbody tr:nth-child(even) {
    background-color: #f8f9fa; 
}
html[data-theme="light"] table tbody tr:nth-child(odd) {
    background-color: #ffffff; 
}

/* 滑鼠懸停效果 (Hover) */
html[data-theme="light"] table tbody tr:hover {
    background-color: #e9ecef !important; /* 醒目的微深灰 */
}


/* ==========================================
   🌙 暗色模式 (Dark Mode) 專屬色彩
   ========================================== */
html[data-theme="dark"] .markdown-body table,
html[data-theme="dark"] .echo-article-content table {
    border: none;
    border-bottom: 2px solid #30363d;
}

html[data-theme="dark"] table th {
    background-color: #161b22; /* 搭配你原本專案的偏藍黑深色 */
    color: #f0f6fc;
    border-bottom: 2px solid #30363d;
}

html[data-theme="dark"] table td {
    border: 1px solid #30363d;
    color: #c9d1d9;
}

/* 暗色斑馬條紋 */
html[data-theme="dark"] table tbody tr:nth-child(even) {
    background-color: #1f242c; /* 微亮的暗灰藍 */
}
html[data-theme="dark"] table tbody tr:nth-child(odd) {
    background-color: #0d1117; /* 契合主背景色 */
}

/* 暗色滑鼠懸停效果 (Hover) */
html[data-theme="dark"] table tbody tr:hover {
    background-color: #262c36 !important; /* 點亮該行 */
}

/* =========================================================================
   📌 終極折行代碼塊 (No Line Numbers, Just Auto-Wrap)
   ========================================================================= */

/* 1. 容器：讓它自適應文章寬度，不強行固定寬度 */
.dick-code-wrapper {
    margin: 2em 0 !important;
    width: 100% !important; /* 隨父容器變化 */
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* 防止內容溢出 */
}

/* 2. 標題欄 (語言 + 複製按鈕) */
.dick-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    min-height: 40px; /* 確保在手機上有足夠的觸控高度 */
}
.dick-code-lang {
    font-size: 11px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* 3. 代碼區塊本體：強制自動折行 (關鍵！) */
.dick-code-wrapper pre[class*="language-"] {
    margin: 0 !important;
    padding: 1.5em !important; 
    background: transparent !important;
    
    /* 核心折行機制 */
    white-space: pre-wrap !important; /* 這裡改為 pre-wrap，這就是自動折行的開關 */
    word-break: break-all !important;  /* 強制長字串在邊界斷開 */
    overflow-wrap: break-word !important;
    
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. 防止 code 標籤繼承錯誤樣式 */
.dick-code-wrapper code {
    white-space: pre-wrap !important;
    display: block !important;
    color: #e6edf3 !important;
    font-family: Consolas, Monaco, monospace !important;
}

/* 5. 隱藏 Prism 可能生成的任何幽靈內容 */
.dick-code-wrapper pre[class*="language-"]::before,
.dick-code-wrapper pre[class*="language-"]::after {
    display: none !important;
    content: none !important;
}

.dick-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 圖標與文字的間距 */
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* 移除手機端點擊高亮 */
}

/* 懸停交互：更有質感 */
.dick-code-copy:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
    border-color: #58a6ff;
}

/* 點擊效果：微小的按下回饋 */
.dick-code-copy:active {
    transform: translateY(1px);
    background: rgba(255, 255, 255, 0.12);
}

/* 圖標控制：確保它絕對不會過大 */
.dick-code-copy svg {
    width: 13px !important;
    height: 13px !important;
    fill: currentColor;
    display: block;
}