/* Shared public shell styles for Concurseiro.Ninja. */
:root {
            --cn-ninja-green: #49581e;
            --cn-ninja-green-hover: #5d6f27;
            --cn-ninja-green-dark: #334014;
            --cn-ninja-green-soft: #eef3df;
            --cn-ninja-green-soft-strong: #dfe8c7;
            --cn-ninja-green-border: #c6d29e;
            --cn-ninja-green-ring: rgba(73, 88, 30, .24);
            --green: var(--cn-ninja-green);
        }

/* Tom das rotas públicas no tom do painel (13/10/2026). Cliente: "Nas rotas públicas, use esse tom, esse tipo de cores.
   A paleta atual está muito crua, pesada."; "deixar no máximo escuro como o que enviei, não tons mais escuros que esse, e
   usar gradiente"; "Nem tão escuro como atualmente, nem tão desbotado [...] não vai deixar o site completamente verde".
   Especificação docs/ux/tom-publico.md (§3), maquete docs/ux/maquetes/tom-publico.html. Obra chat-2026-10-13-obra-tom-publico.
   Intervalo dos fundos escuros (faixas, capas, rodapé): de #0f4c5c (o mais escuro) a #0d6b5e (o mais claro), os três
   pontos do cabeçalho da Visão geral do painel (--cn-header-green em resources/css/cn-ui.css). Fundos claros não mudam. */
:root {
    --cn-tom-linear: linear-gradient(120deg, #0d6b5e 0%, #0f5c5e 50%, #0f4c5c 100%);
    /* O brilho creme do painel, sobre o visual da faixa (ninja ou capturas), longe do texto e apagado antes da borda. */
    --cn-tom-brilho: radial-gradient(ellipse 22% 30% at 78% 0%, rgba(223, 232, 199, .30), rgba(223, 232, 199, 0));
    --cn-tom-faixa: var(--cn-tom-brilho), var(--cn-tom-linear);
    --cn-tom-capa: linear-gradient(150deg, #0f4c5c 0%, #0d6b5e 100%);
    /* Faixas com muito texto translúcido (rodapé, números da home, faixas finais): a metade escura, sem brilho. */
    --cn-tom-faixa-texto: linear-gradient(120deg, #0f5c5e 0%, #0f4c5c 100%);
    --cn-tom-vidro: rgba(255, 255, 255, .14);
    --cn-tom-vidro-borda: rgba(255, 255, 255, .56);
    --cn-tom-cartao-vidro-borda: rgba(255, 255, 255, .38);
    --cn-tom-creme: #dfe8c7;
    --cn-tom-creme-tinta: #1f2a07;
}
@media (min-width: 1100px) {
    :root { --cn-tom-brilho: radial-gradient(ellipse 11% 70% at 89% 34%, rgba(223, 232, 199, .30), rgba(223, 232, 199, 0)); }
}

        .cn-public-site-header {
            position: sticky;
            top: 0;
            z-index: 40;
            border-bottom: 1px solid rgba(219, 230, 234, .9);
            background: rgba(255, 255, 255, .94);
            backdrop-filter: blur(18px);
        }

        /* 13/10/2026 (correção do cliente: "o estratégia é largo, quase toda a largura"): contêiner único das páginas
           públicas com margem lateral de 5vw (mínimo 16 px) e teto de 1760 px; cabeçalho, trilha, rodapé e conteúdo. */
        :root {
            --cn-public-container: min(1760px, calc(100% - 2 * max(16px, 5vw)));
        }

        .cn-public-wrap {
            width: var(--cn-public-container);
            margin: 0 auto;
        }

        .cn-public-topbar {
            min-height: auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 24px 22px;
            padding: 12px 0 10px;
        }

        .cn-public-topbar > * {
            min-width: 0;
        }

        .cn-public-brand {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
            display: inline-flex;
            width: fit-content;
            min-height: 44px;
            align-items: center;
            padding: 4px 8px 4px 0;
            line-height: 1;
            text-decoration: none;
        }

        .cn-public-brand img {
            width: min(210px, 52vw);
            height: auto;
            display: block;
        }

        .cn-public-logo-dark {
            display: none !important;
        }

        .cn-public-nav-disclosure {
            display: none;
        }

        .cn-public-nav-summary {
            display: none;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-logo-light {
            display: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-logo-dark {
            display: block !important;
        }

        .cn-public-nav {
            grid-column: 1 / -1;
            grid-row: 2;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-top: 1px solid rgba(219, 230, 234, .72);
            padding-top: 10px;
        }

        .cn-public-nav-item {
            position: relative;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            min-width: 0;
        }

        .cn-public-nav a,
        .cn-public-nav-trigger {
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 0;
            background: transparent;
            padding: 0 7px;
            color: #254550;
            font: inherit;
            font-size: .8rem;
            font-weight: 800;
            line-height: 1.12;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
        }

        .cn-public-nav a:hover,
        .cn-public-nav-trigger:hover,
        .cn-public-nav-item:focus-within > .cn-public-nav-trigger {
            background: var(--cn-ninja-green-soft);
            color: var(--cn-ninja-green-dark);
            text-decoration: none;
        }

        .cn-public-nav a.is-active,
        .cn-public-nav a[aria-current="page"],
        .cn-public-nav-trigger.is-active {
            position: relative;
            background: var(--cn-ninja-green-soft);
            color: var(--cn-ninja-green-dark);
            box-shadow: inset 0 0 0 1px var(--cn-ninja-green-border);
        }

        .cn-public-nav a.is-active::after,
        .cn-public-nav a[aria-current="page"]::after,
        .cn-public-nav-trigger.is-active::after {
            content: "";
            position: absolute;
            left: 7px;
            right: 7px;
            bottom: 4px;
            height: 3px;
            border-radius: 999px;
            background: var(--cn-ninja-green);
        }

        .cn-public-nav-trigger {
            gap: 7px;
        }

        .cn-public-nav-trigger::before {
            content: "";
            width: 6px;
            height: 6px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-2px) rotate(45deg);
            order: 2;
        }

        .cn-public-submenu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 60;
            min-width: 190px;
            display: grid;
            gap: 4px;
            border: 1px solid #dbe6ea;
            border-radius: 8px;
            background: #ffffff;
            padding: 8px;
            box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-4px);
            transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        }

        .cn-public-nav-item:hover .cn-public-submenu,
        .cn-public-nav-item:focus-within .cn-public-submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .cn-public-submenu a {
            width: 100%;
            justify-content: flex-start;
        }

        .cn-public-actions {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .cn-public-btn {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #dbe6ea;
            border-radius: 8px;
            padding: 0 18px;
            font-weight: 900;
            white-space: normal;
            overflow-wrap: anywhere;
            max-width: 100%;
            text-align: center;
            line-height: 1.35;
            text-decoration: none;
        }

        .cn-public-btn:hover {
            text-decoration: none;
        }

        .cn-public-btn-green {
            border-color: var(--cn-ninja-green);
            background: var(--cn-ninja-green);
            color: #fff;
        }

        .cn-public-btn-green:hover,
        .cn-public-btn-green:focus-visible {
            border-color: var(--cn-ninja-green-hover);
            background: var(--cn-ninja-green-hover);
            color: #fff;
        }

        .cn-public-btn-blue {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff;
        }

        .cn-public-btn.is-active,
        .cn-public-btn[aria-current="page"] {
            box-shadow: 0 0 0 3px var(--cn-ninja-green-ring), inset 0 0 0 2px rgba(255, 255, 255, .72);
        }

        @media (max-width: 1040px) {
            .cn-public-topbar {
                grid-template-columns: 1fr auto;
            }

            .cn-public-nav {
                justify-content: flex-start;
                overflow-x: visible;
                flex-wrap: wrap;
                align-items: center;
                padding-bottom: 6px;
            }
        }

        @media (max-width: 820px) {
            .cn-public-wrap {
                width: var(--cn-public-container);
            }

            .cn-public-topbar {
                gap: 12px;
            }

            .cn-public-nav-disclosure {
                grid-column: 1 / -1;
                grid-row: 2;
                display: block;
                width: 100%;
                border-top: 1px solid rgba(219, 230, 234, .72);
                padding-top: 8px;
            }

            .cn-public-topbar > .cn-public-nav {
                display: none;
            }

            .cn-public-nav-summary {
                min-height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
                border-radius: 8px;
                padding: 0 12px;
                color: #254550;
                font-size: .88rem;
                font-weight: 900;
                list-style: none;
                cursor: pointer;
            }

            .cn-public-nav-summary::-webkit-details-marker {
                display: none;
            }

            .cn-public-nav-summary::before {
                content: "";
                width: 17px;
                height: 2px;
                flex: 0 0 auto;
                border-radius: 999px;
                background: currentColor;
                box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
            }

            .cn-public-nav-summary:hover {
                background: var(--cn-ninja-green-soft);
                color: var(--cn-ninja-green-dark);
            }

            .cn-public-nav-disclosure:not([open]) > .cn-public-nav {
                display: none;
            }

            .cn-public-nav-disclosure[open] > .cn-public-nav {
                display: grid;
            }

            .cn-public-nav {
                width: 100%;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                overflow-x: visible;
                gap: 4px;
                border-top: 0;
                padding: 8px 0 4px;
            }

            .cn-public-nav a,
            .cn-public-nav-trigger {
                width: 100%;
                min-height: 34px;
                justify-content: flex-start;
                padding: 0 8px;
                font-size: .84rem;
                text-align: left;
                white-space: normal;
            }

            .cn-public-actions {
                grid-column: 2;
                grid-row: 1;
                width: auto;
                justify-content: flex-end;
            }

            .cn-public-actions .cn-public-btn {
                min-width: 0;
                padding: 0 12px;
            }
        }

        @media (max-width: 540px) {
            .cn-public-wrap {
                width: var(--cn-public-container);
                margin-left: auto;
                margin-right: auto;
            }

            .cn-public-topbar {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .cn-public-brand {
                grid-row: 1;
                margin-bottom: 2px;
            }

            .cn-public-actions {
                grid-column: 1;
                grid-row: 3;
                width: 100%;
                justify-content: stretch;
            }

            .cn-public-actions .cn-public-btn {
                flex: 1 1 calc(50% - 5px);
                padding: 0 10px;
            }
        }

.cn-public-site-footer {
            padding: 42px 0 34px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            background: var(--cn-tom-faixa-texto);
            color: #fff;
        }

        .cn-public-footer-wrap {
            width: var(--cn-public-container);
            margin: 0 auto;
        }

        .cn-public-footer-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.7fr) minmax(260px, .78fr);
            gap: 18px;
        }

        .cn-public-footer-column {
            min-width: 0;
            overflow-wrap: anywhere;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 8px;
            background: rgba(255, 255, 255, .07);
            padding: 20px;
            box-shadow: 0 18px 34px rgba(0, 0, 0, .1);
        }

        .cn-public-footer-column h2,
        .cn-public-footer-column h3 {
            margin: 0 0 12px;
            letter-spacing: 0;
        }

        .cn-public-footer-column p {
            margin: 0;
            color: rgba(255, 255, 255, .78);
            line-height: 1.58;
        }

        .cn-public-footer-links {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 28px;
            row-gap: 9px;
        }

        .cn-public-social-links {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .cn-public-footer-links a {
            display: flex;
            align-items: center;
            min-width: 0;
            min-height: 44px;
            overflow-wrap: anywhere;
            color: rgba(255, 255, 255, .84);
            font-size: .95rem;
            font-weight: 800;
            line-height: 1.35;
            text-decoration: none;
        }

        .cn-public-footer-links a:hover {
            color: #c6d29e;
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        .cn-public-social-links a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            max-width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            padding: 8px 11px;
            background: rgba(255, 255, 255, .08);
            color: #fff;
            font-size: .9rem;
            font-weight: 850;
            text-decoration: none;
        }

        .cn-public-social-links a:hover {
            border-color: rgba(198, 210, 158, .78);
            background: rgba(73, 88, 30, .22);
            color: #eef3df;
            text-decoration: none;
        }

        .cn-public-footer-bottom {
            overflow-wrap: anywhere;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 20px;
            color: rgba(255, 255, 255, .72);
            font-size: .92rem;
        }

        .cn-public-footer-signature-link {
            color: inherit;
            font-weight: 800;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .cn-public-footer-signature-link:hover {
            color: #c6d29e;
        }

        .cn-public-footer-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .cn-public-footer-bottom > *, .cn-public-footer-actions > * { min-width: 0; max-width: 100%; }
        /* 13/10/2026 (go-live A3): identificação do fornecedor no rodapé (Decreto 7.962/2013, art. 2º). */
        .cn-public-footer-supplier {
            overflow-wrap: anywhere;
            margin: 20px 0 0;
            color: rgba(255, 255, 255, .72);
            font-size: .92rem;
            line-height: 1.5;
        }
        .cn-public-footer-supplier a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
        /* Dado do cliente ainda não preenchido: marcador visível até config/cninja_legal.php receber o valor. */
        .cn-legal-placeholder {
            background: #fff3bf;
            color: #1f1f1f;
            padding: 0 .25em;
            border-radius: 3px;
            font-weight: 700;
        }
        @media (forced-colors: active) {
            .cn-legal-placeholder { background: Mark; color: MarkText; }
        }
        /* Linha "Ao continuar, você concorda…" junto à ação de concluir (cadastro, código e checkout). */
        p.cn-legal-consent { margin: 8px 0 14px; font-size: .9rem; line-height: 1.45; }
        .cn-legal-consent a { text-decoration: underline; text-underline-offset: 2px; }
        .cn-public-site-footer a:focus-visible,
        .cn-public-site-footer button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
        @media (forced-colors: active) {
            .cn-public-site-footer a:focus-visible,
            .cn-public-site-footer button:focus-visible { outline-color: Highlight; }
        }

        .cn-public-back-top,
        .cn-public-theme-toggle {
            display: inline-flex;
            min-height: 44px;
            max-width: 100%;
            overflow-wrap: anywhere;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .22);
            border-radius: 8px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            padding: 0 14px;
            font: inherit;
            font-weight: 850;
            cursor: pointer;
        }

        .cn-public-back-top:hover,
        .cn-public-back-top:focus-visible,
        .cn-public-theme-toggle:hover,
        .cn-public-theme-toggle:focus-visible {
            border-color: rgba(198, 210, 158, .78);
            background: rgba(73, 88, 30, .22);
            color: #eef3df;
        }

        :is(html[data-public-theme="dark"], html.dark) {
            color-scheme: dark;
            --ink: #e6f3f6;
            --muted: #bfd6dc;
            --line: rgba(148, 203, 214, .24);
            --paper: #0b2530;
            --surface: #071a20;
            --brand: #7dd3fc;
            --deep: #061821;
            --soft: rgba(148, 203, 214, .12);
            --soft-green: rgba(73, 88, 30, .26);
            --green: var(--cn-ninja-green, #49581e);
            --blue: #60a5fa;
            --red: #fda4af;
            --amber: #facc15;
            --shadow: none;
            --cn-text: #e6f3f6;
            --cn-muted: #bfd6dc;
            --cn-line: rgba(148, 203, 214, .24);
            --cn-bg: #071a20;
            --cn-card: #0b2530;
        }

        :is(html[data-public-theme="dark"], html.dark) body {
            background: #071a20 !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-site-header {
            border-bottom-color: rgba(125, 211, 252, .18) !important;
            background: rgba(5, 24, 31, .94) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav :is(a, .cn-public-nav-trigger) {
            color: #c7e2e8 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav :is(a, .cn-public-nav-trigger):hover,
        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav :is(a, .cn-public-nav-trigger).is-active,
        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav a[aria-current="page"],
        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav-item:focus-within > .cn-public-nav-trigger {
            background: rgba(73, 88, 30, .34) !important;
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav {
            border-top-color: rgba(148, 203, 214, .2) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav-disclosure {
            border-top-color: rgba(148, 203, 214, .2) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav-summary {
            color: #c7e2e8;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-nav-summary:hover {
            background: rgba(73, 88, 30, .34);
            color: #dfe8c7;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-submenu {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
            box-shadow: 0 18px 44px rgba(0, 0, 0, .32) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-btn {
            border-color: rgba(219, 230, 234, .22) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .search-band,
        :is(html[data-public-theme="dark"], html.dark) .content,
        :is(html[data-public-theme="dark"], html.dark) .wrap.content {
            background: #071a20 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .filter-card,
        :is(html[data-public-theme="dark"], html.dark) .question-card,
        :is(html[data-public-theme="dark"], html.dark) .side-card,
        :is(html[data-public-theme="dark"], html.dark) .hero-card,
        :is(html[data-public-theme="dark"], html.dark) .advanced-filter,
        :is(html[data-public-theme="dark"], html.dark) .inline-panel,
        :is(html[data-public-theme="dark"], html.dark) .panel-item,
        :is(html[data-public-theme="dark"], html.dark) .cn-modal,
        :is(html[data-public-theme="dark"], html.dark) .auth-box,
        :is(html[data-public-theme="dark"], html.dark) .empty,
        :is(html[data-public-theme="dark"], html.dark) .card,
        :is(html[data-public-theme="dark"], html.dark) .resource-card,
        :is(html[data-public-theme="dark"], html.dark) .feature-card,
        :is(html[data-public-theme="dark"], html.dark) .flow-card,
        :is(html[data-public-theme="dark"], html.dark) .step-card,
        :is(html[data-public-theme="dark"], html.dark) .access-card,
        :is(html[data-public-theme="dark"], html.dark) .access-showcase,
        :is(html[data-public-theme="dark"], html.dark) .use-case,
        :is(html[data-public-theme="dark"], html.dark) .timeline-card,
        :is(html[data-public-theme="dark"], html.dark) .contest-card {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
            color: #e6f3f6 !important;
            box-shadow: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .question-top,
        :is(html[data-public-theme="dark"], html.dark) .base-text,
        :is(html[data-public-theme="dark"], html.dark) .alternative,
        :is(html[data-public-theme="dark"], html.dark) .side-list a,
        :is(html[data-public-theme="dark"], html.dark) .side-list div,
        :is(html[data-public-theme="dark"], html.dark) .pager a,
        :is(html[data-public-theme="dark"], html.dark) .pager span,
        :is(html[data-public-theme="dark"], html.dark) .notice,
        :is(html[data-public-theme="dark"], html.dark) input,
        :is(html[data-public-theme="dark"], html.dark) select {
            border-color: rgba(148, 203, 214, .25) !important;
            background: #09202a !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) input[type="checkbox"],
        :is(html[data-public-theme="dark"], html.dark) input[type="radio"] {
            border: 0 !important;
            background: transparent !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .btn,
        :is(html[data-public-theme="dark"], html.dark) .cn-modal-close {
            border-color: rgba(148, 203, 214, .28) !important;
            background: #102f3b !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .btn-primary {
            border-color: #dfe8c7 !important;
            background: var(--cn-ninja-green, #49581e) !important;
            color: #fff !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .btn-dark {
            border-color: #38bdf8 !important;
            background: #155e75 !important;
            color: #fff !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .btn-soft {
            border-color: rgba(198, 210, 158, .36) !important;
            background: rgba(73, 88, 30, .22) !important;
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .lead,
        :is(html[data-public-theme="dark"], html.dark) .filter-head p,
        :is(html[data-public-theme="dark"], html.dark) .results-head span,
        :is(html[data-public-theme="dark"], html.dark) .side-card p,
        :is(html[data-public-theme="dark"], html.dark) .side-list span,
        :is(html[data-public-theme="dark"], html.dark) .inline-panel p,
        :is(html[data-public-theme="dark"], html.dark) .panel-item span,
        :is(html[data-public-theme="dark"], html.dark) .alt-text,
        :is(html[data-public-theme="dark"], html.dark) .statement {
            color: #bfd6dc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .pill,
        :is(html[data-public-theme="dark"], html.dark) .question-number b,
        :is(html[data-public-theme="dark"], html.dark) .pager .disabled {
            background: rgba(148, 203, 214, .12) !important;
            color: #c7e2e8 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .pager .current {
            border-color: #dfe8c7 !important;
            background: var(--cn-ninja-green, #49581e) !important;
            color: #fff !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .page-wrapper,
        :is(html[data-public-theme="dark"], html.dark) .page-body,
        :is(html[data-public-theme="dark"], html.dark) .container-xl,
        :is(html[data-public-theme="dark"], html.dark) main,
        :is(html[data-public-theme="dark"], html.dark) .section,
        :is(html[data-public-theme="dark"], html.dark) .content,
        :is(html[data-public-theme="dark"], html.dark) .wrap.content,
        :is(html[data-public-theme="dark"], html.dark) .resource-section,
        :is(html[data-public-theme="dark"], html.dark) .cta-section,
        :is(html[data-public-theme="dark"], html.dark) .cta,
        :is(html[data-public-theme="dark"], html.dark) .search-band {
            background: #071a20 !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art),
        :is(html[data-public-theme="dark"], html.dark) .store-hero .store-hero-art,
        :is(html[data-public-theme="dark"], html.dark) .access-showcase img {
            border-color: rgba(148, 203, 214, .28) !important;
            background: #0b2530 !important;
            box-shadow: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .proof-item,
            .resource-card,
            .resource-card.is-primary,
            .resource-flow-step,
            .resource-art,
            .resource-details li,
            .focus-item,
            .cookie-banner,
            .detail,
            .flow,
            .flow-copy,
            .flow-signal,
            .flow-result,
            .resource,
            .access-card,
            .access-showcase,
            .plan-note,
            .use-case,
            .checklist,
            .timeline-card,
            .step-card,
            .step-node,
            .proof,
            .day-card,
            .quote-card,
            .sample-panel,
            .cta-box,
            .study-row,
            .tag,
            .card,
            .panel,
            .form-card,
            .contact-item,
            .choice,
            .notice,
            .referral,
            .alert,
            .tabs,
            .tab,
            .tab.active,
            .pane,
            .social a,
            .store-card,
            .store-empty,
            .store-pill,
            .store-pagination .page-link,
            .filter-card,
            .question-card,
            .side-card,
            .advanced-filter,
            .advanced-body,
            .inline-panel,
            .panel-item,
            .cn-modal,
            .auth-box,
            .empty,
            .upgrade-strip,
            .multi-select-trigger,
            .multi-select-menu,
            .multi-select-option,
            .check-row label,
            .save-caderno-form select,
            .question-top,
            .base-text,
            .alternative,
            .cn-scope-fact,
            .cn-dossier-overview,
            .cn-dossier-coverage,
            .cn-dossier-gap-list,
            .cn-dossier-gap-list li,
            .cn-dossier-item,
            .cn-dossier-meta span,
            .cn-dossier-meta a,
            .cn-timeline-filter-panel,
            .cn-timeline-filter-empty,
            .cn-stat,
            .cn-event-tag,
            .cn-event-metric,
            .cn-source-row,
            .cn-icon-link,
            .cn-document,
            .cn-history-item,
            .cn-history-metrics span,
            .empty-state,
            .cn-alert,
            .article-wrap,
            .comments,
            .related,
            .side-block,
            .post-card,
            .filter-note a,
            .pagination a,
            .pagination span,
            .cn-discovery-hero,
            .cn-discovery-tabs a,
            .cn-discovery-card,
            .cn-discovery-badge,
            .cn-discovery-empty
        ) {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
            color: #e6f3f6 !important;
            box-shadow: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .resource-flow-step::before,
        :is(html[data-public-theme="dark"], html.dark) .step-card::before {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .question-top,
            .base-text,
            .alternative,
            .side-list a,
            .side-list div,
            .pager a,
            .pager span,
            .flow-signal,
            .resource-details li,
            .study-row,
            .contact-item,
            .choice,
            .social a,
            .store-card-body,
            .store-pagination .page-item.disabled .page-link,
            .multi-select-option:hover,
            .multi-select-option:focus-within,
            .cn-filter-field input,
            .cn-filter-field select,
            .cn-source-row,
            .cn-icon-link
        ) {
            border-color: rgba(148, 203, 214, .25) !important;
            background: #09202a !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(input, select, textarea, .form-control, .form-select) {
            border-color: rgba(148, 203, 214, .25) !important;
            background: #09202a !important;
            color: #e6f3f6 !important;
            caret-color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(input, select, textarea, .form-control, .form-select)::placeholder {
            color: #8fb4bd !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            h1,
            h2,
            h3,
            h4,
            h5,
            .section-head h2,
            .resource-card h3,
            .resource-flow-copy h4,
            .resource-flow-step h5,
            .focus-item h3,
            .flow-copy h2,
            .step-card p,
            .card h3,
            .panel h2,
            .form-card h2,
            .store-section-head h2,
            .store-card-title,
            .cn-dossier-item h3,
            .cn-timeline-filter-panel h3,
            .cn-stat strong,
            .cn-event h3,
            .cn-event-metric strong,
            .cn-document strong,
            .cn-history-item h3,
            .page-title
        ) {
            color: #f8fafc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            p,
            li,
            .lead,
            .section-head p,
            .resource-card p,
            .resource-group-head p,
            .resource-flow-copy p,
            .resource-flow-step p,
            .focus-item p,
            .footer-column p,
            .flow-lead,
            .flow-result span,
            .detail p,
            .detail ul,
            .access-card p,
            .plan-note p,
            .use-case ul,
            .checklist ul,
            .timeline-card span,
            .resource span,
            .proof span,
            .card p,
            .card ul,
            .day-card p,
            .day-card ul,
            .quote-card p,
            .cta-box p,
            .store-section-head p,
            .store-card-desc,
            .store-pagination p,
            .panel p,
            .form-card p,
            .filter-head p,
            .results-head span,
            .side-card p,
            .side-list span,
            .inline-panel p,
            .panel-item span,
            .alt-text,
            .statement,
            .cn-dossier-overview p,
            .cn-dossier-coverage span,
            .cn-dossier-coverage small,
            .cn-dossier-gap-list p,
            .cn-dossier-item p,
            .cn-timeline-filter-panel p,
            .cn-filter-counter,
            .cn-stat span,
            .cn-stat small,
            .cn-event p,
            .cn-event-time,
            .cn-event-metric-label,
            .cn-document span,
            .cn-history-item p,
            .cn-history-metrics span,
            .page-pretitle
        ) {
            color: #bfd6dc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            a,
            .resource-link,
            .timeline-card a,
            .resource a,
            .store-card-cta,
            .contact-item strong,
            .quote-card strong,
            .flow-result strong,
            .timeline-kind,
            .cn-dossier-meta a,
            .cn-icon-link,
            .pager a:not(.disabled),
            .pagination a
        ) {
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.timeline-kind, .flow-kicker, .cn-dossier-kicker, .tag, .pill, .store-pill) {
            border-color: rgba(198, 210, 158, .32) !important;
            background: rgba(73, 88, 30, .28) !important;
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.badge.warn, .tag.warn, .plan-note) {
            border-color: rgba(250, 204, 21, .28) !important;
            background: rgba(120, 53, 15, .24) !important;
            color: #fde68a !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.notice.success) {
            border-color: rgba(198, 210, 158, .34) !important;
            background: rgba(73, 88, 30, .26) !important;
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.notice.error, .alert, .error-list, .result.bad) {
            border-color: rgba(253, 164, 175, .28) !important;
            background: rgba(127, 29, 29, .22) !important;
            color: #fecdd3 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.btn, .btn-ghost, .btn-soft, .store-card-cta, .rx-btn) {
            border-color: rgba(148, 203, 214, .28) !important;
            background: #102f3b !important;
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.btn-primary, .btn-green, .cn-public-btn-green) {
            border-color: var(--cn-ninja-green, #49581e) !important;
            background: var(--cn-ninja-green, #49581e) !important;
            color: #fff !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.btn-blue, .btn-dark, .cn-public-btn-blue) {
            border-color: #38bdf8 !important;
            background: #155e75 !important;
            color: #fff !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .divider::before,
        :is(html[data-public-theme="dark"], html.dark) .divider::after,
        :is(html[data-public-theme="dark"], html.dark) .steps::before,
        :is(html[data-public-theme="dark"], html.dark) .cn-events::before {
            background: rgba(148, 203, 214, .24) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-event::before {
            background: #071a20 !important;
            border-color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.rx-page, .rx-hero, .rx-card, .rx-sample-item, .rx-track) {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
            color: #e6f3f6 !important;
            box-shadow: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.rx-hero p, .rx-card-head p, .rx-field label, .rx-sample-item span, .rx-label, .rx-table th, .rx-table td) {
            color: #bfd6dc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .rx-table th,
        :is(html[data-public-theme="dark"], html.dark) .rx-table td {
            border-color: rgba(148, 203, 214, .2) !important;
        }

        /* Dark theme overrides for public pages that ship route-specific CSS. */
        :is(html[data-public-theme="dark"], html.dark) :is(.text-muted, .small.text-muted, .lead.text-muted, .card .text-muted) {
            color: #bfd6dc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .news-hero,
            .news-pulse,
            .news-empty,
            .news-headline,
            .news-latest,
            .news-feed-item,
            .news-side-block,
            .news-filter a,
            .news-pagination a,
            .news-pagination span,
            .cn-public-student-card,
            .cn-public-student-empty,
            .cn-public-student-card-meta span
        ) {
            border-color: rgba(148, 203, 214, .24) !important;
            background: #0b2530 !important;
            color: #e6f3f6 !important;
            box-shadow: none !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .news-kicker,
            .news-read,
            .news-filter a,
            .news-tag-cloud a,
            .cn-public-student-card-link
        ) {
            color: #dfe8c7 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .news-lead,
            .news-pulse span,
            .news-metric small,
            .news-meta,
            .news-headline p,
            .news-feed-item p,
            .news-latest-list small,
            .news-side-list strong,
            .news-popular-list small,
            .news-empty p,
            .news-pagination span,
            .cn-public-performance-intro,
            .cn-public-student-card p,
            .cn-public-student-empty
        ) {
            color: #bfd6dc !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(
            .news-metric,
            .news-latest-list a,
            .news-side-list a,
            .news-popular-list a,
            .news-tag-cloud a
        ) {
            border-color: rgba(148, 203, 214, .2) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.news-side-list a, .news-popular-list a) {
            color: #e6f3f6 !important;
        }

        :is(html[data-public-theme="dark"], html.dark) :is(.news-side-list a:hover, .news-side-list a.is-active, .news-popular-list a:hover, .news-tag-cloud a:hover, .news-tag-cloud a.is-active) {
            background: rgba(73, 88, 30, .28) !important;
            color: #dfe8c7 !important;
        }

        @media (max-width: 1040px) {
            .cn-public-footer-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 820px) {
            .cn-public-footer-wrap {
                width: var(--cn-public-container);
            }
        }

        @media (max-width: 540px) {
            .cn-public-footer-links { grid-template-columns: minmax(0, 1fr); }
            .cn-public-footer-wrap {
                width: var(--cn-public-container);
                margin-left: auto;
                margin-right: auto;
            }

            .cn-public-footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

/* Shared public hero sizing. */
:root {
            --cn-public-hero-art-size: 340px;
            --cn-public-hero-art-image-size: 270px;
            --cn-public-hero-min-height: 430px;
        }

        .cn-public-hero {
            min-height: auto !important;
            display: block !important;
            align-items: initial !important;
            overflow: hidden;
            padding: 0 !important;
            background: var(--cn-tom-faixa) !important;
            color: #fff;
        }

        .cn-public-hero > .wrap.hero-grid,
        .cn-public-hero > .wrap.hero-layout {
            min-height: var(--cn-public-hero-min-height);
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) var(--cn-public-hero-art-size) !important;
            gap: 42px !important;
            align-items: center !important;
            padding: 54px 0 !important;
        }

        .store-hero {
            min-height: var(--cn-public-hero-min-height) !important;
            grid-template-columns: minmax(0, 1fr) var(--cn-public-hero-art-size) !important;
            align-items: center !important;
            gap: 42px !important;
            padding: 54px !important;
            background: var(--cn-tom-faixa) !important;
        }

        .cn-public-hero :is(.hero-content, .hero-inner) {
            align-self: center !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        .cn-public-hero .hero-side {
            display: grid !important;
            align-self: center !important;
            align-content: center !important;
            justify-items: end !important;
            gap: 0 !important;
        }

        .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art),
        .store-hero .store-hero-art {
            width: var(--cn-public-hero-art-size) !important;
            height: var(--cn-public-hero-art-size) !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            display: grid !important;
            place-items: center !important;
            object-fit: contain !important;
            align-self: center !important;
            justify-self: end !important;
            margin: 0 !important;
            padding: 24px !important;
            overflow: hidden !important;
            border: 1px solid #dbe6ea !important;
            border-radius: 8px !important;
            background: #ffffff !important;
            box-shadow: 0 18px 44px rgba(15, 23, 42, .18) !important;
        }

        .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art) img,
        .store-hero .store-hero-art img {
            width: min(100%, var(--cn-public-hero-art-image-size)) !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: contain !important;
            margin: 0 auto !important;
            filter: drop-shadow(0 14px 20px rgba(15, 23, 42, .16)) !important;
        }

        :is(html[data-public-theme="dark"], html.dark) .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art),
        :is(html[data-public-theme="dark"], html.dark) .store-hero .store-hero-art {
            background: transparent !important;
            box-shadow: none !important;
        }

        @media (max-width: 900px) {
            :root {
                --cn-public-hero-art-size: min(320px, 100%);
                --cn-public-hero-art-image-size: min(248px, 82vw);
                --cn-public-hero-min-height: auto;
            }

            .cn-public-hero > .wrap.hero-grid,
            .cn-public-hero > .wrap.hero-layout,
            .store-hero {
                grid-template-columns: 1fr !important;
                gap: 24px !important;
                padding: 42px 0 48px !important;
            }

            .cn-public-hero .hero-side {
                justify-items: start !important;
            }

            .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art),
            .store-hero .store-hero-art {
                justify-self: start !important;
            }

            .store-hero {
                padding-left: 24px !important;
                padding-right: 24px !important;
            }
        }

/* Shared public breadcrumbs. */
.cn-public-breadcrumbs {
                border-bottom: 1px solid rgba(219, 230, 234, .72);
                background: rgba(255, 255, 255, .86);
            }

            .cn-public-breadcrumb-list {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 7px;
                min-height: 42px;
                margin: 0 auto;
                padding: 8px 0;
                color: #5c6f76;
                font-size: .82rem;
                font-weight: 800;
                list-style: none;
            }

            .cn-public-breadcrumb-list li {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                min-width: 0;
            }

            .cn-public-breadcrumb-list li + li::before {
                content: "/";
                color: #9aacb3;
                font-weight: 900;
            }

            .cn-public-breadcrumb-list a {
                color: #334014;
                text-decoration: none;
            }

            .cn-public-breadcrumb-list a:hover,
            .cn-public-breadcrumb-list a:focus-visible {
                text-decoration: underline;
            }

            .cn-public-breadcrumb-list [aria-current="page"] {
                max-width: min(620px, 70vw);
                overflow: hidden;
                color: #102126;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            :is(html[data-public-theme="dark"], html.dark) .cn-public-breadcrumbs {
                border-color: rgba(148, 203, 214, .18);
                background: rgba(9, 32, 42, .9);
            }

            :is(html[data-public-theme="dark"], html.dark) .cn-public-breadcrumb-list {
                color: #c7e2e8;
            }

            :is(html[data-public-theme="dark"], html.dark) .cn-public-breadcrumb-list a {
                color: #dfe8c7;
            }

            :is(html[data-public-theme="dark"], html.dark) .cn-public-breadcrumb-list [aria-current="page"] {
                color: #f8fafc;
            }

            @media (max-width: 540px) {
                .cn-public-breadcrumb-list {
                    font-size: .78rem;
                }

                .cn-public-breadcrumb-list [aria-current="page"] {
                    max-width: 58vw;
                }
            }

/* Concurso public header mobile adjustment. */
@media (max-width: 540px) {
            .cn-public-site-header .cn-public-topbar {
                grid-template-columns: 1fr;
                align-items: start;
            }

            .cn-public-site-header .cn-public-brand,
            .cn-public-site-header .cn-public-actions,
            .cn-public-site-header .cn-public-nav {
                grid-column: 1;
                grid-row: auto;
            }

            .cn-public-site-header .cn-public-actions {
                width: 100%;
                justify-content: stretch;
            }

            .cn-public-site-header .cn-public-actions .cn-public-btn {
                flex: 1 1 calc(50% - 5px);
                min-width: 0;
            }
        }

/* Estilo da conta aplicado a todas as páginas que usam o cabeçalho público. */
:root[data-public-style="neutral"] {
    --brand: #475569;
    --brand-dark: #334155;
    --cn-ninja-green: #475569;
    --cn-ninja-green-hover: #334155;
}
:root[data-public-style="green"] {
    --brand: #34644c;
    --brand-dark: #244733;
    --cn-ninja-green: #34644c;
    --cn-ninja-green-hover: #244733;
}
:root[data-public-style="gray"] {
    --brand: #52525b;
    --brand-dark: #3f3f46;
    --cn-ninja-green: #52525b;
    --cn-ninja-green-hover: #3f3f46;
}

/* A página de questões usa faixa de título compacta, sem a altura da hero da home. */
.cn-public-hero.cn-questions-hero { min-height: 0 !important; }
.cn-public-hero.cn-questions-hero > .wrap.hero-grid {
    min-height: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    padding: 16px 0 18px !important;
}
.cn-public-hero.cn-questions-hero .hero-actions { display: none !important; }

/* Navegação compacta da página de questões; todos os links seguem no menu. */
.cn-questions-page .cn-public-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 0;
    padding: 6px 0;
    gap: 10px;
}
.cn-questions-page .cn-public-topbar > .cn-public-nav { display: none; }
.cn-questions-page .cn-public-nav-disclosure {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    padding: 0;
    border: 0;
}
.cn-questions-page .cn-public-nav-summary { display: flex; min-height: 44px; align-items: center; }
.cn-questions-page .cn-public-nav-disclosure[open] > .cn-public-nav {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr;
    width: min(320px, 90vw);
    max-height: 75vh;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--line, #d9e3e7);
    background: var(--paper, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.cn-questions-page .cn-public-actions { grid-column: 3; grid-row: 1; }
@media (max-width: 680px) {
    .cn-questions-page .cn-public-topbar { grid-template-columns: minmax(0, 1fr) auto; }
    .cn-questions-page .cn-public-nav-disclosure { grid-column: 2; }
    .cn-questions-page .cn-public-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

.cn-questions-page .filter-head p,
.cn-questions-page #question-search-help,
.cn-questions-page .advanced-summary-help { display: none; }
.cn-questions-page .search-band { padding: 10px 0 14px; }
.cn-questions-page .filter-head { margin-bottom: 8px; }
.cn-questions-page .filter-search { margin-bottom: 6px; }
.cn-questions-page .advanced-filter {
    margin-top: 6px;
    border: 0;
    border-bottom: 1px solid var(--line, #d9e3e7);
    border-radius: 0;
    background: transparent;
}
.cn-questions-page .advanced-filter summary { min-height: 38px; padding: 4px 8px; }

/* Catálogo React de questões no escuro (03/10/2026): o subtítulo do cabeçalho herdava o cinza das listas (3,9:1 sobre o azul). */
:is(html[data-public-theme="dark"], html.dark) .cn-public-question-heading p {
    color: rgba(255, 255, 255, .92) !important;
}

/* 03/10/2026: proposta comercial no cabeçalho do catálogo público de questões. */
.cn-public-question-heading .cn-public-question-lead { margin: .5rem 0 0; max-width: 70ch; color: rgba(255, 255, 255, .92); font-size: 1rem; line-height: 1.5; }
.cn-public-question-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.cn-public-question-cta { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border-radius: .6rem; background: #fff; color: #0f172a; font-weight: 800; text-decoration: none; }
.cn-public-question-cta.is-secondary { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.cn-public-question-cta:hover { filter: brightness(.96); }
.cn-public-question-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================================================================================
   Tema escuro unificado das rotas públicas (03/10/2026, pedido verbatim 42).
   Uma só paleta (fundo #071a20, superfície #0b2530, texto #e6f3f6, borda rgba(148,203,214,.24),
   destaque #7dd3fc) para as páginas que ainda usavam a paleta ardósia do painel ou do layout
   Bootstrap: loja e checkout (layouts.app), catálogo público de Questões (tokens cnv3) e home.
   ============================================================================================ */
html.dark.theme-dark,
html[data-public-theme="dark"].theme-dark {
    --cn-bg: #071a20;
    --cn-surface: #0b2530;
    --cn-surface-alt: #061821;
    --cn-text: #e6f3f6;
    --cn-muted: #bfd6dc;
    --cn-border: rgba(148, 203, 214, .24);
    --cn-primary: #7dd3fc;
}

:is(html[data-public-theme="dark"], html.dark).theme-dark body,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app {
    background-color: #071a20 !important;
    color: #e6f3f6 !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .page-wrapper,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .page-body,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .page-header {
    background: transparent !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .page-title,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app h1,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app h2,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app h3 {
    color: #e6f3f6;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .page-pretitle,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .text-muted {
    color: #bfd6dc !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .card,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .card-body {
    background: #0b2530 !important;
    border-color: rgba(148, 203, 214, .24) !important;
    color: #e6f3f6 !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .card-footer,
:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .card-header {
    background: #061821 !important;
    border-color: rgba(148, 203, 214, .24) !important;
    color: #e6f3f6 !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .alert-success {
    background: rgba(73, 88, 30, .3) !important;
    border-color: rgba(198, 210, 158, .4) !important;
    color: #eef3df !important;
}

:is(html[data-public-theme="dark"], html.dark) body.cn-public-app .alert-danger {
    background: rgba(190, 18, 60, .22) !important;
    border-color: rgba(253, 164, 175, .45) !important;
    color: #fecdd3 !important;
}

/* Loja (React): cartões, filtros e paginação na paleta pública. */
:is(html[data-public-theme="dark"], html.dark) .store-page {
    color: #e6f3f6;
}

:is(html[data-public-theme="dark"], html.dark) .store-section-head p,
:is(html[data-public-theme="dark"], html.dark) .store-card-desc,
:is(html[data-public-theme="dark"], html.dark) .store-pagination p,
:is(html[data-public-theme="dark"], html.dark) .store-discovery p {
    color: #bfd6dc;
}

:is(html[data-public-theme="dark"], html.dark) .store-card,
:is(html[data-public-theme="dark"], html.dark) .store-empty,
:is(html[data-public-theme="dark"], html.dark) .store-pagination .page-link {
    background: #0b2530;
    border-color: rgba(148, 203, 214, .24);
    box-shadow: none;
}

:is(html[data-public-theme="dark"], html.dark) .store-card-media,
:is(html[data-public-theme="dark"], html.dark) .store-hero {
    border-color: rgba(148, 203, 214, .24);
}

:is(html[data-public-theme="dark"], html.dark) .store-pill {
    background: rgba(125, 211, 252, .16);
    color: #bae6fd;
}

:is(html[data-public-theme="dark"], html.dark) .store-price,
:is(html[data-public-theme="dark"], html.dark) .store-pagination .page-link {
    color: #7dd3fc;
}

:is(html[data-public-theme="dark"], html.dark) .store-card-cta,
:is(html[data-public-theme="dark"], html.dark) .store-discovery .store-card-cta {
    border-color: rgba(125, 211, 252, .55);
    background: rgba(125, 211, 252, .1);
    color: #bae6fd;
}

:is(html[data-public-theme="dark"], html.dark) .store-card-cta:hover {
    background: #7dd3fc;
    border-color: #7dd3fc;
    color: #071a20;
}

:is(html[data-public-theme="dark"], html.dark) .store-discovery input,
:is(html[data-public-theme="dark"], html.dark) .store-discovery select,
:is(html[data-public-theme="dark"], html.dark) .store-discovery textarea {
    border-color: rgba(148, 203, 214, .35);
    background: #061821;
    color: #e6f3f6;
}

:is(html[data-public-theme="dark"], html.dark) .store-pagination .page-item.active .page-link {
    background: #7dd3fc;
    border-color: #7dd3fc;
    color: #071a20;
}

:is(html[data-public-theme="dark"], html.dark) .store-pagination .page-item.disabled .page-link {
    background: #061821;
    color: #7f9aa2;
}

:is(html[data-public-theme="dark"], html.dark) .store-detail-page .card-footer.bg-white,
:is(html[data-public-theme="dark"], html.dark) .store-detail-page .card-footer.bg-light {
    background: #061821 !important;
}

:is(html[data-public-theme="dark"], html.dark) .store-detail-page .text-dark {
    color: #e6f3f6 !important;
}

/* Catálogo público de Questões (React com tokens do painel): tokens trocados pela paleta pública. */
:is(html[data-public-theme="dark"], html.dark) .cn-public-questions-react {
    --cnv3-bg: #071a20;
    --cnv3-surface: #0b2530;
    --cnv3-surface-muted: #082028;
    --cnv3-border: rgba(148, 203, 214, .24);
    --cnv3-text: #e6f3f6;
    --cnv3-muted: #bfd6dc;
    --cnv3-shadow: none;
    background: #071a20;
    color: #e6f3f6;
}

:is(html[data-public-theme="dark"], html.dark) .cn-public-question-heading {
    background: var(--cn-tom-faixa) !important;
    border-bottom: 1px solid rgba(148, 203, 214, .24);
}

/* Especificidade acima da regra geral de links no escuro (:is(a, .timeline-card a, …) !important). */
:is(html[data-public-theme="dark"], html.dark) a.cn-public-question-cta.cn-public-question-cta {
    background: #e6f3f6 !important;
    color: #071a20 !important;
}

:is(html[data-public-theme="dark"], html.dark) a.cn-public-question-cta.cn-public-question-cta.is-secondary {
    background: rgba(230, 243, 246, .12) !important;
    border-color: rgba(230, 243, 246, .5) !important;
    color: #e6f3f6 !important;
}

/* Contato: rótulos do formulário fixos em azul-escuro no claro; no escuro seguem a tinta do tema. */
:is(html[data-public-theme="dark"], html.dark) .form-card label,
:is(html[data-public-theme="dark"], html.dark) .form-card .field-title,
:is(html[data-public-theme="dark"], html.dark) .panel label {
    color: var(--ink, #e6f3f6) !important;
}

/* Página do simulado na loja: a imagem reserva (fundo claro) não pode abrir um bloco branco no escuro. */
:is(html[data-public-theme="dark"], html.dark) .store-detail-page .card-img-top.is-fallback {
    background:
        radial-gradient(circle at 50% 35%, rgba(148, 203, 214, .18), transparent 34%),
        #0b2530 !important;
}

/* Tamanho do texto escolhido pelo estudante (04/10/2026, pedido verbatim 49): o servidor pinta data-font-scale no <html>; o JavaScript só sincroniza. */
html[data-font-scale="90"] { font-size: 90%; }
html[data-font-scale="110"] { font-size: 110%; }
html[data-font-scale="125"] { font-size: 125%; }
html[data-font-scale="140"] { font-size: 140%; }

/* Controle de tamanho do texto no rodapé público (04/10/2026; movido do cabeçalho a pedido do usuário, verbatim 52). */
.cn-public-font-scale {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line, #d9e3e7);
    border-radius: 8px;
    padding: 2px;
    background: var(--paper, #fff);
}

.cn-public-font-step {
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.cn-public-font-step:hover {
    background: var(--soft, rgba(21, 94, 117, .1));
}

.cn-public-font-step:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.cn-public-font-step:focus-visible {
    outline: 3px solid var(--brand, #155e75);
    outline-offset: 2px;
}

.cn-public-font-output {
    min-width: 42px;
    text-align: center;
    font-size: .78rem;
    font-weight: 900;
    color: var(--muted, #5d6e78);
}

:is(html[data-public-theme="dark"], html.dark) .cn-public-font-scale {
    border-color: rgba(148, 203, 214, .3);
    background: #0b2530;
    color: #e6f3f6;
}

/* No rodapé (fundo escuro em qualquer tema) o grupo é uma pastilha clara: a cor do texto não pode herdar o branco do rodapé. */
.cn-public-footer-actions .cn-public-font-scale { min-height: 44px; color: #102026; }

/* Navegação no celular (04/10/2026, pedido verbatim 47): com a preferência padrão "menu inferior", a navegação
   principal móvel vira uma barra fixa no rodapé da tela (como no painel); com "barra lateral esquerda", fica o
   menu lateral recolhível ("Menu") no topo, como antes. O servidor pinta data-mobile-nav no <html>. */
@media (max-width: 820px) {
    html[data-mobile-nav="bottom"] body {
        padding-bottom: 92px;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure {
        position: fixed;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        z-index: 40;
        width: auto;
        margin: 0;
        border: 1px solid var(--line, #d9e3e7);
        border-radius: 10px;
        background: var(--paper, #fff);
        box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
        padding: 6px;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-summary {
        display: none;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure > .cn-public-nav,
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure:not([open]) > .cn-public-nav {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        padding: 0;
        border-top: 0;
        scrollbar-width: none;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure > .cn-public-nav::-webkit-scrollbar {
        display: none;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure > .cn-public-nav :is(a, .cn-public-nav-trigger) {
        flex: 0 0 auto;
        min-height: 48px;
        min-width: 72px;
        justify-content: center;
        font-size: .8rem;
        text-align: center;
    }

    html[data-mobile-nav="bottom"] .cookie-banner {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px);
    }

    :is(html[data-public-theme="dark"], html.dark)[data-mobile-nav="bottom"] .cn-public-nav-disclosure {
        border-color: rgba(148, 203, 214, .3);
        background: #0b2530;
    }
}

@media (max-width: 820px) {
    /* Menu inferior: grupos com submenu ficam achatados — os itens entram na mesma linha e o gatilho do grupo some. */
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure .cn-public-nav-item,
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure .cn-public-submenu {
        display: contents;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure .cn-public-nav-trigger {
        display: none;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure .cn-public-submenu a {
        flex: 0 0 auto;
        min-height: 48px;
        min-width: 72px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 0;
        font-size: .8rem;
        text-align: center;
    }
}

@media (max-width: 820px) {
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure {
        top: auto;
        height: auto;
        max-height: 76px;
    }

    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure > .cn-public-nav :is(a, .cn-public-nav-trigger),
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure .cn-public-submenu a {
        width: auto;
        white-space: nowrap;
    }
}

@media (max-width: 820px) {
    /* O <details> fechado esconde o conteúdo (content-visibility); no menu inferior o conteúdo fica sempre visível. */
    html[data-mobile-nav="bottom"] .cn-public-nav-disclosure::details-content {
        content-visibility: visible;
        display: contents;
    }
}

@media (max-width: 820px) {
    /* O cabeçalho usa backdrop-filter, que vira bloco de contenção para position: fixed; com o menu inferior ele sai. */
    html[data-mobile-nav="bottom"] .cn-public-site-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Aviso de cookies compartilhado (05/10/2026): desenhado pelo shell React (resources/js/public-shell.jsx) em todas as
   páginas públicas; antes existia só na home, com estilo próprio dela. */
.cn-public-cookie-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: grid;
    gap: 8px;
    width: min(440px, calc(100% - 36px));
    padding: 18px;
    border: 1px solid #dbe6ea;
    border-radius: 14px;
    background: #fff;
    color: #172033;
    box-shadow: 0 18px 40px rgba(23, 32, 51, .18);
}
.cn-public-cookie-banner strong { color: #0f3f4d; }
.cn-public-cookie-banner p { margin: 0; color: #46546b; line-height: 1.5; }
.cn-public-cookie-banner .cn-public-btn { justify-content: center; width: 100%; min-height: 44px; }
:is(html[data-public-theme="dark"], html.dark) .cn-public-cookie-banner { border-color: rgba(148, 203, 214, .3); background: #10242c; color: #e5eef1; }
:is(html[data-public-theme="dark"], html.dark) .cn-public-cookie-banner strong { color: #a5e3ef; }
:is(html[data-public-theme="dark"], html.dark) .cn-public-cookie-banner p { color: #c3d3d8; }
@media print { .cn-public-cookie-banner { display: none; } }

/* 13/10/2026: o conteúdo das páginas públicas do layout app (loja, cadernos, preparação e as demais) usa o mesmo
   contêiner do cabeçalho; o <style> do layout limitava a 1180 px. Texto corrido continua limitado em ch em cada página. */
body.cn-public-app .page-wrapper > .container-xl,
body.cn-public-app .page-body > .container-xl {
    width: var(--cn-public-container) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.cn-public-app .page-body > .container-xl > .container { max-width: none !important; }

/* 13/10/2026: o cabeçalho público é fixo no topo; âncoras e foco do teclado param abaixo dele (WCAG 2.4.11). */
html { scroll-padding-top: 168px; }
@media (max-width: 820px) { html { scroll-padding-top: 152px; } }

/* 13/10/2026 — composição em telas largas (cliente: "Você simplesmente aumentou a largura sem ajustar o conteúdo";
   gerente: cabeçalho numa faixa só, herói 7/5 com visual grande e integrado, tipografia que escala).
   1) Cabeçalho: a partir de 1360 px, logotipo, menu e botões na mesma linha; o menu cresce com a tela. */
@media (min-width: 1360px) {
    .cn-public-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; padding: 10px 0; }
    .cn-public-topbar > .cn-public-nav { grid-column: 2; grid-row: 1; justify-content: center; gap: 2px; border-top: 0; padding-top: 0; }
    .cn-public-actions { grid-column: 3; grid-row: 1; }
    .cn-public-nav a, .cn-public-nav-trigger { padding: 0 6px; font-size: .8rem; }
}
@media (min-width: 1600px) {
    .cn-public-topbar > .cn-public-nav { gap: 6px; }
    .cn-public-nav a, .cn-public-nav-trigger { min-height: 40px; padding: 0 10px; font-size: .9rem; }
}
@media (min-width: 2200px) {
    .cn-public-nav a, .cn-public-nav-trigger { padding: 0 12px; font-size: 1rem; }
}

/* 2) Tipografia: nas páginas públicas do layout app, a base vai de 16 px (até 1366) a 18,5 px (1920 ou mais). */
html:has(body.cn-public-app), html:has(body.cn-public-questions-react) { font-size: clamp(16px, calc(11.07px + .361vw), 18.5px); }
/* O título do layout ("Loja de simulados", "Preparação PCMG"…) repetia o H1 do herói: some quando a página tem H1. */
body.cn-public-app:has(#main-content h1) .page-wrapper > .container-xl:has(> .page-header) { display: none; }

/* 3) Herói: texto e visual em 7/5 colunas; a ilustração fica sobre o degradê, grande, sem a caixa branca. */
.cn-public-hero > .wrap.hero-grid,
.cn-public-hero > .wrap.hero-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
    gap: clamp(24px, 4vw, 72px) !important;
    padding: clamp(40px, 5vw, 96px) 0 !important;
}
.cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    justify-self: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art) img {
    width: clamp(240px, 28vw, 560px) !important;
    max-height: none !important;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)) !important;
}
:is(html[data-public-theme="dark"], html.dark) .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art) { background: transparent !important; }
.cn-public-hero h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 4.6rem) !important; }
.cn-public-hero :is(.lead, .hero-inner > p, .hero-content > p) { max-width: 60ch; font-size: clamp(1.05rem, .9rem + .35vw, 1.35rem); }
@media (max-width: 900px) {
    .cn-public-hero > .wrap.hero-grid,
    .cn-public-hero > .wrap.hero-layout { grid-template-columns: minmax(0, 1fr) !important; padding: 36px 0 40px !important; }
    .cn-public-hero :is(.hero-art, .hero-card, .hero-visual, .timeline-hero-art) img { width: min(240px, 64vw) !important; }
}

/* ==========================================================================================================
   Topo público padronizado (13/10/2026). Cliente: "PRECISA PADRONIZAR ESSA DESGRAÇA DO HEADER! [...] UMA ALTURA,
   UM LAYOUT!"; aprovado com "Faça tudo como sugeriu". Especificação docs/ux/topo-publico.md, maquete
   docs/ux/maquetes/topo-publico.html; o topo da loja B é a referência. Obra chat-2026-10-13-obra-topo-padrao.
   Tudo o que define o cabeçalho e a faixa de topo das rotas públicas fica aqui, depois das regras antigas.
   ========================================================================================================== */

/* Unidade da tipografia do topo: px, independente da fonte da página (as rotas do layout app crescem até 18,5 px),
   mas acompanhando o "A−/A+" do rodapé (data-font-scale). */
:root { --cn-topo-u: 1px; }
html[data-font-scale="90"] { --cn-topo-u: .9px; }
html[data-font-scale="110"] { --cn-topo-u: 1.1px; }
html[data-font-scale="125"] { --cn-topo-u: 1.25px; }
html[data-font-scale="140"] { --cn-topo-u: 1.4px; }

/* 1) Cabeçalho: o atual, numa versão só. Mesma fonte, mesmo tamanho de menu e de botões em todas as rotas; o
   logotipo reserva a altura antes de carregar; sem a caixa de conteúdo que algumas páginas não declaravam
   (os botões empilhavam a 390 px nas institucionais). */
.cn-public-site-header,
.cn-public-site-header *,
.cn-public-site-header *::before,
.cn-public-site-header *::after { box-sizing: border-box; }
.cn-public-site-header {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: calc(16 * var(--cn-topo-u));
    line-height: 1.5;
}
.cn-public-site-header .cn-public-brand img { aspect-ratio: 1043 / 239; height: auto; }
.cn-public-site-header .cn-public-actions .cn-public-btn {
    min-height: 44px;
    font-size: calc(16 * var(--cn-topo-u));
    font-weight: 900;
    line-height: 1.35;
}
.cn-public-site-header .cn-public-topbar > .cn-public-nav :is(a, .cn-public-nav-trigger),
.cn-public-site-header .cn-public-topbar > .cn-public-nav .cn-public-submenu a { font-size: calc(12.8 * var(--cn-topo-u)); }
/* 13/10/2026 (go-live, rolagem lateral): o submenu do último item do menu (hoje "Linha do Tempo", quando o módulo de
   concursos está ligado) abria a partir da borda esquerda do item e passava da tela. Mesmo fechado (visibility: hidden)
   ele conta para a largura rolável da página. Alinhado pela borda direita do item, fica dentro da tela, aberto ou
   fechado; os demais submenus continuam abrindo pela esquerda. */
.cn-public-site-header .cn-public-topbar > .cn-public-nav > .cn-public-nav-item:last-child > .cn-public-submenu { left: auto; right: 0; }
@media (min-width: 1600px) {
    .cn-public-site-header .cn-public-topbar > .cn-public-nav :is(a, .cn-public-nav-trigger) { font-size: calc(14.4 * var(--cn-topo-u)); }
}
@media (min-width: 2200px) {
    .cn-public-site-header .cn-public-topbar > .cn-public-nav :is(a, .cn-public-nav-trigger) { font-size: calc(16 * var(--cn-topo-u)); }
}

/* 2) Faixa de topo: degradê da loja B, largura total, sem canto; trilha (onde existe) na primeira linha; mensagem à
   esquerda, ação no meio e o ninja solto à direita (na home, as duas capturas). A partir de 1100 px, 480 px de altura
   em todas as rotas; no celular, a altura segue o texto atual de cada rota (decisão 3 da especificação). */
.cn-topo[data-cn-topo] {
    --cn-topo-sangria: max(16px, 5vw, calc((100vw - 1760px) / 2));
    position: relative;
    display: block !important;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    /* Tom do painel (docs/ux/tom-publico.md §3): degradê #0d6b5e → #0f5c5e → #0f4c5c com o brilho creme sobre o visual. */
    background: var(--cn-tom-faixa) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: calc(16 * var(--cn-topo-u));
    line-height: 1.5;
    text-align: left;
}
/* Faixa dentro do contêiner da página (layout app, Questões, Acessar): o degradê vai de borda a borda. O border-image
   aceita uma imagem só; o brilho entra numa camada própria por cima do degradê, apagada antes da borda da caixa. */
.cn-topo.cn-topo--contido[data-cn-topo] {
    isolation: isolate;
    background: #0f5c5e !important;
    border-image: var(--cn-tom-linear) fill 0 / 0 / 0 var(--cn-topo-sangria) !important;
}
.cn-topo.cn-topo--contido[data-cn-topo]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cn-tom-brilho);
    pointer-events: none;
}
/* O brilho fica sobre o visual e longe do texto (docs/ux/tom-publico.md §6.1): faixa sem visual (termos, privacidade,
   acessibilidade, órgãos, bancas, indicação, desempenho público) fica só com o degradê, porque o brilho cairia sob o
   quadro ou a linha de texto (3,6:1 medido). No celular, com trilha, também: o canto superior direito é a própria
   trilha (3,8–4,2:1 medido no item atual, creme de 14 px). */
.cn-topo[data-cn-topo]:not(:has(.cn-topo-visual)),
.store-b-hero:not(:has(.cn-topo-visual, .store-b-ninja)) {
    --cn-tom-brilho: none;
    --cn-tom-faixa: var(--cn-tom-linear);
}
@media (max-width: 1099px) {
    .cn-topo[data-cn-topo]:has(> .cn-topo-in.has-trilha) {
        --cn-tom-brilho: none;
        --cn-tom-faixa: var(--cn-tom-linear);
    }
}
.cn-topo[data-cn-topo] *,
.cn-topo[data-cn-topo] *::before,
.cn-topo[data-cn-topo] *::after { box-sizing: border-box; }
.cn-topo[data-cn-topo] > .cn-topo-in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: var(--cn-public-container);
    max-width: none;
    margin: 0 auto;
    padding: 24px 0;
    min-height: 0;
}
.cn-topo.cn-topo--contido[data-cn-topo] > .cn-topo-in { width: auto; }
.cn-topo[data-cn-topo] .cn-topo-msg,
.cn-topo[data-cn-topo] .cn-topo-acao { min-width: 0; margin: 0; padding: 0; max-width: none; }

/* Trilha (o componente da casca pública é movido para cá; resources/js/public-shell.jsx). */
.cn-topo[data-cn-topo] .cn-topo-trilha { min-width: 0; }
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumbs { position: static !important; border: 0 !important; background: transparent !important; }
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumb-list {
    width: auto; min-height: 24px; margin: 0; padding: 0; gap: 4px 8px;
    color: #e8f0d3 !important; font-size: calc(14 * var(--cn-topo-u)); font-weight: 700; line-height: 1.3;
}
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumb-list li { gap: 8px; }
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumb-list li + li::before { color: rgba(232, 240, 211, .6) !important; font-weight: 700; }
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumb-list a {
    display: inline-flex; align-items: center; min-height: 24px;
    color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px;
}
.cn-topo[data-cn-topo] .cn-topo-trilha .cn-public-breadcrumb-list [aria-current="page"] { color: #e8f0d3 !important; }

/* Mensagem: sobretítulo, título em Outfit e a linha de texto. */
.cn-topo[data-cn-topo] .cn-topo-kicker {
    margin: 0 0 10px !important;
    color: #e8f0d3 !important;
    font: 800 calc(13 * var(--cn-topo-u)) / 1.3 Inter, ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cn-topo[data-cn-topo] :is(h1, h2).cn-topo-titulo {
    max-width: none !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(calc(30.4 * var(--cn-topo-u)), calc(19.2 * var(--cn-topo-u) + 2vw), calc(52.8 * var(--cn-topo-u))) !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em !important;
    overflow-wrap: break-word;
}
.cn-topo[data-cn-topo] .cn-topo-sub {
    display: block;
    margin-top: 8px;
    color: #dfe8c7;
    font-size: clamp(calc(19.2 * var(--cn-topo-u)), calc(15.2 * var(--cn-topo-u) + .9vw), calc(32 * var(--cn-topo-u)));
    line-height: 1.18;
}
.cn-topo[data-cn-topo] .cn-topo-lead {
    max-width: 56ch !important;
    margin: 12px 0 0 !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: clamp(calc(16 * var(--cn-topo-u)), calc(14.72 * var(--cn-topo-u) + .3vw), calc(19.2 * var(--cn-topo-u))) !important;
    line-height: 1.5 !important;
}
.cn-topo[data-cn-topo] .cn-topo-lead + .cn-topo-lead { margin-top: 8px !important; }

/* Ação: rótulo, busca ou campo (caixa branca com botão oliva), botões e a linha de números. */
.cn-topo[data-cn-topo] .cn-topo-rotulo { display: block; margin: 0 0 8px; color: #fff; font-weight: 800; font-size: calc(15 * var(--cn-topo-u)); }
.cn-topo[data-cn-topo] .cn-topo-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cn-topo[data-cn-topo] .cn-topo-msg > .cn-topo-acoes { margin-top: 20px; }
.cn-topo[data-cn-topo] a.cn-topo-btn,
.cn-topo[data-cn-topo] button.cn-topo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 0; max-width: 100%; min-height: 52px; margin: 0; padding: 8px 24px;
    border: 2px solid #4b5a1c !important; border-radius: 10px !important;
    background: #4b5a1c !important; color: #fff !important; box-shadow: none !important;
    font: 800 calc(16 * var(--cn-topo-u)) / 1.2 Inter, ui-sans-serif, system-ui, sans-serif !important;
    text-align: center; text-decoration: none !important; white-space: normal; cursor: pointer;
}
.cn-topo[data-cn-topo] .cn-topo-acao a.cn-topo-btn,
.cn-topo[data-cn-topo] .cn-topo-acao button.cn-topo-btn { min-height: 60px; }
/* Principal sobre o degradê: creme-oliva (o oliva #4b5a1c some sobre o verde-água, 1,0–1,3:1 do fundo); no foco do
   mouse, branco. Sobre fundo claro ("Pesquisar", "Corrigir", "Obter simulado"), o oliva continua. Secundário: o vidro
   do painel (fundo branco 14 %, borda branca 56 %). */
.cn-topo[data-cn-topo] a.cn-topo-btn:not(.cn-topo-btn--contorno),
.cn-topo[data-cn-topo] button.cn-topo-btn:not(.cn-topo-btn--contorno) {
    background: var(--cn-tom-creme) !important; border-color: var(--cn-tom-creme) !important; color: var(--cn-tom-creme-tinta) !important;
}
.cn-topo[data-cn-topo] a.cn-topo-btn:not(.cn-topo-btn--contorno):hover,
.cn-topo[data-cn-topo] button.cn-topo-btn:not(.cn-topo-btn--contorno):hover { background: #fff !important; border-color: #fff !important; }
.cn-topo[data-cn-topo] a.cn-topo-btn.cn-topo-btn--contorno {
    background: var(--cn-tom-vidro) !important; border-color: var(--cn-tom-vidro-borda) !important; color: #fff !important;
}
.cn-topo[data-cn-topo] a.cn-topo-btn.cn-topo-btn--contorno:hover { background: var(--cn-tom-vidro) !important; border-color: #fff !important; }
/* Link dentro da mensagem (área do detalhe da loja) e abas (órgãos e bancas) sobre o degradê. */
.cn-topo[data-cn-topo] .cn-topo-msg a:not(.cn-topo-btn) { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
.cn-topo[data-cn-topo] .cn-topo-abas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.cn-topo[data-cn-topo] .cn-topo-abas a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px;
    border: 2px solid var(--cn-tom-vidro-borda) !important; border-radius: 10px !important;
    background: var(--cn-tom-vidro) !important; color: #fff !important; box-shadow: none !important;
    font: 800 calc(16 * var(--cn-topo-u)) / 1.2 Inter, ui-sans-serif, system-ui, sans-serif !important; text-decoration: none !important;
}
.cn-topo[data-cn-topo] .cn-topo-abas a:hover { background: var(--cn-tom-vidro) !important; border-color: #fff !important; }
.cn-topo[data-cn-topo] .cn-topo-abas a[aria-current="page"] { border-color: #dfe8c7 !important; background: #dfe8c7 !important; color: #1f2a07 !important; }
.cn-topo[data-cn-topo] :is(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 3px !important; box-shadow: none !important; }
.cn-topo[data-cn-topo] .cn-topo-numeros {
    display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0 !important; padding: 0; list-style: none;
    color: #e8f0d3 !important; font-weight: 700; font-size: calc(15 * var(--cn-topo-u));
}
.cn-topo[data-cn-topo] .cn-topo-numeros b { color: #fff; font-family: Outfit, Inter, sans-serif; font-size: 1.12em; }
/* Quadro de texto na coluna da ação (termos, privacidade, acessibilidade). */
.cn-topo[data-cn-topo] .cn-topo-quadro {
    margin: 0; padding: clamp(18px, 1.6vw, 26px); border: 1px solid var(--cn-tom-cartao-vidro-borda) !important; border-radius: 14px;
    background: var(--cn-tom-vidro) !important; color: #fff !important; box-shadow: none !important;
}
.cn-topo[data-cn-topo] .cn-topo-quadro :is(h2, h3) { margin: 0 0 8px; color: #fff !important; font: 700 calc(20 * var(--cn-topo-u)) / 1.25 Outfit, Inter, sans-serif !important; }
.cn-topo[data-cn-topo] .cn-topo-quadro p { margin: 0; color: rgba(255, 255, 255, .92) !important; font-size: calc(16 * var(--cn-topo-u)); line-height: 1.55; }

/* Visual: o ninja solto, sem moldura nem cartão (o quadrado escuro de Simulados e Revii era a moldura antiga). */
.cn-topo[data-cn-topo] .cn-topo-visual { margin: 0; min-width: 0; }
.cn-topo[data-cn-topo] :is(figure, img).cn-topo-visual { padding: 0; border: 0; background: none; box-shadow: none; }
.cn-topo[data-cn-topo] img.cn-topo-ninja,
.cn-topo[data-cn-topo] .cn-topo-visual > img.cn-topo-ninja {
    display: block; width: 96px; max-width: 100%; height: auto; margin: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35));
}
/* Capturas sobrepostas da home: o componente da home (home-public.css) com a altura da faixa. */
.cn-topo[data-cn-topo] .cn-topo-capturas { position: relative; width: 100%; margin: 0; }

@media (max-width: 1099px) {
    .cn-topo[data-cn-topo] .cn-topo-trilha { order: -2; }
    .cn-topo[data-cn-topo] .cn-topo-visual:not(.cn-topo-capturas) { order: -1; justify-self: start; }
}
@media (max-width: 600px) {
    .cn-topo[data-cn-topo] .cn-topo-acoes > .cn-topo-btn { flex: 1 1 100%; width: 100%; }
}

/* Grade a partir de 1100 px: 12 colunas, altura de 480 px. De 1100 a 1279: mensagem 1–6, ação 7–10, ninja 11–12;
   a partir de 1280: mensagem 1–5, ação 6–10, ninja 11–12 (capturas da home 6–12). Rota sem ação: a mensagem vai
   até a coluna 9; sem ninja, a ação (ou a mensagem) vai até a 12. Nunca fica coluna vazia. */
@media (min-width: 1100px) {
    .cn-topo[data-cn-topo] > .cn-topo-in {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: clamp(24px, 3vw, 56px);
        row-gap: 0;
        align-items: center;
        align-content: center;
        min-height: 480px;
        padding: 32px 0;
    }
    .cn-topo[data-cn-topo] > .cn-topo-in.has-trilha { padding-top: 56px; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-trilha { position: absolute; top: 16px; left: 0; right: 0; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-msg { grid-column: 1 / span 6; grid-row: 1; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-acao { grid-column: 7 / span 4; grid-row: 1; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-visual { grid-column: 11 / -1; grid-row: 1; justify-self: center; align-self: center; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-capturas { grid-column: 7 / -1; justify-self: center; width: min(100%, 720px); height: 408px; aspect-ratio: auto; }
    .cn-topo[data-cn-topo] > .cn-topo-in:not(:has(> .cn-topo-acao)):not(:has(> .cn-topo-capturas)) > .cn-topo-msg { grid-column: 1 / span 9; }
    .cn-topo[data-cn-topo] > .cn-topo-in:not(:has(> .cn-topo-visual)) > .cn-topo-acao { grid-column: 7 / -1; }
    .cn-topo[data-cn-topo] > .cn-topo-in:not(:has(> .cn-topo-visual)):not(:has(> .cn-topo-acao)) > .cn-topo-msg { grid-column: 1 / -1; }
    .cn-topo[data-cn-topo] img.cn-topo-ninja,
    .cn-topo[data-cn-topo] .cn-topo-visual > img.cn-topo-ninja { width: clamp(96px, 11vw, 230px); max-height: 416px; }
}
@media (min-width: 1280px) {
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-msg { grid-column: 1 / span 5; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-acao { grid-column: 6 / span 5; }
    .cn-topo[data-cn-topo] > .cn-topo-in > .cn-topo-capturas { grid-column: 6 / -1; }
    .cn-topo[data-cn-topo] > .cn-topo-in:not(:has(> .cn-topo-visual)) > .cn-topo-acao { grid-column: 6 / -1; }
}
/* Título longo que não pode mudar (Revii: 4 linhas): a mensagem fica com as colunas 1–6 e os botões com 7–10 também a
   partir de 1280 px (a grade de 1100–1279), para a faixa caber nos 480 px. */
@media (min-width: 1280px) {
    .cn-topo.cn-topo--mensagem-longa[data-cn-topo] > .cn-topo-in > .cn-topo-msg { grid-column: 1 / span 6; }
    .cn-topo.cn-topo--mensagem-longa[data-cn-topo] > .cn-topo-in > .cn-topo-acao { grid-column: 7 / span 4; }
}

/* Tema escuro: os mesmos degradês do claro (não ficam mais escuros que o painel); principal creme-oliva e secundário no
   vidro, como no claro (docs/ux/tom-publico.md §5). */
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] a.cn-topo-btn:not(.cn-topo-btn--contorno),
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] button.cn-topo-btn:not(.cn-topo-btn--contorno) {
    background: #dfe8c7 !important; border-color: #dfe8c7 !important; color: #1f2a07 !important;
}
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] a.cn-topo-btn:not(.cn-topo-btn--contorno):hover { background: #fff !important; border-color: #fff !important; }
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] a.cn-topo-btn.cn-topo-btn--contorno.cn-topo-btn--contorno {
    background: var(--cn-tom-vidro) !important; border-color: var(--cn-tom-vidro-borda) !important; color: #fff !important;
}
/* Abas sobre a faixa (órgãos e bancas) no escuro: a não selecionada no vidro com texto branco, como no claro (a regra
   geral de links do escuro a deixava creme, 4,2:1 sobre o vidro). */
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] .cn-topo-abas a:not([aria-current="page"]):not([aria-current="page"]) { color: #fff !important; }
/* O ninja continua solto no escuro: a regra antiga da vitrine do acesso (.access-showcase img) pintava um quadrado
   #0b2530 atrás dele, mais escuro que a faixa (docs/ux/tom-publico.md §7.1). */
:is(html[data-public-theme="dark"], html.dark, .theme-dark) .cn-topo[data-cn-topo] img.cn-topo-ninja.cn-topo-ninja {
    border: 0 !important; background: none !important; box-shadow: none !important;
}
@media (forced-colors: active) {
    .cn-topo[data-cn-topo] { border-bottom: 1px solid CanvasText !important; }
    .cn-topo[data-cn-topo] :is(a, button, input):focus-visible { outline-color: Highlight !important; }
}