:root{
    --primary:#FF006E;
    --primary-dark:#E60063;
    --primary-light:#FFE6F2;
    --navy:#0D1430;
    --text:#1D2545;
    --muted:#687280;
    --border:#E4E7EC;
}

*{box-sizing:border-box}

.login-body{
    margin:0;
    color:var(--text);
    font-family:var(--font-sans);
    min-height:100vh;
    position:relative;
}
.login-body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.78);
    z-index:0;
}

/* TOP NAV */
.top-nav{
    height:72px;
    border-bottom:1px solid #eef1f5;
    background:#fff;
    position:sticky;
    top:0;
    z-index:50;
}
.top-nav-inner{
    max-width:1440px;
    height:100%;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.top-nav-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--navy);
    font-size:16px;
    font-weight:600;
}
.top-nav-brand i{color:var(--primary);font-size:18px}

.lang-switch{display:flex;gap:8px}
.lang-switch a{
    min-width:42px;
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#667085;
    font-size:13px;
    font-weight:600;
}
.lang-switch a:hover{border-color:var(--primary);color:var(--primary)}
.lang-switch a.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* MAIN */
.login-page{
    min-height:calc(100vh - 72px);
    padding:24px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.login-layout{
    width:100%;
    max-width:1440px;
    padding:0 24px;
}
.login-layout-row{
    min-height:820px;
    margin:0 !important;
    background:transparent;     /* brak białej belki */
    border:none;
    box-shadow:none;
    align-items:center;
}

/* LEWA KOLUMNA */
.login-left{
    min-height:820px;
    display:flex;
    justify-content:flex-end;   /* schodzi do środka */
    padding-right:32px;
}
.login-left-inner{
    width:100%;
    max-width:560px;
    min-height:820px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-mark{
    width: 50px;
    height: 50px;
    border: 1px solid var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #fff;
}

.brand-top,.brand-bottom{
    line-height:1;
    font-size:1rem;
    font-weight:500;
    letter-spacing:.06em;
}
.brand-bottom{color:var(--primary);margin-top:4px}

.hero-title{
    margin:0 0 14px;
    color:var(--navy);
    font-size:2.5rem;
    line-height:1.10;
    font-weight:500;
}
.hero-title span{color:var(--primary)}

.hero-subtitle{
    max-width:500px;
    font-size:1rem;
    line-height:24px;
    color:var(--muted);
}
.hero-features{
    margin:0;
    padding:0;
    list-style:none;
}
.hero-features li{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}
.feature-icon{
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #667085;
    font-size: 1rem;
}
.hero-features strong{
    display:block;
    font-size:1rem;
    line-height:24px;
    font-weight:600;
}
.hero-features small{
    display:block;
    font-size:0.9rem;
    line-height:22px;
    color:var(--muted);
}
.left-copy{
    margin-top:28px;
    color:#98a2b3;
    font-size:12px;
}

/* PRAWA KOLUMNA */
.login-right{
    min-height:820px;
    display:flex;
    justify-content:flex-start; /* schodzi do środka */
    align-items:center;
    padding-left:32px;
}
.login-card{
    width:100%;
    max-width:500px;
    border:1px solid #f1f3f7;
    padding:40px;
    background:#fff;
    box-shadow:0 20px 40px rgba(13,20,48,.06);
}

.login-title{
    margin:0 0 8px;
    color:var(--navy);
    font-size:2.5rem;
    line-height:1.08;
    font-weight:600;
}
.login-subtitle{
    margin:0 0 24px;
    font-size:16px;
    line-height:24px;
    color:var(--muted);
}
.login-subtitle span{color:var(--primary)}

/* FORM */
.form-label{
    margin-bottom:8px;
    font-size:14px;
    line-height:22px;
    font-weight:600;
}
.input-wrap{position:relative}
.input-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#98a2b3;
}
.input-control{
    height:48px;
    border:1px solid var(--border);
    padding:12px 16px 12px 40px;
    font-size:14px;
}
.input-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 .2rem rgba(255,0,110,.12);
}
.pass-toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#98a2b3;
}
.forgot-link{
    font-size:14px;
    line-height:22px;
    color:var(--primary);
    text-decoration:none;
}
.forgot-link:hover{color:var(--primary-dark)}

.btn-login{
    height:48px;
    border:0;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
}
.btn-login:hover{background:var(--primary-dark);color:#fff}

.login-alert{
    display:none;
    opacity:0;
    transition:opacity .2s ease;
    margin-bottom:16px;
}
.login-alert.show{display:block;opacity:1}
.invalid-feedback{min-height:18px;font-size:12px}

/* MOBILE */
@media (max-width:991.98px){
    .top-nav{height:64px}
    .top-nav-inner{padding:0 14px}
    .top-nav-brand span{font-size:14px}
    .lang-switch a{min-width:38px;height:34px;}

    .login-page{
        min-height:calc(100vh - 64px);
        padding:12px 0;
    }
    .login-layout{
        padding:0 12px;
    }
    .login-layout-row{
        min-height:calc(100vh - 88px);
        align-items:stretch;
    }

    .login-left{
        padding-right:0;
    }
    .login-left-inner{
        min-height:auto;
        justify-content:flex-start;
        max-width:none;
    }

    .login-right{
        min-height:calc(100vh - 88px);
        padding:16px 0 0;
        justify-content:center;
        align-items:flex-start;
    }
    .login-card{
        max-width:100%;
        border:0;
        box-shadow:none;
        padding:24px 8px;
        background:rgba(255,255,255,.92);
    }

    .login-title{font-size:38px}
}