/* Tokens transcribed from naytive-brandkit.vercel.app — keep in sync with the brand kit. */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --c-white: #ffffff;
  --c-surface-1: #f9fafb;
  --c-surface-2: #f3f4f6;
  --c-border: #e5e7eb;
  --c-border-strong: #d1d5db;

  --c-ink: #111827;
  --c-body: #1f2937;
  --c-label: #4b5563;
  --c-muted: #6b7280;
  --c-faint: #9ca3af;

  --c-blue: #2b7fff;
  --c-blue-hover: #1e63d6;
  --c-blue-tint: #eaf2ff;

  --r-pill: 100px;
  --r-card: 18px;
  --r-card-sm: 14px;

  --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -8px rgba(17, 24, 39, 0.08);
  --shadow-lift: 0 4px 10px rgba(17, 24, 39, 0.06), 0 24px 48px -16px rgba(17, 24, 39, 0.16);

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --page-max: 1180px;
  --page-pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--c-ink); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
a { color: var(--c-blue); }

.wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-pad); }

/* ── nav ── */
.nav { border-bottom: 1px solid var(--c-border); background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--c-ink); text-decoration: none; }
.nav-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--c-blue); display: grid; place-items: center; color: #fff; font-weight: 500; font-size: 15px; }
.nav-env { font-family: var(--font-mono); font-size: 12px; color: var(--c-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 5px 10px; border-radius: var(--r-pill); }

/* ── layout ── */
main { padding-block: 40px 96px; }
.grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-soft); margin-bottom: 24px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card h2 { font-size: 16px; }
.card-sub { font-size: 13px; color: var(--c-muted); margin: 4px 0 0; line-height: 1.5; }

/* ── balance ── */
.balance { background: var(--c-surface-1); }
.balance-label { font-size: 13px; color: var(--c-muted); }
.balance-amount { font-family: var(--font-mono); font-size: 44px; font-weight: 500; color: var(--c-ink); letter-spacing: -0.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.balance-meta { display: flex; gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.balance-meta div { font-size: 13px; color: var(--c-muted); }
.balance-meta strong { display: block; font-family: var(--font-mono); font-weight: 500; color: var(--c-body); font-size: 15px; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ── forms ── */
label { display: block; font-size: 13px; color: var(--c-label); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--c-ink);
  padding: 10px 12px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-white);
  transition: border-color 0.15s var(--ease-out-quart), box-shadow 0.15s var(--ease-out-quart);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-tint); }
input::placeholder { color: var(--c-faint); }
.field { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── buttons ── */
button { font: inherit; font-size: 14px; cursor: pointer; border-radius: var(--r-pill); border: 1px solid transparent; padding: 10px 20px; transition: background 0.15s var(--ease-out-quart), transform 0.1s var(--ease-out-quart); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--c-blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--c-blue-hover); }
.btn-ghost { background: var(--c-white); color: var(--c-body); border-color: var(--c-border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--c-surface-2); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── tabs ── */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: var(--r-pill); margin-bottom: 20px; }
.tab { border: none; background: transparent; color: var(--c-muted); padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; }
.tab[aria-selected='true'] { background: var(--c-white); color: var(--c-ink); box-shadow: var(--shadow-soft); }

/* ── quote ── */
.quote { background: var(--c-blue-tint); border: 1px solid #d3e4ff; border-radius: var(--r-card-sm); padding: 16px; margin: 16px 0; }
.quote-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; color: var(--c-label); }
.quote-row span:last-child { font-family: var(--font-mono); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.quote-row.total { border-top: 1px solid #cfe0fb; margin-top: 6px; padding-top: 10px; font-weight: 500; }

/* ── activity ── */
.entry { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.entry:last-child { border-bottom: none; }
.entry-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--c-surface-2); display: grid; place-items: center; font-size: 14px; color: var(--c-muted); flex-shrink: 0; }
.entry-body { flex: 1; min-width: 0; }
.entry-title { font-size: 14px; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-meta { font-size: 12px; color: var(--c-faint); font-family: var(--font-mono); margin-top: 2px; }
.entry-amount { font-family: var(--font-mono); font-size: 14px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.entry-amount.credit { color: #067647; }

.pill { display: inline-block; font-size: 11px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }
.pill.completed { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.pill.pending { background: #fffaeb; color: #b54708; border-color: #fedf89; }

/* ── misc ── */
.empty { color: var(--c-faint); font-size: 13px; text-align: center; padding: 32px 0; }
.mono { font-family: var(--font-mono); font-size: 13px; }
.instructions dt { font-size: 12px; color: var(--c-muted); margin-top: 12px; }
.instructions dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--c-ink); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--c-ink); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); font-size: 13px; box-shadow: var(--shadow-lift); transition: transform 0.3s var(--ease-out-quart); z-index: 50; max-width: min(560px, 90vw); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { background: #b42318; }

.devtools { border-style: dashed; background: var(--c-surface-1); box-shadow: none; }
.devtools h2 { color: var(--c-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }