/* Surreal console — dark-first. Shell:300px sidebar · top bar · main · 34px status bar */
:root{
  /* ---------------------------------------------------------------------------
     SURREAL DESIGN SYSTEM

     Surfaces are one base colour plus translucent layers, not six hand-picked
     hexes. Depth then stays coherent at every nesting level and the whole theme
     inverts by flipping the layer colour from white to black.
     --------------------------------------------------------------------------- */
  --base:#0a0912;
  --layer:255,255,255;
  --bg:var(--base);
  --bg2:rgb(255 255 255/.018);
  --panel:rgb(var(--layer)/.030);
  --panel2:rgb(var(--layer)/.058);
  --panel3:rgb(var(--layer)/.090);
  --hair:rgb(232 228 255/.085);
  --hair2:rgb(232 228 255/.17);

  --ink:#f4f1ff; --ink2:#c6c0e2; --mute:#8d86aa; --mute2:#676081;

  /* One decisive action colour. A gradient reads as decoration; a solid fill reads
     as "press this", which is the whole job of a primary button. */
  --acc:#8b6dff; --acc-ink:#ffffff;
  --acc-soft:rgb(139 109 255/.18);
  --acc2:#c9b8ff;

  --buy:#4fe0a0; --sell:#ff6b9d; --warn:#ffc86b; --info:#8fb8ff;
  /* kept as the brand signature: the launch card, the mark, the share image.
     At most once per screen. */
  --chrome:linear-gradient(110deg,#c9b8ff 0%,#9ff5d6 50%,#ffc8a8 100%);

  --display:"Unbounded",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sb:300px; --top:60px; --status:34px;

  --s1:2px; --s2:4px; --s3:6px; --s4:8px; --s5:10px; --s6:12px; --s7:14px;
  --s8:16px; --s9:20px; --s10:24px; --s11:32px; --s12:40px;
  --r0:4px; --r1:8px; --r2:10px; --r3:12px; --r4:16px; --r5:20px; --rf:999px;
  --r:var(--r4);
  --h-xs:26px; --h-sm:34px; --h-md:40px; --h-lg:46px;
  --fs0:11px; --fs1:12px; --fs2:13px; --fs3:14px; --fs4:15px; --fs5:18px; --fs6:22px; --fs7:30px;

  /* ---- density ----------------------------------------------------------
     Density should follow expertise, not taste. The screens someone meets once,
     nervously (create, import, learn) get room. The screens they stare at while
     a launch is live get packed. Set per route, below. */
  --inset:rgb(0 0 0/.24);
  --ui:var(--fs3); --ctl:var(--h-md); --rad:var(--r4); --pace:var(--s9);
  color-scheme:dark;
}
/* operating surfaces: watching, trading, auditing. Tighter on every axis. */
body[data-route="coin"],body[data-route="wallets"],body[data-route="activity"],
body[data-route="tracker"],body[data-route="archived"]{
  --ui:var(--fs2); --ctl:var(--h-sm); --rad:var(--r3); --pace:var(--s6);
}
/* guided surfaces: met once, under pressure, often on a phone. */
body[data-route="create"],body[data-route="import"],body[data-route="learn"],
body[data-route="kit"],body[data-route="settings"]{
  --ui:var(--fs4); --ctl:var(--h-lg); --rad:var(--r5); --pace:var(--s10);
}

/* Light is opt-in, never automatic. Following the OS meant anyone whose
   laptop is in light mode saw a white launch terminal, which is not what this
   is. Choosing Light in Settings still works. */
:root[data-theme="light"]{--base:#f7f5ff;--layer:24,18,48;--bg:var(--base);--bg2:rgb(24 18 48/.022);--panel:#ffffff;--panel2:rgb(24 18 48/.045);--panel3:rgb(24 18 48/.075);--hair:rgb(24 18 48/.10);--hair2:rgb(24 18 48/.20);--ink:#140f28;--ink2:#3a3358;--mute:#6b6389;--mute2:#8d87a6;--inset:rgb(24 18 48/.055);--acc:#6d47ff;--acc-ink:#ffffff;--acc-soft:rgb(109 71 255/.13);--acc2:#5b39d9;--buy:#12a06a;--sell:#d9376e;--warn:#a1700a;--info:#2f6ad9;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;font-weight:700}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12px}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:8px}
:focus-visible{outline:2px solid #9ff5d6;outline-offset:2px}
[hidden]{display:none!important}

/* shell */
.app{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);grid-template-rows:1fr var(--status);height:100%}
.sidebar{grid-row:1;border-right:1px solid var(--hair);background:linear-gradient(var(--bg2),var(--bg2)),var(--base);display:flex;flex-direction:column;min-height:0;padding-left:max(0px,env(safe-area-inset-left,0px))}
.content{grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.statusbar{grid-column:1/-1;grid-row:2;border-top:1px solid var(--hair);background:var(--bg2);display:flex;align-items:center;gap:var(--s9);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(14px,env(safe-area-inset-left,0px));font-size:12px;color:var(--mute);overflow-x:auto;white-space:nowrap}
.statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--buy);display:inline-block;margin-right:6px}
.statusbar .sp{flex:1}
.statusbar a,.statusbar button{background:none;border:0;color:var(--mute);cursor:pointer;text-decoration:none;padding:0}
.statusbar a:hover,.statusbar button:hover{color:var(--ink)}
/* The title is the only element allowed to give up width. Actions keep their size, so
   the bar fits at any viewport instead of pushing the page into horizontal scroll. */
.topbar{height:var(--top);border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:var(--s7);min-width:0;padding:0 max(20px,env(safe-area-inset-right,0px)) 0 20px;flex:none;background:var(--bg)}
.main{flex:1;overflow:auto;padding:24px max(24px,env(safe-area-inset-right,0px)) 40px 24px;min-height:0}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
/* brand lockup:mark + wordmark. The mark is optically centred on the wordmark's
   x-height rather than its line box, which sits lower than the box centre for an
   all-lowercase word, hence the small translate rather than plain align-items:center. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-width:0;line-height:1}
/* Measured, not guessed. The mark's ink is 1.15x the wordmark's ascender height, and its
   optical centre sits on the x-height band rather than the line box -- "surreal" is all
   lowercase next to the mark, so the x-height is what the eye lines it up against. The
   version label sits on the wordmark's baseline. */
.brand-mark{flex:none;display:block;width:28px;color:var(--ink);transform:translateY(1.7px)}
.brand-mark svg{display:block;width:100%;height:auto}
.brand-word{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.035em;line-height:1}
.brand-ver{font-family:var(--body);font-weight:600;color:var(--acc);font-size:11px;line-height:1;align-self:center;transform:translateY(2.2px)}
.brand:hover .brand-mark{color:var(--acc)}
.brand-mark,.brand:hover .brand-mark{transition:color .15s}
.search{margin:0 var(--s6) var(--s5);display:flex;align-items:center;gap:var(--s4);background:var(--panel);border:1px solid var(--hair);border-radius:var(--r3);height:var(--h-md);padding:0 var(--s6);color:var(--mute);font-size:var(--fs2)}
.search input{flex:1;align-self:stretch;background:none;border:0;outline:0;color:var(--ink);min-width:0}
.search kbd{font:11px var(--mono);background:var(--inset);border:1px solid var(--hair);border-radius:8px;padding:1px 6px}
.llist{overflow:auto;min-height:120px;max-height:36vh;padding:0 8px;border-bottom:1px solid var(--hair)}
.litem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 8px;border-radius:10px;cursor:pointer;text-decoration:none}
.litem:hover{background:var(--panel)}.litem.on{background:var(--panel2)}
.litem .av{width:34px;height:34px;border-radius:10px;background:var(--panel);overflow:hidden;display:grid;place-items:center;font-family:var(--display);font-size:12px;color:var(--mute)}
.litem .av img{width:100%;height:100%;object-fit:cover}
.litem b{display:block;font-size:13px;font-family:var(--display);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.litem span{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--panel);color:var(--mute)}
.badge.live{background:color-mix(in srgb,var(--buy) 18%,transparent);color:var(--buy)}
.badge.draft{background:var(--panel2);color:var(--mute)}
.badge.sched{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}
.badge.imp{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.badge.arch{background:var(--panel);color:var(--mute2)}
.sb-sec{padding:10px 16px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute2)}
.sb-nav{padding:0 8px;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain}
.sb-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink2);font-size:13px}
.sb-nav a:hover{background:var(--panel)}.sb-nav a.on{background:var(--panel2);color:var(--ink)}
.sb-nav a .ic{width:18px;text-align:center;color:var(--mute)}
.sb-nav a .cnt{margin-left:auto;font-size:11px;background:var(--panel);border-radius:999px;padding:1px 8px;color:var(--mute)}
.sb-foot{padding:10px 12px 14px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.funder{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:10px 12px;cursor:pointer}
.funder b{font-family:var(--display);font-size:13px}.funder .sp{flex:1}
.funder .bal{font-family:var(--mono);font-size:13px}
.sb-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}

/* buttons / fields */
.btn{border:1px solid var(--hair);background:var(--panel);border-radius:var(--r3);height:var(--h-md);padding:0 var(--s8);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{background:var(--panel2);border-color:var(--hair2)}
.btn.sm{height:var(--h-sm);padding:0 var(--s6);font-size:var(--fs1);border-radius:var(--r2)}
.btn.xs{height:var(--h-xs);padding:0 var(--s5);font-size:var(--fs0);border-radius:var(--r1)}
.btn.chrome{background:var(--chrome);color:#0e0b1f;border:0;font-family:var(--display);font-size:var(--fs2)}
.btn.chrome:hover{filter:brightness(1.05)}
.btn.buy{background:var(--buy);color:#0e0b1f;border:0}.btn.sell{background:var(--sell);color:#0e0b1f;border:0}
.btn.ghost{background:transparent}
.btn.danger{color:var(--sell);border-color:color-mix(in srgb,var(--sell) 40%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.field{width:100%;background:var(--inset);border:1px solid var(--hair);border-radius:var(--r3);height:var(--h-md);padding:0 var(--s6);color:var(--ink);outline:0}
textarea.field{height:auto;padding:var(--s5) var(--s6);line-height:1.5}
select.field{padding-right:var(--s4)}
.field:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.field::placeholder{color:var(--mute2)}
select.field{appearance:auto}
label.l{display:block;font-size:12px;color:var(--ink2);margin-bottom:5px;font-weight:600}
.hint{font-size:12px;color:var(--mute);margin-top:5px}
/* an inline note that has to be read before the next step, not a decoration */
.note{font-size:var(--fs1);line-height:1.5;padding:var(--s5) var(--s6);border-radius:var(--r3);
  border:1px solid var(--hair);background:var(--inset);color:var(--ink2)}
.note b{color:var(--ink);display:block;margin-bottom:2px}
.note.bad{border-color:color-mix(in srgb,var(--sell) 34%,transparent);
  background:color-mix(in srgb,var(--sell) 7%,var(--panel))}
.note.bad b{color:var(--sell)}
.note.warn{border-color:color-mix(in srgb,var(--warn) 32%,transparent);
  background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
.note.warn b{color:var(--warn)}
.seg{display:inline-flex;background:var(--inset);border:1px solid var(--hair);border-radius:var(--rf);padding:var(--s2);gap:var(--s1)}
.seg button{border:0;background:transparent;color:var(--mute);height:30px;padding:0 var(--s7);border-radius:var(--rf);cursor:pointer;font-weight:600;font-size:var(--fs1)}
.seg button.on{background:var(--panel2);color:var(--ink)}
.seg.wide{display:flex}.seg.wide button{flex:1}
input[type=range]{width:100%;accent-color:#c9b8ff}
.toggle{width:38px;height:22px;border-radius:999px;background:var(--hair2);position:relative;border:0;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:left .15s}
.toggle.on{background:var(--buy)}.toggle.on::after{left:19px;background:#0e0b1f}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2)}

/* panels */
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:16px}
.panel.tight{padding:0;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ph h3{font-size:13px}
.ph .sub{font-size:12px;color:var(--mute)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:14px}
/* rows wrap by default:in a 260px side panel two buttons will not sit side by side,
   and wrapping is always better than a panel that silently overflows its column. */
.row{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap}
.row>.btn{min-width:0}
.sp{flex:1}
.mute{color:var(--mute)}.mute2{color:var(--mute2)}.small{font-size:12px}.xs{font-size:11px}
.b{color:var(--buy)}.s{color:var(--sell)}.w{color:var(--warn)}.i{color:var(--info)}
.kpi{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px}
.kpi b{display:block;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.kpi span{font-size:12px;color:var(--mute)}
.kpi .delta{font-size:12px;margin-left:8px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;background:var(--inset);color:var(--mute)}
.pill.ok{background:color-mix(in srgb,var(--buy) 16%,transparent);color:var(--buy)}
.pill.bad{background:color-mix(in srgb,var(--sell) 16%,transparent);color:var(--sell)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.info{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}
.tag{font-size:11px;font-weight:700;padding:2px 6px;border-radius:8px;background:var(--inset)}
.tag.dev{background:color-mix(in srgb,var(--buy) 20%,transparent);color:var(--buy)}
.tag.team{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc)}
.tag.snipe{background:color-mix(in srgb,var(--sell) 20%,transparent);color:var(--sell)}
.tag.kol{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.tag.you{background:color-mix(in srgb,var(--info) 22%,transparent);color:var(--info)}
.tag.whale{background:var(--panel2);color:var(--ink2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);font-weight:700}
td{padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--hair) 60%,transparent);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}tr.click:hover td{background:var(--panel2)}
td.r,th.r{text-align:right}
.tw{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to right,var(--panel) 40%,transparent) left center/28px 100% no-repeat,
    linear-gradient(to left,var(--panel) 40%,transparent) right center/28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.30),transparent) left center/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.30),transparent) right center/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
.panel.tight.tw{overflow-x:auto;overflow-y:hidden}
.tw table{min-width:max-content}
.empty{padding:32px;text-align:center;color:var(--mute);font-size:13px}
.empty b{display:block;font-family:var(--display);color:var(--ink);margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:calc(var(--status) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel2);border:1px solid var(--hair2);border-radius:999px;padding:10px 16px;font-size:13px;z-index:50;box-shadow:0 10px 30px -10px #0008;max-width:90vw}
.modal-bg{position:fixed;inset:0;background:#0008;z-index:45;display:grid;place-items:center;padding:16px}
.modal{background:var(--panel);border:1px solid var(--hair2);border-radius:20px;padding:20px;width:min(520px,100%);max-height:90vh;overflow:auto}
.modal h3{font-size:15px;margin-bottom:12px}
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mute2)}
.steps b{font-weight:700;color:var(--mute2);padding:5px 10px;border-radius:999px}
.steps b.on{background:var(--panel2);color:var(--ink)}.steps b.done{color:var(--buy)}
.steps i{width:14px;height:1px;background:var(--hair2)}
.card{position:relative;border-radius:20px;padding:20px;border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--chrome) border-box}
.card .head{display:flex;gap:14px;align-items:flex-start}
.card .img{width:62px;height:62px;border-radius:16px;background:var(--inset);overflow:hidden;flex:none;display:grid;place-items:center;font-family:var(--display);color:var(--mute);font-size:20px}
.card .img img{width:100%;height:100%;object-fit:cover}
.cstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.cstats div{background:var(--inset);border-radius:12px;padding:10px 12px}
.cstats b{display:block;font-family:var(--display);font-size:15px}.cstats span{font-size:11px;color:var(--mute)}
.alloc{margin-top:12px;display:flex;flex-direction:column;gap:5px;font-size:12px}
.alloc .bar{height:6px;border-radius:4px;background:var(--inset);overflow:hidden;display:flex}
.alloc .bar i{display:block;height:100%}
.addr{margin-top:12px;background:var(--inset);border-radius:10px;padding:8px 10px;font:11px var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pad button{border:1px solid var(--hair);background:var(--inset);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.pad button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--bg))}
.pad button:disabled{opacity:.4;cursor:not-allowed}
.pad .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:900;font-size:12px;color:#0e0b1f;flex:none}
.pad b{font-size:13px;display:block}.pad span{font-size:11px;color:var(--mute)}
.mode{border:1px solid var(--hair);background:var(--inset);border-radius:12px;padding:12px;cursor:pointer}
.mode.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--bg))}
.mode b{display:block;font-family:var(--display);font-size:12px;margin-bottom:3px}.mode span{font-size:12px;color:var(--mute)}
.drop{display:flex;align-items:center;gap:12px;border:1px dashed var(--hair2);background:var(--inset);border-radius:12px;padding:12px;cursor:pointer}
.drop .pv{width:54px;height:54px;border-radius:10px;background:var(--panel);overflow:hidden;flex:none}.drop .pv img{width:100%;height:100%;object-fit:cover}
.gauge{display:flex;flex-direction:column;gap:4px}
.gauge .track{height:6px;border-radius:4px;background:var(--inset);position:relative}
.gauge .track i{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--acc);transform:translateX(-50%)}
.gauge .lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--mute2)}
/* workspace */
.ws{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
@media (max-width:1000px){.ws{grid-template-columns:minmax(0,1fr)}}
.whead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.whead .img{width:44px;height:44px;border-radius:12px;background:var(--panel);overflow:hidden;flex:none}.whead .img img{width:100%;height:100%;object-fit:cover}
.metrics{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
.metrics div{text-align:right}.metrics b{font-family:var(--display);font-size:14px;display:block}.metrics span{font-size:11px;color:var(--mute)}
@media (max-width:640px){.metrics{margin-left:0}.metrics div{text-align:left}}
.bsbar{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--mute)}
.bsbar .bar{flex:1;height:5px;border-radius:4px;background:var(--sell);overflow:hidden}.bsbar .bar i{display:block;height:100%;background:var(--buy)}
.chart{position:relative;height:340px;border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);overflow:hidden}
.chart canvas{width:100%;height:100%;display:block}
.chart .tf{position:absolute;top:var(--s4);left:var(--s4);display:flex;gap:var(--s1);background:var(--inset);border-radius:var(--r2);padding:var(--s1)}
.chart .tf button{border:0;background:none;color:var(--mute);font:600 var(--fs0) var(--body);height:26px;padding:0 var(--s5);border-radius:var(--r1);cursor:pointer}.chart .tf button.on{background:var(--panel2);color:var(--ink)}
.chart .legend{position:absolute;top:8px;right:10px;font:11px var(--mono);color:var(--mute);display:flex;gap:10px}
.tabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--hair);overflow-x:auto}
.tabs button{border:0;background:none;color:var(--mute);padding:6px 12px;border-radius:10px;cursor:pointer;font-weight:600;font-size:12px;white-space:nowrap}
.tabs button.on{background:var(--inset);color:var(--ink)}
.tape{max-height:340px;overflow:auto}
.tr{display:grid;grid-template-columns:48px 86px 90px minmax(0,1fr) 50px;gap:8px;padding:8px 14px;border-top:1px solid color-mix(in srgb,var(--hair) 55%,transparent);font-size:12px;align-items:center}
.tr:first-child{border-top:0}
.rail{display:flex;flex-direction:column;gap:12px}
.rail .panel{padding:12px}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.quick button{border:1px solid var(--hair);background:var(--inset);color:var(--mute);padding:6px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
.quick button.on,.quick button:hover{color:var(--ink);border-color:var(--hair2)}
.pos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;border-top:1px solid var(--hair);margin-top:12px;padding-top:10px}
.pos b{font-family:var(--display);font-size:12px;display:block}.pos span{font-size:11px;color:var(--mute)}
.auto{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent)}
.auto:first-child{border-top:0}
.auto b{font-size:13px;display:block}.auto span{font-size:12px;color:var(--mute);display:block}
.bubble{height:340px;position:relative}.bubble canvas{width:100%;height:100%;display:block}
.bubble .lg{position:absolute;bottom:8px;left:10px;font-size:11px;color:var(--mute);display:flex;gap:12px}
.bubble .lg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
/* dashboard */
.pnlchart{height:220px;border-radius:12px;background:var(--inset);position:relative}.pnlchart canvas{width:100%;height:100%;display:block}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal div{aspect-ratio:1;border-radius:8px;background:var(--inset);display:grid;place-items:center;font:11px var(--mono);color:var(--mute2)}
.cal div.p{background:color-mix(in srgb,var(--buy) 30%,var(--bg));color:var(--ink)}.cal div.n{background:color-mix(in srgb,var(--sell) 30%,var(--bg));color:var(--ink)}
/* wallets */
.folders{display:flex;flex-direction:column;gap:3px}
.folders button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 10px;border-radius:10px;color:var(--ink2);cursor:pointer;text-align:left;width:100%}
.folders button.on{background:var(--panel2);color:var(--ink)}.folders .cnt{margin-left:auto;font-size:11px;color:var(--mute)}
.wl{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:860px){.wl{grid-template-columns:minmax(0,1fr)}}
.role{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--inset);color:var(--mute)}
/* activity */
.tl{display:flex;flex-direction:column}
.tl .ev{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent);font-size:13px;align-items:center}
.tl .ev:first-child{border-top:0}
.tl .k{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
/* kit */
.piece textarea{min-height:110px;margin-top:8px;font-size:12px;resize:vertical;font-family:var(--body)}
/* learn */
.learn{max-width:680px}.learn section{margin-top:24px}.learn h2{font-size:15px;margin-bottom:6px}.learn p{margin:0;color:var(--ink2)}
/* pnl card */
.pnlcard{position:relative;border-radius:20px;padding:24px;background:linear-gradient(135deg,#17132b,#0c0a19);border:1px solid var(--hair2);color:#f3eeff;overflow:hidden}
.pnlcard::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--chrome);opacity:.25;filter:blur(40px)}
.pnlcard b.big{font-family:var(--display);font-size:38px;display:block;letter-spacing:-.02em}
/* mobile */
.menu-btn{display:none}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:env(safe-area-inset-top,0px) auto var(--status) 0;width:min(300px,86vw);z-index:30;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none;box-shadow:var(--lift,0 18px 50px -12px rgb(0 0 0/.6))}
  /* Dim the page behind it. Without this the drawer reads as a floating panel
     stuck on top of live content rather than something covering it, which is
     what made it look see-through even once the fill was opaque. z-index:-1 keeps
     it under the drawer's own background but still above the page, and it eats
     the tap so nothing underneath gets pressed by accident. */
  .sidebar::before{content:"";position:fixed;inset:0;z-index:-1;
    background:rgb(4 3 10/.55);opacity:0;pointer-events:none;transition:opacity .2s}
  .sidebar.open::before{opacity:1;pointer-events:auto}
  @media (prefers-reduced-motion:reduce){.sidebar,.sidebar::before{transition:none}}
  .menu-btn{display:inline-flex}
  .main{padding:var(--s8) max(var(--s8),env(safe-area-inset-right,0px)) var(--s12) max(var(--s8),env(safe-area-inset-left,0px))}
  .topbar{padding:0 max(var(--s7),env(safe-area-inset-right,0px)) 0 max(var(--s7),env(safe-area-inset-left,0px))}
  /* thumb-sized controls. A 31px button is fine for a mouse and a miss on a phone,
     and this product is used on phones more than anywhere else. */
  .btn{height:var(--h-lg)}
  .btn.sm{height:var(--h-md)}
  .btn.xs{height:32px}
  .seg button{height:36px}
  .field,select.field{height:var(--h-lg)}
  .search{height:var(--h-lg)}
  .toggle{width:46px;height:28px}
  .toggle::after{width:22px;height:22px;top:3px;left:3px}
  .toggle.on::after{left:21px}
  .quick button{height:38px}
  .tabs button{height:38px;display:inline-flex;align-items:center}
  .folders button{min-height:40px}
  .sb-nav a{min-height:42px}
  .litem{padding:var(--s5) var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.lg svg{width:100%;height:100%;display:block}
.row>.lg,.pill>.lg,.btn>.lg{margin:0}
.pill{align-items:center}

@media (max-width:860px){
  .chart .tf button{height:34px}
}

.t-title{font-size:var(--fs4);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar>.btn{flex:none}
.whead.t-coin{min-width:0}
.whead.t-coin>div:nth-child(2){min-width:0}
.whead.t-coin .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:860px){
  /* secondary actions live on their own pages on a phone; the bar keeps the
     one action that matters plus the wallet. */
  .topbar{gap:var(--s5)}
  .topbar .t-sec{display:none}
  .topbar .btn.chrome .t-long{display:none}
  .whead.t-coin{flex-wrap:wrap;row-gap:var(--s2)}
  .whead.t-coin .metrics{margin-left:0;flex-basis:100%;gap:var(--s7)}
}
@media (max-width:420px){
  .topbar .btn.chrome{padding:0 var(--s6)}
  .t-title{font-size:var(--fs2)}
}

/* A box that scrolls its own overflow must also be allowed to be narrower than its
   content. Without min-width:0 the automatic minimum size of a flex/grid item is its
   min-content width, so the table pushes every ancestor wide and the scroll never
   engages -- the single most common cause of stray horizontal page scroll. */
.tw,.tape,.panel.tight,.chart,.bubble{min-width:0}
.grid>*,.ws>*,.wl>*,.stack>*,.rail>*,.row>*{min-width:0}

/* a segmented control with many options scrolls rather than wrapping into a broken grid */
.seg{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none}

/* long single-token strings (addresses, mints, urls) must never set a floor on layout */
.mono,.addr,.litem span,.litem b{overflow-wrap:anywhere}
.addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:860px){ .btn.xs{height:36px} }

/* Layouts that used to be inline styles in JS, so they never responded to the viewport.
   The wizard keeps its live preview beside the form while both stay usable, then stacks. */
.g-form{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
@media (max-width:1080px){.g-form{grid-template-columns:minmax(0,1fr)}}
.g-wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:860px){.g-wide{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.toggle{width:50px;height:30px}.toggle::after{top:3px;left:3px;width:24px;height:24px}.toggle.on::after{left:23px}}

/* the last controls that sized themselves from padding rather than the ramp */
.tabs button{height:34px;display:inline-flex;align-items:center}
.quick button{height:34px}
.folders button{min-height:36px}

/* ---- phone refinements -------------------------------------------------------
   Short KPI values do not need a row each; stacking all four turns the dashboard
   into a scroll. Panel headers wrap so a wide control never squashes its title. */
@media (max-width:640px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:var(--s6)}
  .kpi b{font-size:var(--fs6)}
}
@media (max-width:860px){
  .ph{flex-wrap:wrap;row-gap:var(--s4)}
  .ph h3{flex:1 0 auto}
  #walletBtn .t-long{display:none}
  /* the status bar keeps what changes (prices, connection) and drops the fixed badges */
  .statusbar .t-badge{display:none}
  .statusbar{gap:var(--s7)}
  .metrics{gap:var(--s7)}
}

.t-name{font-family:var(--display);font-weight:700;font-size:var(--fs4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-ident{min-width:0}

@media (max-width:860px){
  /* The coin header carries a lot on a desktop: artwork, name, launchpad and chain pills,
     mint, age, and five live metrics. On a phone it keeps the ticker and the numbers --
     the two things you actually watch -- and the bar grows to two rows to hold them. */
  .topbar{height:auto;min-height:var(--top);padding-top:var(--s4);padding-bottom:var(--s4);flex-wrap:wrap}
  .topbar .t-rich{display:none}
  .whead.t-coin{gap:var(--s4)}
  .whead.t-coin .metrics{flex-basis:100%;margin-left:0;justify-content:space-between;gap:var(--s4)}
  .whead.t-coin .metrics div{text-align:left}
}

@media (max-width:860px){
  /* The coin bar becomes two deliberate rows instead of a wrap-and-hope: identity and
     wallet on top, the live numbers underneath, full width. display:contents lets the
     header's own children take part in that grid without extra markup. */
  .topbar:has(.t-coin){display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;column-gap:var(--s5);row-gap:var(--s3);height:auto;
    padding-top:var(--s4);padding-bottom:var(--s4)}
  .topbar:has(.t-coin)>.menu-btn{grid-column:1;grid-row:1}
  .topbar:has(.t-coin)>#walletBtn{grid-column:3;grid-row:1}
  .whead.t-coin{display:contents}
  .whead.t-coin .t-ident{grid-column:2;grid-row:1}
  .whead.t-coin .metrics{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;
    justify-content:space-between;margin:0;gap:var(--s4)}
  .whead.t-coin .metrics div{text-align:left;min-width:0}
  /* the chart already shows recent direction */
  .whead.t-coin .metrics div:nth-child(5){display:none}
  .whead.t-coin .metrics b{font-size:var(--fs2)}
  .whead.t-coin .metrics span{font-size:var(--fs0)}
}

/* ===========================================================================
   DESIGN LAYER
   Three things came out of looking hard at pump.fun, fomo and Proxima:
     1. One accent, used sparingly, beats a gradient on every button.
     2. Optional things should be collapsed, not merely labelled "(optional)".
     3. The screens you meet once deserve room; the screens you live in don't.
   =========================================================================== */

/* ---- surfaces: one hairline, one fill, density-aware padding ---- */
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--rad);padding:var(--pace)}
.panel.tight{padding:0}
/* a panel inside a panel steps up a layer instead of repeating the same fill,
   which is what made nested cards read as mush */
.panel .panel{background:var(--panel2);border-color:transparent}
.kpi{background:var(--panel);border:1px solid var(--hair);border-radius:var(--rad);padding:var(--s7) var(--s8)}
.rail .panel{padding:var(--s7)}
.grid{gap:var(--pace)}
.stack{gap:var(--pace)}

/* ---- type roles ------------------------------------------------------------
   Unbounded is a display face. It was carrying sidebar rows, stat captions, pills
   and buttons as well as headings, which made every surface shout at the same
   volume. It now does four jobs and Manrope does the rest. */
.litem b,.cstats b,.metrics b,.mode b,.pos b,.funder b,.auto b,.ph h3,.modal h3,
.empty b,.card .cstats b,.t-name{font-family:var(--body);font-weight:700;letter-spacing:-.01em}
h1,h2,.kpi b,.brand-word,.pnlcard b.big{font-family:var(--display)}
h3,h4{font-family:var(--body);font-weight:700;letter-spacing:-.012em}
body{font-size:var(--ui)}
.main{font-size:var(--ui)}

/* every figure is monospaced and tabular, so columns of numbers line up and a
   price that ticks does not reflow the row */
.num,.mono,.kpi b,.metrics b,.cstats b,.pos b,.bal,td.r,.tr span{font-variant-numeric:tabular-nums}
.kpi b,.metrics b,.cstats b{font-feature-settings:"tnum" 1}

/* ---- action hierarchy ------------------------------------------------------
   Exactly one filled accent button per screen. Everything else is quiet. */
.btn{background:var(--panel2);border-color:transparent;color:var(--ink);font-size:var(--fs2)}
.btn:hover{background:var(--panel3);border-color:var(--hair)}
.btn.chrome{background:var(--acc);color:var(--acc-ink);border:0;font-family:var(--body);
  font-weight:700;font-size:var(--fs2);letter-spacing:-.005em;box-shadow:0 1px 0 rgb(255 255 255/.14) inset}
.btn.chrome:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.outline{background:transparent;border-color:var(--hair2)}
/* the gradient survives in one place: the brand signature */
.btn.brand{background:var(--chrome);color:#0e0b1f;border:0;font-family:var(--display);font-size:var(--fs2)}

.field{background:var(--inset);border-color:var(--hair);height:var(--ctl);font-size:var(--ui)}
.field:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
textarea.field{height:auto}
.btn,.field,.seg{transition:background .13s,border-color .13s,box-shadow .13s}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---- selection state: one treatment everywhere ---- */
.pad button.on,.mode.on,.litem.on,.sb-nav a.on,.folders button.on{
  background:var(--acc-soft);border-color:var(--acc);color:var(--ink)}
.seg button.on{background:var(--panel3);color:var(--ink)}
.tabs button.on{background:var(--panel2);color:var(--ink)}

/* ---- the launch card keeps the gradient edge: it is the thing people share ---- */
.card{border-radius:var(--r5);padding:var(--s9)}

/* ---- disclosure: the pattern that makes a long form feel short -------------
   Everything optional starts closed. The summary row stays a real target and
   states what is inside, so nothing is hidden -- just not in the way. */
.disc{border:1px solid var(--hair);border-radius:var(--r3);background:var(--panel);overflow:hidden}
.disc>summary{display:flex;align-items:center;gap:var(--s5);min-height:var(--ctl);
  padding:0 var(--s7);cursor:pointer;list-style:none;font-size:var(--fs2);font-weight:600;color:var(--ink2)}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary:hover{background:var(--panel2)}
.disc>summary .chg{color:var(--acc2);font-weight:700}
.disc[open]>summary{border-bottom:1px solid var(--hair);background:var(--panel2)}
.disc[open]>summary .chg::after{content:" ✕";opacity:.6}
.disc>*:not(summary){padding:0 var(--s7) var(--s7)}
.disc .sp{flex:1}
.venue .vsum{display:flex;align-items:center;gap:var(--s4);min-width:0}
.venue .vsum b{font-family:var(--body);font-weight:700;color:var(--ink)}
.venue>summary{min-height:52px}

/* ---- repairs for the translucent surfaces ---------------------------------
   The launch card paints its gradient edge with a border-box gradient behind a
   padding-box fill. That fill has to be opaque or the gradient shows straight
   through it, so the card composites its own solid surface over the page base. */
.card{background:
    linear-gradient(color-mix(in srgb,var(--ink) 4%,var(--base)),color-mix(in srgb,var(--ink) 4%,var(--base))) padding-box,
    var(--chrome) border-box;
  border:1.5px solid transparent}
.pnlcard{background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 7%,var(--base)),var(--base))}

/* the upload target has to look like one: a dashed well with a visible slot,
   not an empty region of panel */
.drop{border:1.5px dashed var(--hair2);background:var(--inset);border-radius:var(--rad);
  padding:var(--s7);gap:var(--s7);min-height:84px}
.drop:hover{border-color:var(--acc);background:var(--acc-soft)}
.drop .pv{width:64px;height:64px;border-radius:var(--r3);background:var(--panel2);
  display:grid;place-items:center;flex:none}
.drop .pv:empty::after{content:"+";font:300 28px/1 var(--body);color:var(--mute)}

/* reading measure: a 32-character name does not need a 900px input */
.g-form>.stack{max-width:620px}
.g-form{justify-content:start;gap:var(--s11)}

/* ===========================================================================
   FUN LAYER
   This is a memecoin launcher, not a bank. The structure underneath stays
   sober -- one primary, collapsed optionals, density by expertise -- but the
   surface should feel like something you WANT to press.
   =========================================================================== */
:root{
  --acc:#a06bff; --acc2:#dac9ff; --acc-soft:rgb(160 107 255/.20);
  --r3:14px; --r4:18px; --r5:24px;
  --lift:0 10px 24px -14px rgb(0 0 0/.65), 0 2px 6px -3px rgb(0 0 0/.4);
  --glow:0 8px 28px -10px rgb(160 107 255/.55);
  --mint:#5be4b0; --peach:#ffc8a8; --sky:#8fb8ff; --bubble:#ff8fd0;
}
:root[data-theme="light"]{--lift:0 8px 22px -14px rgb(32 18 70/.28), 0 2px 5px -3px rgb(32 18 70/.16)}

/* the primary action gets the brand gradient back -- it is the one thing on the
   screen that should look like candy, and one per screen keeps it meaningful */
.btn.chrome{background:var(--chrome);color:#140f28;border:0;font-family:var(--display);
  font-weight:700;letter-spacing:-.01em;box-shadow:var(--glow)}
.btn.chrome:hover{filter:brightness(1.06) saturate(1.1);transform:translateY(-1px)}
.btn.chrome:active{transform:translateY(0)}
.btn.chrome:disabled{background:var(--panel2);color:var(--mute2);box-shadow:none;filter:none;transform:none}
/* solid violet steps down to the second-loudest action */
.btn.solid{background:var(--acc);color:#fff;border:0;font-weight:700}
.btn.solid:hover{filter:brightness(1.1)}
.btn{transition:background .14s,border-color .14s,box-shadow .14s,transform .12s,filter .14s}
.btn:active{transform:translateY(1px)}

/* things you can click should answer when you point at them */
.litem,.pad button,.mode,.kpi,.card{transition:transform .14s,box-shadow .14s,background .14s,border-color .14s}
.litem:hover,.pad button:hover:not(:disabled),.mode:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.kpi:hover{border-color:var(--hair2)}
.card{box-shadow:var(--lift)}

/* a bit of colour in the furniture, instead of five greys */
.badge.live{background:color-mix(in srgb,var(--buy) 22%,transparent);color:var(--buy)}
.badge.sched{background:color-mix(in srgb,var(--sky) 22%,transparent);color:var(--sky)}
.badge.imp{background:color-mix(in srgb,var(--peach) 26%,transparent);color:var(--peach)}
.sb-nav a.on{background:var(--acc-soft);color:var(--ink);box-shadow:inset 2px 0 0 var(--acc)}
.cstats div:nth-child(1){background:color-mix(in srgb,var(--buy) 10%,var(--inset))}
.cstats div:nth-child(2){background:color-mix(in srgb,var(--sky) 10%,var(--inset))}
.cstats div:nth-child(3){background:color-mix(in srgb,var(--acc) 12%,var(--inset))}

/* headings with some swagger */
h1{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.035em;line-height:1.08}
.empty b{font-size:var(--fs5);letter-spacing:-.02em}
.empty{padding:var(--s11) var(--s9)}
.kpi b{letter-spacing:-.025em}

/* the launch card is the thing people screenshot: give it a glow */
.card::before{content:"";position:absolute;inset:-40% -20% auto;height:70%;
  background:var(--chrome);opacity:.14;filter:blur(46px);pointer-events:none;border-radius:50%}
.card>*{position:relative}

@media (prefers-reduced-motion:reduce){
  .btn,.litem,.pad button,.mode,.kpi,.card{transition:none}
  .btn.chrome:hover,.litem:hover,.pad button:hover,.mode:hover{transform:none}
}
/* the glow has to be clipped by the card, or it widens every ancestor */
.card{overflow:hidden}

/* ---- first run -----------------------------------------------------------
   Big, warm and short. One obvious thing to do, three sentences on what happens,
   and the live feed underneath so the place is visibly busy. */
.start{display:flex;flex-direction:column;gap:var(--s11);max-width:980px;margin:0 auto;padding-top:var(--s9)}
.start-hero{text-align:center;position:relative;padding:var(--s10) var(--s8) var(--s8)}
.start-hero::before{content:"";position:absolute;inset:-10% 10% 30%;background:var(--chrome);
  opacity:.16;filter:blur(72px);border-radius:50%;pointer-events:none}
.start-hero>*{position:relative}
.start-mark{color:var(--ink);display:flex;justify-content:center;margin-bottom:var(--s9)}
.start-hero h1{font-size:clamp(28px,4.2vw,46px);letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.start-hero p{max-width:52ch;margin:var(--s7) auto var(--s10);color:var(--ink2);
  font-size:var(--fs4);line-height:1.55;text-wrap:pretty}
.btn.lg{height:52px;padding:0 var(--s10);font-size:var(--fs4)}
.start-steps .step{position:relative;padding:var(--s9)}
.start-steps .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc2);font:700 var(--fs2)/1 var(--mono);margin-bottom:var(--s6)}
.start-steps b{display:block;font-size:var(--fs4);font-weight:700;letter-spacing:-.015em;margin-bottom:var(--s3)}
.start-steps p{margin:0;color:var(--mute);font-size:var(--fs2);line-height:1.5}
.start .tape{max-height:360px}
@media (max-width:860px){.start{gap:var(--s10);padding-top:0}.start-hero{padding:var(--s8) 0}}

/* Density follows expertise, never reach: a thumb needs the same target on the
   trading screen as anywhere else, so the phone floor overrides the dense tokens. */
@media (max-width:860px){
  body[data-route]{--ctl:var(--h-lg)}
  .field,select.field,.search{height:var(--h-lg)}
}

/* ---- multi-wallet launch ---------------------------------------------------
   One row per wallet, priced in SOL (the number you actually spend) as well as
   share of supply, with the wallet's own balance beside it so a shortfall is
   obvious before you reach the funding step. */
.wpick{display:flex;flex-direction:column;gap:var(--s4)}
.wrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 104px 92px 32px;
  gap:var(--s5);align-items:center}
.wname{display:flex;flex-direction:column;min-width:0;gap:1px}
.wname b{font-size:var(--fs2);font-weight:700}
.wname span{font-size:var(--fs0)}
.wamt{display:flex;align-items:center;gap:var(--s3)}
.wamt .field{width:68px;text-align:right}
.wcost{font-size:var(--fs1);text-align:right;font-variant-numeric:tabular-nums}
.wsum{display:flex;align-items:center;gap:var(--s7);flex-wrap:wrap;
  margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--hair);font-size:var(--fs2)}
.wsum .sp{flex:1}
@media (max-width:720px){
  .wrow{grid-template-columns:minmax(0,1fr) 84px 32px;row-gap:var(--s3)}
  .wrow .field[data-al]{grid-column:1/-1;order:3}
  .wcost{grid-column:1/2;order:4;text-align:left}
}
.wlist{display:flex;flex-direction:column;gap:var(--s2);max-height:46vh;overflow:auto;
  border:1px solid var(--hair);border-radius:var(--r3);padding:var(--s4)}
.wopt{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);
  border-radius:var(--r2);cursor:pointer;min-height:46px}
.wopt:hover{background:var(--panel2)}
.wopt input{width:18px;height:18px;accent-color:var(--acc);flex:none}
.wo-n{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.wo-n b{font-size:var(--fs2);font-weight:700}

/* Overlays must be opaque. The alpha surface layers are meant to sit ON the page;
   a modal sits OVER it, so it composites its own solid fill from the base colour. */
.modal{background:color-mix(in srgb,var(--ink) 7%,var(--base));border:1px solid var(--hair2);
  box-shadow:0 30px 70px -20px rgb(0 0 0/.7)}
.toast{background:color-mix(in srgb,var(--ink) 11%,var(--base));border-color:var(--hair2)}
.modal-bg{background:rgb(4 3 10/.62);backdrop-filter:blur(3px)}
select.field option{background:color-mix(in srgb,var(--ink) 7%,var(--base));color:var(--ink)}

/* ===========================================================================
   MOTION
   One set of durations and curves. Everything that moves picks from these, so
   the app reads as one object rather than a dozen independently-tuned widgets.
   =========================================================================== */
:root{
  --t-fast:120ms; --t-base:190ms; --t-slow:320ms; --t-stage:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);          /* settle: UI arriving */
  --ease-out:cubic-bezier(.16,1,.3,1);          /* decelerate hard: reveals */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* overshoot: celebratory only */
}

/* views arrive rather than blink */
@keyframes vIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main>*{animation:vIn var(--t-base) var(--ease) both}

/* rows in a live list stagger in as they stream */
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tape .tr:nth-child(-n+8),#newFeed .tr:nth-child(-n+8){animation:rowIn var(--t-base) var(--ease) both}
#newFeed .tr:nth-child(1){animation-delay:0ms}#newFeed .tr:nth-child(2){animation-delay:22ms}
#newFeed .tr:nth-child(3){animation-delay:44ms}#newFeed .tr:nth-child(4){animation-delay:66ms}

/* ---- the launch stage ---- */
.lstage{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:var(--s8);
  background:rgb(4 3 10/.86);backdrop-filter:blur(10px);opacity:0;transition:opacity var(--t-slow) var(--ease)}
.lstage.in{opacity:1}
.lstage-in{width:min(560px,100%);max-height:92vh;overflow:auto;text-align:center;position:relative}
.lstage-mark{display:flex;justify-content:center;color:var(--ink);margin-bottom:var(--s8)}
.lstage-mark svg{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
.lstage-t{font-family:var(--display);font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;margin:0}
.lstage-s{color:var(--mute);margin:var(--s4) 0 var(--s10);font-size:var(--fs2);min-height:1.2em}
.lstage-note{color:var(--mute2);font-size:var(--fs1);margin-top:var(--s9)}

.lsteps{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:var(--s2)}
.lsteps li{display:flex;gap:var(--s6);align-items:flex-start;padding:var(--s5) var(--s6);
  border-radius:var(--r3);opacity:.4;transition:opacity var(--t-base) var(--ease),background var(--t-base)}
.lsteps li .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--hair2);flex:none;margin-top:1px;
  position:relative;transition:border-color var(--t-base),background var(--t-base)}
.lsteps li .lt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lsteps li b{font-size:var(--fs2);font-weight:700}
.lsteps li em{font-style:normal;font-size:var(--fs1);color:var(--mute)}
.lsteps li.now{opacity:1;background:var(--panel)}
.lsteps li.now .dot{border-color:var(--acc)}
.lsteps li.now .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--acc);animation:ping 1.1s var(--ease-out) infinite}
@keyframes ping{from{transform:scale(.9);opacity:.9}to{transform:scale(1.9);opacity:0}}
.lsteps li.done{opacity:.85}
.lsteps li.done .dot{background:var(--buy);border-color:var(--buy)}
.lsteps li.done .dot::before{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:2px solid #07130d;border-top:0;border-left:0;transform:rotate(42deg)}
.lsteps li.bad .dot{background:var(--sell);border-color:var(--sell)}

/* the reveal */
.pop{animation:pop var(--t-stage) var(--ease-spring) both}
.lstage-in .pop:nth-child(2){animation-delay:40ms}.lstage-in .pop:nth-child(3){animation-delay:100ms}
.lstage-in .pop:nth-child(4){animation-delay:160ms}.lstage-in .pop:nth-child(5){animation-delay:220ms}
.lstage-in .pop:nth-child(6){animation-delay:290ms}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.lmint{display:inline-flex;align-items:center;gap:var(--s4);margin:var(--s7) 0 var(--s9);
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--rf);
  padding:var(--s5) var(--s8);color:var(--ink2);font-size:var(--fs1);cursor:pointer}
.lmint:hover{background:var(--panel2);color:var(--ink)}
.lcard{text-align:left}
.lburst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.lburst i{position:absolute;left:50%;top:38%;width:8px;height:12px;border-radius:2px;opacity:0;
  animation:burst var(--t) var(--ease-out) var(--d) forwards}
@keyframes burst{
  0%{opacity:0;transform:translate(-50%,0) rotate(0) scale(.4)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),62vh) rotate(var(--r)) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .main>*,.tape .tr,#newFeed .tr,.pop{animation:none}
  .lstage-mark svg,.lsteps li.now .dot::after{animation:none}
  .lburst{display:none}
}
/* the stage scrolls, so the burst has to escape that scroll container */
.lburst{position:fixed;inset:0;z-index:1}
.lburst i{top:34%}

/* ---- trade panel ---------------------------------------------------------
   fomo's move: the amount is the thing you are deciding, so it gets the size.
   A 34px input among six other 34px inputs makes buying feel like filing a form. */
.trade{display:flex;flex-direction:column;gap:var(--s6)}
.trade .tw-sel{width:100%}
.bigamt{display:flex;align-items:baseline;justify-content:center;gap:var(--s4);
  padding:var(--s7) var(--s6) var(--s2)}
.ba-in{width:100%;max-width:min(240px,62%);background:none;border:0;outline:0;text-align:right;
  font-family:var(--display);font-weight:700;font-size:clamp(30px,5.2vw,44px);letter-spacing:-.04em;
  color:var(--ink);padding:0;line-height:1.18;min-width:0}
.ba-in::-webkit-outer-spin-button,.ba-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ba-in[type=number]{-moz-appearance:textfield}
.ba-u{font-family:var(--body);font-weight:700;font-size:var(--fs4);color:var(--mute);flex:none}
.ba-sub{text-align:center;color:var(--mute);font-size:var(--fs1);margin-top:calc(var(--s4)*-1)}
.trade .quick button{height:38px;border-radius:var(--rf);font-size:var(--fs2)}
.trade .quick button.on{background:var(--acc-soft);border-color:var(--acc);color:var(--ink)}
.btn.xl{width:100%;height:52px;font-size:var(--fs4);font-weight:700;border-radius:var(--r3)}
.btn.buy.xl{box-shadow:0 8px 22px -12px color-mix(in srgb,var(--buy) 85%,transparent)}
.btn.sell.xl{box-shadow:0 8px 22px -12px color-mix(in srgb,var(--sell) 85%,transparent)}
.trade .pos{margin-top:var(--s2)}

/* ---- launch kit ---------------------------------------------------------- */
.kit-tabs{border-bottom:1px solid var(--hair);margin-bottom:var(--s4)}
.xf{margin-bottom:var(--s7)}
.xf-h{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s3)}
.xf-h .l{margin:0}
.xm{margin-left:auto;font:600 var(--fs0)/1 var(--mono);letter-spacing:.02em}
.xh{display:flex;flex-wrap:wrap;gap:var(--s4)}
.xh .btn{font-family:var(--mono);font-size:var(--fs1)}
.xart{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s9);align-items:start}
.xart>div{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.xart canvas{width:100%;height:auto;border-radius:var(--r3);border:1px solid var(--hair);background:var(--inset);display:block}
.xart>div:first-child canvas{border-radius:50%}
@media (max-width:720px){.xart{grid-template-columns:minmax(0,1fr)}}
.xorder{margin:0;padding-left:var(--s9);color:var(--ink2);font-size:var(--fs2);line-height:1.9}
.xdont{margin:0;padding-left:var(--s9);color:var(--ink2);font-size:var(--fs2);line-height:1.65}
.xdont li{margin-bottom:var(--s5)}
.warn-panel{border-color:color-mix(in srgb,var(--warn) 32%,transparent);
  background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
.siteframe{width:100%;height:620px;border:1px solid var(--hair);border-radius:var(--rad);
  background:#0b0a12;display:block}
@media (max-width:1080px){.siteframe{height:460px}}

/* ---- describe-it brief ---------------------------------------------------- */
.disc.brief summary .chg{color:var(--acc)}
.briefgot{display:flex;flex-direction:column;gap:6px}
.bg-row{display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr) minmax(0,auto);
  gap:10px;align-items:baseline;font-size:12px;padding:6px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--acc) 7%,transparent)}
.bg-k{font-family:var(--display);font-size:11px;letter-spacing:.02em;color:var(--acc)}
.bg-v{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.bg-s{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
@media (max-width:720px){
  .bg-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .bg-s{max-width:none;white-space:normal}
}
.kit-note{border-color:color-mix(in srgb,var(--acc) 26%,var(--line))}

/* ---- thesis --------------------------------------------------------------- */
.th-f{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s7)}
.th-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.th-h .l{margin:0}
.th-feeds{font-size:11px;margin-left:auto;text-align:right;opacity:.75}
.th-meter .th-bar{height:5px;border-radius:999px;margin-top:10px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.th-meter .th-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 55%,var(--buy)));
  transition:width var(--t-base) var(--ease-out)}
#thPreview{font-size:12.5px;line-height:1.65}
@media (max-width:720px){
  .th-feeds{margin-left:0;text-align:left;flex-basis:100%}
}

/* ---- kit groups ----------------------------------------------------------- */
.kit-group{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:var(--s7) 0 2px;padding:0 2px}
.kit-group:first-child{margin-top:0}
.kit-group b{font-family:var(--display);font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--acc)}
.kit-group span{font-size:12px}

/* ===========================================================================
   DESIGN PASS — the card is the one loud object; everything else goes quiet.
   Radius now encodes hierarchy: the card 24 · panels 14 · controls 10.
   Elevation belongs to the card alone. Panels that sit on the base lose their
   uniform border; a border is for something that floats over something else.
   =========================================================================== */
:root{
  --r-card:24px; --r-panel:14px; --r-ctl:10px;
  --lift:0 30px 60px -24px rgb(0 0 0/.65), 0 8px 24px -12px rgb(139 109 255/.25);
  --sheen:linear-gradient(118deg,#c9b8ff 0%,#9ff5d6 38%,#ffc8a8 72%,#c9b8ff 100%);
}
.panel{border-radius:var(--r-panel);border-color:color-mix(in srgb,var(--hair) 70%,transparent)}
.kpi{border-radius:var(--r-panel);border:0;background:var(--panel)}
.btn,.field,.seg{border-radius:var(--r-ctl)}

/* ---- the launch card ------------------------------------------------------ */
.card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:18px;border-radius:var(--r-card);
  border:1.5px solid transparent;
  background:linear-gradient(color-mix(in srgb,var(--ink) 4.5%,var(--base)),color-mix(in srgb,var(--ink) 3%,var(--base))) padding-box,var(--sheen) border-box;
  box-shadow:var(--lift);overflow:hidden;position:relative;isolation:isolate;
}
.card::before{content:"";position:absolute;inset:-45% -25% auto;height:75%;background:var(--sheen);opacity:.13;filter:blur(48px);pointer-events:none;border-radius:50%;z-index:-1}
.card>*{position:relative}
.card .c-img{position:relative;width:92px;height:92px;border-radius:18px;overflow:hidden;background:var(--inset);display:grid;place-items:center;font-family:var(--display);font-size:20px;color:var(--mute);flex:none;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.card .c-img img{width:100%;height:100%;object-fit:cover;display:block}
.card .c-live{position:absolute;left:8px;top:8px;font:600 10px/1 var(--body);letter-spacing:.02em;color:#06160e;background:var(--buy);padding:4px 7px;border-radius:999px;box-shadow:0 0 0 2px rgb(0 0 0/.35)}
.card .c-body{min-width:0;display:flex;flex-direction:column;gap:10px}
.card .c-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.card .c-title b{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em}
.card .c-sym{font-size:13px;color:var(--ink2)}
.card .c-pad{font-size:12px;color:var(--mute);display:inline-flex;align-items:center;gap:5px}
.card .c-desc{margin:0;font-size:13px;line-height:1.5;color:var(--ink2);max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cstats{margin-top:2px}
.card .cstats div{background:rgb(0 0 0/.28);border-radius:12px;padding:10px 12px}
.card .cstats b{font-size:16px}
.card .cstats span{font-size:11px;color:var(--mute)}
.card .alloc{margin-top:0}
.card .c-foot{display:flex;flex-wrap:wrap;gap:6px}
.card .addr{font-family:var(--mono);font-size:11px;color:var(--mute);word-break:break-all;padding-top:8px;border-top:1px solid rgb(255 255 255/.07)}

/* hero: the page-leading version. Picture you can see from across the room. */
.card.hero{grid-template-columns:auto minmax(0,1fr) auto;gap:22px;padding:22px}
.card.hero .c-img{width:172px;height:172px;border-radius:24px}
.card.hero .c-title b{font-size:28px;line-height:1.05;letter-spacing:-.02em}
.card.hero .c-desc{font-size:14px;-webkit-line-clamp:3}
.card.hero .cstats b{font-size:18px}
.card .c-side{display:flex;flex-direction:column;gap:14px;align-items:flex-end;min-width:150px}
.card .c-ring{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink)}
.card .c-ring span{font-size:11px;color:var(--mute)}
.card .c-spark{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.card .c-spark span{font-family:var(--display);font-size:16px;font-weight:700;display:flex;align-items:baseline;gap:6px}
.card .c-spark small{font:500 11px var(--body);color:var(--mute)}
.card .c-kv{text-align:right}
.card .c-kv b{display:block;font-family:var(--display);font-size:18px}
.card .c-kv span{font-size:11px;color:var(--mute)}
.b{color:var(--buy)} .s{color:var(--sell)}
@media (max-width:900px){
  .card.hero{grid-template-columns:auto minmax(0,1fr)}
  .card.hero .c-img{width:112px;height:112px;border-radius:18px}
  .card.hero .c-title b{font-size:22px}
  .card .c-side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-width:0}
}
@media (max-width:560px){
  .card,.card.hero{grid-template-columns:minmax(0,1fr);padding:16px}
  .card .c-img,.card.hero .c-img{width:100%;height:auto;aspect-ratio:1;max-width:220px}
  .card .c-side{flex-wrap:wrap;gap:12px}
}

/* ---- dashboard ------------------------------------------------------------ */
.dash-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch}
.hero-card{text-decoration:none;color:inherit;display:block;min-width:0}
.hero-card .card{height:100%}
.hero-side{display:grid;grid-template-rows:auto auto auto 1fr;gap:10px;min-width:0}
.hero-side .btn{align-self:end;justify-content:center}
.kpi.big b{font-size:30px;letter-spacing:-.02em;line-height:1.05}
.kpi.big span small{display:block;font-size:12px;color:var(--mute2);margin-top:2px}
@media (max-width:1100px){.dash-hero{grid-template-columns:minmax(0,1fr)}.hero-side{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}.hero-side .btn{grid-column:1/-1}}
@media (max-width:560px){.hero-side{grid-template-columns:minmax(0,1fr)}}
.dash .g-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:1100px){.dash .g-wide{grid-template-columns:minmax(0,1fr)}}

/* small avatars in rows: the picture travels with the coin everywhere */
.av.sm{width:30px;height:30px;border-radius:9px;background:var(--panel2);overflow:hidden;display:grid;place-items:center;font:600 10px var(--display);color:var(--mute);flex:none}
.av.sm img{width:100%;height:100%;object-fit:cover;display:block}
.tr.feed{grid-template-columns:30px minmax(0,1fr) 84px 84px 40px;align-items:center;cursor:pointer}
.tr.feed:hover{background:var(--panel)}
.dot.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--buy);box-shadow:0 0 0 3px color-mix(in srgb,var(--buy) 22%,transparent);vertical-align:middle;margin-right:4px}

/* sidebar rows: a live coin shows its line instead of a word */
.litem{grid-template-columns:34px minmax(0,1fr) auto}
.li-spark{display:inline-flex;color:var(--mute)}
.spark,.ring{display:block}
td .spark{vertical-align:middle}

/* reduced motion: the sheen and row entrances stay still */
@media (prefers-reduced-motion:reduce){.tape .tr,#newFeed .tr{animation:none!important}}

/* ---- posts shown as posts ------------------------------------------------- */
.pm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.pm-grid textarea{min-height:168px}
@media (max-width:980px){.pm-grid{grid-template-columns:minmax(0,1fr)}}
.pm-wrap{min-width:0}
.pm{display:flex;gap:10px;border-radius:var(--r-panel);background:#000;border:1px solid rgb(255 255 255/.09);padding:14px;color:#e7e9ea;font:14px/1.45 var(--body);min-width:0}
.pm .pm-av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#222;flex:none;display:grid;place-items:center;font:600 12px var(--display);color:#9aa}
.pm .pm-av img,.pm-card-img img,.pm-ig-img img,.pm-tt-bg img{width:100%;height:100%;object-fit:cover;display:block}
.pm .pm-main{min-width:0;flex:1}
.pm .pm-head{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-bottom:2px}
.pm .pm-head b{font-weight:700;color:#fff}
.pm .pm-head span{color:#71767b;font-size:13px}
.pm .pm-body{white-space:normal;overflow-wrap:anywhere;color:#e7e9ea}
.pm-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0;margin-top:10px;border:1px solid rgb(255 255 255/.14);border-radius:14px;overflow:hidden;background:#0b0b0b}
.pm-card-img{height:72px;background:#222;display:grid;place-items:center;font:600 12px var(--display);color:#9aa}
.pm-card>div:last-child{padding:10px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.pm-card b{font-weight:600;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-card span{color:#71767b;font-size:12px}
.pm-acts{display:flex;gap:28px;margin-top:10px;color:#71767b;font-size:13px}
/* telegram */
.pm-tg{background:#0e1621;border-color:rgb(255 255 255/.06)}
.pm-tg .pm-bubble{background:#182533;border-radius:14px 14px 14px 4px;padding:8px 12px 18px;position:relative;min-width:0;max-width:520px}
.pm-tg .pm-bubble b{color:#8fb8ff;font-size:13px;display:block;margin-bottom:2px}
.pm-tg .pm-time{position:absolute;right:10px;bottom:4px;font-size:11px;color:#6b7c8f}
/* instagram */
.pm-ig{flex-direction:column;background:#000;gap:0;padding:0;overflow:hidden}
.pm-ig .pm-ig-img{aspect-ratio:1;max-height:260px;background:#111;display:grid;place-items:center;font:600 20px var(--display);color:#666}
.pm-ig .pm-main{padding:12px 14px 14px}
/* tiktok */
.pm-tt{position:relative;padding:0;overflow:hidden;aspect-ratio:9/13;max-height:360px;background:#000}
.pm-tt .pm-tt-bg{position:absolute;inset:0;filter:blur(18px) saturate(1.2) brightness(.55);transform:scale(1.15)}
.pm-tt .pm-tt-bg span{display:none}
.pm-tt .pm-tt-over{position:absolute;left:14px;right:60px;bottom:16px;text-shadow:0 1px 2px rgb(0 0 0/.8)}
.pm-tt .pm-tt-over b{display:block;font-weight:700;margin-bottom:4px}
.pm-tt .pm-body{font-size:13px;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
/* thesis: form left, thread right */
.th-grid{grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:start}
.th-aside{position:sticky;top:0}
.pm-thread{display:flex;flex-direction:column;gap:8px}
.pm-thread .pm{border-radius:14px}
.pm-thread .pm+.pm{margin-top:-2px}
@media (max-width:1100px){.th-grid{grid-template-columns:minmax(0,1fr)}.th-aside{position:static}}
.xm.s{color:var(--sell)}

/* ---- create: the picture is the first thing, at a size that means it ------ */
.drop.big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px;min-height:0;border-radius:var(--r-panel)}
.drop.big .pv{width:148px;height:148px;border-radius:20px;background:var(--panel2);display:grid;place-items:center;overflow:hidden;color:var(--mute2);box-shadow:inset 0 0 0 1px rgb(255 255 255/.05)}
.drop.big .pv:empty::after{content:none}
.drop.big .pv img{width:100%;height:100%;object-fit:cover;display:block}
.drop.big .pv .mk{opacity:.55}
.drop.big:hover .pv .mk{opacity:.9;color:var(--acc2)}
.drop.big.has{border-style:solid;border-color:color-mix(in srgb,var(--buy) 45%,var(--hair2))}
.drop-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.drop-txt b{font-family:var(--display);font-size:14px}
.drop-txt span{font-size:13px;color:var(--mute);line-height:1.5;max-width:46ch}
@media (max-width:560px){.drop.big{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.drop-txt span{max-width:none}}

/* thesis aside shouldn't run off the screen */
.th-aside{max-height:calc(100vh - var(--top) - var(--status) - 48px);overflow:auto;padding-right:2px}
.card .cstats span{white-space:nowrap}
.card:not(.hero) .cstats div{padding:9px 10px}
.card:not(.hero) .cstats b{font-size:15px}
.pill.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}

/* ---- phone shell: one row up top, one row at the bottom ------------------- */
@media (max-width:860px){
  .topbar:not(:has(.t-coin)){flex-wrap:nowrap;height:var(--top);padding-top:0;padding-bottom:0}
  .topbar .t-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
  #walletBtn{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px}
  .statusbar{gap:var(--s6);padding:0 var(--s6);font-size:11px;overflow:hidden}
  .statusbar>span,.statusbar>a{white-space:nowrap;flex:none}
  .statusbar a[href="#activity"],.statusbar a[href="#learn"]{display:none}
}

/* ---- create: socials you have, and the ones Surreal makes --------------- */
.build-offer{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--r-panel);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--buy) 7%,transparent));border:1px solid color-mix(in srgb,var(--acc) 28%,transparent)}
.bo-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.bo-txt b{font-family:var(--display);font-size:14px}
.bo-txt span{font-size:13px;color:var(--ink2);line-height:1.5;max-width:58ch}
.bo-acts{display:flex;flex-direction:column;gap:8px;flex:none}
.bo-acts .btn{justify-content:center;white-space:nowrap}
@media (max-width:860px){.build-offer{grid-template-columns:minmax(0,1fr)}.bo-acts{flex-direction:row;flex-wrap:wrap}}
.bo-acts .btn:not(.chrome){border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:rgb(0 0 0/.22)}

/* ---- model suggestions ---------------------------------------------------- */
.ai-panel .ai-block{margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--hair) 70%,transparent)}
.ai-panel .ai-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.ai-block>.l{display:block;margin-bottom:6px}
.ai-block p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2);max-width:70ch}
.ai-list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ai-list li+li{margin-top:4px}
.ai-list.risk li::marker{color:var(--warn)}
.ai-sugs{display:flex;flex-direction:column;gap:8px}
.ai-sug{border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}
.ai-sug-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.ai-sug p{margin:0;font-size:13.5px;line-height:1.5}
.ai-src{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.ai-src a{font-size:12px;color:var(--mute);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-src a:hover{color:var(--ink)}
.ai-nokey{border-color:color-mix(in srgb,var(--warn) 40%,var(--hair))}
.ai-nokey code{background:rgb(0 0 0/.3);padding:1px 6px;border-radius:6px}
.xq{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent);font-size:13px}
.xq:first-of-type{border-top:0}
.xq.failed b{color:var(--sell)} .xq.posted b{color:var(--buy)}
.keys .keyrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent)}
.keys .keyrow:first-of-type{border-top:0}
.kdot{width:9px;height:9px;border-radius:50%;background:var(--mute2);flex:none}
.kdot.on{background:var(--buy);box-shadow:0 0 0 3px color-mix(in srgb,var(--buy) 22%,transparent)}
.kdot.off{background:var(--mute2)}
.keys code{background:rgb(0 0 0/.3);padding:1px 6px;border-radius:6px}
.modal-or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--mute2);font-size:12px}
.modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ===========================================================================
   SIDEBAR — the one surface on screen at all times, so it earns real work.
   Was: a 20px wordmark, Unicode glyphs at inconsistent weights, nine flat rows
   with a grey 0 beside most of them, and a version tag competing with the logo.
   =========================================================================== */
.sb-head{padding:18px 16px 12px}
.brand{gap:11px}
.brand-mark{width:32px}
.brand-word{font-size:21px;letter-spacing:-.04em}
.brand-ver{display:none}            /* version belongs in Settings, not beside the logo */

/* search: a field, not a row of text */
.sidebar .search{margin:0 12px 10px;height:36px;border-radius:var(--r-ctl);
  background:rgb(0 0 0/.22);border:1px solid color-mix(in srgb,var(--hair) 80%,transparent);
  display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--mute2)}
.sidebar .search:focus-within{border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:rgb(0 0 0/.3)}
.sidebar .search input{flex:1;min-width:0;background:none;border:0;outline:none;
  font-size:13px;color:var(--ink)}
.sidebar .search input::placeholder{color:var(--mute2)}
.sidebar .search kbd{font:500 10px/1 var(--mono);color:var(--mute2);
  border:1px solid var(--hair);border-radius:5px;padding:3px 5px;flex:none}

/* coin rows: the picture is the identifier, so give it room */
.llist{padding:0 8px;display:flex;flex-direction:column;gap:2px}
.litem{grid-template-columns:36px minmax(0,1fr) auto;gap:11px;padding:7px 8px;border-radius:12px}
.litem .av{width:36px;height:36px;border-radius:11px}
.litem b{font-size:13.5px;letter-spacing:-.01em}
.litem.on{box-shadow:inset 2px 0 0 var(--acc)}

/* nav: grouped by spacing, one drawn icon set, labels you can actually read */
.sb-nav{padding:6px 8px 0}
.nav-g+.nav-g{margin-top:14px;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--hair) 55%,transparent)}
.sb-nav a{gap:11px;padding:0 10px;min-height:38px;border-radius:10px;
  font-size:13.5px;color:var(--ink2);font-weight:500;letter-spacing:-.005em}
.sb-nav a .nic{flex:none;color:var(--mute);transition:color var(--t-fast,.14s) ease}
.sb-nav a:hover{background:var(--panel);color:var(--ink)}
.sb-nav a:hover .nic{color:var(--ink2)}
.sb-nav a.on{font-weight:600}
.sb-nav a.on .nic{color:var(--acc)}
.sb-nav a .cnt{margin-left:auto;font:600 11px/1 var(--mono);padding:3px 7px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink2)}
.sb-nav a.on .cnt{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--ink)}

/* footer: the balance is the number you check, so it leads */
.sb-foot{padding:12px;gap:10px}
.funder{border-radius:var(--r-panel);padding:11px 12px;
  background:rgb(0 0 0/.2);border-color:color-mix(in srgb,var(--hair) 80%,transparent)}
.funder:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.funder b{font-size:12px;color:var(--mute);font-family:var(--body);font-weight:600}
.funder .bal{font-size:14px;font-weight:600;color:var(--ink)}
.sb-btns{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px}
.sb-btns .btn{justify-content:center}

/* ===========================================================================
   FEEL — colour depth, press response, and the one celebratory moment.
   Everything here answers an action. Nothing animates on its own except the
   launch, which happens once and is the product's whole reason to exist.
   =========================================================================== */
:root{
  /* The accent was one flat violet doing every job. Three stops instead: a
     brighter head for focus and active states, the base for fills, a deep one
     for shadows that should read as coloured rather than grey. */
  --acc-hi:#a78bff;
  --acc-lo:#5b3fd6;
  --acc-glow:rgb(139 109 255/.45);
  --press:cubic-bezier(.2,.8,.3,1);
}
/* Ambient depth: a single wash behind everything so flat panels sit in a room
   rather than on a sheet. Fixed, so it never moves while content scrolls. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 480px at 18% -8%, color-mix(in srgb,var(--acc) 13%,transparent), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, color-mix(in srgb,var(--buy) 7%,transparent), transparent 58%);
}
:root[data-theme="light"] body::after{opacity:.45}
/* same reason: the lighter backdrop belongs to the light theme only */

/* ---- press ---------------------------------------------------------------
   A button that moves 1px is a button you wonder about. Scale reads as
   pressure, and 90ms is fast enough to feel like cause and effect. */
.btn,.mode,.pad button,.litem,.sb-nav a,.tabs button,.seg button{
  transition:transform 90ms var(--press),background var(--t-fast) ease,
             border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,color var(--t-fast) ease;
}
.btn:active:not(:disabled),.mode:active,.pad button:active:not(:disabled),
.tabs button:active,.seg button:active{transform:scale(.965)}
.litem:active,.sb-nav a:active{transform:scale(.985)}
.btn:not(:disabled):hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}

/* the primary action should look powered */
.btn.chrome{position:relative;overflow:hidden;box-shadow:0 1px 0 rgb(255 255 255/.22) inset,0 6px 18px -8px var(--acc-glow)}
.btn.chrome:not(:disabled):hover{filter:brightness(1.06) saturate(1.04);box-shadow:0 1px 0 rgb(255 255 255/.28) inset,0 10px 26px -10px var(--acc-glow)}
.btn.chrome:active:not(:disabled){filter:brightness(.97)}
.btn{position:relative;overflow:hidden}

/* the ring starts where the pointer landed */
.rip{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgb(255 255 255/.34),rgb(255 255 255/0) 68%);
  transform:scale(0);opacity:.85;animation:rip 480ms var(--ease-out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---- tabs: an indicator that travels, so the eye follows the change ------- */
.tabs,.seg{position:relative}
.tabs button,.seg button{position:relative;z-index:1}
.tabs button.on::after,.seg button.on::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc-hi),transparent);
  animation:slideIn 260ms var(--ease-out)}
@keyframes slideIn{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}

/* ---- focus: designed, not the browser default ---------------------------- */
:focus-visible{outline:2px solid var(--acc-hi);outline-offset:2px;border-radius:var(--r-ctl)}
.btn:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}

/* ---- the sound switch ----------------------------------------------------- */
.sfx{background:none;border:0;cursor:pointer;color:var(--mute);display:inline-flex;
  align-items:center;padding:3px;border-radius:6px;line-height:0;
  transition:color var(--t-fast) ease,background var(--t-fast) ease}
.sfx:hover{color:var(--ink);background:var(--panel)}
.sfx.off{color:var(--mute2)}

/* ---- live things should breathe, quietly --------------------------------- */
.dot.live{animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--buy) 22%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--buy) 7%,transparent)}}
.card.is-live .c-live{animation:pulseDot 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .rip{display:none}
  .dot.live,.card.is-live .c-live,.tabs button.on::after,.seg button.on::after{animation:none}
  .btn:active:not(:disabled),.mode:active,.litem:active{transform:none}
}

/* ---- run sheet ------------------------------------------------------------ */
.ag-sum .ag-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.ag-sum .ag-figs div{background:rgb(0 0 0/.26);border-radius:12px;padding:11px 13px}
.ag-sum .ag-figs b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em}
.ag-sum .ag-figs span{font-size:11px;color:var(--mute)}
.ag-warn{border-color:color-mix(in srgb,var(--warn) 42%,var(--hair));
  background:color-mix(in srgb,var(--warn) 7%,transparent)}
.ag-warn b{font-family:var(--display);font-size:13px;display:block;margin-bottom:5px}
.ag-warn p{margin:0;font-size:13px;line-height:1.55;color:var(--ink2);max-width:66ch}
.ag-list{padding:0}
.ag-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:13px;align-items:start;
  padding:15px 16px;border-top:1px solid color-mix(in srgb,var(--hair) 55%,transparent)}
.ag-step:first-child{border-top:0}
.ag-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:600 12px/1 var(--mono);background:var(--panel2);color:var(--mute);margin-top:1px}
.ag-step b{font-family:var(--display);font-size:13.5px;margin-right:8px}
.ag-step p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--mute);max-width:60ch}
.ag-step .btn{margin-top:1px}
.ag-step.done .ag-n{background:color-mix(in srgb,var(--buy) 22%,transparent);color:var(--buy)}
.ag-step.running .ag-n{background:color-mix(in srgb,var(--acc) 26%,transparent);color:var(--acc-hi);
  animation:pulseDot 1.2s ease-in-out infinite}
.ag-step.failed .ag-n{background:color-mix(in srgb,var(--sell) 22%,transparent);color:var(--sell)}
.ag-msg{font-size:12.5px!important;margin-top:6px!important}
.ag-msg.done{color:var(--buy)!important} .ag-msg.failed{color:var(--sell)!important}
@media (max-width:560px){.ag-step{grid-template-columns:26px minmax(0,1fr);gap:10px}
  .ag-step .btn{grid-column:2;justify-self:start;margin-top:8px}}

/* ---- Run the launch: the conversation -----------------------------------
   A chat has one job the rest of the console does not: it has to feel like
   someone is on the other end. So the bubbles are asymmetric, the thinking
   state is three dots rather than a spinner, and the thread keeps its own
   scroll so the composer never leaves the screen on a phone. */
.ag-chat-panel{display:flex;flex-direction:column}
.ag-chat{display:flex;flex-direction:column;gap:var(--s5);max-height:min(46vh,420px);
  overflow-y:auto;padding:var(--s2) var(--s1) var(--s5);scroll-behavior:smooth}
.ag-msg-row{display:flex}
.ag-msg-row.user{justify-content:flex-end}
.ag-bub{max-width:min(86%,52ch);padding:var(--s5) var(--s6);border-radius:16px;
  font-size:var(--fs2);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ag-msg-row.assistant .ag-bub{background:var(--panel2);color:var(--ink);border-bottom-left-radius:5px}
/* dark ink on the fill, same as every other filled control here */
.ag-msg-row.user .ag-bub{background:var(--acc);color:#0e0b1f;border-bottom-right-radius:5px}
.ag-bub.thinking{display:flex;gap:4px;align-items:center;padding:14px var(--s6)}
.ag-bub.thinking i{width:6px;height:6px;border-radius:50%;background:var(--mute);
  animation:agdot 1.2s infinite ease-in-out}
.ag-bub.thinking i:nth-child(2){animation-delay:.16s}
.ag-bub.thinking i:nth-child(3){animation-delay:.32s}
@keyframes agdot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.ag-chat-empty{padding:var(--s7) var(--s2) var(--s5)}
.ag-chat-empty b{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}
.ag-chat-empty p{margin:0;color:var(--mute);font-size:var(--fs1);max-width:52ch;line-height:1.5}
.ag-chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.ag-compose{display:flex;gap:var(--s4);align-items:flex-end;margin-top:var(--s5)}
.ag-compose textarea{flex:1;resize:none;min-height:40px;max-height:140px;line-height:1.45;padding-top:9px}
.ag-compose .btn{flex:none;height:40px}
@media (prefers-reduced-motion:reduce){.ag-bub.thinking i{animation:none}.ag-chat{scroll-behavior:auto}}

/* ---- Fund ---------------------------------------------------------------
   One box treatment at every scale: panel fill, 12px radius, a single cool
   hairline. Labels are 12px and grey, values carry the weight, and the only
   large type on the screen is the number that matters. Copy is two lines at
   most -- a deposit screen that needs a paragraph has already failed. */
.fund{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s6)}
.fcard{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r3);padding:var(--s7)}
.fcard.mid{display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.fcard-h{font-size:var(--fs4);font-weight:600;letter-spacing:-.01em}

/* balance */
.fcard.hero{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s8) var(--s7)}
.fh-top{display:flex;align-items:center;gap:var(--s4)}
.fh-lab{font-size:var(--fs1);color:var(--mute)}
.fdot{font-size:var(--fs0);font-weight:600;padding:3px 9px;border-radius:var(--rf);
  background:color-mix(in srgb,var(--buy) 16%,transparent);color:var(--buy)}
.fdot.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.fh-amt{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.025em;
  font-size:clamp(38px,11vw,52px);display:flex;align-items:baseline;gap:2px}
.fh-amt em{font-style:normal;color:var(--mute2)}
.fh-amt i{font-style:normal;font-size:var(--fs4);color:var(--mute);font-weight:600;margin-left:7px}
.fh-sub{font-size:var(--fs1);color:var(--mute)}
.fh-row{display:flex;gap:var(--s4);margin-top:var(--s4)}

/* the one button */
.fb{appearance:none;border:1px solid var(--hair);background:var(--panel2);color:var(--ink);
  height:40px;padding:0 var(--s7);border-radius:var(--r2);font:inherit;font-size:var(--fs2);
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s3);text-decoration:none;transition:background .13s ease,transform .08s ease}
.fb:hover:not(:disabled){background:var(--panel3)}
.fb:active:not(:disabled){transform:translateY(1px)}
.fb:disabled{opacity:.42;cursor:not-allowed}
/* The house convention is dark ink on a saturated fill (.btn.chrome, .btn.buy),
   not white. White on this violet is 3.4:1, which fails at 13px; the dark ink is
   4.9:1 and matches every other filled button in the app. --acc2 is a pale
   lavender meant for text, so it is not a hover fill. */
.fb.primary{background:var(--acc);border-color:transparent;color:#0e0b1f}
.fb.primary:hover:not(:disabled){background:var(--acc);filter:brightness(1.06)}
.fb.sm{height:30px;padding:0 var(--s5);font-size:var(--fs1)}
.fb.wide{width:100%}

/* chain selector */
.fsel{position:relative;z-index:5;width:100%;max-width:230px;display:flex;align-items:center;gap:var(--s4);
  background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r3);
  padding:10px var(--s6);cursor:pointer;font-size:var(--fs3);font-weight:600;user-select:none}
.fsel:hover{background:var(--panel3)}
.fsel svg{flex:none;color:var(--mute)}
/* --panel is a translucent layer over the page, which is right for a card and
   wrong for a menu: at 3% it let the QR behind it show straight through. A menu
   floats, so it needs a fill of its own. */
.fdrop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;padding:var(--s2);
  background:var(--base);background-image:linear-gradient(var(--panel2),var(--panel2));
  border:1px solid var(--hair2);border-radius:var(--r3);
  box-shadow:0 18px 40px -16px rgb(0 0 0/.65)}
.fdrop button{width:100%;display:flex;align-items:center;gap:var(--s4);background:transparent;
  border:0;color:var(--ink);padding:9px var(--s5);border-radius:var(--r1);cursor:pointer;
  font:inherit;font-size:var(--fs2);font-weight:600;text-align:left}
.fdrop button:hover{background:var(--panel3)}
.fdrop button.on{background:var(--acc-soft);color:var(--acc)}
.fsoon{font-size:var(--fs0);font-weight:600;color:var(--mute2);
  background:var(--inset);padding:2px 7px;border-radius:var(--rf)}

/* QR + address */
.qr-slot{width:168px;height:168px;border-radius:var(--r3);background:#fff;overflow:hidden;
  display:grid;place-items:center;padding:0}
.qr-slot .qr{display:block;width:100%;height:100%}
.qr-ph{font-size:var(--fs0);color:#8d87a6;text-align:center;padding:0 10px;line-height:1.4}
.faddr{width:100%;display:flex;align-items:center;gap:var(--s5);text-align:left;cursor:pointer;
  background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--s6);color:var(--ink);font:inherit}
.faddr span{flex:1;min-width:0;font-size:var(--fs1);line-height:1.45;word-break:break-all}
.faddr svg{flex:none;color:var(--mute)}
.faddr:hover{background:var(--panel3)}

/* micro copy -- 12px, grey, never more than two lines */
.fmicro{font-size:var(--fs1);line-height:1.5;color:var(--mute);margin:0}
.fmicro.mid{text-align:center}

/* token rows */
.flist{width:100%;display:flex;flex-direction:column;gap:var(--s3)}
.frow{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);
  background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r3)}
.frow.on{border-color:var(--acc)}
.fav{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--inset);font-size:var(--fs0);font-weight:700;letter-spacing:.02em}
.fid{min-width:0;display:flex;flex-direction:column;gap:1px}
.fid b{font-size:var(--fs2);font-weight:600}
.fid span{font-size:var(--fs0);color:var(--mute)}
.fnum{margin-left:auto;font-family:var(--mono);font-size:var(--fs2)}
.fquote{width:100%;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  background:var(--inset);border:1px solid var(--hair);border-radius:var(--r3)}
.fq-amt{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em}
.fq-amt i{font-style:normal;font-size:var(--fs2);color:var(--mute);margin-left:5px}

/* label left, value right */
.fkv{width:100%;display:flex;align-items:baseline;gap:var(--s4);font-size:var(--fs1)}
.fkv span{color:var(--mute)}
.fkv b{margin-left:auto;font-weight:600}

/* card tab */
.famt{font-family:var(--display);font-size:46px;font-weight:700;letter-spacing:-.025em;line-height:1}
.famt span{color:var(--mute2);margin-right:2px}
.famt.zero{color:var(--mute2)}
.fchips{display:flex;gap:var(--s3);width:100%}
.fchip{flex:1;height:36px;border-radius:var(--r2);border:1px solid var(--hair);
  background:var(--panel2);color:var(--ink);font:inherit;font-size:var(--fs2);font-weight:600;cursor:pointer}
.fchip:hover{background:var(--panel3)}
.fchip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.fopt{width:100%;display:flex;align-items:center;gap:var(--s5);padding:var(--s6);
  background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r3)}
.fopt.off{opacity:.55}
.fopt svg{margin-left:auto;color:var(--mute)}
.fopt .fid span{color:var(--mute)}

/* empty + soon */
.fblank{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s5);
  padding:var(--s8) var(--s6);text-align:center;font-size:var(--fs2);color:var(--ink2)}
.fblank span{font-size:var(--fs1);color:var(--mute);max-width:34ch;line-height:1.5}
.fblank.bad{color:var(--sell)}
.fsoon-box{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding:var(--s7) var(--s6);text-align:center;background:var(--inset);
  border:1px solid var(--hair);border-radius:var(--r3)}
.fsoon-box b{font-size:var(--fs2)}
.fsoon-box span{font-size:var(--fs1);color:var(--mute);max-width:36ch;line-height:1.5}

@media (max-width:460px){
  .fund{max-width:none}
  .fcard{padding:var(--s6)}
  .fh-row{flex-wrap:wrap}
  .fh-row .fb{flex:1;min-width:92px}
}

/* bridge amount entry */
.fbridge{width:100%;display:flex;flex-direction:column;gap:var(--s5)}
.frow-lab{font-size:var(--fs1);color:var(--mute)}
.famt-in{display:flex;align-items:center;gap:var(--s4);background:var(--panel2);
  border:1px solid var(--hair);border-radius:var(--r3);padding:var(--s4) var(--s6)}
.famt-in span{color:var(--mute);font-size:var(--fs2);font-weight:600}
.famt-f{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);
  font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em;outline:none;padding:0}
.famt-f::-webkit-outer-spin-button,.famt-f::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.famt-f{-moz-appearance:textfield}

/* ---- "write me a post" ---------------------------------------------------
   Sits above the templates because asking for what you want is the faster
   path; the templates are the fallback, not the main event. */
.askbox textarea{resize:vertical;min-height:52px}
.askouts{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s6)}
.askout{background:var(--inset);border:1px solid var(--hair);border-radius:var(--r3);padding:var(--s6)}
.askout-t{font-size:var(--fs3);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ask-presets{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--hair)}
.ask-plab{display:block;font-size:var(--fs1);color:var(--mute);margin-bottom:var(--s5)}
.ask-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s3)}
.ask-chip{appearance:none;border:1px solid var(--hair);background:var(--panel2);color:var(--ink);
  border-radius:var(--r2);padding:9px var(--s5);font:inherit;font-size:var(--fs1);font-weight:600;
  cursor:pointer;text-align:left;transition:background .13s ease,border-color .13s ease}
.ask-chip:hover:not(:disabled){background:var(--panel3);border-color:var(--hair2)}
.ask-chip:active:not(:disabled){transform:translateY(1px)}
.ask-chip:disabled{opacity:.45;cursor:not-allowed}
.built{margin-top:var(--s6)}
.built-frame{width:100%;height:420px;border:1px solid var(--hair);border-radius:var(--r3);background:#fff}
@media (max-width:700px){.built-frame{height:320px}}

/* things the chat made, shown where they were asked for */
.ag-made{background:var(--panel2);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.ag-made-h{font-size:var(--fs1);color:var(--mute)}
.ag-made-p{background:var(--inset);border:1px solid var(--hair);border-radius:var(--r2);padding:var(--s5)}
.ag-site{width:100%;height:300px;border:1px solid var(--hair);border-radius:var(--r2);background:#fff}

/* ---- Content kit, second pass -------------------------------------------
   The first version had a page title the top bar already showed, a 300px
   preview inside the conversation that pushed the composer off screen, and
   every kept post rendered as two large boxes side by side. All of that is
   one column now, one box treatment, and the mock is behind a toggle. */
.kit2{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s6)}
.kit2-top{display:flex;align-items:baseline;gap:var(--s4);font-size:var(--fs1)}
.kit2-top b{font-family:var(--display);font-size:var(--fs4)}
.kit2-top span{color:var(--mute)}
.kit2-chat{display:flex;flex-direction:column;gap:var(--s5)}
.kit2-intro b{display:block;font-family:var(--display);font-size:var(--fs4);margin-bottom:3px}
.kit2-intro span{font-size:var(--fs1);color:var(--mute);line-height:1.5;display:block;max-width:52ch}
.kit2-chat .ag-chat{max-height:min(46vh,440px);gap:var(--s4);padding:0}
.kit2-starts{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:var(--s3)}

/* one option, one card */
.kit2-opt,.kit2-item{background:var(--inset);border:1px solid var(--hair);
  border-radius:var(--r3);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.kit2-opt-h{display:flex;align-items:baseline;gap:var(--s4);font-size:var(--fs1);color:var(--mute)}
.kit2-opt-h b{color:var(--ink);font-size:var(--fs2)}
.kit2-opt-t{font-size:var(--fs3);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.kit2-acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.kit2-site{width:100%;height:190px;border:1px solid var(--hair);border-radius:var(--r2);background:#fff}
.kit2-ta{resize:vertical;min-height:72px;font-size:var(--fs2);line-height:1.5}
.kit2-mock{margin-top:var(--s2)}

.kit2-made{display:flex;flex-direction:column;gap:var(--s4)}
.kit2-lab{font-size:var(--fs1);color:var(--mute);margin-bottom:2px}
@media (max-width:560px){
  .kit2-site{height:150px}
  .kit2-acts .fb{flex:1;min-width:76px}
}

/* pictures in the kit chat */
.kc-thumbs{display:flex;gap:var(--s3);flex-wrap:wrap}
.kc-thumb{position:relative;width:56px;height:56px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--hair)}
.kc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kc-thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgb(0 0 0/.62);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:grid;place-items:center}
.kc-clip{flex:none;width:40px;padding:0;color:var(--mute)}
.kc-clip:hover{color:var(--ink)}
.kc-sent{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.kc-sent img{width:84px;height:84px;object-fit:cover;border-radius:var(--r2);display:block}
.think-lab{font-size:var(--fs1);color:var(--mute);margin-right:4px}
.ag-bub.thinking i{width:7px;height:7px}

/* who you're talking to */
.agents{display:flex;gap:var(--s3);overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.agents::-webkit-scrollbar{display:none}
.agent{flex:none;appearance:none;border:1px solid var(--hair);background:var(--panel2);color:var(--mute);
  border-radius:var(--rf);padding:7px var(--s6);font:inherit;font-size:var(--fs1);font-weight:600;
  cursor:pointer;white-space:nowrap;transition:color .13s ease,background .13s ease,border-color .13s ease}
.agent:hover:not(:disabled){color:var(--ink);background:var(--panel3)}
.agent.on{background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc)}
.agent:disabled{opacity:.5;cursor:not-allowed}

/* ---- Phone -------------------------------------------------------------
   Measured at 390x844 with a live coin seeded, not guessed. Each rule below
   is a thing that was actually broken or unusable on a phone, in the order
   it was found. Nothing here fires above 560px, so the desktop layout that
   was signed off is untouched. */
@media (max-width:560px){

  /* The composer put a clip button, a growing textarea and Send on one row,
     which left the textarea about 200px. Its own placeholder wrapped to two
     lines inside a 40px box and got cut in half. On a phone the message gets
     the full width and the two buttons sit under it. */
  .ag-compose{flex-wrap:wrap}
  .ag-compose textarea{order:-1;flex:1 0 100%;min-height:58px;max-height:40vh}
  .ag-compose .fb{height:42px}
  .ag-compose .fb.primary{margin-left:auto;padding:0 var(--s8)}

  /* 340px of chart on an 844px screen is most of the phone, and it pushed the
     trades and the buy box below the fold. On a short chart the timeframe pill
     and the legend, which float over the canvas, landed on top of the candles
     and the price axis -- so on a phone they come out of the overlay and sit in
     a strip above the plot instead. */
  .chart{height:auto;display:flex;flex-wrap:wrap;align-items:center;
    gap:var(--s3);padding:var(--s3)}
  .chart .tf{position:static;order:1}
  .chart .legend{position:static;order:2;margin-left:auto;font-size:11px;gap:9px}
  .chart canvas{order:3;flex:1 0 100%;height:200px}
  .bubble{height:260px}

  /* Side-scrolling tables are fine, losing your place in them is not: the
     name column stays put so you always know which row you are reading. */
  .tw table td:first-child,
  .tw table th:first-child{position:sticky;left:0;z-index:1;
    /* --panel and --bg2 are 2-3% translucent layers, so using either here let
       the scrolling columns show straight through the pinned one and the text
       overlapped. A pinned column has to be genuinely opaque: --base is the
       page colour underneath, and the hairline makes the seam deliberate. */
    background:var(--base);border-right:1px solid var(--hair);
    /* 165px of a 356px scroller is half the phone spent on a column that never
       moves. The name is what you need to keep your place; the address under it
       can truncate. */
    max-width:120px;overflow:hidden;text-overflow:ellipsis}

  /* A row that scrolls sideways has to look like it. Without this the tab
     strip and the agent chips just appear to be cut off at the edge. */
  .tabs,.agents,.tw{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .tabs:not(:hover),.agents:not(:hover){scroll-snap-type:x proximity}
  .tabs button,.agents .agent{scroll-snap-align:start}

  /* The status bar ran off the edge mid-word. On a phone it keeps the two
     things that change -- the connection and the SOL price -- plus the
     wallet state and the sound toggle. The links it dropped are all in the
     menu, one tap away. */
  .statusbar .mono.mute,
  .statusbar a{display:none}
  .statusbar{gap:var(--s6)}

  /* 13px tall is not a button anyone can hit. */
  .sfx{min-width:34px;min-height:34px}

  /* Inline links inside body copy were 16-18px of target. */
  .stack p a,.note a,.empty a{display:inline-block;padding:3px 0}

  /* The launches list reserves 120px whether or not there is anything in it, so
     on a short phone an empty "No launches yet" was pushing half the nav out of
     reach. Let it size to what it holds and cap it lower; the nav is what people
     open this drawer for. */
  .llist{min-height:0;max-height:26vh}
}

/* ---- Collapsible explainer -------------------------------------------
   A block of "how this works" copy is useful once and then it is just
   distance between you and the thing you came for. On a phone it folds to
   its heading; from 561px up it is always open and loses the marker, so the
   desktop layout reads exactly as it did before. */
.explain>summary{cursor:default;list-style:none}
.explain>summary::-webkit-details-marker{display:none}
@media (max-width:560px){
  .explain>summary{cursor:pointer;display:flex;align-items:center;gap:var(--s3)}
  .explain>summary::after{content:"";margin-left:auto;width:7px;height:7px;flex:none;
    border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
  .explain[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
}