/*!
 * site-nav.css — 全站統一吸頂頭部（首頁 / PDF 工具箱 / 網路工具 共用）
 *
 * 這裡是頭部樣式的唯一來源：apple.css 透過 @import 複用本檔案，
 * 兩個子應用不載入 apple.css，只載入本檔案，因此本檔案必須自帶
 * 頭部所需的結構規則（不依賴 bootstrap）。
 *
 * 設計 token 直接寫在 :root。主站 apple.css 也用同一組名字，後載入會以
 * 完全相同的取值覆蓋，所以三套介面的頭部顏色、圓角、投影必然一致。
 */

/* --------------------------------------------------------------------------
   1. 設計令牌（與 apple.css 第 1 節逐項對齊）
   -------------------------------------------------------------------------- */
:root {
    --at-surface: #ffffff;
    --at-surface-2: #f5f5f7;
    --at-glass: rgba(255, 255, 255, .72);
    --at-glass-solid: rgba(251, 251, 253, .86);

    --at-text: #1d1d1f;
    --at-text-2: #6e6e73;
    --at-text-3: #86868b;
    --at-text-4: #aeaeb2;

    --at-line: rgba(0, 0, 0, .08);
    --at-line-soft: rgba(0, 0, 0, .055);

    --at-accent: #0071e3;
    --at-accent-soft: rgba(0, 113, 227, .08);
    --at-accent-ring: rgba(0, 113, 227, .28);
    --at-grad: linear-gradient(135deg, #0071e3 0%, #2f8ff5 45%, #32ade6 100%);

    --at-r-sm: 10px;
    --at-r: 14px;
    --at-r-md: 18px;
    --at-r-pill: 980px;

    --at-sh-3: 0 2px 6px rgba(0, 0, 0, .06), 0 22px 60px rgba(0, 0, 0, .11);
    --at-sh-nav: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 24px rgba(0, 0, 0, .045);

    /* 內容塊（第 8 節）用的令牌：原來只寫在 apple.css 裡，子應用看不到，
       現在和頭部令牌同源，三套介面的卡片圓角、投影、成功色才會一致。 */
    --at-r-xs: 8px;
    --at-r-lg: 24px;
    --at-sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .045);
    --at-green: #248a3d;
    --at-green-soft: rgba(36, 138, 61, .09);

    --at-ease: cubic-bezier(.32, .72, 0, 1);
    --at-ease-out: cubic-bezier(.25, .8, .25, 1);

    --at-nav-h: 58px;
    /* 桌面檔頭部兩行：品牌行 58 + 分類行 46。抽屜檔（≤1359）把分類收進漢堡，
       所以同一檔裡把 --at-nav-cat-h 歸零，吸頂留白自動退回一行。 */
    --at-nav-cat-h: 46px;
    --at-nav-total: calc(var(--at-nav-h) + var(--at-nav-cat-h));

    --at-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC",
        "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB",
        "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC",
        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 頭部需要吸頂留白；子應用沒有 apple.css，本檔案負責這一句 */
html {
    padding-top: var(--at-nav-total);
    scroll-padding-top: calc(var(--at-nav-total) + 14px);
}

/* --------------------------------------------------------------------------
   2. 結構基礎（bootstrap 在主站提供，子應用需要自帶）
   -------------------------------------------------------------------------- */
.atnav,
.atnav *,
.atnav *::before,
.atnav *::after {
    box-sizing: border-box;
}

.atnav {
    font-family: var(--at-font);
}

.atnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.atnav .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.atnav .navbar-nav::after,
.atnav .navbar-header::after,
.atnav > .container::after {
    content: "";
    display: table;
    clear: both;
}

/* --------------------------------------------------------------------------
   3. 吸頂毛玻璃導航
   -------------------------------------------------------------------------- */
.navbar.navbar-default.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    min-height: var(--at-nav-total);
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid var(--at-line-soft);
    border-radius: 0;
    background: var(--at-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: none;
    transition: background .3s var(--at-ease-out), box-shadow .3s var(--at-ease-out),
        border-color .3s var(--at-ease-out);
}

/* 滾動後加深，形成層次 */
.navbar.navbar-default.navbar-fixed-top.at-scrolled {
    background: var(--at-glass-solid);
    border-bottom-color: var(--at-line);
    box-shadow: var(--at-sh-nav);
}

/* 不支援 backdrop-filter 時退回實色，避免文字糊在內容上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar.navbar-default.navbar-fixed-top {
        background: var(--at-glass-solid);
    }
}

.navbar > .container.jz,
.navbar .container.jz {
    line-height: 1;
    font-size: 15px;
    color: var(--at-text-2);
    position: relative;
    z-index: 5;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--at-nav-pad, 24px);
}

/* 品牌 */
.navbar-default .navbar-header { float: left; }

.navbar-default .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: var(--at-nav-h);
    line-height: var(--at-nav-h);
    padding: 0;
    margin: 0 26px 0 0;
    color: var(--at-text) !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    text-decoration: none;
    background: none !important;
    float: left;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--at-text) !important;
    background: none !important;
    opacity: .72;
}

.logo_ico {
    position: static;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border-radius: 9px;
    background: var(--at-grad);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 113, 227, .3);
}

.logo_ico::before { position: relative; top: 0; }

/* 主導航項：clear 讓它獨佔第二行，右側控制元件組（.at-navside）留在品牌行。
   display 必須寫死：網路工具子應用的 app.css 有條 .nav{display:flex}，
   會順著 bootstrap 的 .nav 工具類串到 <ul class="nav navbar-nav"> 上，把分類壓成一行。 */
.navbar-default .navbar-nav {
    display: block;
    margin: 0;
    float: left;
    clear: both;
}

.navbar-default .navbar-nav > li { position: relative; float: left; }

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.dropdown-toggle {
    display: block;
    height: var(--at-nav-cat-h);
    line-height: var(--at-nav-cat-h);
    padding: 0 15px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--at-text-2) !important;
    background: none !important;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s var(--at-ease-out);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.open > a,
.navbar-default .navbar-nav > li.open > a:hover,
.navbar-default .navbar-nav > li.open > a:focus {
    color: var(--at-accent) !important;
    background: none !important;
}

/* 懸停/展開時底部一條 2px 指示線 */
.navbar-default .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--at-accent);
    transform: translateX(-50%);
    transition: width .3s var(--at-ease);
}

.navbar-default .navbar-nav > li:hover > a::after,
.navbar-default .navbar-nav > li.open > a::after { width: 26px; }

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: 2px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: .55;
    transition: transform .22s var(--at-ease-out);
}

.navbar-default .navbar-nav > li.open .caret,
.navbar-default .navbar-nav > li:hover .caret { transform: rotate(180deg); }

/* 移動端漢堡 */
.navbar-toggle {
    position: relative;
    display: none;
    float: right;
    margin: 13px 0 0;
    padding: 8px 9px;
    border: 1px solid var(--at-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
}

.navbar-toggle .icon-bar {
    display: block;
    width: 18px;
    height: 1.6px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--at-text);
}

.navbar-toggle:hover,
.navbar-toggle:focus { background: var(--at-surface-2); }

/* 品牌行右側控制元件組：絕對定位，不參與分類行換行計算；
   容器 .container.jz 本來就是 position:relative，右側留白跟著 --at-nav-pad 走 */
.at-navside {
    position: absolute;
    top: 0;
    right: var(--at-nav-pad, 24px);
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--at-nav-h);
}

/* 導航右側迷你搜尋 */
.at-navsearch { margin: 0; padding: 0; }

.at-navsearch > form {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-pill);
    background: rgba(255, 255, 255, .7);
    transition: border-color .2s var(--at-ease-out), box-shadow .24s var(--at-ease-out),
        background .2s var(--at-ease-out);
}

.at-navsearch > form:focus-within {
    border-color: var(--at-accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--at-accent-ring);
}

.at-navsearch__ico { display: flex; color: var(--at-text-3); flex: 0 0 auto; }

.at-navsearch input {
    width: 108px;
    border: 0;
    outline: none;
    background: none;
    color: var(--at-text);
    font-family: inherit;
    font-size: 13.5px;
    letter-spacing: -.01em;
}

.at-navsearch input::placeholder { color: var(--at-text-4); }
.at-navsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 子應用自帶的功能控制元件（隱私開關、主題切換、全部工具等），.at-navside 的第三個 flex 項 */
.at-navextra {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--at-text-2);
}

/* --------------------------------------------------------------------------
   4. 下拉選單（分類）
   -------------------------------------------------------------------------- */
.navbar-default .navbar-nav > li > .dropdown-menu {
    position: absolute;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-r-md);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: var(--at-sh-3);
    min-width: 320px;
    z-index: 1031;
    /* 分類最多 22 項，矮屏下允許選單內部滾動，避免超出視口 */
    max-height: calc(100vh - var(--at-nav-total) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* 頂部留出與導航的貼合間隙，避免滑鼠移動中斷 */
    top: calc(var(--at-nav-cat-h) - 4px);
    /* 左對齊到觸發項：居中會讓 640px 的大選單在首項處溢位到視口外 */
    left: 0;
    transform: translate(0, 6px);
    opacity: 0;
    visibility: hidden;
    display: block;
    transition: opacity .22s var(--at-ease-out), transform .28s var(--at-ease), visibility .22s;
}

.navbar-default .navbar-nav > li:hover > .dropdown-menu,
.navbar-default .navbar-nav > li.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

/* 主站的 tool.css 用 `.nav > li:hover .dropdown-menu{display:block}` 讓選單常顯，
   這裡改為「常顯但透明」，用 opacity 做動畫，故需強制 display:block 優先順序 */
.nav > li:hover .dropdown-menu { display: block; }

/* 靠右側的兩項（PDF 工具箱 / 網路工具）改為右對齊，避免選單溢位視口 */
.navbar-default .navbar-nav > li:nth-last-child(-n+2) > .dropdown-menu {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
}

.navbar-default .navbar-nav > li:nth-last-child(-n+2):hover > .dropdown-menu,
.navbar-default .navbar-nav > li:nth-last-child(-n+2).open > .dropdown-menu {
    transform: translate(0, 0);
}

/* 大選單：兩列 */
.dropdown-menu.ul-list,
.navbar-default .navbar-nav > li > .dropdown-menu.ul-list {
    min-width: 640px;
    padding: 14px 10px 10px;
    columns: 2;
    column-gap: 6px;
}

.dropdown-menu.ul-list > li {
    width: 100% !important;
    float: none !important;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.dropdown-menu > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--at-r-sm);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--at-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: background .16s var(--at-ease-out), color .16s var(--at-ease-out);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--at-accent-soft);
    color: var(--at-accent);
}

/* 模板裡給部分連結寫死了內聯顏色（style="color:#f30" 等），這裡統一抹平 */
.dropdown-menu > li > a[style] { color: var(--at-text-2) !important; }
.dropdown-menu > li > a[style]:hover { color: var(--at-accent) !important; }

/* 分組分隔線（bootstrap 主站有，子應用要自帶） */
.dropdown-menu .divider,
.dropdown-menu > li.divider {
    height: 1px;
    margin: 8px 4px;
    padding: 0;
    overflow: hidden;
    background: var(--at-line-soft);
    width: auto !important;
}

/* 子應用下拉里的分類小標題 */
.dropdown-menu > li.at-drop-cat {
    padding: 9px 12px 4px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--at-text-4);
    white-space: nowrap;
}

.dropdown-menu > li.at-drop-cat:first-child { padding-top: 2px; }

/* --------------------------------------------------------------------------
   5. 響應式
   ⚠️ 順序即優先順序：媒體條件相同權重時後寫的贏，所以「抽屜」必須排在
      桌面收緊規則之後，否則抽屜裡的選單項會被壓成一行。
   -------------------------------------------------------------------------- */
/* 11 個分類實測要 ~1360px：1440 容器以下先收緊一檔，保證分類行只佔一行 */
@media (max-width: 1439px) {
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > a.dropdown-toggle { padding: 0 11px; font-size: 14px; }
    .at-navsearch input { width: 84px; }
}

/* 子應用品牌行右側還有自己的功能控制元件（隱私/主題/全部工具）；
   隱私開關的文字與 title 重複，桌面檔省掉文字換寬度。 */
.atnav:not([data-surface="main"]) .at-navextra { gap: 6px; }
.atnav:not([data-surface="main"]) .at-navextra .hide-sm { display: none; }

@media (max-width: 900px) {
    .navbar-default .navbar-brand { margin-right: 12px; font-size: 16px; }
    .navbar > .container.jz,
    .navbar .container.jz { --at-nav-pad: 16px; }
}

/* 抽屜檔：三端共用一個斷點。右側控制元件搬進品牌行以後，子應用不再需要提前收起，
   1360–1439 這一段兩類介面都是「兩行」佈局，:root 的 token 也只需切一次。
   --at-nav-cat-h 歸零後頭部只剩一行，html 吸頂留白與 --at-nav-total 自動跟著縮。 */
@media (max-width: 1359px) {
    :root { --at-nav-cat-h: 0px; }

    .atnav .navbar-toggle { display: block; }
    .atnav .navbar-collapse { display: none !important; clear: both; }
    /* bootstrap 給 .navbar-fixed-top .navbar-collapse 寫了 max-height:340px，11 個分類會被截斷 */
    .atnav .navbar-collapse.in {
        display: block !important;
        max-height: calc(100vh - var(--at-nav-h));
    }
    .atnav .navbar-nav { float: none; padding-bottom: 10px; }
    .atnav .navbar-nav > li { float: none; }
    .atnav .navbar-nav > li > a,
    .atnav .navbar-nav > li > a.dropdown-toggle {
        height: auto;
        line-height: 1.4;
        padding: 10px 6px;
        font-size: 14.5px;
    }
    .atnav .navbar-nav > li > a::after { display: none; }

    /* 控制元件組從絕對定位回到抽屜檔案流，逐項豎排 */
    .atnav .at-navside { position: static; right: auto; display: block; height: auto; }
    .atnav .at-navsearch { padding: 0 0 12px; }
    .atnav .at-navsearch > form { height: 38px; }
    .atnav .at-navsearch input { width: 100%; flex: 1 1 auto; }
    .atnav .at-navextra { padding: 0 0 14px; gap: 10px; flex-wrap: wrap; }
    .atnav .at-navextra .hide-sm { display: inline; }
    .atnav .at-navlang { margin: 6px 0 2px; }
}

/* 主站抽屜：下拉仍是絕對定位浮層，只限制高度、不開滾動，否則浮層會被裁掉；
   點分類由 bootstrap 給 li 加 .open，與 767px 以下那檔行為一致。 */
@media (max-width: 1359px) {
    .atnav[data-surface="main"] .navbar-nav > li > .dropdown-menu {
        display: none;
        top: 100%;
    }
    .atnav[data-surface="main"] .navbar-nav > li.open > .dropdown-menu,
    .atnav[data-surface="main"] .navbar-nav > li:hover > .dropdown-menu { display: block; }
}

/* 子應用沒有 bootstrap/jQuery，抽屜裡的下拉只能內聯展開（純 CSS 也點得到）；
   主站保持原有「點分類展開」的行為，不改現有互動。 */
@media (max-width: 1359px) {
    /* 子應用抽屜裡展開的分類是內聯的，面板自身要能滾，否則超出視口底部就點不到 */
    .atnav:not([data-surface="main"]) .navbar-collapse.in { overflow-y: auto; }

    .atnav:not([data-surface="main"]) .navbar-nav > li > .dropdown-menu {
        position: static !important;
        visibility: visible;
        opacity: 1;
        transform: none;
        max-height: none;
        min-width: 0;
        padding: 0 0 6px 10px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        columns: 1;
    }
    .atnav:not([data-surface="main"]) .dropdown-menu.ul-list { min-width: 0; padding: 0 0 6px 10px; }
    .atnav:not([data-surface="main"]) .navbar-nav > li:hover > .dropdown-menu { transform: none; }

    /* 全部內聯展開時抽屜有 6 米長，apple.js 接管後改成點選手風琴；
       沒載入 JS 時保持展開，所有工具依然可達。 */
    .atnav.at-nav-js:not([data-surface="main"]) .navbar-nav > li > .dropdown-menu { display: none; }
    .atnav.at-nav-js:not([data-surface="main"]) .navbar-nav > li.open > .dropdown-menu { display: block; }
}

/* --------------------------------------------------------------------------
   6. 深色模式（網路檢測子應用有 [data-theme="dark"]，主站與 PDF 工具箱沒有）
   -------------------------------------------------------------------------- */
[data-theme="dark"] .atnav {
    --at-glass: rgba(28, 28, 30, .72);
    --at-glass-solid: rgba(28, 28, 30, .9);
    --at-line: rgba(255, 255, 255, .14);
    --at-line-soft: rgba(255, 255, 255, .1);
    --at-text: #f5f5f7;
    --at-text-2: #a1a1a6;
    --at-text-3: #86868b;
    --at-text-4: #6e6e73;
    --at-accent: #0a84ff;
    --at-accent-soft: rgba(10, 132, 255, .18);
    --at-accent-ring: rgba(10, 132, 255, .3);
    --at-surface-2: #242426;
    --at-sh-3: 0 20px 48px -24px rgba(0, 0, 0, .8);
}

[data-theme="dark"] .navbar.navbar-default.navbar-fixed-top,
[data-theme="dark"] .navbar-default .navbar-nav > li > .dropdown-menu {
    background: rgba(28, 28, 30, .82);
}

[data-theme="dark"] .navbar-toggle { background: rgba(60, 60, 67, .32); }
[data-theme="dark"] .navbar-toggle .icon-bar { background: #f5f5f7; }
[data-theme="dark"] .at-navsearch > form { background: rgba(60, 60, 67, .32); }
[data-theme="dark"] .at-navsearch > form:focus-within { background: #1c1c1e; }
[data-theme="dark"] .at-navsearch input { color: #f5f5f7; }
[data-theme="dark"] .dropdown-menu > li > a { color: #a1a1a6; }
[data-theme="dark"] .dropdown-menu > li > a:hover { color: #0a84ff; }

/* --------------------------------------------------------------------------
   7. 廣告位（public/site-nav.php 的 site_ad_render）
      top = 頭部導航下方，bottom = 頁尾上方；三端共用這一份規則。
      這裡只管寬度、留白和素材不溢位，廣告自身的樣式由後臺貼上的內容決定。
   -------------------------------------------------------------------------- */
.at-ad {
    margin: 22px 0 4px;
}

.at-ad--bottom {
    margin: 34px 0 18px;
}

.at-ad__inner {
    max-width: var(--at-maxw, 1200px);
    margin: 0 auto;
    padding: 0 var(--at-nav-pad, 22px);
}

/* 子應用把廣告放在各自的 .container / .shell 裡，寬度與側邊距由父級負責 */
.at-ad--flush .at-ad__inner {
    max-width: none;
    padding: 0;
}

.at-ad__label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--at-text-3, #86868b);
}

.at-ad__body {
    overflow: hidden;
}

.at-ad__body img,
.at-ad__body iframe,
.at-ad__body video {
    max-width: 100%;
    height: auto;
    border: 0;
}

@media (max-width: 767px) {
    .at-ad { margin: 16px 0 2px; }
    .at-ad--bottom { margin: 24px 0 12px; }
}

/* --------------------------------------------------------------------------
   4b. 語言切換器（四種語言 = 四個 URL 目錄，切換就是換目錄字首）
   -------------------------------------------------------------------------- */
.at-navlang {
    display: flex;
    align-items: center;
}

.at-lang { position: relative; }

.at-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-pill);
    background: rgba(255, 255, 255, .7);
    color: var(--at-text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: color .18s var(--at-ease-out), border-color .18s var(--at-ease-out),
        background .18s var(--at-ease-out), box-shadow .2s var(--at-ease-out);
}
.at-lang__btn:hover,
.at-lang.is-open .at-lang__btn {
    border-color: var(--at-accent-ring);
    background: #fff;
    color: var(--at-accent);
    box-shadow: 0 0 0 4px var(--at-accent-soft);
}
.at-lang__btn svg { flex: 0 0 auto; }

.at-lang__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    display: none;
    min-width: 156px;
    margin: 0;
    padding: 7px;
    list-style: none;
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-r);
    background: #fff;
    box-shadow: var(--at-sh-3);
    z-index: 60;
}
.at-lang.is-open .at-lang__menu { display: block; }

.at-lang__menu a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--at-r-xs);
    color: var(--at-text-2);
    font-size: 13.5px;
    white-space: nowrap;
}
.at-lang__menu a:hover {
    background: var(--at-surface-2);
    color: var(--at-accent);
    text-decoration: none;
}
.at-lang__menu a.is-on {
    background: var(--at-accent-soft);
    color: var(--at-accent);
    font-weight: 650;
}

/* 抽屜檔：選單不能浮在被裁剪的摺疊面板裡，直接展開成一行入口 */
@media (max-width: 767px) {
    .at-lang { width: 100%; }
    .at-lang__btn { width: 100%; justify-content: flex-start; height: 34px; }
    .at-lang__menu,
    .at-lang.is-open .at-lang__menu {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .at-lang__menu a { padding: 6px 10px; background: var(--at-surface-2); }
}

/* --------------------------------------------------------------------------
   8. 內容塊：工具頁的「教程 + 常見問題」兩塊
      渲染在 public/site-i18n.php：主站 site_tool_content_html()，
      子應用 site_module_tool_content_html()。原來這段寫在 apple.css 第 20b 節，
      兩個子應用不載入 apple.css，頁面上就只剩一個工具面板；整塊遷到這裡，
      主站經第 1 行的 @import 繼續拿到同一份樣式，三套介面不會長歪。
   -------------------------------------------------------------------------- */
.at-doc { margin-top: 40px; }
.at-doc__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.at-doc__col {
    padding: 24px 26px;
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-r-lg);
    background: var(--at-surface);
    box-shadow: var(--at-sh-1);
}
.at-doc__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--at-text);
}
.at-doc__note { margin: 0 0 14px; font-size: 13px; color: var(--at-text-3); }
.at-doc__privacy {
    margin: 16px 0 0;
    padding: 10px 13px;
    border-radius: var(--at-r-sm);
    background: var(--at-green-soft);
    color: var(--at-green);
    font-size: 12.5px;
    line-height: 1.6;
}
.at-steps { margin: 0; padding: 0; list-style: none; }
.at-steps__i {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px dashed var(--at-line);
    font-size: 14px;
    line-height: 1.7;
    color: var(--at-text-2);
}
.at-steps__i:first-child { border-top: 0; padding-top: 4px; }
.at-steps__n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--at-accent-soft);
    color: var(--at-accent);
    font-size: 12px;
    font-weight: 700;
}

/* 摺疊問答 */
.at-faq { display: block; }
.at-faq__i { border-bottom: 1px solid var(--at-line-soft); }
.at-faq__i:last-child { border-bottom: 0; }
.at-faq__i > summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 13px 26px 13px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--at-text);
}
.at-faq__i > summary::-webkit-details-marker { display: none; }
.at-faq__i > summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 7px; height: 7px;
    border-right: 1.7px solid var(--at-text-4);
    border-bottom: 1.7px solid var(--at-text-4);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s var(--at-ease-out);
}
.at-faq__i[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.at-faq__i > summary:hover { color: var(--at-accent); }
.at-faq__i > p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--at-text-2);
}

@media (max-width: 991px) {
    .at-doc__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .at-doc { margin-top: 30px; }
    .at-doc__col { padding: 20px 18px; }
}

/* 深色檔（網路工具子應用可切深色）：在這一節範圍內覆蓋令牌，
   主站沒有 data-theme，規則不會生效，輸出與遷移前完全一致。 */
[data-theme="dark"] .at-doc {
    --at-surface: #1c1c1e;
    --at-line: rgba(255, 255, 255, .14);
    --at-line-soft: rgba(255, 255, 255, .1);
    --at-text: #f5f5f7;
    --at-text-2: #a1a1a6;
    --at-text-3: #86868b;
    --at-text-4: #6e6e73;
    --at-accent: #0a84ff;
    --at-accent-soft: rgba(10, 132, 255, .18);
    --at-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --at-green: #30d158;
    --at-green-soft: rgba(48, 209, 88, .14);
}