* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
body { min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
::selection { background: var(--accent-soft); }

#app { min-height: 100vh; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }