/* ========================================
   MOBILE-FIRST RESPONSIVE DESIGN
   專為手機優化的響應式設計
   ======================================== */

/* 手機版基礎優化 (< 768px) */
@media (max-width: 768px) {

    /* === 基礎佈局 === */
    body {
        font-size: 14px;
        line-height: 1.5;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        /* 防止水平滾動 */
        box-sizing: border-box;
    }

    .container {
        padding: 0.5rem;
        /* 減少 padding */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* 確保 padding 包含在寬度內 */
    }

    /* === 頁面容器優化 (比照 Landing Hero) === */
    .page-container {
        margin-top: 1rem !important;
        /* 覆蓋 inline style 的 4rem */
        padding: 0 0.5rem !important;
        /* 確保內距一致 */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* === 標題優化 === */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* === Landing Hero 優化 === */
    .landing-hero {
        min-height: auto;
        padding: 1rem 0.5rem 0.5rem 0.5rem;
        /* 上方 padding 從 3rem 減為 1rem (減少三分之二) */
        width: 100%;
        max-width: 100vw;
        /* 確保不超過視窗寬度 */
        overflow-x: hidden;
        /* 防止溢出 */
        box-sizing: border-box;
        /* padding 包含在寬度內 */
    }

    .landing-hero>div {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .landing-title {
        font-size: 1.5rem !important;
        /* 進一步縮小 */
        line-height: 1.3;
        margin-bottom: 1rem;
        word-wrap: break-word;
        /* 允許長單字換行 */
        overflow-wrap: break-word;
        white-space: normal !important;
        /* 強制允許換行 */
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
        /* 減少內距，增加可用空間 */
        display: block;
        /* 確保是 block 元素 */
        box-sizing: border-box;
        /* 確保 padding 包含在寬度內 */
    }

    .landing-subtitle {
        font-size: 0.85rem !important;
        /* 進一步縮小 */
        margin-bottom: 2rem;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
        /* 減少內距 */
        box-sizing: border-box;
    }

    /* === 按鈕優化 - 全寬度觸控友好 === */
    .btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        margin-bottom: 0.75rem;
        min-height: 48px;
        /* 觸控最小尺寸 */
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    /* 首頁 CTA 按鈕群組優化 */
    .home-cta-group {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem !important;
        width: 100%;
        margin: 0 auto;
    }

    .home-cta-form {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0 !important;
    }

    .home-cta-btn {
        width: 100%;
        max-width: 280px;
        /* 放寬最大寬度限制 (原 240px) */
        min-height: 56px !important;
        /* 改用最小高度 */
        height: auto !important;
        /* 允許高度自適應 */
        margin-bottom: 0 !important;
        min-width: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-sizing: border-box;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 0.5rem !important;
        /* 大幅減少左右內距 (原 2.5rem) */
        line-height: 1.2;
        /* 優化行高 */
    }

    /* === 網誌文章列表優化 === */
    .blog-grid {
        gap: 1.25rem !important;
        /* 減少文章之間的間距 (原 2.5rem) */
    }

    .blog-grid article.card {
        padding: 1.25rem !important;
        /* 減少卡片內距 (原 2.5rem) */
    }

    .blog-grid h2 {
        margin-bottom: 0.5rem !important;
        /* 標題下間距減半 */
    }

    .blog-grid h2 a {
        font-size: 1.4rem !important;
        /* 標題字體縮小 */
    }

    .blog-grid p {
        margin-bottom: 1.25rem !important;
        /* 文摘要下間距縮小 */
        font-size: 1rem !important;
    }

    /* === 卡片優化 === */
    .card {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
    }

    .card:hover {
        transform: none;
        /* 手機版移除 hover 效果 */
    }

    /* === 首頁卡片容器優化 === */
    .landing-hero div[style*="max-width: 1000px"] {
        padding: 0 0.5rem !important;
        margin-bottom: 0.5rem !important;
        /* 減少下方間距 */
    }

    .landing-hero div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .landing-hero .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* === Feature Grid === */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem 1rem 1rem 1rem;
        margin-top: 0 !important;
        /* 強制移除上方 margin */
    }

    .feature-card {
        padding: 1.5rem;
    }

    .feature-card:hover {
        transform: none;
    }

    /* === 表單優化 === */
    .form-group {
        margin-bottom: 1rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        /* 防止 iOS 自動縮放 */
        padding: 0.875rem;
    }

    label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    /* === Modal 優化 === */
    .modal-content {
        width: 95%;
        max-width: 100%;
        padding: 1.5rem;
        margin: 1rem;
        max-height: 90vh;
        border-radius: 1rem;
    }

    /* === Alert 優化 === */
    .alert,
    .notice-box {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    /* === 信箱狀態卡片 === */
    .mailbox-status {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    /* === Email 列表 === */
    .email-list {
        gap: 0.75rem;
    }

    .email-item {
        padding: 1rem;
        font-size: 0.875rem;
    }

    .email-item:hover {
        transform: none;
    }

    /* === 信箱地址顯示優化 === */
    .mailbox-address {
        font-size: 1rem !important;
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* === 底部固定按鈕 === */
    .mobile-fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--surface);
        border-top: 1px solid var(--glass-border);
        padding: 0.5rem;
        z-index: 100;
        backdrop-filter: blur(20px);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    }

    .mobile-fixed-bottom .btn {
        margin-bottom: 0;
    }

    /* 為固定底部按鈕留出空間 - 減少間距 (原 80px) */
    .has-fixed-bottom {
        padding-bottom: 40px;
    }

    /* === Cookie 彈窗優化 === */
    .cookie-consent {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1.25rem !important;
        margin: 0 !important;
    }

    .cookie-consent h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem;
    }

    .cookie-consent p {
        font-size: 0.85rem !important;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .cookie-consent .btn {
        width: 100%;
        padding: 0.875rem;
    }

    /* === 導覽列優化 === */
    /* === 導覽列優化 === */
    nav {
        padding: 0.5rem 0.45rem !important;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(10, 14, 39, 0.95);
        /* 確保背景不透明 */
    }

    nav .container {
        padding: 0;
        display: flex !important;
        justify-content: flex-start !important;
        /* 改為靠左對齊 */
        align-items: center !important;
        gap: 0.35rem !important;
        /* 元素間距 */
        height: 60px !important;
    }

    /* Logo 區域 */
    nav .container>a:first-of-type {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        text-decoration: none !important;
        margin-right: 0 !important;
        min-width: 0;
        flex: 1 1 auto;
        /* Logo 推到左邊，如果右邊有東西的話 */
    }

    nav .container>a:first-of-type img {
        width: 32px !important;
        height: 32px !important;
    }

    nav .container>a:first-of-type .logo-text {
        font-size: 1.1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .mobile-header-theme-toggle {
        display: inline-flex !important;
        margin-left: -0.1rem;
        margin-right: auto;
        flex: 0 0 24px;
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text) !important;
    }

    .mobile-header-theme-toggle::before {
        display: none !important;
    }

    .mobile-header-theme-toggle:hover {
        background: transparent !important;
        border: none !important;
    }

    .mobile-header-theme-toggle .theme-toggle-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-header-theme-toggle .theme-icon-moon,
    .mobile-header-theme-toggle .theme-icon-sun {
        color: var(--text) !important;
    }

    .light-theme .mobile-header-theme-toggle,
    .light-theme .mobile-header-theme-toggle:hover {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 隱藏桌面版導覽按鈕容器 */
    nav .container>.desktop-nav-buttons {
        display: none !important;
    }

    /* 隱藏次要導覽項目 */
    .nav-secondary {
        display: none;
    }

    /* === 漢堡選單按鈕 === */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px;
        color: var(--text) !important;
        font-size: 1.25rem !important;
        cursor: pointer;
        padding: 0.35rem !important;
        width: 34px;
        height: 34px;
        margin-right: 0;
        flex: 0 0 34px;
        z-index: 1001;
    }

    .mobile-menu {
        display: none;
        position: fixed;
        top: calc(60px + 1rem);
        /* header height (60px) + padding (0.5rem * 2) */
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--glass-border);
        padding: 0;
        z-index: 999;
        backdrop-filter: blur(20px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .mobile-menu.active {
        display: block;
    }

    .mobile-menu a {
        display: block;
        padding: 0.875rem 1rem;
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px solid var(--glass-border);
        transition: background 0.2s;
    }

    .mobile-menu a:last-child {
        border-bottom: none;
    }

    .mobile-menu a:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    /* === 提示訊息優化 === */
    .info-box,
    .alert-info {
        font-size: 0.8rem;
        padding: 0.75rem;
        line-height: 1.5;
    }

    /* 可摺疊的提示訊息 */
    .collapsible-notice {
        max-height: 60px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .collapsible-notice.expanded {
        max-height: 500px;
    }

    .expand-toggle {
        color: var(--primary);
        cursor: pointer;
        font-size: 0.75rem;
        margin-top: 0.5rem;
        display: inline-block;
    }

    /* === 倒數計時器優化 === */
    .countdown-timer {
        font-size: 1.25rem !important;
        padding: 0.75rem;
    }

    /* === 複製按鈕優化 === */
    .copy-btn {
        min-width: 80px;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* === 多樣化的使用場景區塊優化 === */
    .scenarios-section {
        padding: 2rem 1rem !important;
    }

    .scenarios-grid {
        gap: 1rem !important;
    }

    .scenario-card {
        padding: 1rem 0.5rem !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    /* === Footer 優化 === */
    footer {
        padding: 2rem 0;
        font-size: 0.8rem;
    }

    footer .container {
        padding: 1rem;
    }

    /* === 語言選擇器 === */
    .lang-selector {
        padding: 2px;
    }
    .lang-btn {
        min-width: 30px;
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    .theme-toggle {
        width: 28px;
        height: 28px;
    }

    .theme-toggle::before {
        width: 24px;
        height: 24px;
    }

    .theme-toggle-icon {
        width: 24px;
        height: 24px;
    }

    .light-theme .theme-toggle::before {
        transform: none;
    }

    /* === 進度條 === */
    .progress-bar {
        height: 6px;
    }

    /* === 表格優化 === */
    table {
        font-size: 0.8rem;
    }

    table th,
    table td {
        padding: 0.5rem;
    }

    /* === 隱藏桌面版專用元素 === */
    .desktop-only {
        display: none !important;
    }

    /* === 顯示手機版專用元素 === */
    .mobile-only {
        display: block !important;
    }

    /* === 手機版語言選擇器優化 === */
    .mobile-menu-lang {
        padding: 1rem;
        border-bottom: 1px solid var(--glass-border);
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }

    .mobile-menu-lang .lang-selector {
        width: auto;
        display: flex;
        justify-content: center;
        background: rgba(30, 41, 59, 0.6);
        border: 1px solid var(--glass-border);
        padding: 3px;
        border-radius: var(--radius-sm);
    }

    .mobile-menu-lang .lang-btn {
        text-align: center;
        min-width: 34px;
        padding: 6px 8px;
        font-size: 0.82rem;
    }

    .mobile-menu-lang .theme-toggle {
        display: inline-flex;
    }

    .mobile-menu-lang .mobile-header-theme-toggle {
        margin-left: 0;
        margin-right: 0;
    }

    .mobile-lang-switcher {
        display: flex !important;
    }
}

/* 超小螢幕優化 (< 375px) */
@media (max-width: 375px) {
    .landing-title {
        font-size: 1.75rem !important;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.875rem 1.25rem;
    }

    .card {
        padding: 1rem;
    }

    .modal-content {
        padding: 1.25rem;
    }
}

/* 平板優化 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 95%;
        padding: 1.5rem;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-title {
        font-size: 3rem !important;
    }

    /* === 平板直向 (768px - 1024px) 後台導覽列優化 === */
    nav > div.container {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }

    nav > div.container > a[href*="admin"] {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .desktop-nav-buttons {
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .desktop-nav-buttons .btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    .desktop-nav-buttons .admin-dropdown .btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.82rem !important;
    }

    /* === 平板後台卡片與網格排版優化 === */
    /* 統計卡片在平板直向保持 3 欄並列或自適應不落單 */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    /* 今日統計在平板 4 欄並排 */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}

/* 桌面版專用 (> 768px) */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }

    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    .mobile-fixed-bottom {
        display: none;
    }
}

/* ========================================
   觸控優化
   ======================================== */

/* 增加所有可點擊元素的觸控區域 */
@media (hover: none) and (pointer: coarse) {

    a,
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* 移除 hover 效果 */
    .card:hover,
    .feature-card:hover,
    .email-item:hover {
        transform: none;
    }
}

/* ========================================
   橫向模式優化
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .landing-hero {
        min-height: auto;
        padding: 1.5rem 1rem;
    }

    .modal-content {
        max-height: 80vh;
    }
}

/* ========================================
   深色模式支援
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* 已經是深色主題，無需額外調整 */
}

/* ========================================
   減少動畫 (使用者偏好設定)
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === Footer 優化 === */
@media (max-width: 768px) {
    footer {
        margin-top: 1rem !important;
        /* 手機版再減少一半距離 (原為 2rem) */
        padding-top: 1rem !important;
    }

    /* === 後台管理系統手機版選單 === */
    /* 顯示漢堡按鈕 */
    .admin-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px;
        color: #fff !important;
        font-size: 1.25rem !important;
        cursor: pointer;
        padding: 0.5rem !important;
        width: 40px;
        height: 40px;
        margin-right: 0.5rem;
        z-index: 1001;
    }

    /* 隱藏桌面版按鈕 */
    nav .desktop-nav-buttons {
        display: none !important;
    }

    /* 後台手機版選單容器 */
    .admin-mobile-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(30, 41, 59, 0.95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
        z-index: 999;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .admin-mobile-menu.active {
        display: block;
    }

    .admin-mobile-menu a {
        display: block;
        padding: 0.875rem 1rem;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.2s;
    }

    .admin-mobile-menu a:last-child {
        border-bottom: none;
    }

    .admin-mobile-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* 桌面版隱藏後台手機版選單元素 */
@media (min-width: 769px) {
    .admin-mobile-toggle {
        display: none !important;
    }

    .admin-mobile-menu {
        display: none !important;
    }

    /* 桌面版顯示導覽按鈕 */
    .desktop-nav-buttons {
        display: flex !important;
        gap: 1rem;
        align-items: center;
    }
}

/* ========================================
   後台管理系統 — 手機版全面優化
   ======================================== */
@media (max-width: 768px) {

    /* === 後台導覽列修正 === */
    /* 覆蓋後台 nav inline style: display flex, justify-content space-between */
    nav > div.container {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
        min-height: 60px;
    }

    /* 後台 Logo 文字縮小 */
    nav > div.container > a[href*="admin"] {
        font-size: 1.1rem !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* === 後台 nav 頂部偏移修正 === */
    .admin-mobile-menu {
        top: 60px !important;
    }

    /* === 後台頁面容器優化 === */
    .container[style*="max-width: 1200px"],
    .container[style*="max-width: 1400px"],
    .container[style*="max-width: 1000px"] {
        margin-top: 1rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === 後台頁面標題優化 === */
    .container h1[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .container h2[style*="font-size: 1.5rem"] {
        font-size: 1.2rem !important;
    }

    /* === 後台按鈕不全寬 (覆蓋前面 .btn 的 width:100% 規則) === */
    /* 後台的按鈕應保持 inline，不應被強制全寬 */
    nav .btn,
    .container .btn,
    table .btn,
    form .btn,
    #sticky-save-bar .btn,
    [style*="display: flex"] > .btn,
    [style*="display:flex"] > .btn,
    .desktop-nav-buttons .btn {
        width: auto !important;
        min-height: 44px;
        margin-bottom: 0;
    }

    /* 後台「快速操作」區塊的按鈕保持全寬（明確指定全寬的情境） */
    .container .btn[style*="width: 100%"],
    .container button[style*="width: 100%"] {
        width: 100% !important;
    }

    /* === 後台篩選按鈕群組 === */
    div[style*="display: flex"][style*="gap: 1rem"][style*="flex-wrap: wrap"] > .btn,
    div[style*="display: flex"][style*="gap: 1rem"] > .btn,
    div[style*="display: flex"][style*="gap: 0.5rem"] > .btn,
    div[style*="display: flex"][style*="gap: 0.75rem"] > .btn {
        width: auto !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.85rem !important;
        min-height: 40px;
        margin-bottom: 0;
    }

    /* === 後台頁面篩選列 — 允許捲動 === */
    .container > div[style*="margin-bottom: 2rem"][style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        margin-bottom: 1rem !important;
    }

    /* === 後台表格 — 水平捲動容器 === */
    .card > div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 後台表格文字縮小，減少 padding */
    .container table {
        font-size: 0.8rem !important;
        min-width: 600px; /* 確保表格有最小寬度，讓捲動有意義 */
    }

    .container table th,
    .container table td {
        padding: 0.5rem 0.6rem !important;
        white-space: nowrap;
    }

    /* 讓操作欄的按鈕緊湊 */
    .container table .btn {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.78rem !important;
        min-height: 36px;
    }

    /* === 設定頁 Tab 按鈕列 === */
    div[style*="display: flex"][style*="gap: 1rem"][style*="flex-wrap: wrap"] > a.btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        width: auto !important;
        min-height: 40px;
    }

    /* === 設定頁快取資訊列 === */
    div[style*="display: flex"][style*="gap: 2rem"][style*="margin-bottom: 1.5rem"] {
        gap: 0.75rem !important;
    }

    /* === 統計數字卡片 (dashboard 總覽) === */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* === Sticky Save Bar 手機版優化 === */
    #sticky-save-bar .save-bar-inner {
        padding: 0.65rem 0.85rem !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    #sticky-save-bar .save-bar-hint {
        font-size: 0.78rem !important;
        flex: 1;
    }

    #sticky-save-bar .save-bar-hint span {
        display: none; /* 手機版只顯示小點，不顯示文字 */
    }

    #sticky-save-bar .save-bar-hint::after {
        content: '有未儲存變更';
        font-size: 0.78rem;
        color: var(--warning);
    }

    #sticky-save-bar .save-bar-actions {
        gap: 0.4rem !important;
        flex-shrink: 0;
    }

    #sticky-save-bar .save-bar-actions .btn {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    /* === Dashboard 快速操作按鈕 === */
    .card div[style*="display: grid"][style*="gap: 1rem"] > button.btn,
    .card div[style*="display: grid; gap: 1rem"] > button {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* === 後台卡片間距優化 === */
    .container > .card {
        margin-bottom: 1rem;
    }

    /* === 排程操作按鈕 — 可換行 === */
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 1rem"] > button.btn-secondary {
        width: auto !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.82rem !important;
    }

    /* === 廣播通知按鈕列 === */
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: center"] > button.btn,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: center"] > a.btn {
        width: auto !important;
    }

    /* === 系統設定頁分欄表單 (快取大小/數量並排) === */
    div[style*="display: flex"][style*="gap: 2rem"] {
        gap: 0.75rem !important;
    }

    /* === 分頁按鈕 === */
    div[style*="display: flex"][style*="justify-content: center"] > .btn {
        width: auto !important;
        padding: 0.6rem 1.25rem !important;
    }

    /* === 後台信箱管理頁面 — 操作按鈕 === */
    .container table td form {
        display: inline !important;
        margin: 0 !important;
    }

    .container table td form button,
    .container table td form + form button {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
    }

    /* === Live Event Stream 時間戳記優化 === */
    #liveEventStream div[style*="display: flex; justify-content: space-between"] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #liveEventStream [style*="font-size: 0.75rem; color: var(--text-muted)"] {
        font-size: 0.7rem !important;
    }

    /* === 後台 footer === */
    footer {
        margin-top: 2rem !important;
        padding: 1.5rem 0 !important;
    }

    /* === 即時動態流 header 優化 === */
    h3[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    h3[style*="justify-content: space-between"] > div {
        font-size: 0.82rem !important;
    }

    /* === 統計資料頁圖表高度縮減 === */
    div[style*="height: 400px"] {
        height: 280px !important;
    }

    /* === toggle-switch-wrapper 手機版優化 === */
    .toggle-switch-wrapper {
        padding: 0.875rem 1rem;
    }

    .toggle-info .toggle-desc {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    /* === form-group 中的 flex 輸入 (天數輸入等) === */
    .form-group div[style*="display: flex"][style*="align-items: center"] {
        gap: 0.5rem !important;
    }

    /* === 後台系統資訊列表優化 === */
    div[style*="display: flex; justify-content: space-between; padding: 0.75rem"] {
        gap: 0.5rem;
    }

    div[style*="display: flex; justify-content: space-between; padding: 0.75rem"] > span:first-child {
        font-size: 0.85rem;
        flex: 1;
    }

    div[style*="display: flex; justify-content: space-between; padding: 0.75rem"] > strong {
        font-size: 0.85rem;
        flex-shrink: 0;
        text-align: right;
    }

    /* === Gmail OAuth 狀態卡片優化 === */
    .gmail-status-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* === 使用者管理頁篩選按鈕群組在手機版換行 === */
    div[style*="margin-bottom: 2rem"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* === 批量操作按鈕區域 === */
    div#bulkActionsWrapper {
        gap: 0.4rem !important;
    }

    div#bulkActionsWrapper .btn {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.8rem !important;
    }

    /* === 磁碟空間進度條文字 === */
    div[style*="display: flex; justify-content: space-between; margin-bottom: 0.5rem"] {
        font-size: 0.85rem;
    }

    /* === 預覽 Modal 全螢幕 === */
    #broadcast-preview-modal > div {
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1.25rem !important;
    }

    #broadcast-preview-frame {
        height: 320px !important;
    }

    /* === 月份選擇器 === */
    #monthSelector {
        width: 100%;
        margin-top: 0.5rem;
    }

    h3[style*="justify-content: space-between"] {
        align-items: flex-start !important;
    }
}

/* === 超小螢幕後台優化 (< 375px) === */
@media (max-width: 375px) {
    nav > div.container > a[href*="admin"] {
        font-size: 0.95rem !important;
    }

    .container h1[style*="font-size: 2.5rem"] {
        font-size: 1.25rem !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
}