* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    background-color: #0b0f19;
}

/* --- NOVO FUNDO INSTITUCIONAL --- */
body {
    background: url('assets/FUNDO.jpg') no-repeat center center;
    background-size: cover;
}

/* --- CARD GLASSMORPHISM (Mais corporativo) --- */
#app {
    background: rgba(15, 23, 42, 0.65); /* Vidro um pouco mais denso para dar leitura no fundo claro */
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    
    width: 90vw; 
    max-width: 960px;
    height: auto; 
    padding: 60px 50px; 
    border-radius: 40px;
    
    text-align: center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; 
}

.logo-evento {
    max-width: 250px; /* Logo Sebrae menorzinha e elegante */
    width: 100%;
    margin-bottom: 10px;
}

.screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hidden {
    display: none !important;
}

/* --- TIPOGRAFIA --- */
h1 { color: #ffffff; font-size: 48px; font-weight: 800; margin-bottom: 15px; }
.subtitle { font-size: 24px; color: #cbd5e1; margin-bottom: 30px; line-height: 1.4; }
h2 { font-size: 30px; color: #ffffff; margin-bottom: 30px; min-height: 100px; display: flex; align-items: center; justify-content: center;}

/* --- SLIDER BOLINHAS --- */
.dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-bottom: 30px;
    position: relative; 
}
.dots-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px; right: 5px; 
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%);
    z-index: 1; 
}
.dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    position: relative; z-index: 2; transition: all 0.3s ease;
}
.dot.active { 
    background: rgba(179, 229, 252, 0.4) !important; /* Azul Claro da nova identidade */
    border-color: #b3e5fc !important; 
    transform: scale(1.3); 
    box-shadow: 0 0 15px rgba(179, 229, 252, 0.5); 
}
.dot.dot-correct { background: rgba(0, 200, 83, 0.4) !important; border-color: #00c853 !important; } 
.dot.dot-wrong { background: rgba(255, 82, 82, 0.4) !important; border-color: #ff5252 !important; } 

/* --- TELA DE RESULTADO --- */
.score-container {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}
.score-container h2 { margin: 0; color: #ffffff; font-size: 42px; min-height: auto; }
#result-message #score { color: #ffffff; }

/* FEEDBACK SLIM COM BORDA DINÂMICA */
#feedback-container {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 30px; 
    border-radius: 15px;
    margin-bottom: 15px;
    max-width: 850px;
    width: 100%;
    text-align: left;
}
#feedback-text { 
    font-size: 21px; 
    color: #e2e8f0; 
    line-height: 1.4; 
}
#feedback-text p { margin-bottom: 8px; }
#feedback-text p:last-child { margin-bottom: 0; }

.border-green { border-left: 10px solid #00c853; }
.border-blue { border-left: 10px solid #b3e5fc; }
.border-red { border-left: 10px solid #ff5252; }

/* PRÓXIMO PASSO FORA DO CARD */
#next-step-container {
    max-width: 850px;
    padding: 0 10px;
    margin-bottom: 20px;
    width: 100%;
}
#next-step-container p {
    font-size: 22px;
    color: #cbd5e1;
    line-height: 1.4;
    text-align: left;
}

/* --- BOTÕES DO QUIZ --- */
button { border: none; padding: 20px 30px; font-size: 22px; border-radius: 15px; cursor: pointer; transition: all 0.2s ease; width: 100%; margin-bottom: 15px; font-weight: 700; }
#options-container { width: 100%; }

.option-btn { 
    background-color: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(10px); 
    color: #ffffff; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    text-align: left; 
}
.option-btn:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }

/* Cores Glass de Interação */
.option-btn.selected { background-color: rgba(179, 229, 252, 0.25) !important; border-color: #b3e5fc !important; }
.option-btn.correct { background-color: rgba(0, 200, 83, 0.25) !important; border-color: #00c853 !important; }
.option-btn.wrong { background-color: rgba(255, 82, 82, 0.25) !important; border-color: #ff5252 !important; }

.action-btn { background: #ffffff; color: #0f172a; font-size: 28px; padding: 25px; max-width: 500px; margin-top: 10px; }
.action-btn:hover { background: #f1f5f9; transform: scale(1.02); }

.outline-glass { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); }
.outline-glass:hover { background-color: rgba(255, 255, 255, 0.1); }