/* ==========================================================================
   独立模块：用户中心样式 (少数派留白风格 & 下拉菜单)
   ========================================================================== */

/* --- 1. 居中模态弹窗 --- */
.sf-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 9999; visibility: hidden; opacity: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.sf-modal-overlay.is-active { visibility: visible; opacity: 1; }

.sf-modal-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65); /* 纯净暗色遮罩 */
}

.sf-modal-panel {
    position: relative; width: 100%; 
    /* 👇 画幅拉大，留白的核心 👇 */
    max-width: 680px; 
    background: #ffffff; border-radius: 20px; margin: 0 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
    transform: scale(0.95) translateY(20px); 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}
.sf-modal-overlay.is-active .sf-modal-panel { transform: scale(1) translateY(0); }

/* 关闭按钮，像参考图一样放在最角落 */
.sf-modal-close {
    position: absolute; top: 20px; right: 20px;
    background: transparent; border: none; width: 40px; height: 40px; 
    font-size: 26px; color: #999; cursor: pointer; transition: all 0.3s; z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.sf-modal-close:hover { color: #1d1d1f; transform: rotate(90deg); }

/* 👇 核心排版：利用 Flex 约束中间内容宽度 👇 */
.sf-modal-content-wrap { position: relative; }
.sf-modal-state { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* 强行让内容居中 */
    padding: 80px 20px; /* 上下留出巨大空白 */
    display: none; 
    animation: sfFadeInUp 0.4s ease forwards; 
}
.sf-modal-state.is-active { display: flex; }
@keyframes sfFadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* 限制所有内容的宽度，营造“窄焦点” */
.sf-login-header, 
#sf-loginform, 
#sf-registerform, 
#sf-lostpasswordform, 
.sf-login-links,
.sf-error-msg {
    width: 100%;
    max-width: 360px; /* 中间区域的宽度死死卡在这里 */
}

.sf-login-header { text-align: center; margin-bottom: 40px; }
.sf-login-header h3 { font-size: 28px; color: #1d1d1f; margin: 0 0 10px; font-weight: 700; letter-spacing: 1px;}
.sf-login-header p { color: #86868b; font-size: 14px; margin: 0; }

.sf-error-msg { color: #D71A1B; font-size: 13px; text-align: center; margin-bottom: 20px; background: #fee2e2; padding: 12px; border-radius: 8px;}

/* 隐藏所有文字标签，全靠 Placeholder */
.sf-modal-state label[for="user_login"],
.sf-modal-state label[for="user_pass"],
.sf-modal-state label[for="user_email"],
.sf-modal-state label[for="user_login_lost"] { 
    display: none !important; 
}

#sf-loginform p, #sf-registerform p, #sf-lostpasswordform p { margin-bottom: 20px; }

/* 像参考图一样：胖胖的居中输入框 */
.sf-modal-state input[type="text"], 
.sf-modal-state input[type="password"], 
.sf-modal-state input[type="email"] {
    width: 100%; background: #f4f5f7; border: 2px solid transparent; border-radius: 8px;
    padding: 15px 20px; font-size: 15px; outline: none; transition: 0.3s; box-sizing: border-box;
    text-align: center; /* 【精髓】文字居中 */
}
.sf-modal-state input[type="text"]:focus, .sf-modal-state input[type="password"]:focus, .sf-modal-state input[type="email"]:focus {
    background: #fff; border-color: var(--sf-accent-red, #D71A1B); box-shadow: 0 0 0 3px rgba(215,26,27,0.1);
}
.sf-modal-state input::placeholder { color: #aaa; font-weight: 400; }

.sf-reg-tips { font-size: 13px; color: #86868b; text-align: center;}

/* 保持登录状态选项 (精修文字样式，与底部链接对齐) */
.forgetmenot { 
    display: flex; align-items: left; justify-content: left; 
    margin-bottom: 25px !important; width: 100%;
}
.forgetmenot label {
    display: flex !important; align-items: left; 
    font-size: 13px !important; /* 和底部链接同等大小 */
    color: #86868b !important; /* 变成低调的高级灰 */
    font-weight: 400 !important; /* 取消粗体 */
    cursor: pointer;
}
.forgetmenot input[type="checkbox"] { 
    margin-right: 5px; 
    transform: scale(0.9); 
}

/* 像参考图一样：红色大按钮 */
.submit { margin-bottom: 0 !important; width: 100%; }
.sf-modal-state input[type="submit"] {
    width: 100%; background: var(--sf-accent-red, #D71A1B); color: #fff; border: none; border-radius: 8px;
    padding: 16px 24px; font-weight: 500; font-size: 16px; letter-spacing: 1px; cursor: pointer; transition: 0.3s;
}
.sf-modal-state input[type="submit"]:hover { background: #b51516; }

/* 底部链接排版控制 */
.sf-login-links { clear: both; padding-top: 30px; display: flex; font-size: 13px; width: 100%; }
.sf-links-between { justify-content: space-between; }
.sf-links-center { justify-content: center; }
.sf-login-links a { color: #86868b; transition: 0.3s; text-decoration: none; }
.sf-login-links a:hover { color: var(--sf-accent-red, #D71A1B); }


/* --- 2. 已登录头像下拉菜单 --- */
.sf-user-dropdown-menu {
    position: absolute; top: calc(100% + 15px); right: 0;
    width: 220px; background: #fff; border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1000;
}
.sf-user-dropdown-menu.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.user-action-wrap { position: relative; } 
.sf-dropdown-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.sf-user-name { font-weight: 600; color: #1d1d1f; font-size: 15px; }
.sf-user-role { font-size: 12px; color: #86868b; margin-top: 2px; }
.sf-dropdown-list { list-style: none; padding: 10px; margin: 0; }
.sf-dropdown-list li a {
    display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 8px;
    color: #666; font-size: 14px; transition: 0.2s;
}
.sf-dropdown-list li a:hover { background: #f4f5f7; color: #1d1d1f; }
.sf-dropdown-list .sf-logout-item a { color: var(--sf-accent-red, #D71A1B); }
.sf-dropdown-list .sf-logout-item a:hover { background: rgba(215,26,27,0.05); }