/* Shared visual contract for every holder-facing page. Keep page-specific
   layouts in their own styles, but use the same canvas, type scale, controls,
   borders, and spacing everywhere. */
:root {
  --site-bg: #090b0c;
  --site-panel: #131719;
  --site-panel-2: #0e1112;
  --site-line: #2b3336;
  --site-text: #f0f3f1;
  --site-muted: #8f999c;
  --site-green: #8ebc9a;
  --site-gold: #dfc878;
  --site-radius: 8px;
  --site-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { background: var(--site-bg); }
body {
  min-width: 320px;
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-mono);
  font-weight: 700;
}

main {
  width: min(1620px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 10px 0 28px;
}

.site-nav {
  width: 100%;
  min-height: 58px;
  padding: 9px 14px;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: color-mix(in srgb, var(--site-panel) 94%, transparent);
  font-family: var(--site-mono);
}

.site-nav__brand,
.site-nav__link,
.site-nav__button {
  font-family: var(--site-mono);
}

.site-nav__brand { font-size: 13px; }
.site-nav__link {
  min-height: 36px;
  border-radius: var(--site-radius);
  font-size: 11px;
}
.site-nav__button {
  min-height: 34px;
  border-radius: var(--site-radius);
  font-size: 10px;
}

button, select, input, textarea { font-family: inherit; }
button, select {
  min-height: 36px;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-panel-2);
  color: var(--site-text);
  font-size: 11px;
}
button { padding: 0 12px; }
button:hover:not(:disabled), select:focus-visible, input:focus-visible, textarea:focus-visible {
  border-color: var(--site-green);
  outline: none;
}

.reveal-head, .page-head {
  margin: 16px 0 14px;
}
.reveal-head h1, .page-head h1 {
  color: var(--site-text);
  letter-spacing: -.02em;
}
.reveal-head p, .page-head p { color: var(--site-muted); line-height: 1.45; }
.panel, .card, article {
  border-radius: var(--site-radius);
}

@media (max-width: 720px) {
  main { width: min(100% - 20px, 640px); padding-bottom: 104px; }
  .reveal-head { align-items: start; flex-direction: column; }
  .gas-key { width: 100%; }
}