@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Yuyu&display=swap');

:root {
    --azul-claro: #CAE6F0;
    --azul-escuro: #122042;
    --azul-vivo: #1B42E1;
    --verde: #00E67B;
    --branco: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(202, 230, 240, .55), transparent 34%),
        linear-gradient(135deg, var(--azul-escuro), #081126);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-wrapper {
    width: 100%;
    max-width: 1050px;
    min-height: 600px;
    background: var(--azul-escuro);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.brand-side {
    background: var(--azul-escuro);
    color: var(--branco);
    padding: 70px 60px 58px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.brand-side::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: var(--verde);
    border-radius: 50%;
    top: -92px;
    right: -86px;
    opacity: 0.92;
}

.brand-side::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 35px solid var(--azul-vivo);
    border-radius: 50%;
    bottom: -112px;
    left: -76px;
    opacity: 0.88;
}

.brand-content {
    position: relative;
    z-index: 2;
    max-width: 390px;
}

.logo {
    width: 300px;
    max-width: 100%;
    display: block;
    margin-bottom: 46px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: var(--azul-escuro);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 900;
    margin-bottom: 26px;
    font-size: 14px;
    letter-spacing: .3px;
}

.brand-line {
    width: 80px;
    height: 3px;
    background: var(--verde);
    border-radius: 999px;
    margin-bottom: 26px;
}

.brand-side p {
    color: #d8e7ff;
    max-width: 380px;
    font-size: 17px;
    line-height: 1.55;
}

.brand-footer {
    position: relative;
    z-index: 2;
    color: #c6d7f5;
    font-size: 14px;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-footer::before {
    content: "✓";
    width: 22px;
    height: 22px;
    border: 2px solid var(--verde);
    color: var(--verde);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 900;
}

.form-side {
    background: var(--branco);
    padding: 60px 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 28px 28px 0;
}

.login-box {
    width: 100%;
    max-width: 390px;
}

.login-box h2 {
    color: var(--azul-escuro);
    font-size: 38px;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.login-box .subtitle {
    color: #60708f;
    margin-bottom: 35px;
    font-size: 15px;
}

.form-group {
    margin-bottom: 18px;
}

label {
    display: block;
    color: var(--azul-escuro);
    font-weight: 800;
    margin-bottom: 8px;
    font-size: 14px;
}

input {
    width: 100%;
    height: 52px;
    border: 2px solid #e3e9f3;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--azul-escuro);
    outline: none;
    transition: 0.2s;
    background: #f8fbff;
}

input:focus {
    border-color: var(--verde);
    background: var(--branco);
    box-shadow: 0 0 0 4px rgba(0, 230, 123, 0.18);
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 90px;
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--azul-vivo);
    font-weight: 900;
    cursor: pointer;
    font-size: 13px;
}

.form-options {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 28px;
}

.forgot-link {
    color: var(--azul-vivo);
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
}

.forgot-link:hover {
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 15px;
    background: var(--verde);
    color: var(--azul-escuro);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 14px 28px rgba(0, 230, 123, 0.34);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0, 230, 123, 0.45);
}

.system-name {
    margin-top: 28px;
    text-align: center;
    color: #8794ad;
    font-size: 13px;
}

@media (max-width: 850px) {
    body {
        padding: 14px;
    }

    .login-wrapper {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .brand-side {
        padding: 42px 34px 38px;
        min-height: 390px;
    }

    .logo {
        width: 250px;
        margin-bottom: 34px;
    }

    .form-side {
        border-radius: 0;
        padding: 42px 28px;
    }
}

input:focus-visible {
    outline: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f8fbff inset;
    -webkit-text-fill-color: var(--azul-escuro);
}

.center-option {
    justify-content: center;
    margin-top: 24px;
}

.success-box {
    text-align: center;
}

.success-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background: rgba(0, 230, 123, 0.14);
    color: var(--verde);

    font-size: 42px;
    font-weight: 900;

    box-shadow: 0 14px 34px rgba(0, 230, 123, 0.22);
}

.success-text {
    max-width: 390px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

.btn-link-login {
    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: var(--verde);
    color: var(--azul-escuro);

    font-size: 16px;
    font-weight: 900;
    text-decoration: none;

    box-shadow: 0 14px 28px rgba(0, 230, 123, 0.34);

    transition: 0.2s;
}

.btn-link-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0, 230, 123, 0.45);
}