* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* Foco visivel de teclado — piso de qualidade (6.2) */
:focus-visible { outline: 3px solid var(--color-interactive); outline-offset: 2px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand); color: #fff;
}
.topbar nav { display: flex; gap: var(--space-3); align-items: center; }
.topbar .muted { color: rgb(255 255 255 / 75%); }
.brand { font-size: 1.1rem; letter-spacing: 0.02em; }

.container { max-width: 960px; margin: 0 auto; padding: var(--space-4); }

.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.auth-card {
  max-width: 400px; margin: var(--space-5) auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.field input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font: inherit;
}
.field input:focus { border-color: var(--color-interactive); }

.btn {
  display: inline-block; padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius);
  font: inherit; cursor: pointer;
}
.btn-primary { background: var(--color-interactive); color: #fff; }
.btn-primary:hover { background: var(--color-interactive-hover); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 40%); }

.flash { padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); }
.flash-notice { background: #E8F5EC; color: var(--color-ok); border: 1px solid currentcolor; }
.flash-alert { background: #FCEAEA; color: var(--color-danger); border: 1px solid currentcolor; }

/* Tabelas: cabecalho fixo, densidade p/ analista (6.1 h8) */
.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.data-table th { position: sticky; top: 0; background: var(--color-surface); text-align: left; border-bottom: 2px solid var(--color-brand); padding: var(--space-2) var(--space-3); }
.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }

.badge { padding: 2px var(--space-2); border-radius: 999px; font-size: 0.85em; font-weight: 600; }
.badge-ok { background: #E8F5EC; color: var(--color-ok); }
.badge-warn { background: #FDF3E0; color: var(--color-warn); }
.badge-low { background: #FCEAEA; color: var(--color-danger); }