/* =========================================================
   OVI - design system
   Light, airy, social-trading layout. Bright accents.
   ========================================================= */
/* ---------- theme tokens (Apple-style neutrals) ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --bg-soft: #f5f5f7;
  --bg-soft2: #e8e8ed;
  --bg-softer: #fbfbfd;
  --fg: #1d1d1f;
  --fg-2: #424245;
  --fg-3: #86868b;
  --fg-4: #aeaeb2;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --glass: rgba(255, 255, 255, 0.78);
  --on-fg: #ffffff;

  --up: #1fbf4a;          /* Apple system green, tuned for text on white */
  --up-strong: #34c759;
  --down: #ff3b30;        /* Apple system red */
  --buy: #34c759;
  --buy-ink: #ffffff;
  --accent: #0071e3;      /* Apple link blue */
  --violet: #7b2bff;
  --cyan: #00c2ff;
  --grad: linear-gradient(120deg, #c6ff3d 0%, #2bff88 30%, #00c2ff 62%, #7b2bff 100%);
  --grad-soft: linear-gradient(120deg, rgba(198,255,61,.22), rgba(0,194,255,.16) 55%, rgba(123,43,255,.16));
  --hero-a: #eaffc2; --hero-b: #e1d6ff; --hero-c: #c9f3ff; --hero-base: #f5f5f7;
  --sk-a: #f0f0f2; --sk-b: #f8f8fa;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --rail: 72px;
  --top: 64px;
  --tabbar: 60px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.14);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0d0d0f;
  --surface-2: #141416;
  --bg-soft: #1c1c1e;
  --bg-soft2: #2c2c2e;
  --bg-softer: #111113;
  --fg: #f5f5f7;
  --fg-2: #c7c7cc;
  --fg-3: #8e8e93;
  --fg-4: #636366;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --glass: rgba(0, 0, 0, 0.72);
  --on-fg: #000000;
  --up: #30d158;
  --up-strong: #30d158;
  --down: #ff453a;
  --buy: #30d158;
  --buy-ink: #000000;
  --accent: #2997ff;
  --grad-soft: linear-gradient(120deg, rgba(198,255,61,.14), rgba(0,194,255,.12) 55%, rgba(123,43,255,.16));
  --hero-a: #1d2a06; --hero-b: #1e1236; --hero-c: #062433; --hero-base: #0d0d0f;
  --sk-a: #151517; --sk-b: #1f1f22;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scrollbar-color: rgba(0,0,0,.16) transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: var(--fg); }
h1, h2, h3, h4 { color: var(--fg); margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
.ic { width: 22px; height: 22px; flex: none; }
.mono { font-family: var(--mono); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--fg-3); }
.muted { color: var(--fg-3); }
.hide { display: none !important; }

/* ---------- rail ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 18px; background: var(--bg);
}
.rail-logo { display: grid; place-items: center; width: 44px; height: 44px; transition: transform .25s; }
.rail-logo:hover { transform: rotate(-12deg) scale(1.05); }
.rail-nav { margin: auto 0; display: flex; flex-direction: column; gap: 14px; }
.rail-btn {
  position: relative; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; color: var(--fg-3); transition: background .15s, color .15s;
}
.rail-btn:hover { background: var(--bg-soft); color: var(--fg); }
.rail-btn.is-active { color: var(--fg); }
.rail-btn.is-active::before {
  content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--grad);
}
.rail-btn.is-create { background: var(--bg-soft); color: var(--fg); }
.rail-btn.is-create:hover { background: var(--fg); color: var(--on-fg); }
.rail-btn[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
  background: var(--fg); color: var(--on-fg); font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
}
.rail-word {
  font-weight: 700; font-size: 15px; letter-spacing: -0.04em; color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  writing-mode: horizontal-tb;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: var(--rail); right: 0; height: var(--top); z-index: 25;
  display: grid; grid-template-columns: 1fr minmax(260px, 480px) 1fr; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--glass); backdrop-filter: saturate(1.6) blur(14px);
}
.top-logo { display: none; }
.top-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.search { grid-column: 2; position: relative; display: flex; align-items: center; height: 40px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); padding: 0 12px; gap: 8px; }
.search:focus-within { background: var(--surface); border-color: var(--line-2); box-shadow: 0 0 0 4px rgba(123,43,255,.08); }
.search-ic { width: 18px; height: 18px; color: var(--fg-3); }
.search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.search-input::placeholder { color: var(--fg-3); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-pop {
  position: absolute; top: 46px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; max-height: 420px; overflow: auto;
}
.sp-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.sp-row:hover { background: var(--bg-soft); }
.sp-row img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.sp-name { flex: 1; color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-name em { font-style: normal; color: var(--fg-3); margin-left: 6px; font-weight: 400; }
.sp-mc { color: var(--fg); font-size: 14px; }
.sp-empty { padding: 14px; color: var(--fg-3); text-align: center; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--fg-2); }
.icon-btn:hover { background: var(--bg-soft); color: var(--fg); }
.show-sm { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 500; font-size: 15px; white-space: nowrap;
  transition: transform .1s, background .15s, filter .15s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 999px; }
.btn-block { width: 100%; }
.btn-dark { background: var(--fg); color: var(--on-fg); }
.btn-dark:hover { opacity: .86; }
.btn-dark.is-connected { background: var(--bg-soft); color: var(--fg); }
.btn-soft { background: var(--bg-soft); color: var(--fg); }
.btn-soft:hover { background: var(--bg-soft2); }
.btn-line { border: 1px solid var(--line-2); color: var(--fg); background: var(--surface); }
.btn-line:hover { background: var(--bg-soft); }
.btn-buy { background: var(--buy); color: var(--buy-ink); }
.btn-buy:hover { filter: brightness(1.05) saturate(1.1); }
.btn-grad { background: var(--grad); color: #0a0a0a; background-size: 160% 100%; background-position: 0 0; transition: background-position .4s, transform .1s; }
.btn-grad:hover { background-position: 100% 0; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px;
  border-radius: 999px; color: var(--fg); font-weight: 500; white-space: nowrap; transition: background .15s;
}
.chip:hover, .chip.is-active { background: var(--bg-soft); }
.chip .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--grad-soft); }
.chip.no-dot { padding: 0 12px; }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
.tab-btn { position: relative; padding: 10px 0 11px; color: var(--fg-4); font-weight: 500; font-size: 15px; }
.tab-btn:hover { color: var(--fg-2); }
.tab-btn.is-active { color: var(--fg); }
.tab-btn.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); border-radius: 2px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--bg-soft); color: var(--fg-2); }
.pill.grad { background: var(--grad-soft); color: var(--fg); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-4); }
.status.awake::before { background: var(--up); box-shadow: 0 0 0 3px rgba(0,216,30,.18); animation: pulse 2s infinite; }
.status.asleep::before { background: #ffb000; }
.status.off::before { background: var(--fg-4); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(0,216,30,0); } }

/* ---------- layout ---------- */
.main { margin-left: var(--rail); padding: calc(var(--top) + 16px) 24px 64px; min-height: 100vh; }
.wrap { max-width: 1180px; margin: 0 auto; }
.wrap-sm { max-width: 600px; margin: 0 auto; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; }
.section-title h2 { font-size: 20px; }
.section-title a { color: var(--fg-3); font-size: 14px; }
.section-title a:hover { color: var(--fg); }

/* ---------- avatars ---------- */
.av { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--bg-soft); flex: none; }
.av-sm { width: 28px; height: 28px; border-radius: 50%; }
.av-md { width: 36px; height: 36px; border-radius: 50%; }
.av-round { border-radius: 50%; }
.av-ring { position: relative; flex: none; }
.av-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- explore: chips row ---------- */
.chips-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.chips-scroll { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.fab { width: 48px; height: 48px; border-radius: 50%; background: var(--fg); color: var(--on-fg); display: grid; place-items: center; flex: none; transition: transform .2s; }
.fab:hover { transform: rotate(90deg); }
.fab .ic { width: 24px; height: 24px; }

/* ---------- explore: hero strip ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 18px;
  background: radial-gradient(120% 140% at 0% 0%, var(--hero-a) 0%, transparent 45%), radial-gradient(120% 140% at 100% 0%, var(--hero-b) 0%, transparent 50%), radial-gradient(120% 140% at 60% 120%, var(--hero-c) 0%, transparent 55%), var(--hero-base);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center;
}
.hero h1 { font-size: 22px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.hero p { margin-top: 4px; font-size: 14px; color: var(--fg-2); max-width: 560px; }
.hero-cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hero .eyebrow { margin-bottom: 6px; }
.loop { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.loop span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--fg); font-size: 13px; font-weight: 500; }

.loop i { font-style: normal; color: var(--fg-4); align-self: center; }

/* ---------- explore: table ---------- */
.tbl-head, .tbl-row {
  display: grid; grid-template-columns: minmax(220px, 2.4fr) 1fr 1fr .8fr .6fr .9fr 1fr; align-items: center; gap: 12px;
}
.tbl-head { padding: 10px 14px; font-size: 13px; color: var(--fg-3); }
.tbl-head > :last-child, .tbl-row > :last-child { text-align: right; }
.tbl-head button { color: inherit; font-size: inherit; }
.tbl-head button:hover, .tbl-head button.is-sorted { color: var(--fg); }
.tbl-row {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: var(--surface);
  color: var(--fg); font-size: 14px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tbl-row:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.coin-cell { display: flex; align-items: center; gap: 14px; min-width: 0; }
.coin-cell .av { width: 48px; height: 48px; }
.coin-name { min-width: 0; }
.coin-name b { display: block; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.coin-name small { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 13px; text-transform: uppercase; }
.copy-btn { color: var(--fg-4); display: inline-grid; place-items: center; }
.copy-btn:hover { color: var(--fg); }
.copy-btn svg { width: 12px; height: 12px; }
.tbl-pct { font-weight: 500; }
.load-more { display: flex; justify-content: center; margin: 18px 0 0; }
.flash { animation: flash 1s; }
@keyframes flash { 0% { background: rgba(0,216,30,.08); } 100% { background: transparent; } }

/* ---------- skeleton ---------- */
.sk { background: linear-gradient(90deg, var(--sk-a) 0, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- feed ---------- */
.feed-layout { display: grid; grid-template-columns: minmax(0, 560px) 300px; gap: 48px; justify-content: center; }
.post { margin-bottom: 28px; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; }
.post-head .who { flex: 1; min-width: 0; color: var(--fg); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.post-head .who em { font-style: normal; color: var(--fg-3); font-weight: 400; }
.post-head time { color: var(--fg-3); font-size: 13px; }
.post-media { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #0d0d0d; aspect-ratio: 4 / 5; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; }
.post-media.is-photo { background: var(--bg-soft); }
.post-media .mute { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); }
.post-media .mute svg { width: 16px; height: 16px; }
.post-media .dur { position: absolute; left: 12px; top: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(6px); }
.post-media .ai-badge { position: absolute; right: 12px; top: 12px; }
.progress-line { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--grad); width: 0; }
.post-foot { display: flex; align-items: center; gap: 16px; padding: 10px 2px 0; color: var(--fg); font-size: 14px; }
.post-foot .stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.post-foot .stat svg { width: 18px; height: 18px; }
.post-foot .spacer { flex: 1; }
.post-cap { padding: 8px 2px 0; color: var(--fg); font-size: 14px; }
.post-cap b { font-weight: 500; margin-right: 6px; }
.tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.tri.up { border-bottom: 9px solid var(--up); }
.tri.down { border-top: 9px solid var(--down); }

.side { position: sticky; top: calc(var(--top) + 16px); align-self: start; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color .15s; }
.mini:hover { border-color: var(--line-2); }
.mini b { color: var(--fg); font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .bar { height: 34px; border-radius: 6px; position: relative; overflow: hidden; background: var(--bg-softer); }
.mini .bar i { position: absolute; left: 0; bottom: 0; right: 0; }
.mini .row { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; font-weight: 500; }
.mini .row img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.follow-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.follow-row .nm { flex: 1; min-width: 0; color: var(--fg); font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-row .nm small { display: block; color: var(--fg-3); font-weight: 400; font-size: 12px; }
.side-card { border-radius: var(--r-lg); padding: 18px; background: var(--grad-soft); margin-top: 22px; }
.side-card h3 { font-size: 17px; }
.side-card p { font-size: 14px; margin: 6px 0 14px; }
.side-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--fg-3); }
.side-links a:hover { color: var(--fg); }


/* ---------- token page ---------- */
.token-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; max-width: 1080px; margin: 0 auto; }
.tk-head { display: flex; align-items: center; gap: 14px; }
.tk-head .av { width: 64px; height: 64px; border-radius: 12px; }
.tk-title { flex: 1; min-width: 0; }
.tk-title h1 { font-size: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-title small { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 14px; margin-top: 4px; text-transform: uppercase; }
.tk-price { text-align: right; }
.tk-price b { display: block; font-size: 24px; font-weight: 500; color: var(--fg); letter-spacing: -0.02em; }
.tk-price span { font-size: 14px; font-weight: 500; }
.chart-box { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 420px; position: relative; background: #fff; }
.chart-box iframe { width: 100%; height: 100%; border: 0; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--fg-3); padding: 24px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 18px; }
.stats4 div:last-child { text-align: right; }
.stats4 small { display: block; font-size: 12px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .02em; }
.stats4 b { display: block; font-size: 20px; color: var(--fg); font-weight: 500; margin-top: 4px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; background: var(--surface); }
.panel + .panel { margin-top: 12px; }
.trade-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.trade-tabs button { height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 500; color: var(--fg-2); }
.trade-tabs button.is-active { background: var(--buy); color: var(--buy-ink); }
.trade-tabs button.is-sell.is-active { background: var(--down); color: #fff; }
.amount { background: var(--bg-soft); border-radius: var(--r); padding: 14px; display: flex; align-items: center; gap: 10px; }
.amount input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 28px; font-weight: 500; }
.amount .unit { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-weight: 500; font-size: 14px; }
.amount .unit img, .amount .unit svg { width: 18px; height: 18px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 12px; }
.presets button { height: 38px; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-weight: 500; font-size: 14px; }
.presets button:hover { background: var(--bg-soft); }
.trade-note { font-size: 12px; color: var(--fg-3); text-align: center; margin-top: 10px; }
.pair-card { display: flex; align-items: center; gap: 12px; }
.pair-card small { display: block; font-size: 11px; color: var(--fg-3); text-transform: uppercase; }
.pair-card b { color: var(--fg); font-weight: 500; }
.curve { margin-top: 4px; }
.curve-bar { height: 8px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; margin: 8px 0 6px; }
.curve-bar i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--fg-3); }
.kv b, .kv a { color: var(--fg); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv a:hover { text-decoration: underline; }

.agent-loop { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 16px; }
.agent-loop div { text-align: center; padding: 12px 4px; border-radius: 10px; background: var(--bg-softer); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--fg-3); position: relative; }
.agent-loop div.on { color: var(--fg); background: var(--grad-soft); border-color: transparent; }
.agent-loop div .n { display: block; font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-bottom: 2px; }
.trait { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.trait span { color: var(--fg-2); text-transform: capitalize; }
.trait .tb { height: 6px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.trait .tb i { display: block; height: 100%; background: var(--grad); }
.trait b { text-align: right; color: var(--fg); font-weight: 500; font-family: var(--mono); font-size: 12px; }
.bio { color: var(--fg); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.soon-box { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 18px; text-align: center; color: var(--fg-3); font-size: 14px; }
.soon-box b { display: block; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
.txns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.txns div { border-radius: 10px; padding: 12px; background: var(--bg-softer); border: 1px solid var(--line); }
.txns small { display: block; color: var(--fg-3); font-size: 12px; }
.txns b { font-size: 20px; font-weight: 500; }
.vid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- grid tiles (profile / token videos) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.tile { position: relative; aspect-ratio: 9 / 14; background: var(--bg-soft); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tile:hover img { transform: scale(1.03); }
.tile .tag { position: absolute; left: 8px; bottom: 8px; color: #fff; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tile .tag svg { width: 14px; height: 14px; }

/* ---------- profile ---------- */
.prof { max-width: 680px; margin: 0 auto; }
.prof-top { display: flex; align-items: center; gap: 16px; }
.prof-top .av { width: 84px; height: 84px; border-radius: 50%; }
.prof-top h1 { font-size: 22px; }
.prof-top small { color: var(--fg-3); font-size: 14px; }
.prof-top .acts { margin-left: auto; display: flex; gap: 6px; align-self: flex-start; }
.prof-stats { display: flex; gap: 16px; margin: 14px 0; font-size: 14px; color: var(--fg-3); flex-wrap: wrap; }
.prof-stats b { color: var(--fg); font-weight: 500; }
.prof-bio { color: var(--fg); font-size: 14px; margin-bottom: 14px; }
.prof-btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 12px; }
.prof-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); margin-bottom: 3px; }
.prof-tabs button { height: 44px; display: grid; place-items: center; color: var(--fg-4); position: relative; }
.prof-tabs button.is-active { color: var(--fg); }
.prof-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.prof-tabs svg { width: 20px; height: 20px; }

/* ---------- launch ---------- */
.launch-layout { display: grid; grid-template-columns: minmax(0, 560px) 340px; gap: 36px; justify-content: center; }
.modal-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 22px 24px 24px; }
.seg { display: flex; justify-content: center; gap: 4px; margin-bottom: 18px; }
.seg button { height: 32px; padding: 0 12px; border-radius: 8px; color: var(--fg-2); font-weight: 500; font-size: 14px; position: relative; }
.seg button.is-active { background: var(--bg-soft); color: var(--fg); }
.seg sup { font-size: 9px; margin-left: 2px; color: var(--accent); }
.field { margin-bottom: 18px; }
.field > label, .field-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; font-weight: 500; }
.big-input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; padding: 0; }
.big-input::placeholder { color: var(--fg-4); }
.text-area { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; outline: 0; font-size: 15px; line-height: 1.45; }
.text-area:focus, .inp:focus { border-color: var(--line-2); box-shadow: 0 0 0 4px rgba(123,43,255,.08); }
.inp { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; outline: 0; }
.field > label.upload { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--fg-2); margin: 0; }
.upload { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.upload .box { width: 72px; height: 72px; border-radius: 14px; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; color: var(--fg); }
.upload .box img { width: 100%; height: 100%; object-fit: cover; }
.upload span { color: var(--fg-2); font-size: 14px; }
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; text-align: left; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--line-2); }
.opt b { display: block; color: var(--fg); font-weight: 500; font-size: 14px; }
.opt small { color: var(--fg-3); font-size: 12px; }
.opt.is-active { border-color: transparent; background: var(--grad-soft); box-shadow: inset 0 0 0 1.5px var(--fg); }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skill { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; }
.skill input { margin-top: 3px; accent-color: var(--fg); }
.skill b { display: block; color: var(--fg); font-weight: 500; font-size: 14px; }
.skill small { color: var(--fg-3); font-size: 12px; }
.slider { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.slider span { text-transform: capitalize; }
.slider input { width: 100%; accent-color: #7b2bff; }
.slider b { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--fg); }
.preview-sticky { position: sticky; top: calc(var(--top) + 16px); align-self: start; }
.prev-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.prev-media { aspect-ratio: 4 / 5; background: var(--grad-soft); display: grid; place-items: center; position: relative; }
.prev-media img { width: 100%; height: 100%; object-fit: cover; }
.prev-media .ph { text-align: center; color: var(--fg-3); font-size: 14px; padding: 24px; }
.prev-body { padding: 14px; }
.prev-body h3 { font-size: 18px; }
.prev-body .tkr { color: var(--fg-3); text-transform: uppercase; font-size: 13px; }
.prev-body p { margin-top: 8px; font-size: 14px; color: var(--fg-2); }
.prev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- content pages (agents / docs) ---------- */
.prose { max-width: 760px; margin: 0 auto; color: var(--fg-2); }
.prose h1 { font-size: 44px; letter-spacing: -0.045em; line-height: 1.02; font-weight: 600; }
.prose .lead { font-size: 18px; margin-top: 14px; }
.prose h2 { font-size: 24px; margin: 44px 0 12px; }
.prose h3 { font-size: 17px; margin: 22px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 1.6; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; }
.eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.loop-big { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 24px 0; counter-reset: s; }
.loop-big div { border-radius: var(--r); background: var(--bg-softer); border: 1px solid var(--line); padding: 14px 10px; }
.loop-big div b { display: block; color: var(--fg); font-weight: 500; font-size: 15px; }
.loop-big div small { display: block; font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.35; }
.loop-big div::before { counter-increment: s; content: "0" counter(s); font-family: var(--mono); font-size: 11px; color: var(--fg-4); display: block; margin-bottom: 8px; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin: 20px 0; }
.flow .node { border-radius: var(--r); padding: 14px; text-align: center; background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-weight: 500; font-size: 14px; }
.flow .node small { display: block; color: var(--fg-3); font-weight: 400; font-size: 12px; margin-top: 4px; }
.flow .arrow { color: var(--fg-4); }
.flow .node.hl { background: var(--grad-soft); border-color: transparent; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cards3 div { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.cards3 b { display: block; color: var(--fg); font-weight: 500; }
.cards3 small { color: var(--fg-3); font-size: 13px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; color: var(--fg); font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--fg-3); }
.faq details[open] summary::after { content: "-"; }
.faq p { margin-top: 8px; }
.cta-band { margin-top: 48px; border-radius: var(--r-lg); padding: 28px; background: var(--grad); color: #0a0a0a; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-band h3 { font-size: 24px; margin: 0; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--fg); color: var(--on-fg); padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .2s; z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- tab bar (mobile) ---------- */
.tabbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tbl-head, .tbl-row { grid-template-columns: minmax(200px, 2.4fr) 1fr 1fr .8fr 1fr; }
  .col-age, .col-agent { display: none; }
  .feed-layout { grid-template-columns: minmax(0, 560px); }
  .feed-layout .side { display: none; }
  .launch-layout { grid-template-columns: minmax(0, 560px); }
  .preview-sticky { display: none; }
}
@media (max-width: 900px) {
  .token-layout { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .loop-big { grid-template-columns: repeat(4, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .flow .arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 768px) {
  :root { --top: 60px; }
  .rail { display: none; }
  .topbar { left: 0; grid-template-columns: auto 1fr auto; padding: 0 14px; }
  .top-logo { display: block; }
  .search { display: none; }
  body.search-open .search { display: flex; position: fixed; top: 60px; left: 12px; right: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
  .hide-sm { display: none !important; }
  .show-sm { display: grid; }
  .main { margin-left: 0; padding: calc(var(--top) + 8px) 14px calc(var(--tabbar) + 24px); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); z-index: 30;
  }
  .tab { display: grid; place-items: center; color: var(--fg-4); }
  .tab.is-active { color: var(--fg); }
  .tab.is-create .ic { width: 40px; height: 32px; padding: 5px 9px; border-radius: 9px; background: var(--bg-soft); color: var(--fg); }
  .hero { padding: 16px; }
  .hero-cta { justify-content: flex-start; }
  .tbl-head { display: none; }
  .tbl-row { grid-template-columns: 1fr auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 2px; margin: 0; }
  .tbl-row:hover { box-shadow: none; }
  .tbl-row > .col-vol, .tbl-row > .col-hold, .tbl-row > .col-age, .tbl-row > .col-agent, .tbl-row > .col-pct { display: none; }
  .tbl-row .col-mc { text-align: right; }
  .tbl-row .col-mc .m-pct { display: block !important; font-size: 13px; font-weight: 500; }
  .fab { width: 42px; height: 42px; }
  .post-media { border-radius: 0; margin: 0 -14px; border-left: 0; border-right: 0; }
  .stats4 { grid-template-columns: repeat(2, 1fr); }
  .stats4 div:last-child { text-align: left; }
  .chart-box { height: 360px; }
  .agent-loop { grid-template-columns: repeat(4, 1fr); }
  .prof-top .av { width: 72px; height: 72px; }
  .skill-grid, .opt-grid { grid-template-columns: 1fr 1fr; }
  .modal-card { box-shadow: none; border: 0; padding: 4px 0; }
  .prose h1 { font-size: 34px; }
  .loop-big { grid-template-columns: repeat(2, 1fr); }
  .cards3 { grid-template-columns: 1fr; }
}
.icon-btn svg { width: 20px; height: 20px; }
.prof-top .acts .icon-btn svg { width: 18px; height: 18px; }
.token-layout > *, .feed-layout > *, .launch-layout > * { min-width: 0; }
@media (max-width: 768px) {
  .tk-head { flex-wrap: wrap; }
  .tk-price { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 10px; }
  .tk-title h1 { font-size: 20px; }
}

/* =========================================================
   v2 - Apple-style typography, theme, Zora rail, chart, fomo profile
   ========================================================= */
html, body { background: var(--bg); }
body { font-family: var(--font); letter-spacing: -0.011em; font-feature-settings: "cv11", "ss01"; transition: background .25s, color .25s; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.022em; font-weight: 600; }
.num, .tbl-row, .stats4 b, .tk-price, .mini, .sp-mc, .kv b, .presets, .amount input { font-variant-numeric: tabular-nums; }
.num { letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
.pill { background: var(--bg-soft); color: var(--fg-3); font-weight: 500; letter-spacing: 0; }
.tab-btn { font-weight: 500; }
.tab-btn.is-active::after { height: 2px; }
::selection { background: rgba(0,113,227,.22); }

/* rail (Zora layout) */
.rail { border-right: 0; }
.rail-nav { gap: 10px; }
.rail-btn { color: var(--fg-3); width: 44px; height: 44px; }
.rail-btn:hover { color: var(--fg); }
.rail-btn.is-active { color: var(--fg); }
.rail-btn.is-active::before { display: none; }
.rail-btn.is-active .ic { stroke-width: 2.2; }
.rail-btn.is-open { box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); }
.rail-btn.is-create { background: var(--bg-soft); }
.rail-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft2); color: var(--fg-3); overflow: hidden; }
.rail-av .ic { width: 18px; height: 18px; margin-top: 6px; }
.rail-av.is-on { background: linear-gradient(135deg, hsl(var(--h), 90%, 62%), hsl(calc(var(--h) + 80), 90%, 55%)); }
.rail-av.is-on .ic { display: none; }
.rail-word { font-size: 19px; letter-spacing: -0.04em; font-weight: 700; color: var(--fg-4); background: none; -webkit-background-clip: initial; background-clip: initial; }
.rail-word:hover { color: var(--fg); }

/* top bar */
.search { background: var(--bg-soft); border-color: transparent; border-radius: 10px; }
.search:focus-within { box-shadow: 0 0 0 4px rgba(0,113,227,.14); border-color: transparent; }
.search-kbd { font-family: var(--mono); font-size: 11px; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; }

/* menu popover */
.menu-pop { position: fixed; z-index: 60; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; animation: pop .16s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.menu-sec { padding: 6px; }
.menu-sec + .menu-sec { border-top: 1px solid var(--line); }
.menu-label { font-size: 12px; color: var(--fg-3); margin: 2px 4px 8px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border-radius: 10px; color: var(--fg); font-size: 15px; }
.menu-item:hover { background: var(--bg-soft); }
.menu-item .ic { width: 20px; height: 20px; color: var(--fg-3); }
.menu-foot { display: flex; gap: 14px; font-size: 13px; color: var(--fg-3); padding: 10px 12px; }
.menu-foot a:hover { color: var(--fg); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg-soft); border-radius: 10px; padding: 3px; }
.theme-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; color: var(--fg-3); font-size: 12px; font-weight: 500; }
.theme-seg button .ic { width: 18px; height: 18px; }
.theme-seg button.is-active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.theme-seg.small { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; }
.theme-seg.small button { padding: 6px 12px; font-size: 13px; flex-direction: row; }

/* settings sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0); display: grid; place-items: center; padding: 16px; transition: background .18s; }
.sheet-wrap.show { background: rgba(0,0,0,.36); backdrop-filter: blur(4px); }
.sheet { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 8px 20px 18px; transform: translateY(12px) scale(.98); opacity: 0; transition: .18s; }
.sheet-wrap.show .sheet { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; }
.sheet-head h2 { font-size: 20px; }
.set-row, .set-block { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.set-block { flex-direction: column; align-items: stretch; }
.set-row b, .set-block b { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 500; font-size: 15px; }
.set-row small, .set-block small { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.set-row.is-soon { opacity: .65; }
.qb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qb { display: flex; align-items: center; gap: 4px; background: var(--bg-soft); border-radius: 10px; padding: 0 10px; height: 42px; }
.qb input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; }
.qb span { color: var(--fg-3); font-size: 12px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--bg-soft2); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + i { background: var(--up-strong); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:disabled { cursor: not-allowed; }

/* buttons */
.btn { font-weight: 500; letter-spacing: -0.01em; }
.btn-buy { background: var(--buy); color: var(--buy-ink); }
.btn-sell { background: var(--down) !important; color: #fff !important; }
.link-btn { color: var(--accent); font-size: 13px; }
.link-btn:hover { text-decoration: underline; }

/* explore table polish */
.tbl-row { border-color: var(--line); }
.tbl-row .v-mc { color: var(--fg); font-weight: 500; }
.tbl-pct { font-weight: 500; }

/* token page */
.tk-head .av { border-radius: 10px; width: 56px; height: 56px; }
.tk-title h1 { font-size: 22px; font-weight: 600; }
.tk-title small { gap: 8px; }
.tk-price b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.tk-price span { font-size: 14px; font-weight: 500; }
.tk-price em, .fx-value em { font-style: normal; }
.chart-card { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 0 6px; }
.chart-card.slim { margin-top: 10px; }
.lchart { color: var(--lc, var(--up-strong)); }
.lchart-plot { position: relative; height: 300px; cursor: crosshair; }
.chart-card.slim .lchart-plot { height: 220px; }
.lchart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lchart-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lchart-area { color: currentColor; }
.lchart-dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.lchart-halo { fill: currentColor; opacity: .18; animation: halo 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.8); opacity: 0; } }
.lchart-cross { stroke: var(--fg-4); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lchart-hi, .lchart-lo { position: absolute; font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.lchart-tip { position: absolute; top: 6px; background: var(--fg); color: var(--on-fg); border-radius: 8px; padding: 5px 9px; font-size: 12px; pointer-events: none; white-space: nowrap; display: flex; gap: 8px; }
.lchart-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lchart-tip span { opacity: .7; }
.lchart-state { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); font-size: 14px; }
.lchart-state a { text-decoration: underline; }
.lchart-tf { display: flex; justify-content: center; gap: 4px; padding: 4px 0 6px; }
.lchart-tf button { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.lchart-tf button:hover { color: var(--fg); }
.lchart-tf button.is-active { background: var(--bg-soft); color: var(--fg); }
.stats4 small { font-size: 11px; color: var(--fg-3); letter-spacing: .04em; font-weight: 500; }
.stats4 b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tpane { padding: 14px 0; }
.act-row { display: grid; grid-template-columns: 28px 1fr 70px 80px 50px; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; font-size: 14px; color: var(--fg); }
.act-row:hover { background: var(--bg-soft); }
.act-w { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-k { font-weight: 500; }
.act-v, .act-t { text-align: right; color: var(--fg-2); }
.act-t { color: var(--fg-3); }
.act-empty, .fx-empty { padding: 28px 12px; text-align: center; color: var(--fg-3); font-size: 14px; }
.w-av { display: block; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h), 70%, 72%), hsl(calc(var(--h) + 60), 70%, 60%)); flex: none; }
:root[data-theme="dark"] .w-av { background: linear-gradient(135deg, hsl(var(--h), 55%, 42%), hsl(calc(var(--h) + 60), 55%, 32%)); }
.tk-side .panel { border-radius: 18px; }
.trade-tabs button { border-radius: 9px; }
.trade-tabs button.is-active { background: var(--buy); color: var(--buy-ink); }
.amount { border-radius: 14px; }
.amount input { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.amount-sub { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-3); margin: 8px 2px 0; }
.amount-sub b { color: var(--fg); font-weight: 500; }
.presets button { border-radius: 10px; border-color: var(--line); font-weight: 500; }
.presets button.is-active { border-color: var(--fg); }
.pair-card .spark { display: block; }
.kv span { color: var(--fg-3); }

/* fomo-style profile */
.fx { max-width: 1240px; margin: 0 auto; }
.fx-banner { position: relative; height: 140px; border-radius: 16px; overflow: hidden; background: linear-gradient(120deg, hsl(var(--h), 70%, 88%), hsl(calc(var(--h) + 70), 70%, 86%)); }
:root[data-theme="dark"] .fx-banner { background: linear-gradient(120deg, hsl(var(--h), 40%, 14%), hsl(calc(var(--h) + 70), 40%, 12%)); }
.fx-banner img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.3); transform: scale(1.3); opacity: .75; }
.fx-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 8px; margin-top: -42px; position: relative; flex-wrap: wrap; }
.fx-av-wrap { width: 92px; height: 92px; border-radius: 50%; padding: 4px; background: var(--bg); flex: none; }
.fx-av, .fx-av-gen { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fx-av-gen { background: linear-gradient(135deg, hsl(var(--h), 90%, 62%), hsl(calc(var(--h) + 80), 90%, 55%)); }
.fx-id { flex: 1; min-width: 220px; padding-bottom: 2px; }
.fx-id h1 { font-size: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-id h1 .status { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.fx-id small { color: var(--fg-3); font-size: 14px; }
.fx-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--fg-3); }
.fx-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.fx-meta svg { width: 14px; height: 14px; }
.fx-stats { display: flex; gap: 22px; padding-bottom: 4px; }
.fx-stats div { text-align: center; }
.fx-stats b { display: block; color: var(--fg); font-size: 17px; font-weight: 600; }
.fx-stats small { color: var(--fg-3); font-size: 12px; }
.fx-acts { display: flex; gap: 6px; align-items: center; padding-bottom: 4px; }
.fx-acts .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.fx-acts .icon-btn svg, .fx-acts .icon-btn .ic { width: 17px; height: 17px; }
.fx-bio { color: var(--fg-2); font-size: 14px; margin: 14px 8px 0; max-width: 720px; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.fx-grid > * { min-width: 0; }
.fx-value { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fx-value b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.035em; color: var(--fg); line-height: 1.1; }
.fx-value span { font-size: 14px; font-weight: 500; }
.fx-cap { display: block; font-size: 12px; color: var(--fg-3); margin-bottom: 2px; }
.fx-seg { display: inline-flex; gap: 2px; background: var(--bg-soft); border-radius: 8px; padding: 2px; }
.fx-seg button { height: 26px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.fx-seg button.is-active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.fx-flat { height: 150px; display: flex; align-items: center; }
.fx-flat svg { width: 100%; height: 60px; }
.fx-cash { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin: 6px 0 14px; border-bottom: 1px solid var(--line); }
.fx-cash-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.fx-cash-ic svg { width: 22px; height: 22px; }
.fx-cash small { display: block; color: var(--fg-3); font-size: 12px; }
.fx-cash b { color: var(--fg); font-weight: 600; }
.fx-cash .spacer { flex: 1; }
.fx-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fx-card + .fx-card { margin-top: 14px; }
.fx-card-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.fx-card-head b { color: var(--fg); font-weight: 600; font-size: 14px; }
.fx-tabs { display: flex; gap: 14px; padding: 12px 12px 8px; }
.fx-tabs button { font-size: 14px; font-weight: 500; color: var(--fg-3); }
.fx-tabs button.is-active { color: var(--fg); }
.fx-thead { padding: 8px 12px; font-size: 12px; color: var(--fg-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sw-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) .7fr .8fr .9fr .6fr; gap: 8px; align-items: center; }
.pos-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 8px; }
.r { text-align: right; }
.fx-row { padding: 9px 12px; font-size: 13px; color: var(--fg); border-bottom: 1px solid var(--line); }
.fx-row:last-child { border-bottom: 0; }
.fx-row:hover { background: var(--bg-soft); }
.sw-w { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; overflow: hidden; }
.sw-w .w-av { width: 22px; height: 22px; }
.fx-posts-head { display: flex; align-items: baseline; gap: 8px; margin: 30px 0 10px; }
.fx-posts-head b { color: var(--fg); font-size: 17px; font-weight: 600; }
.fx-tiles { grid-template-columns: repeat(6, 1fr); border-radius: 12px; overflow: hidden; }

@media (max-width: 1000px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .tabbar .tab { color: var(--fg-3); }
  .tabbar .tab.is-active { color: var(--fg); }
  .lchart-plot { height: 240px; }
  .fx-banner { height: 110px; border-radius: 0; margin: -8px -14px 0; }
  .fx-head { margin-top: -36px; padding: 0; }
  .fx-av-wrap { width: 76px; height: 76px; }
  .fx-stats { order: 3; }
  .fx-acts { order: 4; margin-left: auto; }
  .fx-bio { margin: 12px 0 0; }
  .fx-value b { font-size: 30px; }
  .act-row { grid-template-columns: 26px 1fr 44px 64px 34px; gap: 8px; }
  .menu-pop { width: auto; }
  .sheet-wrap { align-items: end; padding: 0; }
  .sheet { border-radius: 22px 22px 0 0; max-width: none; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .qb-grid { grid-template-columns: repeat(2, 1fr); }
}
[hidden] { display: none !important; }
.tk-title small .status { text-transform: none; }
.rail-word { font-size: 16px; }
.fx-head { margin-top: 0; align-items: flex-start; padding-top: 12px; }
.fx-av-wrap { margin-top: -56px; }
.fx-id { padding-top: 2px; }
.fx-stats, .fx-acts { padding-top: 6px; }
@media (max-width: 768px) {
  .fx-head { margin-top: 0; }
  .fx-av-wrap { margin-top: -46px; }
}
body.no-pct .col-pct, body.no-pct .m-pct, body.no-pct .tbl-head > :last-child { visibility: hidden; }
.text-area, .inp { background: var(--surface); color: var(--fg); }
.text-area::placeholder, .inp::placeholder { color: var(--fg-4); }

/* ---------- v3: premium category chips (Zora-style) ---------- */
.chips-row { gap: 12px; margin: 4px 0 18px; }
.chips-scroll { gap: 2px; }
.chip { height: 40px; padding: 0 14px 0 8px; gap: 9px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; background: transparent; color: var(--fg); border-radius: 999px; transition: background .15s, opacity .15s; }
.chip:hover { background: var(--bg-soft); }
.chip.is-active { background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.orb {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 38%),
    linear-gradient(145deg, hsl(var(--a), 92%, 62%), hsl(var(--b), 88%, 42%));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.18);
}
.orb svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.orb-all { background: radial-gradient(circle at 32% 26%, #fff 0, rgba(255,255,255,0) 40%), conic-gradient(from 210deg, #c6ff3d, #2bff88, #00c2ff, #7b2bff, #ff3bc8, #c6ff3d); }
.cat-all { position: relative; flex: none; }
.chip-all { height: 40px; padding: 0 12px 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); background: var(--bg-soft); }
.chip-all:hover { background: var(--bg-soft2); }
.cat-pop { position: absolute; top: 48px; left: 0; z-index: 40; width: 220px; max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; animation: pop .16s ease-out; }
.cat-pop button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font-weight: 500; color: var(--fg); font-size: 15px; }
.cat-pop button:hover { background: var(--bg-soft); }
.cat-pop button.is-active { background: var(--bg-soft); }
.chips-sep { height: 26px; }
.fab { width: 52px; height: 52px; box-shadow: var(--shadow); }
@media (max-width: 768px) {
  .chip, .chip-all { height: 36px; font-size: 15px; }
  .orb { width: 24px; height: 24px; }
}

/* ---------- v5: launch flow ---------- */
.fee-split { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 4px 0 16px; background: var(--surface-2); }
.fs-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; margin: 4px 0 10px; }
.fs-bar i { display: block; }
.fs-0 { background: linear-gradient(90deg, #2bff88, #00c2ff); }
.fs-1 { background: linear-gradient(90deg, #00c2ff, #7b2bff); }
.fs-2 { background: var(--fg-4); }
.fs-row { display: grid; grid-template-columns: 10px auto 1fr auto; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 14px; }
.fs-row b { color: var(--fg); font-weight: 500; }
.fs-row small { color: var(--fg-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-row .num { color: var(--fg); font-weight: 600; }
.fs-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.act-2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.pv-bio { margin-top: 8px; font-size: 13px; color: var(--fg-2); line-height: 1.5; max-height: 9em; overflow: auto; }
.hatch-sheet { text-align: center; padding: 26px 24px 22px; }
.hatch-sheet h2 { font-size: 22px; margin-top: 12px; }
.hatch-orb { display: flex; justify-content: center; }
.hatch-orb .logo-mark { animation: wobble 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(0,120,255,.35)); }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.steps { list-style: none; padding: 0; margin: 18px auto 6px; text-align: left; max-width: 300px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--fg-4); font-size: 15px; }
.steps li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; position: relative; }
.steps li.now { color: var(--fg); font-weight: 500; }
.steps li.now i { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.steps li.done { color: var(--fg-2); }
.steps li.done i { background: var(--up-strong); border-color: var(--up-strong); }
.steps li.done i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.hatch-err { color: var(--down); font-size: 14px; margin: 10px 0 14px; }
.presets button.is-active { border-color: var(--fg); }

/* rail bottom: X link */
.rail-x { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: transform .2s, filter .2s; }
.rail-x img { width: 36px; height: 36px; border-radius: 50%; filter: drop-shadow(0 4px 10px rgba(0, 120, 255, .25)); }
.rail-x:hover { transform: scale(1.08) rotate(-6deg); }

/* =========================================================
   v6 - accounts, auth modal, wallet panel, messages,
   notifications, settings (Zora / Privy look)
   ========================================================= */
.hide-xs {}
@media (max-width: 420px) { .hide-xs { display: none !important; } }

/* avatars for people */
.u-av { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-soft2); flex: none; }
.u-av-gen { background: linear-gradient(135deg, hsl(var(--h), 90%, 64%), hsl(calc(var(--h) + 80), 90%, 54%)); }
.u-av.sm { width: 28px; height: 28px; }
.u-av.md { width: 44px; height: 44px; }
.u-av.lg { width: 56px; height: 56px; }
.u-av.xl { width: 88px; height: 88px; }
.u-av.fill { width: 100%; height: 100%; }
.rail-av .u-av { width: 100%; height: 100%; }
.rail-av.is-on { background: none; }

/* unread badges */
.rail-btn, .tab, .top-msg { position: relative; }
.badge { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff2d55; color: #fff; font: 600 10px/17px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.tab .badge { top: 8px; right: calc(50% - 20px); }

/* top bar + menu account block */
.top-auth { display: flex; gap: 8px; align-items: center; }
.menu-acct:empty { display: none; }
.menu-me { display: flex; align-items: center; gap: 12px; padding: 6px 8px 10px; border-radius: 12px; }
.menu-me:hover { background: var(--bg-soft); }
.menu-me .u-av { width: 40px; height: 40px; }
.menu-me b { display: block; font-size: 15px; font-weight: 600; }
.menu-me small { color: var(--fg-3); font-size: 13px; }
.menu-item em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--fg-3); font-family: var(--mono); }
.menu-acct .btn-block { height: 42px; border-radius: 12px; }

/* buttons */
.btn-blue { background: #0a84ff; color: #fff; }
.btn-blue:hover { filter: brightness(1.06); }
.btn.is-following { color: var(--fg-2); }
.btn.danger { color: var(--down); }
.btn.danger-fill { background: var(--down); color: #fff; }
.link-btn.mono { font-family: var(--mono); font-size: 12px; }
button.link { color: var(--accent); font-weight: 500; }

/* ---------- shared modal (om) ---------- */
.om-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0); transition: background .18s; }
.om-wrap.show { background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.om { width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 14px 20px 20px; transform: translateY(10px) scale(.985); opacity: 0; transition: .18s; scrollbar-width: none; }
.om-wrap.show .om { transform: none; opacity: 1; }
:root[data-theme="dark"] .om { border: 1px solid var(--line); }
.om-top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.om-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-3); }
.om-ic:hover { background: var(--bg-soft); color: var(--fg); }
.om-ic svg, .om-ic .ic { width: 18px; height: 18px; }
.om-head { text-align: center; padding: 4px 6px 18px; }
.om-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.om-head p { margin: 8px 0 0; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.om-head p b { color: var(--fg); font-weight: 500; }
.om-logo { width: 64px; height: 64px; margin: 6px auto 16px; display: block; }
.om-badge { width: 56px; height: 56px; border-radius: 16px; margin: 4px auto 14px; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg); }
.om-badge svg, .om-badge .ic { width: 26px; height: 26px; }
.om-badge.ok { background: rgba(52,199,89,.14); color: var(--up); }
.om-sub { text-align: center; color: var(--fg-3); font-size: 14px; margin: -8px 0 16px; line-height: 1.45; }
.om-sub b { color: var(--fg); font-weight: 600; }
.om-label { font-size: 12px; font-weight: 600; color: var(--fg-3); margin: 14px 2px 6px; }

.om-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px 0 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--fg); font-size: 15px; font-weight: 500; text-align: left; transition: border-color .15s, background .15s; }
.om-row + .om-row, .om-row + .om-err, .om-email + .om-row { margin-top: 10px; }
button.om-row:hover, a.om-row:hover, .om-google:hover { border-color: var(--fg-3); background: var(--bg-softer); }
.om-row-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg-2); flex: none; }
.om-row-ic svg { width: 18px; height: 18px; }
.om-google .om-row-ic { background: none; }
.om-email input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-weight: 400; color: var(--fg); height: 54px; }
.om-email input::placeholder { color: var(--fg-4); }
.om-email:focus-within { border-color: var(--fg); }
.om-submit { font-weight: 600; font-size: 14px; color: var(--fg-4); padding: 6px 4px; }
.om-submit.on { color: var(--accent); }
.om-gbtn { position: absolute; inset: 0; opacity: .001; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.om-gbtn > div, .om-gbtn iframe { width: 100% !important; height: 100% !important; transform: scale(1.25); }
.om-row.is-busy, .om-code.is-busy, .om-av.is-busy { opacity: .55; pointer-events: none; }
.om-err { color: var(--down); font-size: 13px; text-align: center; margin: 10px 0 0; }
.om-fine { text-align: center; color: var(--fg-4); font-size: 12px; margin: 18px 0 0; }
.om-fine a { text-decoration: underline; }
.om-protected { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; color: var(--fg-3); font-size: 12px; }
.om-protected img { width: 14px; height: 14px; }
.om-protected b { color: var(--fg-2); font-weight: 600; }

.om-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 320px; margin: 0 auto; }
.om-code input { width: 100%; min-width: 0; padding: 0; height: 54px; border: 1px solid var(--line-2); border-radius: 12px; text-align: center; font: 600 22px var(--font); color: var(--fg); background: var(--surface); outline: 0; caret-color: var(--accent); }
.om-code input:focus { border-color: var(--fg); }
.om-code.shake { animation: omShake .35s; }
@keyframes omShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.om-resend { text-align: center; color: var(--fg-3); font-size: 13px; margin: 18px 0 4px; }
.om-resend button { color: var(--accent); font-weight: 500; }
.om-resend button:disabled { color: var(--fg-4); }

.om-form { display: grid; gap: 14px; }
.om-field { display: grid; gap: 6px; }
.om-field > span { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.om-input { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.om-input:focus-within { border-color: var(--fg); }
.om-input input, .om-input select, .om-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--fg); height: 100%; }
.om-input.ta { height: auto; padding: 10px 12px; }
.om-input textarea { resize: vertical; min-height: 70px; line-height: 1.4; }
.om-input.at i { font-style: normal; color: var(--fg-3); }
.om-input.is-ro { background: var(--bg-soft); }
.om-input.is-ro input { color: var(--fg-3); }
.om-max { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 7px; background: var(--bg-soft); color: var(--fg-2); }
.om-hint { font-size: 12px; color: var(--fg-3); }
.om-hint.good { color: var(--up); }
.om-hint.bad { color: var(--down); }
.om-avpick { position: relative; width: 88px; height: 88px; margin: 0 auto 4px; cursor: pointer; display: block; }
.om-av { display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; }
.om-avedit { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--on-fg); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.om-avedit .ic { width: 16px; height: 16px; }
.om-list { display: grid; gap: 10px; }
.om-list .om-row + .om-row { margin-top: 0; }
.om-wallet em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--fg-3); font-weight: 500; }
.wl-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg); flex: none; overflow: hidden; font-size: 12px; font-weight: 700; object-fit: cover; }
.wl-ic svg { width: 20px; height: 20px; }
.wl-ic.sol svg { width: 20px; height: 20px; }
.om-pick span:not(.wl-ic) { flex: 1; display: grid; }
.om-pick small { font-size: 12px; color: var(--fg-3); font-weight: 400; margin-top: 1px; }
.om-pick > .ic { width: 16px; height: 16px; color: var(--fg-4); }
.om-skip { display: block; margin: 16px auto 0; color: var(--fg-3); font-size: 14px; font-weight: 500; }
.om-skip:hover { color: var(--fg); }
.om-done { text-align: center; padding: 0 4px 4px; }
.om-done .u-av { margin: 0 auto 14px; }
.om-done h2 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
.om-done p { color: var(--fg-3); margin: 8px 0 20px; font-size: 14px; }
.om-done-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.om-done-btns .btn { height: 46px; font-size: 15px; }
.om-confirm .st-row-btns { justify-content: flex-end; }

/* ---------- wallet panel ---------- */
.om-wallet { max-width: 420px; }
.wp-brand { font-size: 13px; font-weight: 600; color: var(--fg-3); padding-left: 4px; }
.wp-id { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 4px 0; }
.wp-id b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.wp-id small { color: var(--fg-3); font-size: 13px; }
.wp-addr { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--fg-3); font: 12px var(--mono); }
.wp-addr .ic { width: 13px; height: 13px; }
.wp-addr:hover { color: var(--fg); }
.wp-value { text-align: center; margin: 14px 0 18px; }
.wp-value small { color: var(--fg-3); font-size: 13px; }
.wp-value b { display: block; font-size: 38px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }
.wp-sk { display: inline-block; width: 110px; height: 36px; }
.wp-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wp-acts button { height: 66px; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--fg); transition: background .15s; }
.wp-acts button:hover { background: var(--bg-soft2); }
.wp-acts .ic { width: 20px; height: 20px; }
.wp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px -20px 0; border-bottom: 1px solid var(--line); }
.wp-tabs button { height: 42px; font-size: 14px; font-weight: 500; color: var(--fg-3); position: relative; }
.wp-tabs button.is-active { color: var(--fg); }
.wp-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.wp-body { min-height: 180px; padding-top: 6px; }
.wp-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-radius: 10px; }
a.wp-row:hover { background: var(--bg-softer); }
.wp-tok { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bg-soft); font-size: 11px; font-weight: 700; color: var(--fg-2); object-fit: cover; overflow: hidden; }
.wp-tok svg { width: 22px; height: 22px; }
.wp-tok.act .ic { width: 16px; height: 16px; }
.wp-tok.bad { color: var(--down); }
.wp-nm { flex: 1; min-width: 0; display: grid; font-size: 15px; font-weight: 500; }
.wp-nm small { font-size: 12.5px; color: var(--fg-3); font-weight: 400; margin-top: 1px; font-family: var(--font); }
.wp-v { font-size: 15px; font-weight: 500; color: var(--fg); }
.wp-v .ic { width: 15px; height: 15px; color: var(--fg-4); }
.wp-st { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg-soft); color: var(--fg-3); }
.wp-st.live, .wp-st.created { background: rgba(52,199,89,.14); color: var(--up); }
.wp-st.failed { background: rgba(255,59,48,.12); color: var(--down); }
.wp-note { text-align: center; color: var(--fg-3); font-size: 14px; padding: 22px 8px; }
.wp-note a:not(.btn) { color: var(--accent); }
.wp-empty { text-align: center; padding: 18px 4px 4px; }
.wp-empty h3 { margin: 0; font-size: 18px; }
.wp-empty p { color: var(--fg-3); font-size: 14px; margin: 8px 0 18px; line-height: 1.45; }
.wp-qr { display: grid; place-items: center; margin: 4px 0 16px; }
.wp-qr-box { width: 208px; height: 208px; padding: 12px; background: #fff; border-radius: 18px; border: 1px solid var(--line); display: grid; place-items: center; }
.wp-qr-box img, .wp-qr-box canvas { width: 184px !important; height: 184px !important; }
.wp-addr-big { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); text-align: left; margin-bottom: 12px; }
.wp-addr-big span { flex: 1; word-break: break-all; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.wp-addr-big .ic { width: 16px; height: 16px; color: var(--fg-3); flex: none; }

/* ---------- empty states ---------- */
.empty-state { text-align: center; padding: 64px 16px; display: grid; justify-items: center; }
.empty-state h2 { font-size: 18px; font-weight: 600; margin: 14px 0 0; letter-spacing: -0.01em; }
.empty-state p { color: var(--fg-3); font-size: 14px; margin: 6px 0 18px; max-width: 340px; line-height: 1.45; }
.es-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg); }
.es-ic svg, .es-ic .ic { width: 24px; height: 24px; }
.es-pink { background: #ff2bd6; color: #fff; }
.es-blue { background: none; color: var(--fg); }
.es-blue .ic { width: 30px; height: 30px; }

/* ---------- messages ---------- */
body.page-full .main { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.dm { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--top) - 16px); margin-top: -16px; border-top: 1px solid var(--line); }
.dm-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 10px; }
.dm-search { display: flex; gap: 6px; align-items: center; }
.dm-sbox { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--bg-soft); color: var(--fg-3); }
.dm-sbox .ic { width: 16px; height: 16px; }
.dm-sbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--fg); }
.dm-sbox.big { height: 44px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-2); }
.dm-title { display: flex; justify-content: space-between; align-items: center; margin: 16px 6px 8px; gap: 8px; }
.dm-title h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
.dm-seg { display: flex; gap: 2px; }
.dm-seg button { font-size: 13px; color: var(--fg-3); font-weight: 500; padding: 5px 8px; border-radius: 8px; }
.dm-seg button.is-active { color: var(--fg); background: var(--bg-soft); }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.dm-row:hover { background: var(--bg-softer); }
.dm-row.is-active { background: var(--bg-soft); }
.dm-row-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dm-row-txt b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row-txt b small { color: var(--fg-3); font-weight: 400; font-size: 13px; }
.dm-row-txt > span { font-size: 13.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row-meta { display: grid; justify-items: end; gap: 4px; align-self: flex-start; padding-top: 3px; }
.dm-row-meta small { color: var(--fg-4); font-size: 12px; }
.dm-row-meta .dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #0a84ff; color: #fff; font: 600 11px/18px var(--font); font-style: normal; text-align: center; }
.dm-empty-list { color: var(--fg-3); font-size: 14px; text-align: center; padding: 30px 10px; }
.dm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-softer); }
.dm-thread > .empty-state { margin: auto; }
.dm-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.dm-peer { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dm-peer b { font-size: 15px; font-weight: 600; }
.dm-peer small { color: var(--fg-3); font-size: 13px; }
.dm-back { display: none; }
.dm-msgs { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.msg-day { align-self: center; font-size: 12px; color: var(--fg-4); margin: 12px 0 6px; }
.msg { max-width: min(72%, 520px); align-self: flex-start; display: grid; }
.msg p { margin: 0; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.38; word-wrap: break-word; white-space: normal; }
.msg small { font-size: 11px; color: var(--fg-4); margin: 3px 8px 6px; }
.msg.mine { align-self: flex-end; justify-items: end; }
.msg.mine p { background: #0a84ff; color: #fff; border-color: transparent; border-radius: 18px 18px 6px 18px; }
.msg.sending { opacity: .6; }
.msg.failed p { background: var(--down); }
.msg.failed small { color: var(--down); }
.dm-hello { margin: auto; display: grid; justify-items: center; text-align: center; gap: 2px; }
.dm-hello .u-av { margin-bottom: 10px; }
.dm-hello b { font-size: 17px; }
.dm-hello small { color: var(--fg-3); }
.dm-hello p { color: var(--fg-3); font-size: 14px; margin: 10px 0 0; }
.dm-compose { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 16px; background: var(--surface); border-top: 1px solid var(--line); flex: none; }
.dm-compose textarea { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: 20px; padding: 10px 16px; font: inherit; font-size: 15px; line-height: 1.35; color: var(--fg); background: var(--bg-softer); outline: 0; max-height: 140px; }
.dm-compose textarea:focus { border-color: var(--fg-3); }
.dm-send { width: 42px; height: 42px; border-radius: 50%; background: #0a84ff; color: #fff; display: grid; place-items: center; flex: none; }
.dm-send .ic { width: 18px; height: 18px; margin-left: -2px; }
.nu-res { min-height: 260px; }
.nu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 6px; border-radius: 12px; text-align: left; }
.nu-row:hover { background: var(--bg-soft); }
.nu-row b { display: block; font-size: 15px; }
.nu-row small { color: var(--fg-3); font-size: 13px; }
.nu-none { text-align: center; color: var(--fg-3); font-size: 14px; padding: 18px 0; }
@media (max-width: 768px) {
  .dm { grid-template-columns: 1fr; height: calc(100vh - var(--top) - var(--tabbar) - 8px); margin-top: -8px; }
  .dm.has-peer .dm-list { display: none; }
  .dm:not(.has-peer) .dm-thread { display: none; }
  .dm-back { display: grid; margin-left: -8px; }
  .dm-head .btn { display: none; }
  .msg { max-width: 84%; }
}

/* ---------- notifications ---------- */
.nt-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 14px; }
.nt-head h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.nt-head .icon-btn { border-radius: 50%; }
.nt-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.nt-tabs button { position: relative; padding: 8px 0 10px; font-size: 14px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.nt-tabs button.is-active { color: var(--fg); }
.nt-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.nt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; border-radius: 12px; text-align: left; color: var(--fg); }
a.nt-row:hover, button.nt-row:hover { background: var(--bg-softer); }
.nt-txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; display: grid; }
.nt-txt b { font-weight: 600; }
.nt-txt small { color: var(--fg-4); font-size: 12px; margin-top: 2px; }
.nt-txt .muted, .muted { color: var(--fg-3); }
.nt-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg); flex: none; }
.nt-ic .ic { width: 20px; height: 20px; }
.nt-ic.t-welcome { background: var(--grad); color: #0a0a0a; }
.nt-ic.t-wallet { background: rgba(10,132,255,.12); color: #0a84ff; }
.nt-ic.t-launch { background: rgba(52,199,89,.14); color: var(--up); }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; flex: none; }

/* ---------- settings ---------- */
.st h1 { font-size: 32px; margin: 6px 0 16px; letter-spacing: -0.03em; }
.st-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.st-tabs button { position: relative; padding: 8px 0 10px; font-size: 14.5px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.st-tabs button.is-active { color: var(--fg); }
.st-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.st-body { display: grid; gap: 22px; max-width: 460px; }
.st-form { display: grid; gap: 18px; justify-items: start; }
.st-form > * { width: 100%; }
.st-form > .btn { width: auto; }
.st-field { display: grid; gap: 7px; }
.st-field > span { font-size: 14px; font-weight: 600; }
.st-field > small { color: var(--fg-3); font-size: 12.5px; line-height: 1.4; }
.st-wallet { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 12px; border-radius: 12px; background: var(--bg-soft); }
.st-wallet span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--fg-2); }
.st-wallet .icon-btn { width: 34px; height: 34px; }
.st-wallet .ic { width: 16px; height: 16px; }
.st-row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.st-row-btns.end { justify-content: flex-end; }
.st-sep { height: 1px; background: var(--line); }
.st-av { display: flex; align-items: center; gap: 16px; }
.st-av .om-avpick { margin: 0; }
.st-av b { display: block; font-size: 15px; }
.st-av small { color: var(--fg-3); font-size: 13px; }
.st .set-row, .st .set-block { padding: 14px 0; border-bottom: 1px solid var(--line); }

/* ---------- profile (people) ---------- */
.fx-av-wrap > .u-av { width: 100%; height: 100%; }
.fx-bio.muted a { color: var(--accent); }
.ag-row { display: flex !important; align-items: center; gap: 12px; }
.ag-row > span:nth-child(2) { flex: 1; display: grid; }
.ag-row b { font-size: 14.5px; font-weight: 600; }
.ag-row small { color: var(--fg-3); font-size: 12.5px; }
.ag-row .ic { width: 16px; height: 16px; }
.w-av.lg { width: 36px; height: 36px; object-fit: cover; }
img.w-av { object-fit: cover; }
.tk-follow { align-self: center; }

/* ---------- misc ---------- */
.seg button.is-soon { color: var(--fg-4); cursor: not-allowed; }
.seg button.is-soon em { font-style: normal; font-size: 10px; font-weight: 600; margin-left: 3px; padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); color: var(--fg-3); }
.more-pop { position: fixed; z-index: 60; min-width: 200px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.more-pop a, .more-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--fg); text-align: left; }
.more-pop a:hover, .more-pop button:hover { background: var(--bg-soft); }
.more-pop svg { width: 16px; height: 16px; color: var(--fg-3); }
.sw-w svg { width: 22px; height: 22px; flex: none; }
.fx-row .sw-w { display: inline-flex; align-items: center; gap: 8px; }

/* v7 - profile cover */
.st-cover { position: relative; display: block; height: 132px; border-radius: 14px; overflow: hidden; cursor: pointer; background: linear-gradient(120deg, hsl(var(--h), 70%, 88%), hsl(calc(var(--h) + 70), 70%, 86%)); }
:root[data-theme="dark"] .st-cover { background: linear-gradient(120deg, hsl(var(--h), 40%, 18%), hsl(calc(var(--h) + 70), 40%, 14%)); }
.st-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-cover-btn { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 500; backdrop-filter: blur(6px); }
.st-cover-btn .ic { width: 14px; height: 14px; }
.st-cover-btn em { font-style: normal; }
.st-cover.is-busy { opacity: .55; pointer-events: none; }
.danger-link { color: var(--down) !important; margin-left: 6px; font-size: 12.5px; }
.fx-banner.is-cover img { filter: none; transform: none; opacity: 1; }
.fx-banner-edit { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s; }
.fx-banner:hover .fx-banner-edit { opacity: 1; }
.fx-banner-edit .ic { width: 16px; height: 16px; }
@media (hover: none) { .fx-banner-edit { opacity: 1; } }

/* v8 - How it works */
.hiw { max-width: 1040px; margin: 0 auto; padding: 8px 0 40px; color: var(--fg); }
.hiw-hero { padding: 48px 0 56px; border-bottom: 1px solid var(--line); }
.hiw-eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.hiw-hero h1 { margin: 20px 0 0; font-size: clamp(44px, 7vw, 88px); line-height: .95; letter-spacing: -0.055em; font-weight: 600; }
.hiw-hero p { max-width: 560px; margin: 24px 0 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--fg-2); letter-spacing: -0.01em; }
.hiw-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.hiw-sec { padding: 72px 0; border-bottom: 1px solid var(--line); }
.hiw-head { display: flex; align-items: baseline; gap: 18px; }
.hiw-n { font: 500 13px/1 var(--mono); color: var(--fg-4); flex: none; width: 28px; }
.hiw-head h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.hiw-lead { max-width: 620px; margin: 18px 0 0 46px; font-size: 18px; line-height: 1.5; color: var(--fg-2); }

.hiw-steps { list-style: none; padding: 0; margin: 40px 0 0 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.hiw-steps li { background: var(--surface); padding: 24px 22px 26px; display: grid; align-content: start; gap: 10px; }
.hiw-k { font: 500 12px/1 var(--mono); color: var(--fg-4); }
.hiw-steps b { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; margin-top: 18px; }
.hiw-steps p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg-3); }

.hiw-loop { list-style: none; padding: 0; margin: 44px 0 0 46px; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.hiw-loop::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 2px; background: var(--grad); opacity: .9; }
.hiw-loop li { position: relative; padding-right: 14px; }
.hiw-node { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); position: relative; z-index: 1; }
.hiw-loop li:nth-child(odd) .hiw-node { border-color: var(--violet); }
.hiw-loop li:nth-child(even) .hiw-node { border-color: var(--cyan); }
.hiw-loop b { display: block; margin-top: 18px; font-size: 17px; letter-spacing: -0.02em; font-weight: 600; }
.hiw-loop p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-3); }

.hiw-fees { margin: 40px 0 0 46px; }
.hiw-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.hiw-bar i { display: block; }
.seg-agent { background: linear-gradient(90deg, #00c2ff, #2bff88); }
.seg-creator { background: linear-gradient(90deg, #7b2bff, #b26bff); }
.seg-platform { background: linear-gradient(90deg, #c6ff3d, #e8ff9a); }
.hiw-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px; }
.hiw-share b { display: block; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.05em; font-weight: 600; }
.hiw-share span { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 600; }
.hiw-share .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hiw-share small { display: block; margin-top: 6px; font-size: 14px; color: var(--fg-3); line-height: 1.4; }
.hiw-fine { margin: 26px 0 0 46px; font-size: 13px; color: var(--fg-4); }

.hiw-states { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 0 46px; }
.hiw-state { border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px; background: var(--surface); }
.hiw-state .status { font-size: 14px; font-weight: 600; color: var(--fg); }
.hiw-state p { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--fg-2); }

.hiw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.hiw-two .hiw-lead { font-size: 17px; }

.hiw-faq { margin: 32px 0 0 46px; border-top: 1px solid var(--line); }
.hiw-faq details { border-bottom: 1px solid var(--line); }
.hiw-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.hiw-faq summary::-webkit-details-marker { display: none; }
.hiw-faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--fg-3); transition: transform .2s; }
.hiw-faq details[open] summary::after { transform: rotate(45deg); }
.hiw-faq p { margin: -6px 0 20px; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }

.hiw-end { padding: 88px 0 24px; text-align: center; }
.hiw-end h2 { margin: 0 0 28px; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.05em; line-height: 1; font-weight: 600; }

@media (max-width: 900px) {
  .hiw-steps { grid-template-columns: 1fr 1fr; }
  .hiw-loop { grid-template-columns: 1fr; gap: 22px; padding-left: 28px; }
  .hiw-loop::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, #00c2ff, #7b2bff, #c6ff3d); }
  .hiw-loop li { padding: 0; }
  .hiw-node { position: absolute; left: -28px; top: 3px; }
  .hiw-loop b { margin-top: 0; }
  .hiw-two { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 640px) {
  .hiw-hero { padding: 24px 0 40px; }
  .hiw-sec { padding: 52px 0; }
  .hiw-lead, .hiw-steps, .hiw-loop, .hiw-fees, .hiw-fine, .hiw-states, .hiw-faq { margin-left: 0; }
  .hiw-loop { padding-left: 28px; }
  .hiw-steps { grid-template-columns: 1fr; }
  .hiw-split { grid-template-columns: 1fr; gap: 20px; }
  .hiw-states { grid-template-columns: 1fr; }
  .hiw-head { gap: 12px; }
}

/* ===================== v9 - live agents: posts, replies, treasury ===================== */
.ap-list { display: flex; flex-direction: column; }
.apost { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.apost:first-child { padding-top: 4px; }
.ap-av .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ap-main { min-width: 0; }
.ap-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ap-who { color: var(--fg); font-weight: 600; font-size: 15px; }
.ap-meta { color: var(--fg-3); font-size: 13px; }
.ap-ai { margin-left: auto; font: 600 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; padding: 4px 6px; border-radius: 6px;
  color: var(--fg-2); background: var(--bg-soft); }
.ap-body { margin: 6px 0 0; color: var(--fg); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-sys { color: var(--fg-2); font-size: 14px; }
.ap-sys .status { margin-right: 4px; color: var(--fg); font-weight: 500; }
.ap-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-softer); color: var(--fg); font-size: 13px; font-weight: 500; }
.ap-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-4); }
.ap-chip.k-buyback i, .ap-chip.k-dca i { background: var(--up); }
.ap-chip.k-burn i { background: #ff6a00; }
.ap-chip.k-airdrop i, .ap-chip.k-jackpot i { background: #8b5cf6; }
a.ap-chip[href]:hover { border-color: var(--fg-4); }
.ap-foot { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.ap-act { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 13px; font-weight: 500; }
.ap-act:hover { color: var(--fg); }
.ap-act svg { width: 16px; height: 16px; }
.ap-foot .spacer { flex: 1; }
.apost.is-sys .ap-av .av { filter: saturate(.6); }
.ap-empty { padding: 56px 16px; }
.fx-live { margin-bottom: 28px; }
.fx-live .apost { padding-left: 0; padding-right: 0; }

/* replies */
.cm-form { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.cm-form textarea { resize: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); padding: 8px 12px;
  font: inherit; font-size: 14px; line-height: 1.4; min-height: 38px; }
.cm-form textarea:focus { outline: none; border-color: var(--fg-3); }
.cm-scope { padding: 10px 0 0; font-size: 13px; color: var(--fg-3); }
.cm { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cm-head { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--fg-3); flex-wrap: wrap; }
.cm-head b { color: var(--fg); font-weight: 600; font-size: 14px; }
.cm-del { margin-left: auto; font-size: 12px; color: var(--fg-3); }
.cm p { margin: 4px 0 0; color: var(--fg); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* treasury */
.tre { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; }
.tre-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tre-mode .status { color: var(--fg); font-weight: 600; font-size: 14px; }
.tre-mode small { color: var(--fg-3); font-size: 12px; }
.tre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tre-grid small { display: block; color: var(--fg-3); font-size: 12px; margin-bottom: 2px; }
.tre-grid b { font-size: 15px; font-weight: 600; color: var(--fg); }
.tre-link { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--fg-3); }
.tre-warn { margin: 12px 0 0; font-size: 13px; color: #b26b00; }
.mv-k { font-size: 13px; font-weight: 600; color: var(--fg); min-width: 84px; }
.mv-k.k-buyback, .mv-k.k-dca { color: var(--up); }
.mv-k.k-burn { color: #ff6a00; }
.mv-k.k-airdrop, .mv-k.k-jackpot { color: #8b5cf6; }
.mv-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; }
.skill.is-soon { opacity: .55; cursor: default; }
.skill b em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.trade-tabs + .amount .unit { white-space: nowrap; }
@media (max-width: 640px) {
  .tre-grid { grid-template-columns: 1fr 1fr; }
  .apost { grid-template-columns: 36px 1fr; gap: 10px; }
  .ap-av .av { width: 36px; height: 36px; }
  .ap-foot .btn { display: none; }
}
.act-row.mv-row { grid-template-columns: 96px 1fr auto; }
.act-row.mv-row .act-w em { font-style: normal; margin-left: 6px; }
/* coins not launched through Ovi */
.status.ext { font-size: 11px; font-weight: 500; color: var(--fg-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.status.ext::before { display: none; }
.src-tag { font-size: 11px; font-weight: 500; font-style: normal; color: var(--fg-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* ===================== v10 - feed trending strip ===================== */
.trend { margin-bottom: 22px; }
.trend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.trend-head b { font-size: 15px; font-weight: 600; color: var(--fg); }
.trend-nav { display: flex; gap: 6px; }
.trend-nav .icon-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--fg); font-size: 18px; line-height: 1; }
.trend-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.trend-row::-webkit-scrollbar { display: none; }
.trend-card { flex: 0 0 248px; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: var(--bg-soft); color: var(--fg); min-width: 0; transition: background .15s; }
.trend-card:hover { background: var(--bg-soft2); }
.trend-card.sk { height: 64px; }
.trend-card .tc-av { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; }
.tc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-main b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-v { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tc-spark { flex: none; width: 64px; height: 26px; }
.tc-spark svg { display: block; }
@media (max-width: 640px) { .trend-card { flex-basis: 220px; } .trend-nav { display: none; } }
.launch-title { margin-bottom: 18px; }
.launch-title h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.launch-title p { margin: 4px 0 0; color: var(--fg-3); font-size: 14px; }

/* ===================== v11 — profiles polish ===================== */
.fx-stat-btn { display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.fx-stat-btn:hover small { color: var(--fg); }
.fx-banner.is-mesh {
  background:
    radial-gradient(60% 120% at 12% 20%, hsl(var(--h) 95% 70% / .85), transparent 60%),
    radial-gradient(50% 110% at 88% 30%, hsl(calc(var(--h) + 80) 95% 65% / .8), transparent 60%),
    radial-gradient(70% 140% at 55% 110%, hsl(calc(var(--h) + 160) 90% 70% / .75), transparent 60%),
    linear-gradient(120deg, hsl(var(--h) 60% 92%), hsl(calc(var(--h) + 60) 60% 90%));
}
:root[data-theme="dark"] .fx-banner.is-mesh {
  background:
    radial-gradient(60% 120% at 12% 20%, hsl(var(--h) 80% 40% / .8), transparent 60%),
    radial-gradient(50% 110% at 88% 30%, hsl(calc(var(--h) + 80) 80% 38% / .75), transparent 60%),
    radial-gradient(70% 140% at 55% 110%, hsl(calc(var(--h) + 160) 70% 35% / .7), transparent 60%),
    linear-gradient(120deg, hsl(var(--h) 40% 12%), hsl(calc(var(--h) + 60) 40% 10%));
}
.fx-banner.is-mesh::after { content: attr(data-tick); position: absolute; right: 22px; bottom: -14px; font-size: 96px; font-weight: 700;
  letter-spacing: -0.05em; color: rgba(255,255,255,.28); line-height: 1; pointer-events: none; }
.fl-list { max-height: 60vh; overflow-y: auto; padding: 4px 0 8px; }
.fl-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 12px; color: var(--fg); }
.fl-row:hover { background: var(--bg-soft); }
.fl-row .av-md, .fl-row .u-av.md { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fl-nm { display: flex; flex-direction: column; min-width: 0; }
.fl-nm b { font-weight: 600; font-size: 15px; }
.fl-nm small { color: var(--fg-3); font-size: 13px; }
@media (max-width: 640px) { .fx-banner.is-mesh::after { font-size: 64px; bottom: -8px; } }

/* ===================== v12 — live trades strip ===================== */
.lt { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 0 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden; }
.lt[hidden] { display: none; }
.lt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px rgba(31,191,74,.15); animation: pulse 2s infinite; }
.lt-track { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
.lt-run { display: flex; gap: 8px; width: max-content; animation: lt-scroll 60s linear infinite; }
.lt:hover .lt-run { animation-play-state: paused; }
@keyframes lt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--fg-2); font-size: 13px; white-space: nowrap; }
.lt-chip:hover { background: var(--bg-soft2); }
.lt-chip b { color: var(--fg); font-weight: 600; }
.lt-chip .w-av { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.lt-chip .up { color: var(--up); font-weight: 500; }
.lt-chip .down { color: var(--down); font-weight: 500; }
.lt-chip .muted { color: var(--fg-3); }
.lt-profile { margin: 14px 0 6px; }
@media (prefers-reduced-motion: reduce) { .lt-run { animation: none; } .lt-track { overflow-x: auto; } }
.post-foot .stat[hidden] { display: none; }

/* v13 launch: resume unfinished draft */
.resume-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); font-size: 14px; }
.resume-bar span { flex: 1; min-width: 180px; }

/* v14 invite friends */
.inv-wrap { max-width: 560px; margin: 24px auto 64px; padding: 0 16px; display: grid; gap: 16px; }
.inv-card { border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.inv-hero { position: relative; overflow: hidden; padding: 44px 28px 40px; text-align: center; color: #0b0b0f;
  background: radial-gradient(120% 90% at 50% 45%, #ffffff 0%, #bfe9ff 22%, #39b6ff 48%, #2257ff 72%, #1a1fd6 100%); }
.inv-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.28) 0deg 6deg, rgba(255,255,255,0) 6deg 18deg); animation: inv-spin 40s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .inv-rays { animation: none; } }
.inv-hero-in { position: relative; display: grid; justify-items: center; gap: 12px; }
.inv-hero h1 { margin: 0; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; max-width: 14ch; }
.inv-hero p { margin: 0; font-size: 15px; color: #13184d; max-width: 34ch; }
.inv-body { padding: 20px; display: grid; gap: 14px; }
.inv-link { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.inv-link .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.inv-copy { display: inline-flex; align-items: center; gap: 6px; background: #2b6bff; color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.inv-copy svg { width: 16px; height: 16px; }
.inv-share { display: flex; justify-content: center; gap: 12px; }
.inv-sb { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); border: 0; cursor: pointer; }
.inv-sb svg { width: 20px; height: 20px; }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inv-stats div { background: var(--bg-soft); border-radius: 14px; padding: 12px; display: grid; gap: 4px; }
.inv-stats span { font-size: 12px; color: var(--fg-3); }
.inv-stats b { font-size: 20px; letter-spacing: -0.02em; }
.inv-note { font-size: 14px; color: var(--fg-2); background: var(--bg-soft); border-radius: 12px; padding: 10px 12px; }
.inv-note a, .inv-note .link-btn { color: #2b6bff; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.inv-how { display: grid; gap: 10px; }
.inv-how > div { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.inv-how b { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #2b6bff; color: #fff; font-size: 14px; }
.inv-how span { font-weight: 600; }
.inv-how small { color: var(--fg-3); font-size: 13px; }
.inv-friends { border: 1px solid var(--line); border-radius: 18px; padding: 8px; background: var(--surface); }
.inv-friends h3 { margin: 6px 10px 8px; font-size: 15px; }
@media (max-width: 420px) { .inv-stats b { font-size: 16px; } .inv-hero { padding: 36px 20px 32px; } }
.fs-3 { background: #2b6bff; }