/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface-alt);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-teal); text-decoration: none; }
a:hover { color: var(--teal-700); text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* Tabular nums for numeric columns */
.num, td.num, .balance, .amount {
  font-variant-numeric: tabular-nums;
}

/* App shell */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}
.topbar .brand {
  font-weight: 700;
  color: var(--brand-teal);
  font-size: var(--fs-sm);
}
.topbar nav {
  display: flex;
  gap: 2px;
  align-items: center;
}
.topbar nav a {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.topbar nav a.active,
.topbar nav a:hover {
  color: var(--ink);
  background: var(--teal-100);
  text-decoration: none;
}
.topbar .user-chip {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar .user-chip .role {
  background: var(--teal-100);
  color: var(--ink);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
}

main {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-4); }
h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
h3 { font-size: var(--fs-md); margin: 0 0 var(--space-2); }

.muted { color: var(--ink-soft); }
.tiny  { font-size: var(--fs-xs); color: var(--ink-soft); }
.neg   { color: var(--negative); }