/* =====================================================
   RESET
===================================================== */

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

/* =====================================================
   BODY
===================================================== */

body {
    min-height: 100vh;
    background: linear-gradient(180deg, #050b18, #020617);

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

/* =====================================================
   CONTAINER
===================================================== */

.login {
    width: 100%;
    padding: 20px;
}

/* =====================================================
   CARD
===================================================== */

.login-box {

    max-width: 400px;
    margin: 0 auto;

    padding: 40px 30px;

    background: linear-gradient(
        145deg,
        #0a162b,
        #050b18
    );

    border-radius: 20px;

    border: 1px solid rgba(
        0,
        255,
        136,
        0.2
    );

    box-shadow:
        0 0 40px rgba(
            0,
            255,
            136,
            0.08
        );

    text-align: center;
}

/* =====================================================
   TÍTULOS
===================================================== */

.login-box h2 {

    color: #ffffff;

    margin-bottom: 10px;
}

.login-box p {

    color: #9ca3af;

    font-size: 14px;

    margin-bottom: 30px;

    line-height: 1.5;
}

/* =====================================================
   FORMULÁRIO
===================================================== */

.input-group {

    text-align: left;

    margin-bottom: 20px;
}

.input-group label {

    display: block;

    margin-bottom: 6px;

    color: #9ca3af;

    font-size: 13px;

    font-weight: 600;
}

/* =====================================================
   INPUTS
===================================================== */

.input-group input {

    width: 100%;

    height: 46px;

    padding: 12px;

    border-radius: 8px;

    border: 1px solid #1f2937;

    background: #020617;

    color: #ffffff;

    outline: none;

    transition: all 0.3s ease;
}

.input-group input::placeholder {

    color: #6b7280;
}

.input-group input:focus {

    border-color: #00ff88;

    box-shadow:
        0 0 10px rgba(
            0,
            255,
            136,
            0.30
        );
}

/* =====================================================
   CAMPO SENHA
===================================================== */

.input-senha {

    position: relative;

    width: 100%;
}

.input-senha input {

    padding-right: 50px;
}

/* =====================================================
   BOTÃO MOSTRAR SENHA
===================================================== */

.toggle-senha {

    position: absolute;

    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    border: none;
    background: transparent;

    cursor: pointer;

    font-size: 18px;

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

    color: #9ca3af;

    transition: 0.3s;
}

.toggle-senha:hover {

    color: #00ff88;
}

.toggle-senha:focus {

    outline: none;
}

/* =====================================================
   LINK ESQUECI SENHA
===================================================== */

.esqueci-senha {

    display: block;

    margin: 12px 0 22px;

    text-align: right;

    color: #00ff88;

    font-size: 14px;

    font-weight: bold;

    text-decoration: none;

    transition: 0.3s;
}

.esqueci-senha:hover {

    text-decoration: underline;
}

/* =====================================================
   BOTÃO LOGIN
===================================================== */

.btn-login {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: #00ff88;

    color: #000000;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;
}

.btn-login:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(
            0,
            255,
            136,
            0.60
        );
}

/* =====================================================
   MENSAGENS
===================================================== */

.mensagem {

    margin-bottom: 16px;

    padding: 12px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: bold;
}

.sucesso {

    background: #e7ffe7;

    color: #067a06;

    border: 1px solid #8bdf8b;
}

.erro {

    background: #ffe7e7;

    color: #b30000;

    border: 1px solid #ff9a9a;
}

/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 480px) {

    .login-box {

        padding: 30px 20px;
    }

    .login-box h2 {

        font-size: 24px;
    }

    .btn-login {

        padding: 13px;
    }
}