/* User 页面公共样式 */
/* ========== 认证容器 ========== */
.auth-container { min-height: calc(100vh - 200px); padding: 3rem 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
/* ========== 认证卡片 ========== */
.auth-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden; animation: slideUp 0.5s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* ========== 认证头部 ========== */
.auth-header { background: linear-gradient(135deg, #FFA500 0%, #FFB347 100%); color: #fff; padding: 2rem; text-align: center; }
.auth-title { font-size: 1.75rem; font-weight: 700; margin: 0; display: flex; align-items: center; justify-content: center; }
.auth-subtitle { margin: 0.5rem 0 0 0; opacity: 0.9; font-size: 0.95rem; }
/* ========== 认证主体 ========== */
.auth-body { padding: 2rem; }
/* ========== 表单样式 ========== */
.form-label { font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.form-label i { color: #FFA500; }
.form-control { border: 2px solid #e9ecef; border-radius: 8px; padding: 0.75rem 1rem; transition: all 0.3s ease; }
.form-control:focus { border-color: #FFA500; box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.25); }
.form-check-input:checked { background-color: #FFA500; border-color: #FFA500; }
/* ========== 密码输入 ========== */
.password-input-wrapper { position: relative; }
.password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); border: none; background: none; color: #666; padding: 0.25rem 0.5rem; z-index: 10; }
.password-toggle:hover { color: #FFA500; }
.password-toggle:focus { box-shadow: none; outline: none; }
/* ========== 认证按钮 ========== */
.btn-auth { background: linear-gradient(135deg, #FFA500 0%, #FFB347 100%); border: none; border-radius: 8px; padding: 0.75rem; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; }
.btn-auth:hover { background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3); }
.btn-auth:active { transform: translateY(0); }
/* ========== 认证链接 ========== */
.auth-link-text { color: #666; margin: 0; }
.auth-link-text a { color: #FFA500; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.auth-link-text a:hover { color: #FF8C00; text-decoration: underline; }
/* ========== 警告框样式 ========== */
.alert { border-radius: 8px; border: none; }
/* ========== 收藏页面样式 ========== */
.favorites-container { min-height: calc(100vh - 200px); padding: 2rem 0; }
.favorites-header { background: linear-gradient(135deg, #FFA500 0%, #FFB347 100%); color: #fff; padding: 2rem; border-radius: 16px; margin-bottom: 2rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); }
.favorites-title { font-size: 1.75rem; font-weight: 700; margin: 0; display: flex; align-items: center; }
.filters-section { background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-bottom: 2rem; }
.filter-group { margin-bottom: 1rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-label { font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-btn { padding: 0.5rem 1rem; border: 1px solid #dee2e6; background: #fff; color: #333; border-radius: 20px; text-decoration: none; transition: all 0.3s; font-size: 0.9rem; }
.filter-btn:hover { background: #f8f9fa; border-color: #FFA500; color: #FFA500; }
.filter-btn.active { background: #FFA500; border-color: #FFA500; color: #fff; }
.empty-state { text-align: center; padding: 4rem 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.empty-state-icon { font-size: 4rem; color: #dee2e6; margin-bottom: 1rem; }
.empty-state-text { color: #6c757d; font-size: 1.1rem; margin-bottom: 1rem; }
.article-card { position: relative; }
.favorite-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 165, 0, 0.9); color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; z-index: 10; }
/* ========== 设置页面样式 ========== */
.settings-container { min-height: calc(100vh - 200px); padding: 3rem 0; }
.settings-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden; animation: slideUp 0.5s ease-out; }
.settings-header { background: linear-gradient(135deg, #FFA500 0%, #FFB347 100%); color: #fff; padding: 2rem; text-align: center; }
.settings-title { font-size: 1.75rem; font-weight: 700; margin: 0; display: flex; align-items: center; justify-content: center; }
.settings-subtitle { margin: 0.5rem 0 0 0; opacity: 0.9; font-size: 0.95rem; }
.settings-body { padding: 2rem; }
.settings-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e9ecef; }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.section-title { font-size: 1.25rem; font-weight: 600; color: #333; margin-bottom: 1.5rem; display: flex; align-items: center; }
.section-title i { color: #FFA500; margin-right: 0.5rem; }
/* ========== 响应式优化 ========== */
@media (max-width: 768px) { .auth-container { padding: 2rem 0; min-height: calc(100vh - 150px); } .auth-header { padding: 1.5rem; } .auth-title { font-size: 1.5rem; } .auth-body { padding: 1.5rem; } .favorites-title { font-size: 1.5rem; } .settings-container { padding: 2rem 0; min-height: calc(100vh - 150px); } .settings-header { padding: 1.5rem; } .settings-title { font-size: 1.5rem; } .settings-body { padding: 1.5rem; } }