:root {
    --primary: #1d4ed8;
    --primary-dark: #0f2f64;
    --ink: #0f172a;
    --muted: #64748b;
    --surface: #ffffff;
    --line: #e5e7eb;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    font-family: 'Cairo', sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(29, 78, 216, .18), transparent 28%),
        radial-gradient(circle at 85% 70%, rgba(20, 184, 166, .20), transparent 30%),
        linear-gradient(135deg, #eef4ff 0%, #f8fafc 55%, #eefdfb 100%);
    color: var(--ink);
}
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 520px) 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px clamp(24px, 5vw, 90px);
}
.login-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 34px;
    padding: 38px;
    box-shadow: 0 30px 80px rgba(15,23,42,.14);
    backdrop-filter: blur(18px);
}
.login-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.brand-mark-lg {
    width: 62px; height: 62px; border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #1d4ed8, #0f766e);
    color: #fff; font-weight: 800; font-size: 32px;
    box-shadow: 0 16px 40px rgba(29,78,216,.28);
}
.login-brand h1 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: .5px; }
.login-brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.login-copy h2 { font-size: 28px; font-weight: 800; margin: 18px 0 10px; }
.login-copy p { color: var(--muted); line-height: 1.9; margin-bottom: 28px; }
.form-label { font-weight: 700; color: #1e293b; }
.input-icon { position: relative; }
.input-icon > i {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; z-index: 2;
}
.input-icon .form-control { padding-right: 46px; height: 52px; border-radius: 16px; border-color: #dbe3ef; }
.input-icon .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(29,78,216,.12); }
.toggle-password {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #64748b; z-index: 3;
}
.login-btn { height: 54px; border-radius: 16px; font-weight: 800; background: linear-gradient(135deg, #1d4ed8, #0f766e); border: 0; }
.login-visual { position: relative; min-height: 620px; align-items: center; justify-content: center; }
.visual-card {
    position: absolute; min-width: 240px; display: flex; align-items: center; gap: 12px;
    padding: 20px 22px; border-radius: 24px; color: #fff; font-weight: 800;
    box-shadow: 0 24px 60px rgba(15,23,42,.18);
}
.visual-card i { font-size: 28px; }
.card-1 { top: 140px; right: 12%; background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
.card-2 { top: 280px; left: 10%; background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.card-3 { bottom: 130px; right: 20%; background: linear-gradient(135deg, #7c3aed, #a78bfa); }
@media (max-width: 991px) {
    .login-page { grid-template-columns: 1fr; padding: 22px; }
    .login-card { padding: 26px; border-radius: 24px; }
}