/* Cola Flask: a casca do molde usa botões; aqui a navegação é <a>.
   Tokens antigos de app.css continuam válidos sobre o vocabulário do molde. */

:root,
[data-theme="light"],
[data-theme="dark"],
[data-theme="system"] {
  --bg: var(--surface-app);
  --surface: var(--surface-raised);
  --ink: var(--text-1);
  --muted: var(--text-2);
  --line: var(--border);
  --brand: var(--color-action-accent);
  --brand-soft: var(--color-action-soft);
  --notice: var(--warning-soft);
  --green: var(--success);
  --amber: var(--warning);
  --purple: #6941c6;
  --gray: var(--text-2);
  --success-bg: var(--success-soft);
  --danger-bg: var(--danger-soft);
}

.cards > .card + .card { margin-top: 0; }

.profile-meta {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised);
}
.profile-meta dt { color: var(--text-2); font-size: 13px; font-weight: 700; }
.profile-meta dd { margin: 2px 0 0; }

.prefs-grid { display: grid; gap: 18px; max-width: 420px; }
.prefs-grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }

a.nav-item,
a.mod-item,
a.brand-home {
  color: inherit;
  text-decoration: none;
}
a.nav-item:hover,
a.mod-item:hover,
a.brand-home:hover {
  text-decoration: none;
}

#form-sair { display: none; }

.btn-microsoft { gap: var(--sp-3); }
.btn-microsoft svg { width: 21px; height: 21px; flex: 0 0 21px; }