/* Components. Ported from prototype/app.css so web and native share one system. */

/* ── Brand ───────────────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: 10px; }

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.03em;
  flex: none;
}

.brand__mark--sm { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.brand__word { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-hi); }
.brand__word--sm { font-size: 16px; }

/* ── Avatars ─────────────────────────────────────────────────────────────── */

.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-ink);
  flex: none;
  width: 38px;
  height: 38px;
  font-size: 14px;
  user-select: none;
}

.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--md { width: 44px; height: 44px; font-size: 16px; }
.avatar--lg { width: 62px; height: 62px; font-size: 22px; }
.avatar--muted { background: var(--line-input); color: var(--text-mute); }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 16px;
}

.card--tile { border-radius: var(--r-tile); padding: 14px; }
.card--row { border-radius: var(--r-ctrl); padding: 12px 14px; }

a.card, button.card { display: block; width: 100%; transition: border-color 0.15s; }
a.card:hover, button.card:hover { border-color: var(--accent-line); }

/* ── Identity line ───────────────────────────────────────────────────────── */

.ident { display: flex; align-items: center; gap: 11px; }
.ident__body { flex: 1; min-width: 0; }

.ident__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-hi);
}

.ident__name svg { flex: none; }

.ident__meta {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Stats ───────────────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 400px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat { background: var(--bg-tile); border-radius: var(--r-xs); padding: 9px 11px; min-width: 0; }

.stat--bordered {
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}

.stat__k {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat__v { font-size: 1.05rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat--bordered .stat__v { font-size: 1.15rem; }

/* ── Provenance — a number never renders without it ──────────────────────── */

.provenance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-tile);
  border-radius: var(--r-xs);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.provenance svg { flex: none; margin-top: 3px; }
.provenance b { color: var(--text-body); font-weight: 600; }
.provenance--warn { background: var(--danger-tint); color: var(--danger); }
.provenance--warn b { color: var(--danger); }

/* ── Pills, tags ─────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  background: var(--bg-input);
  color: var(--text-mute);
  white-space: nowrap;
}

.pill--on { background: var(--accent); color: var(--accent-ink); }
.pill--accent { background: var(--accent-tint); color: var(--accent-text); }
.pill--danger { background: var(--danger-tint); color: var(--danger); }
.pill--warn { background: var(--warn-tint); color: var(--warn); }
.pill--outline { background: transparent; color: var(--accent-text); border: 1px solid var(--accent-line); }

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulseDot 1.4s infinite;
}

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
}

.tag--long { color: var(--accent-text); background: var(--accent-tint); }
.tag--short { color: var(--danger); background: var(--danger-tint); }

/* How a position ended, when that is not simply "sold". Deliberately neutral:
   an expiry is a fact about the contract, not a verdict on the trade, and
   colouring it would editorialise a number that already speaks for itself. */
.tag--muted { color: var(--text-dim); background: var(--bg-tile); }

/* ── Record strip ────────────────────────────────────────────────────────── */

.record { display: flex; gap: 5px; }

.record__cell {
  flex: 1;
  min-width: 0;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.record__cell--w { background: var(--accent-tint); color: var(--accent-text); }
.record__cell--l { background: var(--danger-tint); color: var(--danger); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.12s;
}

.btn:hover { opacity: 0.9; color: var(--accent-ink); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-input); color: var(--text-faint); cursor: default; opacity: 1; }
.btn--block { display: flex; width: 100%; }
.btn--lg { height: 54px; font-size: 16px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--r-xs); }

.btn--ghost { background: transparent; border: 1px solid var(--line-input); color: var(--text-body); }
.btn--ghost:hover { border-color: var(--accent-line); color: var(--text-hi); opacity: 1; }
.btn--danger { background: transparent; border: 1px solid var(--line-input); color: var(--danger); }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 6px; }

.input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  color: var(--text-hi);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.12s;
}

.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--accent); }

.msg { font-size: 13.5px; margin-top: 10px; min-height: 20px; }
.msg--err { color: var(--danger); }
.msg--ok { color: var(--accent); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  padding: 10px 14px 10px 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--line-card);
  white-space: nowrap;
}

td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line-hairline);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

tr:last-child td { border-bottom: none; }
td.sym { color: var(--text-hi); font-weight: 700; }

/* ── States ──────────────────────────────────────────────────────────────── */

.empty {
  border: 1px dashed var(--line-input);
  border-radius: var(--r-sm);
  padding: 28px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-input);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 32px auto;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  z-index: 60;
  background: var(--bg-elev);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(12, 18, 16, 0.18);
  animation: toastUp 0.28s ease;
  max-width: calc(100vw - 40px);
}

@media (min-width: 769px) { .toast { bottom: 24px; } }

.footnote {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line-card);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
  max-width: 70ch;
}

/* ── Locked idea ─────────────────────────────────────────────────────────── */
/* The body genuinely is not here — the server never sent it. This is a
   placeholder for absent content, not a cover over present content. */

.lockbox {
  margin-top: 12px;
  border: 1px dashed var(--line-input);
  border-radius: var(--r-ctrl);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
  text-align: center;
}

.lockbox__label { font-size: 13px; font-weight: 600; color: var(--text-body); }

/* ── Idea actions + comments ─────────────────────────────────────────────── */

.actions {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-card);
  display: flex;
  align-items: center;
  gap: 18px;
}

.action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-mute);
  transition: color 0.12s;
}

.action:hover { color: var(--text-body); }
.action--liked { color: var(--danger); }
.action--liked:hover { color: var(--danger); }
.action[disabled] { opacity: 0.5; cursor: default; }

.comments {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment { display: flex; gap: 9px; }

.comment__text { font-size: 13px; line-height: 1.45; color: var(--text-mid); }
.comment__text b { color: var(--text-body); font-weight: 600; }

.comment-form { display: flex; gap: 8px; align-items: center; }

.comment-form .input {
  flex: 1;
  border-radius: var(--r-pill);
  padding: 9px 15px;
  font-size: 14px;
}

.comment-form button {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 4px;
  flex: none;
}

.comment-form button[disabled] { color: var(--text-faint); cursor: default; }

/* ── Consent lines ───────────────────────────────────────────────────────── */

.checkline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
  cursor: pointer;
}

.checkline input[type="checkbox"] {
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
}

.checkline b { color: var(--text-hi); font-weight: 600; }

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B94A3' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }

/* ── Modal sheet ─────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: fadeIn 0.18s ease;
}

.sheet {
  background: var(--bg-input);
  border-top: 1px solid var(--line-input);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 20px 22px calc(28px + var(--safe-b));
  animation: sheetUp 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 88vh;
  overflow-y: auto;
}

.sheet__grabber {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 0 auto 18px;
}

.sheet__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sheet__sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

.sheet__dismiss {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  padding: 10px;
  font-size: 14px;
  color: var(--text-mute);
}

@media (min-width: 769px) {
  .scrim { justify-content: center; align-items: center; }
  .sheet {
    border-radius: var(--r-sheet);
    border: 1px solid var(--line-input);
    width: min(440px, calc(100vw - 48px));
    animation: fadeIn 0.18s ease;
  }
}

/* ── Legal footer ────────────────────────────────────────────────────────── */
/* Present on every public page. Payment processors and brokerage aggregators
   check that these resolve before approving an integration, so they need to be
   reachable from anywhere on the site, not buried on one page. */

.legal-footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line-hairline);
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 12px;
}

.legal-footer nav a {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
}

.legal-footer nav a:hover,
.legal-footer nav a:focus-visible { color: var(--text-body); }

.legal-footer p {
  margin: 0;
  max-width: 70ch;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
}

/* ── Avatar color swatches (profile editor) ─────────────────────────────── */

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
  transition: transform .12s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch--on { border-color: var(--text-hi); transform: scale(1.12); }

/* ── Leaderboard podium ─────────────────────────────────────────────────── */

/* Ranks 1–3 as a podium: DOM stays in rank order (screen readers and crawlers
   read 1, 2, 3), CSS `order` arranges the classic 2-1-3 silhouette. */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 28px;
}
.podium__spot {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px 14px 0; overflow: hidden;
}
.podium__spot--1 { order: 2; border-color: var(--medal-gold); box-shadow: 0 10px 30px rgba(201, 162, 39, .14); }
.podium__spot--2 { order: 1; }
.podium__spot--3 { order: 3; }

.podium__avatar { position: relative; margin-bottom: 10px; }
.podium__avatar .avatar { border: 3px solid var(--medal); }
.podium__spot--1 .avatar { width: 64px; height: 64px; font-size: 20px; }
.podium__medal {
  position: absolute; right: -6px; bottom: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--medal); color: #FFFFFF;
  font-size: 12px; font-weight: 800;
  border: 2px solid var(--bg-card);
}
.podium__spot--2 .podium__medal, .podium__spot--3 .podium__medal { color: #FFFFFF; }

.podium__name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.podium__handle { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.podium__return { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.podium__spot--1 .podium__return { font-size: 30px; }
.podium__prov { font-size: 11px; color: var(--text-mute); margin-top: 6px; }

/* The plinth: the block each trader stands on. Height carries the rank. */
.podium__base {
  width: 100%; margin-top: 14px;
  background: color-mix(in srgb, var(--medal) 14%, var(--bg-tile));
  border-top: 3px solid var(--medal);
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .08em; font-size: 11px;
  color: var(--medal-deep, var(--text-mute));
}
.podium__spot--1 .podium__base { height: 56px; }
.podium__spot--2 .podium__base { height: 40px; }
.podium__spot--3 .podium__base { height: 28px; }

/* Medal palettes — deliberately not the accent green: rank is ordinal, not
   semantic gain/loss. The --medal-deep shade keeps the plinth label legible
   on the light tint. */
.podium__spot--1 { --medal: var(--medal-gold); --medal-deep: #8A6D14; }
.podium__spot--2 { --medal: #8C97A3; --medal-deep: #5A6570; }
.podium__spot--3 { --medal: #B07A45; --medal-deep: #7E5327; }

@media (max-width: 700px) {
  .podium { gap: 8px; }
  .podium__spot { padding: 14px 8px 0; }
  .podium__name { font-size: 13px; }
  .podium__return { font-size: 19px; }
  .podium__spot--1 .podium__return { font-size: 23px; }
  .podium__prov { display: none; }
}

/* ── VIP storefront card (creator page) ─────────────────────────────────── */

.vipfront { border-color: var(--accent); }
.vipfront__perks {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 18px;
}
.vipfront__perks li { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-body); }

/* ── Community — the Discord-like room ──────────────────────────────────── */

.comm {
  display: grid;
  grid-template-columns: 64px 200px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  height: calc(100dvh - 210px);
  min-height: 420px;
  background: var(--bg-card);
}

.comm__rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 12px 0;
  background: var(--bg-tile);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.commdot {
  border: 2px solid transparent; background: none; padding: 2px;
  border-radius: 50%; cursor: pointer;
}
.commdot--on { border-color: var(--accent-text); }

.comm__side {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.comm__title {
  font-weight: 700; font-size: 13px; padding: 4px 10px 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chan {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-xs);
  font-size: 13.5px; color: var(--text-mute);
}
.chan:hover { background: var(--bg-tile); color: var(--text-hi); }
.chan--on { background: var(--accent-tint); color: var(--accent-text-hi); font-weight: 600; }
.chan__hash { opacity: .55; }

.comm__main { display: flex; flex-direction: column; min-width: 0; }
.comm__chanhead {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden;
}
.comm__msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.comm__composer {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.comm__composer .input { flex: 1; }

.cmsg { display: flex; gap: 10px; align-items: flex-start; }
.cmsg__body { min-width: 0; flex: 1; }
.cmsg__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cmsg__time { color: var(--text-faint); font-size: 11px; }
.cmsg__text { font-size: 14px; color: var(--text-body); margin-top: 2px; overflow-wrap: break-word; white-space: pre-wrap; }
.cmsg__more {
  border: 0; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 13px; padding: 0 4px; margin-left: auto; opacity: 0;
}
.cmsg:hover .cmsg__more { opacity: 1; }
.cmsg__tools { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cmsg__tools .chip { cursor: pointer; }

.chip {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-tile); color: var(--text-mute);
  border: 1px solid var(--border);
}
.chip--creator { background: var(--accent-tint); color: var(--accent-text-hi); border-color: transparent; }
.chip--mod { background: #EEF2FB; color: #3B5BB8; border-color: transparent; }

/* Mobile: the rail goes horizontal on top, channels become a chip strip,
   chat fills the rest — same markup, no drill-in state to manage. */
@media (max-width: 768px) {
  .comm {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: calc(100dvh - 236px);
  }
  .comm__rail {
    flex-direction: row; padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
  }
  .comm__side {
    flex-direction: row; gap: 6px; padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
  }
  .comm__title { display: none; }
  .chan { width: auto; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
  .chan--on { border-color: var(--accent-text); }
  .chan svg { display: none; }
}

/* ── The bell ───────────────────────────────────────────────────────────── */

.bell { position: relative; display: flex; }
/* The bell and the avatar menu live together on the right of the section
   head. They set their own centre alignment because .section__head aligns on
   the BASELINE for its heading — which would offset two controls of different
   heights against each other. */
.head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bell__btn {
  position: relative;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-mute); cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
}
.bell__btn:hover { color: var(--text-hi); }
.bell__badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}
.bell__panel {
  position: absolute; right: 0; top: 46px; z-index: 40;
  width: min(320px, calc(100vw - 32px));
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(12, 18, 16, .12);
  max-height: 380px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.bell__row {
  padding: 11px 14px; font-size: 13px; color: var(--text-body);
  border-bottom: 1px solid var(--border); text-decoration: none;
}
.bell__row:last-child { border-bottom: 0; }
.bell__row:hover { background: var(--bg-tile); }
.bell__row--new { font-weight: 600; color: var(--text-hi); }

/* ── Feed card, second pass ─────────────────────────────────────────────── */

.ideacard .trade {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.trade__sym { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--text-hi); text-decoration: none; }
a.trade__sym:hover { color: var(--accent-text); }
.trade__ret { margin-left: auto; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ideacard__thesis {
  margin-top: 12px; font-size: 14.5px; line-height: 1.6;
  color: var(--text-body); max-width: 62ch; white-space: pre-wrap;
}
.pill--free { background: var(--bg-tile); color: var(--text-mute); }
.lockbox__sub { display: block; font-weight: 400; font-size: 12px; color: var(--text-mute); margin-top: 2px; }

/* ── Bull/bear sentiment ────────────────────────────────────────────────── */

.senti { margin-top: 12px; }
.senti__btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-mute);
  transition: transform .1s ease;
}
.sbtn:active { transform: scale(.96); }
.sbtn--bull:hover { color: var(--accent-text); border-color: var(--accent-text); }
.sbtn--bear:hover { color: var(--danger); border-color: var(--danger); }
.sbtn--bull.sbtn--on { background: var(--accent-tint); color: var(--accent-text-hi); border-color: var(--accent-text); }
.sbtn--bear.sbtn--on { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.sbtn[disabled] { opacity: .6; cursor: default; }
.senti__hint { font-size: 12px; color: var(--text-faint); }

.senti__bar {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: var(--danger-tint); overflow: hidden; max-width: 340px;
}
.senti__bar span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px 0 0 999px;
  transition: width .35s ease;
}
.senti__read { font-size: 12px; color: var(--text-mute); margin-top: 5px; }

/* ── Feed tabs + suggestions + unread dots ──────────────────────────────── */

.feedtabs { display: flex; gap: 8px; margin-bottom: 16px; }
.feedtabs .pill { cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); }
.feedtabs .pill--on { border-color: var(--accent-text); }

.chan__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-text); margin-left: auto; flex: none;
}
@media (max-width: 768px) {
  .chan__dot { margin-left: 6px; }
}

/* ── @mentions in chat ──────────────────────────────────────────────────── */
.mention { color: var(--accent-text-hi); font-weight: 700; background: var(--accent-tint); border-radius: 4px; padding: 0 3px; }

/* ── The ink record card — the dark surface from the homepage hero, shared
   by the creator and record pages so the product looks like the promise. ── */

  .inkcard {
    background: var(--ink-app);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 24px 64px rgba(12, 18, 16, 0.22);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .inkcard__live {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--accent); background: #12291C;
    border-radius: var(--r-pill); padding: 5px 11px; flex: none;
  }
  .inkcard__prov {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--ink-tile); border-radius: var(--r-xs);
    padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
    color: var(--ink-text-dim);
  }
  .inkcard__prov b { color: var(--ink-text-body); font-weight: 600; }
  .inkcard__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inkcard__stat { background: var(--ink-tile); border-radius: var(--r-xs); padding: 11px 13px; display: flex; flex-direction: column; }
  .inkcard__k { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-text-dim); }
  .inkcard__v { font-size: 1.3rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--ink-text-hi); }
  .inkcard__strip { display: flex; gap: 5px; }
  .inkcard__cell {
    flex: 1; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }
  .inkcard__cell--w { color: var(--accent); background: #12291C; }
  .inkcard__cell--l { color: #FF5C6A; background: #2A1418; }
  .inkcard__link { font-size: 13px; font-weight: 600; color: var(--accent); align-self: center; }
  .inkcard__link:hover { color: #5FE89D; }

/* Four-across variant for wide stat rows; folds back to two on phones. */
.inkcard__stats--row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .inkcard__stats--row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── VIP marketplace ────────────────────────────────────────────────────── */

.vipmkt__hd { margin-bottom: 18px; }
.vipmkt {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.vipmkt__card {
  background: var(--bg-card); border: 1px solid var(--line-card);
  border-radius: var(--r-card); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.vipmkt__card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.vipmkt__price {
  margin-left: auto; flex: none;
  font-size: 13px; font-weight: 800; color: var(--accent-text-hi);
  background: var(--accent-tint); border-radius: var(--r-pill); padding: 5px 11px;
}

/* The record leads — a follower count cannot stand in for it. */
.vipmkt__record {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  background: var(--bg-tile); border-radius: var(--r-xs); padding: 10px 12px;
}
.vipmkt__rec { display: flex; flex-direction: column; min-width: 0; }
.vipmkt__k { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.vipmkt__v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }

.vipmkt__pitch { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.vipmkt__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.vipmkt__perks li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--text-mute);
}
.vipmkt__perks svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.vipmkt__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 4px;
}

/* ── Avatar menu ────────────────────────────────────────────────────────── */

.amenu { position: relative; }
.amenu__btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--accent-ink);
  display: grid; place-items: center;
}
.amenu__panel {
  position: absolute; right: 0; top: 46px; z-index: 40;
  width: min(248px, calc(100vw - 32px));
  background: var(--bg-card); border: 1px solid var(--line-card);
  border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(12, 18, 16, .14);
  padding: 6px; display: flex; flex-direction: column;
}
.amenu__hd {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 12px 12px; text-align: center;
  border-bottom: 1px solid var(--line-hairline); margin-bottom: 6px;
}
.amenu__name { font-weight: 700; font-size: 14px; margin-top: 6px; }
.amenu__mail { font-size: 12px; color: var(--text-mute); word-break: break-all; }
.amenu__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--text-body);
  background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit;
}
.amenu__row:hover { background: var(--bg-tile); color: var(--text-hi); }
.amenu__row svg { flex: none; color: var(--text-faint); }
.amenu__row--out { color: var(--danger); margin-top: 4px; border-top: 1px solid var(--line-hairline); border-radius: 0 0 10px 10px; }
.amenu__row--out svg { color: var(--danger); }
.amenu__row--out:hover { background: var(--danger-tint); color: var(--danger); }

/* ── Billing term chooser ───────────────────────────────────────────────── */

.terms { display: grid; gap: 8px; margin-top: 14px; }
.terms__opt {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 10px; cursor: pointer;
  border: 1px solid var(--line-card); border-radius: var(--r-ctrl);
  padding: 11px 14px; background: var(--bg-card);
}
.terms__opt--on { border-color: var(--accent-text); background: var(--accent-tint); }
.terms__opt input { position: absolute; opacity: 0; pointer-events: none; }
.terms__label { font-weight: 700; font-size: 14px; }
.terms__price { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.terms__per { font-weight: 500; font-size: 12px; color: var(--text-mute); }
.terms__billed { grid-column: 1; font-size: 12px; color: var(--text-mute); }
.terms__save {
  grid-column: 2; justify-self: end;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent-text-hi); background: var(--bg-card);
  border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 2px 8px;
}
.terms__opt--on .terms__save { background: #fff; }

/* ── Rank number on in-app leaderboard rows ─────────────────────────────── */
.rankno {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--bg-tile); color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.rankno--medal { background: var(--accent-tint); color: var(--accent-text-hi); }

/* ── Post a play: position picker ───────────────────────────────────────── */

.playposes { display: flex; flex-wrap: wrap; gap: 8px; }
.playpos {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--line-card);
  border-radius: var(--r-ctrl); padding: 9px 13px;
  cursor: pointer; font-family: inherit; text-align: left;
}
.playpos:hover { border-color: var(--accent-line); }
.playpos--on { border-color: var(--accent-text); background: var(--accent-tint); }
.playpos__sym { font-weight: 800; font-size: 14px; color: var(--text-hi); }
.playpos__meta { font-size: 12px; color: var(--text-mute); }

/* Demo creators. Deliberately the warning tone, not the accent: a simulated
   record on a product that sells verification should read as a caveat. */
.pill--demo {
  background: var(--warn-tint); color: var(--warn);
  font-weight: 800; letter-spacing: .05em; font-size: 10px;
}