/* 全局樣式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif;
    -webkit-tap-highlight-color: transparent; 
}

/* body, html 頁面整體佈局與背景設定 */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #07237D; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- 響應式容器和分層 --- */
.container {
    width: 100vw;
    min-height: 100vh; 
    display: flex;
    flex-direction: column; 
    position: relative; 
}

/* 頂部深藍色區塊 (.top-blue-bg) 樣式 */
.top-blue-bg {
    height: 28.85vh;
    min-height: 150px;
    color: white;
    position: relative; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 0; 
}

/* 標題文字 (.header-text) 樣式 */
.header-text {
    font-size: 64px; 
    font-weight: bold;
    color: white;
    
    position: static; 
    left: auto; 
    top: auto; 
    width: auto; 
    transform: none; 
    
    margin-top: 113px;
}

/* 中間白色區塊 (.middle-white-area) 樣式及陰影 */
.middle-white-area {
    flex-grow: 1; 
    background-color: #FFFFFF;
    
    box-shadow: 0px 30px 11px 2px rgba(0, 0, 0, 0.25); 
    
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px; 
    position: relative; 
    z-index: 2;
}
/* 底部深藍色區塊 (.bottom-blue-bg) 樣式與分層 */
.bottom-blue-bg {
    height: 9.97vh;
    min-height: 50px;
    background-color: #07237D;
    position: relative;
    z-index: 1;
}

/* --- 表單內部樣式 (登入畫面專屬調整) --- */

/* 表單容器 (.signup-form-final) 佈局 (寬度調整至 350px) */
.signup-form-final {
    width: 350px; 
    display: flex;
    flex-direction: column;
    margin: 0 auto; 
    align-items: center; 
}

/* 表單組 (.form-group-final) 佈局 (寬度調整至 350px) */
.form-group-final {
    display: flex;
    align-items: center;
    
    justify-content: flex-start; 
    
    width: 350px;
    margin-bottom: 25px;
}

/* 標籤 (label) 樣式 (寬度及間距調整) */
.form-group-final label {
    font-size: 20px; 
    font-weight: bold;
    color: #333;
    
    width: 80px; 
    
    text-align: right; /* 帳號/密碼標籤是靠右對齊的 */
    
    margin-right: 30px; 
    padding: 0;
    
    white-space: nowrap; 
}

/* 輸入框 (input) 樣式 (寬度調整至 200px) */
.form-group-final input {
    width: 200px; 
    height: 39px; 
    padding: 5px 5px; 
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin: 0; 
}

/* 輸入框 placeholder 樣式 */
#username::placeholder {
    color: #999;
    font-size: 14px;
    text-align: center;
}

/* 確認按鈕 (.confirm-button-final) 樣式 */
.confirm-button-final {
    width: 100px;
    height: 42px; 
    display: block;
    
    margin-top: 15px;
    margin-left: auto; 
    margin-right: auto; 
    
    border: none; 
    background: linear-gradient(to bottom, #BFDDFF, #85B9E8); 
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #333; 
    cursor: pointer;
    box-shadow: 3px 4px 3px 0px rgba(0, 0, 0, 0.25); 
    transition: background-color 0.3s;
}

/* 確認按鈕 Hover 效果 */
.confirm-button-final:hover {
    background: linear-gradient(to bottom, #AECBE8, #69A3D3);
}

/* --- 登入頁面專屬樣式 --- */

/* 【MFA 驗證碼欄位修正：強制文字左對齊 & 調整寬度】 */
#mfa-group label {
    /* 保持 font-size: 24px 以符合帳號/密碼標籤 */
    font-size: 24px; 
    
    /* 關鍵：讓 MFA 標籤文字靠左 */
    text-align: left; 
    
    /* 擴大寬度 */
    width: 120px; /* 擴大到 120px 容納長文字 */
    
    /* 保持間距 */
    margin-right: 30px; 
    
    /* 🚨 關鍵調整：將標籤容器向右推 40px，讓它的文字內容與上方標籤文字左側對齊 */
    /* 這是補償上方標籤文字在 80px 容器內右對齊時的留白 */
    margin-left: 40px; 
}

/* 確保 MFA 輸入框的寬度縮短以適應加長的標籤 */
#mfa-group input {
    /* 最終計算出的寬度：120px */
    width: 120px;
}

/* 輔助連結和記住我區塊 (.login-links) 樣式 (最終修正：避免換行並精準右對齊) */
.login-links {
    /* 確保寬度足夠容納連結文字，且 margin-left 確保右側對齊 */
    width: 190px; 
    
    display: flex;
    justify-content: flex-end; /* 讓連結靠右對齊 */
    
    font-size: 20px; 
    margin-bottom: 30px; 
    color: #555;
    
    /* 重新計算 margin-left：120px，確保右側與輸入框切齊 */
    margin-left: 120px; 
    
    align-self: flex-start;
    padding: 0;
}

/* 輔助連結 (a) 樣式 */
.login-links a {
    color: #555;
    text-decoration: none;
    margin-right: 15px; 
    /* 確保連結文字不被壓縮換行 */
    white-space: nowrap; 
}

/* 確保最右側的連結沒有多餘邊距 */
.login-links a:last-child {
    margin-right: 0;
}

/* 記住我 checkbox 樣式 */
.login-links input[type="checkbox"] {
    margin-right: 5px;
}

/* 按鈕群組容器 (.button-group) 佈局 (寬度調整至 350px) */
.button-group {
    width: 350px; 
    display: flex;
    justify-content: center; 
    margin-top: 15px;
}

/* 登入 (.login-button) 和註冊 (.register-button) 按鈕共同樣式 */
.login-button, .register-button {
    width: 100px;
    height: 42px; 
    border: none; 
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #333; 
    cursor: pointer;
    box-shadow: 3px 4px 3px 0px rgba(0, 0, 0, 0.25); 
    transition: background-color 0.3s;
    margin: 0 10px; 
}

/* 登入按鈕背景色 */
.login-button {
    background: linear-gradient(to bottom, #BFDDFF, #85B9E8); 
}
/* 登入按鈕 Hover 效果 */
.login-button:hover {
    background: linear-gradient(to bottom, #AECBE8, #69A3D3);
}

/* 註冊按鈕背景色 */
.register-button {
    background: linear-gradient(to bottom, #BFDDFF, #85B9E8); 
}
/* 註冊按鈕 Hover 效果 */
.register-button:hover {
    background: linear-gradient(to bottom, #AECBE8, #69A3D3);
}