/* static/css/auth.css */

/* 1. 背景遮罩 */
.auth-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* 毛玻璃特效 */
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}

.auth-overlay.show { opacity: 1; visibility: visible; }

/* 2. 模态框主体 */
.auth-box {
    width: 360px;
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 30px;
    transform: translateY(-20px); transition: transform 0.3s ease;
    position: relative;
}

.auth-overlay.show .auth-box { transform: translateY(0); }

/* 关闭按钮 */
.auth-close {
    position: absolute; top: 15px; right: 15px;
    color: #666; cursor: pointer; font-size: 20px;
}
.auth-close:hover { color: #fff; }

/* 标题 */
.auth-title {
    font-size: 22px; font-weight: bold; color: #fff;
    margin-bottom: 25px; text-align: center;
}

/* 表单组件 */
.form-group { margin-bottom: 15px; }
.form-label { display: block; color: #aaa; font-size: 12px; margin-bottom: 6px; }
.form-input {
    width: 100%; padding: 10px; box-sizing: border-box;
    background-color: #2a2a2a; border: 1px solid #333;
    color: #fff; border-radius: 4px; outline: none; font-size: 14px;
    transition: 0.2s;
}
.form-input:focus { border-color: #2962ff; background-color: #333; }

/* 提交按钮 */
.submit-btn {
    width: 100%; padding: 12px; margin-top: 10px;
    background-color: #2962ff; color: white; border: none;
    border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;
    transition: background 0.2s;
}
.submit-btn:hover { background-color: #1e4bd1; }
.submit-btn:disabled { background-color: #444; cursor: not-allowed; }

/* 底部切换链接 */
.auth-switch {
    margin-top: 20px; text-align: center; font-size: 13px; color: #666;
}
.auth-switch span { color: #2962ff; cursor: pointer; font-weight: bold; margin-left: 5px; }
.auth-switch span:hover { text-decoration: underline; }

/* 错误提示 */
.auth-error {
    color: #ff5252; font-size: 12px; margin-bottom: 15px; 
    text-align: center; display: none; background: rgba(255, 82, 82, 0.1);
    padding: 8px; border-radius: 4px;
}

/* File: static/css/auth.css (关键修复部分) */

.modal {
    /* ------------------------------------------------ */
    /* 【核心修复】必须脱离文档流，否则会破坏主页面的布局 */
    position: fixed; 
    /* ------------------------------------------------ */
    
    z-index: 1000; /* 确保它在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* 半透明背景 */
    display: flex;
    justify-content: center; /* 居中内容 */
    align-items: center; /* 居中内容 */
}

.modal.hidden {
    display: none;
}