/*
 * DITTO rework: one stylesheet for every page.
 * Replaces ditto.css + pages.css + wallet.css + index.html's inline <style>.
 *
 * It styles two kinds of markup:
 *   1. what the pages themselves contain (header, hero, forms, FAQ rows...);
 *   2. what the site's scripts write into the pages (coin cards, the account
 *      panels, the trade panel, the chart, the wallet dialog). Those class
 *      names come from live.js / manage.js / account.js / coin.js / trade.js /
 *      chart.js / create.js / search.js / wallet.js and must not be renamed.
 *
 * The colour names (--acid, --sage, --line, --positive ...) are also read by
 * the scripts (chart.js reads them to draw; several scripts write
 * style="color:var(--sage)"), so the names stay; only values may change.
 *
 * Look: flat fills, hairline rules, square 4px corners, no blur, no shadows,
 * one accent colour. Sizes are in rem and the root size grows with the
 * screen, so a 2560px screen gets larger type, not a thin column.
 */

/* ------------------------------------------------------------ tokens */
:root{
  --bg:#0b0812; --surface:#120d1c; --surface-soft:#191227; --surface-raised:#231937;
  --ink:#f4f0fb; --sage:#b9aed8; --subtle:#a698c8;
  --acid:#b44dff; --acid-hover:#c478ff; --acid-ink:#160026;
  --acid-soft:#b44dff1c; --acid-line:#b44dff73;
  --positive:#34d399; --warn:#f0b429; --negative:#ff5a6e;
  --base-blue:#0052ff; --sol-green:#14f195;
  --line:#2a1f40; --line-strong:#4a3672;
  --font-d:'Pixelify Sans',Manrope,sans-serif;
  --font-b:'Manrope',sans-serif;
  --font-m:'IBM Plex Mono',monospace;
  --gut:clamp(16px,4vw,112px);
  --r:4px;
  --tap:48px;
  --head:4.5rem;
  --fs-label:max(12px,.72rem);   /* the small mono label: never under 12px on a phone, 13px+ on a wide screen */
  --cellpad:clamp(1rem,1.6vw,2.5rem);
}
@media (min-width:1600px){:root{--tap:56px}}

/* ------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{font-size:clamp(15px,.3vw + 11.5px,19px);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 1rem)}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font-b);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body > footer{margin-top:auto}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-b);font-weight:600;line-height:1.15;letter-spacing:-.01em}
/* the pixel display face: only ever at 28px or more (each of these sizes is floored at 28px) */
.disp,.hero-copy h1,.page-head h1,.doc__head h1,.split__lead h2,.section-heading h2,.closer h2,.cp-id h1{font-family:var(--font-d);font-weight:700;line-height:1;letter-spacing:-.005em}
em{font-style:normal;color:var(--acid)}
.mono{font-family:var(--font-m);font-variant-numeric:tabular-nums}
.muted{color:var(--subtle)}
.container{width:100%;max-width:2480px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3rem,5vw,7rem)}
.page{padding-block:clamp(2rem,3.4vw,4.5rem) clamp(3rem,5vw,7rem)}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}

.eyebrow,.field-label{font:500 var(--fs-label) var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.eyebrow{display:flex;align-items:center;gap:.75rem}
.eyebrow::before{content:"";width:1.5rem;height:2px;background:var(--acid)}
.form-note{font-size:.88rem;color:var(--sage);line-height:1.6;max-width:44rem}
.form-note.bad{color:var(--negative)}
.form-note.good{color:var(--positive)}
.form-note a,.qa__a a,.how-list p a{text-decoration:underline;text-decoration-color:var(--acid-line);text-underline-offset:3px}
.form-note a:hover,.qa__a a:hover,.how-list p a:hover{color:var(--acid)}
.quiet{background:none;border:0;font:700 .95rem var(--font-b);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap)}
.quiet:hover{color:var(--acid)}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font:700 .95rem var(--font-b);min-height:var(--tap);padding:.5rem 1.4rem;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .12s,border-color .12s,color .12s}
.btn .arw{font-family:var(--font-m);font-weight:500}
.btn--acid{background:var(--acid);color:var(--acid-ink)}
.btn--acid:hover{background:var(--acid-hover)}
.btn--sec{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--sec:hover{background:var(--surface-soft);border-color:var(--sage)}
.btn--sell{background:var(--negative);color:#1a0509}
.btn--sell:hover{background:#ff7384}
.btn--xl{min-height:4rem;padding:.75rem 2.2rem;font-size:1.15rem}
/* the one primary action of a page */
.btn--hero{min-height:clamp(4rem,4.4vw,5.5rem);padding:.9rem clamp(2rem,2.6vw,3.6rem);font-size:clamp(1.2rem,1.25vw,1.6rem);font-weight:800}
/* a quiet secondary action: a text link, not a button */
.textlink{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);font:600 1rem var(--font-b);color:var(--sage);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:6px}
.textlink:hover{color:var(--ink);text-decoration-color:var(--acid)}
/* disabled: still plainly a button and still readable (light text on a mid fill, with an outline), just not purple */
.btn[disabled],[data-order] [data-order-go]:disabled{background:#2c2145;border-color:var(--line-strong);color:#d6cdee;cursor:not-allowed}
.btn[aria-disabled=true]{cursor:default}

/* small things the scripts write: status pills, filter chips, pad chips, copy buttons */
.pill{display:inline-block;font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;border-radius:2px;border:1px solid var(--line-strong);color:var(--subtle);white-space:nowrap}
.pill--copied{color:var(--positive);border-color:#34d39973}
.pill--dup{color:var(--warn);border-color:#f0b42973}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:max(40px,calc(var(--tap) - 8px));padding:.3rem .85rem;background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--sage);font:600 .85rem var(--font-b);cursor:pointer;transition:border-color .12s,color .12s,background-color .12s}
.chip:hover{border-color:var(--sage);color:var(--ink)}
.chip.on{border-color:var(--acid);background:var(--acid);color:var(--acid-ink)}
.chain{display:inline-flex;align-items:center;justify-content:center;border-radius:2px;font-family:var(--font-m);font-weight:600;color:#fff;flex:none}
.chain--sol{background:#7c3aed}
.chain--pump{background:#0fd38c;color:#04150d}
.chain--stonk{background:#d0ff00;color:#151b04}
.chain--pons{background:#2e86ff;color:#04122b}
.chain--xs{width:1.35rem;height:1.35rem;font-size:var(--fs-label)}
.chain--sm{width:1.5rem;height:1.5rem;font-size:var(--fs-label)}
.chain--md{width:1.8rem;height:1.8rem;font-size:max(13px,.75rem)}
.chain--lg{width:2.5rem;height:2.5rem;font-size:.9rem}
.padmark{width:2.1rem;height:2.1rem;border-radius:2px;object-fit:cover;flex:none;background:var(--bg)}
.padmark--sm{width:1.25rem;height:1.25rem}
.clip,.coin__mintrow .copymint{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 .7rem;background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--sage);font:500 var(--fs-label) var(--font-m);cursor:pointer}
.clip:hover,.coin__mintrow .copymint:hover{color:var(--ink);border-color:var(--acid)}
kbd{flex:none;font:500 var(--fs-label) var(--font-m);border:1px solid var(--line-strong);border-radius:2px;padding:.1rem .4rem;color:var(--subtle)}

/* ------------------------------------------------------------ header */
.site-header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:1rem 1.5rem;min-height:var(--head)}
.wordmark{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;font:700 max(28px,1.5rem) var(--font-d);letter-spacing:.1em}
.wordmark .blob{width:2rem;height:2rem}
.hsearch{position:relative;flex:1;max-width:36rem;margin-left:clamp(0rem,2vw,3rem)}
.hsearch__box,.xsearch{display:flex;align-items:center;gap:.7rem;min-height:46px;padding:0 .9rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--subtle);cursor:text}
.hsearch__box:focus-within,.xsearch:focus-within{border-color:var(--acid)}
.hsearch__box svg,.xsearch svg{flex:none}
.hsearch__box input,.xsearch input{flex:1;min-width:0;min-height:44px;background:none;border:0;outline:0;color:var(--ink);font:500 .95rem var(--font-b)}
.hsearch__box input::placeholder,.xsearch input::placeholder{color:var(--subtle)}
.hsearch__box input::-webkit-search-cancel-button,.xsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.hsearch__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:.35rem}
.hsearch__menu p{padding:.8rem;font-size:.88rem;color:var(--sage)}
.hres{display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem;border-radius:2px;min-height:var(--tap)}
.hres:hover,.hres.on{background:var(--surface-raised)}
.hres img{width:2.25rem;height:2.25rem;border-radius:2px;object-fit:cover;flex:none}
.hres__id{flex:1;min-width:0}
.hres__id b{display:block;font:700 .92rem var(--font-b)}
.hres__id small{display:block;font-size:.8rem;color:var(--subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hres .mono{font-size:var(--fs-label);color:var(--sage);flex:none}
.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.header-actions .pf{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;font:600 .92rem var(--font-b);color:var(--sage)}
.header-actions .pf:hover,.header-actions .x-link:hover{color:var(--ink)}
/* on pages that have their own big Launch button (home, create) the header's Launch is a quiet link */
.header-actions .hlaunch--link{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;font:700 .92rem var(--font-b);color:var(--acid-hover)}
.header-actions .hlaunch--link:hover{color:var(--ink)}
.header-actions .x-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--sage);margin-right:.5rem}

/* ------------------------------------------------------------ home: hero */
.hero{border-bottom:1px solid var(--line)}
/* two columns on one grid: the words (headline, paragraph, the one button) and, right beside them, the diagram */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,38vw,940px));gap:clamp(2rem,4vw,6rem);align-items:center;padding-block:clamp(2.5rem,4.2vw,6rem)}
.hero-grid > *{min-width:0}
.hero-copy h1{font-size:clamp(2.45rem,4.1vw,7.5rem);line-height:.96;margin-top:1.3rem}
.hero-fly{font-family:var(--font-d);font-weight:700;line-height:1;font-size:max(26px,clamp(1.6rem,2.2vw,3.2rem));margin-top:1.1rem}
.hero-body{font-size:1.08rem;line-height:1.65;color:var(--sage);max-width:40rem;margin-top:clamp(1.4rem,2.2vw,3rem)}
.hero-actions{display:flex;align-items:center;gap:.75rem clamp(1.5rem,2vw,2.75rem);flex-wrap:wrap;margin-top:clamp(1.5rem,2vw,2.75rem)}
.hero-strip{display:flex;align-items:center;gap:.5rem .9rem;flex-wrap:wrap;font-size:.85rem;color:var(--sage);margin-top:1.5rem}
.hero-strip .id{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)}
.hero-strip .id b{font:500 max(13px,.85rem) var(--font-m);letter-spacing:.12em}
.hero-strip .ca{font:400 var(--fs-label) var(--font-m);border-left:1px solid var(--line-strong);padding-left:.9rem}
/* the diagram: the coin (Ditto's own mark) on the left, a dashed line to each of the three pads on the right.
   Built from page text, not drawn text, so the labels keep a readable size on every screen. */
.dia{display:grid;grid-template-columns:minmax(0,5fr) minmax(2rem,3fr) auto;gap:clamp(.75rem,1.2vw,1.5rem) 0}
.dia__cap{grid-column:1;grid-row:1;text-align:center;font:500 var(--fs-label) var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.dia__coin{grid-column:1;grid-row:2;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.dia__wires{grid-column:2;grid-row:2;position:relative;min-height:0}
.dia__wires svg{position:absolute;inset:0;width:100%;height:100%}
.dia__pads{grid-column:3;grid-row:2;list-style:none;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.dia__pad{display:flex;align-items:center;gap:clamp(.6rem,.9vw,1.1rem)}
.dia__ring{flex:none;width:clamp(2.75rem,4.2vw,5.5rem);height:clamp(2.75rem,4.2vw,5.5rem);border:2px solid var(--line-strong);border-radius:50%;background:var(--surface);display:grid;place-items:center}
.dia__ring img{width:58%;height:58%;object-fit:contain}
.dia__pad--pump .dia__ring{border-color:#0fd38c}
.dia__pad--stonk .dia__ring{border-color:#d0ff00}
.dia__pad--pons .dia__ring{border-color:#2e86ff}
.dia__pad b{display:block;font:600 max(13px,clamp(.9rem,.95vw,1.25rem))/1.3 var(--font-m)}
.dia__pad i{display:block;font:500 var(--fs-label)/1.3 var(--font-m);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--positive)}
/* a plain caption under the coin, like the one above it */
.dia__vault{grid-column:1/-1;grid-row:3;text-align:center;font:500 var(--fs-label)/1.5 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* ------------------------------------------------------------ home: stats */
/* six columns: three number cells, then the three pads, one per column */
.stats-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line)}
.stats-bar .cell{padding:clamp(1.5rem,2.2vw,2.75rem) 1rem clamp(1.5rem,2.2vw,2.75rem) var(--cellpad);min-width:0}
.stats-bar .cell:first-child{padding-left:0}
.stats-bar .cell + .cell{border-left:1px solid var(--line)}
.stats-bar dt{font:500 var(--fs-label) var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.stats-bar dd{font:700 max(28px,clamp(1.9rem,2.3vw,3.2rem))/1 var(--font-d);margin-top:.8rem;overflow-wrap:anywhere}
/* a number cell reads label, number, caption: the caption is written inside the label and placed under the number */
.stats-bar .cell:not(.cell--pads){display:flex;flex-direction:column}
.stats-bar .cell:not(.cell--pads) dt{display:contents}
.stats-bar dt small{order:2;margin-top:.7rem;font:400 .85rem/1.45 var(--font-b);letter-spacing:0;text-transform:none;color:var(--sage)}
/* the pads cell takes the last three columns, one pad per column */
.stats-bar .cell--pads{grid-column:span 3;padding-inline:0}
.cell--pads dt{padding-left:var(--cellpad)}
.stats-bar dd.padlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font:700 clamp(1.05rem,1.3vw,1.7rem)/1.1 var(--font-b)}
.padlist span{display:flex;align-items:center;gap:clamp(.5rem,.8vw,1rem);padding-left:var(--cellpad);min-height:max(28px,clamp(1.9rem,2.3vw,3.2rem));min-width:0}
.padlist .padmark{width:clamp(2rem,2.3vw,3.2rem);height:clamp(2rem,2.3vw,3.2rem)}

/* ------------------------------------------------------------ home: explore */
/* the section title, then one row: the search box and three segmented controls. The title and the search share the left edge; the search
   grows until the last control ends on the right edge. The coins get the whole width under it. */
.xbar{display:flex;align-items:flex-end;gap:1.25rem clamp(1.25rem,2vw,3rem);flex-wrap:wrap;padding-bottom:clamp(1.5rem,2.2vw,2.75rem)}
.xbar h2{flex-basis:100%;font-size:clamp(2rem,3vw,3.6rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.xbar .xsearch{flex:1 1 16rem;min-height:var(--tap)}
.xfilters{display:flex;flex-wrap:wrap;gap:1rem clamp(1rem,1.4vw,2rem)}
.xgroup{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.xfilters .xgroup{flex:1 1 auto;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:.45rem;min-width:0}
/* a segmented control: the script's own chip buttons, joined into one box */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.seg .chip{border:0;border-radius:0;background:var(--bg);min-height:max(40px,calc(var(--tap) - 2px));padding:.3rem clamp(.7rem,.9vw,1.2rem);white-space:nowrap}
.seg .chip:hover{background:var(--surface-soft)}
.seg .chip.on{background:var(--acid);color:var(--acid-ink)}
.seg .chip:focus-visible{outline-offset:-3px}
.xmain{display:flex;flex-direction:column;gap:clamp(2rem,3vw,3.5rem);min-width:0}
.xhead{display:flex;align-items:baseline;gap:.5rem 1.5rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.xhead h2{font-size:clamp(1.35rem,1.5vw,2.1rem);display:flex;align-items:baseline;gap:.6rem}
.xhead .xn{font:500 max(13px,.85rem) var(--font-m);color:var(--acid-hover);letter-spacing:0}
.xhead .sub{font-size:.92rem;color:var(--sage)}
/* as many columns as fit, and the cards stretch to fill the row: two coins on a wide screen are two wide cards, not two small ones and a gap */
.coin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;margin-top:1.25rem}
.coin-grid > p,.xempty{color:var(--sage);font-size:.95rem;grid-column:1/-1}
.xmore{display:flex;margin-top:1.25rem}
.xmore:has([hidden]){display:none}
.xmore .btn{min-width:14rem}
/* a list with nothing in it (no graduated coin yet, or no match) is one compact line: title, count, the sentence */
.xblock:has(.coin-grid > p){display:flex;align-items:baseline;gap:.4rem 1.5rem;flex-wrap:wrap;padding-block:1rem;border-block:1px solid var(--line)}
.xblock:has(.coin-grid > p) .xhead{border:0;padding:0}
.xblock:has(.coin-grid > p) .xhead .sub{display:none}
.xblock:has(.coin-grid > p) .coin-grid{display:block;margin:0}
/* a coin card (live.js) */
.coinwrap{container-type:inline-size;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .12s}
.coinwrap:hover{border-color:var(--acid)}
.coin{flex:1;display:flex;flex-direction:column;gap:1rem;padding:1.1rem}
.coin__top{position:relative;display:flex;align-items:center;gap:.8rem}
.coin__top img{position:relative;width:3.4rem;height:3.4rem;border-radius:2px;object-fit:cover;flex:none}
/* a coin with no image: live.js writes the symbol's first letter as data-letter on .coin__top;
   it sits on the purple fill behind the picture, and shows when the picture is the gradient */
.coin__top[data-letter]::before{content:attr(data-letter);position:absolute;left:0;top:50%;transform:translateY(-50%);width:3.4rem;height:3.4rem;display:flex;align-items:center;justify-content:center;border-radius:2px;font:700 1.5rem var(--font-d);color:#fff;background:linear-gradient(135deg,#b44dff,#5b21b6)}
.coin__top[data-letter] img[src^="data:"]{visibility:hidden}
.coin__id{flex:1;min-width:0}
.coin__id b{display:block;font:700 1.05rem var(--font-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin__id span{display:block;font-size:.82rem;color:var(--subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copies{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:.7rem;border-block:1px solid var(--line)}
.copies{flex-wrap:wrap}
.copies .lg{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .9rem}
.copies .lg .more{font:500 max(13px,.8rem) var(--font-m);color:var(--sage)}
/* where a coin is live: live.js writes one coloured letter square per pad. Each is shown as the pad's logo and its name instead. */
.copies .lg .chain{width:auto;height:auto;gap:.4rem;background:none;font-size:0}
.copies .lg .chain::before{content:"";flex:none;width:1.25rem;height:1.25rem;border-radius:2px;background:center/cover no-repeat}
.copies .lg .chain::after{font:600 max(13px,.8rem) var(--font-b);color:var(--ink);white-space:nowrap}
.copies .lg .chain--sol::before{content:"\25CE";display:grid;place-items:center;background:#7c3aed;color:#fff;font:600 max(12px,.7rem)/1 var(--font-m)}
.copies .lg .chain--sol::after{content:"Solana"}
.copies .lg .chain--pump::before{background-image:url(/pads/pumpfun.png)}
.copies .lg .chain--pump::after{content:"pump.fun"}
.copies .lg .chain--stonk::before{background-image:url(/pads/stonkfun.svg)}
.copies .lg .chain--stonk::after{content:"stonkfun.xyz"}
.copies .lg .chain--pons::before{background-image:url(/pads/pons.png)}
.copies .lg .chain--pons::after{content:"Pons"}
.cstats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cstats dt,.fundline .fl-meta span{font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.cstats dd{font:700 1.15rem var(--font-b);margin-top:.15rem}
.fundline .fl-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.fundline .fl-meta b{font:500 max(13px,.85rem) var(--font-m);color:var(--acid)}
.coin__mintrow{display:flex;align-items:center;gap:.6rem;padding:0 .5rem 0 1.1rem;min-height:var(--tap);border-top:1px solid var(--line);font:400 max(13px,.8rem) var(--font-m);color:var(--sage)}
.coin__mintrow .mint{color:var(--ink);white-space:nowrap}
/* live.js writes "copy" (then "copied") on this button: it reads "Copy address" (then "Copied address") */
.coin__mintrow .copymint{font-size:max(13px,.8rem);text-transform:capitalize;white-space:nowrap}
.coin__mintrow .copymint::after{content:"address";margin-left:.6ch;text-transform:none}
.coin__mintrow a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.4rem;color:var(--sage)}
.coin__mintrow a:hover{color:var(--acid)}
.coin__mintrow a:first-of-type{margin-left:auto}
/* a wide card (when few coins share a wide row): the same parts, side by side and larger */
@container (min-width:44rem){
  .coin{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"top stats copies" "top stats fund";align-items:center;gap:.9rem clamp(1.5rem,5cqw,4.5rem);padding:1.6rem 1.75rem}
  .coin__top{grid-area:top;gap:1.25rem}
  .coin__top img{width:6.5rem;height:6.5rem}
  .coin__top[data-letter]::before{width:6.5rem;height:6.5rem;font-size:2.6rem}
  .coin__id b{font-size:1.7rem}
  .coin__id span{font-size:1rem}
  .cstats{grid-area:stats}
  .cstats dd{font-size:1.6rem}
  .copies{grid-area:copies;border-top:0;padding-top:0}
  .fundline{grid-area:fund}
  .fundline .fl-meta b{font-size:1.1rem}
  .coin__mintrow{padding-left:1.75rem}
}

/* ------------------------------------------------------------ home: how, log, closer */
.band{border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:clamp(2rem,5vw,8rem);align-items:start}
.split__lead{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.split__lead h2,.section-heading h2{font-size:max(28px,clamp(2rem,3.4vw,4.4rem))}
.split__lead .sub,.section-heading .sub{font-size:1rem;color:var(--sage);max-width:38rem}
.how-list{list-style:none;border-top:1px solid var(--line)}
.how-list li{display:grid;grid-template-columns:clamp(3rem,6vw,8rem) minmax(0,1fr);gap:.5rem 1.5rem;padding-block:clamp(1.5rem,2.2vw,2.75rem);border-bottom:1px solid var(--line)}
.how-list .idx{font:700 max(28px,clamp(1.8rem,2.6vw,3.4rem))/1 var(--font-d);color:var(--acid)}
.how-list h3{font-size:clamp(1.3rem,1.5vw,2rem);margin-bottom:.8rem}
.how-list p{color:var(--sage);max-width:46rem}
.how-list p b{color:var(--ink);font-weight:700}
/* where the 1% goes: a flat three-part bar */
.feebox{width:100%;max-width:34rem;display:flex;flex-direction:column;gap:.9rem}
.feebar{display:flex;height:1.5rem;gap:2px}
.feebar span{display:block}
.fee--vault{flex:67.5;background:var(--acid)}
.fee--ray{flex:25;background:var(--warn)}
.fee--ditto{flex:7.5;background:var(--positive)}
.legend{list-style:none;display:flex;flex-direction:column;font-size:.92rem}
.legend li{display:flex;align-items:center;gap:.7rem;padding-block:.5rem;border-bottom:1px solid var(--line)}
.legend i{width:.7rem;height:.7rem;flex:none}
.legend b{margin-left:auto;font:500 .9rem var(--font-m)}

.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,2.4vw,3rem)}
.section-heading h2,.section-heading h1{margin-top:.9rem}
.section-heading .sub{margin-top:.9rem}
.table-scroll{overflow-x:auto}
table.rounds{width:100%;border-collapse:collapse;font-size:.92rem}
.rounds th{font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.rounds td{padding:1rem .9rem;vertical-align:middle;border-bottom:1px solid var(--line)}
.rounds th:first-child,.rounds td:first-child{padding-left:0}
.rounds th:last-child,.rounds td:last-child{padding-right:0}
.rounds .rnum{font-family:var(--font-m);color:var(--subtle)}
.rounds td.mono{white-space:nowrap;font-size:max(13px,.85rem)}
.rounds .cn b{font-weight:700}
.rounds .cn span{display:block;font-size:.8rem;color:var(--subtle)}
.r-chains{display:inline-flex;align-items:center;gap:.5rem;font:400 max(13px,.8rem) var(--font-m);white-space:nowrap}
.r-chains .arr{color:var(--acid)}
.num-r{text-align:right;font-family:var(--font-m);font-variant-numeric:tabular-nums;white-space:nowrap}
.verified-note{display:block;font-size:var(--fs-label);color:var(--positive)}
.r-date{font:400 max(13px,.8rem) var(--font-m);color:var(--subtle);white-space:nowrap}
.round-txs{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.round-txs a,.round-txs span{font:400 max(13px,.8rem) var(--font-m);color:var(--sage);white-space:nowrap}
.round-txs a:hover{color:var(--acid)}

.closer{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem 4rem;flex-wrap:wrap;padding-block:clamp(3.5rem,7vw,10rem)}
.closer h2{font-size:clamp(2.8rem,8.4vw,13.5rem);line-height:.9}

/* ------------------------------------------------------------ footer */
.site-footer{border-top:1px solid var(--line);padding-block:2.5rem}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-bottom:1.5rem}
.footer-nav{display:flex;gap:0 1.6rem;flex-wrap:wrap;font-size:.9rem;font-weight:600}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--sage)}
.footer-nav a:hover{color:var(--ink)}
.footer-bottom{border-top:1px solid var(--line);padding-top:1.25rem;display:flex;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap;font-size:.8rem;color:var(--subtle)}
.footer-bottom p{max-width:46rem}

/* ------------------------------------------------------------ shared: panels, label/value rows */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;min-width:0}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:1rem}
.panel__head h2,.panel__head h3{font-size:1.25rem;font-weight:700}
.panel__head span{font-size:.8rem;color:var(--subtle)}
.kv{display:flex;align-items:center;gap:.7rem;min-width:0;min-height:var(--tap);border-top:1px solid var(--line)}
.kv:first-child{border-top:0}
.kv .field-label{flex:none}
.kv__v{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:700;text-align:right}
.kv__v.mono{font-size:max(13px,.8rem);font-weight:500}
.kv__v a:hover{color:var(--acid)}
.bal{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r)}
.bal div{padding:.8rem .9rem;min-width:0}
.bal div + div{border-left:1px solid var(--line)}
.bal dt{font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.bal dd{font:700 1.1rem var(--font-b);margin-top:.25rem;overflow-wrap:anywhere}
.backlink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.88rem;font-weight:600;color:var(--sage)}
.backlink:hover{color:var(--acid)}

/* a launchpad row: logo, name (+ price each), then either the [-] n [+] stepper or a status pill */
.padrow{display:flex;align-items:center;gap:.9rem;min-height:4rem;padding-block:.5rem;border-top:1px solid var(--line)}
.padrow__id{flex:1;min-width:0}
.padrow__id b{display:block;font:700 1rem var(--font-b)}
.padrow__id small{display:block;font-size:.8rem;color:var(--subtle)}
.padrow__id small:empty{display:none}
.padrow__id small.short{color:var(--warn)}
.step{display:inline-flex;align-items:center;gap:.25rem;margin-left:auto;flex:none}
.step .btn{width:var(--tap);min-width:var(--tap);height:var(--tap);padding:0;font-size:1.3rem;font-weight:500}
.step .mono{min-width:2.4rem;text-align:center;font-size:1.2rem;font-weight:600}
/* "Duplicates to": one line under the coin's stats (coin.js writes a row per pad; here they sit side by side, and the line scrolls sideways on a phone) */
.cp-padline{display:flex;align-items:center;gap:.5rem clamp(1.25rem,2vw,2.5rem);min-height:var(--tap);padding-block:.6rem;border-bottom:1px solid var(--line);overflow-x:auto}
.cp-padline > .field-label{flex:none}
.cp-pads{display:flex;flex-direction:column}
.cp-pads > .field-label{margin-bottom:.7rem}
.cp-padline .cp-pads{display:flex;flex-direction:row;align-items:center;gap:.5rem clamp(1.25rem,2vw,2.5rem)}
.cp-padline .cp-pads .padrow{flex:none;min-height:0;padding:0;border:0;gap:.5rem;white-space:nowrap}
.cp-padline .cp-pads .padrow .padmark{width:1.4rem;height:1.4rem}
.cp-padline .cp-pads .padrow__id{display:flex;align-items:baseline;gap:.5rem}
.cp-padline .cp-pads .padrow__id b{font-size:.92rem}
.cp-padline .cp-pads .padrow__id small{font-size:max(13px,.8rem);color:var(--sage)}
.cp-padline .cp-pads .pill{display:none}

/* ------------------------------------------------------------ /create */
.page-head h1{font-size:clamp(2.4rem,4.4vw,6rem);margin-top:1rem}
.page-head .sub{margin-top:1.1rem;font-size:1.05rem;color:var(--sage);max-width:40rem;overflow-wrap:anywhere}
.create-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,27vw,640px);gap:clamp(2rem,4vw,6rem);align-items:start}
.create-main{display:flex;flex-direction:column;min-width:0}
.create-main .page-head{padding-bottom:clamp(1.5rem,2.6vw,3.5rem)}
.fsec{display:grid;grid-template-columns:minmax(0,clamp(12rem,15vw,19rem)) minmax(0,1fr);gap:1.25rem clamp(1.5rem,3vw,4.5rem);padding-block:clamp(1.5rem,2.4vw,3rem);border-top:1px solid var(--line)}
.fsec__label{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.fsec__n{font:700 max(28px,1.7rem)/1 var(--font-d);color:var(--acid)}
/* the mid-level heading: between the page title and the field labels */
.ptitle{font:600 clamp(1.35rem,1.5vw,2.1rem)/1.15 var(--font-b);letter-spacing:-.01em}
.fsec__label p{font-size:.88rem;color:var(--sage);line-height:1.55}
/* one right edge: everything in the form column (fields, steppers, fee bar, dev buy, helper text, the rules between sections) ends on the same line */
.fsec__body{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.create-main .form-note,.create-main .feebox,.create-main .withunit{max-width:none}
.flabel{display:flex;align-items:baseline;gap:.5rem;font:700 .9rem var(--font-b)}
.flabel i{font-style:normal;font-weight:500;font-size:.8rem;color:var(--sage)}
.flabel .count{margin-left:auto;font:500 var(--fs-label) var(--font-m);color:var(--subtle)}
.create-grid label,.fld{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.create-grid input[type=text],.create-grid input[type=number],.create-grid textarea,.trade input{width:100%;min-height:var(--tap);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);font:500 1rem var(--font-b);padding:.6rem .8rem}
.create-grid textarea{resize:vertical;flex:1;min-height:7.5rem;line-height:1.5}
.create-grid input:focus,.create-grid textarea:focus,.trade input:focus{outline:none;border-color:var(--acid)}
.create-grid input::placeholder,.create-grid textarea::placeholder,.trade input::placeholder{color:var(--subtle)}
.idrow{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1.25rem}
.idrow__fields{display:flex;flex-direction:column;gap:1rem;min-width:0}
.idrow__fields .grow{flex:1}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.create-grid label.drop,.drop{position:relative;flex:1;min-height:13rem;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;cursor:pointer;overflow:hidden;color:var(--sage);font-size:.88rem;padding:1rem}
.drop:hover,.drop.over,.drop:focus-within{border-color:var(--acid)}
.drop__icon{color:var(--sage)}
.drop__btn{display:inline-flex;align-items:center;min-height:max(36px,calc(var(--tap) - 8px));border:1px solid var(--line-strong);border-radius:var(--r);padding:.3rem 1.1rem;font:700 .9rem var(--font-b);color:var(--ink)}
.drop small{font-size:.8rem;line-height:1.5;color:var(--sage)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop.has > span,.drop.has > small{visibility:hidden}
.socials summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);font:700 .9rem var(--font-b)}
.socials summary::-webkit-details-marker{display:none}
.socials summary i{font-style:normal;font-weight:500;color:var(--subtle)}
.socials summary::after{content:"+";font:500 1.1rem var(--font-m);color:var(--acid)}
.socials[open] summary::after{content:"\2212"}
.socials summary svg{color:var(--sage)}
.socials .three{margin-top:.6rem}
#copySteps{border-bottom:1px solid var(--line)}
#copyTotal{font-size:1rem;font-weight:700;color:var(--ink);max-width:none}
.subhead{margin-top:.75rem}
.padpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.create-grid label.padtile,.padtile{position:relative;display:flex;flex-direction:row;align-items:center;gap:.75rem;min-height:4rem;padding:.6rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;min-width:0}
.padtile > span:not(.tog){min-width:0}
.padtile b{display:block;font:700 .95rem var(--font-b)}
.padtile small{display:block;font-size:.78rem;color:var(--subtle)}
.padtile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* the switch. off: outlined empty track, grey knob, the word Off. on: filled purple track, white knob, the word On. */
.padtile .tog{margin-left:auto;flex:none;width:3.4rem;height:1.9rem;border-radius:var(--r);background:transparent;border:2px solid #8a8a96;position:relative}
.padtile .tog::after{content:"";position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 4px);border-radius:2px;background:#9a9aa6;transition:transform .12s}
.padtile .tog::before{content:"Off";position:absolute;right:calc(100% + .7rem);top:50%;transform:translateY(-50%);font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.padtile:has(input:checked){border-color:var(--acid)}
.padtile:has(input:checked) .tog{background:var(--acid);border-color:var(--acid)}
.padtile:has(input:checked) .tog::after{transform:translateX(calc(100% + 2px));background:#fff}
.padtile:has(input:checked) .tog::before{content:"On";color:var(--ink)}
.padtile:has(input:focus-visible){outline:2px solid var(--acid);outline-offset:2px}
.withunit{position:relative;display:block;max-width:22rem}
.devbuy__head .withunit{flex:1 1 12rem}
.create-grid .withunit input,.trade .withunit input{padding-right:4rem}
.withunit i{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font:500 max(13px,.8rem) var(--font-m);font-style:normal;color:var(--subtle)}
.quick{display:flex;gap:.4rem;flex-wrap:wrap}
.quick .chip{font-family:var(--font-m);font-weight:500;min-width:3.4rem}
.devbuy{display:flex;flex-direction:column;gap:.8rem}
.devbuy__head{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.devbuy__head .quick .chip{min-width:4.2rem}
/* the right column: what the coin will look like, then the one big button */
.create-side{position:sticky;top:calc(var(--head) + 1.5rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.tp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);display:grid;grid-template-columns:8.5rem minmax(0,1fr)}
.tp__img{position:relative;aspect-ratio:1;background:var(--surface-raised);align-self:start}
.tp__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--sage)}
.tp__ph img{width:2.6rem;height:2.6rem}
.tp__ph b{font:700 1.05rem var(--font-b);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp__badge{position:absolute;left:.4rem;bottom:.4rem;background:var(--bg);border-radius:2px;padding:.15rem .4rem;font:500 var(--fs-label) var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.tp__body{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.tp__id{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.tp__id b{font:700 1.15rem var(--font-b);flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tp__id span{font-size:.88rem;color:var(--sage);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp__by{font-size:.78rem;color:var(--subtle)}
.tp__desc{font-size:.85rem;color:var(--sage);line-height:1.5;overflow-wrap:anywhere}
.tp__stats{display:flex;justify-content:space-between;gap:1rem;margin-top:.3rem}
.tp__stats dt{font:500 var(--fs-label) var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.tp__stats dd{font:700 1rem var(--font-b);margin-top:.2rem}
/* "Copies to": create.js writes the picked pads' marks into #pvPads, which is not shown; the page's own line shows logo and name for each mark that is there */
#pvPads{display:none}
.tp__pads{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.tp__pad{display:none;align-items:center;gap:.45rem;white-space:nowrap}
.tp__stats:has(#pvPads img[alt="pump.fun"]) .tp__pad--pump,.tp__stats:has(#pvPads img[alt="stonkfun.xyz"]) .tp__pad--stonk,.tp__stats:has(#pvPads img[alt="Pons"]) .tp__pad--pons{display:flex}
.tp__none{font-weight:600;color:var(--sage)}
.tp__stats:has(#pvPads img) .tp__none{display:none}
.tp__foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding:.7rem 1rem;font:400 var(--fs-label) var(--font-m);color:var(--subtle)}
/* the second Launch, at the end of the form: a label for the real button, so pressing it presses #createBtn */
.endlaunch{display:flex;flex-direction:column;gap:.75rem;padding-top:clamp(1.5rem,2.4vw,3rem);border-top:1px solid var(--line)}
.create-grid label.endlaunch__btn{flex-direction:row;gap:.7rem;width:100%}
/* it says what the real button says: wallet.js writes aria-label="Wallet <address>" on the header button once a wallet is connected, the moment create.js changes the real button's words */
.endlaunch__on,body:has([data-wallet-connect][aria-label^="Wallet "]) .endlaunch__off{display:none}
body:has([data-wallet-connect][aria-label^="Wallet "]) .endlaunch__on{display:inline}
.launchbar{display:flex;flex-direction:column;gap:.75rem}
.launchbar .btn{width:100%;min-height:clamp(4.5rem,4.4vw,5.5rem);font-size:clamp(1.3rem,1.25vw,1.6rem);font-weight:800;white-space:normal}
.launchbar .form-note{max-width:none}
.launchbar .form-note:empty{display:none}
/* under the button: the cost line (a plain sentence until create.js has the number), the status, then three facts */
.launchbar #createCost{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
#createCost:empty::before{content:"The exact amount shows here once the launch is built, before your wallet signs.";font-weight:400;color:var(--sage)}
.launchfacts{list-style:none;border-top:1px solid var(--line);font-size:.88rem;line-height:1.55;color:var(--sage)}
.launchfacts li{padding-block:.75rem;border-bottom:1px solid var(--line)}
.result{border-color:var(--positive);display:flex;flex-direction:column;gap:.4rem}
.result h3{font:700 1.35rem/1.2 var(--font-b);letter-spacing:0;color:var(--positive)}
.result p{font-size:.9rem;color:var(--sage);margin-bottom:.4rem}
.result .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.result .row .btn{flex:1 1 auto;white-space:normal;text-align:center}

/* ------------------------------------------------------------ /account */
.acct-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:clamp(2rem,5vw,8rem);align-items:end;padding-bottom:clamp(1.5rem,2.6vw,3.5rem)}
.acct-top .page-head{display:flex;flex-direction:column;align-items:flex-start}
#acctAddr{overflow-wrap:anywhere}
#acctAddr .mono{font-size:.9em;color:var(--ink)}
.acct-connect{margin-top:1.75rem}
/* wallet.js writes aria-label="Wallet <address>" on the button once a wallet is connected: the big prompt has done its job then. */
.acct-connect[aria-label^="Wallet "]{display:none}
.acct-how{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem clamp(1.25rem,2.5vw,3.5rem)}
.acct-how li{border-top:2px solid var(--line-strong);padding-top:.9rem;font-size:.9rem;color:var(--sage)}
.acct-how b{display:block;font:700 1rem var(--font-b);color:var(--ink);margin-bottom:.35rem}
#acctStatus{font-size:1rem;margin-bottom:1.25rem}
#acctStatus:empty{display:none}
.mng-list{display:flex;flex-direction:column;gap:1.5rem}
/* one coin's panel (account.js + manage.js): head, then vault | order copies + switches | copies so far */
.mng{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.mng__head{display:flex;align-items:center;gap:.6rem 1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line)}
.mng__head img{width:3.4rem;height:3.4rem;border-radius:2px;object-fit:cover;flex:none}
.mng__head .pill,.mng__head .btn{flex:none}
.mng__id{flex:1;min-width:0}
.mng__id b{display:block;font:700 1.3rem var(--font-b)}
.mng__id span{display:block;font-size:.88rem;color:var(--subtle);overflow:hidden;text-overflow:ellipsis}
.mng__strip{padding:.8rem 1.5rem;border-bottom:1px solid var(--line)}
.smstrip{display:flex;align-items:center;gap:.4rem 1.25rem;flex-wrap:wrap}
.smstep{display:inline-flex;align-items:center;gap:.45rem;font:500 var(--fs-label) var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.smstep i{width:.5rem;height:.5rem;background:var(--line-strong)}
.smstep.done{color:var(--sage)}
.smstep.done i{background:var(--positive)}
.smstep.live{color:var(--acid)}
.smstep.live i{background:var(--acid)}
.mng__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)}
.mng__col{padding:1.5rem;border-left:1px solid var(--line);min-width:0;display:flex;flex-direction:column;gap:1rem}
.mng__col:first-child{border-left:0}
.mng__col > .field-label{display:block}
.mng .form-note{font-size:.82rem;max-width:none}
.mng .form-note:empty{display:none}
/* Order copies: three steppers, one line, one button */
[data-order] [data-shortfall]{font-size:.95rem;font-weight:700;color:var(--ink);padding-block:.9rem;border-top:1px solid var(--line)}
[data-order] [data-order-go]{width:100%;min-height:3.75rem;font-size:1.1rem;background:var(--acid);border-color:var(--acid);color:var(--acid-ink);white-space:normal;margin-bottom:.9rem}
[data-order] [data-order-go]:hover:not(:disabled){background:var(--acid-hover);border-color:var(--acid-hover)}
[data-order] [data-order-go] ~ .form-note{margin-bottom:.4rem}
.switches{border:0;border-top:1px solid var(--line);margin-top:.5rem;padding-top:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem}
.mng__col > .switches:first-child{border-top:0;margin-top:0;padding-top:0}
.switches .form-note{flex-basis:100%}
.switches label.switch{display:inline-flex;flex-direction:row;align-items:center;gap:.55rem;min-height:var(--tap);font:600 .95rem var(--font-b);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;flex:none;width:1.5rem;height:1.5rem;border:1.5px solid var(--line-strong);border-radius:2px;background:var(--bg);cursor:pointer;display:grid;place-items:center}
.switch input:checked{background:var(--acid);border-color:var(--acid)}
.switch input:checked::after{content:"";width:.7rem;height:.4rem;border-left:2.5px solid var(--acid-ink);border-bottom:2.5px solid var(--acid-ink);transform:translateY(-1px) rotate(-45deg)}
.switches [data-save]{margin-left:auto}
.dups summary{cursor:pointer;display:flex;align-items:baseline;gap:.6rem;list-style:none;min-height:var(--tap)}
.dups summary::-webkit-details-marker{display:none}
.dups summary b{font:700 2.6rem/1 var(--font-d);color:var(--acid)}
.dups summary span{font-size:.9rem;color:var(--sage)}
.dups summary::after{content:"show";margin-left:auto;font:500 var(--fs-label) var(--font-m);color:var(--subtle)}
.dups[open] summary::after{content:"hide"}
.dup{display:flex;align-items:center;gap:.4rem .7rem;flex-wrap:wrap;min-height:var(--tap);padding-block:.4rem;border-top:1px solid var(--line);font-size:.82rem;min-width:0}
.dup b{font-weight:700}
.dup span{color:var(--sage)}
.dup .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dup a{color:var(--sage);font:400 var(--fs-label) var(--font-m)}
.dup a:hover{color:var(--acid)}
.dup .clip{margin-left:auto}
[data-orders]:empty{display:none}
/* Nothing counted yet: manage.js writes "these copies cost — SOL · you pay — SOL", which reads as broken. Until a copy is counted, show a plain instruction in its place. */
[data-order]:has([data-order-go]:disabled:not([data-copy])) [data-shortfall]{font-size:0}
[data-order]:has([data-order-go]:disabled:not([data-copy])) [data-shortfall]::before{content:"Pick how many copies to see the price.";font-size:.95rem;font-weight:600;color:var(--sage)}

/* ------------------------------------------------------------ coin page */
#cpStatus{font-size:1rem;padding-block:1rem}
.cp-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.25rem clamp(1.25rem,2vw,2.5rem);align-items:center;padding-block:.75rem clamp(1.5rem,2.2vw,2.75rem)}
.cp-imgwrap{position:relative;width:clamp(4.5rem,7vw,9rem);height:clamp(4.5rem,7vw,9rem);border-radius:var(--r);background:var(--surface);flex:none}
.cp-imgwrap img{position:relative;width:100%;height:100%;border-radius:var(--r);object-fit:cover}
/* a coin with no image: coin.js writes the symbol's first letter as data-letter on the wrapper;
   it sits on the purple fill behind the picture, and shows when the picture is the gradient */
.cp-imgwrap[data-letter]::before{content:attr(data-letter);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r);font:700 clamp(2rem,3.5vw,3.6rem) var(--font-d);color:#fff;background:linear-gradient(135deg,#b44dff,#5b21b6)}
.cp-imgwrap[data-letter] img[src^="data:"]{visibility:hidden}
.cp-id{min-width:0}
.cp-id h1{font-size:clamp(2.2rem,4vw,5.4rem);display:flex;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;overflow-wrap:anywhere}
.cp-id h1 > *{line-height:1}
.cp-id h1 small{font:600 clamp(1.05rem,1.3vw,1.7rem)/1 var(--font-b);color:var(--sage);letter-spacing:0}
.cp-id h1 .pill{align-self:center;line-height:1.2}
.cp-ca{display:flex;align-items:center;gap:.7rem;margin-top:.8rem;font:400 max(13px,.8rem) var(--font-m);color:var(--sage);max-width:100%}
.cp-ca span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-desc{margin-top:.8rem;font-size:.95rem;line-height:1.6;color:var(--sage);max-width:46rem;overflow-wrap:anywhere}
.cp-links{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.cp-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cp-head .cp-actions{justify-content:flex-end}
/* the stats and "Updated ..." are one band: cells as wide as their numbers, the update time right after them */
.cp-statrow{display:flex;align-items:stretch;flex-wrap:wrap;border-block:1px solid var(--line)}
.cp-stats{display:flex;flex-wrap:wrap;min-width:0}
.cp-stats div{padding:1.25rem clamp(1.5rem,4vw,6rem) 1.25rem 0;min-width:0}
.cp-stats div + div{border-left:1px solid var(--line);padding-left:var(--cellpad)}
.cp-stats dt{font:500 var(--fs-label) var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.cp-stats dd{font:700 max(28px,clamp(1.5rem,2.6vw,3.4rem))/1.05 var(--font-d);margin-top:.6rem;overflow-wrap:anywhere}
#cpUpdated{display:flex;align-items:flex-end;max-width:none;border-left:1px solid var(--line);padding:1.25rem 0 1.25rem var(--cellpad);font:400 var(--fs-label) var(--font-m);color:var(--sage)}
#cpLauncher{margin-top:1.5rem;border-color:var(--warn)}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,19vw,460px) clamp(320px,17vw,420px);grid-template-areas:"main side info";gap:1.25rem;align-items:start;margin-top:1.5rem}
.cp-main{grid-area:main}
.cp-side{grid-area:side;position:sticky;top:calc(var(--head) + 1rem)}
.cp-info{grid-area:info}
.cp-main,.cp-side,.cp-info{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
/* chart (chart.js) */
.chart{padding:0;overflow:hidden}
.chart iframe{display:block;width:100%;height:clamp(420px,30vw,720px);border:0;background:var(--bg)}
.chartbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem 0;flex-wrap:wrap}
.chartbar__last{font-size:.9rem;color:var(--sage)}
.chartbar__last.up{color:var(--positive)}
.chartbar__last.down{color:var(--negative)}
.chartwrap{position:relative;height:clamp(320px,24vw,600px);margin-top:.4rem}
.chartcanvas{display:block;width:100%;height:100%}
.charttip{position:absolute;left:1rem;top:.4rem;font-size:var(--fs-label);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:.25rem .5rem;pointer-events:none;max-width:calc(100% - 2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart__off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:2rem;text-align:center;color:var(--sage);font-size:.9rem}
.chart__off p{max-width:28rem;line-height:1.6}
/* trades (chart.js) */
table.trades td,table.trades th{padding:.6rem .75rem}
#cpTrades .table-scroll{max-height:28rem;overflow:auto}
table.trades thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.side{font:600 var(--fs-label) var(--font-m);letter-spacing:.06em;text-transform:uppercase}
.side--buy{color:var(--positive)}
.side--sell{color:var(--negative)}
/* buy / sell (trade.js) */
.trade{display:flex;flex-direction:column;gap:1rem;border-color:var(--line-strong)}
.trade .panel__head{margin-bottom:0}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.tab{min-height:var(--tap);background:transparent;border:0;color:var(--sage);font:700 1rem var(--font-b);cursor:pointer}
.tab + .tab{border-left:1px solid var(--line-strong)}
.tab:hover{color:var(--ink)}
.tab--buy.on{background:var(--positive);color:#03170f}
.tab--sell.on{background:var(--negative);color:#1a0509}
.tradein{display:flex;flex-direction:column;gap:.5rem}
.tradein .flabel{justify-content:space-between}
.trade input{font-size:1.3rem;font-weight:700;min-height:3.6rem}
.trade .withunit{max-width:none}
.trade .withunit i{max-width:3.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trade .slip .field-label{margin-right:.4rem}
/* the chosen slippage: outlined and underlined, not filled like the primary button */
.trade .slip .chip.on{background:transparent;border-color:var(--acid);color:var(--ink);box-shadow:inset 0 -3px 0 var(--acid)}
.tq{display:flex;flex-direction:column;font-size:.88rem;border-top:1px solid var(--line)}
.tq:empty{display:none}
.tq div{display:flex;justify-content:space-between;gap:.75rem;padding-block:.5rem;border-bottom:1px solid var(--line)}
.tq dt{color:var(--sage)}
.tq dd{font:500 max(13px,.82rem) var(--font-m);text-align:right}
.tq .warn dd{color:var(--warn)}
.trade__go{width:100%;min-height:4rem;font-size:1.15rem;white-space:normal}
.trade .form-note{font-size:.8rem}
.trade .form-note:empty{display:none}

/* ------------------------------------------------------------ FAQ, terms, privacy, 404 */
.doc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:clamp(2rem,5vw,8rem);align-items:start}
.doc__head{position:sticky;top:calc(var(--head) + 2rem);display:flex;flex-direction:column;align-items:flex-start}
.doc__head .cp-actions{margin-top:2rem}
.doc__list{border-bottom:1px solid var(--line)}
.qa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.75rem clamp(1.5rem,3vw,4.5rem);padding-block:clamp(1.4rem,2vw,2.5rem);border-top:1px solid var(--line)}
.qa__q{font:700 clamp(1.15rem,1.25vw,1.6rem)/1.25 var(--font-b);letter-spacing:0}
.qa__a{display:flex;flex-direction:column;gap:1.25rem;color:var(--sage);font-size:1.02rem;line-height:1.65;max-width:44rem}

/* ------------------------------------------------------------ wallet dialog (wallet.js) */
.wallet-dialog{margin:auto;position:relative;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:2rem;width:min(100% - 32px,28rem);font-family:var(--font-b)}
.wallet-dialog::backdrop{background:#0b0812e0}
.wallet-dialog__close{position:absolute;top:.6rem;right:.6rem;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--sage);font:500 1.5rem var(--font-b);cursor:pointer}
.wallet-dialog__close:hover{color:var(--ink)}
.wallet-dialog h3{font-size:1.5rem;font-weight:700;margin-bottom:.6rem;padding-right:2.5rem}
/* The site the wallet asks about: DITTO's own mark, then one row per wallet
   with that wallet's own icon (a local file or the icon it registered). */
.wallet-dialog .wallet-brand{display:flex;align-items:center;margin-bottom:.8rem}
.wallet-dialog .wallet-brand img{width:2.25rem;height:2.25rem;border-radius:var(--r);display:block}
.wallet-dialog .wallet-who{display:inline-flex;align-items:center;gap:.65rem;min-width:0}
.wallet-dialog .wallet-ic{width:1.5rem;height:1.5rem;border-radius:6px;flex:none;background:var(--bg)}
.wallet-dialog p{font-size:.9rem;color:var(--sage);line-height:1.6;margin-bottom:1.25rem}
.wallet-dialog .wallet-list{display:flex;flex-direction:column;gap:.6rem}
.wallet-dialog .wallet-list .btn{justify-content:space-between;width:100%;min-height:3.5rem;font-size:1.05rem}
.wallet-dialog .addr{font:400 max(13px,.8rem) var(--font-m);word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .8rem;margin-bottom:1.25rem}
.wallet-dialog .row{display:flex;gap:.6rem;flex-wrap:wrap}
.wallet-dialog .row .btn{flex:1}

/* ------------------------------------------------------------ wide screens: larger controls */
@media (min-width:1600px){
  .create-grid input[type=text],.create-grid input[type=number],.create-grid textarea{font-size:1.05rem;padding-inline:1rem}
  .flabel{font-size:.95rem}
  .create-main .form-note{font-size:.95rem}
  .padrow{min-height:4.5rem}
  .padrow__id b{font-size:1.1rem}
  .padtile{min-height:4.75rem}
  .padtile .tog{width:5.5rem;height:48px}
  .devbuy__head .quick .chip{min-height:48px}
}
/* ------------------------------------------------------------ narrower screens */
@media (max-width:1500px){
  .cp-grid{grid-template-columns:minmax(0,1fr) clamp(340px,30vw,440px);grid-template-areas:"main side" "main info";grid-template-rows:auto 1fr}
  .cp-side{position:static}
}
@media (max-width:1100px){
  .split,.doc,.acct-top,.create-grid{grid-template-columns:minmax(0,1fr)}
  .doc__head,.create-side{position:static}
  .xfilters{flex-basis:100%}
  .stats-bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-bar .cell.cell--pads{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .cell--pads dt,.padlist span:first-child{padding-left:0}
  .mng__body{grid-template-columns:minmax(0,1fr)}
  .mng__col{border-left:0;border-top:1px solid var(--line)}
  .mng__col:first-child{border-top:0}
  .cp-head{grid-template-columns:auto minmax(0,1fr)}
  .cp-head .cp-actions{grid-column:1/-1;justify-content:flex-start;max-width:none}
  .create-side{max-width:36rem}
  /* one column: the real Launch button comes straight after the form, so the second one is not needed */
  .endlaunch{display:none}
}
@media (max-width:900px){
  .cp-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "main" "info";grid-template-rows:none}
  .hsearch__box kbd{display:none}
  .header-actions .x-link{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:30rem}
  .fsec,.qa{grid-template-columns:minmax(0,1fr)}
  .acct-how{grid-template-columns:minmax(0,1fr)}
}
/* phones and tablets (to 1000px): two header rows: brand + wallet, then search + Account + Launch */
@media (max-width:1000px){
  .site-header{position:static}
  .header-inner{flex-wrap:wrap;gap:.6rem;padding-block:.6rem}
  .header-actions{display:contents}
  .header-inner .wordmark{order:1;flex:1 1 auto}
  /* the wallet button holds either "Connect wallet" or the short address (4…4): it is never squeezed, so it never clips */
  .header-actions [data-wallet-connect]{order:2;flex:none;padding-inline:.9rem}
  .hsearch{order:3;flex:1 1 0;min-width:130px;max-width:none;margin-left:0}
  .header-actions .pf{order:4;padding-inline:.4rem}
  .header-actions .pf[href$="#explore"]{display:none}
  .header-actions .hlaunch{order:5;padding-inline:.9rem}
  .header-actions .hlaunch--link{padding-inline:.4rem}
}
/* phones: two header rows (brand + wallet, then search + Account + Launch), single columns, every control at least 44px tall */
@media (max-width:640px){
  .hero-actions .btn,.closer .btn,.acct-connect{width:100%}
  .hero-strip .ca{border-left:0;padding-left:0}
  .dia__cap,.dia__vault{grid-column:1/-1;text-align:left}
  .stats-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-bar .cell:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .stats-bar dd.padlist{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
  .padlist span{padding-left:0}
  .xbar .xsearch{flex-basis:100%}
  .xfilters,.xgroup{width:100%}
  /* the segmented controls keep their joined look on a phone: three across, then two */
  .seg{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))}
  .seg .chip{grid-column:span 2;padding-inline:.3rem}
  .seg .chip:nth-child(n+4){grid-column:span 3}
  .how-list li{grid-template-columns:minmax(0,1fr)}
  .chip{min-height:44px}
  .clip,.coin__mintrow .copymint{min-height:44px;padding-inline:.9rem}
  .coin__mintrow{gap:.3rem}
  .coin__mintrow .copymint{padding-inline:.55rem}
  .coin__mintrow a{padding-inline:.25rem}
  .form-note a,.qa__a a,.how-list p a,.round-txs a,.kv__v a,.dup a{display:inline-flex;align-items:center;min-height:44px}
  .idrow,.two,.three,.padpick{grid-template-columns:minmax(0,1fr)}
  .tp{grid-template-columns:6.5rem minmax(0,1fr)}
  .tp__ph b{display:none}
  .panel{padding:1rem}
  .mng__head,.mng__col{padding:1rem}
  /* the console's status tags: one row, scrolled sideways */
  .mng__strip{padding:.8rem 1rem;flex-wrap:nowrap;overflow-x:auto;gap:1.25rem}
  .mng__strip .smstep{flex:none;white-space:nowrap}
  .mng__head{flex-wrap:wrap}
  .mng__id{flex:1 1 60%}
  .mng__head .btn{flex:1 1 100%}
  .cp-actions .btn{flex:1 1 calc(50% - .3rem);padding-inline:.6rem}
  /* three stats across a phone: too narrow for the pixel face at 28px, so these numbers use Manrope */
  .cp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .cp-stats dt{white-space:nowrap}
  .cp-stats div{padding:1rem .5rem .6rem 0}
  .cp-stats div + div{padding-left:.75rem}
  .cp-stats dd{font:800 1.3rem/1.1 var(--font-b)}
  #cpUpdated{border-left:0;padding:0 0 .9rem}
  .switches [data-save]{margin-left:0}
  .footer-nav{gap:0 1.25rem}
}

/* ------------------------------------------------------------ no motion when the reader asked for none */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}