:root{
    --primary:#226D82;
    --primary-dark:#1B5A6C;
    --secondary:#4A8D9E;
    --light:#F5F7FA;
    --border:#E8ECEF;
    --text:#5F6B7A;
    --radius:18px;
    --shadow:0 15px 40px rgba(0,0,0,.08);
}

body.login-page{
    margin:0;
    min-height:100vh;
    font-family:'Segoe UI',sans-serif;
    background:linear-gradient(135deg,#edf6f8 0%,#ffffff 100%);
    position:relative;
    overflow-x:hidden;
}

body.login-page::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(34,109,130,.08);
    top:-120px;
    left:-120px;
}

body.login-page::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(74,141,158,.08);
    right:-100px;
    bottom:-120px;
}

.login-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:18px 0;
    position:relative;
    z-index:10;
}

.brand-icon{
    width:55px;
    height:55px;
    border-radius:15px;
    background:#ffffff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}

.login-header h4{
    margin:0;
    font-weight:700;
}

.login-header small{
    color:#888;
}

.login-section{
    min-height:calc(100vh - 140px);
    display:flex;
    align-items:center;
    position:relative;
    z-index:10;
    padding:50px 0;
}

.welcome-panel{
    background:#0f766e;
    color:#fff;
    border-radius:24px;
    padding:60px;
    min-height:620px;
    display:flex;
    align-items:center;
    box-shadow:var(--shadow);
}

.welcome-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    margin-bottom:35px;
}

.welcome-panel h1{
    font-size:42px;
    font-weight:700;
    line-height:1.3;
}

.welcome-panel h1 span{
    color:#FFD54F;
}

.welcome-panel p{
    margin:30px 0;
    font-size:17px;
    opacity:.95;
}

.welcome-features{
    margin-top:40px;
}

.welcome-features div{
    margin-bottom:18px;
    font-size:17px;
}

.welcome-features i{
    color:#FFD54F;
    margin-right:10px;
}

.login-card{
    background:#fff;
    border-radius:22px;
    padding:40px;
    box-shadow:var(--shadow);
}

.login-avatar{
    width:85px;
    height:85px;
    border-radius:50%;
    background:rgba(34,109,130,.10);
    color:var(--primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
}

.login-card h3{
    font-weight:700;
}

.form-label{
    font-weight:600;
}

.input-group-text{
    background:#fff;
}

.form-control{
    height:48px;
    border-left:none;
}

.form-control:focus{
    border-color:#ced4da;
    box-shadow:none;
}

.btn-primary{
    background:#0f766e;
    border-color:#0f766e;
    border-radius:12px;
    height:52px;
    font-weight:600;
}

.btn-primary:hover{
    background:#115e59;
    border-color:#115e59;
}

.login-footer{
    padding:18px 0;
    border-top:1px solid var(--border);
    background:#fff;
    color:#777;
    position:relative;
    z-index:10;
}

@media(max-width:991px){
    .login-section{
        padding:30px 15px;
    }

    .login-card{
        padding:30px;
    }
}

@media (max-width:767px){
    body.login-page::before,
    body.login-page::after{
        display:none;
    }

    .login-header{
        padding:10px 0;
    }

    .login-header small{
        display:none;
    }

    .brand-icon{
        width:42px;
        height:42px;
    }

    .brand-icon img{
        width:40px;
        height:auto;
    }

    .login-header h4{
        font-size:17px;
    }

    .login-header small{
        font-size:12px;
    }

    .login-section{
        min-height:auto;
        padding:20px 12px;
        align-items:flex-start;
    }

    .login-card{
        border-radius:16px;
        padding:20px;
        box-shadow:0 8px 25px rgba(0,0,0,.08);
    }

    .login-avatar{
        width:60px;
        height:60px;
        font-size:34px;
    }

    .login-card h3{
        font-size:24px;
        margin-top:12px !important;
    }

    .login-card p{
        font-size:14px;
    }

    .form-label{
        font-size:14px;
        margin-bottom:6px;
    }

    .input-group{
        margin-bottom:2px;
    }

    .form-control{
        height:44px;
        font-size:15px;
    }

    .input-group-text{
        font-size:15px;
        padding:.6rem .8rem;
    }

    #btnTogglePassword{
        padding:0 .9rem;
    }

    .btn-primary{
        height:46px;
        font-size:15px;
    }

    .btn-outline-primary{
        height:44px;
        font-size:15px;
    }

    hr{
        margin:20px 0 !important;
    }

    .login-footer{
        text-align:center;
    }
}