/* --- Variáveis de Cor --- */
:root {
    --theme-purple: #8a2be2;
    --theme-purple-darker: #7b24c6;
    --dark-bg: #000;
    --card-bg: rgba(12, 10, 40, 0.85);
    --input-bg: rgba(30, 30, 60, 0.7);
    --input-border: #4a4a8a;
    --text-color: #f0f0f0;
}

/* --- Estilo Base --- */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* --- FUNDO ANIMADO COM ESTRELAS (VERSÃO CORRETA E PURA CSS) --- */
@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

/* Gera centenas de "estrelas" usando box-shadow. É muito mais leve que criar divs. */
/* Cada camada tem uma velocidade de animação diferente para o efeito de paralaxe. */

/* Camada 1: Estrelas pequenas e rápidas */
#stars1 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: /* Coleção de sombras para criar estrelas */
        696px 1334px #FFF, 1269px 1295px #FFF, 1285px 530px #FFF, 110px 1438px #FFF, 1445px 778px #FFF, 
        1448px 1913px #FFF, 1419px 707px #FFF, 891px 1686px #FFF, 749px 1582px #FFF, 1130px 188px #FFF, 
        1179px 1935px #FFF, 331px 1845px #FFF, 146px 1205px #FFF, 597px 44px #FFF, 153px 101px #FFF, 
        1894px 602px #FFF, 1006px 1030px #FFF, 1202px 1729px #FFF, 604px 100px #FFF, 1332px 108px #FFF,
        /* Adicione mais se quiser, mas esta quantidade já é boa */
        1000px 500px #FFF, 800px 900px #FFF, 1500px 200px #FFF, 400px 1800px #FFF, 950px 1550px #FFF;
    animation: animStar 50s linear infinite;
    position: absolute;
    top: 0; left: 0; z-index: -1;
}

/* Camada 2: Estrelas médias */
#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: /* Coleção de sombras para criar estrelas */
        1241px 123px #FFF, 1378px 1083px #FFF, 1899px 739px #FFF, 1503px 1243px #FFF, 1638px 1878px #FFF, 
        1113px 1832px #FFF, 1709px 1496px #FFF, 1435px 129px #FFF, 54px 1762px #FFF, 1204px 1383px #FFF, 
        1334px 1867px #FFF, 240px 1332px #FFF, 1730px 120px #FFF, 172px 1157px #FFF, 45px 1133px #FFF, 
        /* Adicione mais se quiser */
        900px 100px #FFF, 1300px 1400px #FFF, 600px 800px #FFF, 1800px 300px #FFF;
    animation: animStar 100s linear infinite;
    position: absolute;
    top: 0; left: 0; z-index: -1;
}

/* Camada 3: Estrelas grandes e lentas */
#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: /* Coleção de sombras para criar estrelas */
        1016px 1349px #FFF, 915px 432px #FFF, 589px 429px #FFF, 1002px 127px #FFF, 853px 1192px #FFF, 
        695px 1324px #FFF, 53px 136px #FFF, 1146px 1239px #FFF, 1193px 832px #FFF, 626px 957px #FFF,
        /* Adicione mais se quiser */
        300px 400px #FFF, 1600px 1700px #FFF, 200px 900px #FFF, 1900px 1000px #FFF;
    animation: animStar 150s linear infinite;
    position: absolute;
    top: 0; left: 0; z-index: -1;
}

/* --- Card de Login --- */
.login-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 420px;
    z-index: 1; 
}

/* O restante do seu CSS continua igual e correto */
.imvs-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}

.imvs-icon {
    margin-right: 12px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

.login-card a {
    color: #a0a0e0;
    text-decoration: none;
    transition: color 0.3s;
}

.login-card a:hover {
    color: white;
}

.form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control::placeholder {
    color: #a0a0e0 !important;
    opacity: 0.7;
}

.form-control:focus {
    border-color: var(--theme-purple) !important;
    box-shadow: 0 0 12px rgba(138, 43, 226, 0.6) !important;
}

.btn-login {
    background-color: var(--theme-purple);
    color: white;
    font-weight: 500;
    padding: 12px;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-login:hover {
    background-color: var(--theme-purple-darker);
    color: white;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
}

/* Estilo para a mensagem de erro do JavaScript */
.error-message-js {
    color: #ff9e9e; /* Um vermelho mais claro para contrastar com o fundo escuro */
    font-size: 0.9rem;
    min-height: 20px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 500;
}