/* Stringer developer dashboard. * * The brand is the public site (src/api/site.ts): a phosphor-CRT terminal -- * green on near-black, monospace throughout, square boxes, "// " section * headings, bordered CTAs that invert on hover. This file wears that identity * but at operator density: no hero, no vignette, no glow on anything you have * to READ. Decoration is confined to the chrome (header, scanlines, meter). * * Palette values marked SITE are lifted verbatim from site.ts. The three * additions exist because an admin tool needs states a landing page does not: * --mut the site's --dim is 3.8:1 on --bg -- fine for rules and borders, * below AA for text, and this page is mostly small text. --mut is * 6.3:1 on --bg / 5.9:1 on --panel, so secondary labels pass AA. * --bad the site has no failure colour; Revoke/Rotate and error text need * one. 7.3:1 on --bg. * --sunk a recessed surface for inputs, 
 and secrets.
 * Measured contrast on --bg: --fg 14.2:1, --hot 17.6:1, --amber 11.4:1.
 *
 * No external resources of any kind -- CSP here is `default-src 'self'`.
 */
:root {
  color-scheme: dark;                 /* fixed dark identity: native controls must follow */
  --bg:#050806;                       /* SITE */
  --fg:#4bf58a;                       /* SITE -- phosphor */
  /* 5.63:1 on --bg. Was #1f7a44 (3.76:1) until 2026-08-10 -- BELOW WCAG AA for
     body text, and measured on 31 elements at 15px including the claim-token
     warning and the "I'm a Human" tab. The comment here said "structure, never
     body text"; the markup used it for body text anyway, which is what a rule
     enforced only by a comment is worth.
     The APP fixed this exact colour on 2026-08-07 (provider-app/native/ui/theme.ts)
     and the web kept it for three more days -- same defect, diagnosed once,
     left standing on every other surface. */
  --dim:#2f9a56;
  --hot:#b6ffcf;                      /* SITE -- emphasis, values, headings */
  --amber:#ffb454;                    /* SITE -- caution */
  --line:#0f331f;                     /* SITE -- box rules */
  --glow:0 0 6px rgba(75,245,138,.45);/* SITE */
  --mut:#35a35e;                      /* added: AA-legible secondary text */
  --bad:#ff6b5b;                      /* added: destructive / failure */
  --panel:#08140d;                    /* SITE .box background, opaque */
  --sunk:#030604;
  --ink:#04120a;                      /* SITE: text on an inverted (filled) control */
}

* { box-sizing: border-box; }

html, body { margin:0; background:var(--bg); color:var(--fg); }

body {
  /* Monospace everywhere, as on the site -- and it is the right choice here
     anyway: every column on this page is a key, an id or an amount. */
  font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;  /* digits must not shift between rows */
  background-image:radial-gradient(120% 90% at 50% -10%, #0a140d 0%, #050806 60%);
  min-height:100vh;
}

/* Scanlines: the one purely atmospheric borrow. Kept faint (a 16% line every
   3px, no vignette) so a table of balances stays comfortable, and dropped
   entirely when the reader has asked for more contrast. */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
}
@media (prefers-contrast: more) { body::before { display:none; } }

/* --- chrome --------------------------------------------------------------- */

header {
  position:sticky; top:0; z-index:6;
  padding:14px 24px; border-bottom:1px solid var(--dim);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg);
}
header h1 {
  font-size:15px; margin:0; font-weight:600; flex:1; min-width:0;
  color:var(--hot); letter-spacing:.18em; text-shadow:var(--glow);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
header .sep { color:var(--dim); letter-spacing:0; text-shadow:none; }
header .sub {
  color:var(--mut); font-size:13px; font-weight:400;
  letter-spacing:.04em; text-shadow:none; text-transform:lowercase;
}
header .dot {
  width:9px; height:9px; flex:0 0 auto;
  background:var(--fg); box-shadow:var(--glow);
}
.cursor {
  display:inline-block; width:.6ch; height:1em; background:var(--fg);
  vertical-align:-1px; animation:blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation:none; } }

main { max-width:960px; margin:0 auto; padding:20px 24px 96px; position:relative; z-index:1; }

/* --- boxes ---------------------------------------------------------------- */

.card {
  background:var(--panel); border:1px solid var(--line);
  padding:16px 18px; margin:16px 0;
  overflow-x:auto;                    /* a wide table scrolls in its box, never the page */
}
.card h2 {
  font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--hot); font-weight:600; margin:0 0 12px;
}
.card h2::before { content:"// "; color:var(--dim); }   /* SITE .box h2 */
.card.warn { border-color:var(--amber); }
.card.warn h2 { color:var(--amber); }
.card.warn h2::before { color:var(--amber); opacity:.6; }

/* --- controls ------------------------------------------------------------- */

input, select, textarea, button { font:inherit; letter-spacing:inherit; }

input, select, textarea {
  width:100%; padding:9px 11px; min-height:40px;
  background:var(--sunk); border:1px solid var(--dim); border-radius:0;
  color:var(--hot); caret-color:var(--fg);
}
textarea { resize:vertical; line-height:1.45; }
/* The agent pickers are