.auth-page {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(135deg, #0f2744 0%, #0d6e7a 50%, #14a3b5 100%);
}

.auth-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    color: #fff;
}

.auth-left h1 { font-size: 42px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
.auth-left p { font-size: 16px; opacity: .85; max-width: 420px; line-height: 1.7; }
.auth-features { margin-top: 40px; }
.auth-feature { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 14px; }
.auth-feature i { width: 36px; height: 36px; background: rgba(255,255,255,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; }

.auth-right {
    width: 480px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    box-shadow: -20px 0 60px rgba(0,0,0,.2);
}

.auth-box { width: 100%; max-width: 380px; }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo .logo-icon {
    width: 56px; height: 56px; background: linear-gradient(135deg, #0d6e7a, #14a3b5);
    border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; margin-bottom: 12px;
}
.auth-logo h2 { font-size: 22px; color: #1e293b; }
.auth-logo span { font-size: 13px; color: #64748b; }

.auth-box h3 { font-size: 20px; margin-bottom: 8px; }
.auth-box .subtitle { color: #64748b; font-size: 13px; margin-bottom: 28px; }

.auth-alert {
    padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 13px;
    display: flex; align-items: center; gap: 10px;
}
.auth-alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.auth-alert.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.auth-links { text-align: center; margin-top: 24px; font-size: 13px; color: #64748b; }
.auth-links a { color: #0d6e7a; text-decoration: none; font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .auth-left { display: none; }
    .auth-right { width: 100%; }
}