/* main-menu.css - 主選單專屬 UI 與動畫引擎 (終極破防版) */

/* 🔴 關鍵修復：解除 HTML 預設的裁切 (overflow: hidden) 限制 */
/* 如果沒有這段，推到畫面邊緣外的膠囊會直接變隱形！ */
body.main-menu-active #app-stage #search-container {
    overflow: visible !important;
    clip-path: none !important;
}

/* ==========================================
   1. 左舷母艦：雙重 ID 絕對壓制原地彈跳
   ========================================== */
   @keyframes leftCapsuleBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes leftMatrixBounce {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

body.main-menu-active #app-stage #search-container .left-capsule {
    animation: leftCapsuleBounce 0.5s var(--apple-spring) forwards !important;
    pointer-events: none !important;
}

body.main-menu-active #app-stage #search-container .left-matrix-bg {
    animation: leftMatrixBounce 0.5s var(--apple-spring) forwards !important;
    pointer-events: none !important;
}

/* ==========================================
   2. 卡片堆列：Z 軸景深下沉
   ========================================== */
body.main-menu-active #app-stage .card-stack {
    transform: scale(0.90) translateY(15px) !important;
    pointer-events: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

/* ==========================================
   3. 🎯 右舷母艦：雙重 ID 壓制撤退 (包含通知按鈕與底板)
   ========================================== */
body.main-menu-active #app-stage #search-container .action-capsule,
body.main-menu-active #app-stage #search-container .search-trigger,
body.main-menu-active #app-stage #search-container .left-circle-btn {
    transform: translate3d(150px, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.5s var(--apple-spring), opacity 0.4s ease !important;
}

body.main-menu-active #app-stage #search-container::before {
    transform: translate(calc(50% + 150px), -50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.5s var(--apple-spring), opacity 0.4s ease !important;
}

/* ==========================================
   5. 🎯 動態五連發膠囊 (RWD 牌組邊界鎖定版)
   ========================================== */

   #dynamic-main-menu {
    --menu-width: 170px;      
    
    /* 🎯 現在這個距離，是相對於「母艦卡片牌組的右邊緣」！ */
    /* (0px = 完美貼齊右邊緣，15px = 往牌組內縮，-15px = 往牌組外凸) */
    --menu-right-offset: 0px;   
    
    --menu-top-pos: 22px;     
    
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--menu-top-pos));
    
    /* 🚀 終極 RWD 邊界計算魔法：永遠鎖死母艦右側！ */
    /* 公式詳解：畫面正中央 (50%) - 卡片實際寬度的一半 (min(94vw, 420px) / 2) + 你想要的偏移量 */
    right: calc(50% - (min(94vw, 420px) / 2) + var(--menu-right-offset)); 
    
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
    z-index: 99999; 
}

.main-menu-capsule {
    width: var(--menu-width);
    height: 44px;
    /* 直接讀取你的全域變數，確保日夜間模式完美同步 */
    background: var(--search-bg); 
    border: 1px solid var(--search-border);
    border-radius: 22px;
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 🟢 1. 完美還原母艦的輕盈陰影 (移除 !important 破壞) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    
    pointer-events: auto;
    display: flex;
    align-items: center;
    padding-left: 18px; 
    color: var(--text-main);

    /* 預設隱藏在右方 */
    transform: translate3d(200px, 0, 0);
    opacity: 0;
    
    /* 🟢 2. 完美繼承原生的 scale 與 box-shadow 過渡 (完全不加 !important) */
    transition: 
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--stagger-out, 0s),
        opacity 0.3s ease var(--stagger-out, 0s),
        scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15),
        box-shadow 0.4s ease;
}

body.main-menu-active #dynamic-main-menu .main-menu-capsule {
    /* 展開定位 */
    transform: translate3d(0, 0, 0);
    opacity: 1;
    
    /* 🟢 3. 進場過渡同理，保持原生互動的平滑度 */
    transition: 
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--stagger-in, 0s),
        opacity 0.4s ease var(--stagger-in, 0s),
        scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15),
        box-shadow 0.4s ease;
}

.main-menu-capsule .capsule-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.main-menu-capsule .capsule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.main-menu-capsule .capsule-icon svg {
    width: 18px; 
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8 !important;
}

.main-menu-capsule .capsule-text {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* =========================================
   🟢 動態主選單通用子頁面 (Universal Page)
   ========================================= */

/* 1. 展開玻璃背景 (與通知/搜尋共用同一塊完美比例的玻璃) */
body.universal-active .search-container::after {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0) !important;
    
    /* ✨ 修正：拔除 backdrop-filter，讓瀏覽器真正把它當成靜態圖片 */
    will-change: opacity !important; 
}

/* 2. 隱藏不需要的元素 (右上母艦、搜尋按鈕、漢堡選單、搜尋輸入框) */
body.universal-active #action-capsule,
body.universal-active #search-trigger,
body.universal-active #search-input-box,
body.universal-active #left-menu-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) !important;
}
/* 🚀 突破盲點：讓左舷母艦 (含邊框與膠囊) 浮出玻璃水面！ */
body.universal-active .left-matrix-bg,
body.universal-active .left-capsule {
    z-index: 5002 !important; 
}

/* 3. 通用內容容器的排版與進場動畫 */
.universal-page-wrapper {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 110px); /* 完美避開左側母艦 */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    left: calc(env(safe-area-inset-left, 0px) + 30px);
    right: calc(env(safe-area-inset-right, 0px) + 30px);
    margin: 0 auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    z-index: 5001; /* 必須比玻璃背景 (4000) 高 */
    
    /* 初始隱藏狀態 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 啟動狀態的動畫 */
body.universal-active .universal-page-wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    /* 延遲 0.1s 讓玻璃先展開，內容再浮現，層次感更好 */
    transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s;
}

/* 4. 頂部標題與專屬關閉按鈕 */

/* =========================================
   🚀 通用頁面導航雙按鈕 (完美對齊右上膠囊)
   ========================================= */
/* 🟢 加入 !important 確保展開時絕對顯示，不會被其他狀態吃掉 */

.universal-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 文字與標題間距 */
    margin-bottom: -15px;
    padding: 0 4px;
}

.universal-page-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.universal-close-btn {
    background: rgba(142, 142, 147, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.universal-close-btn:active {
    transform: scale(0.85);
    opacity: 0.7;
}
.universal-close-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5px;
}

/* 內容捲動區 (保持純淨，讓瀏覽器啟動原生 GPU 平滑滾動) */
.universal-page-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    color: var(--text-main);
    line-height: 1.6;
    padding: 0 10px 30px 10px !important; 
    
    font-size: 1.2rem !important; 
    font-weight: 440 !important;  
    
    pointer-events: auto !important;
    touch-action: pan-y !important; 
    overscroll-behavior: contain !important; 

    /* 🚀 修正 1：拔除 transform，把滾動權限徹底還給顯示卡 (Compositor Thread)！ */
    /* 只保留文字抗鋸齒隔離與容器邊界，切斷與底層毛玻璃的聯結 */
    contain: strict !important; 
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 🚀 修正 2：把 3D 靜態快取魔法，套用在「滾動框裡面的所有文字段落」身上！ */
.universal-page-content > * {
    transform: translateZ(0);
    backface-visibility: hidden;
    /* 讓電腦知道這些文字是一張張不會變形的靜態貼紙 */
    will-change: transform; 
}

/* 隱藏捲動條 */
.universal-page-content::-webkit-scrollbar {
    display: none; 
}

/* =========================================
   🔋 通用頁面省電與防誤觸鎖定 (Scroll Isolation)
   ========================================= */

/* A. 攔截邊緣滑動：讓玻璃背景吸收所有觸控，且禁止原生滑動 */
body.universal-active .search-container::after {
    pointer-events: auto !important; 
    touch-action: none !important; 
}

/* B. 徹底凍結卡片堆疊：關閉所有點擊與手勢，釋放 GPU 效能 */
body.universal-active #main-stack {
    pointer-events: none !important;
}

/* C. 只允許文字內容區塊可以上下滑動，並阻止滾動溢出 (Scroll Chaining) */
.universal-page-content {
    pointer-events: auto !important;
    touch-action: pan-y !important; /* 確保 iOS 只允許垂直滑動 */
    overscroll-behavior: contain !important; /* 滾到底部時，不會拉扯到後面的網頁 */
}

/* =========================================
   🚀 1. 通用頁面導航：右上角小母艦 (Capsule) 與膠囊外框
   ========================================= */

/* 🟢 容器：負責定位與進場動畫 */
.universal-nav-container {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 95px;  
    height: 44px; 
    z-index: 6005 !important; 
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.universal-active .universal-nav-container {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
}

/* 🟢 ✨全新加入：膠囊形狀的母艦外框 (完美同心圓角) */
.universal-nav-matrix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 寬高各加 15px (代表向外推 7.5px) */
    width: 110px;  
    height: 59px;  
    /* 完美的同心膠囊圓角 (內部22 + 外推7.5 = 29.5) */
    border-radius: 29.5px; 
    
    background: transparent;
    border: 1px solid var(--search-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* 🟢 內部的獨立雙圓按鈕排版 */
.universal-nav-circles {
    position: absolute;
    inset: 0; /* 撐滿 95x44 的容器 */
    display: flex;
    justify-content: space-between; /* 魔法：左右撐開，完美卡在兩端 */
    align-items: center;
}

/* 🟢 獨立小圓按鈕 (將玻璃材質加回獨立按鈕身上) */
.universal-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%; /* 恢復正圓形 */
    
    /* 玻璃擬態與陰影 */
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    cursor: pointer;
    padding: 0;
    
    /* 繼承原生按鈕的縮小微互動 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), box-shadow 0.4s ease, opacity 0.2s ease;
}

.universal-nav-btn:active {
    transform: scale(0.92); /* 點擊時縮小 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 🟢 左側返回按鈕尺寸精準校正 */
.universal-nav-btn:first-child svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2px !important; 
    transform: translateX(-1px) !important; 
}

/* 🟢 右側關閉 X 按鈕尺寸精準校正 */
.universal-nav-btn:last-child svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.1px !important; 
}

/* SVG 基礎設定 */
.universal-nav-btn svg {
    stroke: currentColor !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 0.8 !important; 
    pointer-events: none !important;
}

/* 深色模式同步獨立按鈕發光效果 */
@media (prefers-color-scheme: dark) {
    .universal-nav-matrix {
        box-shadow: 0 8px 30px rgba(220, 220, 230, 0.15) !important;
        border: 1px solid rgba(220, 220, 230, 0.15) !important;
    }
    .universal-nav-btn {
        box-shadow: 0 4px 15px rgba(220, 220, 230, 0.12);
    }
    .universal-nav-btn:active {
        box-shadow: 0 2px 8px rgba(220, 220, 230, 0.1);
    }
}

/* =========================================
   🚀 2. 文字排版修復：強制推離母艦區域
   ========================================= */
.universal-page-wrapper {
    position: fixed !important;
    /* 🟢 110px 完美避開頂部的雙排母艦區域 (44px + 51px) */
    top: calc(env(safe-area-inset-top, 0px) + 110px) !important; 
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 30px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 30px) !important;
    margin: 0 auto !important;
    max-width: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 5001 !important; 
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =========================================
   🪟 3. 實心玻璃模式 (專屬高不透明度遮罩)
   ========================================= */
/* ☀️ 淺色模式：變成高不透明度的珍珠白玻璃 */
body.solid-glass-active .search-container::after {
    background: rgba(245, 245, 247, 0.85) !important; /* 濃度高達 85% */
    -webkit-backdrop-filter: blur(35px) !important; /* 加強模糊度 */
    backdrop-filter: blur(35px) !important;
    transition: background 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* 🌙 深色模式：變成高不透明度的深鈦灰玻璃 */
@media (prefers-color-scheme: dark) {
    body.solid-glass-active .search-container::after {
        background: rgba(28, 28, 30, 0.85) !important; /* 濃度高達 85% 的深灰 */
    }
}

body.universal-active .universal-page-wrapper {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
}

/* =========================================
   🔋 3. 省電與防誤觸機制 (Scroll Isolation)
   ========================================= */
/* A. 攔截邊緣滑動：讓滿版玻璃吸收所有邊緣觸控，且禁止原生滑動，防止底層無意義的物理運算 */
body.universal-active .search-container::after {
    pointer-events: auto !important; 
    touch-action: none !important; 
}

/* B. 徹底凍結卡片堆疊：關閉所有點擊與手勢，釋放 GPU 效能 */
body.universal-active #main-stack {
    pointer-events: none !important;
}

/* C. 只允許文字內容區塊可以上下滑動，並阻止滾動溢出 (Scroll Chaining) */
.universal-page-content {
    pointer-events: auto !important;
    touch-action: pan-y !important; /* iOS 專屬：只允許垂直滑動 */
    overscroll-behavior: contain !important; /* 滾到底部時，不會拉扯到背後的網頁 */
}

/* =========================================
   ☀️ 淺色模式專屬高階質感微調 (Light Mode)
   ========================================= */
   @media (prefers-color-scheme: light) {
    
    /* 1. 右上角小母艦外框：更乾淨的極淺灰邊框與擴散空氣陰影 */
    .universal-nav-matrix {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    
    /* 雙圓按鈕本身的輕盈陰影 */
    .universal-nav-btn {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    }
    
    /* 點擊時的微弱下壓感 */
    .universal-nav-btn:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
        background-color: rgba(0, 0, 0, 0.04) !important; 
    }

    /* 2. 主選單 5 個選項的文字與圖示 (消除死黑感) */
    /* 在白色的毛玻璃上，我們把透明度再往下調一點，讓它變成高雅的深灰色 */
    .main-menu-capsule .capsule-icon svg {
        opacity: 0.7 !important; /* 讓圖示更柔和 */
    }
    .main-menu-capsule .capsule-text {
        opacity: 0.75 !important; /* 文字保持比圖示稍微清晰一點 */
    }
    
    /* 通用頁面右上角雙圓按鈕的 SVG 也同步柔和化 */
    .universal-nav-btn svg {
        opacity: 0.7 !important;
    }
}

/* ==========================================================================
   🟢堆疊退回魔法 (Stack Pop) - 主選單背景待命 (徹底防誤觸版)
   ========================================================================== */

/* 1. 降低主選單的 Z 軸層級，讓它絕對躲在通用頁面 (5000+) 之下 */
body.universal-active #dynamic-main-menu {
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* 2. 精準打擊：強制剝奪膠囊本身的點擊能力，並產生下沉透明效果 */
body.universal-active #dynamic-main-menu .main-menu-capsule {
    /* ✨ 核心修復：拔除隱形膠囊的點擊權限，防止幽靈誤觸！ */
    pointer-events: none !important;
    
    opacity: 0 !important;
    transform: scale(0.92) translateY(10px) !important;
    
    /* 凍結原有的波浪進場動畫，改用平滑的整體下沉過渡 */
    animation: none !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

/* ==========================================================================
   🟢 顯示設定面板 (Display Settings) 專屬 UI 樣式 (通勤看板專屬圓角風格)
   ========================================================================== */

   .settings-container {
    padding-top: 10px;
}

.settings-description {
    font-size: 0.95rem;
    color: var(--text-main);
    opacity: 0.6;
    margin-bottom: 16px;
    padding-left: 14px;
    letter-spacing: 0.5px;
}

/* ✨ 專屬化 1：外框群組 (放大到 32px 超大圓角，完美呼應你的彈出視窗) */
.settings-group {
    background: var(--search-bg);
    border-radius: 32px; /* 👈 從 14px 改為 32px */
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--search-border);
}

@media (prefers-color-scheme: dark) {
    .settings-group { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
}

/* 每一列的設定 */
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ✨ 縮減上下留白：從 18px 改為 14px，讓排版更緊湊有張力 */
    padding: 14px 24px; 
    border-bottom: 1px solid var(--search-border);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-label {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

/* =========================================
   ✨ 專屬化 2：分段控制器 (點滑雙棲 + 滿版滑塊)
   ========================================= */
   .segmented-control {
    display: flex;
    position: relative;
    background: rgba(120, 120, 128, 0.12);
    border-radius: 999px; 
    
    /* ✨ 關鍵 1：縫隙極小化 (從 1.5px 縮到 1px)，讓滑塊更高、更飽滿 */
    padding: 0.5px; 
    width: 130px; 
    
    /* ✨ 關鍵 2：整體高度稍微加高到 34px，視覺比例更修長 */
    height: 36px; 
}

.segmented-control .seg-bg {
    position: absolute;
    
    /* ✨ 同步將上下左右的距離縮到 0.5px */
    top: 0.5px; bottom: 0.5px; left: 0.5px;
    width: calc(50% - 1px); 
    
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    z-index: 1;
}

@media (prefers-color-scheme: dark) {
    .segmented-control .seg-bg { background: #636366; }
}

.segmented-control .seg-btn {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    opacity: 0.6;
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.3s;
    padding: 0;
    /* 確保文字絕對置中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.segmented-control .seg-btn.active {
    opacity: 1;
}

/* =========================================
   ✨ 專屬化 3：開關 (更寬胖可愛的比例，呼應粗線條 SVG)
   ========================================= */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 54px; /* 稍微加寬 */
    height: 32px;
    flex-shrink: 0;
}

.ios-switch input { display: none; }

.ios-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(120, 120, 128, 0.16);
    border-radius: 999px;
    transition: background-color 0.3s, transform 0.3s;
}

.ios-switch .slider:before {
    position: absolute;
    content: "";
    height: 24px; width: 24px; /* 讓裡面的白球小一點，增加外圍的呼吸感 */
    left: 4px; bottom: 4px; /* 往內縮 */
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15), width 0.2s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 3px 1px rgba(0,0,0,0.06);
}

.ios-switch input:checked + .slider {
    /* 這裡可以換成你的主色調，目前保留高辨識度的柔和綠色 */
    background-color: #34C759; 
}

.ios-switch input:checked + .slider:before {
    transform: translateX(22px); /* 配合加寬的按鈕調整位移距離 */
}

.ios-switch:active .slider:before { width: 32px; } /* 點擊按壓時的微互動拉伸 */
.ios-switch input:checked:active + .slider:before { transform: translateX(14px); }

/* =========================================
   ✨ 顯示設定：瀏覽器推薦提示框 (Browser Recommendation)
   ========================================= */
   .settings-browser-recommendation {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0, 122, 255, 0.08); /* 柔和的蘋果藍背景 */
    border: 1px solid rgba(0, 122, 255, 0.15);
    border-radius: 24px; /* 呼應你的大圓角風格 */
    padding: 16px 20px;
    margin-bottom: 24px;
    color: var(--text-main);
}

@media (prefers-color-scheme: dark) {
    .settings-browser-recommendation {
        background: rgba(10, 132, 255, 0.12);
        border: 1px solid rgba(10, 132, 255, 0.2);
    }
}

.settings-browser-recommendation svg {
    color: #007AFF; /* 經典 Info Blue */
    flex-shrink: 0;
}

.settings-browser-recommendation .recommendation-text {
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.settings-browser-recommendation .recommendation-text strong {
    color: #007AFF;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .settings-browser-recommendation svg,
    .settings-browser-recommendation .recommendation-text strong {
        color: #0A84FF; /* 深色模式下更亮一點的藍 */
    }
}