/* Hypha shared styles. "Living Mycelium" (owner-approved 2026-10-16): a living garden of light on a near-black night.
   Soft organic forms: rounded pods (20-32px), pill buttons, glow halos instead of hairlines, soft dark shadows (no blur on big layers).
   Geist for everything, Geist Mono only for addresses and code. The new component kit (comp CSS, scoped to .gx) is kit.css. */
:root{
  /* new tokens (approved comp) */
  --night-2:#0B0E10;--pod:#111619;--pod-2:#161C20;--pod-3:#1C2328;
  --mint:#65E6C4;--mint-deep:#2E9E83;--amber:#F2C14E;--ivory:#F2F4E8;--ink-2:#C3C9BE;--ink-3:#959C93;--lime:#B9EC6E;--red:#FF8A7A;
  --r-trader:#65E6C4;--r-bodyguard:#F2B04E;--r-analyst:#B9A2E8;--r-earner:#B9EC6E;--r-assistant:#7FCFF2;
  --rad-s:14px;--rad:22px;--rad-l:32px;
  --lift:0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.35);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  /* legacy names used by every view's CSS, mapped onto the new palette */
  --abyss:#07080A;--night:#0B0E10;--canopy:#111619;--raise:#1C2328;
  --mist:#F2F4E8;--mist-2:#C3C9BE;--mist-3:#959C93;
  --line:rgba(242,244,232,.07);--line-2:rgba(242,244,232,.13);
  --accent:#65E6C4;--up:#B9EC6E;--down:#FF8A7A;--bio:var(--accent);--spore:#B9A2E8;--ember:#F2C14E;--ash:#646f6c;--danger:var(--down);
  --r-sm:12px;--r:16px;--r-lg:24px;--r-xl:30px;
  --glass:linear-gradient(180deg,#161C20,#111619);--glass-2:#121719;--glass-3:#151B1E;--hair:rgba(242,244,232,.06);--hair-2:rgba(242,244,232,.1);
  --float-shadow:var(--lift);--ease:cubic-bezier(.16,1,.3,1);--t:260ms;
  --display:"Geist",ui-sans-serif,system-ui,sans-serif;--body:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#2B3439 var(--abyss)}
html,body{background:var(--abyss);color:var(--mist)}
body{margin:0;font:400 17px/1.55 var(--body);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--abyss)}
::selection{background:rgba(101,230,196,.32);color:var(--mist)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--abyss)}::-webkit-scrollbar-thumb{background:#262E33;border-radius:99px;border:3px solid var(--abyss)}
input,select,textarea,button{font:inherit;color:inherit;caret-color:var(--mint)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
img,canvas,svg{max-width:100%}
[hidden]{display:none!important}
em,i,cite{font-style:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.wrap{width:min(1240px,100% - 64px);margin-inline:auto}
@media (max-width:720px){body{font-size:16px}.wrap{width:calc(100% - 32px)}}
.mono{font-family:var(--mono)}
.muted{color:var(--mist-2)}
.faint{color:var(--mist-3)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font:500 .8rem/1.4 var(--body,system-ui);letter-spacing:0;color:var(--accent)}
.label{font:500 .78rem/1.4 var(--body,system-ui);letter-spacing:0;color:var(--mist-3)}
.t-ember{color:var(--ember)}.t-bio{color:var(--bio)}.t-spore{color:var(--spore)}.t-ash{color:var(--mist-3)}.t-danger{color:var(--danger)}
.t-up{color:var(--up)}.t-down{color:var(--down)}.t-accent{color:var(--accent)}
h1,h2,h3,h4{text-wrap:balance;font-weight:500;letter-spacing:-.02em}
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--accent)}
.display{font-family:var(--display)}

/* ---------- top bar (standalone pages, rendered by shell.js) ---------- */
.top{display:flex;align-items:center;gap:26px;padding-block:20px;position:relative;z-index:20;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:500 1.05rem/1 var(--mono);letter-spacing:.02em;text-decoration:none;text-transform:lowercase}
.brand svg{width:22px;height:22px}
.nav{display:flex;align-items:center;gap:22px;font-size:.88rem;color:var(--mist-2)}
.nav > a,.nav summary{text-decoration:none;cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav > a:hover,.nav summary:hover,.nav a[aria-current="page"]{color:var(--mist)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.isl-menu{position:relative}
.isl-menu summary::after{content:" \25BE";font-size:.75em;color:var(--mist-3)}
.isl-menu .menu{position:absolute;top:calc(100% + 12px);left:-16px;width:340px;background:var(--night);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:6px;display:grid;gap:2px}
.isl-menu .menu a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--mist)}
.isl-menu .menu a:hover,.isl-menu .menu a[aria-current="page"]{background:var(--raise)}
.isl-menu .menu b{font:500 .95rem/1.2 var(--body)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--mist);border-radius:var(--r);padding:8px 10px;font:500 .8rem/1 var(--mono);cursor:pointer}
.isle-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.isle-strip::-webkit-scrollbar{display:none}
.isle-strip a{flex:none;font:500 .78rem/1 var(--body,system-ui);letter-spacing:0;text-decoration:none;color:var(--mist-3);border:1px solid var(--line);border-radius:999px;padding:7px 11px}
.isle-strip a:hover{color:var(--mist);border-color:var(--line-2)}
.isle-strip a[aria-current="page"]{color:var(--abyss);background:var(--mist);border-color:var(--mist)}

/* ---------- buttons, chips (v3: pills; ONE primary per screen = mint) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--ctl-h,48px);font:500 .94rem/1 var(--body);letter-spacing:-.01em;padding:0 20px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;background:none;color:var(--mist);white-space:nowrap;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary,.btn-glow,.btn-accent{background:var(--lc-cta,var(--accent));color:var(--abyss);border-color:var(--accent)}
.btn-primary:hover,.btn-glow:hover,.btn-accent:hover{background:#84edd0;border-color:#84edd0;color:var(--abyss)}
.btn-ember{background:var(--ember);color:var(--abyss);border-color:var(--ember)}
.btn-ember:hover{background:#f6cf6e;border-color:#f6cf6e}
.btn-spore{background:var(--spore);color:var(--abyss);border-color:var(--spore)}
.btn-spore:hover{background:#c9b8ee;border-color:#c9b8ee}
.btn-ghost,.btn-secondary{border-color:rgba(242,244,232,.24);background:transparent;color:var(--mist)}
.btn-ghost:hover,.btn-secondary:hover{border-color:rgba(242,244,232,.5);background:rgba(242,244,232,.05);color:var(--mist)}
.btn-danger{border-color:rgba(255,92,92,.5);color:var(--danger)}
.btn-danger:hover{background:rgba(255,92,92,.08)}
.btn-sm{min-height:var(--ctl-h-s,40px);padding:0 14px;font-size:.84rem}
.btn-lg{min-height:var(--ctl-h-l,56px);padding:0 28px;font-size:1.06rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* round action: 64px circle + label under it (Add funds / Pause / Edit limits) */
.btn-round{display:inline-flex;flex-direction:column;align-items:center;gap:12px;width:104px;background:none;border:0;padding:0;cursor:pointer;color:var(--mist-2);font:500 .875rem/1.2 var(--body);text-decoration:none;text-align:center}
.btn-round > .o{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(14,15,19,.6);border:1px solid rgba(242,244,232,.22);color:var(--mist);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform .15s var(--ease)}
.btn-round > .o svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-round:hover > .o{border-color:rgba(242,244,232,.5);background:rgba(24,25,30,.7)}
.btn-round:active > .o{transform:scale(.95)}
.btn-round.primary{color:var(--mist)}
.btn-round.primary > .o{background:var(--lc-cta,var(--accent));border-color:var(--accent);color:var(--abyss)}
.btn-round.primary:hover > .o{background:#84edd0}
.btn-round:focus-visible{outline:none}.btn-round:focus-visible > .o{outline:2px solid var(--accent);outline-offset:3px}
.btn-round[disabled]{opacity:.45;cursor:not-allowed}
.round-row{display:flex;gap:14px;flex-wrap:wrap}
/* chips: small pills; .status = dot + label (lime "Running · inside your limits") */
.chip{font:500 .78rem/1 var(--body);letter-spacing:0;color:var(--mist-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:rgba(242,244,232,.03)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.quiet{border-color:transparent;background:rgba(242,244,232,.07)}
.chip.t-bio,.chip.t-ember,.chip.t-spore,.chip.t-ash,.chip.t-danger,.chip.t-up{border-color:color-mix(in srgb,currentColor 35%,transparent);background:color-mix(in srgb,currentColor 8%,transparent)}
.chip.t-bio{color:var(--bio)}.chip.t-ember{color:var(--ember)}.chip.t-spore{color:var(--spore)}.chip.t-ash{color:var(--mist-3)}.chip.t-danger{color:var(--danger)}.chip.t-up{color:var(--up)}
.status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:999px;font:500 .8125rem/1 var(--body);white-space:nowrap;color:var(--up);background:rgba(195,245,107,.08);border:1px solid rgba(195,245,107,.24);font-variant-numeric:tabular-nums}
.status > i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);flex:none}
.status.live > i{animation:uiBeat 2.4s ease-in-out infinite}
.status.t-bio{color:var(--accent);background:rgba(101,230,196,.08);border-color:rgba(101,230,196,.26)}
.status.t-spore{color:var(--spore);background:rgba(185,162,232,.08);border-color:rgba(185,162,232,.28)}
.status.t-ash{color:var(--mist-2);background:rgba(242,244,232,.05);border-color:var(--line-2)}
.status.t-down,.status.t-danger{color:var(--down);background:rgba(255,92,92,.08);border-color:rgba(255,92,92,.3)}
.status.t-ember{color:var(--ember);background:rgba(242,193,78,.08);border-color:rgba(242,193,78,.3)}
@keyframes uiBeat{50%{box-shadow:0 0 0 7px color-mix(in srgb,currentColor 4%,transparent)}}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;vertical-align:1px}

/* ---------- page header (standalone pages) ---------- */
.ihead{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center;padding-block:28px 40px;min-height:360px}
.ihead h1{font:500 clamp(2.4rem,4.8vw,4.4rem)/1 var(--display);letter-spacing:-.03em;margin:14px 0 16px}
.ihead h1 em{font-style:normal;font-weight:500;color:var(--accent)}
.ihead .lede{color:var(--mist-2);font-size:1.06rem;max-width:34em;margin:0 0 22px}
.ihead .actions{display:flex;flex-wrap:wrap;gap:10px}
.scene{position:relative;height:340px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--night)}
.scene canvas{display:block;width:100%;height:100%}
.scene .caption{position:absolute;left:16px;bottom:12px;right:16px;font:400 .76rem/1.4 var(--mono);color:var(--mist-2);pointer-events:none}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-block:1px solid var(--line)}
.stat{padding:18px 18px 16px;border-left:1px solid var(--line);min-width:0}
.stat:first-child{border-left:0;padding-left:0}
.stat .v{font:400 clamp(1.4rem,2.2vw,1.9rem)/1.15 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.stat .sub{font:400 .72rem/1.4 var(--mono);color:var(--mist-3);margin-top:2px}

/* ---------- panels & layout ---------- */
.section{padding-block:44px 8px}
.section > h2,.h2{font:500 clamp(1.6rem,2.8vw,2.2rem)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 8px}
.section > .intro{color:var(--mist-2);max-width:40em;margin:0 0 24px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.panel{background:var(--night);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-width:0}
.panel.glow{border-color:rgba(101,230,196,.45)}
.panel h3{font:500 1.12rem/1.25 var(--display);letter-spacing:-.015em;margin:0 0 4px}
.panel .hint{color:var(--mist-3);font-size:.86rem;margin:0 0 14px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.stack{display:grid;gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- key/value ---------- */
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.kv > div{padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.kv > div:nth-child(odd){padding-right:14px}
.kv > div:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
.kv .v{margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.list{list-style:none;margin:0;padding:0}
.list > li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.list > li:last-child{border-bottom:0}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th{font:500 .78rem/1 var(--body,system-ui);letter-spacing:0;color:var(--mist-3);text-align:left;padding:12px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--mist-2)}
table.t tr:hover td{background:rgba(242,244,232,.03)}
table.t .r{text-align:right;padding-right:0}
table.t td.r{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--mist);white-space:nowrap}
table.t .agent{font:500 .9rem/1.2 var(--mono);color:var(--mist);white-space:nowrap;text-decoration:none}
table.t a.agent:hover{color:var(--accent)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mist-3);font:500 .88rem/1 var(--body);padding:12px 14px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--mist-2)}
.tabs button[aria-selected="true"]{color:var(--mist);border-bottom-color:var(--accent)}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;min-width:0}
.field > span{font:500 .78rem/1.4 var(--body,system-ui);letter-spacing:0;color:var(--mist-3)}
:where(.input,select.input,textarea.input){width:100%;background:var(--abyss);border:1px solid var(--line-2);border-radius:var(--r);color:var(--mist);font:400 .95rem/1.4 var(--body);padding:11px 13px}
:where(.input)::placeholder{color:var(--mist-3)}
:where(textarea.input){min-height:96px;resize:vertical}
:where(.input:focus){outline:none;border-color:var(--accent)}
.input-unit{position:relative}
.input-unit .input{padding-right:64px;font-family:var(--mono)}
.input-unit b{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:500 .75rem/1 var(--mono);color:var(--mist-3)}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.toggle input{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--raise);border:1px solid var(--line-2);position:relative;cursor:pointer;flex:none;transition:background .15s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--mist-2);transition:transform .15s}
.toggle input:checked{background:var(--accent);border-color:var(--accent)}
.toggle input:checked::after{transform:translateX(16px);background:var(--abyss)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);padding:2px;gap:2px}
.seg button{background:none;border:0;color:var(--mist-2);font:500 .82rem/1 var(--body);padding:8px 12px;border-radius:var(--r-sm);cursor:pointer}
.seg button:hover{color:var(--mist)}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--mist);box-shadow:inset 0 -2px 0 var(--accent)}
.tag{display:inline-block;font:400 .74rem/1 var(--mono);padding:6px 8px;border-radius:var(--r-sm);background:var(--canopy);border:1px solid var(--line);color:var(--mist-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- bars & meters ---------- */
.bar{height:4px;border-radius:1px;background:rgba(242,244,232,.10);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:1px}
.bar.ember i{background:var(--ember)}
.bar.spore i{background:var(--spore)}
.bar.up i{background:var(--up)}
.spark{display:block;width:100%;height:48px}
.spark path.l{fill:none;stroke:var(--accent);stroke-width:1.4}
.spark path.a{stroke:none;fill:rgba(101,230,196,.08)}
.spark circle{fill:var(--accent)}

/* ---------- agent mini ---------- */
.amini{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.amini .glyph{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:none}
.amini .glyph::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.amini b{font:500 .88rem/1.2 var(--mono);color:var(--mist);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amini:hover b{color:var(--accent)}
.amini small{font:400 .68rem/1.3 var(--mono);color:var(--mist-3);display:block}

/* ---------- footer ---------- */
.foot{margin-top:90px;border-top:1px solid var(--line);padding-block:26px 40px;color:var(--mist-3);font-size:.84rem;display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}
.foot p{margin:0;max-width:62em}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--mist)}

@media (max-width:980px){
  .ihead{grid-template-columns:1fr;min-height:0}
  .scene{height:280px}
  .cols,.cols-2{grid-template-columns:1fr}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--night);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:6px}
  .nav.open{display:flex}
  .nav > a,.nav summary{padding:12px 10px}
  .isl-menu .menu{position:static;width:auto;border:0;background:none;padding:0 0 0 8px}
  .menu-btn{display:inline-flex}
  .top-r .chip{display:none}
}
@media (max-width:480px){.top-r .btn-glow{display:none}}
@media (max-width:620px){
  .cols-3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv > div:nth-child(odd),.kv > div:nth-child(even){padding:10px 0;border-left:0}
  .stat{border-left:0;padding-left:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.chip.t-down{color:var(--down);border-color:color-mix(in srgb,currentColor 45%,transparent)}
table.t td.r .t-up,table.t td.r.t-up{color:var(--up)}table.t td.r .t-down,table.t td.r.t-down,table.t td.r .t-danger,table.t td.r.t-danger{color:var(--down)}

/* =====================================================================================================
   v3 PRIMITIVES ("Immersive world + Robinhood polish"). The network (world.js) renders full-screen behind
   everything; these layers float over it. JS helpers for all of them live in views/ui.js (window.UI).
   ===================================================================================================== */
/* pages flow under the sticky nav: --top is the gap under it, --dock-h the space the phone tab bar needs */
:root{--hud-h:24px;--top:24px;--dock-h:32px;--gutter:clamp(20px,5vw,64px)}
@media (max-width:860px){:root{--top:16px;--dock-h:calc(env(safe-area-inset-bottom,0px) + 96px);--gutter:16px}}

/* .layer: full-viewport container above the world; only its children take pointer events */
.layer{position:fixed;inset:0;z-index:25;pointer-events:none}
.layer > *{pointer-events:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* .glass: the one floating-surface recipe (cards, pills, bubbles) */
.glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,244,232,.10)}

/* .scrim: dims the world under a modal sheet */
.scrim{position:fixed;inset:0;z-index:58;background:rgba(7,8,10,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:uiFade .2s ease-out}
.scrim[hidden]{display:none}

/* .sheet: floating glass panel. Variants --side (right panel desktop / bottom sheet mobile), --center (modal card), --full (long pages) */
.sheet{position:fixed;z-index:60;background:var(--glass-2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--float-shadow);color:var(--mist);display:flex;flex-direction:column;overflow:hidden}
.sheet:focus{outline:none}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 32px 32px;scrollbar-width:thin;scrollbar-color:rgba(242,244,232,.16) transparent}
.sheet-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.sheet-head h2{margin:0;flex:1;font:500 1.75rem/1.1 var(--display);letter-spacing:-.03em}
.sheet-head p{margin:6px 0 0;color:var(--mist-2);font-size:.9rem}
.sheet-x{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(242,244,232,.07);color:var(--mist-2);display:grid;place-items:center;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.sheet-x:hover{background:rgba(242,244,232,.12);color:var(--mist)}
.sheet-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sheet > .sheet-x{position:absolute;top:22px;right:22px;z-index:3}
.grabber{display:none;flex:none;height:22px;cursor:grab;touch-action:none;position:relative}
.grabber::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(242,244,232,.28)}
.sheet--side{top:calc(var(--top) + 4px);right:32px;bottom:var(--dock-h);width:clamp(440px,36vw,520px);border-radius:32px;background:var(--glass-3);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:var(--hair-2);animation:uiSideIn .35s var(--ease)}
.sheet--side .sheet-body{padding:34px 36px 36px}
.sheet--center{top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 64px);animation:uiPop .3s var(--ease)}
.sheet--full{top:calc(var(--top) + 4px);bottom:var(--dock-h);left:max(24px,calc((100vw - 1180px) / 2));right:max(24px,calc((100vw - 1180px) / 2));animation:uiRise .35s var(--ease)}
.sheet--full .sheet-body{padding:44px clamp(24px,5vw,64px) 64px}
.sheet--full > .sheet-x{top:20px;right:20px}
.sheet.closing{opacity:0;transition:opacity .2s ease-out,transform .2s ease-out}
@media (max-width:768px){
  .sheet--side,.sheet--full,.sheet--bottom{left:0;right:0;bottom:0;top:var(--snap,44%);width:auto;border-radius:30px 30px 0 0;border-width:1px 0 0;border-color:var(--hair-2);background:var(--lc-s-card,rgba(12,13,16,.9));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:uiUp .35s var(--ease);transition:top .3s var(--ease)}
  .sheet--full{--snap:calc(env(safe-area-inset-top,0px) + 56px)}
  .sheet.dragging{transition:none}
  .sheet--side .grabber,.sheet--full .grabber,.sheet--bottom .grabber{display:block}
  .sheet--side .sheet-body,.sheet--full .sheet-body,.sheet--bottom .sheet-body{padding:6px 20px calc(var(--dock-h) + 24px)}
  .sheet > .sheet-x{top:18px;right:16px;width:36px;height:36px}
  .sheet-head h2{font-size:1.5rem}
}
@media (min-width:769px){.sheet--bottom{left:50%;bottom:var(--dock-h);transform:translateX(-50%);width:min(640px,calc(100vw - 48px));max-height:calc(100dvh - var(--top) - var(--dock-h));animation:uiRise .3s var(--ease)}}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
@keyframes uiSideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes uiPop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes uiRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes uiUp{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}

/* .stage: cinematic full-screen overlay (world blurred + dimmed) for flows like Start an agent */
.stage{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--top) + 8px) var(--gutter) calc(var(--dock-h) + 8px);background:var(--lc-s-code,rgba(7,8,10,.5));backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);overflow-y:auto;animation:uiFade .35s ease-out}

/* .hero-num: one huge confident number; decimals in --mist-2 */
.hero-num{font:500 clamp(56px,7.8vw,112px)/.9 var(--display);letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--mist);white-space:nowrap}
.hero-num .cur{font-size:.57em;vertical-align:.6em;letter-spacing:-.02em;margin-right:.04em}
.hero-num .dec{color:var(--mist-2)}
.hero-num .unit{font-size:.36em;letter-spacing:-.01em;color:var(--mist-2);font-weight:500;margin-left:.12em}
.hero-num.up{color:var(--up)}.hero-num.down{color:var(--down)}.hero-num.spore{color:var(--spore)}
.hero-num.md{font-size:clamp(48px,6.4vw,92px)}
.hero-num.sm{font-size:clamp(36px,4vw,56px);letter-spacing:-.045em}
.delta{margin-top:16px;display:flex;align-items:center;gap:10px;font:500 1.25rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--mist-2)}
.delta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.delta.up{color:var(--up)}.delta.down{color:var(--down)}
.delta .pc{opacity:.8}.delta .when{color:var(--mist-2);font-weight:400}
@media (max-width:768px){.delta{font-size:1rem;margin-top:12px;gap:8px}}

/* .cards: horizontal strip of tappable cards (title, big number, tiny visual) */
.cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 6px;margin:-2px -2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.cards::-webkit-scrollbar{display:none}
.cards > .card{flex:0 0 276px;height:156px;scroll-snap-align:start;box-sizing:border-box;padding:20px 20px 18px 22px;border-radius:var(--r-xl);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,244,232,.10);color:var(--mist);text-align:left;display:flex;flex-direction:column;cursor:pointer;text-decoration:none;font:inherit;transition:border-color var(--t) var(--ease),transform .15s var(--ease),background var(--t) var(--ease)}
.cards > .card:hover{border-color:rgba(242,244,232,.22);background:rgba(18,19,24,.72)}
.cards > .card:active{transform:scale(.985)}
.card .c-t{display:flex;justify-content:space-between;align-items:center;width:100%;font:500 .875rem/1 var(--body);color:var(--mist-2)}
.card .c-t svg{width:18px;height:18px;fill:none;stroke:var(--mist-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .c-n{margin-top:26px;font:500 2.5rem/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card .c-n small{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:var(--mist-2)}
.card .c-n .of{color:var(--mist-3)}
.card .c-s{margin-top:auto;font:400 .8125rem/1.3 var(--body);color:var(--mist-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .c-v{margin-top:auto;width:100%}
.card.spore .c-t{color:var(--spore)}.card.spore .c-n{color:var(--spore)}
.card.up .c-n{color:var(--up)}
@media (max-width:768px){.cards{gap:10px}.cards > .card{flex-basis:148px;height:76px;padding:14px 14px 12px 15px;border-radius:18px}.card .c-t{font-size:.8rem}.card .c-t svg{display:none}.card .c-n{margin-top:auto;font-size:1.4rem}.card .c-n small{font-size:.9rem}.card .c-s,.card .c-v{display:none}}
/* promise dots */
.pdots{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.pdots i{width:9px;height:9px;border-radius:50%;background:var(--up);flex:none}
.pdots i.b{width:7px;height:7px;margin:1px;background:none;border:1px solid var(--down)}
.pdots i.o{width:7px;height:7px;margin:1px;background:none;border:1px solid var(--mist-3)}
/* stacked share bar (Holdings) */
.sharebar{display:flex;width:100%;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.sharebar i{display:block;height:100%}

/* .bubble: the agent speaking in first person. .spore = Mycelium-informed */
.bubble{box-sizing:border-box;padding:18px 22px 20px;border-radius:22px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,244,232,.10);color:var(--mist);max-width:460px}
.bubble .b-l{display:flex;align-items:center;gap:8px;font:500 .8125rem/1 var(--body);color:var(--accent)}
.bubble .b-l .dots{display:flex;gap:4px}
.bubble .b-l .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:uiDots 1.2s ease-in-out infinite}
.bubble .b-l .dots i:nth-child(2){animation-delay:.15s}.bubble .b-l .dots i:nth-child(3){animation-delay:.3s}
.bubble .b-l svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bubble .b-l time{margin-left:auto;color:var(--mist-3);font-weight:400}
.bubble p{margin:12px 0 0;font:500 1.1875rem/1.4 var(--body);letter-spacing:-.01em}
.bubble.sm{padding:13px 16px 14px;border-radius:6px 20px 20px 20px;background:rgba(242,244,232,.06);border-color:rgba(242,244,232,.06);backdrop-filter:none;-webkit-backdrop-filter:none;max-width:none}
.bubble.sm p{margin:0;font:400 .9375rem/1.4 var(--body)}
.bubble.sm .b-l{margin-bottom:8px;font-size:.75rem}
.bubble.spore{background:rgba(185,162,232,.10);border-color:rgba(185,162,232,.28)}
.bubble.spore .b-l{color:var(--spore)}
.bubbles{display:flex;flex-direction:column;gap:10px}
.bubble-row{display:flex;align-items:flex-end;gap:12px}
.bubble-row > .bubble{flex:1;min-width:0}
.bubble-row > time{flex:none;width:26px;padding-bottom:6px;text-align:right;font:400 .75rem/1 var(--body);color:var(--mist-3)}
@keyframes uiDots{0%,100%{opacity:.3}50%{opacity:1}}
@media (max-width:768px){.bubble{padding:14px 16px;border-radius:18px}.bubble p{font-size:1rem}}

/* .pulse-tag: tiny floating world labels ("kite-07 bought NVDA  now") that fade */
.pulse-tag{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:999px;background:rgba(14,15,19,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(242,244,232,.10);font:400 .8125rem/1 var(--body);white-space:nowrap;color:var(--mist-2);text-decoration:none;transition:opacity .6s ease-out,transform .6s var(--ease)}
.pulse-tag > i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.pulse-tag > b{color:var(--mist);font-weight:500}
.pulse-tag > time{color:var(--mist-3);font-size:.75rem}
.pulse-tag.spore > i{background:var(--spore)}.pulse-tag.ember > i{background:var(--ember)}.pulse-tag.up > i{background:var(--up)}
.pulse-tag.out{opacity:0;transform:translateY(-6px)}
/* the name label next to a node ("gannet-26 / Saved for you") */
.node-tag{padding:9px 13px 10px;border-radius:14px;background:rgba(10,11,14,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(242,244,232,.10);white-space:nowrap;text-decoration:none;color:var(--mist)}
.node-tag b{display:block;font:500 1rem/1 var(--body);letter-spacing:-.01em}
.node-tag span{display:block;margin-top:5px;font:400 .75rem/1 var(--body);color:var(--accent)}

/* .toast + .burst: delight moments */
.toast{position:fixed;z-index:95;left:50%;top:calc(env(safe-area-inset-top,0px) + 22px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:min(440px,calc(100vw - 32px));min-height:52px;padding:12px 18px;border-radius:20px;background:rgba(14,15,19,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,244,232,.12);box-shadow:0 20px 60px rgba(0,0,0,.5);color:var(--mist);font:400 .9rem/1.35 var(--body);animation:uiToast .35s var(--ease)}
.toast[hidden]{display:none}
.toast b{color:var(--accent);font-weight:500}
.toast .t-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--up);color:var(--abyss)}
.toast .t-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.toast .t-tx{flex:1;min-width:0}
.toast .t-tx strong{display:block;font:500 1rem/1.2 var(--body);color:var(--mist)}
.toast .t-tx span{display:block;margin-top:3px;color:var(--mist-2);font-size:.85rem}
.toast .t-n{flex:none;font:500 1.125rem/1 var(--display);color:var(--up);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.toast.spore .t-ic{background:var(--spore)}.toast.mint .t-ic{background:var(--accent)}.toast.down .t-ic{background:var(--down)}
.toast .t-tx strong,.toast .t-tx span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:pretty}
@media (max-width:768px){
  .toast{left:12px;right:12px;width:auto;max-width:none;transform:none;gap:12px;padding:10px 14px 10px 10px;border-radius:18px;animation-name:uiToastM}
  .toast .t-ic{width:36px;height:36px}.toast .t-ic svg{width:17px;height:17px}
  .toast .t-tx strong{font-size:.94rem;line-height:1.25}.toast .t-tx span{font-size:.8rem;margin-top:2px}
}
@keyframes uiToastM{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes uiToast{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.burst{position:fixed;z-index:96;left:0;top:0;width:0;height:0;pointer-events:none}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--up);animation:uiBurst .9s cubic-bezier(.1,.7,.3,1) forwards}
.burst i.ray{width:2px;height:16px;left:-1px;top:-8px;border-radius:1px}
.burst .ring{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:1.5px solid var(--up);animation:uiRing .8s ease-out forwards}
@keyframes uiBurst{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.4);opacity:0}}
@keyframes uiRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* .empty: friendly empty state with one action */
.empty{text-align:center;padding:36px 20px;color:var(--mist-2)}
.empty .e-g{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(101,230,196,.08);border:1px solid rgba(101,230,196,.28);color:var(--accent)}
.empty .e-g svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.empty h3{margin:0 0 6px;font:500 1.25rem/1.2 var(--display);color:var(--mist);letter-spacing:-.02em}
.empty p{margin:0 auto 20px;max-width:28em;font-size:.94rem}

/* big tiles (Discover / More) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;min-height:168px;padding:20px 20px 18px 22px;border-radius:var(--r-xl);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,244,232,.10);color:var(--mist);text-decoration:none;overflow:hidden;transition:border-color var(--t) var(--ease),transform .15s var(--ease),background var(--t) var(--ease)}
.tile:hover{border-color:rgba(242,244,232,.24);background:rgba(18,19,24,.74)}
.tile:active{transform:scale(.985)}
.tile .g{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(101,230,196,.08);border:1px solid rgba(101,230,196,.26);color:var(--accent)}
.tile .g svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile b{margin-top:auto;padding-top:22px;font:500 1.1875rem/1.2 var(--display);letter-spacing:-.02em}
.tile small{display:block;margin-top:5px;font:400 .84rem/1.35 var(--body);color:var(--mist-2)}
.tile .soon{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:rgba(242,244,232,.07);font:500 .72rem/1 var(--body);color:var(--mist-2)}
.tile .soon svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.tile.locked .g{background:rgba(242,244,232,.04);border-color:rgba(242,244,232,.12);color:var(--mist-3)}
.tile.locked b{color:var(--mist-2)}.tile.locked small{color:var(--mist-3)}
.tile.spore .g{background:rgba(185,162,232,.08);border-color:rgba(185,162,232,.28);color:var(--spore)}
.tile.big{min-height:212px}
.tile.big b{font-size:1.5rem}
@media (max-width:768px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{min-height:132px;padding:16px;border-radius:20px}.tile .g{width:42px;height:42px}.tile .g svg{width:20px;height:20px}.tile b{font-size:1rem;padding-top:14px}.tile small{font-size:.76rem}.tile .soon{top:14px;right:14px}.tile.big{min-height:150px}.tile.big b{font-size:1.125rem}}

/* range tabs (1D 1W 1M ...) */
.range{display:flex;gap:6px}
.range button{height:32px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--mist-3);font:500 .8125rem/1 var(--body);cursor:pointer}
.range button:hover{color:var(--mist)}
.range button[aria-selected="true"]{background:rgba(195,245,107,.12);color:var(--up)}

@media (prefers-reduced-motion:reduce){
  .sheet,.scrim,.stage,.toast,.status.live > i,.bubble .b-l .dots i,.cards > .card,.tile{animation:none!important;transition:none!important}
  .burst{display:none}
  .pulse-tag{transition:opacity .2s linear}
}
/* cinematic mode (UI.stage / def.cover): the stage sits alone over a blurred world */

/* =====================================================================================================
   LIVING MYCELIUM RESTYLE LAYER (2026-10-16). Every older view keeps its markup; these rules move the shared
   primitives into the new world: pill buttons, rounded pods with soft lift instead of hairline boxes, tinted pills
   instead of outlined chips, ivory speech bubbles, no backdrop blur anywhere (nothing animates behind pages now).
   ===================================================================================================== */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.025em}
h1{letter-spacing:-.035em}
.glass{background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:var(--lift),inset 0 1px 0 rgba(242,244,232,.05)}
.view *,.sheet,.sheet *,.scrim,.toast,.qj,.qj *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.muted{color:var(--mist-2)}.faint{color:var(--mist-3)}
.eyebrow{font:500 .82rem/1.4 var(--body);color:var(--mist-3);letter-spacing:.02em}
/* buttons: the comp's pills */
.btn{min-height:var(--ctl-h,48px);padding:0 22px;gap:8px;font:500 1rem/1 var(--body);letter-spacing:-.005em;border:0;background:var(--pod-3);color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(242,244,232,.08);transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:#242D33;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px}
.btn-primary,.btn-glow,.btn-accent,.btn.mint{background:var(--mint);color:#05231B;font-weight:500;box-shadow:0 10px 24px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover,.btn-glow:hover,.btn-accent:hover,.btn.mint:hover{background:#7FEFD1;color:#05231B}
.btn-ember{background:var(--amber);color:#2A1E02;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.btn-spore{background:var(--spore);color:#1A1130;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost,.btn-secondary,.btn.ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(242,244,232,.16)}
.btn-ghost:hover,.btn-secondary:hover,.btn.ghost:hover{background:rgba(101,230,196,.06);box-shadow:inset 0 0 0 1.5px rgba(101,230,196,.5);color:var(--ivory)}
.btn-danger{background:rgba(255,138,122,.1);color:var(--red);box-shadow:inset 0 0 0 1.5px rgba(255,138,122,.35)}
.btn-sm,.btn.sm{min-height:var(--ctl-h-s,40px);padding:0 16px;font-size:.94rem}
.btn-lg,.btn.lg{min-height:var(--ctl-h-l,56px);padding:0 32px;font-size:1.19rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn-round > .o{background:var(--pod-3);border:0;box-shadow:var(--lift),inset 0 0 0 1px rgba(242,244,232,.08)}
.btn-round:hover > .o{background:#242D33}
.btn-round.primary > .o{background:var(--mint);color:#05231B;box-shadow:0 10px 24px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35)}
/* chips and status: tinted pills, no outlines */
.chip{font:500 .82rem/1 var(--body);height:28px;padding:0 12px;border:0;background:rgba(242,244,232,.06);color:var(--mist-2)}
.chip.quiet{background:rgba(242,244,232,.05)}
.chip.t-bio,.chip.t-ember,.chip.t-spore,.chip.t-ash,.chip.t-danger,.chip.t-up,.chip.t-down{border:0;background:color-mix(in srgb,currentColor 13%,transparent)}
.status{height:30px;padding:0 13px;border:0;font:500 .875rem/1 var(--body);color:var(--mint);background:rgba(101,230,196,.12)}
.status > i{width:8px;height:8px;box-shadow:none}
.status.t-bio{background:rgba(101,230,196,.12);border:0}.status.t-spore{background:rgba(185,162,232,.13);border:0}.status.t-ash{background:rgba(242,244,232,.07);border:0}
.status.t-down,.status.t-danger{background:rgba(255,138,122,.12);border:0}.status.t-ember{background:rgba(242,193,78,.12);border:0}
@keyframes uiBeat{50%{opacity:.45}}
.tag{font:500 .8rem/1 var(--mono);padding:6px 10px;border-radius:999px;background:rgba(242,244,232,.06)}
/* pods: panels, cards, tiles, bubbles */
.panel{background:linear-gradient(180deg,var(--pod-2),var(--pod));border:0;border-radius:28px;padding:24px;box-shadow:var(--lift),inset 0 1px 0 rgba(242,244,232,.05)}
.panel.glow{box-shadow:var(--lift),inset 0 0 0 1.5px rgba(101,230,196,.4)}
.panel h3{font:500 1.2rem/1.25 var(--display)}
.cards > .card{border:0;border-radius:26px;background:linear-gradient(180deg,var(--pod-2),var(--pod));box-shadow:var(--lift),inset 0 1px 0 rgba(242,244,232,.05)}
.cards > .card:hover{background:linear-gradient(180deg,#1A2126,#13191C);box-shadow:var(--lift),inset 0 0 0 1.5px rgba(101,230,196,.25)}
.card .c-n{font-weight:500}
.tile{border:0;border-radius:30px;background:linear-gradient(180deg,var(--pod-2),var(--pod));box-shadow:var(--lift),inset 0 1px 0 rgba(242,244,232,.05)}
.tile:hover{background:linear-gradient(180deg,#1A2126,#13191C);box-shadow:var(--lift),inset 0 0 0 1.5px rgba(101,230,196,.25)}
.tile .g{border:0;background:rgba(101,230,196,.1)}.tile.spore .g{border:0;background:rgba(185,162,232,.12)}.tile.locked .g{border:0}
.empty .e-g{border:0;background:rgba(101,230,196,.1)}
.bubble{background:#EEF1E6;color:#0B1210;border:0;border-radius:22px 22px 22px 8px;box-shadow:0 12px 28px -12px rgba(0,0,0,.8)}
.bubble .b-l{color:#2E6B5C}.bubble .b-l time{color:#5B6B65}
.bubble.sm{background:var(--pod-3);color:var(--ivory);border-radius:20px 20px 20px 6px;box-shadow:none}
.bubble.sm .b-l{color:var(--mint)}
.bubble.spore{background:rgba(185,162,232,.16);color:var(--ivory)}.bubble.spore .b-l{color:var(--spore)}
.node-tag,.pulse-tag{border:0;background:rgba(17,22,25,.92);box-shadow:var(--lift)}
/* stats, tables, tabs, forms */
.stats{border:0;border-radius:30px;padding:8px;background:linear-gradient(180deg,var(--pod-2),var(--pod));box-shadow:var(--lift)}
.stat{border-left:0!important;padding:12px 16px!important;border-radius:22px}
.stat + .stat{box-shadow:-1px 0 0 rgba(242,244,232,.06)}
.stat .v{font:500 clamp(1.4rem,2.2vw,1.9rem)/1.15 var(--body);font-variant-numeric:tabular-nums}
.stat .sub{font:400 .82rem/1.4 var(--body)}
table.t th{font:500 .82rem/1 var(--body);border-bottom:0;padding-bottom:8px}
table.t td{border-bottom:1px solid var(--line)}
table.t td.r{font-family:var(--body)}
table.t .agent{font:500 .95rem/1.2 var(--body)}
.tabs{gap:6px;border-bottom:0;padding:6px;border-radius:999px;background:var(--pod);box-shadow:var(--lift);width:max-content;max-width:100%}
.tabs button,.tabs a{border:0!important;border-radius:999px;padding:10px 16px!important;color:var(--mist-3)}
.tabs button[aria-selected="true"],.tabs a[aria-selected="true"]{background:var(--pod-3);color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(101,230,196,.35)}
:where(.input,select.input,textarea.input){border:0;border-radius:16px;background:var(--night);box-shadow:inset 0 0 0 1.5px rgba(242,244,232,.12);min-height:46px}
:where(.input:focus){box-shadow:inset 0 0 0 1.5px rgba(101,230,196,.6)}
.seg{border:0;border-radius:999px;padding:4px;background:var(--pod)}
.seg button{border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--pod-3);box-shadow:inset 0 0 0 1.5px rgba(101,230,196,.35)}
.bar{height:8px;border-radius:99px}.bar i{border-radius:99px}
.amini b,.amini small{font-family:var(--body)}
/* dialogs (UI.sheet): centred pods over a plain dim, bottom sheet on phones */
.scrim{background:rgba(5,6,8,.66)}
.sheet{background:linear-gradient(180deg,var(--pod-2),var(--pod));border:0;border-radius:32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(242,244,232,.06)}
.sheet-x{background:var(--pod-3)}
.toast{background:var(--pod-3);border:0;box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.hero-num{font-weight:500}
/* the comps never colour a word inside a heading: emphasis comes from weight and size */
.view h1 em,.view h2 em,.view h3 em,.view h4 em{color:inherit!important}
/* H.mx side panels (promises.js) for focused tasks (limits, withdraw, add funds, AI credit, records): pods under the nav */
body .mx-sheet{top:96px;right:20px;bottom:20px;background:linear-gradient(180deg,var(--pod-2),var(--pod));border:0;border-radius:32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(242,244,232,.06);-webkit-backdrop-filter:none;backdrop-filter:none}
body .mx-scrim{background:rgba(5,6,8,.55)}
body .mx-x{border:0;background:var(--pod-3)}
@media (max-width:768px){body .mx-sheet{top:auto;right:0;left:0;border-radius:28px 28px 0 0}}
/* side task panels (UI.sheet --side) sit under the sticky nav, never over it */
@media (min-width:769px){.sheet--side{top:96px;bottom:20px;right:20px}}