/* app.css - 800px Centered Layout */

:root {
    /* 內部 App 的顏色 */
    --bg-color: #131313;          /* App 內部純黑 */
    --card-bg: #131313;           /* 導航欄深灰 */
    --text-main: #f5f5f7;
    --text-sub: #86868b;
    --accent-color: #fc3c7b;      /* 主題粉紅 */
    --border-color: #38383A;
    --nav-height: 60px;
    --header-color: rgba(28, 28, 30);
    
    /* 外部背景顏色 (PC版兩側留白處) */
    --body-outer-bg: #0f0f0f;     /* 超深灰黑 */
}

        :root {
            /* 預設深色模式 (Dark Mode) */
            --c-primary: 252 59 123;       /* #fc3b7b */
            --c-bg-page: 19 19 19;         /* #131313 */
            --c-surface: 28 28 30;         /* #1C1C1E */
            --c-text-main: 245 245 247;    /* #f5f5f7 */
            --c-text-muted: 134 134 139;   /* #86868b */
            --c-border-main: 42 42 44;     /* #2a2a2c */
            --c-border-light: 56 56 58;    /* #38383A */
        }

        /* 淺色模式覆寫 */
        html.light-mode {
            --c-bg-page: 249 250 251;      /* #f9fafb */
            --c-surface: 255 255 255;      /* #ffffff */
            --c-text-main: 17 24 39;       /* #111827 */
            --c-text-muted: 107 114 128;   /* #6b7280 */
            --c-border-main: 229 231 235;  /* #e5e7eb */
            --c-border-light: 209 213 219; /* #d1d5db */
        }

        /* 工具類 */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        .mask-linear-fade {
            mask-image: linear-gradient(to right, black 85%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        }

        .active-filter {
            background-color: rgb(var(--c-primary)) !important;
            color: white !important;
            border-color: rgb(var(--c-primary)) !important;
        }

        .fade-in { animation: fadeIn 0.5s ease-in-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .loading-spinner {
            display: inline-block; width: 20px; height: 20px;
            border: 3px solid rgba(128, 128, 128, 0.3); border-radius: 50%;
            border-top-color: rgb(var(--c-primary));
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%; /* 確保佔滿高度 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* ❗ 核心修正 A：外部背景設為超深灰 */
    background-color: var(--body-outer-bg); 
    
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    
    /* 確保內容置中 */
    align-items: center; 
}

/* === 主要內容區 (限制寬度與置中) === */
#main-container {
    /* ❗ 核心修正 B：限制寬度並置中 */
    max-width: 800px;
    width: 100%;
    padding-top: calc(50px + env(safe-area-inset-top));
    
    /* 讓 App 本體背景保持純黑 */
    background-color: var(--bg-color); 
    
    /* 讓它佔滿高度 */
    flex-grow: 1; 
    position: relative;
    overflow: hidden;
    
    /* 選填：加一點陰影區分邊界 */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
    
    /* 內部佈局 */
    display: flex; 
    flex-direction: column;
}

/* 分頁內容容器 */
.tab-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* === 頂部導航 (Header) === */
.top-nav {
/* 固定定位設定 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--header-color);
    
    /* 高度適配 (包含瀏海) */
    height: calc(50px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;

    /* 限制最大寬度並置中 */
    margin: 0 auto;
    max-width: 800px;

    /* 🔥 關鍵修正 1：排版對齊 */
    display: flex;
    align-items: center; /* 垂直置中 */
    justify-content: space-between; /* 左右推開，這樣返回按鈕才會在左邊 */
}

.top-nav h1 {
    margin: 0;           /* 去除 h1 預設的大間距 */
    font-size: 1.1rem;   /* 調整字體大小跟其他頁面一致 */
    color: var(--text-main);
    text-align: center;
    
    /* 確保它待在第 2 欄 (雖然 HTML 順序對了就會自動對，但寫死更保險) */
    grid-column: 2;      
    justify-self: center;
}

/* 創建角色按鈕 */
.add-btn {
    /* 移除原本可能的絕對定位 (absolute) */
    position: static !important; 
    margin: 0;
    background: none;
    border: none;
    color: var(--accent-color); /* 或 var(--accent-color) 看你喜好 */
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0; /* 移除多餘內距 */

    /* 確保它待在第 3 欄 */
    grid-column: 3;
    justify-self: end;   /* 靠右對齊 */
    
    /* 為了好按，增加一點 Flex 屬性讓 icon 置中 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* === 內容捲動區 === */
.content-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0px 20px 0px 20px;
    
    /* 避開底部導航的高度 */
    padding-bottom: calc(var(--nav-height) + 20px); 
    
    /* 自定義滾動條樣式 (配合你的主題) */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

/* 隱藏/美化滾動條 */
.content-scroll::-webkit-scrollbar { width: 6px; }
.content-scroll::-webkit-scrollbar-track { background: transparent; }
.content-scroll::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 10px; }

/* === 底部導航欄 (Bottom Navigation) === */
#bottom-nav {
    position: fixed;
    bottom: 0;
    
    /* ❗ 核心修正 C：固定元素的 800px 置中大法 */
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    max-width: 800px; 
    width: 100%;
    
    height: var(--nav-height);
    background-color: var(--header-color);
    border-top: 1px solid var(--border-color);
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    font-size: 10px;
    cursor: pointer;
    width: 20%;
    height: 100%;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 4px;
    transition: transform 0.1s, color 0.2s;
}

/* 激活與懸停狀態 */
.nav-item.active { color: var(--accent-color); }
.nav-item.active i { transform: scale(1.1); }
.nav-item:active i { transform: scale(0.9); }

/* 搜尋框樣式 (暫時) */
.search-bar-placeholder input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #2c2c2e;
    border: none;
    color: white;
    font-size: 16px;
}
.search-bar-placeholder input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color);
}

@media (min-width: 768px) {
    
    /* 1. 加大底部導航的圖標和文字 */
    .nav-item i {
        font-size: 24px; /* 原本 22px -> 變大 */
        margin-bottom: 6px; /* 增加圖標與文字的間距 */
    }

    .nav-item span {
        font-size: 12px; /* 原本 10px -> 變大，更易閱讀 */
        font-weight: 500;
    }

    /* 2. 增加滑鼠懸停 (Hover) 效果 */
    /* 手機沒有滑鼠，所以這個效果只在電腦版顯示 */
    .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.05); /* 輕微發亮 */
        border-radius: 12px; /* 圓角背景 */
    }
        
    /* 4. 創建按鈕 (+) 也加大 */
    .add-btn {
        font-size: 25px; /* 原本 28px */
        right: 25px; /* 稍微往內縮 */
    }
}

/* app.css (新增在底部 - Profile 頁面樣式) */

/* === 個人資料卡片 === */
.profile-card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    margin-top: 20px;
    border: 1px solid var(--border-color);
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 頭像區塊 */
.profile-avatar {
    width: 100px;
    height: 100px;
    background-color: #2c2c2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid var(--accent-color); /* 粉紅邊框 */
    box-shadow: 0 0 15px rgba(252, 60, 123, 0.2); /* 微弱粉紅光暈 */
}

.profile-avatar i {
    font-size: 50px;
    color: var(--text-main);
}

/* 文字資訊 */
.profile-name {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.profile-id {
    margin: 10px;
    font-size: 14px;
    color: var(--text-sub);
    font-family: monospace; /* 等寬字體顯示 ID */
    background-color: var(--border-color);
    padding: 4px 8px;
    border-radius: 6px;
}

.profile-desc {
    color: var(--text-sub);
    margin-bottom: 20px;
}

/* 按鈕區塊 */
.profile-actions {
    margin-top: 30px;
    width: 100%;
    max-width: 300px;
}

/* 通用按鈕樣式 */
.btn-login, .btn-logout {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s;
}

.btn-login {
    background-color: var(--text-main); /* 白色按鈕 */
    color: #000;
}

.btn-logout {
    background-color: #3a3a3c; /* 深灰按鈕 */
    color: #ff453a; /* iOS 紅色 (代表登出/危險) */
}

.btn-login:active, .btn-logout:active {
    opacity: 0.8;
}

/* 錯誤訊息 */
.error-msg {
    text-align: center;
    color: #ff453a;
    margin-top: 50px;
}

/* 列表容器 */
.fav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 單個收藏項目 (卡片式) */
.fav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--card-bg);
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: opacity 0.3s ease, transform 0.2s;
}

.fav-item:active {
    transform: scale(0.98);
}

/* 左側資訊區 (可點擊進入聊天) */
.fav-info {
    display: flex;
    align-items: center;
    flex-grow: 1; /* 佔滿剩餘空間 */
    cursor: pointer;
}

/* 圓形頭像 (佔位符) */
.fav-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #333; /* 深灰底 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border: 2px solid var(--border-color);
    color: var(--text-sub);
    font-size: 20px;
    flex-shrink: 0; /* 防止被擠壓 */
    
    /* 未來有圖片時，可以用 background-image 覆蓋 */
    overflow: hidden; 
}

/* 文字區 */
.fav-text {
    display: flex;
    flex-direction: column;
}

.fav-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.fav-desc {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-sub);
}

/* 取消收藏按鈕 */
.btn-unfav {
    background: none;
    border: none;
    color: var(--text-sub); /* 預設灰色 */
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-unfav:hover {
    color: #ff453a; /* 懸停變紅色 */
}

.btn-small {
    margin-top: 15px;
    padding: 8px 16px;
    background-color: var(--card-bg);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    cursor: pointer;
}

.session-preview {
    /* ... 其他設定 ... */
    
    /* ❗ 強制限制顯示兩行，超過的自動變 ... */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* app.css (新增收藏頁網格樣式) */

/* 1. 網格容器 (Grid Container) */
.fav-grid {
    display: grid;
    /* 手機版強制 3 欄，自動填滿 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; /* 間距稍微加大 */
    padding: 15px 5px;
}

/* 2. 卡片本體 (Card) */
.fav-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px; /* 更圓潤 */
    position: relative; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.1s;
    padding: 8px; /* ❗ 讓內部內容跟邊框有點間距 (內縮效果) */
}

/* 三點選單按鈕 */
.btn-more-options {
    position: absolute;
    bottom: 50px;       /* 依據你的卡片高度調整，放在文字上方或旁邊 */
    right: 5px;
    
    width: 28px;
    height: 28px;
    border-radius: 50%; /* 圓形 */
    background: rgba(0, 0, 0, 0.6); /* 半透明黑底 */
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;        /* 確保在最上層 */
    font-size: 0.9rem;
    transition: 0.2s;
}

.btn-more-options:hover {
    background: #ff4081; /* 滑鼠移過去變色 */
    border-color: #ff4081;
}

.fav-card:active {
    transform: scale(0.98);
}

/* 3. 點擊區域 */
.fav-card-link {
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 4. 3:4 長方形頭像 */
.fav-card-avatar {
    width: 100%;
    aspect-ratio: 4 / 5; /* ❗ 強制 4:5 比例 */
    border-radius: 12px; /* 圖片也要圓角 */
    background: linear-gradient(135deg, #333 0%, #1c1c1e 100%); /* 預設漸層底 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin-bottom: 10px; /* 圖片與名字的距離 */
    font-size: 28px; /* 圖標大一點 */
    color: var(--text-sub);
    
    /* 未來有圖片時使用 */
    overflow: hidden;
    object-fit: cover;
}

/* 5. 名字 (變大) */
.fav-card-name {
    font-size: 15px; /* 原本 11px -> 15px */
    font-weight: 700;
    text-align: center;
    width: 100%;
    margin-bottom: 4px;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 6. 聊天次數 (灰字小字) */
.fav-card-count {
    font-size: 11px;
    color: var(--text-sub); /* 灰色 */
    text-align: center;
    font-weight: 400;
}

/* 7. 愛心移除按鈕 (右上角) */
.btn-unfav-card {
    position: absolute;
    top: 12px;   /* 因為卡片有 padding 8px，這裡設為 12px 讓它靠內 */
    right: 12px;
    
    background: rgba(0, 0, 0, 0.6); /* 深色半透明底 */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    
    width: 28px;
    height: 28px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}

.btn-unfav-card i {
    font-size: 14px;
    color: #ff453a; /* 紅色愛心 */
}

/* === 電腦版適配 === */
@media (min-width: 768px) {
    .fav-grid {
        /* 電腦版每行 4-5 個 */
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }
    
    .fav-card-name { font-size: 18px; }
    .fav-card-count { font-size: 13px; }
}


.btn-model.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: bold;
}

/* 模型切換容器 */
.model-switch-container {
    margin-top: 25px;
    width: 100%;
    text-align: left;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03); /* 微微的背景區分 */
    border-radius: 16px;
}

.tools-grid-container {
    display: grid;                 /* 啟動網格排版 */
    grid-template-columns: 1fr 1fr; /* 分成兩欄，每欄一樣寬 (1fr = 1 fraction) */
    gap: 12px;                     /* 按鈕之間的間距 */
    width: 100%;                   /* 寬度佔滿 */
    margin-top: 15px;              /* 與上方保持距離 */
}

/* 確保按鈕高度一致且美觀 */
.btn-tool-item {
    display: flex;
    flex-direction: column;     /* 圖示在字上面 */
    align-items: center;        /* 水平置中 */
    justify-content: center;    /* 垂直置中 */
    padding: 15px;              /* 增加點擊範圍與舒適度 */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color); /* 使用您原本的變數 */
    border-radius: 12px;
    color: #fff;                /* 假設文字是白色 */
    text-decoration: none;      /* 去除連結底線 */
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tool-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* 滑鼠懸停效果 */
}

.btn-tool-item i {
    font-size: 1.2em;           /* 圖示大小 */
    margin-bottom: 5px;         /* 圖示與文字的距離 */
}

/* 顯示目前模型的文字 */
.current-model-label {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}

.current-model-label strong {
    color: var(--accent-color); /* 讓模型名字變粉紅 */
    font-size: 16px;
}

/* 按鈕群組容器 */
.model-options {
    display: grid;              /* 啟用網格 */
    grid-template-columns: 1fr 1fr; /* 手機預設：強制分為「兩欄」 (解決問題1) */
    gap: 10px;                  /* 按鈕之間的間距 */
    margin-top: 10px;
    width: 100%;
}

/* 電腦版 (螢幕寬度大於 768px 時) 的特殊設定 */
@media (min-width: 768px) {
    .model-options {
        grid-template-columns: repeat(4, 1fr); /* 電腦版改為「四欄」一列 */
    }
}

/* 模型按鈕 (變大) */
.btn-model {
    flex: 1;
    background-color: transparent;
    border-radius: 14px;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    border-radius: 10px;
    padding: 10px;
    
    display: flex;
    flex-direction: column; /* 讓圖標和文字垂直排列 */
    align-items: center;
    justify-content: center;
}

a.btn-model {
    text-decoration: none; /* 去除連結的底線 */
    box-sizing: border-box; /* 確保框線不會讓按鈕變大 */
}

.btn-model i {
    font-size: 24px; /* 圖標變大 */
    margin-bottom: 4px;
}

.btn-model span {
    font-size: 15px; /* 文字變大 */
    font-weight: 600;
}

/* ❗ 激活狀態 (被選中時) */
.btn-model.active {
    background-color: rgba(252, 60, 123, 0.1); /* 淡粉紅背景 */
    border-color: var(--accent-color); /* 粉紅邊框 */
    color: var(--accent-color); /* 粉紅文字 */
}

.btn-model:active {
    transform: scale(0.96);
}

/* 伺服器連線遮罩 */
#server-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 深黑背景 */
    z-index: 9999; /* 最上層 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: opacity 0.5s ease;
}

.server-loader {
    border: 5px solid #333;
    border-top: 5px solid #fc3c7b; /* 你的粉紅色 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.server-text {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.server-subtext {
    color: #888;
    font-size: 14px;
    margin-top: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*PLUS功能開發

/* 模態視窗 (Modal) 基礎 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-box {
    background: var(--card-bg);
    width: 90%; max-width: 450px;
    max-height: 85vh;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; color: var(--text-main);
    background: rgba(255,255,255,0.03);
}

.modal-close { cursor: pointer; font-size: 24px; color: var(--text-sub); }

.modal-content {
    padding: 20px;
    overflow-y: auto;
}

.modal-title {
    color: #fff;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
}

.modal-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: pre-wrap; /* 讓 \n 換行生效 */
    text-align: left;
    background: #2c2c2e;
    padding: 12px;
    border-radius: 8px;
}

/* 按鈕樣式 */
.modal-actions button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    background-color: var(--accent-color);
    color: #ffffff
}

.primary-btn {
    background-color: var(--accent-color);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
}

#new-tag-name{
    background-color: var(--input-bg);
    color: var(--text-main);
}

/* 按鈕區塊 */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-cancel {
    background: #3a3a3c !important;
    color: white;
}
.btn-cancel:active { background: #48484a; }

.btn-confirm {
    background: #ff453a; /* 紅色警示 */
    color: white;
    font-weight: bold;
}
.btn-confirm:active { opacity: 0.8; }

/* 彈出動畫定義 */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 新增表單 */
.spell-form { display: flex; flex-direction: column; gap: 10px; }

.spell-form input, .spell-form textarea {
    font-size: 16px; /* ❗ 關鍵：防止 iPhone 自動放大 */
    padding: 12px;
    line-height: 1.5;
    background-color: #2c2c2e;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 12px;
    width: 100%;
}
.spell-form input:focus, .spell-form textarea:focus {
    outline: none; border-color: var(--accent-color);
}


.btn-add-spell {
    background-color: var(--accent-color);
    color: white; border: none;
    padding: 10px; border-radius: 8px;
    font-weight: bold; cursor: pointer;
    margin-top: 5px;
}
.btn-add-spell:active { transform: scale(0.98); }

/* 列表項目 */
.manage-spell-item {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}

.manage-spell-info { flex-grow: 1; overflow: hidden; }
.manage-spell-title { font-weight: bold; font-size: 14px; color: var(--accent-color); margin-bottom: 4px; }
.manage-spell-content { font-size: 12px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-delete-spell {
    background: none; border: none;
    color: #ff453a; /* 紅色刪除 */
    padding: 8px; font-size: 16px;
    cursor: pointer; margin-left: 10px;
}

/* 列表中的編輯按鈕 (藍色/綠色) */
.btn-edit-spell {
    background: none; border: none;
    color: var(--accent-color); /* 粉紅色或藍色 */
    padding: 8px; font-size: 16px;
    cursor: pointer;
}

/* 編輯模式下的「取消」按鈕 */
#btn-cancel-edit {
    background-color: #3a3a3c;
    color: #ccc;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 5px;
    width: 100%; /* 與新增按鈕同寬 */
}

/* ========================================= */
/* 10. 手機版咒語管理視窗優化 (Mobile Spell Fix) */
/* ========================================= */
@media (max-width: 600px) {

    /* 1. 輸入框字體與高度優化 */
    .spell-form input, 
    .spell-form textarea {
        /* ❗ 字體加大到 16px (防止 iPhone 自動縮放，且閱讀清楚) */
        font-size: 16px !important; 
        
        /* 增加內距，讓手指更好點擊 */
        padding: 14px !important; 
    }

    /* 2. 標題框 (變高) */
    .spell-form input {
        height: 50px !important; /* 讓標題框更高更好按 */
    }

    /* 3. 內容框 (大幅變長) */
    .spell-form textarea {
        /* ❗ 設定最小高度為 180px，讓手機能看到更多內容 */
        min-height: 200px !important; 
    }

    /* 4. 按鈕也同步加大 */
    .btn-add-spell, 
    #btn-cancel-edit {
        padding: 14px !important;
        font-size: 16px !important;
    }
    
    /* 5. 調整彈出視窗的大小，確保不會太窄 */
    .modal-box {
        width: 95% !important; /* 手機上佔滿寬度 */
        max-height: 85vh; /* 避免被鍵盤擋住 */
    }
}

/* 用戶
/* 表單樣式 (復用 spell-form 的結構) */
.persona-form { display: flex; flex-direction: column; gap: 10px; }

.persona-form input, 
.persona-form textarea {
    width: 100%;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
    font-size: 16px; /* 手機版防縮放 */
}

.btn-add-persona {
    background-color: var(--accent-color);
    color: white; border: none;
    padding: 10px; border-radius: 8px;
    font-weight: bold; cursor: pointer;
    margin-top: 5px;
    font-size: 16px;
}
.btn-add-persona:active { transform: scale(0.98); }

#btn-cancel-persona {
    background-color: #3a3a3c;
    color: #ccc; border: none;
    padding: 10px; border-radius: 8px;
    font-weight: bold; cursor: pointer;
    width: 100%;
    font-size: 16px;
}

/* 列表項目樣式 */
.manage-persona-item {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}

.manage-persona-info { flex-grow: 1; overflow: hidden; padding-right: 10px; }
.manage-persona-name { font-weight: bold; font-size: 15px; color: var(--accent-color); margin-bottom: 4px; }
.manage-persona-desc { font-size: 13px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 手機版輸入框高度優化 */
@media (max-width: 600px) {
    .persona-form textarea {
        min-height: 150px;
    }
}

/* 頭像預覽圓框 */
.avatar-upload-container {
    display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;
}
.avatar-preview-circle {
    width: 100px; height: 100px; /* 圓形頭像，適合用戶 */
    border-radius: 50%;
    background-color: #2c2c2e;
    border: 2px dashed #555;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; position: relative;
    transition: border-color 0.3s;
}
.avatar-preview-circle:hover { border-color: var(--accent-color); }
.avatar-preview-circle img { width: 100%; height: 100%; object-fit: cover; display: none; }
.upload-hint { font-size: 12px; color: var(--text-sub); margin-top: 8px; }

/* 頭像裁切視窗 (與 create.html 相同) */
#cropper-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95); z-index: 9999;
    display: none; align-items: center; justify-content: center;
}
.cropper-container-box { width: 90%; max-width: 450px; display: flex; flex-direction: column; gap: 20px; }
.cropper-wrapper {
    width: 100%; height: 50vh; /* 稍微矮一點，正方形裁切 */
    background-color: #000; position: relative; overflow: hidden;
    border: 1px solid #333; border-radius: 8px;
}
.cropper-wrapper img { display: block; max-width: 100%; }
.cropper-container img { max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; }
.cropper-actions { display: flex; gap: 10px; }
.cropper-actions button { margin-top: 0; flex: 1; padding: 10px; background: var(--accent-color); color: white; border: none; border-radius: 8px; cursor: pointer; }

/* ========================================= */
/* 11. 匯入視窗輸入框優化 (Import Modal UI)  */
/* ========================================= */

.import-input {
    width: 100%;
    
    /* ❗ 核心修正：設定固定高度，讓它變高 */
    height: 50px; 
    
    /* 增加內距與圓角 */
    padding: 0 15px; 
    border-radius: 12px;
    
    /* 深色主題樣式 */
    background-color: var(--body-outer-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    
    /* 字體設定 (16px 防止 iPhone 自動縮放) */
    font-size: 16px;
    
    /* 增加底部間距，不要跟下一個擠在一起 */
    margin-bottom: 20px;
    
    /* 讓輸入文字垂直居中 */
    display: flex;
    align-items: center;
}

/* 聚焦時的高亮效果 */
.import-input:focus {
    outline: none;
    border-color: var(--accent-color); /* 粉紅色邊框 */
    background-color: var(--body-outer-bg);
}

/* 針對「檔案上傳框」的特別微調 */
/* 因為 type="file" 的結構不同，不能用固定 height */
input[type="file"].import-input {
    height: auto; /* 高度自動 */
    padding: 15px; /* 增加內距來撐高 */
    cursor: pointer;
}

/* 1. 滑動容器 (去框、透明、加底線) */
.swipe-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 保持滑動功能 */
    
    /* ❗ 視覺修改：移除卡片感，改為清單感 */
    background-color: transparent; /* 透明背景 */
    border: none; /* 移除四邊框 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 只有底線 */
    border-radius: 0; /* 直角 */
    margin-bottom: 0; /* 緊密排列 */
    
    scrollbar-width: none; /* Firefox 隱藏捲軸 */
}

/* 隱藏滾動條 (Chrome/Safari) */
.swipe-wrapper {
    display: flex;              /*讓內容橫向排列 */
    overflow-x: auto;           /* 允許橫向捲動 */
    scroll-snap-type: x mandatory; /* 啟用滑動吸附效果 */
    position: relative;
    width: 100%;
    
    /* 隱藏底部的捲軸，讓介面更像原生 App */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
/* Chrome, Safari, Opera 隱藏捲軸 */
.swipe-wrapper::-webkit-scrollbar {
    display: none;
}

/* 2. 聊天內容區塊：必須佔滿整個畫面！ */
.swipe-content {
    min-width: 100%;            /* 🔥 關鍵修正：強制佔滿 100% 寬度 */
    flex: 0 0 100%;             /* 確保不會被按鈕擠壓 */
    scroll-snap-align: start;   /* 滑動停止時，優先對齊這裡 */
    
    display: flex;
    align-items: center;
    padding: 16px 20px;         /* 保持你原本的間距 */
    box-sizing: border-box;     /* 確保 padding 不會撐爆寬度 */
    
    background-color: transparent; 
    transition: background-color 0.2s;
    cursor: pointer;
}

/* 點擊時的反饋 */
.swipe-content:active {
    background-color: rgba(255, 255, 255, 0.08);
}

/* 3. 右側動作按鈕群組 (平時被擠在螢幕外) */
.swipe-actions-group {
    min-width: 140px;           /* 🔥 設定按鈕總寬度 (70px * 2) */
    display: flex;              /* 讓兩個按鈕橫向排 */
    scroll-snap-align: end;     /* 滑到底時，吸附在這裡 */
}

/* 個別按鈕樣式 */
.swipe-btn-item {
    flex: 1;                    /* 平均分配寬度 */
    
    /* 🔥 強制重置瀏覽器預設樣式 */
    border: none;
    outline: none;
    margin: 0;
    padding: 0;                 /* 關鍵：拿掉預設內距 */
    background: transparent;    /* 先透明，顏色由下面定義 */
    
    /* 🔥 Flexbox 完美置中 */
    display: flex;
    align-items: center;        /* 垂直置中 */
    justify-content: center;    /* 水平置中 */
    
    /* 尺寸與文字設定 */
    height: 100%;               /* 確保高度撐滿 */
    color: white;
    font-size: 18px;            /* 圖示大小 */
    line-height: 1;             /* 關鍵：避免行高導致垂直偏移 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; 
}

.swipe-btn-item i {
    margin: 0;
    display: block;
}

/* 改名按鈕 (灰藍色) */
.swipe-btn-item.rename {
    background-color: #636366; 
}
.swipe-btn-item.rename:active {
    background-color: #48484a;
}

/* 刪除按鈕 (紅色) */
.swipe-btn-item.delete {
    background-color: #ff453a;
}
.swipe-btn-item.delete:active {
    background-color: #d03025;
}


/* =========================================
   💻 電腦版優化 (大於 768px)
   ========================================= */
@media (min-width: 768px) {
    /* 電腦版禁止橫向滑動，避免出現捲軸 */
    .swipe-wrapper {
        overflow-x: hidden; 
        scroll-snap-type: none; /* 電腦版不需要吸附 */
    }

    /* 🔥 徹底隱藏按鈕群組，避免它們佔位置 */
    .swipe-actions-group {
        display: none !important; 
    }
    
    /* 確保內容區塊不會有滑動行為 */
    .swipe-content {
        min-width: 100%;
        width: 100%;
    }
}


/* 4. 頭像微調 (在 app.js 生成的 HTML 裡有 .fav-avatar 類別) */
#tab-chats .fav-avatar {
    width: 52px;
    height: 52px;
    margin-right: 15px;
    border: none; /* 移除頭像邊框 */
}


/* === 2. 自定義右鍵選單 (Context Menu) === */
.context-menu {
    position: fixed;
    z-index: 9999;
    background-color: var(--header-color);
    border: 1px var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    min-width: 150px;
    display: none; /* JS 控制顯示 */
    backdrop-filter: blur(10px);
}

.ctx-item {
    padding: 10px 15px;
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.ctx-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.ctx-item.delete {
    color: #ff453a;
}

.search-bar-container {
    padding: 10px 20px;
    background-color: var(--card-bg); /* 深灰底 */
    border-bottom: 1px solid var(--border-color);
    animation: slideDown 0.2s ease-out;
}

.search-bar-container input {
    width: 100%;
    padding: 10px 15px;
    border-radius: 20px; /* 圓潤 */
    border: 1px solid var(--border-color);
    background-color: #000; /* 黑色輸入底 */
    color: var(--text-main);
    font-size: 14px;
}

.search-bar-container input:focus {
    outline: none;
    border-color: var(--accent-color); /* 粉紅邊框 */
}

/* 下滑動畫 */
@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========================================= */
/* 淺色模式 (Light Mode) 變數覆蓋             */
/* ========================================= */
html.light-mode body {
    /* 1. 背景與卡片 (不刺眼的淺灰與白) */
    --bg-color: #f0f2f5;          /* 護眼淺灰背景 */
    --body-outer-bg: #e5e5e5;          /* 電腦版外部背景 */
    --card-bg: #ffffff;           /* 卡片改為純白 */
    --chat-bg: #f0f2f5;           /* 聊天背景同主背景 */
    --input-bg: #f0f2f5;          /* 輸入框淺灰 */
    --header-color: #ffffff;
    
    /* 2. 文字顏色 (反轉為深色) */
    --text-main: #1c1c1e;         /* 深灰黑 (主標題) */
    --text-sub: #65676b;          /* 淺灰 (次要文字) */
    
    /* 3. 邊框 (淺色線條) */
    --border-color: #e4e6eb;      
    
    /* 4. 聊天氣泡 */
    --bubble-ai: #ffffff;         /* AI 氣泡變白 */
    --input-field: #ffffff;       /* 輸入框內變白 */

   
    /* --accent-color (主題紅) 保持不變，因為粉紅色在白底也很好看 */
    /* --bubble-user (用戶氣泡) 保持不變 */
}

/* 針對淺色模式的細部修正 */
body.light-mode .fixed-header,
body.light-mode .nav-anchor,
body.light-mode .bottom-actions,
body.light-mode #input-area-wrapper,
body.light-mode #shortcut-toolbar .btn-shortcut,
body.light-mode .search-bar-placeholder input,
body.light-mode #global-search-input,
body.light-mode .spell-form input, 
body.light-mode .spell-form textarea {
    /* 讓半透明背景變成淺色霧面 */
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* 修正按鈕文字顏色 */
body.light-mode .btn-shortcut {
    color: #1c1c1e;
    border: 1px solid #ccc;
}

/* 修正登出按鈕 */
body.light-mode .btn-login, .btn-logout {
    background-color: #f0f2f5;
}

body.light-mode .back-btn {
    background-color: rgba(255, 255, 255, 0.6);
    color: #000;
}

body.light-mode .swipe-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 保持滑動功能 */
    
    /* ❗ 視覺修改：移除卡片感，改為清單感 */
    background-color: transparent; /* 透明背景 */
    border: none; /* 移除四邊框 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 只有底線 */
    border-radius: 0; /* 直角 */
    margin-bottom: 0; /* 緊密排列 */
    
    scrollbar-width: none; /* Firefox 隱藏捲軸 */
}

/* app.css (新增：子分頁切換樣式) */

/* 1. 子分頁容器 (固定在 Header 下方) */
.sub-nav-container {
    position: relative;
    
    /* ❗ 核心修正：強制撐滿寬度 */
    width: 100% !important;
    box-sizing: border-box; /* 確保 padding 不會撐爆寬度 */
    
    height: auto;
    margin-bottom: 15px;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

/* 2. 按鈕包裹器 (膠囊狀背景) */
.sub-nav-wrapper {
    display: flex;
    
    /* ❗ 核心修正：強制撐滿容器 */
    width: 100% !important; 
    
    background-color: var(--header-color);
    border-radius: 12px;
    padding: 4px;
}

/* 3. 切換按鈕 */
.sub-tab-btn {
    /* ❗ 核心修正：平均分配空間 */
    flex: 1; 
    
    border: none;
    background: transparent;
    color: var(--text-sub);
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center; /* 文字居中 */
}

/* 4. 選中狀態 (主題色) */
.sub-tab-btn.active {
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 1. 網格容器 (RWD) */
#moments-feed-container {
    display: flex; /* ❗ 改為 Flex */
    flex-direction: column; /* ❗ 垂直排列 */
    gap: 0; /* 移除間距，改用內距+底線 */
    padding: 0;
    width: 100%;
}

/* 2. 動態卡片 (仿 IG/WeChat) */
.moment-card {
    background-color: transparent; 
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

/* 3. 頂部作者資訊 */
.moment-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.moment-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.moment-meta {
    display: flex;
    flex-direction: column;
}

.moment-author {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-main);
}

.moment-time {
    font-size: 12px;
    color: var(--text-sub);
}

/* 4. 圖片區域 */
.moment-image-wrapper {
    width: 100%;
    background-color: var(--bg-color); /* 圖片載入前的底色 */
    overflow: hidden;
    padding: 15px;
}

.moment-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* 雖然圖片是方形，但我們可以設個最大高度避免太長 */
    max-height: 500px; 
}

/* 5. 文字內容 */
.moment-content {
    padding: 15px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap; /* 保留換行 */
}

/* 6. 留言區 (重點：配色運用) */
.moment-comments-section {
    background-color: var(--header-color); /* 使用網頁背景色 (深灰/淺灰) 作為區隔 */
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
}

.moment-comment {
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--text-sub);
    display: flex;
    gap: 6px;
}

.comment-user {
    font-weight: bold;
    color: var(--text-main); /* 名字用主色 */
    white-space: nowrap;
}

.comment-text {
    color: var(--text-sub); /* 內容用次要色 */
}

/* 愛心圖標裝飾 */
.moment-actions {
    padding: 5px 15px 5px 15px;
    display: flex;
    gap: 15px;
}
.moment-action-btn {
    background: none; border: none;
    color: var(--text-sub);
    font-size: 20px; cursor: pointer;
    transition: color 0.2s;
}
.moment-action-btn:hover { color: var(--accent-color); }

/* 7. 隱藏式輸入框區域 */
.moment-input-area {
    /* 佈局 */
    /* display: flex; (注意：JS 會控制這裡的 display 為 flex 或 none) */
    align-items: center;
    gap: 10px;
    color: var(--text-main);

    /* 間距與外觀 */
    padding: 10px 15px; /* 左右對齊上方的 15px */
    background-color: var(--header-color); /* 使用與留言區相同的底色，視覺上連成一氣 */
    border-top: 1px solid var(--border-color); /* 與上方按鈕區做一點區隔 */
    
    /* 動畫 (選用：讓展開時比較滑順) */
    animation: fadeInInput 0.3s ease;
}

/* 輸入框本體 */
#moments-feed-container .moment-input-area .comment-input {
    flex: 1;
    height: 36px;
    padding: 0 15px;
    border-radius: 18px;
    
    /* 這裡是你原本被覆蓋的顏色設定 */
    background-color: var(--bg-color); 
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    
    outline: none;
    transition: border-color 0.2s box-shadow 0.2s;
}

/* 聚焦樣式也要跟著加強權重 */
#moments-feed-container .moment-input-area .comment-input:focus {
    /* 1. 你的桃紅色邊框 */
    border-color: var(--accent-color) !important;
    
    /* 2. 🟢 關鍵：移除 Tailwind 的預設紫色光暈 (它是用 box-shadow 做的) */
    box-shadow: none !important;
    
    /* 3. 確保瀏覽器預設的框線也不會跑出來 */
    outline: none !important;
}

/* 發送按鈕 */
.send-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent; /* 透明背景，只顯示 ICON */
    color: var(--accent-color); /* 使用強調色 */
    
    /* 讓 ICON 置中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    border-radius: 50%; /* 圓形按鈕 */
    font-size: 16px;
    
    transition: background-color 0.2s, transform 0.1s;
}

/* 發送按鈕 Hover 效果 */
.send-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* 滑鼠經過時淡淡的底色 */
}

/* 發送按鈕點擊效果 */
.send-btn:active {
    transform: scale(0.9); /* 按下去時稍微縮小 */
}

/* 補充動畫：讓輸入框出現時不要太生硬 */
@keyframes fadeInInput {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 編輯輸入框 */
.edit-name-input {
    background-color: var(--bg-color);
    border: 1px solid var(--accent-color);
    color: var(--text-main);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 18px;
    width: 150px;
    text-align: center;
}

/* 編輯小按鈕 (筆) */
.btn-icon-edit {
    background: none; border: none;
    color: var(--text-sub);
    font-size: 16px; cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}
.btn-icon-edit:hover { color: var(--accent-color); }

/* 儲存/取消按鈕 */
.btn-icon-save, .btn-icon-cancel {
    width: 32px; height: 32px;
    border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.btn-icon-save {
    background-color: var(--accent-color);
    color: white;
}

.btn-icon-cancel {
    background-color: #3a3a3c;
    color: #ccc;
}

/* 4. 搜尋結果卡片微調 (複用 fav-card 樣式，但增加熱度顯示) */
.fire-icon { color: #ff453a; margin-right: 2px; }

/* 1. 強制雙欄網格 (針對搜尋結果) */
/* 1. 預設 (手機版)：強制雙欄 */
#search-results-container.fav-grid {
    display: grid;
    /* 手機版：2 欄 */
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 15px !important;
    padding: 10px;
}

/* 2. 電腦版 (平板以上)：改為四欄 */
@media (min-width: 768px) {
    #search-results-container.fav-grid {
        /* 電腦版：4 欄 */
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 2. 搜尋卡片的高度調整 (因為加了標籤，卡片會變高) */
.fav-card {
    height: auto; /* 允許內容撐開 */
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

/* 3. 卡片內的標籤容器 */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 居中排列 */
    gap: 4px;
    margin-top: 6px;
    padding: 0 5px;
    height: 24px; /* 固定高度，避免卡片參差不齊 (只顯示一行) */
    overflow: hidden;
}

/* 4. 迷你標籤樣式 (Create 頁面的縮小版) */
.tag-pill-small {
    background-color: var(--accent-color);
    color: white;
    font-size: 10px;
    
    /* 調整內距：上下稍微減少，左右保持 */
    padding: 3px 8px; 
    
    border-radius: 10px;
    
    /* ❗ 核心修正：使用 Flexbox 強制置中 */
    display: inline-flex;    /* 改為 inline-flex */
    align-items: center;     /* 垂直居中 (最重要) */
    justify-content: center; /* 水平居中 */
    
    /* ❗ 核心修正：重置行高，避免字體本身的高度偏差 */
    line-height: 1;          
    
    /* 防止過長 */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === 全新搜尋卡片樣式 (Search Card) === */

/* === 2. 卡片本體修正 === */
.search-card {
    display: inline-block !important;
    width: 100% !important;
    break-inside: avoid;
    text-decoration: none !important;
    
    /* === 圓角設定 === */
    border-radius: 12px;
    
    /* === 🚫 修正 iOS 消失 Bug 的關鍵 1：修復圓角溢出 === */
    overflow: hidden; 
    /* 這行是 iOS 專用的魔法，能強制修正圓角內的內容渲染 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    
    /* === 🚫 修正 iOS 消失 Bug 的關鍵 2：強制 GPU 加速 === */
    /* 這告訴瀏覽器：這個物件是 3D 的，請隨時保持渲染狀態，不要偷懶不畫背景 */
    transform: translateZ(0);
    
    /* === 🚫 修正 iOS 消失 Bug 的關鍵 3：移除點擊時的預設灰色遮罩 === */
    /* iPhone 點連結會有灰色方塊，這把它變透明 */
    -webkit-tap-highlight-color: transparent;

    /* ...其他原本的設定... */
    background-color: var(--card-bg, #1c1c1e);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    margin-bottom: 10px;

    /* === ✨ 優化：把過渡動畫移到這裡 === */
    /* 這樣不只電腦 hover 有動畫，手機點擊縮放時也會有緩衝，不會瞬間閃爍 */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 電腦版 Hover 特效 (維持不變) */
@media (hover: hover) {
    .search-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
}

/* 手機/電腦 點擊縮放特效 */
.search-card:active {
    /* 縮小幅度改稍微小一點 (0.98 -> 0.99)，減少 iPhone 負擔 */
    transform: scale(0.98);
}

.search-card-img-box {
    width: 100%;
    /* 保持你的比例設定，或者也可以移除 padding-top 改用圖片自然高度 */
    padding-top: 133%; 
    position: relative;
    background-color: #2c2c2e;
}

.search-card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 圖片上的數據標籤 (右下角) */
.search-card-stat {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

/* 2. 內容資訊區 */
.search-card-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 角色名字 */
.search-card-name {
    color: var(--text-main, #fff);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 作者名稱 (依據需求：名字下方，偏灰，小) */
.search-card-author {
    color: #666;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

/* 簡短介紹 (依據需求：偏灰，小，限制兩行) */
.search-card-desc {
    /* 允許文字正常換行 */
    white-space: normal;
    /* 確保文字顯示出來，不要被切掉 */
    overflow: visible;
    height: auto !important;
    
    margin-bottom: 6px;
    color: var(--text-sub, #86868b);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Tags 容器 */
.search-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto; /* 讓它盡量靠下 */
    align-items: center
}

/* 單個 Tag 樣式 (依據需求：主題色，小) */
.search-tag {
    background-color: rgba(252, 60, 123, 0.15); /* 你的強調色背景淡化 */
    color: var(--accent-color, #fc3c7b);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 空狀態樣式 (沿用之前的，但也微調一下) */
.empty-state {
    grid-column: 1 / -1; /* 跨滿所有欄位 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666;
}
.empty-state i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* 列表項目容器 (必須是 relative 才能讓刪除鈕定位) */
.chat-item-wrapper {
    position: relative;
    overflow: hidden; /* 隱藏超出的部分 */
    border-bottom: 1px solid #333;
    background-color: #000;
}

/* 🔴 滑動刪除按鈕 (藏在背景層) */
.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px; /* 按鈕寬度 */
    background-color: #ff453a; /* 紅色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* 在底層 */
}
.swipe-delete-btn {
    background: none; border: none; color: white; font-size: 20px; width: 100%; height: 100%;
}

/* 🔵 對話內容 (前景層 - 蓋上面) */
.chat-content {
    position: relative;
    z-index: 2; /* 在上層，蓋住紅色按鈕 */
    background-color: #1c1c1e; /* 內容背景色 */
    display: flex;
    align-items: center;
    padding: 15px;
    transition: transform 0.2s ease-out; /* 滑動動畫 */
    cursor: pointer;
}

/* (這裡你可以自己加 avatar, info 的樣式...) */
.chat-content:active {
    background-color: #2c2c2e; /* 點擊時的回饋 */
}

/* 1. 按鈕上的小紅點 */
.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background-color: #ff3b30; /* 鮮豔的紅色 */
    border-radius: 50%;
    border: 1px solid var(--card-bg); /* 讓紅點邊緣有一點間隔感 */
    display: none; /* 預設隱藏，有未讀才顯示，稍後JS控制 */
}

/* 2. 彈窗遮罩 (背景變暗) */
.notification-modal-overlay {
    display: none; /* 預設不顯示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* 背景模糊效果 */
}

/* 3. 彈窗本體 */
.notification-modal-content {
    background-color: var(--card-bg);
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* 避免超過螢幕高度 */
}

/* 4. 彈窗標題 */
.notification-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-color);
    
    /* 彈性佈局設定 */
    display: flex;
    justify-content: space-between; /* 左右對齊 */
    align-items: center;            /* 垂直置中 */
}
.notification-header h3 {
    color: var(--text-main);
    margin: 0;
    font-size: 16px;
    
    /* 關鍵：讓標題佔據所有剩餘空間，並文字置中 */
    flex-grow: 1;
    text-align: center;
}

.header-icon-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 18px;
    cursor: pointer;
    
    /* 設定固定寬高，確保標題不會歪掉 */
    width: 40px; 
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 加個圓形懸停效果會比較好看 */
    transition: background 0.2s, color 0.2s;
}

.header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 18px;
    cursor: pointer;
}

/* 5. 內容區域 (列表與內文共用) */
.notification-body {
    padding: 0;
    overflow-y: auto; /* 內容多時可以捲動 */
    flex: 1;
}

/* 6. 列表項目樣式 */
.notice-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}
.notice-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* 頭像區 */
.notice-avatar {
    position: relative;
    margin-right: 12px;
}
.notice-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
/* 列表內的小紅點 */
.item-red-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: #ff3b30;
    border-radius: 50%;
    display: none;
}
.notice-item.unread .item-red-dot {
    display: block; /* 只有未讀狀態才顯示 */
}

/* 文字預覽區 */
.notice-preview {
    flex: 1;
    overflow: hidden; /* 超出隱藏關鍵 */
}
.notice-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.notice-name {
    color: var(--text-main);
    font-weight: bold;
    font-size: 14px;
}
.notice-date {
    color: var(--text-sub);
    font-size: 12px;
}
.notice-text {
    color: var(--text-sub);
    font-size: 13px;
    margin: 0;
    
    /* 這裡處理文字過長變點點點 */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.notice-item.unread .notice-text {
    color: var(--text-main); /* 未讀時文字亮一點 */
}

/* 7. 詳細內容樣式 */
.back-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    padding: 15px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.detail-content {
    padding: 0 20px 20px 20px;
}
.detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.detail-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}
.detail-info {
    display: flex;
    flex-direction: column;
}
.detail-name {
    color: var(--text-main);
    font-weight: bold;
    font-size: 16px;
}
.detail-date {
    color: var(--text-sub);
    font-size: 12px;
    margin-top: 2px;
}
.detail-text {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap; /* 讓內容可以自動換行 */
}

.detail-text a {
    color: var(--accent-color); /* 改成你的主題色 (這裡是配合公告圖示的橘色) */
    text-decoration: none; /* 拿掉醜醜的底線 */
    font-weight: bold; /* 加粗 */
    transition: 0.3s; /* 讓變色有漸層效果 */
    border-bottom: 1px dashed var(--accent-color); /* (選用) 用虛線當底線比較有質感 */
}

.default-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--border-color); /* 深灰色背景 */
    color: var(--text-sub);                /* 圖示顏色 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    font-size: 18px; /* 圖示大小 */
}

/* 2. 詳細頁面用的替代頭像圓圈 (比較大) */
.detail-default-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--accent-color); /* 詳細頁可以用主題色突出一點 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    border: 2px solid var(--accent-color);
}

.notice-avatar-img {
    width: 45px;  /* 設定寬度 */
    height: 45px; /* 設定高度 */
    border-radius: 50%; /* 讓圖片變圓形 (如果不想要圓形，這行可以刪掉) */
    object-fit: contain; /* 確保圖片縮放後不會變形 */
    margin-right: 10px; /* 跟右邊文字保持距離 */
    background-color: transparent; /* 背景透明 */
}

/* === 儲值專用樣式 (Top-Up Specific) === */

    /* 餘額顯示 */
    .balance-container {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border-color);
    }
    .balance-label {
        color: var(--text-sub);
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    .balance-amount {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-main); /* 改為主要文字色，不一定要藍色 */
        display: flex; align-items: center; justify-content: center;
        gap: 10px;
        text-shadow: 0 0 20px rgba(252, 60, 123, 0.2); /* 淡淡的主題色光暈 */
    }
    .gem-symbol { font-size: 0.8em; }

    /* 儲值卡片容器 */
    .topup-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 5px;
        padding: 5px;
        margin-bottom: 20px;
    }
    
    /* 單張卡片 */
    .topup-card {
        background: rgba(255, 255, 255, 0.03); /* 極淡的白，製造層次 */
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 20px 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: flex; flex-direction: column; justify-content: space-between;
        min-height: 180px;
    }

    .topup-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-color); /* 主題粉紅 */
        background: rgba(252, 60, 123, 0.05); /* 極淡粉紅背景 */
        box-shadow: 0 8px 24px rgba(252, 60, 123, 0.15); /* 粉紅光暈 */
    }

    .card-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

    .topup-card h3 {
        margin: 10px 0 5px;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-main);
    }
    
    .topup-card .desc {
        margin: 0;
        font-size: 0.8rem;
        color: var(--text-sub);
    }

    .gem-icon { font-size: 1.8rem; margin-bottom: 5px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); }
    .gem-icon.large { font-size: 2.2rem; }
    .gem-icon.xlarge { font-size: 2.6rem; }

    /* 推薦方案樣式 (Theme Pink) */
    .topup-card.featured {
        border-color: var(--accent-color);
        background: linear-gradient(160deg, rgba(252, 60, 123, 0.1), rgba(19, 19, 19, 0));
    }
    
    .badge-featured {
        position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
        background: var(--accent-color);
        color: #fff;
        font-size: 0.75rem; font-weight: 600;
        padding: 4px 12px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(252, 60, 123, 0.4);
        white-space: nowrap;
        letter-spacing: 0.5px;
    }

    /* 購買按鈕 */
    .buy-btn {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-main);
        border: none;
        padding: 10px 0;
        border-radius: 12px;
        margin-top: 15px;
        font-weight: 600;
        font-size: 0.95rem;
        width: 100%;
        cursor: pointer;
        transition: all 0.2s;
    }

    .topup-card:hover .buy-btn {
        background: var(--accent-color);
        color: #fff;
        box-shadow: 0 4px 12px rgba(252, 60, 123, 0.3);
    }

    .topup-card.featured .buy-btn {
        background: var(--accent-color);
        color: #fff;
    }
    
    /* 底部說明 */
    .modal-footer-note {
        margin-top: 20px;
        text-align: center;
    }
    .modal-footer-note p {
        font-size: 0.8rem;
        color: var(--text-sub);
        margin: 4px 0;
        line-height: 1.4;
    }

/* =========================================
   探索主頁 (Discovery Home) 樣式
   ========================================= */

/* 區塊通用設定 */
.home-section {
    margin-bottom: 10px; /* 區塊間距 */
}

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

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px;
}

.section-title i {
    color: var(--accent-color);
}

/* More 按鈕 (小而精緻) */
.more-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.2s;
}
.more-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

/* =========================================
   2. 基礎設定 (Base)
   ========================================= */
/* 確保 Tailwind 的深色模式變數能正常運作 (若有自定義變數可放這) */
:root {
    --primary-color: #fc3b7b;
}

/* =========================================
   3. 工具類 (Utilities for New Layout)
   這些是 Tailwind 預設沒有，或是我們自定義的輔助樣式
   ========================================= */

/* [隱藏捲軸但保留功能] - 用於橫向滑動區塊 */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* [邊緣遮罩] - 讓 Tag 標籤列表右側有淡出效果 */
.mask-linear-fade {
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* [篩選按鈕激活狀態] - JS 切換時會加上此 class */
.active-filter {
    background-color: #fc3b7b !important;
    color: white !important;
    border-color: #fc3b7b !important;
}

/* =========================================
   4. 動畫效果 (Animations)
   ========================================= */

/* 內容載入時的淡入效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 篩選面板展開過渡動畫 */
#advanced-filter-panel {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* (選用) 載入中的轉圈圈動畫 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fc3b7b;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.drag-scroll-container {
    cursor: grab; /* 游標變手掌 */
    cursor: -webkit-grab;
    user-select: none; /* 防止拖曳時選取到文字 */
    -webkit-user-select: none;
}

.drag-scroll-container:active {
    cursor: grabbing; /* 按下時變抓取手勢 */
    cursor: -webkit-grabbing;
}

/* 當 body 標籤上有 'hide-stats-mode' 這個 class 時，隱藏所有的數據區塊 */
body.hide-stats-mode .fav-info .fav-stats {
    display: none !important;
}

/* 開關控制區塊的樣式 (讓按鈕好看一點) */
.stats-control {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--border-color);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
}

#toggleStatsBtn {
    /* 1. 重點：把被 Tailwind 關掉的原生樣式強制開回來 */
    appearance: auto !important;
    -webkit-appearance: auto !important; /* 為了相容 Chrome/Safari */

    /* 2. 設定你的變數顏色 */
    accent-color: var(--accent-color) !important;

    /* 3. 調整大小與游標 (因為叫回原生樣式後，大小可能會變回預設) */
    width: 18px; 
    height: 18px;
    cursor: pointer;
    
    /* 4. 微調位置 (選用：如果發現勾選框跟文字沒有對齊) */
    vertical-align: middle;
    margin-top: -2px; 
}

/* =========================================================
   🔥 針對 #tab-search 的手動樣式重置 (Tailwind Preflight Fix)
   因為關閉了全站 Preflight，必須在這裡手動補回關鍵設定
   ========================================================= */

#quick-tags-container {
    padding-right: 50px !important;
}

/* 3. 修復按鈕預設樣式 */
/* 瀏覽器預設按鈕有醜醜的邊框和背景，Tailwind 通常會清掉 */
#tab-search button {
    border-style: solid; /* 確保可以自訂邊框 */
    background-color: transparent; /* 移除預設灰色背景 */
    background-image: none;
    border-color: transparent;
}

#tab-search a {
    text-decoration: none;
    color: transparent;
}


/* 標籤篩選列 */
.tag-filter-container {
    padding: 10px;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent;
}

.tag-btn {
    /* 1. 使用 Flexbox 強制內容對齊 */
    display: inline-flex; 
    align-items: center;      /* 垂直置中 */
    justify-content: center;  /* 水平置中 */
    
    /* 2. 強制設定高度 (重要！) */
    height: 32px;             /* 設定一個固定高度 */
    line-height: 1;           /* 重設行高，避免字體撐開 */
    
    /* 3. 原有的樣式保持 */
    background: #2a2a2a;
    color: #eeeeee;
    border: 1px solid #444;
    padding: 0 14px;          /* 左右內距 */
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;           /* 防止被擠壓 */
    
    /* 4. 解決 Emoji 在某些手機會稍微偏上的問題 */
    vertical-align: middle;
}

.tag-btn * {
    pointer-events: none; /* 讓點擊事件穿透文字，直接點到按鈕 */
}

.tag-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.tag-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #333;
    color: white;
    border: 1px solid #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* 右鍵選單 */
.menu-header {
    background: #222;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #aaa;
    border-bottom: 1px solid #333;
}
.menu-item {
    padding: 12px;
    color: var(--text-sub);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.menu-item:hover { background: #333; }
.menu-item.selected { color: #ff4081; }

/* 彈窗 */
.modal-tag {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.modal-tag-content {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 12px;
    width: 80%;
    max-width: 300px;
    text-align: center;
    color: var(--text-main);
}
.modal-tag-content input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    background: #333;
    border: 1px solid var(--border-color);
    color: white;
    border-radius: 6px;
}

/* 卡片左下角小標籤 */
.card-tag-indicators {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 5;
    max-width: 90%;
}
.mini-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 4px;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* 標籤列容器 */
.tag-filter-container {
    padding: 12px 10px;        /* 增加一點內距 */
    margin-bottom: 10px;       /* 與下方卡片保持距離 */
    overflow-x: auto;          /* 允許橫向滑動 */
    white-space: nowrap;       /* 不換行 */
    display: flex;             /* 讓按鈕橫排 */
    align-items: center;       /* 垂直置中 */
    gap: 8px;                  /* 按鈕之間的間距 */
    background: rgba(0,0,0,0.2); /* 加上一點深色背景，確保看得到 */
    border-radius: 8px;
}

/* 管理列表的單個項目 */
.manage-tag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--input-bg);
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.manage-tag-name {
    color: var(--text-sub);
    font-size: 0.95rem;
}

.manage-actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 1rem;
    padding: 2px;
    transition: 0.2s;
}

.icon-btn:hover { color: white; }
.icon-btn.delete:hover { color: #ff4444; } /* 刪除變紅色 */
.icon-btn.edit:hover { color: #44aaff; }   /* 編輯變藍色 */

/* 頁尾連結區塊的容器 */
.footer-links {
    margin-top: 20px;       /* 與上方登出按鈕保持一點距離 */
    text-align: center;     /* 文字置中 */
    font-size: 12px;        /* 字體縮小，讓它看起來像次要資訊 */
    color: #888;            /* 使用灰色，不要太搶眼 */
}

/* 設定連結的樣子 */
.footer-links a {
    color: #888;            /* 連結預設是灰色 */
    text-decoration: none;  /* 去掉底線 */
    transition: color 0.3s; /* 讓滑鼠移過去的變色有動畫效果 */
}

/* 滑鼠移上去時變色 */
.footer-links a:hover {
    color: #333;            /* 變成深色 (依你的主題可改成藍色或亮色) */
    text-decoration: underline; /* 滑鼠移上去顯示底線 */
}

/* 分隔線 (|) 的樣式 */
.footer-links .separator {
    margin: 0 8px;          /* 左右留點空隙 */
    color: #ccc;            /* 分隔線顏色淡一點 */
}

/* 首頁 ICON*/
.icon-hot-fire::before {
    content: "local_fire_department"; 
}

.icon-male::before {
    content: "male";
}

.icon-female::before {
    content: "female";
}

.icon-update::before {
    content: "update";
}

/* 頭像保護標籤 (Flat Style) */
.avatar-protection-badge {
    /* 佈局設定 */
    display: inline-flex;       /* 讓標籤可以跟名字排在同一行 */
    align-items: center;        /* 垂直置中 */
    justify-content: center;
    
    /* 顏色設定 */
    background-color: var(--accent-color); /* 使用你的主題色 #fc3c7b */
    color: #ffffff;             /* 固定白色字，確保對比度 */
    
    /* 形狀與邊框 */
    border-radius: 4px;        /* 微圓角，配合你的現代風格 (想要膠囊狀可改成 12px) */
    border: 1px solid var(--accent-color); /* 邊框同色 */
    
    /* 大小與間距 */
    font-size: 0.75rem;         /* 字體比名字小一點 */
    font-weight: 600;           /* 加粗確保可讀性 */
    padding: 2px 6px;           /* 輕巧的內距 */
    margin-left: 8px;           /* 與名字拉開一點距離 */
    
    /* 其他 */
    box-shadow: none;           /* ❌ 移除陰影 */
    white-space: nowrap;        /* 防止文字換行 */
    vertical-align: middle;     /* 對齊文字中線 */
    cursor: help;               /* 滑鼠移上去顯示「說明」游標 */
    opacity: 0.9;               /* 稍微一點點透，讓顏色不要太刺眼 (可選) */
}

/* 為了讓圖示(icon)跟文字排版更好看 (如果有加 icon) */
.avatar-protection-badge i {
    font-size: 0.9em;
    margin-right: 3px;
}

/* 底部導覽列的紅點樣式 */
.bottom-nav-dot {
    position: absolute;
    top: 6px;          /* 距離頂部的距離 (可微調) */
    left: 55%;         /* 靠左 55% 的位置 (剛好在 icon 右邊) */
    width: 8px;        /* 紅點大小 */
    height: 8px;
    background-color: #ff3b30; /* 紅色 */
    border-radius: 50%; /* 圓形 */
    z-index: 10;       /* 確保浮在最上面 */
    box-shadow: 0 0 0 1px white; /* 加一點白邊，讓紅點更明顯 */
}