:root {
    --brand: #1f4f93;
    /* azul */
    --brand-dark: #173c72;
}

body {
    background: #f4f6f9;
}

.brand-header {
    background: linear-gradient(0deg, var(--brand), var(--brand-dark));
    color: #fff;
}

.brand-logo {
    height: 44px;
}

.card-soft {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}

.small-muted {
    color: #6c757d;
    font-size: .9rem;
}

.badge-action {
    background: #dc3545;
}

/* NPS scale (0..10) */
.nps-scale {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.nps-scale .btn {
    width: 44px;
    padding: 10px 0;
    border-radius: 10px !important;
    border: 0;
    color: #fff;
    font-weight: 700;
}

.nps-scale .btn:hover {
    filter: brightness(0.95);
}

.nps-scale .btn-check:focus+.btn,
.nps-scale .btn-check:checked+.btn {
    outline: 3px solid rgba(13, 110, 253, .35);
    /* azul bootstrap */
    outline-offset: 2px;
    box-shadow: none;
}

/* Faz caber melhor no mobile */
@media (max-width: 520px) {
    .nps-scale {
        flex-wrap: wrap;
    }

    .nps-scale .btn {
        width: calc(20% - 6px);
    }

    /* 5 por linha */
}

/* Cores (vermelho -> amarelo -> verde) */
.nps-0 {
    background: #b71c1c;
}

.nps-1 {
    background: #c62828;
}

.nps-2 {
    background: #d32f2f;
}

.nps-3 {
    background: #e53935;
}

.nps-4 {
    background: #f4511e;
}

.nps-5 {
    background: #fb8c00;
}

.nps-6 {
    background: #f9a825;
    color: #1f2937;
}

.nps-7 {
    background: #fdd835;
    color: #1f2937;
}

.nps-8 {
    background: #7cb342;
    color: #0b1f10;
}

.nps-9 {
    background: #43a047;
}

.nps-10 {
    background: #2e7d32;
}

@media (max-width: 420px) {
    .nps-scale .btn {
        width: calc(25% - 6px);
    }

    /* 4 por linha */
}

/* NPS scale (0..10) */
.nps-scale {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.nps-scale .btn {
    width: 44px;
    padding: 10px 0;
    border-radius: 10px !important;
    border: 0;
    color: #fff;
    font-weight: 700;
}

.nps-scale .btn:hover {
    filter: brightness(0.95);
}

.nps-scale .btn-check:focus+.btn,
.nps-scale .btn-check:checked+.btn {
    outline: 3px solid rgba(13, 110, 253, .35);
    /* azul bootstrap */
    outline-offset: 2px;
    box-shadow: none;
}

/* Faz caber melhor no mobile */
@media (max-width: 520px) {
    .nps-scale {
        flex-wrap: wrap;
    }

    .nps-scale .btn {
        width: calc(20% - 6px);
    }

    /* 5 por linha */
}

/* Cores (vermelho -> amarelo -> verde) */
.nps-0 {
    background: #b71c1c;
}

.nps-1 {
    background: #c62828;
}

.nps-2 {
    background: #d32f2f;
}

.nps-3 {
    background: #e53935;
}

.nps-4 {
    background: #f4511e;
}

.nps-5 {
    background: #fb8c00;
}

.nps-6 {
    background: #f9a825;
    color: #1f2937;
}

.nps-7 {
    background: #fdd835;
    color: #1f2937;
}

.nps-8 {
    background: #7cb342;
    color: #0b1f10;
}

.nps-9 {
    background: #43a047;
}

.nps-10 {
    background: #2e7d32;
}

/* Overlay de carregamento */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(244, 246, 249, .85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-card {
    width: min(420px, 92vw);
    border-radius: 16px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    text-align: center;
}

.logo-spin {
    width: 86px;
    height: 86px;
    object-fit: contain;
    animation: logoRotate 1.2s linear infinite;
}

@keyframes logoRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}