/* ==========================================================================
   OpenRelay dashboard — design tokens + component styles.

   The same look as the landing page (whose palette lives in landing.css,
   taking only the reset, the shared utilities and the fonts from here), so
   signing up does not land on what looks like another product: white and
   cool greys, near-black ink, the carbon-blue accent, black primary buttons
   and dark code blocks. Two faces: IBM Plex Sans for everything written
   (headings at 500 with tight tracking), IBM Plex Mono for figures and
   anything machine-shaped. The fonts are self-hosted from /fonts (SIL OFL,
   licences alongside), so the dashboard still works offline.

   Light by default, with a full dark palette behind data-theme="dark". The
   viewer's choice comes from the topbar toggle and is persisted; the OS
   preference is deliberately NOT consulted, so a first visit is always light.

   Contrast: every text token clears WCAG AA (4.5:1) on every surface it can
   sit on, in both themes, status colours on their tinted badges included.
   The chart colours are validated categorical trios for their own card
   surface (light, on white: CVD ΔE 11.6; dark, on #17171b: ΔE 9.7; chroma
   floor, lightness band and 3:1 contrast all pass). Dark series 1 is
   deliberately not the accent: the accent is tuned for text contrast and
   sits above the dark lightness band. Status hues are reserved for state and
   are never used as a chart series.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;
  --surface-hover: #f4f4f5;
  --sidebar-bg: #f7f7f8;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;

  /* ink */
  --text: #0a0a0b;
  --text-2: #3f3f46;
  --text-3: #5f5f67;

  /* accent (also chart series 1) */
  --accent: #1d3fd8;
  --accent-hover: #1733b5;
  --accent-dim: #8fa0ea;
  --accent-wash: rgba(29, 63, 216, 0.08);
  --accent-wash-strong: rgba(29, 63, 216, 0.15);

  /* primary buttons are ink, as on the landing page */
  --btn: #0a0a0b;
  --btn-hover: #2b2b30;
  --on-btn: #ffffff;

  /* chart series */
  --series-1: #1d3fd8;
  --series-2: #c2410c;
  --series-3: #08876f;
  --grid: #ececef;

  /* status — reserved, never a series colour */
  --ok: #116230;
  --ok-wash: rgba(17, 98, 48, 0.12);
  --warn: #7a4804;
  --warn-wash: rgba(122, 72, 4, 0.13);
  --danger: #a0251c;
  --danger-wash: rgba(160, 37, 28, 0.11);

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 16px 36px -12px rgba(16, 24, 40, 0.2);
  --shadow-3: 0 36px 72px -28px rgba(16, 24, 40, 0.38), 0 0 0 1px rgba(16, 24, 40, 0.03);

  /* theme-dependent one-offs */
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --scrim: rgba(10, 10, 11, 0.42);
  --scrim-soft: rgba(10, 10, 11, 0.36);
  --on-accent: #ffffff;
  --inset-hairline: rgba(10, 10, 11, 0.08);
  --scroll-thumb-hover: #a1a1aa;
  --border-hover: #a1a1aa;
  --danger-text: #8a1f18;
  --danger-border: rgba(160, 37, 28, 0.3);
  --ok-text: #0f5a2c;
  --ok-border: rgba(17, 98, 48, 0.3);
  --warn-border: rgba(122, 72, 4, 0.3);
  --accent-border: rgba(29, 63, 216, 0.3);

  /* code blocks are ink in both themes, like the landing page's */
  --code-bg: #121318;
  --code-text: #e9e5da;
  --code-dim: #8d897e;
  --code-rule: #262831;

  /* the sign-in screen's prism, as behind the landing page's headline */
  --pz-1: #c7d2fe;
  --pz-2: #e9d5ff;
  --pz-3: #fbcfe8;
  --pz-4: #fed7aa;
  --pz-5: #bfdbfe;
  --pz-6: #ddd6fe;
  --pz-opacity: 0.95;

  /* the logo's chevrons (the #or-mark symbol in each page's sprite): the small
     one's upper arm (a) folds over its lower arm (b); the large one's arms (c,
     d) meet in a joint (j) that takes the extreme tone */
  --mark-a1: #9fa2a6;
  --mark-a2: #6a6d71;
  --mark-b1: #9a9da1;
  --mark-b2: #43464a;
  --mark-c1: #4c4f53;
  --mark-c2: #1f2124;
  --mark-d1: #474a4e;
  --mark-d2: #0f1013;
  --mark-j: #0a0a0d;

  /* type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* metrics */
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Dark palette — opt-in.
 *
 * Light is the default for everyone, including viewers whose OS asks for dark;
 * dark applies only when the viewer picks it with the topbar toggle, which
 * stamps data-theme="dark" on <html> (see the bootstrap in index.html, which
 * runs before first paint so there is no flash of the wrong theme).
 *
 * To follow the OS instead, add:
 *   @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { … } }
 * with the same declarations as the block below.
 */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b0b0d;
  --surface: #17171b;
  --surface-2: #1c1c21;
  --surface-3: #26262c;
  --surface-hover: #1c1c21;
  --sidebar-bg: #111114;
  --border: #26262c;
  --border-strong: #3a3a42;

  --text: #f4f4f5;
  --text-2: #d4d4d8;
  --text-3: #a1a1aa;

  --accent: #7c93ff;
  --accent-hover: #9aabff;
  --accent-dim: #3a4580;
  --accent-wash: rgba(124, 147, 255, 0.12);
  --accent-wash-strong: rgba(124, 147, 255, 0.2);

  --btn: #f4f4f5;
  --btn-hover: #d4d4d8;
  --on-btn: #0b0b0d;

  --series-1: #6a83f4;
  --series-2: #e0713a;
  --series-3: #1fae83;
  --grid: #26262c;

  --ok: #3fb950;
  --ok-wash: rgba(63, 185, 80, 0.14);
  --warn: #d6a01f;
  --warn-wash: rgba(214, 160, 31, 0.14);
  --danger: #ff786f;
  --danger-wash: rgba(255, 120, 111, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 36px 72px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);

  --topbar-bg: rgba(11, 11, 13, 0.88);
  --scrim: rgba(0, 0, 0, 0.66);
  --scrim-soft: rgba(0, 0, 0, 0.6);
  --on-accent: #0b0b0d;
  --inset-hairline: rgba(255, 255, 255, 0.07);
  --scroll-thumb-hover: #52525b;
  --border-hover: #52525b;
  --danger-text: #ffb4ae;
  --danger-border: rgba(255, 120, 111, 0.34);
  --ok-text: #9ae6a5;
  --ok-border: rgba(63, 185, 80, 0.3);
  --warn-border: rgba(214, 160, 31, 0.32);
  --accent-border: rgba(124, 147, 255, 0.32);

  --pz-1: #2b3a9c;
  --pz-2: #4c1d95;
  --pz-3: #7a1f4b;
  --pz-4: #6b2a12;
  --pz-5: #1e3a8a;
  --pz-6: #3b1470;
  --pz-opacity: 0.6;

  --mark-a1: #adb0b3;
  --mark-a2: #8a8d91;
  --mark-b1: #a2a5a9;
  --mark-b2: #42454a;
  --mark-c1: #f6f6f8;
  --mark-c2: #cdcdcf;
  --mark-d1: #bfbfc2;
  --mark-d2: #c9c9cc;
  --mark-j: #e2e2e4;
}

/* ── base ────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--accent-wash-strong);
}

/* Scrollbars: thin and recessive so panels read as one surface. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}

/* Code wears the product's mono. The browser's own rule for these is the bare
   generic `monospace`, which is not inherited from a styled parent, so the
   <code> inside every snippet block used to fall back to Consolas/Courier. */
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Numbers are set in the mono, the same rule the landing page follows. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--text-2);
}

.dim {
  color: var(--text-3);
}

.nowrap {
  white-space: nowrap;
}

/* The hidden attribute always wins. Components set display (flex, grid,
   inline-flex), which otherwise beats the browser's own [hidden] rule: the
   sign-in form showed the signup-only Name field, and the playground's Stop
   button stayed visible with nothing running. */
[hidden] {
  display: none !important;
}

.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;
}

/* ── boot / noscript ─────────────────────────────────────────────────────── */

.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--text-3);
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.boot .spinner {
  width: 16px;
  height: 16px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── app shell ───────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  z-index: 40;
}

.brand {
  --brand-h: 28px;
  display: flex;
  align-items: center;
  padding: 4px 8px 16px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: 18px;
}

.brand:hover {
  color: var(--text);
}

/* The logo: the chevron mark, then the wordmark, or the site name as text when
   the operator has renamed it. Mark and wordmark share one 100-unit-high
   coordinate space and the wordmark's viewBox starts at the mark's edge, so at
   the same height they sit exactly as drawn. A text name gets a 10px gap
   instead, which the wordmark cancels. */
.brand-mark {
  flex: none;
  width: var(--brand-h, 28px);
  height: var(--brand-h, 28px);
}

.brand-name {
  display: inline-flex;
  padding-left: 10px;
}

.brand-word {
  display: block;
  width: calc(var(--brand-h, 28px) * 2.98);
  height: var(--brand-h, 28px);
  margin-left: -10px;
}

/* The page's logo symbols. Kept rendered, at no size: gradients inside a
   display:none SVG do not paint. */
.or-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.nav-group {
  padding: 16px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.nav-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.85;
}

.nav-link:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* The current page is a raised white tab, as in the landing page's drawing
   of this dashboard. */
.nav-link[aria-current="page"],
.nav-link[aria-current="page"]:hover {
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-1);
}

.nav-link[aria-current="page"] svg {
  color: var(--accent);
  opacity: 1;
}

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 12px 10px 2px;
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-foot code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  word-break: break-all;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-spacer {
  flex: 1 1 auto;
}

.hamburger {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
}

.hamburger:hover {
  background: var(--surface-2);
  color: var(--text);
}

.hamburger svg {
  width: 18px;
  height: 18px;
  display: block;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.14s var(--ease),
    background 0.14s var(--ease),
    border-color 0.14s var(--ease);
}

.theme-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-icon {
  display: inline-flex;
}

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.balance-pill:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

.balance-pill .label {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.balance-pill.is-low {
  border-color: var(--danger-border);
}

.balance-pill .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.balance-pill.is-low .value {
  color: var(--danger);
}

.view {
  flex: 1 1 auto;
  padding: 28px 28px 72px;
  max-width: 1280px;
  width: 100%;
  min-width: 0;
}

/* ── user menu ───────────────────────────────────────────────────────────── */

.menu {
  position: relative;
}

.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 6px 0 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-2);
}

.avatar-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 650;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.avatar-btn svg {
  width: 12px;
  height: 12px;
}

.menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 60;
}

.menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.menu-head .name {
  font-weight: 600;
  font-size: 13px;
}

.menu-head .email {
  font-size: 12px;
  color: var(--text-3);
  word-break: break-all;
}

.menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.menu-item svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.menu-item.danger:hover {
  color: var(--danger);
}

/* ── page header ─────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-head h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.page-head p {
  color: var(--text-3);
  font-size: 14px;
  margin-top: 6px;
  max-width: 62ch;
}

.page-head .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── cards & grids ───────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  min-width: 0;
}

.card.pad-0 {
  padding: 0;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.card-head h3 {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.card-head .sub {
  font-size: 12px;
  color: var(--text-3);
}

.card-head .right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.grid.split {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.grid.split-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Preset top-up amounts. `is-active` is the chosen one, which stays in step
   with the free-text amount box either way it is changed. */
.row.chips {
  gap: 8px;
  flex-wrap: wrap;
}

.btn.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.btn.chip.is-active {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .grid.split-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .grid.split-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 940px) {
  .grid.split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── stat tiles ──────────────────────────────────────────────────────────── */

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.stat .label {
  font-size: 12.5px;
  color: var(--text-3);
}

.stat .value {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.stat .value.sm {
  font-size: 20px;
}

.stat .foot {
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}

.stat .spark {
  margin-top: 6px;
  height: 30px;
}

.hero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.hero .figure {
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.hero .figure.neg {
  color: var(--danger);
}

.hero .label {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero .side {
  margin-left: auto;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.hero .side .label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}

.hero .side .v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease),
    opacity 0.12s var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-hover);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.btn.primary {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--on-btn);
}

.btn.primary:hover:not(:disabled) {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-2);
}

.btn.ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.btn.danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: transparent;
}

.btn.danger:hover:not(:disabled) {
  background: var(--danger-wash);
  border-color: var(--danger);
}

.btn.sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  gap: 5px;
}

.btn.sm svg {
  width: 12px;
  height: 12px;
}

.btn.icon {
  width: 36px;
  padding: 0;
}

.btn.icon.sm {
  width: 28px;
}

.btn.block {
  width: 100%;
}

/* ── segmented control ──────────────────────────────────────────────────── */

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  gap: 2px;
}

.seg button {
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.seg button:hover {
  color: var(--text);
}

.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-1);
}

/* ── forms ───────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field > label,
.label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

.field .hint {
  font-size: 12px;
  color: var(--text-3);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 11px;
  font-size: 13.5px;
  min-height: 36px;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

.input.mono,
.textarea.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.55;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.select option {
  background: var(--surface-2);
  color: var(--text);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.range {
  width: 100%;
  accent-color: var(--accent);
}

.form-error {
  background: var(--danger-wash);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.5px;
}

.form-ok {
  background: var(--ok-wash);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.5px;
}

/* ── tables ──────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}

table.tbl th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.tbl tbody tr:last-child td {
  border-bottom: 0;
}

table.tbl tbody tr.clickable {
  cursor: pointer;
}

table.tbl tbody tr.clickable:hover {
  background: var(--surface-hover);
}

table.tbl td.right,
table.tbl th.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}

.pager .spacer {
  flex: 1 1 auto;
}

/* ── badges & meters ─────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge.ok {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-wash);
}

.badge.warn {
  color: var(--warn);
  border-color: var(--warn-border);
  background: var(--warn-wash);
}

.badge.danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-wash);
}

.badge.accent {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-wash);
}

.meter {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  min-width: 70px;
}

.meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.meter.warn > i {
  background: var(--warn);
}

.meter.danger > i {
  background: var(--danger);
}

/* ── code blocks ─────────────────────────────────────────────────────────── */

/* Ink in both themes, like the landing page's code card. */
.code {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--code-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-lang {
  position: absolute;
  top: 11px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--code-dim);
  pointer-events: none;
}

.code:has(.code-lang) pre {
  padding-top: 32px;
}

.code pre {
  margin: 0;
  padding: 14px 48px 16px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--code-text);
  tab-size: 2;
}

.code .copy {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.12s var(--ease);
}

.code .copy .btn {
  border-color: var(--code-rule);
  background: #1b1c22;
  color: var(--code-text);
  box-shadow: none;
}

.code .copy .btn:hover:not(:disabled) {
  border-color: var(--code-dim);
  background: #24252c;
}

.code:hover .copy,
.code:focus-within .copy {
  opacity: 1;
}

/* Touch devices never hover — keep the affordance visible there. */
@media (hover: none) {
  .code .copy {
    opacity: 1;
  }
}

.copy-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.key-reveal {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  word-break: break-all;
  color: var(--text);
}

.key-reveal .k {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── empty / loading states ─────────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
  color: var(--text-3);
}

.empty svg {
  width: 26px;
  height: 26px;
  opacity: 0.55;
}

.empty .t {
  color: var(--text-2);
  font-weight: 550;
  font-size: 13.5px;
}

.empty .d {
  font-size: 12.5px;
  max-width: 46ch;
}

.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 0;
  color: var(--text-3);
  font-size: 13px;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.is-stale {
  opacity: 0.45;
  transition: opacity 0.15s var(--ease);
}

/* ── charts ──────────────────────────────────────────────────────────────── */

.chart {
  position: relative;
  width: 100%;
  min-width: 0;
}

.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

.chart svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.chart .axis-text {
  font-size: 10.5px;
  fill: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
}

.chart .mark-label {
  font-size: 11px;
  fill: var(--text-2);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.chart .mark-name {
  font-size: 12px;
  fill: var(--text);
  font-family: var(--font-sans);
}

.chart-tip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  min-width: 132px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 9px 11px;
  font-size: 12px;
  transform: translate(-50%, -100%);
  transition: opacity 0.1s var(--ease);
  white-space: nowrap;
}

.chart-tip .x {
  color: var(--text-3);
  font-size: 11px;
  margin-bottom: 5px;
}

.chart-tip .r {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.chart-tip .r .k {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  flex: none;
}

.chart-tip .r .v {
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 10px;
}

.chart-tip .r .n {
  color: var(--text-3);
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-2);
}

.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend .swatch {
  width: 13px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

.legend .swatch.rect {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

details.data-table {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

details.data-table > summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-3);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

details.data-table > summary::-webkit-details-marker {
  display: none;
}

details.data-table > summary::before {
  content: "▸";
  font-size: 9px;
}

details.data-table[open] > summary::before {
  content: "▾";
}

details.data-table > summary:hover {
  color: var(--text-2);
}

details.data-table .table-wrap {
  max-height: 260px;
  overflow: auto;
  margin-top: 8px;
}

details.data-table table.tbl {
  min-width: 0;
  font-size: 12px;
}

/* ── dialog ──────────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
  animation: fade 0.13s var(--ease);
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.dialog {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  animation: pop 0.15s var(--ease);
}

.dialog.wide {
  max-width: 780px;
}

@keyframes pop {
  from {
    transform: translateY(8px) scale(0.99);
    opacity: 0;
  }
}

.dialog header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.dialog header h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dialog header .btn {
  margin-left: auto;
}

.dialog .body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dialog footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.dl {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 12.5px;
}

.dl dt {
  color: var(--text-3);
}

/* Every .dl in the app lists counts, money, ids or URLs, so the values take
   the mono, like the line items on the landing page's receipt. */
.dl dd {
  margin: 0;
  word-break: break-word;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── toasts ──────────────────────────────────────────────────────────────── */

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 11px 14px;
  font-size: 13.5px;
  animation: slide-in 0.16s var(--ease);
}

.toast.ok {
  border-left-color: var(--ok);
}

.toast.err {
  border-left-color: var(--danger);
}

@keyframes slide-in {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
}

/* ── auth screen ─────────────────────────────────────────────────────────── */

/* The handoff from the landing page: the same prism of colour behind a large
   headline, the same type and the same white cards, so "Create a free
   account" does not land on what looks like another product. The no-JS and
   boot-error fallbacks render a bare .auth-card straight inside .auth, so the
   card has to stand on its own too. */
.auth {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 56px 24px;
  overflow: hidden;
  background: var(--bg);
}

/* Tall glass columns, skewed, each lit on one edge, then blurred together and
   faded out: the landing page's hero background. */
.auth-prism {
  position: absolute;
  inset: 0 -10%;
  z-index: -1;
  display: flex;
  justify-content: center;
  opacity: var(--pz-opacity);
  filter: blur(24px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 82%);
  pointer-events: none;
  animation: auth-drift 28s ease-in-out infinite alternate;
}

.auth-prism i {
  flex: 0 0 clamp(170px, 20vw, 320px);
  height: 170%;
  margin-top: -30%;
  background: linear-gradient(
    90deg,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 55%, transparent) 45%,
    transparent 100%
  );
  transform: skewY(-38deg);
}

.auth-prism i:nth-child(1) {
  --c: var(--pz-1);
}

.auth-prism i:nth-child(2) {
  --c: var(--pz-2);
}

.auth-prism i:nth-child(3) {
  --c: var(--pz-3);
}

.auth-prism i:nth-child(4) {
  --c: var(--pz-4);
}

.auth-prism i:nth-child(5) {
  --c: var(--pz-5);
}

.auth-prism i:nth-child(6) {
  --c: var(--pz-6);
}

@keyframes auth-drift {
  from {
    transform: translateX(-3%);
  }

  to {
    transform: translateX(3%);
  }
}

.auth-sheet {
  position: relative;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  grid-template-areas:
    'head card'
    'clauses card';
  gap: 0 clamp(40px, 7vw, 104px);
  align-items: start;
}

.auth-head {
  grid-area: head;
  align-self: end;
}

.auth-sheet > .auth-card {
  grid-area: card;
  align-self: center;
}

.auth-brand {
  --brand-h: 30px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.auth-head .auth-brand {
  margin-bottom: 44px;
}

a.auth-brand:hover {
  color: var(--text);
}

.auth-title {
  margin-bottom: 20px;
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.auth-lede {
  max-width: 28em;
  color: var(--text-3);
  font-size: 19px;
  line-height: 1.5;
}

/* The same promises as the landing page, each under an icon the way its
   features are set. */
.auth-clauses {
  grid-area: clauses;
  display: grid;
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.auth-clauses li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.55;
}

.auth-clause-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent);
}

.auth-clause-icon svg {
  width: 18px;
  height: 18px;
}

.auth-clauses p {
  padding-top: 7px;
}

.auth-clauses strong {
  color: var(--text);
  font-weight: 600;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-3);
}

/* Two modes, marked with an underline the way the landing marks its tabs. */
.auth-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}

.auth-tabs button {
  position: relative;
  padding: 0 0 13px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.auth-tabs button:hover,
.auth-tabs button[aria-selected="true"] {
  color: var(--text);
}

.auth-tabs button[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.auth .input {
  min-height: 44px;
  font-size: 15px;
}

.auth .btn.primary.block {
  height: 48px;
  border-radius: var(--radius);
  font-size: 15.5px;
}

.auth-foot {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .auth {
    place-items: start center;
    padding-top: 36px;
  }

  .auth-sheet {
    max-width: 460px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'card'
      'clauses';
    gap: 28px;
  }

  .auth-head .auth-brand {
    margin-bottom: 28px;
  }

  .auth-title {
    font-size: clamp(36px, 10vw, 48px);
  }

  .auth-lede {
    font-size: 17px;
  }

  .auth-sheet > .auth-card {
    max-width: none;
  }

  .auth-card {
    padding: 24px;
  }

  .auth-clauses {
    margin-top: 0;
  }
}

/* ── models grid ─────────────────────────────────────────────────────────── */

.model-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: border-color 0.12s var(--ease);
}

.model-card:hover {
  border-color: var(--border-strong);
}

.model-card.off {
  opacity: 0.6;
}

.model-card .title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.model-card .title h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.model-card .id {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.price-grid .p .k {
  font-size: 11px;
  color: var(--text-3);
}

.price-grid .p .v {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.price-grid .p .u {
  font-size: 10.5px;
  color: var(--text-3);
}

.admin-strip {
  border-top: 1px dashed var(--border-strong);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

/* ── playground ──────────────────────────────────────────────────────────── */

.pg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1040px) {
  .pg {
    grid-template-columns: minmax(0, 1fr);
  }
  .pg .pg-side {
    order: -1;
  }
}

.pg-chat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
}

.pg-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(58vh, 620px);
  min-height: 240px;
}

.msg {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.msg .who {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--surface-3);
  color: var(--text-2);
}

.msg.user .who {
  background: var(--accent-wash-strong);
  color: var(--accent);
}

.msg .bubble {
  min-width: 0;
  flex: 1 1 auto;
}

.msg .content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.62;
}

.msg .meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.msg.err .content {
  color: var(--danger-text);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
  margin-left: 1px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.pg-compose {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
}

.pg-compose textarea {
  min-height: 62px;
  max-height: 220px;
}

.pg-compose .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pg-compose .bar .spacer {
  flex: 1 1 auto;
}

kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 4px;
  color: var(--text-3);
  background: var(--surface-2);
}

/* ── docs ────────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  margin-bottom: 14px;
}

.tabs button {
  border: 0;
  background: none;
  padding: 8px 12px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs button:hover {
  color: var(--text-2);
}

.tabs button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-2);
}

.callout svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}

.callout.warn {
  border-color: var(--warn-border);
  background: var(--warn-wash);
}

.callout.warn svg {
  color: var(--warn);
}

/* ── filter bar ──────────────────────────────────────────────────────────── */

.filters {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filters .field {
  min-width: 130px;
}

.filters .field > label {
  font-size: 11px;
  color: var(--text-3);
}

.filters .grow {
  flex: 1 1 180px;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(84vw, 280px);
    transform: translateX(-102%);
    transition: transform 0.18s var(--ease);
    box-shadow: var(--shadow-3);
  }

  .app.nav-open .sidebar {
    transform: none;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim-soft);
    z-index: 35;
    animation: fade 0.13s var(--ease);
  }

  .hamburger {
    display: inline-flex;
  }

  .view {
    padding: 22px 20px 56px;
  }

  .topbar {
    padding: 0 16px;
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 16px;
  }

  .hero .figure {
    font-size: 38px;
  }

  .hero .side {
    margin-left: 0;
    gap: 18px;
  }

  .card {
    padding: 13px;
  }

  .view {
    padding: 18px 16px 48px;
  }

  .balance-pill .label {
    display: none;
  }

  .page-head h2 {
    font-size: 26px;
  }

  .stat .value {
    font-size: 22px;
  }

  .filters .field {
    min-width: 0;
    flex: 1 1 46%;
  }

  .toasts {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

@media (max-width: 400px) {
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar h1 {
    font-size: 14px;
  }
}