:root {
    --mp-green: #00C195;
    --mp-dark: #0F172A;
    --mp-muted: #6B7280;
}

body {
    margin:0;
    font-family: "Inter", sans-serif;
    background:#FFFFFF;
    display:flex;
    min-height:100vh;
}

/* LEFT LOGO AREA */
.left-side {
    flex:1;
    padding:40px 50px;
    background: #0B0F19;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.left-side img.logo {
    width:220px;
    margin-bottom:60px;
}

.headline {
    margin-top:40px;
    font-size:34px;
    font-weight:700;
    line-height:1.25;
    max-width:370px;
}

.subtext {
    margin-top:12px;
    font-size:16px;
    color:#CBD5E1;
    max-width:350px;
}

/* RIGHT LOGIN AREA */
.right-side {
    flex:1;
    padding:60px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:white;
}

.login-box {
    max-width:350px;
    width:100%;
    margin:0 auto;
}

.login-top-text {
    margin-bottom:30px;
    font-size:14px;
    color:var(--mp-muted);
}
.login-top-text a {
    color:var(--mp-green);
    font-weight:600;
    text-decoration:none;
}

.login-title {
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
    color:var(--mp-dark);
}

.login-desc {
    font-size:14px;
    color:var(--mp-muted);
    margin-bottom:30px;
}

/* ERROR MESSAGES */
.error-message {
    color:#EF4444;
    font-size:14px;
    margin-bottom:16px;
    padding:12px;
    background:#FEE2E2;
    border-radius:8px;
    border:1px solid #FECACA;
}

/* INPUTS FULL WIDTH + EXTRA PADDING */
.input-field {
    width:100%;
    padding:16px 18px;
    border-radius:12px;
    border:1px solid #D1D5DB;
    font-size:15px;
    margin-bottom:16px;
    outline:none;
    background:#F8FAFC;
    transition:0.2s;
    box-sizing:border-box;
}

.input-field:focus {
    border-color:var(--mp-green);
    background:white;
}

.input-field.error {
    border-color:#EF4444;
}

/* BUTTON */
.login-btn {
    width:100%;
    padding:16px;
    border:none;
    border-radius:40px;
    background:#0F172A;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-top:10px;
    transition:0.2s;
}

.login-btn:hover{
    background:#1E293B;
}

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

/* FORGOT PASSWORD AT BOTTOM */
.bottom-row {
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    font-size:14px;
}

.bottom-row a {
    color:var(--mp-green);
    text-decoration:none;
    font-weight:500;
}

/* MOBILE */
@media(max-width:900px){
    body { flex-direction:column; }
    .left-side { display:none; }
    .right-side { padding:40px 22px; }
    .login-box { max-width:100%; }
}