/* style.css - 主 UI 排版與結構配置 */

/* 淺色模式例外配置 (處理不屬於變數的結構變化) */
@media (prefers-color-scheme: light) {
    .fixed-bottom-card {
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
}

::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    background: transparent !important;
}

* {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: pan-x pan-y;
}

*:focus,
*:focus-visible {
    outline: none !important;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
    font-family: var(--font-main);
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* =========================================
   🟢 終極版：全螢幕搜尋遮罩 (優雅 20px 無噪點純淨版)
   ========================================= */

.search-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;

    /* 1. 與漢堡按鈕一模一樣的優雅模糊度 (20px) */
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;

    /* 2. 微弱的底色，用來稍微壓暗背後卡片，讓搜尋框跳出來 */
    background: rgba(0, 0, 0, 0.2) !important;

    /* 確保沒有多餘的光影與干擾 */
    box-shadow: none !important;
    border: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 5500 !important;

    /* 0.3秒極致滑順的淡入，絕不延遲 */
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s !important;
}

body.searching .search-mask {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s !important;
}

/* 🔴 徹底封殺之前殘留的 ::before 和 ::after 噪點層 */
.search-mask::before,
.search-mask::after {
    display: none !important;
}

/* 3. 淺色模式自動轉換 */
@media (prefers-color-scheme: light) {
    .search-mask {
        /* 淺色模式下一樣是 20px 模糊，底色改為微弱的白色 */
        background: rgba(255, 255, 255, 0.2) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        backdrop-filter: blur(20px) !important;
    }
}

/*body.menu-active .search-mask { transition-delay: 0.15s; }*/

#app-stage {
    width: 100%;
    max-width: 500px;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    padding: 12px;
    padding-top: calc(env(safe-area-inset-top) + 12px);
    background: transparent;
    z-index: 6000;
    pointer-events: none;
}

.search-container {
    width: var(--card-width);
    max-width: 420px;
    margin: 0 auto;
    /* 🟢 改為 95px 以容納兩排按鈕 */
    height: 95px;
    /* 🟢 移除 flex 相關設定，純粹作為絕對定位的基準框 */
    display: block;
    position: relative;
    pointer-events: auto;
    transition: gap 0.4s var(--active-bounce);
}

.left-circle-btn {
    width: 44px;
    height: 44px;
    background: var(--search-bg);
    border-radius: 50%;
    border: 1px solid var(--search-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--icon-color);

    /* 🟢 絕對定位：左下角 (與膠囊左側切齊) */
    position: absolute;
    top: 51px;
    right: 51px;

    /* 🟢 清除原本釘在畫面左側的設定 */
    left: auto;

    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s var(--apple-spring), opacity 0.35s ease, scale 0.4s var(--apple-spring);
}

.left-circle-btn svg {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.7;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/*  右上互動方塊（右上膠囊、通知、搜尋）  */
.search-container {
    width: var(--card-width);
    max-width: 420px;
    margin: 0 auto;
    height: 95px;
    display: block;
    position: relative;
    pointer-events: auto;
    transition: gap 0.4s var(--active-bounce);

    /* 🟢 新增：使用 transform 來平移整組母艦 (矩陣) */
    /* translate(X軸左右, Y軸上下) */
    /* 例如：往左移px，往下移px */
    top: 10px;
    left: -10px;
}

/* =========================================
   🟢 矩陣外框底板 (中心錨點鎖死版)
   ========================================= */
.search-container::before {
    content: '';
    position: absolute;

    /* 1. 鎖定「四顆按鈕矩陣」的絕對圓心座標 */
    /* (膠囊寬 95px / 總高 95px，所以矩陣圓心在 47.5px) */
    top: 47.5px;
    right: 47.5px;

    /* 2. 核心校正：把底板的「中心點」釘在上面的座標 */
    transform: translate(50%, -50%);

    /* =====================================
       📐 尺寸調整區：請直接在這裡改數字！
       因為中心點已經鎖死，改大改小都會完美從中心向外延伸。
       圓角公式：22px (內圓角) + 7.5px (單邊向外擴張距離)
       ===================================== */
    width: 110px;
    height: 110px;
    border-radius: 29.5px;

    /* =====================================
       🎨 底色與邊框開關區 (教學)
       目前是「雙層底色疊加效果」。
       👉 只想保留外框，不要底板顏色，請把下面這 3 行改為：
       background: transparent;
       -webkit-backdrop-filter: none;
       backdrop-filter: none;
         「雙層底色疊加效果」，請把下面這 3 行改為：
        background: var(--search-bg);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
       ===================================== */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    /* 與按鈕一致的邊框 */
    border: 1px solid var(--search-border);

    /* 防干擾與陰影 */
    z-index: 0;
    pointer-events: none;
    /* 關閉所有微互動與點擊，讓它只是一張純畫布 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.5s var(--apple-spring), opacity 0.3s ease;
}

.search-trigger {
    width: 44px;
    height: 44px;
    background: var(--search-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* 🟢 絕對定位：右下角 (與膠囊右側切齊) */
    position: absolute;
    right: 0px;
    top: 51px;

    /* 🟢 移除上一階段的 margin-right */
    margin-right: 0px;

    transition: all 0.5s var(--active-bounce), transform 0.5s var(--apple-spring), opacity 0.4s linear, scale 0.4s var(--apple-spring);
    border: 1px solid var(--search-border);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.search-container.menu-open .search-trigger {
    transform: translate3d(-135px, 0, 0);
    opacity: 0;
    pointer-events: none;
}



.search-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    flex-shrink: 0;
    transition: transform 0.4s var(--active-bounce);
}

.search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.7;
}

.input-wrapper {
    position: absolute;
    left: 44px;
    width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: width 0.5s var(--active-bounce), opacity 0.3s ease;
}

#search-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0 10px;
    color: var(--text-main);
    font-size: 16px;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}

.action-capsule {
    height: 44px;
    width: 95px;
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 22px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    /* 🟢 絕對定位：右上角起點 */
    position: absolute;
    right: 0px;
    top: 0px;

    /* 🟢 移除 translateY 的干擾 */
    transform: none;
    transform-origin: top right;
    z-index: 5600;
    flex-shrink: 0;
    transition: width 0.5s var(--apple-spring), height 0.5s var(--apple-spring), opacity 0.2s ease, transform 0.5s var(--apple-spring), border-radius 0.5s var(--apple-spring), margin 0.5s var(--apple-spring), top 0.5s var(--apple-spring), scale 0.4s var(--apple-spring);
}

/* 🟢 將 justify-items 改為 stretch，確保按鈕的感應熱區 100% 填滿左右半部 */
.capsule-grid-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}

.capsule-btn-item {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    cursor: pointer;
    padding: 0;
    transition: transform 0.4s var(--apple-spring), opacity 0.3s ease;
}

/* 🟢 物理對齊魔法：抵銷 95px 均分後導致的 1.5px 偏移，讓 SVG 完美鎖死在 22px 半徑圓心！ */
.capsule-btn-item:first-of-type>svg,
.capsule-btn-item:first-of-type>div {
    margin-right: 3px !important;
}

.capsule-btn-item:last-of-type>svg,
.capsule-btn-item:last-of-type>div {
    margin-left: 3px !important;
}

.capsule-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    opacity: 0.5;
    margin: 0;
}

/* =========================================
   🟢 膠囊按鈕 SVG 聯動系統 (同步卡片滑動 + 微互動)
   ========================================= */
:root {
    --icon-pop-scale: 1.2;
    --pop-duration: 0.3s;
}

.capsule-btn-item svg {
    position: absolute;
    transition: opacity 0.4s ease, transform 0.55s var(--spring-release);
}

.capsule-btn-item svg.icon-default {
    opacity: 0.8 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.capsule-btn-item svg.icon-hidden {
    opacity: 0 !important;
    transform: translateY(120%) !important;
    pointer-events: none !important;
}

.action-capsule.detail-active .capsule-btn-item svg.icon-default {
    opacity: 0 !important;
    transform: translateY(-120%) !important;
    pointer-events: none !important;
}

.action-capsule.detail-active .capsule-btn-item svg.icon-hidden {
    opacity: 0.8 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

@keyframes capsulePop {
    0% {
        scale: 1;
    }

    40% {
        scale: var(--capsule-pop-scale);
    }

    100% {
        scale: 1;
    }
}

@keyframes iconPop {
    0% {
        scale: 1;
    }

    40% {
        scale: var(--icon-pop-scale);
    }

    100% {
        scale: 1;
    }
}

.action-capsule.trigger-pop {
    animation: capsulePop var(--pop-duration) var(--apple-spring) forwards !important;
}

.action-capsule.trigger-pop .capsule-btn-item svg.icon-hidden {
    animation: iconPop var(--pop-duration) var(--apple-spring) forwards !important;
}

.cancel-circle-btn {
    width: 0;
    height: 44px;
    background: var(--search-bg);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    position: relative;
    z-index: 5700;
    transition: width 0.4s var(--active-bounce), opacity 0.3s ease, transform 0.4s var(--active-bounce), scale 0.4s var(--apple-spring);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.cancel-circle-btn svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    min-height: 17px;
    display: block;
    flex-shrink: 0;
    opacity: 0.8;
}

/* =========================================
   🟢 膠囊 2D 滑動切換系統 (完美同步卡片 3D 翻轉)
   ========================================= */
/* 1. 向右滑出消失 (進入 Blank 模式)
   膠囊寬 95px，向右平移 95px 剛好讓左側徹底越過右側中線並消失 */
.action-capsule.slide-out-right .capsule-btn-item svg.icon-hidden,
.action-capsule.slide-out-right .capsule-btn-item svg.icon-blank-mode {
    transform: translate3d(95px, 0, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s 0.1s linear !important;
}

/* 2. 從左側準備滑入 (Blank 模式圖示就位) */
.action-capsule.slide-in-left-start .capsule-btn-item svg.icon-hidden,
.action-capsule.slide-in-left-start .capsule-btn-item svg.icon-blank-mode {
    transform: translate3d(-95px, 0, 0) !important;
    opacity: 0 !important;
    transition: none !important;
}

/* 3. 從左側滑入定位 */
.action-capsule.slide-in-active .capsule-btn-item svg.icon-hidden,
.action-capsule.slide-in-active .capsule-btn-item svg.icon-blank-mode {
    transform: translate3d(0, 0, 0) !important;
    opacity: 0.8 !important;
    transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s ease-out !important;
}

/* 4. 反向：向左滑出消失 (離開 Blank 模式，原路返回) */
.action-capsule.slide-out-left .capsule-btn-item svg.icon-hidden,
.action-capsule.slide-out-left .capsule-btn-item svg.icon-blank-mode {
    transform: translate3d(-95px, 0, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s 0.1s linear !important;
}

/* 5. 反向：從右側準備滑入 (原生圖示就位) */
.action-capsule.slide-in-right-start .capsule-btn-item svg.icon-hidden,
.action-capsule.slide-in-right-start .capsule-btn-item svg.icon-blank-mode {
    transform: translate3d(95px, 0, 0) !important;
    opacity: 0 !important;
    transition: none !important;
}

/* =========================================
   🟢 搜尋按鈕 SVG 同步膠囊滑動 (完美修復版)
   ========================================= */
.search-trigger .search-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.search-trigger .search-icon svg {
    position: absolute !important;
    margin: 0 !important;

    /* 👇 如果想調整原本放大鏡的大小，改這裡 */
    width: 20px !important;
    height: 20px !important;

    /* 🟢 徹底解決抽搐與下移：強制鎖死正中心點 */
    top: 50% !important;
    left: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important;
}

/* 👇 歷史紀錄圖示專屬大小微調區 (回答你的問題 2) */
.search-trigger .search-icon svg.lucide-history {
    width: 22px !important;
    /* 想要多大就在這裡調 */
    height: 22px !important;
    stroke-width: 1.6 !important;
}

/* 1. 向右滑出消失 (🟢 距離改為 95px，與膠囊移動速度 100% 同步) */
.search-trigger.slide-out-right .search-icon svg {
    transform: translate3d(calc(-50% + 95px), -50%, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s 0.1s linear !important;
}

/* 2. 從左側準備滑入 */
.search-trigger.slide-in-left-start .search-icon svg {
    transform: translate3d(calc(-50% - 95px), -50%, 0) !important;
    opacity: 0 !important;
    transition: none !important;
}

/* 3. 從左側滑入定位 (歸位鎖死中心) */
.search-trigger.slide-in-active .search-icon svg {
    transform: translate3d(-50%, -50%, 0) !important;
    opacity: 0.8 !important;
    transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s ease-out !important;
}

/* 4. 反向：向左滑出消失 */
.search-trigger.slide-out-left .search-icon svg {
    transform: translate3d(calc(-50% - 95px), -50%, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s 0.1s linear !important;
}

/* 5. 反向：從右側準備滑入 */
.search-trigger.slide-in-right-start .search-icon svg {
    transform: translate3d(calc(-50% + 95px), -50%, 0) !important;
    opacity: 0 !important;
    transition: none !important;
}

/* =========================================
   🟢 空白/資訊/通知模式下專屬 SVG 設定
   ========================================= */
.capsule-btn-item svg.icon-menu-mode {
    opacity: 0 !important;
    transform: translateY(120%) !important;
    pointer-events: none !important;
}

/* 當漢堡選單(通知)打開時，強制隱藏其他所有模式圖示，只浮出 Menu 專屬圖示 */
body.hamburger-active .action-capsule .capsule-btn-item svg.icon-default,
body.hamburger-active .action-capsule .capsule-btn-item svg.icon-hidden,
body.hamburger-active .action-capsule .capsule-btn-item svg.icon-blank-mode,
body.hamburger-active .action-capsule .capsule-btn-item svg.icon-info-mode {
    opacity: 0 !important;
    transform: translateY(-120%) !important;
    pointer-events: none !important;
}

body.hamburger-active .action-capsule .capsule-btn-item svg.icon-menu-mode {
    opacity: 0.8 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* =========================================
   🟢 搜尋按鈕：點擊歷史紀錄的連鎖動畫 (Sync -> Check)
   ========================================= */

/* 1. 隔離非主動圖示，防止滑動動畫干擾 */
.search-trigger .search-icon svg.sync-icon {
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) !important;
}

.search-trigger .search-icon svg.check-icon {
    opacity: 0 !important;
    transform: translate3d(-50%, calc(-50% - 24px), 0) !important;
    /* 預設藏在上方 */
}

/* 2. 階段一：點擊後切換 Sync 並旋轉 (1秒線性轉減速) */
.search-trigger.slide-in-active.action-spinning .search-icon svg.history-icon {
    opacity: 0 !important;
    transition: none !important;
    /* 瞬間切換 */
}

.search-trigger.slide-in-active.action-spinning .search-icon svg.sync-icon {
    opacity: 0.8 !important;
    /* 一秒線性轉一圈，接近 360 度時平滑減速 */
    transform: translate3d(-50%, -50%, 0) rotate(-360deg) !important;
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.1s !important;
}

/* 3. 階段二：完成打勾 (向下掉出) */
.search-trigger.slide-in-active.action-success .search-icon svg.history-icon {
    opacity: 0 !important;
    transition: none !important;
}

.search-trigger.slide-in-active.action-success .search-icon svg.sync-icon {
    /* Sync 圖示轉完後直接向下掉 */
    transform: translate3d(-50%, calc(-50% + 24px), 0) rotate(-360deg) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s linear !important;
}

.search-trigger.slide-in-active.action-success .search-icon svg.check-icon {
    /* 打勾圖示從上方掉入，帶彈跳節奏 (對齊下載按鈕) */
    transform: translate3d(-50%, -50%, 0) !important;
    opacity: 1 !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-out !important;
}

/* 4. 階段三：Reset (打勾往上消失，歷史從下往上浮出) */
.search-trigger.slide-in-active.action-resetting .search-icon svg.check-icon {
    /* 打勾圖示往上飛走 */
    transform: translate3d(-50%, calc(-50% - 24px), 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s linear !important;
}

.search-trigger.slide-in-active.action-resetting .search-icon svg.history-icon {
    /* 第一步：先把歷史圖示瞬間定位在下方預備 */
    transform: translate3d(-50%, calc(-50% + 24px), 0) !important;
    opacity: 0 !important;
    transition: none !important;
}

.search-trigger.slide-in-active.action-resetting-active .search-icon svg.history-icon {
    /* 第二步：浮上來回到正中央 */
    transform: translate3d(-50%, -50%, 0) !important;
    opacity: 0.8 !important;
    transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s ease-out !important;
}

/* =========================================
   🟢 搜尋按鈕：無資料時的錯誤防呆連鎖動畫 (X 圖示與搖頭震盪)
   ========================================= */

/* 1. 隔離 X 圖示，預設藏在上方 */
.search-trigger .search-icon svg.x-icon {
    opacity: 0 !important;
    transform: translate3d(-50%, calc(-50% - 24px), 0) !important;
}

/* 2. 階段二分支 (失敗)：向下掉出 Sync，X 掉入並觸發搖頭 */
.search-trigger.slide-in-active.action-error .search-icon svg.history-icon {
    opacity: 0 !important;
    transition: none !important;
}

.search-trigger.slide-in-active.action-error .search-icon svg.sync-icon {
    transform: translate3d(-50%, calc(-50% + 24px), 0) rotate(-360deg) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s linear !important;
}

.search-trigger.slide-in-active.action-error .search-icon svg.x-icon {
    transform: translate3d(-50%, -50%, 0) !important;
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out !important;
    /* 延遲 0.15s 等它掉下來後，開始 0.4s 的劇烈搖晃 */
    animation: search-error-shake 0.4s cubic-bezier(.36, .07, .19, .97) 0.15s both !important;
}

/* 3. 階段三：Reset (X 圖示往上消失) */
.search-trigger.slide-in-active.action-resetting .search-icon svg.x-icon {
    transform: translate3d(-50%, calc(-50% - 24px), 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s linear !important;
}

/* 專屬搖頭動畫引擎 (改用 margin 避開 transform !important 衝突) */
@keyframes search-error-shake {

    0%,
    100% {
        margin-left: 0;
    }

    20% {
        margin-left: -4px;
    }

    40% {
        margin-left: 4px;
    }

    60% {
        margin-left: -4px;
    }

    80% {
        margin-left: 4px;
    }
}

/* ==========================================================================
   卡片堆疊與物理邏輯
   ========================================================================== */
.card-stack {
    position: absolute;
    bottom: var(--bottom-anchor);
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    overflow: visible;
    touch-action: none;
    transition: transform 0.8s var(--premium-ease), filter 0.8s ease;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.card-stack.dragging,
.card-stack.dragging .card {
    transition: none !important;
}

.card-stack.bounce-back {
    transition: transform 0.5s var(--ios-snap) !important;
}

.card-stack.bounce-back .card {
    transition: margin 0.5s var(--ios-snap) !important;
}

.card-stack::-webkit-scrollbar {
    display: none;
}

.card {
    width: var(--card-width);
    max-width: 420px;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--card-radius);
    margin-bottom: calc(-1 * (min(var(--card-width), 420px) / 1.586) + (min(var(--card-width), 420px) / 1.586) * 0.28 + var(--stack-spread, 0px));
    position: relative;
    box-shadow: var(--ray-shadow-resting);
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--dynamic-speed, 0.65s) var(--active-bounce), opacity 0.3s ease, box-shadow 0.6s var(--premium-ease);
    cursor: pointer;
    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    flex-shrink: 0;
}

.card:last-child {
    margin-bottom: 0;
}

.card.active {
    margin-bottom: 50px;
    z-index: 999 !important;
    transform: translate3d(0, var(--travel-y, 0px), 0) scale(1);
    box-shadow: var(--ray-shadow-active);
    transition: transform var(--dynamic-speed, 0.65s) var(--active-bounce), margin var(--dynamic-speed, 0.65s) ease, box-shadow 0.6s ease;
}

.card.hidden-placeholder {
    opacity: 0 !important;
    pointer-events: none;
}

.card.lifted-state {
    transform: translate3d(0, -100px, 0);
    opacity: 0 !important;
    pointer-events: none;
    transition: none !important;
}

.card.returning {
    animation: snapIn 0.6s var(--impact-bounce) forwards;
    opacity: 1 !important;
    pointer-events: auto;
    transition: none !important;
}

.card-stack.has-active {
    transform: scale(0.92);
    filter: blur(10px) brightness(1);
    pointer-events: none;
}

@media (any-hover: hover) {
    .card-stack.allow-hover:not(.dragging):not(.has-active) .card:not(.returning):not(.piano-ripple):not(.opening-pull) {
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    }

    .card-stack.allow-hover.just-awoke:not(.dragging):not(.has-active) .card:not(.returning):not(.piano-ripple):not(.opening-pull) {
        transition: transform 1.5s cubic-bezier(0.4, 0, 0.1, 1) !important;
    }

    .card-stack.allow-hover:not(.dragging):not(.has-active) .card:not(.returning):not(.piano-ripple):not(.opening-pull):hover {
        transform: translate3d(0, -8px, 0);
    }
}

.card.touch-lifted {
    transform: translate3d(0, -8px, 0) scale(1) !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.card.touch-lifted:active {
    transform: translate3d(0, -8px, 0) scale(1) !important;
}

/* ==========================================================================
   內容佈局、膠囊標籤與文字格
   ========================================================================== */
.card-content {
    /* ✨ 把第三個數值(底部留白)從 40px 改為 20px，釋放底部空間 */
    padding: 0 24px 20px 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 15px, 0);
    transition: opacity 0.4s ease 0.2s, visibility 0.4s, transform var(--dynamic-speed, 0.65s) var(--active-bounce) 0.2s;
}

/* ==========================================================================
   🟢 預覽魔法：永遠讓最底層（視覺最前面）的卡片顯示詳情內容 (受設定開關控制)
   ========================================================================== */
body.enable-bottom-preview .card-stack:not(.has-active) .card:last-child .card-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    /* 稍微提早一點淡入，讓卡片掉下來時內容已經準備好 */
    transition: opacity 0.4s ease 0.1s, visibility 0.4s, transform var(--dynamic-speed, 0.65s) var(--active-bounce);
}

.active .card-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.card-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line-name {
    font-size: 1.3rem;
    font-weight: 800;
    opacity: 0.9;
}

/* ==========================================================================
   ✨ 描述文字：還原原始排版與顏色 (專供個性化面板維持原樣使用)
   ========================================================================== */
.description {
    line-height: 1.6;
    margin-top: 0;
    /* ✨ 關鍵：消除預設的巨大段落留白 */
    color: var(--text-secondary);
    background-image: var(--text-bg-gradient-secondary, none);
    -webkit-background-clip: var(--text-clip, border-box);
    background-clip: var(--text-clip, border-box);
    -webkit-text-fill-color: var(--text-fill, var(--text-secondary));
}

/* 🚀 精準打擊：只隱藏「主畫面」和「詳情面板」的文字，絕對不碰個性化面板 */
.card>.card-content>.description,
#detail-card-container .description {
    display: none !important;
}

/* ==========================================================================
   🟢 舊版共用膠囊按鈕：還原最原始的緊湊尺寸 (修復個性化面板跑版)
   ========================================================================== */
.info-tag-item {
    background: var(--tag-bg);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    /* ✨ 還原原本小巧的內距 */
    border-radius: 100px;
    font-size: 0.9rem;
    /* ✨ 還原原本的字體大小 */
    font-weight: 600;
    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    font-size: 1.05rem;
}

/* ==========================================================================
   🟢 垂直膠囊與圓形預覽排版 (置中自適應連動版)
   ========================================================================== */
.vertical-info-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ✨ 1. 排列 */
    gap: 8px;
    /* 稍微縮小垂直間距，讓 4 排更緊湊 */
    margin-bottom: 0;
    /* 移除多餘的底部空間 */

    /* 🚀 比例控制台：以後只要調這幾個數字，全體自動完美縮放！ */
    --info-font-size: 1.1rem;
    /* 👉 調整這個，膠囊與圓形會跟著自動放大縮小 */
    --info-pad-y: 0.26em;
    /* 👉 膠囊上下厚度 (em 代表以文字大小為基準) */
    --info-pad-x: 1.2em;
    /* 👉 膠囊左右留白 */
    --info-circle-size: 2.1em;
    /* 👉 後方圓形的直徑比例 */
}

.info-list-row {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 確保內部組合置中 */
    gap: 8px;
    /* 膠囊跟後方正圓之間的距離 */
}

.info-capsule {
    background: var(--tag-bg);
    border: 1px solid var(--border-color);

    /* ✨ 這裡使用 em 變數，它會自動拿文字大小來乘上比例！ */
    padding: var(--info-pad-y) var(--info-pad-x);
    border-radius: 999px;

    font-size: var(--info-font-size);
    font-weight: 600;
    line-height: 1.4;

    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info-circle {
    /* ✨ 圓形直徑也綁定 em 比例，保證永遠是完美正圓，且跟文字等比例 */
    width: var(--info-circle-size);
    height: var(--info-circle-size);
    border-radius: 50%;
    background: var(--tag-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;

    /* 圓形內的字體設定為膠囊文字的 90%，維持視覺平衡 */
    font-size: calc(var(--info-font-size) * 0.9);
    font-weight: 700;

    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

/* ==========================================================================
   🟢 舊版共用膠囊按鈕 (負責修復個性化設定與新增面板的 UI)
   ========================================================================== */
.info-tag-item {
    background: var(--tag-bg);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   獨立詳情層 (Detail Overlay)
   ========================================================================== */
.detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background: transparent;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

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

#detail-card-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(env(safe-area-inset-top) + 160px);
    position: relative;
    /* 🟢 關鍵修復：加入相對定位，作為透明卡片的對齊基準點 */
}

/* ==========================================================================
   🟢 詳情卡片：全透明延伸區塊 -> 改為實心毛玻璃版
   ========================================================================== */
.detail-extension-card {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;

    width: var(--card-width);
    max-width: 420px;
    height: 100vh;
    margin-top: 30px;
    border-radius: var(--card-radius);

    /* ✨ 替換為實心珍珠白毛玻璃材質 */
    background: rgba(245, 245, 247, 0.65);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);

    /* 柔和的邊框與層次陰影 */
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    pointer-events: none;
    transform: translate3d(0, 100vh, 0);
    transition: transform 0.55s var(--spring-release), opacity 0.3s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
}

/* 隨主卡片一起升起 */
.detail-overlay.active .detail-extension-card {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    /* ✨ 關鍵修復：解除觸控封印，讓實心玻璃面板可以接收手指滑動！ */
}

/* ==========================================================================
   🟢 延伸卡片 3D 翻轉聯動：無縫過衝引擎 (Overshoot Transition)
   ========================================================================== */

/* 1. 向下抽離 (去程)：與主卡片 3D 翻轉速度完全一致 */
.detail-card-inner.flip-out~.detail-extension-card {
    transform: translate3d(0, 100vh, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.2s 0.1s linear !important;
}

/* 2. 準備回彈 (底部待命準備發射) */
.detail-card-inner.flip-back-start~.detail-extension-card {
    transform: translate3d(0, 100vh, 0) !important;
    opacity: 1 !important;
    transition: none !important;
}

/* 3. 向上彈出 (回程)：微距過衝交接 (防撞版) */
.detail-card-inner.flip-back-active~.detail-extension-card {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;

    /* 👇 關鍵修改：將 1.5 降為 1.025 (只允許衝過頭 2.5%)
       這樣它最多只會往上彈約 15~20px，會完美停留在 30px 的安全距離內，
       既保留了 Q 彈的物理慣性，又絕對不會撞到上面的卡片！ */
    transition: transform 0.65s cubic-bezier(0.2, 1.025, 0.4, 1) !important;
}

.detail-card-inner {
    width: var(--card-width);
    max-width: 420px;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--card-radius);
    box-shadow: var(--ray-shadow-active);
    isolation: isolate;
    transform: translate3d(0, 100vh, 0);
    transition: transform 0.55s var(--spring-release);
    overflow: hidden;
    color: var(--card-text-color);
    text-shadow: var(--text-shadow-subtle);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.detail-overlay.active .detail-card-inner {
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   互動提示圖標 (Dismiss Icon)
   ========================================================================== */
.dismiss-icon {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 100px);
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 30px;
    z-index: 2600;
    fill: rgba(142, 142, 147, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1s ease, visibility 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    .dismiss-icon {
        fill: rgba(174, 174, 178, 0.6);
    }

    .detail-extension-card {
        /* ✨ 深色模式：深鈦灰玻璃與金屬高光邊緣 */
        background: rgba(28, 28, 30, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
}

/* ==========================================================================
   靜態高光邊框 (Static Rim)
   ========================================================================== */
.card::before,
.fixed-bottom-card::before,
.detail-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg, var(--rim-glare-start, rgba(255, 255, 255, 0.8)) 0%, rgba(255, 255, 255, 0) 180px),
        linear-gradient(to bottom,
            var(--full-wrap-border, transparent) 0%,
            var(--full-wrap-border, transparent) calc(100% - 40px),
            transparent calc(100% - 15px));
    -webkit-mask-image: linear-gradient(white, white), linear-gradient(white, white);
    -webkit-mask-clip: content-box, padding-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(white, white), linear-gradient(white, white);
    mask-clip: content-box, padding-box;
    mask-composite: exclude;
    z-index: 10;
    pointer-events: none;
    -webkit-clip-path: inset(0 round var(--card-radius));
    clip-path: inset(0 round var(--card-radius));
}

.card::after,
.fixed-bottom-card::after,
.detail-card-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: --glare-angle 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    background-color: var(--dynamic-glare, transparent);
    opacity: 0.23;
    filter: contrast(500%) brightness(500%);
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(var(--glare-angle, 135deg), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.2) 55%, transparent 75%);
    mask-image: linear-gradient(var(--glare-angle, 135deg), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.2) 55%, transparent 75%);
    background-size: 150px 150px;
    border-radius: inherit;
    background-clip: padding-box;
    -webkit-clip-path: inset(0 round var(--card-radius));
    clip-path: inset(0 round var(--card-radius));
}

.card-stack.bounce-back .card::after,
.card-stack.bounce-back~.fixed-bottom-card::after {
    transition: --glare-angle 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {

    .card,
    .fixed-bottom-card,
    .detail-card-inner {
        filter: saturate(1.3) brightness(1.15);
    }

    body.searching .fixed-bottom-card {
        filter: blur(var(--bg-content-blur)) saturate(1.3) brightness(1.15);
    }

    .card-stack.has-active~.fixed-bottom-card {
        filter: blur(10px) saturate(1.3) brightness(1.15);
    }

    .card::after,
    .fixed-bottom-card::after,
    .detail-card-inner::after {
        mix-blend-mode: hard-light !important;
        opacity: 0.09 !important;
    }
}

.card-content,
.card-header,
.line-name,
.status-tag {
    position: relative;
    z-index: 2;
}

/* =========================================
   🟢 終極 Z 軸景深魔法 (True Depth of Field)
   ========================================= */
body.menu-active .card-stack,
body:has(.left-circle-btn.is-expanded) .card-stack,
body:has(.universal-window.is-active) .card-stack,
body:has(.detail-overlay.active) .card-stack,
body.searching .card-stack,
body.main-menu-active .card-stack,
body.universal-active .card-stack {
    transform: scale(0.90) translateY(15px) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    /* 鎖死卡片堆，禁止觸控 */
}

/* 🟢 強制鎖死螢幕，禁止 iOS/Android 橡皮筋回彈與滾動 */
body.searching {
    touch-action: none !important;
    overflow: hidden !important;
}

body:has(.detail-overlay.active).menu-active .card-stack,
body:has(.detail-overlay.active):has(.left-circle-btn.is-expanded) .card-stack,
body:has(.detail-overlay.active):has(.universal-window.is-active) .card-stack,
body:has(.detail-overlay.active).searching .card-stack {
    transform: scale(0.81) translateY(30px) !important;
    filter: blur(10px) brightness(0.5) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.menu-active #detail-card-container,
body:has(.left-circle-btn.is-expanded) #detail-card-container,
body:has(.universal-window.is-active) #detail-card-container,
body.searching #detail-card-container,
body.menu-active #dynamic-blank-overlay>.perspective-container,
body:has(.left-circle-btn.is-expanded) #dynamic-blank-overlay>.perspective-container,
body:has(.universal-window.is-active) #dynamic-blank-overlay>.perspective-container,
body.searching #dynamic-blank-overlay>.perspective-container,
body.menu-active #dynamic-info-overlay>.perspective-container,
body:has(.left-circle-btn.is-expanded) #dynamic-info-overlay>.perspective-container,
body:has(.universal-window.is-active) #dynamic-info-overlay>.perspective-container,
body.searching #dynamic-info-overlay>.perspective-container {
    transform: scale(0.90) translateY(15px) !important;
    pointer-events: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#detail-card-container,
#dynamic-blank-overlay>.perspective-container,
#dynamic-info-overlay>.perspective-container {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   🟢 頂部按鈕與圖示同步淡出 (徹底修復衝突版)
   ========================================= */
/* 只讓通用視窗 (universal-window) 隱藏這些按鈕，放過漢堡選單！ */
body:has(.universal-window.is-active) .search-trigger,
body:has(.universal-window.is-active) .action-capsule,
body:has(.universal-window.is-active) .left-circle-btn {
    transform: scale(0.90) translateY(15px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

body.menu-active .dismiss-icon,
body:has(.left-circle-btn.is-expanded) .dismiss-icon,
body:has(.universal-window.is-active) .dismiss-icon,
body.searching .dismiss-icon {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.card-stack {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-stack.bounce-back-wheel {
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-stack.bounce-back-wheel .card {
    transition: margin 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-stack.bounce-back-wheel .card::after,
.card-stack.bounce-back-wheel~.fixed-bottom-card::after {
    transition: --glare-angle 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   🟢 3D 翻轉引擎
   ========================================================================== */
.perspective-container {
    perspective: 1500px !important;
    position: relative;
}

.perspective-container::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 10%;
    width: 80%;
    height: 40px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s linear;
}

.perspective-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 10%;
    width: 80%;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    filter: blur(15px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s linear;
}

.perspective-container.is-swiping::after,
.perspective-container.is-swiping::before {
    opacity: var(--swipe-shadow-opacity, 0) !important;
    transition: none !important;
}

.hardware-accelerated {
    will-change: transform, opacity, box-shadow !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

.detail-card-inner.flip-out {
    transform: scale(1) rotateY(90deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), box-shadow 0.3s linear !important;
    pointer-events: none;
}

.detail-card-inner.flip-out>.card-header,
.detail-card-inner.flip-out>.card-content {
    opacity: 0 !important;
    transition: opacity 0.15s linear !important;
}

.detail-card-inner.flip-back-in {
    transform: scale(1) rotateY(0deg) !important;
    box-shadow: var(--ray-shadow-active) !important;
    transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), box-shadow 0.3s linear !important;
}

.detail-card-inner.flip-back-in>.card-header,
.detail-card-inner.flip-back-in>.card-content {
    opacity: 1 !important;
    transition: opacity 0.2s linear 0.1s !important;
}

.detail-card-inner.flip-in-start {
    transform: scale(1) rotateY(-90deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0) !important;
    transition: none !important;
}

.detail-card-inner.flip-in-start>* {
    opacity: 0 !important;
    transition: none !important;
}

.detail-card-inner.flip-in-active {
    transform: scale(1) rotateY(0deg) !important;
    box-shadow: var(--ray-shadow-active) !important;
    transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), box-shadow 0.3s linear !important;
}

.detail-card-inner.flip-in-active>* {
    opacity: 1 !important;
    transition: opacity 0.2s linear 0.1s !important;
}

.detail-card-inner.flip-out-reverse {
    transform: scale(1) rotateY(-90deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), box-shadow 0.3s linear !important;
    pointer-events: none;
}

.detail-card-inner.flip-out-reverse>* {
    opacity: 0 !important;
    transition: opacity 0.15s linear !important;
}

.detail-card-inner.flip-back-start {
    transform: scale(1) rotateY(90deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0) !important;
    transition: none !important;
}

.detail-card-inner.flip-back-start>* {
    opacity: 0 !important;
    transition: none !important;
}

.detail-card-inner.flip-back-active {
    transform: scale(1) rotateY(0deg) !important;
    box-shadow: var(--ray-shadow-active) !important;
    transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), box-shadow 0.3s linear !important;
}

.detail-card-inner.flip-back-active>.card-header,
.detail-card-inner.flip-back-active>.card-content {
    opacity: 1 !important;
    transition: opacity 0.2s linear 0.25s !important;
}

/* ==========================================================================
   🟢 全站 SVG 骨架圖示：終極控制中心 (!important 強制覆蓋版)
   ========================================================================== */

.search-icon svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    width: 23px !important;
    height: 23px !important;
    stroke-width: 2px !important;
}

.cancel-circle-btn svg,
.capsule-btn-item svg,
#dismiss-icon svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

.left-circle-btn svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.8px !important;
}

.search-icon svg,
.capsule-btn-item svg,
#dismiss-icon svg {
    opacity: 0.8 !important;
}

.left-circle-btn:not(.is-expanded) .icon-hamburger {
    opacity: 0.8 !important;
}

.left-circle-btn:not(.is-expanded) .icon-close {
    opacity: 0 !important;
}

.left-circle-btn.is-expanded .icon-hamburger {
    opacity: 0 !important;
}

.left-circle-btn.is-expanded .icon-close {
    opacity: 0.8 !important;
}

/* ==========================================================================
   🟢 獨立微調區
   ========================================================================== */

.capsule-btn-item:not(.main-btn) svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.5px !important;
}

.capsule-btn-item:not(.main-btn) svg circle {
    fill: currentColor !important;
}

.capsule-btn-item.main-btn svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 1.7px !important;
}

.capsule-btn-item svg.lucide-palette {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8px !important;
}

.capsule-btn-item svg.lucide-palette circle {
    fill: currentColor !important;
}

.capsule-btn-item svg.lucide-external-link {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8px !important;
}

.capsule-btn-item svg.lucide-chevron-left {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.7px !important;
    transform: translateX(-1px) !important;
}

.capsule-btn-item svg.lucide-cloud-download {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.8px !important;
    transform: translateY(0px) !important;
}

.cancel-circle-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.5px !important;
    opacity: 0.9 !important;
}

#dismiss-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2px !important;
}

.left-circle-btn svg.icon-close {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 1.6px !important;
    transform-origin: center center !important;
}

/* 🟢 通知選單圖示的大小與【粗細】微調 */
.capsule-btn-item svg.lucide-cog {
    width: 25px !important;
    height: 25px !important;
    /* 👇 在這裡調整設定(齒輪)的粗細，例如改為 1.5px (變細) 或 2.0px (變粗) */
    stroke-width: 1.6px !important;
}

.capsule-btn-item svg.lucide-archive-x {
    width: 21px !important;
    height: 21px !important;
    /* 👇 在這裡調整封存(X)的粗細，例如改為 1.5px (變細) 或 2.0px (變粗) */
    stroke-width: 1.8px !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   🟢 按鈕微互動 (Hover & Touch Scale)
   ========================================================================== */
.left-circle-btn,
.menu-close-btn,
.search-trigger,
.action-capsule,
.cancel-circle-btn,
.interactive-btn {
    scale: 1;
}

.interactive-btn {
    transition: scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), box-shadow 0.4s ease;
}

@media (any-hover: hover) {

    .left-circle-btn:not(.is-expanded):hover,
    .menu-close-btn:hover,
    .search-container:not(.active) .search-trigger:hover,
    .action-capsule:not(.menu-expanded):hover,
    .cancel-circle-btn:hover,
    .interactive-btn:hover {
        scale: 1.05;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}

.interactive-btn:active {
    scale: 0.94;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.touch-lifted-btn {
    scale: 1.05;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

#p-edit-row[data-editing="true"] #p-btn-input-container.interactive-btn {
    scale: 1 !important;
    cursor: default;
}

#p-edit-row[data-editing="true"] #p-btn-input-container.interactive-btn:active {
    scale: 1 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   🟢 Android Blink 引擎專屬防閃爍修復 (動態降級法)
   ========================================================================== */
html.is-android-blink .card::after,
html.is-android-blink .fixed-bottom-card::after,
html.is-android-blink .detail-card-inner::after {
    background-image: none !important;
    filter: none !important;
    opacity: 0.65 !important;
}

html.is-android-blink .card-stack.dragging .card::after,
html.is-android-blink .card-stack.bounce-back .card::after,
html.is-android-blink .card-stack.bounce-back-wheel .card::after {
    mix-blend-mode: normal !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
    transition: none !important;
}

html.is-android-blink .card-stack.dragging .card,
html.is-android-blink .card-stack.bounce-back .card,
html.is-android-blink .card-stack.bounce-back-wheel .card {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==========================================================================
   🟢 殭屍殘影封殺力場 (Zombie Flash Killer)
   ========================================================================== */
#detail-overlay:not(.active)~#dismiss-icon {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* ==========================================================================
   裝置方向控制 (Landscape Prompt)
   ========================================================================== */
#landscape-prompt {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-color);
    color: var(--text-main);
    z-index: 999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, visibility 0s 1s;
}

.rotate-phone-icon,
.landscape-title {
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}

.landscape-desc {
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
}

.rotate-phone-icon {
    margin-bottom: 20px;
    animation: rotatePhone 2s infinite ease-in-out;
}

.landscape-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

@keyframes rotatePhone {
    0% {
        transform: rotate(-90deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-90deg);
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
    #landscape-prompt {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity 0.1s ease 0s, visibility 0s 0s !important;
    }

    .rotate-phone-icon,
    .landscape-title {
        opacity: 1 !important;
        transition: opacity 0.3s ease 0.1s !important;
    }

    .landscape-desc {
        opacity: 0.7 !important;
        transition: opacity 0.3s ease 0.1s !important;
    }

    #app-stage,
    #detail-overlay,
    .search-mask {
        display: none !important;
    }
}

/* ==========================================================================
   高級反差色動態游標 (Custom Difference Cursor)
   ========================================================================== */
@media (pointer: fine) {

    /* ✨ 修正 1：標準元件獨立一組，確保絕對生效 */
    html,
    body,
    *,
    *::before,
    *::after,
    input,
    textarea {
        cursor: none !important;
    }

    /* ✨ 修正 2：瀏覽器專屬的虛擬元件獨立一組，避免拖累上面 */
    input::-webkit-search-cancel-button,
    input::-webkit-search-decoration,
    input::-webkit-search-results-button,
    input::-webkit-search-results-decoration {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        pointer-events: none;
        z-index: 999999;
        mix-blend-mode: difference;
        will-change: transform;
        transition: width 0.15s ease-out, height 0.15s ease-out;
    }

    .custom-cursor.clicking {
        width: 10px;
        height: 10px;
    }
}

/* =========================================
   🟢 深色模式專屬：白灰微光陰影 (Dark Mode Glow)
   ========================================= */
@media (prefers-color-scheme: dark) {

    /* 1. 外層大底板的微光 (稍微擴散一點，營造氛圍) */
    .search-container::before {
        /* rgb(220, 220, 230) 是一種非常有質感的高級冷白灰色 */
        box-shadow: 0 8px 30px rgba(220, 220, 230, 0.15) !important;
        /* 🟢 新增：深色模式專屬的白灰微光邊框 */
        border: 1px solid rgba(220, 220, 230, 0.15) !important;
    }

    /* 2. 內部三個實體按鈕的微光 (稍微集中一點，凸顯按鈕輪廓) */
    .action-capsule,
    .search-trigger,
    .left-circle-btn {
        box-shadow: 0 4px 15px rgba(220, 220, 230, 0.12) !important;
    }

    /* 3. 當手指按壓或滑鼠懸浮 (Hover) 時，微光會稍微變亮並擴大 */
    @media (any-hover: hover) {

        .left-circle-btn:not(.is-expanded):hover,
        .search-container:not(.active) .search-trigger:hover,
        .action-capsule:not(.menu-expanded):hover {
            box-shadow: 0 8px 25px rgba(220, 220, 230, 0.18) !important;
        }
    }
}

/* =========================================
   🔍 全新搜尋列進場動畫 (動態時長控制版、上排展開)
   ========================================= */

:root {
    /* 🟢 搜尋動畫總時長控制中心 (請直接在這裡修改秒數，例如 0.5s, 1s, 2s) */
    --search-hero-time: 0.7s;

    /* --- 以下為系統自動依比例計算，請勿更改 --- */
    --t-bg-fade: calc(var(--search-hero-time) * 0.6);
    /* 背景淡出時間 (60%) */
    --t-item-out: calc(var(--search-hero-time) * 0.4);
    /* 舊元件退場時間 (40%) */
    --t-item-in: calc(var(--search-hero-time) * 0.4);
    /* 新元件進場時間 (40%) */

    --delay-out-1: 0s;
    --delay-out-2: calc(var(--search-hero-time) * 0.1);
    /* 第二元件延遲 (10%) */
    --delay-out-3: calc(var(--search-hero-time) * 0.2);
    /* 第三元件延遲 (20%) */

    --delay-in: calc(var(--search-hero-time) * 0.6);
    /* 新元件等待舊元件淨空的延遲 (60%) */
}

/* 🟢 大外框背景：依比例時間線性降到完全透明 */
.search-container.active::before {
    opacity: 0;
    transform: translate(50%, -50%) scale(0.8);
    transition: opacity var(--t-bg-fade) linear, transform var(--search-hero-time) var(--apple-spring) !important;
}

/* 1. 消失動畫：彈起 -> 縮小 -> 消失 */
@keyframes popOutShrink {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    40% {
        transform: translateY(-6px) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translateY(10px) scale(0.5);
        opacity: 0;
    }
}

/* 2. 復原動畫：原路彈回 */
@keyframes popBackIn {
    0% {
        transform: translateY(10px) scale(0.5);
        opacity: 0;
    }

    60% {
        transform: translateY(-4px) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 3. 彈出震動動畫 (輸入框與取消按鈕專用) */
@keyframes popInBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
        opacity: 1;
    }

    80% {
        transform: scale(0.96);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- 預設狀態 (取消搜尋時的接力復原) --- */
.search-container:not(.active) .search-trigger {
    animation: popBackIn var(--t-item-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards var(--delay-out-1);
}

.search-container:not(.active) .left-circle-btn {
    animation: popBackIn var(--t-item-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards var(--delay-out-2);
}

.search-container:not(.active) .action-capsule {
    animation: popBackIn var(--t-item-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards var(--delay-out-3);
}

.search-container:not(.active) .search-input-box,
.search-container:not(.active) .cancel-circle-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* --- 觸發搜尋狀態 (.active)：舊元件退場 --- */
.search-container.active .search-trigger {
    animation: popOutShrink var(--t-item-out) ease-in forwards var(--delay-out-1) !important;
    pointer-events: none;
}

.search-container.active .left-circle-btn {
    animation: popOutShrink var(--t-item-out) ease-in forwards var(--delay-out-2) !important;
    pointer-events: none;
}

.search-container.active .action-capsule {
    animation: popOutShrink var(--t-item-out) ease-in forwards var(--delay-out-3) !important;
    pointer-events: none;
}

/* --- 獨立輸入框樣式 (固定於上排) --- */
.search-input-box {
    position: absolute;
    top: 0px;
    left: 0;
    right: 54px;
    height: 44px;
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: 22px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transform-origin: right center;
}

.search-input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 16px;
    outline: none;
    margin-left: 10px;
}

/* --- 取消按鈕 (固定於上排最右側) --- */
.cancel-circle-btn {
    position: absolute !important;
    top: 0px !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transform-origin: center center;
    transition: none !important;
}

/* --- 新元件接力進場 --- */
.search-container.active .search-input-box,
.search-container.active .cancel-circle-btn {
    pointer-events: auto;
    animation: popInBounce var(--t-item-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards var(--delay-in) !important;
}

/* =========================================
   🟢 通知選單展開：獨立灰色介面與元件依次彈出
   ========================================= */

/* =========================================
   1. 灰色背景：預設為手機版 (滿版彈性撐開，左右保留安全距離)
   ========================================= */
.search-container::after {
    content: '';
    position: fixed;
    /* 🟢 1. 邊界直接貼齊安全區域 (無瀏海時就是 0) */
    top: env(safe-area-inset-top, 0px) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: env(safe-area-inset-left, 0px) !important;
    right: env(safe-area-inset-right, 0px) !important;

    /* 🟢 2. 核心魔法：利用 Margin 統一向內推 12px 的優雅空隙 */
    margin: 12px !important;

    /* 🟢 3. 放棄所有寫死的高度與寬度，讓 top/bottom/margin 自己去拉扯 */
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 36px !important;

    /* 🟢 手機版專屬魔法：依靠 left 和 right 撐開寬度，完美貼齊邊緣 12px */
    left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;

    /* ✨ 全新統一：高不透明度實心珍珠白玻璃 */
    background: rgba(245, 245, 247, 0.85) !important;
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    /* 拿掉內發光，保留乾淨的外陰影 */

    z-index: 4000;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =========================================
   💻 電腦/平板版防護罩：螢幕寬度大於 500px 時觸發
   ========================================= */
@media (min-width: 500px) {
    .search-container::after {
        /* 🟢 解除手機版的左右拉伸，改為絕對置中 */
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;

        /* 🟢 電腦版專屬寬度：鎖死在卡片最大寬度 420px，並左右各扣除 12px (總共扣 24px) */
        width: calc(420px + 24px) !important;
        max-width: calc(420px + 24px) !important;
    }
}

@media (prefers-color-scheme: dark) {
    .search-container::after {
        /* ✨ 深色模式：高不透明度實心深鈦灰玻璃 */
        background: rgba(28, 28, 30, 0.85) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
}

body.hamburger-active .search-container::after {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 2. 直接彈出動畫 (去除先縮小下沉的過程，改為瞬間隱藏後直接彈出) */
@keyframes directPopUp {
    0% {
        transform: scale(0.6) translateY(20px);
        opacity: 0;
    }

    70% {
        transform: scale(1.05) translateY(-3px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 母艦邊框專用的彈出動畫 (必須保留 translate(50%, -50%) 矩陣中心點) */
@keyframes directPopUpMatrix {
    0% {
        transform: translate(50%, -50%) scale(0.6) translateY(20px);
        opacity: 0;
    }

    70% {
        transform: translate(50%, -50%) scale(1.05) translateY(-3px);
        opacity: 1;
    }

    100% {
        transform: translate(50%, -50%) scale(1) translateY(0);
        opacity: 1;
    }
}

/* 3. 將新動畫套用到母艦與膠囊 */
body.hamburger-active .search-container .left-circle-btn,
body.hamburger-active .search-container .action-capsule {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: directPopUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

body.hamburger-active .search-container::before {
    opacity: 1 !important;
    animation: directPopUpMatrix 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

/* 🟢 隱藏多餘的搜尋按鈕 (通知選單用不到) */
body.hamburger-active .search-container .search-trigger {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) translateY(10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    animation: none !important;
}

/* 🟢 完美的 0.1 秒依次彈出節奏 (波浪感) */
body.hamburger-active .search-container .left-circle-btn {
    animation-delay: 0s !important;
}

/* 第 1 個彈出 (通知按鈕) */
body.hamburger-active .search-container .search-trigger {
    animation-delay: 0.1s !important;
}

/* 第 2 個彈出 (搜尋按鈕) */
body.hamburger-active .search-container::before {
    animation-delay: 0.15s !important;
}

/* 母艦邊框緊跟著出現 */
body.hamburger-active .search-container .action-capsule {
    animation-delay: 0.2s !important;
}

/* 第 3 個彈出 (上方膠囊) */


/* 4. 關閉時的防護與母艦邊框歸位 */
.search-container::before {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease !important;
}

.search-container.active::before {
    opacity: 0 !important;
    transform: translate(50%, -50%) scale(0.8) !important;
    transition: opacity 0.3s linear, transform 0.4s var(--apple-spring) !important;
}

/* =========================================
   🟢 通知選單滿版與層級修復 (純淨空殼模式)
   ========================================= */

/* 1. 救命關鍵 (Z-index 突破)：
   讓母艦、膠囊、搜尋按鈕的層級高於灰色背景 (5990)，才能浮出水面 */
body.hamburger-active .search-container::before {
    z-index: 5991 !important;
}

body.hamburger-active .search-container .action-capsule {
    z-index: 5992 !important;
}

body.hamburger-active .search-container .search-trigger {
    z-index: 5993 !important;
}

/* 3. 終極拔除 SVG、文字與點擊功能 (純淨空殼模式) */
body.hamburger-active #action-capsule,
body.hamburger-active #search-trigger,
body.hamburger-active #action-capsule *,
body.hamburger-active #search-trigger *,
body.hamburger-active #left-capsule-top *,
body.hamburger-active #left-capsule-bottom * {
    /* 🟢 封殺左右兩側母艦內所有按鈕、SVG、文字的點擊事件，防止穿透 */
    pointer-events: none !important;
}

/* =========================================
   🟢 內容物隨母艦彈出動畫 (文字與進度條 SVG) - 終極定位修復版
   ========================================= */

/* 1. 預設狀態 (絕不覆蓋原本的定位) */
.left-capsule #entry-time-display {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.left-capsule .left-capsule-icon {
    opacity: 1;
    /* ⚠️ 拔除 transform 覆蓋，讓它乖乖吃原本 style.css 裡的 translateY(-50%) 完美置中 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2. 專門為絕對定位 SVG 圖示打造的彈出動畫 (保留 X 軸 50% 與 Y 軸 -50% 置中錨點) */
@keyframes directPopUpIcon {
    0% {
        transform: translate(50%, calc(-50% + 20px)) scale(0.6);
        opacity: 0;
    }

    70% {
        transform: translate(50%, calc(-50% - 3px)) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translate(50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 3. 打開選單時觸發動畫與延遲 */
body.hamburger-active .left-capsule.bottom-capsule #entry-time-display {
    animation: directPopUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
    animation-delay: 0.25s !important;
}

body.hamburger-active .left-capsule.top-capsule .left-capsule-icon {
    /* 🟢 SVG 圖示改用專屬的 Icon 彈出動畫！ */
    animation: directPopUpIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
    animation-delay: 0.35s !important;
}

/* =========================================
   🟢 搜尋框 SVG 精準對齊左側半圓中心 (Pixel Perfect)
   ========================================= */

/* 1. 重新配置搜尋框的內距 (上 右 下 左) */
.search-input-box {
    padding: 0 16px 0 12px !important;
    /* 將左側 padding 精準設為 12px */
}

/* 2. 強制抵銷 index.html 中寫死的 style="margin-left: 4px;" */
.search-input-box .search-icon {
    margin-left: 0 !important;
}

/* =========================================
   🟢 頂部導航列：極致穩定化 (消滅重新整理時的 FOUC 抽搐)
   ========================================= */

/* 1. 鎖死母艦內部按鈕，防止 SVG 注入瞬間撐開排版 */
#capsule-main-btn,
#capsule-secondary-btn {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    animation: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. 預先鎖定所有預設 SVG 的尺寸，拒絕忽大忽小 */
#action-capsule .icon-default,
#search-trigger .icon-default {
    opacity: 0.8;
    /* 保持你原本設定的透明度 */
    transition: opacity 0.4s ease, transform 0.55s var(--spring-release);
}

/* =========================================
   🟢 左側水平母艦矩陣 (Left Horizontal Matrix)
   ========================================= */

/* 1. 左側外框底板 (中心錨點精準對齊左側) */
.left-matrix-bg {
    position: absolute;
    top: 47.5px;
    left: 67.5px;
    /* ✨ 與右側對稱 */
    transform: translate(-50%, -50%) !important;
    /* 鎖死中心點 */
    width: 110px;
    height: 110px;
    border-radius: 29.5px;

    /* 預設為純淨邊框模式 (如需底色請自行開啟) */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--search-border);

    z-index: 0;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.5s var(--apple-spring), opacity 0.3s ease;
}

/* 2. 左側上下兩顆水平膠囊 */
.left-capsule {
    position: absolute;
    left: 20px;
    /* ✨ 左側邊界 */
    width: 95px;
    /* 寬度對齊右側母艦 */
    height: 44px;
    /* 高度對齊右側母艦 */
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 5600;
    cursor: pointer;

    /* 繼承右側的彈跳與透明度過渡 */
    transition: opacity 0.2s ease, transform 0.5s var(--apple-spring), scale 0.4s var(--apple-spring);
}

/* 上方膠囊定位 */
.left-capsule.top-capsule {
    top: 0;
}

/* 下方膠囊定位 (與右側下排按鈕的 51px 完美切齊) */
.left-capsule.bottom-capsule {
    top: 51px;
}

/* 3. 深色模式：白灰微光陰影對齊 */
@media (prefers-color-scheme: dark) {
    .left-matrix-bg {
        box-shadow: 0 8px 30px rgba(220, 220, 230, 0.15) !important;
        border: 1px solid rgba(220, 220, 230, 0.15) !important;
    }

    .left-capsule {
        box-shadow: 0 4px 15px rgba(220, 220, 230, 0.12) !important;
    }
}

/* 4. 與右側母艦同步的「通知選單彈出動畫」 */
@keyframes directPopUpMatrixLeft {
    0% {
        transform: translate(-50%, -50%) scale(0.6) translateY(20px);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.05) translateY(-3px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) translateY(0);
        opacity: 1;
    }
}

body.hamburger-active .search-container .left-capsule.top-capsule {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: directPopUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
    animation-delay: 0.2s !important;
    /* 上方膠囊延遲對齊 */
}

body.hamburger-active .search-container .left-capsule.bottom-capsule {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: directPopUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
    animation-delay: 0.1s !important;
    /* 下方膠囊延遲對齊 */
}

/* 5. 確保滿版選單彈出時的高層級可點擊性 */
body.hamburger-active .search-container .left-matrix-bg {
    z-index: 5991 !important;
}

body.hamburger-active .search-container .left-capsule {
    z-index: 5992 !important;
}

/* 6. 與右側同步：在搜尋模式或進入通用視窗時退場隱藏 */
.search-container.active .left-matrix-bg {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    transition: opacity var(--t-bg-fade) linear, transform var(--search-hero-time) var(--apple-spring) !important;
}

.search-container.active .left-capsule {
    animation: popOutShrink var(--t-item-out) ease-in both var(--delay-out-3) !important;
    pointer-events: none;
}

.search-container:not(.active) .left-capsule {
    animation: popBackIn var(--t-item-in) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards var(--delay-out-3);
}

body:has(.universal-window.is-active) .left-matrix-bg,
body:has(.universal-window.is-active) .left-capsule {
    transform: scale(0.90) translateY(15px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

/* =========================================
   🟢 左舷母艦：進場時間戳記字體設計
   ========================================= */
.slashed-time-font {
    /* 1. 呼叫系統最高級的程式碼/色號等寬字體 */
    font-family: 'SF Mono', ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace !important;

    /* 2. ✨ 核心魔法：強制啟動字體的「斜線零」特徵 */
    font-variant-numeric: slashed-zero !important;

    font-size: 17px;
    /* 完美填滿膠囊的大小 */
    font-weight: 600;
    letter-spacing: 0.5px;
    /* 讓全形冒號與數字之間保持呼吸空間 */
    color: var(--icon-color);
    opacity: 0.85;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   左舷母艦：內部右側圓心圖示
   ========================================= */
.left-capsule-icon {
    position: absolute;
    /* 膠囊高度是 44px (半徑22px)，right 設為 14px 能讓圖示完美座落在右側的幾何圓心 */
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    /* 🟢 參照右側母艦圖示的標準設定 */
    width: 18px;
    height: 18px;
    opacity: 0.8;
    stroke-width: 2px !important;
    color: currentColor;
    /* 自動繼承膠囊的文字/線條顏色 */

    /* 防呆設定：讓圖示不會干擾到整個膠囊的點擊範圍 */
    pointer-events: none;

    /* 預留一點過渡動畫，方便未來你想做點擊旋轉效果 */
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================
   🟢 終極母艦鎖死系統 (智慧狀態切換與壓制版)
   ========================================= */

/* 1. 智慧鎖死：只要「沒有在搜尋」且「沒有打開全螢幕選單」，霸王條款就會自動生效，絕對防止重整抽搐！ 
   一旦搜尋啟動 (.active)，它就會自動讓位給你的退場動畫。*/
body:not(.hamburger-active) .search-container:not(.active) .left-circle-btn,
body:not(.hamburger-active) .search-container:not(.active) .search-trigger,
body:not(.hamburger-active) .search-container:not(.active) .action-capsule,
body:not(.hamburger-active) .search-container:not(.active) .left-capsule {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    animation: none !important;
}

body:not(.hamburger-active) .search-container:not(.active) .left-matrix-bg {
    animation: none !important;
}

/* 2. 搜尋框絕對壓制：賦予搜尋框與取消按鈕最高的 z-index，保證動畫期間絕對壓在所有人上面！ */
.search-container.active .search-input-box,
.search-container.active .cancel-circle-btn {
    z-index: 6000 !important;
}

/* ==========================================================================
   🟢 搜尋框展開動畫重構 (Apple-like 純粹 Transition 版)
   ========================================================================== */

/* 1. 隱藏與退場狀態 (預設狀態 - 圖層覆蓋 ＋ 同步速度版) */
.search-container:not(.active) .search-input-box,
.search-container:not(.active) .cancel-circle-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    /* 藏在右邊 60px 處 */
    transform: translate3d(60px, 0, 0) !important;

    /* 💡 核心修復：在退場的過程中，依然維持最高圖層！ */
    /* 這樣它就會像一片玻璃一樣，平順地從母艦「上方」滑過去，不會產生破圖碰撞 */
    z-index: 6000 !important;

    /* 🟢 速度同步：把透明度跟位移的時間拉長，配合你系統原本的彈簧動畫節奏 */
    /* 這裡使用 0.4s 的淡出與 0.5s 的滑動，你可以隨意微調 */
    transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) !important;

    animation: none !important;
}

/* 2. 展開狀態 (搜尋框) */
.search-container.active .search-input-box {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;

    /* 進場過渡：加上系統原本的等待時間 var(--delay-in) 與波浪彈簧感 */
    transition: opacity 0.4s ease var(--delay-in),
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15) var(--delay-in) !important;

    animation: none !important;
}

/* 3. 展開狀態 (取消按鈕) */
.search-container.active .cancel-circle-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;

    /* ✨ 頂級細節：比搜尋框還要再晚 0.04 秒出來，製造極度細緻的跟隨感 */
    transition: opacity 0.4s ease calc(var(--delay-in) + 0.04s),
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15) calc(var(--delay-in) + 0.04s) !important;

    animation: none !important;
}

/* ==========================================================================
   🟢 閃爍游標 (Caret) 延遲顯示控制
   ========================================================================== */

/* 預設把游標變透明 */
.search-container .search-input-box input {
    caret-color: transparent !important;
    /* 關閉時瞬間消失 */
    transition: caret-color 0.1s step-end !important;
}

/* 完全展開後，才讓游標顯現 */
.search-container.active .search-input-box input {
    /* 使用你全域設定好的文字顏色 */
    caret-color: var(--text-main, #000) !important;

    /* ✨ 終極魔法：等待前方所有動畫 (等待淨空 + 滑出時長 0.6s) 都結束後，才讓游標閃爍！ */
    transition: caret-color 0s calc(var(--delay-in) + 0.6s) !important;
}

/* =========================================================
   🟢 左上角時間母艦：重新整理圖示專屬控制權限 (絕對鎖死版)
   ========================================================= */
#left-capsule-top .left-capsule-icon {
    opacity: 0.7 !important;
    stroke-width: 2px !important;
}

/* ==========================================================================
   🟢 使用者設定：強制恢復系統預設鼠標
   ========================================================================== */
body.use-system-cursor,
body.use-system-cursor *,
body.use-system-cursor *::before,
body.use-system-cursor *::after,
body.use-system-cursor input,
body.use-system-cursor textarea {
    /* 🚀 強制所有元素恢復原生的滑鼠指標，並覆蓋原本的 cursor: none */
    cursor: auto !important;
}

body.use-system-cursor .custom-cursor {
    /* 🚀 精準打擊：徹底銷毀你的「反差小圓點」 */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   🟢 實心玻璃面板內的路線詳細卡片 (支援深淺模式自動適應)
   ========================================================================== */

/* 🌅 預設：淺色模式 (Light Mode) */
.extension-route-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.ext-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ext-card-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ext-route-name {
    font-weight: 800;
    font-size: 1.15em;
    color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
}

.ext-route-company {
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

.ext-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 800;
    white-space: nowrap;
}

/* 淺色模式：狀態徽章顏色調校 */
.status-normal {
    background: rgba(48, 209, 88, 0.15);
    color: #24a144;
    border: 1px solid rgba(48, 209, 88, 0.3);
}

.status-error {
    background: rgba(255, 159, 10, 0.15);
    color: #d07d00;
    border: 1px solid rgba(255, 159, 10, 0.3);
}

.status-delayed {
    background: rgba(255, 69, 58, 0.15);
    color: #d70015;
    border: 1px solid rgba(255, 69, 58, 0.3);
}

.status-attention {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.ext-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.ext-card-message {
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.85);
    line-height: 1.5;
    font-weight: 500;
}

.ext-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: -4px;
}

.ext-update-time {
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ⬇️ 你最在意的部分：方向與延誤膠囊方塊 */
.adv-details-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.adv-detail-capsule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    padding: 8px 12px;
    border-radius: 8px;
    /* 淺色模式：微透明的白/灰色底 */
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.adv-dir-name {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
}

.adv-status-group {
    display: flex;
    align-items: center;
}

.adv-train-count {
    font-size: 0.85em;
    opacity: 0.6;
    margin-right: 8px;
    color: rgba(0, 0, 0, 0.8);
}

.adv-delay-text {
    color: #d70015;
    font-weight: 800;
}

/* 淺色模式的深紅色更耐看 */
.adv-normal-text {
    color: #24a144;
    font-weight: 600;
}

/* =========================================
   🌃 深色模式自動覆蓋 (Dark Mode)
   ========================================= */
@media (prefers-color-scheme: dark) {
    .extension-route-card {
        background: rgba(30, 30, 32, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .ext-route-name {
        color: #fff;
    }

    .ext-route-company {
        color: rgba(255, 255, 255, 0.5);
    }

    .status-normal {
        color: #30d158;
    }

    .status-error {
        color: #ff9f0a;
    }

    .status-delayed {
        color: #ff453a;
    }

    .status-attention {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .ext-card-divider {
        background: rgba(255, 255, 255, 0.08);
    }

    .ext-card-message {
        color: rgba(255, 255, 255, 0.85);
    }

    .ext-update-time {
        color: rgba(255, 255, 255, 0.4);
    }

    /* 深色模式：方向與延誤膠囊方塊 */
    .adv-detail-capsule {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .adv-dir-name {
        color: rgba(255, 255, 255, 0.9);
    }

    .adv-train-count {
        color: rgba(255, 255, 255, 0.8);
    }

    .adv-delay-text {
        color: #ff453a;
    }

    .adv-normal-text {
        color: #30d158;
    }
}

/* ==========================================================================
   🟢 延遲狀態顏色擴充：輕微延誤 (5分鐘含以內) 
   ========================================================================== */

/* 🌅 淺色模式 (Light Mode) */
/* 使用深琥珀色/深橘黃，確保在白底上的對比度，不會刺眼也看得清楚 */
.status-delayed-minor {
    background: rgba(255, 149, 0, 0.12);
    color: #c28500;
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.adv-delay-minor-text {
    color: #c28500;
    font-weight: 800;
}

.search-delay-minor {
    color: #c28500;
    font-size: 0.75em;
    font-weight: 800;
    margin-top: 6px;
    text-align: right;
}

.search-delay-major {
    color: #d70015;
    /* 原本的紅色 */
    font-size: 0.75em;
    font-weight: 800;
    margin-top: 6px;
    text-align: right;
}

/* 🌃 深色模式 (Dark Mode) 自動切換 */
@media (prefers-color-scheme: dark) {

    /* 使用亮黃色 (Apple iOS System Yellow) */
    .status-delayed-minor {
        background: rgba(255, 214, 10, 0.15);
        color: #ffd60a;
        border: 1px solid rgba(255, 214, 10, 0.3);
    }

    .adv-delay-minor-text {
        color: #ffd60a;
    }

    .search-delay-minor {
        color: #ffd60a;
    }

    .search-delay-major {
        color: #ff453a;
    }
}

/* ==========================================================================
   🟢 搜尋下拉選單卡片 (支援深淺模式自動適應)
   ========================================================================== */

/* 🌅 預設：淺色模式 */
.search-empty-state {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.search-result-item {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.search-result-title {
    font-weight: 800;
    font-size: 1.15em;
    color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
}

.search-result-subtitle {
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

/* 🌃 深色模式自動覆蓋 */
@media (prefers-color-scheme: dark) {
    .search-empty-state {
        background: rgba(30, 30, 32, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .search-result-item {
        background: rgba(30, 30, 32, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .search-result-title {
        color: #ffffff;
    }

    .search-result-subtitle {
        color: rgba(255, 255, 255, 0.5);
    }
}

/* ==========================================================================
   🟢 航班防呆警示標籤 (.flight-alert-badge)
   ========================================================================= */

.flight-alert-badge {
    display: inline-block;
    font-weight: 800;
    border-radius: 4px;
    padding: 1px 5px;
    /* 稍微調整 padding，讓視覺更平衡 */
    font-size: 0.9em;
    /* 稍微縮小一點點，更像一個 tag */
    letter-spacing: 0.5px;

    /* 🌅 預設：淺色模式 BASE COLOR (為了對比度，使用深橄欖黃/琥珀色) */
    color: #ff9600;
    /* Deep, readable olive/brown-yellow */
    border: 1px solid rgba(102, 77, 0, 0.25);
    background-color: rgba(255, 204, 0, 0.25);
    /* 稍微加深背景 tint */
}

/* 🌃 深色模式自動覆蓋 (切換回亮黃色 "發光" 效果) */
@media (prefers-color-scheme: dark) {
    .flight-alert-badge {
        color: #ffcc00;
        /* 原本的亮黃色 */
        border: 1px solid rgba(255, 204, 0, 0.5);
        background-color: rgba(255, 204, 0, 0.1);
    }
}

/* ==========================================================================
   🟢 飛機航班：航廈與登機口雙欄區塊 (深淺模式自動適應)
   ========================================================================== */

/* 🌅 淺色模式：純白底、淡灰邊框分隔 */
.flight-terminal-block {
    flex: 1;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.flight-terminal-header {
    font-size: 0.8em;
    opacity: 0.7;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}

/* 淺色模式下，亮黃色會看不清楚，改用深琥珀金 */
.flight-highlight-gate {
    color: #c28500 !important;
}

/* 🌃 深色模式：自動覆蓋為玻璃透視感 */
@media (prefers-color-scheme: dark) {
    .flight-terminal-block {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }

    .flight-terminal-header {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .flight-highlight-gate {
        color: #ffcc00 !important;
        /* 恢復原本的亮黃色 */
    }
}

/* ==========================================================================
   🟢 飛機航班：詳情頁功能按鈕 (與資訊卡片完美對齊版)
   ========================================================================== */

/* 按鈕容器：間距 16px，完美對齊外部卡片的垂直間距 */
.flight-action-buttons-container {
    display: flex;
    gap: 16px;
    /* ✨ 對齊卡片間的 16px 標準間距 */
    width: 100%;
}

/* 功能按鈕基礎樣式：升級為 24px 圓角玻璃卡片 */
.flight-action-btn {
    flex: 1;
    border-radius: 24px;
    /* ✨ 完美對齊上方卡片的 24px 圓角 */
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* 🌅 淺色模式：完美繼承 extension-route-card 的材質 */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

/* 按下時的縮小物理回饋 */
.flight-action-btn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.85);
}

.flight-action-btn svg {
    opacity: 0.8;
}

/* 🌃 深色模式：自動覆蓋為深色玻璃 */
@media (prefers-color-scheme: dark) {
    .flight-action-btn {
        background: rgba(30, 30, 32, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .flight-action-btn:active {
        background: rgba(50, 50, 52, 0.65);
    }
}

/* ==========================================================================
   ⌨️ 鍵盤導航專屬狀態 (100% 完美還原原生 Hover 物理質感)
   ========================================================================== */
.card.keyboard-focus,
#fixed-info-card.keyboard-focus {
    /* 1. 精準對齊原生 Hover 的 8px 懸浮高度，並強制啟用 3D 硬體加速 */
    transform: translate3d(0, -8px, 0) !important;

    /* 2. 完美繼承你寫好的過渡曲線 */
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) !important;

    /* 不寫 box-shadow！讓它自然繼承原先卡片完美的 var(--ray-shadow-resting) */
}

/* ==========================================================================
   ⌨️ 鍵盤與滑鼠衝突處理：輸入權奪取機制 (終極防卡死版)
   ========================================================================== */

/* 1. 物理鎮壓：當鍵盤取得控制權時，強制抵銷所有「非鍵盤目標」的滑鼠 Hover 抬起效果！ */
body.keyboard-active .card:not(.keyboard-focus):hover,
body.keyboard-active #fixed-info-card:not(.keyboard-focus):hover {
    transform: translate3d(0, 0, 0) !important;
}

/* 2. 事件封印：依然保留，防止滑鼠在此時誤觸發點擊事件 */
body.keyboard-active .card,
body.keyboard-active #fixed-info-card {
    pointer-events: none !important;
}