/* ══════════════════════════════════════════════════════════════════════════════
   DATTA — M3 overrides para classes LEGADAS
   ══════════════════════════════════════════════════════════════════════════════
   Re-estiliza as classes mais frequentes nas 67 paginas DATTA (.btn, .card,
   .modal, .toast, .tab, .toolbar, .field, .data-table, etc) pra padrao M3
   visual sem precisar refatorar HTML/JSX cada pagina. Linkado pelo DOCUMENTO,
   entre o `colors_and_type.css` e o `theme.css` — a ordem importa (ver abaixo).
   Ate 2026-08-31 vinha por `@import` do `theme.css`; o cabecalho dizia
   "carregado por colors_and_type.css", que nunca foi verdade.

   Inventario das top-classes (por contagem nas style blocks dos HTMLs):
     .btn (52), .toast (48), .btn-primary (32), .btn-secondary (32),
     .empty-state (28), .btn-sm (26), .setting-group (23+16), .spinner (21),
     .field (19), .key-input (17), .tab (17), .toolbar (16), .group-title (16),
     .preview-table (15), .chart-card (15), .toolbar-btn (14), .btn-danger (14),
     .modal (13), .vtab (12), .field-label (12), .field-input (12), .dl-row (12),
     .config-btn (12), .status-badge (11), .pill-green (9), .data-table (10).

   Estrategia: usar !important com moderacao apenas onde a especificidade
   legacy tem alta probabilidade de sobrepor (ex: pages com .btn{...}
   inline). Quando possivel, ganhar via cascata (ordem de import).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   1. BUTTONS — todas viram pill (M3 standard), label-large 14/500
   ════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px;
  border-radius: 9999px;
  border: none;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font: var(--md-type-label-l);
  cursor: pointer;
  transition: background var(--md-motion-duration-short2) var(--md-easing-standard),
              box-shadow var(--md-motion-duration-short2) var(--md-easing-standard);
  text-decoration: none;
}
.btn:hover  { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); }
.btn:active { background: color-mix(in srgb, var(--md-on-secondary-container) 12%, var(--md-secondary-container)); }
.btn:disabled, .btn[disabled] { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* A acao primaria e ACROMATICA de proposito: quase-preto no claro, quase-branco
   no escuro. E papel de COMPONENTE (--action-*), nao papel de cor do sistema —
   --md-primary continua sendo a cor de MARCA (foco, selecao, logo, acento) e
   nunca vira preenchimento de botao. O elemento mais alto de cada tela sendo
   acromatico e o que deixa a cor da marca livre para significar "aqui". */
.btn-primary {
  background: var(--action-primary);
  color: var(--action-on-primary);
}
/* Sobre preenchimento quase-preto, color-mix com o texto (branco) clarearia o
   botao de forma imprevisivel; os tons de hover/active sao definidos como
   token, medidos junto com o repouso. */
.btn-primary:hover  { background: var(--action-primary-hover); box-shadow: var(--md-elev-1); }
.btn-primary:active { background: var(--action-primary-active); }
/* O anel de foco azul some contra o preenchimento escuro: halo de duas camadas,
   a de dentro na cor do fundo da pagina para destacar do proprio botao. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--md-background), 0 0 0 4px var(--action-primary);
}

.btn-secondary {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.btn-secondary:hover  { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }

.btn-danger {
  background: var(--md-error);
  color: var(--md-on-error);
}
.btn-danger:hover  { background: color-mix(in srgb, var(--md-on-error) 8%, var(--md-error)); }

.btn-sm {
  height: 32px; padding: 0 16px;
  font: var(--md-type-label-m);
  border-radius: 9999px;
}

/* btn-text e btn-icon como variantes adicionais (caso paginas usem) */
.btn-text {
  background: transparent; color: var(--md-primary); padding: 0 12px;
}
.btn-text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }

/* btn-ghost: botao de texto / baixa enfase (M3 text button). Usado em ~40
   call-sites (dialogs "Cancelar", acoes secundarias). Antes nao tinha CSS e
   caia no estilo base .btn; agora e um text-button consistente em todo o app. */
.btn-ghost {
  background: transparent; color: var(--md-primary); padding: 0 16px;
}
.btn-ghost:hover  { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }

/* btn-success: acao positiva/confirmatoria (ex.: "Ativar"). Tonal verde,
   so com tokens do tema (sem hex hardcoded). */
.btn-success {
  background: var(--green-soft); color: var(--green);
}
.btn-success:hover { background: color-mix(in srgb, var(--green) 14%, var(--green-soft)); }

/* SPEC-022: layout utilities para agrupar botoes (centralizado para evitar
   re-declaracoes inline em cada pagina). */
.btn-row,
.btn-bar,
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: center;
}
.btn-row.right { justify-content: flex-end; }
.btn-row.center { justify-content: center; }
.btn-row.between { justify-content: space-between; }

/* config-btn / toolbar-btn / hamburger-style action buttons */
.config-btn,
.toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: var(--md-type-label-l);
  cursor: pointer;
  transition: background var(--md-motion-duration-short2) var(--md-easing-standard);
}
.config-btn:hover,
.toolbar-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface)); }

/* ════════════════════════════════════════════════════════════════════════
   2. CARDS — surface tonal, no border, 12px radius (M3 standard)
   ════════════════════════════════════════════════════════════════════════ */
.card,
.dash-card,
.chart-card,
.summary-card,
.dashboard-card,
.feature-card {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-md);
  border: none;
  padding: 16px;
  box-shadow: var(--md-elev-1);
  transition: box-shadow var(--md-motion-duration-short2) var(--md-easing-standard);
}
.card:hover,
.dash-card:hover,
.chart-card:hover,
.feature-card:hover { box-shadow: var(--md-elev-2); }

/* Settings groups — agrupamento visual mas com elevation 0 (no shadow) */
.setting-group {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-md);
  border: none;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: none;
}
.group-title {
  font: var(--md-type-title-m);
  color: var(--md-on-surface);
  margin-bottom: 4px;
}
.group-desc {
  font: var(--md-type-body-m);
  color: var(--md-on-surface-variant);
  margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   3. INPUTS — padrao visual da caixa de pesquisa da plataforma (screens/chat.html
   .chat-input-container): surface clara, borda outline-variant, cantos
   arredondados 12px e foco com anel accent-soft. Toda caixa de texto da
   plataforma segue este padrao (CLAUDE.md §3 — identidade visual unica).
   ════════════════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field-label,
.field > label {
  font: var(--md-type-label-l);
  color: var(--md-on-surface-variant);
}
.field-input,
.key-input,
input[type="text"]:not([class*="md-"]),
input[type="email"]:not([class*="md-"]),
input[type="password"]:not([class*="md-"]),
input[type="number"]:not([class*="md-"]),
input[type="search"]:not([class*="md-"]),
input[type="url"]:not([class*="md-"]),
textarea:not([class*="md-"]),
select:not([class*="md-"]) {
  background: var(--md-surface);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  padding: 10px 16px;
  font: var(--md-type-body-l);
  outline: none;
  transition: border-color var(--md-motion-duration-short2) var(--md-easing-standard),
              box-shadow var(--md-motion-duration-short2) var(--md-easing-standard);
  min-height: 40px;
}
.field-input:focus,
.key-input:focus,
input:not([class*="md-"]):focus,
textarea:not([class*="md-"]):focus,
select:not([class*="md-"]):focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 16%, transparent);
}
.field-input::placeholder,
.key-input::placeholder,
input:not([class*="md-"])::placeholder,
textarea:not([class*="md-"])::placeholder {
  color: var(--md-outline);
}

/* ════════════════════════════════════════════════════════════════════════
   4. MODAL / DIALOG — M3 dialog (28px radius, scrim, elevation L3)
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay,
.dialog-overlay,
.overlay {
  background: color-mix(in srgb, var(--md-scrim) 32%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal,
.modal-content,
.dialog,
.dialog-content {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elev-3);
  border: none;
}
.modal-header,
.dialog-header {
  padding: 24px 24px 16px;
  font: var(--md-type-headline-s);
  color: var(--md-on-surface);
  border-bottom: none;
}
.modal-body,
.dialog-body {
  padding: 0 24px 16px;
  font: var(--md-type-body-l);
  color: var(--md-on-surface-variant);
}
.modal-footer,
.dialog-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: none;
}

/* ════════════════════════════════════════════════════════════════════════
   5. TOAST / SNACKBAR — M3 snackbar (inverse-surface, pill)
   ════════════════════════════════════════════════════════════════════════ */
.toast {
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  border-radius: var(--md-shape-xs);
  padding: 14px 16px;
  font: var(--md-type-body-m);
  box-shadow: var(--md-elev-3);
  min-height: 48px;
  display: flex; align-items: center; gap: 12px;
}
.toast.toast-success,
.toast-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.toast.toast-error,
.toast-error   { background: var(--md-error-container);   color: var(--md-on-error-container); }
.toast.toast-warning,
.toast-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.toast.toast-info,
.toast-info    { background: var(--md-info-container);    color: var(--md-on-info-container); }

/* ════════════════════════════════════════════════════════════════════════
   6. TABS — M3 primary tabs (label-large, underline indicator 3px)
   ════════════════════════════════════════════════════════════════════════ */
.tabs,
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--md-outline-variant); }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: transparent;
  border: none;
  color: var(--md-on-surface-variant);
  font: var(--md-type-label-l);
  cursor: pointer;
  position: relative;
  transition: color var(--md-motion-duration-short2) var(--md-easing-standard),
              background var(--md-motion-duration-short2) var(--md-easing-standard);
}
.tab:hover    { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.tab.active,
.tab[aria-selected="true"] { color: var(--md-primary); }
.tab.active::after,
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--md-primary); border-radius: 3px 3px 0 0;
}

/* Vertical tabs (.vtab) — M3 nav-rail inspired */
.vtab {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 56px;
  background: transparent; border: none;
  color: var(--md-on-surface-variant);
  font: var(--md-type-label-l);
  cursor: pointer;
  border-radius: 0 9999px 9999px 0;
  transition: background var(--md-motion-duration-short2) var(--md-easing-standard);
}
.vtab:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.vtab.active,
.vtab[aria-selected="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   7. TOOLBAR — surface tonal, sem border-radius
   ════════════════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  min-height: 56px;
}

/* ════════════════════════════════════════════════════════════════════════
   8. TABLES — M3 data table (32-36px row, zebra striping via tonal)
   ════════════════════════════════════════════════════════════════════════ */
.data-table,
.preview-table,
table.dl-row,
.dl-table {
  width: 100%;
  background: var(--md-surface);
  border-collapse: collapse;
  font: var(--md-type-body-m);
  color: var(--md-on-surface);
}
.data-table thead,
.preview-table thead,
.dl-table thead {
  background: var(--md-surface-container);
  position: sticky; top: 0; z-index: 1;
}
.data-table th,
.preview-table th,
.dl-table th {
  text-align: left;
  padding: 12px 16px;
  font: var(--md-type-label-l);
  color: var(--md-on-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}
.data-table td,
.preview-table td,
.dl-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.data-table tbody tr:nth-child(even),
.preview-table tbody tr:nth-child(even),
.dl-table tbody tr:nth-child(even) {
  background: var(--md-surface-container-low);
}
.data-table tbody tr:hover,
.preview-table tbody tr:hover,
.dl-table tbody tr:hover {
  background: color-mix(in srgb, var(--md-on-surface) 4%, var(--md-surface));
}

/* ════════════════════════════════════════════════════════════════════════
   9. STATUS BADGES / CHIPS / PILLS — M3 assist chip (32px, label-l)
   ════════════════════════════════════════════════════════════════════════ */
.status-badge,
.badge,
.chip:not(.chip-status):not(.dl-chip),
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px;
  padding: 0 12px;
  border-radius: 9999px;
  font: var(--md-type-label-m);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border: none;
  white-space: nowrap;
}
.pill-green, .badge-green, .badge.success, .status-badge.success {
  background: var(--md-success-container); color: var(--md-on-success-container);
}
.pill-red, .badge-red, .badge.error, .status-badge.error {
  background: var(--md-error-container); color: var(--md-on-error-container);
}
.pill-amber, .badge-amber, .badge.warning, .status-badge.warning {
  background: var(--md-warning-container); color: var(--md-on-warning-container);
}
.pill-blue, .badge-blue, .badge-accent, .status-badge.info {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}

/* ════════════════════════════════════════════════════════════════════════
   10. EMPTY STATE — centered, large icon, headline-s + body-l
   ════════════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--md-on-surface-variant);
  gap: 12px;
}
.empty-state .icon,
.empty-state svg {
  width: 64px; height: 64px;
  opacity: .4;
  color: var(--md-on-surface-variant);
}
.empty-state h2,
.empty-state h3,
.empty-state .empty-title {
  font: var(--md-type-headline-s);
  color: var(--md-on-surface);
  margin: 8px 0 4px;
}
.empty-state p,
.empty-state .empty-msg {
  font: var(--md-type-body-l);
  color: var(--md-on-surface-variant);
  max-width: 480px;
}

/* ════════════════════════════════════════════════════════════════════════
   11. SPINNER — circular loader em --md-primary
   ════════════════════════════════════════════════════════════════════════ */
.spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--md-outline-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  display: inline-block;
  animation: spin 1s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   12. TYPOGRAPHY UPGRADE — h1-h6 ganham scale M3 quando nao tem classe
   ════════════════════════════════════════════════════════════════════════ */
h1:not([class]) { font: var(--md-type-headline-l); color: var(--md-on-surface); margin: 0 0 16px; }
h2:not([class]) { font: var(--md-type-headline-m); color: var(--md-on-surface); margin: 0 0 12px; }
h3:not([class]) { font: var(--md-type-headline-s); color: var(--md-on-surface); margin: 0 0 8px; }
h4:not([class]) { font: var(--md-type-title-l);    color: var(--md-on-surface); margin: 0 0 8px; }
h5:not([class]) { font: var(--md-type-title-m);    color: var(--md-on-surface); margin: 0 0 8px; }
h6:not([class]) { font: var(--md-type-title-s);    color: var(--md-on-surface); margin: 0 0 8px; }

/* ════════════════════════════════════════════════════════════════════════
   13. LINKS — M3 primary color, underline on hover
   ════════════════════════════════════════════════════════════════════════ */
a:not([class]) { color: var(--md-primary); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════════════════════
   13b. CONTROLES — herdar a familia tipografica
   ════════════════════════════════════════════════════════════════════════
   O navegador NAO herda `font-family` em button/input/select/textarea: sem
   regra explicita eles caem na fonte padrao do UA (Arial 13,3px no Chrome).
   Cada componente daqui ja define a sua (.btn, .field-input, .ws-card), mas
   controle SEM classe propria ficava de fora — e o efeito e mudo, porque a
   maioria e icon-button e nao mostra texto errado.

   Medido em 2026-08-19: 7 dos 23 controles do Chat renderizavam em Arial,
   inclusive o botao "Entrar", que TEM texto visivel; a Configuracao Geral
   tinha 6 de 15.

   So a FAMILIA. Tamanho e peso continuam por componente — herda-los junto
   atropelaria o que ja esta desenhado (um `.btn-sm` de 12px viraria 14px). */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   14. SCROLLBAR — uniformizar M3 (todas as paginas)
   ════════════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline-variant) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--md-outline); background-clip: content-box; border: 2px solid transparent; }

/* ════════════════════════════════════════════════════════════════════════
   15. CHECKBOX / RADIO — M3 selection look
   ════════════════════════════════════════════════════════════════════════ */
/* `flex-shrink: 0` NAO e enfeite: sem ele o controle vira OVAL, e so em algumas
   telas. Dentro do padrao `<label style="display:flex">` + texto ao lado (o
   arranjo de toda opcao com descricao), o input e um flex item de base 18px
   cujo irmao <span> tem max-content enorme quando a descricao e longa — a linha
   estoura, o shrink distribui, e o input cai para a largura INTRINSECA de 13px
   enquanto a altura fica nos 18px que esta regra fixa. Medido na triagem em
   lote: 13x18 nas duas opcoes de texto longo, 18x18 na de texto curto, no mesmo
   grupo de radio. Nada acusa — a regra parece aplicada, e a deformacao depende
   do comprimento do texto vizinho, entao aparece e some conforme alguem edita
   copy. 40 controles em 16 telas usam esse arranjo. */
input[type="checkbox"]:not([class*="md-"]),
input[type="radio"]:not([class*="md-"]) {
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: var(--md-primary);
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   16. CODE / PRE / KBD — Roboto Mono em surface tonal
   ════════════════════════════════════════════════════════════════════════ */
code, kbd, samp {
  font-family: var(--md-font-mono);
  font-size: 13px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 2px 6px;
  border-radius: var(--md-shape-xs);
}
pre {
  font-family: var(--md-font-mono);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 16px;
  border-radius: var(--md-shape-md);
  overflow-x: auto;
}
pre > code { background: none; padding: 0; }

/* ════════════════════════════════════════════════════════════════════════
   17. PALETA CATEGORICA E AURORA — SPEC-157
   Componentes NOVOS que tornam os tokens --cat-* utilizaveis. Prefixo `cat-`
   de proposito: `.tag` ja e definido inline por 6 paginas e `.legend` por 1,
   e como o <style> da pagina vem DEPOIS do theme.css, uma classe global com
   esses nomes perderia justamente onde ja ha estilo — pior que nao existir,
   porque aplicaria pela metade. As telas do redesign (PR 3+) trazem o `.tag`
   base no proprio fragmento, escopado por prefixo de tela.

   REGRA: cor categorica NUNCA carrega significado. Escolha o matiz pela
   POSICAO na lista, nunca porque "combina". Status e exclusividade de
   --green/--amber/--red (ver .badge-* na secao 9).
   ════════════════════════════════════════════════════════════════════════ */
.cat-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  font: var(--md-type-label-m);
  white-space: nowrap;
}
.cat-tag-peach    { background: var(--cat-peach-fill);    color: var(--cat-peach-ink); }
.cat-tag-pink     { background: var(--cat-pink-fill);     color: var(--cat-pink-ink); }
.cat-tag-lavender { background: var(--cat-lavender-fill); color: var(--cat-lavender-ink); }
.cat-tag-sky      { background: var(--cat-sky-fill);      color: var(--cat-sky-ink); }
.cat-tag-mint     { background: var(--cat-mint-fill);     color: var(--cat-mint-ink); }
.cat-tag-yellow   { background: var(--cat-yellow-fill);   color: var(--cat-yellow-ink); }
.cat-tag-teal     { background: var(--cat-teal-fill);     color: var(--cat-teal-ink); }
.cat-tag-coral    { background: var(--cat-coral-fill);    color: var(--cat-coral-ink); }

/* Ponto de legenda usa o matiz PURO — o -fill e claro demais para uma area
   de 10px se ler contra a superficie. */
.cat-dot {
  width: 10px; height: 10px; border-radius: var(--md-shape-full);
  display: inline-block; flex-shrink: 0;
}
.cat-dot-peach    { background: var(--cat-peach); }
.cat-dot-pink     { background: var(--cat-pink); }
.cat-dot-lavender { background: var(--cat-lavender); }
.cat-dot-sky      { background: var(--cat-sky); }
.cat-dot-mint     { background: var(--cat-mint); }
.cat-dot-yellow   { background: var(--cat-yellow); }
.cat-dot-teal     { background: var(--cat-teal); }
.cat-dot-coral    { background: var(--cat-coral); }

/* .aurora — o unico elemento decorativo do sistema. UM por tela, atras de um
   hero / empty state grande / card de abertura, e sempre atras de um BLOCO:
   o blur de 48px pressupoe um campo de ~600px, e espalhar a mesma cor por
   area muito maior que a pintada dilui o pigmento ate sumir. Nunca animar.
   aria-hidden obrigatorio — e decoracao, nao conteudo. */
.aurora {
  position: absolute; inset: -8% -12%;
  filter: blur(var(--glow-blur));
  opacity: var(--glow-opacity);
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 46% at 22% 30%, var(--cat-lavender) 0%, transparent 70%),
    radial-gradient(34% 42% at 76% 26%, var(--cat-mint)     0%, transparent 70%),
    radial-gradient(36% 44% at 66% 74%, var(--cat-pink)     0%, transparent 70%),
    radial-gradient(30% 38% at 28% 78%, var(--cat-peach)    0%, transparent 70%);
}
.aurora-soft { opacity: calc(var(--glow-opacity) / 2); position: fixed; inset: 0; }