/* =====================================================================
   TRAGENTS.FUN — design system
   ---------------------------------------------------------------------
   Rebuilt from the reference screens in `docs/design/screens/`, with
   every colour SAMPLED from them rather than guessed. The previous
   system was a restrained editorial one; this is the product's actual
   language and it is a different thing:

     * a near-black canvas with a blue-violet cast, not neutral grey
     * cards barely a shade above the canvas, separated by thin borders
       rather than by contrast — depth comes from the border and the
       glow, never from a lighter box
     * saturated violet as the single action colour, always a gradient
     * neon green and red for money, brighter than a normal UI would use
       because on this product the number IS the content
     * chips with deep saturated backgrounds and bright text
     * density: this is a trading dashboard, not an article

   ⚠️ NOTHING HERE MAKES A NUMBER TRUE. The reference screens show live
   trading, token prices, market caps and holder lists. Those are the
   design's intent, not the platform's state. Components render whatever
   the API actually returns, and where the platform has nothing they say
   so — a beautiful shell around invented figures is the one thing this
   project exists to avoid.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- surfaces. Sampled: canvas #00070F, cards #040D17 ---- */
  --canvas:        #04070E;
  --canvas-deep:   #01040A;   /* nav bar, the darkest plane */
  --sidebar:       #050A14;
  --surface:       #080E18;
  --surface-2:     #0B1220;   /* hover, and the one step up that exists */
  --surface-3:     #101828;

  /* ---- borders do the work that contrast usually does ---- */
  --border:        #17203055;
  --border-solid:  #172030;
  --border-strong: #232E45;
  --divider:       #121A28;

  /* ---- text ---- */
  --text:          #FFFFFF;
  --text-2:        #A9B2C4;
  --text-3:        #6B7689;
  --text-4:        #4A5468;

  /* ---- the one action colour. Sampled from three buttons:
          #672ED1 (hero), #4405AB (nav), #3A049F (step) ---- */
  --violet:        #6A31DD;
  --violet-bright: #8B5CF6;
  --violet-deep:   #4405AB;
  --violet-glow:   #A855F7;
  --violet-grad:   linear-gradient(180deg, #7B3FE4 0%, #4A08AE 100%);
  --violet-grad-h: linear-gradient(180deg, #8B52ED 0%, #5A18BE 100%);
  --violet-wash:   rgba(106, 49, 221, .14);
  --violet-line:   rgba(139, 92, 246, .38);

  /* ---- money. Sampled #2BD987 and #F44847 ---- */
  --positive:      #2BD987;
  --positive-glow: #61FF8A;
  --positive-wash: rgba(43, 217, 135, .12);
  --negative:      #F44847;
  --negative-wash: rgba(244, 72, 71, .12);
  --warning:       #F5A623;
  --warning-wash:  rgba(245, 166, 35, .12);
  --info:          #3B82F6;

  /* ---- lifecycle. Every ChainStatus and StackStatus has one. ---- */
  --st-live:         #2BD987;
  --st-paper:        #3B82F6;
  --st-qualified:    #A855F7;
  --st-funding:      #22D3EE;
  --st-created:      #6B7689;
  --st-paused:       #6B7689;
  --st-degraded:     #F5A623;
  --st-disqualified: #F44847;
  --st-dead:         #4A5468;

  /* ---- type ---- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- shape ---- */
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* ---- the glow that defines this look ---- */
  --glow-violet: 0 0 24px rgba(139, 92, 246, .28);
  --glow-green:  0 0 20px rgba(43, 217, 135, .25);
  --lift:        0 8px 28px rgba(0, 0, 0, .55);

  --nav-h: 62px;
  --side-w: 232px;
  --rail-w: 320px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }

/* A violet bloom behind the page. It is what stops a near-black canvas
   reading as "unstyled" — the reference screens all have it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 520px at 18% -8%,  rgba(106, 49, 221, .16), transparent 60%),
    radial-gradient(900px 460px at 88% 4%,    rgba(139, 92, 246, .10), transparent 62%);
}
#app, .app-header, .shell, .sidebar, .tabbar { position: relative; z-index: 1; }

a { color: var(--violet-glow); text-decoration: none; }
a:hover { color: #C4B5FD; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   TYPE
   ===================================================================== */

.t-hero    { font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1.06; margin: 0; }
.t-page    { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.t-section { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.t-card    { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.t-body    { font-size: 14px; color: var(--text-2); margin: 0; }
.t-body.sm { font-size: 13px; }
.t-meta    { font-size: 12px; color: var(--text-3); }
.t-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.dim   { color: var(--text-3); }
.muted { color: var(--text-2); }
.pos   { color: var(--positive); }
.neg   { color: var(--negative); }
.warn  { color: var(--warning); }
.vio   { color: var(--violet-glow); }

/* ⚠️ MONOSPACE FOR EVERY NUMBER, ADDRESS AND TICKER. Proportional
   digits make two prices of different lengths look like different
   magnitudes at a glance, and on a trading screen that is a real
   misread, not a typographic preference. */
.num, .stat-value, table.data td.n, table.lb .num, .mono {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.stat-value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.stat-value.lg { font-size: 30px; }
.stat-value.xl { font-size: 38px; letter-spacing: -.03em; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row    { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack  { display: flex; flex-direction: column; gap: 18px; }

/* =====================================================================
   SHELL — top nav, left sidebar, content, right rail
   ===================================================================== */

.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  height: var(--nav-h); padding: 0 20px;
  background: rgba(1, 4, 10, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-solid);
}
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: none; }
.wordmark { height: 24px; width: auto; display: block; }
.beta-chip {
  padding: 3px 7px; border-radius: 5px; font-family: var(--mono);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 9.5px; letter-spacing: .12em; color: var(--text-2);
}

/* Centred, per the reference screens. Not left-aligned beside the logo. */
.app-nav {
  display: flex; gap: 4px; margin: 0 auto;
}
.app-nav a {
  position: relative; padding: 9px 15px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer;
}
.app-nav a:hover { color: var(--text); background: var(--surface); }
.app-nav a[aria-current="page"] { color: var(--text); }
.app-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: -12px;
  height: 2px; border-radius: 2px;
  background: var(--violet-bright); box-shadow: var(--glow-violet);
}

.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-solid); background: var(--surface);
  color: var(--text-2);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* The wallet pill: address over balance, per the screens. */
.wallet-pill {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  border-radius: var(--r-pill); border: 1px solid var(--border-solid);
  background: var(--surface); color: var(--text);
}
.wallet-pill:hover { border-color: var(--violet-line); }
.wallet-pill .who { display: flex; flex-direction: column; line-height: 1.25; }
.wallet-pill .addr { font-family: var(--mono); font-size: 12.5px; }
.wallet-pill .bal  { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }

.layout {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: 0; align-items: start;
}
.sidebar {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 18px 12px;
  background: var(--sidebar);
  border-right: 1px solid var(--border-solid);
}
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--text-2); cursor: pointer;
}
.side-link:hover { background: var(--surface); color: var(--text); }
.side-link[aria-current="page"] {
  background: var(--violet-wash); color: var(--text);
  box-shadow: inset 2px 0 0 var(--violet-bright);
}
.side-link .badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--violet);
  font-family: var(--mono); font-size: 10.5px; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.side-group {
  margin: 20px 0 7px; padding: 0 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-4);
}

.shell { padding: 22px 24px 48px; min-width: 0; }
.with-rail {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: 18px; align-items: start;
}
.rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h) + 22px); }

/* =====================================================================
   SURFACES
   ===================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border-solid);
  border-radius: var(--r);
  padding: 16px;
}
.card.pad-0 { padding: 0; overflow: hidden; }
.card.glow  { box-shadow: var(--glow-violet); border-color: var(--violet-line); }
.row-hover:hover { background: var(--surface-2); }

.tile {
  background: var(--surface); border: 1px solid var(--border-solid);
  border-radius: var(--r); padding: 14px 15px;
}
.grid-tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.grid-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
}

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--r);
  padding: 30px 22px; text-align: center; color: var(--text-3); font-size: 13.5px;
}
.empty strong { display: block; color: var(--text-2); font-weight: 600; margin-bottom: 5px; }

.banner {
  border: 1px solid var(--border-solid); border-radius: var(--r);
  background: var(--surface); padding: 13px 15px;
  font-size: 13px; color: var(--text-2);
}
.banner-ok   { border-color: rgba(43,217,135,.35);  background: var(--positive-wash); }
.banner-warn { border-color: rgba(245,166,35,.32);  background: var(--warning-wash); }
.banner-bad  { border-color: rgba(244,72,71,.35);   background: var(--negative-wash); }
.banner-vio  { border-color: var(--violet-line);    background: var(--violet-wash); }

/* =====================================================================
   BUTTONS
   ===================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 500;
}
.btn:hover { background: var(--surface-2); border-color: var(--violet-line); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.lg { padding: 13px 24px; font-size: 15px; }
.btn.wide { width: 100%; }

.btn-primary {
  background: var(--violet-grad); border-color: transparent; color: #fff;
  font-weight: 600; box-shadow: var(--glow-violet);
}
.btn-primary:hover { background: var(--violet-grad-h); border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--border-solid); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }
.btn-danger { background: transparent; border-color: rgba(244,72,71,.4); color: var(--negative); }

/* =====================================================================
   CHIPS
   ===================================================================== */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap;
  /* ⚠️ A DEFAULT, so a status nobody wrote a rule for is still legible.
     Unstyled text on a near-black page is invisible, and these are read
     by strangers deciding where to put money. */
  background: rgba(107, 118, 137, .16); color: var(--text-2);
}
.chip-LIVE         { background: rgba(43,217,135,.14);  color: var(--st-live); }
.chip-PAPER        { background: rgba(59,130,246,.16);  color: var(--st-paper); }
.chip-QUALIFIED    { background: rgba(168,85,247,.17);  color: var(--st-qualified); }
.chip-FUNDING      { background: rgba(34,211,238,.14);  color: var(--st-funding); }
.chip-CREATED,
.chip-PAUSED,
.chip-RETIRED      { background: rgba(107,118,137,.16); color: var(--st-paused); }
.chip-DEAD         { background: rgba(74,84,104,.18);   color: var(--st-dead); }
.chip-DEGRADED     { background: rgba(245,166,35,.14);  color: var(--st-degraded); }
.chip-DISQUALIFIED { background: rgba(244,72,71,.14);   color: var(--st-disqualified); }
.chip-ACTIVE       { background: rgba(43,217,135,.14);  color: var(--positive); }
.chip-HIBERNATING  { background: rgba(245,166,35,.14);  color: var(--warning); }
/* memory verdicts */
.chip-HELPING  { background: rgba(43,217,135,.14);  color: var(--positive); }
.chip-HURTING  { background: rgba(244,72,71,.14);   color: var(--negative); }
.chip-STALE    { background: rgba(245,166,35,.14);  color: var(--warning); }
.chip-NEUTRAL,
.chip-UNPROVEN { background: rgba(107,118,137,.16); color: var(--text-3); }
/* strategy chips: deep saturated field, bright type — sampled #240C72 */
.chip-strategy {
  background: rgba(106,49,221,.22); color: #C4B5FD;
  border: 1px solid rgba(139,92,246,.24);
}
.chip-ticker {
  font-family: var(--mono); background: rgba(106,49,221,.2);
  color: #C4B5FD; letter-spacing: 0;
}
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px;
  border: 1px solid var(--border-solid); background: var(--surface-2);
  color: var(--text-2); white-space: nowrap;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); flex: none; }
.dot-live { box-shadow: 0 0 8px var(--positive); animation: pulseDot 1.9s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* =====================================================================
   AVATARS
   ===================================================================== */

/* Initials in a violet-washed tile. The reference screens use painted
   character art; that is an asset pipeline, not a stylesheet, and an
   identicon that is deterministic beats a placeholder that is not. */
.avatar {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(106,49,221,.4), rgba(20,16,40,.9));
  border: 1px solid var(--violet-line);
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: #DDD6FE;
}
.avatar.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.avatar.lg { width: 72px; height: 72px; border-radius: 18px; font-size: 22px; }

/* ⚠️ THE INITIALS STAY UNDERNEATH THE PICTURE. The image is positioned
   over them rather than replacing them, so a slow, blocked or deleted
   image degrades to the agent's name instead of to an empty square. The
   <img> removes itself on error. */
.avatar.has-img { position: relative; overflow: hidden; }
.avatar.has-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The picker on the Identity step. */
.face-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.face {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; padding: 0;
  background: var(--surface-2, rgba(255,255,255,.03));
  border: 1px solid var(--divider);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text-3);
  transition: border-color .12s ease, transform .12s ease;
}
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face:hover { border-color: var(--violet-line); transform: translateY(-1px); }
/* The chosen one is unmistakable: a ring, not a subtle tint. Somebody
   picking a face has to be able to see which one is theirs. */
.face.picked {
  border-color: var(--violet);
  box-shadow: 0 0 0 2px var(--violet) inset, 0 0 0 3px rgba(106,49,221,.25);
}
.face.upload { border-style: dashed; font-size: 20px; color: var(--text-3); }

/* =====================================================================
   TABLES
   ===================================================================== */

.table-scroll { overflow-x: auto; }
table.lb, table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lb th, table.data th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: 13px 15px; border-bottom: 1px solid var(--divider); white-space: nowrap;
}
table.lb td, table.data td {
  padding: 13px 15px; border-bottom: 1px solid var(--divider); white-space: nowrap;
}
table.lb tbody tr:last-child td, table.data tr:last-child td { border-bottom: 0; }
table.lb tbody tr { cursor: pointer; }
table.lb tbody tr:hover { background: var(--surface-2); }
table.lb .r, table.lb th.r, table.data .r { text-align: right; }
table.data td.muted, table.data td.n { color: var(--text-2); }

/* Rank medals, per the leaderboard screen. */
.rank {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
}
.rank-1 { background: linear-gradient(145deg,#FFD770,#C99027); color: #1A1206; }
.rank-2 { background: linear-gradient(145deg,#D8DEE9,#8E97A6); color: #12161C; }
.rank-3 { background: linear-gradient(145deg,#E8A971,#B4682C); color: #1A1006; }

/* =====================================================================
   TABS
   ===================================================================== */

.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--divider); }
.tabs button {
  padding: 11px 15px; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 14px; color: var(--text-3);
}
.tabs button:hover { color: var(--text-2); }
.tabs button[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--violet-bright);
}
/* Pill-style filters, per the Markets and Strategy screens. */
.pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pills button {
  padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-solid); background: var(--surface);
  font-size: 13px; color: var(--text-2);
}
.pills button:hover { color: var(--text); border-color: var(--border-strong); }
.pills button[aria-selected="true"] {
  background: var(--violet); border-color: transparent; color: #fff; font-weight: 500;
}

/* =====================================================================
   FORMS
   ===================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; margin-top: 15px; }
.field > span:first-child { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
input[type="text"], input[type="number"], input:not([type]), textarea, select {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--canvas-deep); color: var(--text);
  border: 1px solid var(--border-solid); font-size: 14px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--violet-bright);
  box-shadow: 0 0 0 3px rgba(106,49,221,.16);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
.field code {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
}

/* =====================================================================
   MODAL + TOAST
   ===================================================================== */

.modal-back {
  position: fixed; inset: 0; z-index: 60; padding: 22px;
  background: rgba(1, 3, 8, .8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
}
.modal {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 22px; width: min(540px, 100%);
  max-height: calc(100vh - 44px); overflow-y: auto; box-shadow: var(--lift);
}
.terms { margin: 18px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.terms li { margin-bottom: 7px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 90;
  max-width: min(540px, calc(100vw - 32px)); box-shadow: var(--lift);
}
details.card summary { cursor: pointer; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: " ▾"; color: var(--text-3); }
details.card[open] summary::after { content: " ▴"; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

.tabbar { display: none; }

@media (max-width: 1240px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  :root { --side-w: 200px; }
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .app-nav { display: none; }
  .shell { padding: 16px 14px 88px; }
  .t-hero { font-size: 32px; }
  .t-page { font-size: 24px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(1, 4, 10, .95); backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-solid);
    /* ⚠️ SCROLLS RATHER THAN SQUEEZING. Nine destinations divided by a
       phone's width gives nine labels nobody can read, and dropping the
       overflow hides whole screens with no hint they exist. */
    overflow-x: auto; scrollbar-width: none; gap: 2px;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a {
    flex: 0 0 auto; padding: 9px 12px; border-radius: var(--r-sm);
    font-size: 12.5px; color: var(--text-3); cursor: pointer;
  }
  .tabbar a[aria-current="page"] { background: var(--violet-wash); color: #C4B5FD; }

  .grid-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* Wide tables scroll inside their own card. The page body must never
     scroll sideways — that hides the right-hand columns with no hint. */
  table.data { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
  .header-right .icon-btn { display: none; }
  .beta-chip { display: none; }
  .wordmark { height: 20px; }
}

/* =====================================================================
   ARENA — docs/design/screens/01-arena.png
   ===================================================================== */

.hero {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 36px; align-items: center; padding: 34px 32px;
  background:
    radial-gradient(700px 320px at 85% 50%, rgba(106,49,221,.20), transparent 65%),
    var(--surface);
  border-color: var(--violet-line);
  overflow: hidden;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--canvas-deep);
  font-size: 12.5px; color: var(--text-2); margin-bottom: 20px;
}
.hero-stats { display: flex; flex-direction: column; gap: 12px; }
.hero-stat {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border-radius: var(--r); border: 1px solid var(--border-strong);
  background: rgba(4,7,14,.72); backdrop-filter: blur(6px);
}
.hero-stat-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-wash); color: var(--violet-glow);
  border: 1px solid var(--violet-line);
}

.agent-card { display: flex; flex-direction: column; gap: 13px; cursor: pointer; }
.agent-card:hover { border-color: var(--violet-line); box-shadow: var(--glow-violet); }
.av-wrap { position: relative; flex: none; }
/* The rank badge sits ON the avatar, per the reference screen. */
.rank-badge {
  position: absolute; top: -6px; left: -6px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--violet-grad); color: #fff;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  box-shadow: var(--glow-violet);
}
.spark { width: 100%; height: 44px; display: block; }
.spark-empty {
  height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
}
.card-foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--divider);
  font-size: 11.5px; color: var(--text-3);
}
/* An agent that cannot be ranked says so ON its own card: dropping it
   hides the state of a young arena, ranking it promotes noise. */
.card-note {
  font-size: 11.5px; color: var(--warning);
  padding-top: 10px; border-top: 1px solid var(--divider);
}

/* The Buy control on an agent card. Its own row with a divider above
   it, because it is the one thing on the card that spends money and it
   must not read as another tag. The sentence beside it is not optional:
   this is where somebody decides to buy, so this is where "the token is
   not the profit" has to be said. */
.card-buy {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 11px; margin-top: 2px; border-top: 1px solid var(--divider);
}
.card-buy .t-meta { font-size: 11px; line-height: 1.35; flex: 1; min-width: 120px; }

/* On a leaderboard row it sits beside the name, so it stays quiet —
   a table of forty primary buttons is a table nobody reads. */
.lb [data-buyslot] { margin-left: auto; }
.lb .btn.sm { white-space: nowrap; }

.list-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.list-col { display: flex; flex-direction: column; }
.list-head { padding: 13px 15px; border-bottom: 1px solid var(--divider); }
.list-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 15px;
  border-bottom: 1px solid var(--divider); cursor: pointer;
}
.list-col .list-row:last-child { border-bottom: 0; }
.list-empty { padding: 20px 15px; text-align: center; }

/* The event strip along the bottom. Duplicated content and an even
   translate keeps the loop seamless. */
.ticker { overflow: hidden; }
.ticker-track { display: flex; gap: 30px; padding: 12px 16px; width: max-content;
  animation: tickerRoll 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.ticker-item strong { color: var(--text); font-weight: 600; }
@keyframes tickerRoll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .dot-live { animation: none; }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
  .hero-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
}

/* ---------------------------------------------------------------------
   Header crowding. At 1024 the nav, the Create button, the chain chip
   and the wallet button all compete, and "+ Create Tragent" broke onto
   two lines inside its own pill. A button that wraps is a button that
   looks broken.
   --------------------------------------------------------------------- */
.btn, .chip, .tag { white-space: nowrap; }
.app-header { gap: 14px; }
.header-right { gap: 8px; flex: none; }
@media (max-width: 1300px) {
  .app-nav a { padding: 9px 11px; font-size: 14px; }
}
@media (max-width: 1150px) {
  /* The Create button lives in the sidebar and the bottom bar too, so
     dropping it from a cramped header loses no route. */
  .header-right .btn-primary { display: none; }
}

/* The section rule sits beside its heading on wide screens and under it
   when there is no room, rather than squeezing both. */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-head .t-meta { flex: 1 1 320px; text-align: right; }
@media (max-width: 900px) { .sec-head .t-meta { text-align: left; } }

/* ---- right-rail widgets ---- */
.rail-stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--divider);
}
.rail-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.bar { flex: 1 1 90px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; background: var(--violet-grad); border-radius: 999px; }

/* =====================================================================
   PROFILE — docs/design/screens/10-profile-overview.png
   ===================================================================== */

.profile-head { padding: 22px 24px 0; }
.head-stats {
  display: grid; gap: 0; margin: 20px -24px 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--divider);
}
.head-stat {
  padding: 15px 24px; border-right: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 4px;
}
.head-stat:last-child { border-right: 0; }
@media (max-width: 900px) {
  .profile-head { padding: 18px 16px 0; }
  .head-stats { margin: 16px -16px 0; grid-template-columns: repeat(2, 1fr); }
  .head-stat { padding: 13px 16px; border-bottom: 1px solid var(--divider); }
}

/* The old two-column split, retained for the tab bodies. */
.split { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.split > .main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.split > .rail { flex: 0 1 300px; min-width: 0; }

/* Six headline figures fit one row on a wide profile; below that they
   pair up. `auto-fit` alone left the sixth alone on its own row. */
@media (min-width: 901px) {
  .head-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .head-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .head-stat { border-bottom: 1px solid var(--divider); }
}

/* =====================================================================
   CREATE — docs/design/screens/02..09
   ===================================================================== */

.create-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--divider); flex-wrap: wrap;
}
.create-grid {
  display: grid; grid-template-columns: 236px minmax(0,1fr) 320px;
  gap: 18px; align-items: start;
}
.step-rail { display: flex; flex-direction: column; gap: 3px; }
.step-item {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  padding: 11px 12px; border-radius: var(--r); border: 1px solid transparent;
  background: transparent; color: var(--text-2);
}
.step-item:hover { background: var(--surface); }
.step-item.on {
  background: var(--violet-wash); border-color: var(--violet-line); color: var(--text);
}
.step-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-3);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
}
.step-item.on .step-n { background: var(--violet); color: #fff; }
.step-item.done .step-n { background: rgba(43,217,135,.18); color: var(--positive); }
.step-t { display: block; font-size: 14px; font-weight: 500; color: inherit; }
.step-s { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-item.on .step-s { color: #C4B5FD; }
.aside-card { margin-top: 16px; background: var(--canvas-deep); }

.step-card { padding: 22px 24px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two-col .field { margin-top: 0; }

/* A choice is the whole card, not a 4px radio nobody wants to aim at. */
.pick-card {
  display: block; padding: 15px 16px; border-radius: var(--r);
  border: 1px solid var(--border-solid); background: var(--canvas-deep);
  cursor: pointer;
}
.pick-card:hover { border-color: var(--border-strong); }
.pick-card.picked { border-color: var(--violet-bright); box-shadow: var(--glow-violet);
  background: var(--violet-wash); }
.pick-card.sm { padding: 11px 13px; }
.brain-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); }
.brain-rows { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--divider); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.risk-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); }

.market-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill,minmax(126px,1fr)); }
.market {
  position: relative; text-align: left; padding: 12px 13px;
  border-radius: var(--r-sm); border: 1px solid var(--border-solid);
  background: var(--canvas-deep); color: var(--text-2);
}
.market:hover { border-color: var(--border-strong); color: var(--text); }
.market.on { border-color: var(--violet-bright); background: var(--violet-wash); color: var(--text); }
.market-sym { display: block; font-size: 14px; font-weight: 600; }
.market-pair { display: block; margin-top: 2px; }
.market-tick { position: absolute; top: 9px; right: 10px; color: var(--violet-glow); font-size: 12px; }

.create-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; flex-wrap: wrap;
}
.dots { display: flex; gap: 6px; }
.dot-step { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); }
.dot-step.done { background: var(--violet-deep); }
.dot-step.on { background: var(--violet-bright); box-shadow: var(--glow-violet); }

.review-list { display: flex; flex-direction: column; }
.review-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--divider);
}
.review-row:last-child { border-bottom: 0; }

/* ---- the live preview panel ---- */
.preview-card {
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(106,49,221,.22), transparent 68%),
    var(--surface);
  border-color: var(--violet-line);
}
.preview-hero { text-align: center; padding: 6px 0 16px; }
.preview-hero .avatar.lg { margin: 0 auto; box-shadow: var(--glow-violet); }
.preview-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--divider);
  border: 1px solid var(--divider); border-radius: var(--r-sm); overflow: hidden;
}
.preview-cell { background: var(--canvas-deep); padding: 10px 11px; min-width: 0; }
.preview-cell .num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-note {
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--divider);
}

@media (max-width: 1280px) {
  .create-grid { grid-template-columns: 210px minmax(0,1fr); }
  .create-grid .rail { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .create-grid { grid-template-columns: 1fr; }
  .step-rail { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .step-rail::-webkit-scrollbar { display: none; }
  .step-item { flex: 0 0 auto; }
  .step-item .step-s { display: none; }
  .aside-card { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .step-card { padding: 16px; }
}

/* =====================================================================
   FUNDING
   ===================================================================== */

.fund-card { display: flex; flex-direction: column; gap: 13px; }
.fund-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}

/* ⚠️ A CAPACITY GAUGE, NOT A FUNDRAISING BAR. It fills toward CLOSED.
   A full bar means the creator's first-loss buffer cannot protect any
   more money — the opposite of a goal reached — so it goes to the
   warning colour rather than to green. */
.cap { display: flex; flex-direction: column; gap: 7px; }
.cap-nums { display: flex; align-items: baseline; gap: 7px; }
.cap-track {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--canvas-deep); border: 1px solid var(--border-solid);
}
.cap-fill { height: 100%; background: var(--violet-grad); border-radius: 999px;
  box-shadow: var(--glow-violet); }
.cap-fill.cap-full { background: linear-gradient(180deg,#F7BE4E,#C77F12); box-shadow: none; }
/* Evidence below the floor draws faint: "2 of 3" is 67% and means
   nothing, and a solid bar would say otherwise. */
.cap-fill.thin { background: var(--surface-3); box-shadow: none; }

@media (max-width: 560px) { .fund-stats { grid-template-columns: 1fr 1fr; } }

@media (max-width: 600px) {
  /* At 375px the header's own padding pushed its right-hand group a
     fraction past the edge, which is enough for the page to gain a
     horizontal scrollbar. A page that scrolls sideways on a phone hides
     content with no hint that it is there. */
  .app-header { padding: 0 12px; gap: 10px; }
  .header-right { min-width: 0; }
  .header-right .btn { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
}

/* =====================================================================
   TEACH + THE MIND
   ===================================================================== */

.teach-hello {
  flex: 1; min-width: 0; padding: 13px 15px; border-radius: var(--r);
  background: var(--canvas-deep); border: 1px solid var(--border-solid);
}
/* Each sentence of the briefing on its own line, with a left rule. It is
   a list of what the agent read, and a paragraph hides that. */
.brief-line {
  padding: 9px 0 9px 14px; border-left: 2px solid var(--violet-line);
  margin-bottom: 8px; font-size: 13.5px; color: var(--text-2);
}
.brief-line:last-child { margin-bottom: 0; }

/* The exact payload, monospaced and scrollable. Shown because "what did
   the model actually see" should not require trusting a summary. */
pre.sent {
  margin: 0; padding: 12px; border-radius: var(--r-sm);
  background: var(--canvas-deep); border: 1px solid var(--border-solid);
  font-size: 11.5px; line-height: 1.55; color: var(--text-2);
  max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
input[type="checkbox"] { width: auto; accent-color: var(--violet); }

/* =====================================================================
   RUN + THE PRIVATE RECORD
   ===================================================================== */

/* One decision, collapsed. Expanded it shows the briefing exactly as it
   was — a list of what the agent had read, not a paragraph. */
details.decision { border-bottom: 1px solid var(--divider); }
details.decision:last-child { border-bottom: 0; }
details.decision > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  cursor: pointer; list-style: none; font-size: 13px;
}
details.decision > summary::-webkit-details-marker { display: none; }
details.decision > summary:hover { background: var(--surface-2); }
details.decision > summary::after { content: "▾"; color: var(--text-4); font-size: 10px; }
details.decision[open] > summary::after { content: "▴"; }
details.decision[open] > summary { background: var(--surface-2); }
.decision-body { padding: 4px 15px 16px; background: var(--canvas-deep); }

/* =====================================================================
   BIRTH — the one moment in the product that is a moment
   ===================================================================== */

.birthing {
  max-width: 520px; margin: 0 auto; padding: 40px 20px 60px;
  display: flex; flex-direction: column; align-items: center;
}

/* The mark, breathing, inside a slowly turning ring. Two separate
   animations rather than one: a single spinner reads as "loading", and
   this is meant to read as something being made. */
.birth-orb {
  position: relative; width: 132px; height: 132px; margin-bottom: 26px;
  display: flex; align-items: center; justify-content: center;
}
.birth-orb img { width: 66px; height: auto; animation: breathe 2.6s ease-in-out infinite; }
.birth-orb::before, .birth-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.birth-orb::before {
  background: radial-gradient(circle, rgba(106,49,221,.36), transparent 68%);
  animation: breathe 2.6s ease-in-out infinite;
}
.birth-orb::after {
  border: 1px solid transparent;
  border-top-color: var(--violet-bright);
  border-right-color: rgba(139,92,246,.35);
  animation: turn 1.6s linear infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.09); opacity: 1 } }
@keyframes turn { to { transform: rotate(360deg) } }

.birth-steps { width: 100%; margin-top: 32px; display: flex; flex-direction: column; gap: 2px; }
.bs {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px; border-radius: var(--r);
  border: 1px solid transparent; transition: background .25s, border-color .25s;
}
.bs-title { display: block; font-size: 14px; color: var(--text-3); }
.bs-detail { display: block; margin-top: 2px; }
.bs-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--surface-3); transition: background .25s, box-shadow .25s;
}
.bs[data-state="doing"] {
  background: var(--violet-wash); border-color: var(--violet-line);
}
.bs[data-state="doing"] .bs-title { color: var(--text); }
.bs[data-state="doing"] .bs-dot {
  background: var(--violet-bright); box-shadow: 0 0 10px var(--violet-bright);
  animation: breathe 1.1s ease-in-out infinite;
}
.bs[data-state="done"] .bs-title { color: var(--text-2); }
.bs[data-state="done"] .bs-dot { background: var(--positive); box-shadow: var(--glow-green); }
/* ⚠️ A step that half-worked is amber, never green. Marking it done
   because it returned would make the summary that follows contradict
   the ceremony that preceded it. */
.bs[data-state="warn"] .bs-dot { background: var(--warning); }
.bs[data-state="warn"] .bs-title { color: var(--warning); }

@media (prefers-reduced-motion: reduce) {
  .birth-orb img, .birth-orb::before, .birth-orb::after, .bs-dot { animation: none; }
}

/* The bonding-curve price chart on an agent's Token tab. */
.curve-chart { width: 100%; min-height: 240px; }
.cc-axis {
  font-family: var(--mono); font-size: 9.5px; fill: var(--text-3);
}

/* Coin chips for scoping a taught rule. A chosen one must be obvious:
   a rule silently applying to everything is what this control exists
   to prevent. */
.tag.pick { cursor: pointer; border-color: var(--divider); }
.tag.pick:hover { border-color: var(--violet-line); }
.tag.pick.on {
  background: rgba(106,49,221,.22); border-color: var(--violet);
  color: #DDD6FE;
}