:root{
    --vl-green:#10a95b;
    --vl-green-dark:#087b42;
    --vl-soft:#edf9f2;
    --vl-bg:#f4f7f5;
    --vl-dark:#07110b;
    --vl-text:#101713;
    --vl-muted:#68756d;
    --vl-border:#dfe7e2;
}

*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    background:var(--vl-bg);
    color:var(--vl-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}

.vl-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,1fr) 470px;
}

.vl-side{
    position:relative;
    overflow:hidden;
    padding:52px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(145deg,#06120c,#092417 60%,#0c3420);
    color:white;
}

.vl-side:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-220px;
    top:-190px;
    border-radius:50%;
    background:rgba(30,210,110,.11);
}

.vl-logo{
    position:relative;
    display:flex;
    align-items:center;
    gap:11px;
}

.vl-logo-mark{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,#20cf71,#098249);
    font-size:20px;
    font-weight:900;
}

.vl-logo strong{
    display:block;
    font-size:19px;
}

.vl-logo span{
    display:block;
    margin-top:2px;
    color:#93a69a;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.vl-copy{
    position:relative;
    max-width:620px;
}

.vl-eyebrow{
    color:#32df82;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.vl-copy h1{
    max-width:560px;
    margin:12px 0 16px;
    font-size:49px;
    line-height:1.04;
    letter-spacing:-.055em;
}

.vl-copy p{
    max-width:520px;
    margin:0;
    color:#adbbb2;
    font-size:14px;
    line-height:1.7;
}

.vl-trust{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.vl-trust div{
    padding:15px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.04);
}

.vl-trust svg{
    width:19px;
    height:19px;
    color:#32df82;
}

.vl-trust strong{
    display:block;
    margin-top:10px;
    font-size:10px;
}

.vl-trust span{
    display:block;
    margin-top:3px;
    color:#8fa197;
    font-size:8px;
}

.vl-panel{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 26px;
}

.vl-card{
    width:100%;
    max-width:410px;
    padding:29px;
    border:1px solid var(--vl-border);
    border-radius:25px;
    background:white;
    box-shadow:0 24px 75px rgba(10,32,19,.10);
}

.vl-role{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.vl-role-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    background:var(--vl-soft);
    color:var(--vl-green-dark);
    font-size:8px;
    font-weight:900;
    letter-spacing:.05em;
}

.vl-role-badge.admin{
    background:#edf1ef;
    color:#28352d;
}

.vl-role-badge svg{
    width:15px;
    height:15px;
}

.vl-card h2{
    margin:0;
    font-size:27px;
    letter-spacing:-.04em;
}

.vl-card .sub{
    margin:7px 0 22px;
    color:var(--vl-muted);
    font-size:10px;
    line-height:1.55;
}

.vl-error{
    margin-bottom:14px;
    padding:11px 12px;
    border-radius:11px;
    background:#fff0f0;
    color:#9b3030;
    font-size:10px;
    font-weight:700;
}

.vl-form label{
    display:block;
    margin:14px 0 6px;
    color:var(--vl-muted);
    font-size:8px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.vl-input-wrap{
    position:relative;
}

.vl-input{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border:1px solid var(--vl-border);
    border-radius:13px;
    outline:none;
    background:white;
    color:var(--vl-text);
    font-size:12px;
    font-weight:650;
}

.vl-input:focus{
    border-color:#7acb9d;
    box-shadow:0 0 0 4px rgba(16,169,91,.08);
}

.vl-password{
    padding-right:52px;
}

.vl-toggle{
    position:absolute;
    right:7px;
    top:7px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:9px;
    background:#f5f8f6;
    color:#66736b;
    cursor:pointer;
}

.vl-toggle svg{
    width:17px;
    height:17px;
}

.vl-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:13px;
}

.vl-remember{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--vl-muted);
    font-size:9px;
}

.vl-remember input{
    accent-color:var(--vl-green);
}

.vl-forgot{
    color:var(--vl-green-dark);
    text-decoration:none;
    font-size:9px;
    font-weight:800;
}

.vl-submit{
    width:100%;
    min-height:52px;
    margin-top:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#15b961,#087d43);
    color:white;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
}

.vl-submit.admin{
    background:var(--vl-dark);
}

.vl-security{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:16px;
    padding:11px;
    border-radius:11px;
    background:#f4f8f5;
    color:#607067;
    font-size:8px;
    line-height:1.5;
}

.vl-security svg{
    width:15px;
    height:15px;
    flex:0 0 15px;
    color:var(--vl-green);
}

.vl-back{
    display:block;
    margin-top:16px;
    text-align:center;
    color:var(--vl-muted);
    text-decoration:none;
    font-size:9px;
    font-weight:700;
}

@media(max-width:900px){
    .vl-shell{
        display:block;
    }

    .vl-side{
        min-height:auto;
        padding:24px 20px 80px;
    }

    .vl-copy{
        margin-top:48px;
    }

    .vl-copy h1{
        font-size:35px;
    }

    .vl-copy p{
        font-size:11px;
    }

    .vl-trust{
        display:none;
    }

    .vl-panel{
        min-height:auto;
        margin-top:-50px;
        position:relative;
        padding:0 14px 28px;
        align-items:flex-start;
    }

    .vl-card{
        max-width:520px;
        padding:22px;
        border-radius:22px;
    }
}

@media(max-width:480px){
    .vl-side{
        padding:20px 16px 72px;
    }

    .vl-copy{
        margin-top:38px;
    }

    .vl-copy h1{
        font-size:30px;
    }

    .vl-panel{
        margin-top:-42px;
    }
}