/* 定義網站的主要顏色變數 */
:root {
    /* Primary Color - Linked to Ghost Admin "Accent color" */
    --primary-color: var(--ghost-accent-color, #ef0361);
    /* Auto-generate darker hover shade from primary color */
    --primary-hover: color-mix(in srgb, var(--primary-color), black 20%);

    /* Base Backgrounds - Superwhisper Style (Deep Black) */
    --bg-light: #050505;
    /* Main Page Background */
    --bg-medium: #121212;
    /* Cards, Headers, Sections */
    --bg-dark: #000000;
    /* Deepest Black */

    /* Metallic & Glass Effects */
    --metallic-gradient: linear-gradient(145deg, #2a2a2a, #151515);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --border-light: #333333;
    /* Subtle dark borders */

    /* Text Colors - High Contrast */
    --text-color: #e0e0e0;
    /* Main Body Text (Soft White) */
    --text-dark: #ffffff;
    /* Headings / Important Text (Pure White) */
    --text-muted: #a0a0a0;
    /* Metadata / Secondary */

    /* Lighting & Glows */
    --glow-color: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 15px var(--glow-color);
    /* Deep shadow + Soft Glow */

    --transition-normal: all 0.3s ease;
}

/* 全站動畫定義 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 平滑滾動設置 */
html {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden;
}

/* 增強文章可讀性 (優化 Heptabase 貼上體驗) */
.gh-content p {
    line-height: 1.7;
    /* 提升段落內部可讀性 */
    margin-top: 0;
    margin-bottom: 0;
    /* 移除預設的段落底邊距，讓間距控制更精準 */
}

/* 段落之間保留閱讀節奏 */
.gh-content p + p {
    margin-top: 0.9em;
}

/* 關鍵規則：針對空段落(Enter鍵)，給予一個固定的高度來模擬 Heptabase 的 Block 間距 */
.gh-content p:empty {
    line-height: 1.0;
    /* 這個值直接控制空行的高度，您可以微調 0.6 到 1.0 之間的值找到最滿意的效果 */
}

/* 為了確保 p:empty 在所有瀏覽器上都生效，我們用 ::before 插入一個看不見的內容，讓它有實體高度 */
.gh-content p:empty::before {
    content: " ";
    white-space: pre;
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.gh-content h1,
.gh-content h2 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

/* Mobile nav overlay & lock */
.gh-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1998;
    display: none;
}

body.gh-head-open .gh-nav-overlay {
    display: block;
}

body.gh-nav-lock {
    overflow: hidden;
}

/* 增強代碼塊樣式 */
.code-block-wrapper {
    position: relative;
    margin: 24px 0;
}

.gh-content pre {
    position: relative;
    background-color: #0f1118;
    color: #f6f7fb;
    border: 1px solid var(--color-border);
    padding: 46px 16px 16px 16px;
    border-radius: 12px;
    overflow-x: auto;
    white-space: pre;
    word-break: normal;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    line-height: 1.6;
}

/* 語言標籤樣式 */
.code-lang-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 12px 0 10px 0;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 複製按鈕樣式 */
.copy-code-button {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    color: #f6f7fb;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82em;
    opacity: 0.9;
    transition: var(--transition-base);
}

.copy-code-button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--color-border-strong);
}

.copy-code-button.copied {
    background-color: var(--color-primary);
    color: #0b0c10;
    border-color: transparent;
}

/* 增強引用塊樣式 - 提高對比度 */
.gh-content blockquote,
.gh-content>blockquote,
.gh-content>blockquote:not([class]) {
    border-left: 4px solid var(--primary-color) !important;
    padding: 20px 28px 20px 36px !important;
    /* 左側 36px 呼吸感 */
    font-style: italic !important;
    color: #e0e0e0 !important;
    background-color: rgba(255, 153, 187, 0.15) !important;
    border-radius: 8px !important;
    margin: 24px 0 !important;
    line-height: 1.7 !important;
}

/* 移除 screen.css 產生的額外左邊線條 */
.gh-content blockquote::before {
    display: none !important;
}


/* 高亮樣式 */
.gh-content .highlight {
    background-color: color-mix(in srgb, var(--primary-color), transparent 90%);
    transition: background-color 1.5s ease;
}

/* =========================================
   表格樣式 - 極簡透明設計
   ========================================= */
.gh-content table {
    width: auto !important;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 24px 0;

    /* 完全透明背景 */
    background: transparent !important;

    /* 移除所有邊框和陰影 */
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;

    /* 自適應內容 */
    table-layout: auto;
}

/* 表頭樣式 */
.gh-content table thead th,
.gh-content table th,
.gh-content table[data-node-type="table"]>tbody>tr:first-child>td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;

    /* 透明背景 */
    background: transparent !important;

    /* 文字樣式 */
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.5rem;
    white-space: nowrap;

    /* 底部分隔線 */
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* 內容儲存格樣式 */
.gh-content table td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: middle;

    /* 透明背景 */
    background: transparent !important;

    /* 文字樣式 */
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    line-height: 1.5;

    /* 行分隔線 */
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 移除 Heptabase 表格中 p 標籤的間距 */
.gh-content table[data-node-type="table"] td p {
    margin: 0;
}

/* 移除最後一行的底部邊框 */
.gh-content table tr:last-child td,
.gh-content table tr:last-child th {
    border-bottom: none !important;
}

/* Hover 效果 - 整行高亮 */
.gh-content table tbody tr {
    transition: all 0.2s ease;
}

.gh-content table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.gh-content table tbody tr:hover td {
    color: #ffffff;
}

/* 表頭 Hover 效果 - 微放大 */
.gh-content table thead th,
.gh-content table th,
.gh-content table[data-node-type="table"]>tbody>tr:first-child>td {
    transition: all 0.2s ease;
}

.gh-content table thead th:hover,
.gh-content table th:hover,
.gh-content table[data-node-type="table"]>tbody>tr:first-child>td:hover,
.gh-content table thead th.column-hover,
.gh-content table th.column-hover,
.gh-content table[data-node-type="table"]>tbody>tr:first-child>td.column-hover {
    transform: scale(1.05);
    color: var(--primary-color, #ef0361) !important;
}

/* 第一欄加粗 */
.gh-content table td:first-child {
    font-weight: 500;
    color: #ffffff;
}

/* 響應式設計 - 保持自適應 */
@media (max-width: 768px) {
    .gh-content table {
        display: table;
        width: auto !important;
    }

    .gh-content table thead th,
    .gh-content table th,
    .gh-content table td {
        padding: 8px 12px;
        font-size: 1.4rem;
    }
}

/* 在首頁隱藏「回到頂部」按鈕 */
body.home-template .back-to-top {
    display: none !important;
}

/* 懸浮目錄樣式 - 收合版（緊湊膊囊）*/
body.post-template .toc-floating {
    position: fixed;
    bottom: 30px;
    left: 20px;
    /* JS 將會動態覆寫 */

    /* 收合尺寸：緊湊不過寬 */
    width: fit-content;
    max-width: 320px;
    min-height: auto;

    /* Apple Style Glass Effect */
    background-color: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);

    /* Padding：緊湊版 */
    padding: 12px 18px;

    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 水平靠左 */
    justify-content: center;
    /* 垂直置中 */
    overflow: hidden;
}

/* 懸停展開狀態 - Dashboard Card 模式（大尺寸）*/
body.post-template .toc-floating:hover {
    height: auto;
    max-height: 85vh;
    width: 700px;
    max-width: 90vw;
    border-radius: 28px;
    background-color: rgba(16, 16, 16, 0.98);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    padding: 28px 36px 32px 36px;
    align-items: flex-start;
}

/* 標題區域 (收合時顯示當前章節) - 完整顯示 */
.toc-title {
    /* 字體設計：清晰易讀 */
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff !important;
    letter-spacing: 0.2px;
    text-align: left;

    /* 完整顯示標題，不截斷 */
    white-space: normal;
    overflow: visible;
    word-break: break-word;

    /* 尺寸 */
    width: 100%;
    max-width: 280px;
    line-height: 1.4;

    /* Flex 屬性 */
    flex-shrink: 0;
    cursor: default;

    opacity: 1 !important;
    visibility: visible !important;
}

/* 展開時隱藏收合狀態的標題，因為內容區域已有 H1 */
body.post-template .toc-floating:hover .toc-title {
    display: none;
}

/* 隱藏原本的箭頭 */
.toc-title::after {
    display: none;
}

/* 內容區域 (目錄列表) */
.toc-content {
    opacity: 0;
    width: 100%;
    margin-top: 16px;
    max-height: 0;
    overflow-y: auto;
    transition: opacity 0.3s ease;
    scrollbar-width: thin;
    /* 分隔線已在 H1 header 的 border-bottom */
    padding-top: 0;
}

/* 展開時顯示內容 */
body.post-template .toc-floating:hover .toc-content {
    opacity: 1;
    max-height: calc(85vh - 100px);
}

/* 標題行容器：包含 H1 標題和釘住按鈕 */
.toc-header-row {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--primary-color, #ef0361);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 展開時顯示 header-row */
body.post-template .toc-floating:hover .toc-header-row,
body.post-template .toc-floating.is-pinned .toc-header-row {
    display: flex;
    opacity: 1;
}

/* 展開時顯示的文章標題 (H1 Header) */
.toc-expanded-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    line-height: 1.4;
    word-wrap: break-word;
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
}

/* 📌 釘住按鈕樣式 */
.toc-pin-button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    opacity: 0.85;
    filter: none;
    /* 不使用灰階，保持彩色 */
}

.toc-pin-button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.toc-pin-button.active {
    opacity: 1;
    filter: grayscale(0%);
    background: color-mix(in srgb, var(--primary-color), transparent 80%);
}

/* 📌 釘住狀態：保持展開，固定在左側不遮擋文章 */
body.post-template .toc-floating.is-pinned,
body.post-template .toc-floating.is-pinned:hover {
    /* 固定定位到左側邊緣 */
    left: 20px !important;
    bottom: 30px !important;
    transform: none !important;

    /* 大尺寸，但不超過螢幕 */
    height: auto !important;
    max-height: 80vh !important;
    width: 360px !important;
    max-width: calc(100vw - 40px) !important;

    padding: 24px !important;
    border-radius: 24px !important;
    background: rgba(10, 10, 10, 0.96) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
}

body.post-template .toc-floating.is-pinned .toc-title,
body.post-template .toc-floating.is-pinned:hover .toc-title {
    display: none !important;
}

body.post-template .toc-floating.is-pinned .toc-content,
body.post-template .toc-floating.is-pinned:hover .toc-content {
    display: block !important;
    opacity: 1 !important;
    max-height: calc(80vh - 100px) !important;
}

/* 列表樣式調整 */
.toc-floating ul {
    list-style: none;
    padding: 6px;
    margin: 0;
    width: 100%;
}

.toc-floating li {
    padding: 8px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.5;
    font-size: 1.05rem;
}

.toc-floating li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.toc-floating li.active {
    background-color: color-mix(in srgb, var(--color-primary), transparent 70%);
    border-left: 3px solid var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.toc-floating a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    display: block;
    font-size: inherit;
    line-height: inherit;
}

.toc-floating li.active a {
    color: #fff;
}

.toc-floating a:hover {
    color: #fff;
}

/* 層級縮排 - 浮動目錄 */
.toc-floating li.toc-h1 {
    padding-left: 12px;
}

.toc-floating li.toc-h2 {
    padding-left: 12px;
    font-weight: 600;
    font-size: 1.1rem;
}

.toc-floating li.toc-h3 {
    padding-left: 28px;
    font-size: 1.05rem;
}

.toc-floating li.toc-h4 {
    padding-left: 44px;
    font-size: 1rem;
    opacity: 0.9;
}

.toc-floating li.toc-h5 {
    padding-left: 60px;
    font-size: 0.95rem;
    opacity: 0.85;
}

.toc-floating li.toc-h6 {
    padding-left: 76px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 滾動條樣式 - 極簡 Apple 風 */
.toc-content::-webkit-scrollbar {
    width: 4px;
}

.toc-content::-webkit-scrollbar-track {
    background: transparent;
}

.toc-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.toc-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 手機版隱藏 */
@media (max-width: 1200px) {
    body.post-template .toc-floating {
        display: none !important;
    }
}

/* 固定目錄容器 */
.article-toc-container {
    background-color: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    margin: 20px 0 30px 0;
    overflow: hidden;
    transition: var(--transition-normal);
    width: 100%;
    animation: fadeIn 0.5s ease-out;
}

.article-toc-container:hover {
    box-shadow: var(--shadow-md);
}

/* 目錄標題區域 */
.article-toc-header {
    padding: 10px 15px;
    background-color: var(--bg-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.article-toc-title {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.article-toc-toggle {
    color: var(--primary-color, #ef0361);
    transition: transform 0.3s ease, color 0.2s ease;
    font-size: 1.4em;
    font-weight: 600;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-toc-toggle:hover {
    color: var(--primary-color, #ef0361);
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.1);
}

/* 目錄內容區域 */
.article-toc-content {
    padding: 12px 20px;
    max-height: none;
    overflow-y: visible;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* 收合狀態 */
.article-toc-container.collapsed .article-toc-content {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
}

.article-toc-container.collapsed .article-toc-toggle {
    transform: rotate(-180deg);
}

/* 目錄列表樣式 */
.article-toc-content ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.article-toc-content li {
    margin: 6px 0;
    border-radius: 4px;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.article-toc-content li:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.article-toc-content li:hover a {
    color: #ffffff;
}

.article-toc-content a {
    color: var(--text-dark);
    text-decoration: none;
    display: block;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    word-wrap: break-word;
    line-height: 1.2;
}

/* 層級縮排 - 固定目錄 */
.article-toc-content li.toc-h1 {
    padding-left: 8px;
}

.article-toc-content li.toc-h2 {
    padding-left: 8px;
    font-weight: 600;
}

.article-toc-content li.toc-h3 {
    padding-left: 24px;
}

.article-toc-content li.toc-h4 {
    padding-left: 40px;
    opacity: 0.9;
}

.article-toc-content li.toc-h5 {
    padding-left: 56px;
    opacity: 0.85;
}

.article-toc-content li.toc-h6 {
    padding-left: 72px;
    opacity: 0.8;
}

/* 手機版側邊目錄觸發按鈕 - 玻璃膠囊 */
.mobile-toc-trigger {
    position: fixed;
    right: 12px;
    top: 55%;
    width: 48px;
    height: 110px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    color: #fff;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1009;
    cursor: pointer;
    user-select: none;
    display: none;
    opacity: 0.92;
    transform: translateY(-50%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, opacity 0.25s ease;
    animation: tocHandleFloat 2.8s ease-in-out infinite;
}

.mobile-toc-trigger::before {
    content: "目錄";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.85);
}

.mobile-toc-trigger::after {
    content: "";
    position: absolute;
    bottom: 12px;
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
}

.mobile-toc-trigger:hover {
    animation: none;
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.mobile-toc-open .mobile-toc-trigger {
    animation: none;
    opacity: 0.4;
    transform: translateY(-50%) translateX(-8px);
}

.mobile-toc-trigger.is-hidden {
    opacity: 0;
    pointer-events: none;
    animation: none;
    transform: translateY(-50%) translateX(10px);
}

@keyframes tocHandleFloat {
    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(-3px);
    }
}

.mobile-toc-hint {
    position: fixed;
    right: 68px;
    top: 55%;
    transform: translateY(-50%) translateX(8px);
    background: linear-gradient(160deg, rgba(20, 22, 30, 0.94), rgba(20, 22, 30, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1011;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: min(240px, 60vw);
}

.mobile-toc-hint::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: inherit;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-toc-hint-text {
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.mobile-toc-hint-dismiss {
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mobile-toc-hint-dismiss:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

body.has-mobile-toc .mobile-toc-hint {
    display: block;
}

.mobile-toc-hint.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

body.mobile-toc-open .mobile-toc-hint {
    opacity: 0;
    pointer-events: none;
}

/* 手機版側邊目錄容器 */
.mobile-toc-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #fff;
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1010;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateX(100%);
    will-change: transform;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.mobile-toc-container.active {
    transform: translateX(0);
}

.mobile-toc-header {
    padding: 15px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.mobile-toc-header h3 {
    margin: 0;
    font-size: 18px;
}

.mobile-toc-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-toc-content {
    padding: 15px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.mobile-toc-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666;
    gap: 8px;
    padding: 24px 12px;
}

.mobile-toc-empty-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
}

.mobile-toc-empty-hint {
    font-size: 1.3rem;
    color: #777;
}

.mobile-toc-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-toc-content li {
    margin: 6px 0;
    border-radius: 5px;
    transition: all 0.3s;
}

.mobile-toc-content li.active {
    background-color: #f0f8ff;
    border-left: 3px solid var(--primary-color);
}

.mobile-toc-content a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 6px 8px;
    word-break: break-word;
    line-height: 1.2;
}

.mobile-toc-content a:hover {
    color: var(--primary-color);
}

/* 不同層級標題的縮排 */
.mobile-toc-content li.toc-h1 {
    padding-left: 0;
    font-weight: bold;
    font-size: 1.05em;
    border-bottom: 1px solid #eee;
    margin-top: 12px;
}

.mobile-toc-content li.toc-h2 {
    padding-left: 12px;
}

.mobile-toc-content li.toc-h3 {
    padding-left: 24px;
}

.mobile-toc-content li.toc-h4 {
    padding-left: 36px;
}

.mobile-toc-content li.toc-h5 {
    padding-left: 48px;
}

.mobile-toc-content li.toc-h6 {
    padding-left: 60px;
}

/* 遮罩層 */
.mobile-toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1008;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.mobile-toc-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 平板與手機版顯示 (僅在需要時顯示) */
@media (max-width: 1200px) {

    body.has-mobile-toc .mobile-toc-trigger,
    body.has-mobile-toc .mobile-toc-container,
    body.has-mobile-toc .mobile-toc-overlay {
        display: block;
    }
}

@media (min-width: 1201px) {

    .mobile-toc-trigger,
    .mobile-toc-container,
    .mobile-toc-overlay {
        display: none !important;
    }
}

/* 回到頂部按鈕 - 右側圓形 */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    /* 移到右側 */
    width: 54px;
    /* 恢復圓形尺寸 */
    height: 54px;
    background-color: rgba(255, 255, 255, 0.05);
    /* 極淡背景 */
    backdrop-filter: blur(12px);
    /* 磨砂玻璃效果 */
    -webkit-backdrop-filter: blur(12px);
    border: none;
    /* 去除邊框，由進度條或光暈營造邊界感 */
    border-radius: 50%;
    /* 正圓形 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Removing shadow that might look like a frame */
    box-shadow: none;
    /* REMOVED overflow:hidden - it clips the ::before glow element */
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--primary-color), transparent 70%),
        /* 主色擴散光暈 */
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Shine Effect Reflected Light - DISABLED */
.back-to-top::after {
    display: none;
}

.back-to-top:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

/* 中心圖標 */
.back-to-top i {
    font-size: 18px;
    z-index: 2;
    position: relative;
    color: #fff;
    /* 白色圖標 */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.back-to-top:hover i {
    color: #fff;
    text-shadow: 0 0 15px color-mix(in srgb, var(--primary-color), transparent 20%);
    /* Hover 時圖標發光 */
}

/* Progress Glow Effect - Controlled by JS inline style */
/* JS sets box-shadow directly on the element */

/* Hide old SVG ring */
.progress-ring {
    display: none;
}

/* 進度環背景圓形 (淡色軌道) */
.progress-ring__background {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 2.5;
    fill: none;
}

@media (max-width: 768px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
    }

    .back-to-top i {
        font-size: 16px;
    }
}

/* 閱讀進度條容器 - 液態玻璃風格 */
.reading-progress-bar {
    position: fixed;
    left: 0;
    top: 0;
    /* 改為頂部 */
    width: 0%;
    height: 10px;
    /* 再加粗 */
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--primary-color), transparent 40%) 0%,
            color-mix(in srgb, var(--primary-color), transparent 10%) 50%,
            var(--primary-color) 100%);
    backdrop-filter: blur(4px);
    /* 玻璃質感 */
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--primary-color), transparent 70%),
        0 0 10px color-mix(in srgb, var(--primary-color), transparent 80%) inset;
    /* 內部發光感 */
    transition: width 0.1s ease-out;
    /* 更平滑的過渡 */
    z-index: 1002;
    /* 確保在最上層 */
    border-radius: 0 3px 3px 0;
    /* 右側圓角 */
}

/* 增加一個亮光掃過的效果 */
.reading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%);
    border-radius: 0 3px 3px 0;
}

/* 進度百分比顯示 - 已隱藏 */
.reading-progress-percentage {
    display: none !important;
}

/* ===== 標題錨點連結樣式 (v4 - 最終精修版) ===== */
/* 標題定位基準保持不變 */
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    position: relative;
    scroll-margin-top: 80px;
}

/* 錨點連結圖示本身 - 樣式微調 */
.heading-anchor-link {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-150%, -50%);
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    color: #888;
    /* 預設圖示顏色調暗一些，更有質感 */
    background-color: transparent;
    border: none;
    /* 移除預設邊框 */
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* 關鍵：設定 SVG 圖示的大小與樣式 */
.heading-anchor-link svg {
    width: 18px;
    /* 精準控制 SVG 大小 */
    height: 18px;
    /* 精準控制 SVG 大小 */
    transition: transform 0.2s ease;
}

/* 滑鼠移到標題上時，顯示錨點圖示 */
.gh-content h1:hover .heading-anchor-link,
.gh-content h2:hover .heading-anchor-link,
.gh-content h3:hover .heading-anchor-link,
.gh-content h4:hover .heading-anchor-link,
.gh-content h5:hover .heading-anchor-link,
.gh-content h6:hover .heading-anchor-link {
    opacity: 1;
}

/* 【顏色修改】滑鼠移到圖示上時，使用低調專業的背景色 */
.heading-anchor-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* 半透明亮白色背景 */
    color: #fff;
    /* 圖示變為純白，形成對比 */
}

/* 提示框樣式 (Tooltip) */
.tooltiptext {
    visibility: hidden;
    width: 80px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* 顯示在上方 */
    left: 50%;
    margin-left: -40px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    pointer-events: none;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.heading-anchor-link:hover .tooltiptext,
.tooltiptext.visible {
    visibility: visible;
    opacity: 1;
}

/* 滑鼠移到圖示上時，給圖示一個小小的縮放效果 */
.heading-anchor-link:hover svg {
    transform: scale(1.1);
}

/* 點擊後顯示的提示訊息 - 樣式微調 */
.heading-anchor-link .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: #333;
    /* 提示框使用深灰色，避免搶戲 */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -50px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    font-weight: normal;
}

/* 複製成功時的提示，使用你的主題色，給予正面反饋 */
.heading-anchor-link .tooltiptext.success {
    background-color: var(--primary-color);
}

/* 顯示提示 */
.heading-anchor-link .tooltiptext.visible {
    visibility: visible;
    opacity: 1;
}

/* 手機版隱藏標題錨點連結 */
@media (max-width: 768px) {
    .heading-anchor-link {
        display: none !important;
    }
}

/* ========== 追加：功能相關的輕量樣式（保持現有風格） ========== */

/* 通用焦點可見（a/button） */
.gh-content a:focus-visible,
.gh-content button:focus-visible,
.cx-share-bar a:focus-visible,
.cx-share-bar button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 麵包屑 */
.cx-breadcrumbs {
    font-size: 0.9rem;
    color: #666;
    margin: 8px 0 12px;
}

.cx-breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.cx-breadcrumbs a:hover {
    text-decoration: underline;
}

.cx-breadcrumbs .cx-sep {
    margin: 0 6px;
    color: #999;
}

/* 閱讀資訊 */
.cx-reading-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #666;
    margin: 6px 0 16px;
}

.cx-reading-meta .cx-dot {
    color: #999;
}

/* 分享列 */
.cx-share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 8px;
}

.cx-share-bar .cx-share-links {
    display: flex;
    gap: 10px;
}

.cx-share-bar a,
.cx-share-bar button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: #888;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease;
}

.cx-share-bar a:hover,
.cx-share-bar button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.cx-share-bar i {
    font-size: 16px;
}

/* 表格容器（小螢幕橫向捲動） */
.cx-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cx-table-responsive table {
    min-width: 600px;
}

/* 動態降低（尊重使用者偏好） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 手機細節調整 */
@media (max-width: 768px) {
    .cx-share-bar {
        justify-content: flex-start;
    }

    .cx-table-responsive table {
        min-width: 520px;
    }
}

/* =========================================
   Global Aesthetics & Variables
   ========================================= */

:root {
    /* 2. Color Palette - Calm Dark (Primary follows Ghost accent, default pink) */
    --color-primary: var(--ghost-accent-color, #ef0361);
    --color-primary-dark: color-mix(in srgb, var(--color-primary), black 20%);
    --color-secondary: #ffc46a;

    --color-bg: #0b0c10;
    --color-bg-alt: #11131a;
    --color-bg-glass: rgba(22, 24, 32, 0.7);

    --color-text-main: #e6e9f0;
    --color-text-muted: #9aa2b5;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-surface: rgba(20, 22, 30, 0.92);
    --color-surface-soft: rgba(20, 22, 30, 0.75);
    --color-overlay: rgba(0, 0, 0, 0.55);

    /* 3. Typography Variables */
    --font-sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: var(--font-sans);
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* 4. Effects */
    --shadow-sm: 0 8px 16px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.42);
    --shadow-neon: 0 10px 26px rgba(0, 0, 0, 0.28);

    --glass-blur: blur(12px);
    --glass-border: 1px solid var(--color-border);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --transition-base: all 0.25s ease;
}

/* Buttons & Inputs - shared */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.btn-primary {
    background: var(--color-primary);
    border-color: transparent;
    color: #0b0c10;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
    color: #fff;
}

.btn-ghost:hover {
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.08);
}

.form-input {
    width: 100%;
    min-height: 48px;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 1.5rem;
    transition: var(--transition-base);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
    outline: none;
}

/* Apply Global Styles */
body {
    font-family: var(--font-sans);
    color: var(--color-text-main);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
}

/* Dark Mode Overrides */
html.dark-mode body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-main-dark);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: var(--color-text-main-dark);
}


/* =========================================
   Homepage Hero Section Redesign (Dark Tech)
   ========================================= */

.custom-hero-section {
    padding: 140px 0 120px;
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.03), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(239, 3, 97, 0.05), transparent 25%);
    position: relative;
    overflow: hidden;
}

.custom-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Left Content */
.custom-hero-content {
    flex: 1;
    max-width: 680px;
    /* 增加寬度 */
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.custom-hero-content .site-title,
.custom-hero-content .site-description.hero-markdown h1 {
    font-family: var(--font-sans);
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--color-text-main);
    text-align: inherit;
    letter-spacing: -0.04em;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
    /* Soft Glow */
    width: 100%;
    /* 確保填滿容器 */
}

.custom-hero-content .site-description {
    font-family: var(--font-sans);
    font-size: 2rem;
    line-height: 1.6;
    color: var(--color-primary);
    margin-bottom: 40px;
    font-weight: 500;
    text-align: left;
    text-shadow: 0 0 20px color-mix(in srgb, var(--primary-color), transparent 80%);
    width: 100%;
    /* 確保與標題同寬 */
}

/* Hero Markdown 樣式 */
.custom-hero-content .site-description.hero-markdown p {
    margin: 0 0 1em 0;
}

.custom-hero-content .site-description.hero-markdown p:last-child {
    margin-bottom: 0;
}

.custom-hero-content .site-description.hero-markdown a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

.custom-hero-content .site-description.hero-markdown a:hover {
    color: var(--color-primary);
    text-decoration-color: #ffffff;
}

.custom-hero-content .site-description.hero-markdown strong {
    font-weight: 900;
    color: #ffffff;
    text-shadow:
        0 0 1px #ffffff,
        0 0 12px color-mix(in srgb, var(--color-primary), transparent 35%),
        0 0 26px color-mix(in srgb, var(--color-primary), transparent 45%),
        0 0 44px color-mix(in srgb, var(--color-primary), transparent 55%);
    -webkit-text-stroke: 0.4px color-mix(in srgb, var(--color-primary), #ffffff 30%);
}

.custom-hero-content .site-description.hero-markdown em {
    font-style: italic;
}

.custom-hero-content .site-description.hero-markdown code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
}

/* Hero Markdown 標題樣式 */
.custom-hero-content .site-description.hero-markdown .hero-heading {
    color: #ffffff;
    margin: 0.5em 0;
    text-align: inherit;
}

.custom-hero-content .site-description.hero-markdown h1.hero-heading {
    font-size: 2.4rem;
    font-weight: 700;
}

.custom-hero-content .site-description.hero-markdown h2.hero-heading {
    font-size: 2rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown h3.hero-heading {
    font-size: 1.8rem;
    font-weight: 600;
}

/* Hero Markdown 列表樣式 */
.custom-hero-content .site-description.hero-markdown .hero-list {
    margin: 0.8em 0;
    padding-left: 1.5em;
    text-align: inherit;
}

.custom-hero-content .site-description.hero-markdown .hero-list li {
    margin: 0.3em 0;
    line-height: 1.5;
}

/* Hero Markdown 段落樣式 - 依容器對齊 */
.custom-hero-content .site-description.hero-markdown p {
    text-align: inherit;
    margin: 0.5em 0;
}

.custom-hero-content .site-description.hero-markdown h2,
.custom-hero-content .site-description.hero-markdown h3,
.custom-hero-content .site-description.hero-markdown h4,
.custom-hero-content .site-description.hero-markdown h5,
.custom-hero-content .site-description.hero-markdown h6 {
    color: #ffffff;
    margin: 0.5em 0;
    text-align: inherit;
}

.custom-hero-content .site-description.hero-markdown h2 {
    font-size: 2rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown h3 {
    font-size: 1.8rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown h4 {
    font-size: 1.6rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown h5 {
    font-size: 1.4rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown h6 {
    font-size: 1.2rem;
    font-weight: 600;
}

.custom-hero-content .site-description.hero-markdown ul,
.custom-hero-content .site-description.hero-markdown ol {
    margin: 0.8em 0;
    padding-left: 1.5em;
    text-align: inherit;
}

.custom-hero-content .site-description.hero-markdown li {
    margin: 0.3em 0;
    line-height: 1.5;
}

.custom-hero-content .site-description.hero-markdown blockquote {
    margin: 0.8em 0;
    padding-left: 1em;
    border-left: 3px solid var(--color-primary);
    color: #ffffff;
}

.custom-hero-content .site-description.hero-markdown .kg-image-card,
.custom-hero-content .site-description.hero-markdown .kg-gallery-card,
.custom-hero-content .site-description.hero-markdown .kg-embed-card,
.custom-hero-content .site-description.hero-markdown .kg-video-card,
.custom-hero-content .site-description.hero-markdown .kg-audio-card,
.custom-hero-content .site-description.hero-markdown .kg-file-card,
.custom-hero-content .site-description.hero-markdown .kg-bookmark-card,
.custom-hero-content .site-description.hero-markdown .kg-product-card,
.custom-hero-content .site-description.hero-markdown .kg-button-card,
.custom-hero-content .site-description.hero-markdown .kg-callout-card,
.custom-hero-content .site-description.hero-markdown .kg-toggle-card,
.custom-hero-content .site-description.hero-markdown .kg-signup-card,
.custom-hero-content .site-description.hero-markdown figure,
.custom-hero-content .site-description.hero-markdown img,
.custom-hero-content .site-description.hero-markdown video,
.custom-hero-content .site-description.hero-markdown iframe,
.custom-hero-content .site-description.hero-markdown audio {
    display: none;
}

/* Form Styling - Glassmorphism */
.custom-hero-form {
    margin-top: 40px;
}

.custom-subscribe-form .form-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.custom-subscribe-form input {
    flex: 1;
    min-width: 220px;
    padding: 16px 24px;
    border: var(--glass-border);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    font-family: var(--font-sans);
    font-size: 1.6rem;
    color: var(--color-text-main);
    outline: none;
    transition: var(--transition-base);
}

.custom-subscribe-form input:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color), transparent 90%);
}

.custom-subscribe-form button {
    margin-left: auto;
    /* Push button to the right */
    background-color: rgba(255, 255, 255, 0.05);
    /* Substle glass background */
    color: var(--color-primary);
    /* Glass Border: Subtle white, not colored */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 14px 36px;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    height: 58px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

/* Continuous Shine Animation */
.custom-subscribe-form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: 0.5s;
}

.custom-subscribe-form button:hover::before {
    left: 100%;
    transition: 0.5s;
}

.custom-subscribe-form button:hover {
    background-color: var(--color-primary);
    color: #fff;
    /* Keep text white for better contrast against bright primary */
    /* Inner Glow (Ring) + Strong Outer Glow */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        /* Subtle inner highlight */
        0 0 40px color-mix(in srgb, var(--primary-color), transparent 40%),
        0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: transparent;
    /* Merge with background */
    transform: translateY(-2px);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.custom-hero-note {
    margin-top: 24px;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: left;
}

/* Right Image */
.custom-hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
    opacity: 0;
}

.custom-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: var(--shadow-neon);
    transition: var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-hero-image img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsive */
@media (max-width: 900px) {
    .custom-hero-inner {
        flex-direction: column-reverse;
        /* Image on top or bottom? User image shows side by side. Usually stack image top or bottom. Let's stack image bottom for now or top. Standard is often image top. But let's stick to content first for SEO/UX. */
        text-align: center;
        gap: 40px;
    }

    .custom-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .custom-hero-content .site-title,
    .custom-hero-content .site-description,
    .custom-hero-note {
        text-align: center;
    }

    .custom-subscribe-form .form-group {
        flex-direction: column;
    }

    .custom-subscribe-form input,
    .custom-subscribe-form button {
        width: 100%;
    }
}

/* Form States - Inline Style (Below Form) */
.custom-subscribe-form .message-success,
.custom-subscribe-form .message-error {
    position: relative;
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
    color: #fff;
    display: none;
    animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    text-align: left;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.custom-subscribe-form.success .message-success {
    display: block;
    background-color: rgba(0, 242, 255, 0.08);
    border-color: rgba(0, 242, 255, 0.3);
}

.custom-subscribe-form.error .message-error {
    display: block;
    background-color: rgba(255, 50, 50, 0.1);
    border-color: #ff3333;
    box-shadow: 0 0 30px rgba(255, 50, 50, 0.2);
}

.custom-subscribe-form .loader {
    display: none;
}

.custom-subscribe-form.loading button .loader {
    display: inline-block;
    height: 30px;
    width: 30px;
}

.custom-subscribe-form.loading button .loader svg {
    height: 100%;
    width: 100%;
    fill: var(--color-primary);
}

/* 頁面暫無額外首頁區塊樣式；未來如要新增區塊可在此擴充 */

.custom-subscribe-form.loading button span:not(.loader) {
    display: none;
}

.custom-subscribe-form.success .form-group {
    display: none;
}

/* 文章摘要 (Excerpt) 對比度增強 */
.article-excerpt {
    color: #c0c0c0 !important;
    /* 提高對比度，從深灰改為淺灰 */
}

.post-card-excerpt {
    color: #b0b0b0 !important;
    /* 卡片摘要也提高對比度 */
}

/* =========================================
   Component Overhaul (Dark Tech)
   ========================================= */

/* 1. Sticky Glass Header */
.gh-head {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated Navigation Links */
.gh-head-menu .nav li a {
    position: relative;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.gh-head-menu .nav li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    opacity: 0;
    box-shadow: 0 0 10px var(--color-primary);
}

.gh-head-menu .nav li a:hover {
    color: var(--color-text-main);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.gh-head-menu .nav li a:hover::after {
    width: 100%;
    opacity: 1;
}

/* Ghost Portal */
/* Account 按鈕保持顯示 - 不再隱藏，讓用戶可以使用 Ghost Portal 管理帳戶 */

/* Header Actions */
.gh-head-actions .gh-search {
    color: var(--color-text-main);
    transition: transform 0.2s ease;
}

.gh-head-actions .gh-search:hover {
    transform: scale(1.1);
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
}

.gh-head-button {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 8px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.gh-head-button:hover {
    background-color: var(--color-primary);
    color: #000 !important;
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
    transform: translateY(-1px);
}

/* 2. Post Cards (The Feed) - Floating Glass */
.post-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
    border: var(--glass-border);
    background: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.post-card:hover {
    transform: translateY(-8px) scale(1.01);
    /* Premium Glow: Backlit effect instead of solid border */
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.5),
        0 0 20px -5px color-mix(in srgb, var(--primary-color), transparent 60%);
    /* Maintain subtle glass border, slightly brighter on hover but not colored */
    border-color: rgba(255, 255, 255, 0.25);
}

.post-card-image-link {
    overflow: hidden;
    display: block;
}

.post-card-image {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: brightness(0.8) contrast(1.1);
}

.post-card:hover .post-card-image {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.2);
}

.post-card-content {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
}

.post-card-header {
    display: flex;
    flex-direction: column;
}

.post-card-title {
    font-family: var(--font-sans);
    font-weight: 700;
    margin-bottom: 0;
    color: var(--color-text-main);
    /* 固定高度：最多顯示 2 行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
    /* 2 行的高度 */
}

/* =========================================
   Post Card Byline (作者 + 更新時間) - 標題正下方
   ========================================= */
.post-card-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
}

.post-card-author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-card-author-avatar svg {
    width: 12px;
    height: 12px;
    fill: var(--color-text-muted);
}

.post-card-author-name {
    font-weight: 600;
    color: var(--color-text-main);
}

.post-card-byline-date {
    color: var(--color-text-muted);
    opacity: 0.8;
}

/* =========================================
   Post Card Excerpt with Tooltip
   ========================================= */

/* 確保卡片可以溢出顯示 tooltip */
.post-card {
    overflow: visible !important;
    position: relative;
    z-index: 1;
    transition: z-index 0s 0.3s;
    /* 延遲降低 z-index */
}

/* Hover 時整張卡片提升到最上層 */
.post-card:hover {
    z-index: 100;
    transition: z-index 0s 0s;
    /* 立即提升 */
}

.post-card-content {
    overflow: visible !important;
}

.post-card-excerpt-wrapper {
    position: relative;
    margin-top: 16px;
}

.post-card-excerpt {
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    line-height: 1.6;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Tooltip - 精緻浮動卡片設計 */
.post-card-excerpt-tooltip {
    position: absolute;
    left: -16px;
    right: -16px;
    top: -8px;
    padding: 20px 24px;

    /* 玻璃質感背景 */
    background: linear-gradient(145deg,
            rgba(25, 25, 30, 0.98) 0%,
            rgba(15, 15, 18, 0.98) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    /* 精緻邊框 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    /* 多層陰影營造深度 */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 12px 28px rgba(0, 0, 0, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* 文字樣式 */
    font-size: 1.45rem;
    line-height: 1.75;
    color: #e8e8e8;
    font-family: var(--font-sans);

    /* 隱藏狀態 - 從原位展開 */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96) translateY(4px);
    transform-origin: top left;
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0.25s;

    z-index: 9999;
    pointer-events: none;
}

/* 整張卡片 Hover 時顯示 Tooltip */
.post-card:hover .post-card-excerpt-tooltip {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0s;
    pointer-events: auto;
}

/* Hover 時隱藏原本的 excerpt */
.post-card:hover .post-card-excerpt {
    opacity: 0;
}

@media (hover: none), (max-width: 900px) {
    .post-card-excerpt-tooltip {
        display: none;
    }

    .post-card:hover .post-card-excerpt {
        opacity: 1;
    }
}

/* 移除舊的 footer meta 樣式 - 不再使用 */
.post-card-meta {
    display: none;
}

/* Dark mode support for cards (Redundant but safe) */
html.dark-mode .post-card {
    background: var(--color-bg-glass);
    border: var(--glass-border);
}

/* 3. Buttons & Interactions - Continuous Shine */
.gh-btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-weight: 600;
    transition: var(--transition-base);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-main) !important;
    backdrop-filter: blur(4px);
}

.gh-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: 0.5s;
}

.gh-btn:hover::before {
    left: 100%;
}

.gh-btn:hover {
    background-color: var(--color-primary);
    color: #000 !important;
    border-color: var(--color-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color), transparent 60%);
    transform: translateY(-2px);
}

/* =========================================
   Landing Page Sections (Dark Tech)
   ========================================= */

.lp-section {
    padding: 100px 0;
    position: relative;
}

.lp-section-title {
    font-family: var(--font-sans);
    font-size: 3.6rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: var(--color-text-main);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Features Section */
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.lp-feature-card {
    background: var(--color-bg-glass);
    border: var(--glass-border);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-base);
}

.lp-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-neon);
    border-color: var(--color-primary);
}

.lp-icon {
    font-size: 4rem;
    margin-bottom: 24px;
    display: inline-block;
    filter: drop-shadow(0 0 10px var(--color-primary));
}

.lp-feature-card h3 {
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var(--color-text-main);
}

.lp-feature-card p {
    color: var(--color-text-muted);
    font-size: 1.6rem;
    line-height: 1.6;
}

/* About Section */
.lp-about {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary-color), transparent 98%), transparent);
}

.lp-about-inner {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.lp-about-image {
    flex: 1;
    position: relative;
}

.lp-about-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    filter: grayscale(100%) contrast(1.2);
    transition: var(--transition-base);
}

.lp-about-image:hover img {
    filter: grayscale(0%) contrast(1);
    box-shadow: var(--shadow-neon);
}

.lp-about-content {
    flex: 1;
}

.lp-about-content .lp-section-title {
    text-align: left;
    margin-bottom: 30px;
}

.lp-lead {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.lp-about-content p {
    font-size: 1.8rem;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    line-height: 1.8;
}

/* Testimonials Section */
.lp-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.lp-testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 32px;
    border-radius: var(--radius-lg);
    position: relative;
}

.lp-testimonial-card p {
    font-size: 1.8rem;
    font-style: italic;
    color: var(--color-text-main);
    margin-bottom: 24px;
    line-height: 1.6;
}

.lp-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lp-user img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
}

.lp-user span {
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .lp-about-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .lp-about-content .lp-section-title {
        text-align: center;
    }
}

/* 4. Footer Redesign (Dark Tech) */
.site-footer {
    background-color: #020202;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 0 40px;
    margin-top: 80px;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.5;
}

.site-footer .inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer-nav ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-footer-nav a {
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    transition: all 0.2s ease;
    font-size: 1.5rem;
}

.site-footer-nav a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
    padding-left: 8px;
}

/* 隱藏 Ghost 預設 Portal Sign up 連結（footer） */
footer a[href^="#/portal/signup"] {
    display: none !important;
}

.copyright {
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    opacity: 0.6;
    font-size: 1.3rem;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* =========================================
   Metadata Customization (Author & Date)
   ========================================= */

/* Post Card Metadata */
.post-card-meta-author-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    color: var(--color-text-muted);
    width: 100%;
}

.post-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-profile-image {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-profile-image svg {
    width: 14px;
    height: 14px;
    fill: var(--color-text-muted);
}

.author-name {
    font-weight: 600;
    color: var(--color-text-main);
}

.post-card-meta-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.2);
}

.post-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-card-date svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-primary);
}

/* Post Page Header Metadata */
.byline-meta-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    color: var(--color-text-muted);
}

.byline-meta-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

.byline-meta-date svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-primary);
}

/* Fix: Author Avatar Alignment in Post Header */
.article-byline-content .author-list-item .author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
    border: 2px solid var(--color-primary);
}

.article-byline-content .author-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Ensures no extra inline spacing */
}

/* Fix: Article Title Contrast */
.article-title {
    color: #ffffff !important;
    /* Force white for maximum contrast */
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    /* Add shadow for readability */
}

/* Fix: Content Headings Contrast */
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    color: #ffffff !important;
    opacity: 1;
    /* Ensure no transparency */
}

/* Fix: Author Name Contrast in Article Header */
.article-byline-meta .author-name {
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.article-byline-meta .author-name a {
    color: #ffffff !important;
}

.article-byline-meta .author-name a:hover {
    color: var(--color-primary) !important;
}

/* =========================================
   文章標籤 - Apple 風格膠囊按鈕設計
   ========================================= */
.article-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.article-tag .post-card-primary-tag a {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #ffffff !important;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 反射光效果 */
.article-tag .post-card-primary-tag a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.5s ease;
}

.article-tag .post-card-primary-tag a:hover::before {
    left: 100%;
}

.article-tag .post-card-primary-tag a:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Featured 標籤也調整 */
.article-tag .post-card-featured {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color), transparent 80%) 0%, color-mix(in srgb, var(--primary-color), transparent 90%) 100%);
    border: 1px solid color-mix(in srgb, var(--primary-color), transparent 70%);
    border-radius: 20px;
    color: var(--primary-color) !important;
    font-size: 1.3rem;
    font-weight: 600;
}

/* =========================================
   作者與更新日期 - 同一行顯示
   ========================================= */
.article-byline-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.article-byline-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.article-byline-meta .author-name {
    margin: 0;
    font-size: 1.5rem;
}

.byline-meta-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 在作者名稱後加上分隔符號和「更新於：」的文字 */
.byline-meta-content::before {
    content: '更新於：';
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
}

.byline-meta-date {
    margin-left: 0;
}

.byline-meta-date time {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.4rem;
}

/* =========================================
   Callout 中的粗體字修正
   ========================================= */
.kg-callout-card strong,
.kg-callout-card b,
.kg-callout-text strong,
.kg-callout-text b,
.kg-callout-card code,
.kg-callout-text code,
.gh-content .kg-callout-card strong,
.gh-content .kg-callout-card b {
    font-weight: 900 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* =========================================
   UI Contrast Improvements (Captions & Selection)
   ========================================= */

/* 1. Video/Image Caption Visibility */
figcaption,
.gh-content figcaption {
    color: rgba(255, 255, 255, 0.9) !important;
    /* Significant increase in brightness */
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 24px;
    opacity: 1 !important;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* Adds a subtle shadow to separate from background */
}

/* 2. Text Selection High Contrast */
::selection {
    background: var(--primary-color) !important;
    /* Use existing primary accent color */
    color: #ffffff !important;
    text-shadow: none !important;
}

::-moz-selection {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* =========================================
   訂閱彈窗 V3 (Subscribe Modal - JS Only)
   ========================================= */

/* 隱藏所有 Portal 觸發的按鈕 */
/* V4: 隱藏原生 Portal 浮動按鈕，但保留 DOM 以防當機 */
/* V4: 僅在使用自訂 Portal (未登入) 時隱藏原生 Portal Root */
/* 當使用自訂 Portal 時，隱藏原生 Portal 浮動按鈕 */
/* 使用 opacity/visibility 而非 display:none，避免破壞 Portal JavaScript */
html.portal-hide-trigger:not(.gh-portal-open) #ghost-portal-root,
html.portal-hide-trigger body:not(.gh-portal-open) #ghost-portal-root {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Portal 通知出現時允許點擊關閉 */
html.portal-toast-active #ghost-portal-root,
body.portal-toast-active #ghost-portal-root {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

html.portal-toast-active #ghost-portal-root iframe,
body.portal-toast-active #ghost-portal-root iframe {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

html.portal-toast-active #ghost-portal-root .cx-portal-toast,
body.portal-toast-active #ghost-portal-root .cx-portal-toast {
    pointer-events: auto !important;
    z-index: 10001 !important;
}

html.portal-toast-active #ghost-portal-root .cx-portal-toast *,
body.portal-toast-active #ghost-portal-root .cx-portal-toast * {
    pointer-events: auto !important;
}

/* 確保 Portal 開啟時（class 可能加在 html 或 body）正常顯示 */
html.gh-portal-open #ghost-portal-root,
body.gh-portal-open #ghost-portal-root {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
    inset: 0 !important;
}

/* 確保 iframe 在開啟時位於頂層 */
html.gh-portal-open #ghost-portal-root iframe,
body.gh-portal-open #ghost-portal-root iframe {
    position: fixed !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 隱藏原生 Portal 按鈕（header 的 signup/signin）*/
[data-portal="signup"],
[data-portal="signin"] {
    display: none !important;
}

/* 隱藏 footer 中的 Sign up 連結（來自 Secondary Navigation）*/
.site-footer-nav a[href*="/portal"],
.site-footer-nav .nav-sign-up {
    display: none !important;
}

/* 自訂浮動訂閱按鈕 - 左側膠囊形狀 */
.floating-subscribe-btn {
    position: fixed;
    bottom: 26px;
    right: 110px;
    /* 在回頂按鈕左邊 */
    /* 膠囊形狀 */
    height: 60px;
    padding: 0 28px;
    border-radius: 30px;
    /* 磨砂玻璃效果 */
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 文字樣式 */
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    z-index: 9990;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.mobile-toc-open .floating-subscribe-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
}

.floating-subscribe-btn:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--primary-color), transparent 70%),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

.floating-subscribe-btn svg {
    width: 22px;
    height: 22px;
    fill: var(--primary-color);
    flex-shrink: 0;
}

/* 遮罩層 */
.subscribe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* 彈窗主體 */
.subscribe-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    width: min(500px, 92vw);
    background: var(--color-surface);
    border-radius: 18px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, transform 0.24s ease;
    overflow: hidden;
}

.subscribe-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 關閉按鈕 */
.subscribe-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.subscribe-popup-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transform: scale(1.03);
}

/* 內容區域 */
.subscribe-popup-content {
    padding: 42px 34px 34px;
    text-align: center;
}

.subscribe-popup-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.3;
}

.subscribe-popup-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 24px;
    line-height: 1.6;
}

.subscribe-popup-hint {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 18px;
    line-height: 1.5;
}

.subscribe-popup-hint a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.subscribe-popup-hint a:hover {
    text-decoration: underline;
}

/* 表單 */
.subscribe-popup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.subscribe-popup-form input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.subscribe-popup-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.subscribe-popup-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
}

.subscribe-popup-form button {
    width: 100%;
    padding: 16px 24px;
    background: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 12px;
    color: #0b0c10;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
    margin-top: 4px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.subscribe-popup-form button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.subscribe-popup-form .message-success {
    background: rgba(0, 200, 83, 0.12);
    border: 1px solid rgba(0, 200, 83, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    color: #9fffbf;
    display: none;
}

.subscribe-popup-form.success .message-success {
    display: block;
}

.subscribe-popup-form .message-error {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.28);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    color: #ff9b9b;
    display: none;
}

.subscribe-popup-form.error .message-error {
    display: block;
}

/* 自訂觸發按鈕樣式（注入到導航列） */
.subscribe-trigger-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--primary-color, #ef0361);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subscribe-trigger-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* 響應式 */
@media (max-width: 540px) {
    .subscribe-popup {
        width: 95%;
        border-radius: 24px;
    }

    .subscribe-popup-content {
        padding: 48px 28px 36px;
    }

    .subscribe-popup-title {
        font-size: 1.7rem;
    }
}

/* =========================================
   V4 登入優化樣式
   ========================================= */

/* 登入彈窗成功狀態：背景變綠色調 */
.login-popup.success-state {
    background: linear-gradient(145deg, rgba(20, 50, 40, 0.9), rgba(15, 35, 30, 0.9));
    border-color: rgba(0, 200, 83, 0.18);
}

/* 成功後隱藏不需要的元素 */
.login-popup.success-state .login-header,
.login-popup.success-state form input,
.login-popup.success-state form button[type="submit"],
/* 成功後隱藏不需要的元素 (強制隱藏表單內除了成功訊息以外的所有內容) */
.login-popup.success-state .login-header {
    display: none !important;
}

.login-popup.success-state form>*:not(.login-success-message) {
    display: none !important;
}

/* 顯示成功訊息 (當表單有 success class 或 popup 有 success-state) */
.login-popup.success-state .login-success-message,
.subscribe-popup-form.success .login-success-message {
    display: block !important;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* 成功文字動畫 */
.login-success-text {
    font-size: 1.5rem;
    /* 加大字體 */
    font-weight: 700;
    color: #00e676;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    /* Apple stlye tight spacing */
}

.login-success-hint {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 28px;
    font-weight: 400;
}

/* 信箱按鈕容器 */
.login-email-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

/* 主按鈕 (icon + text) */
.login-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--primary-color, #ef0361), #ff1a6c);
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    /* 全圓角，更像 iOS 按鈕 */
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 8px 24px rgba(239, 3, 97, 0.35);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
}

.login-primary-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px rgba(239, 3, 97, 0.5);
}

.login-primary-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 備用按鈕群 */
.login-fallback-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.login-fallback-btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    /* 玻璃質感 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    /* iOS 風格圓角 */
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.login-fallback-btns a img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.login-fallback-btns a:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.3);
}

.login-fallback-btns a:hover img {
    transform: scale(1.1);
}

/* 品牌色 Hover */
.login-fallback-btns a.gmail:hover {
    background: rgba(234, 67, 53, 0.25);
    border-color: rgba(234, 67, 53, 0.5);
}

.login-fallback-btns a.outlook:hover {
    background: rgba(0, 120, 212, 0.25);
    border-color: rgba(0, 120, 212, 0.5);
}

.login-fallback-btns a.icloud:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

.login-fallback-btns a.yahoo:hover {
    background: rgba(96, 1, 210, 0.25);
    border-color: rgba(96, 1, 210, 0.5);
}

.login-fallback-btns a.proton:hover {
    background: rgba(109, 74, 255, 0.25);
    border-color: rgba(109, 74, 255, 0.5);
}

.login-fallback-btns a.readwise:hover {
    background: rgba(41, 52, 73, 0.5);
    border-color: rgba(41, 52, 73, 0.8);
}

/* 註冊引導連結 (此時也被隱藏，不需要變更) */
.login-register-link {
    text-align: center;
    margin-top: 16px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.login-register-link a {
    color: var(--primary-color, #ef0361);
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
    transition: all 0.2s ease;
}

.login-register-link a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(239, 3, 97, 0.4);
}

/* =========================================
   會員中心彈窗樣式
   ========================================= */

/* 會員中心標題區 */
.member-center-header {
    text-align: center;
    margin-bottom: 24px;
}

.member-avatar {
    font-size: 3rem;
    margin-bottom: 12px;
    filter: grayscale(0.2);
}

/* 會員資訊卡片 */
.member-info-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.member-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.member-info-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.member-info-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.member-info-value {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.member-email {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: -0.3px;
}

/* 會員中心按鈕區 */
.member-center-actions {
    margin-bottom: 20px;
}

.member-signout-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.member-signout-btn:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.4);
    color: #ff6b6b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
}

/* 會員中心 Footer */
.member-center-footer {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.member-contact-link {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-contact-link:hover {
    color: var(--primary-color, #ef0361) !important;
}

/* 會員中心觸發按鈕 (Header) - 精緻膠囊 */
.member-center-trigger {
    /* 磨砂玻璃效果 */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.member-center-trigger:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    box-shadow:
        0 0 16px color-mix(in srgb, var(--primary-color), transparent 70%),
        0 6px 24px rgba(0, 0, 0, 0.3);
}

/* =========================================
   自訂留言區 CTA (未登入狀態)
   ========================================= */

/* 隱藏原生 Ghost 留言區「未登入提示」-- 整個區塊 */
.custom-comment-cta .article-comments {
    display: none !important;
}

/* 自訂留言 CTA 容器 - 強制深色毛玻璃 */
.custom-comment-prompt {
    margin: 48px auto 32px;
    padding: 56px 48px;
    max-width: 720px;
    /* 強制深色毛玻璃效果 (覆蓋所有主題) */
    background: rgba(28, 28, 30, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.comment-cta-content {
    max-width: 100%;
    margin: 0 auto;
}

/* CTA 標題 - 加大字體 */
.comment-cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #fff !important;
    letter-spacing: 0.02em;
}

/* 移除 icon 樣式，用不到了 */
.comment-cta-icon {
    display: none;
}

/* CTA 描述 - 加大字體 + 加寬字距 */
.comment-cta-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 0 32px;
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* 按鈕容器 - 全寬對齊文字 */
.comment-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: stretch;
    flex-wrap: wrap;
}

/* 登入按鈕 - 全寬 */
.comment-cta-login {
    flex: 1;
    min-width: 140px;
    padding: 14px 32px;
    border-radius: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.comment-cta-login:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
}

/* 註冊按鈕 - 全寬 */
.comment-cta-register {
    flex: 1;
    min-width: 140px;
    align-items: center;
    background: var(--ghost-accent-color, #ef0361) !important;
    border-radius: 48px;
    color: #fff !important;
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: 600;
    height: auto;
    justify-content: center;
    padding: 14px 32px;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-cta-register:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 3, 97, 0.4);
}

/* 響應式 - 小螢幕按鈕疊起 */
@media (max-width: 480px) {
    .custom-comment-prompt {
        padding: 40px 28px;
        margin: 32px 16px;
    }

    .comment-cta-title {
        font-size: 1.6rem;
    }

    .comment-cta-desc {
        font-size: 1.05rem;
    }

    .comment-cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .comment-cta-login,
    .comment-cta-register {
        width: 100%;
    }
}

/* 響應式 */
@media (max-width: 540px) {
    .custom-comment-prompt {
        padding: 32px 24px;
        margin: 32px 16px 24px;
        border-radius: 20px;
    }

    .comment-cta-title {
        font-size: 1.5rem;
    }

    .comment-cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .comment-cta-login,
    .comment-cta-register {
        width: 100%;
        justify-content: center;
    }
}