/* ============================================================
   STACHE.FAMILY — tokenized stock launchpad · lime / black theme
   ============================================================ */
html[data-mode="dark"]{
  color-scheme: dark;
  --bg:        #0A0B07;
  --bg-2:      #121409;
  --card:      #13150D;
  --card-2:    #1B1E11;
  --line:      rgba(166,225,11,.18);
  --line-2:    rgba(166,225,11,.1);
  --green:     #A6E10B;
  --green-ink: #C6F736;
  --green-soft:rgba(166,225,11,.14);
  --mint:      #D8FF5C;
  --ink:       #F3F8E6;
  --ink-2:     #B3BE99;
  --ink-3:     #838C6E;
  --up:        #A6E10B;
  --down:      #FF5C4D;
  --logo-bg:   #FFFFFF;

  --grad-brand: linear-gradient(135deg,#CBF834 0%,#8CBF06 100%);
  --grad-bg:    radial-gradient(1500px 950px at 90% -14%, rgba(166,225,11,.22) 0%, rgba(120,163,8,.1) 32%, rgba(40,55,4,.08) 55%, transparent 72%),
                radial-gradient(1100px 900px at 6% 112%, rgba(140,191,6,.14) 0%, transparent 58%),
                linear-gradient(158deg, #171B09 0%, #0E1007 40%, #080A05 100%);

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 3px 12px rgba(0,0,0,.35);
  --sh-2: 0 14px 34px -16px rgba(0,0,0,.7);
  --sh-3: 0 26px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(196,231,96,.05);
  --ring: 0 0 0 4px rgba(166,225,11,.24);
  --nav-glass: rgba(9,10,5,.62);
  --nav-glass-scrolled: rgba(9,10,5,.9);
  --btn-dark-fg: #0C0A0B;
  --field-opacity: 1;
  --stache-ink: #A6E10B;
  --stache-hero-op: .07;
  --chart-up:        #A6E10B;
  --chart-up-soft:   rgba(166,225,11,.26);
  --chart-down:      #FF5C4D;
  --chart-down-soft: rgba(255,92,77,.24);
  --chart-grid:      rgba(196,231,96,.09);
  --chart-fade:      rgba(10,11,7,0);
}

:root,
html[data-mode="light"]{
  color-scheme: light;
  --bg:        #F1F4E4;
  --bg-2:      #F8FBEE;
  --card:      #FFFFFF;
  --card-2:    #F6F9EA;
  --line:      rgba(60,80,6,.16);
  --line-2:    rgba(60,80,6,.09);
  --green:     #7FAD05;
  --green-ink: #5C7D03;
  --green-soft:rgba(127,173,5,.14);
  --mint:      #A6E10B;
  --ink:       #14170B;
  --ink-2:     #4B5434;
  --ink-3:     #767E5D;
  --up:        #5C7D03;
  --down:      #D2402F;
  --logo-bg:   #FFFFFF;

  --grad-brand: linear-gradient(135deg,#CBF834 0%,#8CBF06 100%);
  --grad-bg:    radial-gradient(1200px 800px at 88% -10%, rgba(166,225,11,.3) 0%, rgba(127,173,5,.1) 40%, transparent 70%),
                radial-gradient(900px 700px at 8% 110%, rgba(127,173,5,.1) 0%, transparent 55%),
                linear-gradient(158deg, #F7FAEC 0%, #EFF4E1 45%, #E9EFD8 100%);

  --sh-1: 0 1px 2px rgba(30,40,5,.05), 0 4px 14px rgba(30,40,5,.06);
  --sh-2: 0 14px 30px -16px rgba(30,40,5,.18);
  --sh-3: 0 22px 48px -20px rgba(30,40,5,.22), 0 0 0 1px rgba(127,173,5,.08);
  --ring: 0 0 0 4px rgba(127,173,5,.22);
  --nav-glass: rgba(255,255,255,.72);
  --nav-glass-scrolled: rgba(255,255,255,.92);
  --btn-dark-fg: #0C0A0B;
  --field-opacity: .5;
  --stache-ink: #5C7D03;
  --stache-hero-op: .05;
  --chart-up:        #5C7D03;
  --chart-up-soft:   rgba(127,173,5,.26);
  --chart-down:      #D2402F;
  --chart-down-soft: rgba(210,64,47,.2);
  --chart-grid:      rgba(60,80,6,.12);
  --chart-fade:      rgba(241,244,228,0);
}

:root{
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --nav-h:64px; --maxw:1200px;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* poster display face — heavy, condensed, tight (from the brand key art) */
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; font-family:var(--f-body); color:var(--ink); background:var(--bg); background-image:var(--grad-bg); background-attachment:fixed; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.015em; font-family:var(--f-display); font-weight:800; font-stretch:92%; }
h1,h2{ font-weight:900; font-stretch:86%; letter-spacing:-.025em; }
h1{ text-transform:uppercase; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; } input,button{ font-family:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.ic{ width:1.15em; height:1.15em; flex:none; vertical-align:-.16em; }

.bg-decor{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg); }
.glow{ position:absolute; width:86vw; height:64vw; right:-18vw; top:-24vw; border-radius:50%; filter:blur(120px);
  background:radial-gradient(circle,rgba(172,231,20,.34),rgba(120,163,8,.14) 42%,transparent 68%);
  animation:glowpulse 16s ease-in-out infinite alternate; will-change:transform,opacity; }
:root:not([data-mode="dark"]) .glow{ background:radial-gradient(circle,rgba(203,248,52,.35),rgba(127,173,5,.14) 42%,transparent 68%); opacity:.7; }
@keyframes glowpulse{
  from{ transform:scale(1) translate(0,0); opacity:.92; }
  to{   transform:scale(1.06) translate(-2%,1.5%); opacity:1; }
}
/* dark anchor bottom-left + gentle veil so content stays readable */
.bg-decor::before{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(75% 70% at 2% 102%, rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 40%, transparent 64%),
             linear-gradient(180deg, rgba(5,6,2,.3) 0%, rgba(5,6,2,.14) 30%, rgba(5,6,2,.3) 100%); }
/* the dark anchor is a dark-mode device — keep the light ground clean */
:root:not([data-mode="dark"]) .bg-decor::before{
  background:radial-gradient(75% 70% at 2% 102%, rgba(92,125,3,.1) 0%, transparent 62%); }
/* drifting sheen highlight */
.bg-decor::after{ content:""; position:absolute; inset:-18%;
  background:radial-gradient(52% 40% at 76% 16%, rgba(198,247,54,.12), transparent 62%);
  animation:sheendrift 20s ease-in-out infinite alternate; will-change:transform; }
@keyframes sheendrift{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-3.5%,2.5%,0); }
}

/* generated stache field — the brand mark scattered across the ground, bright top-right → black */
.stache-field{ position:absolute; inset:-14%; width:128%; height:128%; display:block; opacity:var(--field-opacity,1);
  animation:fielddrift 44s ease-in-out infinite alternate; will-change:transform; }
@keyframes fielddrift{
  from{ transform:scale(1) translate(0,0); }
  to{   transform:scale(1.05) translate(-1.2%,-1.6%); }
}
.stache-field__tilt{ transform:rotate(-8deg); transform-origin:50% 45%; }
.stache{ fill:var(--stache-ink); animation:stachebob var(--d,18s) ease-in-out infinite alternate; animation-delay:var(--sd,0s); will-change:transform; }
@keyframes stachebob{
  from{ transform:translate(0,0); }
  to{   transform:translate(var(--sx,20px),var(--sy,-12px)); }
}
/* oversized watermark of the mark itself, anchored top-right */
.stache-hero{ position:absolute; right:-6vw; top:-3vw; width:56vw; max-width:900px; display:block;
  fill:var(--stache-ink); opacity:var(--stache-hero-op,.07);
  animation:heroease 30s ease-in-out infinite alternate; will-change:transform; }
@keyframes heroease{
  from{ transform:rotate(-6deg) scale(1); }
  to{   transform:rotate(-3.5deg) scale(1.045); }
}
@media (prefers-reduced-motion:reduce){ .stache-field,.stache,.stache-hero,.glow,.bg-decor::after{ animation:none; } }
@media (max-width:640px){ .stache-field{ opacity:calc(var(--field-opacity,1) * .8); } .stache-hero{ width:118vw; right:-26vw; } }

/* ---------- buttons ---------- */
.btn{ --py:.72em; --px:1.1em; display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  padding:var(--py) var(--px); border:0; border-radius:var(--r-pill); font-weight:700; font-size:.92rem;
  cursor:pointer; white-space:nowrap; line-height:1; transition:transform .16s cubic-bezier(.34,1.5,.64,1), box-shadow .2s, background .2s, color .2s, filter .2s; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--sm{ font-size:.86rem; --py:.6em; --px:.95em; }
.btn--primary{ background:var(--grad-brand); color:#fff; box-shadow:var(--sh-2); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:var(--sh-3); filter:saturate(1.06); }
.btn--dark{ background:var(--ink); color:var(--btn-dark-fg); box-shadow:var(--sh-1); }
.btn--dark:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); background:var(--ink); filter:brightness(1.05); }
.btn.is-connected{ background:var(--green-soft); color:var(--green-ink); box-shadow:none; border:1.5px solid rgba(166,225,11,.32); }

/* theme lamp toggle — sits beside Connect */
.theme-toggle{
  display:inline-grid; place-items:center; width:38px; height:38px; padding:0;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--green-ink); cursor:pointer; box-shadow:var(--sh-1);
  transition:background .2s, border-color .2s, color .2s, transform .16s;
}
.theme-toggle:hover{ background:var(--green-soft); border-color:rgba(166,225,11,.35); transform:translateY(-1px); }
.theme-toggle .ic{ width:1.15rem; height:1.15rem; }
.theme-toggle__sun{ display:none; }
.theme-toggle__moon{ display:block; }
:root:not([data-mode="dark"]) .theme-toggle__sun{ display:block; }
:root:not([data-mode="dark"]) .theme-toggle__moon{ display:none; }
:root:not([data-mode="dark"]) .theme-toggle{ background:#fff; color:var(--green-ink); }

/* ---------- navbar ---------- */
.nav{ position:sticky; top:0; z-index:50; height:var(--nav-h); background:var(--nav-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background .25s; }
.nav.is-scrolled{ border-color:var(--line); background:var(--nav-glass-scrolled); box-shadow:0 8px 24px -18px rgba(0,0,0,.45); }
.nav__inner{ height:100%; display:flex; align-items:center; gap:16px; }
.brand{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-display); font-weight:900; font-stretch:86%; font-size:1.3rem; letter-spacing:-.03em; }
.brand__logo{ display:block; flex:none; width:30px; height:30px; border-radius:9px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(196,231,96,.22); }
.brand__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.footer__card .brand__logo{ width:28px; height:28px; }
.brand__name{ color:var(--ink); }
.nav__links{ display:none; margin-inline:auto; gap:2px; }
.nav__links a{ padding:.5em .85em; border-radius:var(--r-pill); font-weight:600; color:var(--ink-2); transition:.18s; }
.nav__links a:hover{ color:var(--green-ink); background:rgba(166,225,11,.12); }
.nav__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (min-width:900px){ .nav__links{ display:flex; } .nav__actions{ margin-left:0; } }
.hamburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0 11px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; cursor:pointer; box-shadow:var(--sh-1); }
.hamburger span{ height:2.5px; border-radius:2px; background:var(--green); transition:.25s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media (min-width:900px){ .hamburger{ display:none; } }
@media (max-width:899px){
  .nav__links{ position:fixed; inset:var(--nav-h) 0 auto 0; display:flex; flex-direction:column; gap:2px; padding:14px clamp(16px,4vw,32px) 22px; margin:0; background:var(--nav-glass-scrolled); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); box-shadow:var(--sh-2); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s ease; }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ font-size:1.05rem; padding:.75em .9em; }
}

/* ---------- stock marquee ---------- */
.marquee{
  border-block:1px solid var(--line); background:rgba(255,255,255,.022); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  touch-action:pan-y; user-select:none;
}
.marquee__track{
  display:flex; align-items:center; gap:10px; width:max-content; padding:10px 0;
  will-change:transform; backface-visibility:hidden; transform:translate3d(0,0,0);
  /* JS drives translate for smoother, slower scroll — CSS anim is fallback only */
  animation:none;
}
@keyframes marq{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(var(--marq-x, -50%),0,0); }
}
@media (hover:hover) and (pointer:fine){
  .marquee.is-paused .marquee__track{ /* pause handled in JS */ }
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{ transform:none !important; }
  .marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
.mq-item{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:.4em .85em .4em .45em; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:var(--r-pill); font-weight:700; font-size:.84rem; color:var(--ink);
  white-space:nowrap; box-shadow:none;
}
.mq-item em{ font-style:normal; font-weight:700; color:var(--up); }
.mq-item em.up{ color:var(--up); }
.mq-item em.dn{ color:var(--down); }
.mq-logo{ width:24px; height:24px; border-radius:50%; overflow:hidden; background:var(--logo-bg); display:grid; place-items:center; border:1px solid var(--line-2); flex:none; }
:root:not([data-mode="dark"]) .marquee{ background:rgba(127,173,5,.04); }
:root:not([data-mode="dark"]) .mq-item{ background:#fff; }

/* tablet */
@media (max-width:900px){
  .marquee__track{ gap:8px; padding:9px 0; }
  .mq-item{ font-size:.8rem; padding:.36em .75em .36em .4em; gap:7px; }
  .mq-logo{ width:22px; height:22px; }
}
/* phone */
@media (max-width:640px){
  .marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .marquee__track{ gap:7px; padding:8px 0; }
  .mq-item{ font-size:.76rem; padding:.32em .68em .32em .36em; gap:6px; }
  .mq-logo{ width:20px; height:20px; }
}

/* ---------- toolbar ---------- */
.toolbar{ display:flex; gap:12px; align-items:center; margin:clamp(22px,4vw,40px) 0 clamp(20px,3vw,30px); }
.search{ flex:1; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.8em 1.1em; color:var(--ink-3); box-shadow:var(--sh-1); transition:.2s; min-width:0; }
.search:focus-within{ border-color:var(--green); box-shadow:var(--ring); }
.search input{ border:0; outline:0; background:transparent; font-size:.98rem; color:var(--ink); width:100%; }
.btn--create{ --py:.85em; --px:1.3em; font-size:.95rem; }

/* ---------- category tabs (All / Crypto / Stocks) ---------- */
.cats{ display:flex; gap:24px; align-items:center; margin:clamp(8px,2vw,16px) 2px clamp(4px,1vw,8px); }
.cat{ border:0; background:transparent; color:var(--ink-3); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; padding:.25em 0; cursor:pointer; position:relative; transition:color .16s; }
.cat:hover{ color:var(--ink-2); }
.cat.is-active{ color:var(--ink); }
.cat.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--green); box-shadow:0 0 10px rgba(166,225,11,.6); }

/* ---------- explore header ---------- */
.explore-head{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; margin-bottom:clamp(16px,2.5vw,22px); }
.explore-title{ display:flex; align-items:center; gap:12px; }
.explore-title h1{ font-size:clamp(1.6rem,3.6vw,2.15rem); font-weight:900; font-stretch:86%; }
.count{ font-size:.8rem; font-weight:700; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); padding:.35em .75em; border-radius:var(--r-pill); }
.tabs{ display:flex; gap:4px; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:4px; border-radius:var(--r-pill); box-shadow:var(--sh-1); }
.tab{ border:0; background:transparent; color:var(--ink-2); font-weight:700; font-size:.85rem; padding:.5em .95em; border-radius:var(--r-pill); cursor:pointer; transition:.16s; }
.tab:hover{ color:var(--green-ink); }
.tab.is-active{ background:var(--ink); color:var(--btn-dark-fg); }

/* ---------- stock grid ---------- */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid__empty{ text-align:center; color:var(--ink-3); padding:48px 0; }

.stock-card{ display:flex; flex-direction:column; height:100%; background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 60%); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .25s, border-color .25s; cursor:pointer; }
.stock-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), 0 0 24px -8px rgba(203,248,52,.25); border-color:var(--mint); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.grid--anim .stock-card{ animation:cardIn .45s cubic-bezier(.22,.9,.36,1) backwards; }
.grid--anim .stock-card:nth-child(2){ animation-delay:.04s; }
.grid--anim .stock-card:nth-child(3){ animation-delay:.08s; }
.grid--anim .stock-card:nth-child(4){ animation-delay:.12s; }
.grid--anim .stock-card:nth-child(5){ animation-delay:.16s; }
.grid--anim .stock-card:nth-child(6){ animation-delay:.2s; }
.grid--anim .stock-card:nth-child(n+7){ animation-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .grid--anim .stock-card{ animation:none; } }
.stock-card__media{ position:relative; aspect-ratio:1.15/1; flex:none; display:grid; place-items:center; background:var(--bg-2); border-bottom:1px solid var(--line-2); overflow:hidden; }
.stock-card__media .logo-wrap{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; background:var(--bg-2); }
.stock-card__media .logo-img{ padding:0; object-fit:cover; background:transparent; }
.stock-card__media .logo-mono{ font-size:2.5rem; letter-spacing:-.02em; }
.badge{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; letter-spacing:.02em; color:#fff; background:rgba(8,10,4,.72); border:1px solid rgba(255,255,255,.18); padding:.28em .65em; border-radius:var(--r-pill); backdrop-filter:blur(8px); }
.chip{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:.2em; font-size:.75rem; font-weight:800; padding:.3em .55em; border-radius:var(--r-pill); backdrop-filter:blur(8px); }
.chip .ic{ width:.85em; height:.85em; }
.chip--up{ color:var(--up); background:rgba(140,191,6,.14); }
.chip--down{ color:var(--down); background:rgba(217,84,74,.14); }
.chip--down .ic{ transform:rotate(90deg); }
.stock-card__body{ display:flex; flex-direction:column; flex:1; padding:13px 15px 15px; min-height:0; }
.sc-head{ display:flex; align-items:flex-start; gap:8px; }
.sc-name{ font-weight:800; font-size:1rem; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-verified{ color:var(--green); width:15px; height:15px; flex:none; margin-top:.2em; }
.sc-age{ margin-left:auto; font-size:.76rem; color:var(--ink-3); font-weight:600; flex:none; white-space:nowrap; padding-top:.15em; }
.sc-ticker{ color:var(--green-ink); font-weight:700; font-size:.82rem; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stock-card--featured{ border-color:var(--mint); box-shadow:var(--sh-2), 0 0 0 1px rgba(203,248,52,.28); }
.sc-socials{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sc-social{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.22em .55em; text-decoration:none; }
.sc-social:hover{ color:var(--green-ink); border-color:var(--mint); }
.sc-social .ic{ width:.85em; height:.85em; }
.sc-stats{ display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-2); font-size:.82rem; }
.sc-stats small{ color:var(--ink-3); font-weight:600; }
.sc-stats b{ color:var(--ink); font-weight:800; }

/* logo image + monogram fallback */
.logo-wrap{ position:relative; border-radius:22%; overflow:hidden; background:#0E1007; }
.logo-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; background:transparent; padding:9%; }
.logo-mono{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#C6D88E,#8B9A58); }
.mq-logo .logo-wrap{ width:100%; height:100%; border-radius:50%; }
.mq-logo .logo-mono{ font-size:.62rem; border-radius:50%; }

/* ---------- footer (creo-style card) ---------- */
.footer{ padding:clamp(40px,6vw,72px) clamp(16px,4vw,32px) clamp(30px,5vw,54px); }
.footer__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,4vw,40px); box-shadow:var(--sh-1); }
.footer__card .brand{ font-size:1.3rem; }
.footer__desc{ color:var(--ink-2); max-width:60ch; margin:1em 0 1.3em; font-size:.95rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:1.3em; }
.footer__links a{ color:var(--ink-2); font-weight:600; font-size:.9rem; transition:.15s; }
.footer__links a:hover{ color:var(--green-ink); }
.footer__fine{ color:var(--ink-3); font-size:.8rem; max-width:88ch; margin:0 0 1.6em; line-height:1.6; }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding-top:1.2em; border-top:1px solid var(--line-2); }
.footer__bottom span{ color:var(--ink-3); font-size:.84rem; }
.footer__handle{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:700; font-size:.86rem; }
.footer__handle .ic{ width:1em; height:1em; padding:.35em; box-sizing:content-box; border:1px solid var(--line); border-radius:9px; }
.footer__handle:hover .ic{ background:var(--ink); color:#0C0A0B; border-color:var(--ink); }

/* ---------- misc ---------- */
:focus-visible{ outline:3px solid var(--green); outline-offset:2px; border-radius:6px; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:120; background:var(--card-2); color:var(--ink); border:1px solid var(--line); padding:.8em 1.3em; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:.3s; max-width:90vw; }
.toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
:root{ --w3m-accent:#A6E10B; --w3m-color-mix:#A6E10B; --w3m-border-radius-master:3px; }

/* ---------- wallet connect modal (injected wallets, no Project ID) ---------- */
.wc-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.wc-modal[hidden]{ display:none !important; }
.wc-modal__backdrop{ position:absolute; inset:0; background:rgba(5,6,2,.62); backdrop-filter:blur(6px); }
.wc-modal__panel{
  position:relative; width:min(380px,100%); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:18px 18px 14px; animation:cardIn .28s ease;
}
.wc-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.wc-modal__head b{ font-size:1.05rem; font-weight:800; }
.wc-modal__x{ border:0; background:transparent; color:var(--ink-2); font-size:1.4rem; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px; }
.wc-modal__x:hover{ background:var(--green-soft); color:var(--green-ink); }
.wc-modal__hint{ margin:0 0 12px; color:var(--ink-3); font-size:.84rem; }
.wc-modal__list{ display:grid; gap:8px; }
.wc-modal__item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card-2); color:var(--ink); font-weight:700; font-size:.95rem; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.wc-modal__item:hover{ border-color:var(--mint); background:var(--green-soft); transform:translateY(-1px); }
.wc-modal__item:disabled{ opacity:.6; cursor:wait; }
.wc-modal__item img{ width:28px; height:28px; border-radius:8px; flex:none; }
.wc-modal__ic{ width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--green-soft); color:var(--green-ink); flex:none; }
.wc-modal__empty{ padding:18px; text-align:center; color:var(--ink-2); font-size:.9rem; background:var(--bg); border-radius:var(--r); border:1px dashed var(--line); }
.wc-modal__foot{ margin:14px 0 0; font-size:.78rem; color:var(--ink-3); text-align:center; }
.wc-modal__foot a{ color:var(--green-ink); font-weight:700; }

.wc-account{ max-width:380px; }
.wc-account__card{
  display:grid; gap:12px; padding:14px; margin:4px 0 14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
}
.wc-account__addr{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  word-break:break-all; color:var(--ink); font-weight:600;
}
.wc-account__bal{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.wc-account__bal span{ color:var(--ink-3); font-size:.8rem; font-weight:600; }
.wc-account__bal b{ font-size:1.15rem; font-weight:800; color:var(--green-ink); }
.wc-account__actions{ display:grid; gap:8px; }

/* ============================================================
   MULTI-PAGE: shared shell + create / portfolio / analytics / docs / legal
   ============================================================ */
.nav__links a.is-current{ color:var(--green-ink); background:rgba(140,191,6,.12); }

.page{ padding-block:clamp(24px,4vw,44px) clamp(24px,4vw,44px); }
.page-head{ margin-bottom:clamp(22px,3vw,34px); }
.page-head h1{ font-size:clamp(1.9rem,4.2vw,2.8rem); font-weight:900; font-stretch:86%; }
.page-head p{ color:var(--ink-2); margin:.55em 0 0; max-width:62ch; }
.page-head a{ color:var(--green-ink); font-weight:700; }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-2); }
.panel__head h3{ font-size:1.05rem; font-weight:800; }

/* ---- create ---- */
.create{ display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .create{ grid-template-columns:1.12fr .88fr; } }
.create__form{ padding:clamp(20px,3vw,30px); display:grid; gap:16px; }
.field{ display:grid; gap:6px; }
.field>label{ font-weight:700; font-size:.85rem; color:var(--ink-2); }
.opt{ color:var(--ink-3); font-weight:600; font-size:.78rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.create__form input,.create__form select,.create__form textarea{ width:100%; padding:.72em .9em; font-size:.98rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); outline:none; transition:.18s; font-family:inherit; }
.create__form input:focus,.create__form select:focus,.create__form textarea:focus{ border-color:var(--green); box-shadow:var(--ring); background:rgba(255,255,255,.03); }
.create__form textarea{ resize:vertical; }
.hint{ color:var(--ink-3); font-size:.78rem; }
.input-suffix{ position:relative; display:flex; align-items:center; }
.input-suffix input{ padding-right:2.8em; }
.input-suffix>span{ position:absolute; right:.9em; color:var(--ink-3); font-weight:700; font-size:.85rem; pointer-events:none; }
.uploader{ display:flex; align-items:center; gap:14px; padding:13px; border:1.5px dashed var(--line); border-radius:var(--r); cursor:pointer; transition:.18s; background:var(--bg); }
.uploader:hover{ border-color:var(--green); background:rgba(255,255,255,.03); }
.uploader__thumb{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink-3); overflow:hidden; }
.uploader__thumb img{ width:100%; height:100%; object-fit:cover; }
.uploader__text b{ display:block; font-size:.92rem; }
.uploader__text small{ color:var(--ink-3); font-size:.78rem; }
.advanced summary{ cursor:pointer; list-style:none; font-weight:700; font-size:.88rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; }
.advanced summary::-webkit-details-marker{ display:none; }
.advanced summary .ic{ transition:transform .2s; }
.advanced[open] summary .ic{ transform:rotate(90deg); }
.advanced .field{ margin-top:12px; }
.fees{ display:grid; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.fees div{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--ink-2); }
.fees b{ color:var(--ink); font-weight:800; }
.fees__total{ border-top:1px solid var(--line); margin-top:4px; padding-top:8px; }
.fineprint{ color:var(--ink-3); font-size:.78rem; margin:0; }
.create__preview{ display:grid; gap:12px; }
@media (min-width:900px){ .create__preview{ position:sticky; top:calc(var(--nav-h) + 16px); } }
.preview__title{ font-size:.82rem; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.create__preview .stock-card{ cursor:default; max-width:320px; }
.create__preview .stock-card:hover{ transform:none; box-shadow:var(--sh-1); border-color:var(--line); }
.preview__note{ color:var(--ink-3); font-size:.82rem; margin:0; max-width:320px; }

/* ---- portfolio ---- */
.pf-section{ margin-bottom:clamp(28px,4vw,44px); }
.pf-title{ font-size:1.15rem; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.pf-title .count{ display:inline-grid; place-items:center; min-width:1.6em; height:1.6em; padding:0 .45em; border-radius:999px; background:var(--green-soft); color:var(--green-ink); font-size:.78rem; font-weight:800; }
.empty-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:clamp(28px,5vw,44px); text-align:center; color:var(--ink-2); }
.empty-box p{ margin:0; }
.empty-box .btn{ margin-top:14px; }
.empty-box a{ color:var(--green-ink); font-weight:700; }
.sc-addr{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2); font-size:.78rem; color:var(--ink-3); font-family:ui-monospace,monospace; }

.pf-list{ display:grid; gap:10px; }
.pf-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 80%); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:12px 14px; color:inherit; text-decoration:none;
  transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
  animation:cardIn .4s cubic-bezier(.22,.9,.36,1) backwards;
}
a.pf-row:hover, .pf-row--launch:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:rgba(198,247,54,.35); }
.pf-row__main{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; color:inherit; text-decoration:none; }
.pf-logo{
  position:relative; width:48px; height:48px; flex:none; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#C6D88E,#8B9A58);
}
.pf-logo img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block; background:#0E1007;
}
.pf-logo__fb{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  font-weight:800; font-size:.78rem; color:#fff; letter-spacing:.02em;
}
.pf-row__meta{ display:flex; flex-direction:column; min-width:0; flex:1; }
.pf-row__meta b{ font-size:.98rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-row__meta small{ color:var(--ink-3); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-row__stats{ display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; flex:none; }
.pf-row__stats b{ font-size:.95rem; font-weight:800; }
.pf-row__stats small{ color:var(--ink-3); font-size:.72rem; }
.pf-row__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:100%; padding-top:10px; margin-top:2px; border-top:1px solid var(--line-2); }
@media (min-width:720px){
  .pf-row--launch{ flex-wrap:nowrap; }
  .pf-row__actions{ width:auto; padding-top:0; margin-top:0; border-top:0; margin-left:8px; }
}
.pf-row__fee{ display:flex; flex-direction:column; align-items:flex-end; }
.pf-row__fee small{ color:var(--ink-3); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pf-row__fee b{ font-size:.9rem; font-weight:800; }
.pf-claim{ flex:none; white-space:nowrap; }

/* ---- analytics ---- */
.metrics{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:18px; }
@media (min-width:820px){ .metrics{ grid-template-columns:repeat(4,1fr); } }
.metric{ background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 80%); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:18px;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.metric:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:rgba(198,247,54,.3); }
.metric__ic{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green-soft); color:var(--green-ink); margin-bottom:10px; }
.metric b{ display:block; font-size:clamp(1.5rem,3.2vw,2rem); font-weight:800; }
.metric__label{ display:block; color:var(--ink-2); font-size:.84rem; font-weight:600; margin-top:2px; }
.metric em{ font-style:normal; font-weight:700; font-size:.82rem; }
.metric em.up{ color:var(--up); } .metric em.dn{ color:var(--down); }
.chart-panel{ margin-bottom:18px; }
.chart{ height:clamp(200px,32vw,280px); padding:14px 16px 16px; }
.movers{ display:grid; }
.mover{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line-2); cursor:pointer; transition:background .2s, padding-left .2s; }
.mover:first-child{ border-top:0; }
.mover:hover{ background:rgba(166,225,11,.07); padding-left:24px; }
.mover__rank{ width:18px; color:var(--ink-3); font-weight:800; font-size:.85rem; }
.mover__logo{ width:34px; height:34px; flex:none; }
.mover__logo .logo-wrap{ width:100%; height:100%; border-radius:9px; }
.mover__logo .logo-img{ padding:8%; }
.mover__logo .logo-mono{ font-size:.7rem; }
.mover__name{ display:flex; flex-direction:column; }
.mover__name b{ font-size:.95rem; } .mover__name small{ color:var(--ink-3); font-size:.78rem; }
.mover__chg{ margin-left:auto; font-weight:800; font-size:.9rem; }
.mover__chg.up{ color:var(--up); } .mover__chg.dn{ color:var(--down); }

/* ---- docs ---- */
.docs{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:860px){ .docs{ grid-template-columns:220px 1fr; align-items:start; } }
.docs__side{ display:none; }
@media (min-width:860px){ .docs__side{ display:block; position:sticky; top:calc(var(--nav-h) + 16px); } }
.docs__nav{ display:grid; gap:2px; }
.docs__nav a{ padding:.5em .8em; border-radius:10px; font-weight:600; font-size:.9rem; color:var(--ink-2); transition:.15s; }
.docs__nav a:hover{ color:var(--green-ink); background:rgba(140,191,6,.08); }
.docs__nav a.is-current{ color:var(--green-ink); background:var(--green-soft); }
.docs__content{ display:grid; gap:18px; max-width:760px; }
.doc{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:clamp(20px,3vw,30px); scroll-margin-top:calc(var(--nav-h) + 20px); }
.doc__ic{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--green-soft); color:var(--green-ink); margin-bottom:12px; }
.doc h2{ font-size:1.3rem; font-weight:800; margin-bottom:.4em; }
.doc h3{ font-size:.95rem; font-weight:800; margin:1.1em 0 .35em; }
.doc p{ color:var(--ink-2); margin:.6em 0; }
.doc a{ color:var(--green-ink); font-weight:700; }
.doc__list,.doc__steps{ color:var(--ink-2); margin:.6em 0; display:grid; gap:.5em; }
.doc__list{ padding-left:1.2em; }
.doc__steps{ counter-reset:s; list-style:none; padding-left:0; }
.doc__steps li{ position:relative; padding-left:2.4em; }
.doc__steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-.1em; width:1.7em; height:1.7em; display:grid; place-items:center; background:var(--grad-brand); color:#fff; border-radius:50%; font-weight:800; font-size:.78rem; }
.callout{ display:flex; gap:12px; align-items:flex-start; background:var(--green-soft); border:1px solid rgba(140,191,6,.25); border-radius:var(--r); padding:14px 16px; margin-top:14px; }
.callout .ic{ color:var(--green-ink); flex:none; margin-top:2px; }
.callout p{ margin:0; color:var(--ink-2); font-size:.9rem; }
.fees--doc{ margin:.8em 0; }

/* ---- faq (shared) ---- */
.faq__item{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:10px; }
.faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__x{ flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--green-ink); background:var(--card); border:1px solid var(--line); border-radius:50%; transition:transform .25s; }
.faq__item[open] .faq__x{ transform:rotate(135deg); }
.faq__item p{ padding:0 16px 14px; margin:0; color:var(--ink-2); }

/* ---- legal ---- */
.legal{ max-width:760px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:clamp(24px,4vw,40px); }
.legal h2{ font-size:1.12rem; font-weight:800; margin:1.5em 0 .4em; }
.legal h2:first-of-type{ margin-top:.6em; }
.legal p{ color:var(--ink-2); margin:.6em 0; }
.legal ul{ color:var(--ink-2); padding-left:1.2em; display:grid; gap:.4em; margin:.6em 0; }
.legal b{ color:var(--ink); }

/* ============================================================
   CREATE — pons-v2 style controls (links, pair, segmented toggle)
   ============================================================ */
.btn--lg{ --py:.95em; --px:1.4em; font-size:1rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }

/* prefixed inputs (website / x.com/ / t.me/) */
.links{ display:grid; gap:10px; }
.input-prefix{ display:flex; align-items:stretch; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; transition:.18s; }
.input-prefix:focus-within{ border-color:var(--green); box-shadow:var(--ring); background:rgba(255,255,255,.03); }
.input-prefix>span{ display:inline-flex; align-items:center; gap:.35em; padding:0 .3em 0 .85em; color:var(--ink-3); font-weight:700; font-size:.9rem; white-space:nowrap; border-right:1px solid var(--line-2); background:rgba(255,255,255,.02); }
.input-prefix__ic{ padding:0 .55em !important; }
.input-prefix__ic .ic{ color:var(--ink-3); }
.create__form .input-prefix input{ border:0; border-radius:0; background:transparent; box-shadow:none; padding-left:.6em; }
.create__form .input-prefix input:focus{ box-shadow:none; background:transparent; }

/* pair picker (custom — logos + dark menu; native <select> can't do round icons) */
.pair-picker{ position:relative; }
.pair-picker__btn{ width:100%; display:flex; align-items:center; gap:12px; padding:.7em .9em; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); color:var(--ink); cursor:pointer; font:inherit; text-align:left; transition:.18s; }
.pair-picker__btn:hover,.pair-picker__btn[aria-expanded="true"]{ border-color:var(--green); box-shadow:var(--ring); }
.pair-picker__logo{ flex:none; width:28px; height:28px; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; }
.pair-picker__logo img{ width:100%; height:100%; object-fit:contain; display:block; padding:12%; background:#fff; }
.pair-picker__logo span{ font-size:.62rem; font-weight:800; color:#1E2605; background:linear-gradient(135deg,#DCFF6B,#8CBF06); width:100%; height:100%; display:grid; place-items:center; }
.pair-picker__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.pair-picker__text b{ font-size:.95rem; font-weight:800; color:var(--ink); }
.pair-picker__text small{ font-size:.75rem; font-weight:600; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pair-picker__chev{ flex:none; width:16px; height:16px; color:var(--ink-3); transform:rotate(90deg); transition:transform .18s; }
.pair-picker__btn[aria-expanded="true"] .pair-picker__chev{ transform:rotate(-90deg); }
.pair-picker__menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; max-height:280px; overflow:auto; padding:6px; background:#0E1007; border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); }
.pair-picker__opt{ width:100%; display:flex; align-items:center; gap:12px; padding:.55em .65em; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink); cursor:pointer; font:inherit; text-align:left; }
.pair-picker__opt:hover,.pair-picker__opt.is-active{ background:rgba(166,225,11,.1); }
.pair-picker__opt .pair-picker__logo{ width:26px; height:26px; }
.pair-picker__opt b{ font-size:.9rem; font-weight:800; color:#F3F8E6; }
.pair-picker__opt small{ font-size:.72rem; font-weight:600; color:#B3BE99; }

/* legacy pair pill bits (unused) */
.pair{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:.75em 1em; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); }
.pair__due{ font-weight:700; font-size:.85rem; color:var(--green-ink); background:var(--green-soft); border:1px solid rgba(140,191,6,.25); padding:.3em .7em; border-radius:var(--r-pill); white-space:nowrap; }

/* segmented radio (holder fee sharing) */
.segment{ display:grid; gap:10px; }
@media (min-width:560px){ .segment{ grid-template-columns:1fr 1fr; } }
.segment__opt{ position:relative; display:grid; gap:3px; padding:12px 14px 12px 40px; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; transition:.16s; }
.segment__opt input{ position:absolute; opacity:0; width:0; height:0; }
.segment__opt::before{ content:""; position:absolute; left:14px; top:14px; width:16px; height:16px; border-radius:50%; border:2px solid var(--ink-3); transition:.16s; }
.segment__opt.is-active{ border-color:var(--green); background:rgba(255,255,255,.03); box-shadow:var(--ring); }
.segment__opt.is-active::before{ border-color:var(--green); background:radial-gradient(circle,var(--green) 0 42%,transparent 46%); }
.segment__opt b{ font-size:.9rem; font-weight:800; color:var(--ink); }
.segment__opt small{ color:var(--ink-3); font-size:.78rem; line-height:1.45; }

/* preview link chips */
.preview__links{ display:flex; flex-wrap:wrap; gap:8px; max-width:320px; }

/* ---------- launch success modal ---------- */
.launch-ok{
  position:fixed; inset:0; z-index:220; display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.launch-ok[hidden]{ display:none !important; }
.launch-ok__backdrop{ position:absolute; inset:0; background:rgba(5,6,2,.72); backdrop-filter:blur(8px); }
.launch-ok__panel{
  position:relative; width:min(420px,100%);
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 85%);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  padding:22px 20px 18px; display:grid; gap:12px;
  animation:cardIn .35s cubic-bezier(.22,.9,.36,1);
}
.launch-ok__x{
  position:absolute; top:10px; right:10px; border:0; background:transparent;
  color:var(--ink-2); font-size:1.4rem; line-height:1; cursor:pointer; padding:6px 10px; border-radius:8px;
}
.launch-ok__x:hover{ background:var(--green-soft); color:var(--green-ink); }
.launch-ok__badge{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  padding:.4em .75em; border-radius:var(--r-pill); font-size:.82rem; font-weight:800;
  color:var(--green-ink); background:var(--green-soft); border:1px solid rgba(166,225,11,.28);
}
.launch-ok__badge .ic{ width:1em; height:1em; }
.launch-ok__title{ margin:0; font-size:1.35rem; font-weight:800; line-height:1.25; }
.launch-ok__sub{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.45; }
.launch-ok__card{
  display:flex; align-items:center; gap:14px; padding:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
}
.launch-ok__logo{
  width:64px; height:64px; flex:none; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#C6D88E,#8B9A58); display:grid; place-items:center;
}
.launch-ok__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.launch-ok__logo .logo-mono{ font-weight:800; font-size:1.1rem; color:#fff; }
.launch-ok__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.launch-ok__meta b{ font-size:1.15rem; font-weight:800; }
.launch-ok__meta span{ color:var(--green-ink); font-weight:700; font-size:.95rem; }
.launch-ok__addr{ font-family:ui-monospace,monospace; font-size:.78rem; color:var(--ink-3); }
.launch-ok__actions{ display:grid; gap:8px; margin-top:4px; }
.launch-ok__again{
  justify-self:center; margin-top:2px; background:transparent; border:0;
  color:var(--ink-2); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.launch-ok__again:hover{ color:var(--green-ink); }
body.is-launch-ok{ overflow:hidden; }

/* legacy class kept so old cached CSS doesn't break */
.launch-success[hidden]{ display:none !important; }
.pv-chip{ display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:700; color:var(--ink-2); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r-pill); padding:.35em .7em; }
.pv-chip .ic{ width:.95em; height:.95em; color:var(--ink-3); }

/* ============================================================
   TOKEN PAGE — /token/{address}
   ============================================================ */
.tk-back{ display:inline-flex; align-items:center; gap:.4em; color:var(--ink-2); font-weight:700; font-size:.86rem; margin-bottom:16px; padding:.4em .8em; border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.03); transition:.16s; }
.tk-back:hover{ color:var(--green-ink); border-color:rgba(166,225,11,.3); }
.tk-back .ic{ width:.95em; height:.95em; }

.tk{ display:grid; gap:18px; }
.tk-loading,.tk-error{ color:var(--ink-3); text-align:center; padding:60px 0; font-weight:600; }
.tk-error b{ color:var(--ink); }

/* about / identity header */
.tk-about{ padding:clamp(18px,3vw,26px); display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.tk-logo{ width:64px; height:64px; flex:none; border-radius:16px; overflow:hidden; background:var(--logo-bg); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(196,231,96,.15); }
.tk-logo img{ width:100%; height:100%; object-fit:cover; }
.tk-logo span{ font-weight:800; font-size:1.5rem; color:#1E2605; background:linear-gradient(135deg,#DCFF6B,#8CBF06); width:100%; height:100%; display:grid; place-items:center; }
.tk-id{ display:grid; gap:4px; min-width:0; }
.tk-id h1{ font-size:clamp(1.45rem,3.3vw,2.05rem); font-weight:900; font-stretch:88%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tk-sym{ color:var(--green-ink); font-weight:800; font-size:.9rem; }
.tk-pair{ font-size:.72rem; font-weight:700; color:var(--ink-2); background:var(--green-soft); border:1px solid rgba(166,225,11,.25); padding:.2em .6em; border-radius:var(--r-pill); }
.tk-desc{ color:var(--ink-2); font-size:.92rem; max-width:70ch; margin:2px 0 0; }
.tk-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.tk-chip{ display:inline-flex; align-items:center; gap:.4em; font-size:.76rem; font-weight:700; color:var(--ink-2); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r-pill); padding:.34em .7em; font-family:ui-monospace,monospace; }
button.tk-chip{ cursor:pointer; font:inherit; line-height:inherit; }
.tk-chip:hover{ color:var(--green-ink); border-color:rgba(166,225,11,.3); }
.tk-chip .ic{ width:.95em; height:.95em; color:var(--ink-3); }
.tk-chip--social{ font-family:inherit; }
.tk-about__aside{ margin-left:auto; display:grid; gap:10px; text-align:right; }
.tk-kv small{ display:block; color:var(--ink-3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tk-kv b{ font-size:.95rem; font-weight:800; }
.tk-kv a{ color:inherit; text-decoration:none; }
.tk-kv a:hover{ color:var(--green-ink); }

/* two-column body */
.tk-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:940px){ .tk-grid{ grid-template-columns:1.7fr 1fr; align-items:start; } }
.tk-main{ display:grid; gap:18px; min-width:0; }
.tk-side{ display:grid; gap:18px; min-width:0; }
@media (min-width:940px){ .tk-side{ position:sticky; top:calc(var(--nav-h) + 16px); } }

/* price header */
.tk-stats{ display:flex; flex-wrap:wrap; gap:22px 34px; align-items:flex-end; padding:6px 2px 2px; }
.tk-stat small{ display:block; color:var(--ink-3); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.tk-stat b{ font-size:1.05rem; font-weight:800; }
.tk-stat--price b{ font-size:clamp(1.6rem,4vw,2.2rem); letter-spacing:-.02em; }
.tk-chg{ font-weight:800; font-size:.9rem; }
.tk-chg.up{ color:var(--up); } .tk-chg.dn{ color:var(--down); }

/* chart */
.tk-chart{ padding:14px 16px 16px; }
.tk-chart__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.tk-tabs{ display:flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:3px; border-radius:var(--r-pill); }
.tk-tab{ border:0; background:transparent; color:var(--ink-2); font-weight:700; font-size:.78rem; padding:.35em .7em; border-radius:var(--r-pill); cursor:pointer; transition:.15s; }
.tk-tab:hover{ color:var(--green-ink); }
.tk-tab.is-active{ background:var(--ink); color:#0C0A0B; }
.tk-canvas-wrap{ position:relative; width:100%; height:clamp(240px,38vw,340px); }
.tk-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.tk-chart__empty{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-3); font-weight:600; font-size:.9rem; }
.tk-chart__empty[hidden]{ display:none; }

/* buy/sell */
.tk-trade__seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r); padding:4px; margin-bottom:14px; }
.tk-trade__seg button{ border:0; background:transparent; color:var(--ink-2); font-weight:800; font-size:.92rem; padding:.6em; border-radius:calc(var(--r) - 5px); cursor:pointer; transition:.15s; }
.tk-trade__seg button.is-buy{ background:var(--grad-brand); color:#0C0A0B; }
.tk-trade__seg button.is-sell{ background:var(--down); color:#2a0805; }
.tk-amount{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:.7em .9em; margin-bottom:8px; transition:.16s; }
.tk-amount:focus-within{ border-color:var(--green); box-shadow:var(--ring); }
.tk-amount input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:1.1rem; font-weight:700; }
.tk-amount .cur{ font-weight:800; font-size:.85rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px; }
.tk-quick{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.tk-quick button{ flex:1; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ink-2); font-weight:700; font-size:.78rem; padding:.45em; border-radius:var(--r-pill); cursor:pointer; transition:.15s; }
.tk-quick button:hover{ color:var(--green-ink); border-color:rgba(166,225,11,.3); }
.tk-venue{ margin:0 0 10px; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--green-ink); }
.tk-est{ min-height:1.2em; margin:0 0 12px; font-size:.82rem; font-weight:650; color:var(--ink-2); }
.tk-est b{ color:var(--ink); }
.tk-trade__note{ color:var(--ink-3); font-size:.78rem; margin:10px 0 0; line-height:1.5; }

/* bonding curve card */
.tk-curve__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tk-curve__head b{ font-weight:800; }
.tk-curve__pct{ color:var(--green-ink); font-weight:800; font-size:.85rem; }
.tk-bar{ height:10px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); overflow:hidden; border:1px solid var(--line); }
.tk-bar__fill{ height:100%; background:var(--grad-brand); border-radius:var(--r-pill); transition:width .5s ease; box-shadow:0 0 14px rgba(203,248,52,.5); }
.tk-curve__note{ color:var(--ink-3); font-size:.8rem; margin:10px 0 0; line-height:1.5; }

/* creator fees card */
.tk-fees__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.tk-fees__grid small{ display:block; color:var(--ink-3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.tk-fees__grid b{ font-size:1.02rem; font-weight:800; }
.tk-fees .btn{ margin-top:6px; }

/* trades + holders lists */
.tk-list__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.tk-list__head h3{ font-size:1rem; font-weight:800; }
.tk-list__head .live{ font-size:.72rem; font-weight:700; color:var(--green-ink); display:inline-flex; align-items:center; gap:6px; }
.tk-list__head .live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }
.tk-rows{ display:grid; max-height:360px; overflow:auto; }
.tk-row{ display:grid; align-items:center; gap:10px; padding:10px 18px; border-top:1px solid var(--line-2); font-size:.84rem; }
.tk-row:first-child{ border-top:0; }
.tk-trades .tk-row{ grid-template-columns:56px 1fr auto auto; }
.tk-holders .tk-row{ grid-template-columns:26px 1fr auto; }
.tk-side-tag{ font-weight:800; font-size:.74rem; padding:.2em .55em; border-radius:var(--r-pill); text-align:center; }
.tk-side-tag.buy{ color:var(--up); background:rgba(166,225,11,.14); }
.tk-side-tag.sell{ color:var(--down); background:rgba(255,107,94,.14); }
.tk-addr{ font-family:ui-monospace,monospace; color:var(--ink-2); }
.tk-addr:hover{ color:var(--green-ink); }
.tk-amt{ font-weight:700; color:var(--ink); text-align:right; }
.tk-amt small{ color:var(--ink-3); font-weight:600; }
.tk-time{ color:var(--ink-3); font-size:.78rem; text-align:right; white-space:nowrap; }
.tk-rank{ color:var(--ink-3); font-weight:800; }
.tk-pct{ font-weight:800; color:var(--ink); text-align:right; }
.tk-empty{ color:var(--ink-3); text-align:center; padding:26px; font-size:.86rem; }
.tk-rows::-webkit-scrollbar{ width:8px; } .tk-rows::-webkit-scrollbar-thumb{ background:rgba(196,231,96,.15); border-radius:8px; }

/* ---- rewards ---- */
.rw-stats{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-bottom:22px; }
@media (min-width:760px){ .rw-stats{ grid-template-columns:repeat(4,1fr); } }
.rw-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh-1); }
.rw-stat small{ display:block; color:var(--ink-3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.rw-stat b{ display:block; margin-top:6px; font-size:1.15rem; font-weight:800; }
.rw-stocks{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-bottom:22px; }
@media (min-width:760px){ .rw-stocks{ grid-template-columns:repeat(4,1fr); } }
.rw-stock{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.rw-stock b{ display:block; font-weight:800; }
.rw-stock small{ color:var(--ink-3); font-size:.72rem; }
.rw-stock strong{ margin-left:auto; font-weight:800; font-size:.95rem; }
.rw-logo{ position:relative; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--line-2); flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.04); }
.rw-logo img,.rw-logo .logo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:16%; background:#fff; }
.rw-check{ padding:0 0 20px; margin-bottom:22px; }
.rw-check .panel__head{ margin-bottom:0; }
.rw-week{ font-size:.78rem; font-weight:700; color:var(--ink-3); }
.rw-form{ display:flex; gap:10px; padding:16px 20px 0; flex-wrap:wrap; }
.rw-form .search{ flex:1; min-width:220px; }
.rw-hint{ color:var(--ink-3); font-size:.8rem; padding:10px 20px 0; margin:0; max-width:72ch; }
.rw-hint a{ color:var(--green-ink); }
#rwResult{ padding:16px 20px 0; }
.rw-card{ display:grid; gap:16px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.rw-card__stock{ display:flex; align-items:center; gap:12px; }
.rw-card__stock .rw-logo{ width:52px; height:52px; }
.rw-card__stock small{ color:var(--ink-3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.rw-card__stock b{ display:block; font-size:1.35rem; font-weight:800; }
.rw-card__stock span{ color:var(--ink-3); font-size:.9rem; font-weight:600; }
.rw-card__grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.rw-card__grid small{ display:block; color:var(--ink-3); font-size:.72rem; font-weight:700; }
.rw-card__grid b{ font-size:1.02rem; font-weight:800; }
.rw-card__note{ color:var(--ink-3); font-size:.8rem; margin:0; }
.rw-card__note a{ color:var(--green-ink); font-weight:700; }
.rw-empty{ text-align:center; padding:18px 8px; }
.rw-empty b{ display:block; font-size:1.05rem; }
.rw-empty p{ color:var(--ink-3); margin:.5em 0 0; }
.rw-empty a{ color:var(--green-ink); }
.rw-split{ margin-bottom:8px; }
.rw-rows{ display:grid; max-height:min(640px,70vh); overflow:auto; }
.rw-row{ display:grid; grid-template-columns:26px 1fr auto; gap:8px 10px; align-items:center; padding:12px 18px; border-top:1px solid var(--line-2); font-size:.84rem; }
.rw-row:first-child{ border-top:0; }
.rw-row__hold{ color:var(--ink-2); font-weight:700; grid-column:2; }
.rw-row__stock{ display:inline-flex; align-items:center; gap:6px; font-weight:800; }
.rw-row__stock .rw-logo{ width:26px; height:26px; }
.rw-row__usd{ text-align:right; font-weight:800; }
.rw-row__usd small{ display:block; color:var(--ink-3); font-weight:600; font-size:.72rem; }
@media (min-width:700px){
  .rw-row{ grid-template-columns:26px 1fr auto auto auto; }
  .rw-row__hold{ grid-column:auto; }
}
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }