/* === 電信助手 全域基礎版型 === */

:root {
    --primary-red: #e60012; 
    --bg-color: #f4f4f7;
    --card-bg: #ffffff;
    --text-main: #333333;
    --text-sub: #666666;
}

/* 1. 鎖死網頁底層，禁止滑動 */
body {
    font-family: -apple-system, "Noto Sans TC", sans-serif;
    background-color: #e2e8f0; 
    margin: 0; 
    padding: 0;
    color: var(--text-main);
    overscroll-behavior-y: none; 
    /* 🌟 新增下面這兩行，強制鎖死畫面不准滑動 */
    overflow: hidden; 
    height: 100vh;
}

/* 2. 容器調整為固定排版，不准置中亂飄 */
.container { 
    padding: 40px 20px 20px 20px; /* 頂部留白 40px，讓它稍微靠上但不要貼死 */
    max-width: 480px; 
    margin: 0 auto; 
    height: 100vh; /* 改成絕對高度 100vh */
    background-color: var(--bg-color); 
    box-shadow: 0 0 30px rgba(0,0,0,0.08); 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 🌟 改回靠上排列，不使用置中 */
    box-sizing: border-box; /* 確保 padding 不會撐破 100vh */
}

/* =========================================
   首頁專屬版型 (標題、登出按鈕與六宮格)
========================================= */
.header { 
    margin-bottom: 25px; 
    margin-top: 10px; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
}
.header h1 { 
    font-size: 24px; 
    margin: 0; 
    color: var(--text-main); 
}

/* 登出按鈕 */
.logout-btn {
    background: #f1f3f5; 
    border: 1px solid #ddd; 
    padding: 6px 12px; 
    border-radius: 8px; 
    font-size: 13px; 
    color: var(--text-sub); 
    cursor: pointer; 
    font-weight: bold;
}
.logout-btn:active {
    background: #e2e6ea;
}

.tool-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}

/* 六宮格按鈕 (恢復漂亮的白色立體卡片) */
.tool-btn {
    background: var(--card-bg); 
    border: none; /* 拿掉邊框，改用陰影 */
    padding: 20px 10px;
    border-radius: 20px; 
    text-align: center; 
    text-decoration: none; 
    color: var(--text-main); 
    transition: transform 0.1s, box-shadow 0.1s; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); /* 微弱的立體浮雕感 */
}

.tool-btn:active { 
    transform: scale(0.95); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* 按下時的真實物理反饋 */
}

.icon { font-size: 30px; }
.label { font-weight: 600; font-size: 15px; }

/* =========================================
   動態抽屜 (Bottom Sheet) 與遮罩 (Overlay)
========================================= */
.overlay {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 100; 
    display: none;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

.bottom-sheet {
    position: fixed; 
    bottom: 0; left: 50%;
    transform: translateX(-50%) translateY(100%); 
    width: 100%; 
    max-width: 500px;
    background: white; 
    border-radius: 20px 20px 0 0; 
    z-index: 101;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    padding: 0; 
    overflow: hidden; 
    height: 92vh; 
}
/* --- 加強版 標題列 (確保左右對齊) --- */
.sheet-header {
    display: flex; 
    justify-content: space-between; /* 讓標題在左，按鈕在右 */
    align-items: center;
    padding: 15px 20px; 
    background: white;
    border-bottom: 1px solid #eee;
    position: sticky; 
    top: 0; 
    z-index: 10;
    /* 確保寬度撐滿，按鈕才推得過去 */
    width: 100%; 
    box-sizing: border-box; 
}

.sheet-header h3 { 
    margin: 0; 
    font-size: 18px; 
    color: var(--text-main);
}

/* --- 加強版 返回/關閉按鈕 --- */
.close-btn {
    background: #f1f3f5; 
    border: none; 
    padding: 8px 16px; /* 稍微加寬一點更好點擊 */
    border-radius: 10px; 
    cursor: pointer; 
    font-weight: bold; 
    color: var(--text-sub);
    font-size: 14px;
    transition: background 0.2s;
    /* 取消手機預設的點擊灰色背景 */
    -webkit-tap-highlight-color: transparent; 
}

.close-btn:active {
    background: #e2e6ea;
    transform: scale(0.95);
}
/* =========================================
   底部版權與版本號
========================================= */
/* 3. 把版本號自動推到畫面最下方 */
.footer {
    text-align: center;    
    font-size: 12px;       
    color: var(--text-sub);
    opacity: 0.7;          
    /* 🌟 神奇魔法：利用 auto 把自己往下推到螢幕最底端 */
    margin-top: auto;      
    margin-bottom: 10px;   
}