@media (max-width: 800px) {
    .action-bar {
        align-items: stretch;
        padding: 10px 12px 8px;
        flex-wrap: wrap;
        overflow: visible;
        overflow-x: visible;
    }

    .action-brand {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        justify-content: flex-start;
    }

    .action-copy {
        display: grid;
    }

    .action-menu {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: end;
        gap: 6px;
        overflow: visible;
        overflow-x: visible;
        padding-bottom: 0;
        width: 100%;
        min-width: 0;
    }

    .action-menu::-webkit-scrollbar {
        display: none;
    }

    .action-button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 7px 6px;
        border-radius: 10px;
        box-sizing: border-box;
        white-space: normal;
        overflow: hidden;
        text-align: center;
        justify-content: center;
    }

    .container {
        padding: 14px 14px 60px;
    }

    .study-intro {
        display: grid;
        padding: 20px 18px;
    }

    .user-badge {
        min-width: 0;
    }

    .filters-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .question-card {
        padding: 22px 18px;
    }

    .quiz-head {
        flex-wrap: wrap;
    }

    .login-card {
        padding: 30px 24px;
    }

    .report-summary {
        grid-template-columns: 1fr 1fr;
    }

    .ranking-podium {
        grid-template-columns: 1fr;
    }

    .podium-1 {
        transform: none;
    }
}

@media (max-width: 620px) {
    .action-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        overflow: visible;
        overflow-x: visible;
    }

    .action-button span:not(.action-icon),
    .action-button .desktop-label {
        display: inline !important;
    }

    .action-button,
    .action-button.action-button-square {
        width: 100%;
        min-width: 0;
        padding: 7px 5px;
        border-radius: 9px;
        font-size: 10.5px;
        white-space: normal;
        overflow: hidden;
    }

    .modal-overlay {
        align-items: end;
        padding: 0;
    }

    .report-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }

    .report-modal-header {
        padding: 22px 18px 18px;
    }

    .report-modal-header h2 {
        font-size: 23px;
    }

    .review-modal-scroll {
        padding: 16px;
        max-height: calc(92vh - 96px);
    }

    .report-summary,
    .ranking-podium {
        padding-left: 14px;
        padding-right: 14px;
    }

    .report-toolbar {
        align-items: flex-start;
        margin-left: 14px;
        margin-right: 14px;
    }

    .report-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .history-card,
    .ranking-card {
        align-items: flex-start;
    }

    .history-card-score,
    .ranking-card-score {
        min-width: 70px;
    }

    .data-row,
    .ranking-row {
        grid-template-columns: 1fr;
    }

    .ranking-score {
        text-align: left;
    }

    .wide {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .quiz-controls {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .report-summary {
        grid-template-columns: 1fr 1fr;
    }

    .history-card,
    .ranking-card {
        display: grid;
    }

    .history-card-score,
    .ranking-card-score {
        justify-items: start;
        padding-left: 17px;
    }
}

/* Responsividade da Versão 5.0 */
@media (max-width: 820px) {
    .profile-dashboard { grid-template-columns: 1fr; }
    .profile-metrics { grid-template-columns: repeat(3, 1fr); }
    .history-summary-v5 { grid-template-columns: repeat(2, 1fr); }
    .admin-user-card { grid-template-columns: auto 1fr; }
    .admin-user-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 560px) {
    .profile-identity { padding: 17px; }
    .profile-avatar { width: 58px; height: 58px; font-size: 18px; }
    .profile-identity h1 { font-size: 22px; }
    .profile-metrics { grid-template-columns: 1fr; }
    .profile-metric { min-height: 90px; border-left: 0; border-top: 1px solid rgba(205,217,236,.18); }
    .profile-metric:first-child { border-top: 0; }
    .history-toolbar-v5 { align-items: stretch; flex-direction: column; }
    .history-filters, .history-actions { width: 100%; }
    .history-filter { flex: 1; padding-inline: 8px; }
    .history-answer-card { grid-template-columns: auto 1fr; }
    .history-review-button { grid-column: 1 / -1; width: 100%; }
    .history-answer-copy strong { white-space: normal; }
    .my-ranking-card { grid-template-columns: auto 1fr; }
    .my-ranking-card > div { grid-column: 1 / -1; }
}

/* =========================================================
   Modais Histórico e Ranking — experiência mobile flutuante
   ========================================================= */
@media (max-width: 760px) {
    #historyModal.modal-overlay,
    #rankingModal.modal-overlay {
        place-items: center;
        align-items: center;
        padding: 16px 12px;
        overflow: hidden;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: min(94vw, 560px);
        max-height: 86dvh;
        height: auto;
        margin: 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
        box-shadow: 0 18px 55px rgba(5, 15, 36, .55);
        scrollbar-gutter: stable;
    }

    #historyModal .report-modal-header,
    #rankingModal .report-modal-header {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 17px 16px 14px;
    }

    #historyModal .report-modal-header h2,
    #rankingModal .report-modal-header h2 {
        font-size: 20px;
        line-height: 1.15;
    }

    #historyModal .report-modal-header p:not(.section-kicker),
    #rankingModal .report-modal-header p:not(.section-kicker) {
        font-size: 12px;
        line-height: 1.35;
    }

    #historyModal .modal-close,
    #rankingModal .modal-close {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    /* A rolagem passa a pertencer ao modal inteiro, evitando
       listas internas sem acesso ao restante do conteúdo. */
    #historyModal .history-answer-list,
    #rankingModal .report-list {
        max-height: none;
        overflow: visible;
    }

    #historyModal .history-answer-list {
        padding: 0 12px 18px;
    }

    #rankingModal .report-list {
        padding: 0 12px 18px;
    }

    #historyModal .history-summary-v5 {
        margin: 14px 12px;
        gap: 8px;
    }

    #historyModal .history-stat-v5 {
        min-height: 92px;
        padding: 10px 8px;
    }

    #historyModal .history-stat-v5 strong {
        font-size: 27px;
    }

    #historyModal .history-toolbar-v5 {
        margin: 12px;
    }

    #rankingModal .my-ranking-card {
        margin: 12px;
        padding: 12px;
    }

    #rankingModal .ranking-podium {
        padding: 12px 12px 4px;
        gap: 7px;
    }

    #rankingModal .podium-card {
        padding: 11px 7px;
    }

    #rankingModal .report-toolbar {
        margin: 12px;
    }
}

@media (max-width: 420px) {
    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: calc(100vw - 20px);
        max-height: 84dvh;
        border-radius: 12px;
    }

    #rankingModal .ranking-podium {
        grid-template-columns: 1fr;
    }

    #rankingModal .podium-1 {
        transform: none;
    }
}

/* Correção final do menu mobile: sem rolagem horizontal */
@media (max-width: 800px) {
    .action-bar {
        flex-wrap: wrap !important;
        overflow: visible !important;
        overflow-x: visible !important;
    }

    .action-menu {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 6px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }

    .action-button,
    .action-button.action-button-square {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 7px 6px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11px !important;
    }

    .action-button span:not(.action-icon),
    .action-button .desktop-label {
        display: inline !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 430px) {
    .action-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Banner da página inicial ocupando todo o botão, sem cortar a imagem */
.action-brand {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 190px !important;
    height: 72px !important;
    min-width: 190px !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
}

.action-brand .action-slogan-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: 1 1 auto !important;
}

.action-brand .action-copy {
    display: none !important;
}

@media (max-width: 820px) {
    .action-brand {
        width: 170px !important;
        height: 64px !important;
        min-width: 170px !important;
        min-height: 64px !important;
        padding: 0 !important;
    }

    .action-brand .action-slogan-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 430px) {
    .action-brand {
        width: 154px !important;
        height: 58px !important;
        min-width: 154px !important;
        min-height: 58px !important;
    }
}



/* Cabeçalho / barra principal não fixa */
.action-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}



/* =========================================================
   MOBILE: banner à esquerda + botões à direita
   Botões excedentes quebram para baixo, sempre à direita.
   Sem rolagem horizontal.
   ========================================================= */
@media (max-width: 820px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .action-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .action-brand {
        flex: 0 0 154px !important;
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        align-self: flex-start !important;
    }

    .action-brand .action-slogan-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .action-menu {
        display: flex !important;
        flex: 1 1 calc(100% - 162px) !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-content: flex-start !important;
        align-items: flex-start !important;
        gap: 5px !important;
        width: auto !important;
        max-width: calc(100% - 162px) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .action-menu .action-button,
    .action-menu .action-button-square {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        height: auto !important;
        padding: 6px 7px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .action-menu .action-button > span:last-child,
    .action-menu .desktop-label {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    .action-menu .action-icon {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        min-width: 11px !important;
        line-height: 1 !important;
    }
}

/* Em celulares menores, reduz um pouco o banner para sobrar mais espaço à direita */
@media (max-width: 430px) {
    .action-brand {
        flex-basis: 138px !important;
        width: 138px !important;
        min-width: 138px !important;
        max-width: 138px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    .action-menu {
        flex-basis: calc(100% - 146px) !important;
        max-width: calc(100% - 146px) !important;
        gap: 4px !important;
    }

    .action-menu .action-button,
    .action-menu .action-button-square {
        min-height: 30px !important;
        padding: 5px 6px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
    }

    .action-menu .action-icon {
        font-size: 10px !important;
        min-width: 10px !important;
    }
}

/* Muito estreito: mantém banner em cima à esquerda, menu continua abaixo à direita */
@media (max-width: 340px) {
    .action-brand {
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }

    .action-menu {
        flex: 1 1 calc(100% - 140px) !important;
        max-width: calc(100% - 140px) !important;
    }
}



/* =========================================================
   MODAIS HISTÓRICO E RANKING — RESPONSIVOS COM ROLAGEM
   Funciona em desktop, tablets e celulares em paisagem.
   ========================================================= */
#historyModal,
#rankingModal,
.modal-overlay {
    overflow: hidden !important;
}

#historyModal .report-modal,
#rankingModal .report-modal,
.history-v5-modal,
.ranking-v5-modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(960px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 16px auto !important;
    box-sizing: border-box !important;
}

#historyModal .report-modal-header,
#rankingModal .report-modal-header,
.history-v5-modal .report-modal-header,
.ranking-v5-modal .report-modal-header {
    flex: 0 0 auto !important;
}

#historyModal .history-summary-v5,
#rankingModal .my-ranking-card,
#rankingModal .ranking-podium,
#historyModal .history-toolbar-v5,
#rankingModal .report-toolbar {
    flex: 0 0 auto !important;
}

/* O conteúdo principal rola dentro do modal */
#historyModal .report-list,
#historyModal #historyList,
#rankingModal .report-list,
#rankingModal #rankingList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 4px !important;
}

/* Caso o conteúdo acima da lista fique alto, o próprio modal também pode rolar */
#historyModal .report-modal,
#rankingModal .report-modal {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Desktop */
@media (min-width: 821px) {
    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: min(980px, calc(100vw - 48px)) !important;
        max-height: calc(100vh - 48px) !important;
        margin: 24px auto !important;
    }
}

/* Tablets e celulares em paisagem */
@media (max-height: 620px) and (orientation: landscape) {
    #historyModal,
    #rankingModal {
        align-items: center !important;
        padding: 8px !important;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 8px auto !important;
        border-radius: 14px !important;
    }

    #historyModal .report-modal-header,
    #rankingModal .report-modal-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #historyModal .history-summary-v5,
    #rankingModal .ranking-podium {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* Celulares */
@media (max-width: 600px) {
    #historyModal,
    #rankingModal {
        padding: 10px !important;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 10px auto !important;
        border-radius: 14px !important;
    }

    #historyModal .report-modal-header h2,
    #rankingModal .report-modal-header h2 {
        font-size: 1.2rem !important;
    }
}


/* REGRA DE SEGURANÇA: elementos ocultos continuam ocultos no menu responsivo */
.action-menu .action-button.hidden,
.action-menu .hidden,
#navAdmin.hidden {
    display: none !important;
}


/* =========================================================
   HISTÓRICO / RANKING — CABEÇALHO FIXO + CORPO ROLÁVEL
   ========================================================= */
#historyModal,
#rankingModal {
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#historyModal.hidden,
#rankingModal.hidden {
    display: none !important;
}

#historyModal .report-modal,
#rankingModal .report-modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(980px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#historyModal .report-modal-header,
#rankingModal .report-modal-header {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

/* Todo o conteúdo restante rola aqui */
#historyModal .report-modal-body-scroll,
#rankingModal .report-modal-body-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
    padding-bottom: 18px !important;
}

/* Listas não criam uma segunda rolagem conflitante */
#historyModal #historyList,
#rankingModal #rankingList,
#historyModal .report-list,
#rankingModal .report-list {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* Desktop */
@media (min-width: 821px) {
    #historyModal,
    #rankingModal {
        padding: 24px !important;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        max-height: calc(100vh - 48px) !important;
        width: min(980px, calc(100vw - 48px)) !important;
        max-width: calc(100vw - 48px) !important;
    }
}

/* Celulares */
@media (max-width: 600px) {
    #historyModal,
    #rankingModal {
        padding: 10px !important;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 14px !important;
    }

    #historyModal .report-modal-body-scroll,
    #rankingModal .report-modal-body-scroll {
        padding-bottom: 14px !important;
    }
}

/* Paisagem em celular/tablet */
@media (orientation: landscape) and (max-height: 700px) {
    #historyModal,
    #rankingModal {
        padding: 8px !important;
        align-items: center !important;
    }

    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 12px !important;
    }

    #historyModal .report-modal-header,
    #rankingModal .report-modal-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #historyModal .report-modal-body-scroll,
    #rankingModal .report-modal-body-scroll {
        overflow-y: auto !important;
        min-height: 0 !important;
    }
}



/* Painel administrativo com a mesma largura útil do cabeçalho */
#adminView {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

#adminView .section-title,
#adminView .admin-tabs,
#adminView .admin-panel,
#adminView .admin-grid,
#adminView .panel,
#adminView .panel.wide,
#adminView form,
#adminView .data-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#adminView input,
#adminView select,
#adminView textarea,
#adminView button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 980px) {
    #adminView .admin-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 600px) {
    #adminView {
        padding: 0 !important;
    }

    #adminView .admin-panel {
        padding: 0 !important;
    }

    #adminView .panel {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    #adminView .admin-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #adminView .admin-tabs .admin-tab {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #adminView .data-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #adminView .data-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: 100% !important;
    }

    #adminView .data-actions .ui-button {
        flex: 0 1 auto !important;
        white-space: normal !important;
    }
}

@media (max-width: 380px) {
    #adminView .panel {
        padding: 12px !important;
    }

    #adminView .data-actions .ui-button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}



/* =========================================================
   PAINEL ADMINISTRATIVO CENTRALIZADO
   Mesma largura visual do cabeçalho / barra de ações.
   ========================================================= */
#adminView {
    width: calc(100% - 32px) !important;
    max-width: 920px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

#adminView > .section-title,
#adminView > .admin-tabs,
#adminView > .admin-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#adminView .admin-grid,
#adminView .panel,
#adminView .panel.wide,
#adminView form,
#adminView .data-row {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Tablet */
@media (max-width: 980px) {
    #adminView {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #adminView .admin-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Celular */
@media (max-width: 600px) {
    #adminView {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin: 0 auto !important;
    }

    #adminView .panel {
        width: 100% !important;
        padding: 12px !important;
    }

    #adminView .admin-tabs {
        width: 100% !important;
        justify-content: center !important;
    }

    #adminView .data-actions {
        justify-content: flex-end !important;
    }
}



/* ADMIN CENTRALIZADO NA MESMA ÁREA DO CABEÇALHO */
.container #adminView {
 display:block; position:relative !important; float:none !important; clear:both !important;
 width:100% !important; max-width:880px !important; min-width:0 !important;
 margin:0 auto !important; padding-left:0 !important; padding-right:0 !important;
 left:auto !important; right:auto !important; transform:none !important; box-sizing:border-box !important;
}
.container #adminView.hidden { display:none !important; }
.container #adminView > .section-title,
.container #adminView > .admin-tabs,
.container #adminView > .admin-panel {
 width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important;
}
.container #adminView .admin-grid,
.container #adminView .panel,
.container #adminView .panel.wide,
.container #adminView form {
 max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
}
@media (max-width:920px) {
 .container #adminView { width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; }
}

/* =========================================================
   VISUAL 1.3 — HISTÓRICO E RANKING COMPACTOS
   Mantém conteúdo, rolagem e comportamento dos modais.
   ========================================================= */

/* Desktop: ambos ficam claramente menores que o cabeçalho (920px). */
@media (min-width: 821px) {
    #historyModal .report-modal {
        width: min(700px, calc(100vw - 64px)) !important;
        max-width: 700px !important;
        margin-inline: auto !important;
    }

    #rankingModal .report-modal {
        width: min(660px, calc(100vw - 64px)) !important;
        max-width: 660px !important;
        margin-inline: auto !important;
    }

    #historyModal .report-modal-header,
    #rankingModal .report-modal-header {
        padding: 20px 22px 17px !important;
    }

    #historyModal .report-modal-header h2,
    #rankingModal .report-modal-header h2 {
        font-size: 24px !important;
    }

    #historyModal .report-modal-body-scroll,
    #rankingModal .report-modal-body-scroll {
        padding-inline: 20px;
    }

    #historyModal .history-summary-v5 {
        gap: 9px;
    }

    #historyModal .history-stat-v5 {
        min-height: 102px;
        padding: 11px 9px;
    }

    #historyModal .history-stat-v5 strong {
        font-size: 29px;
    }

    #rankingModal .ranking-podium {
        gap: 9px;
    }
}

/* Tablet: janela flutuante menor, centralizada e sem encostar nas bordas. */
@media (min-width: 601px) and (max-width: 820px) {
    #historyModal .report-modal {
        width: min(86vw, 660px) !important;
        max-width: 660px !important;
        margin-inline: auto !important;
        border-radius: 12px !important;
    }

    #rankingModal .report-modal {
        width: min(84vw, 620px) !important;
        max-width: 620px !important;
        margin-inline: auto !important;
        border-radius: 12px !important;
    }
}

/* Celular: mantém margem lateral e o comportamento de rolagem já existente. */
@media (max-width: 600px) {
    #historyModal .report-modal,
    #rankingModal .report-modal {
        width: min(92vw, 520px) !important;
        max-width: 520px !important;
        margin-inline: auto !important;
        border-radius: 14px !important;
    }

    #historyModal .report-modal-header,
    #rankingModal .report-modal-header {
        padding: 16px 15px 13px !important;
    }

    #historyModal .report-modal-header h2,
    #rankingModal .report-modal-header h2 {
        font-size: 19px !important;
    }
}


/* =========================================================
   ADMINISTRAÇÃO 2.0 — RESPONSIVIDADE
   ========================================================= */
@media (max-width: 900px) {
    .admin-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-question-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-toolbar-grid,
    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-title-row {
        align-items: flex-start;
    }

    .admin-tabs-v2 {
        position: relative;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .admin-tabs-v2 .admin-tab {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-card-v2 {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-user-card-v2 .admin-user-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .admin-action-menu-popover {
        right: auto;
        left: 0;
    }

    .admin-content-row,
    .danger-action-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-content-row .data-actions,
    .danger-action-card .ui-button,
    .danger-action-copy {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .admin-summary-grid,
    .admin-toolbar-grid,
    .admin-form-grid,
    .admin-question-filters {
        grid-template-columns: 1fr;
    }

    .admin-summary-card {
        min-height: 88px;
    }

    .admin-summary-card strong {
        font-size: 25px;
    }

    .admin-user-card-v2 {
        grid-template-columns: 1fr;
    }

    .admin-user-card-v2 .admin-user-avatar {
        display: none;
    }

    .admin-user-card-v2 .admin-user-actions {
        grid-column: auto;
        width: 100%;
    }

    .admin-user-card-v2 .admin-user-actions > .ui-button,
    .admin-user-card-v2 .admin-action-menu {
        flex: 1 1 130px;
    }

    .admin-action-menu > summary {
        text-align: center;
    }

    .admin-action-menu-popover {
        position: static;
        min-width: 0;
        margin-top: 5px;
    }

    .admin-modal {
        padding: 10px;
    }

    .admin-modal-card {
        max-height: calc(100vh - 20px);
        padding: 15px;
        border-radius: 8px;
    }

    .admin-question-card-head {
        flex-direction: column;
    }
}