:root{
    --bg:#f6f8fc; --card:#ffffff; --text:#0f172a; --muted:#6b7280;
    --border:#e5e7eb; --accent:#2d6cdf; --accent-2:#7c3aed; --danger:#dc2626;
    --shadow: 0 20px 45px rgba(2,6,23,.08);
}

/* page background */
body.form-page{ background: var(--bg); }

/* --------- LAYOUT: center content, control width --------- */
.login-main{
    /* center the whole section and keep it tidy */
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 40px);
    min-height: calc(100dvh - 96px);           /* visible height under your header */
    display: grid;
    grid-template-columns: 1fr 1fr;             /* form | image */
    gap: 28px;
    align-items: center;                         /* vertical centering */
}

/* Left column (card) */
.login-card{
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    width: 100%;
}

.form-container{ padding: clamp(18px, 3.4vw, 36px); }
.form-inner{ max-width: 560px; }               /* keep the form line-length nice */

.text-container h3{
    margin:0 0 .35rem; font-weight:800; color:var(--text);
}
.login-txt{ color:var(--muted); margin:0 0 1rem; }

/* --------- FORM ---------- */
.login-form{ display:grid; gap:14px; }
.form-label{ font-weight:700; margin-bottom:.35rem; color:var(--text); }

.form-control{
    background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:.8rem 1rem; font-size:.98rem;
    transition:border .15s, box-shadow .15s;
}
.form-control:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
    outline:0;
}

/* password show/hide */
.pass-container{ position:relative; }
.pass-container .form-control{ padding-right:88px; }
.show-btn{
    position:absolute; right:8px; top:50%; translate:0 -50%;
    border:0; border-radius:10px; background:#f3f4f6; color:#111;
    padding:.45rem .7rem; font-weight:700; cursor:pointer;
    transition:filter .15s, transform .15s;
}
.show-btn:hover{ filter:brightness(.97); transform:translateY(-1px); }
.text-danger.small{ display:block; margin-top:.2rem; font-size:.85rem; color:var(--danger); }

/* submit */
.form-btn{
    margin-top:.2rem; width:100%;
    display:inline-flex; align-items:center; justify-content:center;
    padding:.9rem 1.1rem; border:0; border-radius:999px; font-weight:800; color:#fff;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    box-shadow:0 12px 28px rgba(45,108,223,.25);
    transition:transform .15s, box-shadow .15s;
}
.form-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(45,108,223,.32); }
.form-btn:active{ transform:translateY(0) scale(.98); }

.forgot-pass{ text-align:center; margin:.8rem 0 0; color:var(--muted); }
.forgot-pass a{ text-decoration:none; font-weight:700; color:var(--accent); }
.forgot-pass a:hover{ color:var(--accent-2); }

/* --------- Right column (image) ---------- */
.img-container{
    border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
    min-height: 520px; background:#0f172a;
    display:flex; align-items:center; justify-content:center;
}
.login-img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.02); transition:transform .6s ease;
}
.img-container:hover .login-img{ transform:scale(1.06); }

/* --------- Responsive --------- */
@media (max-width: 1100px){
    .login-main{
        grid-template-columns: 1fr;          /* stack */
        gap: 18px;
    }
    .img-container{ order:-1; min-height: 300px; }
    .form-inner{ max-width: 100%; }
}
@media (max-width: 520px){
    .form-container{ padding:16px; }
    .show-btn{ padding:.4rem .6rem; }
}
.big-logo {
    display:block;
    margin:0 auto 12px;
    width:90px; /* adjust size */
    height:auto;
}
@media (max-width: 768px) {
    .img-container {
        display: none !important;
    }
}