/**
 * 登录页面样式 — Refined Luxury
 * 双栏布局：左侧品牌展示，右侧登录表单
 * 主题感知：亮色 / 暗色 / 护眼
 */

/* ==================== 页面布局 ==================== */
.login-page {
    min-height: 100vh;
    display: flex;
    background-color: var(--bg-primary);
    transition: background-color var(--transition-normal);
}

/* ==================== 左侧品牌栏 ==================== */
.login-brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, #0f2035 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* 品牌栏装饰纹理 */
.login-brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(200, 150, 62, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* 品牌栏底部装饰线 */
.login-brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 150, 62, 0.4), transparent);
}

.login-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 400px;
}

.login-brand-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto var(--spacing-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
    box-shadow:
        0 16px 36px rgba(6, 15, 28, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-brand-icon svg {
    width: 62px;
    height: 62px;
}

.brand-icon-frame {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(246, 239, 228, 0.16);
    stroke-width: 1.5;
}

.brand-icon-axis {
    fill: none;
    stroke: rgba(246, 239, 228, 0.32);
    stroke-width: 2;
    stroke-linecap: round;
}

.brand-icon-bar {
    stroke-width: 0;
}

.brand-icon-bar-1 {
    fill: rgba(240, 234, 224, 0.78);
}

.brand-icon-bar-2 {
    fill: rgba(198, 166, 104, 0.92);
}

.brand-icon-bar-3 {
    fill: rgba(240, 234, 224, 0.56);
}

.brand-icon-trend {
    fill: none;
    stroke: #f4ede0;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-brand h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.login-brand p {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xl);
}

.login-brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.login-brand-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.login-brand-features li svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

/* ==================== 每日格言 ==================== */
.login-daily-quote {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.login-daily-quote-icon {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    margin-bottom: 4px;
    user-select: none;
}

.login-daily-quote-text {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* ==================== 右侧表单栏 ==================== */
.login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 400px;
}

/* ==================== 表单卡片 ==================== */
.login-card {
    background: transparent;
}

/* Logo 区域 */
.login-logo {
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

.login-logo h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-tight);
}

.login-logo p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ==================== 表单样式 ==================== */
.login-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.login-form .form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.login-form .form-label.required::after {
    content: ' *';
    color: var(--color-danger);
}

.login-form .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}

.login-form .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}

.login-form .form-control::placeholder {
    color: var(--text-tertiary);
}

.login-form .form-control.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-bg);
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* ==================== 登录按钮 ==================== */
.login-form .btn-login {
    width: 100%;
    padding: 13px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-body);
    letter-spacing: var(--letter-spacing-wide);
    color: #ffffff;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: var(--spacing-sm);
    position: relative;
    overflow: hidden;
}

.login-form .btn-login:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.login-form .btn-login:active {
    transform: translateY(0);
    background-color: var(--color-primary-active);
}

.login-form .btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ==================== 切换链接 ==================== */
.login-switch {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.login-switch a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--spacing-xs);
    transition: color var(--transition-fast);
}

.login-switch a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==================== 注册提示 ==================== */
.register-notice {
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-left: 3px solid var(--color-warning);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

/* loading spinner 已移除，登录时仅通过 disabled 状态反馈 */

/* ==================== 响应式设计 ==================== */
@media (max-width: 900px) {
    .login-page {
        flex-direction: column;
    }

    .login-brand {
        min-height: auto;
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .login-brand-features {
        display: none;
    }

    .login-daily-quote {
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
    }

    .login-brand h1 {
        font-size: var(--font-size-2xl);
    }

    .login-form-side {
        min-height: auto;
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .login-brand {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .login-brand-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .login-brand h1 {
        font-size: var(--font-size-xl);
    }

    .login-form-side {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .login-logo h1 {
        font-size: var(--font-size-xl);
    }
}

/* ==================== 暗色主题 ==================== */
[data-theme="dark"] .login-brand {
    background: linear-gradient(160deg, #1a2e42 0%, #152238 50%, #0f1a2a 100%);
}

[data-theme="dark"] .login-brand::after {
    background: linear-gradient(90deg, transparent, rgba(126, 184, 229, 0.3), transparent);
}

[data-theme="dark"] .login-brand-icon {
    background: rgba(126, 184, 229, 0.1);
    border-color: rgba(126, 184, 229, 0.15);
}

/* ==================== 护眼主题 ==================== */
[data-theme="eye-care"] .login-brand {
    background: linear-gradient(160deg, #4a7a5a 0%, #3a6648 50%, #2d5238 100%);
}

[data-theme="eye-care"] .login-brand::after {
    background: linear-gradient(90deg, transparent, rgba(154, 122, 74, 0.4), transparent);
}