/* ═══════════════════════════════════════════════════════════════
   PAGES & FEATURE AREAS
   Post card, Auth, Settings, Profile, Notifications, Comments, Top tokens,
   Stat cards, Leaderboard, Reels, War Room, Monetization, Viral Growth,
   Empty states, Addictive features, Casino Feed, Psychological Engine
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   POST CARD
   ═══════════════════════════════════════════════════════════════ */
.post {
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.12);
  border-radius: 12px; margin-bottom: 12px;
  transition: border-color .2s ease;
}
.post:hover { border-color: rgba(0,196,114,.22); }
.post-inner { padding: 18px 20px; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-user-info { display: flex; flex-direction: column; }
.post-username { font-size: 13px; font-weight: 600; color: var(--text-0); cursor: pointer; }
.post-username:hover { color: var(--accent); }
.post-meta { font-size: 11px; color: var(--text-4); display: flex; align-items: center; gap: 6px; }
.post-dot { width: 2px; height: 2px; background: var(--text-4); border-radius: 50%; }
.post-badge-row { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.post-token-badge {
  display: flex; align-items: center; gap: 6px; background: var(--bg-3);
  border: 1px solid rgba(0,196,114,.12); border-radius: var(--radius-s);
  padding: 4px 10px; font-size: 12px; font-family: var(--mono);
  cursor: pointer; transition: all var(--transition);
}
.post-token-badge:hover { border-color: rgba(0,196,114,.22); background: var(--bg-4); }
.post-more {
  width: 28px; height: 28px; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4); transition: all var(--transition);
}
.post-more:hover { background: var(--bg-hover); color: var(--text-2); }

.post-title {
  font-size: 16px; font-weight: 700; color: var(--text-0); line-height: 1.4;
  margin-bottom: 8px; cursor: pointer; transition: color var(--transition);
  /* P65.385 — long unbroken tokens (no whitespace) must wrap inside
     the card instead of blowing out its width. */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.post-title:hover { color: var(--accent); }
.post-body {
  font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px;
  /* P65.385 — same wrap rules as .post-content-x; the legacy post
     body needs them too once long no-space inputs are possible. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.post-tags { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.post-media {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
  cursor: pointer; border: 1px solid rgba(0,196,114,.06); position: relative;
  max-height: 520px;
}
.post-media img, .post-media svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-media-overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
  opacity: 0; transition: opacity var(--transition); display: flex;
  align-items: flex-end; justify-content: center; padding: 16px;
}
.post-media:hover .post-media-overlay { opacity: 1; }

/* Token strip */
.post-token-strip {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: rgba(255,255,255,.015); border: 1px solid rgba(0,196,114,.06);
  border-radius: var(--radius); margin-bottom: 12px; font-family: var(--mono);
  font-size: 12px; flex-wrap: wrap;
}
.post-token-price { font-weight: 700; color: var(--text-0); font-size: 13px; }
.post-token-stat { color: var(--text-4); }
.post-trade-btn {
  margin-left: auto; background: var(--accent-dim); border: 1px solid var(--accent-border);
  color: var(--accent); padding: 4px 14px; border-radius: var(--radius-s);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all var(--transition);
  font-family: var(--font); letter-spacing: .02em;
}
.post-trade-btn:hover { background: rgba(0,196,114,.18); }

/* Action bar */
.post-actions {
  display: flex; align-items: center; gap: 2px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.post-action {
  display: flex; align-items: center; gap: 5px; padding: 7px 12px;
  border-radius: var(--radius-s); color: var(--text-3); font-size: 13px;
  transition: all var(--transition); position: relative;
}
.post-action:hover { background: var(--bg-hover); }
.post-action svg { width: 16px; height: 16px; }
.post-action-up:hover { color: var(--accent); }
.post-action-up.active { color: var(--accent); }
.post-action-down:hover { color: var(--red); }
.post-action-down.active { color: var(--red); }
.post-action-comment:hover { color: var(--blue); }
/* ═══════════════════════════════════════════════════════════════════
   P65.54 — PRO INVOICE / RECEIPT
   ─────────────────────────────────────────────────────────────────
   Active subscribers see a compact "View invoice" + "On-chain receipt"
   row on the Pro page. The invoice modal renders a clean card with
   user info + payment details, plus Print / Download buttons.
   The download generates a self-contained HTML file that opens
   identically in any browser and prints cleanly to PDF.
   ═══════════════════════════════════════════════════════════════════ */

.pro-receipt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.pro-receipt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 196, 114, 0.06);
  border: 1px solid rgba(0, 196, 114, 0.22);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.pro-receipt-btn:hover {
  background: rgba(0, 196, 114, 0.10);
  border-color: rgba(0, 196, 114, 0.36);
}
.pro-receipt-btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
}
.pro-receipt-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-0);
}

/* ─── Invoice modal layout ────────────────────────────────────── */
.invoice-modal-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 22px;
}
.invoice-card {
  margin: 18px 0 6px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.invoice-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.invoice-brand-mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #00c472, #0aa861);
  color: #000;
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.invoice-brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-0);
}
.invoice-brand-sub {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}
.invoice-meta { text-align: right; }
.invoice-meta-eyebrow {
  font-size: 9.5px;
  color: var(--text-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.invoice-meta-num {
  font-family: var(--mono, ui-monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.invoice-meta-date {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.invoice-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 196, 114, 0.10), rgba(0, 196, 114, 0.03));
  border: 1px solid rgba(0, 196, 114, 0.22);
}
.invoice-hero-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.invoice-hero-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
}
.invoice-hero-amount {
  font-family: var(--mono, ui-monospace);
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.invoice-hero-amount-sub {
  font-size: 10.5px;
  color: var(--text-4);
  margin-top: 4px;
  font-family: var(--mono, ui-monospace);
}

.invoice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin-bottom: 22px;
}
.invoice-label {
  font-size: 9.5px;
  color: var(--text-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.invoice-value {
  font-size: 13px;
  color: var(--text-0);
  font-weight: 600;
  word-break: break-word;
}
.invoice-value-mono {
  font-family: var(--mono, ui-monospace);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
  word-break: break-all;
}
.invoice-value-id {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  color: var(--text-4);
  margin-top: 6px;
  word-break: break-all;
}
.invoice-value-faded {
  font-size: 11px;
  color: var(--text-4);
  margin: 2px 0;
}

.invoice-line-items {
  margin-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}
.invoice-line-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--text-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.invoice-line-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
}
.invoice-mono { font-family: var(--mono, ui-monospace); }
.invoice-total-amount { color: var(--accent); }
.invoice-total-sol { color: var(--text-4); font-weight: 500; }

.invoice-receipt {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.invoice-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.invoice-receipt-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.invoice-paid-stamp {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 9.5px;
  border-radius: 5px;
  transform: rotate(-3deg);
}
.invoice-comp-stamp { color: #f7d979; border-color: #f7d979; }
.invoice-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 11.5px;
}
.invoice-receipt-row > span:first-child {
  color: var(--text-4);
  flex-shrink: 0;
}
.invoice-receipt-row > span:last-child {
  color: var(--text-1);
  text-align: right;
  word-break: break-all;
}
.invoice-truncate {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.invoice-receipt-verify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.invoice-receipt-verify:hover { border-bottom-color: var(--accent); }

.invoice-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.55;
}
.invoice-foot strong { color: var(--text-2); }

.invoice-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 22px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 560px) {
  .invoice-modal-scroll { padding: 0 14px; }
  .invoice-card { padding: 18px; }
  .invoice-grid { grid-template-columns: 1fr; }
  .invoice-head { flex-direction: column; align-items: flex-start; }
  .invoice-meta { text-align: left; }
  .invoice-actions { flex-wrap: wrap; }
  .invoice-truncate { max-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.53 — VERIFIED CELEBRATION OVERLAY
   ─────────────────────────────────────────────────────────────────
   Fires when a user successfully activates NOX Pro. Full-screen
   takeover: confetti burst, expanding green rings, animated check,
   perk cascade, receipt pill. ~3-5s feel-good moment that locks in
   the conversion in the user's memory.
   ═══════════════════════════════════════════════════════════════════ */

.verified-celebration {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}
.verified-celebration.is-open  { opacity: 1; pointer-events: auto; }
.verified-celebration.is-closing { opacity: 0; }

.vc-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0, 196, 114, 0.18), transparent 70%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Expanding rings — three of them at staggered delays */
@keyframes vc-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
  60%  { opacity: 0.4; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}
.vc-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(0, 196, 114, 0.55);
  transform: translate(-50%,-50%) scale(0);
  pointer-events: none;
}
.verified-celebration.is-open .vc-ring-1 { animation: vc-ring-expand 1.6s ease-out 0.05s forwards; }
.verified-celebration.is-open .vc-ring-2 { animation: vc-ring-expand 1.8s ease-out 0.30s forwards; }
.verified-celebration.is-open .vc-ring-3 { animation: vc-ring-expand 2.1s ease-out 0.55s forwards; }

/* Confetti */
.vc-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
@keyframes vc-particle-burst {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); opacity: 0; }
}
.vc-particle {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 2px;
  opacity: 0;
}
.verified-celebration.is-open .vc-particle {
  animation: vc-particle-burst 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--cd, 0s) forwards;
}

/* The center card */
@keyframes vc-card-in {
  0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(-2px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
.vc-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 36px 44px 28px;
  border-radius: 22px;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(0, 196, 114, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(20, 22, 26, 0.95), rgba(12, 14, 17, 0.95));
  border: 1px solid rgba(0, 196, 114, 0.32);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 64px rgba(0, 196, 114, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  max-width: 460px;
  animation: vc-card-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Animated check */
.vc-check-wrap {
  width: 96px; height: 96px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 196, 114, 0.35), rgba(0, 196, 114, 0.08));
  position: relative;
}
.vc-check-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 196, 114, 0.5);
  opacity: 0;
  animation: vc-check-glow 1.6s ease-out 0.6s infinite;
}
@keyframes vc-check-glow {
  0%   { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.4); opacity: 0; }
}
.vc-check {
  color: #00c472;
  filter: drop-shadow(0 0 12px rgba(0, 196, 114, 0.55));
}
@keyframes vc-circle-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes vc-tick-draw {
  to { stroke-dashoffset: 0; }
}
.vc-check-circle {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: vc-circle-draw 0.55s ease-out 0.25s forwards;
}
.vc-check-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: vc-tick-draw 0.45s ease-out 0.75s forwards;
}

.vc-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  opacity: 0;
  animation: vc-fade-up 500ms ease-out 0.7s forwards;
}
.vc-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-0);
  margin-bottom: 8px;
  opacity: 0;
  background: linear-gradient(180deg, #ffffff, #b9f0d2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: vc-fade-up 500ms ease-out 0.85s forwards;
}
.vc-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 22px;
  line-height: 1.5;
  opacity: 0;
  animation: vc-fade-up 500ms ease-out 1.0s forwards;
}
.vc-sub strong { color: var(--accent); font-family: var(--mono, ui-monospace); }

@keyframes vc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Perks cascade — each pill fades in on its own delay */
.vc-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-bottom: 22px;
}
.vc-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.30);
  color: var(--text-1);
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  animation: vc-fade-up 400ms ease-out forwards;
}
.vc-perk:nth-child(1) { animation-delay: 1.10s; }
.vc-perk:nth-child(2) { animation-delay: 1.20s; }
.vc-perk:nth-child(3) { animation-delay: 1.30s; }
.vc-perk:nth-child(4) { animation-delay: 1.40s; }
.vc-perk:nth-child(5) { animation-delay: 1.50s; }
.vc-perk:nth-child(6) { animation-delay: 1.60s; }
.vc-perk-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: rgba(0, 196, 114, 0.22);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.vc-receipt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-2);
  font-size: 11.5px;
  font-family: var(--mono, ui-monospace);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  animation: vc-fade-up 500ms ease-out 1.7s forwards;
  transition: background 140ms ease, border-color 140ms ease;
}
.vc-receipt:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-0);
}
.vc-receipt-label {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 700;
}
.vc-receipt-sig { color: var(--text-1); font-weight: 600; }

.vc-dismiss {
  display: block;
  margin: 0 auto;
  padding: 10px 28px;
  border-radius: 10px;
  background: var(--accent);
  border: none;
  color: #000;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  animation: vc-fade-up 400ms ease-out 1.85s forwards;
  transition: filter 140ms ease, transform 120ms ease;
  letter-spacing: 0.01em;
}
.vc-dismiss:hover  { filter: brightness(1.1); }
.vc-dismiss:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .vc-card { max-width: 92vw; padding: 28px 22px 22px; }
  .vc-title { font-size: 28px; }
  .vc-check-wrap { width: 84px; height: 84px; }
}

/* P65.49 / P65.50 — Per-row X delete on recent searches.
   The recent dropdown row is a flex with the main button and an X.
   The X is absolutely positioned over the row's right edge, padded
   into the button so the click area doesn't overlap the X target.

   P65.50 — locked down the button reset so the SVG glyph stays
   pixel-centered inside the round hover background. Default user-
   agent <button> styles (padding, line-height, font-size baseline)
   were causing the glyph to render offset from the hover circle. */
.recent-search-row {
  position: relative;
}
.recent-search-row .dropdown-item {
  width: 100%;
}
.recent-search-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  /* Hard reset of every UA default that can shift the glyph */
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  font: inherit;
  line-height: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  color: var(--text-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.recent-search-x svg {
  display: block;          /* kill inline baseline gap */
  width: 11px;
  height: 11px;
  pointer-events: none;    /* clicks always fall to the button */
}
.recent-search-row:hover .recent-search-x { opacity: 1; }
/* P65.51 — no hover background. The user found the red-tinted circle
   distracting; the X glyph alone (with a slight color shift) is
   enough affordance. */
.recent-search-x:hover {
  color: var(--text-1);
}
.recent-search-x:focus-visible {
  outline: none;
  color: var(--text-1);
}

/* P65.48 — Token mini-chart in the post head's badge row.
   Tiny sparkline + 24h % colored green/red/neutral based on the
   token's price direction. Click → Dexscreener for that token.
   The chart shape itself is synthetic (deterministic per token) —
   the COLOR is real. Eye-candy that conveys signal at a glance. */
.post-mini-chart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
  text-decoration: none;
  height: 28px;
}
.post-mini-chart:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
}
.post-mini-chart:active { transform: translateY(0); }
.post-mini-chart svg {
  width: 44px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.post-mini-chart-pct {
  font-family: var(--mono, ui-monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* Tone variants — brighten the border subtly on direction so the
   chart reads as part of a colored chip even before the user scans
   the % number. */
.post-mini-chart.pmc-up    { border-color: rgba(0, 196, 114, 0.22); background: rgba(0, 196, 114, 0.05); }
.post-mini-chart.pmc-up:hover    { border-color: rgba(0, 196, 114, 0.40); background: rgba(0, 196, 114, 0.08); }
.post-mini-chart.pmc-down  { border-color: rgba(239, 68, 68, 0.22);  background: rgba(239, 68, 68, 0.05); }
.post-mini-chart.pmc-down:hover  { border-color: rgba(239, 68, 68, 0.40);  background: rgba(239, 68, 68, 0.08); }


.post-action-share:hover { color: var(--purple); }
/* P65.40 — "you've already shared this" state. Muted purple + a fill
   on the share glyph so the button still looks tappable (re-clicks
   still copy the link) but distinct from a fresh share. */
.post-action-share.is-shared {
  color: var(--purple);
}
.post-action-share.is-shared svg {
  fill: var(--purple);
  fill-opacity: 0.18;
}
.post-detail-action.is-shared { color: var(--purple); }
.post-detail-action.is-shared:hover { background: rgba(167, 139, 250, .06); }

.post-action-save:hover { color: var(--gold); }
.post-action-save.active { color: var(--gold); }
.post-action-count { font-family: var(--mono); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREENS
   ═══════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 3000; background: var(--bg-0);
  /* P65.306 — center the card when it fits, but top-align & allow
     scroll when it doesn't.  Was `align-items: center`, which on a
     viewport shorter than the card clipped BOTH the top and bottom
     (the "Continue with Google" tile + the title above it became
     invisible above the fold on signup).  `flex-start` + auto vertical
     margins on the container reproduces visual centering when content
     fits, and top-aligns with natural scroll otherwise. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto; overflow-x: hidden;
}
.auth-overlay > .auth-container {
  margin-top: auto;
  margin-bottom: auto;
}
.auth-overlay::before {
  content: ''; position: absolute; top: -50%; right: -30%; width: 80%; height: 200%;
  background: radial-gradient(ellipse, rgba(0,196,114,.06) 0%, transparent 70%);
  pointer-events: none; animation: breathe 8s ease infinite;
}
.auth-overlay::after {
  content: ''; position: absolute; bottom: -40%; left: -20%; width: 60%; height: 150%;
  background: radial-gradient(ellipse, rgba(61,127,196,.04) 0%, transparent 70%);
  pointer-events: none;
}
/* Landing variant — suppress gradient artifacts that converge into a
   center-strip on the wider container, switch to top-aligned scroll. */
.auth-overlay:has(.auth-container.is-landing)::before,
.auth-overlay:has(.auth-container.is-landing)::after {
  display: none;
}
.auth-overlay:has(.auth-container.is-landing) {
  align-items: flex-start;
  padding: 56px 20px 80px;
}
.auth-container {
  width: 100%; max-width: 420px; animation: fadeUp .4s ease;
  position: relative; z-index: 1;
}
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 36px; }
.auth-logo-text { font-size: 28px; font-weight: 800; color: var(--text-0); letter-spacing: -.02em; }
.auth-logo-text .brand-x { color: var(--accent); }
.auth-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 28px;
}
.auth-title { font-size: 22px; font-weight: 800; color: var(--text-0); margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--text-3); margin-bottom: 24px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--text-4); font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-3); }
.auth-footer a, .auth-link { color: var(--accent); cursor: pointer; font-weight: 600; }
.auth-footer a:hover, .auth-link:hover { text-decoration: underline; }
.auth-social-btn {
  width: 100%; padding: 11px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-3); color: var(--text-1); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--transition);
}
.auth-social-btn:hover { background: var(--bg-4); border-color: var(--border-hover); }

/* ═══════════════════════════════════════════════════════════════
   P65.304 / P65.305 — Social OAuth buttons.
   ─────────────────────────────────────────────────────────────
   2×2 grid of provider tiles on the login + signup forms.  Each
   tile uses BRAND-CORRECT colors so users instantly recognise
   the provider; we deliberately deviate from the host's green
   accent palette here.  The shared `.btn-social` base normalises
   sizing / spacing / icon alignment; per-provider classes override
   only colors + (where needed) text styling.

   The grid keeps the row height to ~96px (vs 220px+ when stacked
   vertically), which is essential on the signup screen where the
   form already has 5 input groups — vertical stacking pushed the
   first tile above the visible fold on a 1280×800 viewport.
   ═══════════════════════════════════════════════════════════════ */
.auth-socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.btn-social {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
  letter-spacing: -0.005em;
}
.btn-social:active           { transform: translateY(1px); }
.btn-social[disabled]        { opacity: 0.6; cursor: not-allowed; transform: none; }
/* Icon sits inline (left of the label) instead of absolutely
   positioned — keeps the centre-of-mass balanced in a narrow tile. */
.btn-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-social-icon svg         { display: block; }
.btn-social-label            { line-height: 1; }
/* Phones (≤ 420px wide): drop to a single column so the labels
   don't get crowded inside a half-width tile. */
@media (max-width: 420px) {
  .auth-socials { grid-template-columns: 1fr; }
}

/* ── Google: white card per Google's official sign-in guidelines ── */
.btn-social-google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}
.btn-social-google:hover {
  background: #f6f9fc;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}

/* ── Apple: monochrome black, white wordmark + glyph ── */
.btn-social-apple {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.btn-social-apple:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0,0,0,.30);
}
.btn-social-apple .btn-social-icon { color: #ffffff; }

/* ── X (formerly Twitter): pure black with the wordmark X ── */
.btn-social-x {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.btn-social-x:hover {
  background: #181818;
  border-color: #181818;
  box-shadow: 0 1px 3px rgba(0,0,0,.30);
}
.btn-social-x .btn-social-icon { color: #ffffff; }

/* ── Discord: official "Blurple" #5865F2 ── */
.btn-social-discord {
  background: #5865F2;
  color: #ffffff;
  border-color: #5865F2;
}
.btn-social-discord:hover {
  background: #4752C4;
  border-color: #4752C4;
  box-shadow: 0 1px 3px rgba(88,101,242,.35);
}
.btn-social-discord .btn-social-icon { color: #ffffff; }

/* Tighten the "or" divider so it reads as a quiet separator
   between the social stack and the email form, not a section break. */
.auth-divider {
  margin: 18px 0 18px;
}
.auth-divider span {
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-size: 11px;
  text-transform: lowercase;
  color: var(--text-4);
}

/* P65.310 — When the providers array shrinks to a single entry,
   we drop the 2-col grid and let the one tile span full width.
   Without this the lonely Google tile would otherwise occupy
   half the row with empty space beside it. */
.auth-socials-single {
  grid-template-columns: 1fr;
}
.btn-social-full {
  width: 100%;
}

/* ─── "Keep me signed in" checkbox row ─────────────────────────
   A custom checkbox (the native one looks terrible against dark
   themes).  The actual <input> is visually hidden but kept in the
   tab order; the visible .auth-remember-box is a div we style and
   toggle via the :checked sibling selector.  The row also hosts
   the "Forgot password?" link on the login screen — flex layout
   pushes them to opposite ends. */
.auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.2;
}
.auth-remember-cb {
  /* Visually hidden but still keyboard-accessible. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.auth-remember-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-hover, rgba(255,255,255,.20));
  border-radius: 4px;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;     /* check icon hidden until checked */
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  flex-shrink: 0;
}
.auth-remember-cb:checked + .auth-remember-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #001a0f;
}
.auth-remember-cb:focus-visible + .auth-remember-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-remember:hover .auth-remember-box {
  border-color: var(--accent);
}
.auth-remember-text {
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   P65.311 — Sign-in challenge cards (email OTP + TOTP MFA).
   ─────────────────────────────────────────────────────────────
   Same .auth-card base as login / signup; the modifier just adds
   a centered icon at the top and tightens text alignment so the
   six-digit input feels like the centerpiece. */
.auth-challenge-card {
  text-align: center;
}
.auth-challenge-card .auth-error,
.auth-challenge-card .input-group,
.auth-challenge-card .auth-footer {
  text-align: left;
}
.auth-challenge-icon {
  width: 56px;
  height: 56px;
  margin: 4px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 196, 114, 0.08);
  border: 1px solid rgba(0, 196, 114, 0.22);
  color: var(--accent);
}

/* OTP digit input — large, monospaced, generous tracking so each
   digit reads as its own slot.  Centred placeholder dots set the
   visual size before the user starts typing. */
.auth-otp-input {
  text-align: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  letter-spacing: 0.5em;
  /* Re-balance the cluster — half a letter-spacing unit on the
     right is normally added by the trailing space, which off-centers
     the row.  Pull it back. */
  padding-right: calc(14px - 0.25em);
  font-weight: 700;
  color: var(--text-0);
}
.auth-otp-input::placeholder {
  letter-spacing: 0.5em;
  color: var(--text-4);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   P65.312 — Password visibility toggle polish.
   ─────────────────────────────────────────────────────────────
   The `.input-action` button is the eye icon next to every
   password field.  togglePassVis() swaps its innerHTML between
   ICO.eye and ICO.eyeOff and adds `.is-toggled` while visible —
   the rules below give the swap a tiny tap-bounce so the click
   reads as intentional, and tint the icon accent-green when the
   password is unmasked so the state is unmistakable. */
.input-action {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .14s ease, transform .12s cubic-bezier(.34, 1.56, .64, 1), background .14s ease;
  border-radius: var(--radius-s);
}
.input-action:hover {
  color: var(--text-1) !important;
  background: rgba(255, 255, 255, 0.04);
}
.input-action:active {
  transform: translateY(-50%) scale(.86);
}
.input-action svg {
  transition: opacity .14s ease, transform .14s ease;
}
.input-action.is-toggled {
  color: var(--accent) !important;
}
/* tap-pop on the SVG when the toggled state changes — the swap is
   instant so we layer a quick scale to make the change feel alive. */
.input-action.is-toggled svg,
.input-action:not(.is-toggled) svg {
  animation: input-action-pop .18s ease-out;
}
@keyframes input-action-pop {
  0%   { transform: scale(.78); opacity: .65; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* P65.312 — Disabled CTA — the Create Account button starts
   disabled until the user ticks the Terms checkbox. */
.btn-primary[disabled],
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

/* Terms row variant.  Same base as .auth-remember but the text wraps
   onto two lines on narrow viewports — relax the line clamp so the
   policy links stay readable. */
.auth-terms .auth-remember-text {
  line-height: 1.5;
  font-size: 12.5px;
  color: var(--text-2);
}
.auth-terms .auth-link {
  font-weight: 600;
}
.auth-error {
  background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
  color: var(--red); margin-bottom: 16px; display: none;
}
.auth-error.show { display: flex; align-items: center; gap: 8px; }
.password-strength { height: 3px; border-radius: 2px; background: var(--bg-4); margin-top: 6px; overflow: hidden; }
.password-strength-bar { height: 100%; border-radius: 2px; transition: all .3s; width: 0%; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════════ */
.settings-layout { display: flex; gap: 0; min-height: calc(100vh - var(--header-h)); }
.settings-nav {
  width: 200px; flex-shrink: 0; padding: 16px 8px;
  border-right: 1px solid rgba(0,196,114,.06);
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 13px; color: var(--text-3); border-radius: 8px;
  transition: all .15s; width: 100%; text-align: left;
}
.settings-nav-item:hover { background: rgba(0,196,114,.04); color: var(--text-1); }
.settings-nav-item.active { background: rgba(0,196,114,.06); color: var(--accent); font-weight: 600; border: 1px solid rgba(0,196,114,.1); }
.settings-content { flex: 1; padding: 24px 28px; max-width: 560px; }
.settings-section { margin-bottom: 28px; background: var(--bg-2); border: 1px solid rgba(0,196,114,.08); border-radius: 12px; padding: 20px; }
.settings-section-title { font-size: 15px; font-weight: 700; color: var(--text-0); margin-bottom: 3px; letter-spacing: -.01em; }
.settings-section-desc { font-size: 11px; color: var(--text-4); margin-bottom: 18px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid rgba(0,196,114,.04);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.settings-row-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.settings-row-desc { font-size: 11px; color: var(--text-4); }

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */
.profile-header {
  padding: 24px; border-bottom: 1px solid rgba(0,196,114,.08);
  display: flex; align-items: flex-start; gap: 20px;
}
.profile-info { flex: 1; }
.profile-name { font-size: 20px; font-weight: 800; color: var(--text-0); letter-spacing: -.02em; }
.profile-handle { font-size: 12px; color: var(--text-4); font-family: var(--mono); margin-top: 2px; }
.profile-bio { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }
.profile-stats-row { display: flex; gap: 18px; margin-top: 12px; }
.profile-stat { font-size: 12px; color: var(--text-4); }
.profile-stat strong { color: var(--text-0); font-weight: 700; }
.profile-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION PANEL
   ═══════════════════════════════════════════════════════════════ */
.notif-panel {
  position: fixed; top: calc(var(--top-offset) + 8px); right: 16px; width: 360px;
  max-height: calc(100vh - var(--top-offset) - 24px); background: var(--bg-2);
  /* P65.142 — was 300; bumped above the FAB (z-index:500) so the
     panel renders on top of the +-button instead of underneath. */
  border: 1px solid rgba(0,196,114,.15); border-radius: 16px; z-index: 600;
  transform: translateX(120%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,196,114,.05), 0 0 60px rgba(0,196,114,.03);
  overflow: hidden;
}
.notif-panel.open { transform: translateX(0); }
.notif-header {
  padding: 16px 18px; border-bottom: 1px solid rgba(0,196,114,.08);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,196,114,.03) 0%, transparent 100%);
}
.notif-header-title { font-size: 13px; font-weight: 700; color: var(--text-0); letter-spacing: .03em; text-transform: uppercase; }

/* ─── P65.222 — header actions cluster + select-mode UI ────────── */
.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notif-header-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.notif-header-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-0);
}
.notif-header-btn:active {
  background: rgba(239, 68, 68, 0.10);
  color: #ff8a8a;
}

/* Select-mode toolbar — replaces the All/Mentions filter tabs while
   the user is choosing rows to delete. */
.notif-select-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 5;
}
.notif-select-btn {
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.notif-select-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-0);
  border-color: rgba(255, 255, 255, 0.18);
}
.notif-select-btn:active { transform: translateY(1px); }
.notif-select-btn:disabled { opacity: 0.40; cursor: not-allowed; }
.notif-select-btn-cancel { color: var(--text-3); }
.notif-select-btn-delete {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #ff8a8a;
  margin-left: auto;
  font-weight: 800;
}
.notif-select-btn-delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.70);
  color: #fff;
}
.notif-select-count {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  min-width: 60px;
}

/* Round checkbox prefix on each row when select mode is active */
.notif-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0a1d12;
  margin-right: 4px;
  align-self: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.notif-check.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.18);
}
.notif-check svg { display: block; }

/* When the panel is in select mode, every row reads as tappable —
   no link-style cues, no quick-action button leaking through.
   Selected rows get a soft emerald wash + emerald left rail. */
.notif-item.is-select-mode {
  cursor: pointer;
}
.notif-item.is-select-mode.is-selected {
  background: linear-gradient(90deg,
    rgba(0, 196, 114, 0.12) 0%,
    rgba(0, 196, 114, 0.04) 100%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.notif-item.is-select-mode:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.025);
}
/* P65.28 — padding REMOVED from the scroll container. With padding,
   sticky elements pin INSIDE the padded content area, leaving a
   transparent strip at the top through which notifications scroll
   visibly *before* the sticky filter bar can cover them. The padding
   is now applied to the inner content (filter bar + list-body) so
   stickies span the full panel width and edge-to-edge with no gap. */
.notif-list { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(0,196,114,.15) transparent; }
.notif-list::-webkit-scrollbar { width: 3px; }
.notif-list::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(0,196,114,.12); border-radius: 3px; }
.notif-list::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.25); }
.notif-item {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 2px;
  display: flex; gap: 10px; cursor: pointer; transition: all .15s ease;
  border: 1px solid transparent;
}
.notif-item:hover { background: rgba(0,196,114,.04); border-color: rgba(0,196,114,.08); }
.notif-item-unread { background: rgba(0,196,114,.03); }
.notif-item-unread::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
  box-shadow: 0 0 6px rgba(0,196,114,.4);
}
.notif-text { flex: 1; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.notif-text strong { color: var(--text-0); font-weight: 600; }
.notif-time { font-size: 10px; color: var(--text-4); margin-top: 3px; }
.notif-empty { padding: 40px; text-align: center; color: var(--text-4); }

/* ═══════════════════════════════════════════════════════════════
   COMMENTS
   ═══════════════════════════════════════════════════════════════ */
.comment-section { padding: 0 20px 16px; }
.comment-input-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; background: var(--bg-3); border: 1px solid var(--border); border-radius: 24px; padding: 4px 4px 4px 12px; transition: border-color .2s; }
.comment-input-row:focus-within { border-color: rgba(0,196,114,.3); }
.comment-input {
  flex: 1; background: transparent; border: none;
  padding: 8px 4px; font-size: 13px;
  color: var(--text-0); outline: none; resize: none; min-height: 20px;
  max-height: 80px; line-height: 1.4; font-family: var(--font);
}
.comment-input::placeholder { color: var(--text-4); }
.comment-input:focus { border-color: transparent; }
.comment-input-row .btn { border-radius: 50%; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comment-item { display: flex; gap: 10px; margin-bottom: 12px; padding: 8px 10px; border-radius: var(--radius); transition: background .15s; }
.comment-item:hover { background: rgba(255,255,255,.02); }
.comment-body { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comment-author { font-size: 12px; font-weight: 600; color: var(--text-0); }
.comment-time { font-size: 10px; color: var(--text-4); }
.comment-text { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.comment-actions { display: flex; gap: 12px; margin-top: 3px; }
.comment-action { font-size: 11px; color: var(--text-4); cursor: pointer; display: flex; align-items: center; gap: 3px; transition: color .15s; }
.comment-action:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   TOP TOKEN LIST (right sidebar)
   ═══════════════════════════════════════════════════════════════ */
.top-token-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background var(--transition);
}
.top-token-row:hover { background: var(--bg-hover); margin: 0 -8px; padding: 8px; border-radius: var(--radius-s); }
.top-token-row:last-child { border-bottom: none; }
.top-rank { width: 20px; font-size: 12px; color: var(--text-4); font-weight: 700; text-align: center; flex-shrink: 0; }
.top-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-change { font-size: 11px; font-weight: 600; font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat-grid { display: grid; gap: 10px; }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.08);
  border-radius: 10px; padding: 14px 16px; text-align: left;
  position: relative; overflow: hidden;
}
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, rgba(0,196,114,.15), transparent); }
.stat-label { font-size: 9px; font-weight: 600; color: var(--text-4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.stat-value { font-size: 18px; font-weight: 800; color: var(--text-0); font-family: var(--mono); letter-spacing: -.02em; }

/* ═══════════════════════════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */
.leader-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(0,196,114,.04); cursor: pointer;
  transition: all .15s; border-radius: 8px; margin: 0 4px;
}
.leader-row:hover { background: rgba(0,196,114,.03); border-color: transparent; }
.leader-rank {
  width: 32px; font-size: 18px; font-weight: 800; font-family: var(--mono);
  text-align: center; flex-shrink: 0;
}
.leader-info { flex: 1; min-width: 0; }
.leader-title { font-size: 14px; font-weight: 600; color: var(--text-0); }
.leader-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.leader-value { text-align: right; margin-right: 12px; }
.leader-value-main { font-size: 15px; font-weight: 700; color: var(--text-0); font-family: var(--mono); }
.leader-value-sub { font-size: 11px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════

   WAR ROOM — Live scrolling feed
   ═══════════════════════════════════════════════════════════════ */
.warroom { background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;overflow:hidden; }
.warroom-header {
  padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,rgba(196,64,64,.03),transparent 50%,rgba(0,196,114,.03));
}
.warroom-title { font-size:15px;font-weight:800;color:var(--text-0);display:flex;align-items:center;gap:8px; }
.warroom-feed { max-height:500px;overflow-y:auto;padding:4px 0; }
.warroom-item {
  padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;
  display:flex;align-items:center;gap:10px;animation:slideInRight .3s ease;
  transition:background .15s;cursor:pointer;
}
.warroom-item:hover { background:var(--bg-hover); }
.warroom-type {
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.warroom-time { font-size:9px;color:var(--text-4);font-family:var(--mono);flex-shrink:0;width:28px; }

/* Opportunity Card */
.opp-card {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;padding:16px;
  margin-bottom:10px;transition:border-color .2s;cursor:pointer;position:relative;overflow:hidden;
}
.opp-card:hover { border-color:rgba(0,196,114,.18); }
.opp-card::before {
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px;
}
.opp-early::before { background:var(--accent); }
.opp-stealth::before { background:var(--blue); }
.opp-momentum::before { background:var(--orange); }
.opp-danger::before { background:var(--red); }
.opp-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.opp-ticker { font-size:18px;font-weight:800;color:var(--text-0);font-family:var(--mono); }
.opp-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px; }
.opp-metric { font-size:11px; }
.opp-metric-label { color:var(--text-4);font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; }
.opp-metric-value { color:var(--text-0);font-weight:700;font-family:var(--mono);margin-top:2px; }
.opp-confidence {
  display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-3);
  border-radius:var(--radius-s);font-size:12px;
}
.opp-confidence-bar { flex:1;height:4px;background:var(--bg-4);border-radius:2px;overflow:hidden; }
.opp-confidence-fill { height:100%;border-radius:2px; }

/* You Are Early popup */
@keyframes earlyBurst { 0% { opacity:0;transform:scale(.5); } 50% { opacity:1;transform:scale(1.05); } 100% { transform:scale(1); } }
@keyframes earlyGlow { 0%,100% { box-shadow:0 0 20px rgba(0,196,114,.2); } 50% { box-shadow:0 0 40px rgba(0,196,114,.4); } }
.early-popup {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5000;
  background:var(--bg-2);border:2px solid var(--accent);border-radius:var(--radius-l);
  padding:32px 48px;text-align:center;animation:earlyBurst .5s ease,earlyGlow 2s ease infinite;
  box-shadow:0 0 60px rgba(0,196,114,.15);display:none;
}
.early-popup.show { display:block; }
.early-popup-title { font-size:28px;font-weight:900;color:var(--accent);margin-bottom:8px;letter-spacing:.02em; }
.early-popup-sub { font-size:14px;color:var(--text-2);margin-bottom:4px; }
.early-popup-stat { font-size:12px;color:var(--text-3);font-family:var(--mono); }

/* FOMO Detonator bar */
.fomo-bar {
  background:linear-gradient(90deg,rgba(196,64,64,.06),rgba(107,92,174,.04));
  border:1px solid rgba(196,64,64,.12);border-radius:10px;padding:10px 14px;
  margin-bottom:10px;display:flex;align-items:center;gap:10px;font-size:12px;
  animation:fadeUp .3s ease;cursor:pointer;transition:border-color .15s;
}
.fomo-bar:hover { border-color:rgba(196,64,64,.25); }
.fomo-count { font-size:16px;font-weight:800;color:var(--red);font-family:var(--mono);animation:numberPop .5s ease; }

/* Token DNA */
.dna-bar { display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1px;margin:6px 0; }
.dna-segment { border-radius:2px;transition:flex .3s; }
.dna-legend { display:flex;gap:12px;font-size:10px;color:var(--text-3);margin-top:6px; }
.dna-dot { width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:3px; }

/* Market Emotion Gauge */
.emotion-gauge { display:flex;align-items:center;gap:8px; }
.emotion-bar { flex:1;height:8px;border-radius:4px;overflow:hidden;background:var(--bg-4);position:relative; }
.emotion-fill { height:100%;border-radius:4px;transition:width .5s; }
.emotion-needle {
  position:absolute;top:-3px;width:2px;height:14px;background:#fff;border-radius:1px;
  transition:left .5s;
}
.emotion-labels { display:flex;justify-content:space-between;font-size:9px;color:var(--text-4);margin-top:3px; }

/* Quick action strip */
.quick-actions {
  display:flex;gap:4px;margin-top:6px;
}
.quick-action {
  padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;
  background:var(--bg-3);color:var(--text-3);border:1px solid rgba(0,196,114,.06);
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:3px;
}
.quick-action:hover { background:rgba(0,196,114,.04);color:var(--accent);border-color:rgba(0,196,114,.15); }

/* Whale profile cards */
.whale-card {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:16px;margin-bottom:10px;transition:border-color .2s;
}
.whale-card:hover { border-color:rgba(0,196,114,.18); }
.whale-header { display:flex;align-items:center;gap:14px;margin-bottom:14px; }
.whale-addr { font-family:var(--mono);font-size:13px;color:var(--text-0);font-weight:600; }
.whale-type { font-size:10px;font-weight:700;letter-spacing:.04em; }
.whale-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
.whale-stat-val { font-size:15px;font-weight:800;color:var(--text-0);font-family:var(--mono); }
.whale-stat-lbl { font-size:9px;color:var(--text-4);font-weight:600;letter-spacing:.05em;text-transform:uppercase; }
.whale-holdings { font-size:12px; }
.whale-holding-row {
  display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);
}

/* Auto-discovery banner */
.discovery-banner {
  background:var(--bg-2);
  border:1px solid rgba(0,196,114,.12);border-radius:var(--radius);padding:16px 18px;
  margin-bottom:14px;position:relative;
}
.discovery-title {
  font-size:11px;font-weight:700;color:var(--accent);margin-bottom:12px;
  display:flex;align-items:center;gap:6px;letter-spacing:.06em;text-transform:uppercase;
}
.discovery-title .live-dot-sm {
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:breathe 1.5s infinite;
}
.discovery-cards { display:flex;gap:10px;overflow-x:auto;padding-bottom:2px; }
.discovery-cards::-webkit-scrollbar { display:none; }
.discovery-card {
  flex:1;min-width:0;background:var(--bg-3);border:1px solid rgba(0,196,114,.12);
  border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .2s;
  position:relative;
}
.discovery-card:hover { border-color:rgba(0,196,114,.22); }
.dc-ticker { font-size:15px;font-weight:800;color:var(--text-0);font-family:var(--mono);letter-spacing:-.01em; }
.dc-title { font-size:11px;color:var(--text-4);margin:4px 0 8px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dc-stats { display:flex;align-items:baseline;gap:8px; }
.dc-change { font-size:13px;font-weight:700;font-family:var(--mono); }
.dc-score {
  font-size:10px;font-weight:600;font-family:var(--mono);
  color:var(--text-3);
}
.dc-meta { font-size:10px;color:var(--text-4);margin-top:8px;font-family:var(--mono);display:flex;gap:10px; }

/* AI Companion tooltip */
.ai-insight {
  background:linear-gradient(135deg,rgba(107,92,174,.06),rgba(61,127,196,.04));
  border:1px solid rgba(107,92,174,.12);border-left:3px solid var(--purple);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:10px 14px;margin-bottom:10px;
  font-size:12px;line-height:1.5;
}
.ai-insight-label { font-size:9px;font-weight:700;color:var(--purple);letter-spacing:.08em;margin-bottom:3px;text-transform:uppercase; }
.ai-insight-text { color:var(--text-2); }

/* Terminal view */
.terminal-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.terminal-panel {

  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:10px;padding:14px;
}
.terminal-panel-title { font-size:10px;font-weight:700;color:var(--text-4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px; }
@media(max-width:700px) { .terminal-grid { grid-template-columns:1fr; } }

/* Token Terminal Page — Full Bloomberg-level view */
.token-page { animation:fadeUp .3s ease; }
.token-hero {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:24px;margin-bottom:12px;
}
.token-hero-top { display:flex;align-items:flex-start;gap:20px;margin-bottom:16px; }
.token-hero-ticker { font-size:28px;font-weight:900;color:var(--text-0);font-family:var(--mono);letter-spacing:-.01em; }
.token-hero-price { font-size:36px;font-weight:900;color:var(--text-0);font-family:var(--mono);letter-spacing:-.02em; }
.token-hero-change { font-size:16px;font-weight:700;font-family:var(--mono);margin-top:4px; }
.token-stats-row { display:flex;gap:20px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px; }
.token-stat-item { display:flex;flex-direction:column;gap:2px; }
.token-stat-label { font-size:9px;font-weight:600;color:var(--text-4);letter-spacing:.06em;text-transform:uppercase; }
.token-stat-value { font-size:14px;font-weight:700;color:var(--text-0);font-family:var(--mono); }
.token-trade-panel {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;padding:18px;margin-bottom:12px;
}
.token-community { margin-top:12px; }
.token-community-title { font-size:14px;font-weight:700;color:var(--text-0);margin-bottom:12px; }
.token-lifecycle {
  display:flex;align-items:center;gap:0;margin:10px 0;
}
.lifecycle-stage {
  flex:1;height:4px;border-radius:2px;position:relative;
}
.lifecycle-dot {
  position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-2);
}
.lifecycle-label { font-size:9px;color:var(--text-4);text-align:center;margin-top:10px; }

/* ═══════════════════════════════════════════════════════════════
   MONETIZATION — Pro Wall, Boosts, Creator Dashboard
   ═══════════════════════════════════════════════════════════════ */
/* Pro badge */
.pro-badge {
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;
  font-size:9px;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(135deg,rgba(191,162,78,.15),rgba(196,125,42,.1));
  color:var(--gold);border:1px solid rgba(191,162,78,.2);
}

/* Paywall blur */
.paywall-blur {
  position:relative;user-select:none;
}
.paywall-blur::after {
  content:'';position:absolute;inset:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  background:rgba(10,11,15,.5);border-radius:inherit;z-index:2;
}
.paywall-cta {
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:20px;
}
.paywall-cta-title { font-size:16px;font-weight:800;color:var(--text-0);margin-bottom:6px; }
.paywall-cta-sub { font-size:12px;color:var(--text-3);margin-bottom:14px;max-width:280px; }
.paywall-lock { font-size:24px;margin-bottom:10px;opacity:.4; }

/* Boost indicator */
.boost-badge {
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;
  font-size:9px;font-weight:700;letter-spacing:.04em;
  background:rgba(196,125,42,.1);color:var(--orange);border:1px solid rgba(196,125,42,.15);
}

/* Creator dashboard */
.creator-stat-card {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);
  border-radius:10px;padding:16px;text-align:left;position:relative;overflow:hidden;
}
.creator-stat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
}
.creator-stat-card.green::before { background:linear-gradient(90deg,var(--accent),transparent); }
.creator-stat-card.gold::before { background:linear-gradient(90deg,var(--gold),transparent); }
.creator-stat-card.blue::before { background:linear-gradient(90deg,var(--blue),transparent); }
.creator-stat-card.purple::before { background:linear-gradient(90deg,var(--purple),transparent); }
.creator-stat-value { font-size:20px;font-weight:900;font-family:var(--mono);color:var(--text-0);margin-bottom:2px;letter-spacing:-.02em; }
.creator-stat-label { font-size:9px;font-weight:600;color:var(--text-4);letter-spacing:.06em;text-transform:uppercase; }
.creator-stat-sub { font-size:10px;color:var(--text-4);margin-top:4px; }

/* Pricing cards */
.pricing-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
@media(max-width:900px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .pricing-grid { grid-template-columns:1fr; } }
.pricing-card {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:22px;text-align:center;transition:border-color .2s;position:relative;
}
.pricing-card:hover { border-color:rgba(0,196,114,.2); }
.pricing-card.featured {
  border-color:rgba(0,196,114,.25);background:linear-gradient(180deg,rgba(0,196,114,.04),var(--bg-2));
}
.pricing-card.featured::before {
  content:'MOST POPULAR';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#000;font-size:9px;font-weight:800;padding:2px 12px;
  border-radius:10px;letter-spacing:.06em;
}
.pricing-name { font-size:18px;font-weight:800;color:var(--text-0);margin-bottom:4px; }
.pricing-price { font-size:32px;font-weight:900;color:var(--text-0);font-family:var(--mono);margin:12px 0; }
.pricing-price span { font-size:14px;color:var(--text-3);font-weight:400; }
.pricing-features { text-align:left;margin:16px 0;font-size:12px; }
.pricing-feature { padding:5px 0;color:var(--text-2);display:flex;align-items:center;gap:6px; }
.pricing-feature-check { color:var(--accent);font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   VIRAL GROWTH — Referral, Share Alpha, Invite System
   ═══════════════════════════════════════════════════════════════ */
.referral-card {
  background:linear-gradient(135deg,rgba(0,196,114,.04),rgba(61,127,196,.02));
  border:1px solid rgba(0,196,114,.12);border-radius:12px;padding:22px;
  text-align:center;margin-bottom:16px;
}
.referral-code {
  display:inline-flex;align-items:center;gap:10px;background:var(--bg-3);border:1px solid rgba(0,196,114,.1);
  border-radius:8px;padding:10px 18px;font-family:var(--mono);font-size:13px;
  color:var(--accent);font-weight:700;letter-spacing:.02em;margin:12px 0;cursor:pointer;
  transition:border-color .15s;
}
.referral-code:hover { border-color:rgba(0,196,114,.25); }
.referral-stat-row { display:flex;justify-content:center;gap:24px;margin-top:16px; }
.referral-stat { text-align:center; }
.referral-stat-val { font-size:20px;font-weight:800;color:var(--text-0);font-family:var(--mono); }
.referral-stat-lbl { font-size:10px;color:var(--text-4);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:2px; }

/* Share alpha card (for external sharing) */
.share-alpha-preview {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:20px;max-width:360px;margin:0 auto;
}
.share-alpha-badge {
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:4px;
  font-size:10px;font-weight:700;background:rgba(0,196,114,.1);color:var(--accent);
  margin-bottom:10px;
}

/* Waitlist / invite gate */
.waitlist-overlay {
  position:fixed;inset:0;z-index:4000;background:var(--bg-0);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;
}
.waitlist-overlay.show { display:flex; }
.waitlist-counter {
  font-size:48px;font-weight:900;color:var(--accent);font-family:var(--mono);
  margin:20px 0;letter-spacing:-.02em;
}
.waitlist-sub { font-size:14px;color:var(--text-3);max-width:400px;line-height:1.6;margin-bottom:24px; }
.waitlist-input-row { display:flex;gap:8px;max-width:400px;width:100%; }

/* Revenue Dashboard */
.rev-hero {
  background:linear-gradient(135deg,rgba(0,196,114,.04),rgba(191,162,78,.02));
  border:1px solid rgba(0,196,114,.12);border-radius:12px;padding:24px;
  text-align:center;margin-bottom:16px;
}
.rev-total { font-size:36px;font-weight:900;color:var(--accent);font-family:var(--mono);letter-spacing:-.02em; }
.rev-label { font-size:9px;color:var(--text-4);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px; }
.rev-graph-wrap {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:18px;margin-bottom:16px;
}
.rev-bar-chart { display:flex;align-items:flex-end;gap:4px;height:100px;padding-top:10px; }
.rev-bar {
  flex:1;border-radius:3px 3px 0 0;transition:height .5s ease;position:relative;min-width:8px;
}
.rev-bar:hover { opacity:.8; }
.rev-bar-label {
  position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:8px;
  color:var(--text-4);white-space:nowrap;font-family:var(--mono);
}
.payout-card {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:12px;
  padding:18px;margin-bottom:16px;
}
.payout-available { font-size:24px;font-weight:900;color:var(--accent);font-family:var(--mono);letter-spacing:-.02em; }
.payout-methods { display:flex;gap:8px;margin-top:14px; }
.payout-method {
  flex:1;padding:12px;border:1px solid rgba(0,196,114,.08);border-radius:10px;
  text-align:center;cursor:pointer;transition:border-color .15s;
}
.payout-method:hover { border-color:rgba(0,196,114,.2);background:rgba(0,196,114,.03); }
.payout-method.selected { border-color:rgba(0,196,114,.25);background:rgba(0,196,114,.04); }

/* Revenue calculator */
.calc-slider { width:100%;accent-color:var(--accent); }
.calc-result {
  font-size:28px;font-weight:900;color:var(--accent);font-family:var(--mono);
  text-align:center;margin:12px 0;letter-spacing:-.02em;
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-s);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text-sm { height: 10px; width: 60%; margin-bottom: 6px; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; }
.skeleton-image { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); }
.skeleton-btn { width: 80px; height: 32px; border-radius: var(--radius-s); }

/* Full skeleton post card — P24. Mimics the shape of a real post card
   so the feed doesn't feel broken or empty while hydrating. */
.skeleton-post {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.skeleton-post-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.skeleton-post-name { width: 120px; height: 12px; margin-bottom: 6px; }
.skeleton-post-meta { width: 80px; height: 10px; }
.skeleton-post-body-1 { width: 95%; height: 14px; margin-bottom: 8px; }
.skeleton-post-body-2 { width: 75%; height: 14px; margin-bottom: 14px; }
.skeleton-post-meta-row {
  display: flex; gap: 18px; margin-top: 12px;
}
.skeleton-post-meta-row .skeleton { height: 11px; width: 40px; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 40px 24px; background: var(--bg-2);
  border: 1px dashed rgba(0,196,114,.12); border-radius: 12px; margin-top: 4px;
}
.empty-icon { font-size: 36px; margin-bottom: 12px; opacity: .2; }
.empty-title { font-size: 14px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; letter-spacing: -.01em; }
.empty-desc { font-size: 12px; color: var(--text-4); max-width: 280px; margin: 0 auto 14px; line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════════
   ADDICTIVE SOCIAL FEATURES
   ═══════════════════════════════════════════════════════════════ */
/* Call button */
.call-btn {
  display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:8px;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  background:var(--bg-2);
  border:1px solid rgba(0,196,114,.15);color:var(--accent);position:relative;overflow:hidden;
  letter-spacing:.02em;
}
.call-btn::before {
  content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,196,114,.06),transparent 60%);
  opacity:0;transition:opacity .25s;
}
.call-btn:hover::before { opacity:1; }
.call-btn:hover { border-color:rgba(0,196,114,.35);box-shadow:0 0 20px rgba(0,196,114,.1),0 0 0 1px rgba(0,196,114,.05) inset; }
.call-btn:active { transform:scale(.96); }
.call-btn.called {
  background:linear-gradient(135deg,rgba(0,196,114,.08),rgba(0,196,114,.02));
  border-color:rgba(0,196,114,.3);color:var(--accent);animation:callSuccess .7s cubic-bezier(.4,0,.2,1);
}
.call-btn.called.profit { box-shadow:0 0 16px rgba(0,196,114,.12),0 0 0 1px rgba(0,196,114,.1) inset; }
.call-btn.called.loss { border-color:rgba(196,64,64,.2);color:var(--red);background:linear-gradient(135deg,rgba(196,64,64,.06),rgba(196,64,64,.01)); }
.call-btn .rocket { font-size:12px;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-block; }
.call-btn:hover .rocket { transform:translateY(-3px) rotate(-20deg) scale(1.15); }
@keyframes callSuccess {
  0% { transform:scale(1);box-shadow:0 0 0 0 rgba(0,196,114,.3); }
  20% { transform:scale(1.06); }
  40% { box-shadow:0 0 0 8px rgba(0,196,114,0); }
  60% { transform:scale(.98); }
  100% { transform:scale(1);box-shadow:0 0 16px rgba(0,196,114,.12); }
}
@keyframes callConfetti { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-30px) scale(0)} }
.call-confetti { position:absolute;pointer-events:none;font-size:10px;animation:callConfetti .8s ease forwards; }

/* Call streak */
.call-streak { display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--gold);margin-left:6px; }
.call-streak .fire { font-size:11px;animation:fireGlow 1.5s ease infinite; }
@keyframes fireGlow { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.4)} }

/* Proof of alpha badge */
.alpha-badge { font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:3px; }
.alpha-early { background:rgba(0,196,114,.1);color:#00C472;border:1px solid rgba(0,196,114,.2);animation:fadeIn .3s ease; }
.alpha-early::before { content:"\u2713";font-size:8px; }
.alpha-momentum { background:rgba(196,125,42,.1);color:#C47D2A;border:1px solid rgba(196,125,42,.2); }
.alpha-momentum::before { content:"\u26A1";font-size:8px; }
.alpha-late { background:rgba(196,64,64,.08);color:var(--red);border:1px solid rgba(196,64,64,.15); }
.alpha-late::before { content:"\u23F0";font-size:8px; }

/* Alpha proof detail line */
.alpha-proof {
  font-size:10px;color:var(--text-3);font-family:var(--mono);padding:4px 0;
  display:flex;align-items:center;gap:8px;margin-top:2px;
}
.alpha-proof strong { color:var(--accent); }

/* Post earnings badge */
.post-earnings {
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--gold);background:linear-gradient(135deg,rgba(191,162,78,.08),rgba(191,162,78,.03));
  padding:3px 10px;border-radius:10px;border:1px solid rgba(191,162,78,.15);
  animation:fadeIn .4s ease;
}
.post-earnings:hover { background:linear-gradient(135deg,rgba(191,162,78,.12),rgba(191,162,78,.05)); }
.post-earnings .coin { font-size:12px;animation:coinSpin 2s linear infinite; }
@keyframes coinSpin { 0%,100%{transform:rotateY(0)} 50%{transform:rotateY(180deg)} }

/* Earnings breakdown tooltip */
.earnings-detail {
  font-size:10px;color:var(--text-3);font-family:var(--mono);
  display:flex;gap:10px;margin-left:4px;
}

/* Impact score */
.impact-meter { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);margin-top:4px; }
.impact-bar { width:60px;height:4px;background:var(--bg-4);border-radius:2px;overflow:hidden; }
.impact-fill { height:100%;border-radius:2px; }

/* Post lifecycle */
.lifecycle-tag { font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.03em; }
.lc-early { background:rgba(0,196,114,.1);color:#00C472; }
.lc-trending { background:rgba(196,125,42,.1);color:#C47D2A; }
.lc-peak { background:rgba(107,92,174,.1);color:#8070B8; }
.lc-fading { background:rgba(255,255,255,.04);color:var(--text-4); }

/* You are early badge */
.early-badge {
  display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;
  color:#00C472;background:linear-gradient(135deg,rgba(0,196,114,.08),rgba(0,196,114,.03));
  padding:3px 10px;border-radius:10px;border:1px solid rgba(0,196,114,.12);
  animation:earlyPop .5s ease;position:relative;
}
.early-badge::after {
  content:"Top 3%";margin-left:4px;font-size:8px;color:rgba(0,196,114,.5);font-weight:600;
}
@keyframes earlyPop { 0%{transform:scale(0.8);opacity:0} 50%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* Missed this card */
.missed-card {
  background:linear-gradient(135deg,rgba(196,64,64,.04),rgba(196,64,64,.01));
  border:1px solid rgba(196,64,64,.12);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:10px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;
}
.missed-card:hover { border-color:rgba(196,64,64,.25);transform:translateY(-1px); }
.missed-card .missed-pain { font-size:20px;flex-shrink:0; }
.missed-card .missed-info { flex:1; }
.missed-card .missed-gain { font-size:16px;font-weight:800;color:var(--red);font-family:var(--mono); }

/* Live trend bar */
.trend-ticker {
  background:var(--bg-1);
  border-bottom:1px solid var(--border);padding:7px 0;
  overflow:hidden;white-space:nowrap;
  /* Fixed (not sticky) so it always sits directly below the fixed
     header regardless of scroll context. !important + GPU layer to
     match the header — see layout.css for the full reasoning. */
  position: fixed !important;
  top: var(--header-h) !important;
  left: 0; right: 0;
  z-index: 150;
  height: var(--ticker-h); display: flex; align-items: center;
  transform: translateZ(0);
  will-change: transform;
}
.trend-ticker::before,.trend-ticker::after {
  content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;
}
.trend-ticker::before { left:0;background:linear-gradient(90deg,var(--bg-0),transparent); }
.trend-ticker::after { right:0;background:linear-gradient(90deg,transparent,var(--bg-0)); }
.trend-ticker-inner {
  display:inline-flex;gap:16px;animation:tickerScroll 60s linear infinite;
}
.trend-ticker:hover .trend-ticker-inner { animation-play-state:paused; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trend-ticker-item {
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  color:var(--text-2);cursor:pointer;flex-shrink:0;transition:all .15s;padding:4px 10px;
  text-decoration:none;border-radius:999px;border:1px solid transparent;
}
.trend-ticker-item:hover {
  color:var(--text-0);background:rgba(255,255,255,.03);border-color:var(--border);
}
.trend-ticker-item .tt-sym {
  font-family:var(--mono);font-weight:800;color:var(--text-0);letter-spacing:.02em;
  font-size:11px;
}
.trend-ticker-item .tt-price {
  font-family:var(--mono);font-weight:700;color:var(--text-1);font-size:11px;
}
.trend-ticker-item .tt-change {
  font-size:10px;font-weight:700;letter-spacing:.01em;
}
.trend-ticker-item .tt-change.pos { color:var(--accent); }
.trend-ticker-item .tt-change.neg { color:var(--red); }
.trend-ticker-item .hot-dot { width:5px;height:5px;border-radius:50%;background:var(--accent);animation:breathe 1.5s infinite; }

/* Content battle */
.battle-card {
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;
}
.battle-vs {
  display:flex;align-items:center;gap:12px;margin:12px 0;
}
.battle-side {
  flex:1;text-align:center;padding:12px;border-radius:var(--radius);cursor:pointer;
  transition:all .2s;border:1px solid var(--border);
}
.battle-side:hover { border-color:var(--accent-border);background:var(--accent-dim); }
.battle-side.voted { border-color:var(--accent-border);background:var(--accent-dim); }

/* Rug warning */
.rug-warn {
  display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;
  color:var(--red);background:var(--red-dim);padding:2px 7px;border-radius:4px;
  border:1px solid rgba(196,64,64,.15);cursor:pointer;
}

/* Missed this */
.missed-card {
  background:linear-gradient(135deg,rgba(196,64,64,.04),rgba(196,64,64,.01));
  border:1px solid rgba(196,64,64,.12);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:10px;cursor:pointer;transition:all .15s;
}
.missed-card:hover { border-color:rgba(196,64,64,.25); }

/* Attention score */
.attn-score {
  font-size:10px;font-weight:700;font-family:var(--mono);
  padding:2px 6px;border-radius:4px;
}


/* ═══════════════════════════════════════════════════════════════
   CASINO FEED + STATUS WAR + MONEY VISIBILITY
   ═══════════════════════════════════════════════════════════════ */
/* Quick reactions */
.reactions-bar { display:flex;gap:2px;margin-top:4px; }
.reaction-btn { 
  padding:3px 8px;border-radius:12px;font-size:12px;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--border);transition:all .15s;
  display:flex;align-items:center;gap:3px;
}
.reaction-btn:hover { transform:scale(1.15);border-color:rgba(0,196,114,.15); }
.reaction-btn:active { transform:scale(.9); }
.reaction-btn.active { background:rgba(0,196,114,.08);border-color:rgba(0,196,114,.2); }
.reaction-btn .count { font-size:9px;color:var(--text-3);font-family:var(--mono);font-weight:600; }

/* Chaos tags */
.chaos-tag {
  display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:800;
  padding:2px 6px;border-radius:3px;letter-spacing:.05em;animation:fadeIn .3s ease;
}
.chaos-gem { background:rgba(0,196,114,.1);color:#00C472;border:1px solid rgba(0,196,114,.15); }
.chaos-rug { background:rgba(196,64,64,.1);color:var(--red);border:1px solid rgba(196,64,64,.15); }
.chaos-explode { background:rgba(196,125,42,.1);color:var(--orange);border:1px solid rgba(196,125,42,.15);animation:breathe 1.5s infinite; }
.chaos-scam { background:rgba(196,64,64,.15);color:var(--red);border:1px solid rgba(196,64,64,.2); }

/* Money visibility bar */
.money-bar {
  display:flex;align-items:center;gap:10px;padding:6px 10px;margin:4px 0 6px;
  background:linear-gradient(90deg,rgba(191,162,78,.03),transparent);
  border-left:2px solid rgba(191,162,78,.2);font-size:10px;color:var(--text-3);
  font-family:var(--mono);
}
.money-bar strong { color:var(--gold); }
.money-bar .green { color:var(--accent); }

/* Whale social proof */
.whale-social {
  display:flex;align-items:center;gap:6px;padding:5px 10px;margin:4px 0;
  background:rgba(61,127,196,.04);border:1px solid rgba(61,127,196,.08);
  border-radius:var(--radius-s);font-size:10px;color:var(--blue);
}
.whale-social .pulse { width:6px;height:6px;border-radius:50%;background:var(--blue);animation:breathe 1.5s infinite; }

/* Status war leaderboard cards */
.status-crown {
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--bg-2);border:1px solid rgba(0,196,114,.08);border-radius:10px;
  margin-bottom:8px;cursor:pointer;transition:border-color .15s;
}
.status-crown:hover { border-color:rgba(0,196,114,.2); }
.status-crown .crown-icon { font-size:18px;flex-shrink:0; }
.status-crown .crown-title { font-size:10px;font-weight:700;color:var(--text-3);letter-spacing:.04em; }
.status-crown .crown-name { font-size:13px;font-weight:700;color:var(--text-0); }
.status-crown .crown-stat { font-size:11px;font-family:var(--mono);margin-left:auto; }

/* Share card preview */
.share-card {
  background:linear-gradient(135deg,var(--bg-2),var(--bg-3));border:1px solid var(--accent-border);
  border-radius:var(--radius-l);padding:20px;text-align:center;max-width:320px;margin:12px auto;
}
.share-card-ticker { font-size:24px;font-weight:800;color:var(--accent);font-family:var(--mono); }
.share-card-gain { font-size:32px;font-weight:900;margin:8px 0; }
.share-card-user { font-size:12px;color:var(--text-3); }
.share-card-brand { font-size:10px;color:var(--text-4);margin-top:12px;letter-spacing:.1em; }

/* Call performance stats */
.call-stats {
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;
}
.call-stat {
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:10px;text-align:center;
}
.call-stat .val { font-size:18px;font-weight:800;font-family:var(--mono);color:var(--text-0); }
.call-stat .lbl { font-size:9px;color:var(--text-4);font-weight:600;letter-spacing:.04em;margin-top:3px; }

/* Casino pulse animation on posts */
@keyframes casinoPulse { 0%{box-shadow:inset 0 0 0 0 rgba(0,196,114,0)} 50%{box-shadow:inset 0 0 20px rgba(0,196,114,.03)} 100%{box-shadow:inset 0 0 0 0 rgba(0,196,114,0)} }
.post-hot { animation:casinoPulse 3s ease infinite; }
@keyframes redPulse { 0%{box-shadow:inset 0 0 0 0 rgba(196,64,64,0)} 50%{box-shadow:inset 0 0 20px rgba(196,64,64,.03)} 100%{box-shadow:inset 0 0 0 0 rgba(196,64,64,0)} }
.post-dump { animation:redPulse 3s ease infinite; }

/* Live reaction float */
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-40px) scale(1.3)} }
.float-reaction {
  position:absolute;right:16px;bottom:60px;font-size:18px;pointer-events:none;
  animation:floatUp 1.2s ease forwards;z-index:5;
}

/* ═══════════════════════════════════════════════════════════════
   PSYCHOLOGICAL ENGINE
   ═══════════════════════════════════════════════════════════════ */
/* Live moment alert */
.live-moment {
  background:linear-gradient(135deg,rgba(196,64,64,.06),rgba(196,125,42,.04));
  border:1px solid rgba(196,64,64,.2);border-radius:var(--radius);padding:14px 16px;
  margin-bottom:14px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
  animation:momentPulse 2s ease infinite;
}
.live-moment:hover { border-color:rgba(196,64,64,.35);transform:translateY(-1px); }
@keyframes momentPulse { 0%,100%{box-shadow:0 0 0 0 rgba(196,64,64,.1)} 50%{box-shadow:0 0 0 6px rgba(196,64,64,0)} }
.live-moment-tag {
  font-size:9px;font-weight:800;color:var(--red);letter-spacing:.1em;
  display:flex;align-items:center;gap:6px;margin-bottom:6px;text-transform:uppercase;
}
.live-moment-tag .pulse-ring { width:8px;height:8px;border-radius:50%;background:var(--red);animation:ripple 1.5s infinite; }
.live-moment-body { font-size:14px;font-weight:700;color:var(--text-0); }
.live-moment-meta { font-size:11px;color:var(--text-3);margin-top:4px;font-family:var(--mono); }

/* Ghost mode — social proof */
.ghost-bar {
  display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-4);
  padding:4px 0;margin-bottom:4px;
}
.ghost-eyes { display:flex;gap:-2px; }
.ghost-eye { width:14px;height:14px;border-radius:50%;border:1.5px solid var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-size:7px;margin-left:-4px; }

/* Clout explosion */
.clout-banner {
  background:linear-gradient(135deg,rgba(107,92,174,.08),rgba(160,90,120,.05));
  border:1px solid rgba(107,92,174,.2);border-radius:var(--radius);padding:14px 16px;
  text-align:center;margin-bottom:12px;animation:cloutIn .5s ease;
}
@keyframes cloutIn { 0%{opacity:0;transform:scale(.9)} 50%{transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }
.clout-title { font-size:16px;font-weight:800;color:var(--text-0);margin-bottom:4px; }
.clout-sub { font-size:11px;color:var(--text-3); }

/* Fear of missing panel */
.fomo-panel {
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-bottom:12px;
}
.fomo-title { font-size:10px;font-weight:700;color:var(--text-4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px; }
.fomo-item {
  display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;
}
.fomo-item:last-child { border:none; }
.fomo-emoji { font-size:16px;flex-shrink:0; }
.fomo-gain { font-size:13px;font-weight:800;color:var(--red);font-family:var(--mono);margin-left:auto; }

/* Secret / locked posts */
.secret-post {
  position:relative;filter:blur(6px);pointer-events:none;user-select:none;
}
.secret-overlay {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:5;background:rgba(10,11,15,.6);border-radius:var(--radius);
  cursor:pointer;filter:none;pointer-events:all;
}
.secret-lock { font-size:28px;margin-bottom:8px;opacity:.6; }
.secret-text { font-size:13px;font-weight:700;color:var(--text-0); }
.secret-sub { font-size:11px;color:var(--text-3);margin-top:4px; }

/* Emotion tracker */
.emotion-bar {
  display:flex;gap:12px;padding:10px 14px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;
  font-size:11px;align-items:center;
}
.emotion-item { display:flex;align-items:center;gap:4px;color:var(--text-3); }
.emotion-meter { width:40px;height:4px;background:var(--bg-4);border-radius:2px;overflow:hidden; }
.emotion-fill { height:100%;border-radius:2px; }
.emotion-label { font-weight:600; }

/* Main character timeline */
.mc-timeline {
  background:var(--bg-2);border:1px solid rgba(0,196,114,.12);border-radius:var(--radius-l);
  padding:20px;margin-bottom:16px;position:relative;
}
.mc-timeline:hover { transform: none; }
.mc-timeline-title { font-size:14px;font-weight:700;color:var(--text-0);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.mc-event {
  display:flex;gap:12px;padding:8px 0;position:relative;
}
.mc-event::before {
  content:'';position:absolute;left:7px;top:24px;bottom:-8px;width:1.5px;
  background:linear-gradient(to bottom,var(--border),transparent);
}
.mc-event:last-child::before { display:none; }
.mc-dot { width:16px;height:16px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px; }
.mc-text { font-size:12px;color:var(--text-1); }
.mc-time { font-size:10px;color:var(--text-4);font-family:var(--mono); }
.mc-highlight { color:var(--accent);font-weight:700; }

/* Social proof counter */
.social-proof {
  display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--text-4);
  animation:fadeIn .3s ease;
}
.social-proof .users-icon { font-size:11px; }

/* Feed interrupt */
.feed-interrupt {
  background:linear-gradient(135deg,rgba(196,64,64,.06),rgba(107,92,174,.04));
  border:1px solid rgba(196,64,64,.15);border-radius:var(--radius);padding:16px;
  margin:16px 0;text-align:center;animation:interruptIn .4s ease;cursor:pointer;
}
@keyframes interruptIn { 0%{opacity:0;transform:scaleX(.95)} 100%{opacity:1;transform:scaleX(1)} }
.feed-interrupt:hover { border-color:rgba(196,64,64,.3); }

/* Influence shock */
.influence-shock {
  background:linear-gradient(135deg,rgba(0,196,114,.05),rgba(107,92,174,.03));
  border:1px solid rgba(0,196,114,.15);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:8px;
}


/* White theme specific overrides */
[data-theme="white"] .header { border-bottom: 1px solid rgba(0,0,0,.06); }
[data-theme="white"] .sidebar-left { border-right: 1px solid rgba(0,0,0,.06); }
[data-theme="white"] .post { box-shadow: 0 0 0 1px rgba(0,0,0,.06); border-color: rgba(0,0,0,.06); }
[data-theme="white"] .post:hover { border-color: rgba(0,0,0,.12); }
[data-theme="white"] .card { border-color: rgba(0,0,0,.06); }
[data-theme="white"] .btn-primary { color: #000; }
[data-theme="white"] .btn-secondary { background: var(--bg-4); border-color: rgba(0,0,0,.08); }
[data-theme="white"] .avatar { border: 1px solid rgba(0,0,0,.06); }
[data-theme="white"] .input { background: var(--bg-3); border-color: rgba(0,0,0,.08); color: var(--text-0); }
[data-theme="white"] .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,196,114,.1); }
[data-theme="white"] .trend-ticker { background: var(--bg-0); border-bottom-color: rgba(0,0,0,.06); }
[data-theme="white"] .discovery-card { background: var(--bg-3); border-color: rgba(0,0,0,.06); }
[data-theme="white"] .nav-item-active { background: rgba(0,196,114,.06); }

[data-theme="white"] .tag { background: var(--bg-4); border-color: rgba(0,0,0,.06); color: var(--text-2); }
[data-theme="white"] .signal-bar { background: transparent; }
[data-theme="white"] .money-bar { background: rgba(0,0,0,.02); border-left-color: rgba(0,0,0,.08); }
[data-theme="white"] .modal-overlay { background: rgba(0,0,0,.4); }
[data-theme="white"] .modal { background: var(--bg-0); border: 1px solid rgba(0,0,0,.1); }
[data-theme="white"] .dropdown-menu { background: var(--bg-0); border-color: rgba(0,0,0,.1); box-shadow: 0 4px 24px rgba(0,0,0,.12); }
[data-theme="white"] .toast { background: var(--text-0); color: var(--bg-0); }
[data-theme="white"] .call-btn { background: rgba(0,196,114,.06); border-color: rgba(0,196,114,.15); color: var(--accent); }
[data-theme="white"] .whale-social { background: rgba(0,196,114,.04); border-color: rgba(0,196,114,.08); }
[data-theme="white"] .ghost-eye { border-color: var(--bg-0); }

/* Dim theme minor overrides */
[data-theme="dim"] .post { border-color: rgba(255,255,255,.06); }
[data-theme="dim"] .card { border-color: rgba(255,255,255,.06); }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE (pre-auth) — see renderAuth() 'landing' branch
   ═══════════════════════════════════════════════════════════════ */

/* Landing widens the container; login/register stay 420px */
.auth-container.is-landing {
  max-width: 1080px;
}

.auth-landing {
  animation: fadeUp .5s cubic-bezier(.2,.7,.2,1);
}

/* ── Top meta row (badge + version tag) ── */
.auth-landing-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.auth-landing-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 4px;
  background: rgba(0,196,114,.08); border: 1px solid rgba(0,196,114,.22);
  color: var(--accent); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.auth-landing-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.auth-landing-version {
  font-family: var(--mono);
  font-size: 10px; color: var(--text-4);
  letter-spacing: .08em;
}

/* ── 2-column hero (stacks under 880px) ── */
.auth-landing-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}
@media (max-width: 880px) {
  .auth-landing-hero { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Headline (left col) ── */
.auth-landing-title {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 800; line-height: 1.02;
  color: var(--text-0);
  letter-spacing: -.04em;
  margin-bottom: 22px;
}
.auth-landing-title-em { color: var(--accent); }

/* Staggered word reveal — JS adds .word-show in sequence */
.auth-landing-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  margin-right: .18em;
}
.auth-landing-title .word.word-show {
  opacity: 1;
  transform: translateY(0);
}

.auth-landing-subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55; color: var(--text-2);
  margin-bottom: 32px;
  max-width: 520px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.auth-landing.ready .auth-landing-subtitle { opacity: 1; transform: translateY(0); }

/* CTA block (in left col, under subtitle) */
.auth-landing-cta {
  display: flex; gap: 10px; align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .65s, transform .6s ease .65s;
}
.auth-landing.ready .auth-landing-cta { opacity: 1; transform: translateY(0); }

.auth-landing-cta .btn-primary {
  font-size: 14px; font-weight: 700;
  padding: 13px 26px;
  letter-spacing: -.005em;
  box-shadow: 0 6px 20px -8px rgba(0,196,114,.45);
}
.auth-landing-cta .btn-secondary {
  font-size: 13px; font-weight: 600;
  padding: 13px 22px;
}
.auth-landing-cta-explore {
  background: transparent; border: none;
  color: var(--text-3); font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 10px 12px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
  font-family: inherit;
}
.auth-landing-cta-explore:hover {
  color: var(--text-0);
}
.auth-landing-cta-explore .auth-landing-explore-arrow {
  transition: transform .2s;
  font-size: 13px;
}
.auth-landing-cta-explore:hover .auth-landing-explore-arrow {
  transform: translateX(3px);
}

/* ── Mockup posts (right col) ── */
.auth-landing-mocks {
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .8s, transform .6s ease .8s;
}
.auth-landing.ready .auth-landing-mocks { opacity: 1; transform: translateY(0); }

.auth-mock-post {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 6px 18px -10px rgba(0,0,0,.5);
}
.auth-mock-head {
  display: flex; align-items: center; gap: 11px; margin-bottom: 9px;
}
.auth-mock-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0; letter-spacing: .02em;
}
.auth-mock-name {
  font-size: 13px; font-weight: 700; color: var(--text-0);
  letter-spacing: -.01em;
}
.auth-mock-time {
  font-size: 10px; color: var(--text-4); font-family: var(--mono);
  letter-spacing: .02em;
}
.auth-mock-body {
  font-size: 13px; line-height: 1.5; color: var(--text-1);
  margin-bottom: 10px;
}
.auth-mock-meta {
  display: flex; gap: 16px; font-size: 10px; color: var(--text-4);
  font-family: var(--mono); letter-spacing: .03em;
}

/* ── Promise card (full-width below hero) ── */
.auth-landing-promise {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 36px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .auth-landing-promise { grid-template-columns: 1fr; }
}
.auth-landing-promise-row {
  padding: 22px 24px;
  border-right: 1px solid var(--border);
}
.auth-landing-promise-row:last-child { border-right: none; }
@media (max-width: 720px) {
  .auth-landing-promise-row { border-right: none; border-bottom: 1px solid var(--border); }
  .auth-landing-promise-row:last-child { border-bottom: none; }
}
.auth-landing-promise-label {
  font-family: var(--mono);
  font-size: 9px; color: var(--accent);
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 12px;
}
.auth-landing-promise-title {
  font-size: 14px; font-weight: 700; color: var(--text-0);
  margin-bottom: 6px; letter-spacing: -.01em;
}
.auth-landing-promise-body {
  font-size: 12px; line-height: 1.55; color: var(--text-3);
}

/* ── Footer line ── */
.auth-landing-footnote {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-align: center;
  letter-spacing: .04em;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ── Live pulse: small social-proof anchor above the headline.
     Sits in the left column directly above the title. Five
     overlapping mini-avatars on the left + a "X traders posted
     in the last 60s" line on the right. The number rotates
     every ~3.5s via JS so the page feels alive. The livedot
     pulses constantly; on each rotation it briefly flashes
     brighter to draw the eye to the change. ── */
.auth-landing-pulse {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .55s ease .15s, transform .55s ease .15s;
}
.auth-landing.ready .auth-landing-pulse { opacity: 1; transform: translateY(0); }

.auth-landing-pulse-avatars {
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}
.auth-landing-pulse-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-0);
  margin-left: -7px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.auth-landing-pulse-avatar:first-child { margin-left: 0; }
.auth-landing-pulse-avatar:nth-child(1) { z-index: 5; }
.auth-landing-pulse-avatar:nth-child(2) { z-index: 4; }
.auth-landing-pulse-avatar:nth-child(3) { z-index: 3; }
.auth-landing-pulse-avatar:nth-child(4) { z-index: 2; }
.auth-landing-pulse-avatar:nth-child(5) { z-index: 1; }

.auth-landing-pulse-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: .01em;
}
.auth-landing-pulse-text #authLandingPulseCount {
  color: var(--accent);
  font-weight: 600;
  font-feature-settings: "tnum";
}
.auth-landing-pulse-livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,196,114,.7);
  animation: authLandingDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.auth-landing-pulse-livedot.flash {
  animation: authLandingDotFlash .6s ease-out, authLandingDotPulse 1.6s ease-in-out infinite .6s;
}
@keyframes authLandingDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
@keyframes authLandingDotFlash {
  0%   { transform: scale(1.6); box-shadow: 0 0 14px rgba(0,255,170,.95); }
  100% { transform: scale(1);   box-shadow: 0 0 6px rgba(0,196,114,.7); }
}

/* Subtitle emphasis — second sentence stands out as the heart-line.
   Used to give the trader a moment of "yes — that's me." */
.auth-landing-subtitle-em {
  color: var(--text-0);
  font-weight: 600;
  display: inline-block;
  margin-top: 4px;
}

/* ── Elevated promise rows ── small but real upgrades:
   • Subtle hover lift + accent border-top on hover for grip
   • Number-label gets stronger weight + tabular-nums
   • Title gets bumped to 16px (was 14px) so it lands as a
     statement, not a sub-bullet
   ── */
.auth-landing-promise {
  position: relative;
  /* Soft accent glow under the card to lift it off the page */
  box-shadow:
    0 1px 0 rgba(255,255,255,.025) inset,
    0 18px 50px -28px rgba(0,196,114,.18);
}
.auth-landing-promise-row {
  position: relative;
  transition: background .25s ease;
}
.auth-landing-promise-row::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.5), transparent);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.auth-landing-promise-row:hover { background: rgba(0,196,114,.025); }
.auth-landing-promise-row:hover::before { opacity: 1; }

.auth-landing-promise-label {
  font-feature-settings: "tnum";
}
.auth-landing-promise-title {
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -.012em;
  margin-bottom: 8px !important;
  line-height: 1.3;
}
.auth-landing-promise-body {
  line-height: 1.6 !important;
}

/* ── Elevated headline: tighter tracking + small textured accent
   on the em portion (faint underline that fades in with the page) ── */
.auth-landing-title {
  letter-spacing: -.045em !important;
}

@media (max-width: 880px) {
  .auth-landing-pulse { margin-bottom: 18px; }
  .auth-landing-pulse-avatar { width: 20px; height: 20px; }
  .auth-landing-pulse-text { font-size: 11px; }
}

/* ── Footer — slightly more presence, with a green accent dot ── */
.auth-landing-footnote {
  position: relative;
}
.auth-landing-footnote::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(0,196,114,.55);
  animation: authLandingDotPulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE CUSTOMIZATION (P27) — avatar/banner upload, inline rename
   ═══════════════════════════════════════════════════════════════ */

/* Media-edit overlay button — used for banner and avatar.
   Corner-badge pattern: small circular button that sits at the edge of
   the media. Appears on hover (desktop) or always-visible (touch). */
.profile-media-edit {
  position: absolute;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.profile-media-edit:hover {
  background: rgba(0, 0, 0, 0.92);
  border-color: var(--accent);
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.18), 0 4px 14px rgba(0, 0, 0, 0.45);
}
.profile-media-edit:active { transform: scale(0.96); }

/* Banner "Change banner" pill — bottom-right, visible but subtle */
.profile-media-edit-banner {
  bottom: 12px;
  right: 12px;
  padding: 7px 13px;
  gap: 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
}
.profile-banner:hover .profile-media-edit-banner,
.profile-media-edit-banner:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.profile-media-edit-banner span { display: inline-block; }

/* Avatar camera BADGE — small circular button tucked into the bottom-right
   quadrant of the avatar circle. No more strip-across-bottom aesthetic. */
.profile-media-edit-avatar {
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: 2.5px solid var(--bg-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 1;   /* always visible — discoverable */
}
.profile-media-edit-avatar:hover {
  background: var(--accent);
  border-color: var(--bg-1);
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.28), 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Avatar + banner become clickable as "view" targets. The cursor cue
   only shows when the respective image is set (otherwise there's
   nothing meaningful to view). */
.profile-avatar-wrap.has-image { cursor: zoom-in; }
.profile-banner.has-image { cursor: zoom-in; }

/* ═══════════════════════════════════════════════════════════════
   P65.269 — Profile banner social-links row (top-left).
   Floating chip row that overlays the banner.  Brand-color icons
   on dark frosted-glass chips for legibility on any banner.
   ═══════════════════════════════════════════════════════════════ */
.profile-social-row {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.profile-social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(8, 10, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--social-color, #fff);
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  transition: transform .14s ease,
              background .14s ease,
              border-color .14s ease,
              box-shadow .14s ease;
  /* SVG inherits the color via fill="currentColor" inside the
     SOCIAL_PLATFORMS svg strings, painted by --social-color. */
}
.profile-social-chip:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.85);
  border-color: var(--social-color, rgba(255, 255, 255, 0.35));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
              0 0 0 2px color-mix(in srgb, var(--social-color, #fff) 20%, transparent);
}
.profile-social-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-radius: 6px;
  background: rgba(8, 10, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .14s ease, border-color .14s ease;
}
.profile-social-edit:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.28);
}
/* Empty-state CTA (owner-only) — same chip footprint, mono dotted
   look so it doesn't compete visually with real socials. */
.profile-social-row-empty {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.72);
  border: 1px dashed rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono, ui-monospace, monospace);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.profile-social-row-empty:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.85);
}

/* ═══════════════════════════════════════════════════════════════
   P65.269 — Settings > Profile > Social links section.
   3-column grid of slot pickers (platform select + url input).
   Below: save / discard actions.
   ═══════════════════════════════════════════════════════════════ */
.settings-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .settings-social-grid { grid-template-columns: 1fr; }
}
.settings-social-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.settings-social-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-social-slot-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-4);
  flex: 1;
}
.settings-social-slot-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(8, 10, 12, 0.6);
  border: 1px solid color-mix(in srgb, var(--social-color, #fff) 35%, transparent);
  color: var(--social-color, #fff);
  flex-shrink: 0;
}
.settings-social-slot-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-4);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.settings-social-slot-clear:hover {
  color: #ffb4b4;
  border-color: rgba(239, 68, 68, 0.4);
}
.settings-social-slot-url {
  font-size: 12px;
  padding: 7px 10px;
}

/* ─── P65.271 — Custom platform picker (replaces native <select>) ─
   Native option lists are browser-rendered and untheamable.  Custom
   popover gives a properly designed, dark-themed list with platform
   icons next to each label, hover/selected states, and a "Clear
   selection" footer affordance. */
.settings-social-picker {
  position: relative;
}
.settings-social-picker-trigger {
  /* Match .input look so it sits inline with the URL field below. */
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.settings-social-picker-trigger:hover {
  border-color: var(--border-hover);
}
.settings-social-picker.is-open .settings-social-picker-trigger {
  border-color: var(--accent);
  background: var(--bg-3);
}
.ssp-trig-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ssp-trig-label {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssp-trig-label-empty {
  color: var(--text-4);
  font-weight: 500;
  font-style: italic;
}

/* Popover panel — absolute-positioned below the trigger.  Higher
   z-index than the modal stack so it floats over neighboring slots
   without being clipped. */
.settings-social-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .55),
    0 2px 6px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
  /* Subtle entry animation so the panel doesn't feel like it just
     teleports in. */
  animation: sspPanelIn .14s cubic-bezier(.22, 1, .36, 1);
  transform-origin: top center;
}
@keyframes sspPanelIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.settings-social-popover::-webkit-scrollbar { width: 5px; }
.settings-social-popover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.settings-social-popover-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.settings-social-popover-opt:hover {
  background: var(--bg-3);
  border-color: var(--border);
}
.settings-social-popover-opt:active { transform: scale(.99); }
.settings-social-popover-opt.is-selected {
  background: rgba(0, 196, 114, .08);
  border-color: rgba(0, 196, 114, .25);
}
.ssp-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(8, 10, 12, .55);
  border: 1px solid rgba(255, 255, 255, .06);
}
.ssp-opt-label {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
}
.ssp-opt-check {
  color: var(--accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(0, 196, 114, .4));
}
/* "Clear selection" footer affordance — visually separated from
   the platform list so users don't accidentally hit it. */
.settings-social-popover-clear {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  color: var(--text-3);
}
.settings-social-popover-clear .ssp-opt-label {
  color: var(--text-3);
  font-weight: 500;
}
.settings-social-popover-clear:hover {
  background: rgba(239, 68, 68, .06);
  border-color: rgba(239, 68, 68, .20);
}
.settings-social-popover-clear:hover .ssp-opt-label {
  color: #ffb4b4;
}
.settings-social-slot-url:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-social-actions {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   P65.283 — Real claimable USD balance + cash-out (Earnings page)
   Balance card · cash-out form · pending list · payout history.
   Min withdrawal: $100 · payout in USDT/USDC/SOL on Solana.
   ═══════════════════════════════════════════════════════════════ */

/* Balance card — leads the Earnings page now.  Green-tinted because
   USD balance is the "money" tier (vs. gold for stars).  Two-column
   layout: big balance amount left, lifetime + period stats right. */
.creator-balance-card {
  background: linear-gradient(135deg, rgba(0,196,114,.10) 0%, rgba(0,196,114,.04) 100%);
  border: 1px solid rgba(0,196,114,.28);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.creator-balance-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.5), transparent);
}
.creator-balance-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.creator-balance-main { flex: 1 1 280px; min-width: 0; }
.creator-balance-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.creator-balance-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,196,114,.7);
  animation: creator-balance-pulse 1.8s ease-out infinite;
}
@keyframes creator-balance-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,196,114,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0,196,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,196,114,0); }
}
.creator-balance-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.creator-balance-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2);
  font-family: var(--mono, monospace);
}
.creator-balance-num {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-1);
  font-family: var(--mono, monospace);
  letter-spacing: -.02em;
  line-height: 1;
}
.creator-balance-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 480px;
}
.creator-balance-sub strong { color: var(--text-1); font-weight: 700; }
.creator-balance-stats {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.creator-balance-stat {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 130px;
}
.creator-balance-stat-label {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.creator-balance-stat-value {
  font-family: var(--mono, monospace);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.01em;
}

/* ── Cash-out form ───────────────────────────────────────── */
.cashout-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cashout-field-status {
  margin-left: auto;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .04em;
}
.cashout-field-status-bad { color: #ff6b6b; }
.cashout-amount-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cashout-amount-input {
  flex: 1;
  font-family: var(--mono, monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cashout-amount-max { white-space: nowrap; }
.cashout-hint-error { color: #ff6b6b !important; }
.cashout-currency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cashout-currency-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
  color: var(--text-1);
  font-family: inherit;
}
.cashout-currency-chip:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.cashout-currency-chip.is-active {
  border-color: var(--accent);
  background: rgba(0,196,114,.10);
}
.cashout-currency-label {
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-1);
}
.cashout-currency-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}
.cashout-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

/* ── Pending + history rows ──────────────────────────────── */
.cashout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cashout-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.cashout-row-pending   { border-color: rgba(247,217,121,.32); background: rgba(247,217,121,.05); }
.cashout-row-paid      { border-color: rgba(0,196,114,.32);   background: rgba(0,196,114,.05); }
.cashout-row-rejected  { border-color: rgba(255,107,107,.30); background: rgba(255,107,107,.05); }
.cashout-row-cancelled { opacity: .6; }
.cashout-row-main { flex: 1; min-width: 0; }
.cashout-row-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.cashout-row-num {
  font-family: var(--mono, monospace);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -.01em;
}
.cashout-row-unit {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .04em;
}
.cashout-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--mono, monospace);
}
.cashout-row-sep { color: var(--text-4); }
.cashout-row-wallet { color: var(--text-2); }
.cashout-row-tx { margin-top: 6px; }
.cashout-row-tx-link {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.cashout-row-tx-link:hover { text-decoration: underline; }
.cashout-row-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
}
.cashout-row-note strong { color: #ff8888; font-weight: 700; }
.cashout-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.cashout-row-status {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.cashout-row-status-pending   { color: #f7d979; background: rgba(247,217,121,.14); }
.cashout-row-status-paid      { color: var(--accent); background: rgba(0,196,114,.14); }
.cashout-row-status-rejected  { color: #ff6b6b; background: rgba(255,107,107,.14); }
.cashout-row-status-cancelled { color: var(--text-3); background: rgba(255,255,255,.06); }
.cashout-row-status-approved  { color: #79b8ff; background: rgba(121,184,255,.14); }
.cashout-row-cancel { font-size: 11px; padding: 4px 10px; }

@media (max-width: 640px) {
  .creator-balance-row { flex-direction: column; }
  .creator-balance-stats { flex-direction: row; flex-wrap: wrap; }
  .creator-balance-stat { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .cashout-currency-grid { grid-template-columns: 1fr; }
  .cashout-row { flex-direction: column; }
  .cashout-row-side { flex-direction: row; align-items: center; justify-content: space-between; }
}


/* ═══════════════════════════════════════════════════════════════
   P65.282 — Stars withdrawal tab (Settings > Withdraw)
   Balance card · request form · pending list · history rows.
   ═══════════════════════════════════════════════════════════════ */

/* Balance card — premium top-of-page strip with a soft gold glow.
   Stars are gold-tier in the rest of the app; we keep the convention. */
.wd-balance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(247, 217, 121, 0.06) 0%, transparent 55%),
    var(--bg-2);
  border-color: rgba(247, 217, 121, 0.18);
}
.wd-balance-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(247, 217, 121, 0.95);
  font-family: var(--mono, ui-monospace, monospace);
  margin-bottom: 8px;
}
.wd-balance-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.wd-balance-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, monospace);
}
.wd-balance-unit {
  font-size: 13px;
  color: rgba(247, 217, 121, 0.85);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wd-balance-note {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 560px;
}
.wd-balance-note strong {
  color: var(--text-0);
  font-weight: 700;
}

/* Form — amount + currency + wallet */
.wd-form { display: flex; flex-direction: column; gap: 18px; }
.wd-amount-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wd-amount-input {
  flex: 1;
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  -moz-appearance: textfield;
}
.wd-amount-input::-webkit-outer-spin-button,
.wd-amount-input::-webkit-inner-spin-button,
.cashout-amount-input::-webkit-outer-spin-button,
.cashout-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cashout-amount-input { -moz-appearance: textfield; }
.wd-amount-max {
  flex-shrink: 0;
  padding: 8px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* P65.287 — Fee breakdown box under the amount input. */
.wd-fee-breakdown {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono, monospace);
  font-size: 12px;
}
.wd-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.wd-fee-label { color: var(--text-3); }
.wd-fee-val   { color: var(--text-2); font-weight: 700; }
.wd-fee-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.wd-fee-total .wd-fee-label { color: var(--text-2); }
.wd-fee-total .wd-fee-val   { color: var(--text-1); font-size: 13px; }

/* History row fee chip. */
.wd-row-fee {
  font-family: var(--mono, monospace);
  color: var(--text-3);
}
.wd-field-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
}
.wd-field-status-bad {
  color: #ffb4b4;
}
.wd-hint-error {
  color: #ffb4b4 !important;
}

/* Currency picker grid — 3 chips side by side */
.wd-currency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 540px) {
  .wd-currency-grid { grid-template-columns: 1fr; }
}
.wd-currency-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.wd-currency-chip:hover {
  border-color: var(--border-hover);
}
.wd-currency-chip:active { transform: scale(.98); }
.wd-currency-chip.is-active {
  background: linear-gradient(135deg, rgba(0, 196, 114, 0.10) 0%, rgba(0, 196, 114, 0.04) 100%);
  border-color: rgba(0, 196, 114, 0.40);
  box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.06);
}
.wd-currency-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: 0.02em;
}
.wd-currency-chip.is-active .wd-currency-label {
  color: var(--accent);
}
.wd-currency-desc {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
}

.wd-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Withdrawal list rows — pending + history share the same shape */
.wd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wd-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .12s ease;
}
.wd-row-pending {
  border-color: rgba(247, 217, 121, 0.22);
  background:
    linear-gradient(90deg, rgba(247, 217, 121, 0.04) 0%, transparent 60%),
    var(--bg-1);
}
.wd-row-paid {
  border-color: rgba(0, 196, 114, 0.22);
}
.wd-row-rejected {
  border-color: rgba(239, 68, 68, 0.22);
}
.wd-row-cancelled {
  opacity: 0.65;
}
.wd-row-main { flex: 1; min-width: 0; }
.wd-row-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.wd-row-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wd-row-unit {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}
.wd-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
}
.wd-row-sep { opacity: 0.5; }
.wd-row-wallet {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wd-row-tx {
  margin-top: 6px;
  font-size: 11px;
}
.wd-row-tx-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.wd-row-tx-link:hover { text-decoration: underline; }
.wd-row-note {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 6px;
  font-size: 11.5px;
  color: #ffb4b4;
  line-height: 1.5;
}
.wd-row-note strong {
  color: #ff8a8a;
  font-weight: 700;
}
.wd-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.wd-row-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  white-space: nowrap;
}
.wd-row-status-pending {
  background: rgba(247, 217, 121, 0.14);
  color: #f7d979;
  border: 1px solid rgba(247, 217, 121, 0.32);
}
.wd-row-status-approved {
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.30);
}
.wd-row-status-paid {
  background: rgba(0, 196, 114, 0.16);
  color: #34ffaf;
  border: 1px solid rgba(0, 196, 114, 0.36);
}
.wd-row-status-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #ff8a8a;
  border: 1px solid rgba(239, 68, 68, 0.30);
}
.wd-row-status-cancelled {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.wd-row-cancel {
  font-size: 11px;
  padding: 5px 10px;
}

.wd-empty {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-1);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.wd-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}
.wd-empty-desc {
  font-size: 11.5px;
  color: var(--text-3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   P29: MEDIA PICKER + VIEWER (avatar/banner)
   ═══════════════════════════════════════════════════════════════ */

/* Preset grid — responsive, scrollable when long. */
.media-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.media-preset-grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.media-preset-tile {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, transform 0.15s;
  color: var(--text-3);
}
.media-preset-tile:hover {
  background: rgba(0, 196, 114, 0.06);
  color: var(--text-0);
  transform: translateY(-1px);
}
.media-preset-tile:active { transform: scale(0.97); }

.media-preset-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s;
}
.media-preset-tile:hover .media-preset-circle {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 196, 114, 0.25);
}

.media-preset-banner {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s;
}
.media-preset-tile:hover .media-preset-banner {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 196, 114, 0.25);
}

.media-preset-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Lightbox viewer — transparent background modal with close button */
.media-viewer-modal {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: min(92vw, 720px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: zoom-out;
}
.media-viewer-img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  background: var(--bg-0);
}
.media-viewer-img-circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: min(80vw, 420px);
  height: auto;
  max-height: 80vh;
}
.media-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  z-index: 10;
}
.media-viewer-close:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.08);
}

/* Inline rename buttons — pencil, save, cancel */
.profile-rename-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
}
.profile-rename-btn:hover {
  background: var(--bg-3);
  color: var(--text-0);
  border-color: var(--border-hover);
}
.profile-rename-pencil {
  opacity: 0.55;
  border-color: transparent;
}
.profile-rename-pencil:hover {
  opacity: 1;
  border-color: var(--border);
  color: var(--accent);
}
.profile-rename-save {
  background: rgba(0, 196, 114, 0.12);
  border-color: rgba(0, 196, 114, 0.35);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.profile-rename-save:hover {
  background: rgba(0, 196, 114, 0.22);
  border-color: var(--accent);
  color: var(--accent);
}
.profile-rename-cancel {
  font-size: 11px;
}
.profile-rename-cancel:hover {
  color: var(--rose, #ef4444);
  border-color: rgba(239, 68, 68, 0.3);
}

.profile-rename-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 196, 114, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE CROPPER (P28) — avatar/banner adjust modal
   ═══════════════════════════════════════════════════════════════ */

.crop-stage {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Circular viewport for avatars — grey ring highlights what will be saved */
.crop-stage-circle {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35), 0 0 24px rgba(0, 196, 114, 0.18);
}
.crop-circle-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25),
              inset 0 0 0 9999px rgba(0, 0, 0, 0);  /* see below — overrides for the rim only */
}

/* Rectangular viewport for banners — thin accent frame */
.crop-stage-rect {
  border-radius: 6px;
}
.crop-rect-frame {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 196, 114, 0.35),
              inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* Slider — consistent styling across browsers */
#cropZoomSlider {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: var(--bg-3);
  outline: none;
}
#cropZoomSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-1);
  box-shadow: 0 0 0 1px var(--accent);
}
#cropZoomSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-1);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   P29: TEXT POST BACKGROUNDS (Facebook/Instagram-style colored cards)
   ═══════════════════════════════════════════════════════════════ */

/* Picker grid — wraps to multiple rows, no horizontal scrollbar.
   Auto-fills tiles into the available width. */
.text-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  padding: 2px;
}

.text-bg-tile {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.text-bg-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 114, 0.35);
}
.text-bg-tile:active { transform: scale(0.94); }
.text-bg-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 196, 114, 0.22), 0 2px 10px rgba(0, 196, 114, 0.15);
}

.text-bg-tile-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Style toolbar — alignment + font buttons, sits above the preview card */
.text-style-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.text-style-group {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 2px;
}
.text-style-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.12s ease;
}
.text-style-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}
.text-style-btn.active {
  background: var(--accent);
  color: #000;
  box-shadow: 0 1px 3px rgba(0, 196, 114, 0.35);
}

/* Live preview card — mimics how the final rendered post will look */
.text-post-preview-card {
  aspect-ratio: 4 / 5;
  max-height: 420px;
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
  margin-bottom: 4px;
  transition: background 0.2s ease;
}

.text-post-preview-title,
.text-post-preview-body {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  width: 100%;
  resize: none;
  padding: 2px 0;
}
.text-post-preview-title {
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.text-post-preview-body {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.88;
  min-height: 40px;
}
.text-post-preview-title::placeholder,
.text-post-preview-body::placeholder {
  color: var(--ph-color, rgba(255, 255, 255, 0.55));
}
.text-post-preview-title:focus,
.text-post-preview-body:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════════
   EXPLORE MODE — anonymous "Browse first" preview gating
   ─────────────────────────────────────────────────────────────
   Three pieces of chrome:
     1. .explore-card        — floating bottom-right guest card
     2. .header-explore-cta  — Sign up/Log in buttons (replace avatar)
     3. .explore-gate        — feed-bottom blurred preview wall
   Plus body.explore-mode hides the avatar/notif/dropdown via CSS.
   ═══════════════════════════════════════════════════════════════ */

/* When in explore mode, hide auth-only header items via CSS */
body.explore-mode #notifBtn,
body.explore-mode #userDropdown { display: none !important; }

/* Header CTA wrap (replaces avatar/notif in explore mode) */
.header-explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-explore-cta .btn-sm { padding: 7px 14px; font-size: 12px; font-weight: 700; }

/* ── Header guest pill: inline status indicator inside the header.
   Sits between the language selector and the Log in button. Reads
   as informational chrome (Linear/Notion/GitHub pattern) rather
   than promotional widget. The data-tooltip attribute leverages
   the existing tooltip system for the longer message. ── */
.header-guest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0, 196, 114, .08);
  border: 1px solid rgba(0, 196, 114, .22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: default;
  transition: background .15s, border-color .15s;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
}
.header-guest-pill:hover {
  background: rgba(0, 196, 114, .12);
  border-color: rgba(0, 196, 114, .35);
}
.header-guest-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 255, 170, .8);
  flex-shrink: 0;
  animation: headerGuestPulse 1.8s ease-in-out infinite;
}
.header-guest-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--accent);
}
@keyframes headerGuestPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* On narrow screens the pill collapses to dot-only to save space.
   Tooltip still works on hover/long-press. */
@media (max-width: 720px) {
  .header-guest-label { display: none; }
  .header-guest-pill { padding: 5px 7px; }
}

/* ── The feed wall — blurred posts behind a sign-up gate ── */
.explore-gate {
  position: relative;
  margin-top: 4px;
  /* Container for blurred posts + absolute-positioned wall */
}
.explore-gate-blurred {
  /* Only the visual layer — posts inside are unreadable. We blur
     and desaturate them to discourage CSS-tampering peeks; even
     stripping the blur, a casual user wouldn't manage it. */
  filter: blur(7px) saturate(.7);
  opacity: .55;
  pointer-events: none;        /* clicks here do nothing */
  user-select: none;
  -webkit-user-select: none;
  /* Posts inside still have their own backgrounds — that's fine,
     the blur softens them and the wall sits above. */
}
/* Belt-and-suspenders: make sure no link/button inside the blurred
   layer can actually be focused or activated. */
.explore-gate-blurred * {
  pointer-events: none !important;
}
/* The wall — sits over the blurred posts, gradient-fades from
   transparent at top to fully solid below, then a centered card
   with the sign-up CTA. */
.explore-gate-wall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(15, 17, 21, 0) 0%,
    rgba(15, 17, 21, .65) 28%,
    rgba(15, 17, 21, .95) 60%,
    rgba(15, 17, 21, 1) 100%
  );
  pointer-events: none;        /* let the inner card own the clicks */
}
.explore-gate-wall-inner {
  position: relative;
  text-align: center;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 22, 26, .96), rgba(15, 17, 21, .98));
  border: 1px solid rgba(0, 196, 114, .22);
  border-radius: 14px;
  padding: 28px 32px 26px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 50px -10px rgba(0, 196, 114, .12);
  animation: exploreWallIn .5s cubic-bezier(.2,.7,.2,1);
  margin-top: 80px;             /* push card down so the gradient has room */
}
@keyframes exploreWallIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explore-gate-wall-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 196, 114, .12);
  border: 1px solid rgba(0, 196, 114, .25);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.explore-gate-wall-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.explore-gate-wall-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 360px;
  margin-left: auto; margin-right: auto;
}
.explore-gate-wall-cta {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 12px;
}
.explore-gate-wall-cta .btn-lg { padding: 11px 22px; font-size: 13px; }
.explore-gate-wall-hint {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* Compact CTA card if there are no extra posts to blur (small feeds) */
.explore-gate-empty-cta {
  margin: 24px 0;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, rgba(0, 196, 114, .04), rgba(0, 196, 114, .01));
  border: 1px solid rgba(0, 196, 114, .18);
  border-radius: 14px;
  text-align: center;
}

/* Locked nav items in explore mode get a small padlock + dimmed style */
.nav-item-locked {
  position: relative;
}
.nav-item-locked .nav-item-lock {
  margin-left: auto;
  opacity: .55;
  flex-shrink: 0;
  color: var(--text-4);
}
.nav-item-locked:hover .nav-item-lock { opacity: .85; }
.nav-item-locked > span { color: var(--text-3); }
.nav-item-locked:hover > span { color: var(--text-1); }

/* ═══════════════════════════════════════════════════════════════
   P30 — TERMINAL OVERLAY (full-page roadmap + vote takeover)
   ─────────────────────────────────────────────────────────────
   Aesthetic: Bloomberg-terminal-meets-mission-control. Dark canvas
   with hairline green accents, monospace data fonts, scanline
   texture, corner brackets like a HUD viewfinder, ticker-tape
   command strip. The overlay slides in from the top (drape effect),
   a "decrypting" line shows briefly, then content stages in.
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay container: covers viewport, fades in ── */
.terminal-overlay {
  position: fixed;
  inset: 0;
  /* z-index 1500: above app chrome (sticky ticker = 150, modals = 2000).
     This means auth modals correctly stack ON TOP of the overlay when
     a guest tries to vote. */
  z-index: 1500;
  background: #0a0d10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.terminal-overlay-active {
  opacity: 1;
  pointer-events: auto;
}
.terminal-overlay-leaving {
  opacity: 0;
  pointer-events: none;
}

/* The "drape" — a black panel with a hairline green leading edge
   that sweeps down from the top edge in the first frame to make
   the entry feel like a curtain falling. */
.terminal-overlay-drape {
  position: absolute;
  inset: 0;
  background: #050709;
  transform-origin: top;
  transform: scaleY(0);
  z-index: 1;
}
.terminal-overlay-active .terminal-overlay-drape {
  animation: terminalDrapeIn .42s cubic-bezier(.7, 0, .25, 1) forwards;
}
@keyframes terminalDrapeIn {
  0%   { transform: scaleY(0); }
  60%  { transform: scaleY(1); border-bottom: 2px solid #00ffaa; }
  100% { transform: scaleY(1); border-bottom: 0; opacity: 0; }
}

/* The "frame" — the actual content container, sits above the drape */
.terminal-overlay-frame {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(0,196,114,.05), transparent 70%),
    linear-gradient(180deg, #0a0d10 0%, #050709 100%);
}

/* ── Subtle scanlines (1% opacity green bars every 3px) ── */
.terminal-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 255, 170, 0.012) 2px,
    rgba(0, 255, 170, 0.012) 3px
  );
  opacity: .8;
}

/* ── Faint dot grid (graph-paper feel) ── */
.terminal-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, black 30%, transparent 100%);
}

/* ── HUD corner brackets (viewfinder feel) ── */
.terminal-bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 196, 114, .35);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.terminal-overlay-active .terminal-bracket {
  animation: terminalBracketIn .4s ease-out .35s forwards;
}
@keyframes terminalBracketIn {
  to { opacity: 1; }
}
/* Top brackets sit BELOW the 48px header strip so they don't
   collide with the Back / × buttons. Bottom brackets unchanged.
   Together they frame the content area like a viewfinder, with
   the header chrome as its own clean band above. */
.terminal-bracket-tl { top: 60px; left: 14px;  border-right: none;  border-bottom: none; }
.terminal-bracket-tr { top: 60px; right: 14px; border-left: none;   border-bottom: none; }
.terminal-bracket-bl { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
.terminal-bracket-br { bottom: 14px; right: 14px; border-left: none;  border-top: none; }

/* ═══════════════════════════════════════════════════════════════
   TERMINAL HEADER STRIP
   ═══════════════════════════════════════════════════════════════ */
.terminal-header {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(0,196,114,.05), rgba(0,196,114,0));
  border-bottom: 1px solid rgba(0,196,114,.18);
  position: relative;
  z-index: 6;
  opacity: 0;
}
.terminal-overlay-active .terminal-header {
  animation: terminalHeaderIn .35s cubic-bezier(.2,.7,.2,1) .28s forwards;
}
@keyframes terminalHeaderIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.terminal-header-left,
.terminal-header-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.terminal-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(0,196,114,.08);
  border: 1px solid rgba(0,196,114,.22);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.terminal-back:hover {
  background: rgba(0,196,114,.14);
  border-color: rgba(0,196,114,.4);
}
.terminal-back svg { transform: translateX(-1px); }

.terminal-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.08);
}

.terminal-bread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.terminal-bread-product {
  color: var(--text-0);
  font-weight: 800;
}
.terminal-bread-sep {
  color: var(--text-4);
  font-weight: 400;
}
.terminal-bread-route {
  color: var(--accent);
}
.terminal-bread-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: .12em;
}
.terminal-bread-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,255,170,.7);
  animation: terminalDotPulse 1.6s ease-in-out infinite;
}
@keyframes terminalDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.terminal-clock {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  font-feature-settings: "tnum";
  letter-spacing: .04em;
}

.terminal-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.terminal-close:hover {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #ef4444;
}

/* ── Decrypting line (briefly visible during entry) ── */
.terminal-decrypt {
  position: absolute;
  top: 56px;
  left: 24px;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .06em;
  z-index: 5;
  opacity: 0;
}
.terminal-overlay-active .terminal-decrypt {
  animation: terminalDecryptIn .35s ease-out .42s forwards;
}
.terminal-decrypt-fade {
  animation: terminalDecryptOut .5s ease-out forwards !important;
}
@keyframes terminalDecryptIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes terminalDecryptOut {
  to { opacity: 0; transform: translateY(-4px); }
}
.terminal-decrypt-prompt { color: var(--text-3); margin-right: 6px; }
.terminal-decrypt-cursor {
  color: var(--accent);
  animation: terminalCursorBlink .9s steps(1) infinite;
}
@keyframes terminalCursorBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   TERMINAL BODY (scrollable)
   ═══════════════════════════════════════════════════════════════ */
.terminal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 4;
  padding: 60px 0 80px;
  scroll-behavior: smooth;
}
.terminal-body::-webkit-scrollbar { width: 8px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: rgba(0,196,114,.18); border-radius: 4px; }
.terminal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.28); }

/* ═══════════════════════════════════════════════════════════════
   STAGE-BY-STAGE REVEAL
   Each top-level <section data-rm-stage="N"> fades up sequentially.
   Delays are tuned so the title lands first, then command strip,
   then the content stages in.
   ═══════════════════════════════════════════════════════════════ */
[data-rm-stage] {
  opacity: 0;
  transform: translateY(14px);
}
.terminal-overlay-active [data-rm-stage="1"] { animation: stageIn .55s cubic-bezier(.2,.7,.2,1) .50s forwards; }
.terminal-overlay-active [data-rm-stage="2"] { animation: stageIn .55s cubic-bezier(.2,.7,.2,1) .80s forwards; }
.terminal-overlay-active [data-rm-stage="3"] { animation: stageIn .50s cubic-bezier(.2,.7,.2,1) 1.05s forwards; }
.terminal-overlay-active [data-rm-stage="4"] { animation: stageIn .50s cubic-bezier(.2,.7,.2,1) 1.25s forwards; }
.terminal-overlay-active [data-rm-stage="5"] { animation: stageIn .50s cubic-bezier(.2,.7,.2,1) 1.45s forwards; }
.terminal-overlay-active [data-rm-stage="6"] { animation: stageIn .50s cubic-bezier(.2,.7,.2,1) 1.65s forwards; }
.terminal-overlay-active [data-rm-stage="7"] { animation: stageIn .50s cubic-bezier(.2,.7,.2,1) 1.85s forwards; }
@keyframes stageIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   ROADMAP CONTENT — full-width canvas
   ═══════════════════════════════════════════════════════════════ */
.rm-canvas {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── HERO ── */
.rm-hero {
  text-align: center;
  margin-bottom: 56px;
  padding-top: 12px;
}
.rm-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,196,114,.08);
  border: 1px solid rgba(0,196,114,.22);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 24px;
}
.rm-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,255,170,.7);
  animation: terminalDotPulse 1.6s ease-in-out infinite;
}
.rm-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text-0);
  letter-spacing: -.04em;
  margin: 0 0 22px;
}
.rm-hero-line-1 { display: block; color: var(--text-1); }
.rm-hero-line-2 { display: block; color: var(--accent); }
.rm-hero-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 680px;
  margin: 0 auto 36px;
}

/* Progress meter — centered, with animated fill */
.rm-progress {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 28px;
  background: linear-gradient(180deg, rgba(0,196,114,.06), rgba(0,196,114,.02));
  border: 1px solid rgba(0,196,114,.22);
  border-radius: 14px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.rm-progress-stat { flex-shrink: 0; }
.rm-progress-num {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: -.02em;
}
.rm-progress-num-of {
  color: var(--text-3);
  font-size: 22px;
  font-weight: 600;
  margin-left: 2px;
}
.rm-progress-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin-top: 8px;
  font-family: var(--mono);
}
.rm-progress-bar {
  flex: 1;
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow: hidden;
}
.rm-progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #00ffaa);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0,196,114,.55);
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}
.rm-progress-bar-fill-go {
  width: var(--rm-progress-target, 0%);
}
.rm-progress-bar-label {
  position: absolute;
  right: 0;
  top: -22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: "tnum";
}

/* ── COMMAND STRIP ── */
.rm-cmdstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background:
    linear-gradient(180deg, rgba(0,196,114,.04), rgba(0,196,114,0)),
    var(--bg-1);
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 12px;
  margin-bottom: 56px;
  overflow: hidden;
}
.rm-cmdstrip-cell {
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,.05);
  position: relative;
}
.rm-cmdstrip-cell:last-child { border-right: none; }
.rm-cmdstrip-shipped::before,
.rm-cmdstrip-active::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}
.rm-cmdstrip-shipped::before { background: var(--accent); box-shadow: 0 0 8px rgba(0,196,114,.5); }
.rm-cmdstrip-active::before  { background: #f59e0b;       box-shadow: 0 0 8px rgba(245,158,11,.5); }

.rm-cmdstrip-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rm-cmdstrip-val {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0);
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
  line-height: 1;
}
.rm-cmdstrip-val-sm { font-size: 15px; padding-top: 8px; color: var(--text-1); letter-spacing: .04em; }
.rm-cmdstrip-shipped .rm-cmdstrip-val { color: var(--accent); }
.rm-cmdstrip-active .rm-cmdstrip-val  { color: #f59e0b; }

/* ── NMX TOKEN SNAPSHOT ── full-width hero card */
.rm-nmx {
  background:
    radial-gradient(ellipse 600px 200px at 0% 0%, rgba(0,196,114,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 56px;
  overflow: hidden;
}
.rm-nmx-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
}
.rm-nmx-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rm-nmx-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
}
.rm-nmx-tge {
  text-align: right;
  padding-left: 24px;
}
.rm-nmx-tge-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rm-nmx-tge-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.rm-nmx-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 36px;
  padding: 28px;
}
.rm-nmx-supply {
  border-right: 1px solid var(--border);
  padding-right: 24px;
}
.rm-nmx-supply-num {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-0);
  font-feature-settings: "tnum";
  letter-spacing: -.025em;
  line-height: 1.1;
}
.rm-nmx-supply-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .14em;
  margin-top: 8px;
}
.rm-nmx-alloc { display: flex; flex-direction: column; gap: 16px; }

.rm-alloc-bar {
  position: relative;
  height: 14px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.rm-alloc-seg {
  position: absolute;
  top: 0; bottom: 0;
  transition: opacity .2s;
}
.rm-alloc-seg:hover { opacity: .85; }
.rm-alloc-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 24px;
}
.rm-alloc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 0;
}
.rm-alloc-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-1);
}
.rm-alloc-dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.rm-alloc-pct {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--text-0);
  font-feature-settings: "tnum";
  font-size: 13px;
}

/* ── PHASE TIMELINE ── */
.rm-timeline {
  margin-bottom: 56px;
}
.rm-timeline-head {
  text-align: center;
  margin-bottom: 40px;
}
.rm-timeline-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .16em;
  margin-bottom: 8px;
}
.rm-timeline-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.025em;
  margin-bottom: 6px;
}
.rm-timeline-sub {
  font-size: 14px;
  color: var(--text-3);
}

.rm-phase {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding-bottom: 36px;
  position: relative;
}
.rm-phase-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.rm-phase-code {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--border);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.rm-phase-shipped .rm-phase-code {
  background: rgba(0,196,114,.14);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 22px rgba(0,196,114,.35), 0 0 0 4px rgba(0,196,114,.06);
}
.rm-phase-active .rm-phase-code {
  background: rgba(245,158,11,.12);
  border-color: #f59e0b;
  color: #f59e0b;
  box-shadow: 0 0 22px rgba(245,158,11,.35), 0 0 0 4px rgba(245,158,11,.06);
  animation: rmActivePulse 2s ease-in-out infinite;
}
@keyframes rmActivePulse {
  0%, 100% { box-shadow: 0 0 22px rgba(245,158,11,.35), 0 0 0 4px rgba(245,158,11,.06); }
  50%      { box-shadow: 0 0 32px rgba(245,158,11,.6),  0 0 0 6px rgba(245,158,11,.1); }
}
.rm-phase-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, var(--border), transparent 95%);
  margin-top: 8px;
}
.rm-phase-shipped .rm-phase-line {
  background: linear-gradient(180deg, rgba(0,196,114,.5), var(--border));
}

.rm-phase-body {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  min-width: 0;
  transition: border-color .2s;
}
.rm-phase-shipped .rm-phase-body { border-color: rgba(0,196,114,.18); }
.rm-phase-active  .rm-phase-body { border-color: rgba(245,158,11,.22); background: linear-gradient(180deg, rgba(245,158,11,.025), var(--bg-1)); }

.rm-phase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rm-phase-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.rm-phase-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-0);
  line-height: 1.1;
  font-family: var(--mono);
}
.rm-phase-period {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .06em;
}
.rm-phase-tagline {
  font-size: 14.5px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 12px;
}
.rm-phase-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 20px;
  max-width: 720px;
}

/* Tracks: side-by-side on desktop, stacked on narrow screens */
.rm-phase-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rm-track {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
.rm-track-empty { display: none; }
.rm-track-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .16em;
  margin-bottom: 12px;
}
.rm-track-list {
  list-style: none;
  margin: 0; padding: 0;
}
.rm-track-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.04);
}
.rm-track-item:last-child { border-bottom: none; }
.rm-track-bullet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
}
.rm-track-item-shipped .rm-track-bullet { background: var(--accent); box-shadow: 0 0 6px rgba(0,196,114,.6); }
.rm-track-item-active  .rm-track-bullet { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.6); animation: rmActivePulse 2s ease-in-out infinite; }
.rm-track-item-next    .rm-track-bullet { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.rm-track-item-future  .rm-track-bullet { background: transparent; border: 1px dashed var(--text-4); }
.rm-track-name {
  font-size: 13.5px;
  color: var(--text-1);
  line-height: 1.5;
}
.rm-track-item-active .rm-track-name { color: var(--text-0); font-weight: 600; }
.rm-track-item-next   .rm-track-name { color: var(--text-2); }
.rm-track-item-future .rm-track-name { color: var(--text-3); }

/* Status pills */
.rm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.rm-pill-ico { font-size: 9px; line-height: 1; }
.rm-pill-shipped { background: rgba(0,196,114,.16); color: var(--accent); border: 1px solid rgba(0,196,114,.32); }
.rm-pill-active  { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.rm-pill-next    { background: rgba(255,255,255,.04); color: var(--text-2); border: 1px solid var(--border); }
.rm-pill-future  { background: transparent; color: var(--text-3); border: 1px dashed var(--text-4); }

/* ── BOTTOM CTA ── */
.rm-bottom-cta {
  text-align: center;
  padding: 56px 28px;
  background:
    radial-gradient(ellipse 600px 200px at 50% 50%, rgba(0,196,114,.08), transparent 70%),
    linear-gradient(180deg, rgba(0,196,114,.03), rgba(0,196,114,0));
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 16px;
}
.rm-bottom-cta-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.025em;
  margin-bottom: 10px;
}
.rm-bottom-cta-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 540px;
  margin: 0 auto 24px;
}

/* Mobile */
@media (max-width: 880px) {
  .rm-canvas { padding: 0 16px; }
  .rm-hero-title { font-size: 36px; }
  .rm-progress { flex-direction: column; align-items: flex-start; padding: 18px; }
  .rm-cmdstrip { grid-template-columns: repeat(3, 1fr); }
  .rm-cmdstrip-cell:nth-child(3) { border-right: none; }
  .rm-cmdstrip-cell:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.05); }
  .rm-nmx-body { grid-template-columns: 1fr; }
  .rm-nmx-supply { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 18px; }
  .rm-phase { grid-template-columns: 56px 1fr; gap: 18px; }
  .rm-phase-code { width: 48px; height: 48px; font-size: 16px; }
  .rm-phase-name { font-size: 20px; }
  .rm-phase-tracks { grid-template-columns: 1fr; }
  .terminal-clock { display: none; }
  .terminal-bread-status { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VOTE CONTENT — full-width canvas
   ═══════════════════════════════════════════════════════════════ */
.vt-canvas {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Hero mirrors roadmap hero structure */
.vt-hero {
  text-align: center;
  margin-bottom: 48px;
  padding-top: 12px;
}
.vt-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,196,114,.08);
  border: 1px solid rgba(0,196,114,.22);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 24px;
}
.vt-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,255,170,.7);
  animation: terminalDotPulse 1.6s ease-in-out infinite;
}
.vt-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text-0);
  letter-spacing: -.04em;
  margin: 0 0 22px;
}
.vt-hero-line-1 { display: block; color: var(--text-1); }
.vt-hero-line-2 { display: block; color: var(--accent); }
.vt-hero-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 680px;
  margin: 0 auto 0;
}
.vt-hero-desc strong { color: var(--text-0); font-weight: 700; }

/* Command strip same structure as roadmap */
.vt-cmdstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(180deg, rgba(0,196,114,.04), rgba(0,196,114,0)), var(--bg-1);
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 12px;
  margin-bottom: 40px;
  overflow: hidden;
}
.vt-cmdstrip-cell {
  padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,.05);
  position: relative;
}
.vt-cmdstrip-cell:last-child { border-right: none; }
.vt-cmdstrip-shipped::before,
.vt-cmdstrip-active::before,
.vt-cmdstrip-personal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}
.vt-cmdstrip-shipped::before  { background: var(--accent); box-shadow: 0 0 8px rgba(0,196,114,.5); }
.vt-cmdstrip-active::before   { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.5); }
.vt-cmdstrip-personal::before { background: #00ffaa; }
.vt-cmdstrip-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vt-cmdstrip-val {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-0);
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
  line-height: 1;
}
.vt-cmdstrip-shipped .vt-cmdstrip-val  { color: var(--accent); }
.vt-cmdstrip-active .vt-cmdstrip-val   { color: #f59e0b; }
.vt-cmdstrip-personal .vt-cmdstrip-val { color: var(--accent); }

/* Filters */
.vt-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.vt-filter {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.vt-filter:hover { border-color: rgba(0,196,114,.3); color: var(--text-1); }
.vt-filter-active {
  background: rgba(0,196,114,.14);
  border-color: rgba(0,196,114,.4);
  color: var(--accent);
}

/* Proposal grid — 2-col on desktop */
.vt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 48px;
}
.vt-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  transition: border-color .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.vt-card:hover { border-color: rgba(0,196,114,.22); transform: translateY(-2px); }
.vt-card-shipped { background: linear-gradient(180deg, rgba(0,196,114,.04), var(--bg-1)); border-color: rgba(0,196,114,.22); }
.vt-card-progress { background: linear-gradient(180deg, rgba(245,158,11,.04), var(--bg-1)); border-color: rgba(245,158,11,.2); }

.vt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.vt-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vt-card-id {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .08em;
}
.vt-card-close {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .04em;
}
.vt-card-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text-0);
  margin: 0 0 10px;
  line-height: 1.3;
}
.vt-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 18px;
  flex-grow: 1;
}

/* Sentiment bar */
.vt-sent { margin-bottom: 16px; }
.vt-sent-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(239,68,68,.18);
  overflow: hidden;
  margin-bottom: 10px;
}
.vt-sent-yes {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), #00ffaa);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0,196,114,.45);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.vt-sent-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
}
.vt-sent-yes-stat { text-align: left; }
.vt-sent-yes-stat .vt-sent-pct { color: var(--accent); font-weight: 800; font-family: var(--mono); margin-right: 4px; }
.vt-sent-no-stat  { text-align: right; }
.vt-sent-no-stat  .vt-sent-pct { color: #ef4444; font-weight: 800; font-family: var(--mono); margin-left: 4px; }
.vt-sent-count { color: var(--text-4); font-family: var(--mono); font-weight: 600; font-feature-settings: "tnum"; }
.vt-sent-total {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

/* Vote buttons */
.vt-vote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vt-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
}
.vt-vote-ico { font-size: 11px; line-height: 1; }
.vt-vote-yes:hover { background: rgba(0,196,114,.1); border-color: rgba(0,196,114,.4); color: var(--accent); }
.vt-vote-no:hover  { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); color: #ef4444; }
.vt-vote-yes.vt-vote-active { background: rgba(0,196,114,.18); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(0,196,114,.25); }
.vt-vote-no.vt-vote-active  { background: rgba(239,68,68,.15); border-color: #ef4444; color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.18); }

/* Status badges + category badges (same as before) */
.vt-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vt-st-open     { background: rgba(0,196,114,.14); color: var(--accent); border: 1px solid rgba(0,196,114,.3); }
.vt-st-progress { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.vt-st-passed   { background: rgba(168,85,247,.12); color: #a855f7; border: 1px solid rgba(168,85,247,.3); }
.vt-st-failed   { background: rgba(115,115,115,.18); color: var(--text-3); border: 1px solid var(--border); }
.vt-st-shipped  { background: rgba(0,196,114,.18); color: var(--accent); border: 1px solid rgba(0,196,114,.4); }

.vt-cat {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  font-family: var(--mono);
}
.vt-cat-feature   { background: rgba(14,165,233,.1); color: #38bdf8; border-color: rgba(14,165,233,.25); }
.vt-cat-token     { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.25); }
.vt-cat-direction { background: rgba(168,85,247,.1); color: #c084fc; border-color: rgba(168,85,247,.25); }
.vt-cat-community { background: rgba(236,72,153,.1); color: #f472b6; border-color: rgba(236,72,153,.25); }

.vt-closed-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.vt-shipped-check { color: var(--accent); font-weight: 800; }
.vt-progress-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,.55);
  animation: rmActivePulse 2s ease-in-out infinite;
}

.vt-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  background: var(--bg-1);
  border: 1px dashed var(--border);
  border-radius: 12px;
  grid-column: 1 / -1;
}

/* Suggest CTA */
.vt-suggest {
  text-align: center;
  padding: 48px 28px;
  background:
    radial-gradient(ellipse 600px 200px at 50% 50%, rgba(0,196,114,.08), transparent 70%),
    linear-gradient(180deg, rgba(0,196,114,.03), rgba(0,196,114,0));
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 16px;
}
.vt-suggest-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0);
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.vt-suggest-body {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.374 — Suggest-a-proposal modal
   ═══════════════════════════════════════════════════════════════════ */
.suggest-prop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  /* P65.377 — promote overlay + card to their own compositor layers
     ahead of time so the entrance transition is GPU-only and doesn't
     stall the main thread when the modal mounts. */
  will-change: opacity;
}
.suggest-prop-overlay.is-open    { opacity: 1; pointer-events: auto; }
.suggest-prop-overlay.is-closing { opacity: 0; }
.suggest-prop-overlay .sp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.74);
  /* P65.377 — backdrop-filter is expensive on first paint. Apply it
     only AFTER the entrance is done so the initial frame is cheap.
     The .is-open class triggers the blur via a delayed transition. */
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: backdrop-filter .25s ease .12s, -webkit-backdrop-filter .25s ease .12s;
}
.suggest-prop-overlay.is-open .sp-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.suggest-prop-overlay .sp-card {
  position: relative;
  width: clamp(320px, 92vw, 600px);
  max-height: 92vh;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: translateY(10px) scale(.99);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  /* P65.376 — proper scroll system. The card itself is a flex column
     so the header stays pinned at the top and only the body scrolls. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* P65.377 — GPU promotion + composited transform so the entrance
     animation is buttery instead of jank. */
  will-change: transform;
  transform-origin: center;
}
.suggest-prop-overlay.is-open .sp-card { transform: translateY(0) scale(1); }
.sp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* Sticky-ish — sits at the top of the card flex column, fixed
     vertical space, never scrolls away. */
  padding: 22px 22px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 2;
}
.sp-body {
  /* Scrollable region. The native scrollbar styling below uses
     thin-bar with accent thumb for a polished look. */
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 22px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.sp-body::-webkit-scrollbar { width: 8px; }
.sp-body::-webkit-scrollbar-track { background: transparent; }
.sp-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.sp-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
.sp-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.sp-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
}
.sp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .14s ease, color .14s ease;
}
.sp-close:hover { background: var(--bg-3); color: var(--text-0); }

.sp-quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.35);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.sp-field { margin-bottom: 14px; }
.sp-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.sp-counter {
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-4);
  letter-spacing: 0;
  text-transform: none;
}
.sp-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--text-0);
  font-family: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.sp-input:focus {
  outline: none;
  border-color: rgba(0, 196, 114, 0.45);
  background: var(--bg-1);
}
.sp-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.sp-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-cat {
  padding: 7px 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sp-cat:hover { background: var(--bg-3); color: var(--text-1); }
.sp-cat.is-active {
  background: rgba(0, 196, 114, 0.14);
  border-color: rgba(0, 196, 114, 0.4);
  color: var(--accent);
}

.sp-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.sp-img-tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.sp-img-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sp-img-uploading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 10.5px; color: var(--text-4); font-weight: 600;
}
.sp-img-tile.is-uploading {
  border-style: dashed;
  border-color: rgba(0, 196, 114, 0.35);
}
.sp-img-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-img-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-4);
  font-size: 10.5px;
  font-weight: 600;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sp-img-add:hover {
  background: var(--bg-3);
  border-color: rgba(0, 196, 114, 0.4);
  color: var(--accent);
}
.sp-img-hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-4);
}

.sp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: #ef4444;
  font-size: 12.5px;
  font-weight: 600;
}

/* --- Capped state (3/3 used) --- */
.sp-capped {
  text-align: center;
  padding: 22px 8px;
}
.sp-capped-icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-capped-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
  margin-bottom: 6px;
}
.sp-capped-desc {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.55;
}

/* --- Thank-you screen --- */
.sp-thanks {
  text-align: center;
  padding: 24px 8px 8px;
}
/* P65.376 — wrapper that hosts both the check icon and the radial
   spray of star particles that fan out from the center. The
   particles are absolutely positioned so the icon stays centered. */
.sp-thanks-iconwrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
}
.sp-thanks-icon {
  position: relative;
  width: 64px; height: 64px;
  color: var(--accent);
  z-index: 1;
}
.sp-thanks-ring {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: spThanksRing .55s ease-out forwards;
}
.sp-thanks-check {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: spThanksCheck .35s ease-out .35s forwards;
}
@keyframes spThanksRing  { to { stroke-dashoffset: 0; } }
@keyframes spThanksCheck { to { stroke-dashoffset: 0; } }

/* P65.376 — gold star-particle spray that fires when the check
   lands.  Each particle has its own --px / --py (target x/y offset)
   and --pd (stagger delay) set inline so they radiate outward in a
   roughly even fan with a touch of randomness. */
.sp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sp-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, rgba(245, 158, 11, 0.6) 60%, transparent 100%);
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.7);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: spParticleFly .9s cubic-bezier(.18, .7, .3, 1) forwards;
  animation-delay: calc(0.75s + var(--pd, 0s));
}
@keyframes spParticleFly {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(1); opacity: 0; }
}

.sp-thanks-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.sp-thanks-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.sp-thanks-desc {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0 auto 14px;
  max-width: 440px;
}

/* P65.376 — Reward pill arrives with a scale-in pop + green halo
   pulse, then settles. Number inside counts up via JS (see
   _renderSuggestProposalThankYou). The whole pill is set to
   opacity:0 initially and the keyframe animation handles the entrance.
   Arrival is delayed 0.9s so it lands AFTER the check completes. */
.sp-thanks-reward {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(0, 196, 114, 0.18), rgba(20, 241, 149, 0.08));
  border: 1px solid rgba(0, 196, 114, 0.55);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0.6);
  animation: spRewardPop .55s cubic-bezier(.34, 1.56, .64, 1) .9s forwards;
  box-shadow: 0 0 0 0 rgba(0, 196, 114, 0);
}
@keyframes spRewardPop {
  0%   { opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 0 rgba(0, 196, 114, 0); }
  60%  { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 14px rgba(0, 196, 114, 0); }
  100% { opacity: 1; transform: scale(1);    box-shadow: 0 6px 18px rgba(0, 196, 114, 0.28); }
}
.sp-thanks-reward svg {
  filter: drop-shadow(0 0 4px rgba(253, 224, 71, 0.6));
}
#spRewardNum {
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sp-thanks-cap {
  font-size: 11.5px;
  color: var(--text-4);
  margin-bottom: 14px;
  font-style: italic;
  opacity: 0;
  animation: spFadeIn .3s ease 1.4s forwards;
}
@keyframes spFadeIn { to { opacity: 1; } }

.sp-thanks-done {
  min-width: 140px;
  opacity: 0;
  animation: spFadeIn .3s ease 1.6s forwards;
}

/* Reduced motion — calm the celebration but keep the affordances. */
@media (prefers-reduced-motion: reduce) {
  .sp-thanks-ring,
  .sp-thanks-check,
  .sp-particle,
  .sp-thanks-reward,
  .sp-thanks-cap,
  .sp-thanks-done {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Mobile vote */
@media (max-width: 880px) {
  .vt-canvas { padding: 0 16px; }
  .vt-hero-title { font-size: 36px; }
  .vt-cmdstrip { grid-template-columns: repeat(2, 1fr); }
  .vt-cmdstrip-cell:nth-child(2) { border-right: none; }
  .vt-cmdstrip-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.05); }
  .vt-grid { grid-template-columns: 1fr; }
  .vt-vote { grid-template-columns: 1fr; }
  .vt-sent-stats { grid-template-columns: 1fr 1fr; }
  .vt-sent-total { grid-column: 1 / -1; text-align: center; order: 3; }
}

/* Reduced motion: honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .terminal-overlay-drape,
  .terminal-header,
  .terminal-decrypt,
  .terminal-bracket,
  [data-rm-stage] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rm-progress-bar-fill {
    transition: none;
    width: var(--rm-progress-target, 0%) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   P30 — PSYCHOLOGY LAYER
   ─────────────────────────────────────────────────────────────
   Copy-driven sections that turn the roadmap from a feature list
   into a contract. Designed to read like a manifesto: oversized
   typography, minimal chrome, deliberate negative space. No charts,
   no badges — just words that land.
   ═══════════════════════════════════════════════════════════════ */

/* ── MANIFESTO BLOCK (THE CONTRACT) ── */
.rm-manifesto {
  margin-bottom: 56px;
  padding: 56px 48px;
  position: relative;
  background:
    radial-gradient(ellipse 720px 280px at 50% 50%, rgba(0,196,114,.04), transparent 70%),
    linear-gradient(180deg, rgba(0,196,114,.025), rgba(0,196,114,.005));
  border: 1px solid rgba(0,196,114,.16);
  border-radius: 18px;
  overflow: hidden;
}
/* Hairline accent at the top edge — ribbon detail */
.rm-manifesto::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.5), transparent);
}

.rm-manifesto-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  justify-content: center;
}
.rm-manifesto-mark-line {
  flex: 0 0 56px;
  height: 1px;
  background: rgba(0,196,114,.35);
}
.rm-manifesto-mark-text {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--accent);
}

.rm-manifesto-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.rm-manifesto-line {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-1);
  margin: 0 0 18px;
  letter-spacing: -.005em;
}
.rm-manifesto-line:last-child { margin-bottom: 0; }
.rm-manifesto-line em {
  font-style: italic;
  color: var(--text-3);
}
.rm-manifesto-line strong {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0;
}

/* Lead and close lines — bigger, more typographic weight */
.rm-manifesto-line-lead {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--text-0);
  margin-bottom: 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.rm-manifesto-line-close {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-0);
  margin-top: 28px;
  letter-spacing: -.015em;
}

/* ── HOW WE STAY HONEST (3-card block) ── */
.rm-honest {
  margin-bottom: 56px;
}
.rm-honest-head {
  text-align: center;
  margin-bottom: 32px;
}
.rm-honest-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 8px;
}
.rm-honest-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-0);
}
.rm-honest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rm-honest-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px 24px;
  transition: border-color .2s, transform .2s;
}
.rm-honest-card:hover {
  border-color: rgba(0,196,114,.28);
  transform: translateY(-2px);
}
.rm-honest-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.5), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.rm-honest-card:hover::before { opacity: 1; }

.rm-honest-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .14em;
  margin-bottom: 14px;
}
.rm-honest-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.015em;
  line-height: 1.35;
  margin-bottom: 8px;
}
.rm-honest-card-body {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── NMX supply ownership note ── */
.rm-nmx-supply-note {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.04);
  max-width: 280px;
}

/* ── Bottom CTA eyebrow ── */
.rm-bottom-cta-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ── VOTE: Why Your Vote Matters ── */
.vt-why {
  margin-bottom: 48px;
  padding: 56px 48px;
  position: relative;
  background:
    radial-gradient(ellipse 720px 280px at 50% 50%, rgba(0,196,114,.04), transparent 70%),
    linear-gradient(180deg, rgba(0,196,114,.025), rgba(0,196,114,.005));
  border: 1px solid rgba(0,196,114,.16);
  border-radius: 18px;
  overflow: hidden;
}
.vt-why::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.5), transparent);
}
.vt-why-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  justify-content: center;
}
.vt-why-mark-line {
  flex: 0 0 56px;
  height: 1px;
  background: rgba(0,196,114,.35);
}
.vt-why-mark-text {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--accent);
}
.vt-why-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.vt-why-line {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-1);
  margin: 0 0 18px;
  letter-spacing: -.005em;
}
.vt-why-line:last-child { margin-bottom: 0; }
.vt-why-line strong {
  color: var(--accent);
  font-weight: 800;
}
.vt-why-line-lead {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--text-0);
  margin-bottom: 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.vt-why-line-close {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-0);
  margin-top: 28px;
  letter-spacing: -.015em;
}
.vt-why-line-close strong { color: var(--text-0); }

/* ── Suggest CTA eyebrow ── */
.vt-suggest-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Mobile adjustments for the new psychology blocks */
@media (max-width: 880px) {
  .rm-manifesto, .vt-why { padding: 36px 24px; }
  .rm-manifesto-line-lead, .vt-why-line-lead { font-size: 22px; }
  .rm-manifesto-line, .vt-why-line { font-size: 15.5px; }
  .rm-manifesto-line-close, .vt-why-line-close { font-size: 18px; }
  .rm-honest-grid { grid-template-columns: 1fr; }
  .rm-honest-title { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   P31 — INSTITUTIONAL WELCOME OVERLAY
   ─────────────────────────────────────────────────────────────
   Full-page credentialing ceremony. Plays once per browser after
   the user signs in for the first time. Aesthetic: terminal
   activation sequence → identity establishment → contractual
   manifesto → threshold crossing.

   Choreography (delays from welcome-overlay-active class):
     0.00s  black backdrop fades up
     0.20s  hairline activation line scales from 0 to full-width
     0.60s  activation line splits, frame outline establishes
     0.85s  brand sigil + wordmark fade in
     1.30s  terminal credentials type out (4 lines, 220ms apart)
     2.30s  manifesto LEFT ("THIS IS WHAT YOU GET") reveals
     3.10s  manifesto RIGHT ("THIS IS WHAT WE OWE YOU") reveals
     4.10s  WELCOME threshold + enter button materialize
   ═══════════════════════════════════════════════════════════════ */

.welcome-overlay {
  position: fixed;
  inset: 0;
  /* z-index 1600: above terminal overlay (1500), below modals (2000)
     and toasts (10000). The overlay is full-screen ceremony. */
  z-index: 1600;
  pointer-events: auto;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Whole overlay fades in; individual stages have their own
     animations triggered by the active class. */
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.welcome-overlay-active { opacity: 1; }
.welcome-overlay-leaving {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ── Layered backdrop ── */
.welcome-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 50%, rgba(0,196,114,.06), transparent 70%),
    linear-gradient(180deg, #050709 0%, #02040a 100%);
}
.welcome-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 255, 170, 0.014) 2px,
    rgba(0, 255, 170, 0.014) 3px
  );
}
.welcome-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 30%, transparent 100%);
}

/* ── Activation hairline (stage 0): scales horizontally ── */
.welcome-activation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 16px rgba(0,255,170,.6);
  transform-origin: center;
  opacity: 0;
}
.welcome-overlay-active .welcome-activation {
  animation: welcomeActivation 1.0s cubic-bezier(.6, 0, .2, 1) .20s forwards;
}
@keyframes welcomeActivation {
  0%   { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); }
}

/* ── Frame edges (top + bottom hairlines) ── */
.welcome-frame-top,
.welcome-frame-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,114,.4) 20%, rgba(0,196,114,.4) 80%, transparent);
  opacity: 0;
  transform: scaleX(0);
}
/* P65.309 — frame edges pushed outward (was 56px inset) so the
   NOX logo and Enter button breathe.  Combined with the looser
   content padding below, this gives ~52px of empty space between
   the frame line and the nearest content row. */
.welcome-frame-top    { top: 28px; }
.welcome-frame-bottom { bottom: 28px; }
.welcome-overlay-active .welcome-frame-top,
.welcome-overlay-active .welcome-frame-bottom {
  animation: welcomeFrameIn .8s cubic-bezier(.4, 0, .2, 1) .80s forwards;
}
@keyframes welcomeFrameIn {
  to { opacity: 1; transform: scaleX(1); }
}

/* ── Corner brackets ── */
.welcome-bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0, 196, 114, .4);
  pointer-events: none;
  opacity: 0;
}
.welcome-overlay-active .welcome-bracket {
  animation: welcomeBracketIn .5s ease-out 1.0s forwards;
}
@keyframes welcomeBracketIn { to { opacity: 1; } }
/* P65.309 — corner brackets pushed outward to 28px (was 56px).
   Pairs with the .welcome-frame-top/bottom inset above so the four
   corners and the two horizontal hairlines stay aligned to the
   same outer rectangle, just bigger. */
.welcome-bracket-tl { top: 28px;    left: 28px;  border-right: none;  border-bottom: none; }
.welcome-bracket-tr { top: 28px;    right: 28px; border-left: none;   border-bottom: none; }
.welcome-bracket-bl { bottom: 28px; left: 28px;  border-right: none;  border-top: none; }
.welcome-bracket-br { bottom: 28px; right: 28px; border-left: none;   border-top: none; }

/* ── Content stack ── */
.welcome-content {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  /* Allow scrolling silently on tiny viewports, but hide the
     scrollbar entirely — it breaks the cinematic feel. The content
     should fit comfortably in any viewport ≥ 720px tall, which
     covers >95% of real-world screens. */
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* P65.309 — top + bottom padding raised so the NOX sigil and the
     Enter button no longer kiss the frame edges.  Frame inset is 28px
     (above), content padding is 80px → ~52px clear space between the
     hairline and the nearest content row.  Sides keep 32px so the
     manifestos and threshold copy don't crowd the side brackets. */
  padding: 80px 40px 80px;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
}
/* WebKit (Chrome/Safari) — hide scrollbar entirely */
.welcome-content::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* On tall viewports: a touch more breathing room around the stack */
@media (min-height: 900px) {
  .welcome-content { gap: 28px; padding: 104px 40px 96px; }
}

/* ── Brand sigil (stacked bars + NOX wordmark) ── */
.welcome-sigil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
}
.welcome-overlay-active .welcome-sigil {
  animation: welcomeFadeUp .55s cubic-bezier(.2,.7,.2,1) .85s forwards;
}
.welcome-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.welcome-mark-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(0,255,170,.5);
}
.welcome-mark-bar:nth-child(1) { height: 8px;  }
.welcome-mark-bar:nth-child(2) { height: 14px; }
.welcome-mark-bar:nth-child(3) { height: 11px; }
.welcome-mark-bar:nth-child(4) { height: 18px; }
.welcome-wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-0);
}
.welcome-wordmark-x { color: var(--accent); }

/* ── Terminal credentials block ── */
.welcome-creds {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(0, 196, 114, .04);
  border: 1px solid rgba(0, 196, 114, .2);
  border-radius: 8px;
  padding: 12px 18px;
  min-width: 320px;
}
.welcome-cred-line {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.welcome-cred-prompt { color: var(--text-3); }
.welcome-cred-key {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
  width: 88px;
  display: inline-block;
}
.welcome-cred-val { color: var(--accent); font-weight: 700; }
.welcome-cred-cursor {
  color: var(--accent);
  margin-left: 1px;
  animation: welcomeCursorBlink .85s steps(1) infinite;
}
@keyframes welcomeCursorBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* Stagger each credential line typing in */
.welcome-overlay-active .welcome-cred-line:nth-child(1) { animation: welcomeCredIn .4s ease-out 1.30s forwards; }
.welcome-overlay-active .welcome-cred-line:nth-child(2) { animation: welcomeCredIn .4s ease-out 1.55s forwards; }
.welcome-overlay-active .welcome-cred-line:nth-child(3) { animation: welcomeCredIn .4s ease-out 1.80s forwards; }
.welcome-overlay-active .welcome-cred-line:nth-child(4) { animation: welcomeCredIn .4s ease-out 2.05s forwards; }
@keyframes welcomeCredIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Manifestos: two side-by-side blocks ── */
.welcome-manifestos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  width: 100%;
}
.welcome-manifesto {
  opacity: 0;
  transform: translateY(8px);
}
.welcome-overlay-active .welcome-manifesto[data-stage="get"] {
  animation: welcomeFadeUp .6s cubic-bezier(.2,.7,.2,1) 2.30s forwards;
}
.welcome-overlay-active .welcome-manifesto[data-stage="owe"] {
  animation: welcomeFadeUp .6s cubic-bezier(.2,.7,.2,1) 3.10s forwards;
}
.welcome-manifesto-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.welcome-manifesto-mark-line {
  flex: 1;
  height: 1px;
  background: rgba(0,196,114,.3);
}
.welcome-manifesto-mark-text {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .26em;
  color: var(--accent);
  white-space: nowrap;
}
.welcome-manifesto-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.welcome-manifesto-item {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-1);
  letter-spacing: -.005em;
  font-weight: 500;
  position: relative;
  padding-left: 22px;
  opacity: 0;
}
.welcome-manifesto-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 1px;
  background: var(--accent);
  opacity: .5;
}
/* Stagger the items WITHIN each manifesto.
   Items in the LEFT manifesto start at 2.40s, RIGHT at 3.20s, each
   item +120ms after the previous. */
.welcome-overlay-active [data-stage="get"] .welcome-manifesto-item {
  animation: welcomeFadeUpFast .45s cubic-bezier(.2,.7,.2,1) calc(2.40s + var(--m-i, 0) * 0.13s) forwards;
}
.welcome-overlay-active [data-stage="owe"] .welcome-manifesto-item {
  animation: welcomeFadeUpFast .45s cubic-bezier(.2,.7,.2,1) calc(3.20s + var(--m-i, 0) * 0.13s) forwards;
}
@keyframes welcomeFadeUpFast {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Threshold (final big WELCOME + enter button) ── */
.welcome-threshold {
  text-align: center;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(10px);
}
.welcome-overlay-active .welcome-threshold {
  animation: welcomeFadeUp .65s cubic-bezier(.2,.7,.2,1) 4.10s forwards;
}
.welcome-threshold-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .32em;
  color: var(--accent);
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(0,255,170,.4);
}
.welcome-threshold-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-0);
  margin-bottom: 22px;
  line-height: 1.2;
}

.welcome-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(180deg, rgba(0,196,114,.14), rgba(0,196,114,.06));
  border: 1px solid rgba(0,196,114,.4);
  border-radius: 10px;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .2s;
  box-shadow:
    0 0 0 1px rgba(0,196,114,.2) inset,
    0 8px 24px -8px rgba(0,196,114,.4),
    0 0 32px -10px rgba(0,255,170,.5);
}
.welcome-enter:hover {
  background: linear-gradient(180deg, rgba(0,196,114,.22), rgba(0,196,114,.10));
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,196,114,.3) inset,
    0 12px 32px -8px rgba(0,196,114,.55),
    0 0 48px -10px rgba(0,255,170,.7);
}
.welcome-enter-arrow {
  font-size: 16px;
  transition: transform .2s;
}
.welcome-enter:hover .welcome-enter-arrow {
  transform: translateX(3px);
}

.welcome-skip {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .08em;
}
.welcome-skip-mono {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .12em;
}

/* Shared fade-up keyframe used by sigil, manifestos, threshold */
@keyframes welcomeFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Mobile: stack manifestos, scale down ── */
@media (max-width: 720px) {
  .welcome-content { padding: 60px 20px; gap: 28px; }
  .welcome-manifestos { grid-template-columns: 1fr; gap: 28px; }
  .welcome-creds { min-width: 0; width: 100%; font-size: 11px; padding: 12px 14px; }
  .welcome-cred-key { width: 76px; }
  .welcome-threshold-title { font-size: 24px; }
  .welcome-bracket-tl, .welcome-bracket-tr { top: 24px; }
  .welcome-bracket-bl, .welcome-bracket-br { bottom: 24px; }
  .welcome-bracket-tl, .welcome-bracket-bl { left: 24px; }
  .welcome-bracket-tr, .welcome-bracket-br { right: 24px; }
  .welcome-frame-top    { top: 24px; }
  .welcome-frame-bottom { bottom: 24px; }
}

/* ── Reduced motion: skip the cinematic, show content immediately ── */
@media (prefers-reduced-motion: reduce) {
  .welcome-overlay-active .welcome-activation,
  .welcome-overlay-active .welcome-frame-top,
  .welcome-overlay-active .welcome-frame-bottom,
  .welcome-overlay-active .welcome-bracket,
  .welcome-overlay-active .welcome-sigil,
  .welcome-overlay-active .welcome-cred-line,
  .welcome-overlay-active .welcome-manifesto,
  .welcome-overlay-active .welcome-manifesto-item,
  .welcome-overlay-active .welcome-threshold {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   P32 — WALLET TIER BADGES
   ─────────────────────────────────────────────────────────────
   Three render modes (driven by renderWalletBadge opts):
     iconOnly  — just the emoji (sidebar widgets, tight rows)
     compact   — icon + tiny uppercase label (default; post cards)
     full      — icon + readable label (profile header)

   Per-tier color comes from .wallet-tier-{id} modifier classes
   so we can match the existing WALLET_TIERS palette exactly.
   ═══════════════════════════════════════════════════════════════ */

.wallet-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
  line-height: 1.4;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text-3);
  /* Don't shrink in flex containers (post-username row) */
  flex-shrink: 0;
}
.wallet-tier-badge .wallet-tier-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: .14em;
}

/* Icon-only mode (legacy — kept for backward compat with one-off callers). */
.wallet-tier-icon {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
  opacity: .9;
  transition: transform .15s, opacity .15s;
  flex-shrink: 0;
}
.wallet-tier-icon:hover { transform: scale(1.18); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   P65.31 — POLISHED EMOJI-ONLY PILL (default badge on post cards)
   ─────────────────────────────────────────────────────────────
   Replaces the cluttered "icon + PLANKTON" compact label with a
   tier-tinted circle containing just the emoji. Per-tier idle
   animations bring the badges to life:
     • plankton/shrimp → gentle pulse (organism breathing)
     • crab            → side-to-side scuttle
     • fish/dolphin    → horizontal swim (left-right glide)
     • shark           → faster swim with menacing tilt
     • whale           → slow majestic float (vertical bob + glow)
     • megalodon       → ominous bob + stronger glow ring
     • printer         → dramatic shimmer + pulse
   Hover scales up + amplifies glow; click target is the whole pill.
   ═══════════════════════════════════════════════════════════════ */
.wallet-tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 5px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: help;
  position: relative;
  /* Default tint — overridden per tier below */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform .2s cubic-bezier(.2, 0, 0, 1),
    box-shadow .2s,
    border-color .2s;
}
.wallet-tier-pill:hover {
  transform: scale(1.18);
  z-index: 2;
}
.wallet-tier-pill .wallet-tier-emoji {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  /* Filter prevents the emoji's intrinsic shadow from rendering
     awkwardly on dark backgrounds. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  /* The animation is set per-tier below — empty by default. */
  will-change: transform;
}

/* Per-tier pill colors + animation assignments */
/* P65.277 — bumped the lower-tier pill backgrounds from 6% → 22%
   opacity so the badge has a visibly tinted container around the
   emoji.  At 6% the pill was effectively transparent against the
   dark page bg, so the emoji floated alone and read as a washed-out
   grey blob.  Also added the box-shadow glow that higher tiers have
   so plankton + shrimp get the same identity treatment. */
.wallet-tier-pill.wallet-tier-plankton {
  background: rgba(170, 230, 200, 0.22);
  border-color: rgba(170, 230, 200, 0.42);
  box-shadow: 0 0 6px rgba(170, 230, 200, 0.18);
}
.wallet-tier-pill.wallet-tier-plankton .wallet-tier-emoji {
  animation: tierPulse 2.6s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-shrimp {
  background: rgba(255, 180, 170, 0.22);
  border-color: rgba(255, 180, 170, 0.42);
  box-shadow: 0 0 6px rgba(255, 180, 170, 0.18);
}
.wallet-tier-pill.wallet-tier-shrimp .wallet-tier-emoji {
  animation: tierPulse 2.2s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-crab {
  background: rgba(61, 127, 196, 0.10);
  border-color: rgba(61, 127, 196, 0.28);
  box-shadow: 0 0 6px rgba(61, 127, 196, 0.10);
}
.wallet-tier-pill.wallet-tier-crab .wallet-tier-emoji {
  animation: tierScuttle 1.6s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-fish {
  background: rgba(61, 160, 220, 0.12);
  border-color: rgba(61, 160, 220, 0.32);
  box-shadow: 0 0 6px rgba(61, 160, 220, 0.14);
}
.wallet-tier-pill.wallet-tier-fish .wallet-tier-emoji {
  animation: tierSwim 2.4s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-dolphin {
  background: rgba(140, 110, 220, 0.12);
  border-color: rgba(140, 110, 220, 0.32);
  box-shadow: 0 0 8px rgba(140, 110, 220, 0.18);
}
.wallet-tier-pill.wallet-tier-dolphin .wallet-tier-emoji {
  animation: tierSwim 2.0s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-shark {
  background: rgba(0, 196, 114, 0.10);
  border-color: rgba(0, 196, 114, 0.30);
  box-shadow: 0 0 8px rgba(0, 196, 114, 0.20);
}
.wallet-tier-pill.wallet-tier-shark .wallet-tier-emoji {
  animation: tierSwim 1.6s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-whale {
  background: rgba(0, 196, 114, 0.14);
  border-color: rgba(0, 196, 114, 0.38);
  box-shadow: 0 0 10px rgba(0, 196, 114, 0.28);
  animation: tierGlowGreen 3.2s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-whale .wallet-tier-emoji {
  animation: tierFloat 3.6s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-megalodon {
  background: rgba(191, 162, 78, 0.14);
  border-color: rgba(191, 162, 78, 0.40);
  box-shadow: 0 0 12px rgba(191, 162, 78, 0.30);
  animation: tierGlowGold 3s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-megalodon .wallet-tier-emoji {
  animation: tierFloat 3.0s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-printer {
  background: linear-gradient(135deg, rgba(191, 162, 78, 0.18), rgba(0, 196, 114, 0.14));
  border-color: rgba(191, 162, 78, 0.50);
  box-shadow: 0 0 16px rgba(191, 162, 78, 0.40), 0 0 8px rgba(0, 196, 114, 0.20);
  animation: tierGlowPrinter 2.4s ease-in-out infinite;
}
.wallet-tier-pill.wallet-tier-printer .wallet-tier-emoji {
  animation: tierShimmer 2.2s ease-in-out infinite;
}

/* ── Animations ──
   Designed to be subtle: each is gentle enough to not distract from
   the post content but lively enough that the badge feels alive. */

/* Plankton/shrimp: organism breathing — gentle scale */
@keyframes tierPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.10); }
}

/* Crab: side-to-side scuttle */
@keyframes tierScuttle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-1.5px) rotate(-6deg); }
  75%      { transform: translateX(1.5px) rotate(6deg); }
}

/* Fish/dolphin/shark: horizontal swim with subtle wave */
@keyframes tierSwim {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(-1px) translateY(-1px); }
  50%      { transform: translateX(0) translateY(0); }
  75%      { transform: translateX(1px) translateY(1px); }
}

/* Whale/megalodon: slow majestic float (vertical bob + tiny rotation) */
@keyframes tierFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}

/* Money Printer: shimmer pulse */
@keyframes tierShimmer {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 4px rgba(255, 220, 130, 0.7)); }
}

/* Pill-level glow pulses for whale+ */
@keyframes tierGlowGreen {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 196, 114, 0.28); }
  50%      { box-shadow: 0 0 16px rgba(0, 196, 114, 0.45); }
}
@keyframes tierGlowGold {
  0%, 100% { box-shadow: 0 0 12px rgba(191, 162, 78, 0.30); }
  50%      { box-shadow: 0 0 18px rgba(191, 162, 78, 0.50); }
}
@keyframes tierGlowPrinter {
  0%, 100% { box-shadow: 0 0 16px rgba(191, 162, 78, 0.40), 0 0 8px rgba(0, 196, 114, 0.20); }
  50%      { box-shadow: 0 0 24px rgba(191, 162, 78, 0.60), 0 0 14px rgba(0, 196, 114, 0.35); }
}

/* Respect prefers-reduced-motion — disable all idle animations
   for users who've turned them off in their OS. The badges still
   appear, just static. */
@media (prefers-reduced-motion: reduce) {
  .wallet-tier-pill,
  .wallet-tier-pill .wallet-tier-emoji {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   P65.32 — "SM" SMART MONEY BADGE
   ─────────────────────────────────────────────────────────────
   A stylized two-letter pill. The gradient runs gold → green to
   imply "money + smart" without being garish. A diagonal shine
   sweep crosses the badge every few seconds for a premium feel.
   Sits at 24×16px so it reads as an inline name decoration, not
   a sticker on the post.
   ═══════════════════════════════════════════════════════════════ */
.sm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  margin-left: 6px;
  padding: 0 6px;
  height: 17px;
  min-width: 26px;
  border-radius: 6px;
  cursor: help;
  overflow: hidden;
  /* Gold→green gradient — money + smart. */
  background:
    linear-gradient(135deg, #c8a44a 0%, #d8b860 35%, #1ab974 70%, #00c472 100%);
  border: 1px solid rgba(255, 220, 130, 0.40);
  box-shadow:
    0 0 10px rgba(200, 164, 74, 0.28),
    0 0 14px rgba(0, 196, 114, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .2s;
  animation: smGlow 3.4s ease-in-out infinite;
}
.sm-badge:hover {
  transform: scale(1.12) translateY(-1px);
  z-index: 2;
  box-shadow:
    0 0 14px rgba(200, 164, 74, 0.45),
    0 0 20px rgba(0, 196, 114, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.sm-badge .sm-badge-text {
  position: relative;
  z-index: 2;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0f1410;
  /* Subtle text shadow lifts the letters off the gradient. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  line-height: 1;
}

/* Diagonal shine sweep — a thin white-to-transparent gradient
   that travels across the pill every cycle. Creates a "premium"
   sheen without being loud. */
.sm-badge .sm-badge-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: smShine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Larger preview variant — used in the Settings verification card */
.sm-badge.sm-badge-lg {
  height: 28px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 8px;
  margin-left: 0;
}
.sm-badge.sm-badge-lg .sm-badge-text {
  font-size: 14px;
  letter-spacing: 0.10em;
}

/* Outer halo glow — breathes gold→green */
@keyframes smGlow {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(200, 164, 74, 0.28),
      0 0 14px rgba(0, 196, 114, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 0 16px rgba(200, 164, 74, 0.50),
      0 0 22px rgba(0, 196, 114, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}

/* Shine sweep — left → right. Most of the cycle the shine sits
   off-canvas (left:-60%); the actual flash takes ~25% of the loop
   so it doesn't feel constant. */
@keyframes smShine {
  0%   { left: -60%; opacity: 0; }
  20%  { left: -60%; opacity: 0; }
  35%  { opacity: 0.9; }
  60%  { left: 110%; opacity: 0.9; }
  61%  { opacity: 0; }
  100% { left: 110%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-badge,
  .sm-badge .sm-badge-shine {
    animation: none !important;
  }
  .sm-badge .sm-badge-shine { display: none; }
}

/* Small spinner used inside "Verifying…" button state */
.spinner-sm {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -1px;
}

/* ═══════════════════════════════════════════════════════════════
   P65.35 — Network Picker (Change Network dropdown in Settings)
   ─────────────────────────────────────────────────────────────
   Anchors below the "Change Network" button. Each row is a chain
   with a colored dot (matching the chain's brand), label, and
   native symbol. The currently-active chain is disabled and shows
   a "CURRENT" pill.
   ═══════════════════════════════════════════════════════════════ */
.network-switch-btn {
  /* Visually mirrors btn-secondary but with a hint of accent. */
  border-color: rgba(0, 196, 114, 0.18) !important;
}
.network-switch-btn:hover {
  border-color: rgba(0, 196, 114, 0.40) !important;
  color: var(--accent) !important;
}

.network-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 280px;
  background: var(--bg-2);
  border: 1px solid rgba(0, 196, 114, 0.20);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(0, 196, 114, 0.08);
  overflow: hidden;
  animation: networkPickerIn .2s cubic-bezier(.2, 0, 0, 1);
}
@keyframes networkPickerIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.network-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.network-picker-head button {
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.network-picker-head button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-0);
}
.network-picker-list {
  display: flex;
  flex-direction: column;
  padding: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.network-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  text-align: left;
  transition: background .14s, transform .14s;
}
.network-picker-item:hover {
  background: rgba(0, 196, 114, 0.08);
  color: var(--text-0);
}
.network-picker-item:active {
  transform: scale(0.99);
}
.network-picker-item.is-current {
  background: rgba(0, 196, 114, 0.05);
  color: var(--text-3);
  cursor: default;
}
.network-picker-item.is-current:hover {
  background: rgba(0, 196, 114, 0.05);
}
.network-picker-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.network-picker-name {
  flex: 1;
  letter-spacing: -0.005em;
}
.network-picker-symbol {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.network-picker-current {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.30);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.network-picker-foot {
  padding: 8px 12px 10px;
  font-size: 10.5px;
  color: var(--text-4);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .network-picker { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   P65.34 — Smart Money "How to become" info popover
   ═══════════════════════════════════════════════════════════════ */
.sm-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(186, 131, 255, 0.40);
  background: rgba(186, 131, 255, 0.10);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  font-family: -apple-system, system-ui, sans-serif;
  font-style: italic;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all .15s;
}
.sm-info-btn:hover {
  background: rgba(186, 131, 255, 0.20);
  color: var(--text-0);
  border-color: rgba(186, 131, 255, 0.60);
  transform: scale(1.1);
}

.sm-info-popover {
  position: absolute;
  top: 50px;
  left: 16px;
  right: 16px;
  z-index: 5;
  background: var(--bg-2);
  border: 1px solid rgba(186, 131, 255, 0.30);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(186, 131, 255, 0.10);
  animation: smInfoIn .22s cubic-bezier(.2, 0, 0, 1);
  overflow: hidden;
}
@keyframes smInfoIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sm-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(186, 131, 255, 0.15);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: 0.02em;
}
.sm-info-head button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sm-info-head button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-0);
}
.sm-info-body {
  padding: 12px 14px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.sm-info-body p {
  margin: 0 0 10px;
}
.sm-info-body p:last-child {
  margin-bottom: 0;
}
.sm-info-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sm-info-body li {
  position: relative;
  padding-left: 16px;
  font-size: 11.5px;
  color: var(--text-2);
}
.sm-info-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8a44a, #00c472);
  box-shadow: 0 0 4px rgba(200, 164, 74, 0.4);
}
.sm-info-body li strong {
  color: var(--text-0);
}
.sm-info-body .sm-info-foot {
  font-size: 11px;
  color: var(--text-4);
  font-style: italic;
  border-top: 1px solid rgba(186, 131, 255, 0.10);
  padding-top: 8px;
  margin-top: 8px;
}

/* Full mode — used in profile header. Larger, more presence. */
.wallet-tier-badge.wallet-tier-full {
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  gap: 6px;
}
.wallet-tier-badge.wallet-tier-full .wallet-tier-label {
  font-size: 10.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -.005em;
  font-weight: 700;
}

/* ── Per-tier theming ──
   Color/background pulled from the WALLET_TIERS table to keep
   parity with the Settings tier strip and the tier card. */

.wallet-tier-plankton {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
  color: var(--text-4);
}
.wallet-tier-shrimp {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: var(--text-3);
}
.wallet-tier-crab {
  background: rgba(61,127,196,.06);
  border-color: rgba(61,127,196,.18);
  color: var(--blue);
}
.wallet-tier-fish {
  background: rgba(61,127,196,.08);
  border-color: rgba(61,127,196,.22);
  color: var(--blue);
}
.wallet-tier-dolphin {
  background: rgba(107,92,174,.08);
  border-color: rgba(107,92,174,.22);
  color: var(--purple);
}
.wallet-tier-shark {
  background: rgba(0,196,114,.08);
  border-color: rgba(0,196,114,.18);
  color: var(--accent);
}
.wallet-tier-whale {
  background: rgba(0,196,114,.10);
  border-color: rgba(0,196,114,.25);
  color: var(--accent);
  /* Soft glow at whale+ tier — earned */
  box-shadow: 0 0 8px rgba(0,196,114,.15);
}
.wallet-tier-megalodon {
  background: rgba(191,162,78,.10);
  border-color: rgba(191,162,78,.28);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(191,162,78,.18);
}
.wallet-tier-printer {
  background: linear-gradient(135deg, rgba(191,162,78,.14), rgba(0,196,114,.10));
  border-color: rgba(191,162,78,.35);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(191,162,78,.25), 0 0 6px rgba(0,196,114,.15);
  /* Subtle pulse for the very top tier */
  animation: walletPrinterPulse 3s ease-in-out infinite;
}
@keyframes walletPrinterPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(191,162,78,.25), 0 0 6px rgba(0,196,114,.15); }
  50%      { box-shadow: 0 0 22px rgba(191,162,78,.4),  0 0 10px rgba(0,196,114,.25); }
}

/* Whale+ icon styling — make the icon itself slightly larger */
.wallet-tier-whale,
.wallet-tier-megalodon,
.wallet-tier-printer { font-weight: 800; }

/* Mobile — keep the badge from wrapping the username line.
   Hide labels on very narrow screens, keep icons. */
@media (max-width: 480px) {
  .wallet-tier-badge .wallet-tier-label { display: none; }
  .wallet-tier-badge { padding: 2px 5px; }
}

/* ═══════════════════════════════════════════════════════════════
   P32 — SETTINGS PAGE LAYOUT (full-width, no scroll chrome)
   ─────────────────────────────────────────────────────────────
   The default app layout is 3-column (left sidebar + main 620px
   feed + right rail with creators/widgets). For Settings, the
   right rail is empty and the 620px feed cap pinches the content
   into a narrow column. Override the layout when on /settings:
     • Hide the right rail entirely (its space goes to main)
     • Drop the 620px max-width on main-feed
     • Drop the 560px max-width on settings-content
     • Hide main-feed's scrollbar (silent scroll on overflow)
     • Cap content at a sensible reading width (920px) so on
       ultra-wide monitors it doesn't sprawl edge-to-edge
   ═══════════════════════════════════════════════════════════════ */

body.page-settings .sidebar-right {
  display: none;
}

body.page-settings .main-feed {
  max-width: none;
  padding: 0 24px;
  /* Hide scrollbar on Settings — content scrolls silently */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.page-settings .main-feed::-webkit-scrollbar { display: none; width: 0; height: 0; }

body.page-settings .settings-layout {
  /* Center the whole thing in the wider available space; cap
     so it doesn't get absurdly wide on 4K screens. */
  max-width: 1080px;
  margin: 0 auto;
}
body.page-settings .settings-content {
  max-width: none;
  padding: 28px 32px;
}
body.page-settings .settings-nav {
  width: 220px;
  padding: 28px 12px;
}

/* ── Wallet picker cards (refactored, less inline-style soup) ── */
.wallet-pick-card {
  position: relative;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid rgba(0,196,114,.08);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wallet-pick-card:hover {
  border-color: rgba(0,196,114,.28);
  background: rgba(0,196,114,.03);
  transform: translateY(-1px);
}
.wallet-pick-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wallet-pick-card-icon {
  font-size: 22px;
  line-height: 1;
}
.wallet-pick-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
}
.wallet-pick-card-desc {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.4;
}
.wallet-pick-card-chains {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.wallet-pick-card-chains > span {
  font-size: 9px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px;
  color: var(--text-3);
}

/* The "How tier detection works" explainer below the picker */
.wallet-explainer {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0,196,114,.025);
  border: 1px solid rgba(0,196,114,.1);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}
.wallet-explainer strong {
  color: var(--accent);
  font-weight: 700;
}

/* When Settings is full-width, give the wallet picker more room
   per row. Currently 1fr 1fr (2-col). On wider screens, go 3-col. */
@media (min-width: 1100px) {
  body.page-settings .wallet-pick-card-desc { font-size: 11.5px; }
  body.page-settings .settings-section { padding: 26px; }
}

/* Tighten up settings sections — make the Wallet Connection card
   look less squeezed by giving form rows more padding and the
   section a richer surface treatment. */
body.page-settings .settings-section {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(0,196,114,.1);
  border-radius: 14px;
  padding: 24px 26px;
}
body.page-settings .settings-section-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 4px;
}
body.page-settings .settings-section-desc {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════
   P32 — APPEARANCE TAB (theme picker + language select)
   ═══════════════════════════════════════════════════════════════ */

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 18px;
}
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid rgba(0,196,114,.08);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  text-align: left;
  font-family: inherit;
}
.theme-card:hover {
  border-color: rgba(0,196,114,.28);
  transform: translateY(-1px);
}
.theme-card-active {
  border-color: var(--accent);
  background: rgba(0,196,114,.05);
  box-shadow: 0 0 0 1px rgba(0,196,114,.15) inset;
}
.theme-card-active::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0,196,114,.4);
}
.theme-card-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.theme-card-disabled:hover {
  border-color: rgba(0,196,114,.08);
  transform: none;
}

/* Mini preview swatch — represents the theme visually */
.theme-card-preview {
  height: 64px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.theme-card-preview-black {
  background: linear-gradient(135deg, #050709, #0a0d10);
  border: 1px solid rgba(255,255,255,.06);
}
.theme-card-preview-dim {
  background: linear-gradient(135deg, #1a1f24, #11161a);
  border: 1px solid rgba(255,255,255,.08);
}
.theme-card-preview-white-soon {
  background: linear-gradient(135deg, #FFFFFF, #F0F2F1);
  border: 1px solid rgba(0,0,0,.08);
}
.theme-card-bar {
  height: 6px;
  width: 80%;
  border-radius: 3px;
  display: block;
}
.theme-card-dot {
  position: absolute;
  bottom: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.theme-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-card-sub {
  font-size: 10.5px;
  color: var(--text-4);
  margin-top: 2px;
  letter-spacing: .01em;
}
.theme-card-soon {
  font-size: 8.5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 800;
  letter-spacing: .14em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--text-4);
  border: 1px solid rgba(255,255,255,.08);
}

/* Language select — wider so the country names + flags fit */
.lang-select-input {
  width: auto;
  min-width: 220px;
  max-width: 260px;
  padding-right: 28px;
  font-size: 13px;
}

/* Mobile */
@media (max-width: 640px) {
  .theme-picker { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   P32 — SETTINGS PAGE (institutional redesign)
   ─────────────────────────────────────────────────────────────
   Patterns adopted: Stripe Dashboard (always-saving with Saved
   pill), Linear (sectioned content + sub-headers), Vercel
   (clean field hierarchy with status badges), Bloomberg (mono
   for identifiers, no decorative chrome).
   ═══════════════════════════════════════════════════════════════ */

/* Section header with optional right-aligned status (e.g. Saved pill) */
.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* Saved pill — appears for ~1.8s after a successful save */
.settings-saved-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,196,114,.08);
  border: 1px solid rgba(0,196,114,.25);
  color: var(--accent);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  flex-shrink: 0;
}
.settings-saved-pill-show {
  opacity: 1;
  transform: translateY(0);
}

/* Inline status pill — Verified, Locked, Soon, OK, Warn */
.settings-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}
.settings-pill-ok    { background: rgba(0,196,114,.10); border: 1px solid rgba(0,196,114,.28); color: var(--accent); }
.settings-pill-warn  { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); color: #f59e0b; }
.settings-pill-soon  { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-3); }
.settings-pill-muted { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: var(--text-4); }

/* Field block — replaces .input-group for a tighter, scannable hierarchy */
.settings-field {
  margin-bottom: 18px;
}
.settings-field:last-child { margin-bottom: 0; }
.settings-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.settings-field-label > span:first-child { letter-spacing: .04em; }
.settings-field-lock {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: none;
  color: var(--text-4);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.settings-field-status {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.settings-field-status-ok   { background: rgba(0,196,114,.10); border: 1px solid rgba(0,196,114,.28); color: var(--accent); }
.settings-field-status-warn { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); color: #f59e0b; }

.settings-field-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.45;
}

/* ───────────────────────────────────────────────────────────────────
   P65.21 — IDENTITY CARD (Profile tab top)
   Card-style preview of the public profile: bigger banner, larger
   avatar with hash-color gradient ring, Instagram-style camera
   icon overlays for editing banner + avatar, real stats row,
   inline badges, and a "View public profile" CTA.
   ─────────────────────────────────────────────────────────────────── */
.settings-idcard {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  background: var(--bg-2) !important;
  border: 1px solid rgba(0, 196, 114, 0.14) !important;
  border-radius: 14px !important;
}

/* Banner + edit overlay */
.settings-idcard-banner {
  height: 124px;
  position: relative;
}
.settings-idcard-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
.settings-idcard-edit-banner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.settings-idcard-edit-banner:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Body row — avatar + meta + view CTA
   P65.30 — Layout overhaul. Was: align-items:flex-end + margin-top:-44px,
   which pulled the WHOLE meta column up so the name + handle + stats
   visually overlapped the banner gradient. The fix: avatar stays half-
   peeking-into the banner (Instagram pattern), but the meta column
   sits BELOW the banner with proper top padding so the name reads as
   "below the banner" rather than "floating over it". */
.settings-idcard-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 24px 22px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

/* Avatar with gradient ring + edit overlay
   margin-top: -56px lifts ONLY the avatar half-into the banner. The
   meta column flows in normal padding-top space below. */
.settings-idcard-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -56px;
}
.settings-idcard-avatar-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.settings-idcard-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--bg-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
}
.settings-idcard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.settings-idcard-edit-avatar {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  border: 2px solid var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, background .15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.settings-idcard-edit-avatar:hover {
  transform: scale(1.1);
}

/* Meta column — name + handle + stats
   P65.30 — Removed padding-bottom (no longer needed since avatar isn't
   pulling whole row up). Adds a tiny top inset so name baseline lines
   up with the avatar's vertical center. */
.settings-idcard-meta {
  flex: 1;
  min-width: 200px;
  padding-top: 2px;
}
.settings-idcard-namerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.settings-idcard-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.015em;
  line-height: 1.15;
}
.settings-idcard-handle {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.settings-idcard-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.settings-idcard-stat strong {
  color: var(--text-0);
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -.005em;
}
.settings-idcard-stat-sep {
  color: var(--text-4);
  opacity: .6;
}

/* Inline badges (founder / staff / verified / unverified) */
.settings-id-badge {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
}
.settings-id-badge-founder {
  background: rgba(191, 162, 78, 0.14);
  color: var(--gold);
  border: 1px solid rgba(191, 162, 78, 0.32);
}
.settings-id-badge-staff {
  background: rgba(0, 196, 114, 0.10);
  color: var(--accent);
  border: 1px solid rgba(0, 196, 114, 0.30);
}
.settings-id-badge-verified {
  background: var(--accent);
  color: #0a0a0a;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}
.settings-id-badge-warn {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

/* "View public profile" CTA — primary green link button on the right */
.settings-idcard-view {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.30);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -.005em;
  transition: all .15s;
}
.settings-idcard-view:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  transform: translateX(2px);
}
.settings-idcard-view svg {
  transition: transform .15s;
}
.settings-idcard-view:hover svg {
  transform: translateX(2px);
}

/* Tighter mobile layout
   P65.30 — Updated padding to match desktop's new flex-start layout. */
@media (max-width: 600px) {
  .settings-idcard-banner { height: 100px; }
  .settings-idcard-body { padding: 14px 16px 16px; gap: 12px; }
  .settings-idcard-avatar-wrap { margin-top: -48px; }
  .settings-idcard-avatar-ring { width: 80px; height: 80px; }
  .settings-idcard-name { font-size: 18px; }
  .settings-idcard-stats { font-size: 11px; gap: 4px; }
  .settings-idcard-view { width: 100%; justify-content: center; margin-top: 8px; }
}

/* ── Toggle wrapper grouped within sections ── */
.toggle-wrap {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.toggle-wrap:last-child { border-bottom: none; }
.settings-section .toggle-wrap:first-of-type { padding-top: 4px; }
.toggle-disabled { opacity: .4; cursor: not-allowed; }

/* ── settings-row: tighter spacing in the new layout ── */
body.page-settings .settings-row {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
body.page-settings .settings-row:last-child { border-bottom: none; }
body.page-settings .settings-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
body.page-settings .settings-row-desc {
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.5;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   P33 — @MENTION POPUP + LINK STYLING
   ─────────────────────────────────────────────────────────────
   Popup appears below the active textarea when "@..." is typed.
   Keyboard ↑↓ + Enter to pick, Esc to dismiss, click works too.
   ═══════════════════════════════════════════════════════════════ */

.mention-popup {
  position: fixed;
  z-index: 1100;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: 4px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.mention-popup.mention-popup-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
.mention-item:hover,
.mention-item-active {
  background: rgba(0,196,114,.08);
}
.mention-item-text {
  flex: 1;
  min-width: 0;
}
.mention-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-item-handle {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
  letter-spacing: .02em;
}
.mention-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-4);
  text-align: center;
  line-height: 1.5;
}
.mention-empty strong { color: var(--text-2); font-family: var(--mono); }

/* ── Inline mention/ticker links inside post bodies + comments ── */
.mention-link,
.ticker-link {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  transition: background .12s ease;
}
.mention-link:hover,
.ticker-link:hover {
  background: rgba(0,196,114,.10);
  text-decoration: none;
}
.autolink {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.autolink:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   P34 — REELS BACK BUTTON
   ─────────────────────────────────────────────────────────────
   Floating arrow at top-left of the reels viewport. Sits above
   the video, semi-transparent dark pill, brightens on hover.
   Same z-index pattern as other floating UI on reels (mute btn,
   actions column).
   ═══════════════════════════════════════════════════════════════ */
.reels-back-btn {
  position: fixed;
  top: calc(var(--top-offset, 88px) + 14px);
  left: 14px;
  z-index: 250;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* P65.70 — delayed fade-in entrance. Holds invisible for ~1.2s so
     the user lands on the reel and focuses on the content first; then
     the back button glides in from the left. `both` fill-mode keeps
     the from-state (opacity 0, translated -12px) applied during the
     delay, otherwise it would flash in for one frame before the
     animation fires. */
  animation: reelsBackIn 320ms cubic-bezier(0.16, 1, 0.30, 1) 1.2s both;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.30, 1);
}
@keyframes reelsBackIn {
  from { opacity: 0; transform: translateX(-12px) scale(0.92); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
.reels-back-btn:hover {
  background: rgba(0, 0, 0, .8);
  border-color: rgba(255, 255, 255, .3);
  transform: translateX(-2px);
}
.reels-back-btn:active {
  transform: translateX(-3px) scale(.94);
}
/* On the reels page the body has .reels-active which may set the
   sidebars to display:none. Make sure our back button stays above. */
body.reels-active .reels-back-btn { z-index: 1500; }
@media (max-width: 640px) {
  .reels-back-btn { top: 14px; left: 10px; width: 36px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   P36 — POST SENTIMENT RATIO (up/down split visualization)
   ─────────────────────────────────────────────────────────────
   Two surfaces:
     1. .sentiment-bar       — full bar w/ counts, used in post detail
     2. .post-sentiment-strip — slim 3px strip, used in feed cards

   Color logic: green = upvotes (var(--accent)), red = downvotes
   (var(--red)). Single horizontal track with two width-controlled
   fills that meet in the middle proportional to vote share.
   ═══════════════════════════════════════════════════════════════ */

.sentiment-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: .04em;
  user-select: none;
}
.sentiment-bar-empty .sentiment-bar-track {
  background: rgba(255, 255, 255, .04);
}
.sentiment-bar-empty .sentiment-bar-fill-up,
.sentiment-bar-empty .sentiment-bar-fill-down {
  background: rgba(255, 255, 255, .06);
}
.sentiment-bar-track {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.sentiment-bar-fill-up {
  display: block;
  background: linear-gradient(90deg, rgba(0, 196, 114, .85), var(--accent));
  /* Smooth transitions when the ratio changes from a vote */
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.sentiment-bar-fill-down {
  display: block;
  background: linear-gradient(90deg, var(--red), rgba(212, 68, 68, .85));
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.sentiment-bar-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--text-2);
}
.sentiment-bar-count-up   { color: var(--accent); }
.sentiment-bar-count-down { color: var(--red); }
.sentiment-bar-empty .sentiment-bar-count-up,
.sentiment-bar-empty .sentiment-bar-count-down {
  color: var(--text-4);
}

/* ── Slim feed-card variant — sits above the action row ── */
.post-sentiment-strip {
  display: flex;
  align-items: stretch;
  height: 3px;
  margin: 0 0 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.post-sentiment-fill-up {
  display: block;
  background: var(--accent);
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.post-sentiment-fill-down {
  display: block;
  background: var(--red);
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}

/* ═══════════════════════════════════════════════════════════════
   P36 — POST DETAIL ACTION ROW
   ─────────────────────────────────────────────────────────────
   Replaced the old comment/repost/heart/save row with explicit
   up/down/reply/share/save. Up & down are colored (green/red) when
   the user has voted, neutral grey otherwise. Counts inline.
   ═══════════════════════════════════════════════════════════════ */

.post-detail-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 0;
  cursor: pointer;
  color: var(--text-3);
  transition: color .15s ease, background .15s ease;
  border-radius: 8px;
  user-select: none;
}
.post-detail-action:hover {
  background: rgba(255, 255, 255, .03);
  color: var(--text-1);
}
.post-detail-action-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
}
/* Active (voted) states */
.post-detail-action.is-up    { color: var(--accent); }
.post-detail-action.is-up:hover    { background: rgba(0, 196, 114, .06); }
.post-detail-action.is-down  { color: var(--red); }
.post-detail-action.is-down:hover  { background: rgba(212, 68, 68, .06); }
.post-detail-action.is-saved { color: var(--accent); }

/* Reels: when downvoted, tint red. (xpost-action.active is already
   the up state, defined in components.css.) */
.xpost-action.active-down { color: var(--red); }
.xpost-action.active-down svg { fill: currentColor; opacity: .15; }


/* ═══════════════════════════════════════════════════════════════
   P37 — CREATOR HUB
   ─────────────────────────────────────────────────────────────
   Real eligibility + earnings dashboard. Six sections:
     1. .creator-hero          — period clock + big projected $
     2. eligibility checklist  — 5 gates with progress bars
     3. earnings breakdown     — formula table, line by line
     4. history                — past periods (empty until pool turns on)
     5. roadmap to payouts     — 4-step honest disclosure

   Aesthetic: matches the institutional Settings redesign — section
   cards on bg-2, mono for numerics, brand green for "active",
   amber for "soon", grey for "pending."
   ═══════════════════════════════════════════════════════════════ */

/* Hero ───────────────────────────────────────────────────────── */
.creator-hero {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 28px 24px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.creator-hero::after {
  /* Subtle accent glow in the corner — gives the hero a quiet
     "this is the page that matters" weight without being loud. */
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,196,114,.08), transparent 70%);
  pointer-events: none;
}
.creator-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.creator-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.creator-hero-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
}
.creator-hero-sub strong {
  color: var(--text-1);
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
}
.creator-hero-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.creator-hero-status-ok {
  background: rgba(0,196,114,.10);
  border: 1px solid rgba(0,196,114,.28);
  color: var(--accent);
}
.creator-hero-status-pending {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.22);
  color: #f59e0b;
}
.creator-hero-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.creator-hero-currency {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
}
.creator-hero-value {
  font-size: 56px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.04em;
  font-family: var(--mono, ui-monospace, monospace);
  line-height: 1;
}
.creator-hero-label {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.creator-hero-disclosure {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(245,158,11,.05);
  border: 1px solid rgba(245,158,11,.16);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.creator-hero-disclosure svg {
  flex-shrink: 0;
  color: #f59e0b;
  margin-top: 1px;
}
.creator-hero-disclosure strong {
  color: var(--text-1);
  font-weight: 700;
}

/* Sections ─────────────────────────────────────────────────────── */
.creator-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 22px 20px;
  margin-bottom: 14px;
}
.creator-section-disclosure { background: var(--bg-1); }
.creator-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.creator-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.creator-section-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.creator-section-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.creator-progress-track {
  display: inline-block;
  width: 110px;
  height: 5px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow: hidden;
}
.creator-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.creator-progress-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .04em;
}

/* Eligibility gates ───────────────────────────────────────────── */
.creator-gates {
  display: grid;
  gap: 10px;
}
/* ═══════════════════════════════════════════════════════════════
   P65.280 — Eligibility section redesign.
   Old flat checklist → premium "monetization access" panel with:
     • Eyebrow caps + ambient pulse dot for "MONETIZATION ACCESS"
     • Big circular ring (X / 4) on the right
     • Three-state gate cards: PASSED · IN PROGRESS · LOCKED
     • Pulsing border on the active (next-up) gate
     • Status badges per gate
     • "What unlocks" callout selling the prize
   ═══════════════════════════════════════════════════════════════ */

/* Section wrapper — adds an ambient glow when on the eligibility tab */
.creator-elig-section {
  position: relative;
  overflow: hidden;
}
.creator-elig-section::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 196, 114, 0.05) 0%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.creator-elig-section > * { position: relative; z-index: 1; }

/* Header — eyebrow + title + ring */
.creator-elig-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.creator-elig-head-left { flex: 1; min-width: 0; }
.creator-elig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(52, 255, 175, 0.85);
  font-family: var(--mono, ui-monospace, monospace);
  margin-bottom: 8px;
}
.creator-elig-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34ffaf;
  box-shadow: 0 0 8px rgba(52, 255, 175, 0.7);
  animation: creatorEligPulse 1.8s ease-in-out infinite;
}
@keyframes creatorEligPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(0.85); }
}
.creator-elig-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.creator-elig-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 520px;
}

/* Big circular ring — replaces the puny linear progress bar */
.creator-elig-ring-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.creator-elig-ring {
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 196, 114, 0.18));
}
.creator-elig-ring-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.creator-elig-ring-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
}
.creator-elig-ring-denom {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  margin-left: 2px;
}

/* Gate cards — three states with strong identity */
.creator-gate {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s ease,
              background .15s ease,
              transform .15s ease,
              box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.creator-gate:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
}

/* PASSED state — green border + ambient green wash + filled green icon */
.creator-gate-passed {
  border-color: rgba(0, 196, 114, 0.32);
  background:
    linear-gradient(90deg, rgba(0, 196, 114, 0.06) 0%, rgba(0, 196, 114, 0.02) 60%, transparent 100%),
    var(--bg-1);
  box-shadow: inset 3px 0 0 rgba(0, 196, 114, 0.55);
}
.creator-gate-passed:hover {
  border-color: rgba(0, 196, 114, 0.5);
}

/* ACTIVE (next-up) state — the gate the user should focus on
   completing.  Pulsing left rail + brighter colors draw the eye. */
.creator-gate-active {
  border-color: rgba(0, 196, 114, 0.22);
  background:
    linear-gradient(90deg, rgba(0, 196, 114, 0.04) 0%, transparent 80%),
    var(--bg-1);
  box-shadow: inset 3px 0 0 rgba(52, 255, 175, 0.65);
  animation: creatorGateActiveBreath 3s ease-in-out infinite;
}
@keyframes creatorGateActiveBreath {
  0%, 100% { box-shadow: inset 3px 0 0 rgba(52, 255, 175, 0.45); }
  50%      { box-shadow: inset 3px 0 0 rgba(52, 255, 175, 0.85), 0 0 16px rgba(52, 255, 175, 0.10); }
}

/* LOCKED state — visible but clearly downstream */
.creator-gate-locked {
  opacity: 0.92;
}
.creator-gate-locked .creator-gate-label {
  color: var(--text-1);
}

/* Icon container — circular, color matches state */
.creator-gate-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-3);
  margin-top: 1px;
}
.creator-gate-passed .creator-gate-icon {
  background: linear-gradient(180deg, var(--accent) 0%, #00b067 100%);
  border-color: rgba(0, 196, 114, 0.6);
  color: #001a0f;
  box-shadow: 0 0 12px rgba(0, 196, 114, 0.35);
}
/* P65.298 — Active gate icon redesign.
   Was: an 8px green dot with an animated expanding glow ring
   (.creator-gate-icon-pulse + creatorGateIconPulse @keyframes).
   The motion was visually distracting on a vertical list of gates
   and added no information — the status pill on the right already
   says "IN PROGRESS".  Replaced with a clean static open-arc ring
   SVG (rendered inline in renderGateRow) that reads as "in progress"
   without animating.  The container styling below sets the tone:
   subtle green-tinted background, brighter green border, color
   inherited by the SVG via currentColor. */
.creator-gate-active .creator-gate-icon {
  background: rgba(52, 255, 175, 0.10);
  border-color: rgba(52, 255, 175, 0.40);
  color: #34ffaf;
  box-shadow: inset 0 0 0 1px rgba(52, 255, 175, 0.08);
}
.creator-gate-locked .creator-gate-icon {
  color: var(--text-3);
}

/* Body — label row with status badge, hint, progress bar */
.creator-gate-body { flex: 1; min-width: 0; }
.creator-gate-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.creator-gate-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.005em;
}
.creator-gate-hint {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.346 — Profile Replies tab (X-style, single-card threading)
   Each thread is ONE card holding two stacked rows:
     • Top row    = the parent post (avatar | name + body)
     • Bottom row = the user's reply (avatar | name + body + Like/Reply)
   A vertical thread-line drops from the parent's avatar to the
   reply's avatar — exactly how X renders nested conversations.
   ─────────────────────────────────────────────────────────────────── */

.profile-reply-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 14px;
}

.profile-reply-thread {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  transition: border-color 140ms ease;
  display: block;
  overflow: hidden;
}
.profile-reply-thread:hover {
  border-color: rgba(0, 196, 114, 0.20);
}

/* P65.359 — divider between the parent-post row and the user's
   reply row. The two rows are now independently clickable, so a
   visible horizontal rule makes it obvious where one click target
   ends and the next begins. */
.profile-reply-divider {
  height: 1px;
  margin: 0 16px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 12%,
    var(--border) 88%,
    transparent 100%);
}

/* ─── Row layout ────────────────────────────────────────────── */
.profile-reply-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
}
.profile-reply-row-post     { padding-bottom: 14px; }
.profile-reply-row-reply    { padding-top: 14px; padding-bottom: 8px; }

/* P65.359 — both rows are now their own click targets; give each
   its own hover affordance so it's obvious you can click either. */
.profile-reply-row-clickable {
  cursor: pointer;
  transition: background 140ms ease;
}
.profile-reply-row-clickable:hover {
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.04), rgba(0, 196, 114, 0.01));
}

.profile-reply-avatar-col {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-reply-avatar-wrap {
  display: inline-flex;
  cursor: pointer;
}
.profile-reply-body-col {
  flex: 1;
  min-width: 0;
}

/* ─── Vertical thread-line linking the two avatars ──────────── */
/* P65.359 — hidden now that a horizontal divider separates the
   two rows. The vertical line would look broken crossing the
   divider, and the new layout makes the connection clear without it. */
.profile-reply-thread-line {
  display: none;
}

/* ─── Meta line (name / handle / time / replying-to) ────────── */
.profile-reply-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
  min-width: 0;
  flex-wrap: wrap;
}
.profile-reply-name {
  font-weight: 700;
  color: var(--text-0);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.profile-reply-name:hover {
  text-decoration: underline;
  color: var(--accent);
}
.profile-reply-handle {
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 500;
}
.profile-reply-dot {
  color: var(--text-4);
  font-size: 12px;
  line-height: 1;
}
.profile-reply-time {
  color: var(--text-3);
  font-size: 12px;
}
.profile-reply-replying {
  color: var(--text-4);
  font-size: 11.5px;
  margin-left: 4px;
}
.profile-reply-replying-handle {
  color: var(--accent);
  font-weight: 600;
}

/* ─── Body text ─────────────────────────────────────────────── */
.profile-reply-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  margin: 2px 0 4px;
}
.profile-reply-text-comment {
  color: var(--text-0);
  font-size: 14.5px;
}

.profile-reply-media {
  margin: 8px 0 4px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 100%;
}
.profile-reply-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
}

.profile-reply-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.profile-reply-tag {
  font-size: 10.5px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ─── Action row on the user's reply (Like + Reply) ──────────
   Mirrors the post-detail comment action buttons so the visual
   language is consistent across surfaces.  Stops propagation on
   click so it doesn't trigger the thread-level openPost handler. */
.profile-reply-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 2px;
}
.profile-reply-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.profile-reply-action svg { flex-shrink: 0; }
.profile-reply-action:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}
.profile-reply-action-reply:hover {
  color: var(--accent);
  background: rgba(0, 196, 114, 0.08);
}
/* P65.347 — Like is GREEN (emerald accent), matching the platform's
   "earned signal" color rather than the red heart convention. */
.profile-reply-action-like:hover {
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
}
.profile-reply-action-like.is-liked {
  color: var(--accent);
}
.profile-reply-action-like.is-liked svg {
  color: var(--accent);
  fill: var(--accent);
}
.profile-reply-action-like.is-liked:hover {
  background: rgba(0, 196, 114, 0.14);
  filter: brightness(1.08);
}

/* P65.347 — Highlight pulse on a comment row when the user jumps to
   it from the profile Replies tab (openPostAtComment).  Two-second
   emerald glow + faint scale lift, then it cleans itself up.  Same
   visual language as the post-card pin-highlight from P65.335. */
.comment-row-jump-highlight {
  animation: commentRowJumpHighlight 2.2s cubic-bezier(.34, 1.12, .64, 1) both;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
@keyframes commentRowJumpHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0),
                0 0 0 0 rgba(0, 196, 114, 0);
    background-color: rgba(0, 196, 114, 0);
  }
  18% {
    box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.45),
                0 0 22px 6px rgba(0, 196, 114, 0.30);
    background-color: rgba(0, 196, 114, 0.06);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.28),
                0 0 36px 10px rgba(0, 196, 114, 0.22);
    background-color: rgba(0, 196, 114, 0.04);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0),
                0 0 0 0 rgba(0, 196, 114, 0);
    background-color: rgba(0, 196, 114, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .comment-row-jump-highlight { animation: none !important; }
}

/* P65.348 — Brief attract pulse on the inline reply-composer textarea
   when it auto-opens after the user clicks "Reply" on the profile
   Replies tab.  1.8s of emerald border-glow + faint bg fill so the
   user's eye lands on the composer they're about to type into. */
.comment-reply-composer-attract {
  animation: commentReplyComposerAttract 1.8s cubic-bezier(.34, 1.12, .64, 1) both;
  position: relative;
  z-index: 1;
}
@keyframes commentReplyComposerAttract {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0);
    background-color: transparent;
  }
  22% {
    box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.40),
                0 0 18px 4px rgba(0, 196, 114, 0.28);
    background-color: rgba(0, 196, 114, 0.06);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.22),
                0 0 24px 6px rgba(0, 196, 114, 0.18);
    background-color: rgba(0, 196, 114, 0.04);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0);
    background-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .comment-reply-composer-attract { animation: none !important; }
}

/* P65.329 — Inline link inside the eligibility hint that routes the
   user to the Pro subscribe page.  Underlined + accent-colored so
   it reads as obviously clickable; no button chrome so it doesn't
   compete with the row-level CTAs below. */
.creator-gate-hint-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  font-weight: 600;
  transition: color .12s ease, text-decoration-color .12s ease;
}
.creator-gate-hint-link:hover {
  color: #1ce191;
  text-decoration-thickness: 1.5px;
}
.creator-gate-passed .creator-gate-hint { color: rgba(52, 255, 175, 0.85); }

/* Status badges — tiny mono pills on the right of each label */
.creator-gate-status {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  white-space: nowrap;
}
.creator-gate-status-passed {
  background: rgba(0, 196, 114, 0.16);
  color: #34ffaf;
  border: 1px solid rgba(0, 196, 114, 0.36);
}
.creator-gate-status-active {
  background: rgba(52, 255, 175, 0.10);
  color: #34ffaf;
  border: 1px solid rgba(52, 255, 175, 0.30);
  animation: creatorGateActiveBadge 2s ease-in-out infinite;
}
@keyframes creatorGateActiveBadge {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
.creator-gate-status-locked {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Progress bar — taller, with inline percentage label */
.creator-gate-bar {
  position: relative;
  margin-top: 10px;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
.creator-gate-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #34ffaf 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 196, 114, 0.35);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.creator-gate-bar-pct {
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(52, 255, 175, 0.85);
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
}

/* "What unlocks" callout at the bottom of the section */
.creator-elig-unlock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(0, 196, 114, 0.06) 0%, rgba(0, 196, 114, 0.02) 100%);
  border: 1px solid rgba(0, 196, 114, 0.18);
  border-radius: 10px;
}
.creator-elig-unlock-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 196, 114, 0.14);
  border: 1px solid rgba(0, 196, 114, 0.30);
  color: #34ffaf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.creator-elig-unlock-body { flex: 1; }
.creator-elig-unlock-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 2px;
}
.creator-elig-unlock-desc {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.creator-elig-unlock-done {
  background: linear-gradient(90deg, rgba(0, 196, 114, 0.10) 0%, rgba(0, 196, 114, 0.04) 100%);
  border-color: rgba(0, 196, 114, 0.32);
}
.creator-elig-unlock-done .creator-elig-unlock-icon {
  background: linear-gradient(180deg, var(--accent) 0%, #00b067 100%);
  color: #001a0f;
  box-shadow: 0 0 14px rgba(0, 196, 114, 0.35);
}

/* Formula table ───────────────────────────────────────────────── */
/* P65.293 — plain-English explainer block above the table.  Reads
   first, so a glance answers "what is this?" before the eye hits the
   accounting numbers below. */
.creator-formula-explainer {
  margin-bottom: 12px;
  padding: 14px 16px;
  background: rgba(0, 196, 114, 0.05);
  border: 1px solid rgba(0, 196, 114, 0.18);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.creator-formula-explainer strong { color: var(--text-1); font-weight: 700; }
/* Inline mute hint next to the "Weekly pool" key. */
.creator-formula-key-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  margin-left: 4px;
}
.creator-formula {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 4px 0;
}
.creator-formula-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 9px 16px;
  font-size: 12.5px;
}
.creator-formula-key {
  color: var(--text-2);
  font-weight: 500;
}
.creator-formula-mid {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .03em;
}
.creator-formula-val {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-1);
  font-weight: 700;
  text-align: right;
}
.creator-formula-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.creator-formula-total .creator-formula-key,
.creator-formula-total .creator-formula-val {
  color: var(--text-0);
  font-weight: 700;
}
.creator-formula-result .creator-formula-key {
  color: var(--text-0);
  font-weight: 800;
  font-size: 13.5px;
}
.creator-formula-result-amount {
  color: var(--accent) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* History ─────────────────────────────────────────────────────── */
.creator-history {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.creator-history-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.creator-history-row:last-child { border-bottom: none; }
.creator-history-row .num {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--text-1);
  text-align: right;
}
.creator-history-head {
  background: rgba(255,255,255,.02);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.creator-history-head .num,
.creator-history-head span:nth-child(2),
.creator-history-head span:nth-child(3),
.creator-history-head span:nth-child(4) {
  text-align: right;
}
.creator-history-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.creator-history-pill-projected { background: rgba(245,158,11,.10); color: #f59e0b; border: 1px solid rgba(245,158,11,.22); }
.creator-history-pill-finalized { background: rgba(0,196,114,.08); color: var(--accent); border: 1px solid rgba(0,196,114,.22); }
.creator-history-pill-paid      { background: rgba(0,196,114,.14); color: var(--accent); border: 1px solid rgba(0,196,114,.32); }
.creator-history-pill-reversed  { background: rgba(196,64,64,.10); color: var(--red); border: 1px solid rgba(196,64,64,.22); }

.creator-history-empty {
  padding: 36px 20px;
  text-align: center;
}
.creator-history-empty-icon {
  font-size: 32px;
  opacity: .35;
  margin-bottom: 8px;
}
.creator-history-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.creator-history-empty-desc {
  font-size: 11.5px;
  color: var(--text-4);
  margin-top: 4px;
  line-height: 1.5;
}

/* Roadmap to payouts ─────────────────────────────────────────── */
.creator-roadmap {
  display: grid;
  gap: 14px;
}
.creator-roadmap-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .12s ease;
}
.creator-roadmap-step-done   { border-color: rgba(0,196,114,.20); }
.creator-roadmap-step-active { border-color: rgba(0,196,114,.20); }
.creator-roadmap-marker {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
}
.creator-roadmap-step-done .creator-roadmap-marker,
.creator-roadmap-step-active .creator-roadmap-marker {
  background: var(--accent);
  color: #000;
}
.creator-roadmap-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.creator-roadmap-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.55;
}

/* Mobile: collapse multi-column rows */
@media (max-width: 640px) {
  .creator-hero { padding: 22px 18px 18px; }
  .creator-hero-value { font-size: 44px; }
  .creator-section { padding: 18px 16px; }
  .creator-formula-row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .creator-formula-mid { display: none; }
  .creator-history-row {
    grid-template-columns: 1.2fr 1fr;
    row-gap: 4px;
  }
  .creator-history-row > span:nth-child(3),
  .creator-history-row > span:nth-child(4) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
  }
  .creator-history-head { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   P38 — CREATOR HUB: ineligible state + NMX badge CTAs
   ─────────────────────────────────────────────────────────────
   When the user hasn't passed all 5 gates, the dashboard shows
   ONLY the eligibility checklist. The hero / formula / history /
   roadmap stay hidden until they're actually earnable.
   ═══════════════════════════════════════════════════════════════ */

/* Slim header for the ineligible state — replaces the .creator-hero
   for users who haven't passed all gates. Just the page title;
   no projected $, no period clock, no dry-run disclosure. */
.creator-pre-header {
  margin-bottom: 18px;
  padding: 4px 0 6px;
}
/* P63a: legacy `.creator-pre-title` kept for back-compat in case any
   downstream/cached page still renders it. New layout uses
   `.creator-pre-sub` for an institutional descriptor under the
   global topbar title. */
.creator-pre-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.015em;
}
.creator-pre-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 640px;
}

/* CTA row inside an unmet gate — connect-wallet button + manual
   verification link. Stacks on mobile. */
.creator-gate-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}
.creator-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  font-family: inherit;
}
.creator-gate-btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.creator-gate-btn-primary:hover {
  background: rgba(0, 196, 114, .9);
}
.creator-gate-btn-secondary {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.creator-gate-btn-secondary:hover {
  border-color: rgba(0, 196, 114, .35);
  color: var(--text-0);
}
.creator-gate-btn-link {
  color: var(--text-3);
  padding: 7px 4px;
  border: none;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .12);
  text-underline-offset: 3px;
}
.creator-gate-btn-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Pending pill for "request under review" state */
.creator-gate-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 11px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .22);
  border-radius: 999px;
  color: #f59e0b;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Rejected note — appears above the CTA row when last request was
   declined. Soft red background, not alarming, just informative. */
.creator-gate-rejected-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(196, 64, 64, .05);
  border: 1px solid rgba(196, 64, 64, .18);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.5;
}
.creator-gate-rejected-note strong {
  color: var(--red);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   P39 — ATTENTION MAP
   ─────────────────────────────────────────────────────────────
   Three-panel institutional view. Aesthetic notes:
     - Mono everywhere for numerics (Bloomberg pattern)
     - Tile gradients for tickers — color = sentiment, size = vol
     - Velocity sparklines: solid fills, current-hour bar accent
     - Constellation: SVG, deterministic radial layout, no jitter
   ═══════════════════════════════════════════════════════════════ */

.att-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.att-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.att-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}
.att-subtitle strong {
  color: var(--text-1);
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
}

.att-window-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.att-window-tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.att-window-tab:hover { color: var(--text-1); }
.att-window-tab.active {
  background: var(--accent);
  color: #000;
}
.att-refresh-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text-3);
  cursor: pointer;
  margin-left: 4px;
  transition: background .12s ease, color .12s ease, transform .15s ease;
}
.att-refresh-btn:hover {
  color: var(--accent);
  background: rgba(0,196,114,.06);
}
.att-refresh-btn:active { transform: rotate(180deg); }

/* Loading state ───────────────────────────────────────────────── */
.att-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 20px;
}
.att-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0,196,114,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.att-loading-text {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Summary strip ──────────────────────────────────────────────── */
.att-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.att-summary-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 16px;
}
.att-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.att-summary-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  margin-top: 4px;
  line-height: 1.1;
}
.att-sentiment-bar {
  display: inline-flex;
  align-items: stretch;
  width: 60px;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  margin-left: 4px;
}
.att-sentiment-fill-up   { background: var(--accent); }
.att-sentiment-fill-down { background: var(--red); }
@media (max-width: 1024px) {
  .att-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .att-summary { grid-template-columns: repeat(2, 1fr); }
  .att-summary-value { font-size: 18px; }
}

/* Generic section card ───────────────────────────────────────── */
.att-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px 18px;
  margin-bottom: 14px;
}
.att-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.att-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.att-section-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 520px;
}
.att-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.att-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: .04em;
}
.att-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Heatmap ────────────────────────────────────────────────────── */
.att-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.att-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  cursor: pointer;
  padding: 10px 12px;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease;
  text-align: left;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
}
.att-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.18);
}
.att-tile-sm  { width: 96px;  height: 64px; }
.att-tile-md  { width: 124px; height: 76px; }
.att-tile-lg  { width: 160px; height: 92px; }
.att-tile-xl  { width: 200px; height: 110px; }
.att-tile-xxl { width: 244px; height: 128px; }
.att-tile-ticker {
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.1;
}
.att-tile-xl  .att-tile-ticker  { font-size: 16px; }
.att-tile-xxl .att-tile-ticker  { font-size: 19px; letter-spacing: -.01em; }
.att-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  opacity: .85;
  margin-top: auto;
  gap: 8px;
}
.att-tile-mentions {
  background: rgba(0,0,0,.28);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.att-tile-sent {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: .04em;
}

/* Velocity strip ─────────────────────────────────────────────── */
.att-velocity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.att-velocity-row {
  display: grid;
  grid-template-columns: 88px 1fr 48px;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  text-align: left;
}
.att-velocity-row:hover {
  background: rgba(255,255,255,.02);
  border-color: rgba(0,196,114,.18);
}
.att-velocity-name {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.att-velocity-spark {
  display: flex;
  align-items: flex-end;
  height: 36px;
  gap: 1.5px;
}
.att-velocity-bar {
  flex: 1;
  background: rgba(0,196,114,.4);
  border-radius: 1px;
  min-height: 2px;
  transition: height .35s cubic-bezier(.2,.7,.2,1);
}
.att-velocity-bar-current {
  background: var(--accent);
}
.att-velocity-total {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  text-align: right;
  letter-spacing: -.005em;
}

/* Surge state — pulsing accent border */
.att-velocity-surging {
  border-color: rgba(0,196,114,.45);
  background: rgba(0,196,114,.04);
  position: relative;
  animation: surgePulse 2.4s ease-in-out infinite;
}
@keyframes surgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,196,114,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(0,196,114,.18); }
}
.att-velocity-surging .att-velocity-bar-current {
  background: #00FF8C;
}
.att-surge-badge {
  background: var(--accent);
  color: #000;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 1.5px 6px;
  border-radius: 3px;
}

/* Constellation ─────────────────────────────────────────────── */
.att-constellation {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px;
  overflow: hidden;
}
.att-constellation-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
}
.att-node {
  cursor: pointer;
  transition: opacity .12s ease;
}
.att-node:hover {
  opacity: .85;
}
.att-node:hover circle:nth-child(1) {
  /* The outer glow ring: brighten on hover */
  opacity: .35;
}

/* Mobile heatmap: tiles already wrap, but trim the largest sizes
   so a few mega-tickers don't break the grid */
@media (max-width: 640px) {
  .att-tile-xxl { width: 200px; height: 110px; }
  .att-tile-xl  { width: 168px; height: 96px; }
  .att-velocity-row { grid-template-columns: 72px 1fr 40px; gap: 10px; padding: 7px 10px; }
  .att-velocity-spark { height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   P40 — ATTENTION MAP GATE (7-day countdown card)
   ─────────────────────────────────────────────────────────────
   Aesthetic: institutional, slightly cinematic. Dark card with a
   subtle radial gradient + scan-line ambient texture so it looks
   like a Bloomberg terminal coming online. Mono numerics.
   ═══════════════════════════════════════════════════════════════ */

.att-gate-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0 32px;
}
.att-gate-card {
  width: 100%;
  max-width: 720px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,196,114,.06), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid rgba(0, 196, 114, .14);
  border-radius: 16px;
  padding: 32px 32px 28px;
  position: relative;
  overflow: hidden;
}
/* Subtle scan-line texture for the "data console" feel */
.att-gate-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,.012) 2px,
      rgba(255,255,255,.012) 3px
    );
  pointer-events: none;
  border-radius: 16px;
}
/* Top accent border — the "live" signal */
.att-gate-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 16px 16px 0 0;
  opacity: .85;
}

.att-gate-status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.att-gate-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 196, 114, .08);
  border: 1px solid rgba(0, 196, 114, .25);
  color: var(--accent);
}
.att-gate-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 196, 114, .06);
  border: 1px solid rgba(0, 196, 114, .22);
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .14em;
}
.att-gate-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: gateDotPulse 2s ease-in-out infinite;
}
@keyframes gateDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 114, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 196, 114, 0); }
}

.att-gate-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: -.005em;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}

/* Countdown — the centerpiece */
.att-gate-countdown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 18px 0 22px;
  position: relative;
  z-index: 1;
}
.att-gate-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
}
.att-gate-cd-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-0);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  /* Subtle accent glow that fades on the seconds digit only */
  text-shadow: 0 0 24px rgba(0, 196, 114, .06);
}
.att-gate-cd-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .18em;
  margin-top: 6px;
}
.att-gate-cd-sep {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 48px;
  font-weight: 300;
  color: var(--text-4);
  line-height: 1;
  padding-bottom: 22px;
  opacity: .35;
}

/* Progress bar */
.att-gate-progress {
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.att-gate-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.att-gate-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(0,196,114,.7), var(--accent));
  border-radius: 999px;
  transition: width 1s linear;
  /* Faint "scanning" shimmer that drifts across the fill */
  background-size: 200% 100%;
  animation: gateProgressShimmer 4s linear infinite;
}
@keyframes gateProgressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.att-gate-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--text-4);
  letter-spacing: .04em;
}

/* Explainer block — the "why we wait" copy */
.att-gate-explainer {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.att-gate-explainer-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-4);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.att-gate-explainer p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 10px;
}
.att-gate-explainer p:last-child { margin-bottom: 0; }

/* Pulse tiles — live platform metrics */
.att-gate-pulse {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 18px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.att-gate-pulse-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.att-gate-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.att-gate-pulse-tile {
  text-align: center;
  padding: 4px 0;
}
.att-gate-pulse-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.att-gate-pulse-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
}

.att-gate-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .04em;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Mobile: collapse countdown gracefully */
@media (max-width: 640px) {
  .att-gate-card { padding: 24px 18px 22px; }
  .att-gate-cd-value { font-size: 38px; }
  .att-gate-cd-unit { min-width: 56px; }
  .att-gate-cd-sep { font-size: 30px; padding-bottom: 18px; }
  .att-gate-cd-label { font-size: 9px; letter-spacing: .12em; }
  .att-gate-pulse-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .att-gate-pulse-value { font-size: 20px; }
  .att-gate-pulse-label { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   P40 — UPDATED HEATMAP / SUMMARY (institutional metrics)
   ─────────────────────────────────────────────────────────────
   Adds: HHI concentration tile, sentiment dispersion glyph on
   tiles, surge direction badges (rising/fading/flat).
   ═══════════════════════════════════════════════════════════════ */

/* Concentration tile (in summary strip) */
.att-summary-concentration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.att-conc-CONCENTRATED { color: #f59e0b; }
.att-conc-BALANCED     { color: var(--accent); }
.att-conc-FRAGMENTED   { color: var(--text-3); }

/* Direction badges on velocity rows */
.att-velocity-direction {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 1.5px 6px;
  border-radius: 3px;
  margin-left: 5px;
}
.att-direction-rising { background: rgba(0, 196, 114, .12); color: var(--accent); border: 1px solid rgba(0, 196, 114, .25); }
.att-direction-fading { background: rgba(196, 64, 64, .10); color: var(--red);    border: 1px solid rgba(196, 64, 64, .22); }
.att-direction-flat   { background: rgba(255, 255, 255, .03); color: var(--text-4); border: 1px solid rgba(255, 255, 255, .06); }

/* Tile: dispersion indicator (small bar on bottom) */
.att-tile-dispersion {
  position: absolute;
  bottom: 4px;
  left: 6px; right: 6px;
  height: 2px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow: hidden;
}
.att-tile-dispersion-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(245, 158, 11, .85), rgba(245, 158, 11, .35));
  border-radius: 999px;
}
.att-tile { position: relative; }   /* allow absolute positioning of dispersion bar */

/* P40 — Rising creator highlight on the constellation.
   Animates the halo opacity + a subtle stroke pulse so the eye
   catches creators who are surging RIGHT NOW vs steady-state stars. */
.att-node-rising .att-node-halo {
  animation: attRisingHalo 2.4s ease-in-out infinite;
}
@keyframes attRisingHalo {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.42; }
}

/* ═══════════════════════════════════════════════════════════════
   P41 — MMC HEATMAP (memecoin treemap with sentiment overlay)
   ─────────────────────────────────────────────────────────────
   Visual vocabulary mirrors the Attention Map but data axis is
   completely different. Tiles colored by % change (red/green
   gradient), sized by log(market cap). Sparklines on bigger tiles.
   Divergence panel surfaces market-vs-NOX disagreements.
   ═══════════════════════════════════════════════════════════════ */

.mmc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.mmc-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.mmc-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
}
.mmc-subtitle strong {
  color: var(--text-1);
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
}

.mmc-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mmc-sort-tabs,
.mmc-window-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.mmc-sort-tab,
.mmc-window-tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.mmc-sort-tab:hover,
.mmc-window-tab:hover { color: var(--text-1); }
.mmc-sort-tab.active,
.mmc-window-tab.active {
  background: var(--accent);
  color: #000;
}
.mmc-refresh-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .15s ease;
}
.mmc-refresh-btn:hover {
  color: var(--accent);
  background: rgba(0,196,114,.06);
}
.mmc-refresh-btn:active { transform: rotate(180deg); }

/* Loading + error states ───────────────────────────────────────── */
.mmc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 20px;
}
.mmc-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0,196,114,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.mmc-loading-text {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mmc-error {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mmc-error-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .24);
  color: #f59e0b;
  margin-bottom: 14px;
}
.mmc-error-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
}
.mmc-error-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Summary strip — top gainer / loser / volume / turnover ──────── */
.mmc-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.mmc-summary-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s ease, transform .15s ease;
}
.mmc-summary-clickable:hover {
  border-color: rgba(0,196,114,.32);
  transform: translateY(-1px);
}
.mmc-summary-empty { cursor: default; }
.mmc-summary-empty:hover { border-color: var(--border); transform: none; }
.mmc-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mmc-summary-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.mmc-summary-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-1);
}
.mmc-summary-symbol {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
}
.mmc-summary-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-4);
}
.mmc-summary-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: .02em;
}
.mmc-summary-up   { color: var(--accent); }
.mmc-summary-down { color: var(--red); }

@media (max-width: 900px) {
  .mmc-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Section card ────────────────────────────────────────────────── */
.mmc-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px 18px;
  margin-bottom: 14px;
}
.mmc-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mmc-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.mmc-section-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 580px;
}
.mmc-section-desc strong {
  color: var(--text-1);
  font-weight: 700;
}
.mmc-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.mmc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: .04em;
}
.mmc-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Heatmap grid ─────────────────────────────────────────────────── */
.mmc-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.mmc-tile {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
  font-family: inherit;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .15s ease, border-color .12s ease;
  overflow: hidden;
}
.mmc-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}
.mmc-tile-sm  { width: 84px;  height: 64px; }
.mmc-tile-md  { width: 116px; height: 76px; }
.mmc-tile-lg  { width: 148px; height: 88px; }
.mmc-tile-xl  { width: 196px; height: 110px; }
.mmc-tile-xxl { width: 256px; height: 134px; }

.mmc-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmc-tile-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.mmc-tile-symbol {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
.mmc-tile-xl  .mmc-tile-symbol  { font-size: 15px; }
.mmc-tile-xxl .mmc-tile-symbol  { font-size: 17px; }
.mmc-tile-xl  .mmc-tile-icon    { width: 22px; height: 22px; }
.mmc-tile-xxl .mmc-tile-icon    { width: 26px; height: 26px; }

.mmc-tile-price {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  letter-spacing: -.01em;
}
.mmc-tile-xl  .mmc-tile-price { font-size: 13px; }
.mmc-tile-xxl .mmc-tile-price { font-size: 14px; }

.mmc-tile-change {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.mmc-tile-xl  .mmc-tile-change { font-size: 14px; }
.mmc-tile-xxl .mmc-tile-change { font-size: 16px; }

.mmc-tile-spark {
  width: 100%;
  height: 18px;
  margin-top: 2px;
  display: block;
  pointer-events: none;
}

/* Small tiles hide the price line to keep the layout breathing */
.mmc-tile-sm .mmc-tile-price { display: none; }

/* Divergence indicator dot — top right corner */
.mmc-tile-divergence {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.mmc-tile-divergence.market_down_nox_bull { background: #1AC2E6; }

/* Divergence panel rows ────────────────────────────────────────── */
.mmc-divergence {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mmc-div-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.mmc-div-row:hover {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .03);
}
.mmc-div-token {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mmc-div-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  flex-shrink: 0;
}
.mmc-div-symbol {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
}
.mmc-div-name {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmc-div-metric-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mmc-div-metric-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
  letter-spacing: -.005em;
}
.mmc-div-up   { color: var(--accent); }
.mmc-div-down { color: var(--red); }
.mmc-div-verdict {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  padding: 4px 10px;
  border-radius: 5px;
}
.mmc-div-bear {
  color: #f59e0b;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .24);
}
.mmc-div-bull {
  color: #1AC2E6;
  background: rgba(26, 194, 230, .07);
  border: 1px solid rgba(26, 194, 230, .24);
}

/* Footer (data lineage) ────────────────────────────────────────── */
.mmc-footer {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-4);
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
  padding: 12px 0 8px;
}

/* Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mmc-tile-xxl { width: 200px; height: 110px; }
  .mmc-tile-xl  { width: 168px; height: 96px; }
  .mmc-tile-lg  { width: 130px; height: 80px; }
  .mmc-div-row {
    grid-template-columns: 1.4fr 1fr 1fr;
    row-gap: 6px;
  }
  .mmc-div-verdict {
    grid-column: 1 / -1;
    text-align: center;
  }
  .mmc-controls { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   P42 — MMC SECTOR HEATMAP
   ─────────────────────────────────────────────────────────────
   Bloomberg-style sector heatmap for memecoin narratives. Top
   section is a flexbox treemap (one big rectangle per sector,
   sized by sqrt(mcap), colored by weighted return). Below: per-
   sector detail cards with constituent breakdown.
   ═══════════════════════════════════════════════════════════════ */

/* Hero treemap — the centerpiece ─────────────────────────────── */
.mmc-section-hero { padding-bottom: 22px; }
.mmc-treemap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 280px;
  align-items: stretch;
}
.mmc-treemap-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #fff;
  min-width: 140px;
  min-height: 130px;
  transition: transform .18s cubic-bezier(.2,.7,.2,1),
              box-shadow .18s ease,
              border-color .12s ease;
  overflow: hidden;
}
.mmc-treemap-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  border-color: rgba(255, 255, 255, .22);
  z-index: 2;
}
.mmc-treemap-tile::before {
  /* Subtle vertical gradient to give the tile depth */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
  border-radius: 10px;
}

.mmc-treemap-head {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.mmc-treemap-emoji {
  font-size: 22px;
  line-height: 1;
  filter: grayscale(.15);
}
.mmc-treemap-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.005em;
  flex: 1;
}
.mmc-treemap-heat {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .25);
  padding: 3px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mmc-treemap-heat-unit {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.mmc-treemap-return {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.mmc-treemap-tile .mmc-up   { color: rgba(255, 255, 255, .98); }
.mmc-treemap-tile .mmc-down { color: rgba(255, 255, 255, .98); }

.mmc-treemap-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .68);
  position: relative;
  z-index: 1;
}
.mmc-treemap-tokens { font-weight: 700; }
.mmc-treemap-mcap   { font-weight: 800; }

.mmc-treemap-preview {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sector detail cards ─────────────────────────────────────────── */
.mmc-sectors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mmc-sector-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 20px;
  position: relative;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.mmc-sector-card::before {
  /* Left accent edge in the sector's own brand color */
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: var(--sector-color, var(--accent));
  border-radius: 0 3px 3px 0;
  opacity: .85;
}
.mmc-sector-card-flash {
  border-color: var(--sector-color, var(--accent));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0),
              0 0 0 4px color-mix(in oklab, var(--sector-color, #00C472) 22%, transparent);
  transform: translateY(-2px);
}

.mmc-sector-card-head {
  margin-bottom: 16px;
}
.mmc-sector-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mmc-sector-emoji {
  font-size: 22px;
  line-height: 1;
}
.mmc-sector-label {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.015em;
}
.mmc-sector-token-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(255,255,255,.04);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .03em;
}
.mmc-sector-pill {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  margin-left: auto;
}
.mmc-aligned-bull {
  color: var(--accent);
  background: rgba(0,196,114,.10);
  border: 1px solid rgba(0,196,114,.28);
}
.mmc-aligned-bear {
  color: var(--red);
  background: rgba(196,64,64,.10);
  border: 1px solid rgba(196,64,64,.28);
}

.mmc-sector-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 20px;
}
.mmc-sector-stat,
.mmc-sector-nox {
  min-width: 0;
}
.mmc-sector-stat-label,
.mmc-sector-nox-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-4);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mmc-sector-stat-value,
.mmc-sector-nox-value {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  margin-top: 4px;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.mmc-sector-nox-value { font-size: 15px; }
.mmc-sector-nox-mentions {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .04em;
}

/* Constituent tiles inside a sector card ─────────────────────── */
.mmc-sector-constituents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.mmc-constituent {
  flex: 1 1 calc(12.5% - 6px);
  min-width: 100px;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  text-align: left;
  height: 64px;
  transition: transform .15s ease, border-color .12s ease;
}
.mmc-constituent:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .22);
}
.mmc-constituent-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmc-constituent-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.mmc-constituent-symbol {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.mmc-constituent-change {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.005em;
}
.mmc-sector-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .04em;
}

/* up/down semantic colors used across the page */
.mmc-up   { color: var(--accent); }
.mmc-down { color: var(--red); }

/* Sector divergence row — overrides existing token-level styling */
.mmc-div-sector-emoji {
  font-size: 26px;
  line-height: 1;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

/* Mobile ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .mmc-treemap { gap: 4px; }
  .mmc-treemap-tile {
    min-width: 100%;       /* one sector per row on mobile — readable */
    min-height: 96px;
  }
  .mmc-treemap-return { font-size: 22px; }
  .mmc-sector-card { padding: 16px 14px 18px; }
  .mmc-sector-card-stats { gap: 12px; }
  .mmc-constituent {
    flex: 1 1 calc(33% - 6px);
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .mmc-constituent { flex-basis: calc(50% - 6px); }
}

/* ═══════════════════════════════════════════════════════════════
   P43 — MMC SQUARIFIED TREEMAP (institutional, Bloomberg-style)
   ─────────────────────────────────────────────────────────────
   Single SVG canvas, two-level hierarchy: outer rectangles per
   sector, subdivided into per-token tiles. Tessellated, no gaps.
   ═══════════════════════════════════════════════════════════════ */

.mmc-section-treemap {
  padding: 16px;
  background: #0a0c0e;            /* darker than other sections — frames the heatmap */
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.mmc-section-treemap .mmc-section-head {
  padding: 4px 8px 14px;
}

.mmc-treemap-canvas {
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  /* Aspect ratio matches the 1200x720 viewBox (5:3). On wider screens
     the SVG fills width; on narrow ones it scales down proportionally. */
  aspect-ratio: 1200 / 720;
  max-height: 78vh;
  position: relative;
}
.mmc-treemap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Token tile — most of the visual real-estate. Subtle hover lift via
   filter (cheaper than transform on SVG, doesn't break the layout). */
.mmc-tm-tile { cursor: pointer; transition: filter .15s ease; }
.mmc-tm-tile:hover {
  filter: brightness(1.18) saturate(1.1);
}
.mmc-tm-tile:hover rect:first-of-type {
  stroke: rgba(255, 255, 255, .7);
  stroke-width: 1.5;
}
.mmc-tm-tile-agg { cursor: default; }
.mmc-tm-tile-agg:hover { filter: none; }

/* Sector label band — clickable, bumps brightness on hover */
.mmc-tm-band { cursor: pointer; transition: filter .12s ease; }
.mmc-tm-band:hover { filter: brightness(1.5); }

/* Mobile: the squarified layout is computed for a 1200x720 canvas.
   Letting the viewBox letterbox would waste vertical space. Instead
   we scale the SVG to fill the container width and let the height
   come from the natural aspect ratio. On narrow viewports this
   produces a shorter (but still wide) treemap that's fully legible. */
@media (max-width: 720px) {
  .mmc-section-treemap { padding: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   P44 — MMC HEATMAP REFINEMENTS (post-feedback iteration)
   ─────────────────────────────────────────────────────────────
   Goals: bigger canvas, no emojis, brighter color saturation,
   tighter typography hierarchy, less chrome.
   ═══════════════════════════════════════════════════════════════ */

/* Widen the main column on this page only. The default 620px cap
   is correct for feed posts but suffocates the treemap. We push to
   1100px which uses the available space between sidebars without
   overlapping them. */
body.page-mmcheatmap .main-feed {
  max-width: 1100px;
}

/* On wider viewports where the right sidebar is also visible, push
   even further. The right sidebar starts hiding at ≤1100px breakpoint
   in layout.css, so above that we have plenty of room. */
@media (min-width: 1280px) {
  body.page-mmcheatmap .main-feed {
    max-width: 1200px;
  }
}

/* Treemap section itself: less padding so the canvas fills more of
   the column, slightly different background to feel more like a
   data terminal panel than a content card. */
body.page-mmcheatmap .mmc-section-treemap {
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, #07090b, #0a0c0e);
  border-color: rgba(255, 255, 255, .08);
}

/* The canvas itself — pure black, slightly tighter aspect to give
   labels more breathing room. The squarified algorithm produces
   better aspect ratios when the canvas is closer to landscape than
   square — 1200×680 (about 1.76:1) is the sweet spot for visualizing
   memecoin sectors at our typical data shape. */
body.page-mmcheatmap .mmc-treemap-canvas {
  aspect-ratio: 1200 / 680;
  max-height: 82vh;
  background: #06080a;
}

/* Sector divergence row — replace the old emoji square with a
   colored swatch. Cleaner, matches the heatmap's brand-color cues. */
.mmc-div-sector-dot {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   P45 — VIRAL RIGHT NOW WIDGET
   ─────────────────────────────────────────────────────────────
   Institutional leaderboard: mono ranks, rank-delta indicators,
   live pulse dot in title, subtle scanning shimmer along top edge,
   row-flash on engagement updates. Bloomberg "Most Active" pattern.
   ═══════════════════════════════════════════════════════════════ */

.viral-card {
  position: relative;
  overflow: hidden;
}
/* Top-edge accent — very dim by default, pulses subtly. Reads as
   "this widget is alive and updating" without being attention-stealing. */
.viral-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 196, 114, .35), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  animation: viralScan 6s ease-in-out infinite;
  pointer-events: none;
  opacity: .55;
}
@keyframes viralScan {
  0%   { background-position: -60% 0; }
  50%  { background-position: 160% 0; }
  100% { background-position: 160% 0; }   /* hold off-screen between sweeps */
}

/* Title with the live pulse dot */
.viral-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.viral-pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
  /* The actual "live" pulse — outward expanding ring fades out. */
  box-shadow: 0 0 0 0 rgba(0, 196, 114, .6);
  animation: viralDotPulse 2.4s ease-out infinite;
}
@keyframes viralDotPulse {
  0%   { box-shadow: 0 0 0 0    rgba(0, 196, 114, .55); }
  70%  { box-shadow: 0 0 0 7px  rgba(0, 196, 114, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(0, 196, 114, 0);    }
}

/* Row container */
.viral-list {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.viral-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background .14s ease, padding .14s ease, border-radius .14s ease;
}
.viral-row:last-child {
  border-bottom: none;
}
.viral-row:hover {
  background: rgba(255, 255, 255, .025);
  margin: 0 -10px;
  padding: 9px 10px;
  border-radius: 6px;
  border-bottom-color: transparent;
}
/* Subtle accent strip on hover — left edge, accent color */
.viral-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.viral-row:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Rank — mono, bold, dim. Like a Bloomberg ticker rank column. */
.viral-rank {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-4);
  text-align: right;
  letter-spacing: .04em;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.viral-row:hover .viral-rank {
  color: var(--accent);
}

/* Body — title (1-2 lines) + meta row */
.viral-body {
  min-width: 0;
}
.viral-headline {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* Truncate at 2 lines using line-clamp; falls back gracefully. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.viral-row:hover .viral-headline {
  color: var(--text-0);
}
.viral-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10.5px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text-3);
  letter-spacing: .02em;
}
.viral-meta-eng {
  color: var(--text-2);
  font-weight: 700;
}
.viral-meta-sep {
  color: var(--text-5, rgba(255,255,255,.18));
}
.viral-meta-dim {
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Rank deltas — small mono badges next to the title */
.viral-delta {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  /* Brief flash-in when a delta first appears, so the eye catches
     the rank-change moment. After that the delta sits visible until
     the next render computes a new delta state. */
  animation: viralDeltaFlash .9s ease-out;
}
@keyframes viralDeltaFlash {
  0%   { transform: translateY(-2px); opacity: 0; }
  60%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
.viral-delta-up {
  color: rgb(20, 230, 140);
  background: rgba(0, 196, 114, .12);
  border: 1px solid rgba(0, 196, 114, .25);
}
.viral-delta-down {
  color: rgb(245, 95, 95);
  background: rgba(196, 64, 64, .10);
  border: 1px solid rgba(196, 64, 64, .25);
}
.viral-delta-new {
  color: var(--accent);
  background: rgba(0, 196, 114, .14);
  border: 1px solid rgba(0, 196, 114, .35);
  letter-spacing: .12em;
}

/* ─── P65.78: viral-now richer row layout ─────────────────────── */

/* Engagement chip strip — small icon+count pills under the headline.
   Each chip has a subtle border and tints emerald on hover so the
   row feels alive without being noisy. */
.viral-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 4px;
}
.viral-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  line-height: 1.1;
  transition: color .12s, border-color .12s, background .12s;
}
.viral-chip svg {
  flex-shrink: 0;
  opacity: .85;
}
.viral-row:hover .viral-chip {
  color: var(--text-1);
  border-color: rgba(0, 196, 114, .18);
}
/* Velocity chip — emerald tint, this is the actual viral-signal */
.viral-chip.viral-chip-velocity {
  color: var(--accent);
  background: rgba(0, 196, 114, .08);
  border-color: rgba(0, 196, 114, .25);
}
.viral-row:hover .viral-chip.viral-chip-velocity {
  background: rgba(0, 196, 114, .14);
  border-color: rgba(0, 196, 114, .45);
}

/* Spread bar — visual rank weight. The #1 row fills 100%, #4 might
   be at 20%. Matches the data hierarchy without making the user do
   the math. */
.viral-bar {
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 4px;
}
.viral-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(0, 196, 114, .55),
    rgba(90, 242, 168, .85));
  border-radius: 2px;
  /* Animate the bar growing in on first render so the user sees the
     ranks settle. transition kicks in on subsequent renders too. */
  animation: viralBarFillIn .65s cubic-bezier(.22, 1, .36, 1) both;
  transition: width .4s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 0 6px rgba(0, 196, 114, .25);
}
@keyframes viralBarFillIn {
  from { width: 0 !important; }
}
.viral-row:hover .viral-bar-fill {
  background: linear-gradient(90deg,
    rgba(0, 196, 114, .75),
    rgba(90, 242, 168, 1));
  box-shadow: 0 0 10px rgba(0, 196, 114, .45);
}

/* Empty state — uses a small static dot rather than a verbose message */
.viral-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.viral-empty-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-4);
  opacity: .5;
  animation: viralEmptyPip 1.6s ease-in-out infinite;
}
@keyframes viralEmptyPip {
  0%, 100% { opacity: .25; }
  50%      { opacity: .8;  }
}

/* ═══════════════════════════════════════════════════════════════
   P47 — MMC HEATMAP HOVER PANEL
   ─────────────────────────────────────────────────────────────
   Cursor-following data card. Always shows sector context;
   adds token detail when hovering a specific token.
   ═══════════════════════════════════════════════════════════════ */

/* Slim section head used after the descriptive text was removed —
   only the legend lives here now */
.mmc-section-head-slim {
  margin-bottom: 12px !important;
  padding: 4px 8px;
  display: flex;
  justify-content: flex-end;
}

/* Footer was over-explaining; the new style is two-element row */
.mmc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-4);
  padding: 14px 0 4px;
}
.mmc-footer-source {
  color: var(--text-3);
  font-weight: 700;
}
.mmc-footer-fresh {
  color: var(--text-4);
}
.mmc-footer-sep {
  opacity: .45;
}

/* The panel itself — fixed positioning, sits above everything.
   Fixed (not absolute) so it can escape the canvas's overflow:hidden
   and reach to the edges of the viewport. */
.mmc-hover-panel {
  position: fixed;
  /* Above modals (which sit at z-index 2000-ish in this app) would be
     wrong, but above any in-flow page chrome including sidebar cards.
     The previous z-index of 1200 wasn't enough — sidebar widgets render
     in normal flow but their stacking-context can land above other
     positioned elements depending on browser layout. 1500 is firmly
     above sidebar cards (which max out around z-index 10) and below
     modals (which are 2000+). */
  z-index: 1500;
  width: 280px;
  max-width: calc(100vw - 28px);
  /* Fully opaque background — the previous .98 alpha plus backdrop
     blur created a "ghosting" effect where sidebar text bled through.
     Solid colour reads as a discrete object floating over the chart. */
  background: #0a0d10;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  box-shadow: 0 14px 48px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .55);
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.mmc-hover-panel-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Header block — sector identity + key stats */
.mmc-hp-header {
  padding: 10px 12px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.mmc-hp-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mmc-hp-sector-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.mmc-hp-sector-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: .14em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmc-hp-sector-status {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 2.5px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mmc-hp-status-hot     { background: rgba(0, 196, 114, .14); color: rgb(20, 230, 140); border: 1px solid rgba(0, 196, 114, .3); }
.mmc-hp-status-warm    { background: rgba(0, 196, 114, .07); color: rgb(80, 200, 130); border: 1px solid rgba(0, 196, 114, .18); }
.mmc-hp-status-neutral { background: rgba(255, 255, 255, .04); color: var(--text-3); border: 1px solid rgba(255, 255, 255, .08); }
.mmc-hp-status-cool    { background: rgba(196, 64, 64, .07); color: rgb(220, 110, 110); border: 1px solid rgba(196, 64, 64, .18); }
.mmc-hp-status-cold    { background: rgba(196, 64, 64, .14); color: rgb(245, 95, 95); border: 1px solid rgba(196, 64, 64, .3); }

.mmc-hp-header-stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .02em;
}
.mmc-hp-up   { color: rgb(20, 230, 140); font-weight: 800; }
.mmc-hp-down { color: rgb(245, 95, 95);  font-weight: 800; }
.mmc-hp-stat-sep { color: var(--text-5, rgba(255,255,255,.18)); }
.mmc-hp-stat-dim { color: var(--text-4); font-weight: 600; }

/* Token detail block (only present when hovering a specific token) */
.mmc-hp-token {
  padding: 10px 12px;
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.mmc-hp-token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mmc-hp-token-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  flex-shrink: 0;
}
.mmc-hp-token-id {
  flex: 1;
  min-width: 0;
}
.mmc-hp-token-symbol {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  line-height: 1.1;
}
.mmc-hp-token-name {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmc-hp-token-pct {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 16px;
  letter-spacing: -.01em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mmc-hp-token-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.mmc-hp-token-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.mmc-hp-stat-key {
  color: var(--text-4);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.mmc-hp-stat-val {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* Constituent list at the bottom */
.mmc-hp-list {
  padding: 8px 12px 10px;
}
.mmc-hp-list-head {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-4);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-top: 4px;
}
.mmc-hp-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  border-radius: 3px;
  transition: background .1s ease;
}
.mmc-hp-list-row-active {
  background: rgba(0, 196, 114, .06);
  margin: 0 -6px;
  padding: 4px 6px;
}
.mmc-hp-list-symbol {
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: .02em;
}
.mmc-hp-list-row-active .mmc-hp-list-symbol {
  color: var(--text-0);
}
.mmc-hp-list-mcap {
  color: var(--text-4);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mmc-hp-list-pct {
  font-weight: 800;
  text-align: right;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.mmc-hp-list-more {
  font-size: 10px;
  color: var(--text-4);
  text-align: center;
  padding-top: 6px;
  letter-spacing: .04em;
  font-family: var(--mono, ui-monospace, monospace);
}

/* Touch devices: hide the panel infrastructure entirely. CSS-only
   guard belt-and-suspenders with the JS hover-media query check. */
@media (hover: none) {
  .mmc-hover-panel { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   P48 — RANK RINGS (gold / silver / bronze on Weekly Top 3 avatars)
   ─────────────────────────────────────────────────────────────
   Three flavours, applied via extraClass on the avatar element
   (sidebar) or as a class on the wrapper div (profile). Each
   uses a glowing outer ring + a bevel-style inner stroke to
   read as "medal" without being literal.
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar avatars — small rings around the 28px avatar */
.avatar-rank-gold,
.avatar-rank-silver,
.avatar-rank-bronze {
  position: relative;
  /* The ring sits OUTSIDE the avatar circle. We use box-shadow
     instead of border so the avatar's content (image/initials)
     keeps its full diameter. */
}
.avatar-rank-gold {
  box-shadow:
    0 0 0 2px #0a0d10,                    /* dark bg gap so ring reads separate */
    0 0 0 3.5px #d4af37,                  /* gold core */
    0 0 8px 1px rgba(212, 175, 55, .35);  /* subtle glow */
}
.avatar-rank-silver {
  box-shadow:
    0 0 0 2px #0a0d10,
    0 0 0 3.5px #b8bcc4,
    0 0 8px 1px rgba(184, 188, 196, .28);
}
.avatar-rank-bronze {
  box-shadow:
    0 0 0 2px #0a0d10,
    0 0 0 3.5px #b87333,
    0 0 8px 1px rgba(184, 115, 51, .25);
}

/* The ranked numeral (1 / 2 / 3) shown in the Weekly Top 3 sidebar.
   Tiered colors so it visually matches the avatar ring. */
.rank-numeral {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.rank-numeral-1 { color: #d4af37; }
.rank-numeral-2 { color: #b8bcc4; }
.rank-numeral-3 { color: #b87333; }

/* Profile page — 72px avatar wrapper, much heftier ring */
.profile-avatar-rank-gold,
.profile-avatar-rank-silver,
.profile-avatar-rank-bronze {
  /* Override the default green-accent box-shadow with a tier ring.
     The wrapper element has its background color set inline, so we
     only need to alter the box-shadow for the ring effect. */
  position: relative;
}
.profile-avatar-rank-gold {
  box-shadow:
    0 0 0 3px var(--bg-1),                 /* match-bg gap */
    0 0 0 5px #d4af37,                     /* main ring */
    0 0 18px 2px rgba(212, 175, 55, .40);  /* glow */
}
.profile-avatar-rank-silver {
  box-shadow:
    0 0 0 3px var(--bg-1),
    0 0 0 5px #b8bcc4,
    0 0 18px 2px rgba(184, 188, 196, .32);
}
.profile-avatar-rank-bronze {
  box-shadow:
    0 0 0 3px var(--bg-1),
    0 0 0 5px #b87333,
    0 0 18px 2px rgba(184, 115, 51, .28);
}


/* ═══════════════════════════════════════════════════════════════
   P48 — HEATMAP SKELETON SHIMMER (perceived load speed)
   ─────────────────────────────────────────────────────────────
   When market data is still in flight, render the treemap
   structure immediately with shimmering placeholder rectangles.
   The cutover to real data is layout-stable.
   ═══════════════════════════════════════════════════════════════ */

.mmc-skeleton .mmc-skel-shimmer {
  /* We animate the rect's `opacity` (which SMIL/CSS supports on
     SVG via animation rather than transition for fill changes)
     to create a slow pulse. Multiple rects, each with a tiny
     animation-delay, gives the rolling-shimmer effect. */
  animation: mmcSkelPulse 1.6s ease-in-out infinite;
}
.mmc-skeleton .mmc-skel-shimmer:nth-child(2) { animation-delay: .15s; }
.mmc-skeleton .mmc-skel-shimmer:nth-child(3) { animation-delay: .30s; }
.mmc-skeleton .mmc-skel-shimmer:nth-child(4) { animation-delay: .45s; }
.mmc-skeleton .mmc-skel-shimmer:nth-child(5) { animation-delay: .60s; }
.mmc-skeleton .mmc-skel-shimmer:nth-child(6) { animation-delay: .75s; }
@keyframes mmcSkelPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

/* ═══════════════════════════════════════════════════════════════
   P50 — ACHIEVEMENTS (upgraded visual design)
   ─────────────────────────────────────────────────────────────
   Each badge is a designed object — gradient body, metallic rim
   highlight, tier-colored ring, optional progress arc, percent
   readout. Earned vs locked is profound visual contrast: earned
   badges glow with tier identity, locked badges are dim slate.
   The hover panel is portaled to <body> so it always stacks
   above sidebar widgets regardless of intermediate stacking
   contexts.
   ═══════════════════════════════════════════════════════════════ */

.ach-tab-body {
  padding: 6px 0 24px;
}

/* Summary line — terse, mono, sits above the grid */
.ach-summary {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .04em;
  margin-bottom: 18px;
  padding: 0 2px;
}

/* Tab count badge — lives next to "Achievements" in the tab row */
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 999px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.tab-active .tab-count {
  color: var(--accent);
  background: rgba(0, 196, 114, .08);
  border-color: rgba(0, 196, 114, .22);
}

/* LOCKED divider — separates earned showcase from aspirational set */
.ach-locked-divider {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--text-4);
  margin: 28px 0 16px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ach-locked-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.367 / P65.368 — PREMIUM ACHIEVEMENT BADGES (aurora medallion)
   ─────────────────────────────────────────────────────────────────
   v2 redesign: dropped the hex frame (looked gamer-cheap) and
   replaced with a clean circular medallion built from a glass core
   sitting inside a tier-coloured aurora ring, with a soft outer
   halo glow. Apple/Linear/Stripe-grade refinement.

   Layer stack (back → front):
     1. .ach-aurora       — soft outer halo glow (idle pulse)
     2. .ach-ring         — sharp coloured outer ring (tier signature)
     3. .ach-glass        — frosted glass center
        .ach-glass-tint   — tier-coloured radial wash inside the glass
        .ach-glass-edge   — inner rim light  (specular)
        .ach-glass-shine  — diagonal shimmer (sweeps on hover)
     4. .ach-progress-arc — locked-only stroke ring (over .ach-ring)
     5. .ach-circle-icon  — large, drop-shadowed icon
     6. .ach-circle-pct   — locked-only % label
     7. .ach-tier-ribbon  — tier name (always visible on earned, hover
                             on locked)

   Platinum tier: rotating holographic conic gradient on the ring +
   counter-rotating prismatic halo.
   ═══════════════════════════════════════════════════════════════════ */

.ach-grid-circles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 32px 18px;
  padding: 14px 4px 24px;
  contain: layout paint;
}

/* The badge wrapper ─────────────────────────────────────────── */
.ach-circle {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  /* P65.369 — `contain: layout` only (NOT `paint`). The earlier
     `contain: paint` was clipping the tier-coloured box-shadow halo
     to the wrapper's square bounding box, so the glow rendered as a
     soft RECTANGLE instead of a clean circle. `layout` alone still
     isolates layout reflow without preventing the glow from escaping. */
  contain: layout;
  transform: translateZ(0);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.ach-circle:hover,
.ach-circle:focus-visible {
  transform: translateY(-5px) scale(1.045);
  z-index: 2;
}
.ach-circle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 50%;
}

/* ─── Layer 1 · aurora glow ────────────────────────────────────
   The soft, blurred outer halo that gives each badge its tier-
   coloured "presence". Idle: gently breathes (different speed per
   tier so the grid feels alive but not synchronised). Hover: brightens
   + scales for a subtle bloom effect. */
.ach-aurora {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(14px);
  opacity: 0;
  z-index: 0;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.ach-circle-earned .ach-aurora { opacity: 0.55; }
.ach-circle:hover .ach-aurora { opacity: 1; transform: scale(1.06); }

/* ─── Layer 2 · sharp tier ring ────────────────────────────────
   The bright, sharp coloured circle that reads as the medallion's
   signature edge. Sits ON TOP of the aurora and BEHIND the glass —
   so the glass sits as an inset circle within the ring's edge.
   This is the visual hierarchy that distinguishes tiers at a glance. */
.ach-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  /* Default (locked baseline) — soft slate ring with a faint inner
     shadow so it reads as recessed metal. */
  background: linear-gradient(145deg, #2c333c 0%, #1a1f25 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ─── Layer 3 · glass core ─────────────────────────────────────
   The frosted inner surface that holds the icon. The 13px inset
   gives the ring a confident 13px-thick presence. Inset shadows
   give the glass a "domed lens" feel — light catches the upper rim. */
.ach-glass {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #1c2128 0%, #0c1015 55%, #060a0d 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -6px 12px rgba(0, 0, 0, 0.65);
}
.ach-glass-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.ach-circle-earned .ach-glass-tint { opacity: 1; }
.ach-glass-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Highlight band along the top — subtle "polished glass" effect. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.ach-glass-shine {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 100%);
  transform: rotate(18deg);
  pointer-events: none;
  opacity: 0;
}
.ach-circle:hover .ach-glass-shine {
  animation: achShineSweep .95s cubic-bezier(.4, 0, .3, 1) forwards;
}
@keyframes achShineSweep {
  0%   { opacity: 0; left: -100%; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; left: 180%; }
}

/* ─── Layer 4 · icon ───────────────────────────────────────────
   Big, drop-shadowed icon at the center. The colour is set per
   tier via the `.ach-circle.ach-tier-XXX` color rules so currentColor
   inside the SVG path picks it up. */
.ach-circle-icon {
  position: relative;
  z-index: 4;
  width: 42px;
  height: 42px;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), filter .25s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .65));
}
.ach-circle:hover .ach-circle-icon {
  transform: scale(1.10);
}

/* ─── Layer 5 · progress arc (locked only) ─────────────────────
   The accent-green ring stroke that fills as the user closes in. */
.ach-progress-arc {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.ach-ring-progress {
  stroke: var(--accent);
  filter: drop-shadow(0 0 5px rgba(0, 196, 114, .6));
}

/* ─── Layer 6 · percent label (locked only) ────────────────────
   Tiny pill near the bottom that surfaces "X% there" without a hover. */
.ach-circle-pct {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
  background: rgba(10, 13, 16, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  border: 1px solid rgba(0, 196, 114, 0.42);
  z-index: 5;
}

/* ─── Layer 7 · tier ribbon ────────────────────────────────────
   Earned: always faintly visible below the medallion, brightens on
   hover. Locked: hidden until hover. Tier-tinted text on a dark pill.
   This is the "Bronze / Silver / Gold / Platinum" caption. */
.ach-tier-ribbon {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10, 13, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1);
  z-index: 6;
}
.ach-circle-earned .ach-tier-ribbon { opacity: 0.85; }
.ach-circle:hover .ach-tier-ribbon,
.ach-circle:focus-visible .ach-tier-ribbon { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   EARNED — tier-specific colour systems
   Each tier defines: ring colour, aurora glow, glass tint, icon
   colour, and ribbon styling. The ring is the dominant "tier
   signature" — clean and sharp.
   ════════════════════════════════════════════════════════════════ */

/* BRONZE — refined warm amber. Glass interior now glows a real
   amber wash so the icon sits in a lit "cabin" instead of a dark
   void. */
.ach-circle-earned.ach-tier-bronze { color: #fbbf24; }
.ach-circle-earned.ach-tier-bronze .ach-ring {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 55%, #92400e 100%);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 0 22px 2px rgba(217, 119, 6, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ach-circle-earned.ach-tier-bronze .ach-glass {
  background: radial-gradient(circle at 32% 28%, #3a2410 0%, #1d1409 60%, #0d0905 100%);
}
.ach-circle-earned.ach-tier-bronze .ach-glass-tint {
  background:
    radial-gradient(circle at 30% 25%, rgba(251, 191, 36, 0.38) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(217, 119, 6, 0.22) 0%, transparent 55%);
}
.ach-circle-earned.ach-tier-bronze .ach-aurora {
  background: radial-gradient(circle at 50% 50%,
    rgba(251, 191, 36, 0.55) 0%,
    rgba(217, 119, 6, 0.30) 30%,
    transparent 65%);
  animation: achIdlePulseBronze 3.4s ease-in-out infinite;
}
.ach-circle-earned.ach-tier-bronze .ach-tier-ribbon {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}
@keyframes achIdlePulseBronze {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.7;  }
}

/* SILVER — cool platinum white-blue (premium, not "grey") */
.ach-circle-earned.ach-tier-silver { color: #f1f5f9; }
.ach-circle-earned.ach-tier-silver .ach-ring {
  background: linear-gradient(145deg, #f1f5f9 0%, #94a3b8 55%, #475569 100%);
  box-shadow:
    0 0 0 1px rgba(241, 245, 249, 0.5),
    0 0 22px 2px rgba(148, 163, 184, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ach-circle-earned.ach-tier-silver .ach-glass {
  background: radial-gradient(circle at 32% 28%, #2c333d 0%, #161a20 60%, #0c0e12 100%);
}
.ach-circle-earned.ach-tier-silver .ach-glass-tint {
  background:
    radial-gradient(circle at 30% 25%, rgba(241, 245, 249, 0.30) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(148, 163, 184, 0.18) 0%, transparent 55%);
}
.ach-circle-earned.ach-tier-silver .ach-aurora {
  background: radial-gradient(circle at 50% 50%,
    rgba(226, 232, 240, 0.50) 0%,
    rgba(148, 163, 184, 0.25) 30%,
    transparent 65%);
  animation: achIdlePulseSilver 3.8s ease-in-out infinite;
}
.ach-circle-earned.ach-tier-silver .ach-tier-ribbon {
  color: #e2e8f0;
  border-color: rgba(226, 232, 240, 0.45);
}
@keyframes achIdlePulseSilver {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.65; }
}

/* GOLD — vivid prestige amber-orange (not pale yellow) */
.ach-circle-earned.ach-tier-gold { color: #fde68a; }
.ach-circle-earned.ach-tier-gold .ach-ring {
  background: linear-gradient(145deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
  box-shadow:
    0 0 0 1px rgba(253, 230, 138, 0.55),
    0 0 26px 3px rgba(245, 158, 11, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ach-circle-earned.ach-tier-gold .ach-glass {
  background: radial-gradient(circle at 32% 28%, #3d2a0c 0%, #1d1607 60%, #0e0b04 100%);
}
.ach-circle-earned.ach-tier-gold .ach-glass-tint {
  background:
    radial-gradient(circle at 30% 25%, rgba(253, 230, 138, 0.42) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.28) 0%, transparent 55%);
}
.ach-circle-earned.ach-tier-gold .ach-aurora {
  background: radial-gradient(circle at 50% 50%,
    rgba(253, 230, 138, 0.65) 0%,
    rgba(245, 158, 11, 0.30) 30%,
    transparent 65%);
  animation: achIdlePulseGold 3.2s ease-in-out infinite;
}
.ach-circle-earned.ach-tier-gold .ach-tier-ribbon {
  color: #fde68a;
  border-color: rgba(253, 230, 138, 0.55);
}
@keyframes achIdlePulseGold {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* PLATINUM — holographic. The "wow" tier. Conic-gradient ring +
   counter-rotating aurora + prismatic glass tint that actually
   shows up inside (not a muddy dark void). */
.ach-circle-earned.ach-tier-platinum { color: #ffffff; }
.ach-circle-earned.ach-tier-platinum .ach-ring {
  background: conic-gradient(from 0deg,
    #c084fc 0%,
    #38bdf8 25%,
    #4ade80 50%,
    #fde047 75%,
    #f472b6 90%,
    #c084fc 100%);
  /* P65.370 — slimmer outer halo so the platinum doesn't bloom past
     its neighbours. Single soft purple shadow at low spread is
     enough; the rotating ring already announces "premium". */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 18px rgba(168, 85, 247, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: achHolographicSpin 9s linear infinite;
}
/* Replace the dark slate base with a rich prismatic deep-blue so
   the holographic tints inside actually read as colours, not as a
   black void with faint stains. */
.ach-circle-earned.ach-tier-platinum .ach-glass {
  background:
    radial-gradient(circle at 30% 25%, #2a1a4d 0%, #14193d 45%, #07091a 100%);
}
.ach-circle-earned.ach-tier-platinum .ach-glass-tint {
  background:
    radial-gradient(circle at 28% 22%, rgba(192, 132, 252, 0.55) 0%, transparent 55%),
    radial-gradient(circle at 78% 74%, rgba(74, 222, 128, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.40) 0%, transparent 50%),
    radial-gradient(circle at 18% 82%, rgba(253, 224, 71, 0.28) 0%, transparent 50%);
}
/* Inner edge for platinum gets a colourful glow ring on top of the
   normal specular so the glass feels alive. */
.ach-circle-earned.ach-tier-platinum .ach-glass-edge {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 18px rgba(192, 132, 252, 0.22);
}
.ach-circle-earned.ach-tier-platinum .ach-aurora {
  /* P65.370 — toned WAY down. The previous 0.65-stop conic at
     blur(18px) opacity 0.7 was washing out the whole grid row. The
     ring itself is already a vivid holographic spinner; the aurora
     only needs to add a faint prismatic mist behind it. */
  background: conic-gradient(from 0deg,
    rgba(192, 132, 252, 0.35),
    rgba(56, 189, 248, 0.30),
    rgba(74, 222, 128, 0.30),
    rgba(253, 224, 71, 0.28),
    rgba(244, 114, 182, 0.32),
    rgba(192, 132, 252, 0.35));
  filter: blur(20px);
  opacity: 0.32;
  animation: achHolographicSpin 13s linear infinite reverse;
}
.ach-circle-earned.ach-tier-platinum:hover .ach-aurora { opacity: 0.55; }
.ach-circle-earned.ach-tier-platinum .ach-tier-ribbon {
  color: #ffffff;
  background: linear-gradient(135deg,
    rgba(192, 132, 252, 0.32),
    rgba(56, 189, 248, 0.28),
    rgba(74, 222, 128, 0.28));
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  opacity: 1;          /* always fully visible on platinum */
}
.ach-circle-earned.ach-tier-platinum .ach-circle-icon {
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.55))
          drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
@keyframes achHolographicSpin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   LOCKED — dim slate body, but the progress arc + percent label
   glow accent-green so users can see how close they are at a glance.
   ════════════════════════════════════════════════════════════════ */
.ach-circle-locked { color: rgba(255, 255, 255, 0.34); }
.ach-circle-locked .ach-ring {
  background: linear-gradient(145deg, #2c333c 0%, #1a1f25 55%, #15191e 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ach-circle-locked .ach-aurora {
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 196, 114, 0.18) 0%,
    transparent 60%);
  opacity: 0.20;
}
.ach-circle-locked:hover {
  color: rgba(255, 255, 255, 0.75);
}
.ach-circle-locked:hover .ach-aurora {
  opacity: 0.7;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 196, 114, 0.4) 0%,
    transparent 60%);
}
.ach-circle-locked .ach-tier-ribbon {
  color: var(--text-4);
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — calm everything down.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ach-circle,
  .ach-circle-icon,
  .ach-aurora,
  .ach-ring,
  .ach-glass-shine,
  .ach-tier-ribbon {
    animation: none !important;
    transition: opacity .15s ease;
  }
  .ach-circle:hover { transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   HOVER PANEL — portaled to <body> so it always stacks above
   sidebar widgets regardless of intermediate stacking contexts.
   ────────────────────────────────────────────────────────────── */
.ach-hover-panel {
  position: fixed;
  /* High z-index so this sits above ALL page chrome but still under
     modals (which use 2000+). 1500 was chosen for the MMC heatmap
     hover panel — keeping the same value here for consistency. */
  z-index: 1500;
  width: 260px;
  max-width: calc(100vw - 28px);
  background: #0a0d10;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  /* Heavy drop shadow + a 1px black ring so the panel reads as a
     discrete object floating in front of the page. */
  box-shadow: 0 16px 56px rgba(0, 0, 0, .7),
              0 0 0 1px rgba(0, 0, 0, .55);
  pointer-events: none;
  overflow: hidden;
  padding: 13px 14px 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.ach-hover-panel-shown {
  opacity: 1;
  transform: translateY(0);
}

.ach-hp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
}
.ach-hp-tier,
.ach-hp-state {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.ach-hp-tier-bronze   { color: #f0bb78; background: rgba(184, 115, 51, .14); border-color: rgba(184, 115, 51, .32); }
.ach-hp-tier-silver   { color: #e8ecf2; background: rgba(192, 197, 207, .12); border-color: rgba(192, 197, 207, .28); }
.ach-hp-tier-gold     { color: #ffe18f; background: rgba(230, 193, 75, .14); border-color: rgba(230, 193, 75, .32); }
.ach-hp-tier-platinum { color: #b9eef9; background: rgba(121, 211, 238, .12); border-color: rgba(121, 211, 238, .30); }

.ach-hp-state-earned { color: var(--accent); background: rgba(0, 196, 114, .12); border-color: rgba(0, 196, 114, .28); }
.ach-hp-state-locked { color: var(--text-4); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }

.ach-hp-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  margin-bottom: 5px;
  line-height: 1.2;
}

.ach-hp-desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}

.ach-hp-qualifier {
  margin-top: 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}

.ach-hp-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
}
.ach-hp-progress-label {
  color: var(--text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ach-hp-progress-pct {
  color: var(--text-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ach-hp-progress-bar {
  margin-top: 5px;
  height: 3px;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  overflow: hidden;
}
.ach-hp-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.ach-hp-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-4);
  font-style: italic;
  line-height: 1.45;
}

/* P65.372 — cred reward pill at the bottom of the hover panel. */
.ach-hp-reward {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.ach-hp-reward-earned {
  background: rgba(0, 196, 114, 0.14);
  color: var(--accent);
  border: 1px solid rgba(0, 196, 114, 0.45);
}
.ach-hp-reward-earned::before {
  content: '✓';
  margin-right: 5px;
  font-weight: 900;
}
.ach-hp-reward-locked {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Touch devices — hide the panel infrastructure entirely */
@media (hover: none) {
  .ach-hover-panel { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   P52 — VELOCITY INDICATOR (post engagement state pill)
   ─────────────────────────────────────────────────────────────
   Three meaningful states get a pill: HOT (rising fast),
   TRENDING (in trending list), AGING (old + low recent activity).
   Default: no pill. Most posts get nothing — silence is signal.
   ═══════════════════════════════════════════════════════════════ */

.vel-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 3px 7px 3px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* HOT — accent green, with a subtle pulsing dot for "actively rising"
   feel. The dot reads as a heartbeat — communicates the state better
   than the word alone. */
.vel-hot {
  background: rgba(0, 196, 114, .10);
  color: rgb(20, 230, 140);
  border-color: rgba(0, 196, 114, .28);
}
.vel-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(20, 230, 140);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  animation: velPulse 1.6s ease-out infinite;
}
.vel-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgb(20, 230, 140);
  opacity: .35;
  animation: velPulseHalo 1.6s ease-out infinite;
}
@keyframes velPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(.85); opacity: .85; }
}
@keyframes velPulseHalo {
  0%   { transform: scale(.5); opacity: .55; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

/* TRENDING — orange. No animation — distinguishes it from HOT
   visually (HOT pulses, TRENDING is steady-state established). */
.vel-trending {
  background: rgba(255, 138, 51, .12);
  color: rgb(255, 168, 80);
  border-color: rgba(255, 138, 51, .28);
}
.vel-trending .vel-icon {
  color: rgb(255, 168, 80);
  flex-shrink: 0;
}

/* AGING — quiet grey-blue. Not pejorative. Just communicates that
   this is older content and newer activity may be elsewhere. */
.vel-aging {
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .42);
  border-color: rgba(255, 255, 255, .07);
}

/* P65.230 / P65.231 — STAMINA ALIVE.  Icon-only badge (no "ALIVE"
   word) — the green border + outer glow on the post card and the
   pulsing ⚡ button already say "this is alive"; an explicit label
   on top was redundant. */
.vel-pill.vel-stamina-alive {
  background:
    linear-gradient(180deg,
      rgba(52, 255, 175, 0.20),
      rgba(52, 255, 175, 0.07));
  border-color: rgba(52, 255, 175, 0.55);
  color: #b6ffe5;
  text-shadow: 0 0 8px rgba(52, 255, 175, 0.55);
  animation: velStaminaAlivePulse 2.4s ease-in-out infinite;
}
.vel-pill.vel-stamina-alive .vel-icon {
  color: var(--se-neon, #34ffaf);
  filter: drop-shadow(0 0 4px rgba(52, 255, 175, 0.75));
}
/* Icon-only variant — circular badge sized to the icon, no label */
.vel-pill.vel-stamina-alive-icon {
  padding: 4px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.vel-pill.vel-stamina-alive-icon .vel-icon {
  margin: 0;
}
@keyframes velStaminaAlivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 255, 175, 0.0); }
  50%      { box-shadow: 0 0 12px 1px rgba(52, 255, 175, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .vel-pill.vel-stamina-alive { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   P52 — REPORT MODAL
   ─────────────────────────────────────────────────────────────
   Reason categories + free-text. Frictionless but not reckless.
   ═══════════════════════════════════════════════════════════════ */

.report-modal {
  padding: 20px 22px 22px;
  max-width: 460px;
  width: 100%;
}

/* Head: icon + title + subtitle */
.report-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.report-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(245, 95, 95, .12);
  color: rgb(245, 95, 95);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(245, 95, 95, .22);
}
.report-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
  line-height: 1.25;
}
.report-subtitle {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 3px;
}

/* Post preview — compact card showing what's being reported.
   Avatar + truncated title + time. Confirms "yes, this post." */
.report-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
}
.report-preview-text {
  flex: 1;
  min-width: 0;
}
.report-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.report-preview-meta {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .02em;
}

/* Section labels above the radio list and textarea */
.report-section-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.report-section-label-optional {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--text-4);
  font-size: 10.5px;
}

/* Reason list — clickable cards with radio inputs.
   Hidden native radio, custom check icon on the right. */
.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.report-reason:hover {
  border-color: rgba(255, 255, 255, .14);
  background: var(--bg-3);
}
.report-reason-radio {
  /* Hide the native radio; we use the right-hand check as the
     visual indicator. Keep it focusable for keyboard users
     (sr-only-style positioning). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.report-reason-content {
  flex: 1;
  min-width: 0;
}
.report-reason-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
}
.report-reason-desc {
  font-size: 11.5px;
  color: var(--text-4);
  margin-top: 2px;
  line-height: 1.4;
}
.report-reason-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all .15s ease;
}
.report-reason-selected {
  border-color: var(--accent);
  background: rgba(0, 196, 114, .04);
}
.report-reason-selected .report-reason-label {
  color: var(--text-0);
}
.report-reason-selected .report-reason-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-0, #0a0d10);
}

/* Detail textarea */
.report-detail-input {
  width: 100%;
  min-height: 76px;
  max-height: 160px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .12s ease;
  outline: none;
}
.report-detail-input::placeholder {
  color: var(--text-4);
}
.report-detail-input:focus {
  border-color: var(--accent);
  background: var(--bg-3);
}
.report-detail-counter {
  font-size: 10px;
  color: var(--text-4);
  text-align: right;
  margin-top: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .02em;
}

/* Action row — Cancel / Submit */
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.report-submit-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Touch-friendly tap targets — bump the reason height on mobile */
@media (max-width: 540px) {
  .report-reason { padding: 12px; }
  .report-reason-label { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   P54 — CUSTOM VIDEO PLAYER (post videos)
   ─────────────────────────────────────────────────────────────
   Replaces the browser's native <video controls> chrome. Designed
   to feel like a deliberate part of the institutional UI rather
   than a foreign UA element. Auto-hides during playback after 2s
   of mouse inactivity; reappears on hover/mousemove.
   ═══════════════════════════════════════════════════════════════ */

.vp-shell {
  position: relative;
  background: #000;
  overflow: hidden;
  width: 100%;
  /* Block layout so the video sits flush */
  line-height: 0;
}
.vp-shell .vp-video {
  cursor: pointer;
}

/* Auto-hide state — overlay fades but stays interactive on hover */
.vp-shell.vp-idle .vp-overlay { opacity: 0; pointer-events: none; }
.vp-shell.vp-idle .vp-video   { cursor: default; }

/* Overlay — bottom gradient + center play. Both elements sit
   absolutely so the video itself stays untouched. The overlay
   container is pointer-events:none so empty regions (the gradient
   above the bottom bar) pass clicks through to the video for
   the standard "click anywhere to toggle play" behavior; specific
   interactive children re-enable pointer-events. */
.vp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
  /* The gradient gives the bottom bar contrast on any video */
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.78) 100%);
}
/* Re-enable pointer events ONLY on the interactive controls.
   The center play button + the entire bottom bar (which has its
   own dark backdrop, so users expect it to be clickable). */
.vp-center-play,
.vp-bottom {
  pointer-events: auto;
}

/* Center "Play" button — only visible when paused. Soft glow ring. */
.vp-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* P54b: 64 → 46. The previous size dominated the frame on
     embedded feed videos; this reads as a control without
     overpowering the content. Removed backdrop-blur — it made
     the button feel like a glass panel instead of a control. */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .58);
  border: 1.25px solid rgba(255, 255, 255, .28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  /* Slight inward icon nudge so the play triangle looks centered */
  padding-left: 3px;
}
.vp-center-play svg { display: block; width: 20px; height: 20px; }
.vp-center-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(0, 196, 114, .22);
  border-color: rgba(0, 196, 114, .55);
}

/* Bottom bar — slimmer than before. Tighter padding, smaller buttons,
   shorter timecode min-width. The previous 48px-tall bar was 17% of
   a typical embedded video frame — too much surface area. */
.vp-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 7px;
}

/* Smaller transparent buttons */
.vp-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .92);
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color .12s ease, background .12s ease;
}
.vp-btn svg { width: 13px; height: 13px; }
.vp-btn:hover {
  color: rgb(20, 230, 140);
  background: rgba(255, 255, 255, .06);
}

/* Mono timecode — narrower min-width, tighter font */
.vp-time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 64px;
}

/* Progress bar — thin track, accent-green fill, hover grows it.
   Click anywhere to scrub; data-video-progress hands off to the
   pointerdown handler in JS. */
.vp-progress {
  flex: 1;
  height: 16px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* Internal track is 4px tall, centered. Wrapper is taller so the
     hit area is comfortable for clicks/scrubs. */
}
.vp-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  transition: height .12s ease, margin-top .12s ease;
}
.vp-progress:hover::before {
  height: 6px;
  margin-top: -3px;
}
.vp-progress-buffer {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  width: 0;
  background: rgba(255, 255, 255, .28);
  border-radius: 2px;
  transition: height .12s ease, margin-top .12s ease, width .2s linear;
  pointer-events: none;
}
.vp-progress:hover .vp-progress-buffer {
  height: 6px;
  margin-top: -3px;
}
.vp-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  width: 0;
  background: var(--accent, #00C472);
  border-radius: 2px;
  transition: height .12s ease, margin-top .12s ease;
  box-shadow: 0 0 6px rgba(0, 196, 114, .5);
  pointer-events: none;
}
.vp-progress:hover .vp-progress-fill {
  height: 6px;
  margin-top: -3px;
}
/* Thumb — hidden at rest, appears on hover. Acts as a visual
   anchor for the current scrub position. */
.vp-progress-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--accent, #00C472);
  box-shadow: 0 0 8px rgba(0, 196, 114, .55);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.vp-progress:hover .vp-progress-thumb {
  opacity: 1;
}

/* Buffering shimmer — thin animated band overlaid when readyState<3 */
.vp-shell.vp-buffering .vp-progress::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 196, 114, .35) 30%,
    rgba(0, 196, 114, .55) 50%,
    rgba(0, 196, 114, .35) 70%,
    transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  border-radius: 2px;
  animation: vpBufShimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vpBufShimmer {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* Volume cluster — button + collapsing slider. Slider is hidden by
   default and expands on hover of the wrapper. Same accent green
   for the fill. */
.vp-vol {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vp-vol-slider {
  width: 0;
  height: 16px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: width .2s ease;
  display: flex;
  align-items: center;
}
.vp-vol:hover .vp-vol-slider {
  width: 56px;
  margin-left: 4px;
}
.vp-vol-slider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 4px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: rgba(255, 255, 255, .22);
  border-radius: 2px;
}
.vp-vol-slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  width: 80%;   /* JS will overwrite */
  background: var(--accent, #00C472);
  border-radius: 2px;
  pointer-events: none;
}

/* Mobile — hide the volume slider entirely (touch users mute via
   tap on the icon). Scrub bar stays. */
@media (hover: none) {
  .vp-vol-slider { display: none !important; }
  .vp-bottom { gap: 8px; padding: 8px 10px; }
  .vp-time { min-width: 62px; font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   P54 — TAG CHIP EDITOR (Create Post)
   ─────────────────────────────────────────────────────────────
   Replaces the legacy "comma separated" text input. Each tag
   becomes a discrete chip with an X to remove. Typing builds the
   next chip; Enter / Comma / Tab commits it. Backspace on empty
   input removes the last chip. Suggestions row below shows
   trending tags + the user's recent tags as one-tap adds.
   ═══════════════════════════════════════════════════════════════ */

.tag-input-shell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 6px;
  transition: border-color .12s ease, background .12s ease;
}
.tag-input-shell:focus-within {
  border-color: var(--accent, #00C472);
  background: var(--bg-3);
}
.tag-input-full {
  /* No more chip slots — visually quiet but still editable on chip
     remove (input becomes disabled until under cap) */
  opacity: .92;
}

/* Row of chips + the typing input. Chips wrap; input takes the
   remaining width on its row. */
.tag-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

/* The chip itself — pill, accent-colored, with a hover-revealed X */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  background: rgba(0, 196, 114, .10);
  border: 1px solid rgba(0, 196, 114, .28);
  color: rgb(20, 230, 140);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 5px;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.tag-chip:hover {
  background: rgba(0, 196, 114, .14);
  border-color: rgba(0, 196, 114, .42);
}
.tag-chip-text {
  /* Mono font reads as data — fits the institutional vibe.
     Tickers like $PEPE look like Bloomberg tickers, topics like
     #degen look like a stable identifier. */
  white-space: nowrap;
}
.tag-chip-x {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(20, 230, 140, .55);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .12s ease, color .12s ease;
}
.tag-chip-x:hover {
  background: rgba(0, 196, 114, .25);
  color: rgb(20, 230, 140);
}

/* Brief flash animation when user tries to add an existing tag */
.tag-chip-flash {
  animation: tagChipFlash .55s ease;
}
@keyframes tagChipFlash {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.08); background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .48); }
}

/* The input field — looks like part of the shell, no separate border */
.tag-input-field {
  flex: 1;
  min-width: 140px;
  padding: 4px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.tag-input-field::placeholder {
  color: var(--text-4);
  font-weight: 400;
}
.tag-input-field:disabled {
  color: var(--text-4);
  cursor: not-allowed;
}

/* Meta row below the input — count + hint */
.tag-input-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
  flex-wrap: wrap;
}
.tag-input-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.tag-input-hint {
  font-family: inherit;       /* return to system font for the prose part */
  font-size: 10px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0;
}
.tag-input-hint code {
  font-family: var(--mono, ui-monospace, monospace);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 9.5px;
  color: var(--text-2);
}

/* Suggestion row — quick-tap chips below the meta */
.tag-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tag-suggest-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-right: 4px;
  flex-shrink: 0;
}
.tag-suggest-chip {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .12);
  color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tag-suggest-chip:hover {
  border-style: solid;
  border-color: rgba(0, 196, 114, .42);
  color: rgb(20, 230, 140);
  background: rgba(0, 196, 114, .06);
}

/* ═══════════════════════════════════════════════════════════════
   P54b — TRENDING TOPICS REDESIGN
   ─────────────────────────────────────────────────────────────
   Institutional density: per-row rank + ticker + mention count +
   mini engagement bar proportional to the top item.
   ═══════════════════════════════════════════════════════════════ */

.tt-card {
  /* Slight orange-warm tint border — matches the "trending heat"
     metaphor. Kept subtle. */
  border-color: rgba(255, 107, 26, .12) !important;
}
.tt-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tt-window {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--text-4);
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 3px;
  background: rgba(255, 255, 255, .02);
}

.tt-list {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

.tt-row {
  display: grid;
  /* P55c: was `18px auto 28px 1fr` from when there was a 4th bar
     column. P55b removed the bar but the grid template wasn't
     updated, so the mentions cell got crammed into 28px and
     "1 post" wrapped onto two lines. Now: rank | ticker | mentions
     where mentions takes whatever it needs from the right. */
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .14s ease, margin .14s ease, padding .14s ease, border-radius .14s ease;
}
.tt-row:last-child { border-bottom: none; }
.tt-row:hover {
  background: rgba(0, 196, 114, .04);
  margin: 0 -10px;
  padding: 7px 10px;
  border-radius: 6px;
  border-bottom-color: transparent;
}

.tt-rank {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tt-row:hover .tt-rank { color: var(--accent); }

.tt-ticker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .02em;
}

.tt-mentions {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* P55c: keep "N posts" on a single line in narrow sidebars */
  white-space: nowrap;
}

/* Mini engagement bar — proportional to the top row's engagement.
   Track is a thin pill with a fill segment. Top-3 rows get the
   full accent color; tail rows get a slightly faded variant so
   the visual weight cascades. */
.tt-bar {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.tt-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.tt-rank-1 .tt-bar-fill { background: var(--accent); box-shadow: 0 0 6px rgba(0, 196, 114, .35); }
.tt-rank-2 .tt-bar-fill { background: var(--accent); opacity: .82; }
.tt-rank-3 .tt-bar-fill { background: var(--accent); opacity: .68; }
.tt-row:not(.tt-rank-1):not(.tt-rank-2):not(.tt-rank-3) .tt-bar-fill { opacity: .45; }

/* Top row gets the heaviest visual weight — slightly bigger ticker */
.tt-rank-1 .tt-ticker { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   P54b — VIRAL RIGHT NOW additions
   ─────────────────────────────────────────────────────────────
   Adds a HOT pip, age column, and a mini engagement bar to each
   row. Existing .viral-row layout absorbs them via flexbox.
   ═══════════════════════════════════════════════════════════════ */

/* Wrap existing headline text in a span so HOT pip + delta sit
   inline without disrupting line-clamp behavior. */
.viral-headline-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.viral-headline {
  /* Override the previous line-clamp on the headline itself —
     the inner span now handles clamping so the HOT pip + delta
     can stay on the first visual line. */
  display: flex;
  flex-wrap: wrap;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.viral-hot-pip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 196, 114, .12);
  color: rgb(20, 230, 140);
  border: 1px solid rgba(0, 196, 114, .28);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

.viral-meta-age {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--text-4);
  flex-shrink: 0;
}

/* Mini engagement bar — sits below the meta row. Proportional to
   the top viral post's engagement; rank-aware coloring. */
.viral-bar {
  margin-top: 6px;
  height: 3px;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.viral-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.viral-rank-1 .viral-bar-fill { box-shadow: 0 0 6px rgba(0, 196, 114, .35); }
.viral-rank-2 .viral-bar-fill { opacity: .82; }
.viral-rank-3 .viral-bar-fill { opacity: .68; }
.viral-rank-4 .viral-bar-fill { opacity: .45; }

/* Top row gets visual weight — slightly heavier headline */
.viral-rank-1 .viral-headline-text {
  color: var(--text-0);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   P65.234 — Stamina-alive viral row treatment.
   When a post is currently alive (someone's actively spending stamina
   to keep it from aging), its Viral Right Now row gets:
     • A faint green left rail (3px, glowing)
     • A small pulsing ⚡ pip next to the headline
     • The bar-fill takes the energy-green palette (overrides accent)
   No text, no duration callout — purely visual signal.
   ═══════════════════════════════════════════════════════════════ */
.viral-row-alive {
  position: relative;
  background: linear-gradient(90deg,
    rgba(52, 255, 175, .07) 0%,
    rgba(52, 255, 175, .02) 35%,
    transparent 100%);
}
.viral-row-alive::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #34ffaf 0%, #00d484 100%);
  box-shadow: 0 0 8px rgba(52, 255, 175, .55);
  animation: viralAliveRail 2.4s ease-in-out infinite;
}
.viral-row-alive .viral-bar-fill {
  background: linear-gradient(90deg, #00d484 0%, #34ffaf 100%);
  box-shadow: 0 0 6px rgba(52, 255, 175, .45);
}
.viral-alive-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(52, 255, 175, .14);
  border: 1px solid rgba(52, 255, 175, .35);
  color: #34ffaf;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  animation: viralAlivePulse 1.6s ease-in-out infinite;
}
.viral-alive-pip svg {
  filter: drop-shadow(0 0 3px rgba(52, 255, 175, .6));
}
@keyframes viralAliveRail {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1;   }
}
@keyframes viralAlivePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 255, 175, .45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(52, 255, 175, 0);
    transform: scale(1.06);
  }
}


/* ═══════════════════════════════════════════════════════════════
   NOX PRO SUBSCRIPTION (P62)
   Single-tier, monthly OR yearly. Hero on top, plan toggle, perks
   card, CTA. Active-subscriber view replaces hero/toggle with a
   status card.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   P65.333 — Get Verified page REDESIGN.  Pro / institutional / serious.
   Numbered sections drive the flow (billing → benefits → payment →
   alternative).  Generous whitespace, refined typography, calm accents.
   Active-subscriber view still uses the older .pro-status-card path.
   ─────────────────────────────────────────────────────────────────── */

.pro-page-v2 {
  max-width: 720px;
  margin: 0 auto;
  padding: 4px 0 56px;
}

/* Trust strip — sits above the hero, frames the page as a financial
   membership product instead of a casual upgrade pitch. */
.pro-trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 196, 114, 0.14);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.05), rgba(0, 196, 114, 0.012));
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
.pro-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.30);
  color: var(--accent);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-trust-sep { color: var(--text-4); }
.pro-trust-meta { color: var(--text-3); }

/* P65.335 — Animated "Get it for free" CTA on the right of the trust
   strip.  Combines three subtle effects so the eye catches it without
   feeling spammy:
     1. A slow background shimmer (gradient slides left to right)
     2. A gentle outer-glow pulse synced to ~2.4s
     3. A down-arrow that bobs to hint "scroll to find it"
   On hover it scales up slightly; on click the JS smooth-scrolls to
   the free-month card and triggers a one-time highlight on it. */
.pro-trust-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 10px;
  background: linear-gradient(100deg,
    rgba(0, 196, 114, 0.10) 0%,
    rgba(0, 196, 114, 0.30) 40%,
    rgba(0, 196, 114, 0.10) 80%);
  background-size: 220% 100%;
  border: 1px solid rgba(0, 196, 114, 0.45);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  animation:
    proTrustCtaShimmer 3.8s linear infinite,
    proTrustCtaPulse   2.4s ease-in-out infinite;
  transition: transform 120ms ease, filter 120ms ease;
}
.pro-trust-cta:hover {
  transform: scale(1.045);
  filter: brightness(1.08);
}
.pro-trust-cta:active {
  transform: scale(.97);
}
.pro-trust-cta svg {
  flex-shrink: 0;
}
.pro-trust-cta-arrow {
  display: inline-flex;
  align-items: center;
  animation: proTrustCtaBob 1.4s ease-in-out infinite;
}

@keyframes proTrustCtaShimmer {
  0%   { background-position: 220% 50%; }
  100% { background-position: -220% 50%; }
}
@keyframes proTrustCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 114, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.18),
                         0 0 18px 2px rgba(0, 196, 114, 0.30); }
}
@keyframes proTrustCtaBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* Highlight applied once to .pro-free-card when scrollToProFreeMonth
   lands.  Two-second ring-pulse + faint scale lift, then it cleans
   itself up.  Triggered manually by JS (class added, then removed
   after 2.05s) so the keyframe only ever plays once per device. */
.pro-free-card-highlight {
  animation: proFreeCardHighlight 2s cubic-bezier(.34, 1.12, .64, 1) both;
  border-color: var(--accent) !important;
  position: relative;
  z-index: 1;
}
@keyframes proFreeCardHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0),
                0 0 0 0 rgba(0, 196, 114, 0);
    transform: scale(1);
  }
  20% {
    box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.40),
                0 0 32px 8px rgba(0, 196, 114, 0.30);
    transform: scale(1.015);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(0, 196, 114, 0.28),
                0 0 48px 14px rgba(0, 196, 114, 0.22);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0),
                0 0 0 0 rgba(0, 196, 114, 0);
    transform: scale(1);
  }
}

/* Respect prefers-reduced-motion — kill the trust-strip CTA pulse
   and the card highlight animation but keep functionality intact. */
@media (prefers-reduced-motion: reduce) {
  .pro-trust-cta,
  .pro-trust-cta-arrow,
  .pro-free-card-highlight {
    animation: none !important;
  }
}

/* Hero v2 — refined typography hierarchy.  Eyebrow → H1 → subtitle. */
.pro-hero-v2 {
  text-align: left;
  margin: 4px 4px 28px;
  padding: 0 2px;
}
.pro-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pro-hero-title-v2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-0);
  margin: 0 0 10px;
}
.pro-hero-sub-v2 {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0;
}

/* Section frame — numbered head with title + sub. */
.pro-section {
  margin: 0 0 36px;
  padding: 0;
}
.pro-section-alt { margin-bottom: 0; }
.pro-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 4px 14px;
}
.pro-section-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 196, 114, 0.28);
  background: rgba(0, 196, 114, 0.06);
  color: var(--accent);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.04em;
}
.pro-section-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-0);
  line-height: 1.3;
}
.pro-section-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}

/* Pricing grid — two cards side-by-side, yearly marked as best value. */
.pro-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pro-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.pro-price-card:hover {
  border-color: rgba(0, 196, 114, 0.30);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.03), rgba(0, 196, 114, 0.005));
}
.pro-price-card.is-active {
  border-color: rgba(0, 196, 114, 0.55);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.07), rgba(0, 196, 114, 0.015));
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35), 0 8px 24px rgba(0, 196, 114, 0.06);
}
.pro-price-card-best.is-active {
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.55), 0 10px 28px rgba(0, 196, 114, 0.10);
}
.pro-price-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.pro-price-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.pro-price-card-tag {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-price-card-tag-flex {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pro-price-card-tag-best {
  background: rgba(247, 217, 121, 0.12);
  color: var(--gold);
  border: 1px solid rgba(247, 217, 121, 0.30);
}
.pro-price-card-amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-0);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pro-price-card-currency {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  margin-right: 2px;
  vertical-align: 9px;
}
.pro-price-card-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 4px;
  letter-spacing: 0;
}
.pro-price-card-fine {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}

/* Benefits grid — 2-column at desktop, single column on mobile. */
.pro-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pro-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 140ms ease, background 140ms ease, transform 160ms ease;
  position: relative;
  overflow: hidden;
}
.pro-benefit-card:hover {
  border-color: rgba(0, 196, 114, 0.22);
}

/* P65.364 — Hero variant for the marquee multiplier perks (2× Cred,
   Vote weight ×2). Subtle accent border + radial glow behind the
   icon so these cards visually shout "growth" without screaming. */
.pro-benefit-card.is-hero {
  border-color: rgba(0, 196, 114, 0.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 196, 114, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0, 196, 114, 0.05), rgba(0, 196, 114, 0.01)),
    var(--bg-2);
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.18), 0 6px 18px rgba(0, 196, 114, 0.06);
}
.pro-benefit-card.is-hero:hover {
  border-color: rgba(0, 196, 114, 0.55);
  transform: translateY(-1px);
}
.pro-benefit-card.is-hero .pro-benefit-icon {
  background: rgba(0, 196, 114, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35), 0 0 14px rgba(0, 196, 114, 0.22);
}
/* Inline <strong> in the hero card desc — picks up the accent
   color so "double cred" pops without breaking the body text. */
.pro-benefit-card.is-hero .pro-benefit-desc strong {
  color: var(--accent);
  font-weight: 800;
}
.pro-benefit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 196, 114, 0.08);
  color: var(--accent);
  border-radius: 8px;
}
.pro-benefit-text { min-width: 0; }
.pro-benefit-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  line-height: 1.3;
}
.pro-benefit-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.363 — "What you get" benefits grid: show 4 above the fold,
   tuck the rest behind a "See more" toggle that pulses gently to
   advertise itself.
   ═══════════════════════════════════════════════════════════════════ */

/* Hidden-cards container — uses grid-template-rows: 0fr ↔ 1fr so the
   transition animates smoothly in BOTH directions. The inner wrapper
   needs min-height:0 + overflow:hidden so the children can be clipped
   while the row animates. Modern browsers (Chrome 117+, FF 121+,
   Safari 17+) animate this natively; older browsers snap. */
.pro-benefits-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity         260ms ease,
              margin-top      260ms ease;
  opacity: 0;
  margin-top: 0;
}
.pro-benefits-extra-inner {
  overflow: hidden;
  min-height: 0;
}
.pro-benefits-extra.is-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}
/* When expanded, the extra cards' grid uses the same layout as the
   main grid. The .pro-benefits-grid-extra modifier is mostly for
   future tweaks; today it inherits everything. */
.pro-benefits-grid-extra { /* placeholder for chain-specific overrides */ }

/* "See more / Hide" toggle button — floats centered below the grid
   with a subtle accent pulse so the eye catches it. */
.pro-benefits-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px auto 0;
  padding: 9px 16px 9px 14px;
  background: linear-gradient(135deg, rgba(0,196,114,.10), rgba(0,196,114,.04));
  border: 1px solid rgba(0,196,114,.32);
  border-radius: 999px;
  color: var(--accent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  /* Display:block won't center an inline-flex without help — use a
     parent .pro-benefits-toggle-row, or float via margin auto + a
     flex parent. We expose `width:fit-content; display:flex` via a
     trick that works at any parent layout: align self center. */
  align-self: center;
  width: fit-content;
  /* Render after the grid as a block element by toggling display on
     parent? Simplest: set display flex and let the parent flow it
     onto its own line via a wrapping pseudo-flex container. */
  transition: background 200ms ease, border-color 200ms ease,
              transform 160ms ease, box-shadow 200ms ease;
}
/* Force a line break + center the toggle. Since the parent isn't a
   flex container, we make the button take a full-width line via the
   following display trick: an empty row above. Actually simpler — set
   display block + a flex inner. Switch the button to:
       display: flex; margin: 14px auto 0; */
.pro-benefits-toggle {
  display: flex;
}
.pro-benefits-toggle:hover {
  background: linear-gradient(135deg, rgba(0,196,114,.16), rgba(0,196,114,.06));
  border-color: rgba(0,196,114,.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,196,114,.18);
}
.pro-benefits-toggle:active { transform: translateY(0); }
/* Soft pulse glow — animates the box-shadow gently so the button
   "breathes" and catches the eye without being noisy. Pauses on
   hover so the hover state isn't fighting the pulse. */
.pro-benefits-toggle:not(.is-expanded) {
  animation: proBenefitsPulse 2.4s ease-in-out infinite;
}
.pro-benefits-toggle:not(.is-expanded):hover {
  animation: none;
}
@keyframes proBenefitsPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 196, 114, 0);
    border-color: rgba(0, 196, 114, .32);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(0, 196, 114, 0.08), 0 4px 14px rgba(0, 196, 114, 0.12);
    border-color: rgba(0, 196, 114, .55);
  }
}

/* Inner sparkle — a tiny glow dot that drifts left→right on a slow
   shimmer cycle to add "active" energy when the button is collapsed.
   Disappears in the expanded state so the user knows they've "found"
   the rest. */
.pro-benefits-toggle-spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,170,1) 0%, rgba(0,196,114,.55) 60%, transparent 100%);
  box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
  flex-shrink: 0;
  animation: proBenefitsSparkle 1.8s ease-in-out infinite;
}
.pro-benefits-toggle.is-expanded .pro-benefits-toggle-spark {
  animation: none;
  opacity: 0.4;
}
@keyframes proBenefitsSparkle {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.pro-benefits-toggle-label {
  letter-spacing: 0.08em;
}

/* Chevron — rotates 180° when expanded (so "See more ↓" becomes
   "Hide ↑"). 340ms ease matching the grid-row transition. */
.pro-benefits-toggle-arrow {
  flex-shrink: 0;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pro-benefits-toggle.is-expanded .pro-benefits-toggle-arrow {
  transform: rotate(180deg);
}

/* Reduced motion respect — disable the pulse + sparkle for users
   who've asked the OS to minimize motion. The toggle still works
   functionally. */
@media (prefers-reduced-motion: reduce) {
  .pro-benefits-toggle:not(.is-expanded) { animation: none; }
  .pro-benefits-toggle-spark { animation: none; }
  .pro-benefits-extra {
    transition: opacity 200ms ease, margin-top 200ms ease;
  }
}

/* Payment card — distinct surface that reads as a financial widget. */
.pro-pay-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 18px;
}
.pro-pay-quote-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 0;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 196, 114, 0.14);
  border-radius: 10px;
}
.pro-pay-quote-side { padding: 0 10px; }
.pro-pay-quote-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 auto;
}
.pro-pay-quote-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
}
.pro-pay-quote-usd {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pro-pay-quote-cycle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 3px;
  letter-spacing: 0;
}
.pro-pay-quote-crypto {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.pro-pay-quote-symbol {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.pro-pay-quote-rate {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
}

.pro-subscribe-btn-v2 {
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* P65.351 — coin glyph that prefixes the Subscribe CTA label. Sized
   to sit flush with the button text on the baseline. */
.pro-pay-cta-glyph {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.pro-pay-cta-glyph svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.pro-pay-trust-list {
  list-style: none;
  margin: 14px 4px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pro-pay-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.55;
}
.pro-pay-trust-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.354 — Wallet-install prompt
   ─────────────────────────────────────────────────────────────────
   Opens when the user tries to pay on a chain and no compatible
   wallet is detected. Replaces the unhelpful toast with a curated
   list of recommended wallets + direct install links.
   ═══════════════════════════════════════════════════════════════════ */
.wallet-install-prompt {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.wallet-install-prompt.is-open {
  opacity: 1;
  pointer-events: auto;
}
.wallet-install-prompt.is-closing {
  opacity: 0;
}
.wallet-install-prompt .wip-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wallet-install-prompt .wip-card {
  position: relative;
  width: clamp(320px, 92vw, 480px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: translateY(8px) scale(.99);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.wallet-install-prompt.is-open .wip-card {
  transform: translateY(0) scale(1);
}
.wip-header { margin-bottom: 14px; }
.wip-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.wip-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.wip-intro {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 14px;
}
.wip-wallets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.wip-wallet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-1);
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.wip-wallet-row:hover {
  background: var(--bg-3);
  border-color: var(--border-hover);
  transform: translateX(2px);
}
.wip-wallet-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-0);
  flex: 0 0 auto;
}
.wip-wallet-note {
  font-size: 11px;
  color: var(--text-4);
  flex: 1 1 auto;
  margin-left: 4px;
}
.wip-wallet-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  flex: 0 0 auto;
}
.wip-hint {
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.5;
  padding: 9px 11px;
  background: rgba(0, 196, 114, 0.06);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 14px;
}
.wip-actions {
  display: flex;
  justify-content: flex-end;
}
.wip-cancel {
  font-size: 13px;
  padding: 8px 16px;
}

/* Section 04 (free month) — keep the inner card chrome of the existing
   pro-free-* styles; the section wrapper just adds the numbered head. */

@media (max-width: 640px) {
  .pro-pricing-grid { grid-template-columns: 1fr; }
  .pro-benefits-grid { grid-template-columns: 1fr; }
  .pro-pay-quote-row {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .pro-pay-quote-divider {
    width: 100%;
    height: 1px;
  }
  .pro-hero-title-v2 { font-size: 26px; }
}

.pro-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* Hero */
.pro-hero {
  text-align: center;
  padding: 24px 16px 28px;
  margin-bottom: 18px;
  background: radial-gradient(ellipse at top,
    rgba(0, 196, 114, 0.08) 0%,
    transparent 70%);
  border-radius: 14px;
}
.pro-hero-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.22);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.pro-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.pro-hero-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
}

/* Plan toggle (monthly | yearly) */
.pro-plan-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.pro-plan-pill {
  position: relative;
  display: block;
  padding: 18px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  font-family: inherit;
}
.pro-plan-pill:hover {
  border-color: var(--text-4);
  background: rgba(255, 255, 255, 0.02);
}
.pro-plan-pill-active {
  border-color: var(--accent);
  background: rgba(0, 196, 114, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.10);
}
.pro-plan-pill-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pro-plan-pill-active .pro-plan-pill-name {
  color: var(--accent);
}
.pro-plan-pill-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-family: var(--mono);
}
.pro-plan-pill-cycle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}
.pro-plan-pill-implied {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.pro-plan-save-tag {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--gold);
  color: #000;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 3px 7px;
  border-radius: 4px;
}

/* Perks card */
.pro-perks-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.pro-perks-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pro-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pro-perk-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.pro-perk-glyph {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.22);
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--mono);
}
.pro-perk-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 2px;
}
.pro-perk-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
}

/* Subscribe CTA */
.pro-cta-row {
  text-align: center;
}
.pro-subscribe-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 14px 26px;
  margin-bottom: 10px;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pro-cta-note {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
  max-width: 460px;
  margin: 0 auto;
}

/* P65.52 — payment method picker (SOL vs NMX) */
.pro-pay-methods {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  padding: 5px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.pro-pay-method {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-3);
  font: inherit;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pro-pay-method:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}
.pro-pay-method.is-active {
  background: rgba(0, 196, 114, 0.10);
  border-color: rgba(0, 196, 114, 0.32);
  color: var(--text-0);
}
.pro-pay-method-glyph {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  flex-shrink: 0;
}
.pro-pay-method.is-active .pro-pay-glyph-sol {
  background: linear-gradient(135deg, #14F195, #9945FF);
  border-color: transparent;
  color: #fff;
}
.pro-pay-method.is-active .pro-pay-glyph-nmx {
  background: linear-gradient(135deg, rgba(0, 196, 114, 0.7), rgba(0, 196, 114, 0.3));
  border-color: transparent;
  color: #fff;
}
.pro-pay-method-text {
  display: flex; flex-direction: column; gap: 1px;
  align-items: flex-start;
}
.pro-pay-method-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pro-pay-method-sub {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.pro-pay-method.is-active .pro-pay-method-sub { color: var(--text-3); }

/* ─── P65.334 — Chain-grouped payment grid ───────────────────────
   Two chain blocks (Solana, BNB Chain) each containing 3 token tiles.
   Tiles with status:'soon' render greyed but visible; tiles with
   status:'live' read normal.  Click on a "soon" tile toasts an
   advisory; only "live" tiles change the active selection. */

.pro-pay-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pro-pay-chain-block { }

.pro-pay-chain-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pro-pay-chain-name {
  font-weight: 700;
  color: var(--text-1);
}
.pro-pay-chain-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.pro-pay-chain-dot-live {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 196, 114, 0.6);
}
.pro-pay-chain-dot-soon {
  background: rgba(255, 255, 255, 0.22);
}
.pro-pay-chain-status {
  font-size: 10px;
  color: var(--text-4);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.356 — Two-step picker: chain tabs + filtered token row
   ─────────────────────────────────────────────────────────────────
   Step 1 — three big chain tabs (Solana / BNB Chain / TRON). Tabs
   sit on a single row, each tab is a self-contained card with a
   logo glyph + chain name + status pill. Active tab has accent
   border + glow.
   Step 2 — three token tiles for the active chain (native / USDC
   / USDT). Same .pro-pay-tile component as before, just three
   instead of nine.
   ═══════════════════════════════════════════════════════════════════ */
.pro-pay-chain-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.pro-pay-chain-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
  position: relative;
  min-height: 52px;
}
.pro-pay-chain-tab:hover:not(.is-soon):not(.is-active) {
  border-color: rgba(0, 196, 114, 0.32);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.04), rgba(0, 196, 114, 0.01));
  transform: translateY(-1px);
}
.pro-pay-chain-tab.is-active {
  border-color: rgba(0, 196, 114, 0.6);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.10), rgba(0, 196, 114, 0.03));
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.45), 0 6px 18px rgba(0, 196, 114, 0.08);
}
.pro-pay-chain-tab.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.pro-pay-chain-tab-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 196, 114, 0.10);
  color: var(--accent);
  flex-shrink: 0;
}
.pro-pay-chain-tab.is-active .pro-pay-chain-tab-glyph {
  background: rgba(0, 196, 114, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35);
}
.pro-pay-chain-tab-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pro-pay-chain-tab-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.005em;
}
.pro-pay-chain-tab-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-4);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pro-pay-chain-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.pro-pay-chain-tab-dot-live {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 196, 114, 0.6);
}
.pro-pay-chain-tab-dot-soon {
  background: rgba(255, 255, 255, 0.22);
}

/* Step-2 token row — same .pro-pay-tile component, three tiles in
   a single row beneath the active chain tab. */
.pro-pay-token-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
  animation: proPayTokenRowIn .26s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes proPayTokenRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pro-pay-tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.pro-pay-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 100ms ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
  position: relative;
  min-height: 52px;
}
.pro-pay-tile:hover:not(.is-soon) {
  border-color: rgba(0, 196, 114, 0.32);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.04), rgba(0, 196, 114, 0.01));
}
.pro-pay-tile.is-active {
  border-color: rgba(0, 196, 114, 0.55);
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.08), rgba(0, 196, 114, 0.02));
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35), 0 4px 14px rgba(0, 196, 114, 0.06);
}
.pro-pay-tile.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.pro-pay-tile.is-soon:hover {
  background: var(--bg-3);
  border-color: var(--border);
}

.pro-pay-tile-glyph {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  color: var(--text-1);
}
.pro-pay-tile.is-active .pro-pay-tile-glyph {
  background: rgba(0, 196, 114, 0.12);
  color: var(--accent);
}

.pro-pay-tile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.pro-pay-tile-symbol {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.pro-pay-tile-wallet {
  font-size: 10.5px;
  color: var(--text-4);
  margin-top: 1px;
  letter-spacing: 0;
  line-height: 1.3;
}

.pro-pay-tile-status {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-pay-tile-status-live {
  background: rgba(0, 196, 114, 0.14);
  color: var(--accent);
  border: 1px solid rgba(0, 196, 114, 0.30);
}
.pro-pay-tile-status-soon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-4);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.pro-pay-more-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.pro-pay-more-soon svg {
  flex-shrink: 0;
  color: var(--text-4);
}

@media (max-width: 640px) {
  .pro-pay-tile-row { grid-template-columns: 1fr; }
  .pro-pay-tile { min-height: 48px; }
  .pro-pay-token-row { grid-template-columns: 1fr; }
  /* On narrow screens the three chain tabs stack into a column too —
     each tab keeps its glyph + name + status but uses full width. */
  .pro-pay-chain-tabs { grid-template-columns: 1fr; gap: 6px; }
  .pro-pay-chain-tab { min-height: 54px; padding: 11px 13px; }
  .pro-pay-chain-tab-glyph { width: 28px; height: 28px; }
}

/* Live SOL quote line shown once a method is selected */
.pro-pay-quote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--mono, ui-monospace);
}
.pro-pay-quote-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  font-weight: 700;
}
.pro-pay-quote-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.pro-pay-quote-meta {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.02em;
}

/* P65.71 — Grace-period banner.
   Shown above the status card when the user's subscription has
   expired but they're inside the 3-day grace window. Pulses gently
   to demand attention without screaming. Amber color signals "warning,
   action needed" — distinct from the green of an active subscription
   and the red of a hard error. */
.pro-grace-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.10) 0%,
    rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.42);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.08);
  position: relative;
  overflow: hidden;
  animation: proGracePulse 3.6s ease-in-out infinite;
}
@keyframes proGracePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.08); }
  50%      { box-shadow: 0 0 36px rgba(245, 158, 11, 0.18); }
}
.pro-grace-banner-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #f59e0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pro-grace-banner-text { flex: 1; min-width: 0; }
.pro-grace-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 4px;
}
.pro-grace-banner-sub {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.pro-grace-banner-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pro-grace-banner { flex-direction: column; align-items: flex-start; }
  .pro-grace-banner-cta { width: 100%; justify-content: center; }
}

/* Active-subscriber status card */
.pro-status-card {
  background: linear-gradient(135deg,
    rgba(0, 196, 114, 0.06) 0%,
    rgba(0, 196, 114, 0.02) 100%);
  border: 1px solid rgba(0, 196, 114, 0.25);
  border-radius: 14px;
  padding: 20px 22px;
}
.pro-status-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.pro-status-badge {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 50%;
  color: #000;
  flex-shrink: 0;
}
.pro-status-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.pro-status-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.pro-status-perks {
  margin-bottom: 16px;
}
.pro-cancel-btn {
  width: 100%;
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   ANALYTICS (P62) — Pro-gated creator metrics dashboard
   ═══════════════════════════════════════════════════════════════ */

.analytics-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* Locked teaser shown to non-Pro users */
.analytics-locked {
  text-align: center;
  padding: 50px 24px 60px;
  background: radial-gradient(ellipse at top,
    rgba(0, 196, 114, 0.06) 0%,
    transparent 70%);
  border-radius: 16px;
}
.analytics-locked-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--text-4);
  border-radius: 50%;
  color: var(--text-3);
}
.analytics-locked-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.analytics-locked-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 440px;
  margin: 0 auto;
}
.analytics-locked-preview {
  margin-top: 26px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.analytics-locked-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
}
.analytics-locked-blur {
  color: var(--text-4);
  letter-spacing: 0.02em;
  filter: blur(0.4px);
  opacity: 0.6;
}

/* Subscriber view */
.analytics-head {
  margin-bottom: 18px;
}
.analytics-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.analytics-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
}
.analytics-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}
.analytics-pro-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.25);
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
}

/* 4-card stat grid */
.analytics-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 700px) {
  .analytics-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.analytics-stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 12px;
}
.analytics-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.analytics-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.analytics-stat-sub {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
}
.analytics-up    { color: var(--accent); }
.analytics-down  { color: var(--red, #ef4444); }

/* Section headers */
.analytics-section {
  margin-bottom: 22px;
}
.analytics-section-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Engagement breakdown */
.analytics-breakdown {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.analytics-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.analytics-breakdown-row:last-child { border-bottom: 0; }
.analytics-breakdown-label { color: var(--text-2); }
.analytics-breakdown-val {
  color: var(--text-0);
  font-weight: 700;
  font-family: var(--mono);
}
.analytics-breakdown-pts {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
}

/* Top post */
.analytics-top-post {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.analytics-top-post:hover { border-color: var(--text-4); }
.analytics-top-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 6px;
  line-height: 1.4;
}
.analytics-top-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
}
.analytics-top-eng {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

/* Recent posts table */
.analytics-table {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.analytics-table-head,
.analytics-table-row {
  display: grid;
  grid-template-columns: 1fr 50px 60px 60px 70px;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.analytics-table-head {
  background: var(--bg-2);
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analytics-table-row {
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.10s ease;
}
.analytics-table-row:hover { background: var(--bg-2); }
.analytics-table-row:last-child { border-bottom: 0; }
.analytics-tcol-num {
  text-align: right;
  font-family: var(--mono);
}
.analytics-tcol-title {
  color: var(--text-1);
  /* P65.120 — truncate long titles with ellipsis instead of letting
     them push the numeric columns off-screen. CSS grid `1fr` columns
     default to `min-width: auto` (= intrinsic content width), so an
     unbreakable 40-char Solana address forces the column wider than
     its 1fr share. min-width: 0 lets the column shrink, then
     overflow + text-overflow + white-space do the ellipsis. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-tcol-strong {
  color: var(--accent);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   PRO FREE MONTH (P63) — X follower verification path
   ═══════════════════════════════════════════════════════════════ */

/* "OR" divider between the paid CTA and the free-month section.
   Subtle horizontal rule with the word OR centered on it. */
.pro-free-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
  color: var(--text-4);
}
.pro-free-divider::before,
.pro-free-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.pro-free-divider-text {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--text-4);
}

/* Free-month application card */
.pro-free-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.pro-free-head {
  margin-bottom: 14px;
}
.pro-free-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.pro-free-x-glyph {
  color: var(--text-1);
  flex-shrink: 0;
}
.pro-free-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.pro-free-sub {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.pro-free-btn {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
}
.pro-free-tiny-note {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 8px;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Status pills */
.pro-free-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.pro-free-status-pending {
  background: rgba(191, 162, 78, 0.06);
  border: 1px solid rgba(191, 162, 78, 0.25);
  color: var(--gold);
}
.pro-free-status-rejected {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--red, #ef4444);
}
.pro-free-status-approved {
  background: rgba(0, 196, 114, 0.06);
  border: 1px solid rgba(0, 196, 114, 0.25);
  color: var(--accent);
}
.pro-free-status-handle {
  margin-left: auto;
  color: var(--text-4);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.pro-free-rejected-note {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.03);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-2);
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PRO FREE MONTH MODAL — three-step layout
   ═══════════════════════════════════════════════════════════════ */

.pf-step {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pf-step:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* P65.339 — Attract pulse on the "Open in X" button.  Triggered by
   an IntersectionObserver the first time the button scrolls into the
   modal-body viewport.  1.5s single-shot: green ring expands outward
   while the button lifts a hair, then settles back.  After the class
   is removed (1.55s after add), the button returns to its quiet
   secondary-button look.  prefers-reduced-motion blocks it. */
.pf-open-x-attract {
  position: relative;
  animation: pfOpenInXAttract 1.5s cubic-bezier(.34, 1.12, .64, 1) both;
  border-color: rgba(0, 196, 114, 0.55) !important;
}
@keyframes pfOpenInXAttract {
  0% {
    box-shadow:
      0 0 0 0 rgba(0, 196, 114, 0),
      0 0 0 0 rgba(0, 196, 114, 0);
    transform: scale(1);
  }
  18% {
    box-shadow:
      0 0 0 4px rgba(0, 196, 114, 0.45),
      0 0 22px 6px rgba(0, 196, 114, 0.35);
    transform: scale(1.04);
  }
  55% {
    box-shadow:
      0 0 0 6px rgba(0, 196, 114, 0.28),
      0 0 34px 12px rgba(0, 196, 114, 0.22);
    transform: scale(1.02);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(0, 196, 114, 0),
      0 0 0 0 rgba(0, 196, 114, 0);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-open-x-attract { animation: none !important; }
}
.pf-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.pf-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
}
.pf-step-desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.38 — GOLD CALLER TIER
   ─────────────────────────────────────────────────────────────────
   When a user crosses 50,000 lifetime caller-reputation points, their
   name everywhere the platform renders one (post bylines, profile
   header, comment bylines, sidebar leaderboards, mentions, search
   results) gets the .name-gold treatment: a slow-shimmer gold-leaf
   gradient + a subtle glow on hover.

   Legendary (100k+) layers an extra outer ring + faster shimmer to
   distinguish it from gold without breaking the visual language.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gold-1: #fff3ad;   /* highlight */
  --gold-2: #f7d979;   /* mid       */
  --gold-3: #d4a72c;   /* shadow    */
  --gold-4: #8a691a;   /* deep edge */
}

@keyframes nameGoldShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes nameGoldPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 6px rgba(247, 217, 121, 0.55)); }
}

.name-gold,
.name-legendary {
  background: linear-gradient(
    100deg,
    var(--gold-3) 0%,
    var(--gold-2) 30%,
    var(--gold-1) 50%,
    var(--gold-2) 70%,
    var(--gold-3) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  animation: nameGoldShimmer 6s linear infinite;
  text-shadow: 0 0 0.5px rgba(247, 217, 121, 0.18);
  /* Side-by-side glow with the badges that follow the username — uses
     a thin filter shadow rather than text-shadow because text-shadow
     would print on top of the gradient fill. */
}
.name-gold:hover {
  animation: nameGoldShimmer 3s linear infinite, nameGoldPulse 2.4s ease-in-out infinite;
}

/* Legendary — same gradient, faster shimmer, persistent glow halo. */
.name-legendary {
  animation: nameGoldShimmer 4s linear infinite, nameGoldPulse 3s ease-in-out infinite;
  letter-spacing: 0.01em;
}

/* Crown glyph appended after the displayName for gold/legendary. The
   ::after pseudo cant inherit -webkit-text-fill-color: transparent
   from the gradient parent without becoming invisible, so we render
   it as a separate gold-stamped char. */
.name-gold::after,
.name-legendary::after {
  content: ' ★';
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 0.85em;
  margin-left: 2px;
  filter: drop-shadow(0 0 4px rgba(247, 217, 121, 0.45));
}
.name-legendary::after { content: ' ✪'; font-size: 0.9em; }

/* Hide the crown when the name is rendered in tight UI surfaces that
   already render their own tier badge (avoids double-stamping). */
.profile-cover-name.name-gold::after,
.profile-cover-name.name-legendary::after { content: ''; margin: 0; }

/* ─── Profile-page gold decoration ─────────────────────────────── */
/* When the viewed profile owner is gold-tier, the profile cover gets
   a thin gold accent at the bottom edge + the avatar ring goes gold.
   Subtle — we never want to look like a costume shop. */
.profile-cover.profile-cover-gold::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-3) 18%,
    var(--gold-1) 50%,
    var(--gold-3) 82%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(247, 217, 121, 0.5));
}

.profile-avatar-gold-ring {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 4px var(--gold-3),
    0 0 24px rgba(247, 217, 121, 0.4);
  border-radius: 50%;
  animation: nameGoldPulse 4s ease-in-out infinite;
}

/* ─── Caller-tier pill (rendered in profile calls section) ──────── */
.caller-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-2);
}
.caller-tier-pill .ctp-mark { font-size: 13px; line-height: 1; }
.caller-tier-pill[data-tier="rookie"]       { color: #9ad27a; border-color: rgba(154, 210, 122, 0.25); background: rgba(154, 210, 122, 0.08); }
.caller-tier-pill[data-tier="active"]       { color: #7fc8a9; border-color: rgba(127, 200, 169, 0.25); background: rgba(127, 200, 169, 0.08); }
.caller-tier-pill[data-tier="sharpshooter"] { color: #67b9ff; border-color: rgba(103, 185, 255, 0.25); background: rgba(103, 185, 255, 0.08); }
.caller-tier-pill[data-tier="veteran"]      { color: #a78bfa; border-color: rgba(167, 139, 250, 0.28); background: rgba(167, 139, 250, 0.08); }
.caller-tier-pill[data-tier="elite"]        { color: #f59ec2; border-color: rgba(245, 158, 194, 0.28); background: rgba(245, 158, 194, 0.08); }
.caller-tier-pill[data-tier="gold"],
.caller-tier-pill[data-tier="legendary"] {
  color: var(--gold-2);
  border-color: rgba(247, 217, 121, 0.4);
  background: linear-gradient(110deg, rgba(247, 217, 121, 0.08), rgba(212, 167, 44, 0.18) 50%, rgba(247, 217, 121, 0.08));
  background-size: 200% 100%;
  animation: nameGoldShimmer 6s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(247, 217, 121, 0.15);
}

/* ─── Lifetime-score panel (profile calls section) ────────────── */
/* P65.44 V2 — redesigned for impact:
     • Hero score is the focal point (32px mono, gradient on gold)
     • "Pending today" pill so users see live earned points before
       the nightly snapshot rolls them in
     • Rich empty state with the actual point rewards listed out
     • Cleaner ladder + next-tier badge on the right
   The .caller-rep-panel container stays generic; everything else
   builds on it via .caller-rep-hero / .caller-rep-empty variants. */

.caller-rep-panel {
  position: relative;
  padding: 18px 20px;
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0, 196, 114, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.caller-rep-panel.is-gold {
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(247, 217, 121, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border-color: rgba(247, 217, 121, 0.28);
  box-shadow: inset 0 0 0 1px rgba(247, 217, 121, 0.08), 0 8px 32px rgba(247, 217, 121, 0.05);
}
.caller-rep-panel.is-gold::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(247, 217, 121, 0) 0%,
    rgba(247, 217, 121, 0.4) 30%,
    rgba(255, 243, 173, 0.7) 50%,
    rgba(247, 217, 121, 0.4) 70%,
    rgba(247, 217, 121, 0) 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: nameGoldShimmer 5s linear infinite;
}

/* ─── Hero (current state, score > 0 OR pending > 0) ─────────── */
.caller-rep-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.caller-rep-hero-left { min-width: 0; flex: 1; }

.caller-rep-hero-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.caller-rep-hero-tier-mark {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.caller-rep-hero-tier {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.caller-rep-panel.is-gold .caller-rep-hero-tier {
  color: var(--gold-2);
}
.caller-rep-panel.is-gold .caller-rep-hero-tier-mark {
  background: radial-gradient(120% 120% at 30% 20%, var(--gold-1), var(--gold-3) 75%);
  border-color: rgba(247, 217, 121, 0.5);
  color: #1a1304;
}

.caller-rep-streak {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  font-family: var(--mono, ui-monospace);
  color: var(--text-3);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.22);
}
.caller-rep-streak strong { color: #fb923c; font-weight: 700; }
.caller-rep-streak .crs-flame { font-size: 11px; line-height: 1; }

.caller-rep-hero-score-wrap {
  display: flex; align-items: baseline; gap: 6px;
  line-height: 1;
}
.caller-rep-hero-score {
  font-family: var(--mono, ui-monospace);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-0);
}
.caller-rep-panel.is-gold .caller-rep-hero-score {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(247, 217, 121, 0.25));
}
.caller-rep-hero-units {
  font-size: 12px;
  color: var(--text-4);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "+N pending today" pill — pulses softly until snapshot rolls. */
@keyframes caller-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 114, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 196, 114, 0.10); }
}
.caller-rep-pending {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: rgba(0, 196, 114, 0.08);
  border: 1px solid rgba(0, 196, 114, 0.28);
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--mono, ui-monospace);
  animation: caller-pending-pulse 2.4s ease-in-out infinite;
}
.caller-rep-pending strong {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}
.caller-rep-pending-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0, 196, 114, 0.7);
  flex-shrink: 0;
}
.caller-rep-pending-lbl { color: var(--text-3); }

/* Right-side "next tier" stamp */
.caller-rep-hero-right {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
}
.caller-rep-hero-target {
  font-size: 9.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.caller-rep-hero-target-num {
  font-family: var(--mono, ui-monospace);
  font-size: 14px;
  color: var(--text-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.caller-rep-hero-target-mark {
  font-size: 18px;
  line-height: 1;
  margin-top: 4px;
  opacity: 0.6;
}

/* Progress track */
.caller-rep-progress {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  margin-top: 4px;
}
.caller-rep-progress-fill {
  position: absolute; inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--accent), #5eead4);
  border-radius: inherit;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Pending segment overlay — striped + slightly faded, sits between
   the locked fill and the projected end. Tells the user "this is
   what you'll have once the snapshot lands". */
.caller-rep-progress-pending {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--from, 0%);
  width: calc(var(--to, 0%) - var(--from, 0%));
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 196, 114, 0.55) 0 6px,
    rgba(0, 196, 114, 0.30) 6px 12px
  );
  border-radius: inherit;
  pointer-events: none;
  animation: caller-pending-stripe 1.4s linear infinite;
}
@keyframes caller-pending-stripe {
  0%   { background-position:   0 0; }
  100% { background-position: 24px 0; }
}
.caller-rep-panel.is-gold .caller-rep-progress-fill {
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1) 50%, var(--gold-3));
  background-size: 200% 100%;
  animation: nameGoldShimmer 3s linear infinite;
}

.caller-rep-eta {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 9px;
  line-height: 1.45;
}
.caller-rep-eta b { color: var(--text-1); font-weight: 700; }
.caller-rep-next-label {
  text-transform: capitalize;
  color: var(--text-1);
  font-weight: 700;
}
.caller-rep-panel.is-gold .caller-rep-next-label {
  color: var(--gold-2);
}

/* Stats row */
.caller-rep-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.caller-rep-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 4px;
}
.caller-rep-stat + .caller-rep-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.caller-rep-stat-label {
  font-size: 9.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.caller-rep-stat-value {
  font-size: 14px;
  color: var(--text-1);
  font-family: var(--mono, ui-monospace);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.caller-rep-stat-value.is-positive { color: var(--accent); }

/* Tier ladder — small horizontal track, lights up tiers cleared.
   P65.45 — added padding-bottom: 22px so the absolutely-positioned
   tier labels (Rookie/Active/.../Legendary) sit within the container's
   bounds. .caller-rep-panel has overflow:hidden for the gold shimmer
   pseudo, which was clipping the labels' descenders. */
.caller-rep-ladder {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  padding-bottom: 22px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.caller-rep-ladder-empty { padding-bottom: 22px; }
.caller-rep-rung {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  transition: background 240ms ease, box-shadow 240ms ease;
}
.caller-rep-rung.is-cleared {
  background: linear-gradient(90deg, var(--accent), #5eead4);
}
.caller-rep-rung.is-current {
  background: rgba(0, 196, 114, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.35), 0 0 12px rgba(0, 196, 114, 0.18);
}
.caller-rep-rung[data-tier="gold"].is-cleared,
.caller-rep-rung[data-tier="legendary"].is-cleared {
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
  box-shadow: 0 0 10px rgba(247, 217, 121, 0.45);
}
.caller-rep-rung-label {
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px; color: var(--text-4);
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 700;
}
.caller-rep-rung.is-cleared .caller-rep-rung-label { color: var(--text-2); }
.caller-rep-rung.is-current .caller-rep-rung-label { color: var(--accent); }
.caller-rep-rung[data-tier="gold"].is-cleared .caller-rep-rung-label,
.caller-rep-rung[data-tier="legendary"].is-cleared .caller-rep-rung-label {
  color: var(--gold-2);
}

/* ─── Empty state (score = 0, pending = 0, own profile) ───────── */
.caller-rep-empty {
  position: relative;
  padding: 20px 22px 16px;
}
.caller-rep-empty-glow {
  position: absolute;
  pointer-events: none;
  inset: -30% -10% auto auto;
  width: 70%; height: 200%;
  background: radial-gradient(closest-side, rgba(0, 196, 114, 0.16), transparent 70%);
  filter: blur(28px);
  z-index: 0;
}
.caller-rep-empty-body { position: relative; z-index: 1; }
.caller-rep-empty-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.caller-rep-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.caller-rep-empty-sub {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 540px;
}
.caller-rep-empty-sub b { color: var(--text-1); font-weight: 700; }

.caller-rep-empty-rewards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.caller-rep-empty-reward {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(0, 196, 114, 0.04);
  border: 1px solid rgba(0, 196, 114, 0.14);
}
.caller-rep-empty-reward .crr-pts {
  font-family: var(--mono, ui-monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.caller-rep-empty-reward .crr-lbl {
  font-size: 9.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (max-width: 640px) {
  .caller-rep-empty-rewards { grid-template-columns: repeat(3, 1fr); }
  .caller-rep-stats { grid-template-columns: repeat(2, 1fr); }
  .caller-rep-stat + .caller-rep-stat:nth-child(odd) { border-left: 0; }
  .caller-rep-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .caller-rep-hero-right {
    border-left: 0; padding-left: 0;
    flex-direction: row; gap: 8px;
    align-items: center;
  }
  .caller-rep-hero-target-mark { margin-top: 0; }
  .caller-rep-hero-score { font-size: 30px; }
  .caller-rep-empty-title { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.39 — CALL SETTLEMENT (24h LOCK)
   ─────────────────────────────────────────────────────────────────
   Once a call's 24h evaluation window has elapsed, the live tracker
   on the post becomes a "settled" banner — pro language, locked-in
   numbers, gold corona for hits. In the calls list the OPEN pill is
   replaced with a CLOSED / N× LOCKED status pill.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Calls list: settled row treatment ─────────────────────────── */
.call-row-settled {
  opacity: 0.92;
}
.call-row-settled .call-row-ticker {
  /* Keep the ticker fully readable but slightly dampened — we want
     the eye to be drawn to live calls first, settled rows are
     reference material. */
}

.call-status-settled {
  position: relative;
  letter-spacing: 0.06em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* Locked-tier hits get a thin shimmer to differentiate from a
   muted "CLOSED" verdict. */
.call-row-status.call-status-gold.call-status-settled,
.call-card-status.call-status-gold.call-status-settled {
  background: linear-gradient(110deg,
    rgba(247, 217, 121, 0.10) 0%,
    rgba(247, 217, 121, 0.22) 50%,
    rgba(247, 217, 121, 0.10) 100%);
  background-size: 200% 100%;
  animation: nameGoldShimmer 5s linear infinite;
  border-color: rgba(247, 217, 121, 0.45);
  color: #f7d979;
}
.call-row-status.call-status-muted.call-status-settled,
.call-card-status.call-status-muted.call-status-settled {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-3);
}

/* ─── Settled-call banner (post page) ───────────────────────────── */
@keyframes settledShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes settledRise {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

.settled-call-banner {
  --settled-c1: rgba(255, 255, 255, 0.18);
  --settled-c2: rgba(255, 255, 255, 0.14);
  --settled-c3: rgba(255, 255, 255, 0.10);

  position: relative;
  margin: 12px 0 8px;
  padding: 18px 20px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: settledRise 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.settled-call-banner.is-celebratory {
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--settled-c2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-color: color-mix(in srgb, var(--settled-c2) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--settled-c2) 12%, transparent),
              0 8px 32px color-mix(in srgb, var(--settled-c2) 14%, transparent);
}

/* Animated outline only for celebratory hits. */
.settled-call-banner.is-celebratory::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    transparent 0%,
    color-mix(in srgb, var(--settled-c2) 35%, transparent) 30%,
    color-mix(in srgb, var(--settled-c1) 65%, transparent) 50%,
    color-mix(in srgb, var(--settled-c2) 35%, transparent) 70%,
    transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: settledShimmer 5s linear infinite;
}

.settled-glow {
  position: absolute;
  pointer-events: none;
  inset: -40% -10% auto auto;
  width: 60%; height: 220%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--settled-c2) 24%, transparent),
    transparent 70%);
  filter: blur(28px);
  z-index: 0;
}

.settled-head {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.settled-glyph {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--settled-c2) 14%, rgba(0, 0, 0, 0.25));
  border: 1px solid color-mix(in srgb, var(--settled-c2) 30%, transparent);
  color: var(--settled-c1);
}
/* P65.223 — SVG icons inherit color from the container; force a clean
   centered render so they don't pick up baseline offsets that the
   old text-glyph used. */
.settled-glyph svg {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--settled-c1);
}
/* Muted-tone (range-bound) icon needs a touch more visible color than
   the default --settled-c1 (rgba(255,255,255,.18) — too washed out
   on the equals-sign lines).  Lift it to a more readable grey. */
.settled-call-banner.settled-muted .settled-glyph {
  color: rgba(255, 255, 255, 0.62);
}
.settled-call-banner.settled-muted .settled-glyph svg {
  color: rgba(255, 255, 255, 0.62);
}
.settled-call-banner.is-celebratory .settled-glyph {
  background: radial-gradient(120% 120% at 30% 20%,
    var(--settled-c1),
    var(--settled-c2) 60%,
    var(--settled-c3));
  color: #1a1304;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--settled-c2) 28%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--settled-c1) 70%, transparent);
}

.settled-head-text { flex: 1; min-width: 0; }
.settled-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.settled-call-banner.is-celebratory .settled-headline {
  background: linear-gradient(180deg, var(--settled-c1), var(--settled-c2) 70%, var(--settled-c3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.settled-subline {
  font-size: 12.5px;
  color: var(--text-3);
  font-family: var(--mono, ui-monospace);
  line-height: 1.4;
}

.settled-stamp {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-4);
  font-family: var(--mono, ui-monospace);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── Settled banner: body grid (mult + prices) ────────────────── */
.settled-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  padding: 14px 0 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.settled-mult-block {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  min-width: 110px;
}
.settled-mult-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-4);
}
.settled-mult-value {
  font-family: var(--mono, ui-monospace);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-0);
}
.settled-call-banner.is-celebratory .settled-mult-value {
  background: linear-gradient(180deg, var(--settled-c1), var(--settled-c2) 60%, var(--settled-c3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--settled-c2) 35%, transparent));
}
.settled-mult-window {
  font-size: 10.5px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.settled-prices {
  display: flex; flex-direction: column;
  gap: 6px;
  align-self: center;
  min-width: 0;
}
.settled-price-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono, ui-monospace);
  font-size: 12px;
}
.settled-price-label {
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.settled-price-val {
  color: var(--text-1);
  font-weight: 600;
}
.settled-price-row-current .settled-price-val {
  color: var(--text-0);
}
.settled-price-roi {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.settled-foot {
  position: relative; z-index: 1;
  margin-top: 4px;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
}
.settled-foot-icon {
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── P65.221 — Settled card hero result block ─────────────────── */
/* Centered, prominent: eyebrow label → big multiplier → ROI pill.
   The multiplier is the single visual anchor of the card.  Replaces
   the old left-aligned mult block + right-aligned price rows that
   visually competed and made the hierarchy unclear. */
.settled-result {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.settled-result-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-4);
}
.settled-result-mult {
  font-family: var(--mono, ui-monospace);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-0);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.settled-call-banner.is-celebratory .settled-result-mult {
  background: linear-gradient(180deg, var(--settled-c1), var(--settled-c2) 55%, var(--settled-c3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--settled-c2) 40%, transparent));
}
/* ROI pill — color matches the accent palette so a hit reads gold,
   a loss reads red, range-bound reads amber, etc. */
.settled-result-roi {
  margin-top: 4px;
  padding: 4px 12px 4px 11px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--settled-c2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--settled-c2) 38%, transparent);
  color: var(--settled-c1);
}

/* ─── P65.221 — Entry → Locked journey row ─────────────────────── */
/* Two equal-width cells separated by a directional arrow.  Reads as
   "this is where the call started, this is where it ended", which
   is far more legible than the old key-value rows pushed against
   one column on the right. */
.settled-journey {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 12px 0 16px;
}
.settled-journey-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  min-width: 0;
}
.settled-journey-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-4);
}
.settled-journey-value {
  font-family: var(--mono, ui-monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: -0.01em;
  word-break: break-all;
}
.settled-journey-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--settled-c2) 70%, var(--text-4));
  opacity: 0.85;
  padding: 0 2px;
}
.settled-call-banner.is-celebratory .settled-journey-arrow {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--settled-c2) 40%, transparent));
}

@media (max-width: 560px) {
  .settled-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .settled-glyph { width: 38px; height: 38px; font-size: 18px; }
  .settled-headline { font-size: 14.5px; }
  .settled-mult-value { font-size: 28px; }
  .settled-stamp { font-size: 8.5px; padding: 3px 6px; }
  /* P65.221 — mobile result + journey adjustments */
  .settled-result-mult { font-size: 42px; }
  .settled-result-eyebrow { letter-spacing: 0.10em; }
  .settled-journey {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .settled-journey-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.42 — EARLY EXIT + CALL AGAIN
   ─────────────────────────────────────────────────────────────────
   Two action affordances on the post page's call card:
     • Exit position — appears on the user's own LIVE call. Closes
       the 24h round early and locks final_mult at the current price.
     • Call again    — appears on the user's own SETTLED banner.
       Starts a fresh round on the same token.
   ═══════════════════════════════════════════════════════════════════ */

/* Exit button — sits at the bottom of the live call-card body. Muted
   amber so it reads as a destructive-ish action but doesn't compete
   with the green ROI numbers above it. */
.call-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
  color: #fbbf24;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
  align-self: flex-end;
  font-family: inherit;
}
.call-exit-btn:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
}
.call-exit-btn:active { transform: translateY(1px); }
.call-exit-btn svg { width: 13px; height: 13px; }

/* Call-again row — lives at the bottom of the settled banner. Aligns
   the button with a soft hint so the user understands what "again"
   does without reading docs. */
.call-again-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
.call-again-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 14px;
}
.call-again-btn svg { width: 13px; height: 13px; }
.call-again-hint {
  font-size: 11.5px;
  color: var(--text-3);
  flex: 1;
  min-width: 0;
}

/* ─── Confirm-exit modal layout ────────────────────────────────── */
.exit-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.exit-confirm-cell {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.exit-confirm-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-4);
  margin-bottom: 6px;
}
.exit-confirm-value {
  font-family: var(--mono, ui-monospace);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.exit-confirm-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  font-family: var(--mono, ui-monospace);
}

.exit-confirm-prices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--mono, ui-monospace);
}
.exit-confirm-prices > div {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
}
.exit-confirm-prices-label {
  font-size: 9.5px; color: var(--text-4);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.exit-confirm-prices-val {
  font-size: 13px; color: var(--text-1); font-weight: 600;
}
.exit-confirm-prices-arrow {
  color: var(--text-4);
  font-size: 16px;
}

.exit-confirm-note {
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 196, 114, 0.04);
  border: 1px solid rgba(0, 196, 114, 0.10);
  margin-bottom: 18px;
}

.exit-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.exit-confirm-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.exit-confirm-confirm svg { width: 13px; height: 13px; }

@media (max-width: 480px) {
  .exit-confirm-grid { grid-template-columns: 1fr; }
  .exit-confirm-actions { flex-direction: column-reverse; }
  .exit-confirm-actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.56 — NOX PRO BADGE + PROFILE AURA
   ─────────────────────────────────────────────────────────────────
   When a user crosses into NOX Pro tier, the verified mark next to
   their name upgrades from a plain green check into an animated
   emerald GEM with internal sheen, a soft halo, and a tiny orbiting
   sparkle. On their profile page the cover gets an emerald gradient
   border + a slow diagonal "sweep," the avatar gets a multi-stop
   emerald ring with a slow shimmer, and a small "NOX PRO" ribbon
   sits in the top-right of the cover.

   Design principles:
     • Premium, not tacky — the animations are slow (6s+ cycles), the
       emerald never glows hot enough to burn the layout, and we
       always defer to gold-caller styling when both apply.
     • Crisp at any zoom — the gem is inline SVG; gradients use
       `gradientUnits=userSpaceOnUse` so they scale with viewBox.
     • Cheap to render — a single CSS keyframe + transform-only
       animation per layer; no JS, no per-frame paint.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Keyframes ──────────────────────────────────────────────── */

@keyframes proBadgeGlow {
  0%, 100% { transform: translate(-50%,-50%) scale(.8); opacity: .42; }
  50%      { transform: translate(-50%,-50%) scale(1.18); opacity: .82; }
}

@keyframes proBadgeFloat {
  0%, 100% { transform: translateY(0)       rotate(0); }
  50%      { transform: translateY(-.5px)   rotate(.4deg); }
}

@keyframes proBadgeSpark {
  /* Tiny dot orbits around the gem once every cycle. The radius is
     set in em units so the orbit scales with --pro-badge-size. */
  0%   { transform: rotate(0)     translateX(.62em) rotate(0)     scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: rotate(180deg) translateX(.62em) rotate(-180deg) scale(1); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: rotate(360deg) translateX(.62em) rotate(-360deg) scale(.6); opacity: 0; }
}

@keyframes proCoverSweep {
  /* Slow diagonal light sweep across the cover. Uses transform on a
     positioned span (composited), no layout / repaint cost. */
  0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
  18%  { opacity: .55; }
  60%  { opacity: .55; }
  100% { transform: translateX(110%)  skewX(-18deg); opacity: 0; }
}

@keyframes proAvatarRing {
  /* Hue rotation around the emerald base — the ring shifts slightly
     between deep-emerald and minty-glow, never leaving "green." */
  0%, 100% { box-shadow:
              0 0 0 3px var(--bg-1),
              0 0 0 5px #11d27a,
              0 0 18px 2px rgba(17, 210, 122, .35),
              0 0 32px 6px rgba(17, 210, 122, .12); }
  50%      { box-shadow:
              0 0 0 3px var(--bg-1),
              0 0 0 5px #5af2a8,
              0 0 22px 3px rgba(90, 242, 168, .55),
              0 0 40px 8px rgba(17, 210, 122, .22); }
}

@keyframes proRibbonShine {
  0%, 100% { background-position:   0% 50%; }
  100%     { background-position: 200% 50%; }
}

/* ─── NOX verified badge (renamed from .pro-badge to avoid colliding
   with the legacy gold subscription pill at line 1250 which forced
   padding + border-radius:4px + gold gradient onto our SVG container). */

.nox-vbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 4px;
  vertical-align: middle;
  width: var(--nv-size, 14px);
  height: var(--nv-size, 14px);
  /* Hard reset everything that could leak in from a parent or a
     stray rule — we own the box completely. */
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  flex-shrink: 0;
  z-index: 1;
}
.nox-vbadge.nox-vbadge-lg { margin-left: 6px; }

/* The SVG itself — gentle float */
.nox-vbadge .nv-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.nox-vbadge.nox-vbadge-pro .nv-svg {
  animation: nvBadgeFloat 4.2s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(0, 40, 20, .5));
}

/* Halo glow behind the disc */
.nox-vbadge .nv-glow {
  position: absolute;
  left: 50%; top: 50%;
  width:  calc(var(--nv-size, 14px) * 1.8);
  height: calc(var(--nv-size, 14px) * 1.8);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(90, 242, 168, .55) 0%,
    rgba(17, 210, 122, .35) 35%,
    rgba(17, 210, 122, 0)   72%
  );
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
  animation: nvBadgeGlow 2.6s ease-in-out infinite;
}

/* Orbiting sparkle */
.nox-vbadge .nv-spark {
  position: absolute;
  left: 50%; top: 50%;
  width: 2.4px;
  height: 2.4px;
  margin: -1.2px 0 0 -1.2px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px rgba(255, 255, 255, .9),
    0 0 8px rgba(90, 242, 168, .8);
  pointer-events: none;
  z-index: 3;
  font-size: var(--nv-size, 14px);
  animation: nvBadgeSpark 4.8s linear infinite;
  transform-origin: center;
}
.nox-vbadge.nox-vbadge-lg .nv-spark { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }

/* Muted variant */
.nox-vbadge.nox-vbadge-muted .nv-glow,
.nox-vbadge.nox-vbadge-muted .nv-spark { animation-duration: 9s; opacity: .6; }
.nox-vbadge.nox-vbadge-muted .nv-svg   { animation: none; }

/* Admin variant — no animation */
.nox-vbadge.nox-vbadge-admin .nv-svg {
  filter: drop-shadow(0 0 4px rgba(0, 196, 114, .35));
}

/* Renamed keyframes to match the new class prefix. The old proBadge*
   keyframes still exist (above) and are unused now — harmless. */
@keyframes nvBadgeFloat {
  0%, 100% { transform: translateY(0)     rotate(0); }
  50%      { transform: translateY(-.5px) rotate(.4deg); }
}
@keyframes nvBadgeGlow {
  0%, 100% { transform: translate(-50%,-50%) scale(.8);  opacity: .42; }
  50%      { transform: translate(-50%,-50%) scale(1.18); opacity: .82; }
}
@keyframes nvBadgeSpark {
  0%   { transform: rotate(0)     translateX(.62em) rotate(0)     scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: rotate(180deg) translateX(.62em) rotate(-180deg) scale(1); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: rotate(360deg) translateX(.62em) rotate(-360deg) scale(.6); opacity: 0; }
}

/* ─── Profile cover Pro aura ────────────────────────────────────── */

/* Animated emerald gradient bottom edge (mirrors the gold edge but
   in living emerald). When BOTH gold and pro apply, the gold ::after
   stays on top so gold wins visually. */
.profile-cover.profile-cover-pro::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(90, 242, 168, .85) 18%,
    rgba(17, 210, 122, 1)   50%,
    rgba(90, 242, 168, .85) 82%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(17, 210, 122, .5));
}

/* The diagonal sweep — a thin translucent light bar that crosses the
   cover every ~8 seconds. Only visible because the cover sets
   overflow: hidden, which clips it to the card outline. */
.profile-cover-pro-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(90, 242, 168, .12) 49%,
    rgba(255, 255, 255, .18) 50%,
    rgba(90, 242, 168, .12) 51%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: proCoverSweep 7.5s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* Top-right corner ribbon. Sits above the banner so dark covers
   still let it pop. Tiny gem + "NOX PRO" wordmark with a faint
   shimmer on the gradient. */
/* P65.318 — Moved LEFT of the 3-dot menu button (right: 56px to
   clear the 36px button + 10px right offset + 10px gap) and the
   z-index raised above the menu (was 4, menu is 5) so it can never
   be visually clipped again.  Also turned into a real clickable
   element: owners get "Manage subscription", non-owners go to the
   subscribe page so they can get verified themselves. */
.profile-cover-pro-ribbon {
  position: absolute;
  top: 10px; right: 56px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #04321f;
  background: linear-gradient(
    100deg,
    #5af2a8 0%,
    #b8ffd9 30%,
    #5af2a8 50%,
    #11d27a 70%,
    #5af2a8 100%
  );
  background-size: 200% 100%;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    0 2px 10px rgba(17, 210, 122, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .25);
  animation: proRibbonShine 5.5s linear infinite;
  z-index: 6;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.profile-cover-pro-ribbon:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 4px 14px rgba(17, 210, 122, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.profile-cover-pro-ribbon:active {
  transform: translateY(0) scale(.97);
}
.profile-cover-pro-ribbon:focus-visible {
  outline: 2px solid #11d27a;
  outline-offset: 2px;
}
.profile-cover-pro-ribbon svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
  flex-shrink: 0;
}

/* On very small screens the banner is too narrow to comfortably
   fit a full ribbon + menu button.  Drop the wordmark to keep
   just the gem so the ribbon shrinks to a circle next to the dots. */
@media (max-width: 420px) {
  .profile-cover-pro-ribbon { padding: 4px; right: 52px; }
  .profile-cover-pro-ribbon > span { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   P65.319 — New-user cred-flight animation
   A small glowing emerald dot flies from the user's click point to
   their header avatar after upvote / share / comment.  Plays at most
   3 times per action kind, and only while the account is < 7 days
   old (gated in app.js _credFlyFromLastClick).
   ──────────────────────────────────────────────────────────────── */
.cred-fly-dot {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at 35% 30%,
    #c2ffd9 0%,
    #5af2a8 28%,
    #11d27a 65%,
    #0a8f53 100%);
  box-shadow:
    0 0 12px rgba(17, 210, 122, .85),
    0 0 28px rgba(17, 210, 122, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .35);
  will-change: transform, opacity;
}

#headerAvatar.cred-receive-pulse {
  animation: credReceivePulse .75s cubic-bezier(.34, 1.56, .64, 1) both;
  position: relative;
}
@keyframes credReceivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(17, 210, 122, .55),
                0 0 0 0 rgba(17, 210, 122, 0);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(17, 210, 122, .55),
                0 0 26px 4px rgba(17, 210, 122, .35);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(17, 210, 122, 0),
                0 0 0 0 rgba(17, 210, 122, 0);
    transform: scale(1);
  }
}

/* ─── Profile avatar Pro ring ────────────────────────────────────── */

.profile-avatar-pro-ring {
  border-radius: 50%;
  animation: proAvatarRing 3.6s ease-in-out infinite;
}

/* ─── Posts: Pro-author username glow (subtle) ───────────────────── */

/* When a post author is Pro, the username text gets a faint emerald
   text-shadow on hover. The badge already announces Pro-ness; this
   is just a tiny extra "pull" so cursors linger over their bylines. */
.post-username:has(.nox-vbadge-pro):hover {
  text-shadow: 0 0 12px rgba(17, 210, 122, .35);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.58 — ADVANCED ANALYTICS DASHBOARD
   ─────────────────────────────────────────────────────────────────
   The basic Analytics page already lived in the 760px-max content
   column. The advanced view busts out of that column to fill more of
   the viewport (1100px) and lays its panels out as a multi-card grid
   of charts. Pure CSS — no chart library — paired with the inline
   SVG helpers in app.js (_chartArea, _chartDonut, _chartHBar, etc).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Basic-page additions ─────────────────────────────────────── */

/* "Open Advanced Analytics" button — sits in the head row, gradient
   accent that pulses gently to invite the click. */
.aa-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(
    100deg,
    rgba(17, 210, 122, 0.14) 0%,
    rgba(90, 242, 168, 0.20) 50%,
    rgba(17, 210, 122, 0.14) 100%
  );
  background-size: 200% 100%;
  border: 1px solid rgba(17, 210, 122, 0.42);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.18s ease;
  animation: nameGoldShimmer 6s linear infinite;
  box-shadow: 0 0 0 0 rgba(17, 210, 122, 0);
}
.aa-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(17, 210, 122, 0.7);
  box-shadow: 0 6px 20px rgba(17, 210, 122, 0.22);
}
.aa-open-btn:active { transform: translateY(0); }

/* Stat card with embedded sparkline */
.analytics-stat-card-rich {
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
}
.analytics-stat-card-rich .analytics-stat-spark {
  margin-top: 8px;
  margin-left: -14px;
  margin-right: -14px;
  margin-bottom: -1px;
  line-height: 0;
}
.analytics-stat-card-rich .analytics-stat-spark svg { width: 100%; height: 26px; display: block; }

/* Inline timeline preview on the basic page */
.aa-card-inline {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
.aa-card-inline svg { width: 100%; height: auto; max-height: 200px; display: block; }

/* ─── Advanced overlay shell ───────────────────────────────────── */

.aa-overlay {
  /* Blow past the 760px max-width of .analytics-page for the deep view. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 14px 60px;
  animation: aaFadeIn .25s ease both;
}

@keyframes aaFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero header */
.aa-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: 16px;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(17, 210, 122, 0.12), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(124, 58, 237, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(17, 210, 122, 0.25);
  box-shadow: 0 8px 40px rgba(17, 210, 122, 0.06);
  position: relative;
  overflow: hidden;
}
.aa-hero::before {
  /* Slow diagonal sweep across the hero — premium, never distracting. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: proCoverSweep 9s ease-in-out infinite;
  pointer-events: none;
}
.aa-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.aa-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  flex-shrink: 0;
}
.aa-close:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--text-3);
  transform: translateX(-1px);
}
.aa-hero-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-0);
  background: linear-gradient(100deg, #5af2a8, #11d27a 50%, #5af2a8);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nameGoldShimmer 6s linear infinite;
}
.aa-hero-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Range selector */
.aa-range-bar {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  z-index: 1;
}
.aa-range-btn {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.aa-range-btn:hover { color: var(--text-1); }
.aa-range-btn.active {
  background: linear-gradient(180deg, rgba(17, 210, 122, 0.30), rgba(17, 210, 122, 0.18));
  color: var(--text-0);
  box-shadow: inset 0 0 0 1px rgba(17, 210, 122, 0.45);
}

/* ─── KPI mega-cards (P65.59 redesign) ────────────────────────────
   Previous layout was 6 columns × 1 row → labels truncated, values
   collided with the icon, sparkline crammed into a 90px frame. The
   redesign uses 3 cols × 2 rows on desktop with an "icon + text" row
   layout so the value/label/sub never compete for horizontal space.
   The sparkline still hugs the bottom edge. */

.aa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .aa-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .aa-kpi-grid { grid-template-columns: 1fr; } }

.aa-kpi-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.aa-kpi-card.aa-kpi-accent {
  border-color: rgba(17, 210, 122, 0.4);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(17, 210, 122, 0.10), transparent 60%),
    var(--bg-1);
  box-shadow: 0 0 24px rgba(17, 210, 122, 0.06);
}
.aa-kpi-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.aa-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(17, 210, 122, 0.12);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aa-kpi-text { flex: 1; min-width: 0; }
.aa-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-kpi-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.aa-kpi-sub {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-kpi-spark {
  margin-left: -16px;
  margin-right: -16px;
  margin-top: auto;
  margin-bottom: -1px;
  line-height: 0;
}
.aa-kpi-spark svg { width: 100%; height: 36px; display: block; }

/* ─── Card shell ───────────────────────────────────────────────── */

.aa-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  overflow: hidden;
}
.aa-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.aa-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.aa-card-sub {
  font-size: 11px;
  color: var(--text-4);
}
.aa-card-body { width: 100%; overflow: hidden; }
.aa-card-body svg { max-width: 100%; height: auto; display: block; }

/* Two-up row */
.aa-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.aa-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .aa-row-2 { grid-template-columns: 1fr; } }

/* ─── Donut chart legend ───────────────────────────────────────── */

.aa-legend {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aa-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
}
.aa-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.aa-legend-label { color: var(--text-2); }
.aa-legend-val {
  color: var(--text-0);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
}
.aa-legend-pct {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  min-width: 32px;
  text-align: right;
}

/* ─── Horizontal bars ──────────────────────────────────────────── */

.aa-hbars { display: flex; flex-direction: column; gap: 6px; }
.aa-hbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 280px) 80px;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.aa-hbar-row:hover { background: rgba(17, 210, 122, 0.05); }
.aa-hbar-label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-hbar-track {
  height: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.aa-hbar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(17, 210, 122, 0.35);
}
.aa-hbar-val {
  font-size: 11.5px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}

/* ─── Heatmap legend ───────────────────────────────────────────── */

.aa-heat-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  margin-top: 8px;
  padding-left: 34px;
}
.aa-heat-swatch {
  width: 14px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

/* ─── Comparison table ─────────────────────────────────────────── */

.aa-cmp-table { display: flex; flex-direction: column; gap: 0; }
.aa-cmp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .8fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.aa-cmp-row:last-child { border-bottom: 0; }
.aa-cmp-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}
.aa-cmp-num {
  font-family: var(--mono);
  color: var(--text-1);
  font-weight: 700;
}

/* ─── Foot note ────────────────────────────────────────────────── */

.aa-foot {
  font-size: 10.5px;
  color: var(--text-4);
  text-align: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  line-height: 1.6;
}

/* ─── P65.59: chart expand button + cursor + modal ─────────────── */

/* Expand-to-fullscreen button (top-right of each chart card head) */
.aa-card-expand {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.aa-card-expand:hover {
  background: rgba(17, 210, 122, 0.10);
  border-color: rgba(17, 210, 122, 0.4);
  color: var(--accent);
  transform: scale(1.06);
}

/* The chart card head needs a small layout tweak now that it has a
   left-side group (title + sub stacked) plus a right-side button. */
.aa-card-head {
  align-items: flex-start;
}
.aa-card-head > div:first-child {
  flex: 1;
  min-width: 0;
}

/* Make the card body ride the chart's natural width without overflow */
.aa-card-body { position: relative; }

/* Cursor crosshair feels live — hovered area gets a subtle ring */
.aa-area-hit { transition: opacity 0.2s ease; }
.aa-area-svg:hover .aa-area-hit { opacity: 1; }

/* Touch hint for the cursor's tooltip pill (visual only — JS sets size) */
.aa-area-tip text { paint-order: stroke; }

/* ─── Chart fullscreen modal ─────────────────────────────────── */

.aa-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  animation: aaModalIn 0.18s ease both;
}
@keyframes aaModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.aa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.aa-modal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 1280px);
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(15, 22, 30, 0.98), rgba(8, 12, 16, 0.98));
  border: 1px solid rgba(17, 210, 122, 0.3);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(17, 210, 122, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aaModalCardIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes aaModalCardIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.aa-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(17, 210, 122, 0.10), transparent 60%);
}
.aa-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
}
.aa-modal-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}
.aa-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  flex-shrink: 0;
}
.aa-modal-close:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--text-3);
  transform: rotate(90deg);
}
.aa-modal-body {
  flex: 1;
  overflow: auto;
  padding: 14px 18px;
}
.aa-modal-body svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ─── Caller stats grid ─────────────────────────────────────── */

.aa-caller-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .aa-caller-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .aa-caller-grid { grid-template-columns: repeat(2, 1fr); } }
.aa-caller-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color 0.12s ease;
}
.aa-caller-stat.aa-caller-emph {
  background: rgba(17, 210, 122, 0.06);
  border-color: rgba(17, 210, 122, 0.3);
}
.aa-caller-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.aa-caller-stat.aa-caller-emph .aa-caller-num { color: var(--accent); }
.aa-caller-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Tag pills (Top tags card) ─────────────────────────────── */

.aa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aa-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.aa-tag-pill:hover {
  background: rgba(17, 210, 122, 0.08);
  border-color: rgba(17, 210, 122, 0.3);
  transform: translateY(-1px);
}
.aa-tag-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--mono);
}
.aa-tag-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(17, 210, 122, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
}

/* ─── P65.60: floating cursor tooltip (donut/vbar/heatmap) ─────── */

/* Single tooltip element appended to <body> by _aaTipShow. Position
   updates on mousemove. Pointer-events:none so it never steals a
   hover from the chart underneath; z-index above the modal so it
   shows when expand-modal is open. */
.aa-float-tip {
  position: fixed;
  display: none;
  z-index: 1100;
  background: rgba(8, 12, 16, 0.97);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--mono);
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(17, 210, 122, 0.45);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(17, 210, 122, 0.20);
  pointer-events: none;
  white-space: nowrap;
  animation: aaFloatTipIn 0.12s ease-out;
}
@keyframes aaFloatTipIn {
  from { opacity: 0; transform: translateY(2px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slice / cell / bar hover cursor cues — most are inline on the SVG
   element via JS, but we keep a class hook here for future tweaks. */
.aa-slice:hover { z-index: 2; }
.aa-heat-cell:hover { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1; }


/* ═══════════════════════════════════════════════════════════════
   P65.248 — ANALYTICS DASHBOARD UPGRADE
   Three new sections (Stamina story, Cards inventory, Account
   activity), an immersive header with ambient gradient + pulse,
   and a full-screen page layout that hides the right sidebar so
   the dashboard owns the canvas.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Full-screen layout for the analytics page.  Hide the right
   sidebar (we don't need viral/trending widgets while looking at
   our own metrics) and widen the main feed.  The page itself
   stretches up to 1180px so wide stat grids breathe. */
body.page-analytics #sidebarRight,
body.page-analytics .sidebar-right {
  display: none !important;
}
body.page-analytics .main-feed {
  max-width: none !important;
}
.ax-immersive {
  max-width: 1180px !important;
}

/* 2. Immersive header with ambient gradient orbs + live pulse. */
.ax-head-immersive {
  position: relative;
  padding: 24px 24px 28px;
  margin: 0 -8px 22px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0, 196, 114, 0.04) 0%, transparent 70%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid rgba(0, 196, 114, 0.10);
}
.ax-head-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ax-head-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 196, 114, 0.18) 0%, transparent 65%);
  filter: blur(50px);
  top: -50%;
  right: -10%;
  animation: axOrbDrift 12s ease-in-out infinite alternate;
}
.ax-head-orb-2 {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(52, 255, 175, 0.10) 0%, transparent 65%);
  top: 40%;
  right: 25%;
  animation-duration: 16s;
  animation-delay: -4s;
}
@keyframes axOrbDrift {
  0%   { transform: translate(0, 0)        scale(1); }
  100% { transform: translate(-30px, 20px) scale(1.1); }
}
.ax-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(52, 255, 175, 0.85);
  letter-spacing: 0.18em;
  font-family: var(--mono, ui-monospace, monospace);
  margin-bottom: 6px;
}
.ax-head-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34ffaf;
  box-shadow: 0 0 8px rgba(52, 255, 175, 0.7);
  animation: axHeadPulse 1.6s ease-in-out infinite;
}
@keyframes axHeadPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(0.85); }
}
.ax-title-large {
  font-size: 30px !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05;
  margin-top: 2px;
}

/* 3. Section meta + pill (sub-headline elements) */
.analytics-section-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ax-section-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: var(--mono, ui-monospace, monospace);
}
.ax-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(52, 255, 175, 0.10);
  border: 1px solid rgba(52, 255, 175, 0.25);
  color: #34ffaf;
}
.ax-section-pill svg {
  filter: drop-shadow(0 0 4px rgba(52, 255, 175, 0.5));
}

/* 4. Stamina dashboard section */
.ax-stamina-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .ax-stamina-grid { grid-template-columns: repeat(2, 1fr); }
}
/* P65.259 — 3-col variant for the "you've spent" row.  Three
   metrics (cards spent, stars given, last spent) fill the row
   without empty space. */
.ax-stamina-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .ax-stamina-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Sub-section heading inside the Stamina story card —
   "You've spent" / "You've received" splits. */
.ax-stamina-subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(52, 255, 175, 0.78);
  margin: 4px 0 8px;
  font-family: var(--mono, ui-monospace, monospace);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ax-stamina-subhead::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #34ffaf;
  box-shadow: 0 0 6px rgba(52, 255, 175, .7);
}
/* Tiny variant for time-ago strings inside the spend cards
   (the relative time label can be longer than a number). */
.ax-stamina-val-tiny {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--text-1) !important;
  text-transform: capitalize;
}
.ax-stamina-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  overflow: hidden;
}
.ax-stamina-hero {
  background: linear-gradient(135deg,
    rgba(52, 255, 175, 0.08) 0%,
    rgba(0, 196, 114, 0.04) 100%),
    var(--bg-1);
  border-color: rgba(52, 255, 175, 0.22);
}
.ax-stamina-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(52, 255, 175, 0.18) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.ax-stamina-card-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ax-stamina-card-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ax-stamina-val-accent {
  color: #34ffaf;
  text-shadow: 0 0 16px rgba(52, 255, 175, 0.25);
}
.ax-stamina-card-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0;
}
.ax-stamina-card-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
}

/* Stamina lift narrative row */
.ax-stamina-lift {
  background: var(--bg-1);
  border: 1px solid rgba(52, 255, 175, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ax-stamina-lift-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(52, 255, 175, 0.85);
  flex-shrink: 0;
}
.ax-stamina-lift-val {
  font-size: 13px;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
}
.ax-stamina-lift-val strong { font-weight: 800; }
.ax-stamina-lift-meta {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  margin-left: auto;
}

/* Top fueled post CTA tile */
.ax-stamina-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(90deg,
    rgba(52, 255, 175, 0.06) 0%,
    rgba(52, 255, 175, 0.01) 100%),
    var(--bg-1);
  border: 1px solid rgba(52, 255, 175, 0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.ax-stamina-top:hover {
  transform: translateY(-1px);
  border-color: rgba(52, 255, 175, 0.34);
  box-shadow: 0 6px 18px rgba(52, 255, 175, 0.10);
}
.ax-stamina-top-rank {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #34ffaf;
  background: rgba(52, 255, 175, 0.12);
  border: 1px solid rgba(52, 255, 175, 0.25);
  border-radius: 999px;
  padding: 4px 9px;
}
.ax-stamina-top-body { flex: 1; min-width: 0; }
.ax-stamina-top-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax-stamina-top-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
}
.ax-stamina-top-meta strong { color: var(--text-1); font-weight: 700; }
.ax-stamina-top-live {
  color: #34ffaf;
  font-weight: 700;
}
.ax-stamina-top-arrow {
  flex-shrink: 0;
  color: var(--text-4);
  transition: transform .14s ease, color .14s ease;
}
.ax-stamina-top:hover .ax-stamina-top-arrow {
  transform: translateX(3px);
  color: #34ffaf;
}

/* 5. Cards inventory section */
.ax-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 720px) {
  .ax-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
.ax-card-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
}
.ax-card-tile.is-owned {
  border-color: rgba(52, 255, 175, 0.20);
  background: linear-gradient(135deg,
    rgba(52, 255, 175, 0.04) 0%,
    var(--bg-1) 100%);
}
.ax-card-tile-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(52, 255, 175, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
}
.ax-card-tile.is-owned .ax-card-tile-icon {
  background: rgba(52, 255, 175, 0.14);
  border: 1px solid rgba(52, 255, 175, 0.25);
}
.ax-card-tile-body { flex: 1; min-width: 0; }
.ax-card-tile-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 1px;
}
.ax-card-tile-desc {
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.3;
}
.ax-card-tile-qty {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.ax-card-tile.is-empty .ax-card-tile-qty {
  color: var(--text-4);
  opacity: 0.6;
}
.ax-card-tile.is-owned .ax-card-tile-qty { color: #34ffaf; }
.ax-cards-cta {
  text-align: center;
  margin-top: 4px;
}

/* 6. Account activity card */
.ax-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .ax-activity-grid { grid-template-columns: repeat(6, 1fr); }
}
.ax-activity-stat {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.ax-activity-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.ax-activity-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.ax-activity-stat-sub {
  font-size: 9.5px;
  color: var(--text-4);
  margin-top: 2px;
  font-family: var(--mono);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.373 — Expanded analytics sections
   ═══════════════════════════════════════════════════════════════════ */

/* --- Account Health composite --- */
.ax-health-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 640px) {
  .ax-health-wrap { grid-template-columns: 1fr; }
}
.ax-health-score {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.ax-health-num {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ax-health-good .ax-health-num { color: var(--accent); }
.ax-health-mid  .ax-health-num { color: #f59e0b; }
.ax-health-low  .ax-health-num { color: #ef4444; }
.ax-health-of {
  font-size: 12px;
  color: var(--text-4);
  margin-top: 4px;
}
.ax-health-headline {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ax-health-pillars {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ax-health-pillar {
  display: grid;
  grid-template-columns: 160px 1fr 44px;
  align-items: center;
  gap: 12px;
}
@media (max-width: 540px) {
  .ax-health-pillar { grid-template-columns: 120px 1fr 36px; }
}
.ax-health-pillar-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}
.ax-health-pillar-bar {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.ax-health-pillar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #14F195);
  border-radius: 4px;
}
.ax-health-pillar-val {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-1);
}

/* --- Profile Completeness --- */
.ax-pc-complete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 196, 114, 0.08);
  border: 1px solid rgba(0, 196, 114, 0.32);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.ax-pc-bar {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ax-pc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #14F195);
  border-radius: 4px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.ax-pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.ax-pc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-3);
}
.ax-pc-item.is-done {
  border-color: rgba(0, 196, 114, 0.32);
  background: rgba(0, 196, 114, 0.05);
  color: var(--text-1);
}
.ax-pc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-4);
}
.ax-pc-item.is-done .ax-pc-mark {
  background: rgba(0, 196, 114, 0.18);
  color: var(--accent);
}

/* --- Next Milestones (3 goal cards) --- */
.ax-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.ax-goal-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px;
}
.ax-goal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 10px;
}
.ax-goal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.ax-goal-target {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.ax-goal-bar {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ax-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #14F195);
  border-radius: 4px;
}
.ax-goal-foot {
  display: flex; justify-content: space-between;
  font-size: 10.5px;
}
.ax-goal-pct { color: var(--accent); font-weight: 700; }
.ax-goal-rem { color: var(--text-4); font-family: var(--mono); }

/* --- Content Type Performance --- */
.ax-type-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ax-type-row {
  display: grid;
  grid-template-columns: 24px 100px 70px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 9px;
}
@media (max-width: 640px) {
  .ax-type-row { grid-template-columns: 24px 1fr 80px; }
  .ax-type-count, .ax-type-bar { display: none; }
}
.ax-type-icon { color: var(--accent); display: inline-flex; }
.ax-type-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.ax-type-count {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
}
.ax-type-bar {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
}
.ax-type-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #14F195);
}
.ax-type-avg {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: right;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.ax-type-avg-unit {
  font-size: 9.5px;
  color: var(--text-4);
  font-weight: 500;
  margin-left: 2px;
}

/* --- Tag Performance --- */
.ax-tag-list {
  display: flex; flex-direction: column; gap: 6px;
}
.ax-tag-row {
  display: grid;
  grid-template-columns: 130px 70px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (max-width: 640px) {
  .ax-tag-row { grid-template-columns: 1fr 60px; }
  .ax-tag-count, .ax-tag-bar { display: none; }
}
.ax-tag-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-tag-count {
  font-size: 10.5px;
  color: var(--text-4);
  font-family: var(--mono);
}
.ax-tag-bar {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
}
.ax-tag-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #14F195);
}
.ax-tag-avg {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: right;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}

/* --- Posting Patterns --- */
.ax-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ax-pattern-stat {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.ax-pattern-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.ax-pattern-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.03em;
  margin-top: 6px;
}
.ax-pattern-sub {
  font-size: 9.5px;
  color: var(--text-4);
  margin-top: 2px;
  font-family: var(--mono);
}

/* --- Best/Worst post extremes --- */
.ax-bw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ax-bw-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
  position: relative;
}
.ax-bw-card:hover {
  border-color: rgba(0, 196, 114, 0.28);
  transform: translateY(-1px);
}
.ax-bw-best { border-color: rgba(0, 196, 114, 0.32); }
.ax-bw-best .ax-bw-tag { background: rgba(0, 196, 114, 0.18); color: var(--accent); }
.ax-bw-lifetime { border-color: rgba(192, 132, 252, 0.32); }
.ax-bw-lifetime .ax-bw-tag { background: rgba(192, 132, 252, 0.18); color: #c084fc; }
.ax-bw-worst { border-color: rgba(245, 158, 11, 0.32); }
.ax-bw-worst .ax-bw-tag { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.ax-bw-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.ax-bw-label {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 8px;
  font-weight: 600;
}
.ax-bw-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.35;
  margin: 4px 0 10px;
}
.ax-bw-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ax-bw-pts {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

/* --- Cred Sources stacked bar --- */
.ax-cred-stack { display: flex; flex-direction: column; gap: 12px; }
.ax-cred-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.ax-cred-seg { display: block; height: 100%; }
.ax-cred-seg.ax-cred-eng { background: linear-gradient(90deg, #00C472, #14F195); }
.ax-cred-seg.ax-cred-ach { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ax-cred-seg.ax-cred-pro { background: linear-gradient(90deg, #c084fc, #38bdf8); }
.ax-cred-legend {
  display: flex; flex-direction: column; gap: 6px;
}
.ax-cred-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 50px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.ax-cred-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ax-cred-dot.ax-cred-eng { background: var(--accent); }
.ax-cred-dot.ax-cred-ach { background: #f59e0b; }
.ax-cred-dot.ax-cred-pro { background: #c084fc; }
.ax-cred-val {
  font-family: var(--mono);
  color: var(--text-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ax-cred-pct {
  text-align: right;
  color: var(--text-4);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- Quality Signals --- */
.ax-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ax-quality-stat {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.ax-quality-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.ax-quality-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.03em;
  margin-top: 6px;
}
.ax-quality-sub {
  font-size: 9.5px;
  color: var(--text-4);
  margin-top: 2px;
  font-family: var(--mono);
}

/* 7. Empty state shared style for analytics sections */
.ax-empty {
  text-align: center;
  padding: 28px 20px;
  background: var(--bg-1);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.ax-empty-icon {
  width: 42px; height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(52, 255, 175, 0.08);
  border: 1px solid rgba(52, 255, 175, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #34ffaf;
}
.ax-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}
.ax-empty-desc {
  font-size: 12px;
  color: var(--text-4);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}