/* ============================================================================
   DocSmart 3.0 — NEO-BRUTALISM
   Inspirado em neobrutalism.dev / Gumroad. Bordas pretas grossas, sombras
   duras deslocadas, fundo creme, cores chapadas, tipografia display pesada.
   ============================================================================ */

:root {
    /* Superfícies — v2 (21/09/2026): os neutros frios da paleta JFCE, no lugar
       do creme. Ver `docs/design-system/README.md` §01 e "O que ainda não migrou". */
    --nb-bg:        #F3F5F5;
    --nb-bg-alt:    #FFFFFF;
    --nb-bg-grid:   #E2E6E6;
    --nb-bg-dark:   #0A0A0A;
    --nb-ink:       #0A0A0A;
    /* O cinza de "PORTAL DA" no logo: 5,57:1 no fundo, 4,83 na grade. Mesmo
       motivo do `--g-tenue`: quase tudo que ele pinta é texto pequeno. */
    --nb-muted:     #626262;

    /* A marca — o AZUL da estrela desde a v2 (era o amarelo #FFDC58). O dono
       escolheu o azul SÓLIDO também nestas páginas (e não um tint), vendo a
       prévia. Por isso a marca é um PAR: todo fundo `--nb-primary` leva texto
       `--nb-primary-texto` — tinta sobre o azul dá 2,27:1. Voltar a um tint é
       trocar estes dois valores (tint + `--nb-ink`).
       ⚠️ Três papéis que o amarelo fazia sozinho se separaram:
         · realce ATRÁS de texto em tinta (hover de link, `code` em prosa, marca-
           texto de título) e a marca SOBRE o preto → `--nb-primary-claro`;
         · aviso de verdade (`.alert-warning`, `.nb-callout--warn`) → `--nb-aviso`;
         · o resto (botão, cabeçalho de tabela, aba e chip ativos) → o par. */
    --nb-primary:       #264A97;
    --nb-primary-texto: #FFFFFF;   /* 8,37:1 */
    --nb-primary-d:     #1C3871;   /* hover e gráfico escuro (sublinhado de link) */
    --nb-primary-claro: #B8C6E3;   /* 11,06:1 com a tinta, nos dois sentidos */
    --nb-aviso:         #FBEEB6;   /* o mesmo `--g-aviso` */
    --nb-blue:      #88AAEE;
    --nb-pink:      #FF6B9D;
    --nb-green:     #A4F4A4;
    --nb-red:       #FF5C5C;
    --nb-purple:    #C4A1FF;
    --nb-cyan:      #7BE0F0;
    --nb-orange:    #FFB347;

    /* Brutalism essentials */
    --nb-bw:        3px;
    --nb-radius:    6px;
    --nb-shadow:    5px 5px 0 0 var(--nb-ink);
    --nb-shadow-sm: 3px 3px 0 0 var(--nb-ink);
    --nb-shadow-lg: 8px 8px 0 0 var(--nb-ink);
    --nb-shadow-xl: 12px 12px 0 0 var(--nb-ink);

    /* Tipografia da MARCA — landing, login, planos. Neobrutalismo. */
    --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
    --font-heading: "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Tipografia das TELAS DE TRABALHO — três famílias, três papéis, fixadas em
       `docs/design-system/README.md` (02 · Tipografia):

           DM Sans        interface   título, rótulo, botão, corpo de UI
           Source Serif 4 prosa       explicação, ementa, ajuda
           IBM Plex Mono  dado        chave, URL, CPF, data, contagem

       ⚠️ Moram AQUI, e não no `gabinete.css`, porque o editor de minuta
       (`minuta.css`) não carrega aquela folha — declarados lá, o cromo do editor
       cairia calado no fallback e ficaria com a tipografia da landing enquanto a
       lista ao lado usa a nova. `custom.css` é a única folha que toda página
       carrega.

       O fallback de cada um é a família antiga equivalente: uma falha do Google
       Fonts degrada a tipografia sem quebrar o desenho.

       ⚠️ Nunca serifa em rótulo, botão ou dado — a serifa marca o texto que a
       pessoa lê para DECIDIR. E `Tinos` continua sendo outra coisa: é a serifa
       do DOCUMENTO (métrica-compatível com o Times New Roman do `.docx`), usada
       na folha do editor e na prévia da lista de minutas. */
    --gf-ui:    "DM Sans", "Public Sans", system-ui, -apple-system, sans-serif;
    --gf-prosa: "Source Serif 4", Georgia, "Times New Roman", serif;
    --gf-mono:  "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

    /* Aliases legados para não quebrar templates antigos */
    --bg-primary:   var(--nb-bg);
    --bg-secondary: var(--nb-bg-grid);
    --bg-card:      var(--nb-bg-alt);
    --bg-input:     var(--nb-bg-alt);
    --text-primary: var(--nb-ink);
    --text-secondary: var(--nb-muted);
    --text-muted:   var(--nb-muted);
    --border-color: var(--nb-ink);
    --accent-amber: #C9A227;
    --accent-blue:  #2E5BFF;
    --accent-green: #1F9D55;
    --accent-red:   #E03131;
    --accent-cyan:  #0BA5B6;
    --accent-purple:#7B3FE4;
}

/* ----------------------------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--nb-bg); }

body {
    background-color: var(--nb-bg);
    color: var(--nb-ink);
    font-family: var(--font-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0);
    background-size: 24px 24px;
}

a {
    color: var(--nb-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--nb-primary-d);
    font-weight: 600;
}
a:hover {
    color: var(--nb-ink);
    text-decoration-color: var(--nb-ink);
    background: var(--nb-primary-claro);   /* realce atrás de texto: tint, não o azul */
}

p { color: var(--nb-ink); line-height: 1.6; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--nb-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

code, pre, .font-mono { font-family: var(--font-mono) !important; }

code {
    background: var(--nb-primary-claro);   /* `code` em prosa é realce: tint */
    color: var(--nb-ink);
    padding: 1px 6px;
    border: 2px solid var(--nb-ink);
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

pre code,
.nb-code code,
.json-display code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-weight: 400;
}

::selection { background: var(--nb-ink); color: var(--nb-primary-claro); }   /* 11,06:1; o azul daria 2,27 */

/* ----------------------------------------------------------------------------
   NAVBAR
   ---------------------------------------------------------------------------- */

/* ⚠️ Sem a sombra dura de 4px, e a borda vai a 2px.

   A navbar é STICKY, então todo conteúdo escuro da página passa por baixo dela.
   Com 3px de borda MAIS 4px de sombra sólida, eram 7px de preto permanentes no
   alto da tela — e quando a sombra de um cartão (o plano em destaque da landing,
   por exemplo) deslizava por baixo, os dois pretos se fundiam numa lasca de 15px
   que parece elemento quebrado, não separador. Foi assim que apareceu.

   2px de borda bastam para separar a barra do conteúdo, e é a mesma espessura
   que enquadra as caixas da landing. */
.navbar-docsmart {
    background: var(--nb-bg-alt);
    border-bottom: 2px solid var(--nb-ink);
    padding: 0.65rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ---------------------------------------------------------------------------
   MARCA — PJe Agent Ceará
   ---------------------------------------------------------------------------
   ⚠️ **A marca antiga quebrava a barra em 360px.** "TecJustica PJe MNI Lab"
   ocupava 281 dos 360 pixels e empurrava o hamburger para a linha de baixo
   (medido em navegador, 24/08/2026). O ajuste de fonte que já existia em
   `max-width: 420px` não resolvia: o problema era o NÚMERO DE CARACTERES, não o
   corpo da fonte. A marca nova cabe porque é curta, não porque encolhe.

   ⚠️ **É uma IMAGEM, e o `width` vem do macro.** Sem largura declarada o
   cabeçalho salta quando o PNG carrega — e a marca é a primeira coisa da página.
   Ver `templates/_marca.html`, que também guarda por que ela só serve sobre
   fundo claro.
   -------------------------------------------------------------------------- */
.marca {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-width: 0;
}
.marca:hover { background: transparent; text-decoration: none; }
.marca__img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}
/* Em tela estreita a marca encolhe junto — mas não abaixo do ponto em que o
   "CEARÁ" de 10px vira borrão. */
@media (max-width: 420px) {
    .marca__img { height: 36px; }
}

.navbar-docsmart .navbar-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--nb-ink);
    text-decoration: none;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.navbar-docsmart .navbar-brand:hover { background: transparent; }
.navbar-docsmart .brand-pipe {
    color: var(--nb-primary-d);
    margin-right: 4px;
}
.navbar-docsmart .brand-subtitle {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--nb-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
    font-weight: 600;
}

.navbar-docsmart .nav-link {
    color: var(--nb-ink);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.85rem !important;
    border: 2px solid transparent;
    border-radius: var(--nb-radius);
    margin: 0 2px;
    text-decoration: none;
    transition: all 0.12s ease-out;
}
.navbar-docsmart .nav-link:hover {
    background: var(--nb-primary);
    border-color: var(--nb-ink);
    color: var(--nb-primary-texto);
}
.navbar-docsmart .nav-link.active-page {
    background: var(--nb-primary);
    border-color: var(--nb-ink);
    color: var(--nb-primary-texto);
    box-shadow: 2px 2px 0 0 var(--nb-ink);
}

.navbar-docsmart .nav-link .badge {
    background: var(--nb-ink) !important;
    color: var(--nb-primary-claro) !important;
    border: 2px solid var(--nb-ink);
    font-family: var(--font-mono);
    font-weight: 700;
}

.navbar-docsmart .user-badge,
.navbar-docsmart .navbar-conta__nome {
    background: var(--nb-bg-grid);
    border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius);
    color: var(--nb-ink);
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: none;
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.navbar-docsmart .user-badge:hover { background: var(--nb-bg-grid); }

.admin-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--nb-red);
    border: 1.5px solid var(--nb-ink);
    border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   Navbar de quem está LOGADO — marca, conta e sair, e nada mais.

   A navegação da área logada mora na lateral do gabinete (`_gabinete.html`).
   Aqui sobra o que não é destino: quem está logado e por onde se sai. Sem
   `collapse` e sem `navbar-toggler`, porque três elementos cabem em 320px.
   ---------------------------------------------------------------------------- */
.navbar-conta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
/* A situação da conta (ativo/trial/inativo) era um `.badge` pendurado no link
   "Dashboard". Sem o link, ela vira uma etiqueta discreta ao lado do nome —
   continua sendo a resposta a "minha assinatura está de pé?", que é a única
   coisa da conta que muda sozinha. */
.navbar-conta__estado {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nb-muted);
    padding: 0 0.25rem;
}
@media (max-width: 575.98px) {
    .navbar-conta__estado { display: none; }
    .navbar-docsmart .user-badge { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ⚠️ Nas telas de trabalho a navbar perde o vinco. 2px de borda preta MAIS a
   sombra dura de 3px do breakpoint largo davam cinco pixels de preto no alto de
   uma tela cuja gramática inteira é o fio de 1px — a mesma correção que o chat
   já tinha recebido, agora valendo para o gabinete. */
body.is-gabinete .navbar-docsmart {
    border-bottom: 1px solid var(--nb-ink);
    box-shadow: none;
}

.navbar-toggler {
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius);
    padding: 0.4rem 0.6rem;
    background: var(--nb-primary);
}
.navbar-toggler:focus { box-shadow: var(--nb-shadow-sm); }
/* O ícone é o texto do botão: branco sobre o azul (era tinta sobre o amarelo). */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */

.footer-docsmart {
    background: var(--nb-bg-alt);
    border-top: var(--nb-bw) solid var(--nb-ink);
    padding: 1.25rem 1rem;
    margin-top: 4rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--nb-muted);
    font-weight: 500;
}
.footer-docsmart a {
    color: var(--nb-muted) !important;
    font-size: 0.78rem !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important;
    background: transparent;
    font-weight: 500;
}
.footer-docsmart a:hover {
    background: var(--nb-primary);
    color: var(--nb-primary-texto) !important;
}

/* ----------------------------------------------------------------------------
   NB CORE: CARDS
   ---------------------------------------------------------------------------- */

.nb-card,
.card {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow);
    padding: 0;
    margin-bottom: 1.25rem;
    color: var(--nb-ink);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.nb-card.is-interactive,
a.card,
a.nb-card {
    text-decoration: none;
    cursor: pointer;
}
.nb-card.is-interactive:hover,
a.card:hover,
a.nb-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--nb-shadow-lg);
    background: var(--nb-bg-alt);
}

.card-header,
.nb-card-header {
    background: var(--nb-bg-grid) !important;
    border-bottom: var(--nb-bw) solid var(--nb-ink) !important;
    padding: 0.85rem 1.1rem !important;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    color: var(--nb-ink) !important;
    border-radius: var(--nb-radius) var(--nb-radius) 0 0;
}

.card-body,
.nb-card-body {
    padding: 1.25rem !important;
    color: var(--nb-ink);
}

/* Cores temáticas — borda esquerda virou fundo do header */
.card-accent-blue   .card-header { background: var(--nb-blue) !important; }
.card-accent-amber  .card-header { background: var(--nb-primary) !important; color: var(--nb-primary-texto) !important; }
.card-accent-green  .card-header { background: var(--nb-green) !important; }
.card-accent-red    .card-header { background: var(--nb-red) !important; color: var(--nb-bg-alt) !important; }
.card-accent-cyan   .card-header { background: var(--nb-cyan) !important; }
.card-accent-purple .card-header { background: var(--nb-purple) !important; }

.card-accent-blue,
.card-accent-amber,
.card-accent-green,
.card-accent-red,
.card-accent-cyan,
.card-accent-purple { border-color: var(--nb-ink) !important; }

/* ----------------------------------------------------------------------------
   NB CORE: BUTTONS
   ---------------------------------------------------------------------------- */

.nb-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--nb-bg-alt);
    color: var(--nb-ink) !important;
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow-sm);
    padding: 0.55rem 1rem !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.82rem !important;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    cursor: pointer;
}
.nb-btn:hover,
.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--nb-ink);
    background: var(--nb-bg-alt);
}
.nb-btn:active,
.btn:active,
.nb-btn.active,
.btn.active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 0 var(--nb-ink) !important;
}
.nb-btn:focus,
.btn:focus { outline: none; box-shadow: var(--nb-shadow-sm) !important; }

.nb-btn--primary, .btn-primary {
    background: var(--nb-primary) !important;
    color: var(--nb-primary-texto) !important;
}
/* `.btn-warning` saiu do par acima: em `/docs` ele marca a FALHA de cópia
   (`docs.html`), e ia virar azul de ação junto com o `.btn-primary`. */
.btn-warning {
    background: var(--nb-aviso) !important;
    color: var(--nb-ink) !important;
}
.nb-btn--blue, .btn-info {
    background: var(--nb-blue) !important;
    color: var(--nb-ink) !important;
}
.nb-btn--green, .btn-success {
    background: var(--nb-green) !important;
    color: var(--nb-ink) !important;
}
.nb-btn--red, .btn-danger {
    background: var(--nb-red) !important;
    color: var(--nb-ink) !important;
}

/* Botão de apagar ARMADO, esperando o segundo clique (data-confirmar, em
   static/js/minuta-lista.js). Mora aqui e não em minuta.css porque o padrão
   vale em toda a casa — /modelos e o dashboard usam, e o dashboard não carrega
   aquela folha.
   ⚠️ `!important` é obrigatório: as variantes de cor logo acima já usam
   `!important`, e sem ele o botão ficaria armado sem ficar vermelho — a
   confirmação viraria um clique perdido. */
.btn.is-confirmando {
    background: var(--nb-red) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
}
.nb-btn--pink   { background: var(--nb-pink) !important;   color: var(--nb-ink) !important; }
.nb-btn--purple { background: var(--nb-purple) !important; color: var(--nb-ink) !important; }
.nb-btn--ink, .btn-dark {
    background: var(--nb-ink) !important;
    color: var(--nb-bg) !important;
}
.nb-btn--ghost,
.btn-outline-light, .btn-outline-primary, .btn-outline-secondary,
.btn-outline-warning, .btn-outline-info {
    background: var(--nb-bg-alt) !important;
    color: var(--nb-ink) !important;
}
.btn-amber { background: var(--nb-primary) !important; color: var(--nb-primary-texto) !important; }

.btn-sm {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.72rem !important;
    box-shadow: 3px 3px 0 0 var(--nb-ink);
}
.btn-sm:hover { box-shadow: 4px 4px 0 0 var(--nb-ink); }

.nb-btn--xl, .btn-lg {
    padding: 0.85rem 1.6rem !important;
    font-size: 1rem !important;
    box-shadow: var(--nb-shadow-lg);
}
.nb-btn--xl:hover, .btn-lg:hover { box-shadow: var(--nb-shadow-xl); }

.btn.copied,
.btn.copy-feedback.copied {
    background: var(--nb-green) !important;
    color: var(--nb-ink) !important;
}

/* ----------------------------------------------------------------------------
   NB CORE: BADGES / TAGS
   ---------------------------------------------------------------------------- */

.nb-badge,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--nb-bg-alt) !important;
    color: var(--nb-ink) !important;
    border: 2px solid var(--nb-ink);
    border-radius: 4px;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
}
.bg-success, .badge.bg-success, .badge-active { background: var(--nb-green) !important; color: var(--nb-ink) !important; }
.bg-warning, .badge.bg-warning { background: var(--nb-aviso) !important; color: var(--nb-ink) !important; }
.badge-admin { background: var(--nb-primary) !important; color: var(--nb-primary-texto) !important; }
.bg-danger,  .badge.bg-danger,  .badge-revoked, .badge-banned { background: var(--nb-red) !important; color: var(--nb-bg-alt) !important; }
.bg-primary, .badge.bg-primary { background: var(--nb-blue) !important; color: var(--nb-ink) !important; }
.bg-info,    .badge.bg-info    { background: var(--nb-cyan) !important; color: var(--nb-ink) !important; }
.bg-secondary, .badge.bg-secondary, .badge-user { background: var(--nb-bg-grid) !important; color: var(--nb-ink) !important; }
.bg-dark,    .badge.bg-dark    { background: var(--nb-ink) !important; color: var(--nb-bg) !important; }

/* ----------------------------------------------------------------------------
   NB CORE: FORMS
   ---------------------------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    background: var(--nb-bg-alt) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    padding: 0.65rem 0.85rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    box-shadow: 3px 3px 0 0 var(--nb-ink);
    transition: box-shadow 0.12s, transform 0.12s;
}
.form-control::placeholder { color: var(--nb-muted); opacity: 0.7; }

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    background: var(--nb-bg-alt) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
    outline: none !important;
    box-shadow: 5px 5px 0 0 var(--nb-ink) !important;
    transform: translate(-1px, -1px);
}
.form-control-sm,
.form-select-sm {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
    box-shadow: 2px 2px 0 0 var(--nb-ink);
}

.processo-input {
    font-family: var(--font-mono) !important;
    letter-spacing: 0.5px;
}

label, .form-label, .data-label {
    font-family: var(--font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--nb-ink) !important;
    margin-bottom: 0.4rem;
    display: block;
}

.form-text, .form-text small {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--nb-muted) !important;
    margin-top: 0.4rem;
    display: block;
}

.input-group .form-control {
    border-right: none !important;
    border-radius: var(--nb-radius) 0 0 var(--nb-radius) !important;
}
.input-group .btn {
    border-radius: 0 var(--nb-radius) var(--nb-radius) 0 !important;
    box-shadow: 3px 3px 0 0 var(--nb-ink);
}

.form-check-input {
    width: 1.15em !important;
    height: 1.15em !important;
    border: 2px solid var(--nb-ink) !important;
    border-radius: 3px !important;
    background: var(--nb-bg-alt) !important;
    box-shadow: 1px 1px 0 0 var(--nb-ink);
    cursor: pointer;
}
.form-check-input:checked {
    background: var(--nb-primary) !important;
    border-color: var(--nb-ink) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 10l3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-input:focus { box-shadow: 2px 2px 0 0 var(--nb-ink) !important; outline: none; }

/* ----------------------------------------------------------------------------
   NB CORE: TABLES
   ---------------------------------------------------------------------------- */

.table,
.nb-table {
    background: var(--nb-bg-alt);
    color: var(--nb-ink);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.table thead,
.nb-table thead { background: var(--nb-primary); }
.table thead th,
.nb-table thead th {
    background: var(--nb-primary);
    color: var(--nb-primary-texto) !important;
    border: none;
    border-bottom: var(--nb-bw) solid var(--nb-ink) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.72rem;
    padding: 0.7rem 0.85rem !important;
    white-space: nowrap;
}
.table tbody td,
.nb-table tbody td {
    background: transparent;
    color: var(--nb-ink) !important;
    border: none !important;
    border-bottom: 2px solid var(--nb-ink) !important;
    padding: 0.7rem 0.85rem !important;
    vertical-align: middle;
    font-size: 0.88rem;
}
.table tbody tr:last-child td,
.nb-table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover td { background: var(--nb-bg-grid) !important; }

.table-responsive {
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
    overflow: hidden;
    background: var(--nb-bg-alt);
    margin-bottom: 1.25rem;
}
.card .table-responsive,
.nb-card .table-responsive {
    border: none;
    box-shadow: none;
    border-radius: 0 0 var(--nb-radius) var(--nb-radius);
    margin-bottom: 0;
}
.card-body .table-responsive {
    border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
    margin-bottom: 0.5rem;
}

table.sortable thead th.sortable { cursor: pointer; user-select: none; }
table.sortable thead th.sortable[data-sort-dir="asc"]::after  { content: " ↑"; }
table.sortable thead th.sortable[data-sort-dir="desc"]::after { content: " ↓"; }

/* ----------------------------------------------------------------------------
   NB CORE: CALLOUTS / HELP PANELS / ALERTS
   ---------------------------------------------------------------------------- */

.nb-callout,
.help-panel,
.alert {
    background: var(--nb-bg-alt);
    color: var(--nb-ink) !important;
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow-sm);
    padding: 1rem 1.2rem !important;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    position: relative;
}
.nb-callout h6,
.help-panel h6,
.alert h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--nb-ink);
}
.nb-callout p,
.help-panel p,
.alert p { color: var(--nb-ink); margin-bottom: 0.4rem; }
.nb-callout p:last-child,
.help-panel p:last-child,
.alert p:last-child { margin-bottom: 0; }

.nb-callout--info,    .help-panel { background: var(--nb-blue); }
.nb-callout--ok,      .alert-success, .alert-info { background: var(--nb-green); }
.nb-callout--warn,    .alert-warning { background: var(--nb-aviso); }   /* aviso NÃO vira azul */
.nb-callout--danger,  .alert-danger { background: var(--nb-red); color: var(--nb-bg-alt) !important; }
.nb-callout--danger * { color: var(--nb-bg-alt) !important; }
.nb-callout--danger code { background: var(--nb-ink); color: var(--nb-primary-claro); border-color: var(--nb-bg-alt); }
.nb-callout--purple { background: var(--nb-purple); }
.nb-callout--cyan   { background: var(--nb-cyan); }
.nb-callout--cream  { background: var(--nb-bg-grid); }

.alert .btn-close {
    background: transparent;
    border: 2px solid var(--nb-ink);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' d='M3 3l10 10M13 3L3 13'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

/* ----------------------------------------------------------------------------
   NB CORE: STAT CARDS
   ---------------------------------------------------------------------------- */

.nb-stat {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
    padding: 1.1rem 1.2rem;
    transition: transform 0.12s, box-shadow 0.12s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
}
.nb-stat:hover { transform: translate(-2px, -2px); box-shadow: var(--nb-shadow-lg); }

.nb-stat__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--nb-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.nb-stat__value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--nb-ink);
    letter-spacing: -0.02em;
}
.nb-stat--yellow { background: var(--nb-primary); color: var(--nb-primary-texto); }
.nb-stat--blue   { background: var(--nb-blue); }
.nb-stat--green  { background: var(--nb-green); }
.nb-stat--pink   { background: var(--nb-pink); }
.nb-stat--purple { background: var(--nb-purple); }
.nb-stat--cyan   { background: var(--nb-cyan); }
.nb-stat--red    { background: var(--nb-red); color: var(--nb-bg-alt); }
.nb-stat--red .nb-stat__label { color: var(--nb-bg-alt); }
.nb-stat--red .nb-stat__value { color: var(--nb-bg-alt); }

.card .h2 {
    font-family: var(--font-display);
    color: var(--nb-ink);
    font-size: 2rem;
    line-height: 1;
}

.data-value {
    font-family: var(--font-body);
    color: var(--nb-ink);
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
}
.process-number {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--nb-primary-texto);
    background: var(--nb-primary);
    border: 2px solid var(--nb-ink);
    border-radius: 4px;
    padding: 2px 8px;
    display: inline-block;
}

.credit-positive { color: var(--accent-green) !important; font-weight: 700; }
.credit-zero { color: var(--nb-muted) !important; }

/* ----------------------------------------------------------------------------
   NB CORE: CODE BLOCKS / JSON DISPLAY
   ---------------------------------------------------------------------------- */

.nb-code,
.json-display {
    background: var(--nb-ink);
    color: #F3F5F5;
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    overflow-x: auto;
    position: relative;
}
.nb-code pre,
.json-display pre {
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-x: auto;
}
.nb-code code,
.json-display code {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: 400 !important;
}
.nb-code .copy-btn,
.json-display .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}

.hljs { background: transparent !important; color: #F3F5F5 !important; }
.hljs-string  { color: #A4F4A4 !important; }
.hljs-number  { color: #FFDC58 !important; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in { color: #FF6B9D !important; font-weight: 700; }
.hljs-attr,
.hljs-symbol  { color: #88AAEE !important; }
.hljs-comment { color: #8a8773 !important; font-style: italic; }
.hljs-title,
.hljs-name,
.hljs-section { color: #C4A1FF !important; font-weight: 700; }

/* ----------------------------------------------------------------------------
   NB CORE: HERO + SECTION TITLE + DECORATIONS
   ---------------------------------------------------------------------------- */

.nb-section,
.hero-section {
    position: relative;
    padding: 3.5rem 0;
    background: var(--nb-bg);
}
.nb-section--alt { background: var(--nb-bg-grid); }
.nb-section--ink { background: var(--nb-ink); color: var(--nb-bg); }

.section-divider {
    border: none;
    height: var(--nb-bw);
    background: var(--nb-ink);
    margin: 0;
}

.nb-hero {
    text-align: center;
    padding: 4rem 1rem 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(560px, 82vh, 880px);
    overflow: hidden; /* recorta a animação 3D, sem scroll horizontal */
}

/* ----- Camada 3D do hero (Three.js) ----- */
.hero3d-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none; /* nunca bloqueia os botões */
}
.hero3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* Véu radial creme: clareia o centro p/ a headline ficar nítida sobre as peças */
.hero3d-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 66% at 50% 45%,
        rgba(243, 245, 245, 0.97) 0%,
        rgba(243, 245, 245, 0.88) 35%,
        rgba(243, 245, 245, 0.45) 60%,
        rgba(243, 245, 245, 0.05) 82%,
        rgba(243, 245, 245, 0) 100%
    );
}

/* Conteúdo do hero acima das camadas 3D */
.nb-hero > .container { position: relative; z-index: 2; }

/* Destaque do texto sobre a cena 3D: halo creme (knockout) que "recorta" o
   texto, separando-o das peças sem bloco opaco — mantém a animação visível.
   No título, somamos uma sombra dura sutil p/ o peso neo-brutalista. */
.nb-hero .nb-display {
    text-shadow:
        0 0 2px var(--nb-bg),
        0 2px 14px rgba(243, 245, 245, 0.95),
        0 0 26px rgba(243, 245, 245, 0.85),
        3px 4px 0 rgba(10, 10, 10, 0.10);
}
.nb-hero .lead,
.nb-hero .hero-disclaimer {
    text-shadow:
        0 0 8px var(--nb-bg),
        0 0 16px rgba(243, 245, 245, 0.95);
}
/* O disclaimer é a última linha do hero e cai sobre a faixa mais povoada da
   cena 3D; o halo padrão não segura o contraste. Chapa um fundo próprio. */
.nb-hero .hero-disclaimer {
    display: inline-block;
    background: rgba(243, 245, 245, 0.92);
    border-radius: 4px;
    padding: 0.25rem 0.7rem;
    text-shadow: none;
}
/* O .nb-mark já tem fundo sólido + borda; mantemos só leve profundidade. */
.nb-hero .nb-mark { text-shadow: none; }

@media (max-width: 640px) {
    .nb-hero {
        min-height: auto;
        padding: 3rem 1rem 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Sem motion: a cena 3D renderiza 1 frame estático (tratado no JS).
       Mantemos o véu mais opaco p/ garantir contraste do texto. */
    .hero3d-veil { background: radial-gradient(
        ellipse 70% 62% at 50% 46%,
        rgba(243, 245, 245, 0.96) 0%,
        rgba(243, 245, 245, 0.78) 50%,
        rgba(243, 245, 245, 0.25) 100%
    ); }
}

.nb-display {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--nb-ink);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    margin-bottom: 1.2rem;
}

.nb-mark {
    display: inline-block;
    background: var(--nb-primary-claro);   /* marca-texto: tint, com tinta por cima */
    border: 3px solid var(--nb-ink);
    box-shadow: 4px 4px 0 0 var(--nb-ink);
    padding: 0.05em 0.35em;
    transform: rotate(-1.5deg);
    margin: 0 0.1em;
}
.nb-mark--blue   { background: var(--nb-blue); }
.nb-mark--pink   { background: var(--nb-pink); }
.nb-mark--green  { background: var(--nb-green); }
.nb-mark--purple { background: var(--nb-purple); }

.nb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--nb-bg-alt);
    border: 2px solid var(--nb-ink);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--nb-ink);
    box-shadow: 2px 2px 0 0 var(--nb-ink);
    margin-bottom: 1rem;
}
.nb-eyebrow--yellow { background: var(--nb-primary); color: var(--nb-primary-texto); }
.nb-eyebrow--pink   { background: var(--nb-pink); }
.nb-eyebrow--green  { background: var(--nb-green); }

.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 1.6rem;
    color: var(--nb-ink);
    display: inline-block;
    border: none;
    padding: 0 0 4px;
    background-image: linear-gradient(120deg, var(--nb-primary-claro) 0%, var(--nb-primary-claro) 100%);
    background-repeat: no-repeat;
    background-size: 100% 30%;
    background-position: 0 90%;
    margin-bottom: 1.25rem;
}

@keyframes nb-pop {
    0%   { opacity: 0; transform: translateY(14px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.nb-anim-1 { animation: nb-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.05s; }
.nb-anim-2 { animation: nb-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.18s; }
.nb-anim-3 { animation: nb-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.32s; }
.nb-anim-4 { animation: nb-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    .nb-anim-1, .nb-anim-2, .nb-anim-3, .nb-anim-4 { animation: none; }
    *, *::before, *::after { transition: none !important; }
}

/* ----------------------------------------------------------------------------
   PRICING
   ---------------------------------------------------------------------------- */

.pricing-card {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
    height: 100%;
    overflow: visible !important;
    position: relative;
}
.pricing-card:hover {
    transform: translate(-3px, -3px) rotate(0.5deg);
    box-shadow: var(--nb-shadow-lg);
}
.pricing-card .card-body { padding: 1.5rem !important; background: transparent !important; }
.pricing-card h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nb-ink);
    margin-bottom: 0.4rem;
    font-size: 1.4rem;
}
.pricing-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--nb-ink);
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.02em;
}
.pricing-card.featured {
    background: var(--nb-pink);
    box-shadow: var(--nb-shadow-lg);
    transform: rotate(-1deg);
    z-index: 2;
}
.pricing-card.featured:hover {
    transform: rotate(-1deg) translate(-4px, -4px);
    box-shadow: var(--nb-shadow-xl);
}
.pricing-card.featured h4,
.pricing-card.featured .pricing-price { color: var(--nb-ink); }
.pricing-card.featured::before {
    content: "MAIS ESCOLHIDO";
    position: absolute;
    top: -16px;
    right: -10px;
    background: var(--nb-ink);
    color: var(--nb-primary-claro);
    border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius);
    padding: 0.3rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transform: rotate(6deg);
    z-index: 3;
}

.pricing-card.card-yellow { background: var(--nb-primary); color: var(--nb-primary-texto); }
.pricing-card.card-blue   { background: var(--nb-blue); }
.pricing-card.card-cream  { background: var(--nb-bg-grid); }
.pricing-card.card-green  { background: var(--nb-green); }
.pricing-card.card-purple { background: var(--nb-purple); }

/* ----------------------------------------------------------------------------
   ACCORDION (FAQ + sidebar do debug)
   ---------------------------------------------------------------------------- */

.accordion-item {
    background: var(--nb-bg-alt) !important;
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow-sm);
    margin-bottom: 0.8rem;
    overflow: hidden;
}

.accordion-button {
    background: var(--nb-bg-alt) !important;
    color: var(--nb-ink) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    padding: 0.85rem 1.1rem !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.accordion-button:not(.collapsed) {
    background: var(--nb-primary) !important;
    color: var(--nb-primary-texto) !important;
    border-bottom: var(--nb-bw) solid var(--nb-ink) !important;
}
.accordion-button:focus { box-shadow: none !important; }
.accordion-button::after {
    background-color: var(--nb-ink);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.accordion-item.accent-blue   .accordion-button:not(.collapsed) { background: var(--nb-blue) !important; }
.accordion-item.accent-amber  .accordion-button:not(.collapsed) { background: var(--nb-primary) !important; color: var(--nb-primary-texto) !important; }
.accordion-item.accent-green  .accordion-button:not(.collapsed) { background: var(--nb-green) !important; }
.accordion-item.accent-cyan   .accordion-button:not(.collapsed) { background: var(--nb-cyan) !important; }
.accordion-item.accent-purple .accordion-button:not(.collapsed) { background: var(--nb-purple) !important; }

.accordion-body {
    background: var(--nb-bg-alt);
    color: var(--nb-ink);
    padding: 1rem 1.1rem !important;
    font-size: 0.92rem;
    line-height: 1.55;
}
.accordion-body code { font-size: 0.82em; }
.accordion-body .acc-icon { margin-right: 0.4rem; }

/* ----------------------------------------------------------------------------
   SIDEBAR (DEBUG)
   ---------------------------------------------------------------------------- */

.sidebar-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    align-items: start;
    max-width: 1500px;
    margin: 0 auto;
}
.sidebar {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
    padding: 1.2rem 1rem;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.sidebar-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: var(--nb-bw) solid var(--nb-ink);
}
.sidebar .data-label { font-size: 0.65rem !important; }
.sidebar .accordion-item { margin-bottom: 0.6rem; box-shadow: 2px 2px 0 0 var(--nb-ink); }
.sidebar .accordion-button { font-size: 0.78rem; padding: 0.6rem 0.8rem !important; }
.sidebar .accordion-body { padding: 0.75rem 0.8rem !important; }

@media (max-width: 991px) {
    .sidebar-layout { grid-template-columns: 1fr; }
    .sidebar { position: relative; top: 0; max-height: none; }
}

.main-content { min-width: 0; }

.result-breadcrumb {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
    padding: 0.7rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--nb-muted);
}
.result-breadcrumb .process-num {
    color: var(--nb-primary-texto);
    background: var(--nb-primary);
    border: 2px solid var(--nb-ink);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
}

.empty-state {
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--nb-muted);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--nb-primary-texto);
    background: var(--nb-primary);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    padding: 0.7rem 1rem;
    box-shadow: var(--nb-shadow-sm);
}
.empty-state h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    margin: 1rem 0 0.5rem;
    color: var(--nb-ink);
}

/* Tabs */
.nav-tabs {
    border-bottom: var(--nb-bw) solid var(--nb-ink);
    margin-bottom: 0;
    gap: 0.4rem;
}
.nav-tabs .nav-link {
    background: var(--nb-bg-alt);
    color: var(--nb-ink);
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-bottom: none !important;
    border-radius: var(--nb-radius) var(--nb-radius) 0 0 !important;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    padding: 0.55rem 1rem !important;
    margin-bottom: -3px;
    transition: background 0.12s;
    box-shadow: none;
}
.nav-tabs .nav-link:hover { background: var(--nb-bg-grid); color: var(--nb-ink); transform: none; }
.nav-tabs .nav-link.active {
    background: var(--nb-primary) !important;
    color: var(--nb-primary-texto) !important;
}
.tab-content {
    border: var(--nb-bw) solid var(--nb-ink);
    border-top: none;
    border-radius: 0 var(--nb-radius) var(--nb-radius) var(--nb-radius);
    background: var(--nb-bg-alt);
    padding: 1.25rem;
    box-shadow: var(--nb-shadow);
    margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------------------
   STATUS INDICATOR (TRIBUNAIS)
   ---------------------------------------------------------------------------- */

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--nb-muted);
    border: 1.5px solid var(--nb-ink);
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.status-indicator.active { background: var(--nb-green); }
.status-indicator.inactive { background: var(--nb-red); }

.tribunais-table thead th { background: var(--nb-blue) !important; }
.api-docs-table thead th  { background: var(--nb-primary) !important; color: var(--nb-primary-texto) !important; }

/* ----------------------------------------------------------------------------
   MODALS
   ---------------------------------------------------------------------------- */

.modal-content {
    background: var(--nb-bg-alt);
    color: var(--nb-ink);
    border: var(--nb-bw) solid var(--nb-ink) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow-lg);
}
.modal-header {
    background: var(--nb-primary);
    color: var(--nb-primary-texto);
    border-bottom: var(--nb-bw) solid var(--nb-ink);
    padding: 1rem 1.2rem;
    border-radius: var(--nb-radius) var(--nb-radius) 0 0;
}
.modal-header .modal-title, .modal-header h5 { color: var(--nb-primary-texto); }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-title {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--nb-ink);
}
.modal-body { padding: 1.25rem; color: var(--nb-ink); }
.modal-footer {
    border-top: var(--nb-bw) solid var(--nb-ink);
    padding: 1rem 1.2rem;
    background: var(--nb-bg-grid);
}
.modal-backdrop.show { opacity: 0.65; background: var(--nb-ink); }
.btn-close {
    background-color: var(--nb-bg-alt);
    border: 2px solid var(--nb-ink) !important;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    opacity: 1;
    box-shadow: 2px 2px 0 0 var(--nb-ink);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' d='M3 3l10 10M13 3L3 13'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
   ADMIN — `.user-avatar`, `.filter-toggle` e `.admin-actions` saíram em 04/09/2026

   Só o painel os usava, e ele foi para o design system. O avatar eram 25
   quadrados amarelos numa página de 25 contas, com uma inicial dentro e um
   matiz derivado do comprimento do nome — nenhum dado; `.filter-toggle` era o
   filtro de chaves que escondia linhas em JavaScript sem dizer quantas.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   UTILITÁRIOS / TIPOGRAFIA
   ---------------------------------------------------------------------------- */

.text-amber  { color: var(--accent-amber) !important; font-weight: 700; }
.text-cyan   { color: var(--accent-cyan) !important; font-weight: 700; }
.text-muted  { color: var(--nb-muted) !important; }
.text-secondary { color: var(--nb-muted) !important; }
.text-success { color: var(--accent-green) !important; }
.text-danger  { color: var(--accent-red) !important; }
.text-info    { color: var(--accent-blue) !important; }
.text-white, .text-light { color: var(--nb-ink) !important; }
.text-dark    { color: var(--nb-ink) !important; }

.lead {
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--nb-ink);
}

.display-5 {
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
}

hr { border-top: 2px solid var(--nb-ink); opacity: 1; }

.loading-overlay {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
}
.loading-overlay.active { display: block; }
.loading-overlay .spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid var(--nb-ink);
    border-top-color: var(--nb-primary);
    border-radius: 50%;
    animation: nb-spin 0.8s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }

.spinner-border {
    border: 3px solid var(--nb-ink);
    border-right-color: transparent;
    width: 2rem;
    height: 2rem;
}

/* ----------------------------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .nb-display { font-size: clamp(2rem, 9vw, 2.8rem); }
    .pricing-price { font-size: 2rem; }
    .nb-stat__value { font-size: 1.8rem; }
    .nb-section, .hero-section { padding: 2.5rem 0; }
    .pricing-card.featured { transform: none; }
    .pricing-card.featured:hover { transform: translate(-3px, -3px); }
    .nb-card, .card, .pricing-card { box-shadow: 4px 4px 0 0 var(--nb-ink); }
    .navbar-docsmart { box-shadow: 0 3px 0 0 var(--nb-ink); }
    body { background-image: none; }
}

/* ----------------------------------------------------------------------------
   FIX: Bootstrap utilities que conflitavam com NB
   ---------------------------------------------------------------------------- */

.border, .border-success, .border-danger, .border-warning, .border-info {
    border: var(--nb-bw) solid var(--nb-ink) !important;
}

.rounded, .rounded-2, .rounded-3 { border-radius: var(--nb-radius) !important; }

.shadow-sm { box-shadow: var(--nb-shadow-sm) !important; }
.shadow    { box-shadow: var(--nb-shadow) !important; }
.shadow-lg { box-shadow: var(--nb-shadow-lg) !important; }

/* ----------------------------------------------------------------------------
   DOCS SUB-NAV (sticky) — usado em templates/docs.html
   ---------------------------------------------------------------------------- */

.docs-subnav {
    position: sticky;
    top: 72px; /* altura aproximada da navbar global */
    background: var(--nb-bg);
    border-bottom: 3px solid var(--nb-ink);
    z-index: 50;
    padding: 0.85rem 0;
}
.docs-subnav .container {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.docs-subnav .nb-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.85rem;
    border: 2px solid var(--nb-ink);
    border-radius: 999px;
    background: var(--nb-bg-alt);
    color: var(--nb-ink);
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.docs-subnav .nb-chip:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 0 var(--nb-ink);
    color: var(--nb-ink);
}
.docs-subnav .nb-chip.is-active {
    background: var(--nb-primary);
    color: var(--nb-primary-texto);
    box-shadow: 2px 2px 0 0 var(--nb-ink);
}

/* ----------------------------------------------------------------------------
   NB-QUICK-LINK — cards de atalho no dashboard
   ---------------------------------------------------------------------------- */

.nb-quick-link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem;
    border: 3px solid var(--nb-ink);
    background: var(--nb-bg-alt);
    text-decoration: none;
    color: var(--nb-ink);
    border-radius: 6px;
    box-shadow: 3px 3px 0 0 var(--nb-ink);
    height: 100%;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nb-quick-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--nb-ink);
    color: var(--nb-ink);
}
.nb-quick-link i { font-size: 1.4rem; }
.nb-quick-link strong {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.95rem;
}
.nb-quick-link span {
    font-size: 0.8rem;
    color: var(--nb-ink);
    opacity: 0.7;
}


/* ============================================================================
   REFINO NEO-BRUTALISM — bloco COMPARTILHADO (adicionar UMA vez ao fim de
   custom.css, DEPOIS da linha 1442). Serve landing + dashboard + docs.
   Reusa tokens --nb-* existentes; NÃO redefine cores/fontes/sombras já no :root.
   Ordem importa: declarado por último para vencer .btn:focus (l.367) e
   .accordion-button:focus (l.1007) por especificidade/cascata.
   ============================================================================ */

/* --- 0. TOKENS QUE FALTAVAM: espaçamento de seção (hoje cada página inventa) -- */
:root {
    --nb-space-section: 3.5rem;   /* padding vertical padrão de nb-section */
    --nb-space-block:   2.2rem;   /* gap entre blocos dentro de uma seção */
    --nb-space-stack:   1.25rem;  /* gap padrão entre cards empilhados */
    --nb-readwidth:     62ch;     /* medida de leitura confortável p/ texto longo */
}

/* --- 1. A11Y GLOBAL: foco de teclado visível (corrige outline:none cego) ------
   Uma só regra para as 3 páginas. :focus-visible preserva o hover-shadow no
   mouse e só mostra o anel no teclado. Anula a supressão antiga do accordion. */
.btn:focus-visible,
.nb-btn:focus-visible,
a:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.copy-btn:focus-visible,
.nb-quick-link:focus-visible,
.docs-subnav .nb-chip:focus-visible,
.product-map-card:focus-visible,
.pricing-card a:focus-visible {
    outline: 3px solid var(--nb-ink);
    outline-offset: 3px;
}
.accordion-button:focus-visible { box-shadow: var(--nb-shadow-sm) !important; }

/* --- 2. A11Y GLOBAL: texto secundário SOBRE cor forte ------------------------
   Nunca --nb-muted (cinza) dentro de card colorido — some sobre amarelo/verde.
   Preto translúcido lê em qualquer acento. */
.on-color-muted { color: var(--nb-ink); opacity: 0.74; }
.item-excluded { color: var(--nb-ink); opacity: 0.85; }
.item-excluded span { text-decoration: line-through; }

/* --- 3. A11Y GLOBAL: alerta danger = ink-on-red (corrige ~2.4:1 branco/vermelho)
   Sobrescreve .nb-callout--danger/.alert-danger (l.645-647, white-on-red).
   Afeta as 3 páginas — é o comportamento desejado. */
.nb-callout--danger,
.alert-danger { background: var(--nb-red); color: var(--nb-ink) !important; }
.nb-callout--danger * { color: var(--nb-ink) !important; }
.nb-callout--danger code,
.alert-danger code { background: var(--nb-ink); color: var(--nb-primary); border-color: var(--nb-ink); }

/* --- 4. HIERARQUIA DE TÍTULOS DE CARD: rebaixar p/ o número/preço atacar ------
   pricing/tool/quick-link h4 saem do uppercase gritado p/ Title-Case 700. */
.pricing-card h4 { text-transform: none; font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
.tool-card h4    { text-transform: none; font-weight: 700; font-size: 1.25rem; }

/* --- 5. SUBHEAD único (docs + qualquer sub-bloco): degrau real de hierarquia --
   Substitui os style inline uppercase nos <h5>/<h3> internos. NÃO uppercase
   (eyebrow e title já são caixa-alta — abre o degrau). */
.docs-subhead {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 1rem;
    color: var(--nb-ink);
    margin: 1.75rem 0 0.75rem;
}

/* --- 6. BOTÃO GHOST (hero/secundário): 1 primário amarelo + 1 ghost branco ---- */
.btn-ghost,
.btn-ghost:hover { background: var(--nb-bg-alt) !important; color: var(--nb-ink) !important; }

/* --- 7. SEÇÃO ALINHADA À ESQUERDA (manifesto/docs) — quebra o ritmo central --- */
.nb-section--left { padding-top: var(--nb-space-section); padding-bottom: var(--nb-space-section); }
.nb-section--left .nb-eyebrow,
.nb-section--left .section-title { text-align: left; }
.manifesto-points { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.manifesto-points li { margin-bottom: 0.9rem; line-height: 1.6; max-width: var(--nb-readwidth); }
.manifesto-points .lead-in {
    font-family: var(--font-heading); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--nb-ink); margin-right: 0.4rem;
}

/* --- 8. HERO disclaimer discreto em mono (substitui callout amarelo de aviso) - */
.hero-disclaimer { font-family: var(--font-mono); font-size: 0.8rem; color: var(--nb-muted); margin-top: 0.9rem; }

/* --- 9. MICRO-TARJA / NOTA mono reusável (mcp-note, credit-note) --------------
   Texto-mudo com filete à esquerda; sem fundo de cor. Usado p/ ancorar o
   modelo de crédito e a desambiguação MCP-vs-código em qualquer página. */
.nb-note {
    font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55;
    color: var(--nb-muted); border-left: 3px solid var(--nb-ink);
    padding: 0.2rem 0 0.2rem 0.7rem; margin: 0 0 1.5rem;
}
.nb-note code { font-size: 0.74rem; }
/* tarja honesta dentro de card colorido (ex.: MCP), peso normal, não-muted */
.mcp-note {
    display: block; font-size: 0.82rem; font-weight: 600;
    background: var(--nb-bg-alt); border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius); padding: 0.4rem 0.6rem; margin: 0.2rem 0 0.9rem;
}

/* --- 10. FERRAMENTAS / PRODUTOS: cor só no foco, resto neutro ----------------- */
.tool-card { height: 100%; }

/* --- 11. PRICING: destaque do passo primário SEM hype ------------------------
   Neutraliza o selo 'MAIS ESCOLHIDO' e a rotação do .featured (l.939-967). */
.pricing-card.featured { transform: none; background: var(--nb-bg-alt); }
.pricing-card.featured::before { content: none; }
.pricing-card--primary { box-shadow: var(--nb-shadow-lg); border-width: var(--nb-bw); position: relative; }
.pricing-card--primary::before {
    content: "COMECE AQUI"; position: absolute; top: -14px; left: -8px;
    background: var(--nb-green); color: var(--nb-ink); border: 2px solid var(--nb-ink);
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
    padding: 0.15rem 0.55rem; border-radius: 4px; transform: rotate(-3deg);
}
.pricing-grid--credits .pricing-card:not(.pricing-card--primary) { box-shadow: var(--nb-shadow-sm); }
.delivery-note { font-family: var(--font-mono); font-size: 0.74rem; color: var(--nb-muted); margin-top: 0.4rem; }

/* --- 12. BLOCO B: código-fonte, card largo horizontal ------------------------ */
.pricing-card--source { background: var(--nb-bg-alt); display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) {
    .pricing-card--source { flex-direction: row; align-items: center; }
    .pricing-card--source .source-info { flex: 1 1 62%; }
    .pricing-card--source .source-buy  { flex: 1 1 38%; border-left: var(--nb-bw) solid var(--nb-ink); padding-left: 1.5rem; }
}
.source-badge {
    display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    background: var(--nb-blue); border: 2px solid var(--nb-ink); border-radius: 999px;
    padding: 0.2rem 0.7rem; margin-bottom: 0.6rem;
}

/* --- 13. FAQ: branco uniforme, cor só no item ABERTO (realce funcional) ------
   Neutraliza os accents permanentes alternados. */
.accordion-item.accent-amber,
.accordion-item.accent-purple,
.accordion-item.accent-cyan,
.accordion-item.accent-green { background: var(--nb-bg-alt) !important; }
/* accent-neutral: header creme ao abrir (p/ accordions Tier-2 do dashboard) */
.accordion-item.accent-neutral .accordion-button:not(.collapsed) {
    background: var(--nb-bg-grid) !important; border-bottom: var(--nb-bw) solid var(--nb-ink) !important;
}

/* --- 14. DASHBOARD: stat hero (saldo dominante) + stat mini (secundários) ----- */
.nb-stat--hero .nb-stat__value { font-size: clamp(2.6rem, 6vw, 3.4rem); }
.nb-stat--hero .nb-stat__cta {
    margin-top: 0.35rem; align-self: flex-start; font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--nb-ink); border-bottom: 2px solid var(--nb-ink); text-decoration: none;
    transition: transform 0.1s ease;
}
.nb-stat--hero .nb-stat__cta:hover { transform: translateX(2px); }
.nb-stat--mini { background: var(--nb-bg-alt); box-shadow: var(--nb-shadow-sm); padding: 0.85rem 1rem; }
.nb-stat--mini .nb-stat__value { font-size: 1.6rem; color: var(--nb-muted); }
.nb-stat--mini .nb-stat__label i {
    background: var(--nb-blue); border: 1.5px solid var(--nb-ink); border-radius: 4px; padding: 1px 3px; font-size: 0.62rem;
}
.nb-stat--mini.nb-stat--mini-green .nb-stat__label i { background: var(--nb-green); }

/* --- 15. DASHBOARD: tier-2 recuado, divisor de zona, header-label encolhido --- */
.nb-acc--quiet .accordion-item { box-shadow: var(--nb-shadow-sm); }
.nb-acc--quiet .accordion-button { font-size: 0.82rem; letter-spacing: 0.3px; }
.nb-acc--quiet .accordion-button.collapsed { background: var(--nb-bg-grid) !important; }
.nb-card--quiet { box-shadow: var(--nb-shadow-sm) !important; }
.nb-card--quiet > .card-header { background: var(--nb-bg-grid) !important; }
.nb-section-divider { display: flex; align-items: center; gap: 0.8rem; margin: var(--nb-space-block) 0 1.2rem; }
.nb-section-divider::after { content: ""; flex: 1; height: 3px; background: var(--nb-ink); }
.card-header--label { font-size: 0.78rem !important; padding: 0.5rem 1rem !important; letter-spacing: 0.5px; }

/* --- 16. QUICK-LINK em foco (MCP) + contraste do subtexto -------------------- */
.nb-quick-link span { opacity: 1; color: var(--nb-muted); }   /* corrige opacity:0.7 (l.1437) */
.nb-quick-link--focus { background: var(--nb-purple); box-shadow: var(--nb-shadow); }
.nb-quick-link--focus:hover { box-shadow: var(--nb-shadow-lg); }
.nb-quick-link__badge {
    align-self: flex-start; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; background: var(--nb-ink); color: var(--nb-primary-claro);
    border-radius: 3px; padding: 1px 6px; margin-bottom: 0.2rem;
}

/* --- 17. HISTÓRICO: reflow empilhado em mobile (requer data-label em cada <td>) */
@media (max-width: 767px) {
    .nb-table-reflow thead { display: none; }
    .nb-table-reflow tr { display: block; border: var(--nb-bw) solid var(--nb-ink); border-radius: var(--nb-radius); margin-bottom: 0.6rem; padding: 0.4rem 0.6rem; background: var(--nb-bg-alt); }
    .nb-table-reflow td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: none !important; padding: 0.25rem 0 !important; text-align: right; }
    .nb-table-reflow td::before { content: attr(data-label); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; font-size: 0.66rem; color: var(--nb-muted); letter-spacing: 0.5px; }
}

/* --- 18. DOCS: âncoras sob a sub-nav sticky (navbar 72 + subnav ~58 + folga) -- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#mcp, #api, #cli, #tribunais, #mni { scroll-margin-top: 140px; }

/* --- 19. DOCS: mapa de 4 produtos no hero (acento de cor só no topo) --------- */
.product-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-top: 1.5rem; }
.product-map-card {
    display: block; background: var(--nb-bg-alt); border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius); box-shadow: var(--nb-shadow-sm); padding: 0.95rem 1rem;
    color: var(--nb-ink); text-decoration: none; transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.product-map-card:hover { transform: translate(-2px, -2px); box-shadow: var(--nb-shadow); color: var(--nb-ink); }
.product-map-card .pm-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 0.25rem; }
.product-map-card .pm-meta { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4; color: var(--nb-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.product-map-card--mcp    { border-top: 6px solid var(--nb-purple); }
.product-map-card--rest   { border-top: 6px solid var(--nb-green); }
.product-map-card--source { border-top: 6px solid var(--nb-primary); }
.product-map-card--cli    { border-top: 6px solid var(--nb-muted); }
@media (max-width: 767.98px) { .product-map { grid-template-columns: 1fr 1fr; } }

/* --- 20. DOCS: chips de tribunais colapsados + destaque TJCE ----------------- */
.tribunal-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tribunal-chips .nb-tag { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.3rem 0.7rem; background: var(--nb-bg-grid); border: 2px solid var(--nb-ink); border-radius: 999px; color: var(--nb-ink); }
.tribunal-highlight { background: var(--nb-green); border: var(--nb-bw) solid var(--nb-ink); border-radius: var(--nb-radius); box-shadow: var(--nb-shadow-sm); padding: 1rem 1.2rem; margin-bottom: 1.25rem; font-weight: 600; }

/* --- 21. DOCS: subcabeçalho de grupo dentro da tabela de tools MCP ----------- */
.api-docs-table .tool-group-row td {
    background: var(--nb-bg-grid); font-family: var(--font-mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--nb-muted);
    border-top: var(--nb-bw) solid var(--nb-ink);
}

/* --- 22. DOCS: dica de scroll horizontal em tabelas no mobile ---------------- */
.table-responsive { position: relative; }
@media (max-width: 575.98px) {
    .table-responsive::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to left, rgba(10,10,10,0.12), transparent); }
}

/* --- 23. BLOCO TERMINAL DE 2 COMPRAS (docs + reusável na landing se quiser) -- */
.docs-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; }
.docs-cta-card { border: var(--nb-bw) solid var(--nb-ink); border-radius: var(--nb-radius); box-shadow: var(--nb-shadow); padding: 1.5rem; }
.docs-cta-card--hosted { background: var(--nb-green); }
.docs-cta-card--source { background: var(--nb-primary); color: var(--nb-primary-texto); }
.docs-cta-card h3 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 0.5rem; }
@media (max-width: 767.98px) { .docs-cta-grid { grid-template-columns: 1fr; } }

/* --- 24. ALVO DE TOQUE mínimo no mobile (WCAG 2.5.5) ------------------------- */
@media (max-width: 575px) {
    .accordion-button { min-height: 48px; }
    .pricing-card--source .source-buy { border-left: none; padding-left: 0; }
}

/* ============================================================================
   POLISH PÓS-GATE (refino-final)
   ============================================================================ */
/* manifesto: eyebrow em linha própria acima do .section-title (que é inline-block) */
.nb-section--left .nb-eyebrow { display: flex; width: max-content; max-width: 100%; }
/* histórico Tier-2: cabeçalho da tabela recua junto com o card quiet (não puxa o olho) */
.nb-card--quiet .nb-table-reflow thead th { background: var(--nb-bg-grid) !important; }


/* ============================================================================
   FIX: card de código-fonte (Bloco B) — padding interno + botão sem estourar
   ============================================================================ */
.pricing-card--source { padding: 1.6rem 1.75rem; }
.pricing-card--source .source-info h4 { margin-bottom: 0.5rem; }
.pricing-card--source .pricing-price { margin: 0 0 0.75rem; }
.pricing-card--source .btn { white-space: normal; }
@media (min-width: 768px) {
    /* coluna de compra centralizada, sem encostar na borda */
    .pricing-card--source .source-buy { padding-left: 1.75rem; }
}
@media (max-width: 767.98px) {
    .pricing-card--source { padding: 1.25rem; }
}


/* ============================================================================
   LANDING — LIMPEZA E STATUS DE BETA
   A página passou a ter um produto dominante (o servidor MCP) e periféricos
   deliberadamente mais leves. Os estilos abaixo sustentam essa hierarquia.
   ============================================================================ */

/* Âncoras da landing não podem parar embaixo do navbar sticky */
#ferramentas, #projeto, #pricing, #faq { scroll-margin-top: 100px; }

/* A marca estourava 375px e criava scroll horizontal na página inteira */
@media (max-width: 420px) {
    .navbar-docsmart .navbar-brand { font-size: 1.2rem; }
    .navbar-docsmart .brand-subtitle { font-size: 0.55rem; letter-spacing: 1px; }
}

/* --- Tarja de status: a natureza do projeto antes de qualquer promessa ------ */
.beta-strip {
    background: var(--nb-primary);
    border-bottom: var(--nb-bw) solid var(--nb-ink);
    padding: 0.55rem 1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--nb-primary-texto);
}
.beta-strip__tag {
    display: inline-block;
    background: var(--nb-ink);
    color: var(--nb-primary-claro);
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
}
.beta-strip a { text-decoration-color: var(--nb-ink); }

/* Segunda linha do hero: o diferencial (tempo real via MNI), um degrau abaixo
   do lead e acima do disclaimer — mono para soar como afirmação técnica. */
.hero-claim {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--nb-ink);
    max-width: 560px;
    margin: 0 auto 1.75rem;
    padding: 0.55rem 0.9rem;
    background: var(--nb-bg-alt);
    border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
}

/* --- O produto em uso: o pedido em português e o que o servidor faz ---------
   Cada item é uma fala; a resposta vem em mono, um degrau abaixo, para o olho
   ler primeiro o que se pede e só depois como é atendido. */
.ask-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.ask-list li {
    background: var(--nb-bg-alt);
    border: 2px solid var(--nb-ink);
    border-radius: var(--nb-radius);
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.6rem;
}
.ask-list li:last-child { margin-bottom: 0; }
.ask-q {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.3rem;
}
.ask-a {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--nb-muted);
    margin: 0;
    padding-left: 1.1rem;
    position: relative;
}
.ask-a::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--nb-ink);
    font-weight: 700;
}

/* ============================================================================
   DASHBOARD — LIMPEZA
   Um card de estado (o uso vira rodapé dele), links de docs em linha e
   observações como lista curta em vez de parágrafos densos.
   ============================================================================ */

/* Uso agregado: dado de apoio dentro do card de assinatura, não um card à parte */
.nb-stat__meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--nb-ink);
    opacity: 0.75;
    margin: 0.6rem 0 0;
    padding-top: 0.55rem;
    border-top: 2px solid rgba(10, 10, 10, 0.18);
}


/* --- Contato: dois canais lado a lado, em mono, dentro de callout ----------- */
.contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
}

/* --- Ferramentas periféricas: rodapé da seção, nunca um card ---------------- */
.lab-also {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--nb-muted);
}
.lab-also::before,
.lab-also::after { content: ""; flex: 1; height: 2px; background: var(--nb-ink); opacity: 0.2; }
.lab-also__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--nb-muted);
    margin: 0;
}
.lab-also__items strong { color: var(--nb-ink); }
.lab-also__items a { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; }

/* --- Faixa da skill: tracejada porque é complemento opcional do MCP --------- */
.skill-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: var(--nb-bg-grid);
    border: 2px dashed var(--nb-ink);
    border-radius: var(--nb-radius);
    padding: 0.95rem 1.15rem;
    margin-top: 1.75rem;
}
.skill-strip__text { max-width: 52ch; }
.skill-strip h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}
.skill-strip p { font-size: 0.85rem; line-height: 1.5; color: var(--nb-muted); margin: 0; }
.skill-strip__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 575px) {
    .skill-strip__actions .btn { flex: 1 1 auto; }
}

/* --- Preço como rateio: o número não é a promessa, a lista de custos é ------ */
.cost-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--nb-muted);
}
.cost-breakdown li { display: flex; gap: 0.5rem; }
.cost-breakdown li::before { content: "·"; font-weight: 700; color: var(--nb-ink); }


/* ==========================================================================
   MEUS PROMPTS (/prompts)

   A página é o caminho SEM JavaScript para o CRUD completo — o que a paleta
   do "/" no chat faz por cima da conversa, aqui se faz com formulários e
   espaço para escrever. Por isso ela usa os campos globais (input/textarea de
   custom.css) sem nenhuma briga de especificidade: aqui o `!important` da
   folha global é exatamente o que se quer.
   ========================================================================== */

.prompt-form {
    padding: 0.9rem 1rem;
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
}
.prompt-form .form-label,
.prompt-item .form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-muted);
    margin-bottom: 0.2rem;
}
/* A regra global de input/textarea (NB CORE: FORMS) não define largura, então o
   campo ficaria no tamanho default do navegador — ~20 caracteres — dentro de um
   card de 800px. Num formulário cujo conteúdo é um parágrafo, isso é o bastante
   para a pessoa não ver o que escreveu. */
.prompt-form input[type="text"],
.prompt-form textarea,
.prompt-item input[type="text"],
.prompt-item textarea {
    width: 100%;
    display: block;
}
.prompt-form textarea,
.prompt-item textarea { resize: vertical; min-height: 6rem; }

.prompt-lista { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.prompt-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4rem 0.75rem;
    position: relative;
    overflow: hidden;
    padding: 0.7rem 0.85rem 0.7rem 1.15rem;
    background: var(--nb-bg-alt);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
}
/* Mesmo trilho da lista de minutas: dá âncora visual à linha e distingue de
   relance o que veio de fábrica do que a pessoa escreveu. */
.prompt-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.55rem;
    background: var(--nb-primary);
    border-right: 2px solid var(--nb-ink);
}
.prompt-item.is-editando { display: block; }
.prompt-item.is-editando::before { background: var(--nb-blue); }

.prompt-item__texto { flex: 1 1 20rem; min-width: 0; }
.prompt-item__titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--nb-ink);
    overflow-wrap: anywhere;
}
/* O corpo aparece INTEIRO, com as quebras que a pessoa escreveu: numa página
   cujo trabalho é conferir o texto, cortar em duas linhas obrigaria a abrir
   cada item para ver o que ele diz. */
.prompt-item__corpo {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--nb-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.prompt-item__meta {
    margin: 0.3rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.71rem;
    color: var(--nb-muted);
}
.prompt-item__acoes { display: flex; gap: 0.3rem; margin-left: auto; }
.prompt-item__acoes form { margin: 0; }

.prompt-selo {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nb-ink);
    background: var(--nb-bg-grid);
    border: 1.5px solid var(--nb-ink);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
}

/* Confirmação no próprio botão (static/js/minuta-lista.js). Sem JS o clique
   apaga direto — degradação para o comportamento anterior, não para nada. */
.prompt-item__acoes .btn.is-confirmando {
    background: var(--nb-red);
    color: var(--nb-ink);
    width: auto;
    padding-inline: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 560px) {
    .prompt-item__acoes { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   ADMIN — o bloco saiu daqui em 04/09/2026

   Eram ~200 linhas: funil, fichas de filtro, paginação, o menu `⋯` por linha e
   a tabela com `overflow` desligado para o menu não ser cortado. Todas
   ficaram órfãs quando o painel entrou no design system — nenhuma das classes
   `.admin-*` deste bloco aparecia mais em template ou script.

   O comentário que abria o bloco dizia: "o painel fica brutalista (é
   ferramenta de quem opera, não tela de trabalho de quem redige), então nada
   de importar `gabinete.css` aqui — seriam 800 linhas para uma paginação e
   cinco fichas". A conta estava certa e a premissa não: o que se importa não é
   peso de folha, é vocabulário. As "cinco fichas" eram cinco componentes
   inventados só para esta tela — e o gabinete já tinha os cinco.

   O que ficou é `static/css/admin.css`, e ele só desenha o que o gabinete não
   tinha: a tabela em grade, o funil e a ficha lateral. Botão, campo, chip,
   pastilha, tira e seção vêm de `gabinete.css`.

   ⚠️ `.admin-dot` (o ponto vermelho ao lado do nome na navbar) NÃO estava
   neste bloco e continua vivo, lá em cima, junto de `.navbar-conta`.
   ========================================================================== */