:root {
    color-scheme: dark;
    --vm-fundo: #090a0d;
    --vm-superficie: #14161b;
    --vm-borda: #292d35;
    --vm-texto: #f4f5f7;
    --vm-secundario: #a7acb7;
    --vm-vermelho: #dc2638;
    --vm-vermelho-hover: #bb1f2f;
    --vm-foco: #3b82f6;
    --vm-erro-fundo: #35151a;
    --vm-erro-texto: #ffb4bc;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: radial-gradient(circle at top, #1c2028 0, var(--vm-fundo) 52%);
    color: var(--vm-texto);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vm-login {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.vm-login__painel {
    width: min(100%, 420px);
    padding: 32px;
    background: var(--vm-superficie);
    border: 1px solid var(--vm-borda);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgb(0 0 0 / 35%);
}

.vm-login__marca {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.vm-login__logo {
    display: block;
    width: min(210px, 75%);
    height: auto;
}

.vm-login__titulo {
    margin: 0;
    text-align: center;
    font-size: 1.65rem;
}

.vm-login__subtitulo {
    margin: 8px 0 28px;
    color: var(--vm-secundario);
    text-align: center;
}

.vm-campo {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.vm-campo__rotulo {
    font-weight: 600;
}

.vm-campo__entrada {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: #0d0f13;
    color: var(--vm-texto);
    border: 1px solid var(--vm-borda);
    border-radius: 8px;
    font: inherit;
}

    .vm-campo__entrada:focus {
        border-color: var(--vm-foco);
        outline: 3px solid rgb(59 130 246 / 22%);
    }

.vm-validacao {
    color: var(--vm-erro-texto);
    font-size: 0.875rem;
}

.vm-mensagem {
    display: block;
    margin-bottom: 18px;
    padding: 12px;
    background: var(--vm-erro-fundo);
    color: var(--vm-erro-texto);
    border-radius: 8px;
}

    .vm-mensagem:empty {
        display: none;
    }

.vm-resumo-validacao {
    margin-bottom: 18px;
    color: var(--vm-erro-texto);
}

    .vm-resumo-validacao ul {
        margin: 0;
        padding-left: 20px;
    }

.vm-botao {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 10px 16px;
    background: var(--vm-vermelho);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

    .vm-botao:hover {
        background: var(--vm-vermelho-hover);
    }

    .vm-botao:focus {
        outline: 3px solid rgb(59 130 246 / 35%);
        outline-offset: 2px;
    }

@media (max-width: 480px) {
    .vm-login {
        padding: 16px;
    }

    .vm-login__painel {
        padding: 24px 20px;
        border-radius: 14px;
    }
}

.vm-login__texto {
    margin: 18px 0;
    color: var(--vm-secundario);
    line-height: 1.6;
}

.vm-login__qr {
    display: block;
    width: min(240px, 100%);
    height: auto;
    margin: 22px auto;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
}

.vm-segredo {
    display: block;
    margin: 16px 0 22px;
    padding: 12px;
    overflow-wrap: anywhere;
    background: #0d0f13;
    border: 1px solid var(--vm-borda);
    border-radius: 8px;
    color: var(--vm-texto);
    font-family: Consolas, monospace;
    text-align: center;
}

.vm-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--vm-secundario);
    text-decoration: none;
}

    .vm-link:hover {
        color: var(--vm-texto);
    }

.vm-mensagem--sucesso {
    background: #123522;
    color: #9ce8b9;
}