/* login.css */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft JhengHei", sans-serif; }

body { height: 100vh; display: flex; align-items: center; justify-content: center; background: #f0f2f5; }

.login-container {
    display: flex;
    width: 900px;
    height: 550px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* 左側品牌 */
.login-branding {
    flex: 1;
    background: linear-gradient(135deg, #1890ff 0%, #003a8c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 40px;
}

.branding-content h1 { font-size: 3rem; margin-bottom: 10px; }

/* 右側表單 */
.login-form-area { flex: 1; padding: 50px; display: flex; align-items: center; }
.form-wrapper { width: 100%; }
h2 { color: #333; margin-bottom: 8px; }
.subtitle { color: #8c8c8c; margin-bottom: 30px; font-size: 14px; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: #555; font-weight: bold; }
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;
}
.input-group input:focus { border-color: #1890ff; outline: none; box-shadow: 0 0 0 2px rgba(24,144,255,0.2); }

.form-options { display: flex; justify-content: space-between; margin-bottom: 25px; font-size: 13px; color: #666; }

button {
    width: 100%;
    padding: 12px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
button:hover { background: #40a9ff; }

.login-footer { margin-top: 40px; text-align: center; color: #bfbfbf; font-size: 12px; }

/* 登入按鈕內的小轉圈 */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
}

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

/* 容器確保定位基準 */
.password-container {
    width: 100%;
    display: flex;
    align-items: center;
}

/* 眼睛按鈕的樣式 */
.eye-btn {
    position: absolute;
    right: 12px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: #94a3b8; /* 預設深灰色 */
    transition: color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
}

.eye-btn:hover {
    color: #3b82f6; /* 滑過時變成診所藍 */
}

.eye-btn:active {
    transform: scale(0.9); /* 點擊時輕微縮放，增加手感 */
}

/* 確保輸入框不會被眼睛蓋到字 */
#password {
    width: 100%;
    padding-right: 45px !important; 
}