/* --- GitHub Cold Gray (Primer Style) --- */
:root {
    /* 淺色模式：乾淨的白底、冷灰框、藍色重點 */
    --md-sys-color-primary: #0969da;             /* GitHub 標誌性藍色按鈕 */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-surface: #ffffff;             /* 純白底 */
    --md-sys-color-on-surface: #1f2328;          /* GitHub 文字黑 */
    --md-sys-color-surface-container: #f6f8fa;   /* 側邊欄與頁首背景 */
    --md-sys-color-outline: #d0d7de;             /* 經典冷灰邊框 */
    --md-sys-color-secondary-container: #afb8c133;
    --md-sys-color-on-secondary-container: #24292f;
    --md-sys-color-on-surface-variant: #57606a;  /* 次要／輔助文字灰（原本散落各處的寫死值收斂於此） */
    --md-sys-color-accent-marker: #fd8c73;       /* 選單目前頁面左側標記條，淺色/深色模式共用同一色值 */

    /* 首頁分類卡片用的語意色（GitHub Primer 色票） */
    --md-sys-color-success-container: #dafbe1;
    --md-sys-color-on-success-container: #1a7f37;
    --md-sys-color-info-container: #ddf4ff;
    --md-sys-color-on-info-container: #0969da;
    --md-sys-color-warning-container: #fff8c5;
    --md-sys-color-on-warning-container: #9a6700;
    --md-sys-color-special-container: #fbefff;
    --md-sys-color-on-special-container: #8250df;

    /* Runbook／Ref 程式碼區塊上色（highlight.js 的 .hljs-*，GitHub Light 色票） */
    --code-keyword: #cf222e;
    --code-string: #0a3069;
    --code-comment: #6e7781;
    --code-number: #0550ae;
    --code-title: #8250df;
    --code-variable: #953800;
}

[data-theme="dark"] {
    /* 深色模式：直接取自 HedgeDoc 原始碼（使用者提供 index.css 等實際檔案，非截圖估算）的
       夜間主題色票，不再是 GitHub Dark 那種偏藍黑的底色 */
    --md-sys-color-primary: #5eb7e0;             /* HedgeDoc `.night a` 連結藍，原色照搬 */
    --md-sys-color-on-primary: #1c1c1e;          /* HedgeDoc 深色按鈕慣用的近黑色；主色偏亮青藍，
                                                       白字對比度不足（僅約 2.3:1），改用深色字才符合 AA */
    --md-sys-color-surface: #333333;             /* HedgeDoc `body.night { background: #333 }` 原值 */
    --md-sys-color-on-surface: #ededed;          /* HedgeDoc `.night .ui-view-area { color: #ededed }` */
    --md-sys-color-surface-container: #1c1c1e;   /* HedgeDoc 工具列／狀態列背景，比主背景更深一階 */
    --md-sys-color-outline: #565656;             /* HedgeDoc 按鈕邊框色（`.night .navbar .btn-default`）；
                                                       工具列邊框 #353538 太接近主背景 #333333，套用在卡片／
                                                       輸入框／結果框邊框上幾乎看不見，改用這組對比夠的邊框色 */
    --md-sys-color-secondary-container: #37373b; /* HedgeDoc 工具列按鈕 hover 背景 */
    --md-sys-color-on-secondary-container: #ededed;
    --md-sys-color-on-surface-variant: #bcbcbc;  /* HedgeDoc `.night .markdown-body blockquote` 文字色 */

    /* 首頁分類卡片用的語意色（沿用原色相，透明度混色會自動貼合新的深灰底） */
    --md-sys-color-success-container: #23863633;
    --md-sys-color-on-success-container: #3fb950;
    --md-sys-color-info-container: #1f6feb33;
    --md-sys-color-on-info-container: #58a6ff;
    --md-sys-color-warning-container: #9e6a0333;
    --md-sys-color-on-warning-container: #d29922;
    --md-sys-color-special-container: #8250df33;
    --md-sys-color-on-special-container: #bc8cff;

    /* Runbook／Ref 程式碼區塊上色（GitHub Dark 色票，在 #1c1c1e 的程式碼底色上對比足夠） */
    --code-keyword: #ff7b72;
    --code-string: #a5d6ff;
    --code-comment: #8b949e;
    --code-number: #79c0ff;
    --code-title: #d2a8ff;
    --code-variable: #ffa657;
}

.tool-intro {
        background-color: #ddf4ff; /* GitHub 淺藍色提示背景 */
        border: 1px solid #54aeff66;
        border-radius: 6px;
        padding: 12px 16px;
        margin-bottom: 24px;
        color: #0969da;
        font-size: 14px;
        line-height: 1.5;
    }

.tool-intro-muted {
        /* 使用 GitHub 的次要背景色 */
        background-color: var(--md-sys-color-surface-container); 
        border: 1px solid var(--md-sys-color-outline);
        border-radius: 6px;
        padding: 16px;
        margin-bottom: 32px;
        line-height: 1.6;
    }

.intro-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--md-sys-color-on-surface);
    }

    .tool-intro-muted p {
        margin: 0;
        font-size: 14px;
        color: var(--md-sys-color-on-surface-variant);
    }

    [data-theme="dark"] .tool-intro {
        background-color: rgba(56, 139, 253, 0.1);
        border: 1px solid rgba(56, 139, 253, 0.4);
        color: #7dbeff;
    }


        /* --- 基礎佈局 --- */
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            background-color: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            display: flex;
            height: 100vh;
            transition: background-color 0.3s ease;
        }

        /* 針對 GitHub 風格的細節微調 */
        .card {
            border: 1px solid var(--md-sys-color-outline);
            box-shadow: none !important; /* GitHub 偏好扁平化邊框而非陰影 */
            background: var(--md-sys-color-surface) !important;
        }

        /* 側邊導覽列 */
        aside {
            width: 280px;
            flex-shrink: 0;
            background-color: var(--md-sys-color-surface-container);
            padding: 12px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--md-sys-color-outline);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            font-size: 22px;
            font-weight: 700;
            color: var(--md-sys-color-primary);
            text-decoration: none;
        }

        nav { margin-top: 16px; flex-grow: 1; }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 100px;
            text-decoration: none;
            color: var(--md-sys-color-on-surface);
            margin-bottom: 4px;
            transition: 0.2s;
        }

        .nav-item:hover { background-color: rgba(103, 80, 164, 0.08); }
        .nav-item.active {
            border-left: 3px solid var(--md-sys-color-accent-marker); /* 模擬 GitHub 選單的左側橘條（可選） */
            border-radius: 0;
            background-color: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
            font-weight: 500;
        }

        /* 主區域 */
        main {
            flex-grow: 1;
            min-width: 0;
            padding: 24px 40px;
            overflow-y: auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
        }

        /* 深色模式切換按鈕 */
        .theme-toggle-btn {
            background: none;
            border: 1px solid var(--md-sys-color-outline);
            color: var(--md-sys-color-on-surface);
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            transition: 0.3s;
        }

        .theme-toggle-btn:hover { background-color: rgba(0,0,0,0.05); }

        /* --- 工具內容樣式 --- */
        .tool-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }

        .tool-details {
        margin-top: 48px;
        padding-bottom: 60px;
        max-width: 850px; /* 限制寬度以提升長文閱讀舒適度 */
    }
    .divider {
        border: 0;
        border-top: 1px solid var(--md-sys-color-outline);
        margin-bottom: 32px;
        opacity: 0.3;
    }
    .tool-details h3 {
        font-size: 18px;
        margin-top: 24px;
        margin-bottom: 12px;
        color: var(--md-sys-color-on-surface);
    }
    .tool-details p, .tool-details li {
        font-size: 14px;
        line-height: 1.6;
        color: var(--md-sys-color-on-surface-variant);
    }
    .tool-details ul {
        padding-left: 20px;
    }

        .card {
            background: var(--md-sys-color-surface-container);
            padding: 24px;
            border-radius: 28px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }

        .input-group { margin-bottom: 20px; }
        .input-group label {
            display: block;
            font-size: 14px;
            margin-bottom: 8px;
            color: var(--md-sys-color-primary);
            font-weight: 500;
        }

        .md-input {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            border: 1px solid var(--md-sys-color-outline);
            background: transparent;
            color: var(--md-sys-color-on-surface);
            font-family: 'Roboto Mono', monospace;
            font-size: 15px;
        }

        .md-input:focus {
            outline: 2px solid var(--md-sys-color-primary);
            border-color: transparent;
        }

        .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 8px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: 1px solid var(--md-sys-color-outline);
            border-radius: 12px;
            cursor: pointer;
            font-size: 14px;
            transition: 0.2s;
        }

        .radio-option:has(input:checked) {
            border-color: var(--md-sys-color-primary);
            background-color: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
        }

        .radio-option input[type="radio"] { accent-color: var(--md-sys-color-primary); }

        .field-hint {
            display: block;
            font-size: 12px;
            color: var(--md-sys-color-on-surface-variant);
            margin-top: 6px;
        }

        .input-button-group { display: flex; align-items: stretch; }
        .input-button-group .md-input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
        }
        .input-group-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            border: 1px solid var(--md-sys-color-outline);
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            background: var(--md-sys-color-surface-container);
            color: var(--md-sys-color-on-surface);
            cursor: pointer;
            transition: 0.2s;
        }
        .input-group-btn:hover { background-color: rgba(0,0,0,0.05); }
        [data-theme="dark"] .input-group-btn:hover { background-color: rgba(255,255,255,0.08); }

        .btn {
            padding: 12px 24px;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-filled {
            background-color: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
        }

        .btn-tonal {
            background-color: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
        }

        .result-area {
            background-color: var(--md-sys-color-surface);
            border: 1px dashed var(--md-sys-color-outline);
            padding: 16px;
            border-radius: 16px;
            min-height: 200px;
            word-break: break-all;
            font-family: 'Roboto Mono', monospace;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 4px;
            border-bottom: 1px solid var(--md-sys-color-outline);
            font-size: 14px;
        }
        .stat-row:last-child { border-bottom: none; }
        .stat-row strong { color: var(--md-sys-color-primary); font-size: 16px; }

        /* Honeypot：對一般訪客視覺隱藏，但仍在可存取樹中，讓 bot 填得到 */
        .hp-field {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        /* Snackbar提示 */
        #snackbar {
            visibility: hidden;
            min-width: 250px;
            background-color: #313033;
            color: #f4eff4;
            border-radius: 4px;
            padding: 16px;
            position: fixed;
            left: 24px;
            bottom: 24px;
            z-index: 100;
            box-shadow: 0 3px 5px rgba(0,0,0,0.3);
        }
        #snackbar.show { visibility: visible; animation: fadein 0.5s; }

        /* 新增優化樣式 */
        .faq-section { margin-bottom: 30px; }
        .faq-item h4 { font-size: 15px; margin-bottom: 5px; color: var(--md-sys-color-primary); }
        .faq-item p { margin-bottom: 15px; }

        .internal-links ul { list-style: none; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
        .internal-links a { color: var(--md-sys-color-primary); text-decoration: none; font-size: 14px; font-weight: 500; }
        .internal-links a:hover { text-decoration: underline; }

        .search-box input:focus {
            background: var(--md-sys-color-surface);
            outline: 2px solid var(--md-sys-color-primary);
        }

        /* 新增元素的額外樣式 */
        .search-box { padding: 0 12px 16px 12px; }
        .search-box input {
            width: 100%;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--md-sys-color-outline);
            background: rgba(0,0,0,0.03);
            font-size: 13px;
            color: inherit;
        }

        .breadcrumb {
            font-size: 12px;
            margin-bottom: 16px;
            color: var(--md-sys-color-on-surface-variant);
        }
        .breadcrumb a { color: var(--md-sys-color-primary); text-decoration: none; }
        .breadcrumb a:hover { text-decoration: underline; }

        .footer {
            margin-top: 60px;
            padding: 40px 0;
            text-align: center;
            font-size: 13px;
            /* 原本用邊框色 --md-sys-color-outline，淺色模式對比只有約 1.4:1 幾乎看不見，改用次要文字灰 */
            color: var(--md-sys-color-on-surface-variant);
        }
        /* 內文裡沒有 class 的一般連結（FAQ、隱私權頁內文等）統一用主色，不用瀏覽器預設的深藍／紫
           （深色模式下幾乎看不見）。用 :where() 把權重降到最低，有自己樣式的連結（麵包屑、側邊欄、
           卡片標題、頁尾等）一律優先，不會被這條蓋掉；內文連結保留底線，才分得出是連結 */
        main :where(a:not([class])) {
            color: var(--md-sys-color-primary);
        }
        /* 頁尾連結跟著頁尾文字的灰色，不用瀏覽器預設的藍／紫（深色模式下幾乎和底色融在一起），
           滑鼠移上去才顯示主色與底線 */
        .footer a {
            color: inherit;
            text-decoration: none;
        }
        .footer a:hover {
            color: var(--md-sys-color-primary);
            text-decoration: underline;
        }
        .footer-divider {
            height: 1px;
            background-color: var(--md-sys-color-outline);
            opacity: 0.2;
            margin-bottom: 20px;
        }

        .btn-outline:hover { background: rgba(0,0,0,0.05); }

        /* 新增：按鈕群組與語系切換器樣式 */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .lang-btn {
            background: none;
            border: 1px solid var(--md-sys-color-outline);
            color: inherit;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 500;
            transition: 0.2s;
        }
        .lang-btn:hover { background: rgba(0,0,0,0.05); }
        [data-theme="dark"] .lang-btn:hover { background: rgba(255,255,255,0.1); }

        /* 自動偵測提示條 (Language Suggestion Banner) */
        #lang-suggestion {
            display: none;
            background: #0969da;
            color: white;
            padding: 10px 20px;
            text-align: center;
            font-size: 14px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        /* --- RWD 手機版優化 --- */

/* 預設隱藏手機版選單按鈕 */
.menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    padding: 4px;
}

/* 側邊欄遮罩預設隱藏 */
#sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}


@media (max-width: 768px) {
    /* 1. 佈局調整：讓 Body 不再水平並列 */
    body {
        flex-direction: column;
    }

    /* 遮罩預設完全隱藏 */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4); 
        backdrop-filter: blur(2px);
        z-index: 999; /* 低於 aside 的 1000 */
    }

    /* 當 aside 有 active 類別時，讓緊跟在後的遮罩顯示 */
    aside.active + #sidebar-overlay {
        display: block !important; /* 強制顯示 */
    }

    /* 2. 側邊欄：變成抽屜式從左側滑出 */
    aside {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100%;
        width: 280px;
        z-index: 1000; /* 高於遮罩 */
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* 確保背景色，避免透視 */
        background-color: var(--md-sys-color-surface-container); 
    }

    aside.active {
        left: 0; /* 展開狀態 */
    }

    /* 4. 主區域：調整邊距 */
    main {
        padding: 16px 20px;
        width: 100%;
    }

    /* 5. 頁首：顯示漢堡選單按鈕 */
    .menu-toggle-btn {
        display: block;
    }

    header h1 {
        font-size: 18px; /* 縮小手機版標題 */
    }

    /* 6. 工具網格：強制單欄排列 */
    .tool-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* 7. 卡片與按鈕調整 */
    .card {
        padding: 16px;
        border-radius: 16px; /* 手機版圓角稍微縮小更精緻 */
    }

    .btn-row {
        flex-direction: column; /* 按鈕在手機上堆疊 */
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* 8. 首頁：手機版縮小 Hero 標題與間距 */
    .hero-section {
        padding: 24px 0 32px 0;
    }

    .hero-section h1 {
        font-size: 24px;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }
}

        #lang-suggestion a { color: white; font-weight: bold; text-decoration: underline; margin-left: 10px; }
        #lang-suggestion .close-btn { cursor: pointer; float: right; }

        @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 24px; opacity: 1;} }

        @media (max-width: 1000px) { .tool-grid { grid-template-columns: 1fr; } }

/* --- 整站入口（home.php）與 ToolHub 主頁（toolhub.php）共用元件 --- */

.hero-section {
    display: block; /* 覆蓋全域 header{display:flex}，Hero 標題/副標/搜尋框要直向堆疊，不是橫向排列 */
    text-align: center;
    padding: 40px 0 50px 0;
}

.hero-section h1 {
    font-size: 32px;
    margin-bottom: 12px;
    font-weight: 700;
}

.hero-section p {
    color: var(--md-sys-color-on-surface);
    opacity: 0.7;
    margin-bottom: 32px;
    font-size: 15px;
}

.hero-search {
    max-width: 550px;
    margin: 0 auto;
    position: relative;
}

.hero-search input {
    width: 100%;
    padding: 14px 20px 14px 45px;
    border-radius: 50px;
    border: 1px solid var(--md-sys-color-outline);
    font-size: 15px;
    background: var(--md-sys-color-surface-container);
    color: inherit;
    transition: 0.2s;
}

.hero-search input:focus {
    outline: 2px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
}

.hero-search .search-icon {
    position: absolute;
    left: 16px;
    top: 14px;
    color: var(--md-sys-color-outline);
    font-size: 20px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.category-card {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    padding: 24px;
    background: var(--md-sys-color-surface);
    transition: transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: var(--md-sys-color-primary);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.card-icon.security {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}

.card-icon.text {
    background: var(--md-sys-color-info-container);
    color: var(--md-sys-color-on-info-container);
}

.card-icon.dev {
    background: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
}

.card-icon.network {
    background: var(--md-sys-color-special-container);
    color: var(--md-sys-color-on-special-container);
}

.category-card h3 {
    font-size: 18px;
    margin: 0 0 8px 0;
}

.category-card p {
    font-size: 13.5px;
    color: var(--md-sys-color-on-surface);
    opacity: 0.7;
    margin: 0 0 16px 0;
    line-height: 1.5;
    min-height: 40px;
}

.tool-links {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--md-sys-color-outline);
    padding-top: 14px;
}

.tool-links li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-links li::before {
    content: "•";
    color: var(--md-sys-color-outline);
}

.tool-links a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.tool-links a:hover {
    text-decoration: underline;
}

/* 卡片標題連結（沿用標題文字色，hover 才顯示連結色）。
   標題連結的 ::after 蓋滿整張卡片，icon、說明文字點下去也會連過去；
   卡片裡另外的連結清單（.tool-links）墊高一層，維持各自的連結 */
.category-card {
    position: relative;
}

.category-card h3 a {
    color: inherit;
    text-decoration: none;
}

.category-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* 要壓過說明文字：p 的 opacity 會自成一層 */
    border-radius: inherit;
}

.category-card:hover h3 a,
.category-card h3 a:focus-visible {
    color: var(--md-sys-color-primary);
}

.category-card .tool-links {
    position: relative;
    z-index: 2;
}

/* 整站入口：尚未上線區塊的「即將推出」標籤與卡片 */
.badge-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.category-card.is-soon {
    opacity: 0.85;
}

.category-card.is-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--md-sys-color-outline);
}

/* --- Runbook／Ref／Services 內容頁 --- */

/* 後台登入者預覽草稿時的提示（?preview=1） */
.draft-notice {
    margin: 0 0 16px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    background: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
}

/* 內容頁不放側邊欄，限制行寬讓長文好讀 */
.content-narrow {
    max-width: 860px;
    margin: 0 auto;
}

.page-title {
    font-size: 30px;
    margin: 8px 0 12px 0;
    line-height: 1.3;
}

.page-intro {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px 0;
}

.content-meta {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    margin-bottom: 28px;
}

.content-meta a,
.content-back a,
.btn-primary-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.content-meta a:hover,
.content-back a:hover,
.btn-primary-link:hover {
    text-decoration: underline;
}

.btn-primary-link {
    font-weight: 500;
}

.empty-state {
    color: var(--md-sys-color-on-surface-variant);
    padding: 32px 0;
}

/* 文章／條目列表 */
.content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-list li {
    padding: 18px 0;
    border-bottom: 1px solid var(--md-sys-color-outline);
}

.content-list-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.content-list-title:hover {
    text-decoration: underline;
}

.content-list li .content-meta {
    margin: 4px 0 0 0;
}

.content-list li p {
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.content-list-command {
    display: block;
    margin-top: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap: anywhere;
}

/* Markdown 內文（league/commonmark 輸出） */
.md-content {
    font-size: 16px;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.md-content h2 { font-size: 23px; margin: 36px 0 12px 0; line-height: 1.35; }
.md-content h3 { font-size: 19px; margin: 28px 0 10px 0; }
.md-content h4 { font-size: 16px; margin: 24px 0 8px 0; }
.md-content p,
.md-content ul,
.md-content ol,
.md-content table,
.md-content blockquote,
.md-content pre { margin: 0 0 16px 0; }
.md-content ul,
.md-content ol { padding-left: 24px; }
.md-content li { margin-bottom: 4px; }
.md-content a { color: var(--md-sys-color-primary); }
.md-content img { max-width: 100%; }

.md-content blockquote {
    border-left: 4px solid var(--md-sys-color-outline);
    padding: 0 16px;
    color: var(--md-sys-color-on-surface-variant);
}

.md-content table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.md-content th,
.md-content td {
    border: 1px solid var(--md-sys-color-outline);
    padding: 6px 12px;
    text-align: left;
}

.md-content th { background: var(--md-sys-color-surface-container); }

/* 行內程式碼 */
.md-content :not(pre) > code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--md-sys-color-secondary-container);
}

/* 程式碼區塊（Markdown 內文與 Ref 的指令／範例輸出共用） */
.md-content pre,
.ref-section pre {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.55;
}

.md-content pre code,
.ref-section pre code {
    font-family: 'Roboto Mono', monospace;
    background: none;
    padding: 0;
}

.ref-section { margin-bottom: 28px; }
.page-title + .ref-section { margin-top: 24px; } /* 沒有翻譯連結列時，標題與第一段之間補間距 */
.ref-section > h2 { font-size: 19px; margin: 0 0 10px 0; }
.content-back { margin-top: 40px; }

/* highlight.js 上色（色票在 :root／[data-theme="dark"] 的 --code-* token） */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: var(--code-keyword); }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: var(--code-string); }
.hljs-comment, .hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-number, .hljs-attr, .hljs-attribute, .hljs-symbol, .hljs-meta, .hljs-selector-attr { color: var(--code-number); }
.hljs-title, .hljs-section, .hljs-title.function_, .hljs-name { color: var(--code-title); }
.hljs-variable, .hljs-template-variable, .hljs-built_in, .hljs-params, .hljs-type { color: var(--code-variable); }