*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    [hidden] { display: none !important; }

    /* ══ Tokens ═══════════════════════════════════════════════════════════
       Toda cor e todo tamanho de fonte do app saem daqui — nada de hex solto
       no resto do arquivo nem no JS. Duas regras valem pra tela inteira:

       COR TEM SIGNIFICADO FIXO
       - roxo de marca (--accent) = interação: botão principal, item
         selecionado, filtro ativo, foco, link. Nunca status.
       - cada status tem a própria cor, forte o bastante pra ler de relance:
           verde   = concluído (OK, aprovado)
           âmbar   = pendente — falta alguém agir
           vermelho= revisão / erro — voltou com problema
           azul    = em processo — andando, sem ação sua
           violeta = análise do cliente — na mão de outro
         Só o "não se aplica" (N.A.) é cinza. A regra antiga (estado normal
         em cinza) deixou o sistema apagado e escondia o pendente.
       - cada cor tem 3 tons: texto (legível sobre o fundo suave), fundo
         suave (pill, ícone) e preenchimento (barra, bolinha).

       UMA ESCALA DE TEXTO
       - 12 / 13 / 14 / 16 / 20 / 28px, nada abaixo de 12.
       - Números na própria Instrument Sans, com algarismos tabulares (ver
         body); mono só no CNPJ (e nos exemplos de código dos cadastros).
       - Caixa alta só no cabeçalho de tabela: os nomes das empresas já vêm
         em caixa alta do Linkana, e o resto da interface contrasta com eles. */
    :root {
      --ease: cubic-bezier(.2, .8, .2, 1);   /* curva única do movimento: entra rápido, assenta devagar */
      --bg:            #eff0fa;   /* fundo com um toque de marca, não cinza puro */
      --surface:       #ffffff;
      --surface-2:     #f5f5fd;   /* hover, cabeçalho de tabela */
      --surface-3:     #eceef8;   /* trilho de barra, pill neutra, quadro de ícone */
      --border:        #e1e3f0;
      --border-strong: #c5cae4;
      --text:          #171a2b;   /* contraste 17:1 no branco */
      --text-dim:      #4b5169;   /* 7.8:1 */
      --text-mut:      #676d8c;   /* 5:1 — o mínimo pra texto pequeno é 4.5 */

      --accent:        #5544c4;
      --accent-strong: #4232a3;   /* hover do botão principal, item ativo do menu */
      --accent-soft:   #efedfa;
      --accent-border: #cdc6f2;

      /* status: texto · fundo suave · preenchimento (barra, bolinha).
         Contraste conferido: texto sobre fundo suave >= 5.4:1; preenchimento
         sobre branco >= 3.4:1. `-soft` é o fundo pra áreas grandes (banner),
         mais leve que o da pill. */
      --ok:     #0f6b41;  --ok-bg:     #d5f0e2;  --ok-fill:     #1f9d63;  --ok-soft:     #ebf8f1;
      --warn:   #8a4b00;  --warn-bg:   #ffe6b3;  --warn-fill:   #cc7400;  --warn-soft:   #fff5d9;
      --danger: #a31d15;  --danger-bg: #ffd9d4;  --danger-fill: #dc3a30;  --danger-soft: #fff0ee;
      --info:   #1a4fb5;  --info-bg:   #dbe8ff;  --info-fill:   #2f6fe0;  --info-soft:   #eef4ff;
      --violet: #6432b8;  --violet-bg: #eadffd;  --violet-fill: #8b4fe0;  --violet-soft: #f6f1ff;
      --data:   #737a9b;  /* N.A. e o que não tem status */

      /* menu lateral e superfícies escuras (tooltip, toast) */
      --ink:        #1e1936;
      --ink-2:      #282245;
      --ink-line:   #332c54;
      --ink-fg:     #a3a9c8;
      --ink-fg-2:   #8087ad;
      --ink-fg-hi:  #f3f4fa;
      --ink-ok:     #5fd39a;
      --ink-warn:   #fbbf24;
      --ink-danger: #f87171;
      --ink-info:   #7aa8ff;
      --ink-icon:   #b4aaf8;   /* ícone do menu, com o toque de marca */

      --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --fs-xs:  12px;   /* rótulos, metadados, pills, cabeçalho de tabela */
      --fs-sm:  13px;   /* tabelas, listas, botões */
      --fs-md:  14px;   /* texto base, título de card */
      --fs-lg:  16px;   /* título da ficha e de modal */
      --fs-xl:  20px;   /* título da página, números da ficha */
      --fs-2xl: 28px;   /* números dos cartões do Resumo */

      --radius: 12px;
      --shadow: 0 1px 2px rgba(23,26,43,.04);
      --nav-w:  250px;
      --head-h: 60px;
    }

    html, body { height: 100%; }
    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      font-size: var(--fs-md);
      line-height: 1.45;
      font-variant-numeric: tabular-nums;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
    a { color: var(--accent); text-decoration: none; }
    button { font-family: inherit; }

    /* Ícones (Phosphor, ver icones.js): 1em por padrão; cada componente
       ajusta o tamanho no próprio seletor (.nav-item svg, .btn svg…). */
    .icone { width: 1em; height: 1em; flex-shrink: 0; }
    /* Marcador <i data-icone> antes de virar <svg> — reserva o espaço pra
       nada pular quando o ícone entra. */
    i[data-icone] { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; }