/* ==========================================================================
   Vibe Fit Cultural — Float Bubble, Modal & Result
   Cores: herda as variáveis --mabu-* definidas em vibe-bubble-map.css
   Nota: !important nos botões/options para sobrepor reset genérico do tema
         (button, [type=button], [type=submit])
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens locais — referenciando a paleta Mabu
   -------------------------------------------------------------------------- */
#vibe-fit-bubble,
#vibe-fit-modal,
#vibe-fit-overlay {
    --fit-accent:       var(--mabu-cta,        #439CDA);
    --fit-accent-hover: var(--mabu-cta-hover,  #2d84bd);
    --fit-dark:         var(--mabu-primary,    #0A1F44);
    --fit-navy:         var(--mabu-navy,       #1A4570);
    --fit-font:         var(--mabu-font, 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --fit-bg:           #ffffff;
    --fit-surface:      #f4f7fb;
    --fit-border:       #dce6f0;
    --fit-text:         #0A1F44;
    --fit-text-muted:   #7A7A7A;
    --fit-radius:       16px;
    --fit-radius-sm:    10px;
    --fit-shadow:       0 8px 32px rgba(10,31,68,.20);
    --fit-z-bubble:     9990;
    --fit-z-overlay:    9991;
    --fit-z-modal:      9992;
    --fit-transition:   .25s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   Float Bubble — canto inferior ESQUERDO
   (lado direito: CTA "Quero me Candidatar" + botão share)
   -------------------------------------------------------------------------- */
#vibe-fit-bubble {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    z-index: 9990 !important;
    font-family: var(--fit-font) !important;
}

#vibe-fit-bubble-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 22px !important;
    background: var(--mabu-primary,#00d3f2) !important;
    background-color: var(--mabu-primary, #00d3f2) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--fit-font) !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(10,31,68,.35) !important;
    transition: background .25s, transform .25s, box-shadow .25s !important;
    white-space: nowrap !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    text-transform: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#vibe-fit-bubble-btn:hover,
#vibe-fit-bubble-btn:focus-visible {
    background: var(--mabu-navy, #1A4570) !important;
    background-color: var(--mabu-navy, #1A4570) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(10,31,68,.45) !important;
    outline: none !important;
}

#vibe-fit-bubble-btn .fit-bubble-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

@keyframes fit-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

#vibe-fit-bubble-btn .fit-bubble-icon {
    animation: fit-pulse 2.6s ease-in-out infinite !important;
}

/* Mobile ≤767px: sobe acima do CTA full-width */
@media (max-width: 767px) {
    #vibe-fit-bubble {
        bottom: 72px !important;
        left: 16px !important;
    }
    #vibe-fit-bubble-btn {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 400px) {
    #vibe-fit-bubble-btn span:not(.fit-bubble-icon) {
        display: none !important;
    }
    #vibe-fit-bubble-btn {
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */
#vibe-fit-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10,31,68,.52) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 9991 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s cubic-bezier(.4,0,.2,1) !important;
}

#vibe-fit-overlay.vibe-fit-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
#vibe-fit-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(.96) !important;
    width: min(600px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(10,31,68,.20) !important;
    z-index: 9992 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) !important;
    font-family: var(--fit-font) !important;
    padding: 0 !important;
    margin: 0 !important;
}

#vibe-fit-modal.vibe-fit-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* --------------------------------------------------------------------------
   Botão Fechar (×)
   -------------------------------------------------------------------------- */
#vibe-fit-fechar {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 26px !important;
    color: var(--fit-text-muted, #7A7A7A) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    transition: color .25s, background .25s !important;
    z-index: 1 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#vibe-fit-fechar:hover,
#vibe-fit-fechar:focus-visible {
    color: var(--fit-text, #0A1F44) !important;
    background: var(--fit-surface, #f4f7fb) !important;
    background-color: var(--fit-surface, #f4f7fb) !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Barra de Progresso
   -------------------------------------------------------------------------- */
#vibe-fit-progress {
    height: 5px;
    background: var(--fit-border, #dce6f0);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

#vibe-fit-progress-bar {
    height: 100%;
    background: var(--mabu-cta, #439CDA);
    width: 0%;
    transition: width .4s ease;
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Corpo do Quiz
   -------------------------------------------------------------------------- */
#vibe-fit-corpo {
    padding: 32px 36px 28px;
}

@media (max-width: 480px) {
    #vibe-fit-corpo { padding: 24px 20px 20px; }
}

#vibe-fit-step-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--mabu-cta, #439CDA);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#vibe-fit-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--fit-text, #0A1F44);
    margin: 0 0 24px;
    line-height: 1.35;
    padding-right: 24px;
}

@media (max-width: 480px) {
    #vibe-fit-titulo { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Cards de Resposta
   !important em TODAS as props visuais — tema tem button { ... } genérico
   Padrão: tint azul leve (= .vibe-unidade-chip)
   Selecionada: fill navy sólido (= .vibe-unidade-chip.active)
   -------------------------------------------------------------------------- */
#vibe-fit-opcoes {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 28px;
}

.vibe-fit-opcao {
    display: block !important;
    width: 100% !important;
    padding: 13px 18px !important;
    text-align: left !important;
    background: rgba(67, 156, 218, 0.06) !important;
    background-color: rgba(67, 156, 218, 0.06) !important;
    border: 1.5px solid rgba(67, 156, 218, 0.22) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-family: var(--fit-font) !important;
    color: var(--mabu-navy, #1A4570) !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .25s, background .25s, color .25s, box-shadow .25s !important;
    margin: 0 !important;
    outline: none !important;
}

.vibe-fit-opcao:hover,
.vibe-fit-opcao:focus-visible {
    background: rgba(67, 156, 218, 0.14) !important;
    background-color: rgba(67, 156, 218, 0.14) !important;
    border-color: var(--mabu-cta, #439CDA) !important;
    color: var(--mabu-primary, #0A1F44) !important;
    outline: none !important;
    box-shadow: none !important;
}

.vibe-fit-opcao.vibe-fit-selecionada {
    background: var(--mabu-primary, #0A1F44) !important;
    background-color: var(--mabu-primary, #0A1F44) !important;
    border-color: var(--mabu-primary, #0A1F44) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(10,31,68,.22) !important;
}

/* Hover na selecionada: leve clarear sem perder o estado */
.vibe-fit-opcao.vibe-fit-selecionada:hover {
    background: var(--mabu-navy, #1A4570) !important;
    background-color: var(--mabu-navy, #1A4570) !important;
    border-color: var(--mabu-navy, #1A4570) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Botões de Navegação (Anterior / Próxima)
   !important em todas as props visuais
   Padrão Mabu: secundário = borda cinza neutra, primário = fill azul CTA
   -------------------------------------------------------------------------- */
#vibe-fit-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.vibe-fit-btn {
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--fit-font) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background .25s, color .25s, border-color .25s, opacity .25s, transform .25s, box-shadow .25s !important;
    outline: none !important;
    line-height: 1.2 !important;
}

.vibe-fit-btn:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Anterior — borda cinza neutra (= #vibe-btn-visitante) */
.vibe-fit-btn-secundario {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #dce6f0 !important;
    color: var(--mabu-navy, #1A4570) !important;
    box-shadow: none !important;
}

.vibe-fit-btn-secundario:not(:disabled):hover,
.vibe-fit-btn-secundario:not(:disabled):focus-visible {
    background: rgba(67, 156, 218, 0.08) !important;
    background-color: rgba(67, 156, 218, 0.08) !important;
    border-color: var(--mabu-cta, #439CDA) !important;
    color: var(--mabu-primary, #0A1F44) !important;
    outline: none !important;
}

/* Próxima/Continuar — fill azul CTA (= .vibe-cta-fixo) */
.vibe-fit-btn-primario {
    background: var(--mabu-cta, #439CDA) !important;
    background-color: var(--mabu-cta, #439CDA) !important;
    color: #ffffff !important;
    border: 2px solid var(--mabu-cta, #439CDA) !important;
    box-shadow: 0 4px 20px rgba(67,156,218,.35) !important;
}

.vibe-fit-btn-primario:not(:disabled):hover,
.vibe-fit-btn-primario:not(:disabled):focus-visible {
    background: var(--mabu-cta-hover, #2d84bd) !important;
    background-color: var(--mabu-cta-hover, #2d84bd) !important;
    border-color: var(--mabu-cta-hover, #2d84bd) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(67,156,218,.45) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Tela de Introdução (Dados + LGPD — exibida antes do quiz)
   -------------------------------------------------------------------------- */
#vibe-fit-intro-screen {
    display: none;
    flex-direction: column;
    gap: 0;
}

/* --------------------------------------------------------------------------
   Checkbox de concordância LGPD
   -------------------------------------------------------------------------- */
.vibe-fit-lgpd-wrap {
    margin-bottom: 20px;
}

.vibe-fit-lgpd-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--fit-text-muted, #7A7A7A) !important;
    line-height: 1.55 !important;
    font-family: var(--fit-font) !important;
    font-weight: 400 !important;
}

.vibe-fit-lgpd-label input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    accent-color: var(--mabu-cta, #439CDA) !important;
    border-radius: 4px !important;
}

.vibe-fit-lgpd-wrap.has-error .vibe-fit-lgpd-label {
    color: #c0392b !important;
}

.vibe-fit-lgpd-wrap .vibe-fit-error {
    display: none;
    margin-top: 6px;
}

.vibe-fit-lgpd-wrap.has-error .vibe-fit-error {
    display: block;
}

/* Loading dentro da tela do quiz (após última pergunta) */
#vibe-fit-quiz-screen .vibe-fit-form-loading {
    padding: 48px 0 !important;
    justify-content: center !important;
}

.vibe-fit-form-intro {
    text-align: center;
    padding-bottom: 24px;
}

.vibe-fit-form-intro h2 {
    color: var(--fit-text, #0A1F44);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.vibe-fit-form-intro p {
    color: var(--fit-text-muted, #7A7A7A);
    margin: 0;
    font-size: 14px;
}

.vibe-fit-field {
    margin-bottom: 16px;
}

.vibe-fit-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fit-text, #0A1F44);
    margin-bottom: 6px;
}

.vibe-fit-field input {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 2px solid var(--fit-border, #dce6f0) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: var(--fit-font) !important;
    color: var(--fit-text, #0A1F44) !important;
    background: var(--fit-surface, #f4f7fb) !important;
    background-color: var(--fit-surface, #f4f7fb) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color .25s !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.vibe-fit-field input:focus {
    border-color: var(--mabu-cta, #439CDA) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(67,156,218,.15) !important;
}

.vibe-fit-field .vibe-fit-error {
    color: #c0392b;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.vibe-fit-field.has-error input {
    border-color: #c0392b !important;
}

.vibe-fit-field.has-error .vibe-fit-error {
    display: block;
}

/* Botão "Ver Minha Vocação" */
#vibe-fit-form-submit {
    margin-top: 8px !important;
    width: 100% !important;
    padding: 15px !important;
    background: var(--mabu-cta, #439CDA) !important;
    background-color: var(--mabu-cta, #439CDA) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--fit-font) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(67,156,218,.35) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background .25s, box-shadow .25s, transform .25s !important;
    outline: none !important;
}

#vibe-fit-form-submit:hover:not(:disabled),
#vibe-fit-form-submit:focus-visible:not(:disabled) {
    background: var(--mabu-cta-hover, #2d84bd) !important;
    background-color: var(--mabu-cta-hover, #2d84bd) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(67,156,218,.45) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

#vibe-fit-form-submit:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading */
.vibe-fit-form-loading {
    display: none;
    text-align: center;
    padding: 12px 0;
    color: var(--fit-text-muted, #7A7A7A);
    font-size: 14px;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.vibe-fit-form-loading.vibe-fit-active {
    display: flex;
}

.vibe-fit-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid var(--fit-border, #dce6f0);
    border-top-color: var(--mabu-cta, #439CDA);
    border-radius: 50%;
    animation: fit-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes fit-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Tela de Resultado
   -------------------------------------------------------------------------- */
#vibe-fit-resultado {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#vibe-fit-resultado.vibe-fit-active {
    display: flex;
}

.vibe-fit-resultado-icone {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 12px;
    animation: fit-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes fit-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.vibe-fit-resultado-vocacao {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mabu-cta, #439CDA);
    margin-bottom: 4px;
}

.vibe-fit-resultado-titulo {
    font-size: 24px;
    font-weight: 800;
    color: var(--fit-text, #0A1F44);
    margin: 0 0 16px;
}

.vibe-fit-resultado-mensagem {
    font-size: 15px;
    color: var(--fit-text-muted, #7A7A7A);
    line-height: 1.6;
    max-width: 440px;
    margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Barras de compatibilidade
   -------------------------------------------------------------------------- */
.vibe-fit-scores {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    text-align: left;
}

.vibe-fit-score-row {
    display: grid;
    grid-template-columns: 26px 1fr 52px;
    align-items: center;
    gap: 8px;
}

.vibe-fit-score-icone {
    font-size: 18px;
    text-align: center;
}

.vibe-fit-score-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vibe-fit-score-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fit-text, #0A1F44);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vibe-fit-score-row.vibe-fit-vencedor .vibe-fit-score-label {
    color: var(--mabu-primary, #0A1F44);
    font-weight: 700;
}

.vibe-fit-score-barra-wrap {
    height: 9px;
    background: var(--fit-border, #dce6f0);
    border-radius: 99px;
    overflow: hidden;
}

.vibe-fit-score-barra {
    height: 100%;
    background: var(--mabu-cta, #439CDA);
    border-radius: inherit;
    width: 0%;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* Vencedora: gradient navy */
.vibe-fit-score-row.vibe-fit-vencedor .vibe-fit-score-barra {
    background: linear-gradient(90deg, var(--mabu-primary, #0A1F44), var(--mabu-navy, #1A4570));
}

.vibe-fit-score-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--fit-text, #0A1F44);
    text-align: right;
}

/* --------------------------------------------------------------------------
   CTAs do resultado
   -------------------------------------------------------------------------- */
.vibe-fit-resultado-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
}

/* "Ver vagas da minha vocação" — fill azul (= .vibe-cta-fixo) */
.vibe-fit-btn-cta {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: var(--mabu-cta, #439CDA) !important;
    background-color: var(--mabu-cta, #439CDA) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--fit-font) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    box-shadow: 0 4px 20px rgba(67,156,218,.4) !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background .25s, transform .25s, box-shadow .25s !important;
    outline: none !important;
}

.vibe-fit-btn-cta:hover,
.vibe-fit-btn-cta:focus-visible {
    background: var(--mabu-cta-hover, #2d84bd) !important;
    background-color: var(--mabu-cta-hover, #2d84bd) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(67,156,218,.5) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
    text-decoration: none !important;
}

/* "Fazer o teste novamente" — secundário cinza (= .vibe-fit-btn-secundario) */
.vibe-fit-btn-reiniciar {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mabu-navy, #1A4570) !important;
    border: 2px solid #dce6f0 !important;
    border-radius: 50px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--fit-font) !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 100% !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .25s, background .25s, color .25s !important;
    outline: none !important;
}

.vibe-fit-btn-reiniciar:hover,
.vibe-fit-btn-reiniciar:focus-visible {
    background: rgba(67, 156, 218, 0.08) !important;
    background-color: rgba(67, 156, 218, 0.08) !important;
    border-color: var(--mabu-cta, #439CDA) !important;
    color: var(--mabu-primary, #0A1F44) !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Cartões de empate
   -------------------------------------------------------------------------- */
.vibe-fit-empate-areas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.vibe-fit-empate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--fit-surface, #f4f7fb);
    border: 2px solid var(--fit-border, #dce6f0);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fit-text, #0A1F44);
}

.vibe-fit-empate-card span:first-child {
    font-size: 36px;
}