:root {
  --bg: #0b0b10;
  --card: #15151d;
  --card-2: #1d1d28;
  --line: #2a2a38;
  --text: #f4f4f8;
  --muted: #8a8aa0;
  --accent: #8b6cff;
  --accent-2: #b9a6ff;
  --up: #3ddc97;
  --down: #ff5c7a;
  --radius: 22px;
  --page-max: 1120px; /* content width; grows on large screens (see "Large screens" below) */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* The hidden attribute always hides, even on elements whose class sets display: flex or grid (the chat's
   token list stayed on screen while hidden). */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  padding-bottom: 80px;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; max-width: var(--page-max); margin: 0 auto;
  background: linear-gradient(var(--bg) 70%, transparent);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; color: var(--muted);
}
.search { min-width: 0; }
.search input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: 0; color: var(--text); }
.btn {
  border: 0; border-radius: 999px; padding: 11px 18px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-light { background: var(--text); color: #0b0b10; }
.btn-accent { background: var(--accent); color: #0b0b10; }
.btn-ghost { background: var(--card-2); color: var(--text); }

/* Hero */
/* overflow: clip hides the glow below like hidden does, but the card can't be scrolled sideways when a
   button inside it takes focus (with hidden, clicking the profile's Tip button slid the card 120px). */
.hero {
  position: relative; overflow: hidden; overflow: clip;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 28px; padding: 28px; margin-top: 8px;
}
.hero::after {
  /* Decoration only: it sits over the card's top-right corner, so it must not catch clicks (it covered the
     profile's Tip button). */
  pointer-events: none;
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(var(--accent) 0%, transparent 65%); opacity: .25;
}
.eyebrow { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.big { font-size: clamp(40px, 8vw, 72px); font-weight: 800; letter-spacing: -2px; margin: 8px 0 4px; }
.big .cents { color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; align-items: flex-end; }
.stat small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.stat b { font-size: 18px; }
.stats .btn { margin-left: auto; }
.ticker-cards {
  position: absolute; right: 28px; top: 28px; z-index: 1;
  display: flex; flex-direction: column; gap: 8px; width: 250px;
}
.earn-card {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 12px; font-size: 13px;
  animation: float 4s ease-in-out infinite;
}
.earn-card:nth-child(2) { animation-delay: 1.3s; opacity: .8; }
.earn-card:nth-child(3) { animation-delay: 2.6s; opacity: .6; }
@keyframes float { 50% { transform: translateY(-4px); } }

/* Trust strip */
.trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.chip.good { color: var(--up); border-color: #24513f; background: #12241d; }
.chip.accent { color: var(--accent-2); border-color: #3b3266; background: #1c1830; }

/* Section heads */
h2 { font-size: 18px; margin: 36px 0 14px; }

/* Trending carousel */
.carousel { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: scroll 45s linear infinite; }
.track:hover { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.tcard {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 12px; width: 260px;
}
.avatar {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #0b0b10;
}
.tcard .sym { font-weight: 800; }
.tcard .row { font-size: 13px; display: flex; gap: 8px; margin-top: 4px; }

/* Pulse feed */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; color: var(--muted);
}
.tab.on { background: var(--text); color: #0b0b10; border-color: var(--text); }
.feed { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--card-2); }
.item .name { font-weight: 800; }
.item .name span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; margin-top: 6px; align-items: center; }
.pill { background: var(--card-2); border-radius: 6px; padding: 2px 6px; font-weight: 600; }
.pill.good { color: var(--up); }
.bar { height: 6px; width: 110px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--up)); }
.right { text-align: right; font-size: 13px; }
.right b { font-size: 14px; }
.buy {
  margin-top: 8px; border: 0; border-radius: 10px; padding: 6px 12px;
  background: var(--up); color: #0b0b10; font-weight: 800; cursor: pointer;
}
.score {
  display: inline-grid; place-items: center; width: 34px; height: 22px; border-radius: 6px;
  font-weight: 800; font-size: 12px; color: #0b0b10;
}

/* Launch page */
.launch { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; margin-top: 8px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 24px; }
.panel h1 { font-size: 34px; margin: 0 0 16px; letter-spacing: -1px; }
.grid3 { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 12px; }
label.f { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.in {
  width: 100%; background: var(--card-2); border: 1px solid transparent;
  border-radius: 14px; padding: 13px 14px; outline: 0;
}
.in:focus { border-color: var(--accent); }
textarea.in { min-height: 90px; resize: vertical; }
.imgpick {
  height: 48px; width: 64px; border-radius: 14px; background: var(--card-2);
  display: grid; place-items: center; cursor: pointer; overflow: hidden; color: var(--muted);
}
.imgpick img { width: 100%; height: 100%; object-fit: cover; }
.imgpick span { display: grid; place-items: center; width: 100%; height: 100%; }
.seg { display: flex; background: var(--card-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: none; padding: 10px; border-radius: 10px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--text); color: #0b0b10; }
.range { width: 100%; accent-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.hint.down { color: var(--down); }
.hint.up { color: var(--up); }
.hint.caution { color: #ffb84d; }
.warnbox { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #2a2012; border: 1px solid #5a4318; color: #ffb84d; font-size: 13px; font-weight: 600; }
.warnbox[hidden] { display: none; }
button.chip { cursor: pointer; color: var(--text); }
button.chip:hover { border-color: var(--accent); }
.rows { display: grid; gap: 8px; margin-top: 8px; }
.row-in { display: flex; gap: 8px; align-items: center; }
.row-in .in { min-width: 0; }
.row-in .tag { flex: none; width: 96px; font-size: 13px; font-weight: 600; color: var(--muted); }
.x { flex: none; width: 44px; height: 46px; border: 0; border-radius: 12px; background: var(--card-2); color: var(--muted); font-size: 18px; cursor: pointer; }
.x:hover { color: var(--down); }
.locked { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.locked li { display: flex; justify-content: space-between; background: var(--card-2); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.locked li em { font-style: normal; color: var(--up); font-weight: 700; font-size: 12px; }
.side { display: flex; flex-direction: column; gap: 14px; }
.notice { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-weight: 700; }
.fees { width: 100%; border-collapse: collapse; font-size: 14px; }
.fees td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.fees td:last-child { text-align: right; font-weight: 700; }
.wide { width: 100%; padding: 15px; font-size: 16px; margin-top: 20px; }

/* $CORVX page */
.navlink { font-weight: 700; color: var(--accent-2); padding: 0 6px; white-space: nowrap; }
.navlink:hover { color: var(--text); }
a.stat:hover b { color: var(--accent-2); }
.eyebrow .avatar { border-radius: 8px; font-size: 13px; }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ucard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.ucard p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.uicon { width: 38px; height: 38px; border-radius: 12px; background: #1c1830; color: var(--accent-2); display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.steps li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #0b0b10; font-weight: 800; display: grid; place-items: center; margin-bottom: 4px; }
table.facts td:last-child { text-align: right; font-weight: 600; }

.ca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; background: var(--card-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.warn { color: #ffb84d; font-size: 13px; margin: 12px 0 0; }
.proofs a { color: var(--accent-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.burnrow { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.burnrow .stats { align-items: flex-start; }
.countdown { font-size: clamp(28px, 6vw, 40px); font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0; }
.stat small + b + small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.stackbar { display: flex; gap: 2px; height: 36px; margin-bottom: 8px; }
.stackbar .sbar { display: grid; place-items: center; color: #0b0b10; font-size: 12px; font-weight: 700; min-width: 4px; cursor: default; }
.stackbar .sbar:first-child { border-radius: 4px 0 0 4px; }
.stackbar .sbar:last-child { border-radius: 0 4px 4px 0; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.legend-table th:not(:first-child), .legend-table td:not(:first-child) { text-align: right; }
.tip { position: fixed; z-index: 40; pointer-events: none; background: var(--text); color: #0b0b10; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }

/* Burn page */
.burnbig { font-size: clamp(36px, 7vw, 60px); font-weight: 800; color: var(--accent-2); }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
table.list th { color: var(--muted); font-weight: 600; font-size: 12px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: var(--text); color: #0b0b10; padding: 12px 18px; border-radius: 999px;
  font-weight: 700; z-index: 30; max-width: calc(100% - 32px); text-align: center;
}

/* Footer and mobile nav */
.footer { max-width: var(--page-max); margin: 48px auto 0; padding: 24px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: none; justify-content: space-around; align-items: center;
  background: #111118; border-top: 1px solid var(--line); padding: 10px 0 14px; font-size: 22px;
}
.bottomnav .plus { background: var(--text); color: #0b0b10; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; }

/* Tablets: the header has no room for every link, so the bottom nav takes over below 960px. */
@media (max-width: 960px) {
  .hide-sm { display: none; }
  .bottomnav { display: flex; }
}
@media (max-width: 860px) {
  .launch { grid-template-columns: 1fr; }
  .ticker-cards { display: none; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .bottomnav { display: flex; }
  .topbar { gap: 8px; }
  .search { min-width: 0; padding: 9px 12px; }
  .topbar .btn { padding: 10px 14px; }
  .logo span { display: none; }
  .hero { padding: 22px; }
  .stats { gap: 18px; }
  .stats .btn { margin-left: 0; width: 100%; }
  .item { grid-template-columns: 44px 1fr; }
  .item .avatar { width: 44px; height: 44px; }
  .item .right { grid-column: 2; text-align: left; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .item .right .buy { margin-top: 0; }
  .grid3 { grid-template-columns: 64px 1fr; }
  .grid3 > :last-child { grid-column: 1 / -1; }
}

/* Creator dashboard */
.buy:disabled, .btn:disabled { background: var(--card-2); color: var(--muted); cursor: default; }
.dash-row { cursor: default; }
.dash-row a.name:hover { color: var(--accent-2); }

/* Vanity addresses */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; }
.vanity { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vanity code { flex: 1 1 200px; background: var(--card-2); border-radius: 14px; padding: 13px 14px; font-size: 14px; color: var(--accent-2); }

/* Navigation polish */
.navlink.active { color: var(--text); }
.bottomnav a { display: grid; place-items: center; width: 44px; height: 40px; color: var(--muted); border-radius: 12px; }
.bottomnav a.active { color: var(--accent-2); }
.bottomnav a.plus { color: #0b0b10; }
.scorewrap { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 8px 14px; }
}

/* Login dialog and account menu */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 9, 0.72); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.modal h2 { margin: 0 0 6px; font-size: 22px; }
.modal > p.muted { margin: 0 0 16px; font-size: 14px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; }
.providers { display: grid; gap: 8px; margin-top: 14px; }
.provider { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--line); background: var(--card-2); border-radius: 14px; padding: 12px 14px; font-weight: 700; cursor: pointer; text-align: left; }
.provider:hover, .provider:focus-visible { border-color: var(--accent); outline: none; }
.pmark { width: 28px; height: 28px; border-radius: 8px; background: var(--text); color: #0b0b10; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 18px 0 10px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
button.chip[data-wallet] { padding: 9px 14px; font-size: 13px; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #0b0b10; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.account-menu { position: fixed; top: 64px; right: max(16px, calc((100vw - var(--page-max)) / 2 + 16px)); z-index: 40; width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.account-menu a, .account-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; font-weight: 600; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--card-2); }
.account-menu button { color: var(--down); }
.profile-head { display: flex; gap: 16px; align-items: center; }
.holdings td:not(:first-child), .holdings th:not(:first-child) { text-align: right; }
@media (max-width: 640px) {
  .account-btn { padding: 6px; }
}
@media (max-width: 640px) {
  table.list th, table.list td { padding: 10px 10px; font-size: 13px; }
  .feed.scrollx { overflow-x: auto; }
}

/* Claim bar on the user dashboard */
.claimbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.claim-amount { font-size: clamp(28px, 6vw, 40px); font-weight: 800; margin: 4px 0; }

/* Referral sharing */
.share-row { margin-top: 12px; }
.share-row .chip { padding: 8px 14px; font-size: 13px; color: var(--text); }
.share-row .chip:hover { border-color: var(--accent); }
#refLink { color: var(--accent-2); }

/* Wallet list in the connect dialog */
.provider .detected { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--up); background: #12241d; border: 1px solid #24513f; border-radius: 999px; padding: 3px 8px; }
.provider.not-installed { color: var(--muted); }
.provider .install { margin-left: auto; font-size: 12px; font-weight: 600; }

/* About page */
.about-title { font-size: clamp(32px, 6vw, 56px); letter-spacing: -1.5px; }
.about-lead { max-width: 640px; font-size: 16px; line-height: 1.55; }
.about-rules { margin: 0; }
.about-corvx { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.about-corvx p { flex: 1 1 320px; line-height: 1.55; }
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; line-height: 1.55; font-size: 14px; }
@media (max-width: 640px) {
  .bottomnav a { width: 40px; }
}

/* Legal pages and footer links */
.legal h2 { margin-top: 28px; }
.legal-text { color: #c9c9d6; line-height: 1.65; max-width: 760px; margin: 0; }
.legal-note { font-size: 13px; margin-top: 32px; }
.footlinks { display: flex; gap: 16px; flex-wrap: wrap; }
.footlinks a { color: var(--muted); }
.footlinks a:hover { color: var(--text); }

/* Live devnet trading */
.devnet-banner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; background: var(--card); border: 1px solid #24513f; border-radius: 18px; font-size: 14px; }
.devnet-banner:hover { border-color: var(--up); }
.devnet-go { margin-left: auto; font-weight: 700; color: var(--up); white-space: nowrap; }
.quote { margin-top: 14px; padding: 12px 14px; background: var(--card-2); border-radius: 12px; font-size: 13px; display: grid; gap: 4px; min-height: 44px; }
.quote b { font-size: 15px; }
.quote a, .panel .hint a, .muted a { color: var(--accent-2); }
@media (max-width: 640px) {
  .devnet-banner { flex-wrap: wrap; }
  .devnet-go { margin-left: 0; }
}

.warn-text { color: #ffb84d !important; }

/* Fee table: values stay on one line; descriptions wrap */
.fees td:last-child { white-space: nowrap; padding-left: 12px; vertical-align: top; }

/* Percentage buttons under the trade amount */
.pct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pct-row button { border: 1px solid var(--line); background: var(--card-2); color: var(--muted); border-radius: 10px; padding: 8px 0; font-weight: 700; font-size: 13px; cursor: pointer; }
.pct-row button:hover { color: var(--text); border-color: var(--accent); }
.pct-row button.on { background: var(--text); color: #0b0b10; border-color: var(--text); }

/* Custom slippage */
#liveSlip button { padding-left: 4px; padding-right: 4px; }
.slip-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.slip-custom[hidden] { display: none; }
.slip-custom span { color: var(--muted); font-weight: 700; }

/* Stock pair picker */
.stock-list { display: grid; gap: 6px; margin-top: 8px; max-height: 320px; overflow-y: auto; padding-right: 2px; }
.stock-list .hint { margin: 0 0 2px; }
.stock-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 10px; text-align: left;
  background: var(--card-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.stock-row:hover:not(:disabled) { border-color: var(--accent); }
.stock-row.on { border-color: var(--accent); background: #1c1830; }
.stock-row:disabled { opacity: .5; cursor: not-allowed; }
.stock-row .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stock-row .chip { padding: 3px 8px; font-size: 11px; }
.stock-row .px { font-variant-numeric: tabular-nums; }
.stock-row .up, .stock-row .muted { font-size: 12px; white-space: nowrap; }
.hint .caution { color: #ffb84d; }
@media (max-width: 560px) {
  .stock-row { grid-template-columns: auto auto 1fr auto; }
  .stock-row .chip, .stock-row .px { display: none; }
}
#bondSeg small { display: block; font-weight: 500; font-size: 11px; margin-top: 2px; }


/* Live SOL price in the footer */
.sol-price { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sol-price[hidden] { display: none; }

/* X account link in the footer (bottom left) */
.foot-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
a.foot-x:hover { border-color: var(--accent); }

/* Leaderboard */
.lb-period { max-width: 440px; margin-bottom: 16px; }
.lb-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lb-card { padding: 16px; }
.lb-card.me { border-color: var(--accent); }
.lb-card b { display: block; margin-top: 6px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-medal { font-size: 26px; line-height: 1; }
.lb-metric { font-size: 22px; font-weight: 800; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.lb-table td, .lb-table th { white-space: nowrap; }
.lb-table td:not(:nth-child(2)), .lb-table th:not(:nth-child(2)) { font-variant-numeric: tabular-nums; }
.lb-table tr.me td { background: #1c1830; }
.lb-table .chip { padding: 2px 8px; font-size: 11px; }
@media (max-width: 560px) {
  .lb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lb-card { padding: 10px; }
  .lb-card b { font-size: 12px; }
  .lb-medal { font-size: 20px; }
  .lb-metric { font-size: 15px; }
  .lb-card small { display: none; }
}

/* Account menu balance and profile photos */
.menu-balance { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; gap: 2px; }
.menu-balance b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.menu-balance small { font-size: 12px; }
.menu-who { display: flex; gap: 10px; align-items: center; padding: 8px 12px; font-size: 12px; }
.account-menu { width: 260px; }
.has-photo { background-size: cover; background-position: center; color: transparent; }
.avatar.profile-photo { border-radius: 50%; background-color: var(--accent); display: grid; place-items: center; font-weight: 800; color: #0b0b10; flex: none; }
.avatar.profile-photo.has-photo { color: transparent; }
.photo-row { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.photo-row .btn { display: inline-block; margin-right: 6px; cursor: pointer; }

/* Mobile Buy / Sell bar above the bottom nav (token and pool pages) */
.tradebar { display: none; }
.tradebar button { border: 0; border-radius: 12px; padding: 13px 8px; font-weight: 800; font-size: 15px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tradebar .tb-buy { background: var(--up); color: #0b0b10; }
.tradebar .tb-sell { background: var(--down); color: #fff; }
@media (max-width: 960px) {
  .tradebar {
    position: fixed; left: 0; right: 0; bottom: 65px; z-index: 19;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px;
    background: #111118; border-top: 1px solid var(--line);
    transition: opacity 0.2s, transform 0.2s;
  }
  .tradebar.off { opacity: 0; transform: translateY(8px); pointer-events: none; }
  body.has-tradebar { padding-bottom: 140px; }
}

/* ---------- Desktop layout (961px and wider) ----------
   A left sidebar holds the navigation, the top bar keeps only search and the wallet, and the home page
   gets a side column. Phones and tablets keep the mobile layout with the bottom nav. */
.sidenav, .home-side { display: none; }
@media (min-width: 961px) {
  body { padding-left: 240px; padding-bottom: 24px; }
  .hide-desk { display: none !important; }
  .sidenav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 30;
    display: flex; flex-direction: column; gap: 18px; padding: 20px 14px;
    background: #0f0f15; border-right: 1px solid var(--line);
  }
  .sidenav .logo { padding: 4px 8px; }
  .sidenav-launch { text-align: center; }
  .sidenav-links { display: grid; gap: 2px; }
  .sidenav-links a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--muted); font-weight: 600; }
  .sidenav-links a:hover { background: var(--card); color: var(--text); }
  .sidenav-links a.active { background: var(--card-2); color: var(--text); }
  .sidenav-links a.active svg { color: var(--accent-2); }
  .sidenav-foot { margin-top: auto; padding: 0 12px; font-size: 12px; }
  .topbar { padding-top: 16px; }
  .account-menu { right: max(16px, calc((100vw - 240px - var(--page-max)) / 2 + 16px)); }
}
@media (min-width: 1200px) {
  .home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .home-trending { display: none; }
  .home-side { display: grid; gap: 14px; position: sticky; top: 84px; margin-top: 24px; }
  .side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
  .side-head a { color: var(--accent-2); font-size: 13px; font-weight: 600; }
  .side-list, .side-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .side-list a { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; font-size: 13px; }
  .side-list a:hover { background: var(--card-2); }
  .side-list .avatar { border-radius: 9px; font-size: 13px; }
  .side-list span b, .side-list span small { display: block; }
  .side-rank li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .side-rank li:last-child { border-bottom: 0; }
  .side-rank b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.menu-name { color: var(--text); font-size: 13px; }

/* Price charts */
.chart-box { min-height: 260px; border-radius: 14px; background: var(--card-2); overflow: hidden; position: relative; }
.chart-frame { display: block; width: 100%; height: 420px; border: 0; }
.chart-empty { height: 260px; display: grid; place-content: center; text-align: center; gap: 6px; padding: 20px; font-size: 14px; }
.chart-empty b { color: var(--text); }
@media (max-width: 640px) { .chart-frame { height: 360px; } }
.chart-box .hint { padding: 8px 12px 10px; margin: 0; }

/* Top holders */
.holders-toggle { cursor: pointer; }
.holders-toggle:hover { border-color: var(--accent); }
.holders-toggle .caret { display: inline-block; margin-left: 4px; transition: transform 0.15s; }
.holders-toggle.open .caret { transform: rotate(180deg); }
.holders { margin-top: 8px; }
.holder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.holder-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 70px 64px 60px; gap: 8px; align-items: center; padding: 8px 6px; font-size: 13px; border-bottom: 1px solid var(--line); }
.holder-list li:last-child { border-bottom: 0; }
.holder-list .h-wallet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holder-list .h-wallet a { color: var(--accent-2); }
.holder-list .chip { padding: 2px 7px; font-size: 11px; }
.holder-list .h-bar { height: 6px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.holder-list .h-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.holder-list .h-pct, .holder-list .h-amt { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .holder-list li { grid-template-columns: 20px minmax(0, 1fr) 56px 54px; }
  .holder-list .h-amt { display: none; }
}

/* Home hero safety chips: a tidy grid of full rows (3 chips, then 2 wider ones; on phones 2 + 2, then
   the last one full width). While the creator earnings cards show on the right, the grid stops short of them. */
.hero-trust { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hero-trust .chip { grid-column: span 2; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-trust .chip:nth-child(n + 4) { grid-column: span 3; }
@media (min-width: 861px) { .hero-trust { max-width: calc(100% - 280px); } }
@media (max-width: 560px) {
  .hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-trust .chip, .hero-trust .chip:nth-child(n + 4) { grid-column: span 1; }
  .hero-trust .chip:last-child { grid-column: 1 / -1; }
}

/* Token social links: one row under the logo, scrolls sideways on narrow screens */
.token-socials { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.token-socials::-webkit-scrollbar { display: none; }
.social-btn { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.social-btn:hover { border-color: var(--accent); }
.social-btn svg { color: var(--accent-2); }
/* Grid columns may shrink below their content (rows like .token-socials scroll inside instead). */
.launch > * { min-width: 0; }
/* Phones: every social shows at once as a round icon button (wrapping if there are many). */
@media (max-width: 560px) {
  .token-socials { flex-wrap: wrap; overflow: visible; gap: 10px; }
  .social-btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .social-btn span { display: none; }
  .social-btn svg { width: 19px; height: 19px; }
}
/* Phones: token page stats as an even 2 × 2 grid, and a shorter empty chart box. */
@media (max-width: 560px) {
  .launch .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .launch .stats .stat b { font-size: 17px; }
  .chart-box { min-height: 0; }
  .chart-empty { height: 170px; }
}

.locked em a { color: var(--accent-2); }

/* Blue graduated check next to token names */
.grad-badge { display: inline-block; vertical-align: -2px; margin-left: 4px; flex: none; }
.title-badge .grad-badge { vertical-align: -3px; margin-left: 8px; }

/* Small social icons in token lists */
.mini-socials { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.mini-social { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: var(--card-2); color: var(--accent-2); cursor: pointer; }
.mini-social:hover { border-color: var(--accent); color: var(--text); }
.pair-pill { color: var(--accent-2); white-space: nowrap; }

/* Launch dialog */
.launch-modal { width: min(460px, 100%); }
.lm-token { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.lm-token img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.lm-token div { display: grid; }
.launch-modal .fees { margin-bottom: 8px; }
.lm-steps { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.lm-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.lm-steps .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.lm-steps li.doing { color: var(--text); }
.lm-steps li.doing .dot { border-color: var(--accent); border-top-color: transparent; animation: lmspin 0.8s linear infinite; }
.lm-steps li.done { color: var(--text); }
.lm-steps li.done .dot { background: var(--up); border-color: var(--up); }
.lm-steps li.fail { color: var(--down); }
.lm-steps li.fail .dot { background: var(--down); border-color: var(--down); }
@keyframes lmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lm-steps li.doing .dot { animation: none; border-top-color: var(--accent); } }
#lmActions { margin-top: 12px; }
#lmActions .btn { display: block; text-align: center; }

/* Real devnet launches list */
.launch-row { color: inherit; }
.launch-row:hover { background: var(--card-2); }
.launch-row .avatar { width: 56px; height: 56px; border-radius: 14px; }
@media (max-width: 640px) { .launch-row .avatar { width: 44px; height: 44px; } }
.lm-steps[hidden] { display: none; }

/* Trades under the pool chart */
.trades-table td, .trades-table th { white-space: nowrap; font-size: 13px; padding: 10px 12px; font-variant-numeric: tabular-nums; }
.trades-table a { color: var(--accent-2); }
.launch .stats { align-items: flex-start; }
.stat > small.muted:last-child { font-size: 11px; margin-top: 2px; }

/* Trade history: fits the card, and scrolls sideways with a visible bar when it can't */
.trades-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a4c transparent; }
.trades-wrap::-webkit-scrollbar { height: 8px; }
.trades-wrap::-webkit-scrollbar-thumb { background: #3a3a4c; border-radius: 99px; }
.trades-wrap::-webkit-scrollbar-track { background: transparent; }
.trades-table { min-width: 100%; }
.trades-table td, .trades-table th { padding: 10px 10px; }
@media (max-width: 560px) { .trades-table td, .trades-table th { padding: 9px 8px; font-size: 12px; } }
.trades-table .num { text-align: right; }
.trades-table tr.t-buy .t-val { color: var(--up); }
.trades-table tr.t-sell .t-val { color: var(--down); }
.trades-table tr.t-buy td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.trades-table tr.t-sell td:first-child { box-shadow: inset 3px 0 0 var(--down); }
@media (max-width: 1100px) { .trades-table .c-price { display: none; } }
.chart-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-tf { width: 240px; }
.chart-reset { padding: 7px 14px; font-size: 13px; }
.chart-help { font-size: 12px; }
@media (hover: none) { .chart-help { display: none; } }
.chart-box { touch-action: pan-y; }
.chart-tf button { padding: 6px; font-size: 13px; }

/* Large screens: the page grows with the window instead of leaving wide empty margins. */
@media (min-width: 1500px) {
  :root { --page-max: 1360px; }
  .home-cols { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (min-width: 1800px) {
  :root { --page-max: 1600px; }
  .home-cols { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Pulse: tabs on smaller screens; from 1280px all three stages side by side, in compact rows (the home page
   has no side column any more, so they fit). */
.pulse-cols { display: none; }
@media (min-width: 1280px) {
  #stageTabs, #feed { display: none; }
  .pulse-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .pulse-col h3 { margin: 0 0 10px; font-size: 15px; }
  .pulse-col .item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pulse-col .item .avatar { width: 44px; height: 44px; }
  .pulse-col .item .right { grid-column: 2; text-align: left; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .pulse-col .item .right .buy { margin-top: 0; margin-left: auto; }
  .pulse-col .item .meta { flex-wrap: wrap; row-gap: 4px; }
  .pulse-col .item .hide-sm { display: none; }
  .pulse-col .mini-socials { margin-left: 6px; }
}
/* 1500–1799px: three Pulse columns need the full width, so the side panels (Trending, Top traders,
   Top creators) move below them as one row. From 1800px both fit side by side. */
@media (min-width: 1500px) and (max-width: 1799px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); }
  .home-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin-top: 24px; }
  .home-side > .hint { grid-column: 1 / -1; }
}

/* SOL price and X logo: bottom of the desktop sidebar, above the slogan; in the footer on smaller screens. */
.sidenav-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sidenav-meta .sol-price { margin: 0; font-size: 14px; }
.price-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.corvx-price { color: inherit; text-decoration: none; }
.corvx-price:hover span { text-decoration: underline; }
.corvx-price .corvx-logo { width: 16px; height: 16px; }
.corvx-price sub { font-size: 0.72em; vertical-align: -0.3em; line-height: 0; }
.corvx-price em { font-style: normal; font-size: 12px; font-weight: 700; }
.footer .corvx-price { margin-top: -4px; }
.sidenav-meta .foot-x { margin-top: 0; width: 34px; height: 34px; }
@media (min-width: 961px) { .footer .footer-mobile { display: none !important; } }

/* ---------- Crow night background ----------
   A fixed layer behind everything: a deep night gradient, a purple moon glow, faint stars, a feather
   texture and five crows gliding across at different heights and speeds. Cards stay solid, so text keeps
   its contrast. Motion stops for visitors who ask their device for reduced motion. */
html { background: var(--bg); }
body { background: transparent; }
.crow-sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(139, 108, 255, 0.22), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(61, 220, 151, 0.07), transparent 60%),
    linear-gradient(180deg, #0d0b18 0%, #0b0b10 45%, #08080c 100%);
}
.crow-sky .moon {
  position: absolute; top: 5vh; right: 7vw; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #f4f0ff 0%, #d9ceff 30%, #a993ff 52%, rgba(139, 108, 255, 0.25) 66%, transparent 71%);
  box-shadow: 0 0 140px 50px rgba(139, 108, 255, 0.2);
  opacity: 0.6;
}
.crow-sky .stars {
  position: absolute; inset: 0; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 27% 8%, #d8d0ff, transparent),
    radial-gradient(1.5px 1.5px at 41% 26%, #fff, transparent),
    radial-gradient(1px 1px at 58% 12%, #fff, transparent),
    radial-gradient(1px 1px at 66% 34%, #cfc6ff, transparent),
    radial-gradient(1.5px 1.5px at 83% 22%, #fff, transparent),
    radial-gradient(1px 1px at 91% 40%, #fff, transparent),
    radial-gradient(1px 1px at 7% 46%, #d8d0ff, transparent),
    radial-gradient(1px 1px at 35% 52%, #fff, transparent),
    radial-gradient(1px 1px at 74% 58%, #fff, transparent);
  background-size: 100% 100%;
  animation: twinkle 7s ease-in-out infinite alternate;
}
.crow-sky .feathers {
  position: absolute; inset: 0; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b9a6ff%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.9%22%3E%3Cpath%20d%3D%22M40%20170%20C70%20120%20110%2080%20160%2050%22%2F%3E%3Cpath%20d%3D%22M60%20140%20C70%20120%2066%20108%2058%20100%20M78%20118%20C90%20102%2088%2088%2080%2080%20M98%2098%20C112%2084%20110%2070%20102%2062%20M118%2080%20C132%2068%20132%2056%20124%2048%20M70%20128%20C88%20132%20100%20126%20108%20116%20M90%20108%20C108%20112%20120%20106%20128%2096%20M110%2090%20C128%2092%20138%2086%20146%2076%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b9a6ff%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.6%22%20transform%3D%22translate(150%20150)%20rotate(140)%20scale(.55)%22%3E%3Cpath%20d%3D%22M40%20170%20C70%20120%20110%2080%20160%2050%22%2F%3E%3Cpath%20d%3D%22M60%20140%20C70%20120%2066%20108%2058%20100%20M78%20118%20C90%20102%2088%2088%2080%2080%20M98%2098%20C112%2084%20110%2070%20102%2062%20M70%20128%20C88%20132%20100%20126%20108%20116%20M90%20108%20C108%20112%20120%20106%20128%2096%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 220px 220px;
}
/* The perched crow: a silhouette against the moon. */
.crow-sky .perch { position: absolute; top: calc(5vh - 18px); right: 0; width: calc(7vw + 330px); max-width: 520px; }
.crow-sky .perch .branch { fill: none; stroke: #0c0a14; stroke-width: 7; stroke-linecap: round; }
.crow-sky .perch .twig { fill: none; stroke: #0c0a14; stroke-width: 3; stroke-linecap: round; }
.crow-sky .perch .bird { fill: #0c0a14; }
.crow-sky .perch .legs { stroke: #0c0a14; stroke-width: 2; }
.crow-sky .eye { fill: #c4b5fd; }
.crow-sky .perch .eye { animation: blink 6s infinite; }
/* Flying crows: dark bodies with a moonlit rim, wings flapping. */
.crow-sky .crow { position: absolute; left: -10vw; overflow: visible; fill: #110e1c; stroke: rgba(196, 181, 253, 0.75); stroke-width: 1px; stroke-linejoin: round; paint-order: stroke; will-change: transform; }
.crow-sky .crow * { vector-effect: non-scaling-stroke; }
.crow-sky .crow .eye { stroke: none; }
.crow-sky .crow .wing { transform-box: fill-box; transform-origin: 60% 100%; animation: flap 0.9s ease-in-out infinite alternate; }
.crow-sky .crow .w-far { fill: #0b0914; animation-delay: -0.08s; }
.crow-sky .c1 { top: 12vh; width: 92px; animation: crow-fly 38s linear infinite, crow-bob 3.4s ease-in-out infinite; }
.crow-sky .c2 { top: 22vh; width: 64px; opacity: 0.8; animation: crow-fly 52s linear infinite -20s, crow-bob 2.8s ease-in-out infinite; }
.crow-sky .c2 .wing { animation-duration: 0.75s; }
.crow-sky .c3 { top: 7vh; width: 44px; opacity: 0.6; animation: crow-fly 66s linear infinite -44s, crow-bob 2.4s ease-in-out infinite; }
.crow-sky .c3 .wing { animation-duration: 0.6s; }
.crow-sky .c4 { top: 58vh; width: 76px; opacity: 0.55; animation: crow-fly 60s linear infinite -32s, crow-bob 3s ease-in-out infinite; }
.crow-sky .c5 { top: 36vh; width: 36px; opacity: 0.5; animation: crow-fly 80s linear infinite -8s, crow-bob 2.2s ease-in-out infinite; }
.crow-sky .c5 .wing { animation-duration: 0.55s; }
@keyframes crow-fly { from { transform: translate(0, 0); } to { transform: translate(125vw, -6vh); } }
@keyframes crow-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.45); } }
@keyframes blink { 0%, 94%, 100% { opacity: 1; } 96% { opacity: 0; } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.65; } }
@media (max-width: 640px) {
  .crow-sky .moon { width: 120px; height: 120px; top: 8vh; right: 4vw; }
  .crow-sky .perch { top: calc(8vh - 14px); width: calc(4vw + 230px); }
  .crow-sky .c3, .crow-sky .c4, .crow-sky .c5, .crow-sky .feathers { display: none; }
  .crow-sky .crow .wing, .crow-sky .stars { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crow-sky .crow, .crow-sky .crow .wing, .crow-sky .stars, .crow-sky .eye { animation: none; }
  .crow-sky .c1 { left: 18vw; } .crow-sky .c2 { left: 60vw; } .crow-sky .c4 { left: 34vw; }
}
/* Let the sky show through the top bar and sidebar, softened with a blur. */
.topbar { background: linear-gradient(rgba(11, 11, 16, 0.92) 60%, rgba(11, 11, 16, 0)); }
@media (min-width: 961px) {
  .sidenav { background: rgba(13, 12, 20, 0.92); }
}
.bottomnav { background: rgba(17, 17, 24, 0.96); }
/* Panel fill before the Moonlit theme (end of file), which replaces it with the frosted-look gradient. */
.hero, .panel, .feed, .devnet-banner, .tcard, .notice, .ucard, .steps li, .faq details { background-color: rgba(21, 21, 29, 0.3); }

/* Live pool stats (price, market cap, volume, liquidity, tax, supply): two even rows of three, or one row of
   six when the page is wide enough. */
.launch .stats.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
@media (min-width: 1500px) {
  .launch .stats.live-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Token page: the creator's account, linking to their public profile. */
.creator-line { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.creator-link { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--text); font-weight: 600; max-width: 100%; }
.creator-link:hover { border-color: var(--accent); }
.creator-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tip dialog: what to tip with (SOL or a token the sender holds). Wraps into rows; scrolls when there are many. */
.tip-assets { display: flex; flex-wrap: wrap; gap: 8px; max-height: 128px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tip-asset { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.tip-asset small { font-size: 12px; }
.tip-asset .avatar { border-radius: 50%; flex: none; background-color: var(--card); }
.tip-asset.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tip-asset:disabled { opacity: 0.45; cursor: not-allowed; }

/* Public profile: Tip button beside the name; tables for holdings, swaps, PnL and tips. */
.profile-head .profile-tip { margin-left: auto; align-self: flex-start; flex: none; }
.token-cell { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
table.profile-table td { white-space: nowrap; }
table.profile-table td small { margin-left: 4px; }
@media (max-width: 640px) {
  .profile-head { flex-wrap: wrap; }
  .profile-head .profile-tip { margin-left: 0; width: 100%; }
}

/* Chat: messages scroll inside the panel; the composer stays at its foot. */
.chat-box { margin-top: 16px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-list { height: min(60vh, 560px); overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-avatar { flex: none; }
.chat-body { min-width: 0; flex: 1; }
.chat-meta { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.chat-meta a { font-weight: 700; color: var(--text); }
.chat-msg.mine .chat-meta a { color: var(--accent-2); }
.chat-text { margin-top: 2px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-call { margin-top: 6px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); max-width: 420px; color: var(--text); }
.chat-call:hover { border-color: var(--accent); }
.chat-call-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-call-main small { font-size: 12px; }
.chat-call-now { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.chat-call-now small { font-size: 12px; font-weight: 700; }
.chat-holder { font-size: 11px; font-weight: 700; color: var(--up); background: rgba(61, 220, 151, 0.12); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.chat-compose { border-top: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 8px; }
.chat-row { display: flex; gap: 8px; }
.chat-row .in { flex: 1; min-width: 0; }
.chat-call-btn { flex: none; white-space: nowrap; }
.chat-picker { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat-pick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.chat-pick:hover { border-color: var(--accent); }
.chat-pick .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-call-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(139, 108, 255, 0.12); font-size: 13px; }
.chat-call-pick .x { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .chat-list { height: 58vh; padding: 12px; }
  .chat-call-btn { padding-left: 12px; padding-right: 12px; }
}
/* Messages stack from the bottom, next to the composer, until the list fills up (then it scrolls). */
.chat-list > :first-child { margin-top: auto; }
.chat-call-main .chat-holder { align-self: flex-start; margin: 2px 0 0; }

/* Chat on every page: floating button + panel (phones: the bottom menu's Chat button, panel full screen). */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 28; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: #0b0b10; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 28px rgba(139, 108, 255, 0.45); }
.chat-fab:hover { filter: brightness(1.08); }
body.on-chat-page .chat-fab, body.chat-dock-open .chat-fab { display: none; }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--down); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.chat-dock { position: fixed; right: 24px; bottom: 24px; z-index: 28; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: #111118; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); overflow: hidden; }
.chat-dock-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.chat-dock-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-dock-head small { font-size: 12px; }
.chat-dock-head .x { width: 34px; height: 34px; }
.chat-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-dock .chat-box { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.chat-dock .chat-list { height: auto; flex: 1; min-height: 0; }
.chat-dock .chat-call { max-width: 100%; }
.chat-dock .chat-row .chat-call-btn { padding-left: 12px; padding-right: 12px; }
@media (max-width: 960px) {
  .chat-fab { right: 16px; bottom: 80px; width: 52px; height: 52px; }
  .chat-dock { left: 0; right: 0; top: 60px; bottom: 65px; width: auto; height: auto; border-radius: 0; border-width: 1px 0; }
}

/* Settings: what the public profile shows (on/off switches); private parts on a profile. */
.privacy-list { display: grid; gap: 8px; }
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); cursor: pointer; }
.privacy-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.privacy-row small { font-size: 12px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background 0.15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch:checked { background: var(--up); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: 0.5; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.private-note { padding: 18px; border-radius: 16px; border: 1px dashed var(--line); color: var(--muted); }

/* Connect dialog: WalletConnect (QR code) under the browser wallets. */
.wc-provider { margin-top: 8px; }
.wc-provider > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.wc-provider small { font-size: 12px; font-weight: 500; }
.wc-mark { background: #3b99fc; color: #fff; display: grid; place-items: center; }
.provider .wc-tag { color: #3b99fc; background: rgba(59, 153, 252, 0.12); border-color: rgba(59, 153, 252, 0.35); }

/* Connect dialog: a detected wallet's own icon. */
img.pmark { object-fit: cover; background: var(--card); padding: 0; }

/* Create a new wallet: the private key stays covered until clicked. */
.cw-secret { position: relative; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); cursor: pointer; overflow-wrap: anywhere; font-size: 13px; }
.cw-secret code { filter: blur(6px); user-select: none; }
.cw-secret.shown code { filter: none; user-select: all; }
.cw-cover { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--text); }
.cw-secret.shown .cw-cover { display: none; }
.cw-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cw-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 13px; line-height: 1.4; cursor: pointer; }
.cw-check input { margin-top: 2px; accent-color: var(--accent); }
#cwAddr { overflow-wrap: anywhere; font-size: 13px; }
.local-mark { background: var(--accent); color: #0b0b10; }
.provider-name { display: flex; flex-direction: column; gap: 2px; }
.provider-name small { font-size: 12px; font-weight: 500; }

/* Connect dialog: sign in with X, TikTok, Google or GitHub (through Privy). */
.social-signin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.social-btn-login { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.social-btn-login:hover, .social-btn-login:focus-visible { border-color: var(--accent); outline: none; }
@media (max-width: 380px) { .social-signin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Holdings tables: a small Trade button at the end of each row. */
.trade-cell { text-align: right; width: 1%; white-space: nowrap; }
.btn.trade-link { padding: 6px 14px; font-size: 13px; border-radius: 10px; }

/* Search results under the top bar's search box. */
.search { position: relative; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 41; max-height: min(420px, 70vh); overflow-y: auto; background: #111118; border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.search-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--text); }
.search-row.on, .search-row:hover { background: var(--card-2); }
.search-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.search-tag { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; color: var(--muted); background: var(--card-2); }
.search-tag.live { color: var(--up); background: rgba(61, 220, 151, 0.12); }
.search-tag.wallet { color: var(--accent-2); background: rgba(139, 108, 255, 0.14); }
.search-empty { margin: 0; padding: 12px; font-size: 13px; }
/* Phones: the search box is narrow, so its results span the screen under the top bar. */
@media (max-width: 640px) {
  .search-results { position: fixed; top: 64px; left: 12px; right: 12px; }
}
/* Long numbers (a tiny token price) wrap inside their own column instead of running into the next one. */
.live-stats .stat { min-width: 0; }
.live-stats .stat b, .live-stats .stat small { overflow-wrap: anywhere; }

/* The mascot (mascot.js) in empty, error and success states. */
.mascot { display: block; flex: none; }
.mascot-note { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px; }
.mascot-note p { margin: 0; max-width: 340px; }
.login-head { display: flex; align-items: center; gap: 10px; }
.login-head h2 { margin: 0; }
.prompt-mascot { display: grid; place-items: center; margin-bottom: 4px; }
.search-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; font-size: 13px; }
.error-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.success-mascot { display: flex; justify-content: center; margin: 4px 0 6px; }
.about-mascot { float: right; margin: -8px -4px 0 12px; }
@media (max-width: 640px) { .about-mascot .mascot { width: 84px; height: 84px; } }
/* Corvi moves: blinks, a swaying tuft, and a motion per pose. Points to turn around are in the SVG's own
   units (its view box starts at -8, -8, so a point (x, y) of the crow is (x + 8, y + 8) here). All of it stops
   for visitors who ask their device for less motion. */
.mascot .m-body, .mascot .m-eyes, .mascot .m-tuft, .mascot .m-wing, .mascot .m-bubble, .mascot .m-z, .mascot .m-tear, .mascot .m-conf, .mascot .m-lines { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .mascot .m-eyes:not(.m-still) { transform-origin: 40px 41px; animation: m-blink 4.6s infinite var(--d, 0s); }
  .mascot .m-tuft { transform-origin: 43px 25px; animation: m-tuft 2.8s ease-in-out infinite var(--d, 0s); }
  .mascot .m-body { transform-origin: 40px 64px; }
  .mascot-happy .m-body { animation: m-bob 2.6s ease-in-out infinite var(--d, 0s); }
  .mascot-wave .m-body { animation: m-bob 2.6s ease-in-out infinite var(--d, 0s); }
  .mascot-wave .m-wing-r { transform-origin: 56px 40px; animation: m-wave 0.55s ease-in-out infinite alternate; }
  .mascot-wave .m-lines { animation: m-fade 0.55s ease-in-out infinite alternate; }
  .mascot-think .m-body { animation: m-tilt 3.2s ease-in-out infinite var(--d, 0s); }
  .mascot-think .m-bubble { transform-origin: 68px 10px; animation: m-pulse 1.6s ease-in-out infinite; }
  .mascot-sleep .m-body { animation: m-breathe 3.4s ease-in-out infinite; }
  .mascot-sleep .m-z { animation: m-float 3s ease-in infinite; }
  .mascot-sleep .m-z2 { animation-delay: -1.5s; }
  .mascot-sad .m-body { animation: m-sway 4s ease-in-out infinite; }
  .mascot-sad .m-tear { animation: m-drip 2.4s ease-in infinite; }
  .mascot-party .m-body { animation: m-hop 0.9s cubic-bezier(.3,.7,.4,1) infinite; }
  .mascot-party .m-wing-l { transform-origin: 24px 40px; animation: m-flap-l 0.45s ease-in-out infinite alternate; }
  .mascot-party .m-wing-r { transform-origin: 56px 40px; animation: m-flap-r 0.45s ease-in-out infinite alternate; }
  .mascot-party .m-conf { animation: m-twinkle 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.2s); }
  /* Point at Corvi and it wiggles. */
  .mascot:hover .m-body { animation: m-wiggle 0.6s ease-in-out; }
}
@keyframes m-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
@keyframes m-tuft { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes m-wave { from { transform: rotate(-22deg); } to { transform: rotate(16deg); } }
@keyframes m-fade { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes m-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(4deg); } }
@keyframes m-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035, 0.975); } }
@keyframes m-float { 0% { transform: translate(0, 2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(4px, -9px); opacity: 0; } }
@keyframes m-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes m-drip { 0%, 15% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes m-hop { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 45% { transform: translateY(-7px) scale(0.97, 1.03); } 70% { transform: translateY(0) scale(1.06, 0.94); } }
@keyframes m-flap-l { from { transform: rotate(10deg); } to { transform: rotate(-16deg); } }
@keyframes m-flap-r { from { transform: rotate(-10deg); } to { transform: rotate(16deg); } }
@keyframes m-twinkle { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.25; transform: translateY(2px); } }
@keyframes m-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }

/* About: Meet Corvi. */
.meet-corvi { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.meet-corvi-poses { display: flex; gap: 4px; flex: none; }
@media (max-width: 640px) {
  .meet-corvi { flex-direction: column; text-align: center; }
  .meet-corvi-poses .mascot { width: 64px; height: 64px; }
}

/* Nothing moves while the tab is in the background (app.js adds .paused to <html>). */
.paused .crow-sky *, .paused .mascot * { animation-play-state: paused !important; }

/* ===== Moonlit theme =====
   Deep indigo night, one moon glow, soft frosted-looking cards (layered gradients, no real blur, so it stays
   fast), lilac accent, Space Grotesk for numbers and Corvi in the hero. */
:root {
  --bg: #0a0912; --card: #1a1630; --card-2: #241e40; --line: rgba(196, 179, 255, 0.13);
  --text: #f3f1fb; --muted: #9a94b6; --accent: #9b7bff; --accent-2: #c4b3ff; --up: #3ddc97; --down: #ff6b8a;
  --radius: 20px;
  --glass: linear-gradient(180deg, rgba(38, 32, 68, 0.74), rgba(20, 17, 36, 0.74));
  --accent-grad: linear-gradient(180deg, #a98cff, #7d5cf0);
}
.num, .big, .stat b, .right b, .tcard b { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.big { font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 10px 0 8px; }
.crow-sky {
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(155, 123, 255, 0.26), transparent 62%),
    radial-gradient(800px 560px at -10% 105%, rgba(61, 220, 151, 0.06), transparent 60%),
    linear-gradient(180deg, #120f22 0%, #0a0912 50%, #08070e 100%);
}
.topbar { background: linear-gradient(rgba(10, 9, 18, 0.95) 65%, rgba(10, 9, 18, 0)); }
@media (min-width: 961px) { .sidenav { background: rgba(14, 12, 26, 0.94); border-right: 1px solid var(--line); } }
.bottomnav { background: rgba(14, 12, 26, 0.97); border-top: 1px solid var(--line); }
.logo img { border-radius: 0; }

/* Cards: frosted look from two gradients and a soft top highlight. */
.hero, .panel, .feed, .devnet-banner, .tcard, .notice, .ucard, .steps li, .faq details {
  background: var(--glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panel, .hero { border-radius: 22px; }
.feed .feed, .panel .feed { background: transparent; box-shadow: none; }
a.tcard, a.devnet-banner, .feed .item { transition: border-color 0.15s, background-color 0.15s, transform 0.15s; }
.hero::after {
  right: -70px; top: -90px; width: 330px; height: 330px; opacity: 1;
  background: radial-gradient(circle at 40% 40%, rgba(243, 239, 255, 0.42), rgba(169, 147, 255, 0.16) 45%, transparent 70%);
}

/* Buttons, tabs and switches: lilac instead of white. */
.btn { border-radius: 12px; }
.btn-light, .btn-accent { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 20px rgba(125, 92, 240, 0.32); }
.btn-light:hover, .btn-accent:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.tab { background: rgba(255, 255, 255, 0.03); }
.tab.on { background: rgba(155, 123, 255, 0.18); color: var(--text); border-color: rgba(196, 179, 255, 0.45); }
.seg { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.seg button.on { background: var(--accent-grad); color: #fff; }
.in { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.in:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.search { background: rgba(255, 255, 255, 0.04); border-radius: 12px; }
.chip { background: rgba(255, 255, 255, 0.04); }
.chip.good { background: rgba(61, 220, 151, 0.1); border-color: rgba(61, 220, 151, 0.28); }
.chip.accent { background: rgba(155, 123, 255, 0.12); border-color: rgba(196, 179, 255, 0.3); }
.eyebrow { color: var(--accent-2); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.eyebrow .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bar i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
h2 { font-size: 20px; }
.h2-note { font-size: 13px; font-weight: 500; }
@media (min-width: 961px) { .sidenav-links a.active { background: rgba(155, 123, 255, 0.14); } }

/* Home hero: Corvi waves from the right with a speech bubble. */
.home-hero { display: flow-root; padding: 32px; }
.hero-corvi { float: right; position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; margin: -6px 0 0 20px; }
/* No drop-shadow on Corvi: a filter on an animated SVG is redrawn every frame. */
.hero-bubble { max-width: 210px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); font-size: 13px; text-align: center; }
.home-hero .stats .btn { margin-left: 0; }
@media (max-width: 760px) {
  .home-hero { padding: 22px 18px; }
  .hero-corvi { margin: -8px -6px 0 8px; }
  .hero-corvi .mascot { width: 84px; height: 84px; }
  .hero-bubble { display: none; }
}

/* Trending: a grid of cards with a bonding bar (shown at every width now). */
.home-trending { display: block !important; }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tgrid .tcard { width: auto; display: grid; gap: 11px; align-items: stretch; padding: 14px; border-radius: 18px; }
.tgrid .tcard:hover { transform: translateY(-2px); border-color: rgba(196, 179, 255, 0.38); }
.tcard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tcard-head > div { min-width: 0; }
.tcard-head .avatar { border-radius: 14px; }
.tcard-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.tbar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tbar.done i { background: linear-gradient(90deg, #2fb67c, var(--up)); }
@media (min-width: 961px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 380px) { .tgrid .tcard { padding: 12px; } .tcard-head .avatar { width: 40px !important; height: 40px !important; } }
/* Hero safety chips: a wrapping row next to Corvi (the phone layout keeps its two-column grid). */
@media (min-width: 561px) {
  .home-hero .hero-trust { display: flex; flex-wrap: wrap; max-width: none; }
  .home-hero .hero-trust .chip { flex: none; }
}
.home-hero .eyebrow { flex-wrap: wrap; row-gap: 2px; }
.bottomnav .plus, .bottomnav a.plus { background: var(--accent-grad); color: #fff; box-shadow: 0 4px 14px rgba(125, 92, 240, 0.4); }
.pct-row button.on { background: rgba(155, 123, 255, 0.18); color: var(--text); border-color: rgba(196, 179, 255, 0.45); }
/* Phones: one line per row in the trending cards (no "MC" label, no volume). */
.tcard-row { white-space: nowrap; }
@media (max-width: 640px) {
  .tgrid .tcard-row { font-size: 12.5px; }
  .tgrid .tcard-row > span:first-child .muted, .tgrid .tcard-row.muted > span:last-child { display: none; }
  .tgrid .tcard-head { gap: 10px; }
  .tgrid .tcard-head .avatar { width: 42px !important; height: 42px !important; font-size: 17px; }
}

/* Desktop: the 3-line button hides the sidebar (html.nav-collapsed) and the page uses the freed width. */
.navtoggle { display: none; }
@media (min-width: 961px) {
  .navtoggle {
    display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted);
  }
  .navtoggle:hover { color: var(--text); border-color: rgba(196, 179, 255, 0.4); }
  body, .sidenav { transition: padding-left 0.2s ease, transform 0.2s ease, visibility 0.2s; }
  .nav-collapsed body { padding-left: 0; }
  .nav-collapsed .sidenav { transform: translateX(-100%); visibility: hidden; }
  /* With the sidebar away, the logo moves into the top bar. */
  .nav-collapsed .topbar .logo.hide-desk { display: flex !important; }
  .nav-collapsed .account-menu { right: max(16px, calc((100vw - var(--page-max)) / 2 + 16px)); }
  :root.nav-collapsed { --page-max: 1360px; }
}
@media (min-width: 1500px) { :root.nav-collapsed { --page-max: 1600px; } }
@media (min-width: 1800px) { :root.nav-collapsed { --page-max: 1840px; } }
@media (prefers-reduced-motion: reduce) { body, .sidenav { transition: none; } }

/* Sign-in dialog: wallets as a tile grid, four across like the social buttons; WalletConnect takes two cells. */
.wallet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; }
.wtile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--text); font: inherit; font-size: 12.5px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.wtile:hover, .wtile:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
.wtile .pmark { width: 36px; height: 36px; border-radius: 10px; }
.wtile b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtile small { font-size: 11px; font-weight: 600; line-height: 1; }
.wtile.not-installed b { color: var(--muted); }
.wtile.not-installed .pmark { opacity: 0.85; }
.wtile-wide { grid-column: span 2; flex-direction: row; gap: 10px; padding: 10px 12px; text-align: left; }
.wtile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wtile-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .wallet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wtile-wide { grid-column: 1 / -1; }
}

/* Home section headings with a link on the right ("See all →", "Leaderboard →"). */
.h2-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.h2-link { margin-left: auto; color: var(--accent-2); font-size: 13px; font-weight: 600; }
.h2-link:hover { color: var(--text); }
@media (max-width: 640px) { .h2-row .h2-note { display: none; } }
/* New on devnet: three compact cards side by side from 1280px, lined up with the Pulse columns below;
   a three-row list on smaller screens. */
@media (min-width: 1280px) {
  #homeLaunchList .feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  #homeLaunchList .item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  #homeLaunchList .item:hover { border-color: rgba(196, 179, 255, 0.38); }
  #homeLaunchList .item .avatar { width: 44px; height: 44px; }
  #homeLaunchList .item .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #homeLaunchList .item .meta .mono, #homeLaunchList .item .meta > span.muted:last-child:not(.mono) { display: none; }
}

/* Chat is the floating bubble only (no menu link). "See all" next to New on devnet is left to the sidebar's
   "Live on devnet" while the sidebar shows. */
.chat-fab { background: var(--accent-grad); color: #fff; }
@media (min-width: 961px) {
  :root:not(.nav-collapsed) .h2-link[href="#/devnet"] { display: none; }
}
/* Phones: on token pages the bubble moves up above the Buy / Sell bar. */
@media (max-width: 960px) { body.has-tradebar .chat-fab { bottom: 148px; } }
/* The open page's menu item stands out: a lilac glow pill with a bar on its left in the sidebar, a lit pill
   with a dot under it in the phone bottom bar. aria-current is set alongside for screen readers. */
.sidenav-links a, .bottomnav a { transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
@media (min-width: 961px) {
  .sidenav-links a { position: relative; }
  .sidenav-links a.active {
    color: #fff; font-weight: 700;
    background: linear-gradient(90deg, rgba(155, 123, 255, 0.32), rgba(155, 123, 255, 0.1));
    box-shadow: inset 0 0 0 1px rgba(196, 179, 255, 0.35), 0 6px 18px rgba(125, 92, 240, 0.22);
  }
  .sidenav-links a.active::before {
    content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--accent-2); box-shadow: 0 0 10px rgba(196, 179, 255, 0.8);
  }
  .sidenav-links a.active svg { color: var(--accent-2); }
  .sidenav-launch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(196, 179, 255, 0.7), 0 6px 20px rgba(125, 92, 240, 0.4); }
}
.bottomnav a:not(.plus) { position: relative; }
.bottomnav a.active:not(.plus) { color: var(--accent-2); background: rgba(155, 123, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(196, 179, 255, 0.3); }
.bottomnav a.active:not(.plus)::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 8px rgba(196, 179, 255, 0.9);
}
.bottomnav a.plus.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(196, 179, 255, 0.7); }

/* Search: results grouped (On Corvexa, Solana tokens · Jupiter, Meteora pools), with market cap or TVL. */
.search-results { max-height: min(560px, 75vh); }
.search-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); }
.search-group:first-child { padding-top: 4px; }
.search-row b { display: inline-flex; align-items: center; gap: 4px; }
.search-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; font-weight: 600; }
.search-side small { font-size: 11px; }
.search-pool-mark { display: grid; place-items: center; font-size: 13px; color: #fff; background: linear-gradient(135deg, #5b3fd1, #2a1f55); }
.search-tag.solana { color: #c9b8ff; background: rgba(155, 123, 255, 0.14); }
.search-tag.dlmm, .search-tag.dammv, .search-tag.dbc { color: #ffcf7a; background: rgba(255, 200, 97, 0.12); }
.search-note { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 12.5px; }
.search-note .lmspin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: lmspin 0.8s linear infinite; }
.table-wrap { overflow-x: auto; }
@media (max-width: 640px) { .search-side { display: none; } }

/* Solana token page (#/sol/<mint>). */
.sol-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sol-head .avatar { display: grid; place-items: center; font-size: 28px; }
.sol-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.sol-actions .btn { text-decoration: none; }
.sol-pools { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sol-pools th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 0 8px 8px; }
.sol-pools td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.sol-pools td small { display: block; }
.sol-pools a { color: var(--accent-2); white-space: nowrap; }
.sol-hero .stats { align-items: flex-start; }

/* Corvi's other expressions (mascot.js): each gets its own small motion. Points to turn around are in the
   SVG's own units, offset by 8 like the rules above; .m-spin parts turn around their own centre. */
.mascot .m-tip, .mascot .m-spark, .mascot .m-heart, .mascot .m-coin, .mascot .m-steam, .mascot .m-excl, .mascot .m-rocket, .mascot .m-stream, .mascot .m-sweat, .mascot .m-glass, .mascot .m-orbit, .mascot .m-torch, .mascot .m-crown, .mascot .m-book, .mascot .m-chatbubble, .mascot .m-shield, .mascot .m-ha, .mascot .m-wallet, .mascot .m-blush, .mascot .m-glint, .mascot .m-shrug-q { transform-box: view-box; }
.mascot .m-spin { transform-box: fill-box; transform-origin: center; }
.mascot .m-flame { transform-box: fill-box; transform-origin: 50% 0%; }
@media (prefers-reduced-motion: no-preference) {
  .mascot .m-spark { animation: m-sparkle 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.6s); }
  /* love: hearts in the eyes beat, little hearts float up */
  .mascot-love .m-body { animation: m-bob 2.4s ease-in-out infinite var(--d, 0s); }
  .mascot-love .m-heart-eyes .m-spin { animation: m-beat 0.9s ease-in-out infinite; }
  .mascot-love .m-heart { animation: m-rise 2.6s ease-in infinite; animation-delay: calc(var(--i) * -0.85s); }
  /* wink: a little tilt */
  .mascot-wink .m-body { animation: m-tilt 2.8s ease-in-out infinite var(--d, 0s); }
  /* shock: a jolt, the "!" pops */
  .mascot-shock .m-body { animation: m-jolt 1.6s ease-in-out infinite; }
  .mascot-shock .m-excl { transform-origin: 65px 14px; animation: m-pulse 0.8s ease-in-out infinite; }
  /* angry: trembling, steam puffs */
  .mascot-angry .m-body { animation: m-tremble 0.35s linear infinite; }
  .mascot-angry .m-steam { animation: m-puff 1.4s ease-out infinite; animation-delay: calc(var(--i) * -0.7s); }
  /* cool: slow nod, a glint across the glasses */
  .mascot-cool .m-body { animation: m-nod 1.6s ease-in-out infinite var(--d, 0s); }
  .mascot-cool .m-glint { animation: m-glint 3s ease-in-out infinite; }
  /* money: coins spin and float */
  .mascot-money .m-body { animation: m-bob 1.8s ease-in-out infinite var(--d, 0s); }
  .mascot-money .m-coin { animation: m-coin 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.8s); }
  .mascot-money .m-dollar-eyes { transform-origin: 40px 41px; animation: m-pulse 1.2s ease-in-out infinite; }
  /* rocket: the rocket hovers, its flame flickers */
  .mascot-rocket .m-body { animation: m-bob 2.2s ease-in-out infinite var(--d, 0s); }
  .mascot-rocket .m-rocket { animation: m-hover 1.1s ease-in-out infinite alternate; }
  .mascot .m-flame { animation: m-flicker 0.18s ease-in-out infinite alternate; }
  /* cry: tears run, a little sob */
  .mascot-cry .m-body { animation: m-sob 1.2s ease-in-out infinite; }
  .mascot-cry .m-stream { animation: m-fade 0.8s ease-in-out infinite alternate; }
  .mascot-cry .m-tear { animation: m-drip 1.4s ease-in infinite; }
  /* shy: a sway, cheeks glow */
  .mascot-shy .m-body { animation: m-sway 2.6s ease-in-out infinite; }
  .mascot-shy .m-blush { animation: m-fade 1.3s ease-in-out infinite alternate; }
  /* sweat and oops: nervous shuffle, a drop slides down */
  .mascot-sweat .m-body, .mascot-oops .m-body { animation: m-shuffle 1.4s ease-in-out infinite; }
  .mascot .m-sweat { animation: m-slide 1.8s ease-in infinite; }
  /* detective: the magnifying glass sweeps */
  .mascot-detective .m-body { animation: m-bob 3s ease-in-out infinite var(--d, 0s); }
  .mascot-detective .m-glass { transform-origin: 66px 48px; animation: m-sweep 2.4s ease-in-out infinite; }
  /* dizzy: stars orbit, spiral eyes turn */
  .mascot-dizzy .m-body { animation: m-sway 1.6s ease-in-out infinite; }
  .mascot-dizzy .m-orbit { transform-origin: 40px 16px; animation: m-orbit 2.2s linear infinite; }
  .mascot-dizzy .m-eyes .m-spin { animation: m-turn 1.4s linear infinite; }
  /* fire: the torch flickers and leans */
  .mascot-fire .m-body { animation: m-bob 2s ease-in-out infinite var(--d, 0s); }
  .mascot-fire .m-torch { transform-origin: 62px 46px; animation: m-lean 1.1s ease-in-out infinite alternate; }
  /* crown: a proud bob, the crown tips */
  .mascot-crown .m-body { animation: m-bob 2.4s ease-in-out infinite var(--d, 0s); }
  .mascot-crown .m-crown { transform-origin: 40px 25px; animation: m-tilt 2.4s ease-in-out infinite; }
  /* read: breathing over the book */
  .mascot-read .m-body { animation: m-breathe 3.4s ease-in-out infinite; }
  .mascot-read .m-book { animation: m-nod 3.4s ease-in-out infinite; }
  /* point: the wing pokes, lines flash */
  .mascot-point .m-body { animation: m-bob 2.4s ease-in-out infinite var(--d, 0s); }
  .mascot-point .m-wing-r { animation: m-poke 0.9s ease-in-out infinite; }
  .mascot-point .m-lines { animation: m-fade 0.9s ease-in-out infinite alternate; }
  /* chat: waving, the bubble pops */
  .mascot-chat .m-body { animation: m-bob 2s ease-in-out infinite var(--d, 0s); }
  .mascot-chat .m-wing-r { transform-origin: 56px 40px; animation: m-wave 0.6s ease-in-out infinite alternate; }
  .mascot-chat .m-chatbubble { transform-origin: 55px 18px; animation: m-pop 1.8s ease-in-out infinite; }
  /* shrug: wings lift and drop */
  .mascot-shrug .m-body { animation: m-shrug 2.2s ease-in-out infinite; }
  .mascot-shrug .m-shrug-q { animation: m-fade 1.1s ease-in-out infinite alternate; }
  /* guard: steady, the shield gleams */
  .mascot-guard .m-body { animation: m-bob 2.8s ease-in-out infinite var(--d, 0s); }
  .mascot-guard .m-shield { transform-origin: 55px 52px; animation: m-pulse 1.8s ease-in-out infinite; }
  /* star: hopping, star eyes twirl */
  .mascot-star .m-body { animation: m-hop 1.1s cubic-bezier(.3,.7,.4,1) infinite; }
  .mascot-star .m-star-eye { animation: m-twirl 2.4s ease-in-out infinite; }
  /* laugh: quick bounces, "ha"s float off */
  .mascot-laugh .m-body { animation: m-giggle 0.5s ease-in-out infinite; }
  .mascot-laugh .m-ha { animation: m-rise 1.4s ease-out infinite; }
  .mascot-laugh .m-ha2 { animation-delay: -0.7s; }
  /* peek: pops up from behind the ledge and back */
  .mascot-peek .m-body { animation: m-peek 3.2s ease-in-out infinite var(--d, 0s); }
  /* wallet: a bob, the wallet sways */
  .mascot-wallet .m-body { animation: m-bob 2.4s ease-in-out infinite var(--d, 0s); }
  .mascot-wallet .m-wallet { transform-origin: 56px 54px; animation: m-tilt 1.6s ease-in-out infinite; }
}
@keyframes m-sparkle { 0%, 100% { transform: scale(0.4); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes m-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(0.96); } }
@keyframes m-rise { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes m-jolt { 0%, 70%, 100% { transform: translateY(0); } 76% { transform: translateY(-4px) scale(1.03); } 84% { transform: translateY(0) scale(0.98); } }
@keyframes m-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.7px); } 75% { transform: translateX(0.7px); } }
@keyframes m-puff { 0% { transform: translateY(2px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-6px) scale(1.2); opacity: 0; } }
@keyframes m-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6px); } }
@keyframes m-glint { 0%, 60%, 100% { opacity: 0.2; } 75% { opacity: 1; } }
@keyframes m-coin { 0%, 100% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-2px) scaleX(0.2); } 50% { transform: translateY(-3px) scaleX(1); } 75% { transform: translateY(-2px) scaleX(0.2); } }
@keyframes m-hover { from { transform: translate(0, 0); } to { transform: translate(1.2px, -2.4px); } }
@keyframes m-flicker { from { transform: scaleY(0.8); } to { transform: scaleY(1.15); } }
@keyframes m-sob { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(1.2px); } 40% { transform: translateY(0); } 60% { transform: translateY(1.2px); } }
@keyframes m-shuffle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }
@keyframes m-slide { 0% { transform: translateY(-1px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@keyframes m-sweep { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes m-orbit { to { transform: rotate(360deg); } }
@keyframes m-turn { to { transform: rotate(-360deg); } }
@keyframes m-lean { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes m-poke { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.4px); } }
@keyframes m-pop { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(0.96); } 36% { transform: scale(1); } }
@keyframes m-shrug { 0%, 100% { transform: translateY(0); } 40%, 55% { transform: translateY(-2.4px); } }
@keyframes m-twirl { 0%, 70%, 100% { transform: rotate(0) scale(1); } 85% { transform: rotate(72deg) scale(1.15); } }
@keyframes m-giggle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(2deg); } }
@keyframes m-peek { 0%, 100% { transform: translateY(6px); } 30%, 70% { transform: translateY(-2px); } }

/* Corvi everywhere: toasts carry a small Corvi, page tops have one in the corner, loading shows one searching. */
.toast { display: flex; align-items: center; gap: 8px; width: max-content; padding: 6px 18px 6px 8px; border-radius: 999px; text-align: left; }
.toast .mascot { width: 34px; height: 34px; flex: none; }
.loading-note { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.launch-panel { position: relative; }
.launch-panel > .hero-corvi { float: right; margin: -10px -8px 0 12px; }
@media (max-width: 760px) { .launch-panel > .hero-corvi .mascot, .home-hero > .hero-corvi .mascot { width: 76px; height: 76px; } }
.search-note .mascot { width: 30px; height: 30px; flex: none; }
/* About: the gallery of faces. */
.corvi-faces { margin-top: 18px; }
.corvi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.corvi-grid figure { margin: 0; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 1px solid transparent; cursor: default; }
.corvi-grid figure:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.corvi-grid figcaption { font-size: 12px; color: var(--muted); }
.msg-corvi { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.msg-corvi .mascot { width: 36px; height: 36px; }

/* Chat stickers: Corvi with a trader's phrase on a label. In the list they hold still unless they just
   arrived or are pointed at; the picker only animates the one under the pointer. */
.sticker { display: inline-flex; flex-direction: column; align-items: center; margin-top: 4px; transform: rotate(-2deg); }
.chat-msg:nth-child(even) .sticker { transform: rotate(2deg); }
.sticker-cap {
  margin-top: -10px; padding: 3px 10px; border-radius: 999px; background: #fff; color: #15102a;
  font-family: "Space Grotesk", Inter, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
  border: 2px solid var(--accent-2); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); white-space: nowrap;
}
.chat-msg:not(.fresh):not(:hover) .sticker .mascot * { animation-play-state: paused; }
.chat-stickers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto;
  padding: 4px; margin-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.sticker-pick {
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 14px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.sticker-pick span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-pick:hover, .sticker-pick:focus-visible { border-color: var(--accent); background: rgba(155, 123, 255, 0.12); outline: none; }
.sticker-pick:not(:hover):not(:focus-visible) .mascot * { animation-play-state: paused; }
.chat-sticker-btn { flex: none; display: grid; place-items: center; padding: 0 10px; }
.chat-sticker-btn .mascot { width: 26px; height: 26px; }
.chat-sticker-btn[aria-expanded="true"] { border-color: var(--accent); background: rgba(155, 123, 255, 0.16); }
@media (max-width: 480px) { .chat-call-btn .call-label { display: none; } .chat-row .chat-call-btn, .chat-row .chat-sticker-btn { padding-left: 10px; padding-right: 10px; } }

/* Token logos (tokenLogo / fillLogos): the letter shows until the logo loads. */
.tlogo { display: inline-grid; place-items: center; flex: none; vertical-align: middle; background: var(--card-2) center / cover no-repeat; color: var(--muted); font-weight: 800; line-height: 1; overflow: hidden; }
.tlogo.has-logo { background-color: transparent; }
.pair-pill { display: inline-flex; align-items: center; gap: 4px; }
.pair-logos { position: relative; display: inline-block; flex: none; }
.pair-logos .tlogo { position: absolute; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 2px #111118; }
.pair-logos .tlogo:first-child { left: 0; z-index: 1; }
.pair-logos .tlogo:last-child { right: 0; }
.pool-cell { display: flex; align-items: center; gap: 10px; }
.stock-row .tlogo { margin-right: 2px; }
.sol-trade-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mainnet-chip { color: #ffcf7a; background: rgba(255, 200, 97, 0.1); border-color: rgba(255, 200, 97, 0.35); }
.st-label { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.st-amount { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 6px 4px 4px; background: rgba(255, 255, 255, 0.04); }
.st-amount:focus-within { border-color: var(--accent); }
.st-amount .in { border: 0; background: transparent; font-size: 22px; font-weight: 700; padding: 10px; flex: 1; min-width: 0; }
.st-unit { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border-radius: 10px; background: var(--card-2); font-weight: 700; font-size: 14px; }
.st-quote { margin-top: 12px; min-height: 22px; font-size: 13px; }
.st-get { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.st-get b { font-size: 18px; }
.st-fees td { padding: 5px 0; font-size: 13px; }
.warn-text { color: #ffcf7a; }
.st-sell { background: var(--down); color: #fff; }

/* Trade boxes: "Pay with" / "Receive" token button and the token picker. */
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pay-pick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.pay-pick:hover, .pay-pick:focus-visible { border-color: var(--accent); outline: none; }
.token-picker { width: min(460px, 100%); }
.tp-list { display: grid; gap: 4px; margin-top: 10px; max-height: min(420px, 60vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tp-row:hover:not(:disabled), .tp-row:focus-visible { background: rgba(155, 123, 255, 0.12); border-color: var(--line); outline: none; }
.tp-row:disabled { opacity: 0.45; cursor: not-allowed; }
.tp-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tp-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-side { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }
.tp-side small { font-size: 11.5px; }

/* Token pages as a trading terminal (devnet pools and Solana tokens): a header bar with the token and its
   numbers, the chart large on the left with trades or pools under it, and on the right the 24h buys and
   sells, the trade box, token info and fees. Phones: header, chart, trade box, then the rest. */
.term { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "bar bar" "chart side" "below side"; gap: 12px; align-items: start; max-width: 1760px; margin: 8px auto 0; padding: 0 12px; }
.term > * { min-width: 0; }
.term .panel { border-radius: 16px; padding: 16px; }
.term-bar { grid-area: bar; display: flex; align-items: center; gap: 20px; padding: 12px 16px !important; overflow-x: auto; scrollbar-width: none; }
.term-bar::-webkit-scrollbar { display: none; }
.term-id { display: flex; align-items: center; gap: 12px; flex: none; }
.term-id .avatar { display: grid; place-items: center; font-weight: 800; }
.term-title { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.term-title b { font-size: 18px; display: inline-flex; align-items: center; gap: 4px; }
.term-sub { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-top: 3px; white-space: nowrap; }
.term-sub a { color: var(--accent-2); }
.term-sub .creator-link { display: inline-flex; align-items: center; gap: 5px; }
.term-stats { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.term-stats .stat small { font-size: 11px; }
.term-stats .stat b { font-size: 14px; white-space: nowrap; }
.term-stats .stat small.muted { display: none; }
.term-mc small { display: block; font-size: 11px; color: var(--muted); }
.term-mc b { font-size: 24px; white-space: nowrap; }
.term-curve { display: block; width: 70px; height: 4px; margin-top: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.term-curve i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.term-corvi { flex: none; margin-left: auto; }
.term-chart { grid-area: chart; padding: 10px !important; }
.term-chart .chart-frame { height: var(--term-chart-h, 520px); }
.term-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; }
.term-below { grid-area: below; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.term-below.one { grid-template-columns: minmax(0, 1fr); }
.term-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 14px !important; }
.term-flow small { display: block; font-size: 11px; color: var(--muted); }
.term-flow b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.info-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.info-tile { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); text-align: center; }
.info-tile b { font-size: 14px; }
.info-tile small { font-size: 11px; color: var(--muted); }
.info-tile.good b { color: var(--up); }
.info-tile.bad b { color: var(--down); }
.info-tile.warn b { color: #ffcf7a; }
.term .sol-trade-head h2 { font-size: 17px; }
@media (max-width: 1200px) {
  .term { grid-template-columns: minmax(0, 1fr) 320px; }
  .term-below { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .term { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "chart" "side" "below"; padding: 0 16px; }
  .term-bar { flex-wrap: wrap; overflow: visible; }
  .term-stats { flex-wrap: wrap; gap: 10px 18px; flex-basis: 100%; }
  .term-corvi { display: none; }
  .term-chart .chart-frame { height: 360px; }
}
.mainnet-dot { color: #ffcf7a; font-weight: 700; }

/* Live numbers: a short glow when a trade lands (devnet) and a green or red flash on price moves (mainnet). */
@media (prefers-reduced-motion: no-preference) {
  .live-flash { animation: live-flash 0.9s ease-out; }
  .tick-up { animation: tick-up 0.9s ease-out; }
  .tick-down { animation: tick-down 0.9s ease-out; }
}
@keyframes live-flash { from { background: rgba(155, 123, 255, 0.22); border-radius: 10px; } to { background: transparent; } }
@keyframes tick-up { from { color: var(--up); text-shadow: 0 0 12px rgba(61, 220, 151, 0.6); } }
@keyframes tick-down { from { color: var(--down); text-shadow: 0 0 12px rgba(255, 107, 138, 0.6); } }

/* Trade history on every token page: 15 rows in view, the rest scroll, column names stay on top */
.term-below > .trades-slot { grid-column: 1 / -1; min-width: 0; }
.trades-panel { min-width: 0; }
.trades-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.trades-head > b { font-size: 15px; }
.live-pill { font-size: 11px; font-weight: 600; color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); border-radius: 99px; padding: 2px 8px; }
.tier-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; font-size: 11.5px; color: var(--muted); }
.tier-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.trades-scroll { --row-h: 39px; --head-h: 36px; max-height: calc(var(--head-h) + var(--row-h) * 15 + 2px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; overscroll-behavior: contain; }
.trades-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.trades-scroll .trades-table { border-collapse: separate; border-spacing: 0; }
.trades-scroll thead th { position: sticky; top: 0; z-index: 1; height: var(--head-h); background: var(--card-2); box-shadow: inset 0 -1px 0 var(--line); text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); }
.trades-scroll thead th.num { text-align: right; }
.trades-scroll tbody tr { height: var(--row-h); }
.trades-scroll tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.trades-scroll tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.trades-table tr.t-new td { animation: trade-new 1.6s ease-out; }
@keyframes trade-new { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
@media (max-width: 560px) { .trades-scroll { --row-h: 37px; --head-h: 34px; } .tier-legend { margin-left: 0; width: 100%; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .trades-table tr.t-new td { animation: none; } }

/* Trader size icons (by SOL balance) and the creator's DEV label */
.trader { display: inline-flex; align-items: center; gap: 6px; }
.tier-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none; color: var(--tier); background: color-mix(in srgb, var(--tier) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 35%, transparent); }
.tier-ico svg { width: 16px; height: 16px; }
.tier-ico .solid { fill: currentColor; stroke: none; }
.tier-ico .eye { fill: var(--card); stroke: none; }
.tier-ico.t-shrimp { --tier: #ff8fb1; }
.tier-ico.t-fish { --tier: #6ec8ff; }
.tier-ico.t-dolphin { --tier: #b9a3ff; }
.tier-ico.t-whale { --tier: #8f6bff; }
.tier-ico.t-unknown { --tier: var(--muted); opacity: 0.55; }
.dev-label { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: #1b1406; background: linear-gradient(135deg, #ffd76a, #f0a93a); box-shadow: 0 0 0 1px rgba(255, 215, 106, 0.35), 0 0 10px rgba(255, 196, 70, 0.25); line-height: 16px; }
.dev-label svg { width: 11px; height: 11px; stroke-width: 2.6; }
.trader.is-dev .mono { color: #ffd76a; }
.trades-table tr:has(.is-dev) td { background: color-mix(in srgb, #ffc446 5%, transparent); }
.trades-scroll table.trades-table td, .trades-scroll table.trades-table th { padding: 8px 10px; vertical-align: middle; font-size: 13px; line-height: 20px; border-bottom: 0; white-space: nowrap; }
@media (max-width: 560px) { .trades-scroll table.trades-table td, .trades-scroll table.trades-table th { padding: 7px 8px; font-size: 12px; } }
.trades-scroll .trader { display: flex; }

/* My dashboard: profile card, stats, send / deposit, Earn, tabs */
.dash { max-width: 1060px; }
.dash-card { padding: 22px !important; border-radius: 22px; }
.dash-id { display: flex; align-items: flex-start; gap: 16px; }
.dash-id > .avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; }
.dash-name { min-width: 0; flex: 1; }
.dash-handle { font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-link { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 600; min-width: 0; }
.dash-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chips { margin-top: 10px !important; }
.dash-chips .chip { font-size: 12px; }
.dash-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.dash-bal-head { display: flex; align-items: center; gap: 10px; }
.dash-chain { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.03); }
.dash-chain small { font-size: 11px; font-weight: 600; color: var(--muted); }
.dash-bal { font-family: "Space Grotesk", Inter, sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; }
.dash-addr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.dash-addr a { color: var(--muted); }
.copy-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex: none; padding: 0; }
.copy-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.dash-stat { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.dash-stat small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dash-stat b { display: block; margin-top: 8px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 24px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dash-act { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 15px; }
.dash-act:hover { border-color: rgba(196, 179, 255, 0.45); background: var(--card-2); }

.earn { margin-top: 34px; }
.earn-title { margin: 0; font-size: 24px; }
.earn-sub { margin: 4px 0 14px; font-size: 14px; }
.earn-total { padding: 0 !important; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(155, 123, 255, 0.16), transparent 55%), var(--card) !important; }
.earn-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px; }
.earn-top small { display: block; font-weight: 600; }
.earn-big { font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(36px, 7vw, 52px); font-weight: 700; line-height: 1.1; margin: 6px 0; font-variant-numeric: tabular-nums; }
.earn-big.zero, .earn-amt.zero { color: var(--muted); }
.earn-claim { min-width: 200px; padding: 14px 28px; border-radius: 99px; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, #b9a3ff, #8b6cff); color: #120d24; border: 0; }
.earn-claim:disabled, .earn-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: saturate(0.6); }
.earn-break { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 24px 22px; border-top: 1px solid var(--line); }
.earn-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); min-width: 0; }
.earn-tile small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.earn-tile b { display: block; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.earn-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, 0.07); color: var(--text); }
.earn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.earn-card { display: flex; flex-direction: column; padding: 18px !important; border-radius: 20px; min-width: 0; }
.earn-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.earn-card-head b { font-size: 15px; }
.earn-wallet { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); font-family: ui-monospace, monospace; }
.earn-amt { font-family: "Space Grotesk", Inter, sans-serif; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.earn-cap { font-weight: 700; color: var(--muted); margin-top: 2px; }
.earn-card > small.muted { margin-top: 6px; font-weight: 600; }
.earn-text { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 14px 0; flex: 1; }
.earn-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 13px; margin-bottom: 12px; }
.earn-row span { color: var(--muted); font-weight: 600; }
.earn-btn { width: 100%; padding: 12px; border-radius: 99px; font-weight: 700; background: rgba(155, 123, 255, 0.55); color: #120d24; border: 0; }
.earn-btn.bright { background: linear-gradient(135deg, #c9b8ff, #9b7bff); }
.earn-foot { margin: 10px 0 0; font-size: 12px; }

.dash-tabs { margin: 30px 0 12px; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.dash-tabs .tab { border: 0; background: transparent; padding: 8px 14px; border-radius: 10px; font-weight: 600; color: var(--muted); }
.dash-tabs .tab.on { background: rgba(155, 123, 255, 0.2); color: var(--text); box-shadow: inset 0 0 0 1px rgba(196, 179, 255, 0.35); }
.tab-count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.dash-pane { border-radius: 20px; }
.dash-empty { text-align: center; padding: 34px 0 20px; font-weight: 600; }
.dep-addr { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-top: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.dep-addr code { flex: 1; word-break: break-all; font-size: 13px; }

@media (max-width: 860px) {
  .earn-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-card { padding: 16px !important; }
  .dash-id { flex-wrap: wrap; }
  .dash-id > .avatar { width: 56px; height: 56px; }
  .dash-name { flex-basis: calc(100% - 92px); }
  .dash-id > .avatar { width: 56px !important; height: 56px !important; }
  .dash-wallet { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
  .dash-wallet .dash-addr { width: 100%; }
  .dash-stat b { font-size: 20px; }
  .earn-top { padding: 18px; }
  .earn-claim { width: 100%; }
  .earn-break { grid-template-columns: minmax(0, 1fr); padding: 12px 18px 18px; }
  .dash-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  .dash-tabs .tab { flex: none; }
}
.dash-card, .earn-card, .dash-pane { background: linear-gradient(rgba(38, 32, 68, 0.95), rgba(20, 17, 36, 0.97)) !important; }
.earn-total { background: radial-gradient(120% 140% at 100% 0%, rgba(155, 123, 255, 0.16), transparent 55%), linear-gradient(rgba(38, 32, 68, 0.95), rgba(20, 17, 36, 0.97)) !important; }

/* My dashboard, tuned for desktop and phones */
.earn-btn { background: linear-gradient(135deg, #c9b8ff, #9b7bff); }
.earn-btn:disabled, .earn-claim:disabled { background: rgba(255, 255, 255, 0.06); color: var(--muted); opacity: 1; filter: none; }
.earn-cards { align-items: stretch; }
/* Earnings rows: the amounts side by side, label over value */
.dash-pane .dash-row .right { display: flex; align-items: center; gap: 22px; text-align: right; }
.dash-pane .dash-row .right > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; min-width: 64px; }
.dash-pane .dash-row .right > div > span.muted { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-pane .dash-row .right .buy { margin: 0; min-width: 84px; }
.dash-pane .feed { border-radius: 14px; }
.dash-pane .dash-row { padding: 12px 14px; }
.dash-tabs::-webkit-scrollbar, .dash-chips::-webkit-scrollbar, .earn-cards::-webkit-scrollbar { display: none; }

@media (max-width: 860px) {
  /* The three cards become a row you swipe through, with the next one peeking in */
  .earn-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 12px -16px 0; padding: 0 16px 4px; scrollbar-width: none; scroll-padding: 0 16px; }
  .earn-card { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .dash-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -16px !important; padding-right: 16px; }
  .dash-chips .chip { flex: none; }
  .dash-stats { gap: 8px; margin-top: 14px; }
  .dash-stat { padding: 12px 14px; }
  .dash-actions { margin-top: 10px; }
  .dash-act { padding: 12px; }
  .earn { margin-top: 26px; }
  .earn-big { font-size: 40px; }
  .earn-top { gap: 12px; }
  /* Three small tiles across instead of three rows */
  .earn-break { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .earn-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .earn-tile small { font-size: 11px; line-height: 1.25; }
  .earn-ico { width: 26px; height: 26px; }
  .earn-card { padding: 16px !important; }
  .earn-amt { font-size: 26px; }
  .earn-text { margin: 10px 0; font-size: 13px; }
  .dash-tabs { margin: 24px -16px 12px 0; border-radius: 14px 0 0 14px; border-right: 0; }
  .dash-pane { padding: 14px !important; }
  .dash-pane .dash-row .right { gap: 14px; justify-content: flex-start; text-align: left; }
  .dash-pane .dash-row .right > div { align-items: flex-start; min-width: 0; }
  .dash-pane .dash-row .right .buy { margin-left: auto; }
}

/* Desktop view / mobile view switch (top bar), and the phone frame it opens on a computer */
.viewtoggle { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; }
.viewtoggle:hover { color: var(--text); border-color: rgba(196, 179, 255, 0.4); }
.viewtoggle[aria-pressed="true"] { color: var(--text); background: rgba(155, 123, 255, 0.18); border-color: rgba(196, 179, 255, 0.45); }
@media (max-width: 640px) { .viewtoggle { width: 38px; height: 38px; border-radius: 11px; } .viewtoggle svg { width: 17px; height: 17px; } }
.in-mobile-view body { padding-left: 0 !important; overflow: hidden; }
.in-mobile-view body > :not(#mobileFrame):not(.crow-sky) { display: none !important; }
.mobile-frame { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 16px 20px; overflow: auto; }
.mf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 520px); flex: none; }
.mf-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.mf-title small { font-weight: 500; }
.mf-exit { display: inline-flex; align-items: center; gap: 8px; }
.mf-device { flex: none; box-sizing: content-box; width: var(--mf-w); height: max(560px, min(var(--mf-h), calc(100vh - 136px))); padding: 12px; border-radius: 46px; background: #07060d; box-shadow: 0 0 0 2px rgba(196, 179, 255, 0.25), 0 30px 80px rgba(0, 0, 0, 0.6); }
.mf-device iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 34px; background: var(--bg); }
/* Inside the phone frame: no desktop scrollbar, like a phone */
.is-mobile-frame, .is-mobile-frame body { scrollbar-width: none; }
.is-mobile-frame ::-webkit-scrollbar { display: none; }

/* Sideways sliders under rows that are wider than a phone screen (app.js, attachSlider) */
.hslider { display: none; }
@media (max-width: 960px) {
  .hslider:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
  .hslider.hs-mini:not([hidden]) { margin: 6px 0 0; }
  .hs-track { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); cursor: pointer; touch-action: none; }
  .hs-track::before { content: ""; position: absolute; inset: -10px 0; } /* a bigger target for fingers */
  .hs-mini .hs-track { height: 4px; }
  .hs-thumb { position: absolute; top: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9b8ff, #8b6cff); box-shadow: 0 0 8px rgba(155, 123, 255, 0.45); }
  .hs-btn { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer; }
  .hs-btn:disabled { opacity: 0.3; cursor: default; }
  /* A fade on the side that has more */
  .has-hslider.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .has-hslider.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
  .has-hslider.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}

/* Burn pit: the treasury wallet */
.treasury-panel { margin: 18px 0 8px; }
.treasury-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.treasury-panel .dep-addr { margin-top: 0; }
.treasury-scan { padding: 6px 12px; font-size: 13px; flex: none; }
.treasury-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.treasury-stats .stat { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 12px; }
@media (max-width: 560px) { .treasury-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treasury-panel .dep-addr { flex-wrap: wrap; } }

/* Burn pit: the treasury's buybacks */
.buyback-panel { margin: 12px 0 8px; }
.buyback-table td, .buyback-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.buyback-table .num { text-align: right; }
.buyback-table .burned { color: #ffb15c; font-weight: 700; }

.buyback-schedule { margin: -4px 0 10px; font-size: 12.5px; }
.buyback-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .buyback-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buyback-table tr.week-now td { background: rgba(155, 123, 255, 0.07); }

/* Admin panel content: the announcement banner, the official CA bar on the home page, Corvexa's links, Pulse tags. */
.site-banner { max-width: var(--page-max); margin: 0 auto 10px; padding: 0 16px; }
.site-banner > a, .site-banner > span { display: block; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; text-align: center; }
.site-banner.tone-info > * { background: rgba(139, 108, 255, 0.16); color: #d7ccff; border: 1px solid #3b3266; }
.site-banner.tone-good > * { background: rgba(61, 220, 151, 0.12); color: #7ff0bd; border: 1px solid #24513f; }
.site-banner.tone-warn > * { background: rgba(255, 184, 77, 0.12); color: #ffcf85; border: 1px solid #5a4422; }
.site-banner > a:hover { filter: brightness(1.12); }
.official-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin: 4px 0 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(139, 108, 255, 0.18), rgba(61, 220, 151, 0.08)); border: 1px solid #3b3266; }
.official-ca-head { display: flex; align-items: center; gap: 10px; }
.official-ca-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); }
.official-ca-head b { font-size: 16px; }
.official-ca-addr { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); font-size: 13px; }
.official-ca-actions { display: flex; align-items: center; gap: 8px; }
.official-ca-actions .btn { padding: 8px 14px; font-size: 14px; }
.home-tagline { font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; margin: 6px 0 8px; max-width: 760px; }
.home-sub { max-width: 640px; margin: 0 0 4px; font-size: 16px; }
.social-links { display: inline-flex; align-items: center; gap: 10px; }
.pill.official-pill { background: rgba(61, 220, 151, 0.14); color: var(--up); border-color: #24513f; margin-left: 8px; }
.pill.featured-pill { background: rgba(139, 108, 255, 0.16); color: var(--accent-2); border-color: #3b3266; margin-left: 8px; }
.pulse-row .right .trade-link { pointer-events: none; }
@media (max-width: 600px) {
  .official-ca { padding: 12px 14px; }
  .official-ca-addr { flex-basis: 100%; order: 3; }
}
.official-ca-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--card-2) center/cover; flex: none; }
.nav-token-logo { border-radius: 50%; object-fit: cover; }
.official-ca .copy-btn { width: 36px; height: 36px; border: 1px solid #3b3266; border-radius: 10px; background: rgba(0, 0, 0, 0.2); color: var(--accent-2); }
.official-ca .copy-btn:hover { color: #fff; border-color: var(--accent); }

/* $CORVX holder perks: the launch form's box, the verified badge on token pages. */
.perks-box { display: grid; gap: 4px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(139, 108, 255, 0.08); border: 1px solid #3b3266; font-size: 13px; }
.perks-box b { font-size: 13px; }
#lockSeg button[disabled] { opacity: 0.45; cursor: not-allowed; }
.verified-creator { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--up); background: rgba(61, 220, 151, 0.12); border: 1px solid #24513f; }
.verified-creator.official { color: var(--accent-2); background: rgba(139, 108, 255, 0.14); border-color: #3b3266; }
.btn.adm-inline { padding: 4px 10px; font-size: 12px; margin-left: 6px; }
.corvx-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; }

/* Anti-spoiler: "$CORVX" blurred while the admin panel's switch is on (app.js). */
.corvx-spoiler { filter: blur(max(5px, 0.35em)); user-select: none; -webkit-user-select: none; pointer-events: none; }
.corvx-spoiler.svg { filter: blur(3px); }
@media print { .corvx-spoiler { filter: none; color: transparent; background: #888; } }

/* First-visit intro (app.js showIntro): Corvi says hello, once per browser. */
.intro { position: fixed; inset: 0; z-index: 60; display: flex; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(125, 92, 240, 0.28), rgba(5, 5, 9, 0) 60%), rgba(5, 5, 9, 0.78); backdrop-filter: blur(6px); }
.intro-card { position: relative; width: min(520px, 100%); margin: auto; text-align: center; padding: 30px 30px 24px; border-radius: 28px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(38, 32, 68, 0.96), rgba(20, 17, 36, 0.97)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.intro-skip { position: absolute; top: 14px; right: 14px; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.intro-skip:hover { color: var(--text); }
.intro-corvi { display: flex; justify-content: center; margin: -4px 0 4px; }
.intro-eyebrow { justify-content: center; }
.intro-title { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 52px; line-height: 1; letter-spacing: -0.04em; margin: 6px 0 8px; }
.intro-tag { margin: 0 0 20px; font-size: 17px; font-weight: 700; background: linear-gradient(180deg, #e2d8ff, #9b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.intro-points li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.intro-points i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--up); background: rgba(61, 220, 151, 0.14); }
.intro-points b { display: block; font-size: 14px; }
.intro-points small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.intro-meet { display: flex; gap: 10px; align-items: center; text-align: left; margin: 16px 0 0; padding: 10px 12px; border-radius: 16px; font-size: 13.5px; color: var(--muted); background: rgba(155, 123, 255, 0.1); }
.intro-meet b { color: var(--text); }
.intro-meet .mascot { flex: none; }
.intro-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.intro-actions .btn { flex: 1; text-align: center; text-decoration: none; padding: 13px 18px; }
.intro-risk { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); }
@media (max-width: 480px) {
  .intro-card { padding: 26px 18px 20px; }
  .intro-title { font-size: 44px; }
  .intro-points { grid-template-columns: 1fr; }
  .intro-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .intro { animation: intro-fade 0.3s ease-out; }
  .intro-card { animation: intro-pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
  .intro-points li { animation: intro-up 0.45s ease-out both; animation-delay: calc(0.25s + var(--i) * 0.09s); }
  .intro-meet { animation: intro-up 0.45s ease-out 0.65s both; }
  .intro.closing { animation: intro-fade 0.22s ease-in reverse forwards; }
}
.intro.closing { pointer-events: none; }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes intro-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Before $CORVX is out (app.js LAUNCHES_LOCKED): no "Launch a token" links anywhere, and Pulse shows a teaser. */
.launch-locked a[href="/launch"] { display: none !important; }
.launch-soon { display: flex; align-items: center; gap: 22px; padding: 26px 28px; }
.launch-soon .mascot { flex: none; }
.launch-soon h3 { margin: 6px 0 6px; font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 26px; letter-spacing: -0.02em; }
.launch-soon p { margin: 0; max-width: 560px; }
.launch-soon a { color: var(--accent-2); }
@media (max-width: 560px) { .launch-soon { flex-direction: column; text-align: center; } }